/*******************
	{colors palette}
	orange: ff9600
	light orange: ffd599
	
	dark grey: 171717		[main text]
	middle grey: 3f3f3f
	light grey: dfdfdf
	
	dark blue: 507ebe
	
*/
body,
div,
ul, li,
dd, dt, dl,
p, h1, h2, h3, h4,
form, fieldset, input, textarea, label{
	margin: 0;
	padding: 0;
}
li{ list-style: none;}


body{
	position: relative;
	color: #171717;
	background: #FFF url("../images/bg-body.gif") repeat-x bottom left;
	font-family: Arial, "MS Trebuchet", sans-serif;
	font-size: 0.81em; /* ~13px */
	line-height: 1.5em;
}

.cloak{
	position: absolute;
	top: -9999px;
	left: -9999px;
}

/**************************
 = skip to content */
#skip-to-content{
	margin-left: 10px;
}
#skip-to-content a{
	color: #FFF;
	border: none;
	font-weight: normal;
}
#skip-to-content a:hover{
	color: #FF9600;
}
/**************************
 = headings */
h1{
	/*font-size: 1.13em; /* ~18px */
}
h2{
	color: #4475b9;
	font-size: 1.54em; /* ~20px ; 4,8pt */
}
h3{
	color: #4475b9;
	font-size: 1.23em; /* ~16px ; 3,84pt */
}

/**************************
 = links */
a, a:active, a:visited{
	color: #FF9600;
	font-weight: bold;
	text-decoration: none;
}
a:hover{ 
	color: #FFD599;
	border-bottom: 2px solid #FFD599;
}
:-moz-any-link:focus {
outline-width: 0;
}

/**************************
 = generic wrapper */
.wrapper{
	position: relative;
	width: 750px;
	margin: 0 auto;
}




/**************************
 = header */
#header{
	height: 185px;
	background: #1755a9 url("../images/bg-header.jpg") repeat-x top left;
	margin-bottom: -30px;
}
#header .wrapper{
	height: 185px;	
	padding-top: 0;
}
#header h1,
.sub-header-one,
.sub-header-two{
	position: absolute;
	background: transparent repeat-x top left;		
	text-indent: -999%;
}
#header h1{
	bottom: 56px;
	left: 212px;
	width: 192px;
	height: 64px;
	background-image: url("../images/text-teotti.gif");	
}
#blog #header h1{
	bottom: 38px;	
	left: 112px;	
	background-image: url("../images/text-teolog.gif");	
	width: 316px;
	height: 110px;	
}
	
.sub-header-one{
	bottom: 45px;
	left: 458px;
	height: 24px;
}
#software-dev{ 
	width: 208px;	
	background-image: url("../images/text-software-dev.gif"); 
}
#enrico-blog{ 
	width: 171px;
	background-image: url("../images/text-enrico-blog.gif"); 
}

.sub-header-two{
	bottom: 0px;
	left: 458px;	
	height: 24px;	
}
#web-des{ 
	width: 110px;	
	background-image: url("../images/text-web-des.gif"); 
}
#pensieri-liberi{ 
	width: 124px;
	background-image: url("../images/text-pensieri-liberi.gif"); 
}

/**************************
 = container */
#container{
	/* crossbrowser min-height */ min-height: 600px;height: auto !important;height: 600px;
	background: transparent url("../images/content-wrapper.gif") no-repeat -50px 0px;
	padding-top: 93px;
}


/**************************
 = content-background */
.content-background{
	/* crossbrowser min-height */ min-height: 600px;height: auto !important;height:600px;
	float: left;
	background: transparent url("../images/bg-content-background.gif") repeat-y 210px 0;
}


/**************************
 = left-column */
#left-column{
	float: left;
}


.couple-of-boxes{
	background: transparent url("../images/bg-couple-of-boxes.jpg") no-repeat 0 20px;
	width: 210px;
}

/**************************
 = box */
.box{
	width: 173px;
	padding-bottom: 10px;
	margin: 0 15px 10px 22px;
	background: #ff9600 url("../images/bg-box.gif") no-repeat bottom left;
	overflow: hidden;
}
.box.last{
	margin-bottom: 50px;
}
.box h3{
	width: 173px;
	text-align: center;
	/* crossbrowser min-height */ min-height: 21px;height: auto !important;height:21px;
	/*line-height: 21px;*/
	background: #ffd599 url("../images/bg-box-header.gif") no-repeat top left;	
}

.box .loading{	
	width: 173px;
	margin-top: 10px;
	text-align: center;
	color: #ffd599;
}
/**************************
 = box :: twitter */
#twitter h3{ color: #33CCFF; }
#twitter a, #twitter a:visited, #twitter a:active, #twitter a:hover{
	color: #33CCFF;
	padding: 1px 3px;
	border: none;
	background-color: #3f3f3f;		
}
#twitter ul{
	margin: 5px 10px;
	padding-top: 5px;
}
#twitter ul li{
	background: transparent url("../images/apice-orange.gif") no-repeat top left;
	padding-bottom: 10px;
	margin-top: 0px;
	text-indent: 35px;	
}
/**************************
 = box :: flickr */
