/*  KOUKAL computer
    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;
}

.cleaner2 {
  clear: both;
  height: 1px;
  margin: -1px 0 0 0; 
  padding: 0;
  border: none;
  visibility: hidden;
}

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

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


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

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

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

#logo h1 span {
  width: 211px;
  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: 89px; }
#nav ul li a.m-intro span { width: 89px; background: url('./menu/intro.gif') no-repeat; background-position: center 0; }
#nav ul li a.m-intro:hover { background-color: #2e3192; color: #fff; }
#nav ul li a.m-intro:hover span { background-position: center -231px; }

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

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

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

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

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


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

#content { border-bottom: 15px solid #fff; background: #fff url('./layout/content-bg.jpg') top center repeat-y; }
#left.contacts ul { width: 45%; float: left; }
#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; 
}

#left p.logos { border: 1px solid #e8edf1; text-align: center; padding: 20px; margin-bottom: 30px; }
#left p.logos img { margin-right: 20px; vertical-align: middle; }

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

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

#title {
  width: 100%;
  height: 60px;
  background-color: #e8edf1;
  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; }

/* 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-about h2 { width: 142px; }
#title.t-about h2 span { width: 142px; background: url('./titles/about.jpg') top left no-repeat; }

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

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

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

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

h3.tc-company span { width: 85px; background: url('./titles/contacts/company.jpg') top left no-repeat; }
h3.tc-shop span { width: 235px; background: url('./titles/contacts/shop.jpg') top left no-repeat; }
h3.tc-service span { width: 85px; background: url('./titles/contacts/service.jpg') top left no-repeat; }
h3.tc-form span { width: 190px; background: url('./titles/contacts/form.jpg') top left no-repeat; }

h3.tc-computers span { width: 125px; background: url('./titles/line/computers.jpg') top left no-repeat; }
h3.tc-notebooks span { width: 160px; background: url('./titles/line/notebooks.jpg') top left no-repeat; }
h3.tc-printers span { width: 430px; background: url('./titles/line/printers.jpg') top left no-repeat; }
h3.tc-mobile span { width: 220px; background: url('./titles/line/mobile.jpg') top left no-repeat; }
h3.tc-digital span { width: 250px; background: url('./titles/line/digital.jpg') top left no-repeat; }
h3.tc-tv span { width: 430px; background: url('./titles/line/tv.jpg') top left no-repeat; }
h3.tc-material span { width: 270px; background: url('./titles/line/material.jpg') top left no-repeat; }
h3.tc-software span { width: 150px; background: url('./titles/line/software.jpg') top left no-repeat; }

p.quote { width: 565px; height: 104px; color: #3b3e99; font-size: 120%; }
p.quote span { width: 565px; height: 104px; 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 h4.tr-contact { width: 107px; }
#right h4.tr-contact span { width: 107px; background: url('./titles/h4-contact.jpg') top left no-repeat; }

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

p.slideshow { margin-left: 47px; height: 153px; }

/* ------------------------------ 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; }