/*
+------------------------------------------------------------------+
|             ____ _               _        __  __ _  __           |
|            / ___| |__   ___  ___| | __   |  \/  | |/ /           |
|           | |   | '_ \ / _ \/ __| |/ /   | |\/| | ' /            |
|           | |___| | | |  __/ (__|   <    | |  | | . \            |
|            \____|_| |_|\___|\___|_|\_\___|_|  |_|_|\_\           |
|                                                                  |
| Copyright Mathias Kettner 2012             mk@mathias-kettner.de |
+------------------------------------------------------------------+

This file is part of Check_MK.
The official homepage is at http://mathias-kettner.de/check_mk.

check_mk is free software;  you can redistribute it and/or modify it
under the  terms of the  GNU General Public License  as published by
the Free Software Foundation in version 2.  check_mk is  distributed
in the hope that it will be useful, but WITHOUT ANY WARRANTY;  with-
out even the implied warranty of  MERCHANTABILITY  or  FITNESS FOR A
PARTICULAR PURPOSE. See the  GNU General Public License for more de-
ails.  You should have  received  a copy of the  GNU  General Public
License along with GNU Make; see the file  COPYING.  If  not,  write
to the Free Software Foundation, Inc., 51 Franklin St,  Fifth Floor,
Boston, MA 02110-1301 USA.

*/

/* Styles used in all Multisite pages, for example in the
   status GUI, in WATO pages and in "Add snapin". These
   styles are not used in the sidebar and in Mobile. */

/*-------------------------------------------------------------------------.
|                   ____                           _                       |
|                  / ___| ___ _ __   ___ _ __ __ _| |                      |
|                 | |  _ / _ \ '_ \ / _ \ '__/ _` | |                      |
|                 | |_| |  __/ | | |  __/ | | (_| | |                      |
|                  \____|\___|_| |_|\___|_|  \__,_|_|                      |
|                                                                          |
+--------------------------------------------------------------------------+
| General styles used in the pages                                         |
'-------------------------------------------------------------------------*/

h3 {
    color: white;
    margin-bottom: 2px;
    font-size: 12pt;
    font-weight: normal;
}

/*-------------------------------------------------------------------------.
|                                       _                                  |
|                       _ __ ___   __ _(_)_ __                             |
|                      | '_ ` _ \ / _` | | '_ \                            |
|                      | | | | | | (_| | | | | |                           |
|                      |_| |_| |_|\__,_|_|_| |_|                           |
|                                                                          |
+--------------------------------------------------------------------------+
| Styles for the main frame (its body, header, footer, etc.)               |
'-------------------------------------------------------------------------*/

body.main {
    background-image: url("images/contentframe_background.jpg");
    padding: 10px 10px 0 10px;
    background-attachment: fixed;
    background-repeat: repeat;
    font-family: arial, helvetica, sans-serif;
    font-size: 9pt;
    margin: 0;
    /* avoid white background shining through in case of unaligned image in zoomed browser view */
    background-color: #426D8A;
}

/* Special mode for creating screenshots of single elements. Omit background.
   This can be selected in multisite.mk with screenshotmode = True or screenshotmode=1
   on the URL */
body.main.screenshotmode {
    background-image: url("");
    background-color: white; /* #5893af; */
}

body.main div.main {
    padding-left: 10px;
    border-left: 1px solid red;
}

/* The content page header containing the title, user, date */
body.main table.header {
    width: 100%;
    max-width: 100%;
    margin: 0 0 5px 0;
    padding: 0px 0px 10px 0px;
    border-spacing: 0px;
    color: #fff;
}

body.main table.header td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    vertical-align: bottom;
    color: #fff;
}
body.main table.header td.heading {
    font-size: 15pt;
    padding-left: 0px;
    height: 31px;
    max-width: 100px;
}

body.main table.header td.heading img {
    height: 24px;
    width: 24px;
    margin-right: 3px;
    vertical-align: middle;
}

body.main table.header td.heading a,
body.main table.header td.heading a:hover {
    text-decoration: none;
}

body.main table.header td.right {
    text-align: right;
    font-size: 10pt;
    width: 1%;
}


body.main table.header td.right img {
    width: 19px;
    height: 19px;
    vertical-align: bottom;
}

body.main table.header td.right a.head_logo img {
    width: 23px;
    height: 23px;
    margin: 0 0 1px 5px;
}

