/*
Vela VKE Stylesheet
World Wide Creative
*/

@import url('css/reset.css');
@import url('css/text.css');

body{
	background-color: #E6E6E6;
}

/*--background --*/
#leftbg{
	width: 50%;
	position: absolute;
	left: 0px;
	background: url(images/bg-left.gif) repeat-x;
	height: 434px;
	z-index: 0;
}

#rightbg{
	width: 50%;
	position: absolute;
	right: 0px;
	background: url(images/bg-right.gif) repeat-x;
	height: 335px;
	z-index: 0;
}

#container{
	position: relative;
	top: 0px;
	width: 973px;
	margin: 0 auto;
	z-index: 1;
	
}

h2{
	margin-bottom: 10px !important;
}
p{
	margin-bottom: 15px !important;
}

/*----------------------header, navbar, banners--*/
#header{
	width: 973px;
	height: 190px;
	background-color: #ffffff;
	position: relative;
}

#header .header-bg{
	position: relative;
	top: -100px;
	z-index: 1;
}

#header .banner{
	position: relative;
	top: -315px;
	z-index: 0;
	width: 963px;
	height: 195px;
	_top: -306px;
}

#header .project-finder{
	position: absolute;
	top:  48px;
	left: 680px;
	z-index: 1;
	display:block;
	width:252px;
}

#navbar{
	background: url(images/navbar-bg.gif) no-repeat;
	height: 71px;
	padding-left: 132px;
	_padding-left: 0px;
	_width: 973px;

}

.hidden{ /* used to hide navbar text */
	position:absolute;
	left:0px;
	top:-500px;
	width:1px;
	height:1px;
	overflow:hidden;
}

#logo{
	float: left;
	position: relative;
	top: -38px;
	left: 28px;
	z-index: 6;
	height: 100px;
}

form#search{
	float: right;
	margin-top: 32px;
	width: 150px;

}

.searchtextfield{
	height: 20px;
	width: 80px;
	border: 0 none;
	background: transparent url(images/search-form.png) no-repeat;
	padding: 3px 10px 0 10px;
	color: #B2DDD0;
	font: 12px Arial, Helvetica, Geneva, sans-serif;
	float: left;
	margin: 0;
}

form#search input#submit{
	margin: 0 0 0 -3px;
	padding: 0;
	float: left;
	
}

.textfield{
	margin: 3px;
	height: 20px;
	width: 226px;
	border: solid 0 #fff;
	background: transparent url(images/text-field.png) no-repeat;
	padding: 3px 0 0 10px;
	color: #2B2B2B;
	font: 12px Arial, Helvetica, Geneva, sans-serif;
}

/*===================suckerfish menu's======*/

#navbar{
	height: 68px;
	position: relative;
	z-index: 5;
}

ul#nav{
	_margin-left: 51px;
	padding-top: 5px;
	float: left;
	margin-top: -3px;

}

#nav, #nav ul { 
	padding: 0;
	margin: 0;
	list-style: none;
	line-height: 1;
	left: 132px;
	*left: 132px;
}

#nav li:hover, #nav li.hover { /*fix to stop dropdowns sticking in IE7 */
    position:static;
    }

#nav ul{
	border: 1px solid #B2DDD0;
	padding-top: 0;
}

#nav a {
	display: block;
	width: 50px;
	line-height: 20px;
}

#nav li { 
	float: left;
	width: 50px; 
}

#nav li ul { 
	position: absolute;
	background-color: #ffffff;
	width: 145px;
	left: -999em; 
}

#nav li ul li{
	display: block;
	clear: left;
	width: 204px;
	margin-left: 0;
}

#nav li ul li a{
	color: #003D19 !important; 
	height: auto !important;
	width: 135px  !important;
	text-decoration: none  !important;
	background: transparent !important;
	margin-left: 0px;
	padding-left: 10px;
	padding-top: 5px;
	
}

#nav li ul li a:hover{
	font-weight: bold  !important;
	background: none  !important;
	background-color: #FF840D  !important;
	text-decoration: none  !important;
}

#nav li ul ul { 
	margin: -25px 0 0 145px;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
	left: -999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { 
	left: auto;
}


#nav li.home a:hover, #nav li.about-us a:hover, #nav li.clients a:hover, #nav li.projects a:hover, #nav li.expertise a:hover, #nav li.careers a:hover, #nav li.offices a:hover, #nav li.contactus a:hover{
	background-position:0 -66px;
}

#nav li.active a{
	background-position:0 -66px !important;
}

#nav li.home a{
	background: url(images/nav-home.png) no-repeat;
	width: 55px;
	height: 66px;
}

