/* This is the css file that will contain all the custom css styles that
you will be writing to customize the look of the Apigee developer portal
*/

div > a.logo > img {
  max-width: 106px;
}

/* ======================================================== */
/* USER REGISTRATION FORM                                   */

/* make the labels appear on the same line as the fields */
.modal[role="dialog"] div.modal-body form#user-login label, 
.modal[role="dialog"] div.modal-body form#user-register-form label {
    float: left;
    width: 134px;
}

.modal[role="dialog"] div.modal-body form#user-login input, 
.modal[role="dialog"] div.modal-body form#user-register-form input {
   width: 70%;
   padding-top: 2px;
   padding-bottom: 2px;
}

.modal[role="dialog"] div.modal-body form#user-login input.password-field, 
.modal[role="dialog"] div.modal-body form#user-register-form input.password-field,
.modal[role="dialog"] div.modal-body form#user-register-form input.password-confirm {
  float: left;
}

.modal[role="dialog"] div.modal-body form#user-register-form div.password-confirm {
    float: left;
    margin-top:0;
    position: relative;
    top: -30px;
    width: 100%;
}

/* the password confirmation box needs to move up a little */
div.form-type-password-confirm > div.form-type-password.form-item-pass-pass2 {
  position: relative;
  top: -20px;
}

form#user-register-form div.form-type-password-confirm div.password-strength > div.password-strength-text {
  float: none;
  display: inline;
}

form#user-register-form div.form-type-password-confirm div.password-strength > div.password-strength-title {
  float: left;
}

form#user-register-form div.form-type-password-confirm div.password-strength > div.password-indicator {
  clear: both;
}

/* the password suggestions need to be tightened up a bit */
form#user-register-form > div > div#edit-account div.form-type-password-confirm > div.password-suggestions {
  padding   : 2px 20px;
  float     : left;
  max-width : 700px;
  position  : relative;
  top       : -10px;
  width     : 100%;
}

/* Turn off the display of the semi-useless help text regarding email address */
/* It should be a tooltip at best */
.modal[role="dialog"] div.modal-body form#user-login .help-block,
.modal[role="dialog"] div.modal-body form#user-register-form .help-block {
  display: none;
}

.modal[role="dialog"] div.modal-body form#user-login div.form-group, 
.modal[role="dialog"] div.modal-body form#user-register-form div.form-group {
    clear: none;
    float: none;
    margin-bottom: 2px;
    margin-top: 4px;
}

.modal[role="dialog"] form#user-login .panel-body,
.modal[role="dialog"] form#user-register-form .panel-body {
    padding: 2px 15px;
}

/* hide the "Authenticate with Apigee" button - confusing for demos*/
div.modal-dialog > div.modal-content > div.modal-footer { 
  display: none;
}


/* make the captcha appear on the left, as well */
.modal[role="dialog"] div.modal-body form#user-login div fieldset.captcha, 
.modal[role="dialog"] div.modal-body form#user-register-form div fieldset.captcha {
  float: none;
}

.modal[role="dialog"] div.modal-body form#user-login div fieldset.captcha {
  margin-bottom: 0px;
  margin-top: 18px;
}

/* Turn off the openid link too */
form#user-login > div > ul.openid-links { 
  display: none;
}


/* ======================================================== */
/* ADD AN APP FORM                                          */

/* Make the labels appear on the same line as the input boxes */
form#devconnect-developer-apps-edit-form > div > div > label,  
form#devconnect-developer-apps-edit-form > div > div > div > label { 
  float: left;
  width: 128px;
  padding-top: 9px;
}

/* To allow this, the input boxes have to be width < 100% */
form#devconnect-developer-apps-edit-form > div > div > input,
form#devconnect-developer-apps-edit-form > div > div > div > select { 
  /* float: left; */
  width: 75%;
}

form#devconnect-developer-apps-edit-form > div > div > div > select { 
  /*  position: relative; */
}

/* add more padding to the dropdown options */
form#devconnect-developer-apps-edit-form > div > div > div > select * {
  padding:4px;
}

/* make the ADD button larger */
form#devconnect-developer-apps-edit-form > div > button { 
  font-size: 14px;
  padding: 8px 12px;
}

/* do not display the "internal app name" hint - confusing and useless */
form#devconnect-developer-apps-edit-form > div > div > small > span {
  display:none;
}


/* ======================================================== */
/* smartdocs Walmart modified template                      */

#method_content ul.method_table > li.method_title   > div.method_data.title,
#method_content ul.method_table > li.method_details > div.method_data.title {
    width: 8%;
}

#method_content ul.method_table > li.method_title   > div.method_data.value,
#method_content ul.method_table > li.method_details > div.method_data.value {
    width: 40%;
}

#method_content ul.method_table > li.method_title   > div.method_data.description,
#method_content ul.method_table > li.method_details > div.method_data.description {
    width: 48%;
}

#method_content .method_table li.method_details > div.method_data.value > input {
    padding: 0 8px;
    width: 94%;
}