html {
  margin: 0;
  padding: 0;
}
body {
  position: relative;  /* per l'image replacement */
  z-index: 10;  /* per l'image replacement */
  margin: 5px 0;
  padding: 0;
  background-color: #fff;
  font: 100.01%/1.5 Verdana, Arial, Helvetica, sans-serif;
  color: #000;
  text-align: center;
}

h1 {
  margin-top: 15px;
  height: 27px;
  background-color: #92a7b8;
  background-repeat: no-repeat;
  background-position: top left;
  font-size: 140%;
  color: #ff0300;
}
h2 {
  margin: 0 0 25px 0;
  line-height: 1;
  font-size: 110%;
  color: #ff0300;
  text-align: center;
}

h1 span {
  position: relative;
  z-index: -1;
}
.lavori_in_corso { background-image: url(/immagini/lavori_in_corso.gif) }
.chi_siamo  { background-image: url(/immagini/chi_siamo.gif) }
.partner    { background-image: url(/immagini/partner.gif) }
.portfolio  { background-image: url(/immagini/portfolio.gif) }
.mission    { background-image: url(/immagini/mission.gif) }
.servizi    { background-image: url(/immagini/servizi.gif) }
.contatti   { background-image: url(/immagini/contatti.gif) }
.calendario { background-image: url(/immagini/calendario.gif) }
.silav      { background-image: url(/immagini/silav.gif) }
.crm        { background-image: url(/immagini/crm.gif) }





/**
 **
 ** STILI GENERICI
 **
 **/


img,
#contenitore .no_border { border: none } /*  Usare questo selettore includendo l'id #contenitore  */
                                         /*  per aumentarne la specificità!  */

a:link,
a:visited {
  padding-bottom: 1px;
  border-bottom: none;
  color: #006dca;
  text-decoration: none;
}
a:focus,
a:hover,
a:active {
  padding-bottom: 1px;
  border-bottom: 1px solid #006dca;
  color: #006dca;
  text-decoration: none;
}

acronym, abbr { cursor: help }

.float_left,
img.float_left      { float: left }
.float_right,
img.float_right     { float: right }

img.float_left  { margin: 0 10px 10px 0 }
img.float_right { margin: 0 0 10px 10px }

.clear_left  { clear: left }
.clear_right { clear: right }
.clear_both  { clear: both }


.no_margin     { margin: 0 }
.no_padding    { padding: 0 }
.no_border     { border: none }
.no_background { background: none }

.left    { text-align: left }
.center  { text-align: center }
.right   { text-align: right }
.justify { text-align: justify }

.font_grande  { font-size: 120% }
.font_piccolo { font-size: 90% }
.italic { font-style: italic }
.nero { color: #000 }
.uppercase { text-transform: uppercase }

.errore {
  color: #000;
  text-align: center;
}

/* Linee orizzontali */
div.hr hr { display: none }
div.hr {
  width: 60%;
  height: 5px;
  margin: 23px 0 23px 20%;
  background: transparent url(/immagini/quadrati_rossi_piccoli.gif) repeat-x top left;
}



/**
 **
 ** STILI SPECIFICI
 **
 **/

#contenitore {
  position: relative;
  width: 778px;
  margin: 0 auto;
  font-size: 80%;
  text-align: left;
}



#logo {
  position: relative;
  top: 6px;
  left: 10px;
  bottom: 6px;
  width: 768px;
  height: 60px;
}

a#home_page {
  position: absolute;
  top: 6px;     /*  Link alla home page che deve posizionarsi sul logo;  */
  left: 10px;   /*  il posizionamento è lo stesso di #logo  */
  width: 230px;
  height: 60px;
  padding-bottom: 0;   /*  Annulliamo gli stili applicati ad ogni link  */
  border-bottom: none;
}



#testata {
  list-style: none;
  margin: 11px 0;
  padding: 0;
}
#testata li {
  float: left;
  height: 84px;
  list-style: none;
  margin: 0 0 7px 0;
  padding: 0;
}

#testata li a:link,
#testata li a:visited {
  display: block;
  height: 84px;
  padding-bottom: 0;  /*  Annulliamo gli stili applicati ad ogni link  */
                      /*  il bordo in questo caso è già impostato a "none"  */
  /* Nessuno sfondo: sarà applicato al caricamento della pagina dal file javascript fade_image.js */
  text-decoration: none;
}
#testata li a:focus,
#testata li a:hover,
#testata li a:active {
  /* Nessuno sfondo: l'effetto al mouse over viene applicato dal javascript che effettua il fade dell'immagine */
  display: block;
  padding-bottom: 0;  /*  Annulliamo gli stili applicati ad ogni link  */
  border-bottom: none;
  text-decoration: none;
}


#testata li#web_multimedia,
#testata li#informatica,
#testata li#grafica_pubblicitaria { width: 156px }

#testata li#mkt_communication,
#testata li#digital_video { width: 155px }


#testata li#web_multimedia a        { background-position: 778px top }
#testata li#informatica a           { background-position: 622px top }
#testata li#grafica_pubblicitaria a { background-position: 466px top }
#testata li#mkt_communication a     { background-position: 310px top }
#testata li#digital_video a         { background-position: 155px top }



