/*
 ---------------------------------------------------------------------------------------------------------------------------
 --- Design Fact Totum - DFT - Dicembre 2009  
  
*/
 
 html, body {background: url(../img/otto.png) repeat  ;margin:0; padding:0; background-color:/*#2f2f2f*/#efefef; color:#666; 
 font-family: arial, helvetica, sans-serif; font-size:14px;line-height:140%;}
 body {text-align:center} 
 
/* --- LAYOUT ---------------------------------------------------------------------------------------------------- LAYOUT
--------------------------------------------------------------------------------------------------------------------------*/


#stick {height:26px; background-color:#bebebe; width: 100%; position:fixed; top:0; border:0;z-index:2;text-align:left;}

#silos {width: 960px;  margin:70px auto; padding:0; text-align:left;}

#testoblock {width: 940px; height: auto; padding:50px 0 2px; margin: 0 0 0 10px; float:left; border-bottom: solid 2px #efefef;} 

#main { width: 940px; float:left;color:#666; margin-left:10px; }

#fucker { border-top: solid #7D3323 0px;margin:0 ; /*background-color:#888;*/clear:both; color:/*#efefef*/#666; } 


/* --- TYPOGRAHPY -------------------------------------------------------------------------------------------- TYPOGRAHPY
--------------------------------------------------------------------------------------------------------------------------*/

h1, h2, h3, h4, h5, h6 {margin: 30px 0 20px; color:#666; }
p {margin:20px 0;}

h3 {font-size:30px;}

a, a:visited {color:#0B96BD; text-decoration:none;}
a:hover {color:#777;}

strong {font-weight:bold;}
em {font-style:italic;}
big {font-size:larger;}

h3#what{background:url(../img/inrete.png) no-repeat -4px bottom;text-indent:-9999px; width:400px; height:80px;margin-top:5px;}
h3#lork {background:url(../img/ultimo.png) no-repeat -8px bottom;text-indent:-9999px; width:400px; height:60px;margin-top:15px;}
h3#chi {background:url(../img/skillz.png) no-repeat -8px bottom;text-indent:-9999px; width:400px; height:60px;margin-top:15px;}
h4#code {background:url(../img/codice.png) no-repeat 0 center;text-indent:-9999px; width:200px; height:40px;}
h4#study {background:url(../img/studi.png) no-repeat 0 center;text-indent:-9999px; width:200px; height:40px;}
h4#programs {background:url(../img/programmi.png) no-repeat 0 center;text-indent:-9999px; width:200px; height:40px;}
h4#quest {background:url(../img/argomenti.png) no-repeat 0 center;text-indent:-9999px; width:200px; height:40px;}

legend#teft {background:url(../img/percontatti.png) no-repeat -6px center;text-indent:-9999px; width:960px; height:80px;}

/* --- TESTA ---------------------------------------------------------------------------------------------------- TESTA
--------------------------------------------------------------------------------------------------------------------------*/

#reload {float:left;border-right:0 solid #efefef;margin:20px 0 10px;}
#testoblock h1 {margin-left:0px}
#testoblock h1 a{font-size:105px; font-weight:bold; padding: 15px 139px 0px 130px;  float:left; 
line-height: normal;margin: 0;color:#7D3323; background: transparent url(../img/ottantanext.png) no-repeat left center; text-indent:-9999px;}
#claim {float:left;width:219px;background: transparent url(../img/ottantanextb.png) no-repeat left top; text-indent:-9999px;padding: 0 0 20px;
margin:-10px 0 5px 0px;}
#testoblock ul{ font-style:italic;text-transform:uppercase; font-weight:bold; padding: 20px; float:left; margin:20px 40px; font-size:18px; 
 letter-spacing: 2px;}
#testoblock li{ margin:15px 0;}

#stick-envelop {width:940px; margin: 0 auto;}
#stick p {margin:4px auto;color:#666;text-transform:uppercase;display:block;width:940px; }
#stick #numeri-telefono {position:fixed;top:0;font-size:12px;}

#mailer {padding:20px;width:900px;background-color:#7D3323;;margin:0 auto;display:none;position:relative;z-index:1000;}
a#movemailer {display:block; padding: 10px 20px 12px; background:#7D3323 url(../img/darrow.jpg) no-repeat center 25px;
font-weight:bold;position:relative;z-index:1000;float:right; margin-right:10px; 
color:#efefef;text-align:center;font-size:11px;border:solid #efefef;border-width:0 ;}
a#movemailer:hover {color:#9f9f9f; }

#stick .panel {width:940px;display:block !important;margin:0 auto;position:relative;float:none;}
#stick .panel .active{color:#0B97BE;background-image: url(../img/uparrow.jpg)}


/* --- MENU ---------------------------------------------------------------------------------------------------- MENU
--------------------------------------------------------------------------------------------------------------------------*/

#menu {width:100%; margin:-50px 0 0 0; background-color:#efefef;float:left;position:fixed;border-top:solid 0px #7D3323;top:50px }
#menu div {width:940px; margin:0 auto; }
#menu ul{margin:0 0 0 -10px;padding:0; float:left;}
#menu li{float:left; font-size:14px; font-weight:bold; text-align:center; text-transform:uppercase; margin: 0 5px 0 0 ;}
#menu a, #menu a:visited { color:#666/*#efefef*/; text-decoration:none;letter-spacing:-0.5pt; display:block; padding:5px 12px 3px;
 /*background-color:#efefef;*/ float:left;}
