/* Author: Leanne Dragonfly Creative www.dragonflycreative.net Date: 22/10/2009 Version 1.0 */ /* reset the CSS */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; } :focus { outline: 0; } ol, ul { list-style: none; } table { border-collapse: separate; border-spacing: 0; } caption, th, td { text-align: left; font-weight: normal; } blockquote, q { quotes: "" ""; } blockquote:before, blockquote:after, q:before, q:after { content: ""; } li a { text-decoration: none; } /* Standard Tags */ body { background: #262626; font-family: Arial, Helvetica, sans-serif; } p, ul, li, a { font-size: small; } p { margin-bottom: 14px; } h1 { font-size: xx-large; color: #262626; } h2 { font-size: large; } h3 { font-size: medium; } /* Layouts */ #wrapper { width: 956px; margin-left: auto; margin-right: auto; border-top: 7px solid #f3bc57; } #inner-wrapper { background: #383838; position: relative; } #navigation { background: #383838; width: 211px; float: left; } #content { width: 745px; float: right; } #footer { border-top: 7px solid #f3bc57; clear: both; background: #383838; padding-bottom: 10px;} #mainimage { height: 469px; } .clear { clear: both; } #exports #mainimage { height: 409px; } #narrative p, #narrative h2, #narrative h3, #narrative ul { margin-left: 30px; margin-right: 30px; color: #383838; } #narrative a, label { color: #262626; } /* Navigation Column */ #navigation { } #main-navigation { list-style-type: disc; color: #FFFFFF; margin-left: 33px;} #main-navigation li { margin-top: 15px;} #main-navigation li a { font-size: large; color: #FFFFFF; text-decoration: none; } #main-navigation li ul.subnavigation { list-style-type: disc; } #main-navigation li ul.subnavigation li { margin-top: 0; color: #f3bc57;} #main-navigation li ul.subnavigation li a { color: #f3bc57; font-size: small; font-weight: bold;} #logo { background: url(../images/logo.gif); width: 211px; height: 132px; text-indent: -9999px; } /* Address Area */ #address { position: absolute; bottom: 0px; width: 159px; margin-bottom: 14px; color: #727272; font-weight: bold; padding: 0px 26px 0px 26px;} #phonenumber { color:#9f9e9e; } #qualitybadges { background:url(../images/qualitybadges.gif); width: 157px; height: 98px; text-indent: -9999px; } #UKAS { display: none; } #certnum { font-size: x-small; } #address a { color: #FFFFFF; } #content h1 { padding: 10px 30px 10px 30px; background: #f3bc57; margin-bottom: 25px; } #proddetail #content h1 { margin-bottom: 0px; } /* 2 column Layout - Home*/ .layout2column #content { background:url(../images/content-2column-bg.gif) repeat; } .layout2column #column1 { background: #ffe2ab; width: 241px; float: right; } .layout2column #narrative { width: 504px; float: left; } /* 1 Column Layout - Quality*/ .layout1column #content { background:#fff1d6;} /* 2 column Layout with list and images - News, Products Overview*/ .layout2columnlist #content { background:url(../images/whiteleft-yellow-bg.gif) repeat;} #wrapper .layout2columnlist #narrative { width: 745px; float: left; } /* 1 column layout with large images - News Details, Product Details*/ .layout2columnwithimage #content { background:url(../images/detailpage-bg.gif) repeat;} #wrapper .layout2columnwithimage #narrative { width: 422px; float: left; } .detail-imgwrapper { width: 303px; text-align: center; float: left;} #detail-text { float: right; width: 442px; } #detail-text h2 { margin-bottom: 14px; font-size: x-large; } #bottombuttons { clear: both; background:#ffe2ab; padding: 14px 23px; margin-top: 10px; height: 27px; display: block;} #bottombuttons a.back { background:url(../images/backbutton.gif); width: 79px; height: 27px; text-indent: -9999px; display: block; } a.backfloated { background:url(../images/backbutton.gif); width: 79px; height: 27px; text-indent: -9999px; display: block; float: left; } #bottombuttons a.backtoprods-button { background:url(../images/backtoprod-button.gif) no-repeat; width: 206px; height: 27px; text-indent: -9999px; display: block; } a.previous { background:url(../images/readpreviousnews.jpg); width: 140px; height: 27px; text-indent: -9999px; display: block; float: right; } /* Column 1 - Home: News */ #column1 h2 { padding: 18px 16px 18px 16px; background: #383838; font-size: large; color: #f3bc57; } #column1 h3 { background:#f3bc57; color: #383838; padding: 10px 12px 10px 12px; border-top: 1px #FFFFFF solid; border-bottom: 1px #FFFFFF solid; margin-bottom: 10px; } #column1 p { padding: 0px 18px; } #column1 ul { list-style-type:disc; margin-left: 25px; margin-top: 18px; margin-bottom: 18px; } #column1 ul li, #narrative ul li { margin-bottom: 10px; } .readon a { background:url(../images/readon.jpg) no-repeat; width: 71px; height: 27px; text-indent: -9999px; display: block; margin: 0px 18px 18px 0px;} .readonhome { background:url(../images/readon.gif) no-repeat; width: 71px; height: 27px; text-indent: -9999px; display: block; margin: 0px 18px 18px 18px;} /* Narrative */ .speechbubble { background:url(../images/speech-bottombg.gif) bottom no-repeat; width: 439px; margin-left: auto; margin-right: auto; padding-bottom: 45px; margin-bottom: 14px; } #narrative .speechbubble h2 { background:url(../images/speech-titlebg.gif) no-repeat; margin: 0px; padding: 13px 0px 0px 13px; color: #383838;} #narrative .speechbubble p { background:url(../images/speech-bg.gif) repeat; padding: 13px; margin: 0px; color: #383838;} #narrative ul { list-style-type:disc; margin: 18px 65px; } #footer ul { margin-left: 26px; margin-top: 10px; margin-bottom: 0px; } #footer ul li { display: inline; margin-right: 6px; } #footer ul li a { color: #a6a5a5;} #products-list li a { font-weight: bold; } #copyright { background:#262626; padding: 14px; color:#f3bc57; font-weight: bold; text-align: right;} #copyright a:link { color: #f3bc57; font-size: 11pt; } #copyright a:hover { color: #f3bc57; font-size: 11pt; } #copyright a:visited { color: #f3bc57; font-size: 11pt; } /* Product List */ .list2column { margin-left: 18px; margin-bottom: 18px; padding-bottom: 18px; clear: both; border-bottom: 7px solid #f3bc57; margin-right: 18px; } #content .list2column p { float: right; clear: right; width: 485px; padding: 0px; margin-left: 0px; margin-right:0px; } .list2column-thumbnail { border: 1px solid #464646; float: left; margin-right: 30px; } .yellowbutton { background:url(../images/yellowbutton-start.gif) no-repeat; height: 27px; } .yellowbutton a { font-weight: bold; background:url(../images/yellowbutton-bg.gif) no-repeat right; margin-left: 16px; line-height: 27px; padding: 10px; padding-right: 10px; font-size: .85em; } .list-leftfloated { float: left; } .list-leftfloated li.yellowtitle strong { color: #fbd183; } .linkslist li a { text-decoration: underline; } /* narrative Grey */ #narrative-grey { background:#545454; padding-top: 25px; border-bottom: 7px solid #f3bc57; margin-bottom: 25px; padding-bottom :25px;} #narrative-grey h1, #narrative-grey h2, #narrative-grey h3 {color: #f3bc57; } #narrative-grey p, #narrative-grey ul li { color: #FFFFFF; } #narrative-grey ul { margin: 0px; list-style-type: none; } #content #narrative-grey ul li { margin-left: 30px; margin-bottom: 0px; padding: 0px; } #narrative-grey a { colour: #FFFFFF; } #narrative-grey a.whitelink:link { color: #FFFFFF; } #narrative-grey a.whitelink:hover { color: #FFFFFF; } #narrative-grey a.whitelink:visited { color: #FFFFFF; } #narrative-grey a.yellowlink:link { color: #fbd183; font-size: 11pt; } #narrative-grey a.yellowlink:hover { color: #fbd183; font-size: 11pt; } #narrative-grey a.yellowlink:visited { color: #fbd183; font-size: 11pt; } /* Contact Form */ #frmContact { padding: 0px 30px; } label { font-size: medium; font-weight: bold; display: block; margin-top: 10px; } .frmButton { width: 71px; height: 27px; margin-top: 20px; background:url(../images/submitbutton.gif); border: 0px; display: block; margin-left: auto; margin-right: auto;} input, textarea, select { width: 300px; border: 1px solid #262626; background:#ffe2ab; font-family: Arial, Helvetica, sans-serif; font-size: small; } textarea { width: 100%; } /* Export Overview */ .clientlogos { margin-left:18px; background:url(../images/logos/clientlogos.jpg) no-repeat; height: 93px; width: 674px; display: block; text-indent: -9999px; } /* Big Text */ .bigtext { color: #FFFFFFF; font-size: 11pt; font-weight: bold; } .biglink:link { color: #fbd183; font-size: 11pt; } .biglink:hover { color: #fbd183; font-size: 11pt; } .biglink:visited { color: #fbd183; font-size: 11pt; } /* More Info Buttons */ .moreinfo-pipe a { display: block; background: url(../images/moreinfo-pipe.jpg); width: 211px; height: 27px; text-indent: -9999px; } .moreinfo-flanges a { display: block; background: url(../images/moreinfo-flanges.jpg); width: 253px; height: 27px; text-indent: -9999px; } .moreinfo-buttweld a { display: block; background: url(../images/moreinfo-buttweld.jpg); width: 309px; height: 27px; text-indent: -9999px; } .moreinfo-screwed a { display: block; background: url(../images/moreinfo-screwed.jpg); width: 309px; height: 27px; text-indent: -9999px; } .moreinfo-socket a { display: block; background: url(../images/moreinfo-socket.jpg); width: 333px; height: 27px; text-indent: -9999px; } .moreinfo-valves a { display: block; background: url(../images/moreinfo-valves.jpg); width: 245px; height: 27px; text-indent: -9999px; } .moreinfo-fasteners a { display: block; background: url(../images/moreinfo-fasteners.jpg); width: 347px; height: 27px; text-indent: -9999px; } .moreinfo-gaskets a { display: block; background: url(../images/moreinfo-gasket.jpg); width: 375px; height: 27px; text-indent: -9999px; } .moreinfo-bespoke a { display: block; background: url(../images/moreinfo-bespoke.jpg); width: 433px; height: 27px; text-indent: -9999px; } /* Debug div#wrapper { background:#009966; } div#content { background:#339933; } div#column1 { background:#CC9900; } div#navigation { background:#CC6600; } */