/* TOC -------------------------------------------------------------------------------------------------------- 1 - Global Reset 2 - Structural elements 3 - Heading, Typography, Links, Lists 4 - Navigation 5 - Forms & Tables 6 - Page components and widgets 7 - MPU & Advertising 8 - Buttons 9 - Global elements 10 - General Styles ---------------------------------------------------------------------------------------------------------------*/ /* 1 - Global Reset - Eric Meyer reset ---------------------------------------------------------------------------------------------------------------*/ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline} :focus {outline: 0} body {color: #000000; background: #fff; text-align:center; font: 62.5% Helvetica, Arial, sans-serif} ol, ul {list-style: none} table {border-collapse: separate; border-spacing: 0} caption, th, td {text-align: left;font-weight: normal} blockquote:before, blockquote:after, q:before, q:after {content: ""} blockquote, q {quotes: "" ""} /* 2 - Structural elements ---------------------------------------------------------------------------------------------------------------*/ #site-wrapper {width:994px; text-align:left; font-size:1.0em; margin:0 auto 10px auto; color:#0079BD; height:700px; /*background-color:#00FF33*/} #content-wrapper {background:url(../img/content-bg.jpg) transparent 0 0 repeat-x; font-size:1.2em; margin-bottom:30px} #header {width:994px; padding:93px 0 0 0; height:0px !important; height /**/:93px; background:url(../img/jg-logo.jpg) transparent 0 0 no-repeat; margin-bottom:0} #header h1, #header p, .hide {position:absolute; left:-9999px; top:-9999px; height:1px; font-size:1; line-height:0; overflow:hidden} #secondary-content {width:194px; float:left; border-right:solid 2px #fff; float:left; display:inline} #primary-content {width:798px; float:right; /*background-color:#000000;*/ display:inline; position:relative} #content {padding-top:5px;margin-left:10px;/* float:left; width:798px; position:relative; background-color:red*/} .hasnav #content {width:670px;} .hasgallery #content {width:613px; float:right} #extra-content {text-align:right} /* 3 - Heading, Typography, Links, Lists ---------------------------------------------------------------------------------------------------------------*/ /** Headings **/ .head {clear:both; font-size:1.0em; border-bottom:solid 2px #fff; padding:5px 0 5px 15px; width:683px; border-right:solid 2px #fff} /** Paragraphs **/ p {line-height:1.5em; margin-bottom:20px} p.last {margin-bottom:0; padding-bottom:0px} /** Links **/ a{color:#0079BD; text-decoration:none} a:hover{color:#ooo; text-decoration:underline} #content a {font-weight:bold} /* 4 - Navigation ---------------------------------------------------------------------------------------------------------------*/ /*#secondary-content {border-right:solid 2px #fff; width:194px} * html #secondary-content {width:196px}*/ #secondary-content .primary-nav {} #secondary-content .primary-nav li {border-bottom:solid 2px #fff; text-align:center; padding:5px 0; color:#000; font-weight:bold} #secondary-content .primary-nav a {font-weight:normal} #secondary-nav {font-size:1.2em; overflow:hidden; width:100%; background-color:#e4ad2e; border-top:solid 4px #fff; border-bottom:solid 4px #fff} #secondary-nav #menubox {width:194px; float:left; text-align:center; color:#fff; margin-bottom:0; min-height:30px; _height:30px; padding-top:10px} #secondary-nav #nonavcontent {border-left:solid 2px #fff; float:left; margin-bottom:0; color:#FFE4BD; min-height:30px; _height:30px; padding:10px 0 0 15px} #secondary-nav ul {float:left} #secondary-nav ul li {float:left; text-align:center; width:98px; color:#FFE4BD!important; background-color:#e4ad2e; border-left:solid 2px #fff;line-height:1.5em;min-height:30px; _height:30px; padding-top:10px; color:#000 } #secondary-nav ul li #last-snav {width:100px} #secondary-nav ul li a {color:#fff} #secondary-nav ul li a span {display:block} #extra-content .primary-nav {float:right; } #extra-content .primary-nav li {float:left; text-transform:uppercase; padding-right:5px; margin-right:5px; color:#0079BD; border-right:solid 1px #0079BD} #internal-nav {float:right; width:98px; border-left:solid 2px #fff} #internal-nav li {width:98px; text-align:center; padding:10px 0; background-color:#e4ad2e; border-bottom:solid 2px #fff; float:left; color:#000} #internal-nav li span {display:block; } #internal-nav li a {color:#fff} #internal-nav .active {background-color:#FFE4BD; color:#e4ad2e} #sectional-nav {position:absolute; top:-6px; /*right:-18px; _right:-4px*/right:-2px} #sectional-nav ul {float:right; border:solid 2px #fff; border-left:none} #sectional-nav li {font-size:0.8em; float:left; text-transform:uppercase; background-color:#e4ad2e; border-left:solid 2px #fff; float:left; color:#000} #sectional-nav li span {background-color:#f7e7c2; color:#e4ad2e; padding:3px 10px; float:left} #sectional-nav a {color:#fff; padding:3px 10px; float:left} #sectional-nav a:hover { } #banners {} #banners li {margin-bottom:10px; width:194px; height:136px; overflow:hidden} #banners a {width:194px; height:136px; overflow:hidden} /* 5 - Forms and Tables ---------------------------------------------------------------------------------------------------------------*/ /* form elements */ input, textarea, select {border:solid 1px #0079BD} .row {margin-bottom:5px} /* Survey request form */ #survey-brochure-request {width:252px} #survey-brochure-request label {width:60px; float:left; text-align:left; margin-right:10px} #survey-brochure-request input {width:170px; float:left; background-color:#E7E8E9; padding-top:3px} #survey-brochure-request input {min-height:17px; _height:17px} .hiddenlabel {margin-left:70px} .formsubmit {background-color:#0079BD !important; color:#fff !important; margin-top:10px; float:right !important; padding-top:0 !Important} /* Error handling */ #rsvErrors {display:none; position:absolute; left:300px; padding-bottom:5px; border:solid 1px #5d0101; background-color:#FFDFE5; margin-bottom:10px; width:250px} #rsvErrors h2 {margin:10px; padding:5px 0; border-bottom:solid 1px #5d0101; width:230px; font-size:1em; color:#000; font-weight:bold} #email-errorlist {margin-left:10px; width:230px} #email-errorlist li {font-weight:bold; color:#FF0000; margin-bottom:5px} .formsubmit {width:auto !important; background-color:#fff; color:#ff6600; font-weight:bold; height:auto !important} .formsubmit:hover {cursor:pointer} label.errorfield {color:#FF0000; font-weight:bold} input.errorfield {border:solid 1px red} .requiredsymbol {display:none} /* 6 - Page components and widgets ---------------------------------------------------------------------------------------------------------------*/ /* Item glossary */ #item-glossary li {border-bottom:solid 2px #0079BD; position:relative; padding-bottom:10px; min-height:120px; _height:120px} #item-glossary dt {font-size:1.1em; margin-bottom:10px; padding-top:10px} #item-glossary dd {font-size:0.92em} #item-glossary .desc {width:500px} #item-glossary .partno {padding-top:10px} #item-glossary .price {padding-top:10px} #item-glossary .buynow {padding:10px 0} #item-glossary .buynow * {border:none} #item-glossary .supp {position:absolute; bottom:-1px; right:0; width:120px; height:120px; border:solid 1px#0079BD} #item-glossary .clicktoview {position:absolute; bottom:45px; right:125px; width:7px; height:70px} #spares #secondary-nav li {line-height:0.9em} /* Door range pages */ #door-gallery #secondary-nav li {width:155px} #door-gallery #secondary-nav #last-doors {width:170px} #door-gallery .head-wrapper {width:612px; min-height:43px; _height:43px; padding-left:15px; border-bottom:solid 2px #fff; padding-top:5px} #door-gallery .head-wrapper img {float:left; border:solid 2px #8da3d3; margin-top:-3px} #door-gallery .head-wrapper h3, #door-gallery .head-wrapper p {margin-left:120px; margin-bottom:0} #door-gallery .head-wrapper p {font-size:0.83em; _font-size:0.91em} #door-thumbs {width:140px; padding-left:30px; min-height:200px; _height:200px; float:right; border-left:solid 2px #fff; position:relative; top:-50px; padding-top:10px} #door-thumbs h2 {font-size:0.9em; margin:0 0 10px 5px} #door-thumbs ul {width:122px; overflow:visible; margin-bottom:20px} #door-thumbs li {float:left; margin:0 10px 10px 0; width:51px; height:50px; overflow:hidden} #colours {position:absolute; left:0; top:190px} .withdesc li {height:76px !important} .sample {position:absolute; top:170px; left:650px} .roller {position:absolute; left:5px} #doorlist dl {font-size:0.9em} #doorlist dl dt {float:left; width:100px; clear:left} #doorlist dl dd {float:left; width: 150px} #doorlist ul {clear:left; padding-top:10px; margin-bottom:20px} #doorlist li ul li {float:left; margin-right:10px} .sectional {position:relative} .sectional h3 {margin-bottom:10px; padding-top:10px; font-weight:bold} .sectional h4 {font-weight:bold; margin-bottom:0; font-size:1.1em} .sectional p {margin-bottom:10px} .section-panel {padding-right:130px; position:relative} .section-panel img {position:absolute; top:0; right:0} #doorrange-nav {} .hidden {display:none} .active {display:block !important} /* Automation */ #automation-online #content {padding-top:15px} .automation-largebox {position:relative} .automation-largebox img {float:left; border:solid 1px #8a9dc4} .automation-largebox h2 {font-size:1.1em; font-weight:bold; margin-bottom:10px} .automation-largebox h3 {font-size:0.9em; font-weight:bold; margin-bottom:0} .automation-largebox h2, .automation-largebox h3 {width:400px} .automation-largebox p, .automation-largebox h2, .automation-largebox h3 {margin-left:170px} .automation-largebox .buynowbutton {position:absolute; top:0; left:520px} .automation-smallbox-wrapper h2 {font-size:1.1em; font-weight:bold; margin-bottom:5px} .automation-smallbox {float:left; width:240px; margin-right:10px} .automation-smallbox img {float:left} .automation-smallbox h3 {font-size:1.1em; font-weight:bold; margin-bottom:0} .automation-smallbox h2, .automation-smallbox h3 {} .automation-smallbox p, .automation-smallbox h2, .automation-smallbox h3 {margin-left:92px} .automation-smallbox p {margin-bottom:5px} .buynowbutton {background-color:#0079BD !important; color:#fff !important; padding:3px !Important; font-size:0.9em} .autointro {margin-bottom:10px} /* 10 - General Styles ---------------------------------------------------------------------------------------------------------------*/ /* Clearing Styles */ .clearleft{clear:left} .clearright{clear:right} .clearboth{clear:both} /* CSS clearing */ .clearing:after, .row:after {content: "."; display:block; height: 0; clear: both; visibility: hidden} .clearing, .row {display: inline-block} /* Hides from IE-mac \*/ * html .clearing, * html .row {height: 1%} .clearing, .row {display: block} /* End hide from IE-mac */ /* Floats */ .fright {float:right} .fleft {float:left} .center {text-align:center} /* Skip link */ #skiplink {position:absolute; left:-9999px; top:-9999px; height:1px; font-size:1; line-height:0; overflow:hidden} /* Extend default margins */ .reduce-margin-s {margin-top:-11px !important; border-top:none !important} .reduce-margin-ss {margin-top:-5px !important} .extend-margin-none {margin-bottom:0px !important} .extend-margin-ss {margin-bottom:5px !important} .extend-margin-s {margin-bottom:10px !important} .extend-margin-m {margin-bottom:15px !important} .extend-margin-l {margin-bottom:20px !important} .extend-margin-xl {margin-bottom:25px !important} .extend-margin-xxl {margin-bottom:40px !important} /* remove spacing from last column item */ .lastcol {margin-right:0 !important; padding-right:0 !important; border-right:none !important; background:none !important} .lastitem {margin-bottom:0 !important; padding-bottom:0 !important; border-bottom:none !important; background:none !important} li.lastitem {position:relative} .firstitem {margin-left:0 !important} #pdfbutton {float:right; font-size:0.8em; background-color:#e4ad2e; color:#fff; margin-right:30px; padding:1px 5px} #contact .l {width:425px; float:left; margin-right:20px}