@import 'reset.css';

BODY {
	background: #255183 url(../i/promo/bg-1.gif) repeat-x;
	font: .6875em/1.2 Arial,sans-serif;
	color: #FFF;
	}
	#promo {
		position: relative;
		width: 970px;
		padding-left: 30px;
		margin: 0 auto;
		}
A {
	text-decoration: underline;
	color: #fdb917;
	}
A:hover {
	color: #fc0;
	}

IMG,
A IMG {
	border: 0;
	}

/* Header
-------------------------------------- */
#header {
	position: relative;
	z-index: 1;
	clear: both;
	overflow: visible;
	height: 495px;
	padding-top: 40px;
	margin-bottom: 32px;
	}
	#header H1 {
		float: left;
		padding-left: 30px;
		font-size: 2.7272em;
		font-weight: bold;
		text-transform: uppercase;
		}
		#header H1.logo {
			display: block;
			width: 241px;
			height: 46px;
			padding-left: 0;
			background: url(../i/logo.png) no-repeat;
			}
			#header H1.logo A {
				display: block;
				position: relative;
				width: 241px;
				height: 46px;
				overflow: hidden;
				text-indent: -3000px;
				}
		/* Logo Messenger */
		#header .logo-messenger	{
			float: left;
			display: inline;
			width: 190px;
			height: 20px;
			margin: 7px 0 0 25px;
			background: url(../i/promo/logo-messenger.png) no-repeat;
			text-indent: -9999px;
			}	
		/* Browsers */		
		#header .browsers {
			float: right;
			display: inline;
			margin-right: 86px;
			}
			#header .browsers P {
				padding-left: 5px;
				font-size: 0.9090em;
				line-height: 1.5;
				color: #d9ebff;
				}
			#header .browsers UL {
				margin-top: 10px;
				overflow: hidden;
				}
				#header .browsers UL LI {
					position: relative;
					float: left;
					overflow: hidden;
					margin-right: 18px;
					text-indent: -9999px;
					}
					#header .browsers UL LI I	{
						position: absolute;
						top: 0;
						left: 0;
						height: 35px;
						background: url(../i/promo/browser-icons.gif) no-repeat;
						}
						#header .browsers UL LI.ie I	{
							width: 33px;
							}
						#header .browsers UL LI.firefox I	{
							width: 30px;
							background-position: -34px 0;
							}
						#header .browsers UL LI.safari I	{
							width: 28px;
							background-position: -65px 0;
							}	
					#header .browsers UL LI.ie	{
						width: 33px;
						height: 35px;
						}
					#header .browsers UL LI.firefox	{
						width: 30px;
						height: 35px;
						}
					#header .browsers UL LI.safari	{
						width: 28px;
						height: 35px;
						}
			/* Text list */			
			#header .browsers UL.text-list	{
				margin: 0 0 15px 0;
				}
				#header .browsers UL.text-list LI	{
					float: none;
					margin: 0;
					text-indent: 0;
					line-height: 1.5;
					font-size: 0.9090em;
					color: #d9ebff;
					}				
		#header H1.champ-logo {
			float: right;
			width: 185px;
			height: 30px;
			padding-left: 120px;
			overflow: hidden;
			text-indent: -3000px;
			background: url(../i/promo/championat-logo.gif) no-repeat;
			}
	#header H2 {
		font-size: 1.5em;
		line-height: 1;
		padding: 0;
		}
	#header I {
		display: block;
		position: absolute;
		}
	/* About Block */
	#header .about {
		position: absolute;
		bottom: 106px;
		left: 0;
		width: 554px;
		padding-top: 29px;
		}
		#header .about H2	{
			margin: -2px 0 15px 0;
			line-height: 1.1em;
			color: #1A1A1A;
			}	
		#header .about P	{
			margin-bottom: 11px;
			font-size: 1.083333em;
			line-height: 1.3em;
			color: #1A1A1A;
			}
		#header .about OL	{
			margin-bottom: 11px;
			}	
		#header .about OL LI	{
			margin-bottom: 3px;
			font-size: 1.083333em;
			line-height: 1.3em;
			color: #1A1A1A;
			}	
		#header .about A	{
			color: #d57200;
			}	
			#header .about A:hover	{
				color: #ec8600;
				}
		#header .about .about-outer	{
			position: relative;
			width: 554px;
			overflow: hidden;
			}
			#header .about .about-outer .about-inner	{
				position: relative;
				padding: 0 40px 5px 20px;
				}
		#header .about #about-t-1,
		#header .about #about-b-1 {
			position: absolute;
			left: 0;
			width: 554px;
			}	
		#header .about #about-t-1	{
			top: 0;
			height: 29px;
			background: url(../i/promo/about-t-1.png) no-repeat;
			}	
		#header .about #about-b-1 {
			bottom: 0;
			height: 400px;
			background: url(../i/promo/about-b-1.png) no-repeat;
			}	
		#header .about #ref-1-1 {
			position: absolute;
			bottom: -88px;
			left: 493px;
			z-index: -1;
			width: 288px;
			height: 228px;
			background: url(../i/promo/ref-1-1.png) no-repeat;
			}
		#header .about #ref-2-1 {
			position: absolute;
			bottom: -14px;
			left: -30px;
			z-index: -1;
			width: 80px;
			height: 80px;
			background: url(../i/promo/ref-2-1.png) no-repeat;
			}
		#header .about #ref-3-1 {
			position: absolute;
			bottom: -43px;
			left: -119px;
			width: 184px;
			height: 160px;
			background: url(../i/promo/ref-3-1.png) no-repeat;
			}			
		#header .about #ball-1 {
			position: absolute;
			bottom: -114px;
			left: 457px;
			width: 136px;
			height: 138px;
			background: url(../i/promo/ball-1.png) no-repeat;
			}
	/* Description Block */
	#header .desc {
		position: absolute;
		bottom: 222px;
		right: 50px;
		z-index: -2;
		width: 280px;
		padding-top: 10px;
		}
		#header .desc H2	{
			margin-bottom: 7px;
			line-height: 0.933333em;
			font-size: 1.25em;
			}	
		#header .desc P	{
			margin-bottom: 10px;
			line-height: 1.4;
			}
		#header .desc .desc-outer	{
			position: relative;
			width: 280px;
			overflow: hidden;
			}
			#header .desc .desc-outer .desc-inner	{
				position: relative;
				padding: 4px 20px 6px 20px;
				}	
		#header .desc #desc-t-1,
		#header .desc #desc-b-1 {
			position: absolute;
			left: 0;
			width: 280px;
			}	
		#header .desc #desc-t-1	{
			top: 0;
			height: 10px;
			background: url(../i/promo/desc-t-1.png) no-repeat;
			}	
		#header .desc #desc-b-1 {
			bottom: 0;
			height: 250px;
			background: url(../i/promo/desc-b-1.png) no-repeat;
			}	
	/* Turn On Messenger */
	#header .turn-on {
		position: absolute;
		top: 359px;
		right: 30px;
		z-index: -2;
		width: 334px;
		text-align: left;
		}
		#header .turn-on .turn-on-t, #header .turn-on .turn-on-b	{
			display: block;
			width: 334px;
			height: 10px;
			font-size: 0;
			}
		#header .turn-on .turn-on-t	{
			background: url(../i/promo/turn-on-t.png) no-repeat;
			}	
		#header .turn-on .turn-on-b	{
			background: url(../i/promo/turn-on-b.png) no-repeat;
			}	
		#header .turn-on DIV {
			margin-top: 10px;
			padding: 4px 23px 6px 174px;
			background: #8CB4E2;
			line-height: 1.5em;
			font-weight: bold;
			font-size: 1.083333em;
			}
			#header .turn-on DIV A {
				color: #000;
				}
	/* Download Messenger */
	#header .download	{
		position: absolute;
		top: 447px;
		left: 100px;
		}
		#header .download DIV	{
			padding: 6px 0 9px 0;
			text-align: center;
			font-size: 1.333333em;
			}
