/* CSS Document */

/*---------------------------------------------------------------
	Stylesheet for the demo imagemap_rollover
	Author:		Gabriel Svennerberg
	Email:		gabriel@svennerberg.com
	Web:		http://www.svennerberg.com
	Created:	2008-08-16
 ---------------------------------------------------------------*/

/* Map
---------------------------------------------------------------*/
#inline{
	text-align: center;	
	width: 100%;	
}
#hex-wrapper{
	margin: 0 auto;	
	width: 460px;
	text-align: center;	
}
#hex-wrapper h1{
	text-align: center;
	color: #FFF;
	margin: 0 auto 20px auto;
	font-size: 40px;
}
#map {
	position: relative;
	width: 460px;
	height: 404px;
	background: url(../img/hex-bg.png) no-repeat;
	margin: 0;	
}
#transparent_map {
	position: absolute;
	left: 0;
	z-index: 9900;
	width: 460px;
	height: 404px;
	border: none;
}
#map ul {
	list-style: none;
}
#map li {
	position: absolute;
	z-index: 9000;
	text-indent: -1000em;
	display: none;
}
#one {
	background: url(../img/hex-roll-01.png) no-repeat;
	width: 460px;
	height: 404px;
	top: 0;
	right: 0;
}
#two {
	background: url(../img/hex-roll-02.png) no-repeat;
	width: 460px;
	height: 404px;
	top: 0;
	right: 0;
}
#three {
	background: url(../img/hex-roll-03.png) no-repeat;
	width: 460px;
	height: 404px;
	top: 0;
	right: 0;
}
#four {
	background: url(../img/hex-roll-04.png) no-repeat;
	width: 460px;
	height: 404px;
	top: 0;
	right: 0;
}
#five {
	background: url(../img/hex-roll-05.png) no-repeat;
	width: 460px;
	height: 404px;
	top: 0;
	right: 0;
}
#six {
	background: url(../img/hex-roll-06.png) no-repeat;
	width: 460px;
	height: 404px;
	top: 0;
	right: 0;
}
ul#texticles{
	color: #FFF;
	font-size: 20px;
	list-style: none;
	width: 460px;
	position: relative;	
}
ul#texticles li{
	display: none;
	position: absolute;
	top: 0;
	width: 460px;
	left: 0;
}
ul#texticles li.ul#text-default{
	display: block;	
}


/* Tooltip
---------------------------------------------------------------*/
.tooltip {
	background: url(../img/tooltip-bg.png);
	padding: 3px 6px;
	border: 1px solid #ff0;
	position: absolute;
	z-index: 9005;
}
/* Special on page styles due to lifestage selection
---------------------------------------------------------------*/
h2.lifestage{
	display: block;
	padding: 0 35px 0 0;
	height: 30px;
	line-height: 30px;
	text-align: right;
	color: #FFF;
	background-image: url(../img/bg-life-h2.png);
	background-repeat: no-repeat;
	background-position: left;
	font-size: 16px;
	font-weight: 400;
}
.beginning h2.lifestage{
	background-color: #FFE56D;
}
.starting h2.lifestage{
	background-color: #F8901F;
}
.chasing h2.lifestage{
	background-color: #EE592B;
}
.fulfilling h2.lifestage{
	background-color: #9E0052;
}
.planning h2.lifestage{
	background-color: #0073DB;
}
.enjoying h2.lifestage{
	background-color: #B0BC25;
}