/* css Zen Garden - 'Black River - White Fish' by Inguna Trepsha - http://www.antemeridiemdesign.com/ */
/* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/  */
/*All associated graphics copyright 2005, Inguna Trepsha*/

/*Tested: Mac OS X: Camino 0.8.4, Firefox 1.07, Opera 8.5, Safari 1.3.1; Windows: IE 5.5+, Firefox 1.07, NS 6.2.3, NS 7.2, NS 8.0.4, Opera 8.5*/

/* basic elements */
body { 
	font:  0.8em Tahoma, "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
	margin: 0; padding: 2px;
	color: teal;
	background:url(ddwf4.jpg) no-repeat top left fixed;
	/*background-color: white;*/
	
	}

p { 
	margin-top: 2px;
	margin-bottom: 14px;
	background-color: transparent;
	}

h1
{
	font: tahoma, sans serif;
	background-color:Transparent;
	margin:12px 0px 24px 0px;
	text-align:center;
	word-spacing:.5em;
	text-transform:uppercase;
	}
h3 {
	height: 12px;
	margin: 24px 0px 10px 0;
	font: Tahoma, Arial, sans-serif; /*for IE*/
	/*text-indent: -999em;*/
	background-color: transparent;
	text-transform:uppercase;
	text-align:center;
	}
h4
	{
		font:tahoma, sans serif, arial;
		color: #036;
		font-size: 120%;
		font-weight: normal;
		text-transform: uppercase;
		text-align: center;
		letter-spacing: .5em;
		padding: .4em 0;
		border-top: 1px solid #069;
		border-bottom: 1px solid #069;
		background: url(h4.jpg) repeat-x;
		}
a:link { 
	font-weight: bold; 
	text-decoration: none; 
	color: #308d04;
	background-color: transparent;
	}
a:visited { 
	font-weight: normal;
	text-decoration: none; 
	color: #a2d703;
	}
a:hover, a:active { 
	text-decoration: underline; 
	color:  #a2d703;
	}
acronym { 
	border-bottom: 0px;
	}
#preamble acronym, #explanation acronym, #participation .p2 acronym{ 
	border-bottom: 1px dotted black; 
	cursor: default;
	}

/* specific divs */
#container 
{
	/*background: url(ddwr.jpg) repeat-y top-left;*/
	margin: 0 212px 0 222px;
	width:53%;
	position: relative;
	/*FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=#ffffff,endColorStr=#cb080c);*/
	}
#film
{
	background:url(film1024.gif);
	margin:0 0 0 222px;
	color:Green;
	}
#photos
	{
		margin-left:90px;
		color:#fff;
		width:100px;
	}
#thumbnail
	{
		width: 130px;
		float: left;
		margin: 0 10px 10px 0;
		background: url(phbga.gif) no-repeat;
		color:#cb080c;
	}
#thumbnail img
	{
		border: solid 1px #ccc;
		margin: 10px 0 0 10px;
		color:#cb080c;
	}
#thumbnail p
	{
		margin: 0;
		padding: 0 20px 30px 10px;
		background: url(phbgb.gif) no-repeat 0 100%;
		color:#cb080c;
	}
#clear 
{
	clear: left; 	
	}
#poems
{
	filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=#ffffff,endColorStr=#99ccff);
	margin: 0px 0px 150px 222px;
	width: 100%;
	position: relative;
	text-align: center;
}
	
#poems p
{
	color:teal;
	margin:0 0 20px 0;
	}
	
#poems .title
{
	color:teal;
	word-spacing:0.5em;
	FILTER:progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=#ffffff,endColorStr=#cb080c);
	margin:50px 0 20px 0;
	text-transform:uppercase;
	text-decoration:bold;
	font:tahoma;
	background: url(h4.jpg) repeat-x;
	}
#poems .head
{
	color:teal;
	letter-spacing:0.2em;
	text-transform:uppercase;
	font-weight:bold;
	font:120%;
	line-height:30px;
	background: url(h4.jpg) repeat-x
	}
	
/*with left margin and padding you can control how much of the title slides under the left leaf and when the sliding stops*/
#pageHeader { 
	margin: 0 0 0 0; 
	padding-left: 0;
	height: 160px;
	}
* html #pageHeader 
{
	position: relative;
	margin: 0 0 0 0; 
	padding-left: 0;
	}
#pageHeader h1, #pageHeader h2 {
	margin: 0; 
	padding: 0;
	font: Tahoma, Arial, sans-serif; /*for IE*/
	/*text-indent: -999em;*/
	text-transform:uppercase;
	text-align:center;
	}
	
/*in a real-life situation, the --#quickSummary-- part as defined below would be unnecessary. It is called forth by the necessity to put two absolutely positioned DIVs one under the other, and that causes overlapping in case the user keeps increasing the text size.*/

