/* @override http://127.0.0.1/SitiPicov/NA_GUARA/naguara.it/css/stili.css */

/* BROWSERS CSS RESET */
html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,fieldset,input { margin: 0; padding: 0; }
h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,em,strong,th { font-size: 1em; font-weight: normal; font-style: normal; }
ul,ol { list-style: none; }
fieldset,img { border: none; }
caption,th { text-align: left; }
table { border-collapse: collapse; border-spacing: 0; }

strong { font-weight: bold; }
em { font-style: italic; }

body {
	text-align: center; /* Centre in IE pre6 che ignora il margin auto del main */
	background: #094093 url(../immagini/sfondo_pagina.jpg) repeat-x;
	padding-top: 10px; /* non lo metto qui altrimenti influisce anche sulle altre pagine tipo iframe che caricano lo stesso css */
}


#main-sizer {
	width: 90%; /* Se utilizzo la % non devo impostare la width su main-sizer-inside */
	width1: 750px; /* Se utilizzo la fissa devo impostare lo stesso valore in main-sizer-inside */
	margin:0 auto; /* la centratura la imposto su quello più esterno */
	text-align: left; /* Ripristina la centratura di default dopo il patch per IEpre6 sul body */	
	border1: 2px #7E2506 solid;
	padding1: 5px;
	padding-top: 12px;
	background1:#0ff;
}
#main-sizer-inside {
	width1: 750px; /* PATCH IEpre6: imposto qui le dimensioni=#main-sizer.width cosi i suoi pad e border vanno SEMPRE esterni anche su IEpre6 */
}


#main {
	background-color1: #e0e;
}


#header {
	float1: left; /* FIX: questo è importante altrimenti i div interni con float non determinano la dimensione di questo div */
	width1: 100%; /* FIX: questo è importante altrimenti i div interni con float non determinano la dimensione di questo div */
	/* se le metto su quello principale allora lo devo mettere anche su quelli interni per evitare il problema sopra */
	/* in alternativa posso non metterlo qui ed eliminarlo anche da quelli interni */
	line-height: 0px; /* FIX altrimenti se il div contiene una img viene aggiunta altezza extra indesiderata perche img ? inline come il testo*/
	font-size: 0px; /* FIX ulteriore per iCab */
}
#header img { font-size: 0px}

#menu {
	background-image: url(../immagini/sfondo_menu.gif);
	background-color1: #f00;
	height: 164px;
	overflow: hidden; /* FIX a causa del padding-top per la centratura verticale del testo IE 6 aumenta l'altezza del tasto (IE 5 e 7 OK)*/
	text-align: center; /* centra le scritte dei tasti (In IE5 Mac funziona solo left o right-> metto un <br >&nbsp; alla fine del testo dei tasti per fare due righe */
	margin-bottom: 20px;
}
#menu div.leftcap { /* se non metto le img dentro questi DIV IE5 ci mette un bordo extra */
	background-image: url(../immagini/menubar_sx_dx_cap.gif);
	background-color1: #f00;
	float: left;
	width: 2%; /* FIX: IE 5 Mac */
	height: 164px;
}
#menu div.rightcap {
	background-image: url(../immagini/menubar_sx_dx_cap.gif);
	background-position: right 0;
	float: right;
	width: 2%; /* FIX: IE 5 Mac */
	height: 164px;
}
#menu li {
	display: inline;
	float: left;
	width: 16%;
}
#menu li.last {
	 /* FIX IE 5-6-7 riduco il margine del li per evitare che vada a capo a causa del calcolo errato delle % di larghezza dei li */
	 /* NB: visivamente non succede nulla ma nel calcolo delle larghezze si tiene conto della larghezza ridotta quindi tutti i li entrano sempre nel 100% di spazio */
	margin-right:-10px;
}
#menu li a {
	float1: left;
	line-height: 14px; /* lo posso mettere = all'altezza cosi lo sfondo viene esteso a tutta l'altezza ed il testo si centra verticalmente ma non va bene con testo su più righe -> metto display block ed imposto l'altezza*/
	display: block; 
	width: 87px;
	margin: 0 auto;
	height: 164px;
	padding-top: 7px;
	color: #000;
	text-decoration: none;
	font-weight: bold;
	font-size: 11px;
	font-family: Tahoma, Arial, Helvetica, Geneva, SunSans-Regular, sans-serif;
}
#menu li.doubleline a {
	padding-top: 8px;
}
#menu li.s1 a {
	background-image: url(../immagini/chisiamo_off.gif);
}
#menu li.s2 a {
	background-image: url(../immagini/statuto_off.gif);
}
#menu li.s3 a {
	background-image: url(../immagini/progetti_off.gif);
}
#menu li.s4 a {
	background-image: url(../immagini/iniziative_off.gif);
}
#menu li.s5 a {
	background-image: url(../immagini/gallery_off.gif);
}
#menu li.s6 a {
	background-image: url(../immagini/contatti_off.gif);
}

