/* =============================================================================
*    title: Papelote                                                           *
*     site: www.papelote.cz                                                    *
*    media: all                                                                *
*   design: Kateřina Šachová, Papelote [katerina.sachova@papelote.cz]          *
*     code: Miroslav Jahoda, Polygrafix [mirek@polygrafix.cz]                  *
*     date: 09/2009                                                            *
============================================================================= */

/* Reset and basics
----------------------------------------------------------------------------- */
html, body, div, p, address, hr, h1, h2, h3, h4, h5, h6, 
img, a, span, em, strong, abbr, ol, ul, li, dl, dt, dd, 
form, fieldset, legend, label, 
blockquote {margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; 
  font-style: inherit; font-size: 100%; vertical-align: baseline;}
html, body {width: 100%; height: 100%;}

body {font: 11px/1.3em courier, 'courier new', mono; letter-spacing: -0.02em;
  color: rgb(0,0,0);}
#bg {position: absolute; width: 100%; height: 100%; z-index: 10; overflow: hidden;}
  #bg img {width: 2083px; height: 1458px;}
#wrapper {position: absolute; width: 1000px; height: 700px; z-index: 20; margin: 0;}
.offer #bg {display: none;}
/*#wrapper {width: 1000px; height: 700px; margin: 0; background: url('../images/bg_page_small.jpg') top left no-repeat;}
.offer #wrapper {background: rgb(255,255,255);}*/

strong {font-weight: bold;}
em {font-style: italic;}
ul, ol {list-style: none;}
/* p, address {margin-bottom: 0.65em;} */
input, textarea {font: 10px/1.3em arial, helvetica, sans-serif; color: rgb(103,101,109);}
hr {display: none;}
hr.clear {display: block; visibility: hidden; clear: both; height: 1px; line-height: 1px;}
/*.cufon-canvas {overflow: hidden;}*/

/* Swatches
----------------------------------------------------------------------------- */
.error, .ok, .notice {margin: 10px 0; padding: 10px; text-align: center; font-weight: bold; 
  font-size: 11px; border: 1px solid;}
.error {color: rgb(226,0,122) !important; border-color: rgb(226,0,122);}
.ok {color: rgb(0,158,224) !important; border-color: rgb(0,158,224);}
.notice {color: rgb(103,101,109) !important; border-color: rgb(148,147,154);}
#response {width: 600px; margin: 100px auto 0; padding: 10px; font-size: 11px; 
  line-height: 15px; border: 1px solid rgb(226,0,122);}
  #response p {margin: 15px 0 0;}
  #response strong {color: rgb(226,0,122);}
  #response em {font-weight: bold; font-style: normal; color: rgb(226,0,122);
    border-bottom: 1px dotted rgb(226,0,122);}

.magenta {color: rgb(226,0,122);}
.yellow {color: rgb(255,255,0);}
.red {color: rgb(226,0,26);}

/* Links
----------------------------------------------------------------------------- */
a:link {text-decoration: none; color: rgb(226,0,122);}
a:visited {text-decoration: none; color: rgb(226,0,122);}
a:hover {text-decoration: underline; color: rgb(226,0,122);}
a.external {color: rgb(226,0,122); /*padding-right: 22px;
  background: url('../images/external.gif') top right no-repeat;*/}

/* Layout 
----------------------------------------------------------------------------- */
#header {height: 55px; padding: 35px 0 0 35px;}
#main {height: 570px;}
  #content {float: right; position: relative; width: 840px; height: 570px;}
    #subnav {float: left; width: 135px;}
  #nav {float: left; width: 130px; margin-top: 25px; padding-left: 30px;}
#footer {height: 40px; padding-left: 35px;}

/* Header and titles
----------------------------------------------------------------------------- */
h1 {margin-bottom: 1.3em; font-weight: bold; font-size: 14px; line-height: 1.3em;}

#header h2 {width: 230px; font-size: 28px; text-align: center;}
  #header h2 img {width: 230px; height: 55px;}
#header h3 {float: right; position: relative; width: 260px; height: 65px; 
  margin-top: -65px;}
/*  #header h3 span {position: absolute; top: 0; left: 0; width: 180px; height: 65px;
    background: url('../images/claim.png') top left no-repeat;}*/
#header a:link,
#header a:visited {text-decoration: underline; color: rgb(0,0,0);}
#header a:hover {text-decoration: underline; color: rgb(0,0,0);}

#footer h4 {position: relative; height: 15px;}
/*  #footer h4 span {position: absolute; top: 0; left: 0; width: 260px; height: 15px;
    background: url('../images/footer.png') top left no-repeat;}*/

#content h2 {margin-bottom: 0.65em; font-size: 1.5em; font-weight: bold;}
#content h3 {margin-bottom: 0.65em; font-size: 1.17em; font-weight: bold;}
#content h4 {font-size: 1em; font-weight: bold;}
#content h5 {font-size: 1em;}
#content h6 {font-size: .75em;}