body.main table.header td.right a.head_logo img:hover {
    opacity: 0.5;
    filter: alpha(opacity=50);
}

body.main hr.header {
    background-color: #fff;
    height: 1px;
    position: absolute;
    width: 100%;
    left: 0px;
    padding: 0;
    margin: 0;
    border: 0;
    top: 42px;
    /* Needed for older IE versions */
    color: #fff;
}

#headinfo {
  margin-right: 10px;
}

body.main div.urldebug {
    color: white;
    width: 100%;
    font-size: 8pt;
    font-family: monospace;
    position: relative;
    top: -14px;
}


/* The content page footer containing optional status icons */
body.main table.footer {
    margin-top: 10px;
    width: 100%;
    color: #fff;
}

body.main table.footer td.left   { text-align: left; }
body.main table.footer td.middle { text-align: center; }
body.main table.footer td.right  { text-align: right; }
body.main table.footer a { color: #246; }

body.main table.footer img.statusicon,
body.main table.footer a.statusicon img {
    width: 16px;
    height: 16px;
}

div#foot_refresh, div#foot_refresh_time {
    display: inline-block;
}

#reload_pause {
    display: block;
    position: fixed;
    right: 20px;
    top: 20px;
    width: 90px;
    height: 90px;
    background-color: #111;
    opacity: 0.8;
    filter: alpha(opacity=80); /* For IE8 and earlier */
    border-radius: 5px;
    padding: 10px;
    text-decoration: none;
    z-index: 40;
    text-align: center;
}

.pause_bar {
    display: inline-block;
    width: 20px;
    height: 60px;
    margin-top: 5px;
    margin-bottom: 5px;
    background-color: #fff;
    opacity: 0.9;
    filter: alpha(opacity=90); /* For IE8 and earlier */
    border-radius: 5px;
}

.pause_bar.p1 {
    margin-left: 15px;
    margin-right: 5px;
}

.pause_bar.p2 {
    margin-left: 5px;
    margin-right: 15px;
}

#reload_pause_counter {
    font-weight: bold;
    color: #fff;
    text-align: center;
    font-size: 120%;
    text-decoration: none;
}

#reload_pause_counter:hover {
    text-decoration: underline;
}


/*-------------------------------------------------------------------------.
|         ____            _            _   _ _       _                     |
|        / ___|___  _ __ | |_ _____  _| |_| (_)_ __ | | _____              |
|       | |   / _ \| '_ \| __/ _ \ \/ / __| | | '_ \| |/ / __|             |
|       | |__| (_) | | | | ||  __/>  <| |_| | | | | |   <\__ \             |
|        \____\___/|_| |_|\__\___/_/\_\\__|_|_|_| |_|_|\_\___/             |
|                                                                          |
+--------------------------------------------------------------------------+
| The blue buttons at the top of the screen used for navigation.           |
'-------------------------------------------------------------------------*/

table.contextlinks {
    margin-bottom: 10px;
}

div.contextlink {
    float: left;
    overflow: hidden;
    white-space: nowrap;
    text-align: center;
    vertical-align: middle;
    width: 158px;
    height: 25px;
    background-image: url("images/contextlink.png");
    background-repeat: no-repeat;
    background-position: center center;
    position: relative;
    left: -4px;
}

div.contextlink.hot {
    background-image: url("images/contextlink_hot.png");
}
div.contextlink.short {
    background-image: url("images/contextlink_short.png");
    width: 38px;
}
div.contextlink.short a {
    width: 38px;
}


div.contextlink a {
    padding-top: 4px;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    display: block;
    width: 158px;
    height: 25px;
    text-overflow: ellipsis;
    max-width: 158px;
    overflow: hidden;
}

/* Icon image in a context button */
div.contextlink img {
   width: 18px;
   height: 18px;
   vertical-align: middle;
   position: relative;
   top: -2px;
   margin-right: 5px;
}

/*-------------------------------------------------------------------------.
|            ____        _          _____     _     _                      |
|           |  _ \  __ _| |_ __ _  |_   _|_ _| |__ | | ___                 |
|           | | | |/ _` | __/ _` |   | |/ _` | '_ \| |/ _ \                |
|           | |_| | (_| | || (_| |   | | (_| | |_) | |  __/                |
|           |____/ \__,_|\__\__,_|   |_|\__,_|_.__/|_|\___|                |
|                                                                          |
+--------------------------------------------------------------------------+
| Styles for table that should rows of data. Such tables are used in the   |
| Status-GUI, in WATO and in custom modules that use similar tables.       |
'-------------------------------------------------------------------------*/

