/* site_ilmo.css */
:root {
    --oskari-top-background: #337755;
    --oskari-top-border: #449966; /*#22aa88;*/
    --oskari-border: #116644;
    --oskari-link-color: #006622;
    --oskari-link-hover: #000;
    --oskari-menu-active: #22aa88;
    --oskari-menu-hover: #99eeaa;
    --oskari-table-header-background: #bbddcc;
    --oskari-table-header-border: #226644;
    --oskari-table-header-color: #000;
    --oskari-table-background: #f9f9f9;
    --oskari-table-border: #336666;
    --oskari-table-footer-background: #d9e3eb;
    --oskoko-top-background: #23b5c7;
    --oskoko-menu-hover: #a8f8f8;
    --ilmo-top-background: #881111;
    --ilmo-menu-hover: #eecccc;
}
@media screen {
    .oskari .yhtio {
        height: 68px;
    }    
    .oskari .yhtio a,
    body.oskari {
        background: #333 url(images/header_background.png) repeat-x;
        background-position: 160px -55px;
    }
    body.oskari > header {
        background-color: #333;
        border-bottom: solid 5px var(--oskari-top-border);
    }
}

body.oskari > header .yhtio a {color: #eeeeee;}
body.oskari > header .yhtio a:hover { color: #fff; }
body.oskari > header .login a:hover { color: #000; }

.oskari a { color: var(--oskari-link-color); }
.oskari a:hover { color: var(--oskari-link-hover); }

.oskari a.btnKuva, .oskari a.btnKuvaFont { color: #111;}
.oskari .btnKuva:hover, .oskari .btnKuvaFont:hover {color: var(--oskari-link-color);}

/* top menu */
@media screen {
    .oskari .top_menu ul li {
        background: var(--oskari-top-background);
        border: 2px solid var(--oskari-top-border);
    }
    .oskari .top_menu ul li {
        border-bottom: none;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
    }
    .oskari .top_menu ul li a {
        color: #fff;
        padding: 8px 10px 6px 10px;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
        background: var(--oskari-top-background);
    }
    .oskari .top_menu ul li a:hover {
        background: var(--oskari-menu-hover);
        color: #000;
        text-decoration: none;
    }
    .oskari .top_menu ul li.selected a {
        background: #fff;
        border-bottom: none;
        color: #000;
        font-weight: 600;
    }

    .top_menu ul li a.oskoko {
        background: var(--oskoko-top-background);
    }
    .top_menu ul li a.oskoko:hover {
        background: var(--oskoko-menu-hover);
    }

    .top_menu ul li a.ilmo {
        background: var(--ilmo-top-background);
    }
    .top_menu ul li a.ilmo:hover {
        background: var(--ilmo-menu-hover);
    }
}
/* left menu */
@media screen {
    .oskari #colmask {
        background: #333;
        border-bottom: 1px solid #666;
    }
    .oskari .left_menu {
        background: none;
        font-size: 1.1em;
        width: 200px;
        vertical-align: top;
    }    
    .oskari .left_menu ul {
        padding: 0;
    }
    .oskari .left_menu ul li {
        background: #333;
        padding: .1em 0 .1em 1em;
        border-right: 1px solid #111;
        border-bottom: 1px solid #111;
        border-top: none; /*1px solid #111;*/
    }        
    .oskari .left_menu ul li:hover {
        background: #fff;
        border-right: 1px solid #fff;
        border-bottom: 1px solid #666;
        /*border-top: 1px solid #666;*/
        padding: .1em 0 .1em .4em;
        color: #111;
    }
    .oskari .left_menu ul li:hover {
        border-left: .6em solid var(--oskari-menu-hover);
    }
    .oskari .left_menu ul li.selected {
        background: #fff;
        border-right: 1px solid #fff;
        border-bottom: 1px solid #000;
        border-top: 1px solid #000;
        padding: .1em 0 .1em .4em;
    }
    .oskari .left_menu ul li.selected {
        border-left: .6em solid var(--oskari-menu-active);
    }
    .oskari .left_menu ul > li.selected {
        border-top: none;
    }
    .oskari .left_menu ul li a {
        /*color: #111;*/
        color: #eee;
    }
    .oskari .left_menu ul li:hover a, .oskari .left_menu ul li a:hover {
        color: #111;
    }
    .oskari .left_menu ul li.selected a {
        color: #000;
    }
}
/* Fieldset, lomakkeet */
.oskari fieldset {
    border: 1px solid var(--oskari-border);
}
.oskari legend {
    background-color: var(--oskari-top-background);
    border: 1px solid var(--oskari-border);
    border-radius: 2px 2px;
    color: #fff;
}
@media screen {
    .oskari .btnKuva, .oskari .btnKuvaFont {
        background-color: #eee;
        border: 1px solid #333;
    }
    .oskari button.btnKuva {
        padding: 0;
        color: #222;
    }
}
/* Tablet contentin sisalla */
.oskari .content table {
    border: 0;
}
.oskari .content table th {
    background-color: var(--oskari-table-header-background);
    border: solid 1px var(--oskari-table-header-border);
    border-bottom: solid 3px var(--oskari-table-border);
    color: var(--oskari-table-header-color);
}
.oskari .content table tr.taulukko_otsikko th {
    background-color: var(--oskari-table-header-background);
}
.oskari .content table td {
    background-color: var(--oskari-table-background);
    border: solid 1px var(--oskari-table-border);
}
.oskari .content table .tfoot td {
    background-color: #d9e3eb;
}