/* css Zen Garden submission 099 - 'Wiggles the Wonderworm', by Joseph Pearson, http://www.make-believe.org/ */
/* All images used in this Zen Garden are based on freely available images in the public domain. 
   These images and the accompanying CSS are hereby returned to the public domain, as per the 
   Creative Commons Public Domain Dedication (http://creativecommons.org/licenses/publicdomain/). 
   Build on the past, and free your creativity. Fight for fair and reasonable copyright laws."; */
/* Added: April 14th, 2004 */



/*========================================================================
	THINGS OF UNIVERSAL IMPORTANCE
========================================================================*/
body {
	text-align:center;
	min-width:760px;
	line-height:100%;
	background:url(paper.jpg) repeat-y #FFF center top;
	color: black;
}
body a {
	color:black;
	text-decoration:none;
	font-weight:bold;
}
p {
	font: 12px Comic Sans MS, Verdana, sans serif;
	text-align:center;
	line-height:100%;
	margin-top:5px;
}
h3 {
	display:none;
}
abbr {
	font-weight:bold;
	border:none;
	cursor:help;
}
.page-wrapper {
	text-align:left;
	margin:0 auto;
	width:760px;
	position:relative;
}
header {
	display:none;
}

/*==================================================================
	PAGE 1
	This page's content is neatly encapsulated by the intro div.
===================================================================*/
.intro { /*page container*/
	position:relative;
	height:1385px;
	margin-top:40px;
}
.extra1 {
	position:absolute;
	height:40px;
	width:820px;
	top:0;
	background:url(paperedge.jpg) no-repeat bottom;
	left:50%;
	margin-left:-410px;
}
.summary{
	position:absolute;
	left:6px;
	top:9px;
	width:750px;
	height:491px;
	background:url(P1PANEL1.jpg) no-repeat black;
}
.summary p:first-child {
	position: absolute;
	left: 71px;
	top: 28px;
	width: 328px;
	height: 80px;
	font-size: 16px;
}
.summary p:last-child {
	position:absolute;
	left:551px;
	top:0;
	font: 9px Arial, Helvetica, sans serif;
}
.summary p:last-child::before {
	content:"\00A9 "
}
.preamble p:nth-child(2){
	position:absolute;
	left:5px;
	top:506px;

	width: 127px;
	height: 398px;

	padding: 30px 22px 0 217px;

	background:url(P1PANEL2.jpg) no-repeat black;
}

.preamble p:nth-child(3){
	position:absolute;
	left:384px;
	top:507px;

	width:160px;
	height:417px;

	padding: 12px 192px 0 18px;

	background:url(P1PANEL3.jpg) no-repeat black;
}

.preamble p:nth-child(4){
	position:absolute;
	left:4px;
	top:941px;

	width:348px;
	height:417px;

	padding: 5px 398px 0 5px;

	background:url(P1PANEL45.jpg) no-repeat black;
}

/*================================================================================
	PAGE 2
	This page must be split into two sections: the explanation div (panels 1 to 4)
	and the participation div (panel 5).
================================================================================*/
.extra2 {
	position:absolute;
	height:100px;
	width:820px;
	top:1420px;
	background:url(paperedge.jpg) no-repeat bottom;
	left:50%;
	margin-left:-410px;
}
.explanation {
	position:relative;
	height:535px;
	margin-top:100px;
	background:#EEEACD;
}
.explanation p:nth-child(2) {
	position:absolute;
	left:3px;
	top:1px;

	width:256px;
	height:500px;
	padding: 9px 6px 0 197px;

	background:url(P2PANEL1.jpg) no-repeat black;
}

.explanation p:nth-child(3) {
	position:absolute;
	left:462px;
	top:12px;

	width:267px;
	height:480px;
	padding: 11px 13px 0 12px;

	background:url(P2PANEL2.jpg) no-repeat black;
}
.participation {
	position:relative;
	width:760px;
	height:795px;
	margin-top:-17px; /*hack: should not be needed*/
	background:url(P2PANEL5.jpg) no-repeat #EEECD5 19px 343px;
	z-index:1;
}
.participation h3 {
	display:block;
	position:absolute;
	left:4px;
	top:0px;
	width:747px;
	height:343px;
	background:url(P2PANEL34.jpg) no-repeat black;
	margin:0;
	padding:0;

	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}
.participation p {
	position:relative;
	top:583px;
	left:437px;
	width:299px;
	line-height:20%;
	margin-top:10px;
	margin-bottom:0;
	padding:0;
}
.participation p:nth-child(2) {
	margin:0;
}
.participation p {
	font: 10px Arial, Helvetica, sans serif;
	text-align:left;
	line-height:100%;
	color:#EEECD5;
	font-weight:bold;
}
.participation a {
	text-decoration:underline;
	color:#EEECD5;
}

