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

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	vertical-align: baseline;
	text-decoration: none;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}


/* principle styles*/

@font-face { font-family: "Didot"; src: url(../Didot.ttf); font-size:16px; }
@font-face { font-family: "democ"; src: url(fonts/DemocReg.ttf); font-size:16px; }
@font-face { font-family: "dan"; src: url(fonts/daniel.ttf); font-size:16px; }



body { background: url(../imgs/bg.png) repeat; font-family: Georgia; }

#content 	{ margin: 0 auto; 
			  width: 990px; 
			  height: 768px; 
			  position: relative;
			  z-index: 150; }
			  
#content > section  { height:  768px;
			          position: relative;
					  padding: 0;
					  margin: 0; 
					  width: 100%;
					  max-width: 990px; position: relative; margin: 0 auto; }	
					  
img { max-width: 100%;} /*fluid image technique for responsive design*/
				  
			  
#hero { width: 100%;
    	position: fixed; 
		z-index: 100;
		bottom: 0; 
		margin: 0 auto 0 auto;}
		

		 
/*sidebar*/		 
#sidebar { height: 768px;
		   width: 175px;
		   z-index: 200;
		   position: fixed;
		   right: 10px;
		   top: 0; }
		   				   
#contact { height: 173px;
		   width: 165px;
		   background: url(../imgs/nav/contact_bg.png) no-repeat ;
		   padding:24px 0 0 12px;
		   text-align: center;
		   z-index: 190;
		   margin:0 0 0 0; }
		   
#social { margin: 5px 0 0 0; }
	#social li { display: inline;
				 margin: 5px 0 0 0; }
						
#contact a, p { color: black; font-size: 15px;  }


#contact h1 {font-size: 15px; 
			line-height: 1.25;
			font-family: "Didot";
			 text-decoration: underline;
			 margin: 8px 0 0 0;
			 text-shadow: 2px 1px 3px #666;	 }


		   
#sidebar nav { display: none; position: absolute; }
			   
	#sidebar nav a { display: block; text-indent: -9999px; }
					
		#sidebar nav a:hover { -moz-transform: scale(1.1);
							   -webkit-transform: scale(1.1);
								transform: scale(1.1);
								background-position:bottom; }
								
	#sidebar a.side_folio  { margin:-40px 0 -20px 56px; height:100px; width: 100px; background: url(../imgs/nav/side_folio.png) no-repeat; background-position:top; }
	
	#sidebar a.side_resume { margin:0 0 -20px 30px; height:80px; width: 80px; background: url(../imgs/nav/side_resume.png) no-repeat; background-position:top; top: 100px;  }
	
	#sidebar a.side_about { margin: 0 0 0 9px; height: 50px; width: 50px; background: url(../imgs/nav/side_about.png) no-repeat; background-position:top; top: 160px; left: 25px; z-index: 250;  }
	
	.html5 { float: right; margin: 539px 0 0 0; }

	
			   
#mobile_contact { position:fixed; display:none; }/*display: visible; when min responsive pixel width is reached*/


/*home*/

#home { background: url(../imgs/home/home_bg.png) 50% no-repeat fixed; }

#home h1 { font-size: 55px;
		   font-family: "democ";
     	   text-align: center;
		   margin: 15px 0 0 0;
		   font-weight: normal;
		   text-shadow: 2px 1px 3px #666; }
		   
