@import url(https://fonts.googleapis.com/css?family=Titillium+Web:400,600,700&subset=latin,latin-ext);

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        font: inherit;
        vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
        display: block;
}


body {
        line-height: 1;
}
ol, ul {
        list-style: none;
}
blockquote, q {
        quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
        content: '';
        content: none;
}
table {
        border-collapse: collapse;
        border-spacing: 0;
}

body {
        font-family: 'Titillium Web', sans-serif;
}


body {
        background-color: rgb(220,220,220);
}
/*
 * Header styles
 */

header {
        position: fixed;
        top: 0;
        width: 100%;
        height: 48px;
        background-color: rgb(70,70,70);
        float: left;
}

header h1 {
        float: left;
        font-size: 2em;
        vertical-align: middle;
        display: block;
        padding: 5px 10px;
        color: rgb(256, 256, 256);
}

header nav img {
        border: 0;
        background-color: rgb(70,70,70,256);
}

header nav img:hover {
        background-color: rgb(120, 120, 120);
}

header nav ul {
        position: absolute;
        right: 0;
        float: left;
}

nav li {
        float: left;
}

/*
 * Article styles
 */

article {
        position: relative;
        top: 48px;
}

article.login {
        width: 350px;
        height: 200px;

  position: absolute;
  top:0;
  bottom: 0;
    left: 0;
    right: 0;

    margin: auto;

        background-color: rgb(70,70,70);
        color: rgb(256,256,256);

        -box-shadow: inset 0 1px 3px rgba(0,0,0,0.50);
        -moz-box-shadow: inset 0 1px 3px rgba(0,0,0,0.50);
        -webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,0.50);
}


/*
 * Footer
 */

footer {
        position: fixed;
        bottom: 0;
}

~