/******************************************************************************************************************* * Author: Tomas Lach (www.tomaslach.cz) * Date: 25.02.2012 *******************************************************************************************************************/ /******************************************************************************************************************* * IMPORT OTHER STYLES *******************************************************************************************************************/ @import url(reset.css); /******************************************************************************************************************* * BASE *******************************************************************************************************************/ html {background: #fff;} body {color: #71777d;font: normal 12px "Helvetica Neue", Arial, Tahoma, Verdana;} p { line-height: 1.7em; margin-bottom: 15px; font-size: 14px; } address {font-style: normal;padding-bottom: 15px;} /******************************************************************************************************************* * LINKS *******************************************************************************************************************/ a, a:link, a:focus {color: #d81240;outline: 0;text-decoration: underline} /* color */ a:hover {color: #000;text-decoration: none} /******************************************************************************************************************* * H1 - H4 *******************************************************************************************************************/ h1, h2, h3, h4 {line-height: 1.5em;margin-bottom: 15px;font-weight: 700} h1 {font-size: 3.0em;color: #fff;} h2 { font-size: 2.1em; color: #666666; font-weight: 200; padding: 0; } h3 {font-size: 1.5em;color: #000;text-shadow: 1px 1px 1px #fff;margin-bottom: 8px} h4 {font-size: 1.0em;} /******************************************************************************************************************* * HEADER *******************************************************************************************************************/ #header {height: 125px;position: relative;} #header a#logo {font-size: 1.8em;text-decoration: none;background: url('../img/logo.png') no-repeat 0 50%;padding-left: 40px;font-weight: 300;display: block;line-height: 125px;position: absolute;top: 0;left: 0;color: #2b3031;} #header a#logo:hover {text-decoration: none;color: #000} #header nav ul { position: absolute; top: 45px; right: 0 } #header nav li {float: left;margin-left: 5px;} #header nav li a { float: left; border: 1px solid #fff; color: #818181; display: block; height: 33px; line-height: 33px; padding: 0 10px; text-decoration: none; } #header nav li a span { display: block; border-top: 1px solid #fff; height: 33px; float: left; padding: 0 10px; } #header nav li.active a, #header nav li a:hover {border-color: #d81240;background: #1294d8;color: #fff !important;} #header nav li.active a span , #header nav li a:hover span {border-top: 1px solid #ff32b4;} /******************************************************************************************************************* * INTRO *******************************************************************************************************************/ #intro { color: #fff; padding-top: 20px; text-align: center; background-color: #e31751; } #intro h1 {margin-bottom: 0;font-weight: 100;} #intro h1 strong {font-weight: 500} #intro p {font-size: 1.3em;font-weight: 200;color: #fff;margin-bottom: 30px;opacity: 0.8} #intro p a {color: #fff;text-decoration: underline;} #intro p a:hover {color: #fff;text-decoration: none} #intro img {float: left} /******************************************************************************************************************* * TWITTER *******************************************************************************************************************/ #twitterBar {background: #fff;padding: 20px 0;font-family: Georgia, Arial, Verdana, Tahoma;font-style: Italic;position: relative;} #twitterBar .remove {position: absolute;top: 50%;right: 0;display: block;border: 1px solid #fff;width: 20px;height: 20px;margin-top: -10px;;background: url('../img/remove.png') no-repeat 50%;text-indent: -9999px;} #twitterBar .remove:hover {background-color: #f7f7f7;border-color: #ccc;} #twitterBar p {margin: 0;font-size: 1.4em;text-align: center;} /******************************************************************************************************************* * CONTENT *******************************************************************************************************************/ #container {background: #ededed;border-top: 1px solid #e0e0e0;border-bottom: 1px solid #e0e0e0;padding: 40px 0 50px} #content .withIcon h2 { padding-left: 60px; font-size: 1.6em } #content .withIcon p {padding-left: 60px} #content .icon1 {background: url('../img/icon-fast.png') no-repeat 0 5px} #content .icon2 { padding-bottom: 15px; background-clip: url('../img/icon-lovely.png') no-repeat 0 5px; background-image: url(../img/icon-lovely.png); background-repeat: no-repeat; } #content .icon3 {background: url('../img/icon-tasty.png') no-repeat 0 5px} /******************************************************************************************************************* * FOOTER *******************************************************************************************************************/ #footer {padding: 40px 0;color: #8b8b8b;font-size: 0.9em;} #footer a.facebook {color: #286bb5} #footer a.twitter {color: #33bae6} /******************************************************************************************************************* * OTHER STYLES *******************************************************************************************************************/ .intro-spacer { width: 980px; height: 0px; } .wrap { position: relative; width: 980px; padding: 0px; margin-top: 20px; margin-right: auto; margin-bottom: 0; margin-left: auto; margin-top: 0px; } .buttonWrapper { margin-bottom: 30px; text-align: left; background: url('../img/double-border.png') repeat-x 0 50% } .buttonWrap { background: #ededed; padding: 0; display: inline-block; } a.button {display: inline-block;border: 1px solid #d81240;background: #19bee7;color: #fff;text-decoration: none;height: 45px;line-height: 45px;text-decoration: none;} a.button span {display: inline-block;padding: 0 40px;font-size: 1.2em;font-weight: 400;height: 45px;border-top: 1px solid #ff32b4;} a.button:hover {background: #666;border-color: #666;} a.button:hover span {border-color: #999} .gallery .photo {margin-left: 20px} .gallery .photo:first-child {margin-left: 0} a.photo {display: block;float: left;} a.photo img, img.photo {display: block;float: left;border: 1px solid #d3d3d3;background: #fff;} a.photo:hover img {border-color: #999} .col1-3 { width: 550px; margin-left: 30px; float: left } .col1-3 p:last-child, .col2-3 p:last-child {margin-bottom: 0} .col1-3:first-child { margin-left: 0px; } .col1-2 { width: auto; margin-left: 20px; float: left } .col1-2:first-child { margin: 0; height: auto; } .marginBottom30 { margin-bottom: 0px; width: auto; padding-left: 0px; } /******************************************************************************************************************* * CSS3 *******************************************************************************************************************/ #header nav li.active a, #header nav li a:hover { background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e81959), color-stop(100%, #c80b27)); background-image: -webkit-linear-gradient(top, #e81959, #c80b27); background-image: -moz-linear-gradient(top, #e81959, #c80b27); background-image: -ms-linear-gradient(top, #e81959, #c80b27); background-image: -o-linear-gradient(top, #e81959, #c80b27); background-image: linear-gradient(top, #e81959, #c80b27); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#e81959', EndColorStr='#c80b27')"; /* IE8 and IE9*/ } #header nav li a, #header nav li a span { -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } #intro { background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e81959), color-stop(100%, #c80b27)); background-image: -webkit-linear-gradient(top, #e81959, #c80b27); background-image: -moz-linear-gradient(top, #e81959, #c80b27); background-image: -ms-linear-gradient(top, #e81959, #c80b27); background-image: -o-linear-gradient(top, #e81959, #c80b27); background-image: linear-gradient(top, #e81959, #c80b27); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#e81959', EndColorStr='#c80b27')"; /* IE8 and IE9*/ } a.button { -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e81959), color-stop(100%, #c80b27)); background-image: -webkit-linear-gradient(top, #e81959, #c80b27); background-image: -moz-linear-gradient(top, #e81959, #c80b27); background-image: -ms-linear-gradient(top, #e81959, #c80b27); background-image: -o-linear-gradient(top, #e81959, #c80b27); background-image: linear-gradient(top, #e81959, #c80b27); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#e81959', EndColorStr='#c80b27')"; /* IE8 and IE9*/ -webkit-box-shadow: 0 8px 6px -6px #000; -moz-box-shadow: 0 8px 6px -6px #000; -ms-box-shadow: 0 8px 6px -6px #000; -o-box-shadow: 0 8px 6px -6px #000; box-shadow: 0 4px 4px -4px #000; } a.button span { -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; } a.button:hover {background: #666;border-color: #666; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #333333), color-stop(100%, #000000)); background-image: -webkit-linear-gradient(top, #333333, #000000); background-image: -moz-linear-gradient(top, #333333, #000000); background-image: -ms-linear-gradient(top, #333333, #000000); background-image: -o-linear-gradient(top, #333333, #000000); background-image: linear-gradient(top, #333333, #000000); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#333333', EndColorStr='#000000')"; /* IE8 and IE9*/ } #twitterBar .remove:hover { -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } #smpicture { height: 312px; width: 350px; } .pararight { font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 12px; font-style: normal; width: 600px; float: right; } TestRight { font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 12px; font-style: normal; text-decoration: none; text-align: left; float: right; width: 600px; margin-left: 250px; } form h2 { margin: 15px 0 0 0; }