/* css Zen Garden submission - 'Rose Garden' by Cathy Madsen, http://www.craftaholic.net/ */
/* css released under Creative Commons ShareAlike License v1.0 - http://creativecommons.org/licenses/sa/1.0/  */
/* All associated graphics copyright 2003, Cathy Madsen */


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

/* I got a digital camera for Christmas last year and could hardly wait til the roses started 
	blooming again so I could take these pictures */

/* There are comments throughout where I've had to modify code for one browser or another */

/* basic elements */

/* If your images shift down and right in Opera make sure you've set the body padding to zero */
body { 
	background: transparent url(introbg.gif) repeat-x top left; 
	font: 8pt/16pt georgia, serif; 
	color: #455714; background-color: #ffe7f7; 
	margin: 0px; 
	padding: 0px; 
	}
p { 
	margin-top: 0px; 
	text-align: justify;
	font: 12px georgia, serif; 
	}

/*/*/a{}
body p {
  font-size: small;
  voice-family: "\"}\"";
  voice-family: inherit;
  font-size: medium;
}
html>body p {
  font-size: medium;
}
/* */

h3 { 
	font: italic bold 13pt georgia, serif; 
	letter-spacing: 1px; 
	margin-bottom: 0px; 
	color: #a8003d; background-color: transparent;
	}
a:link { 
	font-weight: bold; 
	text-decoration: none; 
	color: #f075ab; background-color: transparent;
	}
a:visited { 
	font-weight: bold; 
	text-decoration: none; 
	color: #a8003d; background-color: transparent;
	}
a:hover, a:active { 
	text-decoration: underline; 
	}


/* specific divs */

/* ie5 was cutting off content at the bottom of the page until I put in the bottom border,
	you can't see it 'cause it's the same color as the background */
#container { 
	padding: 0;  
	margin: 0px 20px 60px 0px; 
	border-bottom: 1px dotted #ffe7f7; 
	}

/* mozilla was shifting the pageHeader graphics up 10 or so pixels until I added the top border,
	I added the left border to balance it, then discovered I could hide them with the negative 
	margins

	width is necessary to keep the layout from breaking when the window is narrowed */
#intro { 
/*	min-width: 960px; */
	padding: 0px;  
	margin: -1px 0px 0px -1px; 
	width: 970px; 
	border-top: 1px dotted #ffe7f7; 
	border-left: 1px dotted #ffe7f7; 
	}
#pageHeader { 
	padding: 0px;  
	margin: 0px 0px 20px 0px; 
	}

/* using an image to replace text in an h1. This trick courtesy Douglas Bowman, http://www.stopdesign.com/articles/css/replace-text/ */
#pageHeader h1 { 
	background: transparent url(h1.gif) no-repeat top left; 
	margin-top: 334px; 
	margin-left: 0px; 
	padding: 0px; 
	width: 425px; height: 90px; 
	float: left;
/*	z-index: 1; */
	}
#pageHeader h1 span {
	display:none;
	}
#pageHeader h2 { 
	background: transparent url(h2.gif) no-repeat top left; 
	margin: 0px 0px 0px -56px; 
	float: left;
	width: 581px; height: 146px; 
	}
#pageHeader h2 span {
	display:none;
	}

#quickSummary {
/*	clear:right; */
	margin: 20px 10px; 
	width: 220px; 
	float: right;
	}
#quickSummary p {
	font: italic 10pt georgia, serif; 
	text-align:center;
	}

#quickSummary p.p1 {
	background: transparent url(quicksum.gif) no-repeat top left; 
	width: 206px; height: 206px; 
	float: right;
	}

/* the first sentence of this paragraph is in the graphic above, the second sentence is absolutely 
	positioned clear across the page, with the first sentence hidden under the header graphic */

/* problems - Opera displays the text on top of the header graphic unless z-index=-1, but Mozilla will 
	not display this text at all if it is -1 - if anyone has a solution, please let me know
	at http://www.craftaholic.net */
#quickSummary p.p1 span {
	position: absolute; top: 371px; left: 20px;
	width: 200px;
	color: #30621d; background-color: transparent;
	line-height: 1.3em;
	z-index:-1;
	cursor: text;
	}

#quickSummary p.p2 span {
	position: absolute; top: 125px; left: 680px; 
	width: 275px; 
	text-align: left;
  	white-space: nowrap; 
	color: #5e8344; background-color: transparent;
	font: 12px verdana, sans-serif; 
	z-index: 2; 
	}


#quickSummary a:visited {
	color: #a8003d;
	background-color: transparent;
	}

/* mozilla was putting the h3 on top of the pageheader graphic with the p below it, 
	until I added the top border. Strangely, IE puts the border under the graphic 
	while mozilla and opera have the border at the top of the page. The negative 
	top margin puts the text over the transparent part of the graphic in about the 
	same place in all browsers, AND hides the border when it's at the top of the page. */
