/* -------------------------------------------------------------------- */
/*                                                                      */
/*  English Heritage - Climate Change and Your Home                     */
/*                   - Click-through house selector styling             */
/*                                                                      */
/*  Author: Mark Hurrell                                                */
/*  Date: Dec 2007                                                      */
/*  Company: Message                                                    */
/*  URL: www.message.uk.com                                             */
/*                                                                      */
/*                                                                      */
/*      Table of Contents                                               */
/*                                                                      */
/*  1.  General Layout:                                       line .36  */
/*  2.  Location selector                                    line .154  */
/*      3.  Location selector hot spots                      line .221  */
/*      4.  Location selector hover images                   line .384  */
/*  5.  House age selector                                   line .494  */
/*  6.  House type selector                                  line .559  */
/*                                                                      */
/* -------------------------------------------------------------------- */












/*-------------------------------------------------------------------------------------*/
/*                                                                                     */
/*      1.  General layout                                                             */
/*                                                                                     */
/*-------------------------------------------------------------------------------------*/

#selector_body {
		font-family: Arial, sans-serif;
		line-height: 1.4;
		color: black;
		display: block;
		position: relative;
		background: transparent;
		padding: 95px 10px 5px 10px;
		background-position: top center;
		background-repeat: no-repeat;
		background-image: url("images/branding_selector.png");
}

		#selector_container {
				position: relative;
				background-color: transparent;
				text-align: left;
				height: 449px;
				/* border: 1px solid black; */
		}
		
		* html #selector_container {
				height: 449px;
				h\eight: 399px;
		}
		
		#selector_body #selector_container.confirmation {
				height: 399px;
		}
		
				#instruction {
						color: #165077;
						font-size: 1.8em;
						width: 800px;
						margin-top: 30px;
						margin-bottom: 20px;
						float: left;
						margin-left: 20px;
				}
				
				*html #instruction {
						position: relative;
						margin-left: 10px;
				}
		
				#thankyou {
						width: 400px;
						font-size: 1.6em;
						margin-left: 450px;
						margin-top: 30px;
						position: relative;
				}
				
				*html #thankyou {
						position: relative;
						top: 20px;
						left: 0px;
						width: 400px;
				}	
				
						#thankyou em {
								color: #f25d22;
						}
		

#next {
		position: absolute;
		font-size: 1.4em;
		right: 10px;
		bottom: 0;
		display: block;
		padding: 2px 20px;
		color: #FFFFFF;
		background-color: #649db9;
		z-index: 800;
}

#confirm {
		margin: 20px 0 0 20px;
		position: relative;
		top: 1em;
		left: 0;
}

		.confirmation #confirm {
				margin: 40px 0 0 450px;
		}

#reset_confirm {
		margin: 20px 0 0 20px;
		position: absolute;
		top: 5em;
		left: 0;
}
		
.confirmation_image {
		position: absolute;
		margin-top: 20px;
		margin-left: 20px;
}












/*-------------------------------------------------------------------------------------*/
/*                                                                                     */
/*     2.   Location Selector                                                          */
/*                                                                                     */
/*-------------------------------------------------------------------------------------*/


#map {
	width: 229px;
	height: 393px;
	background: transparent url(images/map.png) top left;
	overflow: hidden;
	padding: 0;
	position: absolute;
	top: 30px;
	left: 360px;
	z-index: 1160;
}

		#map a {
			position: absolute;
			display: block;
			overflow: hidden;
			z-index: 180;
		/* 	border: 1px solid black; */
		}

		#map span {
			position: absolute;
			left: -10000px;
		}

		#map i {
			position: absolute;
			overflow: hidden;
		}

				#map i.hover {
					display:block;
				}

#location_details {
		width: 160px;
		display: block;
		background-color: #999999;
		padding: 1px;
		color: #FFFFFF;
		font-weight: 800;
		position: absolute;
		right: 200px;
		top: 200px;
		z-index: 1161;
}

		#location_details p {
				margin: 4px 5px;
		}

		#location_details ul {
				display: block;
				background-color: #ffffff;
				color: #000000;
				margin; 0;
				padding: 4px;
		}


