/********************** * Global CSS - Commonhead * Author - Becky Coyle * website colours - **********************/ /********************** * Global Styles **********************/ * {font-size:100%; margin:0; padding:0;} html, body {height:100%;} body { background:#000 url('../images/backgrounds/body-bg.jpg') repeat 0 100%; color:#a5a5a5; height:100%; font:80%/1.3 Arial, Helvetica, sans-serif; } h1, h2, h3, h4, h5, h6 {font-family: Arial, Helvetica, sans-serif; margin:0; padding:0} h1, h2, h3 {color:#fff; font-weight:normal; line-height:1; text-transform:uppercase;} h1 {font-size:250%; margin:25px 0 20px 0;} h2 {font-size:180%;} h3 {font-size:125%; font-weight:bold; margin-bottom:1em;} ul, li {margin:0; padding:0;} a {color:#fff; text-decoration:none;} a:hover {color:#8cc640; text-decoration:underline;} embed {background:black} li {list-style-type:none;} fieldset {border:none;} p {margin-bottom:0.75em;} ul, li {margin:0; padding:0;} /********************** * GLOBAL CLASSES **********************/ a.action, a.external, a.email, a.download, a.playSound {background:url('../images/graphics/matrix.gif') 100% 0 no-repeat;} a.action {background-position:-18px -95px; padding-left:12px; text-decoration:underline;} a.external {background-position:100% 4px; padding-right:12px;} a.email {background-position:-14px -195px; padding-left:18px;} a.download {background-position:-16px -392px; padding-left:18px;} a.playSound {background-position:-10px -292px; padding-left:20px;} .col25 {width:24%} .col75 {width:74%} .floatLeft {float:left;} .floatRight {float:right;} .important {color:#8cc640;} .mandatory {font-size:90%;} .overflow {overflow:hidden} /********************** * Content **********************/ #wrapperContainer {height:100%; position:relative;} #wrapper { background:url('../images/backgrounds/main-bg.png') repeat 0 0; margin-left:60px; width:980px;} #contentWrapper {background:transparent url('../images/graphics/horizontal-dotted-divide.gif') repeat-x scroll 0 0; border-left:5px solid #000; border-right:5px solid #000; border-bottom:5px solid #000; clear:both; height:1%; overflow:hidden; position:relative; } #mainContentWrapper {background:url('../images/graphics/vertical-dotted-divide.gif') repeat-y 543px 0; float:left; overflow:hidden; padding:0 0 0 20px; position:relative; width:950px;} #mainContentWrapper.alt {background:none;} #mainContentWrapper.people {background:url('../images/graphics/vertical-dotted-divide.gif') repeat-y 430px 0;} #mainContent {float:left; margin-right:25px; padding-bottom:20px; width:499px;} #mainContentWrapper.people #mainContent {width:385px !important;} #altContent {float:right; height:350px; margin-right:0; overflow:hidden; padding:5px 0 5px 5px; width:421px;} a img {border:0;} a img#logo {margin:10px 0 10px 55px;} div#wrapper, img#logo {behavior:url(js/iepngfix.htc) } /* Content Lists */ ul.actionLinks {margin-top:2em;} ul.actionLinks li {margin-bottom:0.25em;} /* Sections */ .section, .sectionDotted {background:transparent url('../images/graphics/horizontal-dotted-divide.gif') repeat-x scroll 0 0; margin-top:2em; padding-top:1.5em; overflow:hidden;} /* People */ #mainContentWrapper.people #altContent {overflow:hidden; padding-left:0; width:534px; height:438px; } #mainContentWrapper.people #altContent.person {height:auto; width:539px } #altContent.person .sectionDotted {margin-top:8px; padding:15px 10px 5px 10px} ul#people li {float:left; margin-bottom:0.75em; padding-right:13px; width:83px;} ul#people li.last {padding-right:0;} ul#people li h3 {color:#fff; font-size:90%; font-weight:normal; line-height:1.2; margin-bottom:0.5em; text-transform:none;} ul#people li a h3 {text-decoration:underline;} ul#people li a h3:hover {color:#8cc640;} ul#people li p.description {font-size:85%; line-height:1;} ul#people li.active img {opacity: 0.4; filter:alpha(opacity=40); /* IE 5.5, IE6 & IE7 */} ul#people li.active h3 {color:#848484} img#peopleMain {border:3px solid #000; margin:5px 0 0 10px;} #altContent .important {font-size:90%; margin-bottom:1.5em;} /* Showreels */ .sample {background:transparent url('../images/graphics/horizontal-dotted-divide.gif') repeat-x scroll 0 0; margin-top:1.5em; padding-top:1.5em;} #altContent.video {height:250px} /* Location */ div#googleMap {width:421px; height:350px;} /* Sitemap */ .sitemap {margin-bottom:30px;} .sitemap li {background:url('../images/graphics/green-arrow.gif') 0 6px no-repeat; padding-left:12px; margin-bottom:0.5em} .sitemap li ul {margin:0.5em 0 1em 0} /********************** * Navigation **********************/ #navigation {background: url('../images/backgrounds/navigation.png') repeat-x 0 0; height:49px; position:relative; width:980px;} #navigation ul li {background: url('../images/graphics/nav-matrix.png') no-repeat 0 0; float:left; height:46px; margin-top:3px; overflow:hidden; position:relative;} #navigation ul li span {display:block; left:0; height:46px; position:absolute; top:0; z-index:200;} #navigation li.home {width:88px} #navigation li.services {width:98px} #navigation li.studio {width:93px} #navigation li.people {width:86px;} #navigation li.showreels {width:122px;} #navigation li.location {width:107px;} #navigation li.contact {width:103px;} #navigation li.links {width:67px;} #navigation li.clientLogin {float:right; width:161px} #navigation li.home a span, #navigation li.services a span, #navigation li.studio a span, #navigation li.people a span, #navigation li.showreels a span, #navigation li.location a span, #navigation li.contact a span, #navigation li.links a span, #navigation li.clientLogin a span {background:transparent url('../images/graphics/nav-matrix.png') no-repeat 0 0; cursor: pointer;} #navigation li.home a span {background-position: 0 0; width:88px;} #navigation li.services a span {background-position: -88px 0; width:98px;} #navigation li.studio a span {background-position: -186px 0; width:93px;} #navigation li.people a span {background-position: -279px 0; width:86px;} #navigation li.showreels a span {background-position: -365px 0; width:123px;} #navigation li.location a span {background-position: -487px 0; width:107px;} #navigation li.contact a span {background-position: -594px 0; width:103px;} #navigation li.links a span {background-position: -697px 0; width:67px;} #navigation li.clientLogin a span {background-position: -819px 0; width:161px;} #navigation li.home a:hover span {background-position: 0 -46px; width:88px;} #navigation li.services a:hover span {background-position: -88px -46px; width:98px;} #navigation li.studio a:hover span {background-position: -186px -46px; width:93px;} #navigation li.people a:hover span {background-position: -279px -46px; width:86px;} #navigation li.showreels a:hover span {background-position: -365px -46px; width:123px;} #navigation li.location a:hover span {background-position: -487px -46px; width:107px;} #navigation li.contact a:hover span {background-position: -594px -46px; width:103px;} #navigation li.links a:hover span {background-position: -697px -46px; width:67px;} #navigation li.clientLogin a:hover span {background-position: -819px -46px; width:161px;} #navigation li.home a.active span {background-position: 0 -92px; width:88px;} #navigation li.services a.active span {background-position: -88px -92px; width:98px;} #navigation li.studio a.active span {background-position: -186px -92px; width:93px;} #navigation li.people a.active span {background-position: -279px -92px; width:86px;} #navigation li.showreels a.active span {background-position: -365px -92px; width:123px;} #navigation li.location a.active span {background-position: -487px -92px; width:107px;} #navigation li.contact a.active span {background-position: -594px -92px; width:103px;} #navigation li.links a.active span {background-position: -697px -92px; width:67px;} /********************** * Footer **********************/ #footerContainer div#footer {position:relative; padding:8px 20px;} #footer p {float:left; margin-bottom:0;} #footer p strong {color:#fff;} #footer ul {float:right;} #footer li {background:url('../images/graphics/vertical-dotted-divide.gif') repeat-y 0 0; display:inline; padding-left:15px; margin-left:15px;} #footer li.first {background:none;} #footer a.email {background-position:-13px -197px; padding-left:16px;} #footer a.external {background-position:100% 2px;} #footerContainer { font-size:80%; overflow:visible; margin:-30px auto 0 auto; position:relative; width:100%; z-index:1; } /********************** * Forms **********************/ form {font-family:Arial, Helvetica, sans-serif; margin-top:1em;} form div {overflow:auto; margin-bottom:1em;} form input, form textarea { background:#000; border:1px solid #3d3d3d; clear:both; color:#3d3d3d; float:left; font-size:95%; padding:3px;} form textarea {float:left; font-family:Arial, Helvetica, sans-serif; width:361px;} form label {float:left; padding-top:2px; width:150px;} form input {font-family:Arial, Helvetica, sans-serif; width:160px; margin-right:15px;} form input.button { background:#000; border:1px solid #3d3d3d; cursor:pointer; font-size:75%; padding:3px 5px 2px 5px; margin:0 11px 0 0; text-transform:uppercase; width:90px;} form input.last {margin-right:0;} form span.asterix, span.asterix {color:#8cc640; } div#enquiryForm {margin-top:65px; padding:20px; width:380px} div#enquiryForm div {width:180px; margin-right:0; overflow:visible;} div#enquiryForm div.fullWidth {clear:both; width:100%;} div#enquiryForm div.formFoot {clear:both; float:right; margin:10px 0 0 0; overflow:visible;} /* Errors */ ul.error {color:#cf142b; list-style-type:none !important; padding-left:0 !important;} .error input, .error select, .error textarea {border-color:#cf142b !important;} .error label {color:#cf142b;} em.error, p.error {color:#cf142b; display:block; font-size:90%;} /********************** * VCARD **********************/ #footer div.vcard {background:none; margin-top:0; padding:0; float:left; width:60%} .vcard h4, .fn, .vcard img.logo, .adr, .type {display:none;} #tel, #fax, span#email {background:url('../images/graphics/vertical-dotted-divide.gif') repeat-y 0 0; padding-left:15px; margin-left:15px;} /********************** * sIFR **********************/ @media screen { .sIFR-flash { visibility: visible !important; margin: 0; padding: 0; } .sIFR-replaced, .sIFR-ignore { visibility: visible !important; } .sIFR-alternate { position: absolute; left: 0; top: 0; width: 0; height: 0; display: block; overflow: hidden; } .sIFR-replaced div.sIFR-fixfocus { margin: 0pt; padding: 0pt; overflow: auto; letter-spacing: 0px; float: none; } } @media print { .sIFR-flash { display : none !important; height : 0; width : 0; position : absolute; overflow : hidden; } .sIFR-alternate { visibility : visible !important; display : block !important; position : static !important; left : auto !important; top : auto !important; width : auto !important; height : auto !important; } } /* Place CSS rules for to-be-replaced elements here. Prefix by .sIFR-active so they only apply if sIFR is active. Make sure to limit the CSS to the screen media type, in order not to have the printed text come out weird. */ @media screen { .sIFR-active h1 { font-family: Verdana; visibility: hidden; }