/** * Skin advanced
   * @author Blancks
*/

/** * Parametri di default nella pagina
*/

/* <uniquifier>: Use a unique and descriptive class name
 <weight>: Use a value from 100 to 900 */

.raleway-<uniquifier> {
  font-family: "Raleway", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}
@font-face {
    font-family: 'Bavro';
    src: url('../../css/font/bavro-webfont.woff2') format('woff2'),
         url('../../css/font/bavro-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'Raleway';
    src: url('../../css/font/Raleway.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

/* Font ABEL */
@font-face {
    font-family: 'Abel';
    src: url('../../css/font/Abel-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* Font SOURCE CODE PRO (Regular) */
@font-face {
    font-family: 'Source Code Pro';
    src: url('../../css/font/SourceCodePro-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* Font SOURCE CODE PRO (Bold) */
@font-face {
    font-family: 'Source Code Pro';
    src: url('../../css/font/SourceCodePro-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

/* ==========================================================================
   Font EXO 2 (Varianti Normali - Gestite tramite Variable Font)
   ========================================================================== */
@font-face {
    font-family: 'Exo 2';
    src: url('../../css/font/Exo2-VariableFont_wght.ttf') format('truetype-variations'),
         url('../../css/font/Exo2-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900; /* Copre tutti i pesi da Thin (100) a Black (900) */
    font-style: normal;
}

/* ==========================================================================
   Font EXO 2 (Varianti Corsive/Italic - Gestite tramite Variable Font)
   ========================================================================== */
@font-face {
    font-family: 'Exo 2';
    src: url('../../css/font/Exo2-Italic-VariableFont_wght.ttf') format('truetype-variations'),
         url('../../css/font/Exo2-Italic-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900; /* Copre tutti i pesi corsivi da Thin Italic a Black Italic */
    font-style: italic;
}

html,
body {
    width: 100%;
    height: 100%;
}
body {
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
height: 100%;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
color: #696969;
font-family: "Raleway", sans-serif;
font-size: 12.5px;
background:   url("/themes/advanced/imgs/textureCS.jpg") top left repeat;
}

::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #010101;
cursor:s-resize;
}

::-webkit-scrollbar {
width: 4px;
background-color: #010101;
cursor:s-resize;
}

::-webkit-scrollbar-thumb {
cursor:s-resize;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #242424;
}

div, ul, li {
margin: 0px; 
padding: 0px;
}

.blank {
clear: both;
}

a, a:visited{
   color:#b0b0b0;
   text-decoration:none;
}

a:hover {
   color:#fa3e96; 
   font-weight:bolder; 
   text-decoration:none; 
   opacity: 0.9;
}

div.form_field table {
   margin: 9px auto;
}

input, textarea, select {
   width: 80%;
   margin-bottom: 10px;
}

input[type='submit'] {
   width: auto;
   margin: 5px 0 15px 0;
}

textarea{
   height:100px;
}

div.form_label{
   font-size:13px;
   font-weight:bolder;
   margin-top:5px;
}

div.form_info{
   font-size:12px;
   margin-bottom:15px;
}

select.day, select.month, select.year{
   width:60px;
   display:inline-block;
}
/** * Messages center
*/
div.elenco_record_gioco{
   padding:20px;
}
/** * Stile dei messaggi d'avviso dell'engine */ 
div.warning, div.error{
   background-color: #07080a;
   font-family: "Raleway", sans-serif;
   font-size:12px;
   text-align:center;
   margin:15px;
   font-weight: bolder;
   padding:10px;
   color: #415f84;
}

div.link_back{
   text-align:center;
   padding:2px;
}



/** * Logout */
div.logout_box{
   margin:20px auto;
   padding:10px;
   text-align:center;
   background-color:#D9D9D9;

}

div.logout_box a{
   text-decoration:underline;
   font-style:italic;
}

div.pagina_quest_info{
   margin:5px auto;
   padding:10px;
   width:180px;
   background-color:#b9b9b9;
   border:solid 1px #444;
   -moz-border-radius:5px;    /* Bordi arrotondati */
   -webkit-border-radius:5px;
   -khtml-border-radius: 5px;
   border-radius:5px;
}

/** * Titoli delle sezioni
*/
div.innertube h2, div.output h2, div.page_title h2{
    font-size:15px;
    background:#09090c;
    font-family:Bavro;
    padding-top: 7px;
    padding-bottom: 15px;
    color:#415f84;
    font-weight: bold;
    text-transform:uppercase;
    margin-top:0;
    opacity:1;
    border-bottom: 0px dotted #141414;
    letter-spacing:3.5px;
    text-align:center; 
    margin-bottom:2px}
    
/* latin */
@font-face {
  font-family: 'Poiret One';
  font-style: normal;
  font-weight: 400;
  src: local('Poiret One'), local('PoiretOne-Regular'), url(https://fonts.gstatic.com/s/poiretone/v5/UqyVK80NJXN4zfRgbdfbo55cVw.woff2) format('woff2');
}

/** * Stile dei contenitori grigi con i bordini arrotondati
*/
div.pagina_info_location, div.msgs, div.menu, div.presenti, div.output{
   margin:5px auto;
   padding:10px;
   width:240px;   
}

div.output{
   position:absolute;
   top:0;
   bottom:0;
   right:10px;
   left:10px;
   width:auto;
   overflow:auto;
   text-align:justify;
   background:url("/themes/advanced/imgs/textureCS.jpg") repeat  }
.output.mappaclick { overflow: hidden;}

.output .map_container {
    height: 575px;
    width: 800px;
    position: relative;
    margin: 0 auto;
}
.output .map_container > img {
    width: 100%;
    height: auto;
}
@media screen and (max-width: 1365px) {
    .output .map_container {
        width: 735px;
    }
}

#Map {
    width: 100%;
    height: 500px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
#Map .map-left_section,
#Map .map-right_section {
    width: 190px;
    height: 480px;
    display: flex;
    flex-direction: column;
    z-index: 0;
}
#Map .map-left_section a,
#Map .map-right_section a {
    text-align: justify;
    color: #d1cfcf;
    font-size: 12px;
    text-transform: uppercase;
    font-family: raleway;
    letter-spacing: 1.5px;
    text-shadow: 3px 1px 3px #c53ec7;
    background-color: ;
    padding: 3px;
    position: relative;
    margin-bottom: 10px;
}
#Map .map-left_section {}
#Map .map-right_section {
    justify-content: flex-end;
}

@media screen and (max-width: 800px) {
    #Map .map-right_section {}
}



/** * Informazioni con anteprima luogo
*/
div.info_image{
   text-align:center;
   background:none;
}

div.info_image img {
  border-radius: 50%;
  width: 138px;
  height: 138px;
  margin-left: 0.5px;
  margin-top: 115.5px;
  
}

div.box_stato_luogo{
   padding-top:2px;
   margin-bottom:15px;
    background:none;}

div.meteo, div.meteo_date{
   font-family: "Exo 2", sans-serif !important;
   font-size:10px;
    color:#3f3f3f;
    text-align:center;
   background:transparent;
   margin:25px auto;
   line-height:14px;
   padding-top:-1px;
   letter-spacing:2px;
    width: 150px;
    height:auto;
    padding-bottom:5px;
    margin-top:38px}



div.luna{

    position: right;
    margin-top:-65px;
    margin-left:55px;
    height: 100px; 
    width: 50px;
   color:#3f3f3f;
   -moz-border-radius:5px;    /* Bordi arrotondati */
   -webkit-border-radius:5px;
   -khtml-border-radius: 5px;
   border-radius:5px;
}

div.pagina_news_info{

    font-size:12px;
    padding:10px;
    overflow:auto;
    width:180px;
    margin:5px auto;
}

/** * Frame Messaggi 
*/
iframe.iframe_messaggi{
    height: 30px;
    width: 30px;
    margin: 0px;
    background-color: transparent;

}

div.pagina_messaggi{
   text-align:center;
   font-size:14px;
}

div.pagina_messaggi a, div.pagina_messaggi a:visited{
   text-decoration:none;
   color:#76724d;
}

div.messaggio_forum_nuovo a, div.messaggio_forum_nuovo a:visited{
   font-weight:bolder;
   font-style:italic;
   color:#111;
}
div.msgs {
background-image: none;
width:150px;
border: none;


}
/** * TOP MENU
*/
div.link_menu .TOPMENU
{
padding:0 0 0 20px;
background-color:#FFFFFF;
font-size:18px;
display: inline-block;
}

div.link_menu .TOPMENU a{
padding:2px;
text-align:left;

}

div.link_menu .TOPMENU a:hover{
background-color:#cfcfcf;
text-decoration:none;
-moz-border-radius:5px; /* Bordi arrotondati */
-webkit-border-radius:5px;
-khtml-border-radius: 5px;
border-radius:5px;
}

div.link_menu .TOPMENU a.sprite {
display: block;
width: 50px;
height: 50px;
background: no-repeat top left;
}

div.link_menu .TOPMENU a.sprite:hover {
background-position: 0 100%;
}

/** * Mappa cliccabile */

/** * Posizionamento mappa cliccabile 
*/
div.mappaclick_map{
   margin:20px auto;
}


/** * Link testuali sulla mappa */
div.mappaclick_map a{
   font-size:13px;
   font-weight:bolder;
}

/** * stile della tooltip di descrizione sulla mappa 
*/
div#descriptionLoc{
   position:absolute;
   width:200px;
   background-color:none;
   padding:20px;
   font-size:12px;
   font-family:Verdana,Sans;
   text-align:right;
   
   -moz-border-radius:5px;    /* Bordi arrotondati */
   -webkit-border-radius:5px;
   -khtml-border-radius: 5px;
   border-radius:5px;
   
   display:none;/*NON TOCCARE* Di configurazione: nasconde la tip in partenza */
   z-index:9999;/*NON TOCCARE* Di configurazione: mostra la tooltip sopra gli altri link */
}


/** * Stili relativi all'elenco delle mappe in basso
*/
div.mappaclick_more{
   padding-top:10px;
}

div.mappaclick_more a{
   background-color:#cfcfcf;
   padding:8px;
   margin-right:10px;
   -moz-border-radius:5px;    /* Bordi arrotondati */
   -webkit-border-radius:5px;
   -khtml-border-radius: 5px;
   border-radius:5px;
}




div.elenco_record_gioco table{
   width:100%;
   background-color:#d1d1d1;
   -moz-border-radius:5px;    /* Bordi arrotondati */
   -webkit-border-radius:5px;
   -khtml-border-radius: 5px;
   border-radius:5px;
}

div.elementi_elenco{
   padding-top:5px;
   text-align:center;
}

div.titoli_elenco{
   font-size:13px;
   font-weight:bolder;
}

img.colonna_elengo_messaggi_icon{
   width:30px;
   height:30px;
}

div.controlli_elenco{
   width:60px;
}

div.controllo_elenco{
   width:20px;
   float:left;
}

div.controllo_elenco input[type='image']{
   width:15px;
}


/** * Ambientazione/Regolamento */
div.user_ambientazione div.elementi_elenco, div.servizi_abilita div.elementi_elenco{
   text-align:left;
   padding:5px;
}

div.user_ambientazione td.casella_titolo div.elementi_elenco, div.servizi_abilita td.casella_titolo div.elementi_elenco{
   font-size:14px;
   font-weight:bolder;
   padding:2px 0 2px 10px;
}




/** * Generico per elenchi, bacheche, regolamento, ambientazione etc */
div.capitolo_elenco{
   font-weight:bolder;
   font-size:13px;
   text-align:center;
}

.controllo_elenco input {
    margin-top: 10px;
    background: none;
    color: #5c5c5c;
    border: 0px solid #434343;
    text-transform: uppercase;
    letter-spacing: 1px;
}

div.elementi_elenco{
   min-height:20px;
}

td.casella_elemento {
   font-size:12px;
   background-color:#d9d9d9;
}

div.elementi_elenco {
    background-color: #09090c; 
    border-bottom:0.5px dotted #212121;
    font-family: "Raleway", sans-serif;
    font-size: 12px;
    letter-spacing: 1px;
    color: #636363;
    padding:5px;
    padding-top:10px;
}

.posta img {
width: 20px;
margin-top: -3px;
}

div.controllo_elenco input[type='image']{
   height:15px;
   width:15px;
   display:block;
   /* margin: 2px 5px; */
}


div.elementi_elenco a, 
div.elementi_elenco a:visited,
div.elementi_elenco a:active {
    color: #8aa7ec !important; /* L'azzurro neon del tuo tema */
    text-decoration: none;
    transition: all 0.2s ease-in-out;
}


div.elementi_elenco a:hover {
    color: #5ffbf1 !important; /* Cambia in turchese neon al passaggio del mouse */
    text-shadow: 0 0 8px rgba(95, 251, 241, 0.6);
}



/** * Stile tabelle nei moduli di gestione */
div.elenco_record_gestione table{
   width:95%;
   margin:10px auto;
}


/** * Accorgimenti Layout */

/** * Allineamento verticale delle colonne 
*/
#framecontentLeft, #framecontentRight #framecontenttop{ display:table; }

/** * margine delle colonne */
div.innertube{
   margin:0;
   display:table-cell;
   vertical-align:middle;
}

#utility_buttons_container{
   width: 80%;
   height: 30px;
   margin-top:25px;
    margin-right:auto;
    margin-left:15px;
   text-align: center;
   background-color: none;
}

.utility_buttons{
   display: inline-block;
   width: 20%;
   margin: auto;
}

/*Avatar colonna sinistra*/
#avatar_background > div.avatar_menu2{
    width: 97.5px;
    height: auto;
    margin-left:72px; 
    margin-right:auto;
    margin-top:-67px;
    margin-bottom:0px;
    border-radius:100%;
    /*border: double 4px #474747;}*/
   }

/*crocetta cancella messaggio*/
a#delmsg {
  display: block;
  float: left;
  position: relative;
  top: 10px;
  padding: 5px;
  z-index: 2;}
    
/*Crea Chat form*/
#createchat_cont{
   text-align: center;
    font-size: 12px;
    font-family: Poiret One;
    color: #76724d;
    font-weight: bolder;
    text-transform: uppercase;
    letter-spacing: 3px;
}

#createchat{
   width:130px;
    background-color:black;
    color:#76724d;
}

h2#h2-presenti {
text-align: center;
padding-top: 10px;
font-family:"Raleway";
}

h3#h3-presenti {
    font-size: 10px;
    font-family:"Raleway";
    padding-bottom: 4px;
    color: #415f84;
    text-transform: uppercase;
    margin-top: -10px;
    letter-spacing: 1px;
    text-align: center;
    }
    
