@charset "utf-8";
/* CSS Document */

html, body {
	height: 100%;
	margin: 0;
	border: 0;
	font: 12px Arial, Helvetica, sans-serif normal;
	padding: 0;
}

body.left{
	background: #E49DC2 url(../img/bg_shim.png) repeat-x;
}

body.right{
	background: #B3CD9F url(../img/bg_shim_right.png) repeat-x;
}

#leftSide {
	width: 50%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	background: #E49DC2 url(../img/bg_shim.png) repeat-x;
	z-index: 1;
}

#leftSide .image, #rightSide .image{
	background-image: url(../img/home-page-bg-sprite.png);
	height: 400px;	
	position: absolute;
	top: 40px;
}

#leftSide .image{
	width: 327px;	
	right: 0;	
}

#rightSide .image{
	left: 0;	
	background-position: -327px;	
	width: 327px;
}

#leftSide a, #rightSide a{
	background:url(../img/home_dark_overlay.png);
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	text-indent: -2999px;
	z-index: 5;
}	

#leftSide a:hover, #rightSide a:hover{
	background: none;
}

#rightSide {
	width: 50%;
	height: 100%;
	position: absolute;
	right: 0;
	top: 0;
	background: #B3CD9F url(../img/bg_shim_right.png) repeat-x;
	z-index: 1;	
}

#verticalDivider{
	background: url(../img/home-vertical-line-shim.png) repeat-y;
	width: 24px;
	height: 100%;
	margin: 0 auto;
	z-index: 10;
	position: absolute;
	left: -12px;
	top: 0;
}
	
	#content {
		padding: 0;
		width: 985px;
		position: absolute;
	}
	
	.left #content{
		top: 35px;
		right: 0;
		min-height: 400px;
		background: url(../img/wispa-bar-left.png) top right no-repeat;
	}

	.right #content{
		width: 1030px;
		top: 35px;
		min-height: 400px;
		background: url(../img/wispa-bar-right.png) top left no-repeat;
	}
	
	#content h1 {
		font-size: 52px;
	}

	.white {
		color: #FFF;	
	}

	#content h2 {
		font-size: 32px;
	}


	#content p {
		font-size: 13px;
		color: #333;
	}
	
	#content p.first {	
		font-weight: bold;
		line-height: 20px;
		margin-top: 10px;
	}
	
	#content p a.view {
		color: #333;
		font-size: 14px;
		text-decoration: none;
		padding-left: 18px;
		background:url(../img/view-link-bg.png) no-repeat 0 1px;		
	}
	#content p a.view:hover {
		color: #EC2934;	
	}
	
	.right #content p a.view {
		background:url(../img/view-link-bg-right.png) no-repeat 0 1px;			
	}
	
	.right #content p a.view:hover {
		color: #4d4b99;
	}
		.left #homeText {
			width: 570px;
			padding-right: 400px;
			margin: 0 0 0 12px;
			height: 175px;
			float: left;
		}

		.right #homeText {
			width: 585px;
			padding-left: 420px;
			height: 175px;
			float: left;
			text-align: right;
		}
		
		.left h1, .left h2{
			color: #EC2934;
		}

		.right h1, .right h2{
			color: #4D4B99;
		}
		
		
		#homeList {
			width: 480px;
			min-height: 300px;
			float: left;
			background: url(../img/home-list-top.png) no-repeat;
		}
		
		.left #homeList{
			clear: both;
			padding: 3px 0 0 0;	
			
		}
		
		.right #homeList{
			width: 490px;
			overflow: hidden;
			margin: 0 0 0 0px;
		}

		#homeList > div{
			float: left;
			margin-bottom: 6px;
		}
		
			#homeList #videoList1, #homeList #videoList2{
				height: 138px;
				width: 490px;
			}
	
			#homeList .video{
				position: relative;
				height: 134px;
				width: 486px;
				background: url(../img/home-list-item.png) no-repeat;
			}

			.right #homeList .video{
				background: url(../img/home-list-item-right.png) no-repeat;
			}

				#homeList .video h2, #homeList .video p{
					padding: 10px 200px 0 6px;
				}
				
			#homeList .video img {
				position: absolute;
				right: 15px;
				top: 16px;
			}
			
			#homeList .video img.btn {
				top: 38px;
				right: 70px;
			}
			

			#homeList .promo{
				height: 106px;
				width: 489px;
				background:url(../img/bottom_promo.png)
			}
			

				#homeList .promo a{
					display: block;
					float: left;
					height: 106px;
					text-indent: -2999px;
				}
				#homeList .promo a.wispa{
					width: 165px;
				}
				#homeList .promo a.facebook{
					width: 160px;						
				}
				#homeList .promo a.bar-wars{
					width: 160px;
				}
				
				
				
		#homeFlash{
			float: left;
			width: 470px;
			height: 390px;
			background: #93c1e3;
			padding: 13px 0 0 24px;
		}
		
		.left #homeFlash {
			background: url(../img/facebook-bg-left.png) no-repeat;				
		}
		
		.right #homeFlash {
			clear: both;	
			margin-left: 40px;
			background: url(../img/facebook-bg-right.png) no-repeat;
			padding-left: 14px;
		}
		
		
		#videoPageContent{
			width: 100%;
			float: left;
			background: url(../img/video-background-left.png) no-repeat;
			min-height: 390px;
		}
		
		.right #videoPageContent{
			background: url(../img/video-background-right.png) no-repeat;	
			margin-left: 42px;
		}
		
		#videoContainer{
			float: left;
			border: 4px solid white;
			width: 440px;
			height: 330px;
			margin: 15px 10px 0 15px;
		}
		
		.right #videoContainer{
			margin-right: 28px;
		}
				.left #videoPageContent #homeList{
					clear: none;	
				}
		
		
	#content p a.back {
		color: #333;
		font-size: 24px;
		text-decoration: none;
		padding-left: 26px;
		background:url(../img/back-link-bg.png) no-repeat 0 6px;		
	}
	#content p a.back:hover {
		color: #EC2934;	
	}
	
	.right #content p a.back {
		background:url(../img/back-link-bg-right.png) no-repeat 0 4px;			
	}
	
	.right #content p a.back:hover {
		color: #4d4b99;
	}		
		
		
	.hidden {
		visibility: hidden;	
		position: absolute;
		left: -2999px;
		top: -2999px;
	}