/*
Theme Name: ptareading
Theme URI: http://www.novawebgroup.com
Description: Simple 2-col theme custom made for PTA Family Reading Challenge
Version:1.0
Author: Natalie Rose
Author URI: http://www.novawebgroup.com
 

*/

@charset "UTF-8";
/* CSS Document */

/* CSS RESET -------------------------------------------------------------- */
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td {	
background: transparent;	
border: 0;	
margin: 0;	
padding: 0;
font-weight: normal;
}

h1, h2, h3, h4 {font-family: 'Gotham SSm A', 'Gotham SSm B'; font-weight: 400; font-style: normal;}

h1 {font-size: 35px; line-height: 42px; color:#dd5f28; text-transform: uppercase;}
#content #familiesread h1 { color:#ffffff; }
#familiesread h1 {background:#723389; font-size: 40px; display: block; width: 1086px; margin-bottom: 15px; padding: 10px; line-height: 50px; height: 50px; text-align: center;}
#content h1 {color:#2a988b; padding-bottom: 20px;}
body.home #content h1 {  color:#dd5f28; }
h2 {font-size: 25px; padding-bottom: 15px; color:#00406a;}
#familiesread h2 {font-size: 30px; font-weight: 700; text-align: center; line-height: 38px;}
h3 { font-size: 20px; line-height: 26px; /*color:#2a988b;*/ color:#444444; font-weight: 500; padding-bottom: 12px;}
.home h3 {color:#2a988b;}

p {padding-bottom: 24px;}
#content ul {margin-left: 35px; padding-bottom: 24px;}
#content ul li {padding-bottom: 15px;}
blockquote {padding: 0 50px;}

a {color:#df6420; text-decoration: none;}
a:visited {text-decoration: none;}
a:hover {text-decoration: none;}


.clear { 
clear: both; 
}

sup {font-size: 9px;}

/**** layout ***/
body, html {width: 100%; padding: 0; margin: 0; font-family: arial, helvetica, sans-serif; color:#444444; font-size: 16px; line-height: 24px;}

#wrapper {width:100%; margin: 0 auto;}
.container {width: 1086px; position: relative; margin: 0 auto; padding: 0;}
#header {width:1086px; text-align: center; padding: 0; margin: 0;}
#header #hamburger { display:none; }
#content {width: 1086px; margin: 20px 0; border-top: 1px solid #cccccc;}
body.home #content { margin:0px; border:0px; }
#main {width: 618px; float: left; padding: 0 108px 0 30px; margin-top: 20px;} 
#main .intro p {color:#00446f; font-weight: 600; padding-bottom: 30px;}
.page-familiesread #main, .page-terms-of-service #main, .page-privacy-policy #main {width:1056px; padding-right: 0;}
#main table {margin-bottom: 20px;}
#main table td {padding:0 15px 15px 0;}


#logo {float: left; width:385px; height: 104px;}
/*#logo h1 {text-indent: -9999px; background: url(images/family-reading-experience-logo-sm.png) no-repeat; height: 200px; width: 54px; padding-top: 0; margin-top: 0;}*/
#logo h1 a {}
.translation {float: right;}


#slider, #fomrvideo, #facts, #familiesread {margin-bottom: 50px;}

#slider {padding: 0; margin: 15px 0 60px 0;}

#formvideo {width: 100%; margin-bottom: 60px;}
#signup {float: left; width: 40%;}
#signup form { line-height:100%; }
#video {float: right;}
#section1 #videowrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 0;
	height: 0;
}
#videowrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	z-index: 1;
}

/****  form *****/
.wpcf7-form input {width: 210px; height: 30px; line-height: 20px; }
.wpcf7-form p {font-size: 13px; padding-bottom: 15px;}
.wpcf7-form input[type="checkbox"] {width: 10px; height: 15px;}
.wpcf7-form td {padding-right: 20px;}
.wpcf7-form .wpcf7-submit {background: #2a988b; color:#ffffff; text-transform: uppercase; border: none;}

#facts {float: left; width: 100%; overflow: hidden; position: relative; background: url(images/family-reading-facts.png) center 45px no-repeat;  margin-bottom: 40px; margin-top: 30px;}
#facts h1 {text-align: center;}

#facts ul {margin: 0 0 0 50px; 
list-style: none;
padding: 150px 0 0 0;
text-align: center;
}

#facts ul li {float: left; font-size: 15px; line-height: 20px; width: 265px; }
#facts ul li.fact1, #facts ul li.fact2 {padding-right: 100px;}
#facts .source p {text-align: left; font-size: 13px;}


#familiesread {}
#familiesread p {font-size: 20px; line-height: 28px; text-align: center; padding-bottom: 15px;}

/***** sidebar ****/
#rightcol {float: left; width: 320px; margin-top: 20px;}
.page-familiesread #rightcol, .page-privacy-policy #rightcol, .page-terms-of-service #rightcol {display: none;}
#rightcol a {color:#444444;}
.challenge {color:#ffffff; background: #2a988b url(images/white-arrows.png) 230px center no-repeat; padding: 15px 0px 15px 25px;}
#rightcol .challenge a {color:#ffffff; text-transform: uppercase; font-weight: 400;}
.challenge a:hover {text-decoration:none;}
.challenge p {line-height: 18px; width: 170px; margin: auto 0; padding: 0;}

#rightcol {margin-top: 45px;}
#rightcol .widget {margin-bottom: 25px;}
#rightcol h3 {color:#dd5f28; font-size: 17px; text-align: center; text-transform: uppercase;letter-spacing: 0.1em;}
#rightcol h3 a {color:#dd5f28;}

.reading {border: 1px solid #a8a8a8; text-align: center; padding: 55px 20px 20px 20px; position: relative;}
.reading p {padding-bottom: 0;}
.reading img {position: absolute; top: -35px; left: 113px;}

/******* footer *****/
#footer {margin-top: 40px;}

#utility {
   float:left;
   width:100%;
   overflow:hidden;
   position:relative;
   color:#231f20;
}
#utility ul {
   clear:left;
   float:left;
   list-style:none;
   margin:0;
   padding:0;
   position:relative;
   left:50%;
   text-align:center;
}
#utility ul li {
   display:block;
   float:left;
   list-style:none;
   margin:0;
   padding:0;
   position:relative;
   right:50%;
   border-right: 1px solid #231f20;
}
#utility ul li.last {
	border-right: none;
}
#utility ul li a {
   display:block;
   margin:0 0 0 1px;
   padding:0px 10px;
   color:#231f20;
   text-decoration:none;
   font-size: 10px;
   line-height: 12px;
}

#social {float:left;
   width:100%;
   overflow:hidden;
   position:relative;
   margin: 20px 0;
   padding-bottom: 30px;
}

