body { background:#004b18; 
	       margin:20px;	}
div#content { background:#FFFFC1;
	width:80%;
	padding:20px;
	padding-bottom:40px;
	margin: 0 auto;
	margin-top: 20px; }

	p { color: #004b18;
	font-family: verdana,tahoma,arial,sans-serif;
	font-size: 104%;
	line-height: 140%;
	margin-left: 20px;
	margin-right: 20px;
	text-align: justify }

	h1, h2, h3 { font-family: Trebuchet, Times New Roman, Serif;
			color: #004b18 }
	h2, h3 { margin-left:20px }
	h1 { font-size:235%; padding-top:00px;color:#FFFFC1;margin-bottom:6px }
	h2 { font-size:175%; padding-top:30px;color:#004b18;margin-bottom:6px }
	h3 { font-size:155%; margin-bottom:3px }

	a { background-image: url(star.gif);
		background-repeat: no-repeat;
		background-position: left;
		padding-left: 18px;
		color:#FFFFC1;
		text-decoration: none }
a.inline { background: none;
	padding: 0px;
	color: red }
	a:hover, a.focus { color:red; text-decoration:underline }
	a:hover.current {cursor:default;
			color: #FFFFC1;
			text-decoration: none}

/* THIS SECTION IS FOR THE FLOATING BOOK COVER */
	img.mini {border:none} /* no border around left column images */
	div#minis a:hover {background:white} /* this seems to be necessary for it to work properly in IE6, I'm honestly not sure why */
	div#minis a img.big {height: 0; width: 0; border-width: 0; z-index:200} /* hide the big image by making its height and width 0 */
	div#minis a:hover img.big {position:absolute; top:40px; left:auto;right:auto;height:600px;width:405px;border:12px outset #FFFFC1} /* make the big image appear in the same space as the frame at right when the visitor hovers over one of the image in left column */
	#frame {position:absolute; top:16px;left:118px;height:605px;width:400px;border:2px solid red;font: 1em "Trebuchet MS", Verdana, sans-serif;color:red;padding:10px} /* create an empty frame so that visitors expect something to go there */


/* THIS SECTION IS FOR THE CONTACT FORM */
#form {font-family:"Trebuchet MS", Verdana, sans-serif;width:25em}
fieldset {background:#C361D2;border:none;margin-bottom:1em;width:24em;padding-top:1.5em}

p.legend {background:#DED983;color:#004b18;padding:.2em .3em;font-size:1.2em;border:2px outset #DED983;position:relative;margin-bottom:-1em;width:10em;margin-left:1em;margin-top:1em}

#personal {background:#004b18;		border:outset silver }
#recipient {background:#004b18;		border:outset silver }
#message {background:#004b18;	border:outset silver }

#personal label {width:80px;text-align:right;position:absolute;font-size:90%;padding-top:.2em;left:180px;color:#FFFFC1}
#personal input {margin-left:9em;line-height:1.4em;margin-bottom:.2em;}

#recipient label {position:absolute;padding-bottom:160px;left:155px;color:#FFFFC1;border:none}
select {margin-left:13em;margin-bottom:0}

#size {font-size:90%}
#size input {margin-left:9em}
#size input + input {margin-left:1em}
#size br+ input {margin-left:9em}

#extras {font-size:90%}
#extras input {margin-left:9em}
#extras input +input {margin-left:1em}
#extras br+input {margin-left:9em}


textarea {font:.8em "Trebuchet MS", Verdana, sans-serif;width:29em;padding:.2em}

input[type="submit"], input[type="reset"] {width:120px;background:#DED983;border:2px outset white;color:#004b18;font:1.2em "Trebuchet MS", Verdana, sans-serif}

#buttons {text-align:center}