/*
+------------------------------------------------------------------+
|             ____ _               _        __  __ _  __           |
|            / ___| |__   ___  ___| | __   |  \/  | |/ /           |
|           | |   | '_ \ / _ \/ __| |/ /   | |\/| | ' /            |
|           | |___| | | |  __/ (__|   <    | |  | | . \            |
|            \____|_| |_|\___|\___|_|\_\___|_|  |_|_|\_\           |
|                                                                  |
| 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.

*/

/* Global style used by all HTML pages, even by sidebar and
   mobile interface */

/*-------------------------------------------------------------------------.
|                ____        __             _ _                            |
|               |  _ \  ___ / _| __ _ _   _| | |_ ___                      |
|               | | | |/ _ \ |_ / _` | | | | | __/ __|                     |
|               | |_| |  __/  _| (_| | |_| | | |_\__ \                     |
|               |____/ \___|_|  \__,_|\__,_|_|\__|___/                     |
|                                                                          |
+--------------------------------------------------------------------------+
| Default values for general styles used in all parts of Multisite. These  |
| styles are used in the Status-GUI, WATO and other modules based on the   |
| basic Multisite layout. They are not used by the Mobile GUI.             |
'-------------------------------------------------------------------------*/

/* Change some general defaults of HTML that we do not like */
td, th {
    vertical-align: top;
}

div {
    margin: 0;
    padding: 0;
}

img {
    border-style: none;
}

th {
    white-space: nowrap;
}

body {
    color: white;
}

body a, body a:link, body a:visited {
    color: white;
}

/* Default font size for the complete Multisite GUI */
button, input, td, th, select, textarea {
    font-size: 9pt;
}

input.number {
    text-align: right;
}

/* Styling for input elements */
input, select, textarea {
    padding: 3px;
    border: 1px #73767A solid;
    outline-style: none;
    outline-width: medium;
    background-color: #fff;
    font-family: arial, helvetica, sans-serif;
    vertical-align: middle;
    margin-top: 0px;
}

input[type=file] {
    color: black;
}

form {
    margin: 0px;
}

input:hover, select:hover, textarea:hover {
    background-color: #EDECEB;
}


/* Select element with icons */
select.icon option {
    background-repeat: no-repeat;
    background-position: bottom left;
    background-size: 18px;
    padding-left:22px;
    height: 18px;
}


input.buttonlink {
    padding: 1px;
    font-size: 8pt;
}

input.button {
    border-color: #86A9B8 #22404D #22414D #86A9B8;
    border-radius: 5px 5px 5px 5px;
    border-style: solid;
    border-width: 1px;
    box-shadow: 0 0 1.5px #000000;
    margin-left: 5px;
    padding: 2px 6px;
    background-color: #497E95;
    color: white;
}

input.button:hover {
    background-color: #6da1b8;
    text-decoration: none;
}
input.button:active {
    border-color:  #22414d #86a9b8 #86a9b8 #22404d;
    background-color: #3b6678;
    box-shadow: inset 0 0 0.5px #444444;
}

a.button {
    background-color: #cca;
    color: #000;
    text-decoration: none;
    font-weight: normal;
    border-width: 1px;
    border-style: solid;
    border-color: #ddd #888 #333 #ddd;
    padding: 0.1ex 1ex;
    height: 24px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    border-radius: 4px;
    margin: 2px;
}

/* Image submit button styling */
label.image_button {
    display: inline-block;
    margin: 0px 4px 0 0;
    position: relative;
    top: 0px;
    background: transparent url('images/image_button_l.png') no-repeat;
    background-position: 0px -35px;
    padding: 0 0 0 7.5px;
    height: 22px;
    margin-right: 5px;
    vertical-align: middle;
}
label.image_button:hover {
    background-position: -0px -65px;
}
label.image_button:active {
    background-position: -0px -95px;
}
label.image_button input {
    height: 22px;
    color: #fff;
    border: none;
    padding-left: 0px;
    padding-right: 10px;
    padding-top: 0px;
    padding-bottom: 0px;
    background: transparent url('images/image_button_r.png') no-repeat;
    background-position: right -35px;
    float: left;
    font-size: 8pt;
    margin-left: 3px;
    border-radius: 0px;
}
label.image_button input:hover {
    background-position: right -65px;
}
label.image_button input:active {
    background-position: right -95px;
}
label.image_button input[type="submit"]::-moz-focus-inner {
    border: 0px;
}
/*for IE8 */
input[type="submit"]:focus {
    outline: none;
}

