/* (C) Copyright 2008 | Jon P. Brousseau | Design for interaction and print */

/* --[ globals ]------------------------------------------------------------------------------------------------- */	

@import url("reset.css");

body {
	background: #050707 url(../images/interface/bg-body.jpg) repeat-x 0 0;
	background-attachment: fixed;
	}

p {
	font:1.2em/1.2em "helvetica", arial, verdana, sans-serif;
	color: #616362;
	}

	p a {
		text-decoration:none;
		color:#5e9efe;
		border-bottom: dotted 1px #494c4c !important;
		border-bottom: solid 1px #393d3d;
		}

		p a:hover {
			color:#fff;
			border-bottom: dotted 1px #9fa1a0 !important;
			border-bottom: solid 1px #585d5d;
			}

strong {
	font-weight:bold;
	}
	
em {
	font-style:italic;
	}

#portfolio div:after {
	display: block;
	clear: both;
	content: "";
	height: 0;
	overflow: hidden;
	}

/* --[ #header ]------------------------------------------------------------------------------------------------- */	

#header { 
	position: absolute; 
	top: 0px;
	background:transparent url(../images/interface/bg-header.png) 0 0 repeat-x;
	border-bottom:1px solid #353939;
	width:100%;
	padding: 10px 0;
	height:40px;
	z-index:1;
	}
	
	#header div { 
		width:763px;
		margin:0 auto;
		}

	div > div#header { 
		position: fixed; 
		}
	
	#header h1 a {
		display:block;
		margin-top:8px;
		height:23px;
		width:210px;
		background:transparent url(../images/interface/logo.png) 0 0 no-repeat;
		text-indent:-5000px;
		float:left;
		zoom:1;
		}
	
	#header p {
		display:block;
		margin-top:13px;
		height:23px;
		width:210px;
		float:right;
		text-align:right;
		display:block;
		}
		
		#header p a {
			font-weight:bold;
			text-transform:uppercase;
			border-bottom:none !important;
			border-bottom:none;
			font-size:.8em;
			width:7em;
			padding:0 0 0 18px;
			}

/* --[ #column ]------------------------------------------------------------------------------------------------- */	
	
#column {
	width:763px;
	margin:0 auto;
	}

/* --[ #about ]------------------------------------------------------------------------------------------------- */

#about {
	padding-top:105px;
	}

	#about p {
		font-size:2em;
		line-height:1.4em;
		}
	
	#about h1 {
		display:block;
		height:357px;
		width:763px;
		background:transparent url(../images/interface/hdr-main.gif) 0 0 no-repeat;
		text-indent:-5000px;
		margin-bottom:40px;
		}
		
		#about h1.error {
			background:transparent url(../images/interface/hdr-404.gif) 0 0 no-repeat;
			height:129px;
			}
			
	/* tooltip */
	a.tooltip {
		position:relative;
		text-decoration:none;
		}
		
		a.tooltip span {
			display: none;
			font-size:.6em;
			line-height:1em;
			font-weight:bold;
			padding:0;
			margin:0;
			color:#accaee;
			}
		
			a.tooltip:hover span {
				display:block;
				position:absolute;
				top:-44px;
				left:0;
				padding:7px 2px 21px 8px;
				width:182px;
				border-top:1px solid #929292;
				background: url(../images/interface/tooptip.gif) no-repeat bottom;
				cursor:pointer;
				}	

/* --[ #portfolio ]------------------------------------------------------------------------------------------------- */	

#portfolio {
	padding-top:90px;
	}
		
	#portfolio div {
		clear:both;
		border-top:10px solid #131818;
		zoom:1;
		padding:24px 0;
		}
		
		#portfolio img {
			background:#0d1111;
			color:#0d1111;
			/*margin:22px 0;*/
			}
		
		#portfolio p {
			font-size:1.4em;
			line-height:1.5em;
			width:498px;
			float:left;
			padding-right:10px;
			border-right:1px solid #333;
			margin-top:20px;
			}
		
			#portfolio p a {
				color:#c9c9c9;
				}
				
				#portfolio p a:hover {
					color:#fff;
					}
		
		#portfolio h2 {
			display:block;
			text-indent:-5000px;
			height:56px;
			width:651px;
			background:transparent url(../images/interface/hdr-portfolio.gif) 0 0 no-repeat;
			margin-bottom:24px;
			}
				
		#portfolio h3 {
			color:#c9c9c9;
			font-size:2.2em;
			font-weight:bold;
			padding-bottom:24px;
			}
		
		#portfolio h4 {
			width:253px;
			float:right;
			text-align:center;
			font-size:1em;
			color: #616362;
			display:block;
			margin-top:4.5em;
			font-weight:bold;
			text-transform:uppercase;
			}
		
			#portfolio h4 a {
				text-decoration:none;
				color:#5e9efe;
				font-weight:bold;
				border-bottom:none !important;
				border-bottom:none;
				}
				
				#portfolio h4 a:hover {
					color:#fff;
					}
		
