BODY, HTML {
	padding: 0px;
	margin: 0px;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	float:left;
}

#all {
	position: absolute;
	left: 50%;
	padding: 0px;
	margin: 0px;
	width: 1300px;
	margin-left: -650px;
	/* #menu1 (a hidden JS-toggled statistics-archive dropdown, listing
	   every monthly archive entry - 164+ of them) is visibility:hidden
	   but still occupies its own real height as a normal-flow list
	   internally; positioned absolute within #all, that ~5600px box was
	   silently expanding the whole page's scrollable area far past the
	   actual visible content - a huge empty area you could scroll into
	   below the footer on every single page. Present on the original
	   site too (same 6000+px phantom scroll height there), so this was
	   never intentional - overflow:hidden here contains it. */
	overflow: hidden;
}

#head {
	position: relative;
	width: 1300px;
	height: 162px;
	padding: 0px;
	margin: 0px;
	float: left;
	clear: both;
	background-image: url(../images/banner_01.jpg);
	background-position:  top left;
	background-repeat: no-repeat;
}

#head_podstranka {
	position: relative;
	width: 1300px;
	height: 162px;
	padding: 0px;
	margin: 0px;
	float: left;
	clear: both;
	background-image: url(../images/banner_podstranka_01.jpg);
	background-position:  top left;
	background-repeat: no-repeat;
}

#head_imageL {
	width: 165px;
	height: 384px;
	float: left;
	background-image: url(../images/banner_02.jpg);
	background-position:  top left;
	background-repeat: no-repeat;
}

#head_imageM {
	width: 970px;
	height: 384px;
	float: left;
	background-image: url(../images/banner_03_1.jpg);
	background-position:  top left;
	background-repeat: no-repeat;
}

#head_imageM h1 {
  position: absolute;
  font-size: 33px;
  font-weight: normal;
  color: #CCCCCC;
  margin-top: 325px;
  margin-right: 50px;
  margin-left: 600px;
}

#head_imageR {
	width: 165px;
	height: 384px;
	float: left;
	background-image: url(../images/banner_04.jpg);
	background-position:  top left;
	background-repeat: no-repeat;
}

#head_bull {
	position: relative;
	width: 1300px;
	height: 35px;
	padding: 0px;
	margin: 0px;
	float: left;
	clear: both;
	background-image: url(../images/banner_05.jpg);
	background-position:  top left;
	background-repeat: no-repeat;
}

#head_podstranka_title {
	position: relative;
	width: 1300px;
	height: 147px;
	padding: 0px;
	margin: 0px;
	float: left;
	clear: both;
	background-image: url(../images/banner_podstranka_02.jpg);
	background-position:  top left;
	background-repeat: no-repeat;
}

#head_podstranka_title H1 {
  font-size: 33px;
  font-weight: normal;
  color: #CCCCCC;
  margin-top: 34px;
  margin-left: 217px;
  float: left;
}

#banner_menu {
	position: absolute; 
	width: 350px; 
	top: 75px;
	right: 165px;
	font-size: 11px;
	line-height: 24px; 
	text-align: right;
	color:#e3e3e3;
}

#banner_menu a {
	color:#e3e3e3;
	font-size:10px;
	text-decoration:none;
}

#upmenu {
	position: relative;
	width: 1300px;
	height: 84px;
	padding: 0px 0px 0px 165px;
	margin: 0px;
	float: left;
	clear: both;
	background-image: url(../images/upmenu.jpg);
	background-position:  top left;
	background-repeat: no-repeat;
}

#upmenu a{
	color:#666666;
	font-size:12px;
	font-weight:bold;
	text-decoration:none;
}

#reklama_login {
	position: relative;
	width: 1300px;
	height: 251px;
	padding: 0px;
	margin: 0px;
	float: left;
	clear: both;
	background-image: url(../images/reklama_login.jpg);
	background-position:  top left;
	background-repeat: no-repeat;
}

#reklama_login #reklama {
	width: 624px;
	height: 216px;
	margin: 0px 0px 0px 172px;
	float: left;
}

#reklama_login #reklama h2 {
	margin-left: 10px;
	font-size:24px;
	font-weight: normal;
	color: #555555;
}

#reklama_login #reklama a {
	margin: 30px 5px 0px 5px;
}

#reklama_login #prihlasenie {
	width: 292px;
	height: 216px;
	margin: 0px 0px 0px 39px;
	float: left;
	font-size:11px;
	line-height: 24px; 
	color: #555555;
}

#reklama_login #prihlasenie h2 {
	margin-left: 90px;
	font-size:24px;
	font-weight: normal;
	color: #555555;
}

