@charset "utf-8";

/* html tags */
html {height: 100%;}
body {background: url("../img/body-bg.png") top left repeat-x; text-align: center; height: 100%;}

h1 {background: url("../img/webcoders.eu-logo.png") no-repeat center; text-indent: -8000px; width: 300px; height: 40px; margin: 0;}

input[type="submit"].short {background: transparent url("../img/btn-short-go.png") no-repeat scroll 0 0; color:#ffffff;	border:none; width:96px; height: 30px; font-size: 12px; cursor:pointer;}
input[type="submit"].short:hover {background: transparent url("../img/btn-short-go.png") no-repeat scroll -96px 0;}
	
p.intro {padding-bottom:0.85em; color: #000; }
span.intro {padding-bottom: 0.5em; margin-bottom: 0.5em; display: table; font-size: 1.1em;}

p.success {background: url(../img/check-trans.png) 5px 2px no-repeat; padding: 16px 0 16px 60px;}
p.author {font-style:italic;color:#666;text-align:right;}

a.more, a.btn-medium {background: url("../img/btn-medium-submit.png") no-repeat; border: none; display: block; height: 30px; width: 126px; color: #fff; text-decoration: none; font-size: 12px; line-height: 12px; text-align: center; padding-top: 7px;}
a.btn-medium:hover {background: url("../img/btn-medium-submit.png") -126px 0 no-repeat;}

a.go, a.btn-large {background: url("../img/btn-large-go.png") no-repeat; border: none; display: block; height: 30px; width: 166px; color: #fff; text-decoration: none; font-size: 12px; line-height: 12px; text-align: center; padding-top: 7px;}
a.btn-large:hover {background: url("../img/btn-large-go.png") -166px 0 no-repeat;}

input.more-medium {background: url("../img/btn-medium-submit.png") no-repeat;}
input.cancel-medium {background: url("../img/btn-medium-submit.png") no-repeat;}


/* layout */
#container {width: 980px; margin: 0 auto -44px; text-align: left;	min-height: 100%; height: auto !important; height: 100%;}

#header {height: 66px;margin: 0 8px; padding-top: 10px;}
#header-logo-wrap {float: left;width: 262px; position: relative;}
#header-logo-wrap .slogan {position: absolute; top: 0; left: 0; display: block; width: 238px; padding: 40px 22px 0 0px; height: 16px; color: #000; text-decoration: none; font-size: 11px; text-align: right;}
#header-menu-wrap {float: right; margin-top: 17px;}	

#top {margin-bottom:1em; background: url("../img/top-bg.png") no-repeat; overflow: hidden;}
#top-tools {height: 165px; padding-left: 8px; float: left;}
#top-nav {height: 133px; margin-top: 10px; background: url("../img/top-nav-bg.png") no-repeat bottom left; font-size:0.9em;color:#d2e7fe;line-height: 1.5em; overflow: hidden;}
#top-nav.off {height: 33px;}


#content {margin: 0 8px 30px 8px; overflow: hidden;}
#column-left {float: left;}
#column-right {float: right;}
#column-right.border {border-left: 1px solid #F0F0F0; padding-left: 12px;}

#container-helper {height: 44px;}
#bottom {width: 980px; height: 44px; background: url("../img/bottom-bg.png") bottom no-repeat; margin: 0 auto; text-align: left;}
#footer {padding: 15px 10px 0px 10px; color: #d2e7fe; font-size: 0.9em;}


/* elements */

#mainmenu {}
#mainmenu li {float: left; padding: 0px 0px; margin: 0 15px;}
#mainmenu li a {display: block; padding: 5px 8px; text-decoration: none; color: #2f2f2f; font-size: 1.1em;}
#mainmenu li a:hover {border-bottom: 1px solid #e43117;}
#mainmenu li.active a {text-decoration: none; color: #000000;}

#top-nav {}
#top-nav.off {cursor: pointer;}
#top-nav h3 {color: #94b7de; font-size: 1.4em; margin-bottom: 14px;}
#top-nav li {}
#top-nav a {color:#d2e7fe; text-decoration: none; padding-bottom: 1px; border-bottom: 1px dotted #94b7de;}
#top-nav a:hover {border-bottom: 1px dotted #e43117;}
#top-nav div.first {padding-left: 10px;}
#top-nav div.special {color: #2c2c2c;}
#top-nav div.special h3 {color: #e43117;}
#top-nav div.special dl {margin-bottom: 2px;}
#top-nav div.special dt {width: 80px; float: left; font-weight: normal; text-align: right; margin-right: 8px; padding: 1px 0 5px;}
#top-nav div.special dd {font-size: 16px; padding-bottom: 6px;}
#top-nav div.special p {margin-left: 78px;}
#top-nav .pointer {color: #94b7de;}


#top-login-wrap {background: url("../img/form-login-bg.png") 0px 40px no-repeat; position: relative; padding-top: 16px; width: 292px; height: 109px;}
#top-login-wrap h6 {font-size: 13px; font-weight: normal; margin-bottom: 5px; color: #000;}
	#form-login-id {position: absolute; top: 44px; left: 5px; width: 150px; border: none; background: none;}
	#form-login-password {position: absolute; top: 74px; left: 5px; width: 150px; border: none; background: none;}
	#form-login-submit {position: absolute; font-size: 12px; top: 70px; left: 173px; height: 24px; width: 78px; cursor:pointer; text-transform: uppercase; background: none; border: none; color: #000;}


#top-search-wrap {position: relative; width: 292px; height: 32px; margin-top: 10px;}
#top-search-wrap div.left {float: left;}
#top-search-wrap div.right {float: right;}
	span.top-nav-switch {display: block; width: 40px; height: 15px;}
	span.top-nav-switch a {color: #D2E7FE; font-size: 10px; text-decoration: none; display: none; text-indent: -999px;}
	span.top-nav-switch a.active {display: inherit;}
	#top-nav-switch-off {background: url("../img/btn-up.png") 0px 0px no-repeat; width: 40px; height: 15px;}
	#top-nav-switch-on {background: url("../img/btn-down.png") 0px 0px no-repeat; width: 40px; height: 15px;}
	
	span.top-nav-offer-switch {display: block; width: 80px; height: 15px;}
	#top-nav-offer-switch-prev {display:block; width:40px; height:15px;float:left; font-size: 0px;}
	#top-nav-offer-switch-next {display:block; width:40px; height:15px;float:left; font-size: 0px;}
	
#top-poster-container { width: 671px; height: 158px; margin-right: 8px; position: relative; float: right; overflow: hidden; background-color: transparent;}
	#top-offer-switch-wrap {background:url("../img/btn-switch.png") no-repeat; position: absolute; bottom: 8px; left: 9px; z-index: 100;}
#top-poster-wrap {z-index: 90;}
	#top-poster-wrap .top-poster {padding: 20px 40px 0px 16px; height:138px; width:615px; font-size: 0.95em; background-color: transparent;}
	#top-poster-wrap .top-poster p {margin-bottom: 0.3em;}
	#top-poster-wrap .top-poster h3 {color: #e43117; font-size: 1.2em;}
	#top-poster-wrap .top-poster a.more {position: absolute; bottom: 6px; right: 16px;}

#column-right {}
#column-right .box h4 {font-size:1.3em;margin-bottom:0.75em;padding-bottom:0.75em;border-bottom:1px solid #ced5df;}

#footer p {margin: 0;}

div.portfolio {}
	.portfolio ul.portfolio-list {margin-left: 0; margin-right: 0;}
	.portfolio ul.portfolio-list li {clear: left; height: 150px; padding: 16px; border-top: 1px dotted #ced5df;}
	.portfolio ul.portfolio-list li:first-child {border: none;}
	.portfolio ul.portfolio-list li.even {}
	.portfolio ul.portfolio-list .url {color: #0c2a4c; font-size: 0.85em;}
	.portfolio ul.portfolio-list a.screen {display: block; float: left; width: 90px; margin-right: 8px; margin-bottom: 8px;}
	
	
div.contact {}
	.contact .form-wrap-helper {background: #E4E8F0 url("../img/corners-bg.png") -475px bottom no-repeat;}
	.contact .form-wrap {background: transparent url("../img/corners-bg.png") 0px 0px no-repeat; padding:16px;}
	.contact .form-wrap h3 {border-bottom: 1px solid #ced5df; padding-bottom: 0.5em; margin-bottom: 1em;}
	#form-contact {}
	#form-contact input.text {width: 264px; padding: 2px 4px; border: 1px solid #ced5df; }
	#form-contact div.row {margin-bottom: 1.5em}
	#form-contact span.required {font-size: 0.8em; color: #585d65; font-weight: normal;}
	#form-contact div.label {width: 150px; margin-right: 12px; float: left; text-align: right; font-weight: bold;}
	#form-contact div.input {}
	#form-contact div.buttons {text-align: right;}
	
		#form-contact-text {height: 120px; width: 264px; padding: 2px 4px; border: 1px solid #ced5df;}
		#form-contact-cancel-btn {display: none;}
		
		
div.offer {}
	.offer ul {}
	.offer ul li {list-style-type: disc; margin-bottom: 0.5em; line-height: 1.5em;}
	.offer p.buttons {margin: 0; margin-right: 16px; float: right;}
	
	.offer ul.portfolio-list {list-style-type: none;}
	.offer ul.portfolio-list li {text-align: center; list-style-type: none;}
	
	
#customers-logos {margin-left: 20px;}
	#customers-logos ul {list-style: none; width:200px;	margin: 0; padding: 0; position:relative;}
	#customers-logos li {display:inline; float:left;}
	#customers-logos li img {height: 150px; width: 200px;}
	#customers-logos a {display: none;}