/* @override http://wood.rubious.co.uk/css/style.css http://proof.naturallywood.net/css/style.css http://www.naturallywood.net/css/style.css */ /* @group CSS RESET and FONT FACE */ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, button {margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline;} @media only screen and (max-device-width:480px) { body {-webkit-text-stroke: 0 black;} } table {border-collapse: collapse; border-spacing: 0;} section, article, aside, header, footer, nav, dialog, figure {display: block;} @font-face { font-family: 'DejaVuSansBold'; src: url('DejaVuSans-Bold.eot'); src: local('DejaVu Sans Bold'), local('DejaVuSans-Bold'), url('DejaVuSans-Bold.woff') format('woff'), url('DejaVuSans-Bold.ttf') format('truetype'), url('dejavusans-bold-webfont.svg#webfontb0YLwca1') format('svg'); font-weight: normal; font-style: normal; } /* @end */ /* @group Body and document-wide */ body {line-height: 1; -webkit-text-stroke: 1px transparent; background: url(/images/bg-grad-1.jpg) 0 0 repeat-x #fff; font-family: Tahoma, Helvetica, Arial, sans-serif; position: relative; font-size: 12px; line-height: 1.6;} br.clear {clear: both;} a.more {color: #7a7a7a; font-weight: bold; display: block; background: url(/images/psp-sprite.png) -908px -712px no-repeat; padding: 4px 22px 4px 0px; margin: 4px 0 0 0; position: relative; height: 13px;} a.more:hover {background-position: -908px -762px; color: #3c622f;} a {color: #000;} #mainContent a.more {color: #3b3b3b;} p {font-size: 12px; line-height: 1.8; color: #000; margin-bottom: 15px;} .two ul, .two ol, .product-box ul, .product-box ol {font-size: 12px; line-height: 1.8; color: #808084; margin-bottom: 15px; margin-left: 40px;} .two ul li, .two ol li, .product-box ul li, .product-box ol li {margin: 0 0 5px 0;} article ul, article ol {margin: 10px 0 10px 30px;} article ul li, article ol li {margin: 0 0 5px 0;} #mainContent p.contact-us {margin: 30px 0 0 0; color: #d48a3d; clear: both;} /*p.contact-us a.contact-us-button {text-decoration: none; background: url(/images/button_01.png) 0 0 no-repeat;display: inline-block; height: 29px; font-size: 18px; text-transform: uppercase; color: #fff; padding: 0 6px;} p.contact-us a.contact-us-button:hover {background-position: bottom left;}*/ /* @end */ /* @group NavBar */ #navbar {position: fixed; top: 0; width: 970px; margin: 0 auto;background: transparent; height: 100px; font-size: 11px; z-index: 1000; color: #000;/*font-family: Helvetica, Arial, sans-serif;*/ /*border-bottom:1px solid #482e15;*/ overflow: hidden;} .ie7 #navbar {margin: 0 0 0 -10px;} .ie6 #navbar {position: absolute;margin: 0 0 0 -10px; } div.a a, div.b a {color: #fff; text-decoration: none;} div.a a:hover, div.b a:hover {color: #000; text-decoration: none;} a.forgot {font-size: 9px; } #navbar div.a {height: 27px; padding: 2px 0 0 0; position: relative;} #navbar div.b {height: 20px; padding: 0 0 2px 0;position: relative;} #navbar div.a, #navbar div.b {width: 950px; margin: 0 auto;} #navbar input#username {width: 92px;} #navbar input#password {width: 92px;} #navbar div.a form.login label {margin:0 10px 0 0;} #navbar .extranav {list-style: none; width: 257px; overflow: hidden; position: absolute;top: 7px; right:32px;} .ie6 #navbar .extranav {position: absolute;top: 0px; right: 0;} #navbar .extranav li {list-style: none; float: left; padding-bottom: 1px;;} #navbar .extranav li.basket {} .extranav .paypal {font-size: 10px;} .b .extranav li {margin-left: 0px; font-size: 10px; text-align: right;} #navbar li.divide {color: #b35702;} #navbar li.basket a{padding: 10px 0px 5px 21px;background: url(/images/sprite.png) -13px -1187px no-repeat;} .ie6 #navbar li.basket {position: absolute; right: 35px; top: -10px;} #navbar li.subscribe a{padding: 10px 22px 16px 25px;background: url(/images/sprite.png) -13px -1134px no-repeat;} #navbar li.subscribe {background: url(/images/sprite.png) -627px -410px no-repeat; padding-right: 0px;} #navbar li.subscribe:hover {background: url(/images/sprite.png) -627px -482px no-repeat;} #navbar li.paypal a{padding: 2px 0px 5px 20px;background: url(/images/sprite.png) -15px -1256px no-repeat;} /* @end */ /* @group Wrapper and Header */ div.wrapper-a {background: url(/images/bg-grad-2.jpg) 0 0 repeat-x #d4d3d4; width: 970px; margin: 0 auto; position: relative;} div.wrapper-b {width: 950px; margin: 0px auto 0 auto; position: relative; padding-top: 1px; background: #fff; /*-webkit-box-shadow:0px 0px 1px #d0d0d0*/ z-index:900} header {position: relative; margin-top:0px; /*height: 325px;*/ margin-bottom:0px; width: 100%; background: transparent;} header div.logo {background: url(/images/sprite.png) 0px -0px no-repeat transparent; height: 99px; position: relative; width: 100%; z-index: 10; margin-top: 0px; } /*div.logo p {display: none;}*/ div.logo a.home {display: block; width: 350px; height: 80px;} div.logo a.tel {display: none; width: 250px; height: 30px; position: absolute; right: 0; top: 0px; } div.logo a span {display: none;} div.logo em {display: block; width: 250px; text-align: right;font-size: 11px; font-style: normal; color: #808084; position: absolute; top: 60px; right: 50px; font-family: Tahoma, Arial, sans-serif;} @media only screen and (max-device-width:480px) { div.logo a.tel {display: block;} } header a.brochure { position: absolute; top: 11px; right: 320px; width: 102px; padding: 0 20px 0px 20px; height: 70px; background: url(/images/brochure-header.jpg) 15px 10px no-repeat; border: 1px solid #d5a274; border-bottom: none; border-top:none} header div.logo a.brochure span {position: relative; top: -4px; display: block;} a.more-info {color: #000; text-decoration: none; font-weight: bold; font-size: 14px; background: url(/images/sprite.png) -241px -389px no-repeat; font-family: Arial, sans-serif; width: 98px; height: 29px; padding: 7px 0 0 13px; display: block; } a.more-info:hover {color: #0b2e68;} /*ul.breadcrumb {padding: 0 0 0 0px;color: #482e15;font-size: 11px;} ul.breadcrumb li.first {color: #fff; margin: 0;} ul.breadcrumb li {display: inline-block; margin-left: 3px; color: #000;} .ie7 ul.breadcrumb li, .ie6 ul.breadcrumb li {display: inline;} ul.breadcrumb a {color: #482e15 #000; text-decoration: none; font-weight: bold;}*/ .ie7 li, .ie7 ul {z-index: 100;} ul.breadcrumb {list-style: none; margin: 0 0 0px 0;display: block; height: 18px;} ul.breadcrumb li {float: left;} ul.breadcrumb li a { margin: 0 0 0 3px; color: #888;} ul.breadcrumb li a:hover {color: #000;} /* @end */ /* @group Main content, featured products */ section#mainContent {margin: 190px 14px 28px 13px;position: relative; height: auto; clear: both; overflow: hidden; border-top: 1px solid #ccc; } .ie7 section#mainContent, .ie6 section#mainContent {margin: 200px 14px 28px 13px; } .columns {overflow: visible !important; background: url(/images/background.png) 0 0;} .columns .one, .columns .two, .columns .three {padding: 25px 0 0 0;} body.contact .columns .three {padding-top: 25px;} .columns .one {float: left; width: 180px;margin-right: 30px;} .columns .two {float: left; width: 527px; border-right: 1px solid #d0d0d0; height: auto !important;min-height: 700px;height: 600px; } body.products .columns .two {min-height: 0; height: auto;margin-bottom: 70px;} body.basket .columns .two {min-height: 0; height: auto;} .columns .three {float: left; width: 172px; padding-left:10px; padding-top: 47px;} .three .three_white_block {position: absolute; top: 0; right: 0; width: 186px; height: 43px; background: #fff;} /* @end */ /* @group Home page */ div.slideshow {width: 923px;margin: 0 auto; height: 400px; position: relative; background: none; overflow: hidden;} div.slideshow img {position: absolute; bottom: -85px; height: auto; width: 930px;} div.slideshow div.image {position: absolute;margin: 0 auto; height: 400px; width: 930px;} div.slideshow div.overlay {position: absolute; width: 930px;margin: 0 auto; height: 400px; top: 0; left: 0;} div.slideshow div div.description {height: 64px; position: absolute; bottom: 0; left: 0; width: 890px; background: url(/images/sprite.png) -10px -1038px; padding: 20px 20px 0px 20px;} div.slideshow div.description h2 {font-family: Palatino, Georgia, "Times New Roman", Times, serif; text-transform: uppercase; font-size: 22px; color: #d48a3d; line-height: 1.3;} #mainContent div.slideshow div.description p {color: #fff; font-size: 12px;} div.panels {overflow: hidden; height: 140px;margin: 24px 0; border-bottom: 1px solid #ccc; padding: 0 0 24px 0; width: 908px;} div.panels a {width: 216px; display: block; color: #000;height: 140px; float: left; margin: 0 14px 0 0px; background: url(/images/sprite.png) 154px -400px no-repeat;} div.panels a div * {text-indent: -9999px;} div.panels a:hover {background-position: 154px -760px;} div.panels a.info {margin-right: 0px;} div.panels a div {border: 1px solid #d0d0d0; width: 190px; height: 140px; padding: 0; margin: 0;} div.panels a.wood-types div {background: url(/images/panel-images/woodtypes.jpg) center center no-repeat #fff;} div.panels a.designs div {background: url(/images/panel-images/designs.jpg) center center no-repeat #fff;} div.panels a.finishes div {background: url(/images/panel-images/finishes.jpg) center center no-repeat #fff;} div.panels a.sanding div {background: url(/images/panel-images/sanding.jpg) center center no-repeat #fff;} div.panels a.floorcare div {background: url(/images/panel-images/floorcare.jpg) center center no-repeat #fff;} div.panels a.installation div {background: url(/images/panel-images/installation.jpg) center center no-repeat #fff;} div.panels a.products div {background: url(/images/panel-images/products.jpg) center center no-repeat #fff;} div.panels a.gallery div {background: url(/images/panel-images/gallery.jpg) center center no-repeat #fff;} div.panels a.info div {background: url(/images/panel-images/general-info.jpg) center center no-repeat #fff;} div.panels a.product-types div {background: url(/images/panel-images/product-types.jpg) center center no-repeat #fff;} div.panels a.underfloor div {background: url(/images/panel-images/underfloor.jpg) center center no-repeat #fff;} div.panels a:hover div {cursor: pointer;} div.homepage-intro { overflow: hidden; float: left; padding-bottom: 32px; -moz-column-width: 445px; -webkit-column-width: 445px; -moz-column-gap: 20px; -webkit-column-gap: 20px; padding: 0;} div.homepage-intro p {margin: 0 0 10px 0;padding: 0;} div.homepage-intro p:first-child {margin: -6px 0 10px 0;padding: 0;} div.two div.panels {overflow: hidden; height: auto;width: 100%; border: none;} div.two div.panels a {margin: 0px 14px 20px 0px; } /*div.columns-two div.one, div.columns-two div.two {float: left;} div.columns-two div.one {width: 445px;} div.columns-two div.two {width: 445px; margin-left: 20px;}*/ /* @end */ /* @group Inner pages */ body.general-info .columns .two {float: left; width: 708px; border-right: 0px solid #d0d0d0; } #mainContent .columns .two h1, #mainContent .columns .one h1 {font-family: DejaVuSansBold; font-size: 29px; color: #8eb62b; text-shadow: 2px 1px 3px rgba(0,0,0,.2); margin: 11px 0 0 0 ;padding: 0; position: relative; top: -13px; line-height: 1.1; font-weight: normal; letter-spacing: -1px;} #mainContent .columns .two h1 {margin-top: 0;} #mainContent .columns .one h1 {font-size: 26px;} #mainContent .columns .two h2 {font-family: DejaVuSansBold; font-size: 12px; color: #733014; margin-top: 30px; font-weight: normal; line-height: 1.3;} #mainContent .columns .three h3, #mainContent .columns .one h3 {font-family: DejaVuSansBold; font-size: 20px; color: #d48a3d; text-shadow: 2px 1px 5px rgba(0,0,0,0.2); border-bottom: 1px solid #ddd; margin: 0 0 9px 0px; padding: 0 0 2px 0;position: relative; top: -9px; z-index: 20;font-weight: normal;} #mainContent .columns .one h3 {border: none; position: static; line-height: 1.1;} #mainContent .columns .one select {width: 170px; position: relative; top: -6px;} #mainContent .columns .three h4, #mainContent .columns .one h4 {font-size: 12px; color: #808080;font-weight: normal; text-transform: uppercase; margin: 10px 0 5px 0;} .one ul {padding: 0 0px 0 0; line-height: 1.4; margin: 0; list-style: none;} .one ul li {margin: 0px 0 5px 0;} .one ul li a {color: #808084; text-transform: uppercase; text-decoration: none; background: url(/images/sprite.png) -901px -397px no-repeat; display: block;padding: 3px 0 4px 25px;} .one ul li a.back {background-position: -700px -216px;} .one ul li a:hover, .one ul li.selected a {background-position: -901px -578px} .one ul li a.back:hover, .one ul li.selected a.back {background-position: -700px -306px} .products .one ul li a {background: none; padding:0;} .one ul.wood-buttons li a {display: block;padding: 0 0px 20px 0px; background-position: 0 0; background-repeat: no-repeat; background: none; height: 15px;} .one ul.wood-buttons li a span {text-indent: -9999px; display: block;} .one ul.wood-buttons li a:hover {background-position: 0 -43px;} .one ul.wood-buttons li a:active, .one ul.wood-buttons li.selected a {background-position: 0 -86px;} .one ul li a.general-info {background: url(/images/sub-nav/geninfo.jpg);} .one ul li a.product-types {background: url(/images/sub-nav/product-types.jpg);} .one ul li a.wood-types {background: url(/images/sub-nav/wood-types.jpg);} .one ul li a.designs {background: url(/images/sub-nav/designs.jpg);} .one ul li a.finishes {background: url(/images/sub-nav/finishes.jpg);} .one ul li a.sanding {background: url(/images/sub-nav/sanding.jpg);} .one ul li a.floorcare {background: url(/images/sub-nav/floorcare.jpg);} .one ul li a.underfloor {background: url(/images/sub-nav/underfloor.jpg);} .one ul li a.installation {background: url(/images/sub-nav/installation.jpg);} .one ul li a.subscribe {background: url(/images/sub-nav/subscribe.jpg);} .one ul li a.about {background: url(/images/sub-nav/about.jpg);} .one ul li a.news {background: url(/images/sub-nav/latest-news.jpg);} .one ul li a.testimonials {background: url(/images/sub-nav/testimonials.jpg);} .one ul li a.samples {background: url(/images/sub-nav/ordering-samples.jpg);} .one ul li a.delivery {background: url(/images/sub-nav/delivery.jpg);} .one ul li a.returns {background: url(/images/sub-nav/returns.jpg);} .one ul li a.faqs {background: url(/images/sub-nav/faqs.jpg);} .one ul li a.terms {background: url(/images/sub-nav/tcs.jpg);} .one ul li a.privacy {background: url(/images/sub-nav/privacy-security.jpg);} .one ul li a.legal {background: url(/images/sub-nav/legal.jpg);} .one ul li a.contact {background: url(/images/sub-nav/contact-us.jpg);} .one ul li a.account {background: url(/images/sub-nav/my-account.jpg);} .one ul li a.basket {background: url(/images/sub-nav/my-sample-basket.jpg);} .one ul li a.order-history {background: url(/images/sub-nav/my-order-history.jpg);} .one ul li a.pine-floorboards {background: url(/images/sub-nav/pine-floorboards.jpg);} .one ul li a.filling-gaps {background: url(/images/sub-nav/filling-gaps.jpg);} .one ul li a.floor-repairs {background: url(/images/sub-nav/floor-repairs.jpg);} .one ul li a.oiled-finish {background: url(/images/sub-nav/oiled-finish.jpg);} .one ul li a.lacquered-finish {background: url(/images/sub-nav/lacquered-finish.jpg);} .one ul li a.staining {background: url(/images/sub-nav/staining.jpg);} div.image-gallery {margin: 0 0 25px 0;} div.image-gallery img {margin: 0 0px 0 0;} div.image-gallery a {margin: 0 10px 0 0;} #mainContent div.two div.image-gallery p {color: #d0d0d0;} #mainContent p small {font-size: 11px;} div.two p {padding: 0 20px 0 0; color: #000;} div.one .image-gallery a {margin: 0px 0 10px 0; display: block;} /* @end */ /* @group UL Dropdown */ div.dropdown {position: relative; margin-bottom: 25px;} div.dropdown ul{ display: none; position: absolute; left: -557px; top: 58px; z-index: 990; height: auto; width: 715px; background: #d0d0d0; border: 1px solid #808084; } .ie7 div.dropdown ul, .ie6 div.dropdown ul {padding: 5px;} div.dropdown ul li {float: left; margin: 5px 0 5px 7px; list-style: none; width: 170px; } div.dropdown a {color: #000; text-decoration: none; text-transform: uppercase; display: block; height: 45px;line-height: 1.2;} div.dropdown img {border: 1px solid #808084; margin-right:6px; float: left;} div.dropdown a:hover img {border: 1px solid #000;} div.dropdown div { height: 47px; width: 148px;padding: 5px; border: 1px solid #d0d0d0; background: url(/images/sprite.png) -767px -690px no-repeat;} div.dropdown div:hover {border: 1px solid #000;} div.dropdown div a span {display: block;height: 47px;border-right: 1px solid #d0d0d0; width: 130px; line-height: 1.4;font-size: 10px; } .ie7 div.dropdown div a span, .ie6 div.dropdown div a span {width: 84px; position: absolute; left: 0; padding: 0 0 0 60px;} .no-js div.dropdown div {display: none;} .no-js div.dropdown ul {display: block !important; position: static !important; width: 100%; border: none; margin-bottom: 20px; float: left;} .one div.dropdown ul{ display: none; position: absolute; left: -0px;} /* @end */ /* @group Gallery */ body.gallery .columns .two {float: left; width: 708px; border-right: 0px solid #d0d0d0; } div.gallery-thumbnails img {width: 100px; height: auto; padding: 0 11px 10px 0;} div.gallery-images {margin: 0px 0; padding: 0 0 24px 0; width: 100%;} div.gallery-images a {width: 229px; display: block; color: #000;height: 222px; float: left; margin: 0 7px 20px 0px; background: url(/images/sprite.png) 167px -318px no-repeat; text-decoration: none; text-align: center; font-weight: bold; color:#733014; font-size: 12px; position: relative;} div.gallery-images a:hover {background-position: 167px -678px;/*cursor: pointer;*/ color: #555;} div.gallery-images a span:hover {cursor: pointer;} div.gallery-images a span {display: block; width: 200px; margin: 0 auto;} div.gallery-images a div {border: 1px solid #d0d0d0; width: 202px; height: 222px; padding: 0; margin: 0; position: relative;} div.gallery-images a div {float: left;} div.gallery-images a div i {font-style: normal; font-weight: normal; position: absolute; top: 5px; left: 20px; background: #ddd; background: #ccc;background-color: rgba(200,200,200,0.6); padding: 5px; color: #fff;} div.gallery-images a img {width: 192px; height: 163px; margin: 5px; } /* @end */ /* @group Case Studies */ body.case-studies .columns .two {float: left; width: 708px; border-right: 0px solid #d0d0d0; } /* @end */ /* @group News page */ body.news #mainContent .two h2, body.testimonials #mainContent .two h2 {color: #733014; position: relative; margin: 40px 0 0px 0;font-size: 17px;} body.news h2 time {font-size: 13px; color: #d48a3d; position: absolute; left: 0; top: -13px;} .short-content {height: 78px; overflow: hidden;} .no-js .short-content {height: auto; overflow: hidden;} p.readmore-hide {display: none;} p.readmore a {color: #808084; text-decoration: none; font-size: 11px; padding: 5px 0 5px 24px;display: block;clear: both; position: relative;} p.readmore a i {background: url(/images/sprite.png) -552px -218px no-repeat; display: block; width:22px; height: 21px;position: absolute; left: 0;} p.readmore a:hover i {background: url(/images/sprite.png) -552px -258px no-repeat;} p.readmore a.hide i {background: url(/images/sprite.png) -552px -304px no-repeat;} p.readmore a.hide:hover i {background: url(/images/sprite.png) -552px -344px no-repeat;} /* @end */ /* @group Contact page */ .inner-columns {float: left; overflow: hidden; margin: 0 0 20px 0; width: 100%;} .inner-columns .c-one {float: left; width: 263px; } .inner-columns .c-two {float: left; width: 263px; } .contact-details .c-two {width: 220px; float: right;} hr {clear: both; margin: 30px 0; border: none; border-bottom: 1px solid #824711; -webkit-box-shadow:0px -6px 7px #ddd;width: 505px;} body.contact #mainContent .columns .two h2 {font-size: 14px; color: #824711; margin-top: 30px; font-weight: normal;} p.address {color: #000; line-height: 1.5;} /* FORMS */ form.form {background: #eee; display: block; padding: 10px 10px;float: left; position: relative; width: 485px; margin: 10px 0;} form.subscribe-form {/*width: 440px;*/} .form .inner-columns {padding: 0 5px; margin: 0;} .form .inner-columns .c-one {width: 230px; padding-left: 0px;} .form .inner-columns .c-two {float: right;width: 224px; padding-left: 0px; } #mainContent form.form p {font-size: 12px;} form.form em {color: #d48a3d; font-style: normal;} form.form label {display: block;} form.form label.error {color: #d48a3d; font-weight: bold; background: url(/images/sprite.png) -909px -814px no-repeat; padding: 0 0 0 18px;} form.form label.checkbox-label {display: block; position: relative; width: 170px; left: 20px;font-size: 11px;} form.form input#subscribe {width: auto; position: absolute; left: -20px;} form.form input {width: 200px; height: 20px;} form.form input, form.form textarea { margin-bottom: 5px;} form.form select {width: 180px;} form.form input.checkbox {width: auto; display: inline; border: 0;} form.form textarea {width: 170px; height: 120px;} form.form button {position: absolute; right: 20px;} form.form p.checkboxes {margin: 40px 0 0 0; padding: 40px 0 0 0;} body.contact form.form textarea#message {width: 100%; height: 120px;} body.contact form.form textarea#address {width: 100%; height: 72px;} form.form p.footer {margin:20px 0 10px 0; padding: 0;} body.contact #mainContent p.tel {line-height: 1.1;font-size: 19px; width: auto;} p.tel { width: 176px;} p.tel em {font-style: normal; display: inline-block; width: 40px; color: #000; font-weight: bold;} p.tel strong {color: #000; } form.subscribe-form {padding-top: 20px;} form.subscribe-form label {display: inline-block; margin-right: 10px; width: 50px; float: left;} form.subscribe-form label.error {width: 150px; position: absolute; top: 120px; background-color: #eee;} form.subscribe-form input.text {width: 135px; float: left; margin: 0; padding: 0 0 0 3px;} form.subscribe-form p {float: left;width: 220px; margin-bottom: 40px; } form.subscribe-form p.footer {margin: 0 0 10px 0;} form.form div.interest { width: 200px; height: 100px; float: left; position: relative; top: -10px;} form.form div.interest label.interest-title { display: block; width: 200px;} form.form div.interest input {width: auto; height: auto;} form.form div.interest label {width: 100px; height: 20px; display: inline-block; float:left;margin: 0 0 5px 0;padding: 0;} /* @end */ /* @group Wood Types page & Designs page */ div.swatch .extra-info .details {display: none;} div.swatch .extra-info {float: left; margin: 0 auto;left: 15%; right: 15%; position: relative;} div.swatch img.swatch {width: 72px;height: 72px;} div.open img.swatch {width: 200px;height: 200px;} ul.designs{ position: static; height: auto; width: 100%; margin:20px 0 5px 0; float: left; overflow: hidden;} ul.designs li {float: left; margin: 5px 0px 5px 0px; list-style: none; width: 170px; } ul.designs a {color: #000; text-decoration: none; text-transform: uppercase; display: block; height: 45px;} ul.designs img {border: 1px solid #808084; margin-right:6px; float: left;} ul.designs a:hover img {border: 1px solid #000;} div.swatch {position: relative; margin: 20px 10px 0 0; float: left; text-align: center; width: 130px; } div.open {width: 690px ; text-align: left; border: 1px solid #ccc; padding: 10px; position: relative;} div.open .extra-info {float: left; margin: 0 auto;position: static; width: 100%} body div.swatch img.wood-type {width: 92px; height: 92px; text-align: left; margin: 0 auto; float: none;} body div.open img.swatch {margin-right: 15px; float: left; text-align: left;} div.open .details a.hide {position: absolute; right: 10px; top: 10px;} #mainContent .columns div.swatch h2 {text-align: left; margin-top: 0px;} div.swatch p.swatch {text-align: center; margin: 0; padding: 0; height: 40px; width: 100px; line-height: 1.4;} body.wood-types #mainContent .columns .two h2, body.product-types #mainContent .columns .two h2, body.designs #mainContent .columns .two h2, body.finishes #mainContent .columns .two h2 {font-size: 17px; color: #824711; margin-top: 0px; font-weight: normal; line-height:1;margin-bottom: 8px;} div.swatch dl {width: 390px; line-height: 1.49; float: left; color: #808084; text-align: left;} div.swatch dt {float: left; width: 70px; display: inline-block; font-weight: bold;} div.swatch dd {color: #733014;} div.swatch dd a {color: #733014;} div.swatch div.description {float: left; } .product-types div.swatch div.description {float: none; width: auto; margin: 0 0 0 215px;} body.wood-types hr, body.product-types hr, body.finishes hr, body.designs hr {clear: both; margin: 10px 0 40px 0; border: none; border-bottom: 1px solid #824711; -webkit-box-shadow:0px -6px 7px #ddd;width: 505px;} body.wood-types .columns .two, body.product-types .columns .two, body.designs .columns .two, body.finishes .columns .two {float: left; width: 708px; border-right: 0px solid #d0d0d0; } /* @end */ /* @group Products page */ body.products .columns .two {float: left; width: 708px; border-right: 0px solid #d0d0d0; padding-left: 15px;} body.products .columns .one {width: 170px;} body.products div.gallery-images {margin: 0px 0; padding: 0 0 0px 0;} body.products div.gallery-images a {width: 225px; height: 190px; float: left; margin: 0 0px 0px 0px; background: url(/images/sprite.png) 159px -350px no-repeat; text-decoration: none; text-align: center; font-weight: bold; color:#733014; font-size: 12px; display: block; position: relative;} body.products div.gallery-images div {border: 4px solid #d0d0d0; border-style: double;width: 192px; height: 200px; float: left; margin: 0 30px 20px 0px; background: url(/images/sprite.png) 163px -350px no-repeat; text-decoration: none; text-align: center; font-weight: bold; color:#733014; font-size: 12px; display: block; position: relative;} body.products div.gallery-images a.third, body.products div.gallery-images a:nth-child(3n) {margin-right: 0;} body.products div.gallery-images a:hover {background-position: 159px -710px; cursor: pointer;} body.products div.gallery-images a img {width: 115px; height: 115px; margin: 9px 5px 10px 11px; float: left;position: relative; border: 1px solid #ccc;} body.products div.gallery-images a img.zoom {width: 230px; height: 230px; border: 1px solid #ccc; z-index: 1000; position: absolute; left: -60px; display: none;} body.products div.gallery-images a img.nozoom { display: none;} body.products div.gallery-images a:hover img.zoom {display: block;} body.products .ie6 div.gallery-images a:hover img.zoom, body.products .ie7 div.gallery-images a:hover img.zoom {display: none;} body.products #mainContent div.gallery-images a h3 {color: #733014; margin: 10px 0 0 10px; width: auto; text-align: left; font-size: 16px; text-shadow: 3px 2px 5px rgba(0,0,0,.2); line-height: 1.2;height: 40px;width:180px} body.products #mainContent div.gallery-images a p {color: #808084; margin: 5px 0 0 12px; width: auto; text-align: left; font-weight: normal; line-height: 1.5; font-size: 10px;} div.products-pagination {height: 20px; border-bottom: 1px solid #ccc;position: relative; padding: 8px 0;} div.two div.products-pagination {height: 20px; border-bottom: 1px solid #ccc; border-top: 1px solid #ccc;position: relative; padding: 8px 0;float: right; width: 100%;} div.products-pagination p, div.products-pagination li {font-size: 11px;} div.products-pagination ul li {float: left; list-style: none; margin: 0 1px; 0 0} div.products-pagination p {margin: 2px 0 2px 5px; display: inline-block; float: right; border-right: 1px solid #ccc; height: 17px; padding: 0px 5px 0px 5px;} div.products-pagination p span{position: relative; top: -3px;} div.two div.products-pagination p {padding: 0 5px 0 5px; color: #808084;} div.products-pagination ul { list-style: none; float: right; max-width: 400px;} div.two div.products-pagination ul {color: #808084; margin-bottom: 0px; margin-left: 0px;} div.products-pagination ul li a { display:block;width:16px;height:17px;padding:0px 5px 0 0;text-align:center;margin: 2px 2px 2px 2px;font-size: 11px;line-height:17px; text-decoration: none; color:#959595; border-right: 1px solid #ccc;} div.products-pagination ul li a.selected {font-weight: bold;} div.products-pagination ul li a b {font-weight: normal;} div.products-pagination ul li a.prev, div.products-pagination ul li a.next {line-height: 16px;} div.products-pagination ul li a.next {border: none;} div.products-pagination li a.selected b { color: #000; background: #ccc; padding: 5px;} div.products-pagination li a:hover {color: #b35702;} /* @end */ /* @group Products category page */ /*body.category #mainContent .columns .one h1 {font-size:15px; color: #733014;}*/ /*body.category #mainContent .columns .one h2 {font-family: DejaVuSansBold; font-size: 26px; color: #8eb62b; text-shadow: 0px 0px 5px #eee; margin: 10px 0 10px 0;padding: 0 0 8px 0; position: relative; line-height: 1.1; font-weight: normal; }*/ body.category #mainContent .columns .one h2 {font-size:15px; color: #733014;}* body.category #mainContent .columns .one h3 {margin: 35px 0 0 0;} .product {border: 1px solid #ccc; width: 220px; height: auto; padding: 5px 4px; text-align: center; float: left;margin: 0 8px 20px 0px; position: relative;height:441px;min-height: 458px;} .product.end {margin-right: 0px;} .product.first {margin-left: 17px;} .product ul.designs {display: none; width: auto; float: none; margin: 5px 5px; text-align: left;} .product ul.designs li a {color: #733014; text-transform: none;} .product img.product-image {width: 215px; height: 215px; margin: 0 auto; text-align: center;} #mainContent .two .product h2 {margin: 5px 5px 0 5px; text-align: left; height: 60px} .product dl {width: auto; height: auto; line-height: 1.49; color: #808084; text-align: left; margin: 5px 5px;} .product dt {float: left; width: 85px; display: inline-block; font-weight: bold; font-size: 10px;} .product dt small {font-size: 9px; letter-spacing: -1px;} .product dd {color: #733014; font-size: 11px; float: left; width: 125px;} .product dd a {color: #733014;} .product .price {text-align: left; border: 1px solid #ccc; border-left: 0px; border-right: 0px; margin: 10px 0px 0 0px; padding: 5px; font-weight: bold; position: absolute; bottom: 38px; width: 200px;} .product del {color: #ccc; font-size: 12px;} .product ins {text-decoration: none; color: red; display: inline;} .product .price span {color: #d48a3d;display: block;} .product span.sale, .product span.free-sample {color: red; width: 75px;height: 75px; display: block; position: absolute; left: 14px; top: 11px; text-indent: -9999px;} .product span.sale {background: url(/images/sprite.png) -296px -242px no-repeat;} .product span.free-sample {background: url(/images/sprite.png) -193px -242px no-repeat;} /*.link {text-transform: uppercase; color: #808084; text-decoration: none; background: url(/images/sprite.png) -635px -406px no-repeat; padding: 5px 25px 5px 0; font-size: 14px;}*/ .product p {position: absolute; text-align: left; margin: 5px 5px 5px 5px;bottom: 4px; left: 3px;} .product p a {display: inline;} body:empty .product p a {display: block;} .product p a:hover {color: #d48a3d;} .product a.info {background-position: -670px -405px; position: relative; margin: 0 9px 0 0; padding-right: 34px;} .product a.info:after {content: "|"; position: absolute; right: -1px; top: 1px;color: #ccc;} .product a.info:hover {background-position: -670px -477px;} .product a.sample {background-position: -600px -406px;} .product a.sample:hover {background-position: -600px -478px;} .products-list div.product:nth-child(3n), .product.end {margin-right: 0;} /* @end */ /* @group Accessories Products page */ /* @end */ /* @group Product Page */ a.back {color: #808084; text-decoration: none; text-transform: uppercase; padding-left: 20px; color: #808084; text-transform: uppercase; text-decoration: none; background: url(/images/sprite.png) -901px -397px no-repeat; display: block;padding: 3px 0 4px 25px; background-position: -700px -216px; width: 160px; position: absolute;} .product-page .products-pagination a.back:hover {color: #b35702} .product-box {width: 921px; border: 1px solid #ccc; float: left;height: 560px; margin: 20px 0px 10px 0px;} .related-products-box {border: 1px solid #d48a3d; float: left;width: 921px; height: 310px;margin: 20px 0px 10px 0px;} .product-box .product-images {width: 392px; float: left; padding: 10px 0 0 10px; background: url(/images/background.png) 208px 0 repeat-y; height: 535px; } .product-box div.scrollable {width: 375px;} .product-box div.scrollable div.items img { margin: 5px 6px 0 1px; cursor: pointer;} .product-box #image_wrap { width:375px; z-index: 0; position: relative;} .product-box div.arrows {width: 375px;} .product-box h1 {font-family: DejaVuSansBold; font-size: 20px; color: #733014; margin: 0;margin-top: 6px; font-weight: normal; padding: 0; line-height: 1.2; height: 85px;} .product-box .product-information {width: 480px; float: left; margin: 5px 0 0px; padding: 0 0 0 30px; position: relative;} .product-box .price {text-align: left; border-bottom: 1px solid #ccc; margin: 0px 0px 10px 0px; padding: 5px 5px 0px 5px; font-weight: bold; width: 470px; min-height: 80px; height: auto !important; height:80px} .product-box small {font-size: 10px; letter-spacing: -1px;} .product-box del {color: #ccc; font-size: 12px;display: block;} .product-box ins {text-decoration: none; color: red; display: inline;} .product-box .price span {color: #d48a3d;display: block;} .product-box .designs-specs {display: block; position: relative; } .product-box ul.designs {display: none; width: 180px; float: none; margin: 5px 5px; text-align: left;} .product-box ul.designs li a {color: #733014; text-transform: none;} .product-box dl {width: 260px; height: auto; line-height: 1.7; color: #808084; text-align: left; margin: 0 5px; position: absolute; top: 4px; left: 0px; } .product-box dt {float: left; width: 105px; display: inline-block; font-weight: bold; } .product-box dd {color: #733014; float: left; width: 150px; } .product-box dd a {color: #733014;} .product-box .links {width: 210px; position: absolute; top: 98px; right: 0;} .product-box .links a {display: block; margin: 0 4px 2px 0;} ul.producttabs {width: 480px; height: 20px; position: absolute; top: 290px; left: 20px; margin: 0 0 0 10px;z-index: 100; border-bottom: 1px solid #ccc; border-top: 1px solid #733014;padding: 10px 0 10px 0px;} .no-js ul.producttabs {display: none;} ul.producttabs li {float: left; list-style: none; margin: 0 17px 0 0px; position: relative;} ul.producttabs li a {color: #808084; text-transform: uppercase; text-decoration: none; font-size: 13px; display: block; padding: 1px 5px;} ul.producttabs li a:hover {background: #bbb; color: #fff; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px;} ul.producttabs li a.current {background: #bbb; color: #fff; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px;} #details {height: 220px; position: absolute; top: 330px; left: 0px; width: 480px; margin: 5px 0 0px; padding: 0 0 0 30px; } .product-information a[href $='.pdf'] { padding: 15px 0 10px 45px; display: block; background: transparent url(/images/icon_pdf.png) no-repeat center left;} .product-information .downloads li {list-style: none; margin: 0;} .product-information .downloads ul {list-style: none; margin: 0 0 0 10px;} /* crossfading effect needs absolute positioning from the elements */ #details div.tab {display: none; position: absolute; margin: 5px 0 0 0px; height: 210px; top: 0px; overflow: auto; padding: 0 8px 0 0;width: auto;} .no-js #details div.tab {display: block; position: relative; border-bottom: 1px solid #ccc; width: 410px; height: auto; margin: 0px 0 20px 0; padding: 0 0 20px 0;} body.product ul.files li {padding: 20px 0 10px 0; position: relative; list-style: none;} body.product ul.files a strong {background: url(/images/icons-sprite.png) -2px -1142px no-repeat; padding: 15px 0 15px 30px;} body.product ul.files a {display: block;} body.product #mainContent ul.files a:hover {color: #bc5d19;} /* @group Related products */ .related-products-box {position: relative;} .csstransforms .related-products-box h1 { font-family: DejaVuSansBold; font-size: 16px; color: #d48a3d;position: absolute;top: 75px; left: -60px; font-weight: normal; -moz-transform: rotate(270deg); -o-transform: rotate(270deg); -webkit-transform: rotate(270deg); } .no-csstransforms .related-products-box h1 {width: 22px;height: 163px; position: absolute; left: 6px; top: 10px; text-indent: -9999px; background: url(/images/sprite.png) -205px -728px no-repeat;} .related-products-box div.scrollable {position:relative; overflow:hidden; width: 840px; height:300px; margin: 10px auto;} .related-products-box div.scrollable div.items { width:20000em; position:absolute; padding-left: 0px; height: auto;} .related-products-box div.arrows {width: 910px; margin: 0; position: absolute; bottom: 5px;left: 5px;} .related-products-box a.browse {cursor: pointer; display: block; width: 20px; height: 25px;} .related-products-box a.prevPage {float: left; text-indent: -999px; background: url(/images/sprite.png) -232px -358px no-repeat;} .related-products-box a.nextPage {float: right;text-indent: -999px; background: url(/images/sprite.png) -315px -420px no-repeat;} .related-products-box a.prevPage:hover {background-position: -232px -421px;} .related-products-box a.nextPage:hover {background-position: -315px -358px;} .related-products-box a.browse.disabled {opacity: 0.3;} div.related-product {width: 158px;height: 283px; border: 1px solid #ccc; float: left; margin: 0 10px 0 0;} div.items div.related-product img.product-image {width: 150px;height: 150px; margin: 5px;} div.related-product a.link {font-size: 11px; display: block; margin: 0; padding: 2px 4px;line-height: 1.6;} div.related-product a.view-product {background-position: -615px -409px;} div.related-product a.view-product:hover {background-position: -615px -481px;} div.related-product a.view-similar-products {background-position: -568px -409px;} div.related-product a.view-similar-products:hover {background-position: -568px -481px;} div.related-product h2 { margin: 5px 5px 0 5px; text-transform: uppercase; color: #d48a3d;} div.related-product h2.product-title {color: #824711; text-transform: none; margin: 0 10px 0 5px; line-height: 1.4; height: 32px; } div.related-product p.price {margin: 0 5px 2px 5px; color: #000; border-bottom: 1px solid #ddd;} div.related-product div.price span {font-size: 11px; text-align: left;width: 93%; margin: 0 0 4px 4px; display: block; color: #d48a3d; border: 1px solid #ccc; border-left: 0px; border-right: 0px; padding: 2px;} /* @end */ /* @end */ /* @group Accessories single product page */ /*.accessory-product*/ .product-box dl {} .accessory-product .product-box div.options {position: absolute; right: 30px;} .accessory-product .product-information .price {font-size: 15px;display: block;} /* @end */ /* @group Basket Page */ body.basket .columns .two, body.account .columns .two, body.order-history .columns .two {float: left; width: 708px; border-right: 0px solid #d0d0d0; padding-left: 15px;} body.basket .columns .one, body.account .columns .one, body.order-history .columns .one {width: 180px; margin-right: 20px;} body.basket #mainContent div.columns h1, body.account #mainContent div.columns h1, body.order-history #mainContent div.columns h1 {font-size: 25px;} div.table-basket {margin: 20px 0 40px 0; background: #ececec; position: relative; width: 706px;padding: 0 0 5px 0;} div.table-basket table {width: 690px; margin: 0 auto;} div.table-basket th {text-align: left; text-transform: uppercase; font-weight: bold; font-size: 11px; color: #733014; padding: 10px 30px 5px 0px; border-bottom: 1px solid #fff;} div.table-basket td.th {text-align: left; text-transform: uppercase; color: #733014;} div.table-basket tr.total td.th {} #mainContent div.table-basket td.th a{font-size: 11px; text-transform: none; background: none; font-weight: normal;} div.table-basket td {text-align: left;font-weight: normal; color: #000; padding: 0px 10px 8px 0px; border-bottom: 1px solid #a4a4a4;} div.table-basket td small {font-size: 10px;} #mainContent div.table-basket td a.remove {display: block;text-align: center; text-decoration: none; font-size: 14px;} #mainContent div.table-basket td a.remove:hover {background-position: -895px -762px; color: #3c622f;} div.table-basket tr.total td {border-bottom: 0px solid #a4a4a4; padding-top: 0px;} div.table-basket tr.gap td {border-bottom: 0px solid #a4a4a4; padding-top: 10px;} div.table-basket tr.discount td {padding-top: 10px; background: #d0d0d0; } div.table-basket p {position: relative; top: 45px; left: 0px;} div.table-basket p.buttons {position: relative; top: 55px; left: 0px;} #mainContent article div.table-basket p.buttons {margin: 0 0 0px 0} div.table-basket p button.proceed{margin-right: 0; position: absolute; right: 0;} button.apply-code {text-transform: none; font-size: 12px; cursor: pointer; text-decoration: underline;width: 100px;} #mainContent article p.warning {color: #a11129; text-align: right; padding: 15px 75px 0 0; font-size: 12px; } #mainContent article p.warning span {font-size: 11px; } #mainContent article p.warning a {color: #a11129;} div.table-basket select.delivery {width: 120px; position: relative; top: -19px;} #mainContent div.table-basket tr.discount p {font-size: 10px; position: static;color: #666; padding-left: 10px;} input#discount {width: 100px;} .table-basket .basket-product {position: relative; width: 250px;} .table-basket img.product-image {outline: 1px solid #fff; position: absolute; top: 0; left: 0; } #mainContent div.columns .table-basket h2 {font-size: 11px; color: #000;} .table-basket .basket-product-info {padding-left: 60px; width: auto;} .table-basket dl {width: auto; height: auto; line-height: 1.49; color: #808084; text-align: left; margin: 0 0px; font-size: 11px;} .table-basket dt {float: left; width: 80px; display: inline-block; font-weight: bold;} .table-basket dd {color: #733014;float: left; display: block; width: 100px;} .table-basket dd a {color: #733014;} /* @end */ /* @group Links page */ body.links .columns .two {float: left; width: 708px; border-right: 0px solid #d0d0d0; } ul.links-categories {clear: both; overflow: hidden; margin: 0;} ul.links-categories li {list-style: none; float: left; display: block; margin: 0 5px;} /* @end */ /* @group Main Nav and search*/ aside#sidebar {} aside#sidebar div.search {width: 450px; height: 30px; position: absolute; top: 140px; right: 20px; z-index: 10;} aside#sidebar div.search form {display: inline-block;} aside#sidebar div.search form.search {position: relative;} aside#sidebar div.search label.search {width: 23px; display: block; height: 24px; position: absolute; left: -1px; top: -1px; background: url(/images/sprite.png) -814px -208px no-repeat;} aside#sidebar div.search input.keywords{margin-left: 15px; padding-left: 5px;width: 125px;} aside#sidebar div.search label.search span{display: none;} aside#sidebar div.search select {display: inline-block; width: 132px;} div.news-search {position: absolute; left: 18px; top: 160px;height: 25px; width: 905px;padding: 0 5px 0 0px; overflow: hidden;} div#newsticker li {list-style: none;} div#newsticker li.title span{color: #b55e28;} div#newsticker li.title {width: 80px;} div#newsticker li.title a {text-transform: uppercase; font-size: 11px; color: #808084; text-decoration: none; padding: 0px; display: block;} div#newsticker ul ul {display: block; float: left; position: absolute; left: 80px; top: 0px; height: 16px; overflow: hidden; width: 360px; } div#newsticker ul ul#news li {width: 500px;} div#newsticker ul ul#news li a {color: #808084; color:#733014; text-transform: none; font-weight: bold;} div#newsticker ul ul#news li a strong {color: #733014; text-transform: none; font-weight: bold; display: none;} div#newsticker ul li a:hover, div#newsticker ul ul#news li a:hover {text-decoration: underline;} div#newsticker ul li a span {color: #3a3a3a;} form.search {position: absolute; right: 0; top: -1px;} .ie form.search {top: -0px;} form.search label {padding-right: 8px; font-weight: bold; font-size: 11px; text-transform: uppercase; color: #808084;} input {border: 1px solid #ccc;} form table input.text{width: 200px; padding: 4px;} /* @group Main Nav - JS */ .sf-menu, .sf-menu * {margin: 0; padding: 0; list-style: none;} nav#mainNav {position: absolute; top: 0px; left: 0px; width: 950px; height: 48px; z-index: 100;padding-left: 23px; padding-right: 0px; margin: 1px auto 0 auto; width: 927px;overflow: hidden; background: url(/images/sprite.png) 4px -131px no-repeat transparent;height: 48px; border-bottom: 3px solid #482e15; top: 95px; position: absolute; } .sf-menu {line-height: 1.0;} .sf-menu ul {position: absolute; top: -999em; width: 180px;/* left offset of submenus need to match (see below) */ background:#3b3b3b; bordezer: 0px solid #000; } .sf-menu ul ul { } nav .sf-menu li ul li a {width: 165px;} .sf-menu ul li {width: 100%;} .sf-menu li:hover {visibility: inherit;/* fixes IE7 'sticky bug' */} .sf-menu li {float: left; position: relative; margin: 0 0px 0 0px;} .sf-menu a {display: block; position: relative;} .sf-menu li:hover ul, .sf-menu li.sfHover ul {left: -5px; top: 56px; /* match top ul list item height */ z-index: 99;} ul.sf-menu li:hover li ul, ul.sf-menu li.sfHover li ul {top: -999em;} ul.sf-menu li li:hover ul, ul.sf-menu li li.sfHover ul {left: 173px; /* match ul width */ top: 0;} ul.sf-menu li li:hover li ul, ul.sf-menu li li.sfHover li ul {top: -999em;} ul.sf-menu li li li:hover ul, ul.sf-menu li li li.sfHover ul {left: 10em; /* match ul width */ top: 0;} .sf-menu li:hover, .sf-menu li.sfHover, .sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {outline: 0} .sf-menu a:focus{outline: 1px dotted #ccc;} /*** arrows **/ .sf-menu a.sf-with-ul {margin-right: 0px;} .sf-menu a.sf-with-ul span {padding-right: 0px; min-width: 1px;/* trigger IE7 hasLayout so spans position accurately */} .sf-sub-indicator {position: absolute; display: block;width: 7px; height: 9px; text-indent: -999em; overflow: hidden; background: url(/images/sprite.png) no-repeat 0px 0px;/* 8-bit indexed alpha png. IE6 gets solid image only */} a > .sf-sub-indicator {/* give all except IE6 the correct values */ bottom: 15px; right: 6px;background-position: -7px 0px;/* use translucent arrow for modern browsers*/} ul ul a > .sf-sub-indicator {right: 0px;} /* apply hovers to modern browsers */ a:focus > .sf-sub-indicator, a:hover > .sf-sub-indicator, a:active > .sf-sub-indicator, li:hover > a > .sf-sub-indicator, li.sfHover > a > .sf-sub-indicator {background-position: -10px -100px;/* arrow hovers for modern browsers*/} /* point right for anchors in subs */ .sf-menu ul .sf-sub-indicator {background-position: -10px 0;} .sf-menu ul a > .sf-sub-indicator {background-position: 0 0;} /* apply hovers to modern browsers */ .sf-menu ul a:focus > .sf-sub-indicator, .sf-menu ul a:hover > .sf-sub-indicator, .sf-menu ul a:active > .sf-sub-indicator, .sf-menu ul li:hover > a > .sf-sub-indicator, .sf-menu ul li.sfHover > a > .sf-sub-indicator {background-position: -10px 0;/* arrow hovers for modern browsers*/} /*** shadows for all but IE6 ***/ .sf-shadow ul {padding: 0 8px 9px 0; -webkit-box-shadow: 1px 1px 5px #3b3b3b;} .sf-shadow ul.sf-shadow-off {background: transparent;} /* My SF stuff */ .sf-menu li a {float: left; height: 25px; text-transform: uppercase; padding: 35px 0px 0px 0px; width: 70px; font-size: 11px; text-decoration: none; position: relative; top: 1px;color: #a58d61; cursor: pointer; cursor: hand; line-height: 1; text-align: center;text-indent: -9999px;} .sf-menu li li a {text-align: left;margin: 5px 10px 0 10px; padding: 4px 0 12px 0;} .sf-menu li.home a, .sf-menu li.home-selected a {width: 70px; } .sf-menu li.about a, .sf-menu li.about-selected a {width: 111px;} .sf-menu li.general-info a, .sf-menu li.general-info-selected a {width: 148px;} .sf-menu li.gallery a, .sf-menu li.gallery-selected a {width: 98px;} .sf-menu li.case-studies a, .sf-menu li.case-studies-selected a {width: 141px;} .sf-menu li.products a, .sf-menu li.products-selected a {width: 116px;} .sf-menu li.sanding a, .sf-menu li.sanding-selected a {width: 100px;} .sf-menu li.contact a, .sf-menu li.contact-selected a {width: 130px;} .sf-menu li.home a:hover, .sf-menu li.home-selected a {background: url(/images/sprite.png) -19px -145px no-repeat transparent;} .sf-menu li.about a:hover, .sf-menu li.about-selected a {background: url(/images/sprite.png) -89px -145px no-repeat transparent;} .sf-menu li.general-info a:hover, .sf-menu li.general-info-selected a {background: url(/images/sprite.png) -200px -145px no-repeat transparent;} .sf-menu li.gallery a:hover, .sf-menu li.gallery-selected a {background: url(/images/sprite.png) -348px -145px no-repeat transparent;} .sf-menu li.case-studies a:hover, .sf-menu li.case-studies-selected a {background: url(/images/sprite.png) -446px -145px no-repeat transparent;} .sf-menu li.products a:hover, .sf-menu li.products-selected a {background: url(/images/sprite.png) -587px -145px no-repeat transparent;} .sf-menu li.sanding a:hover, .sf-menu li.sanding-selected a {background: url(/images/sprite.png) -703px -145px no-repeat transparent;} .sf-menu li.contact a:hover, .sf-menu li.contact-selected a {background: url(/images/sprite.png) -803px -145px no-repeat transparent;} .sf-menu li.selected li.selected > a {} /*.sf-menu li.dropdown a span {padding-right: 10px;}*/ .sf-menu li.selected a {color: #5f523f;} .sf-menu li.selected li a {color: #fff;} .sf-menu li.selected li.selected a {color: #dc8a34;} .sf-menu li.selected li a:hover {color: #8fba24;} /* @end */ /* @end */ /* @group Scrollable */ div.scrollable {position:relative; overflow:hidden; width: 510px; height:80px;} div.scrollable div.items { width:20000em; position:absolute; padding-left: 0px;} div.scrollable div.items img { float:left; height: 70px; margin: 5px 8px 0 1px; cursor: pointer;} div.scrollable div.items img.active{outline: 1px solid #d48a3d;} div.scrollable div.items img:hover {outline: 1px solid #d48a3d;} div.items div.active { border:1px inset #ccc; background-color:#fff; } /* styling for the image wrapper */ #image_wrap { width:510px; margin:0px 0 15px 0px; padding:0px 0; text-align:left; background-color:#fff; position: relative; float: left; z-index: 500;} #image_wrap p.instructions {color: #808084; text-transform: uppercase; font-size: 10px;} #image_wrap a {text-decoration: none;} #image_wrap .caption {position: absolute; top: 0; left: 0; background: #000; width: 100%; padding: 0px 0 0 0;} #image_wrap .caption {height: 64px; background: url(/images/sprite.png) -182px -940px;} #mainContent #image_wrap .caption h2 {font-family: Palatino, Georgia, "Times New Roman", Times, serif; text-transform: none; font-size: 20px; text-shadow: none; color: #d48a3d; position: static; line-height: 1; padding: 10px 0 0 10px;margin: 0;} #image_wrap .caption p {color: #fff; font-size: 11px; padding: 0 10px 0 10px;} div.arrows {width: 510px; float: left;overflow: hidden; margin: 0 0 20px 0;} a.browse {cursor: pointer; display: block; width: 20px; height: 20px;} a.prevPage {float: left; text-indent: -999px; background: url(/images/sprite.png) -702px -218px no-repeat;} a.nextPage {float: right;text-indent: -999px; background: url(/images/sprite.png) -902px -218px no-repeat;} a.prevPage:hover {background-position: -702px -308px;} a.nextPage:hover {background-position: -902px -308px;} a.browse.disabled {opacity: 0.3;} /* @end */ /* @group overlay */ #colorbox .next, #colorbox .prev { /* absolute positioning relative to the overlay */ position:absolute; top:40%; /* upcoming CSS3 rounded border feature */ -moz-border-radius:5px; -webkit-border-radius:5px; } /* progress indicator (animated gif). should be initially hidden */ .progress { position:absolute; top:45%; left:50%; display:none; } /* active thumbnail is raised on top of the mask using the z-index property */ #thumbs a.active img { outline:1px solid #000; z-index:9999; position:relative; } /* @end */ /* @group Footer */ /* Footer */ #footer {font-family: "Lucida Grande", Lucida, Verdana, sans-serif;overflow: hidden; margin: 24px 32px 0 14px; padding: 30px 0 10px 0;border-top: 1px solid #ccc; display: ;} #footer div {float: left;} #footer a {color: #999; font-size: 10px;} #footer a:hover {color: #222;} #footer strong a {color: #848484;} #footer ul {list-style: none; margin: 0; float: left;} #footer ul li {margin: 3px 0 0 0; font-size: 9px;} #footer {font-size: 10px; line-height: 1.5; position: relative; /*background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffffff), to(#E6E2E3));*/} footer, div.rubious {font-family: "Lucida Grande", Lucida, Verdana, sans-serif; font-size: 10px;} footer ul {list-style: none; margin: 0px 0 0px 0px; padding: 0 0 6px 0; color: #808084; clear: both;} footer ul li {float: left;color: #808084;} #footer footer ul li a {color: #5e5e5e; text-decoration: none; font-weight: bold;} div.rubious {position: relative; right: 20px; top: -45px; float: right;} div.rubious a {text-decoration: none; color: #848484; position: relative; font-size: 10px;} div.rubious a span {background: url(/images/sprite.png) -859px -885px; display: block; width: 15px;height: 17px;position: absolute; left: -18px; top: -1px;} footer p.paypal {width: 410px; position: absolute; right: 1px; top: 18px;height: 55px; border-left: 1px solid #ddd; background:url(/images/sprite.png) -541px -1245px no-repeat;display: none;} footer p.paypal a{text-decoration: none; display: block; width: 345px;height: 55px; background: transparent; padding: 15px 0 0 48px; line-height: 1.2;} footer p.paypal a span {text-decoration: underline;} .ie7 #footer p.paypal a, .ie6 #footer p.paypal a {font-size: 9px; } /* @end */ /* @group Buttons */ .signin_button, .go_button {background-color: transparent;width: 21px; padding: 0px 0px; font-size: 10px; height: 23px; position: relative; background: url(/images/sprite.png) -901px -217px no-repeat; text-indent: -99999px;} .signin_button:hover, .go_button:hover {cursor: pointer;background-position: -901px -307px;} .link {text-transform: uppercase; color: #808084; text-decoration: none; background: url(/images/sprite.png) -635px -406px no-repeat; padding: 5px 21px 5px 0; font-size: 14px;} .view-map {background-position: -635px -406px;} .view-map:hover {background-position: -635px -478px;} .button {text-transform: uppercase; color: #fff; text-decoration: none; background: #ccc; padding: 0px 10px; height: 30px;width: 155px; display: inline-block; font-size: 14px; text-align: left; line-height: 2;} .button:hover {cursor: pointer; color: #fff;} a.contact-us {margin-left: 5px;} a.contact-us, a.email-us {background: url(/images/sprite.png) -400px -1137px no-repeat;} a.contact-us:hover, a.email-us:hover {background: url(/images/sprite.png) -400px -1173px no-repeat;} a.add-to-basket {background: url(/images/sprite.png) -586px -1137px no-repeat;} a.add-to-basket:hover {background: url(/images/sprite.png) -586px -1173px no-repeat;} a.order-sample {background: url(/images/sprite.png) -586px -1137px no-repeat;} a.order-sample:hover {background: url(/images/sprite.png) -586px -1173px no-repeat;} a.continue-shopping {background: url(/images/sprite.png) -183px -1340px no-repeat; padding-left: 32px; padding-right: 0;width: 141px;} a.continue-shopping:hover {background: url(/images/sprite.png) -183px -1304px no-repeat;} a.order-free-samples {width: 180px;background: url(/images/sprite.png) -185px -1137px no-repeat;} a.order-free-samples:hover {background: url(/images/sprite.png) -185px -1256px no-repeat;} button.submit {background: url(/images/sprite.png) -586px -1137px no-repeat; width: 175px;} button.submit:hover {background: url(/images/sprite.png) -586px -1173px no-repeat;} button.proceed {background: url(/images/sprite.png) -183px -1391px no-repeat;width: 267px;} button.proceed:hover {background: url(/images/sprite.png) -183px -1427px no-repeat;} /*a.contact-us-button {color: #fff; font-weight: normal; text-transform: uppercase; background: url(/images/button_02.png) top right no-repeat;padding: 0px 30px 5px 0px; margin: 5px 0 5px 0px; display: inline-block;width: 100px; text-decoration: none; position: relative;} a.contact-us-button span {background: url(/images/button_01.png) no-repeat; display: inline-block; padding: 0px 0 1px 7px; text-align: center;} a.contact-us-button:hover {cursor: pointer; background-position: bottom right;} a.contact-us-button:hover span {cursor: pointer; background-position: bottom left;} a.contact-us-button:active {color: #000;}*/ /* @end */ /* ColorBox Core Style The following rules are the styles that are consistant between themes. Avoid changing this area to maintain compatability with future versions of ColorBox. */ #colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;} #cboxOverlay{position:fixed; width:100%; height:100%;} #cboxMiddleLeft, #cboxBottomLeft{clear:left;} #cboxContent{position:relative; overflow:hidden;} #cboxLoadedContent{overflow:auto;} #cboxLoadedContent iframe{display:block; width:100%; height:100%; border:0;} #cboxTitle{margin:0;} #cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;} #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;} /* Example user style The following rules are ordered and tabbed in a way that represents the order/nesting of the generated HTML, so that the structure easier to understand. */ #cboxOverlay{background:url(/images/overlay.png) 0 0 repeat;} #colorbox{} #cboxTopLeft{width:21px; height:21px; background:url(/images/controls.png) -100px 0 no-repeat;} #cboxTopRight{width:21px; height:21px; background:url(/images/controls.png) -129px 0 no-repeat;} #cboxBottomLeft{width:21px; height:21px; background:url(/images/controls.png) -100px -29px no-repeat;} #cboxBottomRight{width:21px; height:21px; background:url(/images/controls.png) -129px -29px no-repeat;} #cboxMiddleLeft{width:21px; background:url(/images/controls.png) left top repeat-y;} #cboxMiddleRight{width:21px; background:url(/images/controls.png) right top repeat-y;} #cboxTopCenter{height:21px; background:url(/images/border.png) 0 0 repeat-x;} #cboxBottomCenter{height:21px; background:url(/images/border.png) 0 -29px repeat-x;} #cboxContent{background:#fff; } #cboxLoadedContent{margin-bottom:28px;} #cboxTitle{position:absolute; bottom:4px; left:0; text-align:center; width:100%; color:#949494;} #cboxCurrent{position:absolute; bottom:4px; left:58px; color:#949494;} #cboxSlideshow{position:absolute; bottom:4px; right:30px; color:#0092ef;} #cboxPrevious{position:absolute; bottom:0; left:0px; background:url(/images/controls.png) -75px 0px no-repeat; width:25px; height:25px; text-indent:-9999px;} #cboxPrevious.hover{background-position:-75px -25px;} #cboxNext{position:absolute; bottom:0; left:27px; background:url(/images/controls.png) -50px 0px no-repeat; width:25px; height:25px; text-indent:-9999px;} #cboxNext.hover{background-position:-50px -25px;} #cboxLoadingOverlay{background:url(/images/loading_background.png) center center no-repeat;} #cboxLoadingGraphic{background:url(/images/loading.gif) center center no-repeat;} #cboxClose{position:absolute; bottom:0; right:0; background:url(/images/controls.png) -25px 0px no-repeat; width:25px; height:25px; text-indent:-9999px;} #cboxClose.hover{background-position:-25px -25px;} /* The following fixes png-transparency for IE6. It is also necessary for png-transparency in IE7 & IE8 to avoid 'black halos' with the fade transition Since this method does not support CSS background-positioning, it is incompatible with CSS sprites. Colorbox preloads navigation hover classes to account for this. !! Important Note: AlphaImageLoader src paths are relative to the HTML document, while regular CSS background images are relative to the CSS document. */ .cboxIE #cboxTopLeft{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/images/internet_explorer/borderTopLeft.png, sizingMethod='scale');} .cboxIE #cboxTopCenter{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/images/internet_explorer/borderTopCenter.png, sizingMethod='scale');} .cboxIE #cboxTopRight{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/images/internet_explorer/borderTopRight.png, sizingMethod='scale');} .cboxIE #cboxBottomLeft{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/images/internet_explorer/borderBottomLeft.png, sizingMethod='scale');} .cboxIE #cboxBottomCenter{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/images/internet_explorer/borderBottomCenter.png, sizingMethod='scale');} .cboxIE #cboxBottomRight{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/images/internet_explorer/borderBottomRight.png, sizingMethod='scale');} .cboxIE #cboxMiddleLeft{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/images/internet_explorer/borderMiddleLeft.png, sizingMethod='scale');} .cboxIE #cboxMiddleRight{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/images/internet_explorer/borderMiddleRight.png, sizingMethod='scale');}