/*------------------------------------------------------------------------------------------------*/
/*-                                            LAYOUT.CSS                                        -*/
/*-THIS IS USED TO DECLARE LAYOUT ONLY, INCLUDING POSISTIONING AND BACKGROUND STYLING OF ELEMENTS-*/
/*-                           IT DOES NOT DECLARE TEXT OR CONTENT STYLING.                       -*/
/*------------------------------------------------------------------------------------------------*/

html {
 background: url(../images/texture.png) repeat top left;
 background-attachment: fixed;
}

body {
 background: url(../images/body_curve.png) no-repeat top left;
 background-attachment: fixed;
 position:absolute;
 width:100%;
 z-index: 1;
}

#whiteBand {
 background: url(../images/whiteBand.png) repeat-y top center;
 background-attachment: fixed;
 position: relative;
 z-index: 2;
}

/* ################################### HEADER LAYOUT #################################*/

#headercontainer {
 width: 100%;
}

#header {
 margin: 0 auto;
 width: 970px;
 padding: 0px 40px 0px 40px;
 height:125px;
}

#logo {
 float: left;
 padding-top:40px;
}

/*Drop us a line box*/
.strapline {
 float: right;
 background: url(../images/call_bg.png) no-repeat top left;
 width:238px;
 height:81px;
 margin-top:20px;
}

/* ################################### NAV LAYOUT #################################*/

#navigationcontainer {
 width: 100%
}

#navigation {
margin: 0 auto;
width: 970px;
background: url(../images/nav_border.png) no-repeat top left;
overflow: hidden;

}
/* ################################### BREADCRUMB LAYOUT #################################*/

#ctl00_mainarea_breadcrumb {
 background: #999;
 float: left;
 padding: 10px 0px 10px 20px;
 width: 760px
}
/* ################################### PAGE LAYOUT #################################*/

#ctl00_maincontainer {
 margin: 0 auto;
 width: 970px;
 padding: 50px 0 0 0;
}

/*homepage*/
#ctl00_maincontainer.homepage {
 margin: 229px auto 0 auto;
 width: 1050px;
 padding: 0;
  position:relative;
 z-index:-9999;
}

/*
#ctl00_maincontainer.homepage {
 margin: 200px auto 0 auto;
 width: 1050px;
 padding: 15px 0 0 0;
}
*/

/*blogpage*/
#ctl00_maincontainer.blogpage {
 margin: 0 auto;
 width: 1050px;
 padding: 40px 0 0 0;
}

#copyarea {
}

#topCorners {
 background: url(../images/blogpage_top.png) no-repeat top right;
 height: 21px;
 width: 700px;
 float: right;
}

#botCorners {
 background: url(../images/blogpage_bot.png) no-repeat top right;
 height: 21px;
 width: 700px;
 float: right;
}

#ctl00_mainarea_content1Content {
 background: #1d1d1d;
 float:right;
 width:640px;
 padding: 0 30px 0 30px;
}

/*This is a wider container for the blog area so that the date tab can fit in*/
#ctl00_mainarea_content1Content.blog {
 float:right;
 width:740px;
 padding: 0 0px 0 0px;
 background: 0;
}

#ctl00_mainarea_content1 {
 float: left;
 height:auto !important;
 height: 300px;
 min-height: 300px;
 padding: 0px 0px 20px 0px;
 width: 700px;
}

#ctl00_mainarea_content1.blog {
 float: left;
 height:auto !important;
 height: 300px;
 min-height: 300px;
 padding: 10px 0px 20px 0px;
 width: 740px;
}

#ctl00_mainarea_content2 {
 float: right;
 height:auto !important;
 height: 300px;
 min-height: 300px;
 padding: 0px 0px 0px 0px;
 width: 245px
}

#ctl00_mainarea_content2.blog {
 float: right;
 height:auto !important;
 height: 300px;
 min-height: 300px;
 padding: 10px 15px 0px 0px;
 width: 270px;
}


#ctl00_mainarea_content3 {
 height: 520px;
 width: auto;
 text-align: center;
 z-index: -1;
 top:-355px;
 left:-65px;
 position:absolute;
}

