body {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 16px;
	color: #333;
	background-color: #FFFFFF;
	text-align: center;
	margin: 0px;
	padding: 0px;
}
a { color: #36C; }
a:hover { color: #390; }
img {border: 0px;}
h1, h2, h3, h4 { font-family: 'Montserrat', sans-serif; }
h1 { color: #039; font-size: 28px; padding-top: 30px;} 
h3 { font-size: 18px; padding-top: 30px;}
.smallprint { font-size: 10px; color: #333; line-height: 1.4em; font-family: Verdana, Geneva, sans-serif;}
div.buffer {margin-top: 40px; padding: 70px 5% 30px; background-color: #ececed; border-top: 4px solid #30488f;}
.halfsie {
	display: inline-block;
	width: 45%;
	margin: 0 2% 30px;
	vertical-align: top;
}
#jeterpic {
	background-image: url(images/cover-bgsm.jpg);
	background-repeat: no-repeat;
	background-position: center top;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	box-shadow: 0px 0px 30px #000;
	min-width: 400px;
}
#jeterpic.inner {
	background-image: url(images/cover-inside.jpg);
}
#header {
	background: #2f4996;
	background: rgba(47, 73, 150, .9);
	padding: 20px 40px;
	border-top: 6px solid #9dcc64;
	border-bottom: 6px solid #9dcc64;
}
#insidestrip {
	background: #2f4996;
	background: rgba(47, 73, 150, .9);
	padding: 10px 40px;
	border-top: 6px solid #9dcc64;
	border-bottom: 6px solid #9dcc64;
}
.insidelogo { margin: -5px 0;}
.logopub, .logokids {
	width: 35%;
	height: auto;
	max-height: 50px;
	min-height: 30px;
}
.logopub {
	float: left;
}
.logokids {
	
}
#quote {
	min-height: 200px;
	border-top: 1px solid #333;
}
#quote.inner {
	min-height: 200px;
	border-top: 1px solid #333;
	text-align: left;
	padding: 40px 0 0;
}
#headshot {
	min-height: 400px;
}
#footer {
	background-color: #000;
	padding: 20px 0 35px;
	margin-bottom: 80px;
	text-align: center;
	color: #FFF;
	font-family: 'Montserrat', sans-serif;
	font-size: 12px;
}
#footer img {margin: 0px 3px -4px;}
#centered {
	width: 100%;
	margin: 0 auto;
}
#thequote {
	font-family: 'Montserrat', sans-serif;
	color: #FFF;
	font-size: 1.2em;
	line-height: 1.5em;
	padding: 60px 1% 70px 47%;
	text-shadow: #000 0px 0px 5px;
	width: 536px;
}
#thequote img {
	border: 4px solid #333;
	box-shadow: 0px 0px 8px #000;
	margin: 10px 10px 0;
}
#thequote img:hover {
	border: 4px solid #fff000;
	box-shadow: 0px 0px 8px #000;
	margin: 10px 10px 0;
}
.dates {
	font-size: 15px;
	text-align: center;
	width: 150px;
	display: inline-block;
	line-height: 1.2em;
	padding-top: 10px;
}
#main {
	background-color: #FFF;
	background: rgba(255, 255, 255, .8);
	padding: 40px 40px 60px;
	text-align: left;
	line-height: 1.8em;
}
#main.inside {padding-top: 20px;}
.attribute {
	color: #EEE;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	font-weight: bold;
	letter-spacing: .2em;
	padding-top: 10px;
}
#smpic {
	display: none;
}
#photo {
	margin: -160px 0 0 0px;
	float: right;
}


#logoleft { float: left; }
#logoleft {
	text-align: left;
	color: #CCC;
	padding: 0 0 0 30px;
	font-size: 14px;
	font-family: 'Montserrat', sans-serif;
}
#logoleft img { width: 100%; height: auto; max-width: 431px;}

#themenu a:hover { color: #FFF;}
#themenu {margin-bottom: 26px;}

/* BE SURE TO INCLUDE THE CSS RESET FOUND IN THE DEMO PAGE'S CSS */

/*------------------------------------*\
    NAV
\*------------------------------------*/
#nav{
    list-style:none;
    font-weight:bold;
	margin: 8px 0;
    float:left; /* Clear floats */
    width:100%;
    /* Bring the nav above everything else--uncomment if needed.
    position:relative;
    z-index:5;
    */
}
#nav li{
    float:left;
    position:relative;
}
#nav a{
    font-size: 16px;
	color: #CCCCCC;
	text-decoration: none;
	display: block;
	padding: 2px 12px;
	border-right: 1px dotted #000
}
#nav a.firstnav { padding-left: 0px; margin-left: -20px;}
#nav a:hover, #nav a.featured:hover {
    color:#fff;
}
#nav a.featured {
	background-color:#9dcc64;
	color: #2f4996;
	margin-left: 12px;
}
ul, li {border: 0px; padding: 0px;}