#quickSummary {
	position: absolute;
	top: 100px;
	left: 190px;
	/*width: 200px;*/
	z-index: -2;
	}
#quickSummary p {
	font:tahoma;
	color:teal;
	text-align:right;
	/*position: absolute;
	top: 128px;
	left: 0px;
	display: block;
	width: 60px;
	height: 13px;*/
	}
	
#quickSummary .p1 {
	background: url(html.gif) no-repeat left top; 
	position: absolute;
	top: 128px;
	left: 0px;
	display: block;
	width: 60px;
	height: 13px;
	}
	
#quickSummary a {
	background: url(html.gif) no-repeat left top; 
	position: absolute;
	top: 128px;
	left: 0px;
	display: block;
	width: 60px;
	height: 13px;
	}
#quickSummary a +a {
	background:  url(css.gif) no-repeat left top; 
	top: 144px;
	}
#quickSummary a:visited {
	background-position: 0 -12px;
	}
#quickSummary a:hover {
	background-position: 0 -24px;
	}
#quickSummary a {
	text-decoration: none;
	}


/* START --#supportingText--: The behavior of the white text within --#supportingText-- is controlled mainly by the width and the left margin. Change percents to fixed units (px) or combine them to achieve different effects. Throw in text-indent, word-spacing, min-width, max-width to suit your needs. You can easily ensure that the text never disappears under the right or left leaf (with average window widths, of course); or vice versa, you can make it disappear now and then, thus encouraging the user to adjust the width of the window until the layout settles into the most pleasing shape for him. Well, I know, I know, the number of users who'll never bother to redraw the window or will be upset by this feature is much greater than the minority I'm counting on, but then again, CSS Zen Garden is hardly some shopping or bank site that is obliged to please each and every bloke out there. */
#supportingText, #preamble {
	word-spacing: 0.5em;
	text-align: center;
	/*text-indent: 30%;*/
	}
#supportingText a, #preamble a{
	word-spacing: 0;
	}

#preamble h3{
	background: url(road.gif) no-repeat right;
/*in the next line, using padding-left with px (instead of percents) 
ensures that the word 'enlightment' remains visible as the right leaf 
closes down on the left one. Geckos only */
	padding-left: 140px;
	width: 80%;
	}
#preamble p {
	/*margin-bottom: 12px;*/
	}
#preamble .p1{
	text-indent: 25%;
	margin-left: 47%;
	width: 64%;
	}
#preamble .p2{
	margin-left: 35%;
	width: 70%;
	}
#preamble .p3{
	text-indent: 20%;
	margin-left: 24%;
	width: 83%;
	}

#explanation h3{
	background: url(ddwf3.jpg) repeat-y right;
	margin-left: 0;
	width: 100%;
	}
#explanation .p1{
	margin-left: 22%;
	width: 85%;
	text-indent: 5%;
	}
#explanation .p2{
	margin-left: 18%;
	width: 80%;
	}
#participation
{
	border-bottom:dotted 1pt black;
	text-align:right;
	}
#participation h3 {
	background: url(participation.gif) no-repeat right;
	width: 75%;
	margin-left: 18%;
	}
#participation .p1 {
	width: 75%;
	margin-left: 25%;
	}
#participation .p2 {
	text-indent: 25%;
	width: 87%;
	margin-left: 20%;
	}
#participation .p3 {
	width: 95%;
	margin-left: 10%;
	}

#benefits {
	/*width: 75%;
	text-indent:0%;*/
	margin-left: 10%;
	/*background:url(ddwf.jpg) no-repeat center right;
	width:25%;*/
	}
#benefits h3 
{
	background: url(benefits.gif) no-repeat top center;
	width: 100%;
	/*margin-left: 8%;*/
	}
#benefits a
{
	/*margin:5%;
	font-size:150%;*/
	word-spacing:0;
	font:tahoma
}
#benefits a:hover
{
	background: #99ccff;}
	
#benefits p
{
	/*text-indent:5%;*/
}
#links
{
	background:white;
	text-transform:uppercase;
	margin: 0 0 0 20%;
	}
#links a
{
	margin:0%;
	background:white;
	word-spacing:0.5em;
	}
#links a.hover
	{
		color:Blue;
		}
#requirements h3
{
	background: url(requirements.gif) no-repeat;
	height: 13px;
	margin-left: 15%;
	}
#requirements a
{
	line-height:1.1;
	text-indent:20%;
}
#requirements p
{
	line-height: 1.4;
	text-indent:50%;
	}
#requirements .p1{
	margin-left: -5%;
	text-indent: 10%;
	}
#requirements .p2{
	margin-left: -15%;
	text-indent: 8%;
	}
