body
    {
        font-family: Arial;
        font-size: 8pt;
        background-color: #F8F8F8;
        color: #222222;
        padding:0px;
        overflow:hidden;
    }
    body.status
    {
        background-color: #D0DCE0;
    }
    body.treeview
    {
        background-color: #D0DCE0;
    }

    .img-align{
        vertical-align:middle;
    }
        
    frameset
    {
        /*bordercolor: #00FF00;
        border-color: #00FF00;
        borderWidth: 5;
        color: #00FF00;
        border: thin dotted #FF0000
        */
        /*background-color: #FF0000; */
    }
    frame
    {
        /*bordercolor: #00FF00; */
        /*background-color: #FF0000;*/
    }
 
    th
    {
        font-size: 8pt;
        /*min-width:100px; PB JQuery UI datepicker*/
        padding-top:1px;
        padding-bottom:1px;
        padding-left:5px;
        padding-right:5px;        
    }
    
    td.nopad
    {
        font-size: 8pt;
        /*min-width:100px; PB JQuery UI datepicker*/
        padding-top:0px;
        padding-bottom:0px;
        padding-left:0px;
        padding-right:0px;        
    }
    
    td
    {
        font-size: 8pt;
        /*min-width:100px; PB JQuery UI datepicker*/
        padding-top:1px;
        padding-bottom:1px;
        padding-left:5px;
        padding-right:5px;        
    }
    
    hr
    {
      border-top: 1px solid #000;
      border-left: 0px solid #000;
      color: #fff;
      background-color: #fff;
      height: 0px;
    }
    
    hr.light
    {
      border-top: 1px dashed #000;
      border-left: 0px solid #000;
      color: #fff;
      background-color: #fff;
      height: 0px;
    }
    
    div.toto
    {
        font-size: 7pt;
        color: #444444;
    }
    
    .view-title{
        width:100%;
        border-bottom:2px solid #4F97BD;
        margin-bottom:20px;
        font-size:20px;
        font-weight:bold;
        color:#5F5F5F;
    }

    h1,h2,h3{
        color:#5F5F5F;
    }
    
    hr{
        border:none;
        color: #4F97BD;
        background-color: #4F97BD;
        height: 1px; 
    }
    
    a{
        color:rgb(39, 85, 182);
    }
    
    .light-text{
        /*color: #E8E8E8;*/
       opacity:0.5;
    }
    
    button b{
        font-weight:normal;
    }
    
    .body-view{
        display:none;
    }
    
/*----------------------------------------------------------------------------*/  
/* Color 1, for Rooms
/*----------------------------------------------------------------------------*/  
    h1.col1
    {
        /*background-color: #88AAFF;*/
       background-color: #4F97BD;
    }
    
    td.col1a
    {
        height:18px;
        /*background-color: #BBCCFF;*/
        background-color: SkyBlue;
        text-align:center;
        white-space: nowrap;
    }
    
    th.col1b
    { 
        /*background-color: #99BBFF;*/
        background-color: #4F97BD;
        color:white;
        font-weight: bold;
    }
    
    td.col1b
    { 
        /*background-color: #99BBFF;*/
        background-color: #4F97BD;
        color:white;
        font-weight: bold;
    }
    
    td.col1b a
    { 
        color:white;
        text-decoration:none;
    }
    td.col1b a:hover
    { 
        color:white;
        text-decoration:underline;
    }    
        
    .col1bad
    {
        text-align:center;
        /*background-color: #BB6688;*/
        background-color: #FF7979;        
        color:white;     
        padding:3px;  
    }
    
    td.col1bad a
    { 
        color:white;
        text-decoration:none;
    }
    td.col1bad a:hover
    { 
        color:white;
        text-decoration:underline;
    }      
    
    .loading-col1a
    {
        background-color: #4F97BD;
    }  
      
    td.col1a-grey
    {
        background-color: #ccc;
    }    
    td.col1b-grey
    {
        background-color: #818181;
    }  
    td.col1a-grey a, td.col1b-grey a
    { 
        color:white;
        text-decoration:none;
    }
    td.col1a-grey a:hover, td.col1b-grey a:hover
    { 
        color:white;
        text-decoration:underline;
    }       