#menu a:hover {color:#7D3323; /*background-color:#efefef;*/ }

#menu .active a, #menu .active a:visited,  #menu .active a:hover {color:#7D3323;} 

#testoblock #ptflio-menu {display:block; float:left;margin-top:160px;padding:0;}
#ptflio-menu li{margin:15px 30px 0;padding: 5px 0 ;float:left;}
#ptflio-menu #appleclassic {background: url(../img/classic.png) no-repeat left center; padding:5px 45px;}
#ptflio-menu #traditional {background: url(../img/books.png) no-repeat left center; padding:5px 45px;}

/* --- CONTENUTI ---------------------------------------------------------------------------------------------------- CONTENUTI
--------------------------------------------------------------------------------------------------------------------------*/

#contenuto {float: left; width:960px; /*background-color:#efefef;*/padding-bottom:20px;}

#news {margin:0; width:940px; padding:0;/*background-color:#BEBEBE;*/ height:280px;  }
#news img {width:180px; height:135px; float:left; border: solid 3px #efefef; margin: 0 10px 10px 0; }
#news h3{ text-transform:uppercase; font-weight: bold; margin-bottom:10px;float:left;}
#news h4 {margin:0 0 20px;width:800px; font-weight:bold; font-size:24px;}
#news h4 a, #news h4 a:visited {color:#666}
#news h4 a:hover {color:#efefef}
.post {float:left; width:940px; margin-bottom:30px; color:#555;}
.data-post {width:140px;display:block;margin:0 0 20px;text-align:right;font-size:16px;font-weight:bold; }
#news h4, .data-post  {border-bottom: 1px dotted #efefef ;padding-bottom:6px;float:left;}
.data-post { padding-bottom:1px;padding-top:5px;}
#news .post a:hover img{border-color:#0B97BE;}

.cappion {display:none;}

#lastwork {border-top: solid 1px #7D3323; padding: 0 0 40px; margin: 0 ;float:left; width:940px;}
#lastwork h3{color:#EF0EEF;text-transform:uppercase; font-weight: bold; margin-bottom:0;}
#lastwork p{float:left;  margin:0;}
#lastwork img{float:right; width:330px; height:200px; border: solid 4px #fff;margin-top:0;}
#lastwork a:hover img{border-color:#0B96BD}
#lastwork ul {width:560px; float:left; font-size:16px;}
#lastwork ul li{margin: 5px 0;}
#lastwork ul li.first{padding: 8px 0;border-bottom:solid 1px #efefef; margin:0 0 30px;}
#lastwork ul li.first a {font-size:20px;  color:#777;}
#lastwork ul li.first a:hover { color:#fff;}
#lastwork .desc {margin-bottom:10px;}

#checosa {border-top: solid 1px #7D3323; padding: 0 0 80px; margin: 0 ;float:left; width:940px;}
#checosa h3{ color:#00DF72; text-transform:uppercase; font-weight:bold; margin-bottom:0;}
#checosa ol {width:460px; overflow:hidden;float:left;}
#checosa ol li{ float: left; width:460px; margin:20px 0 10px 0; display: inline; border-bottom:1px dotted #7D3323;padding:0 0 6px;
 font-size:22px;letter-spacing:-1px;font-weight:bold; }
