/*
    Browsers apply their own default values for these elements,
    so we're resetting everything to even the playing field.
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td 
{
	margin: 0;
	padding: 0;
	border: 0;
	/*outline: 0;*/
	vertical-align: baseline;
}
ol, ul {
	list-style: none;
}

blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

 a:focus, a img:focus {
	outline: #000 solid 1px !important; 
}   


table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
/* General styles for all pages */
body {
    font-size:100%;
    font-family:Helvetica,Arial, Sans-Serif;
    color: #717073;
    background: #FFFFFF;
}

a:link {
  -webkit-transition: all 0.2s ease-out;  
     -moz-transition: all 0.2s ease-out;  
      -ms-transition: all 0.2s ease-out;  
 -o-transition-delay: all 0.2s ease-out; 
          transition: all 0.2s ease-out;  
}   
img {font-style:italic;font-size:0.5625em;} 
ul {list-style-type:circle;}
ol {list-style-type: decimal;}
ul.no-bullet, li.no-bullet {
  list-style: none; }
li .inline {display:inline; padding-right: 15px;}
hr {
    margin-top: 0.75em;
    margin-bottom: 0.6875em;
    border: 1px solid #e7e7e7;
    border-style: none none solid;   
}
.tde .MenuBar ul {list-style:none !important;}
.tde h2 {margin-top:20px;}
.memberLogin hr {border: 1px solid #d9d9d9 !important;}
.underline {text-decoration:underline !important;}
sup {vertical-align:text-top;}
/* General Classes that can be applied to most elements */
.black {color: #111111;}
.orange {color:#F78E1E;}
.gray {color: #717073;}
.white {color: #ffffff;}
.green {color: #8cc541;}
.blue {color: #009ddc}
.red {color: #fe0000;}
.yellow {color: #FFC40C;}

.center {margin: 0 auto;}
.rounded {
         -o-border-radius: 5px;
        -ms-border-radius: 5px;
    -webkit-border-radius: 5px;
       -moz-border-radius: 5px; 
            border-radius: 5px;
}

.NoBorder {
    border:none !important; /* Undecided if to remove */
}
.spacer { /* This is for the country/login control at the top of the page */
    border-right: 1px solid;
}

/* drop shadow for images */
.drop-shadow {
	-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.5);
	   -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.5);
	        box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.5);	
}

/* Typographic manipulation */
.txtLeft {text-align: left;}
.txtCenter {text-align: center;}
.txtRight {text-align: right;}
.TinyText {font-size:9px;}
.small-text {font-size: .7em;}
.text-error {font-size: .750em; line-height: 1.5; margin:.2em 0 1em 0; color: #fd0203;}
.right {float: right;}
.left {float: left;}
.clear {clear: both;}
.indent {margin-left: 10px;}
.margin-top-none {margin-top: 0;}
.small-caps {font-variant: small-caps;}
.border-top-none {border-top:none;}
.border-top {border-top: solid 1px #e7e7e7;}

.alphalist {list-style-type: upper-alpha;}
.clear {clear: both;}
/* Specific content sections */

.MenuBar {padding-right:10px;}

.MenuBar img {
    margin: 13px 0 0 10px; 
    float:left; 
}

Blockquote {background: url(../i/quotespriteorange.png) no-repeat scroll -2px -60px;}  /*Graphical quotation marks */
Blockquote {
    width:auto;
    margin: 24px 0 24px 0;
    padding: 8px 0 14px 24px;
    border-top: solid 1px #e7e7e7;
    border-bottom: solid 1px #e7e7e7;
    background-repeat:no-repeat;
}
.QuoteClose {
    background: transparent url(../i/quotespriteorange.png) no-repeat -2px -2px;
    width:18px;
    height:18px;
    display:inline-block;
    margin:0 0 -5px 7px;
}  

.NavMenu {
    float:right;
}
.NavMenu ul {
    list-style-type:none;
}
.NavMenu li {
    float:left;
    font-size: 0.9em;
}
.NavMenu a, .NavMenu a:visited {
    display:inline;
    text-align:center; 
    padding: 0 10px; 
}

/* Tables Code */

table{
    border:1px solid #e0e0e0;
    text-align:center;
    width: 100%;
}
td, th {
    padding:6px 12px;
    margin:0;
}
table th {
    border-bottom:1px solid #e0e0e0;
    color:#4e4d50;
    font-weight:bold;
}
table tr:nth-child(2n+1), .even {background-color: #f4f4f4;}

/* End Tables Code */

.switcher {
    height: 15px;
    padding: 6px 5px 5px 0;    
}
.switcher a {
    float:right; 
    padding:0 5px 2px 5px;
    line-height:12px;
}

/* Different item types for the sidebars, these can be reused.*/
.SideBarLinks ul {list-style:none; margin:0.75em auto;}
.SideBarLinks li {border-top:solid 1px #fff; border-bottom:solid 1px #e7e7e7;}
.SideBarLinks li.active {background-color:#fff;}
.SideBarLinks a {display:block;padding:1.07em 1.07em 1.07em 45px;}
.SideBarLinks a:hover, .SideBarLinks a:focus {background-color:#f4f4f4;}
.SideBarLinks li.active a:hover{color: #f4f4f4;background-color:#fff;cursor:default;}
.SideBarList ul {list-style:none; margin:0 auto;}
.SideBarList li {border-top:solid 1px #fff; border-bottom:solid 1px #e7e7e7;padding:1.07em 1.07em 1.07em 45px;}
.ArrowBullet a {background: url(../i/add.png) no-repeat 6.5% 51%;}
.PDFBullet a {background: url(../../all/i/pdficon.png) no-repeat 3% 50%;}
.CheckBullet li {background: url(../../all/i/check.png) no-repeat 5% 15px;}

/* Newer attempt at CSS3 Buttons*/
.button,.button:visited,disabled.button,enabled.button {
	border-style: solid;border-width: 0px;cursor: pointer;font-weight: 700;line-height: normal; margin: 10px 10px 10px 2px;
	position: relative;text-decoration: none;text-align: center;
	  -webkit-appearance: none;
	  -webkit-border-radius: 0;
	  display: inline-block;
	  padding: 1em 2em;
	  background-color: #f78e1e;
	  border-bottom-color: #e88216;
	  border-bottom-width: 3px !important;
	  color: #fff;
	  transition: background-color 300ms ease-out;	
}

.button:hover,.button:focus, .enabled.button:hover,.enabled.button:focus {
	 background-color: #cc7313;color: #fff;
}   

/* duplication needed because of the way our course JS applies classes, sadface :( */

.disabled.button {opacity: 0.4;-ms-filter:"alpha(opacity=40)";filter: alpha(opacity=40);cursor:default;}
.enabled.button {opacity: 1.0;-ms-filter:"alpha(opacity=100)";filter: alpha(opacity=100);cursor:pointer;}

.xsmall.button, .xsmall.button:visited {font-size:.6em !important; color: #fff;}
.small.button,.small.button:visited {font-size:0.75em;}
.large.button {font-size:1.25em; color: #fff;}
.larger.button {font-size:1.50em; color: #fff;}
.largest.button {font-size:2em; color: #fff;}
.orange.button, .disabled.button,.enabled.button {background-color: #f78e1e; border:solid 1px #EC7E09; color: #fff;}
.green.button {background-color: #8cc541; border: solid 1px #78AC35; color: #fff;}
.green.button:hover, .green.button:focus, .enabled.green.button:hover,.enabled.green.button:focus {background-color: #569643 !important;color: #fff;} 
.black.button {border-style: solid;border-width: 0px;cursor: pointer;font-weight: 700;line-height: normal; margin: 10px 10px 10px 2px;
	position: relative;text-decoration: none;text-align: center;
	  -webkit-appearance: none;
	  -webkit-border-radius: 0;
	  display: inline-block;
	  padding: 1em 2em;
	  font-size: 1em;
	  background-color: #444;
	  border-color: #222;
	  border-bottom-width: 3px !important;
	  color: #fff !important;
	  transition: background-color 300ms ease-out;	}

.black.button:hover, .black.button:focus, .enabled.black.button:hover,.enabled.black.button:focus {
	background-color: #111;color: #fff;
}    

/* - end new buttons */

#buttonContainer {margin-top: 85px;}
#buttonContainer select {
margin-top:35px;
padding: 5px 10px;
width: auto;
}

#subHeaderBtn {position:absolute; top:10px; margin-left: 752px; font-size:1.1em;}

/*     Footer      */

.footer-content {padding-bottom: 10px;}
.footer {
    /*height: 244px;  for docking footer at bottom of page */
	/*position: relative;  for docking footer at bottom of page */
    background: #f78e1e;
    display:block;
    line-height:1.5;
    color:#fff  !important;
}  

.footer h2 {font-size:.875em; color: #ffffff;}
.footer li {border-bottom: 1px dotted #ffffff;padding: 10px 0;}
.footer .security {margin-top:15px;}
/*.footer .grid33 .content > p:first-of-type {padding-top:10px;}*/
.footer .grid33 .content > h2:first-of-type {padding-top:15px;}
.footer .content ul, .sitemap ul{
    list-style: none;
    position:relative;
    left:-15px;
}

.footer .content ul {margin-top: 0;}
.footer h2 + p, .footer h2 + img {margin-top: 10px;}

.footer a:link, .footer a:visited {color: #fff;}
.footer a:hover, .footer a:focus {color:#452700;}
/*.footer a:active, .footer a:focus {outline:none;}*/

.footer .socialMedia {margin-top:18px;}
.footer .socialMedia img,.subFooter img {margin: 0 10px 0 0; border:none; opacity: 1; -webkit-transition: all .5s ease-in-out; -moz-transition: opacity .5s ease-in-out;-o-transition-delay: all .5s ease-in-out;transition: all .5s ease-in-out;-ms-filter:"alpha(opacity=100)";filter: alpha(opacity=100);}
.footer .socialMedia img:hover,.footer .socialMedia img:focus,.subFooter img:hover,.subFooter img:focus {opacity: 0.7;-ms-filter:"alpha(opacity=70)";filter: alpha(opacity=70);}
.footer h3 {font-size:1.3333333333333333em;}
.footer-content ul.small-text {margin-top:16px;}

.sub-footer {
	color: #666666;
	padding-top: 20px;
	padding-bottom:75px;
	background: #ffffff;
}
.sub-footer img {
	padding: 5px 20px 12px 2px;
}
.sub-footer .mediaBlock {
	margin:0;
}
.sub-footer .mediaBlock .copy p {line-height: 1.4em;margin-top: 5px;}
.sub-footer .mediaBlock .imgExtra {margin-left: 0;}
.sub-footer .mediaBlock .imgExtra img {padding-right: 0;}

.border-bottom {border-bottom: 1px dotted #ffffff;padding-bottom: 10px;}
.footer-state-list ul {border-top: 1px dotted #999;padding: 20px 0 15px 0; margin-left: 10px;}
.footer-state-list li {display: inline-block;zoom: 1;*display: inline;border-bottom: none; padding: 5px 10px 5px 0;}
.footer-state-list li a:link, .footer-state-list li a:visited {color:#717174;}
.footer-state-list li a:hover {color:#111;}

/* form styles */
fieldset {
    width: auto;
    height: auto;
}

label, legend {font-size:0.875em;color:#f78e1e; margin: 5px 0 0 3px;}

input[type="text"],input[type="password"], textarea, select {
    padding: 6px 9px 5px;
    background: #FFFFFF;
    font:0.750em Helvetica,Arial,Geneva,sans-serif;
    color:#222;
    width: auto;
    border:1px solid #ccc;
    margin: 1px 2px 5px 2px;
}  
/*input:focus, */textarea:focus, select:focus {
   /* -moz-box-shadow:0 0 5px #f78e1e;
    -webkit-box-shadow:0 0 5px #f78e1e;
    box-shadow:0 0 5px #f78e1e;  */  
    border: 1px solid #f78e1e; 
    background-repeat: no-repeat;   
    outline: none;
}


/*input[type="submit"]:focus {
    border: 1px solid #555;   
}
input[type="submit"]:active {
    border: 1px solid #555;
    -webkit-box-shadow: inset 0 0 8px rgba(0,0,0,0.75);
    -moz-box-shadow: inset 0 0 8px rgba(0,0,0,0.75);
    box-shadow: inset 0 0 8px rgba(0,0,0,0.75);    
}*/

select { 
    background: #FFFFFF;    
    font:0.750em Helvetica,Arial,Geneva,sans-serif;
    color:#000;
    border:1px solid #ccc;
}

/* Media Block [ image with text floated next to it ] */
.mediaBlock {margin:12px 0 12px;}
.mediaBlock, .copy {overflow:hidden; _overflow:visible; zoom:1;}
.mediaBlock .copy p { margin-top: 0;}
.mediaBlock .img {float:left; margin-right: 10px;}
.mediaBlock .img img{display:block;}
.mediaBlock .imgExtra{float:right; margin-left: 10px;}
.errorMsg {
    color:#ee8f00 !important;
    font-weight:bold;
    font-size:1em;
    background: url('../../all/i/warning.png') no-repeat 0 0;
    height: auto;
    padding: 4px 0 0 35px;
    margin: 0 0 35px 0;
    line-height:32px;
    } 
.errorMsg ul {
    list-style-type:none;
    margin:0 !important;
    padding:0 !important;
}
.errorMsg div {color:#ee8f00 !important;}

.errorMsg a:link, .errorMsg a:visited {color: #444 !important;}
.errorMsg a:hover, .errorMsg a:focused {color: #777 !important;}

/*Login Page Image */
.loginImage {
    background: url(../i/loginhunter.jpg) no-repeat;
    width: 219px;
    height: 315px;
    margin-left: 100px;     
}

/*Error Page Image */
.errorPageImage {
    background: url(../i/404hunter.jpg) no-repeat;
    width: 339px;
    height: 380px;
    position: absolute;
    top: 122px;
    margin: 0 0 0 110px;
}

/*Specific to Test Delivery */
#logo {    
    background: url("../i/hexnoframe.gif") no-repeat;
    height: 34px;
    width: 200px;
    position: relative;
    top: 10px;
    left: 10px;
}

/* Glossary tooltip items */
.tooltip {
	border-bottom: 1px dotted #000000; outline: none;
	font-weight:bold;
	cursor: help; text-decoration: none;
}	    
.tooltip:hover {background:#ffffff; text-decoration:none;} /*BG color is a must for IE6*/
.tooltip span {
    display:none; 
    margin: 2em 0 0 -2em;
    width:250px;
	border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; 
	box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);    
    background: #eeeeee;
    background: -moz-linear-gradient(top, #ffffff, #e1e1e1);
    background: -webkit-gradient( linear, 0 40%, 0 150%, from(#ffffff), to(#e1e1e1) ); 
   	filter: progid:DXImageTransform.Microsoft.gradient(enabled='true',
                startColorstr=#ffffff, 
                endColorstr=#e1e1e1, 
               GradientType=0); 
    border:solid 1px #ccc;
    font-weight:normal;	
    padding: 0.5em 0.8em;
    color:#000;
}
.tooltip:hover em {
	font-family: Helvetica, Arial, sans-serif; font-size: 1.2em; font-weight: bold;
	display: block; padding: 0.2em 0 0.6em 0;
}
.tooltip:hover span{display:inline; position:absolute;z-index:900;}
.custom { padding: 0.5em 0.8em 0.8em 2em; }
* html a:hover { background: transparent; }
.help {
    background: #eeeeee;
    background: -moz-linear-gradient(top, #ffffff, #e1e1e1);
    background: -o-linear-gradient(top, #ffffff, #e1e1e1);
    background: -webkit-gradient( linear, 0 40%, 0 150%, from(#ffffff), to(#e1e1e1) ); 
   	filter: progid:DXImageTransform.Microsoft.gradient(enabled='true',
                startColorstr=#ffffff, 
                endColorstr=#e1e1e1, 
               GradientType=0); 
    border:solid 1px #ccc;
    font-weight:normal;
}
/* Progress Bar */
.gradient { /* We've started using this gradient on more things, so I've broken it out on its own */
	background-image: -webkit-gradient(linear, left top, left bottom,
			color-stop(0.0, rgba(255, 255, 255, 0.8)),
			color-stop(0.01, rgba(255, 255, 255, 0.6)),
			color-stop(0.5, rgba(255, 255, 255, 0.3)),
			color-stop(0.5, rgba(255, 255, 255, 0.2)),
			color-stop(1.0, rgba(255, 255, 255, 0.0)));			
	background-image: -moz-linear-gradient(top,
			rgba(255, 255, 255, 0.6) 0%,
			rgba(255, 255, 255, 0.3) 50%,
			rgba(255, 255, 255, 0.2) 50%,
			rgba(255, 255, 255, 0.0) 100%);	      
}
.progressContainer,.progressContainer_comp {
    overflow:hidden;
    border: solid 1px #aaa;
    padding-right:5px;
	background-color: #f5f5f5; 
    background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #f5f5f5), color-stop(1, #d5d5d5));
    background: -moz-linear-gradient(#f5f5f5 0%, #d5d5d5 100%);
    background: -o-linear-gradient(#f5f5f5 0%, #d5d5d5 100%);
	-webkit-box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.4);
    -moz-box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.4);
    box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.4);
}
.progressBar {
    padding:5px 0 5px 5px;
    overflow:hidden;
    background-color: #f78e1e;    
}    
.progressBar span {font-weight:bold;color:#fff;}

/* complex version */
.progressContainer_comp {padding:0 !important;}
.progressChapter {color:#c9751a;font-weight:bold;position:relative;float:left;}
.progressBar_comp {background-color:#f78e1e;border-left:solid 1px #aaa;position:absolute;padding:0;}
.progressChapter span {position:relative;z-index:10;}

/* Grid system */
.row {
	width: 100%;
	margin: 0 auto; 
	overflow:hidden;

}
.row .content {margin: 0 10px 12px;}
.row img, img {max-width:100%;}
.grid10, .grid15, .grid20, .grid25, .grid30, .grid33, .grid35, .grid40, .grid45, .grid50, .grid55, .grid60, .grid66, .grid70, .grid75, .grid80, .grid85, .grid90 {
	float: left;
	margin-left: 1%;
}
.grid10 {width: 9%;}
.grid15 {width: 14%;}
.grid20 {width: 19%;}
.grid25 {width: 24%;}
.grid30 {width: 29%;}
.grid33 {width: 32.3%;}
.grid35 {width: 34%;}
.grid40 {width: 39%;}
.grid45 {width: 44%;}
.grid50 {width: 49%;}
.grid55 {width: 54%;}
.grid60 {width: 59%;}
.grid66 {width: 65.7%;}
.grid70 {width: 69%;}
.grid75 {width: 74.1%;}
.grid80 {width: 79%;}
.grid85 {width: 84%;}
.grid90 {width: 89%;}

.first {margin-left: 0;	clear: left;}

.loginStatus {float: right; margin: 0 10px 0 0;}

.pipe {color: #F78E1E;} /* logged in - switcher at the top */

.brag {padding: 2px 0 1px 0;} /* facebook brag in the exam center */
.brag span {padding: 2px 4px 0 25px;}

/* 
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
||||||||||||||||||||||||||||||||||||||| Overwrite styles |||||||||||||||||||||||||||||||||||||||||
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
*/
 
/* 
The Base font size for most browsers is 16px (100%). EM values allow text to be resized but still maintain the same vertical rhythm.
We want our base font size to be 14px, with a 24px base line height. All calculations are based on those figures.
*/
p,span,ul,ol,table {
    font-size:0.875em; /* 16 x 0.875 = 14px */
    line-height:1.714285714285714em; /* 14 x 1.714285714285714 = 24px */
    margin-top:0.857142857142857em; /* People felt there was too much whitespace between paragraphs so I halved it, F U Vertical rhythm. */
    width:95%;
}

a:link, a:visited {font-size:0.875em;color:#F78E1E; text-decoration:none;font-weight:bold;} /* set links to 14px as well (if they're not in a paragraph) */
a:hover,a:focus {color:#000;}
a:active {color:#717073;}

/* EMs calculate from the size of the parent element, so this sets links inside elements back to the right size */
p a:link,p a:visited, ul a:link, ul a:visited, ol a:link, ol a:visited,
h1 a:link, h2 a:link, h3 a:link,h1 a:visited,h2 a:visited,h3 a:visited,a.button,a.button:visited {font-size:1em;}
h1,h2,h3,h4,h5,h6 {font-family:Helvetica,Arial,Sans-serif;}
h1 {font-size:2.25em;line-height:0.6666666666666667em;padding:0.6666666666666667em 0 0.6666666666666667em 0.3333333333333333em;} /* 16 X 2.25 = 36px */
h2 {font-size:1.3em;line-height:1.2em;margin-top:.15em;margin-bottom:0;} /* 16 X 1.5 = 24px */
h3 {font-size:.975em;line-height:1.5em;margin-top:1.5em;margin-bottom:0;}
h4 {font-size:.85em;line-height:1.3em;margin-top:1.2em;margin-bottom:0;}
#main-content {padding-top: 10px; padding-bottom: 35px;}
.SubHeader {
    background: #f78e1e;
    width: 100%;
    color: #fff; 
    top:50px !important;margin-bottom:50px;
    /*margin: 8px 0 16px 0; /* We're not dealing with font sizes, so I put in pixel values to equal 24px */
    position:relative;
}


::-moz-selection {  /* colour values for when you select text on a page, because I like controlling anything I can */
background: #717174;
color: #fff;
} 
::-webkit-selection {
background: #717174;
color: #fff;
} 
::selection {
background: #717174;
color: #fff;
} 
.box { /* This box should do for most of our separation, with State-specific items as a possible exception */
    background: rgb(240,240,240); /* Old browsers */
    background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(230,231,232,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(230,231,232,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(230,231,232,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(230,231,232,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(230,231,232,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(230,231,232,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e6e7e8',GradientType=0 ); /* IE6-9 */
    overflow:hidden;
    margin:1.5em 0 0 0;
    border:solid 1px #d9d9d9; /* 0.0625 X 16 = 1px    X 2 (top and bottom) */
    padding:0.6875em; /* 16 X 0.6875 = 11px   X 2 (top and bottom) = 22 + 2 pixel border = 24px */
} 
.box h3 {margin:0; line-height: 1.3em;}
a .box {margin-top: 0.719em;}
a .box:hover,a .box:focus {background:#fff;filter:none;cursor:hand;}

/*  FIX FOR STATE SELECT SPLASH PAGE LOGO & TEXT SPACING   */
a .box .grid75 {margin-left: 5px;}
a .box .grid25 {width: 23%}
a .box img {margin-top: 10px;}
/* end state select fix  */

.orangebox h3 {margin:0 0 12px 0;}
.orangebox ul {margin-left:15px;}
.orangebox {
    background: #FEF5EB;
    width: auto;
    height:175px;
    overflow:hidden;
    margin:1em 0 1em 0;
    border:solid 1px #FCD7B0; /* 0.0625 X 16 = 1px    X 2 (top and bottom) */
    padding:1em; /* 16 X 0.6875 = 11px   X 2 (top and bottom) = 22 + 2 pixel border = 24px */ 
    -moz-box-shadow:2px 4px 5px #e2e2e2;
    -webkit-box-shadow:2px 4px 5px #e2e2e2;
    box-shadow:2px 4px 5px #e2e2e2;       
}
.orangebox input[type="text"] {
    width:150px;
}
.orangebox img {max-width:100%;} 
.orangebox .mediaBlock {margin: 0 0 12px 0;}
.sidebar,.sidebarshort {height:auto;float:left;}
.sidebar {min-height: 782px; background: url(../../all/i/rightback.jpg) left top no-repeat;}
.sidebarshort {min-height: 434px; background: url(../../all/i/rightbackshort.jpg) left top no-repeat;}
.sidebar .content,.sidebarshort .content {margin:0 10px 0 20px;}
/* most of these are dealing with leading issues */
h2 + p {margin-top:1.714285714285714em;}
p + h3 {margin-top:0.75em;}
p + img {margin-top:1.5em;}
.box + p {margin-top:1.714285714285714em;}
ul,ol {width:auto;margin-left:17px;}
ol {margin-left:25px;}
.wrapper {width:980px;margin: 0 auto;} /* Container to center everything on large screens */
.header {
   position: fixed;
	top: 0;
	left:0;
	width:100%;
	height: 3.05em !important;
	background: #ffffff;
	z-index: 900;
}
.gradient01 /* Grey (Gray for you Americans) to white for sections on landing pages */ 
{
    width:100%;
    border-top:solid 1px #ccc;
    background: #eeeeee;
    background: -moz-linear-gradient(top, #eeeeee, #ffffff);
    background: -o-linear-gradient(top, #eeeeee, #ffffff);
    background: -webkit-gradient( linear, 0 40%, 0 100%, from(#eeeeee), to(#ffffff) ); 
    filter: progid:DXImageTransform.Microsoft.gradient(enabled='true',
                startColorstr=#eeeeee, 
                endColorstr=#ffffff, 
                GradientType=0); 
}     

.gradient02 /* from top to bottom - light gray to slightly darker shade */ 
{
    width:100%;
    background: #eeeeee;
    background: -moz-linear-gradient(top, #fbfbfb, #eeeeee);
    background: -o-linear-gradient(top, #fbfbfb, #eeeeee);
    background: -webkit-gradient( linear, 0 40%, 0 100%, from(#fbfbfb), to(#eeeeee) ); 
    filter: progid:DXImageTransform.Microsoft.gradient(enabled='true',
                startColorstr=#fbfbfb, 
                endColorstr=#eeeeee, 
                GradientType=0); 
    padding: 10px 0 15px 0;
}    
.quoteholder, .placeholder {border-top:solid 1px #ccc;border-bottom:solid 1px #ccc;margin-top:20px;background:#e7e7e7;} 

/*  Styling for Facebood Btn Integration  */

.facebookBtn {
	background: #5b74a8 url(../../all/i/facebook.jpg) 0 0 no-repeat;
	height: 22px; 
	padding-left: 25px;
	color: #fff !important;
	border: none !important;
	font: "lucida grande",tahoma,verdana,arial,sans-serif;
	border: 1px solid #1A356E !important;
	font-weight: bold;
	font-size: 11px;
	cursor: pointer;
}

/* these classes are specifically for the tabs on the payment page */
.tab_wrapper {
	margin: 10px 0;
}

ul.tabs {
	margin: 0;
	float: left;
	list-style: none;
	height: 32px;
	border-bottom: 1px solid #E0E0E0;
	border-left: 1px solid #E0E0E0;
	width: 100%;
}

ul.tabs li {
	float: left;
	height: 31px;
	line-height: 31px;
	border: 1px solid #E0E0E0;
	border-left: none;
	margin-bottom: -1px;
	background: #f3f4f4;
	overflow: hidden;
	position: relative;
}

ul.tabs li a {
	text-decoration: none;
	display: block;
	padding: 0 20px;
	border: 1px solid #fff;
	outline: none;
}

ul.tabs li a:hover {
	background: #eff7ff;
}	

html ul.tabs li.active, html ul.tabs li.active a:hover  {
	background: #fff;
	border-bottom: 1px solid #fff;
}

.tab_container {
	border: 1px solid #E0E0E0;
	border-top: none;
	clear: both;
	float: left; 
	width: 100%;
	min-height: 175px;
	background: #fff;
	-moz-border-radius-bottomright: 5px;
	-khtml-border-radius-bottomright: 5px;
	-webkit-border-bottom-right-radius: 5px;
	-moz-border-radius-bottomleft: 5px;
	-khtml-border-radius-bottomleft: 5px;
	-webkit-border-bottom-left-radius: 5px;
	padding-bottom: 10px;
}

.tab_content {
	padding: 20px;
}

li.tabsHide, #tab2, #tab3, #tab4 {display: none;}

/* Specific styles for HE tools demo page */

.demos img {
	border: 2px solid #F78E1E;
}

.demos img:hover, .demos img:focus {
	cursor: pointer;	
}

/* styles specific to Hunter Nova Scotia landing page */

.nsLanding {
	margin: 70px auto;
	position: relative;
}

.nsLanding p {margin: 90px 0 0 120px;}

.nsLanding span {
	font-size: 0.281em;
	text-shadow: none;
	position: absolute;
	left: 185px;
	top: 8px;
	color: #000;
	
}

.crossbow .button {position: absolute; top: 213px; right: 300px; padding-right: 5em;}
.hunter .button {position: absolute; top: 213px; left: 110px;}

/* styles specific to Hunter unapproved landing pages */

.unapprovedStateHeader h2 {
	line-height: 1.4em;		
}

.unapprovedStateHeader p {
	font-size:1em;
	font-weight:400;	
}

/*end unapproved landing page styles */

/****************************************************************/
/************* CDE TEMP FIXES FOR ISSUES IN REDESIGN  *************/
/**************************************************************/
		
.SubHeader h1 span, .grid80 h3 span, table span, p span {font-size: inherit; line-height: inherit; margin-top: inherit; width: inherit;}		
.examCenter table th {background-color: inherit; border-bottom: none;}
.examCenter tr:nth-child(2n+1) {background-color: inherit !important;}


/***********************Close CDE fix *********************/


/*************************************************************************************************************/
/******************** STYLES BROUGHT FROM CDN d/all/css/LoginBar.css  ***************************************/
/***********************************************************************************************************/
#loginBar
{
    display: none;
    height: 1.5em;
    background-color: #444;
    color: white;
    padding: 0.5em 20px 0.5em 20px;
    font-size: small;
    margin-bottom: 10px;
}

#loginBar a{
    margin-left:20px; 
    color:white;
}

#loginBar .close
{
    float: right;
    width: 1.5em;
    height: 1.5em;
    border: solid 1px white;
}

#loginBar .close a{
    font-family:Verdana; 
    font-weight:bold; 
    color:white; 
    text-decoration:none;
    padding: 0.1em 0 0 0.4em;
    margin:0;
}

#loginBar span
{
    font-weight: bold;
}

/***********************Close LoginBar.css *********************/


/*************************************************************************************************************/
/************* STYLES BROUGHT FROM CDE /global/controls/courseManual/css/SideMenuPublished.css  *************/
/***********************************************************************************************************/

/*temp fix for exam center sidebar */
.examCenter {
    position: relative; 
}

.examCenter img {
    float: left;
}
    
.examCenter span {   
    font-weight: bold;
    margin-left:17px;
    display:block;
}

.examCenter td, .examCenter tr {padding: 0 0 0 10px !important;}

.examCenter img {vertical-align:middle;}

.examCenter .studyLinks {
    margin-left:17px;
}
.sideMenu {margin:0 0 0 10px;list-style-type:none;overflow:visible;}
.sideMenu ul {margin:0;list-style-type:none;overflow:visible;}
.sideMenu li {padding:5px 0;font-weight:bold;}
.sideMenu ul>li {border-bottom:solid 1px #eee; padding:1px 0 0 20px;font-weight:normal;}
.sideMenu ul>li>a {cursor:default;font-weight:normal;}
.sideMenu ul>li>a:hover{color: #645B73;}
.sideMenu ul>li *[href]:hover {color:#000;cursor:pointer;}
.sideMenu .mi {
    text-shadow:none;
    background-image:url("../../all/i/menu-pass.png");
    background-repeat:no-repeat;
    background-position:0 3px;
    overflow:visible;
    display:block;
}
.sideMenu .act {
    background-color:#eee;
    position:relative;
}
.sideMenu .act .arrow {
  border-style: dashed;
  border-color: transparent;
  border-width: 0.65em;
  display: -moz-inline-box;
  display: inline-block;
  font-size: 1.4em;
  height: 0;
  line-height: 0;
  position: absolute;
  left:-19px;
  vertical-align: middle;
  width: 0;
  border-right-width: 0.5em;
  border-right-style: solid;
  border-right-color: #eee;  
}

/***********************Close SideMenuPublished.css*********************/

/*************************************************************************************************************/
/********************* STYLES BROUGHT FROM CDE /global/css/exam/questionList.css  ***************************/
/***********************************************************************************************************/
#questionList .questionBox, 
#questionList .questionBox-NoAnswer, 
#questionList .questionBox-Answer, 
#questionList .questionBox-Selected, 
#questionList .questionBox-Wrong 
{
	float:left;
	background-repeat:no-repeat;
	background-color:#FFFFFF;
	color:#666666;

	font-weight:bold;
	width:16px;
	height:17px;
	margin: 4px;
	padding-top:1px;
	
	font-size: 10px;
	font-family: "Arial Narrow", Sans-Serif;
	text-align:center;
	text-decoration: none;
	position:relative;
}

#questionList .questionBox
{
	background-image: url(../../all/i/black.gif);
	color:#555;
}

#questionList .questionBox-NoAnswer
{
	background-image: url(../../all/i/red.gif);
	color:#f14f55;
}

#questionList .questionBox-Answer
{
	background-image: url(../../all/i/green.gif);
	color:#4a7d53;
}

#questionList .questionBox-Wrong
{
	background-image: url(../../all/i/x.gif);
}

#questionList .questionBox-Selected
{
	background-image: url(../../all/i/grey.gif);
	color: #ffffff;
}

#questionList .questionBox:hover, 
#questionList .questionBox-NoAnswer:hover, 
#questionList .questionBox-Answer:hover
{
	color:#63482b;
	background-image: url(../../all/i/hover.gif);
  	
}

#questionList .background{
	background-color:#ffffff;  
	position:relative; 
	padding: 5px;                         	
}

#questionList.box {
	background: #ffffff;
}
/***********************Close questionList.css*********************/

/*************************************************************************************************************/
/********************* STYLES BROUGHT FROM CDE /global/css/exam/answerChoices.css  ***************************/
/***********************************************************************************************************/

#answerChoices .answerHorizontal{
	float:left;
	width: 184px;
	font-size:0.9em;
}

#answerChoices .answerVertical{
	clear:both;
	width:100%;
	font-size:0.9em;
}

#answerChoices .answerImage{
	float:left;			
}

#answerChoices .answerBulletHorizontal{
	float:left;
	width:149px;
	margin: 0 0 2px 5px;
	text-decoration:none;
	cursor:pointer;
	color:#000000;
}

#answerChoices .answerBulletHorizontal span{
	width:149px;
	display: block;
	zoom:1; /*IE Hack*/
	text-decoration:none;
	margin-top: 5px;
}

#answerChoices p.answerBulletVertical {
    width: 550px !important;
}


#answerChoices .answerBulletVertical{
	float:left;
	margin-left: 5px;
	margin-bottom:2px;
	margin-top:7px;
	cursor:pointer;
	color:#000000;
	text-decoration:none;
}

#answerChoices .answerBulletVertical span{
	text-decoration:none;
}

#answerChoices .answerImageLink{
	width:0;
	height:0;
	outline:0;
	cursor:pointer;
	text-decoration:none;
	color:#000000;
}
#answerChoices .answerImageLink a{
	color:#000000;
}
#answerChoices .answerImageLink a:hover{
	color:#000000;
}
#answerChoices .answerImageLink a:link{
	color:#000000;
}
#answerChoices .answerImageLink a:visited{
	color:#000000;
}
#answerChoices .answerImageLink a:active{
	color:#000000;
}


/***********************Close answerChoices.css*********************/


/*************************************************************************************************************/
/************* STYLES BROUGHT FROM CDE /global/controls/courseManual/css/CourseManual.css  ******************/
/***********************************************************************************************************/


/* image of size 215 floating right */

.SmallFloatRight {
     clear: right;
     float:right;
     margin-left:10px;
     margin-bottom:10px;		
}

/* Other misc stuff */


/* caption styles */

.Caption {
    margin-top:5px;
    font-size:smaller;
    text-align:center;
    font-weight:bold;		
}

.BoldedTitles {
    font-weight:bold;
    font-size: 0.875em;
    line-height: 1.1;	
}

p.BoldedTitles {
    margin: 0;
}

.ImportantNote {
	 color:#336699;
	 font-weight:bold;
	 font-size:smaller;	
}

/*State specific green background */

.StateSpecific {
    margin:10px 0;
    padding:15px;
    width:95%;
    background-color:#f7f7f7;
    border:1px solid #dadada;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px; 
    border-radius: 5px;
}

.StateSpecific img {
    position: relative;
    right: 12px;
}

/*talking heads */

.safetyHead_para {
    background-color: #f78e1e;
    height:auto;
    margin:10px 0;
    padding:15px;
    width:90%;
    border:1px solid #f78e1e;
    color:white;
    font-weight:bold;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px; 
    border-radius: 4px;
}

.grandpa {
		
      /*background-image:url(/global/css/cms/images/TalkingHead_grandpa2.gif);*/
      background-repeat:no-repeat;
      width:104px;
	  height:114px;
	  float:left;
	  position: relative;
	  top:-15px;
	  left: 20px;
	}
	
.mom {
		
      /*background-image:url(/global/css/cms/images/TalkingHead_uncle.gif);*/
      background-repeat:no-repeat;
      width:104px;
	  height:114px;
	  float:left;
	  position: relative;
	  top:-15px;
	  left: 20px;
	  
	}
	
	
.safetyHead_image {
		float:left;
	}
	
.safetyHead_para b {
	 color:black;
	}
	

.highlighter {
	font-weight:bold;
}

/*glossary styles */	
	
a.glossaryItem:link, a.glossaryItem:active, a.glossaryItem:visited{
    border-bottom: 1px solid;
}

a.glossaryItem:hover {
    border: none;
}

div.defBox {
    display: none;
    position: absolute;
    z-index: 5000;
    width: 400px; 
    margin:10px 0;
    padding:15px;
    background-color:#eee;
    border:1px solid #414141;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px; 
    border-radius: 5px;
}

a.defClose {
    border: solid 1px black;
    padding-left: 5px;
    padding-right: 5px;
    font-weight: bold;
    float: right;
    color: #000;
    text-decoration: none;
}
			
.grandpa_notice {
      /*background-image:url(/global/css/cms/images/TalkingHead_grandpa2.gif);*/
      background-repeat:no-repeat;
      background-position:right top;
      width:95%;
	  height:auto;
	  min-height:114px;
	}
.uncle_notice {
    /*background-image:url(/global/css/cms/images/TalkingHead_uncle.gif);*/
    background-repeat:no-repeat;
    background-position:right top;
    width:100%;
	height:auto;
	min-height:114px;		  
}
.grandpa_notice p, .uncle_notice p {
    width:75%;background-color:#f78e1e;padding:15px;
    margin:10px 0;
    padding:15px;
    border:1px solid #dfb02c;
    color:white;
    font-weight:bold;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px; 
    border-radius: 4px;
    position:relative;
    top:20px;
}	

/***********************Close CourseManual.css*********************/

/*breadcrumb navigation */
.breadcrumb {margin:1.5em 0 0 0;border:solid 1px #dedede;height:1.5em;position:relative;}
.breadcrumb li {
    list-style-type:none;
    float:left;
    line-height:1.5em;
    padding:0 0 0 .75em;
    color:#777;
}
.breadcrumb li a {display:block;padding:0 15px 0 0;background:url(../../all/i/crumbs.gif) no-repeat right center;}

/* New landing page styles now that scrolling banners have been removed */
.banner {height: 305px; margin-top:80px;}
.banner h1, .banner .cost h3 {font-size: 2.5em;letter-spacing: -2px;line-height: 1; padding-left: 0;}
.banner .cost h3 {margin-top: .63em;}
.banner h2 {color: #444444; font-size: 18px;font-weight: 400;letter-spacing: -1px; position: relative; top: -38px;left: 2px;}
.banner img {margin-top: 15px;}
.banner .button {margin: 17px 0 0 0;}

.cost p {position: relative; top: -10px; font-size: .8em;}
.cost h4 {margin-top: 25px;}
.buttonContainer h3 span {font-size: 19px; margin-left: 58px;}
.buttonContainer h3 {line-height: .55em !important;}

.landing address, address span {font-size: 14px; font-style:normal;}
.landing .quoteholder h2 {margin-left: 1.5em;}
.landing .quoteholder h2 span {font-size: .7em;}
.landing .quoteholder, .placeholder {margin-top: 0;}  
.landing .accredits {padding:12px 0 0 20px;}   
.landing .gradient02 {padding: 50px 0 50px 0 !important;}  
.landing h2 {line-height: 1.2em;}
.landing .demos img {
	-moz-transition: opacity 0.5s ease-in-out 0s;
 -webkit-transition: opacity 0.5s ease-in-out 0s;  
     -ms-transition: opacity 0.5s ease-in-out 0s;  
      -o-transition: opacity 0.5s ease-in-out 0s; 
         transition: opacity 0.5s ease-in-out 0s; 
         border: 0;
}

.landing .demos img:hover, .landing .demos img:focus {
	opacity: .75;
	filter:alpha(opacity=75); /* For IE8 and earlier */ 
	cursor: pointer;	
}
.landing .orangebar .row {margin-left: 50px;}
.orangebar {
	background-color: #F78E1E; 
	padding: 15px 0;
}
.orangebar p {font-size: 1.25em; color: #ffffff;}
.hexSteps.placeholder {border-top: none !important;}
.hexSteps p {line-height: 1.35em;}

/*************************************/
/*     Location Dropdown  Styles    */
/***********************************/

#large-dropdown-usa, #large-dropdown-canada {	
	border-left: solid 1px #bbb;
	border-right: solid 1px #bbb;
	border-bottom: solid 1px #bbb;
    background: #ffffff;
	-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
    padding: 0 15px 10px 10px;
    width: 150px;
    position: absolute; 
    top: 1px;
    z-index: 1;
    cursor: pointer;
}
#large-dropdown-usa {margin-left: -66px;}
#large-dropdown-canada {margin-left: -36px;}

#large-dropdown-closed, #large-dropdown-closed-canada {cursor:pointer; position: relative; left: -5px; top:1px; height: 20px;}
#large-dropdown-closed {width: 100px;}
#large-dropdown-closed-canada {width: 130px;}
#large-dropdown-closed img, #large-dropdown-closed-canada img, #large-dropdown-usa img, #large-dropdown-canada img {width: 22px; height: 14px;position: relative; top: -5px;}
.margin-left {margin-left:10px;}
.margin-bottom-none {margin-bottom: 0;}
/*  end Location Dropdown styles  */

/* New Breadcrumb & Nav Navigation & scrollTop in Footer */
 .breadcrumb-country-nav-container li a:link, .breadcrumb-country-nav-container li a:visited, #scroll-to-nav, #scroll-to-top, #nav-open, #nav-close {color:#f78e1e !important;}
.breadcrumb-country-nav-container li a:hover, a#scroll-to-nav:hover, a#scroll-to-top:hover, a#nav-open:hover, a#nav-close:hover {color:#222222 !important;}
.breadcrumb-country-nav-container {
	background: #fff;color:#717174; 
	border-top: 1px solid #e7e7e7;
}
    
#breadcrumb, #country-nav {
	position:relative; 
	left: -5px; 
	padding-bottom: 7px; 
	font-weight:bold;
	font-size:0.875em;
}
#breadcrumb {
	text-transform:uppercase;
}
#breadcrumb ul {
	margin-left: 7px;
}
#breadcrumb li, #country-nav li {
	list-style-type: none; 
	display: inline-block;
	zoom: 1; /* ie fix */
	*display: inline;  /* ie fix */
	padding: 0 10px 0 0;
}
#country-nav, #scroll-to-nav, #scroll-to-top, #top, #nav-open, #nav-close {
	cursor:pointer;
}
#country-nav img {
	width:18px; 
	height:12px;
	position:relative; 
	top:1px; 
	left:10px; 
	padding-right:18px;
}

#nav-dropdown {
    background: #707073;
    position:fixed;
    width:100%;
    top:49px;
    z-index:-2;
}
#nav-dropdown ul {float:right; margin-top:0; padding: 0 23px 2px 0;}
#nav-dropdown li {list-style-type: none;display:inline; padding-right:7px;}
#nav-dropdown li a:link, #nav-dropdown li a:visited {color:#fff; position:relative; top:1px;}
#nav-dropdown li a:hover  {color:#000;}

.lob-bg-color {background-color:#f78e1e;}
.lob-color {color:#f78e1e;}

/*  For Question Circles in TDE */
.textCircle {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
width: 4px;
padding: 12px;
font-size: 14px;
border: 2px solid #f78e1e;
line-height: 1em;
position: relative;
display: inline-flex;
margin-right: 4px;

}
.textCircle .heightFix {
margin-top: 100%;
}
.textCircle .circleContent {
position: absolute;
left: 0;
top: 50%;
height: 100%;
width: 100%;
text-align: center;
font-weight:bold;
margin-top: -7px; /* Note, this must be half the font size */
}

/* fix for iPhone font rendering issue*/
@media only screen and (max-device-width: 768px) 
{
	body {
	-webkit-text-size-adjust: none;
	-moz-text-size-adjust: none;
	-ms-text-size-adjust: none;
	}

}

@media only screen and (max-device-width: 568px) 
{
	ol {margin-left:25px !important;}
	ul {margin-left:22px !important;}

}

/* fix for tde small screens */
@media only screen and (max-width: 480px) 
{
	.tde .wrapper {width:100%;}
    .tde .MenuBar div.right {text-align: right ;}
    .tde .SubHeader {clear: both; display: block; margin-bottom: 25px; position: relative; top: 25px !important;}
    .tde h2 {font-size: 1em;}
}

/*  styles for new landing page regulations text box   */
.banner .box {background: rgba(255, 255, 255, 0.5); filter: alpha(opacity=60); margin-top:0;}
.banner h1 {padding-top: 0; padding-bottom: 15px;}
.banner.unapprovedStateHeader h1 {padding:0.666667em 0 0.666667em 0 !important;}

/*  For HEX skip navigation link 508 compliance */
.skipnav { text-align: left; }
.skipnav a { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; color:#333;text-decoration:underline;}
.skipnav a:focus, .skipnav a:active {position: absolute; top:5px; left:5px;background:#8CC541;padding:10px 15px;width: auto; height: auto; overflow: visible; text-decoration: underline;} 

/*  CDE aduio player & disable audio button styles */
#divFlashAndAudio {margin-left:-12px;}
#divMuteFlashAndAudio {position: relative; left: -6px; top:-2px;}

 /* New Video API toolbar input button styles   */
 .faeToolbar .button {
  border-style: solid;border-width: 0px;cursor: pointer;font-weight: normal;line-height: normal; 
  margin: 0 0 .375em 0;
	position: relative;text-decoration: none;text-align: center;
	  -webkit-appearance: none;
	  -webkit-border-radius: 0;
	  display: inline-block;
	  padding: 2px 0;
	  width: 49px;
	  background-color: #626264;
	  border: 1px solid #424242 !important;
	  color: #ffffff !important;
	  font-size: .95em !important;
	  transition: background-color 300ms ease-out;
}

.faeToolbar .button:hover, .faeToolbar .button:focus {
    background-color: #111;color: white;
}

.faeToolbar {padding-right:30px;}
 /* Close Video API toolbarstyles   */
 
.hide, .hidden {
  display: none !important; }
  
#cde-course .SideBarBox h3 {margin-top: 0;}
#cde-course .grid70 h2, #cde-course .SideBarBox h2, #cde-course ul.sideMenu {margin-top:1.5em !important;} 
#cde-course .SideBarBox h2 {margin-bottom:0;}

a.contrast-toggle-on .icon-adjust, a.contrast-toggle-on .fa-adjust  {color: #B05E06;}
a.contrast-toggle-off .icon-adjust, a.contrast-toggle-off .fa-adjust  {color: #f78e1e !important;}
a .icon-adjust:hover, a .fa-adjust:hover {color: #333;}

/* popup in CDE course manual.aspx page  */

#popupOverlay {
  position: fixed;
  z-index: 99;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.3);
  transition: opacity 500ms;
  overflow: auto;
}

#popup {
     -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.5);
	   -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.5);
	        box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.5);	
  margin: 130px  auto;
  padding: 5px 15px 15px 20px;
  background: #fff;
  width: 75%;
  position: relative;
  transition: all 5s ease-in-out;
  max-width:450px;
}

#popup .popupContent {
  max-height: 30%;
}

#popup label {color:#111;}
#popup .button {margin: 20px 0;}
#popup .close {padding: 4px 10px; margin-top:-5px; margin-right: -5px;}
#popup .close a {color:#fff;}
#popup .close a:hover {color:#000;}
#popup h2 {margin-top: 40px;}
/* close popup in cde*/

.show-for-mobile-only {display:none;}