@charset "utf-8";
/* CSS Document */
/* Created by Michael Anthony Raj */
/* begin Page */

@import url("reset.css");

* { margin: 0; padding: 0; }

html { overflow-y: scroll;
	   overflow-x: scroll;
}

body {
	background-color: #000;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 1em;
	line-height: 1.2em;
}

h1, h2, h3, h4, h5, h6 {
	margin-top: 0;
	padding-right: 15px;
	padding-left: 15px; 
	font-family: Verdana, Geneva, sans-serif;
	font-weight: 500;
	font-style: normal;
	line-height: 1.4em;
	font-variant: normal;
	text-decoration: none;
	color:#F00;
}
h1{
	font-size:170%;
	/* text-shadow: 0px 1px 1px #666; */
}
h2{
	font-size:150%;
	/* text-shadow: 0px 1px 1px #666; */
}
h3{
	font-size:125%;
	/* text-shadow: 0px 1px 1px #666; */
}
h4{
	font-size:110%;
	/* text-shadow: 0px 1px 1px #666; */
}
h5{
	font-size:100%;
	/* text-shadow: 0px 1px 1px #666; */
}
h6{
	font-size:85%;
	/* text-shadow: 0px 1px 1px #666; */
}


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. ~~ */
p {
	font-family: Verdana, Geneva, sans-serif;
	font-weight: 350;
	font-size:1em;
	line-height: 1.2em;
	padding-right: 5px;
	padding-left: 5px;
	color: #FFF;
	 }

a:link {
	color: #F00;
	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:#900;
	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: underline;
	color:#F03;
	/* text-shadow: 0px 1px 1px #F30; */
}

ul, ol, dl { /*  A causa delle differenze tra i browser, è buona norma impostare a zero il margine e la spaziatura interna negli elenchi. Per uniformità, potete specificare qui i valori desiderati, oppure nelle voci di elenco (LI, DT, DD) contenute negli elenchi. Tenete presente che le impostazioni effettuate qui verranno applicate a cascata all'elenco .nav a meno che non scegliate di scrivere un selettore più specifico. */
	padding: 0;
	margin: 0;
}

/* #######################################-------------HEADER-------------------####################################### */
.header-container-home {
	width: 100%;
	height: 487px;
	background-image: url(img/header-home-bkg.jpg);
	margin-top: 0px;
	margin-left: 0px;
	background-color: #f1e0bb;
	background-repeat: no-repeat;
	background-position: left;	
}

.header-container {
	width: 100%;
	height: 253px;
	margin-top: 0px;
	margin-left: 0px;
}

.languages  {
	text-decoration: none;
	float: right;
	height: 15px;
	width: 75px;
	margin-top: 15px;
	margin-right: 100px;
	vertical-align: text-bottom;
}

#languages-img {
	text-decoration: none;
	height: 14px;
	width: 20px;
	float: left;
}

.topmenucontainer-home {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 80%;
	float: right;
	height: 25px;
	width: 900px;
	margin-top: 10px;
	margin-right: 35px;
	vertical-align: text-bottom;
	text-decoration: none;
}	

.topmenucontainer {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 80%;
	float: right;
	height: 25px;
	width: 900px;
	margin-top: 10px;
	margin-right: 35px;
	vertical-align: text-bottom;
	text-decoration: none;
}	


.barranavigazione-home-container {
	font-family: Verdana, Geneva, sans-serif;
	height: 80px;
	width: auto;
	vertical-align: text-bottom;
	text-decoration: none;
	clear: right;
	margin-top: 52px;
}

.barranavigazione-home {
	height: 20px;
	width: auto;
	top: 70px;
	right: auto;
	margin-left: 15%;
	left: auto;
	margin-right: auto;
	float: left;
	margin-top: -50px;
	clear: both;
}

.banda-home {
	background-color: #333;
	height: 80px;
	width: auto;
	left: 0px;
	top: 0px;
	filter: alpha(opacity=50);
	opacity: 0.5;
	-moz-opacity: 0.50;
}

.barranavigazione-container {
	font-family: Verdana, Geneva, sans-serif;
	height: 80px;
	width: auto;
	vertical-align: text-bottom;
	text-decoration: none;
	clear: right;
	margin-top: 52px;
}

