forms.css

/*
 * Corrects margin displayed oddly in IE 6/7.
 */

*
{
    margin: 0;
}

/*
 * Define consistent border, margin, and padding.
 */

fieldset
{
    margin: 0 2px;
    padding: .35em .625em .75em;

    border: 2px solid #c0c0c0;
}

/*
 * 1. Corrects color not being inherited in IE 6/7/8/9.
 * 2. Corrects text not wrapping in Firefox 3.
 * 3. Corrects alignment displayed oddly in IE 6/7.
 */

legend
{
    padding: 0;

    white-space: normal; /* 2 */

    border: 0; /* 1 */

    *margin-left: -7px; /* 3 */
}

/*
 * 1. Corrects font size not being inherited in all browsers.
 * 2. Addresses margins set differently in IE 6/7, Firefox 3+, Safari 5,
 *    and Chrome.
 * 3. Improves appearance and consistency in all browsers.
 */

button,
input,
select,
textarea,
.button
{
    font-size: 1em; /* 1 */

    max-width: 100%;
    margin: 0; /* 2 */

    vertical-align: baseline; /* 3 */

    *vertical-align: middle; /* 3 */
}
input[type='search'],
select
{
    -webkit-appearance: none;
       -moz-appearance: none;
}

/*
 * Addresses Firefox 3+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */

button,
input,
.button
{
    line-height: normal;
}

/*
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Corrects inability to style clickable `input` types in iOS.
 * 3. Improves usability and consistency of cursor style between image-type
 *    `input` and others.
 * 4. Removes inner spacing in IE 7 without affecting normal text inputs.
 *    Known issue: inner spacing remains in IE 6.
 */

button,
input[type='button'],
/* 1 */
input[type='reset'],
input[type='submit'],
.button
{
    cursor: pointer; /* 3 */

    -webkit-appearance: none; /* 2 */
    *overflow: visible;  /* 4 */
}

/*
 * Re-set default cursor for disabled elements.
 */

button[disabled],
input[disabled],
.button-disabled
{
    cursor: default;
}

/*
 * 1. Addresses box sizing set to content-box in IE 8/9.
 * 2. Removes excess padding in IE 8/9.
 * 3. Removes excess padding in IE 7.
 *    Known issue: excess padding remains in IE 6.
 */

input[type='checkbox'],
input[type='radio']
{
    box-sizing: border-box; /* 1 */
    padding: 0; /* 2 */

    *height: 13px; /* 3 */
    *width: 13px; /* 3 */
}

/*
 * 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome.
 * 2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome
 *    (include `-moz` to future-proof).
 */

input[type='search']
{
    /* 2 */
    box-sizing: border-box;

    -webkit-appearance: textfield; /* 1 */
}

/*
 * Removes inner padding and search cancel button in Safari 5 and Chrome
 * on OS X.
 */

input[type='search']::-webkit-search-cancel-button,
input[type='search']::-webkit-search-decoration
{
    -webkit-appearance: none;
}

/*
 * Removes inner padding and border in Firefox 3+.
 */

button::-moz-focus-inner,
input::-moz-focus-inner
{
    padding: 0;

    border: 0;
}

/*
 * 1. Removes default vertical scrollbar in IE 6/7/8/9.
 * 2. Improves readability and alignment in all browsers.
 */

textarea
{
    overflow: auto; /* 1 */

    vertical-align: top; /* 2 */

    border-bottom: 3px solid #9aa5ae;
}

input,
select,
textarea
{
    font-family: 'Source Sans Pro', 'helvetica', inherit;
    font-size: 1em;
    font-weight: normal;

    display: inline-block;

    box-sizing: border-box;
    padding: .5em;

    transition: 100ms linear border;

    border-bottom: 3px solid #9aa5ae;
    border-radius: 0;
    background: #dad8d6;
    background: rgba(154, 165, 174, .2);

    -webkit-font-smoothing: antialiased;
}

