html {height: 100%; font: normal normal 62.5% "Trebuchet MS", "Geneva CE", lucida, sans-serif; background: url('graphic/body_back.png') repeat-x center top}
body {height: 100%; background: url('graphic/login_back.gif') no-repeat center top; color: #262d4c}

/* Zakladni nastaveni - nemenit, pokud si nejste opravdu jisti, muze zpusobit rozpad celeho layoutu */

html, body, h1, h2, h3, fieldset, #header form input, #menu, p, ul, li {padding: 0; margin: 0; border: none}
h1 span, h2 span, .header span, #menu span, .detail strong span {position: absolute; display: block; z-index: 3}


p {font-size: 1.2em}

.viktor {clear: both !important; float: none !important; height: 0 !important; width: 0 !important; background: 0 !important; margin: 0 !important; display: block !important}
a {color: #d3183c}
a:visited {color: #bf8792}
a:hover {color: #262d4c}

/* Hlavicka */

#header {width: 960px; background: url('graphic/h1_back.png') no-repeat left 8px; margin: 0 auto; position: relative;}

h1 {width: 360px; padding: 0 300px; height: 164px; position: relative; text-align: center}
h1 a {display: block; color: white}
h1 span {width: 960px; height: 164px; top: 0; left: 0; background: url('graphic/h1_front.png') no-repeat center top}

h2 {color: white; width: 660px; margin: 0 auto; height: 167px; position: relative; text-align: right; padding: 0 0 0 300px}
h2 span {width: 960px; height: 167px; top: 0; left: 0; background: url('graphic/h2.png') no-repeat right top}

/* Menu */

#menu {width: 960px; font-size: 1.5em; margin: 0 auto; height: 45px}
#menu li {color: white; display: block; list-style: none; float: left; padding: 9px 0 0; text-align: center}
#menu li a {color: #474e66; display: block; padding: 0 15px; margin: 0; text-decoration: none; line-height: 35px; height: 36px; position: relative}
#menu span {height: 36px; top: 0; left: 0}
.menu_1 a {width: 97px}
.menu_1 a span {width: 127px; background: url('graphic/menu_1.png') no-repeat center top}
.menu_1 a:hover span, .menu_1 a.active span {background: url('graphic/menu_1_hover.png') no-repeat center top; cursor: hand}
.menu_2 a {width: 106px}
#menu .menu_2 a span {width: 165px; background: url('graphic/menu_2.png') no-repeat center top; left: -29px}
#menu .menu_2 a:hover span, #menu .menu_2 a.active span {background: url('graphic/menu_2_hover.png') no-repeat center top; cursor: hand}
.menu_3 a {width: 129px}
#menu .menu_3 a span {width: 189px; background: url('graphic/menu_3.png') no-repeat center top; left: -30px}
#menu .menu_3 a:hover span, #menu .menu_3 a.active span {background: url('graphic/menu_3_hover.png') no-repeat center top; cursor: hand}
.menu_4 a {width: 180px !important}
#menu .menu_4 a span {width: 239px; background: url('graphic/menu_4.png') no-repeat center top; left: -29px}
#menu .menu_4 a:hover span, #menu .menu_4 a.active span {background: url('graphic/menu_4_hover.png') no-repeat center top; cursor: hand}
.menu_5 a {width: 129px}
#menu .menu_5 a span {width: 188px; background: url('graphic/menu_5.png') no-repeat center top; left: -29px}
#menu .menu_5 a:hover span, #menu .menu_5 a.active span {background: url('graphic/menu_5_hover.png') no-repeat center top; cursor: hand}
.menu_6 a {width: 78px}
#menu .menu_6 a span {width: 137px; background: url('graphic/menu_6.png') no-repeat center top; left: -29px}
#menu .menu_6 a:hover span, #menu .menu_6 a.active span {background: url('graphic/menu_6_hover.png') no-repeat center top; cursor: hand}

#menu li.active a, #menu li a:hover {}

#container {width: 960px; margin: 0 auto}

/* Levy sloupec */

#left {width: 220px; float: left; padding: 0 20px 0 0}
.offer img {border: 3px solid #d1dbe9; margin: 0 0 30px}
.offer h3 {font-size: 1.4em; font-weight: normal; padding: 0 0 10px; color: #333b66}

.section {font-size: 1.4em}
.section li.first {padding: 0; border: none}
.section li.first.collapsed {padding: 0 20px; background-position: left 4px; border: none}
.section li {list-style: none; display: block; color: #d3193c; background: url('graphic/left-menu-li.png') no-repeat left 20px}
.section li.collapsed {list-style: none; display: block; color: #d3193c; font-weight: bold; background: url('graphic/left-menu-li-active.png') no-repeat left 14px; padding: 10px 20px 0; border-top: 1px solid #eaebef}
.section li a {color: #333b66; text-decoration: none; margin: 0 20px; display: block; border-top: 1px solid #eaebef; padding: 15px 0}
.section li a:visited {color: #bf8792}
.section li a:hover {color: #d3193c}
.sub {font-size: 0.8em; line-height: 24px; padding: 10px 0}
.sub li {font-weight: normal; background: none}
.sub li a {color: #333b66; text-decoration: none; display: block; background: url('graphic/left-menu-li-mini.png') no-repeat 2px center; padding: 0 20px; border: none}

.icons {}
.icons a {text-align: center; display: block; float: left; color: white; text-decoration: none; font-weight: bold; height: 35px; line-height: 35px; margin: 0 18px 0 0; font-size: 1.4em}
.icons .rss {background: url('graphic/rss.png') no-repeat center top; width: 77px; text-transform: uppercase}
.icons .fb {background: url('graphic/fb.png') no-repeat center top; width: 108px; margin: 0}

/* Obsah */

#content {width: 700px; float: left; padding: 0 0 0 20px}
#content p {line-height: 21px; padding: 0 0 40px; text-align: justify}

/* Stredni sloupec */

#middle {width: 440px; float: left; padding: 0 20px 0 0}
.subpage {padding: 0}
.subpage .header {padding: 0px 0 15px 42px !important; margin: 0 0 30px;}
#content .subpage p {width: 175px; float: left; text-align: center !important; background: url('graphic/subpage_back.png') no-repeat center 45px}
.subpage p a strong {line-height: 18px; display: block; padding: 0 0 9px}
.subpage a {color: #262d4c; text-decoration: none}
.subpage a img {border: none}
.subpage a.show {display: block; color: white; font-weight: bold; background: url('graphic/view_button.png') no-repeat center top; line-height: 24px; height: 24px; text-decoration: none; margin: 10px 0 0}
.subpage a.show:hover {color: black}

.pagination {margin: 30px 0; display: block}
.pagination li {display: inline; font-size: 1.1em; font-weight: bold}
.pagination li a {margin: 0 3px; padding: 4px 6px; background: #dadfe6; text-decoration: none; color: #262d4c}
.pagination li.first {margin: 0 10px 0 0}
.pagination li.dots {margin: 0 6px}
.pagination li.active a {margin: 0 3px; padding: 4px 6px; background: #d3193c; text-decoration: none; color: white}
.pagination li a:hover {margin: 0 3px; padding: 3px 5px; border: #dadfe6 solid 1px; background: white; text-decoration: none; color: #262d4c}

h4 {font-size: 1.4em}
.detail strong {display: block; float: left; background: url('graphic/price-back.png') repeat-x center top; position: relative; padding: 0 20px; height: 24px; line-height: 24px; margin: 20px 0 30px; color: white}
.detail strong span {top: 0; height: 24px; width: 11px}
.detail strong span.left {left: 0; background: url('graphic/price-left.png') no-repeat center top}
.detail strong span.right {right: 0; background: url('graphic/price-right.png') no-repeat center top}
img.left {margin: 0; display: block; float: left; padding: 0 20px 0 0}

form input {display: block; border: thin solid #c8cfd9; background: #f1f3f6; padding: 6px 9px; margin: 0 0 25px}
form textarea {display: block; border: thin solid #c8cfd9; background: #f1f3f6; padding: 6px 9px; width: 682px; height: 200px; margin: 0 0 25px}
form legend {font-size: 1.4em; padding: 40px 0 20px; font-weight: bold}
form #input_send {background: #dc0a32; padding: 6px 9px; color: white; font-weight: bold}

#content.contact {width: 960px}
#content.contact h4 {font-size: 1.8em; padding: 0 0 30px}
#content.contact .content {float: left; width: 320px; margin: 0; padding: 0}
#content.contact .content p {padding: 0 0 15px; font-size: 1.1em}
#content.contact .content p strong {font-size: 1.3em; display: block; padding: 0 0 30px}
#content.contact .content p strong span {color: #ff4a77}
#content.contact .content ul {color: #666b80; padding: 0 0 30px}
#content.contact .content ul li {font-size: 1.1em; display: block; list-style: none; padding: 3px 0}

/* Pravy sloupec */

#right {width: 220px; float: left; padding: 0 0 0 20px}
#content .news .content p {font-size: 1.2em; line-height: 18px; padding: 0 0 20px}
.news .content p strong {font-size: 1.2em; display: block; padding: 0 0 20px}
.news .content a {background: url('graphic/news_more.png') no-repeat center top; display: block; text-align: right; padding: 0 30px; font-size: 1.2em; font-weight: bold; height: 36px; line-height: 40px; text-decoration: none; margin: 0 0 30px}
.news .actions a {background: url('graphic/info_more.png') no-repeat center top; display: block; text-align: right; padding: 0 30px; font-size: 1.2em; font-weight: bold; height: 36px; line-height: 40px; text-decoration: none}
.news .actions img {border: 3px solid #d1dbe9; margin: 10px 0 20px}
.news .actions p strong {font-size: 1.2em; display: block; line-height: 18px; padding: 0 0 5px !important}
.news .actions p {padding: 0 0 5px !important}

/* Nadpisy */

.header {font-size: 2.4em; border-bottom: 1px solid #eaebef; padding: 39px 0 15px 42px; position: relative; font-weight: normal; text-transform: uppercase; margin: 0 0 30px}
.header span {background: url('graphic/header_left.png') no-repeat center top; width: 23px; height: 37px; bottom: -1px; left: 0}
.header p, .header h3 {font-size: 1em}
#content .header p {line-height: 29px; font-size: 1em; padding: 0}

#footer {height: 139px; background: url('graphic/footer_back.png') repeat-x center top}
#footer div {width: 960px; margin: 0 auto; padding: 34px}
#footer ul {width: 260px; float: left; font-size: 1.2em; line-height: 18px; padding: 50px 0}
#footer ul li {line-height: 18px; list-style: none; display: block}
#footer ul strong {padding: 0 0 30px; display: block}

/* These are standard sIFR styles... do not modify */

.sIFR-flash {
	visibility: visible !important;
	margin: 0;
}

.sIFR-replaced {
	visibility: visible !important;
}

span.sIFR-alternate {
	position: absolute;
	left: 0;
	top: 0;
	width: 0;
	height: 0;
	display: block;
	overflow: hidden;
}

/* Hide Adblock Object tab: the text should show up just fine, not poorly with a tab laid over it. */
.sIFR-flash + div[adblocktab=true] {
  display: none !important;
}

/* These "decoy" styles are used to hide the browser text before it is replaced... the negative-letter spacing in this case is used to make the browser text metrics match up with the sIFR text metrics since the sIFR text in this example is so much narrower... your own settings may vary... any weird sizing issues you may run into are usually fixed by tweaking these decoy styles */

.sIFR-hasFlash .header p, .sIFR-hasFlash .header h3 {visibility: hidden;}