#flickr h3{color: #0063DC;}
#flickr h3 span{color: #FF0084;}
#flickr a{
	display: block;
	width: 85px;
	height: 85px;	
	margin: 0 auto;
	border: none;	
	background: transparent url("../images/image-bg.gif") no-repeat top left;
}
#flickr a img{
	margin: 0;
	padding: 5px;
	border: none;
}
/**************************
 = box :: curriculum */
#curriculum h3{ color: #171717; }
#curriculum a, #curriculum a:visited, #curriculum a:active{
	color: #171717;
	padding-left: 20px;
	border: none;
}
#curriculum a:hover{ color: #3f3f3f;}

#curriculum ul{
	margin: 5px 10px;
	padding-top: 5px;
}
#curriculum ul li{
	height: 16px;
	line-height: 16px;
	margin-bottom: 3px;
	background-color: transparent;
	background-position: top left;
	background-repeat: no-repeat;
}
#curriculum ul li.word{	background-image: url("../images/word.png"); }
* html #curriculum ul li.word{
	background-image:none !important;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/word.png',sizingMethod='crop');	
}
#curriculum ul li.acrobat{	background-image: url("../images/acrobat.png"); }
* html #curriculum ul li.acrobat{
	background-image:none !important;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/acrobat.png',sizingMethod='crop');	
}


/**************************
 = nav-bar */
#nav-bar{
	width: 210px;
	min-height: 326px;
	height: 326px !important;
	background: transparent url("../images/bg-nav-bar.gif") no-repeat -1px bottom;
}
* html #nav-bar{ height: 241px; }
#nav-bar li a{
	display: block;
	width: 210px;
	height: 37px;
	text-indent: -9999px;	
	background-color: transparent;
	background-repeat: no-repeat;
	background-image: url("../images/navbar-sprite.gif") ;
}
#nav-bar li a:hover{ border-bottom: none; }

/**************************
 = nav-bar :: items */
#nav-bar li#about_me a{ background-position: -1px 0; }
#nav-bar li#portfolio a{ background-position: -1px -37px; }
#nav-bar li#contact_me a{ background-position: -1px -74px; }
/* items :: hover */
#nav-bar li#about_me a:hover{ background-position: -212px 0; }
#nav-bar li#portfolio a:hover{ background-position: -212px -37px; }
#nav-bar li#contact_me a:hover{ background-position: -212px -74px; }
/* items :: selected */
#nav-bar li#about_me a.selected, #nav-bar li#about_me a.selected:hover{	background-position: -423px 0; }
#nav-bar li#portfolio a.selected, #nav-bar li#portfolio a.selected:hover{ background-position: -423px -37px; }
#nav-bar li#contact_me a.selected, #nav-bar li#contact_me a.selected:hover{ background-position: -423px -74px; }

/**************************
 = nav-bar :: blog item */

#nav-bar li#blog a{ 
	height: 85px;
	background-image: url("../images/blog-link-sprite.gif") ;
	background-position: -1px 0;
}
#nav-bar li#blog a:hover{ background-position: -211px 0; }


/**************************
 = blog nav-bar :: items */
#blog #nav-bar{
	min-height: 211px;
	height: 211px !important;
}
#blog #nav-bar li a{
	background-image: url("../images/blog-navbar-sprite.gif");
}
/**************************
 = nav-bar :: items */
#blog #nav-bar li#the-blog a{ background-position: -1px 0; }
#blog #nav-bar li#archive a{ background-position: -1px -37px; }
#blog #nav-bar li#homepage a{ background-position: -1px -74px; }
/* items :: hover */
#blog #nav-bar li#the-blog a:hover{ background-position: -212px 0; }
#blog #nav-bar li#archive a:hover{ background-position: -212px -37px; }
#blog #nav-bar li#homepage a:hover{ background-position: -212px -74px; }
/* items :: selected */
#blog #nav-bar li#the-blog a.selected, #blog #nav-bar li#the-blog a.selected:hover{	background-position: -423px 0; }
#blog #nav-bar li#archive a.selected, #blog #nav-bar li#archive a.selected:hover{ background-position: -423px -37px; }
#blog #nav-bar li#homepage a.selected, #blog #nav-bar li#homepage a.selected:hover{ background-position: -423px -74px; }

/**************************
 = content */
#content{
	position: relative;
	float: right;
	width: 500px;
	padding: 0 13px;
	padding-top: 30px;
	padding-bottom: 50px;
	border: 7px solid #ffd599;
	border-top: none;
	border-bottom: none;
}
/* first header in the content */
#content .title{
	position: absolute;
	top: 0;
	left: -7px;
	width: 540px;	
	background: transparent url("../images/bg-content-h2.gif") no-repeat 0 0;
	padding: 20px 0 0 20px;
}
/**************************
 = content :: story */
#content .story h3{
	margin: 0 0 10px 0;
	border-bottom: 3px solid #4475b9;
}
#content .story{
	padding-top: 20px;
}
#content .story p{
	padding-bottom: 10px;
}
#content .story p:first-child,
#contact-form-intro{
	padding-top: 10px;
	text-indent: 35px;
	background: transparent url("../images/apice.gif") no-repeat top left;	
}
#content .story ul{
	margin: -10px 0 10px 0;
}
#content .story li{
	list-style: disc;
	margin-left: 15px;
}

