/*--------------------------------------------

INTERSEZIONE
- - - - - - - - - - - - - - - - - - - - - - - - - - -
Description:	Base setup styles
Filename:		intersezione.css
Theme Name:		duepuntozero theme
Theme URI:		http://www.intersezione.com
Version:		2 beta
Date:			MAG 6, 2008
Author:			Intersezione srl
Company:		Intersezione srl
Please: 
    
/*=========================================================================================== Global Reset */

* {
	margin:0;
	padding:0;
}

html,body{
	margin:0;
	padding:0;
}

body {
	font-size:100%;
	font-family: Arial, Verdana, sans-serif;
	color:#000;
	background: url(/img/bg-body.gif) top left repeat-y #1a1a1a;
}

img {
	border: 0;
}

a:link,a:visited {
	color: #FF9900; 
	text-decoration: none;
}

a:hover {
	color:#c00;
	text-decoration: none;
}

a:focus{
	outline:0; 
}

h1,h2,h3,h4,h5,h6 {
	margin: 0;
	padding: 0;
}

h1 {
	position: absolute;
	top: -99999px;
	left: -99999px;
}

h2 {
	font-size: 180%;
}

h3 {
	font-size: 150%;
}

h4 {
	font-size: 140%;
}

h5 {
	font-size: 120%;
}

h6 {
	font-size:100%;
}

p {
}	

::-moz-selection {
	background:#ccc;
	color:#000;
}

::selection {
	background:#fff;
	color:#000;
}

.social{
	display:none;
	visibility:hidden;
}

.cufon-loading .replaceme {
	visibility: 	hidden !important;
	height:			10px;
}

cufon cufontext {
	visibility:		hidden!important;
}

cufon cufontext{
	display:none;
	visibility:hidden;
}



/*=========================================================================================== Layout generale */

#container-extra{
	width:990px;
	float:left;
}

#container-extra #all{
	width:990px;
	clear:both;
	float:left;
	margin-bottom:20px;
}

#container-extra #top{
	width:990px;
	clear:both;
	float:left;
}

#container-extra .casehistory{
	width:990px;
	clear:both;
	float:left;
}

#container-extra #bottom{
	width:990px;
	clear:both;
	float:left;
	margin-bottom:20px;
	display:inline;
}

#container-extra .box-sx{
	width:700px;
	float:left;
	display:inline;
}

#container-extra .box-dx{
	width:200px;
	float:left;
	display:inline;
}

* html #container-extra .box-dx{
	width:200px;
}

.insider{
	padding:10px 25px;
	float:left;
}

#bottom .insider{
	padding:0 25px;
}

#top .insider{
	height:200px;
	background-position:25px 10px;
	background-repeat:no-repeat;
	overflow:hidden;
	width:100%;
}

.casehistory .box-sx{
	margin-top:-20px;
}

.casehistory .insider{
	background: url(/img/bg-banner.gif) bottom center no-repeat;
	float:left;
	display:inline;
	padding-bottom:35px;
}

.casehistory .backgrounder{
	background: url(/img/bg-banner-top.gif) top center no-repeat;
	float:left;
	display:inline;
	padding-top:25px;
	height:250px;
	width:650px;
	position:relative;
}

/*=========================================================================================== HEADER*/

#all #header{
	background: url(/img/bg-header.gif) top left no-repeat #fff;
	float:left;
	width:650px;
	height:100px;
	clear:both;
	bor der-bottom:2px solid #666;
	margin-bottom:10px;
}

#all #header #logo{
	float:left;
	display:inline;
	width:100px;
	overflow:hidden;
}

#all #header #logo h2 a{
	display:block;
	width:100px;
	height:75px;
}

#all #header #logo h2 span{
	position:absolute;
	top:-989898px;
	left:-989898px;
}

#all #header #navigator{
	float:right;
	display:inline;
	width:530px;
	overflow:hidden;
}

#all #header #navigator ul#mainmenu{
	float:left;
	clear:both;
	margin:0;
	margin-top:58px;
	padding:0;
}

#all #header #navigator ul#mainmenu li{
	float:left;
	display:inline;
	list-style-type:none;
}

#all #header #navigator ul#mainmenu li a{
	font-size:16px;
	font-weight:bold;
	text-transform:uppercase;
	padding-right:10px;
	color:#afafaf;
	color:#666;
}

#all #header #navigator ul#mainmenu li a:hover{
	color:#FF9900;
}

#all #header #navigator ul#submenu{
	float:left;
	display:block;
	margin:0;
	padding:0;
	clear:both;
	width:450px;
}

#all #header #navigator ul#submenu li{
	float:left;
	display:inline;
	list-style-type:none;
}

#all #header #navigator ul#submenu li a{
	font-size:14px;
	font-weight:bold;
	text-transform:uppercase;
	padding-right:10px;
	color:#afafaf;
}

#all #header #navigator ul#submenu li a:hover{
	color:#000;
}

#all #tree{
	float:left;
	clear:both;
	width:650px;
	font-size:10px;
	color:#999;
	text-transform:lowercase;
	text-align:right;
	display:none;
	visibility:hidden;
}

#all #titolo{
	float:left;
	clear:both;
	width:650px;
}

#all #titolo h3{
	font-size:18px;
	color:#fff;
	background:#000;
	padding:2px 3px;
}

#all #titolo h4{
	font-size:12px;
	color:#666;
	background:#fff;
	padding:2px 18px;
	margin-top:10px;
}

#all #titolo-int{
	float:left;
	clear:both;
	width:650px;
	margin-top:10px;
}

#all #titolo-int h3{
	font-size:16px;
	color:#fff;
	background:#000;
	padding:0 3px;
	padding-top:6px;
	padding-bottom:2px;
	text-align:left;
	text-transform:uppercase;
}
#all #titolo-int h4{
	font-size:20px;
	color:#666;
	padding:2px 3px;
	text-align:left;
	text-transform:uppercase;
}

#all #titolo-int h5{
	font-size:10px;
	color:#fff;
	text-transform:uppercase;
	background:#000;
	padding:0 3px;
	padding-bottom:2px;
	text-align:left;
	font-weight:normal;
}





/*=========================================================================================== CONTENT */

#all #content{
	float:left;
	clear:both;
	width:650px;
}

#all #content #type{
	float:left;
	display:inline;
	width:250px;
}

