@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);
@import url('normalize.css');
@import url('navigation.css');
@import url('columns.css');

body { margin:0; padding:0; width:100%; background-color: #e9e4e0;  }

html { padding:0; margin:0;  }

.L {font-size: 14px; }
.clear { overflow: hidden; width: 100%; }

.wrapper { width:100%; padding: 0; margin: 0 auto;   background:#c1c8d1;}
.default-container { width:100%; height: auto; padding: 0; margin: 0 auto; /*background:#003b4d; */}
.main-container { width:100%; height: auto; padding: 0; margin: 0 auto; /*background:#f5f7f8; */}
.main { max-width:1020px; padding:15px 0; margin:0 auto; }
.titlebar { margin:0 auto; padding:0; width:100%; height: 32px; position:relative;  background: #eaeaea;  }
.topbar { margin:0 auto; padding:0; width:100%; min-height: 145px; overflow: hidden; background: #ffffff; border-bottom:1px solid #efefef; }
.header { max-width:1020px; margin:0 auto;  padding: 0; }
.Pictograms { width:100%;}

button.btn.collapsed:before
{
    content:'+' ;
    display:block;
    width:15px;
}
button.btn:before
{
    content:'-' ;
    display:block;
    width:15px;
}

h1 { font-size: 24px; font-weight: 400;  padding-bottom:15px; margin:0; color:#00236b; }
h1 img { float: left; padding-right: 5px; }
h2 { font-size: 19px; font-weight: 400;  padding:2px 0; margin:0; color:#323232;}
h3 { font-size: 16px; font-weight: 400;  padding:0; margin:0; color:#323232; }
h4 { font-size: 41px; font-weight: 400;  padding:0; margin:0; color:#323232; }


a { color: #00236b; }
a:hover { text-decoration: none; }


.languagebar{ position: absolute; top:2px; right:10px; }


.line { border-top:1px solid #f4f4f4; clear: both; padding: 2px 0;	margin: 0px; }
.line_vert { border-left:1px solid #f4f4f4; padding: 2px 10px;	margin: 0px; }

a.none { text-decoration: none; }


.btn {clear: both;  padding:0; }
.btn a { background-color: #00236b; padding:5px 30px; color:#fff; font-size: 14px; font-weight: 700; text-decoration:none; }
.btn a:hover { background-color: #04215c; color: #FFF; }



.btnR { clear: both; padding: 10px 0; float: right; position: absolute; bottom: 0; right:0;}
.btnR a {  background-color: #00236b; padding:5px 30px; color:#fff; font-size: 14px; font-weight: 700; text-decoration:none;  width: 100%; height: 100%; }
.btnR a:hover {background-color: #04215c; color: #FFF;  	 }

div.btnR input {  background-color: #00236b; padding:5px 30px; color:#fff; font-size: 14px; font-weight: 700; text-decoration:none;  width: 100%; height: 100%; border:0; }
div.btnR input:hover {  background-color: #04215c; color: #FFF;  }






 /*  HEADER  ------------------------------------------------------------------------------------*/

.logo { margin:0; padding:10px 0 0 0; font-size:30px;  width:45%; color:#ffffff;  font-weight:700;}
.logo span { color:#3db4ff;  font-weight:300;}
.logo img { float: left; }

.regular_nav { float: right; }


.profile { margin: 0; padding: 0; width:100%; }
.learning { margin: 0; padding: 0; }
.learning p { color:#bfbbbb; font-size:17px; text-transform: uppercase; }
.learning2 { margin: 0; padding: 0;  }
.learning2 a { color:#5a0057; text-decoration: none; text-align: right;}
.learning2 a.login { font-size:14px; text-decoration: none; }

.online { padding: 5px 0px; float: left; }
.contact_info { padding: 5px 0px; float: right; }
.contact_info a { font-size: 14px; color:#585555; }
.contact_info .active {  font-weight: 700; text-decoration: none; }
.contact_info img {padding-left: 15px; float:right;}






 /*  MAIN CONTENT  ------------------------------------------------------------------------------------*/

.content {
  display:block;
	position: relative;
	padding: 10px 25px;
	background-color: #fff;
}

.content1 {
  display:block;
  position: relative;
  padding: 10px;
  background-color: #fff;
}
.content_noP {
	position: relative;
	padding: 0;
	background-color: #fff;
}
.shadow {
	background-color: rgb(68,68,68); /* Needed for IEs */

	-moz-box-shadow: 1px 1px 3px 3px rgba(68,68,68,0.1);
	-webkit-box-shadow: 1px 1px 3px 3px rgba(68,68,68,0.1);
	box-shadow: 1px 1px 3px 3px rgba(68,68,68,0.1);

	filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.10);
	-ms-filter: "progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.10)";
	zoom: 1;
}


 /* Default / Featured ---*/



.featured_content { position: relative;	padding: 0; /*	background-color: #fff; border:4px solid #dcdddd; */}

.featured_image {
   position: relative;
   width: 100%; /* for IE 6 */
}

.featured_image div {
	position: absolute; margin-left:40px; margin-top:-100px;
	/*background:transparent url(../images/semi-transparent.png); */
	padding: 10px;
}

 .featured_image span {
  font: 36px "Times New Roman",Arial, Helvetica, sans-serif;
	color:#FFF;
	text-shadow: 2px 2px 3px #555;
    filter: dropshadow(color=#555, offx=1, offy=1);
    zoom:1
}

ul.checkmark li {
    background:url("../images/checkmark.jpg") no-repeat;
    padding-left: 16px;
    line-height: 14px;
    margin: 0;
    padding: 0 20px 2px 20px;
}

ul.checkmark {
    list-style-type: none;
    list-style-position:outside;
   margin: 0;
    padding: 0;
}


.featured_ribbon { width: 122px; height: 123px; position: absolute; margin: -8px 0  0 -6px; background: url("../images/featured_ribbon.png") no-repeat; }


.featured_content { }
.featured_cost { clear: both; padding:10px 0;	margin: 0px; background-color: #00236b;}
.details { padding: 10px 0 0 15px;  text-align: left; color:#ffffff;}
.detailsL { padding: 10px 0 0 15px;  text-align: left; color:#ffffff; font-size: 24px;}
.outline { }

.cost { float: right; font-size: 31px; padding:0; margin:0; text-align: right;  }
.buy { padding: 10px 0; float: right;}
.buy a { background-color: #00236b; padding:10px 50px; color:#fff; font-size: 22px; font-weight: 700; text-decoration:none; /*	text-shadow: 1px 1px 0px #073351; */}
.buy a:hover { background-color: #04215c; color: #FFF; }

.buy2 { padding: 10px; float: right;}
.buy2 a { background-color: #ffffff; padding:10px 30px; color:#4ba3d5; font-size: 22px; font-weight: 700; text-decoration:none; /*  text-shadow: 1px 1px 0px #073351; */}
.buy2 a:hover { background-color: #d7e4e9; }


.footer { width: 100%; min-height: 65px; margin: 0 auto;  padding: 10px 0; background: #ffffff; color:#cececa;}
.footer p {  }
.footer_resize { max-width:1020px; margin: 0 auto; }
.footer_resize a { color: #737373; text-decoration: none;}




 /*  TABLE STYLES  ------------------------------------------------------------------------------------*/

/* popup window */
#fade { display: none; background: #000; position: fixed; left: 0; top: 0; width: 100%; height: 100%;	opacity: .80; 	z-index: 9999; }
.popup_block{	display: none; background: #fff; padding: 20px;	border: 20px solid #ddd; float: left;	position: fixed; top: 50%; left: 50%;	z-index: 99999;	-webkit-box-shadow: 0px 0px 20px #000; -moz-box-shadow: 0px 0px 20px #000; box-shadow: 0px 0px 20px #000;	-webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; }
  .popup h2 { font: normal 16px Arial, Helvetica, sans-serif; color:#1d2024; padding:0; margin:0;}
  .popup h2 span { display:block; font: normal 12px Arial, Helvetica, sans-serif; }
  .popup h1 { font: normal 16px Arial, Helvetica, sans-serif; color:#1d2024; padding:0; margin:0;}
  .popup td, li, p { font:normal 12px Arial, Helvetica, sans-serif; line-height:1.8em; padding:5px 0; margin:0;}
  .popup p span { display:block; font: normal 12px Arial, Helvetica, sans-serif; color:#b1b1b1; padding:0; margin:0;}
  .popup a { font:normal 12px Arial, Helvetica, sans-serif; }
  .popup li {margin-left:20px; padding:0 2px; }

img.btn_close {	float: right;	margin: -55px -55px 0 0; }
*html #fade { position: absolute; }
*html .popup_block { position: absolute; }


.fl { float: left; }

.key {
width:299px;
height:280px;
float:left;
margin-left:55px;
background: url("/images/nan/enter.jpg") no-repeat 0 0;
}

#cl { display: block; width: 236px; height: 239px; background: url("/images/nan/class.jpg") no-repeat 0 0; }
.c { display: block; width: 236px; height: 239px; }
#cl:hover { background-position: 0 -239px; }

#get { display: block; width: 236px; height: 239px; background: url("/images/nan/need.jpg") no-repeat 0 0; }
#get:hover { background-position: 0 -239px; }

div#info { position: fixed; bottom: 0px; width: 100%; height: 25px; background: #e9e9e9; border-top: 1px solid #d0d0d0; }
div#info { font: normal 12px arial, sans-serif; padding: 5px; padding-left: 20px; padding-bottom: 0px; margin: 0px; }

div.errors { width: 600px; margin: 0 auto; background-color: #ddd; border: 1px solid red; padding: 10px; margin-bottom: 30px; }
div.errors ul { margin: 0 auto; }
div.errors ul li:first-of-type { list-style: none; margin-left: -2em; text-decoration: underline; font-weight: bold; }


table.data-area, table.order-area tr td { vertical-align: top; border-spacing: 0; }
table.data-area { width: 80%; border: 1px solid #d0d0d0; }
table.data-area thead tr td { border-spacing: 0px; background-color: #e0e0e0; padding: 5px 10px; border-top: none; }
table.data-area thead tr:hover td { background-color: #e0e0e0; }
table.data-area thead tr td p { font: bold 12px arial, helvetica, sans-serif; color: #505050; text-shadow: #c0c0c0 2px 2px; }
table.data-area tr td { border-spacing: 0px; background-color: white; padding: 8px 10px 5px 10px; border-top: 1px solid #d0d0d0; }
table.data-area tr td p { font: normal 11px arial, helvetica, sans-serif; color: #505050; }
table.data-area tr:hover td { background-color: #f4f7bb; }
table.data-area tr.new td { font-weight: bold; }
td.req { font-weight: bold; }


table.order-area, table.order-area tr td { vertical-align: top; border-spacing: 0; }
table.order-area { width: 80%; border: 1px solid #d0d0d0; }
table.order-area thead tr td { border-spacing: 0px; background-color: #e0e0e0; padding: 5px 10px; border-top: none; }
table.order-area thead tr:hover td { background-color: #e0e0e0; }
table.order-area thead tr td p { font: bold 12px arial, helvetica, sans-serif; color: #505050; text-shadow: #c0c0c0 2px 2px; }
table.order-area tr td { border-spacing: 0px; background-color: white; padding: 8px 10px 5px 10px; border-top: 1px solid #d0d0d0; }
table.order-area tr td p { font: normal 11px arial, helvetica, sans-serif; color: #505050; }
table.order-area tr:hover td { background-color: #f4f7bb; }
table.order-area tr td:last-child { text-align: right; }
table.order-area tr.new td { font-weight: bold; }

table.data-form, table.data-form tr td { border-spacing: 0; }
table.data-form { width: 80%; border: 1px solid #d0d0d0; }
table.data-form thead tr td { border-spacing: 0px; background-color: #e0e0e0; padding: 5px 10px; border-top: none; }
table.data-form thead tr:hover td { background-color: #e0e0e0; }
table.data-form thead tr td p { font: bold 12px arial, helvetica, sans-serif; color: #505050; text-shadow: #c0c0c0 2px 2px; }
table.data-form tr td { border-spacing: 0px; background-color: white; padding: 8px 10px 5px 10px; border-top: 1px solid #d0d0d0; }
table.data-form tr td p { font: normal 11px arial, helvetica, sans-serif; color: #505050; }
table.data-form tr:hover td { background-color: #f4f7bb; }
table.data-form tr.new td { font-weight: bold; }



div.errors { width: 400px; height: auto; padding-top: 10px; padding-bottom: 10px; border: 1px solid black; background-color: #e9e9e9; text-align: center; vertical-align: middle; }
div.errors p { font: normal 13px arial, sans-serif; color: #d00000; }

table.index-courses { width: 100%; }
table.index-courses tr td { padding: 5px; }
table.index-courses tr td h1 { font: bold 20px arial, sans-serif; color: #c00000; }
h1.red { font: bold 20px arial, sans-serif; color: #c00000; }

div.index-certprog { width: 59%; float: left; }
table.index-certprog thead tr td { border-spacing: 0px; background-color: #e0e0e0; padding: 5px 10px; border-top: none; }
table.index-certprog thead tr td p { font: bold 12px arial, helvetica, sans-serif; color: #505050; text-shadow: #c0c0c0 2px 2px; }
table.index-certprog { width: 99%; }
table.index-certprog tr td { padding: 7px; }
table.index-certprog tr td h1 { font: bold 20px arial, sans-serif; color: #c00000; }


div.index-progress { width: 40%; float: left; }
table.index-progress thead tr td { border-spacing: 0px; background-color: #e0e0e0; padding: 5px 10px; border-top: none; }
table.index-progress thead tr td p { font: bold 12px arial, helvetica, sans-serif; color: #505050; text-shadow: #c0c0c0 2px 2px; }
table.index-progress { width: 99%; }
table.index-progress tr td { padding: 7px; }
table.index-progress tr td h1 { font: bold 20px arial, sans-serif; color: #c00000; }


hr.style-two {
    border: 0;
    height: 1px;
    background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
    background-image:    -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
    background-image:     -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
    background-image:      -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
}

.textrotate {
	-webkit-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

div.certprog_title {
	width: 351px;
	height: 73px;
	background: url("/images/layout/certprog_title.jpg") no-repeat;
	padding: 10px 20px;
	vertical-align: center;
}
div.certprog_title h1 { font: bold 18px arial, sans-serif; color: #c00000; }
div.certprog_title h2 { font: normal 13px arial, sans-serif; color: #909090; }

div.certprog_requirements { width: 270px; height: 73px; vertical-align: center; }
div.certprog_requirements h2 { font: bold 14px arial, sans-serif; color: #909090; }
div.certprog_requirements p { font: normal 12px arial, sans-serif; color: #909090; }

div.certprog_completed { width: 200px; height: 73px; vertical-align: center; }
div.certprog_completed h2 { font: bold 14px arial, sans-serif; color: #909090; }
div.certprog_completed p { font: normal 12px arial, sans-serif; color: #909090; }


table.certprog_programs tr td { border-spacing: 0px; }
table.certprog_programs { width: 100%; border: 1px solid #d0d0d0; }
table.certprog_programs thead tr td { border-spacing: 0px; background-color: #e0e0e0; padding: 5px 10px; border-top: none; }
table.certprog_programs thead tr:hover td { background-color: #e0e0e0; }
table.certprog_programs thead tr td p { font: bold 12px arial, helvetica, sans-serif; color: #505050; text-shadow: #c0c0c0 2px 2px; }
table.certprog_programs tr td { border-spacing: 0px; background-color: white; padding: 8px 10px 8px 15px; border-top: 1px solid #d0d0d0; }
table.certprog_programs tr td p { font: normal 11px arial, helvetica, sans-serif; color: #505050; }
table.certprog_programs tr:hover td { background-color: #f4f7bb; }
table.certprog_programs tr td.req { font-weight: bold; }


a.dark_btn { background-color: #00236b; padding:6px 8px 6px 8px; color:#fff; font: 16px Arial, Helvetica, sans-serif; text-decoration:none; }
a.dark_btn:hover { background-color: #04215c; color: #FFF; }

a.light_btn { background-color: #7b7b7b; padding:6px 8px 6px 8px; color:#fff; font:bold 16px Arial, Helvetica, sans-serif; text-decoration:none; }
a.light_btn:hover { background-color: #04215c; color: #FFF; }

a.dark_btn2 { background-color: #ed1c24; padding:6px 8px 6px 8px; color:#fff; font: 20px Arial, Helvetica, sans-serif; text-decoration:none; }
a.dark_btn2:hover { background-color: #04215c; color: #FFF; }

div.efasurvey { width: 80%; margin: 0 auto; }
div.efasurvey ul { list-style: none; margin: 0; }






 /*Hide / or resize if screen is too small ---*/
@media only screen and (max-width : 520px) {
   .logo { margin:0; padding:20px 0 0 0; text-align:center;}
  .topbar { margin:0 auto; padding:0; width:100%; position:relative; }
  .learning {  display: none;	}
  .learning2 {  display: block; }
  .regular_nav {  display: none; }
  .tag {  display: none;	}
  .call {  display: none;	}
  .featured_ribbon { display: none; }
  .featured_image div { margin-top:-90px;  padding-left: 25px;}
  .featured_image span { font: 18px "Times New Roman",Arial, Helvetica, sans-serif; }
  .details { display: none; }
  .details2 { display: block; }
  .check li { font-size: 13px; }
}



.PictogramGame {
position: relative;
padding-top: 25px;
padding-bottom: 67.5%;
height: 0;
margin-bottom: 16px;
overflow: hidden;
}

.PictogramGame.widescreen { padding-bottom: 57.25%; }
.PictogramGame.vimeo { padding-top: 0; }

.PictogramGame iframe,
.PictogramGame object,
.PictogramGame embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
@media only screen and (max-device-width: 800px), only screen and (device-width: 1024px) and (device-height: 600px), only screen and (width: 1280px) and (orientation: landscape), only screen and (device-width: 800px), only screen and (max-width: 767px) {
.PictogramGame { padding-top: 0; }
}


body, p, ul, li, td, div  { font:normal 12px "Open Sans", Arial; color:#585555; }


div#close_demo { z-index: 4; position: absolute; top:0; right:0; background-color: #000; padding: 10px; }
div#close_demo a { color:#fff; text-align: center; cursor: pointer;}
div#overlay { display: none; z-index: 98; background: #000; position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; text-align: center; }

div#game_demo { display: none; position: absolute; z-index: 99; width:100%; height: 100%; padding:0; margin: 0 auto; }

div#demo.widescreen { padding-bottom: 0; }
div#demo.vimeo { padding-top: 0; }

div#demo iframe,
div#demo object,
div#demo embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 0;
display:block;
}
.js-video {
  height: 0;
  padding-top: 25px;
  padding-bottom: 67.5%;
  margin-bottom: 10px;
  position: relative;
  overflow: hidden;
}

.js-video.widescreen {
  padding-bottom: 56.34%;
}

.js-video.vimeo {
  padding-top: 0;
}
.js-video embed, .js-video iframe, .js-video object, .js-video video {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: absolute;
}
.video-wrapper { max-width:854px; }


.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}