@font-face {
    font-family: 'Noto';
    src: url('../fonts/NotoSans-Regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Noto';
    src: url('../fonts/NotoSans-Bold-webfont.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Noto';
    src: url('../fonts/NotoSans-Italic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Noto';
    src: url('../fonts/NotoSans-BoldItalic-webfont.woff') format('woff');
    font-weight: bold;
    font-style: italic;
}

html {
    overflow: -moz-scrollbars-vertical;
    /* Force firefox to always show room for a vertical scrollbar */
}

body {
    font-family: Noto, Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #333;
    background: url(../images/background.png) #f3f3f3 0 0 repeat-x;
    margin: 0;
}

#container {
    margin: 0 auto;
    max-width: 500px;
}

h1 {
    font-size: 22px;
    font-weight: bold;
    color: #f9f9f9;
    text-transform: uppercase;
    height: 84px;
    padding-top: 25px !important;
}

.content-box {
    border: 1px solid #999;
    background-color: #fdfdfd;
    margin-top: 50px;
}

.label {
    text-align: right;
    padding-top: 7px;
}

span {
    display: inline-block;
    padding-top: 7px;
    padding-right: 3px;
}

input {
    border: 1px solid #999;
    background-color: #eee;
    height: 28px;
    width: 150px;
    padding: 4px;
    margin-bottom: 10px;
}

input:hover {
    border: 1px solid #647086;
}

button {
    border: 1px solid #999;
    background-color: #647086;
    color: #fff;
    /*height: 28px;*/
    width: 150px;
    padding: 5px;
    text-transform: uppercase;
    margin-bottom: 15px;
}

button:hover {
    opacity: 0.85;
}

hr {
    height: 1px;
    border: none;
    border-bottom: 1px dotted #999;

}

a {
    color: #28609b;
    text-decoration: none;
    font-family: Noto, Arial, Helvetica, sans-serif;
    /* Chromium */
    font-size: 12px;
}

a:hover {
    text-decoration: underline;
}

.center {
    text-align: center;
}

@media screen and (max-width: 36.5em) {
    .label {
        text-align: left;
        padding-top: 0;
    }
}