@charset "utf-8";
.nascosto {
	position:absolute;
	top:-5000em;
	left:-5000em;
}
body  {
	font: 80%/1.4 Verdana, Arial, Helvetica, sans-serif;
	background:#FFF;
	background: url(../img/back-in.gif) repeat-x #FFF;
	margin: 0; /* è buona norma impostare a zero i valori margin e padding dell'elemento body per tenere conto delle diverse impostazioni predefinite dei browser*/
	padding: 0;
	text-align: center; /* centra il contenitore nei browser IE 5*. Il testo viene quindi impostato con l'allineamento predefinito a sinistra nel selettore #container */
	color: #000000;
}
.centro{
	text-align:center;
}

h3{
	color:#039;
	font-weight:bold;
	letter-spacing: 0.03125em;
}
#container {
	position:relative;
	width: 960px; margin: 0 auto;
	background-color:#D7E2FF;
	/*margin: 0 auto;  i margini auto (insieme a una larghezza) centrano la pagina se necessario */
	text-align: left; /* sostituisce l'impostazione text-align: center nell'elemento body. */
	background:url(../images/left.gif) left repeat-y;
} 
#corpo {
	margin:0;
	position:relative;
	float:left;
	top: 0;
	width:960px;
	color:#000000;
	background:url(../images/right.gif) repeat-y #FFF right;
}

#header {
	float:left;
	height:129px;
	width:500px; margin:0; padding:0;
	background:url(../img/backtesta.jpg) top left no-repeat;
	overflow:hidden;
} 
#header h1 {
	margin: 0; /* azzerando il valore margin dell'ultimo elemento del div #header si evita la compressione del margine, con la creazione di uno spazio inspiegabile tra i div. Se il div è circondato da un bordo, questo accorgimento non è necessario perché anche il bordo impedisce la compressione del margine */
	padding: 10px 0; /* l'uso del valore padding al posto di margin consente di distanziare l'elemento dai bordi del div */
}
#testa {
	height:129px;
	width: 100%;
	float:left;
	background:url(../img/bgheader.jpg) right top no-repeat;
}
#stemma{
	position:absolute;
	float: right;
	right:20px;
	top:0;
	margin-left: 8px;
	z-index: 10;
}
.swf{ 
	float: right;
	right:0;
	width:350px;
	z-index:1;
}
#barra{
	width:100%; height:30px;
	float:left;
	background:#06C;
	border-top:#366 medium solid;
	background:url(../img/bgbarra.gif);
}
#barra #menuoriz{
	float:left;
	width:99%;
}
#barra #menuoriz ul{
	margin:0;
	padding:4px 0 2px 0;
}
#barra #menuoriz li{
	display:inline;
	padding-left:20px;
	text-align:center;
}
#barra #menuoriz li a{
	color:#FFF;
	font-size:13px;
	font-weight:bold;
	text-decoration:none;
}
#barra #menuoriz li a:hover{
	color:#F00;
}
/* Suggerimenti per sidebar1:
1. Se si imposta un valore font-size per questo div, la larghezza globale del div viene modificata di conseguenza.
2. Poiché si lavora in ems, è meglio non applicare un padding alla barra laterale, poiché, nei browser conformi agli standard, verrebbe aggiunto alla larghezza producendo una larghezza effettiva non prevedibile. 
3. Per creare spazio tra il lato del div e gli elementi al suo interno, è possibile applicare un margine sinistro e destro a tali elementi, come descritto nella regola ".thrColHybHdr #sidebar1 p".
*/
#sidebar1 {
	float: left; 
	width: 20%; /* poiché questo elemento è mobile, occorre specificare una larghezza */
	background:#D9FDF3 url(../img/acqua.gif);
	padding: 0; /* un padding superiore e inferiore creano uno spazio visivo all'interno di questo div */
	margin-left:0;
	top:0;
	line-height:90%;
}
#sidebar2 {
	float: right;
	position:relative;text-align:center;
	width: 20%; /* poiché questo elemento è mobile, occorre specificare una larghezza */
	padding:20px 0; /* un padding superiore e inferiore creano uno spazio visivo all'interno di questo div */
}
#sidebar2 hr{
	color:#CCC;
	width:100%;
}
#sidebar2 h3 {
	padding-top:8px;
	margin:0 auto;
	text-align:center;
	padding:5px;
	font-size:1.2em;
}
#mainContent {
	background:#FFF;
	float:left;
	position:relative;
	width:58%;
	left:1%;
} 
#mainContent img{
	 float:left;
	 padding:5px 8px 0 0;
 }
