@font-face {
	font-family: 'GraublauWebRegular';
	src: url('/fonts/GraublauWeb.eot');
	src: local('Graublau Web'), local('GraublauWeb-Regular'), url('/fonts/GraublauWeb.woff') format('woff'), url('/fonts/GraublauWeb.ttf') format('truetype'), url('/fonts/GraublauWeb.svg#GraublauWeb-Regular') format('svg');
}

body {position: relative; margin: 0px; padding: 0px; background: #999999 url('/images/bg.png') 0 0 repeat; color: #000; font-size: 12px;}
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: #000; font-family: 'GraublauWebRegular', 'Geneva CE', lucida, sans-serif; font-weight: bold; margin: 0.5em 0 0.3em; padding: 0;}
h1 {font-size: 30px;}
h2 {font-size: 28px;}
h3 {font-size: 24px;}
h4 {font-size: 18px;}
h5 {font-size: 1em;}
h6 {font-weight: normal;}

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

/* link */
a {color: #000; outline: none;}
a:hover {color: #000; 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 8px 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;}     

#header {width: 100%; background: #747474 url('/images/header-bg.png') 0 0 repeat; margin-top: 30px;}
#header .header-in {position: relative; width: 997px; height: 168px; margin: 0 auto; background: url('/images/header-shadow.png') center bottom no-repeat;}
#header h1 {position: absolute; width: 269px; height: 73px; left: 0px; top: 48px; background: url('/images/bluebox-logo.png') 0 0 no-repeat; margin: 0; padding: 0; overflow: hidden}
#header h1 a {display: block; width: 269px; height: 73px; overflow: hidden; text-indent: -999px;}

#menu {position: absolute; right: 30px; top: 64px; height: 44px; background:  url('/images/menu-right.png') right top no-repeat; padding-right: 10px;}
#menu .menu-in {background:  url('/images/menu-left.png') 0 0 no-repeat; padding-left: 8px;}
#menu ul, #menu li {position: relative; color: #434343; list-style: none; margin: 0; padding: 0; z-index: 10;}
#menu ul {height: 44px; background:  url('/images/menu-bg.png') 0 0 repeat-x;}
#menu li {display: block; float: left; height: 40px; margin: 0 0 0 10px;}
#menu li.first {margin: 0;}
#menu li a {display: block; float: left; line-height: 40px; color: #000; font-size: 15px; font-family: 'GraublauWebRegular'; margin: 0; padding: 0 15px; text-decoration: none; text-transform: lowercase;}
#menu li a:hover {color: #858585; text-decoration: none;}
#menu li.active a {color: #008fd5;}

#topmain {width: 100%; background: #a7a7a7 url('/images/topmain-bg.png') 0 0 repeat-x;}
#topmain .topmain-in {position: relative; width: 997px; height: 420px; margin: 0 auto; padding: 47px 0 0 0; background: url('/images/topmain-shadow.png') center top no-repeat;}     
#topmain .topmain-in p {width: 365px; height: 110px; color: #444444; font-size: 12px; padding: 0 0 0 10px; line-height: 1.3; text-align: justify; text-shadow: #cacaca 1px 1px 0; overflow: hidden;}     

#content {width: 100%; background: #747474 url('/images/content-bg.png') 0 0 repeat;}
#content .content-in {position: relative; width: 997px; margin: 0 auto; padding: 45px 0 0 0;}     
#content .entry {padding: 0px 30px 25px 10px;}     
#content .entry h3 {color: #fff; text-shadow: #4a4a4a 1px 1px 0; margin: 30px 0 10px 0;}     
#content .entry h4 {color: #fff; text-shadow: #4a4a4a 1px 1px 0; margin: 10px 0;}     
#content .entry h4 span.price {color: #95d8f1; font-size: 24px;}     
#content .entry .gray {color: #bebaba;}     
#content .entry p,     
#content .entry ul,     
#content .entry li {color: #fff; line-height: 1.5; font-size: 14px; text-shadow: #4a4a4a 1px 1px 0;}     
#content .entry a {color: #fff;}     
#content .entry p {margin: 10px 0; text-align: justify;}     
#content .entry p.bigger {font-size: 16px; margin: 20px 0;}     
#content .entry .contact {margin: 10px 0;}     
#content .entry .contact li {font-size: 14px; margin: 0;}     

h2.slogan1 {width: 371px; height: 116px; background: url('/images/slogan1.png') 0 0 no-repeat; overflow: hidden; text-indent: -5000px; margin: 0 0 20px 8px;}
h2.slogan2 {width: 326px; height: 122px; background: url('/images/slogan2.png') 0 0 no-repeat; overflow: hidden; text-indent: -5000px; margin: 0 0 20px 8px;}
h2.slogan3 {width: 345px; height: 121px; background: url('/images/slogan3.png') 0 0 no-repeat; overflow: hidden; text-indent: -5000px; margin: 0 0 20px 8px;}
h2.slogan4 {width: 345px; height: 121px; background: url('/images/slogan4.png') 0 0 no-repeat; overflow: hidden; text-indent: -5000px; margin: 0 0 20px 8px;}
h2.slogan5 {width: 355px; height: 120px; background: url('/images/slogan5.png') 0 0 no-repeat; overflow: hidden; text-indent: -5000px; margin: 0 0 20px 8px;}
h2.slogan6 {width: 324px; height: 121px; background: url('/images/slogan6.png') 0 0 no-repeat; overflow: hidden; text-indent: -5000px; margin: 0 0 20px 8px;}
h2.why {width: 416px; height: 37px; background: url('/images/h2-why.png') 0 0 no-repeat; overflow: hidden; text-indent: -5000px; margin: 0 0 24px 0;}
h2.vlastnosti {width: 118px; height: 29px; background: url('/images/h2-vlastnosti.png') 0 0 no-repeat; overflow: hidden; text-indent: -5000px; margin: 0 0 24px 0;}
h2.reference {width: 114px; height: 29px; background: url('/images/h2-reference.png') 0 0 no-repeat; overflow: hidden; text-indent: -5000px; margin: 0 0 24px 0;}
h2.demo {width: 373px; height: 37px; background: url('/images/h2-demo.png') 0 0 no-repeat; overflow: hidden; text-indent: -5000px; margin: 0 0 24px 0;}
h2.pricelist {width: 302px; height: 37px; background: url('/images/h2-pricelist.png') 0 0 no-repeat; overflow: hidden; text-indent: -5000px; margin: 0 0 24px 0;}
h2.contact {width: 96px; height: 29px; background: url('/images/h2-contact.png') 0 0 no-repeat; overflow: hidden; text-indent: -5000px; margin: 0 0 24px 0;}

h2.chapter {color: #FFF; font-size: 20px; text-shadow: #4a4a4a 1px 1px 0;}

h4.design-fce {height: 30px; padding: 10px 10px 10px 60px; margin: 20px 0 10px 0; background: url('/images/design-fce.png') left center no-repeat;}
h4.price-fce {height: 30px; padding: 10px 10px 10px 60px; margin: 20px 0 10px 0; background: url('/images/price-fce.png') left center no-repeat;}
h4.cms-fce {height: 30px; padding: 10px 10px 10px 60px; margin: 20px 0 10px 0; background: url('/images/cms-fce.png') left center no-repeat;}
h4.seo-fce {height: 30px; padding: 10px 10px 10px 60px; margin: 20px 0 10px 0; background: url('/images/seo-fce.png') left center no-repeat;}
h4.lock-fce {height: 30px; padding: 10px 10px 10px 60px; margin: 20px 0 10px 0; background: url('/images/lock-fce.png') left center no-repeat;}
h4.media-fce {height: 30px; padding: 10px 10px 10px 60px; margin: 20px 0 10px 0; background: url('/images/media-fce.png') left center no-repeat;}
h4.eshop-fce {height: 30px; padding: 10px 10px 10px 60px; margin: 20px 0 10px 0; background: url('/images/eshop-fce.png') left center no-repeat;}
h4.real-fce {height: 30px; padding: 10px 10px 10px 60px; margin: 20px 0 10px 0; background: url('/images/real-fce.png') left center no-repeat;}

#foot {width: 100%;}
#foot .foot-in {position: relative; width: 997px; height: 267px; margin: 0 auto; padding: 25px 0 50px 0;} 
#foot .foot-in .top {float: right; height: 15px; line-height: 15px; padding-left: 20px; margin: 8px 32px 0 0; background: url('/images/top.png') 0 0 no-repeat; text-decoration: none;} 
#foot .foot-in .fblike {float: left; height: 25px; padding: 5px 0 0 10px; overflow: hidden;} 
  
#box {position: relative; width: 100%; height: 100%; overflow: hidden;}

.preview-box {position: absolute; right: 5px; top: 17px; width: 581px; height: 438px; background: url('/images/preview.png') 0 0 no-repeat;}    
.preview-box img {}    
.preview-box .info {position: absolute; width: 529px; height: 82px; left: 0px; bottom: 0px; background: url('/images/preview-info.png') 0 0 no-repeat; z-index: 10;}    
.preview-box .arrow-left {position: absolute; display: block; float: left; width: 40px; height: 82px; left: 25px; bottom: 77px; background: url('/images/arrow-left.png') right top no-repeat; z-index: 20; overflow: hidden; text-indent: 999px; z-index: 100;}  
.preview-box .arrow-left:hover {background-position: 100% -82px;}     
.preview-box .arrow-right {position: absolute; display: block; float: right; width: 40px; height: 82px; right: 25px; bottom: 77px; background: url('/images/arrow-right.png') left top no-repeat; z-index: 20; overflow: hidden; text-indent: 999px;}    
.preview-box .arrow-right:hover {background-position: 0 -82px;}     
.preview-box .text {display: block; float: left; width: 429px; height: 65px; color: #FFF; font-size: 35px; font-family: 'GraublauWebRegular'; padding: 17px 10px 0 10px; margin: 0 40px; z-index: 20; overflow: hidden;}    

.demo-button {width: 220px; height: 106px; background: url('/images/demo-button-shadow.png') 0 0 no-repeat; margin: 27px 0 0 10px;}
.demo-button a {display: block; position: relative; width: 220px; height: 53px; background: url('/images/demo-button.png') 0 0 no-repeat; overflow: hidden; text-indent: -9999px;}  
.demo-button a span.hover {display: block; position: absolute; width: 220px; height: 53px; top: 0; left: 0; background: url('/images/demo-button.png') 0 -53px no-repeat;}  
  
div.feature {float: left; width: 430px; height: 220px; margin: 0 28px 28px 28px;}
.feature p {height: 135px; color: #fff; line-height: 1.5; margin: 17px 0 0 0; padding: 0 0 0 140px; text-align: justify; text-shadow: #4a4a4a 1px 1px 0;}  
.feature h3.easystart {width: 361px; height: 37px; margin: 0; background: url('/images/h3-easystart.png') 0 0 no-repeat; overflow: hidden; text-indent: -9999px;}
.feature p.easystart {background: url('/images/easystart.png') 0 5px no-repeat;}    
.feature h3.original {width: 195px; height: 37px; margin: 0; background: url('/images/h3-original.png') 0 0 no-repeat; overflow: hidden; text-indent: -9999px;}
.feature p.original {background: url('/images/seo.png') 0 5px no-repeat;}
.feature h3.seo {width: 342px; height: 37px; margin: 0; background: url('/images/h3-seo.png') 0 0 no-repeat; overflow: hidden; text-indent: -9999px;}
.feature p.seo {background: url('/images/original.png') 0 5px no-repeat;}
.feature h3.plugins {width: 131px; height: 37px; margin: 0; background: url('/images/h3-plugins.png') 0 0 no-repeat; overflow: hidden; text-indent: -9999px;}
.feature p.plugins {background: url('/images/plugins.png') 0 5px no-repeat;}

.small-contact {float: left; width: 243px; height: 268px; margin: 0 13px 0 10px; border: 1px solid #828282; background: url('/images/none.png'); -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; behavior: url('/images/border-radius.htc');}
.small-contact h4.contact {width: 185px; height: 37px; margin: 10px 0 0 18px; background: url('/images/h4-small-contact.png') 0 0 no-repeat; overflow: hidden; text-indent: -999px;}
.small-contact h4.follow {width: 141px; height: 37px; margin: 35px 0 0 18px; background: url('/images/h4-follow.png') 0 0 no-repeat; overflow: hidden; text-indent: -999px;}
.small-contact p {line-height: 1.5; padding: 10px 18px; text-shadow: #cacaca 1px 1px 0;}    
.small-contact .facebook {float: left; display: block; width: 50px; height: 50px; background: url('/images/button-facebook.png') 50% 50% no-repeat; margin: 0 10px 0 0; overflow: hidden; text-indent: -999px;}    
.small-contact .twitter {float: left; display: block; width: 50px; height: 50px; background: url('/images/button-twitter.png') 50% 50% no-repeat; margin: 0 10px 0 0; overflow: hidden; text-indent: -999px;}    
.small-contact .rss {float: left; display: block; width: 50px; height: 50px; background: url('/images/button-rss.png') 50% 50% no-repeat; overflow: hidden; text-indent: -999px;}    
.small-contact .facebook:hover,
.small-contact .twitter:hover
.small-contact .rss:hover {opacity: 0.8;}    

.contact-form {float: left; width: 683px; height: 268px; margin: 0 10px 0 13px; background: url('/images/contact-form-bg.png') 0 0 repeat; border: 1px solid #828282; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; behavior: url('/images/border-radius.htc');}
.contact-form .cf {float: left; width: 392px; background: url('/images/cf-line.png') 100% 23px no-repeat;}
.contact-form .cf h4 {width: 146px; height: 37px; margin: 10px 0 2px 18px; background: url('/images/h4-contact-form.png') 0 0 no-repeat; overflow: hidden; text-indent: -999px;}     
.contact-form .line {margin: 6px 0 0 0;}     
.contact-form label {display: block; float: left; width: 50px; font-weight: bold; padding: 10px 0 0 18px; text-shadow: #cacaca 1px 1px 0;}     
.contact-form input {width: 268px; height: 23px; color: #FFF; font-size: 13px; margin: 0; padding: 5px 10px; background: url('/images/cf-input.png') 0 0 no-repeat; border: 0;}     
.contact-form textarea {float: left; width: 217px; height: 62px; color: #FFF; font-size: 13px; margin: 0; padding: 5px 10px; background: url('/images/cf-textarea.png') 0 0 no-repeat; border: 0;}     
.contact-form .submit {float: left; position: relative; display: block; width: 42px; height: 70px; margin: 0 0 0 8px; background: url('/images/cf-send.png') 0 0 no-repeat; border: 0; overflow: hidden; text-indent: -9999px;}     
.contact-form .submit span.hover {display: block; position: absolute; width: 42px; height: 70px; top: 0; left: 0; background: url('/images/cf-send.png') 0 -70px no-repeat;}

.contact-form .twitter {float: left; width: 291px; background: url('/images/twitter.png') 90px 22px no-repeat;}
.contact-form .twitter h4 {width: 144px; height: 37px; margin: 10px 0 55px 22px; background: url('/images/h4-twitter.png') 0 0 no-repeat; overflow: hidden; text-indent: -9999px;}         
.contact-form .twitter ul {height: 165px; padding: 0 22px; margin: 0; overflow: hidden; list-style: none;}                  
.contact-form .twitter ul li {padding: 5px 0; margin: 0; text-shadow: #cacaca 1px 1px 0; overflow: hidden; list-style: none;}                  
     
#slider .scroll {position: relative; width: 529px; height: 324px; margin: 36px 0 0 26px; z-index: 0; overflow-x: hidden; overflow-y: auto;}
#slider .scroll .panel {position: relative; width: 529px; height: 324px;}                    

ul#reference-list {float: left; width: 965px; list-style: none; margin: 0 0 10px -11px; padding: 0;}
ul#reference-list li {float: left; list-style: none; margin: 0;}
ul#reference-list a {float: left; display: block; position: relative; width: 310px; height: 206px; margin: 10px 0 0 11px; overflow: hidden; cursor: pointer; outline: none;}
ul#reference-list a img {position: absolute; left: 0; top: 0; border: none;}
ul#reference-list a .corners {display: block; position: absolute; width: 310px; height: 206px; left: 0; top: 0; background: url('images/reference-corners.png') 0 0 no-repeat; z-index: 5;}
ul#reference-list .coming {display: block; position: absolute; width: 310px; height: 206px; left: 0; top: 0; background: url('images/coming.png') 100% 0 no-repeat; z-index: 2;}
 
.col1 {float: left; margin: 0 27px 0 0;}  
.col2 {float: left; margin: 0 0 0 27px;}    

.price-feature {width: 450px; margin: 10px 0 30px 0;}
.price-feature dt {color: #FFF; font-size: 14px; font-weight: bold; font-family: 'GraublauWebRegular', 'Geneva CE', lucida, sans-serif; padding: 5px 5px 5px 25px; margin: 0 0 0 10px; background: url('/images/tick.png') left center no-repeat; text-shadow: #4a4a4a 1px 1px 0;}
.price-feature dd {color: #e1e1e1; line-height: 1.3; font-size: 13px; border-bottom: 1px dotted #FFF; padding: 0 0 9px 0; margin: 0 0 5px 35px; text-shadow: #4a4a4a 1px 1px 0;}
  
.arrows {list-style: none; margin: 20px 0; padding: 0;}
.arrows li {background: url('/images/arrow.png') left center no-repeat; list-style: none; padding-left: 20px; margin: 5px 0 0 30px;}

ul#panel-filter {float: right; list-style: none; margin: 0; padding: 0 10px 0 0;}
ul#panel-filter li {float: left; list-style: none; margin: 0 10px 0 0;}
ul#panel-filter li a.current {background: url('/images/filterbg.png') right top no-repeat;}
ul#panel-filter li a {display: block; height: 38px; letter-spacing: -1px; color: #AEAEAE; font-size: 14px; text-decoration: none;}     
ul#panel-filter li a.current span {background: url('/images/filterbgleft.png') 0 0 no-repeat;}
ul#panel-filter li a span {display: block; height: 22px; padding: 8px 12px;} 

.address {width: 953px; border-bottom: 1px dotted #FFF; padding-bottom: 20px; margin-bottom: 20px;}
.address p {font-size: 14px !important; line-height: 1.6 !important;}    

.phone {float: left; width: 250px; height: 50px; color: #fff; font-size: 14px; font-family: 'GraublauWebRegular'; text-shadow: #4a4a4a 1px 1px 0; padding: 8px 0 0 60px; background: url('/images/phone.png') left center no-repeat;}
.phone strong {font-size: 18px;} 

.mail {float: left; width: 250px; height: 50px; color: #fff; font-size: 14px; font-family: 'GraublauWebRegular'; text-shadow: #4a4a4a 1px 1px 0; padding: 8px 0 0 60px; background: url('/images/mail.png') left center no-repeat;}
.mail strong {font-size: 18px;}      

.icq {float: left; width: 250px; height: 50px; color: #fff; font-size: 14px; font-family: 'GraublauWebRegular'; text-shadow: #4a4a4a 1px 1px 0; padding: 8px 0 0 60px; background: url('/images/icq.png') left center no-repeat;}
.icq strong {font-size: 18px;}  

.contactlink {padding: 10px; margin: 35px 0 0 0 !important; background: #5e5e5e url('/images/dark-bg.png') 0 0 repeat; border: 1px solid #666; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; behavior: url('/images/border-radius.htc');}
  
.jcarousel-container {position: relative; width: 400px; height: 250px;}   
.jcarousel-clip {z-index: 2; padding: 0; margin: 0; overflow: hidden; position: relative;}
.jcarousel-list {z-index: 1; overflow: hidden; position: relative; top: 0; left: 0; margin: 0; padding: 0;}  
.jcarousel-item { float: left; list-style: none; width: 380px; height: 250px;}
div#mycarousel {width: 400px; height: 250px; overflow: hidden;}
div#mycarousel ul {display: block; float: left; height: 250px; margin: 0; padding: 0;}
div#mycarousel ul li {display: block; float: left; height: 250px; margin: 0 250px 0 0; padding: 0;}