* {
	margin: 0;
	padding: 0;
}

html {
	height:100%;
	width:100%;
}

em {
	font-style:normal;
}

body {
	font-size: 30px;
	font-family: 'Trebuchet MS','Arial', Sans-Serif;
	color:#564b47;
	width: 100%;
	height: 100%;
	background: #6d6e71;
	text-align: center;
}

#wrap {
	width:986px;
	height:700px;
	margin: 0 auto;
	position:relative;
	overflow:hidden;
	background: #6d6e71;
	text-align: left;
}


/*Remove text selection hightlights
::selection { background: transparent;}*/

.content {
	position:relative; 
	width:986px;
	height:700px;
}
a{
	text-decoration: none;
	outline:none;
	/*Disable text selection
	-webkit-user-select: none;*/
}

h1 {
	font-size:47px;
	line-height: 85px;
	color: #FFF;
	font-weight: bold;
	padding-bottom: 20px;
}

#screen1,#screen2{
	overflow:hidden;
	background: #6d6e71;
	width: 986px;
	height: 700px;
	top: 0;
	left: 0;
	position: absolute;
	z-index: 11;
}
#screen2{
	z-index: 10;
}

/*======================================
		Navigation buttons
=======================================*/

.footer {
	clear:both;
	height:73px;
	float:left;
	position:absolute;
	bottom:23px;
	left:31px
}
.prev {

	background: url(/src/assets/images/prev.gif) top left no-repeat;
	width: 190px;
	height: 73px;
	color: #FFF;
	display: block;
	text-indent:-9999;mm
	position: absolute;
	left: 27px;
	bottom: 14px;
}
.next{
	background: url(/src/assets/images/next2.gif) top right no-repeat;
	width: 136px;
	height: 67px;
	padding-right:74px;
	color: #FFF;
	display: block;
	text-decoration: none;
	line-height:67px;
	font-size: 20px;
	position: absolute;
	right: 22px;
	bottom: 14px;
}
.inActive{
	background: url(/src/assets/images/next.gif) top right no-repeat;
	cursor: text;	
}
.start{
	color: #FFF;
	display: block;
	text-decoration: none;
	font-size: 19px;
	text-indent:-9999;
	position: absolute;
	left:31px;
	top: 25px;	
	padding: 0 0 0 80px;	
	background: url(/src/assets/images/startAgain.gif) top left no-repeat;
	width: 160px;
	height: 73px;	
}

/*========================================
 * 		Start Screen
 ========================================*/	
.startScreen{
	background: #FFF;
	overflow: hidden;
	}
.left{
	background: #4d4d4f;
	width: 489px;
	height: 907px;
	padding:76px 20px 0 31px;
	float: left;
	}
	.left h1 em{
		font-style: normal;
	}
.right{
	float: right;
	width: 1137px;
	height: 983px;
	margin-left:3px;
}
p.intro{
	float: left;
	width: 1652px;
	height: 57px;
	padding: 16px 0 0 28px;
	display: block;
	clear: both;
	background: #4d4d4f;
	margin-top: 3px;
	font-size: 33px;
	color: #FFF;
	font-family: "Congress-ExtraBold";
	letter-spacing: -0.02em;	
	}
	p.intro em{
		font-style: normal;
		color: #00aeef;
		letter-spacing: -0.03em;
	}

/*========================================
 * 		Breed Size Selection Screen
 ========================================*/
