/* ----------------------------------------------------- Robert Horne TPS (Total Print Supplies) author: mN -> hello@madebymn.co.uk version: 2009.01 ----------------------------------------------------- CONTENTS: 1. GLOBAL 2. TYPOGRAPHY 3. GENERAL LAYOUT 4. HEADER 4.1. NAVIGATION 5. CONTENT 5.1. REUSABLE ELEMENTS 5.2. HOME 6. FOOTER NOTES: ----------------------------------------------------- */ /* ==================================== =1. GLOBAL ==================================== */ html {font-family: Arial, Verdana, sans-serif;} body { margin: 0 auto; font-size:62.5%; background: #000 url(../images/global/background.gif) no-repeat center top; } a{ outline:none; -moz-outline:none; } p{ padding:0; margin: 0 0 1.2em 0;line-height:1.4em; font-size:1.2em; color:#666666;} /* ==================================== =2. TYPOGRAPHY Global styles only Ñ specifics can be specified elsewhere in the code ==================================== */ strong {font-weight: bold;} em {font-style: italic;} em strong, strong em {font-weight: bold; font-style: italic;} .upper {text-transform: uppercase;} h1,h2,h3,h4,h5 {} h2{ color:#00aeef;font-size:1.8em;line-height:1.8em; } h3{ color:#ec008c;font-size:1.4em;line-height:1.6em; } /* ==================================== =3. GENERAL LAYOUT ==================================== */ #contain{ width:860px; margin:25px auto; } #header{ width:860px; height:100px; background: url( ../images/global/white_curved.png ) no-repeat center top; position:relative;} #main_content{ width:860px; background: #FFF; } #footer{ width:810px;padding: 15px 25px; height:26px; background: url( ../images/global/white_curved.png ) no-repeat center bottom; } #banner #footer{ padding-bottom:0px; height:auto; } /* ==================================== =4. HEADER ==================================== */ #logo{ width:104px; height:75px; overflow:hidden; position:absolute; top:15px; left:20px; } /* ==================================== =4.1 HEADER > NAVIGATION NOTES: Navigation matrix made up of a grid. Each element is 23px high and variable width; Three states to height with normal up state being -46px neg margin, over state -23px and down/selected state 0px. Home: 60px wide / 0px neg margin Products: 108px wide / -78px neg margin Ordering: 120px wide / -202px neg margin MSDS: 108px wide / -356px neg margin Contact Us: 96px wide / -480px neg margin About Us: 93px wide / -598px neg margin ==================================== */ ul#nav{ height:23px; width:675px;padding:35px 0 0 150px; } ul#nav li{ position:relative;float:left;padding:0 15px 0 0;height:30px; } ul#nav li a{ display:block; height:23px; float:left; background-image: url(../images/global/navigation.gif);text-indent: -9999px;} /* UP STATE BUTTON */ li.nHome a{ width:60px; background-position: 0px -46px; } li.nProd a{ width:108px; background-position: -78px -46px; } li.nOnline a{ width:120px; background-position: -202px -46px; } li.nMSDS a{ width:108px; background-position: -356px -46px; } li.nContact a{ width:96px; background-position: -480px -46px; } li.nAbout a{ width:93px; background-position: -598px -46px; } /* HOVER STATE BUTTON */ li.nHome a:hover{ background-position: 0px -23px; } li.nProd a:hover{ background-position: -78px -23px; } li.nOnline a:hover{ background-position: -202px -23px; } li.nMSDS a:hover{ background-position: -356px -23px; } li.nContact a:hover{ background-position: -480px -23px; } li.nAbout a:hover{ background-position: -598px -23px; } /* DOWN/SELECTED STATE BUTTON */ li.nHome a:active, body.home li.nHome a{ background-position: 0px 0px; } li.nProd a:active, body.products li.nProd a{ background-position: -78px 0px; } li.nOnline a:active, body.ordering li.nOnline a{ background-position: -202px 0px; } li.nMSDS a:active, body.MSDS li.nMSDS a{ background-position: -356px 0px; } li.nContact a:active, body.contact li.nContact a{ background-position: -480px 0px; } li.nAbout a:active, body.about li.nAbout a{ background-position: -598px 0px; } /* SUBMENU */ ul#nav li.nProd div.sublist{ display:none; position:absolute; left:-15px; top:25px;padding:10px 0; width:200px;z-index:10; } ul#nav li.nProd div.sublist div.sub_h{ position:absolute; top: 0; left:0;width:200px; height:10px; background: url(../images/global/dropdown.gif) left top; } ul#nav li.nProd div.sublist div.sub_f{ position:absolute; bottom: 0; left:0;width:200px; height:10px; background: url(../images/global/dropdown.gif) left bottom; } ul#nav li.nProd div.sublist ul{ width:200px; background: #f3f3f3;} ul#nav li.nProd div.sublist ul li{ float:none;padding:0; height:auto;} ul#nav li.nProd div.sublist ul li:first-child a{border-top:1px solid #FFF;} ul#nav li.nProd div.sublist ul li a{ font-size:1.2em;width:180px; background: #F3F3F3;text-indent:0px;float:none; padding: 0.5em 0 0.5em 20px;line-height:2em;height:2em; color:#000;text-decoration:none;border-top:1px solid #F3F3F3;border-bottom:1px solid #FFFFFF; } ul#nav li.nProd div.sublist ul li a:hover{background:#e8e8e8 url(../images/global/subnav_dot.gif) no-repeat 10px 50%;border-bottom:1px solid #CCC;border-top:1px solid #CCC; } /* ==================================== =5. CONTENT ==================================== */ div.page_contain{ width:810px; padding: 20px;margin :0 5px; border-top: 1px solid #EFEFEF; } div.left_col{ width:390px; float:left; padding: 0 20px 0 0; } div.right_col{ width:390px; float:right; padding: 0; } .clear{ height:1px; line-height:1px; clear:both;display:block; } p.intro{ font-size:1.5em; } ul.tech_sheets{ margin: 0.5em 0;padding-left:5px;} ul.tech_sheets li, p.pdf{ color:#666666;font-size:1.2em;margin:0 0 3px;padding:15px 0px 15px 45px; background: url(../images/global/icon_pdf_sml.gif) no-repeat; } div#paper_buttons{ width:810px; height:178px; margin:0; padding:0; } #paper_buttons ul{ display:block; width:810px; height:178px; } #paper_buttons ul li{ position:relative;display:block; float:left; height:178px;width:172px; padding-right:40px; } #paper_buttons ul li.last{ padding-right:0px; } #paper_buttons ul li a{ font-size:1.1em;display:block; float:left;height:178px;width:100%; text-indent:-9999px; } #paper_buttons ul li#bu_sundries{ width:174px; } #paper_buttons ul li#bu_sundries a{ background: url(../images/buttons/sundries.gif) no-repeat; } #paper_buttons ul li#bu_prepress{ width:174px; } #paper_buttons ul li#bu_prepress a{ background: url(../images/buttons/pre_press.gif) no-repeat; } #paper_buttons ul li#bu_blanket a{ background: url(../images/buttons/blankets_packing.gif) no-repeat; } #paper_buttons ul li#bu_inks a{ background: url(../images/buttons/inks_coatings.gif) no-repeat; } #paper_buttons ul li#bu_press_chem a{ background: url(../images/buttons/press_chemicals.gif) no-repeat; } #paper_buttons ul li div.over ul{ height:148px;display:block; padding:0; width:142px;padding:15px; z-index:5; } #paper_buttons ul li div.over ul li{ font-size:1.1em;float:none; height:auto; padding:0;border-bottom:1px solid;width:142px; } #paper_buttons ul li div.over ul li.last{ border:none; } #paper_buttons ul li div.over ul li a{ background:none; text-indent:0px; height:auto; float:none; width:132px;padding:2px 5px; color:#FFF;text-align:center;text-decoration:none;} #paper_buttons ul li div.over{display:none;position:absolute; top:-15px; left:0px; padding-bottom:15px; } #paper_buttons ul li div.over div.footer{ height:15px; width:172px; position:absolute; bottom:0px; left:0px;} #paper_buttons ul li#bu_sundries div.over ul li a, #paper_buttons ul li#bu_prepress div.over ul li a, #paper_buttons ul li#bu_blanket div.over ul li a, #paper_buttons ul li#bu_inks div.over ul li a, #paper_buttons ul li#bu_press_chem div.over ul li a{ background:none; } /*#paper_buttons ul li#bu_sundries div.over ul{ width:144px;background: url(../images/buttons/sundries_over.gif) 50% top; } #paper_buttons ul li#bu_sundries div.over div.footer{ width:174px;background: url(../images/buttons/sundries_over.gif) 50% bottom; } #paper_buttons ul li#bu_sundries div.over ul li{border-color: #818181;} /*#paper_buttons ul li#bu_sundries div.over ul li a:hover{ background:#818181; }*/ #paper_buttons ul li#bu_prepress div.over ul{ height:92px; width:144px;padding-top:72px;background: url(../images/buttons/black_over.gif) 50% top; } #paper_buttons ul li#bu_prepress div.over div.footer{ width:174px;background: url(../images/buttons/black_over.gif) 50% bottom; } #paper_buttons ul li#bu_prepress div.over ul li{border-color: #818181;} #paper_buttons ul li#bu_blanket div.over ul{ height:157px;background: url(../images/buttons/yellow_over.gif) 50% top; } #paper_buttons ul li#bu_blanket div.over div.footer{ background: url(../images/buttons/yellow_over.gif) 50% bottom; } #paper_buttons ul li#bu_blanket div.over ul li a{ color:#333; } #paper_buttons ul li#bu_blanket div.over ul li{border-color: #cfc84f;} /*#paper_buttons ul li#bu_blanket div.over ul li a:hover{ background:#80d7f7; }*/ #paper_buttons ul li#bu_inks div.over ul{ background: url(../images/buttons/pink_over.gif) 50% top; } #paper_buttons ul li#bu_inks div.over div.footer{ background: url(../images/buttons/pink_over.gif) 50% bottom; } #paper_buttons ul li#bu_inks div.over ul li{border-color: #f680c6;} /*#paper_buttons ul li#bu_inks div.over ul li a:hover{ background:#f680c6; }*/ #paper_buttons ul li#bu_press_chem div.over ul{ height:128px;padding-top:35px; background: url(../images/buttons/blue_over.gif) 50% top; } #paper_buttons ul li#bu_press_chem div.over div.footer{ background: url(../images/buttons/blue_over.gif) 50% bottom; } #paper_buttons ul li#bu_press_chem div.over ul li{border-color: #80d7f7;} /*#paper_buttons ul li#bu_press_chem div.over ul li a:hover{ background:#cfc84f; }*/ #accordion { padding-bottom:2px; } #accordion h2 a { background:url(/assets/images/msds/accordion_arrow.gif) no-repeat right 50%; padding-right: 30px; color:#00AEEF; text-decoration:none; } #accordion h2 a.open { background:url(/assets/images/msds/accordion_arrow_down.gif) no-repeat right 50%; } .acc_slider { clear:both; display:none; } ul.standard_list{ margin: 0 0 2em 0; padding-left:15px;} ul.standard_list li{ padding:0; margin: 0;line-height:1.4em; font-size:1.2em; color:#666666; list-style: disc outside url(../images/global/pink_bullet.gif);} ul.float_list{ width:170px; float:left; margin-right: 10px; } a.pink, p.pink, p.pink a{ color:#ec008c; } img.sidebar_image{ float:right; } p span.contact-error{ color:red; } /* ==================================== =5.1 CONTENT > HOMEPAGE ==================================== */ h1#welcome{ height:34px;padding:0; margin: 0 0 0 25px; text-indent:-9999px; background: url(../images/titles/welcome.gif) no-repeat; } /* ==================================== =5.2 CONTENT > ABOUT ==================================== */ h1#about{ height:25px;padding:0; margin: 0 0 1em; text-indent:-9999px; background: url(../images/titles/about_tps.gif) no-repeat; } h2#what_tps_means{ height:20px;padding:0; margin: 0 0 0.5em; text-indent:-9999px; background: url(../images/titles/what_tps_means.gif) no-repeat; } /* ==================================== =5.3 CONTENT > PRODUCTS ==================================== */ h1#products{ height:30px;padding:0; margin: 0 0 1em; text-indent:-9999px; background: url(../images/products/title_products.gif) no-repeat; } h1#blankets_packing{ height:30px;padding:0; margin: 0 0 1em; text-indent:-9999px; background: url(../images/products/title_blankets.gif) no-repeat; } h1#pre_press{ height:30px;padding:0; margin: 0 0 1em; text-indent:-9999px; background: url(../images/products/title_pre_press.gif) no-repeat; } h2#our_range{ height:19px;line-height:19px;padding:0; margin: 0 0 0.2em; text-indent:-9999px; background: url(../images/products/title_our_range.gif) no-repeat; } h1#press_chemicals{ height:30px;padding:0; margin: 0 0 1em; text-indent:-9999px; background: url(../images/products/title_press_chemicals.gif) no-repeat; } h2#our_products_services{ height:19px;padding:0; margin: 0 0 0.2em; text-indent:-9999px; background: url(../images/products/title_products_services.gif) no-repeat; } h1#inks_varnishes{ height:30px;padding:0; margin: 0 0 1em; text-indent:-9999px; background: url(../images/products/title_inks_coatings.gif) no-repeat; } h2#inks{ height:19px;padding:0; margin: 0 0 0.2em; text-indent:-9999px; background: url(../images/products/title_inks.gif) no-repeat; } h2#oil_based{ height:19px;padding:0; margin: 0 0 0.2em; text-indent:-9999px; background: url(../images/products/title_oil_based.gif) no-repeat; } h2#coatings{ height:19px;padding:0; margin: 0 0 0.2em; text-indent:-9999px; background: url(../images/products/title_coatings.gif) no-repeat; } h1#sundries{ height:30px;padding:0; margin: 0 0 1em; text-indent:-9999px; background: url(../images/products/title_sundries.gif) no-repeat; } h2#products_include{ height:19px;padding:0; margin: 0 0 0.2em; text-indent:-9999px; background: url(../images/products/title_products_include.gif) no-repeat; } /* ==================================== =5.4 CONTENT > CONTACT US ==================================== */ h1#contact_us{ height:25px;padding:0; margin: 0 0 1em; text-indent:-9999px; background: url(../images/titles/contact_us.gif) no-repeat; } .contact_box{ width:394px;min-height:330px; height:auto !important; height:330px; padding-bottom:12px; background: url(../images/global/contact_form_repeat.jpg) repeat-y; z-index:1; } .contact_box_inner{ padding:15px 15px 0px; width:364px; min-height:312px; height:auto !important; height:312px; background: url(../images/global/contact_form_top.jpg) no-repeat; } .contact_box_footer{position:absolute; bottom:0; left:0; width:394px; height:12px; background: url(../images/global/contact_form_foot.jpg) no-repeat; display:none; } .form_left{ width:170px; float:left; } .form_right{ width:170px; float:right; } .contact_box_inner label{ color:#ec008c; } input.text, textarea.text{ border: 1px solid #CCC; margin: 5px 0;padding:3px;width:164px;font-family: Arial, Verdana, sans-serif; font-size:1.0em;line-height:1.1em; } textarea.text{ width:358px; height:80px; } /* ==================================== =5.5 CONTENT > ONLINE ORDERING ==================================== */ h1#online_ordering{ height:32px;padding:0; margin: 0 0 1em; text-indent:-9999px; background: url(../images/titles/how_to_order.gif) no-repeat; } div#catalogue{ padding-right: 96px; background: url(../images/global/tps_brochure.jpg) no-repeat right top;min-height:90px; height:auto !important; height:90px;margin-bottom:20px; } div#catalogue strong{ font-style: oblique; } .right_spacer{ min-height:110px; height:auto !important; height:110px;padding:40px 15px 0px; } img.order_contact_logo{ margin-bottom: 1.5em; } img.fl_left{ float:left; } p.fl_right{ float:right; width:240px; padding-top:15px; } div.order_contact_intro{ min-height:150px; height:auto !important; height:150px; } div.hspg_bottom{padding:15px 0; } /* ==================================== =5.6 CONTENT > MSDS ==================================== */ h1#msds{ height:32px;padding:0; margin: 0 0 1em; text-indent:-9999px; background: url(../images/titles/msds.gif) no-repeat; } /* ==================================== =5.7 CONTENT > PRIVACY POLICY / TERMS / SITEMAP ==================================== */ h1#privacy_policy{ height:32px;padding:0; margin: 0 0 1em; text-indent:-9999px; background: url(../images/titles/privacy_policy.gif) no-repeat; } h1#website_terms{ height:32px;padding:0; margin: 0 0 1em; text-indent:-9999px; background: url(../images/titles/website_terms.gif) no-repeat; } h1#site_map{ height:32px;padding:0; margin: 0 0 1em; text-indent:-9999px; background: url(../images/titles/sitemap.gif) no-repeat; } ul.site_map_list{ margin: 0 0 2em 0; padding-left:15px; } ul.site_map_list li{ padding:0; margin: 0;line-height:1.8em; font-size:1.6em; color:#939393; list-style: disc outside url(../images/global/pink_bullet.gif); font-weight:bold;} ul.site_map_list li a{ color:#ec008c; text-decoration:none;} ul.site_map_list li a:hover{ text-decoration:underline; } ul.site_map_list li ul.site_map_sublist{ padding-left:15px; } ul.site_map_list li ul.site_map_sublist li{ font-weight:normal; font-size:0.8em; } /* ==================================== =6. FOOTER ==================================== */ ul#footer_links{ float:right; } ul#footer_links li{ line-height:26px;color:#939393;font-size:1.2em;display:inline;padding:0 0.8em 0 0; } ul#footer_links li.last{ padding-right:0px; } ul#footer_links li a { color:#939393; text-decoration:none; } ul#footer_links li a:hover{ text-decoration:underline; } #paperlinx{ width:192px; height:26px; float:left; display:block;text-indent:-9999px; background:url(../images/global/paperlinx_logo.gif) no-repeat; } #banner p { float:left; } #banner ul#footer_links{ width:300px; text-align:right; } #banner #paperlinx{ float:right; margin-bottom:17px; }