/*
 *	-------------------------------
 *
 *		Francesco Fonte  		
 *		
 * 		Site: http://ffranz.com
 *		
 *		Version: 3.0	
 *
 *	-------------------------------
 *
 */

@import "typography.css";

/* RESET CSS */

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, th, td, menu {margin:0px; padding:0px;}
h1, h2, h3, h4, h5, h6 {font-size: 100%; font-style: normal;}
ol, ul{list-style: none; }
table {border-collapse: collapse; border-spacing: 0px;}
img, fieldset{border: none;}

/* General */

body {font: 13px/24px "Helvetica Neue", Arial, sans-serif; color: #444; background: #f8f7f5 url(../img/bg.png) repeat;}
h1 {font: 60px/50px 'LeagueGothicRegular', Impact, Helvetica Neue, sans-serif; letter-spacing: -1px; margin-bottom: 10px; text-transform: uppercase;}
h2 {font: 50px/50px 'LeagueGothicRegular', Impact, Helvetica Neue, sans-serif; letter-spacing: -1px; margin-bottom: 10px; text-transform: uppercase;}
h3 {font: 40px/30px 'LeagueGothicRegular', Impact, Helvetica Neue, sans-serif; letter-spacing: -1px; margin-bottom: 20px; text-transform: uppercase;}
p{margin-bottom: 10px;}
a, a:visited{color: #11ADBC; text-decoration: none;}
a:hover{color: #7c8d9b; text-decoration: none;}
cite{display: block; font-family: Verdana; font-size: 9px; font-style: normal; letter-spacing: 1px; margin:-10px 0 10px 0;text-transform: uppercase;}

/* Structure */

#wrap{position: relative; margin:0px auto;width:900px; padding: 100px; }

/* Navigation */

nav{position: absolute; top:0px; left:0px; width: 100%; clear: both; background: #393939; margin-bottom: 20px;}

#navigation{position: relative; margin: 0 auto; width: 900px; clear: both; padding: 7px 0px 7px 0px; background: #393939; z-index: 10000; }
	#navigation h1.title{float: left; padding: 5px 0 5px 0px; margin-bottom: 0px;}
	#navigation ul li{display: inline;}
	#navigation ul li a, #navigation ul li a:visited, #navigation ul li a:hover{padding: 5px 20px 5px 20px;}
	
/* Content */

#content{position: relative; width: 900px; margin-bottom: 20px;}
	.col{position: relative; width: 250px; padding-right: 50px; float: left; margin-bottom: 50px;}
		
	.coltree{position: relative; width: 300px; float: left; margin-bottom: 50px;}
	
	.twocol{position: relative; width: 550px; padding-right: 50px; float: left; margin-bottom: 50px;}
	
	.col .button-prev, .col .button-next {border: 1px solid rgba(155, 151, 109, 0.2); -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px;}
	.col .button-prev {background: rgba(155, 151, 109, 0.1) url(../img/prev.png) no-repeat 0 50%; padding: 3px 14px 3px 20px;}
	.col .button-next {background: rgba(155, 151, 109, 0.1) url(../img/next.png) no-repeat 100% 50%; padding: 3px 20px 3px 14px;}
	
	ul.hr{border-bottom: 1px solid #dddddd; margin-bottom: 12px;}
	ul.hr li{border-top: 1px solid #dddddd; padding: 10px 0 10px 0;}
	
	#content .img-border img, #sub-content img, #slideshow{ -moz-box-shadow: 0px 0px 2px #333333; -webkit-box-shadow: 0px 0px 2px #333333; box-shadow: 0px 0px 2px #333333; margin-bottom: 20px;}
	
	ul.nav{position: absolute; top:0px; right: 0px;}
		
	#slideshow{list-style:none; background: #f8f7f5; position: relative; width: 550px; float: left; margin:0 0 20px 50px; overflow:hidden;}
	#slideshow li span.caption{float:left; margin-left:2px;}
	.pics{overflow:hidden; width:550px; height:550px;}
	.pics img{width:550px; margin-bottom:-2px;}
	
/* Sub-content */

#sub-content{position: relative; width: 900px; clear: both;}

	#sub-content ul.graphics{width:900px; margin-top: 10px; display: block; overflow: hidden; background: url(../img/skill.png) center right no-repeat;}
	#sub-content ul.graphics li{position: relative; background: #11ADBC; margin-bottom: 2px; height: 20px; padding-right: 10px; width: 800px;}
	
	#sub-content ul.graphics li a{padding-left: 520px; color: #fff; cursor: crosshair;}
	
	#tooltip{position:absolute; margin-top: -40px; background-color:rgba(57,57,57,0.9); padding:15px 5px 15px 5px; display:none; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; moz-box-shadow: 0px 0px 2px #333333; -webkit-box-shadow: 0px 0px 2px #333333; box-shadow: 0px 0px 2px #333333;
		  filter:  progid:DXImageTransform.Microsoft.dropshadow(OffX=0px, OffY=0px, Color='#333333'); /* IE6,IE7 */
          -ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=0px, OffY=0px, Color='#333333')"; /* IE8 */}
	
	#sub-content ul.graphics li.php, #sub-content ul.graphics li.htmlcss, #sub-content ul.graphics li.mysql, #sub-content ul.graphics li.wp, #sub-content ul.graphics li.js, #sub-content ul.graphics li.ajax, #sub-content ul.graphics li.photoshop, #sub-content ul.graphics li.illustrator{width: 590px; margin-left: -590px;}
	
	#sub-content ul#folio{margin-bottom: 5px; clear: both;}
	#sub-content ul#folio li{width: 200px; margin-bottom: 10px; float: left; padding-right:25px; text-align: center; }

	#sub-content ul#folio li h4{color: #444;}
		
/* Footer */

#footer{position: relative; margin-top: 50px; padding: 20px 0 110px 0; width: 900px; clear: both; border-top: 10px solid #393939;}
	#footer .col{position: relative; width: 200px; padding-right:25px; float: left; margin-bottom: 50px;}
	#footer .col address{width: 140px; font-style: normal;}
	
/* IE6 */

#ie6{position: relative; margin:0px auto; z-index: 1000; padding: 100px;}