/*	=== === === === === === === === === ===

	Desc: firsten.com style sheet
	by: Andrew Firstenberger
	01/2009
	
=== === === === === === === === === === */


/*=PAGE FRAMEWORK
=== === === === === === === === === === */
* {
	margin:0;
	padding:0;	
}
body{
	height:100%;
	background:url(images/gradient_bg.png) repeat-x top;	
}
#content {
	margin-top:20px;
}
#wrapper {
	width:820px;
	margin:0 auto;
	padding:0px;
	top:0px;
}
#mastHead{
	width:100%;
	height:80px;
	border: blue;
}
#showcase {
	width:820px;
	display:block;

}
#footer {
	margin-top:6em;
	clear:both;
	width:100%;
}


/*=PRIMARY STYLES
=== === === === === === === === === === */
body{
	background-color:#CBCBCB;
}
img {
	border: none;
}
body, a:link, a:visited{
	color:#000000;
	font: normal normal 11.5px Arial, Helvetica, sans-serif;
	text-decoration:none;
}
p, .p, .contact #mainContent ul, .contact #mainContent2 p a{
	color:#5b5b5b;
	line-height:2em;
	margin-left:10px;
}
p, .p, .about #mainContent il, .about #mainContent2 p a{
	color:#5b5b5b;
	line-height:2em;
}
h2, .h2 {
	font-size:14px;
	margin-bottom:1em;
	font-weight:bold;
	letter-spacing:.05em;
	color:#444;
	margin-left:10px;
}
hr {
    background-color:#cbcbcb;
	color:#e7e4dc;
    height: 1px;
	border:none;
}
.shadowTop {
	height:10px;
	background:url(images/shadow_top.png)no-repeat top;
}
.shadowBottom {
	height:17px;
	background:url(images/shadow_bottom.png)no-repeat bottom;
	margin-bottom:5em;
}
.img-wrapper{
	background:url(images/shadow_tile.png)repeat-y;
	width:100%;
	padding-left:10px;
}


/*=HOME LOGO BUTTON
=== === === === === === === === === === */
#logo {
	width: 250px;
	height: 80px;
	background:url(images/logo.png) no-repeat;
	float:right;
	margin-right:10px;
}
#logo li { 
	list-style: none;
}
#logo a {
	width:250px;
	height:80px;
	display:block;
	text-indent:-9999px;
	overflow:hidden;
	background::url(images/mainNav.png) no-repeat;
}
#logohover a:hover {background: url(images/logo.png) 0px -80px no-repeat;
}

/*=NAVIGATION
=== === === === === === === === === === */
#mainNav {
	width: 100px;
	height: 80px;
	background: url(images/mainNav.png);
	float:left;
	margin-left:10px;
}
#mainNav li { 
	list-style: none;
}
#mainNav a {
	width:100%;
	height:26px;
	display:block;
	text-indent:-9999px;
	overflow:hidden;
}
#about a:hover {background: url(images/mainNav.png) -100px 0px no-repeat;}
#work a:hover {background: url(images/mainNav.png) -100px -26px no-repeat;}
#contact a:hover {background: url(images/mainNav.png) -100px -52px no-repeat;
}
#about a.on {background: url(images/mainNav.png) -200px 0px no-repeat;}
#work a.on {background: url(images/mainNav.png) -200px -26px no-repeat;}
#contact a.on {background: url(images/mainNav.png) -200px -52px no-repeat;
}


/*=SUB NAVIGATION
=== === === === === === === === === === */
#subNav {
	width: 300px;
	height: 80px;
	background: url(images/subNav.png);
	float:left;
	margin-left:13px;
}

#subNav li { 
	list-style: none; 
	float:left;
}
#subNav a {
	width:100px;
	height:80px;
	display:block;
	text-indent:-9999px;
	overflow:hidden;
}

#web a:hover {background: url(images/subNav.png) 0px -80px no-repeat;}
#interactive a:hover {background: url(images/subNav.png) -100px -80px no-repeat;}
#others a:hover {background: url(images/subNav.png) -200px -80px no-repeat;
}
#web a.subon {background: url(images/subNav.png) -0px -160px no-repeat;}
#interactive a.subon {background: url(images/subNav.png) -100px -160px no-repeat;}
#others a.subon {background: url(images/subNav.png) -200px -160px no-repeat;
}



