/*-------------------------------------- - V1 120409 - Author : Paul Flynn - Visit : http://www.drawn-in.co.uk - Client : Yorkshire Farmers Meat Company ---------------------------------------- /*--------------------------------------- RESET: Meyer v1.0 | 20080212 ---------------------------------------*/ 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,b, u, i, center,dl, dt, dd, ol, ul, li, fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent;} body { line-height: 1;} ol, ul { list-style: none;} blockquote, q {quotes: none;} blockquote:before, blockquote:after, q:before, q:after {content: '';content: none;} :focus {outline: 0;} ins {text-decoration: none;} del {text-decoration: line-through;} table { border-collapse: collapse;border-spacing: 0;} /*--------------------------------------- MODIFIED : Blueprint ---------------------------------------*/ h1,h2,h3,h4,h5,h6 { font-weight: normal; } /* h1 { font-size: 1.35em; line-height: 1; margin-bottom: 0.5em; } h2 { font-size: 1.20em; margin-bottom: .50em; } h3 { font-size: 1.10em; line-height: 1; margin-bottom: .40em; } h4 { font-size: 1.5em; line-height: 1.25; margin-bottom: .25em; } h5 { font-size: 1em; font-weight: bold; } h6 { font-size: 1em; font-weight: bold; } */ p { margin-bottom : 1em; } ul, ol { margin : 0 0 10px 0; } ul { list-style-type : none; } ol { list-style-type : decimal; } dl { margin : 0 0 1.5em 0; } dt { font-weight : bold; } dd { margin-left : 1.5em;} strong { font-weight : bold; } /*--------------------------------------- DEEFOLT STYLES ---------------------------------------*/ body { font: 13px/1.4 "Lucida Grande",Helvetica,"Lucida Sans Unicode",Arial,Verdana,sans-serif; color : #fff; } /* =headers */ h1, h2, h3, h4, h5 { color : #8fa52d; font-family : "Palatino Linotype", Palatino, Georgia, Times, serif; } h1 { font-size : 2.4em; margin : 0 0 .5em 0 ; padding : 0 0 .25em 0; font-weight : bold; } h2 { font-size : 2em; margin : 0 0 .5em 0 ; padding : 0 0 0 0; letter-spacing : -1px; line-height : 26px; } h3, h4 { font-size : 1.5em; margin-bottom : 1.2em; line-height : 26px; } h2 + h3 { margin-bottom : .5em; } h5 { font-size: 1.3em; } /* =a */ a, a:visited { color :#1f1f1f; text-decoration : underline; } a:hover, a:active, a:focus { color :#dfdfdf; text-decoration : none;} /* =img */ img { margin : 0 0 1.5em 0;} .picdetails { font-family : Georgia, "Times New Roman", Times, serif; font-size : 12px; font-style : italic; color : #8fa52d; } /*--------------------------------------- DEEFOLT BODY ---------------------------------------*/ /* =header */ #header { width : 800px; height : 150px; margin : 0 auto; position : relative; } #header img { position : absolute; top : 10px; } #header h1 { position : absolute; right : 5px; bottom : 50px; font-size : 14px; color : #343434; } /* =navigation */ #header #primary-nav { width : 800px; padding : 130px 0 0; position : relative; } #header #primary-nav a { display : block; text-indent : -9999px; overflow : hidden; } #header #primary-nav li#nwelcome a { width :132px; height : 35px; position : absolute; top : 115px; left : 0px; background : url(../siteimages/nav/navigation.jpg) no-repeat 0 0; } #header #primary-nav li#nwelcome a:hover { width : 132px; height : 49px; top : 101px; background : url(../siteimages/nav/navigation.jpg) no-repeat 0 -35px; } #header #primary-nav li#nhistory a { width :132px; height : 35px; position : absolute; top : 115px; left : 133px; background : url(../siteimages/nav/navigation.jpg) no-repeat -133px 0; } #header #primary-nav li#nhistory a:hover { height : 49px; top : 101px; background : url(../siteimages/nav/navigation.jpg) no-repeat -133px -35px; } #header #primary-nav li#nproducts a { width :132px; height : 35px; position : absolute; top : 115px; left : 266px; background : url(../siteimages/nav/navigation.jpg) no-repeat -266px 0; } #header #primary-nav li#nproducts a:hover { height : 49px; top : 101px; background : url(../siteimages/nav/navigation.jpg) no-repeat -266px -35px; } #header #primary-nav li#nseasonal a { width :132px; height : 35px; position : absolute; top : 115px; left : 399px; background : url(../siteimages/nav/navigation.jpg) no-repeat -399px 0; } #header #primary-nav li#nseasonal a:hover { height : 49px; top : 101px; background : url(../siteimages/nav/navigation.jpg) no-repeat -399px -35px; } #header #primary-nav li#nquality a { width :132px; height : 35px; position : absolute; top : 115px; left : 532px; background : url(../siteimages/nav/navigation.jpg) no-repeat -532px 0; } #header #primary-nav li#nquality a:hover { height : 49px; top : 101px; background : url(../siteimages/nav/navigation.jpg) no-repeat -532px -35px; } #header #primary-nav li#ncontact a { width :132px; height : 35px; position : absolute; top : 115px; left : 665px; background : url(../siteimages/nav/navigation.jpg) no-repeat -665px 0; } #header #primary-nav li#ncontact a:hover { height : 49px; top : 101px; background : url(../siteimages/nav/navigation.jpg) no-repeat -665px -35px; } #welcome li.current a { height : 49px; top : 201px; } /* =primary */ #primarywrapper { width : 100%; background : #313848; } #primarycontent { width : 800px; margin : 0 auto; padding : 60px 0; position : relative; background : url(../siteimages/body/primary_grad.jpg) no-repeat 0 100px; } /* =secondary */ #secondary-wrapper { width : 100%; background : #313848; } #secondary-content { width : 800px; margin : 0 auto; padding : 0 0 55px 0; position : relative; } #secondary-content h3 { width : 100%; height : 19px; padding : 12px 0; background : url(../siteimages/body/header_grad.jpg) repeat-x; } /* =footer */ #footer { padding-bottom:1em; background : url(../siteimages/body/footer.jpg) repeat-x scroll #000; } #footer-content { width : 800px; margin : 0 auto; padding : 0 0 50px 0; position : relative; } #footer-content { font-size : 12px; } #footer-content p { padding : 65px 0 0 0; margin : 0 0 20px 0; } #footer-content ul { display : inline; margin : 0 0 100px 0; } #footer-content ul li { display : inline; } #footer-content a { color : #6c6c6c; text-decoration : none; } #footer-content a:hover { color : #fff; text-decoration : underline; } #footer-content #siteinfo { position : absolute; top : 100px; right : 5px; } /*--------------------------------------- PAGES CONTENT ---------------------------------------*/ /* =index */ #welcome #primarycontent #introduction { width : 255px; float : left; display : inline; margin : 15px 0 0 0; } #welcome #secondary-content #history, #secondary-content #products, #secondary-content #seasonal { float : left; display : inline; height : 261px; width : 180px; text-indent : -9999px; } #welcome #secondary-content #history a, #secondary-content #products a, #secondary-content #seasonal a { display : block; } #welcome #secondary-content #history { margin : 20px; background : url(../siteimages/welcome/boards_history.jpg) no-repeat; } #welcome #secondary-content #products { margin : 15px 60px; background : url(../siteimages/welcome/boards_products.jpg) no-repeat; } #welcome #secondary-content #seasonal { margin : 20px; background : url(../siteimages/welcome/boards_seasonal.jpg) no-repeat; } /* =history */ #history #primarycontent { width : 800px; margin : 0 auto; padding : 60px 0 0 0; position : relative; background : url(../siteimages/body/primary_grad.jpg) no-repeat 0 120px; } #history #primarycontent img { margin : 0 56px; width : 678px; } #history #primarycontent p { margin : 0 0 20px 65px; } #history #secondary-content p { width :390px; } #history #secondary-content a { color : #000; } #history #oldshop-front { position : absolute; right : 5px; top : 70px; } #history #oldshop-front-info { position : absolute; left : 450px; top : 280px; } #history #currentshop-front { position : absolute; right : 5px; top : 330px; } #history #currentshop-front-info { position : absolute; left : 450px; top : 540px; } /* =products */ #products #primarycontent p { width : 400px; margin : 0 0 25px 0; } #products #primarycontent img { position : absolute; right : 0px; top : 60px; } #products #secondary-content .productfeature { width : 770px; background : #697188; padding : 15px; margin-bottom : 15px; float : left; display : inline; } #products #secondary-content .productfeature img { float : left; margin : 0 15px 0 0; } #products #secondary-content .productfeature h4 { font-size : 20px; margin-bottom : 10px; } #products #secondary-content .productfeature ul li { display : block; margin : 0 5px 5px 0; float : left; } #products #secondary-content h3 { padding : 12px 0; clear : both; } #products #secondary-content .othersfeature { width : 360px; height : 290px; background : #697188; padding : 15px; margin : 0 0 15px 0; display : inline; } #products #secondary-content .othersfeature img { float : left; margin : 0 15px 0 0; } #products #secondary-content .othersfeature ul li { display : block; margin : 0 5px 5px 0; float : left; } #products #secondary-content .othersfeature a { font-size : 10px; } #products #secondary-content h5 { padding : 60px 0 0 0; } #products #secondary-content p { margin : 10px 0; } /* =quality */ #quality #primarycontent { padding : 60px 0 70px 0; background : url(../siteimages/body/primary_grad.jpg) no-repeat 0 170px; } #quality #primarycontent p { width : 400px; margin : 0 0 15px 0; } #quality #primarycontent img { position : absolute; right : 0px; top : 60px; } /* =contact */ #contact #secondary-content img { margin : 50px 0 0; padding : 0 45px 0 0; } #contact #contact-form { position : absolute; right : 10px; top : 35px; width : 500px; } label, label span { display : block; padding-bottom : .25em;} label { float : left; width : 80%; display : inline;} label span { width : 80%; text-align: left; padding : 5px;} fieldset input, textarea { float:left; padding : 5px; border-style:none none solid; border-width:medium medium 3px;} fieldset input:hover { border-color:#d4eafd ;} fieldset input:active, input:focus { border-color : #2d373e;} fieldset { padding : 10px; overflow : hidden;} form div { text-align : center; padding-top : 10px;} #message-input { position : absolute; top : 0; right : 0; } /* ----------------------------------------------- SEASONAl ----------------------------------------------- */ /* =primary */ .spring #primarywrapper { background : #548706; } .spring #primarycontent { padding : 60px 0 120px 0; background : url(../siteimages/body/primary_grad_spring.jpg) no-repeat 0 185px; } /* =secondary */ .spring #secondary-wrapper { background : #548706; } .spring #secondary-content h3 { margin : 0 0 50px 0; background : url(../siteimages/body/header_grad_spring.jpg) repeat-x; } .spring #footer { background : url(../siteimages/body/footer_spring.jpg) repeat-x scroll #000; } #seasonal h2, #seasonal h3, #seasonal h4 { color : #f1c43d; } #seasonal p { width :400px; } #seasonal #primarycontent img { position : absolute; right : 0px; top : 60px; } #seasonal #secondary-content img { position : absolute; right : 0px; top : 85px; } #seasonal #sping { position : absolute; right : 0px; top : 145px; } #seasonal h4 { line-height : 12px; margin : 10px 0; } #seasonal #secondary-content p { width :550px; } #seasonal #secondary-content ul { list-style-type : circle; } #seasonal #secondary-content li { padding : 0 0 0 10px; margin : 0 0 0 15px;} /*----------------------------------------------- CLASSES ----------------------------------------------- */ img, div, a, input { behavior: url(siteimages//body/iepngfix.htc) } .clear { clear: both; height: 0; line-height: 0; width: 0; } .clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; } .clearfix { display: inline-block; } /* Hide from IE Mac \*/ .clearfix { display:block; } /* End hide from IE Mac */ .nowrap { white-space: nowrap; } .hidden { display: none; } .left { float: left; } .right { float: right; } .cursor { cursor: pointer; } .upper { text-transform: uppercase; } .bold { font-weight: bold; } /* ----------------------------------------------- SLIDESHOW ----------------------------------------------- */ #slider { float : left; display : inline; background : #fff; border : 2px solid #fff; width: 486px; height: 249px; margin : 45px 0 0 35px; position: relative; overflow: hidden; } #sliderContent { width: 486px; position: absolute; top: 0; margin-left: 0; } .sliderImage { float: left; position: relative; display: none; } .sliderImage span { position: absolute; font: 10px; padding: 10px 13px 30px 13px; width: 486px; background-color: #000;filter: alpha(opacity=70); -moz-opacity: 0.7; -khtml-opacity: 0.7; opacity: 0.7; color: #fff; display: none; } .sliderImage span strong { font-size: 10px; } .bottom { bottom: 0; left: 0; } a { border : none; }