/* Vymeniky.cz — vychází ze starého handcrafted webu (vymeniky-oldnew/style.css)
   Layout: 889px boxed page, top banner head.jpg, levý menu sloupec 226px modře, content vpravo.
   Hero obrázek na začátku obsahu se rozšiřuje na full-screen šířku přes negativní margin. */

* { box-sizing: border-box; }
html, body, form, fieldset, h1, h2, h3, h4, h5, h6, p, pre, blockquote, ul, ol, li, dl, dd, dt, address {
    margin: 0; padding: 0;
}

html { background: url('../images/legacy/bg.jpg') repeat-x #fff; }

body {
    text-align: center;
    font: 13px/1.6 Tahoma, Arial, Helvetica, sans-serif;
    color: #2b2b2b;
}

a { font-weight: bold; text-decoration: underline; color: #0072BC; }
a:hover { text-decoration: none; }
a img, fieldset { border: 0; }

img { max-width: 100%; height: auto; }

h1 { color: red; font: normal 160%/1.3 Tahoma; margin: 0 0 1em 0; }
h2 { color: red; font-size: 105%; margin: 1em 0 0 0; }
h3 { color: black; font-size: 100%; margin: 1em 0 0 0; }

table { font-size: 100%; border-collapse: collapse; }
.bold { font-weight: bold; }
.center { text-align: center; }
.right { text-align: right; }
.clear { clear: both; }
.red { color: red; font-weight: bold; }
.alignleft, .img_fleft { float: left; margin: 0 1.5em 1em 0; }
.alignright, .img_fright { float: right; margin: 0 0 1em 1.5em; }
.aligncenter { display: block; margin: 1em auto; }
.small { font-size: 85%; }

/* === Page === */
#page {
    width: 889px;
    margin: 0 auto;
    position: relative;
    text-align: left;
    background: #fff;
}

#head {
    width: 889px;
    height: 289px;
    background: url('../images/legacy/head.jpg') no-repeat;
    position: absolute;
    top: 0;
    left: 0;
}

#logo {
    display: block;
    position: absolute;
    top: 4px;
    left: 2px;
    width: 221px;
    height: 90px;
    z-index: 10;
    cursor: pointer;
}
#logo img { width: 221px; height: 90px; display: block; }

#slogan {
    position: absolute;
    top: 28px;
    left: 280px;
    right: 20px;
    font-style: italic;
    font-weight: bold;
    color: #000;
    font-size: 145%;
    text-align: left;
}
#slogan .red { color: #EE1D25; }
#slogan .blue { color: #0072BC; }

#mMenu { display: none; }

/* === Content (under banner) === */
#content {
    width: 889px;
    padding-top: 139px;
    clear: both;
}

#lc {
    width: 226px;
    float: left;
    position: relative;
}

/* Menu — modré, jak starý web */
#lc .menu .top {
    background: url('../images/legacy/lc-menu-top.png') no-repeat;
    width: 226px;
    height: 6px;
    overflow: hidden;
}
#lc .menu .down,
#lc .box .down {
    background: url('../images/legacy/lc-menu-down.png') no-repeat;
    width: 226px;
    height: 6px;
    overflow: hidden;
}
#menu {
    background: url('../images/legacy/lc-menu-body.png') repeat-y;
    width: 226px;
    padding: 3px 0 1px 0;
    list-style: none;
    overflow: hidden;
}
#menu li { margin: 0 0 2px 3px; list-style: none; }
#menu li a {
    background: #F9FAFC;
    border: 1px solid #EEF2F6;
    font-size: 95%;
    text-decoration: none;
    color: #0072BC;
    display: block;
    padding: 6px 8px;
    font-weight: bold;
}
#menu li a:hover {
    color: white;
    background: #0072BC;
    border: 1px solid #0072BC;
}
#menu li a.active { color: black; }
#menu li a.active:hover { color: white; }
#menu .highlight { color: red; }
#menu .closeMenu { display: none; }

/* Quick contact box */
#lc .box { margin-top: 18px; }
#lc .box .top {
    background: url('../images/legacy/lc-menu-top.png') no-repeat;
    width: 226px;
    height: 6px;
    overflow: hidden;
}
#lc .box .body {
    background: url('../images/legacy/lc-menu-body.png') repeat-y;
    width: 226px;
    padding: 3px 15px;
    font-size: 95%;
    line-height: 1.3;
}
#lc .box .body h2,
#lc .box .body #quickContactH2 {
    margin: 0;
    color: #000;
    font-size: 95% !important;
    font-weight: bold !important;
}
#lc .box .body a { text-decoration: none; color: #0072BC; }
#lc .box .body a:hover { color: #59A3D4; }

