/* ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- */
/* 																													 */
/* Foglio per layput 3 colonne (testata / menusx - pagina - menudx)													 */
/* http://bluerobot.com/web/layouts/index.html									              						 */
/* 																	           	             						 */
/* ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- */

html {
/*	height: 100%; /* interessante anche auto su tutti questi  */
}

body {
	color:white;
	background-color: black; /* interessante anche il brown, da valutare */
	scrollbar-base-color: black;
	scrollbar-arrow-color: white;

/*	background-image: url('../layimg/Guitar_telecaster_trasp_bn.gif');
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: center; */

	text-align: center;
	margin: 10px 0px 0px 0px;  /* top,right,bottom,left */
	padding:0px;
	font:11px verdana, arial, helvetica, sans-serif;
/*	height: 200px; /* interessante anche auto su tutti questi  */
    overflow: auto; /* scroll */
}

/* ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- */
/* ELEMENTI DEL LAYOUT																								 */
/* ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- */

/* BOX CHE CONTIENE TUTTO */
#box {
/*	background-color: #FFFFFF;  */
	text-align: left;
	width: 800px; /* era 768, deve essere uguale alla somma di #left + #middle + #right */
	margin-top: 0px; /*era 25*/
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	height: auto; /* era 100 % interessante anche auto su tutti questi  */
}

/* IMMAGINE DI SFONDO DELLA TESTATA */
#top {
/*	background-color: black; */
	text-align: center;
}

/* MENU DI SX LUNGO TUTTA LA PAGINA FINO IN FONDO GIU*/
#left {
/*	background-color: #CCCCCC;  */
	float: left;
	width: 140px;	/* era 130 */
	height: auto; /* era 100% interessante anche auto su tutti questi  */
	margin: 0px;
}

/* CONTENUTO DELLA FINESTRA CENTRALE (PRINCIPALE) */

/* Il posizionamento dei tre div avviene come per un gioco ad incastro. Il div #left si posiziona
 sul bordo del box contenitore, il div #middle cercherà di fare altrettanto, ma troverà al suo
 fianco #left e, se c'è spazio si posizionerà accanto ad esso. Così avverrà per #right rispetto
 a #middle. Nel nostro caso lo spazio c'è per tutti e tre! È preciso. Se fate la somma delle tre
 larghezze avrete: 130 + 508 + 130 = 768. La larghezza del div #box. */


/* CONTENUTO DELLA FINESTRA CENTRALE (PRINCIPALE)*/
#middle {
	width: 520px; /* era 768, poi 478, poi 488 */
	float: left;
	height: 520px; /* 21/11/08 era 480 13/10/08 era 450px era 100% con scroll ok, interessante anche auto su tutti questi  */
	margin: 20px 0px 0px 0px;  /* top,right,bottom,left   */
    overflow: auto; /* scroll */
}

/* MENU DI DX LUNGO TUTTA LA PAGINA FINO IN FONDO GIU*/
#right {
/*	background-color: #CCCCCC; */
	background-repeat: repeat;
/*	border:1px solid gold; /* attenzione al tottale dei px di #middle*/
	float: left;
	width: 140px; 	/* era 130, il totale di menu sx + middle + menu dx deve essere = a whidth del box (800) */
	height: auto; /* era 100 % interessante anche auto su tutti questi  */
	margin: 0px;
}

/* TABELLE INTERNE DA METTERE DENTRO DIV MIDDLE (attenzione alla somma delle dimensioni) */

/* CONTENITORE DELLE TABELLINE */
#box_middle {
	height: auto; /* era 100 px   */
	width: 99.5%;
	border:0px solid white;
	overflow: auto;
}

/* TABELLINE */
#tab_left, #tab_middle, #tab_right, #tab_1di2, #tab_2di2 {
	float: left; /* era left */
	height: 2em; /* era 100 px   */
	margin: 0px;
	border:0px solid white;
	overflow: auto;
}

#tab_left {
	width: 33%;	/* era 130 */
}

#tab_middle {
	width: 33%; /* era  */
}

#tab_right {
	width: 32.5%; 	/* era 130, il totale di menu sx + middle + menu dx deve essere = a whide del box (768) */
}

#tab_1di2 {
	width: 50%;	/* era 200  */
}

#tab_2di2 {
	width: 49.0%;	/* era 200 */
}


/* ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- */


/* h1 {
	margin:0px 0px 15px 0px;
	padding:0px;
	font-size:28px;
	font-weight:900;
	color:#ccc;
}

h2 {
	font:bold 12px/14px verdana, arial, helvetica, sans-serif;
	margin:0px 0px 5px 0px;
	padding:0px;
}	*/

/* ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- */
/* Titolo di primo livello */
h1 {
	font-size:24pt;
	}

/* Titolo di secondo livello */
h2 {
	font-size:20pt;
	}

/* Titolo di terzo livello */
h3 {
	font-size:16pt;
	}

/* Titolo di quartolivello */
h4 {
	font-size:12pt;
	}

/* Titolo di quinto livello */
h5 {
	font-size:10pt;
	}

/* Titolo di sesto livello */
h6 {
	font-size:8pt;
	}

h1, h2, h3, h4, h5, h6, p.gruppi:first-letter
 {
	font-family: 'BankGothic Md Bt', HancockParkLaser , 'Arial Black', Impact, 'Century Gothic', Verdana, Tahoma, Arial, Helvetica;
    color: orange;
	}

/* ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- */

/* p {
	font:11px/20px verdana, arial, helvetica, sans-serif;
	margin:0px 0px 16px 0px;
	padding:0px;
} */

/* ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- */
/* Paragrafo generico                                          */
/* ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- */

p {
	color: white;
	text-align: left;	/* il testo giustificato mi disallinea i menu su IE */
	text-indent: 15px;
/*	font-size:10pt; */
	margin: 0px 0px 16px 0px;  /* top,right,bottom,left   */
	padding-left: 20px; /* era 30 px */
	padding-right: 20px; /* era 30 px */
	}

p, ul, h3 {
	font-family: 'Century Gothic', Verdana, Tahoma, Arial, Helvetica;  
	}

p:first-letter
	{
	font-weight: bold; /* era bold */
/*	font-size: large; */
	}
	
p.date_concerti {
	text-indent: 0px;
	text-align: left;
	margin: 0px;
	padding: 0px;
	text-align: left
	}

p.date_concerti:first-letter
	{
	font-weight: normal; /* era bold */
/*	font-size: x-large; */
/*	color: red   */
	}

p.gruppi:first-line {
	color: gold;
	font-variant: small-caps
	}

/* Links ----- ----- ----- ----- ----- ----- ----- */

a {
	color: white;
/*	font-size:11px;	*/
/*	font-weight:600; */
	text-decoration: none;
}

/* a:link {color:#09c;} */
/* a:visited {color:#07a;} */
/* a:hover {background-color:#eee;} */

A:link {
	color: gold; /* #FF9933  goldenrod*/ 
	text-decoration: underline;
	font-style: italic;
	font-weight: normal;
	}

A:visited {
    color: darkgoldenrod; /* darkgoldenrod */
	text-decoration: none; /* line-through;  */
	font-style: italic;
	font-weight: normal;
	}

A:hover {
    color: white; 
    text-decoration: underline overline;
	font-style: normal;
/*	font-size: 105%;	*/
	font-weight: bold;
	text-transform: uppercase;
	}

A:focus {
	color: red; /* non funziona in IE */
	}

/* BARRA DEI MENU SUPERIORE DETTO BARRETTA DEI MENU SUPERIORE */
#barretta {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 9px;
	font-weight: bold;
	color: #FFFFFF;
	border-top: 2px solid #CCCCCC;
	border-bottom: 2px solid #CCCCCC;
	padding-left: 1px;
	padding-top: 2px;
	padding-bottom: 2px; back:#000000
}

#barretta a {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 9px;
	font-weight: bold;
	color: #FFFFFF;
	text-decoration: none;
	margin-right: 2px; back:#000000
}

#barretta a:hover {
	color: #000000;
	text-decoration: none; back:#FFFF66
}

/* ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- */

/* CLASSI PER IL ROLLOVER DEI MENU DI NAVIGAZIONE */

.homepage {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	padding-left: 0px;
	border-bottom: 1px solid #000000;
}

.sei_nella_pag {
	color: silver; 
	font-weight: bold; 
	font-style: oblique; 
	font-variant: small-caps;
}


