/**
    public
 */

* {
    font-family: Sans-Serif;
    color: #ffffac;
}

html, body {
    background: #1a143a;
    width: 100%;
    height: 100%;
    padding: 0px;
    margin: 0px;
}

div.logo-wrapper {
    width: calc(100% - 40px);
    height: calc(100% - 40px);
    padding: 20px;
    text-align: center;
}

div.logo {
    position: absolute;
    width: 600px;
    height: 300px;
    max-width: calc(100% - 40px);
    max-height: calc(100% - 40px);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

div.logo.angersternchen
{
    background-image: url('/img/angersternchen.png');
}

div.logo.angerfunken
{
    background-image: url('/img/angerfunken.png');
}

/**
    intern
 */

div.login-frame
{
    width: 100%;
    height: 100%;
    max-width: 800px;
    max-height: 600px;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translateX( -50% ) translateY( -50% );
    transform: translateX( -50% ) translateY( -50% );
}

div.login-logo
{
    position: absolute;
    width: 30%;
    height: 100%;
    top: 0px;
    left: 0px;
    border-right: 3px solid #ffffac;
}

div.logo-small
{
    position: absolute;
    width: calc( 100% - 40px );
    height: 30%;
    padding: 20px;
    top: 0px;
    left: 0px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-origin: content-box;
}

div.logo-small.angersternchen
{
    background-image: url( '/img/angersternchen.png' );
}

div.logo-small.angerfunken
{
    background-image: url( '/img/angerfunken.png' );
}

div.login-form
{
    position: absolute;
    width: calc( 70% - 40px );
    height: calc( 70% - 40px );
    padding: 20px;
    left: 30%;
    top: 30%;
}

/**
    form
 */

#meet
{
    position: absolute;
    width: 100%;
    height: 100%;
}

.error
{
    color: #ff2c2c;
}

div.form-left
{
    padding: 5px;
    float: left;
    width: calc( 30% - 10px );
}

div.form-right
{
    float: right;
    width: calc( 70% - 10px );
}

div.clearfix
{
    clear: both;
}

input[type=text],
input[type=password]
{
    width: 100%;
    padding: 5px;
    background: transparent;
    border: 0px;
    border-bottom: 2px solid #ffffac;
}

input[type=submit]
{
    width: 100%;
    background: #ffffac;
    color: #1a143a;
    padding: 5px;
    margin-top: 5px;
    border: 0px;
    box-sizing: content-box;
}