body, html
{
	margin: 0;
	padding: 0;
	font-family: Myriad Pro, Myriad, Helvetica Neue, Helvetica, Arial, sans-serif;
	line-height: 20px;
	height: 100%;
	-khtml-user-select: none;
	-moz-user-select: none;
	background: #707070 url(assets/bg-tile.png) repeat-x;
}

h1, h2
{
	position: relative;
	font-weight: normal;
	font-size: 1.2em;
	margin: 0 auto 10px auto;
	top: 50px;
	display: block;
	text-align: center;
	color: #383737;
	text-shadow: #fff 0px 0px 10px;
}

h2 { margin: 0; color: #a3a3a3; font-size: 1em; }

a { outline: none; color: inherit; }


#thumbs
{
	display: block;
	height: 50px;
	margin: 0 auto;
	text-align: center;
	margin-top: 90px;
}

#project_view #thumbs { margin: 300px auto 200px; }

#thumbs img { vertical-align: middle; }

.thumbnail
{
	border: #aaaaaa 1px solid;
	margin-left: 10px;
	padding: 5px;
	background: #fff;
}

.first-thumb { margin-left: 0; padding: 0px; }

#project_view .thumbnail { padding: 10px; border: #000 1px solid; background-color: #333; }

/* 	project view // scroll bar hack */
/* 	The purpose of this method is to maintain the 
	users normal functionality, such as the horizontal
	scrolling on a Macbook using a two finger swipes
	on the track pad 
	
	What happens is: The viewport holds a wide icon view.
	The viewport has normal scroll bars. The scroll bars are hidden 
	by the mask. Javascirpt scroll bars are added to the 
	screen so the users retains all native functionality. 
	
	Yes. I am a genius.
	
	*/
	
#projects
{
	width: 9000px; /* just something very wide, we'll shorten it with JS later */
	height: 300px;
	display: block;
}

.project
{
	margin: 0 60px;
	text-align: center;
	line-height: 10px;
	float: left;
	overflow: visible;
} 

.project img { vertical-align: middle; clear: both; margin: 29px auto 9px auto; border: none; }

.project .iphone-img { margin-top: 0 }

.project .iphone-img-landscape { margin-top: 70px; margin-bottom: 39px; }

.project-title
{
	color: #fff;
	font-weight: normal;
}

.project p { clear: both; }

.project-type
{
	font-size: 0.9em;
	color: #AAA;
}

#viewport
{
	width: 100%;
	height: 380px;
	display: block;
	overflow: auto;
	background: none;
}

#mask 
{
	margin-top: 50px;
	width: 100%;
	height: 300px;
	overflow: hidden;
	background: none;
}

/* The Scrollbar */
#scrollbar
{
	position: relative;
	width: 70%;
	display: block;
	margin: 0px auto;
	border: #444444 1px solid;
	border-width: 0 0 1px 0;
	overflow: visible;
}

#grabber
{
	position: relative;
	top: 8px;
	left: 0px;
	height: 20px;
	display: block;
	background: url(assets/grabber-left.png) no-repeat;
}

#grabber-end
{
	height: inherit;
	width: 50%;
	background: url(assets/grabber-right.png) no-repeat;
	background-position: 100% 0;
	float: right;
}


/* Bottom */
#bottom
{
	width: 100%;
	display: block;
}

/* links */
#links
{
	margin: 0 auto;
	padding:0;
	width: 410px;
	margin-top: 70px;
	display: block;
}

#links li
{
	display: inline;
	list-style: none;
}

#links span { display: none; }

#links li a 
{ 
	background-image: url(assets/links.png);
	background-repeat: no-repeat;
	position: relative;
	height: 30px; 
	display: block;
	float: left;
	margin-left: 20px;
}

#links li a:hover
{ 
	background-position-x: -81px;
}

#cv-link 
{ 
	background-position: left 0px; 
	width: 50px; 
}


#linkedin-link 
{ 
	background-position: left -30px; 
	width: 70px; 
}


#tumblr-link 
{ 
	background-position: left -60px; 
	width: 65px; 
}

#twitter-link 
{ 
	background-position: left -90px; 
	width: 63px; 
}

#krop-link 
{ 
	background-position: left -120px; 
	width: 42px; 
}