/*-----------------------------------------*/
/*                                         */
/*        3.     hot spots                 */
/*                                         */
/*-----------------------------------------*/

		/*   These so-called "hot spots" are invisible links, grouped and tiled to   */ 
		/*   approximately cover each regional area [for example, #n_w_01 & #n_w_02  */ 
		/*   cover the North West region of the map]. When either link is hovered    */ 
		/*   over javascript triggers an invisible object positioned beneath the     */ 
		/*   links into becoming visible - thus providing the link hover state.      */
		/*                                                                           */
		/* 	 The relevent javascript file can be found at;                           */
		/* 	                                            "scripts/click-through.js"   */

				#n_w_01 {
					top: 170px;
					left: 85px;
					height: 85px;
					width: 23px;
				}

				#n_w_02 {
					top: 215px;
					left: 105px;
					height: 35px;
					width: 10px;
				}

				#n_e_01 {
					top: 135px;
					left: 112px;
					height: 55px;
					width: 20px;
				}

				#n_e_02 {
					top: 155px;
					left: 132px;
					height: 35px;
					width: 20px;
				}

				#y_h_01 {
					top: 193px;
					left: 108px;
					height: 20px;
					width: 10px;
				}

				#y_h_02 {
					top: 193px;
					left: 118px;
					height: 40px;
					width: 55px;
				}

				#y_h_03 {
					top: 233px;
					left: 127px;
					height: 7px;
					width: 18px;
				}

				#e_m_01 {
					top: 234px;
					left: 148px;
					height: 34px;
					width: 36px;
				}

				#e_m_02 {
					top: 234px;
					left: 118px;
					height: 14px;
					width: 8px;
				}

				#e_m_03 {
					top: 241px;
					left: 126px;
					height: 27px;
					width: 20px;
				}

				#e_m_04 {
					top: 268px;
					left: 140px;
					height: 30px;
					width: 16px;
				}

				#e_e_01 {
					top: 268px;
					left: 159px;
					height: 45px;
					width: 60px;
				}

				#e_e_02 {
					top: 248px;
					left: 185px;
					height: 20px;
					width: 35px;
				}

				#l_01 {
					top: 315px;
					left: 163px;
					height: 18px;
					width: 23px;
				}

				#s_e_01 {
					top: 320px;
					left: 187px;
					height: 13px;
					width: 30px;
				}

				#s_e_02 {
					top: 333px;
					left: 128px;
					height: 25px;
					width: 85px;
				}

				#s_e_03 {
					top: 300px;
					left: 130px;
					height: 32px;
					width: 27px;
				}

				#s_w_01 {
					top: 300px;
					left: 100px;
					height: 60px;
					width: 27px;
				}

				#s_w_02 {
					top: 330px;
					left: 20px;
					height: 50px;
					width: 80px;
				}

				#w_m_01 {
					top: 258px;
					left: 90px;
					height: 40px;
					width: 35px;
				}

				#w_m_02 {
					top: 268px;
					left: 125px;
					height: 30px;
					width: 13px;
				}


/*-----------------------------------------*/
/*                                         */
/*       4.    hover images                */
/*                                         */
/*-----------------------------------------*/


				#north_west {
					top: 160px;
					left: 78px;
					width: 47px;
					height: 102px;
					background: transparent url(images/map_n_w.png) no-repeat top left;
					z-index: 161;
					display: none;
				}

				#north_east {
					top: 130px;
					left: 103px;
					width: 52px;
					height: 66px;
					background: transparent url(images/map_n_e.png) no-repeat top left;
					z-index: 162;
					display: none;
				}

				#yorkshire_humber {
					top: 186px;
					left: 106px;
					width: 75px;
					height: 60px;
					background: transparent url(images/map_y_h.png) no-repeat top left;
					z-index: 163;
					display: none;
				}

				#east_midlands {
					top: 231px;
					left: 120px;
					width: 68px;
					height: 74px;
					background: transparent url(images/map_e_m.png) no-repeat top left;
					z-index: 164;
					display: none;
				}
		
				#east_england {
					top: 253px;
					left: 156px;
					width: 70px;
					height: 69px;
					background: transparent url(images/map_e_e.png) no-repeat top left;
					z-index: 165;
					display: none;
				}

				#london {
					top: 316px;
					left: 162px;
					width: 28px;
					height: 20px;
					background: transparent url(images/map_l.png) no-repeat top left;
					z-index: 166;
					display: none;
				}

				#south_east {
					top: 294px;
					left: 121px;
					width: 102px;
					height: 71px;
					background: transparent url(images/map_s_e.png) no-repeat top left;
					z-index: 167;
					display: none;
				}

				#south_west {
					top: 299px;
					left: 15px;
					width: 120px;
					height: 91px;
					background: transparent url(images/map_s_w.png) no-repeat top left;
					z-index: 168;
					display: none;
				}

				#west_midlands {
					top: 247px;
					left: 87px;
					width: 58px;
					height: 63px;
					background: transparent url(images/map_w_m.png) no-repeat top left;
					z-index: 169;
					display: none;
				}














/*-------------------------------------------------------------------------------------*/
/*                                                                                     */
/*     5.   House Age Selector                                                         */
/*                                                                                     */
/*-------------------------------------------------------------------------------------*/

#choice_2 {
		width: 800px;
		margin: 0 auto;
		clear: both;
		display: block;
}

				#choice_2 li {
						margin: 0;
						padding: 0;
						display: block;
						float: left;
				}

								li #earlyHome {
										width: 215px;
										height: 251px;
										display: block;
										float: left;
								}

								li #georgian {
										width: 140px;
										height: 251px;
										display: block;
										float: left;
								}

								li #victorian {
										width: 242px;
										height: 251px;
										display: block;
										float: left;
								}

								li #interWar {
										width: 203px;
										height: 251px;
										display: block;
										float: left;
								}

								#choice_2 li img {
										border: none;
								}














