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

/* to do
** 1. ajax the content into the work portion of page
2. Make page smart for smaller height viewing
** 3. Build images and categories of info
** 4. write copy for samples
5. marketing and content strategy for site
6. Make it head-hunter savvy 
7. Print resume / password protect
** 8. Links to entrepeneurial sites
9. build out the about page - links, profile, skills, etc..
10. build out the contact page (designed form?)
11. Add ability to shar site
*/

@import url("reset.css");

@font-face {
	font-family: 'GreyscaleBasicRegular';
	src: url('../fontface/Greyscale_Basic_Regular-webfont.eot');
	src: local('☺'), url('../fontface/Greyscale_Basic_Regular-webfont.woff') format('woff'), url('../fontface/Greyscale_Basic_Regular-webfont.ttf') format('truetype'), url('../fontface/Greyscale_Basic_Regular-webfont.svg#webfontPursrqab') format('svg');
	font-weight: normal;
	font-style: normal;
}

body{
	background:#000000;	
	overflow:hidden;
	color:#ffffff;
	font-family:Tahoma, Geneva, Helvetica, sans-serif;
	font-size:10px;
	width:100%;
	height:100%;
}

#bg{
	background:url(../images/bg.jpg) no-repeat left top;
	display:block;
	width:1324px;
	height:1065px;	
	position:absolute;
	top:-130px;
	left:0;
}

#bgFP{
	background:url(../images/bg_hp.jpg) no-repeat left top;
	display:block;
	width:1324px;
	height:1065px;
	position:absolute;
	top:43px;
	left:0;
	z-index:700;	
}

a{
	color:#D163DE;	
	text-decoration:none;
}

#error{
	position:absolute;
	z-index:5000;
	width:400px;
	min-height:40px;
	border:1px solid #F00;
	background:#C00;
	left:50%;
	margin-left:-200px;
	top:200px;
	display:block;	
	padding:20px;
}

#error p{
	float:left;
	text-align:center;
	color:#ffffff;
	font-family:Arial, Helvetica, sans-serif;
	font-size:18px;
	font-weight:bold;	
	padding:0;
	margin:0;
}

#nav{
	position: absolute;
	top:0px;
	right:30px;
	z-index:800;
}

#nav ul{
	padding:0;
	margin:0;	
}

#nav ul li{
	float:left;
	display:block;
	background:url(../images/sprite_nav.png) no-repeat center top;
	width:96px;	
	height:45px;
	padding:0;
	margin:0;
	text-align:center;
	position:relative;
	padding-bottom:30px;
}

#nav ul li a{
	padding:30px 20px 40px 20px;
	text-transform:uppercase;
	font-size:11px;
	display:block;	
	text-align:center;
}

#nav ul li a:hover{
		color:#F0F;

}

#nav ul li.nav#nav1{
	background-position: 10px top;
}

#nav ul li.nav#nav1:hover{
	background-position: 10px 2px;
}

#nav ul li.nav#nav2{
	background-position: -78px top;
}

#nav ul li.nav#nav2:hover{
	background-position: -78px 2px;
}

#nav ul li.nav#nav3{
	background-position: -165px top;
}

#nav ul li.nav#nav3:hover{
	background-position: -78px 2px;
}

#about{
	display:block;
	background:#814BA7;
	position:absolute;
	width:100%;
	height:220px;
	overflow:hidden;
	top:-298px;
	left:0;	
	padding:40px;
}

#content{
	position:absolute;
	display:block;
	z-index:800;
	width:500px;
	top:226px;
	left:154px;
}

#content h2,
#about h2,
#contact h2{
	font: 34px/38px 'GreyscaleBasicRegular', Arial, sans-serif;
	letter-spacing: 0;
	color:#f101a6;	
	font-weight: normal;
	padding:0;
	margin:0;
	margin-left:-30px;
	background:url(../images/h2_bullet.gif) no-repeat left 10px;
	padding-left:30px;
}

#about h2,
#contact h2{
	font: 24px/28px 'GreyscaleBasicRegular', Arial, sans-serif;
	color:#ffffff;
	margin-left:0;
	background:url(../images/h2_bullet.gif) no-repeat left 2px;

}