.breedSizeWrapper{
	overflow: hidden;
	padding: 78px 110px 0 31px;
	background: url(/src/assets/images/questionBg.gif) 35px 164px no-repeat;	
	}
	.breedSizeWrapper .questionWrap{
		margin-left: 180px;
	}
	.breedSizeWrapper h1{
		font-size: 47px;
		padding: 30px 20px 25px 50px;
		line-height: 60px;
		font-weight:normal;	
		color: #000;	
	}
	.breedSizeWrapper .hightlighInfoWrap{
		display: none;
	}	
	.breedSizeWrapper .hightlighInfo p{
		padding-bottom: 10px;
	}
	.dogSizes{
		padding-left: 222px;
		overflow: hidden;
		clear:both;
		padding-top: 19px;
		}
		.dogSizes a{
			display: block;
			float: left;
			width: 141px;
			height: 195px;
			padding: 12px 30px 0 14px;
			background: url(/src/assets/images/sizeFrame.gif) top left no-repeat;
			color: #FFF;
			font-size: 18px;
		}
		.dogSizes a.selected{
			background: url(/src/assets/images/sizeFrameSelected.gif) top left no-repeat;
			color: #4d4d4f;
		}
		.dogSizes a.blank{
			display: none;
		}		
		.dogSizes a em{
			font-style: inherit;
			padding: 6px 0 0 2px;
			display: block;
		}
	.breedSizeWrapper .breedInfo{
		padding-right: 175px;
		width: 215px;
	}
	.breedsExample{
		padding-left:222px;
		float:left;
	}
		.breedsExample div {
			float: left;
			font-weight:bold;
			width:141px;
			display:inline;
			margin: 0 30px 0 14px;
			font-size: 19px;
			color: #4d4d4f;
		}

/*========================================
 * 		Select a breed Screen
 ========================================*/	
.selections{
	padding: 26px 0 0 31px;
	}
	.selections h1{
		line-height:47px;
		padding-bottom:10px;
	}
	.sizeOptions{
		overflow: hidden;
		width: 308px;
		height: 66px;
		padding: 0 0 1px 0;
		background: url(/src/assets/images/smallBreed.gif) top right no-repeat; 
	}
	.sizeOptions.medium {
		background: url(/src/assets/images/mediumBreed.gif) top right no-repeat; 
	}	
	.sizeOptions.large {
		background: url(/src/assets/images/largeBreed.gif) top right no-repeat; 
	}
	.sizeOptions a{
		display: block;
		width: 34px;
		height: 60px;
		float: right;
		background: none;		
	}
	.sizeOptions a.medium{
		padding-left: 4px;
		width: 44px;
	}
	.sizeOptions a.large{
		width: 47px;
		padding-left: 9px;
	}
	.sizeOptions h3{
		color: #fff200;
		font-size: 20px;
		display: block;
		float: left;	
		padding: 41px 0 0 0;	
		line-height: 32px;
	}
	.sizeOptions h3:first-letter{
		text-transform: uppercase;
	}
	.selections a.breedSelection{ 
	}
	.paginators{
		position: absolute;
		right: 23px;
		top: 153px;	
		width: 400px;	
		overflow: hidden;
	}
	.paginators p{
		font-size: 20px;		
		font-family: "Congress-ExtraBold";
		color: #FFF;	
		line-height: 24px;	
		display: block;
		float: left;
		width: 196px;
		text-align: right;
		padding: 42px 10px 0 0; 	
	}
	.paginators a{
		width: 97px;
		height: 100px;
		float: left;
		display: block;
	}	
	.dogBreeds{
		width: 928px;
		height:435px;
		overflow:hidden;
		margin-top:20px;
		position: relative;
	}	
	.dogBreeds .breedSelection{
		top: 0;
		left: 0;
		position: absolute;
	}
	a.breedSelection{
		background: url(/src/assets/images/thumbFrame.gif) top left no-repeat;
		display: block;
		height: 182px;
		float:left;
		width: 144px;
		padding:14px 14px 14px 16px;
		text-decoration: none;
		font-size: 28px;
		color: #FFF;
	}
	a.breedSelection.selected{
		background: url(/src/assets/images/thumbFrameSelected.gif) top left no-repeat;
		color: #4d4d4f;
	}
	a.breedSelection em{ 	
		font-style: normal;
		font-weight:bold;
		font-size:19px;
		float:left;
		width:144px;
		line-height: 32px;
	}
	a.breedSelection.last{
		margin-right: 0;
	}
	a.breedSelection em.long{
		display:block;
		float:left;
		width:144px;
		min-height:47px;
		height:auto !important;
		height: 47px;
		font-size: 13px;
		line-height:14px;
		font-weight:bold;
		padding-top: 2px;	
	}	
	.nextBreedSelections{
		background: url(/src/assets/images/selectNext.gif) top right no-repeat;
		bottom: 0;
		right: 4px;
		position: absolute;
		text-decoration:none;
		width:180px;
		height: 210px;
		color: #FFF;
		font-size: 18px;
		text-align: bottom;
	}
	.prevBreedSelections{
		background:transparent url(/src/assets/images/selectNext.gif) no-repeat scroll right top;
		color:#FFFFFF;
		font-size:18px;
		height:210px;
		position:absolute;
		text-decoration:none;
		width:180px;
		background: url(/src/assets/images/selectPrev.gif) top left no-repeat;
		top: 0;
		left: 0;
	}
	
	
	
	
	.nextBreedSelections.inActive, .prevBreedSelections.inActive{
		display: none;
	}
	.nextBreedSelections em, .prevBreedSelections em{
		color: #fff200;
		font-size: 16px;
		font-style: normal;
		position:absolute;
		right:18px;
		bottom:24px;
	}
	
	.prevBreedSelections em {
		bottom:24px;
		left:22px;
	}
	
