/* ----------------------------------
  Hyundai - kinoautomat
  Jan Panschab
---------------------------------- */
/* reset */
body,
dl, dt, dd, ul, ol, li,
h1, h2, h3, h4, h5, h6,
form, fieldset, legend,
th, td, hr, pre, p, blockquote {margin:0; padding:0;}

/* basic elements */
body { font: 62.5% Arial, Helvetica, sans-serif; background: #f7fcfc url(../gfx/page.jpg) no-repeat center 0; color: #4b4b4b; }

h1, h2, h3, h4, h5, h6 {
	position: relative;
	clear: both;
	font-weight: bold;
	margin: 1em 0 0.5em;
	line-height: 1.2;
}
h1 { font-size: 3em; margin-top: 0em; }
h2 { font-size: 1.8em; }
h3 { font-size: 1.6em; }
h4 { font-size: 1.4em; }

a { color: #4b4b4b; }
a:hover { text-decoration: none; }

p { font-size: 1.4em; line-height: 1.6; margin: 0; margin: 0 0 1em; }

hr { clear: both; border: none; height: 1px; margin-bottom: 2em; padding-top: 0; border-bottom: 1px solid #999; }

img { display: block; margin: 0.5em 0; border: 0; }
img.left { float: left; margin-right: 1.5em; }
img.right { float: right; margin-left: 1.5em; }
.figure { border: 1px solid #999; margin: 0.5em 0; }
.figure.left { float: left; margin-right: 2em; }
.figure.right { float: right; margin-left: 2em; }
.figure img { border: 0; margin: 0; }
.figure p { margin: 0.5em 1em; color: #333; text-align: left; }

ul, ol { font-size: 1.4em; line-height: 1.6; list-style: outside; margin: 0.5em 0 1em 2em; }
ul ul, ol ol, ul ol, ol ul { font-size: 1em; margin: 0 0 0 2em; }
ul { list-style-type: square; }
ul ul { list-style-type: disc; }
ul ul ul { list-style-type: circle; }
ol { list-style-type: decimal; }
ol ol { list-style-type: lower-alpha; }
ol ol ol { list-style-type: lower-roman; }

dl { font-size: 1.4em; margin: 0.5em 0 1em; line-height: 1.6; }
dt { font-style: italic; }
dd { margin: 0; padding: 0 0 1em 2em; }

table { font-size: 1.4em; border-collapse: collapse; margin: 0.5em 0 1em; }
td, th { border: 1px solid #bbb; padding: 0.3em 0.6em; line-height: 1.6; }
thead, tfoot, th { background: #ddd; }
tbody td, tbody th, thead th { border-bottom: 1px solid #777; }

form { margin: 0.5em 0 1em; }
form fieldset { border: 0px solid #aaa; padding: 1.5em 1.5em 0.5em; }
form legend { font-size: 1.4em; padding: 0 0.5em; }
form label { display: inline-block; width: 120px; margin-right: 10px; text-align: right; font-weight: bold; }
form label.top { vertical-align: top; }
form input[type=text], form input[type=password], form input[type=file], form textarea, form select { font: 1em "Courier New", Courier, monospace; }
form input[type=text], form input[type=password], form input[type=file], form textarea { padding: 0.3em; }
form input[type=text], form input[type=password], form input[type=file], form textarea, form select { border: 1px solid #ccc; border-top: 1px solid #aaa; }
form input[type=text], form input[type=password] { width: 200px; }
form input[type=file] { width: 210px; height: 2em; }
form select { padding: 0.1em; }
form option { margin-bottom: 0.2em; }
form textarea { width: 350px; }
form input[type=submit] {
	display: inline-block;
	width: 136px;
	height: 30px;
	line-height: 30px;
	border: 0;
	padding: 0;
	font-size: 12px;
	color: #286b6b;
	font-weight: bold;
	text-align: center;
	background: url(../gfx/submit.png) no-repeat 0 0;
	color: #4b4b4b;
}
form .no-label, form .oneline, form .list { margin-left: 135px; }
form .oneline, form .list { position: relative; border: 0; padding: 0 0 1em; }
form .oneline legend span, form .list legend span {
	position: absolute;
	top: 0;
	left: -125px;
	display: block;
	width: 100px;
	text-align: right;
	margin: 0 10px;
	white-space: normal;
	font-weight: bold;
}
form .oneline p { display: inline; }
form .list p { margin-bottom: 0.5em; overflow: hidden; }
form .oneline label, form .list label { text-align: left; line-height: normal; width: auto !important; margin-right: 15px; font-weight: normal; }

.one-col label { display: block; width: auto; text-align: left; }
.one-col .oneline, .one-col .list { margin-left: 0; }
.one-col .oneline legend, .one-col .list legend { padding: 0; }
.one-col .oneline legend span, .one-col .list legend span { position: static; width: auto; margin: 0 0 0.5em; line-height: 1.6em; }
.one-col .oneline label, .one-col .list label { display: inline; }
.one-col .no-label { margin-left: 0; }


/* ----------------------------------------------------------------
  basic classes
---------------------------------------------------------------- */
.nod { display: none; }
.spaceman { position: absolute; top: -3000px; left: 0; }
.left { text-align: left !important; }
.right { text-align: right !important; }
.fll { float: left !important; }
.flr { float: right !important;}
.cleaner { clear: both; }
.clrl { clear: left; }
.clrr { clear: left; }


/* ----------------------------------------------------------------
  special classes
---------------------------------------------------------------- */
a.external { padding-right: 15px; background: url(../gfx/external_link.jpg) no-repeat right 0; }

.positive, .negative, .warning, .information { padding: 0.5em 1em; margin: 0 0 1em; }
.positive { color: #47a495; background: #eaf7f6; border: 1px solid #bfe4e1; }
.negative { color: #600; background: #faa; border: 1px solid #966; }
.warning { color: #660; background: #ff9; border: 1px solid #990; }
.information { color: #006; background: #bbf; border: 1px solid #669; }

.button {
	position: relative;
	display: inline-block;
	height: 30px;
	line-height: 30px;
	padding-left: 15px;
	font-size: 12px;
	color: #286b6b;
	font-weight: bold;
	text-decoration: none;
	background: url(../gfx/button.png) no-repeat 0 0;
}
.button:hover { text-decoration: underline; }
.button span {
	position: absolute;
	top: 0;
	right: -15px;
	display: block;
	width: 15px;
	height: 30px;
	background: url(../gfx/button.png) no-repeat right 0;
}


/* ----------------------------------------------------------------
  layout
---------------------------------------------------------------- */
#page { position: relative; width: 960px; height: 720px; margin: 0 auto; }

#car {
	position: absolute;
	top: 215px;
	left: 400px;
	width: 479px;
	height: 307px;
	background: url(../gfx/car.png) no-repeat 0 0;
}
#pet-let {
	position: absolute;
	top: 488px;
	left: 818px;
	width: 107px;
	height: 49px;
	background: url(../gfx/5let.png) no-repeat 0 0;
}

#video-link { position: absolute; top: 395px; left: 0; }
#video-text {
	position: absolute;
	z-index: 10;
	top: 412px;
	left: 10px;
	width: 215px;
	height: 130px;
	padding: 15px;
	background: #fff;
	font-weight: bold;
}

#nav { list-style: none; position: absolute; top: 600px; left: -70px; margin: 0; }
#nav li { float: left; }
#nav li a, #nav li a span { position: relative; display: block; width: 100px; height: 114px; overflow: hidden; }
#nav li a { margin-left: 47px; }
#nav li a span { position: absolute; top: 0; left: 0; background: url(../gfx/nav.png) no-repeat; }
#nav #nav-gallery span { background-position: 0 0; }
#nav #nav-price span { background-position: -100px 0; }
#nav #nav-test span { background-position: -200px 0; }
#nav #nav-catalog span { background-position: -300px 0; }
#nav #nav-seller span { background-position: -400px 0; }
#nav #nav-facebook span { background-position: -500px 0; }
#nav #nav-heart span { background-position: -600px 0; }

#nav #nav-gallery:hover span, #nav #nav-gallery.selected span { background-position: 0 bottom; }
#nav #nav-price:hover span, #nav #nav-price.selected span { background-position: -100px bottom; }
#nav #nav-test:hover span, #nav #nav-test.selected span { background-position: -200px bottom; }
#nav #nav-catalog:hover span, #nav #nav-catalog.selected span { background-position: -300px bottom; }
#nav #nav-seller:hover span, #nav #nav-seller.selected span { background-position: -400px bottom; }
#nav #nav-facebook:hover span, #nav #nav-facebook.selected span { background-position: -500px bottom; }
#nav #nav-heart:hover span, #nav #nav-heart.selected span { background-position: -600px bottom; }

#links { margin: 0; list-style: none; }

#hyundai { position: absolute; top: 30px; left: 0; }
#financing-button { position: absolute; top: 70px; left: 0; }

#button-fixed {
	position: fixed;
	z-index: 20;
	top: 30px;
	right: 0;
	line-height: 30px;
	padding: 0 15px;
	font-size: 12px;
	color: #286b6b;
	font-weight: bold;
	text-decoration: none;
	background: url(../gfx/button.png) no-repeat 0 0;
}
#button-fixed:hover { text-decoration: underline; }

.box {
	position: relative;
	z-index: 20;
	background: #fff;
	border: 5px solid #f5f5f5;
	box-shadow:	1px 1px 10px #999;
	-o-box-shadow:	1px 1px 10px #999;
	-moz-box-shadow:	1px 1px 10px #999;
	-webkit-box-shadow: 1px 1px 10px #999;
	padding: 12px 6px;
}
.box .close {
	position: absolute;
	right: -22px;
	top: -22px;
	cursor: pointer;
	height: 36px;
	width: 36px;
	background: url(../gfx/close.png) no-repeat 0 0;
}


/* ----------------------------------------------------------------
  gallery
---------------------------------------------------------------- */
#gallery { width: 586px; height: 432px; }
#big-img { width: 100%; height: 317px; text-align: center; }
#big-img img { margin: 0; display: inline; }
.arrows { position: absolute; bottom: 12px; width: 50px; height: 100px; background: url(../gfx/arrows.png) no-repeat; cursor: pointer; }
.arrows.disabled { cursor: default; }
.prevPage { left: 6px; background-position: 0 -100px; }
.nextPage { right: 6px; background-position: right -100px; }
.prevPage:hover { background-position: 0 -200px; }
.nextPage:hover { background-position: right -200px; }
.prevPage:active { background-position: 0 0; }
.nextPage:active { background-position: right 0; }
.prevPage.disabled { background-position: 0 bottom; }
.nextPage.disabled { background-position: right bottom; }

.scrollable { position: absolute; bottom: 12px; left: 60px; width: 476px; height: 100px; overflow: hidden; }
.items { position: absolute; width: 2000em; height: 100px; }
.scrollable a { margin: 0 10px 0 0; }
.scrollable a:last-child { margin-right: 0; }
.scrollable a img { display: inline; margin: 0; }


/* ----------------------------------------------------------------
  price and catalog
---------------------------------------------------------------- */
#price { width: 243px; height: 250px; padding: 15px; }
#catalog { width: 243px; height: 250px; padding: 15px; }
h2 { margin: 0 0 1em; }
a.download {
	display: block;
	width: 155px; /* 245px */
	height: 88px;
	background: #3b9d9d url(../gfx/pdf-download.png);
	color: #fff;
	font-size: 1.2em;
	font-weight: bold;
	padding: 0 70px 0 20px;
	text-decoration: none;
	line-height: normal;
}
a.download:hover { text-decoration: underline; }
a.download.data { padding-top: 24px; height: 64px; }
a.download.cenik { padding-top: 34px; height: 54px; }


/* ----------------------------------------------------------------
  recommend
---------------------------------------------------------------- */
#recommend { width: 400px; height: 240px; }


/* ----------------------------------------------------------------
  video
---------------------------------------------------------------- */
#video { width: 960px; height: 540px; padding: 0; }
#car-small {
	display: none;
	z-index: 30;
	position: absolute;
	top: 520px;
	left: 700px;
	width: 372px;
	height: 239px;
	background: url(../gfx/car-small.png) no-repeat 0 0;
}


/* ----------------------------------------------------------------
  flashmail
---------------------------------------------------------------- */
#flashmail { width: 600px; height: 500px; }
form#form-flash label { width: 150px; }
form#form-flash .no-label, form .oneline, form .list { margin-left: 165px; }


/* ----------------------------------------------------------------
  financing
---------------------------------------------------------------- */
#financing { width: 800px; height: 500px; padding: 15px; }


/* ----------------------------------------------------------------
  triple5
---------------------------------------------------------------- */
#triple5 { width: 750px; height: 500px; padding: 15px; }
table.layout-tab { width: auto; margin: 0 0 1em 0; border-collapse: collapse; }
table.layout-tab td,
table.layout-tab th { border: 0 none; padding: 0; background: #fff none; text-align: left; font-weight: normal; }

table.tri-5 th img { margin: 10px 20px 10px 0; }
table.tri-5 td { width: 100%; vertical-align: middle; }
table.tri-5 div.box2 { border: 1px solid #eee; padding: 5px 10px 0; margin: 10px 0; }
table.tri-5 div.box2 h3 { line-height: 1.4; font-weight: normal; margin: 0; }
table.tri-5 div.box2 h3 big { font-size: 29px; color: #C0504D; }
table.tri-5 div.box2 ul li { font-size: 0.6em; line-height: 1.6; }