/*
 * continents.css
 *
 * CSS to support the world browser for all the LoCo teams,
 * globally. 
 *
 *  Author: Michael Hall ( mhall119 )
 */

ul#continents {
	list-style: none;
	background: url(../images/map.png) no-repeat 0px 0px;
	position:   relative;
	width:      580px;
	height:     268px;	
	margin:     0px auto;
	padding:    0;
}

ul#continents li {
	position:   absolute;
}

ul#continents li a{
	display:    block;
	height:     100%;

	text-decoration: none;
}

#northamerica {
	width:      227px;
	height:     142px;
	top:        2px;
	left:       0px;
}

#southamerica {
	width:      108px;
	height:     130px;
	top:        131px;
	left:       76px;
}

#africa {
	width:      120px;
	height:     140px;
	top:        83px;
	left:       209px;
}

#europe {
	width:      120px;
	height:     84px;
	top:        1px;
	left:       211px;
}

#asia {
	width:      215px;
	height:     175px;
	top:        1px;
	left:       283px;
}

#australia {
	width:      114px;
	height:     95px;
	top:        152px;
	left:       432px;
}

ul#continents li a:hover {
	background: url(../images/map.png) no-repeat 0px 0px;
}

ul#continents li#northamerica a:hover {
	background-position: 0px -270px;
}

ul#continents li#southamerica a:hover {
	background-position: -226px -273px;
}

ul#continents li#africa a:hover {
	background-position: -209px -417px;
}

ul#continents li#europe a:hover {
	background-position: -22px -427px;
}

ul#continents li#asia a:hover {
	background-position: -363px -268px;
}

ul#continents li#australia a:hover {
	background-position: -412px -455px;
}

ul#continents li a span {
	display:    none;
        text-align: left;
}

ul#continents li a:hover span {
	display:    block;
}

ul#continents li a:hover span {
	display:    block;
	padding:    5px;
	width:      200px;
	background: #000;
	position:   relative;
	top:        68%;
	font-size:  11px;
	opacity:    .75;
	filter:     alpha(opacity=75);
	color:      #FFF;

        border-radius:         4px;
        -moz-border-radius:    4px;
        -webkit-border-radius: 4px;
}

ul#continents li a:hover span strong {
	display:         block;
	margin-bottom:   2px;
	font-size:       12px;
        color:           white;
	text-decoration: underline;
}