@charset "utf-8";
/* CSS Document */

body{
background:url(/images/bg.jpg) top center repeat-x #8c8c8c;
padding:0; margin:0;
font-family:Arial, Helvetica, sans-serif, "Arial Black"}

body.sec{
background:url(/images/bgSec.jpg) top center repeat-x #8c8c8c;
padding:0; margin:0;
font-family:Arial, Helvetica, sans-serif, "Arial Black"}


/*--eliminates dashed lines around links on Firefox---*/
a {
  outline: none;
  color:#FFBA00;
  text-decoration:none;
}
a:hover{color:red;}


h1{ 
font-size:24px; font-style:italic; font-weight:bold;
margin:0; padding:0; color:#ffba00 }

#headlineHome h1{ 
font-size:24px; font-style:italic; position:relative; font-weight:bold;
 color:#ffba00;  }

h2{
color:#fff;
font-size:20px;
margin:0;
padding:0;}
h3{color:#fff;
font-size:16px;
margin:0;
padding:0;}
hr{
background-color:#FFBA00;
border:medium none;
color:#FFBA00;
height:1px;}
/*-------------------------Home Page top styles-------------------------------*/

#wrapper{
background: url(/images/wrapperBG.jpg) center top no-repeat;
width:100%;
position:relative;}


#header{
height:47px;}

#search{ 
float:left;
height:47px; width: 325px;
background:url(/images/search.png) left no-repeat}

#search input{ 
margin: 13px 0 0 65px;
border:1px solid #000000;
width:200px;}

/*-------------------------Secondary Page top styles-------------------------------*/

#wrapperSec{
background: url(/images/wrapperBGSec.jpg) center top no-repeat;
width:100%;
}

#container{
width:1000px;
margin:0 auto;}

#headerSec{
background: url(../images/header.jpg) no-repeat;
height:132px;
}
#logo{
display:block;
height:132px; width:280px;
text-indent:-9999px;
position:absolute;}

#searchSec{ 
float:right;
height:30px; width: 270px;
background:url(/images/search.png) left no-repeat;
}

#searchSec input{ 
margin: 5px 0 0 65px;
border:1px solid #000000;
width:200px;}

#contactSec{
text-align:right;
font-size:22px;
line-height:.9em;
width:200px;
float:right;
margin-top:5px;
color:#2b2929;
}
/*-------------------------Common styles-------------------------------*/

#headerNav{ 
float:right; 
text-align:right;
height:47px; width: 300px; color:#FFFFFF;
}
#headerNav a{
display:inline-block;
padding-top:12px;
color:#FFFFFF; text-decoration:none}

#headerNav a:hover{
text-decoration:underline}

#headerNav #store{
font-weight:bold; color:#ffba00}

#nav{height:53px; width:1000px}



/*-------------------------Home page styles-------------------------------*/
#middle{
background:url(/images/middleBG.jpg) no-repeat;
height:310px; width:1000px}
#middle #contact{
text-align:center;
font-size:22px;
line-height:1.0em;
width:200px;
position:relative;
top:180px; left:80px}
#fb{}
#headlineWrap{
height:46px;
background:url(/images/darkGrey.png) repeat;}

#headlineHome{
background:url(../images/formToFinish.jpg);
height:38px;
width:690px;
margin:0 auto;
padding:8px 0 0 310px;}


#contentWrap{
position:absolute;
margin:0 auto;
width:100%;
top:770px;
}

/*-------------------------Home News styles-------------------------------*/

#newsWrap{
background:url(/images/medGrey.png) repeat;
height:300px;}

#newsWrap img{
border:none;}

#formToFinish{
color:#ffba00;
font-size:17px}

.more{
text-align:right;
margin-top:15px;
padding-right:20px;}

.more img:hover, .read img:hover{
margin:1px 0 0 1px;}

.read{
color:#948c8a;
background: url(../images/smArrow.png) right no-repeat;
padding-right:15px;
text-decoration:none;
}
.read:hover{
color:#ce2228;
background: url(../images/smArrowO.png) right no-repeat;
}
#news{
width:983px;
margin:0 auto;}

