/*                  Osteria Alba chiara - Gravina in Puglia, Bari                  */
  /* Foglio di stile (CSS) realizzato da Marco Benvestito per "Cielo a pecorelle..." */

  body { 
	background-color: #CCDEB4;
    margin: 0px; border: none; padding: 0px;
	font: 13px "Trebuchet MS", Tahoma, Arial, Sans-serif;
	color: #663300; font-weight: normal; text-decoration: none;
	text-align: justify; margin: 5px 0px 3px; border: none; padding: 0px;
  }

  #pagecentering { 
    position: relative; top: 0px; left: 50%; 
	width: 760px; height: 460px;
    margin: 5px 0px 0px -380px; border-bottom: none; padding: 0px;
  } /* si tratta del blocco contenitore a posizionamento relativo 
	   che permette la centratura del sito nel browser, a qualunque risoluzione di schermo */

    #head {
      position: absolute; top: 0px; left: 0px; 
	  width: 760px; height: 80px;
      margin: 0px; border: none; padding: 0px;
      background-image: url(../images/pagestru/11-headerM.jpg); 
	  background-repeat: repeat-x;
    } /* lo header, in tutte le pagine con logo-cuoco e indirizzo ricurvo */

      #headerleft {
        position: absolute; top: 0px; left: 0px; 
	    width: 65px; height: 80px;
        margin: 0px; border: none; padding: 0px;
        background-image: url(../images/pagestru/11-headerL.jpg); 
      } /* soltanto per la curva alto-sx */

      #headerlogo {
        position: absolute; top: 0px; left: 105px; 
	    width: 186px; height: 80px;
        margin: 0px; border: none; padding: 0px;
      } /* soltanto per il logo-cuoco */
	  
        #headerlogo img {
	      width: 186px; height: 80px;
          margin: 0px; border: none; padding: 0px;
        }

      #headerstreetaddress {
        position: absolute; top: 0px; right: 80px; 
	    width: 186px; height: 80px;
        margin: 0px; border: none; padding: 0px;
      } /* soltanto per l'indirizzo ricurvo */ 

        #headerstreetaddress img {
	      width: 180px; height: 80px;
          margin: 0px; border: none; padding: 0px;
        }

      #headerright {
        position: absolute; top: 0px; right: 0px; 
	    width: 40px; height: 80px;
        margin: 0px; border: none; padding: 0px;
        background-image: url(../images/pagestru/11-headerR.jpg); 
      } /* soltanto per la curva alto-dx */ 

    #main {
      position: absolute; top: 80px; left: 0px; 
	  width: 760px; height: 340px;
      margin: 0px; border: none; padding: 0px;
    } /* parte principale, a sua volta suddivisa in parte sinistra, centro e destra */

      #mainleft {
        position: absolute; top: 0px; left: 0px; 
	    width: 150px; height: 340px;
        margin: 0px; border: none; padding: 0px;
        background-image: url(../images/pagestru/12-mainL.jpg); 
      } /* per la curva sx nella quale entreranno i pulsanti di menu */

        #menu {
          position: relative; top: 20px; left: 0px; 
	      width: 140px; height: 300px;
          margin: 0px; border: none; padding: 0px;
        } /* per l'area dei menu, a cavallo della "parentesi" sinistra */
		
		  .menuitem {
		    position: relative; top: 0px; left: 0px;
			width: 140px; height: 40px;
			margin: 0px; border: none; padding: 1px 0px 2px;
		  } /* per ogni singolo pulsante del menu */ 
		  
			a.navibutton:hover {
			  background-image: url('../images/pagestru/pulsante-bi.png'); background-position: 0px -40px;
		      color: #663300; font-weight: bold; 
            }
	        a.navibutton {
			  width: 100px; height: 40px; display: block;
              background-image: url('../images/pagestru/pulsante-bi.png'); background-position: 0px 0px;
			  padding: 0px 10px 0px 30px;
		      font: 13px "Trebuchet MS", Tahoma, Arial, Sans-serif; 
			  color: #557766; font-weight: normal;
		      text-decoration: none; text-align: center; line-height: 48px;
	        }
			
	        .menuitem p {
			  width: 100px; height: 40px; display: block;
              background-image: url('../images/pagestru/pulsante-bi.png'); background-position: 0px -40px;
			  margin: 5px 0px 0px; padding: 0px 10px 0px 30px;
		      font: 13px "Trebuchet MS", Tahoma, Arial, Sans-serif; color: #663300; 
		      font-weight: bold; text-decoration: none; text-align: center; line-height: 48px;
	        }
	  
      #maincenter {
        position: absolute; top: 0px; left: 150px; 
	    width: 480px; height: 340px;
        margin: 0px; border: none; padding: 0px;
        background-image: url(../images/pagestru/12-mainM.jpg); 
      } /* area "main" del sito web */

        #contents {
          position: absolute; top: 20px; left: 15px; 
	      width: 460px; height: 326px; overflow: auto;
          margin: 0px auto; border: none; padding: 0px;
        } /* riquadro dei contenuti dell'area "main" del sito web */
		
		h3 { margin: 5px 0px 5px 15px; border: none; padding: 0px; }
		
		p { margin: 5px 0px 3px; border: none; padding: 0px; }
		
		a:hover { font-color: #663300; }
		a { font: 11px "Trebuchet MS", Tahoma, Arial, Sans-serif; color: #557766;
		   text-decoration: none; text-align: justify; 
		   margin: 5px 0px 3px; border: none; padding: 0px;
		}
		
		ul { font: 13px "Trebuchet MS", Tahoma, Arial, Sans-serif; color: #663300;
		   text-decoration: none; text-align: left; 
		   margin: 5px 0px 3px 10px; border: none; padding: 0px;
		}
		
		  li { margin: 5px 0px 3px 10px; }
		
      #mainright {
        position: absolute; top: 0px; left: 630px; 
	    width: 130px; height: 340px;
        margin: 0px; border: none; padding: 0px;
        background-image: url(../images/pagestru/12-mainR.jpg); 
      } /* per la curva dx col sole, nella quale c'e' anche il solleone */

    #foot {
      /* il pie' di pagina, in tutte le pagine */
      position: absolute; top: 420px; left: 0px; 
	  width: 760px; height: 20px;
      margin: 0px; border: none; padding: 0px;
      background-image: url(../images/pagestru/13-foot.jpg); 
    }
	
	  #foot2 {
        /* il box per il numero di partita I.V.A. e il "pow by" */
        position: relative; top: 0px; left: 20px; 
	    width: 520px; height: 20px;
        margin: 0px auto; border: none; padding: 0px;
      }
	  
	    #IVA {
          /* il sottobox per il numero di partita I.V.A. */
		  position: relative; top: 0px; left: 0px; float: left;
          width: 180px; height: 20px;
          margin: 0px auto; border: none; padding: 0px;
        }

	      #IVA p {
            font: 10px "Trebuchet MS", Tahoma, Arial, Sans-serif; color: #557766; 
		    font-weight: normal; text-decoration: none; line-height: 12px; text-align: left;
          }

	    #pow-by {
          /* il sottobox per il "powered by..." */
		  position: relative; top: 0px; right: 0px; float: right;
          width: 280px; height: 20px;
          margin: 0px auto; border: none; padding: 0px;
		  
        }

	      #pow-by p {
            font: 10px "Trebuchet MS", Tahoma, Arial, Sans-serif; color: #557766; 
		    font-weight: normal; text-decoration: none; line-height: 12px; text-align: right;
          }

	      #pow-by a:hover { color: #663300; }
	      #pow-by a {
            font: 10px "Trebuchet MS", Tahoma, Arial, Sans-serif; color: #557766; 
		    font-weight: normal; text-decoration: none; line-height: 12px; text-align: right;
          }

	.banner-row { 
      position: relative; top: 0px; left: -2px;
	  width: 400px; margin: 10px auto 0px; border: none; padding: 0px;
    } /* per le righe con i banner, nella pagina dei link */
	
	  .banner-row img {
	    position: relative; top: 0px; left: 0px;
        margin: 0px; border: none; padding: 0px;
	  }

      /* effetto "hover" sui 3 banner, per la pagina dei link */

      #ParcoAltaMurgia:hover { border: 2px solid #9C9906; }
      #ParcoAltaMurgia { width: 396px; height: 90px; margin: 0px; border: 2px solid #636363; padding: 0px; }

      #Gravina:hover { border: 2px solid #CF093F; }
      #Gravina { width: 396px; height: 80px; margin: 0px; border: 2px solid #009CDE; padding: 0px; }

      #SassiMT:hover { border: 2px solid #46A072; }
      #SassiMT { width: 396px; height: 80px; margin: 0px; border: 2px solid #909090; padding: 0px; }

      #Altamura:hover { border: 2px solid #CC3333; }
      #Altamura { width: 396px; height: 90px; margin: 0px; border: 2px solid #003399; padding: 0px; }

	/* effetto "accordion" per la pagina degli ambienti (interni/esterni)        */
    /* http://www.leigeber.com/2008/04/lightweight-javascript-and-css-accordion/ */
	/* modificato e rimodificato ad hoc, of course...                            */
  	
    #ambienti { 
      position: absolute; top: 20px; left: 15px; 
	  width: 458px; height: 300px; overflow: hidden;
      margin: 0px auto; border: none; padding: 0px;
	}
	
    #dovesiamo { 
      position: absolute; top: 20px; left: 15px; 
	  width: 458px; height: 310px; overflow: hidden;
      margin: 0px auto; border: none; padding: 0px;
	}
	
    .header:hover { color: #663300; background-color: #D7E6E3; }
	.header {
	  width: 448px; margin: 0px; border: 1px solid #663300; padding: 4px; 
	  font: 13px "Trebuchet MS", Tahoma, Arial, Sans-serif; color: #557766;
	  font-weight: bold; text-align: center; cursor: pointer; 
	}
	
    .content { overflow: hidden; }
	
	.text {
	  width: 448px; overflow: auto; 
	  border-top: none; border-bottom: 1px solid #663300;
	  border-left: 1px dashed #663300; border-right: 1px dashed #663300; 
	  padding: 4px;
	}
	
	h4 {
      font: 13px "Trebuchet MS", Tahoma, Arial, Sans-serif;
	  color: #663300; text-decoration: underline;
	  text-align: left; margin: 5px 5px 3px; 
	}