/* horizontalni zarovnani */
body
{
margin: 0;
padding: 0;
}

#obal
{
	margin: 20px 10%;
	padding: 1em;
	color: #000;
}

/* vertikalni zarovnani */
#obalovy
{
	height: 500px;
	overflow: hidden;
	position: relative;
}

#obalovy[id]
{
display: table;
position: static;
}

#prostredni
{
position: absolute;
top: 50%;
}

#prostredni[id]
{
display: table-cell;
vertical-align: middle;
position: static;
}

#vnitrni
{
position: relative;
top: -50%
}

#vnitrni[id]
{
position: static;
}

div.priklad
{
	background-color: #fff;
}

div.priklad1
{
}

/* menu */
div#komplet
{
	position: relative;
	border: solid #ccc 0px;
	width: 558px;
	height: 208px;
	background: white url(image/hla_img.jpg) no-repeat 0px -208px;
	margin: auto;
}

li#polozka1
{
left: 0px;
top: 0px;
}

li#polozka2
{
left: 0px;
top: 104px;
}

li#polozka3
{
left: 372px;
top: 0px;
}

li#polozka4
{
left: 372px;
top: 104px;
}
/*
li#polozka5
{
left: 149px;
top: 62px;
}

li#polozka6
{
left: 50px;
top: 119px;
}

li#polozka7
{
left: 116px;
top: 119px;
}
*/
ul#menu li
{
list-style-type: none;
font-size: 12px;
position: absolute;
width: 186px;
height: 104px;
}

ul#menu a
{
	display: block;
	text-decoration: none;
	width: 100%;
	height: 100%;
	color: black;
	font-family: Verdana, Arial, sans-serif;
	font-weight: bold;
}

ul#menu a:hover
{
	color: #eee;
	background: transparent url(image/hla_img.jpg) no-repeat 0px 0px;
}

li#polozka1 a:hover
{
background-position: 0px 1px;
}

li#polozka2 a:hover
{
background-position: 0px -103px;
}

li#polozka3 a:hover
{
background-position: -372px 1px;
}

li#polozka4 a:hover
{
background-position: -372px -103px;
}
/*
li#polozka5 a:hover
{
background-position: -66px -76px;
}

li#polozka6 a:hover
{
background-position: -132px -76px;
}

li#polozka7 a:hover
{
background-position: 0px -152px;
}
*/
ul#menu span
{
display: block;
position: absolute;
left: 0;
top: 40%;
text-align: center;
width: 100%;
cursor: pointer;
} 

/* napoveda ve ctvercich */
#info ul {padding:0; margin:120px auto 115px auto; list-style-type:none; width:158px; height:158px; position:relative;}
#info img {border:0;}
#info li {display:block; height:50px; width:50px; float:left; margin:1px;}
#info a {
	display: block;
	width: 48px;
	height: 48px;
	border: 1px;
	line-height: 48px;
	text-align: center;
	text-decoration: none;
	color: #fff;
}
#info a span {
	display: none;
}

#info a em{
	display: block;
	position: absolute;
	left: 70px;
	top: 75px;
}

a#link1 {
	color: #000;
	background: transparent;
}

a#link3 {
	color: #000;
	background: transparent;
}
a#link6 {
	background: transparent;
	color: #000;
}

a#link7 {
	background: transparent;
	color: #000;
}

a:hover#link1 {background:#ffd610; color:#000;}
a:hover#link1 span {
	display: block;
	position: absolute;
	left: 50px;
	top: -160px;
	width: 260px;
	height: 150px;
	border: 1px solid Silver;
	background: #DCDCDC;
	color: #000;
}
a:hover#link1 em {
	display: block;
	position: absolute;
	left: 85px;
	top: -12px;
	width: 35px;
	height: 25px;
	border-left: 1px solid Silver;
	line-height: 1px;
}

a:hover#link3 {
	background: #ffd610;
}
a:hover#link3 span {
	display: block;
	position: absolute;
	left: 168px;
	top: -100px;
	width: 260px;
	height: 150px;
	border: 1px solid #000;
	background: #DCDCDC;
	color: #000;
}
a:hover#link3 em {
	display: block;
	position: absolute;
	left: 132px;
	top: -25px;
	width: 35px;
	height: 25px;
	border-left: 1px solid #000;
	border-top: 1px solid #000;
	line-height: 1px;
}

a:hover#link6 {background:#ffd610;}
a:hover#link6 span {
	display: block;
	position: absolute;
	left: -20px;
	top: 120px;
	width: 260px;
	height: 150px;
	border: 1px solid #B70000;
	background: #B70000;
}
a:hover#link6 em {
	display: block;
	position: absolute;
	left: 50px;
	top: 98px;
	width: 35px;
	height: 25px;
	border-right: 1px solid #B70000;
	border-bottom: 1px solid #B70000;
	line-height: 1px;
}

a:hover#link7 {background:#ffd610;}
a:hover#link7 span {
	display: block;
	position: absolute;
	left: 148px;
	top: 65px;
	width: 260px;
	height: 150px;
	border: 1px solid #865711;
	background: #EBBB72;
	color: #000;
}
a:hover#link7 em {
	display: block;
	position: absolute;
	left: 112px;
	top: 100px;
	width: 35px;
	height: 25px;
	border-left: 1px solid #865711;
	border-bottom: 1px solid #865711;
}

/* titulek stranky */
.titulek {
	background-color: #DCDCDC;
	color: #fff;
	font-family: serif;
	font-size: 24px;
	font-weight: bold;
}
.text {
	color: #696969;
	font-family: serif;
	font-size: 12px;
}