/**
 * @file
 * Visual styles for Culturepresse's User management module content.
 */


/* LOGIN FORM in header - Nota : header is 'position: relative' in header.css */
/* path /home, /user */
#block-connexionutilisateur form#user-login-form,
#block-connexionutilisateur form#user-login-form--2 {
  width: 428px;
  position: absolute;
  top: 18px;
  right: 10px;
}
@media (max-width: 1168px) {
  #block-connexionutilisateur {
    display: none;
  }
}
#block-connexionutilisateur form#user-login-form div.form-item,
#block-connexionutilisateur form#user-login-form label,
#block-connexionutilisateur form#user-login-form input,
#block-connexionutilisateur form#user-login-form--2 div.form-item,
#block-connexionutilisateur form#user-login-form--2 label,
#block-connexionutilisateur form#user-login-form--2 input,
#block-connexionutilisateur div.form-actions,
#block-connexionutilisateur div.form-actions input {
  display: inline;
  padding: 0;
}
#block-connexionutilisateur form#user-login-form div.form-type-textfield label,
#block-connexionutilisateur form#user-login-form--2 div.form-type-textfield label {
  font-size: 0.8em;        
  color: #FFFFFF;
  background-color: #6195A8;
  padding: 0 0 0 0.5em;
  height: 34px;
  line-height: 34px;
  width: 12em;
  position: absolute;
  top: 0%;
  right: 70%;
}
#block-connexionutilisateur form#user-login-form div.form-type-password label,
#block-connexionutilisateur form#user-login-form--2 div.form-type-password label {
  display: none;
}
#block-connexionutilisateur form#user-login-form input,
#block-connexionutilisateur form#user-login-form--2 input {
  font-size: 0.7em; 
  width: 12.5em;
  height: 34px;
  line-height: 34px;
  border: 1px solid #6195A8;
  margin: 0;
  padding: 0;
}
#block-connexionutilisateur form#user-login-form input[type='text'],
#block-connexionutilisateur form#user-login-form--2 input[type='text'] {
  position: absolute;
  top: 0%;
  right: 40%;
  padding-left: 4px; 
}
#block-connexionutilisateur form#user-login-form input[type='password'],
#block-connexionutilisateur form#user-login-form--2 input[type='password'] {
  position: absolute;
  top: 0%;
  right: 9.5%;
  padding-left: 4px; 
}
#block-connexionutilisateur form#user-login-form input[type=submit],
#block-connexionutilisateur form#user-login-form--2 input[type=submit] {
  color: #FFFFFF;
  font-size: 0.8em;
  font-weight: bold;
  width: 34px;
  height: 34px;
  line-height: 34px;
  position: absolute;
  top: 0%;
  right: 2%;
  padding: 0;
  background-color: #6195A8;
  cursor: pointer;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  -ms-border-radius: 0px;
  -o-border-radius: 0px;
  border-radius: 0px;
  background-image: none;
} 
#block-connexionutilisateur form#user-login-form #edit-name--description,
#block-connexionutilisateur form#user-login-form #edit-pass--description,
#block-connexionutilisateur form#user-login-form--2 #edit-name--description,
#block-connexionutilisateur form#user-login-form--2 #edit-pass--description {
  display: none;
}

/* credentials error message */
#block-connexionutilisateur form#user-login-form .form-item--error-message strong,
#block-connexionutilisateur form#user-login-form--2 .form-item--error-message  strong {
  position: absolute;
  top: 60px;
  left: 8.9em;
  color: red;
  font-style: normal;
}
#block-connexionutilisateur form#user-login-form .form-item--error-message strong a,
#block-connexionutilisateur form#user-login-form--2 .form-item--error-message  strong a {
  color: orange;
}