.barranavigazione {
	height: 20px;
	width: auto;
	top: 70px;
	right: auto;
	margin-left: 15%;
	left: auto;
	margin-right: auto;
	float: left;
	margin-top: -50px;
	clear: both;
}

.banda {
	background-color: #333;
	height: 80px;
	width: auto;
	left: 0px;
	top: 0px;
	filter: alpha(opacity=35);
	opacity: 0.35;
	-moz-opacity: 0.35;
}

.container-fascia-team {
	background-color: #efdcb0;
	height: 138px;
	width: 100%;
	left: 0px;
	top: 0px;
	min-width: 1125px;
}

.container-fascia-restauri {
	background-color: #7e0001;
	height: 138px;
	width: 100%;
	left: 0px;
	top: 0px;
	min-width: 1125px;
}

.container-fascia-yacht {
	background-color: #707fa9;
	height: 138px;
	width: 100%;
	left: 0px;
	top: 0px;
	min-width: 1125px;
}

.container-fascia-home {
	background-color: #867362;
	height: 138px;
	width: 100%;
	left: 0px;
	top: 0px;
	min-width: 1125px;
}

.container-fascia-arte {
	background-color: #62c5f2;
	height: 138px;
	width: 100%;
	left: 0px;
	top: 0px;
	min-width: 1125px;
}

.container-fascia-bookshop {
	background-color: #363636;
	height: 138px;
	width: 100%;
	left: 0px;
	top: 0px;
	min-width: 1125px;
}

.container-fascia-stampa {
	background-color: #015f74;
	height: 138px;
	width: 100%;
	left: 0px;
	top: 0px;
	min-width: 1125px;
}

.logo-sx {
	height: 138px;
	width: 394px;
	background-image: url(img/logo-sx.jpg);
	float: left;
}

/* #######################################-------------CONTENUTO------------------####################################### */

/* ~~ Questo contenitore a larghezza fissa circonda tutti gli altri blocchi ~~ */
.container {
	width: 1125px;
	margin: 0 auto; /*  Il valore automatico sui lati, abbinato alla larghezza, produce un layout centrato.  */
}

.breadcrumb {
	font-size: 75%;
	line-height: 1.3;
	margin-top: 15px;
	clear: both;
	margin-bottom: -7px;
	color: #C00;
}
.breadcrumb a{
	color: #C00;
	text-decoration: none;
	padding-right: 20px;
	background-image: url(img/bc-separator.png);
	background-repeat: no-repeat;
	background-position: right center;
}
.breadcrumb a:hover {
	color: #FFF;
	text-decoration: underline;
}
.breadcrumb span{
	display: none;
	color: #FFF;
}
.breadcrumb em{
	font-style: normal;
	color: #FFF;
}

/* ~~ All'intestazione non viene assegnata una larghezza. Estenderà l'intera larghezza del layout.  ~~ */
header {
	background-color: #ADB96E;
}
/* ~~ Queste sono le colonne del layout. ~~ 

1) La spaziatura viene applicata solo al lato superiore e/o inferiore degli elementi di blocco. Agli elementi all'interno di questi blocchi 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 blocco stesso, andranno ad aggiungersi alla larghezza definita per produrre la larghezza *totale*. Potete anche scegliere di rimuovere la spaziatura dell'elemento nell'elemento di blocco e inserire un secondo blocco 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 blocco impostato per un float verso destra). Spesso è possibile utilizzare una spaziatura come alternativa. Per i blocchi in cui questa regola deve essere ignorata, dovete aggiungere una dichiarazione "display:inline" alla regola dell'elemento di blocco 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 blocchi 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 sinistra anziché a destra, è sufficiente applicare alle colonne un float nella direzione opposta (tutte a sinistra anziché a destra) in modo da eseguirne il rendering in ordine inverso. Non è necessario spostare i blocchi all'interno del codice HTML.

*/

/* #######################################-------------Colonna Destra-------------------####################################### */
.sidebar-home {
	float: right;
	width: 495px;
	padding-bottom: 10px;
	padding-right: 5px;
	padding-left: 5px;
	margin-top: 7px;
}

