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

body{
margin:0;
background:url("../images/bg/content_bg.jpg");
background-repeat:repeat-x;
background-position:bottom;
font-family:Arial, Helvetica, sans-serif;
font-size: 12px;
color: white; 
}

img{  
border-style: none;
}

h1{
margin-top:0;
font-size:16px;
font-weight:bold;
}

h2{
margin-top:0;
font-size:14px;
color:#203D77;
font-weight:bold;
}



/*=====================================GENERAL FORMATTING=======================================*/

/*Text formatting*/

.blue{
color:#203D77;
}

.bold_blue{
color:#203D77;
font-weight:bold;
}

.lightblue{
color:#4C6FB6;
}

.bold_lightblue{
color:#4C6FB6;
font-weight:bold;
}

.bold_grey{
color:#666666;
font-weight:bold;
}

/*Links*/

a:link{
color:#666666;
text-decoration:none;
}

a:visited{
color:#666666;
text-decoration:none;
}

a:hover{
color:#666666;
text-decoration:underline;
}  


/*Lists*/

li{
margin-left:0;
}

ul {
text-decoration: none;
list-style-position: outside;
padding-left: 0;
margin-left:15px;
}



/*=====================================TOPBAR=======================================*/

/*topbar_bg is the background, topbar_container positions the elements (center) within the topbar*/
#topbar_bg{
width:100%;
height:100px;
background:url("../images/bg/darkblue_grad.jpg");
background-repeat:repeat-x;
}

#topbar_container{
width:760px;
height:100px;
margin-left:auto;
margin-right:auto;
}

#logo{
position:absolute;
width:400px;
height:100px;
margin-left:180px;
}


/* 'Visit out store' hanger/button */
#store_hanger{
display: block;
position:absolute;
width:150px;
height:100px;
background: url("../images/hanger/hanger.jpg") no-repeat 0 0;
}


#store_hanger:hover
{ 
  background-position: 0 -100px;
}



/*MENU*/

#menu_bg{
width:100%;
height:35px;
background:url("../images/bg/lightblue_grad.jpg");
background-repeat:repeat-x;
margin-bottom:20px; /*to position gallery in IE*/
}

#menu_bg a:link{
color:white;
text-decoration:none;
}

#menu_bg a:visited{
color:white;
text-decoration:none;
}

#menu_bg a:hover{
color:white;
text-decoration:none;
} 

#menu_container{
width:760px;
margin-left:auto;
margin-right:auto;
text-align:center;
}

#divider{
float:left;
width:1px;
height:35px;
background: url("../images/menu/divider.png") no-repeat 0 0;
}


/*=====================================SITE CONTAINER=======================================*/

/*this centers everything betweeen the TOPBAR and the FOOTER */

#site_container{
margin-left:auto;
margin-right:auto;
width:760px;
}


/*=====================================IMAGE GALLERY=======================================*/

#image_gallery{
width:760px;
height:350px;
overflow:hidden;
}


/*main image rounded corners*/
#image_rounder{
width:540px;
height:350px;
background: url("../images/gallery/image_rounder.png") no-repeat 0 0;
position:absolute;
z-index:500;
}



/*=====================================TEXT CONTENT=======================================*/


#content_container{
z-index:50;
width:760px;
padding:20px 0px 20px 0px;
}

/*the curved sections of #content_container */
#content_container .top{
float:left;
width:760px;
height:20px;
background: url("../images/content/top.png");
}


#content_container .middle{
float:left;
width:720px; /*allowing for padding*/
padding:0px 20px 0px 20px;
background: url("../images/content/content_bg.jpg");
background-repeat:repeat;
}

#content_container .bottom{
float:left;
width:760px;
height:20px;
background: url("../images/content/bottom.png");
}


/*the highlighted sections for the quote forms*/
#content_container a.highlight_section{
display:block;
padding: 5px;
background: #999999;
}

#content_container a.highlight_section:hover{
display:block;
padding: 5px;
background: #666666;
text-decoration:none;
}


#content_container a.highlight_section:link{
color:white;
text-decoration:none;
}

#content_container a.highlight_section:visited{
color:white;
text-decoration:none;
}

/*the highlighted sections for the quote forms - when 2 forms are linked in one page (eg. racking systems)*/

#content_container .hightlight_section2{
float:left;
padding: 5px;
background: #999999;
}

#content_container .hightlight_section2 .text{
float:left;
}

#content_container .hightlight_section2 .item{
text-align:center;
margin-top:20px;
margin-bottom:10px;
float:left;
width:355px;
}

#content_container .hightlight_section2 .item a:link{
text-decoration:none;
color:white;
background:#666666;
padding:5px;
}

#content_container .hightlight_section2 .item a:visited{
text-decoration:none;
color:white;
background:#666666;
padding:5px;
}

#content_container .hightlight_section2 .item a:hover{
text-decoration:none;
color:white;
background:#333333;
padding:5px;
}



  


/*=====================================FORMS (used on quote request pages)=======================================*/