/* Navigation
----------------------------------------------------------------------------- */
#nav li, #categories li {position: relative; width: 120px; height: 20px; overflow: hidden; font-size: 11px; 
  text-transform: lowercase; white-space: nowrap;}
  #nav a, #categories a {display: block; width: 120px; height: 20px; overflow: hidden;}
  #nav a:link, #categories a:link,
  #nav a:visited, #categories a:visited,
  #nav a:hover, #categories a:hover {color: rgb(0,0,0);}
  #nav .li_arrows a {float: left; width: 22px;}
  #nav a .hover {position: absolute; top: 0; left: -300px;}
  
  /*#nav a, #categories a {display: block; position: relative; width: 110px; height: 16px; padding: 2px 5px;
    text-indent: -9999px;}
  #nav a:link, #categories a:link,
  #nav a:visited, #categories a:visited {text-decoration: none; color: rgb(0,0,0);}
  #nav a:hover, #categories a:hover {text-decoration: none; color: rgb(0,0,0);}
    #nav a span, #categories a span {display: block; position: absolute; top: 0; left: 0; width: 120px; height: 20px;
      background-position: 0 0; background-repeat: no-repeat;}
    #nav a:hover span, #categories a:hover span,
    #nav .active a span, #categories .active a span {background-position: 0 -30px;}
    #nav .li_news a span {background-image: url('../images/li_novinky.gif');}
    #nav .li_about a span {background-image: url('../images/li_o-papelote.gif');}
    #nav .li_familia a span {background-image: url('../images/li_familia.gif');}
    #nav .li_offer a span {background-image: url('../images/li_sortiment.gif');}
    #nav .li_lab a span {background-image: url('../images/li_pape-lab.gif');}
    #nav .li_where-to-buy a span {background-image: url('../images/li_kde-koupit.gif');}
    #nav .li_photogallery a span {background-image: url('../images/li_fotogalerie.gif');}
    #nav .li_contact a span {background-image: url('../images/li_kontakt.gif');}
    #nav .li_links a span {background-image: url('../images/li_odkazy.gif');}
    #nav .li_english a span {background-image: url('../images/li_english.gif');}
    #nav .li_cesky a span {background-image: url('../images/li_cesky.gif');}
  #nav .li_arrows a {float: left; width: 30px; overflow: hidden; text-indent: 0;}
    #nav .li_arrows a span {width: 40px;}
    .li_sesity a span {background-image: url('../images/li_sesity.gif');}
    .li_bloky a span {background-image: url('../images/li_bloky.gif');}*/

#categories {margin-bottom: 15px;}

#products {margin-left: 5px;}
  #products a {font-size: 12px; text-transform: lowercase; line-height: 1.3em;}
  #products a:link,
  #products a:visited {text-decoration: none; color: rgb(0,0,0);}
  #products a:hover {text-decoration: none; font-weight: bold; color: rgb(0,0,0);}

#galleries {margin-top: 25px;}
  #galleries li {margin: 0 0 0 15px; padding: 0; list-style: url('../images/li_dash.gif') square outside;}
  #galleries li.active {list-style: url('../images/li_dash_active.gif') square outside;}
    #galleries a:link,
    #galleries a:visited {text-decoration: none; color: rgb(0,0,0);}
    #galleries a:hover {text-decoration: underline; color: rgb(0,0,0);}

.browse {clear: both;}
  .browse a {text-transform: lowercase;}
  .browse a:link,
  .browse a:visited {text-decoration: none; color: rgb(0,0,0);}
  .browse a:hover {text-decoration: underline; color: rgb(0,0,0);}

/* Content
----------------------------------------------------------------------------- */
.index #content {background: url('../images/bg_news.png') top left no-repeat;}
  #intro {margin: 23px 0 0 15px;}
  #intro_text {margin: 163px 0 0 3px;}

.news #content {background: url('../images/bg_news.png') top left no-repeat;}
  .news .article {float: left; width: 275px; padding: 50px 0 0 45px;}
  .news .list {position: relative; float: right; width: 275px; height: 390px; padding: 50px 210px 30px 0;}
    .news .list div {margin-bottom: 1.3em;}
  .news h4 {display: inline; padding-right: 0.7em;}
    /*.news h4 span {color: rgb(226,0,122);}*/
    .news h4 a:link, .news h4 a:visited, .news h4 a:hover {text-decoration: none;}
    .news h4 em {font-style: italic;}
    .news h4 strong {font-style: bold;}
  .news #content p {display: inline;}
  .news .list .pagination {position: absolute; bottom: 0; left: 0; margin: 0; padding: 0; background: none;}
  .news .more {color: #ff1493; font-size: 9pt;}

.about #content {background: url('../images/bg_about.png') 485px 175px no-repeat;}
  .about .page {width: 300px; height: 545px; margin: 25px 0 0 130px;}
.familia #content {height: 590px; margin-top: -20px;
  background: url('../images/bg_familia.png') 0 0 no-repeat;}
  .familia .page {width: 400px; height: 480px; margin: 90px 0 0 70px;}
  .familia .text1 {float: left; width: 190px;}
  .familia .text2 {float: right; width: 180px;}