/*=TERTIARY NAVIGATION
=== === === === === === === === === === */
#workNav {
	width: 200;
	height: 20px;
	background: url(images/workNav.png);
	float:right;
	margin-top:19px;
	margin-right:20px;
}

#workNav li { 
	list-style: none; 
	float:left;
}
#workNav a {
	width:20px;
	height:20px;
	display:block;
	text-indent:-9999px;
	overflow:hidden;
}
#work1 a:hover {background:url(images/workNav.png)  0px -20px no-repeat;}
#work2 a:hover {background:url(images/workNav.png)  -20px -20px no-repeat;}
#work3 a:hover {background:url(images/workNav.png)  -40px -20px no-repeat;}
#work4 a:hover {background:url(images/workNav.png)  -60px -20px no-repeat;}
#work5 a:hover {background:url(images/workNav.png)  -80px -20px no-repeat;}
#work6 a:hover {background:url(images/workNav.png)  -100px -20px no-repeat;}
#work7 a:hover {background:url(images/workNav.png)  -120px -20px no-repeat;}
#work8 a:hover {background:url(images/workNav.png)  -140px -20px no-repeat;}
#work9 a:hover {background:url(images/workNav.png)  -160px -20px no-repeat;}
#work10 a:hover {background:url(images/workNav.png)  -180px -20px no-repeat;}

#work1 a.workon {background:url(images/workNav.png)  0px -40px no-repeat;}
#work2 a.workon {background:url(images/workNav.png)  -20px -40px no-repeat;}
#work3 a.workon {background:url(images/workNav.png)  -40px -40px no-repeat;}
#work4 a.workon {background:url(images/workNav.png)  -60px -40px no-repeat;}
#work5 a.workon {background:url(images/workNav.png)  -80px -40px no-repeat;}
#work6 a.workon {background:url(images/workNav.png)  -100px -40px no-repeat;}
#work7 a.workon {background:url(images/workNav.png)  -120px -40px no-repeat;}
#work8 a.workon {background:url(images/workNav.png)  -140px -40px no-repeat;}
#work9 a.workon {background:url(images/workNav.png)  -160px -40px no-repeat;}
#work10 a.workon {background:url(images/workNav.png)  -180px -40px no-repeat;}


/*=CONTENT
=== === === === === === === === === === */

.home #shadowBottom {
	height:18px;
	background:url(images/shadow_bottom.png)no-repeat bottom;
	margin-bottom:0px;
}
.home .mainMovie {
	padding:1px;/*margin collpase hack*/
}
.home #mainContent {
	width: 550px;
	float:left;
	margin-top:-50px;
	margin-bottom: 20px;
}
.home #mainFeatured {
	width:550px;
	float:left;
	margin-top:-55px;
	margin-bottom: 20px;
}	
.home #subContent{
	float:right;
	margin: -20px 0px 20px 0px;
}

.home #subContent p{
	width:250px;
	height:73px;
	background:url(images/word_welcome.png) no-repeat right;
	text-indent:-9999px;
	overflow:hidden;
	margin-top: -50px;
}

/*=ABOUT PAGE
=== === === === === === === === === === */
	
.about #mainMovie {
	padding:1px;/*margin collpase hack*/
}
.about #mainContent {
	width:20%;
	float:left;
	margin-top: -50px;
}
.about #mainContent li{
	list-style-type:none;
	margin-left:10px;
	line-height:2em;
}
.about #mainContent2 {
	width:55%;
	float:left;
	margin-top: -50px;
}
.about #subContent{
	width:20%;
	float:right;
	margin:-20px 10px 0px;
}
.about #subContent p{
	height:73px;
	background:url(images/word_about.png) no-repeat right;
	text-indent:-9999px;
	overflow:hidden;
	margin-top: -50px;
}

