﻿.Align_Center {
    margin-left: auto;
    margin-right: auto;
}

.Label {
    padding-left: 70px;
}

body {
    background: #000;
    color: #ddd;
    font-family: 'Helvetica','Lucida Grande','Arial',sans-serif;
}

.border, .rain {
    height: 170px;
    width: 320px;
}

.rain {
    padding: 10px 12px 12px 10px;
    -moz-box-shadow: 10px 10px 10px rgba(0,0,0,1) inset,-9px -9px 8px rgba(0,0,0,1) inset;
    -webkit-box-shadow: 8px 8px 8px rgba(0,0,0,1) inset,-9px -9px 8px rgba(0,0,0,1) inset;
    box-shadow: 8px 8px 8px rgba(0,0,0,1) inset,-9px -9px 8px rgba(0,0,0,1) inset;
    margin: 100px auto;
}

.border {
    padding: 1px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

    .border, .rain, .border.start, .rain.start {
        background-repeat: repeat-x,repeat-x,repeat-x,repeat-x;
        background-color: #39f;
        background-image: -webkit-gradient(linear,left top,right top,color-stop(1%,rgba(0,0,0,.3)),color-stop(23%,rgba(0,0,0,.1)),color-stop(40%,rgba(255,231,87,.1)),color-stop(61%,rgba(255,231,87,.2)),color-stop(70%,rgba(255,231,87,.1)),color-stop(80%,rgba(0,0,0,.1)),color-stop(100%,rgba(0,0,0,.25)));
    }

        .border.end, .rain.end {
            -moz-transition-property: background-position;
            -moz-transition-duration: 30s;
            -moz-transition-timing-function: linear;
            -webkit-transition-property: background-position;
            -webkit-transition-duration: 30s;
            -webkit-transition-timing-function: linear;
            -o-transition-property: background-position;
            -o-transition-duration: 30s;
            -o-transition-timing-function: linear;
            transition-property: background-position;
            transition-duration: 30s;
            transition-timing-function: linear;
            background-position: -5400px 0,-4600px 0,-3800px 0,-3000px 0;
        }

@-webkit-keyframes colors {
    0% {
        background-color: #39f;
    }

    15% {
        background-color: #f246c9;
    }

    30% {
        background-color: #4453f2;
    }

    45% {
        background-color: #44f262;
    }

    60% {
        background-color: #f257d4;
    }

    75% {
        background-color: #edf255;
    }

    90% {
        background-color: #f20006;
    }

    100% {
        background-color: #39f;
    }
}

@-moz-keyframes colors {
    0% {
        background-color: #39f;
    }

    15% {
        background-color: #f246c9;
    }

    30% {
        background-color: #4453f2;
    }

    45% {
        background-color: #44f262;
    }

    60% {
        background-color: #f257d4;
    }

    75% {
        background-color: #edf255;
    }

    90% {
        background-color: #f20006;
    }

    100% {
        background-color: #39f;
    }
}

@keyframes colors {
    0% {
        background-color: #39f;
    }

    15% {
        background-color: #f246c9;
    }

    30% {
        background-color: #4453f2;
    }

    45% {
        background-color: #44f262;
    }

    60% {
        background-color: #f257d4;
    }

    75% {
        background-color: #edf255;
    }

    90% {
        background-color: #f20006;
    }

    100% {
        background-color: #39f;
    }
}

html > /**/ body .border, .rain {
    -webkit-animation-direction: normal;
    -moz-animation-direction: normal;
    -o-animation-direction: normal;
    animation-direction: normal;
    -webkit-animation-duration: 20s;
    -moz-animation-duration: 20s;
    -o-animation-duration: 20s;
    animation-duration: 20s;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    -o-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-name: colors;
    -moz-animation-name: colors;
    -o-animation-name: colors;
    animation-name: colors;
    -webkit-animation-timing-function: ease;
    -moz-animation-timing-function: ease;
    -o-animation-timing-function: ease;
    animation-timing-function: ease;
}

    .border.unfocus {
        background: #333 !important;
        -moz-box-shadow: 0 0 15px rgba(255,255,255,.2);
        -webkit-box-shadow: 0 0 15px rgba(255,255,255,.2);
        box-shadow: 0 0 15px rgba(255,255,255,.2);
        -webkit-animation-name: none;
        -moz-animation-name: none;
        -o-animation-name: none;
        animation-name: none;
    }

    .rain.unfocus {
        background: #000 !important;
        -webkit-animation-name: none;
        -moz-animation-name: none;
        -o-animation-name: none;
        animation-name: none;
    }

form {
    background: #212121;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    height: 100%;
    width: 100%;
    background: -moz-radial-gradient(50% 46% 90deg,circle closest-corner,#242424,#090909);
    background: -webkit-gradient(radial,50% 50%,0,50% 50%,150,from(#242424),to(#090909));
}

    form label {
        display: block;
        padding: 10px 10px 5px 15px;
        font-size: 11px;
        color: #777;
    }

    form input {
        display: block;
        margin: 5px 10px 5px 20px;
        width: 85%;
        background: #111;
        -moz-box-shadow: 0 0 4px #000 inset;
        -webkit-box-shadow: 0 0 4px #000 inset;
        box-shadow: 0 0 4px #000 inset;
        outline: 1px solid #333;
        border: 1px solid #000;
        padding: 5px;
        color: #fff;
        text-align: center;
        font: bold;
        font-size: 18px;
    }

        form input:focus {
            outline: 1px solid #555;
            color: #fff;
        }

input[type="submit"] {
    color: #999;
    padding: 5px 10px;
    float: right;
    margin: 20px 0;
    border: 1px solid #000;
    font-weight: lighter;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    border-radius: 15px;
    background: #45484d;
    background: -moz-linear-gradient(top,#222 0%,#111 100%);
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#222),color-stop(100%,#111));
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#22222',endColorstr='#11111',GradientType=0);
    -moz-box-shadow: 0 1px 1px #000,0 1px 0 rgba(255,255,255,.3) inset;
    -webkit-box-shadow: 0 1px 1px #000,0 1px 0 rgba(255,255,255,.3) inset;
    box-shadow: 0 1px 1px #000,0 1px 0 rgba(255,255,255,.3) inset;
    -webkit-text-shadow: 0 1px 1px #000;
    text-shadow: 0 1px 1px #000;
}
