* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

a {
    text-decoration: none;
    color: rgb(61, 146, 201);
}
a:hover,
a:focus {
    text-decoration: underline;
}

h3 {
    font-weight: 100;
}

/* LAYOUT CSS */
.pure-img-responsive {
    max-width: 100%;
    height: auto;
}

#layout {
    padding: 0;
}

.header {
    text-align: center;
    top: auto;
    margin: 3em auto;
}

.sidebar {
    background: rgb(61, 79, 93);
    color: #fff;
}

.brand-title,
.brand-tagline {
    margin: 0;
}
.brand-title {
    text-transform: uppercase;
}
.brand-tagline {
    font-weight: 300;
    color: rgb(176, 202, 219);
}

.nav-list {
    margin: 0;
    padding: 0;
    list-style: none;
}
.nav-item {
    display: inline-block;
    *display: inline;
    zoom: 1;
}
.nav-item a {
    background: transparent;
    border: 2px solid rgb(176, 202, 219);
    color: #fff;
    margin-top: 1em;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-size: 85%;
}
.nav-item a:hover,
.nav-item a:focus {
    border: 2px solid rgb(61, 146, 201);
    text-decoration: none;
}

.content-subhead {
    text-transform: uppercase;
    color: #aaa;
    border-bottom: 1px solid #eee;
    padding: 0.4em 0;
    font-size: 80%;
    font-weight: 500;
    letter-spacing: 0.1em;
}

.content {
    padding: 2em 1em 0;
}

.post {
    padding-bottom: 2em;
}
.post-title {
    font-size: 2em;
    color: #222;
    margin-bottom: 0.2em;
}
.post-avatar {
    border-radius: 50px;
    float: right;
    margin-left: 1em;
}
.post-description {
    font-family: Georgia, "Cambria", serif;
    color: #444;
    line-height: 1.8em;
}
.post-meta {
    color: #999;
    font-size: 90%;
    margin: 0;
}

.post-category {
    margin: 0 0.1em;
    padding: 0.3em 1em;
    color: #fff;
    background: #999;
    font-size: 80%;
}
.post-category-design {
    background: #5aba59;
}
.post-category-pure {
    background: #4d85d1;
}
.post-category-yui {
    background: #8156a7;
}
.post-category-js {
    background: #df2d4f;
}

.post-images {
    margin: 1em 0;
}
.post-image-meta {
    margin-top: -3.5em;
    margin-left: 1em;
    color: #fff;
    text-shadow: 0 1px 1px #333;
}

.footer {
    text-align: center;
    padding: 1em 0;
}
.footer a {
    color: #ccc;
    font-size: 80%;
}
.footer .pure-menu a:hover,
.footer .pure-menu a:focus {
    background: none;
}

@media (min-width: 48em) {
    .content {
        padding: 2em 3em 0;
        margin-left: 25%;
    }

    .header {
        margin: 80% 2em 0;
        text-align: right;
    }

    .sidebar {
        position: fixed;
        top: 0;
        bottom: 0;
    }
}

pre {
    font-size: 14px;
}

/**
 * Coloring h1 a bit off black, removing bold, and shadowing
 * a touch.
 */
h1 {
    color: #505050;
    text-shadow: 2px 1px 3px rgba(200, 200, 200, 0.43);
    font-weight: normal;
}

/**
 * Using some off white for the background color and
 * padding the top.
 */
body
{
    background: whitesmoke;
    padding-top: 60px;
}

/**
 * Make links smaller,
 */

pre
{
    margin-top: 0px;
    margin-bottom: 0px;
}

.title {
    width: 500px;
    margin-left: auto;
    margin-right: auto;
}


/**
 * Upper box that contains the title Authorization Server, the UserName, and Password fields
 */