#mainNews{
width:689px;
float:left;

}
#mainNews .headline{
border-bottom: 2px solid #696767; width:672px; padding-bottom:2px;
}
.headline{
color:#FFFFFF;
font-size:22px;
margin-top:7px;}

#caseStudies{
width:294px;
float:left;
}
#caseStudies .headline{
text-align:right;
}

#pageTextCase{
width:700px;
margin:0 auto;
line-height:1.4em;
padding:10px 0 20px 0}

#caseStudies #studies{
height:192px;
width:270px;
border-left: 14px solid #ffba00}

/*-------------------------Secondary page styles-------------------------------*/

#contentWrapSec{
width:975px;
margin:0 auto;
background:url(../images/contentBG.png) repeat;
margin-top:-1px;
color:#FFFFFF;
font-size:12px;
line-height:18px;
margin-bottom:25px;
min-height:400px;
padding:25px;
overflow:hidden;
z-index:1}


/*------------------------Common styles-------------------------------*/

#pageText{
width:1000px;
margin:0 auto;
line-height:1.4em;
padding:10px 0 20px 0}


#footer{width:950px; 
margin:0 auto;
text-align:center;
color:#414040;
font-size:16px;
padding:0px 25px 25px 25px}

#footer a{ 
color:#414040;
text-decoration:none}

#footer a:hover{
color:#FFBA00;
}
#copyright{
font-size:14px;}
#left{
float:left;
width:675px;
}
#right{
float:left;
width:275px;
padding-left:25px;
}
#leftProd{
float:left;
width:740px;
padding-right:10px;
border-right:1px solid #FFBA00;
}
#rightProd{
float:left;
width:200px;
margin-left:20px;
}

#rightProd img{
border:none}
.roundabout-moveable-item li{
list-style:none}
.roundabout-holder  { padding: 0; height: 5em; width:800px; list-style:none  }
   .roundabout-moveable-item {
      height: 4em;
      width: 4em;
      cursor: pointer;
      background-color: #ffc;
      border: 1px solid #999;
   }
   .roundabout-in-focus { cursor: auto; }
   
   
#faqContentsCategoryTD{
font-size:14px;
border-bottom:solid 1px #FFFFFF;
height:25px;
margin-bottom:10px;}
#faqContentsQuestionTD {
font-size:16px;}
#faqContentsQuestionIconTD{
width:10px;}
#faqContentsQuestionTD a{
display:block;
margin-bottom:3px;
margin-top:2px;
text-decoration:none;}
#faqContentsQuestionTD a:hover{
color:#696767;}
#faqQuestionSPAN{
color:#FFBA00;
font-size:16px;}
#faqTOPSPAN a{
color:#696767;}
#faqTOPSPAN a:hover{
color:#454444}

#borderLeft{border-right: 1px solid #696767;}