/*=WORK PAGE
=== === === === === === === === === === */
.work .p {
	margin: 10px 0px 0px 0px;
}
.work .h2 {
	margin: 10px 0px 0px 0px;
}
.work {
	width:100%;
	background:url(images/project_num.png) no-repeat;
}
.work li{
	list-style-type:none;
}
.work li a {
	display:block;
	width:84%;
	height:80px;
	padding-left: 16%;
}
.work li a img{
	margin-top: 2px;
	margin-left: 2px;
	float:left;	
}
.h2{
	position:absolute;
	margin-bottom:.3em;
	padding-top:.8em;
}
.h2, .p {
	width:450px;
	line-height:1.3em;
}
.p {
	position:absolute;
	padding-top:1.6em;
}
.shadow {
float:left;
	width:101px;
	height:65px;
	margin-top:.7em;
	margin-right:2em;
	background:url(images/shadow_i.png);
}
#proj1 a:hover {background:url(images/project_num.png)  -820px 0px no-repeat;}
#proj2 a:hover {background:url(images/project_num.png)  -820px -80px no-repeat;}
#proj3 a:hover {background:url(images/project_num.png)  -820px -160px no-repeat;}
#proj4 a:hover {background:url(images/project_num.png)  -820px -240px no-repeat;}
#proj5 a:hover {background:url(images/project_num.png)  -820px -320px no-repeat;}
#proj6 a:hover {background:url(images/project_num.png)  -820px -400px no-repeat;}
#proj7 a:hover {background:url(images/project_num.png)  -820px -480px no-repeat;}
#proj8 a:hover {background:url(images/project_num.png)  -820px -560px no-repeat;}
#proj9 a:hover {background:url(images/project_num.png)  -820px -640px no-repeat;}
#proj10 a:hover {background:url(images/project_num.png)  -820px -720px no-repeat;}

/*=HOME FEATURED
=== === === === === === === === === === */
.featured .p {
	margin: 10px 0px 0px -10px;
}
.featured .h2 {
	margin: 10px 0px 0px -10px;
}
.featured {
	width:100%;
	background:url(images/project_num.png) no-repeat;
}
.featured li{
	list-style-type:none;
}
.featured li a {
	display:block;
	width:530px;
	height:80px;
	padding-left: 20px;
}
.featured li a img{
	margin-top: 2px;
	margin-left: 2px;
	float:left;	
}
.shadow {
float:left;
	width:101px;
	height:65px;
	margin-top:.7em;
	margin-right:2em;
	background:url(images/shadow_i.png);
}
#featured1 a:hover {background:url(images/project_num.png)  -820px 0px no-repeat;}
#featured2 a:hover {background:url(images/project_num.png)  -820px -80px no-repeat;}
#featured3 a:hover {background:url(images/project_num.png)  -820px -160px no-repeat;}

/*=WORK CATEGORY PAGE
=== === === === === === === === === === */
.workProj #mainContent, #mainContent {
	margin-bottom:10px;
	margin-top:20px;
}

/*=CONTACT PAGE
=== === === === === === === === === === */
.contact #mainMovie {
	padding:1px;
}
.contact #mainContent {
	width:50%;
	float:left;
	margin: -50px 0px 30px 0px;
}
.contact #mainContent li{
	list-style-type:none;
}
.contact #mainContent2 {
	width:20%;
	float:left;
}
.contact #subContent{
	width:30%;
	float:right;
	margin-right:10px;
	margin-top: -30px;

}

.contact #subContent p{
	width:100%;
	height:73px;
	background:url(images/word_contact.png) no-repeat right;
	text-indent:-9999px;
	overflow:hidden;
	margin-top: -50px;
}

/*=FOOTER
=== === === === === === === === === === */
#footer {
	clear:both;
	width:800px;
	margin:40px 0px 0px 10px;
	background:url(images/footer.png) no-repeat right;
}
#footer a{
	color:#5b5b5b;
}
#footer span{
 	color:#666666;
}
#footer p, #footer a {
	font-size:11px;
	margin-left:10px;
}
#footericons p, #footericons a {
	font-size:11px;
	float:right;
	margin:-8px 10px 0px 0px;
}