#reklama_login #prihlasenie a {
	text-decoration:none;
	font-size: 11px;
	font-weight:bold;
	line-height: 24px; 
	color: #3d73aa;
}

#reklama_login #prihlasenie form {
	padding: 3px 10px 3px 0;
	margin: 0;
}

#reklama_login #prihlasenie input {
	vertical-align: middle;
}

#reklama_login #prihlasenie input#lb_login {
	margin: 5px;
	width: 150px;
}

#reklama_login #prihlasenie input#lb_password {
	margin: 5px;
	width: 150px;
}

#reklama_login #prihlasenie input.text0 {
	color: #AAAAAA;
}

#reklama_login #prihlasenie input.text1 {
	color: black;
}

#logo {
	position: relative;
	margin:0;
	padding: 62px 10px 10px 144px;
	line-height: normal;
}

#logo a {
	width: 350px; 
	/*height: 88px;*/
	font-size: 30px;
	font-weight: normal;
	padding-left: 20px;
	color: #FFFFFF;
	text-decoration:none;
	/*background-image: url(../images/blank.gif);
	background-repeat:no-repeat;
	display:block;
	text-indent:-9999px;*/
}


#logo h1 {
/*  width: 350px;
  font-size: 30px;
  font-weight: normal;
  padding-top: 3px;
  padding-left: 20px;
  color: #FFFFFF;*/
  width: 0px;
  float: left;
  text-indent:-9999px;
}

#logo h2 {
	padding: 25px 10px 45px 330px;
}

DIV.login-box {
	position: absolute; 
	width: 250px; 
	top: 0px;
	right: 0px;
	font-size: 11px;
	line-height: 24px; 
	text-align: right;
}

DIV.login-box a {
	color: black;
}

DIV.login-box form {
	padding: 3px 10px 3px 0;
	margin: 0;
}

DIV.login-box input {
	vertical-align: middle;
}

DIV.login-box input#lb_login {
	width: 100px;
}

DIV.login-box input#lb_password {
	width: 70px;
}

DIV.login-box input.text0 {
	color: #AAAAAA;
}

DIV.login-box input.text1 {
	color: black;
}

DIV.login-box-admin {
	position: absolute; 
	width: 250px; 
	top: 0px;
	right: 0px;
	margin-right: 20px;
	font-size: 11px;
	line-height: 24px; 
	text-align: right;
}

DIV.login-box-admin a {
	color: white;
}

DIV.login-box-admin form {
	padding: 3px 10px 3px 0;
	margin: 0;
}

DIV.login-box-admin input {
	vertical-align: middle;
}

DIV.login-box-admin input#lb_login {
	width: 100px;
}

DIV.login-box-admin input#lb_password {
	width: 70px;
}

DIV.login-box-admin input.text0 {
	color: #AAAAAA;
}

DIV.login-box-admin input.text1 {
	color: white;
}

DIV.login-box-admin-inputs {
	color: white;
}

DIV.login-box-admin-options {
	color: white;
}

#nav { 
	position:absolute; 
	left: 600px; 
	top: 46px;
	width: 250px;
	line-height: normal;
	font-size: 12px;	
	text-align: right;
}

#nav p#lang {
	position: absolute; 
	padding: 20px 0 0 25px;
	left: 0;
	color:#FFFFFF;
}


#nav p#lang a {
	padding-left: 35px;
}

#nav p#lang select {
	font-size: 11px; 
	margin: 0 5px 0 0;
	color:#000000;
}

#nav-admin { 
	position:absolute; 
	left: 600px; 
	top: 75px;
	width: 250px;
	line-height: normal;
	font-size: 12px;	
	text-align: right;
	color:#FFFFFF;
}

#nav-admin p#lang-admin {
	position: absolute; 
	padding: 25px 0 0 25px;
	left: 0;
	color:#FFFFFF;
}


#nav-admin p#lang-admin a {
	padding-left: 35px;
}

#nav-admin p#lang-admin select {
	font-size: 11px; 
	margin: 0 5px 0 0;
	color:#000000;
}

#main {
	position: relative;
	width: 1300px;
	padding: 0px;
	margin: 0px;
	float: left;
	background-image: url(../images/center.jpg);
	background-position:  top left;
	background-repeat: repeat-y;
}

#mainleft {
	position: relative;
	width: 200px;
	padding: 0px;
	margin: 0px;
	float: left;
}

DIV.leftmenu {
	position: relative;
	width: 200px;
	margin: 0px;
	padding: 0px;
	float: left;
}

