/* Basic font settings */
body,table,td {
    font-family: Verdana, Helvetica, Arial, sans-serif;
    font-size: 11px;
    color:#000000;
}

/* Normal links */
a:link {text-decoration: underline; color: #000000;}
a:visited {text-decoration: underline; color: #222222;}
a:hover {text-decoration: underline; color: #FFFFFF; background-color: #222222;}

/* Menu links (doesn't perform an action */
a.Menu:before { content: ""; }
a.Menu:after { content: ""; }
a.Menu:link, a.Menu:visited {    text-decoration: none; color: #0000FF;    }
a.Menu:hover { text-decoration: underline; color: #0000FF; }

.MenuActive:before { content: ""; }
.MenuActive:after { content: ""; }
.MenuActive {font-weight: bold;}
a.MenuActive:link, a.MenuActive:visited {    text-decoration: none; color: #0000FF;    }
a.MenuActive:hover { text-decoration: underline; color: #0000FF; }

/* "Action" links, changes something, :before and :after are not supported by IE 6*/
a.Action:link, a.Action:visited {text-decoration: none; color: #0000FF;}
a.Action:hover {text-decoration: underline; color: #0000FF;}

/* More body details */
body {
    border: 0px;
    padding: 0px;
    margin: 0px;
    background-color: #99aabb;
}

/* Layout classes */
div.HeaderBlock div.PageTitle {
    float: left;
    clear: left;
}

div.HeaderBlock div.VendorLogo {
    float: right;
    clear: right;
    margin: 4px;
}

div.HeaderBlock div.SearchBar {
    float: right;
    clear: right;
}
div.HeaderBlock div.support_number {
    float: left;
    clear: left;
}
div.HeaderBlock div.Clock {
    float: left;
    clear: left;
}

div.HeaderBlock div.UserInfo {
    float: left;
    clear: left;
}

div.HeaderBlock div.Navigation {
    float: right;
    clear: right;
}

div.HeaderBlock .End {
    clear: both;
}

div.language {
    float: right;
    clear: right;
}

.expand { position:absolute; right:0; left:0; top:0; bottom:0 }

.remove_cross { float:right; background-color:#ccc; display:block; width:20px; text-align:center; }
.remove_cross:hover { background-color:red; }
.remove_channel:hover { color: #FFFFFF; background-color: red; }

/* license footer */
p.footer {
    font-size: 8px;
    text-align: center;
    margin-bottom: 0;
}

/*
 * Form classes
 */

form { display: inline; }

input, select, textarea
{
    background-color: #FFFFFF;
    color: #000000;
    border: #000000 2px inset;
    font-family: Verdana, Helvetica, Arial, sans-serif;
    font-size: 10px;
    padding-left: 3px;
    padding-right: 3px;
    margin: 2px;
}

select
{
    padding: 0px;
}

input[type="submit"] {
    border: #000000 2px outset;
}

input[type="submit"]:active {
    border: #000000 2px inset;
}

input[type="button"]:hover,
input[type="submit"]:hover {
    background-color: #AAAAAA; /* doesn't work on IE 5 */
}
input[disabled="disabled"] {
    background-color: #777777;
}

.FormButtonRight { float: right; }
.FormButtonLeft { float: left; }

/*
 * Headers
 */

/* Page header */
h1 {
        font-size: 17px;
        font-family: Verdana;
        font-weight: bold;
        margin-bottom: 5px;
        margin-top: 0px;
        text-align: left;
}

/* Section header */
h2 {
        font-size: 14px;
        font-family: Verdana;
        font-weight: bold;
        margin-bottom: 3px;
        margin-top: 5px;
}

/* subsection header */
h3 {
        font-size: 12px;
        font-family: Verdana;
        font-weight: normal;
        margin-bottom: 5px;
}

/*
 * Text markup classes
 */

.ErrorMessage { COLOR: red; }
.LoginErrorMessage { COLOR: white; }

.Description, .repeatindicator, .gadgetbody, .gadgetlabel, .label {
    font-size: 9px;
    color: #101010;
}

.gadgetbody, .gadgetlabel, .label {
    text-align: center;
    vertical-align: middle;
    border: 0px;
    margin: 0px;
    padding: 0px;
}

.via_http { color: #e00; font-weight: bold }

.Warning { COLOR: #FF0000; }
a.Warning:link { COLOR: #DD0000; }
a.Warning:visited { COLOR: #DD0000; }
a.Warning:hover { COLOR: #DD0000; }

/* Important information */
.Info
{
    font-weight: bold;
    text-align: right;
}

/*
 * Layout classes
 */

 /* Alter rails button_to() helper to let us add html to the right of button */
 .button-to div { display: inline; }

 /* Tooltip mark: Blue filled circle. */
 .tooltip-mark {
    position: relative;
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    margin-left: 0.5em;
    background-color: rgba(0, 0, 0, 0.2);
    color:#fff;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    line-height: 16px;
    cursor: default;
}

/* Used for layout of gadget parts. */
.Gadget
{
    margin: 1px;
    padding: 0px;
}

.LoginForm
{
    margin-left: auto;
    margin-right: auto;
    margin-top: 0px;
    margin-bottom: 0px;
    background-color: #9988aa;
    border-bottom: #000000 1px solid;
    border-left: #000000 1px solid;
    border-right: #000000 1px solid;
    border-top: #000000 1px solid;
}

.NoMargin {margin: 0px;}

.HorizontalExpander {
    display: inline;
}

.DocBlock, .HeaderBlock, .FooterBlock, .BodyBlock, .WideBlock, .LogBlock,
    .notice, .warning, .debug
{
    clear: both;
    margin-left: auto;
    margin-right: auto;
    background-color: #bbccdd;
    border-bottom: #000000 1px solid;
    border-left: #000000 1px solid;
    border-right: #000000 1px solid;
    border-top: #000000 1px solid;
    width: 850px;
    padding: 4px;
    margin-top: 4px;
    margin-bottom: 4px;
}

.notice, .warning, .debug { padding: 5px; }
.warning { color: red; }

.ErrorBlock {
    width: 300px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 100px;
}

.LogoutBlock {
    width: 400px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 100px;
    border: black 1px solid;
    background-color: #bbccdd;
    padding: 20px;
}

.DocBlock, .BodyBlock {
    padding-top: 10px;
    padding-bottom: 10px;
/*    overflow: hidden; */
}

.DocBlock {
    font-family: serif;
    font-size: 12px;
    color:#000000;
}
.DocBlock .Header, .DocBlock .Header2, .DocBlock .Header3 {padding-top: 5px;}
.DocBlock .Text {padding-left: 10px; padding-top: 2px;}

.WideBlock, .LogBlock {
    width: 98%;
    padding-left: 1%;
    padding-right: 1%;
}

/* DataTable is for lists (horizontal headers) */
Table.DataTable {
    width: 100%;
    margin-bottom: 5px;
    margin-top: 0px;
    border-collapse: collapse;
}

Table.DataTable TD { padding: 2px; border: black 1px solid;}
Table.DataTable TH, .header { background-color: #FFFFFF; text-align: center; font-weight:bold; border: black 1px solid; background-clip: padding-box; }
Table.DataTable .intercom_header { background-color:#444; text-align:center; font-weight:bold; border:black 1px solid; color:white;}
Table.DataTable TR { background-color: #CCCCCC; }
Table.DataTable TR.DataTableRow_Odd, Table.DataTable TR.Odd { background-color: #DDCCCC; }
Table.DataTable TR.DataTableRow_Even, Table.DataTable TR.Even { background-color: #CCCCDD; }
Table.DataTable TD.Divider { padding: 0px; }
Table.DataTable TR.Divider {
    height: 3px;
    background-color: #BBCCDD;
}
Table.DataTable td.transparent-cell { background-color:#bbccdd; border:0; }

/* InfoTable is for mixed info (like a detail view) (vertical headers) */

Table.InfoTable {
    margin-bottom: 5px;
    margin-top: 0px;
    border-collapse: collapse;
}
Table.InfoTable TR { background-color: #CCDDCC; }
Table.InfoTable TD { padding: 2px 20px 2px 20px; border: black 1px solid; }
Table.InfoTable TH { padding: 2px 20px 2px 20px; border: black 1px solid; background-color: #FFFFFF; text-align: right;}


Table TR.ButtonRight, Table TD.ButtonRight {
    text-align: right; border: 0px; background-color: transparent;
}

.TableSubmitter {
    width: 95%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    padding-top: 2px;
}

.Outlined {
    border: #a0b0c0 1px solid;
}

.StreamOk, .StreamBad, .StreamUnknown, .StreamMinor, .StreamCritical, .StreamUnconfigured, .StreamTimeout, .StreamFuture, .StreamOutputError
{
    text-align: center;
    margin: 0px;
    padding: 0px;
    background-color: #BBCCDD;
    border-top: #222222 1px solid;
    border-bottom: #222222 1px solid;
    border-left: #222222 1px solid;
    border-right: #222222 0px solid;
    font-size: 1px;
}

.StreamTimeout
{
    background-image: url("../images/stripes.gif");
    background-repeat: repeat;
    background-color: #AA2020;
}

.StreamOk {
    background-color: #30CC30;
}

.StreamMinor {
    background-color: #E0E030;
}

.StreamCritical {
    background-color: #fc8700;
}

.StreamBad {
    background-color: #CC3030;
}

.StreamUnknown {
    background-color: #555555;
}

.StreamOutputError {
    background-color: #bb4df9;
}

.StreamContainer
{
    margin-top: 2px;
    font-size: 1px;
    position: relative;
}

/* This doesn't work in IE 6 */
.StreamContainer > *:first-child
{
    padding-left: 1px;
    border-left: black 0px solid;
}

.StreamBoxContainer *
{
    border: #222222 1px solid;
}

/* This doesn't work in IE 6 */
/*.StreamContainer *:hover { background-color: #888888 }*/

/* */

.ScheduleTable {
}

.ScheduleTime, .ScheduleSelect,
.ScheduleItem0, .ScheduleItem1, .ScheduleItem2, .ScheduleItem3,
.FreeScheduleItem, .ScheduleItem_on, .ScheduleItem_off {
    vertical-align: top;
    text-align: center;
    margin: 0px;
    padding: 0px;
    background-color: #BBCCDD;
}

.ScheduleTime {
    PADDING: 1px;
}

.ScheduleItem0 {
    BACKGROUND-COLOR: #EECCCC;
    BORDER: #604040 1px SOLID;
}

.ScheduleItem1 {
    BACKGROUND-COLOR: #CCCCEE;
    BORDER: #000000 1px SOLID;
}

.ScheduleItem2 {
    BACKGROUND-COLOR: #CCEECC;
    BORDER: #000000 1px SOLID;
}

.ScheduleItem3 {
    BACKGROUND-COLOR: #DDDDCC;
    BORDER: #000000 1px SOLID;
}

.ScheduleSelect {
    BACKGROUND-COLOR: #AAAAAA;
    BORDER: #000000 1px SOLID;
}

.FreeScheduleItem {
    BACKGROUND-COLOR: #F0F0F0;
    BORDER: #000000 1px SOLID;
}

.ScheduleItem_on {
    background-color: #A0EEA0;
    border: #206020 1px solid;
}

.ScheduleItem_off {
    background-color: #EEA0A0;
    border: #602020 1px solid;
}

.RelayDayRepeat, .RelayDaySingle, .RelayDayOverlap {
/*    width: auto;  */
    height: 6px;
    border-top: #222222 1px solid;
    border-left: #222222 1px solid;
    border-right: #222222 1px solid;
    border-bottom: #222222 0px solid;
}

.RelayDayRepeat { background-color: #CCCCEE; }

.RelayDaySingle {  background-color: #EECCCC; }

.RelayDayOverlap {  background-color: #CCEECC; }

.Compact, .CompactInvisible, .invisible, .ToggleShow, .ToggleHide {
    border: 0px;
    padding: 0px;
    margin: 0px;
}

.CompactInvisible {
    visibility: hidden;
}

.ToggleShow {
    display: inline;
}

.ToggleHide {
    display: none;
}

.repeatindicator {
    position: absolute;
    width: 10px;
    height: 10px;
    border: #000000 1px solid;
    background-color: #FFFFFF;
    display: inline;
}

/*
 * Specific layout id:s
 */

#GraphContainer {
    margin-top: 10px;
    margin-bottom: 10px;
    overflow: hidden;
}

#scroll_container {
    text-align: center;
}
#monitor_scroll_left {
    display: inline;
}
#monitor_scroll_right {
    display: inline;
}
#monitor_interval_indicator {
    display: inline;
}

/* Container for zoom fields */
div.zoomfieldcontainer {
    position: absolute;
    height: 0px;
    z-index: 1;
}

/* Zoom selection indicator */
div.zoomfield {
    margin: 0px;
    margin-top: 1px;
    padding-top: 2px;
    padding-bottom: 2px;
    padding-left: 0px;
    padding-right: 0px;
    top: -2px;
    border: 0px black solid;
    position: absolute;
    display: block;
    z-index: 3;
    visibility: visible;
}

/*
 * Node list on graph
 */
.nodename {
    font-size: 14px;
    font-weight: bold;
}
.nodeip {
    margin-left: 10px;
    font-size: 9px;
    color: #101010;
}
.alarm {
    margin-left: 10px;
    font-size: 12px;
    font-weight: bold;
}

/* hover doesn't work with IE
div.zoomfield:hover {
    border: 1px black solid;
}
*/

.sensor_loading{background:url('../images/sensor_loading.png') no-repeat center;}

/* Those two tries to workaround a layout bug(?) in Mozilla 1.7.5
   & Firefox 1.0
 */
#viewform { position: absolute; }
#viewformbugfix { height: 40px;    width: 100%; }

/* RoR classes (should probably be in separate file) */
.fieldWithErrors { padding: 1px; border: 3px solid red; }
.errorExplanation { border: 4px solid red; background-color: #CCDDDD; padding: 4px;}

/* Hidden submit button to override default submit action */
input.hidden_submit {
    width: 0px;
    height: 0px;
    border-width: 0px;
    margin: 0px;
    padding: 0px;
    background: none;
}
input[type="submit"].hidden_submit {
    border-width: 0px;
}

/* Sortable tables */
table.sortable a.sortheader {
    font-weight: bold;
    text-decoration: none;
    display: block;
}
table.sortable span.sortarrow {
    color: black;
    text-decoration: none;
}

/* Remote user mapping, /issnode/edit */
.remote_user_mapping_hover {
    background: #ffff66 !important;
}
.remote_control_users {
  float: left;
  margin-right: 10px;
  width: 400px;
}
.remote_control_users ul {
  min-height: 30px;
  list-style-type: none;
  margin: 0;
  padding: 5px 0 0 0;
  background: #99aabb;
  border: black 1px solid;
  border-radius: 5px;
}
.remote_control_users li {
  margin: 0 5px 5px 5px;
  padding: 5px;
  color: black;
  cursor: pointer;
}
.remote_control_users .name { font-weight: bold; }
.remote_control_users .login { font-weight: normal; }
.remote_control_users li.inactive { text-decoration: line-through; }

/* Unit stream info */
#tablerow_streams li { margin-bottom: 0.3em; }
#tablerow_streams td > ul > li ul > li { margin-bottom: 0; }

/* hovertable lib. Set border because firefox don't handle border-collapse with background-color. */
.hover, .hovercell, .hoverrow { background-color:#abc; border:1px solid black !important;}
.transparent-cell { border:none !important; }

/* special classes that can be added for special functionality */
.nowrap { white-space:nowrap }

.cell_warning {
    background-color: #ee4;
}
.cell_error {
    background-color: #e44;
}

/* Currently used in intercom table */
.rect { position:absolute; width: 10px; top:1px; left:1px; bottom:1px; }
.link_bgc     { background-color:black; }
.receiver_bgc { background-color:#5bb370; }
.router_bgc   { background-color:#5b9fd7; }
.rect_text    { position:relative; margin-left:20px; }

/* TODO: IE resets TD height to font height.
   Something like below could be used for cross-browser compatibility.
Add classes to the td cell, instead of a div inside td.
.link_bgc     { position:relative; background: #ffffff url(../images/10x1_black.png) repeat-y; }
.receiver_bgc { position:relative; background: #ffffff url(../images/10x1_green.png) repeat-y; }
.router_bgc   { position:relative; background: #ffffff url(../images/10x1_blue.png) repeat-y; }
.rect_text    { position:relative; margin-left:10px; }
*/

.option_border { 
    border-left: 7px solid;
    margin: 1px;
}
.link_option     { border-color:black; }
.receiver_option { border-color:#5bb370; }
.router_option   { border-color:#5b9fd7; }

.header a { position:absolute; top:0; right:0; }


/*
 * System settings page
*/
#group_units_form > * { display: inline-block; }
#group_units_form > div > * { display: block; }


/*
 * jQuery themes override 
 */
.ui-widget-shadow {
	-webkit-box-shadow: 5px 5px 5px #000000;
	box-shadow: 5px 5px 5px #000000;
}

/* Limit list in height, and add vertical scrollbar. */
.ui-autocomplete {
    max-height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
    margin-right: 20px;
}
/* Some quick-fixes for seen problems. */
.ui-autocomplete li * {
    padding-right: 30px !important; /* Add room for scrollbar (problem only seen in chrome) */
}
/* Specials for quick-search bar */
.ui-autocomplete li a {
    pointer-events: none; /* Remove standard link hover, which interfers with autocomplete */
}

/* Borrow CSS from wiki for tooltip */
.ui-tooltip-content pre {
    font-family: monospace,Courier;
    padding: 1em;
    border: 1px dashed #2f6fab;
    color: black;
    background-color: #f9f9f9;
    white-space: pre-wrap;
}