body {
 	background: #000000 url(../images/back_inv.jpg) top left no-repeat;
	height:100%;
	font: normal normal 150% Helvetica, Arial, Geneva, sans-serif;
	font-size: 100%;
	color: #9eabb2;
	margin: 0;
	padding: 0;
	min-width: 950px;
}

a:link {
	color: #FFF;
}
a:visited {
	color: #FFF;
}

.topspace {
	margin-top: 35px;
	padding-left: 15px;
	overflow:auto;
}
.tabbed {
	margin-left:30px;
}

 
/*---------------------------------------------------------------------------------------------*//*Text Styling*/

h1 {
	font: bold 2.2em/150% Helvetica, Arial, Geneva, sans-serif;
	letter-spacing: -1px;
	color: #e5e8ed;
	margin: 0;
	padding: 17px 0 10px 14px;
	text-align: left;
	text-shadow: rgba(0,0,0,0.3) 0 1px 1px;
	-webkit-text-stroke: 1px transparent;
}
 
h2{
	font: 16px Arial, Helvetica, sans-serif;
	font-variant:small-caps;
	color: #B02427;
	padding:0px;
	line-height:20px;
}

h3{
	font: 60% Arial, Helvetica, sans-serif;
	color:#CCC;
	margin-top:-30px;
	margin-left:10px;
}
	
 
h4{
	font: 80% Arial, Helvetica, sans-serif;
	color:#CCC;
	padding:0px;
	line-height:20px;
}

h5{
	font: 20px Arial, Helvetica, sans-serif;  
	font-variant:small-caps;
	color:#B02427;
	padding:0px;
	line-height:20px;
}


h6{
	font: 14px  Arial, Helvetica, sans-serif;
	font-size: 14pt;
	color: #FFF;
	margin-top:-20px;
	margin-bottom:5px;
	padding-top:40px;
	padding-bottom:20px;
	padding-left:10px;
	line-height:8px;
}

h7{
	font: 14 px Arial, Helvetica, sans-serif;
	font-size: 14pt;
	color: #09F;
	padding-top: 10px;
	padding-bottom: 10px;
}

h8{
	font: 80% Arial, Helvetica, sans-serif;
	color:#CCC;
}

h9{
	font: 60% Arial, Helvetica, sans-serif;
	color:#CCC;
}

/*---------------------------------------------------------------------------------------------*//*Wrapper*/
	
#wrapper { 
	width: auto;
	min-height: 100%;
    height: auto;
    height: 100%;
}

/*---------------------------------------------------------------------------------------------*//*Header Area*/
		
#header {
	height: 100px;
	width: auto;
	margin-left:-10px;
	margin-right:0px;
	margin-top:25px;
	background: url(../images/header.png) top left repeat;
	z-index: 3;
}

#logo {
	position:absolute;
	left:0%;
	height: 51px;
	width: 183px;
	margin-top: 25px;
	margin-left: 25px;
	float: left;
	background: url(../images/gsb.png) top left no-repeat;
	z-index: 6;
}

#logo a {
	height: 51px;
	width: 183px;
	display: block;
}

#logo a:hover {
	height: 51px;
	width: 183px;
	display: block;
	background: url(../images/gsb_c.png) top left no-repeat;
}


/*---------------------------------------------------------------------------------------------*//*Menu*/

#menu {
	position:absolute;
	left:0%;
	height:65px;
	width:auto;
	margin-top:50px;
	margin-left:150px;
	float:left;
	text-align:left;
	z-index: 4;
}

#menu ul {
		list-style: none;
}
	
#mainmenu li {
		text-align:center;
		float:left;
		height: 65px;
		margin-left:20px;
		padding-left:10px;
		display: inline;
}
	
#mainmenu li a {
		width: 700px;
		height: 25px;
		font-size:9pt;
		text-decoration:none;
		color:#fff;
		font-family:Arial, Helvetica, sans-serif;
		font-weight:Bold;
		list-style-type: none;
		margin: 0px;
		padding:0px;
		text-transform: uppercase;
}
	
#mainmenu li a:hover {
		width: 700px;
		height: 25px;
		font-size:9pt;
		color:#C1C1C1;
		font-family:Arial, Helvetica, sans-serif;
		font-weight:Bold;
		list-style-type: none;
		margin: 0px;
		padding: 0px;
		text-decoration:none;
		text-transform: uppercase;
}
	
