/*
*************************************************

ASG FABRICATIONS
General Screen Styles

*************************************************
*/

/*-------------------------------------------    
    Global Styles
-------------------------------------------*/
* { margin: 0; padding: 0; color: #fff; line-height: 1.4em; }
body { font-size: 65%; font-family: Arial, Helvetica, sans-serif; background-color: #171717; background-image: url(../images/bg-tile.gif); background-repeat: repeat-x;}
h1 { color: #ffffff; }
h2 { margin-bottom: 1em; line-height: 1.4; }
h3 { margin: 0 0 0.5em; font-size: 14px; }
p { margin-bottom: 1em; font-size: 12px; line-height: 1.4em; }
ul { margin-bottom: 1em; }
.highlight { font-size: 16px; color: #CA000B; }
.generic_button a { background-image: url(/images/generic-bg.gif); border: 1px solid #666666; background-color: #141414; float: left; padding: 5px; color: #FFFFFF; display: block; font-size:13px;}
.global_link {background-image: url(/images/back.gif); background-repeat:no-repeat; padding: 2px 15px 2px 20px; border:solid 1px #999999; margin-top:10px; margin-bottom:10px; float:left; }
.info {background-image: url(/images/info.gif); background-repeat:no-repeat; background-position: 0 0; padding: 5px 0 5px 30px; float:left; width:600px;}


/*-------------------------------------------    
    Header
-------------------------------------------*/
#header { width: 800px; float: left; border-top: 6px solid #464646; padding-top: 10px; background-image: url(../images/header-bg.gif); background-repeat: no-repeat; background-position: 210px 0; }
#logo { height: 0px; padding-top: 90px; width: 405px; float: left; background-image: url(../images/logo.gif); background-repeat: no-repeat; overflow: hidden; background-position: 50px 10px; }

#quick_links {  height: 50px; float: left; padding-top: 25px; padding-bottom: 10px; }
#quick_links ul { }
#quick_links li { list-style-type: none; float: left; }
#quick_links li a { list-style-type: none; float: left; display: block;  padding-top: 65px; height: 0; overflow: hidden; background-image: url(../images/quick.gif); background-repeat: no-repeat; }
#quick_links li a:hover { background-image: url(../images/quick-over.gif); }
#quick_links li.first a { width: 189px; }
#quick_links li.second a { width: 141px; background-position: -189px 0; }
#quick_links li.third a { width: 131px; background-position: -330px 0;}

#contacts { width: 355px; float: left; padding-bottom: 3px; font-size: 11px; border-bottom: 1px solid #666666; padding-top: 15px; }
#contacts a { text-decoration: none; }
#contacts a:hover { color:#FF7171; }
#contacts #email { float:right; padding-left: 25px; }
#contacts #fax { float:right; }

#quote_button { width: 355px; float: left; padding-top: 10px; }
#quote_button a { width: 109px; float: right; padding-top: 23px; height: 0; overflow: hidden; background-image: url(../images/QUOTE.gif); background-repeat: no-repeat; }
#quote_button a:hover { background-position: -109px 0; }

/*-------------------------------------------    
    Nav
-------------------------------------------*/
#nav { width: 760px; float: left; background-color: #3d3d3d; height: 35px; background-image: url(../images/menu-bg.gif); background-repeat: no-repeat; border-bottom: 1px solid #171717; padding-left: 40px; }
#nav ul { width: 527px; float: left; }
#nav ul li { list-style-type: none; float: left; }
#nav ul li a {  text-decoration: none; background-image: url(../images/nav.gif); background-repeat: no-repeat; padding-top: 35px; height: 0; overflow: hidden; display: block; }
#nav ul li a:hover { background-image: url(../images/nav-over.gif); }

#nav ul li.home a{ width: 67px; background-position: 0px 0px;}

#nav ul li.home a.active{background-image: url(../images/nav-over.gif);}

#nav ul li.about a{ background-position: -67px 0px; width: 88px; }
#nav ul li.products a{ background-position: -155px 0px; width: 85px; }
#nav ul li.brochure a{ background-position: -240px 0px; width: 112px; }
#nav ul li.gallery a{ background-position: -352px 0px; width: 76px; }
#nav ul li.contact a{ background-position: -428px 0px; width: 99px; }

.body_contact #nav ul li.contact a,
.body_gallery #nav ul li.gallery a,
.body_products #nav ul li.products a,
.body_brochure #nav ul li.brochure a,
.body_about #nav ul li.about a { background-image: url(../images/nav-over.gif); }

#search { float: left; width: 190px; }
#search p { padding: 0; margin: 0; }
.search_btn { width: 35px; height: 35px; float: left; background-image: url(../images/search-button.gif); background-repeat: no-repeat; border: 0;}
.search_txt { border: 1px solid #000000; width: 135px; color: #000000; font-size: 10px; padding: 2px; float: left; margin: 9px 7px 0 7px ; }

#footer { width: 676px; float: left; padding: 12px 0px 20px 10px; }
#footer_nav { }
#footer_nav ul { font-size: 1em; }
#footer_nav ul li { list-style-type: none; float: left; padding: 0px 7px 0px 7px; border-right: 1px solid #444444; }
#footer_nav ul li a { text-decoration: none; color: #000000; }
#footer_nav ul li a:hover { text-decoration: underline; color:#FF7171; }
#footer_nav ul li.copy {  float: right; padding-right: 0px; color: #999999; border: 0; }

/*-------------------------------------------    
    Structure
-------------------------------------------*/
#container { width: 800px; margin: 0 auto; padding-top: 0px; }
#main_col { width: 760px; float: left; background-color: #666666; padding-left: 40px; padding-top: 10px; background-image: url(../images/red-bg.gif); background-repeat: no-repeat; background-position: 0 -17px; }

#middle_section_home { width: 700px; float: left; background-color: #191919; padding: 10px 10px 45px 10px; }
#middle_section { width: 700px; float: left; background-color: #191919; padding: 20px 10px 45px 10px; }
#middle_section a { text-decoration: none;  }
#middle_section a:hover { text-decoration: underline; color:#FF7171; }
#middle_section h2, #middle_section_home h2 { margin: 0 0 0.2em 0; font-size: 12px; }

#middle_section input { margin: 0; border: 0; color:#333333; border:0}

#middle_section textarea { margin: 0; border: 0;  color:#333333; width: 196px; border:0 }

#general_text_left { width: 460px; float: left; margin-top: 30px; border-right: 1px solid #444444;  padding-left: 5px; }
#general_text_left_large { width: 694px; float: left; margin-top: 30px; padding-left: 5px; }
#general_text_right { width: 180px; float: left; padding-left: 20px; margin-top: 30px; }
#general_text_left p { padding-right:20px;}





/*-------------------------------------------    
    Home
-------------------------------------------*/
#logo_home { height: 0px; padding-top: 106px; width: 300px; float: left; background-image: url(../images/logo.gif); background-repeat: no-repeat; overflow: hidden; background-position: 50px 26px; }
#home_image { width: 680px; float: left; height: 166px; }
#home_text_left { width: 375px; float: left; margin-top: 30px; padding-left: 5px; border-right: 1px solid #666666; padding-right: 30px; }
#home_text_right { width: 250px; float: left; padding-left: 15px; margin-top: 30px; padding-top: 0px; }
#home_header { padding-top: 25px; height: 0; overflow: hidden; background-image: url(../images/home-header.gif); background-repeat: no-repeat; }

.grey_link { width: 234px; background-color: #282828; padding: 8px; margin-bottom: 3px; display: block; float:left;  }

.grey_link_product { width: 234px; background-color: #282828; padding: 8px; margin-bottom: 3px; display: block; float:left; background-image: url(../images/product-ad-home.jpg); background-repeat: no-repeat; background-position: 105px 28px;  }
.grey_link h2, .grey_link_product h2 {width: 130px; display: block; float: left; color: #FFFFFF; font-weight:normal; padding-top: 5px; font-style:italic;}
.grey_link a.go, .grey_link_product a.go { display: block; text-decoration: none; font-size: 11px; font-weight: bold; height: 0; padding-top: 23px; background-image: url(../images/go.gif); background-repeat: no-repeat; overflow: hidden; width: 59px; float: right; }
.grey_link a.go:hover, .grey_link_product a.go:hover  { background-position: -59px 0;   }

.grey_link p, .grey_link_product p  { font-size: 1.2em; font-style: italic; }
.grey_link a.more, .grey_link_product a.more { display: block; text-decoration: none; font-size: 11px; font-weight: bold; height: 0; padding-top: 23px; background-image: url(../images/more.gif); background-repeat: no-repeat; overflow: hidden; width: 87px; }
.grey_link a.more:hover, .grey_link_product a.more:hover { background-position: -87px 0;   }

/*-------------------------------------------    
    About
-------------------------------------------*/
#about_text_left { width: 335px; float: left; margin-top: 30px; border-right: 1px solid #444444; padding-right: 107px; padding-left: 5px; }
#about_text_right { width: 180px; float: left; padding-left: 20px; margin-top: 30px; }
#about_text_right ul { padding-left: 15px; list-style-type: circle; font-size: 11px; }
#about_text_right li { padding-bottom: 0.4em; }
#about_header { padding-top: 25px; height: 0; overflow: hidden; background-image: url(../images/about-header.gif); background-repeat: no-repeat; }

/*-------------------------------------------    
    Brochure
-------------------------------------------*/
.brochure_holder { padding: 5px; border: 1px solid #333333; margin-right: 20px; margin-bottom: 15px; }
.brochure_holder_end { padding: 5px; border: 1px solid #333333; margin-bottom: 15px; }
#brochure_header { padding-top: 25px; height: 0; overflow: hidden; background-image: url(../images/brochure-header.gif); background-repeat: no-repeat; }

.brochure_title{ float: left; width: 500px; padding-bottom: 10px; }

.brochure_list { width: 690px; float: left; border-bottom: 1px solid #666666; margin-bottom: 20px; }
.brochure_list ul{ float: left;  }
.brochure_list li{float: left; list-style-type: none; padding-right: 10px; padding-bottom: 20px; }
.brochure_list li a{ float: left; padding: 5px; border: 1px solid #333333; width: 179px; height: 224px; }
.brochure_list img{ padding: 0; border: 0; margin: 0; }

.brochure_list li a:hover{ border: 1px solid #FF6C6C; }

.brochure_p{ width: 600px; float: left; padding-top: 30px; }
.brochure_p a{ font-weight: bold; }


/*-------------------------------------------    
    Products
-------------------------------------------*/

#guides_header { padding-top: 25px; height: 0; overflow: hidden; background-image: url(../images/guide-lines-header.gif); background-repeat: no-repeat; }



#product_menu { float: left; padding-left: 20px; margin-top: 30px; }
#product_menu  ul { padding: 0; margin: 0; list-style-type: none; font-size: 11px; }
#product_menu  ul li { }
#product_menu  ul li#title { padding: 3px 3px 3px 6px; width: 197px; background-color: #4B4B4B; display: block; color: #FFFFFF; font-size: 12px; margin-bottom: 1px; }
#product_menu  ul li.main_cat a { padding: 3px 3px 3px 25px; width: 178px; display: block; color: #ffffff; text-decoration: none; background-image: url(../images/prod-colours/dark.gif); background-repeat: no-repeat ; background-color: #3a3a3a; margin-bottom: 1px; }

#product_menu  ul li.sub_cat a { padding: 3px 3px 3px 35px; width: 168px; display: block; color: #000000; text-decoration: none; margin-bottom: 1px;  background-color: #969696; background-image:url(../images/prod-colours/light.gif); background-repeat: repeat-x; }

#product_menu  ul li a:hover { background-color: #a60f0f; background-image: url(../images/prod-colours/red.gif); background-repeat: repeat-x; color: #FFFFFF; text-decoration: none; }

#product_menu  ul li.s_main_cat a { padding: 3px 3px 3px 6px; width: 197px; display: block; color: #FFFFFF; text-decoration: none; margin-bottom: 1px; background-color: red; }
#product_menu  ul li.s_sub_cat a { background-color: #a60f0f; background-image: url(../images/prod-colours/red.gif); background-repeat: repeat-x; color: #FFFFFF; text-decoration: none; width: 183px; display: block; padding: 3px 3px 3px 20px; margin-bottom: 1px; }

.table_info { width:456px; border: 1px solid #666666; }

.table_info tr td { padding: 6px;  border: 1px solid #666666; }

.table_title th { background-color: #666666; font-weight: bold; font-size: 12px; }


#cats { }
#cats li { margin: 0 0 8px 0; padding:7px; list-style-type: none; width: 440px; display:block; background-color: #666666; float: left; background-image: url(../images/cat-bg.gif); background-repeat: no-repeat; }
#cats li a { text-decoration: none; font-size: 15px; color: #FFFFFF; padding: 0; margin: 0;  }
#cats li a:hover { text-decoration: none;  }
#cats li a em { font-weight: bold; color: #FFBBBB; }
#cats li img { display: block; padding-right: 10px; float: left; }

.main_product_title h2 { width: 454px; background-color: #666666; padding: 2px 2px 2px 5px; font-size: 10px;  }

.add { background-image: url(../images/add.gif); background-repeat: no-repeat; width: 41px; height: 16px; } 


/*.product_image { border: 1px solid #666666; padding: 5px; width: 444px; background-color: #FFFFFF; text-align: center;}*/
.product_image { border: 1px solid #666666; padding: 5px 5px 1px 5px; width: 444px; margin-bottom:5px;}
.product_image img {border: 1px solid #666666; padding:4px;}	
.product_count h3, .product_count p, .product_desc h3, .product_desc p { border: 1px solid #666666; border-right: 0; padding: 5px; font-size: 1.2em; font-weight: normal; margin-bottom: 5px; }
.product_desc a {color:#CC0000;}


/*-------------------------------------------    
    Quote
-------------------------------------------*/


#quote_header { padding-top: 25px; height: 0; overflow: hidden; background-image: url(../images/quotebuilder-title.gif); background-repeat: no-repeat; }
.item { border-bottom: 1px solid #999999; padding-top: 20px; padding-bottom: 20px; float: left;  }

.item_table { width: 690px; padding: 0; margin: 0; float: left; } 
.item_table tr { padding: 0; margin: 0; } 
.item_table td, th { padding: 3px; margin:0; text-align: left; font-weight: normal; } 
.item_title { font-weight: bold; font-size: 12px; border: 1px solid #999999; }
.item_delete a{ text-align: right; background-image: url(../images/delete.gif); background-repeat: no-repeat; padding-top: 22px; height: 0; width: 80px; overflow: hidden; display: block; }
.item_update a{ text-align: right; background-image: url(../images/update.gif); background-repeat: no-repeat; padding-top: 22px; height: 0; width: 80px; overflow: hidden; display: block; }

.item_field_title{ width: 350px; font-size: 12px; }
.address_title{ width: 200px; font-size: 12px; }
.item_illustration_table { padding: 0; margin: 0; } 
.item_illustration_table  tr { padding: 0; margin: 0; } 
.item_illustration_table  td { padding: 3px; margin:0; } 


.item_illustration_field{ border: 1px solid #333333; text-align: right; vertical-align: bottom; width:185px; height:153px;  }
.item_illustration_empty{ text-align: right; vertical-align: bottom; width:185px; height:153px;  }


.item_illustration_end{  background-color: #666666; border: 1px solid #333333; }
#userAddress{ padding-top:20px; padding-bottom:20px;}

/*-------------------------------------------    
    Gallery
-------------------------------------------*/
#gallery_text_left { width: 440px; float: left; display:block; margin-top: 30px; border-right: 1px solid #444444; padding-left: 5px; }
#gallery_header { padding: 3px; background-color: #4B4B4B; background-repeat: no-repeat; width: 414px; margin: 0; font-size: 12px; margin-bottom: 1px; }
#gallery_image { padding: 0; margin: 0; float: left; display: block; width: 420px; }

#gallery_menu { float: left; padding-left: 20px; margin-top: 30px; }
#gallery_menu  ul { padding: 0; margin: 0; list-style-type: none; font-size: 11px; }
#gallery_menu  ul li { }
#gallery_menu  ul li#title { padding: 3px 3px 3px 6px; width: 197px; background-color: #4B4B4B; display: block; color: #FFFFFF; font-size: 12px; margin-bottom: 1px; }
#gallery_menu  ul li a { padding: 3px 3px 3px 6px; width: 197px; display: block; color: #FFFFFF; text-decoration: none; margin-bottom: 1px; background-color: #666666; }
#gallery_menu  ul li a:hover { background-color: #FF0000; color: #FFFFFF; text-decoration: none; }

#gallery_small_nav { float: left; display: block; width: 420px; }
#gallery_small_nav #left a { background-color: #666666; padding: 3px; color: #FFFFFF; display: block; width: 203px; margin-right: 1px; margin-bottom: 1px; float: left; }
#gallery_small_nav #right a { background-color: #666666; padding: 3px; color: #FFFFFF; display: block; width: 204px; margin-bottom: 1px; float: left; }
#gallery_small_nav #left a:hover, #gallery_small_nav #right a:hover { background-color: #FF0000; text-decoration: none; color: #FFFFFF; } 

/*-------------------------------------------    
    Contact
-------------------------------------------*/
#contact_header { padding-top: 25px; height: 0; overflow: hidden; background-image: url(../images/contact-header.gif); background-repeat: no-repeat; }

#contact {}
#contact form fieldset { margin-bottom: 10px; border: 0; }
#contact form legend { padding: 0 2px; font-weight: bold; font-size: 12px; }
#contact form label { line-height: 1.8; vertical-align: top; }
#contact form fieldset ol { margin: 0; padding: 0; }
#contact form fieldset li { list-style: none; padding: 5px; margin: 0; }
#contact form em { font-weight: bold; font-style: normal; color: #E10000; }
#contact form label { width: 200px; float: left; padding-bottom: 5px; /* Width of labels */ }
#contact form fieldset fieldset label { margin-left: 123px; /* Width plus 3 (html space) */ }
#contact form input, textarea { border: 0; width: 300px; padding: 2px; }
#contact_form_brochure{ }
#contact_form_brochure ul{ list-style-type: none; }
#contact_form_brochure li{ padding-bottom:10px; padding-right: 15px; vertical-align:top; width:400px; background-color:Aqua;} 
#contact_form_brochure li img{ float:left; padding: 3px; border: 1px solid #666666; }
#contact_form_brochure li input, #contact_form_brochure li p { float:left; }
.contact_form_brochure_img{ padding: 3px; border: 1px solid #333333; height: 65px; width: 56px; }
.brochure_table { margin: 35px 0px 30px 0px;}
.brochure_table td { vertical-align:top; }

/*-------------------------------------------    
    Roof Edge Protection Pages
-------------------------------------------*/

#roof_edge_text_left { width: 445px; float: left; margin-top: 30px; padding-left: 5px; padding-right: 90px; }
#roof_edge_text_left img { background-color: #666666; padding: 5px; }

#roof_edge_text_left ol { width: 390px; float: left; padding-left: 20px; padding-bottom: 20px; }


#roof_edge_text_right { width: 135px; float: left; padding-left: 20px; margin-top: 30px; }
#roof_edge_text_right  ul { padding-left: 0; list-style-type: none; font-size: 11px; }
#roof_edge_text_right  li { padding-bottom: 5px; }
#roof_edge_text_right  li a { padding: 30px 0 32px 0; display: block; width: 130px; text-align: center; background-image:url(../images/roof-protection.gif); background-repeat: no-repeat; }

#roof_edge_text_right  li.parts a { padding: 15px 10px 10px 10px; display: block; width: 110px; text-align: center; background-image:url(../images/roof-protection-cat.gif); background-repeat: repeat-x; margin-top: 65px; color: #FFFFFF; background-color: #141414; border: 1px solid #666666; }


/*-------------------------------------------    
    Gallery
-------------------------------------------*/
#gallery_header { padding: 3px; background-color: #4B4B4B; background-repeat: no-repeat; width: 414px; margin: 0; font-size: 12px; margin-bottom: 1px; } 
#gallery_image { padding: 0; margin: 0; float: left; display: block; width: 420px; }

.gallery_menu { float: left; padding-bottom: 20px; } 
.gallery_menu  ul { padding: 0; margin: 0; list-style-type: none; font-size: 11px; } 
.gallery_menu  ul li { float: left; padding-right: 4px; padding-top: 4px; } 
.gallery_menu  ul li.title { padding: 3px 3px 3px 6px; width: 198px; background-color: #4B4B4B; display: block; color: #FFFFFF; font-size: 11px; font-weight: normal; margin-bottom: 10px; } 
.gallery_menu  ul li a { width: 30px; height: 30px; display: block; color: #FFFFFF; text-decoration: none; background-color: #000000; border: 1px solid #666666; padding: 3px; }

.gallery_menu  ul li a:hover {  border: 1px solid #FF6C6C; color: #FFFFFF; text-decoration: none; }

.gallery_menu  ul li img { border: 0; margin: 0; padding: 0; }

#gallery_small_nav { float: left; display: block; width: 420px; } 
#gallery_small_nav #left a { background-color: #666666; padding: 3px; color: #FFFFFF; display: block; width: 203px; margin-right: 1px; margin-bottom: 1px; float: left; } 
#gallery_small_nav #right a { background-color: #666666; padding: 3px; color: #FFFFFF; display: block; width: 204px; margin-bottom: 1px; float: left; } 
#gallery_small_nav #left a:hover, #gallery_small_nav #right a:hover { background-color: #FF0000; text-decoration: none; color: #FFFFFF; } 

.standard_list ul { list-style-type:circle; padding-left:30px; }
.standard_list ul li { font-size: 12px; }