/* --------------------------------------------------------------------------------
    ## Device = any
    ## Screen = PORTRAIT
----------------------------------------------------------------------------------- */
@media (orientation: portrait) {
    #site_container .landscape {
        display: none;
    }

    #site_container div.portrait {
        display: block;
    }

    #site_container table.portrait {
        display: table;
    }

    #site_container span.portrait {
        display: inline;
    }

    #site_container .barchart-container {
        width: 100%;
        display: block;
    }

    #site_container .eventlog-container {
        width: 100%;
        display: block;
        padding: 5px 0 0 5px;
    }

    #site_container .orientation-description:after {
        content: "portrait";
    }
}

/* --------------------------------------------------------------------------------
    ## Device = any
    ## Screen = LANDSCAPE
----------------------------------------------------------------------------------- */
@media (orientation: landscape) {
    #site_container .portrait {
        display: none;
    }

    #site_container div.landscape {
        display: block;
    }

    #site_container table.landscape {
        display: table;
    }

    #site_container span.landscape {
        display: inline;
    }

    #site_container #linechart-parent {
        vertical-align: top;
        width: 98%;
    }

    #site_container .barchart-container {
        width: 58%;
        display: table-cell;
        vertical-align: top;
    }

    #site_container .eventlog-container {
        width: 38%;
        display: table-cell;
        vertical-align: top;
        padding: 5px 0 0 15px;
    }

    #site_container .orientation-description:after {
        content: "landscape";
    }
}

/* --------------------------------------------------------------------------------
    ## Device = Laptops, Desktops
    ## Screen = wider than 1025px
----------------------------------------------------------------------------------- */
@media (min-width: 1025px) {
    site_container input, #site_container span,
    #site_container p,
    #site_container td,
    #site_container div {
        font-size: medium;
    }

    #site_container .device-description {
        background-color: darkgreen;
    }

        #site_container .device-description:after {
            content: "Laptops/Desktops (large)";
        }

    #site_container .device-unknown {
        display: none;
    }
}

/* --------------------------------------------------------------------------------
    ## Device = Laptops, Desktops
    ## Screen = 769px to 1024px wide
----------------------------------------------------------------------------------- */
@media (min-width: 769px) and (max-width: 1024px) {
    site_container input, #site_container span,
    #site_container p,
    #site_container td,
    #site_container div {
        font-size: medium;
    }

    #site_container .device-description {
        background-color: darkgreen;
    }

        #site_container .device-description:after {
            content: "Laptops/Desktops (mediun)";
        }

    #site_container .device-unknown {
        display: none;
    }

}

/* --------------------------------------------------------------------------------
    ## Device = Laptops, Desktops
    ## Screen = less than 768px wide
----------------------------------------------------------------------------------- */
@media (max-width: 768px) {
    site_container input, #site_container span,
    #site_container p,
    #site_container td,
    #site_container div {
        font-size: medium;
    }

    #site_container .device-description {
        background-color: darkgreen;
    }

        #site_container .device-description:after {
            content: "Laptops/Desktops (small)";
        }

    #site_container .device-unknown {
        display: none;
    }

    #site_container .widthA {
        width: 13%;
    }

    #site_container .widthB {
        width: 35%;
    }

    #site_container .widthC {
        display: block;
        width: 90%;
        margin: 10px 0 0 0;
    }

    #site_container div.value_panel.value_panel-groupA, div.value_panel.value_panel-groupB {
        width: 46%;
    }

    #site_container div.value_panel.value_panel-groupE {
        width: 48%;
    }
}

/* --------------------------------------------------------------------------------
    ## Device = Tablets, Ipads (portrait)
    ## Screen = 768px to 1024px wide, pixel ratio = 2
----------------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) {
    site_container input, #site_container span,
    #site_container p,
    #site_container td,
    #site_container div {
        font-size: small !important;
    }

    #site_container .device-description {
        background-color: darkgreen;
    }

        #site_container .device-description:after {
            content: "Tablets/iPads (A)";
        }

    #site_container .device-unknown {
        display: none;
    }
}

/* --------------------------------------------------------------------------------
    ## Device = Tablets, Ipads (landscape)
    ## Screen = 768px to 1024px wide, pixel ratio = 2
----------------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
    site_container input, #site_container span,
    #site_container p,
    #site_container td,
    #site_container div {
        font-size: medium !important;
    }

    #site_container .device-description {
        background-color: darkgreen;
    }

        #site_container .device-description:after {
            content: "Tablets/iPads (B)";
        }

    #site_container .device-unknown {
        display: none;
    }

    #site_container TABLE.event_log * {
        font-size: smaller !important;
    }
}

/* --------------------------------------------------------------------------------
    ## Device = Low Resolution Tablets, Mobiles
    ## Screen = 481px to 767px wide, pixel ratio = 2
----------------------------------------------------------------------------------- */
@media (min-width: 481px) and (max-width: 767px) and (-webkit-min-device-pixel-ratio: 2) {
    site_container input, #site_container span,
    #site_container p,
    #site_container td,
    #site_container div {
        font-size: small !important;
    }

    #site_container .device-description {
        background-color: darkgreen;
    }

        #site_container .device-description:after {
            content: "Mobiles";
        }

    #site_container .device-unknown {
        display: none;
    }

    #site_container td.value_panel_attribute DIV {
        padding: 1px 7px 1px 7px !important;
        font-size: xx-small !important;
    }

    #site_container div.value_panel.value_panel-groupA, div.value_panel.value_panel-groupB {
        width: 46%;
    }

    #site_container div.value_panel.value_panel-groupE {
        width: 48%;
    }
}

/* --------------------------------------------------------------------------------
    ## Device = Most of the Smartphones Mobiles (asumes portrait)
    ## Screen = 320px to 479px wide
----------------------------------------------------------------------------------- */
@media (min-width: 320px) and (max-width: 480px) {
    site_container input, #site_container span,
    #site_container p,
    #site_container td,
    #site_container div {
        font-size: small !important;
    }

    #site_container .device-description {
        background-color: darkgreen;
    }

        #site_container .device-description:after {
            content: "Smartphones";
        }

    #site_container .device-unknown {
        display: none;
    }

    #site_container td.value_panel_attribute DIV {
        padding: 1px 7px 1px 7px !important;
        font-size: xx-small !important;
    }

    #site_container div.value_panel.value_panel-groupA, div.value_panel.value_panel-groupB {
        width: 46%;
    }
    
    #site_container div.value_panel.value_panel-groupE {
        width: 48%;
    }
}