table.data {
    border-spacing: 0px;
    margin: 0;
    padding: 0;
    border-collapse: collapse;
    empty-cells: show;
    width: 100%;
}

table.data {
    color: black;
}

table.data .checkbox_hover {
    background-image: url("images/checkbox_hover_bg.png");
    background-attachment: fixed;
}


table.data th {
    font-weight: normal;
    border-right: 1px solid #ccc;
    background-color: #999;
    padding: 2px 2px;
    text-align: center;
    color: #fff;
    vertical-align: middle;
}
table.data th:last-child {
    border-right-style: none;
}

table.data td.buttons {
    white-space: nowrap;
    width: 1%;
}

table.data td.count {
    text-align: right;
    font-weight: bold;
    font-family: sans-serif;
}

table.data td.number {
    text-align: right;
    white-space: nowrap;
}

table.data td.nobr {
    white-space: nowrap;
}

table.data td.center {
    text-align: center;
}

table.data td.unused {
    color: #888;
    text-shadow: 1px 1px 0.5px #fff;
}

td.narrow {
    width: 10px;
}
td.wide {
    width: 100%;
}

table.data.oddeven > tbody > tr:nth-child(odd) {
    background-color: #eee;
}

table.data.oddeven > tbody > tr:nth-child(even) {
    background-color: #ddd;
}

table.data.oddeven > tbody > tr.groupheader {
    background-color: transparent;
}

/* Two-lined header, for example in WATO: ChangeLog->Site Status */
table.data tr.dualheader th {
    border-bottom: 1px solid #ccc;
}


/* Table header links (For sorting) */
table.data th.sort {
    /* text-decoration: underline; */
}

table.data th.sort:hover {
    background-color: #B2B2B2;
    cursor: pointer;
}

table.data th.sort:hover {
    color: #000;
}

table.data th.asc {
    /* color: #CBDCF2; */
}

table.data th.desc {
    /* color: #CBDCF2; */
}

table.data th.tablegap {
    background-color: transparent; /* none; */
}

table.data tr.data > td {
    border-right: 1px solid #ccc;
    padding: 2px 4px;
    height: 22px;
    vertical-align: middle;
}
table.data tr.data > td:last-child {
    border-right-style: none;
}

table.data a {
    text-decoration: none;
    color: black;
}
table.data a:hover {
    text-decoration: underline;
}

table.data tr.data td.checkbox {
    width: 20px;
    text-align: center;
}
table.data tr.data td.checkbox input {
    margin: 0px;
}

table.data th input.checkgroup {
    height: 12px;
    width: 16px;
    padding: 0;
    margin: 0;
    text-align: center;
    vertical-align: middle;
    font-size: 5pt;
}

table.data td.host {
    border-style: none;
    font-weight: bold;
    padding-top: 1ex;
    padding-left: 0px;
    font-size: 120%;
}

/* Link to object in the classic nagios GUI */
table.data td.singleicon img {
    margin: 0;
    padding: 0;
}
table.data td.singleicon {
    width: 16px;
    text-align: center;
}

table.data tr.actions td {
    padding: 5px;
}
table.data tr.actions div {
    display: inline-block;
}
table.data tr.actions td div.search input[type="text"] {
    margin-right: 2px;
}
table.data tr.actions.no_match td {
    padding: 5px;
}
table.data tr th {
    vertical-align: baseline;
}

table.data tr div.toggle_actions {
    position: relative;
    padding-left: 14px;
}

table.data tr a.toggle_actions {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
}
table.data tr th a.toggle_actions img {
    vertical-align: top;
    width: 12px;
    height: 13px;
    padding: 0;
    position: relative;
    top: 2px;
}

/* Group header used in table, box and tiled layout */
table.groupheader {
    margin: 0px;
    border: 0px;
    padding: 6px 0px 3px 0px;
}

table.data tr.groupheader,
table.data tr.groupheader.td {
    background-color: transparent;
}

tr.groupheader td {
    border-style: none;
    margin: 0px;
    padding-top: 2px;
    font-weight: bold;
    color: #fff;
}
tr.groupheader a {
    color: #fff;
    text-decoration: none;
}

tr.groupheader a:hover {
    text-decoration: underline;
}

