/* -------------------------------------------------------------------------------- */
/* ----------------------------------- Struttura -----------------------------------*/
/* -------------------------------------------------------------------------------- */
body {
    margin:0;
    padding:0;
    background-color: #FFFFFF;
}
a:link, a:visited {
    text-decoration:none;
}
a > img {
    border:none;
    outline:none;
}
#contenitore{ /* Contenitore Principale */
    background-color: #FFFFFF;
    margin: 10px;
}
#contenitore_pagina{ /* Contenitore di pagina */
    background-color: #FFFFFF;
}
#pagina{ /* Pagina */
    position: relative;
}
#contenitore_etichette{ /* Contenitore Etichette */

}
#etichette{ /* Etichette */
    background-color: #FFFFFF;
}
/* -------------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------------- */
/* ------------------------------------- Caselle -----------------------------------*/
/* -------------------------------------------------------------------------------- */
.casella{
    background-color: #000000;
    position: absolute;
    text-align: center;
}
.casella_before_drop{
    background-color: #F7EEAC;
}
.casella_after_drop{
    background-color: #00B800 !important;
    color: #FFFFFF !important;
    z-index: 100;
}
/* -------------------------------------------------------------------------------- */


/* -------------------------------------------------------------------------------- */
/* ------------------------------ Testo nelle Caselle ------------------------------*/
/* -------------------------------------------------------------------------------- */
.casellatesto{ /* Caratteristiche generali dei testi nelle caselle */
    color: #FFFFFF;
    background-color: inherit;
    font-family: 'Comic Sans MS', 'Marker Felt', sans-serif;
    font-size: 15px;
    text-decoration: none;    
}
.casellatesto_before_drop{
    display: none;
}
.casellatesto_after_drop{
    display: inline-block !important;
    vertical-align: middle;
    line-height: normal;
}
 .casellatesto_testo, .casellatesto_br, .casellatesto_altro_testo{
    vertical-align: middle;
    line-height: normal;
    color: #000000;
    background-color: inherit;
    font-family: 'Comic Sans MS', 'Marker Felt', sans-serif;
    font-size: 15px;
    text-decoration: none;        
}
.casellatesto_br_after_drop{
    display: none;
}
.casellatesto_testo_after_drop, .casellatesto_altro_testo_after_drop{
    color: #FFFFFF !important;
}
/* -------------------------------------------------------------------------------- */


/* -------------------------------------------------------------------------------- */
/* -------------------------------------- Testo ------------------------------------*/
/* -------------------------------------------------------------------------------- */
.testo {
    background-color: #FFFFFF;
    color: #1975A3;
    margin-left: 10px;
    margin-bottom: 10px;
    font-family: 'Comic Sans MS', 'Marker Felt', sans-serif;
    font-size: 15px;
    text-decoration: none;
    display: inline-block;
    text-align: left;
}
.testo:hover, .testo:active {
    text-decoration:underline;
}
.testo_before_drop{
}
.testo_after_drop{
    visibility: hidden !important;
}
/* -------------------------------------------------------------------------------- */


/* -------------------------------------------------------------------------------- */
/* ------------------------------------ Media Query --------------------------------*/
/* -------------------------------------------------------------------------------- */
/* Portrait */
@media only screen and (orientation:portrait) {
    #contenitore_pagina{
        width: 960px;
    }
    #pagina{
        margin: auto;
        width: 88%;
    }
    img{
        width: 100%;
    }
    #etichette{
        margin: 20px;
    } 
}

/* Landscape */
@media only screen and (orientation:landscape) {
    #contenitore{
        margin-left: 100px;
    }
    #contenitore_pagina{
        width: auto;
        height: auto;
        float: left;
    }
    #contenitore_etichette{
        width: auto;        
        height: auto;
        float: left;
    } 
    #etichette{
        margin-top: 40px;
        position: fixed;
    } 
    .testo{
        display: block;
    }
}
 
/* Landscape Tablet */
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
    #contenitore{
        margin: 10px;
    }
    #contenitore_pagina{
        width: 768px;
    }
    #pagina{
        width: 100%;
    }
    img{
        width: 100%;
    }
}

/* -------------------------------------------------------------------------------- */