/* ==========================================================================
   Theme Styles
   ========================================================================== */

@font-face {
    font-family: 'aleobold';
    src: url('fonts/aleo_bold_macroman/Aleo-Bold-webfont.eot');
    src: url('fonts/aleo_bold_macroman/Aleo-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/aleo_bold_macroman/Aleo-Bold-webfont.woff') format('woff'),
         url('fonts/aleo_bold_macroman/Aleo-Bold-webfont.ttf') format('truetype'),
         url('fonts/aleo_bold_macroman/Aleo-Bold-webfont.svg#aleobold') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'aleoregular';
    src: url('fonts/aleo_regular_macroman/Aleo-Regular-webfont.eot');
    src: url('fonts/aleo_regular_macroman/Aleo-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/aleo_regular_macroman/Aleo-Regular-webfont.woff') format('woff'),
         url('fonts/aleo_regular_macroman/Aleo-Regular-webfont.ttf') format('truetype'),
         url('fonts/aleo_regular_macroman/Aleo-Regular-webfont.svg#aleoregular') format('svg');
    font-weight: normal;
    font-style: normal;

}


@font-face {
  font-family: 'FontAwesome';
  src: url('fonts/fonts/fontawesome-webfont.eot?v=4.2.0');
  src: url('fonts/fonts/fontawesome-webfont.eot?#iefix&v=4.2.0') format('embedded-opentype'), url('fonts/fonts/fontawesome-webfont.woff?v=4.2.0') format('woff'), url('fonts/fonts/fontawesome-webfont.ttf?v=4.2.0') format('truetype'), url('fonts/fonts/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}




body{ font-family:'open sans',sans-serif; color:#5b5b5b; background:#f2e3db; }

h1,h2,h3,h4,h5,h6{ text-transform:uppercase; letter-spacing:1px; font-family:'aleobold',serif; font-weight:normal; }

a{ text-decoration:none; color:#052948; }
a:hover{ text-decoration:underline; }

img{ border-radius:4px; }

.wrapper{ width:1020px; margin:0 auto; position:relative; }

p{ margin:0 0 20px; }

.more{ padding:5px 16px; background:#052948; color:#fff; border-radius:4px; text-transform:uppercase; font-size:13px; letter-spacing:1px; }
.more:hover{ background:#009a8b; text-decoration:none; }

.select{ padding:10px 50px; background:#009a8b; color:#fff; border-radius:4px; text-transform:uppercase; font-size:22px; letter-spacing:1px; display:inline-block; margin:0 auto; }
.select:hover{ background:#052948; text-decoration:none; }

.button{ padding:10px 50px; border-radius:4px; font-size:18px; min-width:82px; display:inline-block; vertical-align:middle; text-transform:uppercase; font-family:'aleobold',serif; color:#fff; }
.button.action{ background:#009a8b; margin-right:10px; }
.button.cancel{ background:#d18d60; }
.button:hover{ text-decoration:none; }
.button.action:hover{ background:#052948; }
.button.cancel:hover{ background:#c9b3a7; }

.back {
    color: #d18d60;
    font-family: "aleobold",serif;
    font-size: 16px;
    letter-spacing: 1px;
    position: absolute;
    right: 20px;
    text-transform: uppercase;
    top: 36%;
}

.aligncenter{ display:block; margin:0 auto 20px; clear:both; }

nav li{ display:inline-block; vertical-align:middle; margin-right:8px; padding-right:8px; text-transform:uppercase; }

header#main{ position:relative; padding:10px 0 0; background:url("img/bg2.png") repeat scroll 0 0 #052948; }

#logo{ margin:0 0 -20px; }

#utility{ float:right; font-size:12px; letter-spacing:1px; font-family:'aleoregular',serif; }
#utility a{ color:#fff; padding:0 0 2px; }
#utility .active{ font-family:'aleobold',serif; }
#utility a:hover{ border-bottom:dotted #fff; text-decoration:none; }

nav#main{
	border-bottom:6px solid #009a8b;
}
.center-menu {
	float:left;
	width:100%;
	overflow:hidden;
	position:relative;
}
.center-menu ul {
   clear:left;
   float:left;
   list-style:none;
   margin:0;
   padding:0;
   position:relative;
   left:50%;
   text-align:center;
}
.center-menu ul li {
	display:block;
	float:left;
	list-style:none;
	margin:0 1px;
	padding:0;
	position:relative;
	right:50%;
	text-transform:uppercase;
	letter-spacing:1px;
	font-family:'aleoregular',serif;
}
.center-menu ul li.active{ font-family:'aleobold',serif; }
.center-menu ul li.active a{ color:#fff; background:#009a8b; }
.center-menu ul li a {
    background: none repeat scroll 0 0 #d18d60;
    border-radius: 4px 4px 0 0;
    color: #052948;
    display: block;
    font-size: 14px;
    line-height: 1.3em;
    margin: 0 0 0 1px;
    padding: 5px 16px;
    text-decoration: none;
}
.center-menu ul li a:hover{
	background:#c9b3a7;
	color:#5b5b5b;
}

#subnav{
	background:#052948;
	border-bottom:4px solid #1e3e5a;
}
#subnav .center-menu ul li{ margin:0; border-right:1px solid #1e3e5a; }
#subnav .center-menu ul li:first-child{ border-left:1px solid #1e3e5a; }
#subnav .center-menu ul li a{ border-radius:0; background:none; color:#f2e3db; padding: 8px 16px; }
#subnav .center-menu ul li.active a,  #subnav .center-menu ul li:hover a{ color:#fff; background:#1e3e5a; }

#about{ margin:25px 0; }
#hero, #about-text{ display:inline-block; vertical-align:middle; }
#about-text{ width:445px; margin:0 0 0 25px; }

#topics{ 
	background:#c9b3a7; 
	padding:25px 0;
}
#topics ul{ margin:0; padding:0; }
#topics ul li{ list-style:none; display:inline-block; vertical-align:middle; margin:0 20px 0 0; position:relative; }
#topics ul li .overlay{ position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(5,41,71,.6); text-align:center; border-radius:4px; }
#topics ul li .overlay h3{ color:#fff; margin:80px 0 10px; }
#topics ul li:hover .overlay{ display:block; cursor:pointer; }
#topics ul li:last-child{ margin:0; }

section#main{ padding:40px 0; }

.article{ padding:0 0 30px; margin:0 0 30px; border-bottom:dotted #009a8b; }
.article-copy, .article-image{ display:inline-block; vertical-align:middle; }
.article-image{ position:relative; }
.article-image h2{ position:absolute; text-align:center; width:100%; top:30%; color:#fff; text-shadow:2px 2px 1px rgba(0,0,0,.8); }
.article-copy{ width:600px; margin-left:20px; }
.article footer{ border-top:4px solid #d18d60; position:relative; padding:16px 0; }
.article footer .more{ position:absolute; right:0; top:16px; }
.keywords{ padding:0; margin:0; }
.keywords li{ display:inline-block; list-style:none; vertical-align:middle; }
.keywords li h4{ display:inline-block; margin:0; }
.info footer h4{ margin:0; }
.info footer h4 a{ color:#fff; }
.info footer h4 a:hover{ text-decoration:none; }
.discussion{ padding-left:15px; }
.discussion li {
    font-size: 14px;
    line-height: 18px;
    margin: 0 0 10px;
}

#article-header{ background:#c9b3a7; }
#article-header h1 {
    color: #052948;
    font-size: 40px;
    letter-spacing: 3px;
    text-align: center;
}

#welcome #article-footer{ padding-top:0; }

.info{ width:320px; margin:0 20px 0 0; display:inline-block; vertical-align:top; }
.info:last-child{ margin:0; }
.info .article-copy{ width:auto; margin:0; }
.info p {
    font-size: 15px;
    margin: 0 0 20px;
}
.info footer {
    background: none repeat scroll 0 0 #5b5b5b;
    border-top: 4px solid #d18d60;
    color: #fff;
    padding: 20px;
    position: relative;
}
.info .more{ display:inline-block; margin:0 0 20px; }

#article-footer{ text-align:center; padding:60px 0 40px; }

.selected {
    margin: 0 auto;
    min-height: 500px;
    padding: 80px 0 40px;
    text-align: center;
    width: 450px;
}
.selected h2{ margin:0; text-transform:none; font-weight:normal; }
.selected h1{ margin-top:0; }
.selected label{ margin:0 0 10px; display:block; }
.selected textarea{ margin:0 0 20px; border:2px solid #5b5b5b; padding:4px; }

#selected .wrapper {
    margin: 0 auto;
    padding: 40px;
    width: 900px;
	background:rgba(91,91,91,.2);
}
#selected h2{ max-width:650px; }
#selected footer .wrapper{
    border-top: 8px solid #d18d60;
	background:#5b5b5b;
}
#selected footer .discussion{ width:600px; color:#fff; }
#selected footer h4{ color:#fff; }

#welcome h2 {
    font-family: "aleoregular",sans-serif;
    font-size: 20px;
    margin: 30px auto;
    text-align: center;
    text-transform: none;
    width: 550px;
	color:#052948;
}

#video-header h1 span{ font-size:18px; font-family: "aleoregular",sans-serif; text-transform:none; }
#video{ text-align:center; }

#welcome.teacher{ background:#c9b3a7; }

#progress{ width:805px; margin:0 auto; }
.student{ margin:0 auto 20px; padding:0 0 20px; border-bottom:2px dotted #009a8b; }
.student > img{ display:inline-block; vertical-align:middle; margin:0 20px 0 0; }
.student-info{ display:inline-block; vertical-align:middle; width:600px; }
.student-info h4{ margin:0 0 10px; }
.student-info h4 span{ text-transform:none; font-size:14px; font-family: "aleoregular",sans-serif; }
.student-info h5{ margin:10px 0 0; }

#student .student-info{ vertical-align:top; }
#student.student{ border:0; }
#student .current{ padding:0 0 5px; margin:0 0 20px; border-bottom:2px solid #5b5b5b; }

.badges{ padding:0 0 10px; margin:0 0 30px; border-bottom:2px solid #5b5b5b; }
.badges ul{ padding:0; }
.badges ul li { list-style:none; display:inline-block; vertical-align:middle; margin:0 20px 0 0; font-size:50px; }

#process {
    background: none repeat scroll 0 0 rgba(91, 91, 91, 0.2);
    margin: 0 auto;
    padding: 20px 40px;
    width: 550px;
}
.process{ min-height:460px; }

footer#main{ background:url("img/bg2.png") repeat scroll 0 0 #052948; border-top:6px solid #009a8b; padding:20px 0; }


.meter { 
		height: 20px;  /* Can be anything */
	position: relative;
	margin: 0 0 20px 0; /* Just for demo spacing */
	background: #555;
	-moz-border-radius: 25px;
	-webkit-border-radius: 25px;
	border-radius: 25px;
	padding: 10px;
	-webkit-box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3);
	-moz-box-shadow   : inset 0 -1px 1px rgba(255,255,255,0.3);
	box-shadow        : inset 0 -1px 1px rgba(255,255,255,0.3);
}
.meter > span {
	display: block;
	height: 100%;
	   -webkit-border-top-right-radius: 8px;
	-webkit-border-bottom-right-radius: 8px;
	       -moz-border-radius-topright: 8px;
	    -moz-border-radius-bottomright: 8px;
	           border-top-right-radius: 8px;
	        border-bottom-right-radius: 8px;
	    -webkit-border-top-left-radius: 20px;
	 -webkit-border-bottom-left-radius: 20px;
	        -moz-border-radius-topleft: 20px;
	     -moz-border-radius-bottomleft: 20px;
	            border-top-left-radius: 20px;
	         border-bottom-left-radius: 20px;
	background-color: rgb(43,194,83);
	background-image: -webkit-gradient(
	  linear,
	  left bottom,
	  left top,
	  color-stop(0, rgb(43,194,83)),
	  color-stop(1, rgb(84,240,84))
	 );
	background-image: -moz-linear-gradient(
	  center bottom,
	  rgb(43,194,83) 37%,
	  rgb(84,240,84) 69%
	 );
	-webkit-box-shadow: 
	  inset 0 2px 9px  rgba(255,255,255,0.3),
	  inset 0 -2px 6px rgba(0,0,0,0.4);
	-moz-box-shadow: 
	  inset 0 2px 9px  rgba(255,255,255,0.3),
	  inset 0 -2px 6px rgba(0,0,0,0.4);
	box-shadow: 
	  inset 0 2px 9px  rgba(255,255,255,0.3),
	  inset 0 -2px 6px rgba(0,0,0,0.4);
	position: relative;
	overflow: hidden;
}
.meter > span:after, .animate > span > span {
	content: "";
	position: absolute;
	top: 0; left: 0; bottom: 0; right: 0;
	background-image: 
	   -webkit-gradient(linear, 0 0, 100% 100%, 
	      color-stop(.25, rgba(255, 255, 255, .2)), 
	      color-stop(.25, transparent), color-stop(.5, transparent), 
	      color-stop(.5, rgba(255, 255, 255, .2)), 
	      color-stop(.75, rgba(255, 255, 255, .2)), 
	      color-stop(.75, transparent), to(transparent)
	   );
	background-image: 
		-moz-linear-gradient(
		  -45deg, 
	      rgba(255, 255, 255, .2) 25%, 
	      transparent 25%, 
	      transparent 50%, 
	      rgba(255, 255, 255, .2) 50%, 
	      rgba(255, 255, 255, .2) 75%, 
	      transparent 75%, 
	      transparent
	   );
	z-index: 1;
	-webkit-background-size: 50px 50px;
	-moz-background-size: 50px 50px;
	-webkit-animation: move 2s linear infinite;
	   -webkit-border-top-right-radius: 8px;
	-webkit-border-bottom-right-radius: 8px;
	       -moz-border-radius-topright: 8px;
	    -moz-border-radius-bottomright: 8px;
	           border-top-right-radius: 8px;
	        border-bottom-right-radius: 8px;
	    -webkit-border-top-left-radius: 20px;
	 -webkit-border-bottom-left-radius: 20px;
	        -moz-border-radius-topleft: 20px;
	     -moz-border-radius-bottomleft: 20px;
	            border-top-left-radius: 20px;
	         border-bottom-left-radius: 20px;
	overflow: hidden;
}

.animate > span:after {
	display: none;
}

@-webkit-keyframes move {
    0% {
       background-position: 0 0;
    }
    100% {
       background-position: 50px 50px;
    }
}

.orange > span {
	background-color: #d18d60;
	background-image: -moz-linear-gradient(top, #f1a165, #f36d0a);
	background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f1a165),color-stop(1, #f36d0a));
	background-image: -webkit-linear-gradient(#f1a165, #f36d0a); 
}

.red > span {
	background-color: #f0a3a3;
	background-image: -moz-linear-gradient(top, #f0a3a3, #f42323);
	background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f0a3a3),color-stop(1, #f42323));
	background-image: -webkit-linear-gradient(#f0a3a3, #f42323);
}

.nostripes > span > span, .nostripes > span:after {
	-webkit-animation: none;
	background-image: none;
}