@media all { /* All styling except for the major containers can be found here Looking to change the main layout of the page? Check out layout.css TABLE OF CONTENTS ----------------- 0. Base layout 1. Base styling - Heads 2. Base Styling - Content: paragraphs, lists, blockquotes, links and other common styles 3. Base Styling - Forms 4. Base Styling - Tables 5. Special styling for each container, images, icons, etc. 6. Tools - text-image replacement, clearing etc. ----------------- NOTE:Quickly skip through the major sections by doing a find for ++ Inside a section you can skip around the major parts of it (if it exists) by doing a find for // */ @font-face { font-family: 'MicroFLF'; src: url('../fonts/MicroFLF.eot'); src: local('MicroFLF Regular'), local('MicroFLF'), url('../fonts/MicroFLF.ttf') format('truetype'); } @font-face { font-family: 'MicroFLFMediumItalic'; src: url('../fonts/MicroFLF-Italic.eot'); src: local('MicroFLF Medium Italic'), local('MicroFLF-Italic'), url('../fonts/MicroFLF-Italic.ttf') format('truetype'); } @font-face { font-family: 'MicroFLFBold'; src: url('../fonts/MicroFLF-Bold.eot'); src: local('MicroFLF Bold'), local('MicroFLF-Bold'), url('../fonts/MicroFLF-Bold.ttf') format('truetype'); } @font-face { font-family: 'MicroFLFBoldItalic'; src: url('../fonts/MicroFLF-BoldItalic.eot'); src: local('MicroFLF Bold Italic'), local('MicroFLF-BoldItalic'), url('../fonts/MicroFLF-BoldItalic.ttf') format('truetype'); } @font-face { font-family: 'MicroExtendFLFRegular'; src: url('../fonts/MicroExtendFLF.eot'); src: local('MicroExtendFLF Regular'), local('MicroExtendFLF'), url('../fonts/MicroExtendFLF.ttf') format('truetype'); } @font-face { font-family: 'MicroExtendFLFMediumItalic'; src: url('../fonts/MicroExtendFLF-Italic.eot'); src: local('MicroExtendFLF Medium Italic'), local('MicroExtendFLF-Italic'), url('../fonts/MicroExtendFLF-Italic.ttf') format('truetype'); } @font-face { font-family: 'MicroExtendFLFBold'; src: url('../fonts/MicroExtendFLF-Bold.eot'); src: local('MicroExtendFLF Bold'), local('MicroExtendFLF-Bold'), url('../fonts/MicroExtendFLF-Bold.ttf') format('truetype'); } @font-face { font-family: 'MicroExtendFLFBoldItalic'; src: url('../fonts/MicroExtendFLF-BoldItalic.eot'); src: local('MicroExtendFLF Bold Italic'), local('MicroExtendFLF-BoldItalic'), url('../fonts/MicroExtendFLF-BoldItalic.ttf') format('truetype'); } /* ------- 0. Base layout -------------------------------------- // */ html { overflow: -moz-scrollbars-vertical; } html { overflow-x: auto; } body {background:#3b3a3a url('../imgs/bg_body-inner.gif') 0 93px repeat-x; font-family:Arial, Helvetica, sans-serif;} /* Background image here is in cae a browser treat the alpha transparency funnny, had issue with IE7 and Opera. So there. */ body#home {background:#3b3a3a url('../imgs/bg_body-home.jpg') 0 93px repeat-x;} #masthead {background:transparent url('../imgs/bg_masthead.jpg') repeat-x; height:116px; margin-bottom:-23px; padding-top:10px; position:relative; z-index:20;} #masthead_content {background:transparent url('../imgs/bg_masthead-content.jpg') no-repeat; height:116px; margin:0 auto; width:976px; position:relative;} #header {background:transparent url('../imgs/bg_header.jpg') center 0 no-repeat; height:88em; position:relative; z-index:15;} #header.truckinghead {background:transparent url('../imgs/bg_header-trucking.jpg') center 0 no-repeat;} #header.forestryhead {background:transparent url('../imgs/bg_header-forestry.jpg') center 0 no-repeat;} #header.oilrighead {background:transparent url('../imgs/bg_header-oilrig.jpg') center 0 no-repeat;} #header.oilrig2head {background:transparent url('../imgs/bg_header-oilrig2.jpg') center 0 no-repeat;} #header.minehead {background:transparent url('../imgs/bg_header-mine.jpg') center 0 no-repeat;} #header_content {margin:0 auto; width:976px; position:relative;} #mainContainer {background:#fff url('../imgs/bg_mainContainer.jpg') 0 -2px repeat-x; padding-top:10px; position:relative; z-index:18;} #home #mainContainer {background-position:0 0;} #main {background:transparent url('../imgs/bg_main-inner.png') -7px 0 repeat-y; margin:0 auto; position:relative; width:976px;} #home #main {background:transparent;} #navLocal {float:right; padding:3px 0 12px; position:relative; width:590px;} #mainContent {float:right; padding-bottom:22px; padding-top:14px; position:relative; width:590px;} #mainContent.subscribed {float:none; padding:125px 50px 200px 90px; width:auto;} #sideBar {margin-right:620px; padding-bottom:22px; position:relative;} #sideBar.subscribed {margin-right:1px;} #sideBar_content {padding-right:20px;} #footer {background:#3b3a3a url('../imgs/bg_footer.jpg') repeat-x; height:180px; padding-top:63px;} #footer_content {margin:0 auto; width:976px; position:relative; z-index:10;} /* ------- 1. Base styling - Heads -------------------------------------- // */ h1,h2,h3,h4,h5,h6 {font-family:'MicroFLF', Arial, Helvetica; font-weight:100;} h1 {font-size:3.1em; line-height:1.1em; margin:0.5em 0 0.75em 0; padding:0; color:#d23437; text-transform:capitalize;} h2 {font-size:2.4em; line-height:1.1em; margin:0 0 0.25em 0; padding:0; color:#d23437; text-transform:capitalize;} h3 {font-size:2em; line-height:1.1em; margin:0 0 0.25em 0; padding:0; color:#424242; text-transform:capitalize;} h4 {font-size:1.5em; line-height:1.1em; margin:0 0 0.25em 0; padding:0; color:#424242; text-transform:capitalize;} h5 {font-size:1.2em; line-height:1.1em; margin:0 0 0.25em 0; padding:0; color:#424242} h6 {font-size:1em; line-height:1.1em; margin:0 0 0.25em 0; padding:0; color:#424242} /* ------- 2. Base Styling - Content: paragraphs, lists, blockquotes, links and other common styles -------------------------------------- // */ p {color:#5f615f; font-size:1.1em; margin:0 0 1.5em 0; padding:0; line-height:1.8em} blockquote {border-left:10px solid #ddd; margin-left:10px} pre {font-family:monospace; font-size:1.0em} strong, b {font-weight:bold} em, i {font-style:italic} code {font-family:"Courier New", Courier, monospace; font-size:1em; white-space:pre;} big {font-size:1.2em;} small {font-size:0.8em;} /* LISTS */ ul {line-height:1.4em; list-style:disc; margin:0.2em 0 2em 0; padding:0} p+ul, p+ol {margin-top:-1em;} ul li {color:#5f615f; font-size:1.1em; margin:0 0 0.25em 53px; padding:0} ol {font-size:1.0em; line-height:1.4em; margin:0 0 1.5em 0; padding:0} ol li {color:#5f615f; font-size:1.1em; list-style:decimal; margin:0 0 0.25em 30px; padding:0} dl {margin:0 0 1.5em 0; padding:0; line-height:1.4em} dl dt {font-weight:bold; margin:0.25em 0 0.25em 0; padding:0} dl dd {margin:0 0 0 30px; padding:0} /* LINKS */ a {color:#409acf;} /* ------- 3. Base Styling - Forms -------------------------------------- // */ form {margin:0; padding:0} form div, form p {font-size:1em; margin:0 0 1em 0; padding:0} label {font-weight:bold} fieldset {border:1px solid #eee; padding:5px 10px; margin:0 0 1.5em 0} fieldset legend {color:#666; font-size:1.1em; font-weight:bold; margin:0 0 0 0px; padding:0; background-color:white} * html fieldset legend {margin:0 0 10px -10px} fieldset ul {list-style:none; margin:0 0 1.5em 0; padding:0} fieldset ul li {list-style:none; margin:0 0 0.5em 0; padding:0} input, select, textarea {font-size:1em; font-family:arial, helvetica, verdana, sans-serif; margin:0; padding:2px} input, select {vertical-align:middle} textarea {width:200px; height:8em} input.check {border:none; width:auto; height:auto; margin:0} input.radio {border:none; width:auto; height:auto; margin:0} input.file {height:auto; width:250px} input.readonly {background-color:transparent; border:none} input.button {width:10em; border:1px solid black; background-color:#ddd} input.image {border:none; width:auto; height:auto;} form div.submit {margin:1em 0} form div.submit input {height:2em; width:15em} label dfn {font-style:normal;} /* ------- 4. Base Styling - Tables -------------------------------------- // */ table {border-left:1px solid #a4a4a4; font-size:1.2em; margin:-0.5em 0 3em 0; padding:0; width:99%;} table caption {font-weight:bold; margin:0 0 0 0; padding:0 0 1.5em 0} th {background:#7d7d7d; border-left:1px solid #a4a4a4; color:#fdb721; padding:12px 10px 8px; text-align:left; vertical-align:bottom;} th.first-child {border-left:0; padding-right:9;} td {border:1px solid #a4a4a4; border-left:0; border-top:0; color:#5f615f; font-size:1em; padding:8px 10px 6px;} tr.even td {background:#fbfbfb;} hr {display:none} div.hr {height:1px; margin:1.5em 10px; border-bottom:1px dotted black} /* ------- 5. Special styling for each container, images, icons, etc. -------------------------------------- // */ #masthead h2 {height:100px; margin:0; padding:5px 0 0; left:0; position:absolute; top:0; width:329px;} #masthead h2 a {background:transparent url('../imgs/logo-integrated.png') no-repeat; display:block; height:100px; position:relative; text-indent:-1000em; width:329px;} .navMain {font-family:'MicroFLF'; height:116px; list-style:none; margin:0; padding:0; position:absolute; right:0; top:0; width:537px;} .navMain li {background:transparent url('../imgs/ui_navmain-li.jpg') no-repeat; height:116px; float:left; margin:0; padding:0 0 0 2px;} .navMain li a {background:transparent url('../imgs/ui_navmain-a.png') center -300px no-repeat; color:#fff; display:block; font-size:13px; height:42px; position:relative; padding:51px 14px 0; text-decoration:none;} .navMain li a:hover {background-position:center 0; color:#d23437; height:65px;} .navMain li a.current {background-position:center 0; color:#f4b62b; cursor:default; height:65px;} .navMain li.certificationLink {background:transparent; float:none; position:absolute; height:33px; padding:0; top:-9px; right:0; text-align:center; width:165px;} .navMain li.certificationLink a {background:transparent url('../imgs/ui_clientlogin.png') center top no-repeat; color:#ccc; font-family:arial, helvetica, verdana, sans-serif; font-size:10px; height:26px; padding:7px 20px 0; position:relative;} .navMain li.certificationLink a:hover {color:#d23437;} #header p.intro {color:#fff; font-size:1.4em; font-style:italic; line-height:1.9em; padding:67px 37px 35px 504px;} #header p.intro big {display:block;} #header p.intro a {color:#f4b62b; text-decoration:none;} #header p.intro a:hover {color:#d23437;} #header .buckets {list-style:none; margin:0; padding:0;} #header .buckets li {float:left; margin:0; padding:0; width:320px;} #header .buckets li h2 {padding:0;} #header .buckets li h2 a{display:block; padding:207px 25px 0; text-decoration:none;} #header .buckets li h2 a:hover {text-decoration:underline;} #header .buckets li p {color:#aaadaa; line-height:1.9em; padding:6px 25px 0;} #header .buckets li p a {text-decoration:none;} #header .buckets li p a:hover {text-decoration:underline;} #header .buckets li.ylw a {color:#f3b52b;} #header .buckets li.ylw h2 {color:#f3b52b;} #header .buckets li.ylw h2 a {background:url('../imgs/bucket-ylw.png') no-repeat; color:#f3b52b;} #header .buckets li.red a {color:#b12b2e;} #header .buckets li.red h2 {color:#b12b2e;} #header .buckets li.red h2 a {background:url('../imgs/bucket-red.png') no-repeat; color:#b12b2e;} #header .buckets li.grn a {color:#839b27;} #header .buckets li.grn h2 {color:#839b27;} #header .buckets li.grn h2 a {background:url('../imgs/bucket-grn.png') no-repeat; color:#839b27;} #navLocal {} #navLocal ul {border-bottom:1px solid #c0c0c0; border-top:1px solid #c0c0c0; height:37px; list-style:none; margin:0; overflow:hidden; position:relative;} #navLocal ul li {background:transparent url('../imgs/ul-localnav-li.gif') 0 center no-repeat; float:left; margin:0; padding:0 0 0 1px; position:relative;} #navLocal ul li:first-child {background:transparent; padding-left:0;} #navLocal ul li a {color:#409acf; display:block; padding:13px 16px; position:relative; text-decoration:none;} #navLocal ul li a:hover {background:#ddd;} #navLocal ul li a.current {color:#666; background:#ddd; cursor:default;} #mainContent {} #mainContent p, #mainContent ul {font-size:1.2em;} #mainContent p+h2, #mainContent p+h3, #mainContent p+h4, #mainContent p+h5, #mainContent p+h6, #mainContent ul+h2, #mainContent ol+h2, #mainContent ul+h3, #mainContent ol+h3, #mainContent ul+h4, #mainContent ol+h4, #mainContent ul+h5, #mainContent ol+h5, #mainContent ul+h6, #mainContent ol+h6 {margin:2em 0 0.5em;} #mainContent h2+h3, #mainContent h2+h4, #mainContent h3+h4 {margin-top:1.6em;} #mainContent .single-event h5, #mainContent .article h5 {margin:2em 0 0.25em; font-size:2em; line-height:1.1em; padding:0; color:#424242; text-transform:capitalize;} #mainContent .single-event h6, #mainContent .article h6 {margin:0.5em 0 0.75em; font-size:1.2em; line-height:1.1em; padding:0; color:#424242} #mainContent .single-event p, #mainContent .article p {margin:0.25em 0;} #mainContent li {line-height:1.5em; margin-bottom:0.5em; margin-right:53px;} .email-signup {background:transparent url('../imgs/emailsignup-main.jpg') 0 bottom no-repeat; height:147px; margin:0; padding:30px 18px 0 28px;} .email-signup h3 {color:#030303; font-family:Arial, Helvetica, sans-serif; font-size:1.8em; font-style:italic; font-weight:100; margin:0; padding:20px 0 0;} .email-signup p {font-size:1.2em; margin-bottom:6px;} .email-signup input {background:#f6f6f6; border:1px solid #1e1605; font-size:1.3em; margin-right:5px; width:190px;} .email-signup input:focus {background:#fff;} .email-signup .submit {color:#f4b62b; cursor:pointer; background:transparent url('../imgs/btn-signup.gif') center 0 no-repeat; border:0; font-size:1.2em; height:27px; margin-right:0; width:120px;} .subscribed a {background:#ddd; border:1px solid #C0C0C0; display:block; text-align:center; padding:5px; text-decoration:none; font-variant:small-caps; width:18.5em;} .subscribed a:hover {background:#eee;} #mainContent .vcard {list-style:none; float:left; width:20em; height:13em;} #mainContent .vcard li {line-height:1.4em; margin-left:0;} #sideBar {} .flavour {background:transparent url('../imgs/flavour-home.png') no-repeat; height:300px; margin-bottom:36px; position:relative; width:356px;} .flavour.home {background:transparent url('../imgs/flavour-home.png') no-repeat; margin-bottom:-60px; top:-92px;} .flavour.danda {background:transparent url('../imgs/flavour-danda.png') no-repeat;} .flavour.fatigue {background:transparent url('../imgs/flavour-fatigue.png') no-repeat;} .flavour.safety {background:transparent url('../imgs/flavour-safety.png') no-repeat;} .sponsors {list-style:none; margin-top:0.75em;} .sponsors li {display:inline; margin:0 20px 0 0; padding:0;} .resourceCenter {background:transparent url('../imgs/bg-resourceCenter.jpg') 0 84px no-repeat; margin-bottom:12px; padding-bottom:16px} .resourceCenter * {padding-left:13px; padding-right:30px;} .resourceCenter * * {padding:0;} .resourceCenter h2 {background:transparent url('../imgs/bg-resourceCenter-h2.jpg') no-repeat; height:84px; margin:0; padding:0; position:relative;} .resourceCenter ul {font-size:1.2em; list-style:none outside none; margin-top:0.2em;} .resourceCenter ul li {margin:0; padding:0;} .resourceCenter ul li a {background:#d9d9d9 url('../imgs/icon-link.gif') 9px center no-repeat; color:#6e706e; display:block; margin-bottom:3px; padding:8px 8px 8px 39px; text-decoration:none;} .resourceCenter ul li a[rel="word"] {background-image:url('../imgs/icon-word.gif')} .resourceCenter ul li a[rel="pdf"] {background-image:url('../imgs/icon-pdf.gif')} .resourceCenter ul li a[rel="training"] {background-image:url('../imgs/icon-training.gif')} .resourceCenter ul li a:hover {background-color:#e4e4e4; color:#000;} #sideBar .email-signup {background:transparent url('../imgs/bg-resourceCenter.jpg') 0 84px no-repeat; height:auto; margin-bottom:12px; padding:0 0 16px;} #sideBar .email-signup * {padding-left:13px; padding-right:30px;} #sideBar .email-signup * * {padding:0;} #sideBar .email-signup h2 {background:transparent url('../imgs/bg-emailsign-side-h2.jpg') no-repeat; height:84px; margin:0; padding:0; position:relative;} #sideBar .email-signup p {line-height:1.4em;} #sideBar .email-signup label {color:#6e706e; display:block; font-size:1.2em; font-weight:100; padding-bottom:4px; padding-top:8px; vertical-align:bottom;} #sideBar .email-signup label dfn {position:relative; vertical-align:middle;} #sideBar .email-signup input {float:right; vertical-align:middle;} #sideBar .email-signup .btn {padding:8px 3px 0 0; text-align:right} #sideBar .email-signup .submit {float:none;} #footer {} .navFoot, .news, .events, .quick-contact, .brand {background:transparent url('../imgs/bg-footer-divs.gif') no-repeat; color:#fffcf9; float:left; height:180px; padding:0 27px; position:relative;} .news, .events {overflow:hidden; position:relative; height:170px;} #footer h3 {color:#f4b62b; letter-spacing:-1px;} #footer h4 {color:#727272; padding-top:0.2em;} #footer h5 {color:#929292; font-size:1.6em;} #footer h6 {color:#b2b2b2; font-family:Arial, Helvetica, sans-serif; font-size:1.1; margin:0;} #footer p {color:#fffcf9; font-size:1.3em; line-height:1.6em;} #footer .news p, #footer .events p {line-height:1.2em; margin:0; padding:0.5em 0;} #footer .news p.allnews {top:113px; padding-top:2em; position:absolute; width:99%; background:transparent url('../imgs/bg_footer_moreLinks.png') 0 bottom repeat-x;} #footer .events p.allevents {top:113px; padding-top:2em; position:absolute; width:99%; background:transparent url('../imgs/bg_footer_moreLinks.png') 0 bottom repeat-x;} #footer li {margin-left:0;} #footer a {color:#fff; text-decoration:none;} #footer a:hover {color:#f4b62b; text-decoration:none;} #footer .news a, #footer .events a, #footer .quick-contact a {text-decoration:underline;} #footer .news .allnews a, #footer .events .allevents a {background:#3c3a3b; border:1px solid #4a4a4a; color:#ccc; display:block; font-size:0.9em; padding:5px 13px; position:relative; text-align:center; text-decoration:none; width:13em;} #footer .news .allnews a {width:11em;} #footer .news .allnews a:hover, #footer .events .allevents a:hover {background:#2c2a2b; border-color:#484848; color:#d23437;} .news ul, .events ul {font-size:1.1em; margin:1em 0 0 1.2em;} .navFoot {background:transparent; font-family:'MicroFLF', Arial, Helvetica; font-size:1.2em; padding:5px 24px 0 0; width:110px;} .navFoot ul {list-style:none; margin-top:-0.2em;} #footer .navFoot ul li {line-height:1.1em; margin:0 0 0.5em;} /* .connect {width:100px;} .connect ul {list-style:none; padding-top:10px;} .connect ul li {float:left; margin-right:4px; position:relative;} .connect ul li a {display:block; height:22px; position:relative; text-indent:-999em; width:23px;} .connect ul li.linkedin a {background:transparent url('../imgs/icon-linkedin.gif') no-repeat;} .connect ul li.twitter a {background:transparent url('../imgs/icon-twitter.gif') no-repeat;} .connect ul li.facebook a {background:transparent url('../imgs/icon-facebook.gif') no-repeat;} */ .news {width:186px;} .events {width:186px;} .quick-contact {width:186px;} .quick-contact ul {font-size:1.2em; list-style:none; padding:0.4em 0 0;} .quick-contact ul li span.type {color:#848484; font-size:0.8em;} .quick-contact ul li span.value {color:#aaa;} .brand {width:89px; padding-right:0;} .brand h3 {margin:0; padding-top:6px; position:relative;} .brand h3 a {background:transparent url('../imgs/logo-integrated-foot.gif') no-repeat; display:block; height:80px; position:relative; text-indent:-999em; width:74px;} /* ------- 6. Tools - text-image replacement, clearing etc. -------------------------------------- // */ .vcard {font-size:1.1em; line-height:1.4em; padding:1.5em 0 1em;} .floatRight {float:right;} .floatLeft {float:left;} /* clearing */ .stretch, .clear {clear:both; height:1px; margin:0; padding:0; font-size:15px; line-height:1px;} .clearfix:after {content:"."; display:block; height:0; clear:both; visibility:hidden;} .clearLeft {clear:left;} .clearRight {clear:right;} .clearBoth {clear:both;} * html>body .clearfix {display:inline-block; width:100%;} * html .clearfix {/* Hides from IE-mac \*/height:1%;/* End hide from IE-mac */} /* replace */ .replace {display:block; background-repeat:no-repeat; background-position:left top; background-color:transparent; } /* tidy these up */ .replace * {text-indent:-10000px; display:block; background-repeat:no-repeat; background-position:left top; background-color:transparent; } .replace a {text-indent:0;} .replace a span {text-indent:-10000px;} /* accessibility */ span.accesskey {text-decoration:none;} .accessibility {position:absolute; top:-999em; left:-999em;} /* end accessibility */ /* teaser page overrides */ #teaser {background-color:#1a1a1a; font-size:0.9em;} #teaser #masthead_content {width:776px;} #teaser #main {background:transparent; width:776px;} #teaser #mainContent {float:none; width:776px;} #teaser #footer{height:20px;} #teaser #footer_content {width:776px;}