/* LAYOUT.CSS - Margins, Padding, Positioning, etc 
modified 2/25/2013 by ian Betts - adding in backgroudn colors to resolve IE8 issues
modified 3/18/2013 by Everett Feldt -  4 Column page Layout Elements
*/

* {
	margin: 0;
	padding: 0;
}
h1 {
	display: block;
	height: 0;
	overflow: hidden;
	margin: 0;
	font-size: 0;
	position: absolute;
	top: 0;
	left: 0;
	width: 975px;
	padding: 75px 0 0 0;
}
h2 {
	position: absolute;
	top: 80px;
	left: 115px;
}
h3 {
	position: absolute;
	top: 110px;
	left: 35px;
}
#kc-feedback {
	float: left;
}
#closeprompt {
	float: left;
	clear: left;
}
/*#mainmenu { position: fixed; background: #FFF; z-index:200; display: none; margin-top: 102px; margin-left: 5px; background: url(skin/topiclist_bg2.gif) repeat-y left top;}
#mainmenu ul { list-style-type: none; border-right: 2px solid #000; border-left: 2px solid #000;}
#mainmenu ul li { margin-bottom:0; height: 27px; padding-right: 10px; display: block;}
#mainmenu ul li img { margin-right: 0; margin-bottom: -8px;}
#mainmenu a { color: #000; text-decoration: none;}
#mainmenu a:visited { color: #000; text-decoration: none;}
#mainmenu a:hover { color: #FFF; text-decoration: underline;}*/

.menupage #mainmenu {
	margin-top: 0;
	display: block;
	background: none;
}
.menupage #mainmenu ul {
	border-bottom: none;
	border-right: none;
}
.menupage #mainmenu ul li {
	margin-bottom: 2px;
}
.menupage h2, .menupage h3 {
	position: absolute;
	top: -100px;
	left: -100px;
}
.menupage #content {
	top: 120px;
}
#content {
	position: absolute;
	top: 130px;
	left: 36px;
	width: 900px;
	height: 495px;
	overflow: auto;
	z-index: 100;
}
#pagecount {
	position: absolute;
	top: 82px;
	left: 807px;
	width: 70px;
	text-align: center;
	z-index: 300;
}
.prev {
	position: absolute;
	top: 621px;
	left: 777px;
	z-index: 200;
}
.next {
	position: absolute;
	top: 621px;
	left: 868px;
	z-index: 200;
}
#content ol ul {
	margin-bottom: 0;
}
#subnav_li_menu {
	position: absolute;
	top: 76px;
	left: 37px;
}
#subnav_li_help {
	position: absolute;
	top: 618px;
	left: 22px;
}
#subnav_li_resources {
	position: absolute;
	top: 618px;
	left: 77px;
}
#subnav_li_goto {
	position: absolute;
	top: 618px;
	left: 173px;
}
#subnav_li_print {
	position: absolute;
	top: 618px;
	left: 225px;
}
#subnav_li_pause {
	position: absolute;
	top: 618px;
	left: 471px;
}
#subnav_li_replay {
	position: absolute;
	top: 618px;
	left: 536px;
}
#subnav_li_mute {
	position: absolute;
	top: 618px;
	left: 598px;
}
#subnav_li_caption {
	position: absolute;
	top: 618px;
	left: 665px;
}
#subnav_li_end {
	position: absolute;
	top: 76px;
	left: 889px;
}
ul#posttest_menu li {
	margin-bottom: 0px;
}
/*-------- POPUPS -----------*/
.popup h2 {
	position: absolute;
	top: 10px;
	left: 10px;
}
.popup h3 {
	position: static;
	margin-bottom: 10px;
}
.popup #content {
	position: absolute;
	top: 55px;
	left: 25px;
	width: auto;
	overflow: visible;
	height: auto;
}
.popup #close {
	position: absolute;
	top: 10px;
	right: 5px;
}
.popup #closeprompt {
	padding: 10px 0;
}
.popup #content ul {
	padding-right: 20px;
	margin-left: 20px;
	margin-bottom: 20px;
}
.popup #content ul li {
	margin-bottom: 5px;
	margin-left: 15px;
}
.popup #content ul ul li {
	margin-bottom: 5px;
	margin-left: 15px;
	margin-top: 10px;
}
table.datatable {
	border-collapse: collapse;
	margin-bottom: 12px;
}
table.datatable td {
	padding: 0 5px;
	vertical-align: top;
}
/*-------- ACCESSIBILITY ELEMENTS -----------*/
p.access {
	position: absolute;
	top: -1000px;
	left: -1000px;
}
#dlink {
	position: absolute;
	top: 470px;
	left: 0;
}
p.menudisclaimer {
	margin-bottom: 5px;
}
/*---------------------------------------
               SKIN.CSS
---------------------------------------*/

