/******************************************************************************* ******************************************************************************** ** * - GENERAL * * - PAGE CONTAINERS * * - HEADER * * - CONTENT ** ******************************************************************************** ******************************************************************************/ /* GENERAL ------------------------------------------------------------------ */ html { height: 100%; } /* Zero default margin & padding around common elements */ body, dd, dl, dt, form, h1, h2, h3, h4, h5, h6, ul, ol, li, p { margin: 0; border: none; padding: 0; } body { height: 100%; background-color: #333333; background-image: url(images/bg.gif); background-position: 0% 0; color: #000000; line-height: 1.5; font-family: Arial, Helvetica, sans-serif; font-size: 62.5%; text-align: center; overflow:auto; } a:link { color: #003399; } a:visited { color: #B266B2; } a:hover { text-decoration: none; } /* PAGE CONTAINERS ---------------------------------------------------------- */ #page { width: 636px; w\idth: 600px; min-height: 100%; margin: 17px auto; padding: 0 18px; background-image: url(images/page.gif); background-repeat: repeat-y; text-align: left; } * html #page { height: 100%; } /* HEADER ------------------------------------------------------------------- */ #header { height: 90px; background-color: #B2DD32; background-image: url(images/header1.jpg); background-repeat: repeat-x; } h1 { padding: 0 35px; font-size: 2.2em; font-weight: normal; line-height: 82px; } /* CONTENT ------------------------------------------------------------------ */ #content { padding: 0 25px; } p { font-size:1.1em; margin-top: 1.5em; } form { margin-top: 1.5em; } /*** MASTER FORM WIDTHS - CUSTOMIZE THIS TO CHANGE THE FORM LAYOUT ***/ /* form width: 550px left column: 190px / 180px + 10px padding mid column: 200px right column: 160px */ form{ width:550px !important; } fieldset.submit { padding-left: 190px !important; } form label{ padding:0px 10px; width: 160px; } form label.error, form input.submit { margin-left:180px !important; } form fieldset fieldset label.error { margin-left:0px !important; width:200px !important; } form .centered{ margin-left:180px !important; width:200px !important; } form .text, form .button, form .group, form .control, form .submit, form textarea, form select { width: 200px !important; } /*** FIELDSETS AND LEGENDS ***/ form{ width:550px; margin-bottom:25px; clear:both; } form fieldset { margin: 0 0 1.5em 0; padding: 0 0 10px 0px; border: 1px solid #BFBAB0; background-color: #F2EFE9; background-image: url(images/fieldset_gradient.jpg); background-repeat: repeat-x; background-color: #fff; background-image: url(images/fieldset-gradient-02.jpg); background-position:bottom; float: left; clear: both; width: 100%; } form fieldset.submit { padding: 0px 10px 10px 190px; border-style: none; background-color: transparent; background-image: none; float: none; width: auto; } form legend { color: #000000; font-size:1.3em; font-weight: bold; font-variant:small-caps; margin-left: 1em; padding:0px 5px; } form fieldset p{ margin:10px 0px 0px 10px; } /*** FORM BLOCKS ***/ form ul { padding:5px 10px; list-style: none; } form li { width: 100%; padding:5px 0px 10px 0; border-top:1px dotted #ccc; display:block; float: left; clear: left; } form li:first-child { border:none; } /*** FORM BLOCK ELEMENTS ***/ form label { padding:0px 10px; width: 160px; float: left; } form .error{ color: #c00; } form label.error { color: #c00; font-size: 100%; font-weight: bold; font-variant:small-caps; width:308px; display: none; margin:8px 0px 0px 180px; padding:3px 0px 0px 5px; border-top:1px dotted #ccc; clear:both; } form label.info{ font-size: 100%; font-weight: bold; font-variant:small-caps; margin:8px 0px 0px 180px; padding:3px 0px 0px 5px; } form fieldset fieldset, form .group { width:200px; margin: 0; border:none; background:none; float:left; clear: none; } form fieldset fieldset label { width:auto !important; white-space:nowrap; padding:0px; margin:0px; display:block; clear:both; } form label label.error{ margin-left:0px; } form label.centered{ padding:0px 0px; width:200px !important; } /* see also the error class at the foot of the page */ form fieldset fieldset label.spaced { margin-bottom:3px; } /*** FORM ELEMENT COLUMNS ***/ .col-1, fieldset fieldset.col-1 label { width:100%; } .col-2, fieldset fieldset.col-2 label { width:50%; } .col-3, fieldset fieldset.col-3 label { width:33%; } .col-4, fieldset fieldset.col-4 label { width:25%; } /*** FORM ELEMENTS ***/ form input.submit{ margin:10px 0px 10px 180px; padding:0px 2px; } form input, textarea, select, form label { font-size:1.1em; line-height:1.6em; } form input, textarea, select { font-family: Verdana, Arial, Helvetica, sans-serif; } form .input[type="text"], form textarea { padding:1px; } form .input[type="radio"], form .input[type="checkbox"] { margin:0px; padding:0px; position:relative; top:3px; } /*** SUPPORTING CLASSES ***/ form label.required{ background-image:url(images/required_star.gif); background-position:right; background-repeat:no-repeat; } form span.required{ padding-right:15px; } form .clean { border:none; } form .info{ padding-top:0.5em; font-size:80%; line-height:100%; color:#aaa; } form .indent{ padding:2px 20px; width:auto !important; white-space:nowrap; padding-left: 25px !important; } form label.disabled{ color:#aaa; } form .highlight{ background-color:#e2e2e2; } .off{ display:none !important; } .clear{ clear:both; }