/* Features List
-------------------------------------- */
#body UL {
	overflow: hidden;
	margin-left: -30px;
	}
	#body UL LI {
		position: relative;
		float: left;
		width: 20%;
		background-position: 12px 0 !important;
		}
		#body UL LI .soon {
			position: absolute;
			top: 45px;
			left: 80px;
			display: block;
			width: 60px;
			height: 30px;
			background: url(../i/promo/soon.gif) no-repeat;
			}
		#body UL LI DL {
			padding: 20px 25px 0 25px;
			color: #b2b2b2;
			}
			#body UL .active DL {
				color: #fff;
				}
			#body UL LI DL DT {
				font-size: 1.6363em;
				}
			#body UL LI DL DD {
				padding-top: 14px;
				line-height: 1.3em;
				}
				#body UL LI DL DD SUP {
					position: relative;
					top: 0.3em;
					text-transform: uppercase;
					font-size: 0.65em;
					}
					#body UL .active DL DD SUP {
						color: #fc7e11;
						}
		/* Backgrounds for Features */
		#body UL I.pic	{
			display: block;
			width: 56px;
			height: 56px;
			background: url(../i/promo/features/features.jpg) no-repeat;
			}
			#body UL #tickets I.pic {
				background-position: 0 0;
				}
			#body UL #chat I.pic {
				background-position: 0 -57px;
				}
			#body UL #contest I.pic {
				background-position: 0 -114px;
				}
			#body UL #notification I.pic {
				background-position: 0 -171px;
				}	
			#body UL #read I.pic {
				background-position: 0 -228px;
				}
			#body UL #symbols I.pic {
				width: 59px;
				background-position: 0 -285px;
				}	
