body {
  padding : 0px;
  margin : 0px;
  background : url('./img/bg-white-grey.png') #FFF;
  font-family : 'Open Sans', Arial, Helvetica, sans-serif;
  font-weight : 100;
}

.transition  { opacity : 0.8; transition: opacity .25s ease-in-out; -moz-transition: opacity .25s ease-in-out; -webkit-transition: opacity .25s ease-in-out; }
.transition:hover { opacity : 1; }

#axup-logo { width : 800px; margin : 50px auto 10px auto; }

#container {
  width : 800px;
  height : 400px;
  margin : 0px auto 0px auto;
  background : url('./img/rand/la_l.jpg');
  position : relative;
  border-radius : 10px;
}

#login_mask { width : 400px; height : 400px; background : #000; opacity : 0.7; position : absolute; z-index : 1; border-top-left-radius : 10px; border-bottom-left-radius : 10px; }
#login_content { padding : 40px; width : 320px; position : absolute; z-index : 2; }

#login_content .login-title  { font-size : 24px; color : #318CD7; text-align : center; }
#login_content .login-error  { margin-top : 20px; font-size : 18px; color : #DC2127; text-align : center; height : 40px; overflow : hidden; }

#login_content form  { margin-top : 20px; }
#login_content form .login-input { display : block; margin-top : 10px; }
#login_content form .login-input .login-input-img { float : left; width : 36px; height : 36px; line-height : 36px; background : #CCC; text-align : center; }
#login_content form .login-input .login-input-img img { vertical-align : middle; }
#login_content form .login-input input { width : 272px; font-size : 14px; border : 1px solid #CCC; height : 34px; padding : 0px 5px; outline : none; }

#login_content form .login-input.remind-me { margin-top : 20px; }
#login_content form .login-input.remind-me input#remind_me { height : 20px; width : 20px; margin : 0px; float : left; }
#login_content form .login-input.remind-me span { float : left; color : #AAA; font-size : 14px; line-height : 20px; margin-left : 10px; }

#login_content form .login-input input[type=submit] { background : #318CD7; border : 1px solid #318CD7; color : #FFF; height : 40px; font-size : 16px; cursor : pointer; }
#login_content form .login-input input[type=submit].google_sso { background : #bb3f30; border : 1px solid #bb3f30; margin-top : 10px; }

#login_content .ie { color : #FFF; }
#login_content .ie .download { text-align : right; }
#login_content .ie a { font-size : 12px; font-weight : bold; color : #318cd7; text-decoration : none; }

#browser { width : 800px; margin : 10px auto; }
#browser .download { text-align : right; margin-top : 10px; }
#browser .download a { font-size : 12px; font-weight : bold; color : #318cd7; text-decoration : none; }
#browser .chrome {
  background : #EFEFEF;
  padding : 20px;
  border-radius : 10px;
  width : 360px;
  font-size : 12px;
}

#footer-margin { height : 40px; }
#footer { position : fixed; bottom : 0px; background : #efefef; height : 40px; line-height : 40px; width : 100%; }
#footer .wrapper { width : 800px; margin : 0px auto; }
#footer .wrapper .copyright { font-size : 12px; color : #AAA; }
#footer .wrapper .contact { float : right; font-size : 12px; color : #318cd7; font-weight : bold; text-decoration : none; }
#footer .wrapper .contact:hover { text-decoration : underline; }

@media (max-width:800px) { /* small */
  #axup-logo { width : 400px; text-align : center; }
  #container { width : 400px; }
  #login_mask { width : 400px; border-radius : 10px; }
  #browser { width : 400px; }
  #footer .wrapper { width : 400px; }
}

body.log-1 { background : url('./img/bg-white-grey.png') #FFF; }
.log-1 #container { background : url('./img/rand/la_l.jpg'); }

body.log-2 { background : url('./img/bg-blue-blue.png') #FFF; }
body.log-2 { background : #000; }
.log-2 #container { background : url('./img/rand/different_l.jpg'); }
.log-2 #footer { background : #333; }

body.log-3 { background : url('./img/bg-white-grey.png') #FFF; }
.log-3 #container { background : url('./img/rand/light_l.jpg'); }

body.log-4 { background : url('./img/bg-white-grey.png') #FFF; }
.log-4 #container { background : url('./img/rand/chess_l.jpg'); }