/* Struttura */


* {
/* Serve a mantenere width ed height di TUTTI i componenti CSS, a prescindere da bordi, padding, margin, ecc. */ 
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}  

BODY {
    margin:0px;
    font-size: 12px;
    font-weight: normal;
    font-family: Arial, Helvetica, sans-serif;
    color: #444;
   	background-color: #fdfdfd;
}


/* css x risoluzione default 1366 */
.wrapper {
    width: 1225px; /*esigenze di centraggio*/
}

.wrapper {
    clear:both;
    margin: 0px auto;
    padding: 0px;
    min-height:70px; /* Utile quando racchiude l'header */
    overflow: auto;

}

.col_sx {
    float:left;
    width:322px; 
    margin-left:0px;
    background:#f0f0f0;
    border-radius:4px;
    border: 1px solid #ddd;
    padding:10px 10px 10px 10px;
}

.col_dx {
    float:right;
    width:860px;
    margin-left:0px;
}






/* Header */
#header {
    position:relative;
    width: 100%;
    height: 70px;
    box-shadow: 0px 0px 7px #000;
    background: linear-gradient(to bottom, #A0C3FF, #3498DB);
}

#box_logo_giochi {
    width:33%;
    height:40px;
    border:0px;
    float:left;
}
#box_logo_giochi img {
    margin: 15px 20px 0px 4px;
}

#formRicerca {
    /*width:33%;*/
    margin: 23px 0px 0px 80px;
    float:left;
    height:100%;
}


#header_pulsanti {
    float:right;
    margin: 18px 6% 0px 0px;
}

.header_home, .header_search, .header_envelope, .header_navicon {
    font-size: 25px;
    margin-left:50px;
    color: #e6efff;
    float:left;
    text-decoration:none;
    text-shadow: 1px 1px 1px #999;
}

.header_home {
    font-size: 28px;
    margin-left:0px;
}


.header_home:hover, .header_search:hover, .header_envelope:hover, .header_navicon:hover{
    text-shadow: 1px 1px 1px #444;
    color: #fff;
    cursor:pointer;
    transition: all 0.2s;
}



.ribbon {
    position: absolute;
    right: 0px; top: -5px;
    z-index: 1;
    overflow: hidden;
    width:  75px; 
    height: 75px;
    text-align: right;
    cursor:default;
}
.ribbon span {
    font-size: 10px;
    font-weight: bold;
    color: #FFF;
    text-shadow: 0px 0px 2px #888;
    text-align: center;
    line-height: 20px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    width: 100px;
    display: block;
    background: linear-gradient(#ffd980 0%, #ffb200 100%);
    box-shadow: 0 3px 5px -5px rgba(0, 0, 0, 1);
    position: absolute;
    top: 22px; 
    right: -22px;

}

/*------------- Menu giochi header ----------*/

#header_menu {
    width:100%;
    overflow:auto;
    margin: auto;
    padding: 7px 10px 3px 10px;
    border: 1px solid #ddd;
    border-top:0px;
    background-color: #f0f0f0;
    border-radius: 0px 0px 4px 4px;
    white-space: nowrap;
    display:none;
}

#header_menu_title {
    width:100%;
    text-align:center;
    color:#3b8ec2;
    font-size:   18px;
    margin: 0 auto 10px auto;
}

#header_menu_close {
    float:right;
    text-align:center;
    margin-top:-30px;
    background-color: #3b8ec2;
    color:#fff;
    width:       22px;
    height:      22px;
    font-size:   18px;
    line-height: 20px;
    border: 1px solid #369;
    border-radius: 11px;
}


.header_menu_puls {
    width: 9.08%;
    height:      25px;
    line-height: 23px;
    font-size: 13px;
    float:left;
    margin:00px 0px 10px 10px;
    border: 1px solid #369;
    border-radius: 4px;
    background-color: #3b8ec2;
    color:#f2f2f2;
    white-space: nowrap;
    text-decoration:none;
    position:static;
    text-align: center;
}


