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

/* MAIN */
html, body {width:100%;margin:0px;font-family:Helvetica, Arial, Verdana,  sans-serif;font-size:13px;color:#000000;line-height:16px;}
body { background-color:#000; }
div, ul, ol, li, h1, h2, h3, p, a, label, textarea, form, iframe {position:relative;width:auto;height:auto;margin:0px;padding:0px;}
img {border:0px;}
a {text-decoration:none;outline:none;color:#0082df;}
a:hover { text-decoration:none;outline:none;color:#df00c8;}

#conteiner { background:#FFF; }

#menu {position:absolute;list-style:none;width:350px;height:300px !important;margin:0px;top:130px;left:0px;float:left;}
#btn-about { width:281px; height:48px; background:url(../_img/btn-about.gif) top left no-repeat; float:left; margin-bottom:20px; margin-left:0px;   }
#btn-port {width:318px;height:48px;background:url(../_img/btn-port.gif) top left no-repeat; float:left; margin-bottom:20px; position:relative; left:25px !important; }
#btn-blog {width:281px;height:48px;background:url(../_img/btn-blog.gif) top left no-repeat; float:left; margin-bottom:20px; position:relative; left:30px !important;   }
#btn-contact {width:318px;height:48px;background:url(../_img/btn-contact.gif) top left no-repeat; float:left; margin-bottom:20px; position:relative; left:10px !important;}
#menu li a:hover, #menu li a.sel { background-position:bottom left; }

#cont { height:630px; width:960px; margin:0px auto; background:url(../_img/banner_dx_works.png) no-repeat bottom left #FFF;  }

#cont .div1 { width:350px; padding:20px 10px 20px 10px; height:auto !important; float:left; }
#cont .div1 div.box1 { background-color:#000; color:#0CF; font-size:48px; width:340px; height:30px; text-align:center; top:20px; padding-top:20px;   }
#cont .div1 div.box1 a { position:absolute; top:0px; right:0px; width:320px;height:50px;background:url(../_img/shantilab-logo.gif) bottom left no-repeat; float:right;	}
#cont .div1 div.box1 a:hover {background-position:top left;}
#cont .div1 div.box2 { background-color:#000; color:#FF0; font-size:24px; width:215px; height:20px; text-align:right; top:25px; left:120px; padding-top:5px; padding-right:5px;   }
#cont .div1 div.box3 { background-color:#000; color:#FFF; font-size:14px; width:115px; height:18px; text-align:right; top:30px; left:220px; padding-top:2px; padding-right:5px; font-style:italic;   }

#cont .div2 { width:555px; margin:25px 0 0 25px; padding:20px 0px 20px 10px; height:auto !important; float:left; }
#cont .div2.bg1 {background:url(../_img/bg-div-1.gif) no-repeat 0px 80px;}
#cont .div2.bg2 {background:url(../_img/bg-div-2.gif) no-repeat 0px 80px;}
#cont .div2.bg3 {background:url(../_img/bg-div-2.gif) no-repeat 0px -50px;}
#cont .div2.bg4 {background:url(../_img/bg-div-1.gif) no-repeat 0px 50px;}
#cont .div2 p { width:500px;line-height:20px; z-index:12; padding-top:15px; }
#cont .div2 div.arrows-1 { display:none; position:absolute; width:65px; height:385px; top:-120px; left:-25px; z-index:10; background:url(../_img/arrows-1.gif) top left no-repeat;}
#cont .div2 div.arrows-2 { display:none; position:absolute; width:450px; height:100px; top:-20px; right:10px; margin-top:5px; z-index:10; background:url(../_img/arrows-2.gif) top left no-repeat;}
#cont .div2 div.arrows-3 { display:none; position:absolute; width:280px; height:40px; right:10px; margin-top:5px; z-index:10; background:url(../_img/arrows-3.gif) top left no-repeat;}
#cont .div2 div.arrows-4 {  position:absolute; width:400px; height:340px; top:-150px; right:0px; z-index:11; background:url(../_img/arrows-4.gif) bottom left no-repeat;}
#cont .div2 div.arrows-5 { display:none;  position:absolute; width:80px; height:350px; top:-100px; right:0px; z-index:11; background:url(../_img/arrows-5.gif) bottom left no-repeat;}
#cont .div2 span.cyn { color:#0082df;}

#cont .div3 { margin:50px 0 0 0px; padding:20px 0px 20px 0px; height:auto !important; float:left; }
#cont .div3 div.air { z-index:10; background:url(../_img/air.gif) left top no-repeat; width:410px; height:35px; top:10px; right:0px; position:absolute;}
#cont .div3 div.gallery {width:550px; height:200px;float:left; padding:50px 0 0 0; border-bottom:#000 solid 5px; }
#cont .div3 div.gallery .prev {width: 37px; height: 50px; cursor: pointer; background:transparent url(../_img/prev-horizontal-2.gif) no-repeat -8px 0px; position:absolute; top:100px; left:0px; z-index:11;}
#cont .div3 div.gallery .next {width: 37px; height: 50px; cursor: pointer; background:transparent url(../_img/next-horizontal-2.gif) no-repeat -8px 0px; position:absolute; top:100px; right:0px; z-index:12;}
#cont .div3 div.gallery .prev.off,
#cont .div3 div.gallery .next.off {visibility:hidden; cursor:default;}
#cont .div3 div.gallery .prev:hover,
#cont .div3 div.gallery .next:hover { background-position: -61px 0; }
#cont .div3 div.gallery .prev:active,
#cont .div3 div.gallery .next:active { background-position: -114px 0; }
#cont .div3 div.gallery .scrollable {position:relative; overflow:hidden; width:100%; height:100%;}
#cont .div3 div.gallery .items {width:20000em; position:absolute; }
#cont .div3 div.gallery .item {clear:right; float:left; width:235px; margin:0; padding:0; color:#000; display:block;}
#cont .div3 div.gallery .item img {margin:0px 17px !important; float:none; }
#cont .div3 div.gallery .item p { clear:left; width:100%; text-align:center; padding-top:3px;}
#cont .div3 div.gallery .scrollable {width:470px; float:left; margin-left:37px;}

#cont .div4 { margin:0px 0 0 0px; padding:20px 0px 20px 0px; height:auto !important; float:left;border-bottom:#000 solid 5px;}
#cont .div4 #scroll {width:500px; top:20px; }
#cont .div4 .scroll-pane {overflow:auto;width:500px !important;height:185px;padding:0px 20px 0px 0px;left:0px;}
#cont .div4 .jScrollPaneContainer {overflow:hidden;z-index:1;}
#cont .div4 .jScrollPaneTrack {cursor:pointer;position:absolute;height:100%;top:0px;right:0px;background:url(../_img/bg_scrollbar.gif) top center repeat-y;}
#cont .div4 .jScrollPaneDrag {cursor:pointer;overflow:hidden;position:absolute;width:8px !important;height:24px;left:1px;background:#F0F;}
#cont .div4 .jScrollPaneDragTop {overflow:hidden;position:absolute;top:0px;left:0px;}
#cont .div4 .jScrollPaneDragBottom {overflow:hidden;position:absolute;bottom:0px;left:0px;}
#cont .div4 .scroll-pane p {width:100%; padding:0px !important;  }
#cont .div4  ul { width:100%; padding-left:20px; padding-top:5px; padding-bottom:20px; list-style:circle;} 
#cont .div4 span.titoli { color:#F0F; font-weight:bold;}
#cont .div4 h1 { margin-bottom:20px;}

#cont .div5 { margin:0px 0 0 0px; padding:25px 0px 20px 0px; height:auto !important; float:left; width:100%;border-bottom:#000 solid 5px;}
#cont .div5  ul { width:100%; padding-left:40px; padding-top:5px; padding-bottom:20px; list-style:circle;} 
#cont .div5  ul li { padding-bottom:15px;}
#cont .div5 span.titoli { color:#F0F; font-weight:bold; font-size:14px;}
#cont .div5.social {  background:url(../_img/bg-social.gif) no-repeat bottom right;  height:500px; 	 }
#cont .div5 #scroll {width:500px;  }
#cont .div5 .scroll-pane {overflow:auto;width:480px !important;height:300px;padding:0px 20px 0px 0px;left:0px;}
#cont .div5 .jScrollPaneContainer {overflow:hidden;z-index:1;}
#cont .div5 .jScrollPaneTrack {cursor:pointer;position:absolute;height:100%;top:0px;right:0px;background:url(../_img/bg_scrollbar.gif) top center repeat-y;}
#cont .div5 .jScrollPaneDrag {cursor:pointer;overflow:hidden;position:absolute;width:8px !important;height:24px;left:1px;background:#F0F;}
#cont .div5 .jScrollPaneDragTop {overflow:hidden;position:absolute;top:0px;left:0px;}
#cont .div5 .jScrollPaneDragBottom {overflow:hidden;position:absolute;bottom:0px;left:0px;}
#cont .div5 .scroll-pane p {width:100%; padding:0px !important;  }


#cont .div6 { margin:0px 0 0 0px; padding:25px 0px 20px 50px; height:auto !important; float:left;}
#cont .div6 .inputtext, #cont .div6 .textarea { background:#fff; border: solid 1px #FFCF01; font-size:12px; font-family:Arial, Helvetica, sans-serif; width:400px;}
#cont .div6 .button{ background:#FF0; border: solid 1px #000; color:#000; width:120px; cursor:pointer; font-size:14px; font-weight:bold; padding:5px;}
#cont .div6 .invalidInput{border-color: #F00;}
#cont .div6 .validInput{ border: 1px solid #FFCF01;}
#cont .div6 .mgn { color:#F0F; }

#cont .div7 { margin:0px 0 0 0px; padding:10px 0px 10px 25px; width:500px; height:auto !important; float:left; border-bottom:#000 solid 5px;}
#cont .div7 .list { background-color:#000; width:130px; height:100px; float:left; margin:0 10px 10px 0; padding:10px; cursor:pointer; }
#cont .div7 .list div {position:absolute;width:130px !important;height:100px !important;margin:0px;padding:0px;top:10px;left:10px;border:none;filter:alpha(opacity=70);-moz-opacity:0.7;opacity:0.7;float:left;}
#cont .div7 .list div.div1 { background:#FF0; }
#cont .div7 .list div.div2 { background:#df00c8; }
#cont .div7 .list div.div3 { background:#0082df; }
.scrollable2 {	position:relative;overflow:hidden;width: 470px;	height:380px; left:0px; padding:0px !important;   }
.scrollable2 .items { width:20000em; position:absolute; padding:0px !important; margin:0px !important; }
.scrollable2 .items div.item { float:left;width:480px; height:380px; text-align:left; margin:0px 0px 0 0px !important; padding:0px !important;   }
.scrollable2 .items div.item img {  }
.prev2 {width: 37px; height: 50px; cursor: pointer; background:url(../_img/prev-horizontal-2.gif) no-repeat -8px 0px; position:absolute; top:200px; left:-20px; z-index:11;}
.next2 {width: 37px; height: 50px; cursor: pointer; background:url(../_img/next-horizontal-2.gif) no-repeat -8px 0px; position:absolute; top:200px; right:-20px; z-index:12;}
.prev2.off,
.next2.off {/*visibility:hidden;*/ cursor:default !important;}
.prev2:hover,
.next2:hover {background-position: -61px 0; cursor: pointer; }
.prev2:active,
.next2:active {  background-position: -114px 0;cursor: pointer; }



#footer { top:-100px; height:150px; width:100%; background:url(../_img/city.png) center top repeat-x;}
#footer div { width:960px; margin:0px auto;}
#footer div div.testo { color:#FFF; font-size:11px; width:400px !important; top:120px; left:200px;  }
#footer a { color:#FFF;}
#footer a:hover { color:#09F;}
#footer div img { position:relative; top:100px;}

#city-0 { position:absolute; top: 0px; height:150px; width:100%; z-index:21; }
#city-1 { position:absolute; top:0px; height:150px; width:100% !important; z-index:21; background:url(../_img/city-1.png) center top repeat-x ; }
#city-2 { position:absolute; top:0px; height:150px; width:100% !important; z-index:21; background:url(../_img/city-2.png) center top repeat-x ; }
#city-3 { position:absolute; top:0px; height:150px; width:100% !important; z-index:21; background:url(../_img/city-3.png) center top repeat-x ; }
#city-3 .div01 { background:none; width:80px; height:30px; top:54px; left:-64px; cursor:pointer; z-index:30; }
#city-3 .div02 { background:none; width:25px; height:60px; top:-10px; left:170px; cursor:pointer; z-index:31;}
#city-3 .div03 { background:none; width:45px; height:20px; top:-48px; left:398px; cursor:pointer; z-index:32; }	
#city-3 .div01 img.img1 { position:absolute; top:-65px; left:-50px; display:none; }
#city-3 .div02 img.img2 { position:absolute; top:-60px; left:30px; display:none; }
#city-3 .div03 img.img3 { position:absolute; top:-75px; left:0px; display:none; }

.showcase  { display:none; z-index:10000; background-color:#333; width:675px; min-height:200px; border:1px solid #666; -moz-box-shadow:0 0 90px 5px #000; -webkit-box-shadow: 0 0 90px #000; }
.showcase .progress { position:absolute; top:45%; left:50%; display:none; } 
.showcase a.next, .showcase a.prev {position:absolute;	top:40%;border:1px solid #666;	cursor:pointer;	display:block;	padding:10px 20px; color:#fff; font-size:11px;	-moz-border-radius:5px;	-webkit-border-radius:5px; }
.showcase a.prev {left:0;border-left:0;	-moz-border-radius-topleft:0;-moz-border-radius-bottomleft:0;-webkit-border-bottom-left-radius:0;-webkit-border-top-left-radius:0;}
.showcase a.next {	right:0;border-right:0;	-moz-border-radius-topright:0;	-moz-border-radius-bottomright:0;	-webkit-border-bottom-right-radius:0;	-webkit-border-top-right-radius:0;	}
.showcase a.next:hover, .showcase a.prev:hover {text-decoration:underline;	background-color:#000;}
.disabled {	visibility:hidden !important; }
.showcase .info {position:absolute;	bottom:0;left:0;padding:10px 15px;color:#fff;font-size:14px; border-top:1px solid #666;}
.showcase .info strong {display:block;}
.showcase .info span {display:none;}
.showcase .info i { font-size:12px;}
.showcase a.next, .showcase a.prev, .showcase .info {	background:#333 !important; }
.showcase a.close { position:absolute;	right:0px;	bottom:-25px; cursor:pointer; height:15px;	width:15px; padding-top:10px;	background:none; color:#FFF;	z-index:100001;	font-size:14px;	font-weight:lighter;text-align:right;}

.showork  { display:none; z-index:10000; background-color:#333; width:675px; min-height:200px; border:1px solid #666; -moz-box-shadow:0 0 90px 5px #000; -webkit-box-shadow: 0 0 90px #000; }
.showork .progress { position:absolute; top:45%; left:50%; display:none; } 
.showork a.close { position:absolute;	right:0px;	bottom:-25px; cursor:pointer; height:15px;	width:15px; padding-top:10px;	background:none; color:#FFF;	z-index:100001;	font-size:14px;	font-weight:lighter;text-align:right;}
.showork .details { position:absolute;top:15px;right:15px;font-size:11px;color:#fff;width:150px; } 
.showork .details h3 { color:#aba;font-size:15px; margin:0 0 -10px 0; }
.showork div.link { position:absolute; bottom:0px; right:0px; font-size:10px; color:#FFF;} 

/* VERIE */
.floatL { float:left; }
.floatR { float:right; }
.clearAll, .clear {clear:both !important;}
.nomarginright {margin-right:0px !important;}
.nopadding {padding:0px !important;}
.noborder {border:none !important;}
.nobackgroundimg {background-image:none !important;}
.nobackground {background:none !important;}