/*
"phonephreak" (C)2003 Patrick H. Lauke aka redux http://redux.deviantart.com
going for a double-page spread magazine style layout idea 
first experiment with a bit more serious absolute positioning 
font used: hooge 05_53 (C) Craig Kroeger
*/

/* basic stuff */

body {
	/* font size bordering on the illegible, admittedly...but it looks good
	and reminds me of a quote I heard ages ago..."designers must all have excellent eyesight
	considering the minimal text they like to use" */
	font: 0.5em/1.3em Verdana, Arial, Helvetica, sans-serif ;
	background: #000 url(images/raster_background2.png) no-repeat top left;
	color: #fff;
	padding: 0;
	margin: 0;
}

div { 
	/* could apply this to the body, but IE seems to ignore it there */
	text-transform: lowercase;
}

p {
	margin: 1em 0 2em 0;
}

h3 {
	height: 10px;
	padding: 0;
	margin: 0;
}

h3 span {
	/* using our own graphics for the h3s Fahrner style, so no need for the spans */
	display: none;
}

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

li {
	margin-bottom: 0.3em;
}

acronym {
	/* override Mozilla and co.'s standard dotted line under acronyms
	for a more even typographical/magazine feel
	(at the detriment of accessibility, unfortunately) */
	border: none;
}

a, a:link { color: #cf0000;; background: inherit; text-decoration: none; }
a:visited { color: #b00; background: inherit }
a:hover { color: #d00; background: inherit }
a:active { color: #e00; background: inherit }


/* let's start with the whole page container */

#container {
	width: 730px;
}


/* and now the specific divs */

#intro {
	position: absolute;
	left: 40px;
	top: 250px;
	width: 200px;
	text-align: right;
}



#pageHeader {
	position: absolute;
	width: 67px;
	height: 231px;
	left: 223px;
	top: 0;
	padding: 0;
	margin: 0;
	background: url(images/hheader.png) no-repeat top left;
}

#pageHeader h1, #pageHeader h2 {
	display: none;
}



#quickSummary p {
	/* little kludge to align the quickSummary with the logo and linkList */
	margin-top: 0;
}



#preamble  h3 {
	background: url(images/henlightenment.png) no-repeat right center;
}



#supportingText {
	width: 200px;
	margin-left: 510px;
	text-align: right;
}



#explanation h3 {
	background: url(images/habout.png) no-repeat right center;
}



#participation h3 {
	background: url(images/hparticipation.png) no-repeat right center;
}



#benefits h3 {
	background: url(images/hbenefits.png) no-repeat right center;
}



#requirements {
	position: absolute;
	width: 200px;
	left: 740px;
	top: 125px;
	text-align: left;
}

#requirements h3 {
	background: url(images/hrequirements.png) no-repeat left center;
}



#lselect h3 {
	background: url(images/hselect.png) no-repeat left center;
}

#lselect li {
	color: #cf0000;
	background: inherit;
}

#lselect li:before {
	/* CSS2 useless typographical eyecandy */
	content: "../";
}



#larchives h3 {
	background: url(images/harchives.png) no-repeat left center;
}



#lresources h3 {
	background: url(images/hresources.png) no-repeat left center;
}



#footer {
	margin: 5px;
	padding: 5px;
	border-top: #777 1px solid;
}

#footer a:before {
	/* CSS2 useless typographical eyecandy */
	content: "//";
}



#linkList {
	position: absolute;
	width: 150px;
	left: 350px;
	top: 250px;
	padding: 0;
	margin: 0;
	text-align: left;
}

/* 	the following two rules may be just a minor detail, but i think it's worth it.
they add a little download icon in front of the sample CSS and HTML download links.
the first one works in all 5+ browsers, whereas the second one is only for CSS2 compliant
ones. also, use of the |= selector may be "unorthodox", but it was the best I could come up
with since the two download links in the "participation" div are not especially marked up
with a class, AND there are other links in that div ("CSS Resource Guide", "Send us a link" and "contact me") that
do not need the little icon...hence the rule could not be applied to "#participation a" */

#quickSummary a {
	padding-left: 12px;
	background: url(images/download.png) no-repeat left center;
}

#participation a[href|=zengarden] { 
	/* CSS2-compliant only */
	padding-left: 12px;
	background: url(images/download.png) no-repeat left center;
}



/* only one extra div, the rest is not displayed */

#extraDiv1 {
	/* ok, could have done this in another way, but wanted to put the extra divs to good use */
	position: absolute;
	width: 5px;
	height: 65px;
	left: 722px;
	top: 250px;
	background: url(images/phonephreak.png) no-repeat left top;
}

#extraDiv2, #extraDiv3, #extraDiv4, #extraDiv5, #extraDiv6 {
	display: none;
}