@charset "utf-8";
/* CSS Document */

div,img {margin:0;padding:0;border:none;}


body
{
background:url(images/greyback.png) center center repeat-y #DDD fixed;
margin:0px;
padding:0px;
color: white;
font-family: helvetica;
color:#333;
height:100%;
}

html {
	height:100%;
}

A{text-decoration: none;} 
A:link{color: #404040;}
A:visited{color: #404040;}
A:hover{text-decoration:underline; text-shadow:none;}
A:active{-moz-outline-style: none;}
A:focus{-moz-outline-style: none;}

.footer A{text-decoration: none;} 
.footer A:link{color: #999;}
.footer A:visited{color: #999;}
.footer A:hover{text-decoration:none; text-shadow:none;}
.footer A:active{-moz-outline-style: none;}
.footer A:focus{-moz-outline-style: none;}


/* ..... NAVIGATION SLIDER ..... */

#overscroll {
	width: 100%; 
	height: 200px; 
	overflow: hidden; 
	border: solid 0px #000; 
	position: absolute;
	margin-top:20px;
}

#overscroll-holder {
	margin-left:30px;
	margin-right:30px;
	width:4320px;
}

/* ..... WORKS PANEL ..... */

.works-image {
	width:250px; 
	height:150px; 
	float:left; 
	background:#CCC; 
	margin-right:20px;
}

.works-text {
	padding:10px 0px 0px 0px;
	width:250px;
	height:40px;
	float:left;
	margin-right:20px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:9px;
	color:#666;
	text-align:left;
	text-shadow:rgba(255, 255, 255, 0.9) 0 1px 0;
}

/* ...... TOP PANEL ...... */

.logo-text {
	font-family:Arial, Helvetica, sans-serif;
	color:#CCC;
	font-size:9px;
	text-align:center;
	letter-spacing:10px;
	text-shadow:rgba(255, 255, 255, 0.9) 0 1px 0;
	margin-left:auto;
	margin-right:auto;
}

.menu-bar {
	margin-top:20px;
	width:1000px;
	padding-top:10px;
	padding-bottom:10px;
	font-family:Arial, Helvetica, sans-serif;
	color:#404040;
	font-size:9px;
	text-align:center;
	letter-spacing:3px;
	text-shadow:rgba(255, 255, 255, 0.9) 0 1px 0;
	margin-left:auto;
	margin-right:auto;
	border-top:#f2f2f2 solid 1px;
	border-bottom:#f2f2f2 solid 1px;
}

.twitter {
	font-family:Arial, Helvetica, sans-serif;
	color:#404040;
	font-size:10px;
	text-align:left;
	letter-spacing:normal;
	text-shadow:rgba(255, 255, 255, 0.9) 0 1px 0;
	margin-left:auto;
	margin-right:auto;
}

.twitter2 {
	font-family:Arial, Helvetica, sans-serif;
	color:#404040;
	font-size:10px;
	text-align:left;
	letter-spacing:normal;
	text-shadow:rgba(255, 255, 255, 0.9) 0 1px 0;
	margin-left:auto;
	margin-right:auto;
}

.twitter3 {
	font-family:Arial, Helvetica, sans-serif;
	color:#404040;
	font-size:10px;
	text-align:left;
	letter-spacing:normal;
	text-shadow:rgba(255, 255, 255, 0.9) 0 1px 0;
	margin-left:auto;
	margin-right:auto;
}

.clear {overflow:auto;}

#vertical {
	margin-left:auto;
	margin-right:auto;
}

#vertical div {
	margin-right:3px;
	float:left;
	width:auto;
	height:32px;
	border:0px solid #999;
	position:relative;
	overflow:hidden;
}
#vertical img {
	position:relative;
}

#vertical2 {
	margin-left:auto;
	margin-right:auto;
}

#vertical2 div {
	margin-right:3px;
	float:left;
	width:auto;
	height:32px;
	border:0px solid #999;
	position:relative;
	overflow:hidden;
}
#vertical2 img {
	position:relative;
}

#vertical3 {
	margin-left:auto;
	margin-right:auto;
}

#vertical3 div {
	margin-right:3px;
	float:left;
	width:auto;
	height:32px;
	border:0px solid #999;
	position:relative;
	overflow:hidden;
}
#vertical3 img {
	position:relative;
}

/* ..... SKILLS BOX ...... */

