/*
	Filename         : 	home.css
	Created by       : 	Ashley Nolan
	Created          : 	03/03/2009
	Last Updated     : 	03/03/2009
	Comments         : 	Styling for RSPCA - Election Microsite - homepage specific
*/

div#contentLeft {
	float:left;
	clear:left;
	width:568px;
	position:relative;
	z-index:10;
}
div#contentRight {
	float:right;
	width:412px;
	position:relative;
	z-index:10;
	top:0;
}

.home #main #banner {
	float:left;
	height:202px;
	margin:105px 0 0 20px;
	overflow:hidden;
}
	.home #main #banner h2 {
		font-size:51px;
		line-height:1.1em;
		letter-spacing:-4px;
		width:310px;
		background:url('../images/arrow_doublePink.gif') no-repeat bottom right;
		clear:left;
	}
		.home #main h2.topic1 {
			background-position:180px 73px !important;
		}
		.home #main h2.topic2 {
			background-position:210px 73px !important;
		}
		.home #main h2.topic3 {
			background-position:266px 22px !important;
		}
		.home #main h2.topic4 {
			background-position:274px 73px !important;
		}
		
		
		img.circus1 {
			width:487px;
			height:690px;
		}
		img.circus2 {
			left:40px;
			width:600px;
			height:734px;
		}
		img.circus3 {
			width:453px;
			height:764px;
		}
		img.dog1 {
			width:360px;
			height:689px;
		}
		img.dog2 {
			left:260px;
			width:403px;
			height:766px;
		}
		img.labelling1 {
			width:423px;
			height:449px;
		}
		img.testing2 {
			width:539px;
			height:738px;
		}
		img.testing1 {
			left:210px;
			width:515px;
			height:456px;
		}
		img.testing2 {
			width:318px;
			height:555px;
		}
	
	.home #main #banner p {
		font-size:1.4em;
		line-height:1.4em;
		color:#1F3125;
		float:left;
		clear:left;
		width:310px;
		margin-bottom:90px;
	}


.bannerNav {
	float:left;
	display:inline;
	clear:left;
	width:530px;
	position:relative;
	z-index:10;
	margin:20px 0 0 20px;
}
	.bannerNav li {
		float:left;
		display:inline;
		margin-right:2px;
	}
		.bannerNav li a {
			color:#fff;
			font-size:1.2em;
			font-weight:bold;
			background:url('../images/button_greyRight.png') no-repeat right top;
			display:block;
		}
			.bannerNav li a span {
				display:block;
				padding:10px 8px 10px 18px;
				background:url('../images/button_bannerNav.png') no-repeat left top;
				margin-right:12px;
			}
				
		
	#main .bannerNav li.green a.active,
	#main .bannerNav li.green a:hover {
		background:url('../images/button_greenRight.png') no-repeat right top;
	}
		.bannerNav li.green a.active span,
		.bannerNav li.green a:hover span {
			background:url('../images/button_bannerNav.png') no-repeat -2000px top;
		}
		
	#main .bannerNav li.pink a.active,
	#main .bannerNav li.pink a:hover {
		background:url('../images/button_pinkRight.png') no-repeat right top;
	}
		.bannerNav li.pink a.active span,
		.bannerNav li.pink a:hover span {
			background:url('../images/button_bannerNav.png') no-repeat -1000px top;
		}
		
	.bannerNav li.blue a.active,
	.bannerNav li.blue a:hover {
		background:url('../images/button_blueRight.png') no-repeat right top;
	}
		.bannerNav li.blue a.active span,
		.bannerNav li.blue a:hover span {
			background:url('../images/button_bannerNav.png') no-repeat -1500px top;
		}
	
	.bannerNav li.orange a.active,
	.bannerNav li.orange a:hover {
		background:url('../images/button_orangeRight.png') no-repeat right top;
	}
		.bannerNav li.orange a.active span,
		.bannerNav li.orange a:hover span {
			background:url('../images/button_bannerNav.png') no-repeat -500px top;
		}

.gradientBox {
	float:left;
	display:inline;
	background:url('../images/box_gradientBottom.png') no-repeat left bottom;
	margin:5px 0 0 14px;
}
	.gradientBox .gradientBottom {
		width:496px;
		background:url('../images/box_gradientBgTop.png') no-repeat left top;
		padding:18px 20px 0;
		margin-bottom:24px;
		position:static !important;
	}

