:root {
	--bodybg: #4c4a4a;
  --bodycolor: #000;
  --obalbg: #fff;
  --linkcolor: #385fb9;
  --linkcolorhover: #385fb9;
  --headingcolor: #385fb9;
  --headingcolorhover: #385fb9;
  --hlavickabg: #222;
  --hlavickacolor1: #ffffff;
  --hlavickacolor2: #ffcc00;
  --menucolor: #385fb9;
  --menucolorhover: #a41e21;
  --calendarcolor: #385fb9;
  --calendarlinkcolor: #fff;
  --calendarlinkcolorhover: #fff;
  --hrcolor: #bbb;
  --bannerylinkcolor: #000;
  --bannerybordercolor: #777;
  --clankybordercolor: #777;
  --patickabg: #000;
  --patickacolor: #ddd;
  --patickalinkcolor: #ddd;
  --imgbgcolor: #eee;
  --imgbordercolor: #fff;
  --tablebordercolor: #bbb;
  --tablecaptionbgcolor: #eee;
  --tablethbgcolor: #ddd;
  --responsivemenubordercolor: #999;
}

* {
	box-sizing: border-box;
}

html {
	font-size: 130%;
}

body {
  font: .75em Arial, Helvetica, sans-serif;
  background: var(--bodybg);
  margin: 0;        
  padding: 0;
  color: var(--bodycolor);
}

h1 {
  font-family: Georgia, Serif;
  font-size: 1.7em;
  color: var(--headingcolor);
  font-weight: normal;
}

h2 {
  font-family: Georgia, Serif;
  font-size: 1.5em;
  color: var(--headingcolor);
  font-weight: normal;
}

h3 {
  font-family: Georgia, Serif;
  font-size: 1.2em;
  color: var(--headingcolor);
  margin-bottom: 1em;
}

h4 {
  font-family: Georgia, Serif;
  font-size: 1em;
  color: var(--headingcolor);
  margin-bottom: 1em;
}  

a {
  color: var(--linkcolor);
  text-decoration: underline;
}

a:hover {
  color: var(--linkcolorhover);
  text-decoration: none;  
}

a img {
  vertical-align: middle;
}

p {
  margin: 1em 0;
}

hr {
  height: 0;
  background-color: var(--hrcolor);
  border-width: 0px;
  border-top: var(--hrcolor) 1px solid;
}

object {
  display: block;
}

.schovat {
  visibility: hidden;
  margin: 0;
  padding: 0;
  border: 0;
} 

.skryt {
  display: none;
}

#obal {
  margin: 0 auto;
  width: 950px;
  max-width: 100%;
  background: var(--obalbg);
}

#hlavicka {
  background: var(--hlavickabg);
  margin-bottom: 0;
}

#hlavicka hr {
  display: none;
}

#hlavicka a {
  background: var(--hlavickabg) url('../styl/img/hlavickamaintenance.jpg') top left no-repeat;
  background-size: 100%;
  display: block;
  width: 100%;
  height: 0;
  padding-top: 25.263%;
  text-decoration: none;
}

#hlavicka a span {
  visibility: hidden;
}

#hlavicka h2 {
  background: var(--hlavickabg);
  font-weight: normal;
  font-size: 3.4vw;
  letter-spacing: 0;
  color: var(--hlavickacolor1);
  padding: 0 0 .3em 1.2em;
  margin: 0;
}

#hlavicka h2 span {
  color: var(--hlavickacolor2);
  margin-left: .5em;
}

#archive {
  padding: 1em;
  background: #666;
  color: #fff;
  font-weight: normal;
  font-size: 16px;
}

#archive a {
  color: #ffcc00;
}

#pom {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

svg {
	margin: .5em;
	padding: 0;
	vertical-align: middle;
  fill: #fff;
}

#telo {
  flex: 5;
  text-align: justify;
  padding: 0 1em 2em 1em;
}

#telo h1, #telo h2 {
  margin-top: 1em;
  margin-bottom: .2em;
  text-align: left;
}

#telo h2 {
  margin-top: 2em;
  padding-top: .5em;
  border-top: #ddd 4px solid; 
}

#telo p {
  font-size: 1em; 
}

#paticka {
  display: flex;
	color: var(--patickacolor);
	background: var(--patickabg);
  font-size: .8em;
  text-align: center;
  flex-direction: column;
  align-items: center;
  padding: 3em 1em;
}

#paticka hr {
  display: none;
}

#paticka a {
  color: var(--patickalinkcolor);
}

#paticka p {
  margin: 0;
}

.czechcz {
  flex: 1;
  order: 2;
  padding: 1em 1em 1em 0;
}

.czechcz a {
  background: #010300 url('../styl/img/czechcz.png') 0 0 no-repeat;
  display: block;
  width: 123px;
  height: 40px;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
	margin: 0;
  padding: 0;
	text-decoration: none;
}

.czechcz a:hover {
  background-position: -127px 0;
}

.facebook {
  flex: 1;
  order: 3;
  padding: 1em 0;
}

.facebook a {
  background: #010300 url('../styl/img/facebook.png') 0 0 no-repeat;
  display: block;
  width: 39px;
  height: 40px;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
	margin: 0;
  padding: 0;
	text-decoration: none;
}