#preamble {
/*	clear: both; */
	border-top: 1px dotted #ffe7f7; 
	padding: 0px 10px 0px 21px;
	margin: -25px 10px 0px 430px; 
	}

#preamble h3{
	color: #30621d; background-color: transparent;
	}

#preamble p{
	font-style: italic; 
	font-size: 150%; 
	color: #f075ab; background-color: transparent;
	padding-right: 10px; 
	}

/* I originally had this background in the body but it wouldn't display in Opera (apparently due 
	to this particular positioning), so I moved it to the container div but didn't like the 
	display at window sizes above or below 1024, so I moved it here where it always shows 
	under the bulk of the text. */
#supportingText {
	background: transparent url(rose4.gif) no-repeat bottom right; 
	padding-left: 10px; 
	margin: 0px 10px 40px 220px;
	}

#explanation p {
	color: #5e8344; background-color: transparent;
	}

#participation p {
	color: #567434; background-color: transparent;
	}

#benefits p {
	color: #4D6624; background-color: transparent;
	}

#footer { 
	text-align: center; 
	}
#footer a:link, #footer a:visited { 
	margin-right: 20px; 
	}

#linkList {
	margin: 0px; 
	padding: 0px; 
	position: absolute; top: 460px; left: 30px;
	background: transparent url(linkbottom.gif) bottom center no-repeat; 
	width: 158px; 
	}
#linkList2 { 
	font: 10px verdana, sans-serif; 
	padding: 0px; 
	margin: 0px 0px 48px 0px; 
	}
#linkList h3{ 
	margin: -5px 0px; 
	width:158px; height: 118px; 
	}
#linkList h3.select { 
	background: transparent url(selecth3.gif) no-repeat top left; 
	margin: 0px 0px -5px 0px; 
	height: 45px; 
	}
#linkList h3.select span {
	display:none;
	}
#linkList h3.favorites { 
	background: transparent url(favh3.gif) no-repeat top left; 
	}
#linkList h3.favorites span {
	display:none;
	}
#linkList h3.archives { 
	background: transparent url(archiveh3.gif) no-repeat top left; 
	}
#linkList h3.archives span {
	display:none;
	} 
#linkList h3.resources { 
	background: transparent url(resourceh3.gif) no-repeat top left; 
	}
#linkList h3.resources span {
	display:none;
	}

/* there is apparently a 20px hidden right margin in IE, setting a negative right margin keeps 
	the centered bottom graphic (in the linklist div) lining up with the rest, in all browsers

	I tried using text-indent, looked great in IE where both lines indented, 
	but in opera and mozilla 'by creator' was stuck over to the left */
#linkList ul {
/*	text-indent: 20px; */
	margin: 0px -20px 0px 0px;
	padding: 0px;
	background: transparent url(linkbg.gif) repeat-y top left; 
	}
#linkList li {
	line-height: 2em; 
	list-style-type: none;
	display: block; 
	color: #a8003d; background-color: transparent;
	padding: 0px 0px 10px 0px;
	margin-left: 20px;

/* leaving width in put extra space after each creator link, but only in IE, so I had to add
	the bottom padding for everyone, but that caused opera to break apart 
	at the top and bottom of the headings
	width:158px; 
	border: 1px solid #f00; 
	margin-top: -2px;
	text-indent: 20px; */
	}
#linkList li a:link { 
	color: #ffe7f7; background-color: transparent;
	}
#linkList li a:visited {
	color: #30621d; background-color: transparent;
	}
	
#linkList #lselect a:link, #linkList #lselect a:visited, #linkList #lfavorites a:link, #linkList #lfavorites a:visited {
	display:block;  
	text-transform:uppercase;
/*	text-indent: -10px; 
	border: 1px solid #666; */
	margin-left:-10px;
	}

#linkList #lselect a.c:link, #linkList #lselect a.c:visited, #linkList #lfavorites a.c:link, #linkList #lfavorites a.c:visited {
  	display:inline;
  	font-family: Verdana,Arial,Sans-serif;
  	font-weight: normal;
  	color:#ffe7f7; background-color:#f075ab;
  	text-transform: lowercase;
	margin-left: 0px;
  }

/* due to the border on the intro div to get mozilla to display correctly, this also needs to 
	by positioned inside 1px top and left, then moved back with the negative margins 
	
	mozilla would not display this until I changed the z-index from -1 to zero */
#extraDiv1 { 
	background: transparent url(body.gif) top left no-repeat; 
	position: absolute; top: 1px; left: 1px; 
	width: 450px; height: 334px; 
	margin: -1px 0px 0px -1px; 
	padding: 0px; 
	z-index: 0; 
	}
acronym {border-bottom: 1px dotted #efb6df; cursor:help;}