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

/*	--- --- --- --- ---
[project info]
	name - Kasper-Hosting.
	date - 02.06.2010.
	
	styles:
	--- --- --- --- --- --- --- --- --- ---
	http://www.kasper-hosting.by/img/default.css (6 kb)
	http://www.kasper-hosting.by/img/corners.css (4 kb)
	http://www.kasper-hosting.by/img/main.css (17 kb)
	http://www.kasper-hosting.by/img/_tpl.css (18 kb)
	http://www.kasper-hosting.by/img/_editor.css (1 kb)
	http://www.kasper-hosting.by/img/main_ie.css (2 kb)
	--- --- --- --- --- --- --- --- --- ---
	total: (48 kb)
	
	developer	- OOO "КасперСистемс"
	reply-to	- http://www.kasper.by/

[file structure]
	1. =global
	2. =wrapper
	--- --- ---
		2.1. =top block
		2.2. =hosting
		2.3. =content
		2.4. =extra block
	--- --- ---
	3. =footer
	4. =other styles

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

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

/* =global
--- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- -- */
html {
	font-size: 100.01%;
}
body {
	min-width: 1000px;
	background: #e0f3fc;	
	font-size: 62.5%;	
	font-family: Arial, Helvetica, sans-serif;
	color: #333232;
}
/* --- !!! --- */
a {
	color: #0182fb;
	text-decoration: underline;
}
a:hover {
	text-decoration: none;
}
:active {
	outline: none;
}
:focus {}
/* --- !!! --- */
.top-block,
.hosting,
.content,
.extra-block,
.footer {
	width: 920px;	/* - original: 1000px; - */
	padding: 0 40px;
	margin: 0 auto;	
}
/* --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- */


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

	/* =top block
	--- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- -- */
	.top-block-wrap {
		border-bottom: 1px solid #6bb2ff;
		background: #2c539e url(top_block_bg.png);
	}
		.top-block {
			height: 96px;
			background: url(ground_center.jpg);
			position: relative;
			top: 1px;
		}

			/* --- top menu --- */
			.top-menu {
				display: inline;
				padding: 0;
				margin: 15px -10px 0 0;
				list-style-type: none;
				float: right;
			}
				.top-menu li {
					height: 65px;
					background: url(menu_separate.png) no-repeat right;
					font-size: 1.6em;
					font-weight: bold;
					color: #fff;
					text-shadow: #011b52 0 1px 0;
					line-height: 65px;
					float: left;
				}
				.top-menu li.last {
					background: none;
				}
					/* --- !!! --- */
					.top-menu li a {
						height: 65px;
						padding: 0 15px;
						color: #fff;
						text-decoration: none;
						float: left;
					}
					.top-menu li a:hover {
						color: #b9dfff;
					}
						/* --- !!! --- */
						.top-menu li a img {
							margin-top: 28px;
							border: none;
							background: url(ico_top.gif) no-repeat 0 -9px;
							float: left;
						}
						.top-menu li a img.ico-feedback {
							background-position: 0 0;
						}
						/* --- !!! --- */
						.top-menu li a:hover img {
							background-position: -11px -9px;
						}
						.top-menu li a:hover img.ico-feedback {
							background-position: -11px 0;
						}
			/* --- // top menu // --- */
			
			/* --- logo --- */
			.logo {
				margin-top: 13px;
				border: none;
				font-size: 1.4em;
				color: #fff;
				float: left;
			}
			/* --- // logo // --- */
		
	/* --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- */


	/* =hosting
	--- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- -- */
	.hosting-wrap {
		border-bottom: 1px solid #fff;
		background: #2fa9f4 url(ground_bg.png);
	}
		.hosting {
			height: 388px;
			background: url(ground_center.jpg) bottom;
			position: relative;
		}
		
			/* --- hide ground blocks --- */
			.hide-host-left,
			.hide-host-right {
				width: 200px;
				height: 100%;
				position: absolute;
				top: 0;
			}
			.hide-host-left {
				background: url(ground_left.jpg);
				left: -200px;
			}
			.hide-host-right {
				background: url(ground_right.jpg);
				right: -200px;
			}
			/* --- // hide ground blocks // --- */
		
			/* --- slogan --- */
			.slogan {
				width: 585px;
				height: 160px;
				margin: 0;
				font-family: "Myriad Pro", Arial, Helvetica, sans-serif;
				font-size: 6.2em;
				font-weight: normal;
				color: #fff;
				line-height: 1;
				letter-spacing: -1px;
				overflow: hidden;
				position: absolute;
				top: 48px;
				right: 44px;
			}
				.slogan strong {
					font-size: 1.3em;
					letter-spacing: normal;
					position: relative;
					top: -20px;
					left: 240px;
				}
				.slogan b {
					font-size: 0.6em;
					font-weight: normal;
					position: relative;
					top: 15px;
					left: 110px;
				}
				/* --- !!! --- */
				.slogan span {
					width: 100%;
					height: 100%;
					background: url(slogan.png);
					position: absolute;
					top: 0;
					left: 0;
				}	
			/* --- // slogan // --- */
			
			/* --- rates, prices & contract --- */
			.rates,
			.contract {
				border: none;
				font-size: 1.4em;
				color: #fff;
				position: absolute;
				bottom: 31px;
			}
			.rates {
				right: 271px;
			}
			.contract {
				right: 40px;
			}
			/* --- rates, prices & contract --- */
		
	/* --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- */


	/* =content
	--- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- -- */
	.content-wrap {
		border-bottom: 1px solid #bde6f9;
		background: #fff url(content_bg.png) repeat-x;
	}
		.content {
			padding-top: 20px;
			padding-bottom: 20px;
		}
			.content:after {
				display: block;
				height: 0;
				clear: both;
				content: "";
				visibility: hidden;
			}

			/* --- domain registration --- */
			.reg-domain {
				width: 272px;
				height: 194px;
				margin-bottom: 25px;
				background: #98e5f1 url(reg_domain_bg.png);
				float: left;
				position: relative;
			}
				/* --- !!! --- */
				.reg-domain p {
					height: 60px;
					padding: 20px 0 15px 25px;
					margin: 0;
					font-family: "Myriad Pro", Arial, Helvetica, sans-serif;
					font-size: 2.8em;
					color: #fff;
					letter-spacing: -1.5px;
					line-height: 1;
					position: relative;
					overflow: hidden;
				}
					.reg-domain p b {
						position: relative;
						font-size: 1.2em;
						letter-spacing: normal;
						top: -10px;
					}
					.reg-domain p span {
						width: 100%;
						height: 100%;
						background: url(reg_domain_bg.png);
						position: absolute;
						top: 0;
						left: 0;
					}
				/* --- !!! --- */
				.reg-domain ul {
					padding: 0;
					margin: 0 15px 15px 15px;
					list-style-type: none;
				}
					.reg-domain ul li {
						display: inline;
						margin: 0 10px;
						font-size: 1.3em;
						font-weight: bold;
						color: #294a8b;
					}
						/* --- !!! --- */				
						.reg-domain ul li a {
							color: #294a8b;
						}
				/* --- !!! --- */
				.domain-button {
					width: 226px;
					height: 45px;
					margin-left: -113px;
					background: #186ebc url(buttons.png) 0 -135px;
					font-size: 1.8em;
					color: #fff;
					letter-spacing: -0.5px;
					text-decoration: none;
					text-align: center;
					text-shadow: #0a4c71 -1px -1px 0;
					line-height: 45px;
					position: absolute;
					bottom: 22px;
					left: 50%;
				}
			/* --- // domain registration // --- */

			/* --- site creation --- */
			.site-creat {
				width: 272px;
				height: 194px;
				margin-bottom: 25px;
				background: #e9bef3 url(site_creation_bg.png);
				float: right;
				position: relative;
			}
				/* --- !!! --- */
				.site-creat p {
					height: 60px;
					padding: 20px 0 0 25px;
					margin: 0;
					font-family: "Myriad Pro", Arial, Helvetica, sans-serif;
					font-size: 3.2em;
					color: #fff;
					letter-spacing: -1px;
					line-height: 1;
					position: relative;
					overflow: hidden;
				}
					.site-creat p b {
						position: relative;
						font-size: 1.2em;
						top: -10px;
					}
					.site-creat p span {
						width: 100%;
						height: 100%;
						background: url(site_creation_bg.png);
						position: absolute;
						top: 0;
						left: 0;
					}
				/* --- !!! --- */
				.site-creat .domain-button {
					background-color: #9418bc;
					background-position: 0 -45px;
					text-shadow: #54009b -1px -1px 0;
				}
			/* --- // site creation // --- */

			/* --- test domain --- */
			.test-domain {
				width: 331px;
				height: 194px;
				margin: 0 auto 25px auto;
				background: #bfeea4 url(test_domain_bg.gif);
				position: relative;
			}
				/* --- !!! --- */
				.test-domain p {
					height: 50px;
					padding: 10px 0 0 20px;
					margin: 0;
					font-family: "Myriad Pro", Arial, Helvetica, sans-serif;
					font-size: 3.8em;
					color: #fff;
					letter-spacing: -2px;
					line-height: 1;
					position: relative;
					overflow: hidden;
				}
					.test-domain p b {
						letter-spacing: normal;
					}
					.test-domain p span {
						width: 100%;
						height: 100%;
						background: url(test_domain_bg.gif);
						position: absolute;
						top: 0;
						left: 0;
					}
				/* --- !!! --- */
				.main-domain-form {}
					.main-domain-form fieldset {
						padding: 0;
						border: none;
					}
						/* --- !!! --- */
						.main-domain-form fieldset div {
							width: 280px;	/* - original: 290px; - */
							height: 27px;
							padding: 0 5px;
							background: url(domain_input_bg.png) no-repeat;
							margin: 0 auto 15px auto;
							position: relative;
							overflow: hidden;
						}
							.main-domain-form fieldset div input {
								width: 100%;
								height: 17px;	/* - original: 27px; - */
								padding: 6px 0 4px 0;
								border: none;
								background: #fff;
								font-size: 1.4em;
							}
						/* --- !!! --- */
						.main-domain-form fieldset ul {
							padding: 0;
							margin: 0;
							list-style-type: none;
							text-align: center;
						}
							.main-domain-form fieldset ul li {
								display: inline;
								
								margin: 0 5px !important;
								margin: 0 2px;
								
								font-size: 1.2em;
								color: #016ba2;
							}
								/* --- !!! --- */
								.main-domain-form fieldset ul li input {
									vertical-align: middle;
								}
								.main-domain-form fieldset ul li label {
									cursor: pointer;
								}
						/* --- !!! --- */
						.main-domain-form fieldset input.domain-button {
							width: 295px;
							margin-left: -147px;
							border: none;
							background-color: #63c966;
							background-position: 0 -90px;
							text-shadow: #098100 -1px -1px 0;
							cursor: pointer;
						}
			/* --- // test domain // --- */
			
			/* --- main text wrapper --- */
			.main-text {
				width: 100%;
				float: left;
			}
				/* --- left column --- */
				.left-col {
					margin-right: 295px;
				}
				/* --- // left column // --- */
			
			/* --- // main text wrapper // --- */
		
			/* --- right column --- */
			.right-col {
				display: inline;
				width: 250px;
				margin-left: -260px;
				float: left;
			}
				.faq-title {
					height: 70px;
					margin: 0 0 -10px 5px;
					font-family: "Myriad Pro", Arial, Helvetica, sans-serif;
					font-size: 4em;
					color: #97cdee;
					letter-spacing: -2px;
					line-height: 1;
					position: relative;
					overflow: hidden;
				}
					.faq-title b {
						position: relative;
						font-size: 0.75em;
						letter-spacing: normal;
						top: -10px;
					}
					.faq-title span {
						width: 100%;
						height: 100%;
						background: url(ask_bg.gif) no-repeat;
						position: absolute;
						top: 0;
						left: 0;
					}
				/* --- !!! --- */
				.main-faq-form {
					position: relative;
				}
					.main-faq-form fieldset {
						padding: 0;
						margin: 0;
						border: none;
						text-align: center;
					}
						.main-faq-form fieldset div {
							height: 17px;	/* - original: 27px; - */
							padding: 5px 0;
							margin: 15px 0;
							background: url(faq_field_bg.png) no-repeat center -212px;
						}
						.main-faq-form fieldset .letter {
							height: 174px;	/* - original: 184px; - */
							background: url(faq_field_bg.png) no-repeat center -240px;
							overflow: hidden;	/* - for IE - */
						}
						.main-faq-form fieldset .captcha {
							background: url(faq_field_bg.png) no-repeat center -425px;
							position: relative;
						}
							/* --- !!! --- */
							.main-faq-form fieldset div input {
								width: 219px;
								border: none;
								background: none;
								font-size: 1.3em;
							}
							.main-faq-form fieldset .captcha input {
								width: 155px;
								margin-right: 15px;
								float: right;
							}
							.main-faq-form fieldset .captcha img {
								font-size: 1.4em;
								position: absolute;
								top: -5px;
								left: 0;
							}
							.main-faq-form fieldset div textarea {
								width: 219px;
								height: 174px;
								border: none;
								background: none;
								font-size: 1.3em;
								overflow: auto;
								resize: none;
							}
							.main-faq-form fieldset .submit {
								width: 235px;
								height: 39px;
								border: none;
								margin-bottom: 10px;
								background: #43b2dc url(buttons.png) 0 -6px;
								font-size: 1.8em;
								color: #fff;
								text-shadow: #006aa1 -1px -1px 0;
								letter-spacing: -0.5px;
								cursor: pointer;
							}
			/* --- // right column // --- */
	
	/* --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- */


	/* =extra block
	--- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- -- */
	.extra-block-wrap {
		border-top: 1px solid #f1fafe;
		background: #e0f3fc url(extra_bg.png) repeat-x;
		margin-bottom: 100px;
	}
		.extra-block {
			padding-top: 20px;
			padding-bottom: 20px;
			list-style-type: none;
		}
			.extra-block:after {
				display: block;
				height: 0;
				clear: both;
				content: "";
				visibility: hidden;
			}
			.extra-block li {
				width: 260px;	/* - original: 280px; - */
				padding: 0 10px;
				float: left;
			}
			.extra-block li.info-center {
				margin: 0 40px;
			}
	/* --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- */


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


