/*******************************************************************************************************************
*  Author: Tomas Lach (www.tomaslach.cz)                                                                           
*  Date: 23.12.2011                                                                                                
*******************************************************************************************************************/

/*******************************************************************************************************************
*  IMPORT OTHER STYLES                                                                                             
*******************************************************************************************************************/
@import url(reset.css);
@import url(http://fonts.googleapis.com/css?family=Lato:400,700,900,400italic,700italic,900italic);
@import url(jquery.fancybox-1.3.4.css);

/*******************************************************************************************************************
*  BASE                                                                                                            
*******************************************************************************************************************/
html {background: #37363b url('../img/noise.png');}
body {color: #71777d;font: normal 13px Arial, Tahoma, Verdana;background: url('../img/background-x.png') repeat-x;}
p {line-height: 1.7em;margin-bottom: 15px}
address {font-style: normal;padding-bottom: 15px;}

/*******************************************************************************************************************
*  LINKS                                                                                                           
*******************************************************************************************************************/
a, a:link, a:focus {color: #65d3d7;outline: 0;text-decoration: none} /* color */
a:hover {color: #000;text-decoration: underline}
a.more {padding-right: 15px;color: #000;background: url('../img/arrow.png') no-repeat 100% 50%}

/*******************************************************************************************************************
*  H1 - H4                                                                                                         
*******************************************************************************************************************/
h1, h2, h3, h4 {font-family: "Lato", Arial;line-height: 1.5em;margin-bottom: 15px;font-weight: 700}
h1 {font-size: 2.8em;color: #fff;margin: 0;} 
h1 span {color: #e1aa02}
h2 {font-size: 1.75em;color: #5f5f61;text-shadow: 1px 1px 1px #fff;}
h3 {font-size: 0.9em;color: #000;text-shadow: 1px 1px 1px #fff;margin-bottom: 8px}
h4 {font-size: 1.0em;}
.separate {padding-bottom: 10px;margin-bottom: 20px;background: url('../img/double-border.png') repeat-x bottom}

/*******************************************************************************************************************
*  HEADER                                                                                                          
*******************************************************************************************************************/
#header {height: 98px;position: relative;} 
#header a#logo {font-size: 1.8em;font-weight: bold;display: block;line-height: 98px;position: absolute;top: 0;left: 0;color: #323338;font-family: "Lato", Arial;}
#header a#logo span {color: #65d3d7} /* color */
#header a#logo:hover {text-decoration: none;color: #000}
#header nav ul {position: absolute;top: 0;right: 0}
#header nav li {float: left;}
#header nav li a {float: left;color: #323338;display: block;padding: 32px 20px;text-decoration: none; }
#header nav li a strong {display: block;font-size: 1.1em;margin-bottom: 0;}
#header nav li a span {color: #989898;font-size: 11px}
#header nav li.active a strong, #header nav li.active a span,
#header nav li a:hover strong, #header nav li a:hover span {cursor: pointer;color: #000 !important} 
#intro {color: #fff;height: 255px;position: relative;padding: 50px 550px 10px 0;position: relative}
#intro #macbook {position: absolute;bottom: -34px;right: 0;width: 550px;height: 309px;background: url('../img/macbook.png') no-repeat}
#intro #macbook img {position: relative;top: 20px;left:89px}
#intro h2 {font-size: 1.2em;text-shadow: 0 0 0;color: #afadae}
#intro p {color: #dddddd;margin-bottom: 20px}
#subIntro {height: 70px;position: relative;padding: 33px 0 7px 0;position: relative}
#subIntro h2 {color: #000;font-size: 1.4em;font-weight: normal;margin-bottom: 0}
#subIntro p {font-size: 1.1em}
#subIntro .button {position: relative;top: 5px;right: 60px !important}

/*******************************************************************************************************************
*  CONTENT                                                                                                         
*******************************************************************************************************************/
#container {background: #eeeff1;border-top: 1px solid #e0e0e0;border-bottom: 1px solid #e0e0e0;padding: 20px 0 50px}
#content .withIcon {padding-left: 65px;}
#content .icon1 {background: url('../img/icon1.png') no-repeat}
#content .icon2 {background: url('../img/icon2.png') no-repeat}
#content .icon3 {background: url('../img/icon3.png') no-repeat}


/*******************************************************************************************************************
*  FOOTER                                                                                                          
*******************************************************************************************************************/
#twitterBar {background: #fff;padding: 15px 0;}
#twitterBar .icon {position: absolute;top: -79px;left: -20px;display: block;width: 112px;height: 72px;background: url('../img/twitter.png') no-repeat}
#twitterBar p {margin: 0}
#footer {padding: 40px 0;color: #fff;font-size: 0.9em;}
#footer h3 {color: #fff;text-shadow: 0 0 0;margin-bottom: 20px;font-size: 1.4em}
#footer p {color: #fff;}
#footer a {color: #fff;}
#footer p .date {color: #fff}
#footer .followUs a {display: block;float: left;width: 27px;height: 28px;background-repeat: no-repeat;background-position: 0 0;text-indent: -9999px;margin-right: 5px}
#footer .followUs a:hover {background-position: 0 -1px}
#footer .followUs a.facebook {background-image: url('../img/icon-facebook.png');}
#footer .followUs a.twitter {background-image: url('../img/icon-twitter.png');}
#footer .followUs a.rss {background-image: url('../img/icon-rss.png');}
#footer .followUs a.linkedin {background-image: url('../img/icon-linkedin.png');}
#footer .followUs a.vimeo {background-image: url('../img/icon-vimeo.png');}
#footer .followUs a.digg {background-image: url('../img/icon-digg.png');}
#footer .followUs a.delicious {background-image: url('../img/icon-delicious.png');}
#footer a#footerLogo {font-size: 2.0em;font-weight: bold;display: block;color: #fff;font-family: "Lato", Arial;margin-bottom: 16px;}
#footer a#footerLogo span {color: #ccc} /* color */
#footer a#footerLogo:hover {text-decoration: none;color: #ccc}
#footer input.text {background: #232323;border: 1px solid #454547;padding: 10px 5px;border-radius: 4px;width: 210px;color: #e0e0e0;font-style: italic;margin-bottom: 10px}
#footer input.submit {width: 108px;height: 31px;background: url('../img/submit-subscribe.png') no-repeat;border: 0;font-size: 1.0em;font-weight: bold;color: #186c6f;text-shadow: 1px 1px 1px #c1eeef;font-family: Arial;cursor: pointer}
#footer input.submit:hover {color: #000}

/*******************************************************************************************************************
*  OTHER STYLES                                                                                                    
*******************************************************************************************************************/
.wrap {margin: 0 auto;position: relative;width: 940px}
.mask {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
a.button {display: block;float: left;background: url('../img/button-left.png') no-repeat;height: 42px;text-decoration: none;}
a.button span {cursor: pointer;position: relative;left: 20px;padding: 0 30px 0 10px;display: block;float: left;background: url('../img/button-right.png') no-repeat 100% 0;height: 42px;line-height: 43px;overflow: hidden;font-size: 1.0em;font-weight: bold;color: #186c6f;text-shadow: 1px 1px 1px #c1eeef;text-decoration: none} /* shadow and text color */
a.button:hover span {color: #000}
.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;padding: 3px}
a.photo:hover img {border-color: #d1d1d1}
.photoWrap {margin: 30px 0 30px}
.col1-3 {width: 280px;margin-left: 50px;float: left}
.col1-3 p:last-child, 
.col2-3 p:last-child {margin-bottom: 0}
.col1-3:first-child {margin-left: 0}
.col2-3 {width: 610px;margin-left: 50px;float: left}
.col1-4 {width: 220px;margin-left: 20px;float: left}
.col1-4:first-child {margin-left: 0}
.col3-4 {width: 700px;float: right}
.marginBottom30 {margin-bottom: 30px}
.date {font-size: 11px;display: block;margin-bottom: 10px }