ul.leftmenu {
	position: relative;
	margin: 0px;
	padding: 0px;
}

li.leftmenuaktiv {
	position: relative;
	width: 180px;
	height: 43px;
	float: left;
	list-style: none;
	list-style-type: none;
	padding: 0px;
	margin: 0px;
	border-left: 20px solid #204367;
	color: #204367;
	font-size: 18px;
	line-height: 42px;
	text-align: center;
	font-weight: bold;
}

li.leftmenuaktiv a {
	text-decoration: none;
	color: #204367;
}

li.leftmenuaktiv a:hover {
	text-decoration: none;
	color: #204367;
}

li.leftmenu {
	position: relative;
	width: 200px;
	height: 36px;
	float: left;
	list-style: none;
	list-style-type: none;
	padding: 0px;
	margin: 0px;
	border-top: 1px solid #FFFFFF;
	font-size: 15px;
	line-height: 36px;
	text-align: left;
	text-indent: 10px;
	font-weight: bold;
	background-color: #3d73aa;
	color: #FFFFFF;
}

li.leftmenu a {
	position: relative;
	width: 200px;
	height: 36px;
	float: left;
	list-style: none;
	list-style-type: none;
	padding: 0px;
	margin: 0px;
	border-top: 1px solid #FFFFFF;
	font-size: 15px;
	line-height: 36px;
	text-align: left;
	text-indent: 10px;
	font-weight: bold;
	background-color: #3d73aa;
	color: #FFFFFF;
	text-decoration: none;
	display: block;
}

li.leftmenu a:hover {
	position: relative;
	width: 200px;
	height: 36px;
	float: left;
	list-style: none;
	list-style-type: none;
	padding: 0px;
	margin: 0px;
	border-top: 1px solid #FFFFFF;
	font-size: 15px;
	line-height: 36px;
	text-align: left;
	text-indent: 10px;
	font-weight: bold;
	background-color: #3d73aa;
	color: #FFFFFF;
	text-decoration: none;
	display: block;
}

li.leftmenuspace {
	position: relative;
	width: 200px;
	height: 20px;
	float: left;
	list-style: none;
	list-style-type: none;
	padding: 0px;
	margin: 0px;
	border-top: 1px solid #FFFFFF;
	font-size: 15px;
	line-height: 36px;
	text-align: left;
	text-indent: 10px;
	font-weight: bold;
	color: #FFFFFF;
}

#mainright {
	width: 754px;
	margin-left: 165px;
	float: left;
}

DIV.mainrightin {
	width: 710px;
	float: left;
	font-size: 12px;
}

#mainright_podstranka {
	width: 216px;
	float: left;
}

DIV.mainrightprihlasenie_podstranka {
	width: 216px;
	height: 245px;
	float: left;
	background-image: url(../images/prihlasenie_podstranka.jpg);
	background-position:  top left;
	background-repeat: no-repeat;
}

#mainright_podstranka #prihlasenie {
	width: 200px;
	height: 216px;
	margin: 0px 0px 0px 10px;
	float: left;
	font-size:11px;
	line-height: 24px; 
	color: #555555;
}

#mainright_podstranka #prihlasenie h2 {
	margin-left: 50px;
	font-size:24px;
	font-weight: normal;
	color: #555555;
}

#mainright_podstranka #prihlasenie a {
	text-decoration:none;
	font-size: 11px;
	font-weight:bold;
	line-height: 24px; 
	color: #3d73aa;
}

#mainright_podstranka #prihlasenie form {
	padding: 3px 10px 3px 0;
	margin: 0;
}

#mainright_podstranka #prihlasenie input {
	vertical-align: middle;
}

#mainright_podstranka #prihlasenie input#lb_login {
	margin: 5px;
	width: 90px;
}

#mainright_podstranka #prihlasenie input#lb_password {
	margin: 5px;
	width: 90px;
}

#mainright_podstranka #prihlasenie input.text0 {
	color: #AAAAAA;
}

#mainright_podstranka #prihlasenie input.text1 {
	color: black;
}

DIV.mainrightreklama_podstranka {
	width: 327px;
	height: 423px;
	float: left;
	background-image: url(../images/reklama_podstranka.jpg);
	background-position:  top left;
	background-repeat: no-repeat;
}

#mainright_podstranka #reklama {
	width: 307px;
	height: 423px;
	margin: 0px 10px 0px 10px;
	float: left;
}

#mainright_podstranka #reklama h2 {
	margin-left: 10px;
	font-size:24px;
	font-weight: normal;
	color: #555555;
}