/* STILE MAPPA */

#upper{
    margin-top: 20px !important;
    margin-left:15px;
    width:160px;
    line-height:12px;
    border:1px dotted #7c6099;
    box-shadow: 5px 10px 8px #1a1a1a;}
    
    
#downtown {
    margin-top: 20px !important;
    margin-left:201px;
    width:150px;
    line-height:12px;
    border:1px dotted #7c6099;
    box-shadow: 5px 10px 8px #1a1a1a;}

#coral {
    margin-top: 20px !important;
    margin-left:377px;
    width:150px;
    line-height:12px;
    border:1px dotted #7c6099;
    box-shadow: 5px 10px 8px #1a1a1a;}

#miamibeach {
   margin-top: 20px !important;
    margin-left:553px;
    width:150px;
    line-height:12px;
    border:1px dotted #7c6099;
    box-shadow: 5px 10px 8px #1a1a1a;}


#littlehavana {
    margin-top:173px;
    margin-left:15px;
    width:160px;
    line-height:12px;
    border:1px dotted #7c6099;
    box-shadow: 5px 10px 8px #1a1a1a;}
    
#aurelia {
    margin-top:173px;
    margin-left:201px;
    width:150px;
    line-height:12px;
    border:1px dotted #7c6099;
    box-shadow: 5px 10px 8px #1a1a1a;
}
   
