* {
    margin:     0;
    padding:    0;
}

body {
    font-family:        "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight:        300;
    background-color:   #c4c4c4;
    color:              #3a3a3a;
    background-image:   url("../images/background.png");
    background-repeat:  no-repeat;
    background-attachment: fixed;
}

p {
    font-family:        Georgia, serif;
    margin-top:         0.5em;
}

/*****************************************************************
 *  Page title
 */
div.title {
    margin-left:        5vw;
    margin-top:         1em;
    font-size:          1.8em;
}

div.title h1 {
   color:               transparent;
   text-shadow:         0 0 3px rgba(90, 160, 44, 0.5);
}

/*****************************************************************
 *  Content
 */
div.content {
    display:            flex;
    flex-direction:     row;
    flex-wrap:          wrap;
    justify-content:    center;
    align-content:      center;
    max-width:          1500px;
    margin:             auto;
}

div.top.box {
    width:              406px;
    max-width:          calc(100vw - 4em);
    margin:             91px 1em 0;

    position:           relative;
    border:             1px solid #efefef;
    padding:            1ex;
    background:         #fff;
    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
    -moz-box-shadow:    0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
    box-shadow:         0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
}

div.top.box:before, div.top.box:after {
    content:            '';
    z-index:            -1;
    position:           absolute;
    left:               10px;
    bottom:             10px;
    width:              70%;
    max-width:          300px; /* avoid rotation causing ugly appearance at large container widths */
    max-height:         100px;
    height:             55%;
    -webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    -moz-box-shadow:    0 8px 16px rgba(0, 0, 0, 0.3);
    box-shadow:         0 8px 16px rgba(0, 0, 0, 0.3);
    -webkit-transform:  skew(-15deg) rotate(-6deg);
    -moz-transform:     skew(-15deg) rotate(-6deg);
    -ms-transform:      skew(-15deg) rotate(-6deg);
    -o-transform:       skew(-15deg) rotate(-6deg);
    transform:          skew(-15deg) rotate(-6deg);
}

div.top.box:after {
    left:               auto;
    right:              10px;
    -webkit-transform:  skew(15deg) rotate(6deg);
    -moz-transform:     skew(15deg) rotate(6deg);
    -ms-transform:      skew(15deg) rotate(6deg);
    -o-transform:       skew(15deg) rotate(6deg);
    transform:          skew(15deg) rotate(6deg);
}

div.clear {
    clear:              both;
}

img.catch {
    max-width:          8em;
    max-height:         5em;
    float:              left;
    margin-right:       0.5em;
}

/*****************************************************************
 *  Login form
 */
form.login {
    display:            flex;
    flex-direction:     column;
    margin-top:         1em;
}

form.login label {
    margin-top:         0.5em;
}

form.login input {
    font:               inherit;
    padding:            0.4em;
    margin-top:         0.2em;
    border:             1px solid #c4c4c4;
    -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.06) inset;
    box-shadow:         0 0 6px rgba(0, 0, 0, 0.06) inset;
}

form.login input:focus {
    outline:            none;
    border-color:       rgb(90, 160, 44);
}

form.login button {
    font:               inherit;
    align-self:         flex-end;
    margin-top:         1em;
    padding:            0.4em 1.5em;
    border:             none;
    background:         rgb(90, 160, 44);
    color:              #fff;
    cursor:             pointer;
}

form.login button:hover {
    background:         rgb(70, 135, 30);
}

form.login p.error {
    color:              #b03030;
}

a {
    color:              rgb(70, 135, 30);
}