/* css Zen Garden submission 063 - 'Elastic Lawn' by Patrick Griffiths, http://htmldog.com/ptg/ */
/* css released under Creative Commons ShareAlike License v1.0 - http://creativecommons.org/licenses/sa/1.0/  */
/* All associated graphics copyright 2003, Patrick Griffiths */
/* Added: December 5th, 2003 */

/* 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. */


body {
	font-family: arial, Helvetica, sans-serif;
	font-size: 77%; /* initially set to percentage so that ems work without producing miniscule text in IE */
	text-align: center; /* needed to center the container in IE5.x because it doesn't like 'margin: 0 auto' */
	color: #dfd;
	background: #1b890e url(grass.jpg); /* defines the colour as well as the background image so that an average colour is shown while the image loads */
	padding: 0 0 6em 0;
	margin: 0;
}

.page-wrapper {
	width: 48em;
	text-align: left; /* resets the text alignment */
	margin: 0 auto; /* centers the container */
}

p {
	padding: 0;
	margin: 0;
	display: block;
	padding: 0 4em 1em 4em;
}

a {
	color: #fe6;
	background: url(underline1light.gif) bottom repeat-x;
	text-decoration: none;
}

a:hover { background-image: url(underline2light.gif); }

abbr { border: 0; }





/*------------Hidden elements------------*/

h1, .intro h3, .supporting h3 {
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}
h2 {
	display: none;
}





/*------------Main heading and Quick Summary------------*/

.intro header { padding: 0; }

h1 {
	position: relative;
	z-index: 2;
	top: 19px;
	left: -24px;
	height: 8em;
	font-size: 1em;
	background: url(logo.gif) bottom left no-repeat;
	padding: 0;
	margin: 0;
}

.summary {
	position: relative;
	z-index: 1;
	height: 8.1em; /* ensures that the linkList top fits directly below */
	background: #fc3 url(yellowdiagonal.gif);
	color: #030;
	margin: 0;
}
.summary::after {
	content: " ";
	position: absolute;
	width: 15px;
	height: 15px;
	bottom: 0;
	right: 0;
	display: block;
	background: url(corner_yelongreen_br.gif) top left no-repeat;	
}
.summary p:first-child {
	font-weight: bold;
	background: url(curve.gif) top right no-repeat;
	padding: 2.2em 15em 1em 3em;
}

.summary p:last-child {
	position: absolute;
	z-index: 2;
	top: 2.5em;
	left: 50%;
	width: 22em;
	text-align: center;
	padding: 0 0 0 11em;
	voice-family: "\"}\"";
	voice-family: inherit;
	width: 11em;
}
html>.summary p:last-child { width: 11em; }

.summary a {
	color: #070;
	background-image: url(underline1dark.gif);
}

.summary a:hover {	background-image: url(underline2dark.gif); }





/*------------Preamble, Supprting Text and Footer------------*/

.preamble, .supporting {
	width: 32em;
	background: #0d4407 url(grassdark.jpg);
	margin-left: 16em;
	voice-family: "\"}\"";
	voice-family:inherit;
	margin: 0 0 0 auto;
}
html>.preamble, html>.supporting { margin: 0 0 0 auto; }

.benefits p {
	/* because otherwise IE 6 goes crazy */
	voice-family: "\"}\"";
	voice-family:inherit;
	position: relative;
	top: -1.5em;
	margin: 1.5em 0 -1.5em 0;
}
.benefits>p {
	top: 0;
	margin: 0;
}

.preamble , .supporting div { padding: 0 0 2.5em 0; }

.explanation, .benefits {
	color: #030;
	background: #fc3 url(yellowdiagonal.gif);
	margin: 0 2em;
}


.participation, .requirements {
	position: relative;
}
.preamble p:nth-child(2) {
	padding-top: 3em;
}
.explanation p:nth-child(2), .participation p:nth-child(2), .benefits p:nth-child(2), .requirements p:nth-child(2) {
	padding-top: 4em;
}

.explanation, .benefits {
	position: relative;
}
.explanation::before, .benefits::before,
.explanation::after, .benefits::after {
	content: " ";
	position: absolute;
	width: 15px;
	height: 15px;
	bottom: 0;
	left: 0;
	display: block;
	background: url(corner_yelongreen_bl.gif) top left no-repeat;
}
.explanation::after, .benefits::after {
	left: auto;
	right: 0;
	background: url(corner_yelongreen_br.gif) top left no-repeat;
}
.explanation p:nth-child(2), .benefits p:nth-child(2) {
	background: url(corner_yelongreen_tl.gif) top left no-repeat;
}

.explanation p:nth-child(2)::before, .benefits p:nth-child(2)::before {
	content: " ";
	position: absolute;
	width: 15px;
	height: 15px;
	top: 0;
	right: 0;
	display: block;
	background: url(corner_yelongreen_tr.gif) top right no-repeat;
	padding-top: 3em;
}

.intro h3, .supporting h3 {
	position: relative;
	z-index: 2;
	top: -13px;
	height: 13px;
	background: url(enlightenment.gif) bottom center no-repeat;
	padding: 0;
	margin: 0 0 -13px 0;
}

.explanation h3 { background-image: url(about.gif); }
.participation h3 { background-image: url(participation.gif); }
.benefits h3 { background-image: url(benefits.gif); }
.requirements h3 { background-image: url(requirements.gif); }

footer {
	text-align: center;
	background: url(corner_grassdarkongrass_bl.gif) bottom left no-repeat;
	padding: 4em 0;
}

.extra1 {
	position: relative;
	top: -15px;
	width: 48em;
	height: 15px;
	background: url(corner_grassdarkongrass_br.gif) bottom right no-repeat;
	margin: 0 auto;
}






/*------------Link List------------*/

.sidebar {
	position: absolute;
	top: 16.1em;
	width: 16em;
	margin: 0;
}

.sidebar .wrapper {
	background: #5b460b url(grassbrown.jpg);
	padding: 0;
}

.sidebar h3 {
	font-family: "Trebuchet MS", arial, Helvetica, sans-serif;
	font-size: 1.2em;
	text-transform: uppercase;
	text-align: center;
	color: #fc3;
	margin: 0;
}

.sidebar h3.select {
	position: relative;
	z-index: 2;
	top: -15px;
	padding-top: 2.5em;
	margin-bottom: -15px;
	width: 13.3333em;
	background: url(corner_yelonbrown_bl.gif) top left no-repeat;
}

h3.select::after {
	display: block;
	content: " ";
	position: absolute;
	right: -15px;
	top: 0;
	width: 30px;
	height: 30px;
	background: url(twirl.gif) top right no-repeat;
	padding-right: 15px;
	margin-left: -15px;
}

.sidebar a {
	color: #efe;
	background-image: url(underline1yellow.gif);
}

.sidebar a:hover {
	background-image: url(underline2yellow.gif);
}

ul {
	list-style: none;
	padding: 1em 1.5em;
	margin: 0;
}

li {
	padding-left: 1.5em;
	margin-bottom: 1em;
}

li/* */ {
	background: url(bullet.gif) left no-repeat;
}

.design-selection ul a {
	display: block;
	font-family: "Trebuchet MS", arial, Helvetica, sans-serif;
	font-weight: bold;
}

.design-selection ul a.designer-name {
	display: inline;
	font-family: arial, Helvetica, sans-serif;
	font-weight: normal;
}

.zen-resources {
	position: relative;
	top: 15px;
	background: url(curvebl2.gif) bottom right no-repeat;
	padding-bottom: 15px;
	margin-top: -15px;
}

.zen-resources ul {
	background: url(curvebl.gif) bottom left no-repeat;
}