.header_menu_puls:hover, #header_menu_close:hover  {
    text-shadow: 1px 1px 1px #333;
    box-shadow: 0px 0px 3px #369;
    cursor:pointer;
    transition: all 0.2s;
    color:#fff;
}

#header_label { 
    width:160px;
    border:1px solid #aaa;

}

#header_label {
    height: 28px;
    position:static;
    margin: 0px auto 0 auto;
    padding-top:8px;
    cursor:pointer;
    white-space:nowrap;
    border-radius: 0px 0px 4px 4px;
    border-top:0;
    font-size:   14px;
    line-height: 14px;
    color:#333;
    background: linear-gradient(#ffd980 0%, #ffb200 100%);
    
}

#header_label:hover {
    color:#080;
}



#label_navicon {
    float:left;
    margin-left:16px;
}
#label_testo {
    float:left;
    margin-left:18px;
}







/* Colonna sx INIZIO ------------------------------------------------- */
.box_scuro, .box_chiaro, .box_icona_gioco_medio {
    background-color: #aaa;
    padding-bottom:0px;
    border: 0px;
    margin: 0px 0px 25px 0px;
    width:300px;
    border-radius: 4px;
}

.box_chiaro {
    background-color: #f0f0f0;
}

.box_bianco {
    background-color: #fff;
}

.box_last {
    margin-bottom: 0;
}

.banner_300x250 {
    width:300px;
    min-height:250px;
    border:0px;
    padding:0px;
    margin:0px;
    
}

.banner_300x250 img { /* cancellare nella versione definitiva */
    width:300px;
    margin:0px auto 0px auto;
}



.banner_300x600 {
    width:300px;
    height:600px;
    margin:10px auto;
    padding:0px;
}

.box_icona_gioco_medio, .icona_gioco_medio {
    background-color: #f0f0f0;
    width:300px;
    height:192px;
    border-radius: 4px;
}

.box_icona_gioco_medio {
    position:relative;
	overflow:hidden;

}

.icona_gioco_medio {
    margin-bottom: -4px;
    
}
.didascalia {
	position:absolute;
	bottom:-110px; /* vedi js mostra/nascondi */
	height: 110px; /* vedi js mostra/nascondi */
	background: #000;
	background: rgba(0,0,0,0.75);
	color:#fff;
	width:100%;
	padding:10px;
	border-radius: 0 0 4px 4px;
}