#home nav { width: 990px;
			height: 214px; 
			position: relative; }
			
	#home nav li { padding: 10px;}			
	
		#home nav a { display: block; 
					  position: absolute;
					  z-index: 150; 
					  top: 0; 
					  text-indent: -9999px; }
					  
			#home nav a:hover { -moz-transform: scale(1.1);/*firefox*/
								-webkit-transform: scale(1.1);/*everythig else*/
								transform: scale(1.1); 
								background-position: 0 bottom;}
								
			#home nav a:active { background-position: 0 bottom; }
						 
					 
		#home a.home_nav_about {
			width: 145px; height: 130px;
			left: 24%;
			top: 40%;
			background-image: url(../imgs/nav/nav_about_sprite_hand.png)  ;
			background-position: top; }
					 
		#home a.home_nav_folio {
			width: 233px; height: 214px;
			left: 43%;
			top:6%;
			background-image: url(../imgs/nav/nav_portfolio_sprite_hand.png) ;
			background-position: top; }
		
		#home a.home_nav_resume {
			width: 155px; height: 152px;
			left: 60%;
			top: 70%;
			background-image: url(../imgs/nav/nav_resume_sprite_hand.png) ;
			background-position: top; }	
			
			
	#intro {width: 230px; height: 192px; background: rgba(255, 255, 255, .5);
			-moz-box-shadow: 0 0 5px rgba(0, 0, 0,.15);
			-webkit-box-shadow: 0 0 5px rgba(0, 0, 0,.15);
		    box-shadow: 0 0 5px rgba(0, 0, 0,.15);
			border-radius: 8px;	
			padding: 16px;
			margin: 80px 0 0 20px;
			font-weight: noraml;
			font-family:"Didot", Georgia, Times New Roman, Times, serif;}
			
	#intro p { font-size: 18px; line-height:1.25;}	
			
	#intro p strong { text-shadow: 2px 1px 3px #666;}	
		
	
			   


/*folio*/