.facebook a:hover {
  background-position: -41px 0;
}

.rss {
  flex: 1;
  order: 4;
  padding: 1em 0;
}

.rss a {
  background: #010300 url('../styl/img/rss.png') 0 0 no-repeat;
  display: block;
  width: 39px;
  height: 40px;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
	margin: 0;
  padding: 0;
	text-decoration: none;
}

.rss a:hover {
  background-position: -41px 0;
}

.copy {
  flex: 1;
  order: 1;
  padding: 1em 0;
}

a img {
  border-radius: .5em;  
} 

.souborrss {
  background: transparent url('../styl/img/souborrss.png') 0 center no-repeat;
  padding: 5px 0 5px 22px;
}

.divarchivy {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: flex-start;
  margin-top: 2em;
}

.archiv {
  flex: none;
  margin: 0 0 3em 0;
  padding: 0 25px;
  text-align: center;
  width: 200px;
}

.archiv img{
  margin: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.archiv a {
  display: block;
  border: 0;
  background: transparent; 
  text-decoration: none;
  font-family: Georgia, Serif;
  border-radius: .5em;
  /*box-shadow: 0 0 2px rgba(0,0,0,0.8);*/ 
}

.archiv a:hover {
  box-shadow: none; 
}

.archiv span {
  display: block;
  vertical-align: bottom;
  padding-bottom: 0;
  background-color: #000;
  color: #cbcbcb;
  font-size: 2em;
  font-weight: bold;
}

.archiv a > span {
  margin: 0;
  padding: .5em 0 .5em 0;
  border: none;
  border-bottom-left-radius: .5em;
  border-bottom-right-radius: .5em;
  font-size: 1em;
}

.archiv a:hover img {
  filter: brightness(130%) saturate(130%);
}

.archiv a:hover span {
  color: #fff;
}

@media screen and (min-width: 500px) {

  html {
		font-size: 100%;
	}
  
  #hlavicka {
    margin-bottom: 2.5em;
  }
  
  #pom {
    flex-direction: row;
  }
  
  svg {
  	fill: #eee;
  }
  
  #telo {
    flex: 5;
    min-width: 22em;
    padding: 0 2em 2em 2em;
  }
  
  #paticka {
    flex-direction: row;
    align-items: stretch;
    padding: 3em;
  }
  
  .copy {
    flex: 8;
    order: 0;
    padding: 0;
  }
  
  .czechcz {
    flex: 2;
    order: 0;
    padding: 0 1em 0 0;
  }
  
  .facebook {
    flex: 1;
    order: 0;
    padding: 0 1em;
  }
  
  .rss {
    flex: 1;
    order: 0;
    padding: 0;
  }

}

@media screen and (min-width: 850px) {

  html {
		font-size: 110%;
	}
  
  #telo {
    flex: 5;
    min-width: 20em;
  }
  
}

@media screen and (min-width: 950px) {
  #hlavicka h2 {
    font-size: 32px;
  }
}

@media only print {
  html {		
    margin: 0;
    padding: 0;
  }
  
  body {
    font: .75em Arial, Helvetica, sans-serif;
    background: #fff;
    margin: 0;
    padding: 0;
    color: #000;
  }
  
  h1 {
    font-size: 1.6em;
  }
  
  h2 {
    font-size: 1.4em;
  }
  
  h3 {
    font-size: 1.2em;
  }
  
  h4 {
    font-size: 1em;
  }  
  
  a {
    color: #cc0000;
    text-decoration: underline;
  }
  
  a img {
    border: none;
    text-decoration: none;
  }
  
  hr {
    height: 0;
    background-color: #a087ad;
    border-width: 0px;
    border-top: #a087ad 1px solid;
  }
  
  .roundedimg {
    display: none;
  }
  
  object {
    display: none;
  }
  
  #hlavicka h2 {
    font-size: 10pt;
    padding: 0;
    color: #000;
  }
  
  #hlavicka a {
    text-decoration: none;
    display: inline;
  }
  
  #paticka {
    font-size: 8pt;
    text-align: center;
    color: #000;
  }
  
  #paticka a {
    text-decoration: none;
    color: #000;
  }
  
  #mainmenu {
    display: none;
  }
  
  #levysloupec {
    display: none;
  }
  
  #pravysloupec {
    display: none;
  }
  
  table {
    border: #a087ad 1px solid;
    border-collapse: collapse;
    margin-top: 0;
    margin-bottom: 2em;
  }
  
  td, th, caption {
    border: #a087ad 1px solid;
    padding: 2px 2px 2px 10px;
    vertical-align: baseline;
  }
  
  caption {
    border-bottom: none;
  }
  
  h1, h2, h3, h4, h5, h6 {
    page-break-after: avoid;
  }
  
  ul, ol, li {
    page-break-inside: avoid;
  }
  
  table table, tr, td {
    page-break-before: avoid;page-break-after: avoid;
  }
  
  .clanky {
    border-top: #a087ad 1px dotted;   /* a087ad 85619d 6c4e7f 7ca4ef */
  }
  
  .notisk {
    display: none;
  }
  
  .schovat {
    visibility: visible;
  }
  
  #malanav {
    border-bottom: #a087ad 1px solid;
  }
  
  .datum {
    color: #000;
  }
}