/* responsive.css
 *
 * This CSS file is to be included on pages that can easily be made 
 * responsive.  It uses media queries for scaling to smaller browser
 * screen widths.
 */

@media only screen and (max-width: 920px) {
  #banner-left #banner-site-name {
    width: 430px;
    height: auto;
  }

  div#nav-top #user-greeting .picture {
    display: none;
  }
}

@media only screen and (max-width: 884px) {
  #nav-top #menu-link-STORE {
    display: none;
  }
}

@media only screen and (max-width: 805px) {
  div#banner-left {
    margin-left: 25px;
  }

  #fatness {
    padding: 0px;
  }
}

/* advertisements on side disappear */
@media only screen and (max-width: 769px) {
  #sidebar-right {
    display: none;
  }

  /* if remove, check book-info on iPod for unwanted ads */
  #content {
    width: auto;
  }
}

@media only screen and (max-width: 686px) {
  #nav-top #menu-link-COMMUNITY {
    display: none;
  }
}

@media only screen and (max-width: 658px) {
  #banner-calvin {
    display: none;
  }
}

@media only screen and (max-width: 580px) {
  /* Make the nav bar shorter */
  #fatness #banner-nav,
  #banner-nav > #banner-nav-right {
    height: 112px;
  }

  #banner-nav > #banner-nav-right {
    background-size: auto 94px;
  }

  div#banner {
    padding: 20px 0px 0px 0px;
    height: 58px;
  }
  #banner-left {
    height: auto;
  }

  #banner-left #banner-site-name {
    width: 330px;
  }

  div#banner-tagline {
    font-size: 0.85rem;
  }

  /* Hide the searchbox and display Community */
  #nav-top .searchbox-wrapper {
    display: none;
  }
  #nav-top #menu-link-COMMUNITY {
    display: inline;
  }
}

@media only screen and (max-width: 514px) {
  #nav-top #menu-link-COMMUNITY {
    display: none;
  }
}

@media only screen and (max-width: 404px) {
  #banner {
    height: 58px;
  }
  #banner-left {
    height: auto;
  }

  #banner-left #banner-site-name {
    width: 260px;
  }

  #banner-tagline {
    margin-top: -3px;
  }

  #nav-top div#user-greeting {
    display: none;
  }
}

@media only screen and (max-width: 350px) {
  #banner-left #banner-site-name {
    width: 222px;
  }

  #banner-tagline {
    margin-top: 0px;
  }
}

@media only screen and (max-width: 305px) {
  #nav-top #menu-link-BROWSE {
    display: none;
  }

  #nav-top div#user-greeting {
    display: inline-block;
  }

  /* Meditate "with a daily devotion" gets pushed below the black bar, so we'll hide it */
  .landingpage-meditate .landingpage-quip {
    display: none;
  }
}