/* Device Plots */

/*
 * Don't understand why this is necessary. Without it, the title expands downward
 * to fill what should be the plots area.
 */
#real-time-plots-container .ui-panel-titlebar {
    height: 15px;
}

.real-time-plots-container {
    right: 0px;
    margin: 0px;
    padding: 0px;
}

.real-time-plots-container .ui-panel-content {
    margin: 0px;
    padding: 0px;
}

#real-time-plots-content .real-time-plots-panel {
    font-size: 14px;
    text-align: left;
    margin: 0px;
    padding: 0px;
    white-space: nowrap;
    border: none;
}

.real-time-plots-container span.ui-panel-title div.u30-graphs {
display:none;	
}

#real-time-plots-content div {
    border: none;
padding: 1px 0px 0px 0px;
    margin: 0px;
}

#real-time-plots-content .ui-tabs.ui-tabs-top.tabs-panel > .ui-tabs-nav li {
 margin-top: -1px;
 margin-left:1px;
     margin-bottom: 1px;	
}

#real-time-plots-container div.ui-widget-header {
    text-align: right;
    padding-top: 4px;
}

#real-time-plots-container div.ui-widget-header img{
    position: absolute;
    padding: 0px 10px;
    margin-top: -2px;
}

#real-time-plots-content {
    border-left: 1px solid #d7d7d7;
    border-right: 1px solid #d7d7d7;
    border-bottom: 1px solid #d7d7d7;
}

#real-time-plots-content table, 
#real-time-plots-content caption, 
#real-time-plots-content tbody, 
#real-time-plots-content tfoot, 
#real-time-plots-content thead, 
#real-time-plots-content tr, 
#real-time-plots-content th, 
#real-time-plots-content td {
    border: none;
		text-align:center;
}

#real-time-plots-content table {
    margin-top: 20px;
    margin-bottom: 10px;
}

#real-time-plots-content td {
    padding-left: 5px;
}

#real-time-plots-content .ui-tabs-nav {
    height: 30px;
}

#real-time-plots-content .graphs {
    padding-top: 10px;
}

.graph-content {
    /* position: relative; */
}

.graph-compiling {
   /* position: absolute; */
    top: 80px;
    left: 200px;
    width: 10px;
    height: 10px;
}

#real-time-plots-content .graph-legend-group {
 /*   position: relative; */
    overflow: hidden;
    zoom: 1; /* for ie6/7 */
    margin-bottom: 10px;
    padding: 0px;
    border-top: 1px solid #cfe0ec;
    border-bottom: 1px solid #cfe0ec;
}

.graph-group {
    clear: left;
    float: left;
    width: 85%;
    height: auto; 
}

#real-time-plots-content .legend-group {
    float: left;
    width: 9%;
    color: #000000;
	    margin-left: 8px;
	    text-align: center;
		    min-width: 130px;
    margin-top: 10px;
}

@media screen and (max-width: 640px) {
#real-time-plots-content .legend-group {
        float: left;
    width: 200px;
    margin-left: 5px;
    margin-top: 38px;
    text-align: left;
}
#real-time-plots-content .graph-group {
    float: left;
    width: 98%;
}

}

.legend-header {
    width: 100%;
    height: auto;
    padding-top: 13px;
    font-size: 11px;
    white-space: normal;
}

.legend {
    height: auto;
    overflow: hidden;
    padding: 0px;
    font-size: 11px;
}

.stddev-legend {
    clear: left;
    float: left;
    width: 127px;
    height: 20px;
    overflow: hidden;
    padding: 0px;
    font-size: 11px;
}

.graph-rollup {
    font-size: 11px; 
    font-weight: normal; 
    display: inline-block; 
    width: 100%; 
    padding-left: 40px; 
    text-align: left;    
}

#real-time-plots-content .real-time-plots-no-graphs {
    margin-top: 10px;
    margin-left: 5px;
    height: 20px;
}