#nav li.about-us{
	margin-left: 6px;
	_margin-left: 1px;
}

#nav li.about-us a{
	background: url(images/nav-about-us.png) no-repeat 0 0;
	width: 84px;
	cursor: default;
	height: 66px;
}

#nav li.clients{
	margin-left: 36px;
	_margin-left: 2px;
}

#nav li.clients a{
	width: 71px;
	background: url(images/nav-clients.png) no-repeat;
	height: 66px;
}

#nav li.projects{
	margin-left: 22px;
	_margin-left: 1px;
}

#nav li.projects a{
	width: 83px;
	background: url(images/nav-projects.png) no-repeat;
	height: 66px;
}

ul#nav li.expertise{
	margin-left: 34px;
	_margin-left: 1px;
}

ul#nav li.expertise a{
	width: 88px;
	background: url(images/nav-expertise.png) no-repeat;
	height: 66px;
	
}

#nav li.careers{
	margin-left: 39px;
	_margin-left: 1px;
}

#nav li.careers a{
	width: 79px;
	background: url(images/nav-careers.png) no-repeat;
	height: 66px;
}

#nav li.offices{
	margin-left: 30px;
	_margin-left: 1px;
}

#nav li.offices a{
	width: 73px;
	background: url(images/nav-offices.png) no-repeat;
	height: 66px;
}

#nav li.contactus{
	margin-left: 24px;
	_margin-left: 1px;
}

#nav li.contactus a{
	width: 96px;
	background: url(images/nav-contactus.png) no-repeat;
	height: 66px;
}

/*-------------------------------content--*/

#content-heading{
	background: url(images/page-title-header-bg.gif) no-repeat;
	width: 973px;
	height: 105px;
	_margin-top: -22px;
	position: relative;
	z-index: 1;
}

#content-wrapper{
	background: url(images/container-bg.gif) repeat-y;
	width: 973px;
	*margin-top: -100px;
	_margin-top: -375px;
}

html > body #content-wrapper{
	overflow: auto;
}

#main-content{
	float: left;
	width: 700px;
	/*z-index: 2;*/
	margin-left: 20px;
	padding: 0;
	_margin-left: 10px;
}

.bg{
	background: url(images/h2-header-bg-fade.png) no-repeat;
	width: 700px;
}

.content{
	width: 700px;
	margin: 0 auto;
}

#content-centre{
	margin: 0 auto;
	width: 681px;
}

h1#page-heading{
	font: italic bold 26px Arial, Helvetica, Geneva, sans-serif;
	color: #ffffff;
	margin-left: 25px;
	padding-top: 8px;
}

#main-content h2.title{
	color: #666666;
	font: bold 18px Arial, Helvetica, Geneva, sans-serif;
	margin: 10px 0;
}

.bg h2.title-top{
	color: #005339;
	font: bold 18px Arial, Helvetica, Geneva, sans-serif;
	margin: 13px 0 20px 20px !important;
	float: left;
	width: 350px;
}

h3.title-right{
	float: right;
	width: 300px;
	font-size: 14px;
	color: #474747;
	font-weight: normal;
	margin-top: 14px;
	height: 20px;
}

h3.title-right a{
	color: #474747;
	text-decoration: none;
}

h3.title-right a:hover{
	text-decoration: underline;
}

#main-content p{
	color: #3D3D3D;
	font: 14px/19px Arial, Helvetica, Geneva, sans-serif;
	text-align: justify;
}

.p-top{
	background: url(images/p-top.gif) no-repeat;
	width: 681px;
	height: 10px;
	margin-top: 10px;
	_margin-bottom: -7px;
}

.p-bottom{
	background: url(images/p-bottom.gif) no-repeat;
	width: 681px;
	height: 10px;
	margin-top: -20px;
	margin-bottom: 20px;
	*margin-top: 0px;
	
}

.p-top-medium{
	background: url(images/p-top-medium.gif) no-repeat;
	width: 453px;
	height: 10px;
	margin-top: 10px;
	_margin-bottom: -6px;
}

.p-bottom-medium{
	background: url(images/p-bottom-medium.gif) no-repeat;
	width: 453px;
	height: 10px;
	margin-top: -20px;
	margin-bottom: 15px;
	*margin-top: -10px;	
	_margin-top: -10px;
}

.p-top-small{
	width: 213px;
	height: 15px;
	margin-top: 10px;
	background: url(images/p-top-small.gif) no-repeat;
	_margin-bottom: -3px;
}