input:focus,
select:focus,
textarea:focus
{
    border-color: #00a887;
    border-color: rgba(255, 255, 255, 0); /* hide the border if rgba is supported */
    outline: 0;
    outline: thin dotted \9; /* IE6-9 */
    background: rgba(0, 168, 135, .2);
}
.pure-checkbox,
.pure-radio
{
    display: block;

    margin: .5em 0;
}
input[disabled],
select[disabled],
textarea[disabled],
input[readonly],
select[readonly],
textarea[readonly]
{
    cursor: not-allowed;

    color: #cad2d3;
    border-color: transparent;
    background-color: #eaeded !important;
}
input:focus:invalid,
textarea:focus:invalid,
select:focus:invalid
{
    color: #b94a48;
    border-color: #e9322d;
    background: #f5a3a0;
    background: rgba(238, 95, 91, .5);
}
input:focus:invalid:focus,
textarea:focus:invalid:focus,
select:focus:invalid:focus
{
    background: #f5a3a0;
    background: rgba(238, 95, 91, .5);
}
select
{
    border: 3px solid #ccc;
    background-color: white !important;
}
select[multiple]
{
    font-family: 'Source Sans Pro', 'helvetica';

    height: auto;
}
label
{
    font-size: 100%;

    margin: .5em 0 .2em;

    color: #999;
}
fieldset
{
    margin: 0;
    padding: .35em 0 .75em;

    border: 0;
}
legend
{
    font-size: 125%;

    display: block;

    width: 100%;
    margin-bottom: .3em;
    padding: .3em 0;

    color: #333;
    border-bottom: 2px solid #e5e5e5;
}

.pure-form-stacked input[type='text'],
.pure-form-stacked select,
.pure-form-stacked label
{
    display: block;
}

.pure-form-aligned input,
.pure-form-aligned textarea,
.pure-form-aligned select,
.pure-form-aligned .pure-help-inline
{
    display: inline-block;

    vertical-align: middle;

    *display: inline; /* IE7 inline-block hack */
    *zoom: 1;
}

/* aligned Forms */
.pure-form-aligned .pure-control-group
{
    margin-bottom: .5em;
}
.pure-form-aligned .pure-control-group label
{
    display: inline-block;

    width: 10em;
    margin: 0 1em 0 0;

    text-align: right;
    vertical-align: middle;
}
.pure-form-aligned .pure-controls
{
    margin: 1.5em 0 0 10em;
}

/* Rounded Inputs */
.pure-input-rounded
{
    padding-left: 1em;

    border-radius: 0;
}

/* Grouped Inputs */
.pure-group fieldset
{
    margin-bottom: 10px;
}
.pure-group input,
.pure-group textarea
{
    position: relative;
    top: -3px;

    display: block;

    margin: 0;
    padding: 10px;

    border-radius: 0;
}
.pure-group input:focus
{
    z-index: 2;
}
/*.pure-group input:first-child
{
    border-radius: 0;
}
.pure-group input:last-child
{
    border-radius: 0;
}*/
.pure-group button
{
    margin: .35em 0;
}

.pure-input-1
{
    width: 100%;
}
.pure-input-2-3
{
    width: 66%;
}
.pure-input-1-2
{
    width: 50%;
}
.pure-input-1-3
{
    width: 33%;
}
.pure-input-1-4
{
    width: 25%;
}

/* Inline help for forms */
.pure-help-inline
{
    font-size: 90%;

    display: inline-block;

    padding-left: .3em;

    vertical-align: middle;

    color: #666;
}
.tags a,
.pure-button,
button,
input[type='submit'],
select,
.button
{
    line-height: normal;
    /* Structure */

    display: inline-block;
    zoom: 1;

    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    text-align: center;
    vertical-align: baseline;
    white-space: nowrap;

    box-shadow: none;

    *display: inline; /*IE 6/7*/
    -webkit-user-drag: none;
}


