/* NOTES & README

There is a problem with the grey box filling out dynamic to the left i IE6 and below.
At the moment the "areas of expertise" has a fixed height of 130px, so that the grey box, is filled.
If the "areas of expertise" should have a dynamic height, it should be fixed programmatically.
If no height is specified on the #page #sideColumn #sideMenu, then the grey box wont work  correctly in IE6

Tested in Firefox 3, IE7, Opera 9, Chrome 1, Safari

HTML validated according to W3C XHTML 1.0 Strict standard

CSS validated according to W3C CSS validator

Content Headers should be pictures, because according to the Typography specifikations, the font-type is Helvetica Neue Thin, which is a non-standard font,
and therefore non-existing on most computers. Helvetica Neue Thin is a non-cost-free, and therefore non-standard
They should have a minimum height of 37px. Everyhing above will get minimized to 37px and everything below, will get maximized to 37px


The font-sizes in the Typographic Specifications is converted to px, because it gives a more similiar look of the specifications
*/

/* normalizing */
* { padding: 0; margin: 0; }
ul { list-style-type: none; }
img { border: 0; }

/* basic linkstyling */
a {font-weight:bold;}
a:link, a:visited { color: #fd4703; text-decoration: none; }
a:hover { color: #fd4703; text-decoration: underline; }

/* Body */
body { font-family: Arial; color: #9e948d; background: url(../images/background.jpg) top center repeat-y}
#page { padding: 20px 20px 10px 20px; width: 920px; position: relative; margin:0 auto;}

/* Header */
#page #header { width: 100%; height: 55px; font-size: 12px; margin: -10px 0 15px 0; }
#page #header #headerLogo { float: left; }
#page #header #headerLogo img.headerLogo { width: 230px; height: 55px; }
#page #header #headerLinks { float: right; padding: 12px 0 0 0; width: 447px; }
#page #header #headerLinks #firstColumn { float: left; padding-top:3px; }
#page #header #headerLinks #firstColumn a { width: 100px; float: left; }
#page #header #headerLinks #secondColumn { width: 217px; float:left; color:#9e948d;}
#page #header #headerLinks input {margin-right: 8px; border: 1px solid #9e9490; padding:1px; color: #9e948d; width: 185px;font-size:12px; }

/* TopMenu */
#page #topMenuBar { width: 100%; height: 115px; font-size: 13px; position: relative; margin-bottom: 10px; font-weight: bold; } /* Changed to 13px from 12px */ 
#page #topMenuBar ul { float: left; width: 225px; left: -5px; position: relative; padding: 0 0 0 5px; }
#page #topMenuBar ul li { padding: 2px 0 2px 6px; line-height: 12px; }
#page #topMenuBar ul li a { color: #9e9490; text-decoration: none; }
#page #topMenuBar ul li.selected a { color: #3e3a36; }
#page #topMenuBar ul.selected li { border-left: 1px solid #fd4703; padding: 2px 0 2px 5px; }
#page #topMenuBar a:hover { color: #fd4703; }

/* SideMenu */
#page #sideColumn { float: left; width: 230px; position: relative; font-size: 12px; }
#page #sideColumn #sideMenu { /*position: relative;*/ width: 230px; /*height: 100%;*/ }
#page #sideColumn #sideMenu ul { float: left; position: relative; width: 165px; background-color: #f5f3f0; padding: 10px 0 10px 0; }
#page #sideColumn #sideMenu ul li.title { padding-bottom: 5px; font-weight: bold; color:#cbc6bc; }
#page #sideColumn #sideMenu ul li { padding-left: 5px; border-left: 1px solid #fff; }
#page #sideColumn #sideMenu ul li a { color: #9e9490; text-decoration: none; }
#page #sideColumn #sideMenu ul li.selected a { color: #fd4703; }
#page #sideColumn #sideMenu ul li a:hover { color: #3e3a36; font-weight: bold; }

#page #sideColumn #sideMenu #greyBox { position: absolute; width: 155px; background-color: #9E948D; right: 100px; height:0px;}
#page #sideColumn #sideMenu #greyBox2 ul { background-color: #9E948D; }

#page #sideColumn #sideMenu #greyBox2 ul li.title { color: #efefef;}
#page #sideColumn #sideMenu #greyBox2 ul li a { color:#fff;}

#page #sideColumn #promoBox {width:165px;padding-top:10px; padding-left:6px;}
#page #sideColumn #promoBox .promo {padding-bottom:2px;}

#page #sideColumn #subMenu { font-size: 11px; float: left; margin: 10px 0 0 0; width: 230px; min-height: 150px; height: auto !important; height: 150px; position: relative; }
#page #sideColumn #subMenu p { border-left: 1px solid #fd4703; padding: 0 0 5px 5px; font-weight: bold; color:#3e3a36; }
#page #sideColumn #subMenu ul { border-left: 1px solid #fd4703; }
#page #sideColumn #subMenu ul li { padding: 0 0 0 5px; }
#page #sideColumn #subMenu ul li a { font-size: 11px; color: #9e9490; }
#page #sideColumn #subMenu ul li.selected a { color: #3e3a36; }
#page #sideColumn #subMenu ul li a:hover { color: #fd4703; font-weight: bold; text-decoration: none; }

#page #sideColumn #SideSpots { float: left; padding-left:6px; width: 224px; position: relative; margin-top: 20px; font-size: 11px; clear:both; }
#page #sideColumn #SideSpots img.supports { margin:0; width: 158px; height: 79px; border: 1px solid #cbc6bc; }
#page #sideColumn #SideSpots p { margin-bottom:10px; }
#page #sideColumn #SideSpots a { font-size: 11px; color: #9e9490; line-height:18px;}
#page #sideColumn #SideSpots a.client-apps-link { color: #fd4703; font-size:12px; }



/* ContentArea */
#page #mainContent { float: left; width: 690px; min-height: 450px; height: auto !important; height: 450px; font-size: 14px; }

#page #mainContent #contentHeader { width: 690px; margin: 0 0 10px 8px;}
#page #mainContent #contentHeader  img.contentHeader { height: 37px; }
#page #mainContent p { margin: 0 0 10px 7px; font-size: 14px; }
#page #mainContent p a { font-size: 14px; }
#page #mainContent p.title { font-weight: bold; color: #3e3a36; margin: 0 0 0 7px; }
#page #mainContent p.titlered { font-weight: bold; color: #fd4703; margin: 0 0 0 7px; width: 100%; }
#page #mainContent ul li { color: #fd4703; padding-left: 5px; /* border-left: 1px solid #fd4703; */ }

#page #mainContent ul.specialisations { margin-bottom:1em; list-style-type: disc; padding-left:15px; margin-left:7px;  }
#page #mainContent ul.specialisations li { color:#9e948d; }

#page #mainContent #linkList { font-size: 12px; float: left; margin: 10px 0 0 2px; width: 430px; min-height: 150px; height: auto !important; height: 150px; position: relative; }
#page #mainContent #linkList p { border-left: 1px solid #fd4703; padding: 0 0 5px 5px; font-weight: bold; }
#page #mainContent #linkList ul { border-left: 1px solid #fd4703; }
#page #mainContent #linkList ul li { padding: 0 0 0 5px; }
#page #mainContent #linkList ul li a { font-size: 14px; color: #fd4703; font-weight: bold; display:block; padding-bottom:8px; } /* Changed to 13px from 12px */ 

#page #mainContent #bottomImage { float: left; margin: 10px 0 0 8px; width: 550px;  height: 60px; position: relative; }

#page #mainContent #article {width: 690px; font-size:14px;}
#page #mainContent #article p {width: 690px; font-size:14px;}
#page #mainContent #article h4 { margin:0 0 10px 7px;}
#page #mainContent #article ul { color: #9e948d;list-style-type:square;margin: 0 0 10px 7px;}
#page #mainContent #article ul li {color: #9e948d;padding-left: 30px;}

#page #mainContent #mainContentFollowOn {float:left; width:100%; background-position:right top; background-repeat:no-repeat;}

/* Employees */
#page #mainContent .employee { float: left; width: 220px; padding-left: 10px; position: relative; height:225px; }
#page #mainContent .employee img {margin-bottom:10px; }
#page #mainContent .employee p { width:220px; padding: 0; margin: 0; font-size: 11px; }
#page #mainContent .employee p.name { font-weight:bold; }
#page #mainContent .employee p.info { color: #9e9490; margin: 0 0 20px 0; }
#page #mainContent .first { width: 220px; padding-left: 6px; position: relative; clear:left; }
#page #mainContent #employeeText { float: left; width:435px; } 
#page #mainContent #employeeText span.year { float: left; width: 50px; }
#page #mainContent #employeePicture { float: left; padding-left:30px; }
#page #mainContent #employeePicture p { margin-top:12px; }
/* #page #mainContent #employeePicture img{  width:250px;} */
#page #mainContent #officeContent .employee { padding-left:0; }
#page #mainContent #officeContent { margin: 0 0 0 7px;  }


/* Our Office */
#page #mainContent #leftColumn { width:283px; }
#page #mainContent #specialisations { width:230px;float:right; }
#page #mainContent #officeContent  p { font-weight: normal; width:auto; margin: 0 0 0 0; }
#page #mainContent #officeContent  p.name { font-weight: bold; }
#page #mainContent #officeContent  p.title { color: #3e3a36; margin: 0 0 0 0;} 
#page #mainContent #officeContent  p.titlered { font-weight: bold; color: #fd4703; padding-bottom:20px;}
#page #mainContent #officeContent  p.titlelarge { font-size:16px; padding-bottom:12px;}

#page #mainContent .addressesContent { padding-left:10px;}

#page #mainContent .addressesContent dt { clear:both; float:none; padding:0px 0 5px 0; font-size:14px; }
#page #mainContent .addressesContent dd { width: 300px; float:left; padding-bottom: 15px;}
#page #mainContent .addressesContent dd p { font-weight: normal; margin:0 0 5px 0; }

/*
#page #mainContent #officeDetails, #page #mainContent #postalDetails { width: 100%; float: left; padding: 15px 0 0 0; }
#page #mainContent .AddressInformation { width: 235px; float: left; }
#page #mainContent .AddressInformation p { font-weight: normal; }
#page #mainContent .AddressInformation span { float: left; width: 40px; }

#page #mainContent .picture { float: left; }
#page #mainContent .picture img { width: 220px; height: 148px; margin: 10px 0 0 0; }

#page #mainContent #googleMaps { position: absolute; width: 690px; }
#page #mainContent #googleMaps img { float: right; width: 455px; height: 300px; }*/

/* Search Results */
#page #mainContent #searchResults {font-size:12px;}
#page #mainContent #searchResults div {margin:10px 0 10px 7px}
#page #mainContent #searchResults .date {color:#666666;}
#page #mainContent #searchResults .pdficon {margin-right:5px;}

/* Contact Form */
#page #mainContent #contactForm {font-size:12px; margin:10px 0 10px 7px;}
#page #mainContent #contactForm p {font-size:12px;}
#page #mainContent #contactForm label { width:180px;float:left; margin-bottom:5px;}
#page #mainContent #contactForm select { width:265px;margin-bottom:5px;}
#page #mainContent #contactForm input { width:260px;margin-bottom:5px;}
#page #mainContent #contactForm textarea { width:263px; height:120px; margin-bottom:5px;}
#page #mainContent #contactForm input.submit { width:60px;height:25px; background-color:#FD4703; color:#fff; border:0;margin-left:180px;}
#page #mainContent #contactForm input.reset { width:60px;height:25px; background-color:#FD4703; color:#fff; border:0;margin-left:5px;}

/* Vacancies */
#page #mainContent .vacanciestable {width:690px;font-size:12px;}
#page #mainContent .vacanciestable tr { background-color:#f5f3f0;}
#page #mainContent .vacanciestable tr th.jobtitle {width:483px; background-color:#999999; color:#fff; text-align:left;padding:3px 0 3px 6px;}
#page #mainContent .vacanciestable tr td.jobtitle {width:483px;padding:3px 0 3px 6px;}
#page #mainContent .vacanciestable tr th.location {width:207px; background-color:#999999; color:#fff; text-align:left;padding:3px 0 3px 6px;}
#page #mainContent .vacanciestable tr td.location {width:207px;padding:3px 0 3px 6px;}

#page #mainContent .vacanciestable a span {color:#9E948D;}
#page #mainContent .vacanciestable a span:hover { text-decoration:underline; color:#9E948D;}

.clear { clear: both; }


/* These are standard sIFR styles... do not modify */
.sIFR-flash {visibility: visible !important;margin: 0;}
.sIFR-replaced {visibility: visible !important;}
span.sIFR-alternate {position: absolute;left: 0;top: 0;width: 0;height: 0;display: block;overflow: hidden;}

/* Hide Adblock Object tab: the text should show up just fine, not poorly with a tab laid over it. */
.sIFR-flash + div[adblocktab=true] { display: none !important;}

/* These "decoy" styles are used to hide the browser text before it is replaced... the negative-letter spacing in this case is used to make the browser text metrics match up with the sIFR text metrics since the sIFR text in this example is so much narrower... your own settings may vary... any weird sizing issues you may run into are usually fixed by tweaking these decoy styles */
.sIFR-hasFlash h1 {visibility: hidden;letter-spacing: -9px;font-size: 24px;}
.sIFR-hasFlash h2 {visibility: hidden;letter-spacing: -9px;font-size: 36px;}
/*.sIFR-hasFlash h3 {visibility: hidden;letter-spacing: -6px;font-size: 25px;}
.sIFR-hasFlash h4 {visibility: hidden;letter-spacing: -5px;font-size: 21px;}
.sIFR-hasFlash h5#pullquote {letter-spacing: -4px;visibility: hidden;font-size: 24px;}*/

/* Paging Bar */
.pagingBar {clear: both;margin-right: 11px;padding: 0 10px 0 8px;line-height: 24px;height: 24px; font-size:12px;}
.pagingBar span {float:left; margin-left:10px;}
.pagingBar ul {margin: 0;padding: 0;list-style: none;float: left;}
.pagingBar ul li {display: inline;}
.pagingBar ul li strong {text-decoration: none;color:#333333;}
.pagingBar ul li a {text-decoration: none;}
.pagingBar ul li a:hover {text-decoration: underline;}

/* Latest News */
#latestnews {width:100%; margin:25px 0 15px 7px; font-size:14px;}
#latestnews div {margin-bottom:5px;}
#latestnews h3 {margin-bottom:0; color:#3e3a36;}
#latestnews a {color:#3E3A36;}
#latestnews .date {color:#666;}
#latestnews .pdficon {margin-right:5px;}

#page #mainContent .people-search { margin-top:20px; }
#page #mainContent .people-search p { font-size:12px; padding:1px; }
#page #mainContent .people-search label { font-size:12px; width:120px; display:block; float:left; }
#page #mainContent .people-search .input { width:300px; }
#page #mainContent .people-search .submit { width:60px; height:25px; background-color:#FD4703; color:#fff; border:0;margin-left:180px; float:left;margin-left:115px;}
#page #mainContent .people-search .reset { width:60px; height:25px; background-color:#FD4703; color:#fff; border:0;margin-left:180px; float:left;margin-left:5px;}
#page #mainContent .no-results { color: #FD4703; }

#page #mainContent .button 
{
    color:White;
    background-color:#999;
    border:none;
    margin: 2px 12px 2px 0;
    padding:2px;
    width:50px;
}

#page #mainContent #sitemap ul { margin-left:7px; }
#page #mainContent #sitemap ul, ul#sitemap { padding:0px; list-style:none;}
#page #mainContent #sitemap li { cursor:pointer; padding-left:24px; background:url(/images/sitemap/page-closed.png) 2px 1px no-repeat; }
#page #mainContent #sitemap li.selected { background:url(/images/sitemap/page-open.png) 2px 1px no-repeat }
#page #mainContent #sitemap li.last { cursor:default; padding-left:24px; background:url(/images/sitemap/page.png) 2px 1px no-repeat; }
#page #mainContent #sitemap li.lastselected { cursor:default; background:url(/images/sitemap/page.png) 2px 1px no-repeat }

div#mainContent div.bodyText a {
    font-weight:normal;
}

div#mainContent div.bodyText ul {
    margin-bottom:6px;
}

#page div#mainContent div.bodyText li {
    list-style: disc;
    margin-left:20px;
    color:#9e948d;
}

/* Asset Management */

.countrybasedauthpanel {
float:right;
width:200px;
background-color:#f5f3f0;
padding:10px 15px 10px 10px;
margin-left:15px;
font-size:12px;
}
.countrybasedauthpanel h4 {font-size:13px !important; padding:0 0 7px 7px;}
.countrybasedauthpanel p {font-size:11px !important; margin:0;}
.countrybasedauthpanel ul li a {color:#9e9490; font-weight:bold;}
.countrybasedauthpanel ul li a:hover {color:#fd4703; text-decoration:none !important;}
.countrybasedauthpanel ul li.countryauth-uk {background:url(/images/auth-uk.jpg) top left no-repeat; padding:6px 0 6px 35px !important;}
.countrybasedauthpanel ul li.countryauth-usa {background:url(/images/auth-usa.jpg) top left no-repeat; padding:6px 0 6px 35px !important;}
.countrybasedauthpanel ul li.countryauth-sa {background:url(/images/auth-sa.jpg) top left no-repeat; padding:6px 0 6px 35px !important;}
.countrybasedauthpanel ul li.countryauth-rest {background:url(/images/auth-rest.jpg) top left no-repeat; padding:6px 0 6px 35px !important;}

.assetmanagement-login {width:165px;}
.assetmanagement-login h4 {font-size:12px; margin:20px 0 5px 0;}
.assetmanagement-login input[type=text], .assetmanagement-login input[type=password]{border:1px solid #9e9490; width:150px; color: #9e9490; font-size:12px; padding:2px; margin:0 0 5px 0;}
.assetmanagement-login input[type=password]{padding:2px 2px 3px 2px; }
.assetmanagement-login input[type=text]:hover, .assetmanagement-login input[type=text]:focus, .assetmanagement-login input[type=text]:active,.assetmanagement-login input[type=password]:hover, .assetmanagement-login input[type=password]:focus, .assetmanagement-login input[type=password]:active {border:1px solid #666}
.assetmanagement-login p {margin-top:4px; font-size:10px;}

/* Promobox */



#promoBox {
margin:20px 0 15px 0;
width:153px !important;
float:left;
}

#promoBox.top {
background:#f5f3f0;
padding:6px !important;
}

#promoBox.top img {
width:153px;
margin:0;
}

#promoBox.bottom img {
width:158px;
border:1px solid #cbc6bc;
margin:0;
}

#promoBox p:first-child {
margin:0 0 5px 0;
}

#promoBox p {
margin:9px 0 5px 0;
}

#promoBox a {
color:#9e9490;
}

.newsletter-list td {
    width:194px;
}

.newsletter-list label {
    width:178px !important;
}

.newsletter-list input {
    width:15px !important;
    float:right;
}

/* Our board */

ul.members-list { margin:0 0 20px 0; }

ul.members-list li a span { color: #9E948D; }

ul.members-list li a:hover {text-decoration:underline;}

p.role { font-weight:bold; margin-bottom:2px !important; }

a.no-style { text-decoration: none; font-weight:normal; color:#9E948D }

a.back-top { font-weight:normal; font-size:12px !important; }