/*-------------------------------------------------- created: 26-03-2010 author: Gareth James ~ GlobalGraphics Associates Ltd. email: webmaster@globalgraphics.co.uk website: http://www.globalgraphics.co.uk/ --------------------------------------------------*/ @import url("reset.css"); @import url("type.css"); body { text-align: center; background: url("bg.gif") 0 0 repeat-x; } a, a:active, a:hover, a:visited { color: black; background: #ffc; text-decoration: none; } h1 { font-size: 2em; font-weight: normal; } h1 span { display: block; font-size: 1.1em; } h3 { font-size: 2em; color: #333; font-family: "Times New Roman", Times, serif; } /*--PAGE LAYOUT--*/ #container, #header, #outer-wrap, #footer { width: 965px; } #container { margin: 0 auto; text-align: left; padding-bottom: 20px; } #outer-wrap, #footer { clear: both; } #header { height: 126px; background: url("bg-header.gif") 0 0 no-repeat; position: relative; text-align: right; } #outer-wrap { background: #fff url("bg-content.gif") 0 0 no-repeat; width: 935px; padding: 5px 15px; } #footer { width: 920px; padding: 10px 20px; color: #fff; font-size: .9em; background: #1e5423 url("bg-footer.gif") 0 0 repeat-x; clear: both; } #inner-wrap { width: 100%; background: url("bg-inner-wrap.gif") 0 0 repeat-x; padding: 15px 0 0 0; } #sidebar, #content, #inner-wrap, #outer-wrap, #nav { float: left; } #sidebar { width: 175px; } #content { width: 750px; padding-left: 10px; } /*--//PAGE LAYOUT--*/ /*--NAVIGATION--*/ #nav { height: 35px; margin-bottom: 3px; width: 100%; background: url("bg-nav.gif") 0 0 repeat-x; text-align: right; font-family: "Times New Roman", Times, serif; font-weight: bold; font-size: 1.4em; } #nav li { float: left; border-left: 1px solid #33843C; border-right: 1px solid #245A29; } #nav li:first-child { border-left: 0; } #nav li:last-child { border-right: 0; } #nav li a { display: block; padding: 6px 20px; color: #fff; background: none; } #nav li a:hover { background: url("bg-nav-hover.gif") 0 0 repeat-x; color: #333; } /*--//NAVIGATION--*/ /*--HEADER--*/ #logo { width: 464px; height: 112px; display: block; background: url("old-dairy-saddlery.jpg") 0 0 no-repeat; position: absolute; top: 0 ; left: 0; } #logo h2 {  margin: 0; display: none; } #header p.tel { margin: 0; font-size: 1.6em; color: #fff; position: absolute; top: 10px; right: 0; } #header p.tel strong { display: block; } #cart { width: 220px; height: 48px; padding: 10px 10px 0 10px; position: absolute; top: 68px; right: 10px; text-align: left; } #cart h4 { font-size: 1.2em; color: #333; background: url("basket.gif") 0 50% no-repeat; padding-left: 20px; } #cart ul { font-size: .9em; font-weight: bold; position: absolute; top: 15px; right: 10px; } #cart ul li { } #cart ul li a { background: none; color: #1D5322; border-bottom: 1px dotted #333; } #cart ul li a:hover { color: #333; } /*--//HEADER--*/ /*--FOOTER--*/ #footer { text-align: right; margin-bottom: 10px; } #footer ul { margin: 0; } #footer a { background: none; border-bottom: 1px dotted #fff; color: #fff; } #subForm { float: left; } #subForm h4 { font-size: 1.4em; font-family: "Times New Roman", Times, serif; } #subForm ul li {  float: left; margin-right: 10px; } #subForm input { width: 170px; padding: 3px; border: 1px solid #ddd; } #subForm fieldset input[type="image"] { width: auto; margin: 0; border: 0; } /*--//FOOTER--*/ /*--SIDEBAR--*/ #search { width: 163px; padding: 5px; border: 1px solid #ddd; margin-bottom: 10px; background: url("bg-search.gif") 0 100% repeat-x; } #search fieldset { } #sidebar h4 { font-size: 1.4em; color:#1D5322; font-family: "Times New Roman", Times, serif; } #search fieldset input { width: 155px; padding: 3px; margin-bottom: 3px; border: 1px solid #ddd; } #search fieldset input[type="image"] { width: auto; margin: 0; border: 0; float: right; } #subnav { } #subnav, #subnav li ul { width: 175px; font-size: 1.4em; } #subnav li { border: 1px solid #ccc; background: #ebebeb url("bg-subnav.gif") 0 0 repeat-x; margin-bottom: 1px; position: relative; z-index: 89; } #subnav li a { width: 163px; padding: 5px; color: #333; display: block; background: url("bg-raquo.gif") 95% 50% no-repeat; } #subnav li a:hover { color: #fff; background: #333 url("bg-raquo-hover.gif") 95% 50% no-repeat; } #subnav li ul { font-size: 1em; display: none; margin: 0; } #subnav li ul, #subnav li ul li { float: left; } #subnav li:hover ul { display: block; position: absolute; left: 100%; top: 0; z-index: 99; } #subnav li ul li { position: static; margin: 0; } #subnav li ul li a { background: none; } #subnav li ul li a:hover { background: #333; } #offer { display: block; width: 168px; padding: 0 0 5px 0; border: 1px solid #ddd; background: #ff0000 url("offer.gif") 0 0 no-repeat; color: #fff; font-weight: bold; font-size: 1.4em; margin-bottom: 10px; } a:hover#offer { background-color: #333; } #offer span { display: block; padding: 5px 10px; } #sidebar img { display: block; margin: auto; margin-bottom: 20px; } #sidebar a#offer img { display: block; margin: 0 0 5px 0; } #social { font-size: 1em; } #social li { } #social li a { display: block; padding: 8px 0 8px 35px; background: url("facebook.png") 5px 50% no-repeat; font-weight: bold; } #social li a:hover { background-color: #396D3D; color: #fff; } #social li a#fb { background-image: url("facebook.png"); } #social li a#bs { background-image: url("blogger.png"); } /*--//SIDEBAR--*/ /*--CONTENT--*/ #intro { width: 750px; height: 245px; margin-bottom: 10px; background: #1d5022 url("bg-intro.gif") 0 0 repeat-x; color: #fff; } #intro img, #intro div { float: left; } #intro div { width: 265px; padding: 20px 20px 0 20px; } #intro div p { font-size: 1em; } #intro div p a { width: 120px; padding: 5px; font-weight: bold; font-size: 1.1em; display: block; border: 1px solid #ddd; background: #9b9b9b url("bg-btn.gif") 0 0 repeat-x; color: #333; } #intro div p a:hover { background: #d9d9d9 url("bg-btn-hover.gif") 0 0 repeat-x; } .feature, .feature-small { width: 180px; float: left; margin: 0 5px 8px 0; } .feature { height: 260px;  } .feature-small { height: 125px; margin-bottom: 9px; } .feature#drop { clear: left; } .feature a, .feature-small a { display: block; position: relative; } .feature a img, .feature-small a img { border: 1px solid #ddd; position: absolute; top: 0; left: 0; z-index: 1; } .feature a span, .feature-small a span { position: absolute; top: 10px; left: 10px; z-index: 0; } .feature a:hover img, .feature-small a:hover img { border: 1px solid #1E5423; } .fragment-link { width: 95%; padding: 0 2.5% 10px 2.5%; margin-bottom: 10px; border-bottom: 1px solid #ddd; float: left; clear: left; } .fragment-link a { float: right; display: block; width: auto; background: url("ext.gif") 100% 50% no-repeat; padding-right: 10px; border-bottom: 1px dotted #333; color: #1e5423; } .fragment-link a:hover { color: #333; } .triple { width: 100%; clear: left; padding-bottom: 10px; margin-bottom: 20px; border-bottom: 1px solid #ddd; } .triple, .triple li { float: left; } .triple li { width: 240px; margin-right: 10px; } .triple li.last { margin: 0; } .triple li a { background: none; display: block; } #content .triple li h3 { font-size: 1em; } .triple li a img { border: 1px solid #ddd; } .triple li a:hover img { border: 1px solid #1e5423; } .triple li img { width: 238px; height: 123px; display: block; } .triple li a.more { float: right; border-bottom: 1px dotted #333; color: #1e5423; } .triple li a:hover.more { color: #333; } p.breadcrumbs { clear: left; font-size: .9em; } p.breadcrumbs a { background: none; border-bottom: 1px dotted #333; color: #1e5423; } p.breadcrumbs a:hover { color: #333; } .product, .gallery, .detail { float: left; } .product { width: 100%; border-bottom: 1px solid #ddd; padding: 0 0 20px 0; margin-bottom: 20px; } .gallery { width: 250px; } .gallery img.focus { width: 210px; padding: 10px 20px; height: auto; margin-bottom: 20px; border-bottom: 1px solid #ddd; } .detail { width: 480px; padding: 0 10px; } .detail h3 { font-size: 1.8em; color: #184E1D; margin: 0; } .detail .price { color: #ff0000; font-weight: bold; font-size: 1.2em; } .detail .price span { color: #333; font-style: italic; font-size: .7em; } .detail .permutation, .detail .related  { width: 50%; float: left; } .detail .permutation { } .detail .permutation li { float: left; width: 100%; padding: 5px 0; } .detail .permutation span { float: left; width: 60px; display: block; margin-right: 5px; clear: left; } .detail .permutation input, .detail .permutation select { float: left; border: 1px solid #184E1D; } .detail .permutation input.button { color: #fff; font-weight: bold; background: url("bg-add.gif") 0 0 repeat-x; cursor: pointer; } .detail .related { } .detail .related h4 { font-size: 1.2em; color: #184E1D; } .detail .related ol { } .detail .related ol li { } .detail .related ol li a { background: none; border-bottom: 1px dotted #333; color: #1e5423; } .detail .related ol li a:hover { color: #333; } #contactdetail { float: left; width: 450px; } #contactdetail address { font-size: 1.2em; font-style: normal; display: block; margin-bottom: 10px; } #contactdetail img { float: right; margin: 0 0 20px 20px; } #gmap { width: 450px; } #gmap iframe { border: 1px solid #ddd; } .contactform { float: right; width: 250px; } .contactform li { float: left; padding: 5px 0; } .contactform li span, .contactform li input, .contactform li textarea { float: left; } .contactform li span { display: block; width: 100%; } .contactform li input, .contactform li textarea { padding: 3px; border: 1px solid #184E1D; } .bg-brown, .bg-red, .bg-olive, .bg-black { width: 530px; height: 100px; padding: 20px 200px 20px 20px; margin-bottom: 20px; color: #fff; } .bg-brown { background: url("brown.jpg") 0 0 no-repeat; } .bg-red { background: url("red.jpg") 0 0 no-repeat; } .bg-olive { background: url("olive.jpg") 0 0 no-repeat; } .bg-black { background: url("black.jpg") 0 0 no-repeat; } .bg-brown h1, .bg-red h1, .bg-olive h1, .bg-black h1 { font-size: 3em; font-family: "Times New Roman", Times, serif; font-weight: bold; text-shadow: 1px 1px #000; } .news-item { padding-bottom: 10px; border-bottom: 1px solid #ddd; margin-bottom: 10px; float: left; } .news-item img, .news-item-detail { width: 150px; float: left; margin-right: 20px; } .news-item h3 { font-size: 2em; color:#184E1D; } .news-item-detail { width: 580px; margin: 0; } .fragment { width: 100%; clear: both; padding-top: 10px; } .fragment a { background: none; border-bottom: 1px dotted #999; } #footnav { width: 960px; margin: 0 auto; text-align: center; font-size: .9em; } #footnav li { display: inline; margin-right: 10px; } #footnav li a { background: none; } /*--//CONTENT--*/ /*--ACTINIC CHECKOUT INDICATOR--*/ p.checkout-progress-heading { width: 300px; margin: 10px auto; } #checkout-progress-indicator { width: 300px; height: 19px; background-image: url('cpi-background.gif'); margin: 0 auto 20px auto; } .checkout-progress-0 { width: 75px; height: 19px; background-color: #cbd7cf; background-image: url('cpi-main.gif'); float: left; } .checkout-progress-1 { width: 150px; height: 19px; background-color: #cbd7cf; background-image: url('cpi-main.gif'); float: left; } .checkout-progress-2 { width: 225px; height: 19px; background-color: #cbd7cf; background-image: url('cpi-main.gif'); float: left; } .checkout-progress-3 { width: 300px; height: 19px; background-color: #cbd7cf; background-image: url('cpi-main.gif'); float: left; } #checkout-progress-indicator .cpi-end { width: 8px; padding: 0; margin: 0; border: 0; height: 19px; background-image: url('cpi-end.gif'); background-position: right;background-repeat: no-repeat; float: left; } /* default form style */ form.default fieldset { margin: 1em 0; padding: 1em; border: 1px solid #ccc; background: #f8f8f8; } form.default fieldset legend { font-size: 1.2em; font-weight: bold; padding: 0 0.5em; color: #000; } form.default fieldset label { float: left; width: 10em; } form.default fieldset input[type="text"], form.default fieldset textarea, form.default fieldset select { width: 200px; padding: 0.2em; margin-bottom: 5px; border: 1px solid #bbb; font-family: "Lucida Grande", Verdana, Arial, Helvetica, sans-serif; } form.default fieldset input[type="radio"] { float: left; margin-right: 1em; } form.default fieldset input[type="submit"] { float: left; clear: both; margin-top: 1em; } form.default fieldset input:focus, form.default fieldset textarea:focus { background: #ffc; } form.default a { background: none; } /* default table style */ table.default { width: 728px; border: 1px solid #bbb; margin-bottom: 1em; } table.default a { background: none; border-bottom: 1px dotted #333; color: #1e5423; } table.default a:hover { color: #333; } table.default thead th { background: #1e5423; color: #fff; padding: 1em; font-size: 1.2em; } table.default td { padding: 1em; } table.default caption { font-size: 1.2em; font-weight: bold; margin-bottom: 1em; } table.default col { border-right: 1px solid #ccc; } table.default thead { background: #ccc; border-top: 1px solid #a5a5a5; border-bottom: 1px solid #a5a5a5; } table.default tr:nth-child(even) td { background: #edf5ff; } /* http://www.webtoolkit.info/css-clearfix.html */ .clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } .clearfix { display: inline-block; } html[xmlns] .clearfix { display: block; } * html .clearfix { height: 1%; }