#mainright_podstranka #reklama a {
	margin: 5px 0px 5px 8px;
}

#mainrightadmin {
	position: relative;
	width: 970px;
	padding: 0px;
	margin: 0px;
	float: left;
}

DIV.mainrightadminin {
	position: relative;
	width: 950px;
	left: 5px;
	float: left;
	padding: 0px;
	margin: 0px;
	font-size: 12px;
}

.kdesom {
	position: relative;
	width: 610px;
	float: left;
	padding: 2px;
	margin: 0px;
	font-size: 11px;
	text-align: left;
	font-variant: small-caps;
}

.kdesoml {
	position: relative;
	width: 610px;
	float: left;
	padding: 2px;
	margin: 0px;
	font-size: 11px;
	text-align: left;
	font-variant: small-caps;
}

/* FOOT */
#foot {
	clear: both;
	padding: 0px;
	line-height: 15px;
	font-size: 10px;
}

#foot p {
	margin: 0;
	float: left;
}

#foot p.address {
	padding: 0 30px 0 0;
}

#foot p.infonia {
	float: right;
}

#foot p.infonia a {
	display: block;
	float: left;
	width: 100px;
	text-align: center;
}

#foot p.infonia img {
	display: block;
	margin: 0 auto;
}

#foot select {
	font-size: 11px; 
	margin: 0 5px 0 0;
}

#footer_odkazy {
	position: relative;
	width: 1300px;
	height: 262px;
	padding: 0px;
	margin: 0px;
	float: left;
	clear: both;
	background-image: url(../images/footer_01.jpg);
	background-position:  top left;
	background-repeat: repeat-y;
}

#footer_odkazy #loga {
	margin: 73px 0px 0px 125px;
	float: left;
}

#footer {
	position: relative;
	width: 1300px;
	height: 76px;
	padding: 0px;
	margin: 0px;
	float: left;
	clear: both;
	background-image: url(../images/footer_02.jpg);
	background-position:  top left;
	background-repeat: no-repeat;
}

#footer #left_footer {
	float: left;
	height: 76px;
	margin: 30px 0px 0px 165px;
	font-size: 11px;
	color:#FFFFFF;
}

#footer #left_footer a {
	color:#0066FF;
	text-decoration:none;
}

#footer #right_footer {
	float: right;
	height: 76px;
	margin: 30px 165px 0px 0px;
	font-size: 11px;
	color:#FFFFFF;
}

#footer #right_footer a {
	color:#0066FF;
	text-decoration:none;
}

/* Slim legal-links bar (Terms / Privacy Policy / Cookie settings) - kept
   as its own full-width row below #footer rather than a third column
   inside it, so the original footer's fixed 1300x76px background graphic
   is left completely untouched. */
#footer_legal {
	position: relative;
	width: 1300px;
	padding: 10px 0;
	margin: 0;
	float: left;
	clear: both;
	text-align: center;
	background-color: #050c1a;
	box-sizing: border-box;
}

#footer_legal a {
	color: #9fc3e8;
	font-size: 11px;
	text-decoration: none;
	margin: 0 10px;
}

#footer_legal a:hover {
	text-decoration: underline;
}

.hide {
	display: none;
}

/* ---------------- Cookie consent banner (js/cookie-consent.js) ---------------- */
#cc-banner {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9999;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 16px;
	padding: 14px 20px;
	background-color: #050c1a;
	border-top: 1px solid #3d73aa;
	box-sizing: border-box;
}

#cc-banner .cc-banner__text {
	color: #ffffff;
	font-size: 13px;
	line-height: 1.5;
	max-width: 640px;
}

#cc-banner .cc-banner__text a {
	color: #9fc3e8;
}

#cc-banner .cc-banner__actions {
	display: flex;
	gap: 10px;
	flex-shrink: 0;
}

#cc-banner .cc-banner__btn {
	padding: 8px 18px;
	font-size: 13px;
	font-weight: bold;
	border: 1px solid #3d73aa;
	cursor: pointer;
	border-radius: 2px;
}

#cc-banner .cc-banner__btn--accept {
	background-color: #3d73aa;
	color: #ffffff;
}

#cc-banner .cc-banner__btn--reject {
	background-color: transparent;
	color: #ffffff;
}

@media (max-width: 600px) {
	#cc-banner {
		flex-direction: column;
		align-items: stretch;
		text-align: center;
	}
	#cc-banner .cc-banner__actions {
		justify-content: center;
	}
}

.center {
text-align:center;
}

.center img {
padding:10px 11px;
}

img {
border: medium none;
}