.where-to-buy #content {width: 725px; height: 627px; margin: -57px 0 0 115px; 
  background: url('../images/bg_where.png') 0 0 no-repeat;}
  .where-to-buy .page {width: 350px; height: 540px; margin: 80px 0 0 40px;}
.contact #content {background: url('../images/bg_contact.png') 85px 40px no-repeat;}
  .contact .page {width: 200px; height: 370px; margin: 210px 0 0 255px;}
.lab #content {}
  .lab .page {width: 240px; height: 545px; margin: 25px 0 0 130px;}
/*.links #content {height: 590px; margin-top: -20px; 
  background: url('../images/bg_links.png') 35px 0 no-repeat;}
  .links .page {position: relative; width: 550px; height: 580px;}*/
  .links .page {width: 710px; height: 545px; margin: 25px 0 0 130px;}
    /*.links1 {position: absolute; top: 225px; left: 105px; width: 145px; height: 150px;}
    .links2 {position: absolute; top: 225px; left: 310px; width: 100px; height: 75px;}
      .links a:link {text-decoration: none; color: rgb(0,0,0);}
      .links a:visited {text-decoration: none; color: rgb(0,0,0);}
      .links a:hover {text-decoration: underline; color: rgb(0,0,0);}*/
.offer #content {height: 545px; margin-top: 25px;}
  #overview {margin-left: 135px;}
    #overview li {position: relative; float: left; width: 77px; height: 110px; overflow: hidden;
      margin: 0 15px 30px 0;}
      #overview a {display: block; width: 77px; height: 80px; padding-top: 30px; 
        font-weight: bold; font-size: 12px; line-height: 1.3em; text-align: center;}
      #overview a:link,
      #overview a:visited,
      #overview a:hover {text-decoration: none; color: rgb(0,0,0);}
        #overview a img {position: absolute; top: 0; left: 0;}
        #overview a:hover img {display: none;}
  #detail {width: 625px; margin-left: 135px;}
    #detail h1 {text-transform: lowercase;}
      #detail .text1 {float: left; width: 300px;}
      #detail .text2 {float: right; width: 300px}

.page strong {color: rgb(226,0,122);}

.pagination li {display: inline;}
  .pagination li a:link,
  .pagination li a:visited {text-decoration: none; color: rgb(0,0,0);}
  .pagination li a:hover {text-decoration: underline;}
  .pagination li.active a:link,
  .pagination li.active a:visited {color: rgb(226,0,122);}
  .pagination li strong {font-weight: normal; color: rgb(226,0,122);}

.gallery {position: absolute; top: 60px; left: 100px; width: 454px; height: 289px;
  padding: 21px 13px 20px 23px; background: url('../images/polaroid.png') top left no-repeat;
  /*transform: rotate(-5deg); -webkit-transform: rotate(-5deg); -moz-transform: rotate(-5deg);*/}
  /*.gallery img {float: left;}*/
  .gallery #img {position: absolute; top: 21px; left: 23px; width: 400px; height: 280px; overflow: hidden;}
  .gallery ul {float: right; width: 33px;}
    .gallery li a {display: block;  width: 33px; padding-bottom: 5px; font-size: 13px; 
      text-align: center;}
    .gallery li a:link,
    .gallery li a:visited {text-decoration: none; color: rgb(0,0,0);}
    .gallery li a:hover,
    .gallery li.active a {text-decoration: none; color: rgb(226,0,122)}
  #nextImg, #prevImg {position: absolute; top: 21px; left: 23px; display: block; 
    width: 199px; height: 280px; text-indent: -9999px; line-height: 280px; 
    background: url('../images/prev.png') 5% -400px no-repeat;}
  #nextImg {left: 224px; background: url('../images/next.png') 95% -400px no-repeat;}
  #prevImg:hover {background-position: 5% 50%;}
  #nextImg:hover {background-position: 95% 50%;}
  #facebook {position: absolute; top: 163px; left: 155px;}

/* Forms
----------------------------------------------------------------------------- */
label.overlay {position: relative; cursor: text;}
  label.overlay span {position: absolute;}
label.block {display: block; margin-bottom: 8px;}

form dl dt,
form dl dd {height: 16px; line-height: 16px; margin-bottom: 7px;}
form dl dt {width: 90px; float: left; margin-right: 7px; line-height: 16px;}
form dl dd {margin-left: 97px;}
  form dl label {font-size: 10px; text-transform: uppercase;}
  form dl input {width: 158px; height: 13px; padding: 2px 0 0 6px;}
  form dl .submit {width: 15px; height: 15px; margin: 0 3px -4px 0; padding: 0;}

/* Tables
----------------------------------------------------------------------------- */

/* IE6
----------------------------------------------------------------------------- */
* html {}

/* IE7+
----------------------------------------------------------------------------- */
*:first-child+html {}