/* =========================================
	first i herp, but then i derp
==========================================*/

/***********************************************************
 Global Reset
************************************************************/
*, html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, label, fieldset, input, p, blockquote, th, td { margin: 0; padding: 0; }
table { border-collapse: collapse; border-spacing: 0; }
fieldset, img { border: 0; }
legend { display: none;; }
address, caption, cite, code, dfn, em, strong, th, var { font-style: normal; font-weight: normal; }
ul { 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: ''; }
a { text-decoration: none; }
strong { font-weight: bold; }
em { font-style: italic; }
* a { position: relative; }
a img { border: none; }
* { outline: none; }
form { display: inline; }

/***********************************************************
 Defaults
************************************************************/
@font-face {
    font-family: 'light';
    src: url('../src/light_con-webfont.eot');
    src: url('../src/light_con-webfont.eot?iefix') format('eot'),
         url('../src/light_con-webfont.woff') format('woff'),
         url('../src/light_con-webfont.ttf') format('truetype'),
         url('../src/light_con-webfont.svg#webfontiZhjh9aQ') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'medium';
    src: url('../src/med_con-webfont.eot');
    src: url('../src/med_con-webfont.eot?iefix') format('eot'),
         url('../src/med_con-webfont.woff') format('woff'),
         url('../src/med_con-webfont.ttf') format('truetype'),
         url('../src/med_con-webfont.svg#webfontMOgH5OcV') format('svg');
    font-weight: normal;
    font-style: normal;

}

html, body { height: 100%; }

body {
	background: #fff;
	color: #fff;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 75%;
	line-height: 1.8em;
	
}

a			{ color: #ef054c; }
a:active	{ color: #fdff66; }			
a:link		{ color: #ef054c; }
a:visited	{ color: #a15e77; }
a:hover 	{ color: #fff; }

h1 {
	display: none;
	float: right;	
}

	h1 a {
		background: url('../images/sprite.png') -438px 0;
		display: block;
		height: 58px;
		margin: 18px 0 0;
		text-indent: -10000em;
		width: 62px;
	}

h2.headline,
h3.quote {
	font: 200 normal 1.8em/50px "light";
	height: 46px;
	margin: 0 0 2px 0;
	padding: 0 20px;
	text-transform: lowercase;
}

h2.headline { 
	background: rgba(0,0,0,.6); 
	display: inline-block;
}	

h3.quote { 
	background: rgba(0,0,0,.4); 
	display: block;
}

	h2.headline span,
	h3.quote span { font-family: "medium"; }
	
h3.contact {
	background: url('../images/sprite.png') -250px 0;
	height: 175px;
	margin: 0 auto;
	text-indent: -10000em;
	width: 188px;
}

h4.contact {
	background: url('../images/sprite.png') 0 -249px;
	height: 16px;
	margin: 20px auto 0 auto;
	text-indent: -10000em;
	width: 320px;
}

input[type=text], textarea {
	border: none;
	width: 420px;
}

input[type=text] {
	height: 32px;
	line-height: 32px;	
	padding: 0 10px;
}

textarea { 
	font-family: Helvetica, Arial, sans-serif;
	font-size: 1em;
	height: 12px; 
	padding: 10px;	
}

input[type=submit] {
	background: #ef054c;
	border: none;
	color: #fff;
	cursor: pointer;
	height: 32px;
	line-height: 32px;
	padding: 0 10px;
}

/***********************************************************
 Site
************************************************************/
#content {
	margin: 0 auto;
	padding: 40px 0 100px 0;
	width: 960px;
}

#home_content {
	padding: 50px 0;
	text-indent: -10000em;
}

	#home_content .logo {
		background: url('../images/sprite.png') 0 0;
		height: 229px;
		margin: 0 auto;
		width: 250px;
	}

	#home_content .sub {
		background: url('../images/sprite.png') 0 -229px;
		height: 20px;
		margin: 35px auto 0 auto;
		width: 420px;
	}

#navigation {
	bottom: 0;
	left: 0;
	position: fixed;
	width: 100%;
}

	#navigation .top {
		font-size: 1em;
		height: 90px;
		line-height: 90px;
		position: relative;
		width: 100%;
		z-index: 10;
	}
	
		#navigation .top .wrapper {
			margin: 0 auto;
			width: 960px;
		}
	
			#nav {
				display: none;
				float: left;
			}
			
				#nav li {
					cursor: pointer;
					float: left;
					margin: 0 1.8em 0 0;
				}	
				
				#nav li:hover { color: #00c1f3; }
				
					#nav li.meta,
					#nav li.meta a 		{ color: #909090; }
					#nav li.meta:hover,
					#nav li.meta a:hover 	{ color: #eee; }
					
		#nav .img {
			margin: 0 10px;
			vertical-align: middle;
		}
		
	#navigation .bottom {
		color: #ddd;
		display: none;
		font-size: .9em;
		height: 40px;
		line-height: 40px;
		text-align: center;
		width: 100%;
	}

.content { padding: 20px 20px 5px 20px; }

	.content p { margin: 0 0 1.4em 0; }
	
	ul.list { padding: 0 0 10px 0; }
	
		ul.list li {
			background: url('../images/li.gif') no-repeat;
			margin: 0 0 1em;
			padding: 0 0 0 1.4em;
		}
		
	ul.service { padding: 20px 0 0; }

#profile_pic {
	background: url('../images/sprite.png') 0 -277px;
	height: 214px;
	text-indent: -10000em;
	width: 299px;
}

