body {
	/* Courtesy http://www.colorzilla.com/gradient-editor/ */
	background: white;
	background: -moz-linear-gradient(top, #7db9e8 4%, #FFFFFF 49%, #FFFFFF 100%); /* firefox */
	
	background: -webkit-gradient(linear, left top, left bottom, color-stop(4%,#7db9e8), color-stop(49%,#FFFFFF), color-stop(100%,#FFFFFF)); /* webkit */
	
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7db9e8', endColorstr='#FFFFFF',GradientType=0 ); /* ie */
	background-repeat: repeat-x;
}

a img, a {
	/* Ugh, talk about blast from the past. */
	border: 0;
	outline-style: none;
	
	/* 
	 * Prevent banner rectangle from interfering with clicking links. Note this
	 * means we have to make certain the images never overlap (but it's okay
	 * their bounding boxes do.
	 */
	 z-index: 20;
}

#banner img {
	position: absolute;
	width: 773px;
	height: 211px;
	top: 231px;
	left: 20px;
}

#navFront {
	width: 800px;
	height: 480px;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	top: 10px;
	background-image: url(/images/navFrontSky.png);
}

#navLinks {
	margin: 0px;
	width: 800px;
	height: 480px;
	position: absolute;
	top: 0px;
	left: 0px;
}

#navFront li {
	list-style-type: none;
}

#navFront li a {
	text-decoration: none;
	display: block;
	position: absolute;
	text-align: center;
}

/*
 * This percentage value must be synchronized
 * with the lower one in fx.js. Annoying?
 * Yes. But necessary in order to degrade
 * gracefully without javascript.
 */
#navLinks li a img {
	width: 92%;
	height: 92%;
}

#navFrontAbout a {
	width: 196px;
	height: 206px;
	top: 132px;
	left: 40px;
}

#navFrontPortfolio a {
	width: 272px;
	height: 228px;
	top: 16px;
	left: 268px;
}

#navFrontComics a {
	width: 164px;
	height: 112px;
	top: 12px;
	left: 556px;
}

#navFrontContact a {
	width: 180px;
	height: 120px;
	top: 176px;
	left: 551px;
}