/*========================================
 * 		Question Screen
 ========================================*/
.main{
	padding: 78px 80px 0 31px;
}
.breedInfo{
	width: 220px;
	min-height: 685px;
	float: left;
	background: url(/src/assets/images/dialogBox.gif) top left no-repeat;
	margin: 103px 0 0;
	padding: 13px 190px 0 19px;
	font-size: 24px;
	color: #58595b;
	line-height: 28px;
}
.questions{
	background: url(/src/assets/images/questionBg.gif) 0 75px no-repeat;
	padding-left: 180px;
	}
	
	.questionWrap{
		background: url(/src/assets/images/questionHeadingBgBot.gif) bottom left no-repeat;	
		width:730px;
	}
	
	.currentQuestion {
		background: url(/src/assets/images/questionHeadingBg.gif) top left no-repeat;
		min-height:180px;
		height:auto !important;
		height:180px;
	
	}
	.questions h1{
		font-size: 47px;
		padding: 8px 20px 10px 50px;
		line-height: 60px;
		font-weight:normal;	
		color: #000;
	}
	.hightlighInfoWrap{
		background: url(/src/assets/images/questionHeadingBgBot.gif) bottom left no-repeat;	
		padding-bottom: 25px;	
		position: absolute;
		top: 78px;
		left: 211px;
		width:730px;
		z-index: 1;
	}	
	.hightlighInfo{		
		background: url(/src/assets/images/questionHeadingBg.gif) top left no-repeat;	
		min-height: 142px;
	}	
	.hightlighInfo h1{
		color: #808285;
	}
	.hightlighInfo p{
		padding: 0 230px 0 50px;
		font-size: 25px;
		color: #231f20;
		line-height: 30px;		
		display: block;
	}
	.hightlighInfo .next{
		right: 13px;
		bottom: 15px;
		color: #6d6e71;
		width:182px;
		height:67px;
		padding:0;
		text-indent: -9999;
		background: url("/src/assets/images/questionNext.gif") top right no-repeat;
	}
	.questions .choices{
		padding: 10px 0 0 40px;
	}
	.questions .choices a{
		background: url(/src/assets/images/option.gif) top left no-repeat;
		display: block;
		line-height:88px;
		height:88px;
		padding: 0 0 0 100px;
		color: #030000;
		font-size:30px;
		text-decoration: none;
		margin-bottom: 2px;
	}
	.questions .choices a.selected{
		background: url(/src/assets/images/optionSelected.gif) top left no-repeat;
	}
	.questions .choices a.blank{
		display: none;
	}

.progressBar{
	position: absolute;
	top: 20px;
	right: 29px;
	width:300px;
	overflow: hidden;
	}
	.progressBar span{

		font-size: 19px;
		display: block;
		float: left;
		padding-right: 12px;
		color: #FFF;
		padding-top: 5px;
	}
	.progressBar em{
		width: 10px;
		height: 23px;
		line-height:23px;
		font-size:1px;
		border: 1px solid #939598;
		float: left;
		display:inline;
		margin-right: 3px; 
	}
	.progressBar em.active{
		background: #fff200;	
	}
