html {
font-family: Arial, Helvetica, sans-serif;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}

body {margin: 4px; line-height: 1.6em;}
.spazio {width: 100%; max-width: 970px; margin: 5px auto; text-align: center; box-sizing: border-box; /** border: 1px solid #000; **/}
.spazio::after {content: ""; clear: both; display: table;}
.clearfix::after {content: ""; clear: both; display: table;}
h1, h2 {width: 100%; padding: 0px; margin: 0px; font-size: 19px; font-weight: bold; font-variant: small-caps;}
.row {margin: 2px auto;}
a {text-decoration: none;}
form {margin-bottom: 0px;}
.linea {border-bottom: 1px solid #666666;}

.lista-link {width: 100%; margin: 30px 0 10px 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 6px; box-sizing: border-box;}
.lista-link a {width: 100%; margin: 0; display: block; box-sizing: border-box;}

.contenitore {width: 100%; max-width: 970px; margin: 0px auto; text-align: center; box-sizing: border-box; position: relative;}

fieldset {
margin: 0px;
border: 1px solid #000000;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}

.sommario {
display: block; 
padding: 6px;
color: #000;
border-radius: 3px;
font-size: 120%;
font-family: Verdana, Arial;
border: 1px solid #d6cfab;
text-align: center;
overflow: hidden;
background: #ffd754;
background: -moz-linear-gradient(top, #ffd754 0%, #fff8df 47%, #fff8df 47%, #fff8df 59%, #ffd754 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffd754), color-stop(47%, #fff8df), color-stop(47%, #fff8df), color-stop(59%, #fff8df), color-stop(100%, #ffd754));
background: -webkit-linear-gradient(top, #ffd754 0%, #fff8df 47%, #fff8df 47%, #fff8df 59%, #ffd754 100%);
background: -o-linear-gradient(top, #ffd754 0%, #fff8df 47%, #fff8df 47%, #fff8df 59%, #ffd754 100%);
background: -ms-linear-gradient(top, #ffd754 0%, #fff8df 47%, #fff8df 47%, #fff8df 59%, #ffd754 100%);
background: linear-gradient(to bottom, #ffd754 0%, #fff8df 47%, #fff8df 47%, #fff8df 59%, #ffd754 100%);
}

.sommario a {
color: #000;
font-weight: 600;
text-shadow: 1px 1px 1px #fff6af;
text-decoration: none;
display: block;
}

#sezionemenu {overflow: hidden; width: 100%;}

#sezioni {font-family: Verdana, Arial; color: #000; font-size: 14px;}

#sezioni div {width: 12.46%; float: left; border-top: 1px solid #fff;}

#sezioni a {
padding-bottom: 10px;
font-weight: 500;
text-shadow: 0.5px 0.5px 0.5px #B0AAAA;
color: #000;
float: left;
padding-top: 6px;
line-height: 1.2em;
background-color: #fff8df;
border-top: 1px solid #bbb073;
border-bottom: 1px solid #bbb073;
border-left: 1px solid #bbb073;
border-right: 1px solid #bbb073;
text-align: center;
display: block;
width: 100%;
}

#sezioni a:hover {
text-shadow: 1px 1px 1px #B0AAAA;
color: #000;
background-color: #e5e1cb;
}

#sezioni a.calc {padding-top: 10px; vertical-align: middle;}

/** INIZIO INPUT CON SIMBOLO **/
.input-group {position: relative;}
.input-group {display: table; border-collapse: separate; width: 100%; margin-bottom: 1rem;}
.input-group>* {display: table-cell; margin-bottom: 0;}
.input-group-addon {vertical-align: middle;}
.input-group-addon {width: 2%; white-space: nowrap;}
.input-group-addon>* {margin-bottom: 0!important;}
.supplement {padding: 0 1rem; line-height: 1.4; background: #dadada; border: 1px solid #C0C0C0;}
.input-group input,optgroup,select,textarea {width: 90%; color: inherit; font: inherit; margin: 0;}
.input-group input[type=text], select, textarea {
width: 90%;
padding: 8px 20px;
text-align: right;
border: 1px solid #ccc;
border-radius: 0px 6px 6px 0px;
-webkit-border-radius: 0px 6px 6px 0px;
-moz-border-radius: 0px 6px 6px 0px;
resize: vertical;
}
.radius-etichetta {-webkit-border-radius: 6px 0px 0px 6px; -moz-border-radius: 6px 0px 0px 6px; border-radius: 6px 0px 0px 6px; border-right:0px}
/** FINE INPUT CON SIMBOLO **/

.riquadro {
border-radius: .6em;
border: 1px solid #666666; padding: 8px;
}

.input {
margin: 0;
min-height: 1.8em;
font-size: 16px;
text-align: right;
/** border: solid 1px #808080; **/
-webkit-appearance: none;
-webkit-border-radius: .6em;
border-radius: .6em;
/** background: #ffffcc; **/
box-shadow: inset 0 1px 8px rgba(0,0,0,0.23);
-webkit-box-shadow: inset 0 1px 8px rgba(0,0,0,0.23);
-moz-box-shadow: inset 0 1px 8px rgba(0,0,0,0.23);
border-color: #C0C0C0;
color: #222;
text-shadow: 0 1px 0 #fff;
padding-right: 10px;
display: inline;
text-align: left;
}

input[type=text], select, textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
resize: vertical;
text-align: left;
}

.container {
font-size: 18px;
text-align: left;
line-height: 1.5;
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}

.testata-blu {margin-top: 20px; color: #ffffff; font-weight: bold;
-moz-box-shadow:inset 0px 1px 0px 0px #54a3f7;
-webkit-box-shadow:inset 0px 1px 0px 0px #54a3f7;
box-shadow:inset 0px 1px 0px 0px #54a3f7;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #007dc1), color-stop(1, #0061a7));
background:-moz-linear-gradient(top, #007dc1 5%, #0061a7 100%);
background:-webkit-linear-gradient(top, #007dc1 5%, #0061a7 100%);
background:-o-linear-gradient(top, #007dc1 5%, #0061a7 100%);
background:-ms-linear-gradient(top, #007dc1 5%, #0061a7 100%);
background:linear-gradient(to bottom, #007dc1 5%, #0061a7 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#007dc1', endColorstr='#0061a7',GradientType=0);
background-color:#007dc1;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
border:1px solid #124d77;
padding: 5px;
text-align: center;
text-decoration:none;
text-shadow: 0px 1px 0px #154682;
}

.testata-rossa {margin-top: 40px; color: #ffffff; font-weight: bold;
-moz-box-shadow:inset 0px 1px 0px 0px #cf866c;
-webkit-box-shadow:inset 0px 1px 0px 0px #cf866c;
box-shadow:inset 0px 1px 0px 0px #cf866c;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #d0451b), color-stop(1, #bc3315));
background:-moz-linear-gradient(top, #d0451b 5%, #bc3315 100%);
background:-webkit-linear-gradient(top, #d0451b 5%, #bc3315 100%);
background:-o-linear-gradient(top, #d0451b 5%, #bc3315 100%);
background:-ms-linear-gradient(top, #d0451b 5%, #bc3315 100%);
background:linear-gradient(to bottom, #d0451b 5%, #bc3315 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#d0451b', endColorstr='#bc3315',GradientType=0);
background-color:#d0451b;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
border:1px solid #942911;
padding:5px;
text-align:center;
text-decoration:none;
text-shadow:0px 1px 0px #854629;
}

.pulsante {
margin:0px;
-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
box-shadow:inset 0px 1px 0px 0px #ffffff;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f9f9f9), color-stop(1, #e9e9e9));
background:-moz-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
background:-webkit-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
background:-o-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
background:-ms-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
background:linear-gradient(to bottom, #f9f9f9 5%, #e9e9e9 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#e9e9e9',GradientType=0);
background-color:#f9f9f9;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
border:1px solid #dcdcdc;
display:inline-block;
/**cursor:pointer;**/
color:#666666;
font-size:16px;
font-weight:bold;
padding:4px 10px;
text-align:center;
text-decoration:none;
text-shadow:0px 1px 0px #ffffff;
}
.pulsante:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #e9e9e9), color-stop(1, #f9f9f9));
background:-moz-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%);
background:-webkit-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%);
background:-o-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%);
background:-ms-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%);
background:linear-gradient(to bottom, #e9e9e9 5%, #f9f9f9 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#e9e9e9', endColorstr='#f9f9f9',GradientType=0);
background-color:#e9e9e9;
}
.pulsante:active {
position:relative;
top:1px;
}

a.pulsante-blu, .pulsante-blu {
outline: none;
cursor: pointer;
border: solid 1px #0076a3;
text-align: center;
text-decoration: none;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
box-shadow: 0 1px 3px rgba(0,0,0,0.5);
background: #0095cd;
background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));
background: -webkit-linear-gradient(#00adee,  #0078a5);
background: -moz-linear-gradient(#00adee,  #0078a5);
background: -ms-linear-gradient(#00adee,  #0078a5);
background: -o-linear-gradient(#00adee,  #0078a5);
background: linear-gradient(#00adee,  #0078a5);
color: #fff;
/** padding: 5px 0px; **/
padding: 6px 10px;
font-family: Verdana, sans-serif;
text-shadow: 1px 1px 1px #12455d;
display: inline-block;
/** width: 100%; **/
font-size: 14px;
}

a.pulsante-blu:hover, .pulsante-blu:hover {
color: #fff;
background: #0095cd;
background: -webkit-gradient(linear, left top, left bottom, from(#0078a5), to(#00adee));
background: -webkit-linear-gradient(#0078a5,  #00adee);
background: -moz-linear-gradient(#0078a5,  #00adee);
background: -ms-linear-gradient(#0078a5,  #00adee);
background: -o-linear-gradient(#0078a5,  #00adee);
background: linear-gradient(#0078a5,  #00adee);
}

a.pulsante-blu:active, .pulsante-blu:active {
position: relative;
top: 1px;
color: #093950;
text-shadow: 1px 1px 1px #7ac8f0;
-webkit-box-shadow: #093950 0px 2px 3px inset;
-moz-box-shadow: #093950 0px 2px 3px inset;
box-shadow: #093950 0px 2px 3px inset;
}

a.pulsante-giallo, .pulsante-giallo {
outline: none;
cursor: pointer;
border: solid 1px #FFC700;
text-align: center;
text-decoration: none;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 0px 1px 0px 0px #fff6af;
-webkit-box-shadow: 0px 1px 0px 0px #fff6af;
box-shadow: 0px 1px 0px 0px #fff6af;
background-color:#ffec64;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffec64), color-stop(1, #ffab23));
background:-moz-linear-gradient(top, #ffec64 5%, #ffab23 100%);
background:-webkit-linear-gradient(top, #ffec64 5%, #ffab23 100%);
background:-o-linear-gradient(top, #ffec64 5%, #ffab23 100%);
background:-ms-linear-gradient(top, #ffec64 5%, #ffab23 100%);
background:linear-gradient(to bottom, #ffec64 5%, #ffab23 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffec64', endColorstr='#ffab23',GradientType=0);
color: #333333;
/** padding: 5px 0px; **/
padding: 6px 10px;
font-family: Verdana, sans-serif;
text-shadow: 0px 1px 0px #ffee66;
display: inline-block;
/** width: 100%; **/
font-size: 14px;
/** font-weight: normal; **/
}

a.pulsante-giallo:hover, .pulsante-giallo:hover {
color: #000;
background-color:#ffab23;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffab23), color-stop(1, #ffec64));
background:-moz-linear-gradient(top, #ffab23 5%, #ffec64 100%);
background:-webkit-linear-gradient(top, #ffab23 5%, #ffec64 100%);
background:-o-linear-gradient(top, #ffab23 5%, #ffec64 100%);
background:-ms-linear-gradient(top, #ffab23 5%, #ffec64 100%);
background:linear-gradient(to bottom, #ffab23 5%, #ffec64 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffab23', endColorstr='#ffec64',GradientType=0);
}

a.pulsante-giallo:active, .pulsante-giallo:active {
position: relative;
top: 1px;
}

.bianco {background-color: #FFFFFF; border-bottom: 1px solid #666666;}
.giallo {background-color: #FFFFCC; border: 1px solid #FF0000;}

.aleft {text-align: left;}
.aright {text-align: right;}
.acenter {text-align: center;}

.row:after {content: ""; display: table; clear: both;}

/** INIZIO SEZIONE MEDIA QUERY **/

@media only screen and (max-width: 540px) {

#sezioni div {width: 24.98%; float: left; border-top: 1px solid #fff;}

#sezioni a {
padding-bottom: 10px;
margin-left: 0px;
font-weight: 500;
text-shadow: 0.5px 0.5px 0.5px #B0AAAA;
color: #000;
float: left;
padding-top: 6px;
line-height: 1.2em;
background-color: #fff8df;
border-top: 1px solid #bbb073;
border-bottom: 1px solid #bbb073;
border-left: 1px solid #bbb073;
border-right: 1px solid #bbb073;
text-align: center;
display: block;
width: 98%;
}

#sezionemenu{margin-right:0px;}
.row {width: 100%;}
.aleft {width: 120px; text-align: left;}
.spazio {width: 100%;}

.col-30 {display: block; width: 100%; margin: 30px 2px 30px 2px;}
.col-50 {display: block; width: 100%;}
.col-100 {display: block; width: 100%;}

}

@media screen and (max-width: 900px) and (min-width: 601px) {
.col-30 {display: inline-block; width: 48%; float: left;}
.col-50 {display: block; width: 100%;}
.col-100 {display: block; width: 100%;}

}

/** FINE SEZIONE MEDIA QUERY **/

/** INIZIO CSS DELLA SEZIONE: DRESS UP CON I VIP **/

/* Scheda del gioco: colonna con vip casuale e istruzioni a sinistra, gioco a destra */
.dv-scheda {display: flex; flex-wrap: nowrap; gap: 10px; align-items: stretch; justify-content: center;}
.dv-laterale {display: flex; flex-direction: column; flex: 0 0 226px; box-sizing: border-box; padding: 6px; background: #ffffff; border: 1px solid #bbbbbb; border-radius: 4px; text-align: center;}
.dv-laterale-titolo {margin: 0 0 6px 0; font-size: 14px; font-weight: bold; line-height: 1.3;}
.dv-casuale {flex: 0 0 auto; min-height: 232px; font-size: 14px; line-height: 1.5;}
.dv-foto {width: 200px; height: 200px; margin: 0 auto 4px auto; border: 1px solid #666666; background: #ffffff url('loading.gif') 50% 50% no-repeat;}
.dv-foto img {display: block; width: 200px; height: 200px; border: 0; opacity: 1; transition: opacity 1.6s ease;}
.dv-nome {display: block; font-weight: bold; opacity: 1; transition: opacity 1.6s ease;}
.dv-casuale.dv-nascosto img,
.dv-casuale.dv-nascosto .dv-nome {opacity: 0;}
.dv-istruzioni {flex: 1 1 0; min-height: 0; margin: 8px 0 0 0; padding: 6px; overflow-x: hidden; overflow-y: auto; background: #eeeeee; font-size: 14px; line-height: 1.4; text-align: left;}

/* Gioco Flash (Ruffle) ridimensionabile */
.dv-gioco {flex: 1 1 0; min-width: 0; width: 100%; max-width: 728px; aspect-ratio: 728 / 546; margin: 0 auto; background: #ffffff;}
.dv-gioco object,
.dv-gioco ruffle-object,
.dv-gioco ruffle-embed,
.dv-gioco ruffle-player {display: block; width: 100% !important; height: 100% !important;}
.dv-gioco p {margin: 0; padding: 20px; font-size: 16px; line-height: 1.5; text-align: center;}

/* Testi e pulsanti */
.dv-testo {margin: 10px 0; font-size: 16px; line-height: 1.5; text-align: center;}
a.pulsante-giallo.dv-corrente {
    background: #eeeeee;
    box-shadow: inset 0 2px 4px rgba(30,30,30,0.40);
    color: #000000;
    border: 1px solid #cccccc !important;
}
a.pulsante-blu.dv-corrente {
background: #0078a5;
box-shadow: inset 0 2px 4px rgba(0,0,0,0.5);
}
.dv-pagine {margin: 10px 0 0 0;}
.dv-quattro {grid-template-columns: repeat(4, minmax(0, 1fr));}

/* Griglia dei vip (6, 4, 3, 2 colonne) */
.dv-griglia {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 6px;
margin: 10px 0;
padding: 0;
list-style: none;
}
.dv-griglia li {margin: 0; padding: 0; min-width: 0;}
.dv-vip {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
height: 100%;
box-sizing: border-box;
margin: 0;
padding: 6px 4px 8px 4px;
background: #ffffff;
border: 1px solid #bbbbbb;
border-radius: 4px;
color: #0033cc;
font: inherit;
font-size: 14px;
font-weight: bold;
line-height: 1.3;
text-align: center;
text-decoration: none;
cursor: pointer;
}
.dv-vip span {margin-bottom: 6px; overflow-wrap: anywhere;}
.dv-vip img {display: block; width: 75px; height: 75px; margin-top: auto; border: 0;}
.dv-vip:hover,
.dv-vip:focus-visible {background: #fff8df; border-color: #800000; color: #000000;}

/* Riquadro 2x2 al centro della griglia (al posto del vecchio banner) */
.dv-riquadro {
grid-column: 3 / span 2;
grid-row: 4 / span 2;
display: flex;
flex-direction: column;
justify-content: center;
box-sizing: border-box;
padding: 10px;
background: #ffffff;
border: 1px dashed #800000;
border-radius: 4px;
font-size: 14px;
line-height: 1.5;
text-align: center;
}
.dv-riquadro p {margin: 0;}

/* Pagina link.html */
.dv-codice {display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; justify-content: center; margin: 15px 0;}
.dv-codice-testo {flex: 1 1 320px; max-width: 460px; text-align: left; font-size: 14px;}
.dv-codice-testo label {display: block; margin-bottom: 4px; font-weight: bold;}
.dv-codice textarea {
display: block;
width: 100%;
height: 110px;
box-sizing: border-box;
padding: 8px;
border: 1px solid #444444;
border-radius: 4px;
background: #ffffee;
color: #444444;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
resize: none;
}
.dv-anteprima {width: 89px; height 120px; margin-top: 28px; padding: 0px 0px 4px 0px; border: 1px solid #444444; background: #ffffff; font-size: 14px; text-align: center;}
.dv-anteprima img {display: block; margin: 4px auto 0 auto; border: 0;}
.dv-codice .pulsante-giallo {align-self: center;}

@media screen and (max-width: 800px) {
.dv-scheda {flex-direction: column; align-items: center;}
.dv-laterale {order: 2; flex: 0 0 auto;}
.dv-istruzioni {display: none;}
.dv-gioco {order: 1; flex: 0 0 auto;}
.dv-griglia {grid-template-columns: repeat(4, minmax(0, 1fr));}
.dv-riquadro {grid-column: 2 / span 2; grid-row: 5 / span 2;}
}

@media screen and (max-width: 600px) {
.dv-quattro {grid-template-columns: repeat(2, minmax(0, 1fr));}
.dv-griglia {grid-template-columns: repeat(3, minmax(0, 1fr));}
.dv-riquadro {grid-column: 1 / -1; grid-row: 6;}
}

@media screen and (max-width: 400px) {
.dv-griglia {grid-template-columns: repeat(2, minmax(0, 1fr));}
.dv-riquadro {grid-column: 1 / -1; grid-row: 8;}
}

/** FINE CSS DELLA SEZIONE **/

.sezionemenu[aria-hidden="true"] {
  display: none;
}

.sezionemenu[aria-hidden="false"] {
  display: block;
}

:target { outline: none; }