﻿/*
	Author: Garovsky
	Author URI: http://garovsky.ru/
*/

/* Global definitions (begin) */
* { padding: 0; margin: 0; }

body {
	font: 400 13px/20px "Trebuchet ms", Tahoma;
	color: #555;
	text-align: left;
	background: #fff url(body-bg.png) 50% 0 repeat-y;
	border-top: 1px solid #ccc;
}
fieldset, img { border: 0; }
table, td { border-collapse: collapse; border-spacing: 0; }
	td, div { vertical-align: top; }
ul { list-style: none; }
button, img, input, label, select { vertical-align: middle; }
button, label { cursor: pointer; }

:active, :focus { outline: none; -moz-outline-style: none; } /* Border fix */

::selection { color: #fff; background: #059bcd; } /* Text selection - CSS3 */
::-moz-selection { color: #fff; background: #059bcd; }

/* Form elements */
button, input, select, textarea {
	font: 400 13px Tahoma;
	color: #222;
	background: #f9f9f9;
	padding: 2px 5px;
	border: 1px solid #d9d9d9;
	border-radius: 3px; /* Rounded corners - CSS3 */
	-khtml-border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
}
	button { background: #eee; padding: 2px 10px; overflow: visible; }
	button:hover, button:focus, input:hover, input:focus, textarea:hover, textarea:focus { background: #fff6d9; border-color: #bbb; }
	label:hover { color: #000; }

/* Titles */
h1, h2, .title { font: 400 21px Tahoma; padding-bottom: 15px; }
h1, .title { color: #FF7800; }
h2 { color: #6A8C37; background: url(arrow-2.gif) 0 11px no-repeat; padding-left: 20px; }
	h2 a { color: #6A8C37; text-decoration: none; }
		h2 a:hover { text-decoration: underline; }
	h2 a span { display: none; }
h3 { font: 400 19px Tahoma; }
h4 { font: 400 14px "Trebuchet ms"; }

/* Links */
a { color: #228EE1; text-decoration: underline; }
	a:hover { color: #6A8C37; }
/* Global definitions (end) */


/* Main containers (begin) */
#wrapper { width: 810px; background: #fff url(wrapper.jpg) 100% 0 no-repeat; margin: 0 auto; overflow: hidden; }
	#wrapper-inner { position: relative; background: url(dust-1.jpg) 0 180px no-repeat; padding-top: 380px; }
		#container { background: url(dust-3.jpg) 100% 20px no-repeat; padding: 0 20px 0 30px; }
			#content { float: left; width: 450px; background: url(dust-2.jpg) 100% 50% no-repeat; }
			#inner #content { background: none; }
			#sidebar { float: right; width: 260px; }
/* Main containers (end) */


/* Header (begin) */
#logo, #slogan { position: absolute; text-indent: -9999px; overflow: hidden; }
#logo { left: 25px; top: 20px; width: 200px; height: 98px; background: url(logo.png); overflow: hidden; }
#slogan { left: 250px; top: 65px; width: 201px; height: 26px; background: url(header.png) 0 -93px no-repeat; }

#nav { position: absolute; top: 165px; left: 45px; }
	#nav li { position: absolute; left: 0; }
		#nav a, #nav strong {
			position: relative;
			float: left;
			text-indent: -9999px;
			background: url(arrow-1.gif) 0 4px no-repeat;
			padding-left: 11px;
		}
			#nav b { position: absolute; left: 25px; top: 0; background: url(header.png); overflow: hidden; }
		#about, #about-active { top: 0; }
			#about b { width: 75px; height: 14px; }
			#about-active b { width: 80px; height: 15px; background-position: -75px 0; }	
		#request, #request-active { top: 31px; position: relative; z-index: 100; }
			#request b { width: 70px; height: 14px; background-position: 0 -60px; }
			#request-active b { width: 75px; height: 15px; background-position: -70px -60px; }
		#services, #services-active { top: 62px; }
			#services b { width: 100px; height: 18px; background-position: 0 -75px; }
			#services-active b { width: 108px; height: 18px; background-position: -100px -75px; }
		#autopark, #autopark-active { top: 94px; }
			#autopark b { width: 86px; height: 17px; background-position: 0 -15px; }
			#autopark-active b { width: 92px; height: 17px; background-position: -86px -15px; }
		#materials, #nav #materials-active { top: 125px; }
			#materials b { width: 88px; height: 13px; background-position: 0 -46px; }
			#materials-active b { width: 95px; height: 14px; background-position: -88px -46px; }
		#contacts, #contacts-active { top: 156px; }
			#contacts b { width: 57px; height: 13px; background-position: 0 -32px; }
			#contacts-active b { width: 61px; height: 14px; background-position: -57px -32px; }
/* Header (end) */


/* Content (begin) */
.ct, .cb {
	position: relative;
	left: -1px;
	width: 100%;
	height: 10px;
	background: url(corners.gif) 100% 0 no-repeat;
	padding-right: 2px;
	overflow: hidden;
	z-index: 101;
}
	.ct { top: 0; }
	.cb { bottom: 0; background-position: 100% -10px; }
	.ct b, .cb b {
		float: left;
		width: 10px;
		height: 10px;
		background: url(corners.gif) 0 -20px no-repeat;
		overflow: hidden;
	}
		.cb b { background-position: 0 -30px; }

.i-1 {}
.i-2 { font: 18px Tahoma; padding: 18px 15px 25px; }	
.i-3 { text-indent: 13px; padding-bottom: 15px; }
.i-4 { padding-top: 25px }

.cards { height: 40px; text-indent: -9999px; background: url(cards.png) 50% 0 no-repeat; }
	.cards b { font-size: 14px;}

.request {
	font: 13px Tahoma;
	color: #333;
	text-align: center;
	background: #f5f5f5;
	border: 1px solid #f9f9f9;
	border-width: 0 1px;
}
	.request .request-inner { padding: 15px 20px; }
	.request form { text-align: left; margin-bottom: 3px; }
	.request label { margin-left: 2px; }
		.request label span { color: #999; }
			.request label span:hover { color: #333; }
	.request input, .request textarea { display: block; width: 206px; margin: 2px 0 8px; }
		.request input.vshort { width: 125px; }
		.request textarea { height: 33px}
		.request textarea.vfull, .request input.vfull { width: 396px; }
	.request p { font-weight: bold; padding-bottom: 3px; }

.phones { color: #000; background: url(arrow-3.gif) 0 8px no-repeat; padding-left: 30px; }
	.phones p { font: 25px Tahoma; letter-spacing: -1px; padding-bottom: 8px; }
	.phones span { display: block; color: #888; padding-left: 3px; }

.phones-2 { margin: 5px 15px 0; }
	.phones-2 h2 { background: none; padding: 0 0 15px 0; }
	.phones-2 p {
		position: relative;
		font: 25px Tahoma;
		color: #000;
		letter-spacing: -1px;
		padding: 0 0 10px 35px;
	}
		.phones-2 p i {
			position: absolute;
			left: 5px;
			top: 8px;
			width: 18px;
			height: 18px;
			background: url(icon-mobile.png);
			overflow: hidden;
		}
			.phones-2 p.beeline i { background-position: 0 -18px; }
			.phones-2 p.megafon i { background-position: 0 -36px; }
	.phones-2 span { display: block; padding-top: 5px; }

.mail { font: 18px Tahoma; padding: 15px 15px 30px; }

.map { padding: 5px 0 0 20px; }
	.map span a {
		display: block;
		width: 230px;
		height: 151px;
		text-indent: -9999px;
		background: url(map.png);
		overflow: hidden;
	}

.error { height: 202px; text-indent: -9999px; background: url(stop.gif) 50% 0 no-repeat; margin: 20px 0 15px; }

.message { padding-bottom: 25px; }
	.message p { text-align: center; padding-bottom: 10px; }

#informer { margin-top: -5px; padding-left: 10px; }
	#informer td { vertical-align: middle; }
		#informer td table { display: none; }
#infscript { display: none; }

.type-1 { padding: 5px 0 0 15px; }
	.type-1 li { min-height: 60px; background: url(auto-3.png) 2px 10px no-repeat; padding: 0 0 5px 117px; }
		.type-1 li.s-2 { background: url(auto-10.png) 4px 6px no-repeat; }
		.type-1 li.s-3 { background: url(auto-9.png) 7px 2px no-repeat; }
		.type-1 li.s-4 { background: url(auto-8.png) 4px 6px no-repeat; }
		.type-1 li.s-7 { background: url(auto-1.png) 2px 10px no-repeat; }
		.type-1 li.s-8 { background: url(auto-11.png) 0 4px no-repeat; }
		.type-1 li.s-9 { background: url(auto-12.png) 0 4px no-repeat; }
		.type-1 li.s-12 { background: url(auto-2.png) 2px 20px no-repeat; }
		
		
		.type-1 li.s-5 { background-image: url(auto-12.png); }
		.type-1 li.s-6 { background-image: url(auto-3.png); }
		.type-1 li.s-10 { background-image: url(auto-6.png); }
		.type-1 li.s-11 { background-image: url(auto-9.png); }
	.type-1 p { font-size: 12px; color: #888; }

.type-2 { padding-left: 23px; }
	.type-2 li, .type-4 li { padding: 0 0 5px 22px; background: url(arrow-5.gif) 0 9px no-repeat; }
		.type-2 li:last-child, .type-4 li:last-child { padding-bottom: 0; }

.type-3 { padding-top: 10px; overflow: hidden; }
	.type-3 h3 { font-size: 21px; color: #444; padding-bottom: 5px; }
	.type-3 h4 { color: #6A8C37; padding-left: 2px; }
	.type-3 span { color: #6A8C37; text-decoration: underline; }
	.type-3 dl { padding-top: 3px; }
		.type-3 dt { float: left; color: #333; text-align: right; padding-right: 10px; }
		.type-3 dd { color: #666; overflow: hidden; }
	.type-3 address { font-style: normal; }	
	.type-3 li { background: #f9f9f9 url(dots-horizontal.gif) 0 100% repeat-x; margin: 1px 0 -1px; padding: 10px 10px 11px; }
		.type-3 li.even { background-color: #fff6d9; }

.type-4 { font-size: 18px; padding-left: 3px; }
	.type-4 li { padding-bottom: 10px; }
		.type-4 li span { font-size: 13px; margin-left: 7px; }
		.type-4 ul { font-size: 13px; padding-top: 8px; }
			.type-4 ul li { background: url(arrow-7.gif) 0 8px no-repeat; padding: 0 0 5px 22px; }
				.type-4 ul a { color: #666; }
					.type-4 ul a:hover { text-decoration: none; }


/* Gallery */
.gallery-holder { width: 730px; margin: 10px 0 0 9px; border: 1px solid #ddd; }
#main_image_holder, #main_image {
	position: relative;
	width: 730px;
	height: 540px;
	background: #1a171b url(logo-dark.png) 50% 190px no-repeat;
	overflow: hidden;
}
	#main_image { background: url(loading-bar.gif) 50% 360px no-repeat; }
.caption {
	position: absolute;
	bottom: 0;
	right: 0;
	display: none;
	width: 670px;
	height: 55px;
	font-size: 35px;
	color: #ccc;
	letter-spacing: -1px; 
	line-height: 26px;	
	text-align: left;
	background: url(image-shade.png);
	padding: 117px 30px 0;
	overflow: hidden;	
}
	.caption a { float: right; font-size: 25px; padding-top: 3px; }
.image-next, .image-next a {
	position: absolute;
	top: 0;
	left: 0;
	width: 730px;
	height: 460px;
	text-indent: -9999px;
}
	.image-next b {
		position: absolute;
		top: 246px;
		right: 10px;
		width: 38px;
		height: 48px;
		background: url(arrows.png) -38px 0 no-repeat; 
		overflow: hidden;
	}

#scrollable { position: relative; background: #1a171b; padding: 12px 13px; border-top: 1px solid #222; }

.scrollingHotSpotLeft, .scrollingHotSpotRight {
	position: absolute;
	top: 50%;
	width: 47px;	
	margin-top: -22px;	
	z-index: 15;
	cursor: pointer;
}
	.scrollingHotSpotLeft b, .scrollingHotSpotRight b {
		float: right;
		width: 38px;
		height: 48px;
		text-indent: -9999px;
		background: url(arrows.png) 0 0 no-repeat;
		overflow: hidden;
	}	
	.scrollingHotSpotLeft { left: 0; }
	.scrollingHotSpotRight { right: 0; }
		.scrollingHotSpotRight b { float: left; background-position: -38px 0; }

.scrollWrapper { position: relative; width: 100%; height: 124px; overflow: hidden; z-index: 10; }
.scrollableArea { position: absolute; left: 0; top: 0; width: 5358px; height: 124px; }

.gallery li { float: left; width: 167px; height: 124px; margin-right: 12px; overflow: hidden; }
	.gallery li:last-child { margin: 0; }
	.gallery li img { width: 167px; height: 124px; cursor: pointer; }
		.gallery li img, .gallery li span { display: none; }

/* Margins */
.m-1 { margin-bottom: 35px; }
.m-2 { margin-bottom: 30px; }
.m-3 { padding: 20px 15px 0; }
.m-4 { margin-bottom: 5px; }
.m-5 { padding-bottom: 10px; }
.m-6 { padding: 10px 15px 15px; }
.m-7 { margin-bottom: 20px; }


/* Colors */
span.mark { background: #fff6d9; }

.black { color: #555; }	
	.black:hover { color: #222; text-decoration: none; }

.valid { border: 2px solid #080 !important; }
.invalid { border: 2px solid #800 !important; }	


/* Clearing */
#container, .type-3 dl { min-height: 1%; overflow: hidden; }
/* Content (end) */


/* Footer (begin) */
#footer {
	position: relative;
	min-height: 70px;
	background: url(dust-4.jpg) 100% 100% no-repeat;
	padding: 45px 30px 0;
}
	#footer p { padding-bottom: 5px; }
		#footer p span, #footer p span a { color: #999; }
			#footer p span a:hover { color: #777; }
	#footer div { position: absolute; right: 30px; top: 50px; }
/* Footer (end) */