/*----------------------------------------------------------------------------*/  
/* Color 2, for HoneyWell devices HCM200
/*----------------------------------------------------------------------------*/  
    h1.col2
    {
        background-color: #FFAA88;
    }
    td.col2a
    {
        background-color: #FFCCBB;
    }
    td.col2b
    {
        background-color: #FFBB99;
        font-weight: bold;
    }
    
    .loading-col2a
    {
        background-color: #FFCCBB;
    }    
    
/*----------------------------------------------------------------------------*/  
/* Color 4, for HoneyWell devices evoTouch
/*----------------------------------------------------------------------------*/  
    h1.col4
    {
        background-color: #99AAFF;
    }
    td.col4a
    {
        background-color: #BBCCFF;
    }
    td.col4b
    {
        background-color: #99BBFF;
        font-weight: bold;
    }
    
    .loading-col4a
    {
        background-color: #BBCCFF;
    }    
    
/*----------------------------------------------------------------------------*/  
/* Color 5, for HoneyWell devices hcc80
/*----------------------------------------------------------------------------*/  
    h1.col5
    {
        background-color: #9988FF;
    }
    td.col5a
    {
        background-color: #BB99FF;
    }
    td.col5b
    {
        background-color: #99AAFF;
        font-weight: bold;
    }
    
    .loading-col5a
    {
        background-color: #BB99FF;
    }    
    
/*----------------------------------------------------------------------------*/  
/* Color 3, fo Trilogis devices
/*----------------------------------------------------------------------------*/  
    h1.col3
    {
        background-color: #009933;
    }
    td.col3a
    {
        background-color: #22DD66;
    }
    td.col3b
    {
        background-color: #00BB44;
        font-weight: bold;
    }
    
    
    
    td.col0
    {
        /*background-color: #F0F0F0;*/
    }
    button
    {
        background-color: #CCCCCC;
        font-weight: normal;
        font-size: 8pt;
    }
    input
    {
        background-color: #F8F8F8;
        font-size: 8pt;
    }
    select
    {
        background-color: #F8F8F8;
        font-size: 8pt;
    }
    
/*----------------------------------------------------------------------------*/  
/* DIV
/*----------------------------------------------------------------------------*/  
    div.mask
    {
        visibility: visible;
        /*display: none;*/
    }
    
    
    
/*----------------------------------------------------------------------------*/  
/* TREEVIEW
/*----------------------------------------------------------------------------*/  
    
.treeview, .treeview ul { 
	padding: 0;
	margin: 0;
	list-style: none;
}

.treeview ul {
	background-color: #D0DCE0;
	margin-top: 4px;
}

.treeview .hitarea {
	background: url(treeview/images/treeview-default.gif) -64px -25px no-repeat;
	height: 16px;
	width: 16px;
	margin-left: -16px;
	float: left;
	cursor: pointer;
}
/* fix for IE6 */
* html .hitarea {
	display: inline;
	float:none;
}

.treeview li { 
    background-color: #D0DCE0;
	margin: 0;
	padding: 3px 0pt 3px 16px;
}

.treeview a.selected {
	background-color: #D0DCE0;
}

#treecontrol { margin: 1em 0; display: none; }

.treeview .hover { color: red; cursor: pointer; }

