/*****Hlavička*****/

body                  { margin-bottom:      0; padding-bottom:0;}
#obalvseho            { margin-bottom:      -20px; padding-bottom:     1em;}

#hlavicka
                      { /*position:           relative; to by pomohlo jen pro vnoreny relative nebo absolute, ale pro vnoreny fixed je to k nicemu*/ 
                      }
                      
#stropvyhledu
                      { 
                        width:              80em; /*aby se spravne umistila social vysilacka => a plyne z toho, ze tenhle styl vyzaduje i dostatecnou sirku, nejen vysku !!! */
                        position:           fixed;
                        height:             1px;  /*aby neviditelny strop o vasce celeho CB nebranil v moznosti kliknout napr na h0 nebo proste na to, co je pod nim
                                                    z-index nesel pouzit, protoze cely strop zalez dozadu, vc. CB, ktery melo byt videt, a ktery pak zadnym zindexem neslo vytahnout dopredu
                                                  */                                                 
                        margin-top:         -10px;              /*páč bez toho je nad stropem 10px mezera a zobrazuje se tam i scrollovaný obsah*/
                        border-top:          10px solid black;  /*  -""-  */
                        

                        z-index:            1;   /*aby cb nebylo prekryto vyhledavanim, ktery ma relative - a musi se to nastavit tady, u zanorenyho CB to bylo k nicemu*/                            
                      }
  #social
                      { /* nejde, protoze se pozice pocita od praveho kraje monitoru, ne od praveho kraje vyhledu, u fixed to nejde vyresit nadrazenym relative                        
                        position:           fixed;
                        right:              0;
                        float:              none;
                        */ 
                      }
  #vyhledavani        { 
                        position:           absolute;
                        bottom:             0;
                        right:              0; 
                      }

 

/*****Pata*****/                      
#pata
                      { width:              80em; /*80em jako nahore u hlavicky - musi se dat vynucene natvrdo 80em...; ale minus padding, kdyz jeste byl pro celou patu*/
                        position:           fixed;
                        bottom:             0;
                      }
                      
                      
                      
/***Ztlumit ovladani a soustredit se********/


/* !!! id je ovladaci div; trida je vlastnost body pri aktivaci !!! */

