.classifica table {
    width: 100%;
    border-collapse: collapse;
}



.classifica .quarter {
    display: inline-block;
    width: 24%;
}

.classifica button {background: #CECECE; padding:0;}

.classifica div.quarter {
    text-align: center;
    border: 2px solid #000;
    box-sizing: border-box;
    height: 4em;
    padding-top: 1em;
    border-bottom: none;
    border-radius: .5em;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    background-color: #006400;
    color: #FFF;
    float: left;
}

.classifica button#cerca {
    float: right;
    width: 20%;
    margin-right: 4%;
}

.classifica .appoggio {
    border: 2px solid;
    background: #D3CF91;
}

.classifica div.selected {
    background-color: #D3CF91;
    color: #000;
    border-style:groove;
}



/* Zebra striping */

.classifica tr:nth-of-type(odd) {
    background: #4EB900;
    color: white;
    background-size: 100% auto;
}

.classifica tr:nth-of-type(even) {
    background: #409800;
    color: black;
}

.classifica th {
    background: #333;
    color: white;
    font-weight: bold;
}

.classifica td, .classifica th {
    padding: 6px;
    border: 1px solid #1E9027;
    border-radius: .5em;
    text-align: center;
    font-size: .9em;
}

.classifica td {
}



    .classifica td:nth-of-type(2) {
        max-width: 100px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }



.classifica .naviga_tabella {
    width: 95%;
    margin: auto;
}

    .classifica .naviga_tabella > div {
        width: 11%;
        margin: 2%;
        text-align: center;
        float: left;
    }

        .classifica .naviga_tabella > div > button {
            width: 100%;
        }

        .classifica .naviga_tabella > div:nth-of-type(4),
        .classifica .naviga_tabella > div:nth-of-type(2) {
            width: 16%;
        }

        .classifica .naviga_tabella > div:nth-of-type(3) {
            width: 26%;
        }

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

@media (max-width:799px), only screen and (max-width: 799px), (max-device-width: 799px) {

    .classifica th:nth-of-type(10),
    .classifica td:nth-of-type(10) {
        display: none;
    }
}



@media (max-width:749px), only screen and (max-width: 749px), (max-device-width: 749px) {

    .classifica th:nth-of-type(11),
    .classifica td:nth-of-type(11) {
        display: none;
    }
}



@media (max-width:730px), only screen and (max-width: 730px), (max-device-width: 730px) {

    .classifica th:nth-of-type(3),
    .classifica td:nth-of-type(3) {
        display: none;
    }
}



@media (max-width:626px), only screen and (max-width: 626px), (max-device-width: 626px) {

    .classifica th:nth-of-type(11),
    .classifica td:nth-of-type(11) {
        display: auto;
    }



    .classifica th:nth-of-type(7),
    .classifica td:nth-of-type(7),
    .classifica th:nth-of-type(8),
    .classifica td:nth-of-type(8) {
        display: none;
    }
}



@media (max-width:519px), only screen and (max-width: 519px), (max-device-width: 519px) {



    /* Force table to not be like tables anymore */

    .classifica table, .classifica thead, .classifica tbody, .classifica th, .classifica td, .classifica tr {
        display: block;
    }



    .classifica table {
        background: #ccc;
    }



    /* Hide table headers (but not display: none;, for accessibility) */

    .classifica thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }



    .classifica tr {
        border: 1px solid #ccc;
        margin: 5px 0;
        background-size: 10% 10%;
    }



    .classifica td {
        margin-left: 0em;
    }



        .classifica td:nth-of-type(2) {
            max-width: none;
        }



    .classifica td {
        /* Behave  like a "row" */
        border: none;
        border-bottom: 1px solid #eee;
        position: relative;
        padding-left: 50%;
        border-radius: 0em;
    }



        .classifica td:before {
            /* Now like a table header */
            position: absolute;
            /* Top/left values mimic padding */
            top: 6px;
            left: 6px;
            width: 45%;
            padding-right: 10px;
            white-space: nowrap;
        }



        .classifica td:nth-of-type(4):before,
        .classifica td:nth-of-type(6):before,
        .classifica td:nth-of-type(8):before {
            width: 22%;
        }

        .classifica td:nth-of-type(5):before,
        .classifica td:nth-of-type(7):before,
        .classifica td:nth-of-type(9):before {
            width: 22%;
            left: 50%;
        }



        .classifica td:nth-of-type(5),
        .classifica td:nth-of-type(7),
        .classifica td:nth-of-type(9) {
            display: block;
            position: relative;
            top: -26px;
            margin-bottom: -26px;
            padding-left: 75%;
        }

        .classifica td:nth-of-type(4),
        .classifica td:nth-of-type(6),
        .classifica td:nth-of-type(8) {
            width: 22%;
            display: block;
            padding-left: 25%;
        }



        /*

	Label the data

	*/

        .classifica td:nth-of-type(1):before {
            content: "Posizione:";
        }

        .classifica td:nth-of-type(2):before {
            content: "Username:";
        }

        .classifica td:nth-of-type(3):before {
            content: "Avatar:";
        }

        .classifica td:nth-of-type(4):before {
            content: "Punti:";
        }

        .classifica td:nth-of-type(5):before {
            content: "Giocate:";
        }

        .classifica td:nth-of-type(6):before {
            content: "Vinte:";
        }

        .classifica td:nth-of-type(7):before {
            content: "Pareggi:";
        }

        .classifica td:nth-of-type(8):before {
            content: "Perse:";
        }

        .classifica td:nth-of-type(9):before {
            content: "Abbandoni:";
        }

        .classifica td:nth-of-type(10):before {
            content: "% Vittorie:";
        }

        .classifica td:nth-of-type(11):before {
            content: "Reputazione:";
        }
}



.classifica tr.utente {
    font-weight: bold;
    color: #7F0C0C;
    border: 5px solid #7F0C0C;
}