#mainmenu li a:visited {
		font-style: normal;
}
	
#mainmenu li a#links_active, #mainmenu li a#portfolio_active, #mainmenu li a#about_active, #mainmenu li a#resume_active, #mainmenu li a#renderings_active, #mainmenu li a#contact_active {
		height: 25px;
		font-size:9pt;
		color:#C1C1C1;
		font-family:Arial, Helvetica, sans-serif;
		font-weight:Bold;
		list-style-type: none;
		margin: 0;
		padding: 0;
		text-decoration:none;
		text-transform: uppercase;
}
				
			
	
/*---------------------------------------------------------------------------------------------*//* Welcome Page*/

.slideshow { 
	height: auto; 
	width: 700px; 
	margin-left:100px;
}
.slideshow img {  
	background-color: #000; 
}

/*---------------------------------------------------------------------------------------------*//* About Page */
#face {
	margin-top: 70px;
	padding-left: 15px;
	height: 472px;
	width: 524px;
	float: left;
	background: url(../images/GB.JPG) bottom right no-repeat;
}

#introduction{
	position:absolute;
	left:50%;
	width:525px;
	height:365px;
	margin-left:-280px;
	float:left;
	margin-top:25px;
}

#introductionback{
	position:absolute;
	left:50%;
	margin-top:30px;
	margin-left:-325px;
	width:650px;
	height:430px;
	float:none;
	background: url(../images/introdrop.png) no-repeat;
}


/*---------------------------------------------------------------------------------------------*//*Resume Page*/

#resume{
	margin-top:75px;
	width:350px;
	height:456px;
	float:left;
	background: url(../images/resumesmall.jpg) no-repeat;
}

#resumetext{
	position:absolute;
	float:left;
	Margin-left:180px;
	margin-top:50px;
}

#resumeback{
	position:absolute;
	margin-top:35px;
	margin-left:160px;
	width:200px;
	height:136px;
	float:left;
	background: url(../images/resumedrop.png) no-repeat;
}

/*---------------------------------------------------------------------------------------------*//*Rendering Page*/
.section{
	/*border-top: 4px solid #CCC;*/
	/*padding: -1.4em 0 -3.2em 0;*/
	margin-left:-10px;
	overflow: auto;
	width: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	}
.first{ border-top: none; padding-top: 0px; }

 
.thumbnail{
	background-color: #C1C1C1;
	border: 1px solid #2a2a2a;
	float: left;
	margin-right: 3px;
	margin-bottom: 3px;
	}	
	
.thumbnailgroup{
	width:935px;
	height:50px;
}

.caption{ font-size: 0.9em; padding-top: 0.2em ;	}

.list{
	font:100% Arial, Helvetica, sans-serif;
	color:#FFF;
	padding: 3px 3px 15px 3px;
	float: left;
	margin-right: 10px;
	margin-bottom: 5px;
}	

/*---------------------------------------------------------------------------------------------*//*Photography*/
.thumbnail3{
	padding: 3px 3px 8px 3px;
	background-color: #C1C1C1;
	border: 1px solid #2a2a2a;
	float: left;
	text-align: left;
	margin-right: 4px;
	margin-bottom: 4px;
	}	

.thumbnailgroup3{
	background-color: black;
	position:relative;
	padding-left:0px;
	height: auto;
	width:920px;
	overflow:auto;
	border: 0px solid #FFF;
}
 
/*---------------------------------------------------------------------------------------------*//*Links Page*/
.thumbnail2{
	min-width:120px;
	float: left;
	margin: 0px 0 0 60px;
	}	
	
.thumbnail2 div {
	width: 33.3%;
	float: left;
}

.thumbnail2 div img {
	float: right;
}

#nike{
	position:absolute;
	margin-left:20px;
	padding-bottom:20px; 
}

/*------------------------------------------------------------------------------------------------------------Dirmenu-----*/
.dirmenu-base, .dirmenu-base-last {
	margin-top: 11px;
	width: 302px;
	height: 209px;
	float: left;
	position: relative;
	overflow:hidden;
}
 
.dirmenu-base {
	margin-right: 18px;
}
 
.dirmenu-topspace {
	margin-top: 25px !important;
}
 
.dirmenu-base a, .dirmenu-base-last a {
	color: white;
	text-decoration: none;
}
 
