html{  
}

body { box-sizing: border-box;
       background: url(pozadi_h.jpg) 0 0 repeat fixed;
       background-color: #69A3EA;
       min-width: 600px;
       max-width: 1000px;
       margin: 0px auto 0px auto;
       font-family: Calibri,Verdana,"Times New Roman";
       font-size: 20px;
       border: 0px solid lime;
}

@media screen and (max-width: 1000px) {
    body { 
    }
}  
     
header {
        box-sizing: border-box;
        max-width: 1000px;
        background-color: #002F8B;
        height: 167px;
        border-left: 3px solid #ffffff;
        border-right: 3px solid #ffffff;        
//        margin: 0px auto 0px auto;
        z-index: 1;
}

nav div#logo {
        background: url('kresba_logo_01.jpg') no-repeat;
        background-size: 80px 52px;
        float: left;
        width: 78px;
        height: 52px;
        margin: -4px -40px 0px 0px;
}

nav ul#polozka {
        margin: 12px 0px auto 84px;
        padding: 0px 0px 0px 0px;
        list-style-type: none;
        display: flex;
        justify-content: start;
}

nav#menu2 ul li {
        box-sizing: border-box;
        background-color: #002F8B;         /* tmavě modrá */
        padding: 0px 0px 0px 0px;
        margin: 0px 0px 0px 0px;
        font-family: Verdana;
        font-weight: bold;
        font-size: 15px;
        height: 45px;                    
        width: 182px;
        line-height: 2.7em;
        text-align: center;
        border-left: 1px solid white;
}

nav#menu2>ul>li:hover {
        background: #004CC0;                /* světlejší modrá */
        border-bottom: 1px solid #555555;
}

nav#menu2 ul li ul li {
        background-color: #99CCFF;          /* světle modrá */
        font-size: 12px;
        line-height: 2.7em;
        height: 35px;
        width: 183px;
        margin: 0px 0px 0px 0px;
        border-top: 1px solid #dddddd;
        border-bottom: 1px solid #555555;
        border-right: 0px solid white;
        border-left: 0px solid white;
}  

nav#menu2 ul li ul {
        display: none;
        list-style-type: none;
        position: relative;
        left: -41px;
        top: 2px;
}

nav#menu2 ul li:hover ul{
        display: block;
}

nav#menu2 li a {
        display: block;
        color: #ffffff;
        text-decoration: none;
        padding: 0px 0px 3px 0px;
        border: 0px solid #4169E1;
}

nav#menu2 li ul li a {
        color: #7C7671;                  /* šedá */
        border-left: 0px solid #4169E1;
}        

nav#menu2 li ul li a:hover {
        color: #800000;
//        background-color: #99CCFF;
} 

nav#menu2 ul li ul li.aktivni a {
        color: #800000;
        background-color: #99CCFF;        
} 
    
