body 
{
	background-color:#333;
}

*
{
	padding:0;
	margin:0;
	font-size:14px;
	color:#333;
	font-family:Geneva, Arial, Helvetica, sans-serif;
}

a
{
	text-decoration:none;
	font-size:13px;
	color:#999;
	font-weight:bold;	
}

a:hover
{
	color:#c33;
}

a.tt span 
{
	display:none; 
	margin-left:3px;
	width:290px;
	height:30px;	
}

a.tt:hover span
{
	display:inline; 
	position:absolute; 
	background:url(img/tt.png) no-repeat;
}

ul
{
	list-style:none; 
}

ul li 
{
	float:left;
}

ol
{
	margin-left:25px;
	margin-top:5px;
	margin-bottom:10px;
}

ol  li
{
	list-style:outside;
}

h1 { font-size:20px } 
h2 { font-size:17px } 
h4 { font-size:10px } 

.tier
{
	width:100%;
	position:relative;
	overflow:hidden;
}

#page 
{	
	height:645px;
	position:relative;
	background:url(img/drop.png) #fff no-repeat center bottom;
}

#overlay
{
	height:inherit;
	position:relative;
}

#footer
{
	color:#fff;	
	text-align:center;
	padding-top:5px;
	min-height:80px;
	background:#333;
}

#footer #preload *
{
	display:none;
}

#footer a
{
	color:#c33;
}

.tier > div
{
	width:800px;
	margin:auto;
	position:relative;
}

#loading2
{
	position:absolute;
	left:16px;
	top:268px;	
	z-index:1000000;
	display:none;
}

#menu
{
	height:35px;
	z-index:1000;	
	position:absolute;
	top:15px;
	left:30px;	
}

#page #main
{
	background:url(img/bkg.png) no-repeat center bottom;
	height:610px;
	position:relative;
	width:800px;
	z-index:100;	
	position:absolute;
	top:25px;
	left:0;	
}

#showcase
{
	width:720px;
	height:405px;
	position:absolute;
	top:60px;
	left:40px;
}

#image_content *
{
	float:left;
}

#showcase #content
{
	width:700px;
	height:385px;
	margin:10px 10px 10px 10px;
	position:relative;
	overflow:hidden;
}

#showcase #content  > div > span 
{
	display:block;
	float:left;
	width:205px;
	height:385px;
	border-right:1px solid #aaa;
	padding-right:4px;
	text-align:right;
	line-height:20px;
}

#showcase #content   > div  > span:last-child
{
	width:275px;	
	border:0;
}

#showcase #content .skill
{
	margin:2px auto 0 auto;
	width:200px;
	height:12px;
	font-size:11px;
	line-height:12px;
	text-align:left;
}

#showcase #content .skill  span
{
	font-size:11px;
	float:left;
}

#showcase #content .meter
{
	float:right;
	height:inherit;
	width:110px;
	background:#aaa;
}

#showcase #content .level
{
	height:inherit;
	width:10px;
	background:#c33;
}

#showcase #content .value
{
	float:right;	
}

#content div.large
{
	width:250px;
	height:136px;
	border:0;
	margin:20px auto 0 auto;
	text-align:right;
	font-size:20px;
	color:#555;
}

#content div.large img
{
	width:128px;
	height:128px;
	border:0;
	float:left;
}

#content span > h3
{
	font-color:#333;
	width:inherit;
	border-bottom:1px solid #333;
	text-align:left;
	margin:8px 3px 4px 3px;
}

#content span > h2
{
	font-color:#fc3;
	text-align:left;
	font-size:22px;
	font-family:Arial;
}

#content p
{
	margin-bottom:8px;
}

#content a.icon
{
	
	height:64px;
	width:192px;
	display:block;
	margin:0 auto 2px auto;
	padding:4px;
}

#content a.icon  > div
{
	height:64px;
	width:64px;	
	float:left;
}

.zip { background:url(img/icons.png) no-repeat 0 0; }
.blend { background:url(img/icons.png) no-repeat -64px 0; }
.tiff { background:url(img/icons.png) no-repeat -128px 0; }
.php { background:url(img/icons.png) no-repeat -192px 0; }
.htm { background:url(img/icons.png) no-repeat -256px 0; }

.pdf { background:url(img/icons.png) no-repeat 0 -64px; }
.py { background:url(img/icons.png) no-repeat -64px -64px; }
.mel { background:url(img/icons.png) no-repeat -128px -64px; }
.c { background:url(img/icons.png) no-repeat -192px -64px; }
.swf { background:url(img/icons.png) no-repeat -256px -64px; }

.bmp { background:url(img/icons.png) no-repeat 0 -128px; }
.png { background:url(img/icons.png) no-repeat -64px -128px; }
.jar { background:url(img/icons.png) no-repeat -128px -128px; }
.js { background:url(img/icons.png) no-repeat -192px -128px; }
.exe { background:url(img/icons.png) no-repeat -256px -128px; }

.txt { background:url(img/icons.png) no-repeat 0 -192px; }
.unkn { background:url(img/icons.png) no-repeat -64px -192px; }
.java { background:url(img/icons.png) no-repeat -128px -192px; }
.ppt { background:url(img/icons.png) no-repeat -192px -192px; }
.doc { background:url(img/icons.png) no-repeat -256px -192px; }

#main #panel .index_buttons
{
	background:url(img/index_btn.png) no-repeat center;
	height:60px;
	width:160px;
	display:block;
	float:left;
	padding-left:10px;
	padding-top:40px;
	font-size:14px;
	margin-right:25px;
	margin-left:20px;
	opacity:1.0;
	filter: alpha(opacity=100); 
	-moz-opacity: 1.0;	
}

#content li
{
	text-align:left;
	margin-left:10px;
}

#content_menu
{
	position:absolute;
	top:115px;
	left:760px;
	width:130px;
	height:335px;
	z-index:1000000;
	background:url(img/ctrls.png) top center no-repeat;
}

#content_menu a
{
	display:block;
	background:url(img/ctrls-btn.png) no-repeat center;
}

#main #panel
{
	width:680px;
	height:110px;
	z-index:10000;	
	overflow:hidden;
	position:absolute;
	left:60px;
	bottom:25px;	
}

#panel a
{
	border:0;
	width:50px;
	height:50px;
	margin:2px;
	float:left;
	background:url(img/menu_brick.png);
	opacity:.5;
	filter: alpha(opacity=50); 
	-moz-opacity: .5;
}

#panel a span
{
	display:none;
	color:#c33;
}

#panel a:hover
{
	opacity:1.0;
	filter: alpha(opacity=100); 
	-moz-opacity: 1.0;
}

#menu ul
{
	width:800px;
	margin:auto;
	height:35px;
}

#menu ul li a
{
	display:block;
	width:92px;
	height:35px;
	text-align:center;
	line-height:35px;
	background:url(img/mi.png) no-repeat center top;
}

#menu ul li a:hover
{
	background-position:0px -35px;	
}

.media
{
	/*margin:0 auto 0 auto;*/
}

#social
{
	width:320px;
	margin:auto;
}

#social a
{
	background:url(img/social.png) no-repeat;
	height:80px;
	width:64px;
	float:left;
	display:block;
	border-top:3px #333 solid;
}

#social a:hover
{
	border-top:3px #c33 solid;
}

#social a.deviant { background-position:0px 0px }
#social a.flickr { background-position:-64px 0px }
#social a.youtube { background-position:-192px 0px }
#social a.linkedin{ background-position:-128px 0px }
#social a.wordpress{ background-position:-256px 0px }