/****		Structure			****/
body{background: #fafafa;}
body>*{ width: 90%; min-width: 750px; max-width: 1200px; margin: 0 auto;}
body>section{display:block;}
body#home{width: 100%; min-width: auto; max-width: auto; background: #fafafa;}
body#home>*{max-width:none;}
#home #intro{position:absolute; margin-top: 400px; width: 96%; padding: 0 2%;}
#intro>header{
	display:block; height: 30px; padding: 15px 0;  
	border-bottom: 1px solid #666;
	}
body>header{
	display:block; height: 30px; padding: 120px 0 40px 0;  
	border-bottom: 2px solid #666;
	}
header h1{float:left;}
header ul{float:right;}
header ul li{ list-style-type:none; float:left;margin: 0 5px;}
header ul li a{display:block; width: 45px; height: 30px;}
header ul li a:hover{height: 40px;}
header a#home{background: url('navbuttons.png') 0 0;}
header a#skills{background: url('navbuttons.png') -50px 0;}
header a#portfolio{background: url('navbuttons.png') -100px 0;}
header a#contact{background: url('navbuttons.png') -150px 0;}
header a#home:hover,header a#home.active{background: url('navbuttons.png') 0 40px;}
header a#skills:hover,header a#skills.active{background: url('navbuttons.png') -50px 40px;}
header a#portfolio:hover,header a#portfolio.active{background: url('navbuttons.png') -100px 40px;}
header a#contact:hover,header a#contact.active{background: url('navbuttons.png') -150px 40px;}
#intro .thirds{
	display:block; width: 27%; padding: .5em 3%; float:left; margin: .5em 0; height: 12em;
	position:relative;
	}
#intro .thirds .link{
	position:absolute; bottom: 0; right: 3%; padding-right: 24px; 
	background: url('arrows.png') right top no-repeat;
	}
#intro .thirds:hover .link{background: url('arrows.png') right -20px no-repeat;}
#intro .middle{border-left: 1px dotted #666; border-right: 1px dotted #666;}
#home #showcase{
	position:relative; height: 400px; width: 100%; overflow:hidden;
	}
#showcase a.anchor{visibility:hidden;}
#showcase #wrapper{padding: 0 180px;}
#showcase article{display:block; position:relative; height: 400px; width: 430px;margin: 0 auto;}
#showcase article>img{display:block; position:absolute;top: 50px; padding: 0 15px; background: url('profileback.png')}
#showcase .note{
	position:absolute; width: 138px; height: 135px; right: -90px; bottom: 65px;
	background: url('sticky.png'); padding: 9px 6px 13px 6px;
	}
#showcase .note .links{position:absolute; bottom: 12px; right: 6px;}
#showcase .note .links a{display:block; padding-right: 30px;}
#showcase .proj_page{background: url('arrows.png') right -5px no-repeat;}
#showcase .proj_page:hover{background: url('arrows.png') right -25px no-repeat;}
#showcase .visit{background: url('arrows.png') right -60px no-repeat;}
#showcase .visit:hover{background: url('arrows.png') right -80px no-repeat;}
#show_nav{position:absolute; top:0; left: 0; padding-top: 50px; width:167px; min-width: 167px;}
#show_nav li{list-style:none; margin:0; padding: 0;}
#show_nav li a{
	display:block; height: 27px; width: 137px; padding: 5px 20px 5px 10px; margin: 5px 0;
	background:url('showcase-button.png') top left;}
#show_nav li a:hover, #show_nav li.active a{background-position: bottom left;}
#show_nav li a.portfolio{
	background:url('bookmark.png') top left; width: 97px; height: 17px; padding: 8px 20px 12px 10px;
	color: #fff3d5;
	}
