@font-face {
  font-family: 'Lobster Two';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/boilerplate/lobstertwo.woff2) format('woff2');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/boilerplate/opensans400.woff2) format('woff2');
}
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/boilerplate/opensans400italic.woff) format('woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/boilerplate/opensans600.woff2) format('woff2');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/boilerplate/opensans700.woff2) format('woff2');
}

body {
	margin:0;
	background-color:#fff;

	color:#111;
	font-family: 'Open Sans', Verdana, sans-serif;
	font-weight: 400; /* normal */

	background-image:url('/boilerplate/bgv2.jpg');
	background-repeat: repeat-y;
	background-position:center top;
}

/* dont load background on less than ipad */
@media screen and (max-width:767px) { body {background-image:none; }}


.wrapper {
	min-width:320px;
	max-width:750px; /*min about 750px for leaderboard and space for skyscraper*/

	font-size: 14px;
	line-height: 22px;

	margin:0 auto;
	padding:115px 5px 20px; /*100px+15 for ad */
	background-color:#fff;

	box-sizing: border-box;
}

.wrapper li {
	margin-bottom:0.5em;
}
ol {padding-left:2em; padding-top:1em;}
ul {padding-left:2em;}

.wrapper a { color:#111; }
.wrapper a:hover { text-decoration:none; }


.toprect, .bottomrect {
	text-align:center;

}

.bottomrect {
	margin-top:1em;
	padding-bottom:0;
}


/* ad top */
.bif-top {width:728px; height:90px;}
@media screen and (max-width:738px) {.bif-top {width:468px; height:60px;}}
@media screen and (max-width:478px) {.bif-top {width:320px; height:50px;}}

/* ad bottom */
.bif-bottom {width:336px; height:280px;}
@media screen and (max-width:478px) {.bif-bottom {width:300px; height:250px;}}

/* ad skyscraper */
.bif-sky {position:absolute; width:160px; height:600px; top:115px; left:50%; margin-left:-540px; background-color:#fff; }
@media screen and (min-width:1100px) { .wrapper {min-height:600px; }}


.homebar, .navbar {

	min-width:320px;
	width:100%;

	position:absolute;
	top:0;
	left:0;

	height:50px;

	display:block;
	text-align:center;

	background-color: rgba(0, 0, 0, 0.65);
}
.navbar {top:50px;}

.fixed {position:fixed; top:0; left:0;}

/*center on screens equal or larger than 1600px */
@media screen and (min-width:1600px) { .homebar, .navbar  {width:1600px; left:50%; margin-left:-800px; }}


.navhome, .navclass, .naveco, 
.navcells, .navhumans, .navplants, .navreprod,
.navgenes, .navevol
{
	display:inline-block;

	box-sizing: border-box;
	width:12.5%;

	height:50px;
	padding-top:13px;

	text-align:center;
	vertical-align:middle;

	color:#fff;
	text-decoration:none;

	font: 22px/22px "Lobster Two",Georgia,serif;

	text-transform: lowercase;
}


@media screen and (max-width:1000px) { 
.navbar {height:100px;}
.navhome, .navclass, .naveco, 
.navcells, .navhumans, .navplants, .navreprod,
.navgenes, .navevol {width:25%;}
.wrapper {padding-top:165px; /*150px+15 for ad */}
}

@media screen and (max-width:500px) { 
.navbar {height:200px;}
.navhome, .navclass, .naveco, 
.navcells, .navhumans, .navplants, .navreprod,
.navgenes, .navevol {width:50%;}
.wrapper {padding-top:265px; /*250px+15 for ad */}
}

.navhome {
	width:100%;
	text-transform: none;

	border-bottom:1px solid #4d4d4d; /*one shade darker */
}


.navhome:hover, .navclass:hover, .naveco:hover, 
.navcells:hover, .navhumans:hover, .navplants:hover, 
.navreprod:hover, .navgenes:hover, .navevol:hover {

	background-color:#42ba0c;
	transition: background-color 0.4s ease 0.1s;
}


/* menu colours*/
.activeclass, .navclass:hover {background-color:#ef7901;}
.activeeco, .naveco:hover {background-color:#d54421}
.activecells, .navcells:hover {background-color:#98bf0d; }
.activehumans, .navhumans:hover {background-color:#01b0ec;}
.activeplants, .navplants:hover {background-color:#7449f1}
.activereprod, .navreprod:hover {background-color:#b147a3}
.activegenes, .navgenes:hover {background-color:#f6b402}
.activeevol, .navevol:hover {background-color:#1e9185}

.navclass {border-bottom:5px solid #ef7901;}
.naveco {border-bottom:5px solid #d54421; }
.navcells {border-bottom:5px solid #98bf0d;}
.navhumans {border-bottom:5px solid #01b0ec;}
.navplants {border-bottom:5px solid #7449f1;}
.navreprod {border-bottom:5px solid #b147a3;}
.navgenes {border-bottom:5px solid #f6b402; }
.navevol {border-bottom:5px solid #1e9185; }


h1, h2, h3 {
	color: #222;
	font-family: "Lobster Two",Georgia,serif;
	text-align: center;
	font-weight: 400;
	letter-spacing: 0px;

	margin:0.2em 0 0.3em;
}

h1 {	font-size: 60px;
	line-height: 72px;
	color:#257DBE; /*blue*/
}

h2 {	font-size: 40px;
	line-height: 48px;
	color:#C20A22; /*red*/
}

h3 {	font-size: 27px;
	line-height: 32px;
	color:#42ba0c; /*green*/
	text-align:left;
}


hr {	border-top: 2px dotted #42ba0c; /*green*/
	color: transparent;
	margin:2em 0 1em;
	clear:both;
}


.did-you-know, .warning {
	margin:3em 0 2em;
	padding:1em 2em;
	border-radius:2px;
	color:#fff;
}

.did-you-know {background: #9b539c;} /*purple */
.warning {color:#222; background: #fdc700;} /*orange */

.did-you-know ul {padding:1em;}


.imgscale {
	padding:5px;

	border-radius:1px;
	background:#42ba0c;
}

.imgscale, .imgscale-borderless {margin:auto;}

.imgscale img, .imgscale-borderless img, .tableimg {
	width:100%;
	height:auto;
}


@media screen and (max-width:1000px) { 
	/* allow tables to x-scroll */
	.generic-wrapper {overflow-x:auto; width:100%; }
}

/* generic table */
.generic {border-collapse:collapse; margin:0 auto 20px auto; background-color:#fff;}
.generic td {border:1px solid #999; padding-left:.5em; padding-right:1em;}

/* quiz divs */
#quiz {
	border: 1px solid #999;
	margin: auto;
}

#quiz-questions {width:100%}
#quiz-questions td {padding-bottom:1em}


.page {width:100%; margin:1em 0;}
.page td {text-align:center;}

#left-arrow, #random, #right-arrow {
	display:inline-block;
	width:76px; /*75px+1error*/
	height:76px; /*75px+1error*/

	background-image:url('/boilerplate/sprites1.png');
	background-repeat: no-repeat;
	background-size: 300px 150px; /* total size of sprite.png */
}
#left-arrow {background-position:-78px -1px; }
#random {background-position:-153px -1px;}
#right-arrow {background-position:-1px -1px;}

#left-arrow:hover, #random:hover, #right-arrow:hover {background-color:#42ba0c;}

#left-side {text-align:left; padding-left:1em; box-sizing: border-box;}
#right-side {text-align:right; padding-right:1em; box-sizing: border-box;}


#footer-outer {

	background-color: rgba(0, 0, 0, 0.65);

	min-width:320px;
	width:100%;
	
	min-height:350px;

	border-top:1px solid #ececec;
	border-top-left-radius:2px;
	border-top-right-radius:2px;
	margin: 0 auto;
}

#footer-inner {
	min-width:300px;
	max-width:600px;

	margin:0 auto;
	padding:20px 0;
	color:#fff;

	font-size: 14px;
	line-height: 20px;
}

#footer-inner a { color:#fff; text-decoration:none;}
#footer-inner a:hover { background-color:#42ba0c;}

#footer-inner .highlight, #footer-inner .highlight a {background-color:#42ba0c; display:inline;}

.footer-left, .footer-right {
	padding-left:5px;
	width:290px;
	display:inline-block;
}

.footer-right {
	padding-top:1.5em;
}

.footer-left p, .footer-right p {
	margin:0.5em 0; /* larger tap targets */
}

.footer-left .chapter, .footer-right .chapter {
	font-weight: 600; /* semi-bold */
}

.footer-left .indent, .footer-right .indent {padding-left:1em;}

#facebook, #twitter, #googleplus {
	display:block;
	width:55px;
	height:55px;
	margin-bottom:3px;

	background-image:url('/boilerplate/sprites1.png');
	background-repeat: no-repeat;
	background-size: 300px 150px; /* total size of sprite.png */
}
#facebook {background-position:-1px -79px;}
#twitter {background-position:-55px -79px;}
#googleplus {background-position:-110px -79px;}


/* START animation */
@-webkit-keyframes class-flick {
50% {
	background: #ef7901;
}}
@-moz-keyframes class-flick {
50% {
	background: #ef7901;
}}
.navclass {
	-webkit-animation: class-flick 1.5s 1s ease 1;
	-moz-animation: class-flick 1.5s 1s ease 1;
}

@-webkit-keyframes eco-flick {
50% {
	background: #d54421;
}}
@-moz-keyframes eco-flick {
50% {
	background: #d54421;
}}
.naveco {
	-webkit-animation: eco-flick 1.5s 1.1s ease 1;
	-moz-animation: eco-flick 1.5s 1.1s ease 1;
}

@-webkit-keyframes cells-flick {
50% {
	background: #98bf0d;
}}
@-moz-keyframes cells-flick {
50% {
	background: #98bf0d;
}}
.navcells {
	-webkit-animation: cells-flick 1.5s 1.2s ease 1;
	-moz-animation: cells-flick 1.5s 1.2s ease 1;
}

@-webkit-keyframes humans-flick {
50% {
	background: #01b0ec;
}}
@-moz-keyframes humans-flick {
50% {
	background: #01b0ec;
}}
.navhumans {
	-webkit-animation: humans-flick 1.5s 1.3s ease 1;
	-moz-animation: humans-flick 1.5s 1.3s ease 1;
}

@-webkit-keyframes plants-flick {
50% {
	background: #7449f1;
}}
@-moz-keyframes plants-flick {
50% {
	background: #7449f1;
}}
.navplants {
	-webkit-animation: plants-flick 1.5s 1.4s ease 1;
	-moz-animation: plants-flick 1.5s 1.4s ease 1;
}

@-webkit-keyframes reprod-flick {
50% {
	background: #b147a3;
}}
@-moz-keyframes reprod-flick {
50% {
	background: #b147a3;
}}
.navreprod {
	-webkit-animation: reprod-flick 1.5s 1.5s ease 1;
	-moz-animation: reprod-flick 1.5s 1.5s ease 1;
}

@-webkit-keyframes genes-flick {
50% {
	background: #f6b402;
}}
@-moz-keyframes genes-flick {
50% {
	background: #f6b402;
}}
.navgenes {
	-webkit-animation: genes-flick 1.5s 1.6s ease 1;
	-moz-animation: genes-flick 1.5s 1.5s ease 1;
}

@-webkit-keyframes evol-flick {
50% {
	background: #1e9185;
}}
@-moz-keyframes evol-flick {
50% {
	background: #1e9185;
}}
.navevol {
	-webkit-animation: evol-flick 1.5s 1.7s ease 1;
	-moz-animation: evol-flick 1.5s 1.7s ease 1;
}
/* END animation */


@media print {

.homebar, .navbar, #footer-outer, .toprect, .bottomrect, .bif-top, .bif-bottom, .bif-sky {display:none;}

body, h1, h2, h3 {color:#000;}
hr {border-top: 2px dotted #000;}
.did-you-know, .warning {color:#000; border:1px solid #000;}

.wrapper, .imgscale, .imgscale-borderless, .tableimg {padding:0; border:0;}

.wrapper:after {
	content:"Printed from xceleratescience.com";
	font-size:20px;
}

} /*@media print*/