.treeview li { background: url(treeview/images/treeview-default-line.gif) 0 0 no-repeat; }
.treeview li.collapsable, .treeview li.expandable { background-color: #F8F8F8; background-position: 0 -176px; }

.treeview .expandable-hitarea { background-position: -80px -3px; }

.treeview li.last { background-position: 0 -1766px }
.treeview li.lastCollapsable, .treeview li.lastExpandable { background-image: url(treeview/images/treeview-default.gif); }  
.treeview li.lastCollapsable { background-position: 0 -111px }
.treeview li.lastExpandable { background-position: -32px -67px }

.treeview div.lastCollapsable-hitarea, .treeview div.lastExpandable-hitarea { background-position: 0; }

.treeview-red li { background-image: url(treeview/images/treeview-red-line.gif); }
.treeview-red .hitarea, .treeview-red li.lastCollapsable, .treeview-red li.lastExpandable { background-image: url(treeview/images/treeview-red.gif); } 

.treeview-black li { background-image: url(treeview/images/treeview-black-line.gif); }
.treeview-black .hitarea, .treeview-black li.lastCollapsable, .treeview-black li.lastExpandable { background-image: url(treeview/images/treeview-black.gif); }  

.treeview-gray li { background-image: url(treeview/images/treeview-gray-line.gif); }
.treeview-gray .hitarea, .treeview-gray li.lastCollapsable, .treeview-gray li.lastExpandable { background-image: url(treeview/images/treeview-gray.gif); } 

.treeview-famfamfam li { background-image: url(treeview/images/treeview-famfamfam-line.gif); }
.treeview-famfamfam .hitarea, .treeview-famfamfam li.lastCollapsable, .treeview-famfamfam li.lastExpandable { background-image: url(treeview/images/treeview-famfamfam.gif); } 


.filetree li { padding: 3px 0 2px 16px; }
.filetree span.folder, .filetree span.file { padding: 1px 0 1px 16px; display: block; }
.filetree span.folder_kiki, .filetree span.file { padding: 1px 0 1px 16px; display: block; color:#999999; }
.filetree span.folder_hidden, .filetree span.file_hidden { padding: 1px 0 1px 16px; display: block; visibility:hidden;}
.filetree span.folder, span.folder_kiki { background-color: #D0DCE0; background: url(treeview/images/folder.gif) 0 0 no-repeat; }
.filetree li.expandable span.folder
{ 
    background-color: #D0DCE0;
    background: url(treeview/images/folder-closed.gif) 0 0 no-repeat;
}
.filetree span.file
{ 
    background-color: #D0DCE0;
    background: url(treeview/images/file.gif) 0 0 no-repeat;
}

/*----------------------------------------------------------------------------*/  
/* Loading
/*----------------------------------------------------------------------------*/  
   
.loading{	
    border:1px dotted black;
	font-size:25px;
	background-color:white;
	background-image:url(./loading.gif);
	background-repeat:no-repeat;
	background-position:center center;
	opacity:0.6;
	z-index:99;
	width:99%;
	min-height:442px;
	border-radius: 0px;
	position:relative;
	text-align:center;
	line-height:300px;
}

.loading-small{   
    border:1px dotted black;
    font-size:12px;
    background-color:white;
    background-image:url(./loading.gif);
    background-repeat:no-repeat;
    background-position:center center;
    opacity:0.6;
    z-index:99;
    width:99%;
    min-height:300px;
    border-radius: 0px;
    position:relative;
    text-align:center;
    line-height:250px;
}

.footer{
    bottom:0px;
    width:99%;
}

.ui-widget{
    font-size:1.0em;
}

.inline{
    display:inline-block;
}

.graph-container{
    /*border:grey solid 1px;*/
    padding-bottom:10px;
}


.graph{
    width:80%;
    display:inline-block;
}
.info-box{
    /*border:grey solid 1px;*/
    height:666px;
    width:275px;
    padding:5px;       
    vertical-align:top;
    display:inline-block;
}
.key-value-help{
    margin-left:160px;
    opacity:0.7;                
}
.key-value-help:hover{
    opacity:1;                
}
.ui-button .ui-button-text{
    line-height:0.6;
}
.key-table{
    width:275px;
}
.key-table-a{
    width:90px;
}
.key-table-img{
    width:16px;
}
.temp-blue-light{
    background-color:rgba(144, 238, 234,1); 
    color:black;
    padding:3px;
}
.temp-blue{
    background-color:rgba(100, 149, 237,1); 
    color:black;
    padding:3px;
}
.temp-green{
    background-color:rgba(144, 238, 144,1); 
    color:black;
    padding:3px;
}
.temp-red{
    background-color:#FF7979; 
    color:black;
    padding:3px;
}
.temp-red-light{
    background-color:#FFADAD; 
    color:black;
    padding:3px;
}
.temp-grey{
    background-color:#eee; 
    color:black;
    padding:3px;    
}
.temp-warning{
    font-weight:bold;
    color:red;
}
.quick-menu{
    color:grey;
}
.quick-menu:hover{
    cursor:pointer;
    border-bottom: 1px dotted tomato;
    color:grey;
}
.bring-me-up{
    display:none;
    position:absolute;
    bottom:70px;
    right:35px;
    opacity:0.2;
    border-radius:10px;
    cursor:pointer;
    height:30px;
    width:30px;
    color:white;
    background-image: url(images/arrow.png);
    background-repeat:no-repeat;
    background-size:16px 16px;
    background-color:black;
    background-position:center; 
}

.bring-me-up:hover{
    opacity:0.6;
}
.hidden{
    display:none;
}

.table-row-over{
    color:red;
}

.tablesorter thead .disabled {display: none}