/* =footer
--- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- -- */
.footer-wrap {
	height: 80px;
	margin-top: -80px;
	border-top: 1px solid #86abf1;
	background: #59a2f8 url(footer_bg.gif) repeat-x;
}
	.footer {
		position: relative;
	}
		
		/* --- bottom menu --- */
		.bottom-menu {
			padding: 0;
			margin: 10px 0 30px 0;
			list-style-type: none;
			text-align: center;
		}
			.bottom-menu li {
				display: inline;
				margin: 0 5px;
				font-size: 1.2em;
				color: #fff;
			}
				/* --- !!! --- */
				.bottom-menu li a {
					color: #fff;
					text-decoration: none;
				}
				.bottom-menu li a:hover {
					text-decoration: underline;
				}
		/* --- // bottom menu // --- */

		/* --- copyright, developers & counter blocks --- */
		.copyright,
		.developers,
		.counter {
			margin: 0;
			font-size: 1.1em;
		}
		/* --- // copyright, developers & counter blocks // --- */
		
		/* --- copyright block --- */
		.copyright {
			float: left;
		}
		/* --- // copyright block //  --- */
		
		/* --- developers block --- */
		.developers {
			float: right;
		}
			/* --- !!! --- */
			.developers a {
				color: #333232;
				text-decoration: none;
			}
			.developers img {
				border: none;
				vertical-align: middle;
			}
		/* --- // developers block //  --- */
		
		/* --- counter block --- */
		.counter {
			text-align: center;
		}
		/* --- // counter block //  --- */		
	
/* --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- */


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

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