
/* basic elements for the common form style */

/* The first thing we need to do to the form is make it line up nicely.  We gave the label a fixed width of 4em, although this should obviously be increased if the prompt text in the form is anything longer than what we've got now (‘name’ and ‘e-mail’). We also specified the width in terms of em and not px so that if users increase the text size the width will increase with the larger letters. The margin-right: 0.5em CSS command means the labels will have a small amount of spacing after them, so that the text isn't up against the input box. */

label
{
width: 10em;
float: left;
text-align: right;
margin-right: 0.5em;
display: block;
}

/* The submit button has a left margin of 4.5em so that it aligns with the input boxes, which are 5em from the left. This includes the 4em width and the 0.5em right margin of the prompt text.

The three CSS commands we'll use to make those forms look good are border, background and color (you can also use any other CSS command, such as font, text size, bold etc.).
So, let's say we want the input boxes in this form to have a dark blue text colour and border and a pale orange background, and the submit button to have black text, an orange background and a dark blue border.   We use ‘outset’ for the button's border so that it looks like a button. If we used ‘solid’ it would look flat.*/

input
{
background: #ffff99;
border: 1px solid #006600;
padding: 0.3em;
}
/* class applied to the submit button */
input.doit {background-color: #CCFF99;
cursor: pointer;
border: 3px outset #d7b9c9;
padding: 0.2em 1.5em 0.2em 1.5em;
}
/* class applied to the submit button */
input.caution {background-color: #ffcccc;
cursor: pointer;
border: 3px outset #d7b9c9;
padding: 0.2em 1.5em 0.2em 1.5em;
}

/* background-color: #000066; #ffff99; */
select {
 background-color: #cccccc;
 color: #000;
 padding: 5px 0px 5px 5px;
}

textarea
{
background-color: #ffff99;
width: 600px;
/*
height: 8em;
*/
border: 1px solid #006600;
padding-left: 5px;
}
/* off for now
.submit input
{
margin-left: 6.5em;
background: #CCFF99;
border: 2px outset #d7b9c9;
}
*/

/* standard color to be applied as a class */
.std {background-color: #CCFF99;}

/* Any required field class in the form should show as red */
.reqfield
{
background: #FFCCCC
}

/* apply some CSS commands to the fieldset and legend to give the form a blue border and a title with an orange background:
width: auto makes it as large as the page can be */ 

fieldset
{
border: 1px solid #006600;
width: auto
}

legend
{
color: #006600;
background: #CCFF99;
border: 1px solid #006600;
font-size: 1.0em;
font-style: bold;
letter-spacing: 0.1em;
padding: 0.5em 0.8em 0.8em 0.8em
}

