/* A CSS Framework by Mike Stenhouse of Content with Style */ /* FORM ELEMENTS */ /* From http://www.wufoo.com/css/global/dynamic.css */ /* ----- CLASSIC WUFOO FORM ----- */ form { font-size: .9em; } form ul { position: relative; list-style: none; width: 100%; padding: 0px; } /* Fixes for forms around everything in JSF */ form ul.glassList { list-style: url(../images/aquadot.jpg) disc outside; vertical-align: top; line-height: 1.2em; margin-left: 40px; } form ul.glassList li { line-height: 1.1em; font-size: 1.1em; padding: 2px 0px 3px 0px; } form .pagebanner, form .exportlinks, form .table { font-size: 1.1em; } /* End of JSF fixes */ form li { line-height: 2em; margin: 0; padding: 1px 1px 6px 5px; } form li.focused { background-color: #fff7c0 !important; } form li p { font-size: 9px; line-height: 13px; color: #444; } form[id] li { display: block; } form[id] ul.glassList li { display: list-item; } form li div { display: inline-block; } form li div.group { display: block !important; background-color: #f7f7f7; padding: 10px; width: 355px; } form li div.group p, form div.group p label { text-align: left; } form li div.group input.large, form li div.group textarea.large, form li fieldset { width: 339px; } form[id] li div { display: inline; } form .left{ float: left !important; margin: 0; } form .right{ float: right !important; margin: 0; } form .clear{ clear: both; } form li div { margin-bottom: 0px; } form li div p { margin: 0 0 5px 0; } form div.left{ margin-right: 2px !important; } form div.left[class]{ margin-right: 4px !important; } form div.left img{ margin: 0 0 -2px 0; } /* ----- INFO ----- */ form h2{ font-size: 1.8em; clear: left; } form .info{ display: inline-block; margin: 0 0 4px 0; padding: 0 0 4px 0; border-bottom: 1px dotted #ccc !important; text-align: left; } form .info[class]{ display: block; } form .info p{ font-size: 1em; line-height: 1.3em; margin: 0 0 8px 0; } /* ----- SECTIONS ----- */ form .section{ display: inline-block; border-top: 1px dotted #ccc !important; margin-top: 15px !important; padding-top: 12px !important; padding-bottom: 0px !important; } form .section[class]{ display: block; } form .first{ border-top: none !important; margin-top: 0px !important; padding-top: 1px !important; } form .section h3{ font-size: 1.25em; } form .section p{ font-size: 11px; line-height: 13px; } /* ----- FIELDS AND LABELS ----- */ label.desc{ margin: 4px 0 3px 0; border: 0; color: #444; font-size: 1em; line-height: 1.3em; display: block; font-weight: bold; } p label { font-weight: normal; } input.text, input.number, input.url, input.email, input.password, input.file, textarea.textarea, select.select{ font-size: 1.2em; border-top: 1px solid #7c7c7c; border-left: 1px solid #c3c3c3; border-right: 1px solid #c3c3c3; border-bottom: 1px solid #ddd; background: #fff url(../images/fieldbg.gif) repeat-x top; color: #333; } input.text, input.number, input.url, input.email, input.password, input.file{ padding: 2px; } input.currency{ text-align: right; } input.checkbox, input.radio{ display: block; line-height: 1.4em; margin: 8px 0 0 3px; width: 13px; height: 13px; } input.focus, textarea.focus { background: #ffd; color: #000; } label.choice { display: block; line-height: 1.4em; margin: -19px 0 0 25px; padding: 4px 0 5px 0; color: #444; width: 80%; font-size: 1.05em; } textarea.textarea{ font-size: 1.1em; font-family: Tahoma,"Lucida Grande", "Trebuchet MS", Verdana, sans-serif; margin-bottom: 1px; } textarea.textarea[class]{ font-family: "Lucida Grande", Tahoma, "Trebuchet MS", Verdana, sans-serif; } select.select{ padding: 1px 0 0 0; margin: 1px 0 3px 0; } select.select[class]{ margin: 0; padding: 1px 0 1px 0; } /* ----- SIZES ----- */ form .small{ width: 70px; } form .medium{ width: 170px; } form .large, form textarea.textarea{ width: 349px; } form .tags{ width: 320px; } form textarea.small{ height: 5.5em; } form textarea.medium{ height: 10em; } form textarea.large{ height: 20em; } /* ----- ERRORS ----- */ form li.error{ background-color: #FFDFDF; margin: 3px 0 !important; } input.error, textarea.error{ border: 1px solid #EF5959; border-left: 1px solid #FF8F8F; border-top: 1px solid #FF8F8F; background: #fff; } p.error, li.error label.desc{ color: red !important; } p.error{ font-size: 9px !important; margin: 1px 0; } /* ----- REQUIRED ----- */ .req { font-size: 1em !important; color: #f90; font-weight: bold; } /* ----- Fieldsets ----- */ fieldset { margin: 0 0 5px 0; padding: 10px 10px 5px 10px; color: #444; } /* Firefox and others, don't apply to IE or it will put a border under each input element */ li>fieldset, form>fieldset { border: 1px solid silver } fieldset.choices{ padding: 10px 5px 10px 10px; } fieldset.fieldset{ padding: 0px 0 10px 0; } legend{ font-weight: bold; margin: 0 0 0 0; color: #444; } #formProperties[id] legend, .choices[class] legend{ margin: 0 0 0 -5px; } .fieldset legend{ margin: 0; } .fieldset[class] legend{ margin: 0 0 0 5px; } #formProperties fieldset div{ margin-bottom: 7px; } fieldset div .number{ margin: 7px 15px 0 0; } fieldset p{ margin: 10px; } /* ----- Choices ----- */ .choices input{ width: 200px; margin-right: 3px; } .choices ol{ margin: 10px 0 0 0; } .choices[class] ol{ margin: 0 !important; } .choices img{ margin: 0 0 1px 0; } fieldset ol li { display: list-item !important; margin: 0 5px 2px 3px !important; padding: 0 !important; list-style: inside decimal; } /* ----- Buttons ----- */ input.button, button { width: 6em; padding: 2px 2px 0 0; /* fix for IE */ } /* revert to normal for Firefox */ li>input.button, li>button, input.button>input.button, button>button { padding: 2px; } /* pickList for roles in Spring and WebWork */ table.pickList { padding: 0; border-spacing: 0; } table.pickList th.pickLabel { text-align: center; } table.pickList td { text-align: center; vertical-align: middle; } table.pickList td label { vertical-align: middle; } table.pickList td button { padding-bottom: 2px; font-size: 1em; } table.pickList td select { width: 130px; } /* END FORM ELEMENTS */ /* Specific forms */ #loginForm fieldset { width: 300px; padding: 10px 30px; margin: 0px auto; } #loginForm li { text-align: left; padding: 0px; }