p#subnav a {
	padding: 2px 10px 2px 20px;
	background-repeat: no-repeat;
	background-position: 0 0;
}

a {
	color: #3d73aa;
	text-decoration: underline;
}

a:hover {
	color: #3d73aa;
	text-decoration: none;
}



p#subnav a:hover {
	background-position: 0 -50px;
}

p#subnav a.print {
	background-image: url(../../images/icon-print.gif);
}

p#subnav a.sitemap {
	background-image: url(../../images/icon-sitemap.gif);
}

p#subnav a.cart {
	background-image: url(../../images/icon-cart.gif);
}

p#subnav a.rss {
	background-image: url(../../images/icon-rss.gif);
}

p#subnav a.filtr {
	background-image: url(../../images/icon-filtr.gif);
}

/* set class dark if the blackground is dark */
p#subnav.dark a.print {
	background-image: url(../../images/icon-print-light.gif);
}

p#subnav.dark a.sitemap {
	background-image: url(../../images/icon-sitemap-light.gif);
}

p#subnav.dark a.cart {
	background-image: url(../../images/icon-cart-light.gif);
}

p#subnav.dark a.rss {
	background-image: url(../../images/icon-rss-light.gif);
}

p#subnav.dark a.filtr {
	background-image: url(../../images/icon-filtr-light.gif);
}

#menu1 {
	position: absolute;
	width: 200px;
	left: 201px;
	top: 342px;
	z-index: auto;
	margin: 0px;
	padding: 0px;
	float: left;
}

ul.submenu {
  position: relative;
  margin: 0px;
  padding: 0px;
  float: left;
}

li.submenu {
	position: relative;
	width: 200px;
	height: 36px;
	float: left;
	list-style: none;
	list-style-type: none;
	padding: 0px;
	margin: 0px;
	border-top: 1px solid #FFFFFF;
	font-size: 15px;
	line-height: 36px;
	text-align: left;
	text-indent: 10px;
	font-weight: bold;
	background-color: #3d73aa;
	color: #FFFFFF;
}

li.submenu a {
	position: relative;
	width: 200px;
	height: 36px;
	float: left;
	list-style: none;
	list-style-type: none;
	padding: 0px;
	margin: 0px;
	border-top: 1px solid #FFFFFF;
	font-size: 15px;
	line-height: 36px;
	text-align: left;
	text-indent: 10px;
	font-weight: bold;
	background-color: #3d73aa;
	color: #FFFFFF;
	text-decoration: none;
	display: block;
}

li.submenu a:hover {
	position: relative;
	width: 200px;
	height: 36px;
	float: left;
	list-style: none;
	list-style-type: none;
	padding: 0px;
	margin: 0px;
	border-top: 1px solid #FFFFFF;
	font-size: 15px;
	line-height: 36px;
	text-align: left;
	text-indent: 10px;
	font-weight: bold;
	background-color: #3d73aa;
	color: #FFFFFF;
	text-decoration: none;
	display: block;
}
/*
# {
	position: relative;
	width:
	height:
	padding: 0px;
	margin: 0px;
	float: left;
	background-image:
	background-position: left top;
	background-repeat: no-repeat;
}
*/

/* ============================================================
   MOBILE / TABLET RESPONSIVE LAYER
   Everything above this point is the original fixed 1300px design,
   untouched. This site was never responsive - every section is a
   fixed-pixel width laid out with float/absolute positioning that
   assumes exactly 1300px of viewport, so below that it just gets
   clipped/overlapped instead of reflowing.

   This block only takes effect under 1320px (the design's own 1300px
   plus a little slack) and turns the same markup into a normal,
   single-column, fluid layout: floats and absolute positioning become
   static/stacked, fixed pixel widths become 100%, and the header/footer
   background images (which are fixed-size graphics, not photos) get a
   plain color fallback since they can't scale to arbitrary widths.
   Above 1320px nothing here applies and the page renders exactly as
   it always did.
   ============================================================ */
