body, div, img { margin: 0 auto; padding: 0; border: 0; }
body { font-family: Helvetica, Arial, Trebuchet MS, Trebuchet; }

#toolbar { height: 150px; width: 100%; position: fixed; top: 0; color: #fff; z-index: 999; }
#tools { width: 650px; height: 150px; background: url('images/logo.png') left no-repeat; padding-left: 350px; color: #000; text-align: center; }
div.nav { 
	height: 50px; min-width: 100px; 
	background: #fff; 
	line-height: 50px;
	-moz-border-radius: 10px; -webkit-border-radius: 10px; 
	margin-right: 25px; 
	float: left; 
	margin-top: 50px; 
	cursor: pointer; 
	padding: 0 10px 0 10px;
	font-weight: bold;
	color: #fff;
	}
div.nav:last-child { margin-right: 0; }
.nav.photos { background: #FF00FF; }
.nav.aboutus { background: #FF6E02; }
.nav.welcome { background: #0291CD; }
.nav.whatis { background: #FFD800; }

#night, #top, #middle, #bottom { min-height: 1000px; padding-top: 150px; position: relative; }

/* Night */
	#night { background: #000000 url('images/night_gradient.jpg') bottom repeat-x; overflow: hidden; }
	#night_sky { width: 1024px; height: 700px; background: url('images/night_sky.jpg') center no-repeat; }
	
/* Top */
	#top { background: #ff6e02 url('images/sun.jpg') bottom no-repeat; overflow: hidden; }
	#top_content { 
		width: 500px;
		position: absolute; top: 50px; 
		background: url('images/bg_white50.png'); 
		font-size: 14px;
		line-height: 22px;
		}
	#top_content h3 { color: #0291CD; font-family: Helvetica, Arial; margin-bottom: 5px; }
	#top_content h3:first-child { margin-top: 0; }
	#top_gradient { width: 100%; height: 498px; background: url('images/orange_gradient.jpg') repeat-x; position: absolute; top: 0; }
	
	/* Clouds */
	.cloud { position: absolute; /* z-index: 999; display: none;*/ }
	/* /Clouds */
	
/* Middle */
	#middle { background: #02b2fa url('images/sun_blue.jpg') top no-repeat; position: relative; }
	#middle_content { 
		width: 500px; min-height: 400px; 
		position: absolute; 
		top: 50px; right: 0; 
		background: url('images/bg_white50.png'); 
		font-size: 14px;
		line-height: 22px;
		}
	#events { width: 500px; position: absolute; bottom: -450px; min-height: 300px; background: url('images/bg_white50.png'); }
	#middle_content h3 { color: #005F86; font-family: Helvetica, Arial; margin-bottom: 5px; }
	#middle_content h3:first-child { margin-top: 0; }
	#middle_content ul { padding-left: 0; margin-left: 0; }
	#middle_content li { margin-bottom: 10px; }
	#middle_content a { color: #005F86; }
	#middle_gradient { width: 100%; height: 498px; background: url('images/blue_gradient.jpg') repeat-x; position: absolute; bottom: 0; }
	
	/* Waves */
	.wave { position: absolute; }
	
/* Bottom */
	#bottom { background: #ffd800; }
	#bottom_gradient { width: 100%; height: 498px; background: url('images/yellow_gradient.jpg') repeat-x; position: absolute; top: 0; }
	#bottom_content { 
		width: 500px;
		position: absolute; top: 50px; right: 0; 
		background: url('images/bg_white50.png'); 
		font-size: 14px;
		line-height: 22px;
		}
		#bottom_content h3 { color: #f00; font-family: Helvetica, Arial; margin-bottom: 5px; }
		#bottom_content h3:first-child { margin-top: 0; }
		#bottom a { color: #f00; }
		#bottom a:hover { text-decoration: none; }
	/* Beach Objects */
	#net { width: 1089px; height: 764px; position: absolute; background: url('images/net.png') no-repeat; }
	#castle { width: 197px; height: 211px; position: absolute; bottom:25px; left: 25%; background: url('images/castle.png') no-repeat; }
	#beachball { width: 176px; height: 137px; position: absolute; bottom:200px; right: 0; background: url('images/beachball.png') no-repeat; }
	#volleyball { width: 114px; height: 91px; position: absolute; bottom:50%; left: 25%; background: url('images/volleyball.png') no-repeat; }
		
/* End Pages */

.container { width: 900px; position: relative; }
	
.tl_corner { width: 42px; height: 42px; background: url('images/theCorners.png') top left; position: absolute; top: -42px; left: -42px; }
.tr_corner { width: 42px; height: 42px; background: url('images/theCorners.png') top right; position: absolute; top: -42px; right: -42px; }
.bl_corner { width: 42px; height: 42px; background: url('images/theCorners.png') bottom left; position: absolute; bottom: -42px; left: -42px; }
.br_corner { width: 42px; height: 42px; background: url('images/theCorners.png') bottom right; position: absolute; bottom: -42px; right: -42px; }
.l_side { width: 42px; height: 100%; background: url('images/theSides.png') left repeat-y; position: absolute; left: -42px; top: 0; }
.r_side { width: 42px; height: 100%; background: url('images/theSides.png') right repeat-y; position: absolute; right: -42px; top: 0; }
.t_side { width: 100%; height: 42px; background: url('images/theMiddle.png') top repeat-x; position: absolute; top: -42px; }
.b_side { width: 100%; height: 42px; background: url('images/theMiddle.png') bottom repeat-x; position: absolute; bottom: -42px; }
	
#pictures { width: 100%; height: 100%; position: absolute; border: 1px soild #f0f; }
	
/* POLAROID */
.polaroid_small { width:147px; height:150px; background-image:url('images/polaroid-bg_small.png'); position:absolute; }
.polaroid_small img { width:134px; height:110px; margin:11px 0 0 7px; }
.polaroid_small p { text-align:center; font-family:Georgia,serif; font-size:9px; color:#2E2E2E; margin-top:6px; }

.polaroid {
	width:368px;
	height:376px;
	background-image:url('images/polaroid-bg.png');
	position:absolute;
	left: 32px;
	cursor: pointer;
}
.polaroid img { width:335px; height:275px; margin:25px 0 0 15px; }
.polaroid p { text-align:center; font-family:Georgia,serif; font-size:20px; color:#2E2E2E; margin-top:15px; }

#cilene_tape { width: 235px; height: 270px; background: url('images/cilene_tape_shadow.png') no-repeat; position: absolute; top: 222px; right: -227px; z-index: 777; }
#todd_tape { width: 260px; height: 270px; background: url('images/todd_tape_shadow.png') no-repeat; position: absolute; top: 502px; right: -254px; z-index: 777; }

.yellow, a.yellow { color: #FFD800; }
.blue, a.blue { color: #0291CD; }
.orange, a.orange { color: #FF6E02; }

.left { float: left; }
.right { float: right; }
.clear { clear: both; }