/*--- DROPDOWN ---*/
#nav ul{
    background:#fff; /* Adding a background makes the dropdown work properly in IE7+. Make this as close to your page's background as possible (i.e. white page == white background). */
    background:rgba(255,255,255,0); /* But! Let's make the background fully transparent where we can, we don't actually want to see it if we can help it... */
    list-style:none;
    position:absolute;
    left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */
	margin: 0px; padding: 0px;
}
#nav ul li{
    padding-top:1px; /* Introducing a padding between the li and the a give the illusion spaced items */
    float:none;
}
#nav ul a{
    white-space:nowrap; /* Stop text wrapping and creating multi-line dropdown items */
}
#nav li:hover ul { 
    left:0; 
}
#nav li:hover ul a{ 
    background:#12161f;
	text-decoration:none;
	padding: 6px;
	font-size: 90%;
}
#nav li:hover ul li a:hover{ 
    background:#333;
}
#nav li.coming div {
	position: absolute;
	background-color: #900;
	height: 18px;
	padding: 5px 12px 5px 7px;
	top: 1px;
	width: 100px;
	z-index: 999;
	left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */
}
#nav li.coming:hover div, #nav li.coming:active div {
	left: 115px;
	
}


.bookcol, .featuredcol {
	width: 250px;
	float: left;
	margin: 0 50px 20px 0;
	text-align: center;
	background-color: #EEE;
	border-radius: 8px;
	padding: 30px 20px;
}
#rightcol {
	margin-left: 360px;
}
.featuredcol {
	width:330px;
	margin-bottom:40px;
}
.featuredcol .photocredit {
	font-size:9px;
	text-align:right;
	margin:0 2em;	
}
.photocredit {
	line-height: 1.1em;
	padding-top: 6px;
}
.bookcol img, .featuredcol img {
	box-shadow: 0px 0px 10px #000;
	border: 4px solid #FFF;
	margin-top: 15px;
}
.bookcol a:hover img {
	border: 4px solid #fff000;
}
.pulledquote {
	padding:1em;
	margin:1em 0 0 0;
	line-height:130%;
	outline:3px solid #9dcc64;
	text-align:left;
}
.pulledquote strong.saidby {
	display:block;
	text-align:right;
}
.featuredimg {
	display:block;
	width: 250px;
	margin:0 auto;
	border:3px solid #9dcc64;
}
.quizshell {
	display:block;
	width:80%;
	min-height: 300px;
	margin:0 auto;
	padding: 0 6%;
	border:3px solid #9dcc64;
	text-align: center;
}
.rotate {
	-ms-transform: rotate(5deg);
	-webkit-transform: rotate(5deg);
	transform: rotate(5deg);
}
.dropshadow {
	box-shadow: 10px 10px 5px #888888;
}
.roundedcorners {
	border-radius: 20px;
}
.featuredimg .caption {
	display:block;
	text-align:center;
	line-height:100%;
	margin-bottom:.5em;
}
a.popup {
	background-color: #2f4996;
	color: #FFF;
	font-family: 'Montserrat', sans-serif;
	text-align: center;
	width: 210px;
	border-radius: 6px;
	padding: 10px;
	text-decoration: none;
	display: inline-block;
	margin: 25px 10px 0 0;
	font-size: 14px;
}
a.popup:hover {
	background-color: #0d2774;
}

