@charset "UTF-8";
/* CSS Document */
*{
	margin:0;
	padding:0;
}

html,body{
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#111111;
	font-weight:normal;
	background:#FFF repeat-x top left;
	margin:0;
	padding:0;
}

#wrapper{
	/* width: 1280px; */
	height: 735px;
	background-image: url(../images/bg.png);
	background-repeat:repeat;
	}
	
		
.box {
        height: 510px;
        margin: 0 auto;
        padding: 0;
        width: 1050px;
	}

.box2 {
        height: 100px;
        margin: 0 auto;
        padding: 0;
        width: 1050px;

     }

	
#arrows{
	position: relative;
	padding: 10px;
	top: 157px;
	left: 90px;
	float: left;
	width: 48px;
	height:22px;
	float: left;
	}
	
			
.fleft {
	
	height:22px ;
	width: 23px ;
	background-image:url(../images/sprite_3.png);
	background-position: 0px -0px;
	background-repeat: no-repeat;
	z-index: 9;
	}
#right1 {
top: 0px;
left:-10px;
}

#left4 {
position: relative;
top:0px;
left: 20px;
}

.fleft:hover {
	
	height:22px ;
	width: 23px ;
	background-image:url(../images/sprite_3.png);
	background-position: 0px -43px;
	background-repeat: no-repeat;
	z-index: 9;
	}
.fright:hover {
	height:22px;
	width:23px;
	background-image:url(../images/sprite_3.png);
	z-index: 9;
	background-position: -22px -43px;
	
	}	
	
.fright {
	position: relative;
	top: -22px;
	left: 10px;
	height:22px;
	width:23px;
	background-image:url(../images/sprite_3.png);
	z-index: 9;
	background-position: -22px 0px;
	position: relative;
	float: right;
	}	
.text1{
	width: 142px;
	position:relative;
	color:#ffffff;
	font-size:14px;
	top:120px;
	left:60px;
	z-index:10;
}
.text2{
	position:relative;
	color:#ffffff;
	font-size:13px;
	top:180px;
	left:56px;
	display:inline;
	z-index:10;
}
.text3{
	position:relative;
	color:#ffffff;
	font-size:13px;
	top:130px;
	left:160px;
	z-index:10;
}
	
#step1 {
	position: relative;
	float: left;
	height: 500px;
	width: 260px;
	background:url(../images/sprite_1.png);
	background-repeat: no-repeat;
	z-index: 2;
	}	
	
.color_s1 {
	position: relative;
	top:60px;
	left:55px;
	width: 150px;
	height: 145px;
	background-image: url(../images/sprite_2.png);
	background-position: -140px 6px;
	background-repeat:no-repeat;
	z-index:3;
	}
	
.slider
	{
	position: relative;
	top: 160px;
	left: 97px;
	background-image:url(../images/slider.png);
	background-repeat: no-repeat;
	width: 60px;
	height: 35px;
	z-index: 4;
	}
		
.control {
	position: relative;
	top: 1px;
	left:1px;
	background-image: url(../images/control.png);
	background-repeat: no-repeat;
	border: thick #D00;
	width: 27px;
	height:27px;
	z-index: 5;
	}
	
#step2 {
	position: relative;
	float: left;
	height: 500px;
	width: 260px;
	background:url(../images/sprite_1.png) no-repeat;
	z-index: 2;
	opacity:0.2;
	}		
	
.color_s2 {
	position: relative;
	top:60px;
	left: 55px;
	width: 150px;
	height: 145px;
	background-image: url(../images/sprite_2.png);
	background-position: -132px -139px;
	background-repeat:no-repeat;
	z-index: 3;
	
}
.bnw_s2{
	position: relative;
	top:60px;
	left: 55px;
	width: 150px;
	height: 145px;
	background:url(../images/sprite_2.png) 10px -140px no-repeat;
	z-index:2 ;
	}

#step3 {
	position: relative;
	float: left;
	height: 500px;
	width: 260px;
	background:url(../images/sprite_1.png);
	background-repeat: no-repeat;
	z-index: 2;
	opacity:0.2;
	
	}		
.bnw_s3{
	position: relative;
	top:60px;
	left: 55px;
	width: 150px;
	height: 145px;
	background:url(../images/sprite_2.png) 8px -280px no-repeat;
	z-index:2 ;
	}
	
.color_s3 {
	position: relative;
	top:60px;
	left: 60px;
	width: 150px;
	height: 145px;
	background-image: url(../images/sprite_2.png);
	background-position:-142px -280px;
	background-repeat:no-repeat;
	z-index: 3;
}

#step4 {
	position: relative;
	float: left;
	height: 500px;
	width: 260px;
	background:url(../images/sprite_1.png);
	background-repeat: no-repeat;
	z-index: 2;
	opacity:0.2;
	}		
.bnw_s4{
	position: relative;
	top:60px;
	left: 55px;
	width: 150px;
	height: 145px;
	background:url(../images/sprite_2.png) 10px -429px no-repeat;
	z-index:2 ;
	}
.color_s4{
	position: relative;
	top:60px;
	left: 60px;
	width: 150px;
	height: 145px;
	background-image: url(../images/sprite_2.png);
	background-position:-142px -428px;
	background-repeat:no-repeat;
	z-index: 3;
}
.direction{
position:relative;
top:150px;
left:150px;
background-image:url(../images/path.png);
width:760px;
height:65px;
z-index:1000;
}
.divider1{
	margin: 0 auto;
	position: relative;
	top: 335px;
	
	background-image:url(../images/line.png);
	background-repeat: no-repeat;
	width: 1093px;
	height:  30px;
	z-index: 6;
	}

.divider2{
	margin: 20px auto;        

        background-image:url(../images/line.png);
        background-repeat: no-repeat;
        width: 1093px;
        height:  30px;
        
        }

.finish{
        float: right;
        margin-right: 50px;
        width:126px;
        height:38px;
        border:none;

        color:#FFF;
        text-align:center;
        background:url(../images/small_buttonbg.png) no-repeat 0 0;
        font-size:18px;
        font-weight:normal;
        padding:0;
        text-decoration:none;
        cursor:pointer;
}

.finish:hover{
        background:url(../images/small_buttonbg.png) no-repeat -129px 0;
        text-decoration:none;
}