html {
    --barva1: #000000; /*pozadí */
    --barva2: #d9930e; /*h1 pozadí odkazy th nav menu*/
    --barva3: #94560d; /*odkazy vybrané menu*/
    --barva4: #862804; /*odkazy zvýraznění*/
    --barva5: #ffefdf; /*td*/
    --barva6: #FDD877; /*narozené vrhy*/


}

a:link {color: var(--barva4)}
a:visited {color: var(--barva4)}
a:active {color: var(--barva3)}
a:hover {color: var(--barva3)}


body {
    font-family: "Calibri","Arial" , Courier , monospace;
    margin: 0px;
    background-color: var(--barva1);


}

.obal-stranky{
    width: 95%;
    margin: auto;
    background-color: white;
    position: relative;
}

/*hlavička*/
a.menici { text-decoration: none;  display: table-cell; vertical-align: middle; color: white;  text-align: center; width: 205px; height: 45px; background-image: url(obrazky/tlacitko.gif); }
a.menici:hover {text-decoration: none; color: white; text-align: center; display: table-cell; vertical-align: middle;  width: 205px; height: 45px; background-image: url(obrazky/tlacitko3.gif); background-position: center center;}

.hlavicka{
   
    width: 100%;
    
    background-color: var(--barva1);
    margin: 0px;
    padding: 0px;
   

}

.hlavicka-text{
    position: absolute;
    top: 0px;
    left: 50%;
    
    text-align: center;

}

.hlavicka-text-v{
    height: 20em;
    width: 40em;

    display: table-cell;
    vertical-align: middle;
}

.hlavickatext1 {
    color: var(--barva4);
    font-weight: bold;
    font-size: large;
    margin: 0px;
    padding: 0px;

}

.hlavickatext2 {
    color: var(--barva2);
    font-weight: bold;
    font-size: xx-large;
    margin: 0px;
    padding: 0px;

}

.hlavickatext3 {
    color: black;
    font-size: small;
    margin: 0px;
    padding: 0px;

} 

.hlavickatext4 {
    margin-left: 35%;
    font-size: medium;
} 

@media all and (max-width : 1200px) {
    .hlavicka-text-v{
        height: 15em;
    }
    .hlavickatext2 {
        font-size: x-large;
    }
    .hlavickatext4 {
        margin-left: 30%;
    }
}

@media all and (max-width : 1000px) {
    .hlavicka-text-v{
        height: 12em;
    }
    .hlavickatext3 {
        font-size:  small;
    }
    .hlavickatext4 {
        margin-left: 25%;
    }
}



/*odkazy*/
.odkazy{
    font-family: "Calibri","Arial" , Courier , monospace;
    font-size: 16px;
    font-weight: bold;
    background-color: var(--barva2);
    text-align:  center;

}

.toggle, [id^=drop] {
    display: none;

}

nav {
    text-align: center;
    background-color: var(--barva2);
}



nav ul {
    list-style: none;
    margin: 0;
    padding-left: 0;

}

nav ul a {
    text-decoration: none;
    background: var(--barva2);
    padding: 1rem;
    transition: background 0.5s;
    display: block;
    outline: 0;
    
}



nav a:link {color: black}
nav a:visited {color: black}
nav a:active {color: white}
nav a:hover {color: white}


nav li:focus-within > a {
    color: #FFFFFF;
    cursor: pointer;
}



/* Make the dropdown animate. */
.dropdown-content {
    min-width: max-content;
    overflow: hidden;
    max-height: 0;
    transition: max-height 1s;
}

.dropdown-content a {
    color: white;
    background-color: var(--barva3);
    padding: 0.5em 20px;
    border-radius: 25px 50px 25px 50px;
}
.dropdown-content a:link {color: white}
.dropdown-content a:visited {color: white}
.dropdown-content a:hover,
.dropdown-content li:focus-within > a {
    color: #FFFFFF;
    background: var(--barva4);
    cursor: pointer;

}

/* The max-height should be set to something that will always be a little bit bigger than the height of the content. */
.dropdown:hover .dropdown-content,
.dropdown:focus .dropdown-content,
.dropdown:focus-within .dropdown-content {
    max-height: 500px;
}

