/* common.css */

/* areas */
.designSwitcher
{
	position:relative;
	top:30px;
	left:0px;
	width:150px;
	height:20px;
	padding:0px;
	margin:0px;
	border:0px solid #EEEEEE;
	text-align: center;
    font-size: 0.8em;
    color: #888888;
    text-align: center;
    font-family: Verdana, verdana, arial, helvetica, sans-serif;
}


#light a{
    background: #EEEEEE;
    color: #EEEEEE;
    border:1px solid #000000;
    text-decoration: none;
    text-align: center;
    font-size: 0.8em;
}


#medium a{
    background: #444444;
    color: #444444;
    border:1px solid #000000;
    text-decoration: none;
    text-align: center;
    font-size: 0.8em;
}

#dark a{
    background: #111111;
    color: #111111;
    border:1px solid #000000;
    text-decoration: none;
    text-align: center;
    font-size: 0.8em;
}

/* popup stuff (tooltips), not shown by IE */
.popup {
    color: #9F141A;
    cursor: help;
    text-decoration: none;
    text-align: center;
}

.popup1 {
    position:relative;
    z-index: 24;
    cursor: help;
    background-color: #000000;
    color: #000000;
    text-decoration: none;
    text-align: center;
}

.popup1 span{
    position: relative;
    z-index: 24;
    cursor: help;
    background-color: #000000;
    color: #000000;
    text-decoration: none;
    text-align: center;
}

a.arrowleft
{
    position: absolute;
    left: 20px;
	text-decoration: none;
}

a.arrowleft span
{
    display: none
}

a.arrowleft:hover
{
    z-index: 25;
    color:#000000;
    background: #f7e882;
    cursor: help;
    text-decoration: none;
}

a.arrowleft:hover span{
    display: inline;
    position: absolute;
    top: 2em;
    left: -12em;
    width: 15em;
    border: 1px solid #000000;
	/*background-color: #ccffff;*/
	background-color: #f7e882;
    color: #000000;
    text-align: center;
    font-size: 1em;
    font-family: verdana, arial, helvetica, sans-serif;
    font-style: normal;
    text-decoration: none;
	cursor: help;
}

a.arrowright
{
    position: absolute;
    right: 20px;
	text-decoration: none;
}

a.arrowright span
{
    display: none
}

a.arrowright:hover
{
    z-index: 25;
    color:#000000;
    background: #f7e882;
    cursor: help;
    text-decoration: none;
}

a.arrowright:hover span{
    display: inline;
    position: absolute;
    top: 2em;
    left: -12em;
    width: 15em;
    border: 1px solid #000000;
	/*background-color: #ccffff;*/
	background-color: #f7e882; 
	color: #000000;
    text-align: center;
    font-size: 1em;
    font-family: verdana, arial, helvetica, sans-serif;
    font-style: normal;
    text-decoration: none;
	cursor: help;
}


a.info:hover
{
    z-index: 25;
    color:#000000;
    background: #f7e882;
    cursor: help;
    text-decoration:underline;
}

a.info span
{
    display: none
}

a.info:hover span{ /*the span will display just on :hover state*/
    display: inline;
    position: absolute;
    top: 2em;
    left: -12em;
    width: 15em;
    border: 1px solid #000000;
    background-color: #f7e882;
    color: #000000;
    text-align: center;
    font-size: 0.8em;
    font-family: verdana, arial, helvetica, sans-serif;
    cursor: help;
}

img
{
   background-color: #FFFFFF;
   border:none
}

p.info span
{
 font-size: 0.8em;
 display: none
}

p.info:hover span{ /*the span will display just on :hover state*/
    display: inline;
    position: absolute;
    top: 45em;
    left: 5em;
    width: 15em;
    border: 1px solid #000000;
    /*background-color: #ccffff;*/
	background-color: #f7e882;
    color: #000000;
    text-align: center;
    font-size: 0.8em;
    font-family: verdana, arial, helvetica, sans-serif;
    cursor: help;
}

/* areas */
#menuArea
{
   position:absolute;
   top:10px;
   left:10px;
   width:150px;
   height:620px;
   padding:5px;
   margin:0px;
}

/* some more areas, currently not in use */
#Outwards{background-color:#FF7F00;}
#Inwards{background-color:#FFC37F;}