/* подключаем ластик */

@import url(reset.css);

body {	
	background: #000000;
	font: 11px Tahoma;
	color: #5c5c5c;
}
a {	
	cursor: pointer;
	color: #136793;
}

/* оболочка */

#canvas-container {
	position: relative;
	width: 100%;
	min-width: 980px;
	min-height: 100%;
	overflow: hidden;
}
	#canvas {
		background: #cdcdcd url(/images/design/header-bg.jpg) -148px 0 no-repeat;
		width: 904px;
		min-height: 800px;
		margin: 0 auto;
		position: relative;
		z-index: 1;
	}
		#canvas-left {
			background: url(/images/design/header-bg.jpg) 0 0 no-repeat;
			position: absolute;
			z-index: 2;
			top: 0;
			left: -148px;
			width: 148px;
			height: 463px;
			overflow: hidden;
		}
		#canvas-right {
			background: url(/images/design/header-bg.jpg) -1052px 0 no-repeat;
			position: absolute;
			z-index: 2;
			top: 0;
			right: -148px;
			width: 148px;
			height: 463px;
			overflow: hidden;
		}

/* контактные кнопки */

#contacts {
	background: url(/images/design/contacts-bg.jpg) 0 0 no-repeat;
	margin: 0 0 0 289px;
	width: 221px;
	height: 77px;
	padding: 6px 0 0 104px;
}
	#contacts li {
		overflow: hidden;
		display: block;
		float: left;
	}
	#contacts li#contacts-icq,
	#contacts li#contacts-fl,
	#contacts li#contacts-icq a,
	#contacts li#contacts-fl a {
		width: 43px;
		height: 43px;
	}
	#contacts li#contacts-email {
		padding: 5px 0 0 0;
	}
	#contacts li#contacts-email,
	#contacts li#contacts-email a {
		width: 31px;
		height: 34px;
	}
		#contacts li a {
			text-indent: -999px;
			text-decoration: none;
			overflow: hidden;
			display: block;
		}
		#contacts li#contacts-icq a {
			background: url(/images/design/contacts.jpg) 0 0 no-repeat;
		}
		#contacts li#contacts-email a {
			background: url(/images/design/contacts.jpg) -43px 0 no-repeat;
		}
		#contacts li#contacts-fl a {
			background: url(/images/design/contacts.jpg) -74px 0 no-repeat;
		}
		#contacts li#contacts-icq a:hover {
			background-position: 0 -43px;
		}
		#contacts li#contacts-email a:hover {
			background-position: -43px -34px;
		}
		#contacts li#contacts-fl a:hover {
			background-position: -74px -43px;
		}

#logo {
	display: block;
	margin: 90px auto 0 auto;
	width: 200px;
	height: 40px;
	overflow: hidden;
	text-indent: -999px;
	text-decoration: none;
}

/* меню */

#menu {
	display: block;
	margin: 52px 0 0 204px;
	width: 539px;
	height: 14px;
	overflow: hidden;
}
	#menu li {
		padding: 0 31px 0 0;
		display: block;
		float: left;
		height: 14px;
	}
	#menu li#menu-services {
		width: 37px;
	}
	#menu li#menu-portfolio {
		width: 66px;
	}
	#menu li#menu-calculator {
		width: 140px;
	}
	#menu li#menu-brif {
		width: 66px;
	}
	#menu li#menu-contacts {
		padding: 0 0 0 0;
		width: 61px;
	}
		#menu li a {
			display: block;
			width: 100%;
			height: 100%;
			text-indent: -999px;
			text-decoration: none;
		}
		#menu li#menu-services a {
			background: url(/images/design/menu.png) 0 0 no-repeat;
		}
		#menu li#menu-portfolio a {
			background: url(/images/design/menu.png) -68px 0 no-repeat;
		}
		#menu li#menu-calculator a {
			background: url(/images/design/menu.png) -165px 0 no-repeat;
		}
		#menu li#menu-brif a {
			background: url(/images/design/menu.png) -336px 0 no-repeat;
		}
		#menu li#menu-contacts a {
			background: url(/images/design/menu.png) -433px 0 no-repeat;
		}
		#menu li#menu-services a:hover,
		#menu li#menu-services.active a {background-position: 0 -16px;}
		#menu li#menu-portfolio a:hover,
		#menu li#menu-portfolio.active a {background-position: -68px -16px;}
		#menu li#menu-calculator a:hover,
		#menu li#menu-calculator.active a {background-position: -165px -16px;}
		#menu li#menu-brif a:hover,
		#menu li#menu-brif.active a {background-position: -336px -16px;}
		#menu li#menu-contacts a:hover,
		#menu li#menu-contacts.active a {background-position: -433px -16px;}
		
		#menu li#menu-services a:active {background-position: 0 -15px;}
		#menu li#menu-portfolio a:active {background-position: -68px -15px;}
		#menu li#menu-calculator a:active {background-position: -165px -15px;}
		#menu li#menu-brif a:active {background-position: -336px -15px;}
		#menu li#menu-contacts a:active {background-position: -433px -15px;}
		