/* for all browsers apart from IE because its ghey!
#ctl00_mainarea_content3 {
 height: 520px;
 width: auto;
 text-align: center;
 border: solid 1px red;
 position:absolute;
 z-index: -1;
 top:55px;
 margin-left:-55px;
}
*/

#homeFlash {
}

/*
#ctl00_mainarea_content3 {
 position: absolute;
 height:auto !important;
 height: 641px;
 width: 1165px;
 text-align: center;
 top:45px;
 right: 60px;
 z-index: -1;
}
*/


#ctl00_mainarea_sidemenu {
 padding: 0px 0px 0px 0px;
 width: 190px
}

.quotes {
 display: block;
 margin: 11px 0px 0px 0px;
 padding: 0px 0px 0px 0px;
 width: 180px
}

.quotestop {
 background: #8da5c8;
 display: block;
 padding: 6px 0px 6px 15px
}

.quotesmiddle {
 background: #fff;
 border-right:solid 1px #ccc;
 border-left:solid 1px #ccc;
 display: block;
 padding: 10px 15px 1px 15px;
}

.quotesbottom {
 border-bottom:solid 1px #ccc;
 display: block;
}

.newsoverview {
 display: block;
 height:auto !important;
 height: 120px;
 margin: 15px 0px 0px 0px;
 min-height: 120px
}

/*######################################## BLOG PAGE LAYOUT ##############################*/

/*Over all container for each blog post and date tab*/
#ctl00_mainarea_content1Content.blog .blogStory {
    width:740px;
    height:auto;
    padding:0;
}

/*Date tab container*/
.postDate{
     float: left;
     background: url(../images/date_tab.png) no-repeat left top;
     width: 40px;
     height: 45px;
     padding: 2px 0 0 0;
}

/*Post area, excluding the date tab*/
    .blogPost{
     width:640px;
     height: auto;
     background: #1d1d1d;
     padding: 4px 30px 30px 30px;
     float:right;
}

#postedOn {
    border-top:solid 1px #282828;
    padding: 20px 0 0 0;
}

#postedOnLinks {
    float: left;
    width:300px;
}

#postedOnFlickr {
    float: left;
}

#addThis {
    float: right;
    width:180px;
    text-align: right;
}

a.back {
   margin: 0 0 10px 0;
   display: block;
   width:40px;
}

/*################# BlogNav ###########################*/

.blognavTab {
    background: url(../images/blognav_tab.png);
}

/*tabs container*/
#copyarea .blognav {
    width:247px;
    float:left;
}

/*individual tabs*/
#copyarea a.blognavone,
#copyarea a.blognavtwo {
    width:122px;
    height:43px;
    display:block;
    float: left;
    padding: 20px 0 0 0;
}

/*date tab*/
#copyarea a.blognavone {
    background: url(../images/blognavleft.png) no-repeat 0 0;
}

/*tag tab*/
#copyarea a.blognavtwo {
    background: url(../images/blognavright.png) no-repeat 0 0;
    margin-left:1px;
}

/*selected tab*/
#copyarea a.selected {
    background-position: 0 bottom;
}

#copyarea #tab1,
#copyarea #tab2 {
    border: solid 0px red;
    width:245px;
    height:auto;
    margin-top:1px;
    padding-top:5px;
    font-style: italic;
    font-size:1.2em;
}

/*reset the list*/
#copyarea #tab1 ul,
#copyarea #tab2 ul,
#copyarea #tab1 ul li,
#copyarea #tab2 ul li{
    margin:0;
    padding:0;
    list-style: none none;
}

#copyarea #tab1 ul li,
#copyarea #tab2 ul li {
    width:105px;
    float: left;
    border-bottom: solid 1px #1b1b1b;
    padding: 3px 0 3px 15px;
}

/*turn of borders for the tags content*/
#copyarea #tab2 ul li {
    border:0;
}

#copyarea #tab1 ul li.tab1noBorder {
    border:0;
}

#copyarea #tab1 ul li a,
#copyarea #tab2 ul li a{
    font-family: Georgia, Times New Roman, Serif;
    font-size: 0.9em;
    font-weight: normal;
}

#no {
    margin:0 0 0px 40px;
    background: #1d1d1d;
    width:640px;
    padding: 0 30px 0 30px;
}

