html, body  { margin: 0; padding:0; height:100%; }
body { background:#222 url(bg-carbon.jpg); color:#FFFFFF; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: normal; font-size: 12px; line-height: 150%; position:relative; text-align:center;}

#header { margin-bottom:1em; color:#FFF; background:url(bg-header.jpg) repeat-x top center;}
	
#header-wrapper { width: 960px; margin:0 auto; text-align: left; height:180px; position:relative; }

#header-wrapper h1 { margin:0; padding:0; width: 375px; height: 160px; position: relative; z-index: 1; background: transparent url(logo.jpg) no-repeat; float:left; }
#header-wrapper h1 a { overflow: hidden; text-indent: -999em; width: 375px; height: 160px; display: block; text-decoration: none; }

#footer {clear: both ;padding-top: 1em;}

#bordo {width:860px; margin:20px auto; background: url(bg-metal.gif); padding:5px 0; }
#container { width:850px; min-height:500px; height: auto !important; height: 500px; margin:0 5px; padding:0;  text-align:left;background:url(bg-carbon-black.jpg); }

#content { padding:20px; }

#navigation { position:absolute; height:45px; width:585px; bottom:20px; right:0; }
#navigation li { float:left; text-indent: -9999px; }
#navigation li a { height:45px; display: block; background-repeat:no-repeat; }

#navigation li a:hover, a.selected, #navigation li a.selected:hover { background-position: 0 -45px; }

#navigation li#home a { width: 113px; background-image: url(btn-home.jpg); }
#navigation li#azienda a { width: 124px; background-image: url(btn-azienda.jpg); }
#navigation li#servizi a { width: 120px; background-image: url(btn-servizi.jpg); }
#navigation li#news a { width: 113px; background-image: url(btn-news.jpg); }
#navigation li#contatti a { width: 115px; background-image: url(btn-contatti.jpg); }



/* Commons */

h2 { margin:0 0 10px 0; padding:0; height:30px; text-indent:-9999px; background-repeat:no-repeat;  background-position:0 0; clear:both; width:100%; }

h2.title-home { background-image: url(title-home.jpg); background-position: center 0; }
h2.title-home2 { background-image: url(title-home2.jpg); background-position: center 0; }
h2.title-azienda { background-image: url(title-azienda.jpg); }
h2.title-sede { background-image: url(title-sede.jpg); }
h2.title-team { background-image: url(title-team.jpg);}
h2.title-servizi { background-image: url(title-servizi.jpg); }
h2.title-news { background-image: url(title-news.jpg); }
h2.title-contatti { background-image: url(title-contatti.jpg); }
h2.title-legend { background-image: url(title-legend.jpg); }
h2.title-privacy { background-image: url(title-privacy.jpg);  }
h2.title-404 { background-image: url(title-404.jpg); }

h3 { color:#CCCCCC; font-weight:normal; font-size:14px; margin:0 0 10px 0;}

ul, li { margin:0; padding:0; list-style-type:none; }

strong { color:#CCCCCC; }

em { font-style:normal; color:#0099FF;}

p { margin:0; padding:0 0 10px 0; text-align:justify; }

a { text-decoration:none; color:#FFCC00;}
a:hover { color:#0099FF;}

hr { clear:both; height:0; line-height:0; margin:0; border:0; visibility:hidden; padding:0; }

#content li { padding:0 0 5px 15px; background:url(bullet.jpg) no-repeat left 3px; }


#footer p { text-align:center}
#footer a { font-size:9px; text-transform:uppercase; color:#0099FF;}


/* HOME */ 
#slideimage { position:relative; width:800px; height:400px; margin:20px auto;}
#imageBox { border:1px solid #999999; margin:0 auto; overflow:hidden; width:700px; height:400px; position:relative;}
#imageBoxInside { width: 1200px; position:relative; left: -250px; top: 0px;}
#imageBox img { padding:0; margin:0; float:left;  }
#imageBox br { clear: both; }
#previous { position:absolute; width:25px; height:50px; left:0; top:175px; background:url(previous.jpg) no-repeat; cursor:pointer;}
#next { position:absolute; width:25px; height:50px; right:0; top:175px; background: url(next.jpg) no-repeat; cursor:pointer;}

#menu { width:700px; height:50px; margin:0 auto; position:relative;}
#hall {  position:absolute; width:245px; height:50px; top:0; right:0; background:url(menu-hall.jpg) no-repeat; cursor:pointer}
#sede {  position:absolute; width:245px; height:50px; top:0; left:0; background:url(menu-sede.jpg) no-repeat; cursor:pointer}
#officina {  position:absolute; width:210px; height:50px; top:0; left:245px; background:url(menu-officina.jpg) no-repeat; cursor:pointer}


/* AZIENDA */
#scrollable, #scrollable2, #scrollable3 { width:750px; height:150px; margin:10px auto; border:1px solid #999999; overflow:hidden; white-space:nowrap; position:relative; }
			
#scrollable img, #scrollable2 img, #scrollable3 img { display:inline; padding-right:2px; border:0; background:url(ajax-loader.gif) no-repeat center;} 
			
#track, #track2, #track3 { width:750px; height: 10px; margin:10px auto 15px auto; border-width:0 0 1px 0; border-style:solid; border-color:#999999; }
			
#handle, #handle2, #handle3  { width:12px; height:20px; background:url(handle.jpg) no-repeat; cursor: move; }

/* SERVIZI */
#slide-wrapper { width:800px; padding:0; margin:10px auto;}
#slideshow { position:relative; display:block; margin:0px; padding:0px; width:800px; height:350px; overflow:hidden; clear:both; border:1px solid #999999; }
#slideshow li { position:absolute; top:0; left:0; display:block; margin:0; padding:0; background:none; }
#slideshow li img { display:block; }

ul.services { padding:0 10px;}
.trigger, .expanded { cursor: pointer; }
	

/* CONTATTI */
ul.info-left { float:left; width:50%; padding-bottom:20px; }
ul.info-right { float:right; width:30%; padding-bottom:20px; }

form { width: 740px; float: left; clear: both; margin-bottom:20px; }

form fieldset div { padding: 0 0 1em 0; float: left; display: inline; width: 370px; }

label { cursor: pointer; padding-right: 10px; width: 120px; display: block; float: left; text-align: right; }
fieldset { border:none; padding:0; margin:0; }
legend { margin:0; padding:0; text-indent:-9999px; }
input, textarea { border: 1px solid #999999; padding: 2px; font-size: 11px; font-family:Arial, Helvetica, sans-serif; color:#FFFFFF; width: 210px; background:none; }
textarea { overflow: auto; width: 580px; }
form div.textarea { clear: both; width: 740px; float: left; }
.button { margin:0 0 0 140px; clear: both; }
.button input { font-size:12px; border:0; padding:0; height: auto; float: left; width: auto; background:none; cursor:pointer; color:#FFCC00; }
.button p { margin:0; padding-right:40px; float:right;  }

.hoverfocus { border:1px solid #FFCC00;}

#working { margin-left:350px; padding:30px 0 30px 30px; background:url(ajax-loader.gif) no-repeat left center;}

ul#error, #response { border:1px solid #999999; margin:0 auto; width:375px; padding:10px; }

/* NEWS */
.article { border:1px solid #999999; margin-bottom:20px; float:left; width:100%; }
.article-inner { padding:10px; }
.article h3 { margin-top:5px;}
.date { color:#0099FF;}
p.footer-article { float:right; clear:both; padding-right:20px; margin-bottom:10px; }

span.foto { width:250px; height:120px; overflow:hidden; margin:5px 15px 0 10px; float:left; background:url(ajax-loader.gif) no-repeat center; border:1px solid #999999;}

/* ARTICOLO */
#immagini { float:left; padding:1em 0; border-top:1px solid #CCCCCC; width:100%;}
#immagini a { float:left; margin:0 4px 10px 5px; width:150px; height:120px; border:1px solid #CCCCCC; }
#immagini a:hover { border:1px solid #FFFFFF;}
#immagini img { background:url(ajax-loader.gif) no-repeat center; border:0;}

/*_________________________________________________________________  Overlay  */
#shadowbox_overlay {
  visibility: hidden;
  position: absolute;
  display: block;
  margin: 0;
  padding: 0;
  top: 0;
  left: 0;
  z-index: 998;
}

/*_______________________________________________________________  Container  */
#shadowbox_container {
  position: fixed;
  height: 0px;
  width: 100%;
  margin: 0;
  padding: 0;
  top: 0;
  left: 0;
  z-index: 999;
  text-align: center; /* centers in quirks and IE */
}

/*_______________________________________________________________  Shadowbox  */
#shadowbox {
  display: none;
  visibility: hidden;
  margin: 0 auto;
  position: relative;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  text-align: left; /* reset left alignment */
}

/*___________________________________________________________________  Title  */
/*
HTML snapshot:
<div id="shadowbox_title">
  <div id="shadowbox_title_inner">Title Here</div>
</div>
*/
#shadowbox_title {
  height: 25px;
  padding: 0;
  overflow: hidden;
}
#shadowbox_title_inner {
  height: 16px;
  font-size: 14px;
  line-height: 16px;
  white-space: nowrap;
  padding: 5px 0 4px 8px;
  color: #fff;
}

/*____________________________________________________________________  Body  */
/*
HTML snapsnot:
<div id="shadowbox_body">
  <div id="shadowbox_body_inner">
    <img src="my_image.jpg" id="shadowbox_content" height="350" width="580">
  </div>
  <div id="shadowbox_loading">
    <img src="images/loading.gif" alt="loading"></div>
    <span><a href="javascript:Shadowbox.close();">Cancel</a></span>
  </div>
</div>
*/
#shadowbox_body {
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 0;
  border: 2px solid #fff;
  background-color: #000;
}
#shadowbox_body_inner {
  position: relative;
  overflow: hidden;
}
#shadowbox_loading {
  position: absolute;
  top: 0;
  left: 0;
  height: 10000px; /* overflow:hidden will clip this */
  width: 100%;
  background-color: #222;
}
#shadowbox_loading img {
  float: left;
  margin: 10px 10px 0 10px;
}
#shadowbox_loading span {
  float: left;
  margin-top: 16px;
  font-size: 12px;
}
#shadowbox_loading span a,
#shadowbox_loading span a:link,
#shadowbox_loading span a:visited {
  color: #fff;
}

#shadowbox_content.html { /* make html content scrollable */
  height: 100%;
  width: 100%;
  overflow: auto;
}