body {
	background: #233c50 url(skin/body.jpg) no-repeat left top;
}
fieldset {
	border: none;
	width: 650px;
}
legend {
	color: #000000;
	overflow: hidden;
	margin-top: -1000px;
	width: 650px;
}
h1 {
	background: url(skin/h1.jpg) no-repeat top left;
}
h2 {
	color: #ffffff;
}
h3 {
	color: #000;
}
#pagecount {
	color: #ffffff;
}
/*-------- POPUPS -----------*/
body.popup {
	background: url(skin/popup_bg.gif) repeat-x left top;
	background-color: #FFF
}
.popup h2 {
	color: #FFFFFF;
}
.popup #close a {
	color: #FFFFFF;
}
.popup_header {
	background: url(skin/body_popup_header.jpg) no-repeat left top;
}
table.datatable {
	border-top: 1px solid #666666;
	border-left: 1px solid #666666;
}
table.datatable th, table.datatable td {
	border-bottom: 1px solid #666666;
	border-right: 1px solid #666666;
}
table.datatable th {
	background: #265174;
	color: #FFF;
}
table.datatable tr.blue {
	background: #e6f5f8;
}
/*-------- ACCESSIBILITY ELEMENTS -----------*/
#dlink a {
	color: #000000;
}
/*---------------------------------------
               TYPO.CSS
---------------------------------------*/

body {
	font: .9em/140% Arial, Helvetica, sans-serif;
}
h2 {
	font-size: 1em;
	font-weight: bold;
}
h3 {
	font-size: 1em;
	font-weight: bold;
}
#pagecount {
	font-size: .85em;
	font-weight: bold;
}
#dlink {
	font: normal 9px Verdana, Arial, Helvetica, sans-serif;
}
.kc-question {
	font-weight: normal;
}
.menudisclaimer {
	font: 0.85em Arial, Helvetica, sans-serif;
}
/*-------- POPUPS -----------*/
.popup h5 {
	font: bold italic 1em Arial, Helvetica, sans-serif;
}
.popup #close a {
	font: bold 1em Arial, Helvetica, sans-serif;
	text-decoration: none;
}
/*------ CUSTOM STYLES ------*/
/* -------------------------------------------------------------- 
 Generic Layout Elements
-------------------------------------------------------------- */

/*  #content_container  is going to act like our body or html level element container, since we can't touch that in ROCCE. It gets our basline typography and some other basics to keep things consistent.*/
#content_container {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	color: white;
	line-height: 1.25; /* Setting an explict line height */
	position: relative;
	width: 900px;
	height: 470px;
}
#pageContent {
	position: absolute;
	height: 470px;
	width: 900px;
}
.instructions {
	border-radius: 5px / 5px;
}
.background {
	/* used to lay an image under the content*/
	position: absolute;
	width: 900px;
	height: 470px;
	z-index: -1;
	top: 0px;
	left: 0px;
}
#content_container p {
	margin: 10px;
}
a img {
	border: none;
}
/* -------------------------------------------------------------- 
Opacity/visibility control helper classes
-------------------------------------------------------------- */
.fade75 {
	opacity: .75;
	filter: alpha(opacity=75);
}
.fade50 {
	opacity: .5;
	filter: alpha(opacity=50);
}
.fade20 {
	opacity: .2;
	filter: alpha(opacity=20);
}
.hidden {
	display: none;
}
/* -------------------------------------------------------------- 
Adds 3 pix yellow outline to focused items with this class - usually <a href
-------------------------------------------------------------- */
.link {
	padding: 3px;
	text-decoration: none;
	color: white;
}
.link:focus {
	border-style: solid;
	border-width: 3px;
	border-color: #f6ff00;
	text-decoration: none;
	padding: 0px;
	outline: none;
}
.imageLink img {
	padding: 3px;
}
.imageLink:focus img {
	border-style: solid;
	border-width: 3px;
	border-color: #f6ff00;
	text-decoration: none;
	padding: 0px;
	outline: none;
}
/* -------------------------------------------------------------- 
Instructions - pulled from a 3 column layout - may need to be focused
-------------------------------------------------------------- */
#primary_instructions {
	position: absolute;
	z-index: 2;
	top: 60px;
	left: 100px;
	background: rgb(0, 0, 0);
	border-left: 25px solid rgb(1, 77, 135);
}
#primary_instructions span {
	position: absolute;
	top: 125px;
	left: 280px;
	text-decoration: none;
	color: white;
	cursor: pointer;
}
#secondary_instructions {
	/*Replciated background image with CSS and removed image asset */
	position: absolute;
	display: none;
	z-index: 2;
	top: 150px;
	left: 200px;
	width: 378px;
	height: 208px;
	background: #000;
}
/* -------------------------------------------------------------- 
 Instructions pop up
-------------------------------------------------------------- */


