﻿body
{
    background-color: rgb(252,236,174);
    background-image: url(../image/Lenka-Vachalova-bg.png);
    background-position: center -0.2cm;
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: rgb(0,0,0);
    font-family: Arial;
    padding-top: 0.8cm;
    margin-top: 0px;
}
#body-header {
    margin-left: auto;
    margin-right: auto;
    width: 90%;
    max-width: 740px;
}
#body-header img.logo
{
    display: block;
    width: 45%;
    min-width: 300px;
    height: auto;
    margin-bottom: 40px;
    margin-left: auto;
    margin-right: auto;
}
#body-content 
{
    margin-left: auto;
    margin-right: auto;
    width: 90%;
    max-width: 740px;
}
#temata 
{
    max-width: 16.5cm;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0.7cm;
}
.temata-seznam
{
    display:inline-block;
    max-width: 680px;
    text-align: center;
}
.tema 
{
    display:inline-block;
    padding: 0cm 0.5cm 0.25cm 0.5cm;
    text-align: center;
}
.tema a
{
    text-decoration: none;
    
}
.tema a img 
{
    width: 4.5cm;
    height: auto;
     -moz-border-radius: 0.2cm;
    -webkit-border-radius: 0.2cm;
    -khtml-border-radius: 0.2cm;
    border-radius: 0.2cm;
    border: none;
}
.tema a:hover img
{
    filter: none;
}
.tema a h1 
{
    color: rgb(159, 122, 105);
    font-size: 0.4cm;
    font-weight: bold;
    letter-spacing: 0.05cm;
    line-height: 0.5cm;
} 
.break 
{
    clear: both;
}
#copyright
{
    display: none;
    width: 100%;
    text-align: center;
    clear: both;
}
#copyright div 
{
    display: inline-block;
    margin-left: 2cm;
    margin-right: 2cm;
    color: rgb(109, 109, 109);
}
#copyright div img 
{
    height: 1.5cm;
    width: auto;
    position: relative;
    top: 0.3cm;
    margin-left: 0.5cm;
}
#copyright div span 
{
    margin-left: -1cm;
}
#menu-temata 
{
    width: 100%;
    display: none;
    font-size: 0.36cm;
    font-weight: normal;
    clear: both;
    padding: 0px;
    margin: 0px;
}   
#menu-temata li 
{
    display: block;
    list-style-type: none;
    float: left;
    padding-right: 0.8cm;
}
#menu-temata li a {
    color: rgb(232, 179, 104);
    text-decoration: none;
}
#menu-temata li a:hover {
    color: rgb(184, 24, 30);
}
#menu-prace 
{
    display: inline-block;
    font-size: 0.36cm;
    letter-spacing: 0.05cm;
    font-weight: normal;
    clear:left;
    float:left;
    padding: 0px;
    margin: 0px;
    padding-top: 1cm;
    width: 3.5cm;
    margin-left: 0.5cm;
}
#menu-prace li {
    list-style-type: none;
    padding-top: 0.25cm;
    padding-bottom: 0.25cm;
    font-weight:bold;
}
#menu-prace li a {
    --color: rgb(133, 104, 91);
    --color: rgb(149, 122, 110);
    color: rgb(159, 122, 105);
    text-decoration: none;
}
#menu-prace li a:hover 
{
    color: rgb(184, 24, 30);
}
#menu-prace li a.selected
{
    color: rgb(184, 24, 30);
}
#page-content h1 
{
    font-size: 0.47cm;
    color: rgb(184, 24, 30);
    font-weight: normal;
    letter-spacing: 0.2cm;
    margin-bottom: 0.5cm;
}
a.foto-next 
{
    display: block;
    float: left;
    width: 137px;
    height: 137px;
    background-image: url(../Images/pd-btt-next.png);
    background-repeat: no-repeat;
    background-position: center center;
    margin: 0px 11px 22px 11px;
    padding: 0px;
}
a.foto-next:hover
{
    display: block;
    float: left;
    width: 137px;
    height: 137px;
    background-image: url(../image/pd-btt-next-hover.png);
    background-repeat: no-repeat;
    background-position: center center;
    margin: 0px 11px 22px 11px;
    padding: 0px;
}
a.foto-prev 
{
    display: block;
    float: left;
    width: 137px;
    height: 137px;
    background-image: url(../image/pd-btt-prev.png);
    background-repeat: no-repeat;
    background-position: center center;
    margin: 0px 11px 22px 11px;
    padding: 0px;
}
a.foto-prev:hover
{
    display: block;
    float: left;
    width: 137px;
    height: 137px;
    background-image: url(../image/pd-btt-prev-hover.png);
    background-repeat: no-repeat;
    background-position: center center;
    margin: 0px 11px 22px 11px;
    padding: 0px;
}
#pd-photo-text-title
{
    font-weight: normal;
    color: rgb(168,131,120);
    padding-right: 0cm;
}
#pd-photo-text-title a 
{
    color: rgb(168,131,120);
}
#pd-photo-text-title a:hover 
{
    color: rgb(184,32,37);
}
#pd-photo-text-description 
{
    font-weight: normal;
    color: rgb(168,131,120);
    padding-left: 0.3cm;
}
#pd-photo-text-date 
{
    display: none;
    color: rgb(232,179,104);
    padding-left: 0cm;
}
.foto 
{
    margin: 0px 22px 22px 0px;
    float: left;
}
.foto a img
{
    width: 135px;
    height: 135px;
     -moz-border-radius: 0.15cm;
    -webkit-border-radius: 0.15cm;
    -khtml-border-radius: 0.15cm;
    border-radius: 0.15cm;
    border-style: solid;
    border-width: 1px;
    border-color: rgb(180, 180, 180);
    /*border-color: rgb(255, 247, 192);*/
    -webkit-filter: grayscale(1);
    filter: url("data:image/svg+xml;utf8,<svg%20xmlns='http://www.w3.org/2000/svg'><filter%20id='grayscale'><feColorMatrix%20type='matrix'%20values='0.3333%200.3333%200.3333%200%200%200.3333%200.3333%200.3333%200%200%200.3333%200.3333%200.3333%200%200%200%200%200%201%200'/></filter></svg>#grayscale");
    filter: gray;
}
.foto a:hover img
{
    border-color: rgb(184, 24, 30);
    -webkit-filter: grayscale(0);
    filter: none;
}
#tema-popis
{
    font-size: 0.41cm;
    color: rgb(115, 85, 71);
    max-width: 456px;
    text-align: justify;
}
#tema-popis p
{
     margin-top: 0px;
}
#page-content 
{
    display: block;
    margin-left: 4cm;
    padding-top: 0.5cm;
}
#page-content p
{
    margin-top: 0px;
    padding-top: 0px;
}
#page-content img {
    max-width: 100%;
}
#pd-btt-prev
{
    width: 57px; 
    height:57px; 
    background-image: url(../image/pd-btt-prev.png);
    position:absolute; 
    cursor:pointer; 
    top:50%; 
    left:-10px; 
    margin-top:-29px;
}
#pd-btt-prev:hover 
{
    background-image: url(../image/pd-btt-prev-hover.png);
}
#pd-btt-next 
{
    width: 57px; 
    height:57px; 
    background-image: url(../image/pd-btt-next.png);
    position:absolute; 
    cursor:pointer; 
    top:50%; 
    right:-10px; 
    margin-top:-29px;
}
#pd-btt-next:hover 
{
    background-image: url(../image/pd-btt-next-hover.png);
}
#pd-fb-like
{
    width: 50px;
    height: 50px;
    position: absolute;
    top:0px; 
    left:0px; 
}
#pd-btt-close {
    width: 45px; 
    height:45px; 
    background-image: url(../image/pd-btt-close.png);
    position: absolute; 
    top: 10px; 
    right: 10px; 
    cursor:pointer; 
}
#pd-btt-close:hover {
    background-image: url(../image/pd-btt-close-hover.png);
}
li.back {
    position: relative;
    margin-left: -1.1cm;
}
li.back a
{
    text-decoration:none;
    color: rgb(184, 24, 30);
    font-size: 0.36cm;
    letter-spacing: 0.05cm;
    font-weight: bold;
    background-image: url(../image/btt-back.png);
    background-repeat: no-repeat;
    background-position: left center;
    padding: 0.5cm 0cm 0.5cm 1.1cm;
    display: inline-block;
}
li.back a:hover
{
    background-image: url(../image/btt-back-hover.png);
}
@media only screen and (max-width: 480px) {
    .foto a img {
        width: 88px !important;
        height: auto !important;
    }
    #body-header, #body-content {
        width: 96% !important;
    }
    #menu-prace
    {
        width: 3cm !important;
        margin-left: 0.25cm !important;
    }
    #page-content
    {
        margin-left: 3.5cm !important;
    }
}
@media only screen and (max-width: 380px) {
    .foto a img {
        width: 4.5cm !important;
        height: auto !important;
    }

}
