@charset "utf-8";
/*  
Company: Designers for Designers
URI: http://designers4designers.co.uk
Version: 1.0
Author: Fluke, Al Stevens
Author URI: http://flukelondon.co.uk
*/

/* 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, h4, 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 }
fieldset {display:inline;}
address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal }
ul, li { list-style:none; }
caption, th { text-align:left }
h1, h2, h3, h4, h5, h6{ font-size:16px;}
h3, h4, h5, ol.commentlist li cite, div#sidebar h2, #sidebar #searchform label, div#homepageContent h1 { font-size:1.2em; line-height:1.1em; letter-spacing:-0.01em; font-weight:bold;}
q:before, q:after { content:''}
a { text-decoration:none }

/* Global reset-RESET :) restores some sensible defaults */
strong { font-weight:bold }
em { font-style:italic }
* a { position:relative } /* Gets links displaying over a PNG background */
a img { border:none } /* Gets rid of IE's blue borders */

/* ends Global reset */

/*Page template*/
body { background:url(bg.jpg) top left repeat-x; padding:8px; font-family:Arial, Helvetica, sans-serif; min-height:1100px}
h1, h2, h3, h4 {font-family:Helvetica, Arial, sans-serif; }
#theatre {width:808px; text-align:center; margin:0px auto;}
#environment {display:block; float:left}
#environment .container {width:760px; float:left }
#stage{margin:4px 4px 0 4px; text-align:left; float:left}
#footer {width:794px; margin:0 3px; float:left;text-align:center }

/*header*/
#header {background:#fff url(header.bg.gif) bottom left repeat-x; min-height:198px; height:100%; overflow:visible; width:792px}
/*#featured #header {background:url(header.bg.png) top left repeat-x;}*/
#header div.vcard {padding:0px; float:left; width:100%}
#header div.vcard div.org a {display:block; text-indent:-10000px; overflow:hidden; margin:18px; height:102px;}
#header div.vcard div.org {float:left; width:138px; }
#header div.vcard span.usp{ display:block; float:left; width:285px; height:137px; text-indent:-10000px;}
#header div.vcard div.adr, #header div.vcard span.email {display:none}
#header div.vcard div.tel {float:right; width:217px; height:130px; background:url(d4d.tel.gif) 0 27px no-repeat; text-indent:-10000px;}
#header .twitter{clear:left}
#header .twitter iframe{  position:absolute;  margin:-74px 0 0 606px}

/*navigation*/
#header #navigation ul{ display:block; float:left; width:100%; margin-top:10px}
#header #navigation ul li {display:block; float:left; }
#header #navigation ul li a {display:block; text-indent:-10000px; overflow:hidden; height:50px;width:101px;}

#header #navigation ul li.about a {background-position: 9px 0px; width:118px;}
#header #navigation ul li.interiorJobs a {background-position: -111px 0px;}
#header #navigation ul li.supportJobs a {background-position: -214px 0px;}
#header #navigation ul li.contact a {background-position: -317px 0px; width:105px}
#header #navigation ul li.featured a {background-position: -430px 0px;}

#header #navigation ul li.about a:hover {background-position: 9px -50px; width:118px;}
#header #navigation ul li.interiorJobs a:hover {background-position: -111px -50px;}
#header #navigation ul li.supportJobs a:hover {background-position: -214px -50px;}
#header #navigation ul li.contact a:hover {background-position: -317px -50px;}
#header #navigation ul li.featured a:hover {background-position: -430px -50px;}
#header .tweetButton {float:right; margin-top:-48px; margin-right:18px}

/*active*/
#about #header #navigation ul li.about a {background-position: 9px -50px; width:118px;}
#interiorJobs #header #navigation ul li.interiorJobs a {background-position: -111px -50px;}
#supportJobs #header #navigation ul li.supportJobs a {background-position: -214px -50px;}
#contact #header #navigation ul li.contact a {background-position: -317px -50px;}
#featuredDesigner #header #navigation ul li.featured a {background-position: -430px -50px;}

/*position featured*/
#header #navigation ul li.featured {margin-left:255px;}

/*main act*/
#mainAct { clear:both; display:block; float:left;background:#00a8d9; padding:16px; }
#homepage #mainAct {background:#60b6e0;}
#mainAct .lighting { height:100%; overflow:visible;background:#00a8d9; float:left; width:760px}
#mainAct #groupOne { float:left;}
#mainAct #groupTwo { float:left; width:667px; margin-bottom:-6px}
#mainAct #groupTwo a { font-style:normal; display:block; padding:4px 18px; -webkit-border-radius:12px; -moz-border-radius:12px; border-radius:12px;float:left; clear:left; margin-top:4px; background:#73D1F6 url(../interface/ra.gif) right top no-repeat;}
#mainAct #groupTwo a:hover {background-color:#B6E4FA;}