/* state in group header must have fixed width */
.groupheader td.state {
    border: 1px solid #000000;
    border-radius: 5px;
    box-shadow: 1px 1px 2px #444444;
    padding: 2px 5px;
    width: 50px;
}

img.iconbutton {
    width: 20px;
    height: 20px;
    padding: 0px 2px;
}


.wato a.checkbox img.iconbutton {
    width: 60px;
    height: 16px;
}

img.iconbutton:hover {
    opacity: 0.5;
    filter: alpha(opacity=50); /* For IE8 and earlier */
}

/* Table with captions on the left side. Used e.g. for man pages and werks */

table.data.headerleft th {
    text-align: left;
    padding: 4px 5px;
}
table.data.headerleft td {
    padding: 4px 5px;
}

table.data.headerleft > tbody > tr:nth-child(odd) > th {
    background-color: #73a1b4;
}

table.data.headerleft > tbody > tr:nth-child(even) > th {
    background-color: #7fadc0;
}

table.data.headerleft > tbody > tr:nth-child(odd) > td {
    background-color: #ddd;
}
table.data.headerleft > tbody > tr:nth-child(even) > td {
    background-color: #eee;
}


/*-------------------------------------------------------------------------.
|                    _____                                                 |
|                   |  ___|__  _ __ _ __ ___  ___                          |
|                   | |_ / _ \| '__| '_ ` _ \/ __|                         |
|                   |  _| (_) | |  | | | | | \__ \                         |
|                   |_|  \___/|_|  |_| |_| |_|___/                         |
|                                                                          |
+--------------------------------------------------------------------------+
| Input forms (e.g. Filters, Commands, WATO)                               |
'-------------------------------------------------------------------------*/

input[type=text], textarea {
    box-shadow: 0.1px 1.2px 1.8px 0 #888 inset;
    position: relative;
}

input[type=password] {
    box-shadow: 0.1px 1.2px 1.8px 0 #800 inset;
}
input[type=text], input[type=password] {
    height: 18px;
    padding: 3px 3px 1px 3px;
    vertical-align: middle;
}
select {
    height: 24px;
    box-shadow: 0.1px 1.2px 1.8px 0 #888 inset;
    vertical-align: middle;
    padding-top: 4px;

}

select[multiple=multiple] {
    height: auto;
}

input[type=radio] {
    margin-left: 0px;
}
input[type=checkbox] {
    margin-left: 0px;
}


h2.formcaption {
  font-size: 100%;
  margin-bottom: 0px;
}

table.form {
    background-image: url("images/form_background.png");
    background-repeat: repeat;
    border-collapse: collapse;
    empty-cells: show;
    border-spacing: 0px;
    margin: 0px 10px 10px 0px;
    border-width: 1px;
    border-style: none none solid solid;
    border-color: #2f5f74;
}
/* Sorry for the mess here. It is due to using foldable_containter
   within a form table (currently only in WATO in the host and
   folder properties) */

table.form.nomargin {
    margin: 0;
    border-bottom-style: none;
}
/* table.form.nomargin td.legend,
table.form.nomargin td.content,
table.form.nomargin td.checkbox,
table.form.nomargin td.buttons {
    border-top-style: none;
}*/

table.form.nomargin td.title {
    background-image: url("images/form_background.png");
    background-repeat: repeat;
}

table.form > tbody > tr > td {
    padding: 5px 8px;
    color: #000;
    border-width: 1px;
    border-color: #2f5f73;
    border-style: solid solid none none;
}

table.form img.toggleheader {
    width: 20px;
    height: 20px;
    cursor: auto;
    padding-right: 5px;
    vertical-align: middle;
}
table.form img.toggleheader.hover {
    cursor: pointer;
}


/* Bottom row with action buttons, right justified */
table.form td.buttons {
    color: #274750;
}

/* Inter-heading row over complete width */
table.form td.title {
    border-right-style: solid;
    font-weight: bold;
}

table.form td.legend.border {
/*    border-right-style: solid; */
}
table.form td.hilite {
    background-image: url("images/form_background.png");
    background-repeat: repeat;
    margin: 10px;
}

table.form td.lgend.button {
    text-align: right;
/*    border-right: 1px solid #fff; */
}

td.content hr {
    height: 1px;
    border-style: none;
    background-image: url("images/form_background.png");
    background-repeat: repeat;
}

td.legend {
    width: 150px;
}

input.tab#results, input.tabactive#results { background-color: #fe6; }

/* input elements in forms */

