@import "colors.css";

/* body */
html, body {
    height: 100%;
}

/* headline */
#header {
    margin-top:    0;
    padding-top:   0;
    border-top:    1px solid;
    border-bottom: 1px solid;
}

/* Main-Content */
#main-content {
    height:     100%;
    min-height: 490px;
}

/* credentials box */
.login-container {
    max-width: 430px;
}

#login-box label {
    width:         110px;
    text-align:    right;
    padding-right: 3px;
}

#puffer {
    height: 30px;
}

/* form fields */
#login-box input[type=submit] {
    margin-left: 113px;
}

#login-box .account {
    width: 172px;
}

#footer {
    border-top: 1px solid;
}

@media only screen and (min-width: 481px) {
    .login-layout .widget-box .widget-main {
        padding: 16px;
    }

    .login-container {
        min-width: 405px;
    }
}

@media only screen and (max-width: 480px) {
    .widget-main {
        padding: 2px 12px 10px !important;
        margin:  0 !important;
    }

    #puffer {
        height: 0;
    }

    .header {
        margin: 3px;
    }

    h1, h2, h3 {
        margin: 8px;
    }

    h1 {
        font-size: 20px;
    }

    h2 {
        font-size: 18px;
    }

    span {
        font-size: 16px;
    }

    #login-box label.inline {
        margin-bottom: 2px;
    }

    #login-box label {
        width: 120px;
    }
}

@media only screen and (max-width: 400px) {
    #login-box .account {
        width: 260px;
    }

    #login-box label {
        width:      300px;
        text-align: left;
    }
}