/*

	foglio stile CSS per "Liuteria Corazzol"
        scritto da Giovanni Corazzol
        stile: due colonne, liquido, con bordo grafico, colori web-safe,
        heading con immagine tipo banner e menu inline, footer, box decorato
        per colonna laterale, immagini incorniciate


*/

*
{
padding: 0em;
margin: 0em;
}

/* imposta colore ed immagine sfondo pagina - rende sfondo visibile su margine superiore ed inferiore; imposta font */
body
{
background: #ffffff url('images/sfondo.gif');
padding: 15px 0px;
font-family: "Trebuchet MS", Georgia, "Times New Roman", serif;
font-size: 9pt;
color: black;
}

/* elimina le righe orizzontali quando si usa il foglio stile */ 
hr{
visibility: hidden;}

/* riquadro principale */

#pagina
{
width: 90%; /* larghezza non fissa, ma relativa alla dimensione della finestra del browser */
margin: 0 auto;
border: solid 3px #999; /* grigio medio */
background-color: #ffc; /* giallo chiaro */
/* nota: visibile solo su colonna sinistra */
}

/* imposta il padding che separa i contenuti dal bordo pagina */
#contenuti
{
padding: 0em 0em 1.5em 1.5em;
}

/* la colonna sinistra "collassa" con la finestra del browser ("liquida") */
#col_sinistra
{
clear: left;
float: left;
width: 100%;
margin-right: -19em;
}

/* contenuto della colonna sinistra forzato per non sovrapporsi alla colonna destra */
#stringi
{
margin: 1.5em 20em 0em 0em

}
/* ampiezza della colonna destra prefissata */
#col_destra
{
float: right;
width: 16em;
padding: 1.5em;
background: #fc6; /* giallo-arancio chiaro */
}

#header
{
position: relative;
display: block;
padding: 2em;
background: #555; /*grigio*/
}

#menu
{
background: #555; /*grigio*/
display: block;
padding: 1.5em 1em;
border-bottom: solid 3px #999;
}

#menu ul
{
list-style: none;
}

#menu li
{
display: inline;
background: #600; /* bruno */
font-size: 1.2em;
}

#menu a
{
color: #fff;

text-decoration: none;

}

#menu a:hover
{
background: #C63; /*mattone*/
text-decoration: underline;
}

#menu a.active
{
background: orange;
}

#fotobanner
{
display: block;
height: 200px;
background: #555 url('images/woodbanner.jpg') no-repeat;
}

#footer
{
position: relative;
clear: both;
background: #ccc; /* grigio chiaro */
border-top: solid 3px #999;
padding: 1.5em;
}

#footer p
{
font-family: monospace;
font-size: 90%;
letter-spacing: -0.1em;
text-align: center;
margin-bottom: 0.3em;
}

img
{
padding: 5px;
border: 5px groove #630;
background: white;
margin-top: 1.5em;
margin-bottom: 1.5em;
}

img.left
{
position: relative;
float: left;
margin-left: 0;
margin-right: 1.5em;
}

img.right
{
position: relative;
float: right;
margin-left: 1.5em;
margin-right: 0;
}

img.noframe
{
border: none;
margin: 0;
padding: 0;
}

/* imposta spaziatura e giustificazione del testo */
p, li
{
line-height: 1.5em;
margin-bottom: 0.5em;
text-align: left;
}

h2
{
clear: both;
display: block;
text-align: center;
border-bottom: 4px solid #630;
margin-top: 1.75em;
margin-bottom: 1em;
font-size: 1.5em;
}

h3
{
margin-top: 1em;
margin-bottom: 0.5em;
font-size: 1.25em;
text-align: left;
font-style: italic;
}

.box /* riquadro con margine dentellato */
{
position: relative;
background: #ffc;
padding: 0.5em;
border: dotted 4px #fc6; /* nota usare valori pari per ampiezza del margine */
margin: 1em 0.5em;
}


.logo
{
font-weight: bold;
color: white;
font-size: 2em;
letter-spacing: 0.3em;
margin-bottom: 0.5em;

}

.sublogo
{font-weight: normal;
color: orange;
font-size: 1.3em;
letter-spacing: 0.2em;
margin-bottom: 0.2em;
}

p.soprafoto
{
font-family: monospace;
font-size: 0.8em;
}