#loginHolder{
 border:none;
 text-align:center;}

#loginArea{
 background:#E0E0E0;
 border:1px solid #C0C0C0;
 padding-left:2px;
 padding-right:2px;
 margin-left:auto;
 margin-right:auto;
 min-width:40px;
 width:12em;}

#loginForm{
 padding-top:12px;
 padding-left:4px;
 padding-right:4px;}

#passwordErr{
 position:relative;
 top:-0.5em;
 visibility:hidden;}

#usernameErr{
 position:relative;
 top:0.5em;
 visibility:hidden;}

.errmsg{
 font-weight:bold;
 color:#FF2200;}

.formlabel{
 font-size:1em;
 font-weight:bold;
 padding-bottom:0.5em;}

.submitbtn{
 background-color:#B0E0FF;
 font-weight:bold;
 border:1px solid #202050;
 padding: 2px 6px;
 font-size:1em;
}

#createUser_P {
 margin-top: 1em;
}

#createUser_A {
}

.txtinput{
 font-size:1em;
 border:1px solid #D0D0FF;
 padding:0.25em;}

.spacerline {
 height:0.8em;}

/*=====================================================*/
@media screen and (min-width: 1024px) {
 /* start of desktop styles */
 #loginArea{
  margin-top:8em;}

}

/*=====================================================*/
@media screen and (min-width: 768px) and (max-width: 1024px) {
 /* start of large tablet styles */
 #loginArea{
  margin-top:7em;
 }
}

/*=====================================================*/
@media screen and (min-width:481px) and (max-width: 768px) {
 /* start of medium tablet styles */
 #loginArea{
  margin-top:6em;
 }


 #loginHolder {
  font-size:120%;
 }
}

/*=====================================================*/
@media screen and (min-width: 320px) and (max-width: 667px) {
 /* start of phone styles */
 #loginArea{
  margin-top:4em;
 }

 #loginHolder {
  font-size:120%;
 }

}