/* ########################################################################### *
/* ***** DOCUMENT INFO  ****************************************************** *
/* ########################################################################### *
 * ##### NAME:  global.css
 * ##### VERSION: v0.1
 * ##### UPDATED: 26/12/2009 (Damian Keeghan - DMK Web Design)
/* ########################################################################### *

/* ########################################################################### *
/* ***** INDEX *************************************************************** *
/* ########################################################################### *
/* ##### RESET
/* ##### GLOBAL
/* ##### CLEARFIX
/* ########################################################################### */

/* ########################################################################### *
/* ##### RESET
/* ########################################################################### */
/*
Copyright (c) 2009, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
version: 2.7.0
*/
html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var,optgroup{font-style:inherit;font-weight:inherit;}del,ins{text-decoration:none;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:baseline;}sub{vertical-align:baseline;}legend{color:#000;}input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;}input,button,textarea,select{*font-size:100%;}*{outline:none;}

/* ########################################################################### *
/* ##### GLOBAL
/* ########################################################################### */

html, body{
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	font-size: 12px;
	color: #CCC;
	line-height: 16px;
	background-color: #0B1013;
}

.hidden{
	display: none;	
}

.offscreen{
	position: absolute;
	left: -9999px;
}

ul.horizontal li{
	float: left;
	display: block;
}

	ul.horizontal li li{
		float: none;
		display: inline;
	}	

.left{
	float: left;	
}

.right{
	float: right;	
}

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

#container{
	width: 980px;
	margin: 0 auto;
}

#header, #footer{
	text-align: center;
}
	
#contentContainer{
	background-color: #000;
	display: block;
}

	#navigation{
		width: 110px;
		float: left;
		margin: 20px 10px;
	}
	
/* ########################################################################### *
/* ##### BUTTONS
/* ########################################################################### */

input.button,
input.button:visited{
	background: #00609d url(images/bg_btn.png) repeat-x bottom left;
	display: block;
	padding: 5px 10px;
	border: none;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	color: #FFF;
	cursor: pointer;
}

	input.button:hover,
	input.button:focus{
		background: #0080d2 url(images/bg_btn_over.png) repeat-x bottom left;
	}

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

#header{
	margin: 20px 0;	
}

/* ########################################################################### *
/* ##### NAVIGATION
/* ########################################################################### */

#navigation{
	
}
	
	#navigation li{
		position: relative;	
	}
	
		#navigation li a,
		#navigation li a:visited{
			color: #E7E7E7;
			text-decoration: none;
			text-transform: uppercase;
			display: block;
			line-height: 15px;
			padding: 5px 0 5px 10px;
		}
		
			#navigation li a:hover,
			#navigation li a:focus,
			#navigation li:hover a{
				background-color: #212121;
			}
			
		#navigation li.active > a{
			color: #3868A9;	
		}

	#navigation li ul{
		display: none;
		width: 639px;
		position: absolute;
		left: 110px;
		top: 0px;
		background-color: #212121;
		font-size: 11px;
		z-index: 1000;
	}
	
	#navigation > ul > li > ul{
		-moz-box-shadow: 2px 2px 10px #000;
		-webkit-box-shadow: 2px 2px 10px #000;
		box-shadow: 2px 2px 10px #000;	
	}
	
		#navigation li ul li{
			width: 127px;
			float: left;
			border-left: 1px solid #373737;
			background-color: #404040;
			display: block;
		}
		
			#navigation li ul li:first-child{
				border-left: none;	
			}
		
			#navigation li ul li span{
				color: #E7E7E7;
				text-decoration: none;
				text-transform: uppercase;
				display: block;
				line-height: 15px;
				padding: 5px 0 5px 10px;
				cursor: default;
			}
		
			#navigation li ul li ul{
				position: relative;
				top: auto;
				left: auto;
				width: auto;
				padding: 5px 0 7px 0;
				display: block;
			}
			
				#navigation li ul li ul li{
					float: none;
					border: none;
					background-color: #212121;
				}
				
					#navigation li ul li ul li a,
					#navigation li ul li ul li a:visited{
						text-transform: none;
						line-height: 15px;
						padding: 2px 0 2px 10px;
					}
					
					#navigation li ul li ul li a:hover,
					#navigation li ul li ul li a:focus,
					#navigation li ul li ul li.active a{
						color: #3868A9;
					}
	
	/*
	#navigation li:hover ul,
	#navigation li a:focus + ul{
		display: block;
	}
	*/

/* ########################################################################### *
/* ##### CONTENT
/* ########################################################################### */

#content{
	width: 809px;
	float: left;
	padding: 20px;
	border-left: 1px solid #0B1013;
	min-height: 490px;
}

