@import url("/css/baseline.css");
@import url("/css/global.css");
@import url("/css/news.css");

/* -----------------------------------*/
/* -------->>> PAGE LAYOUT <<<--------*/
/* -----------------------------------*/

/* ---HEADER--- */
#HeaderContainer
{
	position: relative;
	width: 100%;
	height: 112px;
	background: url(/navigation/judici_header_01.jpg) 0 0 repeat-x;
}

#HeaderContainer span.courtLabel
{
	position: relative;
	top: 30px;
	left: 20px;
	height: 32px;
	color: #000000;
	font-weight: bold;
	font-size: 28px;
	letter-spacing: .3em;
	text-shadow: 2px 2px 2px #333333;
}

#MenuItems, #SubMenuItems
{
	margin-left: 0;
	padding: 0;
}

#MenuItems
{
	position: absolute;
	top: 40px;
	left: 20px;
	text-transform: uppercase;
    font-size: 18px;
}

#MenuItems.courtLevel { top: 55px; font-size: 14px; }


#SubMenuItems
{
	position: absolute;
	top: 60px;
	left: 20px;
	text-transform: uppercase;
    font-size: 12px;
}

#SubMenuItems.courtLevel { top: 72px; font-size: 11px; }

#MenuItems li, #SubMenuItems li
{
	float:left;
	list-style: none;
	padding-left: 3px;
	margin: 0;
}

/* ---CONTENT--- */
#ContentWrapper { float: left; width: 100%; }

#ContentWrapper div.content, #ContentWrapper div.contentWithSidebar
{
	background-color: #F1F0F6;
	border: 1px solid #184476;
	margin: 5px auto;
	text-align: center;
	width: 90%;
}

#ContentWrapper div.contentWithSidebar
{
	margin-left: 32%;
	width: 640px;
}

#ContentWrapper div.innerContent
{
	text-align: left;
	color: #292E33;
	background-color: white;
	border: 1px solid #184476;
	width: 98%;
	min-width: 590px;
	margin: 5px auto;
	padding: 2px;
}

#ContentWrapper div.innerContent > span { padding: 0 1%; }

#AdContainer
{
	float: left;
	width: 200px;
	margin-left: -200px;
	text-align: center;
}


/* ---FOOTER--- */
#Footer
{
	position: relative;
	width: 100%;
	text-align: center;
	background: url(/courts/common_nav/footer.jpg) top left repeat-x;
	padding-top: 25px;
}

#Footer p 
{
    font-size: 11px;
	color: #6B7DA5;
	margin: 4px;
}

#Footer p.footerLeft
{
	position: absolute;
	top: 25px;
	left: 5px;
}

#Footer p.footerRight
{
	position: absolute;
	top: 25px;
	right: 5px;
}
	

/* -----------------------------------*/
/* ------->>> DISPLAY STYLES <<<------*/
/* -----------------------------------*/
th
{
	background-color: #184476;
	border: 1px solid #000000;
	color: #FFFFFF;
	font-size: 14px;
	font-weight: bold;
	padding: 2px;
}

th a:link, th a:visited, th a:hover { color: #FFFFFF; }

table.bordered, table.bordered tr { border: 1px solid #184476; }
table.whiteBordered th, table.whiteBordered td { border: 1px solid #FFFFFF; }

table.linedGrey, table.linedWhite
{
	width: 98%;
	margin: 0 auto 16px auto;
}
table.linedGrey { background-color: #F1F0F6; }
table.linedWhite { background-color: #FFFFFF; }
table.linedGrey tr td, table.linedWhite tr td { border: 1px solid #184476; }

/* IE 6 doesn't seem to color all <a class="selected">s unless :link :hover and :visited selectors are included here (TODO: find out why; just a bug?) */
.selected, a:link.selected, a:hover.selected, a:visited.selected { color: #CC5020; font-weight: bold; }

.finePrint, .finePrintCentered
{
	color: #434B54;
	font-size: 12px;
	margin: 10px 5px;
}
.finePrint { text-align: justify; }
.finePrintCentered { text-align: center; }

.emphasize { color: #CC5020; font-weight: bold; }

form.oneLiner
{
	background-color: #ADBDCE;
	font-size: 12px;
	padding: 2px;
	border: 1px solid #184476;
}

.field_1, .field_2, .field_3, .field_4
{
	width: 98%;
	margin: 2px auto;
	padding: 4px 5px;
	text-align: left;
	border: 1px solid #184476;
}

.field_1 { background-color: #ADBDCE; }
.field_2 { background-color: #D1D9E4; }
.field_3 { background-color: #F1F0F6; }
.field_4 { background-color: #EEEEEE; }

div.titledBlueBox
{
	width: 99%;
	background-color: #D1D9E4;
	margin: 0 auto;
	padding: 0;
	border: 1px solid #184476;
}

div.titledBlueBox h3
{
	text-align: center;
	color: #FFFFFF;
	background-color: #184476;
	font-weight: bold;
	margin: 0 0 5px 0;
	padding: 5px 2px;
}

div.titledBlueBox > div
{
	background-color: #FFFFFF;
	margin: 2px 15px;
	padding: 3px 5px;
	border: 1px solid #184476;
}

div.titledBlueBox div ul { margin: 5px auto 5px 20px; list-style: disc; }
div.titledBlueBox div ul li { padding: 2px 0; }

.fieldLabel
{
	font-size: 14px;
	display: block;
	position: relative;
	top: 3px;
	float: left;
	width: 33%;
	text-align: left;
	margin-right: 10px;
}

div.activeCountiesMap
{
	float: right;
	width: 220px;
	height: 340px;
	background: transparent url('/activeIllinoisCountiesMap.png') no-repeat -0px -0px;
}

.bullet_image 
{
	list-style-image: url(/images/button.png);
	padding-left: 10px;
}

.buttonHolder
{
	width: 98%;
	margin: 10px auto;
	text-align: center;
}
.buttonHolder input
{
	text-align: center;
	width: 160px;
	margin: 5px 10px;
}
.buttonHolder input.big { width: 180px; }
.buttonHolder input.bigger { width: 200px; }
.buttonHolder input.biggest { width: 250px; }

p.formInstructions, p.formInstructionsJustified 
{
	color: #292E33;
	font-size: 14px;
	font-weight: bold;
	margin: 0;
	padding: 5px;
}
p.formInstructions { text-align: center; }
p.formInstructionsJustified { text-align: justify; }

a.buttonLink
{
	display: block;
	width: 122px;
	height: 16px;
	background: transparent url('/images/buttonBase.gif') no-repeat 0px 0px;
	font-size: 12px;
	text-align: center;
	padding-top: 2px;
}
a.buttonLink:hover { text-decoration: none; }

a:active.buttonLink { color: #FFFFFF; background: transparent url('/images/buttonBase.gif') no-repeat 0 -18px; }

.serviceLevel 
{
	font-size: 18px;
	font-weight: bold;
	text-decoration: none;
}

.serviceLoginButton 
{
	position: relative;
	left: 25px;
	bottom: 30px;
	width: 120px;
}

.serviceDescriptionLink 
{
	display: block;
	position: relative;
	background-color: #ADBDCE;
	border: 1px solid #184476;
	padding: 5px;
	margin: 3px 3px 3px 20px;
}

.serviceDescriptionLink:hover
{
	background-color: #D1D9E4;
	text-decoration: none;
}

.serviceDescriptionLink ul
{
	color: #000000;
	font-size: 14px;
	font-weight: 100;
	text-decoration: none;
}

.serviceBlurb ul { list-style: disc; }