/*
    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;  
} 

.cde-logo {margin-top: 10px;}
.logo {margin-top: 13px;width:145px;
	height:27px;
	text-decoration:none;
	display:block;
	background-image:url(../i/bex-icon-logo-sprite.png);
	background-position:0 -14px;}

.logoFR {margin-top:13px;}
 
img {
	font-style:italic;
	font-size:0.5625em;
    width:auto;
    max-width:100%;
    height:auto;
}

ul {list-style-type:circle;}
ol {list-style-type: decimal;}
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;}
.blue {color: #009DDC;}
.gray {color: #717073;}
.green {color: #8cc541;}
.red {color: #fe0000;}
.white {color: #ffffff;}
.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;
}

.border-top {border-top:solid 1px #ccc;}

.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;}
.FinePrint {color: #BBBBBB;}
.FinePrint, .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;}
img + ul {padding-top: 20px;}

.alphalist {list-style-type: upper-alpha;}
.txtMid {vertical-align:middle;} /* Still being used in Boater  */
/* Specific content sections */
.MenuBar {padding-right:10px;}

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

Blockquote {background: url(../i/quotesprite.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/quotesprite.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;
}
.MainHeader {		/* Still being used for US/Can & Spain default landing page */
    background: #0d5e99;
    height: 280px;
    width: 954px; 
    margin-top: 2px;
    padding: 15px;
    color: #ffffff;
    position:relative;            
}

/* 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: #009DDC;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(../../all/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;}
ul.checkmark {list-style-image: url(../../all/i/checkmark.png); margin-left: 3em;}

/* 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;
	  font-size: 1em;
	  background-color: #009ddc;
	  border-color: #048ec5;
	  border-bottom-width: 3px !important;
	  color: #fff !important;
	  transition: background-color 300ms ease-out;	
}

.button:hover,.button:focus, .enabled.button:hover,.enabled.button:focus {
	background-color: #077eae !important;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;}
.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;} 
.blue.button, .disabled.button,.enabled.button {background-color: #009DDC;border:solid 1px #0084B8;}
.green.button:hover, .green.button:focus, .enabled.green.button:hover,.enabled.green.button:focus {
	background-color: #569643;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 {position:absolute; top: 230px; left: 17px;}
#buttonContainer select {
margin-top:35px;
padding: 5px 10px;
width: auto;
}

#subHeaderBtn {position:absolute; top:10px; margin-left: 750px; font-size:1.1em;} /* Specific to Canada */

/*     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: #009DDC;
    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:#002f45;}
/*.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;
   /* padding: 5px 15px 5px 15px;
    background: #ffffff url(../../all/i/popitback.jpg) top left repeat-x;    */  
}

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

input[type="text"],input[type="password"], textarea, select {
    padding: 6px 9px 5px;
    background: #FFFFFF;
    font:12px Helvetica,Arial,Geneva,sans-serif;
    color:#222;
    width: 150px;
    border:1px solid #cccccc;
    margin: 5px 2px 5px 2px;
}  
/*input:focus,*/ textarea:focus, select:focus {
   /* -moz-box-shadow:0 0 5px #79bde8;
    -webkit-box-shadow:0 0 5px #79bde8;
    box-shadow:0 0 5px #79bde8;  */  
    border: 1px solid #79bde8; 
    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:12px Helvetica,Arial,Geneva,sans-serif;
    color:#000;
    border:1px solid #ccc;
    width: auto;
}

/* 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/loginboater.jpg) no-repeat;
    width: 475px;
    height: 220px;   
    margin-top: 90px;  */
}

/*Error Page Image */
.errorPageImage {
    background: url(../i/404boater.jpg) no-repeat;
    width: 362px;
    height: 400px;
    margin: 35px 0 0 85px;
}



