/* *********************************************************** Title: Circle Solutions Core Browser(s): All Author: Matt Branthwaite (matthewbranthwaite.co.uk) Created: 11 January 2008 Last modified: 16 January 2008 *********************************************************** */ /* = Global reset */ /* Based upon 'reset.css' in the Yahoo! User Interface Library: http://developer.yahoo.com/yui */ html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h5, h5, h6, pre, form, label, fieldset, input, p, blockquote, th, td { margin: 0; padding: 0; } table { border-collapse:collapse; border-spacing:0 } fieldset, img { border:0 } address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal } ol, ul, li { list-style:none } caption, th { text-align:left } h1, h2, h3, h5, h5, h6 { font-size: 100%; } q:before, q:after { content:''} /* = Global reset-RESET */ /* The below restores some sensible defaults */ strong { font-weight: bold; } em { font-style: italic; } ol, ul, li { list-style: none; } h1, h2, h3, h4, h5 { font-weight: bold; margin: 0; } a { outline: none; } /* Gets rid of Firefox's dotted borders */ a img { border: none; } /* Gets rid of IE's blue borders */ /* = Typography */ body, h4, h5, p, li, dt, dd, th, td, label, input, textarea { font-family:'Lucida Grande', 'Lucida Sans Unicode', Verdana, Arial, Helvetica, sans-serif } h1, h2, h3, h4, h5 { color: #f7d700; font-weight: normal; margin: 0 0 16px; } h1, h2 { font-size: 24px; line-height: 30px; } h3 { font-size: 20px; line-height: 26px; } h4 { font-size: 13px; line-height: 20px; } h5 { font-size: 11px; line-height: 18px; } body, p, li, dt, dd, th, td, label { font-size: 11px; line-height: 16px; text-align:left; vertical-align:top } p { margin: 0 0 16px 0; } input, textarea { font-size: 11px; padding: 2px; } dt { font-weight: bold; color: #eee; margin: 0 0 2px; } dd { margin: 0 0 20px; } th { color: #ff9; font-weight: bold; font-size: 11px; line-height: 18px } blockquote p { font-style:italic } cite p { color:#666; width:100%; text-align:right; margin:-10px 0 30px 0 } body { background: #151515 url("images/body-bg.png") 50% 0 no-repeat; color: #bbb;} a { color: #f7d700; text-decoration: none; padding-bottom: 1px; border-bottom: dotted 1px #999; } a:hover { color: #f3c100; border-bottom: solid 1px #ddd;} /* = Structure */ div#container { width: 840px; margin: 0 auto 0 auto; } div#header { position: relative; height: 75px;} h1.branding a { position: absolute; bottom: 15px; left: 10px; width: 231px; height: 36px; padding: 0; margin: 0; border: 0; text-indent: -9999px; z-index: 10;} html>body h1.branding a { background: transparent url("http://www.circlesolutions.co.uk/i/css/images/branding.png") 0 0 no-repeat; } body.page-is-home div#content { background: none; } /* = Navigation */ ul.nav { position: absolute; right: 10px; bottom: 15px; } ul.nav li { float: left; } ul.nav li a { float: left; font-size: 12px; border: 0; padding: 6px 10px; margin-left: 10px; background-color: transparent; color: #eee; } ul.nav li a:hover { border: 0; color: #f7d700; } body.page-is-home ul.nav li.nav-home a, body.page-is-about ul.nav li.nav-about a, body.page-is-services ul.nav li.nav-services a, body.page-is-prices ul.nav li.nav-prices a, body.page-is-faqs ul.nav li.nav-faqs a, body.page-is-contact ul.nav li.nav-contact a { background-color: #f7d700; color: #111; } /* = Home - Featured */ div.featured { position: relative; height: 315px; padding: 0 10px 85px; overflow: hidden; } html>body div.featured { background: transparent url("http://www.circlesolutions.co.uk/i/css/images/featured-bg.png") 0 0 no-repeat; } ul#featured-buttons { position: absolute; bottom: 15px; left: 15px; width: 810px; } ul#featured-buttons li { float: left; } ul#featured-buttons li a { float: left; display: block; height: 70px; width: 162px; padding: 0; border: 0; background: transparent url("http://www.circlesolutions.co.uk/i/css/images/featured-nav.jpg") 0 0 no-repeat; text-indent: -9999px; } ul#featured-buttons li a:hover { border: 0; } /* Measurements for the nav image-replacement The distance from the top to the... up state = 0 hover state = 75px selected state = 150px The distance from the far-left to the... welcome = 0 webdesign = 167px ecommerce = 329px networking = 491px maintenance = 653px The width of the... welcome trigger = 167px webdesign trigger = 162px ecommerce trigger = 162px networking trigger = 162px maintenance trigger = 167px */ ul#featured-buttons li.tab1 a { background-position: -5px 0;} ul#featured-buttons li.tab2 a { background-position: -167px 0;} ul#featured-buttons li.tab3 a { background-position: -329px 0;} ul#featured-buttons li.tab4 a { background-position: -491px 0;} ul#featured-buttons li.tab5 a { background-position: -653px 0;} ul#featured-buttons li.tab1 a:hover { background-position: -5px -75px;} ul#featured-buttons li.tab2 a:hover { background-position: -167px -75px;} ul#featured-buttons li.tab3 a:hover { background-position: -329px -75px;} ul#featured-buttons li.tab4 a:hover { background-position: -491px -75px;} ul#featured-buttons li.tab5 a:hover { background-position: -653px -75px;} ul#featured-buttons li.tabOn1 a { background-position: -5px -150px; cursor: default; } ul#featured-buttons li.tabOn2 a { background-position: -167px -150px; cursor: default;} ul#featured-buttons li.tabOn3 a { background-position: -329px -150px; cursor: default;} ul#featured-buttons li.tabOn4 a { background-position: -491px -150px; cursor: default;} ul#featured-buttons li.tabOn5 a { background-position: -653px -150px; cursor: default;} /* Set the featured content to show as default... */ li#section-2, li#section-3, li#section-4, li#section-5 { display: none; } ul.featured-sections li { height: 270px; margin: 15px 5px; padding: 40px 30px; background: transparent url("http://www.circlesolutions.co.uk/i/css/images/featured-sections-bg.jpg") left top no-repeat;} ul.featured-sections li#section-1 { padding-right: 300px; background-image: url("http://www.circlesolutions.co.uk/i/css/images/featured-welcome.jpg"); } ul.featured-sections li#section-1 p { padding-right: 20px;} ul.featured-sections li#section-2 { padding-right: 450px; background-image: url("http://www.circlesolutions.co.uk/i/css/images/featured-webdesign.jpg"); } ul.featured-sections li#section-3 { padding-right: 390px; background-image: url("http://www.circlesolutions.co.uk/i/css/images/featured-ecommerce.jpg"); } ul.featured-sections li#section-4 { padding-left: 470px; padding-right: 15px; background-image: url("http://www.circlesolutions.co.uk/i/css/images/featured-networking.jpg"); } ul.featured-sections li#section-5 { padding-left: 470px; padding-right: 15px; background-image: url("http://www.circlesolutions.co.uk/i/css/images/featured-maintenance.jpg"); } ul.featured-sections li h2 { margin-bottom: 20px; } ul.featured-sections li p { font-size: 14px; line-height: 22px; margin: 0 0 20px; } ul.featured-sections li p.call-to-action a { border: 0; padding: 6px 10px; margin-right: 1px; background-color: #2d2d2d; color: #eee; } ul.featured-sections li p.call-to-action a:hover { border: 0; background-color: #f7d700; color: #111; } /* = Asides */ ul.asides { margin-top: 10px; } ul.asides li { float: left; width: 280px; height: 170px; background: #0d0d0d url("http://www.circlesolutions.co.uk/i/css/images/asides-bg.jpg") 0 0 no-repeat; } ul.asides li h3 { margin: 25px 0 10px 35px; } ul.asides li p { margin-left: 35px; width: 110px; } /* Measurememts for the asides image-replacement The distance from the far-left to the... pricing = 0 why-choose-us = 280px faqs = 560px The width of... pricing = 280px why-choose-us = 280px faqs = 280px The height of... All = 170px */ ul.asides li.asides-pricing { background-position: 0 0; } ul.asides li.asides-why-choose-us { background-position: -280px 0; } ul.asides li.asides-faqs { background-position: -560px 0; } /* = Content Box */ /* Mark-up inserted by jQuery inside (wrapInner)
... */ div.box-top { padding: 15px 10px 0; } html>body div.box-top { background: transparent url("http://www.circlesolutions.co.uk/i/css/images/content-bg-top.png") 0 0 no-repeat; } div.box-bottom { padding: 0 0 5px; } html>body div.box-bottom { background: transparent url("http://www.circlesolutions.co.uk/i/css/images/content-bg-bottom.png") -10px bottom no-repeat; } div.box-body { background: transparent url("http://www.circlesolutions.co.uk/i/css/images/content-bg-middle.png") -10px 0 repeat-y; padding: 0 5px; } html>body div.box-content { background: transparent url("http://www.circlesolutions.co.uk/i/css/images/featured-sections-bg.jpg") left top repeat-y; } /* = Sections */ dl.section-nav dt { padding: 0; margin-bottom: 16px; } dl.section-nav dd { padding: 0; } /* Unordered section nav... */ dl.section-nav dd ul { height: 40px; } dl.section-nav dd ul li { float: left; } dl.section-nav dd ul li a { float: left; padding: 6px 10px; margin-right: 10px; border: 0; line-height: 16px; background-color: #2d2d2d; color: #eee; } dl.section-nav dd ul li a:hover { border: 0; background-color: #f7d700; color: #111; } /* Ordered section nav... */ dl.section-nav dd ol { margin: 0 0 16px; } dl.section-nav dd ol li { list-style: decimal; margin: 0 0 1px 30px; } .section { overflow: auto; border-top: 1px solid #333; margin: 0; padding: 30px 30px 0 30px; } /* This Section class can be used on a div, li */ .section.intro { border-top: 0;} /* Takes the border off the first intro section */ /* Section background images and content positioning (using padding)... */ #about { padding: 30px 370px 0 30px; background: transparent url("http://www.circlesolutions.co.uk/i/css/images/section-about.jpg") right top no-repeat; } #contact { padding: 30px 370px 0 30px; background: transparent url("http://www.circlesolutions.co.uk/i/css/images/section-contact.jpg") right top no-repeat; } #webdesign { padding: 30px 30px 0 370px; background: transparent url("http://www.circlesolutions.co.uk/i/css/images/section-webdesign.jpg") left top no-repeat; } #networking { padding: 30px 30px 0 370px; background: transparent url("http://www.circlesolutions.co.uk/i/css/images/section-networking.jpg") left top no-repeat; } #maintenance { padding: 30px 370px 0 30px; background: transparent url("http://www.circlesolutions.co.uk/i/css/images/section-maintenance2.jpg") right top no-repeat; } #ecommerce { padding: 30px 370px 0 30px; background: transparent url("http://www.circlesolutions.co.uk/i/css/images/section-ecommerce.jpg") right top no-repeat; } #miscellaneous { padding: 30px 30px 0 370px; background: transparent url("http://www.circlesolutions.co.uk/i/css/images/section-miscellaneous.jpg") left top no-repeat; } #webhosting { padding: 30px 370px 0 30px; background: transparent url("http://www.circlesolutions.co.uk/i/css/images/section-webhosting.jpg") right top no-repeat; } .list-packages li.package { padding-top: 10px; } .list-packages li.package h4 { position: relative; padding-bottom: 6px; border-bottom: 1px solid #333; } .list-packages li.package h4 em { position: absolute; right: 0; font-style: normal; color: #fff;} .list-packages li.package ul { margin: 0 0 16px; } .list-packages li.package ul li { list-style: square; margin: 0 0 1px 30px; } p.back-to-top { margin: 0 0 30px; } p.back-to-top a { display: block; width: 40px; padding: 3px 0; text-align: center; border: 0; line-height: 16px; background-color: #2d2d2d; color: #eee; } p.back-to-top a:hover { border: 0; background-color: #f7d700; color: #111; } table.data { width: 100%; margin-bottom: 16px; } table.data th, table.data td { border-bottom: 1px solid #333; padding: 6px 6px; } table.data thead th { border-bottom: 1px solid #999; } table.data strong { color: #fff; } /* = Specific Page styling */ /* About page */ #about { padding-bottom:50px; } /* Set the content area bigger than actual content */ /* Contact page */ #contact { padding-bottom:16px; } /* Set the content area bigger than actual content */ /* Faqs page */ body.page-is-faqs li.section ol li { list-style: decimal; margin: 0 0 0 30px; } body.page-is-faqs li.section ol li h4 { font-size: 11px; margin: 0 0 2px; } /* = Footer */ div.footer { clear: both; padding: 20px 0px; } div.footer p { font-size: 10px; color: #777; margin: 0 0 5px; text-align: center; } div.footer a { border: 0; padding: 2px 5px; margin-left: 5px; background-color: #000; color: #777; } div.footer a:hover { border: 0; background-color: #f7d700; color: #111;}