/* This makes the top-level navigation horizontal on desktop, and vertical on smaller screens. */

@media screen and (min-width: 800px) {
    nav > ul > li {
        margin: 0px;
        display: inline-block;
        z-index: 100;
    }

    .dropdown {
        position: relative;
    }

    .dropdown-content {
        position: absolute;  
        width: max-content;
    }

    .content {
        clear: both;
    }
}

/*tělo*/

p    {
    text-align: justify;
    margin-left: 5%;
    margin-right: 5%;
}

ol {
    margin-right: 5%;

}

ul {
    margin-right: 5%;

}

/*index*/
#indexv {display: block;}
#indexm {display: none;}
#velky {display: block;}
#maly {display: none;}

@media screen and (max-width: 850px) {
    #indexv {display: none;}
    #indexm {display: block;}
    #velky {display: none;}
    #maly {display: block;}
    
   
}

a.meniciindex { text-decoration: none;  display: table-cell; vertical-align: top;  color: white;  text-align: center; width: 205px; height: 45px; background-image: url(obrazky/tlacitko.gif); }
a.meniciindex:hover {text-decoration: none; color: white; text-align: center; display: table-cell; vertical-align: top;  width: 205px; height: 45px; background-image: url(obrazky/tlacitko3.gif); background-position: center center;}

.meniciobr {
    margin-left:  35%;
} 

div.novinky {
    width: 75%;
    float:left;
}


.uzaverky {
    margin-right: 20px; 
    width: 20%;
    float:right;
}

@media screen and (max-width: 850px) {
    div.novinky {
        width: 95%;
    }


    .uzaverky {
        width: 95%;
        margin-right: 5%;
    }

}

.uzaverka{
    text-align: center;
    background-color: #ffefdf; 
    border-radius: 10px;
    padding: 10px; 
    margin: auto; 

} 

.uzaverkanadpis {
    text-align: center;
    color: white; 
    background-color: #862804;
    border-radius: 10px;
    padding: 10px; 
    margin: auto; 

} 



.text{
    width: 90%;
    text-align: left;
    float: right; 


}
.clenove{
    float: left;
    width: 30%;
 
}




h1 {
    font-family: "Calibri","Arial" , Courier , monospace;
    color: var(--barva2);
    font-weight: bold;
    font-size: xx-large;
    width: 90%;
}



h2 {
    font-family: "Calibri","Arial" , Courier , monospace;
    color: var(--barva3);
    font-weight: bold;
    font-size:  x-large;
}

h3 {
    font-family: "Calibri","Arial" , Courier , monospace;
    color: var(--barva4);
    font-weight: bold;
    font-size: large;
}

h4 {
    font-family: "Calibri","Arial" , Courier , monospace;
    color: var(--barva4);
    font-weight: bold;
    font-size: medium;
}

h5 {
    font-family: "Calibri","Arial" , Courier , monospace;
    color: var(--barva1);
    
    font-size: small;
}
H6 {
    font-family: "Calibri","Arial" , Courier , monospace;
    font-size: medium;
    margin: 5px; 
}


.tabulka{
    text-align: left; 

}   

.tabulka th{
    text-align: center; 
    color: #ffffff; 
    background-color: var(--barva2); 
    padding: 15px; 

}     

.tabulka td{
    text-align: left; 
    background-color: var(--barva5); 	 
    padding: 7px; 
} 

.tabulka-mobil{
    width: 95%;
} 

.tabulka-mobil th{
    width: 25%;

} 


table.rodo {
    border: 1px solid #862804; 
    border-radius: 10px;
    border-spacing: 0px;
    width: 95%;

}
td.matka {

    background-color: #FDD877;
    width: 25%;
    border: 1px solid #862804; 
}

td.otec {

    background-color: #d9930e;
    width: 25%;
    border: 1px solid #862804; 
}
tr.info {

    background-color: #ffefdf; 
}

tr.info2 {


}
td.fotka {
  
  background-color: #ffffff;

 
}