.blognavtabContent {
    float: left;
    width:605px;
    display:block;
    height:131px;
    background:#1d1d1d;
}

/*########################################################################################
################################ RIGHT HAND COLUMN LAYOUT ##############################*/

.rightControlContainer{
    width: 275px;
    padding: 0px;
    background-position: right 30px;
    background-repeat: no-repeat;
    margin:0px 0 30px 0;
    float: left;
}

#ctl00_mainarea_content2 .rndTop {
    height:21px;
    background: url(../images/rndTop.png) no-repeat top left;
    width:245px;
    float: left;
}

#ctl00_mainarea_content2 .rndBot {
    height:21px;
    background: url(../images/rndBot.png) no-repeat top left;
    width:245px;
    float: left;
}

/*######################################## FLICKR LAYOUT ##############################*/

.flickrTab {
    background-image: url(../images/flickr_tab.png);
}

#flickr{
    background-color: #1d1d1d;
    width: 221px;
    height: auto;
    margin-right: 0px;
    padding: 5px 14px 0px 10px;
    float: left;
    display: block;
}

#flickr a img {
    float:left;
    margin:0 0 16px 16px;
    background:#5a5a5a;
    padding: 3px;
    width: 80px;
    height: 80px;
    border: 0px;
}

/*######################################## Featured LAYOUT ##############################*/

.featuredTab {
    background-image: url(../images/featured_tab.png);
}

#featured {
    background-color: #1d1d1d;
    width: 241px;
    height: auto;
    margin-right: 0px;
    padding: 5px 0px 0px 4px;
    float: left;
    display: block;
}

#featured a img {
    float:left;
    margin:0 0 16px 16px;
    border: 0px;
}

/*######################################## LOCATION BOX ##############################*/

.locationTab {
    background-image: url(../images/location_tab.png);
}

#location{
    background: #1d1d1d url(../images/location_map.png) no-repeat bottom center;
    width: 245px;
    height: 20px;
    margin-right: 0px;
    padding: 190px 0px 0px 0px;
    float: left;
    display: block;
}

/*######################################## WELOVE LAYOUT ##############################*/

#welove{
    background-color: #1d1d1d;
    width: 241px;
    height: auto;
    margin-right: 0px;
    padding: 5px 0px 0px 4px;
    float: left;
    display: block;
}

.weloveTab {
    background-image: url(../images/welove_tab.png);
}

/*######################################## TWITTER LAYOUT ##############################*/


/*contains the twitter content*/
#twitterContainer{
 width: 245px;
 padding: 0;
 float:left;
 margin: 0 0 20px 0;
}

/*top background image*/
.twitterTop{
 background: url(../images/twitterTop.png) no-repeat;
 height: 4px;
}

/*bottom background image*/
.twitterBot{
 background: url(../images/twitterBot.png) no-repeat;
 height: 16px;
}

/*contains tweets*/
#twitter{
 background: url(../images/twitterBg.png) repeat-y top left;
 width: 215px;
 padding: 8px 15px 10px 15px;
 overflow: hidden;
 min-height: 75px;
}

img.followHeart {
 vertical-align: middle;
}

/*######################################## ADDRESS BOX LAYOUT ###########################################*/

#address {
    background-color: #1d1d1d;
    width: 215px;
    height: auto;
    margin: 0px;
    padding: 5px 10px 0px 20px;
    float: left;
    display: block;
}

.addressTab {
    background-image: url(../images/address_tab.png);
}

/*######################################## OUR PEOPLE LAYOUT ###########################################*/

#ctl00_mainarea_content1Content p.ourpeopleName {
    display: block;
    float: left;
    padding-bottom:6px;
    width:100%;
    border-bottom:solid 1px #333333;
}

#ctl00_mainarea_content1Content div.ourPeopleContainer {
    position:relative;
    z-index:0;
    width:100%;
    overflow:hidden;
    min-height:290px
}

#ctl00_mainarea_content1Content div.ourpeopleFlsh {
    width: 500px;
    height:260px;
    position:absolute;
    z-index:-1;
    top:50px;
    left:0;
}

