@charset "utf-8";
/******************************************************
Form Styles
see http://members.ehost.com/member/formEmail.bml for eHost instructions on using formmail.
******************************************************/
#formWrap {
	padding: 1em 0;
	margin-bottom: 1em;
}
/* Width setting here changes how the fieldset is centered -- setting to 600 has a wider margin on the left than the right; the smaller the width, the more it is offset to the right. Changing textarea width doesn't affect this issue. */
form#frmContact {
	width: 710px;
	margin: 0 auto;
}
/* fieldset is used to group related items together. Legend is an optional part of fieldset, which applies a label. Each browser will display legends differently. Interestingly, IE looks much like Dreamweaver in this case, while Firefox looks better. In IE, there are no right-hand margins for the fields within the fieldset. */
fieldset {
	background: #E5F1DD;
	border: none;
	margin:1em 0;
	padding-bottom: .5em;
}
legend {
	font-family:Georgia, "Times New Roman", Times, serif;
	color: #329FDA;
	line-height: 1.4;
	background: #E5F1DD;
	padding: 0.2em 0.5em;
	margin-left: 0.5em;
	font-weight: bold;
}
#formWrap p {
	font-family: Georgia, "Times New Roman", Times, serif;
	color: #602E0C;
	font-size: 0.85em;
	line-height: 1.2;
	margin: 1.4em 0px;
}
/* by using input.text rather than just input, settings will apply only to text input areas, not radio buttons, checkboxes, etc. This is called an element-specific class selector. Must manually apply "text" class to each field. */
input.text {
	width: 250px;
}
/* adding textarea tag selector rule finally resized the message area so that it didn't run off the page. However, when I set the width to 400 px, the label moved to the bottom instead of the top of the text input area (because it was next to the text input area instead of on top). Setting label class to top (see below) solved that problem. */
textarea {
	width: 690px;
	margin-top: 0.5em;
}
/* this is another element-specific class selector, affecting labels with class .top. Setting display to block makes it appear on its own line. */
label.top {
	display: block;
	margin-bottom: 0.5em;
}
/* the combination of the two required class elements allows you to position a span of text differently from where it will appear to a reader or if styles are turned off -- in this case, the "required" portion of the label will appear after the input field in the form, but before the input field to a screen reader. Note that to apply the required class to the span tag, I had to select the span of text, then use CTRL-T (or right-click and select Wrap Tag... and then type in span class="required". Once again, display is different in IE and needs to be addressed. */
p.required {
	position: relative;
}
span.required {
	position: absolute;
	left: 300px;
	color: #c00;
}
/* this is a setting that affects two different elements, both input.text and textarea. Pseudoclass focus applies settings when one of those fields has the focus. Does not work on IE but shouldn't cause any problems there. */
input.text:focus, textarea:focus {
	background: #FFC;
}