INPUT, DIV, P {
    box-sizing: border-box;
}

body {
    padding: 0px;
    margin: 0px;
    padding-top: 160px;
}
.login-feedback {
    font-size: 14px;
    font-color: #e5e5e5;
    padding: 10px;
    background-color: #FFFC92;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    text-align: left;
    margin-bottom: 20px;
    border: 1px solid #FFEC72;
    text-align: center;
}
.login-frame {
    display: inline-block;
    padding: 42px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    -moz-box-shadow:    4px 4px 28px #BBB;
    -webkit-box-shadow: 4px 4px 28px #BBB;
    box-shadow:         4px 4px 28px #BBB;
    text-align: left;
    width: 440px;
}
.login-frame h1 {
    font-size: 16px;
    margin:    10px 0px 6px 0px;

    color: #555;
}
.login-frame h2 {
    font-size: 10px;
    color: #777;
}
.login-frame p {
    text-align: right;
    display: block;
    margin: 0px;
    padding-bottom: 0.5em;
    clear: both;
}
input[type=text], input[type=password], textarea {
    display:       block;
    BACKGROUND:	   #FFFFFF;
    padding:	   2px 0px 0px 6px;
    margin:        0px 0px 6px 0px;
    height:		   40px;
    width:         240px;
    line-height:   16px;
    border: 	   #b7d9ee 2px solid;
    FONT-FAMILY:   Verdana;
    FONT-SIZE: 	   14px;
    color: 		   #555;
    border: 	   #d5d5d5 1px solid;

    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
    
    -webkit-appearance: none;
}
input[type=text]:disabled {
    border: 		  #AAA 1px solid;
    color: #AAA;
    background-color: #f5f5f5;
}

textarea {
    height: 80px;
}

input[type=submit] {
    display:       block;
    cursor:		   pointer;
    FONT-FAMILY:   Verdana;
    font-size:	   14px;
    COLOR:		   #EEE;
    height:        40px;
    line-height:   20px;
    padding:	   8px 24px 8px 24px;
    margin:        0px 0px 0px 0px;
    width:         100%;
    text-align:    center;

    BACKGROUND-COLOR: 	#245EAD;
    BORDER-LEFT:		#134179 1px solid;
    BORDER-TOP:			#134179 1px solid;
    BORDER-RIGHT:		#135179 1px solid;
    BORDER-BOTTOM:		#135179 1px solid;

    BACKGROUND-COLOR: 	#5588CD;
    BORDER-WIDTH:		0px;
    /*
    text-transform: uppercase;
    */
    letter-spacing: 1px;
    
    border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    /*float: right;*/
    
    -webkit-appearance: none;
}

input[type=submit]:hover {
    BACKGROUND-COLOR: 	#336199;
    BACKGROUND-COLOR: 	#4578BD;
}

.copyright {
    padding: 8px 4px;
    font-size:10px;
    color: #999;
}

.login-frame {
    display: table;
}

.login-frame > DIV  {
    display: table-cell;
    vertical-align: top;
}

IMG.logo {
    padding: 0px 48px 0px 24px;
}

.login-frame--vertical {
    padding: 24px;
    width: 340px;
    display: block;
}

.login-frame--vertical > DIV  {
    display: block;
}

.login-frame--vertical .logo {
    text-align: center;
}

.login-frame--vertical IMG.logo {
    /* IE EI TUE: Vapaaehtoistyo...
    width: 100%;
    max-width: 250px; 
    */
    width: 240px; 
    padding: 0px 0px 24px 0px;
}

input[type=text], input[type=password], textarea {
    width:         100%;
}


@media (max-width: 767px) {

    BODY {
        padding-top: 40px;
    }

    .login-frame {
        -webkit-border-radius: 0px;
        -moz-border-radius: 0px;
        border-radius: 0px;
        -moz-box-shadow:    0px 0px 0px #BBB;
        -webkit-box-shadow: 0px 0px 0px #BBB;
        box-shadow:         0px 0px 0px #BBB;
        border-width: 0px;
    }

    .login-frame-vertical {
        width: 100%;
    }

}