#all #content #type ul{
	width:200px;
}

#all #content #type ul li{
	margin-bottom:3px;
	list-style-type:none;
}

#all #content #type ul li a{
	display:block;
	color:#000;
	font-size: 11px;
	padding:3px;
}

#all #content #type ul li a.por-traditional-ad{
	background:#eee03f;
}

#all #content #type ul li a.por-web-design{
	background:#bb4788;
}

#all #content #type ul li a.por-flash-design{
	background:#f28f1a;
}

#all #content #type ul li a.por-flash-game{
	background:#6d9ec7;
}

#all #content #type ul li a.por-firm-identity{
	background:#8cbc34;
}

#all #content #type ul li a:hover{
	background:#f5f5f5;
}


#all #content #list{
	float:left;
	display:inline;
	width:400px;
}

#all #content #list ul{
	float:left;
	display:inline;
	width:200px;
}

#all #content #list ul li{
	list-style-type:none;
	margin:0;
	padding:0;
}

#all #content #list ul li a{
	font-size:10px;
	display:block;
	clear:both;
	color:#333;
	line-height:14px;
	min-height:14px;
	height:auto!important;
	height:14px;
	margin-bottom:5px;
}

#all #content #list ul li a:hover{
	color:#FF9900;
}

#job,
#explain{
	clear:both;
	float:left;
	width:650px;
	display:inline;
	margin-top:15px;
}

#explain{
	width:630px;
	padding:10px;
	font-size:12px;
	line-height:16px;
	background:#EFEFEF;
}

#explain img{
	vertical-align:middle;
	margin-bottom:-1px;
}

.job-repeater{
	float:left;
	display:inline;
	margin-bottom:20px;
	overflow:hidden;
	position:relative;
	width:195px;
	font-size:12px;
	color:#666;
	line-height:16px;
	height:315px;
	padding:10px;
}

.forms{
	background:#efefef;
	float:right;
}

.name h4{
	font-size:14px;
	color:#999;
}

.forms label{
	margin-top:10px;
	font-size:11px;
	display:block;
}

.forms input{
	border:1px solid #999;
	display:block;
	font-size:11px;
	width:190px;
}

.forms textarea{
	border:1px solid #999;
	display:block;
	font-size:11px;
	width:190px;
}

.forms input.button{
	border:1px solid #000;
	display:block;
	margin-top:15px;
	font-weight:bold;
	background:#333;
	color:#fff;
	width:100px;
}

.job-repeater .job-role{
	float:left;
	display:inline;
	margin-bottom:10px;
	overflow:hidden;
	position:relative;
	width:190px;
	font-size:11px;
}

.job-repeater .job-about{
	float:left;
	display:inline;
	margin-bottom:10px;
	overflow:hidden;
	position:relative;
	width:200px;
	color:#000;
}

.repeater{
	float:left;
	display:inline;
	height:200px;
	padding-left:10px;
	margin-bottom:20px;
	overflow:hidden;
	position:relative;
	width:200px;
}

.repeater .name{
}

.repeater .name h4{
	font-size:20px;
	color:#FF9900;	
	text-align:center;
	margin-top:5px;
}

.repeater .pix{

}

.repeater .pix img{
	border-bottom:1px solid #666;
}

.hilight .pix img {
	border-bottom:5px solid #666!important;
}

.repeater .role{
	color:#333;
	margin-bottom:10px;
	font-size:11px;
	text-align:center;
	font- style:italic; 
}

.repeater .about{
	color:#000;
	margin-bottom:5px;
	font-size:11px;
	line-height:18px;
	background: url(/img/cite.gif) top left no-repeat;
	float:left;
	width:200px;
	min-height:50px;
	height:auto!important;
	height:50px;
	display:none;
	visibility:hidden;
}

.repeater .about h5{
	color:#666;
	text-align:right;
	line-height:14px;
	width:150px;
	float:right;
}


#explain-contatti{
	width:300px;
	float:left;
	display:inline;
	margin-top:10px;
	padding:0;
	font-size:12px;
}

.job-form{
	background:#efefef;
	width:195px;
	float:right;
	display:inline;
}

.form-contatti{
	float:right;
	width:215px;
	display:inline;
	margin-top:5px;
}

.form-contatti .job-form{
	background:#efefef;
	width:195px;
	float:right;
	display:inline;
	padding:10px;
	margin-top:10px;
}

.job-form label{
	margin-top:10px;
	font-size:11px;
	display:block;
	color:#666666;
}

.job-form input{
	border:1px solid #999;
	display:block;
	font-size:11px;
	width:195px;
}

.job-form textarea{
	border:1px solid #999;
	display:block;
	font-size:11px;
	width:195px;
}

.job-form input.button{
	border:1px solid #000;
	display:block;
	margin-top:15px;
	font-weight:bold;
	background:#333;
	color:#fff;
	width:100px;
}


/*=========================================================================================== CASE HISTORY HOME */

.cases{
	float:left;
	clear:both;
}

.cases-int{
	float:left;
	clear:both;
}

.cases .header {
	float:left;
	width:650px;
	margin-top:-65px;
	z-index:100;
	position:relative;
}

.cases .header .title{
	float:left;
	width:500px;
}

.cases .header .title h2{
	font-size:18px;
	color:#fff;
	padding-left:18px;
	margin-top:5px;
}

.cases .header .title h3{
	font-size:14px;
	color:#fff;
	padding-left:18px;
	font-weight:normal;
}

.cases-int .header .title h2{
	background:#000000 none repeat scroll 0 0;
	color:#FFFFFF;
	font-size:16px;
	padding:2px 3px;
}
.cases .header .details,
.cases-int .header .details{
	float:right;
}

.cases .header .details span,
.cases-int .header .details span{
	position: absolute;
	top:-999999px;
	left:-999999px;
}

.cases .header .details a,
.cases-int .header .details a{
	float:right;
	width: 24px;
	height:24px;
	display:block;
	position:relative;
	z-index:150;
}

.cases-int .header .details a{
	margin-bottom:-24px;
	background-color:#000;
}

.cases .header .details a.det-traditional-ad,
.cases-int .header .details a.det-traditional-ad{
	background: url(/img/icon-traditional.gif) top left no-repeat;
}

.cases .header .details a.det-web-design,
.cases-int .header .details a.det-web-design{
	background: url(/img/icon-webdesign.gif) top left no-repeat;
}

