body, html {
	width: 100%;
	height: 100%;
}

body {
	background: #dbe7eb url(../images/loader.gif) no-repeat;
	background-position: center center;
	font-family: Georgia, "Hoefler Text", "Times New Roman", Times, serif;
	overflow:hidden; 		/* needed to eliminate scrollbars caused by the background image */
	padding:0;margin:0;		/* necesarry for the raster to fill the screen */
	height:100%;width:100%;
}

/* Background Image */


#bgimg {
	position:absolute;
	z-index: -1;
}

#realBody{
	position:absolute;
	z-index: 5;				/* Place the new body above the background image */
	overflow:auto; 			/* restore scrollbars for the content */
	height:100%;width:100%;	/* Make the new body fill the screen */
	background: url('../img/raster.png'); /* this is just a fancy raster, you can remove it; I kinda like it though */
}

/*Real Content */

#container {
	z-index: 3;
	position: relative;
	width: 960px;
	height: 100%;
	margin: 0 auto;
	padding: 10px 0 0 0;
}

#container h1 {
	background: transparent url(../images/thewallthatisgreat.png) no-repeat;
	width: 484px;
	height: 383px;
	text-indent: -99999px;
	float: right;
}

#content {
	width: 484px;
	margin: 20px 0 0 0;
	padding: 0 0 50px 0;
	text-align: justify;
	font-size: 17px;
	color: #ffffff;
	line-height: 1.5em;
	text-shadow: 1px 1px 2px #000000;
	float: right;
}

#content p {
	margin: 0 0 10px 0;	
}

#content a {
	color: #ffffff;
}

#content img {
	border: 10px solid #ffffff;
	margin: 5px 0;
}

#sidebar {
	position: relative;
	top: 100%;
}

#facts {
	background: url(../images/facts.png) no-repeat;
	width: 411px;
	height: 716px;
	float: left;
	text-indent: -99999px;
}

#facts a {
	width: 318px;
	height: 41px;
	display: block;
	position: relative;
	top: 350px;
	margin: 0 0px 0 80px;
}

#comments {
	margin-top: 50px;
	padding: 20px;
	clear: both;
	background: transparent url(../images/comment_bg.png) repeat;
	display: block;
	color: #0d0d0d;
	text-shadow: none;
}

#comments a {
	color: #0d0d0d;
}