/* ===== 'styles.css' ===== */

/*	--- --- --- --- ---
[project info]
	name - Kasper-Seo.
	date - 16.04.2010.
	
	styles:
	--- --- --- --- --- --- --- --- --- ---
	http://www.???.??/img/default.css (6 kb)
	http://www.???.??/img/corners.css (4 kb)
	http://www.???.??/img/styles.css (15 kb)
	http://www.???.??/img/styles_ie.css (5 kb)
	http://www.???.??/img/tpl.css (7 kb)
	--- --- --- --- --- --- --- --- --- ---
	total: (37 kb)
	
	developer	- OOO "КасперСистемс"
	reply-to	- http://www.kasper.by/

[file structure]
	1. =global
	2. =wrapper
	--- --- ---
		2.1. =top menu
		2.2. =header
		2.2. =services
		2.2. =content
			--- --- ---
			2.2.1. =column wrapper
				--- --- ---
				2.2.1.1. =main column
			--- --- ---
			2.2.2. =sidebar
		--- --- ---
		2.3. =footer

--- --- --- --- --- */

/* ='default.css & corners.css'
--- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- -- */
@import url(default.css);
@import url(corners.css);
/* --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- */

/* =global
--- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- -- */
html {
	font-size: 100.01%;
}
body {
	min-width: 1000px;
	background: #08223b;	
	font-size: 62.5%;	/* - '1em' = '10px' - */
	font-family: Arial, Helvetica, sans-serif;
	color: #92adc7;
}
/* --- !!! --- */
a {
	color: #6fb9ff;
	text-decoration: underline;
}
a:hover {
	text-decoration: none;
}
:active {
	outline: none;
}
:focus {}
/* --- !!! --- */
.top-menu,
.header,
.services,
.content,
.footer {
	width: 1000px;
	margin: 0 auto;
}
/* --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- */