.cases .header .details a.det-flash-design,
.cases-int .header .details a.det-flash-design{
	background: url(/img/icon-flash.gif) top left no-repeat;
}

.cases .header .details a.det-event-design,
.cases-int .header .details a.det-event-design{
	background: url(/img/icon-event.gif) top left no-repeat;
}

.cases .header .details a.det-firm-identity,
.cases-int .header .details a.det-firm-identity{
	background: url(/img/icon-identity.gif) top left no-repeat;
}

.cases .header .details a.det-grafica-e-impaginazione,
.cases-int .header .details a.det-grafica-e-impaginazione{
	background: url(/img/icon-grafica.gif) top left no-repeat;
}

.cases .header .details a.det-character-design,
.cases-int .header .details a.det-character-design{
	background: url(/img/icon-character.gif) top left no-repeat;
}

.cases .header .details a.det-e-commerce,
.cases-int .header .details a.det-e-commerce{
	background: url(/img/icon-marketing.gif) top left no-repeat;
}

.cases .header .details a:hover,
.cases-int .header .details a:hover{
	background-color:#000;
}

.cases .content{

}

.cases .content .banner,
.cases-int .content .banner{
	display:inline;
	width:650px;
	height:250px;
	overflow:hidden;
}

html>body .cases-int .content .banner{
	float:left;
}

.cases-int .content .banner{
	background: url(/img/bg-banner.gif) bottom center no-repeat;
	padding-bottom:36px;
}

.cases-int .content .banner-browser{
	float:left;
	display:inline;
	width:650px;
	height:503px;
	overflow:hidden;
	background: url(/img/bg_site.gif) top left no-repeat;
	margin-top:10px;
	margin-bottom:10px;
}

.cases-int .content .banner-browser #title-browser{
	float:left;
	display:inline;
	width:640px;
	margin-left:5px;
	height:29px;
	overflow:hidden;
	text-align:center;
}

.cases-int .content .banner-browser #title-browser h2{
	font-size:14px;
	margin-top:13px;
	color:#232323;
	font-weight:normal;
}

.cases-int .content .banner-browser .screenshot{
	float:left;
	display:inline;
	width:640px;
	height:452px;
	margin-left:5px;
	overflow:hidden;
}

.cases-int .content .banner-browser .screenshot img{
	width:640px;
	height:452px;
}

.cases .content .banner img,
.cases-int .content .banner img{
	width:650px;
	he ight:250px;
}


#slider{
	display:inline;
	float:left;
	width:650px;
	height:250px;
	overflow:hidden;
	position:relative;
}

#slider ul{
	display:block;
	height:250px;
	float:left;
	position:relative;
	display:inline;
	margin:0;
	padding:0;
}

#slider ul li{
	width:650px;
	height:250px;
	overflow:hidden;
}

.backgrounder #moveslider{	
	display:block;
	position:relative;
	float:left;
	width:650px;
	bac kground: url(/img/bg-banner.gif) top left no-repeat;
	position:absolute;
	bottom:0;
	left:0;
	z-index:999;
}

#moveslider #prevBtn{
	display:inline;
	float:left;
	width:250px;
}

#moveslider #prevBtn a{
	display:block;
	float:left;
	width:100px;
	height:24px;
	background: url(/img/btn_prec.gif) top left no-repeat #000;
}

#moveslider #prevBtn a:hover{
	background: url(/img/btn_prec-on.gif) top left no-repeat #000;
}

#moveslider #prevBtn a span{
	display:none;
	visibility:hidden;
}

#moveslider #nextBtn{
	display:inline;
	float:right;
	width:300px;
	text-align:right;
}

#moveslider #nextBtn a{
	display:block;
	float:right;
	width:100px;
	height:24px;
	background: url(/img/btn_succ.gif) top left no-repeat #000;
}

#moveslider #nextBtn a:hover{
	background: url(/img/btn_succ-on.gif) top left no-repeat #000;
}

#moveslider #nextBtn a span{
	display:none;
	visibility:hidden;
}


.cases .content .abstract{
	width:650px;
	height:65px;
	margin-top:-65px;
	float:left;
	display:inline;
	position:relative;
	z-index:50;
	background:#000;
	filter: alpha(opacity=85);
	-moz-opacity: 0.85;
	opacity: 0.85;
}

#portfolio .cases .content .abstract{
	background:#efefef;
	padding:.5em 0;
}

#works .cases .content .abstract{
	background:#efefef;
	padding:.5em 0;
}

.cases .content .text{
	float:left;
	width:650px;
	font-size:12px;
	line-height:1.6em;
}

.cases .content .banner img{
	bord er:1px solid #000;
}

.cases .content .banner a{
	float:left;
	display:inline;
	width:650px;
	display:block;
	height:250px;
}

.cases .footer{
	background:#000;
	float:left;
	width:650px;
	padding:.2em 0;	
	margin-bottom:1em;
}

.cases .footer a{
	font-size:10px;
	color:#FF9900;
	background: url(/img/point.jpg) left 50% no-repeat;
	padding:0 10px;
	float:right;
}

.cases .footer a:hover{
	color:#fff;
	background: url(/img/point-on.jpg) left 50% no-repeat;
}
/*=========================================================================================== DATA */

.data{
	clear:both;
	text-align:right;
	font-size:10px;
	color:#999;
	display:block;
	clear:both;
	width:100%;
	float:left;
	margin-bottom:10px;
}

/*=========================================================================================== BOXER */

.boxer{
	margi n-top:-12px;
	clear:both;
	backgr ound: url(/img/bull.gif) 0 10px no-repeat;
	float:left;
}

.insiding .boxer{
	margin-top:140px;
}

.boxer.nospace{
	margin-top:10px;
}

.boxer h3{
	font-size:12px;
	color:#666;
	width:130px;
	float:left;
	display:inline;
	margin-left:10px;
	margin-top:10px;
}

.insiding .boxer h3{
	margin-bottom:10px;
}

.portfoliobox h3{
	margin-top:20px;
	margin-bottom:20px;
}

.boxer h3 a{
	float:left;
	display:inline;
	border:1px solid #666;
	width:168px;
	padding:5px;
	padding-top:7px;
	padding-bottom:4px;
	color:#ccc;
}

.portfoliobox h3 a{
}