/* основной контент */

#main {
	display: block;
	padding: 40px 0 0 0;
	margin: 0 auto;
	width: 740px;
}	
	#main-works {
		background: url(/images/design/devider.gif) 29px 0 no-repeat;
		padding: 40px 0 0 0;
		margin: 0 0 0 -29px;
		position: relative;
		overflow: hidden;
	}
		#main-works h1 {
			background: url(/images/design/h1-new.gif) 50% 8px no-repeat;
			display: block;
			position: relative;
			height: 40px;
			padding: 0 0 30px 0;
			margin: 0 0 0 29px;
			text-indent: -999px;
		}
		#main-works h1 a {
			background: #679418;
			position: absolute;
			top: 0;
			right: -42px;
			display: block;
			width: 100px;
			text-align: center;
			height: 28px;
			padding: 12px 0 0 0;
			text-indent: 0;
			font-weight: normal;
			color: #dfffa6;
		}
		.porfolio .work {
			display: block;
			position: relative;
			float: left;
			width: 227px;
			overflow: hidden;
			text-align: center;
			padding: 0 0 20px 29px;
		}
			.porfolio .work img {
				display: block;
				width: 227px;
				height: 118px;
				padding: 0 0 10px 0;
			}
			.porfolio .work-tools {
				background: url(/images/design/work-wrapper.png) 0 0 no-repeat;
				position: absolute;
				z-index: 5;
				top: 0;
				left: 29px;
				width: 45px;
				text-align: left;
				height: 93px;
				padding: 25px 0 0 182px;
			}
			.porfolio .work-canvas {
				background: url(/images/design/work-tools.png) 0 0 no-repeat;
				position: absolute;
				z-index: 4;
				top: 0;
				right: 0;
				width: 1px;
				height: 118px;
				overflow: hidden;
			}
			.porfolio .work-tools a {
				height: 16px;
				width: 16px;
				text-indent: -999px;
				text-decoration: none;
				margin: 0 0 10px 0;
				padding: 0 0 0 0;
				background: none;
				display: none;
				overflow: hidden;
			}
			.porfolio .work-tools a.work-psd {
				background: url(/images/design/work-tool-psd.png) 0 -16px no-repeat;
			}
			.porfolio .work-tools a.work-html {
				background: url(/images/design/work-tool-html.png) 0 -16px no-repeat;
			}
			.porfolio .work-tools a.work-web {
				background: url(/images/design/work-tool-web.png) 0 -16px no-repeat;
			}
			.porfolio .work-tools a:hover {
				background-position: 0 0;
			}
		
#cleaner {
	width: 100%;
	height: 170px;
	clear: both;
	overflow: hidden;
}
#footer {
	background: #000000 url(/images/design/footer-bg.jpg) 0 0 no-repeat;
	width: 930px;
	height: 170px;
	position: absolute;
	z-index: 3;
	bottom: 0;
	left: -13px;
}
#footer div {
	width: 1px;
	height: 1px;
	overflow: hidden;
}
#hint {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 101;
	display: none;
}
#hint div  {
	color: #dfdfdf;
	line-height: 14px;
	position: relative;
	text-align: center;
}
#hint div div {
	background: #151515;
	padding: 12px 20px;
	position: relative;
	text-align: center;
	border: none;
	max-width: 300px;
}
#hint div span {
	background: url(/images/design/hint-icon.gif) 0 0 no-repeat;
	display: block;
	width: 13px;
	height: 13px;
	position: absolute;
	margin: 0 0 0 -6px;
	bottom: -7px;
	left: 50%;
	overflow: hidden;
}

