html {width: 100%;}
body {width: 100%; position: relative; margin: 0px; padding: 0px; background: #ececec url('/images/bg.png'); color: #3a4853; font-size: 13px;}
body, input, select, textarea {font-family: Arial, sans-serif;}

form {margin: 0; padding: 0;}
input {vertical-align: middle;}

/* Headers and paragraphs */
h1, h2, h3, h4, h5, h6 {font-size: 1em; color: #3a4853; font-weight: bold; margin: 0.5em 0 0.3em; padding: 0;}
h1 {color: #fff; font-size: 28px;}
h2 {font-size: 48px; margin: 0 0 20px 0;}
h3 {font-size: 24px;}
h4 {font-size: 16px;}
h5 {font-size: 1em;}
h6 {font-weight: normal;}

p {font-size: 13px; margin: 0 0 0.1em;}

/* link */
a {color: #3a4853; outline: none;}
a:hover {color: #3a4853; text-decoration: none;}
a span {cursor:pointer;}

/* list */
ul, ol {margin: 1.33em 0; padding: 0 20px;}
ul ul, ul ol, ol ul {margin: 0;}
li {margin-left: 35px; padding: 2px 0;}
ul li {list-style: square;}
ol li {list-style: decimal;}
.no-bullets li {margin-left: 0; list-style: none;}

/* image */
img {border: 0;}
img.image-left {float: left;  margin: 3px 15px 2px 0;}
img.image-right {float: right; margin: 5px 0 5px 15px;}
img.image-border {border: 1px solid #DBDBDB; padding : 2px;}
span.image-left  {float: left;  margin: 3px 8px 2px 0;}
span.image-right {float: right; margin: 3px 0 2px 8px;}

/* other */
.center {text-align: center !important;}
.fleft {float: left;}
.fright {float: right;}

.clear {clear: both;}
.nodisplay, hr {display: none;}

/* CMS layout */ 
#info {position: absolute; width: 100%; top: 30px; color: #fff; font-size: 16px; font-weight: bold; padding: 10px; text-align: center; background: #0072bc; cursor: pointer;}     

#box {position: absolute; width: 100%; height: 100%; left: 0; top: 0; z-index: 4; overflow: hidden;}

#header {width: 100%; background: #fff url('/images/header-bg.png') 0 0 repeat-x;}
#header .header-in {position: relative; width: 960px; margin: 0 auto; padding: 45px 120px 101px 120px;}
#header .logo {float: left; display: block; width: 194px; height: 81px; background: url('/images/weblab-logo.png') 0 0 no-repeat; margin: 0; padding: 0; overflow: hidden; text-indent: -999px;}
#header .shadow {position: absolute; width: 770px; height: 77px; right: 30px; top: 50px; background: url('/images/header-shadow.png') 0 0 no-repeat; z-index: 0;}
#header .slogan {clear: both; width: 888px; height: 126px; margin: 50px auto 0 auto; background: url('/images/slogan.png') 0 0 no-repeat; overflow: hidden; text-indent: -9999px;}

#reference {width: 100%; background: #1496f6 url('/images/reference-bg.png') 50% 0 no-repeat;}
#reference .reference-in {position: relative; width: 960px; margin: 0 auto; padding: 220px 120px 70px 120px; #padding-top: 240px;}
#reference h4 {font-size: 36px; color: #fff;}
#reference .reference-preview {clear: both;}
#reference .reference-preview ul {list-style: none; margin: 0 -9px 0 -10px; padding: 0;}
#reference .reference-preview li {display: block; float: left; width: 326px; height: 260px; color: #3a4853; list-style: none; margin: 0; padding: 0; overflow: hidden;}
#reference .reference-preview li a {color: #fff; font-weight: bold;}
#reference .reference-preview .img {padding: 11px 0 11px 10px;}
#reference .reference-preview .wrapper {width: 336px; height: 207px; background: url('/images/reference-box-bg.png') 0 0 no-repeat; margin: 0 0 0 -4px; padding: 0 0 0 14px;}
#reference .reference-preview .reference-title {display: block; color: #fff; font-size: 22px; margin: 10px 0 5px 0; letter-spacing: -1px;}
#reference .reference-preview .projektoid {display: block; width: 287px; height: 155px; background: url('/images/projektoid.png') 0 0 no-repeat;}
#reference .reference-preview .projektoid:hover {background-position:0 -155px;}
#reference .reference-preview .fakturman {display: block; width: 287px; height: 155px; background: url('/images/fakturman.png') 0 0 no-repeat;}
#reference .reference-preview .fakturman:hover {background-position:0 -155px;}
#reference .more-white {text-align: right;}
#reference .more-white a {color: #fff; font-size: 26px; text-decoration: none;}
#reference .more-white a:hover {color: #3a4853;}

.graybox {position: absolute; left: 120px; top: -70px; z-index: 10; background: url('/images/graybox-shadow.png') 0 100% no-repeat; padding-bottom: 30px; overflow: hidden;}
.graybox .graybox-in {width: 960px; background: #3a4853 url('/images/graybox-top.png') 0 0 no-repeat;}
.graybox .graybox-text {width: 920px; background: url('/images/graybox-bottom.png') 0 100% no-repeat; padding: 10px 20px;}
.graybox .button {float: right; display: block; width: 216px; height: 42px; line-height: 20px; color: #fff; font-size: 26px; background: url('/images/graybox-button.png') 0 0 no-repeat; text-decoration: none; text-align: center; #margin-right: 120px;}
.graybox .button:hover {color: #1496f6;}
.graybox p {color: #fff; font-size: 13px; margin: 20px 0; text-shadow: #252d34 0 -1px;}
.graybox p strong {color: #1496f6;}
.graybox a {color: #fff;}
.graybox a strong {color: #fff;}

#projects {width: 100%; background: #3a4853 url('/images/projects-bg.png') 0 0 repeat-x;}
#projects .projects-in {position: relative; width: 960px; margin: 0 auto; padding: 30px 120px 20px 120px;}
#projects .our-projects {position: absolute; width: 135px; height: 135px; right: 117px; top: -45px; background: url('/images/our-projects.png') 0 0 no-repeat; overflow: hidden; text-indent: -9999px;}
#projects .bluebox {float: left; width: 161px; height: 46px; background: url('/images/project-bluebox.png') 0 0 no-repeat; margin-right: 35px; overflow: hidden; text-indent: -9999px;}
#projects .drobeckove {float: left; width: 203px; height: 46px; background: url('/images/project-drobeckove.png') 0 0 no-repeat; overflow: hidden; text-indent: -9999px;}
#projects .projektoid {float: left; width: 203px; height: 46px; background: url('/images/project-projektoid.png') 0 0 no-repeat; overflow: hidden; text-indent: -9999px;}
#projects .projects-text {clear: both; overflow: hidden;}
#projects .projects-text p {color: #ccd5da; font-size: 13px; margin: 20px 0;}
#projects .more-blue {text-align: right; padding-right: 25px;}
#projects .more-blue a {color: #1496f6; font-size: 26px; text-decoration: none;}
#projects .more-blue a:hover {color: #fff;}

#content {width: 100%; background: #ececec url('/images/content-bg.png') 0 0 repeat-x;}
#content .content-in {width: 960px; margin: 0 auto; padding: 30px 120px;}
#content .content-left {float: left; width: 670px; margin-right: 30px;}
#content .content-right {float: left; width: 260px;}
#content .content-right h3 {text-align: right; color: #3a4853; font-size: 22px; letter-spacing: -1px;}
#content p {color: #3a4853; font-size: 13px; line-height: 1.5; margin: 15px 0;}
#content .twitter-top {clear: both; width: 262px; height: 25px; background: url('/images/twitter-top.png') 0 0 no-repeat;}
#content .twitter-in {width: 222px; background: #d4d4d4; padding: 15px 20px 5px 20px;}
#content .twitter-in ul, #content .twitter-in li {list-style: none; margin: 0; padding: 0;}
#content .twitter-in li {margin: 0 0 10px 0;}
#content .twitter-bottom {width: 262px; height: 10px; background: url('/images/twitter-bottom.png') 0 0 no-repeat;}
#content .line {width: 670px; height: 1px; background: url('/images/line.png') 0 0 no-repeat; margin: 30px 0 0 0;}

#menu {position: relative; float: right; height: 33px; margin-right: -4px; z-index: 5;}
#menu ul, #menu li {position: relative; list-style: none; margin: 0; padding: 0; z-index: 10;}
#menu ul {height: 33px; margin: 0 0 0 15px;}
#menu li {display: block; float: left; height: 33px;}
#menu li a {display: block; float: left; color: #fff; font-size: 18px; width: 67px; height: 33px; line-height: 30px; padding: 0 15px; margin: 0 4px; background: url('/images/menu-bg.png') 0 0 no-repeat; overflow: hidden; text-align: center; text-decoration: none; text-transform: lowercase;}
#menu li a:hover {color: #3a4853; background-position: 0 -33px;}

#foot {width: 100%; background: #ececec;}
#foot .foot-in {position: relative; width: 960px; margin: 0 auto; background: url('/images/foot-bg.png') 50% 0 no-repeat; padding: 30px 120px;}
#foot h4 {color: #3a4853; font-size: 18px;}
#foot p {color: #3a4853; font-size: 12px; line-height: 1.8; margin: 13px 0;}
#foot a {color: #3a4853; text-decoration: underline;}
#foot a:hover {text-decoration: none;}
#foot .col-menu {float: left; width: 215px;}
#foot .col-contact {float: left; width: 240px;}
#foot .col-copyright {float: right; width: 290px; color: #939a9f; font-size: 11px; background: url('/images/foot-logo.png') 100% 15px no-repeat; padding-top: 70px; text-align: right;}
#foot .col-copyright a {color: #939a9f; font-size: 11px; text-decoration: none;}

#contact {margin: 20px 0;}
#contact p span {display: block; padding-left: 37px; padding: 5px 0 5px 37px; background: 0 center no-repeat;}
#contact span.address {background-image: url('/images/ico-address.png'); background-position: 0 8px;}
#contact span.phone {background-image: url('/images/ico-phone.png') ;}
#contact span.mail {background-image: url('/images/ico-mail.png') ;}
#contact span.icq {background-image: url('/images/ico-icq.png') ;}
#contact span.bank {background-image: url('/images/ico-bank.png');}
#contact span.ic {background-image: url('/images/ico-ic.png');}

#about {margin: 40px 0 0 0;}