/* =wrapper
--- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- -- */
.wrapper {
	min-height: 100%;
	height: auto !important;
	height: 100%;
	position: relative;
}

	/* =top menu
	--- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- -- */
	.top-menu-wrap {
		border-bottom: 1px solid #12415b;
		background: #061627;
	}
		.top-menu {
			width: 975px;	/* - original: 1000px; - */
			height: 55px;
			padding: 0 25px 0 0;
			background: url(in_header_bg.jpg);
			text-align: right;
			list-style-type: none;
			overflow: hidden;
		}
			.top-menu li {
				display: inline-block;
				height: 37px;				
				margin: 10px 15px;
				font-size: 1.2em;
				font-weight: bold;
				line-height: 37px;
			}				
				/* --- !!! --- */
				.top-menu li a {
					color: #78c7ff;
					text-decoration: none;
				}
				.top-menu li a:hover {
					color: #a2d8fe;
					text-decoration: underline;
				}				
				/* --- !!! --- */
				.top-menu li a.famous {
					color: #d468ff;
				}
				.top-menu li a:hover.famous {
					color: #e299ff;
				}
			/* --- !!! --- */			
			.top-menu li.active {
				background: #1a69ae;
				color: #fff;
				position: relative;
			}
				.top-menu li.active span {
					width: 20px;
					height: 100%;
					background: url(top_menu_bg.png);
					position: absolute;
					top: 0;
				}
				.top-menu li.active span.left {
					clip:rect(0, 10px, auto, 0);
					left: -10px;					
				}
				.top-menu li.active span.right {
					clip:rect(0, 20px, auto, 10px);
					right: -10px;
				}
	/* --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- */


	/* =header
	--- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- -- */
	.header-wrap {
		height: 163px;
		border-bottom: 1px solid #275585;
		background: #08223b;
	}
		.header {
			height: 164px;
			margin-bottom: -1px;
			background: url(in_header_bg.jpg) bottom;
			position: relative;
			top: -1px;
		}
			
			/* --- logo --- */
			.logo {
				border: none;
				font-size: 1.2em;
				position: absolute;
				top: 35px;
				left: 75px;
			}
			/* --- // logo // --- */
			
			/* --- slogan --- */
			.slogan {
				width: 280px;
				height: 85px;
				margin: 0;
				font-family: Arial, sans-serif;
				font-size: 3em;
				color: #9dff6e;
				line-height: 1;
				letter-spacing: -3px;
				overflow: hidden;
				position: absolute;
				top: 45px;
				left: 350px;
			}
				.slogan small {
					font-family: "Arial Black", sans-serif;
					font-size: 0.6em;
					letter-spacing: -1px;
				}
				.slogan b {
					display: block;
					margin: -2px 0 -5px 0;
					font-size: 0.9em;
					font-weight: normal;
					text-align: right;
					letter-spacing: -1px;
				}
				.slogan big {
					font-family: "Arial Black", sans-serif;
					font-size: 1em;
				}								
				.slogan span {
					width: 100%;
					height: 100%;
					background: url(in_slogan.png);
					position: absolute;
					top: 0;
					left: 0;
				}
			/* --- // slogan // --- */
		
	/* --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- */
	
	
	/* =services
	--- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- -- */
	.services-wrap {
		height: 174px;
		border-bottom: 1px solid #000;
		background: #0f3961 url(in_services_wrap_bg.png) repeat-x;
	}
		.services {
			width: 950px;	/* - original: 1000px; - */
			height: 155px;	/* - original: 175px; - */
			padding: 10px 25px;
			margin-bottom: -1px;
			background: url(in_services_bg.jpg);
			text-align: center;
			list-style-type: none;
			position: relative;
			top: -1px;
		}
			.services li {
				display: inline-block;
				height: 100%;
				margin: 0 15px;
			}
				/* --- !!! --- */
				.services li a {
					display: inline-block;
					width: 160px;
					height: 100%;
					text-decoration: none;
				}
				.services li a:hover {
					background: url(in_services_shadow.png) no-repeat 0 0;
				}
					/* --- !!! --- */
					.services li a b {
						display: block;
						padding: 110px 25px 10px 25px;
						margin: 0 10px;
						background: url(in_services.png) no-repeat;
						font-size: 1.2em;
						color: #adff85;
						text-shadow: #08223b -1px -1px 0;
						line-height: 1.1;
					}
					.services li b.promotion {
						background-position: -10px 0;
					}
					.services li b.optimization {
						background-position: -330px 0;
					}
					.services li b.audit {
						background-position: -650px 0;
					}
					.services li b.analysis {
						background-position: -970px 0;
					}
					.services li b.copywriting {
						background-position: -1290px 0;
					}
					/* --- !!! --- */
					.services li a:hover b {
						color: #fff;
					}
					.services li a:hover b.promotion {
						background-position: -170px 0;
					}
					.services li a:hover b.optimization {
						background-position: -490px 0;
					}
					.services li a:hover b.audit {
						background-position: -810px 0;
					}
					.services li a:hover b.analysis {
						background-position: -1130px 0;
					}
					.services li a:hover b.copywriting {
						background-position: -1450px 0;
					}
	/* --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- */
	
	
	/* =content
	--- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- -- */
	.content-wrap {
		background: #08223b;	
	}
		.content {
			min-height: 700px;
			height: auto !important;
			height: 700px;
			background: url(content_bg.png) no-repeat;
		}
				
		
			/* =column wrapper
			--- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- -- */
			.col-wrap {
				width: 100%;
				padding-bottom: 150px;
				float: left;
				position: relative;
				z-index: 1;
			}
			
				
				/* =main column
				--- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- -- */
				.main-col {
					margin: 55px 40px 0 350px;
				}
					
					/* --- path --- */
					.path {
						padding: 0;
						margin: -50px 0 0 0;
						list-style-type: none;
					}
						.path li {
							display: inline;
							font-size: 1.1em;
							color: #396fa2;
						}
							/* --- !!! --- */
							.path li a {
								color: #396fa2;
							}							
					/* --- // path // --- */
										
					/* --- page name --- */
					.page-name {
						margin: 40px 0;
						font-size: 2.2em;
						font-weight: normal;
						color: #bbff99;
						text-shadow: #000 -1px 1px 0;
						letter-spacing: -1px;
					}
					/* --- // page name // --- */
	
				/* --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- */
				
			
			/* --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- */
	
	
			/* =sidebar
			--- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- -- */
			.sidebar {
				width: 245px;	/* - original: 350px; - */
				padding: 0 65px 150px 40px;
				margin-left: -1000px;
				float: left;
				position: relative;
				z-index: 2;
			}

				/* --- left menu --- */
				.left-menu {
					padding: 0;
					margin: 55px 0 45px 25px;
					list-style-type: none;
				}
					.left-menu li {
						display: block;
						padding: 0 25px;
						margin: 15px 0;
						font-size: 1.2em;
						font-weight: bold;
					}
						/* --- !!! --- */
						.left-menu li a {
							margin-left: 0px !important;
							margin-left: -3px;
							color: #78c7ff;
							text-decoration: none;
						}
						.left-menu li a:hover {
							color: #fff;
						}
							/* --- !!! --- */
							.left-menu li b {
								font-size: 20px;
								margin: 3px 0 0 -10px;
								line-height: 0.5;
								float: left;
							}					
					/* --- !!! --- */
					.left-menu li.active {
						padding: 12px 0;
						position: relative;
					}
						/* --- !!! --- */
						.left-menu li.active em {
							display: block;
							padding: 0 25px;
							background: url(left_menu_bg.png) repeat-y;
							font-style: normal;
							color: #fff;
						}
						/* --- !!! --- */
						.left-menu li.active span {
							width: 100%;
							height: 24px;
							background: url(left_menu_corn_bg.png) no-repeat;
							position: absolute;
							left: 0;
						}	
						.left-menu li.active span.top {
							clip:rect(0, auto, 12px, 0);
							top: 0;					
						}
						.left-menu li.active span.bottom {
							clip:rect(12px, auto, 24px, 0);
							bottom: 0;
						}					
				/* --- // left menu // --- */

				/* --- free order --- */
				.free-order {
					height: 77px;
					margin: 45px 0 40px 0;
					overflow: hidden;
					position: relative;				
				}
					/* --- !!! --- */
					.free-order a {
						width: 240px;
						height: 142px;	/* - original: 154px; - */
						padding-top: 12px;
						background: url(free_order_bg.png);
						font-size: 1.8em;
						text-decoration: none;
						text-align: center;
						text-shadow: #510a6e 1px -1px 0;
						color: #fff;
						clip: rect(0, 240px, 77px, 0);
						position: absolute;
						top: 0;
						left: 0;
					}
					.free-order a:hover {
						height: 65px;	/* - original: 154px; - */
						padding-top: 89px;
						clip: rect(77px, 240px, 154px, 0);
						top: -77px;
					}
				/* --- // free order // --- */
				
				/* --- phone --- */
				.phone {
					margin: 40px 0;
					font-size: 1.2em;
					font-style: normal;
					color: #1f6cb1;
					text-align: right;
					line-height: 1.1;
				}
					.phone big {
						font-size: 2.3em;
						color: #3d97e0;
					}
				/* --- // phone // --- */
				
			/* --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- */


	/* --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- */
	
	
	/* =footer
	--- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- -- */
	.footer-wrap {
		width: 100%;
		height: 90px;	/* - original: 350px; - */
		padding-top: 260px;
		background: url(footer_wrap_bg.png) no-repeat center;
		position: absolute;
		bottom: 0;
		left: 0;
	}
		.footer-sub-wrap {
			border-top: 1px solid #112f4f;
			background: #001a34;
		}
			.footer {
				height: 90px;
				border-top: 1px solid #001a34;
				position: relative;
				z-index: 3;
			}
				
				/* --- bottom menu --- */
				.bottom-menu {
					padding: 0;
					margin: 20px 0 25px 0;
					list-style-type: none;
					text-align: center;
				}
					.bottom-menu li {
						display: inline;
						margin: 0 15px;
						font-size: 1.2em;
						font-weight: bold;
					}
						/* --- !!! --- */
						.bottom-menu li a {
							color: #78c7ff;
							text-decoration: none;
						}
						.bottom-menu li a:hover {
							color: #a2d8fe;
							text-decoration: underline;
						}
						/* --- !!! --- */
						.bottom-menu li a.famous {
							color: #d468ff;
						}
						.bottom-menu li a:hover.famous {
							color: #e299ff;
						}
				/* --- // bottom menu // --- */
				
				/* --- copyright, developers & counter blocks --- */
				.copyright,
				.developers,
				.counter {
					margin: 0;
					font-size: 1.1em;
				}
					/* --- !!! --- */
					.copyright a,
					.developers a,
					.counter a {
						color: #92adc7;
						text-decoration: none;
					}
				/* --- // copyright, developers & counter blocks // --- */
				
				/* --- copyright block --- */
				.copyright {
					display: inline;
					margin-left: 15px;
					float: left;
				}
				/* --- // copyright block //  --- */
				
				/* --- developers block --- */
				.developers {
					display: inline;
					margin-right: 15px;
					float: right;
				}
					/* --- !!! --- */
					.developers img {
						border: none;
						vertical-align: middle;
					}
				/* --- // developers block //  --- */
				
				/* --- counter block --- */
				.counter {
					text-align: center;
				}
				/* --- // counter block //  --- */
				
	/* --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- */


/* --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- */


/* --- © Tarik, 2010 --- */

/* ===== // 'styles.css' // ===== */