#ctl00_mainarea_content1Content div.ourpeopleCopy {
    width: 360px;
    height:auto;
    z-index:-1;
    top:30px;
    float:right;
    margin-top:0px;
}

/*######################################## Case Studies ####################################*/


#ctl00_mainarea_content1Content div.portOverview{
    border-bottom:solid 1px #333333;
    padding: 0 0 20px 0;
    margin: 0 0 30px 0;
    float: left;
    width:100%
}

#ctl00_mainarea_content1Content div.portLeft{
    width:430px;
    text-align: right;
    float: left;
}

#ctl00_mainarea_content1Content div.portLeft img{
    margin-bottom:10px;
    float: left;
    }

#ctl00_mainarea_content1Content div.portRight {
    width:190px;
    float: right;
    padding: 0 0 0 10px;
}

#facebox .b {
  background:url(../images/b.png);
}

#facebox .tl {
  background:url(../images/tl.png);
}

#facebox .tr {
  background:url(../images/tr.png);
}

#facebox .bl {
  background:url(../images/bl.png);
}

#facebox .br {
  background:url(../images/br.png);
}

#facebox {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  text-align: left;
}

#facebox .popup {
  position: relative;
}

#facebox table {
  border-collapse: collapse;
}

#facebox td {
  border-bottom: 0;
  padding: 0;
}

#facebox .body {
  padding: 10px;
  background: #fff;
  width: 370px;
}

#facebox .loading {
  text-align: center;
}

#facebox .image {
  text-align: center;
}

#facebox img {
  border: 0;
  margin: 0;
}

#facebox .footer {
  border-top: 0px solid #DDDDDD;
  padding-top: 5px;
  margin-top: 0px;
  text-align: right;
  position:absolute;
  top:-15px;
  left:-10px;
}

#facebox .tl, #facebox .tr, #facebox .bl, #facebox .br {
  height: 10px;
  width: 10px;
  overflow: hidden;
  padding: 0;
}

#facebox_overlay {
  position: fixed;
  top: 0px;
  left: 0px;
  height:100%;
  width:100%;
}

.facebox_hide {
  z-index:-100;
}

.facebox_overlayBG {
  background-color: #000;
  z-index: 99;
}

* html #facebox_overlay { /* ie6 hack */
  position: absolute;
  height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
}


/*########################################FOOTER LAYOUT###########################################*/


#footercontainer {
 background: url(../images/footer_bg.png) no-repeat top center;
 width: 100%;
 padding: 25px 0 0 0;
}

#footer {
 margin: 0 auto;
 width: 970px;
 padding: 0px 40px 0px 40px;
 height:auto;
}

#footer ul {
padding:15px 0 0 0;
margin:0;
}

#footer ul li {
padding: 8px 0 8px 0;
border-bottom: solid 1px #373737;
}

#footer ul li.allPosts {
border-bottom: 0;
text-align:right;
font-style: italic;
font-size:1.3em;
font-weight:bold;
}

#footer ul li a:hover {
text-decoration: none;
}

#lookAround {
float: left;
padding: 20px 50px 0 0;
border-right: solid 0px #404040;
min-height: 280px;
}

#lookAround ul li span {
color: #fefefe;
font-size:1.3em;
font-style: normal;
}

#blogPosts {
float: left;
padding: 20px 45px 0 50px;
border-left: solid 1px #282828;
border-right: solid 0px #404040;
min-height: 280px;
}

#addressContainer {
float: left;
padding: 20px 0px 0 50px;
border-left: solid 1px #282828;
min-height: 280px;
width:220px
}

/*Search box is styled here*/
#searchContainer {
background: url(../images/searchContainer.png) no-repeat top left;
padding:0;
height:27px;
width: 330px;
margin-top:10px;
}

.searchBox {
outline: none;
border:0;
background:0;
color: #a38845;
font-family: Georgia, Times New Roman, Serif;
font-style: italic;
float: left;
width:280px;
margin: 4px 0 0 5px;
}

#copyrightContainer {
 width: 100%;
 background: #121212;
}

#copyright {
 padding: 20px 0px 20px 0px;
 width: 970px;
 margin:0 auto;
}

#copyright img {
margin-top:-30px;
position: absolute;
}