.boxer h3 span.cufon{
	padding:0;
}

.boxer h3 span.cufon-alt{
	visibility:hidden;
}

.boxer h3 a:hover{
	border:1px solid #fff;
	color:#fff;
}

.boxer ul.related{
	padding-left:25px;
}

.boxer ul.related li{
	list-style-type: none;
	display:block;
}

.boxer ul.related li span{
	font-size:10px;
	color:#999;
}

.boxer ul.related li a{
	display:block;
	color:#fff!important;
	font-size:11px
}

.boxer ul.related li a:hover{
	color:#FF9900!important;
}


.boxer .portfolio ul{
	margin-top:2px;
	width:180px;
	margin-left:10px;
}

.boxer .portfolio ul li{
	list-style-type: none;
	display:block;
}

.boxer .portfolio ul li span{
	
}

.boxer .portfolio ul li a{
	color: #ccc!important;
	font-size: 13px;
	text-transform:uppercase;
	display: block;
	line-height:24px;
	min-height:24px;
	height:auto!important;
	height:24px;
	padding-left:30px;
}

.boxer .portfolio ul li a span{
	margin-top:3px;
}


.boxer .portfolio ul li a.por-advertising{
	background: url(/img/icon-traditional.gif) top left no-repeat;
}

.boxer .portfolio ul li a.por-traditional-ad{
	background: url(/img/icon-traditional.gif) top left no-repeat;
}

.boxer .portfolio ul li a.por-content-e-multimedia{
	background: url(/img/icon-flash.gif) top left no-repeat;
}

.boxer .portfolio ul li a.por-web-design{
	background: url(/img/icon-webdesign.gif) top left no-repeat;
}

.boxer .portfolio ul li a.por-flash-design{
	background: url(/img/icon-flash.gif) top left no-repeat;
}

.boxer .portfolio ul li a.por-event-design{
	background: url(/img/icon-event.gif) top left no-repeat;
}

.boxer .portfolio ul li a.por-eventi{
	background: url(/img/icon-event.gif) top left no-repeat;
}

.boxer .portfolio ul li a.por-identity{
	background: url(/img/icon-identity.gif) top left no-repeat;
}

.boxer .portfolio ul li a.por-immagine-coordinata{
	background: url(/img/icon-identity.gif) top left no-repeat;
}

.boxer .portfolio ul li a.por-character-design{
	background: url(/img/icon-character.gif) top left no-repeat;
}

.boxer .portfolio ul li a.por-content-design{
	background: url(/img/icon-character.gif) top left no-repeat;
}

.boxer .portfolio ul li a.por-web-marketing{
	background: url(/img/icon-marketing.gif) top left no-repeat;
}

.boxer .portfolio ul li a.por-grafica{
	background: url(/img/icon-grafica.gif) top left no-repeat;
}

.boxer .portfolio ul li a.por-grafica-e-impaginazione{
	background: url(/img/icon-grafica.gif) top left no-repeat;
}

.boxer .portfolio ul li a.por-software-development{
	
}

.boxer .portfolio ul li a.selection{
	
}

.boxer .portfolio ul li a:hover{
	color: #fff!important;
} 

/*=========================================================================================== BOXED */

.boxed{
	margin-top:25px;
	clear:both;
	display:none;
	visibility:hidden;
}

.boxed ul{
}

.boxed ul li{
	list-style-type: none;
	display:block;
	margin-bottom:10px;
}

.boxed ul li a{
	font-size:10px;
	text-transform:uppercase;
	color:#ccc!important;
	padding-left:25px;
	background: url(/img/bull.gif) left 50% no-repeat;
	line-height:44px;
	min-height:44px;
	height:auto!important;
	height:40px;
	display:block;
}

.boxed ul li a:hover{
	color:#FF9900!important;
	background: url(/img/bull-color.gif) left 50% no-repeat;

}

.boxed ul li a.selected{
	color:#FF9900!important;
	background: url(/img/bull-on.gif) left 50% no-repeat;

}

/*=========================================================================================== main BOX HOME */

div#main {
	width:400px;
	font-size:13px;
	font-weight:bold;
	text-transform:uppercase;
	position:relative;
	top:137px;
	left:145px;
	float:left;
	display:inline;
}

div#main ul{
	margin:0;
	padding:0;
	float:left;
	display:inline;
	wid th:400px;
	background:#fff;
	padding-top:2px;
}

div#main ul li{
	margin:0;
	padding:0;
	list-style-type:none;
	text-align:left;
	float:left;
	display:inline;
	padding-right:7px;
}

div#main ul li a{
	text-align:left;
	color:#000;
	float:left;
	display:inline;
	float:left;
	margin-bottom:-0;
}

div#main ul li a:hover{	
	color:#FE9900;
}

div#main ul li.divider{
	line-height:10px;
}

/*=========================================================================================== REST */

.rest{
	clear:both;
	width:650px;
	position:relative;
	margin-bottom:20px;
	overflow:auto;
}

html>body .rest{
	float:left;
}

.rest .image{
	float:right;
	margin-left:10px;
	margin-bottom:5px;
	
	display:none;
	visibility:hidden;
}

.rest .image img{
	border:15px solid #000000;
}

.rest .testo{
	font-size:11px;
	line-height:1.4em;
	text-align:justify;
	position:relative;
}

.rest .abstract{
	font-size:14px;
	line-height:1.8em;
	font-weight:bold;
	color:#333;
	margin-bottom:5px;
}

.rest .details{
	width:405px;
	padding:10px;
	background:#f4f4f4;
	float:right;
	position:relative;
}

.rest .also{
	width:200px;
	float:left;
}

.rest .also ul{
	
}

.rest .also ul li{
	list-style-type:none;
	float:left;
	display:inline;
}

.rest .also ul li a{
	float:left;
	display:inline;
	padding:2px 5px;
	padding-top:4px;
	width:190px;
	background:#333;
	border-bottom:1px solid #fff;
	font-size:12px;
	color:#fff;
	text-transform:uppercase;
	font-weight:bold;
}

.rest .also ul li a:hover{
	background:#FF9900;
	color:#fff;
}

/*=========================================================================================== REST */

.auxthumb{
	clear:both;
	width:650px;
	position:relative;	
	background: url(/img/top-baloon-new2.gif) top left no-repeat #ECECEC;
	padding-top:45px;
	/*margin-bottom:10px;
	border-bottom:1px solid #ccc;
	padding-bottom:10px;*/
}

