@charset "UTF-8";/* CSS Document */


body {
	font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
	text-align: center;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-color: #E6D0B8;
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 12px;
	background-position: center;
	color: #333;
	padding: 0px;
	margin: 0px;
}
bodycolor {
	font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
	text-align: center;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-color: #cfcbca;
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 12px;
	background-position: center;
	color: #333;
	padding: 0px;
	margin: 0px;
}
bodycolor2 {
	font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
	text-align: center;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-color: #E8FBFF;
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 12px;
	background-position: center;
	color: #333;
	padding: 0px;
	margin: 0px;
}
a img { /* Questo selettore rimuove il bordo blu predefinito visualizzato in alcuni browser intorno a un'immagine quando è circondata da un collegamento.  */
	border: none;
}

/* ~~ L'applicazione di stili ai collegamenti del sito deve rispettare questo ordine, compreso il gruppo di selettori che creano l'effetto hover. ~~ */
a:link {
	color: #333;
	text-decoration: none; /* A meno che non vogliate personalizzare i collegamenti in un modo molto particolare, è bene applicare la sottolineatura per permetterne una rapida identificazione visiva. */
}
a:visited {
	color: #333;
	text-decoration: none;
}
a:hover, a:active, a:focus { /* Questo gruppo di selettori conferisce alla navigazione tramite tastiera gli stessi effetti hover che si producono quando si usa il mouse. */
	text-decoration: none;
	color: #666;
}



.nav-fade li {
	z-index: 2;
	list-style: none;
	display: inline-block;
   }
.nav-fade a {
	padding: 3px 10px;
	color: #333;
}

.nav-fade a:hover {
	color: #FFF;
	background-color: #999;
		transition: background .50s ease-in-out;
	-moz-transition: background .50s ease-in-out;
	-webkit-transition: background .50s ease-in-out;

	  }


/* ~~ Gli stili dell'elenco di navigazione (rimovibili se scegliete di utilizzare un menu flyout reimpostato come Spry) ~~ */
ul.nav {
	text-align: center;
	font-size: 13px;
	list-style: none;
	margin-top: 35px;
}

ul.nav li {
	display: inline-block;

}

ul.nav a, ul.nav a:visited { /* Raggruppando questi selettori si fa in modo che i collegamenti mantengano l'aspetto di pulsante anche dopo che sono stati visitati */
	padding: 3px 10px;
	display: block; /* Assegna al blocco di ancoraggio delle proprietà che gli permettono di riempire l'intero LI che lo contiene in modo che l'intera area risponda a un clic del mouse. */
	width: auto;  /*Questa larghezza rende cliccabile l'intero pulsante in IE6. Se non avete bisogno di supportare IE6, può essere rimossa. Calcolate la larghezza corretta sottraendo la spaziatura di questo collegamento dalla larghezza del contenitore della barra laterale. */
	text-decoration: none;
}

ul.nav a:hover, ul.nav a:active, ul.nav a:focus { /* Cambia il colore dello sfondo e del testo per la navigazione tramite mouse e tastiera */
	color: #FFF;
	background-color: #999;
}