#folio { background: url(../imgs/folio/folio_bg.png) fixed no-repeat;}

	#folio nav { width: 866px;
				height: 557px; 
				position: relative;
				text-indent: -9999px; }
	#folio nav .set {display:none;}
								
		#folio nav a { display: block; 
					  position: relative;
					  z-index: 150;
					 /* border-radius: 5px;
					  padding: 5px;
					  -moz-box-shadow: 0 0 5px rgba(0, 0, 0,.25);
					  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0,.25);
					  box-shadow: 0 0 5px rgba(0, 0, 0,.25);*/ }
					
	/*	#folio nav .print a:hover {	
						 -moz-transform: scale(1.25);
							-webkit-transform: scale(1.25);
							transform: scale(1.25);}*/
						
					 
		#folio nav .print li#beer { height: 282px; width: 165px; 
									background: url(../imgs/folio/works/print/bc_tail.png) 100% bottom no-repeat;
									margin: 50px 0 0 440px; }
			#folio nav .print a.bc {
				width: 185px; height: 200px;
				background: /*rgba(255,255,255,.90)*/ url(../imgs/folio/works/print/bc_thumb_sprite.png) no-repeat;
				background-position: 0 0; }
			#folio nav .print a.bc:hover { background: url(../imgs/folio/works/print/bc_thumb_sprite.png)  no-repeat; 
			background-position: -185px 0; -moz-transform: scale(1.1);}
			
			
		#folio nav .print li#lucky { height: 241px; width: 173px; 
									background: url(../imgs/folio/works/print/lucky_tail.png) 100% bottom no-repeat;
									margin: -184px 0 0 148px; } 
			#folio nav .print a.ls {
				width: 120px; height: 140px;
				background: /*rgba(255,255,255,.90)*/ url(../imgs/folio/works/print/ls_thumb_sprite.png) no-repeat ;
				background-position: 0 0; }
			#folio nav .print a.ls:hover { background: url(../imgs/folio/works/print/ls_thumb_sprite.png) no-repeat; 
			background-position: -120px 0; -moz-transform: scale(1.1);}
				
		
		#folio nav .print li#hung {
			width: 247px; height: 125px;
			background: url(../imgs/folio/works/print/hunger-tail.png) left no-repeat;
			margin: 0 0 0 574px; }
			#folio nav .print a.hunger {
				width: 170px; height: 200px;
				background: /*rgba(255,255,255,.90)*/ url(../imgs/folio/works/print/hunger_thumb_sprite.png) no-repeat ;
				margin: 0 0 0 110px; background-position: 0 0;}	
			#folio nav .print a.hunger:hover { background: url(../imgs/folio/works/print/hunger_thumb_sprite.png)  no-repeat; 
			background-position: -170px 0; -moz-transform: scale(1.1);}  
		 	
					  
		#folio nav .print li#conika {
			width: 247px; height: 181px;
			margin: -341px 0 0 550px;
			background: url(../imgs/folio/works/print/conika_tail.png) left no-repeat; }
			#folio nav .print a.iconika {
				width: 89px; height: 110px;
				margin: 0 0 0 162px;
				/*top: 179px;
				left: 759px;*/
				background: /*rgba(255,255,255,.90)*/ url(../imgs/folio/works/print/iconika_thumb_sprite.png) no-repeat ;
				background-position: 0 0; }
			#folio nav .print a.iconika:hover { background: url(../imgs/folio/works/print/iconika_thumb_sprite.png) no-repeat; 
			background-position: -90px 0; -moz-transform: scale(1.1);}	
			 
			 
		#folio nav .print li#bridge {
			width: 203px; height: 80px;
			margin: 107px 0 0 83px;
			background: url(../imgs/folio/works/print/bridge_tail.png) right no-repeat; }
			#folio nav .print a.run {
				width: 90px; height: 110px;
				margin: 0 80px 0 0;
				background:/* rgba(255,255,255,.90)*/ url(../imgs/folio/works/print/run_thumb_sprite.png) no-repeat ; 
				background-position: 0 0;}	
				
			#folio nav .print a.run:hover { background: url(../imgs/folio/works/print/run_thumb_sprite.png) no-repeat; 
			background-position: -94px 0; -moz-transform: scale(1.1);}	
		 
		 
		 
			
					  
		/*#folio nav .inter a:hover {	
						 -moz-transform: scale(1.25);
							-webkit-transform: scale(1.25);
							transform: scale(1.25);}*/
					  
		#folio nav .inter li#psk {
			width: 271px; height: 155px;
			background: url(../imgs/folio/works/interactive/aegis_tail.png) 100% no-repeat;
			margin: -339px 0 0 20px; }
			#folio nav .inter a.aegis {
				width: 75px; height: 110px;
				background: /*rgba(255,255,255,.90)*/ url(../imgs/folio/works/interactive/ethos_thumb_sprite.png) no-repeat ;
				margin: 0 0 68px 0;}
			#folio nav .inter a.aegis:hover { background: url(../imgs/folio/works/interactive/ethos_thumb_sprite.png) no-repeat; 
			background-position: -75px 0; -moz-transform: scale(1.1);}	
			
		#folio nav .inter li#smile {
			width: 244px; height: 105px;
			background: url(../imgs/folio/works/interactive/smile_tail.png) 100% no-repeat;
			margin: -40px 0 0 509px; }
			#folio nav .inter a.pile {
				width: 70px; height: 85px;
				background: /*rgba(255,255,255,.90)*/ url(../imgs/folio/works/interactive/smile_thumb_sprite.png) no-repeat ;
				background-position: 0 0;
				margin: 0 0 0 192px;}
			#folio nav .inter a.pile:hover { background: url(../imgs/folio/works/interactive/smile_thumb_sprite.png) no-repeat; 
			background-position: -70px 0; -moz-transform: scale(1.1);}
			
		#folio nav .inter li#green {
			width: 100px; height: 49px;
			background: url(../imgs/folio/works/interactive/green_tail.png) 100% no-repeat;
			margin: 0 0 0 187px; }
			#folio nav .inter a.getaway {
				width: 50px; height: 70px;
				background: /*rgba(255,255,255,.90)*/ url(../imgs/folio/works/interactive/getaway_thumb_sprite.png) no-repeat ;
				margin: 0 50px 0 0;}
				#folio nav .inter a.getaway:hover { background: url(../imgs/folio/works/interactive/getaway_thumb_sprite.png) no-repeat; 
			background-position: -58px 0; -moz-transform: scale(1.1);}	
				
		#folio nav .inter li#knock {
			width: 70px; height: 187px;
			background: url(../imgs/folio/works/interactive/ktpo_tail.png) 100% no-repeat;
			margin: -356px 0 0 319px; }
			#folio nav .inter a.out {
				width: 55px; height: 70px;
				background: /*rgba(255,255,255,.90)*/ url(../imgs/folio/works/interactive/ktpo_thumb_sprite.png) no-repeat ;
				background-position:0 0;}
		#folio nav .inter a.out:hover { background: url(../imgs/folio/works/interactive/ktpo_thumb_sprite.png) no-repeat; 
			background-position: -58px 0; -moz-transform: scale(1.1);}	
				
		#folio nav .inter li#gray {
			width: 143px; height: 143px;
			background: url(../imgs/folio/works/interactive/gray_tail.png) 100% no-repeat;
			margin: 35px 0 0 91px; }
			#folio nav .inter a.hair {
				width: 58px; height: 75px;
				background: /*rgba(255,255,255,.90)*/ url(../imgs/folio/works/interactive/gray_thumb_sprite.png) 50% no-repeat ;
				background-position: 0 0;}
			#folio nav .inter a.hair:hover { background: url(../imgs/folio/works/interactive/gray_thumb_sprite.png) no-repeat; 
			background-position: -69px 0; -moz-transform: scale(1.1);}
			
						  
		



