/* Layout.css for BEKK Solution Limited's website */

/*-----------------------------------------------------------------------------------------------
  Global Styles
-----------------------------------------------------------------------------------------------*/
* {
	padding:0;
	margin:0;
}
h1, h2, h3, h4, h5, h6, p, pre, blockquote, label, ul, ol, dl, fieldset, address { margin:1em 0; }
li, dd { margin-left:5%; }
fieldset { padding: .5em; }
select option{ padding:0 5px; }
.hide, .print-logo, .close-button{ display:none; }
.left{ float:left; }
.right{ float:right; }
.clear{ clear:both; height:1px; font-size:1px; line-height:1px; }
a img{ border:none; }
div { position:relative; }

/*-----------------------------------------------------------------------------------------------
  Layout / Base Page Styling
-----------------------------------------------------------------------------------------------*/
body {
	background: #121212; 
	color: #BFBFBF;
	font-size: 70%;
	font-family: Verdana, Arial, sans-serif;
	text-align: center;
}

#container {
	margin: auto;
}

.body {
	clear: both;
	width: 900;
	height: auto;
	margin: auto;
	_text-align: left;
}

.col700 { width: 700; }

.col600 { width: 600; }

.col500 { width: 500; }

.col400 { width: 400; }

.col300 { width: 300; }

.col200 { width: 200; }

.col700, .col600, .col500, .col400, .col300, .col200 {
	float: left;
}

p.filter, .blurred { 
	opacity: 0.8; 
	filter: alpha(opacity = 80); /* this is because IE doesn't render the opacity property */ 
} 

/* --------------------------
  Banner
---------------------------*/
#banner {
	clear: both;
	height: 200;
	background: url('images/top_bg.gif') repeat-x;
}

#logo {
	float: left;
	padding: 0;
	margin: 0;
}

#topBSL {
	float: left;
	padding: 25 0 0 10;
}

#topCountries {
	float: right;
	text-align: right;
	padding: 40 10 0 0;
}

#topCountries p {
	font-size: 12;
	line-height: 150%;
	color: #fff;
	font-family: Arial, Verdana, Arial, sans-serif;	
}

#topMenu {
	clear: both;
	height: 46;
	/* background: url('images/menu_bg.gif') repeat-x; */ 
}

#topMenuLeft, #topMenuBody, #topMenuRight {
	float: left;
	_margin: 0 0 -3 0;
	_padding: 0;
}

#topMenuBody {
	width: 884;
	height: 100%;
	text-align: left;
	background: url('images/top_menu_bg.gif') repeat-x;
}

#topMenuBody ul {
	margin-top: 0;
	padding: 0;
	list-style: none;
}

#topMenuBody ul li {
	display: inline;
}

#topMenuBody ul li a {
	float: left;
	height: 28;
	_height: 46;
	padding: 16 20 0 20;
	font: 12 Arial;
	text-align: center;
	color: #fff;
	text-decoration: none;
	text-shadow: 0.1em 0.1em #000;
	background:  transparent url('images/top_menu_line.gif') top right no-repeat;
}

#topMenuBody ul li a:hover {
	color: gold;
	text-decoration: none;
	background: url('images/top_menu_hover_bg.gif') repeat-x;
/*	border-left: 1px solid #000;
	border-right: 1px solid #000; */
}

/* --------------------------
  Footer
---------------------------*/

#footer {
	clear: both;
	margin: 0;
	height: 150;
	background: url('images/footer_bg.gif') repeat-x;
	color: #656565;	
	text-align: left;
	font-size: 10;
	font-family: Arial, Verdana, Arial, sans-serif;	
	_text-align: center;
}

#footerBody {
	margin: 0 0 0 450;
}

#footerAddress, #footerCopyright {
	_text-align: left;
}

#footerAddress {
	float: left;
	height: 50;
	width: 250;
	margin: 40 0 0 0;
	padding: 0 0 0 20;
	border-left: 1px solid #262626;
}