#allapattah {
   margin-top:173px;
    margin-left:377px;
    width:150px;
    line-height:12px;
    border:1px dotted #7c6099;
    box-shadow: 5px 10px 8px #1a1a1a;
}
@media screen and (max-width: 1365px) {
    #allapattah {
        width: 133px;
    }
}


#altrove {
    margin-top:246px;
    margin-left:377px;
   width:150px;
   line-height:12px;
   border:1px dotted #7c6099;
    box-shadow: 5px 10px 8px #1a1a1a;
}

@media screen and (max-width: 1365px) {
    #altrove {
        width: 133px;
    }
}

@media screen and (max-height: 600px) {
    #upper,
    #coral,
    #miamibeach,
    #downtown {
        margin-top: -55px;
    }
    #aurelia,
    #littlehavana,
    #everglades {
        margin-top:127px;
    }
    #aurelia,
    #littlehavana {
        height: 133px;
        overflow-y: auto;
    }
    #altrove {
        margin-top: 200px;
        height: 75px;
        overflow-y: auto;
    }
}
#apDiv1 {
   position:absolute;
   width:455px;
   height:89px;
   z-index:1;
   left: 307px;
   top: 447px;
}

.mappa_style {
   font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
   font-size: 10px;
   font-style: normal;
   font-weight: normal;
   visibility:hidden;
   color: #444;
   background-color: #000000;
   background-image: url(/themes/advanced/imgs/textureCS.jpg);
   padding: 10px;
   width: 150px;
   position: absolute;
   top: 170px;
   border:0px;
    z-index: 1;
 }

