/* Default Colours: Black: #000000 Grey: #769595 Green: #48ac2f */ /* Global Styles */ body { font-family: Arial, sans-serif; background: #fff; } #container { position: relative; width: 826px; margin: 0 auto; background: transparent url(../images/site/container-bg.png) repeat-y left top; } #branding { height: 185px; background: transparent url(../images/site/branding-bg.png) no-repeat left top; } #branding a { position: absolute; left: 25px; top: 40px; width: 270px; height: 82px; text-indent: -9999px; } #content { overflow: hidden; } #siteinfo { height: 56px; padding: 28px 26px 0 ; background: transparent url(../images/site/siteinfo-bg.png) no-repeat left top; } #siteinfo p { line-height: 26px; font-size: 1.1em; text-align: right; } #siteinfo p a { color: #000; } /* Main Page Navigation */ #navmain { position: absolute; left: 16px; top: 130px; width: 788px; height: 30px; } #navmain li { float: left; line-height: 30px; background: transparent url(../images/site/navmain-li-bg.png) no-repeat right top; } #navmain li a { display: block; padding: 0 23px 0 20px; color: #fff; font-weight: bold; font-size: 1.2em; cursor: pointer; } #navmain li.active a { background: transparent url(../images/site/navmain-li-active-bg.png) no-repeat 9px 12px; cursor: default; } #navmain li.active a:hover { text-decoration: none; } /* Supplementry Navigation */ #content-supp, #navsupp { float: right; width: 196px; margin-right: 20px; margin-bottom: 20px; background: #000 url(../images/site/bg-navsupp.png) no-repeat left bottom; } #content-supp h4, .ns-box h4 { position: relative; left: -8px; width: 130px; line-height: 18px; padding: 35px 40px 6px 18px; background: transparent url(../images/site/navsupp-h4-bg.png) no-repeat left top; color: #fff; font-size: 15px; text-transform: uppercase; } #yoursearch h4 { padding-top: 7px; background: transparent url(../images/site/navsupp-yoursearch-h4-bg.png) no-repeat left top; } #mailinglist h4 { left: -16px; padding-right: 48px; margin-bottom: 20px; padding-bottom: 12px; padding-left: 25px; background: transparent url(../images/site/navsupp-mailinglist-h4-bg.png) no-repeat left top; } #content-supp h4 { padding-top: 7px; background-position: left bottom; } .ns-box h4 a { color: #fff; font-weight: bold; } .ns-box { margin-left: 16px; } .ns-contents { background: #ecf7e9 url(../images/site/navsupp-nscontents-bg.png) no-repeat left bottom; } .ns-contents ul { margin-left: 1px; padding: 5px 10px; font-size: 1.2em; } .ns-contents ul ul { display: none; list-style: disc; font-size: 0.916em; margin: 0 0 5px 13px; padding: 0; } .ns-contents ul li.active ul { display: block; } .ns-contents li { line-height: 20px; } .ns-contents ul ul li { line-height: 16px; } .ns-contents a { display: block; color: #58595b; font-weight: bold; } .ns-contents li.active a { color: #000; } .ns-contents a:hover, .ns-contents li.active a:hover, .ns-contents li.active li.active a:hover { color: #48ac2f; text-decoration: none; } .ns-contents li.active li a { color: #58595b; } .ns-contents li.active li.active a { color: #000; } .ns-contents p { margin: 0 0 0 1px; padding: 5px 10px 12px; font-size: 1.2em; line-height: 1.3; } /* Search Panel */ #navsupp form { background: #48ac2f; } #navsupp form .text, #navsupp form .select { overflow: hidden; margin: 10px 10px 0; } #navsupp form .button { overflow: hidden; margin: 10px 0 0; width: 172px; } #navsupp form label { display: block; color: #fff; font-weight: bold; text-transform: uppercase; font-size: 1.1em; } #navsupp form .text input { padding: 1px 3px; width: 148px; margin-top: 10px; border: 2px solid #fff; background: #eaede9; } #navsupp form .select select { width: 158px; margin-top: 10px; border: 2px solid #fff; background: #eaede9; } #navsupp form .button input { float: right; border: none; background: none; color: #fff; font-size: 1.8em; font-weight: bold; text-transform: uppercase; cursor: pointer; } #navsupp form .button a { float: left; margin: 10px 0 0 0; color: #fff; font-weight: bold; font-size: 1.1em; text-transform: uppercase; } #basketlink a { position: absolute; right: 35px; top: 167px; padding-right: 20px; background: transparent url(../images/site/btn-basketlink.png) no-repeat right top; font-size: 12px; line-height: 12px; color: #000; font-weight: bold; white-space: nowrap; } /* Standard Page Content */ #content-main { font-family: Arial, Helvetica, sans-serif; float: right; width: 576px; margin-right: 34px; } #content-main h1, #content-main h2, #content-main h3, #content-main h4, #content-main h5 { font-family: Arial, sans-serif; line-height: 1.3; margin-bottom: 0.5em; padding: 0 18px 0 14px; } #content-main h1 { font-size: 2.0em; padding: 0; } #checkout #content-main h1, #content-main h1 span { display: block; padding: 0 18px 0 14px; } #checkout #content-main h1, #content-main h1 span.sectitle { background: transparent url(../images/site/h1-sectitle-bg.png) no-repeat left top; margin-bottom: 3px; padding-top: 40px; color: #fff; font-size: 1.2em; } #content-main h1 span.title { background: transparent url(../images/site/h1-bg.png) no-repeat left top; padding-top: 10px; } #content-main h1 span.title small { display: block ; padding-top: 5px ; font-size: 0.7em ; font-weight: normal ; } #content-main h2 { font-size: 1.6em; } #content-main h3 { font-size: 1.5em; } #content-main h4 { font-size: 1.4em; } #content-main h5 { font-size: 1.3em; } #content-main p { font-size: 1.2em; line-height: 1.3; margin: 0 18px 1em 14px; } #content-main ul, #content-main ol { margin: 0 18px 1em 28px; font-size: 1.2em; line-height: 1.2; list-style: disc; } #content-main ol { list-style: decimal; } #content-main blockquote { font-size: 1em; line-height: 1.3; margin: 0 18px 1em 14px; font-style: italic; } #content-main ul ul, #content-main ul ol, #content-main ol ul, #content-main ol ol { font-size: 1em; margin-right: 0; } #content-main a { color: #48ac2f; font-weight: bold; } #content-main table { width: 580px; margin-bottom: 10px; } #content-main td, #content-main th { vertical-align: top; border-right: 4px solid #fff; border-bottom: 4px solid #fff; padding: 7px 10px; } #content-main th { background: #48ac2f; color: #fff; font-weight: bold; font-size: 1.2em; line-height: 1.2; } #content-main td { background: #c8cac6; color: #000; font-size: 1.2em; line-height: 1.2; } #content-main td * { font-size: 1em; } /* Page Specific: Home Page */ /* #home #promobox { margin-bottom: 7px; } #home #promotext { position: absolute; left: -9999px; top: 0; } #home .homebox { float: left; width: 188px; height: 190px; margin-right: 4px; margin-bottom: 4px; } #home #hb-monitor_arms { background: transparent url(../images/site/homebox-armsandstands-bg.png) no-repeat left top; } #home #hb-cpu_holders { background: transparent url(../images/site/homebox-cpuholders-bg.png) no-repeat left top; } #home #hb-notebook_stands { background: transparent url(../images/site/homebox-notebookstands-bg.png) no-repeat left top; } #home #hb-stations { background: transparent url(../images/site/homebox-stations-bg.png) no-repeat left top; } #home #hb-ergonomic_aids { background: transparent url(../images/site/homebox-ergonomicaids-bg.png) no-repeat left top; } #home #hb-accessories { background: transparent url(../images/site/homebox-accessories-bg.png) no-repeat left top; } #home #hb-acrylic_monitor_stands { background: transparent url(../images/site/homebox-acrylic_monitor_stands-bg.png) no-repeat left top; } #home #hb-ergonomic_furniture { background: transparent url(../images/site/homebox-ergonomic_furniture-bg.png) no-repeat left top; } #home #hb-printer_stands_and_hoods { background: transparent url(../images/site/homebox-printer_stands_and_hoods-bg.png) no-repeat left top; } #home #hb-ergonomic_seating { background: transparent url(../images/site/homebox-ergonomicseating-bg.png) no-repeat left top; } #home #content-main .homebox h2 { padding: 0; } #home .homebox h2 a { display: block; height: 83px; padding: 10px 14px; color: #fff; } #home #content-main .homebox ul { list-style: disc; font-size: 1.0em; margin-left: 27px; line-height: 1.1 ; } #home .homebox ul a { color: #000; } */ /* Home test styles */ #home #promobox { position: relative; height: 160px; margin-bottom: 7px; } #home #promotext { position: absolute; left: 0; top: 0; padding: 28px 124px 26px 230px; background: transparent url(../images/site/promo_bg.png) no-repeat left top; } #home #promotext h1 { margin-bottom: 2px;text-transform: uppercase; color: #ffffff; } #home #promotext p { margin: 0; text-align: left; font-size: 16px; color: #ffffff; } #home #promotext p.price { margin: 0; text-align: left; font-size: 45px; font-weight: bold; color: #00B02B; } #home #promotext p.price span { font-size: 10px; } #home a img { position: absolute; left: 15px; top: 15px; } #home a:hover { text-decoration: none; } #home .homebox { float: left; width: 188px; height: 190px; margin-right: 4px; margin-bottom: 4px; } #home #hb-monitor_arms { background: transparent url(../images/site/homebox-armsandstands-bg.png) no-repeat left top; } #home #hb-cpu_holders { background: transparent url(../images/site/homebox-cpuholders-bg.png) no-repeat left top; } #home #hb-notebook_stands { background: transparent url(../images/site/homebox-notebookstands-bg.png) no-repeat left top; } #home #hb-stations { background: transparent url(../images/site/homebox-stations-bg.png) no-repeat left top; } #home #hb-ergonomic_aids { background: transparent url(../images/site/homebox-ergonomicaids-bg.png) no-repeat left top; } #home #hb-accessories { background: transparent url(../images/site/homebox-accessories-bg.png) no-repeat left top; } #home #hb-acrylic_monitor_stands { background: transparent url(../images/site/homebox-acrylic_monitor_stands-bg.png) no-repeat left top; } #home #hb-ergonomic_furniture { background: transparent url(../images/site/homebox-ergonomic_furniture-bg.png) no-repeat left top; } #home #hb-printer_stands_and_hoods { background: transparent url(../images/site/homebox-printer_stands_and_hoods-bg.png) no-repeat left top; } #home #hb-ergonomic_seating { background: transparent url(../images/site/homebox-ergonomicseating-bg.png) no-repeat left top; } #home #content-main .homebox h2 { padding: 0; } #home .homebox h2 a { display: block; height: 83px; padding: 10px 14px; color: #fff; } #home #content-main .homebox ul { list-style: disc; font-size: 1.0em; margin-left: 27px; line-height: 1.1 ; } #home .homebox ul a { color: #000; } /* Page Specific: Blog Page */ #blog .blogitem { border-bottom: 2px dotted #e9ece8; margin-top: 12px; } #blog .blogpic { margin-left: 14px; margin-bottom: 12px; } #blog .date { font-style: italic; } #blog #comments { border-top: 2px dotted #e9ece8; padding-top: 12px; } #blog #comments h2 { border-bottom: 2px dotted #e8ece8; padding-bottom: 12px; } #blog .commentitem { border-bottom: 2px dotted #e9ece8; margin-bottom: 12px; } #blog #content-main .button input { padding-left: 5px; padding-right: 5px; margin-right: 0; } /* Page Specific: Links */ #content-main .linkbox { border-top: 2px dotted #e9ece8; padding-top: 12px; } /* Page Specific: Contact */ #contact #content-main .text input, #contact #content-main .select select { padding: 2px; width: 385px; } #contact #content-main .multitext textarea { padding: 0 2px; width: 385px; } #contact #content-main .button input { margin-right: 2px; } /* Page Soecific: Product Listing */ #search #content-main .item, #shop #content-main .item { position: relative; float: left; width: 187px; height: 260px; margin: 7px 7px 0 0; background: transparent url(../images/site/bg-shop-list-item-long.png) no-repeat left top; } #search #content-main .item.endline, #shop #content-main .item.endline { margin-right: 0; } #search #content-main .item h2, #shop #content-main .item h2 { height: 21px; margin: 4px 8px 0; padding: 0; font-size: 1.1em; line-height: 1.1; text-align: center; } #search #content-main .item img, #shop #content-main .item img { margin: 32px 9px 0; } #search #content-main .item .price, #shop #content-main .item .price { position: absolute; left: 25px; bottom: 9px; font-size: 0.91em; } #search #content-main .item a, #shop #content-main .item a { position: absolute; left: 0; top: 0; width: 187px; height: 260px; text-indent: -9999px; } #shop #content-main .button strong.outofstock, #shop #content-main .button strong.notavailableonline, #shop #content-main .button strong.discontinued, #shop #content-main .button strong.priceonapplication { line-height: 1.3; font-size: 15px; } /* Page Specific: Product Detail */ #shop #fullsizePreloader { position: absolute ; left: 0; top: 0; width: 1px; height: 1px; visibility: hidden; overflow: hidden; } #shop #content-main #productitem { float: left; width: 379px; margin-right: 5px; } #shop #content-main #productitem #picbox { margin-bottom: 15px; padding: 7px; background: #c8cac6; } #shop #content-main #productitem #picbox #fullsize img { margin: 0 auto; } #shop #content-main #fullsize { position: relative; } #shop #content-main #fullsize .play { position: absolute; left: 0; top: 0; width: 365px; height: 365px; background: transparent url(../images/site/play.png) no-repeat center center; text-indent: -9999px; } #shop #content-main #thumbnails { margin-top: 7px; height: 54px; } #shop #content-main #thumbnails a { position: relative; float: left; width: 54px; height: 54px; margin-right: 3px; } #shop #content-main #thumbnails a span { text-indent: -9999px; background: transparent url(../images/site/videoOverlay.png) no-repeat center center; position: absolute; left: 0; top: 0; width: 54px; height: 54px; } #shop #content-main #videoBox { display: none; } #shop #content-main #associateditems { float: left; width: 191px; margin-top: -7px; } #shop #content-main .select select { width: 212px; } #shop #content-main .button input { width: 147px; height: 35px; padding-right: 40px; padding-left: 10px; background: #48ac2f url(../images/site/btn-basket.png) no-repeat 110px 4px; text-align: left; } /* Page Specific: Basket */ #basket #content-main th#productinfo { padding-left: 15px; } #basket #content-main th#productremove, #basket #content-main th#productqty { text-align: center; } #basket #content-main th#productprice, #basket #content-main th#productsubtotal, #basket #content-main td.productprice, #basket #content-main td.productsubtotal, #checkout #content-main table td.subtotal { text-align: right; vertical-align: middle; } #basket #content-main td.producttitle, #checkout #content-main table td.producttitle { width: 200px; padding-left: 15px; font-size: 1.1em; vertical-align: middle;} #checkout #content-main table td.producttitle { width: 252px; } #basket #content-main td.producttitle a { font-size: 12px; color: #000; } #checkout #content-main table td.productimg, #basket #content-main td.productimg { width: 80px; vertical-align: middle; text-align: center; } #checkout #content-main table td.productimg img, #basket #content-main td.productimg img { width: 80px; height: auto; } #basket #content-main td.productremove { vertical-align: middle; text-align: center; } #basket #content-main td.productremove input { width: 22px; border: 2px solid #fff; background: #48ac2f; color: #fff; font-weight: bold; } #basket #content-main td.productqty input { width: 20px; border: 2px solid #fff; background: #EAEDE9; text-align: center; } #basket #content-main .button input { float: left; margin-left: 0; } #basket #content-main input#checkoutlink { position: relative; width: 153px; top: -40px; left: 410px; height: 25px; background: #48ac2f; border: 2px solid #fff; cursor: pointer; font-weight: bold; color: #fff; font-size: 1.2em; } #basket #content-main td.productqty, #checkout #content-main table td.productqty { vertical-align: middle; text-align: center; } #basket #content-main tr.baskettotals td, #checkout #content-main table tr.baskettotals td { background: #769595; color: #fff; font-weight: bold; text-align: right; } /* Checkout Styles */ #checkout #content-main h1 { font-size: 2.4em; margin-bottom: 10px; } #checkout #navsupp #productlist h4 { padding-top: 7px; background-position: left bottom; } #checkout #content-main .button { margin-bottom: 10px; } #account .button a, #checkout #forgottenpassword { float: left; font-size: 1.2em; margin-top: 9px; color: #000; } #checkout #noissueflag, #checkout #agreetc { margin-left: 0; margin-right: 5px; margin-top: 2px; } #checkout #content-main table td p { margin: 0; } #checkout #content-main table td { background: #c8cac6; } #checkout #content-main table td.totaltext, #checkout #content-main table td.delivery, #checkout #content-main table td.vatbreakdown { text-align: right; } /* Form Styles */ #content-main fieldset { margin-bottom: 15px; } #content-main .text, #content-main .multitext, #content-main .select, #content-main .checkbox, #content-main .datetime, #content-main .button { overflow: hidden; padding: 5px 15px; } #content-main .text span, #content-main .multitext span, #content-main .select span, #content-main .checkbox span, #content-main .datetime span, #content-main .button span { float: left; width: 141px; margin-left: 10px; margin-top: 4px; font-size: 1em; line-height: 1.2; } #content-main .text input, #content-main .multitext textarea, #content-main .select select, #content-main .datetime select { float: left; width: 214px; border: 1px solid #000; font-size: 1.2em; padding: 2px; font-family: Arial, Helvetica, sans-serif; line-height: 20px; background: #eee; } #content-main .select select { width: 220px; } #content-main .checkbox input { float: left; } #content-main .datetime select { width: auto; margin-right: 10px; } #content-main .multitext textarea { padding: 0 2px; width: 385px; } #content-main .button input { margin-right: 2px; } #content-main label { float: left; width: 140px; margin-right: 15px; font-size: 1.2em; line-height: 20px; font-weight: bold; font-family: Arial, sans-serif; } #content-main .checkbox label { width: auto; } #content-main .button { background: #c8cac6; padding: 15px; } #content-main .button strong { float: left; font-size: 20px; line-height: 35px; } #content-main .button input { float: right; height: 25px; margin-left: 15px; border: 2px solid #fff; background: #48ac2f; font-size: 12px; line-height: 25px; color: #fff; font-weight: bold; cursor: pointer; } #content-main .error label { color: #f00; } #content-main .text.error, #content-main .datetime.error, #content-main .select.error, #content-main .text.error, #content-main .multitext.error { margin-bottom: 10px; background-color: #fee; } #content-main .error p { border: 2px solid #f00; background: #fee; margin: 10px 0 10px 10px; padding: 10px; color: #f00; } /* Checkout Styles */ #checkout #content-main .datetime select#expmonth, #checkout #content-main .datetime select#expyear, #checkout #content-main .datetime select#startmonth, #checkout #content-main .datetime select#startyear { width: 105px; } #checkout #content-main input#checkPromotion { float: left ; height: 21px; margin: -25px 0 0 240px ; border: 2px solid #C8CAC6; padding: 0 5px 2px ; background: #48ac2f; color: #fff; font-size: 12px; line-height: 1.0; font-weight: bold; cursor: pointer;} /* Random Styles */ #commenterror { border: 2px solid #f00; background: #fee; color: #f00; padding: 20px; } .errorheader { font-weight: bold; color: #f00; } .errormsg { border: 2px solid #f00; background: #fee; color: #f00; padding-top: 10px; } #account #content-main div.error { border: 2px solid #f00; background: #fee; color: #f00; padding: 0 20px; margin-bottom: 20px; } #error { border: 2px solid #f00; background: #fee; color: #f00; padding: 10px 0 0; margin: 15px; } #content-main p.mailinglistError { border: 2px solid #f00; background: #fee; color: #f00; padding: 10px; } #content-main p.mailinglistInfo { border: 2px solid #060; background: #efe; color: #060; padding: 10px; }