@charset "UTF-8";
/* CSS Document */

/*------------------------ RESET ----------------------------------*/
html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,fieldset,input,hr { margin: 0; padding: 0; }
h1,h2,h3,h4,h5,h6,p,pre,code,address,caption,cite,code,em,strong,th { font-size: 1em; line-height: 1em; font-weight: normal; font-style: normal; }
ul,ol { list-style: none; }
fieldset,img { border: none; }
caption,th { text-align: left; }
table { border-collapse: collapse; border-spacing: 0; }

strong { font-weight: bold; }
em { font-style: italic; }

a:link, a:visited, a:active, a:hover { color: #666666; text-decoration: none; }
a:hover { color: #0058F0; }

/*-----------------------------------------------------------------*/

.clear { clear: both !important; display: block !important; width: 100% !important; height: 0 !important; line-height: 0; }
.left { margin-left: 0 !important; }
.right { margin-right: 0 !important; }

.selected { display: block !important; visibility: visible !important; }

/*-----------------------------------------------------------------*/
html, body { width: 100%; height: 100%; overflow: hidden; } /* nesmí být u html overflow: hidden; nefunguje na mobilech, ale bez toho zase nefunguje scroll */

@media only screen and (max-device-width: 768px) {
 	html { overflow: inherit; } 
}

body {
	text-align: center;
	font: 16px/24px Arial, Helvetica, sans-serif; color: #000;
	background-color: #E5E5E5;
	overflow: hidden;
}

.wrapper { width: 100%; height: auto; } /* nesmí být u html overflow: hidden; nefunguje na mobilech */
.wrapper#header { background-color: #FFF; height: 131px; }
.wrapper#mainContent { height: 100%; background-color: #E5E5E5; color:#666666; } 

.intro-page .wrapper#mainContent { height: 556px; background-color: #E5E5E5; /*overflow: hidden;*/ }

.container {
	position: relative;
	width: 1000px; height: auto;
	margin: 0 auto; padding: 0 20px; /* padding, aby to na mobilech vypadalo líp */
	text-align: left;
}
#header .container {  background-color: #FFF; height: 100%; }

.intro-page .wrapper#mainContent .container {  background-color: #E5E5E5; padding: 30px 20px; height: auto; }

.content-page #mainContent .container { min-height: 100%; height: auto !important; height: 100%; background-color: #E5E5E5; }
.content-page #mainContent #pageContent { position: absolute; width: 1000px; height: 100%; /* overflow: hidden; */ }

.top-nav-row {
	padding: 25px 0 20px 0; margin-bottom: 15px;
	border-bottom: 1px solid #fff;
	font-size: 13px; line-height: 18px;
}
.top-nav-row a.prev-link {
	float: left; display: block;
	height: 18px;
	margin-right: 5px; padding-left: 30px;
	background: url(../images/icons/icn-prev_next-18x18.png) no-repeat 0 -18px;
}
.top-nav-row a.next-link {
	float: right; display: block;
	height: 18px;
	margin-left: 5px; padding-right: 30px;
	background: url(../images/icons/icn-prev_next-18x18.png) no-repeat right 0;
}

.maincat-nav {
	float: left;
	width: 225px; height: 100%;
}

#selectedContentBox {
	position: relative; float: left;
	width: 773px; height: 100%; 
	background-color: #fff;
	overflow: hidden;
	border-left: 2px solid #9A9A9A;
}
#selectedContentBox.no-subcat-selected { background: #fff url(../images/text/text-zvolte_kategorii.png) no-repeat 30px 30px; }
#selectedContentBox.no-text-selected { background: #fff url(../images/text/text-detailni_informace.png) no-repeat 370px 50px; }

.maincat-nav ul { display: table; }
.maincat-nav ul li {
	display: block;
	width: 225px; /*height: 50px;*/
	margin-bottom: 10px;
	vertical-align: middle;
}
.maincat-nav ul li a {
	display: block;
	width: 208px; min-height: 48px;
	vertical-align: middle;
	background-color: #EEEEEE;
	border: 1px solid #FFF;
	font-size: 16px; line-height: 20px;
}
.maincat-nav ul li a:hover {
	background-color: #FFF;
	border-color: #CDCDCD;
}
.maincat-nav ul li a span.icon {
	display: block; float: left;
	width: 26px; height: 26px;
	background: url(../images/icons/icn-no_1_9-26x26.png) no-repeat 0 0;
	margin: 11px 12px;
	vertical-align: middle;
}
#maincatLink1 span.icon { }
#maincatLink2 span.icon { background-position: -26px 0; }
#maincatLink3 span.icon { background-position: -52px 0; }
#maincatLink4 span.icon { background-position: -78px 0; }
#maincatLink5 span.icon { background-position: -104px 0; }
#maincatLink6 span.icon { background-position: -130px 0; }
#maincatLink7 span.icon { background-position: -156px 0; }
#maincatLink8 span.icon { background-position: -182px 0; }
#maincatLink9 span.icon { background-position: -208px 0; }

.maincat-nav ul li a span.text {
	/*height: 48px;*/
	display: table-cell;
	vertical-align: middle;
	padding: 14px 5px 8px 0;
}

.maincat-nav ul li.selected { background: url(../images/icons/icn-selected_cat.png) no-repeat right 50%; }

.maincat-nav ul li.selected a {
	background-color: #FFF;
	border-color: #9A9A9A;
	color: #000;
}

.subcat-nav {
	display: none; visibility: hidden;
	float: left;
	width: 320px; min-height: 100%; height: 100%;
	overflow: auto;
}

.subcat-nav.hidden { display: none !important; visibility: hidden !important; }

.subcat-nav ul { display: table }
.subcat-nav ul li {
	display: table-row;
}
.subcat-nav ul li a {
	display: table-cell;
	width: 300px; height: 50px;
	padding-left: 20px;
	border-bottom: 1px solid #EEEEEE;
	vertical-align: middle;
}

.subcat-nav ul li a:hover { background-color: #EEEEEE; }
.subcat-nav ul li.selected a { background-color: #139AFF !important; color: #FFF; }

#textContentBox {
	display: none; visibility: hidden;
	float: left;
	width: 391px; min-height: 100%; height: 100%;
	padding: 0 30px 0 30px; 
	color: #333333;
	overflow: auto;
}

#textContentBox.full-width { width: 713px; }

#textContentBox .text-wrapper {
	display: none; visibility: hidden;
	margin: 40px 0;
}

#textContentBox a { color: #06C; }
#textContentBox p { line-height: 24px; margin-bottom: 8px; }
#textContentBox p.small { font-size: 14px; line-height: 20px; }
#textContentBox p.odsazeni-rc { font-size: 14px; line-height: 20px; padding-left: 50px; text-indent: -25px; }
#textContentBox p.odsazeni-rc span { width: 25px; font-weight: bold; display: inline-block; text-indent: 0; }
#textContentBox p.list-letter { padding-left: 25px; text-indent: -25px; }
#textContentBox p.list-letter span { width: 25px; font-weight: bold; display: inline-block; text-indent: 0; }
#textContentBox hr { margin: 15px 0; border: none; height: 1px; background-color: #CDCDCD; }
#textContentBox img { display: block; margin: 10px; }

#header img.page-title {
	position: absolute;
	left: 20; top: 38px; /* container padding 20px - proto left o 20px větší */
}