input:hover, select:hover, textarea:hover {
    background-color: #EDECEB;
}

/* Images have a native size of 48x48 and are scaled down by the
   browser. That way if you select a zoom level in the browser,
   the quality of the images are better */

img.icon {
   width: 20px;
   height: 20px;
}

img.icon.inline {
   vertical-align: middle;
   width: 16px;
   height: 16px;
}

h1 {
    color: #fff;
    font-size: 17pt;
    margin-top: 0;
    margin-bottom: 5px;
    margin-left: 5px;
}

div.livestatus.message {
    position: fixed;
    bottom: -10px;
    left: 10px;
    font-size: 8pt;
    z-index: 20;
    color: black;
}

/*-------------------------------------------------------------------------.
|                _____     _     _       _     _                           |
|               |  ___|__ | | __| | __ _| |__ | | ___                      |
|               | |_ / _ \| |/ _` |/ _` | '_ \| |/ _ \                     |
|               |  _| (_) | | (_| | (_| | |_) | |  __/                     |
|               |_|  \___/|_|\__,_|\__,_|_.__/|_|\___|                     |
|                                                                          |
+--------------------------------------------------------------------------+
| These styles are used by the {begin,end}_foldable_container() functions. |
'-------------------------------------------------------------------------*/

img.treeangle {
    width: 13px;
    height: 12px;
    margin-right: 3px;
    margin-top: 0px;
}
img.treeangle.nform {
    margin-left: -5px;
}
img.treeangle.title {
    width: 16px;
    height: 16px;
    vertical-align: middle;
    margin-right: 5px;
}
b.treeangle.title {
   font-weight: bold;
   color: #ffffff;
}
ul.treeangle {
    /* border: 1px solid #4060ff; */
    padding-left: 20px;
    margin: 8px 0px;
    position: relative; /* In order for placement of invtablelink */
}
ul.treeangle li {
    margin: 0px;
    margin-left: 16px;
    padding-left: 20px;
    list-style: disc;
    display: block;
}
ul.closed {
    display: none;
}



/*-------------------------------------------------------------------------.
|             __  __                                                       |
|            |  \/  | ___  ___ ___  __ _  __ _  ___  ___                   |
|            | |\/| |/ _ \/ __/ __|/ _` |/ _` |/ _ \/ __|                  |
|            | |  | |  __/\__ \__ \ (_| | (_| |  __/\__ \                  |
|            |_|  |_|\___||___/___/\__,_|\__, |\___||___/                  |
|                                        |___/                             |
+--------------------------------------------------------------------------+
| Styles for messages-boxes in various situations (called by htmllib.py)   |
'-------------------------------------------------------------------------*/

div.really {
    background-color: #fdc400;
    border-color: #800;
}

div.success {
    background-color: #9dbecd;
    border-color: #080;
}

div.message {
    background-color: #9dbecd;
    border-color: #048;
}

div.error {
    background-color: #e70000;
    border-color: #e40;
    color: white;
}
div.error a {
    color: white;
}

div.warning {
    background-color: #ff4;
    border-color: #fc0;
    color: #000;
}
div.warning a {
    color: #000;
}

/* Warnings embedded in tables without margins and padding, those are
   just needed for body */

td div.warning, td > div.error {
    margin-top: 3px;
    margin-bottom: 3px;
    padding: 5px 10px;
}

td div.warning ul, td > div.error ul {
    margin: 5px 10px;
    padding-left: 0px;
}

/*-ValueSpec---------------------------------------------------------------.
|          __     __    _            ____                                  |
|          \ \   / /_ _| |_   _  ___/ ___| _ __   ___  ___                 |
|           \ \ / / _` | | | | |/ _ \___ \| '_ \ / _ \/ __|                |
|            \ V / (_| | | |_| |  __/___) | |_) |  __/ (__                 |
|             \_/ \__,_|_|\__,_|\___|____/| .__/ \___|\___|                |
|                                         |_|                              |
+--------------------------------------------------------------------------+
| Styles needed for HTML code produced by valuespec.py.                    |
'-------------------------------------------------------------------------*/

table.dictionary {
    width: 100%;
}

table.dictionary b.header {
    font-size: 80%;
    font-weight: normal;
}

table.dictionary td.dictright {
    white-space: nowrap;
    padding: 0px;
    border-style: none;
}

