/* 
places - Fish
 */

#places {	
    z-index: 1;	
	position: absolute;	
	top: 55px;
    left: 0px;	
	width: 100%;
	height: 580px;
	background: ;
}

.grave {
 position: relative;
 top: 230px;
 left: 210px;
 width: 20px;
 height: 20px;
 float: left;
 margin-right: 50px;
}

.police {
 position: relative;
 top: 245px;
 left: 655px;
 width: 20px;
 height: 20px;
 float: left;
 margin-right: 50px;
}

.toilet1 {
 position: relative;
 top: 85px;
 left: 770px;
 width: 20px;
 height: 20px;
 float: left;
 margin-right: 50px;
}

.toilet2 {
 position: relative;
 top: 365px;
 left: 855px;
 width: 20px;
 height: 20px;
 float: left;
 margin-right: 50px;
}

.design {
 position: relative;
 top: 190px;
 left: 720px;
 width: 20px;
 height: 20px;
 float: left;
 margin-right: 50px;
}

.church {
 position: relative;
 top: 262px;
 left: 560px;
 width: 20px;
 height: 20px;
 float: left;
 margin-right: 50px;
}

.lib {
 position: relative;
    z-index: 1; 
 top: 265px;
 left: 360px;
 width: 20px;
 height: 20px;
 float: left;
 margin-right: 50px;
}

.vbk {
 position: relative;
    z-index: 1; 
 top: 260px;
 left: 540px;
 width: 20px;
 height: 20px;
 float: left;
 margin-right: 50px;
}

.petrol {
 position: relative;
 top: 250px;
 left: 430px;
 width: 20px;
 height: 20px;
 float: left;
 margin-right: 50px;
}

.school1 {
 position: relative;
 top: 290px;
 left: 220px;
 width: 20px;
 height: 20px;
 float: left;
 margin-right: 50px;
}

.school2 {
 position: relative;
 top: 300px;
 left: 90px;
 width: 20px;
 height: 20px;
 float: left;
 margin-right: 50px;
}

.sleep {
 position: relative;
 top: 350px;
 left: -85px;
 width: 20px;
 height: 20px;
 float: left;
 margin-right: 50px;
}

.bottle {
 position: relative;
 top: 232px;
 left: 145px;
 width: 20px;
 height: 20px;
 float: left;
 margin-right: 50px;
}

.shop1 {
 position: relative;
 top: 230px;
 left: 101px;
 width: 20px;
 height: 20px;
 float: left;
 margin-right: 50px;
}

.shop2 {
 position: relative;
 top: 246px;
 left: -30px;
 width: 20px;
 height: 20px;
 float: left;
 margin-right: 50px;
}

/* 
- Fish
 */

.carp {
 position: relative;
     z-index: 1;	
 top: 520px;
 left: -990px;
 width: 120px;
 float: left;
 margin-right: 50px;
}

.carp:hover div{
	width: 90px;
	padding: 5px 5px;
	visibility: visible;
	opacity: 0.9; 
}

.yello {
 position: relative;
     z-index: 1;	
 top: 500px;
 left: 350px;
 width: 120px;
 float: left;
 margin-right: 50px;
}

.yello:hover div{
	width: 85px;
	padding: 5px 5px;
	visibility: visible;
	opacity: 0.9; 
}

.mud {
 position: relative;
     z-index: 1;	
 top: 500px;
 left: 450px;
 width: 120px;
 float: left;
 margin-right: 50px;
}

.mud:hover div{
	width: 85px;
	padding: 5px 5px;
	visibility: visible;
	opacity: 0.9; 
}

.bass {
 position: relative;
     z-index: 1;	
 top: 500px;
 left: 550px;
 width: 120px;
 float: left;
 margin-right: 50px;
}

.bass:hover div{
	width: 85px;
	padding: 5px 5px;
	visibility: visible;
	opacity: 0.9; 
}

.barber {
 position: relative;
     z-index: 1;	
 top: 500px;
 left: 650px;
 width: 120px;
 float: left;
 margin-right: 50px;
}

.barber:hover div{
	width: 85px;
	padding: 5px 5px;
	visibility: visible;
	opacity: 0.9; 
}

/* Parent Container */

.content_img{
 position: relative;
 top: 0px;
 left: 0px;
 width: 20px;
 height: 20px;
 float: left;
 margin-right: 50px;
}

/* Child Text Container */

.content_img div{
 position: absolute;
 bottom: 0;
 right: 0;
 background: ;
 color: #FFFFFF;
 margin-bottom: 5px;
 font-family: sans-serif;
 opacity: 0;
 visibility: hidden;
 -webkit-transition: visibility 0s, opacity 0.5s linear; 
 transition: visibility 0s, opacity 0.5s linear;
}

/* Hover on Parent Container */
.content_img:hover{
 cursor: pointer;
}

.content_img:hover div{
	text-align: center;	
	width: 180px;
	padding: 4px 15px;
	visibility: visible;
	opacity: 0.9; 
}