.titolo_didascalia {
    color:#ffb200;
    font-size: 20px;
    font-weight:bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.descrizione_didascalia {
    height:42px;
    color:#e2e2e2;
    text-align: justify;
    font-size:  12px;
    line-height:14px;
    margin-top:3px;
    overflow:hidden;
}

.gioca_didascalia {
    margin-top:7px;
    text-align: right;
    font-weight:bold;
    color:#ffb200;
}

.banner_160x600 {
    width:160px;
    height:600px;
    margin:10px auto;
}

.box_cruciverba {
    width:300px;
    height:129px;
    background-color:#aaa;
    border-radius: 4px;
    margin: 0px 0px 25px 0px;
    
}

.icona_cruciverba {
    width:218px;
    height:94px;    
    margin:18px 41px;
}





/* Fumetto titoli col. Sx */

.box_titolo_blu, .box_titolo_celeste, .box_titolo_arancio, .box_titolo_rosso, .box_titolo_bordeaux, .box_titolo_verde {
  width:300px;
  position:relative;
  padding:5px 15px;
  margin-bottom:15px;
  color:#fff;
  font-size:18px;
  -webkit-border-radius:4px;
     -moz-border-radius:4px;
          border-radius:4px;
}

.box_titolo_blu::after, .box_titolo_celeste::after, .box_titolo_arancio::after, .box_titolo_rosso::after, .box_titolo_bordeaux::after, .box_titolo_verde::after {
  content:"";
  position:absolute;
  bottom:-9px; /* valore = - border-top-width - border-bottom-width */
  left:50px; /* posizionamento orizzontale */
  border-width:10px 10px 0px;

  border-style:solid;
  /* FF3.0 fix */
  display:block;
  width:0;
}


.box_titolo_blu {
    background-color: #2C86BA;
    
}

.box_titolo_blu::after {
      border-color:#2C86BA transparent;
}

.box_titolo_celeste {
    background-color: #3498DB;
    
}

.box_titolo_celeste::after {
      border-color:#3498DB transparent;
}

.box_titolo_arancio {
    background-color: #F9A825;
}
.box_titolo_arancio::after {
    border-color:#F9A825 transparent;
}

.box_titolo_rosso {
    background-color: #f5493d;

}
.box_titolo_rosso::after {
    border-color:#f5493d transparent;
}

.box_titolo_bordeaux {
    background-color: #f5493d;

}
.box_titolo_bordeaux::after {
    border-color:#f5493d transparent;
}
.box_titolo_verde {
    background-color: #4CAF50;

}
.box_titolo_verde::after {
    border-color:#4CAF50 transparent;
}
/* Fine fumetto titoli Colonna sx */


/* ---------------------------  Colonna sx FINE ------------------------------------------------- */


/* ------------------------------------   Colonna dx INIZIO ---------------------------*/
.box {
    background-color: #f0f0f0;
    padding:5px;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin: 0px 0px 10px 0px;
    overflow:auto;
    
}
.box_titolo_sezione {
  padding:5px 0px;
  margin-bottom:15px;
  border-bottom: 1px solid #aaa;
}  
.titolo_sezione {
  color:#4080bf;
  font-size:22px;
  font-weight:bold;
}


.select_ordinamento {
  float:right;
  
  
}

.select_ordinamento select {
  margin-left:5px;
  border: 0px;
  border-radius: 3px;
  background-color: #3498DB;
  color:#fff;
  padding:3px;

}

.select_ordinamento select option {
    background-color: #fff;
    color: #333;
}








.box_medio_wrapper {
    float:left;
    margin:0px 0px 0px 0px;
    padding:0;
    width:100%;
    overflow:auto;
    
}

.wrapperIconcina {
    float:left;
    width:20%;
    margin:0 auto;
    
}





.boxIconcina {
    background-color: #fff;
    color: #555;
    width: 142px;
    height: 123px;
    float: left;
    border-radius: 4px;
    border: 1px solid #aaa;
    margin: 8%;
}

.boxIconcina:hover {
    box-shadow: 0px 0px 4px #888;
    cursor: pointer;
    transition: all 0.2s;
}

.titoloIconcina {
    text-align:center;
    font-size:  14px;
    height:     30px;
    line-height:30px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin:0 5px;
}

.icona_gioco_piccolo {
    width: 140px;
    border-top: 1px solid #aaa;
    border-radius: 0px 0px 2px 2px;
    
}

.leaderboard_centrale {
    width:728px;
    margin: 3px auto 0px auto;
}

/* Barra paginazione grande */
.barra_pagine {
    clear:both;
    margin:16px auto 20px auto;
    min-height: 40px;
    width:721px; /* width num_pagina x 12 + 1 */
    color:#fff;
}

.num_pagina {
    float:left;
    font-size:  16px;
    min-width : 60px;
    min-height: 40px;
    line-height:40px;
    overflow:auto;
    text-align:center;
    padding:1px 5px 0 5px;
    background: linear-gradient(to bottom, #4799EA, #227EE5);
    box-shadow: 0px -0px 5px #000;
    color:#fff;
    text-decoration:none;
    
}

a.num_pagina:link, a.num_pagina:visited {
    color: #fff;
}

a.num_pagina:hover {
    background: linear-gradient(to bottom, #227EE5, #4799EA);
    text-decoration:none;
    text-shadow: 1px 1px 1px #333;
    
}

.inattiva, .inattiva:hover {
    background: #3E4F6D;
    cursor:default;
}


.active_page, .active_page:hover {
    background: linear-gradient(to bottom, #FBB34F, #F89507); 
    cursor:default;
}

.freccia_sx,  .freccia_dx {
    font-size:  22px;
}
.freccia_sx {
    border-radius: 6px 0px 0px 6px;
}
.freccia_dx {
    border-radius: 0px 6px 6px 0px;
}
/* Fine Barra paginazione grande */



/* ------------------------------------   Colonna dx FINE ---------------------------*/





/* ----------------Footer INIZIO -----------------*/
#footer {
    clear:both;
    width: 100%;
    min-height: 200px;
    background-color: #369;
    padding:20px;
}

#foot_info, #foot_legal, #foot_social {
    width:33%;
    min-height:180px;
    overflow:auto;
    float:left;
    color: #fff;
}
#foot_legal {
    width:34%;
    border-left:  1px dotted #fff;
    border-right: 1px dotted #fff;
}

.foot_title {
    margin-left:20px;
    font-size: 23px;
    color: #e6efff;
}
.foot_text {
    margin-left:20px;
    font-size: 13px;
    color: #fff;
}
.foot_text a:link, .foot_text a:hover, .foot_text a:active, .foot_text a:visited {
    color: #fff;
    text-decoration:none;
}

.foot_text a:hover {
    text-decoration: underline;
}

.box_facebook, .box_google_plus {
    width: 65px;
    height:32px;
    overflow:auto;
    font-family:arial, verdana, sans-serif;
    background-color: #3B5998;
    background: linear-gradient(to bottom, #476bb8, #3C5A99);
    float:left;
    border-radius:4px;
    margin-right: 15px;
    border: 1px solid #fff;
    padding: 5px 0 0 0;
    text-align:center;
    font-size:   22px;
    line-height: 22px;
    color: #fff;
}

.box_google_plus {
    background-color: #DC4E41; 
    background: linear-gradient(to bottom, #DC4E41, #C53929);
}




.fumetto {
	width:65px;
	height:32px;
	background:#fff;
	position:relative;
	border-radius:4px;
	/*
	-moz-transform:   rotate(0);
	-webkit-transform:rotate(0);
	-ms-transform:    rotate(0);
	-o-transform:     rotate(0);
	transform:        rotate(0);
	*/
	float:left;
	font-size:   15px;
	line-height: 15px;
	color: #333;
	text-align:center;
	padding-top: 8px;
}


.fumetto:before {
    content:"";
    width:0;
    height:0;
    position:absolute;
    right:100%;
    top:10px;
    border-top:    5px solid transparent;
    border-bottom: 5px solid transparent;
    border-right: 10px solid       #fff;
    left:-9px;
}





/* ----------------Footer FINE -----------------*/




/* ----------------Varie INIZIO -----------------*/

/* Left menu fisso Inizio */
#left_menu {
    position:fixed;
    top: 40%;
    left: 0px;
    width:40px;
    min-height:120px;
}

.left_menu_pulsante, #torna_su {
    width:40px;
    height:40px;
    background: linear-gradient(to bottom, #ffd980, #ffb200);
    border:1px #aaa solid;
    border-radius: 0px 4px 4px 0px;
    color:#060;
}

.left_menu_pulsante {
    font-size:  30px;
    line-height:39px;
    text-align:center;

}


.left_menu_pulsante:hover, #torna_su:hover  {
    color: #008500;

}
.ridotto {
    font-size:  23px;
    line-height:39px;
}




/* Left menu fisso Fine */



/* Pulsante Torna_su Inizio */

#torna_su {
    /* Sfondo - Pulsante */
    content: "";
    position:fixed;
    bottom: 15%;
    right: 0px;
    width: 40px;
    height:40px;
    border-radius: 4px 0 0 4px;
    opacity: 0;
    filter: alpha(opacity=0); /* For IE8 and earlier */
    transition: opacity 1.5s;
  
}