html>body .auxthumb{
	float:left;
}

.auxthumb ul{
	
}

.auxthumb ul li{
	list-style-type:none;
	float:left;
}

.auxthumb ul li img{
	
}

.auxthumb ul li.gal-sx{
	clear:both;
	margin-bottom:15px;
	width:200px;
	margin-left:10px;
}

.auxthumb ul li.gal-cx{
	width:230px;
	text-align:center;
}

.auxthumb ul li.gal-dx{
	width:200px;
	margin-right:10px;	
}

/*=========================================================================================== OTHERS */

.others{
	background: url(/img/top-baloon.gif) top left no-repeat #000;
	padding-top:25px;
	clear:both;
	width:650px;
	position:relative;
}

html>body .others{
	float:left;
}

*:first-child+html .baloon{
	padding-bottom:25px!important;
}

* html .baloon{
	padding-bottom:25px!important;
}

.blocco-anno .others{
	width:150px;
}

.viewall{
	clear:both;
	width:104px;
	position:relative;
	float:right;
	text-align:center;
	background:#000;
	margin-right:36px;
	display:inline;
}

.viewall h5{
	font-size:14px;
}

.viewall h5 a{
	color:#fff;
}

.viewall h5 a:hover{
	color:#FF9900;
}



/*=========================================================================================== OTHERS-INT */

.others-int{
	/*background: url(/img/top-baloon-new.gif) top left no-repeat #000;*/
	background: url(/img/top-baloon.gif) top left no-repeat #000;
	padding-top:25px;
	clear:both;
	width:650px;
	position:relative;
}

html>body .others-int{
	float:left;
}

.bggal {
	background: url(/img/top-baloon-new.gif) top left no-repeat #000;
}

/*=========================================================================================== ACCORDION */

.topspop{
	border-top:5px;
}

.blocco-anno{
	background: #000;
	cl ear:both;
	width:150px;
	position:relative;
	display:inline;
	margin-top:20px;
	margin-left:12.5px;
}

html>body .blocco-anno{
	float:left;
}


* html .blocco-anno{
	float:left;
}


.blocco-anno h4{
	color:#FF9900;
	font-size:18px;
	padding-right:10px;
	padding-top:5px;
	padding-bottom:3px;
	text-align:right;
}

.twist_history{
	background: #fff;
	margin-left:3px;
	cle ar:both;
	width:144px;
	bord er-top:1px solid #000;
	border-bottom:1px solid #333;
	position:relative;
	display:inline;
	float:left;
	padding-top:7px;
	padding-bottom:3px;
}

.twist_history .global_twist{
	margin-left:17px;
	display:none;
}

.twist-ins .global_twist{
	margin-left:10px;
}

.twist_history h5{
	padding-left:10px;
	padding-top:5px;
	padding-bottom:3px;
	font-size:14px;
}

.twist_history h5 a{
	color:#000;
}

.twist_history h5 a:hover{
	color:#f37b21;
}

.twist_history .brief_history{
	width:104px;
	float: left;
	display:inline;
	margin-bottom:10px;
	margin-left:3px;
}

.twist_history .brief_history img{
	border:2px solid #000;
}

.twist_history .image_history{
	width:104px;
	float:left;
	height:104px;
}

.twist_history .opacity{
	width:100px;
	float:left;
	display:inline;
	height:35px;
	margin-top:-35px;
	background:#000;
	filter: alpha(opacity=70);
	-moz-opacity: 0.7;
	opacity: 0.7;
	z-index:60;
	position:relative;
	margin-left:2px;
}

* html .twist_history .opacity{
	margin-top:-40px;
	margin-left:2px;
}

.twist_history .brief_history .describe_history{
	/*display:block;*/
	clear:both;
	width:90px;
	float:left;
	margin-top:-30px;
	color:#fff;
	font-size:10px;
	z-index:70;
	position:relative;
	overflow:hidden;
}

.twist_history .image_history:hover .describe_history{
	margin-top:-40px;
}



.describe_history h6{
	color:#fff;
	font-size:12px;
	text-transform:uppercase;
}

.describe_history h6 a{
	color:#fff;
	display:block;
	height:35px;
	padding-left:5px;
	width:95px;
}

.describe_history h6 a:hover {
	color:#FF9900;
	height:25px;
}



/*=========================================================================================== MARKER */

.twist{
	width:150px;
	height:250px;
	float:left;
	overflow:hidden;
	position:relative;
	margin-left:10px;
	margin-top:20px;
	display:inline;
}

.twist .brief{
	margin-left:10px;
	width:130px;
	margin-top:10px;
	margin-bottom:10px;
}

.twist .brief h5{
	color:#fff;
	font-size:11px;
	margin-bottom:15px;
}

.twist .brief .describe{
	color:#cccccc;
	font-size:10px;
}

.twist a.shot{	
	margin:0;
	padding:0;
	padding-bottom:3px;
	display:block;
}

html>body .twist a.shot{	
	padding-bottom:5px;
}

.twist a.shot img{
	border:15px solid #fff;
	margin-left:10px;
}
/*
.twist a.shot:hover{	
	background: url(/img/bg-shot-on.gif) bottom center no-repeat!important;
}
*/
.twist a.shot:hover img{
	border:15px solid #FF9900;
	margin-left:10px;
}
/*
.twist.traditional-ad .shot{
	background: url(/img/bg-shot-traditionalad.gif) bottom center no-repeat;
}

.twist.web-design .shot{
	background: url(/img/bg-shot-webdesign.gif) bottom center no-repeat;

}

.twist.flash-design .shot{
	background: url(/img/bg-shot-flashdesign.gif) bottom center no-repeat;

}

.twist.flash-game .shot{
	background: url(/img/bg-shot-flashgame.gif) bottom center no-repeat;

}

.twist.firm-identity .shot{
	background: url(/img/bg-shot-firmidentity.gif) bottom center no-repeat;

}
.twist.traditional-ad a.shot:hover img{
	border-color:#ede13f;
}

.twist.web-design a.shot:hover img{
	border-color:#bb4688;
}

.twist.flash-design a.shot:hover img{
	border-color:#f18f1b;
}

.twist.flash-game a.shot:hover img{
	border-color:#6c9ec6;
}

.twist.firm-identity a.shot:hover img{
	border-color:#8cbc33;
}
*/

