/* css Zen Garden */
/* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/  */

/*
Title: "Coffee Break"
Author: Stephen Stchur
*/

/* Life is easier (for me anyway) if all items have no margin and no padding by default */
*
{
	margin: 0;
	padding: 0;
}

/* Tag-level styles */
body
{
	position: relative;
	font: 76%/160% arial, tahoma, verdana, sans-serif;
	color: #746252;
	background: url(coffeestripes.gif);
}

a, a:link { text-decoration: none; color: #466585; }
a:visited  { color: #8f9caa; }
a:hover { text-decoration: underline; color: #3e241d; }

p { margin: .25em 0 .75em; }
h3 { margin-top: 1em; }
/* End Tag-level styles */

/* Container limits the page to 760px (aiming for compatibility with 8x6 res) and places it in the center of the given space */
#container
{
	position: relative;
	margin: 0;
	left: 50%;
	margin-left: -380px;
	width: 760px;
	background: #faf2e0 url(coffeecup.jpg) no-repeat 15px bottom;
	border-left: 1px solid #faf2e0;
	border-right: 1px solid #faf2e0;
}

#intro
{
	position: relative;
	background: url(beans_closeup.jpg) no-repeat top right;
}

#pageHeader
{
	position: relative;
	height: 152px;
	background: url(demitasse.gif) no-repeat;
	z-index: 200;	/* needs to have a higher z-index than #quickSummary so that the brown background from #quickSummary doesn't run "over" the #pageHeader */
}

/* "css zen garden" text replacement */
#pageHeader h1
{
	position: absolute;
	width: 412px;
	height: 127px;
	right: 67px;
	background: url(pageheader_h1.gif) no-repeat;
	border-left: 2px solid #746e52;
	border-right: 2px solid #746e52;
}
#pageHeader h1 span { position: absolute; left: -5000px; }

/* "the beauty of css design" text replacement */
#pageHeader h2
{
	position: absolute;
	width: 212px;
	height: 13px;
	right: 83px;
	bottom: 32px;
	background: url(pageheader_h2.gif) no-repeat;
}
#pageHeader h2 span { position: absolute; left: -5000px; }


/*
 #extraDiv1 forms the bottom part of the coffee cup.

NOTE:
I  probably didn't _need_ to utilize this extra div, but it made the CSS for the masthead simpler, and I'm all for simple CSS!
*/
#extraDiv1
{
	position: absolute;
	top: 152px;
	width: 176px;
	left: 50%;
	margin-left: -380px;
	height: 36px;
	z-index: 50;
	background: url(demitasse_bottom.gif) no-repeat;
}

/* "a demonstration of what can be accomplished visually through css-based design" text replacement */
#quickSummary
{
	position: relative;
	margin: -25px 0 38px;
	width: 760px;
	height: 24px;
	border-top: 1px solid #faf2e0;
	background: #746252 url(quicksummary_p1.gif) no-repeat 225px 55%;
	z-index: 100;
}
#quickSummary .p1 { display: none; }		/* not utilizing the text "select any design from the list..." */

/* styling for "download the sample html file and css file */
#quickSummary .p2
{
	position: absolute;
	top: 22px;
	right: 0;
	padding: 3px;
	text-indent: 25px;
	background: url(disk_icon.gif) no-repeat 5px center;
	border: 1px dotted #3e241d;
}

/* The #preamble and #supportingText form one column on the right-hand side of the #container */
#preamble,
#supportingText
{
	position: relative;
	margin: 0;
	padding: 0 10px;
	left: 200px;
	width: 540px;
	border-left: 1px dotted #3e241d;
}

/* styles common to all h3 elements within #linkList, #preamble, and #supportingText */
#linkList h3,
#preamble h3,
#supportingText h3
{
	position: relative;
	height: 18px;
}

/*
NOTE:
I've opted to use off-left positioning to do the text replacement, rather than using display: none;
Most screen readers don't bother reading elements whose display property is set to 'none', and since
accessibility is a pretty important part of web standards, and since heading-level tags signify
pretty important information to the page, we'll definitely want screen readers to pick up this text.

Using off-left positioning gives me the ability to show the text images I've created, while
still ensuring screen readers don't ignore the h3's.
*/

/* "the road to enlightenment" text replacement */
#preamble h3 { background: url(preamble_h3.gif) no-repeat; }
#preamble h3 span { position: absolute; left: -5000px; }

/* "so what is this about?" text replacement */
#explanation h3 { background: url(explanation_h3.gif) no-repeat; }
#explanation h3 span { position: absolute; left: -5000px; }

/* "participation" text replacement */
#participation h3 { background: url(participation_h3.gif) no-repeat; }
#participation h3 span { position: absolute; left: -5000px; }

/* "benefits" text replacement */
#benefits h3 { background: url(benefits_h3.gif) no-repeat; }
#benefits h3 span { position: absolute; left: -5000px; }

/* "requirement" text replacement */
#requirements h3 { background: url(requirements_h3.gif) no-repeat; }
#requirements h3 span { position: absolute; left: -5000px; }

/* "select a design" text replacement */
#lselect h3 { background: url(lselect_h3.gif) no-repeat; margin-bottom: 5px; }
#lselect h3 span { position: absolute; left: -5000px; }

/* "archives" text replacement */
#larchives h3 { background: url(larchives_h3.gif) no-repeat; }
#larchives h3 span { position: absolute; left: -5000px; }

/* "resources" text replacement */
#lresources h3 { background: url(lresources_h3.gif) no-repeat; }
#lresources h3 span { position: absolute; left: -5000px; }

/* The #linkList is the narrow column on the left-hand side of #container which holds the list of designs, links to archives, and links to resources */
#linkList
{
	position: absolute;
	top: 176px;
	width: 170px;
	padding: 0 5px 0 10px;
}
#linkList ul {list-style: none; }	/* by default, unordered lists within #linkList will not have bullets */

/* Use the diamond bullet (implemented w/ a background image) for the list of css designs */
#lselect ul
{
	position: relative;
	margin: 0 0 12px -3px;
}
#lselect li
{
	background: url(diamond_bullet.gif) 0 .4em no-repeat;
	padding: 0 0 4px 1.2em;
	margin-bottom: 4px;
	border-bottom: 1px dotted #746252;
	/*border-top: 1px dotted #746252;*/
}
#lselect li a { font-weight: bold; display: block; }
#lselect li a.c { font-weight: normal; text-transform: lowercase; display: inline; }

/* The list of archives and resources will have no bullet, but we'll indent the text a little */
#larchives ul,
#lresources ul
{
	text-indent: 1em;
}

/* Stretch the footer across the width of the #container and align its text center */
#supportingText { padding-bottom: 2.2em; }	/* ensure enough space for the footer (using ems allows for text size to increase without breaking the footer layout) */
#footer
{
	position: absolute;
	bottom: 0;
	right: 1px;
	padding: .2em 0 0;
	height: 2em;
	width: 760px;
	background-color: #746252;
	color: #faf2e0;
	text-align: center;
}

#footer a, #footer a:link { color: #faf2e0; }	/* override brown link color to cream (so we can actually see the links in the footer */

/* No point in displaying these guys */
#extraDiv2, #extraDiv3, #extraDiv4, #extraDiv5, #extraDiv6 { display: none; }