#footerAddress span {
	color: #fff;
}

#footerCopyright {
	float: right;
	height: 50;	
	width: 150;
	margin: 40 0 0 0;
	padding: 0 0 0 20;
	border-left: 1px solid #262626;
}

#footerCopyright span {
	color: gold;
}

/* --------------------------
  Featured images (for Home only)
---------------------------*/

#featured {
	clear: both;
	height: 250;	
	padding: 10 0 0 15;
	background: url('images/featured_bg.gif') repeat-x;
}

#featuredImages {
	_width: 900;
	_height: 250;
}

#sliderContainer {
	width: 880;
	height: 230;
	padding: 16 30 20 30;
	/* background: gold; */
	background: url('images/featured_image_bg.gif') no-repeat;
}

/* --------------------------
  3 tiers (for Home only)
---------------------------*/

#body {
	clear: both;
	height: 300;
	margin: 0;
	background: #000 url('images/body_bg.gif') repeat-x; 
	text-align: left;
	_text-align: center;
}

.bodyContainer {
	padding: 20 20 10 20;
}

#homeBody1, #homeBody2, #homeBody3 {
	_text-align: left;
}

#homeBody1 {
	float: left;
	width: 400;
}

#homeBody1 p {
	color: #fff;
	text-align: justify;
}

#homeBody1 span {
	clear: both;
	float: right;
}

#homeBody1 span a {
	color: #fff;
	text-decoration: none;
	filter:alpha(opacity=80); /* for IE */
	opacity: 0.8; /* CSS3 standard */
}

#homeBody1 span a:hover {
	text-decoration: underline;
	filter:alpha(opacity=100); /* for IE */
	opacity: 1.0; /* CSS3 standard */
}

#homeBody2 {
	float: left;
	width: 250;
	height: 399;
	margin: 1 0 0 0;
	background: #000;
}

.sideMenu ul {
	padding: 0; 
	margin-left: -10; 
	list-style: none; 
}

.sideMenu ul li {
	padding: 5 0 5 15;
	background: url('images/gold_arrow_small.gif') no-repeat 0px 8px; 
	border-bottom: 1px solid #262626; /* Gray border beneath each menu item */
}

.sideMenu ul li a {
	font: 12 Arial; 
	color: #fff;
	text-decoration: none;
	/* for IE */
	filter:alpha(opacity=80);
	/* CSS3 standard */
	opacity: 0.8;
}

.sideMenu h3 {
	font: 14 Arial; 
	color: #fff;
	text-decoration: none;
	/* for IE */
	filter:alpha(opacity=80);
	/* CSS3 standard */
	opacity: 0.8;
}

#homeBody1 span a:hover, #homeBody2 ul li a:hover, #homeBody3 ul li a:hover, #aboutUsMenu ul li a:hover, #disciplinesMenu ul li a:hover  {
	/* for IE */
	filter:alpha(opacity=100);
	/* CSS3 standard */
	opacity: 1.0;
}

#homeBody3 {
	float: left;
	width: 250;
	height: 100%;
}

#homeBody3 ul {
	padding: 0;
	margin-left: -10;
	list-style: none;
}

#homeBody3 ul li {
	padding: 5 0 5 20;
	background: url('images/gold_arrow_big.gif') no-repeat 0px center;
	border-bottom: 1px solid #262626;
}

#homeBody3 ul li a {
	font: 10 Verdana;
	color: #fff;
	text-decoration: none;
	/* for IE */
	filter:alpha(opacity=80);
	/* CSS3 standard */
	opacity: 0.8;
}

#homeBody3 span {
	color: gold;
}

/* --------------------------
  Contacts and Careers
---------------------------*/

#contacts {
	clear: both;
	height: 500;
	margin: 0;
	background: #000 url('images/body_bg_full.gif') repeat-x; 
	text-align: left;
	_text-align: center;
}

#careers {
	clear: both;
	height: 600;
	margin: 0;
	text-align: left;
	_text-align: center;
}

