@import url("/css/reset.css");
@import url("/css/fonts.css");

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}


/* Hlavní rozvržení stránky ---------------------------------------- */

html{
  background:url('/web_img/pozadi.png');
  background-repeat:repeat;
  background-position: left top;
  font-family: 'PT Sans', sans-serif;  
}

body{
   font-size:110%;
   overflow-x: hidden;
}

body > * {
  padding: 0 1em;
}

i {
  font-style: italic;
}

sup {
  vertical-align: super;
}

a {
  text-decoration: none;
  overflow-wrap: break-word;
}

a:hover {
  text-decoration: underline;
}

h1, h2, h3 {
  font-family: 'BebasNeue2', 'PT Sans', sans-serif;
  font-weight: normal;
}

h1, h2 {
  font-size: 150%;
  margin-bottom: 0.5em;
}



#obal{

}

.inner {
  margin:0 auto;
  width:100%;
  max-width: 1260px;
}

#zahlavi{
  background: black;}

#menu .inner {
  border-bottom:1px solid #c7c7c7;  
}

#obsah_okraj{
  padding:2em 1em;}

#obsah{
  width:75%;
  padding-right: 0.75%;
  float:left;
}

  
#sloupec{
  width:25%;
  float:right;
  padding-left: 0.75%;
}
  
#ostatni_prispevky{
}

#zapati{
  clear:both;}

/* Nastaveni barvy písmen a nastavení barvy písmen u některých odkazů po najetí myši */

a, p, li, input, span{color:#606060;}
body #obal a:hover{color:#d25050;}
h3 a {color:black;}
#obal h3 a:hover{color:#d40000;}
#obsah_okraj h2 a{color:black;}
#obsah_okraj h2 a:hover{color:black;}
#ostatni_prispevky h2 a:hover{color:#606060;}

/* Zahlavi ------------------------------------------------------------------ */

#zahlavi h1{
  margin-left:-5000px;
  float:left;}

#zahlavi ul{
  list-style:none; padding: 10px 0;}

#zahlavi ul li{
  display: inline-block;
  padding-left:20px;}

#obal #zahlavi .uvod{
  padding-left:1px;}

#zahlavi ul li a{
  color:#a5a5a5;
    padding: 5px 0;
    display: block;
  font-family: 'BebasNeue2', 'PT Sans', sans-serif;
}

#zahlavi ul li a:hover{
  color:white; text-decoration: none;}

#zahlavi .img{
  padding-top:14px;
  overflow:hidden;  
}
  
.header-left {
  float: left;
  width: 45%;
  padding-right: 5%;
}

.header-right {
  float: right;
  width: 55%;
  text-align: right;
}

#uvod #zahlavi .uvod a{
  color:white;}

img {
  max-width: 100%;
}
.detail img {
  height: auto !important;
}
.detail ul {
	list-style: disc;
	margin-left: 2em;
}

.nahled_msg {
  position:fixed;
  top:0px;
  left:0px;
  z-index:128;
  background-color:white;
  padding:5px;
  border: dashed white 2px;  
}

/* Menu ------------------------------------------------------------------ */

#menu ul{
  float:left;}

#menu ul li{
  list-style:none;
  display: inline-block;
  margin-right: 0.5em;
  font-size:70%;
  height:100%;}

#menu ul .weight{
  font-weight:bold;
  padding:0px;}
  
#menu ul .mezera{
  font-weight:bold;
  padding:0 0px 0 40px;}

#menu ul li a{
  display: block;
  color:#686868;
  font-size:125%;
  padding: 1em 0;
  border-bottom:1px solid transparent;
  margin-bottom: -1px;
}

#menu ul li a:hover{
  border-bottom:1px solid red;
  text-decoration: none;
}

#menu .home {
  padding-left: 26px;
  background:url('/web_img/dum.png') no-repeat left 1.1em;

}


#menu ul .more > a {
  padding-right: 15px;
  background:url('/web_img/sipka.png') no-repeat right 21px;
}

/* svisla nabídka */
#menu ul li{position:relative;}
/* aby se 'dalsi' tagy zobrazovaly pod sebou */
#menu ul li.more2{
  display:block;
  margin:0px;
  line-height:20%;
}


