/*----------------!!!!!!!!----------------
Known Bugs:

	- IE breaks thinks. Maybe the 100% (undefined)? sometimes things are shorter and other times longer if you scroll up and down; discovered that the content might end up too short for the container, allowing the container background to show through. Grr on you stupid IE.
	
	- if the content is shorter than the nav, the links overlap the footer
	- this isn't necessarily a bug, but WHY is there a huge gap at the top fo the content?!

	- teeny tiny contact info on IE, no good! (IE being dumb again; why am I not surprised?)

	- (just a note on the image) the "active/hover" color for the links in the content is very difficult to see over the image

	- ul.team --need to fix margin/placement for the bullets: right now they're too far to the left and fall onto the image when the image is floated left

	- nav bar hover/unvisited same color!!!

	- IE (again) doesn't like floating image links for some reason--messes up the a:hover/a:active. Go figure.
----------------------------------------*/


/*--------------------------
Structure
---------------------------*/

body {
	margin: 0;
	padding: 0;
	background-color: #202032;
	color: black;
	font-family: helvetica; /*, arial, sans-serif;*/
}

/* Because IE doesn't understand "auto" and though we hate it, we must cater to it */
#IEhack {
	text-align: center;
}

#container {
	position: relative;
	margin: 0px auto;
	width: 798px;
	border: 1px white solid;
	background: #72402C url(navrbot2.gif) no-repeat left bottom;
}


#header {
	margin: 20px auto;
	margin-bottom: 0;
	background: transparent url(header.jpg) no-repeat;
	height: 150px;
	width: 800px;
}

#header span {
	display: none;
}

	/* why does the content dictate the size of the container? if the content is too short, the nav gets pushed over the footer, etc. grr!
	on the whole, the interaction of the container, nav bar, and content is really weird and messes with my brain*/

#content {
	margin-left: 200px; /* receives margins from #container */
	padding: 5px; /* requires at least 1px padding for some mysterious reason!? */
	margin-top: 0;
	background: #E6E6E8 url(contentlbot.gif) no-repeat left bottom;
	border: 0 white solid;
	border-left-width: 5px;
	border-top-width: 0px; /* header image has 5px? border*/
	text-align: left;\
}

div.clearer {
	clear: both;
	display: block;
	height: 0;
}

/*---------------------------
Footer (Copyright info)
---------------------------*/
p.footer {
	width: 792px; /* why does this end up so small? looks correct in Safari but doesn't line up properly in IE*/
	margin: 0px auto;
	margin-bottom: 20px;
	text-align: center;
	font-size: small;
	border: 1px white solid;
	/*border-top-width: 5px;*/
	border-width: 4px 1px 1px 1px; /*5px b/c 1px from container*/
	padding: 5px 3px 3px 3px;
	background-color: gray;
}


/*---------------------------
Navigation Links (Left)
---------------------------*/

#headerlinks {
	position: absolute;
	top: 0px;
	left: 0;
	width: 190px;
	border: 0px blue solid;
	padding: 5px;
	text-align: left;
}

#headerlinks a {
	display: block;
	font-variant: small-caps;
	line-height: 2em;
	text-indent: 5px;
	color: #E6E6E8; /*#8EA5E0;*/
}

#headerlinks a:visited {
	color: #C7A88F;
}

#headerlinks a:hover, #headerlinks a:active {
	color: #D8E2FA;
}

/*--------------------------
Links
---------------------------*/

a {
	text-decoration: none;
	color: #844A24;
}

a:visited {
	color: gray; /* fix this, please */
}

a:hover, a:active {
	color: #C7A88F;
}


/*---------------------------
Main Content
---------------------------*/

#content h1{
	font-variant: small-caps;
	letter-spacing: 3px;
	text-align: center;
	border: 0px red solid;
}

#content h2{
	text-align: center;
}

#content strong{
	font-variant: small-caps;
	font-weight: bold;
	letter-spacing: 1.5px;
}

ul {
	list-style-type: square;
	list-style-position: outside;
}

.nottrue {                    /* a class for sarcasm */
	text-decoration: line-through;
}

img.screen {
	float: right;
	margin: 5px 0px 5px 25px;
}

img.screen_alt {
	float: left;
	margin: 5px 25px 5px 0;
}

p.gamedesc {
	clear: both;
}

img.thumbnail {
	width: 133px;
	height: 100px;
}

img.thumbnailwide {
	width: 160px;
	height: 100px;
}


a img {
	border: 2px #844A24 solid;
	padding: 1px;
}

a:visited img {
	border: 2px gray solid;
	padding: 1px;
}

a:hover img, a:active img {
	border: 2px #C7A88F solid;
	padding: 1px;
}


/*-----------------------------
Resume
------------------------------*/
/*
h1
h2
h3
*/
/* replaces #content in this page */
/*#resume {
	margin-left: 15em;
	padding: 10px;
	background-color: #E6E6E8;
	width: 65%;
}*/

address {
	font-size: 0.9em;
	margin-left: 1em;
}

.email {
	font-size: 0.9em;
	margin-left: 1em;
}

.phone {
	font-size: 0.9em;
	margin-left: 1em;
}

#edu {
	clear: both;
	padding: 1.5em 0 0 0;
}

#educate p {
	line-height: 0.5em;	
}

p.degree {
	font-weight: bold;
	padding: 1em 0 0 ;
}

#progexp {
	padding: 1.5em 0 0 0;
}

#skills {
	padding: 1.5em 0 0 0;
}

#workexp {
	padding: 1.5em 0 0 0;
}

p.job {
	font-weight: bold;
}