/*-------------------------------------------------------------------------------------*/
/*                                                                                     */
/*     6.   House Type Selector                                                        */
/*                                                                                     */
/*-------------------------------------------------------------------------------------*/

#choice_3 {
		width: 600px;
		margin: -10px 0 0 10px;
		position: relative;
		float: left;
}

* html #choice_3 {
		margin-left: 15px;
}

				#choice_3 li {
						width: 102px;
						height: 138px;
						margin-right: 18px;
						margin-bottom: 18px;		
						display: block;
						float: left;
				}

								#choice_3 li a {
										border: none;
										height: 138px;
										width: 102px;
										display: block;
										overflow: hidden;
								}
								
								#choice_3 li a span {
										position: absolute;
										left: -2000px;
										font-size: 0.1%;
								}
								
										#selector_house_01 {
												background-image: url(images/selector_house_1.jpg);
												background-position: 0 0;
										}
										
										#selector_house_01:hover {
												background-image: url(images/selector_house_1.jpg);
												background-position: -102px 0;
										}
										
										#selector_house_01.current {
												background-image: url(images/selector_house_1.jpg);
												background-position: -204px 0;
										}
										
										#selector_house_02 {
												background-image: url(images/selector_house_2.jpg);
												background-position: 0 0;
										}

										#selector_house_02:hover {
												background-image: url(images/selector_house_2.jpg);
												background-position: -102px 0;
										}

										#selector_house_02.current {
												background-image: url(images/selector_house_2.jpg);
												background-position: -204px 0;
										}

										#selector_house_03 {
												background-image: url(images/selector_house_3.jpg);
												background-position: 0 0;
										}

										#selector_house_03:hover {
												background-image: url(images/selector_house_3.jpg);
												background-position: -102px 0;
										}

										#selector_house_03.current {
												background-image: url(images/selector_house_3.jpg);
												background-position: -204px 0;
										}

										#selector_house_04 {
												background-image: url(images/selector_house_4.jpg);
												background-position: 0 0;
										}

										#selector_house_04:hover {
												background-image: url(images/selector_house_4.jpg);
												background-position: -102px 0;
										}

										#selector_house_04.current {
												background-image: url(images/selector_house_4.jpg);
												background-position: -204px 0;
										}

										#selector_house_05 {
												background-image: url(images/selector_house_5.jpg);
												background-position: 0 0;
										}

										#selector_house_05:hover {
												background-image: url(images/selector_house_5.jpg);
												background-position: -102px 0;
										}

										#selector_house_05.current {
												background-image: url(images/selector_house_5.jpg);
												background-position: -204px 0;
										}

										#selector_house_06 {
												background-image: url(images/selector_house_6.jpg);
												background-position: 0 0;
										}

										#selector_house_06:hover {
												background-image: url(images/selector_house_6.jpg);
												background-position: -102px 0;
										}

										#selector_house_06.current {
												background-image: url(images/selector_house_6.jpg);
												background-position: -204px 0;
										}

										#selector_house_07 {
												background-image: url(images/selector_house_7.jpg);
												background-position: 0 0;
										}

										#selector_house_07:hover {
												background-image: url(images/selector_house_7.jpg);
												background-position: -102px 0;
										}

										#selector_house_07.current {
												background-image: url(images/selector_house_7.jpg);
												background-position: -204px 0;
										}

										#selector_house_08 {
												background-image: url(images/selector_house_8.jpg);
												background-position: 0 0;
										}

										#selector_house_08:hover {
												background-image: url(images/selector_house_8.jpg);
												background-position: -102px 0;
										}

										#selector_house_08.current {
												background-image: url(images/selector_house_8.jpg);
												background-position: -204px 0;
										}

										#selector_house_09 {
												background-image: url(images/selector_house_9.jpg);
												background-position: 0 0;
										}

										#selector_house_09:hover {
												background-image: url(images/selector_house_9.jpg);
												background-position: -102px 0;
										}

										#selector_house_09.current {
												background-image: url(images/selector_house_9.jpg);
												background-position: -204px 0;
										}

										#selector_house_10 {
												background-image: url(images/selector_house_0.jpg);
												background-position: 0 0;
										}

										#selector_house_10:hover {
												background-image: url(images/selector_house_0.jpg);
												background-position: -102px 0;
										}

										#selector_house_10.current {
												background-image: url(images/selector_house_0.jpg);
												background-position: -204px 0;
										}

#choice_3_confirm {
		float: right;
		position: relative;
		margin-top: 0;
		margin-right: 100px;
}

* html #choice_3_confirm {
		margin-right: 35px;
}