td.dictleft div.dictelement * {
    font-size: 8pt;
}
td.dictleft div.dictelement {
    font-size: 8pt;
    margin-bottom: 10px;
    margin-top: 3px;
    float: none;
    margin-left: 0px;
}
td.dictleft div.dictelement.indent {
    padding-left: 10px;
    border-left: 2px solid #ccc;
    margin-left: 8px;
}

table.vs_dict_text {
    padding: 0px;
    margin: 0px;
    border-collapse: collapse;
}
table.vs_dict_text td,
table.data tr td table.vs_dict_text > tbody > tr > td {
    padding: 0px;
    margin: 0px;
    vertical-align: top;
}

table.valuespec_tuple {
    border-spacing: 2px;
}

table.valuespec_tuple td {
    padding: 0px;
}

table.valuespec_tuple td.tuple_left {
    vertical-align: middle;
}

table.valuespec_tuple span.title {
    font-size: 8pt;
}

table.vs_date {
    border-spacing: 0px;
    display: inline-block;
    vertical-align: middle;
}

table.vs_date td {
    padding-top: 0px;
    padding-right: 3px;
}
table.vs_date th {
    text-align: center;
    font-weight: normal;
    font-size: 7pt;
    padding: 0px;
}

table.valuespec_listof {
    width: 100%;
}

table.valuespec_listof > tbody > tr > td:first-child {
    padding-bottom: 5px;
}
table.valuespec_listof > tbody > tr > td {
    padding: 3px 0px 5px 0px;
    border-bottom: 1px solid #9bc;
}
table.valuespec_listof > tbody > tr:last-child > td {
    padding-top: 3px;
    border-bottom-style: none;
}

table.valuespec_listof td.vlof_buttons {
    margin-right: 5px;
    white-space: nowrap;
    vertical-align: middle;
    width: 1px;
}
table.valuespec_listof td.vlof_content {
}
table.valuespec_listof option[selected] {
    font-weight: bold;
}

table.valuespec_listof .unused {
    display: none;
}
table.vs_duallist td {
    width: 50%;
}
table.vs_duallist td select {
    width: 100%;
    height: 200px;
}
table.vs_duallist td.head {
    text-align:center;
}

table.vs_duallist a.control {
    display: inline-block;
    width: 14px;
    text-decoration: none;
    text-align: center;
    float: right;

    background-color: #00F;
    background-color: #497E95;
    border-width: 1px;
    border-style: solid;
    border-color: #86A9B8 #22404D #22414D #86A9B8;
    box-shadow: 0px 0px 1.5px #000;
    border-radius: 3px;
}

table.vs_duallist a.control.add {
    float: right;
}

table.vs_duallist a.control.del {
    float: left;
}

textarea.tt {
    font-family: monospace;
}

div.listofstrings.horizontal {
    clear: left;
}

div.listofstrings > div {
    margin-bottom: 2px;
}

div.listofstrings.horizontal > div {
    float: left;
    margin-right: 2px;
}
div.listofstrings.horizontal > div:last-child {
    float: none;
}

table.listchoice {
    border-collapse: collapse;
}
table.listchoice td span.checkbox {
    height: 10px;
}
table.listchoice td {
    height: 12px;
    padding: 0px;
    margin: 0px;
}
table.listchoice td input[type=checkbox] {
    margin: 0px;
    display: inline-block;
    height: 12px;
}

div.popup_container {
    position: relative;
}

div.popup {
    padding:10px;
    background-color: #45829D;

    position: absolute;
    left: 10px;
    top: 10px;
    z-index: 200;

    width: -moz-max-content;
    width: intrinsic;

    -webkit-border-radius: 5px;
    border-radius: 5px;
    border-radius: 5px;
    border: 1px solid #fff;

    color: #fff;
}

div.popup span {
    display: block;
    margin-bottom: 5px;
    color: white;
}

div#hover_menu {
    position: absolute;
    width: auto;
    /* The hover menu needs to have a higher z-index than the highest element
       on the pages. In this case it was the perfometer which had 30. */
    z-index: 40;
    color: #000;
}

div#hover_menu div.error {
    width:350px;
    margin: 0;
}

/* Color picker styling */

div.popup_trigger.colorpicker div.popup_menu {
    min-width: auto;
}

.cp-preview {
    width: 28px;
    height: 18px;
    border: 1px solid #000;
    box-shadow: 1px 1px 2px inset;
}

table.data td .cp-preview {
    position: relative;
    top: 2px;
}

