I need some help with my code ... What I have happening is the clipboard shrinks in width and height as the window size is changed. But I am having some trouble getting the navigation to shrink along with it ... so any help would be appreciated!!

http://campsforchrist.netne.net/#

#nav-main {
				width: 100%;
				height: 100%;
				position: relative;
			}

			#nav-main a {
				position: relative;
				font-family: 'permanent_markerregular', Colibri, Consolas;
				text-decoration: none;
				list-style-type: none;
				z-index: 1000;
				}

				#camps {
					text-transform:rotate(-5deg);
					-ms-transform:rotate(-5deg); /* IE 9 */
					-moz-transform:rotate(-5deg); /* Firefox */
					-webkit-transform:rotate(-5deg); /* Safari and Chrome */
					-o-transform:rotate(-5deg); /* Opera */
				}

					#camps a {
						color: #1900d7;
						font-size: 1.1em;
						position: relative;
						top: -180px;
						left: -12px
					}

					#home a {
						color: #1900d7;
						font-size: 1.3em;
						position: relative;
						top: -261px;
						left: 338px
					}

				#contact {

				text-transform:rotate(10deg);
				-ms-transform:rotate(10deg); /* IE 9 */
				-moz-transform:rotate(10deg); /* Firefox */
				-webkit-transform:rotate(10deg); /* Safari and Chrome */
				-o-transform:rotate(10deg); /* Opera */
				}

					#contact a {
						color: #1900d7;
						font-size: .9em;
						position: relative;
						top: -466px;
						right: -677px;

					}

				#references {
					text-transform:rotate(4deg);
					-ms-transform:rotate(4deg); /* IE 9 */
					-moz-transform:rotate(4deg); /* Firefox */
					-webkit-transform:rotate(4deg); /* Safari and Chrome */
					-o-transform:rotate(4deg); /* Opera */
				}

					#references a {
						color: #1900d7;
						font-size: .8em;
						position: relative;
						top: -330px;
						left: 40px
					}

				#register {
					text-transform:rotate(-4deg);
					-ms-transform:rotate(-4deg); /* IE 9 */
					-moz-transform:rotate(-4deg); /* Firefox */
					-webkit-transform:rotate(-4deg); /* Safari and Chrome */
					-o-transform:rotate(-4deg); /* Opera */
				}

					#register a {
						color: #1900d7;
						font-size: 1.2em;
						position: relative;
						top: -420px;
						right: -580px
					}



			#header_drop {
				width: 100%;
				height: 5px;
				position: absolute;
				top: 159px;
				z-index: 100;
				margin: 0 auto;
			}


	#main_content {

		width: 75%;
		height: 100%;
		margin: 0 auto;
		position: relative;
		top: 0px;
		min-width: 650px;

	}

		#main_content p {
			color: #363636;
			font-family: 'permanent_markerregular', Colibri, Consolas;

		}

		#clip-bord {
			background-image: url(clip-bord.png);
			width: 450px;
			position: relative;
			height: 225px;
			top: -151px;
			margin: 0 auto;
			background-repeat: no-repeat;
			z-index: 1000;
		}

		#marker {
			background-image: url(marker.png);
			background-repeat: no-repeat;
			width: 230px;
			position: absolute;
			height: 40px;
			top: -151px;
			margin: 0 auto;
			z-index: 100;
		}

		#bg { position: absolute; top: 60px; }
		.bgwidth { width: 100%; min-width: 665px;}
		.bgheight { height: 100%;}

		#text {
			position: relative;
			top: -155px;
		}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script&gt;
	<script>
		$(function() {   
		
			var theWindow        = $(window),
			    $bg              = $("#bg"),
			    aspectRatio      = $bg.width() / $bg.height();
			    			    		
			function resizeBg() {
				
				if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
				    $bg
				    	.removeClass()
				    	.addClass('bgheight');
				} else {
				    $bg
				    	.removeClass()
				    	.addClass('bgwidth');
				}
							
			}
			                   			
			theWindow.resize(function() {
				resizeBg();
			}).trigger("resize");
		
		});
	</script>

	<script type="text/javascript">
$(document).ready(function() {
    var itemWidth = $('#nav-main').width();
    var availWidth = $(screen).width();
    var difference = availWidth - itemWidth;
    $('#nav-main').css('margin: 0 ' + Math.round(difference / 2) + 'px');
});
	</script>

	<title>Camps For Christ</title>
</header>
<body>
<div id="page_rap">
	<div id="header">
		<p><span style="font-size: 2.5em; position: relative; left: -40px">Camps</span> For <span style="font-size: 2.5em; position: relative; left: 40px">Christ</span></p>
		
	</div>

		<img src="header_drop.png" id="header_drop"> 

	<div id="main_content">
		<div id="clip-bord"></div>
		<img src="bb-court.jpg" id="bg">

		<div id="nav-main" id="bg">
			<ul>
				<li id="camps"><a href="#">Camps</a></li>
				<li id="home"><a href="#">Home</a></li>
				<li id="contact"><a href="#">Contact</a></li>
				<li id="references"><a href="#" >References</a></li>
				<li id="register"><a href="#">Register</a></li>
			</ul>
		</div><!--end of nav-main-->