/*----------------------------------------------------------------------------- Copyright: Copyright (C) 2008 7accross. All rights reserved. Filename: main.css Description: Main / Basic styles Version: 1.0 Author: Matt Richards Date Created: 9th April 2008 Last Updated: 16th June 2008 Last Updated By: Matt Wilcox ------------------------------------------------------------------------------- Email: web [at] viewcreative [dot] co [dot] uk ------------------------------------------------------------------------------- This file is not a template and may not be reproduced. So there. :p# ------------------------------------------------------------------------------*/ html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline;} body { line-height: 1; color: black; background: white; } ol, ul { list-style: none; } table { border-collapse: separate; border-spacing: 0; } caption, th, td { text-align: left; font-weight: normal; } blockquote:before, blockquote:after, q:before, q:after { content: ""; } blockquote, q { quotes: "" ""; } /* =reset.css many thanks to Mr Meyer. http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ -----------------------------------------------------------------------------*/ body {background: url(../images/body-bg.gif); font: 62.5%/200% Georgia, "Times New Roman", "Helvetica Neue", helvetica, arial, sans-serif; color : #463529;} /* =body -----------------------------------------------------------------------------*/ #container {position: relative; width: 1000px; min-height: 900px; margin: 0 auto; font-size: 120%; } #container h1 {position: absolute; top: 25px; left: 20px;} #container h1 span {position: absolute; left: -99999em;} #container h4 {position: absolute; top: 25px; right: 20px;} #container h4 span {position: absolute; left: -99999em;} #container img#tree {position: absolute; top: 25px; left: 50%; margin: 0 0 0 -237px;} #container img#roots {position: absolute; top: 0; left: 50%; margin: 0 0 0 -191px;} #container.content h1 a {display: block; width:209px; height: 52px;} /* =#container -----------------------------------------------------------------------------*/ #navigation li a {position: absolute; display: block; width: 48px; height: 48px; z-index: 900; } #navigation li a span {position: absolute; left: -99999em;} #home #navigation .consultancy a {top:390px; left: 289px; } #home #navigation .roots-of-success a {top: 473px; left: 335px;} #home #navigation .tailored-for-growth a {top: 493px; left: 415px;} #home #navigation .services a {top: 479px; left: 474px;} #home #navigation .meet-the-7across-team a {top: 486px; left: 551px;} #home #navigation .case-studies a {top: 444px; left: 572px;} #home #navigation .contact-us a {top: 383px; left: 629px;} #navigation .consultancy a:hover, #navigation .consultancy a:active {background: url(../images/bg-consultancy-nav-active.png) scroll no-repeat 50% 50%;} #navigation .roots-of-success a:hover, #navigation .roots-of-success a:active {background: url(../images/bg-roots-of-success-nav-active.png) scroll no-repeat 50% 50%;} #navigation .tailored-for-growth a:hover, #navigation .tailored-for-growth a:active {background: url(../images/bg-tailored-for-growth-nav-active.png) scroll no-repeat 50% 50%;} #navigation .services a:hover, #navigation .services a:active {background: url(../images/bg-services-nav-active.png) scroll no-repeat 50% 50%;} #navigation .meet-the-7across-team a:hover, #navigation .meet-the-7across-team a:active {background: url(../images/bg-meet-the-7across-team-nav-active.png) scroll no-repeat 50% 50%;} #navigation .case-studies a:hover, #navigation .case-studies a:active {background: url(../images/bg-brown-nav-active.png) scroll no-repeat 50% 50%;} #navigation .contact-us a:hover, #navigation .contact-us a:active {background: url(../images/bg-contact-us-nav-active.png) scroll no-repeat 50% 50%;} .content #navigation .consultancy a {top:63px; left: 290px; } .content #navigation .roots-of-success a {top: 170px; left: 334px;} .content #navigation .tailored-for-growth a {top: 199px; left: 424px;} .content #navigation .services a {top: 180px; left: 492px;} .content #navigation .meet-the-7across-team a {top: 189px; left: 577px;} .content #navigation .case-studies a {top: 134px; left: 599px;} .content #navigation .contact-us a {top: 57px; left: 662px;} #consultancy.content #navigation .consultancy a {background: url(../images/bg-consultancy-nav-active.png) scroll no-repeat 50% 50%;} #roots-of-success.content #navigation .roots-of-success a {background: url(../images/bg-roots-of-success-nav-active.png) scroll no-repeat 50% 50%; z-index : 10;} #tailored-for-growth.content #navigation .tailored-for-growth a {background: url(../images/bg-tailored-for-growth-nav-active.png) scroll no-repeat 50% 50%;} #services.content #navigation .services a {background: url(../images/bg-services-nav-active.png) scroll no-repeat 50% 50%; z-index : 10; } #meet-the-7across-team.content #navigation .meet-the-7across-team a {background: url(../images/bg-meet-the-7across-team-nav-active.png) scroll no-repeat 50% 50%;} #case-studies.content #navigation .case-studies a {background: url(../images/bg-brown-nav-active.png) scroll no-repeat 50% 50%;} #contact-us.content #navigation .contact-us a {background: url(../images/bg-contact-us-nav-active.png) scroll no-repeat 50% 50%;} /* =#navigation -----------------------------------------------------------------------------*/ #consultancy #container {background: url(../images/bg-consultancy.png) scroll no-repeat 50px 250px;} #consultancy #content {position: absolute; top: 300px; left: 50%; width: 500px; min-height: 220px; background: url(../images/bg-consultancy-content-left.png) scroll no-repeat 0 0;} #consultancy #content .wrapper {width: 380px; padding: 20px 60px 5px 60px; background: url(../images/bg-consultancy-content-right.png) scroll no-repeat 100% 0%;} #consultancy #content h2 {text-indent: -99999em; width: 380px; height: 49px; margin: 0 0 10px 0; background: url(../images/bg-consultancy-h2.png) scroll no-repeat 0 10px; border-top: 1px dashed #ccc; border-bottom: 1px dashed #ccc;} /* =#consultancy -----------------------------------------------------------------------------*/ #roots-of-success #container {background: url(../images/bg-roots-of-success.png) scroll no-repeat 80% 200px;} #roots-of-success #content {position: absolute; top: 275px; left:50px; width: 500px; min-height: 220px; background: url(../images/bg-roots-of-success-content-left.png) scroll no-repeat 0 0;} #roots-of-success #content .wrapper {min-height: 140px; width: 380px; padding: 20px 60px 5px 60px; background: url(../images/bg-roots-of-success-content-right.png) scroll no-repeat 100% 0%;} #roots-of-success #content h2 {text-indent: -99999em; width: 380px; height: 51px; margin: 0 0 10px 0; background: url(../images/bg-roots-of-success-h2.png) scroll no-repeat 0 10px; border-top: 1px dashed #ccc; border-bottom: 1px dashed #ccc;} /* =#roots-of-success -----------------------------------------------------------------------------*/ #tailored-for-growth #container {background: url(../images/bg-tailored-for-growth.png) scroll no-repeat 50px 150px;} #tailored-for-growth #content {position: absolute; top: 250px; left: 50%; margin-left: -50px; width: 520px; min-height: 220px; background: url(../images/bg-tailored-for-growth-content-left.png) scroll no-repeat 0 20px;} #tailored-for-growth #content .wrapper {min-height: 220px; width: 400px; padding: 20px 70px 20px 70px; background: url(../images/bg-tailored-for-growth-content-right.png) scroll no-repeat 100% 20px;} #tailored-for-growth #content h2 {text-indent: -99999em; width: 380px; height: 50px; margin: 0 0 10px 0; background: url(../images/bg-tailored-for-growth-h2.png) scroll no-repeat 0 10px; border-top: 1px dashed #ccc; border-bottom: 1px dashed #ccc;} /* =#tailored-for-growth -----------------------------------------------------------------------------*/ #services #container {background: url(../images/bg-services.png) scroll no-repeat 100% 600px;} #services #content {position: absolute; top: 250px; left: 50%; margin-left: -50px; width: 520px; min-height: 220px; background: url(../images/bg-services-content-left.png) scroll no-repeat 0 20px;} #services #content .wrapper {min-height: 220px; width: 400px; padding: 20px 70px 20px 70px; background: url(../images/bg-services-content-right.png) scroll no-repeat 100% 20px;} #services #content h2 {text-indent: -99999em; width: 380px; height: 50px; margin: 0 0 10px 0; background: url(../images/bg-services-h2.png) scroll no-repeat 0 10px; border-top: 1px dashed #ccc; border-bottom: 1px dashed #ccc;} #services #content ul li {list-style: inside none; list-style-type : none; padding: 0 0 0 25px; margin-top: .5em; background: url(../images/li.gif) 0 4px no-repeat; } #services #sub-content {position: absolute; top:280px; left: 100px; width: 300px;} #services #sub-content h3 {width: 207px; height: 38px; text-indent: -99999em; cursor:pointer; } #services #sub-content h4 {text-transform: uppercase; letter-spacing: 2px; } #services #sub-content li div {padding: 0 20px 0 10px; width: 295px;} #services #sub-content li div p {margin: 0 0 1em 0;} #services #sub-content #aiming-high h3 {background: url(../images/bg-services-sub-content-aiming-high.png) scroll no-repeat 0 0;} #services #sub-content #reaching-your-customers h3 {background: url(../images/bg-services-sub-content-reaching-your-customers.png) scroll no-repeat 0 0;} #services #sub-content #funding-success h3 {background: url(../images/bg-services-sub-content-funding-success.png) scroll no-repeat 0 0;} #services #sub-content #making-connections h3 {background: url(../images/bg-services-sub-content-making-connections.png) scroll no-repeat 0 0;} #services #jquery-content { position: absolute; top: 440px; left: 112px; width: 300px; } /* =#tailored-for-growth -----------------------------------------------------------------------------*/ #meet-the-7across-team #container {background: url(../images/bg-meet-the-7across-team.png) scroll no-repeat 91.5% 540px;} #meet-the-7across-team #content {position: absolute; top: 280px; left: 100px; width: 500px; min-height: 220px; background: url(../images/bg-meet-the-7across-team-content-left.png) scroll no-repeat 0 0;} #meet-the-7across-team #content .wrapper {min-height: 130px; width: 380px; padding: 20px 60px 20px 60px; background: url(../images/bg-meet-the-7across-team-content-right.png) scroll no-repeat 100% 0%;} #meet-the-7across-team #content h2 {text-indent: -99999em; width: 380px; height: 51px; margin: 0 0 10px 0; background: url(../images/bg-meet-the-7across-team-h2.png) scroll no-repeat 0 10px; border-top: 1px dashed #ccc; border-bottom: 1px dashed #ccc;} #meet-the-7across-team #content ul li {list-style: inside disc; padding: 0 0 0 25px;} #meet-the-7across-team #sub-content {position: absolute; top:300px; right: 100px; width: 200px;} #meet-the-7across-team #sub-content h3 {width: 273px; height: 38px; text-indent: -99999em; cursor: pointer;} #meet-the-7across-team #sub-content h4 {text-transform: uppercase; letter-spacing: 2px;} #meet-the-7across-team #sub-content li div {padding: 0 20px 0 10px; width: 205px;} #meet-the-7across-team #sub-content li div p {margin: 0 0 1em 0;} #meet-the-7across-team #sub-content #richard-melling h3 {background: url(../images/bg-meet-the-7across-team-h3-richard-melling.png) scroll no-repeat 0 0;} #meet-the-7across-team #sub-content #stewart-jones h3 {background: url(../images/bg-meet-the-7across-team-h3-stewart-jones.png) scroll no-repeat 0 0;} #meet-the-7across-team #sub-content #simon-cotton h3 {background: url(../images/bg-meet-the-7across-team-h3-simon-cotton.png) scroll no-repeat 0 0;} #meet-the-7across-team #sub-content #eduard-sparkes h3 {background: url(../images/bg-meet-the-7across-team-h3-eduard-sparkes.png) scroll no-repeat 0 0;} #meet-the-7across-team #sub-content #claire-owen h3 {background: url(../images/bg-meet-the-7across-team-h3-claire-owen.png) scroll no-repeat 0 0;} #meet-the-7across-team #sub-content #ros-jones h3 {background: url(../images/bg-meet-the-7across-team-h3-ros-jones.png) scroll no-repeat 0 0;} #meet-the-7across-team #content .wrapper div { margin-top : 2em; } /* =#meet-the-7across-team -----------------------------------------------------------------------------*/ #case-studies #container {background: url(../images/bg-case-studies.png) scroll no-repeat 50px 200px;} #case-studies #content {position: absolute; top: 300px; left:50%; width: 500px; min-height: 220px; background: url(../images/bg-case-studies-content-left.png) scroll no-repeat 0 0;} #case-studies #content .wrapper {min-height: 220px; width: 380px; padding: 20px 60px 20px 60px; background: url(../images/bg-case-studies-content-right.png) scroll no-repeat 100% 0%;} #case-studies #content h2 {text-indent: -99999em; width: 380px; height: 51px; margin: 0 0 10px 0; background: url(../images/bg-case-studies-h2.png) scroll no-repeat 0 10px; border-top: 1px dashed #ccc; border-bottom: 1px dashed #ccc;} #case-studies #content h3 {font-size: 1.2em; font-weight: bold; margin: 1.5em 0 1em 0;} #case-studies #content p {margin-bottom: 1em;} #case-studies #content .case-study {background: url(../images/bg-dashes.png) scroll repeat-x 0 100%; padding: 0 0 1em 0;} #case-studies #content .video-player {min-height: 100px; width: 280px; padding: 0px 70px 10px 90px; background: url(../images/bg-case-studies-content-right.png) scroll no-repeat 100% 0%;} /* sexify the case studies page when JS is available */ #case-studies ul.dynamic { position: absolute; left : -400px; top : 100px; width : 273px; padding: 12px 0 0 12px; border-top: 1px dashed #ccc; border-bottom: 1px dashed #ccc; } #case-studies ul.dynamic li { display : inline; list-style-type : none; list-style-position : outside; } #case-studies ul.dynamic li a { float : left; display : block; width : 75px; height : 75px; border: 2px solid #C8C6BB; margin : 0 12px 12px 0; overflow : hidden; text-indent : -999em; } #case-studies ul.dynamic li a:hover { border-color : #5A8E63; } #case-studies ul.dynamic li.case-study-1 a { background : url(../images/case-study-1.jpg) 0 0 no-repeat; } #case-studies ul.dynamic li.case-study-2 a { background : url(../images/case-study-2.jpg) 0 0 no-repeat; } #case-studies ul.dynamic li.case-study-3 a { background : url(../images/case-study-3.jpg) 0 0 no-repeat; } #case-studies ul.dynamic li.case-study-4 a { background : url(../images/case-study-4.jpg) 0 0 no-repeat; } #case-studies ul.dynamic li.case-study-5 a { background : url(../images/case-study-5.jpg) 0 0 no-repeat; } #case-studies ul.dynamic li.case-study-6 a { background : url(../images/case-study-6.jpg) 0 0 no-repeat; } #case-studies ul.dynamic li.case-study-7 a { background : url(../images/case-study-7.jpg) 0 0 no-repeat; } #case-studies ul.dynamic li.case-study-8 a { background : url(../images/case-study-8.jpg) 0 0 no-repeat; } #case-studies ul.dynamic li.case-study-9 a { background : url(../images/case-study-9.jpg) 0 0 no-repeat; } #case-studies #temp-image { position: absolute; left : -388px; top : 113px; cursor : pointer; } /* =#case-studies -----------------------------------------------------------------------------*/ #contact-us #container {background: url(../images/bg-contact-us.png) scroll no-repeat 50px 200px;} #contact-us #content {position: absolute; top: 300px; left:50%; width: 500px; min-height: 220px; background: url(../images/bg-contact-us-content-left.png) scroll no-repeat 0 0;} #contact-us #content .wrapper {min-height: 125px; width: 380px; padding: 20px 60px 20px 60px; background: url(../images/bg-contact-us-content-right.png) scroll no-repeat 100% 0%;} #contact-us #content h2 {text-indent: -99999em; width: 380px; height: 41px; margin: 0 0 10px 0; background: url(../images/bg-contact-us-h2.png) scroll no-repeat 0 10px; border-top: 1px dashed #ccc; border-bottom: 1px dashed #ccc;} #contact-us #content h3 {font-size: 1.2em; font-weight: bold; margin: 1.5em 0 1em 0;} #contact-us #content p {margin-bottom: 1em;} /*#contact-us #content #hcard-7across .fn*/ #contact-us #content #hcard-7across .adr {float: left; width: 30%; clear: left;} /*#contact-us #content #hcard-7across .tel {margin: -1.5em 0 0 0;}*/ #contact-us #content #hcard-7across .tel, #contact-us #content #hcard-7across .email {float: right; width: 60%; clear: right; text-align: right; font-size: 1.3em; line-height: 2em;} /* =#contact-us -----------------------------------------------------------------------------*/ .tooltip {border: 3px double #C0AB9C; background: url(../images/bg-tooltip.png); padding: 5px; font-family: "Georgia", "Times New Roman", "Serif"; color: #9B7C6E; /*text-transform: lowercase;*/ } /* =.tooltip -----------------------------------------------------------------------------*/ a:link, a:hover, a:visited, a:active { color : #D1020E; } strong { font-weight : bold; }