CodeDogg

body {

font-size:62.5%;

background-color:#fff;

font-family:Arial, Helvetica, sans-serif;

margin:30px;

}

input, form, fieldset, label, textarea, select, legend { /* Resets padding of form

elements. Can be included in

a separate CSS reset file instead */

margin:0;

padding:0;

}

#myform {

font-size:1.2em; /* Can go up to 1.5em without breaking anything. Higher

values will require increasing the width of the span

and labels */

width:440px; /* Changing this value is cool, but go too wide and you'll

have to adjust the widths on the input fields as well.

The fixed width causes the contained elements to wrap,

giving them the appearance that they are 'block' - but

really they're not :-) */

}

#myform fieldset {

border-radius: 5px; /* If supported by the browser, you'll see rounded corners */

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

margin:0 0 20px 0;

background-color:#f2f9fe;

border:solid 1px #aedcf5;

padding:20px 15px 10px 15px;

position:relative; /* To assist in fixing the background bleed issue on IE */

}

#myform fieldset:hover {

background-color:#fffccd;

border:solid 1px #ffdb60;

}

#myform fieldset:hover input {

background-color:#fff;

border:solid 1px #ffdb60;

}

#myform fieldset:hover textarea {

background-color:#fff;

border:solid 1px #ffdb60;

}

#myform fieldset:hover select {

background-color:#fff;

border:solid 1px #ffdb60;

}

#myform fieldset:hover .narrow { /* Needed to stop border hover on radio buttons

and checkboxes in IE */

border:none;

background-color:#fffccd;

}

#myform legend {

position:absolute; /* Fixes background bleed issue on IE. Fieldset must be

position:relative for this to work */

top:-8px;

color:#fd8f00;

font-family:Georgia, "Times New Roman", Times, serif; /* Just adding a little variation */

font-style:italic;

font-size:1.2em;

position:absolute; /* Stops IE from centering the legend text. Seriously - why IE, why?!!! */

left:10px;

}

#myform fieldset:hover legend { /* Changes text colour of the legend when you

hover over the fieldset */

color:#3f87e9;

}

#myform label {

width:190px; /* Must match the exact width specified in the span */

display:block;

float:left;

font-weight:bold;

padding:0;

text-align:right;

margin:0 10px 8px 0;

color:#000;

}

#myform span {

font-size:.8em;

display:block;

width:190px; /* Must match the exact width specified in the label */

text-align:right;

font-weight:normal;

color:#656565;

}

#myform em {

font-size:.8em;

font-style:normal;

font-weight:normal;

color:#007bae;

position:relative;

top:-7px; /* Moves the em's up a little to line up with the radio buttons

and checkboxes*/

}

#myform input {

border-radius: 5px; /* If supported by the browser, you'll see rounded corners */

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

width:180px;

height:20px;

border:solid 1px #aedcf5;

margin:0 0 13px 0;

color:#3f87e9;

font-size:1.2em;

padding:5px 3px 3px 3px;

}

#myform input:hover {

border:solid 1px #41a9d8;

}

#myform textarea {

border-radius: 5px; /* If supported by the browser, you'll see rounded corners */

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

width:180px;

height:20px;

border:solid 1px #aedcf5;

margin:0 0 13px 0;

color:#3f87e9;

font-size:1.2em;

padding:5px 3px 3px 3px;

font-family:Arial, Helvetica, sans-serif;

}

#myform .narrow {

width:13px;

margin:0 0 0 15px; /* Add a little spacing between radio button options */

border:none; /* Removes borders from radio buttons and checkboxes in IE */

}

#myform .narrow:hover {

border:none; /* Removes boders from radio buttons and checkboxes in IE on hover */

}

#myform select {

border-radius: 5px; /* If supported by the browser, you'll see rounded corners */

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

width:190px;

height:29px;

border:solid 1px #aedcf5;

margin:0 0 13px 0;

color:#3f87e9;

font-size:1.2em;

padding:4px 3px 2px 3px;

}

#myform select:hover {

border:solid 1px #41a9d8; /* Hover efefct won't work in IE, but then you're

probably not surprised */

}

#myform .submit {

width:92px;

height:35px;

background-image:url(images/submit.gif);

background-position:top;

border:none;

border:0;

text-indent:-9999em;

}

#myform .submit:hover {

background-position:bottom;

border:none;

border:0;

cursor:pointer;

}

#comments {

height:100px !important; /* Must be important otherwise it wont be honoured */

}