#menu li.s1 a:hover, #menu li.s1 a.selected {
	background-image: url(../immagini/chisiamo_on.gif);
	padding-top: 54px;
}
#menu li.s2 a:hover, #menu li.s2 a.selected {
	background-image: url(../immagini/statuto_on.gif);
	padding-top: 54px;
}
#menu li.s3 a:hover, #menu li.s3 a.selected {
	background-image: url(../immagini/progetti_on.gif);
	padding-top: 54px;
}
#menu li.s4 a:hover, #menu li.s4 a.selected {
	background-image: url(../immagini/iniziative_on.gif);
	padding-top: 54px;
}
#menu li.s5 a:hover, #menu li.s5 a.selected {
	background-image: url(../immagini/gallery_on.gif);
	padding-top: 54px;
}
#menu li.s6 a:hover, #menu li.s6 a.selected {
	background-image: url(../immagini/contatti_on.gif);
	padding-top: 54px;
}

/* sfondi colonna a sx */
.s1-leftbg {
	background: url("../immagini/sfondo_sx_chisiamo.gif") no-repeat;
}
.s2-leftbg {
	background: url("../immagini/sfondo_sx_statuto.gif") no-repeat;
}
.s3-leftbg {
	background: url("../immagini/sfondo_sx_progetti.gif") no-repeat;
}
.s4-leftbg {
	background: url("../immagini/sfondo_sx_iniziative.gif") no-repeat;
}
.s5-leftbg {
	background: url("../immagini/sfondo_sx_gallery.gif") no-repeat;
}
.s6-leftbg {
	background: url("../immagini/sfondo_sx_contatti.gif") no-repeat;
}

#menu li.divider {
	background-color: #f00;
	width: 0px;
	height: 164px;
}	



#submenu {
	width1: 140px;
	text-align: left; /* centra le scritte dei tasti (In IE5 Mac funziona solo left o right-> metto un <br >&nbsp; alla fine del testo dei tasti per fare due righe */

	line-height:0px; /* FIX per altezza extra del li su ID 5-6-7 */
	font-size:0px; /* FIX per altezza extra del li su ID 5-6-7 */
}

#submenu li {
	overflow1:hidden;
	height1: 20px;
	float: left; /* FIX IE5Mac che altrimenti non visualizza niente (il DIV è alto 0px) */
	clear: both;
	width: 100%; /* altrimenti il float left accorcia la dimensione al contenuto */
	border1: 1px #000 solid;
	
}

#submenu li a {
	line-height: 15px; /* lo posso mettere = all'altezza cosi lo sfondo viene esteso a tutta l'altezza ed il testo si centra verticalmente ma non va bene con testo su pi? righe -> metto display block ed imposto l'altezza*/
	display: block; 
	height: 100%;
	color: #252;
	text-decoration: none;
	font-weight: bold;
	font-size: 11px;
	font-family: Arial, Helvetica, Geneva, SunSans-Regular, sans-serif;
	
	/* Nascondo il testo dei links */
}

#submenu li.doubleline {
	height1: 30px;

}
#submenu li.doubleline a {
	line-height: 15px;
}


#submenu a:hover {
	padding-right:5px;
	color: #000;
	text-align: right;
	background-color: #fff;
}
#submenu li.selected a {
	color: #000;
	font-weight: bold;
	font-size: 11px;
	text-align: right;
	padding-right:5px;
	background-color: #fff;
}	



#body {
	background-color1: #000;
	position: relative; /* FIX: importante cosi i position interni sono relativi a questo div e posso mettere absolute con right=0 su body right a posto di float che causa problemi in IE6 strict mode */
	width: 100% /* FIX IE6 per errato posizionamento bodyleft*/
}	

.body-sizer {
	background-color1: #0aa;
	margin-left: 174px; /* riduce le dim da sx per fare spazio alla colonna */	
}

