html {
    margin: 20px;
    background: url(../images/background001.jpg) no-repeat center fixed;
    background-size: cover;
    font-family: Arial;
}

.login_box {
  padding: 20px;
  position: fixed;
  left: 50%;
  border:1px solid #666;
  /* bring your own prefixes */
  transform: translate(-50%);
  text-align: center;
  background-color: #fff;
  background-color: rgba(255,255,255,0.8);
  /* 50% black box shadow */
  -webkit-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.1);
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.1);
}

.first_login_box {
  padding: 20px;
  position: fixed;
  left: 50%;
  border:1px solid #666;
  /* bring your own prefixes */
  transform: translate(-50%);
  text-align: center;
  background-color: #fff;
  background-color: rgba(255,255,255,0.8);
  /* 50% black box shadow */
  -webkit-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.1);
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.1);
}

#content {
  position: relative;
  height: 90%;
  width: 90%;
  top: 5%;
  left: 5%;
  background-color: #fff;
  background-color: rgba(255,255,255,0.9);
  border:1px solid #666;
  /* 50% black box shadow */
  -webkit-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.1);
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.1);
}

#content_inner {
  padding: 20px;
}

.div_centered {
  position: fixed;
  top: 50%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
}

.pretty_input_cc_ok {
  background-color: #BFFF00;
  -moz-border-radius: 2px;
  border-radius: 2px;
  border-style: solid;
  border-color: #3ADF00;
  background: #BFFF00 url(../images/tick_16x16.png) no-repeat scroll 3px 3px;
  padding-left:22px;
}

.pretty_input_cc_not_ok {
  background-color: #FE2E2E;
  -moz-border-radius: 2px;
  border-radius: 2px;
  border-style: solid;
  border-color: #DF0101;
}

.pretty_input_warning {
  background-color: #FE2E2E;
  -moz-border-radius: 2px;
  border-radius: 2px;
  border-style: solid;
  border-color: #DF0101;
  background: #FE2E2E url(../images/alert_16x16.png) no-repeat scroll 3px 3px;
  padding-left:22px;
}
.modal_busy {
    display:    none;
    position:   fixed;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba( 0, 0, 0, .8 )
                url('../images/ajax-loader.gif')
                50% 50%
                no-repeat;
}

/* When the body has the loading class, we turn
   the scrollbar off with overflow:hidden */
body.loading {
    overflow: hidden;
}

/* Anytime the body has the loading class, our
   modal element will be visible */
body.loading .modal {
    display: block;
}