/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/* --------------------------------------------------------------------------- */
body {
	text-align: center;
	}
#contenitore {
	margin: 0 auto;
	text-align: left;
	width: 960px;
	}
#testa {

	}
#navigatore {

	}
#corpo {

	}
#imbottitura {

	}
div.bio .imbottitura {
	padding-bottom: 100px;
	}
div.bio .imbottitura #layout div {
	background-color:#330000;
	background-image:url(guarnieri-bio.png);
	background-repeat:repeat;
	/*background-attachment:fixed;*/
	background-position: top left;
	}
#layout {

	}
#layout div {

	}
.pulisci {
	clear: both;
	}	
.imbottitura, #testa {
	padding: 0 20px;
	}
#piede {
	clear: both;
	}
#testa ul {
	float: left;
	margin: 15px 0 5px 0;
	padding: 0;
	}
#testa ul li {
	float: left;
	/*margin: 0 20px 0 0;*/
	margin: 0 10px 0 0;
	padding: 0;
	list-style-position: inside;
	list-style-type: none;
	}
#testa ul li a {
	float: left;
	margin: 0;
	padding: 0;
	display: block;
	}
#testa p#navigatore {
	clear: both;
	}
/*
	http: //www.laboratoriocss.it/float-center-con-pseudo-elementi.html
	http: //css-tricks.com/float-center/
	http: //demosthenes.info/blog/320/float-center-achieved
*/
/* DA TESTARE */

#layout{
    width: 100%;
    position: relative;
    /*margin: 0 auto 80px;*/
    margin: 0 auto;
    overflow: hidden;
		/*padding-bottom: 1000px;*/
}
#left, #right{
    width: 47%;
    /* text-align: justify; */
}

#left{
    float: left;
}

#right{
    float: right;
}
/*#left: before, #right: before{
    content: "";
    width: 125px;
    height: 276px;
}

#left: before{
    float: right;
}

#right: before{
    float: left;
}*/
/* momentaneamente per farlo funzionare utilizzo un metodo spurio con due immagini segnaposto */
#image{
    position: absolute;
    top: 15px;
    left: 312px;
    /* border: 1px solid #ccc; */
    /* padding: 3px; */
}
#image-dx {
	float: right;
	margin-top: 5px;
	margin-left: 15px;
	}
#image-sx {
	float: left;
	margin-top: 5px;
	margin-right: 15px;
	}
/* dimensioni immagini sfondo */
#image-sx, #image-dx {
	width: 100px;
	height: 276px;
	}
/* /DA TESTARE */
.immagine-centrata {
	display: block; left: 200px; position: absolute; top: 0;
	}
img.contorna-sinistra {
	float: left;
	margin-right: 10px;
	}
img.contorna-destra {
	float: right;
	margin-left: 10px;
	}
#colonna-sinistra {
	width: 300px;
	float: left;
	margin-right: 20px;
	padding-bottom: 50px;
	}
body#video #colonna-sinistra {
	width: 150px;
	float: left;
	margin-right: 20px;
	padding-bottom: 50px;
	}
#colonna-destra {
	width: 640px;
	float: left;
	padding-bottom: 50px;
	}
body#invertito #colonna-sinistra {
	width: 400px;
	}
body#invertito #colonna-destra {
	width: 540px;
	}

#corpo-centrale {
	padding-bottom: 50px;
 	margin: 0 auto; position: relative; width: 600px;
	}
div.griglia ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
	float: left;
	}
div.griglia ul li {
	float: left;
	}
div.griglia ul li a {
	display: block;
	width: 160px;
	height: 97px;
	text-align: center;
	margin: 3px;
	}
div.griglia ul li a img {
	margin: 5px auto;
	}
p {
	margin: 10px 0;
	padding: 0;
	line-height: 150%;
	}
/* --------------------------------------------------- */
/* tipografia */
body {
	font-family: Verdana, sans-serif;
	}