#mainAct #groupOne .container{  float:left; margin-bottom:12px;}
/*#mainAct #groupOne .container{ padding:50px 12px 32px 4px; float:left; margin-bottom:12px; width:370px}*/

#mainAct #groupOne .container h1{display:block; text-indent:-10000px; overflow:hidden; height:60px; width:721px; margin-top:18px}

/*headings*/
#homepage .preHeader {display:none;}
#homepage #mainAct #groupOne .container h1 {background:url(../images/homepage.h1.gif) top left no-repeat; margin-left:16px; height:240px; margin-top:60px}
#homepage #mainAct #groupOne .container h1 a {display:block; height:100%; overflow:visible;}
#about #mainAct #groupOne .container h1 { background:url(../images/about.h1.gif) top left no-repeat;}
#interiorJobs #mainAct #groupOne .container h1 {background:url(../images/design.jobs.h1.gif) top left no-repeat;}
#supportJobs #mainAct #groupOne .container h1 { background:url(../images/support.jobs.h1.gif) top left no-repeat;}
#featured #mainAct #groupOne .container h1 { background:url(../images/featured.h1.gif) top left no-repeat; margin-top:18px}

/*column1*/
#mainAct #groupOne .container p {font-size:1.1em; color:#8FD8F8; padding:12px 22px 0px; display:block;}
#mainAct #groupOne .container p.alpha {padding-top:22px;}
#mainAct #groupOne .container p.omega{padding-bottom:48px;}

/*column 2*/
#mainAct #groupTwo .container{ width:auto; background:#fff url(corners.top.gif) 14px 14px no-repeat ; min-height:404px; color:#858789;}
#mainAct #groupTwo .container div {padding:48px 58px; margin:0 14px 14px 0; background: url(corners.bottom.gif) bottom right no-repeat ; }
#mainAct #groupTwo .container div p {display:block}



#homepage #mainAct #groupTwo .container {display:none}
#homepage #mainAct #groupTwo .container p{float:left;display:block;width:10px; height:10px; margin-top:10px; text-indent:-10000px; overflow:hidden}
#homepage #mainAct #groupTwo .container img {float:right; margin-top:2px}


#groupTwo .container h3,#groupTwo .container p {display:block; padding:0px 12px 12pxpx 0px; font-size:0.75em; margin-bottom:12px}
#groupTwo .container h3 { color:#fff; font-size:0.75em; font-weight:normal}
#groupTwo .container h4, #groupTwo .container span.salary, #groupTwo .container span.location, .container span.ref {float:left; padding:0px 2px 0px 0px; display:block; font-weight:bold; font-size:1em; color:#58595B}
#groupTwo .container p {padding-top:16px}
#groupTwo .container span.location {background:none}
#groupTwo .container span.ref {padding-top:0; float:right;}
#mainAct #groupTwo p.expand a {color:#000; font-weight:100}

#groupTwo .container h4:after {content: ':'; }
#groupTwo .container h4 a {color:#58595B; text-decoration:underline}
#groupTwo .container h4 {margin-right:3px;}


/*jobs*/

body.jobsPage #mainAct #groupTwo .container, body.jobsPage #mainAct #groupTwo .container div {background:none; padding:0; margin:0; }
#groupTwo .container div.listing-job p {display:block; clear:left; padding-top:3px; margin-bottom:0}
#groupTwo .container span.salary:after {content:', ';}
body.jobsPage #mainAct #groupOne .container {margin-bottom:0}
body.jobsPage #mainAct #groupTwo .container div.listing-job {background:#fff; padding:8px 12px 8px 26px; margin-bottom:8px; float:left; width:625px; color:#676767}
body.jobsPage #mainAct #groupTwo .container div.jobdetail {margin-top:8px; display:block; float:left}
body.jobsPage #mainAct #groupTwo .container div.jobdetail a {background-color:#ffd000; color:black; margin-bottom:0}

/*about*/

body#about #mainAct #groupTwo .container{ width:auto; background:#fff; min-height:404px; color:#858789;}
body#about #mainAct #groupTwo .container div {padding:24px 20px; margin:0 14px 14px 0; min-height:0;background: none ; }
body#about #mainAct #groupTwo .container div p {clear:both; color:#58B7DD; margin-bottom:0 }
body#about #mainAct #groupTwo .container ul {font-size:1em; color:#43AFD8; font-weight:bold;}
body#about #mainAct #groupTwo .container ul li {background:url(about.li.gif) 0px 4px no-repeat; padding-left:18px; display:block; margin-bottom:12px; line-height:1.4em;}
body#about #groupTwo .container {width:100%}
body#about #mainAct #groupTwo .container .bioPhoto {display:block; float:right; margin:0px 6px 0 0; width:110px}
.bioPhoto span {font-size:0.5em}