#torna_su {
    font-size:  28px;
    line-height:34px;
    text-align:center;
}


/* Pulsante Torna_su Fine */



.a_capo {
    clear:both;
}

.vspace_5, .vspace_10, .vspace_20 {
    clear:both;
    width:100%;
    height:5px;
}
.vspace_10 {
    height:10px;
}
.vspace_20 {
    height:20px;
}

.bold {
    font-weight:bold;
}

a:link, a:hover, a:visited, a:active {
    color: #d00;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* ---------------------------  Varie FINE --------------------  */




/* ---------------------------  Pagine giochi INIZIO --------------------  */

.box_infogioco {
    min-height:215px;
}

.iconcina {
    border-radius: 4px;
    margin:5px 10px 5px 10px;
    border: 1px solid #aaa;
    float:left;
}
.iconcina:hover {
    box-shadow: 0px 0px 4px #888;
    cursor: pointer;
}


table.infogioco {
    margin:5px 10px 5px 10px;
    border: 0px;
    width:59.5%;
    border-collapse: collapse;
    float:left;
    color:#000;
    
}

table.infogioco, table.infogioco td {
    border: 1px solid #ddd;
}

table.infogioco td {
    padding:8px 8px;
    text-align:justify;
}
table.infogioco td.sx{
    width:90px;
    font-weight:bold;
}

table.infogioco tr:nth-child(odd) {
    background-color: #bababa;
}
table.infogioco tr:nth-child(even) {
    background-color: #cfcfcf;
}

.link_categoria a:link, .link_categoria a:hover, .link_categoria a:active, .link_categoria a:visited {
    display:inline-block;
    background: linear-gradient(to bottom, #ffd980, #ffb200);
    border-radius: 4px;
    padding: 3px;
    color: #111;
    text-decoration:none;
}

.link_categoria a:hover {
    /*text-decoration:underline;*/
    /*color: #d00;*/
    box-shadow: 0px 0px 2px #333;
}

.pulsante_gogame {
    width:140px;
    height:90px;
    margin:5px 10px 5px 10px;
    background: linear-gradient(to bottom, #ffd980, #ffb200);
    border:1px #aaa solid;
    border-radius: 4px;
    color: #060;
    float:left;
    text-align:center;
    font-size: 24px;
    
}
.pulsante_gogame:hover {
    color: #008500;
    box-shadow: 0px 0px 4px #888;
    cursor: pointer;
    
}
.gogame_testo {
    margin-top: 18px;
}



.box_gioco {
    background-color: #333;
    border: 10px solid #333;
    border-radius: 4px;
    margin: 0px;
    padding: 5px 0 0 0;
    width:100%;
    min-height:400px; 
    overflow:hidden;
}

.titolo_gioco {
  margin: 0px 0px 10px 0px;
  color:#FF9E40;
  height:     40px;
  font-size:  22px;
  line-height:40px; 
  font-weight:bold;
  text-align: center;
}

#iframe-gioco {

}

.container_social_gioco {
    width:600px;
    margin:20px auto 5px auto;
}

.box_facebook_gioco {
    float:left;
    margin:0px 340px 0 0;
}

.box_google_gioco {
    margin:0px 0px 0px 0px;
}


/* ---------------------------  Pagine giochi FINE --------------------  */




/* ---------------------------  Pagine normali INIZIO --------------------  */
.justify {
    text-align:justify;
}
.titolo_paragrafo {
  width:100%;
  position:relative;
  padding:5px 15px;
  margin-bottom:15px;
  color:#fff;
  background-color: #3498DB;
  font-size:18px;
  -webkit-border-radius:4px;
     -moz-border-radius:4px;
          border-radius:4px;
}

.titolo_paragrafo::after {
  content:"";
  position:absolute;
  bottom:-9px; /* valore = - border-top-width - border-bottom-width */
  left:50px; /* posizionamento orizzontale */
  border-width:10px 10px 0px;
  border-color:#3498DB transparent;
  border-style:solid;
  /* FF3.0 fix */
  display:block;
  width:0;

}


table.normal {
    margin:5px 10px 5px 10px;
    border: 0px;
    width:100%;
    border-collapse: collapse;
    float:left;
    color:#000;
    
}

.table_header {
    background: #333;
    color: #ddd;
}

table.normal {
    width:95%;
}

table.normal, table.normal td {
    
    border: 1px solid #ddd;
}

table.normal td {
    padding:8px 15px;
    text-align:justify;
}
table.normal td.sx{
    /*width:90px;*/
    font-weight:bold;
}

table.normal tr:nth-child(odd) {
    background-color: #bababa;
}
table.normal tr:nth-child(even) {
    background-color: #cfcfcf;
}






/* ---------------------------  Pagine normali FINE --------------------  */



/* =========================== MEDIA QUERIES ============================ */

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

    
  
    .wrapper {
       width: 970px; 
    }
    
    .header_menu_puls {
        width: 108px;
    }
    
    .wrapperIconcina {
        float:left;
        width:25%;
        margin:0 auto;
    }
    
    .boxIconcina {
        margin: 3%;
    }
    
    .col_dx {
        max-width:65%;
        margin-left:10px;
    }
    
    
    .select_ordinamento, #ordinamento {
        display:none;
    }
    
    .barra_pagine {
        width:601px; /* width num_pagina x 12 + 1 */
    }
    .num_pagina {
        min-width : 50px;
    }
    
    
    .header_home {
        /*margin-left:30px;*/
    }
    
    .ribbon {
        display:none;
    }
    
    table.infogioco {
        width: 70%;
    }
    
    .pulsante_gogame {
        display:none;
    }

}




