body { margin:0; padding: 0;  background-color: #4800ff; }
#main_content {margin:0; padding-top: 30px; padding-bottom: 20px; padding-right: 20px; padding-left: 30px; position: absolute; top:0px; bottom: 0px; width:100%}
#left_panel {margin:0; padding:0; position:relative; top:0px; bottom:0px; width:70%; height:100%; float: left; }
#right_panel {margin:0; padding:0; position:relative; top:0px; bottom:0px; width:30%; height:100%; float: right; background-color: white; }
#panel_1{margin:0; padding:0; position:relative; top:0px; bottom:0px; width:100%; height:100%;}
#panel_2{margin:0; padding:0; position:relative; top:0px; bottom:0px; width:100%; height:100%;}
#panel_3{margin:0; padding:0; position:relative; top:0px; bottom:0px; width:100%; height:100%;}
#map { position:relative; top:0; width:100%; height:100%; }
#LP_trend { position:relative; top:0; bottom:0; width:100%; height:100%; background-color:slategray}
#RP_table { position:relative; top:0; bottom:0; width:100%; height:100%; display:block}

#ProductName{ font-size: 14px; color: lightgray; font-weight:200; position: absolute; top: 0}
#lastupdate{ font-size: 14px; color: white; }
#totaltext{ font-size: 14px; color: white; font-weight:100; position: absolute; top: 0; float: right; text-align: right; width: 100%; padding-right:20px; padding-top: 4px;}
.footertextL{ font-size: 14px; color: lightgray; }
.footertextR{ font-size: 14px; color: lightgray; float: right; margin-right: 20px; font-style:italic}

#fg_1a {position:relative; top:0; bottom:0; width:100%; height:100%; display:block; background-color:white}
#fg_1b {position:relative; top:0; bottom:0; width:100%; height:100%; display:none; background-color:white}
#ut_1 {position:relative; top:0; bottom:0; width:100%; height:100%; display:none; background-color: white; }
.DT_Text {font-size: 12px; white-space:nowrap; }
.DT_Text2 {font-size: 12px; white-space:nowrap; }
.DT_C_Align {text-align: center; }
.DT_L_Align {text-align: left; }
.DT_R_Align {text-align: right; }
.DT_Rows tr {height: 14px; line-height: 14px; }
.DT_Rows2 tr td {height: 10px; line-height: 10px; }

/* The following are for the trend panel*/
#tc_1 {position:relative; top:0; bottom:0; width:100%; height:100%; display:none; }
#tc_2 {position:relative; top:0; bottom:0; width:100%; height:100%; display:block; }

/* The following are for the status spinners*/
.spinner-map{width: 20%; height: 20%; position: absolute; top: 40%; left: 40%}
.spinner-table{width: 20%; height: 20%; position: absolute; top: 40%; left: 40%}
.spinner-trend{width: 20%; height: 20%; position: absolute; top: 40%; left: 40%}
.spinner-all{width: 20%; height: 20%; position: absolute; top: 50%; left: 50%}

/* The following are part of the styles of the map itself*/
.legend { background-color:#ffffff; padding: 5px; border-radius:3px; box-shadow: 0 1px 2px rgba(0,0,0,.1)}
.legend .swatch {width: 20px; height:20px; float:left; margin-right:10px; }
.info { background-color:#ffffff; padding: 5px; border-radius:3px; box-shadow: 0 1px 2px rgba(0,0,0,.1)}
#layersicon {width: 30px; height: 30px; position: absolute; left: 9px; top: 120px; }
#overviewicon  {width: 30px; height: 30px; position: absolute; left: 9px; top: 80px; }
#layermenu { position: absolute; left:50px; top: 130px;  background-color:#ffffff; padding: 5px; border-radius:3px; box-shadow: 0 1px 2px rgba(0,0,0,.1)}

#ShowMaptab{
    width: 25px;
    height: 120px;
    position: fixed;
    left: 0px;
    top: 10px;
    display: block;
    cursor:pointer;
    background-color:black;
    color:white;
    text-align: center;
    z-index: 999999;
    -webkit-border-top-right-radius: 15px;
    -webkit-border-bottom-right-radius: 15px;
    -moz-border-radius-topright: 15px;
    -moz-border-bottomright: 15px;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
    box-shadow: 0 0 5px #000;
    font-size: 16px;
    /*padding-top: 60px;*/
}

#ShowTabletab{
    width: 25px;
    height: 120px;
    position: fixed;
    left: 0px;
    top: 140px;
    display: block;
    cursor:pointer;
    background-color:black;
    color:white;
    text-align: center;
    z-index: 999999;
    -webkit-border-top-right-radius: 15px;
    -webkit-border-bottom-right-radius: 15px;
    -moz-border-radius-topright: 15px;
    -moz-border-bottomright: 15px;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
    box-shadow: 0 0 5px #000;
    font-size: 16px;
    /*padding-top: 60px;*/
}

#ShowCharttab{
    width: 25px;
    height: 120px;
    position: fixed;
    left: 0px;
    top: 270px;
    display: block;
    cursor:pointer;
    background-color:black;
    color:white;
    text-align: center;
    z-index: 999999;
    -webkit-border-top-right-radius: 15px;
    -webkit-border-bottom-right-radius: 15px;
    -moz-border-radius-topright: 15px;
    -moz-border-bottomright: 15px;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
    box-shadow: 0 0 5px #000;
    font-size: 16px;
    /*padding-top: 60px;*/
}

.rotate{
    white-space: nowrap;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform:rotate(-90deg);
    /*width: 100%;
    height: 100%;
    margin: 0 auto;
    text-align:center;*/
    color: white;
}