html {margin: 0; padding: 0; background: url('../images/bg.gif') repeat-y top center;}
body {margin: 0; padding: 0; font-family: 'Trebuchet MS', 'Geneva CE', lucida, sans-serif;; font-size: small; background: url('../images/bg_zebra.gif') no-repeat top center;}

input, select, textarea {border: 1px solid #969696;}
option {background: white;}

a {text-decoration: none; color: #ae1525;}
a:hover {text-decoration: underline;}
a img {border: none;}

p {text-align: justify; padding: 0 10px;}
p.margin {margin: 10px 0;}

.hidden {display: none;}
.clear {clear: both;}
.invalid {color: #c00;}
input.btn {padding: 3px 10px; background: url('../images/btn_red.gif'); border-right: none; border-bottom: none; border-top: 1px solid #3b0001; border-left: 1px solid #3b0001; cursor: pointer; font-weight: bold; color: white; text-transform: uppercase;}
input.btn:hover {background: url('../images/btn_yellow.gif'); border-top: 1px solid #ffbf21; border-left: 1px solid #ffbf21; color: black;}

#all {width: 800px; margin: 0 auto; overflow: hidden;}

#top {width: 800px; height: 120px; padding: 0 0 0 0; margin: 0 auto; position: relative; background: #50A02D url('../images/top.gif') no-repeat center bottom;}
h1 {float: left; margin: 7px 0 0 14px; width: 443px; height: 75px; background: url('../images/ZebrahouseCZlogo-2.gif') no-repeat;}
* html h1 {margin: 10px 0 0 8px;}
h1 a {display: block; width: 443px; height: 75px;}
h1 span {display: none; cursor: pointer;}

#languages {position: absolute; top: 90px; left: 90px;}
#languages a {margin: 0 2px;}
#free-call {position: absolute; top: 85px; left: 480px; color: white; font-size: 170%; color: #FAE849; font-weight: bold;}

#zebra-titul {margin: 25px 148px 0 148px; font-size: large; text-align: center;}
#z1 {position: absolute; top: 5px; left: -125px; width: 139px; height: 178px; z-index: 100; background: url('../images/z1.png') no-repeat;}
* html #z1 {filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/themes/default/images/z1.png', sizingMethod='scale'); background-image: none;}
#z4 {position: absolute; top: 5px; right: -55px; width: 82px; height: 193px; z-index: 100; background: url('../images/z4.png') no-repeat;}
* html #z4 {filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/themes/default/images/z4.png', sizingMethod='scale'); background-image: none;}
#z3 {position: absolute; top: 5px; right: -100px; width: 128px; height: 188px; z-index: 100; background: url('../images/z3.png') no-repeat;}
* html #z2 {filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/themes/default/images/z3.png', sizingMethod='scale'); background-image: none;}
#z2 {position: absolute; top: 5px; left: -80px; width: 94px; height: 187px; z-index: 100; background: url('../images/z2.png') no-repeat;}
* html #z2 {filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/themes/default/images/z2.png', sizingMethod='scale'); background-image: none;}

#top ul {float: right; margin: 15px 30px 0 0; width: 300px; padding: 0; list-style: none;}
* html #top ul {margin: 15px 15px 0 0;}
#top li {float: left; width: 90px; padding: 0 0 0 10px; background: url('../images/tecka_zluta.gif') no-repeat left;}
#top ul a {color: white; text-decoration: none;}
#top ul a:hover {color: #FAE849; border-bottom: 1px solid white;}

h2.page-title {float: left; width: auto; margin: 0 0 10px -9px; padding: 5px 10px 5px 14px; color: #ae1525; font-size: 150%; font-weight: normal; background: white; border-top: 1px solid #f0eec5; border-bottom: 1px solid #f0eec5; border-right: 1px solid #f0eec5;}
* html h2.page-title {margin: 0; position: relative; left: -9px;}
h2.page-title img {position: relative; top: 3px; margin: 0 0 0 5px;}
h3 {margin: 0; padding: 5px 10px; color: #ae1525; font-size: large; font-weight: normal;}

p {margin: 0 0 5px 0;}

#content {width: 770px; min-height: 677px; padding: 10px 15px; background: url('../images/bg_content.gif') repeat-y left;}
#content-top {height: 34px; background: url('../images/bg_top.gif') no-repeat top center;}
#content-top p {margin: 0; padding: 8px 0 0 0; text-align: center; color: #ae1525; font-size: medium;}
#content-bottom {height: 10px; margin: 0; padding: 25px; text-align: center; background: url('../images/bg_bottom.gif') no-repeat top center;}
#content-bottom a {color: #FCEF80;}
#content-bottom a:hover {color: white;}
#content-bottom span {padding: 0 15px; color: white;}

#user-menu {float: right; text-align: right;}
#user-menu fieldset {border: none; padding: 0; margin: 0;}
#user-menu legend {display: none;}
#user-menu label {padding: 0; float: none;}
#user-menu input {width: 80px; height: auto; margin: 0; padding: 1px;}
#user-menu input.btn {margin: 0;}

.product {position: relative; width: 163px; height: 140px; margin: 9px 9px 0 0; padding: 5px 5px 5px 210px; float: left; border: 1px solid #DDDED0; background: white; font-family: "Lucida Grande", "Trebuchet MS", "Bitstream Vera Sans", Verdana, Helvetica, sans-serif;}
* html .product {margin: 9px 5px 0 0; behavior: url('/themes/default/scripts/hover.htc');}
.product-work {width: 368px; height: 140px; margin: 9px 9px 0 0; padding: 5px; float: left; border: 1px solid #DDDED0; background: #F4F3DF; color: #57A009; font-size: large; text-align: center; line-height: 140px;}
.product-work-de {width: 368px; height: 140px; margin: 9px 9px 0 0; padding: 5px; float: left; border: 1px solid #DDDED0; background: #F4F3DF; color: #535353; text-align: center;}
.product-work-de strong {color: #57A009; font-size: large;}
.product-right {margin: 9px 0 0 0;}
.product:hover, .product.hover {width: 178px; padding: 5px 195px 5px 5px; background: #FAE84A;}
.product h2 {margin: 0; padding: 0 0 5px 0; color: #ae1525; font-weight: normal;}
* html .product h2 {font-size: large;}
.product:hover h2, .product.hover h2 {color: black;}
.product p {margin: 0; padding: 0; color: #535353; text-align: left;}
.product:hover p, .product.hover p {display: none;}
.product ul {display: none; margin: 0; padding: 0 0 0 15px; color: #ae1525;}
.product:hover ul, .product.hover ul {display: block;}
.product ul a {font-weight: bold; font-size: 115%;}
.product-image {width: 201px; height: 146px; position: absolute; top: 2px; left: 2px;}
.product:hover .product-image, .product.hover .product-image {display: none;}
.product-image-hover {width: 201px; height: 146px; display: none; position: absolute; top: 2px; right: 2px;}
.product:hover .product-image-hover, .product.hover .product-image-hover {display: block;}

.table {margin: 10px 0; border-width: 2px 0 2px 2px; border-style: solid; border-color: #BFBFAF; border-collapse: collapse;}
.table th {padding: 3px 10px; background: white; font-weight: normal; text-align: left; border-right: 2px solid #BFBFAF;}
.table td {padding: 2px 5px; background: white; text-align: right; vertical-align: top; color: #ae1525; border-right: 2px solid #BFBFAF;}
.table .left {text-align: left;}
.table tr.first td {background: #FCEF80;}
.table .details div {padding: 5px;}

.form fieldset {margin: 10px 0 5px 0px; border: none;}
.form legend {font-size: medium;}
.form p {margin: 2px 0; clear: left;}
.form label {float: left; width: 130px; padding: 7px 10px 1px 0; text-align: right;}
.form input {width: 241px; height: 17px; margin: 0 0 2px 0; padding: 3px 4px 5px 4px; background: white; border: 2px solid #BFBFAF;}
.form input.btn {width: auto !important; height: auto !important; padding: 3px 10px; margin: 0 0 0 158px; background: url('../images/btn_red.gif'); border-right: none; border-bottom: none; border-top: 1px solid #3b0001; border-left: 1px solid #3b0001; cursor: pointer; font-weight: bold; color: white; text-transform: uppercase;}
.form input.btn:hover {background: url('../images/btn_yellow.gif'); border-top: 1px solid #ffbf21; border-left: 1px solid #ffbf21; color: black;}
.form input.checkbox {width: auto; border: none;}
.form input.required {background: white url('../images/required.gif') no-repeat top right;}
.form textarea {width: 241px; margin: 0 0 2px 0; padding: 3px 4px 5px 4px; background: white; border: 2px solid #BFBFAF;}
.form textarea.required {background: white url('../images/required.gif') no-repeat top right;}
.form select {width: 253px; height: 27px; margin: 1px 0 1px 0; padding: 3px 4px 5px 4px; background: white; border: 2px solid #BFBFAF;}
.form .phone select {width: 70px;}
.form .phone input {width: 167px;}

#calculation {float: left; width: 580px;}

#form-calculation {float: left; width: 380px; position: relative; margin: 0; min-height: 277px;}
#form-calculation p {padding: 0; margin: 0; clear: left;}
#form-calculation label {float: left; width: 110px; padding: 7px 10px 1px 0; text-align: right;}
#form-calculation select {width: 253px; height: 27px; margin: 0 0 2px 0; padding: 3px 4px 5px 4px; background: white; border: 2px solid #BFBFAF;}
* html #form-calculation select {margin: 4px 0 5px 0;}
#form-calculation input {width: 241px; height: 17px; margin: 0 0 2px 0; padding: 3px 4px 5px 4px; background: white; border: 2px solid #7F7F6F;}
#form-calculation input.required {background: white url('../images/required.gif') no-repeat top right;}
#form-calculation input.btn {width: auto !important; height: auto !important; padding: 3px 10px; background: url('../images/btn_red.gif'); border-bottom: none; border-right: none; border-top: 1px solid #3b0001; border-left: 1px solid #3b0001; cursor: pointer; font-weight: bold; color: white; text-transform: uppercase;}
#form-calculation input.btn:hover {background: url('../images/btn_yellow.gif'); border-top: 1px solid #ffbf21; border-left: 1px solid #ffbf21; color: black;}
#form-calculation-img {float: right; padding: 5px; width: 185px; min-height: 267px; background: #EFEFDA;}
#form-calculation-img strong {color: #C00005; font-size: medium; font-weight: bold;}
#form-calculation label img {position: relative; top: 2px;}

#calculation-result {clear: both;}
#calculation-result table {width: 579px; margin: 5px 0;}
#calculation-result th {text-align: center;}
#calculation-result th img {margin-top: 3px;}
#calculation-result td.center {text-align: center;}
#calculation-result p {padding: 0;}

#calculation-modules {float: right; width: 185px; margin: 0 -9px 0 0; background: white; border-left: 1px solid #F0EEC7; border-bottom: 1px solid #F0EEC7; -moz-border-radius: 3px; text-align: right;}
* html #calculation-modules {margin: 0 -4px 0 0;}
#calculation-modules img {width: 147px;}
#calculation-modules a.back {display: block; width: auto; padding: 5px 0; margin: 0; background: #F0EEC7; text-align: center; color: black;}
#calculation-modules h3 {margin: 0; padding: 5px 0; color: #ae1525; text-align: left; font-size: 120%;}
#calculation-modules p {width: 147px; margin: 0; padding: 0; font-size: 90%; text-align: left;}
* html #calculation-modules p {margin: 0 22px 0 0;}
#calculation-modules a {width: 147px; display: block; margin: 10px 0 0 0;}
* html #calculation-modules a {margin: 10px 22px 0 0;}
#calculation-modules a:hover {text-decoration: none;}
#calculation-modules .scroll {width: 170px; padding: 0 0 10px 15px; max-height: 500px; overflow: auto;}
* html #calculation-modules .scroll {height: 500px;} /* TODO: max-height */

#table-basket {width: 100%; border-collapse: collapse;}
#table-basket th {padding: 10px 15px; background: #FFFFFF; border: 1px solid #EFEEDD; text-align: left;}
#table-basket td {padding: 10px 15px; background: #F0EEC6; border-left: 1px solid #FCFBE9; cursor: pointer;}
#table-basket tr:hover td {background: #FAE84A;}
#table-basket tr.details td {padding: 0 8px 5px 8px; background: #FCFBE9; cursor: default;}
#table-basket tr.details div {padding: 15px; border-left: 1px solid #EFEEDD; border-right: 1px solid #EFEEDD; border-bottom: 2px solid #EFEEDD; background: white;}

#table-orders {width: 770px; border-collapse: collapse;}
#table-orders a {color: white;}
#table-orders th {padding: 10px 15px; background: #FFFFFF; border: 1px solid #EFEEDD; text-align: left;}
#table-orders td {padding: 10px 15px; background: #59B135 url('../images/nav1.gif'); border-left: 1px solid #FCFBE9; color: white; cursor: pointer;}
#table-orders td.todo {background: url('../images/nav2.gif');}
#table-orders td.upload {background: white;}
#table-orders td.upload a {color: black;}
#table-orders tr.details td {padding: 0; border-bottom: 5px solid #FCFBE9; cursor: default;}
#table-orders table {width: 755px; margin: 0 5px 5px 5px; border-collapse: collapse;}
#table-orders table th {padding: 8px 15px; background: #FFFFFF; border: 1px solid #EFEEDD; text-align: left; color: black;}
#table-orders table #th1 {width: 455px;}
#table-orders table #th2 {width: 150px;}
#table-orders table #th3 {width: 150px;}
#table-orders table td {padding: 7px 15px !important; background: #F0EEC6; border-left: 1px solid #FCFBE9; border-bottom: none !important; cursor: pointer !important; color: black;}
#table-orders table tr:hover td {background: #FAE84A;}
#table-orders table tr.details td {padding: 0 8px 5px 8px !important; background: #FCFBE9; cursor: default !important;}
#table-orders table tr.details div {padding: 15px; border-left: 1px solid #EFEEDD; border-right: 1px solid #EFEEDD; border-bottom: 2px solid #EFEEDD; background: white;}
#table-orders table tr.details span {display: block; width: 745px;}

#glossary-menu {float: left; width: 200px; height: 400px; overflow: auto; margin: 0; padding: 0 0 0 10px; list-style: none;}
#glossary-menu li {padding: 0 0 0 10px; margin: 0; background: url('../images/tecka_cervena.gif') no-repeat 0 7px;}
#glossary-content {float: right; width: 540px; margin: 0 -9px 0 0; padding: 10px; background: white; border-top: 1px solid #F0EEC5; border-bottom: 1px solid #F0EEC5; border-left: 1px solid #F0EEC5;}
#glossary-content h3 {padding: 0; margin: 0 0 5px 0;}
#glossary-content p {padding: 0;}