/*Specific to Test Delivery */
#logo {    
    background: url("../i/bexlogo.png") no-repeat;
    height: 25px;
    width: 147px;
    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: #009DDC;    
}    
.progressBar span {font-weight:bold;color:#fff;}

/* complex version */
.progressContainer_comp {padding:0 !important;}
.progressChapter {color:#0d4261;font-weight:bold;position:relative;float:left;}
.progressBar_comp {background-color:#009DDC;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, .wrapper > .content {margin: 0 10px 12px;}
.row 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;}

/* 
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
||||||||||||||||||||||||||||||||||||||| 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. */
}

p,span,ul,ol {width:95%;}

a:link, a:visited {font-size:0.875em;color:#009DDC; 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:#009DDC;}

/* 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.5em;line-height:1.2em;margin-top:1em;margin-bottom:0;} /* 16 X 1.5 = 24px */
h3 {font-size:1em;line-height:1.5em;margin-top:1.5em;margin-bottom:0;}
#main-content {padding-top: 10px; padding-bottom: 35px;}
.SubHeader {
    background: #009DDC;
    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: 10px;}
a .box:hover,a .box:focus {background:#fff;filter:none;cursor:hand;}

.arrow-box  {
	position: relative; 
	background: #ffffff; 
	padding: 0.2em 0.6875em 0.6875em 1em;
	margin: 5px 0 5px 5px;
	-o-border-radius:      15px;
	-ms-border-radius:     15px;
    -webkit-border-radius: 15px;
	-moz-border-radius:    15px; 
	border-radius:         15px;
	-moz-box-shadow:    0  0 5px 3px #bbbbbb;
	-webkit-box-shadow: 0  0 5px 3px #bbbbbb;
	 box-shadow:        0  0 5px 3px #bbbbbb;
} 

.arrow-box:after  {
	left: 100%; 
	border: solid transparent; 
	content: " "; 
	height: 0; 
	width: 0; 
	position: absolute; 
	border-color: rgba(255, 255, 255, 0); 
	border-left-color: #ffffff; 
	border-width: 12px 0 12px 25px;
	top: 20%;  
} 


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

.bluebox h3 {margin:0 0 12px 0;}
.bluebox ul {margin-left:15px;}
.bluebox {
    background: #eaf3f8;
    width: auto;
    height:175px;
    overflow:hidden;
    margin:1em 0 1em 0;
    border:solid 1px #c7d6dd; /* 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;       
}
.bluebox input[type="text"], .bluebox input[type="password"] {
    width:145px; 
}
.bluebox label {position: relative; top: 8px;}
.bluebox img {max-width:100%;} 
.bluebox .mediaBlock {margin: 0 0 12px 0;}
.bluebox .button {margin-left: 3px;}
.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;}
.LandingBoater {background: url(../i/landingboater.png) 0 0 no-repeat;}
.LandingSpain {background: #e2e3e6 url(../i/landingspain.jpg) 0 0 no-repeat;}
/* 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;}
.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;} 

/*  This is for the Returning Customers section on new style landing pages  */

.landingLogin {padding-left: 10px; margin-top: 10px;} 

/*  Styling for Facebook 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;
}
/* COULDN'T FIND REFERENCE TO THIS (.audiojs) IN BOATER PROJECT FILE, IS IT BEING USED??? */
.audiojs {font-size:0.875em;}

/* these classes are specifically for the tabs on the US Boater 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 TO CANADA CSS      *****************/
/*****************************************************************/

#BobBox {
    background: transparent url(../i/fullbob.jpg) no-repeat right bottom;
    width:325px;
    height:250px;

}

#BobBox p {
    margin-left:10px;
    width:190px;
    font-size: .8em;
}

#BobBox span {
    position:relative;
    bottom:-115px;
    left:12px;
    color: #000;
    font-size: 11px;
}

.contactPic {
    background: transparent url(../i/newcustomerservice.jpg) 0 0 no-repeat;
    width: 625px;
    height: 166px; 
    padding: 5px 0 0 20px;  
}
 /* Specific to corporate/media & education pages */
.sidebarleft {min-height: 782px; height: auto; float:left; background: url(../../all/i/leftback.jpg) left top no-repeat;overflow:hidden;}

/****** Styles specific to BEX CAN registration pages *******/

/* Gender section on sign up page */
.genderPanel {
	padding: 10px 0;
}

/* subHeader h3 styling */
.tollFreeInfo {
	position: absolute;	
	top: -10px;	
	margin-left: 480px;
}

/* form for Date of Birth subTitles */
.subTitleBelow {
    float:left; 
    padding: 0px 22px 0px 3px; 
    font-size:x-small;
}

/* Bread Crumbs Styles */
.boatBreadCrumbsEN1, .boatBreadCrumbsEN2, .boatBreadCrumbsEN3, .boatBreadCrumbsEN4 {
    background: url(../i/spritebreadcrumbsen.png) no-repeat; 
    width: 461px;
    height: 30px;
    display: block;
    margin: 5px 0 20px 0;
}