/* path /user/register */
#block-connexionutilisateur form#user-login-form,
#block-connexionutilisateur form#user-login-form--2 {
  width: 428px;
  position: absolute;
  top: 18px;
  right: 10px;
}
#block-connexionutilisateur form#user-login-form div.form-item,
#block-connexionutilisateur form#user-login-form label,
#block-connexionutilisateur form#user-login-form input,
#block-connexionutilisateur form#user-login-form--2 div.form-item,
#block-connexionutilisateur form#user-login-form--2 label,
#block-connexionutilisateur form#user-login-form--2 input,
#block-connexionutilisateur div.form-actions,
#block-connexionutilisateur div.form-actions input {
  display: inline;
  padding: 0;
}
#block-connexionutilisateur form#user-login-form div.form-type-textfield label,
#block-connexionutilisateur form#user-login-form--2 div.form-type-textfield label {
  font-size: 0.8em;        
  color: #FFFFFF;
  background-color: #6195A8;
  padding: 0 0 0 0.5em;
  height: 34px;
  line-height: 34px;
  width: 12em;
  position: absolute;
  top: 0%;
  right: 70%;
}
#block-connexionutilisateur form#user-login-form div.form-type-password label,
#block-connexionutilisateur form#user-login-form--2 div.form-type-password label {
  display: none;
}
#block-connexionutilisateur form#user-login-form input,
#block-connexionutilisateur form#user-login-form--2 input {
  font-size: 0.7em; 
  width: 12.5em;
  height: 34px;
  line-height: 34px;
  border: 1px solid #6195A8;
  margin: 0;
  padding: 0;
}
#block-connexionutilisateur form#user-login-form input[type='text'],
#block-connexionutilisateur form#user-login-form--2 input[type='text'] {
  position: absolute;
  top: 0%;
  right: 40%;
  padding-left: 4px; 
}
#block-connexionutilisateur form#user-login-form input[type='password'],
#block-connexionutilisateur form#user-login-form--2 input[type='password'] {
  position: absolute;
  top: 0%;
  right: 9.5%;
  padding-left: 4px; 
}
#block-connexionutilisateur form#user-login-form input[type=submit],
#block-connexionutilisateur form#user-login-form--2 input[type=submit] {
  color: #FFFFFF;
  font-size: 0.8em;
  font-weight: bold;
  width: 34px;
  height: 34px;
  line-height: 34px;
  position: absolute;
  top: 0%;
  right: 2%;
  padding: 0;
  background-color: #6195A8;
  cursor: pointer;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  -ms-border-radius: 0px;
  -o-border-radius: 0px;
  border-radius: 0px;
  background-image: none;
} 
#block-connexionutilisateur form#user-login-form #edit-name--description,
#block-connexionutilisateur form#user-login-form #edit-pass--description,
#block-connexionutilisateur form#user-login-form--2 #edit-name--description,
#block-connexionutilisateur form#user-login-form--2 #edit-pass--description {
  display: none;
}

@media only screen and (max-width : 1024px)  {
  form#user-login-form {
    display: none;
  }
} 


/* block LINK for CONNECTION ON MOBILE (the login form is on display:none. We need a 'Se connecter' link) */
#block-linkforconnectiononmobile {
  position: absolute;
  top: 10px;
  right: 14px; 
}
@media only screen and (min-width : 1168px)  {
  #block-linkforconnectiononmobile {
    display: none;
  }
}
#block-linkforconnectiononmobile p,
#block-linkforconnectiononmobile a {
  color: #E5007D; 
}

/* 
 * LOGIN FORM form in page body.path-user
 * The form is NOT included in a block like in header (#block-connexionutilisateur) 
 * (the original form in header is user-login-form--2) 
 * in reset password page (or one-time login url) => body.path-user #region form#user-login-form
 */

.region-content form#user-login-form {
  height: 142px;
  margin: 0 auto 70px auto; 
  position: relative; 
  display: block;
}
.region-content form#user-login-form div.form-type-textfield label {
  width: 9em;
  height: 34px;
  line-height: 34px;
  font-size: 0.9em;
  color: #FFFFFF;
  background-color: #6195A8;
  position: absolute;
  top: 0;
  left: 2%;
}
.region-content form#user-login-form div.form-item-name input {
  width: 20em;
  height: 34px;
  line-height: 34px;
  position: absolute;
  top: 32px;
  left: 2%;
}
body.path-user form#user-login-form #edit-name--description {
  display: block;
  position: absolute;
  top: 69px;
  left: 2%;
}
.region-content form#user-login-form div.form-type-password label {
  display: none;
}
.region-content form#user-login-form input[type='password'] {
  font-size: 0.9em;
  height: 34px;
  line-height: 34px;
  margin-left: 0.02em;
  position: absolute;
  top: 94px;
  left: 2%;
  width: 14em;
}
.region-content form#user-login-form #edit-pass--description {
  display: block;
  position: absolute;
  top: 130px;
  left: 2%;
}
.region-content form#user-login-form input[type=submit] {
  width: 34px;
  height: 34px;
  line-height: 34px;
  color: #FFFFFF;
  font-size: 0.8em;
  font-weight: bold;
  text-transform: uppercase;
  padding: 0;
  background-color: #6195A8;
  cursor: pointer;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  -ms-border-radius: 0px;
  -o-border-radius: 0px;
  border-radius: 0px;
  margin-top: -3px;
  background-image: none;
  position: absolute;
  top: 99px;
  left: 17em;
}
@media only screen and (max-width : 1024px)  {
  .region-content form#user-login-form {
    display: block;
  }
}

