/* DEFAULTS
----------------------------------------------------------*/
body { background: #b6b7bc; font-size: 1.00em; font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, Sans-Serif; margin: 0px; padding: 0px; color: #090969; }

a:link, a:visited { color: #034af3; }
a:hover { color: #1d60ff; text-decoration: none; }
a:active { color: #034af3; }

p { margin: .3em 0 .5em 0; -webkit-margin-before: .3em; -webkit-margin-after: .5em; -webkit-margin-start: 0; -webkit-margin-end: 0; }

/* HEADINGS 
----------------------------------------------------------*/
h1, h2, h3, h4, h5, h6 { font-size: 1.5em; color: #666666; text-transform: none; font-weight: 200; margin-bottom: 0px; }
h1 { font-size: 1.6em; padding-bottom: 0px; margin-bottom: 0px; }
h2 { font-size: 1.5em; font-weight: 600; margin: .3em 0 .5em 0; -webkit-margin-before: .3em; -webkit-margin-after: .5em; -webkit-margin-start: 0; -webkit-margin-end: 0; } 
h3 { font-size: 1.2em; }
h4 { font-size: 1.1em; }
h5, h6 { font-size: 1em; }

/* this rule styles <h1> and <h2> tags that are the first child of the left and right table columns */
.rightColumn > h1, .rightColumn > h2, .leftColumn > h1, .leftColumn > h2 { margin-top: 0px; }

/* PRIMARY LAYOUT ELEMENTS 
----------------------------------------------------------*/
.page { width: 960px; background-color: #fff; margin: 8px auto 0px auto; border: 1px solid #496077; }

.header { position: relative; overflow: auto;  margin: 0px; padding: 0px; background: #4b6c9e; width: 100%; }
.header h1 { font-weight: 700; margin: 0 0 -.2em 0; padding: 10px 0px 0px 20px; color: #f9f9f9; border: none; font-size: 2em; }
.divHeaderState { padding: 0px 0px 0px 20px; color: #DDD; font-style: italic; font-size: .85em }
.header .logo { position: relative; float: right; background-color:White; margin: 3px 3px 4px 3px; padding: 5px; }
.header #imgLogo { height: 90px; width: auto; }
.header .address { position: relative; float: right; margin: 3px; padding: 0 10px 0 5px; color: White;  }

.main { padding: 0px 12px; margin: 12px 8px 8px 8px; min-height: 400px; }
.leftCol { padding: 6px 0px; margin: 12px 8px 8px 8px; width: 200px; min-height: 200px; }
.footer {  width: 960px; color: #4e5766; padding: 4px 0px 0px 0px; margin: 0px auto; text-align: center; line-height: normal; font-size: 0.9em; font-family: Calibri, "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, Sans-Serif; }
#divPoweredBy { width: 100%; vertical-align: top; text-align: right; }
#divPoweredByImg { float: right; margin-right: 10px; }
#divCopyright { float: left; text-align: left; margin-left: 10px }

/* FORM ELEMENTS 
----------------------------------------------------------*/
fieldset { margin: 1em 0px; padding: 1em; border: 1px solid #ccc; }
fieldset p { margin: 2px 12px 10px 10px; }
fieldset.login label, fieldset.register label, fieldset.changePassword label { display: block; }
fieldset label.inline { display: inline; }
legend { font-size: 1.1em; font-weight: 600; padding: 2px 4px 8px 4px; }
input.textEntry { width: 320px; border: 1px solid #ccc; padding: 4px; }
input.uppercase { text-transform: uppercase; }
input.passwordEntry { width: 320px; border: 1px solid #ccc; }
div.accountInfo { width: 42%; }
span.tips { font-size: 0.9em; font-style: italic; margin: 0 0 0 5px; color: #696969; }

.pageDescription { border: 1px #4e667d solid; font-style: italic; color: #222; background-color: #ccc; padding: 10px; margin: 30px 30px 30px 30px  ; }

/* MISC 
----------------------------------------------------------*/
.clear { clear: both; }
.title { position: relative; display: block; float:left; text-align: left;}
.headerUserNameDiv { position: relative; display: inline-block; font-size: 1.0em; color: White; margin: 10px 0 0 20px;  }
.headerUserNameDiv .headerUserNameTextDiv { position: relative; display:block; float: left; margin-top: 3px; margin-right: 3px;  }
.headerUserNameDiv .labelWelcome { font-size: 1.1em; font-weight: 600; font-variant: small-caps; color: #CCC }
.headerUserNameDiv .labelUserName { font-size: 1.1em; font-weight: 600; margin-left: 3px; }
.headerLogoutDiv { position: relative; display:block; float: right; margin: 5px; padding: 1px 3px 3px 3px; background-color: #3a4f63; border: 1px solid #AAA; -moz-border-radius: 3px; border-radius: 3px; }
.headerLogoutLink { font-size: 0.8em; display: block; float: left; color: White; }
.headerLogoutDiv a:link { color: white;  text-decoration: none; }
.headerLogoutDiv a:visited { color: white; text-decoration: none; }
.headerLogoutDiv a:hover { color: #DDD; text-decoration: none; }
.failureNotification { font-size: 0.95em; color: #A33; }
.bold { font-weight: bold; }
.submitButton { display: block; padding-right: 10px; }

.centerableDiv { display: inline-block; margin-left: auto; margin-right: auto; text-align:left; }

.modalWaiting { position: fixed; top: 0; left: 0; background-color: black; z-index: 99; opacity: 0.5; filter: alpha(opacity=50); -moz-opacity: 0.5; min-height: 100%; width: 100%; }
.loading { font-family: Calibri, "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, Sans-Serif; font-size: 1.2em; font-weight: 600; color: White; 
           border: 2px solid #7BA0CD; -moz-border-radius: 8px; border-radius: 8px; width: auto; height: auto; display: none; position: fixed; background-color: #3a4f63; z-index: 999; }

/* CertifyPage 
-------------------------------------------------------*/
.agreeStarter { font-weight:bold }

.pnlIdentity { display: inline-block; margin-left: auto; margin-right: auto; text-align:center; background-color: #FFFF66; color: #333; border: 1px #000 solid; padding: 8px; margin-top: 20px; }
.lblDisplayName { font-size: 2em; font-weight: bold; color: #090969; }
.lblOf { font-size: 1.1em; font-family: Times New Roman; font-style: italic; font-weight: bold; }
.lblCityState { font-size: 1.2em; font-weight: bold; }

.pnlAgreement { margin: 20px 0 0 0; }

.pnlCertifyBar { margin-top: 20px; text-align:right; }
.certifyButton { font-family: Calibri, "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, Sans-Serif; font-size: 1.3em; font-weight: bold; color: #C6D9F1; padding: 2px 5px; margin-left: 10px; }
.declineButton { background-color: #632423; }
.agreeButton { background-color: #002060; }

.certifyResultDiv { border: 1px solid black; padding: 0 8px 8px 8px ; font-size: 1.1em; font-weight: 600; margin-top: 5px;   }
.certifyErrorDiv { background-color: #FFFF88; }

/* TrainingUnitPage
-------------------------------------------------------*/
div.hideSkiplink { background-color: White; width:auto; padding:10px; font-family: Calibri, "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, Sans-Serif; }
#menuBox { background-color: #EEE; padding: 5px 0; border: 1px solid black; box-shadow: 6px 6px 6px #3a4f63; }
.menu { padding: 0 0 0 5px; display:inline-block; }

.menuLabel { float:left; font-family: Calibri, "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, Sans-Serif; margin: 10px 0 0 15px; font-size: 1.1em; font-weight: bold; }
.menu div { list-style: none; margin: 0px; padding: 0px; width: auto; }
.menu a {text-decoration: none;}
.menu a .menuButton, .menu a:visited .menuButton { overflow:hidden; background-color: #465c71; border: 1px #4e667d solid; color: #dde4ec; font-weight:bold; display: block; line-height: 1.35em; margin: 0 15px 3px 15px; padding: 4px 6px 4px 25px; }
.menu a:hover .menuButton { background-color: #bfcbd6; color: #465c71; font-weight:bold; margin: 0 15px 3px 15px; padding-left: 25px; }
.menu a:active .menuButton { background-color: #465c71; color: #cfdbe6; font-weight:bold; margin: 0 15px 3px 15px; padding-left: 25px; }
.menu .selectedMenuButton { overflow:hidden;  height:auto; width: auto; background-color: #dde4ec; border: 1px #4e667d solid; color: #465c71; display: block; line-height: 1.35em; font-weight: bold; margin: 5px 15px 10px 15px; padding: 4px 6px; box-shadow: 6px 6px 6px #3a4f63; }

.menuClassLabel { float: left; }
.menuNotStarted { float: right; line-height: 1.35em; font-family: Arial, Helvetica, Verdana, Calibri, "Helvetica Neue", "Lucida Grande", "Segoe UI", Sans-Serif; color: #465c71; font-size: 0.75em; font-weight: bold; margin-left: 10px; border: 1px dotted #000; padding: 2px 3px; background-color: #FBB; -moz-border-radius: 3px; border-radius: 3px; }
.menuInProcess { float: right; line-height: 1.35em; font-family: Arial, Helvetica, Verdana, Calibri, "Helvetica Neue", "Lucida Grande", "Segoe UI", Sans-Serif; color: #465c71; font-size: 0.75em; font-weight: bold; margin-left: 10px; border: 1px dotted #000; padding: 2px 3px; background-color: #FFB; -moz-border-radius: 3px; border-radius: 3px; }
.menuCompleted { float: right; line-height: 1.35em; font-family: Arial, Helvetica, Verdana, Calibri, "Helvetica Neue", "Lucida Grande", "Segoe UI", Sans-Serif; color: #465c71; font-size: 0.75em; font-weight: bold; margin-left: 10px; border: 1px dotted #000; padding: 2px 3px; background-color: #CFC; -moz-border-radius: 3px; border-radius: 3px; }

.tblCourse { width: 100%; background-color: #4F81BD; font-family: Calibri, "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, Sans-Serif; font-size: 1.2em; font-weight: bold; color: White; padding:0; border: 1px 1px 0 1px solid #7BA0CD; -moz-border-radius: 25px 25px 0 0; border-radius: 25px 25px 0 0; }
.tblCourseNameCol { padding: 3px 0 3px 15px; }
.tblCourseCountCol { width: 201px; padding: 3px; }
.divCourseNameLabel { position: relative; display:block; width: 90px; float:left;  }
.divCourseName { position: relative; display:block; float:left; color: Black; font-size: 1.5em; font-weight: 600; }
.completedCounter { display: block; float: left; margin: 0 6px; color: Black; }
.completedCounterLabel { display:block; float:left; }
.colInner { border-left: 1px dashed #7BA0CD; }

.unitNameDiv { margin-bottom: 5px; }
.unitName { font-family: Calibri, "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, Sans-Serif; font-weight: bold; color: #263C51; font-size: 1.25em; }

.videoDiv { height: 315px; width: 420px; border: 1px solid #555; }
embed, iframe, object { width: 100%; height: 100%; max-width: 100%!important; max-height: 100%!important; }

.quizLinkDiv { text-align:center; }
.quizComplete { font-family: Calibri, "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, Sans-Serif; font-weight: bold; color: #375F37; }
.quizFailed { font-family: Calibri, "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, Sans-Serif; font-weight: bold; color: #C00000; }
.quizLink { font-family: Calibri, "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, Sans-Serif; font-weight: bold; font-size: 1.25em; }


/* QuizPage
-------------------------------------------------------*/
.lightHeaderRow { background-color: #dde4ec; color: #465c71; padding:0; border: 1px 1px 0 1px solid #7BA0CD; -moz-border-radius: 25px 25px 0 0; border-radius: 25px 25px 0 0; }
.bottomAlign { vertical-align:bottom; }
.quizQuestionCounter { width: 100%; text-align: center; font-size: .9em; color: #4F6228 }

.tblQuizQuestion { margin-top: 10px; }
.quizQuestion { vertical-align:top; color: black; font-weight: bold; font-size: 1.4em; font-family: Calibri, "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, Sans-Serif; }
.quizQuestion span { margin: 5px 0; }
.quizQuestion label { margin: 12px; }

.quizChoice { color: black; font-weight: bold; font-size: 1.4em; font-family: Calibri, "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, Sans-Serif; }
.quizChoice span { margin: 2px 0; }
.quizChoice ul { list-style-type: none; padding: 0px; margin: 0px;}
.quizChoice li { margin: 5px 0 0 0; padding-left: 1.5em; text-indent: -1.5em; }
.quizChoice input[type=checkbox] {  /* Double-sized Checkboxes */ -ms-transform: scale(1.4); /* IE */  -moz-transform: scale(1.5); /* FF */  -webkit-transform: scale(1.5); /* Safari and Chrome */  -o-transform: scale(1.5); /* Opera */  }
.quizChoice label { margin: 12px; }

.quizButtonPanel { width: 100%; text-align: right; margin-top:8px; }
.quizTipsDiv {  }
.quizTipsDiv .tips { font-size: .85em; font-weight: normal; }
.quizDoneDiv { position: relative; float: right; }

.quizResultDiv { border: 1px solid black; padding: 0 8px 8px 8px ; font-size: 1.1em; font-weight: 600; margin-top: 5px;   }
.quizErrorDiv { background-color: #FFFF88; }
.quizCorrectDiv { background-color: #D6E3BC; }
.quizError { color:red; font-style: italic; margin-top: 8px; }
.quizResultInstr { color: Black; margin-top: 8px; }

/* LogoutPage
-------------------------------------------------------*/
.logoutLogBackInPanel { margin-top: 5em; text-align: center; font-weight: bold; color: #900; }

#stateselect { margin-left: 60px; }
.state { margin: .1em 0 0 1em; }
#stateselect input[type=checkbox] {  /* Double-sized Checkboxes */ -ms-transform: scale(1.2); /* IE */  -moz-transform: scale(1.25); /* FF */  -webkit-transform: scale(1.25); /* Safari and Chrome */  -o-transform: scale(1.25); /* Opera */  }