#content h3{
	font-family:Tahoma, Geneva, sans-serif;
	font-weight:normal;
	font-size:10px;
	color:#d29dfb;	
	padding:0;
	margin:0;
	text-transform:uppercase;
}

#content p{
	font-family:Tahoma, Geneva, sans-serif;
	font-size:9px;
	color:#ffffff;
	width:460px;
	padding:0;
	margin:0;
	line-height:18px;
	margin-top:8px;	
}

/* introButton */
#content h4 a{
	font: 20px/22px 'GreyscaleBasicRegular', Arial, sans-serif;
	color:#b968fb;
	position:relative;
	padding-right:20px;
}

#content h4 a:hover{
	color:#D29DFB;
}

#content h4 a span.raquo{
	position:absolute;
	width:20px;
	height:20px;
	right:0;
	top:2px;	
	font-size:28px;
	color:#72009E;
}

	

#content ul.screenCaps,
#content ul.screenCaps li{
	list-style:none;
	padding:0;
	margin:0;
}

#content ul.screenCaps{
	display:none;
	position:relative;
	z-index:200;
	margin-top:15px;
	height:80px;
}
#content ul.screenCaps li{
	position:absolute;	
}

#content ul.screenCaps li a{
	margin-top:13px;
	display:block;
	float:left;
	margin-right:10px;
	background:#8a57b2;
	overflow:hidden;
	width:53px;
	height:53px;
	font: 30px/58px 'GreyscaleBasicRegular', Arial, sans-serif;
	position:absolute;
}



#content ul.screenCaps li#sc2 a{
	background:#612392;	
}

#content ul.screenCaps li#sc3 a{
	background:#4a1178;	
}

#content ul.screenCaps li#sc4 a{
	background:#3A0D5F;	
}

#content ul.screenCaps li a:hover,
#content ul.screenCaps li#sc2 a:hover,
#content ul.screenCaps li#sc3 a:hover,
#content ul.screenCaps li#sc4 a:hover{
	background:#C76DF0;
}

#content ul.screenCaps li a span{
	display:block;
	position:absolute;
	width:54px;
	text-align:center;
	top:3px;
	color:#000000;
}

#footer{
	width:100%;
	height:60px;
	display:block;
	position:absolute;
	z-index:900;
	background:url(../images/bg_fixed_bottom.png) repeat-x;
	top:100%;
	margin-top:-60px;
}

#work{
	height:80px;
	width:100%;
	display:block;
	position:absolute;
	top:-90px;	
	background:#550E80;
	z-index:1000;
	padding:10px;
}

#work ul{
	display:block;
	width:510px;
	position:absolute;
	left:370px;
	top:10;
}

#work ul li{
	clear:none;
	display:block;
	float:left;
	position:relative;
	width:30px;
	height:30px;
	overflow:hidden;
	margin-right:10px;	
	margin-bottom:10px;
	background:#000000;
}

#work ul li a{
	display:block;
	width:30px;
	height:30px;
	oveflow:hidden;	
}


#work ul li a img{
	border:0px solid #ffffff;	
}

#mainImage{
	display:none;
	position:absolute;
	background:url(../images/mainImage.png) no-repeat left top;
	width:599px;
	height:584px;
	top:400px;
	left:200px;
	z-index:750;	
}

#work p{
	display:block;
	width:300px;
	float:left;
	margin:0;
	padding:0;
	margin-right:20px;
	border-right:1px solid #AA58E0;	
	padding:10px 20px 0px;
	color:#B870EA;
	height:60px;
	overflow:hidden;
}

#work p b{
	font: 24px/28px 'GreyscaleBasicRegular', Arial, sans-serif;
	font-weight:normal;
}

#screenDetail{
	position:absolute;
	width:770px;
	height:508px;
	bottom:-84px;
	left:0;	
	background:url(../images/bg_screenshot.png) no-repeat left top;
	z-index:30;
	display:block;
	margin-left:-1px;
}

#detailImage{
	display:block;
	position:absolute;
	top:30px;
	left:33px;
	display:block;
	overflow:hidden;
	background:#000000 url(../images/ajax-loader.gif) no-repeat center center;	
	width:707px;
	height:315px;
}

#detailInsight{
	position:absolute;
	top:350px;
	left:33px;
	display:block;
}

