/*
--------------------------------------------------------------------------------
CSS promenne
KTE: barvicky jsem prejmenoval, protoze nakonec to nemusi byt khaki
--------------------------------------------------------------------------------
*/
:root
{
    --lightmyko: #d7d7bb;
    --darkmyko: #c7c7ab;
}

/*
--------------------------------------------------------------------------------
rozvrzeni zakladni sablony
--------------------------------------------------------------------------------
*/
body
{
    font-family: arial;
    background-color: var(--darkmyko);
    overflow-y: scroll;
    margin: 10px;
    font-size: 0;
    line-height: 0;
}
div#main
{
    margin-left:auto;
    margin-right:auto;
    position:relative;
    max-width: 1226px;
    min-height: 600px;
    display: flex;
}
div#left
{
    width: 100%;
    max-width: 860px;
}
div#right
{
    min-width: 400px;
}
div.top
{
    height: 112px;
    background-color: var(--lightmyko);
}
div#right .top
{
    background-color: var(--darkmyko);
}
div.menu
{
    background-color: var(--lightmyko);
    margin: 10px 0 0 10px;
    border: 1px solid olive;
    padding: 6px 12px;
}
header
{
    background-color: var(--lightmyko);
    margin-bottom: 10px;
    height: 100%;
    padding: 0 12px;
}
div.top-right
{
    border: 1px solid transparent;
}
article
{
    background-color: var(--lightmyko);
    border: 1px solid olive;
    height: 100%;
    margin-top: 10px;
    min-height:600px;
    padding: 0 12px 6px 12px;
    
}
bar
{
    width: 400px;
    display: block;
}
#master-top
{
    display: flex;
    border: 1px solid olive;
}
#master-top h1
{
    font-size: 30px;
}
#cms-title
{
    padding-top: 6px;
    padding-left:6px;
    height: 70px;
}
#cms-title img
{
    width:70%;
}
#cms-logo
{
    margin-top: 6px;
    margin-left: 6px;
}

/*
--------------------------------------------------------------------------------
var_dump
--------------------------------------------------------------------------------
*/
.xdebug-var-dump
{
    font-family: Arial; font-size: 16px; line-height: 16px;
}

/*
--------------------------------------------------------------------------------
elementarni styly zakladni sablony
--------------------------------------------------------------------------------
*/
p.hidden-menu
{
    font-size: 16px;
    line-height: 20px;
    margin-top: 4px;
    display: none;
}
p.copyright
{
    font-size: 14px;
    margin-top: 4px;
}
.menu p
{
    font-size: 16px;
    line-height: 20px;
    margin-top: 4px;
    margin-bottom: 4px;
}
label
{
    font-size: 16px;
}
.hidden
{
    display: none;
}
.pointer
{
    cursor: pointer;
}
a
{
    color: #700;
    cursor: pointer;
    text-decoration: none;
}
a:hover
{
    color: #096;
}
fieldset
{
    background-color: cornsilk;
    border: 1px solid olive;
}
button 
{
    font-size: 16px;
    color: buttontext;
    height: 26px;
    border-color: buttonface;
    border: 1px solid grey;
    cursor: pointer;
}
button:hover:enabled
{
    background-color: antiquewhite;
}
button:disabled
{
    color: gray;
    background-color: darkgray;
    border-color: butonface;
    cursor: default;
}
button:focus
{
    background-color: antiquewhite;
    border-style: solid;
}
input[type="text"], input[type="date"], input[type="number"], select
{
    font-size: 16px;
    font-family: Arial;
    height: 26px;
    max-height: 26px;
    padding-left: 4px;
}
.box
{
    width: 100%;
}

/*
--------------------------------------------------------------------------------
responzibilita
--------------------------------------------------------------------------------
@media (max-width: 1240px)
@media (max-width: 1024px)
*/
@media (max-width: 1240px)
{
    div#main
    {
        max-width: 860px;
    }
    div#right
    {
        display: none;
    }
    div#left
    {
        max-width: 830px;
    }
    p.hidden-menu
    {
        display: block;
    }
}
@media (max-width: 830px)
{
    body {
        margin:0;
    }
    #cms-title img
    {
        width:75%;
    }
}
@media (max-width: 860px)
{
    .img4
    {
        display: none;
    }
}
@media (max-width: 650px)
{
    .img3
    {
        display: none;
    }
    #master-top h1
    {
        font-size: 24px;
    }
    #cms-title img
    {
        width:90%;
    }
}