/* --[ bottom link ]------------------------------------------------------------------------------------------------- */

#column #bottom p {
	border-top:10px solid #131818;
	padding-top:20px;
	margin-bottom:50px;
	font-size:1em;
	}
	
	#column #bottom a {
		text-transform:uppercase;
		border-bottom:none !important;
		border-bottom:none;
		font-weight:bold;
		}

/* --[ #contact ]------------------------------------------------------------------------------------------------- */		
#contact {
	padding:18px 18px 0 18px;
	}
	
	#contact p {
		padding:2px 0;
		font-size:1.4em;
		}

	#contact h2.contact {
		display:block;
		text-indent:-5000px;
		height:56px;
		width:411px;
		background:transparent url(../images/interface/hdr-thanks.gif) 0 0 no-repeat;
		margin-bottom:24px;
		}

/* --[ forms ]------------------------------------------------------------------------------------------------- */	

form, fieldset {
	padding:0;
	margin:0;
	}

form p {
	text-transform:uppercase;
	font-weight:bold;
	display:block;
	float:left;
	padding:0;
	margin:16px 0 0 0;
	}

	form p a {
		border-bottom: none !important;
		border-bottom: none;
		font-weight:bold;
		font-size:.7em;
		}
	
		form p a:hover {
			color:#fff;
			border-bottom: none !important;
			border-bottom: none;
			}
		
fieldset {
	clear:both;
	border: 0 solid;
	}
	
	input.required,
	input.subject,
	textarea {
		font-family: verdana, arial, helvetica, sans-serif;
		font-size:100%;
		font-weight:normal;
		color:#94928F;
		background: #000;
		border: 1px solid #1e2628;
		text-decoration: none;
		margin: 0 0 7px 0;
		padding: 7px 0 7px 5px;
		margin-top:5px;
		}
	
	input:focus,
	textarea:active,
	textarea:focus {
		border: 1px solid #666666;
		}
	
	input.required {
		width:340px;
		}
	
	input.subject {
		width:710px;
		}
	
	input.button {
		text-transform: uppercase;
		background: #63a5ff;
		font-weight:bold;
		width:19em;
		color:#fff;
		font-size:1em;
		font-weight:bold;
		padding:6px 0 6px 0;
		margin:12px 24px 16px 0;
		border:none;
		cursor:pointer;
		-moz-border-radius: 6px;
		-webkit-border-radius: 6px;
		float:left;
		}
	
	input.button:hover {
		background: #8dbbfb;
		color:#1e4985;
		}

	textarea {
		width:710px;
		height:135px;
		margin-bottom:10px;
		}
	
	label {
		margin: 0;
		padding: 0 3px 0 0;
		display:inline;
		font-size:1.1em;
		color: #616362;
		font-weight:bold;
		}

	/* error checking */
	input.validation-failed, textarea.validation-failed {
		border: 1px solid #ff9d12;
		color : #ff9d12;
		}
		
	.validation-advice {
		color : #ff9d12;
		}
		
		input,
		textarea {
			display:block;
			clear:left;
			}
			
/* --[ #footer ]------------------------------------------------------------------------------------------------- */	
	
#footer { 
	position: absolute;
	bottom: 0px;
	width:100%;
	background:transparent url(../images/interface/bg-header.png) 0 0 repeat-x;
	border-top:1px solid #353939;
	height:20px;
	padding-top:10px;
	z-index:1;
	}

	#footer div { 
		width:763px;
		margin:0 auto;
		color:#585858;
		}
	
		#footer div p { 
			font-weight:bold;
			font-size:.95em;
			text-transform:uppercase;
			margin:0;
			}
		
		#footer div a { 
			color:#808080;
			font-weight:bold;
			border-bottom: dotted 1px #494c4c !important;
			border-bottom: solid 1px #393d3d;
			}
		
			#footer div a:hover { 
				color:#fff;
				border-bottom: dotted 1px #9fa1a0 !important;
				border-bottom: solid 1px #585d5d;
				}
		
	div > div#footer { 
		position: fixed; 
		}