#header a#logoKrizovaRizeni {
	position: absolute;
	width: 244px; height: 63px;
	left: 776px; top: 38px; /* container padding 20px - proto left o 20px větší */
	background: url(../images/text/logo-manual_pro_krizove_rizeni-2lines.png) no-repeat 0 0;
}

#header a#logoUsti{
	position: absolute;
	width: 84px; height: 100px;
	left: 935px; top: 19px; /* container padding 20px - proto left o 20px větší */
	background: url(../images/text/logo-ustecky_kraj.png) no-repeat 0 0;
}

#selectedContentBox .vertical-line { 
	float: left;
	width: 2px; min-height: 100%; height: 100%;
 	background-color: #9A9A9A;
}

#selectedContentBox.no-subcat-selected .vertical-line { display: none; visibility: hidden; }
#selectedContentBox .vertical-line.hidden { display: none; visibility: hidden; }

/* intro */

.main-page-logo {
	position: absolute;
	top: 35px;
}

.intro-page #header a#logoUsti{
	left: 690px; top: 19px; /* container padding 20px - proto left o 20px větší */
}

.intro-page #header .app-stores-box {
	position: absolute;
	right: 20px; top: 30px;
	width: 350px; height: 80px;
	border-left: 1px solid #999;
	background: url(../images/text/app-stores.png) no-repeat right 50%;
}

