/* Slyšet jinak – main stylesheet (based on slysetjinak_08.css, made responsive) */

:root {
  --orange: #ff7200;
  --orange-light: #ff9733;
  --dark: #3b3b3b;
  --font: "Trebuchet MS", Trebuchet, Tahoma, Verdana, Arial, Helvetica, sans-serif;
}

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font); font-size: 16px; margin: 0; padding: 0; border: 0; color: #000;
  background: var(--orange) url(../../images/bg.gif) 0 0 no-repeat fixed;
}

p { line-height: 1.5; }
strong { color: #fff; }
p.zarovnat { text-align: justify; }
p.chyba { color: red; font-weight: bold; }
td { vertical-align: top; padding: 0; }
img { border: 0; max-width: 100%; height: auto; }
video, iframe { max-width: 100%; }
div.cb { clear: both; }

a:link, a:visited, a:active { color: #000; text-decoration: underline; }
a:hover, a:focus-visible { color: #fff; }
:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

a.pdf, a.word { background-position: 0 0; background-repeat: no-repeat; padding-left: 20px; }
a.pdf { background-image: url(../../images/icons/pdf.gif); }
a.word { background-image: url(../../images/icons/word.gif); }

h1 { font-size: 30px; font-weight: normal; margin: 0 0 20px 0; padding: 0; color: #fff; }
h2 { font-size: 20px; margin: 0 0 15px 0; padding: 0; }
h3, h2.sub { font-size: 17px; margin: 0 0 15px 0; padding: 0; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: #fff; color: #000; padding: 8px 12px; }
.skip-link:focus { left: 8px; top: 8px; }

/* ---------------- header ---------------- */

#header { position: relative; background: url(../../images/kluk_horni.gif) top right no-repeat; }

a.facebook {
  position: absolute; top: 70px; left: 690px; width: 90px;
  background: #ff8b3c url(../../images/facebook.png) 3px 2px / 18px no-repeat;
  padding: 3px 0 3px 25px; font-size: 12px; text-decoration: none; border-radius: 3px;
}

div.langSelectBox { position: absolute; width: 200px; top: 70px; left: 830px; }
div.langSelectBox a {
  margin: 0 20px 0 0; padding: 8px 6px 6px 35px; background-position: 5px 50%; background-repeat: no-repeat;
  font-size: 11px; color: #fff; border-radius: 3px;
}
div.langSelectBox a.cz, div.langSelectBox a.cz_active { background-image: url(../../images/vlajka_cz.png); }
div.langSelectBox a.en, div.langSelectBox a.en_active { background-image: url(../../images/vlajka_en.png); }
div.langSelectBox a.cz_active, div.langSelectBox a.en_active { color: #7e4400; background-color: #fff; text-decoration: none; }

div.menuLogo { width: 1000px; }

/* sprite menu: <a class="KEY [KEY_active]"><span class="label">text</span></a> */
nav.menuBox, nav.menuBoxEn { position: relative; height: 105px; }
nav.menuBox a, nav.menuBoxEn a { position: absolute; display: block; background-repeat: no-repeat; }
nav.menuBox a { background-image: url(../../images/menu31.png); }
nav.menuBoxEn a { background-image: url(../../images/menu41.png); }
nav.menuBox a .label, nav.menuBoxEn a .label {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

nav.menuBox a.uvod { top: 10px; left: 10px; width: 53px; height: 29px; background-position: 0 0; }
nav.menuBox a.uvod:hover, nav.menuBox a.uvod_active { background-position: 0 -40px; }
nav.menuBox a.tym { top: 20px; left: 526px; width: 179px; height: 46px; background-position: 0 -404px; }
nav.menuBox a.tym:hover, nav.menuBox a.tym_active { background-position: 0 -456px; }
nav.menuBox a.ke-stazeni { top: 77px; left: 109px; width: 115px; height: 35px; background-position: 0 -193px; }
nav.menuBox a.ke-stazeni:hover, nav.menuBox a.ke-stazeni_active { background-position: 0 -242px; }
nav.menuBox a.odkazy { top: 57px; left: 323px; width: 97px; height: 50px; background-position: 0 -290px; }
nav.menuBox a.odkazy:hover, nav.menuBox a.odkazy_active { background-position: 0 -342px; }
nav.menuBox a.projekty { top: 10px; left: 200px; width: 83px; height: 46px; background-position: 0 -517px; }
nav.menuBox a.projekty:hover, nav.menuBox a.projekty_active { background-position: 0 -575px; }
nav.menuBox a.publikace { top: 80px; left: 456px; width: 103px; height: 42px; background-position: 0 -768px; }
nav.menuBox a.publikace:hover, nav.menuBox a.publikace_active { background-position: 0 -820px; }

nav.menuBoxEn a.home { top: 10px; left: 10px; width: 61px; height: 32px; background-position: 0 0; }
nav.menuBoxEn a.home:hover, nav.menuBoxEn a.home_active { background-position: 0 -37px; }
nav.menuBoxEn a.documents { top: 77px; left: 109px; width: 131px; height: 30px; background-position: 0 -197px; }
nav.menuBoxEn a.documents:hover, nav.menuBoxEn a.documents_active { background-position: 0 -246px; }
nav.menuBoxEn a.links { top: 57px; left: 323px; width: 71px; height: 33px; background-position: 0 -290px; }
nav.menuBoxEn a.links:hover, nav.menuBoxEn a.links_active { background-position: 0 -342px; }
nav.menuBoxEn a.team { top: 20px; left: 426px; width: 317px; height: 42px; background-position: 0 -405px; }
nav.menuBoxEn a.team:hover, nav.menuBoxEn a.team_active { background-position: 0 -458px; }
nav.menuBoxEn a.projects { top: 10px; left: 200px; width: 106px; height: 36px; background-position: 0 -522px; }
nav.menuBoxEn a.projects:hover, nav.menuBoxEn a.projects_active { background-position: 0 -581px; }
nav.menuBoxEn a.publications { top: 80px; left: 466px; width: 163px; height: 35px; background-position: 0 -98px; }
nav.menuBoxEn a.publications:hover, nav.menuBoxEn a.publications_active { background-position: 0 -140px; }

.logoBox { background: url(../../images/slyset_jinak_bg.gif) 0 0 repeat-x; text-align: right; margin: 0; font-size: 0; line-height: 0; }
.logoBox a { display: inline-block; }
.logoBox img { display: block; }

/* ---------------- content ---------------- */

main.obsah { width: 950px; padding: 0 0 20px 50px; }
main.obsah::after { content: ""; display: block; clear: both; }

.site-footer { width: 950px; margin: 0 0 0 50px; padding: 15px 0 30px; border-top: 1px solid rgba(255, 255, 255, .6); font-size: 13px; }
.site-footer p { margin: 0; }
.site-footer p + p { margin-top: 8px; }
.site-footer .footer-db { font-size: 11px; text-align: right; }
.footer-db a:link, .footer-db a:visited { color: var(--dark); }
.footer-db a:hover, .footer-db a:focus-visible { color: #fff; }
.footer-db .icon-lock { display: inline-block; width: 10px; height: 10px; vertical-align: -1px; margin-right: 4px; }

/* news box */
.gradBoxWrap { float: right; width: 350px; margin: 0 0 30px 30px; padding: 20px; border: 1px solid #000; border-radius: 5px; }
.gradBoxWrap h2.nadpis { margin: 0 0 10px; text-align: center; line-height: 0; }
.gradBoxWrap h2.nadpis img { display: inline-block; }
.aktBox h3 { margin: 30px 0 0 0; padding: 0; font-size: 17px; }
.aktBox .aktFirst { float: left; margin: 5px 10px 5px 0; }
.aktBox::after { content: ""; display: block; clear: both; }

ul.dokumenty { list-style-type: none; margin: 0 0 5px 0; padding: 0; }
ul.dokumenty li { padding: 0 0 15px 0; font-size: 11px; }
ul.dokumenty a { font-size: 11px; background: 0 0 no-repeat; padding: 2px 0 2px 20px; color: #000; word-break: break-word; }
ul.dokumenty a.file, ul.dokumenty a.rtf, ul.dokumenty a.odt, ul.dokumenty a.ods { background-image: url(../../images/icons/file.gif); }
ul.dokumenty a.pdf { background-image: url(../../images/icons/pdf.gif); }
ul.dokumenty a.zip { background-image: url(../../images/icons/zip.gif); }
ul.dokumenty a.doc, ul.dokumenty a.docx { background-image: url(../../images/icons/word.gif); }
ul.dokumenty a.xls, ul.dokumenty a.xlsx { background-image: url(../../images/icons/excel.gif); }
ul.dokumenty a.ppt, ul.dokumenty a.pps, ul.dokumenty a.pptx { background-image: url(../../images/icons/ppt.gif); }
ul.dokumenty a.jpg, ul.dokumenty a.jpeg { background-image: url(../../images/icons/jpeg.gif); }

.aktFotoWrap { margin: 0; display: flex; flex-wrap: wrap; gap: 5px; }
.aktFotoWrap img { display: block; border: 1px solid silver; }

/* breadcrumbs */
nav.navi { padding: 0 0 10px 0; margin: 0 0 20px 0; border-bottom: 1px solid #fff; line-height: 1.5; }
nav.navi ol { list-style: none; margin: 0; padding: 0; display: inline; }
nav.navi li { display: inline; }
nav.navi li + li::before { content: "\00bb"; margin: 0 .4em; }

div.contentBox { margin: 0 0 30px 0; }
div.contentBox a { font-size: 18px; font-weight: bold; }
div.contentBox img { float: left; margin: 0 20px 0 0; border-radius: 5px; }

div.floatingBox { float: left; margin: 0 20px 20px 0; width: 150px; padding: 10px; border: 1px solid var(--orange-light); border-radius: 3px; }
div.floatingBox a { font-size: 14px; font-weight: bold; }
div.floatingBox img { display: block; margin: 0 0 10px 0; border-radius: 5px; }

/* photo galleries */
.gallery { display: flex; flex-wrap: wrap; gap: 10px 8px; margin: 0 0 25px; }
.gallery .iw { position: relative; display: block; line-height: 0; }
.gallery .ip { position: absolute; top: 0; left: 0; color: #fff; padding: 0 2px; line-height: 1.4; background-color: var(--dark); font-weight: bold; font-size: 10px; font-family: Verdana, sans-serif; }
img.nth { border: 5px solid var(--dark); border-radius: 3px; transition: border-color .15s; }
.gallery .iw:hover img.nth, .gallery .iw:focus-visible img.nth { border-color: #fff; }
.galleryEmpty { font-style: italic; }
.galleryActions { margin: 0 0 20px; }

ul.odkazy { list-style-type: none; margin: 0 0 0 30px; padding: 0; }
ul.odkazy li { padding: 2px 0; }

div.organizator { margin: 0 0 30px 0; }
div.organizator h2, div.organizator h3 { font-size: 18px; margin: 0 0 10px 0; }
div.organizator ul { list-style-type: square; }
div.organizator li { padding: 3px 0; line-height: 1.5; }
.team-group { padding-left: 160px; margin-bottom: 30px; }

table.historieNavi { margin: 0 0 30px 0; }
table.historieNavi td { padding: 3px 0 5px 25px; }
table.historieNavi td.prvni { padding-left: 0; }
table.historieNavi a { border-bottom: 1px dotted #fff; }
div.historieBox { margin: 0 0 30px 0; }
div.historieBox h2 { font-size: 20px; margin: 0 0 10px 0; }
div.historieBox p { padding-left: 20px; }
table.historieEventInfo { background-color: #fff; margin-left: 20px; border-spacing: 1px; }
table.historieEventInfo td { background-color: var(--orange); padding: 5px 10px; }
table.historieEventInfo td.lab { white-space: nowrap; text-align: right; font-weight: bold; color: #fff; }
div.historieBox ul { list-style-type: square; }
div.historieBox li { padding: 3px 0; line-height: 1.5; }

ul.download { list-style-type: square; }
ul.download li { padding: 0 0 20px 0; }
ul.download span { display: block; font-size: 14px; }
ul.download a { word-break: break-word; }

div#p_docbox, div.p_docbox { border: none; margin: 20px 0 0 0; }
div#p_docbox p { padding: 0; margin: 0 0 10px 0; font-weight: bold; }
div#p_docbox ul { margin: 0 0 0 15px; padding: 0; list-style-type: none; }
div#p_docbox ul li { padding: 3px 0; }
div#p_docbox ul span { color: #fff; font-size: 11px; }
div#p_docbox a.file, div#p_docbox a.pdf, div#p_docbox a.doc, div#p_docbox a.zip, div#p_docbox a.xls,
div#p_docbox a.pps, div#p_docbox a.ppt, div#p_docbox a.jpg, div#p_docbox a.jpeg { background-position: 0 0; background-repeat: no-repeat; padding: 0 0 2px 20px; }
div#p_docbox a.file { background-image: url(../../images/icons/file.gif); }
div#p_docbox a.pdf { background-image: url(../../images/icons/pdf.gif); }
div#p_docbox a.zip { background-image: url(../../images/icons/zip.gif); }
div#p_docbox a.doc { background-image: url(../../images/icons/word.gif); }
div#p_docbox a.xls { background-image: url(../../images/icons/excel.gif); }
div#p_docbox a.ppt, div#p_docbox a.pps { background-image: url(../../images/icons/ppt.gif); }
div#p_docbox a.jpg, div#p_docbox a.jpeg { background-image: url(../../images/icons/jpeg.gif); }

ul.pnavi { margin: 0 0 0 30px; padding: 0; list-style-type: none; }
ul.pnavi a { display: block; padding: 10px; font-weight: bold; font-size: 18px; }

/* video / audio */
div.videoBox { background-color: var(--dark); padding: 10px; margin: 0 0 20px; }
div.videoBox h2 { color: #fff; font-size: 13px; margin: 0 0 10px 0; padding: 0; }
div.videoBox video { display: block; width: 100%; height: auto; background: #000; }
div.videoLeft { float: left; width: 150px; }
div.videoRight { float: right; width: 780px; }
div.videoLeft ul { margin: 0; padding: 0; list-style-type: none; width: 150px; }
div.videoLeft a { display: block; padding: 5px 10px; font-weight: bold; }
div.videoLeft a.active { color: #fff; background-color: var(--dark); text-decoration: none; }
.youtube-embed { display: block; width: 560px; max-width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; margin: 0 0 20px; }

figure.audio { margin: 0 0 15px 20px; }
figure.audio figcaption { margin: 0 0 4px; }
figure.audio audio { display: block; width: 420px; max-width: 100%; }

/* publications */
div.publikace { margin: 0 0 30px 0; }
div.publikace img { float: left; margin: 0 20px 0 0; }
div.publikace a { font-size: 18px; font-weight: bold; }

/* 404 */
.error-page { min-height: 200px; }

/* ---------------- responsive ---------------- */

@media (max-width: 1010px) {
  body { background-size: auto; }
  #header { background: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 12px 16px 0; }
  div.menuLogo { width: 100%; display: flex; flex-direction: column-reverse; }
  .logoBox { text-align: center; background-size: auto 100%; }
  .logoBox img { width: 240px; height: auto; margin: 0 auto; }

  nav.menuBox, nav.menuBoxEn { height: auto; display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 0; }
  nav.menuBox a, nav.menuBoxEn a {
    position: static; width: auto !important; height: auto !important; background: none !important;
    padding: 6px 12px; border: 1px solid #000; border-radius: 3px; text-decoration: none; font-weight: bold;
  }
  nav.menuBox a .label, nav.menuBoxEn a .label { position: static; width: auto; height: auto; clip: auto; overflow: visible; }
  nav.menuBox a[class$="_active"], nav.menuBoxEn a[class$="_active"],
  nav.menuBox a[aria-current], nav.menuBoxEn a[aria-current] { background: #fff !important; }

  a.facebook, div.langSelectBox { position: static; width: auto; }
  div.langSelectBox { display: flex; gap: 10px; }
  div.langSelectBox a { margin: 0; display: inline-block; }

  #header, main.obsah, .gradBoxWrap, div.floatingBox, div.videoBox { box-sizing: border-box; }
  main.obsah, .site-footer { width: auto; padding: 16px; margin: 0; }
  .site-footer { margin: 0 16px; padding: 15px 0 30px; }

  .gradBoxWrap { float: none; width: auto; margin: 0 0 30px; }
  div.videoLeft, div.videoRight { float: none; width: auto; }
  div.videoLeft ul { width: auto; display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 12px; }
  .team-group { padding-left: 0; }
  ul.odkazy, ul.pnavi { margin-left: 0; }
  table.historieEventInfo { margin-left: 0; }
  div.historieBox p { padding-left: 0; }
}

@media (max-width: 600px) {
  h1 { font-size: 24px; }
  div.floatingBox { float: none; width: auto; margin: 0 0 16px; }
  div.floatingBox img { width: 100%; max-width: 300px; }
  div.contentBox img, div.publikace img { float: none; display: block; margin: 0 0 10px; }
  table.historieEventInfo, table.historieEventInfo tbody, table.historieEventInfo tr, table.historieEventInfo td { display: block; }
  table.historieEventInfo td.lab { text-align: left; }
  .gallery { justify-content: center; }
}