/*used on quote pages - the back button to the info page*/
#form_back{
height:20px;
line-height:20px;
margin-bottom:10px;
}

#form_back .button{
float:left;
background:url("../images/quote_pages/back.jpg");
background-repeat:no-repeat;
margin-top:5px;
width:10px;
height:10px;
}

#form_back .text{
margin-left:5px;
float:left;
}

#form_back .text a:link{
color:white;
text-decoration:none;
}

#form_back .text a:visited{
color:white;
text-decoration:none;
}

#form_back .text a:hover{
color:#666666;
text-decoration:none;
}



/*FORM INPUTS*/
input
{
height:15px;
line-height:15px;
color: #666666;
background: white;
}


.form_name{
display:block;
margin-top:20px;
height:15px;
line-height:15px;
color:white;
font-weight:bold;
}

#quote_details,
#your_details{
float:left;
width:350px; 
background:#999999;
}

#your_details{
margin-left:20px;
}

.your_details_input,
textarea.your_details_input{
width:330px;
}

textarea.your_details_input{
color: #666666;
background: white;
height:100px;
}

#quote_details .heading,
#your_details .heading{
display:block;
padding:10px;
font-weight:bold;
background:#666666;
}

#quote_details .content,
#your_details .content{
padding:10px;
}

/*'form_special' is used for when 2 forms are required under one category and are displayed next to each other*/
.form_special{
width:80px;
}

.form_special_left{
float:left;
width:120px;
}

.form_special_right{
margin-left:20px;
float:left;
width:120px;
}


/*'check_special' is used when multiple checkboxes fall under a single category - the form area is split into 3 columns*/
/*first is the top categories, second is the second categories branching from the top, and third is the check boxes*/
/*used on Turnkey Solutions Pallet racking quotation form*/
#check_special{
float:left;
margin-top:10px;
width:330px;
line-height:20px;
background:#777777;
}

#check_special .column1{
float:left;
width:130px;
}

#check_special .column2{
float:left;
width:100px;
}

#check_special .column3{
float:left;
width:100px;
line-height:20px;
}

/*to line up input radios + checks with text and give them a grey bg*/
/*standard grey bg*/
.input_formatted{
margin-top:4px;
background:url("../images/content/content_bg/jpg");
}
/*dark grey bg*/
.input_formatted_dark{
margin-top:4px;
background:#777777;
}


/*these are for the same purpose as above but when the 3 columns are different widths*/
/*example on the Turkey - racking systems - shelving quote page*/
#check_special .columna{
float:left;
width:130px;
}

#check_special .columnb{
float:left;
width:50px;
}

#check_special .columnc{
float:left;
width:150px;
}

/*styling for the SUMBIT buton*/
.send_button{
float:right;
height:30px;

line-height:30px;
width:350px; /*IE fix*/
background:#666666;
margin-top:20px;
text-align:center;
color:white
}


/*=====================================BOTTOM CONTENT (flash & logos) =======================================*/

#bottom_content{
width:760px;
padding-bottom:20px;
margin-left:auto;
margin-right:auto;
}

#bottom_content .leasing_finance_flash{
float:left;
width:250px;
height:70px;
}

#bottom_content .bottom_logos{
float:right;
width:250px;
height:70px;
background:url("../images/bottom_logos/bottom_logos.png");
}


/*=====================================FOOTER=======================================*/

/*FOOTER - general */
#footer{
margin-top:20px;
width:100%;
height:275px;
font-size: 10px;
text-align:center;
}

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

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

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

/*FOOTER - Links bar*/
.footer_links_bg{
height:155px;
background:url("../images/bg/footer_lightblue_grad.jpg");
background-repeat:repeat-x;
}

.footer_links_bg .content{
width:760px;
margin-left:auto;
margin-right:auto;
text-align:center;
line-height:35px;
}



/* FOOTER - Contact details*/
.footer_contact_bg{
height:100px;
background:url("../images/bg/darkblue_grad.jpg");
background-repeat:repeat-x;
}

.footer_contact_bg .content{
width:760px;
margin-left:auto;
margin-right:auto;
text-align:left;
}

.footer_contact_bg .content .address{
float:left;
width:575px;
height:20px;
margin-top:30px;
}

.footer_contact_bg .content .tel_fax{
float:left;
width:145px;
height:20px;
margin-top:30px;
margin-left:40px;
}

.footer_contact_bg .content .tel_fax .title{
float:left;
width:40px;
}

.footer_contact_bg .content .tel_fax .text{
float:left;
width:105px;
}


/*tag for web design 'think creative'*/
#tag{
height:20px;
line-height:20px;
text-align:center;
background:#0F1E51;

background:url("../images/bg/tag_bg.jpg");
background-repeat:repeat;
}

#tag a:link{
color:#4C6FB6;
text-decoration:none;
}

#tag a:visited{
color:#4C6FB6;
text-decoration:none;
}

#tag a:hover{
color:white;
text-decoration:underline;
}