/*==================================================
Template:	OWMX-4
Resource:	http://owmx.com/templates/owmx-4
Version:	1.0
Date:		2010-09-14
Editor:	Jonas Jacek
		http://jabz.net/contact/jonas-jacek
License:	CC Attribution-Share Alike 3.0 Unported	
==================================================*/

/* Reset */
header, footer, article, nav, section, aside, time, hgroup {
	display: block;
}
A.details {
		background: url(Images/ico_link.gif) no-repeat 0 1px;
	}
	H1 {
		background: url(Images/ai4.png) no-repeat 0 6px;
	}
	H3 {
		background: url(Images/ai4.png) no-repeat 0 7px;
	}

/* Header */
header {
	background: #009900 url(../images/headerstram0.jpg) repeat top left;
	}

/* Lists */
article ul, aside ul {
	list-style: none;
	margin: 0 0 15px 0;
	}
	article ul {
		margin: 0 0 15px 15px;
	}
	article ul li {
		background: url(Images/ai2.png) no-repeat 0 8px;
		padding: 0 0 0 15px;
	}

li {
	background: url(Images/ai1.png) no-repeat 0 8px;
	font-size: 12px;
	padding: 0 0 0 30px;
}
		
/* Navigation & Menu */
nav {
	float: left;
	width: 200px;
	margin: 60px 0px 0px 0px;
	}
	nav ul {
		list-style: none;
		}
		nav li {
			background: url(Images/ai1.png) no-repeat 0 8px;
			padding: 0 0 0 15px;
		}
		nav li ul {
			margin: 0;
			padding: 5px 0;
		}
		nav li li a {
			font-size: 11px;
		}
		nav li li li a {
			font-size: 10px;
			}
		nav li li li {
			background: url(Images/ai8.png) no-repeat 0 10px;
		}
		nav li.active, nav li.active li {
			background: url(Images/ai2.png) no-repeat 0 8px;
		}

 /*#######  MENU NAVIGAZIONE  #######*/
	#menu_css_verticale{
	width:198px; 							/*1. specifichiamo una larghezza fissa per il menu*/
	list-style:none;						/*2. rimuoviamo i marcatori della lista*/
	margin:0;								/*3. azzeriamo le margine – richiesto per Internet Explorer*/
	padding:0px; 							/*4. impostiamo un spazio cuscinetto (padding) di 1 px tra i bordi della lista e il suo contenuto*/
	background-color:#EEEEEE;				/*5. aggiungiamo un colore di sfondo al menu*/
	-moz-box-shadow: 0 2px 2px rgba(0,0,0,0.4);
	-webkit-box-shadow: 0 2px 2px rgba(0,0,0,0.4);
	} 

	#menu_css_verticale a{
	display:block;							/*1. convertiamo i link da elementi inline a elemento di blocco, cosi coprono tutta la larghezza disponibile*/
	height:25px;							/*2. specifichiamo un altezza – richiesto per Internet Explorer 6*/
	margin-top:1px;							/*3. aggiungiamo un spazio superiore tra ogni link*/
	padding-left:15px;						/*4. e un spazio cuscinetto (padding) a sinistra tra il bordo e il testo dei link*/
	background-color:#EEEEEE;				/*5. specifichiamo un colore di sfondo per i link*/
	border-left:5px solid #006600;			/*6. e un bordo sinistro di 10px*/
	font-family:Trebuchet,Arial;			/*7. speficiamo il tipo di carattere usato*/
	font-size:11px;							/*8. e la misura del carattere*/
	text-transform:uppercase;				/*9. convertiamo i caratteri da minuscolo a maiuscolo*/
	text-decoration:none;					/*10. togliamo la sottolineatura dei link aggiunta per default*/
	color:#006600;							/*11. specifichiamo un colore per i link*/
	line-height:25px;						/*12. allineiamo verticalmente il testo*/
	-webkit-transition-property: background;/*13. applico effetto di transizione */
	-webkit-transition-duration: 0.6s;
	-webkit-transition-timing-function: ease;
	} 

	#menu_css_verticale a:hover{
	background-color:#E5E5E5;				/*1. cambiamo il colore di sfondo dei link*/
	border-left:5px solid #009900;			/*2. il colore del bordo sinistra*/
	color:#FF0000;							/*3. il colore dei link stessi*/
	text-shadow:#999999 1px 1px;			/*4. applichiamo l'effetto di ombreggiatura */
	} 

	#menu_css_verticale a.menu_primo{
	margin-top:0;							/* azzerare il margine del primo link usando la classe ‘primo’ cosi da evitare lo spazio extra a l’inizio del menu */
	} 