#main-portfolio {
	padding: 0 0 0 0;
	margin: 0 0 0 -29px;
	position: relative;
	overflow: hidden;
}
	#main-portfolio h1 {
		background: url(/images/design/h1-portfolio.gif) 50% 8px no-repeat;
		display: block;
		position: relative;
		height: 40px;
		padding: 0 0 30px 0;
		margin: 0 0 0 29px;
		text-indent: -999px;
	}

#paginator {
	text-align: center;
	padding: 20px 0;
}

	#main-page-services h1 {
		background: url(/images/design/h1-services.gif) 50% 8px no-repeat;
		display: block;
		position: relative;
		height: 40px;
		padding: 0 0 30px 0;
		margin: 0 0 0 0;
		text-indent: -999px;
	}
	#main-calculator h1 {
		background: url(/images/design/h1-price.gif) 50% 8px no-repeat;
		display: block;
		position: relative;
		height: 40px;
		padding: 0 0 30px 0;
		margin: 0 0 0 0;
		text-indent: -999px;
	}
	#main-page-contacts h1 {
		background: url(/images/design/h1-contacts.gif) 50% 8px no-repeat;
		display: block;
		position: relative;
		height: 40px;
		padding: 0 0 30px 0;
		margin: 0 0 0 0;
		text-indent: -999px;
	}
	#main-page-rules h1 {
		background: url(/images/design/h1-rules.gif) 50% 8px no-repeat;
		display: block;
		position: relative;
		height: 40px;
		padding: 0 0 30px 0;
		margin: 0 0 0 0;
		text-indent: -999px;
	}
	#main-page-history h1 {
		background: url(/images/design/h1-history.gif) 50% 8px no-repeat;
		display: block;
		position: relative;
		height: 40px;
		padding: 0 0 30px 0;
		margin: 0 0 0 0;
		text-indent: -999px;
	}
	#main-work h1 {
		background: url(/images/design/h1-portfolio.gif) 50% 8px no-repeat;
		display: block;
		position: relative;
		height: 40px;
		padding: 0 0 30px 0;
		margin: 0 0 0 0;
		text-indent: -999px;
	}
	#main-brief h1 {
		background: url(/images/design/h1-brif.gif) 50% 8px no-repeat;
		display: block;
		position: relative;
		height: 40px;
		padding: 0 0 30px 0;
		margin: 0 0 0 0;
		text-indent: -999px;
	}
	
.work-left {
	position: relative;
	margin: 0 360px 0 0;
}
.work-right {
	float: right;
	width: 360px;
	margin: 0 0 0 -360px;
}
.work-right img {
	display: block;
	width: 350px;
	border: 5px solid #e9e9e9;
}

.work-descrip {
	background: url(/images/design/portfolio-bg.gif) 0 0 no-repeat;
	position: relative;
	padding: 0 0 0 7px;
}
	.work-descrip .descrip-left {
		float: left;
		margin: 0 -110px 0 0;
		background: #e9e9e9;
		width: 110px;
		height: 32px;
		text-align: center;
		border-top: 1px solid #e9e9e9;
		padding: 18px 0 0 0;
	}
	.work-descrip .descrip-right {
		position: relative;
		margin: 0 0 0 110px;
		min-height: 32px;
		border-top: 1px solid #e9e9e9;
		padding: 18px 20px 0 20px;
	}
		.work-descrip .descrip-right p {
			margin: 0 0 15px 0;
			line-height: 12px;
		}
.descrip-margin {
	margin: 0 0 20px 0;
}
.work-descrip.descrip-text {
	background: none;
	position: relative;
	padding: 20px 20px 0 0;
}
.work-descrip.descrip-text p {
	padding: 0 0 17px 0;
}

#content-fulltext p {
	font-family: Trebuchet MS, Arial;
	font-size: 13px;
	line-height: 16px;
	padding: 0 0 12px 0;
	text-align: justify;
}
#content-fulltext ul {
	margin: 10px 0 20px 0;
	padding: 30px;
	display: block;
	position: relative;
	border: 1px solid #eeeeee;
	background: #dcdcdc;
}
#content-fulltext ul li {
	padding: 7px 0 7px 5%;
	width: 95%;
	display: block;
	font-family: Tahoma;
	font-size: 11px;
	line-height: 14px;
}
#content-fulltext a.tooltip {
	color: #538200;
}
#content-fulltext ul li.ul-1st {background: url(/images/design/inner/ul-1st.gif) 0 55% no-repeat;}
#content-fulltext ul li.ul-2st {background: url(/images/design/inner/ul-2st.gif) 0 55% no-repeat;}
#content-fulltext ul li.ul-3st {background: url(/images/design/inner/ul-3st.gif) 0 55% no-repeat;}
#content-fulltext ul li.ul-4st {background: url(/images/design/inner/ul-4st.gif) 0 55% no-repeat;}