#menu ul ul{
border: dashed gray 1px;
border-top: 0px;
position:absolute;
z-index:200;
background:url('/web_img/pozadi.png');
left:0px;
top:48px;
visibility:hidden;
width: auto;
padding: 0px 5px 0px 5px;
}

#menu ul li:hover ul{visibility:visible;}

#menu p{
  padding-top:14px;
  float:left;}

#menu p a{
  padding-left:28px;
  background:url('/web_img/dum.png') no-repeat left top;}

/* Kde jsem  - rozdělení mezi češtinou a angličtinou */
.cs #menu ul li a.menu_selected{
  border-bottom:1px solid red;}

/* Kde jsem - značí podtržení na každé stránce */

#uvod #menu ul li a.menu_selected{
  border-bottom:1px solid red;}

/* Formular ---------------------- */

#menu form{
  padding-top:9px;
  float:right; position: relative;}

#menu form input{
  float:left;
  border:none;
  width:199px;
  height:27px;
  padding-left:4px;
  font-style:italic;}

#menu form input[type="text"] {
  padding-right: 30px;
}

#menu form input.odeslat{
  padding-left:0px;
  border:none;
  float:right;

  width:27px;
  background:white url('/web_img/lupa.png') no-repeat 50% 50%;
  height:27px;
  cursor:pointer; position: absolute;
  right: 0;
}

/* Stitek - obsah -------------------------------------------------------------- */

.articlewrap {
  margin: 0 -1% -1em;
}

.stitek {
  margin: 0 1% 1em;
  padding-bottom: 2.5em;
  width:31.33%;
  height:19em;
  float:left;
  position:relative;
  background-color:white;
  -webkit-box-shadow: 0 3px 3px 0 rgba(0,0,0,0.25);
  box-shadow: 0 3px 3px 0 rgba(0,0,0,0.25);  
  overflow: hidden;
}

.eventswrap {
  margin: 0 -1%;
}

.eventswrap .stitek {
  width: 98%;
  height: 9em;
  margin: 0 1% 1em;
  border-bottom:7px solid #d40000;
}

#side_3 {
  border-bottom:7px solid #540000;
}

.hidden_akce {
  display: none;
}

.stitek_obrazek {
  max-height: 50%;
  overflow:hidden;
}
.stitek img {
  width: 100%;
  height: auto;
}

.stitek h3{
  padding:15px 10px 0 10px;
  font-size:120%;
  }

.stitek p {
  padding:10px 10px 0 10px;
  font-size:80%;
  line-height: 125%;
}

.stitek p a{
  color:red;
  text-decoration:underline;}

.pata {
  overflow: hidden;
  height: 1.5em; 
  text-align:right;  
}

.pata:hover {
  overflow: hidden;
  height: auto;    
}

.stitek .pata, .detail .pata {
  position:absolute;  
  bottom: 0;
  width: 100%;
  left: 0;
  background:#606060;
  padding: 0.25em 0.25em 0.25em 0.5em;    
}

.stitek .pata span , .detail .pata span{
  color:#d9d9d9;
  font-size:70%;
  float: left;
  display: inline-block;
  vertical-align: bottom;
}

.detail .pata span{
  font-size:80%;
}

.detail .pata .tisk_icon {
	float: left;
	margin: -5px 10px 4px -8px;
	padding: 0.4em;
	background: lightgray;
	}
.stitek .pata span.kalendar, .detail .pata span.kalendar {
  background:url('/web_img/kalendar_01.png') no-repeat left 50%;
  padding-left:20px;
  padding-top: 0.25em;
  vertical-align: top;
  margin-bottom: 4px;
}
.stitek .pata span.kalendar_updated, .detail .pata span.kalendar_updated {
	background:url('/web_img/kalendar_01_updated.png') no-repeat left 50%;
}

.detail .pata span.osoba {
  padding-left:23px;
  background:url('/web_img/osoba.png') no-repeat left 50%;
  margin-left: 1em;
  padding-top: 0.25em;
  margin-bottom: 2px;
}