.skills-container {
	width:1000px;
	min-height:500px;
	margin-left:auto;
	margin-right:auto;
}

.html-skills {
	width:450px;
	height:20px;
	background:#0099FF;
	margin-top:30px;
	float:left;
	margin-right:10px;
}

.html-gweb {
	padding:0px 15px 0px 0px;
	height:20px;
	width:480px;
	background:#0099FF;
	margin-top:5px;
	margin-right:10px;
	float:left;
}

.html-gprint {
	padding:0px 15px 0px 0px;
	height:20px;
	width:480px;
	background:#0099FF;
	margin-top:5px;
	margin-right:10px;
	float:left;
}

.html-php {
	padding:0px 15px 0px 0px;
	height:20px;
	width:200px;
	background:#0099FF;
	margin-top:5px;
	margin-right:10px;
	float:left;
}

.html-js {
	padding:0px 15px 0px 0px;
	height:20px;
	width:350px;
	background:#0099FF;
	margin-top:5px;
	margin-right:10px;
	float:left;
}

.html-cms {
	padding:0px 15px 0px 0px;
	height:20px;
	width:400px;
	background:#0099FF;
	margin-top:5px;
	margin-right:10px;
	float:left;
}

.html-cake {
	padding:0px 15px 0px 0px;
	height:20px;
	width:500px;
	background:#CCC;
	margin-top:5px;
	margin-right:10px;
	float:left;
}

.skills-txt {
	padding-top:4px;
	text-shadow:rgba(255, 255, 255, 0.9) 0 1px 0;
	color:#666;
	font-family:Arial, Helvetica, sans-serif;
	font-size:9px;
	float:left;
	margin-top:5px;
	border:0px #000 solid;
}

.skills-box {
	margin-top:40px;
	float:left;
	width:680px;
	min-height:200px;
	border:0px solid #000;
	margin-left:70px;
}

.skills-box-right {
	margin-top:40px;
	float:left;
	min-width:200px;
	min-height:200px;
	border:0px solid #000;
}

.ball {
	background:url(images/ball.png) no-repeat;
	width:200px;
	height:103px;
	text-shadow:rgba(255, 255, 255, 0.5) 0 1px 0;
	color:#202020;
	font-family:Arial, Helvetica, sans-serif;
	font-size:9px;
	text-align:center;
	padding-top:97px;
	cursor:pointer;
	position:relative;
}

/* ...... CONTACT BOX ...... */

.contact-container {
	width:470px;
	min-height:200px;
	margin-left:auto;
	margin-right:auto;
	margin-top:50px;
	text-shadow:rgba(255, 255, 255, 0.5) 0 1px 0;
	color:#202020;
	font-family:Arial, Helvetica, sans-serif;
	font-size:9px;
	line-height:20px;
	letter-spacing:2px;
}

.comment-bubble {
	margin-top:20px;
	margin-left:85px;
	width:280px;
	color:#999;
	text-shadow:none;
	padding:10px 0px 10px 0px;
	letter-spacing:normal;
	line-height:15px;
	text-align:left;

}

/* ...... OTHER STUFF ...... */

.drag-hint {
	background:url(images/crap.png) no-repeat;
	width:136px;
	height:32px;
	position:fixed;
	bottom:15px;
	right:15px;
}

.footer {
	width:1000px;
	margin-left:auto;
	margin-right:auto;
	height:30px;
	text-shadow:rgba(255, 255, 255, 0.5) 0 1px 0;
	color:#999;
	font-family:Arial, Helvetica, sans-serif;
	font-size:8px;
	line-height:20px;
	letter-spacing:2px;
	position:relative;
	bottom:0px;
	margin-top:100px;
}
	

/* ..... TWEETS ..... */

small {
	color:#CCC;
	margin-left:20px;
}

#tweets li {
	font-size:10px;
	list-style-type:none;
	font-family:Arial, Helvetica, sans-serif;
	margin:0px;
	padding:0px;
	color:#666;
}

#tweets ul {
	padding-left:10px;
}

#tweets .hash { color:#0066CC; } 

#tweets .reply { color:#0066CC; } 

/* ..... THE CSS AWARDS ..... */


#thecssawards{
position:absolute;
top:20px;
right:0px;
z-index:555;
}
#thecssawards a{
width:69px;
height:105px;
text-indent:-8000px;
display:block;
background:url(images/award_day_black.png) no-repeat;
}