table.form input.number {
    text-align: right;
}

div.textinputlegend {
    font-size: 80%;
}

input.date, input.time {
    font-family: monospace;
}

.inputerror input, .inputerror textarea, .inputerror span.checkbox, .inputerror > select {
    background-color: #f84;
}

.inputerror span.checkbox {
    display: block;
    float: left;
    height: 17px;
    margin-right: 2px;
}

.inputerror span.checkbox input {
    margin: 1px;
}

span.checkbox {
    white-space: nowrap;
}


/* Next-Generation forms */
table.nform {
    border-spacing: 0px;
    /* border-collapse: collapse; */
    margin: 0;
    padding: 0;
    empty-cells: show;
    width: 100%;
    border: 1px solid green;
    border-radius: 5px;
    box-shadow: 0px 0px 2px #000;
    margin-bottom: 10px;
    background-image: url("images/nform_background.png");
    background-repeat: repeat;
    border-color: #86A9B8 #22404D #22414D #86A9B8;
    border-width: 1px;
    border-style: solid;
}

body.main.screenshotmode table.nform {
    background-color: #508aa1;
    background-image: none;
}

table.nform tr.closed {
    display: none;
}

table.nform tr.heading td {
    color: white;
}
table.nform tr.heading > td {
    border-radius: 5px 5px 0px 0px;
    background-image: url("images/white_20percent.png");
    background-repeat: repeat;
    height: 20px;
    vertical-align: middle;
    padding-left: 10px;
}
table.nform tr.heading > td:hover {
    background-image: url("images/white_20percent.png");
}

table.nform > tbody > tr td {
    color: black;
}

table.nform > tbody > tr > td {
    vertical-align: middle;
    /* height: 15px; */
}

table.nform > tbody > tr > td.simple {
   vertical-align: top;
   height: 18px;
}

table.nform td.legend {
    text-align: left;
    /* font-weight: bold; */
    width: 240px;
    padding-right: 8px;
    vertical-align: top;
    padding-top: 8px;
    padding-left: 10px;
}
table.nform td.legend.simple {
    padding-top: 5px;
}

table.nform.narrow td.legend {
    height: 18px;
}

table.nform.narrow td.content {
    height: 18px;
    padding-bottom: 2px;
}

table.nform td.legend div.title {
    float: left;
    overflow: hidden;
    white-space: nowrap;
    max-width: 240px;
}
table.nform td.legend div.title.withcheckbox {
    max-width: 210px;
    margin-right: 6px;
}
table.nform .dots {
    color: #444;
    margin-left: 5px;
}
table.nform td.legend div.checkbox {
    float: left;
}

table.nform td.content {
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
}
table.nform td.content.simple {
    padding-bottom: 0px;
}

table.nform td.buttons {
}

table.nform tr.top td {
    height: 6px;
}

table.nform tr.bottom td {
    height: 5px;
}

/*-------------------------------------------------------------------------.
|                     _        _   _                                       |
|                    / \   ___| |_(_) ___  _ __  ___                       |
|                   / _ \ / __| __| |/ _ \| '_ \/ __|                      |
|                  / ___ \ (__| |_| | (_) | | | \__ \                      |
|                 /_/   \_\___|\__|_|\___/|_| |_|___/                      |
|                                                                          |
+--------------------------------------------------------------------------+
| Confirmation dialogs, success and error messages when performing actions |
'-------------------------------------------------------------------------*/
div.really, div.success, div.error, div.message, div.warning {
    margin: 2em 0em;
    border-radius: 1ex;
    padding: 1em 2em;
    box-shadow: 0 0 3px #444;
    /* border-width: 2px;
    border-style: solid;*/
}

div.message {
    color: black;
}

div.really h1, div.success h1, div.error h1, div.message h1, div.warning h1 {
     font-size: 12pt;
     font-weight: bold;
     margin-bottom: 5px;
     color: white;
     margin-left: 0px;
}

div.really, div.success {
    color: black;
}

form.confirm {
    margin-top: 8px;
    position: relative;
    left: -1px;
}

div.togglebutton {
    cursor: pointer;
    width: 30px;
    height: 23px;
    padding-top: 2px;
    padding-right: 0px;
    position: relative;
    top: 0px;
    left: -2px;
    margin: 0px 0px 0px -4px;
    float: left;
    background-repeat: no-repeat;
    background-position: 1px -1px;
}

div.togglebutton.off {
    cursor: auto;
}

