/* css Zen Garden student submission - 'The CSS Open' by A.J. Klein */
/* Minnesota State Community & Technical College - Detroit Lakes, MN */
/* http://www.minnesota.edu/programs_majors/web_development/ */
/* Created: 20 April, 2006 */
/* All associated graphics copyright 2006, Andrew J. Klein, 
	 with special thanks to Forest Hills Golf Course, Detroit Lakes, MN */

/* css released under Creative Commons ShareAlike License v1.0 - 
	 http://creativecommons.org/licenses/sa/1.0/  */

/* IMPORTANT */
/* This design is not a template. You may not reproduce it elsewhere 
	 without the designer's written permission.  The CSS itself may 
	 freely be used for anything you wish, but the associated graphics 
	 belong to the designer.  What you may use - .css files.  What you 
	 may not use - .jpg, .gif, and .png files. */

/* ====================================================================== */



/* zeros out all default margins, padding, & borders for block elements */
html, body, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, fieldset {
   margin: 0;
   padding: 0;
   border: 0;
	}

body {
	background: transparent url("images/bg_grass.jpg") fixed;
	color: #000;
	text-align: center;
	font-size: 70%;
	font-family: Verdana, Arial, sans-serif;
	}

#container {
	background: #063 url("images/bg_sideimage.jpg") no-repeat 100% 95%;
	color: #000;	
	width: 750px;
	position: relative;  /* base setting for absolutely positioned elements within */
	margin: 0 auto;
	text-align: left; 
	border: 4px ridge #ff0;
	z-index: 0;
	}



/****************************************************/
/*   PAGE HEADER                                    */
/****************************************************/	

#pageHeader {
	background: transparent url("images/bg_pageheader.jpg") no-repeat bottom;
	color: #000;
	height: 350px; 
	}

/* hidden elements moved off-screen to support screen-readers */
/* technique from WebAIM: (http://www.webaim.org/techniques/css/invisiblecontent) */
#pageHeader h1 span, 
#pageHeader h2 span, 
#quickSummary .p1 span {
	position:	absolute; 
	left:	0px; 
	top: -500px; 
	width: 1px; 
	height: 1px; 
	overflow: hidden; 
	}



/****************************************************/
/*   TOP LINK MENU BAR  (yellow)                    */
/****************************************************/	

/* aligns positions of items contained in top link menu bar */
#footer, #quickSummary .p2 {
	position: absolute; top: 350px;
	margin: 0;
	padding: 0 18px;
	line-height: 3em;  /* centers text vertically */
	}

/* "xhtml,css,cc,508,aaa" footer links positioned in top link menu bar */
#footer {
	background: #ff0;
	color: #000;
	left: 0;
	width: 714px;
	border-top: 1px solid #063;
	border-bottom: 1px solid #000;
	}

/* "Download sample files" paragraph positioned in top link menu bar */
#quickSummary .p2 {
	display: inline;
	right: 0px;
	text-align: right;
	z-index: 1;  /* places text above footer container */
	}



/****************************************************/
/*   PREAMBLE SECTION  (white)                      */
/****************************************************/	

/* uses fixed height & overflow to maintain linkList position with text size changes */
#preamble {
	background: #fff;
	color: #000;
	height: 210px;
	width: 600px;
	overflow: auto;
	margin: 4.5em auto 10px;  /* includes menu bar height(3em) */
	padding: 10px 20px;
	font-family: Papyrus, Georgia, "Times New Roman", Times, serif;
	font-style: italic;
	border: 2px solid #333;
	}

#preamble h3 {
	background: #fff;
	color: #000;
	display: inline;
	font-family: Papyrus, Georgia, "Times New Roman", Times, serif;
	font-style: italic;
	font-size: 1.75em;
	border-bottom: 1px dotted #000;
	}

#preamble p {
  padding-top: 10px;
	font-size: 1.35em;
	line-height: 1.25em; 
	word-spacing: 0.2em;
	}

#preamble acronym {
	font-family: "Arial Narrow", Arial, sans-serif;
	font-size: 0.95em;
	font-style: italic;
	}



/****************************************************/
/*   MAIN TEXT STYLES                               */
/****************************************************/	

acronym {	
	border: 0;  /* removes auto bottom dotted border in non-IE browsers */
	}

p {
	line-height: 2em;
	}

h1,h2,h3,h4 {
	font-family: Georgia, "Times New Roman", Times, serif;
	}

h1 { font-size: 3em; }
h2 { font-size: 2.5em; font-style: italic; }
h3 { font-size: 1.5em; font-style: italic; }
h4 { font-size: 1em; }

#supportingText {
	width: 496px;
	margin-top: 16px;
	margin-left: 10px;
	margin-bottom: 3.1em;  /* includes credit bar height(3em), 0.1em adjusts box in IE  */
	padding-bottom: 1px;  /* adjusts credit bar box in IE (covers 1px background at bottom) */
	}