@media (min-width: 82em)
{

/*Ovladaci prvek - #ztlumit*/

#ztlumit
                      { position:           fixed;
                        top:                0;
                        right:              0;
                        display:            block!important;
                        color:              white;
                        background:         black;
                        width:              328px;
                        max-width:          calc(50% - 41em);
                        border-radius:      0 0 0 1.5em;                      
                      }


#ztlumit #ztlumitaktivovat, #ztlumit #ztlumitdeaktivovat  
                      { background-image:   url('/obrazky/rozlozeni/osvetleni-rozsviceno.jpg');
                        background-position:center top;
                        background-repeat:  no-repeat;

                        width:              100%;
                        background-size:    auto auto;
                        border-radius:      0 0 0 1.5em;
                        
                        min-height:         calc(94px + 1em);                             
                      }

#ztlumit #ztlumitdeaktivovat 
                      { background-image:   url('/obrazky/rozlozeni/osvetleni-zhasnuto.jpg');
                      }                     
                      


/*
#ztlumit>div#ztlumitaktivovat>img   Pro obrazek, kdyz byl ve svetle
                      { display:            block; 
                        z-index:            1;         
                        margin:             21px auto 0;                        
                        height:             25px;                
                      }
*/                      
                      
#ztlumit>div#ztlumitaktivovat>span>img /*Pro obrazek po prestehovani dolu do spanu*/
                      { 
                        display:            inline-block; 
                        z-index:            1;         
                        height:             25px;
                        background:         #ffff99;
                        color:              black;
                        padding:            4px;
                        border-radius:      5px;                
                      }
#ztlumit>div#ztlumitaktivovat>span
                      { display:            block;
                        z-index:            1;         
                        color:              #ffff99;
                        /*padding:            13px 0.7em 0.3em;   Kdyz byl obrazek ve svetle*/
                        padding:            59px 0.7em 0.3em;     /*Po prestehovani obrazku dolu do spanu*/
                        text-align:         center;
                        font-size:          1.5em;
                        font-weight:        bold;                
                      }

#ztlumit>div#ztlumitdeaktivovat>span
                      { display:            block;
                        z-index:            1;         
                        color:              #ffffcc;
                        padding:            75px 0.7em 0.3em;
                        text-align:         center;
                        font-size:          1.5em;
                        font-weight:        bold;                
                      }



#ztlumit a
                      { color:              transparent;
                        text-decoration:    none;
                        padding:            1em 1em 0.5em;
                        min-height:         94px;         
                        display:            block;      
                        border-radius:      0 0 0 1.5em;
                        position:           absolute;
                        z-index:            2;                                 
                        top:                0;
                        left:               0;
                        width:              90%;
                        width:              calc(100% - 2em);            
                      }
#ztlumit a:hover, #ztlumit a:focus
                      { color:              black;
                        background:         yellow;
                      }

 





/*Akce - .ztlumit*/

body.ztlumit          { background-image: none!important; }
.ztlumit #obalvseho
                      { background: black!important; border-color:black!important; }
.ztlumit #levysloupec, .ztlumit #pravysloupec, .ztlumit #stropvyhledu, .ztlumit #hlavicka #h0isnohama .dodatkovatabulkaskok, .ztlumit #vyhledavani, .ztlumit #pata
                      { opacity: 0.05;}
.ztlumit #hlavicka
                      { opacity: 0.5;}                      
.ztlumit #levysloupec:hover, .ztlumit #pravysloupec:hover, .ztlumit #stropvyhledu:hover, .ztlumit #hlavicka #h0isnohama:hover .dodatkovatabulkaskok, .ztlumit #vyhledavani:hover, .ztlumit #pata:hover, 
.ztlumit #levysloupec:focus-within, .ztlumit #pravysloupec:focus-within, .ztlumit #stropvyhledu:focus-within, .ztlumit #hlavicka #h0isnohama:focus-within .dodatkovatabulkaskok, .ztlumit #vyhledavani:focus-within, .ztlumit #pata:focus-within, 
.ztlumit #hlavicka:hover,
.ztlumit #hlavicka:focus-within
                      { opacity: 1;}

.ztlumit #main  
                      { background-image:  none!important;
                        margin-bottom:     1px!important;/*pate vypnuto fixed*/
                      }
.ztlumit #pata
                      { position: relative; }

} /* media - podminka rozmery - konec*/


/*   Horizont s obrázkem - v případě, že je místo */

@media (min-width: 65.5em) and (min-height: 33em)
{
/*screen atd. je vyreseno uz v html pri vkladani barev; 
vlozenim zde se eliminuje i nocni a zimni zobrazeni; 
barvy.css se vkladaji az po rozlozeni, takze se to nepere*/

body                  { margin-top:0;}

#obalvseho            { border-left:         solid 10px #494a4e;
                        /*border-top:          solid 1px #494a4e;*/
                        border-radius:       7px 0 0 0; /* Puvodne bylo 1em 0 0 0 , coz sedelo k stropvyhledu border-top 10px, ale jak jsem ten border-top snizil, tak jsem musel zmensit i ten levy horni radius*/
                        position:            relative; /*Kvuli napozicovani jazyku - vytazeni z leveho sloupce nahoru do hlavicky, kde v tomto zobrazeni vznikne misto*/
                                             /* !!! v uzkem PC zobrazeni, kde social tece dolu a hledani je na horni hrane obsahu, dostane relativni pozici levy sloupec, ne tento obal !!! */ 
                      }

#obalvseho #stropvyhledu
                      { margin-top:          0px;
                        border-top:          5px solid #494a4e; /* Puvodne bylo 10px a bylo to hezke; ale pri skoku na id nejake h3 byla z nadpisu videt sotva polovina*/                        
                        background:          black;
                        height:              0px; /* Puvodne bylo 1px a vytvarelo to tenky cerny predel; pak snulovano, aby byl jen nizky sedy strop*/              
                        top:                 0px; /*kvuli hornimu paddingu hlavicky*/                        
                      }


#hlavicka
                      { 
                        padding-top:         10px; /*kvuli vetsimu stropu*/
                        /*background-image:    url('/obrazky/rozlozeni/horizont/2017/top-2.jpg'), url('/obrazky/rozlozeni/horizont/bg-repeat-right.jpg');*/
                        background-repeat:   no-repeat, repeat-x;                      
                        background-position: left bottom, left bottom;
                        /*background-color:    #014cb0;*/
                        background-size:     59.555em 106px, auto;
                      }

