@import url(http://fonts.googleapis.com/css?family=PT+Serif:400,700,400italic&subset=latin,latin-ext);

* { padding: 0; margin: 0; }
html, body { height: 100%; }
img { border: none; }
.clr { clear: both; height: 0; overflow: hidden; }

h1 { color: #471311; font-size: 1.8em; font-weight: normal; text-align: right; margin-bottom: 200px; }
h2 { color: #471311; font-size: 1.4em; font-weight: normal; margin-bottom: 10px; }
h3 { color: #471311; font-size: 1.2em; font-weight: normal; margin-bottom: 10px; }
p, ul { margin-bottom: 10px; }
ul { margin-left: 20px; }

/*** body ***/
body { font-family: 'PT Serif', Times, serif; font-size: 14px; font-weight: 400; background: white; color: black; }
#colorbox { -webkit-box-shadow:  5px 5px 20px 0 rgba(64, 64, 64, 1); box-shadow: 5px 5px 20px 0 rgba(64, 64, 64, 1); }
#body-out {
  border: 1px solid #eee;
  margin: 25px auto 0 auto; width: 1080px; height: 720px;
  background: #2d0506;
  background: -moz-linear-gradient(top,  #2d0506 0%, #ffffff 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2d0506), color-stop(100%,#ffffff));
  background: -webkit-linear-gradient(top,  #2d0506 0%,#ffffff 100%);
  background: -o-linear-gradient(top,  #2d0506 0%,#ffffff 100%);
  background: -ms-linear-gradient(top,  #2d0506 0%,#ffffff 100%);
  background: linear-gradient(to bottom,  #2d0506 0%,#ffffff 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2d0506', endColorstr='#ffffff',GradientType=0 );
}
#body { background: url(bg_1.jpg?3) right no-repeat; position: relative; width: 1080px; height: 720px; }
body.index #body { background-image: url(bg_home.jpg?3); }
body.onas #body { background-image: url(bg_2.jpg?3) }
body.katalog #body { background-image: url(bg_3.jpg?3) }
body.kontakt #body { background-image: url(bg_4.jpg?3) }
#leaf { position: absolute; top: 0; left: 0; width: 330px; height: 256px; background: url(leaf.png); z-index: 5; }
#white { position: absolute; top: 0; left: 180px; height: 720px; width: 360px; background: white; z-index: 4; }
#home { position: absolute; top: 0; left: 0; width: 180px; height: 180px; text-indent: -999999px; z-index: 10; }
#foot { position: absolute; bottom: 10px; left: 0; width: 180px; text-align: center; }
#foot a { color: #471311; text-decoration: none; }
.shadow:after {
  content: "."; width: 1080px; height: 15px; position: absolute; text-indent: -9999px;
  background-image: -webkit-linear-gradient(left, rgba(255,255,255,1), rgba(255,255,255,0), rgba(255,255,255,1));
  background-image:    -moz-linear-gradient(left, rgba(255,255,255,1), rgba(255,255,255,0), rgba(255,255,255,1));
  background-image:     -ms-linear-gradient(left, rgba(255,255,255,1), rgba(255,255,255,0), rgba(255,255,255,1));
  background-image:      -o-linear-gradient(left, rgba(255,255,255,1), rgba(255,255,255,0), rgba(255,255,255,1));
}
.shadow:before {
  content: "."; width: 1080px; height: 15px; position: absolute; margin-top: 720px; text-indent: -9999px;
  background-image: -webkit-linear-gradient(top, rgba(64,64,64,1), rgba(64,64,64,0));
  background-image:    -moz-linear-gradient(top, rgba(64,64,64,1), rgba(64,64,64,0));
  background-image:     -ms-linear-gradient(top, rgba(64,64,64,1), rgba(64,64,64,0));
  background-image:      -o-linear-gradient(top, rgba(64,64,64,1), rgba(64,64,64,0));
}

/*** nav ***/
#nav { position: absolute; font-family: Calibri, Arial, sans-serif; font-size: 14px; color: white; }
#nav a { color: white; }
#nav ul { list-style: none; margin: 0; padding: 250px 0 0 0; }
#nav ul li { margin: 5px 0; }
#nav ul li a { display: block; width: 146px; height: 44px; line-height: 44px; background: #471311; padding-left: 10px; text-decoration: none; border-radius: 0 10px 10px 0; }
#nav ul li a:hover { text-decoration: underline; }
#nav ul li.active a { font-weight: bold; }
body.index #nav ul { padding-top: 50px; }

#nav .user { background: #7b4d4d; width: 136px; border-radius: 0 10px 10px 0; margin-top: 20px; padding: 10px; }
#nav .user form input[type="text"], #nav .user form input[type="password"] { border: none; background: #ccc4c6; width: 132px; margin: 0 0 5px 0; padding: 2px; color: #471311; display: block; text-decoration: none; }
#nav .user form .button { width: 136px; margin-bottom: 10px; }
#nav .user form a.button { width: 106px; margin: 5px 0 0 0; display: block; text-decoration: none; }

#nav .kos { position: absolute; top: 180px; background: #7b4d4d; width: 136px; border-radius: 0 10px 10px 0; padding: 10px; height: 36px; z-index: 20; }

/*** column ***/
#column { position: absolute; z-index: 10; width: 320px; height: 680px; margin-left: 180px; overflow-y: auto; padding: 20px; }

/*** form ***/
.button, input, select { font-family: Calibri, Arial, sans-serif; font-size: 14px; }
fieldset { border: none; border-top: 1px solid #000; margin-bottom: 20px; }
legend { padding: 0 10px; margin-left: 15px; }

form .item { line-height: 24px; margin: 10px 0; }
form .item label { float: left; width: 80px; }
form .item-checkbox input { margin: 5px 10px 0 80px; }
form .item-checkbox label { display: inline; width: auto; }
form .item select { float: left; width: 240px; height: 24px; }
form .item input[type="text"], form .item input[type="password"] { float: left; width: 219px; height: 24px; }
form .item input[type="checkbox"] { float: left; }
form .item small { display: block; padding-left: 80px; }
form .item label em, p.error, form .item label.required, form .item label.error { color: #f00; font-style: normal; }
p.info { color: #471311; font-weight: bold; }

#filter-w .item { height: 20px; line-height: 20px; margin: 5px 0; }
#filter-w .item input[type="text"] { float: left; width: 220px; padding: 5px; height: 16px;}
#filter-w .item input[type="submit"] { float: right; width: 80px; }

.actions { text-align: right; }
.button { padding: 4px 14px; line-height: 20px; color: #fff; text-align: center; cursor: pointer; text-decoration: none; }

.button {
  background-color: #2e0507;
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#2e0507), to(#45080b));
  background-image: -webkit-linear-gradient(top, #2e0507, #45080b);
  background-image: -o-linear-gradient(top, #2e0507, #45080b);
  background-image: linear-gradient(to bottom, #2e0507, #45080b);
  background-image: -moz-linear-gradient(top, #2e0507, #45080b);
  background-repeat: repeat-x;

  border: 1px solid #bbbbbb;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  border-color: #e6e6e6 #e6e6e6 #bfbfbf;
  border-bottom-color: #a2a2a2;
  border-color: transparent;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;

  filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
  filter: progid:dximagetransform.microsoft.gradient(enabled=false);

  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
}
.button:hover {
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#45080b), to(#2e0507));
  background-image: -webkit-linear-gradient(top, #45080b, #2e0507);
  background-image: -o-linear-gradient(top, #45080b, #2e0507);
  background-image: linear-gradient(to bottom, #45080b, #2e0507);
  background-image: -moz-linear-gradient(top, #45080b, #2e0507);
}

/*** gallery ***/
.gallery a { border: 5px solid #bdb4b7; display: block; width: 145px; height: 100px; margin: 0 10px 10px 0; float: left; }
.gallery a.gal-last { margin-right: 0; }

/*** aktuality ***/
#aktuality { position: absolute; top: 55px; left: 200px; }
#aktuality .box a { color: #471311; }
#aktuality .box { width: 250px; background: rgba(255, 255, 255, .8); padding: 10px; border-radius: 10px; font-size: 14px; float: left; margin-right: 20px; }
#aktuality .box h2 { font-size: 14px; margin: 0 0 10px 0; }
#aktuality .box p { margin: 0; padding: 0; }

/*** right ***/
#right { position: absolute; left: 560px; top: 20px; width: 480px; max-height: 660px; padding: 10px; background: rgba(255, 255, 255, .8); color: #471311; border-radius: 10px; }
#right .in { max-height: 660px; overflow-y: auto; }

/*** vino ***/
#right div.vino { min-height: 240px; width: 460px; margin-bottom: 10px; background: rgba(255,255,255,0.7); position: relative; font-size: 13px; }
#right div.vino h3 { height: 50px; line-height: 50px; padding: 0 10px; margin: 0; font-size: 1.2em; }
#right div.vino img { float: left; margin-right: 20px; }
#right div.vino table.info { width: 230px; float: left; border-collapse: collapse; margin-bottom: 10px; }
#right div.vino table.info th, #right div.vino table.info td { text-align: left; height: 20px; line-height: 20px; border: none; vertical-align: top; }
#right div.vino table.info th { width: 65px; }
#right div.vino table.info a { color: #471311; }

#right div.vino div.kos { float: right; width: 85px; background: #7b4d4d; border-radius: 10px 0 0 10px; }
#right div.vino div.kos strong { display: block; margin: 10px 0; font-size: 1.2em; color: white; text-align: right; padding-right: 10px; }
#right div.vino div.kos form { height: 24px; margin-bottom: 12px; }
#right div.vino div.kos label { width: 94px; height: 24px; }
#right div.vino div.kos label input { float: left; }
#right div.vino div.kos label input[type="text"] { width: 15px; height: 24px; margin: 0 10px 0 15px; border: none; padding: 0 5px; }
#right div.vino a.button { position: absolute; right: 10px; bottom: 10px; text-decoration: none; }

#order { float: right; margin-right: 5px; height: 27px; line-height: 27px; }


/*** vino - detail ***/
#detail { font-size: 0.8em; background: url(leaf-detail-small.png) 740px 550px no-repeat; }
#detail, #detail a { color: #471311; }
#detail img { float: left; width: 285px; }
#detail .content { float: left; width: 475px; background: url(leaf-detail-big.png) 200px 0 no-repeat; padding: 130px 20px 20px 20px; }
#detail h1 { margin-bottom: 18px; text-align: left; font-size: 1.4em; }
#detail table { margin-bottom: 18px; border-collapse: collapse; }
#detail table th, #detail table td { text-align: left; height: 18px; line-height: 18px; vertical-align: top; }
#detail table th { padding-right: 10px; }
#detail p { margin: 0; text-align: justify; }

table.kosik { border-collapse: collapse; margin-bottom: 20px; }
table.kosik input.kos-cnt { width: 20px; }
table.kosik td, table.kosik th { border-bottom: 1px solid black; padding: 2px 0; }
table.kosik th { text-align: left; font-size: 1.1em; }
table.kosik th.ks, table.kosik td.ks { padding: 2px 5px; white-space: nowrap; }
table.kosik th.cena, table.kosik td.cena { text-align: right; white-space: nowrap; }
table.kosik th.bold, table.kosik td.bold { font-weight: bold; font-size: 1.1em; }

table.dap { width: 100%; }
table.dap td.radio { width: 30px; text-align: left; }
table.dap th { text-align: left; }