/*---------------------------------------------------------------------
 * Table of Contents:
 *
 * 1.0 - Google Fonts & Reset
 * 2.0 - Text Styles
 * 3.0 - Layout
 * 4.0 - Header & Navigation
 ---------------------------------------------------------------------*/

/* 1.0 Google Fonts & Reset--------------------------------------------------------------------------*/
@font-face {
	font-family: 'roboto_light';
	font-style: normal;
	font-weight: 300;
	src: url('fonts/RobotoSlab-Light.ttf');
}

@font-face {
	font-family: 'roboto_regular';
	font-style: normal;
	font-weight: 400;
	src: url('fonts/RobotoSlab-Regular.ttf');
}

@font-face {
	font-family: 'roboto_bold';
	font-style: bold;
	font-weight: 700;
	src: url('fonts/RobotoSlab-Bold.ttf');
}

@font-face {
   font-family: 'entypo';
      src: url('fonts/entypo/symbols/entypo.eot');
      src: url('fonts/entypo/symbols/entypo.woff') format('woff'),
           url('fonts/entypo/symbols/entypo.ttf') format('truetype');
   font-weight: normal;
   font-style: normal;
}

article, aside, details, figcaption, figure, footer, header, nav, section, summary 
{display: block;}

audio,canvas,video 
{display: inline-block;}

audio:not([controls]) 
{display: none; height: 0;}

[hidden] 
{display: none;}

html 
{font-size: 100%;}

