body { padding: 0; margin: 0; font-size: 62.5%; color: #35285e; font-family:Arial, Helvetica, sans-serif; } /* Basic Reset -------------------------------------------------------*/ * { margin: 0; padding: 0; } h1, h2, h3, h4, h5, h6, p { font-size: 1.1em; font-weight: normal; } ul { list-style-type: none; } ul li, dl dt, dl dd, ol li { font-size: 1.1em; } h1 { } h2 { background-color: #346A96; text-transform:uppercase; font-weight: bold; color: #fff; padding: 0.5em 16px; font-size: 1.2em; letter-spacing:0px; } table { font-size: 1.1em; margin: 0; padding: 0; } table th { font-weight: normal; margin: 0;} /* Basic Link Behaviour -------------------------------------------------------*/ a { text-decoration: none; color: #1D326B; font-weight: bold; } a:hover { text-decoration: underline; } #primary-content a, #sub-content a, #login-right a, body.popup a { color:#024927; font-weight: bold;} /* Content & sub content link color */ #main-wrapper { width: 100%; } /* Header -------------------------------------------------------*/ #header { display: block; padding: 80px 0 5px 0; position: relative; } #header.logged-in { padding: 33px 0 5px 0; } #header h1 { background-image: url(../img/layout/logo.gif); width:163px; height:45px; text-indent: -9000px;position: absolute; top: 20px; left: 20px; } #header.logged-in h1 { background-image: url(../img/layout/extranet-logo.jpg); width:159px; height:45px; text-indent: -9000px;position: absolute; top: 20px; left: 20px; } /* Login -------------------------------------------------------*/ #header fieldset { width: 400px; position: absolute; right: 10px; top: 0; margin: 0; padding: 0; border: 0; } #header fieldset legend { text-indent: -9000px;} #login-left { position: absolute; top: 10px; left: 0;} #login-left.error { top: 0; left: 0;} #login-left.error input.login-button { margin-top: 14px } p#login-error { color: red; } #login-left label { display: block; font-size: 1.1em; clear: both; margin-bottom: 3px; } #login-left label span { width: 100px; display: block; float: left; padding-top: 2px; } #login-left label.login input { border: 1px solid #4FADC9; width: 65px; font-size: 1em; background-color: #ECF1F6; } #login-left label.checkbox { color: #4FADC9; padding-top: 0; } #login-left label.checkboxinput { margin-right: 5px; } #login-left input.login-button { border: none; background-color: #fff; text-transform:uppercase; color: #1D326B; font-size: 1em; position: absolute; font-weight: bold; top: 12px; left: 170px;} #login-left>input.login-button { } #login-right { float: right; width: 125px; } #login-right * { padding: 0; margin: 0;} #login-right h2 { background: none; color: #271c54; font-weight: bold; text-transform:none; font-size: 1.1em;} #login-right ul { } #login-right ul li { margin-left: -0px; } #login-right ul>li { margin-left: 0; } /* Logged In Bar -------------------------------------------------------*/ #logged-in { display: block; margin: 0 0 28px 0; padding-left: 184px; } #logged-in #logged-in-msg { background: #CDDAE4; display: block; line-height: 1.5em; } #logged-in h2 { padding: 2px 10px; background: #4EAAC8;width: 180px; float: left; } #logged-in p { float: left; font-weight: bold; padding: 2px 10px; height: 100%; } #logged-in ul { float: right; border-right: 10px solid #fff; } #logged-in ul li { float: left; display: block; width: 80px; text-align: center;} #logged-in ul li a { display: block; width: auto; height: 100%; padding: 2px 10px; border-left: 1px solid #4EAAC8; color:#4EAAC8; font-size: 1.1em; } /* Primary Navigation -------------------------------------------------------*/ #nav-primary {position:relative; list-style-type:none; font-size:0.9em; margin:0 0 0 20px; padding:0; font-weight: normal; } #nav-primary li {float:left; background: #004b27 url(../img/layout/primary-nav-inactive.gif) no-repeat 0% 0%} #nav-primary li a {float:left; display:block; padding:3px 5px 4px 10px; text-decoration:none; color:#fff} #nav-primary li a:hover {text-decoration:underline;} /* First & Last Links */ #nav-primary #home {background-image:none; padding-left:9px} #nav-primary #home a {padding-left:0} /* use this id if home is active tab */ #nav-primary #home-active-tab {background: #291a53; padding-left:9px} #nav-primary #home-active-tab a {padding-left:0} /* active tab properties - use id's to set the active tabs to make js simpler */ #nav-primary #active-tab { background: #291a53 url(../img/layout/primary-nav-current.gif) no-repeat 0% 0%; } #nav-primary #active-tab.active-neighbour { background: #291a53 url(../img/layout/primary-nav-active-hover.gif) no-repeat 0% 0%; } /* active tab neighbour properties - use id's to set the active neighbour tabs to make js simpler*/ #nav-primary #active-tab-neighbour { background: #004b27 url(../img/layout/primary-nav-active.gif) no-repeat 0% 0%;} #nav-primary #active-tab-neighbour.active { background: #291a53 url(../img/layout/primary-nav-active-hover.gif) no-repeat 0% 0%;} /* Different tab states for rollvers - uses classes for rollover states */ #nav-primary .highlight, #nav-primary .active { background: #291a53 url(../img/layout/primary-nav-current.gif) no-repeat 0% 0%; } #nav-primary .first-highlight { background-image:none; background-color:#346A96; } #nav-primary .highlight-post, #nav-primary .active-neighbour { background: #004b27 url(../img/layout/primary-nav-active.gif) no-repeat 0% 0%;} #nav-primary .highlight-active, #nav-primary .highlight-active-left { background: #346A96 url(../img/layout/primary-nav-active-hover.gif) no-repeat 0% 0%; } /* End Tab properties */ /* set background to #fff to make flicker less obvious */ #nav-primary #end-tab {float:left; width:20px; background-color:#fff; padding:3px 0; background-image:url(../img/layout/primary-nav-end.gif);} /* End Tab active state properties */ #nav-primary #end-tab.active, #nav-primary #active-tab #end-tab { background-image:url(../img/layout/primary-nav-end-active.gif); } /* Index Page --------------------------------------*/ #content { width: 100%; display: block; } #content #index-top h2 { background: #91c5ae url(../img/layout/index-bg-top.jpg) no-repeat top left; text-indent: -9000px; padding: 0; margin: 0; height: 114px; border-top: 1px solid #000; border-bottom: 1px solid #000; } #content #index-bottom { background-color: #ddf7ec; background-image: url(../img/layout/index-bottom-gradient.jpg); background-repeat:repeat-x; min-height:300px; } #content #index-bottom #arrow { background-image: url(../img/layout/index-bottom-arrow.jpg); background-repeat: no-repeat; background-position: top left; padding-bottom: 50px; min-height:300px; } body.index-page #content #index-bottom p.intro, body.index-page #content #index-bottom #boxes { float: left; display: block; width: auto; color:#2b1955;} body.index-page #content #index-bottom p.intro { width: 200px; float: left; margin: 20px 30px 0 20px; line-height: 1.7; } body.index-page #content #index-bottom #boxes { width: 478px; background-image:url(../img/layout/index-boxes-bg.jpg); background-repeat:repeat-y; margin-top: 20px; } #index-bottom #boxes #box-top, #index-bottom #boxes #box-bottom { padding: 0; line-height: 0; font-size: 0px; background-repeat:no-repeat; display: block; } #index-bottom #boxes #box-top { background-image: url(../img/layout/index-box-top.gif); height: 18px; } #index-bottom #boxes #box-bottom { background-image: url(../img/layout/index-boxes-bottom.jpg); height: 7px; } #index-bottom #boxes #box1, #index-bottom #boxes #box2 { float: left; padding-bottom: 10px; color: #5e537e; width: 225px; padding-left: 10px; voice-family: "\"}\""; voice-family:inherit; width: 210px; } #index-bottom #boxes #box2 { margin-left: 25px; } #index-bottom #boxes h3 { color: #2a1b54; font-size: 1.2em; font-weight: bold; text-transform: uppercase; margin-bottom: 5px; } #index-bottom #boxes a { color: #004c28; display: block; margin-top: 5px; font-size:1.4em; } /* Extranet Index Page --------------------------------------*/ body.index-page #content #index-bottom #boxes.three-boxes { float: left; display: block; width: auto; margin-left: 20px;} body.index-page #content #index-bottom #boxes.three-boxes { width: 724px; background-image:url(../img/layout/extranet-home-box-bg.gif); background-repeat:repeat-y; margin-top: 20px; } #index-bottom #boxes.three-boxes #box-top, #index-bottom #boxes #box-bottom { padding: 0; line-height: 0; font-size: 0px; background-repeat:no-repeat; display: block; } #index-bottom #boxes.three-boxes #box-top { background-image:url(../img/layout/extranet-home-box-top.gif); height: 18px; } #index-bottom #boxes.three-boxes #box-bottom { background-image:url(../img/layout/extranet-home-box-bottom.gif); height: 5px; } #box1-extranet, #box2-extranet, #box3-extranet { float: left; padding-bottom: 10px; color: #1D326B; width: 225px; padding-left: 10px; voice-family: "\"}\""; voice-family:inherit; width: 210px; } #box2-extranet { margin-left: 20px; voice-family: "\"}\""; voice-family:inherit; margin-left: 25px;} #box3-extranet { margin-left: 20px; voice-family: "\"}\""; voice-family:inherit; margin-left: 25px; } #index-bottom #boxes.three-boxes h3 { color: #1D326B font-size: 1.2em; font-weight: bold; text-transform: uppercase; margin-bottom: 5px; } #index-bottom #boxes.three-boxes a { color:#4EAAC8; display: block; margin-top: 5px; } #boxes.three-boxes table { width: 98%; margin: 10px 0; } #boxes.three-boxes table th, #boxes.three-boxes table td { text-align: left; } #boxes.three-boxes ul.arrowlinks { } #boxes.three-boxes ul.arrowlinks li { padding: 0 0 0 20px; background: #fff url(../img/layout/sub-content-arrow.gif) no-repeat top left; } #boxes.three-boxes ul.arrowlinks li a { color: #4EAAC8; } #boxes.three-boxes ul.blue-bullet li { padding: 0 0 0 10px; font-size: 1.1em;} /* Top Level 2 column layout -------------------------------------------------------*/ #page-wrapper { background: #F5F7F9 url(../img/layout/content-bg.gif) repeat-y top left; width: 100%; float: left; } /* Secondary Navigation -------------------------------------------------------*/ #secondary-nav { width: 138px; border-top: 7px solid #1b6446; float: left; } /* Sub Navigation */ #secondary-nav ul li { width: 100%; float: left; clear: left; } #secondary-nav ul li.active { background-color: #EEF1F4; } #secondary-nav ul li a { padding: 5px 5px 5px 20px; border-bottom: 1px solid #CDDAE4; display:block; font-weight: normal; margin:0; color:#004b2a; } #secondary-nav ul li a:hover { background-color: #EEF1F4; display: block; text-decoration: none; } #secondary-nav ul li ul { background: #fff; font-size: 0.9em; } #secondary-nav ul li ul li { background-color: #fff; } #secondary-nav ul li ul li a { border-bottom: none; padding: 3px 5px 3px 20px; } #secondary-nav ul li ul li a:hover, #secondary-nav ul li ul li.current { background-image: url(../img/layout/secondary-nav-bullet.gif); background-position: 5px 50%; background-repeat: no-repeat; background-color: #fff; } #secondary-nav ul li ul li.last a { border-bottom: 1px solid #CDDAE4; } #page-col-2 { margin-left: 139px; } #page-col-2 h2 {background: url(../img/layout/2-col-bg-top.jpg) repeat-y top left;} #content-body { padding-bottom:100px; } #content-body h3 { font-weight: bold; margin-bottom: 10px; border: green; } #content-body.with-subcontent { background: #F5F7F9 url(../img/layout/sub-content-bg.gif) repeat-y right; } /* Nested Liquid 2 column layout -------------------------------------------------------*/ #content-wrapper { width: 100%; float: left; margin-right: -240px; display: block; } #primary-content { margin-right: 240px; } #primary-content.one-col { margin-right: 0px; } #primary-content * { margin: 10px 16px; } #primary-content * * { margin: 0; } #sub-content { width: 218px; float: right; padding-top: 10px; } #sub-content * { margin: 0 10px; } #sub-content * * { margin: 0; } /* Primary Content -------------------------------------------------------*/ #content-body ul li, body.popup ul li, #boxes ul.blue-bullet li { background-repeat: no-repeat; background-position: 0 4px; padding: 0 0 1px 10px; margin-left: 0; } #content-body ul.blue-bullet li, body.popup ul.blue-bullet li, #boxes ul.blue-bullet li { background-image: url(../img/layout/bullet-blue.gif); } #content-body ul.blue-bullet li ul.blue-bullet li, #boxes ul.blue-bullet li { font-size: 1em; } #content-body ul.no-bullet li, #boxes ul.blue-bullet li { padding: 0; } #content-body ul.useful-links img { margin-bottom: 10px; } #content-body ul.useful-links p { margin-bottom: 15px; } ul#jobs li { border-top: 1px solid #CDDAE4; } ul#jobs li.last { border-bottom: 1px solid #CDDAE4; } #content-body ol { margin: 0; padding: 0; } #content-body ol li { margin-left: 38px; } #primary-content>ol li { margin-left: 33px; } #primary-content h3 { font-size: 1.6em; font-weight: bold; } #primary-content h4 { font-weight: bold; } /* Results Table --------------------------------------*/ table.results { /*background-color: #CDDAE4;*/ } table.results th { background: #B2C4D2; font-weight: bold; text-align: left; } /* Distribution update table --------------------------------------*/ table.horizontal th, table.horizontal td { text-align: left; vertical-align: top;} table.horizontal th { font-weight: bold; width: 50%; } /* 3 Column Page --------------------------------------*/ #content-body #intro { margin: 16px; } #content-body #intro img { float: left; margin: 0 10px 20px 0; } #content-body #intro p { margin-bottom: 10px; } #content-body #cols-3 { margin: 16px 16px 0 16px; display: block; background-image: url(../img/layout/3-col-bg.gif); background-repeat:repeat-y; width: 580px; padding-bottom: 15px;} #content-body #cols-3.cols-2 { background-image: url(../img/layout/2-col-bg.gif) } #content-body #cols-3 p { padding: 10px 5px 0 5px; } #content-body #cols-3 #col-1, #content-body #cols-3 #col-2, #content-body #cols-3 #col-3 { width: 190px; float: left; } #content-body #cols-3 #col-2, #content-body #cols-3 #col-3 { margin-left: 5px; } #content-body #cols-3 ul { padding: 10px 0; background-color:#d7e1ea;} #content-body #cols-3 ul li { padding-left: 5px; } #content-body #cols-3 h3 { border-top: 5px solid #fff; margin: 0; padding: 5px; display: block; background-color: #becedb; color: #fff; text-transform:uppercase; font-weight: bold; font-size: 1.2em; letter-spacing:2px; height: 2.6em; } #content-body #cols-3 h3 a { color: #fff; } #content-body #cols-3 h3.top { border-top: 0; } #content-body #cols-3 h3.both { border-top: 5px solid #fff; border-bottom: 5px solid #fff; } #content-body #cols-3 h3 span { display: block; width: 40%; } /* 2 Column Page --------------------------------------*/ #content-body #cols-2 { margin: 16px 16px 0 16px; display: block; background-image: url(../img/layout/2-col-bg.gif); background-repeat:repeat-y; width: 580px; padding-bottom: 15px;} #content-body #cols-2.cols-2 { background-image: url(../img/layout/2-col-bg.gif) } #content-body #cols-2 p { padding: 10px 5px 0 5px; } #content-body #cols-2 #col-1, #content-body #cols-2 #col-2, #content-body #cols-2 #col-3 { width: 190px; float: left; } #content-body #cols-2 #col-2 { margin-left: 5px; } #content-body #cols-2 ul { padding: 10px 0; background-color:#d7e1ea;} #content-body #cols-2 ul li { padding-left: 5px; } #content-body #cols-2 h3 { border-top: 5px solid #fff; margin: 0; padding: 5px; display: block; background-color: #becedb; color: #fff; text-transform:uppercase; font-weight: bold; font-size: 1.2em; letter-spacing:2px; height: 2.6em; } #content-body #cols-2 h3 a { color: #fff; } #content-body #cols-2 h3.top { border-top: 0; } #content-body #cols-2 h3.both { border-top: 5px solid #fff; border-bottom: 5px solid #fff; } #content-body #cols-2 h3 span { display: block; width: 40%; } /* Forms --------------------------------------*/ #errors *, p#errors { color: #CC3300; } #errors ul li { background-image: url(../img/layout/bullet-error.gif); } #content-body fieldset { border: 0; margin: 0; padding: 0; } #content-body fieldset legend { position: relative; left: -10px; font-size: 1.6em; font-weight: bold; padding: 0; color: #1D326B; } #content-body fieldset>legend { margin-left: 0; left: 0; } #content-body form ul.qs { width: 100%;} #content-body form ul.qs li { border-bottom: 1px solid #CDDAE4; clear: both; padding: 10px 0 !important;margin: 0 !important;} #content-body form ul.qs li:hover {background-color: #EEF1F4; } #content-body form ul.qs li label { display: block; position: relative; } #content-body form ul.qs li label span { display: block; width: 40%; float:left; font-weight: bold; margin-right: 4%;} #content-body form ul.qs li label span.currency { width: auto; margin-right: 5px; } #content-body form ul.qs li label span span { color: #CC3300; width: auto; } #content-body form ul.qs li label input { float: left; } #content-body form ul.qs li p { clear: both; font-size: 1em; padding-top: 10px;} #content-body form p { padding: 10px 0; } .submit-btn { padding-top: 10px; display: block;} .submit-btn input { float: right; } #progress-buttons { padding-top: 10px; display: block; } #progress-buttons #back { float: left; } #progress-buttons #continue { float: right; } /* Definition Lists -----------------------------------------------------*/ dl.summary *, dl.press *, dl.jobs * { margin: 0; padding: 0; } dl.summary dt { float: left; width: 44%; padding: 5px 0; } dl.summary dd { width: 52%; float: left; padding: 5px 0; } dl.press dt { float: left; width: 20%; padding: 5px 0; } dl.press dd { width: 52%; float: left; padding: 5px 0; } dl.jobs dt { float: left; width:44%; padding: 4px 0; } dl.jobs dd { width: 52%; float: left; padding: 4px 0; } /* Traffic Lights --------------------------------------*/ #content-body ul#traffic-bullets li { padding-left: 15px; } #content-body ul#traffic-bullets li.green { background-image: url(../img/layout/traffic-bullet-green.gif); } #content-body ul#traffic-bullets li.amber { background-image: url(../img/layout/traffic-bullet-amber.gif); } #content-body ul#traffic-bullets li.red { background-image: url(../img/layout/traffic-bullet-red.gif); } #traffic-lights ul { width: auto; } #traffic-lights ul li { border-left: 1px solid #CDDAE4; border-top: 1px solid #CDDAE4; float: left; padding: 10px; margin: 0; text-align: center; width: 5.5em;} #traffic-lights ul li.last { border-right: 1px solid #ccc; } #traffic-lights div.week-holder2 { margin-bottom: 10px; } #traffic-lights div.week-holder2 ul li { border-bottom: 1px solid #CDDAE4; } #traffic-lights ul li dl dd, #traffic-lights ul li dl dt { text-align: center; padding: 0; font-size: 1em;} #traffic-lights ul li dl>dd { margin: 0 auto; } #traffic-lights ul li dl>dt { margin: 0 auto; } #traffic-lights ul li dl dd { text-indent: -9000px; } #traffic-lights ul li dl dd.green, #extranet-home-lights dd.green { background-image: url(../img/layout/traffic-light-green.gif); width: 17px; height: 30px; } #traffic-lights ul li dl dd.amber, #extranet-home-lights dd.amber { background-image: url(../img/layout/traffic-light-amber.gif); width: 17px; height: 30px;} #traffic-lights ul li dl dd.red, #extranet-home-lights dd.red { background-image: url(../img/layout/traffic-light-red.gif); width: 17px; height: 30px; } #extranet-home-lights { padding: 10px 0; } #extranet-home-lights ul li { float: left; margin: 0 7px 0 0; } #extranet-home-lights ul li dl dd, #extranet-home-lights ul li dl dt { text-align: center; padding: 0; font-size: 1em;} #extranet-home-lights ul li dl>dd { margin: 0 auto; text-align: center; } #extranet-home-lights ul li dl>dt { margin: 0 auto; text-align: center; } #extranet-home-lights dd.amber, #extranet-home-lights dd.red, #extranet-home-lights dd.green { text-indent: -9000px; } /* Sub Content -------------------------------------------------------*/ #sub-content h3, #sub-content h4 { margin: 10px; } #sub-content h3.first { margin-top: 0; } #sub-content p { padding: 5px 0; } td, th { background-color: #CDDAE4; padding: 3px; } table tr.no-bg th, table tr.no-bg td { background: none; } table tr.row th { text-align: left; } table tr.row td { text-align: right; vertical-align:top; } #sub-content ul.arrowlinks{ margin: 16px 10px; } #sub-content ul.top { margin: 0 10px 16px 10px; } #sub-content ul.arrowlinks li { background: #F5F7F9 url(../img/layout/sub-content-arrow.gif) no-repeat top left; padding-left: 25px; margin-bottom: 15px; } #sub-content div.profile img { float: left; margin-right: 10px; } #sub-content div.profile dl { padding-top: 5em; } #sub-content div.profile dl dt, #sub-content div.profile dl dt { padding: 0; margin: 0; } /* Footer -------------------------------------------------------*/ #footer { background: #fff url(../img/layout/footer-bg.jpg) repeat-x top left; border-top: 1px solid #000; height: 46px; clear:both; } #footer ul { margin-top: 12px; margin-left: 10px; } #footer ul li { float: left; line-height: 3em; color:#291c54; } #footer ul li a { padding: 0 10px; border-right: 1px solid #1D326B; font-weight: normal; vertical-align: middle; color:#291c54;} #footer ul li a.last { border-right: none; } /* Terms & Conditions / Privacy Policy -------------------------------------------------------*/ body.popup { background:#f6f7f9; padding: 20px; color:#35285e; } body.popup h1, body.popup h2, body.popup h3 { font-weight: bold; background:#f6f7f9; color: #1D326B; } body.popup h1 { font-size: 1.6em; } body.popup h2 { font-size: 1.6em; } body.popup ol li h2 {font-size: 1em; } body.popup h2 { text-transform:none; padding-left: 0; letter-spacing:normal; } body.popup h2, body.popup h3 { padding: 5px 0;} body.popup ol { margin-left: 20px; padding: 0;} body.popup ol li { padding-left: 0; } /* Clearing -------------------------------------------------------*/ .clearing:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;} .clearing {display: inline-table;} /* Hides from IE-mac \*/ * html .clearing {height: 1%;} .clearing {display: block;} /* End hide from IE-mac */ .clear { clear: both; line-height: 0px; font-size: 1px; display: block; border: 1px solid red; } /* The following rules are IE7 fixes, and add to rules defined above. */ #box-bottom { width: 100%; clear: both; height: 1px; float: none; } #nav-primary { clear: both; width: 90%; } #cols-3 { float: none; clear: both; } #primary-content { margin-bottom: 50px; } /* http://www.menziesdistribution.com/cgi/public/about-what-we-do-charter.cgi */ #content-body { height: 100%; } /* https://www.i-menzies.com/cgi/public/retailers-online-index.cgi */ #extranet-home-lights { clear: both; width: 100%; } #extranet-home-lights li { width: 21px; } /* https://www.i-menzies.com/cgi/public/retailers-online-deliveries-index.cgi */ .week-holder, .week-holder2 { clear: both; width: 100%; } /* for header bar background, and under-logo space */ #logged-in-msg { height: 100%; }