@media (max-width: 1320px) {

	BODY, HTML {
		float: none;
		width: 100%;
		overflow-x: hidden;
	}

	#all {
		position: static;
		left: auto;
		width: 100%;
		margin: 0;
	}

	/* ---------------- header ---------------- */
	#head, #head_podstranka {
		position: relative;
		width: 100%;
		height: auto;
		min-height: 120px;
		padding: 16px;
		float: none;
		clear: both;
		background-size: cover;
		background-position: center;
		box-sizing: border-box;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: 8px;
	}

	#logo {
		position: static;
		padding: 0;
		margin: 0;
	}

	#logo a {
		width: auto;
		font-size: 22px;
		padding-left: 0;
	}

	#logo h2 {
		padding: 0;
	}

	#nav, #nav-admin {
		position: static;
		left: auto;
		top: auto;
		width: auto;
		text-align: left;
		order: 3;
	}

	#nav p#lang, #nav-admin p#lang-admin {
		position: static;
		left: auto;
		padding: 0;
	}

	#nav p#lang a, #nav-admin p#lang-admin a {
		padding-left: 8px;
	}

	#banner_menu {
		position: static;
		width: 100%;
		text-align: left;
		order: 2;
		flex-basis: 100%;
	}

	DIV.login-box, DIV.login-box-admin {
		position: static;
		width: 100%;
		top: auto;
		right: auto;
		margin-right: 0;
		text-align: left;
	}

	/* hero: the original 3-way sliced banner (165+970+165=1300px) can't
	   flex, so show only the middle rotating photo full-width and drop
	   the two flanking decorative slices + the dots strip below it. */
	#head_imageL, #head_imageR, #head_bull {
		display: none;
	}

	#head_imageM {
		position: relative;
		width: 100%;
		height: auto;
		float: none;
		overflow: hidden;
		background-size: cover;
		background-position: center;
	}

	#head_imageM img#img_change {
		position: static;
		display: block;
		width: 100%;
		height: auto;
		max-width: 100%;
	}

	#head_imageM h1 {
		position: absolute;
		z-index: 1;
		right: 16px;
		bottom: 12px;
		left: 16px;
		margin: 0;
		padding: 0;
		font-size: 20px;
		text-align: right;
	}

	#head_podstranka_title {
		position: relative;
		width: 100%;
		height: auto;
		min-height: 90px;
		padding: 20px 16px;
		float: none;
		clear: both;
		background-size: cover;
		background-position: center;
		box-sizing: border-box;
	}

	#head_podstranka_title H1 {
		margin: 0;
		float: none;
	}

	/* ---------------- main nav ---------------- */
	#upmenu {
		position: relative;
		width: 100%;
		height: auto;
		padding: 8px 12px;
		float: none;
		clear: both;
		background-image: none;
		background-color: #204367;
		box-sizing: border-box;
	}

	#upmenu table {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		border-collapse: collapse;
	}

	#upmenu table tr {
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		width: 100%;
	}

	/* the original markup has a stray unclosed <td> on every divider cell
	   (<td width="1" bgcolor="#666666"><td>) which browsers auto-close
	   into extra empty cells - hide everything except the cells that
	   actually contain a nav link. */
	#upmenu table tr td[height="30"], #upmenu table td:not([align="center"]) {
		display: none;
	}

	#upmenu table td[align="center"] {
		display: block;
		height: auto !important;
		width: 100% !important;
		background-color: transparent !important;
		padding: 10px 8px;
		border-top: 1px solid rgba(255,255,255,0.15);
		text-align: center;
	}

	#upmenu table td[align="center"]:first-of-type {
		border-top: none;
	}

	#upmenu a {
		color: #ffffff;
	}

	/* ---------------- main content ---------------- */
	#main {
		position: static;
		width: 100%;
		padding: 0;
		margin: 0;
		float: none;
		background-image: none;
	}

	#mainleft {
		width: 100%;
		float: none;
	}

	DIV.leftmenu, ul.leftmenu {
		width: 100%;
		float: none;
	}

	li.leftmenuaktiv, li.leftmenu, li.leftmenu a, li.leftmenu a:hover, li.leftmenuspace {
		width: 100%;
		box-sizing: border-box;
		float: none;
	}

	#mainright {
		width: 100%;
		margin-left: 0;
		float: none;
		padding: 0 16px;
		box-sizing: border-box;
	}

	DIV.mainrightin {
		width: 100%;
		float: none;
	}

	#mainright_podstranka {
		width: 100%;
		float: none;
		padding: 0 16px;
		box-sizing: border-box;
	}

	DIV.mainrightprihlasenie_podstranka {
		width: 100%;
		height: auto;
		float: none;
		background-image: none;
		background-color: #f4f4f4;
		border: 1px solid #dddddd;
		padding: 16px;
		margin-bottom: 24px;
		box-sizing: border-box;
	}

	#mainright_podstranka #prihlasenie {
		width: 100%;
		height: auto;
		margin: 0;
		float: none;
	}

	#mainright_podstranka #prihlasenie h2 {
		margin-left: 0;
	}

	#mainright_podstranka #prihlasenie input#lb_login,
	#mainright_podstranka #prihlasenie input#lb_password {
		width: 100%;
		box-sizing: border-box;
		margin: 4px 0;
	}

	DIV.mainrightreklama_podstranka {
		width: 100%;
		height: auto;
		float: none;
		background-image: none;
	}

	#mainright_podstranka #reklama {
		width: 100%;
		height: auto;
		margin: 16px 0 0;
		float: none;
	}

	#mainrightadmin {
		width: 100%;
		padding: 0 16px;
		box-sizing: border-box;
	}

	DIV.mainrightadminin {
		width: 100%;
		left: auto;
		float: none;
	}

	.kdesom, .kdesoml {
		width: 100%;
		float: none;
		box-sizing: border-box;
	}

	/* Two kinds of tables live inside .mainrightin on a phone:

	   1. Match-listing tables (Today's tips / Free tip / Statistics) -
	      9-10 columns (Date/Competition/Home/Guests/Tip/Rate/Score/
	      Deposit/Profit/Status). No way to fit those on 375px legibly,
	      so let them scroll horizontally. They're identifiable by their
	      <tr class="trsilver"> header row.

	   2. Everything else - the homepage's admin-edited "Tips for you!"
	      net-profit block (2 columns of sums) and the label/input form
	      tables. These must show in full, never scroll: they carry old
	      HTML width="..."/height="..." attributes sized for the 1300px
	      desktop layout, so width/height:auto lets cells and rows size
	      to their actual content and the whole table fits. */

	DIV.mainrightin table:has(td[data-label]),
	DIV.mainrightadminin table {
		display: block;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		max-width: 100%;
	}

	DIV.mainrightin table:has(td[data-label]) td,
	DIV.mainrightin table:has(td[data-label]) th {
		white-space: nowrap;
	}

	DIV.mainrightin table:not(:has(td[data-label])),
	DIV.mainrightadminin table:not(:has(td[data-label])) {
		display: table;
		width: 100% !important;
		height: auto !important;
		max-width: 100%;
		box-sizing: border-box;
	}

	DIV.mainrightin table:not(:has(td[data-label])) td,
	DIV.mainrightin table:not(:has(td[data-label])) th,
	DIV.mainrightin table:not(:has(td[data-label])) tr {
		width: auto !important;
		height: auto !important;
		white-space: normal;
		word-break: break-word;
	}

	/* ---------------- JS-toggled admin submenu ---------------- */
	/* stays out of flow like the original (position:absolute) - it's
	   visibility:hidden by default (js/obj.js toggles visibility, never
	   display), so position:static here made it silently occupy its own
	   real height - all 164 statistics-archive list items worth - as
	   dead space at the bottom of every single page. */
	#menu1 {
		position: absolute;
		width: 100%;
		max-width: 280px;
		left: 0;
		top: 0;
		/* its 164 list items still take normal-flow height inside this
		   box even though the box itself is visibility:hidden and out of
		   flow - and with #all now position:static on mobile (no longer
		   a positioned ancestor to scope it to), that ~5600px box was
		   silently expanding the whole document's scrollable height far
		   past the visible page, which is exactly the huge empty area
		   users could scroll into below the footer. Capping it at 0 with
		   overflow:hidden means it can never contribute scrollable area
		   to any ancestor, regardless of positioning context. */
		max-height: 0;
		overflow: hidden;
	}

	ul.submenu, li.submenu, li.submenu a, li.submenu a:hover {
		width: 100%;
		float: none;
		box-sizing: border-box;
	}

	/* ---------------- footer ---------------- */
	#footer_odkazy {
		position: relative;
		width: 100%;
		height: auto;
		padding: 20px 16px;
		float: none;
		clear: both;
		background-image: none;
		background-color: #050c1a;
		box-sizing: border-box;
	}

	#footer_odkazy #loga {
		margin: 0;
		float: none;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		gap: 16px;
	}

	#footer {
		position: relative;
		width: 100%;
		height: auto;
		padding: 16px;
		float: none;
		clear: both;
		background-image: none;
		background-color: #204367;
		box-sizing: border-box;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 8px;
	}

	#footer #left_footer, #footer #right_footer {
		float: none;
		height: auto;
		width: 100%;
		margin: 0;
		text-align: center;
	}

	#footer_legal {
		width: 100%;
		float: none;
		padding: 10px 16px;
		box-sizing: border-box;
	}

	#footer_legal a {
		display: inline-block;
		margin: 4px 8px;
	}

	#foot {
		padding: 10px 16px;
	}

	#foot p.infonia {
		float: none;
		text-align: center;
	}

	#foot p.address {
		padding: 0;
		text-align: center;
	}

	/* ---------------- admin back-office: stays fixed-width ----------------
	   The admin panel (zxcvbnm.php + app/admin/*) shares #all / #main /
	   #mainleft / #mainrightadmin with the public site but loads
	   style_admin.css on top and was never meant to be responsive - it's
	   a desktop back-office tool. Without this, opening it on any screen
	   under 1320px (incl. common 1280/1366px laptops) triggers all the
	   overrides above and scatters the layout. body.admin (set in
	   app/titulka/hlavicka2.php) restores the original fixed geometry. */
	body.admin #all {
		position: absolute;
		left: 50%;
		width: 1300px;
		margin-left: -650px;
	}
	body.admin #main {
		position: relative;
		width: 1300px;
		padding: 0;
		margin: 0;
		float: left;
		display: block;
		background-image: url(../images/center.jpg);
		background-repeat: repeat-y;
	}
	body.admin #mainleft {
		position: relative;
		width: 200px;
		float: left;
	}
	body.admin #mainrightadmin {
		position: relative;
		width: 970px;
		float: left;
	}
	body.admin DIV.mainrightadminin {
		position: relative;
		width: 950px;
		left: 5px;
		float: left;
	}
	body.admin DIV.mainrightadminin table {
		display: table;
		width: auto !important;
		overflow: visible;
	}
	body.admin DIV.mainrightadminin table td,
	body.admin DIV.mainrightadminin table th,
	body.admin DIV.mainrightadminin table tr {
		width: auto !important;
		height: auto !important;
		white-space: normal;
	}
	body.admin ul.submenu,
	body.admin li.submenu,
	body.admin li.submenu a,
	body.admin li.submenu a:hover {
		width: 200px;
		float: left;
	}
}

