/* Made with PHP-CSS3 by WilomanCZ */
/* Last update: [11/11/26 00:11] */

/* ==============================================
  CSS Proměnné (Centrální paleta barev)
==============================================
*/
:root {
  --barva-cerna: #000;
  --barva-bila: #fff;
  --barva-seda-tmava: #333;
  --barva-seda-stredne-tmava: #555;
  --barva-seda: #888;
  --barva-seda-stredni: #999;
  --barva-seda-svetla: #aaa;
  --barva-seda-velmi-svetla: #ccc;
  --barva-seda-pozadi: #dedede;
  --barva-seda-pozadi-hover: #d6d6d6;
  --barva-seda-pozadi-tlacitka: #ededed;
  --barva-seda-okraj-svetly: #ddd;
  --barva-seda-stiny-jazyk: #dddddd;
  --barva-seda-stiny-box: #9d9d9d;
  --barva-seda-stiny-box-vnitrni: #a1a1a1;
  --barva-seda-stiny-infopanel: #dfdfdf;
  --barva-seda-stiny-infopanel-vnitrni: #afafaf;
  --barva-seda-stiny-svatky: #919191;
  --barva-seda-tabulka-hlavicka: #575757;
  --barva-seda-tabulka-radek: #fbfdf6;
  --barva-seda-odkaz-navstiveny: #555;
  
  --barva-pozadi-hovertext: #555555cc;
  --barva-pozadi-hovertext-dark: #f0f0f0cf;
  --barva-text-hovertext-dark: #000;
  
  --barva-box-pruhledna: #9999aaaf;
  --barva-infopanel-pruhledna: #ffffffaa;
  --barva-article-pruhledna: #efefefc9;
  --barva-article-hover-pruhledna: #efefefe9;
  --barva-article-pruhledna-chat: #efefef;
  --barva-article-pruhledna-chat-zobraz: #f1f1f1;

  --barva-okraj-main: #afa;
  --barva-okraj-odkazy: #cfc;
  --barva-okraj-aside-fallback: #dfd; /* Původní fallback background? */
  --barva-stiny-aside-vnitrni: #393939;

  --barva-varovani-pozadi: #ff474c;
  --barva-online: #67a52c;
  --barva-online-text: #5dc123;
  --barva-offline: #ff474c;
  --barva-offline-text: #ff474c;
  
  --barva-menu-tlacitko-okraj: #a3a3a3;
  --barva-menu-tlacitko-hover-text: #adffad;
  --barva-tlacitko-hover-pozadi: #04AA6D;

  --barva-chat-odeslat-text: #161616;
  --barva-chat-odeslat-pozadi: #67ff2c;
  --barva-chat-odeslat-pozadi-hover: #67a52c;

  --barva-tabulka-hover: #608117;
  --barva-tabulka-hover-border: #0c0;
  --barva-odkaz-hover: #0f0;
  
  --barva-spoiler-okraj: #ccc;
  --barva-spoiler-pozadi: #f9f9f9;
  --barva-spoiler-summary-pozadi: #eee;
  
  --barva-galerie-stiny: rgba(0,0,0,0.1);

  /* --- Ikony Menu --- */
  --icon-hover-shadow: #555;
  --icon-hover-bg: #0d0;
  --icon-text-color: #dd0;
  --icon-text-shadow: #000;

  --icon-login-shadow: #0f0;
  --icon-login-bg: #E5F4D9;
  --icon-login-bg-hover: #0d0;

  --icon-logout-shadow: #EE6B6E;
  --icon-logout-bg: #FFE5E5;
  --icon-logout-bg-hover: #D00;

  --icon-download-shadow: #EE6B6E;
  --icon-download-bg: #FCBFBF;
  --icon-download-bg-hover: #EE6B6E;

  --icon-chat-shadow: #26990f;
  --icon-chat-bg: #E5F4D9;
  --icon-chat-bg-hover: #26990f;

  --icon-tags-shadow: #8eb1c2;
  --icon-tags-bg: #c8dfea;
  --icon-tags-bg-hover: #acc8d7;

  --icon-rss-shadow: #ff5f00;
  --icon-rss-bg: #fdfdfd;
  --icon-rss-bg-hover: #ff8b47;

  --icon-galery-shadow: #FCAE1E;
  --icon-galery-bg: #FFCEB7;
  --icon-galery-bg-hover: #FCAE1E;

  --icon-soutez-shadow: #BBBB5B;
  --icon-soutez-bg: #FFFFBB;
  --icon-soutez-bg-hover: #BBBB5B;

  --icon-soutez2-shadow: #E5B80B;
  --icon-soutez2-bg: #fdfdfd;
  --icon-soutez2-bg-hover: #D4AF37;

  --icon-kalendar-shadow: #0f0;
  --icon-kalendar-bg: #C2E0AA;
  --icon-kalendar-bg-hover: #0d0;

  --icon-info-shadow: #afd9e6;
  --icon-info-bg: #C6F3FF;
  --icon-info-bg-hover: #8EE8FF;

  --icon-weather-shadow: #8b6c5c;
  --icon-weather-bg: #EAE4DD;
  --icon-weather-bg-hover: #A08679;

  --icon-speedtest-shadow: #ff0;
  --icon-speedtest-bg: #fdfdfd;
  --icon-speedtest-bg-hover: #dd0;

  --icon-nsc-shadow: #E8BCF0;
  --icon-nsc-bg: #EBE8FC;
  --icon-nsc-bg-hover: #DA8EE7;
}

/* ==============================================
  Základní styly
==============================================
*/
.hovertext {
  position: relative;
  display: inline-flex; /* Pomáhá správně držet proporce s ikonou uvnitř */
}