.poll {
	position:relative;
}
	.poll li {
		clear:left;
		overflow:hidden;
		height:42px;
		margin-top:5px;
	}
		.poll li img {
			float:left;
			margin-right:10px;
			display:inline;
		}
		.poll li.question {
			float:right;
			margin-top:0;
			font-family:"Myriad pro", Arial, Helvetica, sans-serif;
		}
			.poll li.question p {
				text-align:right;
				font-size:1.4em;
				font-weight:bold;
				width:200px;
				margin-right:10px;
			}
		.poll li label {
			font-size:1.4em;
			color:#333;
			float:left;
			margin-top:10px;
			width:160px;
			letter-spacing:-1;
		}	
		.poll li.radio input {
			margin-top:10px;
		}
			span.radio {
				background:url('../images/poll_radio.jpg') no-repeat left top;
				width:51px;
				height:42px;
				display:block;
				float:left;
				cursor:pointer;
			}
		
		.poll li.submit {
			float:right;
			position:absolute;
			bottom:14px;
			right:30px;
			width:163px;
			height:144px;
		}
			.poll li.submit input {
				background:url('../images/button_vote.png') no-repeat left 7px;
				border:0;
				color:#fff;
				font-size:0.1em;
				text-align:left;
				float:right;
				width:138px;
				height:144px;
				margin-top:0;
				cursor:pointer;
			}
			
				.poll li.submit input:hover {
					background:url('../images/button_vote.png') no-repeat right 7px;	
				}
	/* Results */
	.easypoll_bar {
		float:left;
		width:260px;
		display:block;
		background:url('../images/poll_bar.gif') no-repeat left bottom;
	}
	ul .hidden {
		display:none;
	}
			.easypoll_bar .easypoll_inner {
				height:35px;
				color:#fff;
				text-align:right;
				position:relative;
				
			}
				.easypoll_bar .easypoll_inner span {
					width:auto !important;
					float:none;
					display:block !important;
					padding:10px 0 0 6px;
					height:25px;
					margin-right:12px;
					font-size:1.2em;
					font-weight:bold;
					text-align:left;
				}
				
			#choice2 .easypoll_bar .easypoll_inner {
				background:url(../images/button_pinkRight.png) no-repeat right bottom;
			}
				#choice2 .easypoll_bar .easypoll_inner span {
					background:url(../images/button_pinkLeft.png) no-repeat left bottom;
				}
			#choice3 .easypoll_bar .easypoll_inner {
				background:url(../images/button_blueRight.png) no-repeat right bottom;
			}
				#choice3 .easypoll_bar .easypoll_inner span {
					background:url(../images/button_blueLeft.png) no-repeat left bottom;
				}
			#choice1 .easypoll_bar .easypoll_inner {
				background:url(../images/button_greenRight.png) no-repeat right bottom;
			}
				#choice1 .easypoll_bar .easypoll_inner span {
					background:url(../images/button_greenLeft.png) no-repeat left bottom;
				}
			#choice4 .easypoll_bar .easypoll_inner {
				background:url(../images/button_orangeRight.png) no-repeat right bottom;
			}
				#choice4 .easypoll_bar .easypoll_inner span {
					background:url(../images/button_orangeLeft.png) no-repeat left bottom;
				}
				
				
			
	li.results {
		width:100%;
		padding-bottom:0 !important;
	}
			
			
.jaggedBox {
	float:left;
	display:inline;
	background:url('../images/box_jaggedTop.png') no-repeat left top;
	margin:5px 0 0 10px;
	position:relative;
	z-index:10;
}
	.jaggedBox .jaggedBoxBottom {
		background:url('../images/box_jaggedBottom.png') no-repeat left bottom;
		width:502px;
		padding:15px 25px 80px 20px;
		overflow:hidden;
		height:1%;
	}
	
	.timeline h2 {
		font-family:"Myriad pro", Arial, Helvetica, sans-serif;
		font-size:2.5em;
		line-height:1.4em;
		overflow:hidden;
		height:1%;
	}
		.timeline .right {
			float:right;
			display:inline;
			position:relative;
			top:-10px;
			width:400px;
			margin-right:40px;
		}
			.timeline h2 a {
				color:#000;
				cursor:pointer;
				float:left;
			}
				.timeline h2 a:hover {
					color:#D4387F;
					text-decoration:none;
				}
			.timeline h2.right a {
				float:left;
			}
			
			.timeline h2 .pink {
				color:#D4387F;
			}
		