#checosa ol  a, #checosa ol  a:visited{ width:96%;color:#0B97BE; }
#checosa ol  a:hover {border-top: solid 2px #7D3323; color:#666;}

#checosa em{font-size:12px; font-weight:normal; font-style:italic;letter-spacing:normal;}

.opera {float:left; margin: 20px 10px 40px 10px; width:220px;border:0px solid red;display:inline; height:300px;}
.last { margin: 20px 0 40px 10px; }
.opera img {border:solid 4px #fff; width:212px; height:152px;}
.opera ul {margin: 20px 0; padding: 0 0 0 10px; border-left: solid 1px #666;}

#main .skill {border-bottom: solid 1px #7D3323; float:left; width:940px;margin:30px 0 0; padding: 0 0 20px }
#main .skill h4{float:left; margin:0 40px 0 0;font-size:20px; font-weight:bold;color:#0B97BE;letter-spacing:-1pt;}
#main .skill ul {float:left; margin:0 0 5px 25px; font-size:16px;}
#main .skill ul li { margin: 0 0 10px;font-weight:bold;}
#main .skill ul li em { margin: 0 22px 0 18px;font-weight:normal;}

#print, #web {width:940px;border-top:solid 1px #7D3323;float:left;margin: 0 10px;}
.subport {font-size:18px;margin-left:10px; }
#web { border-top:solid 0 #7D3323;}
#web h3, #print h3 {margin: 20px 0 0; color:#0B97BE;float:left;width:800px;padding:20px 0;text-indent:-9999px;}
#print span {margin: 20px 10px;float:right;}
#web h3 { background: url(../img/webbe.png) no-repeat left center;}
#print h3 { background: url(../img/graff.png) no-repeat left center;}

/* --- FOOTER ---------------------------------------------------------------------------------------------------- FOOTER
--------------------------------------------------------------------------------------------------------------------------*/

#fucker-content { width:940px;margin:10px auto 0 ; height:160px; text-align:left;border-top: solid #7D3323 2px;} 
#fucker-content img{float:left; margin:5px 0 10px;} 
#fucker ul { margin:10px 0 0 -5px;float:left;text-transform:capitalize;}
#fucker ul li{float:left; margin: 0 20px 0 0;}
#fucker ul li a, #fucker ul li a:visited{color:#777;border-bottom: none;}
#fucker ul li a:hover{color:#fff;}
#fucker p{float:left; margin:10px 0  10px 0;}
#fucker .right {float:right;text-align:right;width:600px; margin-top:10px;}
#fucker a, #fucker a:visited {color:#777;border-bottom: dotted 1px #777;padding-bottom:1px; margin:0 4px;}
#fucker a:hover {border-bottom: none;}
#fucker .right img {float:none; margin: 5px 0 0 10px;}

/* --- CONTACT FORM ----------------------------------------------------------------------------------------- CONTACT FORM
--------------------------------------------------------------------------------------------------------------------------*/

#mailer label, #sendmail label {width:250px; display:block;float:left;color:#efefef;font-size:18px;}
#sendmail label {color:#666; font-size:30px;font-weight:bold;width:420px;padding-top:5px;}
#mailer label span, #sendmail label span{color:#0B97BE;}
#mailer input, #sendmail input, #mailer textarea, #sendmail textarea {padding:10px;width:350px;border:0; background-color:#efefef; margin-left:20px;}
#sendmail input, #sendmail textarea  {padding:15px;width:400px;font-size:18px;margin-left:90px;}
#mailer div { padding: 0 20px 20px}

#mailer ul {float:left; width:640px;}
#sendmail ul {margin:60px 0;}
#mailer ul li, #sendmail ul li{margin:20px 0 0;}
#sendmail ul li{display:block; }
#mailer legend{font-size:18px;margin:0 0 20px;padding:0;color:#0B97BE;letter-spacing:0;line-height:180%;text-transform:uppercase;
background: url(../img/pecont.pg) no-repeat 200px center;float:left; }
#mailer img, #mailer legend img {float:left;margin-right:30px;}

#mailer input#submit, #mailer input#stringa, #mailer input#reset, 
#sendmail input#submit, #sendmail input#stringa, #sendmail input#reset {width:100px;}
#mailer input#stringa {width:80px;}
#sendmail input#stringa {padding:8px;font-size:14px;margin-left:40px; margin-right:0;}
#sendmail input#submit, #sendmail input#reset  {float:left;font-size:14px;background-color:#7D3323;
color:#EFEFEF;padding:10px;width:auto;margin-left:20px;margin-right:0;}
#sendmail h3 {line-height:140%; color:#0B97BE;}

#mailer h3 img {display:block;float:left; margin-right:30px;}
#mailer strong {font-size:30px; }
#mailer em {font-size:28px; /*display:block;*/}
#mailer big {font-size:45px; padding:0 0 0 20px}

#mailer #gomail  {float:left;margin:8px 0 0 30px; border-left:1px solid #efefef; padding:95px 0 15px 10px; }
#mailer #gomail ul {width:auto;}
#mailer #gomail  img{margin:0 0 10px 20px;}
#mailer  span {color:#fff;}

#sendmail #gomail  {margin:-30px 0 40px 0;width:940px;padding-bottom:40px; border-top:solid 1px #7D3323}
#sendmail #gomail img  {display:block; float:left; margin-left:680px; }
#sendmail #gomail ul  {margin:20px 0 80px;width:auto; }
#sendmail #gomail ul  li {margin:20px 0 0 0;display:block;}

#mailer label.error { float: left; margin-left:270px; font-size:11px; color:#0B97BE; width: auto; display:inline; }
#sendmail label.error { float: none; margin-left:510px; font-size:18px; color:#0B97BE; width: auto; padding-top:5px; }

#sendmail input#reset {margin-left:758px;}

/* --- SLIDESCIO ----------------------------------------------------------------------------------------- SLIDESCIO
--------------------------------------------------------------------------------------------------------------------------*/

#carousel_container {margin: 0px 60px 0 0;float:right;}
#carousel_inner {
float:left; /* important for inline positioning */
width:500px; /* important (this width = width of list item(including margin) * items shown */ 
overflow: hidden;  /* important (hide the items outside the div) */
/* non-important styling bellow */
border-left: solid 0 #efefef;
background: url(../img/carbi.png) no-repeat left center;
/*-moz-border-radius: 5px;
-webkit-border-radius: 5px;*/
padding:10px 0 60px;
}