div.strana {
  font-family: "Calibri" , Courier , monospace;
    background-color: #d9930e; 
  padding: 15px;
  
  width: 100%;
  top: 160px;
  text-align: left;
  }
  
 
div.strana2 {
    font-family: "Calibri" , Courier , monospace;
    background-color: #ffffff; 
    padding: 15px;
    width: 100%;
    text-align: left;
}

/*pata*/
.paticka{

    position: relative;  
    width: 100%;
    height: auto;
    text-align: center;
    clear: both;
    background-color: var(--barva4);


} 

.paticka-text{
    position: absolute;
    font-size: small;
    width: 100%;
    height: 100%;
    top: 70%; 
    text-align: center; 
    color: white; 	  
}


/*responzivní tabulka*/



@media only screen and (max-width: 1000px) {
    div.posuvnik{
        max-width: 100%; 
        overflow: auto;
    }
    div.posuvnik-mapa{
        max-width: 100%; 
        overflow: auto;
        height: 480px;
    } 
    #otoceni-tabulky-popisky table, 
    #otoceni-tabulky-popisky thead, 
    #otoceni-tabulky-popisky tbody, 
    #otoceni-tabulky-popisky th, 
    #otoceni-tabulky-popisky td, 
    #otoceni-tabulky-popisky tr { 
        display: block; 
    
    }

    #otoceni-tabulky-popisky thead tr { 
        position:  absolute;
        top: -9999px;
        left: -9999px;

    }


    #otoceni-tabulky-popisky td { 
        position: relative;
        width: auto;
        
        overflow-wrap: break-word;
        text-align:left;
        padding-left: 40%;
        
    }


    #otoceni-tabulky-popisky td:before { 
        /* Now like a table header */
        position: absolute;
        /* Top/left values mimic padding */
        top: 0px;
        left: 0px;
        width: 25%; 
        padding-left: 5px;
        font-size:  small;
        height: 100%;
        text-align:left;
        font-weight: bold;
        color: #ffffff; 
        background-color: var(--barva2); 
        overflow-wrap: break-word;
        vertical-align: middle;
    }

    #otoceni-tabulky-popisky td:before { content: attr(data-title); }

    .stridani-pozadi tbody tr:nth-child(even) td,.stridani-pozadi tbody tr:nth-child(even) th{background-color:#f9f9f9;}

    .stridani-pozadi-bunky td:nth-child(even){background-color:#f9f9f9;}
    
    
    .clenove{
    
    width: 45%;
 
}
    
    
    
    
}

@media only screen and (max-width: 800px) {

    #otoceni-tabulky table, 
    #otoceni-tabulky thead, 
    #otoceni-tabulky tbody, 
    #otoceni-tabulky th, 
    #otoceni-tabulky td, 
    #otoceni-tabulky tr { 
        display: block; 

    }

    #otoceni-tabulky thead tr { 
        position:  absolute;
        top: -9999px;
        left: -9999px;

    }


    #otoceni-tabulky td { 
        position: relative;
        width: auto;  
        overflow-wrap: break-word;
        text-align:center;

    }


    #otoceni-tabulky td:before { 
        /* Now like a table header */
        position: absolute;
        /* Top/left values mimic padding */
        top: 0px;
        left: 0px;
        width: 30%; 
        padding-right: 0px; 
        overflow-wrap: break-word;
        text-align:left;
        font-weight: bold;
        color: #ffffff; 
        background-color: var(--barva2); 
    }
    #otoceni-tabulky td:before { content: attr(data-title); }
    
    .clenove{
    
    width: 90%;
 
}
}

/*narozené vrhy*/
table.sten {
    border: 2px solid var(--barva4); 
    width: 95%;
    border-radius: 10px;
    border-spacing: 0px;
}

td.pes {
    background-color: var(--barva2);
}

td.fena {
    background-color: var(--barva6);
}

th.stred{
    text-align: center; 
    color: #ffffff; 
    background-color: var(--barva2); 
    padding: 15px 2px 15px 2px; 

} 
td.stred {
    text-align: center; 
    background-color: var(--barva5);	
    padding: 7px; 

}