@import url("fonts.css");

/*LAYOUT*/
body {background: url(images/background_alone.png) repeat-x center top #fff; color:#444;}
#decorazione {background:url(images/background_world.jpg) no-repeat center 0 ;}
#wrapper {box-shadow:0 0 25px rgba(0,0,0,0.75); margin:0 auto; background-color:#fff; overflow:hidden; position:relative; min-height:704px; max-width:1600px}
#corpo {position:relative; padding-right: 280px; background:url(images/corpo_background.png) no-repeat 100% 100%;  margin-right: 54px;}
body.home #corpo {margin-right: 280px; background:none; z-index: 20; padding:0}
body.carta #corpo {margin-right:0; background:none; padding-right: 0; }
#frame {border-left: 1px solid #FFFFFF; position: absolute; right: 0; top: 0; z-index: 10;}
#frame, #periodi {width:279px;}
#powered {margin:0 auto; font-size: 13px; text-align:center; margin-top:15px; display:none;}

/*HEADER*/
#header {height:53px; background-color:#444; color:#fff; border-bottom:1px solid #fff;}
#header h1 {line-height:53px; padding: 0 0 0 30px;}

/*PERIODI*/
#periodi {}
#periodi li {border-top:1px solid #fff; clear:both; overflow:hidden; position:relative;}
#periodi li:first-child {border-top:none}
#periodi li a {line-height:15px; background-color:#e6e6e6;  font-size:15px; color:#000; display:block; padding-left: 53px;}
#periodi li a:hover {background-color:#ddd;}
#periodi li a.due_righe {}
#periodi li a span.numero {display:block; width:38px; height:auto; position:absolute; top:0; left:0; color:#fff; font-size:18px; text-align:center; font-weight:400;}

/*ELEMENTI*/
.data {background:url(images/pattern/nero40.png) repeat 0 0; color:#fff; text-align:center; float:left;}
#powered strong {font-size:16px; font-weight:100; color:#222}
.spento {display:none;}

/*HOME*/
.home .data {line-height:53px; font-size:24px; padding:0 20px; margin-right:20px;}
#copertina {background:url(images/copertina.jpg) no-repeat center center; position:relative; height:574px; background-size:cover; overflow:hidden}
#copertina #loghi {position:absolute; bottom:0; height:200px; width:100%; background:url(images/loghi_alone.png) repeat-x center bottom;}
#copertina #loghi .logo {background-position: 0 0; background-repeat: no-repeat; bottom: 20px; position: absolute; left:30px;}
#copertina #loghi .logo.palumbo {width:199px; height:94px; background:url(images/logo-palumbo.png);}
#copertina #loghi .logo.sei {width:132px; height:40px; background:url(images/logo-sei.png);}
#copertina #loghi .logo.lattes {width:90px; height:94px; background:url(images/logo-lattes.png);}

#titolo {text-align:center; color:#fff; background-image: url(images/backgrounds/nero60.png); padding:20px 0 30px; margin-top:45px; text-shadow: 0 2px 2px #000000; position:relative;}
#titolo h1 {font-size:50px; line-height:55px}
#titolo h3 {font-size:25px; color:#ccc; letter-spacing: -0.2px;}
#demo {position:absolute; background:url(images/demo.png) no-repeat 0 0; width:158px; height:140px; top:0; right:0}

/*timeline*/
#timeline {background:url(images/timeline_alone.png) repeat-x 0 0; height:200px; position:relative; z-index:10; background-size:100% 100%}
#timeline .periodi {width:100%; height:100%; overflow:hidden;}
#timeline .grafica {position:absolute; color:#fff; font-size:18px;}
#timeline .linee {background:url(images/timeline_linee.png) no-repeat center bottom; height:200px; width:100%; background-size:100% 60%;}
#timeline .titolo {background: url(images/timeline_titolo.png) no-repeat scroll center 0 transparent; height: 30px; top: 15px; width: 100%;}
#timeline .inizio {left: 10px; top: 9px;}
#timeline .fine {right: 10px; top: 9px;}

/*cuepiont scritte*/
#timeline .cuepoint {background-color: rgba(80, 80, 80, 0.8); box-shadow: 0 5px 2px -3px rgba(0, 0, 0, 0.5); border-radius: 3px 3px 3px 3px; color: #fff; font-size: 11px; margin-left: -16px; padding: 5px 4px; text-align: center; top: 50px; width: auto; line-height:11px; cursor:default; border:none !important; height:11px !important; z-index:10; min-width: 24px;}
#timeline .cuepoint.riga2 {top:73px}
#timeline .cuepoint.riga3 {top:95px}

/*cuepiont grafici
#timeline .tooltip-target.cuepoint {height:18px; width:16px; text-indent:-500px; background:url(images/cuepoint.png) no-repeat 0 0; border:none; overflow:hidden; z-index:10; top:55px; margin-left:-8px}
#timeline .tooltip-target.cuepoint:hover {background-position: 0 -50px}*/

#timeline .tooltip-target {display:block; height:10%; border:1px solid #fff; position:absolute; bottom:0;}
#timeline .tooltip-target.volume {height:47%; border:1px solid rgba(255,255,255,0.5); position:absolute;}
#timeline .tooltip-target.volume.primo {background-color: rgba(0, 0, 0, 0.2); border-left: medium none;}
#timeline .tooltip-target.volume.secondo {background-color: rgba(0, 0, 0, 0.3);}
#timeline .tooltip-target.volume.terzo {background-color: rgba(0, 0, 0, 0.4); border-right: medium none;}
#timeline .linea2 {bottom: 10.5%;}
#timeline .linea3 {bottom: 21%;}
#timeline .linea4 {bottom: 31.5%;}
.tooltip-content { display: none; /* required */ position: absolute; /* required */  padding: 15px; box-shadow:0 0 10px rgba(0,0,0,0.3); background-color: white; border-radius:5px; width:140px; font-size:16px; text-align:center; z-index:20;}
.tooltip-content.scuro {background-color:rgba(60, 60, 60, 0.95); color:#fff; font-size:14px; border-radius:2; padding:7px 0; width:110px; margin-left:20px}
.tooltip-content.cue {background-color:rgba(60, 60, 60, 0.95); color:#fff; font-size:13px; border-radius:2; padding:4px 5; width:60px; margin-left:40px; margin-top: -15px;}
.tooltip-content.cue span {font-size:15px;}
.tooltip-content span {display:block; font-size:15px}
.tooltip-content .freccia {position:absolute; width:14px; height:12px; left:80px; top:-12px; background:url(images/pandetta_freccia.png) no-repeat 0 0;}

/*PERIODO*/
.periodo h1 {font-size:26px}
.periodo #header {overflow:hidden;}
/*.periodo #header .data {font-size:20px; line-height:22px; margin-right:15px; width:60px; padding:5px 0;}*/
.periodo #header .data.numero {font-size:25px; line-height:53px; margin-right:15px; width:60px;}
#header a.torna {position:absolute; width:219px; color: #fff; font-size: 18px; height: 53px; line-height: 53px; right:0; top:0; background-image:url(images/pattern/nero20.png);z-index:40; border-left:1px solid #fff;}
.icona {background:url(images/icone/carte_interattive.png) no-repeat center center rgba(0,0,0,0.3); height:53px; width:60px; display:block; float:left; margin-right:15px;}
.torna .icona {background-image:url(images/icone/torna.png); margin-right: 13px;}
.periodo.carta .home {background-image: url("images/home.png"); background-position: center center; background-repeat: no-repeat; border-left: 1px solid #FFFFFF; display: block; height: 53px; position: absolute; right: 219px; top: 0; width: 60px; z-index:40}

/*expander*/
#expander {position: absolute; right:0; top:0;  transition-property: right; transition-duration: 0.5s; transition-timing-function: ease; z-index: 100; height:1030px; /*background:url(images/expander_sfondo.png) no-repeat 0 bottom;*/}
#expander.chiuso {position: absolute; right:-280px; top:0; transition-property: right; transition-duration: 0.5s; transition-timing-function: ease;}
#expander #colonna { float:left; border-left: 1px solid #fff;}
#expander #colonna a {width:53px; height:53px; border-bottom:1px solid #fff; display:block;}
#expander #colonna a.home {background-image:url(images/home.png); background-repeat:no-repeat; background-position: center center; }
#expander #colonna a.expander {background:url(images/expander.png) no-repeat left top #272727; }
#expander #colonna a.expander.chiudi {background-position:right top;}
#expander.chiuso #colonna a.expander.chiudi, #expander.aperto #colonna a.expander.apri {display:none}
#expander #colonna .fascia {background: url(images/fascia_text.png) no-repeat center 5% #777;width:53px; height:600px}
#expander #periodi {float:right; border-left: 1px solid #fff;}

/*CARTE*/
#carte {}
#carte .avviso {font-size: 20px; margin: 100px 50px 0; text-align: center; color:#666}
#carte .avviso a {border-bottom: 1px solid #ddd; color: #333333; display: block; padding: 10px 0;}
#carte .avviso a:last-child {border:none;}
#carte .avviso .elenco {background-color: #F2F2F2; margin-top: 30px; padding: 15px 30px; border: 1px dotted #ccc;}
#carte .avviso a span {display: inline-block; font-weight: 600; margin-right: 10px; color:#555}
#carte h2 {height:53px; line-height:53px; font-size:20px; color:#fff; background-color:#777}
#mappe {padding-right:20px; overflow: hidden; position:relative;}
body.carta #mappe {padding: 10px 15px; height:auto; margin-bottom:30px}
#mappe .mappa {border-bottom: 1px dotted #ccc; height: 149px; position: relative; overflow: hidden; display:block;}
#mappe .mappa:hover {background-color:#f9f9f9;}
#mappe .mappa .immagine {float:left; width:180px; height:150px; border-right:1px solid #bbb; overflow:hidden; margin-right:15px; background-color:#eee;}
#mappe .mappa .testo {max-height: 110px; overflow: hidden; padding: 15px 0;}
#mappe .mappa .testo h3 {font-size:18px; color:#222; margin-bottom: 5px;}
#mappe .mappa .testo p {font-size:15px; color:#555; }
/*Scroller*/
#ascrail2000 {right: 25px ; z-index:10 !important; opacity:0.5 !important; display: block !important; overflow:hidden;}
#ascrail2000 div {background-color:#000 !important; margin-top:4px;}

/*CONTRIBUTI*/
#contributi {position: absolute; right: 0px; top: 0; width: 279px;}
#contributi .contenitore {border-bottom:1px solid #fff;}
#contributi h2, #contributi a.contributi {height:53px; line-height:53px; font-size:23px; color:#fff; background-color:#333; padding-left:30px; border-bottom:1px solid #fff;}
#contributi #accordion {color:#fff; font-size:15px; width:280px; position:absolute; background-color:rgba(0,0,0,0.85); z-index:30}
#contributi .new_accordion {background-color:#3a3a3a;}
#contributi .new_accordion h4 {font-size:18px; line-height:35px; height:35px; padding-left:35px; background-repeat:no-repeat; background-position: 6px center; cursor:pointer; position:relative;}
#contributi h4 .expander {display:block; position:absolute; height:20px; width:20px; top:7px; right:7px; background:url(images/expander_contenuti.png) no-repeat 0 0;}
#contributi .ui-state-active h4 .expander {background-position: right 0}
#contributi .indice {background:url(images/accordion-background.png) repeat-x 0 0; padding:5px 0 20px;}
#contributi .indice li {background-repeat:no-repeat; background-position: 10px 8px;}
#contributi .indice li a {margin:0 12px 0 35px; display:block; border-top: 1px solid rgba(255, 255, 255, 0.2); padding: 5px 0; color:#ddd; line-height:110%; width: auto; letter-spacing:-0.2px;}
#contributi .indice li a:hover {color:#fff;}
#contributi .indice li:first-child a {border-top:none;}
#contributi .video h4 {background-image:url(images/icone/video.png); background-position:10px center;}
#contributi .slideshow h4 {background-image:url(images/icone/slideshow.png);}
#contributi .cinema h4 {background-image:url(images/icone/cinema.png);}
#contributi .percorsi h4 {background-image:url(images/icone/percorsi.png);}
#contributi .fonti h4 {background-image:url(images/icone/fonti.png);}
#contributi .mappe_concettuali h4 {background-image:url(images/icone/mappe_concettuali.png);}
#contributi .esercitazioni h4 {background-image:url(images/icone/esercitazioni.png);}
#contributi .carte .indice li, #contributi .indice li.esercitazioni.carte {background-image:url(images/icone/carte-mini.png);}
#contributi .video .indice li, #contributi .indice li.esercitazioni.video {background-image:url(images/icone/video-mini.png);}
#contributi .slideshow .indice li, #contributi .indice li.esercitazioni.slideshow  {background-image:url(images/icone/slideshow-mini.png);}
#contributi .cinema .indice li, #contributi .indice li.esercitazioni.cinema  {background-image:url(images/icone/cinema-mini.png);}
#contributi .percorsi .indice li, #contributi .indice li.esercitazioni.percorsi  {background-image:url(images/icone/percorsi-mini.png);}
#contributi .fonti .indice li, #contributi .indice li.esercitazioni.fonti  {background-image:url(images/icone/fonti-mini.png);}
#contributi .mappe_concettuali .indice li, #contributi .indice li.esercitazioni.mappe_concettuali {background-image:url(images/icone/mappe_concettuali-mini.png);}
#contributi .esercitazioni .indice li, #contributi .indice li.esercitazioni {background-image:url(images/icone/esercitazioni-mini.png);}
#contributi a.contributi {border: 1px solid #FFFFFF; display: block; margin: -1px; position: absolute; width: 295px; z-index: 40; background-color: #333; padding:0; }
#contributi.chiuso a.contributi.chiudi, #contributi.aperto a.contributi.apri {display:none}
#contributi.chiuso {height:54px;}
#contributi.chiuso #accordion {top:-550px; transition-duration: 0.3s; transition-property: top; transition-timing-function: ease-in; }
#contributi.aperto #accordion {top:54px; transition-duration: 0.3s; transition-property: top; transition-timing-function: ease-in;}
#contributi span.icona  {background-image:url(images/apri_chiudi.png); background-repeat:no-repeat; background-position:0 bottom;}
#contributi.aperto span.icona {background-position:0 0}

/*AVVISO ESERCITAZIONI*/
.esercitazione {background-color: #F2F2F2; border: 1px dotted #999; font-size: 15px; margin-top: 30px; padding: 20px;}
.esercitazione h4 {font-size: 125%; margin: -5px 0 10px;}
.esercitazione a.esercizio {background: url(images/icone/esercitazioni.png) no-repeat 20px 6px #555; color: #ddd; display: block; margin: 15px -20px -20px; padding: 5px 20px 5px 50px;}
.esercitazione a.esercizio:hover {color:#fff;}

/*FANCYBOX*/
#contributi_fancybox {display: none;}
.fancybox-skin {background-color:#fff !important;}

/*COLORE*/
/*periodi*/
a.periodo18, a.periodo18 span, .periodo18 h1, home.periodo18, #header.periodo18 a.torna, #header.periodo18 a.home {background-color:#003e7b}
a.periodo17, a.periodo17 span, .periodo17 h1, home.periodo17, #header.periodo17 a.torna, #header.periodo17 a.home {background-color:#0054a6}
a.periodo16, a.periodo16 span, .periodo16 h1, home.periodo16, #header.periodo16 a.torna, #header.periodo16 a.home {background-color:#0074e6}
a.periodo15, a.periodo15 span, .periodo15 h1, home.periodo15, #header.periodo15 a.torna, #header.periodo15 a.home {background-color:#00a6dd}
a.periodo14, a.periodo14 span, .periodo14 h1, home.periodo14, #header.periodo14 a.torna, #header.periodo14 a.home {background-color:#00c4d7}
a.periodo13, a.periodo13 span, .periodo13 h1, home.periodo13, #header.periodo13 a.torna, #header.periodo13 a.home {background-color:#00cfab}
a.periodo12, a.periodo12 span, .periodo12 h1, home.periodo12, #header.periodo12 a.torna, #header.periodo12 a.home {background-color:#00c26f}
a.periodo11, a.periodo11 span, .periodo11 h1, home.periodo11, #header.periodo11 a.torna, #header.periodo11 a.home {background-color:#11b900}
a.periodo10, a.periodo10 span, .periodo10 h1, home.periodo10, #header.periodo10 a.torna, #header.periodo10 a.home {background-color:#67b100}
a.periodo09, a.periodo09 span, .periodo09 h1, home.periodo09, #header.periodo09 a.torna, #header.periodo09 a.home {background-color:#9baa02}
a.periodo08, a.periodo08 span, .periodo08 h1, home.periodo08, #header.periodo08 a.torna, #header.periodo08 a.home {background-color:#b2a400}
a.periodo07, a.periodo07 span, .periodo07 h1, home.periodo07, #header.periodo07 a.torna, #header.periodo07 a.home {background-color:#c58002}
a.periodo06, a.periodo06 span, .periodo06 h1, home.periodo06, #header.periodo06 a.torna, #header.periodo06 a.home {background-color:#b45300}
a.periodo05, a.periodo05 span, .periodo05 h1, home.periodo05, #header.periodo05 a.torna, #header.periodo05 a.home {background-color:#b91e00}
a.periodo04, a.periodo04 span, .periodo04 h1, home.periodo04, #header.periodo04 a.torna, #header.periodo04 a.home {background-color:#cf0068}
a.periodo03, a.periodo03 span, .periodo03 h1, home.periodo03, #header.periodo03 a.torna, #header.periodo03 a.home {background-color:#9000a4}
a.periodo02, a.periodo02 span, .periodo02 h1, home.periodo02, #header.periodo02 a.torna, #header.periodo02 a.home {background-color:#5c00a4}
a.periodo01, a.periodo01 span, .periodo01 h1, home.periodo01, #header.periodo01 a.torna, #header.periodo01 a.home {background-color:#3d008f}

/*#periodi li a.periodo04, #periodi li a.periodo15 {background-color:#d2d2d2;}
#periodi li a.periodo04 span.numero, #periodi li a.periodo15 span.numero {opacity:1}
#periodi li a span.numero {opacity:0.4}*/

/*CREDITS*/
#credits {text-align:center;}
#credits header {background-color: rgba(0, 0, 0, 0.8); color: #fff; margin-bottom: 15px; padding: 15px 0; }
a.credits {bottom: 20px; color: #ddd; font-size: 24px; position: absolute; right: 40px; background:url(images/credits.png) no-repeat 0 0; line-height:24px; padding-left:32px;}
a.credits:hover {background-position:0 -50px; color:#fff}
#credits .nomi {border-bottom:1px solid #999; padding-bottom:25px; margin:0 5%}
#credits .nomi .fascia {width:66%}
#credits .fascia {border-bottom: 1px solid #ddd; line-height: 133%; padding: 10px 0; margin:0 auto; width:90%}
#credits .fascia:last-child {border:none;}
#credits .qualifica, #credits .parte {color:#000; font-weight:700;}
#credits strong {color:#444; font-weight:700;}
#credits ul.parti {text-align:left; margin:15px 0}
#credits ul.parti li {border-bottom: 1px dotted #999; padding:15px 0}
#credits ul.parti li:last-child {border:none;}
#credits ul.parti ul {margin-left:20px;}
#credits .specifiche {font-size: 0.85em; margin: 30px auto 10px; text-align: left;}
#credits .specifiche p {margin-bottom:1em;}

/*TIPOGRAFIA*/
body {font-family:Source Sans Pro, Tahoma, Geneva, sans-serif; font-weight:300;}
.cuepoint {font-family:Arial, Helvetica, sans-serif;}
h1,h2,h3,h4,h5,h6 {line-height:1.2em; font-weight:300;}
strong {font-weight:bold;}
.allineamento-sinistra {text-align:left}

/*RESPONSIVE LARGHEZZE*/
@media only screen and (min-width: 1101px) and (max-width: 1900px) {
#wrapper {margin:0 5%; min-width:980px} 
}

@media only screen and (min-width: 0) and (max-width: 1100px) {
#wrapper {width:980px; margin:0 auto;} 
#mappe {}
}

/*RESPONSIVE ALTEZZE*/
@media only screen and (min-height: 0) {
#mappe {height:600px}
#copertina {height:506px;}
#periodi li a {padding: 11px 10px 12px 53px;}
#periodi li a span.numero {line-height:40px}
#periodi li a.due_righe {padding: 5px 10px 5px 53px;}
#contributi .indice li.esercitazioni a {overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
}

@media only screen and (min-height: 800px) {
#mappe, #expander #colonna .fascia {height:750px}
#copertina {height:656px;}
#periodi li a {padding: 16px 10px 16px 53px;}
#periodi li a span.numero {line-height:48px}
#periodi li a.due_righe {padding: 7px 10px 8px 53px;}
#contributi .indice li.esercitazioni a {overflow: inherit; text-overflow:normal; white-space:normal;}
}

@media only screen and (min-height: 950px) {
#mappe, #expander #colonna .fascia {height:900px}
#copertina {height:806px;}
#periodi li a {padding: 20px 10px 20px 53px;}
#periodi li a span.numero {line-height:55px}
#periodi li a.due_righe {padding: 12px 10px 13px 53px;}
}