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

body
{
    background-color: #1E2037;
    margin: 0;
    padding: 0;
    font-family: Muli, Helvetica, Arial, Sans-Serif;
    font-size: 14px;
    color: white;
}
.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: 120px;
   width: 500px;
   height: 440px;
   text-align: center;
   font-size: 20px;
    line-height: 20px;
   color:#FFF;
    font-weight: 700;
    background-color: #181836;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.4);
    border-radius: 60px;
}

#loginBox img
{
    margin-top: 40px;
max-width: 90%;
}

.loginName, .loginText
{
    margin: 5px auto 0 auto;
    width: 280px;
    height: 28px;
    background-color: #fefefe;
    color: black;
    font-size: 22px;
    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;
border-radius: 12px;
padding:4px 2px;
}
.loginText
{
    border: 2px solid #CCC;
    
}
.loginName
{
    border: 2px solid #CCC;
    border-radius: 12px;
}
.loginCall
{
margin: 0 auto;
margin-top: 12px;
    width: 286px;

padding: 10px 0;
    background-color: #2c7abd;
    color: White;
    font-size: 28px;
    font-weight: 700;
    border: none;
    display: block;
text-transform: uppercase;
    font-family: inherit;
-moz-box-shadow:inset 0px 1px 0px 0px #F63800;
	
-webkit-box-shadow:inset 0px 1px 0px 0px #F63800;
box-shadow:inset 0px 1px 0px 0px #F63800;

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

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

background:-o-linear-gradient(top, #F63800 5%, #F63800 100%);

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

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

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

border-radius: 12px;

}


.loginCall:hover {

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

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

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

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

cursor: pointer;
}


.loginCall:active {

position:relative;

top:1px;

}

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

@media (min-width: 441px) and (max-width:500px)
{
#loginBox
{
background: url(images/bigbubble-t.jpg) center 100px no-repeat;
background-size: 90%;
}
}

@media (max-width:440px)
{
#loginBox
{
background: url(images/bigbubble-m.jpg) center 100px no-repeat;
background-size: 90%;
}
}

@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;
}
}