/*************GLOBAL STYLES******************/
body { overflow: -moz-scrollbars-vertical; behavior: url(/js/csshover.htc); background:#668ec8 url(images/bg-slice.jpg) repeat-x; font-family:Verdana, Geneva, sans-serif; color:#000; font-size:12px; }
* { margin: 0 auto; padding: 0; }		/*<------<--------<-----| This assumes we're centering!!! */
a img { border: none; }
a { font-weight:bold; color:#00c0ff; text-decoration:underline}
a:hover, a.current { text-decoration:none; }
p { line-height:17px; padding:0 0 12px 0; }
ul, ol { margin:0; padding:0 0 12px 30px;}
li { margin:0; padding:0 0 4px 0}
td, th, tr { }
strong { }
hr{ color:#ccc; border:1px solid #ccc; border-width:1px 0 0 0; margin:10px 0;}
blockquote{ padding:0 0 10px 30px;}

h1 { color:#203e79; font-size:20px; padding:0 0 10px 0; }
h2 { color:#000; font-size:18px; padding:0 0 10px 0; }
h3 { color:#203e79; font-size:16px; padding:0 0 10px 0; }
h4 { color:#000; font-size:14px; padding:0 0 10px 0; }
h5 { color:#000; font-size:12px; padding:0 0 10px 0; }
h6 { color:#000; font-size:10px; padding:0 0 10px 0; }

/*************REUSABLE CLASSES******************/
.right { float:right; }
.left { float:left; }
.full { position:relative; width:99%; }	/****<-----| This works better w/ px based widths ****/
.split50 { position:relative; width:50%; float:left; }
.split30 { position:relative; width:33%; float:left; }

/*************WRAPPERS**************/
#PageWrapper { width:860px;}
#Wrapper { width:860px; position:relative}

#Top{ background:url(images/top.gif) no-repeat; width:860px; height:90px;}

#HpMiddleTop{ background:url(images/hp-img.jpg) no-repeat; width:860px; height:433px;}
#BlackBar{ height:12px; background-color:#000; width:860px; margin:2px 0}
#HpMiddleBottom{ height:150px; width:860px; padding:0; position:relative; left:-7px}
.hpbox1{ float:left; width:289px; height:150px;}
.hpbox2{ float:left; width:289px; height:150px;}
.hpbox3{ float:left; width:282px; height:150px;}
.hpBtn1{ background:url(images/hp-btns_01.png) no-repeat top; width:289px; height:150px; display:block; cursor:pointer}
.hpBtn1:hover{ background-position:bottom}
.hpBtn2{ background:url(images/hp-btns_02.png) no-repeat top; width:289px; height:150px; display:block; cursor:pointer}
.hpBtn2:hover{ background-position:bottom}
.hpBtn3{ background:url(images/hp-btns_03.png) no-repeat top; width:289px; height:150px; display:block; cursor:pointer}
.hpBtn3:hover{ background-position:bottom}


#SubMiddle{ width:860px; background:url(images/bg-sub-slice.gif) repeat-y;}
#SubMiddleBlank{ width:860px; background:url(images/bg-sub-slice-blank.gif) repeat-y;}
#Left{ background:url(images/sub-nav.jpg) no-repeat top; float:left; width:164px; padding:10px 11px 0 0; border-right:1px solid #8eacd6}
#LeftSidebar{ padding:10px 0 10px 10px; color:#fff;}
#LeftSidebar a{ color:#fff;}
#Right{ float:left; width:684px;}
#BannerAbout{ background:url(images/sub-banner-about.jpg) no-repeat; width:684px; height:132px; border-bottom:5px solid #fff;}
#BannerContact{ background:url(images/sub-banner-contact.jpg) no-repeat; width:684px; height:132px; border-bottom:5px solid #fff;}
#BannerEmployers{ background:url(images/sub-banner-employers.jpg) no-repeat; width:684px; height:132px; border-bottom:5px solid #fff;}
#BannerJobseekers{ background:url(images/sub-banner-js.jpg) no-repeat; width:684px; height:132px; border-bottom:5px solid #fff;}
#BannerResources{ background:url(images/sub-banner-resources.jpg) no-repeat; width:684px; height:132px; border-bottom:5px solid #fff;}
#BannerSearch{ background:url(images/sub-banner-search.jpg) no-repeat; width:684px; height:132px; border-bottom:5px solid #fff;}

#Copy{ float:left; padding:10px 10px 10px 20px; width:470px; color:#7b7b7b;}
#CopyFull{ float:left; padding:10px 10px 10px 20px; width:640px; color:#7b7b7b;}
.testim{ font-size:11px; line-height:15px;}
#Sidebar{ float:left; padding:10px 0 10px 18px; width:150px;}

#Nav{ text-transform:uppercase; height:280px;}
#Nav ul{ margin:0; padding:0; list-style:none; text-align:right; font-size:11px;}
#Nav li{ margin:0; padding:0 0 10px 0}
#Nav li a{ color:#fff; text-decoration:none}
#Nav li a:hover{ text-decoration:underline}
#Nav li a.current{ font-weight:bold; color:#00c0ff; text-decoration:underline}
#Nav ul ul{ margin:0; padding:0 0 10px 0; list-style:none; text-align:right; font-size:11px; text-transform:none;}
#Nav ul ul li{ margin:0; padding:0 0 4px 0}
#Nav ul ul li a{ color:#fff; text-decoration:none; font-weight:normal;}
#Nav ul ul li a:hover{ text-decoration:underline}
#Nav ul ul li a.current{ font-weight:bold; color:#00c0ff; text-decoration:underline}

#HpBottom{ clear:both; width:860px; border-top:1px solid #5675a2; padding:10px 0;}
#SubBottom{ clear:both; width:860px; background:url(images/bottom-bar-slice.gif) repeat-x; padding:20px 0 10px}
#Footer{ color:#004182; font-size:10px; line-height:15px; background:url(images/logos.gif) no-repeat right; width:860px;}
#Footer a{ color:#004182}
#site_credits { cursor:pointer }

/*************JQuery Styles***************/
div.answer { display: none; }
.answer { padding:10px; margin-bottom:5px; }
div.question { margin:8px 0 4px 0; background:#ededed; padding:0; }
div.question h4 { padding:4px; color:#000; font-size:12px }
div.question:hover { background:#dbdbdb; cursor:pointer }
div.question.active { background:#dbdbdb; }

/*************Form Styles**************/
/* Define your base widths here as well as any fancy button formatting.  Just remember that only real browsers will see image-based buttons. */	
input[type="text"] { width:200px; }
textarea { width:200px; }
select { width:200px; }
input[type="button"] { }
input[type="submit"] { }
/* Define the various event states */	
input.disabled, select.disabled { border: 1px solid #F2F2F2; background-color: #F2F2F2; }
input.required, textarea.required, select.required { border: 1px solid #00A8E6; }
input.validation-failed, textarea.validation-failed, select.validation-failed { border: 1px solid #FF3300; color: #FF3300; }
input.validation-passed, textarea.validation-passed, select.validation-passed { border: 1px solid #00CC00; color: #000; }
.validation-advice { margin: 5px 0; padding: 5px; background-color: #990000; color: #fff; font-weight: bold; }
.custom-advice { margin: 5px 0; padding: 5px; background-color: #990000; color : #fff; font-weight: bold; }
/* Define the basic form layout */
fieldset { padding: 1em; margin-bottom: 0.5em; }
label { font-weight: bold; }
.form-row { font-size:12px; margin:0 0 8px 0 }
.field-label { float:left; width:200px; }
.field-widget { float:left; width:200px; }
/* Anything extra... */	
.red { color:#990000; }

/*************Min-Height Hack**************/
.prop { float:left; width:1px; }
.clear { clear:both; height:1px; overflow:hidden; }	/* I don't currently rely on .clear */
.min431px { height:431px; }

/***************************************/	

/* -- Alsett Clearing Method*/
.clearfix:after { content: "."; display:block; height:0; clear:both; visibility:hidden; }
* html .clearfix { height: 1%; }
.clearfix { display: block; }
.clearfix { display:inline-block; }
/* Hide from IE Mac \*/
.clearfix { display:block; }