.menu {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: bold;
/*	text-align: center;  */
	color: #000000;
/*	background-color: #cccccc; */
	padding-top: 50px;
}

.menu a {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: bold;
	
	-moz-opacity:0.7; 
    filter:alpha(opacity=70); 
    opacity: 0.7;
	
	color: black;	/* nb mettendo black faccio scomparire il link  */
	text-decoration: none;
	
/*	background-color: #000000;  */
	display: block;					/* ogni link su una riga diversa, senza fare uso di paragrafi */

	width: auto;
	border-bottom: 0px solid #000000;
	border-right: 0px solid #000000;
	border-left: 0px solid #000000;
	border-top: 0px solid #FFFFFF;
	padding: 0px;
}

.menu a:hover {
/*	background-color: #505050 ; */
	color: white;	/* nb mettendo white faccio comparire il link  */
    text-decoration: underline overline;
	-moz-opacity:1.0;  
    filter:alpha(opacity=100); 
    opacity: 1.0;
}

/*.menu a:visited {
    color: Gray; 
	text-decoration: line-through; /* line-through; 
	font-style: italic;
	font-weight: normal;  
	}  */

/* ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- */

/* CLASSI PER IL MENU DEI PREFERITI */

.preferiti {
	border-top:1px solid #000000; border-bottom:1px solid #000000; font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: bold;
	color: #000000;
	padding-top: 5px;
	padding-right: 1px;
	padding-bottom: 1px;
	padding-left: 1px;
	line-height: 1.5em; back:#a0bcd9
}

.testopref {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: bold;
	color: #FFFFFF;
	padding-top: 2px;
	padding-right: 1px;
	padding-bottom: 2px;
	padding-left: 1px; back:#21528e
}

/* ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- */

/* BOX RICERCA + PILLOLE */
#ricerca {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: bold;
	color: #FFFFFF;
	text-align: center;
	margin: 0px;
	width: auto;
	padding-top: 2px;
	padding-bottom: 5px; back:#21528e
}

#ricerca img {
	vertical-align: middle;
}
form {
	margin: 0px;
	padding: 0px;
}

input {
	vertical-align: middle;
}

#pillola {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-weight: bold;
	color: #000000;
	padding-top: 5px;
	padding-right: 3px;
	padding-bottom: 5px;
	padding-left: 3px;
	back:#acd0e6
}

.classpill {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: bold;
	color: #0000FF;
}

/* TABELLINA FISSA A PIE' DI PAGINA */
#bottom {
    position: fixed !important; /* per compatibilità con IE ver 6 e 7 */
    position: absolute;
	bottom: 3px; 
	left: 20%; 
	width:60%;
	padding:10px;
	color: silver;
	z-index:1;
	voice-family: "\"}\"";
	voice-family:inherit;
}
/* PER OPERA 5 */
body>#bottom {width:60%;}

/* TABELLINA FISSA IN ALTO A DESTRA */

#topDx {
	position:absolute;
	top:10px; /* allineamento verticale del box */
	right:10px; /* allineamento orizzonatale del box */
	border:1px solid gold; /*era 1px dashed black */
	text-align:center;
/*	color: red; /* era silver */
	padding: 5px;

		-moz-opacity:1.0; 
    	filter:alpha(opacity=100); 
    	opacity: 1.0;
    	z-index:30;

	voice-family: "\"}\"";
	voice-family:inherit;
	width:140px;
/*	color: yellow; */ /* colore del testo */
}
/* PER OPERA 5 */
body>#menudes {width:140px;}

#topsx {
	position: absolute;
	top:10px; /* allineamento verticale del box */
	left:10px; /* allineamento orizzonatale del box */
	border:1px solid gold; /*era 1px dashed black */
	text-align:center;
	color:silver;
	padding:5px;
	z-index:1;
	voice-family: "\"}\"";
	voice-family:inherit;
	width:140px;
/*	color: yellow; */ /* colore del testo */
}
/* PER OPERA 5 */
body>#menudes {width:140px;}

/* POPUP FISSO IN ALTO A DESTRA */
#popupDx {

    position: fixed !important; /* per compatibilità con IE ver 6 e 7 */
    position: absolute;

	background-color: darkred;

	bottom:18%; /* allineamento verticale del box */
	right:25%; /* allineamento orizzonatale del box */
	border:1px solid gold; /*era 1px dashed black */
	text-align:center;
	color:white;
	padding:5px;
	z-index:15;
	voice-family: "\"}\"";
	voice-family:inherit; 
	width:160px;
