/*----------------------------------------------------------------------------- Complete Accounting Services Master Stylesheet version: 1.0 author: steven daniels website: www.designbysteve.co.uk Blue Background: #2eb4ef Red: #f21846 -----------------------------------------------------------------------------*/ /* =Resets and Page Setup -----------------------------------------------------------------------------*/ /* Remove padding and margin */ * { margin: 0; padding: 0;} /* Put it back on certain elements */ h1, h2, h3, h4, h5, h6, p, pre, blockquote, form, fieldset, table, ul, ol, iframe { margin: 35px 80px 0 80px; } /* Remove styles from links */ ul,li, ol { list-style-type: none; } a { outline: none; } /* Remove border around linked images */ img { border: 0; } a img { vertical-align: middle; } html { overflow-y: scroll; } html, body, #pagewrap { height: 100%; } body > #pagewrap { height: auto; min-height: 100%;} body { font: 80%/1.6 Trebuchet MS, Arial, sans-serif; color: #333; } /* Giving this an ID allows changes to the CSS based on individual page requirements */ body#home { background: #2eb4ef; width: 960px; margin: 0 auto; } body#bookkeeping { background: #2eb4ef; width: 960px; margin: 0 auto; } body#accounts { background: #2eb4ef; width: 960px; margin: 0 auto; } body#payroll { background: #2eb4ef; width: 960px; margin: 0 auto; } body#contact { background: #2eb4ef; width: 960px; margin: 0 auto; } body#error { background: #2eb4ef; width: 960px; margin: 0 auto; } /* margin 0 auto centres content. remove for left aligned page. */ #pagewrap { width: 960px; background: #fff; margin-top: 50px; } /* padding bottom must be the same height as the footer. */ #content { width: 960px; padding-bottom: 141px; } /* Toolbox */ .clear { clear: both; } .floatleft { float: left; } .floatright { float: right; } .white { color: #fff; margin-bottom: 0px; margin-top: 10px; } .highlighttext { color: #f21846; } /* CLEAR FIX*/ .clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;} .clearfix {display: inline-block;} /* Hides from IE-mac \*/ * html .clearfix { height: 1%;} .clearfix {display: block;} /* End hide from IE-mac */ /* =Typography -----------------------------------------------------------------------------*/ h1 { font-size: 600%; letter-spacing: -2px; } .intro { font-size: 400%; letter-spacing: -1px; text-align: center; padding-top: 94px; } h2 { font-size: 450%; letter-spacing: -1px; } h2.small { font-size: 200%; letter-spacing: 0px; } h3 { font-size: 200%;} h4 { } h5 { } h6 { } p { } #howwecanhelp p { max-width: 460px;} /* =Headings -----------------------------------------------------------------------------*/ #topcurve { background: url(images/topcurve.jpg) no-repeat top; color: #2eb4ef; height: 29px; } #header { background: url(images/logo.png) no-repeat top right; margin-right: 80px; height: 240px; margin-top: -70px; } /* =Links -----------------------------------------------------------------------------*/ a:link, a:visited { color: #2eb4ef; text-decoration: underline; } a:hover { color: #F21846; text-decoration: underline; } #sidebar h4 { background: url(images/button.jpg) no-repeat; height: 33px; width: 143px; font-size: 130%; margin-top: 10px; padding-top: 5px; padding-left: 10px; } #services h4 { background: url(images/button.jpg) no-repeat; height: 33px; width: 143px; font-size: 130%; margin-top: 10px; padding-top: 5px; padding-left: 10px; margin-top: 220px; } a.sidebarlink:link, a.sidebarlink:visited { text-decoration: none; color: #fff; } a.sidebarlink:hover, a.sidebarlink:active { color: #720B21 } body#contact #sidebar h4 { background: url(images/buttonyellow.jpg) no-repeat; height: 33px; width: 143px; font-size: 130%; margin-top: 10px; padding-top: 5px; padding-left: 10px; } /* =Branding -----------------------------------------------------------------------------*/ /* text indent moves the link off the page, width and height define the clickable area */ #logolink { text-indent: -9999px; position: absolute; width: 240px; height: 162px; left: 1000px; top: 43px;} /* =Main Nav -----------------------------------------------------------------------------*/ #nav { text-align:center; width: 550px; padding-top: 70px; } ul#nav li { display:inline} /* this makes the menu display horizontally in ie (has to be a seperate rule) */ ul#nav a { display: block; float: left; font-size: 130%; padding: 0.2em; margin-right: 1em; width: auto; } #nav a:link, #nav a:visited { color: color: #2eb4ef; text-decoration: underline; } #nav a:hover { color: color: #F21846; text-decoration: underline; } /* =Homepage Content -----------------------------------------------------------------------------*/ #intro { height: 300px; background: url(images/intro.jpg) no-repeat center top; } #services { height: 380px; width: 960px; background: url(images/servicesbox.jpg) no-repeat center top; } #howwecanhelp { width: 960px; float: left; padding-bottom: 30px; background: url(images/howwecanhelp.jpg) no-repeat right bottom; } #about { width: 525px; float: right; padding-bottom: 30px; } #service1 { width: 260px; float: left; text-align: center; margin: 0 0 0 59px; } #service2 { width: 260px; float: left; text-align: center; } #service3 { width: 260px; float: left; text-align: center; } /* =Main Content -----------------------------------------------------------------------------*/ #maincontent { padding-bottom: 50px; margin-top: -50px; margin-bottom: 20px; } .intropara { max-width: 400px; } #subcontent { height: auto; } #mainlist { width: 525px; float: left; padding-bottom: 30px; } #mainlist p, h2, ul { margin-right: 40px; } #sidebar { width: 400px; height: 450px; float: right; margin: 53px 25px 0px 0px; padding-bottom: 30px; background: url(images/box.jpg) no-repeat center top; } #sidebar p { margin-top: 10px; } #sidebar h3 { margin-top: 20px; } #sidebarhome { width: 345px; height: 450px; float: left; margin: 53px 25px 0px 50px; padding-bottom: 30px; background: url(images/box.jpg) no-repeat center top; } #sidebarhome p { margin-top: 10px; } #sidebarhome h3 { margin-top: 20px; } #contactform { width: 500px; float: left; margin-bottom: 0px; } body#payroll #maincontent { background: url(images/payroll.jpg) no-repeat center bottom; } body#accounts #maincontent { background: url(images/accounts.jpg) no-repeat center bottom; } body#bookkeeping #maincontent { background: url(images/books.jpg) no-repeat center bottom; } body#contact #sidebar { background: url(images/boxyellow.jpg) no-repeat center top; } body#error #maincontent { background: url(images/error.jpg) no-repeat center bottom; } /* =Footer -----------------------------------------------------------------------------*/ #footer { clear: both; position: relative; margin-top: -141px; height: 141px; background: #333333; } #foot { width: 960px; margin: 0 auto; padding-bottom: 110px; padding-top: 15px; } #foot p { max-width: 490px;} #bottom { background: url(images/bottomcurve.jpg) no-repeat top; height: 29px; margin-top: -3px; } #copyright { float: left; } #credit { float: right; } /* =Forms -----------------------------------------------------------------------------*/ /* Removes fieldset borders. even on Opea 7 */ fieldset { border: 1px solid transparent; } /* =Tables -----------------------------------------------------------------------------*/ table { border-spacing: 0; border-collapse: collapse; } td { text-align: left; font-weight: normal; } /* =Misc 1 -----------------------------------------------------------------------------*/ .list li { background: url(images/plus.jpg) no-repeat 0 50% ; padding-left: 23px; margin-left: -23px; } /* =Misc 2 -----------------------------------------------------------------------------*/