div#contenitore #testa ul li, h2, h3 {
	font-family: Georgia, serif;
	text-transform: uppercase;
	font-size: 18px;
	}
div#contenitore #testa ul {
	margin-top: 0;
	}
h1 {
	font-size: 42px;
	font-family: Georgia, serif;
	padding: 20px 0 0 0;
	margin: 0 0 5px 0;
	}
h2 {
	font-size: 28px;
	margin-bottom: 15px;
	font-weight: normal;
	}
h3 {
	font-size: 26px;
	margin-bottom: 15px;
	font-weight: normal;
	}
h4 {
	font-size: 24px;
	}
h5, #testa ul li {
	font-size: 22px;
	}
h6 {
	font-size: 20px;
	}
p, li {
	/* font-size: 18px; */
	/* margin: 0 0 5px 0; */
	text-align: justify;
	/* line-height: 27px; */
	font-size: 14px;
	line-height: 22px;
	}
#colonna-sinistra ul li {
	font-size: 14px;
	line-height: 205%;
	}
#testa p#navigatore {
	font-size: 11px;
	margin-bottom: 0;
	padding-bottom: 15px;
	/* 
		utilizzo un padding invece che un margine (che annullo) per un conflitto tra OP9 su Windows e Colorbox
	*/
	font-style: italic;
	}
h1,h2,h3,h4,h5,h6,li {
	line-height: 150%;
	}
a img {
	border: 0;
	}
/* --------------------------------------------------- */
/* sfondi */
h1 {
	background: url(luigiguarnieri.gif) bottom left no-repeat;
	/* width: 730px;
	height: 135px; */
	width: 365px;
	height: 68px;
	}
h1 span {
	display: none;
	}
/* colori */
body {
	background-color: #663300;
	color: #c2968d;
	}
#contenitore {
	background-color: #330000;
	}
#contenitore.home {
	background-color:#230000;
	background-image:url(sfondo-home-4.png);
	background-repeat:no-repeat;
	/*background-attachment:fixed;*/
	background-position: top left;
	width: 960px;
	height: 1412px;
	}
body#musica div#colonna-destra-sotto {
	background-color:#330000;
	background-image:url(sfondo-musica.png);
	background-repeat:no-repeat;
	/*background-attachment:fixed;*/
	background-position: bottom right;
	width: 100%;
	height: 251px;
	margin-top: 0;
	}
body#arti-visive div#contenitore {
	background-color: #330000;
	background-image: url(guarnieri-arti-visive-350-c.png);
	background-repeat: repeat-y;
	background-position:top left;
	}
body#arti-visive div#testa {
	background-color: #330000;
	}
/* body#invertito #contenitore.bio {
	background-color:#330000;
	background-image:url(guarnieri-bio.png);
	background-repeat:repeat; */
	/*background-attachment:fixed;*/
	/* background-position: top left;
	} */
body {
	background-image:url(guarnieri-sfondo-body-5-1100.png);
	background-repeat:repeat;
	/*background-attachment:fixed;*/
	background-position: top right;
	}
/* link */
/*
	a:link, a:visited
	a:hover, a:focus, a:active
*/
h2.titoloscuro {
	color: #330000;
	font-weight: bold;
	font-size: 36px;
	line-height: 120%;
	padding-top: 10px;
	}
p#navigatore {
	color: #cc9394;
	}
#testa ul li a:link, #testa ul li a:visited, h2 a:link, h2 a:visited {
	color: #99776f;
	text-decoration: none;
	}
h2.titoloscuro a:link, h2.titoloscuro a:visited, h2.titoloscuro a:hover, h2.titoloscuro a:focus, h2.titoloscuro a:active {
	color: #330000;
	}
#testa ul li a:hover, #testa ul li a:focus, #testa ul li a:active, h2 a:hover, h2 a:focus, h2 a:active {
	color: #99776F;
	text-decoration: underline;
	}