/*======================================================
	PAGE 3
	This page is a logistical nightmare. It must contain
	the BENEFITS text, the REQUIREMENTS text, the FOOTER
	text and the LINKLIST lists.
======================================================*/
.extra3 {
	position:absolute;
	height:100px;
	width:820px;
	top:2840px;
	background:url(paperedge.jpg) no-repeat bottom;
	left:50%;
	margin-left:-410px;
}
.benefits {
	position:relative;
	height:726px;
	background:url(P3PANEL1.jpg) no-repeat black;
	margin-top:112px;
}
.benefits p:nth-child(2) {
	position:absolute;
	left:53px;
	top:418px;
	width:298px;
	height:80px;
	text-align:center;
	margin:0;
	line-height:100%;
}

.requirements {
	position:relative;
	background:url(dots.gif) black;
	padding:10px;
	margin-top:10px;
	border:2px solid #FCC;
	width:440px;
	height:508px;
}
.requirements p {
	text-align: left;
}
.requirements h3 {
	display:inline;
	float:right;
	background:url(sparky.gif) no-repeat;
	width:190px;
	height:190px;

	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}
.requirements p:nth-child(2) {
}
.requirements p {
	font: 9pt Arial, Helvetica, sans serif;
	line-height:140%;
}
.requirements p:nth-child(2) {
	font-style:italic;
}
.requirements > p:nth-child(6) {
	display:none; /*this line is shown in the footer for MOSe browsers*/
}
/*=========================
	#@%&#!!! LINKLIST.
==========================*/
.sidebar {
	font:italic 10px Arial, Helvetica, sans serif;
	background:#EEECD5;
	width:280px;
	position:relative;
	margin-top:-593px;
	left:470px;
	padding-bottom:25px;
}
.sidebar a {
	font: 10px Arial Black, Helvetica, Arial, sans serif;
	text-transform:uppercase;
	line-height:100%;
}
.sidebar ul {
	margin:0;
	padding:0;
	display:block;
	width:140px;
	border-bottom:2px dotted #200;
}
.sidebar li {
	margin: 0;
	padding:8px 3px;
	border: 2px dotted #200;
	border-bottom:none;
	list-style: none;
	font-weight: bold;
	text-align:right;
}
.sidebar a {
	display:block;
	font:9px Arial Black, Helvetica, Arial, sans serif;
	text-transform:uppercase;
	padding-bottom:22px;
	color:#300;
}
.sidebar a.designer-name {
	display:inline;
	font:italic 10px Arial, Helvetica, sans serif;
	padding-bottom:0;
}
.design-selection {
	position:absolute;
	left:0;
	top:0;
	width:140px;
	background:#DEF;
}
.design-selection li {
	border-right:none;
}
.design-archives {
	position:relative;
	left:140px;
	top:0;
	width:140px;
	background:#FFC;
}
.design-archives ul {
	border-bottom:none;
}
/* bit of a dodgy hack to get same size list items; IE screws up "height"*/
.design-archives li, .zen-resources li {
	padding-bottom:21px;
}
.zen-resources {
	padding-top:64px;
	position:relative;
	left:140px;
	width:136px;
	background:url(adcc.gif) no-repeat #FFC 7px 10px;
	border:2px dotted #200;
	border-bottom:none;
}
.zen-resources li {
	border:none;
	border-top:2px dotted #200;
}
.zen-resources ul {
	width:136px;
}

/*================================================================
	MOSe decorations for linklist. Proudly brought to you
	by the "Get A Real Browser!" Militant Action Group.
================================================================*/
li {
	background:url(ad1.gif) no-repeat white 5px 10px;
}
li + li {
	background:url(ad2.gif) no-repeat #DFACAC 5px 10px;
}
li + li + li {
	background:url(ad3.gif) no-repeat #A5A5D8 5px 10px;
}
li + li + li + li {
	background:url(ad5.gif) no-repeat #FFC 5px 10px;
}
li + li + li + li + li {
	background:url(ad4.gif) no-repeat white 5px 10px;
}
li + li + li + li + li + li, .design-archives li {
	background:url(ad6.gif) no-repeat #DFACAC 5px 24px;
}
li + li + li + li + li + li + li, .design-archives li + li {
	background:url(ad7.gif) no-repeat #A5A5D8 5px 10px;
}
li + li + li + li + li + li + li + li, .design-archives li + li + li {
	background:url(ad8.gif) no-repeat #FFC 5px 10px;
}

/*======================
	Rounding it off
======================*/
footer {
	padding-top:3px;
	font:9px Arial, Helvetica, sans serif;
	text-align: center;
	display:block;
	position:relative;
	height:60px;
	z-index:1000;
}
/* ah, the foibles of interspersing content with design. But, you know, these are unrealistic restrictions in the real world... */
footer:before {
	display: block;
	padding-top: 10px;
	text-align: center;
	content:"Approved by the Comics Code of America. Bandwidth graciously donated by Media Temple. All images used in this Zen Garden are based on freely available images in the public domain. These images and the accompanying CSS are hereby returned to the public domain, as per the Creative Commons Public Domain Dedication (http://creativecommons.org/licenses/publicdomain/). Build on the past, and free your creativity. Fight for fair and reasonable copyright laws.";
}
.extra4 {
	position:absolute;
	height:48px;
	width:820px;
	background:url(paperedge.jpg) no-repeat;
	left:50%;
	margin-left:-410px;
	margin-bottom:0px;
}