@import url("reset.css");

/*Structure
*******************************************************************************************************************************/
body,html{height:100%;background:#fff url(../style/images/body_bg.png) no-repeat 50% 0}
#container{width:880px;min-height:100%;height:auto !important;height:100%;padding:0 0 0 82px;margin:0 auto;text-align:left;position:relative;z-index:10}

.hidden-img{width:1px;height:1px;overflow:hidden;position:absolute;bottom:0;right:0;z-index:-10;font-size:1px}

/*Frame*/
.pp{width:416px;margin:0 0 0 -183px;position:absolute;left:50%;z-index:100}
	.pp-wrap{width:100%;padding:54px 0 0;position:relative;overflow:hidden}
		.pp-crn{background:url(../style/images/frame.png) no-repeat;position:absolute;left:-54px;z-index:-1}
		.pp-tl{width:100%;height:500px;top:-54px}
		.pp-tr{width:54px;height:500px;margin-left:100%;top:-54px}
		.pp-bl{width:100%;height:54px;left:-54px;clip:rect(auto auto auto 54px)}
		.pp-br{width:54px;height:54px;margin-left:100%;left:-54px}

/*Form*/
.form{padding:0 46px 0;margin:-10px 0 -20px 0;position:relative}
	.form .close, .form .close-hover{width:32px;height:32px;background:url(../style/images/close.png) no-repeat 10px 10px;right:41px;top:-12px;cursor:pointer}
	.form .close{opacity:0.2;-moz-opacity:0.2;filter:alpha(opacity=20)}
	.form .close-hover{opacity:0.9;-moz-opacity:0.9;filter:alpha(opacity=90)}
	.form h2{padding:0 0 19px;color:#aaa}
		.form ul li{padding:0 0 20px;position:relative}
		.form ul li.success{padding-bottom:30px}
			.form .name, .form .mail, .form .form-text{width:310px;padding:3px 4px 3px 7px;border:1px solid #abadb3}
			.form .name, .form .mail{height:18px;line-height:16px}
			.form .form-text{height:160px}
			.form .button .dispatch{padding:3px 5px;cursor:pointer}

/*Top
*******************************************************************************************************************************/
.top{padding:0 0 54px 0;position:relative}

/*Logo*/
.logo{padding:36px 0 0 0;margin:0 -15% 0 0;float:left;position:relative}

/*Work*/
.work{width:120px;height:50px;position:absolute;top:36px;left:321px;line-height:16px;color:#6b6b6b}
	.work strong{padding:0 0 4px;display:block}
		.work a{text-transform:uppercase;letter-spacing:1px;color:#cc0000}
		.work a:hover{color:#ff0000}

/*Navigation*/
.navigation{width:404px;padding:36px 0 0 0;float:right;position:relative;overflow:hidden;zoom:1;line-height:16px;font-weight:bold;text-align:right;letter-spacing:1px;text-transform:uppercase;white-space:nowrap}

/*Main-navigation*/
.main-navigation{padding:0 0 18px;margin-right:-15%;float:left;position:relative;overflow:hidden;zoom:1}
	.main-navigation li, .sub-navigation li{padding:0 25px 0 0;float:left;position:relative}

/*Sub-navigation*/
.sub-navigation{padding:12px 0 0;border-top:1px solid #dfdfdf;overflow:hidden;zoom:1;clear:both;font-size:11px}

/*Middle
*******************************************************************************************************************************/
.middle{padding:0 0 120px 0;position:relative;z-index:12}
h1{padding:0 0 42px;font-size:28px;text-transform:uppercase;letter-spacing:1px;line-height:32px}
h2{font-size:16px;font-weight:normal;text-transform:uppercase;letter-spacing:1px}

/*Colum*/
.column{padding:10px 0 57px 0;overflow:hidden;zoom:1}
	.column h2{padding:0 0 22px}
	.column li{width:220px;padding:0 20px 0 0;float:left;position:relative}
	.column p{line-height:18px}

/*Project*/
.projects{width:350px;padding:0 0 0 160px;float:left;position:relative}
	.projects .title{width:160px;margin:0 -160px 0 0;float:left;position:relative;left:-160px;line-height:22px;color:#aaa}
	.projects .description{width:350px;float:right;position:relative;font-size:13px;line-height:16px}
		.projects .description ul{padding:2px 0 0}
			.projects .description li{padding:0 0 12px}

/*Feedback*/
	.feedback-form{font-weight:bold;border-bottom:1px dotted #0089d1;text-decoration:none;line-height:24px}
		.feedback-form:hover{border-bottom:1px dotted #000;text-decoration:none}

/*Text-editor*/
.text-editor{line-height:18px}
	.text-editor h2{padding:0 0 18px}
	.text-editor h5,.right-text h5{padding:0 0 10px;font-size:13px;font-weight:bold}
	.text-editor p{padding:0 0 18px 0}
	.text-editor ul,.right-text ul{padding:0 0 12px;margin:0 0 0 -20px}
		.text-editor ul li,.right-text ul li{padding:0 0 11px 20px;background:url(../style/images/marker.gif) no-repeat 0 9px}

/*About-us*/
.wrp-about-us{width:500px;padding:0 0 0 83px;float:left}
	.about-us-left, .about-us-right{width:209px;position:relative}
	.about-us-left{padding:0 31px 0 0;float:left}
	.about-us-right{padding:0 51px 0 0;float:right}

/*Contacts*/
.contacts .side-col{width:190px;padding:4px 40px 0 0;margin-right:-100%;float:left;position:relative;line-height:16px;z-index:12}
	.contacts .side-col p{padding:0 0 8px 0;line-height:18px}
	.contacts .side-col .feedback-form{line-height:17px}
.contacts .long-col{width:640px;padding:6px 0 0;margin-left:240px;position:relative;overflow:hidden;zoom:1}

/*Progress*/
.progress{width:480px;float:left;position:relative}
	.progress dl{width:480px;padding:0 0 28px 80px;position:relative;font-size:13px;line-height:14px}
		.progress dt{width:80px;position:absolute;left:0;top:0;font-size:16px;color:#aaa}
		.progress dd{padding:0 0 14px}
			.progress dd em{line-height:17px}
			.progress dd small{padding:5px 0 0;display:block;font-size:12px;color:#aaa}

/*Right-text*/
.right-text{width:217px;padding:0 24px 0 0;float:right;position:relative}
	.right-text h2{padding:0 0 15px 0;line-height:18px;color:#aaa}
	.right-text h5{padding:7px 0 15px}
	.right-text p{padding:0 0 8px 0;line-height:18px}
	.right-text ul{margin-bottom:-5px;position:relative}
		.right-text ul li{padding-bottom:17px;background-position:0 7px}

/*Lists and Answers*/
.lists{width:410px;padding:0 0 0 83px;float:left;position:relative}
	.lists .p-b{padding:0 0 60px}
	.answers p{padding:0 0 25px 0}

.job{padding:0 0 20px}

/*Bottom
*******************************************************************************************************************************/
.bottom{width:880px;height:100px;margin:-100px auto 0;padding:0 0 0 82px;position:relative;color:#aaa;z-index:11;letter-spacing:1px;text-transform:uppercase}
	.bottom a{color:#aaa}
	.company,.twitter,.facebook,.facebook-like-btn{display:block;float:left;position:relative;zoom:1}
	.company{width:183px;padding:0 140px 0 0;line-height:22px}
		.company .copyright{height:26px;margin:0 0 5px;display:-moz-inline-stack;display:inline-block;position:relative;border-bottom:1px solid #dfdfdf}
			.company .copyright i{width:14px;height:26px;position:absolute;right:100%;top:0;font-style:normal}
	.twitter{padding:5px 160px 0 0}
		.twitter a{letter-spacing:normal}
	.facebook{padding:5px 0 0}
	.facebook-like-btn{padding:0 0 0 15px;margin-right:-15%}
		.fb-like{width:15px;padding:10px;background:#fff url(../style/images/fb.gif) no-repeat;position:absolute;top:-6px;right:78px;z-index:9999;font-size:11px;color:#000;text-align:right}

/*Default
*******************************************************************************************************************************/
.float-left{float:left}
.float-right{float:right}
.dnone{display:none}
.icon{display:block;position:absolute;overflow:hidden;font-size:1px;line-height:normal}
a .icon{cursor:pointer}
.dotted-link a,.dotted-link a:hover,.dotted-link,.dotted-link:hover{text-decoration:none;border-bottom:1px dotted}

/*Corners*/
.crn{display:block;position:absolute;overflow:hidden;font-size:1px}

.c-tl{top:0;left:0;background-position:0 0}
.c-tr{top:0;right:0;background-position:100% 0 !important}
.c-bl{bottom:0;left:0;background-position:0 100% !important}
.c-br{bottom:0;right:0;background-position:100% 100% !important}

.c-tl-brd{top:-1px;left:-1px;background-position:0 0}
.c-tr-brd{top:-1px;right:-1px;background-position:100% 0 !important}
.c-bl-brd{bottom:-1px;left:-1px;background-position:0 100% !important}
.c-br-brd{bottom:-1px;right:-1px;background-position:100% 100% !important}

/*Typography
*******************************************************************************************************************************/
body,input,textarea,option,select{font-size:12px;color:#000;font-family:Helvetica,Arial,Verdana,Tahoma,Sans-serif}
a{color:#0089d1;text-decoration:underline}
a:hover{color:#000;text-decoration:underline}

/*Font sizes*/
.f11{font-size:11px}
.f12{font-size:12px}
.f13{font-size:13px}
.f14{font-size:14px}
.f15{font-size:15px}