.zdroj {
  padding-left:23px;
  background:url('/web_img/svet2.png') no-repeat left 50%;
  margin-left: 1em;
  padding-top: 0.25em;
  margin-bottom: 2px;  
}
.zdroj a {
  color:white;
}

.stitek .pata div, .detail .pata div{  
}
  
.akce_odkaz, .stitek .pata div a, .detail .pata div a{
  text-decoration: none !important;
  letter-spacing:1px;
  /* float:right;   */
  color:white;
  border-radius: 3px;
  margin:0 2px;
  font-size:60%;
  padding:4px 8px 4px 8px;
  background-color:#464646;
  line-height: 17px;
  display: inline-block;
}

.detail .pata div a{
  padding:1px 8px 1px 8px;
  font-size:70%;
}

/* Stitek - sloupec -------------------------------------------------------------- */

#sloupec .stitek p{
  padding-top:0px;}
  
#sloupec .stitek h3+p{
  padding-top:5px;} 

#sloupec .stitek p a{
  text-decoration:none;
  color:#d40000;
  font-size:100%;
  font-weight:bold;}
  
#sloupec .stitek p+p{
  padding:10px;
}

#sloupec .stitek p+p a{
  font-weight:normal;}


/* Pata obsahu a pata sloupce -----------------------------------------------------*/

/* obsahu */

.pata_obsahu {
  border-bottom:1px solid #c7c7c7;
  clear: both;
}

.pata_obsahu p{
    display: inline-block;
    font-size: 70%;
    height: 100%;
    list-style: outside none none;
    margin-right: 0.25em;
    font-weight: bold;
}

.pata_obsahu ul{
  display: inline-block;
  list-style-type:none;}

.pata_obsahu ul li{
    display: inline-block;
    font-size: 70%;
    height: 100%;
    list-style: outside none none;
    margin-right: 0.25em;
}

.pata_obsahu li a{
    color: #686868;
    display: block;
    font-size: 125%;
    margin-bottom: -1px;
    padding: 1em 0;
}
.pagination {
  padding-top: 1.4em;
}