/* credentials error message */
.region-content form#user-login-form  .form-item--error-message strong {
  position: absolute;
  top: 9em;
  left: 1em;
  color: red;
}
.region-content form#user-login-form  .form-item--error-message strong a {
  color: orange;
}

/* USER MENU (custom) - Mobile spec */
@media only screen and (max-width : 767px)  {
  #block-usermenucustomblock ul li {
    display: block;
    float: right;
    font-size : 0.8em;
    margin-left: 1em;
  }
  #block-usermenucustomblock ul li.menu-item:first-child a:before {
  content: " | ";
  }
}

/* USER LINKS (register | forgotten pass) on home page - custom block */
#block-linksregisterresetpassword {
  position: absolute;
  top: 40px;
  right: 14px;   
}
@media only screen and (max-width : 1024px)  {
  #block-linksregisterresetpassword  {
    /*top: 30px;*/
    display: none;
  }
}

#block-linksregisterresetpassword p,
#block-linksregisterresetpassword a {
  color: #E5007D; 
}

/* get rid of old links */
.create-account-link,
.request-password-link {
  display: none;
}

/* USER LINKS (register | forgotten pass)  in user login page */
body.path-user #block-liensmotdepasseoubliesenregistrerpageuserlogin .field__item {
  display: block;
  margin-top: 2em;
  margin-left: 23.5%;
}

/* REGISTER form */
form#user-register-form {
  width: 85%;
  margin: 10px 10px 30px 10px;
  padding: 10px;
  border: 1px solid #E85252;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
} 
form#user-register-form label {
  display: inline-block;
  width: 8em; 
}
form#user-register-form #edit-field-firstname-0-value,
form#user-register-form #edit-field-lastname-0-value,
form#user-register-form #edit-field-city-0-value {
  width: 14em;
} 
form#user-register-form #edit-field-cp-0-value {
  width: 6em;
} 
form#user-register-form input[type=text] {
  width: 24em; 
  padding: 5px;
  border: 1px solid #CCCCCC;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;  
} 
form#user-register-form input[type=submit] {
  width: 34px;
  height: 34px;
  line-height: 34px;
  color: #FFFFFF;
  font-size: 0.8em;
  font-weight: bold;
  text-transform: uppercase;
  padding: 0;
  background-color: #6195A8;
  cursor: pointer;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  -ms-border-radius: 0px;
  -o-border-radius: 0px;
  border-radius: 0px;
  margin-top: -5px;
  background-image: none;
}  
form#user-register-form input[type=submit]:hover  {
  background-color: #CCCCCC;
} 
/* admin registering : button = 'créer un nouveau compte' (larger than ok) */ 
body.path-admin form#user-register-form input[type=submit] {
  width: 260px;
} 

/* RESET password form */
form#user-pass {
  width: 85%;
  margin: 10px 10px 30px 10px;
  padding: 10px;
  border: 1px solid #E85252;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
}
form#user-pass input#edit-name {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;  
} 
form#user-pass input[type=submit] {
  width: 34px;
  height: 34px;
  line-height: 34px;
  color: #FFFFFF;
  font-size: 0.8em;
  font-weight: bold;
  text-transform: uppercase;
  padding: 0;
  background-color: #6195A8;
  cursor: pointer;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  -ms-border-radius: 0px;
  -o-border-radius: 0px;
  border-radius: 0px;
  margin-top: -5px;
  background-image: none;
}

/* User pass reset : submit button 'Se connecter' */
/* User form : account form to change the user password */
form.user-pass-reset,
form.user-form {
  width: 85%;
  margin: 10px 10px 30px 10px;
  padding: 10px;
  border: 1px solid #E85252;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;  
}

form.user-pass-reset #edit-submit,
form.user-form #edit-submit {
  width: 124px;
  height: 34px;
  line-height: 34px;
  color: #FFFFFF;
  font-size: 0.8em;
  font-weight: bold;
  text-transform: uppercase;
  padding: 0;
  background-color: #6195A8;
  cursor: pointer;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  -ms-border-radius: 0px;
  -o-border-radius: 0px;
  border-radius: 0px;
  margin-top: -5px;
  background-image: none;   
} 

/* Profile page on custom themes/templates twig */
body.path-user #user_details hr.user {
  border-top: 1px dotted #EDEDED;
}

body.path-user #user_details div.field--name-field-nim,
body.path-user #user_details div.field--name-field-firstname,
body.path-user #user_details div.field--name-field-lastname,
body.path-user #user_details div.field--name-field-post-code,
body.path-user #user_details div.field--name-field-city {
  display: inline-block;
}