/* PForm 2.0 license: http://www.gnu.org/licenses/gpl.html license: http://www.gnu.org/licenses/lgpl.html license: http://www.mozilla.org/MPL/MPL-1.1.html author: Hunter Perrin copyright: SciActive.com link: http://sciactive.com/pform/ */ .pf-form { display: inline; } .pf-form:after, .pf-form fieldset:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .pf-form .pf-clearing { /* For clearing BRs... */ clear: both; height: 1px; } .pf-form fieldset { padding: 5.6px 10px 12px; border: 1px solid #CCC; } .pf-form fieldset.pf-group { display: block; clear: left; margin-bottom: 15px; } .pf-form .pf-element { float: left; clear: left; padding-bottom: 15px; } .pf-form .pf-heading, .pf-form .pf-element.pf-full-width { width: 100%; } .pf-form .pf-heading { border-bottom: 1px solid #CCC; padding-bottom: 0; margin-bottom: 10px; } .pf-form .pf-element .pf-label, .pf-form .pf-element .pf-note { width: 230px; /* Width of labels. */ float: left; } .pf-form.pf-labels-right .pf-label, .pf-form .pf-labels-right .pf-label, .pf-form .pf-labels-right.pf-label, .pf-form.pf-labels-right .pf-note, .pf-form .pf-labels-right .pf-note, .pf-form .pf-labels-right.pf-note { text-align: right; } .pf-form.pf-labels-left .pf-label, .pf-form .pf-labels-left .pf-label, .pf-form .pf-labels-left.pf-label, .pf-form.pf-labels-left .pf-note, .pf-form .pf-labels-left .pf-note, .pf-form .pf-labels-left.pf-note { text-align: left; } .pf-form .pf-element .pf-note { margin-top: .5em; clear: left; font-size: 70%; opacity: .8; } .pf-form .pf-element .pf-required { color: #f00; } .pf-form .pf-element .pf-group { margin-left: 230px; /* Same as width of labels. */ display: block; } .pf-form .pf-element .pf-field, .pf-form .pf-buttons .pf-button { float: none; margin-left: 5px; /* Margin between inputs and labels. */ } .pf-form .pf-element .pf-field.pf-full-width { display: block; margin-left: 235px; /* Width of labels + margin between inputs and labels. */ } .pf-form .pf-buttons { clear: both; padding-bottom: 0; padding-left: 215px; /* Width of labels + margin to inputs - button spacing. */ } .pf-form .pf-buttons.pf-centered { width: 100%; padding-left: 0; text-align: center; } .pf-form .pf-buttons .pf-button { margin-left: 20px; /* Button spacing. */ margin-bottom: 10px; } @media (max-width: 720px) { .pf-form .pf-element.pf-full-width .pf-full-width { padding-right: .2em; /* Keep padded inputs from pushing out of their box. */ } .pf-form .pf-element .pf-label, .pf-form .pf-element .pf-note { float: none; width: auto; display: block; margin-bottom: .1em; } .pf-form .pf-element .pf-group { margin-left: 0; display: block; } .pf-form .pf-element .pf-field.pf-full-width { margin-left: 0; } .pf-form .pf-buttons { padding-left: 0; } }