@import url('https://fonts.googleapis.com/css?family=Muli:400,600,700');

body
{
    background-color: #2a688f !important;
    margin: 0;
    padding: 0;
    font-family: Muli, Helvetica, Arial, Sans-Serif;
    font-size: 14px;
    color: black;
}
.KeyLabel
{
    display: block;
    position: absolute;
    width: 100;
    height: 20;
    background-color: White;
    padding: 5px;
    font-size: 15px;
    color: Red;
    font-weight: bold;
}
#loginBox
{
   margin: 0 auto; 
   margin-top: 10px;
   width: 100%;
   height: 650px;
   text-align: center;
   font-size: 20px;
line-height: 20px;
   color:#FFF;
font-weight: 700;
background: url(images/bigbubble.jpg) center 100px no-repeat;
text-shadow: 1px 1px 0 rgba(0,0,0,0.4);
}

#loginBox img
{
max-width: 90%;
}

.loginName, .loginText
{
    margin: 5px auto 0 auto;
    width: 250px;
    height: 28px;
    background-color: #fefefe;
    color: black;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
   box-shadow:0 1px 3px rgba(0,0,0,0.3); 
-moz-box-shadow:0 1px 3px rgba(0,0,0,0.3); 
-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.3); 
    font-family: inherit;
display: block;
}
.loginText
{
    border: 2px solid #CCC;
}
.loginName
{
    border: 2px solid #CCC;
}
.loginCall
{
margin: 0 auto;
    width: 250px;
padding: 6px 0;
    background-color: #053350;
    color: White;
    font-size: 20px;
    font-weight: 700;
    border: none;
    display: block;
text-transform: uppercase;
    font-family: inherit;
-moz-box-shadow:inset 0px 1px 0px 0px #3e86c1;
	
-webkit-box-shadow:inset 0px 1px 0px 0px #3e86c1;
box-shadow:inset 0px 1px 0px 0px #3e86c1;

background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #053350), color-stop(1, #2c79bd));

background:-moz-linear-gradient(top, #053350 5%, #2c79bd 100%);
background:-webkit-linear-gradient(top, #053350 5%, #2c79bd 100%);

background:-o-linear-gradient(top, #053350 5%, #2c79bd 100%);

background:-ms-linear-gradient(top, #053350 5%, #2c79bd 100%);
background:linear-gradient(to bottom, #053350 5%, #2c79bd 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#053350', endColorstr='#2c79bd',GradientType=0);

background-color:#053350;
border:1px solid #1f5f96;
text-decoration:none;

text-shadow:0px 1px 0px #1c598f;

}


.loginCall:hover {

background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #2c79bd), color-stop(1, #053350));

background:-moz-linear-gradient(top, #2c79bd 5%, #053350 100%);
	background:-webkit-linear-gradient(top, #2c79bd 5%, #053350 100%);

background:-o-linear-gradient(top, #2c79bd 5%, #053350 100%);
	background:-ms-linear-gradient(top, #2c79bd 5%, #053350 100%);
background:linear-gradient(to bottom, #2c79bd 5%, #053350 100%);

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#2c79bd', endColorstr='#053350',GradientType=0);
background-color:#2c79bd;

cursor: pointer;
}


.loginCall:active {

position:relative;

top:1px;

}

.errorLabel
{
    font-size: 16px;
    font-weight: bold;
    color: White;
    background-color: #990000;
    padding: 8px;
}

#loginBox {
	background-color: #2a688f;
	padding: 1em;
}
#loginBox img {
	width:250px;
	padding-top:1em;
}

@media (min-width: 441px) and (max-width:500px)
{
#loginBox
{

}
}

@media (max-width:440px)
{
#loginBox
{
}
}

@media (max-width:390px)
{
.loginName, .loginText, .loginCall
{
width: 200px;
}

#loginBox {
    font-size: 18px;
    line-height: 20px;
}
}

@media (max-width:340px)
{
#loginBox
{
background: none;
color: #000;
text-shadow: none;
}

.loginName, .loginText
{
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
}
}