/* Gallery */
.gallery {  
	list-style: none;
	margin: 0 0 10px;
	}
	.gallery li {
		display: inline;
		margin: 0 15px 0 0;
	}
	.gallery a img {
		border: 1px solid #999;
		height: 50px;
		opacity: 0.8;
		padding: 1px;
		width: 50px;
	}
	.gallery li:last-child {
		margin: 0 0 10px 0;
	}
	.gallery a img:hover{
		opacity: 1;
	}

	/* BUBBOLA IMMAGINE */
	.bubblewrap img{
	border:0;
	margin-right: 4px; /*spacing between each image*/
	-moz-transition:-moz-transform 0.1s ease-in; /*animate transform property */
	-webkit-transition:-webkit-transform 0.1s ease-in; 
	-o-transition:-o-transform 0.1s ease-in; /*animate transform property in Opera */
	}

	.bubblewrap img:hover{
	opacity: 1;
	-moz-transform:scale(1.3); /*scale up image 1.8x*/
	-webkit-transform:scale(1.3);
	-o-transform:scale(1.3);
	}
	/* fine bubbola */


/* Tag Cloud */
#tagcloud {
	overflow: hidden;
	width: 200px;
	}
	#tagcloud li {
		display: inline;
		}
	
		.tagcloudsize-1 a {
			font-size: 14px;
		}
		.tagcloudsize-2 a {
			font-size: 16px;
		}
		.tagcloudsize-3 a {
			font-size: 18px;
		}

/* Footer */
footer {
	border-top: 1px dotted #B5B3A9;
	clear: both;
	margin: 10px 0;
	}
	footer a, footer p {
		color: #666;
		display: inline;
		font-size: 10px;
		}


/* Wrappers */
#a, #b {
	margin: 0 auto;
	position: relative;
	}
	#a {
		-moz-box-shadow: 0 2px 2px rgba(0,0,0,0.3);
		-webkit-box-shadow: 0 2px 2px rgba(0,0,0,0.3);
		background: #EEE;
		padding: 10px 10px 0 10px;
		width: 950px;
	}
	#b {
		overflow: hidden;
	}

/* Shadow-Boxes*/
.c,#tagcloud, .meta, .s, .boxaside{
	-moz-box-shadow: 0 2px 2px rgba(0,0,0,0.4);
	-webkit-box-shadow: 0 2px 2px rgba(0,0,0,0.4);
	background: #EEE;
	}
	.c, #tagcloud {
		margin: 0 0 20px 0;
		padding: 5px 10px;
		width: 178px;
		}
		.c p, .c a {
			font-size: 11px;
			line-height: 15px;
		}
		.c p {
			margin: 0 0 10px 0;
		}
		.c img {
			float: left;
			margin: 4px 10px 2px 0;
		}	
	.meta {
		margin: 20px 0 3px;
		padding: 2px 5px;
		}
		.meta p, .meta a {
			font-size: 10px;
			margin: 0;
		}
	.boxaside caption {
		background: -webkit-gradient(linear, left bottom, left top, color-stop(0.01, rgb(238,238,238)), color-stop(1, rgb(221,221,221)));
		background: -moz-linear-gradient(center bottom, rgb(238,238,238) 1%, rgb(221,221,221) 100%);
		border-top: 1px solid #D5D5D5;
		color: #D90000;	/* #006600 */
		font-size: 13px;
		font-weight: bold;
		margin: 0 0 10px;
		text-align: center;
		text-shadow:#FFFFFF 1px 1px;			/* applichiamo l'effetto di ombreggiatura */
	}
	.boxaside table {
		width: 100%;
	}
	.boxaside table.box th {
		height: 15px;
		background: #EEEEEE;
		border-bottom: 2px solid #339900;
		text-align: center;
		color: #006600;
		/* font-size: 12px; */
		font-weight: bold;
	}
	.boxaside table.box tr:nth-child(odd) { 
		background: #CCCCCC;
		}
	.boxaside table.box tr:nth-child(even) {
		background: #DDDDDD;
		}
	.boxaside table.box tr:hover td {
		color: #FF0000;
	}
	nav ul {
		-moz-box-shadow: 0 2px 2px rgba(0,0,0,0.4);
		-webkit-box-shadow: 0 2px 2px rgba(0,0,0,0.4);
		padding: 10px;
		}
		nav ul ul {
			-moz-box-shadow: none;
			-webkit-box-shadow: none;
		}

/* ALTRI LAYER DA POSIZIONARE */
	.columnedbox {
		z-index: 2; 
		position: relative; 
		left: 0px; 
		top: 0px; 
		background-color: yellow; 
		width: 650; 
		padding: 10px; 
		border: blue 2px dashed;
		}
	.leftbox {
		z-index: 2; 
		position: absolute; 
		left: 0px; 
		top: 0px; 
		background-color: green; 
		width: 320; 
		padding: 10px; 
		border: blue 2px dashed;
		}
	.rightbox {
		z-index: 2; 
		position: absolute; 
		right: 0px; 
		top: 0px; 
		background-color: blue; 
		width: 320; 
		padding: 10px; 
		border: blue 2px dashed;
		}		
		
#show_with_mobile {						/* Nascondo x default le parti previste solo x telefonino */
	display: none;
}