*{
	margin:0;
	padding:0;
}

html{

   /**
	*	The background of the HTML element is
	*	visible as the top and bottom dark strips.
	*/
	 
	background-color:#ea4c89;
}

body{
	font-size:13px;
	color:#ea4c89;
	font-family:Arial, Helvetica, sans-serif;
	
   /**
	*	Using the body element as a 
	*	container for the animation
	*/
	
	left:0;
	position:fixed;
	top:5px;
	bottom:5px;
	width:300%;
}


.step{
	/* Each step takes a third of the width */
	
	float:left;
	height:100%;
	width:33.3333%;
	overflow:hidden;
	position:relative;
}

/* Step 1 */

#step1{ background: #eee;}

#step1 textarea{

}

#step1 a.button{

}

#step1 a.button:active{
	
	/* The pressed state of the button */

}

#step1 h1{
color: #ea4c89;
border-bottom: 1px solid #ddd;
}

/* Step 2 */

#step2{ background:#eee;}

#step2 textarea{

}

#step2 a.button{

}

#step2 a.finish{ margin-left:20px;}
#step2 a.back{ margin-left:-120px;}


#step2 a.button:active{

}

#step2 h1{color: #ea4c89;
border-bottom: 1px solid #ddd;
}

/* Step 3 */

#step3{ background:#eee;}

#step3 .results{

}

#step3 a.button{

}

#step3 a.button:active{

}

#step3 h1{color: #ea4c89;
border-bottom: 1px solid #ddd;
}

/* Each step contains a section, centered in the page */

.section{
	height:550px;
	left:50%;
	margin:-275px 0 0 -328px;
	position:absolute;
	top:50%;
	width:655px;
}



h2{
	/* The instruction text */
	position:absolute;
	right:0;
	top:50px;
	font-weight:normal;
	font-style:italic;
}


h2,a.button{
	font-family:'Myriad Pro', Corbel, Arial, Helvetica, sans-serif;
}

.section textarea,
.section .results{
	background-color:#fcfcfc;
	border:0;
	bottom:100px;
	color:#888888;
	font-family:Arial,Helvetica,sans-serif;
	font-size:12px;
	height:230px;
	padding:20px;
	position:absolute;
	width:615px;
	
	outline:none;
	resize:none;
	overflow:auto;
}

.section .results{
	padding-right:0;
	height:210px;
	bottom:110px;
}

a.button,
a.button:visited{
	background-color:#AAA;
	border:1px solid #EEEEEE;
	bottom:0;
	color:#fff;
	font-size:18px;
	font-style:italic;
	font-weight:bold;
	padding:10px 20px;
	position:absolute;
	text-align:center;
	width:60px;
	left:50%;
	opacity:.3;
	margin-left:-30px;
	-webkit-transition: opacity .3s ease-out;
}

a.button:hover{
     opacity:1;
    -webkit-transition: opacity .3s ease-out;
}

a.button:active{
	bottom:-2px;
}

p.error{
	color:darkred;
	font-size:12px;
	left:50%;
	margin:-5px 0 0 -200px;
	position:absolute;
	text-align:center;
	top:50%;
	width:400px;
}

/* The results displayed in the final step */

.result{
	float:left;
	height:50px;
	margin:0 15px 20px 0;
	overflow:hidden;
	padding:0 0 0 60px;
	position:relative;
	width:125px;
}

.result img{
	height:50px;
	left:0;
	position:absolute;
	width:50px;
}

.result p{
	font-family:Corbel,'Myriad Pro',Arial,Helvetica,sans-serif;
	font-size:18px;
	font-style:italic;
	font-weight:bold;
	white-space:nowrap;
	margin-top:5px;
}

.result p i{
	color:#AAAAAA;
	display:block;
	font-size:14px;
}

/* Generic hyperlink styles */

a, a:visited {
	text-decoration:none;
	outline:none;
	border-bottom:1px dotted #97cae6;
	color:#97cae6;
}

h1.hi
{
    display: block;
    background: transparent url(img/hi.png) no-repeat left top;
    overflow: hidden;
    height: 0;
    padding-top: 148px;
    width: 174px;
    margin: 150px auto;
}

#ctrls a,
#ctrls span{    
    position:absolute;
    display:block;
    width:40px;
    height:40px;
    font-family:"Lucida Grande", Sans-Serif;
    font-size:50px;
    line-height:40px;
    text-align:center;
    text-decoration:none;
    color:#FFF;
    background-color:#AAA;
    top:50%;
    margin-top:-20px;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    opacity:.3;
    z-index:22;
    cursor:pointer;
    font-weight:100;
    -webkit-transition: opacity .3s ease-out;
} 
#ctrls a:hover,
#ctrls span:hover{
    opacity:1;
    -webkit-transition: opacity .3s ease-out;       
}                   
#ctrls .leftArrow{
    left:20px;
}             
#ctrls .rightArrow{
    right:20px;
}    
#ctrls a em,
#ctrls span em{     
    font-style:normal;
    position:relative;    
    top:-5px;
}
#ctrls .leftArrow em{
    left:-3px;  
}
#ctrls .rightArrow em{
    left:3px;
}
img {

padding:1px;
background: #fff;
border: 1px #ddd;
height:97px;
width:96px;

}