/* CSS Document for jonbalza.com */

* { margin: 0; padding: 0; }
body { background: #000 url(../images/layout/bg.jpg) 50% 30% no-repeat; background-attachment: fixed; text-align:center; }

#wrapper { margin: 75px auto 20px; position: relative; text-align: left; width: 390px; }
#logo { background: url(../images/jonbalza.png) left top no-repeat; height: 258px; left: -47px; position: absolute; top: 0px; width: 55px; }
	#logo a { border: none; display: block; height: 256px; width: 55px; }
	#logo span { display: none; }

#contentwrapper { background: url(../images/layout/content-bg-footer.png) left bottom no-repeat; padding-bottom: 25px; }
#content { background: url(../images/layout/content-bg.png) left top repeat-y; position: relative; z-index: 300; }
	#content #contentheader { background: url(../images/layout/content-bg-header.png) left top no-repeat; height: 25px; position: absolute; top: -25px; width: 390px; }
	#content #contenttext { min-height: 230px; padding: 20px 25px; }

#footer p { color: #9c3; font-size: 10px; text-align: center; text-indent: 0; margin: 0; }

/* HEADERS */
#contentheader h1 { background-repeat: no-repeat; background-position: left top; height: 16px; margin: 0; padding: 0; position: relative; top: 25px; left: 25px; width: 340px; text-indent: -5000px; }
h1#about { background-image: url(../images/headers/about-me.gif); }
h1#print { background-image: url(../images/headers/print-portfolio.gif); }
h1#tutorials { background-image: url(../images/headers/tutorials.gif); }
h1#web { background-image: url(../images/headers/web-portfolio.gif); }
h1#welcome { background-image: url(../images/headers/welcome.gif); }

/* Navigation */
#nav { list-style-type: none; margin: 0; padding: 0; position: absolute; right: -33px; z-index: 500; }
	#nav li { background: none; margin: 0; padding: 0; }
		#nav li a { background-image: url(../images/layout/navigation.png); background-repeat: no-repeat; border: none; display: block; outline: none; text-indent: -5000px; width: 39px; }
		#nav li#nav-home a:link, 
		#nav li#nav-home a:visited { background-position: -39px 0px; height: 80px; }
		#nav li#nav-home a:hover, 
		#nav li#nav-home a:active { background-position: 0 0; }
		#nav li#nav-home.active a { background-position: -78px 0px !important; height: 90px !important; }
		#nav li#nav-web a:link, 
		#nav li#nav-web a:visited { background-position: -39px -90px; height: 68px; }
		#nav li#nav-web a:hover, 
		#nav li#nav-web a:active { background-position: 0 -90px; }
		#nav li#nav-web.active a { background-position: -78px -90px !important; height: 78px !important; }
		#nav li#nav-print a:link, 
		#nav li#nav-print a:visited { background-position: -39px -168px; height: 82px; }
		#nav li#nav-print a:hover, 
		#nav li#nav-print a:active { background-position: 0 -168px; }
		#nav li#nav-print.active a { background-position: -78px -168px !important; height: 92px !important; }
		#nav li#nav-logos a:link, 
		#nav li#nav-logos a:visited { background-position: -39px -260px; height: 90px; }
		#nav li#nav-logos a:hover, 
		#nav li#nav-logos a:active { background-position: 0 -260px; }
		#nav li#nav-logos.active a { background-position: -78px -260px !important; height: 100px !important; }
		#nav li#nav-about a:link, 
		#nav li#nav-about a:visited { background-position: -39px -360px; height: 89px; }
		#nav li#nav-about a:hover, 
		#nav li#nav-about a:active { background-position: 0 -360px; }
		#nav li#nav-about.active a { background-position: -78px -360px !important; height: 99px !important; }