.dirmenu-info {
	width: 302px;
	height: 209px;
	position: absolute;
	margin-top: -160px;
}
 
.dirmenu-mask {
	width: 302px;
	height: 209px;
	background: url('../images/dirmenu/mask.png') no-repeat;
	position: absolute;
}
 
.dirmenu-infotext {
	font-size: 1em;
	padding: 8px 12px 0 12px;
	color: white;
}


/*---------------------------------------------------------------------------------------------*//*Architecture Page*/
/* define background image for the expose mask */
#mask {
	background:#123 url(../assets/img/mask_gradient_1800.png) no-repeat;
	background-position:50% -200px;
}

/* general settings for both scrollables */
div.items {
	width:20000em;
	position:absolute;
	clear:both;
	left: 6px;
	top: 6px;
}

/* next/prev buttons */
div.navi {
	background-image:url(../assets/img/hori_large.png);
	position:absolute;
	left:50%;
	width:30px;
	height:30px;
	float:left;
	margin-left:-450px;
	margin-top:290px;
}

div.nextPage {
	background-image:url(../assets/img/hori_large.png);
	position:absolute;
	left:50%;
	width:30px;
	height:30px;
	float:left;
	margin-left:305px;
	margin-top:290px;
}


div.navi:hover  		{ background-position:-30px 0; }
div.navi:active  		{ background-position:-60px 0; }
div.nextPage 			{ background-position: 0 -30px; clear:right; }
div.nextPage:hover 	{ background-position:-30px -30px; }
div.nextPage:active 	{ background-position:-60px -30px; } 


div.navi.disabled {
	visibility:hidden;		
}


/* the thumbnail scrollable */
#thumbnails {
	position:absolute;
	overflow:hidden;
	float:none;
	width: 800px;
	height:300px;
	background: #000 url(img/h150.png) repeat-x;
	border:1px solid  #333;
	-moz-outline-radius:4px;
	background-image: url(../assets/img/h150.png);
}

#thumbnails div.items div {
	padding:5px;
	float:left;		
}


/* box styling */
#box {
	background-image:url(../assets/img/black.png);
	width:550px;
	height:524px;
	position:absolute;
	left:50%;
	display:none;
}

/* transparent closing container*/
#box div.close {
	background:none;
	position:absolute;
	left:8px;
	top:8px;
	cursor:pointer;
	height:35px;
	width:35px;
}

/* overlay scrollable */
#images {	
	position:absolute;
	overflow-x:hidden;
	overflow-y:hidden;
	margin:70px;
	width:458px;
	height:600px;	
}

/* single image */
#images div.items div {
	float:left;
	width:557px;
	height:700px;
	margin-right:30px;
}

/* the tooltip */
#images div.items div.info {
	float:none;
	background:#333;
	color:#fff;
	font-size:13px;
	margin-top:-137px;
	padding:5px 75px;
	height:125px;
	display:none;
	width:350px;
}

#images div.items div.info h3 {
	color:#cde;
	margin-top:10px;
}
	

/* override button style on the overlay */
#box div.navi {
	position:absolute;
	bottom:150px;
	left:480px;
}

#box div.nextPage {
	left:195px;
}


/*---------------------------------------------------------------------------------------------*//*Contact Page*/
 
textarea {
	background: #202020;
	border: none;
	border-bottom: 2px solid #474747;
	box-shadow: 0 0 5px black;
	-webkit-box-shadow: 0 0 5px black;
	margin: 2px 0;
	padding: 5px 3px;
	color: #aaafb7;
	font: normal normal 1.5em/150% Helvetica, Arial, Geneva, sans-serif;
	text-shadow: rgba(0,0,0,0.3) 0 1px 1px;
	width: 309px;
	max-width: 309px;
	outline: none;
	opacity: 0.7;
	-khtml-border-radius: 5px;
	-o-border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}
 
select {
	/*background: #202020;*/
	margin: 9px 0 2px 0;
	/*padding: 5px;*/
	/*color: #aaafb7;*/
	/*color: white;*/
	font: normal normal 1.6em/150% Helvetica, Arial, Geneva, sans-serif;
	/*text-shadow: rgba(0,0,0,0.3) 0 1px 1px;*/
	width: 315px;
}
 