/* ============================================================
   PHONE (<= 767px): match-listing tables stack instead of scrolling
   Today's tips / Free tip / Statistics have 9-10 columns. Between
   768-1320px they scroll sideways (rule above). On an actual phone
   that sideways scroll is awkward, so each row collapses into a
   stacked block - one match spread over several lines, no scroll.
   The header row is hidden (can't line it up with stacked cells).
   ============================================================ */
@media (max-width: 767px) {
	DIV.mainrightin table:has(td[data-label]) {
		display: block;
		width: 100% !important;
		max-width: 100%;
		overflow: visible;
		border: none;
		border-collapse: separate;
		box-sizing: border-box;
	}

	DIV.mainrightin table:has(td[data-label]) tbody {
		display: block;
		width: 100%;
	}

	/* each match = one card: blue outline + gap to the next one, so the
	   separation between individual matches stays obvious */
	DIV.mainrightin table:has(td[data-label]) tr {
		display: block;
		width: 100%;
		box-sizing: border-box;
		margin: 0 0 14px;
		border: 1px solid #3d73aa;
		background-color: #ffffff;
	}

	/* keep the desktop table's alternating blue tint */
	DIV.mainrightin table:has(td[data-label]) tr.trsilverl {
		background-color: #eaf3fc;
	}

	/* the blue header row can't be lined up with stacked cells - hide it;
	   every cell instead carries its own label (data-label in the PHP) */
	DIV.mainrightin table:has(td[data-label]) tr.trsilver {
		display: none;
	}

	/* one field per line: label on the left, value on the right, a thin
	   blue rule between fields so the columns stay readable */
	DIV.mainrightin table:has(td[data-label]) td {
		display: flex;
		justify-content: space-between;
		align-items: baseline;
		gap: 10px;
		width: auto !important;
		height: auto !important;
		white-space: normal;
		word-break: break-word;
		text-align: right !important;
		padding: 5px 8px;
		border: none;
		border-top: 1px solid #cbe5ff;
	}

	DIV.mainrightin table:has(td[data-label]) td::before {
		content: attr(data-label);
		flex: 0 0 auto;
		text-align: left;
		white-space: nowrap;
		font-weight: bold;
		color: #3d73aa;
	}

	/* first field of the card = blue title bar (like the header used to be) */
	DIV.mainrightin table:has(td[data-label]) td[data-label]:first-child {
		border-top: none;
		background-color: #3d73aa;
		color: #ffffff;
	}

	DIV.mainrightin table:has(td[data-label]) td[data-label]:first-child::before,
	DIV.mainrightin table:has(td[data-label]) td[data-label]:first-child strong {
		color: #ffffff;
	}

	/* full-width cells with no column label (the "Note:" row) */
	DIV.mainrightin table:has(td[data-label]) td:not([data-label]) {
		display: block;
		text-align: left !important;
		border-top: none;
	}
}