#testa ul li.attivo a:link, #testa ul li.attivo a:visited, #testa ul li.attivo a:hover, #testa ul li.attivo a:focus, #testa ul li.attivo a:active {
	text-decoration: overline;
	background-color: #330000;
	color: #c2968d;
	cursor: default;
	}
/* scuro */

body#arti-visive #corpo ul.scuro {
	background-color: #330000;
	width: 280px;
	margin:0;
	padding: 15px 0 15px 20px;
	}

/* body#arti-visive #corpo ul.scuro li a:link, body#arti-visive #corpo ul.scuro li a:visited {
	color: #330000;
	text-decoration: underline;
	}
body#arti-visive #corpo ul.scuro li a:hover, body#arti-visive #corpo ul.scuro li a:focus, body#arti-visive #corpo ul.scuro li a:active {
	color: #330000;
	text-decoration: none;
	}
body#arti-visive #corpo ul.scuro li.attivo a:link, body#arti-visive #corpo ul.scuro li.attivo a:visited, body#arti-visive #corpo ul.scuro li.attivo a:hover, body#arti-visive #corpo ul.scuro li.attivo a:focus, body#arti-visive #testa ul.scuro li.attivo a:active {
	text-decoration: overline;
	color: #330000;
	cursor: default;
	} */

/* /scuro */

#colonna-sinistra ul {
	margin: 0 0 15px 0;
	padding: 0;
	}
#colonna-sinistra ul li ul {
	margin: 0 15px;
	padding: 0 10px;
	border-left: solid 1px #99776f;
	}
#colonna-sinistra ul li {
	margin: 0;
	padding: 0;
	}
#colonna-sinistra ul li ul li {
	margin: 0;
	padding: 0;
	}

#colonna-sinistra ul li, #colonna-sinistra ul li ul li {
	margin-bottom: 15px;
	}
#colonna-sinistra ul li.primo, #colonna-sinistra ul li ul li.primo {
	margin-top: 15px;
	}

#colonna-sinistra ul li.marginesopra, #colonna-sinistra ul li ul li.marginesopra {
	margin-top: 0;
	}
#colonna-sinistra ul li a {
	border: solid 1px #330000;
	padding: 5px;
	background-color: #330000;
	}

p#navigatore a:link, p#navigatore a:visited, #colonna-sinistra ul li a:link, #colonna-sinistra ul li a:visited {
	color: #c2968d;
	text-decoration: none;
	}
p#navigatore a:hover, p#navigatore a:focus, p#navigatore a:active, #colonna-sinistra ul li a:hover, #colonna-sinistra ul li a:focus, #colonna-sinistra ul li a:active {
	color: #c2968d;
	text-decoration: underline;
	}
#colonna-sinistra ul li.attivo a:link, #colonna-sinistra ul li.attivo a:visited, #colonna-sinistra ul li.attivo a:hover, #colonna-sinistra ul li.attivo a:focus, #colonna-sinistra ul li.attivo a:active {
	border: solid 1px #7E615B;
	background-color: #230000;
	text-decoration: none;
	cursor: default;
	}
div.griglia ul li a:link, div.griglia ul li a:visited {
	background-color: #99776f;
	}
div.griglia ul li a:hover, div.griglia ul li a:focus, div.griglia ul li a:active {
	background-color: #0092ef;
	}
div#colonna-sinistra ul li {
	text-align: left;
	}
p.separatore {
	margin-top: 10px;
	padding-top: 10px;
	border-top: solid 1px #7e615b;
	}
p.separatore a:link, p.separatore a:visited {
	color: #99776f;
	text-decoration: none;
	}
p.separatore a:hover, p.separatore a:focus, p.separatore a:active {
	color: #99776F;
	text-decoration: underline;
	}
div.griglia ul li a img {
	border: solid 1px #330000;
	}
div.expandable a:link, div.expandable a:visited {
	color: #c2aa72;
	text-decoration: none;
	}
div.expandable a:hover, div.expandable a:focus, div.expandable a:active {
	color: #c2aa72;
	background-color: #000;
	}