/*******************************************************************************/         
article A     {color: #0000CD;}
article A:visited  {color: #7C7671;}
article A:hover    {color: maroon;}  
article A:active   {color: #FF6020;}

article {width: 100%;
       box-sizing: border-box;
       border: solid white;
       border-width: 0px 3px 3px 3px;
       background-color: #ece1cd; 
       color: #0000CD; 
       font-size: 18px;
       line-height: 1.4em;               /*mezera mezi řádky*/   
       padding: 50px 20px 2px 20px;
} 

article P {text-align:justify;
    }

article H1{font-family: Cambria,"";
       font-size:1.45em;
       text-align: center;
       color: #9ADCFF;
       background-color: #CA7E5B;
       border-top: 3px solid #DEAF9A;
       border-bottom: 3px solid #85472B;
       border-right: 3px solid #85472B; 
       border-left: 3px solid #DEAF9A;
       margin-top: -10px;
    }  
    
article H2{font-family: Cambria,"";
   font-size:1.17em;
   text-align: center;
   color: #645F5F;
   background-color: #A4CBF4;
   border-top: 3px solid #EBF1EC;
   border-bottom: 3px solid #5B72AF;
   border-right: 3px solid #5B72AF;
   border-left: 3px solid #EBF1EC;
   padding-top: 1px;
   margin-bottom: 22px;
   }    
     
article.pozadi1 {background: url(Obrazky/kresba01.jpg) center center repeat fixed;     
    }

article.pozadi2 {background: url(Obrazky/vorari.jpg) center center repeat fixed;     
    }
     
/*******************************************************************************/ 

a.youtube:link {background-color: transparent; 
    background: url(youtube-icon.gif) center center no-repeat;
    background-size: 32px 32px;
    width: 32px;
    height: 32px;
    border: 0px solid #C66;
    display: inline-block;
    vertical-align: middle;
    }

a.pdf:link {background-color: transparent; 
    background: url(pdf-icon.gif) center center no-repeat;
    background-size: 24px 32px;
    width: 24px;
    height: 32px;
    border: 0px solid #C66;
    display: inline-block;
    vertical-align: middle;
    } 
    
TABLE#gal_pov {border: 1px solid #800000;
    width: 400px;   
    margin-left: auto;
    margin-right: auto;
    }     

TABLE.v_textu {border: 1px solid #800000;
    border-spacing: 2px;
    width: 400px;
    table-layout: auto;
    margin-left: auto;
    margin-right: auto;
    border-collapse: collapse;
    }

img.obr_tab {
    width: 100%;
    margin: 0px 0px -7px 0px; 
    box-sizing: border-box;
    } 

TD A:link IMG {border: 4px double white;}

TD A:hover IMG {border: 4px solid #800000;} 

TD {border: 0px solid #800000; 
   padding: 4px;}

TD.dolni {border: 1px solid #800000; 
   padding: 0px;
   background: #EFF0E7;
   } 

TD.horni {border: 1px solid #800000; 
   padding-left: 5px; padding-top: 5px; padding-bottom: 5px;
   font-size: 0.7em;
   font-family: Verdana, Helvetica CE, Arial CE, Helvetica, Arial, sans-serif;
   color: #7C1C1E;
   font-weight: 400;
   line-height: 1.4em; 
   background-color: #FED09E; 
   text-align:center;
   }
/*******************************************************************************/     

p.prvni_vetsi::first-letter {font-size: 180%;        /*první písmeno větší*/
   color: red; 
   float: none;
   vertical-align: -1px;
   text-shadow: 1px 1px 2px #999999;
   border: 0px solid #9ADCFF;
   }

span {color: #FF4500;
  text-shadow: 1px 1px 2px #999999;	
   }
   
HR {background-color: #800000;
   width: 100%;
   height: 2px;
   border-style: none;
   margin-top: 20px;
   margin-bottom: 20px;
   }   

HR.krajni{background-color: #CA7E5B;
   height: 10px;
   border-bottom: 2px solid #9ADCFF;
   }

HR.stredni{background-color: #CA7E5B;
   height: 5px;
   }   
  
P#kurziva {
   font-size: 100%;
   font-family: cursive CE;
   font-style: italic;
   }  

IMG {border: 0px solid white;
   margin: 0px 0px -7px 0px; 
   } 

img#jadroMesta {background: url(Obrazky/planek_400.jpg) 0 0 no-repeat ; 
   }
   
/*******************************************************************************/   

div.uvod1 {margin-left: auto;      /*úvodní text na stránce Most jako symbol*/
   margin-top: 40px;
   margin-bottom: 20px;
   margin-right: auto;
   padding: 0 15px 0 15px; 
   box-sizing: border-box;
   width: 70%;
   border: 1px solid blue;
   } 
   
div.uvod1 p {text-align: left;
   font-style: italic;
   font-size: 20px;
   }

div.uvod1 p.prvni_vetsi::first-letter {font-size: 180%; 
   color: red; 
   float: none;
   vertical-align: -1px;
   text-shadow: 1px 1px 2px #999999;
   border: 0px solid #9ADCFF;
   }

img.uvod1 {display: block;         /*úvodní obrázek na stránce Most jako symbol*/
   box-sizing: border-box;
   margin-top: 20px;
   margin-left: auto;  
   margin-right: auto;
   margin-bottom: 20px;
   width: 55%;
   border: 7px solid #E9E9E9;  //#A4CBF4; 
   border-style: ridge;    //outset;
   border-radius: 12px;
   } 
   
@media screen and (min-width: 900px) {   /*do šířky 900px text i obrázek pod sebou*/
 div.uvod1 {
    width: 50%;
    float: left;
    margin-top: 10px;
    margin-left: 10px;
   }

 img.uvod1 {
    width: 45%;
    float: right;
    margin-top: 100px;
    margin-right: 10px;
   }
}    
   
IMG.uvod2 {margin: 40px auto 0px auto;  /*velký obrázek na stránce Most jako symbol*/
   width: 85%;
   border: 1px solid #800000;
   border-radius: 3px;
   box-shadow: 2px 2px 7px #1c2228;
   display: block;
   }   
   
/*******************************************************************************/      

UL.seznam {
      border: 0px solid #C66;
      text-align: justify;
      margin-top: -15px; margin-bottom: 10px; margin-left: 0%;
      font-size: 95%;
      color: #0000CD;
   }

blockquote {border: 0px solid #C66;
     background-color: #f6f6f6;
     padding: 5px 10px 10px 10px;
     margin: 0px auto 20px auto;
     width: 80%; 
     font-size: 0.75em;
     text-align: justify;
     line-height: 1.3em;
     border-radius: 10px;
     box-shadow: 2px 2px 7px #c0c0c0;  // #1c2228;
   }
     
/*******************************************************************************/ 

div#menu {
        background-color: #eadfcb;
        display: none;
        position: relative;
    //    float: left;
    //    top: 150px; 
        top: -80px;
    //    left: -2px;    //-233px;
        width: 320px;
        height: 820px;
  //      margin: 0px 0px 0px 0px;
        border: 2px solid white;   
        border-radius: 10px;
        z-index: 2;
}

