/*--------------------------------------------------------------------------------
  Global site css extended specification
  Copyright 2009 Comsys AB, all rights reserved - http://comsys.se
  Modified mar 30 2010 by Peter
  ------------------------------------------------------------------------------*/

/*--------------------------------------------------------------------------------
  site placeholder containers
  ------------------------------------------------------------------------------*/
/*body {background-color: #f0f0f0; }  */
body {background: #f0f0f0 url(../gfx/page_bg015.png) top repeat-x ;}
div#sitehead,div#sitebody,div#sitemain, div#sitefoot {background:none;overflow:hidden;}
div#sitehead {position: absolute; top:0; left:0;width:100%; height:56px; background:#fff url(../gfx/bg01b.png) top repeat-x; border-bottom:solid 4px #FFC812;}
div#sitefoot {position:absolute;left:0px;bottom:0px; width:100%; height:0px; background: #003399 ; overflow:hidden;}
div#sitebody {position:absolute;left:0px;top:60px; width:100%; bottom:0px; overflow:hidden; margin-top: 0px;}
div#sitebody .extra { margin-left: 10px; margin-top: 5px; }
div#sitebody .extra a, div#sitebody .extra span { margin-right: 10px; }

div#sitebody .extra a { color: #05f; }
div#sitebody .extra .grey { color: #555; }

.prototype_filter_design input { border: 1px solid #ccc; }


/*--------------------------------------------------------------------------------
  window containers
  ------------------------------------------------------------------------------*/
.window_container {position:absolute; border:1px solid #aaa; background-color: #ddd; height:auto; width:auto; display: none; padding:0; margin:0px; overflow:hidden; z-index:1}

.window_container .window_title {position:relative; width:auto; height:30px; background-color: #fff!important; background: url(../gfx/bg_win02b.png) bottom repeat-x; border-bottom: solid 4px #FFC812; margin-top: 5px; -moz-user-select: none;-khtml-user-select: none;}
.window_container .window_title h3 {position: absolute; left: 10px; cursor: default; padding: 4px 0 3px 0; -moz-user-select: none;-khtml-user-select: none;}
.window_container .window_tabarea {position:relative; left:0; display:block; width:auto; height:auto; padding: 5px; background: #666; color:#fff; border-bottom: 1px solid #aaa;}
.window_container .window_tabarea p {color:#fff;}
.window_container .window_help {position:relative; left:0; display:block;width:auto; height:auto; padding: 5px; background: #666; color:#fff; border-bottom: 1px solid #aaa;}
.window_container .window_help p {color:#fff;}
.window_container .window_content {position:relative; left:0; width:auto; height:auto; padding: 5px; background: #f5f5f5; }

.no_user_select { -moz-user-select: none; -khtml-user-select: none; }


#prototypes { display: none;}

/*--------------------------------------------------------------------------------
	keys (for use in windows bars and inside window objects)
  ------------------------------------------------------------------------------*/
.window_title .keys {float:right; width:100%; height:auto; margin:0; padding:0; margin-right: 5px; overflow:visible;}

.keys a, .window_title .keys a { width:22px; height:20px; background-image: url(../gfx/icons.png); background-repeat: no-repeat; display:block; text-align:center; text-decoration:none!important; font-size:13px; color:#333; font-weight:normal; padding: 4px 0 0; font-size: 12px;}

a.keyexit, a.window_close{width:22px; background-position:-167px -232px!important;}
a:hover.keyexit,a:hover.window_close {width:22px; background-position:-217px -232px!important;}

a.keyok {width:22px; background-position:-267px -232px!important;}
a:hover.keyok {width:22px; background-position:-317px -232px!important;}

a.key2 {width:53px!important; background-position:-567px -256px!important;}
a:hover.key2 {background-position:-367px -256px!important;}

a.key3, a.key4 {width:109px!important; background-position:-567px -232px!important;}
a:hover.key3, a:hover.key4 {background-position:-367px -232px!important;}


/*--------------------------------------------------------------------------------
	lightbox ((christopher's))
  ------------------------------------------------------------------------------*/
.lightbox {position: absolute; top:0; left:0; width: 100%;height: 100%; z-index: 10000;}

.lightbox .prototype_network_settings p {padding: 1em 1em 0;}
.lightbox .prototype_network_settings p.notification_heading {font-weight: bold;}

.lightbox_hspacer {float: left;width: 50%;height: 10px;margin-left: -150px;clear: both;}
.lightbox_vspacer {float: left;height: 50%;width: 100%;margin-bottom: -50px;}

/* below not used !
.lightbox_dialog p {color: #000;margin-bottom: 10px;}
.lightbox_dialog {float: left;width: 300px;height: 100px;background-color: #fff;border: 2px solid #000;}

#lightbox_login { background-color: #fff; }

.login_dialog p { color: #000;margin: 10px;}
.login_dialog {float: left;width: 300px;height: 190px;background-color: #fff;border: 2px solid #000; }


/*--------------------------------------------------------------------------------
  form classes
  ------------------------------------------------------------------------------*/
/* form1 - standard */
.form1 {width:100%;}
.form1 h3 {background:#444; color:#fff; padding:10px;}

.form1 div {padding:10px; margin:0; text-align:left;}

.form1 fieldset {margin:0 5px 10px; border:1px solid #888;}
.form1 fieldset legend {text-align:left; margin-left:5px; font-weight:bold;}
.form1 fieldset div {float:left; width:100%; margin:5px 0 0; padding:0; text-align:left;}
.form1 fieldset div div {float:left; width:auto; height:auto; margin:0px 5px 0px 0px; text-align:left;}
.form1 fieldset label {float:left; text-align:left; width:180px; margin-left:5px; }
.form1 fieldset input, .form1 fieldset select  {float:left; text-align:left; margin:0;}

.form1 fieldset .col1 { float: left; width:120px; margin-left:5px; }

.node_status_list { font-size: 10px; margin-left: 5px; padding: 0; margin-top: 5px; float: left;}
.node_status_list td { width: 78px; padding: 0;}
.node_status_list td img { margin-top: 4px; float: right; margin-right: 5px; }
.node_status_list td .description { margin-left: 5px; }
.node_status_list .grey { background-color: #eaeaea;}

.form1 div.keys,div.keys {float:right!important; width:90%; padding:10px;}
.form1 div.keys a,div.keys a {position:relative; float:right; margin:0 0 0 5px; float: left;}

.form1 .ipaddr_fields input, .form1 .ipaddr_fields select { display: inline; float: none!important; position: relative; width: 25px; text-align:center!important; }
.form1 .hostname_value { width: 136px; margin-bottom: 10px; }
.form1 .hostname { height: 23px; }

/* form2 - left */
.form2 {width:100%;}
.form2 h3 {background:#444; color:#fff; padding:10px;}
.form2 div {padding:10px; margin:0; text-align:left;}
.form2 fieldset {margin:0 5px 10px; border:1px solid #888;}
.form2 fieldset div {float:left; margin:0px; padding:10px 5px 10px; text-align:left;}
.form2 fieldset div div {float:left; width:auto; height:auto; margin:0; padding:0; text-align:left;}
.form2 fieldset legend {text-align:left; margin-left:5px; font-weight:bold;}
.form2 fieldset label {float:left; text-align:right; padding:0 5px 0;}
.form2 fieldset input {float:left; text-align:center; margin:0 5px 0;}
.form2 fieldset select {float:left; text-align:left; margin:0 5px 0;}
.form2 fieldset option {margin:0; padding:0px;}

.form2 div.table {width:25%; margin:0 5px 0;}
.form2 div.table div.head {width:100%;}
.form2 div.table div.head label {width:100%; text-align:center!important; padding:0 0 5px;}
.form2 div.table div {width:100%;margin-bottom:2px!important;}
.form2 div.table div label {float:left; margin:0; padding:0;}
.form2 div.table div input {float:right; margin:0; padding:0;}
.form2 div.table div div {width:auto; float:right!important; margin:0; padding:0;}

.form2 div.table2 {width:95%; margin-left:5px;}
.form2 div.table2 div {width:100%; margin-bottom:5px!important;}
.form2 div.table2 div label {float:left; margin:0; padding:0;}
.form2 div.table2 div div { float: left; width:auto; margin:0; padding:0;}
.form2 div.table2 div input {margin:0 5px 0; padding:0;}
.form2 div.table2 div div.slide {float:right; width:auto; margin:0;margin-bottom:5px!important;}

/* for network measurement window */
.form2 div.table3 { width: 50px; }
.form2 div.table3_firstcol { margin-left: 8px; margin-right: 40px; width: 90px!important;  }
.form2 div.table3_rightcol { margin-left: 8px; width: 80%;  }
.form2 div.table3 div.head {width:100%;}
.form2 div.table3 div.head label {width: 100%; text-align:center!important; font-weight: bold}
.form2 div.table3 div {width: 100%; clear: both; line-height: 13px; margin-bottom:2px!important;}
.form2 div.table3 div label {float:left; margin:0; padding:0;}
.form2 div.table3 div input {float:right; margin:0; padding:0;}
.form2 div.table3 div div {width:auto; float:right!important; margin:0; padding:0;}

.measurement_table { width: 210px; margin-bottom: 5px; padding: 0;}
.measurement_table td { text-align: right; padding: 0; margin: 0; height: 17px; vertical-align: top; }
.measurement_table tr { height: 17px; line-height: 15px;   }
.measurement_table .grey { background-color: #eaeaea; }
.sub {
	font-size:70%;
	position:relative;
	bottom:-3px;
}

.measurement_table .heading td { font-weight: bold; }
.measurement_table .regular td { }
.measurement_table .neutral td {}
.measurement_table .name { text-align: left;  }
.measurement_table .angle { width: 37px; }
.measurement_table .thd { width: 56px; }
.measurement_table .colorbox { width: 18px; }
.measurement_table .colorbox div{ width: 10px; height: 10px; margin-top: 2px; border: 1px solid #000; }
.measurement_table .key { text-align: left; font-weight: bold;}
.measurement_table .value { text-align: right; font-weight: normal; float: right; }

.pqs { margin-top: 9px;}
.pqs td { height: 20px;  }
.pqs .col1 { padding-right: 5px; }
.pqs .unit { width: 36px; display: block; float: right; text-align: right; font-weight: normal;}
.phase_indicator_label_fix { position: absolute; text-align: right; width: 40px;}
.phase_indicator_label { position: absolute; font-size: 12px; width: 20px; height: 20px; text-align: center; vertical-align: middle; }
.warning_label { position: absolute; left: 89px; top: 282px; width: 180px; font-weight: bold; display: none; }
.warning_label img { margin-bottom: -3px; }

.form2 div.keys,div.keys {float:right!important; width:90%; padding:10px;}
.form2 div.keys a,div.keys a {position:relative; float:right; margin:0 0 0 5px;}

.d245 {height:212px;}
.d51 { height: 110px!important;}
.d170 { height: 232px!important;}
.d10 {height:10px;}
.redborder { border: 1px solid #f00; }

/* form3 - NEW */
.form3 {width:100%;}
.form3 fieldset {margin:0 5px 5px; padding:0; padding-bottom:5px; border:1px solid #888;}
.form3 fieldset legend {text-align:left; margin-left:5px; font-weight:bold;}
.form3 div.spacer1 {width:98%; margin:0px 1% 5px; padding:0; border-bottom:1px solid #888;}
.form3 div {width:100%; float:left; margin:0; padding:0; text-align:left;}
.form3 div div {width:100%; /*height: 21px;*/ float:left; margin:5px 2% 5px; padding:0; text-align:left;}
.form3 div div div {width:auto; float:left; margin:0; margin-right:5px; padding:0;}
.form3 div div div div {width:auto; float:left; margin:0; padding:0;}
.form3 div.space {width:20px; float:left; margin:2px 0 2px; padding:0;}


.form3 label {width:130px; float:left; margin:0; margin-right:0px; padding:0;}
.form3 label.w1 {width:105px;}
.form3 label.w2 {width:105px; margin-left:42px;}

.form3 input {float:left; margin:0 5px 0; text-align: center;}
.form3 select {float:left;  margin:0 5px 0; text-align:left; height: 22px;}
.form3 option {margin:0 5px 0; padding:0; text-align:left;}
.form3 h3 {color:#444; margin:5px 0 5px; font-size:100%;}


div.preamble {margin:10px 0 10px}

/* form4 - used in eventlog */
.form4 {width:100%;}
.form4 fieldset {margin:0 5px 5px;  padding:0; padding-bottom:5px; border:1px solid #888;}
.form4 fieldset legend {text-align:left; margin-left:5px; font-weight:bold;}

.form4 .event_entries { overflow: auto; height: 170px; margin-left: 5px; margin-right: 5px }
.form4 .event_entries div { width: 100%; float: left; }
.form4 .event_entries div div { width: 200px; float: left; margin-right: 10px; border: 0; }
.form4 .event_entries div div.timedate { width: 140px!important; }
.form4 .event_entries div div.type { width: 70px!important; }
.form4 .event_entries div div.description { width: 230px!important;  }
.form4 .half { width: 283px!important; float: left; }
.form4 .half .event_group { margin-left: 5px; margin-right: 5px; height: 150px; overflow: auto }
.form4 .half .id { color: #888; margin: 0px 3px 0px 3px;}
.form4 .log { margin: 0px 5px 5px 5px; }
.form4 .log div { margin: 0px 5px 5px 5px; }
.form4 .ack { margin: 5px 5px 5px 5px; }
.form4 .alarm_num, .form4 .warn_num { font-weight: normal!important; }


/* form5 - used for aux window */
.form5 {float: left; width:100%;}
.form5 h3 {background:#444; color:#fff; padding:0px;}
.form5 div {padding:0px; margin:0; text-align:left;}
.form5 fieldset {margin:5px 5px 0px; border:1px solid #888;}
.form5 fieldset div {float:left; margin:0px; padding:0px 0px 0px; text-align:left;}
.form5 fieldset div div {float:left; width:auto; height:auto; margin:0; padding:0; text-align:left;}
.form5 fieldset legend {text-align:left; margin-left:0px; font-weight:bold;}


.form5 .status { width: 215px; height: 280px; float: right; }
.form5 .status_container, .form5 .mri_container { overflow: auto; width: 100%; height: 240px; }
.form5 .status_item { width: 95%; float: left; margin-left: 5px;}
.form5 .status_item div { float: right; margin-right: 5px;}
.form5 .status_item .status_item_latched { float: right; margin-right: 26px!important;}
.form5 .status input { float: right; clear: both }

.form5 .input .col1 {width: 50px; margin-left: 5px; float: left; clear: left;}
.form5 .input .col2 {width: 100px; float: left; }
.form5 .input .col3 {width: 80px; float: left; }
.form5 .input div { margin:2px 0px 2px 2px }
.form5 .input {width: 245px; height: 123px; float: left; margin:0px 5px 5px 5px;}

.form5 .inputs { float: left; }

.form5 .output_container {width: 75px; margin:0px 5px 5px 5px;}
.form5 .output { width: 70px; float: left; }
.form5 .outputs { float: left; width: 638px; }
.form5 .outputs_loadshare { float: left; width: 400px; }
.form5 .outputs_protection { float: left; width: 873px; margin: 0px 5px 5px 5px;}
.form5 .outputs_diag { float: left; width: 873px; margin: 0px 5px 5px 5px; height: 490px; }
.form5 .output input {width: 27px}

.num_container input {  width: 50px!important; font-size: 9px!important; }

.form5 .log {width: 120px; margin:0px 5px 5px 5px; float: left; clear: left }
.form5 .log div { margin: 0px 5px 5px 5px; }
.form5 .flash {width: 120px; margin:0px 5px 5px 5px; float: left;}
.form5 .flash div { margin: 0px 5px 5px 5px; }

.form5 .misc {width: 165px; height: 123px; margin:0px 5px 5px 5px; float: left; line-height: 14px; }
.form5 .misc div { margin: 0px 5px -2px 5px; font-size: 10px; width: 100%;}

.form5 .flicker {margin:0px 5px 5px 5px; height: 100px; float: left; }
.form5 .flicker div { font-size: 10px; }
.form5 .flicker .setting_box { float: left; width: 130px; margin-left: 3px; margin-right: 3px; margin-bottom: 3px; }
.form5 .flicker .col1 { width: 80px; }
.form5 .flicker .col2 { width: 40px; }

.form5 .pp_status {width: 200px; margin:0px 5px 5px 5px; float: left; }
.form5 .pp_status div { margin: 0px 0px 0px 0px; font-size: 9px; width: 30px; float: left; text-align: center;}

.form5 .misc_buttons {width: 200px; margin:0px 5px 5px 5px; float: left; }
.form5 .misc_buttons div { margin: 0px 5px 5px 5px; float: left; }
.form5 .misc_buttons input { font-size: 8px; }

.phase_indicator {width: 580px; height: 320px; margin:0px 5px 5px 5px; float: left; }

.form5 .prot {width: 155px; margin:0px 5px 5px 5px; float: left; }
.form5 .prot div { line-height: 11px; margin: 0px 5px 0px 5px; font-size: 10px; width: 100%;}

.load_share_table { font-size: 10px; margin-left: 5px; padding: 0; height: 200px; }
.load_share_table td { height: 11px; padding: 0; width: 70px;}
.load_share_table .row_x  td { margin-bottom: 0px; margin-top: 1px; width: 70px; }
.load_share_table .row_y  td { margin-bottom: 1px; margin-top: 0px; border-bottom: 1px solid #777; width: 70px; }

.setup_table_container { overflow: auto; height: 320px; width: 100%;}
.setup_table { width: 99%; font-size: 10px; margin-left: 5px; padding: 0;}
.setup_table tr { }
.setup_table td { /*border: 1px solid #fff!important; */margin: 0; padding: 0; border-bottom: 1px solid #bbb;}

.setup_table select { width: 150px; }


.prot_table_container { overflow: auto; height: 440px; width: 878px;}
.prot_table { width: 99%; font-size: 10px; margin-left: 5px; padding: 0;}

.prot_table tr { }
.prot_table td { /*border: 1px solid #fff!important; */margin: 0; padding: 0; border-bottom: 1px solid #bbb;}
.prot_table .limit { width: 50px; }
.prot_table .delayon { width: 30px; }
.prot_table .limit_col { width: 190px; }
.prot_table .adj_col { width: 300px; }
.prot_table .shrinky { width: 5px; }
.prot_table .shrinky  input,.prot_table .shrinky  span{ margin-left: 2px; margin-right: 2px; white-space: nowrap;}
.prot_table .alarm_row  td{ margin-bottom: 8px; }
.prot_table .alarm_row  .inactive { cursor: default; color: #aaa; text-decoration: none;}
.prot_table .end_group td   { border-bottom: 1px solid #555!important; }


.diag_table_container { overflow: auto; width: 878px;}
.diag_table { width: 99%; font-size: 10px; margin-left: 5px; padding: 0;}
.diag_table tr { }
.diag_table td { /*border: 1px solid #fff!important; */margin: 0; padding: 0; border-bottom: 1px solid #bbb;}

.diag_bold { margin: 5px 5px 5px 5px!important; font-size: 19px; font-weight: bold; }

.diag_test_run { margin-top: 25px; }

.diag_tab_container { float: left; width: 165px; height: 500px; border-right: 1px solid #777 }
.diag_tab { }
.diag_tab li { background:#fff url(../gfx/bg01b.png) top repeat-x; width: 160px; height: 30px; margin-bottom: 5px;}
.diag_tab li a { float: left; margin-left: 10px; margin-top: 7px; color: #000}
.diag_contents { float: right; height: 500px; width: 720px; margin-left: 50px; }
.diag_user_action { margin: 5px 5px 5px 5px!important; }
.tone_status_x,.tone_status_y{ font-size: 10px; height: 11x; border: 0; background-color: #ccc; width: 50px; }

.lampx,.lampy { width: 120px!important; }

/*--------------------------------------------------------------------------------
  jQuery slides
  ------------------------------------------------------------------------------*/
.generatormain { font-size: 11px; }
.generatorcontainer { float: left; clear: both; margin: 2px 2px 2px 2px!important; }
div.formcon_gen {overflow:hidden; width:100%;}
div.formcon_gen div {position:relative; float:left; margin:0;}
div.formcon_gen div a {color:#444;}
div.formcon_gen div fieldset {position:relative; float:left; width:auto; margin:0 5px 10px; overflow:hidden; border:1px solid #888;}
div.formcon_gen legend {margin:0 5px 0; padding:0 2px 0; font-weight:bold; font-size:11px;}

div.formcon {overflow:hidden; width:100%;}
div.formcon div {position:relative; float:left; margin:0 5px 0px;}
div.formcon div a {color:#444;}
div.formcon div fieldset {position:relative; float:left; width:auto; margin:0 5px 10px; overflow:hidden; border:1px solid #888;}
div.formcon legend {margin:0 5px 0; padding:0 2px 0; font-weight:bold; font-size:11px;}

.slider {width:46px; padding:0; margin:0; text-align:center;}
.slider div {height:20px; padding:0; margin:0!important; text-align:center; width:100%;}
.slider div input {text-align:center;}

.slider_left {width:54px; padding:0; margin:0px; text-align:center;}
.slider_left div {height:20px; padding:0; margin:0!important; text-align:center; width:100%;}

.ui-widget-content {border: 1px solid #aaaaaa; background: #fff; color: #444;}
.ui-state-default {border:1px solid #888;}
.slider .ui-slider {margin:10px 45% 10px!important; text-align: left;  }
.ui-slider a {background: #888;}
.ui-slider { position: relative; text-align: left }

.ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 10px; height: 5px; cursor: default; }
.ui-slider .ui-slider-range { position: absolute; z-index: 1; font-size: 10px; display: block; border: 0; }
.master_slider {width:4px!important; height:246px!important;}
.setting_slider {width:4px!important; height:60px!important;}
.setting_spacer {width:4px!important; height:82px!important;} /* + 10px (margin) + 2*1px (border) */
.angle_slider {width:4px!important; height:50px!important;}
.angle_spacer {width:4px!important; height:72px!important;} /* + 10px (margin) + 2*1px (border) */
.master_spacer {/*width:4px!important; */height:25px!important;}
.slider_spacer {border: 0; margin: 0; padding: 0; height: 0px!important; }

.pfcset_slider { height: 4px!important; width: 150px!important; }
.pfcq_slider { height: 4px!important; width: 150px!important; }

.ui-slider-vertical .ui-slider-handle {margin-bottom:-5px;left:-4px;!important}
.ui-slider-vertical .ui-slider-range {left: 0; width: 100%;!important }
.ui-slider-vertical .ui-slider-range-min {bottom: 0;!important }
.ui-slider-vertical .ui-slider-range-max {top: 0;!important }

.ui-slider-horizontal { top: 6px; height: 10px; width: 100%;}
.ui-slider-horizontal .ui-slider-handle { height: 10px; width: 5px; margin-top:-4px; margin-left:-2px; left:0px;!important }
.ui-slider-horizontal .ui-slider-range { top: 0; height: 100%;!important }
.ui-slider-horizontal .ui-slider-range-min { left: 0;!important }
.ui-slider-horizontal .ui-slider-range-max { right: 0;!important }


/*--------------------------------------------------------------------------------
  FFT view
  ------------------------------------------------------------------------------*/
.fft_frame {float:none!important; height:200px; padding:0; padding-left:36px; margin:50px!important; border:2px #aaa solid; font-size:11px;}
.fft_Xtext {position:absolute!important; right:0!important; bottom:-35px; width:100px; height:15px; margin:0!important; text-align:right;}
.fft_Ytext {position:absolute!important; left:-35px!important; top:-45px; width:100px; height:15px; margin:0!important; text-align:left;}
.fft_Irms {position:absolute!important; right:0px!important; top:-45px; width:200px; height:15px; margin:0!important; text-align:right;}
.fft_Ymax, .fft_Y75, .fft_Y50, .fft_Y25, .fft_Y00 {position:absolute!important;left:0px!important;width:100%; height:15px; margin:0!important; text-align:left;}
.fft_Ymax {top:0px;}
.fft_Y75 {bottom:75%; border-bottom:1px #999 solid;}
.fft_Y50 {bottom:50%; border-bottom:1px #999 solid;}
.fft_Y25 {bottom:25%; border-bottom:1px #999 solid;}
.fft_Y00 {bottom:0px; }
.fft_Ymax div, .fft_Y75 div, .fft_Y50 div, .fft_Y25 div, .fft_Y00 div {left:-35px!important;width:25px; text-align:right;}

.fft_v {position:relative; float:left; bottom:0; height:100%; margin:0!important; width:50px; font-size:10px; text-align:left; border-left:1px #999 solid; }
.fft_val {position:absolute!important; left:-25%; top:-20px; width:auto; height:15px; padding:0 5px 0!important; margin:0!important; background:#fff;}
.fft_bar {position:absolute!important; left:-25%; bottom:0; width:50%; height:50px; margin:0!important; background:#FF9933;}
.fft_har {position:absolute!important; left:-25%; bottom:-20px; width:100%; height:15px; margin:0!important;}

/*--------------------------------------------------------------------------------
  Waveform view
  ------------------------------------------------------------------------------*/
.wave_frame { float: left; width:600px; height: 280px; float:none!important; padding:0; margin: 0; font-size:11px; }
.wave_frame .legend table { font-size: 13px!important; }
.wave_frame .legend table td { padding: 5px 2px 0 2px;  }

/*--------------------------------------------------------------------------------
	logo and containers
  ------------------------------------------------------------------------------*/
div.logo01 a {position:relative; float:left; background-image: url(../gfx/icons.png); background-position:-964px -224px!important;width:105px; height:70px; padding:0; overflow:hidden;}
div.spacer {position:relative; float:left; width:0; height:100%; margin:0 0px 0 0px; padding:0; overflow:hidden;}


/*--------------------------------------------------------------------------------
  menu bar icons 32x32px
  ------------------------------------------------------------------------------*/
div.bar fieldset {position:relative; float:left; width:auto; height:70px; margin:19px 10px 0; padding:0 5px 0 0; border:none; overflow:hidden;}
div.bar fieldset.border {position:relative; float:left; width:auto; height:65px; margin:3px 10px 0; padding:0 5px 0 0; border:1px solid #888; overflow:hidden;}
div.bar fieldset.border2 {position:relative; float:left; width:auto; height:65px; margin:4px 0px 0px 10px; padding:0 5px 0 0; /*border:1px solid #888;*/ overflow:hidden; border-right:none;}
div.bar legend {margin:0 5px 0; padding:0 2px 0; font-weight:bold; font-size:11px; display: none;}
div.bar div {float:left; width:auto; height:50px; margin:0; padding:0px 0px 3px 5px; text-align:left; clear:none!important;}
div.bar div div {position:relative; float:left; height:48px; margin-left:3px; padding:0; overflow: hidden; }
div.bar div div a {height:48px; min-width:50px; margin:0; padding:0; background-image: url(../gfx/icons.png); background-repeat: no-repeat; display:block;}
div.bar div div a {padding-top:33px; text-align:center; text-decoration:none!important; font-size:11px; color:#333; font-weight:normal;}

/*menu items*/
div.bar div div a.lan_off {background-position:-307px -20px!important; color:#bbb; cursor:default;}
div.bar div div a.lan {background-position:-307px -90px!important;}
div.bar div div a.lan_on, div.bar div div a:hover.lan {background-position:-307px -160px!important;}
div.bar div div a.users_off {background-position:-357px -20px!important; color:#bbb; cursor:default;}
div.bar div div a.users {background-position:-357px -90px!important;}
div.bar div div a.users_on, div.bar div div a:hover.users {background-position:-357px -160px!important;}
div.bar div div a.config_off {background-position:-407px -20px!important; color:#bbb; cursor:default;}
div.bar div div a.config {background-position:-407px -90px!important;}
div.bar div div a.config_on, div.bar div div a:hover.config {background-position:-407px -160px!important;}
div.bar div div a.setup_off {background-position:-1007px -20px!important; color:#bbb; cursor:default;}
div.bar div div a.setup {background-position:-1007px -90px!important;}
div.bar div div a.setup_on, div.bar div div a:hover.setup {background-position:-1007px -160px!important;}
div.bar div div a.comp_off {background-position:-457px -20px!important; color:#bbb; cursor:default;}
div.bar div div a.comp {background-position:-457px -90px!important;}
div.bar div div a.comp_on, div.bar div div a:hover.comp {background-position:-457px -160px!important;}
div.bar div div a.harmgen_off {background-position:-507px -20px!important; color:#bbb; cursor:default;}
div.bar div div a.harmgen {background-position:-507px -90px!important;}
div.bar div div a.harmgen_on, div.bar div div a:hover.harmgen {background-position:-507px -160px!important;}

/*measurement items*/
div.bar div div a.measure_off {background-position:-557px -20px!important; color:#bbb; cursor:default;}
div.bar div div a.measure {background-position:-557px -90px!important;}
div.bar div div a.measure_on, div.bar div div a:hover.measure {background-position:-557px -160px!important;}
div.bar div div a.fft_off {background-position:-607px -20px!important; color:#bbb; cursor:default;}
div.bar div div a.fft {background-position:-607px -90px!important;}
div.bar div div a.fft_on, div.bar div div a:hover.fft {background-position:-607px -160px!important;}
div.bar div div a.graph_off {background-position:-657px -20px!important; color:#bbb; cursor:default;}
div.bar div div a.graph {background-position:-657px -90px!important;}
div.bar div div a.graph_on, div.bar div div a:hover.graph {background-position:-657px -160px!important;}
div.bar div div a.log_off {background-position:-707px -20px!important; color:#bbb; cursor:default;}
div.bar div div a.log {background-position:-707px -90px!important;}
div.bar div div a.log_on, div.bar div div a:hover.log {background-position:-707px -160px!important;}
div.bar div div a.trend_off {background-position:-757px -20px!important; color:#bbb; cursor:default;}
div.bar div div a.trend {background-position:-757px -90px!important;}
div.bar div div a.trend_on, div.bar div div a:hover.trend {background-position:-757px -160px!important;}

/*control items*/
div.bar div div a.trip_off {background-position:-7px -20px!important; color:#bbb; cursor:default;}
div.bar div div a.trip {background-position:-7px -90px!important;}
div.bar div div a.trip_on, div.bar div div a:hover.trip {background-position:-107px -230px!important;}
div.bar div div a.stop_off {background-position:-107px -20px!important; color:#bbb; cursor:default;}
div.bar div div a.stop {background-position:-107px -90px!important;}
div.bar div div a.stop_on, div.bar div div a:hover.stop {background-position:-107px -160px!important;}
div.bar div div a.start_off {background-position:-157px -20px!important; color:#bbb; cursor:default;}
div.bar div div a.start {background-position:-157px -90px!important;}
div.bar div div a.start_on, div.bar div div a:hover.start {background-position:-157px -160px!important;}
div.bar div div a.pause_off {background-position:-207px -20px!important; color:#bbb; cursor:default;}
div.bar div div a.pause {background-position:-207px -90px!important;}
div.bar div div a.pause_on, div.bar div div a:hover.pause {background-position:-207px -160px!important;}
div.bar div div a.reset_off {background-position:-907px -20px!important; color:#bbb; cursor:default;}
div.bar div div a.reset {background-position:-907px -90px!important;}
div.bar div div a.reset_on, div.bar div div a:hover.reset {background-position:-907px -160px!important;}


/*status items*/
div.bar div div a.status_offline {background-position:-7px -20px!important; font-weight:bold;}
div.bar div div a.status_off {background-position:-7px -90px!important; font-weight:bold;}
div.bar div div a.status_charge {background-position:-7px -160px!important; font-weight:bold;}
div.bar div div a.status_ready {background-position:-7px -230px!important; font-weight:bold;}
div.bar div div a.status_trip {background-position:-57px -20px!important; font-weight:bold;}
div.bar div div a.status_pause {background-position:-57px -91px!important; font-weight:bold;}
div.bar div div a.status_run {background-position:-57px -160px!important; font-weight:bold;}
div.bar div div a.status_stop {background-position:-57px -230px!important; font-weight:bold;}

/*web application items*/
div.bar div div a.sticky {background-position:-257px -90px!important;}
div.bar div div a.sticky_on, div.bar div div a:hover.sticky {background-position:-257px -160px!important;}
div.bar div div a.exit {background-position:-7px -90px!important;}
div.bar div div a.exit_on, div.bar div div a:hover.exit {background-position:-107px -230px!important;}
div.bar div div a.reload_off {background-position:-857px -20px!important; color:#bbb; cursor:default;}
div.bar div div a.reload {background-position:-857px -90px!important;}
div.bar div div a.reload_on, div.bar div div a:hover.reload {background-position:-857px -160px!important;}
div.bar div div a.tools_off {background-position:-957px -20px!important; color:#bbb; cursor:default;}
div.bar div div a.tools {background-position:-957px -90px!important;}
div.bar div div a.tools_on, div.bar div div a:hover.tools {background-position:-957px -160px!important;}


/*information items*/
div.bar div div a.info_off {background-position:-807px -20px!important; color:#bbb; cursor:default;}
div.bar div div a.info {background-position:-807px -90px!important;}
div.bar div div a.info_on, div.bar div div a:hover.info {background-position:-807px -160px!important;}
div.bar div div a.overview_off {background-position:-957px -20px!important; color:#bbb; cursor:default;}
div.bar div div a.overview {background-position:-957px -90px!important;}
div.bar div div a.overview_on, div.bar div div a:hover.overview {background-position:-957px -160px!important;}

div.bar div div a.thy_off {background-position:-1057px -20px!important; color:#bbb; cursor:default;}
div.bar div div a.thy {background-position:-1057px -90px!important;}
div.bar div div a.thy_on, div.bar div div a:hover.thy {background-position:-1057px -160px!important;}

div.bar div div a.prot_off {background-position:-1107px -20px!important; color:#bbb; cursor:default;}
div.bar div div a.prot {background-position:-1107px -90px!important;}
div.bar div div a.prot_on, div.bar div div a:hover.prot {background-position:-1107px -160px!important;}


div.about_logocontainer { float: left; width: 430px; background:#fff url(../gfx/bg01b.png) top repeat-x; }
div.about_logocontainer p { float: left; display: inline; margin: 0; padding: 0; clear: both; margin: 5px 5px 5px 5px}
div.about_logo {position:relative; float:left; background-image: url(../gfx/icons.png); background-position:-757px -209px!important;width:200px; margin-top: 0px!important; height:70px; padding:0; overflow:hidden; clear: both}

div.firmware_update_step { width: 360px; float: left; clear: both; padding-bottom: 10px; }
div.firmware_update_step p { float: left; clear: both; width: 100%; }
div.firmware_update_warning { color: #f00; font-weight: bold }
div.firmware_update_progress { width: 350px; height: 20px; background-color: #fff; margin:0 }
div.firmware_update_progress .indicator { position: absolute; height: 20px; width: 0%; background-color: #0f0; margin: 0}
div.firmware_update_progress span {  position: absolute; text-align: center; width: 345px; top: 1px; }

select.config_func_select , select.config_func_select_multiple { width: 230px; }
select.config_func_select_multiple { height: 92px; }
div.config_func_header { margin-left: 5px!important; width: 230px!important; }
div.config_level_header { margin-left: 5px!important; padding-left: 5px!important; }
div.config_footer { height: 3px!important; }

.info_box_outer { margin: 5px 5px 5px 5px!important; background: url('../gfx/info_icon.png') no-repeat 10px 10px; }

div.growlUI_success { background: url(../gfx/passed.png) no-repeat 10px 10px }
div.growlUI_error{ background: url(../gfx/error.png) no-repeat 10px 10px }
div.growlUI_warning { background: url(../gfx/warning.png) no-repeat 10px 10px }
div.growlUI h1, div.growlUI h2 {
    color: white; padding: 5px 5px 5px 75px; text-align: left
}

div.jGrowl{z-index:99999;color:#fff;font-size:12px}div.ie6{position:absolute}div.ie6.top-right{right:auto;bottom:auto;left:expression( ( 0 - jGrowl.offsetWidth + ( document.documentElement.clientWidth ? document.documentElement.clientWidth:document.body.clientWidth ) + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft:document.body.scrollLeft ) ) + 'px' );top:expression( ( 0 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop:document.body.scrollTop ) ) + 'px' )}div.ie6.top-left{left:expression( ( 0 + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft:document.body.scrollLeft ) ) + 'px' );top:expression( ( 0 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop:document.body.scrollTop ) ) + 'px' )}div.ie6.bottom-right{left:expression( ( 0 - jGrowl.offsetWidth + ( document.documentElement.clientWidth ? document.documentElement.clientWidth:document.body.clientWidth ) + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft:document.body.scrollLeft ) ) + 'px' );top:expression( ( 0 - jGrowl.offsetHeight + ( document.documentElement.clientHeight ? document.documentElement.clientHeight:document.body.clientHeight ) + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop:document.body.scrollTop ) ) + 'px' )}div.ie6.bottom-left{left:expression( ( 0 + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft:document.body.scrollLeft ) ) + 'px' );top:expression( ( 0 - jGrowl.offsetHeight + ( document.documentElement.clientHeight ? document.documentElement.clientHeight:document.body.clientHeight ) + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop:document.body.scrollTop ) ) + 'px' )}div.ie6.center{left:expression( ( 0 + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft:document.body.scrollLeft ) ) + 'px' );top:expression( ( 0 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop:document.body.scrollTop ) ) + 'px' );width:100%}div.jGrowl{position:absolute}body > div.jGrowl{position:fixed}div.jGrowl.top-left{left:0;top:0}div.jGrowl.top-right{right:0;top:0}div.jGrowl.bottom-left{left:0;bottom:0}div.jGrowl.bottom-right{right:0;bottom:0}div.jGrowl.center{top:0;width:50%;left:25%}div.center div.jGrowl-notification,div.center div.jGrowl-closer{margin-left:auto;margin-right:auto}div.jGrowl div.jGrowl-notification,div.jGrowl div.jGrowl-closer{background-color:#000;opacity:.85;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=85)";filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=85);zoom:1;width:235px;padding:10px;margin-top:5px;margin-bottom:5px;font-family:Tahoma,Arial,Helvetica,sans-serif;font-size:1em;text-align:left;display:none;-moz-border-radius:5px;-webkit-border-radius:5px}div.jGrowl div.jGrowl-notification{min-height:40px}div.jGrowl div.jGrowl-notification,div.jGrowl div.jGrowl-closer{margin:10px}div.jGrowl div.jGrowl-notification div.jGrowl-header{font-weight:bold;font-size:.85em}div.jGrowl div.jGrowl-notification div.jGrowl-close{z-index:99;float:right;font-weight:bold;font-size:1em;cursor:pointer}div.jGrowl div.jGrowl-closer{padding-top:4px;padding-bottom:4px;cursor:pointer;font-size:.9em;font-weight:bold;text-align:center}@media print{div.jGrowl{display:none}}

.keyboard {
	position: absolute; width: 135px; height: 180px; right: 0px; bottom: 0px;
}

.keyboard li {
	background-color: #ddd;
	width: 40px;
	height: 40px;
	margin-right: 5px;
	margin-bottom: 5px;
	float: right;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
    -moz-user-select: none;
    -khtml-user-select: none;
	cursor: pointer;
}

.keyboard li:hover
{
	background-color: #ccc;
}

.keyboard li:active
{
	background-color: #bbb;
}