/* Footer
-------------------------------------- */
.footer {
	overflow: hidden;
	width: 970px;
	margin: 0 auto;
	padding: 68px 0 80px 24px;
	}
	.footer .copyright {
		float: left;
		}
		.footer .copyright SPAN {
			display: block;
			padding-bottom: 10px;
			font-size: 1.6363em;
			}
		.footer .copyright I {
			color: #5380b3;
			}
	.footer .counters {
		float: right;
		padding-top: 10px;
		}
		.footer .counters A {
			margin-left: 20px;
			}
			
/* Popup Windows
-------------------------------------- */
.popups {
	position: absolute;
	top: 0;
	left: 0;
	color: #1a1a1a;
	}
	.popups I {
		position: absolute;
		display: block;
		}
	/* Corners */
	.popups .cor {
		left: 0;
		width: 20px;
		height: 20px;
		}
		.tl {
			top: 0;
			background: url(../i/promo/popup/cor-tl.png) no-repeat;
			}
		.tr {
			top: 0;
			margin-left: 100%;
			background: url(../i/promo/popup/cor-tr.png) no-repeat;
			}
		.bl {
			bottom: 0;
			background: url(../i/promo/popup/cor-bl.png) no-repeat;
			}
		.br {
			bottom: 0;
			margin-left: 100%;
			background: url(../i/promo/popup/cor-br.png) no-repeat;
			}
	/* Sides */
	.popups .t {
		background: url(../i/promo/popup/t.png) repeat-x;
		top: 0;
		left: 20px;
		right: 0px;
		height: 20px;
		}
	.popups .b {
		background: url(../i/promo/popup/b.png) repeat-x;
		bottom: 0;
		left: 20px;
		right: 0px;
		height: 20px;
		}
	.popups .l {
		background: url(../i/promo/popup/l.png) repeat-y;
		top: 20px;
		bottom: 20px;
		width: 20px;
		}
	.popups .r {
		background: url(../i/promo/popup/r.png) repeat-y;
		top: 20px;
		bottom: 20px;
		right: -20px;
		width: 20px;
		}
	/* Bottom Arrows */
	.popups .arrow {
		top: 100%;
		bottom: -43px;
		left: 100px;
		width: 68px;
		height: 43px;
		}
		.popups .a-left {
			background: url(../i/promo/popup/arrow-l.png) no-repeat;
			}
		.popups .a-right {
			background: url(../i/promo/popup/arrow-r.png) no-repeat;
			}
	/* Close Popup Button */
	.popups .close-popup {
		top: 3px;
		right: -16px;
		width: 19px;
		height: 19px;
		background: url(../i/promo/popup/close-button.png) no-repeat;
		cursor: pointer;
		}
	.popups .popup-inside {
		position: absolute;
		top: 20px;
		bottom: 20px;
		left: 20px;
		right: 0;
		padding: 15px 20px;
		background: #fff;
		}
		.popups .popup-inside .left {
			float: left;
			width: 50%;
			}
		.popups .popup-inside .right {
			float: right;
			width: 50%;
			}
			.popups .popup-inside .right P {
				padding-left: 30px;
				}
	/* Popup Inside Elements */
	.popups H3 {
		padding-bottom: 20px;
		font-size: 1.6363em;
		font-weight: normal;
		}
	.popups P {
		padding-bottom: 15px;
		font-size: 1.0909em;
		}
		.popups P.list {
			padding-bottom: 5px;
			}
	.popups A {
		color: #255183;
		}

	/* Popups Positioning */
	.popups #popup-1 {
		display: none;
		position: absolute;
		z-index: 2000;
		top: 205px;
		left: 108px;
		width: 70em;
		height: 35em;
		}
		.popups #popup-1 .arrow {
			left: 20px;
			}
	.popups #popup-2 {
		display: block;
		position: absolute;
		z-index: 2000;
		top: 172px;
		left: 98px;
		width: 70em;
		height: 38em;
		}
		.popups #popup-2 .arrow {
			left: 230px;
			}
	.popups #popup-3 {
		display: none;
		position: absolute;
		z-index: 2000;
		top: 227px;
		left: 468px;
		width: 38em;
		height: 33em;
		}
		.popups #popup-3 .arrow {
			left: 60px;
			}
		.popups #popup-3 .get-id {
			background: url(../i/promo/turn-on.png) no-repeat;
			width: 334px;
			height: 68px;
			line-height: 68px;
			font-size: 1.6363em;
			text-align: center;
			margin: 10px auto;
			}
			.popups #popup-3 .get-id A {
				color: #042751;
				}
	.popups #popup-4 {
		display: none;
		position: absolute;
		z-index: 2000;
		top: 370px;
		left: 448px;
		width: 38em;
		height: 20em;
		}
		.popups #popup-4 .arrow {
			left: 280px;
			}
	.popups #popup-5 {
		display: none;
		position: absolute;
		z-index: 2000;
		top: 359px;
		left: 435px;
		width: 38em;
		height: 21em;
		}
		.popups #popup-5 .arrow {
			left: 280px;
			}