@keyframes pohybTam {
       from {left: -324px;}
       to {left: -2px;}
}

@keyframes pohybZpet {
       from {left: -2px;}
       to {left: -324px;}
}

#vyber, #zrus, #nevyber    {
        background-size: 70px 48px;
        display: block;
        width: 70px;
        height: 48px;
        position: relative;
        top: -122px;
        left: 125px;
        border: 2px solid white;  //#FF6020;  //#CF6020;   
        border-radius: 5px;
        z-index: 0;
}

#vyber {
        background: url('tri_carky.png') no-repeat;
        cursor: pointer;
}        

#zrus {
        background: url('krizek.png') no-repeat;
        display: none;
        cursor: pointer;
}        

#nevyber {
        background: url('tri_carky_s.png') no-repeat;
        background-size: 70px 48px;
        display: none;
}

div#vyber p {
        color: white;
        text-align: center;
        line-height: 0.3em;
}

div#menu ul li {
        font-weight: bold;
        font-variant: small-caps;
        font-size: 22px;
        color: blue;
        list-style-type: none;
        line-height: 1.8em;
}      

div#menu ul.sekce {
        border-bottom: 2px solid #FF6020;
        margin: 0px 0px -20px -40px;
        padding: 0px 0px 10px 68px;
} 

div#menu ul.sekce li {
       font-weight: normal;
       font-variant: normal;
       font-size: 0.9em;
       list-style-image: url(ikona_most1.ico);
}
                                                
#menu a {
        color: blue;
        text-decoration: none;
}

#menu a:hover {
        color: #FF6020;
        text-shadow: 1px 1px 2px #999999;    
}

/*******************************************************************************/  
 
 /*Patička*/  

footer {background-color: #002F8B;
       width: 100%;
       height: 64px;
       box-sizing: border-box;
       padding: 4px 0px;   
       border: solid white;
       border-width: 0px 3px 3px 3px;
       margin: 0 auto 0 auto;
       display: flex;
       justify-content: space-between;
       }
     
footer p.copyright {font-family: Verdana;
       font-style: italic;
       width: 200px;
       color: white;
       font-size: 65%;
       font-weight: normal;
       line-height: 1.4em;
       margin-top: 8px;
       margin-right: 15px;
       text-align: center;
       border: 0px solid white;
       }   
       
#logo_dolni {
   background: url(Obrazky/kresba_logo_01.jpg) no-repeat;
   background-size: 88px 60px;
   width: 95px;
   height: 60px;
   margin-top: -4px;
   border: 0px solid white;
   }  

footer p.hosting {color: white;
   font-size: 65%;
   margin-top: 10px;
   margin-right: 20px;
   border: 0px solid white;
   }     

/*******************************************************************************/          

A#navrat:link     {color: #0000CD; text-decoration: none;}     
A#navrat:visited  {color: #0000CD;}
A#navrat:hover    {color: #FF6020;}      
A#navrat:active   {color: #FF6020;}

A#navrat {border: 1px solid blue;
       padding: 2px 4px 2px 4px;
       border-radius: 6px;
       box-shadow: 2px 2px 4px #999999;
    }
    
/*******************************************************************************/      

/*Fotogalerie:*/

.fotogalerie img {
        display: block;
        margin: 3px auto 3px auto;
        border: 4px double white;
        padding: 0px;
//        box-shadow: 3px 3px 6px #999999;
    }    
    
.fotogalerie img:hover {
        border: 4px solid #800000;
    } 
    
.fotogalerie {
        background-color: #A4CBF4; 
        border: 1px solid gray;
        padding: 6px 0px;
//        box-shadow: 3px 3px 6px #999999;
    //    width: 100%;
        margin: 20px auto 20px auto;
        display: grid;
        row-gap: 2px;
        grid-template-columns: repeat(4, auto);
        grid-auto-rows: auto;
        justify-content: space-evenly; 
    }  
    
@media screen and (min-width: 710px) and (max-width: 929px) {
    .fotogalerie {
    grid-template-columns: repeat(6, auto); //minmax(108px, 110px));
    }

    }  

@media screen and (min-width: 930px) {
    .fotogalerie {
     grid-template-columns: repeat(8, auto); //minmax(108px, 120px));
    }

    }  
    
/*******************************************************************************/    

/*Fotogalerie - inundační most Brandýs, povodeň*/

.galerie-mala img {
        display: block;
        margin: 0px auto 0px auto;
        border: 4px double white;
        padding: 0px;
    //    box-shadow: 3px 3px 6px #999999;
    }    
    
.galerie-mala img:hover {
        border: 4px solid #800000;
    } 
    
.galerie-mala {
        background-color: #A4CBF4; 
        border: 1px solid gray;
        padding: 8px 9px;
    //    box-shadow: 3px 3px 6px #999999;
        max-width: 490px;
        margin: 20px auto 10px auto;
        display: grid;
        grid-template-columns: repeat(4, 1fr);     //minmax(auto, 1fr));
    //    justify-content: space-between;
        gap: 8px;    
    }  

/*******************************************************************************/