/* ----- GENERAL SITE LAYOUT ------ */

html,body {
    background: #4D4D4D;
    /*font-family: Arial, Helvetica, sans-serif;
    color: #666769;*/
    color: #4D4D4D;
    font-family: Arial,Helvetica,sans-serif;
    /*font-family: Verdana,Arial,sans-serif;*/
    font-size:8pt;
    /*font-size:10px;*/
    margin: 0;
    padding: 0;
    border: 0;
    width: 100%;
    height: 100%;
}

a {
    text-decoration: none;
}

img {
    border: 0;
}

table {
    border:0;
}

/*#main_layout_wrapper {
    padding-top: 1%;
    width: 100%;
    height: 98%;
    position: absolute;
    min-width: 800px;
    min-height: 600px;
    background: #666769;
    clear: both;
    float: left; 
}*/

.ProductName {
    color: #BFBFBF;
    float: left;
    font-size: 25px;
    font-weight: bold;
    margin-bottom: 10px;
    margin-left: 30px;
    margin-top: 15px;
}

#main_layout_table {
    height: 100%;

    /*============= Widget Test ===========*/
    /*width: 1064px;*/
    /*width: 1306px;/*/
    /*margin-left: auto;*/
    /*margin-right: auto;*/
    /*=====================================*/
    width: 100%;
    /*============= Widget Test ===========*/

    /*padding-top:10px;*/
    /*padding-left:10px;*/
    /*padding-right:10px;*/
    padding: 20px;
    /*padding-top: 20px;*/
    /*padding-left: 20px;*/
    /*padding-right: 10px;*/
    /*padding-bottom: 20px;*/
    /*min-width: 1272px;*/
    min-height: 600px;
    position: relative;

    cellpadding: 0;
    cellspacing: 0;
    border-collapse: separate;
}

#main_centercol_cell {
    /* TODO: IE9 applies the 100% height wrong!
       This table-cell should be fill 100% of the parent table-cell (main_layout_table).
       But in bloody IE, the 100% appear to be taken from the body-height instead of the parent.
       The height here has no effect in Firefox/Chrome.
       TODO: Temporary fix: set content-height to 85% for IE because it doesn't handle 100% alright.
    */
    height:85%;
    position:relative;
}

/* ------------------------------------------------------------------ */

/* ----- LEFT COLUMN ----- */

#navcol_content {

    float:right;
    width:162px;
    margin-left: 20px;
    height: 50px;
}

.navcol_widget {
    position: relative;
    height: auto;
    padding:16px;
    margin-bottom:16px;
    background:none repeat scroll 0 0 #F5F5F5;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    /*box-shadow: 3px 3px 0px 2px #848587;*/
}

.navcol_widget span {
    display:inline-block;
    vertical-align:middle;
}


.widget_close_icon {
    position:absolute;
    top:5px;
    right:5px;
    cursor: pointer;
}


/* --- CurrentDataWidget --- */

#thumb_power_level_indicator {
    z-index:1;
    position:absolute;
    left:0;
    top:0;
}
#thumb_energy_wheel {
    z-index:3;
    position:absolute;
    left:50px;
    top:50px;
}
#thumb_power_value {
    font: 14pt Helvetica, Verdana, Arial;
    text-align: right;
    color: rgba(75,75,77,255);
    z-index:2;
    position:absolute;
    left:100px;
    top:100px;
    width:50px;
    height:14px;
}

#thumb_layout_container {
    width:100%;height:100%;
    position:relative;
}

#thumb_dataview {
    display:none;
    width: 100%;
    height: 100%;
    margin: auto;
}

#thumb_loading_container {
    width: 100%;
    height: 100%;
    display: table;
}

#thumb_loading_indicator {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    text-align: center;
}

/* --- Navigation widget --- */

#navigation_content {
    background-image: url(/img/ajax-loader-midi.gif);
    background-position: center;
    background-repeat: no-repeat;
    min-height: 390px;
}

#navigation_accordion {
    visibility: hidden;
}

#navigation_header {
    height: 20px;
    background: #f5f5f5;
    color: #bfbfbf;
    font-size: 15px;
    font-weight: bold; 
}

#navigation_content a[href]:hover {
    background-color:#BFBFBF;
}

.navi_item_container {
    padding-left:0 !important;
    padding-right:0 !important;
}

/* Navigation item category 0 */
.navi_item {
    display:block;
    padding-left: 1em;
    line-height: 1.4em;
    margin-bottom: 0.1em;
    text-decoration: none;
    background-color:#F2F2F2;
}

.navi_item_selected {
    font-weight:bold;
    color: #00AAFF !important;
    /*background-color:#BFBFBF*/
}

/* Navigation item category 1 */
.navi_item_1 {
    padding-left: 2em;
}


/* --- Systeminfo widget --- */

#sysinfo_content {
    min-width: 250px;
    line-height:1.5em;
    z-index: 1000;
}

#sysinfo_content [data-islabel] {
    font-weight: bold;
    float: left;
    clear: both;
}

#sysinfo_content span[data-valueid] {
    float:right;
}

#sysinfo_content a {
    color: #00AAFF !important;
    font-size: 8pt;
    text-decoration: underline;
}

.connection_state_connected {
    color: #00AAFF;
}

.connection_state_disconnected {
    color: #FF0000;
}

.connection_state_disabled {
    color: #4D4D4D;
}

/* --- Current data widget --- */

#current_data_widget {
    height:162px;
    width: 190px;
    position:relative;
    cursor:pointer;
    background: none repeat scroll 0 0 #F5F5F5;
    padding: 4px;
}


