/*  KOUKAL penzion
    Martin Svetlik (c) 2009   */

* { margin: 0; padding: 0; }
body {
  background-color: #f4f5f6;
  font-family: sans-serif;
  font-size: small;
  line-height: 23px;
  color: #414141;
}

/* ------------------------------ Zakladni vlastnosti ---------------------------------*/

#wrap { width: 990px; background-color: #fff; margin: 0 auto; }
#page { width: 960px; background-color: #fff; margin: 0 auto; }

h2, h3, h4 { font-weight: normal; text-transform: uppercase; }

a, a:visited { color: #414141; text-decoration: underline; }
a:hover, a:focus { text-decoration: none; }

.hidden { display: none; }
.center { text-align: center; }

.cleaner {
  clear: both;
  height: 0;
  line-height: 0;
  font-size: 0;
}

.replacement {
  position: relative;
  overflow: hidden;
}
.replacement span {
  display: block;
  position: absolute; 
  left: 0; 
  top: 0; 
  z-index: 1;
}

table { 
  display: table; 
  border-collapse: collapse; 
  width: 100%; 
  border: none; 
  font-size: 100%;
	margin-bottom: 25px;
}
tr { display: table-row; }
th, td { display: table-cell; border-bottom: 1px solid #d8d8ea; margin: 0; padding: 6px 12px; vertical-align: top; text-align: left; }
th { font-weight: normal; vertical-align: middle; color: #000; }
td { text-align: right; }
tr.even { background-color: #f4f5f6; }

/* ------------------------------ Horni cast ---------------------------------*/


/* ------ Logo ------*/

#logo {
  width: 326px;
  height: 231px;
  float: right; 
  background: #fff url('./layout/head-logo.jpg') top left no-repeat;
}

#logo h1 {
  width: 212px;
  height: 89px;
  float: right;
  position: relative;
  overflow: hidden; 
  background-color: #2e3192;
  top: 101px;
  right: 41px;
}

#logo h1 span {
  width: 212px;
  height: 89px;
  background: url('./layout/logo.jpg') top left no-repeat;
  display: block;
  position: absolute; 
  left: 0; 
  top: 0; 
  z-index: 1;
  cursor: pointer;
}

#logo h1 { font-size: 160%; line-height: 89px; text-align: center; }
#logo h1 a, #logo h1 a:visited { color: #fff; text-decoration: none; }

/* ------ Navigace ------*/

#nav {
  width: 634px;
  height: 231px;
  float: left; 
  background: #fff url('./layout/head-menu.jpg') top left no-repeat;  
}

#nav ul li { list-style: none; float: left; }
#nav ul li a { 
  color: #414141; 
  height: 231px;
  line-height: 59px;
  display: block;
  text-align: center;
  position: relative;
  overflow: hidden;
  text-transform: uppercase;
  font-size: 110%;
}
#nav ul li a span {
  height: 231px;
  display: block;
  position: absolute; 
  left: 0; 
  top: 0; 
  z-index: 1;
  cursor: pointer;
}

#nav ul li a.m-intro { width: 90px; }
#nav ul li a.m-intro span { width: 90px; background: url('./menu/intro.gif') top left no-repeat; background-position: 0 0; }
#nav ul li a.m-intro:hover { background-color: #2e3192; color: #fff; }
#nav ul li a.m-intro:hover span { background-position: 0 -231px; }

#nav ul li a.m-desc { width: 87px; }
#nav ul li a.m-desc span { width: 87px; background: url('./menu/desc.gif') top left no-repeat; background-position: 0 0; }
#nav ul li a.m-desc:hover { background-color: #2e3192; color: #fff; }
#nav ul li a.m-desc:hover span { background-position: 0 -231px; }

#nav ul li a.m-gallery { width: 107px; }
#nav ul li a.m-gallery span { width: 107px; background: url('./menu/gallery.gif') top left no-repeat; background-position: 0 0; }
#nav ul li a.m-gallery:hover { background-color: #2e3192; color: #fff; }
#nav ul li a.m-gallery:hover span { background-position: 0 -231px; }

#nav ul li a.m-prices { width: 88px; }
#nav ul li a.m-prices span { width: 88px; background: url('./menu/prices.gif') top left no-repeat; background-position: 0 0; }
#nav ul li a.m-prices:hover { background-color: #2e3192; color: #fff; }
#nav ul li a.m-prices:hover span { background-position: 0 -231px; }

#nav ul li a.m-booking { width: 132px; }
#nav ul li a.m-booking span { width: 132px; background: url('./menu/booking.gif') top left no-repeat; background-position: 0 0; }
#nav ul li a.m-booking:hover { background-color: #2e3192; color: #fff; }
#nav ul li a.m-booking:hover span { background-position: 0 -231px; }

#nav ul li a.m-contacts { width: 130px; }
#nav ul li a.m-contacts span { width: 130px; background: url('./menu/contacts.gif') top left no-repeat; background-position: 0 0; }
#nav ul li a.m-contacts:hover { background-color: #2e3192; color: #fff; }
#nav ul li a.m-contacts:hover span { background-position: 0 -231px; }