/* bottom of the page */
#content #bottom{
	position: absolute;
	bottom: 0;
	width: 540px;	
	left: -7px;
	background: #FFF url("../images/bg-bottom.gif") no-repeat 0 0;
	padding: 0 0 20px 10px;
}

/* delicious tags styles override */
.delicious-tags ul{
	margin: 10px 0 0 0 !important;
}
.delicious-tags a:hover{
	border: none;
}

/**************************
 = story :: contact-form */
#contact #content{
	width: 510px;
	padding: 0 8px;
}
/* remove standard styles */
#content .contact-form form p:first-child{
	background: none;
	padding: 0;
	text-indent: 0;
	color: red;
}
/* hide the header */
#contact #content .title h2{
	color: #FFF;
}
/* increase spacing to show form header */
#content .contact-form{
	padding-top: 40px;	
}
#content .contact-form form{
	background: #FFF url("../images/bg-form.gif") repeat-y 0 0;
}
/* contact-form :: header */
#content .contact-form form p.header{
	height: 10px;
	line-height: 10px;
	margin-bottom: 10px;	
	background: #FFF url("../images/bg-form-header.gif") no-repeat 0 0;
}
/* contact-form :: generic form line */
#content .contact-form form p{
	height: 20px;
	margin: 0 0 14px 0;	
	padding: 0 0 0 15px;
	clear: both;
}
.contact-form form p#message-line{ height: auto; }

.contact-form input{
	height: 20px;
	width: 140px;
	padding: 2px 5px;
	border: 0;
	background: transparent url("../images/bg-message.gif") top left no-repeat;	
}
	
.contact-form p label{	float: left; }
.contact-form p input{	float: left; }

/* contact-form :: label */
.contact-form label{
	display: block;
	width: 70px;
	height: 20px;
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: bottom left;
}
.contact-form #name-line label{	background-image: url("../images/text-name.gif"); }
.contact-form #email-line label{ background-image: url("../images/text-email.gif"); }

/* contact-form :: message-line */
.contact-form #message-line label{	
	float: none;	
	width: 83px;
	background-image: url("../images/text-message.gif");
}
.contact-form #message-line textarea{
	width: 475px;
	height: 96px;
	overflow: hidden;
	padding: 2px 5px;
	border: 0;
	background: transparent url("../images/bg-message.gif") top left no-repeat;
}

/* contact-form :: bottom */
#content .contact-form form p.bottom{
	float: none;
	position: relative;
	height: 71px;	
	background: #FFF url("../images/bg-form-bottom.gif") no-repeat bottom left;
}
.contact-form .bottom input{
	position: absolute;
	right: 5px;
	bottom: 5px;
	width: 188px;
	height: 71px;
	padding: 0;
}
* html .contact-form .bottom input{ bottom: 4px; }

/* contact-form :: warning and success */
.warning,
.sent{
	/* crossbrowser min-height */ min-height: 130px;height: auto !important;height: 130px;
	background: #FFF url("../images/comment_bubble.jpg") no-repeat top left;	
	padding-left: 130px;
}
.sent{ background-image: url("../images/send_email.jpg"); }
.warning li {
	color: #FF0000;
	list-style: square !important;	
}

/**************************
 = content {portfolio} */
dl.portfolio{
	width: 394px;
	margin: 0 auto;
}
dl.portfolio dt{
	color: #4475b9;
	margin-top: 20px;
	margin-bottom: 5px;
	font-size: 1.54em;
}
dl.portfolio dt span{
	display: block;
	font-size: 0.5em;
}
dl.portfolio dd img{
	padding: 3px 3px 18px 3px;
	border: 1px solid #dfdfdf;
}
dl.portfolio dd a:hover{
	border: none;
}

/**************************
 = bottom */
#bottom{
	position: relative;
	height: 30px;
	clear: both;
	background: transparent url("../images/bg-bottom.gif") no-repeat 210px 0;
}
#bottom #validation #xhtml,
#bottom #validation #css{
	padding: 0;margin: 0;
	position: absolute;
	top: -20px;
	display: block;
	height: 14px;
	line-height: 14px;		
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: 0 0;
	text-indent: -9999px;
}

#bottom #validation #xhtml{
	left: 230px;
	width: 79px;
	background-image: url("../images/valid-xhtml.gif");
}
#bottom #validation #css{
	left: 330px;
	width: 66px;
	background-image: url("../images/valid-css.gif");
}


#bottom #copyright{
	position: absolute;
	top: -20px;
	left: 550px;
	color: #507ebe;
}



body > #reflection{
	z-index: 0;
	position: absolute;
	right: 0;
	bottom: 0;
	width: 381px;
	height: 396px;
	background: transparent url("../images/bg-reflection.jpg") no-repeat 0 0;	
}

/* Opera hacks */
@media all and (min-width:0px) {
		head~body:lang(en) #email-line input,
		head~body:lang(en) #name-line input{ height: 16px;}
}