css3-coverflow/css/style.css

body{
background-color:#202A38;
margin:0;
padding:0;
font-family: Tahoma, times, serif;
	
}
#header{
	width:960px;
	height:100px;
	margin:0 auto 0;
	
	}


#body{
	width:900px;
	height:450px;
	margin:0 auto 0;
	
	}
	

	

#footer{
	width:960px;
	height:80px;
	margin:0 auto 30px;
	
	
	text-align:center;
	color:white;

}
#menu{
	position:absolute;
	top:205px;
	left:0px;
	
	background:white;
	width:120px;
	height:215px;
	right:30px;
	text-align:center;
	
	
	background-color:rgba(119,121,115,0.5);
	color:white;
	
	
	
	}
#menu:hover{
	
	}
.blank{
	height:40px;
    }
.menu_list{
	font-size:16px;
	
	padding:12px 5px 22px;
	border-bottom:black 1px solid;
	
	margin-top:0px;
	
	display:block;
	
	
	
	}
	
.menu_list:hover{
	
	text-decoration:none;
	
	background-color:rgba(139,143,150,0.5);
	}
	
.searchArea {
	height:34px;
	width:600px;
	
	-webkit-border-top-left-radius:8px;
	-webkit-border-bottom-left-radius:8px;
	float:left;
    
   -webkit-box-shadow:0px 0px 20px #333333;
  font-size:20px;
   margin-top:0px;
   margin-left:120px;
  
   
}

.submit{
	float:right
	height:40px;
	margin-left:50px;
	display:inline;
	margin-left:-0px;
	
	}
	
	#continer{
	width:1060px;
	height:390px;
	
	position:absolute;
	display:block;
	margin-left:-50px;
	}
	

	
#id1{
	width:730px;
	height:320px;
    position:absolute;
    top:60px;
    left:125px;
    z-index:100;
    background:#e1e0e0;
    -webkit-animation-name: oneToFour;
	-webkit-animation-duration: 1s;
	-webkit-animation-iteration-count: 1;
	
	border:8px silver outset;
	    
         
	}
#id2{
	width:730px;
	height:320px;
    position:absolute;
    
    top:40px;
    left:454px;
    z-index:90;
    -webkit-transform:  rotate(3deg) scale(0.18,0.9) skew(13deg,2deg) ; 
    -webkit-animation-name: twoToOne;
	-webkit-animation-duration: 1s;
	-webkit-animation-iteration-count: 1;
	border:8px silver outset;
	
	}
#id3{
	width:730px;
	height:320px;
    position:absolute;
    top:28px;
    left:500px;
    z-index:80;
    border:8px silver outset;
    -webkit-transform:  rotate(9deg) scale(0.15,0.85) skew(40deg,2.4deg) ; 
    
    -webkit-animation-name: threeToTwo;
	-webkit-animation-duration: 1s;
	-webkit-animation-iteration-count: 1;
	}
#id4{
	width:730px;
	height:320px;
    position:absolute;
    
    border:8px silver outset;
     top:14px;
    left:542px;
    z-index:70;
    -webkit-transform:  rotate(16deg) scale(0.121,0.77) skew(60deg,2.7deg) ; 
    
    -webkit-animation-name:fourToThree;
	-webkit-animation-duration: 1s;
	-webkit-animation-iteration-count: 1;
	
	
	    
	
	}

#slidebar input[type=range] {
  
margin: 0px 0px 5px 5px;

float:left;
pointer:cursor;
-webkit-appearance:none;

-webkit-border-radius:5px;

border-radius:5px;
width:400px;
height:15px;
background:url(../images/slidebar.png) no-repeat;
 
display:block;

position:absolute;
top:347px;
z-index:300;
left:280px;
}
#slidebar input[type=range]::-webkit-slider-thumb
{
   -webkit-appearance:none;
   
   background:url(../images/ball.png);
   width:35px;
   height:35px;
   border-radius:25px;
   -o-border-radius:25px;
}
.hotspot{
   display:block;
   width:30px;
   height:30px;
   border:3px dotted blue;
   background:rgba(112,115,117,0.4);
}
.hotspot:hover{
   display:block;
   border:3px solid black;
   -webkit-transform:rotate(45deg);
}
.hpOne{
   position:absolute;
   
   left:175px;
   top:90px;
}
.hpTwo{
    position:absolute;
   
   left:425px;
   top:210px;
}




/*----------the following is for search page----------*/
#body_x{
	width:960px;
	min-height:450px;
	height:auto;
	margin:0 auto 30px;
	background:white;
	
    border-radius:13px;
    border:10px solid silver;
	}
	

	

#footer_x{
	width:960px;
	height:80px;
	margin:0 auto 0px;
	
	
	text-align:center;
	color:black;
	
	
}
.searchArea_x {
	height:36px;
	width:450px;
	
	-webkit-border-top-left-radius:8px;
	-webkit-border-bottom-left-radius:8px;
	float:left;
    
   border:1px rgb(111,111,111) solid;
  font-size:16px;
   margin-top:10px;
   margin-left:30px;
   
}

.submit_x{
	float:right
	height:30px;
	
	
	display:inline;
	margin-left:-0px;
	
	}
#result_list{
	border-left:3px solid #778092;
	min-height:400px;
	height:auto;
	width:930px;
	margin-left:30px;
	margin-top:20px;
	margin-bottom:10px;
	}
.reslut_content{
	height:90px;
	width:610px;
	
	margin-left:10px;
	margin-bottom:20px;
	}
	#page_identify{
	 magin-top:10px;
	 margin-bottom:10px;
	 text-align:center;
	 width:960px;
	 text-decoration:underline;
	}
	
.icon{
	float:left;
	
	margin:auto 2px auto;
	border-bottom:3px solid #434e64;
	}
.title{
	padding:2px;
	 font-size:17px;
	 color:#42619d;
	 text-decoration:underline;
	}
#show_more{
	float:right;
	background:url(../images/more.gif);
	width:30px;
	height:30px;
	display:bolck;
	top:-25px;
	position:relative;
	
	}
	
.morebox{
	
    display:none;
	}
	
.descripition{
	font-size:14px;
	
	color:#363738;
	}
.address{
	font-size:13px;
	color:#43506a;
	}
.telephone{
	font-size:13px;
	color:#43506a;
	}
.reslut_content:hover{
	background:#dee1e8;
	}
	
#container{
	position:absolute;
	display:none; 
	top:80px; 
	width:700px;
	 height:500px;
	 margin:0px 130px 0px 130px;
     border: 10px silver outset;
    z-index:999999;
	}
#containerbk{
	position: absolute;
	 display:none; 
	 background-image: initial; 
	 background-attachment: initial;
	  background-origin: initial;
	   background-clip: initial;
	    background-color: rgb(0, 0, 0);
	    width: 100%;
	    height:100% ; 
	    left: 0px;
    top: 0px;
    z-index: 870618;
	  opacity: 0.5;
	   background-position: initial initial;
	    background-repeat: initial initial; 
	}