/*
put the banner top centre-ish, fiddle the padding, 
make it translucent
*/
div.banner
{
    /*
    margin-right: auto; 
    margin-left: auto; 
    */
    left: 300px; 
    text-align: center;
    opacity: .8;
    position: absolute;
    width: 15em; 
    margin-top: 5px; 
    background-color: #eee; 
    border: #ddd 1px solid;
    color: #060;
    padding-left: 1em;
    padding-right: 1em;
    padding-top: 0em;
    padding-bottom: 0.5em;
    z-index: 1;
}

/* special for help */
div#helpHS img, div#helpHS div
{
    top: 100px;
    left: 290px;
}

/*
put the map at top left
sink it so banner shows up: z-index of -1 shows the banner
note position: absolute; means positioned 
relative to containing block
 
*/
img#mapimage
{
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: -1;
}

/*
this is text for the static cp markers - 
basically big, red with sexy off white 
see through background
*/
div.cplabel
{
    border-width: 0;
    position: absolute;
    opacity: .7;
    width: 3em;
    background-color: #eee;
    color: red;
    text-align: center;
    margin-left: 20px;
    font-family: monospace;
    font-family: sans-serif;
    /* font-size: large; */
}

/*
put this top left
*/
div#locList
{
    position: absolute;
    left: 10px;
    top: 10px;
    font-family: monospace;
    font-family: sans-serif;
}

/*
hide overlay class images until we want to show them
*/
img.overlay, img.fulloverlay, div.fulloverlay
{
    height: 0; 
    width: 0; 
    border-width: 0;
    position: absolute;
	display: none;
}

/*
we're hovering on a box in the loc list, we
want to show the corresponding overlay img

give the image in div.box absolute positioning
and make it 50x50 pixels
*/
div#locList div.hotspot:hover img.overlay
{
    position: absolute;
    height: 50px; 
    width: 50px;
	display: block;
}

/* as above but full size image
div#locList div.hotspot:hover img.fulloverlay,  */
div#locList div.hotspot:hover div.fulloverlay
{
    position: absolute;
    height: auto; 
    width: 20em;
    opacity:0.8; /* hack */
	display: block;
    font-size: medium;
	background:  #ee8; 
	padding: 1em;
	padding-left: 2em;
	padding-right: 2em;
	text-align: justify;
    border: #ddd 1px solid;
}

div#locList div.hotspot img.static
{
    position: absolute;
}

/*
make div.box look like a box
make it transparent
make font smallish
*/
div.hotspot
{
    border: #ddd 1px solid;
    color: #060;
    background-color: #ee8; 
    opacity:0.8;
    width: 8em;
    text-align: left;
    padding-bottom: .5em;
    padding-top: .3em;
    padding-left: .5em;
    padding-right: .5em;
    margin-top: .7em;
    font-size: small;
}

/*
make hotspots light up
when hovering
*/
div.hotspot:hover
{
    background-color: #ffb;
    opacity: 1.0
}

a
{
	color: #00a;
    border: #ddd 1px solid;
	padding: 1px;
}

a:hover
{
	background-color: #9ab;
}

a:visited
{
	color: #789;
}

p.validatorLinks img
{
    border-width: 0px;
}

p.validatorLinks
{
    position: fixed;
    top: 1000px;
    left: 1em;
}

/* trivia */
div#ghost
{
    position: absolute;
    top: 330px; 
    left: 600px; 
    width: 100px;
    height: 30px;
    /*
    background-color: #f51;
    */
}

div#ghost:hover img
{
    bottom: 50px; 
    left: 75px; 
    width: 30px;
    height: 40px;
    opacity: .3;
    position: absolute;
 }