/* Global styles */
body { overflow: -moz-scrollbars-vertical; behavior: url(js/csshover.htc); background-color:#8c8f8d; font-family:Verdana, Arial, Helvetica, sans-serif; color:#000;}
* {margin: 0 auto; padding: 0;}		/*<------<--------<-----| This assumes we're centering!!! */
a img {border: none;}
a { color:#0702c3; font-weight:bold; text-decoration:underline}
	a:hover, a.current {text-decoration:none;}
p { font-size:12px; padding:0 0 10px 0; line-height:18px;}
ul, ol {padding:4px 0 0 0;}
li {}
td, th, tr {font-size:11px;}
strong { color:#b20838;}
hr{height:1px; border:1px solid #b20838; border-width:1px 0 0 0; margin:0 0 10px 0; color:#b20838; background-color:#b20838;}
blockquote{ padding:0 0 0 18px;}

h1{color:#000; font-size:20px; padding:0 0 10px 0;}
h2{color:#000; font-size:18px; padding:0 0 10px 0;}
h3{color:#000; font-size:16px; padding:0 0 10px 0;}
h4{color:#b20838; font-size:14px; padding:0 0 10px 0;}
h5{color:#b20838; font-size:12px; padding:0 0 10px 0;}
h6{color:#b20838; 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;}

.formpadding td {padding: 0 0 10px 0;}
.greyLine { border:1px solid #ccc; border-width:0 0 1px 0; margin-bottom:10px; clear:both}

/*********NEWS CLASSES**********************************************/
.eventBody{ font-size:12px;}
.eventDate{ font-size:10px; font-weight:bold; padding:0 0 4px 0;color:#b20838;}
.eventTitle{color:#b20838; font-size:18px; clear:both; padding:0 0 4px 0;}
.shortDescriptionBoxOuter{ padding:0 0 16px 14px; border:1px #000 dashed; border-width:0 0 1px 0; margin-bottom:10px}

img.alignright {float:right; margin:6px 0 1em 1em}
img.alignleft {float:left; margin:6px 1em 1em 0}
img.aligncenter {display: block; margin-left: auto; margin-right: auto}
a img.alignright {float:right; margin:6px 0 1em 1em}
a img.alignleft {float:left; margin:6px 1em 1em 0}
a img.aligncenter {display: block; margin-left: auto; margin-right: auto}
/* Wrappers */				/*<------<--------<-----| Start building out your divs here... */
#ConceptWrapper { width:500px; padding:20px; border:1px solid #000; margin-top:20px; background-color:#fff;}
#PageWrapper{ width:925px; padding:10px 0 0 0; position:relative}
#Wrapper{}

/* home page top */
#HpTop{ background:url(../images/hp-top.gif) no-repeat; width:938px; height:118px; position:absolute; left:-12px}
#HpTopHolder{ width:938px; height:118px;}
#HpFlash{ background:url(../images/flash.jpg) no-repeat; width:925px; height:230px;}
#HpRedBar{ background:url(../images/red-bar-slice.gif) repeat-x; height:18px; width:925px;}
#HpContentArea{ background:#ebe8e3 url(../images/swoosh.gif) no-repeat; width:925px;}
#HpCopy{ width:618px; padding:14px 4px 14px 14px; float:left}
#HpCopyLeft{ float:left; width:400px; padding:0 6px 0 0;}
#HpCopyRight{ float:left; width:212px}
#HpCopyRight p{ padding:0 0 10px 18px; font-size:11px;}
#HpCopyRight p a{ font-weight:normal;}
#HpSide{ width:281px; float:left}
#HotJobsHolder{ width:281px; padding:8px 0;}
#HotJobsTop{ background:url(../images/hotjobsbox-top.gif) no-repeat; width:281px; height:61px;}
#SearchPadd{ padding:44px 0 0 26px}
#SearchPadd h5{ margin:0; padding:0;}
#HotJobsMiddle{ background:url(../images/hotjobsbox-slice.gif) repeat-y; width:281px;}
#HotJobsBottom{ background:url(../images/hotjobsbox-bottom.gif) no-repeat; width:281px; height:7px}
#HpBtnHolder{ padding:0 0 0 16px;}
.hpbtn{ margin-bottom:8px;}
.shortDescriptionBoxOuterAutostuff .shortDescriptionBoxInnerAutostuff .shortDescriptionBoxHeaderAutostuff{ font-size:11px; padding:0 0 10px 18px;}
.shortDescriptionBoxOuterAutostuff .shortDescriptionBoxInnerAutostuff .shortDescriptionBoxHeaderAutostuff a{ font-weight:normal;}
.shortDescriptionBoxOuterAutostuff .shortDescriptionBoxInnerAutostuff .shortDescriptionBoxSubheaderAutostuff{ display:none}
.shortDescriptionBoxOuterAutostuff .shortDescriptionBoxInnerAutostuff .shortDescriptionBoxTextAutostuff{ display:none}

#SubTop{ background:url(../images/sub-top.gif) no-repeat; width:925px; height:100px; margin-top:18px}
#SubTopHolder{ width:938px; height:118px;}

#BannerOurStory{ background:url(../images/banner-about.jpg) no-repeat; width:925px; height:145px;}
#BannerEmployers{ background:url(../images/banner-emp.jpg) no-repeat; width:925px; height:145px;}
#BannerJs{ background:url(../images/banner-js.jpg) no-repeat; width:925px; height:145px;}
#BannerSearch{ background:url(../images/banner-search.jpg) no-repeat; width:925px; height:145px;}
#BannerResources{ background:url(../images/banner-resources.jpg) no-repeat; width:925px; height:145px;}
#BannerContact{ background:url(../images/banner-contact.jpg) no-repeat; width:925px; height:145px;}

#SubRedBar{ background:url(../images/red-bar-slice.gif) repeat-x; height:18px; width:925px;}
#SubContentArea{ background:url(../images/bg-slice.gif) repeat-y; width:925px;}
#SubContentArea ul{ margin:0; padding:0 0 10px 30px; font-size:12px; line-height:18px}
#SubContentArea ol{ margin:0; padding:0 0 10px 30px; font-size:12px; line-height:18px}
#SubContentArea li{ margin:0; padding:0 0 6px 0}

#SubSide{ width:221px; float:left; padding:6px 20px 0 0;}
#SubBtnHolder{ padding:0 0 4px 3px;}

#TitleOurStory{ background:url(../images/subtitle-story.gif) no-repeat; width:221px; height:48px;}
#TitleEmployers{ background:url(../images/subtitle-employers.gif) no-repeat; width:221px; height:48px;}
#TitleJs{ background:url(../images/subtitle-js.gif) no-repeat; width:221px; height:48px;}
#TitleSearch{ background:url(../images/subtitle-search.gif) no-repeat; width:221px; height:48px;}
#TitleResources{ background:url(../images/subtitle-res.gif) no-repeat; width:221px; height:48px;}
#TitleContact{ background:url(../images/subtitle-contact.gif) no-repeat; width:221px; height:48px;}

#SubNav{ text-align:right}
#SubNav ul{ list-style:none; margin:0; padding:0 0 40px 0; font-size:12px}
#SubNav li{ padding:0 0 10px 0; margin:0;}
#SubNav li a{ padding:0 14px 0 0; color:#000; font-weight:bold; text-decoration:none;}
#SubNav li a:hover{ padding:0 14px 6px 0; background:url(../images/arrow.gif) no-repeat right; }
#SubNav li a.current{ padding:0 14px 6px 0; background:url(../images/arrow.gif) no-repeat right; }
#SubNav p{ text-align:left; color:#0000ff; padding:0 0 10px 14px;}

#SubCopy{ width:664px; padding:14px 0 14px 14px; float:left}
#SubCopyLeft{ float:left; width:410px; padding:0 30px 0 0;}
#SubCopyRight{ float:left; width:215px; padding:30px 0 0 0;}
#SidePic{ border:1px solid #b20838; height:191px; width:213px; overflow:hidden}
#SidePic img{}
#Sidebar{ padding:10px 0 10px 0}
#Sidebar a img{ text-decoration:none;}
#SubCopy2{ width:645px; padding:14px; float:left}

#Nav{ color:#e1dacb; padding:96px 3px 0 0;}
#Nav ul{ padding:0; margin:0; list-style:none; float:right; font-size:12px;}
#Nav li{ float:left; padding:0 2px}
#Nav li a{ color:#666; text-decoration:none; font-weight:normal}
#Nav li a:hover{ color:#b20838; text-decoration:underline}
#Nav li a.current{ color:#b20838; text-decoration:underline}

#Nav2{ color:#e1dacb; padding:78px 3px 0 0;}
#Nav2 ul{ padding:0; margin:0; list-style:none; float:right; font-size:12px;}
#Nav2 li{ float:left; padding:0 2px}
#Nav2 li a{ color:#666; text-decoration:none; font-weight:normal}
#Nav2 li a:hover{ color:#b20838; text-decoration:underline}
#Nav2 li a.current{ color:#b20838; text-decoration:underline}

#BlackBar{ background:#000; height:15px; width:925px;}
#Bottom{ font-size:11px;}
#FirstRow{ clear:both}
#SecondRow{ clear:both}
#SecondRow span{ padding:0 0 0 4px}
#FooterNavLeft{ float:left; width:580px;}
#FooterNavLeft ul{ padding:2px 0 0 0; margin:0; list-style:none; font-size:11px;}
#FooterNavLeft li{ float:left; padding:0 2px}
#FooterNavLeft li a{ color:#000; text-decoration:none; font-weight:normal}
#FooterNavLeft li a:hover{ color:#000; text-decoration:underline}
#FooterNavRight{ float:left; width:340px;}
#FooterNavRight ul{ padding:2px 0 0 0; margin:0; list-style:none; float:right; font-size:12px; padding:8px 0 0 0;}
#FooterNavRight li{ float:left; padding:0 2px}
#FooterNavRight li a{ color:#fff; text-decoration:none; font-weight:normal}
#FooterNavRight li a:hover{ color:#fff; text-decoration:underline}
#FooterNavRight li a.current{ color:#fff; text-decoration:underline}

#MapLinks{}
#MapLinks h4{ padding:4px; background-color:#b20838; color:#fff; margin-bottom:6px}
#MapLinks h4 a{ padding:4px; background-color:#b20838; color:#fff; margin-bottom:6px; text-decoration:none}
#MapLinks h4 a:hover{ padding:4px; background-color:#b20838; color:#fff; margin-bottom:6px; text-decoration:none}

#BodyFlash{border:1px solid #b20838; width:320px; float:left}
/******************JQuery Styles***************/
div.answer{display: none;}
	.answer{padding:10px; margin-bottom:5px;}
	div.question{ margin:8px 0 4px 0; background:#cfc5b5; padding:0; cursor:pointer}
	div.question h4{padding:4px; color:#b20838; font-size:14px; cursor:pointer}
	div.question:hover {background:#fff; cursor:pointer}
	div.question.active{background:#fff;}
	
/*********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. */	
	form{ padding:0 0 14px 0px;}
	#myForm.mceVisualAid p { padding:0 0 10px 0;}
	input[type="text"]{width:150px;}
	textarea{width:150px;}
	select{width:150px;}
	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: #FF3300;color: #FFF;font-weight: bold;}
	.custom-advice {margin: 5px 0;padding: 5px;background-color: #C8AA00;color : #FFF;font-weight: bold;}
/* Define the basic form layout */
	fieldset {padding: 1em;margin-bottom: 0.5em;}
	label {font-weight: bold;}
	.form-row {clear: both; font-size:11px}
	.field-label { float:left; width:180px; margin-bottom:10px;}
	.field-widget { float:left; width:200px; margin-bottom:10px;}
	/* Anything extra... */	
	.red{color:#990000;}
	
/***********s2k styles**************/	
.s2k_text_2006 {font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; line-height:normal; color:#000;}
.s2k_heading_2006 {font-weight:bold;font-size:16px;color:#000;}
.s2k_subheading_2006 {font-weight:bold;font-size:13px;color:#000;}
.s2k_bold_2006 {font-weight:bold;color:#000;}
.s2k_byline_2006 {font-size:10px;font-style:italic;color:#000;}
.s2k_footer_2006 {font-size:10px;color:#000;}
.s2k_image_2006 {border:1px solid #000;}
.src_synopsis_heading{ font-size:16px; font-weight:bold; color:#b20838;}
/***********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;}