/* 1. Global reset
----------------------------------------------------------------------------------------------*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font,
img, ins, kbd,q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot,
thead, tr, th, td { margin: 0; padding:0; border:0; outline:0; font-weight:inherit; font-style:inherit; font-size:100%; font-family: inherit; vertical-align:baseline; }

body { text-align: center; }

ol, ul { list-style: none; }

table { border-collapse: separate; border-spacing: 0;  /* tables still need 'cellspacing="0"' in the markup */ }

caption, th, td { text-align: left; font-weight: normal; }

input, textarea, select { font: 12px Arial, Helvetica, sans-serif; }

strong { font-weight: bold; }

em { font-style: italic; }

abbr, acronym { border-bottom: 1px dotted #999; cursor:help; }

hr.hide { position: absolute; left: -9999px; }

/* 2. Common
----------------------------------------------------------------------------------------------*/
.clear { clear: both; font-size: 0; height: 0; line-height: 0; overflow: hidden; }

.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }

.clearfix { display: inline-block; }

/* Hides from IE-mac \*/
* html .clearfix { height: 1%; }

.clearfix { display: block; }
/* End hide from IE-mac */

/* 2. Layout
----------------------------------------------------------------------------------------------*/
body { font-family: "Trebuchet MS", "Geneva CE", lucida, sans-serif; text-align: center; font-size: 13px; line-height: 20px; background-color: #00080d; }

#page { width: 960px; margin: 15px auto; text-align: left; position: relative; background-color: #fff; }

.decoration { position: absolute; top: 275px; left: -216px; background: url(../img/bg-homepage.png) 0 0 no-repeat; width: 216px; height: 1015px;}

#header { position: relative; height: 180px; }
.homepage #header { height: 255px; }
#header.tall { height: 290px; }

#main-content { margin: 50px;  }
.homepage #main-content { margin: 0;}
.product #main-content { margin-top: -20px; }

#content-wrapper { padding: 20px; border: 1px solid #e7ecec; position: relative; z-index: 1000; }

#footer { background-color: #00080d; color: #dddedf; padding: 15px 50px 25px 50px; font-size: 11px; line-height: 24px; border-bottom: 60px solid #0b1925; }


/* 3. Header
----------------------------------------------------------------------------------------------*/
#logo, #logo a, #logo span { position: absolute; display: block; top: 0; left: 0; height: 278px; width: 220px; }
#logo a { text-decoration: none; background: url(../img/logo.png) 0 0 no-repeat; top: 18px; left: -40px; }
#logo span { visibility: hidden; }

#main-menu { position: absolute; top: 50px; right: 50px; }
#main-menu li { float: left; text-transform: lowercase; font-size: 16px; margin-right: 15px; padding-right: 25px; background: url(../img/bg-menu-divider.png) top right no-repeat; }
#main-menu li.last-item { margin: 0; padding: 0; background: none; }
#main-menu li a { text-decoration:none; display: block; color: #5f8800; }
#main-menu li a:hover { color: #bd2056;}
#main-menu li a.active { color: #0f4749; }

#breadcrumb { position: absolute; top: 150px; left: 50px; z-index: 500; }
#breadcrumb li { color: #0c3b3d; float: left;  }
#breadcrumb li.separator { margin: 0 8px; }
#breadcrumb a { color: #5f8800; text-decoration: underline; }

#header h2 { position: absolute; top: 130px; left: 0; font-size: 36px; line-height: 54px; width: 960px; text-align: center; padding: 0 50px; }
#header h2.green { color: #648c02; }
#header h3 { position: absolute; bottom: -10px; left: -50px; font-size: 30px; line-height: 45px; width: 960px; text-align: center; padding: 0 50px; }

.popup { display: none; }
.popup .inner { position: relative; height: 480px; overflow: hidden; }
#call-me-inner h2 { margin: 0; padding: 15px 0 0 15px; }

/* 4. Main content
----------------------------------------------------------------------------------------------*/
#main-content a { color: #5f8800; }
#main-content a:hover { color: #bd2056; }
#content-wrapper .col { float: left; width: 350px; font-size: 14px; line-height: 21px; position: relative; }
#content-wrapper .col.first { margin-right: 100px; }
#content-wrapper .col h2 { font-weight: bold; font-size: 16px; line-height: 32px; margin: 15px 0 10px 0; }
#main-content ul { margin: 14px;}
#main-content li { list-style: disc; padding-left: 14px; }

/* 4.1 Homepage
----------------------------------------------------------------------------------------------*/
.homepage #header h2 { top: 170px; color: #0c3b3d; left: 50px; text-align: left; }

#services { margin: 30px 50px; }
#services .col { float: left; background-color: #FFFF99; padding-top: 65px; width: 275px; position: relative; }
#services .col.creativity { background: url(../img/ico-creativ.png) 0 0 no-repeat; margin-right: 38px; }
#services .col.apps { background: url(../img/ico-app.png) 0 0 no-repeat; margin-right: 20px; }
#services .col.ad { background: url(../img/ico-promotion.png) 0 0 no-repeat; width: 252px; }
#services .col h2 { font-size: 28px; line-height: 42px; }
#services .col li { font-size: 15px; line-height: 30px; }
#services .col a { text-decoration: none; color: #324032; }
#services .col a:hover { text-decoration: underline; }
#services .col .divider { position: absolute; bottom: -30px; right: 12px; background: url(../img/img-flower-homepage.png) 0 0 no-repeat; height: 124px; width: 26px; }
#services .col.creativity .divider { right: -9px; }
#services ul, #services li { list-style: none !important; margin: 0 !important; padding: 0 !important; }

#news-portfolio { background: url(../img/bg-news-homepage.png) 0 0 repeat; color: #c9cccf; padding: 30px 50px; border-top: 10px solid #00080d; position: relative; }
#news-portfolio h2 { color: #486a09; font-size: 20px; line-height: 30px; }
.portfolio-page { width: 540px; height: 300px; position: absolute; top: 0; left: 0; }
.portfolio-page img { border: 1px solid #434d56; padding: 15px; position: absolute; top: 0; right: 0px; }
.portfolio-page p { font-size: 16px; line-height: 24px; width: 250px; position: absolute; top: 50px; left: 0; height: 130px; background-color: #0a1723; }
#news-portfolio .col { float: left; position: relative; height: 355px; }
#news-portfolio .portfolio { width: 540px; margin-right: 70px; }
#news-portfolio .portfolio .divider { position: absolute; bottom: -30px; right: -52px; background: url(../img/bg-divider-homepage.png) 0 0 no-repeat; height: 415px; width: 50px; }
#news-portfolio .news { width: 250px; }
#news-portfolio .news p.title { font-size: 14px; line-height: 21px; margin-top: 14px; font-weight: bold; }
#news-portfolio .news p.title span { font-size: 10px; font-style: italic; }
#news-portfolio .news p.text { line-height: 18px;}
.news-decoration { position: absolute; bottom: -39px; left: -290px; background: url(../img/bg-flowers-homepage.png) 0 0 no-repeat; height: 69px; width: 216px; }

/* 4.2 Services
----------------------------------------------------------------------------------------------*/
ul#services-list, ul#portfolio-list { margin: 0; }
#services-list li, #portfolio-list li { float: left; width: 252px; margin-right: 30px; font-size: 13px; list-style: none; padding-left: 0!important; }
#services-list li.last-item, #portfolio-list li.last-item { margin-right: 0; }
#services-list li .service-item { height: 110px; margin-bottom: 30px; line-height: 24px; }
#services-list li .service-item h2 { font-size: 14px; color: #648c02; font-weight: bold; }

/* 4.3 Webdesign
----------------------------------------------------------------------------------------------*/
.webdesign-img { position: absolute; display: block; background: url(../img/img-webdesign.png) 0 0 no-repeat; width: 263px; height: 131px; bottom: 30px; right: 50px; }
.webdesign #header h2 { top: 150px; font-size: 40px; left: -50px; }

/* 4.4 Corporate Identity
----------------------------------------------------------------------------------------------*/
.ci #header h3 { width: 860px; margin-left: 50px; font-size: 20px; line-height: 30px; }
.ci-img { background: url(../img/img-ci.png) 0 0 no-repeat; position: absolute; bottom: -21px; right: -38px; width: 389px; height: 205px; }
.ci #content-wrapper .col { height: 780px; }
.ci li strong { font-weight: bold; font-size: 14px; }
.ci #header h2 { left: 108px; }

/* 4.5 CMS
----------------------------------------------------------------------------------------------*/
.cms-img { background: url(../img/img-cms.png) 0 0 no-repeat; position: absolute; bottom: 50px; right: 45px; width: 219px; height: 148px; }
.cms #header h3 { width: 860px; margin-left: 50px; font-size: 20px; line-height: 30px; }
.cms #header h2 { left: -50px; }

/* 4.6 Eshop
----------------------------------------------------------------------------------------------*/
.eshop-img { background: url(../img/img-eshop.png) 0 0 no-repeat; position: absolute; bottom: -400px; left: 0px; width: 409px; height: 372px; }
.eshop #header h3 { width: 860px; margin-left: 50px; font-size: 20px; line-height: 30px; }

/* 4.7 SEO
----------------------------------------------------------------------------------------------*/
.seo-img { background: url(../img/img-seo.png) 0 0 no-repeat; position: absolute; bottom: -342px; right: -38px; width: 234px; height: 196px; }
.seo #header h3 { width: 860px; margin-left: 50px; font-size: 20px; line-height: 30px; }

/* 4.8 PPC
----------------------------------------------------------------------------------------------*/
.ppc-img { background: url(../img/img-ppc.png) 0 0 no-repeat; position: absolute; bottom: -20px; right: -38px; width: 357px; height: 258px; }
.ppc #content-wrapper .col { height: 750px; }

/* 4.9 Development
----------------------------------------------------------------------------------------------*/
.develop-img { background: url(../img/img-development.png) 0 0 no-repeat; position: absolute; bottom: -295px; right: -38px; width: 283px; height: 230px; }
.develop #header h2 { left: 105px; }

/* 4.10 Apps
----------------------------------------------------------------------------------------------*/
.apps-img { background: url(../img/img-apps.png) 0 0 no-repeat; position: absolute; top: 0; right: -38px; width: 386px; height: 239px; }
.apps #header h2 { left: 120px; }
.apps .col.second{ padding-top: 300px; }

/* 4.11 Portfolio
----------------------------------------------------------------------------------------------*/
#portfolio-list .portfolio-item { margin-bottom: 30px; }
#portfolio-list .portfolio-item img { border: 1px solid #ced8d8; padding: 2px 4px;}
#portfolio-list .portfolio-item a { text-decoration: none; color: #0c3b3d; }

/* 4.12 About
----------------------------------------------------------------------------------------------*/
.about #header h3 { width: 860px; margin-left: 50px; font-size: 20px; line-height: 30px; }
.about #content-wrapper .services li { line-height: 26px; }

/* 4.13 Contact
----------------------------------------------------------------------------------------------*/
.contact #content-wrapper .col { width: 220px; }
.contact #content-wrapper .col.first { width: 500px; margin-right: 80px; }
.contact #content-wrapper .col#map { width: 800px; margin-top: 20px; }
#contact-form label { display: block; font-weight: bold; }
#contact-form fieldset{ background-color: #F8F8F8; padding: 20px; font-size: 13px; border: 1px solid #E9E9E9; }
#contact-form input { padding: 2px 3px; width: 200px; }
#contact-form p.submit { float: right; margin-right: 5px; }
#contact-form p.mandatory { font-size: 11px; margin-top: 20px; }
#contact-form p.submit input { width: auto; margin-top: 20px; background-color: #648c02; font-weight: bold; padding: 3px 10px; border: none; color: #fff; }
#contact-form p { float: left; margin-bottom: 20px; }
#contact-form p.first { padding-right: 40px; }
#contact-form label.error { color: #CC3300; }

p.alert { border: 1px solid #CC0000; background-color: #E20325; color: #fff; font-weight: bold; padding: 6px 10px; margin: 5px 0 10px 0;}
p.ok { border: 1px solid #003300; background-color: #009933; color: #fff; font-weight: bold; padding: 6px 10px; margin: 5px 0 10px 0;}

/* 4.14 Products
----------------------------------------------------------------------------------------------*/
.product #header h2 { width: 860px; padding-top: 60px; font-size: 30px; text-align: left; }
.product #content-wrapper h2 {
	color: #5f8800;
	margin-top: 0;	
}
.product #content-wrapper .col {
	width: 380px!important;
}
.product #content-wrapper .col.first {
	width: 320px!important;
}
#screenshots {
	margin: 0 0 20px 0!important;
	padding: 0;
	position: relative;
	right: -20px;	
}
#screenshots li {
	list-style: none!important;
	padding: 0;
	position: relative;
	float: left;
	margin: 0 20px 20px 0;
}
#screenshots li.last {
	margin-right: 0;	
}
#screenshots li img {
	display: block;
}
#screenshots li a {
	display: block;
	position: relative;
	z-index: 3;
}
#screenshots li span {
	background: url(../img/img_screen_frame.png) 0 0 no-repeat;
	display: block;
	height: 161px;
	width: 177px;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
}
.product .fb-like {
	position: absolute;
	top: -80px;
	right: -60px;	
}
.call-to-action {
	margin: 60px 30px 20px 30px;	
}
.col.first .call-to-action {
	margin-right: -10px;	
}

