/* DETAILS ----------------------------------------------- Base Style Sheet © Copyright Company's Name 2008 Site: http://www.sitename.co.uk Author: Rosie Sturman (Realised Design) Contact: rosie@realiseddesign.co.uk */ /* CONTENTS ----------------------------------------------- 01 - BASIC TAGS 02 - COLOURS 03 - STRUCTURE 04 - NAVIGATION 05 - MAINBODY / SIDEBARS 06 - FOOTER 07 - TABLES 08 - FORMS 09 - ARTICLE LISTS 10 - MISC */ /* GLOBAL WHITE SPACE RESET ----------------------------------------------- */ html, body, dl, dt, dd, h1, h2, h3, h4, h5, h6, table, thead, tbody, tfoot, th, td, form, fieldset, legend, p, blockquote, pre {margin: 0; padding: 0;} /*---------------------------------------------*/ body { /*font-size: small; disable for font-size swapper*/ font-size: .8em; font-family: Verdana, sans-serif; text-align: center; /*margin: auto fix for IE6*/ padding-top: 6px; background: url(../Images/backgroundMain.gif) repeat-x 0 0; } /* BASIC TAGS ----------------------------------------------- */ h1 { font-size: 220%; padding: 0 0 20px 0; color: #01573c; font-weight: bold; } h1 a {color: #01573c;} h2 { font-size: 130%; padding: 0 0 10px 0; color: #01573c; font-weight: bold; } h2 a {color: #01573c;} h3 { font-size: 120%; padding: 0 0 10px 0; color: #01573c; font-weight: bold; } h4 { font-size: 110%; padding: 0 0 10px 0; color: #01573c; font-weight: bold; } p { font-size: 100%; padding: 0 0 8px 0; color: #353535; line-height: 110%; font-family: Arial, sans-serif; } a { font-size: 100%; color: #7ac043; font-weight: bold; text-decoration: none; outline: none; cursor: pointer; cursor: hand; font-family: Verdana, sans-serif; } a:link {} a:visited {} a:hover {text-decoration: underline;} a:active {} p a {font-size: 90%;} ul, ol {color: #353535; font-size: 100%; font-family: Arial, sans-serif;} /*---------------------------------------------*/ em {font-style: italic;} strong {font-weight: bold;} .clear {clear: both;} .left {float: left;} .right {float: right;} .altAlign {text-align: right;} .fifty {width: 50%;} .mini {font-size: 80%;} a img {border: none;} .hidden {display: none;} .padd {padding: 10px;} .paddH {padding: 0 10px;} .paddR {padding-right: 10px;} .paddL {padding-left: 10px;} .paddV {padding: 10px 0;} .min30 {min-height: 30px; height:auto !important; height: 30px;} .noVPadd {padding-top: 0 !important; padding-bottom: 0 !important;} .big {font-size: 120%;} hr {float: left; width: 100%; border: none; height: 5px; background: url(../Images/bigDot.gif) repeat-x 0 0;} /*---------------------------------------------*/ /* COLOURS ----------------------------------------------- */ .grey {background: #7f7f7f;} .greyDark {background: #353535;} .orange {background: #f78f1e;} .green {background: #80db36;} .greenLight {background: #e1f6cf;} .greenMid {background: #7ac043;} .greenDark {background: #01573c;} /*---------------------------------------------*/ /* STRUCTURE ------------------------------------------------ */ .WrapOuter {float: left; width: 100%;} #WrapOuterTop.WrapOuter {background: #7ac043 url(../Images/backgroundTop.gif) repeat-x 0 0;} #WrapOuterMiddle.WrapOuter {background: #f2f2f2 url(../Images/backgroundBottom.gif) repeat-x 0 bottom;} #WrapOuterBottom.WrapOuter {background: #7ac043;} .WrapOuter .Wrap { position: relative; margin: 0 auto; width: 1020px; text-align: left;/*margin: auto fix for IE6*/ } #WrapOuterTop.WrapOuter .Wrap {background: *FFF;} #WrapOuterMiddle.WrapOuter .Wrap {background: *FFF;} #WrapOuterBottom.WrapOuter .Wrap {background: *FFF;} .WrapOuter .Wrap .WrapInner { float: left; padding: 0 40px; width: 940px; } #WrapOuterTop.WrapOuter .Wrap .WrapInner {padding: 0; width: 1020px; background: #80db36 url(../Images/header.gif) no-repeat 0 0;} #WrapOuterMiddle.WrapOuter .Wrap .WrapInner {padding-top: 20px; padding-bottom: 50px; background: #fff url(../Images/backgroundBottomInner.gif) repeat-x 0 bottom;} /*#WrapOuterMiddle.WrapOuter .Wrap .WrapInner {padding-top: 20px; background: #fff url(../Images/grid.gif) repeat-y 40px 0;}*/ #WrapOuterBottom.WrapOuter .Wrap .WrapInner {background: #80db36;} #Header {float: left; padding: 10px 40px 0 40px; width: 940px; background: url(../Images/slide.gif) no-repeat 0 bottom;} #Header .utility {float: right; padding: 0 0 0 128px; width: 640px; height: 100px; text-align: right;} #Header .utility * {color: #fff; font-weight: bold; font-family: Verdana, sans-serif;} /*---------------------------------------------*/ /* NAVIGATION ------------------------------------------------ */ #MainNav {float: left; padding: 0 0 0 128px; width: 640px;} #MainNav ul {margin: 0; padding: 0; list-style: none;} #MainNav ul li {float: left; display: inline; margin-right: 1px;} #MainNav ul li a {float: left; padding: 10px; color: #fff;} #MainNav ul li.current {background: #fff url(../Images/navTopLeft.gif) no-repeat 0 0;} #MainNav ul li.current a {color: #7f7f7f; background: url(../Images/navTopRight.gif) no-repeat right 0;} #MainNav ul li:hover {background: #fff url(../Images/navTopLeft.gif) no-repeat 0 0;} #MainNav ul li:hover a {color: #7f7f7f; text-decoration: none; background: url(../Images/navTopRight.gif) no-repeat right 0;} /* ------------------------------------------------ */ #SubNav {float: left; margin-bottom: 10px; padding: 20px 0; width: 940px; border-bottom: 1px solid #fff;} #SubNav ul {margin: 0; padding: 0; list-style: none;} #SubNav ul li {float: left; display: inline; margin-right: 20px;} #SubNav ul li a {float: left; color: #fff;} /* ------------------------------------------------ */ /* MAINBODY / SIDEBARS ------------------------------------------------ .sidebarOne { float: left; padding-left: 10px; padding-right: 20px; width: 220px; background: #ff00ff; } .mainBody { float: left; padding-right: 10px; width: 700px; background: #ff0000; } .content { float: left; display: inline; margin-right: 20px; width: 460px; background: #ffff00; } .sidebarTwo { float: right; display: inline; width: 220px; background: #0000ff; } ------------------------------------------------ */ /* CONTENT AREAS ------------------------------------------------ */ .CA-700 {position: relative; float: left; padding: 0 0 20px 0; width: 700px;} .CA-580 {position: relative; float: left; padding: 0 0 20px 0; width: 580px;} .CA-460 {position: relative; float: left; padding: 0 0 20px 0; width: 460px;} .CA-340 {position: relative; float: left; padding: 0 0 20px 0; width: 340px;} .CA-220 {position: relative; float: left; padding: 0 0 20px 0; width: 220px;} /* ------------------------------------------------ */ .CA-L-700 {position: relative; float: left; padding: 0 20px 20px 0; width: 700px;} .CA-L-580 {position: relative; float: left; padding: 0 20px 20px 0; width: 580px;} .CA-L-460 {position: relative; float: left; padding: 0 20px 20px 0; width: 460px;} .CA-L-340 {position: relative; float: left; padding: 0 20px 20px 0; width: 340px;} .CA-L-220 {position: relative; float: left; padding: 0 20px 20px 0; width: 220px;} /* ------------------------------------------------ */ .CA-580 .panel, .CA-L-580 .panel {float: left; width: 580px; background: #7f7f7f url(../Images/lidStandard580.gif) no-repeat 0 0;} .CA-580 .panel .panelInner, .CA-580 .panel.linkPanel .panelInner, .CA-L-580 .panel .panelInner, .CA-L-580 .panel.linkPanel .panelInner {float: left; width: 560px; background: url(../Images/trayGradient580.gif) no-repeat 0 bottom;} /* ------------------------------------------------ */ .CA-460 .panel, .CA-L-460 .panel {float: left; width: 460px; background: #7f7f7f url(../Images/lidStandard460.gif) no-repeat 0 0;} .CA-460 .panel .panelInner, .CA-460 .panel.linkPanel .panelInner, .CA-L-460 .panel .panelInner, .CA-L-460 .panel.linkPanel .panelInner {float: left; width: 440px; background: url(../Images/trayGradient460.gif) no-repeat 0 bottom;} .CA-460.gradient .panel, .CA-L-460.gradient .panel {background: url(../Images/lidGradient460.gif) no-repeat 0 0;} .CA-460.gradient .panel .panelInner, .CA-460.gradient .panel.linkPanel .panelInner, .CA-L-460.gradient .panel .panelInner, .CA-L-460.gradient .panel.linkPanel .panelInner {padding-bottom: 40px;} .CA-460.twitter .panel, .CA-L-460.twitter .panel {background: #7f7f7f url(../Images/lidTwitter460.gif) no-repeat 0 0;} .CA-460.twitter .panel .panelInner, .CA-460.twitter .panel.linkPanel .panelInner, .CA-L-460.twitter .panel .panelInner, .CA-L-460.twitter .panel.linkPanel .panelInner {padding-top: 50px; padding-bottom: 30px;} .twitter h3 {padding: 5px 0 12px 0;} .twitter p {padding: 8px 0 0 0;} /* ------------------------------------------------ */ .CA-340 .panel, .CA-L-340 .panel {float: left; width: 340px; background: #7f7f7f url(../Images/lidStandard340.gif) no-repeat 0 0;} .CA-340 .panel .panelInner, .CA-340 .panel.linkPanel .panelInner, .CA-L-340 .panel .panelInner, .CA-L-340 .panel.linkPanel .panelInner {float: left; width: 320px; background: url(../Images/trayGradient340.gif) no-repeat 0 bottom;} .CA-340.gradient .panel, .CA-L-340.gradient .panel {background: #7f7f7f url(../Images/lidGradient340.gif) no-repeat 0 0;} .CA-340.gradient .panel .panelInner, .CA-340.gradient .panel.linkPanel .panelInner, .CA-L-340.gradient .panel .panelInner, .CA-L-340.gradient .panel.linkPanel .panelInner {padding-bottom: 40px;} /* ------------------------------------------------ */ .CA-220 .panel, .CA-L-220 .panel {float: left; width: 220px; background: #7f7f7f url(../Images/lidStandard220.gif) no-repeat 0 0;} .CA-220 .panel .panelInner, .CA-220 .panel.linkPanel .panelInner, .CA-L-220 .panel .panelInner,.CA-L-220 .panel.linkPanel .panelInner {float: left; width: 200px; background: #7f7f7f url(../Images/trayGradient220.gif) no-repeat 0 bottom;} .CA-220.gradient .panel, .CA-L-220.gradient .panel {min-height: 210px; height:auto !important; height: 210px; background: #7f7f7f url(../Images/lidGradient220.gif) no-repeat 0 0; padding-bottom: 20px;} .CA-220.gradient .panel .panelInner, .CA-220.gradient .panel.linkPanel .panelInner, .CA-L-220.gradient .panel .panelInner, .CA-L-220.gradient .panel.linkPanel .panelInner {padding-top: 20px; padding-bottom: 0;} /* ------------------------------------------------ */ .panel {position: relative;} .panel p, .panel a, .panel h2 , .panel h3 {color: #fff;} .panelInner {padding: 10px;} .gradient .panelInner {padding-top: 5px;} .panelInner .readMore {position: absolute; bottom: 0; left: 0; padding: 0 30px 13px 10px; float: left; color: #fff; background: url(../Images/chevron.gif) no-repeat right 3px;} .gradient p {color: #353535;} .gradient h2 {color: #01573c;} .gradient h2 a {color: #01573c;} .gradient a {color: #7ac043;} .noTray .panel .panelInner {background: none;} .gradient.noTray .panel .panelInner {padding-bottom: 10px;} /* ------------------------------------------------ */ .white {height: 140px; overflow: hidden; padding-bottom: 0; margin-bottom: 10px;} .white h2 {position: absolute; bottom: 10px; left: 0; z-index: 100; float: left; padding: 0; width: 220px; font-size: 120%; background: url(../Images/PNGs/lidTitle220.png) no-repeat 0 0;} .white h2 a {float: left; padding: 8px 30px 0 10px; color: #fff; background: url(../Images/chevron.gif) no-repeat right 13px;} .lid {position: absolute; top: 0; left: 0; z-index: 100; float: left; width: 220px; height: 10px; background: url(../Images/PNGs/lidWhite220.png) no-repeat 0 0;} .tray {position: absolute; bottom: 0; left: 0; z-index: 90; float: left; width: 220px; height: 10px; background: url(../Images/PNGs/tray220.png) no-repeat 0 0;} .white img {} /* ------------------------------------------------ */ .white.imageOnly {height: auto; line-height: 0;} .white.imageOnly .tray {background: url(../Images/PNGs/trayImageOnly220.png) no-repeat 0 bottom;} .CA-L-220.white.imageOnly img {width: 220px; } /* ------------------------------------------------ */ .list .white {margin-bottom: 0; padding-bottom: 10px; height: auto;} .list .white h2 {position: relative; bottom: 0;} .list .white .tray {position: relative !important;} /* ------------------------------------------------ */ .linkCircle {position: absolute; top: 0; right: 0; float: left; height: 46px; width: 46px; background: url(../Images/linkCircle.gif) no-repeat 0 0;} .linkCircleMini {position: absolute; top: 20px; right: 20px; float: left; height: 20px; width: 20px; background: url(../Images/linkCircleMiniGreen.gif) no-repeat 0 0;} .linkCircleMiniGrey {position: absolute; top: 20px; right: 20px; float: left; height: 20px; width: 20px; background: url(../Images/linkCircleMiniGrey.gif) no-repeat 0 0;} .linkCircleCopy {float: left; padding: 2px 0 5px 0; width: 100%; /*padding: 2px 30px 5px 0;*/ background: url(../Images/linkCircleMini.gif) no-repeat right 0;} /* ------------------------------------------------ */ #Anim {position: relative; overflow: hidden; background: #7f7f7f;} #Anim .lid {width: 580px; background: url(../Images/PNGs/lidWhite580.png) no-repeat 0 0;} #Anim .tray {width: 580px; background: url(../Images/PNGs/trayWhite580.png) no-repeat 0 0;} #Anim .animPanel {position: relative; 0; z-index: 80; float: left; padding: 20px 300px 20px 20px; width: 260px; background: url(../Images/PNGs/introPanel.png) no-repeat 0 0;} #Anim img {position: absolute; top: 0; left: 0; z-index: 10; width: 580px;} #Anim * {color: #fff;} #Anim h1 {font-size: 160%;} /* FOOTER ------------------------------------------------ */ #Footer { clear: both; float: left; padding: 10px 0; width: 100%; } #Footer p {color: #fff;} #Footer a {color: #fff; font-weight: normal;} /* ------------------------------------------------ */ /* FORMS ------------------------------------------------ */ .formItem, .radios {float: left; clear: left; margin: 0 0 6px 0; padding: 0; width: 100%;} .formItem input, .radios input {float: left; margin: 0; padding: 1px; font-size: 100%;} .formItem label, .radios label {float: left; margin-right: 6px; display: inline; font-size: 100%;} .formItem select, .radios select {float: left; margin-right: 6px; padding: 0; /*width: +4;*/ border: solid 1px #515151; color: #515151; font-size: 100%;} .formItem input.textinput, .radios input.textinput {margin-right: 6px; display: inline; border: solid 1px #515151; color: #515151;} .formItem span.textinput {float: left; margin-right: 6px; display: inline; padding: 1px 2px; font-size: 100%; font-weight: normal; border: solid 1px #515151; color: #515151;} .formItem textarea, .radios textarea {float: left; margin-right: 6px; display: inline; padding: 1px; border: solid 1px #515151; color: #515151; font-size: 100%;} .formItem input.checkbox {} input.submitButton {float: right; padding: 1px 3px 2px 3px; font-size: 90%; color: #FFF; border: none; cursor: pointer; cursor: hand; background: #3e4449;} a.submitButton {float: right; padding: 1px 3px 2px 3px; font-size: 90%; color: #FFF; font-weight: normal; text-decoration: none; border: none; background: #3e4449;} input.imageButton {margin: 0; padding: 0;} /* ------------------------------------------------ */ /* TABLES ------------------------------------------------ */ table {font-size: 100%;} table tr th {vertical-align: top;} table tr td {vertical-align: top;} table tr th {} table tr th a {} table tr.alt td {} table tr td a {} table tr.alt td a {} table tr td h2 {} /* ------------------------------------------------ */ /* ARTICLE LISTS ------------------------------------------------ */ .articleList {float: left; width: 100%;} .articleList .article {float: left; clear: left; margin-top: 14px; padding-bottom: 10px; width: 100%; background: url(../Images/dot.gif) repeat-x 0 bottom;} .articleList .date {float: left; padding-right: 20px;} .articleList .date p {float: left; padding: 6px 0 0 0; width: 38px; border: solid 1px #7ac043; font-size: 140%; font-family: Arial, sans-serif; font-weight: bold; color: #7ac043; text-align: center;} .articleList .date p span {float: left; margin-top: 4px; padding: 3px 0 4px 0; width: 100%; font-size: 60%; color: #fff; text-transform: uppercase; background: #7ac043;} .CA-460 .articleList .copy {float: left; width: 400px;} .CA-220 .articleList .copy {float: left; width: 160px;} /* ------------------------------------------------ */ /* MISC ------------------------------------------------ */ .logo {float: left;} .chevron {padding-right: 30px; color: #fff; background: url(../Images/chevron.gif) no-repeat right 4px;} .siteBy {float: right;} .siteBy a {font-weight: bold; text-decoration: none;} .button200x40 {float: left; margin-top: 10px; padding: 12px 10px 0 10px; width: 180px; height: 28px; background: url(../Images/button200x40.gif) repeat-x 0 0;}