.p-bottom-small{
	margin-top: -20px;
	*margin-top: -10px;
	margin-bottom: 20px;
	width: 213px;
	height: 15px;
	background: url(images/p-bottom-small.gif) no-repeat;
}

.btn-fly{
	margin-bottom: 10px;
}

.block{
	width: 651px;
	background-color: #EBEBEB;
	padding: 0 15px;
}

.block h3{
	font-size: 18px;
	margin-bottom: 0px;
}

.block-medium{
	width: 423px;
	background-color: #EBEBEB;
	padding: 0 15px;
}

.block-small{
	width: 183px;
	background-color: #DCDCDC;
	padding: 0 15px;
}

.block-small h4{
	font-size: 15px;
	font-weight: bold;
	margin-bottom: 5px;
}

.block-small p{
	text-align: left !important;
}

.block-small ul{
	color: #797979;
	font-size: 14px;
	list-style-type: none;
}

.block-small ul li{
	margin-left: -12px;
	padding-left: 12px;
	margin-right: -12px;
	padding-right: 5px;
	line-height: 23px;
	list-style-type: none !important;
}

.block-small ul li.grey{
	background-color: #F7F7F7;
}

#main-content a{
	color: #006C49;
	text-decoration: none;
}

#main-content a.carouselBtn{
	color: #ffffff;
}

#main-content a:hover{
	text-decoration: underline;
}

img.leftalign{
	float: left;
	margin: 0 20px 10px 0;
}

img.rightalign{
	float: right;
	margin: 0 0 10px 20px;
}

img.centre, img.center, .centre{
	margin: 0 auto 10px auto;
	width: 100%;
	
}

img.border{
	border: 1px solid #006B48;
}

.board-inactive {
	border: 0px none;
}

.board-active {
	border: 2px solid #FF840D;
}

.board-active .hover-board-name {
	color: #ffffff;
	text-align: center;
	background-color: #006C4A;
}

#content-wrapper li{
	list-style-type: disc;
	color: #3D3D3D;
	font-size: 14px;
	line-height: 19px;
}

/*------------------------------------------------questions dropdown--*/

#content-heading #btn-question{
	float: right;
	margin: -24px 235px 0 0;
	_margin: -23px 255px 0 0; /* reapply rule for IE6 */
}

#question{
	width: 184px;
	background-color: #BFBFBF;
	position: absolute;
	top: 62px;
	left: 545px;
	z-index: 10;
	_left: 525px;
	padding-left: 10px;
	
}

#question img{
	float: left;
}

form.question{
	margin: 0px 0px 10px;
	padding-top: 3px;
	width: 174px;
	border-bottom: 2px dotted #C4C4C4;

}

form.question input{
	font-size: 10px;
	color: #494949;
	border: 0px none;
	background-color: #ffffff;
	width: 170px;
	height: 16px;
	margin-bottom: 3px;
}

form.question textarea{
	color: #494949;	
	border: 0px none;
	background-color: #ffffff;
	width: 170px;
	margin-top: 2px;
	font: 11px Arial, Helvetica, Geneva, sans-serif;
}

form.question #submit {
	width: 82px;
}

#question p{
	font-size: 10px;
	color: #5F5F5F;
	line-height: 14px;
}

/*-------------------------------pagination----*/
#pagination{
	clear: both;
	font-size: 12px;
	width: 200px;
}

#pagination-top{
	float: right;
	margin: 20px 0;
	width: 180px;
}

#pagination p, #pagination-top p{
	color: #006E4B;
}

#pagination a, #pagination-top a{
	color: #787878;
	text-decoration: none;
}

#pagination .pages a, #pagination-top .pages a{
	font-size: 15px;
}

#pagination a.page, #pagination-top a.page{
	color: #787878;
	text-decoration: underline;
}

#pagination a.page:hover, #pagination-top a.page:hover{
	text-decoration: none;
}


/*-------------------------------custom classes--*/
.left-block{
	float: left;
	width: 335px;
	padding-left: 20px;
	margin-top: 10px;
}

.right-block{
	float: right;
	width: 280px;
	border-left: 2px dotted #A6A6A6;
	padding-left: 50px;
	margin-top: 10px;
}

.award, .project{
	width: 326px;
	background: url(images/award-summary-bg.gif) no-repeat;
	height: 250px;
	float: left;
	margin: 0 20px 10px 0;
}

.award h3, .project h3{
	font-size: 12px;
	font-weight: bold;
	color: #005339;
	height: 37px;
	margin: 15px 0 3px 21px;
	width: 220px;
}

img.award-img, img.project-img{
	margin: 15px 0 20px 18px;
}

.project .project-inner {
	height: 165px;
	position: relative;
}

