@charset "UTF-8";
/* CSS Document */


/*text style*/





/*layout*/
#main_frame{
	background-color: white; 
	margin: 0px;
	width: 1100px;
	}
	
#banner{
	height:0px;
	background-color:#F9F;
}
	
	
#content{
	height: 700px;
		background-image: url(media/background1.jpg); 
	background-repeat: no-repeat; 
	background-position: center center; 
	
}
	
#hint{
	margin: 0px auto;
	width: 420px;
	height: 650px;
	float:left;
	background-image: url(media/hint_kn.png); 
	background-repeat: no-repeat; 
	background-position: center center; 
	}

#map_ans{
	margin: 0px auto;
	width: 680px;
	float:right;
	padding-top:6px;
}

.point{
	display:inline;
	color:#D63388;

}

#caption{
	color:#B23674;
	font-weight:900;
	font-size:17px;
}

#users_choice{
	color:#231885;
	font-size:14px;
}


/*-----------------------------------poping up part -----------------------------------*/

#map {
			margin:15 0;
			padding:0;
			width:670px;
			height:600px;
			background:url(media/map_kn.jpeg) top left no-repeat #fff;
			font-family:arial, helvetica, sans-serif;
			font-size:8pt;
		}
		
		/*Then we’ll do the list items themselves– simple stuff, just get rid of the formatting applied by the browser.*/
		
		#map li {
			margin:0;
			padding:0;
			list-style:none;
		}
		
		/*Now we need to apply some styling to the links. Each link will need its own dimensions and positioning (which is why we gave them class names), but they’ll also share some common properties, like the fact that they should be absolutely positioned block elements, with the transparent GIF for their background.*/
	
		
		#map li a {
	position: absolute;
	display: block;
	/* Specifying a background image(a 1px by 1px transparent gif) fixes a bug in older versions of IE that causeses the block to not render at its full dimensions.*/
			   
	background: url(blank.gif);
	text-decoration: none;
	color: #000;
	left: 497px;
	top: 523px;
	width: 10px;
	height: 13px;
		}
		
		#map li a span { display:none; }
		
		
			/*After we’ve done that, we need to define the style, size and position of the tool tip itself. We need to make it visible on mouse over and it should be relatively positioned in relation to the link we’re hovering over, with a bit of an offset (20px x 20px in this case). Then we’ll make it look pretty, giving it a white background, a border, padding, and lower the opacity slightly, so you can still see what’s under the tool tip. We’ll set a width of 200px, but we’ll let the height be automatically determined by the amount of content in the tool tip. We’ll also set the color of the text and get rid of the underline.*/
		
		#map li a:hover span {
			position:relative;
			display:block;
			width:200px;
			left:cursor+10;
			top:20px; 
			border:1px solid #000;
			background:#FFF9EE;
			padding:5px;
 			filter:alpha(opacity=80);
			opacity:0.9;
			font-size:12px;
			color:#CC7F28;
  		}
		
	

		#map a.singjor{
	top: 517px;
	left: 688px;
	width: 35px;
	height: 53px;
}
		#map a.ochau {
	top: 461px;
	left: 654px;
	width: 27px;
	height: 51px;
}
		#map a.makman {
	top: 460px;
	left: 677px;
	width: 25px;
	height: 54px;
}
		#map a.meidou {
	top: 415px;
	left: 630px;
	width: 36px;
	height: 51px;
}
		#map a.keiceoi {
	top: 294px;
	left: 637px;
	width: 32px;
	height: 51px;
}
		#map a.renwo{
	top: 330px;
	left: 598px;
	width: 32px;
	height: 53px;
}
		#map a.central {
	top: 196px;
	left: 613px;
	width: 32px;
	height: 55px;
}
		#map a.lausum {
	top: 185px;
	left: 543px;
	width: 31px;
	height: 54px;
}
		#map a.waike {
	top: 176px;
	left: 578px;
	width: 32px;
	height: 57px;
}
		#map a.dukhen {
	top: 148px;
	left: 838px;
	width: 31px;
	height: 58px;
}
		#map a.sisun{
	top: 447px;
	left: 790px;
	width: 33px;
	height: 52px;
}
		#map a.duklung {
	top: 191px;
	left: 931px;
	width: 32px;
	height: 53px;
}
		#map a.siusik {
	top: 115px;
	left: 964px;
	width: 33px;
	height: 60px;
}