#content > div.clearfix{
	
}

	#content h1{
		font-family: Century Gothic, Verdana, Geneva, sans-serif;	
		color: #00619E;
		padding-bottom: 24px;
		border-bottom: 1px solid #0B1013;
		font-size: 24px;
		margin-bottom: 15px;
	}

	#content h2{
		font-family: Century Gothic, Verdana, Geneva, sans-serif;
		color: #CCC;
		font-size: 20px;
		margin-bottom: 15px;
		line-height: 24px;
	}

	#content h3{
		color: #CCC;
		font-size: 13px;
		margin-bottom: 5px;
		font-weight: bold;
	}

	#content p{
		line-height: 20px;
		margin-bottom:15px;
		text-align: justify;
	}
	
	#content img{
		margin-bottom: 20px;	
	}
	
		#content img.homepage{
			margin-bottom: 0px;	
		}
	
	#content a{
		text-decoration: none;
		color: #FFF;
	}
	
		#content a:hover,
		#content a:active,
		#content a:focus{
			text-decoration: underline;
			color: #00619E;	
		}

/* ########################################################################### *
/* ##### ABOUT US
/* ########################################################################### */

#aboutUsDescription{
	width: 201px;
	margin-right: 20px;
	float: left;
}

#aboutUsImage{
	width: 588px;
	float: left;
}

	#aboutUsImage img{
		margin-bottom: 0;	
	}

/* ########################################################################### *
/* ##### PROJECT
/* ########################################################################### */

#content ul.projectDetails{
	line-height: 21px;
	margin-bottom: 15px;	
}

	#content ul.projectDetails li{
		font-family: Century Gothic, Verdana, Geneva, sans-serif;
		font-size: 14px;
	}

#projectDescription{
	width: 201px;
	margin-right: 20px;
	float: left;
}

#projectImage{
	width: 588px;
	float: left;
}
	
	#projectImage img{
		margin-bottom: 0;	
	}
	
	#imageStatus{
		position: absolute;
		padding: 3px 6px;
		margin: 10px 0 0 10px;
	}
	
		#imageStatus.loading{
			background: #00619E;
			color: #CCC;
		}

		#imageStatus.error{
			background: #3f0c0c;
			color:#d02b31; 
		}
		
#projectThumbnails li{
	margin: 0 0 10px 10px;
}

	#projectThumbnails a{
		display: block;
		width: 60px;
		height: 60px;
		text-indent: -9999px;
		background-repeat: no-repeat;
	}

		#projectThumbnails a:hover,
		#projectThumbnails a:focus{
				
		}
		
		#projectThumbnails li.active a{
			border: 4px solid #00619E;
			width: 52px;
			height: 52px;
		}
		
			#projectThumbnails li.active a img{
				cursor: default;	
			}

	#projectThumbnails li:nth-child(3n+1){
		margin-left: 0px;	
	}
	
	#projectThumbnails li.first{
		margin-left: 0px;	
	}

body.noJS #projectThumbnails li{
	margin-right: 9px;
	margin-left: 0px;
}

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

#contactForm{
	width: 219px;
	float: left;
}

	#contactForm .ctrlHolder{
		margin-bottom: 15px;	
	}
	
	#contactForm label{
		display: block;
		margin-bottom: 5px;	
	}
	
		#contactForm label em,
		#contactForm em.mandatory{
			color: #cc3333;	
		}
	
	#contactForm input.text,
	#contactForm select,
	#contactForm textarea{
		font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
		font-size: 11px;
		color: #000;
		width: 215px;
		padding: 5px 2px;
		background-color: #CCC;
		border: none;
	}
	
		#contactForm input.text:focus,
		#contactForm select:focus,
		#contactForm textarea:focus{
			background: #FFF;
		}
	
		#contactForm select{
			width: 219px;	
		}
	
	#contactForm textarea{
		height: 150px;	
	}

	#contactForm .actions input#btn_contactSubmit{
		float: right;
	}

.contactStatus{
	
}

	.contactStatus .status{
		padding: 10px;
		color: #333333;
		margin-bottom: 15px;
	}
	
		.contactStatus .error{
			background: #3f0c0c;
			color:#d02b31; 
		}
	
		.contactStatus .success{
			background: #060;
			color: #CCC;
		}

		.contactStatus .loading{
			background: #00619E;
			color: #CCC;
		}

#contactDetails{
	float: left;
	width: 310px;
	margin-left: 40px;
}

	#contactDetails h3{
		margin-bottom: 15px;	
	}
	
	#contactDetails img{
		margin-bottom: 10px;	
	}
	
	#contactDetails li strong{
		width: 60px;
		display: block;
		float: left;
		font-weight: bold;
	}
	
	#contactDetails div.location{
		padding: 20px 0;
	}
	
		#contactDetails div.first{
			padding-top: 0px;
			border-bottom: 1px solid #0b1013;
		}
		
		#contactDetails div.last{
			padding-bottom: 0px;
		}

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

#footer{
	margin: 10px 0 15px 0;	
}

	#footer p{
		font-size: 11px;
		line-height: 16px;
	}

/* ########################################################################### *
/* ##### CLEARFIX
/* ########################################################################### */

/* slightly enhanced, universal clearfix hack */
.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
	}
.clearfix { display: inline-block; }

/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* stop commented backslash hack */