@media screen and (min-width: 1000px) and (max-width: 1070px){

    
  
    .wrapper {
       width: 98%; 
    }
    
    .header_menu_puls {
        width: 11.3%;
    }
    
    .wrapperIconcina {
        float:left;
        width:25%;
        margin:0 auto;
    }
    
    .boxIconcina {
        margin: 6%;
    }
    
    .col_dx {
        max-width:65%;
        margin-left:0px;
    }
    
    
    .select_ordinamento, #ordinamento {
        display:none;
    }
    
    .barra_pagine {
        width:601px; /* width num_pagina x 12 + 1 */
    }
    .num_pagina {
        min-width : 50px;
    }
    
    .header_home {
        /*margin-left:30px;*/
    }
    
    .ribbon {
        display:none;
    }
    
    table.infogioco {
        width: 70%;
    }
    
    .pulsante_gogame {
        display:none;
    }

}

@media screen and (min-width: 1071px) and (max-width: 1187px){

    
  
    .wrapper {
       width: 98%; 
    }
    
    .header_menu_puls {
        width: 11.3%;
    }
    
    .wrapperIconcina {
        float:left;
        width:25%;
        margin:0 auto;
        
    }
    
    .boxIconcina {
        margin: 6% 12%;
    }
    
    .col_dx {
        max-width:68%;
        margin-left:0px;
    }
    
    
    .select_ordinamento, #ordinamento {
        display:none;
    }
    
    .barra_pagine {
        width:601px; /* width num_pagina x 12 + 1 */
    }
    .num_pagina {
        min-width : 50px;
    }
    
    .header_home {
        /*margin-left:30px;*/
    }
    
    .ribbon {
        display:none;
    }
    
    table.infogioco {
        width: 50.1%;
    }

}



