/*
background images:

	http://img223.imageshack.us/img223/644/spacepatrolxt6.jpg (leopard-ish space scene)
	http://i42.tinypic.com/28c280n.jpg (green/blue space scene) (or http://img4.imageshack.us/img4/6058/conquertheuniversealtpl8.jpg)
	http://img10.imageshack.us/img10/8072/winterprocessv21680x105gq5.jpg (abstractish pileup of winter stuff?)
	http://img16.imageshack.us/img16/530/flowdualleftnx1.jpg ("flow" left)
	http://img21.imageshack.us/img21/7955/flowdualrightkc1.jpg ("flow" right)
	http://img21.imageshack.us/img21/9691/fotoart1680x1050km0.jpg ("fotoart")
	http://img18.imageshack.us/img18/3131/184e68d29246166c9f2c466.jpg (beach with palm leaf)
	http://img3.imageshack.us/img3/5454/splash1600.png (water drop)
	images/bg/blue_gradient_1.jpg (gradient with same colors as water drop [above]) [http://i41.tinypic.com/2469w84.png]
	http://img132.imageshack.us/img132/3127/dominicansunset.jpg (Sunset in the Dominican)
	http://img38.imageshack.us/img38/2375/coastofparaisodominican.jpg (Coast in the Dominican)
	http://img30.imageshack.us/img30/571/coastrdgradmapn.jpg (Coast w/ Noise Gradient Map)
	http://i39.tinypic.com/35a6jk5.jpg (same as above)
	
*/

body {
	/* removes any and all margins around the page */
	margin: 0;
	border: 0;
	padding: 0;
	
	/* background-color: #E7E5DC; */
	background-color: #000000;
	background-image: url("http://i39.tinypic.com/35a6jk5.jpg");
	background-repeat: no-repeat;
	background-position: center center;
	background-attachment: fixed;
	
	font-family: Tahoma, sans-serif;
	font-size: 12px;
}

/* for all paragraphs */
p {	
	line-height: 16px;
}

/* all header text is centered */
h1, h2, h3, h4, h5, h6 {
	text-align: center;
}

/* no borders for images */
img {
	border: none;
}

/* code and pre uses the "Lucida Console" font... because I like it */
code, pre {
	font-family: "Lucida Console", monospace;
	font-size: 8pt;
	font-weight: normal;
	margin: 0;
}

/* allows centering to be specified by a class */
p.centered {
	text-align: center;
}
img.centered {
	display: block;
    margin-left: auto;
    margin-right: auto;
}

/* link behavior */
/* color: #5555ff; */
a:link { color: #5555ff; text-decoration: underline; }
a:active { color: #5555ff; text-decoration: none; }
a:visited { color: #5555ff; text-decoration: none; }
a:hover { color: #5555ff; text-decoration: underline; }

/* quick tool to allow colored text n' stuff */
span.red { color: red; }
span.darkred { color: #cc2222; }
span.orange { color: orange; }
span.yellow { color: yellow; }
span.green { color: green; }
span.blue { color: blue; }
span.purple { color: purple; }
span.brown { color: #a52a2a; }
span.black { color: black; }
span.white { color: white; }
span.teal { color: #00ccdd; } /* this is my teal, not their teal... dang W3C */

/* top navigation */
#nav {
	width: 100%;
	height: 50px;
	color: white;
	position: fixed;
	background-image: url("images/nav/bg_punchedholes.png");
	background-repeat: y-repeat;
	background-position: top center;
}
	#nav #navcontent {
		margin: 0 auto;
		text-align: center;
		width: 800px;
		height: 50px;
	}
		#nav #navcontent .navitem {
			float: left;
			width: auto;
			height: 50px;
			margin-left: 32px; /* margin between navitems */
		}
			/* all of the following is the CSS version of the javascript rollover for the top nav */
			/* this will work even if the user has javascript turned off... it's just slower */
			#nav #navcontent .navitem#navitemhome {
				width: 94px;
				background-image: url("images/nav/home-inactive.png");
			}
				#nav #navcontent .navitem#navitemhome:hover {
					background-image: url("images/nav/home-hover.png");
				}
			#nav #navcontent .navitem#navitemblog {
				width: 71px;
				background-image: url("images/nav/blog-inactive.png");
			}
				#nav #navcontent .navitem#navitemblog:hover {
					background-image: url("images/nav/blog-hover.png");
				}
			#nav #navcontent .navitem#navitemportfolio {
				width: 139px;
				background-image: url("images/nav/portfolio-inactive.png");
			}
				#nav #navcontent .navitem#navitemportfolio:hover {
					background-image: url("images/nav/portfolio-hover.png");
				}
			#nav #navcontent .navitem#navitemme {
				width: 137px;
				background-image: url("images/nav/me-inactive.png");
			}
				#nav #navcontent .navitem#navitemme:hover {
					background-image: url("images/nav/me-hover.png");
				}
		#nav #navcontent .navtitle {
			float: right;
			width: auto;
			height: 50px;
		}
/* page header */
#spacerafternav {
	height: 200px;
	background-image: url("images/header_index.png");
	background-repeat: no-repeat;
	background-position: bottom center;
}

/* the content (all the stuff that's not the nav menu) */
#content {
	margin: 0 auto;
	text-align: center;
	width: 800px;
}
	#content #left {
		float: left;
		width: 400px;
		height: auto;
		text-align: left;
	}
	#content #right {
		float: right;
		width: 400px;
		height: auto;
		text-align: left;
	}

/* the containers that will contain content (but not #content) */
/* these are contained in #right and #left */
.containertop {
	width: 400px;
	height: 40px;
	background-image: url("images/containertop_400.png");
}
	/* for the little icons in the corners */
	#left .containertop img {
		float: left;
	}
	#right .containertop img {
		float: right;
	}
.container {
	width: 352px; /* width - (padding-left + padding-right) */
	height: auto;
	background-image: url("images/container_400.png");
	color: #cccccc;
	
	padding-left: 24px;
	padding-right: 24px;
}
.containercontent {
	margin: 0;
	border: 0;
	padding: 0;
}
.containerbottom {
	width: 400px;
	height: 40px;
	background-image: url("images/containerbottom_400.png");
}

/* removes hideous border */
/* without this, there will be empty space on top and bottom when using tags inside of a div.container */
.container p, 
.container h1, 
.container h2, 
.container h3, 
.container h4, 
.container h5, 
.container h6 {
	margin-top: 0;
	border-top: 0;
	padding-top: 0;
}
.container h1.loneheader { /* meaning the header is the only thing in the container (should be h1) */
	margin-bottom: 0;
	border-bottom: 0;
	padding-bottom: 0;
}
.container p {
	margin-bottom: 0;
	border-bottom: 0;
	padding-bottom: 8px;
}
/* except for the last paragraph in a container */
.container p.lastp {
	padding-bottom: 0;
}
.container h1 { color: #00ccdd; } /* seafoam green */
.container h2 { color: orange; }
.container h3 { color: #00ccdd; } /* seafoam green */
.container h4 { color: #cc2222; } /* dark red */
.container h5 { color: #00ccdd; } /* seafoam green */
.container h6 { color: orange; }


#floatingme {
	position: fixed;
	bottom: 0px;
	left: 0px;
}

#legal {
	/* z-index: -1; */
	position: fixed;
	bottom: -2px;
	right: 0px;
}
	#legal img {
		border: none;
	}