/* This CSS was initially developed by DECD Online Services and now incorporates selectors and attributes 
	from the reset.css and text.css that form part of the 960 Grid System by Nathan Smith
	http://960.gs/ 
	
   Convert pixels (px) to Em - http://riddle.pl/emcalc/
   default font size is set at 13px
   default bottom margin for paragraphs, headings, tables, lists and blockquotes: 10px;

*/
/* Visible image map container */
#map {
position: relative;
width: 422px;
height: 334px;
background: transparent url('../images/map.jpg') no-repeat;
margin: 2em auto;
padding: 5px 0 5px 5px;

}

/* List styling */
#map li {
display: block;
position: absolute;
list-style: none;
margin: 0;
padding: 0;
	height: 422px;
	width: 334px;
}

/* Link styling */
#map a {
display: block;
text-indent: -9999px;
text-decoration: none;
outline: none;

}

/* Country position on the image (z-index goes here) */
#oval {left: 0px; top: 0px; }
#west {left: 75px; top: 129px; }
#north {left: 157px; top: 47px;}
#music_german {left: 150px; top: 122px; z-index: 10;}
#basketball {left: 230px; top: 25px; z-index: 20;}
#east {left: 215px; top: 132px; z-index: 30;}
#gym {left: 235px; top: 211px; z-index: 60;}
#front_office {left: 165px; top: 160px; z-index: 50;}


/* Country width & height */
#oval a {width: 151px; height: 200px;}
#west a {width: 832px; height: 58px;}
#north a {width: 56px; height: 82px;}
#music_german a {width: 35px; height: 38px;}
#basketball a {width: 84px; height: 93px;}
#east a {width: 80px; height: 55px;}
#gym a {width: 74px; height: 90px;}
#front_office a {width: 55px; height: 65px;}


/* Country hover image position */
#oval a:hover {background: transparent url('../images/map/map_oval.gif') no-repeat;}
#west a:hover {background: url('../images/map/map_west.gif') no-repeat; }
#north a:hover {background: url('../images/map/map_north.gif') no-repeat;}
#music_german a:hover {background: url('../images/map/map_music_german.gif') no-repeat;}
#basketball a:hover {background: url('../images/map/map_basketball.gif') no-repeat;}
#east a:hover {background: url('../images/map/map_east.gif') no-repeat;}
#gym a:hover {background: url('../images/map/map_gym.gif') no-repeat;}
#front_office a:hover {background: url('../images/map/map_front_office.gif') no-repeat;}