input {
	background: #202020;
	border: none;
	border-bottom: 2px solid #474747;
	box-shadow: 0 0 5px black;
	-webkit-box-shadow: 0 0 5px black;
	margin: 2px 0;
	padding: 5px;
	color: #aaafb7;
	color: white;
	font: normal normal 1.5em/150% Helvetica, Arial, Geneva, sans-serif;
	text-shadow: rgba(0,0,0,0.3) 0 1px 1px;
	width: 305px;
	outline: none;
	opacity: 0.7;
	-khtml-border-radius: 5px;
	-o-border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}
 
input:focus, textarea:focus {
	background: #2c2c2c;
	color: white;
	/*opacity: 1;*/
}    

fieldset {
	padding: 0;
	margin: 25px 0 0 0;
	border: none;
}

label {  
    float: left;
	width: 30%;
	height: 100%;
	margin-right: 0.6em;
	color: #c4cad2;
	text-align: right;
	text-shadow: rgba(0,0,0,0.3) 0 1px 1px;
}  

button{
	background: #3c0963;
	font: bold 100% Helvetica, Arial, Geneva, sans-serif;
	text-shadow: rgba(0,0,0,0.3) 0 1px 1px;
	padding: 2px 15px;
	border: 1px solid #54217b;
	box-shadow: 0 0 5px black;
	-webkit-box-shadow: 0 0 5px black;
	color: white;
	-khtml-border-radius: 12px;
	-o-border-radius: 12px;
	-moz-border-radius: 12px;
	-webkit-border-radius: 12px;
}
button:hover {
	border: 1px solid #7c4aa3;
}
 
button:active {
	background: #30074f;
	color: #cad3d4;
	border: 1px solid #431a62;
}
.form-toppad {
	font: normal normal 100% Helvetica, Arial, Geneva, sans-serif;
	padding-top: 0.55em;
	color: #9eabb2;
}
form#error {
	font-weight: bold;
	color: #C00
}

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

#footwrap{
	width:auto;
	min-height: 5%;
    height: auto !important;
    height: 5%;
}

#footer, .push{
	position:fixed;
	clear: both;
	width: 2000px;
	right:0%;
	margin-right:10px;
	padding-top: 20px;
	bottom:0px;
	height: 5%;
	background: url(../images/header.png) bottom right;
	z-index:5;
}
 
.clear {
	width: 100%;
	clear: both;
}

#footer ui {
	float: left;
	margin: 0 .5em 0 0;
	padding: 0 .5em 0 0;
	border-right: 1px solid #373d4a;
	font-size: 1.1em;
	line-height: 1em;
}
 
#footer ui.last {
	margin: 0;
	padding: 0;
	border: none;
}
 
#footer #linkList {
	float: right;
	margin: 0 .5em 0 0;
	padding: 0 .5em 0 0;
}
 
#footer #copyright {
	float: right;
}
 
#footer a {
	color: #FFF;
}
 
#footer a:hover {
	text-decoration: none;
	color: #ff7800;
}

.error {
	font-weight: bold;
	color: #C00
}




/*---------------------------------------------------------------------------------------------------Columns*/
 
/* A container should group all your columns. */
.container {
  width: 950px;
  margin: 0 auto;
} 
/* Use this class together with the .span-x classes
   to create any composition of columns in a layout. */
   
.column {
  float: left;
  margin-right: 10px;
}
 
 
/* The last column in a row needs this class. */
.last { margin-right: 0; }
 
/* Use these classes to set the width of a column. */
.span-1   { width: 30px; }
.span-2   { width: 70px; }
.span-3   { width: 110px; }
.span-4   { width: 150px; }
.span-5   { width: 190px; }
.span-6   { width: 230px; }
.span-7   { width: 270px; }
.span-8   { width: 310px; }
.span-9   { width: 350px; }
.span-10  { width: 390px; }
.span-11  { width: 430px; }
.span-12  { width: 470px; }
.span-13  { width: 510px; }
.span-14  { width: 550px; }
.span-15  { width: 590px; }
.span-16  { width: 630px; }
.span-17  { width: 670px; }
.span-18  { width: 710px; }
.span-19  { width: 750px; }
.span-20  { width: 790px; }
.span-21  { width: 830px; }
.span-22  { width: 870px; }
.span-23  { width: 910px; }
.span-24  { width: 950px; margin: 0; }
 