#show_nav li a.portfolio:hover{background:url('bookmark.png') bottom left; color: #fff;}
.skills>article{display:block; margin: 1em 0; float:left; width: 20%; margin: 2em 2.5%; height: 10em;}
.skills>article>h1{clear:both; font-size: 2em; height: 3em;}
.skills>article>ul li{float:left;}
.skills>article ul.text li{float:none;}
.skills>article>ul a{
	display:block; padding: 3px 0.5em; margin: 3px 10px 3px 0; 
	border: 1px solid #ddd; -moz-border-radius: 5px; -webkit-border-radius: 5px;
	background-color: #eee; 
	background-image: -moz-linear-gradient(100% 100% 90deg, #eee, #fafafa); 
	background-image: -webkit-gradient(100% 100% 90deg, #eee, #fafafa); 
	}
.skills>article>ul a:hover{
	background: #086dca; border: 1px solid #84c2fa;
	background-image: -moz-linear-gradient(100% 100% 90deg, #086dca, #0981ef); 
	background-image: -webkit-gradient(ta100% 100% 90deg, #086dca, #0981ef); 
	}
section.portfolio article{
	display:block;padding: 1.5em 0 1em 450px; 
	min-width: 330px; max-width: 750px; margin: 3em auto; 
	background: #f0f0f0; border-right: 3px solid #ccc; border-bottom: 3px solid #ccc;
	}
.portfolio article img{float:left; height: 120px; width: 160px; margin-left: -440px;}
.portfolio article .meta{
	float:left; display:block; position:relative; min-height:120px; width: 250px; 
	margin-left: -280px; padding: 0 15px;
	}
.portfolio article .meta .client{margin-bottom:0;}
.portfolio article .meta a{}
.portfolio article .description{
	display:block; min-height: 102px; margin: 18pt 0 -18pt 0; padding: 0 1em;
	border-left: 1px dotted #940601;
	}
.portfolio article:hover, .portfolio article.hover{
	background: #f9f9f9;
	}
.portoflio article:hover, .portfolio article.hover{border-left: 1px dotted #9c0601;}
#contact form{width: 600px; margin: 1em auto;}
#contact textarea, #contact input{border: none; border-bottom: 1px dotted #999;}
#contact textarea{margin-bottom: 1em;width:100%;}
#contact input[type=submit]{background: #0169c9; color: #fff; margin: 1em 0;}
#contact input[type=checkbox]{border:none;}
#contact input.selectbox{
	color: #000; overflow:hidden;
	background: url('downbutton.png') no-repeat right;}
div.selectbox-wrapper {
    position:absolute; width:400px;
    background-color:white;
    border:1px solid #eee; border-top: none;
    margin:0px; padding:0px; 
    font-size:0.8em; text-align:left;
    height:200px; *height:200px; /*IE6 fix */
   overflow: auto;
}
div.selectbox-wrapper .selected{font-weight: bold;}
div.selectbox-wrapper .current{background: #def}
hr.clear{clear:both; visibility:hidden;}
#sent .contact blockquote{color: #666;}
#sent section.contact>*{width: 600px; margin: 1em auto;}
footer{clear:both; margin-top: 2em; display:block;}
#home footer{position:relative; top: 15em; width:96%;} 
footer address{width: 25%; border-top: 5px solid #666;}
footer a{font-size: 10px; color: #666;}
footer a:visited{color: #666;}
footer a:hover{color: #333;}
#home footer a:hover{color: #ddd;}

/****	Javascriptious	****/
body.snazzy #showcase article{position:absolute; left:50%; margin-left: -215px;display:none;}

/****		Typography		****/
/**************************************************************************
*	Thanks to the creator of Artbrush, and special thanks to the good folk	*
* at FontSquirrel who make good web	typography possible.									*
**************************************************************************/

@font-face {
	font-family: 'ArtBrushMedium';
	src: url('Artbrush.eot');
	src: local('ArtBrush'), local('ArtBrush'), url('Artbrush.woff') format('woff'), url('Artbrush.ttf') format('truetype'), url('Artbrush.svg#ArtBrush') format('svg');
}
body{font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;}
textarea{font-family:"Helvetica Neue",Helvetica, Arial, sans-serif;}
#showcase .note{font-family: "ArtBrushMedium", Helvetica, Arial, sans-serif;}
#showcase h1{color: #122a4c; font-size: 16pt;}
#showcase .note p.client{color: #8a967e; font-size: 8pt;}
#showcase .note p.tags{color: #8a967e; font-size: 8pt;}
#showcase .links a{color: #122a4d; text-align:right;}
#showcase .links a:visited{color: #122a4d;}
#showcase .links a:hover{color: #0169c9;}
#show_nav a{line-height: 1em; font-size: 10pt; color: #fff;  font-weight: 300;}
#show_nav a:hover, #show_nav li.active a{color:#013397;}
#intro .thirds{color: #333; line-height: 1.5; font-size: 10pt;}
#intro .thirds:visited{ color: #333;}
#intro .thirds p{margin-bottom: 1em;}
#intro .thirds .link{color:#122a4d;}
#intro .thirds:hover .link{color:#0169c9;}
#portfolio .meta{font-size: 10pt; line-height: 18pt;}
#portfolio .meta h1{line-height: 18pt;}
#portfolio a, #sent a{color:#0169c9;}
#portfolio a:visited, #sent a:visited{#0169c9;}
.skills>article>ul a{color: #666; text-shadow: 0 -1px 0 #333;}
.skills>article>ul a:hover{color: #fff; text-shadow: 0 -1px 0 #122a4c;}
.portfolio article{font-weight: 300; color: #666; line-height: 18pt;}
.portfolio article h1{
	font-family: "ArtBrushMedium", Helvetica, Arial, sans-serif; font-size: 16pt; color: #c0605d;
	}
.portfolio article:hover, .portfolio article.hover{color: #333;}	
.portfolio article:hover h1, .portfolio article.hover h1{color: #9c0601;}
#contact, #contact input, #contact textarea, #contact select{font-weight: 300; font-size: 12pt;}
#contact input, #contact textarea{color: #999;}
p{margin-bottom: 1em;}