.boatBreadCrumbsFR1, .boatBreadCrumbsFR2, .boatBreadCrumbsFR3, .boatBreadCrumbsFR4 {
    background: url(../i/spritebreadcrumbsfr.png) no-repeat; 
    width: 461px;
    height: 30px;
    display: block;
    margin: 5px 0 20px 0;
}

.boatBreadCrumbsEN1, .boatBreadCrumbsFR1 {
    background-position: -5px -5px; 
} 

.boatBreadCrumbsEN2, .boatBreadCrumbsFR2 {
    background-position: -5px -40px;
}

.boatBreadCrumbsEN3, .boatBreadCrumbsFR3 {
    background-position: -5px -75px;
}
.boatBreadCrumbsEN4, .boatBreadCrumbsFR4 {
    background-position: -5px -110px;
}

.boatBreadCrumbsEN3 ul, .boatBreadCrumbsFR3 ul {
	list-style: none !important;
	margin: 0 !important;
}

.boatBreadCrumbsEN3 li, .boatBreadCrumbsFR3 li {
	display: inline !important;
}


a.breadcrumb1, a.breadcrumb2 {
	display: inline-block;
	width:115px;
	height: 30px;
}

/*dynamic card*/
div.DynamicCarden, div.DynamicCardfr {
    font: bold 12px Arial,Sans-serif;
    color: #000;
	height:260px;
	width:300px;
	margin: 0 auto;

}

div.DynamicCarden {
background-image:url(../i/regcard-en.png);
background-repeat: no-repeat;
}