#dealerNewletter ul{
list-style:none;
font-size:16px;
margin:5px 0 0 0;
padding:0 0 0 20px;}
#dealerNewletter li{
margin-bottom:5px;}
.manuals li{color:#FFBA00; margin-bottom:3px;}
.manuals li a{ display:block}
.manuals li:hover{color:#696767}


/*
	root element for the scrollable.
	when scrolling occurs this element stays still.
*/
.scrollable {

	/* required settings */
	position:relative;
	overflow:hidden;
	width: 725px;
	height:325px;
	

	/* custom decorations */
	border:1px solid #FFBA00;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	background: #000000;
}

/*
	root element for scrollable items. Must be absolutely positioned
	and it should have a extremely large width to accomodate scrollable items.
	it's enough that you set the width and height for the root element and
	not for this element.
*/
.scrollable .items {
	/* this cannot be too large */
	width:20000em;
	position:absolute;
	clear:both;
}

.items div {
	float:left;
	width:800px;
}

/* single scrollable item */
.scrollable img {
	float:left;
	margin:20px 5px 20px 21px;
	background-color:#fff;
	padding:2px;
	border:1px solid #ccc;
	
	
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
}
.scrollable img:hover{border:1px solid #FFBA00;-moz-opacity:.80; filter:alpha(opacity=80); opacity:.80;}
/* active item */
.scrollable .active {
	border:2px solid #000;
	position:relative;
	cursor:default;
}


/* this makes it possible to add next button beside scrollable */
.scrollable {
	float:left;	
}

/* prev, next, prevPage and nextPage buttons */
a.browse {
	background:url(/images/scroll.png) no-repeat;
	display:block;
	width:30px;
	height:30px;
	float:left;
	margin:40px 10px;
	cursor:pointer;
	font-size:1px;
}

/* right */
a.right 				{ background-position: 0 -30px; clear:right; margin-right: 0px;}
a.right:hover 		{ background-position:-30px -30px; }
a.right:active 	{ background-position:-60px -30px; } 


/* left */
a.left				{ margin-left: 0px; margin-left:85px;} 
a.left:hover  		{ background-position:-30px 0; }
a.left:active  	{ background-position:-60px 0; }

/* disabled navigational button */
a.disabled {
	visibility:hidden !important;		
} 	

#flashHolder{


float: right;
margin-top:-44px;
/*margin-top:-107px when FB link added*/;
}

#flashAlt{
width: 628px;
height: 304px;
background:url(/images/flashAlt_base.jpg) 0 0 no-repeat;
}

	#flashAlt table{
	margin: 0 auto;
	width: 606px;
	}
	
	#flashAlt div.empty1{
	height: 107px;
	}
	
	#flashAlt div.empty2{
	height: 203px;
	}

	#flashAlt a{
	display: block;
	overflow: hidden;
	text-indent: -999em;
	}
	
	#flashAlt a#steel{
	background: none;
	width:203px;
	height:48px;
	}
	
	#flashAlt a#steel:hover{
	background:url(/images/flashAlt_steelForms.jpg) 0 0 no-repeat;
	}
	
	#flashAlt a#poly{
	background: none;
	width:203px;
	height:48px;
	}
	
	#flashAlt a#poly:hover{
	background:url(/images/flashAlt_polyForms.jpg) 0 0 no-repeat;
	}
	
	#flashAlt a#stakes{
	background: none;
	width:203px;
	height:48px;
	}
	
	#flashAlt a#stakes:hover{
	background:url(/images/flashAlt_steelStakes.jpg) 0 0 no-repeat;
	}
	
	#flashAlt a#wheelbarrows{
	background: none;
	width:205px;
	height:48px;
	}
	
	#flashAlt a#wheelbarrows:hover{
	background:url(/images/flashAlt_wheelbarrows.jpg) 0 0 no-repeat;
	}
	
	#flashAlt a#tubs{
	background: none;
	width:205px;
	height:48px;
	}
	
	#flashAlt a#tubs:hover{
	background:url(/images/flashAlt_mortarTubs.jpg) 0 0 no-repeat;
	}
	
	#flashAlt a#carts{
	background: none;
	width:205px;
	height:48px;
	}
	
	#flashAlt a#carts:hover{
	background:url(/images/flashAlt_handlingCarts.jpg) 0 0 no-repeat;
	}
	
	#flashAlt a#screeds{
	background: none;
	width:198px;
	height:48px;
	}
	
	#flashAlt a#screeds:hover{
	background:url(/images/flashAlt_trussScreeds.jpg) 0 0 no-repeat;
	}