/*	color: yellow;  /* colore del testo */
}

/* ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- */

/* ID ALTERNATIVE PER GESTIONE LAYOUT MENU */
#testata {
	margin:0px;
	padding:0px;
	height:70px;
	background-image: url('../sfondo.gif');back:#000099
}

#contenuto {
	width:auto;
	/* alto - dx - ?? - ?? */
	border:1px solid black;
	padding:10px; margin-left:170px; margin-right:210px; margin-top:20px; margin-bottom:20px; back:white
}

/* MENU DI SX */
#menusin {
	position:absolute;
	width:150px;
	top:130px; /* allineamento verticale del menu */
	left:20px;
	border:1px dashed black;
	padding:10px;
	z-index:2;

	/* Questo è il trucco per ingannare Explorer 5 */
	voice-family: "\"}\"";
	voice-family:inherit;
	width:128px; back:#eee
}

/* CON QUESTA DICHIARAZIONE RISOLVIAMO UN BUG DI OPERA 5 */
body>#menusin {width:128px;}

#menudes {
	position:absolute;
	width:190px;
	top:30px; /* allineamento verticale del menu era top:130px */
	right:10px; /* era right:20px */
	border:1px dashed black;
	padding:10px;
	z-index:1;
	voice-family: "\"}\"";
	voice-family:inherit;
	width:168px; back:#eee
}
/* PER OPERA 5 */
body>#menudes {width:168px;}

/* ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- */

.opaco {
    filter:alpha(opacity=60); /* per IE */
    opacity: 0.7;		/* per browser tipo Opera */
     -moz-opacity:0.7; /* per browser tipo Mozzilla */
}

.luminoso {
    filter:alpha(opacity=100); 
    opacity: 1.0;
     -moz-opacity:1.0;
}

.opaco {
	color: black;
/*	background-color: black;  */
}

.inattivo {
    filter:alpha(opacity=30); 
    opacity: 0.4;
     -moz-opacity:0.4;
}

/* ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- */
/* Smooth gallety override dimensioni standard di 460x365 */
#myGallery {
	width: 460px;
	height: 365px;
	}
	
/* ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- */

/* Classi per il testo: */
.testo_s1 { font-family: 'Century Gothic', Verdana, Tahoma, Arial, Helvetica; font-size: 70%}	/* size 1 70%*/
.testo_s2 { font-family: 'Century Gothic', Verdana, Tahoma, Arial, Helvetica; font-size: 84%}	/* size 2 84% */
.testo_s3 { font-family: 'Century Gothic', Verdana, Tahoma, Arial, Helvetica; font-size: 100%}  /* size 3 100% */
.testo_s4 { font-family: 'Century Gothic', Verdana, Tahoma, Arial, Helvetica; font-size: 120%}  /* size 4 120% */
.testo_s5 { font-family: 'Century Gothic', Verdana, Tahoma, Arial, Helvetica; font-size: 150%}  /* size 5 150% */
.testo_s6 { font-family: 'Century Gothic', Verdana, Tahoma, Arial, Helvetica; font-size: 200%}  /* size 6 200% */
.testo_s7 { font-family: 'Century Gothic', Verdana, Tahoma, Arial, Helvetica; font-size: 300%}  /* size 7 300% */
/* ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- */
	
/* Classi per l'immagine di sfondo */

.explorer, .telecaster, .precision {
	background-repeat: no-repeat;
	background-position: top right; /* era top right */
/*	background-attachment: fixed; */
	}

.explorer {
	background-image: url('../layimg/Guitar_explorer_trasp_bn.gif');
	}

.telecaster {
	background-image: url('../layimg/Guitar_telecaster_trasp_bn.gif');  
/*	background-image: url('../layimg/telecaster_trasp_bn.gif'); */
	}
	
.precision {
/*	background-image: url('../layimg/Precision_vintage_H420PX_TRASP_bn.gif');  */
	background-image: url('../layimg/Precision_trasp_bn.gif'); 
	}
	
marquee {
	color: yellow; 
	font-weight: bold; 
	font-style: oblique; 
	font-variant: small-caps;
}