@charset "UTF-8";
/* CSS Document */
html {height: 100%;
}
body { margin: 0; padding: 0; border: 0; font-size:100%; color: #ccc; height: 100%; font-family: "Helvetica Neue", Georgia, "Book Antiqua", Palatino, serif; font-size: 1.5em; background-color: #ccc;
}
a:link {
	font-family: "Helvetica Neue", Verdana, Geneva, sans-serif;
	font-size: 14px;
	color: #ccc;
	text-decoration: none;
}
a:visited {
	font-family: "Helvetica Neue", Verdana, Geneva, sans-serif;
	font-size: 14px;
	color: #ccc;
	text-decoration: none;
}
a:hover {
	font-family: "Helvetica Neue", Verdana, Geneva, sans-serif;
	font-size: 14px;
	color: #ccc;
	text-shadow:0.1em 0.1em .1em #fff;
	letter-spacing: 2px;
	text-decoration: none;
}
a:active {
	font-family: "Helvetica Neue", Verdana, Geneva, sans-serif;
	font-size: 14px;
	color: #ccc;
	text-decoration: none;
}

/* Thanks to Paul Hayes for the CSS mimicing the Parallax effect: http://www.paulrhayes.com/2009-04/auto-scrolling-parallax-effect-without-javascript/ */
#background {
        background: url('images/foreground02.png') 5% 5%,
                url('images/middleground02.png') 20% 20%,
                url('images/background02.png') 90% 100%;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
		text-align:center;
        position: fixed;
        -webkit-transition: left 400s linear;
		transition:linear;
		transition-delay: 0;
		transition-duration: 400s;
}

#spot:target #background {
        left: -5000px;
}

#spot:hover #background {
        left: -9999px;
}
#content {
	width: 960px;
	height: 500px;
	margin: 0 auto;
	text-align:center;
	background:  url('images/fore-right.png');
	-webkit-transition: right 200s linear;
	transition: linear;
	transition-delay: 0;
	transition-duration: 200s;
	transition-timing-function: linear;
	position: absolute;
}
#spot:target #content {
	right: 4000px;
}
#spot:hover #content {
	right: -1000px;
}