/* OCTIEF Style Sheet created by 2Creative */

* {	margin: 0;	padding: 0; }
body { color: #999;	font: 75%/1.2em Arial, Helvetica, sans-serif; background: #FFF; }	
h1 { font-size: 130%; margin-bottom: 20px; color: #666;	}
h2 { font-size: 120%; font-weight: normal; margin-bottom: 15px; line-height: 1em; color: #666; }
h3 { font-size: 110%; margin-bottom: 15px; line-height: 1em; color: #666;}
h4 { font-size: 100%; margin-bottom: 15px; line-height: 1em; color: #666;}
p { padding-bottom: 15px; }
img { border: none; }	
a {	color: #666; text-decoration: underline; }
a:hover { text-decoration: none; }
ul, ol { padding-left: 20px; margin-bottom: 15px; }
li { list-style: square; margin-bottom: 2px; }

#wrapper { width: 1110px; margin: 0 auto; }	
	#header { }		
		#menu { float: right; width: 867px; }
			#menu a { font-size: 12px; text-decoration: none; display: block; border-top: 2px solid #D71920; padding-top: 15px; }
			#menu a:hover { color: #D71920; text-decoration: none; }
			#menu-home { float: left; width: 65px; height: 27px; }
			#menu-octief { float: left; width: 75px; height: 27px; }
			#menu-services { float: left; width: 92px; height: 27px; }
			#menu-project { float: left; width: 96px; height: 27px; }
			#menu-sectors { float: left; width: 89px; height: 27px; }
			#menu-portfolio { float: left; width: 99px; height: 27px; }
			#menu-web-solutions { float: left; width: 128px; height: 27px; }
			#menu-careers { float: left; width: 92px; height: 27px; }
			#menu-news { float: left; width: 67px; height: 27px; }
			#menu-contact { float: left; width: 60px; height: 27px; }
	#logo-wrapper { padding-bottom: 30px; }
		#logo { float: left; width: 159px; }
		#news-summary-title { float: right; width: 311px; height: 11px; margin-top: 103px; 
			background: url(images/news-title.jpg) no-repeat top left; }
		
	#main-content {}	
		#main-content-top {}
			#banner { float: left; width: 770px; border-top: 1px solid #999; padding-top: 30px; }	
				.slideshow { width: 770px; height: 270px; overflow: hidden; }
			#news-summary { float: right; width: 311px; border-top: 1px solid #999; padding-top: 30px; }
			#news-summary h4 { font-size: 14px; font-weight: normal; color: #D71920; }
			#news-summary a { color: #D71920; text-decoration: none; }
			#news-summary a:hover { text-decoration: underline; }
			
		#main-content-bot { padding-bottom: 110px; }
			#service-summaries { float: left; width: 770px; border-top: 1px solid #999; padding-top: 30px; }
			#service-summaries h2 { font-size: 110%; margin-bottom: 15px; line-height: 1em; color: #666;}
				.sevice-summary { float: left; width: 170px; border-top: 5px solid #D71920; padding-top: 20px; margin-right: 30px; }
				.sevice-summary-last { margin-right: 0; }
				
			#folio-summary { float: right; width: 311px; border-top: 1px solid #999; padding-top: 30px; }
				#sevice-summary-image { float: left; width: 150px; }
				#folio-summary-box { float: right; width: 140px; }
				#folio-summary-title { /*height: 11px; */background: url(images/new/portfolio-title.jpg) no-repeat top left; /*margin-bottom: 19px;*/ }
				#folio-summary-logos img { margin-bottom: 24px; }	
	
	#main-content-other { margin-bottom: 30px; }		
		#main-content-left { float: left; width: 769px; border-top: 1px solid #999; padding-top: 30px;}
			#main-content-text { float: left; width: 759px; }
			#main-content-image { float: right; width: 151px; }
			#main-content-image img { margin-bottom: 30px; }
			
			#main-content-details-text { float: left; width: 578px; }
			#main-content-details-image { float: right; width: 151px; }
			#main-content-details-image img { margin-bottom: 30px; }
			
			#news-text { float: left; width: 548px; }
			#news-images { float: right; width: 180px; }
				#news-images img { margin-bottom: 30px; }			
					
			.submenu { padding-left: 0; }
			.submenu li { list-style: none; margin-bottom: 5px; }
			.submenu li a { color: #D71920; text-decoration: none; }
			.submenu li a:hover { color: #D71920; text-decoration: underline; }
			
			#learnmore { margin-top: 20px; }
			
			.service-listing-left { float: left; width: 360px; margin-bottom: 30px;}
			.service-listing-right { float: right; width: 360px; margin-bottom: 30px;}
			.service-listing-left h3, .service-listing-right h3 { font-weight: normal;  }
			.service-listing-left h3 a, .service-listing-right h3 a { color: #D71920; text-decoration: none; }
			.service-listing-left h3 a:hover, .service-listing-right h3 a:hover { color: #D71920; text-decoration: underline; }
			.service-listing-left p, .service-listing-right p { color: #666; }
			.service-listing-image { float: left; width: 120px; margin-right: 20px; }
			.service-listing-text { float: left; width: 220px; }
			
			.project-listing-left { float: left; width: 360px; margin-bottom: 30px;}
			.project-listing-right { float: right; width: 360px; margin-bottom: 30px;}
			.project-listing-left h2, .project-listing-right h2 { font-size: 110%; font-weight: normal; color: #D71920; line-height: 1.2em;}
			.project-listing-left h2 a, .project-listing-right h2 a { color: #D71920; text-decoration: none; }
			.project-listing-left h2 a:hover, .project-listing-right h2 a:hover { color: #D71920; text-decoration: underline; }
			.project-listing-left ul, .project-listing-right ul { padding-left: 15px; }
			.project-listing-left li, .project-listing-right li { list-style: square; } 
			.project-listing-image { float: left; width: 120px; margin-right: 20px; }
			.project-listing-text { float: left; width: 220px; }
			
			.job-listing { margin-bottom: 20px; }
			.job-listing h2 a { color: #D71920; text-decoration: none; }
			.job-listing h2 a:hover { color: #D71920; text-decoration: underline; } 
			
			.news-listing { margin-bottom: 20px; }
			
			#job-desc { float: left; width: 390px; }
			#job-app { float: right; width: 320px; }
			
			.folio { margin-bottom: 20px; }
			
			/*
			.web-folio { margin-bottom: 20px; }
				.web-folio-img { float: left; width: 300px; margin-right: 20px; }
				.web-folio-txt { float: left; width: 420px; }
			*/ 
			
			.web-folio { margin-bottom: 20px; }
				.web-folio-img { margin-bottom: 10px; }
				.web-folio-txt {  }
			
			#contact-left { float: left; width: 320px; }				
			#contact-right { float: right; width: 400px; }
				#contact-left h2 { font-size: 14px; margin-bottom: 5px; }
				#contact-left p { margin-bottom: 20px; }
		
					
		#main-content-right { float: right; width: 311px; border-top: 1px solid #999; }
			#news-summary-other { padding-top: 30px; padding-bottom: 9px; }
			#news-summary-other h4 { font-size: 14px; font-weight: normal; color: #D71920; }
			#news-summary-other h4 a { color: #D71920; text-decoration: none; }
			#news-summary-other h4 a:hover { color: #D71920; text-decoration: underline; }

#sub-content-wrapper { width: 100%; margin: 0 auto; background: #D71920; padding-top: 30px; padding-bottom: 30px; color: #FFF; }
	#sub-content { width: 1110px; margin: 0 auto; }
	#sub-content h3 { font-size: 12px; font-weight: normal; margin-bottom: 10px; color: #FFF; } 
	#sub-content ul { list-style: none; padding-left: 0; margin-bottom: 0; } 
	#sub-content li { list-style: none; margin-bottom: 1px; font-size: 11px; }
	#sub-content a { text-decoration: none; color: #FFF; }
	#sub-content li a.more { background: url(images/arrow-on-red.jpg) no-repeat right center; padding-right: 20px; }
	#sub-content a:hover { text-decoration: underline; color: #FFF; }
	.sub-menu-small { float: left; width: 55px; min-height: 150px; margin-right: 20px; }
	.sub-menu-medium { float: left; width: 100px; min-height: 150px; margin-right: 20px; }
	.sub-menu-med-large { float: left; width: 140px; min-height: 150px; margin-right: 20px; }
	.sub-menu-large { float: left; width: 150px; min-height: 150px; margin-right: 20px; }
	.sub-menu-extra-large { float: left; width: 150px; min-height: 150px; margin-right: 20px; }
	#sub-menu-last { margin-right: 0; }
	
	#enews { margin-top: 30px; }
		#enews h2 { color: #D71920; }

#footer { width: 100%; margin: 0 auto; background: #666; }
	#footer p { font-size: 11px; padding: 15px; color: #FFF; text-align: center; }
	#footer a { color: #FFF; text-decoration: none; }
	#footer a:hover { color: #FFF; text-decoration: underline; }
			
		
/************************ MISC ********************/	
.clearFloat { clear: both; line-height: 0; height: 0; }
.warning { color: #CC0000; font-weight: bold; padding-bottom: 10px; }
.notice { font-size: 85%; font-style: italic; }
.heading, .invisible { display: none; }
.textRed, .textRedBold { color: #D71920; }
.textGrey, .textGreyBold { color: #999; }
.textDarkGrey, .textDarkGreyBold { color: #666; }
.textDarkGreyBold, .textRedBold, .textGreyBold { font-weight: bold; }
.morelink a { color: #D71920; text-decoration: none; 
	background: url(images/arrow-red.jpg) no-repeat right center; padding-right: 16px; }
a.applyButton { border: 1px solid #D71920; background: #D71920; font-size: 12px; color: #FFF; width: 160px; cursor: pointer; padding: 5px 10px;  text-decoration: none; }
a.applyButton:hover { text-decoration: none; }

.news-date { font-style: italic; }
.pagination { margin-top: 30px; margin-bottom: 30px; }
.pagination ul { margin: 0; padding: 0; text-align: center; font-size: 12px; }
.pagination li { list-style-type: none; display: inline; padding-bottom: 1px; margin-right: 2px; }
.pagination a, .pagination a:visited { padding: 5px 8px; border: 1px solid #999; text-decoration: none; color: #666; }
.pagination a:hover, .pagination a:active{ border: 1px solid #999; color: #FFF; background-color: #999; }
.pagination a.currentpage { background-color: #FFF; color: #999 !important; border-color: #999; font-weight: bold;
cursor: default; }
.pagination a.disablelink, .pagination a.disablelink:hover { background-color: white; cursor: default; color: #999; border-color: #999; font-weight: normal !important; }
.pagination a.prevnext { }

/************************* FORM **********************/
input, textarea { font: 12px/1.4em Arial, Helvetica, sans-serif; 
	margin-bottom: 5px;	border: 1px solid #333;	padding: 2px; width: 160px;	color: #333; }
	
#formContact {}
#formContact br { clear: left; }
#formContact label, #formContact input, #formContact select, #formContact textarea {
	display: block;	width: 200px; float: left; margin-bottom: 10px; border: 1px solid #333;	font-size: 100%; padding: 2px; }
#formContact input, #formContact select, #formContact textarea { border: 1px solid #333; }
#formContact label { text-align: left; width: 100px; padding-right: 5px; border: none; }
#formContact p { padding-top: 10px;	padding-bottom: 5px; }
#formContact br { clear: left; }
#formContact .sendButton, .yesButton,  .noButton { 
	cursor: pointer; color: #FFF; font-size: 12px; border: none; float: left; display: block; margin-top: 10px; background: #D71920; width: 100px; padding-top: 5px; padding-bottom: 5px; }
.yesButton, .noButton { width: 50px; }
.noButton { margin-left: 10px; }
#formContact .tinyInput { width: 20px; }
#formContact .dateInput { width: 80px; margin-right: 10px; }
#formContact .smallInput { width: 100px; }
#formContact .mediumInput { width: 200px; }
#formContact .mediumLabel { width: 230px; }
#formContact .wideLabel { width: 260px; }
#formContact .extrWideLabel { width: 400px; }
#formContact input.hidden { display: none; }
#formContact .checkBox { width: 15px; height: 15px; margin: 0 5px 0 0; border: 1px solid #01223C; }
#formContact .checkboxLabel { margin-right: 20px; width: 120px; display: block; }
#formContact .checkboxWideLabel { margin-right: 20px; width: 200px; display: block; }

#formSignup {}
#formSignup br { clear: left; }
#formSignup label, #formSignup input, #formSignup select, #formSignup textarea {
	display: block;	width: 200px; float: left; margin-bottom: 10px; border: 1px solid #333;	font-size: 100%; padding: 2px; }
#formSignup input, #formSignup select, #formSignup textarea { border: 1px solid #333; }
#formSignup label { text-align: left; width: 100px; padding-right: 5px; border: none; }
#formSignup p { padding-top: 10px;	padding-bottom: 5px; }
#formSignup br { clear: left; }
#formSignup .sendButton { cursor: pointer; color: #FFF; font-size: 12px; border: none; float: left; display: block; margin-top: 10px; background: #D71920; width: 100px; padding-top: 5px; padding-bottom: 5px; }