body { margin: 0; font-family: helvetica, arial, sans-serif; background: #005365; }

#container { max-width: 960px; margin: 0 auto; }

#header { 
	background: #005365;
	width: 100%; 
	margin: 0; 
	padding: 0;
	/*background: -moz-linear-gradient(top,  #308395 42%, #005365 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(42%,#308395), color-stop(100%,#005365));
	background: -webkit-linear-gradient(top,  #308395 42%,#005365 100%);
	background: -o-linear-gradient(top,  #308395 42%,#005365 100%);
	background: -ms-linear-gradient(top,  #308395 42%,#005365 100%);
	background: linear-gradient(to bottom,  #308395 42%,#005365 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#308395', endColorstr='#005365',GradientType=0 );*/
	}
	
#headercontainer { padding: 0; margin: 20px; /*background: #999;*/ }

#header #headercontainer p.supertext { font-size: 115%; margin: 0; padding: 0; }
#header #headercontainer p.supertext a { color: #FFF; text-decoration: none; }
#header #headercontainer p.supertext a:hover { text-decoration: underline; }

#header #headercontainer h1 { width: 100%; margin: 10px 0; padding: 0; font-weight: normal; font-size: 200%; }
#header #headercontainer h1 a { margin: 0; padding: 0; color: #FFF; text-decoration: none; display: block; }
#header #headercontainer h1 a:hover { text-decoration: underline; }

#mainbody { width: 100%; margin: 0; padding: 0; color: #333; background: #FFF; }

#mainbodycontainer { text-align: center; margin: 0; padding: 20px; overflow: auto; } /* overflow: auto; is excellent for clearfix situations */

#mainbodycontainer img { border-radius: 4px; }

#mainbodycontainer a.birdlink { margin: 0; padding: 0; }
#mainbodycontainer a.birdlink img { width: 200px; height: 200px; border-radius: 200px; }
/*#mainbodycontainer img.birdinteractive { border: 0px solid #999; box-shadow: 0 0 11px 3px #000; }*/


#mainbodycontainer p { max-width: 600px; margin: 20px auto; /*text-align: justify;*/ }

#mainbodycontainer p a { color: #005365; }

#mainbodycontainer #birdlink { margin: 0px 10px 40px 10px; padding: 0; }
#mainbodycontainer #birdlink img { width: 220px; height: 220px; border-radius: 200px; margin: 10px 20px 20px 10px; transition: all 0.3s ease; }
#mainbodycontainer #birdlink img:hover { transform: scale(1.1); }

#mainbodycontainer h2 { font-weight: normal; margin-top: 0;}
#mainbodycontainer p { line-height: 140%;}

#mainbodycontainer p a.quizlink { padding: 10px 13px 9px 13px; background: #005365; color: #FFF; text-decoration: none; border-radius: 20px; text-transform: uppercase; letter-spacing: 1px; font-size: 80%; transition: all ease 0.2s; }
#mainbodycontainer p a.quizlink:hover { background: #207385; }

#mainbodycontainer p.backtostudy { margin-top: 40px; }
#mainbodycontainer p a.backtostudy { margin: 20px 0 0 0; padding: 13px 18px 12px 13px; background: #005365; color: #FFF; text-decoration: none; border-radius: 20px; text-transform: uppercase; letter-spacing: 1px; font-size: 80%; transition: all ease 0.2s; }
#mainbodycontainer p a.backtostudy:hover { background: #207385; }

#mainbodycontainer .small { font-size: 80%; }

#bird { width: 200px; height: 200px; padding: 0; margin: 1% 1% 2% 1%; background: #EEE; }

#bird img { width: 200px; height: 200px; border-radius: 200px; padding: 0; margin: 0; background: #DDD; transition: all 0.3s ease; }

#bird img:hover { transform: scale(1.1); }

#bird p { font-size: 90%; line-height: 130%; }

#bird audio { width: 50%; }

#footer { margin: 0; padding: 20px 2%; color: #FFF; text-align: center; }
#footer p { color: #FFF; text-decoration: none; font-size: 110%; }
#footer p a { color: #FFF; text-decoration: none;}
#footer p a:hover { text-decoration: underline; }

/*#kindergartenquiz { border: 2px solid #0C3; }*/
#kindergartenquiz img { margin-bottom: 5px; height: 220px; width: 220px; }

#errorblock { border: 1px solid #666; background: #EEE; max-width: 500px; padding: 20px; margin: 0 auto; text-align: left; }


/* QUIZ PAGE STYLES*/

input { padding: 5px; border-radius: 3px; background: #f4f4f4; border: 1px solid #999; }

/* BREAKPOINTS FOR MOBILE */

@media screen and (max-width: 768px) {
	
	#header #headercontainer p.supertext { font-size: 100%; }
	
	#header #headercontainer h1 { font-size: 170%; }
	
	#footer p { font-size: 90%; }
	
	/*#mainbodycontainer a.birdlink img { width: 400px; height: 400px; border-radius: 400px; }*/
	
}