.sidebar {
	float: right;
	width: 250px;
	padding-bottom: 10px;
	padding-right: 5px;
	padding-left: 5px;
	margin-top: 17px;
}

.box-cat {
	font-size: 80%;
	background-color: #171717;
	text-align: left;
	clear: both;
	width: 240px;
	padding-top: 7px;
	padding-right: 5px;
	padding-bottom: 7px;
	padding-left: 5px;
	border-top-width: thin;
	border-right-width: thin;
	border-bottom-width: thin;
	border-left-width: thin;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #3E3E3E;
	border-right-color: #5F5F5F;
	border-bottom-color: #3E3E3E;
	border-left-color: #5F5F5F;
}

.box-cat h2 {
	font-size: 135%;
	background-color: #333;
	display: block;
	height: 25px;
	margin-top: -7px;
	width: 220px;
	margin-left: -5px;
	margin-bottom: 3px;
	border-bottom-width: thin;
	border-bottom-style: solid;
	border-bottom-color: #3E3E3E;
	padding-top: 2px;
	color: #FFF;
}

.box-cat a {
	color: #C00;
}

.box-cat a:hover, a:active, a:focus {
	color: #FFF;
	text-decoration: underline;
}

.box-list {
	font-size: 80%;
	text-align: left;
	clear: both;
	width: 240px;
	padding-top: 7px;
	padding-right: 5px;
	padding-bottom: 7px;
	padding-left: 5px;
	margin-top: 25px;
	border-left-width: thin;
	border-left-style: solid;
	border-left-color: #1A1A1A;
	border-right-width: thin;
	border-bottom-width: thin;
	border-right-style: solid;
	border-bottom-style: solid;
	border-right-color: #1A1A1A;
	border-bottom-color: #1A1A1A;
}

.box-list h2 {
	font-size: 135%;
	background-color: #1A1A1A;
	display: block;
	height: 25px;
	margin-top: -7px;
	width: 220px;
	margin-left: -5px;
	margin-bottom: 3px;
	padding-top: 2px;
}

.box-list a{
	color: #FFF;
}

.box-list a:hover, a:active, a:focus {
	color: #C00;
	text-decoration: underline;
}


/* ~~ Gli stili dell'elenco di navigazione (rimovibili se scegliete di utilizzare un menu flyout reimpostato come Spry) ~~ */
ul.nav {
	list-style: none; /*  Rimuove l'indicatore di elenco */
	border-top: 1px solid #666; /*  Crea il bordo superiore dei collegamenti; tutti gli altri vengono posizionati utilizzando un bordo inferiore sul LI  */
	margin-bottom: 15px; /*  Crea lo spazio tra gli elementi di navigazione nel contenuto sottostante  */
}
ul.nav li {
	border-bottom: 1px solid #666; /*  Crea la separazione tra i pulsanti  */
}
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: 5px 5px 5px 15px;
	display: block; /*  Specifica le proprietà block del collegamento facendo sì che riempia l'intero LI che lo contiene. Fa in modo che l'intera area risponda a un clic del mouse.  */
	width: 160px;  /*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;
	background-color: #C6D580;
}
ul.nav a:hover, ul.nav a:active, ul.nav a:focus { /* this changes the background and text color for both mouse and keyboard navigators */
	background-color: #ADB96E;
	color: #FFF;
}



/* #######################################-------------Colonna Centrale-------------------####################################### */
.content-home {
	width: 615px;
	float: right;
	padding-top: 10px;
	padding-right: 5;
	padding-bottom: 10px;
	padding-left: 10;
}

.content {
	width: 860px;
	float: right;
	padding-top: 10px;
	padding-right: 5;
	padding-bottom: 10px;
	padding-left: 10;
	color: #FFF;
}

/* ~~ Questo selettore raggruppato fornisce spazio agli elenchi dell'area .content ~~ */
.content-home ul, .content-home ol {
	padding: 0 15px 15px 40px; /*  Questa spaziatura rispecchia la spaziatura destra nella regola di intestazione e paragrafo riportata sopra. La spaziatura è stata applicata al lato inferiore per garantire uno spazio tra gli altri elementi negli elenchi e a sinistra per creare il rientro. Può essere regolata a piacere.  */
}