.pata_obsahu li a:hover{
  border-bottom:1px solid #d40000; text-decoration: none;}
  
.pata_obsahu ul+p{
  float:right;}

.pata_obsahu a.na_ktere_strance{
  border-bottom:1px solid #d40000;}

.pata_obsahu .neaktivni{
  color:#a5a5a5;}

/* sloupce */

.pata_sloupec{
  font-size:70%;
  border-bottom:1px solid #c7c7c7;}

.pata_sloupec p{
  padding:0.75em 0;}

.pata_sloupec a{  
  font-weight:bold;
  display: inline-block;
  padding: 0.65em 0;
  }

.disclaimer {
  background-color: #D9D9D9;
  margin:10px -17px -10px -17px;
  padding:5px 20px 5px 20px;
}

.disclaimer a {
  color: #333333;
  text-decoration: underline;
}

.nalezeno {
  color:#d40000;
}


/* Zápatí ------------------------------------------------------------ */
/* Rozdělení patičky + nadpis ------------*/

.promo{
  width: 100%;
  text-align:center;
  float:right;
  padding-left: 0.75%;
  }

.promo img {
  margin-top:10px;
  width:90%;
  max-width:300px
}
  
.promo a {
  display: block;
  /*height:12em;
  background: #585757;
  border: 5px solid #464646;*/
  position: relative;
}

.promo span {
  color: #fff;
  font-size: 125%;
  display: block;
  text-align: center;
  padding-top: 4.25em;
  font-family: 'BebasNeue2', 'PT Sans', sans-serif;  
}


/* Píšou Jinde ------------------------- */

.prispevky {
  float: left;
  width: 100%;
  padding-right: 0.75%;
}

.prispevkywrap {
    margin: 0 -1%;
}

.pisou_jinde{
  height:5.5em;
  width:23%;
  float:left;
  margin:0 1% 1em;
  border-bottom:1px solid #c7c7c7;}

.pisou_jinde p{

}

.pisou_jinde p a{
  font-size:80%;
  background: none;
  margin-bottom: 0.5em;
  line-height: 120%;
  min-height: 2.7em;
  padding-left: 0;
  font-weight: bold;
}

.cspj_lokal, .cspj_zdroj, .pisou_jinde a{
  padding:2px 0 0px 23px;
  display: block;
  margin-bottom:4px;
  background: url('/web_img/svet.png') no-repeat left top;
  font-size:70%;}

.cspj_datum, .akce_archiv, .pisou_jinde a+a{
  padding:1px 0 0 22px;
  background: url('/web_img/kalendar_02.png') no-repeat 1px top;}

.cspj_lokal {
  background: url('/web_img/lokal.png') no-repeat left top;
}

.cspj_lokal, .cspj_datum, .cspj_zdroj {
    background-position: 0px 5px;
    font-size:90%;
}

.cspj_warning {
    background:#555;
    margin: -15px;
    margin-bottom: 20px;
    padding:20px;
}
.cspj_warning, .cspj_warning a {
    color:white;
}

.akce_archiv {
  font-size:70%;
  margin:-10px 0 20px -10px;
}

.akce_datum {
  color:#d40000;
  font-weight:bold;
  margin-top:-10px;
}

.search_details {
    float:left;
    margin-right: 10px;
}

.prehled_polozka {
    clear:both;
    margin-bottom: 55px;
}
.search_uvod {
    margin: -10px 10px 5px 0px
}
.search_option_group {
    margin-bottom: 5px;
}
.search_option {
    border: solid #555 1px;
    background: #666;
    border-radius: 2px;
    white-space:nowrap;
    padding: 3px 10px 3px 0px;
	display: inline-block;
	margin-top: 1px;
}
.search_option input {
  transform: scale(0.7);
}

#ext_hledani_nadpis {
    font-size: smaller;
    margin: 3px 5px 0px 5px;
    text-decoration: underline;
    color: #606060;
    cursor:pointer;
}
#ext_hledani_nadpis:hover {
    color:red;
}
#ext_hledani {
    background: #222;
    color: white;
    font-size: smaller;
    padding: 3px 5px 5px 5px;
    margin-bottom: 3px;
}

.showHide {
    display: block;
    float: left;
    }
icon { margin-left: 5px;}
#toggle {
    display:none;
}
#toggle:not(:checked) ~ icon:after { content: "▸"; }
#toggle:not(:checked) ~ #ext_hledani {
    display:none;
}
#toggle:checked ~ icon:after { content: "▾"; }
#toggle:checked ~ #ext_hledani {
    display:block;
}

/* Reklamy napravo ---------------------*/

.reklama img{
  margin-bottom:10px;}

/* Adresy ------------------------------*/

#adresy {
  padding: 1em 1em;
}

#adresy ul{
  padding-left:20px;
  padding-bottom:1em;
  border-bottom:1px solid #c7c7c7;
}
  
#adresy ul li{  
  color:red;
  list-style-type:square;
  padding-bottom:6px;
  float:left;
  width:20%}

#adresy ul li a{
  font-size:90%;}

#adresy ul li a:hover{
  color:#d40000;}

/* Zapati -----------------------------------------------------------------*/

#zapati {
  padding: 1em;
}

#zapati ul{
  list-style-type:none;
  float:left;}

#zapati ul+ul{
  list-style-type:none;
  float:right;}

#zapati ul li{
  float:left;
  padding:0 15px 0 0;
  font-size:70%;}

#zapati ul+ul li{
  float:right;
  padding:0 0 0 15px;}

/* Detail ----------------------------------------------------------------- */

.cf:before,
.cf:after {
  content:"";
  display:table;
}
.cf:after {
  clear:both;
}
.cf {
  zoom:1; /* For IE 6/7 (trigger hasLayout) */
}



.detail {

  position:relative;
  padding: 1em 1em 2em ;

  background-color:white;
  -webkit-box-shadow: 0 3px 3px 0 rgba(0,0,0,0.25);
  box-shadow: 0 3px 3px 0 rgba(0,0,0,0.25);  
  font-size: 90%;
  line-height: 125%;
  color:#606060;
}

.detail p {  
  margin: 1em 0;
}

.detail a {  
  text-decoration: underline;
}

.detail a:hover{
  color:#d40000;  
}