.hovertext:before {
  content: attr(title);
  position: absolute;
  z-index: 10;
  visibility: hidden;
  opacity: 0;
  bottom: 110%;
  left: 50%;
  transform: translateX(-50%);
  
  /* --- ZMĚNA ZDE: Flexibilní šířka a zalamování --- */
  width: max-content;      /* Přizpůsobí se krátkému textu... */
  max-width: 120px;        /* ...ale nikdy nebude širší než 120px (takže nepřeteče okraj) */
  white-space: normal;     /* Dovolí textu odřádkovat */
  word-wrap: break-word;   /* Rozdělí i extrémně dlouhá slova bez mezer */
  
  /* --- ZMĚNA ZDE: Omezení přesně na 3 řádky --- */
  display: -webkit-box;
  -webkit-line-clamp: 3;           /* Uřízne text po 3. řádku */
  -webkit-box-orient: vertical;
  overflow: hidden;                /* Schová vše, co by chtělo přetéct dál */
  
  /* Původní vzhled */
  background: var(--barva-pozadi-hovertext);
  color: var(--barva-bila);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.2;        /* Doporučuji přidat, ať jsou řádky blízko sebe */
  text-align: center;
  border-radius: 5px;
  padding: 6px 8px;
  
  transition: opacity 0.2s ease, visibility 0.2s ease, bottom 0.2s ease;
}

.hovertext:hover:before,
.hovertext.dotyk-aktivni:before {
  visibility: visible;
  opacity: 1;
  bottom: 120%;
}


@media (prefers-color-scheme: dark) {
  /* Dark mode - specifická pravidla */
  .hovertext:before{background:var(--barva-pozadi-hovertext-dark);color:var(--barva-text-hovertext-dark);}
  
}

* {max-width:100%}
html {overflow-y:scroll;}
html,body,#wrapper{font-family:'Exo 2',sans-serif;font-size:14px;}
body,#wrapper,header,article,#aside,#aside-m,footer,menu,nav,section,p{font-family:'Exo 2',sans-serif;display:block;margin:0;padding:0;}
body{width:100%;margin-left:auto;margin-right:auto;white-space:normal;word-wrap:break-word;line-height:1.2; background: url(/vzhled/pozadi/prak.svg);background-color: #728639;background-size:25% auto;background-repeat:repeat space; background-attachment:local;}

/* ==============================================
  Layout (Wrapper, Header, Aside, Main, Footer)
==============================================
*/
#wrapper{width:auto;max-width:1400px;margin:0 auto;padding:6px}
header{float:none;margin-left:auto;margin-right:auto;padding-bottom:10px;margin-bottom:15px;width:99.7%;height:auto;min-height:340px;background-color:var(--barva-box-pruhledna);color:var(--barva-cerna);border-radius:6px;border:var(--barva-seda-okraj-svetly) solid 2px;box-shadow:0 0 10px var(--barva-cerna),0 0 10px var(--barva-cerna) inset}
header img{max-width:840px;}
#header_text{font-size:18px;font-weight:700;text-align:center;margin-left:auto;margin-right:auto;}

#aside{float:right;padding:5px;width:30%;max-width:380px;min-height:360px;background:var(--barva-okraj-aside-fallback);text-align:center;background-color:var(--barva-box-pruhledna);border-radius:6px;border:var(--barva-seda-okraj-svetly) solid 2px;box-shadow:0 0 10px var(--barva-cerna),0 0 15px var(--barva-stiny-aside-vnitrni) inset}
#aside-m{display:none;float:right;padding:5px;width:30%;max-width:250px;min-height:360px;background:var(--barva-okraj-aside-fallback);text-align:center;background-color:var(--barva-box-pruhledna);border-radius:6px;border:var(--barva-seda-okraj-svetly) solid 2px;box-shadow:0 0 10px var(--barva-cerna),0 0 15px var(--barva-stiny-aside-vnitrni) inset}

#odkazy{display:block;float:left;padding:5px;width:65.5%;background-color:var(--barva-box-pruhledna);border:var(--barva-okraj-odkazy) solid 2px;color:var(--barva-cerna);font-size:14px;box-shadow:0 0 15px var(--barva-cerna) inset;border-top-left-radius:6px;border-top-right-radius:6px}
#main{float:left;padding:5px;width:65.5%;background-color:var(--barva-box-pruhledna);border:var(--barva-okraj-main) solid 2px;color:var(--barva-cerna);font-size:16px;box-shadow:0 0 15px var(--barva-cerna) inset}
footer{float:left;padding:5px;width:65.5%;background-color:var(--barva-box-pruhledna);border:var(--barva-okraj-odkazy) solid 2px;color:var(--barva-cerna);font-size:14px;box-shadow:0 0 15px var(--barva-cerna) inset;border-bottom-left-radius:6px;border-bottom-right-radius:6px;text-align:center;margin-bottom:15px;cursor:pointer;}

img{outline:0;border:none;margin-top:5px;margin-bottom:5px}
ul{margin:0 auto;padding:2px}
li{margin:0 auto;padding:2px}

article img{width:80%;height:auto;max-width:600px;display:block;outline:0;border:none;margin:0 auto;padding:5px 2px}
article video{width:80%;height:auto;max-width:600px;display:block;outline:0;border:none;margin:0 auto;padding:5px 2px}

/* ==============================================
  Panely a komponenty (Infopanel, Svatky, atd.)
==============================================
*/
.jazyk{max-width:200px;margin-left:auto;margin-right:auto;margin-bottom:10px;background-color:var(--barva-box-pruhledna);border:var(--barva-cerna) solid 2px;border-radius:6px;text-align:center;box-shadow:0 0 10px var(--barva-seda-stiny-jazyk),0 0 10px var(--barva-seda-stiny-infopanel-vnitrni) inset;padding:5px}
.header{display:block;width:96%;height:auto;min-height:100px;margin:auto;padding:15px 0 20px 0}
#infopanel{display:inline-block;float:none;width:auto;min-height:120px;font-size:14px;background-color:var(--barva-infopanel-pruhledna);padding:15px;margin:14px;border:var(--barva-cerna) solid 2px;border-radius:6px;text-align:center;box-shadow:0 0 10px var(--barva-seda-stiny-infopanel),0 0 30px var(--barva-seda-stiny-infopanel-vnitrni) inset}
#svatky{float:none;width:280px;font-size:14px;background-color:var(--barva-bila);padding:3px;margin:auto;border:var(--barva-cerna) solid 2px;border-radius:6px;text-align:center;box-shadow:0 0 10px var(--barva-seda-okraj-svetly),0 0 30px var(--barva-seda-stiny-svatky) inset}
#pocitadlo{display:inline-block;max-width:60%;height:auto;min-height:50px;vertical-align:middle;margin:auto;font-size:14px;text-shadow:0 0 6px var(--barva-seda-stiny-infopanel-vnitrni);border:var(--barva-seda-svetla) solid 1px;border-radius:6px;padding:10px;}
.novinky{float:none;width:75%;min-height:55px;background-color:var(--barva-bila);padding:3px;margin:auto;border:var(--barva-cerna) solid 1px;border-radius:6px;text-align:center;box-shadow:0 0 10px var(--barva-seda-okraj-svetly),0 0 30px var(--barva-seda-stiny-svatky) inset}
.varovani{font-size:24px;color:var(--barva-cerna);background-color:var(--barva-varovani-pozadi);text-shadow:0 0 8px var(--barva-bila);height:auto;width:65.5%;padding:10px;margin:auto;border:var(--barva-cerna) solid 3px;border-radius:50px;text-align:center;box-shadow:0 0 10px var(--barva-cerna),0 0 10px var(--barva-cerna) inset}

/* ==============================================
  Menu a Odkazy
==============================================
*/
#odkazy ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  width: auto;
  height: auto;
  margin: 5px;
  padding: 0;
  list-style: none;
  touch-action: none;
}

