html {
    background: #AAAAAA;
    font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
}

table {
    background: #EEEEEE;
    font-weight: 400;
    left: 50%;
    margin: -180px 0 0 -200px;
    overflow: hidden;
    position: absolute;
    top: 50%;
    width: 500px;
}

#left {
    background: url('unicarinter.png') center no-repeat;
    background-size: cover;
    background-position: calc(50% - 15px) 50%;
    position: relative;
    width:50%;
}

#left > div {
    color: #B0002D;
    display: none;
    font-size: 128px;
    height: 100%;
    text-align: center;
    animation: blink .5s steps(2, start) infinite;
    width: 100%;
}

@keyframes blink {
    to {
        visibility: hidden;
    }
}

.alert #left {
    background: linear-gradient(#444444, #000000);
}

.alert #left > div {
    display: block;
}

#left:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    border-top: 1000px solid transparent;
    border-right: 213px solid #EEEEEE;
    width: 0;
}

#left:after {
    background: radial-gradient(circle at 0px -3px, rgba(204, 0, 0, 0) 15px, #EEEEEE 15px);
    bottom: 0;
    content: '';
    height: 12px;
    left: 69%;
    position: absolute;
    width: 20px;
}

#right {
    width:60%;
}

form {
    padding: 15px;
}

form label {
    color: #333333;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    margin-left: 6px;
    padding-top: 9px;
    text-indent: 10px;
    text-shadow: 0 1px 0 #AAAAAA;
    text-transform: uppercase;
    width: 50%;
}

form input[type=text],
form input[type=password] {
    background: linear-gradient(#FFFFFF, #DDDDDD);
    border: 1px solid #666666;
    box-sizing: border-box;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);
    color: #333333;
    display: block;
    font-family: 'Ubuntu', 'Lato', sans-serif;
    font-size: 12px;
    margin-bottom: 10px;
    padding: 8px 5px;
    width: 100%;
}

form input[type=text]:hover,
form input[type=password]:hover,
form label:hover ~ input[type=text],
form label:hover ~ input[type=password] {
    background: #FAFAFA;
}

form input[type=text]:focus,
form input[type=password]:focus {
    background: #FFFFFF;
    border-color: #B0002D;
    box-shadow: inset 0 0 2px #000000;
    outline: none;
}

form p:nth-child(3),
form p:nth-child(4) {
    float: left;
    width: 50%;
}

form label[for=remember] {
    float: none;
    display: inline-block;
    text-transform: capitalize;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0;
    text-indent: 2px;
    width: auto;
}

form input[type=checkbox] {
    margin-left: 10px;
    vertical-align: middle;
}

form input[type=submit] {
    border: 1px solid rgba(0, 0, 0, 0.4);
    background: #97c51e;
    border-radius: 3px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 10px 10px rgba(255, 255, 255, 0.1);
    color: white;
    cursor: pointer;
    font-family: 'Ubuntu', 'Lato', sans-serif;
    font-size: 15px;
    font-weight: 700;
    outline: 0;
    padding: 8px 5px;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.8);
    width: 100%;
}

form input[type=submit]:hover {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

form input[type=submit]:active {
    background: #646464;
    border-color: rgba(0, 0, 0, 0.9);
    box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.6);
}

.alert form input[type=submit] {
   background: #222222;
}

.alert form input[type=submit]:active {
    background: #000000;
}