/* Live Messenger 
--------------------------------------- */
#live {
	padding: 0 30px 4px;
	background: #1b1f24;
	font-size: 1em;
	}
	/* Live Messenger Elements */
	#live .username {
		float: left;
		margin-right: 90px;
		padding-left: 15px;
		font-weight: bold;
		color: #fff;
		background: url(../i/ico-user.gif) no-repeat 0 50%;
		}
		#live .username A {
			color: #fff;
			text-decoration: none;
			}
	#live FORM UL {
		overflow:hidden;
		padding-top: 3px;
		}
	#live FORM UL LI {
		float: left;
		height: 28px;
		line-height: 28px;
		}
		#live FORM UL LI.input {
			width: 200px;
			margin: 0 6px 0 0;
			background: url(../i/lm-input-bg.png) no-repeat;
			}
			#live FORM UL LI.input I.cor-r {
				display: block;
				float: right;
				height: 28px;
				width: 6px;
				background: url(../i/lm-input-bg.png) no-repeat 100% 0;
				}
			#live FORM UL LI.input INPUT {
				float: left;
				width: 180px;
				height: 14px;
				margin: 2px 0 0 6px;
				padding: 6px 4px 4px;
				border: 0;
				color: #777;
				background: url(../i/lm-input.gif) repeat-x;
				text-align: center;
				}
			#live FORM UL .register {

				}
				#live FORM UL .register A {
					margin-left: 30px;
					padding-right: 10px;
					border-right: 1px solid #777;
					}
			#live FORM UL .forgot {
				margin-left: 10px;
				background: none;
				}
			/* Submit Button */
			#live .submit {
				height: 28px;
				padding: 0 6px 0 0 !important;
				background: url(../i/lm-button.png) no-repeat 100% 0;
				}
				#live .submit INPUT {
					height: 28px;
					padding: 0 20px 0 26px;
					background: url(../i/lm-button.png) no-repeat;
					border: 0;
					color: #fff;
					}
			/* Close Button */
			#live .close {
				float: right;
				padding-right: 20px;
				background: url(../i/close-button.gif) no-repeat 100% 50%;
				}
	/* Logged State */
	.lm-logged .username {
		margin-right: 30px !important;
		}
	.lm-logged A {
		padding: 0 10px;
		color: #2294ff;
		border-right: 1px solid #464748;
		}
		.lm-logged .last A {
			border-right: 0;
			}
		.lm-logged .nobr A {
			border: 0;
			color: #fc0;
			}
		.lm-logged .faqs {
			margin-left: 30px;
			}
/* Position messenger
--------------------------------------- */			
.position #header .browsers {
	position: absolute;
	top: 151px;
	right: 106px;
	float: none;
	display: block;
	margin: 0;
	}	
.position #header .about {
	left: 119px;
	padding-top: 30px;
	}	
	.position #header .about .about-outer .about-inner	{
		padding: 17px 60px 35px 40px;
		}
	.position #header .about #about-t-2,
	.position #header .about #about-b-2 {
		position: absolute;
		left: 0;
		width: 554px;
		}	
	.position #header .about #about-t-2	{
		top: 0;
		height: 30px;
		background: url(../i/promo/about-t-2.png) no-repeat;
		}	
	.position #header .about #about-b-2 {
		bottom: 0;
		height: 400px;
		background: url(../i/promo/about-b-2.png) no-repeat;
		}		
.position #header .download {
	top: 400px;
	left: 224px;
	z-index: 1;
	}	
.position #body UL {
	margin-left: -20px;
	}
/* Popups Positioning */
.position .popups #popup-1 {
	top: 196px;
	width: 38em;
	height: 35.5em;
	}
.position .popups #popup-2 {
	top: 158px;
	width: 50em;
	height: 39em;
	}
.position .popups #popup-3 {
	top: 257px;
	width: 38em;
	height: 30em;
	}	
.position .popups #popup-4 {
	top: 224px;
	width: 47em;
	height: 33em;
	}	
	.position .popups #popup-4 p.img	{
		float: right;
		margin-left: 20px;
		}
.position .popups #popup-5 {
	top: 147px;
	width: 38em;
	height: 40em;
	}
	.position .popups #popup-5 P IMG	{
		margin-top: 10px;
		}				
.position .footer {
	padding-left: 34px;
	}