/* Global styles */
body { overflow: -moz-scrollbars-vertical; behavior: url(../js/csshover.htc); background:#333 url(../images/bg-slice.jpg) repeat-x; font-family:Verdana, Arial, Helvetica, sans-serif; color:#3a3a3a;}
* {margin: 0 auto; padding: 0;}		/*<------<--------<-----| This assumes we're centering!!! */
a img {border: none;}
a { color:#19388a; text-decoration: underline;}
	a:hover, a.current {text-decoration: none;}
p { font-size:11px; padding:0 0 10px 0; line-height:17px}
ul, ol {padding:4px 0 0 0;}
li {}
td, th, tr {font-size:12px;}
strong { color:#3a3a3a;}

h1{color:#19388a; font-size:16px; padding:0 0 10px 0;}
h2{color:#19388a; font-size:15px; padding:0 0 10px 0;}
h3{color:#19388a; font-size:14px; padding:0 0 10px 0;}
h4{color:#19388a; font-size:12px; padding:0 0 10px 0;}
h5{color:#19388a; font-size:11px; padding:0 0 10px 0;}
h6{color:#19388a; 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}

/* Wrappers */				/*<------<--------<-----| Start building out your divs here... */
#ConceptWrapper { width:500px; padding:20px; border:1px solid #000; margin-top:20px; background-color:#fff;}
#PageWrapper{ width:933px; background:url(../images/slice.jpg) repeat-y;}
#PageWrapper ul{ font-size:11px; padding:0 0 10px 18px; margin:0;}
#PageWrapper ol{ font-size:11px; padding:0 0 10px 18px; margin:0;}
#PageWrapper li{ padding:0 0 4px 0; margin:0; line-height:17px}
#HpTop{ background:url(../images/hp-banner.jpg) no-repeat; width:933px; height:406px;}
#HpTop p{ line-height:normal;}
#HpBottom{ background:url(../images/hp-bottom.jpg) no-repeat; width:933px; height:192px;}
#HpBottom p{ line-height:normal;}
#Footer{ width:903px; height:80px; padding:0 15px; background:#333}
#Footer span{ font-size:11px; color:#fff;}
#Footer span a{ color:#fff; text-decoration:none}
#Footer span a:hover{ text-decoration:underline}

#HpMainCopy{ width:320px; float:left; padding:220px 0 0 20px; height:161px;}
#HpMainCopy p{ color:#5762a4;}
#HpMainCopy h1{color:#19388a; font-size:14px; padding:0 0 10px 0;}

#HpEmp{ width:390px; float:left; padding:12px 20px 0 16px}
#HpQl{ width:120px; float:left; padding:60px 10px 0 16px}
#HpQl ul{ padding:0 0 0 6px}
#HpQl li{ padding:0 0 10px 0; margin:0}

#HpJs{ width:320px; float:left; padding:12px 10px 0 16px}

#SubWrapper{ background:url(../images/sub-banner.jpg) no-repeat; width:933px; padding:70px 0 0 0; *padding:67px 0 0 0;}
#SubBottom{ background:url(../images/sub-bottom.jpg) no-repeat; width:933px; height:30px;}


#Nav{width:923px; height:23px; list-style:none; padding:0 10px 0 0; position:relative; clear:both; display:block;}
#Nav ul{margin:0; padding:0;list-style:none}
#Nav li{float:left;}				
#Nav li a span{display:none;}				
#Nav li a{height: 23px; display: block; float: left; padding: 0;}	
			
#Nav li a.home{width:136px; background: url(../images/nav_01.gif) no-repeat top;}
#Nav li a.about{width:156px; background: url(../images/nav_02.gif) no-repeat top;}		
#Nav li a.emp{width:162px; background: url(../images/nav_03.gif) no-repeat top;}
#Nav li a.js{width:173px; background: url(../images/nav_04.gif) no-repeat top;}	
#Nav li a.blog{width:121px; background: url(../images/nav_05.gif) no-repeat top;}	
#Nav li a.contact{width:175px; background: url(../images/nav_06.gif) no-repeat top;}

#Nav li a:hover{background-position:bottom; }
#Nav li a.current{background-position:bottom; }

#SubNav{ height:26px; padding:5px 0 0 0;}

#TitleAbout{ background:url(../images/title-about.jpg) no-repeat; width:933px; height:43px; margin:18px 0 0 10px; _margin:14px 0 0 10px}
#TitleEmp{ background:url(../images/title-emp.jpg) no-repeat; width:933px; height:43px; margin:18px 0 0 10px; _margin:14px 0 0 10px}
#TitleJs{ background:url(../images/title-js.jpg) no-repeat; width:933px; height:43px; margin:18px 0 0 10px; _margin:14px 0 0 10px}
#TitleContact{ background:url(../images/title-contact.jpg) no-repeat; width:933px; height:43px; margin:18px 0 0 10px; _margin:14px 0 0 10px}
#TitleBlank{ width:933px; height:43px; margin:18px 0 0 10px}
#TitleFoundation{ background:url(../images/title-foundation.jpg) no-repeat; width:933px; height:43px; margin:18px 0 0 10px; _margin:14px 0 0 10px}

#SubCopy{ padding:30px 26px 10px 14px; width:893px;}
#SubPic{ padding:5px; border:#9ca3aa solid 1px; width:219px; float:left}
#SubCopyArea{ width:382px; float:left; padding:0 20px 0 14px;}
#SubCopyArea2{ width:620px; float:left; padding:0 14px;}
#SideBar{ float:left}
#SideBarBox{ width:224px; padding:10px; border:1px solid #9d0a0e;}

#SubSplitLeft{  width:470px; float:left; padding:0 40px 0 14px}
#SubSplitRight{ padding:5px; border:#9ca3aa solid 1px; width:326px; float:left;}


.subMenuItem{ color:#fff; font-size:12px; padding:0 10px ;text-decoration:none}
a:hover.subMenuItem{ text-decoration:underline;}
.activeSubMenuItem{ text-decoration:underline;}

/******************JQuery Styles***************/
div.answer{display: none;}
	.answer{padding:10px; margin-bottom:5px;}
	div.question{ margin:8px 0 4px 0; background:#fff; border:1px solid #9ca3aa; padding:0;}
	div.question h4{padding:4px; color:#19388a; font-size:12px; font-weight:normal}
	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: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:160px; margin-bottom:10px;}
	.field-widget { float:left; width:160px; 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;}

/***********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;}