article {
	font-size: 95%;
	line-height: 1.5em;
	font-weight: normal;
}

section {
	margin-right: 5px;
	padding-bottom: 7px;
	/* border: thin solid #333;*/
	padding-top: 10px;
	padding-right: 5px;
	padding-left: 5px;
	min-height:300px;
}

figure {
	display: block;
	background-color: #666;
	text-align: center;
	vertical-align: middle;
	float: left;
	height: 250px;
	width: 250px;
	margin-bottom: 7px;
	margin-right: 7px;
	margin-left: 5px;
	padding-top: 5px;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 5px;
	clip: rect(125px,auto,auto,auto);
	overflow: hidden;
}

figure1 {
	display: block;
	text-align: center;
	vertical-align: middle;
	float: left;
	margin-right: 2px;
	margin-bottom: 5px;
	margin-left: 3px;
}

scheda {
	display: block;
	/* background-color: #141414;*/

	text-align: left;
	line-height: 1.2em;
	float: left;
	height: 250px;
	width: 553px;
	margin-bottom: 7px;
	padding: 5px;
	font-size: 85%;
	color: #FFF;
	text-decoration: none;
	font-weight: normal;
}

.gallery {
	background-color: #666;
	clip: rect(125px,auto,auto,auto);
	float: left;
	width: 120px;
	height: 120px;
	padding: 3px;
	text-align: center;
	margin: 7px;
}
.gallery1 {
	background-color: #333;
	float: left;
	width: 120px;
	height: 194px;
	padding: 3px;
	text-align: center;
	margin: 7px;
	font-size: 75%;
	color: #FFF;
	text-decoration: none;
}

.gallery-img {
	height: 120px;
	overflow: hidden;
}

.gallery-testo {
	background-color: #000000;
	height: 71px;
	display:block;
	text-align: center;
	margin-top: 3px;
	margin-bottom: 3px;
}

.gallery-testo a:link, a:visited, a:active {
	color: #C00;
	font-weight: bold;
	text-decoration: none;
}

.gallery-testo a:hover, a:focus {
	color: #FFF;
	background-color: #000;
	text-decoration: underline;
	font-weight: bold;
}


section, article, aside {
	display: block;
}

/* #######################################-------------Footer-------------------####################################### */

/* ~~ Il footer ~~ */
.footer {
	background-color: #000000;
	color: #FFF;
	text-decoration: none;
	background-image: url(img/sfondo-footer.jpg);
	width: 100%;
	padding-right: 0;
	padding-left: 0;
	border-top-width: 3px;
	border-top-style: solid;
	border-top-color: #C00;
	background-repeat: repeat-x;
	clear: both;
	bottom: 10px;
	padding-top: 10px;
	padding-bottom: 10px;
	margin-top: 15px;
        margin-bottom: 15px;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 70%;
	text-align: center;
	float: left;
}

.footer a, a:link, a:visited {
	color: #FFF;
	display: inline;
}

.footer a:hover, a:active, a:focus {
	color: #C00;
	text-decoration: underline;
	display: inline;;
}

.footer-address {
	width: 1110px;
	margin: 0 auto;
}

.footer-left {
	float: left;
	height: 110px;
	width: 900px;
	text-align: center;
	display: block;
}
.footer-right {
	text-align: center;
	vertical-align: middle;
	display: block;
	float: left;
	height: 110px;
	width: 200px;
}

#ordina {
	font-size: 120%;
	font-weight: bolder;
	color: #C00;
	text-decoration: none;
	background-color: #333;
	display: block;
	height: 20px;
	width: 100px;
	text-align: center;
	padding-top: 7px;
}
#ordina a:hover, #ordina a:focus {
	color: #C00;
	text-decoration: none;
}


.modulo-ordine {
	color: #FFF;
	text-decoration: none;
	margin-top: 0px;
	margin-right: 0px;
	margin-left: 0px;
	background-color: #333333;
}
.modulo-ordine Input {
	font-size: 110%;
	font-family: verdana;
	color: #000;
	background-color: #C7D1C8;
}

</style>[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]