#careers2 {
	float: right;
	margin: 2 0 0 0;
	background: #000;
	height: 598;
}

#contacts1, #contacts2 {
	_text-align: left;
}

#contacts1 {
	float: left;
	height: 100%;
}

#contacts2 {
	float: right;
	margin: 2 0 0 0;
	background: #000;
	height: 498;
}

#contacts2 p, #careers2 p  {
	color: #afafaf;
	font: normal 12px Arial, Helvetica, sans-serif; 
}

#contacts2 p span, #careers2 p  span {
	color: #af9731;
	font: normal 14px Arial, Helvetica, sans-serif; 
}

#contacts2 ol, #careers2 ol { 
	margin: 0; 
	padding: 0; 
	list-style: none;
	font: normal 11px Verdana, Arial, Helvetica, sans-serif; 
}

#contacts2 li , #careers2 li{ 
	margin: 0 0 10px 0; 
	background: none;
}

#contacts2 label, #careers2 label { 
	margin: 0; 
	width: 50px; 
	display: block; 
	float: left; 
	padding: 0 0 2px 0; 
	font: normal 10px Arial, Helvetica, sans-serif; 
	color: #666666;
}

/* #contacts2 span { 
	margin-left: 50;
} */

#contactForm { 
	margin: 0; 
	padding: 5px;
}

#contactForm * { 
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
}

#contactForm ol { 
	margin: 0; 
	padding: 0; 
	list-style: none;
}

#contactForm li { 
	margin: 0 0 5px 0; 
	padding: 10px; 
	background: none;
}

#contactForm li.buttons { 
	margin: 0; 
	overflow:hidden;
}

#contactForm label { 
	margin: 0; 
	width: 150px; 
	display: block; 
	float: left; 
	padding:0 0 2px 0; 
	font: normal 14px Arial, Helvetica, sans-serif; 
	color:#666666;
}

#contactForm label span { 
	font: normal 11px Arial, Helvetica, sans-serif; 
	color: #afafaf; 
	margin: 0; 
	padding: 0;
}

#contactForm input.text { 
	width: 280px; 
	border: 1px solid #1f1f1f; 
	margin: 0; 
	padding: 4px 2px; 
	height: 28px; 
	background:#000;
	color: #fff
}

#contactForm textarea { 
	width: 280px; 
	border: 1px solid #1f1f1f; 
	padding: 2px; 
	background: #000;
	color: #fff
}

#contactForm li.buttons input { 
	padding: 3px 10px; 
	margin: 0 0 0 150px; 
	background: #af9731; /*2d474d; */
	border: 1px solid #0d0e0e; 
	color: #fff; 
	float: left;
}

.response { 
	font: normal 12px Arial, Helvetica, sans-serif; 
	color: red; 
	text-align: center;
}

.captcha {
	width: 430px; 
	height: 60px;
	top-margin: 0; 
	background: red;
	_width: 460px;
}

.captcha1 {
	float: left;
	width: 90px; 
	border: 1px solid #1f1f1f; 
	top-margin: 0; 
	padding: 4px 2px; 
	height: 28px; 
	background: #000;
	color: #fff
}

#contactForm img { 
	float: right;
}


/* --------------------------
  About Us
---------------------------*/

.main {
	clear: both;
	margin: 0;
	padding: 0;
	background: url('images/body_bg_full.gif') repeat-x; 
	text-align: left;
	_text-align: center;
}

#aboutUs {
	height: auto;  
}

#healthSafety {
	height: auto;
}

#aboutUs h2, #healthSafety h2 {
	font: normal 18px Verdana, Arial, Helvetica, sans-serif; 
	font-weight: bold;
	color: #fff;
}

#aboutUs h2 span, #healthSafety h2 span {
	font: normal 18px Verdana, Arial, Helvetica, sans-serif; 
	font-weight: bold;
	color: #af9731;
}