#supportingText h3 {
	background: #ff0 url(images/corners_top496.gif) no-repeat top;
	color: #000;
	text-align: center;
	line-height: 2em;
	}

#supportingText p {
	font-size: 1em;
	padding: 0.5em 15px;
	border-left: 1px solid yellow; 
	border-right: 1px solid yellow; 
	}

#explanation, #participation, #benefits, #requirements {
	background: #000 url(images/corners_btm496.gif) no-repeat bottom;
	color: #fff;
	margin-bottom: 16px;
	padding-bottom: 10px;
	}

/* rounded corners technique from:  Dan Cederholm -- 
	 (http://www.alistapart.com/articles/mountaintop) */



/****************************************************/
/*   BOTTOM CREDIT BAR  (yellow)                    */
/****************************************************/	

/* "Bandwidth graciously donated..." paragraph positioned at bottom of container */
#requirements .p5 {
	background: #ff0;
	color: #000;
	position: absolute; bottom: 0; left: 0;
	width: 749px;
	margin: 0;
	padding: 0;
	text-align: center;
	font-size: 1.05em;
	line-height: 3em;  /* centers text vertically */
	border-top: 1px solid #000;
	}



/****************************************************/
/*   LINK LIST MENU SIDEBAR                         */
/****************************************************/	

/* positioned (from bottom of pageHeader) to adjust with text size changes */
#linkList {
	position: absolute; top: 600px; right: 10px;
	width: 222px;
 	margin-top: 4.5em;  /* includes menu bar height(3em) */
	}

#lselect, 
#larchives, 
#lresources {
	background: #ff0 url(images/corners_bottom.gif) no-repeat bottom left;
	color: #000;
	}

#linkList h3 {
	background: url(images/corners_top222.gif) no-repeat top left;
	color: #000;
	padding: 4px 10px;
	font-size: 1.25em;
	font-style: italic;
	line-height: 1.25em;  /* centers text vertically */
	}

#linkList ul {
	background: #ff0 url("images/corners_btm222.gif") no-repeat bottom left;
	color: #000;
	list-style-type: none;
	margin-bottom: 1.5em;
	padding-bottom: 1.5em;
	font-size: 0.9em;
	border-top: 1px dotted #063;
	}

#linkList li {
	background: #ff9;
	color: #000;
	display: block;
	padding: 4px 10px;
	font-size: 1.1em;
	font-family: Georgia, "Times New Roman", Times, serif;
	border-left: 1px solid #ff0;
	border-right: 1px solid #ff0;
	border-bottom: 1px dotted #063;
	}

#lselect li {
	padding-left: 1.75em;  /* adds left padding to indent stacked links */
	font-weight: bold;
	}

/* link stacking technique from:  Douglas Bowman -- 
	 (http://www.stopdesign.com/log/2003/05/27/in_the_garden.html) */
#lselect li a {
	display: block;
	margin-left: -1em;  /* uses negative left margin to out-dent top link */
	font-weight: bold;
	}
#lselect li a.c {
	display: inline;
	margin-left: 0;  /* cancels negative margin for author link */
	font-style: italic;
	font-weight: normal;  /* cancels bold for author link */
	}
#larchives a, #lresources a {
	line-height: 1.75em;  /* centers text vertically */
	}

#linkList li:hover {
	background: #ffb;
	color: #000;
	}



/****************************************************/
/*   LINKS                                          */
/****************************************************/	

#supportingText a {
	text-decoration: none;
	border-bottom: 1px dotted #ff0;
	}
#supportingText a:link {
	color: #ff0;
	}
#supportingText a:visited {
	color: #ff7;
	border-bottom-color: #ff7;
	}
#supportingText a:hover {
	color: #ff0;
	border-bottom: 1px solid #ff0;
	}

#quickSummary .p2 a,
#requirements .p5 a {
	background-color: #ff0;
	font-weight: normal;
	text-decoration: underline;
	border: none;
	}

#footer a {
	background: #ff0;
	margin: auto 3px;
	font-weight: bold;
	text-decoration: underline;
	border: 0;
	}

#linkList li a {
	text-decoration: none;
	border: none;
	}

#quickSummary .p2 a:link,
#requirements .p5 a:link, 
#linkList li a:link {
	color: #063;
	}
#quickSummary .p2 a:visited, 
#requirements .p5 a:visited, 
#linkList li a:visited {
	color: #090;
	}
#quickSummary .p2 a:hover, 
#requirements .p5 a:hover {
	color: #063;
	text-decoration: underline;
	border: 0;
	}
#linkList li a:hover {
	color: #063;
	text-decoration: underline;
	}

#footer a:link {
	color: #000;
	}
#footer a:visited {
	color: #063;
	}
#footer a:hover {
	color: #063;
	text-decoration: underline;
	border: 0;
	}