/* new.sst */
/*
	
	
$Main$ = #ccc
$Line$ = #777
$Back$ = #222
$Accent$ = rgb( 217, 145, 63 )
$LowOpacity$ = 0.1
$IELowOpacity$ = 10
*/

a
{
	color:	rgb( 217, 145, 63 );
	
	text-decoration:	none;
}

body
{
	width:	800px;
	margin:	1em auto;
	
	font-size:		14px;
	font-family:	"Gill Sans", "Gill Sans MT", "Helvetica", "Arial", sans-serif;
	font-weight:	normal !important;
	line-height:	1.4;
	
	color:		#ccc;
	background:	#222;
}



/**** Head ****/



#Head
{
	position:	relative;
	height:		3em;
	margin:		0px 0px 1em;
	
	border-color:	#777;
	border-width:	0px 0px 1px;
	border-style:	solid;
}

#Head h1
{
	float:	left;
	margin:	0em;
	height:	1em;
	
	/*font-family:	"Arial Black", "Helvetica", sans-serif;*/
	font-size:		2em;
	font-weight:	bold;
	letter-spacing:	-0.09em;
	text-transform:	uppercase;
}
	#Head h1 a
	{
		color:	#ccc;
	}
	
	#Head h1 a:hover
	{
		color:	rgb( 217, 145, 63 );
	}

#Head div
{
	position:	absolute;
	bottom:	0em;
	height:	2em;
	
	text-transform:	lowercase;
}
	#Head .email
	{
		left:	400px;
	}
	
	#Head .resume
	{
		left:	600px;
	}
	
	#Head .phone
	{
		right:	0px;
	}
	


/**** Body ****/


	
#Body
{
	margin:	0em 0em 1em;
	padding: 0em 0em 1em;
	
	border-bottom:	1px solid #777;
}

/** Collection **/
	
.Collection
{
	margin:	0em 0em 1em;
	padding:0em;
}
	.Collection li
	{
		position:	relative;
		
		float:	left;
		width:	200px;
		
		opacity:		0.1;
		-moz-opacity:	0.1;
		hktml-opacity:	0.1;
		filter:			alpha(opacity=10);
		
		list-style-type:	none;
	}
	
	.Collection li.Feature
	{
		width:	400px;
	}
	
	.Collection li:hover
	{
		opacity:		1;
		-moz-opacity:	1;
		hktml-opacity:	1;
		filter:			alpha(opacity=100);
	}
	
	.Collection li a
	{
		color:	#ccc;
	}
	
	.Collection li a img
	{
		display:	block;
		
		border:	none;
	}
	
	.Collection li h3
	{
		display:	none;
		position:	absolute;
		left:		0px;
		right:		0px;
		margin:		0em;
		padding:	5px 10px;
		
		letter-spacing:	-0.08em;
		text-transform:	uppercase;
		background:		#222;
	}
		.Collection li:hover h3
		{
			display:	block;
		}
		
	.Collection li p
	{
		display:	none;
		position:	absolute;
		z-index:	1;
		top:		125px;
		left:		0px;
		right:		0px;
		margin:		0em;
		padding:	5px 10px;
		
		background:	#222;
	}
		.Collection li:hover p
		{
			display:	block;
		}

/** Work **/

.Work
{
	text-align:	right;
}

.Work h2, #Work
{
	float:	left;
	width:	525px;
}

.Work h2
{
	margin:	0em 0em 0.5em;
	
	/*font-family:	"Arial Black", "Helvetica", sans-serif;*/
	line-height:	1;
	font-size:		2em;
	font-weight:	normal;
	letter-spacing:	-0.09em;
	text-transform:	uppercase;
}

#Work
{
	margin:	0em;
}
	#Work img
	{
		display:	block;
		
		margin-left:	auto; /* But is this IE compatible? */
	}

.Work #Description
{
	margin:	0em 0em 1em 600px;
	text-align:	left;
}
	.Work #Description p
	{
		margin:	0em 0em 1em;
	}

.Work .Footer
{
	padding:	0em 275px 0em 0em;
}

.Footer
{
	clear:	both;
	
	color:	#888;
}