@media screen and (min-width: 1188px)  and (max-width: 1304px) {

    
    .wrapper {
       width: 1150px; 
    }
    
    .wrapperIconcina {
        float:left;
        width:20%;
        margin:0 auto;

    }
    
    .boxIconcina {
        margin: 5%;
    }
    
    .col_dx {
        max-width:70%;
        margin-left:0px;
    }
    
    .col_sx {
      margin-left:0px;
    }
    
    .header_home {
        /*margin-left:30px;*/
    }
    
    table.infogioco {
        width: 56.7%;
    }
    

}


@media screen and (min-width: 1305px) and (max-width: 1360px){

    
   
    .wrapper {
       width: 1210px; 
    }
    
    .wrapperIconcina {
        float:left;
        width:20%;
        margin:0 auto;
    }
    
    .boxIconcina {
        margin: 8%;
    }
    
    .col_dx {
        max-width:72%;
        margin-left:0px;
    }
    
  

    

}





/* Correzioni per non sovrapporre i menu laterali fissi alla pubblicita' e ai giochi */
@media screen and (max-width: 1250px) {
    #left_menu {
        display:none; 
    }
    #torna_su {
        display:none;
    }
}

/* Correzioni per Firefox */
@-moz-document url-prefix() {
    #header {
        box-shadow: 0px 0px 5px #000;
    }
    #header_menu_close {
        line-height:18px;
    }
}