/*about*/
#about { background: url(../imgs/about/about_bg.png) fixed, url(../imgs/about/aboutMe_tail.png) 33% 100px no-repeat, url(../imgs/about/twit_tail.png) 48% 94px no-repeat, url(../imgs/about/twitter-bird.png) 48% -10px no-repeat; overflow:visible; }
#about > section, blockquote { 
				   border-radius: 10px;
		    	   background: rgba(255, 255, 255, 1);
			      text-wrap: normal;
				  -moz-box-shadow: 0 0 5px rgba(0, 0, 0,.25);
				  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0,.25);
				  box-shadow: 0 0 5px rgba(0, 0, 0,.25); }

#About_Me { width: 245px; height: 355px;
			margin: -50px 0 0 0;
			text-align:left;
			padding: 20px 20px 0px 20px;
			background:  }
			
#About_Me h1 { font-family:"Didot";
font-size: 24px;
font-weight: normal;
text-shadow: 2px 1px 3px #666;	
 }

#About_Me p {font-size:15px; line-height:1.5;}
			
#about blockquote { height:100px; width:410px;
					margin: 0 0 0 415px; }

/*Twitter Feed*/					
#twitter {
	width: 100%; height:95px; padding: 10px 15px 0 15px;
	background:url(../imgs/about/twitter_bg.png) no-repeat; }

	#twitter h1 a {
		display: block; margin: 0 0 0 0;
		font-size: 12px;
		font-family:"Didot" Georgia, Times New Roman, Times, serif; color: rgba(0,0,0,1);
		text-decoration: none; display: none;}
		
		#twitter h1 a:hover { color: rgba(255,255,255,0.3); }

	#twitter ul {
		list-style: none; padding: 0 46px 10px 90px; overflow: auto;}
		
		#twitter ul li {
			height: 75px;
			padding: 0 32px 0 0;}
			
			#twitter ul li a {
				font: italic 14px/16px Georgia, Times, Serif;
				color: rgba(0,0,0,1); }
				
				#twitter ul li a:hover { color: #1b2f6f; }

		#twitter ul li span {
			font: 15px :"Didot" Georgia, Times New Roman, Times, serif;
		    color: rgba(0,0,0,1);
			text-shadow: 2px 1px 3px #666;	
			line-height:1;	}
			
		#twitter ul li span a {
				font: 18px/30px :"Didot" Georgia, Times New Roman, Times, serif; font-weight:bold; }