.call-to-action a {
	color: #fff!important;
	font-size: 14px;
	font-weight: bold;
	display: block;
	padding: 5px 15px;
	background-color: #5f8800;
	border: 1px solid #5f8800;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	width: 13em;
	text-align: center;
	margin-top: 20px;
}
.product #content-wrapper h3.contact {
	margin: 30px 0 0 0;
	color: #00080d;
	font-size: 18px;
	line-height: 1.5em;
	text-align: center;	
}
.product #content-wrapper h3.contact a {
	color: #00080d;
}

.popup-inner {
	padding: 15px;
	font-size: 14px;
}
.popup-inner h2 {
	color: #00080d;
	font-size: 20px;
	margin-bottom: 20px;
}
.popup-inner input.submit {
	color: #fff!important;
	font-size: 14px;
	font-weight: bold;
	display: block;
	padding: 10px 25px;
	background-color: #5f8800;
	border: 1px solid #5f8800;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	text-align: center;
	margin-top: 10px;
}
.popup-inner .text {
	margin: 10px 25px 10px 0;
	padding: 5px 10px;
	width: 200px;
	display: block;
}
.popup-inner label {
	display: block;
	font-weight: bold;
}

#screenshots.products-list {
	padding: 30px 0 30px 50px!important;
}
#screenshots.products-list li {
	margin-right: 70px;
	text-align: center;
	font-size: 20px;
}

#screenshots.products-list img {
	margin-bottom: 30px;
}

/* 5. Footer
----------------------------------------------------------------------------------------------*/
#footer a { color: #dddedf; text-decoration: none; }
#footer a:hover { text-decoration: underline; }
#footer h3 { color: #496905; font-size: 14px; line-height: 21px; margin-bottom: 3px; }
#footer .col { float: left; width: 280px; position: relative; }
#footer .col.desc { margin-right: 60px; }
#footer .col.desc p { padding-right: 100px; }
#footer .col.contact { width: 180px; }
#footer .col.services { margin-right: 60px;}
#footer p.copyright { position: absolute; bottom: 20px; left: 0; width: 960px; text-align: center; }
#footer .col .flower { position: absolute; background: url(../img/img-flower-homepage.png) 0 0 no-repeat; height: 121px; width: 23px; top: 142px; right: 0px; }
#footer .col.desc .flower { right: 60px; }
#footer .leaves { position: absolute; background: url(../img/bg-leaves-footer.png) 0 0 no-repeat; height: 162px; width: 82px; top: 10px; right: 5px;}