/* INITIALIZE ENVIRONMENT */
:root{
    --color-error:#FF0000;

    --color-border-gray:#CCCCCC;
}



/* GENERAL STYLES */
html { font-family:verdana,arial,sans-serif; font-size:90%; }
body { background-color:#FFFFFF; color:#000000; margin:0; padding:0; }
tr, td { vertical-align:top; }
tr.top td { vertical-align:top; }  /* need to apply the vertical alignment to the column or it doesn't work in Opera */
img { border:0; }
a { color:#0000FF; }
a:hover, a:focus { color:#006600; text-decoration:none; }
.fileInfo { font-style:italic; font-size:80%; white-space:nowrap; }
.addInfo { font-size:80%; font-style:italic; }
.systemText, .systemText td { color:#666666; font-style:italic; }
td.systemText { text-align:center; }
.errorText { color:var(--color-error); font-weight:bold; }
.nowrap { white-space:nowrap; }
.endFloat { clear:both; font-size:.0000001%; }  /* avoid, use clearAfter instead */
.clearAfter::after { clear:both; content:""; display:block; height:0; visibility:hidden; }
.hide { left:-9999rem; position:absolute; }  /* used to hide content meant for screen readers and for those with CSS turned off */



/* PAGE HEADER */
#stateNDBanner { background:#FFFFFF; border-bottom:1px solid var(--color-border-gray); height:26px; margin:0; padding:2px 3px; }
#stateNDBanner div { float:left; }
#stateNDBanner div.floatRight { float:right; }
#stateNDBanner img { border:0; height:25px; }
@media (max-width: 545px) {
	#stateNDBanner #ndGovImg img { margin-left:-195px; }
}
#pgHeader { background-color:#4469CB; clear:both; }
#pgHeader img { width:251px; height:48px; border:0; }


/* MAIN CONTENT COLUMN */
#innerBorder { padding:2rem; border:3px solid var(--color-border-gray); }
#mainContent { border-left:10px solid #1A229B; border-right:10px solid #4469CB; }
#mainContent h1 { border-bottom:#0066CC 2px solid; color:#0066CC; font-size:130%; font-weight:bold; padding-bottom:5px; }
#mainContent h1.first { margin-top:0; }
#mainContent h2 { color:#0066CC; font-size:110%; font-weight:bold; margin-top:2rem; }
#mainContent h2.first { margin-top:1rem; }
#mainContent h3 { font-size:100%; font-weight:bold; }
#mainContent p { line-height:1.4rem; }
#mainContent li { line-height:1.4rem; margin-bottom:0.25rem; }
#mainContent .double > li { margin-bottom:1rem; }
#mainContent .double > li > ul { margin-top:6px; }
#mainContent .fileName { color:#666666; font-size:80%; font-style:italic; padding-top:4px; }


/* PAGE FOOTER */
#footerLinks { background:#4469CB url("/dotsc/prepguide/images/footerFade.gif") repeat-y; border-bottom:1px solid #000000; color:#FFFFFF; padding:8px; }
#footerLinks a { color:#FFFFFF; font-size:80%; white-space:nowrap; }
#footerText { font-size:80%; margin:1rem; padding-bottom:1rem; }
#footerText #validationIcons img { width:43px; height:15px; border:0; }
#footerText #validationIcons span { position:absolute; left:-9999rem; }  /* used to hide content meant for screen readers and for those with CSS turned off */



/* STYLES FOR ORANGE/BLACK TABLES */
#mainContent .navTable { background-color:#FFCC33; border:1px solid #333300; display:inline-block; }
#mainContent .navTable h1 { background-color:#333300; border:0; color:#FFCC33; font-size:100%; font-weight:bold; margin:0; padding:5px; text-align:center; }
#mainContent .navTable ul.options { background-color:#FFFFFF; border:1px solid #C39713; margin:5px; padding:7px 7px 7px 25px; }
#mainContent .navTable ul#collapseList img { height:13px; padding-right:4px; vertical-align:middle; width:15px; }
#mainContent .navTable ul#collapseList ul ul { margin-bottom:1rem; }
#mainContent .navTable table.options { border-spacing:1px; margin:5px; }
#mainContent .navTable table.options th { background-color:#CCCCCC; border:1px solid #C39713; }
#mainContent .navTable table.options td { background-color:#FFFFFF; border:1px solid #C39713; }
#mainContent .navTable table.options table { border-collapse:collapse; }
#mainContent .navTable table.options table td { border-color:#CCCCCC; }
#mainContent .navTable table.bandedRows tr:nth-of-type(odd) td { background-color:#F3F3F3; }


#mainContent .secTable, .secTable th, .secTable td { border:1px solid #9F9F9E; }
#mainContent .secTable th { background-color:#E3EAFB; }
#mainContent .secTable td { padding:1rem; }
#mainContent .secTable ul { margin:2px 4px 2px 20px; padding-left:0; }
#mainContent .secTable li { margin-bottom:0.3rem; }



/* MESSAGE BOX (typically used to display database connection / query errors) */
#mainContent .msgBox { background-color:#FEFDFA; border:1px solid #000000; padding:1.5rem; margin:2.5rem 1rem; font-size:120%; }
#mainContent .msgBox p { margin:1rem 0 0; font-weight:bold; }
#mainContent .msgBox p:first-child { margin:0; }
#mainContent .msgBox .normal { color:#000000; font-style:normal; font-weight:normal; }
#mainContent .msgBox ul { margin:0.5rem 0 0 45px; padding:0; }
#mainContent .msgBox li { margin:0.25rem 0 0; }
#mainContent .msgBox li:first-child { margin:0; }
#mainContent .msgBox.error p { color:var(--color-error); }                                          /* custom styling -- msgBox also flagged as an error box */
#mainContent .msgBox.normal p { color:#000000; font-style:normal; font-weight:normal; }  /* custom styling -- msgBox also flagged as a normal box */



/* STANDARD DATA TABLES */
.dataTable { margin:2rem 0; }
.dataTable table { border:1px solid var(--color-border-gray); border-collapse:collapse; }
.dataTable tr { vertical-align:top; }
.dataTable th,
.dataTable td { border:1px solid var(--color-border-gray); padding:5px; }
.dataTable th,
.dataTable td.th,
.dataTable tr.th td { background-color:#F5F5F5; text-align:center; font-weight:bold; }
.tableEmulation h3 { background-color:#F5F5F5; border:1px solid var(--color-border-gray); border-width:0 1px; margin:0; padding:5px; text-transform:uppercase; }
.tableEmulation h3.first { border-top:1px solid var(--color-border-gray); }
.tableEmulation ul { border:1px solid var(--color-border-gray); margin:0; padding:5px 5px 5px 2rem; }



/* RELATED LINKS MENU */
#mainContent .wrapper { position:relative; height:1%; padding-right:200px; }  /* used to float the related links box -- don't need if you use a table to position the box */
#mainContent div.relatedLinks { position:absolute; top:0; right:0; background-color:#FFFFFF; width:180px; }  /* used to float the related links box -- don't need if you use a table to position the box */
#mainContent .subMenu { border:1px solid var(--color-border-gray); width:180px; margin-bottom:1rem; }
#mainContent .subMenu h2 { background-color:#E3EAFB; color:#000000; font-weight:bold; font-size:100%; padding:5px; margin:0; }
#mainContent .subMenu ul { margin:7px 9px 9px 27px; padding-left:0; }
#mainContent .subMenu li { margin-bottom:0.3rem; }
#mainContent .subMenu div { margin:1rem; }
#mainContent .subMenu p { margin:1rem; }
#mainContent .subMenu_float { clear:right; float:right; margin:0 0 1rem 1rem; }
#rightCol { padding-left:25px; }