.twist a.view{
	font-size:10px;
	position:absolute;
	bottom:8px;
	left:15px;
	color:#fff;
	padding-left:10px;
}

.twist.traditional-ad a.view{
	background: url(/img/bg-view-traditionalad.gif) left 3px no-repeat;
}

.twist.web-design a.view{
	background: url(/img/bg-view-webdesign.gif) left 3px no-repeat;
}

.twist.flash-design a.view{
	background: url(/img/bg-view-flashdesign.gif) left 3px no-repeat;
}

.twist.flash-game a.view{
	background: url(/img/bg-view-flashgame.gif) left 3px no-repeat;
}
.twist.firm-identity a.view{
	background: url(/img/bg-view-firmidentity.gif) left 3px no-repeat;
}

.twist a.view:hover{
	color:#FF9900;
	background: url(/img/point-on.jpg) left 3px no-repeat;
}


/*=========================================================================================== MARKER */

.twist-int{
	width:123px;
	height:170px;
	float:left;
	overflow:hidden;
	position:relative;
	margin-left:5px;
	margin-top:20px;
	display:inline;
}

.twist-int .brief{
	width:107px;
	margin-left:10px;
	margin-top:10px;
	margin-bottom:10px;
}

.twist-int .brief h5{
	color:#fff;
	font-size:11px;
	margin-bottom:15px;
}

.twist-int .brief h5 a{
	color:#fff;
}

.twist-int .brief h5 a:hover{
	color:#FE9900;
}

.twist-int .brief .describe{
	color:#cccccc;
	font-size:10px;
}

.twist-int a.shot{	
	margin:0;
	padding:0;
	padding-bottom:3px;
	display:block;
}

html>body .twist-int a.shot{
	padding-bottom:5px;
}

.twist-int a.shot img{
	border:3px solid #fff;
	margin-left:10px;
}

.twist-int a.shot:hover img{
	border:3px solid #000;
	margin-left:10px;
}

.baloon{
	padding:20px!important;
	padding-bottom:0!important;
	padding-top:45px!important;
	width:610px!important;
}

.baloons{
	padding-top:35px!important;
	padding-bottom:3px!important;
}

.clientvision{
	background:#fff;
	width:650px!important;
	padding:0!important;
}

.twist-ins{
	width:114px;
	float:left;
	overflow:hidden;
	position:relative;
	display:inline;
	margin-bottom:20px;
	margin-right:6px;
}

.twist-ins .brief_history{
	width:104px;
}

.twist-ins .brief_history img{
	border:2px solid #fff;
}

.twist-ins.selected .brief_history img{
	border:2px solid #FF9900;
}

.twist-ins .image_history{
	width:104px;
	float:left;
	height:104px;
}

.twist-ins .image_history a{
	width:104px;
	height:104px;
	float:left;
	display:inline;
}

.twist-ins .opacity{
	width:100px;
	float:left;
	height:48px;
	margin-top:-50px;
	background:#fff;
	filter: alpha(opacity=70);
	-moz-opacity: 0.7;
	opacity: 0.7;
	z-index:60;
	position:relative;
	margin-left:2px;
}

.twist-ins:hover .opacity{
	margin-top:-60px;
	height:58px;
}


.twist-ins.selected .opacity{
	margin-top:-60px;
	height:58px;
	background:#000;
}

.others .twist-ins .opacity{
	height:33px;
	margin-top:-35px;
	background:#000;
}

* html .others .twist-ins .opacity{
	float: left;
	display:inline;
	margin-left:2px;
	height:29px;
}

.others .twist-ins:hover .opacity{
	height:38px;
	margin-top:-40px;
	background:#000;
}

.twist-ins .brief_history .describe_history{
	display:block;
	clear:both;
	width:104px;
	height:35px;
	float:left;
	margin-top:-45px;
	color:#000;
	font-size:10px;
	z-index:70;
	position:relative;
	overflow:hidden;
}

.twist-ins .brief_history:hover .describe_history{
	margin-top:-55px;
	height:47px;
}

.twist-ins.selected .brief_history .describe_history{
	margin-top:-55px;
	padding-left:5px;
	width:99px;
	height:46px;
}

.others .twist-ins .brief_history .describe_history{
	margin-top:-32px;
	color:#fff;
	height:25px;
}

.others .twist-ins .brief_history:hover .describe_history{
	margin-top:-37px;
}

.others .twist-ins.selected .brief_history .describe_history{
	margin-top:-37px;
}

#home .twist-ins .brief_history .describe_history{
	height:23px;
}

.twist-ins h6{
	color:#000;
	font-size:12px;
	text-transform:uppercase;
}

.twist-ins.selected h6{
	color:#FF9900;
}

.others .twist-ins h6{
	color:#fff;
}

.twist-ins h6 a{
	color:#000;
}

.others .twist-ins h6 a{
	color:#fff;
}

.twist-ins h6 a:hover{
	color:#c00;
}

.others .twist-ins h6 a:hover{
	color:#FF9900;
}



/*=========================================================================================== ANCILLARY */

#ancillary{
	font-size:10px;
	clear:both;
	position:relative;
	margin-top:2em;
	padding-top:.5em;
	border-top:5px solid #000;
	width:650px;
	float:left;
	
}

#ancillary a{
	color:#000;
	position: relative;
}

#ancillary a:hover{
	color:#FF9900;
	position: relative;
}

#ancillary p{
	color:#000;
	position: relative;
}

/*=========================================================================================== MARKER */

#specials{
	clear:both;
	float:left;
	display:inline;
	width:650px;
}

html>body #specials{
	margin-bottom:20px;
}

.mark{
	
	float:left;
	overflow:hidden;
	position:relative;
	margin-left:10px;
}

.mark.jobs{
	overflow:visible;
	float:left;
	width:315px;
	height:75px;
	padding:1px;
	border:1px solid #ccc;
}

.mark.news{
	overflow:visible;
	width:178px;
	border:1px solid #666;
	margin-top:10px;
}

.mark.staff{
	back ground: url(/img/marker-staff.gif) left top no-repeat;
}


.mark.inssx{
	overflow:visible;
	float:left;
	wid th:319px;
	hei ght:79px;
}