#detailInsight p{
	width:650px;	
}


#work ul li.active{
	border:3px solid #ffffff;
	width:24px;
	height:24px;
}

/*  about section */

#aboutInner{
	width:1024px;	

}

#about p{
	float:left;
	display:block;
	width:380px;
	color:#d49ffa;	
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	line-height:20px;
	margin-right:40px;
	margin-left:30px;
}

#about ul{
	display:block;
	margin-right:40px;
	padding-right:30px;
	color:#000000;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	line-height:20px;
	list-style:none;	
	width:180px;
	float:left;
	clear:none;

}
#about ul#followme{
	background:url(../images/vertical_shadow.png) no-repeat -20px center;
	padding-bottom:30px;
	margin-top:-30px;

}

#about ul#followme li{
	list-style:none;
	border-top:1px solid #b883de;
	padding-top:5px;
	margin-top:5px;
	padding-top:0px;
}

#about ul#followme{
	padding-left:20px;
	border-right:1px solid #b883de;
	border-left:1px solid #b883de;

}

#about ul#followme li:first-child{
	border:0px solid #ffffff;	
}


#about ul#downloads{
	padding-bottom:10px;
	margin-bottom:20px;
	border-bottom:1px solid #b883de;
}

#about ul#downloads li a{
	margin-top:4px;
	display:block;
	height:25px;
	padding-left:24px;
	position:relative;	
}

#about ul#downloads li a:hover{
	color:#ffffff;	
}

#about ul#downloads li a span{
	display:block;
	width:15px;
	height:21px;
	background:#b883de;
	overflow:hidden;
	position:absolute;
	left:0;
	top:0px;
}



#about ul#visitGS li a{
	background:url(../images/sprite_logos.png) no-repeat -140px -10px;
	text-indent:-1800px;
	display:block;
	width:200px;
	height:80px;
}

#about ul#visitGS li a:hover{
	background:url(../images/sprite_logos.png) no-repeat -138px -10px;	
}


#about ul#followme li{
	
}



#about ul#followme li a{
	display:block;
	text-indent:-3000px;	
    background:url(../images/sprite_logos.png) no-repeat -25px -15px;
	width:110px;
	height:30px;
}

#about ul#followme li a:hover{
	background-position:-23px -15px;
}

#about ul#followme li#twitter a{
	background-position:-25px -52px;
	
}


#about ul#followme li#twitter a:hover{
	background-position:-23px -52px;
}

#about ul#followme li#facebook a{
	background-position:-25px -90px;
}

#about ul#followme li#facebook a:hover{
	background-position:-23px -90px;
}

#about ul#followme li#linkedin a{
	background-position:-25px -128px;
}

#about ul#followme li#tumblr a{
	background-position:-25px -168px;
}

#about ul#followme li#linkedin a:hover{
	background-position:-23px -128px;
}

#about ul#followme li#tumblr a:hover{
	background-position:-23px -168px;
}

#contact{
	display:block;
	background:#390B56;
	position:absolute;
	width:100%;
	height:60px;
	overflow:hidden;
	top:-161px;
	left:0;	
	padding:40px;
	z-index:4000;
}

#contact a{
	display:block;
	height:40px;
	margin-left:30px;
	margin-top:20px;
	padding-left:30px;
	background:url(../images/icon_email.jpg) no-repeat left 0px;	
}
#contact a:hover{
	color:#ffffff;	
}

#lookingforresume{
	
	display:block;
	position:absolute;
	left:970px;
	background:url(../images/vertical_shadow.png) no-repeat left top;
	width:200px;
	height:232px;
	margin-top:-35px;
	font: 20px/22px 'GreyscaleBasicRegular', Arial, sans-serif;
	padding-left:20px;
	margin-left:40px;
	border-left:1px solid #b883de;
	
}

#lookingforresume p{
	margin-left:0px;
	padding-top:0;
	margin-top:0;
	font:11px/18px Arial, Helvetica, sans-serif;
	display:block;
	width:300px;
}

#resume{
	display:block;
	position:absolute;
	left:200px;
	top:20px;
	width:500px;
	border-left:1px solid #5F0087;
	padding-left:20px;
	margin-left:20px;
	
}

#resume p{
	width:auto;	
}