#bodyleft {
	width:174px;
	position: absolute;
	left: 0px; 
	height: 404px;
}

#bodyleft .outside {
	border1: 5px #000000 solid;
	padding: 10px;
	margin-right: 10px;
}
#bodyleft .inside {
	width:100%;
	background-color1: #ff0;
}

#bodycenter {
	background-color1: #f00;
}
#bodycenter .outside {
	border1: 2px #00FFFF solid;
	padding-top1: 10px;
	background-color1: #0fF;
}
#bodycenter .inside {
	width: 100%; /* FIX IE5 */
	background-color1: #ff0;
}


#footer {
	clear: both;
	width: 100%;
	text-align: center;
	background-color1: #f00;
	padding-top: 10px;
}

#footer p {
	line-height: 17px;
}


.flexbox-body {
	width: 100%; /* importante impostarla per IE5 */
	margin1: 0 auto;
	overflow: hidden; /* Fix per Safari */
}

.flexbox-body .up-dx {
	background-image: url("../immagini/sfondo_corpo_flex.gif");
	background-repeat: no-repeat;
	background-position:  top right;
	background-color1: yellow;
	position: relative;
	left: 50%;
	width: 50%;
}
.flexbox-body .up-sx {
	background-image: url("../immagini/sfondo_corpo_flex.gif");
	background-repeat: no-repeat;
	background-position: top left ;
	background-color1: purple;
	position: relative;
	width: 100%;
	left: -100%;

	height: 60px;  /* altezza della parte bassa */
}

.flexbox-body .down-dx {
	background-image: url("../immagini/sfondo_corpo_flex.gif");
	background-repeat: no-repeat;
	background-position:  bottom right;
	background-color1: green;
	position: relative;
	left: 50%;
	width: 50%;
}
.flexbox-body .down-sx {
	background-image: url("../immagini/sfondo_corpo_flex.gif");
	background-repeat: no-repeat;
	background-position: bottom left ;
	background-color1: red;
	position: relative;
	width: 100%;
	left: -100%;

}

.flexbox-body .content-area {
	margin-right: -100%; /* IE 5 vuole che sia impostato anche il width */
	width: 200%; /* FIX IE5 */

	position: relative;
	top: -60px; /* traslo in alto il contenuto di una quantità pari al top */
	border1: 1px #000 solid;
	margin-top1: -60px;
}
.flexbox-body .content-area .content {
	padding: 16px; /* >0 : se metto 0 causa problemi su Safari e Gecko (è l'unico problema rimasto anche se in genere il padding c'è sempre essendo un box con bordi ) */
}
.flexbox-body .content-area .content .internal {	
	width: 100%; /* FIX IE 5 */
	position:relative; /* Mette il testo davanti su IE 5-6 */
	margin-bottom: -60px; /* accorcio l'altezza di una quantità pari al top (margin riduce lo sfondo) */	

	height1: 384px; /* 404 - il padding up e down */
	border1: 1px #000 solid;
}


.bodybox {
	width: 100%;
	overflow:hidden; /* Fix per Safari */
}
.bodybox .top {
	background-image: url(../immagini/sfondo_sezione.gif);
	background-repeat: no-repeat;
	background-position: right top;
	background-color1: yellow;
	position: relative;
	left: 50%;
	width: 50%;
}
.bodybox .top div {
	background-image: url(../immagini/sfondo_sezione.gif);
	background-repeat: no-repeat;
	background-position: left top;
	background-color1: purple;
	position: relative;
	width: 100%;
	left: -100%;

	height: 20px;  /* altezza della parte bassa */
	font-size:0px; /* Fix IE 5-6 altrimenti l'altezza minima del div non va sotto l'interlinea */
}
.bodybox .bottom {
	background-image: url(../immagini/sfondo_sezione.gif);
	background-repeat: no-repeat;
	background-position: right bottom;
	background-color1: green;
	position: relative;
	left: 50%;
	width: 50%;
}
.bodybox .bottom div {
	background-image: url(../immagini/sfondo_sezione.gif);
	background-repeat: no-repeat;
	background-position: left bottom;
	background-color1: red;
	position: relative;
	width: 100%;
	left: -100%;

	height: 12px;  /* altezza della parte bassa */
	font-size:0px; /* Fix IE 5-6 altrimenti l'altezza minima del div non va sotto l'interlinea */
}
.bodybox .middle {
	background-image: url(../immagini/sfondo_sezione.gif);
	background-repeat: no-repeat;
	background-position: 100% -20px; /* metto 100% al posto di right per FIX opera 7.5 e NS7.1 */
	background-color1: orange;
	position: relative;
	left: 50%;
	width: 50%;
}
/* Qui poteri fare ".dialog1 .middle > div" ma IE <7 non supportano il selettore > */
.bodybox .middle .middle-left {
	background-image: url(../immagini/sfondo_sezione.gif);
	background-repeat: no-repeat;
	background-position: 0 -20px;
	background-color1: gray;
	position: relative;
	width: 100%;
	left: -100%;
}
.bodybox .content-area {
	margin-right: -100%; /* IE 5 vuole che sia impostato anche il width */
	width: 200%; /* FIX IE5 */
}
.bodybox .content-area .external {
	padding: 0px; /* >=0 : se metto 0 non causa problemi su Safari e Gecko perche qui non c'è traslazione del contenuto */

}
.bodybox .content-area .external .internal {	
	width: 100%; /* FIX IE 5 */
	position:relative; /* Mette il testo davanti su IE 5-6 */
}