.mark.insdx{
	overflow:visible;
	float:right;
	width:319px;
	height:79px;
}

.mark .padder{
	padding:5px;
	width:168px;
	float:left;
}

.mark .padderspecial{
	padding:0;
	background:none;
	border:0;
}

* html .mark .padderspecial{
	height:75px;
	margin:0;
	float:left;
	display:inline;
	overflow:hidden;
}

* html .mark .padderspecial a{
	padding:0;
	margin:0;
}

.mark .padder .abstrnewshome{
	font-size:11px;
	width:168px;
	float:left;
	display:inline;
	color:#ccc;
}

.mark .padder h4{
	font-size:12px;
	font-weight:bold;
	margin:3px 0;
}

.mark .padder h4 a{
	color:#efefef;
}

.mark .padder h4 a:hover{
	color:#FE9900;
}

.mark .padder h5{
	font-size:12px;
	font-weight:bold;
	color:#ccc;
	text-transform:uppercase;
	text-align:left;
	border-bottom:1px solid #666;
}

.mark.jobs .padder h4{
	color:#666;
}

.mark.news .padder h4{
	col or:#4882b1;
	color:#ccc;
}

.mark .padder .excerpt{
	font-size:10px;
	font-weight:normal;
	margin-top:10px;
}

.mark .date{
	font-size:10px;
	position:absolute;
	bottom:15px;
	left:50px;
	color:#9a9a9a;
}

.mark a.goto{
	font-size:10px;
	position:absolute;
	bottom:8px;
	right:8px;
	background: url(/img/goto.gif) left bottom no-repeat;
	width:19px;
	height:19px;
}

.mark a.goto:hover{
	background: url(/img/goto-on.gif) left bottom no-repeat;

}

.mark a.goto span{
	display:none;
	visibility:hidden;
}

/*=========================================================================================== INFO BOX */

div#info ,
div#info-home {
	width:190px;
	display:inline;
	clear:both;
	float:left;
	color:#999;
	font-size:11px;
	margin-left:10px;
	margin-top:10px;	
}

div#info {
	position:absolute;
	bottom:10px;
	left:700px;
	position: fixed; 
}

#home div#info {
	
}

div#validation {
	width:200px;
	display:block-inline;
	clear:both;
	float:left;
	margin-left:10px;
	color:#999;
	font-size:10px;
	text-align:left;
	margin-top:10px;
}

div#qrcode {
	display:block-inline;
	clear:both;
	float:left;
	margin-left:10px;
	color:#999;
	font-size:10px;
	text-align:left;
	margin-top:10px;
	width:180px;
}

div#qrcode .qrimg{
	width:100px;
	display:inline;
	float:left;
}

div#qrcode .qrtxt{
	width:180px;
	display:inline;
	float:left;
	text-align:left;
	margin-top:15px;
}

div#qrcode .qrtxt h4{
	text-transform:uppercase;
	font-size:12px;
}

div#qrcode .qrtxt .qrabstrct{
	margin-top:10px;
}

/*=========================================================================================== FORM ACCESSO AREA RISERVATA */

div#loginform {
	width:280px;
	display:block;
	clear:both;
	float:left;
	margin-left:0;
	color:#fff;
	font-size:10px;
	margin-top:25px;
	
	display:none;
	visibility:hidden;
}

* html div#loginform {
	margin-left:-5px;
}

div#loginform form {
	margin-left:12px;
}

div#loginform fieldset {
	margin:0;
	padding:0;
	border:0;
}

div#loginform legend {
	display:none;
	visibility:hidden;
}

div#loginform label {
	float:left;
	clear:left;
	display:none;
}

div#loginform input {
	width:150px;
	margin-bottom:5px;
	color:#ff9900;
	height:12px;
	padding:1px;
	font-size:10px;
	border:1px solid #999;
	background:#333;
	text-align:right;
}

div#loginform input.button {
	border:0;
	clear:both;
	background:#000;
	height:14px;
}

/*==================================================================== personalizzazione paginazione */

div#paginazione{
	clear:both;
	display:inline;
	float:left;
	width:640px;
	padding:5px;
}

div#paginazione ul{
	font-size:11px;
}

div#paginazione ul li{
	text-align:center;
	font-weight:bold;
	float:left;
	list-style-type:none;	
	line-height:20px;
	min-height:20px;
	height:auto!important;
	height:20px;
}

div#paginazione ul li.selected{
	text-align:center;
	font-weight:bold;
	float:left;
	list-style-type:none;	
	line-height:20px;
	min-height:20px;
	height:auto!important;
	height:20px;
	display:block;
	border:1px solid #FF9900;
	float:left;
	width:20px;
	color:#fff;
	background:#FF9900;
	margin-right:3px;
}

div#paginazione ul li a{
	display:block;
	border:1px solid #FF9900;
	text-align:center;
	background:#f5f5f5;
	color:#000;
	float:left;
	width:20px;
	line-height:20px;
	min-height:20px;
	height:auto!important;
	height:20px;
	margin-right:3px;
}

div#paginazione ul li a.bigger{
	font-size:16px;
}

div#paginazione ul li a:hover{
	border:1px solid #000;
	background:#fff;
	color:#000;
}



/*==================================================================== personalizzazione news */

div#notizie-elenco{
	margin-top:2em;
}

div.notizia-box-int{
	border-bottom:1px solid #999;
	margin-bottom:20px;
	background: url(/img/bg-news.gif) top right no-repeat #f9f9f9;
	padding:10px;
	padding-top:30px;
	margin:5px;
	position:relative;
	width:185px;
	float:left;
	min-height:200px;
	height:auto!important;
	height:200px;
}

div.notizia-box-int h3{
	font-size:14px;
	text-transform:uppercase;
	margin-bottom:5px;
	min-height:30px;
	height:auto!important;
	height:30px;
}

#colsx{
	float:left;
	width:200px;
	display:inline;
	margin-top:15px;
}

#coldx{
	float:right;
	width:430px;
	display:inline;
	margin-top:15px;
}

#coldx h5{
	color:#666;
}



div.notizia-box-int .resizecompleto{
	font-size:11px;
	color:#666;
}

div.notizia-box-int .data{
	margin-bottom:10px;
	margin-top:10px;

}

#content .resizecompleto{
	font-size:11px;
	color:#666;
	line-height:16px;
	margin-top:25px;
}