.upper-box {

    width: 350px;

    border-top: 1px solid;
    border-left: 1px solid;
    border-right: 1px solid;

    border-color: lightgrey;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;

    padding-top: 5px;
    padding-left: 20px;
    padding-bottom: 10px;

    box-shadow: 1px 1px 5px #e7e7e7;

    margin-left: auto;
    margin-right: auto;

    /**
     * Gradient calculated from gradient calculator of
     * http://gradients.glrzad.com/
     */
    background-image: linear-gradient(bottom, rgb(249,250,252) 21%, rgb(245,247,250) 67%, rgb(247,249,255) 94%);
    background-image: -o-linear-gradient(bottom, rgb(249,250,252) 21%, rgb(245,247,250) 67%, rgb(247,249,255) 94%);
    background-image: -moz-linear-gradient(bottom, rgb(249,250,252) 21%, rgb(245,247,250) 67%, rgb(247,249,255) 94%);
    background-image: -webkit-linear-gradient(bottom, rgb(249,250,252) 21%, rgb(245,247,250) 67%, rgb(247,249,255) 94%);
    background-image: -ms-linear-gradient(bottom, rgb(249,250,252) 21%, rgb(245,247,250) 67%, rgb(247,249,255) 94%);

    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0.21, rgb(249,250,252)),
        color-stop(0.67, rgb(245,247,250)),
        color-stop(0.94, rgb(247,249,255))
    );

}

/**
 * Bottom box that contains the "Sign in" button
 */
.bottom-box {
    border:1px solid;
    border-color: lightgrey;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;

    width: 350px;
    padding-top: 15px;
    padding-left: 20px;
    padding-bottom: 15px;
    box-shadow: 1px 3px 1px #e7e7e7;
    margin-left: auto;
    margin-right: auto;

    /**
     * Gradient calculated from gradient calculator of
     * http://gradients.glrzad.com/
     */
    background-image: linear-gradient(bottom, rgb(242,245,250) 21%, rgb(242,245,250) 67%, rgb(242,245,255) 94%);
    background-image: -o-linear-gradient(bottom, rgb(242,245,250) 21%, rgb(242,245,250) 67%, rgb(242,245,255) 94%);
    background-image: -moz-linear-gradient(bottom, rgb(242,245,250) 21%, rgb(242,245,250) 67%, rgb(242,245,255) 94%);
    background-image: -webkit-linear-gradient(bottom, rgb(242,245,250) 21%, rgb(242,245,250) 67%, rgb(242,245,255) 94%);
    background-image: -ms-linear-gradient(bottom, rgb(242,245,250) 21%, rgb(242,245,250) 67%, rgb(242,245,255) 94%);

    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0.21, rgb(242,245,250)),
        color-stop(0.67, rgb(242,245,250)),
        color-stop(0.94, rgb(242,245,255))
    );
}

/**
 * Okay, you caught me.  It's a hack to make this look centered.
 *
 * TODO Fix this, can't figure out how to get this to center correctly.
 * It's currently anchored to the fieldset and that's causing issues.
 */
.main-text {
    padding-left: 100px;
    padding-top: 20px;
    font-size: 180%;
    color: #505050;
    text-shadow: 2px 1px 3px rgba(200, 200, 200, 0.43);
    font-weight: normal;
}

/**
 * Okay, you caught me.  It's a hack to make this look centered.
 *
 * TODO Fix this, can't figure out how to get this to center correctly.
 * It's currently anchored to the fieldset and that's causing issues.
 */
.subtext {
    padding-left: 80px;
    font-size: 110%;
    color: #969696;
    text-shadow: 2px 1px 3px rgba(230, 230, 230, 0.42);
    font-weight: normal;
}

/**
 * The username and password labels
 */
.labels {
    color: #505050;
    text-shadow: 2px 1px 3px rgba(200, 200, 200, 0.43);
    padding-top: 10px;
}

/**
 * Input fields so I can make it slightly larger than the default,
 * and I can also pad anything trying to touch it on the right.
 */
.input-fields {
    padding-right: 20px;
    font-size: 130%;
}

/**
 * This makes all the placeholder text italic.  Nice trick I
 * picked up from stack overflow:
 * http://stackoverflow.com/questions/16291925/how-to-make-value-text-in-form-be-italic
 */
::-webkit-input-placeholder { font-style: italic; }
::-moz-placeholder { font-style: italic; }
:-ms-input-placeholder { font-style: italic; }

/**
 * Very specific to the sign on button.
 */
.accept-cancel-buttons {
    padding-left: 20px;
    padding-right: 20px;
    text-align: right;
}

.from-text {
    padding-top: 10px;
    text-align: center;
}