/* DETAILS ----------------------------------------------- Base Style Sheet © Copyright Realised Design 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 - ARTICLE LISTS 08 - FORMS 09 - TABLES 10 - MISC */ body { /*font-size: small; disable for font-size swapper*/ font-size: .8em; font-family: Georgia, serif; background: #FFF url(../Images/header.jpg) repeat center 0; } /* 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;} /*---------------------------------------------*/ /* BASIC TAGS ----------------------------------------------- */ h1 { font-size: 120%; padding: 0 0 10px 0; color: #98BF03; font-weight: bold; } h2 { font-size: 105%; padding: 0 0 10px 0; color: #3C3C3C; font-weight: bold; } h2 a {font-family: Georgia, serif; } h3 { font-size: 100%; padding: 0 0 10px 0; color: #3C3C3C; font-weight: bold; } h4 { font-size: 90%; padding: 0 0 10px 0; color: #3C3C3C; font-weight: normal; } p { font-size: 87%; padding: 0 0 8px 0; font-family: Arial, sans-serif; color: #3C3C3C; } a { font-size: 100%; color: #018873; font-family: Arial, sans-serif; font-weight: normal; text-decoration: underline; outline: none; cursor: pointer; cursor: hand; } a:link {} a:visited {} a:hover {color: #3C3C3C;} a:active {color: #018873; } p a {font-size: 100%;} ul {color: #3C3C3C;} ol {color: #3C3C3C;} /*---------------------------------------------*/ 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%;} .big {font-size: 120%;} a img {border: none;} .textHide {display: none;} .padd {padding: 10px;} .paddH {padding-right: 10px; padding-left: 10px;} .paddR {padding-right: 10px;} .paddL {padding-left: 10px;} .paddV {padding-top: 10px; padding-bottom: 10px;} hr {float: left; width: 100%; height: 1px; border: none; background: url(../Images/dot_h_3C3C3C.gif) repeat-x 0 0;} .notopmargin {margin-top: 0;} /*---------------------------------------------*/ /* COLOURS ----------------------------------------------- */ .grey1 {color: #3C3C3C;} .grey2 {color: #CACBC8;} .grey3 {color: #F4F5F2;} .green1 {color: #98BF03;} .green2 {color: #BBDD17;} .orange1 {color: #DD9817;} .terquoise1 {color: #018873;} /*---------------------------------------------*/ /* STRUCTURE ------------------------------------------------ */ .WrapOuter {float: left; width: 100%; text-align: center; /*margin: auto fix for IE6*/} #WrapOuterTop.WrapOuter {background: url(../Images/header.jpg) no-repeat center 0;} #WrapOuterNav.WrapOuter {background: #3C3C3C;} #WrapOuterMiddle.WrapOuter {background: #FFF;} #WrapOuterBottom.WrapOuter {background: url(../Images/PNGs/tear.png) repeat-x 0 bottom;} #WrapOuterLowerSection.WrapOuter {padding-top: 30px; background: url(../Images/PNGs/footerTray.png) no-repeat center 0;} .WrapOuter .Wrap { position: relative; margin: 0 auto; width: 1000px; text-align: left;/*margin: auto fix for IE6*/ } #WrapOuterTop.WrapOuter .Wrap {} #WrapOuterMiddle.WrapOuter .Wrap {} #WrapOuterBottom.WrapOuter .Wrap {} .WrapOuter .Wrap .WrapInner { float: left; padding: 0 9px; width: 982px; } #WrapOuterTop.WrapOuter .Wrap .WrapInner {} #WrapOuterMiddle.WrapOuter .Wrap .WrapInner {padding: 0 9px 20px 9px; background: url(../Images/PNGs/sides.png) repeat-y 0 0;} #Home #WrapOuterMiddle.WrapOuter .Wrap .WrapInner {padding: 0 9px;} #WrapOuterBottom.WrapOuter .Wrap .WrapInner {background: url(../Images/PNGs/sides.png) repeat-y 0 0;} #WrapOuterLowerSection.WrapOuter .Wrap .WrapInner {padding: 0; margin: 0 9px 150px 9px; display: inline; background: url(../Images/PNGs/FFF_50.png) repeat 0 0;} /*---------------------------------------------*/ #Header {float: left; width: 100%;} #Header .logo {padding: 16px 0 8px 0;} #Header .email {float: right; padding: 36px 0 8px 0; font-size: 150%; font-weight: bold;} #Header .email a {color: #FFF; text-decoration: none; } /*---------------------------------------------*/ #Sitemap {float: left; padding: 14px 14px 24px 14px; width: 954px;} #Sitemap h3 {float: left; display: inline; margin-bottom: 14px; width: 100%; background: url(../Images/dot_h_3C3C3C.gif) repeat-x 0 bottom;} #Sitemap ul { float: left; margin: 0; padding: 0; width: 100%; list-style: none; } #Sitemap ul li {float: left; display: inline; width: 16%;} #Sitemap ul li a {color: #3C3C3C; text-decoration: none; font-weight: bold;} #Sitemap ul li ul li {clear: left; width: 100%;} #Sitemap ul li ul li a {color: #3C3C3C; font-weight: normal; } /*---------------------------------------------*/ /* NAVIGATION ------------------------------------------------ */ #MainNav { position: relative; margin: 0 auto; width: 1000px; font-family: Arial, sans-serif; text-align: left;/*margin: auto fix for IE6*/ } #MainNav ul { float: left; width: 982px; margin: 0; padding: 0 9px; list-style: none; } #MainNav ul li {float: left; display: inline;} #MainNav ul li a {float: left; padding: 10px 24px 10px 0; color: #FFF; text-decoration: none;} #MainNav ul li.current a {font-size: 150%;} #MainNav ul li a:visited {} #MainNav ul li a:hover {} #MainNav ul li a:active {} /* ------------------------------------------------ */ /* MAINBODY / SIDEBARS ------------------------------------------------ */ .SidebarOne { float: right; display: inline; margin: 14px 14px 14px 0; width: 230px; } .MainBody { float: left; margin: 14px 0; padding-left: 14px; width: 724px; } .Content { float: right; display: inline; margin-right: 14px; width: 546px; } .SidebarTwo { float: left; display: inline; margin-right: 14px; width: 150px; } #Home .SidebarOne { float: left; margin: 0; width: 982px; } #Home .MainBody { float: left; margin-top: 14px; padding-left: 14px; width: 968px; } #Home .Content { float: left; display: inline; margin-right: 4px; width: 480px; } #Home .SidebarTwo { float: right; display: inline; margin-right: 14px; width: 470px; } /* ------------------------------------------------ */ /* FOOTER ------------------------------------------------ */ #Footer { clear: both; float: left; width: 982px; background: #3C3C3C; } #Footer .logo {padding-left: 14px;} #Footer .copyright {float: left; margin-bottom: 14px; padding: 13px 14px 28px 14px; width: 954px; background: #BBDD17 url(../Images/copyright.gif) no-repeat 0 bottom ; } #Footer .details {float: right; margin-bottom: 14px; padding-right: 14px;} #Footer .details p {float: left; color: #FFF;} #Footer .details a {color: #FFF;} #Footer .details p.address {display: inline; margin-right: 14px; width: 20em; text-align: right; background: url(../Images/dot_v_FFF.gif) repeat-y right 0 ;} #Footer .details p.address span {float: right; display: inline; margin-right: 14px; padding: 25px 0 20px 0; background: url(../Images/envelopeMini.gif) no-repeat right 0 ;} /* ------------------------------------------------ */ /* ARTICLE LISTS ------------------------------------------------ */ .articleList {position: relative; float: left; width: 100%;} .articleList .title {float: left; width: 100%;} .article {float: left; clear: left; width: 100%;} .articleList .article {font-family: Arial, sans-serif;} /* ARTICLE DETAIL ------------------------------------------------ */ #ArticleDetail {float: left; width: 546px;} #ArticleDetail h1 {float: left; margin-bottom: 14px; width: 100%; background: url(../Images/dot_h_3C3C3C.gif) repeat-x 0 bottom;} #ArticleDetail #MainImg {position: relative; float: left; width: 100%; height: 240px; margin-bottom: 14px; overflow: hidden;} #ArticleDetail #MainImg.tall {height: 350px;} #ArticleDetail #MainImg.xtratall {height: 450px;} #ArticleDetail h2 {} #ArticleDetail .copy {float: left; width: 382px;} #ArticleDetail .tools {float: right; padding-top: 14px; width: 150px; background: url(../Images/dot_h_3C3C3C.gif) repeat-x 0 0;} #ArticleDetail .tools .page {float: left; margin-bottom: 14px; width: 100%; } #ArticleDetail .tools .page a {float: left; display: inline; margin-right: 5px; padding: 2px 7px 4px 7px; border: solid 1px #CACBC8; color: #3C3C3C; font-weight: bold; font-family: Georgia, serif; text-decoration: none;} #ArticleDetail .tools .page a:hover {border: solid 1px #F4F5F2; background: #F4F5F2;} #ArticleDetail .tools .page a:active {border: solid 1px #CACBC8; background: #F4F5F2;} #ArticleDetail .tools .actions {float: left; width: 100%; background: url(../Images/dot_h_3C3C3C.gif) repeat-x 0 bottom;} #ArticleDetail .tools .actions a {clear: left; float: left; padding: 2px 0 10px 24px; width: 126px; color: #3C3C3C; text-decoration: none; font-size: 80%; text-transform: uppercase;} #ArticleDetail .tools .actions a:hover {color: #CACBC8;} #ArticleDetail .tools .actions a:active {color: #3C3C3C;} #ArticleDetail .tools .actions a.print {background: url(../Images/PNGs/printer_empty.png) no-repeat 0 0;} #ArticleDetail .tools .actions a.web {background: url(../Images/PNGs/world_link.png) no-repeat 0 0;} /*#ArticleDetail .tools .actions .send {background: url(../Images/PNGs/email_go.png) no-repeat 0 0;}*/ #ArticleDetail .tools .actions p.url {display: none;} /* MainNews ------------------------------------------------ */ #MainNews.articleList {margin-top: 14px; margin-bottom: 14px; padding-bottom: 4px; width: 468px; border: solid 1px #CACBC8;} #MainNews.articleList h2.title {padding: 10px; width: 448px; border-top: solid 14px #F4F5F2;} #MainNews.articleList a.open {position: absolute; top: 20px; right: 10px; float: left; width: 23px; height: 23px; background: url(../Images/downMini.gif) no-repeat 0 0; color: #ff0000;} #MainNews.articleList a.open.openstate {background: url(../Images/upMini.gif) no-repeat 0 0; } #MainNews.articleList a.open:hover {background-position: 0 -23px;} #MainNews.articleList a.open:active {background-position: 0 0;} #MainNews.articleList .article {display: inline; width: 448px; margin: 0 10px 10px 10px; background: url(../Images/dot_h_3C3C3C.gif) repeat-x 0 bottom;} #MainNews.articleList .article .date {float: left; padding: 1px 8px 5px 0; width: 40px; font-size: 75%; overflow: hidden;} #MainNews.articleList .article .summary {float: left; width: 360px;} #MainNews.articleList .article .summary h4 {font-size: 87%;} #MainNews.articleList .article .summary a {text-decoration: none; } /* ------------------------------------------------ */ /* SubNavProjects ------------------------------------------------ */ #SubNavProjects.articleList {width: 160px;} #SubNavProjects.articleList .article {position: relative; float: left; clear: none; display: inline; margin-bottom: 10px; padding: 0; width: 150px; background: #F4F5F2;} #SubNavProjects.articleList .article a {text-decoration: none; } #SubNavProjects.articleList .article h4 a {float: left; padding: 10px; width: 130px; color: #3C3C3C;} #SubNavProjects.articleList .article .summary {float: left; padding: 10px; width: 130px; font-size: 90%; color: #FFF; background: url(../Images/PNGs/3C3C3C_70.png) repeat 0 0;} #SubNavProjects.articleList .article img {display: none;} /* FORMS ------------------------------------------------ */ .formItem, .radios {float: left; clear: left; margin: 0 0 10px 0; padding: 0; width: 100%;} .formItem input, .radios input {float: left; margin: 0; padding: 1px; font-size: 90%; font-family: Arial, sans-serif;} .formItem label, .radios label {float: left; margin: 0 10px 0 0; display: inline; padding: 0; color: #3C3C3C; font-size: 90%; font-family: Arial, sans-serif;;} .formItem select, .radios select {float: left; margin: 0 10px 0 0; padding: 0; /*width: +4;*/ border: solid 1px #3C3C3C; font-size: 90%; font-family: Arial, sans-serif;} .formItem input.textinput, .radios input.textinput {margin-right: 10px; display: inline; border: solid 1px #3C3C3C; color: #3C3C3C;} .formItem textarea, .radios textarea {float: left; margin-right: 10px; display: inline; padding: 1px; border: solid 1px #3C3C3C; color: #3C3C3C; font-size: 90%; font-family: Arial, sans-serif;} .formItem input.checkbox {} input.submitButton {padding: 2px 6px 3px 6px; font-size: 90%; color: #FFF; border: none; cursor: pointer; cursor: hand; background: #3C3C3C;} a.submitButton {float: left; margin: 0; padding: 2px 6px 3px 6px; font-size: 90%; color: #FFF; font-size: 100%; font-weight: normal; text-decoration: none; border: none; background: #3C3C3C;} /* ------------------------------------------------ */ /* Emailer ------------------------------------------------ */ #Emailer {} #Emailer input.textinput {width: 146px; margin-bottom: 4px; color: #CACBC8;} #Emailer input.textinput:focus {color: #3C3C3C;} #ArticleDetail .tools .actions #Emailer .send {clear: left; float: left; padding: 2px 0 10px 21px; color: #3C3C3C; text-decoration: none; font-size: 80%; text-transform: uppercase; border: none; cursor: pointer; cursor: hand; background: url(../Images/PNGs/email_go.png) no-repeat 0 0;} #ArticleDetail .tools .actions #Emailer .send:hover {color: #CACBC8;} #ArticleDetail .tools .actions #Emailer .send:active {color: #3C3C3C;} /* ContactForm ------------------------------------------------ */ #ContactForm {float: left; margin-bottom: 20px; padding-bottom: 10px; width: 100%; background: url(../Images/dot_h_3C3C3C.gif) repeat-x 0 bottom} #ContactForm label {width: 168px;} #ContactForm input.textinput {width: 200px; margin-bottom: 4px; margin-right: 0;} #ContactForm label.wideLabel {width: 100%; margin-right: 0;} #ContactForm textarea {float: right; width: 378px; margin: 10px 0 0 0;} #ContactForm input.submitButton {float: right;} /* 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 {} /* ------------------------------------------------ */ /* BoxStyles ------------------------------------------------ */ .BoxStyleOne {float: right; clear: right; margin-bottom: 14px; padding: 10px; width: 208px; border: solid 1px #CACBC8;} .BoxStyleOne img {float: right;} .BoxStyleOne h2 a {text-decoration: none; font-weight: bold;} .BoxStyleOne.orange h2, .BoxStyleOne.orange h2 a {color: #DD9817;} .BoxStyleOne.green h2, .BoxStyleOne.green h2 a {color: #98BF03;} .BoxStyleOne a.more {float: left; width: 86px; height: 23px;} .BoxStyleOne.orange a.more {background: url(../Images/moreOrange.gif) no-repeat 0 0;} .BoxStyleOne.green a.more {background: url(../Images/moreGreen.gif) no-repeat 0 0;} .BoxStyleOne a.more:hover {background-position: 0 -23px;} .BoxStyleOne a.more:active {background-position: 0 0;} /* ------------------------------------------------ */ .BoxStyleTwo {position: relative; float: right; margin-bottom: 14px; padding: 10px; width: 448px; border: solid 1px #CACBC8; background: #F4F5F2;} .BoxStyleTwo h2 a {color: #3C3C3C; text-decoration: none; font-weight: bold;} .BoxStyleTwo .details {float: left; padding: 10px; width: 428px; background: #FFF;} .BoxStyleTwo .details div {float: right; width: 198px;} .BoxStyleTwo .box {position: absolute; top: 2px; left: 140px; float: left; height: 130px; width: 104px; background: url(../Images/PNGs/freshBoxMini.png) no-repeat right 0 ;} /* ------------------------------------------------ */ .BoxStyleThree {position: relative; float: left; margin-bottom: 14px; padding: 10px; width: 128px; border: solid 1px #CACBC8; background: #FFF;} .BoxStyleThree h2 a {text-decoration: none; font-weight: bold;} .BoxStyleThree.orange h2, .BoxStyleThree.orange h2 a {color: #DD9817;} .BoxStyleThree.green h2, .BoxStyleThree.green h2 a {color: #98BF03;} #FreshNarrow.BoxStyleThree {padding: 65px 0 0 0; width: 148px; background: url(../Images/leaf1.jpg) no-repeat -50px -50px; } #FreshNarrow.BoxStyleThree .details {float: left; padding: 10px 10px 60px 10px; width: 128px; background: url(../Images/leaf2.jpg) no-repeat 0 bottom; } #FreshNarrow.BoxStyleThree .details img {margin: 20px 0;} #EShot.BoxStyleThree {padding: 66px 0 0 0; width: 148px; background: url(../Images/envelope.gif) no-repeat 2px 5px; } #EShot.BoxStyleThree .details {float: left; padding: 10px; width: 128px;} /* ------------------------------------------------ */ /* SlideShow ------------------------------------------------ */ #SlideShow {position: relative; float: left; width: 546px; height: 24.3em; margin-bottom: 14px; overflow: hidden; border-bottom: solid 10px #3C3C3C;} #Home #SlideShow {width: 470px;} #SlideShow #AllSlides {position: relative; z-index: 50; float: left; width: 546px; height: 24.3em; overflow: hidden;} #Home #SlideShow #AllSlides {width: 470px;} #SlideShow .step {float: left; width: 546px; height: 24.3em; } #Home #SlideShow .step {width: 470px;} #SlideShow .step .stepcontent {float: left; padding: 10px 216px 10px 14px; width: 316px; height: 19em;} #Home #SlideShow .step .stepcontent {width: 240px;} #SlideShow .step .stepcontent h2 {padding-top: 5px; font-size: 140%; font-weight: normal;} #SlideShow .step .stepcontent h3 {padding: 20px 0 15px 0; font-size: 120%; } #SlideShow .step h2.stepCount {float: left; padding: 14px 0; font-size: 120%;} #SlideShow .page {position: absolute; bottom: 10px; right: 0; z-index: 100; float: left;} #SlideShow .page a.back {float: left; display: inline; margin-right: 4px; height: 30px; width: 30px; background: url(../Images/back.gif) no-repeat 0 0; } #SlideShow .page a.next {float: left; height: 30px; width: 30px; background: url(../Images/next.gif) no-repeat 0 0; } #SlideShow .page a:hover {background-position: 0 -30px;} #SlideShow .page a:active {background-position: 0 0;} #SlideShow #StepOne.step {background: url(../Images/stepOne.gif) no-repeat 0 bottom;} #SlideShow #StepOne.step .stepcontent {background: #F4F5F2 url(../Images/chat.gif) no-repeat right center;} #SlideShow #StepTwo.step {background: url(../Images/stepTwo.gif) no-repeat 0 bottom;} #SlideShow #StepTwo.step .stepcontent {background: #F4F5F2 url(../Images/quoteSpec.gif) no-repeat right center;} #SlideShow #StepThree.step {background: url(../Images/stepThree.gif) no-repeat 0 bottom;} #SlideShow #StepThree.step .stepcontent { background: #F4F5F2 url(../Images/contentBranding.gif) no-repeat right center;} #SlideShow #StepFour.step {background: url(../Images/stepFour.gif) no-repeat 0 bottom;} #SlideShow #StepFour.step .stepcontent {background: #F4F5F2 url(../Images/designProd.gif) no-repeat right center;} #SlideShow #StepFive.step {background: url(../Images/stepFive.gif) no-repeat 0 bottom;} #SlideShow #StepFive.step .stepcontent {background: #F4F5F2 url(../Images/compTraining.gif) no-repeat right center;} /* MISC ------------------------------------------------ */ .logo {float: left;} a.pdf {padding: 2px 24px 10px 0; background: url(../Images/PNGs/page_white_acrobat.png) no-repeat right 0;} a.famfamfam {float: left; margin-top: 3px; padding: 2px 0 3px 20px; background: url(../Images/famfamfam.gif) no-repeat 0 0;} a.facebook {float: left; margin-top: 3px; padding: 2px 0 3px 20px; background: url(../Images/facebook.gif) no-repeat 0 0;} a.connectnorwich {float: left; margin-top: 3px; padding: 2px 0 3px 20px; background: url(../Images/connectnorwich.gif) no-repeat 0 0;}