.clearfix {
  *zoom: 1;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
  line-height: 0;
}
.clearfix:after {
  clear: both;
}
.hide-text {
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}
.input-block-level {
  display: block;
  width: 100%;
  min-height: 30px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
/* Fall back colors? Eg educator, talks & interviews */
/* nav.less

  this file will modify a nav structure like this:
  <___ class="docked-nav">
    <ul>
      <li><a href="" [class="tab-link"]>....</a></li>
    </ul>

    <ul>...</ul>
  </___>

  where .docked-nav has a fixed width and its adjacent content element has a
  margin-left equal to that.

  you should override any styles with .docked-nav.feature-nav or some other
  doubled up class

*/
/* TODO(marcos) at some point, docked-nav will be uniformly fixed (or not),
  make sure that all users of docked-nav specify width only */
.docked-nav {
  position: absolute;
  vertical-align: top;
  z-index: 10;
  /* these styles refer to the top and bottom shadows in long navs */
  /* styles for bootstrap affix */
  /* do nothing when not triggered*/
  /* when reaching the end, position at bottom of container */
  /* sometimes, we'll see screens so luxe and tall that affixing *at all* behaves
    ridiculous and buggy. Because affix was designed for keeping content pinned on small
    screens where it isn't possible to view the pinned content at the same time as you
    view the other content, we add this affix-static class to the $affixable element
    whenever we run into this sort of situation, which effectively turns off the effect
    of bootstrap-affix until the window is resized to be smaller than the content.
    */
}
.docked-nav ol,
.docked-nav ul {
  /* force a position-context and background color so that it can be
         * highlighted in the out-of-the-box experience. */
  margin-top: 20px;
}
.docked-nav ol.second-tier,
.docked-nav ul.second-tier {
  margin-top: 0;
  padding-left: 5px;
}
.docked-nav .zero-top-margin {
  /* The hierarchy was restructured to support the presentation in the
         * tutorial. Consequently, this override is used to keep the
         * multiple lists smushed together appearing like a single one.
         */
  margin-top: 0;
}
.docked-nav .inactive {
  color: #aaa;
}
.docked-nav .link-section-header {
  text-transform: uppercase;
  font-family: inherit;
  font-weight: bold;
  margin-top: 11px;
}
.docked-nav .tab-link {
  display: block;
  color: #555;
  font-size: 14px;
  text-decoration: none;
  border: 1px solid transparent;
  border-right: none;
  line-height: 1.6;
  padding: 5px 0 5px 5px;
  border-radius: 3px;
}
.docked-nav .tab-link:hover {
  background-color: #eee;
  text-decoration: none;
}
.docked-nav .tab-link.active {
  background-color: #eee;
  border-right: none;
  color: #333;
  font-family: inherit;
  font-weight: bold;
  text-decoration: none;
}
.docked-nav .tab-link.has-icon {
  padding-left: 30px;
  position: relative;
}
.docked-nav [data-khan-scroll="true"] {
  position: relative;
}
.docked-nav .js-nav-shadow {
  height: 20px;
  overflow: hidden;
  position: absolute;
  pointer-events: none;
  top: 0;
  width: 100%;
}
.docked-nav .js-nav-shadow img {
  position: absolute;
  top: -10px;
  width: 100%;
}
.docked-nav .js-nav-shadow.bottom {
  bottom: 0;
  top: auto;
}
.docked-nav .js-nav-shadow.bottom img {
  bottom: -10px;
  top: auto;
}
.docked-nav .affix {
  position: fixed;
  top: 0;
}
.docked-nav .affix-bottom {
  position: absolute;
  bottom: 0;
}
.docked-nav .affix.affix-static,
.docked-nav .affix-bottom.affix-static,
.docked-nav .affix-top.affix-static {
  position: relative;
}
/*
    tutorial-nav will add this class to a scrollable element's parent in order to make
    shadows appear correctly. The height will be updated by javascript on page load
*/
.js-touch-scroll {
  height: 300px;
  position: relative;
  transform: translateZ(0);
}
.js-touch-scroll .topic-nav-content {
  height: 300px;
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
  /* this is needed to counteract the non-rendering of nonvisible pos: rel;
        elements in overflow-scrolling situations.
        c.f. http://stackoverflow.com/a/10122689/470756 */
}
.js-touch-scroll .topic-nav-content .progress-container {
  transform: translateZ(0);
}