#content-fulltext h2 {
	color: #679418;
	display: block;
	font-style: italic;
	position: relative;
	padding: 15px 0 15px 0;
	font-family: Georgia, Times new roman;
	font-size: 20px;
	font-weight: normal;
}
#calculator h2 {
	color: #0d69a3;
	display: block;
	font-style: italic;
	position: relative;
	padding: 20px 0 10px 0;
	font-family: Georgia, Times new roman;
	font-size: 20px;
	font-weight: normal;
}
#calculator h2.first {
	padding: 0 0 10px 0;
}

#calculator {
	position: relative;
	margin: 0 365px 0 0;
}
#abacus {
	background: url(/images/design/abacus.jpg) 0 0 no-repeat;
	float: right;
	width: 365px;
	margin: 0 0 0 -365px;
	padding: 403px 0 0 0;
	position: relative;
}
#abacus-sum {
	width: 238px;
	height: 61px;
	font-family: times new roman;
	font-size: 14px;
	text-align: center;
	padding: 0 31px 0 0;
	margin: 0 auto;
}
#abacus-save {
	width: 238px;
	height: 61px;
	text-align: center;
	padding: 0 31px 0 0;
	margin: 0 auto;
}
#abacus-sum span {
	font-size: 36px;
	color: #37830d;
}
#abacus-sum b {
	font-weight: normal;
	position: relative;
	top: -8px;
}
#abacus .abacus-light {
	background: url(/images/design/abacus-light.png) 0 0 no-repeat;
	position: absolute;
	z-index: 999;
	width: 47px;
	height: 60px;
	top: 53px;
	right: 35px;
}
#abacus .abacus-dark {
	background: url(/images/design/abacus-dark.png) 0 0 no-repeat;
	position: absolute;
	z-index: 999;
	width: 47px;
	height: 60px;
	top: 53px;
	right: 35px;
}
#abacus .abacus-2 {z-index: 998;top: 53px;right: 57px;}
#abacus .abacus-3 {z-index: 997;top: 53px;right: 79px;}
#abacus .abacus-4 {z-index: 996;top: 53px;right: 101px;}
#abacus .abacus-5 {z-index: 995;top: 53px;right: 123px;}

#abacus .abacus-6 {z-index: 999;top: 108px;right: 35px;}
#abacus .abacus-7 {z-index: 998;top: 108px;right: 57px;}
#abacus .abacus-8 {z-index: 997;top: 108px;right: 79px;}
#abacus .abacus-9 {z-index: 996;top: 108px;right: 101px;}
#abacus .abacus-10 {z-index: 995;top: 108px;right: 123px;}

#abacus .abacus-11 {z-index: 999;top: 163px;right: 35px;}
#abacus .abacus-12 {z-index: 998;top: 163px;right: 57px;}
#abacus .abacus-13 {z-index: 997;top: 163px;right: 79px;}
#abacus .abacus-14 {z-index: 996;top: 163px;right: 101px;}
#abacus .abacus-15 {z-index: 995;top: 163px;right: 123px;}

#abacus .abacus-16 {z-index: 999;top: 218px;right: 35px;}
#abacus .abacus-17 {z-index: 998;top: 218px;right: 57px;}
#abacus .abacus-18 {z-index: 997;top: 218px;right: 79px;}

#abacus .abacus-19 {z-index: 999;top: 273px;right: 35px;}
#abacus .abacus-20 {z-index: 998;top: 273px;right: 57px;}
#abacus .abacus-21 {z-index: 997;top: 273px;right: 79px;}
#abacus .abacus-22 {z-index: 996;top: 273px;right: 101px;}
#abacus .abacus-23 {z-index: 995;top: 273px;right: 123px;}