/* ------------------------------ Obsahova cast ---------------------------------*/

#content { border-bottom: 15px solid #fff; background: #fff url('./layout/content-bg.jpg') top center repeat-y; }
#left p { margin: 0 12px; padding-bottom: 20px; }

#left ul { margin-left: 30px; padding-bottom: 20px; }
#left ul li { 
  list-style: none; 
  background: url('./img/bullet.jpg') no-repeat; 
  background-position: 0 8px;
  padding-left: 20px; 
}

/* ------ Vlevo - hlavni obsah ------*/

#left { 
  width: 635px;
  float: left;
}

#title {
  width: 100%;
  height: 60px;
  background-color: #dfeaf5;
  margin-bottom: 25px;
}

#title h2 {
  color: #6265ac;
  height: 60px;
  line-height: 60px;
  position: relative;
  overflow: hidden;
  padding-left: 12px;
  font-size: 200%;
}
#title h2 span {
  height: 60px;
  display: block;
  position: absolute; 
  left: 0; 
  top: 0; 
  z-index: 1;
}

#left h3 { 
  width: 611px;
  height: 37px;
  line-height: 37px;
  color: #6f71b4;
  font-size: 150%;
  margin: 0 0 15px 12px; 
  border-bottom: 1px solid #c3c3ea; 
}
#left h3 span { height: 37px; }

/* galerie */
p.gal img { border: 1px solid #c3c3ea; padding: 5px; margin-left: 10px; }
#left p.gal { padding-bottom: 10px; }

/* rezervace */

p.cal { width: 60%; }
p.cal a { 
  display: block; 
  background: url('./img/cal.jpg') no-repeat; 
  line-height: 90px; 
  height: 90px; 
  padding-left: 100px; 
}

/* Kontaktni formular */

fieldset { border: 1px solid #c3c3ea; margin: 0 12px; padding: 15px 0 0 0; }
fieldset legend { display: none; }
fieldset label { float: left; text-align: right; line-height: 40px; width: 150px; margin-right: 20px; }
fieldset p { padding-left: 15px; clear: both; }
#jmeno, #mail, #vzkaz { font-family: sans-serif; font-size: 100%; border: 1px solid #c3c3ea; padding: 5px; width: 220px; margin-top: 5px; float: left; }
#submit { margin-left: 170px; margin-top: 10px; }

/* Nadpisy */

#title.t-intro h2 { width: 122px; }
#title.t-intro h2 span { width: 122px; background: url('./titles/intro.jpg') top left no-repeat; }

#title.t-desc h2 { width: 250px; }
#title.t-desc h2 span { width: 250px; background: url('./titles/desc.jpg') top left no-repeat; }

#title.t-prices h2 { width: 130px; }
#title.t-prices h2 span { width: 130px; background: url('./titles/prices.jpg') top left no-repeat; }

#title.t-gallery h2 { width: 140px; }
#title.t-gallery h2 span { width: 140px; background: url('./titles/gallery.jpg') top left no-repeat; }

#title.t-booking h2 { width: 189px; }
#title.t-booking h2 span { width: 189px; background: url('./titles/booking.jpg') top left no-repeat; }

#title.t-contacts h2 { width: 189px; }
#title.t-contacts h2 span { width: 189px; background: url('./titles/contacts.jpg') top left no-repeat; }

h3.ts-desc span { width: 195px; background: url('./titles/h3-desc.jpg') top left no-repeat; }
h3.tc-form span { width: 195px; background: url('./titles/form.jpg') top left no-repeat; }

p.quote { width: 612px; height: 114px; color: #3b3e99; font-size: 120%; }
p.quote span { width: 612px; height: 114px; background: url('./img/quote.jpg') top left no-repeat; }
p.quote em { color: #656565; }
p.quote strong { float: right; }

/* ------ Vpravo - box ------*/

#right { 
  width: 311px;
  float: right;
  background-color: #f3f6f9;
  border-top: 15px solid #fff;
  padding-top: 21px;
}

#right h4 { height: 24px; margin-left: 30px; color: #888bc1; font-size: 150%; margin-bottom: 20px; }
#right h4 span{ height: 24px;}

#right ul { list-style: none; margin: 0 0 30px 47px; }
#right p { padding-left: 47px; padding-bottom: 30px; }
#right img { border: 5px solid #bec1dd; }

#right p.wifi { background: url('./img/wifi.jpg') bottom center no-repeat; padding-bottom: 65px; margin-bottom: 30px; }

#right h4.tr-contact { width: 107px; }
#right h4.tr-contact span { width: 107px; background: url('./titles/h4-contact.jpg') top left no-repeat; }


/* ------------------------------ Paticka ---------------------------------*/

#footer { width: 960px; margin: 0 auto; }
#footer p { line-height: 45px; float: left; width: 50%; color: #797cb8; }
#footer p a, #footer p a:visited { color: #797cb8; }
#footer p.links { float: right; text-align: right; font-weight: bold; }
#footer p.links a, #footer p.links a:visited { color: #2e3192; }