html {
  margin: 0;
  padding: 0;
}
body {
  margin: 14px 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;
  font-size: 140%;
  color: #ff0300;
  text-align: center;
}
h2 {
  margin: 0 0 19px 0;
  line-height: 1;
  font-size: 120%;
  color: #ff0300;
}




/**
 **
 ** 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: 2px;
  border-bottom: none;
  color: #006dca;
  text-decoration: none;
}
a:focus,
a:hover,
a:active {
  padding-bottom: 2px;
  border-bottom: 1px solid #006dca;
  color: #006dca;
  text-decoration: none;
}


#sezione_multimedia a,
#sezione_multimedia h2  {
  border-color: #f9761e;
  color: #f9761e;
}

#sezione_informatica a,
#sezione_informatica h2 {
  border-color: #fac635;
  color: #fac635;
}

#sezione_grafica a,
#sezione_grafica h2 {
  border-color: #4fa83e;
  color: #4fa83e;
}

#sezione_marketing a,
#sezione_marketing h2 {
  border-color: #b94284;
  color: #b94284;
}

#sezione_video a,
#sezione_video h2 {
  border-color: #4896c7;
  color: #4896c7;
}


.img_float_left,
.float_left      { float: left }
.img_float_right,
.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% }
.nero { color: #000 }

.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(http://www.ekoes.it/immagini/quadrati_rossi_piccoli.gif) repeat-x top left;
}




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

#contenitore {
  position: relative;
  width: 779px !important;
  width /**/: 801px;
  margin: 0 auto;
  border-width: 11px;
  border-style: solid;
  font-size: 80%;
  text-align: left;
}

#sezione_multimedia #contenitore  { border-color: #f9761e }
#sezione_informatica #contenitore { border-color: #fbc736 }
#sezione_grafica #contenitore     { border-color: #4fa83e }
#sezione_marketing #contenitore   { border-color: #b94284 }
#sezione_video #contenitore       { border-color: #4896c7 }


#logo {
  position: relative;
  top: 5px;
  left: 11px;
}
a#home_page {
  position: absolute;
  top: 5px;     /*  Link alla home page che deve posizionarsi sul logo;  */
  left: 11px;   /*  il posizionamento è lo stesso di #logo  */
  width: 130px;
  height: 34px;
  padding-bottom: 0;   /*  Annulliamo gli stili applicati ad ogni link  */
  border-bottom: none;
  background-image: url(immagineinesistente);  /* Non chiedetemi perche' ma senza sfondo il link non viene posizionato correttamente da IE 7...... */
}


#testata {
  list-style: none;
  margin: 8px 0 1px 0;
  padding: 0;
}
#testata li {
  float: left;
  width: 194px;
  height: 46px;
  list-style: none;
  margin: 0 1px 0 0;
  padding: 0;
}
#testata li.last_element { margin-right: 0 }


#testata li a:link,
#testata li a:visited {
  display: block;
  cursor: pointer;
  height: 46px;
  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:hover,
#testata li a:active {
  display: block;
  cursor: pointer;
  padding-bottom: 0;  /*  Annulliamo gli stili applicati ad ogni link (il bordo in questo caso è già impostato a "none"  */
  border-bottom: none;
  /* Nessuno sfondo: l'effetto al mouse over viene applicato dal javascript che effettua il fade dell'immagine */
  text-decoration: none;
}

#testata li#web_multimedia a        { background-position: left 0 }
#testata li#informatica a           { background-position: left 184px }
#testata li#grafica_pubblicitaria a { background-position: left 138px }
#testata li#mkt_communication a     { background-position: left 92px }
#testata li#digital_video a         { background-position: left 46px }




ul#menu_orizzontale {
  display: block;
  margin: 5px 0 10px 0;
  height: 22px;
  padding: 0;
  list-style: none;
}
ul#menu_orizzontale li {
  display: inline;
  margin: 0;
  padding: 0;
  list-style: none;
}
ul#menu_orizzontale li a {
  padding: 3px 13px 3px 27px;
  border-bottom: none;  /*  Annulliamo gli stili applicati ad ogni link  */
                        /*  il padding-bottom viene sovrascritto dalla proprietà "padding"  */
                        /*  definita in questo selettore  */
  line-height: 22px;
  font-size: 90%;
  font-weight: bold;
  color: #000;
  text-decoration: none;
  background: 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 {
  text-decoration: none;
  background: transparent url(http://www.ekoes.it/immagini/sezioni_menu_orizzontale_hover.gif) no-repeat 10px -1px;
}

#sezione_multimedia ul#menu_orizzontale a:focus,
#sezione_multimedia ul#menu_orizzontale a:hover,
#sezione_multimedia ul#menu_orizzontale a:active,
#sezione_multimedia ul#menu_orizzontale a.active { color: #f9761e }

#sezione_informatica ul#menu_orizzontale a:focus,
#sezione_informatica ul#menu_orizzontale a:hover,
#sezione_informatica ul#menu_orizzontale a:active,
#sezione_informatica ul#menu_orizzontale a.active { color: #fac635 }

#sezione_grafica ul#menu_orizzontale a:focus,
#sezione_grafica ul#menu_orizzontale a:hover,
#sezione_grafica ul#menu_orizzontale a:hover,
#sezione_grafica ul#menu_orizzontale a.active { color: #4fa83e }

#sezione_marketing ul#menu_orizzontale a:focus,
#sezione_marketing ul#menu_orizzontale a:hover,
#sezione_marketing ul#menu_orizzontale a:active,
#sezione_marketing ul#menu_orizzontale a.active { color: #b94284 }

#sezione_video ul#menu_orizzontale a:focus,
#sezione_video ul#menu_orizzontale a:hover,
#sezione_video ul#menu_orizzontale a:active,
#sezione_video ul#menu_orizzontale a.active { color: #4896c7 }

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




#centrale {
  /* Stili per la STRUTTURA del sito */
  width: 592px !important;
  width /**/: 778px;
  padding: 17px 88px 17px 98px;

  /* Altri stili del layer */
  line-height: 1.5;
  font-size: 80%;
  text-align: justify;
}



#footer {
  width: 659px !important;
  width /**/: 779px;
  margin: 0 auto;
  padding: 16px 60px 2px 60px;
  font-size: 60%;
  text-align: left;
}
#footer img { float: left; margin-right: 10px; }
#footer a { font-weight: bold }



/**
 **  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: 50px;
  text-align: justify;
}

#sezione_multimedia #portfolio img  { border: 3px solid #f9761e }
#sezione_informatica #portfolio img { border: 3px solid #fac635 }
#sezione_grafica #portfolio img     { border: 3px solid #4fa83e }
#sezione_marketing #portfolio img   { border: 3px solid #b94284 }
#sezione_video #portfolio img       { border: 3px solid #4896c7 }


.sezione {
/*  margin-bottom: ; */
  padding: 12px 0;
  border-bottom: 1px solid #bebebe;
}


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