#odkazy li {
  display: contents; /* Zabrání tagu <li> blokovat flexbox. Díky tomu se samotné odkazy <a> stanou přímými "flex items" bez ohledu na to, jak je v PHP vygeneruješ. */
}

#odkazy a {
  display: flex;
  justify-content: center;
  align-items: center;
}

[class$="_icon"], [class*="_icon"] {
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

[class$="_icon"]:hover, [class*="_icon"]:hover,
.hovertext.dotyk-aktivni [class$="_icon"], 
.hovertext.dotyk-aktivni [class*="_icon"] {
  transform: scale(0.95); 
}

.menu_tlac {margin-left: 10px;margin-top: 10px;margin-bottom: 5px;font-size:18px;font-weight:bold;}
.menu_img {margin-top: 2px;margin-right: 4px;display: inline-block;vertical-align: middle;}
#menu_tlac{padding:2px;font-weight:700;border-style:solid;border-width:1px;border-color:var(--barva-menu-tlacitko-okraj);border-radius:6px;background-color:var(--barva-seda-pozadi-tlacitka);cursor:pointer;margin-left:4px;margin-top:4px}
#menu_tlac:hover, #menu_tlac.dotyk-aktivni {color:var(--barva-menu-tlacitko-hover-text);border-color:var(--barva-cerna);background-color:var(--barva-seda-pozadi);box-shadow:0 0 0 0 var(--barva-seda-svetla)} 
label {margin: 5px;padding: 5px;font-size:18px;font-weight:bold;}

/* ==============================================
  Ikony Menu
==============================================
*/
.icon{width:22px;height:22px;cursor:pointer;border-radius:2px;box-shadow:0 0 2px var(--barva-cerna);text-shadow:0 0 2px var(--barva-cerna)}
.icon:hover, .hovertext.dotyk-aktivni .icon {box-shadow:0 0 2px 2px var(--icon-hover-shadow);background-color:var(--icon-hover-bg);width:22px;height:22px}

.login_icon{cursor:pointer;border-radius:10px;box-shadow:0 0 2px 2px var(--icon-login-shadow);color:var(--icon-text-color);background-color:var(--icon-login-bg);text-shadow:0 0 2px var(--icon-text-shadow)}
.login_icon:hover, .hovertext.dotyk-aktivni .login_icon{box-shadow:0 0 2px 2px var(--icon-hover-shadow);background-color:var(--icon-login-bg-hover);}

.logout_icon{cursor:pointer;border-radius:10px;box-shadow:0 0 2px 2px var(--icon-logout-shadow);color:var(--icon-text-color);background-color:var(--icon-logout-bg);text-shadow:0 0 2px var(--icon-text-shadow)}
.logout_icon:hover, .hovertext.dotyk-aktivni .logout_icon{box-shadow:0 0 2px 2px var(--icon-hover-shadow);background-color:var(--icon-logout-bg-hover);}

.download_icon{cursor:pointer;border-radius:10px;box-shadow:0 0 2px 2px var(--icon-download-shadow);color:var(--icon-text-color);background-color:var(--icon-download-bg);text-shadow:0 0 2px var(--icon-text-shadow)}
.download_icon:hover, .hovertext.dotyk-aktivni .download_icon{box-shadow:0 0 2px 2px var(--icon-hover-shadow);background-color:var(--icon-download-bg-hover);}

.chat_icon{cursor:pointer;border-radius:10px;box-shadow:0 0 2px 2px var(--icon-chat-shadow);color:var(--icon-text-color);background-color:var(--icon-chat-bg);text-shadow:0 0 2px var(--icon-text-shadow)}
.chat_icon:hover, .hovertext.dotyk-aktivni .chat_icon{box-shadow:0 0 2px 2px var(--icon-hover-shadow);background-color:var(--icon-chat-bg-hover);}

.tags_icon{cursor:pointer;border-radius:10px;box-shadow:0 0 2px 2px var(--icon-tags-shadow);color:var(--icon-text-color);background-color:var(--icon-tags-bg);text-shadow:0 0 2px var(--icon-text-shadow)}
.tags_icon:hover, .hovertext.dotyk-aktivni .tags_icon{box-shadow:0 0 2px 2px var(--icon-hover-shadow);background-color:var(--icon-tags-bg-hover);}

.rss_icon{cursor:pointer;border-radius:10px;box-shadow:0 0 2px 2px var(--icon-rss-shadow);color:var(--icon-text-color);background-color:var(--icon-rss-bg);text-shadow:0 0 2px var(--icon-text-shadow)}
.rss_icon:hover, .hovertext.dotyk-aktivni .rss_icon{box-shadow:0 0 2px 2px var(--icon-hover-shadow);background-color:var(--icon-rss-bg-hover);}

.galery_icon{cursor:pointer;border-radius:10px;box-shadow:0 0 2px 2px var(--icon-galery-shadow);color:var(--icon-text-color);background-color:var(--icon-galery-bg);text-shadow:0 0 2px var(--icon-text-shadow)}
.galery_icon:hover, .hovertext.dotyk-aktivni .galery_icon{box-shadow:0 0 2px 2px var(--icon-hover-shadow);background-color:var(--icon-galery-bg-hover);}

.soutez_icon{cursor:pointer;border-radius:10px;box-shadow:0 0 2px 2px var(--icon-soutez-shadow);color:var(--icon-text-color);background-color:var(--icon-soutez-bg);text-shadow:0 0 2px var(--icon-text-shadow)}
.soutez_icon:hover, .hovertext.dotyk-aktivni .soutez_icon{box-shadow:0 0 2px 2px var(--icon-hover-shadow);background-color:var(--icon-soutez-bg-hover);}

.soutez2_icon{cursor:pointer;border-radius:10px;box-shadow:0 0 2px 2px var(--icon-soutez2-shadow);color:var(--icon-text-color);background-color:var(--icon-soutez2-bg);text-shadow:0 0 2px var(--icon-text-shadow)}
.soutez2_icon:hover, .hovertext.dotyk-aktivni .soutez2_icon{box-shadow:0 0 2px 2px var(--icon-hover-shadow);background-color:var(--icon-soutez2-bg-hover);}

.kalendar_icon{cursor:pointer;border-radius:10px;box-shadow:0 0 2px 2px var(--icon-kalendar-shadow);color:var(--icon-text-color);background-color:var(--icon-kalendar-bg);text-shadow:0 0 2px var(--icon-text-shadow)}
.kalendar_icon:hover, .hovertext.dotyk-aktivni .kalendar_icon{box-shadow:0 0 2px 2px var(--icon-hover-shadow);background-color:var(--icon-kalendar-bg-hover);}

.info_icon{cursor:pointer;border-radius:10px;box-shadow:0 0 2px 2px var(--icon-info-shadow);color:var(--icon-text-color);background-color:var(--icon-info-bg);text-shadow:0 0 2px var(--icon-text-shadow)}
.info_icon:hover, .hovertext.dotyk-aktivni .info_icon{box-shadow:0 0 2px 2px var(--icon-hover-shadow);background-color:var(--icon-info-bg-hover);}

.weather_icon{cursor:pointer;border-radius:10px;box-shadow:0 0 2px 2px var(--icon-weather-shadow);color:var(--icon-text-color);background-color:var(--icon-weather-bg);text-shadow:0 0 2px var(--icon-text-shadow)}
.weather_icon:hover, .hovertext.dotyk-aktivni .weather_icon{box-shadow:0 0 2px 2px var(--icon-hover-shadow);background-color:var(--icon-weather-bg-hover);}

.speed-test_icon{cursor:pointer;border-radius:10px;box-shadow:0 0 2px 2px var(--icon-speedtest-shadow);color:var(--icon-text-color);background-color:var(--icon-speedtest-bg);text-shadow:0 0 2px var(--icon-text-shadow)}
.speed-test_icon:hover, .hovertext.dotyk-aktivni .speed-test_icon{box-shadow:0 0 2px 2px var(--icon-hover-shadow);background-color:var(--icon-speedtest-bg-hover);}

.nsc_icon{cursor:pointer;border-radius:10px;box-shadow:0 0 2px 2px var(--icon-nsc-shadow);color:var(--icon-text-color);background-color:var(--icon-nsc-bg);text-shadow:0 0 2px var(--icon-text-shadow)}
.nsc_icon:hover, .hovertext.dotyk-aktivni .nsc_icon{box-shadow:0 0 2px 2px var(--icon-hover-shadow);background-color:var(--icon-nsc-bg-hover);}
/* KONEC - Ikony Menu */

/* ==============================================
  Články a Obsah (Article)
==============================================
*/
#skipTo{display:none;margin:auto;text-align:center}
article{display:block;margin:auto;padding:0;width:auto;height:auto}
.article{display:block;margin:auto;padding:30px 0}
.article2{display:block;padding:15px 3px 15px 3px;margin:auto;font-size:14px;height:auto;width:auto;background-color:var(--barva-article-pruhledna);border-top:var(--barva-seda-stredni) solid 2px;border-bottom:var(--barva-seda-stredni) solid 2px;border-radius:10px;box-shadow:0 0 2px var(--barva-seda-stiny-box),0 0 10px var(--barva-seda-stiny-box-vnitrni) inset}
.article3{display:block;padding:10px 3px 10px 3px;margin:auto;height:auto;width:auto;background-color:var(--barva-article-pruhledna);border:var(--barva-seda-stredni) solid 1px;border-radius:10px;box-shadow:0 0 2px var(--barva-seda-stiny-box),0 0 10px var(--barva-seda-stiny-box-vnitrni) inset}
.article-div{position:relative;display:block;padding:15px 3px 15px 3px;margin:auto;font-size:14px;height:auto;width:auto;background-color:var(--barva-article-pruhledna);border-top:var(--barva-seda-stredni) solid 2px;border-bottom:var(--barva-seda-stredni) solid 2px;border-radius:10px;box-shadow:0 0 2px var(--barva-seda-stiny-box),0 0 10px var(--barva-seda-stiny-box-vnitrni) inset}
.article-div:hover{top:1px;background-color:var(--barva-article-hover-pruhledna);border-top:var(--barva-seda-svetla) solid 1px;border-bottom:var(--barva-seda-svetla) solid 1px;border-radius:10px;box-shadow:0 0 4px var(--barva-seda-svetla),0 0 5px var(--barva-seda-stiny-box-vnitrni) inset}
.article-a{text-decoration:none;color:var(--barva-cerna);font-size:14px;cursor:pointer;transition:top ease .5s}
article li{margin-left:15px}

.codes-span{width:auto;padding:4px;text-align:center;margin:auto;display:table;border:1px dotted;border-radius:10px}
.rozdel{display:block;margin:0 auto;text-align:center;padding:4px;font-weight:700}
.center{display:block;margin:0 auto;text-align:center;padding:4px}

/* ==============================================
  Typografie (Nadpisy, Texty)
==============================================
*/
article h1{text-align:center;text-decoration:underline;color:var(--barva-cerna);text-shadow:0 0 2px var(--barva-bila);margin:auto;padding:1px;font-weight:700;font-size:22px;font-family:'Exo 2',sans-serif}
article h2{text-align:center;text-decoration:underline;color:var(--barva-cerna);text-shadow:0 0 2px var(--barva-bila);margin:auto;padding:1px;font-weight:700;font-size:20px;font-family:'Exo 2',sans-serif}
article h2:hover{color:var(--barva-seda-stiny-infopanel-vnitrni);text-shadow:0 0 3px var(--barva-cerna)}
article h3{text-decoration:underline;color:var(--barva-cerna);margin:auto;padding:1px;text-shadow:0 0 1px var(--barva-bila);font-weight:700;font-size:18px;font-family:'Exo 2',sans-serif}
h1{display:block;text-align:center;color:var(--barva-cerna);text-shadow:0 0 2px var(--barva-bila);margin:auto;padding:1px;font-weight:700;font-size:22px;font-family:'Exo 2',sans-serif}
h2{display:block;text-align:center;color:var(--barva-cerna);text-shadow:0 0 2px var(--barva-bila);text-decoration:underline;margin:auto;padding:1px;cursor:pointer;font-weight:700;font-size:20px;font-family:'Exo 2',sans-serif}
h3{color:var(--barva-cerna);margin:auto;padding:1px;text-shadow:0 0 1px var(--barva-bila);font-weight:700;font-size:18px;font-family:'Exo 2',sans-serif}
.nadpis{font-size:18px;font-weight:700;padding-left:6px;font-family:'Exo 2',sans-serif;color:var(--barva-cerna);text-shadow:0 0 1px var(--barva-bila)}
.popis{font-size:12px;color:var(--barva-cerna);text-shadow:0 0 10px var(--barva-bila)}
.text{font-size:14px}
.p{margin-top:8px;margin-bottom:5px;text-align:center}

/* ==============================================
  Hodnocení (Hvězdičky)
==============================================
*/
.prumer{cursor:pointer;color:var(--barva-cerna);float:right}
.hodnoceni{float:right;width:80px;height:16px;padding:0;list-style:none;clear:both;position:relative;background:url(/vzhled/obrazky/hodnoceni.gif?v=2) no-repeat 0 0}
.hvezdy0{background-position:0 calc(16px * 0);}
.hvezdy0-5{background-position:0 calc(16px * -1);}
.hvezdy1{background-position:0 calc(16px * -2); }
.hvezdy1-5{background-position:0 calc(16px * -3);} 
.hvezdy2{background-position:0 calc(16px * -4);}
.hvezdy2-5{background-position:0 calc(16px * -5);}
.hvezdy3{background-position:0 calc(16px * -6);}
.hvezdy3-5{background-position:0 calc(16px * -7);}
.hvezdy4{background-position:0 calc(16px * -8);}
.hvezdy4-5{background-position:0 calc(16px * -9);}
.hvezdy5{background-position:0 calc(16px * -10);}
ul.hodnoceni li{cursor:pointer;float:left;text-indent:-999em}
ul.hodnoceni li a{position:absolute;left:0;top:0;width:16px;height:16px;text-decoration:none;z-index:200}
ul.hodnoceni li.hvezda1 a{left:0}
ul.hodnoceni li.hvezda2 a{left:16px}
ul.hodnoceni li.hvezda3 a{left:32px}
ul.hodnoceni li.hvezda4 a{left:48px}
ul.hodnoceni li.hvezda5 a{left:64px}
ul.hodnoceni li a:hover{z-index:2;width:80px;height:16px;overflow:hidden;left:0;background:url(/vzhled/obrazky/hodnoceni.gif?v=2) no-repeat 0 0}
ul.hodnoceni li.hvezda1 a:hover{background-position:0 calc(16px * -11);}
ul.hodnoceni li.hvezda2 a:hover{background-position:0 calc(16px * -12);}
ul.hodnoceni li.hvezda3 a:hover{background-position:0 calc(16px * -13);}
ul.hodnoceni li.hvezda4 a:hover{background-position:0 calc(16px * -14);}
ul.hodnoceni li.hvezda5 a:hover{background-position:0 calc(16px * -15);}

/* ==============================================
  Tagy a Tlačítka
==============================================
*/
.tagy{width:98%; overflow-x:auto; overflow-y:hidden; white-space:nowrap;}
.tag{text-decoration: underline; display:inline-block; padding-top:4px; padding-bottom:14px; font-size:16px;}
.zobrazvse{text-align:center;color:var(--barva-cerna);border:var(--barva-seda-tmava) solid 1px;border-radius:5px;background-color:var(--barva-seda-pozadi);box-shadow:0 0 3px var(--barva-cerna);cursor:pointer;padding:6px;font-family:'Exo 2';font-size:23px;}
.zobrazvse:hover{color:#111;border:var(--barva-seda-tmava) solid 1px;background-color:var(--barva-seda-pozadi-hover);box-shadow:0 0 0 0 var(--barva-seda-svetla)}
.online{font-size:14px;display:block;margin-left:auto;margin-right:auto;margin-bottom:10px;padding:3px;width:90%;min-width:170px;border:1px solid var(--barva-cerna);border-radius:10px;box-shadow:0 0 0 4px var(--barva-seda-stiny-svatky);color:var(--barva-cerna);text-decoration:none;text-align:center;background-color:var(--barva-online)}
.offline{font-size:14px;display:block;margin-left:auto;margin-right:auto;margin-bottom:10px;padding:3px;width:90%;min-width:170px;border:1px solid var(--barva-cerna);border-radius:10px;box-shadow:0 0 0 4px var(--barva-seda-stiny-svatky);color:var(--barva-cerna);text-decoration:none;text-align:center;background-color:var(--barva-offline)}
.online-text{color:var(--barva-online-text);text-shadow: 1px 1px 0 var(--barva-cerna), -1px -1px 0 var(--barva-cerna), -1px 1px 0 var(--barva-cerna), 1px -1px 0 var(--barva-cerna), 0 0 2px var(--barva-bila), 0 0 4px var(--barva-bila), 0 0 6px var(--barva-bila);text-decoration:underline;font-size:16px;font-weight:700;font-family:'Exo 2',sans-serif}
.offline-text{color:var(--barva-offline-text);text-shadow: 1px 1px 0 var(--barva-cerna), -1px -1px 0 var(--barva-cerna), -1px 1px 0 var(--barva-cerna), 1px -1px 0 var(--barva-cerna), 0 0 2px var(--barva-bila), 0 0 4px var(--barva-bila), 0 0 6px var(--barva-bila);text-decoration:underline;font-size:16px;font-weight:700;font-family:'Exo 2',sans-serif}

.YouTube_Video{display:block;max-width:550px;width:100%;height:350px;margin-left:auto;margin-right:auto;border:none;overflow:hidden}

/* ==============================================
  Reklama a Admin Menu
==============================================
*/
#reklama{float:left;text-align:center;width:99.6%;background-color:var(--barva-box-pruhledna);color:var(--barva-cerna);border-radius:6px;border:var(--barva-seda-okraj-svetly) solid 2px;box-shadow:0 0 10px var(--barva-cerna),0 0 10px var(--barva-cerna) inset;cursor:pointer;margin-bottom:6px}
#reklama i{float:left;margin-top:3px;margin-left:3px}
#reklama span{padding:1px}

.anadpis{margin:0 auto;display:block;text-align:center;color:var(--barva-cerna);text-shadow:1px 1px 2px var(--barva-online);font-weight:700;font-size:35px;font-family:'Exo 2',sans-serif}
.amenu{color:var(--barva-cerna);text-shadow:1px 1px 1px var(--barva-bila);padding:3px;margin:2px;border:var(--barva-menu-tlacitko-okraj) solid 1px;border-radius:4px;background-color:var(--barva-seda-pozadi-tlacitka);box-shadow:0 0 6px 2px var(--barva-seda-svetla);cursor:pointer;display:inline-block;font-weight:700;font-size:16px;font-family:'Exo 2',sans-serif}
.amenu:hover{color:#303030;background-color:var(--barva-seda-pozadi-tlacitka);border:var(--barva-seda-stiny-infopanel-vnitrni) solid 1px;box-shadow:0 0 3px 2px #d0d9d0;text-shadow:0 0 1px var(--barva-cerna)}
.amenu-div div{padding-left:15px;padding-bottom:5px;margin:auto}

/* ==============================================
  Formuláře a Chat
==============================================
*/
.label,input[type=radio],input[type=text],input[type=password],input[type=number]{font-size: 14px;font-family:'SourceSans3',sans-serif;font-weight: 700;}
textarea {background: url(/vzhled/obrazky/radky.png);  background-attachment: local;background-repeat: no-repeat;padding-left: 32px;padding-top: 6px;border-color: var(--barva-seda-velmi-svetla);resize: none;line-height: 18px;font-size: 14px;font-family:'SourceSans3',sans-serif;font-weight: 700;border-radius: 6px;}
button,input[type=button],input[type=submit],input[type=reset]{color:var(--barva-cerna);background-color:var(--barva-seda-pozadi-tlacitka);max-width:100%;font-weight:700;text-shadow:0 0 3px var(--barva-bila);padding:2px 5px;border:var(--barva-seda) solid 1px;border-radius:6px;box-shadow:0 0 2px 1px var(--barva-seda-svetla);cursor:pointer;display:inline-block;white-space:normal;word-wrap:break-word}
button:hover,input[type=button]:hover,input[type=submit]:hover,input[type=reset]:hover{background-color:var(--barva-tlacitko-hover-pozadi);color:var(--barva-bila);text-shadow:0 0 2px var(--barva-cerna);border:var(--barva-seda-svetla) solid 1px;box-shadow:0 0 2px 1px var(--barva-seda-svetla)}

.chat{display:block;margin:auto;font-size:14px;padding:8px;width:85%;max-width:450px;height:auto;background-color:var(--barva-article-pruhledna-chat);border-top:var(--barva-seda-stredni) solid 2px;border-bottom:var(--barva-seda-stredni) solid 2px;border-radius:10px;box-shadow:0 0 2px var(--barva-seda-stiny-box),0 0 10px var(--barva-seda-stiny-box-vnitrni) inset}
.cs-activ{font-size:18px;font-weight:700;text-decoration:underline;padding:4px;border-radius:3px;}
.cs-inactiv{font-size:17px;font-weight:400;text-decoration:none;padding:4px;border-radius:4px;}

.bb{font-size:13px;display:inline-block;font-weight:700;margin:1px;padding:2px;border:var(--barva-menu-tlacitko-okraj) solid 1px;border-radius:4px;background-color:var(--barva-seda-pozadi-tlacitka);box-shadow:0 0 3px var(--barva-seda-svetla);cursor:pointer}
.bb:hover{border:var(--barva-menu-tlacitko-okraj) solid 1px;background-color:var(--barva-seda-pozadi);box-shadow:0 0 0 0 var(--barva-seda-svetla)}
.bb-active{display:inline-block;font-weight:700;margin:1px;padding:4px 4px 2px;border:var(--barva-menu-tlacitko-okraj) solid 1px;border-radius:5px;background-color:var(--barva-seda-pozadi);box-shadow:0 0 0 0 var(--barva-seda-svetla)}
.bb-active:hover{display:inline-block;font-weight:700;margin:1px;padding:4px 4px 2px;border:var(--barva-menu-tlacitko-okraj) solid 1px;border-radius:5px;background-color:var(--barva-seda-pozadi-tlacitka);box-shadow:0 0 3px var(--barva-seda-svetla);cursor:pointer}
.nick{font-weight:700;font-size:16px;font-family:'Exo 2',sans-serif}
.chat_odeslat{color:var(--barva-chat-odeslat-text);box-shadow:0 0 3px var(--barva-seda-svetla);border:var(--barva-cerna) solid 2px;border-radius:10px;padding:3px;float:right;background-color:var(--barva-chat-odeslat-pozadi);font-weight:700;font-size:14px;font-family:'Exo 2',sans-serif}
.chat_odeslat:hover{box-shadow:0 0 5px var(--barva-cerna);border:var(--barva-cerna) solid 1px;background-color:var(--barva-chat-odeslat-pozadi-hover)}
#maximum{color:var(--barva-cerna);float:right;font-weight:700;font-size:14px;}
.chat_odpoved{font-size:14px;font-family:'Exo 2',sans-serif}
.chattl{float:right}
.chat_zobraz{display:block;margin:auto;padding:8px;width:auto;height:auto;background-color:var(--barva-article-pruhledna-chat-zobraz);border-top:var(--barva-seda-stredni) solid 2px;border-bottom:var(--barva-seda-stredni) solid 2px;border-radius:10px;box-shadow:0 0 2px var(--barva-seda-stiny-box),0 0 10px var(--barva-seda-stiny-box-vnitrni) inset;font-size:14px;font-family:'Exo 2',sans-serif}
.selector{width:95%;text-align:center;margin:auto}

/* ==============================================
  Oddělovače (hr)
==============================================
*/
.hr1 {height:3px;background-color:rgba(103,135,124,1);color:rgba(103,135,124,1);border-width:0;border:0;}
.hr2 {height:2px;background-color:rgba(103,135,124,1);color:rgba(103,135,124,1);border-width:0;border:0;}
.hr3 {height:1px;background-color:rgba(103,135,124,1);color:rgba(103,135,124,1);border-width:0;border:0;}

/* ==============================================
  Tabulky
==============================================
*/
table{text-align:center;border-collapse:separate;border-spacing:0;width:auto;margin:auto;color:var(--barva-seda-tmava);font-size:12px;}
caption{text-decoration:underline;text-align:left;font-weight:700;font-size:18px;font-family:'Exo 2',sans-serif}
thead tr,th{text-align:center;background-color:var(--barva-seda-tabulka-hlavicka);padding:5px;color:var(--barva-bila);border:var(--barva-seda-tmava) solid 1px;font-weight:700;font-size:12px;}
tr{background-color:var(--barva-seda-tabulka-radek)}
tr:hover{color:var(--barva-tabulka-hover)}
tr:hover th:hover a:hover{background-color:var(--barva-tabulka-hover);border-bottom:2px solid var(--barva-tabulka-hover-border)}
td{text-align:center;padding:5px;border:var(--barva-seda-tmava) solid 1px}
th:first-of-type{border-top-left-radius:6px}
th:last-of-type{border-top-right-radius:6px}
tr:last-of-type td:first-of-type{border-bottom-left-radius:6px}
tr:last-of-type td:last-of-type{border-bottom-right-radius:6px}

/* --- Odkazy v tabulkách --- */
caption a:link{color:var(--barva-cerna);text-decoration:underline}
caption a:link:hover{color:var(--barva-odkaz-hover);text-decoration:dotted}
caption a:visited{color:var(--barva-seda-odkaz-navstiveny);text-decoration:dotted}
caption a:visited:hover{color:var(--barva-offline);text-decoration:dotted}
tr a:link{color:var(--barva-cerna);text-decoration:underline}
tr a:link:hover{color:var(--barva-odkaz-hover);text-decoration:dotted}
tr a:visited{color:var(--barva-seda-odkaz-navstiveny);text-decoration:dotted}
tr a:visited:hover{color:var(--barva-offline);text-decoration:dotted}
thead a:link,th a:link{color:var(--barva-bila);text-decoration:underline}
thead a:link:hover,th a:link:hover{color:var(--barva-odkaz-hover);text-decoration:dotted}
thead a:visited,th a:visited{color:var(--barva-seda-okraj-svetly);text-decoration:dotted}
thead a:visited:hover,th a:visited:hover{color:var(--barva-offline);text-decoration:dotted}

/* ==============================================
  Ostatní komponenty (Hovertext2, Spoiler)
==============================================
*/
.hovertext2{position:relative}
.hovertext2:before{content:attr(title);visibility:hidden;opacity:0.9;z-index:0.9;width:450%;height:auto;background:#010101dd;color:var(--barva-bila);text-align:center;border-radius:5px;padding:5px;position:absolute;left:-340%;top:160%}
.hovertext2:hover:before{opacity:1;visibility:visible}

/* ---- CSS pro BBkody[spoiler] ---- */
details.bb-spoiler {border: 1px solid var(--barva-spoiler-okraj); border-radius: 5px; background: var(--barva-spoiler-pozadi); margin: 10px 0;}
details.bb-spoiler summary {font-weight: bold; padding: 8px; cursor: pointer; background: var(--barva-spoiler-summary-pozadi); border-radius: 5px 5px 0 0;}
details.bb-spoiler div { padding: 15px; border-top: 1px solid var(--barva-spoiler-okraj);}

/* ==============================================
  Responzivní design (Media Queries)
==============================================
*/
@media screen and (max-width: 760px) {
  .hovertext:hover:before{font-size:12px;}
  body,#wrapper{font-size:14px;}
  body{width:100%;display:inline-block;margin:auto;padding:0}
  #wrapper{width:100%;height:100%;display:block;margin:auto;padding:5px 0 5px 0}
  header,#aside,#aside-m,#odkazy,#main,footer,#reklama{display:block;float:none;clear:left;margin:auto;width:auto;padding:2px;}
  #aside{display:none;margin:10px 0 10px 0;max-width:1000px}
  #aside-m{margin:10px 0 10px 0;max-width:1000px}
  .novinky{width:96%;}
  #skipTo{display:block}
  header h1{font-size:36px;min-height:55px}
  .header{min-height:55px}
  header{min-height:340px;}
  #header_text{font-size:16px;}
  
  #odkazy a img[class$="_icon"], 
  #odkazy a img[class*="_icon"] {
    width: clamp(32px, 11vw, 46px) !important;
    height: clamp(32px, 11vw, 46px) !important;
  }
  
  #odkazy a img[class$="_icon"]:hover, 
  #odkazy a img[class*="_icon"]:hover {
    width: clamp(32px, 11vw, 46px) !important;
    height: clamp(32px, 11vw, 46px) !important;
  }
  
  #odkazy ul {
    gap: 5px; /* Na menších displejích trochu zdrcneme mezery mezi ikonami */
  }
 
  #odkazy {padding-bottom:20px;}
  #odkazy div{display:block;text-align:center;}
  #odkazy form{float:none;margin:auto;}
  #odkazy a{padding:5px;text-align:center}

  .amenu{padding:4px;font-size:16px;}
  .amenu-div div{padding-top:5px;padding-bottom:5px;margin:auto}
  .atlacitko{color:var(--barva-cerna);text-shadow:var(--barva-bila) 1px 0;padding:3px;border:var(--barva-menu-tlacitko-okraj) solid 1px;border-radius:8px;background-color:var(--barva-seda-pozadi-tlacitka);box-shadow:0 0 6px 2px var(--barva-seda-svetla);cursor:pointer;font-weight:700;font-size:14px;font-family:'Exo 2',sans-serif}
  .tlacitkom a{color:#303030;text-shadow:0 0 1px var(--barva-cerna)}
  .tlacitkom:hover{color:var(--barva-odkaz-hover);background-color:var(--barva-seda-pozadi-tlacitka);border:var(--barva-seda-stiny-infopanel-vnitrni) solid 2px;box-shadow:0 0 0 1px var(--barva-cerna);text-shadow:var(--barva-bila) 0 0 2px}
  .tlacitkom:active{color:var(--barva-odkaz-hover);background-color:var(--barva-seda-pozadi-tlacitka);border:var(--barva-seda-stiny-infopanel-vnitrni) solid 2px;box-shadow:0 0 0 2px #d0d9d0;text-shadow:green 0 0 2px}
  .tlacitkom{text-decoration:none;text-shadow:var(--barva-bila) 0 0 2px;color:var(--barva-cerna);background-color:#dadada;padding:6px;margin:3px;border-style:solid;border-width:2px;border-color:var(--barva-seda-stiny-infopanel-vnitrni);border-radius:10px;cursor:pointer;font-weight:700;font-size:18px;font-family:'Exo 2',sans-serif}
  
  .online{display:block;margin-left:auto;margin-right:auto;margin-bottom:10px}
  .offline{display:block;margin-left:auto;margin-right:auto;margin-bottom:10px}
  
  .YouTube_Video{max-width:500px;width:100%;height:250px}
  .popis{font-size:11px;}
}

/* ==============================================
  Styly pro Galerii
==============================================
*/
.media-grid {display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding: 10px 0;}
.galerie-img-link {display: flex; align-items: center; justify-content: center;border: 2px solid transparent;  border-radius: 4px; text-decoration: none; box-shadow: 0 2px 4px var(--barva-galerie-stiny); transition: all 0.2s ease-in-out; flex-basis: calc(33.333% - 10px); max-width: calc(33.333% - 10px); box-sizing: border-box; }
.galerie-img-link:hover {border: 2px solid var(--barva-bila); outline: 2px solid var(--barva-cerna); transform: scale(1.03);}
.galerie-img {width: 100%; height: auto; vertical-align: middle; display: block; border-radius: 4px;}
.galerie-video {margin: auto; border-radius: 4px; width: 100%; max-width: 800px; display: block;margin-bottom: 10px;}
/* Media queries pro větší obrazovky galerie */
@media (min-width: 600px) {.galerie-img-link {flex-basis: calc(25% - 10px); max-width: calc(25% - 10px);}}
@media (min-width: 1300px) {.galerie-img-link {flex-basis: calc(16.666% - 10px); max-width: calc(16.666% - 10px);}}
.article-header {display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;}
.file-count {padding-right: 6px; font-style: italic; color: var(--barva-seda-stredne-tmava); }

/* ==============================================
  Definice Fontů
==============================================
*/
@font-face {font-family: 'Finlandica'; src: url(/vzhled/fonty/Finlandica.woff2) format('woff2'), url(/vzhled/fonty/Finlandica.woff) format('woff'); font-weight:400; font-style:normal; font-display:swap;}
@font-face {font-family: 'Finlandica'; src: url(/vzhled/fonty/Finlandica-Bold.woff2) format('woff2'), url(/vzhled/fonty/Finlandica-Bold.woff) format('woff'); font-weight:700; font-style:normal; font-display:swap;}
@font-face {font-family: 'Exo 2'; src: url(/vzhled/fonty/Exo2.woff2) format('woff2'), url(/vzhled/fonty/Exo2.woff) format('woff'); font-weight:400; font-style:normal; font-display:swap;}
@font-face {font-family: 'Exo 2'; src: url(/vzhled/fonty/Exo2-Bold.woff2) format('woff2'), url(/vzhled/fonty/Exo2-Bold.woff) format('woff'); font-weight:700; font-style:normal; font-display:swap;}

/*
@font-face {font-family: 'Nunito'; src: url(/vzhled/fonty/Nunito.woff2) format('woff2'), url(/vzhled/fonty/Nunito.woff) format('woff'); font-weight:400; font-style:normal; font-display:swap;}
@font-face {font-family: 'Nunito'; src: url(/vzhled/fonty/Nunito-Bold.woff2) format('woff2'), url(/vzhled/fonty/Nunito-Bold.woff) format('woff'); font-weight:700; font-style:normal; font-display:swap;}
@font-face {font-family: 'Nunito Sans'; src: url(/vzhled/fonty/Nunito_Sans.woff2) format('woff2'), url(/vzhled/fonty/Nunito_Sans.woff) format('woff'); font-weight:400; font-style:normal; font-display:swap;}
@font-face {font-family: 'Nunito Sans'; src: url(/vzhled/fonty/Nunito_Sans-Bold.woff2) format('woff2'), url(/vzhled/fonty/Nunito_Sans-Bold.woff) format('woff'); font-weight:700; font-style:normal; font-display:swap;}
@font-face {font-family: 'Ubuntu Mono'; src: url(/vzhled/fonty/Ubuntu_Mono.woff2) format('woff2'), url(/vzhled/fonty/Ubuntu_Mono.woff) format('woff'); font-weight:400; font-style:normal; font-display:swap;}
@font-face {font-family: 'Ubuntu Mono'; src: url(/vzhled/fonty/Ubuntu_Mono-Bold.woff2) format('woff2'), url(/vzhled/fonty/Ubuntu_Mono-Bold.woff) format('woff'); font-weight:700; font-style:normal; font-display:swap;}
@font-face {font-family: 'IBM Plex SansCondensed'; src: url(/vzhled/fonty/IBM_Plex_SansCondensed.woff2) format('woff2'), url(/vzhled/fonty/IBM_Plex_SansCondensed.woff) format('woff'); font-weight:400; font-style:normal; font-variant-numeric: slashed-zero; font-display:swap; font-feature-settings: zero;}
@font-face {font-family: 'IBM Plex SansCondensed'; src: url(/vzhled/fonty/IBM_Plex_SansCondensed-Bold.woff2) format('woff2'), url(/vzhled/fonty/IBM_Plex_SansCondensed-Bold.woff) format('woff'); font-weight:700; font-style:normal; font-variant-numeric: slashed-zero; font-display:swap; font-feature-settings: zero;}
*/