body 
{margin: 0; padding: 0; font-family: Verdana, sans-serif; color: #555555; background: #E0E9FF;}


/* 2.0 - Text Styles--------------------------------------------------------------------------*/
h1, h2, h3, h4, h5, h6 
{padding: 0; color:#387DE0; margin: 1em 0;}

h1
{font-family: roboto_light, Verdana, sans-serif; font-weight: 300;}

h2, h3, h4, h5, h6 
{font-family: roboto_regular, Verdana, sans-serif; font-weight: 400; }

h1 
{font-size: 30px; margin: 1em 0;}

h2 
{font-size: 25px;}

h3 
{font-size: 20px;}

h4 
{font-size: 16px;}

p, ul, li 
{font-family: roboto_regular, Verdana, sans-serif; font-weight: 400; font-size: 14px;}

p 
{padding:0; margin:1.2em 0;}

.featuredContent
{padding: 6px 20px; background: rgba(0, 173, 238, 0.2); 
-moz-border-radius: 8px; border-radius: 8px; 
margin:1.5em 0;}

.featuredContent p 
{font-size: 16px;}

a 
{text-decoration: none; color:#333333;}

a:focus 
{outline: thin dotted;}

a:active, a:hover 
{color: #333333; outline: 0;}

strong, .highlight
{font-family: roboto_bold, Verdana, sans-serif; font-weight: 700; }


/* 3.0 - Layout--------------------------------------------------------------------------*/
#wrapper
{width:850px; margin:0 auto; position: relative; background: white; margin-top: 0;
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
-webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.3);
-moz-box-shadow:    0px 0px 5px 0px rgba(0, 0, 0, 0.3);
box-shadow:         0px 0px 5px 0px rgba(0, 0, 0, 0.3);}

#wrapper > article:first-child
{top: auto;}

#wrapper > article
{padding:0 25px; clear: both;}

#wrapper > article:after 
{content: ""; display: table; clear: both;}

.clearer
{margin:0; padding: 0; font-size: 1px; line-height: 0; clear: both;}

/* 4.0 - Header & Navigation-------------------------------------------------------------*/
#pageHeader
{position: relative; background-color: #387DE0; padding: 0 25px;
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}

#pageHeader:after 
{content: ""; display: table; clear: both;}

#pageHeader h3 
{margin:0; padding: 0; float: left; font-size: 16px; line-height: 45px;
font-family: roboto_bold, Verdana, sans-serif; font-weight: 700; color: white;}

#pageHeader h3 a 
{display:block; color: white; padding-left: 80px; 
background: url('ui/logo.png') no-repeat left center;}

#pageHeader nav
{float: right;}

#pageHeader nav:after 
{content: ""; display: table; clear: both;}

#pageHeader nav ul 
{margin:0; padding: 0; list-style-type: none;}

#pageHeader nav ul li 
{float: left;}

#pageHeader nav ul li a
{display: block; padding: 0 10px;
color: white; line-height: 45px;}

#pageHeader nav ul li a:hover 
{opacity:0.8;}

#pageHeader nav ul li.selected a
{background: rgba(250, 250, 250, 0.3); }

a#menuIcon
{display: block; position: absolute; top: 0; right: 0; font-size: 50px; 
font-family: 'entypo', Arial, Helvetica, sans-serif; line-height: 45px; color: #ffffff;
z-index: 200; padding: 0 15px; display: none;}

a#menuIcon.selected
{background: #ffffff; color: #387de0;}

/* 6.0 - Featured Article-------------------------------------------------------------*/
#wrapper > article.featuredArticle
{background: #4088D6; color: white; position: relative;
text-align: center; padding-top: 20px; padding-bottom: 10px;}

.featuredArticle h2, .featuredArticle h3, .featuredArticle h4, .featuredArticle p 
{color: white;} 

.featuredArticle h2
{margin-bottom: 0;}

.featuredArticle a 
{color:white;}

.roundPicture
{position: relative; margin:0 auto; overflow: hidden; 
-webkit-border-radius: 90px;
-moz-border-radius: 90px;
border-radius: 90px;  
background: white;}

.roundPicture, .roundPicture img 
{display: block; width: 180px;}

.floatingPicture
{float: left; margin-right: 20px; margin-left: 0; margin-bottom: 8px;}

.video
{float:left; width: 48%; margin-right: 2%; margin-bottom: 15px;}

.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.largeTitle
{background: rgba(0, 173, 238, 0.2); height: 270px;}

.largeTitle h2
{padding: 20px; color: #555555; font-size: 20px;}

/* 7.0 Home ------------------------------------------------------------------ */
.homeArticle
{background: url('images/teens.jpg') no-repeat left top #4088D6; color: white;
margin-bottom: 20px;}

.quote
{margin-left: 510px; margin-right: 20px; background: #4088D6; padding: 20px 0;}

.quote h2 
{color: white; font-size: 18px;}

a.button
{background: red; color: white;}

/* 8.0 Contact ------------------------------------------------------------------ */
.contactCard
{background: #4088D6; margin-bottom: 20px;}

.contactCard h2, .contactCard h4, .contactCard p, .contactCard a 
{color: white;}

.contactCard h2 
{font-size: 25px; margin-bottom: 0; padding-top: 20px; margin-top: 0;}

.contactCard .roundPicture
{margin-left: 20px; float: left; margin-left: 0; margin-top: 15px; margin-bottom: 15px;
margin-right: 20px;}

.contactCard .roundPicture, .contactCard .roundPicture img
{width: 120px;}

.contactCard 
{}

.diploma 
{margin-bottom: 10px;
position: relative;
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}

.diploma:after
{content: ""; display: table; clear: both;}

.diploma > a
{display: block; float: left; width: 25%;}

.diploma > a > img
{display: block; width: 100%; border: 1px solid #cccccc;}

.diplomaDesc
{float: right;  width: 75%; padding:0 25px 0 20px; 
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}

.diplomaDesc > h3 
{font-size: 18px; margin-top: 0; text-transform: capitalize;}

/* 9.0 - Footer-------------------------------------------------------------*/
#pageFooter
{padding:10px 25px; background: rgba(56, 125, 224, 0.3); margin-top: 50px;}

#pageFooter:after 
{content: ""; display: table; clear: both;}

#pageFooter .leftContent 
{float: left;}

#pageFooter p
{font-size: 12px; margin: 5px 0;}

#pageFooter p#topButton
{float: right; }

#pageFooter p#topButton a
{display:block; font-family: 'entypo', Arial, Helvetica, sans-serif; font-size: 45px;
line-height: 30px; background: #4088D6; color: white; width: 30px; height: 30px; 
text-align: center; -webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;}

/* Media Queries---------------------------------------------------------*/

/* Tablet */
@media (max-width: 860px) {
  #wrapper 
  {width: 100%;}

  #pageHeader
  {position: fixed; top: 0; left: 0; width: 100%; z-index: 100;
  	-webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.5);
	-moz-box-shadow:    0px 1px 3px 0px rgba(0, 0, 0, 0.5);
	box-shadow:         0px 1px 3px 0px rgba(0, 0, 0, 0.5);}

  h1:first-child
  {padding-top: 1.2em;}

  .homeArticle .quote
  {margin-left: 50%;}

  .homeArticle .quote > h2
  {margin-left: 2em;}
}

/* Phablet */
@media (max-width: 705px) {
	a#menuIcon
	{display: block;}

	#pageHeader nav
	{float: none; position: fixed; right: 0; top: 45px; background: #ffffff; width: 60%;
	display: none;   	
	-webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.5);
	-moz-box-shadow:    0px 1px 3px 0px rgba(0, 0, 0, 0.5);
	box-shadow:         0px 1px 3px 0px rgba(0, 0, 0, 0.5);}

	#pageHeader nav ul li 
	{float: none; border-bottom: 1px solid #bdbdbd;}

	#pageHeader nav ul li a
	{padding-left: 20px; padding-right: 50px; color: #387DE0;}

	#pageHeader nav ul li.selected a, #pageHeader nav ul li.selected a:hover
	{font-family: roboto_bold, Verdana, sans-serif; font-weight: 400; }

	.largeTitle
	{height: auto;}

	.video
	{width: 100%; margin-left: 0; margin-right: 0; float: none; }



}

/* Phone */
@media (max-width: 580px) {

	#pageHeader h3 a 
	{padding-left: 0; background: none;}

	#pageHeader nav
	{width: 100%;}

	.homeArticle
	{background: #4088D6;}

	.homeArticle .quote
	{margin: 0; }

	.homeArticle .quote > h2
	{margin: 0;}

	h1
	{font-size: 26px;}

	h1:first-child
  	{padding-top: 1.6em;}

	h2
	{font-size: 20px;}

	h3
	{font-size: 16px;}

	.quote h2
	{font-size: 16px;}

	.floatingPicture
	{float: none; margin: 0 auto;}

	#pageFooter
	{padding: 10px 0 0 0;}

	#pageFooter .leftContent
	{margin:0 25px;}

	#pageFooter .leftContent, #pageFooter p#topButton
	{float: none;}

	#pageFooter p#topButton
	{margin: 0; margin-top:15px;}

	#pageFooter p#topButton a
	{float: none; font-size: 55px; line-height: 55px; width: auto; height: 55px; 
	-webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0;}

	.contactCard .roundPicture
	{display: none;}

	.diploma > a, .diplomaDesc
	{float: none; width: 100%; padding: 0;}

	.diplomaDesc > h3
	{font-size: 16px; margin: 10px 0; }

	.diplomaDesc > p 
	{font-size: 12px;}



}