div.togglebutton.down {
    top: -1px;
    left: -3px;
}
div.togglebutton.checkbox.down {
    top: 0px;
    left: -2px;
}

div.togglebutton img {
    width: 20px;
    height: 20px;
    position: relative;
    left: 5px;
}

div.togglebutton.down img {
    top: 1px;
    left: 7px;
}

div.togglebutton.checkbox.down img {
    top: 1px;
    left: 5px;
}

div.togglebutton.checkbox img {
    left: 4px;
}

div.togglebutton         { background-image: url("images/togglebutton_lo.png"); }
div.togglebutton:hover   { background-image: url("images/togglebutton_hi.png"); }
div.togglebutton.down       { background-image: url("images/togglebutton_down_lo.png"); }
div.togglebutton.down:hover { background-image: url("images/togglebutton_down_hi.png"); }
div.togglebutton.off      { opacity: 0.5; filter: alpha(opacity=50); }

div.togglebutton.checkbox         { background-image: url("images/togglebutton_check_lo.png"); }
div.togglebutton.checkbox:hover   { background-image: url("images/togglebutton_check_hi.png"); }
div.togglebutton.checkbox.down       { background-image: url("images/togglebutton_check_down_lo.png"); }
div.togglebutton.checkbox.down:hover { background-image: url("images/togglebutton_check_down_hi.png"); }
div.togglebutton.checkbox.off      { opacity: 0.5; filter: alpha(opacity=50); }

/*-------------------------------------------------------------------------.
|                         _   _      _                                     |
|                        | | | | ___| |_ __                                |
|                        | |_| |/ _ \ | '_ \                               |
|                        |  _  |  __/ | |_) |                              |
|                        |_| |_|\___|_| .__/                               |
|                                     |_|                                  |
+--------------------------------------------------------------------------+
|                                                                          |
'-------------------------------------------------------------------------*/

body.main table.header td.right a#helpbutton img {
    margin: 1px 5px;
}

a#helpbutton.passive {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: gray;
    -webkit-filter: grayscale(1);
}

div.help {
    background-image: url("images/helpbackground.jpg");
    background-color: #FFFFCC;
    border-radius: 5px;
    box-shadow: 0 0 10px #fff;
    margin: 6px 3px 10px 3px;
    padding: 5px;
    font-weight: normal;
    text-align: left;
    color: black;
    display: inline-block;
}

div.help a {
    color: black;
}

div.help a:hover {
    text-decoration: none;
}

table.data div.help {
    box-shadow: 0 0 3px #000;
}

div.help table.help {
    border-collapse: collapse;
    empty-cells: show;
}

div.help table.help td {
    border: 1px solid black;
    vertical-align: top;
}

div.help table.help td.tt {
    font-family: courier, monospace;
}

div.help tt {
    font-family: courier, monospace;
    color: #000099;
}

/*--Popupmenu--------------------------------------------------------------.
|       ____                                                               |
|      |  _ \ ___  _ __  _   _ _ __  _ __ ___   ___ _ __  _   _            |
|      | |_) / _ \| '_ \| | | | '_ \| '_ ` _ \ / _ \ '_ \| | | |           |
|      |  __/ (_) | |_) | |_| | |_) | | | | | |  __/ | | | |_| |           |
|      |_|   \___/| .__/ \__,_| .__/|_| |_| |_|\___|_| |_|\__,_|           |
|                 |_|         |_|                                          |
'-------------------------------------------------------------------------*/

body.main .popup_menu {
    position: absolute;
    top: 15px;
    left: 15px;
    z-index: 50;

    padding: 5px 8px;
    min-width: 300px;

    color: #fff;
    background-color: #508AA1;
    border-width: 1px;
    border-style: solid;
    border-color: #9bc #367 #367 #9bc;
    box-shadow:  0.5px 0.5px 16px #467;
    border-radius: 5px;
}

body.main .popup_menu img {
    width: 12px;
    height: auto;
    vertical-align: bottom;
    margin-right: 3px;
}

body.main .popup_menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

body.main .popup_menu a,
body.main table.footer .popup_menu a,
body.main .popup_menu span {
    display: block;
    padding-top: 1px;
    padding-bottom: 1px;
    text-align: left;
    text-decoration: none;
    color: #fff;
}

body.main .popup_menu span {
    padding-left: 0px;
    font-weight: bold;
    margin-top: 8px;
}