#social ul {
	clear:left;
   float:left;
   list-style:none;
   margin:0;
   padding:0;
   position:relative;
   left:50%;
   text-align:center;
   
}
#social ul li {
   display:block;
   float:left;
   list-style:none;
   margin:0;
   padding:0 25px 0 0;
   position:relative;
   right:50%;
   height: 54px;
   text-indent: -9999px;
}
#social ul li a {
   display:block;
   margin:0;
   padding:0;
} 

#social li.facebook {width:39px; background: url(images/facebook.png) no-repeat; }
#social li.twitter {width: 39px; background: url(images/twitter.png) no-repeat;}
#social li.youtube {width: 39px; background: url(images/youtube.png) no-repeat;}
#social li.instagram {width: 39px; background: url(images/instagram.png) no-repeat;}
#social li.pinterest {width: 40px; background: url(images/pinterest.png) no-repeat;}
#social li.blog {width: 39px; background: url(images/blog.png) no-repeat;}

.alignleft, img.alignleft {float: left; padding: 0 8px 8px 0;}
.alignright, img.alignright {float: right; padding: 0 0 8px 8px;}

/******* youtube library *****/
.page-template-page-video #main { float:none; width:auto; margin-top:27px; padding:0px; }

.page-template-page-video .intro { background:#3c98b4 url(images/video-icon.png) 42px 37px no-repeat; padding:29px 30px 32px 180px; font-size: 0.95em; }
.page-template-page-video #main .intro p { padding-bottom: 10px; color:#ffffff; }
.page-template-page-video #main .intro a {font-weight: bold; color:#ffffff; text-decoration: underline;}
.page-template-page-video #content h1 { font-size: 34px; color:#ffffff;  padding-bottom: 10px; }
.videos { font-size:12px; line-height:14px; }
.videos .featured { padding: 27px 0px 10px 0px; width: 515px; margin:0px auto; }
.videos .featured img { display:none; }
.videos h2 { color:#3c98b4; font-size:14px; font-weight:bold; padding-bottom:6px; line-height:14px; padding-top:13px; }
.videos .video h2 { padding-top:10px; }
.videos .video { padding:25px 0px 5px 0px; width: 30.93%; margin-right:3.605%; float:left; cursor:pointer; }
.videos .video.last { width: 30.93%; margin:0px; }
.videos .video.col-1 { clear:left; }
.videos .video img { width:100%; height:auto; }
.videos .video iframe { display:none; }


#contentLayer {
    display: none;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    z-index: 5;
}

@media all and (max-width: 1086px) {
	.container { width:100%; }
	#header {  width: auto;  }
	#header h1, #header h2 { padding-left:2%; }
	#logo { float:none; }
	#google_translate_element { position:absolute; top:10px; right:10px; }
	#formvideo { width:98%; margin: 0px auto; }
	#signup { float:none; width:100%; }
	#signup table { width:585px; margin:0px auto; }
	#video { float:none; width:560px; margin:0px auto; }
	#facts { margin:20px 0px; }
	#facts ul { margin:0px 5%; }
	#facts ul li { float:none; width:100%; }
	#facts ul li.fact1, #facts ul li.fact2 { padding-right: 0px; }
	#facts .source p { text-align:center;}
	#familiesread h1 { width:auto; font-size:48px; }
	#content { width:100%; }
	
	#main { width: 64%; padding: 0% 4%; }
	#rightcol { width: 26%; padding-right:2%; }
	.reading { padding-top:25px; }
	#rightcol img { max-width: 100%; height: auto; display:block;}
	#rightcol .reading img { display:none }
	#rightcol .textwidget p { padding-bottom:0px; }
	
	.widget_youtube_post_widget iframe { width:100%; height:170px; }
	.videos { width:98%; margin:0px auto; }
	
	#main table td img { max-width:100%; height:auto; }
	#main table { width:100%; }
	.page-familiesread #main, .page-terms-of-service #main, .page-privacy-policy #main { width:92%; float:none; }
}

@media all and (max-width: 600px) {
	#header { clear: both;padding: 10px 10px 40px 10px;background: #ffffff; width: auto; position:relative; z-index:5; }
	h1 { font-size:25px; line-height:120%; }
	#logo { width: auto;margin-left: 36px; }
	#logo img { max-width:100%; height:auto; }
	#header h1 { font-size:30px; padding:0% 2%; }
	#header h2 { font-size:20px; }
	#section3 { padding:0% 2% 13% 2%; }
	#section3 img, #section4 .nextbutton img {   width: auto;height: auto;  max-width: 100%; }
	.nextbutton p, .nextbutton ul { width:90%; }
	#social ul li a { padding:1% 8%; }
	#signup table { width:100%; }
	#menu { display:none; }
	#header #hamburger { display:block; }
	#google_translate_element { top:100px; z-index:99; }
	
	#signup table, #signup table body, #signup table tr, 
	#signup table td { display:block; width:270px; clear: both; position:relative; }
	#signup h3 { text-align:center; }
	#slider { margin-bottom:30px; margin-top: 0px; }
	#video { width:100%; }
	#video iframe { width:100%; height:300px; }
	#familiesread h1 { height:auto; line-height:40px; font-size: 40px; }
	#social { zoom: 0.9; width: 60%; }
	#social ul {float: none; margin: 0 auto; }
	
	#content {
		background-color: #FFFFFF;
		position: relative;
		width: auto;
		height: 100%;
		margin-top:0px;
	}
	#hamburger {
		border: 1px solid #374C77;
		border-radius: 3px 3px 3px 3px;
		cursor: pointer;
		display: block;
		float:left;
		height: 24px;
		padding: 3px 4px 3px;
		position: relative;
		width: 25px;
		background: #4569b2;
		background: -moz-linear-gradient(top, #4569b2 0%, #4062a5 100%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #4569b2), color-stop(100%, #4062a5));
		background: -webkit-linear-gradient(top, #4569b2 0%, #4062a5 100%);
		background: -o-linear-gradient(top, #4569b2 0%, #4062a5 100%);
		background: -ms-linear-gradient(top, #4569b2 0%, #4062a5 100%);
		background: linear-gradient(to bottom, #4569b2 0%, #4062a5 100%);
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4569b2', endColorstr='#4062a5', GradientType=0);
		z-index:1;
	}
	
	#hamburger div {
		background-color: #fff;
		border: 1px solid #eee;
		border-radius: 2px 2px 2px 2px;
		height: 2px;
		margin-top: 3px;
		width: 90%;
	}
	
	#main { float:none; width: 92%; }
	#rightcol { float:none; width:320px; padding:0px; margin: 0px auto; margin-top: 50px; }
	.widget_youtube_post_widget iframe { width:320px; height:180px; }
	#rightcol .reading img { display:block; }
	.reading { padding-top:55px; }
	
	.page-template-page-video .intro { background-size: 15% auto; padding-left:25%;   background-position: 4% 12%; }
	.videos .featured { width:100%; }
	.videos .featured iframe { width:100%; height:288px; }
	.videos .video, .videos .video.last { width:49%; margin:0px; padding:3% 0%; }
	.videos .video.lasttwo { float: none; padding-right:0px; margin-left:51%; width: 49%; clear:none;}
	
	#main table td { display:block; }
}