/* Text column */
#text {
    width: 644px;
    float: left;
    margin: 180px 0 0 19px;   /* 180px shora, aby text nezačínal pod head bannerem (289px) */
    position: relative;
    z-index: 1;
    min-height: 300px;
}
#text p { font-size: 95%; margin: 1em 0; text-align: justify; }
#text ul { margin: 1em 0 1em 20px; }
#text li { list-style: square; }

/* Hero banner — první obrázek/seznam v contentu se roztáhne na full screen width */
#text > p:first-child img:only-child,
#text > ul:first-child,
#text > figure:first-child {
    display: block;
    width: 100vw;
    max-width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    margin-top: 0;
    margin-bottom: 1.5em;
    padding: 0;
    list-style: none;
}
#text > ul:first-child > li { display: block; list-style: none; margin: 0; padding: 0; }
#text > ul:first-child img,
#text > p:first-child img:only-child,
#text > figure:first-child img {
    display: block;
    width: 100%;
    height: auto;
    max-width: none;
}

/* Tabulky v textu */
#text table {
    width: 100%;
    border-collapse: collapse;
    margin: 1em 0;
}
#text th, #text td {
    border: 1px solid silver;
    padding: 4px 8px;
    text-align: left;
    vertical-align: top;
}
#text th { background: #e1e1e1; }

/* PDF odkazy */
.pdf { padding: 0 0 0 20px; background: url('../images/legacy/pdficon.png') no-repeat; }

/* Footer */
#foot {
    background: #E6F1F5;
    width: 100%;
    margin-top: 40px;
    font-size: 11px;
    clear: both;
}
#foot a { font-weight: normal; color: #0072BC; }
#foot .copy {
    width: 889px;
    text-align: left;
    margin: 0 auto;
    padding: 3px 0 3px 30px;
}
#footdown {
    background: url('../images/legacy/bgfoot.jpg') repeat-x;
    min-height: 105px;
}

/* === Responsive (mobile) === */
@media (max-width: 920px) {
    html { background: #fff; }
    body { font-size: 14px; }

    #page { width: 100%; padding: 0; background: #fff; }
    #head { display: none; }

    #logo {
        position: relative;
        top: auto; left: auto;
        margin: 1em;
        float: left;
        width: auto;
        height: auto;
    }
    #logo img { width: 176px; height: auto; }

    #slogan { display: none; }

    #mMenu {
        display: block;
        float: right;
        margin: 68px 0 0;
        font-size: 15px;
    }
    #mMenu a {
        color: white;
        text-decoration: none;
        background: #0072BC url('../images/legacy/mMenu-a.png') 15px center no-repeat;
        padding: 8px 15px 8px 43px;
        display: block;
    }

    #content {
        width: auto;
        padding-top: 10px;
        clear: both;
    }

    #lc { display: contents; }
    #lc .menu .top,
    #lc .menu .down,
    #lc .box { display: none; }

    #menu {
        display: none;
        position: fixed;
        top: 0; left: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background: white;
        padding: 0;
        z-index: 50;
    }
    #menu.active { display: block; }
    #menu li {
        float: none;
        border-bottom: 1px solid #0076e2;
        clear: both;
        margin: 0;
    }
    #menu li a {
        float: none;
        font-size: 16px;
        padding: 12px 15px;
        background: none;
        width: auto;
        border: 0;
        text-align: center;
        color: #0072BC;
    }
    #menu li a:hover,
    #menu li a:active { background: #2b7edf; color: white; }
    #menu li.closeMenu {
        display: block;
        border: 0;
        float: right;
        margin: 5px 10px;
    }
    #menu li.closeMenu a {
        background: white url('../images/legacy/menuClose.png') left center no-repeat;
        padding: 7px 15px 7px 32px;
        color: #0072BC;
    }

    #text {
        width: auto;
        float: none;
        margin: 0 1em;
        padding: 0;
    }

    #text > ul:first-child,
    #text > p:first-child img:only-child,
    #text > figure:first-child {
        width: 100vw;
        margin-left: -1em;
        margin-right: -1em;
        max-width: none;
    }

    #foot { margin-top: 20px; }
    #foot .copy { width: auto; padding: 10px 1em; }
    #footdown { display: none; }
}