/* ------------------------------------------------------------------ */


/* ----- CENTER COLUMN ----- */

#centercol_layout_table {
    height: 100%;
    width: 100%;
    /*min-width: 806px;*/
}

#centercol_header {
    padding: 10px;
    color: #bfbfbf;
    height:50px;
    background-color: #F5F5F5;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

#centercol_content {
    background: #F5F5F5;
    /*background-color: white;*/
    /*height:100%;*/
    width:100%;
    /*padding:5px;*/
}

#centercol_footer {
    height:20px;
    background-color: #F5F5F5;
    /*position: relative;*/
}

/* ----- Footer -----*/

#centercol_footer {

}


/* ----- Header -----*/

#centercol_header_layout_table {
    width:100%;
    height:50px;
    border:0;
}

#header_buttonbar {
    float:right;
    margin-right:50px;
}

#header_buttonbar span {
    display: inline-block;
    vertical-align:middle;
    cursor:pointer;
}

.headerbutton_flyout {
    /*width:200px;*/
    padding: 1em;
    margin-top: 5px;
    position:absolute;
    box-shadow: 0 0 10px 1px;
    z-index: 1000;
}

#btn_notifications {
    padding:2px;
    margin-left:10px;
    vertical-align:middle;
    z-index: 1000;
}

#btn_noti {
    background-image: url("images/ui-icons_4d4d4d_256x240.png");
}

#notification_count{
    padding: 0px 5px;
    font-weight: bold;
}

/*#btn_language {*/
    /*padding:2px;*/
    /*margin-left:10px;*/
    /*vertical-align:middle;*/
    /*z-index: 1000;*/
/*}*/

/*#btn_lang {*/
    /*background-image: url("../js/libs/jquery/ui/css/custom-theme/images/ui-icons_4d4d4d_256x240.png");*/
/*}*/

/*#act_lang {*/
    /*font-weight: bold;*/
/*}*/

/* Style for notification-button when new messages available */
#btn_notifications.new_notifications {
    box-shadow: 0px 0px 8px 1px;
    color: #00AAFF;
}

#notifications_content {
    width:400px;
}

#notifications_content span {
    display: inline-block;
    vertical-align:middle;
    cursor:pointer;
}

#notifications_content ul {
    padding:0px;
}

#notifications_content li {
    margin-top:10px;
    cursor:pointer;
}

#notifications_content li a{
    text-decoration: underline;
}

#notifications_content li p{
    padding-left: 5px;
    padding-right: 5px;
}

/* ----- Actual Content ----- */

#page_content_overlay {
    background: white url(/img/ajax-loader-midi.gif) no-repeat center center;
    width:100%;
    /*height:100%;*/
    display:none;
    opacity:1;
    z-index:10000;
    position: relative;
    
}

#page_content_ng {
    background: none repeat scroll 0 0 #FFFFFF;
    box-shadow: 0.94px -0.34px 8px 0 rgba(0, 0, 0, 0.35);
    /*height: 99%;*/
    margin: 4px;
    /*height:99%;*/
    min-height: 640px;
    /*============= Widget Test ===========*/
    /*width:1116px;*/
    /*=====================================*/
    /*width: 100%;*/
    /*============= Widget Test ===========*/
    /*float:left;*/
    /*background-color:white;*/
    /*position: relative;*/
}

#legacy_content_frame {
    /*width:100%;*/
    /*min-width: 600px;*/
    width: 840px;
    height: 580px;
    /*height:100%;*/
    /*min-height:550px;*/
    border:0px none;
}

#SettingIcon {
    height: 16px;
    margin-right: 7px;
    vertical-align: middle;
    width: 16px;
    border: 0 none;
}


/* ------------------------------------------------------------------ */


/* ----- UI-CONTROLS ----- */

label.error {
    color:red;
    font-style:italic;
    /*font-weight: bold;*/
    padding-left: 10px;
    padding-right: 10px;
}

.message_overlay {
    position:absolute;
    top:0px;left:0px;
    width:100%;
    padding: 0.7em 0 0.7em 0;
    text-align:center;
    z-index:1000;
    font-size: 1.2em;
    background-color:#00AAFF;
    color:white;
}

.message_overlay_info {
    background-color:#00AAFF;
}

.message_overlay_alert {
    background-color:#CC0A0C;
}

/* ----------------- SIDEBAR -------------------------------- */

span.logotitle {
    color: #FFFFFF;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 20px;
}

p.logonPart {
    color: #999999;
    font-size: 13px;
    margin-bottom: 0;
    margin-top: 36px;
}
p.logonPart a {
    color: #FFFFFF;
    font-size: 11px;
}

/*#links, #services, #footer, #contact, #faults, #language, #settings{*/
.navigation_tab {
    margin-top: 52px;
}

/*#links h1, #services h1, #footer h1, #contact h1, #faults h1, #language h1, #settings h1{*/
.navigation_tab h1{
    color: #999999;
    font-size: 13px;
    margin: 0;
    font-weight: normal;
}
/*#links h2, #services h2, #footer h2, #contact h2, #faults h2, #language h2, #settings h2{*/
.navigation_tab h2{
    color: #999999;
    font-size: 11px;
    margin: 0;
    font-weight: normal;
}
/*#links a, #services a, #footer a, #contact a, #faults a, #language a, #settings a {*/
.navigation_tab a{
    color: #FFFFFF;
    font-size: 11px;
    font-weight: normal;
    text-decoration: none;
    border: 0 none;
}

.submenu{
    color: #999999;
    font-size: 11px;
    margin: 0;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance:textfield;
}