/*resume*/

#resume { background: url(../imgs/resume/resume_bg.png); }
#resume section  { position: relative; }
				  
#resume  h1 { width: 210px;
			font-family:"Didot" ;
			font-size: 20px;
			font-weight: normal;
			text-align: center;
		    position: relative;
			z-index: 200;
	        background: rgba(255, 255, 255, 1);
			-moz-box-shadow: 0 0 5px rgba(0, 0, 0,.25);
			-webkit-box-shadow: 0 0 5px rgba(0, 0, 0,.25);
			box-shadow: 0 0 5px rgba(0, 0, 0,.25);
			border-radius: 8px;
			padding: 5px 0 5px 0;
			overflow: visible; 
			text-shadow: 2px 1px 3px #666;}
			
#resume p { position: relative;
			width: 200px;
			background: rgba(255, 255, 255, .5);
			-moz-box-shadow: 0 0 5px rgba(0, 0, 0,.15);
			-webkit-box-shadow: 0 0 5px rgba(0, 0, 0,.15);
		    box-shadow: 0 0 5px rgba(0, 0, 0,.15);
			border-radius: 8px;	
			padding: 16px;
			font-size: 14px;
			font-weight: noraml;}

			
#resume a { color: black; }

#exp1 { margin:-10px 0 0 38px;}
	#exp a:hover {color: rgb(0,0,255);} 
	
#exp2 { margin:-38px 0 0 237px; z-index: 190;}

#exp3 { margin: -10px 0 0 144px; z-index: 180;}

		 

#education { height: 130px; width:290px;
			 background: url(../imgs/resume/edu_tail.png) 206px 0 no-repeat, url(../imgs/resume/edu_body_tail.png) 100% 40px no-repeat; }
			 
#education p { margin:-10px 0 0 38px;
			   width:234px; 
			   font-size: 12px;
			   line-height: 1.25;
			   padding: 12px;}
			   

			 
#exp { height: 245px; width: 473px;	
	   margin: 48px 0 0 222px;
	   background: url(../imgs/resume/exp_tail.png) 0 38px no-repeat, url(../imgs/resume/exp1_tail.png) 18% 92px no-repeat, url(../imgs/resume/exp2_tail.png) 100% 142px no-repeat, url(../imgs/resume/exp3_tail.png) 43% 206px no-repeat;
	   overflow: visible;}
	   
#exp hgroup { margin:-15px 0 0 45px; z-index: 180;}
#exp hgroup.exp2 {  margin:-14px 0 0 245px; z-index: 140; }
#exp hgroup.exp3 { margin:-13px 0 0 145px; z-index: 120; }

	   
#skills { height: 300px; width: 316px;	
		  margin: -130px 0 0 500px;
		  background: url(../imgs/resume/skills_tail.png) 0 0 no-repeat, url(../imgs/resume/skills_know_tail.png) 0 15% no-repeat, url(../imgs/resume/skills_profic_tail.png) 0 29% no-repeat;}
		  
#skills > h1 {margin: 0 0 0 50px;}
		  
#skills ul {  width: 188px;
			 position: relative;
			 background: rgba(255, 255, 255, .5);
			 -moz-box-shadow: 0 0 5px rgba(0, 0, 0,.25);
			 -webkit-box-shadow: 0 0 5px rgba(0, 0, 0,.25);
		     box-shadow: 0 0 5px rgba(0, 0, 0,.25);
			 border-radius: 8px;
			 margin: -9px 0 0 110px;
			 z-index: 180;
			 padding: 12px; }
			 
#prof { font-size:14px; }
			 			 
#skills ul#know { font-size: 14px;
				  width: 150px;
				  margin: -8px 0 0 170px;
				  z-index: 140; }