ul#skills {
	height: 285px;
	position: relative;
	text-indent: -10000em;
}

	ul#skills li {
		bottom: 0;
		position: absolute;
		width: 68px;
	}
	
		ul#skills li span {
			background-image: url('../images/sprite.png');
			bottom: 15px;
			display: block;
			left: 28px;
			position: absolute;
			width: 12px;
		}

		ul#skills .s100 {
			background: rgba(0,192,243,1.0);
			height: 285px;
		}
		
		ul#skills .s80 {
			background: rgba(0,192,243,.8);
			height: 245px;
		}
		
		ul#skills .s60 {
			background: rgba(0,192,243,.6);
			height: 210px;
		}
		
		ul#skills .s40 {
			background: rgba(0,192,243,.4);
			height: 145px;
		}
		
			#skill_1 { left: 0; }
			#skill_2 { left: 70px; }
			#skill_3 { left: 140px; }
			#skill_4 { left: 210px; }
			#skill_5 { left: 280px; }
			#skill_6 { left: 350px; }
			#skill_7 { left: 420px; }
			#skill_8 { left: 490px; }
		
				#skill_1 span {
					background-position: -438px -106px;
					height: 88px;
				}
				
				#skill_2 span {
					background-position: -450px -106px;
					height: 83px;
				}
				
				#skill_3 span {
					background-position: -462px -106px;
					height: 89px;
				}
				
				#skill_4 span {
					background-position: -475px -106px;
					height: 56px;
				}
				
				#skill_5 span {
					background-position: -487px -106px;
					height: 85px;
				}
				
				#skill_6 span {
					background-position: -475px -162px;
					height: 50px;
				}
				
				#skill_7 span {
					background-position: -438px -194px;
					height: 83px;
				}
				
				#skill_8 span {
					background-position: -450px -189px;
					height: 26px;
				}
		
.slider-left,
.slider-right {
	float: left;
	height: 295px;
	padding: 20px;
	position: relative;
}

.slider-left {
	margin: 0 2px 0 0;
	width: 450px;
}

	.slider-left img { border-bottom: 4px solid #fff; }
	
	.slider-left .uri {
		bottom: 20px;
		position: absolute;
		right: 20px;
	}
	
	.slider-left .lightbox {
		bottom: 20px;
		left: 20px;
		position: absolute;
		word-spacing: 0.6em;
	}

.slider-right { position: relative; width: 428px; }

	.slider-right p { margin: 1.4em 0; }
	
	.slider-right h2 { 
		left: 0;
		position: absolute;
		top: -48px;
	}
	
	p.description { color: #888; }
	
	#port_list li {
		display: inline-block;
		float: left;
		margin: 0 2px 2px 0;
		white-space: nowrap;
	}

	#item_content li { display: none; }

form#contact .slider { 
	margin: 0 0 20px 0;
	position: relative; 
}

#node { display: none; }

#social {
	margin: 0 auto;
	padding: 10px 0 20px 0;
	width: 128px;
}

	#social li {
		float: left;
		text-indent: -10000em;
	}

	#social li a {
		background-image: url('../images/sprite.png');
		display: block;
		height: 24px;
		margin: 0 0 0 8px;
		width: 24px;
	}
	
	#bt_xing a 		{ background-position: -462px -82px; }
	#bt_delicious a { background-position: -438px -58px; }
	#bt_flickr a 	{ background-position: -462px -58px; }
	#bt_lastfm a 	{ background-position: -141px 0; }
	#bt_facebook a 	{ background-position: -301px -276px; }
	
	
.twitter-date {
	color: #ddd !important;
	font: 200 italic 1em/1.8em "Helvetica";
}

.twitter-date:hover { color: #99ffff !important; }

/***********************************************************
 Grid & Classes
************************************************************/

.left 	{ float: left; }
.right	{ float: right; }

.list { margin-bottom: 2px; }

.column-140 { width: 140px; }
.column-340 { width: 340px; }
.column-360 { width: 360px; }
.column-440 { width: 440px; }
.column-460 { width: 460px; }
.column-470 { width: 470px; }
.column-480 { width: 480px; }
.column-600 { width: 600px; }

.bg-9 { background: rgba(0,0,0,.9); }
.bg-6 { background: rgba(0,0,0,.6); }
.bg-4 { background: rgba(0,0,0,.4); }

.append-20 { margin-right: 20px; }
.append-40 { margin-right: 40px; }

.append-b-2		{ margin-bottom: 2px; }
.append-b-20 	{ margin-bottom: 20px; }
.append-b-40 	{ margin-bottom: 40px; }

.prepend-100	{ margin-left: 100px; }

.prepend-t-20	{ margin-top: 20px; }
.prepend-t-40	{ margin-top: 40px; }
.prepend-t-48	{ margin-top: 48px; }
.prepend-t-54	{ margin-top: 54px; }

.blue {
	color: #00c0f3;
	font: 200 normal 1.4em/1.4em "light";
}

.single	{ 
	display: inline-block;
	padding: 12px 20px; 
}

.image { padding: 20px; }

.opacity 		{ opacity: 0.7; }	
.opacity:hover 	{ opacity: 1; }

.nobr { white-space: nowrap; }

.hide {
	height:1px; 
	left:-10000em; 
	overflow:hidden;
	position:absolute; 
	top:-10000em; 
	width:1px; 
}

.clearfix:after {
	clear: both;
	content: " ";
	display: block;
	font-size: 0;
	height: 0;
	visibility: hidden;
}

* html .clearfix             { zoom: 1; } 
*:first-child+html .clearfix { zoom: 1; } 

.clear { clear: both; }