/* "Big screen" means, approximately, bigger than a phone */

.column:nth-child(odd) {
    clear: both;
    float: left;
    width: 49%;
}

.column:nth-child(even) {
    float: right;
    width: 49%;
}

li.column {
    margin-bottom: 1em;
}

.left {
    float: left;
    margin-right: 1.5em;
}

.right {
    float: right;
    margin-left: 1.5em;
}

.picture {
    width: 30em;
    max-width: 35%;
    padding: .75em;
}

dl {
    border: 3px double #ccc;
    padding: 0.5em;
}

dt {
    clear: left;
    float: left;
    text-align: center;
    width: 10em;
    margin: 0em 1em 0.5em 0.5em;
    font-weight: bold;
    color: green;
}

dt:after {
    content: ":";
}

dd {
    margin: 0 0 2.5em 11.5em;
}

.small-left {
    float: left;
    height: auto;
    width: 25%;
    margin-left: .7em;
    margin-bottom: .4em;
}

.small-right {
    float: right;
    height: auto;
    width: 25%;
    margin-right: .7em;
    margin-bottom: .4em;
}

.medium-right {
    float: right;
    height: auto;
    width: 50%;
    margin-left: .7em;
    margin-bottom: .7em;
}

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

#contractpatch-follow {
    float: left;
    width: 30em;
    margin-right: 1.5em;
    /* Below from .shaded, but we don't want the class on non-big screens. */
    padding: .75em;
    background: #F0FFB8;
}

#contractpatch-follow h2 {
    font-size: large;
}

#contractpatch-blog h3:first-child {
    /* Don't let the first blog headline clear below #contractpatch-follow. */
    clear: right;
}

.supporter-form-input {
    margin-bottom: .5em;
}

.supporter-form-input label,
.supporter-form-input .input-group {
    display: inline-block;
    width: 49%;
}

.supporter-form-input label {
    text-align: right;
    padding-right: .3em;
}

.form-error, .supporter-form-input p {
    margin-left: 51%;
}