/* for main form wrapping div */
div#gb_form_div { /* not styled on demo page */ }
/* id for the form itself */
form#gb_form { /* not styled on demo page */ }
/* form and results heading size */
.main_formhead, .formhead { font-size : 1.4em; color : #cc9900; }
/* outer fieldset - it's common to make this border : 0; */
fieldset#formwrap { background-color : #fff; }
/* section fieldsets - it's common to make this border : 0; */
fieldset { background-color : #fff; }
/* form legends and dt "heading" */
legend, dt { font-weight : bold; color : #666; }
/* main legend at top of the form */
legend#mainlegend { font-size : 1.2em; color : #333; }
/* form label text */
label { color : #222; }
/* all inputs, select, and textarea */
input.med, input.short, select.med, textarea.textbox { font : 90% 'Trebuchet MS', sans-serif; color : #666; padding : 2px; border : 1px solid #598F8E; background-color : #fffffa; }
/* to make focus stable in IE 6 */
* html input.button { color: #000; border: 1px solid #89B0B4; background-color: #cc9900; }
* html input.button.hover { color: #000; border: 1px solid #000; background-color: #cc9900; }
* html input.button.focus { color: #000; border: 1px solid #000; background-color: #cc9900; }
/* hover and focus styling - the classes like .hover and .focus below are for the javascript for IE */
input.med:hover, input.med:focus, input.short:hover, input.short:hover, select.med:hover, select.med:focus, textarea.textbox:hover, textarea.textbox:focus, input.med.hover, input.med.focus, input.short.hover, input.short.focus, select.med.hover, select.med.focus, textarea.textbox.hover, textarea.textbox.focus { color: #000; border: 1px solid #000; background-color: #eee; }
/* for the checkbox input */
input.checkbox { /* not styled on demo page */ }
/* error heading weight and color - bold is for the error reason text */
span.error, dt.error { color: #cd0000; font-weight: bold; }
/* success heading color */
span.success { font-weight : bold; }
/* privacy and "Why?" small element link sizes (relative to their parent element */
small.privacy, small.whythis { font-size : 80%; }
/* set up relativity to position small Why? text */
small.whythis { position : relative; }
/* Why? link style */
small.whythis a { text-decoration : underline; font-size : 0.95em; }
/* hide the Why? text span */
small.whythis a span { position : absolute; top : -9000px; left : -9000px; display : inline; width : 17.1em; height : auto; border : 1px solid #000; background-color : #eecc11; padding-left : 2px; }
/* bring back Why? text span (title attribute backs this up for borwsers it doesn't function in */
small.whythis a:hover span, small.whythis a:focus span, small.whythis a:active span { position : absolute; top : 0; left : 6em; }
/* the link back to me for form credit */
p.creditline { float : right; margin : -17px 0; padding-bottom : 1px; font-size : 80%; }
/* used for abbreviation used relative to form. the .abbr class is for the span added for IE */
abbr, .abbr { cursor : help; border-bottom : 1px dotted #999; }
/* set result color for blockquote dt "heading" */
dl#result_dl_blockq dt { color : #89B0B4; }
/* position result blockquote flush with parent */
dl#result_dl_blockq blockquote { margin-left : 0; }
/* style the input names in the result */
div#gb_form_div span.items { font-weight : bold; color : #333; }