ul#menu_orizzontale {
  clear: both;
  margin: 0 auto 9px 6px;
  width: 766px; /* Verificare ??? */
  height: 22px;
  padding: 0;
  list-style: none;
  background: #fff url(/immagini/sfondo_menu_orizzontale.gif) repeat-x bottom left;
  text-align: center;
}
ul#menu_orizzontale li {
  display: inline;
  margin: 0;
  padding: 0;
  list-style: none;
} 
ul#menu_orizzontale li a {
  cursor: pointer;
  padding: 3px 15px 3px 35px;
  border-bottom: none;  /*  Annulliamo gli stili applicati ad ogni link  */
                        /*  il padding-bottom viene sovrascritto dalla proprietà "padding"  */
                        /*  definita in questo selettore  */
  background: none;
  line-height: 22px;
  font-size: 90%;
  font-weight: bold;
  color: #000;
  text-decoration: none;
  
}
ul#menu_orizzontale li a:focus,
ul#menu_orizzontale li a:hover,
ul#menu_orizzontale li a:active,
ul#menu_orizzontale li a.active {
  cursor: pointer;
  background: transparent url(/immagini/menu_orizzontale_hover.gif) no-repeat 10px 0;
  color: #f83c3b;
  text-decoration: none;
}

ul#menu_orizzontale li a.active:focus,
ul#menu_orizzontale li a.active:hover,
ul#menu_orizzontale li a.active:active { color: #000 }


#centrale {
  /* Stili per la STRUTTURA del sito */
  clear: left;
  float: left;
  width: 441px !important;
  width /**/: 565px;
  padding: 0 58px 17px 68px;

  /* Altri stili del layer */
  line-height: 1.45;
  font-size: 80%;
}
#centrale h2 { font-size: 120% }

#colonna_dx {
  /* Stili per la STRUTTURA del sito */
  float: right;
  width: 197px !important;
  width /**/: 209px;
  padding: 0 0 10px 11px;

  /* Altri stili del layer */
  line-height: 1.35;
  font-size: 80%;
  text-align: center;
}
#colonna_dx a {
  padding-bottom: 0;  /*  Annulliamo gli stili applicati ad ogni link  */
  border-bottom: none;
}

#sar {
  margin: 27px 0 15px 0;
  text-align: center;
}
#sar h2 {
  margin: 10px 0 0 0;
  text-align: justify;
}
#sar strong {
  display: block;
  margin: 0;
  text-align: justify;
}
#sar p {
  margin: 0 0 10px 0;
  font-style: italic;
  text-align: justify;
}
#sar em { font-weight: bold }


#valid_xhtml,
#valid_css {
  display: block;
  position: relative;
  width: 88px;
  height: 33px;
  margin: 10px auto 5px auto;
}



#footer {
  clear: both;
  margin-top: 0;
  padding: 16px 60px;
  background: #fff url(/immagini/quadrati_rossi_grandi.gif) repeat-x top left;
  font-size: 80%;
}
#footer img { float: left; margin-right: 10px; }
#footer a { font-weight: bold }




#lavori { text-align: justify }
#lavori h2 {
  margin-bottom: 15px;
  font-weight: bold;
  color: #ff0202;
  text-align: left;
}

#lavori img {
  float: left;
  margin-right: 15px;
  border: 3px solid #91a6b7;
}




#lavori,
.sezione {
  margin-bottom: 15px;
  padding: 12px 11px;
  border-bottom: 1px solid #bebebe;
}


/* Quadratini rossi alla fine della classe .sezione */
.sottosezione {
  background: transparent url(/immagini/quadrati_rossi_piccoli.gif) repeat-x top left;
  padding: 16px 0;
  margin-bottom: 12px;
}




#staff_ekoes { list-style-type: none }
#staff_ekoes li {
  list-style-type: none;
  margin: 10px 0;
}



/**
 **  Portfolio
 **/

#portfolio {
  padding-top: 15px;
  text-align: center;
}
#portfolio h2 {
  margin: 15px 0 7px 0;
  font-weight: bold;
  text-align: center;
}

#portfolio p {
  margin-bottom: 60px;
  text-align: justify;
}


/**
 **  Partner
 **/

#partner {
  padding: 15px 0 20px 0;
  text-align: center;
}
#partner p {
  margin-bottom: 30px;
  text-align: justify;
}






/**
 **  Menù verticale con icone
 **/

ul.menu_verticale {
  list-style-type: none;
  margin: 20px 0 0 40px;
  padding: 0;
}
ul.menu_verticale li {
  display: block;
  margin: 0 4px;
  padding: 0;
  font-size: 110%;
  font-weight: bold;
}
ul.menu_verticale a {
  display: block;
  line-height: 30px;
  padding: 0 0 0 25px;
}
ul.menu_verticale a:link,
ul.menu_verticale a:visited {
  background: transparent url(/immagini/bullet_menu_verticale.gif) no-repeat left center;
  color: #686868;
  text-decoration: none;
}
ul.menu_verticale a:focus,
ul.menu_verticale a:hover,
ul.menu_verticale a:active,
ul.menu_verticale a.active {
  border-bottom: none;
  background: transparent url(/immagini/bullet_menu_verticale_hover.gif) no-repeat left center;
  color: #000;
  text-decoration: none;
}



/*
	BANNER COOP IN HOME PAGE
	NB: Usare il selettore #lavori per aumentare la specificità degli stili,
	altrimenti non vengono applicati
*/
#lavori .banner_coop { clear: left; padding-top: 10px }
#lavori .banner_coop img { margin: 0 5em 2em 0 }
#lavori .banner_coop img:last-child { margin: 0 0 2em 1.5em }