/* CSS Document */
	
body {
	font-family:Helvetica, Arial, sans-serif;
	font-size:13px;
	background: #FFFFFF;
	margin: 0;
	padding: 0;
	color: #5e5e5e;
}


/* ~~ Selettori tag/elemento ~~ */
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;
}
h1, h2, h3, h4, h5, h6, p {
	margin-top: 0;	 /* La rimozione del margine superiore permette di aggirare il problema che si crea quando i margini possono fuoriuscire dal blocco che li contiene. Il margine inferiore che rimane permetterà di distanziare gli elementi che seguono.  */
	padding: 0px;
	/* padding-right: 15px; */
	/* padding-left: 15px; /* L'aggiunta di una spaziatura ai lati degli elementi contenuti nei blocchi, anziché direttamente nei blocchi stessi, consente di evitare ogni calcolo matematico relativo ai riquadri. Come metodo alternativo si può anche utilizzare un blocco nidificato con spaziatura laterale. */ */ù
}

article h1 { font-size:24px; color:#808080; }

a img { border: none; }
a { text-decoration:underline; color:#5e5e5e; }
a:hover { text-decoration:none; color:#ed8000; }

/* ~~ Questo contenitore a larghezza fissa circonda tutti gli altri blocchi ~~ */
.container {
	width: 960px;
	background: #FFFFFF;
	margin: 0 auto; /*  Il valore automatico sui lati, abbinato alla larghezza, produce un layout centrato.  */
}
/* ~~ All'intestazione non viene assegnata una larghezza. Estenderà l'intera larghezza del layout.  ~~ */
header {  }
header div.sitename { display:block; padding:25px 0px 10px 0px; }
header div.sitename a.it { font-size:32px; color:#000000; text-decoration:none; letter-spacing:0.3em; margin:0px 0px 0px 10px; }
header div.sitename a.it span { font-size:32px; color:#808080; }

header div.sitename a.jp { float:right; margin:0px 12px 0px 0px; }

nav.menumain { text-align:center; margin:0px 10px; border-bottom:2px solid #b3b3b3; padding:10px 0px 0px 0px; }
nav.menumain ul { list-style:none; }
nav.menumain li { display:inline-block; }
nav.menumain a { text-decoration:none; letter-spacing:0.2em; font-weight:normal; margin:0px 7px; display:block; padding-bottom:10px; padding-left:4px; font-size:95%; color:#808080; }
nav.menumain a.selected { color:#e78007; }
nav.menumain a:hover { /*background:url(/media/layout/freccia_su.png) bottom center no-repeat;*/ color:#e78007; }
nav.menumain a.social { font-weight:bold; color:#000;  }
nav.menumain a.social:hover { color:#e78007; }

nav.submenu {}
nav.submenu ul { list-style:none; font-size:24px; }
nav.submenu li { padding:10px 0px;  font-size:24px;}
nav.submenu a { border-left:2px solid #B3B3B3; padding-left:25px; padding-top:3px; font-size:24px; text-transform:uppercase; text-decoration:none; color:#000; }
nav.submenu a:hover { /*background:url(/media/layout/freccia_dx.png) center left no-repeat;*/ border-left:2px solid #e78007; color:#e78007; }

.promo{ margin-bottom:8px; }

.to_right { 
	float:right; 
}


/* ~~ 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.

*/
.sidebar-a {
	float: right;
	width: 300px;
	margin:20px 10px;
}
.content {
	float:left;
	width:600px;
	margin:20px 10px;
}

/* ~~ Il footer ~~ */
footer {
	padding: 20px 0;
	text-align:center;
	position: relative;/* fornisce hasLayout a IE6 per ottenere un clearing corretto */
	clear: both; /* questa proprietà clear obbliga il .container a tenere conto di dove terminano le colonne e a contenerle */
}

footer a { text-decoration:none; color:#5e5e5e; }


/*Supporto HTML 5 - Imposta nuovi tag HTML 5 per display:block in modo da indicare ai browser come eseguire il rendering corretto dei tag. */
header, section, footer, aside, nav, article, figure {
	display: block;
}

/* navigazione news */
.news_nav { float:right; padding-top:15px; margin-bottom:15px; text-align:right; }
.news_nav select { border:1px solid #CCC; background:#FFF; color:#333; width:70px; }

/* principale */
article h1 { font-size:38px; font-weight:normal; color:#ed8000; margin-bottom:23px; }
article h2 { font-size:20px; font-weight:bold; color:#627079; margin-bottom:15px; }
article h3 { font-size:16px; font-weight:bold; color:#ed8000; margin-bottom:10px; }
article h4 { font-size:14px; font-weight:bold; color:#627079; margin-bottom:0px; margin-top:10px; }
p.sub { margin:5px 0px; }
span.data { color:#94a3ad; }

hr { border:0; background-color:#CCCCCC; height:1px; margin-bottom:15px; }

section { margin-bottom:15px; }
section h2 { font-size:20px; font-weight:bold; color:#627079; margin-bottom:2px; }

/* NEWS */
section.news { margin-bottom:20px; }
section.news h2 { font-size:20px; color:#627079; cursor:pointer; margin-bottom:6px; }
section.news h2 span.data { color:#94a3ad; font-size:14px; display:block; margin-bottom:2px; }
section.news h2:hover { color:#ed8000; }
section.news h2:hover span.data { color:#ed8000; }
section.news div.txt { border-bottom:1px solid #ccc; padding-bottom:10px; font-size:13px; }
section.news div.txt * { font-size:13px; }

section.news div.txt .nws_och { font-size:20px; font-weight:bold; color:#94a3ad; }
section.news div.txt .nws_och *{ font-size:20px; font-weight:bold; color:#94a3ad; }
section.news div.txt .nws_sub { font-size:13px; font-weight:bold; }
section.news div.txt .nws_sub *{ font-size:13px; font-weight:bold; }
section.news div.txt .nws_txt { margin-top:6px; }

/* PROJECTS */
nav.projects {}
nav.projects ul { list-style:none; font-size:24px; color:#627079; }
nav.projects li { padding:7px 0px; font-size:24px;}
nav.projects a { padding-top:3px; font-size:24px; font-weight:normal; text-decoration:none; color:#627079;  }
nav.projects a:hover { color:#ed8000; }


/* MUSIC */
section.music { margin-bottom:20px; border-bottom:1px solid #ccc;  }
section.music h2 { font-size:20px; color:#627079; cursor:pointer; margin-bottom:3px; position:relative; }
section.music h2:hover { color:#ed8000; }
section.music h2 span { display:none; position:absolute; right:10px; bottom:-25px; }
section.music h2:hover span { width:20px; height:23px; display:block; background:url(/media/layout/freccia_open.gif) top left no-repeat; }
section.music h2.open span { display:none; }
section.music h3 { font-size:20px; color:#627079; margin-bottom:0px; margin-top:15px; }
section.music div.txt { margin-left:20px; font-size:13px; padding-bottom:10px; }
section.music div.txt p { margin:0; }
section.music div.txt * { font-size:13px; }


/* CATALOGUE */
section.catalogue { margin-bottom:20px; border-bottom:1px solid #ccc;  }
section.catalogue h2 { font-size:20px; color:#627079; cursor:pointer; margin-bottom:3px; position:relative; }
section.catalogue h2:hover { color:#ed8000; }
section.catalogue h2 span { display:none; position:absolute; right:10px; bottom:-25px; }
section.catalogue h2:hover span { width:20px; height:23px; display:block; background:url(/media/layout/freccia_open.gif) top left no-repeat; }
section.catalogue h2.open span { display:none; }
section.catalogue h3 { font-size:20px; color:#627079; margin-bottom:0px; margin-top:15px; }
section.catalogue div.txt { margin-left:20px; font-size:13px; padding-bottom:10px; }
section.catalogue div.txt p { margin:0; }
section.catalogue div.txt * { font-size:13px; }


/* PIANO CALLING */
section.pianocalling { padding-left:60px; }
section.pianocalling img.center { margin-left:-60px; }
section.pianocalling .orange { color:#ed8000; }
section.pianocalling .grey { color:#637079; }
section.pianocalling .tracklist { font-size:15px; line-height: 18px; color:#637079; }
section.pianocalling a { text-decoration:underline; color:#637079; }
section.pianocalling a:hover { text-decoration:none; color:#ed8000; }