#content .copysize{
	padding-left:200px;
}

#payoff{
	border-bottom:1px solid #666;
	margin-top:5px;
	float:left;
	width:650px;
	display:inline;
	margin-bottom:10px;
}

#staff{
	float:left;
	display:inline;
	margin-top:10px;
}

.cases_works .abstract{
	float:left;
	display:inline;
	background:#efefef;
	padding:10px;
	width:630px;
	margin:10px 0;
	font-size:12px;
}


/*=========================================================================================== CONTENT TXT */

.box-sx #content .abstract{
	font-size:12px;
	padding-left:100px;
	margin-bottom:2em;
	line-height:2em;
	font-weight:bold;
}

.box-sx #content .text{
	font-size:11px;
	margin-bottom:1em;
	line-height:1.6em;
}

.box-sx #content .back{
	font-size:11px;
	margin-bottom:1em;
	line-height:1.6em;
	text-align:right;
	font-weight:bold;
	margin-top:15px;
	padding-top:5px;
	border-top:1px solid #ccc;
}


#flashcontent{
	margin-top:-70px;
	z-index:100;
	position:relative;
}

div.accordian div.twist_history{
	cursor:pointer;
}

/*=========================================================================================== slider */



#content #full #gallery #swap span{
	display:none;
	visibility:hidden;
}

#content #full #gallery #swap a.next{
	background: url(/img/next.gif) top center no-repeat;
	width:9px;
	height:18px;
	display:inline;
	display:block;
	float:left;
	margin-left:10px;
}

#content #full #gallery #swap a.prev{
	background: url(/img/prev.gif) top center no-repeat;
	width:9px;
	height:18px;
	display:inline;
	display:block;
	float:left;
	margin-right:10px;
}


#content #full #gallery #swap a.next:hover{
	background: url(../imgs/next-on.gif) top center no-repeat;
}

#content #full #gallery #swap a.prev:hover{
	background: url(../imgs/prev-on.gif) top center no-repeat;
}

#image-gal{
	background: #000 url(../../../mysite/imgs/nyro_modal/ajaxLoader.gif) top center no-repeat;
}

.listclient { 
	position:relative;
	width: 650px;
	float:left;
	display:inline;
}

.listclient .listcol{ 
	position:relative;
	width: 160px;
	margin-right:2.5px;
	float:left;
	display:inline;
}

.listclient ul{ 
	
}

.listclient ul li{ 
	list-style-type:none;
	font-size:10px;float:left;
	display:inline;
}

.listclient ul li a{ 
	color:#000;
	float:left;
	display:inline;
	line-height:14px;
	width:150px;
	padding:0 5px;
}

.listclient ul li a:hover{ 
	color:#fff;
	background:#000;
}

.clients { 
	position:relative;
	width: 650px;
	float:left;
	display:inline;
	margin-top:15px;
}

.clients .clientsimg{ 
	position:relative;
	width: 270px;
	float:left;
	display:inline;
}

.clients .clientstesto{ 
	position:relative;
	width: 360px;
	float:right;
	display:inline;
	line-height:20px;
	font-size:11px;
}

.clients .clientstesto .clientworks{
	position:relative;
	width: 360px;
	float:right;
	display:inline;
	margin-top:15px;
}

.clients .clientstesto .clientworks ul{
	
}

.clients .clientstesto .clientworks ul li{
	list-style-type:none;
	float:left;
	width:100px;
	height:100px;
	border:2px solid #000;
	display:inline;
	margin-right:12px;
	margin-bottom:12px;
}

.clients .clientstesto .clientworks .twist-ins .brief_history img {
	border:2px solid #000000;
}

 /* root element for the whole slider setup */
div#list { 
	position:relative;
	overflow:hidden;
	width: 650px!important;
	float:left;
	display:inline;
	margin-top:15px;
}


 /* root element for the whole slider setup */
div.slider { 
	position:relative;
	overflow:hidden;
	width: 650px;
	height:350px;
	float:left;
	display:inline;
	margin-top:15px;
	margin-bottom:15px;
}

/* 
	root element for slider items. It is 
	absolutely positioned with large width. 
*/
#thumbs {	
	position:absolute;
	width:30000em;	
	clear:both;
	float:left;
	text-align:left;
	left:0;
}
/* this makes it possible to add next button beside slider */
div.slider {
	float:left;		
}


/* single item */
#thumbs div.container {
	float:left;
	display:inline;
	width:650px;
	height:300px;
	list-style-type:none;
	text-align:center;
}

#thumbs div.container .twist-client {
	float:left;
	display:inline;
	width:162px;
	margin-bottom:10px;
}

#thumbs div.container .twist-client img {
	height:140px;
	width:140px;
}



/* prev, next, prevPage and nextPage buttons */
a.prev, a.next, a.prevPage, a.nextPage {
	display:inline;
	width:18px;
	height:18px;
	background:url(/img/left.png) no-repeat;
	float:left;
	cursor:pointer;
	text-decoration:none;
}

/* mouseover state */
a.prev:hover, a.next:hover, a.prevPage:hover, a.nextPage:hover {
	background-position:0px -18px;		
}

/* next button uses another background image */
a.next, a.nextPage {
	background-image:url(/img/right.png) ;
	clear:right;	
}

.next_die{
	position:absolute;
	top:320px;
	left:330px;
}

* html .next_die{
	right:10px;
}

.prev_die{
	position:absolute;
	top:320px;
	left:300px;
}

/* disabled navigational button */
a.disabled {
	cursor:default;	
	filter: alpha(opacity=0);
	-moz-opacity: 0;
	opacity: 0;
}
a.disabled:hover {
	cursor:default;	
	filter: alpha(opacity=0);
	-moz-opacity: 0;
	opacity: 0;
}


/*********** navigator ***********/


/* position and dimensions of the navigator */
div.navi {
	margin-left:328px;
	width:200px;
	height:20px;
}


/* items inside navigator */
div.navi a {
	width:8px;
	height:8px;
	float:left;
	margin:3px;
	background:url(../imgs/navigator.png) 0 0 no-repeat;   
	cursor:pointer;	
}

/* mouseover state */
div.navi a:hover {
	background-position:0 -8px;   
}

/* active state (current page state) */
div.navi a.active {
	background-position:0 -16px;   
} 	





.portfolio{
	clear:both;
}
