.detail b, .detail strong {
  font-weight: bold;
}

.detail i, .detail em {
  font-style: italic;
}

.detail .topimage {  
  max-width: 400px;
  float: left;
  margin-right: 10px;
  margin-bottom: 5px;
}

.detail .videowrap {
    height: 0;
    padding-bottom: 56.2%;
    position: relative;
}

.detail .videowrap iframe {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;  
}

.detail .perex {
  margin-top: 0;
  font-size: 100%;
  font-weight: bolder;
}

.detail h2 {
  font-size: 125%;
  margin: 1.5em 0 0.5em;
}

.pod_akce a {
    text-decoration:none;
    margin-top: 3px;
    float:left;
}

/* popup (kontakt/FB atd.) */
.overlay {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(0, 0, 0, 0.7);
	transition: opacity 500ms;
	visibility: hidden;
	opacity: 0;
}

.popup {
	margin: 70px auto;
	padding: 20px;
	background: #fff;
	border-radius: 5px;
	width: 30%;
	position: relative;
	transition: all 5s ease-in-out;
}

.popup h2 {
	margin-top: 0;
	color: #333;
	font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
	position: absolute;
	top: 5px;
	right: 15px;
	transition: all 200ms;
	font-size: 30px;
	font-weight: bold;
	text-decoration: none;
	color: #333;
}
.popup .close:hover, .popup a {
	color: red;
}

.imgFloatRight {
	float:right;
}

/* media queries -----------------------------------------------------------------*/

@media screen and (max-width: 960px) {

  #obsah, #sloupec {
    width: 100%;
    float: none;
    padding: 0;
  }

  #obsah {
    margin-bottom: 1em;
  }

  .eventswrap {
    margin: 0;
  }

  .eventswrap .stitek {
    width: 100%;
    height: auto;
    margin: 0 0 1em;
  }

  #adresy ul li {
    width: 33.33%;
  }

  .prispevky {
    width: 100%;
    float: none;
  }

  .pisou_jinde {
    width: 48%;
  }

  #menu ul {
    float: none;
  }

  #menu form {
    float: none;
  }

  #menu .inner {
    border: 0;
  }

  #menu ul {
    float: none;
    width: 100%;
    border-bottom: 1px solid #c7c7c7;
  }

  #menu ul .mezera {

    padding-left: 0;
  }

  #menu form input {
    width: 100%;
  }

  #menu form {
    padding: 0.75em 0;
  }

}

@media screen and (max-width: 640px) {
  
  .detail .topimage {  
    max-width: 50%;
  }

  .header-left, .header-right {
    float: none;
    width: 100%;
    padding: 0;
  }

  .header-right {
    text-align: left;
  }

  #zahlavi .img {
    padding: 0;
  }

  #zahlavi ul li {
    padding: 0 20px 0 0;
  }

  .articlewrap {
    margin: 0;
  }

  .stitek {
    width: 100%;
    float: none;    
    margin: 0 0 1em;
  }

  #adresy ul li {
    width: 50%;
  }

  #zapati ul, #zapati ul + ul {
    float: none;
    width: 100%;
  }

  #zapati ul + ul {
    margin-top: 1em;
  }

  #zapati ul + ul li {
    float: left;
    padding: 0 15px 0 0
  }

  .popup{
	  width: 70%;
  }
  
}

@media screen and (max-width: 420px) {
  
    brmobile {
        display: block;
        line-height: 0px;
    }
  .detail .topimage {  
    width: 100%;
    max-width: 100%;
  }

  .prispevkywrap {
    margin: 0;
  }
  .pisou_jinde {
    margin: 0 0 1em;
    width: 100%;
    float: none;
  }

  #adresy ul li {
    float: none;
    width: 100%;
  }

  .disclaimer {
    margin-bottom: -72px;
  }
  .detail {padding-bottom: 6em;}

  .detail .pata span.kalendar, .detail .pata span.osoba {
    display: block;
      margin: 0em 0.5em;
  }

  .detail .pata div {
    float: none;
    padding-bottom: 0.5em;
  }

  .detail .pata div a {
    float: none;
  }
  
  .imgFloatRight {
		float:none;
  }
}