#hlavicka #h0nohy
                      { /*position:           relative;*/
                        
                        min-height:          106px; 
                        /*background-image:    url('/obrazky/rozlozeni/horizont/kolo.png') /*, url('/obrazky/rozlozeni/horizont/bg-center.jpg')/*, url('/obrazky/rozlozeni/horizont/bg-repeat-center.jpg')*/; 
                        background-repeat:   no-repeat /*, no-repeat/*, repeat-x*/;                      
                        background-position: right 85% /*, right bottom/*, right bottom*/;
                        /*pokusy pro napozicovani silnice bez -origin pro ruzny pomer em vs px selhaly, protoze pozice 100%-0.25em neplati pro pravy roh obrazku, ale pro adekvatni pomerny bod obrazku */
                                                                                /*calc(100% - 0.25em) /*right /*calc(100% - 40.5em + 517px)*/
                        background-size:     auto /*, 40.5em 106px*/;
                        background-origin:   padding-box;/*, content-box; /*padding-box je default; content-box umoznuje odhodit o padding*/
                        /*padding-right:       0.1em;*/
                        margin:             0 0.25em; /* bezne 0.8em, zde roztazeni nohou znacky dal od silnice pro vytvoreni mista pro travu pri navazujici silnici horizontu na silnici obsahu bez zubu*/
                      }



#vyhledavani          { bottom:              53px;
                      }

#vyhledavani form div { 
                        /*background-color:    #015cc0;*/
                        padding:             0.2em 0em 0.75em 0.75em;
                        position:            relative;
                        top:                 -1em;
                        border-radius:       1em;
                      }
                      
#vyhledavani input         
                      { margin-top:         0.05em;
                        padding:            0.05em 0.3em;
                        max-width:          9.7em;
                      }

#main                 { /*background:         #0a0a0a;*/}


#main h1              { margin-top:         0.4em;}


#jazyky               { position:           absolute; 
                        top:                14.5em;  
                        left:               2.1em; 
                      }

#jazyky .jazyk        { transform: skew(0deg,-7deg);
                      }
                      
#hlavicka:hover + #levysloupec #jazyky .jazyk,
#levysloupec:hover #jazyky .jazyk,
#levysloupec:focus #jazyky .jazyk
                      { transform: skew(0deg,0deg);
                      }                      
#levysloupec:focus-within #jazyky .jazyk
                      { transform: skew(0deg,0deg);
                      }

#jazyky:hover         { /*v mensim zobrazeni staci totez pro levysloupec*/  
                        /*background:         rgba(1,142,14,0.7)*/
                      }                      


#hlavninadmenu, #menu, #menunohy /*3D efekt*/
                      { /* transform: skew(0deg,-3deg); */
                      }

#levysloupec:hover #hlavninadmenu, #levysloupec:hover #menu, #levysloupec:hover #menunohy
                      { transform: skew(0deg, 0deg);
                      }
#levysloupec:focus-within #hlavninadmenu, #levysloupec:focus-within #menu, #levysloupec:focus-within #menunohy
                      { transform: skew(0deg, 0deg);
                      }
                      
                      

.billboardisnohama    {
                        transform: skew(0deg,7deg);
                      }

#pravysloupec   
                      {
                        padding-top: 1.5em;
                      }

#pravysloupec:hover ,
#pravysloupec:focus 
                      {
                        padding-top: 0.5em;
                      }
#pravysloupec:focus-within   
                      {
                        padding-top: 0.5em;
                      }

#pravysloupec:hover        .billboardisnohama,
#pravysloupec:focus        .billboardisnohama
                      {
                        transform: skew(0deg,0deg);
                      }
#pravysloupec:focus-within .billboardisnohama   
                      {
                        transform: skew(0deg,0deg);
                      }



#pata                 { }
#pata:hover           { 
                        border-top:         solid 5px black;
                      }
  #pata #validita a#pataskoknahlavicku
                      { 
                      }   
  #pata #validita a#pataskoknahlavicku:hover
                      { 
                      } 


                        
} /*  Konec - Horizont s obrázkem - v případě, že je místo */