*{margin:0;padding:0;}

body{font-size:62.5%;background:#d3d2d2 url('../images/bg-fade.jpg') repeat-x;
	font-family:verdana,arial,sans-serif;color:#727071;}

/*-- General Styles --*/
p{font-size:1.2em;padding-bottom:15px; line-height:1.2em;}

ul,ol{padding-left:25px;font-size:1.2em;}

ul p, ol p{font-size:1em;}

ul ul{font-size:1em;}

img{border:1px solid #727071;}

#leftCol img{border:none;}

h1{text-indent:-9999px;background:url('../images/trucast-logo.jpg') no-repeat 0px 6px;height:73px;width:850px;
	padding-bottom:6px;}
h1 a{float:left;display:block;height:73px;width:163px;margin-top:6px;}

h2{font-size:1.2em;font-weight:bold;text-align:left;padding:25px 15px 20px 0px;color:#000000;}
h3{font-size:1.2em;font-weight:bold;padding-bottom:3px;color:#727071;}
h4{font-size:1.2em;font-weight:normal;padding-bottom:3px;color:#000000;}

a{text-decoration:underline;color:#bf2026;}
a:visited{}
a:hover{text-decoration:none;}

.wrapper fieldset{border:1px solid gray;padding:0px 5px 10px 5px;margin-bottom:10px;}
.wrapper fieldset legend{color:#404040;font-weight:bold;margin-left:10px;padding:1px;}
.wrapper fieldset label{float:left;text-align:right;padding-right:3px;}
.wrapper fieldset ol{margin:0;padding:0;list-style-type:none;margin-top:15px;}
.wrapper fieldset ol li{padding-bottom:5px;}

.button {text-align:center;}

/*NOTE: Height, negative margin, position:relative, and z-index used to pull blockquote over picture. Extended the height of the blockquote to 300px to accomodate longer quotes.*/
blockquote{background:url('../images/quote-left.png') no-repeat 5px 10px;padding:10px 10px 10px 40px;
		color:#ffffff;height:300px;margin-bottom:-320px;position:relative;z-index:2;font-size:1.0em;}
blockquote .pName{font-size:.9em; font-weight:bold; text-align:right; margin-right:15px;}
blockquote .company{display:block;}


/*-- Layout --*/
/*NOTE: The width itself is 860px total.  The 10px padding on the left and right calculates into this: 10px + 10px + 840px = 860px.

Since the wrapper has 10px padding on the left side, all elements will start 10px away from the edge.  In the case of the left column, this isn't what was wanted.  So, I set the left margin of the #mainContent div to -10px.  The negative top margin is to pull the left column up next to the nav, whereas otherwise it would appear immediately following the nav.

The #mainContent div uses the faux column technique.  It has a background image set to the width of the left column, and repeating vertically.  This gives the appearance of two columns with equal heights.
*/

.wrapper{width:840px;padding:0px 10px 0px 10px;margin:0 auto;margin-top:20px;background:#ffffff;}

#mainContent{background:url('../images/dark-gray-bg2.jpg') repeat-y 0px 0px; float:left;margin-left:-10px;margin-top:-14px;width:850px;position:relative;}

#leftCol{float:left;width:183px;min-height:373px;background:url('../images/long-fade.jpg') repeat-x;}
#rightCol{float:right;width:657px;padding-left:10px;}

#std_header{margin-bottom:0px;}

#std_annotation{width:860px;margin:0 auto;text-align:right;clear:both;
		padding:5px 5px 0px 0px;font-size:.8em;}
#std_annotation a{text-decoration:none;color:#727071;}
#std_annotation a:visited{}
#std_annotation a:hover{text-decoration:underline;}
		
.footer{width:860px;margin-left:-10px;clear:both;padding:5px 0px 5px 0px;color:#727071; background:#FFFFFF;; border-top:5px solid #d3d2d2;}
.footer ul{padding-right:15px;list-style-type:none;font-size:1.1em;text-align:center;}
.footer ul li{display:inline;padding:0px 5px 0px 5px;}
.footer a{text-decoration:none;color:#727071;}
.footer a:visited{}
.footer a:hover{text-decoration:underline;}


/*-- Navigation Styles --*/
/*NOTE: Setting negative margin to #nav and adding 1px to a:hover were part of process of getting IE to play along.

The basic styles (color, border, etc.) are set on the anchor tag. Negative margins are set on some elements, e.g. li:hover, to prevent the list items (and their content) from shifting each other when restyled.

The list item declarations, such as #item1, are necessary in order to identify each list item uniquely.  Paired with an id on the body tag of each page, it sets the "you are here" state.

The width of the nav itself is 10px wider than the right column, as it was to extend to the right side.  Because the right side also has 10px of padding, a negative right margin is used.
*/

#nav{width:677px;float:right;margin-bottom:10px;margin-right:-10px;margin-top:-4px;}
#nav ul{padding-left:0px;list-style-type:none;padding-bottom:0px;float:left;width:100%;}
#nav ul li{float:left;text-align:center;margin-top:4px;}
#nav ul li a{float:left;display:block;background:#bf2026;color:#ffffff;width:100%;height:100%;
		text-transform:uppercase;padding:3px 0px 3px 0px;font-size:.95em;text-decoration:none;}
#nav ul li a:hover{text-decoration:underline;}
#nav ul li:hover{margin-top:4px;margin-bottom:0px;}

#item1{width:100px;margin-right:2px;}
#item2{width:121px;margin-left:2px;margin-right:2px;}
#item3{width:142px;margin-left:2px;margin-right:2px;}
#item4{width:164px;margin-left:2px;margin-right:2px;}
#nav ul #item5{width:136px;margin-right:0px;margin-left:2px;}

#home #item1, #about #item2, #work #item3, #login #item4, #contact #item5{margin-top:0px;margin-bottom:0px;margin-left:0px;}

#home #item1 a, #about #item2 a, #work #item3 a, #login #item4 a, #contact #item5 a{padding:6px 0px 6px 0px;text-decoration:none;background:#ffffff;color:#bf2026;border-top:1px solid #bf2026;border-left:1px solid #bf2026;border-right:1px solid #bf2026;}

/*NOTE:Needed to reset size for first item when active*/
#home #item1{width:98px;}
#contact #nav ul #item5{width:134px;margin-left:0px;}


/*-- Home Page Styles --*/
.h2Home{text-align:center;}
/*NOTE:To have box fill entire right col, would set it to 677px w/a margin-right of -10px. */
#fixedBottomBox{width:657px;float:right;position:absolute;bottom:10px;right:0px;
background:#F7F7F7;padding:10px 0px 15px 0px;height:67px;}
#fixedBottomBox p{text-align:center;color:#404040;}
#fixedBottomBox ul{list-style-type:none;text-align:center;padding-left:110px;}
#fixedBottomBox ul li{display:inline;text-align:center;}
#fixedBottomBox ul li a{text-decoration:none;background:#ffffff;border:1px solid #bf2026;padding:5px 5px 5px 5px;float:left;width:100px;margin-right:35px;color:#706d6e;text-transform:uppercase;font-size:.85em;line-height:1.5em;}
#fixedBottomBox ul li a:hover{text-decoration:underline;color:#706d6e;border:1px solid #706d6e;}

#home_page_wrapper #leftCol{background:url('../images/long-fade.jpg') repeat-x 0 0;text-align:center;}
#home_page_wrapper #rightCol{padding-bottom:137px;}

/*NOTE: Put pics inside of UL so it they could be styled differently due to IE*/
#ulSidePics img{display:block;float:left;border:1px solid #bf2026;}
#ulSidePics {padding-left:0px;list-style-type:none;}
#ulSidePics li{float:left;width:100%;padding-bottom:7px;}

#pic1{margin-left:35px;}
#pic2{margin-left:80px; margin-top:15px;}
#pic3{margin-left:20px; margin-top:15px;}
#pic4{margin-left:70px; margin-top:15px;}

/*NOTE: When width of wrapper is set to 760, these columns should be 170px. Upped each by 33px once wrapper was increased by 100px.*/
.smallCol{float:left;width:205px;padding:10px 10px 15px 10px;color:#727071;}
#dColMid{border-left:1px solid #bf2026;border-right:1px solid #bf2026; }
#dColLeft{padding-left:0px;}
#dColRight{padding-right:0px;}


/*-- What We Do Styles --*/
#ulProdList{list-style-type:none;padding-left:0px;float:left;width:100%;}
#ulProdList li{border-top:1px solid #d3d2d2;float:left;width:100%;padding-top:10px;padding-bottom:10px;}
#ulProdList ul{list-style-type:disc;}
#ulProdList ul li{padding:0px 0px 2px 0px;margin-bottom:0px;border-top:none;}
#ulProdList img{float:right;margin-left:10px;width:180px; height:130px;}
#ulProdList h3{ font-size:inherit;}

.listLeft{float:left;width:447px;padding-top:0px;}


/*-- Login Page Styles --*/
.required{color:#bf2026;}

.txtShort{width:115px;}
.txtMed{width:145px;}
.txtLong{width:195px;}

#fsLogin {width:350px;}
#fsLogin legend{font-size:1.2em;}
#fsLogin ol{}
#fsLogin ol li{}
#fsLogin ol #liSubmitHolder{text-align:center;}
#fsLogin ol #liRequired{}
#fsLogin label{width:115px;}


/*-- Document List Page Styles --*/
.ulDocList{border-top:1px solid #d3d2d2;list-style-type:none;padding-left:0px;float:left;width:100%;}
.ulDocList li{float:left;width:100%;padding-top:10px;padding-bottom:10px;}
.ulDocList ul{list-style-type:disc;}
.ulDocList ul li{padding:0px 0px 2px 0px;margin-bottom:0px;margin-left:20px;border-top:none;}
.ulDocList img{float:right;margin-left:10px;width:65px; height:65px;}
.ulDocList h3{font-size:inherit;}
.ulDocList h4{font-size:inherit; margin-left:15px;}
.ulDocList p{font-size:inherit; margin-left:15px;}


/*-- Contact Page Styles --*/
/*NOTE: Set width according to what width of image is.*/
#contactImg{float:right;}
#contactImg img{width:300px;}

.ulContact{list-style-type:none;padding-bottom:15px;padding-left:0px;}
#map{width:542px;margin-top:10px;padding:10px 0px 10px 115px;border-top:1px solid #d3d2d2;}


/*Custom Dialog box*/
.style_DialogBoxBrowserVersion{width:90% ! important;width:760px;
			position:absolute;top:230px;visibility:hidden;}
.style_DialogBoxBrowserVersion_inner{width:700px;
		border:1px solid #FF0000;background:#E5E5E5; margin:0 auto; padding: 5px 5px 5px 5px;}
.style_DialogBoxBrowserVersion_inner p.title{font-weight:bold; color:#FF0000;}
.style_DialogBoxBrowserVersion_inner button{border:1px outset #ffffff;margin:0px 10px 20px 10px;}
/*Custom Dialog box*/