Files @ 170aa38bb5c3
Branch filter:

Location: website/www/conservancy/static/css/forms.css

brett
blog: Headlines clear floats.

This avoids a situation where multiple summaries have floats that stack on
top of each other vertically, which end up getting far away from the actual
text.

In order to make this work, we had to change the styling of #mainContent on
blog pages (and others with a sidebar). Otherwise, headlines with
class="clear" would clear the sidebar as well.
.supporter-form label {
    display: inline-block;
    width: 200px;
    text-align: right;
}
.dinner-form label {
    display: inline-block;
    width: 200px;
    text-align: right;
}
.supporter-form-inputs {
    float: left;
}
.dinner-form-inputs {
    float: left;
}
.supporter-form-submit {
    padding-left: 20em;
    padding-top: 40px;
    float: center;
}
.dinner-form-submit {
    padding-left: 20em;
    padding-top: 40px;
    float: center;
}

.supporter-form div {
    margin-top: 1em;
}

.dinner-form div {
    margin-top: 1em;
}

.form-error {
    display: none;
    margin-left: 10px;
    color: green;
}		

.form-error-show {
    color: red;
    margin-left: 10px;
    font-size: 75%;
}

input.invalid, textarea.invalid {
    border: 2px solid red;
}

input.valid, textarea.valid {
    border: 2px solid green;
}

.supporter-type-selector {
    font-size: 125%;
    text-align: center;
    width: 80%;
    align: left;
}

.supporter-type-selection {
    clear: both;
    padding-bottom: 60px;
    width: 80%;
    align: left;
}

h1.appeal {
    margin-top: -.75em;
}
img.appeal-left {
    float: left;
    padding-right: 1em;
    margin: .25em;
    min-width: 8%;
    max-width: 30%;
    height: auto;
}

img.appeal-right {
    float: right;
    padding-left: 1em;
    margin: .25em;
    min-width: 8%;
    max-width: 30%;
    width: auto;
}

img.appeal {
    float: left;
    padding-right: 1em;
    min-width: 10%;
    max-width: 85%;
    width: auto;
}

img.appeal-header {
    max-width: 100%;
    width: auto;
    margin-top: 0em;
}

img.appeal-footer {
    max-width: 40%;
    float: right;
    width: 10%;
    min-width: 1%;
    height: auto;
}
img.appeal-match {
    float: left;
    height: auto;
    border: 1px solid #fff;
    width: 10%;
    margin-top: .25em;
    margin-bottom: .25em;
    margin-right: 1em;
    background: #eee;
}
p.appeal-match-text  {
    width: 100%;
    border: 1px solid #fff;
    background: #eee;
}