/* MateMarote index.html display style */
/* Laouen Belloli */

/* ======================== 
          FONTS
   ======================== */

@font-face {
    font-family: 'ComingSoon';
    src: url('/MateMarote/resources/fonts/ComingSoon.ttf')  format('truetype');
}

/* ======================
      General settings
   ====================== */

body {
    display: none;
    font-family: 'ComingSoon';
    background-color: #FFFFCC;
    padding: 0;
}

.wrapper {
  position: relative;
  width: 920px;
  margin-left: auto;
  margin-right: auto;
}

/* =====================
        input text
   ===================== */

input[type=text].medium,
input[type=password].medium {
  position: absolute;
  background: transparent;
  font-family: 'ComingSoon';
  background-image: url('/MateMarote/resources/img/medium_input.png');
  background-repeat: no-repeat;
  height: 25px;
  width: 350px;
  border: none;
  outline: 0;
}

/* =====================
    checkbox button
   ===================== */

input[type=checkbox] {
  display: none;
}

input[type=checkbox] + label {
  position: absolute;
  background: url('/MateMarote/resources/img/buttons/rememberme.png');
  background-repeat: no-repeat;
  color: #ffffcc;
  left: 396px;
  top: 355px;
  width: 18px;
  height: 18px;
  font-size: 14px;
}

input[type=checkbox] + label:hover {
  background: url('/MateMarote/resources/img/buttons/rememberme_hover.png');
  background-repeat: no-repeat;
  color: #b3b3b3;
}

input[type=checkbox]:checked + label {
  background: url('/MateMarote/resources/img/buttons/rememberme_checked.png');
  background-repeat: no-repeat;
  color: #ff931e;
}

input[type=checkbox]:checked + label:hover {
  background: url('/MateMarote/resources/img/buttons/rememberme_checked.png');
  background-repeat: no-repeat;
  color: #ff931e;
}

input[type=checkbox] + label > div {
  position: absolute;
  left: -95px;
  top:-1px;
  width: 40px; 
}

/* =====================
        FORM
   ===================== */

fieldset {
  border: 0px;
}

.main-container {
  margin-top: 35px;
}

.login-wrapper {
    position: relative;
    background-image: url("/MateMarote/resources/img/login.png");
    background-repeat: no-repeat;
    height: 512px;
    width: 880px;
    margin-left: auto;
    margin-right: auto;
}

.login-text {
    color: #ffffcc;
    font-size: 21px;
    position: absolute;
}

#click-aca {
  color: #e2a1b6;
}

#register {
    position: relative;
    width: 300px;
    left: 297px;
    top: 27px;
    text-align: center;
}

#username {
    left: 300px;
    top: 189px;
}

#password {
    left: 300px;
    top: 272px;
}

#nom {
    top:220px;
    left: 300px;
    font-family: 'ComingSoon';
}

#pass {
    top:302px;
    left: 300px;
    font-family: 'ComingSoon';
}

#nubis-text {
    left: 157px;
    bottom: 23px;
}

/* ================
     information 
   ================ */

#information {
    top: 250px;
    left: 300px;
    font-family: 'ComingSoon';
    font-size: 16px;
    font-weight: bold;
    position: absolute;
    padding-left: 4px;
}

.msgError {
  color: #e36f26;
}

.msgInfo {
  color: #edac29;
}

/* ================
     login button
   ================ */

#btnSend {
    position: absolute;
    right: 234px;
    top: 366px;
    bottom: 0px;
    color: #f5c923;
    font-size: 18px;
}

#btnSend > * {
    float: left;
    margin-right: 10px;

    position: relative;
    top: 50%;
    transform: translateY(-50%);
}


/* =================
    special pointer
   ================= */

label {
    cursor: pointer;
}

/* =====================
      register link
   =====================*/

a[id="register-link"] {
  text-decoration: inherit;
  color: inherit;
  font: inherit;
}

a:hover[id="register-link"] {
  color: #cccccc;
}

a:hover[id="register-link"] > #click-aca {
  color: #f2f2f2;
}

a:active[id="register-link"] {
  color: #eae665;
}

a:active[id="register-link"] > #click-aca {
  color: #dd4475;
}

/* ====================
    forgot pass button
   ==================== */

a[href="/MateMarote/passrecovery.html"] {
  position: absolute;
  text-decoration: inherit;
  font: inherit;
  color: #009c76;
  font-size: 14px;
  right: 2px;
  bottom: 2px;
}
    
a:hover[href="/MateMarote/passrecovery.html"] {
  color: #1273ad;
}

a:active[href="/MateMarote/passrecovery.html"] {
  color: #ff931e;
}

/* ===================
      video Modal
   =================== */

.modal-dialog {
    background: none;

    height: 80%;
    width: 80%;
}

.modal-content {
    height: 100%;
    width: 100%;

    background-color: #ffffcc;
    border: solid 2px;
    border-color: #cdcdcd;
    border-radius: 6px;
}

.modal-body {
    background: none;

    position: relative;
    height: 100%;
    width: 90%;

    margin: auto;
}

.modal-video {
    height: 80%;
    width: 100%;
    margin: auto;
}

/* ================
    modal buttons
   ================ */

.video-button {
    float: left;
    text-align: center;
    font-family: 'ComingSoon';
    font-weight: bold;
    font-size: 16pt;
}

.video-button > label {
    cursor: pointer !important;
}

.video-button > label > img {
    margin-right: 15px;
}

.video-button > label > div {
    position: relative;
    top: 2px;
}

.video-button + label {
    position: relative;
}

#video-play, #video-replay {
    color: #057e6c;
}

#video-continue {
    color: #c44029;
    margin-left: 50px
}

#loading {
    color: #212DA7;
    margin-left: 50px
}