div.DynamicCardfr {
background-image:url(../i//regcard-fr.png);
background-repeat: no-repeat;
}

div.DynamicCardDisplayName {
	padding: 50px 0 0 0;
	margin: 20px 0 0 32px;
	width:238px;
	white-space:nowrap;
	text-transform:uppercase;
}

div.DynamicCardDateOfBirth {
	margin:10px 0 0 32px;
	width:80px;
	white-space:nowrap;
}

div.DynamicCardDateOfIssue {
	float:left;
	margin:-2px 0 0 64px;
	width:80px;
	white-space:nowrap;
}

/*************************************************************/
/* Following Was removed from css but needed on promo pages */
/***********************************************************/

.NoticeMePromo {    
    background:  url(../i/noticemepromo.png) no-repeat 0 0;
    width: 984px;
    height: 176px;
    padding: 20px 0 0 0;
    position:relative;

}
/*  Slider jQuery plugin CSS styles for Promo Page  */

.nivoSlider {
	position:relative;
}
.nivoSlider img {
	position:absolute;
	top:0px;
	left:0px;
}

/*  These are for the Promo page  */

.MainHeaderPromo { 
    background: #0d5e99;
    height: 318px;
    width: 954px; 
    margin-top: 4px;
    padding: 15px;
    color: #ffffff;
    position:relative; 
    padding: 0 0 30px 0;           
}

.MainHeaderPromo #buttonContainer {margin: 25px 0 0 20px;}

.LandingPromoBob {background: #e2e3e6 url(../i/promobob.jpg) 0 0 no-repeat;}
.LandingPromoChallenge {background: #e2e3e6 url(../i/promochallenge.jpg) 0 0 no-repeat;}
.LandingPromoChallengeFR {background: #e2e3e6 url(../i/promochallengefr.jpg) 0 0 no-repeat;}
.LandingPromoBoating {background: #e2e3e6 url(../i/promoboatinginfo.jpg) 0 0 no-repeat;}
.LandingPromoBoatingFR {background: #e2e3e6 url(../i/promoboatinginfofr.jpg) 0 0 no-repeat;}
.LandingPromoSpecial {background: #e2e3e6 url(../i/promospecialoffer.jpg) 0 0 no-repeat;}
.LandingPromoSpecialFR {background: #e2e3e6 url(../i/promospecialofferfr.jpg) 0 0 no-repeat;}
.LandingSpain {background: #e2e3e6 url(../i/landingspain.jpg) 0 0 no-repeat;}

/* Style for Transport Canada Accredited img & title */
.MainHeaderPromo #transportCanadaTitle {
    color:#fff;
    position: absolute; 
    top: 5px;  
    margin: 5px 0 0 35px;
}

/****************************************************************/
/********* Course CSS 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;} */

.SubHeader h1 span {font-size: inherit; line-height: inherit; margin-top: inherit; width: inherit;} 	

/*temp fix for exam center sidebar - taken from SideMenuPublished.css */
.examCenter {
    position: relative; 
}

.examCenter img {
    float: left;
}
    
.examCenter span {
    color: #555;      
    font-weight: bold;
    margin-left:17px;
    display:block;
    margin-top: 0;
}

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

.examCenter img {vertical-align:middle;}

.examCenter .studyLinks {
    margin-left:17px;
}
	
.examCenter table tr:nth-child(2n+1), .even {
    background-color: transparent;
}

.examCenter table th {background-color: inherit; border-bottom: none; padding: 0;}

.highlightBox p {width: 100% !important;}

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

/*************************************************************************************************************/
/******************** STYLES BROUGHT FROM CDN d/all/css/LoginBar.css  ***************************************/
/***********************************************************************************************************/

/*  I commented out the following loginBar code and displayed none. It's messing up the subhead when taking the 
course free, and doesn't seem to be used in US or CAN. Added new nav & footer, if this ends up being reused we 
can add it back in  */

#loginBar {display:none !important;}
/*#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 *********************/

/* New Banner styles now that scrolling banners have been removed */

.banner {height: 305px; margin-top:80px;}
.banner h1 {font-size: 2.5em;letter-spacing: -2px;line-height: 1; padding-left: 0;}
.banner h2 {color: #444444; font-size: 18px;font-weight: 400;letter-spacing: -1px; position: relative; top: -38px;left: 2px;}
.banner .cost p {font-size: .8em;}
.banner .cost h4 {margin-top: 25px;}
.banner img {margin-top: 27px; margin-left: -28px;}
.banner .button {margin: 15px 0 0 0;}
.banner p {position: relative; top: -5px;}

/* end banner styles */

/* New USA Landing page styles  */
.landing address, address span {font-size: 14px; font-style:normal;}
.landing blockquote {border-top:0px;width:90%;margin:0 auto;}
.landing .quoteholder h2 {margin-left: 1.5em;}
.landing .quoteholder h2 span {font-size: .7em;}
.landing .quoteholder, .placeholder {margin-top: 0;}  
.landing .accredits {padding:15px 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 .bluebar .row {margin-left: 50px;}
.bluebar {
	background-color: #009DDC; 
	padding: 15px 0;
}
.bluebar p {font-size: 1.25em; color: #ffffff;}

.bexSteps.placeholder {border-top: none !important;}
.bexSteps p {line-height: 1.35em;}

/* Tooltips for Team pics & bio  */

.team.row {overflow: visible;}
    
.tooltipteam img:hover {
	-webkit-box-shadow: 0 0 10px #9d9d9d, inset 0 0 0 #000000;
       -moz-box-shadow: 0 0 10px #9d9d9d, inset 0 0 0 #000000;
	       box-shadow: 0 0 10px #9d9d9d, inset 0 0 0 #000000;
}

.tooltipteam
{
  position: relative;
  cursor: pointer;
  display: inline-block;
  outline: none;
}

.tooltipteam span
{
  visibility: hidden;
  position: absolute; 
  bottom: 145px;
  left: 50%;
  z-index: 999;
  width: 230px;
  margin-left: -127px;
  padding: 10px;
  border: 2px solid #ccc;
  opacity: .9;
  background-color: #dddddd;                     
  background-image: -webkit-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
  background-image: -moz-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
  background-image: -ms-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
  background-image: -o-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
  background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));  
  -moz-border-radius: 4px;
  border-radius: 4px;  
  -moz-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
  box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;  
  text-shadow: 0 1px 0 rgba(255,255,255,.4); 
  color: #444444;
}

.tooltipteam h4 {font-size:1.1em !important; font-weight: 800; margin-bottom: 8px;}

.tooltipteam:hover
{
  border: 0; /* IE6 fix */
}

.tooltipteam:hover span
{
  visibility: visible;
}

.tooltipteam span:before,
.tooltipteam span:after
{
  content: "";
  position: absolute;
  z-index: 1000;
  bottom: -7px;
  left: 50%;
  margin-left: -8px;  
  border-top: 8px solid #ddd;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;        
  border-bottom: 0;  
}

.tooltipteam span:before
{
  border-top-color: #ccc;
  bottom: -8px;
}

.teamleft span:before,
.teamleft span:after {
	left: 25%;
}

.teamright span:before,
.teamright span:after {
	left: 75%;
}
.teamleft span {left: 100%;}
.teamright span {left: 0%}

/* Specific to Canada Payment Pages */
 .busy {
	cursor: progress;
}
/* Close - Specific to Canada Payment Pages */

/*************************************/
/*     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  */

/* registerb.aspx email form styles  */

input#bexRegEmail {margin: 10px 0 0 2px; color: #666666; margin-right: 10px; padding: 17px 10px 12px 7px; width: 275px; font-size: 15px;} 
input#bexRegEmail .placeholder-input {background-color: white;}

input#bexRegEmail:invalid, select:invalid {
	box-shadow:none;  
}

input#bexRegEmail.required-input-invalid, select.required-input-invalid {
	-moz-box-shadow:0 0 5px #b12222;
	-webkit-box-shadow:0 0 5px #b12222;
	box-shadow:0 0 5px #b12222;    
	border: 1px solid #b12222;  
}

input.required-input-valid:valid, select.required-input-valid:valid {
	-moz-box-shadow:0 0 5px #8CC541;
	-webkit-box-shadow:0 0 5px #8CC541;
	box-shadow:0 0 5px #8CC541;    
	border: 1px solid #8CC541;   
}
input.required-input-valid, select.required-input-valid {
	-moz-box-shadow:0 0 5px #8CC541;
	-webkit-box-shadow:0 0 5px #8CC541;
	box-shadow:0 0 5px #8CC541;    
	border: 1px solid #8CC541;   
}

/* Added style for checkbox & radio buttons to fix width*/
.checkboxRadioButton input {width: auto; margin-top: 10px; margin-bottom: 10px;}
.checkboxRadioButton label {margin-right:10px;}
/* end style for checkbox & radio buttons */


/* 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:#009DDC !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:#009ddc;}
.lob-color {color:#009ddc;}

/*  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 #009ddc;
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 Bex Canada Payment VIP Promo Code Button (apply)  */
#printpromo {position: relative;}
/*input.applyPromoCode {position: absolute; top:-4px;right: -95px;}
div #PromoCodeErrors {margin-left: 20px;}*/

/*  For Bex 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;} 

/* For Bex FAQ page skip to question */
:target:before {
    content: "";
    display: inline-block;
    height: 90px;
    margin: -10px 0 0;
}

/* Updates specific to course manual, first below is replacing the old safetyHead_para */
.attention-box {
    background-color: #006991;
    height:auto;
    margin:10px 0;
    padding:2px 15px 10px 15px;
    color:white;
    font-weight:bold;
}

.course-content .button, .course-content .button:visited, .course-content disabled.button, .course-content enabled.button {
	-webkit-border-radius: 0 !important;
    -moz-border-radius: 0 !important;
    border-radius: 0 !important;
}

.course-content img {padding: 5px 0;}

/* Sprite for social media icons in footer */
.facebook-white {background-image:url(../i/bex-icon-logo-sprite.png); background-position:-56px 0;}
.twitter-white {background-image:url(../i/bex-icon-logo-sprite.png); background-position:-28px 0;}
.google-white {background-image:url(../i/bex-icon-logo-sprite.png); background-position:-84px 0;}
.youtube-white {background-image:url(../i/bex-icon-logo-sprite.png); background-position:0 0;}
.facebook-blue {background-image:url(../i/bex-icon-logo-sprite.png); background-position:-70px 0;}
.twitter-blue {background-image:url(../i/bex-icon-logo-sprite.png); background-position:-42px 0;}
.google-blue {background-image:url(../i/bex-icon-logo-sprite.png); background-position:-98px 0;}
.youtube-blue {background-image:url(../i/bex-icon-logo-sprite.png); background-position:-14px 0;}

.facebook-white, .twitter-white, .google-white, .youtube-white, .facebook-blue, .twitter-blue, .google-blue, .youtube-blue {
	width:14px;
    height:14px;
    display:inline-block;
    margin-right:8px;
}    

/*  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 !important;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: #00709d;}
a.contrast-toggle-off .icon-adjust, a.contrast-toggle-off .fa-adjust  {color: #009ddc !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: -15px;}
#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;}