#footer {
	height:100px;	
	padding: 0 10px;
	text-align:center;
	font-size:1em;
	background: url(../images/footer.gif) repeat-x #FFF;
	border-top:#CCC 1px solid;
} 
#footer p {
	margin: 0; /* azzerando il valore margin del primo elemento del footer si evita il rischio di compressione del margine, con la creazione di uno spazio tra i div */
	padding: 10px 0; /* il padding di questo elemento crea uno spazio, così come avverrebbe specificando un valore margin, senza il problema della compressione del margine */
}

/* Classi varie riutilizzabili */
.fltrt { /* questa classe può essere utilizzata per rendere mobile un elemento a destra nella pagina. L'elemento reso mobile deve precedere l'elemento al quale deve essere affiancato sulla pagina. */
	float: right;
	margin-left: 8px;
}
.fltlft { /* questa classe può essere utilizzata per rendere mobile un elemento a sinistra nella pagina.*/
	float: left;
	margin-right: 8px;
	margin:0; padding:0;
}
.percorso { /* questa classe può essere utilizzata per rendere mobile un elemento a sinistra nella pagina.*/
	margin-top:15px;
	padding:0 10px 20px 5px;
	width:90%;
	height:25px;
	background:url(../images/onda.gif) no-repeat left;
	float:left;
}
.clearfloat, br { /* questa classe deve essere inserita in un elemento div o break e deve essere l'elemento finale prima della chiusura di un contenitore che deve contenere per intero un elemento mobile */
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}
#menuleft {
	float:left;
	width:100%;
	border-left:#00D9D9 1px outset;
	border-bottom:#00D9D9 1px solid;
	border-top:#00D9D9 1px solid;
	border-right:#00D9D9 1px inset;
}
#menuleft ul{
	font-size:0.95em;
	margin:5px 0 0 5px;
	padding: 0 0 15px 0;
}
#menuleft li{
	list-style:none;
	right:0;
	border-bottom:#CCC 1px solid;
    line-height:15px;
	padding:5px 30px;
}
#menuleft li a{
	display:block;
}
#menuleft h3{
	border-bottom: 1px #FFF solid;
	font-size:1.2em;
	color:#039;
	padding:12px 4px 4px 4px;
}
#menuright {
	float:right;
	width:98%;
	background:#cedbf6;
	border-left:#00D9D9 1px inset;
	border-bottom:#00D9D9 1px solid;
	border-top:#00D9D9 1px solid;
	border-right:#00D9D9 1px inset;
	font-size:80%;
}
#menuright ul{
	display:block;
	text-decoration:none;
	margin:5px 0 0 5px;
	padding: 0 0 15px 0;
}
#menuright li{
	list-style:none;
	right:0;
	border-bottom:#CCC 1px solid;
    line-height:15px;
}
.titoletto{
	font:Verdana, Geneva, sans-serif;
	font-weight:bold;
	margin-left: 5px;
	font-size:1.2em;
	color:#066;
}
#sidebar1 a{
	color:#000080;
	text-decoration:none;
}
#sidebar1 a:hover{
	text-decoration:underline;
	color:#F00;
	font-weight:bold;
}
#sidebar1 a:active{
	text-decoration:underline;
	color:#F30;
}
#sidebar2 a{
	color:#FFF;
	font-weight:bold;
	text-decoration:none;
}
#sidebar2 a:hover{
	color:#FF0;
}
#sidebar2 a:active{
	color:#03C;
}
#sidebar2 ul{
	font-size:0.95em;
	width:100%;
	margin:0;
	padding: 0 0 15px 0;
}
#sidebar2 li{
	list-style:none;
	right:0;
	color:#FFF;
	border-bottom:#CCC 1px solid;
}
#sidebar2 li a{
	background-color:#309A95;
	color:#FFF;
	height:20px;
	padding:5px 0 0 5px;
	display:block;
}
#sidebar2 li a:hover{
	color:#F00;
	background: url(../images/arrow.gif) no-repeat right #D3EBD9;
}
.list_image0{
	background-repeat:no-repeat;
	background-position:0;
	padding:5px 10px;
}
#mainContent a{
	 font-size:90%;
	 color:#03C;
	 font-weight:bold;
	 text-decoration:none;
 }
 #mainContent a:hover{
	 color:#F00;
	 text-decoration:underline;
 }