.instructions_popup {
	border-top: 25px solid #FF0000;
	left: 165px;
	position: absolute;
	top: 130px;
	width: 480px;
	z-index: 2;
	border-top: 25px solid #337fa4;
	border-top: 25px solid rgba(51,127,164,0.8);
	border-radius: 5px;
	background: #141414;
	background: -moz-linear-gradient(top, rgba(45,46,47,0.9) 0%, rgba(45,46,47,0.9) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(45,46,47,0.9)), color-stop(100%, rgba(45,46,47,0.9))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, rgba(45,46,47,0.9) 0%, rgba(45,46,47,0.9) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, rgba(45,46,47,0.9) 0%, rgba(45,46,47,0.9) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, rgba(45,46,47,0.9) 0%, rgba(45,46,47,0.9) 100%); /* IE10+ */
	background: linear-gradient(to bottom, rgba(45,46,47,0.9) 0%, rgba(45,46,47,0.9) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e62d2e2f', endColorstr='#e62d2e2f', GradientType=0 ); /* IE6-9 */
}
#instructions_box_header {
	cursor: pointer;
	height: 20px;
	left: 413px;
	position: absolute;
	text-align: center;
	top: -20px;
	width: 67px;
}
.instructions_popup a {
	color: white;
	text-decoration: none;
}
.column .header {
	position: absolute;
	left: 3px;
	z-index: 1;
	text-align: center;
	width: 100%;
	font-size: 14pt;
}
/* -------------------------------------------------------------- 
 4 Column page Layout Elements
-------------------------------------------------------------- */
.four_column_container {
} /*Really no styles here - just noting the class that will cascade down for the child elments */
.four_column_container .column {
	width: 219px;
	position: absolute;
}
.four_column_container .column1 {
}
.four_column_container .column2 {
	left: 225px;
}
.four_column_container .column3 {
	left: 450px;
}
.four_column_container .column4 {
	left: 675px;
}
.four_column_container .column .content 
{
	position: absolute;
	width: 100%;
	left: 1px;
	z-index: 1;
	display: none;
}
.four_column_container .content {
	background: rgb(0, 0, 0);
	border-top: 25px solid rgb(1, 77, 135);
}

/* -------------------------------------------------------------- 
 3 Column page Layout Elements
-------------------------------------------------------------- */
.three_column_container {
} /*Really no styles here - just noting the class that will cascade down for the child elments */
.three_column_container .column {
	width: 294px;
	position: absolute;
}
.three_column_container .column1 {
}
.three_column_container .column2 {
	left: 300px;
}
.three_column_container .column3 {
	left: 600px;
}
.three_column_container .column .content {
	position: absolute;
	width: 100%;
	left: 1px;
	z-index: 1;
	display: none;
}
.three_column_container .content {
	background: rgb(0, 0, 0);
	border-top: 25px solid rgb(1, 77, 135);
}
.two_column_container {
} /*Really no styles here - just noting the class that will cascade down for the child elments */
.two_column_container .column {
	width: 444px;
	position: absolute;
}
.two_column_container .column1 {
}
.two_column_container .column2 {
	left: 450px;
}
.two_column_container .column .content {
	position: absolute;
	width: 100%;
	left: 3px;
	z-index: 1;
	display: none;
}
.two_column_container .content {
	background: rgb(0, 0, 0);
	border-top: 25px solid rgb(1, 77, 135);
}