#testoblock ul#carousel_ul {
position:relative;
left:-500px; /* important (this should be negative number of list items width(including margin) */
list-style-type: none; /* removing the default styling for unordered list items */
margin: 10px 0 0 0;
padding: 0px; 
width:9999px; /* important */
/* non-important styling bellow */
padding-bottom:0;
}

#testoblock ul#carousel_ul li{
float: left; /* important for inline positioning of the list items */                                    
width:500px;  /* fixed width, important */
/* just styling bellow*/
padding:0;
height:140px;
margin-top:10px;
margin-bottom:0; 
margin-left:0; 
margin-right:5px;
text-align:center; 
}

#carousel_ul li img {
/*margin-bottom:-4px;  IE is making a 4px gap bellow an image inside of an anchor (<a href...>) so this is to fix that*/
/* styling */
cursor:pointer;
/*cursor: hand; */
border:0px; 

}
#left_scroll, #right_scroll{
float:left; 
height:150px; 
width:15px; 

}

#left_scroll img, #right_scroll img{
border:0; /* remove the default border of linked image */
/*styling*/
cursor: pointer;
/*cursor: hand; */
margin-top:105px;
}

/* --- TWITTER ------------------------------------------------------------------------------------------------- TWITTER
--------------------------------------------------------------------------------------------------------------------------*/

#twitter_div img {margin-top:0;}
#twitter_div h6 {margin:0 8px 0 0;width:auto;color:#0B97BE;float:left;font-weight:bold;padding-top:7px;font-size:13px;}
#twitter_div {float:left; border-top:solid 2px #7D3323; display:block; width:940px;padding: 4px 0 0;line-height:100%;font-size:12px;}
#testoblock #twitter_div ol {padding-top:7px;}
#testoblock #twitter_div ol li {font-size: 1em;margin: 0 ;padding: 0; background: url('twitter-li.gif') no-repeat 0 7px;
color: #4e4e4e;display: block;}
#twitter_div li a {color: #777;}
#twitter_div li a:hover {color: #888;}