#calculator div {
	position: relative;
	width: 100%;
}
#calculator div a.calculator-checkbox {
	background: url(/images/design/calculator-check.png) -22px 0 no-repeat;
	position: absolute;
	z-index: 15;
	width: 22px;
	height: 24px;
	top: 50%;
	margin: -13px 0 0 0;
	left: 0;
	overflow: hidden;
	cursor: pointer;
}
#calculator div span {
	display: block;
	background: url(/images/design/calculator-check.png) 0 0 no-repeat;
	width: 22px;
	height: 24px;
	cursor: pointer;
}
#calculator div p {
	padding: 10px 15px 10px 35px;
}

#main-brief table {
	width: 100%;
}
#main-brief .brief-left {
	vertical-align: middle;
	width: 429px;
}
#main-brief .brief-left,
#main-brief .brief-right {
	padding: 4px 0 4px 0;
}
#main-brief .input-text  div {
	background: #e9e9e9 url(/images/design/forms/text-top.png) 0 0 no-repeat;
	width: 409px;
}
#main-brief .input-text  div div {
	background: url(/images/design/forms/text-bottom.png) 0 100% no-repeat;
	padding: 0 0 10px 0;
}
#main-brief .input-text input {
	font-family: tahoma;
	font-size: 11px;
	margin: 0;
	padding: 10px 0 0 15px;
	width: 390px;
	line-height: 12px;
	background: none;
	border: none;
	color: #333333;
}
#main-brief .input-textarea  div {
	background: #e9e9e9 url(/images/design/forms/textarea-top.png) 0 0 no-repeat;
	width: 409px;
}
#main-brief .input-textarea  div div {
	background: url(/images/design/forms/textarea-bottom.png) 0 100% no-repeat;
	padding: 10px 0 10px 0;
}
#main-brief .input-textarea textarea {
	font-family: tahoma;
	font-size: 11px;
	margin: 0;
	padding: 0 0 0 15px;
	width: 380px;
	height: 100px;
	line-height: 14px;
	background: none;
	border: none;
	color: #333333;
}
#main-brief .more textarea {
	height: 250px;
}
#main-brief .brief-right {
	border: 1px solid #a5b19b;
}
#main-brief .brief-right p {
	margin: 0 0 10px 0;
}
#main-brief .brief-right span {
	background: url(/images/design/forms/li.gif) 0 5px no-repeat;
	display: block;
	padding: 0 0 0 15px;
}
#main-brief .brief-right div {
	position: relative;
	padding: 6px 15px 8px 15px;
	margin: 5px 0 5px 5px;
	line-height: 14px;
}

#main-brief h2 {
	color: #679418;
	display: block;
	font-style: italic;
	position: relative;
	padding: 20px 0 20px 0;
	font-family: Georgia, Times new roman;
	font-size: 20px;
	font-weight: normal;
}
#brief-submit {
	text-align: center;
	padding: 20px 0;
}

.phperror {
	display: none;
}
.notify-error {
	margin: 30px auto 20px auto;
	padding: 30px;
	width: 678px;
	position: relative;
	border: 1px solid #b38c8c;
	background: #dcdcdc;
}

	#main-error h1 {
		background: url(/images/design/h1-error.gif) 50% 8px no-repeat;
		display: block;
		position: relative;
		height: 40px;
		padding: 0 0 30px 0;
		margin: 0 0 0 0;
		text-indent: -999px;
	}
	#main-error p {
		text-align: center;
	}

#main-promo {
	width: 100%;
	height: 150px;
	overflow: hidden;
}
	#main-promo-history {
		background: url(/images/design/icon-history.jpg) 100% 0 no-repeat;
		float: left;
		width: 220px;
		height: 135px;
		padding: 15px 110px 0 0;
	}
		#main-promo-history h1 {
			background: url(/images/design/h1-history.gif) 0 0 no-repeat;
			display: block;
			width: 100%;
			height: 30px;
			text-indent: -999px;
		}
		
	#main-promo-rules {
		background: url(/images/design/icon-rules.jpg) 100% 0 no-repeat;
		float: right;
		width: 230px;
		height: 135px;
		padding: 15px 110px 0 0;
	}
		#main-promo-rules h1 {
			background: url(/images/design/h1-rules.gif) 0 0 no-repeat;
			display: block;
			width: 100%;
			height: 30px;
			text-indent: -999px;
		}
		
#portfolio.lastworks {
		background: url(/images/design/devider.gif) 29px 0 no-repeat;
		padding: 40px 0 0 0;
}