/******************************************************************************************************************* * Author: Tomas Lach (www.tomaslach.cz) * Date: 11.11.2011 *******************************************************************************************************************/ /******************************************************************************************************************* * IMPORT OTHER STYLES *******************************************************************************************************************/ @import url(reset.css); @import url(jquery.fancybox-1.3.4.css); @import url(http://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic); /******************************************************************************************************************* * BASE *******************************************************************************************************************/ html {background: #fff url('../img/background.jpg') no-repeat 50% 45px} body {color: #373737;font: normal 13px Helvetica, Arial, Tahoma, Verdana;} p {line-height: 1.7em;margin-bottom: 15px} address {line-height: 1.7em;margin-bottom: 15px;font-style: normal;padding-bottom: 15px;} /******************************************************************************************************************* * LINKS *******************************************************************************************************************/ a, a:link, a:focus {color: #dd4729;outline: 0;} a:hover, a.hover {color: #dd4729;text-decoration: none} a.more {padding-right: 15px;background: url('../img/arrow.gif') no-repeat 100% 50%} a.back {padding-left: 15px;background: url('../img/arrow-back.gif') no-repeat 0 50%} /******************************************************************************************************************* * H1 - H4 *******************************************************************************************************************/ h1, h2, h3, h4 {color: #5f3315;margin-bottom: 15px} h1 {font-size: 1.8em;} h2 {font-size: 1.4em;font-weight: 400} h3 {font-size: 1.2em;} h4 {font-size: 1.1em;} /******************************************************************************************************************* * HEADER *******************************************************************************************************************/ #header {height: 220px;} #header #logo {width: 137px;height: 108px;display: block;background: url('../img/logo-bako-interiery.png') no-repeat;text-indent: -9999px;text-decoration: none;position: absolute;top: 0;left: 0} #header nav ul {font-family: 'Lato';width: 100%;height: 65px;background: url('../img/background-navigation.png') no-repeat;position: absolute;left: 0px;top: 135px} #header nav ul li:first-child {background: none;padding-left: 0} #header nav ul li {float: left;} #header nav ul li a {float: left;color: #fff;height: 65px;line-height: 65px;text-decoration: none;font-size: 1.15em;background: url('../img/navigation-sep.gif') no-repeat 0 50%;font-weight: 300;display: block;padding: 0 20px;} #header nav ul li:first-child a {background: none;} #header nav ul li:hover a, #header nav ul li.active a {color: #efac7f;} /******************************************************************************************************************* * CONTENT *******************************************************************************************************************/ #container {background: url('../img/background-content.png') no-repeat} #content {padding: 30px 20px;width: 650px;float: left} #content ul.styled {margin-bottom: 20px} #content ul.styled li {padding: 0 0 5px 20px;background: url('../img/li.gif') no-repeat 0px 4px;line-height: 1.4em;} #content .gallery {margin-left: -19px;width: 709px;} #content .gallery a {display: block;float: left;padding: 5px;background: url('../img/background-image.png') no-repeat 50% 50%;margin-left: 19px;} #content .gallery a span {background: #fff url('../img/loading.gif') no-repeat 50% 50%;display: block;float: left;width: 190px;height: 107px;overflow: hidden;} #content .gallery a:hover {background: #dd4729} #content .gallery a img {float: left;display: none;position: relative} #content #steps {height: 92px;line-height: 92px;background: url('../img/background-steps.png') no-repeat;margin-bottom: 20px} #content #steps li {float: left;margin-left: 28px;color: #fff;background-repeat: no-repeat;font-size: 1.2em;background-position: 0 50%} #content #steps li.s1 {background-image: url('../img/step1.png');padding-left: 33px;} #content #steps li.s2 {background-image: url('../img/step2.png');padding-left: 39px;} #content #steps li.s3 {background-image: url('../img/step3.png');padding-left: 59px;} #content #steps li.s4 {background-image: url('../img/step4.png');padding-left: 45px;} #content .services {padding-top: 15px;} #content h2.calculation {padding: 20px;background: url('../img/background-navigation.png') no-repeat 100% 100%;color: #fff;} #content .services h2 {background: url('../img/background-navigation.png') no-repeat 100% 100%;color: #fff;} #content .services h2 span {display: block;padding: 20px;background-repeat: no-repeat;background-position: 20px 50%} #content .services h2.s1 span {background-image: url('../img/step1.png');padding-left: 53px;} #content .services h2.s2 span {background-image: url('../img/step2.png');padding-left: 59px;} #content .services h2.s3 span {background-image: url('../img/step3.png');padding-left: 79px;} #content .services h2.s4 span {background-image: url('../img/step4.png');padding-left: 65px;} #content .services .floatLeft, #content .services .floatRight {width: 48%} #content p.sep {padding-bottom: 20px;margin-bottom: 20px;border-bottom: 1px dotted #d2d2d2} #content form fieldset {position: relative;padding: 20px 0;border-radius: 5px;-moz-border-radius: 5px;border: 1px dotted #d2d2d2;} #content form table {width: 100%} #content form table th {padding-bottom: 10px;font-weight: normal;text-align: right;width: 20%;padding-right: 15px;vertical-align: top} #content form table th label {display: block;padding: 14px 0} #content form table td {padding-bottom: 10px;} #content form table td #daysCount {float: left;padding-left: 15px;font-size: 1.2em;position: relative;top: -5px} #content form table td #pagesCount {float: left;padding-left: 15px;font-size: 1.2em;position: relative;top: -5px} #content form table td strong {color: #ca1f73;} #content form table td .price {color: #ca1f73;} #content form table td#price p {margin-bottom: 0} #content form table td#price div {font-family: Ubuntu;font-weight: bold;font-size: 3.8em;color: #ca1f73;} #content form table td p {color: #999} #content form table td p.checkbox {margin: 0;padding-left: 25px;position: relative;margin-top: 10px;color: #000} #content form table td p.checkbox input {position: absolute;top: 4px;left: 0} #content form table td p.checkbox small {font-size: 12px;color: #999} #content form table td .submit {float: left;font-family: 'Lato', Helvetica, Arial;font-weight: 300;font-size: 1.2em;text-transform: uppercase;position: relative;top: 4px;cursor: pointer;background: #492a18;padding: 10px 15px;color: #fff;border-radius: 5px;-moz-border-radius: 5px;border: 1px solid #492a18;} #content form table td .submit:hover {background: #000;border-color: #000} #content form table td .hidden {display: none;} #content form .text {min-width: 250px} #content form .text, #content form textarea {font-family: Helvetica, Arial !important;font-weight: 300;font-size: 1.4em;border: 1px solid #d9d9d9;padding: 8px; border-radius: 5px;-moz-border-radius: 5px;} #content form .text:focus, #content form textarea:focus {border: 1px solid #492a18} #content .map {padding: 10px;background: url('../img/background-image.png') no-repeat 50% 50%;} #content .map iframe {float: left} #content address.large {width: 250px;padding: 30px 0 0 0} #aside {background: url('../img/background-aside.png') no-repeat 0 50px;width: 209px;padding: 35px 20px 20px;float: right;border-left: 1px dotted #d2d2d2;border-bottom: 1px dotted #d2d2d2} #aside a.map {display: block;padding: 5px;background: url('../img/background-image.png') no-repeat 50% 50%;} #aside a.map:hover, #aside a.map.hover {background: #dd4729} #aside a.map img {float: left;width: 199px} /******************************************************************************************************************* * FOOTER *******************************************************************************************************************/ #footer {background: url('../img/background-footer-image.png') no-repeat 50% 0;height: 160px} #footer .wrap{background: url('../img/background-footer.png') no-repeat 50% 100%;} #footer .wrap p {padding: 25px 20px 20px;color: #492a18;font-size: 0.9em} #footer .wrap p a {color: #492a18} /******************************************************************************************************************* * OTHER STYLES *******************************************************************************************************************/ .wrap {margin: 0 auto;position: relative;width: 940px} .mask {position: absolute;top: 0;left: 0;width: 100%;height: 100%;} .message {border: 0px solid #ccc;float: left;padding: 0 15px 0 35px;height: 30px;border-radius: 15px;-moz-border-radius: 15px;-webkit-border-radius: 15px;margin-bottom: 10px;} .message p {margin: 0;position: relative;top:0;color: #fff;line-height: 30px;font-size: 12px;font-weight: bold;font-family: Arial;} .message p a {color: #f0f0f0} .message p a:hover {color: #fff} .message.success {border-color: #337010;background: #1e1d1d url('../img/alert_ok.png') no-repeat 4px 50%} .message.warning {border-color: #337010;background: #1e1d1d url('../img/alert_no.png') no-repeat 4px 50%} #loadingMask {display: none;background: #fff url('../img/loading.gif') no-repeat 50% 50%;border-radius: 5px;-moz-border-radius: 5px;opacity: 0.7;position: absolute;width: 100%;height: 100%;top: 0;left: 0;z-index: 9999}