/*========================================
 * 		Result Screen
 ========================================*/
.result{
	padding: 115px 10px 0 10px;
	overflow:hidden;
	}
	.result .heading{
		position: absolute;
		top: 60px;
		left: 280px;
		width:688px;
		}
		.result .heading h1{
			color: #FFF;
			font-size: 41px;	
			padding: 4px 42px 0 0;
			line-height: 43px;	
		}
		.result .heading p{
			display: block;
			color: #fff200;
			font-size:18px;
			line-height:20px;
			padding-top: 4px;		
		}
	.result .info{
		float: left;
		padding-right: 24px;	
	}
	.result .mugshot{
		float: left;
		background: url(/src/assets/images/mugshotFrame.gif) top left no-repeat;
		padding: 19px 22px 63px 19px;
		width:207px;
		-webkit-user-select: none;
		}
		.result .mugshot h3{
			color: #000;
			font-size: 30px;	
		}
	.result .conclusion{
		background: url(/src/assets/images/dialogBox3.gif) top left no-repeat;
		color: #58595b;
		font-size: 14px;
		line-height: 18px;
		display: block;
		height: 264px;
		width: 336px;	
		position: absolute;
		bottom: 34px;
		left: 17px;								
		}
		
	.result .conclusion span {
		display:block;
		padding:6px 0 0 11px;
		width:164px;
	}
		
	.result .conclusion #aboutMe{
		background: url(/src/assets/images/aboutMe.gif) top right no-repeat;
		width: 119px;
		height: 58px;
		display: block;	
		position: absolute;
		bottom: 18px;
		left: 64px;
	}
		
	.result .requirements{
		float: left;
		width: 330px;
		padding: 28px 26px 0 0;
		position:relative;
		z-index:1;
	}
		.result .requirements h3{
			font-size: 18px;
			color: #000;
			width:330px;
			padding: 8px 0 10px;
			background: url(/src/assets/images/line.gif) bottom left repeat-x;
		}
		.result .requirements .details p{
			font-size: 15px;
			line-height:15px;
			color: #000;
			background: url(/src/assets/images/line.gif) bottom left repeat-x;
			padding-bottom: 2px;
			float:left;
			width:330px;
			}
			.result .requirements .details strong{
				display: block;
				font-weight: normal;
				padding: 6px 0 6px 1px;
				width: 86px;
				float: left;
				color: #FFF;
				}
			.result .requirements .details p em{
				font-style: normal;
				float: left;
				display: block;
				width: 238;
				padding: 6px 0 6px 1px;
				line-height: 15px;
			}
			.result .requirements .details p.error{
				overflow:hidden;
				background-color: #ee1c24;
			}
			.result .requirements .two{
				background: url(/src/assets/images/dialogBox2.gif) top left no-repeat;
			}
			
	.result .requirements.myResult{
		float: left;
		padding-right:0;
	}
	.result .advice{
		background: url(/src/assets/images/advice.gif) top left no-repeat;
		width: 841px;
		height: 176px;
		position: absolute;
		bottom: 18px;
		left: 88px;
		display: none;
	}	
	.result .info.expand{
		width: 100%;
	}		
	.result .description{
		float: left;
		width: 630px;
		padding: 2px 0 0 12px;
		}
		.result .description h1{
			color: #FFF;
			font-size: 42px;	
			line-height: 42px;
		}
		.result .description h3{
			color: #000;
			font-size: 24px;
			line-height: 24px;
			padding-top: 4px;
		}
		.result .description h3.desc{
			color: #000;
			line-height: 20px;
			padding-bottom: 6px;
			padding-top: 0;	
		}
		.result .description p{
			font-size: 18px;
			color: #FFF;
			line-height: 18px;
			padding-bottom: 28px;
		}
		
	.result .recommendation{
		clear: both;
		float: left;
		width: 898px;
		padding: 51px 0 0 7px;
		}
		.result .recommendation h3{
			font-size: 30px;
			color: #000;
			line-height: 35px;
			padding: 5px 0 14px;
		}