.project .project-overlay {
	position: absolute;
	z-index: 1;
	height: 118px;
	width: 286px;
	margin: 15px 0 0 18px;
	background: #000000;
	display: none;
}

.project .project-inner .project-summary {
	position: absolute;
	z-index: 99;
	top 0px;
	height: 108px;
	width: 276px;
	margin: 15px 0 0 18px;
	overflow: hidden;
	display: none;
	padding: 5px;
}

#main-content .project .project-inner .project-summary p {
	color: #fff;
	font-size: 11px;
	line-height: 16px;
}

.newsletter{
	width: 326px;
	height: 367px;
	float: left;
	background: url(images/newsletter-bg.gif) no-repeat;
	margin: 0 20px 20px 0;
	
}

.newsletter h3{
	color: #005339;
	font-size: 16px;
	font-weight: bold;
	line-height: 15px;
	margin: 28px 0 13px 30px;
}

img.newsletter-img{
	margin: 28px 0 60px 95px;
}

.news{
	background: url(images/news-bg.gif) no-repeat;
	width: 680px;
	padding: 5px 10px 0px;
	
}

.news h2{
	color: #005339;
	font-size: 18px;
	font-weight: bold;
	width: 450px;
	float: left;
	margin-bottom: 20px !important;
}

.news p.meta{
	float: left;
	width: 200px;
	font-size: 14px;
	color: #787878;
	margin: 6px 10px 0 20px;
}

.board{
	width: 255px;
	height: 82px;
	float: left;
	margin: 10px 40px 10px 0;
	padding: 18px 0 0 14px;
	background: url(images/boardname-bg.gif) no-repeat;
}

.board h3{
	color: #005339;
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 5px;
}

.board p{
	font-size: 14px;
	color: #3D3D3D;
	font-style: italic;
}

.green{
	color: #005339 !important;
}

.jobposition{
	margin-left: -10px;
	clear: both;
}

.jobposition p.upload{
	width: 226px;
	text-align: center !important;
	margin: 5px 0;
}

form.jobposition-form .submit{
	margin: 5px auto;
	text-align: center;

}

div.job-info {
	border: 1px solid #000;
	width: 278px;
	margin-bottom: 10px;
}
div.job-info ul {
	margin-bottom: 2px;
}

.client{
	background: url(images/client-bg.gif) no-repeat;
	width: 180px;
	height: 151px;
	float: left;
	margin-right: 12px;
	margin-bottom: 15px;
	padding: 10px 20px 0;
}

.client h3{
	color: #005339;
	font-size: 14px;
	font-weight: bold;
	font-family: arial;
	width: 170px;
}

h3.carrers-title{
	margin-top: 30px;
}

.careers-meta{
	font-size: 11px;
}

.client .client-thumb{
	position: relative;
	top: 95px;
	left: 135px;
	height: 25px;
}

.line{
	float: left;
	border-bottom: 2px dotted #EEEEEE;
	width: 500px;
	margin: 40px 0px;
}

.details-left{
	float: left;
	width: 450px;
}

.details-right{
	float: right;
	width: 213px;
}

.refine{
	margin: 0 10px;
}

.read-more-search{
	clear: both;
	width: 681px;
	margin-bottom: 25px;
	margin-top: -15px;

}

/*-----------------------------forms--*/

form#project-search{
	clear: both;
	padding-left: 5px;
}

form#project-search label{
	display: block;
	color: #797979;
	font-size: 16px;
}

form#project-search input.search-field{
	margin: 2px;
	height: 16px;
	width: 144px;
	border: solid 0 #fff;
	padding: 2px;
	background-color: #BFBFBF;
}

form#project-search .main label, form#project-search .main input{
	color: #006E4B;
}

form#project-search input.submit{
	float: right !important;
}


form#project-search select{
	font-size: 12px;
	color: #545454;
	font-weight: bold;
	width: 150px;
}

form#project-search .search{
	float: left;
	width: 165px;
	margin-bottom: 5px;
	margin-right: 0px;
}

form#project-search .search-right{
	float: right;
	width: 165px;
	margin-bottom: 5px;
	margin-right: 35px;
	
}

form#project-search .search-right select{
	width: 200px;
}

form#project-search .main{
	float: left !important;

}

form#project-search .search-btn{
	margin-right: 25px;
}

form#search-results{
	color: #797979;
}

form#search-results .keyword{
	width: 280px;
	float: left;
	margin-left: 5px;
}

form#search-results .keyword label, form#search-results .select label{
	display: block;
	color: #005339;
}

form#search-results .select{
	width: 300px;
	float: left;
}



