/*This defines the actual contact area as opposed to the page. */

#contact-area {

	width: 400px;

	margin-top: 0px;

}

/*This is how the boxes look without the cursor being inside any of the boxes.

The border color is what you see when you first see the contact page. This sets the postion 

and padding ot the boxes. The second margin number is the vertical spacing between boxes.

The last margin number is the offset to the right from center.*/

#contact-area input, #contact-area textarea {

	padding: 5px;

	width: 400px;

	font-family: Helvetica, sans-serif;

	margin: 0px 0px 15px 0px;

	border: 1px solid #C8D0D4;

}



/*This is how high the message box is - this is the box below

the field which asks for the email*/

#contact-area textarea {

	height: 90px;

}



/*This is the color of the border when the cursor is placed

inside a box to write the info. Only the box that the cursor

is in changes color. The color goes back to its original

color after the cursor leaves the box to go to the next box*/

#contact-area textarea:focus, #contact-area input:focus {

	border: 1px solid #808080;

}



/*The next two  items deal with the submit button. This one creates

the width of the button and positions it*/

#contact-area input.submit-button {

	width: 100px;

	float: center;

}



/*This deals with the actual color of the submit button.

Here the button is the same color as the inactive border.

Notice that the word below  #mysubmit   is the id label

of the button*/

#mysubmit {

	background-color: #C8D0D4;

	font-size: 100%;

	padding: 20px; font-weight: normal;

}



/*This positions the names for each text box*/

label {

	float: left;

	text-align: left;

	margin-left: 0px;

	width: 100px;

	padding-top: 5px;

}