blockquote {
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size: 11px;
	line-height: 18px;
    color: #fff;
    margin-top: 4px;
    padding: 4px;
	position: relative;
}

blockquote .bqstart {
	font-family: Times, serif;
	position: relative;
	top: 4px;
	left: -4px;
	float: left;
	margin-bottom: -4px;
	margin-right: 2px;
	font-size: 300%;
	color: #fff;
} 
blockquote .bqend {
	font-family: Times, serif;
	position: absolute;
	right: 0px;
	float1: right; /* si comporta diversamente sui vari browser -> uso position + right*/
	margin-top: 10px;
	font-size: 300%;
	color: #fff;
	background-color1: #ff0;
}
cite {
	display:block;
	margin-top: 4px;
	margin-right: 2px;
	color:#000043;
	font-size: 11px;
	font-weight: bold;
	font-style: italic;
	text-align:right
}

.sezione {
	font-family1: Verdana, tahoma, arial;
}
 
.sezione h1 {
	color: #0081DE;
	font-size: 20px;
	font-family: "Trebuchet MS", Geneva, Arial, Helvetica, SunSans-Regular, sans-serif;
	font-weight: bold;
	margin-bottom: 16px;
	padding-top: 4px;
}

.sezione h2 {
	color: #0a3e92;
	font-size: 12px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: bold;
	text-decoration: none;
	padding-top: 4px; /* cosi spezza il passo dei paragrafi */
	padding-bottom: 4px;
}

.sezione h3 {
	color: #308acc;
	font-size: 12px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: bold;
	text-decoration: none;
	padding-top: 4px; /* cosi spezza il passo dei paragrafi */
	padding-bottom: 4px;
	line-height: 170%;
}

.sezione h4 {
	color: #000043;
	font-size: 16px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: bold;
	text-decoration: none;
	padding-top1: 4px; /* cosi spezza il passo dei paragrafi */
	padding-bottom: 4px;
	font-variant: small-caps;
}


.sezione {
	font-family: Verdana, Arial, Helvetica, sans-serif; color: black;
}
.sezione p, .sezione p.text-normal {
	font-size: 13px;
	line-height: 16px;
	/* margin-top1: 4px; /* questo fa si che si crei uno spazio fra due div sovrapposti che contengono p -> non va bene */
	/* border-top1: 4px transparent solid; /* il transparent non ? supportato su IE pre 7 e diventa nero */
	/* rimane solo il padding ma il top altera il punto elenco che devo eventualmente adeguare se non lo metto a 0 */
	padding-top: 0px;
	padding-bottom: 4px;
	/* Hack for transparent borders in IE6 */
	/* _border-color: tomato; */

	/* _filter: chroma(color=tomato); */

}

.sezione p.text-extrasmall {
	font-size: 10px;
	line-height: 12px;
}
.sezione p.text-small {
	font-size: 11px;
	line-height: 13px;
}
.sezione p.text-large {
	font-size: 12px;
	line-height: 15px;
}
.sezione p.text-extralarge {
	font-size: 14px;
	line-height: 18px;
}

.sezione a {
	color: #0081DE;
	text-decoration: underline;
}
.sezione a:hover {
	color: #000043;
	text-decoration: none;
}