.picker-wrapper,
.slide-wrapper {
    position: relative;
    float: left;
}
.picker-indicator,
.slide-indicator {
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
}
.picker,
.slide {
    cursor: crosshair;
    float: left;
}

.cp-small {
    float: left;
    width: 170px;
}
.cp-small .picker {
    width: 150px;
    height: 150px;
    background-color: white;
}
.cp-small .slide {
    width: 15px;
    height: 150px;
}
.cp-small .slide-wrapper {
    margin-left: 5px;
}
.cp-small .picker-indicator {
    width: 1px;
    height: 1px;
    border: 1px solid black;
    background-color: white;
}
.cp-small .slide-indicator {
    width: 100%;
    height: 2px;
    left: 0px;
    background-color: black;
}

div.popup_trigger.colorpicker .popup_menu {
    top: 17px;
    left: 26px;
}

/*--Werks------------------------------------------------------------------.
|                    __        __        _                                 |
|                    \ \      / /__ _ __| | _____                          |
|                     \ \ /\ / / _ \ '__| |/ / __|                         |
|                      \ V  V /  __/ |  |   <\__ \                         |
|                       \_/\_/ \___|_|  |_|\_\___/                         |
|                                                                          |
+--------------------------------------------------------------------------+
| Pages showing the Check_MK change log (werks.py)                         |
'-------------------------------------------------------------------------*/

tr.data td.werklevel, tr.data td.werkclass, tr.data td.werkcomp {
    text-align: center;
    white-space: nowrap;
    width: 100px;
}

table.data.werks tr:nth-child(odd) td.werklevel2 {
    background-color: #00bbff;
}
table.data.werks tr:nth-child(even) td.werklevel2 {
    background-color: #44ccff;
}
table.data.werks td.werklevel3 {
    font-weight: bold;
}
table.data.werks tr:nth-child(odd) td.werklevel3 {
    background-color: #6cffff;
}
table.data.werks tr:nth-child(even) td.werklevel3 {
    background-color: #66ffff;
}

table.data.werks tr:nth-child(odd) td.werkclassfeature {
    background-color: #a8f0a8;
}
table.data.werks tr:nth-child(even) td.werkclassfeature {
    background-color: #afa;
}
table.data.werks tr:nth-child(even) td.werkclassfix {
    background-color: #ff9;
}
table.data.werks tr:nth-child(odd) td.werkclassfix {
    background-color: #f8f877;
}
table.data.werks td.werkclasssecurity {
    color: white;
    font-weight: bold;
}
table.data.werks tr:nth-child(odd) td.werkclasssecurity {
    background-color: #ff0000;
}
table.data.werks tr:nth-child(even) td.werkclasssecurity {
    background-color: #ff3030;
}

table.data.headerleft.werks td {
    text-align: left;
}

table.werks td a {
    color: black;
    text-decoration: underline;
}

table.data.werks td.werkcompincomp_unack {
    font-weight: bold;
}

table.data.werks tr:nth-child(odd) td.werkcompincomp_unack {
    background-color: #ff7777;
}
table.data.werks tr:nth-child(even) td.werkcompincomp_unack {
    background-color: #ff8888;
}

table.data.werks tr:nth-child(odd) td.werkcompincomp_ack {
    background-color: #ffbb99;
}
table.data.werks tr:nth-child(even) td.werkcompincomp_ack {
    background-color: #ffbfaa;
}

/* NOWIKI formatting in Werks */
td.nowiki h3 {
    color: black;
    font-weight: bold;
    font-size: 10pt;
}

td.nowiki pre {
    padding: 3px 8px;
}

td.nowiki pre.code {
    background-color: white;
}
td.nowiki pre.file {
    background-color: #fff0b5;
}

td.nowiki div.filename {
    margin-bottom: -12px;
    background-color: #E6D8A3;
    padding: 3px 8px;
    font-family: Hack, courier;
    font-weight: bold;
}


td.nowiki table {
    border: 1px solid black;
    border-collapse: collapse;
    margin: 10px 0px;
}
td.nowiki table td, td.nowiki table th {
    border: 1px solid #888;
}

/* Command for modifying existing downtimes */
table.modifydowntimes > tbody > tr > td:nth-child(1) {
    vertical-align: middle;
    padding-top: 10px;
}
table.modifydowntimes > tbody > tr:nth-child(1) > td:nth-child(1)  {
    padding-top: 0px;
}