.activelink {
	color: #FFF;
	text-decoration: none;
	padding: 3px 10px 3px 10px;
	background-color: #999;
}
.insimage {
	z-index: 5;
	margin: 0px;
	height: 375px;
	width: 750px;
	float: none;
	background-color: #666;
	padding: 0px;
	margin-bottom: 1px;
	background-image: url(../images/calla.jpg);
}
.insimageAtelier {
	z-index: 5;
	margin: 0px;
	height: 375px;
	width: 750px;
	float: none;
	background-color: #666;
	padding: 0px;
	margin-bottom: 1px;
	background-image: url(../images/atelierarte.jpg);
}
.insimagePercorsi {
	z-index: 5;
	margin: 0px;
	height: 375px;
	width: 750px;
	float: none;
	background-color: #CCC;
	padding: 0px;
	margin-bottom: 1px;
	background-image: url(../images/percorsi.jpg);
}
.insimageOpere {
	z-index: 5;
	margin: 0px;
	height: 375px;
	width: 750px;
	float: none;
	padding: 0px;
	margin-bottom: 1px;
	background-image: url(../images/operepersonali.jpg);
}
.insimageContatti {
	z-index: -5;
	margin: 0px;
	height: 375px;
	width: 750px;
	float: none;
	padding: 0px;
	margin-bottom: 1px;
	background-image: url(../images/contatti.jpg);
}
.centra_ {
	width: 750px;
	margin: auto auto;
	min-height: 750px;
}
.fascia_ {
	z-index: -5;
	margin: 0px;
	height: 375px;
	width: 100%;
	float: none;
	padding: 0px;
	position: absolute;
	margin-top: 23px;
	left: 0px;
	background-color: #666;
	opacity: 1;
	top: 12px;
}
.alcentro_ {
	z-index: 5;
	height: 375px;
	width: 1250px;
	margin: auto;
}
.sx_ {
	z-index: 5;
	height: 375px;
	width: 250px;
	float: left;
	position: inherit;
	padding-right: 0px;
	right: 0px;
	margin-right: 375px;
	text-align: left;
	color: #FFF;
}
.dx_ {
	z-index: 5;
	height: 375px;
	width: 250px;
	float: right;
	margin-left: 375px;
	color: #FFF;
}
.centra {
	width: 980px;
	margin: auto auto;
	min-height: 750px;
}
.fascia {
	z-index: -5;
	height: 375px;
	width: 100%;
	position: fixed;
	margin: 23px auto auto auto;
	background-color: #666;
}
.alcentro {
	z-index: 5;
	height: 375px;
	width: 980px;
	margin: auto;
}
.sx {
	height: 375px;
	width: 980px;
	float: left;
	position: relative;
	text-align: right;
	color: #FFF;
	padding-right: 10px;
}
.dx {
	height: 375px;
	width: 980px;
	float: left;
	position: relative;
	text-align: right;
	color: #FFF;
	padding-right: 10px;
}
/* ~~ Gli stili dell'elenco di navigazione (rimovibili se scegliete di utilizzare un menu flyout reimpostato come Spry) ~~ */
ul.nav2 {
	margin-bottom: 0px;
	text-align: right;
	font-size: 13px;
	margin-top: 0px;
	padding-top: 20px;
	margin-right: 20px;
	float: right;
	list-style: none;
	z-index: 250;
}
ul.nav2 li {
	display: list-item;
	z-index: 250;
}
ul.nav2 a, ul.nav2 a:visited { /* Raggruppando questi selettori si fa in modo che i collegamenti mantengano l'aspetto di pulsante anche dopo che sono stati visitati */
	padding: 3px 10px;
	display: block; /* Assegna al blocco di ancoraggio delle proprietà che gli permettono di riempire l'intero LI che lo contiene in modo che l'intera area risponda a un clic del mouse. */
	width: 140px;  /*Questa larghezza rende cliccabile l'intero pulsante in IE6. Se non avete bisogno di supportare IE6, può essere rimossa. Calcolate la larghezza corretta sottraendo la spaziatura di questo collegamento dalla larghezza del contenitore della barra laterale. */
	text-decoration: none;
	color: #FFF;
	z-index: 250;
}
ul.nav2 a:hover, ul.nav2 a:active, ul.nav2 a:focus { /* Cambia il colore dello sfondo e del testo per la navigazione tramite mouse e tastiera */
	transition: background .50s ease-in-out;
	-moz-transition: background .50s ease-in-out;
	-webkit-transition: background .50s ease-in-out;
	color: #FFF;
	background-color: #999;
	z-index: 250;
}
.activelink2 {
	color: #FFF;
	text-decoration: none;
	padding: 5px;
}
/* ~~ Queste sono le colonne del layout. ~~ 

1) La spaziatura viene applicata solo al lato superiore e/o inferiore dei div. Agli elementi all'interno di questi div viene applicata una spaziatura sui lati. In questo modo si evita ogni calcolo matematico relativo ai riquadri. Tenete presente che se aggiungete spaziatura laterale o bordi al div stesso, andranno ad aggiungersi alla larghezza definita per produrre la larghezza *totale*. Potete anche scegliere di rimuovere la spaziatura dell'elemento nel div e inserire un secondo div al suo interno con larghezza nulla e con la spaziatura necessaria per la struttura che state creando.

2) Non è stato applicato alcun margine alle colonne perché sono tutte con float. Se dovete aggiungere un margine, evitate di applicarlo sul lato verso il quale avviene il float (ad esempio, un margine destro su un div impostato per un float verso destra). Spesso è possibile utilizzare una spaziatura come alternativa. Per i div in cui questa regola deve essere ignorata, dovete aggiungere una dichiarazione "display:inline" alla regola del div per risolvere un bug di alcune versioni di Internet Explorer, a causa del quale il margine viene raddoppiato.

3) Poiché le classi possono essere utilizzate più volte in un documento (e a un elemento possono essere applicate più classi), alle colonne sono stati assegnati dei nomi di classe anziché degli ID. Ad esempio, sarebbe possibile impilare due div per barre laterali, se necessario. Potete tranquillamente sostituire i nomi con degli ID se preferite, a condizione che li utilizziate una sola volta per documento.

4) Se preferite la barra di navigazione a destra anziché a sinistra, è sufficiente applicare alle colonne un float nella direzione opposta (tutte a destra anziché a sinistra) in modo da eseguirne il rendering in ordine inverso. Non è necessario spostare i div all'interno del codice HTML.

*/
.sidebar1 {
	margin-bottom: 1px;
	margin-top: 10px;
	width: 750px;
	height: 22px;
	text-align: center;
	background-color: #e48080;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	padding-top: 0px;
	padding-bottom: 0px;
	vertical-align: middle;
}
.sidebar2 {
	width: 750px;
	padding: 0px;
	height: 50px;
	background-color: #e48080;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	font-size: 11px;
}
.content {
	padding: 10px;
	float: none;
	text-align: justify;
	margin-bottom: 0px;
	margin-left: 0px;
	font-size: 13px;
	width: 730px;
	background-color: #e48080;
	overflow: none;
	scrollbar-base-color: #99C;
	min-height: 300px;
	color: #333;
}
.operepersonali {
	float: none;
	text-align: justify;
	font-size: 13px;
	width: 630px;
	min-height: 175px;
	color: #333;
	margin: auto;
	padding-left: 50px;
	padding-right: 50px;
	padding: 10px;
}
.operepersonalisx {
	float: left;
	text-align: center;
	font-size: 15px;
	width: 200px;
	min-height: 170px;
	color: #333;
	margin: auto;
	padding-left: 50px;
	padding-right: 50px;
}
.operepersonalidx {
	float: right;
	text-align: center;
	font-size: 15px;
	width: 200px;
	min-height: 170px;
	color: #333;
	margin: auto;
	padding-left: 50px;
	padding-right: 50px;
}