/* Add these to a column to append empty cols. */
.append-1   { padding-right: 40px; }  
.append-2   { padding-right: 80px; } 
.append-3   { padding-right: 120px; } 
.append-4   { padding-right: 160px; } 
.append-5   { padding-right: 200px; } 
.append-6   { padding-right: 240px; } 
.append-7   { padding-right: 280px; } 
.append-8   { padding-right: 320px; } 
.append-9   { padding-right: 360px; } 
.append-10  { padding-right: 400px; } 
.append-11  { padding-right: 440px; } 
.append-12  { padding-right: 480px; } 
.append-13  { padding-right: 520px; } 
.append-14  { padding-right: 560px; } 
.append-15  { padding-right: 600px; } 
.append-16  { padding-right: 640px; } 
.append-17  { padding-right: 680px; } 
.append-18  { padding-right: 720px; } 
.append-19  { padding-right: 760px; } 
.append-20  { padding-right: 800px; } 
.append-21  { padding-right: 840px; } 
.append-22  { padding-right: 880px; } 
.append-23  { padding-right: 920px; } 
 
/* Add these to a column to prepend empty cols. */
.prepend-1   { padding-left: 40px; }  
.prepend-2   { padding-left: 80px; } 
.prepend-3   { padding-left: 120px; } 
.prepend-4   { padding-left: 160px; } 
.prepend-5   { padding-left: 200px; } 
.prepend-6   { padding-left: 240px; } 
.prepend-7   { padding-left: 280px; } 
.prepend-8   { padding-left: 320px; } 
.prepend-9   { padding-left: 360px; } 
.prepend-10  { padding-left: 400px; } 
.prepend-11  { padding-left: 440px; } 
.prepend-12  { padding-left: 480px; } 
.prepend-13  { padding-left: 520px; } 
.prepend-14  { padding-left: 560px; } 
.prepend-15  { padding-left: 600px; } 
.prepend-16  { padding-left: 640px; } 
.prepend-17  { padding-left: 680px; } 
.prepend-18  { padding-left: 720px; } 
.prepend-19  { padding-left: 760px; } 
.prepend-20  { padding-left: 800px; } 
.prepend-21  { padding-left: 840px; } 
.prepend-22  { padding-left: 880px; } 
.prepend-23  { padding-left: 920px; } 
 
 
/* Border on right hand side of a column. */
.border {
  padding-right: 4px;
  margin-right: 5px;
  border-right: 1px solid #eee;
}

/* Border on left hand side of a column. */
.borderl {
  padding-left: 4px;
  padding-right: 40px;
  margin-right: 5px;
  margin-left: 5px;
  border-left: 1px solid #eee;
}

 
/* Border with more whitespace, spans one column. */
.colborder {
  padding-right: 24px;
  margin-right: 25px;
  border-right: 1px solid #eee;
}
 
 
/* Use these classes on an element to push it into the 
   next column, or to pull it into the previous column. */
 
.pull-1  { margin-left: -40px; }
.pull-2  { margin-left: -80px; }
.pull-3  { margin-left: -120px; }
.pull-4  { margin-left: -160px; }
 
.push-0  { margin: 0 0 0 18px; }
.push-1  { margin: 0 -40px 0 18px; }
.push-2  { margin: 0 -80px 0 18px; }
.push-3  { margin: 0 -120px 0 18px; }
.push-4  { margin: 0 -160px 0 18px; }
.push-0, .push-1, .push-2, .push-3, .push-4 { float: right; }
 
 
/* Misc classes and elements
-------------------------------------------------------------- */
 
/* Use a .box to create a padded box inside a column.  */ 
.box { 
  padding: 1.5em; 
  margin-bottom: 1.5em; 
  background: #eee; 
}
 
/* Use this to create a horizontal ruler across a column. */
hr {
  background: #3d3f44; 
  color: #3d3f44;
  clear: both; 
  float: none; 
  width: 100%; 
  height: .1em;
  margin: 0 0 1.4em;
  border: none; 
}
hr.space {
  background: #fff;
  color: #fff;
}
 
/* Clearing floats without extra markup
   Based on How To Clear Floats Without Structural Markup by PiE
   [http://www.positioniseverything.net/easyclearing.html] */
 
.clear { display: inline-block; }   
.clear:after, .container:after {
  content: "."; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden;
}
* html .clear { height: 1%; }
.clear { display: block; }
 
/* @end */