@charset "utf-8";
/* CSS Document */
* {padding:0; margin:0;list-style:none;border:none;}
html,body {height:100%;}
body {background: url(images/lollipopbg.jpg) #e16f1a center center; font-family: "Trebuchet MS", Arial,Helvetice, sans-serif ;color:#333;
font-size:0.75em;}
a, a:visited, a:focus{ font-weight:100;color:#fff; text-decoration:none;}
a:hover, a:focus {color:#99cc33;}
img {margin: 0 auto;}


#distance{
	width:100%;
	position:relative;
	height:50%;
	float:left;
	margin-bottom:-300px;
}

#container{
	text-align:left;
	margin: 0 auto;
	clear:left;
	width:947px;
	height:600px;
	position:relative;
}
#header {height:128px; background: url(images/header.png) no-repeat;}
#content {height:380px;}
#footer {height:72px; background: url(images/footer.png) no-repeat; position:relative}
#footer p {width: 570px;font-size:12px; position:absolute; left:15px; top:5px;font-weight:bold}
#time { font-size:14px;position:absolute; right:15px; top:5px; font-weight:bold;}

.img{
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/content.gif', sizingMethod='scale');
	background-color: transparent;
	/*Notice I'm defining the image width and height here*/
	width: 947px;
	height: 380px;
}

html>body .img{background: url(images/content.gif) no-repeat;}
#front { position:absolute; z-index:12; }
#back { position:absolute; z-index:10; left:160px;}

#header img { position: absolute; top:18px; left:18px;}
#header h1 {position: absolute; top:31px; left:280px; width:450px; text-align:center;}
h1 {color:#333; font-size:15px; text-align:left;}

.spots {text-align:center;
	color:#fff;
	width:200px;
}
.spots h2 { margin-bottom:2px;font-size:14px; text-decoration: underline;}
.spots p {margin-bottom:2px; font-size:13px;}
#spot_tl {
	position:absolute;
	top:52px;
	left:75px;
	
}
#spot_tl h2,#spot_tl p{color:#333;}
#spot_tr {
	position:absolute;
	top:55px;
	left:703px;
	color:#fff;
}
#spot_bl {
	position:absolute;
	top:253px;
	left:145px;
	font-weight:bold;
}
#spot_br{
	position:absolute;
	top:227px;
	left:642px;
}