/* [ Details ] Base Style Sheet © Copyright Company's Name 2008 Site: http: //www.sitename.co.uk Author: Rosie Sturman (Logic Byte) Contact: rosie@logicbyte.co.uk Date Created: 01.01.2010 Date Modified: 01.01.2010 ------------------------------------------------------------------------------------------------------------*/ /* [ Contents ] Core Elements: [01] YUI 2: Reset CSS - http: //developer.yahoo.com/yui/reset/ [02] Typography [03] Universal Tags [04] HTML / Body Structure: [02] Wrap [03] Header & Utilities [04] Navigation [05] Content [06] Footer Site Specific: [10] Misc [01] Colors [08] Article Lists Page Specific: [01] PageID ------------------------------------------------------------------------------------------------------------*/ /*---------------------------------------------------------------------------------------------------------- [ Core Elements ] ------------------------------------------------------------------------------------------------------------*/ /* [00] YUI 2: Reset CSS - http: //developer.yahoo.com/yui/reset/ -------------------------------------------------------*/ @import url("reset.css"); /* [00] Typography -------------------------------------------------------*/ @import url("typography.css"); /* [00] Universal Tags -------------------------------------------------------*/ @import url("universal.css"); /* [00] HTML / Body -------------------------------------------------------*/ html, body {margin: 0; padding: 0; height: 100%;} body { font-family: Helvetica, Arial, Verdana, sans-serif; font-size: 75%; font-weight: normal; line-height: 1.2em; color: #1a1a1a; text-align: center; /*margin: auto fix for IE6*/ background: #FFF; margin: 0; padding: 0; overflow-y: scroll; background: url(../Images/graphPaper.gif) repeat 0 120px; } /*---------------------------------------------------------------------------------------------------------- [ Structure ] ------------------------------------------------------------------------------------------------------------*/ /* [00] Wrap -------------------------------------------------------*/ .WrapOuter {float: left; width: 100%;} #WrapOuter1.WrapOuter {background: #FFF url(../Images/line1.gif) repeat-x 0 113px;} #WrapOuter2.WrapOuter {background: #FFF;} #WrapOuter3.WrapOuter {background: #FFF url(../Images/line1.gif) repeat-x 0 2px;} #WrapOuter4.WrapOuter {background: #FFF url(../Images/line1.gif) repeat-x 0 2px;} #WrapOuter5.WrapOuter {background: #d1d1d1 url(../Images/line2.gif) repeat-x 0 0;} #WrapOuter6.WrapOuter {background: #FFF url(../Images/line3.gif) repeat-x 0 0;} .WrapOuter .Wrap { position: relative; margin: 0 auto; width: 960px; text-align: left; /*margin: auto fix for IE6*/ } #WrapOuter1.WrapOuter .Wrap {} #WrapOuter2.WrapOuter .Wrap {} #WrapOuter3.WrapOuter .Wrap {} #WrapOuter4.WrapOuter .Wrap {} #WrapOuter5.WrapOuter .Wrap {} #WrapOuter6.WrapOuter .Wrap {} .WrapOuter .Wrap .WrapInner { position: relative; float: left; width: 940px; padding: 0 10px; background: url(../Images/xgrid.gif) repeat-y 10px 0; } #WrapOuter1.WrapOuter .Wrap .WrapInner {height: 120px; background: url(../Images/PNGs/line940_1.png) no-repeat 0 bottom;} #WrapOuter2.WrapOuter .Wrap .WrapInner {/*background: url(../Images/PNGs/line940_1.png) no-repeat 0 0;*/} #WrapOuter3.WrapOuter .Wrap .WrapInner {background: url(../Images/PNGs/line940_1.png) no-repeat 0 0;} #WrapOuter4.WrapOuter .Wrap .WrapInner {padding: 3em 10px 1.666em 10px; background: url(../Images/PNGs/line940_2.png) no-repeat 0 0;} #WrapOuter5.WrapOuter .Wrap .WrapInner {background: url(../Images/PNGs/line940_4.png) no-repeat 0 0;} #WrapOuter6.WrapOuter .Wrap .WrapInner {padding: 1.666em 10px 1.666em 10px; background: url(../Images/PNGs/line940_3.png) no-repeat 0 0;} /* [00] Header & Utilities -------------------------------------------------------*/ #Header {float: left; width: 940px;} #Utilities {float: right; width: 710px;} /* [00] Navigation -------------------------------------------------------*/ #MainNav {position: absolute; bottom: 4px; left: 230px; float: left; width: 730px;} #MainNav ul {float: right; margin: 0; padding: 0; list-style: none; width: 660px;} #MainNav ul li {float: left; margin-right: 10px; display: inline;} #MainNav ul li a {float: left; padding: 7px 9px; font-weight: bold; font-size: 1em; color: #1a1a1a; text-decoration: none; text-transform: uppercase;} #MainNav ul li.current a, #MainNav ul li a:hover {color: #FFF; background: #1a1a1a;} #MainNav ul li.current a {} #MainNav ul li a:hover {} #SubNav1 {float: left; width: 230px;} #SubNav1 ul {float: left; margin: 0 0 3em 0; padding: 0 0 0 5px; list-style: none; width: 220px;} #SubNav1 ul li {float: left; display: inline; padding-bottom: .833em; width: 220px;} #SubNav1 ul li a {float: left; padding-left: 25px; width: 195px; font-family: georgia, serif; color: #1a1a1a; font-size: 1.6em; line-height: 1em; background: url(../Images/arrowsH.gif) no-repeat 0 0;} #SubNav1 ul li.current a {} #SubNav1 ul li a:hover {} #SubNav2 {float: left; margin-top: 10px; width: 940px;} #SubNav2 ul {float: left; margin: 0; padding: 0; list-style: none; width: 235px;} #SubNav2 ul li {float: left; width: 100%; list-style: none; font-weight: bold;} #SubNav2 ul li a {display: block; color: #1a1a1a; padding-bottom: .4em;} #SubNav2 ul li strong {display: block; padding-bottom: .4em;} #SubNav2 ul li a:hover {} #SubNav2 ul li ul li {font-weight: normal;} #SubNav2 ul li ul li a {padding-bottom: 0;} /* [00] Content -------------------------------------------------------*/ .PageContainer {} .Col-R-310 {position: relative; float: left; padding: 0 10px 0 0; width: 300px;} .Col-L-630 {position: relative; float: left; padding: 0 0 0 10px; width: 620px;} .Col-R-470 {position: relative; float: left; padding: 0 10px 0 0; width: 460px;} .Col-L-470 {position: relative; float: left; padding: 0 0 0 10px; width: 460px;} .Col-R-230 {position: relative; float: left; padding: 0 10px 0 0; width: 220px;} .Col-B-240 {position: relative; float: left; padding: 0 5px 0 5px; width: 230px;} .Col-B-480 {position: relative; float: left; padding: 0 10px; width: 460px;} .Col-L-230 {position: relative; float: left; padding: 0 0 0 10px; width: 220px;} /* [00] Footer -------------------------------------------------------*/ #Footer { clear: both; float: left; width: 940px; padding: 15px 0 5px 0; } #Footer p {padding: 0; margin: 0;} #Footer a.siteBy {float: right;} /*---------------------------------------------------------------------------------------------------------- [ Site Specific ] ------------------------------------------------------------------------------------------------------------*/ /* [00] Others -------------------------------------------------------*/ ul.boxes {float: left; margin: 0; padding: 0; list-style: none;} ul.boxes li {float: left; margin: 0 10px 3em 0; padding: 0; width: 230px; list-style: none;} ul.boxes li.box2 {width: 310px;} ul.boxes li.end, .Col-B-240 ul.boxes li {margin-right: 0;} ul.boxes li h2 {padding-left: 5px; padding-right: 5px;} ul.boxes li p {float: left; position: relative; margin: 0; width: 230px; height: 150px; background: url(../Images/boxTop1.gif) no-repeat 0 0;} ul.boxes li.box2 p {width: 310px; height: 180px; background: url(../Images/boxTop2.gif) no-repeat 0 0;} ul.boxes li p img {position: absolute; top: 3px; left: 6px; z-index: 10; width: 218px; height: 143px;} ul.boxes li.box2 p img {width: 298px; height: 173px;} ul.boxes li p strong {position: absolute; bottom: 4px; left: 6px; z-index: 100; margin: 0; padding: 10px; width: 198px; color: #FFF; font-weight: normal; background: url(../Images/PNGs/1a1a1a_90.png) repeat 0 0;} ul.boxes li.box2 p strong {width: 278px; font-size: 1.2em; background: #000;} ul.boxes li p strong span {display: block;} ul#OurWork.boxes li p strong span {padding-top: 10px; } ul.boxes li.box2 p strong span {font-size: 80%;} .panel {float: left; margin-bottom: 3em; padding: 10px; background: url(../Images/PNGs/000000_10.png) repeat 0 0;} .tweetBox {float: left; margin-bottom: 0.833em; padding: 0 5px; width: 220px; background: url(../Images/bird.jpg) no-repeat 157px 0;} .tweetBox h2 {padding: 0 75px 15px 0;} .tweetBox ul {margin: 0;} .tweetBox ul li {list-style: none;} .tweetBox .date {display: block; padding: 1em 0;} a.follow {display: block; padding: 2px 0 4px 21px; color: #1a1a1a; background: url(../Images/social_networking_iconpack/twitter_16.png) no-repeat 0 0;} a.follow strong {color: #fb1d2a; } a.follow:hover strong {color: #0bce01;} .skype {float: left; padding: 2px 0 4px 21px; background: url(../Images/social_networking_iconpack/skype_16.png) no-repeat 0 0;} .vCard {float: left; padding: 6px 0 8px 37px; background: url(../Images/vCard.gif) no-repeat 0 0;} .linkedin {float: left; padding: 2px 0 4px 21px; background: url(../Images/social_networking_iconpack/linkedin_16.png) no-repeat 0 0;} .twitter {float: left; padding: 2px 0 4px 21px; background: url(../Images/social_networking_iconpack/twitter_16.png) no-repeat 0 0;} .flickr {float: left; padding: 2px 0 4px 21px; background: url(../Images/social_networking_iconpack/flickr_16.png) no-repeat 0 0;} .facebook {float: left; padding: 2px 0 4px 21px; background: url(../Images/social_networking_iconpack/facebook_16.png) no-repeat 0 0;} .validhtml {float: left; display: inline; margin-right: 10px; width: 80px; height: 15px; background: url(../Images/validhtml.gif) no-repeat 0 0;} .badgeGetInTouch {position: relative; top: 30px; left: 0; z-index: 50; float: right; width: 110px; height: 106px; background: url(../Images/PNGs/badgeGetInTouch.png) no-repeat 0 0;} .bite1 {position: absolute; z-index: 50; top: -19px; right: 0; height: 24px; width: 83px; background: url(../Images/bite1.gif) no-repeat 0 0;} .bite2 {position: absolute; z-index: 50; top: 0px; left: 150px; height: 26px; width: 83px; background: url(../Images/bite2.gif) no-repeat 0 0;} .bot1 {position: absolute; z-index: 50; top: -63px; left: 0; height: 74px; width: 76px; background: url(../Images/bot1.gif) no-repeat 0 0;} .bot2 {float: right; margin-top: 3em; height: 83px; width: 58px; background: url(../Images/bot2.gif) no-repeat 0 0;} .bot3 {float: right; margin-top: 1em; height: 56px; width: 90px; background: url(../Images/bot3.gif) no-repeat 0 0;} h3.expandableOnClick {padding-left: 30px; font-family: georgia, serif; font-weight: normal; line-height: 1em; background: url(../Images/arrowsV.gif) no-repeat 0 -118px;} h3.expandableOnClick.class2 {background-position: 0 0;} #ContactPara {} #ContactPara h3 {font-size: 1.8em;} #ContactDetails {} #ContactForm {} #ContactForm .formItem.first {clear: none; width: 240px;} #ContactForm .formItem.second {clear: none; width: 220px;} #ContactForm label {font-size: 1.2em; margin-bottom: 0.833em; padding: 0;} #ContactForm .textinput {margin-bottom: 1em; width: 210px;} #ContactForm textarea {width: 450px;} /*---------------------------------------------------------------------------------------------------------- [ Page Specific ] ------------------------------------------------------------------------------------------------------------*/ /* [00] PageID -------------------------------------------------------*/ #PageID-AboutUs #WrapOuter2.WrapOuter, #PageID-InformationArchitecture #WrapOuter2.WrapOuter, #PageID-FreshContentManagementSystem #WrapOuter2.WrapOuter, #PageID-FreshPlugins #WrapOuter2.WrapOuter, #PageID-GraphicDesign #WrapOuter2.WrapOuter, #PageID-Copywriting #WrapOuter2.WrapOuter, #PageID-EMarketing #WrapOuter2.WrapOuter, #PageID-Hosting #WrapOuter2.WrapOuter, #PageID-404 #WrapOuter2.WrapOuter, #PageID-WebDesignDevelopment #WrapOuter2.WrapOuter { background: transparent; } /* -------------------------------------------------------*/ #PageID-AboutUs #WrapOuter2.WrapOuter .Wrap .WrapInner, #PageID-LegalBits #WrapOuter2.WrapOuter .Wrap .WrapInner, #PageID-TsnCs #WrapOuter2.WrapOuter .Wrap .WrapInner, #PageID-PrivacyPolicy #WrapOuter2.WrapOuter .Wrap .WrapInner, #PageID-AccessibilityStatement #WrapOuter2.WrapOuter .Wrap .WrapInner { width: 950px; padding: 6em 0 1.666em 10px; } #PageID-InformationArchitecture #WrapOuter2.WrapOuter .Wrap .WrapInner, #PageID-FreshContentManagementSystem #WrapOuter2.WrapOuter .Wrap .WrapInner, #PageID-FreshPlugins #WrapOuter2.WrapOuter .Wrap .WrapInner, #PageID-GraphicDesign #WrapOuter2.WrapOuter .Wrap .WrapInner, #PageID-Copywriting #WrapOuter2.WrapOuter .Wrap .WrapInner, #PageID-EMarketing #WrapOuter2.WrapOuter .Wrap .WrapInner, #PageID-Hosting #WrapOuter2.WrapOuter .Wrap .WrapInner, #PageID-404 #WrapOuter2.WrapOuter .Wrap .WrapInner { width: 950px; padding: 6em 10px 1.666em 0; } #PageID-HomePage #WrapOuter2.WrapOuter .Wrap .WrapInner {width: 950px; padding: 0 5px 5em 5px;} #PageID-OurWork #WrapOuter2.WrapOuter .Wrap .WrapInner {width: 950px; padding: 6em 5px 1.666em 5px;} #PageID-WebDesignDevelopment #WrapOuter2.WrapOuter .Wrap .WrapInner {width: 950px; padding: 3em 10px 60em 0;} /* -------------------------------------------------------*/ #PageID-AboutUs #WrapOuter2.WrapOuter .Wrap .WrapInner .Col-R-230{ padding-top: 5.9em; } #PageID-AboutUs #WrapOuter2.WrapOuter .Wrap .WrapInner .Col-B-240{ padding-top: 4.7em; } #PageID-HomePage #WrapOuter3.WrapOuter {background: transparent url(../Images/line1.gif) repeat-x 0 2px;} #PageID-AboutUs #WrapOuter3.WrapOuter .Wrap .WrapInner {padding-top: 1.666em; padding-bottom: 13em; background: url(../Images/norwich.jpg) no-repeat right bottom;} #PageID-404 #WrapOuter2.WrapOuter .Wrap .WrapInner .bot1 {top: auto; bottom: -10px;} /* [00] -------------------------------------------------------*/ #AboutUs, #ProdsNServs {position: relative; top: -50px;} #AboutUs h2.title, #ProdsNServs h2.title {padding-bottom: 35px;} #AboutUs h2.title {padding-left: 80px;} ul.features {margin-bottom: 1.666em;} .expandableOnMouseOver {} .expandableOnClick {cursor: pointer; cursor: hand;} #ProdsNServs .categoryitemsOnMouseOver p {padding-bottom: 20px;}