/* Firefox: Get rid of the inner focus border */
.pure-button::-moz-focus-inner
{
    padding: 0;

    border: 0;
}

a:focus
{
    outline: none;
}

.tags a,
.pure-button,
[class^='button'],
button,
input[type='submit'],
select,
.button-medium
{
    font-family: inherit;
    font-size: inherit;
    font-weight: 700;

    position: relative;

    display: inline-block;

    margin: 15px 0 0 30px;
    padding: 10px 15px;

    cursor: pointer;
    transition: all 100ms;
    letter-spacing: 1px;
    text-transform: uppercase;

    color: inherit;
    color: #4f87a0;
    border: none;
    border: 3px solid;
    border-radius: 0;
    outline: none;
    background: none;
}
.tags a
{
    font-size: 70%;

    margin: 7px 0 0 7px;
    padding: 5px 7px;
}

select
{
    margin: 15px 0;
}
.tags a:hover
{
    box-shadow: 0 5px #004d94;
}

.tags a:active,
.pure-button-active,
.pure-button:active,
[class^='button']:active,
button:active,
input[type='submit']:active,
select:active
{
    color: #fff;
    background-color: #4f87a0;
}
.tags a:active
{
    top: 3px;
}
.pure-button[disabled],
.pure-button-disabled,
.pure-button-disabled:hover,
.pure-button-disabled:active
{
    cursor: not-allowed;

         opacity: .40;
    border: none;
    background-image: none;
    box-shadow: none;

    filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
    filter: alpha(opacity=40);
    -khtml-opacity: .40;
    -moz-opacity: .40;
}

.pure-button-hidden
{
    display: none;
}

/* Firefox: Get rid of the inner focus border */
.pure-button::-moz-focus-inner
{
    padding: 0;

    border: 0;
}


/* Sam */
.pure-button-primary,
.pure-button-selected,
a.pure-button-primary,
a.pure-button-selected
{
    color: #fff;
    background-color: rgb(0, 120, 231) !important;
}

.pure-button:-moz-focusring
{
    outline-color: rgba(0, 0, 0, .85);
}

.login-username label,
.login-password label
{
    display: block;
}

/* BUTTONS */

[class*='button-small'],
input[type='submit'][class*='button-small']
{
    font-size: 1rem;
    font-weight: normal;

    letter-spacing: inherit;
    text-transform: none;

    border-width: 1px;
}

[class*='button-large'],
input[type='submit'][class*='button-large']
{
    font-size: 1.625rem;
}

[class*='--inverted']
{
    color: #fff;
    border-color: transparent;
    background-color: #4f87a0;
}

[class*='--inverted']:active
{
    color: #4f87a0;
    background-color: transparent;
}

.center > [class*='button']
{
    margin: 1rem 0;

    text-align: center;
}

.center
{
    text-align: center;
}

span.center
{
    display: block;

    width: 100%;
}

@media only screen and (max-width : 720px)
{
    .pure-input-1,
    .pure-input-1-2,
    .pure-input-1-4,
    .pure-input-1-3,
    .pure-input-2-3
    {
        width: 100%;
    }
}

@media only screen and (max-width : 480px)
{
    button[type='submit'],
    .tags a,
    .pure-button,
    [class^="button"],
    button,
    input[type='submit'],
    select,
    .button-medium
    {
        margin: .7em 0 0;
    }

    input[type='text'],
    button,
    label
    {
        display: block;

        margin-bottom: .3em;
    }

    .pure-group input[type='text']
    {
        margin-bottom: 0;
    }

    .pure-form-aligned .pure-control-group label
    {
        display: block;

        width: 100%;
        margin-bottom: .3em;

        text-align: left;
    }

    .pure-form-aligned .pure-controls
    {
        margin: 1.5em 0 0 0;
    }

    .pure-help-inline
    {
        font-size: 80%;

        display: block;

        padding: .2em 0 .8em; /* increased bottom padding to make it group with its related input element */
    }
}