/* Stacchiotti & Ricciardi - Recanati - */
  /* Foglio di stile (CSS) realizzato da Marco Benvestito per "Cielo a pecorelle..." */

  body { 
    margin: 0px; border: none; padding: 0px; background-color: #003366;
  }

  #hpcontainer {
    position: relative; top: 5px; left: 50%; 
	width: 760px; height: 600px;
    margin: 0px 0px 0px -380px; border: none; padding: 0px;
    text-align: center; 
  } /* si tratta del blocco contenitore piu' esterno 
	   che permette la centratura dei contenuti sulle pagine del sito, a qualunque risoluzione di schermo */

    #hpcontainer #statichead {
      position: absolute; top: 0px; left: 0px; 
	  width: 760px; height: 80px;
      margin: 0px; border: none; padding: 0px;
      background-image: url('../images/header.jpg'); background-repeat: no-repeat;
    } /* si tratta del blocco contenitore per lo header "fermo" */

    #hpcontainer #overlay {
	  position: absolute; top: 90px; left: -10px;
	  width: 820px; height: 450px; 
	  margin: 0px auto; border: none; padding: 0px;
    } /* si tratta del blocco per l'animazione "exhibit", in home page, 
         destinato a scomparire definitivamente presto, appena viene cliccata la "x" di chiusura */

    #hpcontainer #navibuttons {
      position: absolute; top: 65px; left: 360px; z-index: 1;
	  width: 370px; height: 25px;
      margin: 0px; border: none; padding: 0px;
    } /* si tratta del blocco per il menu a quattro pulsanti con effetto roll-over (a tre stati) */
  
      #hpcontainer #navibuttons #box01 {
        position: absolute; top: 0px; left: 0px; 
	    width: 80px; height: 25px;
        margin: 0px; border: none; padding: 0px;
      } /* prima voce di menu, "azienda" */
      #hpcontainer #navibuttons #box02 {
        position: absolute; top: 0px; left: 80px; 
	    width: 120px; height: 25px;
        margin: 0px; border: none; padding: 0px;
      } /* seconda voce di menu, "realizzazioni" */
      #hpcontainer #navibuttons #box03 {
        position: absolute; top: 0px; left: 200px; 
	    width: 90px; height: 25px;
        margin: 0px; border: none; padding: 0px;
      } /* terza voce di menu, "prodotti" */
      #hpcontainer #navibuttons #box04 {
        position: absolute; top: 0px; left: 290px; 
	    width: 80px; height: 25px;
        margin: 0px; border: none; padding: 0px;
      } /* quarta voce di menu, "servizi" */
		
	    a#button01:hover { background: url('../images/trifecta080.jpg'); background-position: 0px -25px; color: #FFFFFF; }
        a#button01 {
	      width: 80px; height: 25px;
		  background-image: url('../images/trifecta080.jpg'); background-position: 0px 0px; display: block;
          font: 12px "Trebuchet MS", Arial, Sans-Serif; color: #FFFFC6; 
		  font-weight: bold; text-decoration: none; text-align: center; line-height: 28px;
	    }
	    #button01-a { 
		  position: absolute; top: 0px; left: 0px; width: 80px; height: 25px;
		  background-image: url('../images/trifecta080.jpg'); background-position: 0px -50px; }
		  #button01-a p { 
		    font: 12px "Trebuchet MS", Arial, Sans-Serif; color: #003366; 
		    margin: 0px;
			font-weight: bold; text-decoration: none; text-align: center; line-height: 28px; }
			
        a#button02:hover { background: url('../images/trifecta120.jpg'); background-position: 0px -25px; color: #FFFFFF; }
        a#button02 {
	      width: 120px; height: 25px;
		  background-image: url('../images/trifecta120.jpg'); background-position: 0px 0px; display: block;
          font: 12px "Trebuchet MS", Arial, Sans-Serif; color: #FFFFC6; 
		  font-weight: bold; text-decoration: none; text-align: center; line-height: 28px;
	    }
	    #button02-a { 
		  position: absolute; top: 0px; left: 0px; width: 120px; height: 25px;
		  background-image: url('../images/trifecta120.jpg'); background-position: 0px -50px; }
		  #button02-a p { 
		    font: 12px "Trebuchet MS", Arial, Sans-Serif; color: #003366; 
		    margin: 0px;
			font-weight: bold; text-decoration: none; text-align: center; line-height: 28px; }
			
        a#button03:hover { background: url('../images/trifecta090.jpg'); background-position: 0px -25px; color: #FFFFFF; }
        a#button03 {
	      width: 90px; height: 25px;
		  background-image: url('../images/trifecta090.jpg'); background-position: 0px 0px; display: block;
          font: 12px "Trebuchet MS", Arial, Sans-Serif; color: #FFFFC6; 
		  font-weight: bold; text-decoration: none; text-align: center; line-height: 28px;
	    }
	    #button03-a { 
		  position: absolute; top: 0px; left: 0px; width: 90px; height: 25px;
		  background-image: url('../images/trifecta090.jpg'); background-position: 0px -50px; }
		  #button03-a p { 
		    font: 12px "Trebuchet MS", Arial, Sans-Serif; color: #003366; 
		    margin: 0px;
			font-weight: bold; text-decoration: none; text-align: center; line-height: 28px; }
			
        a#button04:hover { background: url('../images/trifecta080.jpg'); background-position: 0px -25px; color: #FFFFFF; }
        a#button04 {
	      width: 80px; height: 25px;
		  background-image: url('../images/trifecta080.jpg'); background-position: 0px 0px; display: block;
          font: 12px "Trebuchet MS", Arial, Sans-Serif; color: #FFFFC6; 
		  font-weight: bold; text-decoration: none; text-align: center; line-height: 28px;
	    }
	    #button04-a { 
		  position: absolute; top: 0px; left: 0px; width: 80px; height: 25px;
		  background-image: url('../images/trifecta080.jpg'); background-position: 0px -50px; }
		  #button04-a p { 
		    font: 12px "Trebuchet MS", Arial, Sans-Serif; color: #003366; 
		    margin: 0px;
			font-weight: bold; text-decoration: none; text-align: center; line-height: 28px; }
			
	
    #hpcontainer #animation {
      position: absolute; top: 89px; left: 15px;
	  width: 720px; height: 120px;
      margin: 0px auto; border: none; padding: 0px;
      background-image: url('../images/_animation.jpg');
    } /* si tratta del blocco contenitore per lo header in Flash */
  
    #hpcontainer #mainzone {
      position: absolute; top: 208px; left: 10px; 
	  width: 740px; height: 380px;
      margin: 0px auto; border: none; padding: 0px;
      background-image: url('../images/mainzonebackground.jpg'); 
    } /* si tratta del blocco contenitore per il riquadro principale e tutti gli accessori laterali */
  
      #hpcontainer #mainzone h3 {
        font: 18px "Trebuchet MS", Arial, Sans-Serif; color: #003366; 
		margin: 15px 15px 0px; 
		font-weight: bold; text-align: center; 
      } /* il titoletto "S e R" nella pagina dei recapiti */
  
      #hpcontainer #mainzone p {
        font: 12px "Trebuchet MS", Arial, Sans-Serif; color: #333333; 
		margin: 5px 15px 0px; text-align: left;
      }  /* per i testi nella main area */
  
      #hpcontainer #mainzone a:hover { color: #333333; text-decoration: none; }
      #hpcontainer #mainzone a {
        font: 12px "Trebuchet MS", Arial, Sans-Serif; color: #003366; 
		margin: 0px; text-align: left; text-decoration: underline;
      }  /* per i link nel testo della main area */
  
      #hpcontainer #mainzone #focus-s {
        position: absolute; top: 10px; right: 0px; 
	    width: 620px; height: 320px;
        margin: 0px; border: none; padding: 0px;
        background-image: url('../images/focusbackground-s.gif');
      } /* si tratta del blocco contenitore per il riquadro principale e i fogli sottostanti */
	    /* (escluso il menu di sezione) per le sezioni "azienda" e "servizi" */
  
        #hpcontainer #mainzone #focus-s #scroll {
          position: absolute; top: 18px; left: 16px; 
	      width: 465px; height: 262px; overflow: auto; 
          margin: 0px; border: none; padding: 0px;
        } /* la main area delle pagine piccole, per testi e immagini */
  
          a.enlarge:hover { color: #FF776C; }
          a.enlarge {
            font: 12px "Trebuchet MS", Arial, Sans-Serif; color: #003366; text-align:left
		  } /* soltanto per il link (per ingrandire) al fondo della Google Map */
		
	  #hpcontainer #mainzone #focus-l {
        position: absolute; top: 10px; right: 0px; 
	    width: 740px; height: 320px;
        margin: 0px; border: none; padding: 0px;
        background-image: url('../images/focusbackground-l.gif');
      } /* si tratta del blocco contenitore per il riquadro principale e i fogli sottostanti */
	    /* per le sezioni "realizzazioni" e "prodotti" */
  
        #hpcontainer #mainzone #focus-l #scroll {
          position: absolute; top: 25px; left: 40px; 
	      width: 550px; height: 250px; overflow: auto; 
          margin: 0px; border: none; border-left: 1px dashed white; padding: 0px;
        } /* la main area delle pagine grandi, per testi e immagini */
  
      #hpcontainer #mainzone #telefono {
	    position: absolute; top: 170px; right: 10px;
	    width: 115px; height: 75px;
	    margin: 0px auto; border: none; padding: 2px;
	  } /* soltanto per "centrare" il recapito telefonico dell'assistenza tecnica nel riquadro turchese */
        #hpcontainer #mainzone #telefono p {
		  margin: 5px 0px 0px 2px;
          font: 15px "Trebuchet MS", Arial, Sans-Serif; color: #FFFFFF; 
		  font-weight: bold; text-decoration: none; text-align: center;
        } /* soltanto per il recapito telefonico di assistenza tecnica */
  
      #hpcontainer #slideshow {
	    position: absolute; top: 278px; left: 620px;
	    width: 118px; height: 105px;
	    margin: 0px; border: none; padding: 0px;
      } /* per le immagini in "infinite rotation" nella colonna di destra */
	  
	    #hpcontainer #slideshow img {
		  width: 118px; height: 105px;
          margin: 0px; border: none; padding: 0px;
		}

	#hpcontainer #links {
	  position: absolute; top: 550px; left: 10px;
	  width: 740px; height: 40px;
	  margin: 0px auto; border: none; padding: 0px;
	  background-color: #FFFFC6;
	} /* si tratta del blocco contenitore per i sei loghini linkati ai vari fornitori */
  
	  a#logo01:hover { background-image: url('../images/mark/MBM140.png'); background-position: 0px 0px; }
      a#logo01 {
        position: relative; top: 2px; left: 0px; float: left;
	    width: 140px; height: 35px;
        margin: 0px 5px 0px 1px; border: none; padding: 0px; 
		background-image: url('../images/mark/MBM140.png');
		background-position: 0px -35px;
		display: block;
	  } /* loghino a fondo pagina */
	  a#logo02:hover { background-image: url('../images/mark/ISA100.png'); background-position: 0px 0px; }
	  a#logo02 {
        position: relative; top: 2px; left: 0px; float: left; 
	    width: 100px; height: 35px;
        margin: 0px 1px; border: none; padding: 0px; 
		background-image: url('../images/mark/ISA100.png');
		background-position: 0px -35px;
		display: block;
	  } /* loghino a fondo pagina */
	  a#logo03:hover { background-image: url('../images/mark/Srm100.png'); background-position: 0px 0px; }
	  a#logo03 {
        position: relative; top: 2px; left: 0px; float: left; 
	    width: 100px; height: 35px;
        margin: 0px 1px; border: none; padding: 0px; 
		background-image: url('../images/mark/Srm100.png');
		background-position: 0px -35px;
		display: block;
	  } /* loghino a fondo pagina */
	  a#logo04:hover { background-image: url('../images/mark/Ped140.png'); background-position: 0px 0px; }
	  a#logo04 {
        position: relative; top: 2px; left: 0px; float: left; 
	    width: 140px; height: 35px;
        margin: 0px 1px; border: none; padding: 0px; 
		background-image: url('../images/mark/Ped140.png');
		background-position: 0px -35px;
		display: block;
	  } /* loghino a fondo pagina */
      a#logo05:hover { background-image: url('../images/mark/gLP100.png'); background-position: 0px 0px; }
	  a#logo05 {
        position: relative; top: 2px; left: 0px; float: left; 
	    width: 100px; height: 35px;
        margin: 0px 1px 0px 5px; border: none; padding: 0px; 
		background-image: url('../images/mark/gLP100.png');
		background-position: 0px -35px;
		display: block;
      } /* loghino a fondo pagina */
      a#logo06:hover { background-image: url('../images/mark/ITh140.png'); background-position: 0px 0px; }
      a#logo06 {
        position: relative; top: 2px; left: 0px; float: left; 
	    width: 140px; height: 35px;
        margin: 0px 1px; border: none; padding: 0px; 
		background-image: url('../images/mark/ITh140.png');
		background-position: 0px -35px;
		display: block;
      } /* loghino a fondo pagina */
	
    #hpcontainer #sidemenu {
      position: absolute; top: 250px; left: 16px; 
	  width: 120px; height: 250px;
	  margin: 0px 0px 0px 2px; border: none; padding: 0px;
    } /* il blocco per il menu laterale (di secondo livello) */
  
    #hpcontainer .menuitem {
	  position: relative; top: 0px; left: 0px;
	  width: 120px; height: 25px;
	  margin: 10px 0px 0px; border: none; padding: 0px;
	} /* blocchetto per ciascuna voce (pulsante) di menu */
	
	  #hpcontainer .menuitem .puls {
	    width: 120px; height: 25px;
		margin: 10px 0px 0px; border: none; padding: 0px;
		background-image: url('../images/bifecta.png'); display: block;
	  }
	    #hpcontainer .menuitem a.puls:hover { 
	      background-position: 0px -25px; color: #003366;
  	    }
	    #hpcontainer .menuitem a.puls {
		  background-position: 0px 0px;
		  font: 12px "Trebuchet MS", Arial, Sans-Serif; color: #003366; 
		  font-weight: normal; text-decoration: none; text-align: center; line-height: 25px;
	    }
	    #hpcontainer .menuitem p.puls {
		  background-position: 0px -25px;
		  font: 12px "Trebuchet MS", Arial, Sans-Serif; color: #20C0F6; 
		  font-weight: normal; text-decoration: none; text-align: center; line-height: 25px;
	    }

    #hpcontainer #mailbutton {
      position: absolute; top: 498px; right: 20px; 
	  width: 40px; height: 40px;
	  margin: 0px; border: none; padding: 0px;
    } /* il blocco con il pulsante per l'invio del form */
  
	  a#mail:hover { background: url('../images/2eMail.jpg'); background-position: 0px -40px; }
	  a#mail {
	    width: 40px; height: 40px;
	    background-image: url('../images/2eMail.jpg');
	    background-position: 0px 0px; display: block;
	  }
	  
    #hpcontainer #VdOcc {
      position: absolute; top: 240px; left: 30px; 
	  width: 95px; height: 75px;
	  margin: 0px; border: none; padding: 0px;
    } /* il blocco con il collegamento alla vetrina delle occasioni */
  
      #hpcontainer #VdOcc img { 
        border: none; 
      } /* l'immagine della stellina che rimanda alla vetrina delle occasioni */
  
    #hpcontainer #foot-air {
	  position: absolute; top: 600px;
	  width: 500px; height: 10px; 
	  margin: 0px; border: none; padding: 0px;
	} /* "aria ai piedi" */

	
	/* a#mail:hover { background: url('../images/2eMail.jpg'); background-position: 0px -40px; }
	a#mail {
	  width: 40px; height: 40px;
	  background-image: url('../images/2eMail.jpg');
	  background-position: 0px 0px; display: block;
	}
	*/