/* ~~ Gli stili del piè di pagina ~~ */
.footer {
	padding: 2px 10px;/* Fornisce hasLayout a IE6 per ottenere un clearing corretto.  */
	clear: both;
	font-size: 11px;
	text-align: right;
	width: 730px;
	margin-bottom: 10px;
}

.clafooter {
	padding: 0px 0;/* Fornisce hasLayout a IE6 per ottenere un clearing corretto.  */
	clear: none;
	font-size: 10px;
	text-align: right;
	width: 750px;
	float: left;
	margin-top: 0px;
}
.boxesterno {
	width: 800px;
	background: #E6D0B8;
	min-height: 800px;
	z-index: -15;
}
.box {
	width: 750px;
	background: #F2E3D0;
	min-height: 750px;
	border-radius: 5px;
	margin-top: 25px;
	margin-left: 25px;
}
.box2 {
	width: 750px;
	min-height: 750px;
}
.boxbase {
	width: 750px;
	background-color: #666666;
	height: 0px;
	margin-bottom: 15px;
}

/*==================================================
 * Effect 2
 * ===============================================*/
.effect2
{
  position: relative;
}
.effect2:before, .effect2:after
{
	z-index: -1;
	position: absolute;
	content: "";
	bottom: 15px;
	left: 10px;
	width: 50%;
	top: 80%;
	max-width: 600px;
	background: #777;
	-webkit-box-shadow: 0 15px 10px #777;
	-moz-box-shadow: 0 15px 10px #777;
	box-shadow: 0 15px 10px #777;
	-webkit-transform: rotate(-3deg);
	-moz-transform: rotate(-3deg);
	-o-transform: rotate(-3deg);
	-ms-transform: rotate(-3deg);
	transform: rotate(-3deg);
}
.effect2:after
{
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
  right: 10px;
  left: auto;
}


/* ~~ All'intestazione non viene assegnata una larghezza. Estenderà l'intera larghezza del layout. Contiene un'immagine segnaposto da sostituire con il vostro logo collegato ~~ ~~ */
.header {
	height: 50px;
	margin-left: 0px;
	margin-bottom: 0px;
	background-repeat: no-repeat;
	font-size: 12px;
	background-image: url(../images/psi.png);
	width: 750px;
}
#contenuto {
	width: 650px;
	height: 600px;
	text-align: center;
	padding-left: 10px;
	padding-top: 0px;
	padding-right: 10px;
	z-index: 1;
	background-repeat: repeat;
	background-position: center;
	margin-top: 90px;
	background-color: #F2E3D0;
	margin-left: 40px;
	border: 0;
	position: absolute;
}
.remox {
	z-index: 1;
	font-size: 15px;
}
.remox2 {
	z-index: 1;
	font-size: 25px;
}