select {
	padding: 5px;
	border: 1px solid #999;
	border-radius: 4px;
	width: 170px;
	font-family: 'Montserrat', sans-serif;
	margin-bottom: 5px;
}
.oneeducator {
	background-color: #EEE;
	padding: 40px;
	border-radius: 12px;
}
.oneeducator ul {
	list-style-position: outside;
	list-style-type: disc;
	margin: 20px;	
}
#overlay, #overlay-two, #overlay-three {
	display: none;
}
#overlay.show, #overlay-two.show, #overlay-three.show {
	display: block;
	background: rgb(0, 0, 0); 
	background: rgba(0, 0, 0, .65);
	color: #FFF;
	padding: 20px;
	position: absolute;
	top: 0px;
	left: 0px;
	height: 100%;
	width: 100%;
}
.bookcontent {
	margin: 70px auto 0;
	width: 80%;
	max-width: 500px;
	border-radius: 12px;
	padding: 20px 40px 40px;
	background-color: #000;
	text-align: left;
}
.bookcontent {
	border: 3px solid #36C;
}
.closex {
	text-align: right;
	margin-bottom: 15px;
}
.one-item, .one-wall {
	border-radius: 10px;
	background-color: #CCC;
	padding: 15px;
	text-align: center;
	width: 200px;
	margin: 0 10px 10px;
	height: 300px;
	display: inline-block;
	vertical-align: top;
}
.one-wall p {font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 12px; line-height: 19px; margin: 10px 0 0;}
.one-item img { width: 175px; height: 225px; border: 1px solid #666;}
.one-item a:hover img { box-shadow: 0px 0px 8px #666; }
.one-item h2, .one-wall h2 { font-size: 16px;}
.one-wall img { max-width: 175px; height: auto; border: 1px solid #666;}
.home-p {
	padding: 0 360px 0 30px; max-width: 600px;
}
.home-p.featured {
	padding: 30px; font-weight: bold; font-size: 19px; text-align: center; font-family: 'Montserrat', sans-serif;
	margin: 0 360px 0 30px; border-radius: 12px;
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#fefcea+0,fcea85+100 */
background: rgb(254,252,234); /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover,  rgba(254,252,234,1) 0%, rgba(252,234,133,1) 100%); /* FF3.6-15 */
background: -webkit-radial-gradient(center, ellipse cover,  rgba(254,252,234,1) 0%,rgba(252,234,133,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: radial-gradient(ellipse at center,  rgba(254,252,234,1) 0%,rgba(252,234,133,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefcea', endColorstr='#fcea85',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */


}
.col-a {
	padding: 0 30px; width: 250px; float: left;
}
.col-b {
	padding: 0 30px; float: left;
}
.book {
	text-align: center;
	float: left;
	width: 260px;
}
ul {
	font-weight: bold;
	padding-left: 30px;
	}
li {
	
}
.callout {
	margin: 30px;
	border-radius: 12px;
	padding: 20px;
	text-align: center;
	border: 3px dashed #CCC;
}
.rightcol {
	padding-left: 430px;
}
.all-books {
	background-color: #deebfd;
	border-radius: 12px;
	padding: 10px 0 10px 10px;
	margin: 0 auto 40px;
	text-align: center;
}
.all-books img {
	height: 145px;
	margin: 5px;
}
.all-books img:hover {
	opacity: .7;
}
a.series-break {
	margin-left: 20px;
	padding-left: 20px;
	display: inline-block;
	border-left: 1px dotted #06C;
}

@media only screen and (min-width: 1000px) {
#headshot {
	height: 400px;
}
}
@media only screen and (max-width: 1080px) {
#photo {
	margin: 0 0 0 0px;
	float: right;
}
#photo img { width: 200px; height: auto;}
.home-p {
	padding-right: 200px;
}
	.home-p.featured { margin-right: 200px; }
}
@media only screen and (min-width: 886px) {
	#nav { display: block; }
	#mobilenav { display: none; }
}
@media only screen and (max-width: 885px) {
	.halfsie {
	display: block;
	width: 95%;
	margin: 0 2% 30px;
}
	#header { position: absolute; top: 0px; width: 100%;}
	#quote {padding-top: 150px;}
	#main {}
	#nav { display: none; }
	#mobilenav { display: block; }
	#menuswitch { font-size: 18px; margin: 10px 0;}
	#menuswitch a { color: #FFF;  text-decoration: none; }
	#menuswitch a:hover { color: #FFF000; }
	#mobile-dropdown {
		width: 200px;
		background-color: #000;
		background: rgba(0, 0, 0, .9);
		position: absolute;
		display: none;
	}
	#mobile-dropdown.show {
		display: block;
	}
	#mobile-dropdown a {
		display: block;
		padding: 10px;
		border-bottom: 1px dotted #333333;
		text-decoration: none;
		color: #999;
	}
	#mobile-dropdown a:hover {
		background-color: #006;
		color: #FFF;
	}
	#quote.inner { padding-top: 0px;}
	#logoleft {padding-left: 0px;}
	#main.inside {padding-top: 1px;}
	
	.bookcol, .featuredcol {
		width: 80%;
		margin: 30px auto;
		float: none;
		clear: both;
	}
	.featuredcol img {
		max-width: 300px;
		width: 95%;
	}
	.rightcol {
	padding-left: 0px;
	}
	#rightcol {
		margin-left: 0px;
	}
	.featuredimg {width: 200px;}
.featuredimg img {
	max-width: 200px;
}
.rotate {
	-ms-transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	transform: rotate(0deg);
}
}
@media only screen and (max-width: 900px) {
	.col-a {float: none;}
}
@media only screen and (max-width: 1000px) {
#thequote {
	padding: 60px 0 70px 0;
	margin: 0 auto;
}
}
@media only screen and (max-width: 540px) {
#thequote {
	width: 320px;
}
.book {
	width: 160px;
}
.book img {
	height: 175px;
}
#photo {
	margin: 0 auto;
	float: none;
	width: 200px;
}
.home-p {
	padding-right: 0px;
}
	.home-p.featured { margin-right: 0px;}
}