#aboutUsMenu, #aboutUs2 {
	margin: 2 0 0 0;
	background: #000;
	height: 100%; 
}

#aboutUs1 {
	font: normal 12px Verdana, Arial, sans-serif;
/*	font: normal 12px Arial, Helvetica, sans-serif;  */
	line-height: 150%;
}

#aboutUs1 strong {
	color: #af9731;
}

#boardDirectors {
	clear: both;
	width: 100%;
	height: 240;
	padding: 10 0 0 0;
	text-align: center;
}

#boardDirectors img {
	margin-bottom: 10;
}

#boardDirectors span {
	font: normal 12px Verdana, Helvetica, sans-serif; 
	color: fff;
}

#boardDirectors label {
	font: normal 10px Arial, Helvetica, sans-serif; 
	font-style: italic;
	color: gold;
}

#healthSafety1, #ims {
	font: normal 12px Verdana, Arial, sans-serif;
/*	font: normal 12px Arial, Helvetica, sans-serif; */
	line-height: 150%;
}

#isoDetail {
	float: left;
	width: 700;
	_width: 600;
	margin-bottom: 30;
}

#isoLogo {
	float: left;
	width: 120;
	height: 100;
	padding-top: 5;
}

#isoText {
	float: left;
	width: 550;
	_width: 450;
}

#isoText strong, #profileText strong {
	color: #af9731;
}

#healthSafety1 span {
	font: italic 12px Verdana, Arial, sans-serif;
/*	font: bold 16px Arial, Helvetica, sans-serif;  */
}

#healthSafety1 ul, #profiles ul {
	padding: 0;
	margin-left: -10;
	list-style: none;
}

#healthSafety1 ul li, #profiles ul li  {
	padding: 5 0 5 18;
	background: url('images/gold_arrow_single_small.gif') no-repeat 0px 10px;
}

#safetyImage {
	margin: 0 0 10 10;
	border: solid 2px #000;
	width: 200;
	height: 200;
}

#pdfItem {
	float: left;
	width: 220;
	height: 260;
}

#pdfIcon {
	width: 220;
} 

#pdfIconCaption {
	clear: both;
	float: left;
	padding-top: 5;
	font: normal 10px Verdana, Arial, Helvetica, sans-serif; 
	color: #fff;
	width: 150;
}

#otherLogo {
	float: left;
	width: 220;
	height: 150;
}

#logoIcon {
	width: 220;
	height: 100;
} 

#logoIcon img {
	position: absolute; 
	bottom: 0;
} 

#profiles {
	font: normal 12px Verdana, Arial, sans-serif;
	line-height: 100%;
}

#profileImage {
	float: left;
	width: 200;
	height: 150;
	padding-top: 5;
}

#profileText {
	float: left;
	margin-left: 10;
	width: 450;
	_width: 350;
}

#profileText strong, #profileText span {
	margin-left: 15;
}

#profiles a {
	color: #afafaf;
	font-style: italic;
	text-decoration: underline;
}

#profiles a:hover {
	color: gold;
	text-decoration: underline;
}

#profileImage img {
	border: solid 1px gold;
}


/* --------------------------
  Disciplines
---------------------------*/

#disciplines {
	font: normal 12px Verdana, Arial, sans-serif;
/*	font: normal 12px Arial, Helvetica, sans-serif;   */
	line-height: 120%;
}

#disciplines h3 {
	font: normal 16px Verdana, Arial, Helvetica, sans-serif; 
	font-weight: bold;
	color: fff;
}

#disciplines h4 {
	font: normal 16px Verdana, Arial, Helvetica, sans-serif ; 
	color: fff;
	padding-bottom: 5;
	border-bottom: solid 2px #666;
}

#disciplinesMenu {
	margin: 2 0 0 0;
	background-color: #000;
	_text-align: left;
}

#projectImages, #projectContent {
	clear: both;
}

#project1 {
	clear: both;
	width: 100%;
}