.sezione hr {
	margin: 0;
	padding: 0;
	border: 0;
	height: 1px;
	border-bottom: 1px #ccc solid;
}

.sezione1 h1 {
	color: #0081DE;
}
.sezione2 h1 {
	color: #49b056;
}
.sezione3 h1 {
	color: #9a6843;
}
.sezione4 h1 {
	color: #fbba28;
}
.sezione5 h1 {
	color: #e74b94;
}
.sezione6 h1 {
	color: #8e8999;
}



.sezione img.default,
.sezione img.sx-up, 
.sezione img.sx,
.sezione img.sx-down,
.sezione img.dx-up,
.sezione img.dx,
.sezione img.dx-down {
	margin: 16px;
	border1: 1px #000 solid;
}

.sezione img.sx-up {
	margin-left: 0px;
	margin-top: 0px;
	float: left;
	margin-bottom: 0;
}
.sezione img.sx {
	margin-left: 0px;
	float: left;
}
.sezione img.sx-down {
	margin-left: 0px;
	margin-bottom: 0px;
	float: left;
}
.sezione img.dx-up {
	margin-right: 0px;
	margin-top: 0px;
	float: right;
	margin-bottom: 0;
}
.sezione img.dx {
	margin-right: 0px;
	float: right;
}
.sezione img.dx-down {
	margin-right: 0px;
	margin-bottom: 0px;
	float: right;
}


#bodyleft p {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: inherit;
	font-size: 10px;
	line-height: 16px;
	padding-top: 0;
	padding-bottom: 4px;
}
#bodyleft p.text-large {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: inherit;
	font-size: 12px;
	line-height: 16px;
	padding-top: 0;
	padding-bottom: 4px;
	color:#fff;
}

#bodyleft img.default,
#bodyleft img.sx,
#bodyleft img.dx {
	margin: 0px;
	border1: 1px #000 solid;
	margin-top: 10px;
	margin-bottom: 8px;
}
#bodyleft img.sx {
	margin-left: 0px;
	float: left;
}
#bodyleft img.dx {
	margin-right: 0px;
	float: right;
}


.align-center {text-align: center}
.align-left {text-align: left}
.align-right {text-align: right}
.align-justify {text-align: justify}

.indent-firstline {text-indent: 20px }
.indent-all { padding-left: 20px }
.indent-bullet { background-image: url(../immagini/punto_elenco.gif); background-repeat: no-repeat; }


/* details table */
.details { font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif; border-bottom:1px solid #ccc; width:100%; float:left }
.details dt, .details dd { float:left; border-top:1px solid #ccc; padding-top: 3px;}
.details dt { background-color: #eee; width:60%; }
.details dd { background-color: #fff; width:20%; font-size: 10px; font-weight: bold; text-align:right;}

.details dt.firstline { border: 0; text-align: left; background-color: transparent; font-weight: bold; color: #7e2507}
.details dd.firstline { border: 0; text-align: right; background-color: transparent; font-weight: bold; color: #7e2507}

.clearboth {
	clear:both;
	font-size: 10px;
}


.piepagina-testo   { color: white; font-size: 11px; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; font-weight: normal ; }
.piepagina-separatore   { color: #a4cbde; font-size: 11px; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; font-weight: normal ; }
.piepagina-link      { color: #bcedff; font-size: 10px; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; font-weight: bold; text-decoration: none }
.piepagina-link:hover   { color: #fff; text-decoration: underline }


form.naguara { margin: 0; padding: 0; font-family: Tahoma, Arial, sans-serif; font-size: 11px; color: #bbb}
form.naguara input    { color: #444; font-size: 13px; padding: 1px; }
form.naguara input.textfield { background-color: #fff; color: #444; width: 95%; font-size: 13px; padding: 1px;}
form.naguara input.button    { color: #333; font-weight: bold; font-size: 13px; border:1px #aaa solid; }
form.naguara input.checkbox  { font-size: 13px; }
form.naguara textarea  { font-family: Tahoma, Arial, sans-serif; width: 95%; color: #444; font-size: 12px; padding: 1px; }
form.naguara strong   { color: #7e2507; font-size: 13px;}
form.naguara em { color: #7e2507; font-size: 12px; }
form.naguara a { color: #d00; text-decoration: none}
form.naguara a:hover { color: #f00; text-decoration: underline}