/*Go go gadget responsive design*/
@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {
	#sidebar{ display:none; }
	#mobile_contact { display: block; z-index:300; bottom:0; display:inline-block; }
	#mobile_home {height: 50px; width:200px; bottom:0; }
	#mobile_phone { height:50px; width:50px; bottom:0; }
	#mobile_email { height:50px; width:50px; bottom:0; margin: 0 0 0 0px;}
	#hero { display:none; }
	#content 	{ margin: 0 auto; 
			  width: 320px; 
			  position: relative;
			  z-index: 150; }
			
	#intro {display: none;
		width: 0px; height: 0px; background: rgba(255, 255, 255, .5);
			-moz-box-shadow: 0 0 5px rgba(0, 0, 0,.15);
			-webkit-box-shadow: 0 0 5px rgba(0, 0, 0,.15);
		    box-shadow: 0 0 5px rgba(0, 0, 0,.15);
			border-radius: 8px;	
			padding: 16px;
			margin: 0px 0 0 20px;
			font-weight: noraml;
			font-family:"Didot", Georgia, Times New Roman, Times, serif;
			position: absolute;
			top: 0;}
			
	#intro p { font-size: 18px; line-height:1.25;}	
			
	#intro p strong { text-shadow: 2px 1px 3px #666;}	
				  
	#content > section  { height: 480px;
						  position: relative;
						  padding: 0;
						  margin:0 0 100px 0; }
			  

	

	
	/*Home*/
	#home nav { height: 214px; 
				position: absolute;
				width: inherit;
				top: 0; }
			
	#home nav a { position: static;
				  margin: 0 auto -50px auto;}

			  
	#home nav a:hover { -moz-transform: scale(1.1);
						-webkit-transform: scale(1.1);
						transform: scale(1.1); 
						background-position: 0 bottom; }
						
	#home nav a:active { background-position: 0 bottom; }
					 
				 
	#home a.home_nav_about {
		width: 145px; height: 130px;
		left: 24%;
		top: 40%;
		background-image: url(../imgs/nav/nav_about_sprite_hand.png)  ;
		background-position: top;
		 }
				 
	#home a.home_nav_folio {
		width: 233px; height: 214px;
		left: 43%;
		top:6%;
		background-image: url(../imgs/nav/nav_portfolio_sprite_hand.png) ;
		background-position: top;}
	
	#home a.home_nav_resume {
		width: 155px; height: 152px;
		left: 60%;
		top: 70%;
		background-image: url(../imgs/nav/nav_resume_sprite_hand.png) ;
		background-position: top; }		
					  
					  
				  
				  
	/*Portfolio*/			  
	#folio { background: url(../imgs/folio/folio_bg_elements.png) fixed no-repeat;}

	#folio nav { width: 0px;
				height: 0px; 
				position: relative;
				text-indent: -9999px; }
	#folio nav .set { display:none; }
							
	#folio nav a { display: block; 
				  position: relative;
				  z-index: 150;
				  border-radius: 5px;
				  padding: 5px;
				  -moz-box-shadow: 0 0 5px rgba(0, 0, 0,.25);
				  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0,.25);
				  box-shadow: 0 0 5px rgba(0, 0, 0,.25); }
					
	#folio nav .print a:hover {	
					 -moz-transform: scale(1.25);
						-webkit-transform: scale(1.25);
						transform: scale(1.25); }
											
						 
	#folio nav .print li#beer { height: 175px; width: 175px; 
								margin: 0px; }
	#folio nav .print a.bc {
		width: 165px; height: 165px;
		background: rgba(255,255,255,.90) url(../imgs/folio/works/print/bc_thumb.png) 50% no-repeat; }
		
		
	#folio nav .print li#lucky { height: 115px; width: 115px; 
								background: url(../imgs/folio/works/print/lucky_tail.png) 100% bottom no-repeat;
								margin: 0 0 0 175px; } 
	#folio nav .print a.ls {
		width: 108px; height: 108px;
		background: rgba(255,255,255,.90) url(../imgs/folio/works/print/ls_thumb.png) 50% no-repeat ; }
		
	
	#folio nav .print li#hung {
		width: 135px; height: 135px;
		background: url(../imgs/folio/works/print/hunger-tail.png) left no-repeat;
		margin: 0 0 0 0px; }
	#folio nav .print a.hunger {
		width: 125px; height: 125px;
		background: rgba(255,255,255,.90) url(../imgs/folio/works/print/hunger_thumb.png) 50% no-repeat ;
		margin: 0 0 0 0px; }	  
	 
				  
	#folio nav .print li#conika {
		width: 80px; height: 80px;
		margin: -337px 0 0 240px;
		background: url(../imgs/folio/works/print/conika_tail.png) left no-repeat; }
	#folio nav .print a.iconika {
		width: 73px; height: 73px;
		margin: 0 0 0 0px;
		/*top: 179px;
		left: 759px;*/
		padding: 3px;
		background: rgba(255,255,255,.90) url(../imgs/folio/works/print/iconika_thumb.png) 50% no-repeat ;
	 }	
	 
	 
	#folio nav .print li#bridge {
		width: 90px; height: 90px;
		margin: 200px 0 15px 176px;
		background: url(../imgs/folio/works/print/bridge_tail.png) right no-repeat; }
	#folio nav .print a.run {
		width: 80px; height: 80px;
		margin: 0 0px 0 0;
		background: rgba(255,255,255,.90) url(../imgs/folio/works/print/run_thumb.png) 50% no-repeat ;
	 }	
	 
	 
	 
		
				  
	#folio nav .inter a:hover {	
					 -moz-transform: scale(1.25);
						-webkit-transform: scale(1.25);
						transform: scale(1.25);}
				  
	#folio nav .inter li#psk {
		width: 65px; height: 65px;
		background: url(../imgs/folio/works/interactive/aegis_tail.png) 100% no-repeat;
		margin: -176px 0 0 255px; }
	#folio nav .inter a.aegis {
		width: 55px; height: 55px;
		background: rgba(255,255,255,.90) url(../imgs/folio/works/interactive/ethos_thumb.png) 50% no-repeat;
		margin: 0 0 0 0; }
		
	#folio nav .inter li#smile {
		width: 50px; height: 50px;
		background: url(../imgs/folio/works/interactive/smile_tail.png) 100% no-repeat;
		margin: -135px 0 0 22px; }
	#folio nav .inter a.pile {
		width: 40px; height: 40px;
		background: rgba(255,255,255,.90) url(../imgs/folio/works/interactive/smile_thumb.png) 50% no-repeat ;
		margin: 0 0 0 0px;}
		
	#folio nav .inter li#green {
		width: 50px; height: 50px;
		background: url(../imgs/folio/works/interactive/green_tail.png) 100% no-repeat;
		margin: 28px 0 0 152px; }
	#folio nav .inter a.getaway {
		width: 35px; height: 35px;
		background: rgba(255,255,255,.90) url(../imgs/folio/works/interactive/getaway_thumb.png) 50% no-repeat ;
		margin: 0 0px 0 0;}
		
	#folio nav .inter li#knock {
		width: 45px; height: 45px;
		background: url(../imgs/folio/works/interactive/ktpo_tail.png) 100% no-repeat;
		margin: -152px 0 0 95px; }
	#folio nav .inter a.out {
		width: 32px; height: 32px;
		background: rgba(255,255,255,.90) url(../imgs/folio/works/interactive/ktpo_thumb.png) 50% no-repeat ;}
		
	#folio nav .inter li#gray {
		width: 143px; height: 143px;
		background: url(../imgs/folio/works/interactive/gray_tail.png) 100% no-repeat;
		margin: -236px 0 0 200px; }
	#folio nav .inter a.hair {
		width: 45px; height: 45px;
		background: rgba(255,255,255,.90) url(../imgs/folio/works/interactive/gray_thumb.png) 50% no-repeat ;}
		
		
		/*About*/
		
	#about > section, blockquote { 
				   border-radius: 10px;
		    	   background: rgba(255, 255, 255, 1);
			      text-wrap: normal;
				  -moz-box-shadow: 0 0 5px rgba(0, 0, 0,.25);
				  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0,.25);
				  box-shadow: 0 0 5px rgba(0, 0, 0,.25); }
				 

	#About_Me { width: 300px; height: 400px;
				margin: 10px 0 0 0;
				text-align:left;
				padding: 30px 10px 0px 20px;}
				