#project1 ul { 
	margin: 0; 
	padding: 0; 
	list-style: none;
	font: normal 12px Verdana, Arial, Helvetica, sans-serif; 
	color: #fff;
}

#project1 li { 
	margin: 0 0 10px 0; 
	background: none;
}

#project1 label { 
	margin: 0; 
	width: 100; 
	display: block;  
	float: left; 
	padding: 0 0 2px 0; 
	font: normal 12px Arial, Helvetica, sans-serif; 
	color: #666666;
}

#project1 span.indent {
	margin-left: 100px;
	_margin-left: 102px;	
}

#project2 {
	clear: both;
	padding-top: 10;
	padding-bottom: 20;
}

#project2 span, #disciplines h4 {
	color: #af9731;
}

#project2 ul {
	list-style-type: square;
	color: gold;
	/*list-style-image: url('images/gold_arrow_tail.gif'); */
	line-height: 140%;
}

#project2 ol {
	list-style-type: lower-roman;
	color: gold;
}

ul#subMenu {
/*	list-style-image: url('images/gold_arrow_tail.gif'); 
	margin-left: 10; 
	margin-bottom: -5; */
}

ul#subMenu li {
	padding: 0 0 5 0;
	background: none;
	border-bottom: none; 
}

span#whitetext {
	color: #afafaf;
}

span#white2text {
	color: #fff;
}

#projectContent a {
	color: #afafaf;
	font-style: italic;
	text-decoration: underline;
}

#projectContent a:hover {
	color: gold;
	text-decoration: underline;
}

/* --------------------------
  News, Articles
---------------------------*/

#articles {
	font: normal 13px Arial, Helvetica, sans-serif; 
	line-height: 200%;
}

#newsContent {
	margin: 0;
}

#articleContent {
	clear: both;
	padding: 10 20 20 30;
	background: #0d0e0e; 
	border: 2px solid #1f1f1f; 
}

#articleContent a {
	color: af9731;
	font-style: italic;
	text-decoration: none;
}

#articleContent a:hover {
	text-decoration: underline;
}

#articles h2 {
	font: normal 16px Verdana, Arial, Helvetica, sans-serif; 
	font-weight: bold;
	color: af9731;
	margin-left: 40;
}

#articles h3 {
	font: normal 14px Verdana, Arial, Helvetica, sans-serif ; 
	color: #666666;
	margin-top: -10;
	margin-left: 40;
	padding-bottom: 20;
}

#date {
	position: absolute;
	width: 80;
	height: 60;
	top: 20;
	left: -22;
	_left: -52;
	padding: 0;
	font: normal 11px Helvetica, sans-serif; 
	color: #000;
	background: url('images/date.gif'); no-repeat;
}

#articleDate {
	margin: 10 0 0 0;
	padding: 0;
	text-align: center;
	font: normal 11px Helvetica, sans-serif; 
	color: #000;
}

#articlesMenu {
	float: right;
	border: 2px solid #1f1f1f;  
	/*border-bottom-width: 1; */
	padding: 0; 
	margin: 20 0 10 -10;
	text-align: left;
}

#articlesMenu h3 {
	margin: 20 0 0 0;
	font: normal 16px Arial, Helvetica, sans-serif; 
	color: #fff;
	text-align: center;
}

#articlesMenu span {
	color: gold;
}

#articleContent span {
	color: af9731;
}

#articlesMenu ul {
	list-style: none; 
	margin-top: 0;
	padding-bottom: 1;
}

#articlesMenu ul li {
	display: block;
	margin: 0;
	padding: 0 10 0 10;
	border-top: 1px solid #262626; /* Gray border beneath each menu item */
}

#articlesMenu ul li a {
	font: 12 Arial;
	color: #fff;
	text-decoration: none;
	/* for IE */
	filter:alpha(opacity=80);
	/* CSS3 standard */
	opacity: 0.8;
}

#articlesMenu ul li a:hover {
/*	background: #1f1f1f; */
}