@import url("master.css");

/* ----- IDS ----- */
body { background: #fff; color: #000; }
#page-wrapper { width: 996px; margin: 0 auto; }
#top-layer { position: relative; }
#search-layer { clear: both; padding: 0 8px; line-height: 30px; background: #0099cd; text-align: right; }
#main-layer { float: right; width: 800px; }
#main-content { float: left; width: 543px;}
#right-layer { float: right; width: 247px; }
#left-layer { float: left; margin: -25px 10px 0 0; width: 185px; }
#mini-basket { position: relative; margin: -7px 0 0 -7px; }
#live-chat { margin: 5px 0 10px; text-align: center; }
#best-sellers { height: 380px; background: #e7e7e7; }
#images { position: relative; width: 543px; height: 271px; margin-bottom: 5px; }
#right-door { float: left; margin-top: 1em; width: 271px; }
#testimonials { float: right; margin: 1em 10px 0; padding-bottom: 20px; width: 251px; background: url("../templateimages/test-bg-bot.gif") no-repeat bottom right; }
#home-content { clear: both; padding: 10px; background: url("../templateimages/text-bg.jpg"); }
#footer { clear: both; position: relative; padding: 0 13px; background: url("../templateimages/bottom_img.jpg") no-repeat; }
#logos { padding-top: 172px; }
#product-holder { padding: 5px; background: #e7e7e7; }
#product-left { float: left; padding: 5px; margin-right: 5px; width: 180px; background: #fff; }
#product-right { position: relative; margin-left: 195px; padding: 5px; background: #fff; }
#main-1-image, #main-2-image, #main-3-image { margin: 10px 9px 0 0; }
#main-3-image { margin-right: 0; }

/* ----- CLASSES ----- */
.basket #main-layer { float: none; width: 996px; }
.basket #main-content { width: 790px; }
.basket #right-layer { margin-top: -10px; padding: 10px; width: 165px; background: url("../templateimages/background-checkout.gif") repeat-x; color: #0099cd; }
.basket #live-chat, .basket #sagepay { float: left; margin-right: 10px; }
.basket #sagepay { margin-top: 30px; }
.basket .controls { margin-top: 20px; }

.zoom { margin: 5px 0 2px; }
.blue { color: #0099cd; }
.yellow { color: #fdbf49; }
.microbasket { position: absolute; top: 11px; right: 8px; }
.filter-box { margin-bottom: 1em; padding: 5px; background: #efefec; border: solid 1px #ccc; }
.product { margin: 1em 0; padding: 10px; background: #e7e7e7; }
.thumbnail { float: left; padding-right: 10px; }
.thumbnail .stars { padding-top: 0.75em; }
.holder { margin-left: 110px; padding: 10px; min-height: 80px; background: #fff; }
.minprice { margin-top: 1em; color: #f00; font-weight: bold; }
.minprice span { font-size: 1.3em; }
.moreinfo { float: right; margin-top: 1em; }
.addtobasket { margin-top: 1px; padding-top: 20px; border-top: 1px solid #0099cd; }
.addtobasket .submit { margin-top: -10px; }
.rrp { margin: 5px 0 20px; }
.rrp .value { text-decoration: line-through; }
.inctaxtext { font-size: 1.5em; font-weight: bold; }
.inctax .plain { font-size: 0.8em; font-weight: normal; color: #000; }
span.inctax { display: block; margin-bottom: 5px; color: #ff6600; }
input.inctax { width: 85px; height: auto; padding: 0; color: #ff6600; border: 0; font-size: 1.3em; font-weight: bold; }
.spec-holder { min-height: 285px; padding: 20px; border: 1px solid #dfe1e3; border-top: 0; }
.extrainfolinks { clear: both; margin-top: 5px; margin-bottom: 1em; background: #e7e7e7; }
.controls { float: right; }
.dark-box, .dark-box-full { margin: 10px 0; background: #e6e6dc; }
.dark-box { width: 390px; }
.dark-box .box, .dark-box-full .box, .box-left .box, .box-right .box { padding: 10px; }
.box-right .box { padding-left: 0; }
.light-box { margin: 10px 0; background: #f0f0e6; }
.light-box .box { width: 370px; padding: 10px; }
.box-left { float: left; width: 380px; }
.box-right { float: right; width: 380px; }
.telephone { position: relative; margin-top: -45px; height: 100px; }
.guarantee { position: absolute; bottom: 30px; left: 190px; }

/* ----- LISTS ----- */
#top-layer ul, #info-layer ul, #search-layer ul, #left-layer ul, #best-sellers ul, #image ul, #footer ul, #links ul, .filter-box ul, #mini-basket ul, .breadcrumbtrail ul, #extrainfo, ul.related, ul.basket-status, ul.doors { margin: 0; }
#top-layer li, #info-layer li, #search-layer li, #left-layer li, #best-sellers li, #image li, #footer li, #links li, .filter-box li, #mini-basket li, .breadcrumbtrail li, #extrainfo li, .related li, .basket-status li, ul.doors li { list-style: none; }
#top-layer ul { clear: right; margin-top: 16px; }
#top-layer li { float: left; margin-left: 2px; background: url("../templateimages/navtab_yellow_left.gif") no-repeat; }
#top-layer li:first-child { margin: 0; }
#top-layer li:hover, .home #top-layer li.home, .doors #top-layer li.doors, .automation #top-layer li.automation, .accessories #top-layer li.accessories, .installation #top-layer li.installation, .testimonials #top-layer li.testimonials, .contact #top-layer li.contact { background-image: url("../templateimages/navtab_blue_left.gif"); }
#top-layer li a { float: left; padding: 0 23px; line-height: 25px; background: url("../templateimages/navtab_yellow_right.gif") no-repeat right; color: #0099cd; text-align: center; text-decoration: none; }
#top-layer li.home a { padding: 0 28px; }
#top-layer li.automation a, #top-layer li.accessories a, #top-layer li.measure a, #top-layer li.testimonials a { padding: 0 25px; }
#top-layer li:hover a, .home #top-layer li.home a, .doors #top-layer li.doors a, .automation #top-layer li.automation a, .accessories #top-layer li.accessories a, .installation #top-layer li.installation a, .testimonials #top-layer li.testimonials a, .contact #top-layer li.contact a { background-image: url("../templateimages/navtab_blue_right.gif"); color: #fff; }

#top-layer .float-right li { margin-left: 10px; background: none; }
#top-layer .float-right li.mcafee { margin-top: 20px; }
#top-layer .float-right li a { padding: 0; line-height: auto; background: none; }

#info-layer ul { margin-left: -14px; }
#info-layer li, #search-layer li { float: left; }
#info-layer li a, #search-layer li a { padding: 0 14px; color: #fff; font-size: 1.2em; font-weight: bold; text-decoration: none; border-left: 1px solid #fff; }
#info-layer li.first a, #search-layer li.first a { border: 0; }

#search-layer ul { float: right; margin-right: -7px; }
#search-layer li { float: left; }
#search-layer li a { padding: 0 7px; text-transform: uppercase; }

#left-layer li { margin-top: 1.5em; font-size: 1.5em; color: #0099cd; font-weight: bold; }
#left-layer li li { margin-top: 1em; line-height: 20px; text-indent: 10px; font-size: 0.6em; background: url("../templateimages/background-menu-head.gif") no-repeat; color: #fff; }
#left-layer li li li { margin-top: 0; font-size: 1em; background: none; color: #0099cd; }
#left-layer li li li a:hover, #left-layer li li li a.selected { color: #fdbf49; }

#footer ul { position: absolute; top: 11px; left: 13px; }
#footer ul.brochures { left: 125px; }
#footer ul.ordering { left: 243px; }
#footer ul.garagedoors { left: 403px; }
#footer ul.garagedoors1 { margin-top: 16px; left: 568px; }
#footer ul.howto { left: 732px; }
#footer li { font-size: 0.85em; color: #ffcc33; font-weight: bold; }
#footer li a { color: #fff; text-decoration: none; font-weight: normal; }

#logos ul { position: static; text-align: center; }
#logos li { display: inline; line-height: 58px; }
#logos li img { vertical-align: middle; }

#links ul { margin-bottom: 1em; text-align: center; }
#links ul.continue { margin-top: -1em; }
#links li { display: inline; padding: 0 5px; border-right: 1px solid #0099cd; font-size: 0.85em; }
#links li.first { display: block; border: none; }
#links li.last { border: none; }

#best-sellers li { height: 70px; margin: 5px; padding: 5px 5px 5px 90px; background: #f6f6f6; }
#best-sellers li img { float: left; height: 80px; width: 80px; padding: 0 5px 5px 0; margin: -5px 0 0 -90px; background: #e7e7e7; }
#images li { position: absolute; top: 0; left: 0; list-style: none; }

#mini-basket li { position: relative; margin-left: 7px; padding: 5px 5px 5px 25px; background: #f6f5f5; }
#mini-basket li.total { padding-left: 5px; text-align: center; background: #efefec; color: #0099cd; font-weight: bold; }
#mini-basket li img { position: absolute; top: 5px; left: 5px; }
#mini-basket li.total img { position: static; }

#extrainfo li { float: left; list-style: none; }
#extrainfo li.last { float: none; height: 20px; background: none; }
#extrainfo li a { float: left; width: 136px; line-height: 20px; background: #fff; color: #0099cd; font-size: 0.8em; font-weight: bold; text-decoration: none; text-align: center; }
#extrainfo li.first a { width: 135px; }
#extrainfo li a.selected, #extrainfo li a:hover { background: #e7e7e7; }

.related li { float: left; position: relative; width: 100px; height: 80px; padding: 10px 10px 10px 70px; border-right: 1px dotted #000; border-bottom: 1px dotted #000; font-size: 0.9em; }
.related li.item3, .related li.item6 { border-right: 0; }
.related li.item4, .related li.item5, .related li.item6 { border-bottom: none; }
.related li img { position: absolute; top: 10px; left: 10px; }

.breadcrumbtrail ul { display: inline; }
.breadcrumbtrail li { display: inline; padding-right: 3px; line-height: 30px; }

.filter-box li { padding: 4px 0; border-bottom: 1px solid #ccc; }
.filter-box strong { color: #0099cd; }
.filter-box li span { padding-left: 10px; }
.filter-box li ul { margin: -16px 0 0 150px; }
.filter-box li li { display: inline; border-bottom: 0; }
.filter-box li li { padding-right: 10px; }

ul.doors { padding-top: 10px; margin-bottom: 10px; width: 543px; background: #e7e7e7; }
ul.doors li { position: relative; float: left; width: 147px; padding: 190px 10px 0; margin: 0 0 10px 10px; font-size: 0.9em; color: #000; background-color: #fff; background-position: 0 10px; background-repeat: no-repeat; }
ul.doors li.clear { float: none; padding: 0; margin: 0; background: none; }
ul.doors li a.title { position: absolute; top: 0; left: 0; padding: 0 10px 160px; line-height: 20px; font-size: 1.1em; color: #fff; text-decoration: none; font-weight: bold; z-index: 2; }
ul.doors li span { position: absolute; top: 0; left: 0; height: 20px; width: 167px; background: #0099cd; z-index: 1; }

.basket-status { float: right; margin-top: -20px; background: url("../templateimages/background-basket-status.gif") repeat-x; }
.basket-status li { float: left; width: 120px; height: 51px; color: #96968c; text-align: center; font-size: 0.9em; }
.basket-status li.a-a, .basket-status li.a-b { margin-left: -14px; }
.basket-status li.a-a { background: url("../templateimages/background-basket-status-1-a.gif") no-repeat 19px 21px; color: #323228; }
.basket-status li.a-b { background: url("../templateimages/background-basket-status-1.gif") no-repeat 19px 26px; }
.basket-status li.b { background: url("../templateimages/background-basket-status-2.gif") no-repeat 49px 26px; }
.basket-status li.b-a { background: url("../templateimages/background-basket-status-2-a.gif") no-repeat 0 21px; color: #323228; }
.basket-status li.b-b { background: url("../templateimages/background-basket-status-2-b.gif") no-repeat 0 26px; }
.basket-status li.c { background: url("../templateimages/background-basket-status-3.gif") no-repeat 49px 26px; }
.basket-status li.c-a { background: url("../templateimages/background-basket-status-3-a.gif") no-repeat 0 21px; color: #323228; }
.basket-status li.c-b { background: url("../templateimages/background-basket-status-3-b.gif") no-repeat 0 26px; }
.basket-status li.d { margin-right: -27px; background: url("../templateimages/background-basket-status-4.gif") no-repeat 50px 26px; }
.basket-status li.d-a { margin-right: -27px; background: url("../templateimages/background-basket-status-4-a.gif") no-repeat 0 21px; color: #323228; }

#main-content ul, .spec-holder ul { list-style: disc; }
#main-content ol, .spec-holder ol { list-style: decimal; }

/* ----- HEADINGS & PARAGRAPHS ----- */
h1, .h1, h2, .h2, h3, .h3 { color: #0099cd; }
h6 { font-size: 1.2em; font-weight: bold;}

#top-layer .float-left { width: 197px; }
#top-layer strong, #top-layer span, #top-layer em, .telephone strong, .telephone span, .telephone em { position: absolute; left: 290px; width: 280px; display: block; text-align: center; }
#top-layer strong, .telephone strong { top: 10px; color: #0099cd; font-size: 1.2em; }
#top-layer span, .telephone span { top: 37px; padding-left: 25px; width: 255px; background: url("../templateimages/header_telicon.gif") no-repeat 32px 0; color: #ff6600; font-size: 2em; font-weight: bold; }
#top-layer em, .telephone em { top: 60px; color: #afafaf; font-size: 1.2em; font-style: normal; }
#info-layer div { text-transform: uppercase; color: #fff; }
#info-layer span { font-size: 1.8em; }
#right-door .h2, #testimonials .h2 { font-weight: bold; }
#testimonials div { padding: 20px 0 0 60px; background: url("../templateimages/test-bg-top.gif") no-repeat; }
#best-sellers .h3 { padding: 5px 0 0; color: #000; text-align: center; }

.doors div.doors { padding: 10px; background: #e7e7e7; }

/* ----- LINKS ----- */
a { color: #004b91; }
a img { margin: 0 0 -3px; }

#top-layer .float-left a { display: block; margin: 10px 0 4px; color: #959595; font-size: 1.2em; font-weight: bold; letter-spacing: -1px; text-decoration: none; }
#live-chat a { color: #f90; text-decoration: none; }
#live-chat a strong { color: #000; }
#testimonials .h2 a { color: #666; font-weight: normal; text-decoration: none; font-style: italic; }

/* ----- IMAGES ----- */
#images { margin-top: -12px; }
#right-door img.float-right { margin: 5px 60px 0 0; }

/* ----- TABLES ----- */
table { width: 100%; margin-bottom: 1.5em; }
thead th, tfoot th { background: #616a74; line-height: 20px; color: #fff; text-align: left; font-weight: bold; }
thead th.total { background: #616a74 url("../templateimages/background-left-layer-a.gif") no-repeat right; text-align: right; }
tfoot td.quantity { text-align: right; }
th, td { padding: 5px; border-bottom: 1px solid #dfe1e3; }
td { background: #f4f5f6; }
tr.subtotals td.quantity, tr.subtotals td.total, tr.vattotals td.quantity, tr.vattotals td.total { border-bottom: 0; }
tr.subtotals td.quantity, tr.subtotals td.total, tr.totals td.quantity, tr.totals td.total { font-size: 1.3em; font-weight: bold; }
tr.subtotals td.total, tr.totals td.total { color: #ff6600; }
tr.selected td { background: #fff9d5; }
td.image { border-left: 1px solid #dfe1e3; }
td.total, td.title { border-right: 1px solid #dfe1e3; text-align: right; }
td.title { text-align: left; border-bottom: 0 }
tr.checkout td { padding: 5px 0; border: 0; background: none; }
.price_2 { text-align: right; }

#left-layer table { margin-top: 2em; }
#left-layer th, #left-layer td { background: none; border: 0; }

/* ----- FORMS ----- */
fieldset, div.inputform { margin: 0 0 0.8em 0; }
legend { color: #000; margin-left: -3px; }
label { float: left; width: 150px; line-height: 25px; font-weight: bold; }
input, textarea, select { width: 170px; padding: 0.3em 0.5em 0; height: 1.5em; }
select { width: 184px; padding: 0; height: auto; }
textarea { height: auto; }
input.image, input.submit { width: auto; height: auto; margin: 0; }
legend.h2 { text-indent: 0; background: none; }
div.label { line-height: 25px; }

.measure legend { margin-bottom: 1em; }
.measure input { width: 40px; padding: 0; margin-right: 5px; height: auto; }
.measure label { float: none; width: auto; font-weight: normal; }

.aweber { width: 226px; padding: 0 10px; background: #e7e7e7; color: #0099cc; }
.aweber legend { display: none; }
.aweber h2, #best-sellers h2 { margin: 0 -10px 1em; width: 246px; line-height: 26px; background: url("../templateimages/background-aweber.gif") no-repeat; color: #0099cc; font-size: 1em; font-weight: bold; text-align: center; }
#best-sellers h2 { margin: 0 0 1em; }
.aweber p { font-size: 0.9em; }
.aweber small { font-size: 0.9em; }
.aweber label { float: left; line-height: 2.5em; width: 50px; }
.aweber input { width: 161px; }
.aweber input[type="submit"] { width: 71px; height: 26px; text-indent: 71px; background: url("../templateimages/button-join-now.gif") no-repeat; border: 0; cursor: pointer; }

#search-layer fieldset { text-align: left; }
#search-layer legend, #search-layer label { display: none; }
#search-layer input.text { margin-top: -2px; padding: 8px 0 3px 30px; width: 301px; height: auto; border: 0; background: url("../templateimages/search_box.gif") no-repeat; }
#search-layer input.image { vertical-align: top; }
#left-layer input { width: auto; height: auto; padding: 0; }

#product-right form { font-size: 0.85em; }
#product-right label { float: none; display: block; margin: 1em 0; width: auto; line-height: 20px; text-indent: 10px; background: #f43a3a; color: #fff; }
#product-right label img { float: right; margin: 2px 10px 0 0; cursor: pointer; }
#product-right .radiooptions label { clear: none; display: inline; background: #fff; color: #000; }
#product-right select { float: right; width: auto; }

#CP_CouponCode, #numShipMethod, #quantity-add { padding: 0.1em; height: auto; }
#numCardStartMonth, #numCardStartYear, #numCardExpiryMonth, #numCardExpiryYear, #numShipMethod, #quantity-add, #strReadTerms { width: auto; }
#strReadTerms, #strMailingList { vertical-align: middle; }
#strMailingListHTML { margin-left: 28px; }
#strCustomerComments { width: 340px; margin-right: 20px; }
#C_Card_IssueNumber { width: 20px; }
#C_Card_SecurityNumber { width: 40px; }
.errors label { float: none; width: auto; }
.versions label { width: 90px ; margin-left: 20px; }
.inputform label { text-align: right; margin-right: 20px; }
.inputform input.image { margin: 0 0 20px 165px; }
#quote-form input.image { margin-left: -5px; }
.addtobasket input.image, .applycoupon input.image, .emailreminder input.image, .shippingmethodline input.image { margin: -3px 0 0 0; vertical-align: top; }
.products .addtobasket input.image { margin: -4px -6px 0 0; }
.button { float: right; }
.button input.image { margin: 36px 130px 0 0; }

.form-row { margin: 1em 0; }
.auto, .checklabel { float: none; width: auto !important; margin-right: 10px; border: 0 !important; }
.normal, .validation-passed { border: 1px solid #7f9db9; }
.disabled { color: #ACA899; border: 1px solid #C9C7BA; }
.active { border: 1px solid #529214; }
.validation-failed { border: 1px solid #d12f19; }
.validation-advice, .errors, .advice { margin: 1em 0; padding: 0.5em; background: #fbe3e4; border: 1px solid #fbc2c4; color: #d12f19; font-weight: bold; }
.advice { background-color: #dff4ff; border: 1px solid #c2e1ef; color: #336699; }
.validation-advice { width: 170px; }

.radio, .checkbox { float: none; display: inline; font-weight: normal; padding: 0.1em; height: auto; width: auto !important; }
input.link { float: none; display: inline; margin: 0; padding: 0; height: auto; width: auto; color: #004b91; border: 0; background: none; font-weight: normal; text-decoration: underline; cursor: hand; }
input.link, .quantity a { font-size: 0.8em; text-decoration: none; }
.quantity input { margin-top: -5px; }

/* ----- LIGHTBOX ----- */
#overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 90; background-color: #000; -moz-opacity: 0.8; opacity: .80; filter: alpha(opacity=80); }
#overlay[id] { /* IE6 and below Can't See This */ position: fixed; }
#lightbox { position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0; }
#lightbox a img { border: none; }
#outerImageContainer { position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer { padding: 10px; }
#loading { position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#loading img { width: 32px; height: 32px; }
#hoverNav { position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav { left: 0;}
#hoverNav a { outline: none;}
#prevLink, #nextLink{ width: 49%; height: 100%; background: transparent url("../templateimages/spacer.gif") no-repeat; /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left; }
#nextLink { right: 0; float: right; }
#prevLink:hover, #prevLink:visited:hover { background: url("../templateimages/prevlabel.gif") left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url("../templateimages/nextlabel.gif") right 15% no-repeat; }
#imageDataContainer { font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%; }
#imageData { padding: 0 10px; color: #666; }
#imageData #imageDetails { width: 70%; float: left; text-align: left; }	
#imageData #caption { font-weight: bold; }
#imageData #numberDisplay { display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose { width: 66px; float: right;  padding-bottom: 0.7em;	}