/* ==========================================================================
   Custom styles and bootstrap fixes
   ========================================================================== */

/*** Bootstrap Fixes & Customizations ***/

/* override Bootstrap defaults to enlarge fonts on small screens */
/* use absolute values so that if changing base font size, these remain the same */
@media (max-width: 767px) {
  body {
    font-size: 16px;
  }

  nav .nav {
    font-size: 21px;
  }
  nav .dropdown-menu {
    font-size: 19px;
  }

  .navbar-brand {
    font-size: 25px;
  }
}

/* disable auto-zoom on iphone input field focus  */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  select:focus,
  textarea:focus,
  input:focus,
  select:hover,
  textarea:hover,
  input:hover {
    font-size: 16px;
  }
}

/* override Bootstrap print styles; stop adding URLs and Abbreviation expansions */
@media print {
  a[href]:after {
    content: none !important;
  }

  abbr[title]:after {
    content: none !important;
  }
}

/* fix Bootstrap ignoring label sizing when in small viewport */
.form-group-lg .control-label {
  padding-top: 11px;
  font-size: 18px;
}

/* add a slight margin to form inputs so that they're not touching if they wrap to the next line */
.form-group .form-control,
.form-group .input-group {
  margin-bottom: 3px;
}
/* avoid those form-controls that are part of an input-group from having an additional margin */
.input-group > .form-control {
  margin-bottom: 0;
}

/* by default .btn has "white-space:nowrap". this is not very small-screen friendly (large buttons overflow screen) */
/* This will not be fixed in v3, so override it */
.btn {
  white-space: normal;
}

/* Header and footer offsets to account fixed header/footer (+10px) */
body {
  margin-top: 60px;
  margin-bottom: 50px;
}

/* limit header / main nav width*/
.mainnav {
  max-width: 1170px !important;
}

/* sticky footer */
nav.footer {
  min-height: 20px;
}

nav.footer .pager {
  margin: 5px;
}

/* get rid of margins in panels headings; center-align header text */
.panel-heading h1,
.panel-heading h2,
.panel-heading h3,
.panel-heading h4,
.panel-heading h5,
.panel-heading h6 {
  margin-top: 0px;
  margin-bottom: 0px;
  text-align: center;
}

/* add an upper margin to panels to keep them from running into the header */
/* decrease header upper margin to align visually with panels */
div.panel,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 10px;
}

/* add a +/- to buttons that open/close collapsed content (as visual cues to alert what the buttons do) */
.btn.dropdown-toggle.hidden-content-hint:after {
  content: "-";
  float: right;
  font-weight: bold;
}
.btn.dropdown-toggle.hidden-content-hint.collapsed:after {
  content: "+";
}

/* decrease left/right margins of pager button in the footer nav from 14 to 10px,
	to be able to fit more buttons in on small screens without wrapping */
.footer .pager li > a,
.footer .pager li > span {
  padding: 5px 10px;
}

/*** Non-bootstrap-related CSS ***/

/* sidebar */
nav.sidebar {
  position: fixed;
  top: 70px;
  left: 5px;
  width: 150px;
}
nav.sidebar .panel-body {
  padding: 5px;
}

/* Admin container -- account for the sidebar */
/* width corresponds to the Bootstrap responsive "sm" size; that is the width at which the sidebar disappears */
@media screen and (min-width: 992px) {
  article.admin-container {
    margin-left: 150px;
  }
}

/* on small screens, when the article block is too wide */
/* overflow the article, not the whole page, otherwise nav-fixed-bottom disappears */
@media screen and (max-width: 768px) {
  article .wide-content {
    overflow: auto;
    /* use smooth momentum scrolling on iOS */
    -webkit-overflow-scrolling: touch;
  }
}

/* change padding and margins on "back" button in navbar to better vertically align it */
#back-button {
  padding-top: 8px;
  padding-bottom: 0px;
  padding-left: 5px;
  padding-right: 5px;
  margin-left: -5px;
  margin-right: -5px;
}

/* styles for different screens */
#greeting {
  font-size: 2em;
}

#login {
  max-width: 400px;
}

#help,
#recover,
#settings {
  max-width: 700px;
}