/*
 * glassonion.org - cascading style sheet 
 * 
 * Original design: Erskin L. Cherry (erskin@eldritch.org)
 * 27 Oct 2004
 */


/*
 * Stylings for basic template
 */

/* The two black lines are placed in the back here. */
body {
	background: white url(images/black_lines.png) repeat-y;
	font-family: Georgia, "Times New Roman", serif;
}

/* This is a cheap trick since you can't position the body tag at 0,0 */
div.outerbox {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
}

/* This is for the logo and links */
div.sidebar {
	padding: none;
	float: left;
	width: 220px;
}

/* This places the header in the correct position and sets its size. */
h1.logo {
	margin: 0px;
	width: 220px;
	height: 286px;
}

/* This makes the TEXT portion of the header appear BEHIND the logo image. */
h1.logo span {
	position: relative;
	top: -286px;
	z-index: 0; /* sneaky, huh? */
}

/* This puts the logo on top of the header text, but under the links. */
h1.logo img {
	position: relative;
	width: 220px;
	height: 286px;
	z-index: 1;
}

/* Scoot the links up on top of the bottom of the logo. */
ul.links {
	position: relative;
	top: -110px;
	list-style: none;
	padding-left: 0px;
	margin-left: 120px;
	z-index: 2;
}

/* Put the gradient behind all the content, and save space for the sidebar. */
div.content {
	background: white url(images/grey_gradient.png) repeat-x;
	margin-left: 220px;
	padding-right: 30px;
	padding-top: 45px;
	min-height: 286px; /* wish this actually worked. */
}

/* Make sure the footer is at the foot, and on the right side. */
p.footer {
	text-align: right;
	font-size: small;
	padding-top: 20px;
	clear: left;
}

/* Keep the button image nice and flush in the footer. */
img.footer {
	border: none;
	margin: 0px 5px;
}

h1 {
	font-family: Verdana, Helvetica, Tahoma, sans-serif;
	font-size: large;
	color: #600;
}



/*
 * Stylings for photo images and graphics
 */


/*
 * For pages with a photo, such as the Eggplant photo.
 * Or if you ever feel like doing a templated page for each
 * graph paper artwork.
 */
img.photo {
	border: solid black 2px;
	margin: 5px;
	}

/* For the blurb about each group */
div.photogroup p {
	background-color: #ddd;
	clear: left;
	margin: 5px;
}

/* For the section for each thumbnail and it's comment */
div.photo {
	float: left;
	width: 300px;
	margin: 5px;

	/*
	 * Remove this if the images are ever all the same size, otherwise
	 * set it a little above the hieght of the tallest one.
	 */
	height: 210px;

}

/* For the thumbnail image itself. */
img.thumbnail {
	float: left;
	border: solid black 2px;
	margin: 5px;
	/* If the dimensions ever become uniform, put them here */
}