#box {
	margin:0 5px;
	top:20px;
	height : 100%;
	color:#000000;
	line-height:20px;
}
#box p{
	padding:0 10px 0 10px;
}
#box h1{
	font-size:1.5em;
	padding:5px;
	color:#099;
	color:#026980;
	border-bottom:1px #CCC solid;
	font-weight:lighter;
}
h2{
	clear:left;
	font-size:1.3em;
	padding:20px 0 0 15px;
	margin-left:10px;
	font-weight:bold;
	background:url(../img/rombo.png) no-repeat left 24px;
}

#box h3{
	font-size:1.1em;
	font-weight:lighter;
}
#box h4{
	font-size:1em;
	padding:0;
}
#box h5{
	font-size:1em;
	padding:0;
}
#box img{
	display:inline;
}
#box img {
	clear:both;
	float: left;
	padding:8px 4px 0 0;
	border:none;
}

.articolo {clear:left;left:0;top:0;padding:0 0 20px 0; background:url(../img/bgarticolo.gif) repeat-x;}
td{
	padding:0 5px;
}
div.markup { position:relative; width:100%; height:30px; } div.markup img { position:absolute; left:50%; top:50%; margin-left:-12px; margin-top:-18px; } 
ul#minipics{list-style-type:none}
 
ul#minipics li{float:left;margin-right: 5px;padding:0;
    background: url(dropshadow.jpg) no-repeat bottom right}

ul#minipics li img{
	display:block;
	position:relative;
	top:-5px;
	border:1px solid #ccc;
	border-color: #ccc #666 #666 #ccc;
	padding:5px;
	width:auto;
}
div.figura { float: left; width: 40%; border: thin silver solid; margin: 0.5%; padding: 0 0.5% 0 0.5%;
}
div.figura p {text-align: center; font-style: italic; font-size: 1em; text-indent: 0 ;
}
div.figura img { width: 100%;}

.contenitore {
   width: 100%;
   color: #000;
   background-color:#FFC;
  
}


.topleft { background: url(top-left.gif) no-repeat top left }

.topright { background: url(top-right.gif) no-repeat top right }

.bottomleft { background: url(bot-left.gif) no-repeat bottom left }

.bottomright { background: url(bot-right.gif) no-repeat bottom right }

.contenuto { padding: 10px;
 }
.piccolo{
	font-size:small;}
.mezzalinea a{border-top:#CCC 1px solid;font-size:small; width:40%; padding: 5px 0 5px 20px; background:url(../images/att.png) no-repeat left}
table{
	border-collapse:collapse;
}
th{
	text-align:center;
}
div.pic{padding:0 0 8px 0; width:120px; text-align:center; margin:0 auto;
    background: url(../images/shadow.png) no-repeat bottom left}
div.pic img{border: 1px solid;margin:0 auto;
    border-color: #CCC #CCC #AAA #CCC;
	padding: 5px;background: #f6f6f6;
}