.app-stores-box .google-play {
	position: absolute;
	display: block;
	width: 104px;
	height: 34px;
	top: 35px;
	left: 27px;
}

.app-stores-box .app-store {
	position: absolute;
	display: block;
	width: 105px;
	height: 34px;
	top: 35px;
	right: 110px;
}

.app-stores-box .win-store {
	position: absolute;
	display: block;
	width: 105px;
	height: 34px;
	top: 35px;
	right: 0px;
}


body.intro-page { 
	background-color: #FFF;
	overflow: auto;
}

#mainNavBox {
	display: block;
	width: 100%; height: auto;
}

#mainNavBox li {
	display: block; float: left;
	width: 244px; height: 244px;
	margin: 0 8px 8px 0;
	background: no-repeat 50% 30%;
	overflow: hidden;
}

#mainNavBox li#btnSmog { }
#mainNavBox li#btnPovodne { }
#mainNavBox li#btnTechnika { }
#mainNavBox li#btnAzbest { margin-right: 0; }
#mainNavBox li#btnPozar { margin-bottom: 0; }
#mainNavBox li#btnKarantena { margin-bottom: 0; }
#mainNavBox li#btnUmrti { margin-bottom: 0;  }
#mainNavBox li#btnNasili { margin: 0; }

#mainNavBox li a {
	display: block;
	width: 100%; height: 74px;
	padding-top: 170px;
}

#mainNavBox li a:hover { background-color: #FFF !important; background-position: 0 -244px; }

#mainNavBox li#btnSmog a { background-color: #78707E; background-image: url(../images/btn_244x244/smog-244x244.png) ; }
#mainNavBox li#btnPovodne a { background-color: #0B67FF; background-image: url(../images/btn_244x244/povodne-244x244.png) ; }
#mainNavBox li#btnTechnika a { background-color: #FD7108; background-image: url(../images/btn_244x244/technika-244x244.png) ; }
#mainNavBox li#btnAzbest a { margin-right: 0; background-color: #78707E; background-image: url(../images/btn_244x244/azbest-244x244.png) ; }
#mainNavBox li#btnPozar a { clear: both; margin-botom: 0; background-color: #FC0008; background-image: url(../images/btn_244x244/pozar-244x244.png) ; }
#mainNavBox li#btnKarantena a { margin-botom: 0; background-color: #128A44; background-image: url(../images/btn_244x244/karantena-244x244.png) ; }
#mainNavBox li#btnUmrti a { margin-botom: 0; background-color: #423928; background-image: url(../images/btn_244x244/umrti-244x244.png) ; }
#mainNavBox li#btnNasili a { margin: 0; background-color: #FC026B; background-image: url(../images/btn_244x244/nasili-244x244.png) ; }

.intro-page .wrapper#footer { background-color: #FFF; height: auto; padding: 10px 0 20px 0; }

#footer .gray-box {
	float: left;
	width: 496px; height: 213px;
	margin: 0 8px 8px 0; padding: 0;
	background-color: #E5E5E5;
}

#footer .gray-box .headline {
	height: 66px;
	border-bottom: 1px solid #FFF;
	text-indent: -9999px;
}
#footer .gray-box.left .headline { background: url(../images/text/tilte-dokumenty_ke_stazeni.png) no-repeat 25px 21px; }
#footer .gray-box.right .headline { background: url(../images/text/title-dulezita_telefonni_cisla.png) no-repeat 25px 21px; }

#footer .gray-box .content {
	padding: 20px 25px;
}

#footer .gray-box .content ul {
	width: 205px;
	list-style: outside disc;
	font-size: 12px; line-height: 17px; color: #0058F0;
	padding-left: 18px;
}

#footer .gray-box .content ul li {
	margin-top: 4px;	
}

#footer .gray-box .content ul li a { color: #0058F0; }
#footer .gray-box .content ul li a:hover { text-decoration: underline; }

#footer .gray-box .telefon {
	float: left;
	width: 103px; height: 103px;
	margin-right: 11px;
	background-color: #FFF;
}

#footer .eu-loga { text-align: center; margin-top: 40px; }
#footer .eu-loga img { width: 460px; }
#footer p { color: #AAAAAA; font-size: 10px; margin-top: 10px; }

.content-page .wrapper#footer { background-color: #FFF; height: auto; margin-top: 10px; padding: 15px 0 10px 0; }
.content-page #footer .eu-loga { margin-top: 0px; }
.content-page #footer .eu-loga img { width: 460px; height: 86px; }