#About_Me p { font-size:17px;}
				
	#About_Me h1 { font-family:"Didot";
	font-size: 32px;}
				
	#about blockquote { height:100px; width:300px;
						margin: 0 0 0 0;}
						
	 #twitter ul {list-style: none; padding: 0 46px 0px 90px; overflow: auto;}
	 
		#twitter ul li {
			height: 75px;
			padding: 0 0px 0 0;}
	 
						
						
						
						
	#resume  h1 { width: 210px;
			font-family:"Didot" ;
			font-size: 25px;
			font-weight: normal;
			text-align: center;
		    position: relative;
			z-index: 200;
	        background: rgba(255, 255, 255, 1);
			-moz-box-shadow: 0 0 5px rgba(0, 0, 0,.25);
			-webkit-box-shadow: 0 0 5px rgba(0, 0, 0,.25);
			box-shadow: 0 0 5px rgba(0, 0, 0,.25);
			border-radius: 8px;
			padding: 5px 0 5px 0;
			overflow: visible; 
			margin:50px 0 0 0;}
			
	#resume p { position: relative;
				width: 200px;
				background: rgba(255, 255, 255, .5);
				-moz-box-shadow: 0 0 5px rgba(0, 0, 0,.15);
				-webkit-box-shadow: 0 0 5px rgba(0, 0, 0,.15);
				box-shadow: 0 0 5px rgba(0, 0, 0,.15);
				border-radius: 8px;	
				padding: 16px;
				font-size: 15px;
				font-weight: noraml;}
	
				
	#resume a { color: black; }
	
	#exp1 { margin:-10px 0 0 38px;}
	#exp a:hover {color: rgb(0,255,0);} 
	#exp2 { margin:-10px 0 0 67px; z-index: 190;}
	#exp3 { margin: -10px 0 0 96px; z-index: 180;}
	
			 
	
	#education { height: 130px; width:290px;
				 background: ; }
				 
	#education p { margin:-10px 0 0 38px;
				   width:207px; 
				   font-size: 14px;
				   line-height: 1;
				   padding: 12px;}
				   
	
				 
	#exp { height: 245px; width:0;	
		   margin: 0px 0 0 0px;
		   background: ;
		   overflow: visible;}
		   
	#exp hgroup { margin: 0px 0 0 0px; z-index: 180;}
	#exp hgroup.exp2 {  margin:0px 0 0 0px; z-index: 140; }
	#exp hgroup.exp3 { margin:0px 0 0 0px; z-index: 120; }
	
		   
	#skills { height: 300px; width: 316px;	
			  margin: 0px 0 0 0px;
			  background: ;}
			  
	#skills > h1 {margin: 50px 0 0 0px;}
			  
	#skills ul {  width: 188px;
				 position: relative;
				 background: rgba(255, 255, 255, .5);
				 -moz-box-shadow: 0 0 5px rgba(0, 0, 0,.25);
				 -webkit-box-shadow: 0 0 5px rgba(0, 0, 0,.25);
				 box-shadow: 0 0 5px rgba(0, 0, 0,.25);
				 border-radius: 8px;
				 margin: -9px 0 0 110px;
				 z-index: 180;
				 padding: 12px; }
				 
	#prof { font-size:14px; }
							 
	#skills ul#know { font-size: 14px;
					  width: 150px;
					  margin: 0px 0 0 0px;
					  z-index: 140; }
	
	
						  
					  
	
		
}