/*footer*/

#footer div{ display:block; float:left; width:70%; padding:14px; font-size:0.7em; text-align:left}
#footer div span {display:block; float:right; padding-left:10px; text-align:right}
#footer div.contacts {width:20%;display:block; float:right;}
span.footerExtras { display:block; font-size:0.65em; color:#666666; margin:-12px 0 0 14px; text-align:left; float:left; clear:both} 


#footer div.contact {font-size:9px}


/*New map*/
#contact #groupTwo div.address {display:block; float:left; width:171px; text-indent:-10000px; overflow:hidden; padding-top:8px}
div.photo{display:block; float:left; width:160px;padding-top:8px}
div.map{display:block; float:right; width:326px}
div.map img {float:left}

/*contact us page*/



#contact #groupOne {float:left; width:332px}

#contact #mainAct #groupOne .container h1 {width:330px}
#contact #groupOne h1 {color:#909090; display:block; width:100%; clear:left; background:url(../images/contact.h1.gif) top left no-repeat; text-indent:-10000px; height:64px}
#contact #groupOne h3 {color:#fff; display:block; width:100%; clear:left;}
#contact #groupOne form {display:block; padding-bottom:18px; width:370px; float:left}
#contact #groupOne form label.error {color:#CC0000 ;font-weight:bold;}
#contact #groupOne label {display:block; font-size:0.7em; margin-top:8px}
#contact #groupOne input, #contact #groupOne textarea {width:90%; font-family:Arial, Helvetica, sans-serif; font-size:0.75em}
#contact #groupOne textarea  {height:230px}
#contact #groupOne input.submitButton {width:auto; clear:left; margin-top:6px}

#contact #groupTwo {float:left; width: 420px;}
#contact #groupTwo .container {float:right; width: 325px; clear:none; background:none; margin-top:30px}
#contact #groupTwo .container div.address .email{display:none}
#contact #groupTwo .container div {padding:0; margin:0; min-height:1px; background:none}
#contact #groupTwo .container div.london { height:114px; background:url(../interface/address.london.gif) 0px -2px no-repeat;}
#contact #groupTwo .container div.brighton { height:85px; background:url(../interface/address.brighton.gif) 0px 0px no-repeat;}
#contact #groupTwo .container {background:url(../interface/the-leathermarket.jpg) 172px 0 no-repeat;}
#contact #groupTwo .container .map a {background:none; padding:0; margin:0;}


/*Creative profile version 2*/
#featuredDesigner h2 {color:#00B0D8; margin-bottom:12px; font-weight:normal; font-size:14px}
#featuredDesigner h2 strong{display:block; font-size:16px}
#featuredDesigner #mainAct, #featuredDesigner #mainAct .lighting {background:#fff; }
#featuredDesigner #groupOne {float:right; width:286px; margin-top:24px}
#featuredDesigner #groupOne .container {width:auto}
#featuredDesigner #mainAct #groupTwo {float:left; width:440px}
#featuredDesigner #mainAct #groupTwo .container {background:none; padding-left:6px}
#featuredDesigner #mainAct #groupTwo .container h1 {width:400px; height:86px; text-indent:-10000px; overflow:hidden; background:url(../images/featured.h1.gif) -3px 12px no-repeat;}
#featuredDesigner #mainAct #groupTwo .container p {padding-right:24px}
#featuredDesigner #mainAct #groupTwo .container a {color:#000; font-weight:normal; text-decoration:none}
#featuredDesigner #mainAct #groupTwo .container .creativeProfileEnquiry {margin-top:18px; display:block; clear:left; font-size:0.6em}

/*Gallery*/
ul.gallery {width:300px; display:block; }
ul.gallery li {display:block; float:left;padding:9px 12px 0px 0px; }
ul.gallery li a {display:block; float:left;}

/*Backgrounds to switch for IE6*/
#environment {background:url(canvas.shadow.left.png) top left repeat-y;}
#footer {background:url(canvas.shadow.bottom.png) top center no-repeat; }
#header div.vcard div.org a {background:url(d4d.logo.png) top left no-repeat; }
#header div.vcard span.usp{background:url(d4d.usp.png) 32px 24px no-repeat;}
#header #navigation ul li a {background:url(d4d.navigation.png) top left no-repeat;}