/* Forum Link */
#forumLink {
	width:163px;
	height:62px;
	background:url('../images/forum_button.gif') no-repeat left top;
	display:inline;
	text-indent:-99999px;
	float:right;
	margin:60px 22px 25px 0;
}

			
/* Youtube Wrapper */

#contentRight #ytWrapper {
	float:left;
	margin-top:26px;
	width:100%;
	background:url('../images/youtube_bottom.png') no-repeat left bottom;
}
	#ytWrapper #ytPlayer {
		position:relative;
		top:-25px;
		background:url('../images/youtube_bg.png') no-repeat left top;
		display:block;
		min-height:228px;
		height:auto !important;
		height:228px;
		padding:30px 0 0 20px;
	}
	
	#ytWrapper ul {
		float:left;
		width:365px;
	}
		#ytWrapper ul li {
			float:left;
			display:inline;
			margin-bottom:6px;
			font-size:1.2em;
			
		}
			#ytWrapper ul li a {
				display:block;
				color:#000;
				margin:0 6px;
				line-height:0;
				border:1px solid #fff;
			}
				#ytWrapper ul li a img {
					width:45px;
				}
				#ytWrapper .videoTitle {
					color:#1A3E7C;
					font-weight:bold;
				}
				
				
/* Welfare box */

#welfare {
	margin:6px 0 0;
	background:url('../images/box_jaggedBottom_blue.png') no-repeat left bottom;
	positon:relative;
}
	#welfare .jaggedBoxBottom {
		width:362px;
		margin-bottom:22px;
		padding:15px 15px 12px;
		background:url('../images/box_jaggedTop_blue.png') no-repeat left top;
	}
		#welfare img {
			position:absolute;
			top:2px;
			right:24px;
			z-index:20;
		}
		#welfare h3 {
			letter-spacing:-1px;
			font-family:"Myriad pro", Arial, Helvetica, sans-serif;
		}
		#welfare p {
			font-size:1.4em;
			letter-spacing:-1px;
			padding-bottom:12px;
			position:absolute;
			top:42px;
		}
		
		
				
/* Twitter box */

#tweets {
	margin:6px 0 0;
	background:url('../images/box_jaggedTop_black.png') no-repeat left top;
	positon:relative;
}
	#tweets .jaggedBoxBottom {
		width:363px;
		padding:20px 21px 35px 15px;
		background:url('../images/box_jaggedBottom_black.jpg') no-repeat left bottom;
	}
		#tweets h2 {
			font-family:"Myriad pro", Arial, Helvetica, sans-serif;
			color:#fff;
			float:left;
			letter-spacing:-1px;
			width:270px;
		}
		#tweets img {
			position:absolute;
			top:-39px;
			right:-14px;
		}

		#tweets ul {
			clear:left;
			background:#fff;
			padding:6px 10px;
		}
			#tweets ul li {
				background:url('../images/hr_jagged.gif') no-repeat left bottom;
				padding-bottom:12px;
				margin-bottom:4px;
			}
			#tweets ul li.last {
				background:none;
				padding-bottom:0;
			}
				#tweets ul li div {
					background:url('../images/arrow_doublePink_list.gif') no-repeat right 30px;
					width:auto;
					padding:0 20px 0 0;
					word-wrap: break-word;
				}
				#tweets p span {
					color:#CB1266;
					font-weight:bold;
				}
				#tweets .posted {
					font-size:1.3em;
					font-weight:bold;
				}

/* PNG Fix
************************************************************************************************************************/

.bannerNav li a,
.gradientBox,
.gradientBox .gradientBottom,
#contentRight #ytWrapper,
#ytWrapper #ytPlayer,
.jaggedBox,
.jaggedBox .jaggedBoxBottom {
	behavior: url('/assets/templates/js/iepngfix.htc');
}