body.main .popup_menu li:first-child span {
    margin-top: 0;
}

body.main .popup_menu a:hover,
body.main table.footer .popup_menu a:hover {
    text-decoration: underline;
}

#popup_menu .icons ul {
    list-style: none;
    height: 21px;
    margin: 0;
    padding: 0;
    border-bottom: 1px solid #e5e5e5;
}

#popup_menu .icons li {
    float: left;
}

#popup_menu .icons li a {
    display: block;
    height: 21px;
    padding: 0 5px;
    line-height: 21px;
    border-right: 1px solid #fff;
}

#popup_menu .icons li a:hover {
    text-decoration: none;
    background-color: #629BB1;
    color: #fff;
}

#popup_menu .icons li.active a {
    border-bottom: 1px solid #508AA1;
    color: #000;
}

#popup_menu .icons div {
    clear: left;
    height: 150px;
    overflow-y: auto;
    padding: 5px;
    width: 312px;
}

#popup_menu .icons a {
    display: inline-block;
}

#popup_menu .icons img.icon {
    width: 20px;
    height: 20px;
}

#popup_menu .icons .image_button {
   float: right;
   margin: 4px;
}

/*--Various----------------------------------------------------------------.
|                __     __         _                                       |
|                \ \   / /_ _ _ __(_) ___  _   _ ___                       |
|                 \ \ / / _` | '__| |/ _ \| | | / __|                      |
|                  \ V / (_| | |  | | (_) | |_| \__ \                      |
|                   \_/ \__,_|_|  |_|\___/ \__,_|___/                      |
|                                                                          |
'-------------------------------------------------------------------------*/

div.keysym {
    text-align: center;
    color: white;
    /* font-style: italic; */
    border-width: 2px;
    border-style: solid;
    border-color: #888 #444 #000 #666;
    border-radius: 4px;
    box-shadow: 0.5px 0.5px 1px #000;
    background-color: #333;
    padding: 2px 5px;
    margin: 0px 1px;
    display: inline-block;
}


/* Contextlinks with embedded keyboard button */
div.contextlink div.keysym {
    background-color: #467;
    border-color: #8ab #245 #134 #79a;
    border-width: 2px;
    padding: 1px 5px;
    font-size: 6pt;
    position: absolute;
    top: 4px;
    right: 5px;
}

div.contextlink.button a {
    width: 135px;
}

div.log_output {
    font-family: monospace, sans-serif;
    box-shadow: 1px 1px 3px #888 inset;
    overflow-x: scroll;
    padding: 5px 5px;
    vertical-align: top;
    background-color: #fff;
    color: black;
    /* below resize option is css3 */
}


/*-------------------------------------------------------------------------.
|         ____       _                                                     |
|        |  _ \  ___| |__  _   _  __ _  __   ____ _ _ __ ___               |
|        | | | |/ _ \ '_ \| | | |/ _` | \ \ / / _` | '__/ __|              |
|        | |_| |  __/ |_) | |_| | (_| |  \ V / (_| | |  \__ \              |
|        |____/ \___|_.__/ \__,_|\__, |   \_/ \__,_|_|  |___/              |
|                                |___/                                     |
+--------------------------------------------------------------------------+
| html.debug_vars() outputs the variables in the current URL.              |
'-------------------------------------------------------------------------*/

table.debug_vars {
    border-collapse: collapse;
}
table.debug_vars th {
    border: 1px solid #080;
    background-color: #8c8;
    font-weight: bold;
}
table.debug_vars td.left {
    background-color: #395;
    color: white;
    font-weight: bold;
}
table.debug_vars td.right {
    background-color: #8fc;
    color: black;
    font-weight: bold;
}
table.debug_vars td {
    padding: 2px 6px;
    border: 1px solid #050;
    font-family: courier, monospace;
}

/* Popup for adding to visuals (Dashboard, Reports */

div.pnp_graph, div.popup_trigger {
    position: relative;
}

div.popup_trigger {
    display: inline-block;
}

div.pnp_graph a.popup_trigger {
    position: absolute;
    top: 10px;
    left: 10px;

    display: block;
    width: 20px;
    height: 20px;
}

div.pnp_graph a.popup_trigger:hover {
    cursor: pointer;
}

tr.data td.pnpgraph div.pnp_graph > a.popup_trigger > img.icon {
    border: none;
    box-shadow: none;
    margin: 0;
}

div.popup_trigger img.iconbutton {
    padding: 0;
}