﻿#index
{
    width: 90%;
    margin: auto;
    text-align: center;
}

#information
{
    width: 95%;
    margin: auto;
    text-align: left;
}

#totals
{
    width: 95%;
    margin: auto;
    text-align: left;
    min-width: 700px;
}

#contact 
{
    width: 95%;
    margin: auto;
    text-align: left;
    min-width: 700px;
}

#charts {
    margin: auto;
    overflow: visible;
    position: relative;
    text-align: center;
}

#charts-columns {
  margin: auto;
  text-align: center;
  width: 1100px;
}

#charts-filter
{
    text-align: center;
    margin-bottom: 5px;
    width: 500px;
    margin: auto;
}

#charts-filter-checkboxes 
{
    text-align: left;
}

#charts-left 
{
    float: left;
    margin-left: 30px;
    margin-bottom: 5px;
}

#charts-right 
{
    float: right;
    margin-right: 30px;
    margin-bottom: 5px;
}

.tabberlive 
{
    text-align: left;
}

#information-bottom
{
    width: 90%;
    margin: auto;
    text-align: left;
    min-width: 800px;
    padding: 4px;
    font-size: medium;
    overflow: auto;
}

#information-bottom span.connected {
    font-weight: bold;
}

#information-bottom-left 
{
    float: left;
    margin-left: 0px;
    margin-bottom: 5px;s
    word-wrap: break-word;
    width: 50%;
}

#information-bottom-right 
{
    float: left;
    margin-right: 0px;
    margin-bottom: 5px;
    word-wrap: break-word;
    width: 50%;
}

#information-updated 
{
    float: left;
    width: 95%;
}

#information-added 
{
    float: right;
    width: 95%;
}

fieldset 
{
    padding: 0.0em 0.4em 0.0em 0.4em;
}

fieldset div
{
    font-size: small;
}

.hidden
{
    visibility: hidden;
    display: inline;
}

/* Charts - Responsive */

@media screen and (max-width: 1230px) {

    #charts-left {
        margin: 0;
    }

    #charts-right {
        margin: 0;
    }

    #charts-columns {
        width: 100%;
    }
}

@media screen and (max-width: 1140px) {
    #charts-left {
        float: none;
    }

    #charts-right {
        clear: both;
        float: none;
    }
}

/* Information - Responsive */

@media screen and (max-width: 925px) {
    #information-bottom-left,
    #information-bottom-right
    {
        clear: both;
        margin-bottom: 1%;
        width: 100%;
    }

    #information-added {
        float: none;
    }

    #information-bottom {
        min-width: inherit;
    }

    #totals, #contact {
        min-width: 50px;
    }
}