.mappa_style a {
   font-weight: normal;
   text-decoration:none;
   color: #4b4b4b;
}

.mappa_style a:hover {
   color: #999;
   text-decoration: none;
}

#close {
   text-align: right;
   border: 1px none #494949;
}

.style1 {
   color: #494949;
   font-size: smaller;
}

.style4 {
  color: #999; font-weight: bold; 
  }
  
 div.closing {
 float: right; 
 color: #2c474d; 
 font-weight: bolder;
}

p.titolo-mappa {
font-weight: 700;
}

/* ==========================================================================
   Stile personalizzato per il tag Z con Exo 2 e Testo Sfumato
   ========================================================================== */

z {
  font-family: "Raleway", sans-serif;
  font-size:11.5px;
  color:#6a6a6a; 
  letter-spacing:0px; 
  text-transform:lowercase; }

z:hover {
  font-family: "Raleway", sans-serif;
  font-size:10.5px;
  color:#a3a3a3; 
  letter-spacing:0px; }

/* ==========================================================================
   Stile Base dei Titoletti (Font 12px)
   ========================================================================== */
#Map .map-left_section a,
#Map .map-right_section a {
    font-family: "Exo 2", sans-serif !important;
    font-weight: 500;
    font-size: 12px;  
    text-transform: uppercase;
    letter-spacing: 1.5px;
    text-shadow: none !important; 
    display: inline-block; 
    background-image: linear-gradient(to right bottom, #d16ba5, #be83cb, #a29ce4, #87b1f0, #79c3f0, #5acff5, #38dbf2, #25e5e7, #00efd6, #00f6b6, #00fb88, #5bfd4b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;

    /* REGOLA FONDAMENTALE: Prepara l'elemento a ingrandirsi e sfumare fluidamente */
    transition: transform 0.3s ease, filter 0.3s ease, opacity 0.3s ease;
    transform-origin: left center; /* Fa in modo che i titoli a sinistra si ingrandiscano verso destra senza scattare */
}

/* Modifica specifica per la sezione destra (opzionale, per farli ingrandire verso sinistra) */
#Map .map-right_section a {
    transform-origin: right center;
}

/* ==========================================================================
   Effetto Hover (Ingrandimento + Ombra Neon)
   ========================================================================== */
#Map .map-left_section a:hover,
#Map .map-right_section a:hover {
    text-decoration: none;
    opacity: 1; /* Manteniamo la massima brillantezza dei colori quando ingrandito */
    
    /* EFFETTO INGRANDIMENTO (Aumenta del 5% la dimensione) */
    transform: scale(1.05);

    /* Ombreggiatura sfumata unicamente lilla (#c8a2c8) */
    filter: drop-shadow(0px 0px 2px rgba(200, 162, 200, 0.6)) 
            drop-shadow(0px 0px 5px rgba(200, 162, 200, 0.3));
}