#requirements .p3{
	margin-left: -12%;
	text-indent: 10%;
	}
#requirements .p4{
	margin-left: -5%;
	}

#requirements .p5 {
	font-size: 10pt;
	margin: 25px 0 0 0;
	word-spacing: 0.2em;
	text-indent: 0;
	}
#requirements .p5 a{
	background: url(dreamfs.gif) no-repeat;
	display: block;
	position: relative;
	left: -79px;
	height: 32px;
	width: 158px;
	margin: 5px 0px 0px 50%;
	text-indent: -999em;
	}
#requirements .p5 a:visited, #requirements .p5 a:hover{
	text-decoration: none;
	background-position: 0 -32px;
	}
	
#footer 
{
	position:absolute;
	left:500;
	bottom:-120px;
	width:100%;
	height:50px;
	font-size: 9pt;
	margin: 150px 0 0px 0px;
	text-transform: uppercase;
	text-indent: 0;
	word-spacing: 0;
	background:url(ddwf3.jpg) no-repeat right;
	}
#footer a {
	padding-right: 10px;
	}
#footer img
	{
		FILTER: alpha(opacity=40)
	}
/* END --#supportingText--*/

/* START --#linkList-- */
#linkList {
	position: absolute; 
	z-index: 2;
	top: 388px; 
	left: -190px;
	width: 200px;
	}
#linkList ul {
	margin: 0; 
	padding: 0; 
	list-style: none;
	background:url(a1.jpg);
	}
#linkList ul li{
	font-size: 8pt;
	line-height: 1.4em;
	color: black;
	background:url(a1.jpg)
	}
#linkList a {
	font-size: 9pt;
	line-height: 1.4em;
	font-weight: normal;
	color: white;
	}

#lselect h3 {
	margin: 0;
	}
#lselect li a {
	padding-top: 3px;
	display: block;
	}
#lselect li a.c {
	display: inline;
	font-size: 8pt;
	font-weight: bold;
	color: black;
	}
	
#larchives h3 {
	background: url(archives.gif) no-repeat;
	height: 14px;
	margin: 20px 0 4px 0px;
	}
#larchives ul li {
	text-transform: lowercase;
	}
#larchives a, #lresources a {
	background-color: #308d04;
	color: black;
	}
	
#lresources h3 {
	background: url(resources.gif) no-repeat;
	height: 14px;
	margin: 20px 0 4px 0px;
	}
	
#linkList a:visited, #linkList a:hover {
	color: #a2d703;
	}
/* END --#linkList--*/
/*START Inline listing*/

ul#navigation
	{
		margin-left: 0;
		padding-left: 0;
		list-style-type: none;
		background: #036;
		float: left;
		width: 100%;
		height:50px;
	}
	
	ul#navigation li 
	{
		display: inline; }
	
	ul#navigation a
	{
		display: block;
		float: left;
		padding: .2em 1em;
		text-decoration: none;
		color: #fff;
		background: #036;
		border-right: 1px solid #fff;
	}
		
	ul#navigation a:hover
	{
		color: #000;
		background: #cb080c;
	}

/*END Inline listing*/
/* START --#extraDiv-- */
#extraDiv1 { 
	background: transparent  url(leafLeft.gif) no-repeat;	
	position: absolute; 
	top: 0px; 
	left: 0px; 
	width: 333px; 
	height: 1331px;
	z-index: 0;
	}
#extraDiv2 { 
	background: transparent url(leafRight.gif) no-repeat; 
	position: absolute; 
	top: 0px; 
	right: 0px; 
	width: 212px; 
	height: 1289px;
	z-index: 0;
	}
/* END --#extraDiv-- */

/*START recoding --#preamble-- and --#supportingText-- parts for IE*/
	
#tabnav1
	{
		margin-left: 0;
		padding-left: 0;
		list-style-type: none;
		background: #fff;
		width: 100%;
	}
#tabnav1 a
	{
		display: block;
		padding: .2em 1em;
		text-decoration: none;
		color: #036;
		background: #fff;
	}
#tabnav1 a:hover
	{
		color: #fff;
		background: #cb080c;
	}
#tabnav1 p
{
	margin:0 0 0 5%;
	}
#tabnav2
	{
		margin-left: 0;
		padding-left: 0;
		list-style-type: none;
		background: #fff;
		width: 100%;
	}
#tabnav2 a
	{
		display: block;
		padding: .2em 1em;
		text-decoration: none;
		color: #036;
		background: #fff;
	}
#tabnav2 a:hover
	{
		color: #fff;
		background: #99ccff;
	}
#tabnav2 p
{
	margin:0 0 0 5%;
	}

/*END recoding --#supportingText-- and --#preamble-- parts for IE*/