#back{
display:block;
background:url(../images/back.png) no-repeat ;
height:14px; width:123px; text-indent:-9999px;
}
#back:hover{background:url(../images/backO.png) no-repeat ;}
.contact-form input{
margin-bottom:5px;
background-color:#333333;
border:1px solid #FFBA00;
color:#FFFFFF }
.contact-form input:hover{
background-color: #666666}
.contact-form select{
margin-bottom:5px;border:1px solid #FFBA00;}
.addthis_button_email{
display:block; background:url(../images/email.png) no-repeat;
height:28px; width:185px;text-indent:-1000px; overflow:hidden
}
.addthis_button_email:hover{
background:url(../images/emailO.png)}
.addthis_button_email .at300b, .addthis_button_email .at300m, .addthis_button_email .at300bs, .addthis_button_email .at15t_email {
background:none;
}
main.css (line 197)
.addthis_button_email .at300b, .addthis_button_email .at300m, .addthis_button_email .at300bs, .addthis_button_email .at15t_email {
background:none;
}

/*_______________________________ ADDITIONAL PRODUCT STYLES _______________________________________ */

.proTitle{
font-size:24px;
font-weight:bold;
margin:0; padding:0}
.proDisc{
font-size:16px}

#detailSideHead{
font-size:16px;
margin-top:25px;
font-weight:bold;}
#detailSideBody{
padding-left:20px;
font-size:14px}
#emailLink{
color:#000000}
#emailLink2{color:#2B2929;}
#emailLink:hover, #emailLink2:hover {
color:#FFBA00;
}
input.requiredCaptcha{
color:#FF0000;
border:solid 1px #FF0000}



/*_______________________________ TIMELINE STYLES _______________________________________ */


#timeLine{
background:url(../images/metalFormsTimeline.jpg) no-repeat;
height:300px; width:1000px;
margin:-25px auto 25px auto; }

#fade { /*--Transparent background layer--*/
	display: none; /*--hidden by default--*/
	background: #000;
	position: fixed; left: 0; top: 0;
	width: 100%; height: 100%;
	opacity: .80;
	z-index: 9999;
}
.popup_block{
	display: none; /*--hidden by default--*/
	background: #fff;
	padding: 30px;
	border: 10px solid #FFBA00;
	float: left;
	font-size: 1.2em;
	position: fixed;
	top: 50%; left: 50%;
	z-index: 99999;
	/*--CSS3 Box Shadows--*/
	-webkit-box-shadow: 0px 0px 20px #000;
	-moz-box-shadow: 0px 0px 20px #000;
	box-shadow: 0px 0px 20px #000;
	/*--CSS3 Rounded Corners--*/
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}
img.btn_close {
	float: right;
	margin: -55px -55px 0 0;
	border:none;
}
.popup_block h2{
padding:0;
margin:0 0 10px 0;
color:#DE1A1B}



/*--Making IE6 Understand Fixed Positioning--*/
*html #fade {
	position: absolute;
}
*html .popup_block {
	position: absolute;
}

.timeLink{
font-size:1px; /*for ie6*/
height:13px; width:13px;
display:block; 
position:relative;
text-indent:-99999px;
outline:none; 
 }
.timeLink:hover{
background:url(/images/timelineHover.gif) no-repeat;}

#one{
top:136px ;left:54px ; position:relative;}
#two{
top:82px ;left:66px ; position:relative;}
#three{
top:74px ;left:144px ; position:relative;}
#four{
top:181px ;left:172px ; position:relative;}
#five{
top:12px ;left:223px ; position:relative;}
#six{
top:14px ;left:351px ; position:relative;}
#seven{
top:-12px ;left:447px ; position:relative;}
#eight{
top:4px ;left:536px ; position:relative;}
#nine{
top:44px ;left:548px ; position:relative;}
#ten{
top:19px ;left:615px ; position:relative;}
#eleven{
top:106px ;left:669px ; position:relative;}
#twelve{
top:-32px ;left:679px ; position:relative;}
#thirteen{
top:-112px ;left:683px ; position:relative;}
#fourteen{
top:-80px ;left:751px ; position:relative;}
#fifteen{
top:-148px ;left:770px ; position:relative;}
#sixteen{
top:-53px ;left:738px ; position:relative;}
#seventeen{
top:43px ;left:782px ; position:relative;}
#eighteen{
top:-102px ;left:908px ; position:relative;}
#nineteen{
top:-10px ;left:931px ; position:relative;}
#twenty{
top:-65px ;left:979px ; position:relative;}