@charset "utf-8";
/* ----- SECTOR STYLES - G&J Seddon ----- */

/* Site colours:
Red - #ee2d24
Dark grey - #737373
Light grey - #f2f2f2
Grey for text - #a7a9ac
*/

body {background: url(../images/global/body-background-tile.gif) left top repeat-x scroll;}

/* black content bar */
#blackContentBar {height: 252px;}
#blackContentBar .blackContentBarLeft img {margin: 65px 0 5px 8px;}
#blackContentBar .blackContentBarLeft ul {margin-left: 8px;}
#blackContentBar .blackContentBarLeft ul li {background: url(../images/global/cross-white.gif) 0em 0.7em no-repeat scroll; line-height: 20px; color: #fff; padding-left: 8px;}
#blackContentBar .blackContentBarRight {border: none!important;}
#blackContentBar .blackContentBarRight #mainPhoto {position: relative; margin: 0; padding: 0; float: left;}
#blackContentBar .blackContentBarRight #mainPhoto img {float: left;}
/* opacity */
#blackContentBar .blackContentBarRight #mainPhoto #overlay {position: absolute; width: 468px; height: 38px; left: 0; bottom: 0; background: #000; filter: alpha(opacity=70); filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70); -moz-opacity: 0.70; opacity:0.70;}
/* end opacity */
#blackContentBar .blackContentBarRight #mainPhoto h3 {position: absolute; left: 17px; bottom: 11px; color: #fff; font-weight: bold; margin: 0; padding: 0; font-size: 1em;}
#blackContentBar .blackContentBarRight #mainPhoto p {position: absolute; right: 0; bottom: 11px; width: 200px; padding: 0 17px 0 0; margin: 0; text-align: right;}
#blackContentBar .blackContentBarRight #mainPhoto p a {color: #fff; font-weight: bold; font-size: 1em; text-decoration: none; background: url(../images/global/cross-red.gif) 0em 0.3em no-repeat scroll; padding-left: 10px;}
#blackContentBar .blackContentBarRight #mainPhoto p a:hover {text-decoration: underline;}
#blackContentBar ul#caseStudies {position: relative; float: right; width: 127px; margin: 0; padding: 0; }
#blackContentBar ul#caseStudies li {width: 127px; height: 83px; border-bottom: 1px solid #000; background: #343535; color: #fff; font-weight: bold; font-size: 1em;}
#blackContentBar ul#caseStudies li.selected {background: #ee2d24;}
#blackContentBar ul#caseStudies li.third {height: 84px; border: none;}
#blackContentBar ul#caseStudies li a {color: #fff; text-decoration: none; display: block; width: 107px; height: 63px; padding: 10px; cursor:pointer;}
#blackContentBar ul#caseStudies li.third a {height: 64px;}
#blackContentBar ul#caseStudies li a:hover {text-decoration: underline;}


/* project porfolio */
#lowerContent fieldset#projectPortfolio {width: 281px; background: #e3e3e4; padding: 20px 10px; float: left;}
#lowerContent fieldset#projectPortfolio h3 {font-size: 1.2em;}
#lowerContent fieldset#projectPortfolio p {margin: 10px 0 0; padding: 0; font-size: 1em; line-height: 16px;}
#lowerContent fieldset#projectPortfolio select {width: 250px; margin: 10px 0 0;}
#lowerContent fieldset#projectPortfolio a {display: block; margin: 15px 0 0; padding: 0 0 0 12px; color: #000; font-weight: bold; background: url(../images/global/cross-red.gif) 0em 0.4em no-repeat scroll;}

#lowerContent #contentRight {background: url(../images/global/red-arrow-large.gif) 1.2em 2.1em no-repeat scroll; float: left; margin: 0; padding: 0; width: 543px; padding: 20px 14px 0 39px;}
#lowerContent #contentRight h2 {margin: 0; padding: 0; color: #a7a9ac; line-height: auto; font-size: 1.8em;}
#lowerContent #contentRight ul li {margin:0 0 0 10px; padding: 0 0 2px 12px; background: url(../images/global/red-square-bullet.gif) 0em 0.5em no-repeat scroll;}
#lowerContent #contentRight.one .rightcol {display:none;}
#lowerContent #contentRight.one .leftCol {width: 534px; float: left; padding: 30px 0 0;}


#lowerContent #contentRight.two .leftCol {width: 260px; float: left; padding: 30px 0 0; margin-right: 20px;}
#lowerContent #contentRight.two .rightCol {width: 260px; float: left; padding: 30px 0 0;}
#lowerContent #contentRight .leftCol h3,
#lowerContent #contentRight .rightCol h3 {font-size: 24px; margin: 0 0 10px; padding: 0;}
#lowerContent #contentRight .leftCol p a.more,
#lowerContent #contentRight .rightCol p a.more {font-weight: bold; padding-left: 12px; background: url(../images/global/cross-red.gif) 0em 0.3em no-repeat scroll; color: #000;}