/*---------------------------- G e n e r a l i ----------------------------*/ /*---- NOTA BENE il colore delle linee era #66cccc ----*/ a:link {text-decoration: none; color: black;} a:visited {text-decoration: none; color: black} a:hover {text-decoration: none; color: red} a:focus {text-decoration: none; color: red} a:active {text-decoration: none; color: red} img {border: none} .click {display:block} p {align-content:left; font-size:15px; color:black; font-family:'Open Sans', sans-serif; font-weight: 400; text-transform:none} table {text-align:left; font-size:14px; font-family: 'Open Sans', sans-serif; font-weight: 600; text-transform:none; color:black} body {background-color:white} .separatore {background: url('../img/trat4.png'); width:980px; height:12px; position:relative; top:0px; left:50%; margin-left:-490px; background-repeat:repeat-x} .separatorecorto {background: url('../img/trat4.png'); width:650px; height:12px; position:relative; top:0px; left:50%; margin-left:-490px; background-repeat:repeat-x} #banner{width:1610px; height: 496px; position:absolute; top:0px; left:50%; margin-left:-805px; background-image: url(../img/home/banner_rinascere.png); overflow:hidden} .areadate{width:980px; height: 1150px; position:relative; top:0px; left:50%; margin-left:-490px; background:none} .areainformativa{width:980px; height: 2300px; position:relative; top:0px; left:50%; margin-left:-490px; background:none} .area1100{width:980px; height: 1100px; position:relative; top:0px; left:50%; margin-left:-490px; background:none} .area998{width:998px; height: 726px; position:relative; top:0px; left:50%; margin-left:-499px; background:none} .area998banner{width:998px; height: 720px; position:relative; top:160px; left:50%; margin-left:-500px; background:none; margin-bottom: 163px} .area980{width:980px; height: 980px; position:relative; top:0px; left:50%; margin-left:-490px; background:none} .area650{width:980px; height: 650px; position:relative; top:0px; left:50%; margin-left:-490px; background:none} .area190{width:980px; height: 190px; position:relative; top:0px; left:50%; margin-left:-490px; background:none} .area190home{width:680px; height: 190px; position:relative; top:0px; left:50%; margin-left:-490px; background:none} .areaauto{width:980px; height: auto; position:relative; top:0px; left:50%; margin-left:-490px; background:none} .areaauto1000{width:1000px; height: auto; position:relative; top:0px; left:50%; margin-left:-490px; background:none} #areavideobig{border-top:3px solid red} #fb-like-box {width:300px; height: 900px; position:absolute; top:1000px; left:50%; margin-left:190px; border-top: 3px solid red; z-index: 10} /*---------------------------- H e a d e r ----------------------------*/ #header_contenitore {width:100%; min-width: 980px; height:80px; position:fixed; top:0px; left:0px; background-color:white; background-color:rgba(255,255,255,0.7); z-index:1000; border-bottom: 3px solid red; overflow:hidden; /* AGGIUNTO PER ERRORE VISUALIZZAZIONE CHROME */ transform: translateZ(0); -webkit-transform: translateZ(0);} #header{width:980px; height:80px; position:relative; top:0px; left:50%; margin-left:-490px} .logo-home, .logo, .logo:hover {background: url('../img/logo_bis.png'); width:300px; height:70px;position:absolute; top:5px; left:-20px;} .logo {background-position:left} .logo:hover {background-position:right} #link {width:620px; height:80px; position:absolute; right: 65px} #link p {font-size:16px; word-spacing: 12px; color:blak; text-align: left; line-height: 50px; font-family:'Open Sans', sans-serif; text-transform:none; font-weight: 600} /*---------------------------- A R E A C O N T E N U T I G E N E R A L E ----------------------------*/ #container-si {width:100%; min-width: 1024px; height: auto; overflow-x:hidden; position:absolute; top:80px; left:0px; background-color: white; background-image:url('../img/background/whitenew.jpg'); background-repeat: repeat-y; background-size: auto; background-position: top center; padding-bottom:20px; padding-top:0px; border-bottom: 3px solid red; z-index:-100} /*---- con overflow-x:hidden nascondo tutto il contenuto che eccede in orizzontale la dimensione minima della finestra di visualizzazione del sito evitando di avere le barre di scorrimento quando un div è più largo della larghezza minima impostata della finestra del browser o dello schermo ----*/ #container-date {width:100%; min-width: 1024px; height: auto; overflow-x:hidden; position:absolute; top:80px; left:0px; background-image:url('../img/background/whitenew.jpg'); background-repeat: repeat-y; background-size: auto; background-position: top center; padding-bottom:20px; padding-top:0px; z-index:-100; border-bottom: 3px solid red; z-index:-100} /*---- in uso solo per il periodo estivo ----*/ #container-date-estivo {width:100%; min-width: 1024px; height: auto; overflow-x:hidden; position:absolute; top:80px; left:0px; background-color: #FF4AEC; z-index:-100; border-bottom: 3px solid red; z-index:-100} /*---- in uso solo per il periodo estivo ----*/ #container-index {width:100%; min-width: 1280px; height: auto; overflow-x:hidden; position:absolute; top:80px; left:0px; background-color: white; background-image:url('../img/background/whitenew.jpg'); background-repeat: no-repeat; background-size: auto; background-position: top center; padding-bottom:20px; padding-top:0px; border-bottom: 3px solid red; z-index:-100} /*---------------------------- F O O T E R (uno per ogni tipo di posizione in altezza richiesta----------------------------*/ #footer, #footer-date, #footer-contatti, #footer-disco, #footer-gruppo, #footer-radio, #footer-fv, #footer-fans,#footer-video,#footer-informativa {width:980px; height:220px; position:absolute; left:50%; margin-left:-490px} #footer {top:2450px} #footer-date {top:1500px} #footer-contatti {top:1090px} #footer-disco {top:4280px} #footer-gruppo {top:3470px} #footer-radio {top:760px} #footer-fv {top:2650px} #footer-fans {top:1090px} #footer-video {top:3800px} #footer-informativa {top:2420px} .logo-piccolo {background: url('../img/logo_bis.png'); width:300px; height:70px; position:absolute; top:0px; left:0px} .logo-piccolo2 {background: url('../img/logo4.png'); width:260px; height:141px; position:absolute; top:22px; left:150px} .dati_chiusura {width:300px; height:130px; position:absolute; top:55px;right:150px} .dati_chiusura p{text-align:right; font-size:13px; letter-spacing:1px; text-transform:none; font-weight: 600; line-height: 13px} #facebook {background: url('../img/facebookico2.png'); width:35px; height:35px; position:absolute; top:22px; right:0px} #facebook {background-position:top} #facebook:hover {background-position:bottom} #facebookfooter {background: url('../img/facebookico2.png'); width:35px; height:35px; position:absolute; top:10px; right:350px} #facebookfooter {background-position:top} #facebookfooter:hover {background-position:bottom} #amazonfooter {background: url('../img/amazonmusicico.png'); width:35px; height:35px; position:absolute; top:10px; right:250px} #amazonfooter {background-position:top} #amazonfooter:hover {background-position:bottom} #applefooter {background: url('../img/applemusicico.png'); width:35px; height:35px; position:absolute; top:10px; right:300px} #applefooter {background-position:top} #applefooter:hover {background-position:bottom} #spotifyfooter {background: url('../img/spotifyico.png'); width:35px; height:35px; position:absolute; top:10px; right:150px} #spotifyfooter {background-position:top} #spotifyfooter:hover {background-position:bottom} #youtubefooter {background: url('../img/youtubeico.png'); width:35px; height:35px; position:absolute; top:10px; right:200px} #youtubefooter {background-position:top} #youtubefooter:hover {background-position:bottom} #fb-icon {background: url('../img/facebookico.png'); width:60px; height:60px; position:absolute; top:930px; left:50%; margin-left:310px} #fb-icon {background-position:top} #fb-icon:hover {background-position:bottom} /*---------------------------- HOME ----------------------------*/ #slideshow{overflow: hidden; width:998px; height:578px; position:relative; left:0px; top:0px; border: 1px solid red} #slideshow img {display:block; width:998px; height:578px; position:relative; left:0px; top:0px} #barranera1, #barranera2 {background-color:white; width:100%; height:40px; position:absolute; left:0px;z-index: 250} #barranera1 {top:-10px; border-radius: 12px 12px 0px 0px} #barranera2 {top:525px; border-radius: 0px 0px 12px 12px} #logo_grande {width:998px; height: 108px; position:relative; left:0px; top:0px; background-image:url('../img/home/barra_logo4.png'); background-repeat:none; z-index: 100} .i_news{width:150px; height: 150px; position:absolute; left:0px; top:20px; background-color: none; border-top: 3px solid red} .t_news{width:480px; height:160px; position:absolute; left:170px; top:10px; background-color: none; text-align: justify} .t_news p{font-size: 16px} .v_news{width:645px; height: 158px; position:absolute; left:0px; top:15px; background-color: black; background-image:url(/img/date/annuncioodeon.jpg); background-repeat: no-repeat; background-position: center} #statistiche {padding-top: 20px; width:980px; height:30px; text-align: right; position:relative; top:0px; left:50%; margin-left:-490px} #banner_facebook{width: 280px; height: 630px; position:absolute; top:875px; left:50%; margin-left:221px; background-image: url(../img/home/banner_facebook2.png); display: block} #numeromipiace{width: 200px; height: 30px; position:absolute; top:586px; left:43px; display: block; background-color: none} #numeromipiace p {text-align: center; font-size:15px; color:white; font-family:'Open Sans', sans-serif; font-weight: 600; text-transform:none; line-height: 0px} #banner_foto{width: 280px; height: 630px; position:absolute; top:1575px; left:50%; margin-left:221px; background-image: url(../img/home/banner_foto.png); display: block} /*---------------------------- DATE ----------------------------*/ /*-------il colore di sfondo era #fde9bf---------*/ #tablet {width:815px; height: 1005px; position:absolute; left:50%; margin-left:-407px; top:20px; background-image:url('../img/date/cornicenatale.png'); background-repeat:none; z-index:2} #fisa {width:1489px; height: 1057px; position:absolute; left:50%; margin-left:-744px; top:0px; background-image:url('../img/date/fisa.png'); background-repeat:none; z-index:1} #pubbl {width:998px; height:578px; position:absolute; left:50%; margin-left:-500px; top:1050px; background-image:url('../img/slideshow/home/2017.jpg'); background-repeat:none; z-index:2} #annuncio {width:640px; height:860px; position:relative; left:50%; margin-left:-320px; top:0px; background-image:url('../img/date/Romagnamia70.jpg'); background-repeat:none; z-index:2; display:block} #annuncio_campet {width:507px; height:720px; position:relative; left:50%; margin-left:-254px; top:0px; background-image:url('../img/campet2.jpg'); background-repeat:none; z-index:2; display:block} #capodanno {width:998px; height: 578px; position:absolute; left:50%; margin-left:-499px; top:1050px; background-image:url('../img/slideshow/home/2018.png'); background-repeat:none; z-index:2} #date {width:560px; height: 760px; position:absolute; left:50%; margin-left:-303px; top:112px; background-image: url(../img/date/back2.jpg); z-index:1; padding-top: 25px; padding-left: 25px; padding-right: 25px; padding-bottom: 25px} #date_estivo {width:560px; height: 900px; position:absolute; left:50%; margin-left:-303px; top:40px; background:none; z-index:1; padding-top: 25px; padding-left: 25px; padding-right: 25px; padding-bottom: 25px} #sfondo_estivo {width:1387px; height: 1375px; position:absolute; left:50%; margin-left:-694px; top:0px; background-image:url('../img/date/estivo3.png'); background-repeat:none; z-index:-2} .areadate_estivo{width:980px; height: 1375px; position:relative; top:0px; left:50%; margin-left:-490px; background:none} #date p {color: black; line-height: 18px} #date table {line-height: 17px; border: none} #date td {border-bottom: 1px solid #ddd; vertical-align: middle; text-align: left; padding: 0px} #date tr:hover {background-color: white} #stampadate {width:400px; height: 60px; position:absolute; left:320px; top:750px; z-index: 2} #stampadate i {color: #650239; line-height: 20px} .sub_content {position:absolute; width:1000px; height:100%; left:50%; margin-left:-500px; top:0px} #stampa-link {width:80px; height: 80px; position:absolute; left:710px; top:740px; background-image: url(../img/date/stampa2.png); z-index:2} #smile {width:256px; height: 256px; position:absolute; left:365px; top:590px; background-image: url(../img/date/smile.png); z-index:2} #meteo {width:980px; height: 560px; position:relative; bottom:30px; text-align: center} #bannerdate{width:1015px; height: 520px; position:absolute; top:1150px; left:50%; margin-left:-507px; background-image: url(../img/date/gara2024.jpg); display: block} #pausa {width:611px; height:812px; position:absolute; left:50%; margin-left:-304px; top:110px; background-image:url('../img/pausa.jpg'); background-repeat:none; z-index:5} /*---------------------------- CONTATTI ----------------------------*/ #fasciadavid {width:980px; height: 120px; position:absolute; left:0px; top:50px; background-image: url(../img/contatti/david.png); background-repeat:no-repeat} #contattidavid {width:980px; height: 250px; position:absolute; left:0px; top:190px; background-color: none} #fasciavocal {width:980px; height: 120px; position:absolute; left:0px; top:460px; background-image: url(../img/contatti/vocal.png); background-repeat:no-repeat} #contattivocal {width:980px; height: 350px; position:absolute; left:0px; top:600px; background-color: none} #contattivocal p, #contattidavid p {font-size:16px; color: black; font-weight:400; text-align: left; line-height: 20px} /*---------------------------- DISCOGRAFIA ----------------------------*/ .areaalbum {width:980px; height: 360px; position:relative; margin-top: 0px; margin-bottom: 0px; padding-top: 20px; left:0px; top:0px; background-color:none} .areaalbum2 {width:980px; height: 440px; position:relative; margin-top: 0px; margin-bottom: 0px; padding-top: 20px; left:0px; top:0px; background-color:none} #discografia {width:980px; height: 60px; position:relative} #discografia p {font-size:40px; color: black; font-weight:400; text-align: center} #anteprima-cd {width:980px; height: 420px; position:relative; background-image: url(../img/discografia/anteprima2.png); background-position: center top} #musicico {width:980px; height: 200px; position:relative} #musicico p {font-size:25px; color: black; font-weight:400; text-align: center} #appleico {background: url('../img/discografia/appleico.png'); width:77px; height:98px; position:absolute; bottom:35px; right:600px} #appleico {background-position:top} #appleico:hover {background-position:bottom} #amazonico {background: url('../img/discografia/amazonico.png'); width:77px; height:98px; position:absolute; bottom:35px; right:452px} #amazonico {background-position:top} #amazonico:hover {background-position:bottom} #spotifyico {background: url('../img/discografia/spotifyico.png'); width:77px; height:98px; position:absolute; bottom:35px; right:304px} #spotifyico {background-position:top} #spotifyico:hover {background-position:bottom} .elencobrani {width:780px; height: auto; position:absolute; left:190px; top:10px; background-color:none} .elencobrani p {font-size:15px; color: black; font-weight:400; text-align: left; line-height: 20px} .elencobrani b {font-size:18px; color: black; font-weight:600; text-align: left; line-height: 20px} /*---------------------------- GRUPPO ----------------------------*/ #fotogruppo {width:1000px; height: 720px; position:relative; left:-10px; top:20px; margin-bottom: 40px; background-image:url('../img/gruppo/gruppo2.png'); background-repeat:none} #fotopalco {width:998px; height: 520px; position:relative; left:-10px; top:0px; margin-bottom: 20px; background-image:url('../img/gruppo/palco1.jpg'); background-repeat:none} .musicisti1, .musicisti2, .musicisti3, .musicisti4, .musicisti5 {width:980px; position:relative; margin-top: 20px; margin-bottom: 20px; left:0px; top:0px; background-color:none} .musicisti1 {height: 267px} .musicisti2 {height: 267px} .musicisti3 {height: 717px} .musicisti4 {height: 267px} .musicisti5 {height: 267px} .imgmusicisti {width:400px; height: 267px; position:absolute; left:0px; top:0px; background-color: none} .curriculum {width:560px; height: 267px; position:absolute; left:420px; top:-15px; background-color: none} .curriculum p {font-size:16px; color: black; font-weight:400; text-align: left; line-height: 20px} #nome1, #nome2, #nome3, #nome4, #nome5 {width:130px; height: 50px; position:absolute; top:670px; background-color: none} #nome1 {left:100px} #nome2 {left:270px} #nome3 {left:440px} #nome4 {left:600px} #nome5 {left:780px} #nome1 p, #nome2 p, #nome3 p, #nome4 p, #nome5 p {text-align: center; font-size: 16px; font-weight: 600} .pentagramma {width:450px; height: 360px; position:absolute; left:-30px; top:320px; background-image: url(/img/music.png)} /*---------------------------- RADIO STUDIO + ----------------------------*/ #studiopiu {width:350px; height: 260px; position:relative; left:50%; margin-left:-175px; top:40px; background-image: url(/img/radio/studiopiu.png)} #caricamento {width:800px; height: 200px; position:relative; margin-top:100px; left:50%; margin-left:-400px; top:20px; text-align: center} #caricamento p {text-align: center} /*---------------------------- FOTO & VIDEO ----------------------------*/ #slideshow2 {margin-top: 20px; overflow: hidden; width:980px; height:560px; position:relative; left:0px; top:0px; border: 1px solid #66cccc} #slideshow2 img {display:block; width:980px; height:560px; position:relative; left:0px; top:0px} #videolink {width:980px; height:150px; position:relative; left:0px; top:0px} #videolink-img {width:762px; height:150px; position:absolute; left:100px; top:0px; display:block; background-image:url(../img/video/videoico2.png); background-repeat: no-repeat; background-position: top} #videotitolo, #fototitolo {width:980px; height:50px; position:relative; left:0px; top:0px; margin-bottom:20px} #videotitolo p, #fototitolo p {text-align: center; font-size: 40px} /*---------------------------- VIDEO ----------------------------*/ .fascia-video {width:980px; height:auto; min-height: 180px; position:relative; margin-top: 8px} .videoprincipale {width:940px; height:529px; position:relative; left:20px; border: 0px solid #66cccc; padding-bottom: 30px} .video-mini {background-color:white; width:220px; height:180px; position:relative; float: left; margin-left: 20px; z-index: 200} .video-mini:hover {background-color:white; background-color:rgba(255,0,0,0.5)} .video-mini p {width:210px; height:auto; font-size:15px; position:relative; left:5px; text-align: justify} .video-mini-img {width:210px; height:118px; position:relative; top:10px; left:5px; overflow: hidden} /*questo serve per adattare la dimensione delle anteprime di youtube senza distorcerle*/ .video-mini-img img {width:100%} .nota {width:980px; height:50px; position:relative; margin-top: 20px; margin-bottom: 20px; padding-top: 3px; background-color:#D5D5D5; border-radius: 15px;} /*---------------------------- FANS CLUB ----------------------------*/ #imgfans {width:400px; height: 400px; position:absolute; right:20px; top:80px; background-image: url(/img/fans/fansclub.png)} #tesfans {width:500px; height: 620px; position:absolute; left:20px; top:80px} #tesfans p {text-align:justify; font-size: 15px; font-weight: 300; line-height: 20px} #tesfans2 {width:940px; height: 150px; position:absolute; left:20px; top:720px} #tesfans2 p {text-align:justify; font-size: 15px; font-weight: 300; line-height: 20px}