/*_________________________________________________________________  Toolbar  */
/*
HTML snapshot:
<div id="shadowbox_toolbar">
  <div id="shadowbox_toolbar_inner">
    <div id="shadowbox_nav_close">
      <a href="javascript:Shadowbox.close();"><span class="shortcut">C</span>lose</a>
    </div>
    <div id="shadowbox_nav_next">
      <a href="javascript:Shadowbox.next();"><span class="shortcut">N</span>ext</a>
    </div>
    <div id="shadowbox_nav_previous">
      <a href="javascript:Shadowbox.previous();"><span class="shortcut">P</span>revious</a>
    </div>
    <div id="shadowbox_counter">
      <a href="javascript:Shadowbox.change(0);">1</a>
      <a href="javascript:Shadowbox.change(1);" class="shadowbox_counter_current">2</a>
      <a href="javascript:Shadowbox.change(2);">3</a>
    </div>
  </div>
</div>
*/
#shadowbox_toolbar {
  margin: 0;
  padding: 0;
  height: 20px;
  overflow: hidden;
}
#shadowbox_toolbar_inner {
  height: 20px;
  color: #fff;
}
#shadowbox_toolbar_inner div {
  padding-top: 4px;
  padding-bottom: 2px;
  font-size: 12px;
  height: 10px;
  line-height: 10px;
}
#shadowbox_toolbar_inner div span.shortcut {
  text-decoration: underline;
  font-weight: bold;
}
#shadowbox_toolbar_inner div a {
  text-decoration: none;
  color: #fff;
}
#shadowbox_nav_close,
#shadowbox_nav_previous,
#shadowbox_nav_next {
  float: right;
  padding-right: 10px;
}
#shadowbox_counter {
  float: left;
  padding-left: 10px;
}
#shadowbox_counter a {
  padding: 0 4px 0 0;
}
#shadowbox_counter a.shadowbox_counter_current {
  text-decoration: underline;
  font-weight: bold;
}

/*________________________________________________________________  Messages  */
div.shadowbox_message {
  text-align: center;
  padding: 10px;
}
div.shadowbox_message a:link,
div.shadowbox_message a:visited {
  text-decoration: none;
  color: #bed333;
}
div.shadowbox_message a:hover,
div.shadowbox_message a:focus {
  text-decoration: underline;
}