form#search-results .searchbtn{
	float: right;
	width: 100px;
	margin-top: 10px;
}

form#search-results input{
	margin-right: 20px;
	background-color: #EEEEEE;
	border: 0px none;

}

form#search-results input.search-field{
	margin: 3px;
	height: 20px;
	width: 153px;
	border: solid 0 #fff;
	padding: 3px 35px 0 10px;
	background-color: #BFBFBF;
}

.disabled-category{
	color: #a3a3a3;
}
/*-------------------------------sidebar--*/

#sidebar{
	width: 194px;
	float: right;
	margin-right: 25px;
	margin-top: -70px;
	_width: 169px;
	position: relative;
	z-index: 2;
	
}

#accordion {
	margin: -5px 0 0 0;
	*margin: -2px 0 0 0;
}

#accordion-top{
	background: url(images/sidebar-our-expertise.gif) no-repeat;
	width: 194px;
	height: 29px;
	margin-bottom: 1px;
}

#accordion-bottom{
	background: url(images/sidebar-footer.gif) no-repeat;
	height: 13px;
	width: 194px;
}

#accordion a{
	text-decoration: none;
}

h3.toggler {
	height: 23px;
	margin-bottom: 1px;
	padding: 8px 10px 0 0;
	width: 184px;
	background: url(images/sidebar-accordion.png) no-repeat 0 0;
	color: #ffffff;
	font-size: 11px;
	font-style: italic;
	font-weight: bold;
	text-align: right;
	letter-spacing: 1px;
	text-transform: uppercase;
}

/* this is now overwritten by the js that moves the 'accordion' in the side bar */
h3.toggler:hover{
	background-position:0 -31px;
}

#client-slideshow{
	background: url(images/clients-box.gif) no-repeat;
	width: 189px;
	height: 111px;
	margin: 14px 0;
	padding: 34px 0 0 5px;
	text-align: center;
}

/*-------new products --*/
#new-products-heading{
	background: url(images/news-flash-header.gif) no-repeat;
	width: 194px;
	height: 32px;
}

#new-products-body{
	width: 174px;
	background: url(images/new-products-body.gif) no-repeat 0 bottom;
	text-align: center;
	color: #3D3D3D;
	font-size: 10px;
	padding: 0 10px 20px;
	margin-bottom: 10px;
}

.new-products-line{
	width: 170px;
	margin: 0 auto;
	height: 1px;
	border-bottom: 1px solid #EBEBEB;
	margin-bottom: 10px;
}

.new-product a{
	color: #000;
	text-decoration: none;
}

.new-product p{
	text-align: left !important;	
}

/*-------------------------------footer--*/

#footer-bg{
	clear: both;
	width: 100%;
	background: url(images/bg-footer.gif) repeat-x;
	height: 135px;
}

#footer{
	width: 971px;
	margin: 0 auto;
	height: 119px;
	background: url(images/footer-bg.png) no-repeat;
	
}

#footer li a:link, #footer li a:visited{
	color: #990000;
	font: 12px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	text-decoration: none;
}

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

#footer ul{
	list-style-type: none;
	line-height: 18px;
	float: left;
	margin-bottom: 12px;
}

#footer li{
	background: url(images/footer-arrow.png) no-repeat left center;
	padding-left: 35px;
}

#footer ul.footerlist-1{
	padding: 52px 0 0 15px;
}

#footer ul.footerlist-2{
	padding: 34px 0 0 15px;
}

#footer ul.footerlist-3{
	padding: 16px 0 0 65px;
}

#footer ul.footerlist-4{
	padding: 16px 0 0 30px;
}

#footer-logos{
	width: 200px;
	float: right;
	margin-top: 32px;
}

#footer-logos img{
	margin-right: 10px;
}

#copyright{
	color: #414141;
	font: 11px Arial, Helvetica, Geneva, sans-serif;
	text-align: right;
	padding-right: 20px;
	clear: both;
}

#copyright a:link, #copyright a:visited{
	color: #414141;
	text-decoration: none;
}

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

/* PNG HACK */
* html .png{
/*position:relative; */
behavior: expression((this.runtimeStyle.behavior="none")&&(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
this.src = "/images/x.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
this.runtimeStyle.backgroundImage = "none")),this.pngSet=true)
);
}

.layout{
	zoom: 1;
	position: relative;
	z-index: 1;
}

/*
*html #nav li {
behavior: expression(
this.onmouseover = new Function("this.className += ' sfhover'"),
this.onmouseout = new Function("this.className = this.className.replace(' sfhover','')"),
this.style.behavior = null
);
}
*/