<commit_before>/* ## Bring in all Compass Helpers */
@import "partials/base";
@import "project/fonts";


// *********************************************
// Table of Contents
// *********************************************


//   1. Universal
//   2. Molecular Workbench Helpers
//   3. Project Styles
//   4. Activity nav
//   5. Layout modes
//   6. Headline + Intro
//   7. Sticky Interactives
//   8. Interactive + Questions
//   9. Styling for typographic elements
//  10. Sidebar
//  11. Related Module
//  12. Image Types
//  13. Activity Footer
//  14. Site Footer
//  15. Saved Label
//  16. Activity Index Page


// *********************************************
//  1. Universal
// *********************************************

a     {   text-decoration: none; color: inherit; }
strong  { font-weight: bold;  }
em    { font-style: italic; }

header,
footer {
  margin: 0 0 26px;
  background-color: #e5e5e5;
  color: white;
}

footer {
  margin-bottom: 0;
  padding: 26px;
}


// *********************************************
//  2. Molecular Workbench Helpers
// *********************************************

// Text shadows included on various elements
@mixin drk-txt-shadow($color: $black-50) {
  @include text-shadow(0 -1px 0 darken($color, 15%));
}

@mixin lt-txt-shadow($color: #fff) {
  @include text-shadow(0 1px 0 lighten($color, 10%));
}

// Border used on questions and related-mod
.mod-border-rounded {
  border: 1px solid $black-10;
  @include border-radius(0 0 13px 13px);
}

// Clearfix
.cf { @include pie-clearfix; }

// Extra padding applied via JS when nav is in fixed position
.extra-pad { padding-top: 70px; }

// Button mixin. By default, a btn will be blue. Pass two colors into include to change color scheme
@mixin btn( $color1: lighten($btn-blue2, 5%), $color2: darken($btn-blue, 5%) ) {
  font-size: 15px;
  font-family: $lato-reg;
  padding: 9px 13px;
  background: $color1;
  background-image: -webkit-linear-gradient( top, $color1, $color2);
  background-image:         linear-gradient( top, $color1, $color2);
  -webkit-box-shadow: rgba(255, 255, 255, 0.4) 0 1px 0 inset,
                      rgba(0, 0, 0, 0.2) 0 1px 2px;
          box-shadow: rgba(255, 255, 255, 0.4) 0 1px 0 inset,
                      rgba(0, 0, 0, 0.2) 0 1px 2px;
  @include border-radius(4px);
  @include drk-txt-shadow( darken($color1, 10%) );
  border: 1px solid $color2;
  margin-top: 13px;
  cursor: pointer;
  text-transform: none;
  text-align: center;
  @include trans;
  color: #fcfcfc;

  &:hover {
    background-color: darken($color1, 5%);
    background-image: -webkit-linear-gradient( top, darken($color1, 5%), darken($color2, 10%) );
    background-image:         linear-gradient( top, darken($color1, 5%), darken($color2, 10%) );
  }

  &:active {
    @include drk-txt-shadow( darken($color1, 10%) );
    background-color: darken($color1, 10%);
    background-image: -webkit-linear-gradient( top, darken($color1, 10%), darken($color2, 5%) );
    background-image:         linear-gradient( top, darken($color1, 10%), darken($color2, 5%) );
  }
}


// *********************************************
//  3. Project Styles
// *********************************************

// Site Width
.site-width {
  width: 960px;
  margin: 0 auto;
}


.activity-mod {
  margin-bottom: 26px;
  position: relative;
  font-family: $lato-reg;
}

// Site header
// --------------------------------

.site-logo-mod {
  @extend .cf;
  padding: 13px 0;
}

.site-logo {
  width: 12%;

  img {
    max-width: 100%;
  }

  &.logo-l {
    float: left;
  }

  &.logo-r {
    float: right;
  }

}


// *********************************************
//  4. Activity nav
// *********************************************

.activity-nav-mod {
  margin: 0 0 40px;
  position: relative;
  width: 100%;
  color: #fff;
  @extend .cf;
  @include trans;


  &.fixed {
    position: fixed;
    top: 0;
    background-color: lighten($lt-blue, 15%);
    @include box-shadow(0 2px 8px rgba(0, 0, 0, 0.2) );
    padding: 10px 6px;
    z-index: 9999;
  }
}

.activity-nav-logo {
  float: left;

  img {
    max-width: 100%;
  }

  .h2 {
    font-family: $lato-reg;
    font-size: 18px;
    font-weight: normal;
    color: $drk-orange;
    opacity: 0;
    line-height: 36px;
    opacity: 0;
    @include trans;

    &.visible {
      opacity: 1;
    }
  }
}

// This controlls the layout of the nav
.l-nav {
      @include ui-grid-2(50%, 50%, 5%);
}

.activity-nav {
  margin-top: 8px;
  position: relative;
  @extend .cf;

  .prev,
  .next {
    background-color: lighten($med-blue, 5%);
    border: 1px solid $med-blue;
    @include border-radius(3px);
    line-height: 22px;
    text-align: center;
    margin-left: 8px;
    width: 40px;
    @include trans;
    height: 24px;
    background-repeat: no-repeat;
    background-size: 40%;
    background-position: 48% 50%;

    &:hover {
      background-color: darken($med-blue, 5%);
    }

    &:active {
      background-color: darken($med-blue, 20%);
    }
  }

  .prev {
    float: right;
    background-image: url('/assets/prev.png');
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpGQzdGMTE3NDA3MjA2ODExODA4M0IxODUyNUFENjlEMCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo2QjAzQjM4NDlFREExMUUyOUJENUJFNkJGMTFGNjQ4RiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo2QjAzQjM4MzlFREExMUUyOUJENUJFNkJGMTFGNjQ4RiIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6RkQ3RjExNzQwNzIwNjgxMTgwODNCMTg1MjVBRDY5RDAiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6RkM3RjExNzQwNzIwNjgxMTgwODNCMTg1MjVBRDY5RDAiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4WDkbDAAAB6UlEQVR42tyaTShEYRSGv2uGhUZJKc1YSXZqspRs1Sg/i0mJpZIspJA1CyIlIRsbM/lJEZG12ApLTVZ+Nn4WWCCN9+RMzYqZZu6d7/XWU7O789x7v++cc+91ksmk+Q8p8vBYo+wiPjAFhtw8iN9liWKwANrcPltuipSCVdDsxX3rlkg5iIEGrxagGyJVYAPUMe9aNWDPa4l8i9SDHVDNXEcawTaoZC6ILSAOygpZ2Z0cW5QuMKtFrxAJ5uOK9IO5AkrkvP06YBwM2tQ0ZisiZ38adNvW/WYjUgIWQauNbXymIgHtm5psnUcyEanQvils82D1l0gIrINa5glR/vwug8RvImGVCDHP7LKgt3Rt0D58iOjCDhiypItIkVvRemFYRaTdmLGlb8pFxKc9lGEXmQdj4ItdRLIGBsAnu4hkH/SCN3YRybFOfs/sIpIz0Anu2UUkV6AdXLOLSG5AB7hkF5E8gCg4ZReRvIAecMQuInkHfWCTXcRo5R8Gy+wiEnk0OQEm9TetSCpLYMSW/szJw+vpiEplMscEbbwiqRzqjvbKemul50RrzSO7iORC+7NbdhFJQvuzBLuI5E5lztlFjM4yUV071CJGp0zZzQ7YRSQf5ucVXdxtEb8HJ0sqv3zi9GR7Zbci3wIMAJi+UXx+jukIAAAAAElFTkSuQmCC');
  }

  .next {
    float: right;
    background-image: url('/assets/next.png');
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIH<KEY>');
  }

  .pages {
    float: left;

    @media screen and (min-width: 1100px) {
      float: right;
    }
  }
} // end .activity-nav


.pagination {
  @extend .cf;
  text-align: center;
  margin-right: 8px;
}

.pagination-item {
  margin-left: 6px;
  @include border-radius(10px);
  text-align: center;
  display: inline-block;

  &:first-child {
    margin-left: 0;
  }

  .pagination-link {
    background-color: lighten($med-blue, 27%);
    color: $med-blue;
    @include border-radius(3px);
    @include lt-txt-shadow(#fff);
    border: 1px solid lighten($med-blue, 18%);
    padding: 3px 5px;
    display: block;
    @include trans;

    &:hover {
      background: lighten($med-blue, 5%);
      @include drk-txt-shadow($med-blue);
      color: #fff;
    }

    &.selected {
      background: darken($med-blue, 12%);
      color: #fff;
      border: 1px solid darken($med-blue, 10%);
      @include drk-txt-shadow($med-blue);
    }
  } // end .pagination-link

  &.home-link {
    text-indent: -9999px;
    .pagination-link {
      background-image: url('/assets/home_blue.png');
      background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAAAzCAYAAAAAcY9ZAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDowMTgwMTE3NDA3MjA2ODExODA4M0NDNkQzM0M1RUMzRiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDoxRDQ4MDg2NEEwOUMxMUUyQUNFMkQyMTJFN0ExRTE4MiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDoxRDQ4MDg2M0EwOUMxMUUyQUNFMkQyMTJFN0ExRTE4MiIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MDg4MDExNzQwNzIwNjgxMTgwODNDQzZEMzNDNUVDM0YiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MDE4MDExNzQwNzIwNjgxMTgwODNDQzZEMzNDNUVDM0YiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4bkDIfAAADmElEQVR42uyYS2gTURSGb5JJMpOZSWaSSWP6CKIBxRetIChSXOiiIiLShaigILhxowii4kIEtaKCLxRBBAUFFyoiogtXFqmIFRUtVoUuxJ0P2iYmtbTG/4QLvlrtI8nMNPfARzOTdDL55t57zrmeueduMAdGI2gDfrAXPGEODa/D7qcBXARPNTPaopmx5Xj9GFwHs4XA0SMMDoI3asTYYtWnvLKqMVlVGV57VMNsxXsvwQVQ7ySBHpunME3RreCAooetkB5mHu/ozzSX6We5vt48Xp4FR8Dnaha4FhyVNS2tqDrz+f1j+qdCocDyJLK/rxeHx8BpkK2mKbwYdASU0M2IVZPWjOiY5RWfuMfDQuEIiybrDIzaQzj1FmwDgakuMM2TQYcejS0Jxyzml+WJ37jPx7BeMjORTGIU05TuAhsqPSgq8WUWn2ZdasRspaQQDKkluziNXhrFkXgijetepQwOVlZKoFTGaytgO9iNKWdQgsD8K182CgaLBEOhxoFs9u7gQP4BryEfuW0E0jU3gW5F19uiyVqD1qxyyvs1ArLCwlacYZlYJgWCHTh1C8xxi8AVoBNT6bJRk0hhymKtkpgdQcsE7gHT21zDa8hLIOVUgfPBPX9Qvo/k0ISnz/D0HVHoyppOxbgXCWczDt+BE3xddoTAWt56PcdC3hKJ1zCUJ47sWVHysFhdQwDLyQ4c9oD9QLOrkKYv3gN24oaU4hrnovg+PMzy2QwV5B95C3keDFZiBEq8aO3BE90Xq613nbzfashpybii6aeoB+eJz1tOgdR6vaKiFcVrnG7gX32rG8In+ZlqmJRsplPiw6kXYHWpBVLr1c5br1njbb3cEJTwKPGh/JmHMug2Tj0EzZMVSK3XNd56NU+29XJD/KwhraUoyttx6g5YMF6BFk/11HqtK3Xr5YZAN0OtIdPM6CocPgNXwIz/CaTWaxfVSpTqKeWjk2DVHLSpy2vIjTh8Dc6AxJ9lDElcDw5DWEqmvTlJYtUew0NDf537lvtK+5C093gSHAd9ZKoTNNEH8plMkZEreq2461ENke39wgay2Z4R3sqRR77bswi0kcCFY7koLlioFoH4rfRnpl27MVUVQqAQKAQKgUKgCCFQCBQChUAREwjbdg14v1mSa9nZp9s2Ark8Tyko1YMQU1gIFAKFQBFCoBAoBAqBIoRAIVAIFAJFCIFCoBA4xWNcG6qfPrx37A+x695+CDAAyz21HWnm6YoAAAAASUVORK5CYII=');
      background-repeat: no-repeat;
      background-size: 80%;
      background-position: 50% 50%;
      width: 24px;
    }
  } // end .home-link

  &.home-link {
    .selected {
      background-image: url('/assets/home_white.png');
      background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAAAzCAYAAAAAcY9ZAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2hpVFh0WE1MOmNvbS5hZG9iZS<KEY>');
    }
  }
} // end .pagination-item



// *********************************************
//  5. Layout modes
// *********************************************

// Layout: 6040
.l-6040 {
  @extend .cf;
  @include ui-grid-rl(60%, 40%, 2%);
} // end .l-6040


// Layout: 7030
.l-7030 {
  @extend .cf;
  @include ui-grid-rl(70%, 30%, 2%);
}


// Layout: full-width
.l-full-width {

  .question-hdr {
    width: 28%;
    float: left;
  }

  .question-bd {
    width: 70%;
    float: right;
  }

  .challenge {
    .h5 {
      &:after {
        border-left-color: darken($black-15, 3%);
      }
    }
  }

  .h5 {
    &:after {
      position: absolute;
      content: "\0020";
      right: -28px;
      top: -1px;
      border: 12px solid $med-blue;
      border-right-color: transparent;
      border-top-color: transparent;
      border-bottom-color: transparent;
    }
  }
} // .l-full-width



// *********************************************
//  6. Headline + Intro
// *********************************************


// Headline block
.content-hdr {
  font-family: $lato-reg;
  margin-bottom: 30px;

  .h2 {
    // font-family: $lato-light;
    font-size: 36px;
    // font-weight: normal;
    letter-spacing: -1px;
    color: $drk-orange;
  }
}



// Intro block
.intro-mod {
  font-size: 16px;
  line-height: 1.45em;
  font-family: $lato-reg;
  margin-bottom: 39px;

 .h4 {
    font-weight: normal;
    font-size: 20px;
    margin-bottom: 13px;
    color: $med-blue;
  }

  .intro-txt {
    max-width: 75%;
  }
}





// *********************************************
//  7. Sticky Interactives
// *********************************************

.sticky-wrapper { margin-bottom: 52px; }

.interactive-mod {
  &.stuck {
    position: fixed;
    top: 65px;
  }

  &.bottomed {
    position: absolute;
    bottom: 0;
  }
}


// .sticky-wrapper need to have hard px widths to work correctly in fixed state
.l-7030 {

  .sticky-wrapper {
    width: 672px;
    float: right;
  }

  .interactive-mod {
    width: 672px;
  }

}


// *********************************************
//  8. Interactive + Questions
// *********************************************

.content-mod {
  @extend .cf;
  position: relative;
}


.interactive-mod {
  margin-bottom: 52px;
  width: 100%;
  z-index: 100;
  overflow: hidden;

  img {
    max-width: 100%;
  }
}

.questions-mod {
  margin-bottom: 52px;
  position: relative;
}

.question {
  margin: 0 0 52px;
  @extend .cf;
}

.challenge {
  .question-hdr, .question-hdr-collapse {
    background: darken($black-15, 3%);

    .h5 {
      @include drk-txt-shadow($black-15);
    }
  }
  .question-bd {
    background: $black-5;
  }
} // end .challenge


.question-hdr, .question-hdr-collapse {
  background: $med-blue;
  position: relative;
  padding: 4px 8px;
  clear: both;

  .h5 {
    font-family: $lato-reg;
    font-weight: normal;
    position: relative;
    color: #fff;
    font-size: 16px;
    @include drk-txt-shadow($med-blue);
  }
}

.question-bd {
  padding: 26px;
  @extend .mod-border-rounded;
}



// *********************************************
//  9. Styling for typographic elements
// *********************************************

.intro-mod,
.content-mod {
  font-size: 16px;
  line-height: 1.35em;
  ol,
  ul,
  dl,
  blockquote,
  p {
    margin-top: 16px;
    margin-bottom: 16px;
  }
}

// disable extra margin on first and last paragraphs in a module
.intro-mod,
.question-bd {
  p {
    &:first-child {
      margin-top: 0;
    }
    &:last-child {
      margin-bottom: 0;
    }
  }
}

// ordered lists

.intro-mod,
.content-mod {
  ol {
    counter-reset: li;
    list-style: none;
    *list-style: decimal;
    padding: 0;
    margin: 16px 0;

    ol, ul {
      margin: 16px 0 16px 16px;
    }

    > li {
      margin-bottom: 13px;
      position: relative;
      &:before {
        content:counter(li)".";
        counter-increment:li;
        margin-right: 8px;
        font-weight: bold;
        font-size: 0.65em;
        padding: 3px 5px;
        background-color: $black-5;
        position: relative;
        top: -2px;
        @include border-radius(2px);
      }
    } //li
  }//ol
}//content-mod


// unordered lists
.intro-mod,
.content-mod {
  ul {
    list-style: square;
    margin-left: 16px;

    ul, ol {
      margin: 16px 0 16px 16px;
    }

    li {
      margin-bottom: 13px;
    }
  }//ul
}//content-mod


//definition lists
.intro-mod,
.content-mod {
  dl {

  }
  dt {
    font-weight: bold;
    margin-top: 13px;
  }
  dd {
    margin-left: 16px;
  }
}


// text areas
.intro-mod,
.content-mod {
  form {
  }

  label {
    display: block;
    margin-bottom: 4px;
  }
  textarea {
    width: 100%;
    padding: 16px;
    border: 1px solid $black-15;
    font-family: $lato-reg;
    @include border-radius(8px);
  }

  em {
    display: block;
    font-size: 0.75em;
    text-align: right;
    color: $black-15;
  }
}

// radio buttons
.intro-mod,
.content-mod {
  label {
    margin-bottom: 13px;
  }
  input {
    margin-right: 8px;
  }
}

// screen shot answer
.image-answer {
  border: 3px dashed $lt-blue;
  padding: 40px;
  text-align: center;
  @include border-radius(10px);

  &.complete {
    margin-bottom: 12px;
  }
}

.image-file {
  @include border-radius(5px);
  background-color: #FFF;
  text-align: center;

  img {
    max-width: 100%;
    opacity: 0.6;
    @include border-radius(5px);
  }

  p {
    margin: 0;
  }
  a {
    font-size: 11px;
    color: $btn-blue;
    text-transform: uppercase;
    float: right;
  }
}

// submit
input[type="submit"],
button[type="submit"] {
  display: block;
  margin: 0 auto;
  @include btn ( lighten($btn-orange, 8%), $btn-orange2 );
  padding: 15px 30px;
  font-size: 15px;
  color: #fff;
  @include drk-txt-shadow($btn-orange);
}

// button
input[type="button"],
button[type="button"] {
  border: 0;
  @include btn;
}


// ******************************************
//  10. Sidebar
// ******************************************

.sidebar-mod {
  position: fixed;
  top: 20%;
  font-family: $lato-light;
  text-align: left;
  @include border-radius(0 0 0 8px);
  background-color: transparent;
  display: none;
  z-index: 200;
  width: 600px;
  right: -515px;

  @media screen and (min-width: 1024px) {
    right: -715px;
    width: 800px;
  }

  //transitions for "close" action
  -moz-transition: 0.4s right,
                      0.85s background-color,
                      0.20s 0.05s ease box-shadow;
  -webkit-transition: 0.4s right,
                      0.85s background-color,
                      0.20s 0.05s ease box-shadow;
          transition: 0.4s right,
                      0.85s background-color,
                      0.20s 0.05s ease box-shadow;

  &.expanded {
    right: 0;
    background-color: #fff;

    box-shadow: -3px 2px 15px rgba(0, 0, 0, 0.3),
                0 0 0 8000px rgba(68, 68, 68, 0.1),
                0 0 0 8000px rgba(255, 255, 255, 0.7);

    .sidebar-hdr {
      position: absolute;
      left: -85px;
    }

    .sidebar-bd {
      padding: 30px;
      background-color: #fff;
    }
  } // end .expanded
} // end sidebar-mod

.sidebar-hdr {
  cursor: pointer;
  left: 0;
  background: lighten($drk-orange, 5%) url('/assets/question.png') no-repeat 50% 10px;
  background: lighten($drk-orange, 5%) url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo2MTJGRTM0OEEwNzQxMUUyOUE2MkM1N0M3NTQ0M0ZDMyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo2MTJGRTM0OUEwNzQxMUUyOUE2MkM1N0M3NTQ0M0ZDMyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjYxMkZFMzQ2QTA3NDExRTI5QTYyQzU3Qzc1NDQzRkMzIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjYxMkZFMzQ3QTA3NDExRTI5QTYyQzU3Qzc1NDQzRkMzIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+1dIF3QAAAZ5JREFUeNqclc8vw2AYx9eui7BJmIgdhBIkLLg57+7u7uyP8KeIa+/uPbshSBBGXDYxslERW+v7yLfJ403blSf5dG3evp8+769nVhRFBSOKYBLMgCkwAcbZ1gOv4Bm0wAsY6M6WIRwBC2COIocfsNgeUdCn+AHcgc8kYRmsAheMFfJFAJrgErxroQjWwDIoqQ4NsAXqfJbOx8CPBYgvcA0u5AMilGEtgU0OOQ4R7aVkJuJ99SxDPgE3IquCeUNWYCbx0H1OyQ6zdvnrq7kXR8fGpcYFSApfdZIhHqi2svGuOGo2MyzmXISGuj9P2G5VR22PYbHNIceZN432H5dcKjlkuyq7I+ClvFcRYQjsDFldyTwK0yIUUZcnIC1cdZ8lE0dXMuzwrJYy9pyXY1rkOHZkY8vpWM85l1nxBs5sVo0ns2oYq3tI0mJAR8tmSbrnQf9vBHT04uIgc7kINv5QabTsFNzKPDpqQpvcQissrNYQUcRCe8W62E8qsDYr9SyYZrajRoH9YFYyZ49cg1Afl18bE7RZ44KcfwGhFnwLMABgdHwtnXk12wAAAABJRU5ErkJggg==') no-repeat 50% 10px;
  border-right: 4px solid $drk-orange;
  width: 85px;
  height: 79px;
  text-align: center;
  padding: 8px;
  float: left;
  @include border-radius(3px 0 0 3px);

  &:hover {
    background-color: darken($drk-orange, 5%);
  }

  .h5 {
    // text-transform: uppercase;
    font-family: $lato-reg;
    text-transform: none;
    color: #fff;
    font-size: 14px;
    line-height: 1.15em;
    margin-top: 33px;
    @include drk-txt-shadow($drk-orange);
  }
}//sidebar-hdr

.sidebar-bd {
  padding: 30px 30px 30px 105px;
  font-family: $lato-reg;
  font-size: 16px;
  @include border-radius(0 0 0 8px);
  background-color: transparent;
  height: 500px;
  overflow: scroll;

  .h4 {
    font-size: 24px;
    font-family: $lato-reg;
    font-weight: 400;
    margin-bottom: 14px;
  }

  .sidebar-txt {
    margin-bottom: 16px;

    &:last-child {
      margin-bottom: 0;
    }
  }//sidebar-txt
} // end sidebar-bd

.sidebar-bd-close {
  position: absolute;
  background-color: $black-15;
  padding: 2px 6px;
  top: 16px;
  right: 32px;
  color: #fff;
  cursor: pointer;
  @include border-radius(5px);
  @include trans;

  &:hover {
    background-color: darken($black-15, 15%);
  }
}//sidebar-bd-close






// ******************************************
//  11. Related Module
// ******************************************

.related-mod {
  margin-bottom: 50px;
  margin-top: 50px;
  border-top: none;
  background-color: lighten($related-green, 40%);
  border: 1px solid lighten($related-green, 30%);
  @extend .mod-border-rounded;
  @extend .cf;
}

.related-hdr {
  // background-color: $med-blue;
  background-color: $related-green;
  color: #fff;
  font-size: 18px;
  padding: 6px 13px;
  margin-bottom: 8px;
  @include box-shadow(0 2px 5px -1px $black-15);
  //@extend .drk-text-shadow;
}

.related-bd {
  padding: 16px 26px 30px;
  @extend .cf;
}

.related-items {
  @extend .cf;
}

.related-item {
  width: 30%;
  margin-left: 5%;
  float: left;

  &:first-child {
    margin-left: 0;
  }

  .h6 {
    font-size: 16px;
    margin-bottom: 3px;
    color: #000;
  }

  .related-item-txt {
    font-size: 14px;
    line-height: 1.35em;

    a {
      // @include btn;
      display: inline-block;
      padding: 7px 11px;
      color: lighten($btn-blue2, 40%);
      margin-top: 13px;
      background-color: lighten($btn-blue2, 2%);
      @include drk-txt-shadow($btn-blue2);
      @include trans;

      &:hover {
        background-color: darken($btn-blue2, 4%);
      }

      &:active {
        background-color: darken($btn-blue2, 10%);
      }
    }//a
  }//related-item-txt
} //related-item


.related-img {
  margin-bottom: 16px;
  width: 25%;

  img {
    max-width: 100%;
  }
}





// ******************************************
//  12. Image Types
// ******************************************

.content-img {
  position: relative;

  img {
    max-width: 100%;
    padding: 1em;
    background-color: #f9f9f9;
    border: 1px solid #e9e9e9;
  }

  figcaption {
    margin-top: 5px;
    font-size: 12px;
  }
} // .content-img

.img-reg { max-width: 60%; }

.img-inset {
  max-width: 30%;
  float: right;
  margin-left: 2em;
}

// img inside a question
.question-bd {
  .content-img {
    position: relative;
    img {
      padding: 0;
      background-color: transparent;
      // border: 0;
    }
  }

  .img-reg {
    max-width: 100%;
  }
} //question-bd

// expandable img icon
.img-expandable {
  position: absolute;
  top: 0;
  right: 0;
  width: 28px;
  height: 28px;
  background: $med-blue url('/assets/plus.png') no-repeat center;
  background: $med-blue url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDowNDgwMTE3NDA3MjA2ODExODIyQUE0NzczNTQ2ODgzRCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo3RDI1OEQ3RUEyRjAxMUUyODc4QkNENDU5RjNFMTk1RSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo3RDI1OEQ3REEyRjAxMUUyODc4QkNENDU5RjNFMTk1RSIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MDQ4MDExNzQwNzIwNjgxMTgyMkFBNDc3MzU0Njg4M0QiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MDQ4MDExNzQwNzIwNjgxMTgyMkFBNDc3MzU0Njg4M0QiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7eT1LfAAAALElEQVR42mL4//8/Axac9h8VYKhhYiATDCGNII/O/E8GGBinjsYjtTUCBBgAZiiR6+hReNkAAAAASUVORK5CYII=') no-repeat center;
  @include box-shadow(-1px 1px 2px rgba(0, 0, 0, 0.3) );
  @include trans;

  &:hover {
    background-color: darken($med-blue, 8%);
  }
}//img-expandable



// ******************************************
//  13. Activity Footer
// ******************************************

.activity-footer-mod {
  margin-bottom: 48px;

  .site-logo {
    margin: 0 auto;
  }
}



// ******************************************
//  14. Site Footer
// ******************************************

footer {
  .footer-txt {
    margin-bottom: 13px;
    color: $black-75;
    @include lt-txt-shadow(#fff);
    font-family: $lato-reg;

    &:last-child {
      margin-bottom: 0;
    }

    a {
      color: darken($black-75, 5%);
      font-weight: bold;
      @include trans;

      &:hover {
        color: darken($lt-blue, 55%);
      }
    }//a
  }//footer-txt
}//footer



// ******************************************
//  15. Saved Label
// ******************************************

#save {
  padding: 6px 12px;
  width: 90px;
  text-align: center;
  position: fixed;
  z-index: 10000;
  bottom: 20px;
  right: 20px;
  background-color: rgba( lighten($med-blue, 20%), 0.9 );
  border: 1px solid lighten($med-blue, 17%);
  @include border-radius(3px);
  @include trans;

  &.saved {
    // background-color: #EEE;
  }
}//save





// ******************************************
//  16. Activity Index Page
// ******************************************

.index-width {
  width: 675px;
  margin: 0 auto;
}

.index-mod {
  text-align: left;

  .intro-mod {
    margin-bottom: 60px;

    .intro-txt {
      font-size: 20px;
      line-height: 1.35em;
      max-width: 100%;
    }
  } // end intro-mod

  input[type="submit"],
  button[type="submit"] {
    font-size: 20px;
    padding: 20px 86px;
    margin: 0 auto 24px;
  }

  &.intro-mod {

    ul, ol {
      font-size: 20px;

      li {
        margin-bottom: 24px;
        &:before {
          background-color: lighten($med-blue, 27%);
          border: 1px solid lighten($med-blue, 18%);
          color: $med-blue;
          @include lt-txt-shadow(#fff);
        }

        a {
          color: #666;
          color: $med-blue;
          @include trans;

          &:visited {
            color: #aaa;
          }

          &:hover {
            color: darken($med-blue, 20%);
          }


        }//a
      }//li
    }//ul,ol
  } // end &.intro-mod
} // end index-mod

.index-list-header {
  font-size: 18px;
  font-weight: bold;
  margin: 36px 0 20px;
  color: #666;
}

.question {
  a {
    @include trans;
    text-decoration: underline;
    &:visited {
      color: #aaa;
    }
    &:hover {
      color: darken($med-blue, 20%);
    }
  }
}
// social tools on index page<commit_msg>screen.scss : Hyperlinked text in questions look like a hyperlinks.<commit_after>/* ## Bring in all Compass Helpers */
@import "partials/base";
@import "project/fonts";


// *********************************************
// Table of Contents
// *********************************************


//   1. Universal
//   2. Molecular Workbench Helpers
//   3. Project Styles
//   4. Activity nav
//   5. Layout modes
//   6. Headline + Intro
//   7. Sticky Interactives
//   8. Interactive + Questions
//   9. Styling for typographic elements
//  10. Sidebar
//  11. Related Module
//  12. Image Types
//  13. Activity Footer
//  14. Site Footer
//  15. Saved Label
//  16. Activity Index Page


// *********************************************
//  1. Universal
// *********************************************

a     {   text-decoration: none; color: inherit; }
strong  { font-weight: bold;  }
em    { font-style: italic; }

header,
footer {
  margin: 0 0 26px;
  background-color: #e5e5e5;
  color: white;
}

footer {
  margin-bottom: 0;
  padding: 26px;
}


// *********************************************
//  2. Molecular Workbench Helpers
// *********************************************

// Text shadows included on various elements
@mixin drk-txt-shadow($color: $black-50) {
  @include text-shadow(0 -1px 0 darken($color, 15%));
}

@mixin lt-txt-shadow($color: #fff) {
  @include text-shadow(0 1px 0 lighten($color, 10%));
}

// Border used on questions and related-mod
.mod-border-rounded {
  border: 1px solid $black-10;
  @include border-radius(0 0 13px 13px);
}

// Clearfix
.cf { @include pie-clearfix; }

// Extra padding applied via JS when nav is in fixed position
.extra-pad { padding-top: 70px; }

// Button mixin. By default, a btn will be blue. Pass two colors into include to change color scheme
@mixin btn( $color1: lighten($btn-blue2, 5%), $color2: darken($btn-blue, 5%) ) {
  font-size: 15px;
  font-family: $lato-reg;
  padding: 9px 13px;
  background: $color1;
  background-image: -webkit-linear-gradient( top, $color1, $color2);
  background-image:         linear-gradient( top, $color1, $color2);
  -webkit-box-shadow: rgba(255, 255, 255, 0.4) 0 1px 0 inset,
                      rgba(0, 0, 0, 0.2) 0 1px 2px;
          box-shadow: rgba(255, 255, 255, 0.4) 0 1px 0 inset,
                      rgba(0, 0, 0, 0.2) 0 1px 2px;
  @include border-radius(4px);
  @include drk-txt-shadow( darken($color1, 10%) );
  border: 1px solid $color2;
  margin-top: 13px;
  cursor: pointer;
  text-transform: none;
  text-align: center;
  @include trans;
  color: #fcfcfc;

  &:hover {
    background-color: darken($color1, 5%);
    background-image: -webkit-linear-gradient( top, darken($color1, 5%), darken($color2, 10%) );
    background-image:         linear-gradient( top, darken($color1, 5%), darken($color2, 10%) );
  }

  &:active {
    @include drk-txt-shadow( darken($color1, 10%) );
    background-color: darken($color1, 10%);
    background-image: -webkit-linear-gradient( top, darken($color1, 10%), darken($color2, 5%) );
    background-image:         linear-gradient( top, darken($color1, 10%), darken($color2, 5%) );
  }
}


// *********************************************
//  3. Project Styles
// *********************************************

// Site Width
.site-width {
  width: 960px;
  margin: 0 auto;
}


.activity-mod {
  margin-bottom: 26px;
  position: relative;
  font-family: $lato-reg;
}

// Site header
// --------------------------------

.site-logo-mod {
  @extend .cf;
  padding: 13px 0;
}

.site-logo {
  width: 12%;

  img {
    max-width: 100%;
  }

  &.logo-l {
    float: left;
  }

  &.logo-r {
    float: right;
  }

}


// *********************************************
//  4. Activity nav
// *********************************************

.activity-nav-mod {
  margin: 0 0 40px;
  position: relative;
  width: 100%;
  color: #fff;
  @extend .cf;
  @include trans;


  &.fixed {
    position: fixed;
    top: 0;
    background-color: lighten($lt-blue, 15%);
    @include box-shadow(0 2px 8px rgba(0, 0, 0, 0.2) );
    padding: 10px 6px;
    z-index: 9999;
  }
}

.activity-nav-logo {
  float: left;

  img {
    max-width: 100%;
  }

  .h2 {
    font-family: $lato-reg;
    font-size: 18px;
    font-weight: normal;
    color: $drk-orange;
    opacity: 0;
    line-height: 36px;
    opacity: 0;
    @include trans;

    &.visible {
      opacity: 1;
    }
  }
}

// This controlls the layout of the nav
.l-nav {
      @include ui-grid-2(50%, 50%, 5%);
}

.activity-nav {
  margin-top: 8px;
  position: relative;
  @extend .cf;

  .prev,
  .next {
    background-color: lighten($med-blue, 5%);
    border: 1px solid $med-blue;
    @include border-radius(3px);
    line-height: 22px;
    text-align: center;
    margin-left: 8px;
    width: 40px;
    @include trans;
    height: 24px;
    background-repeat: no-repeat;
    background-size: 40%;
    background-position: 48% 50%;

    &:hover {
      background-color: darken($med-blue, 5%);
    }

    &:active {
      background-color: darken($med-blue, 20%);
    }
  }

  .prev {
    float: right;
    background-image: url('/assets/prev.png');
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAD<KEY>');
  }

  .next {
    float: right;
    background-image: url('/assets/next.png');
    background-image: url('data:image/png;base64,<KEY>');
  }

  .pages {
    float: left;

    @media screen and (min-width: 1100px) {
      float: right;
    }
  }
} // end .activity-nav


.pagination {
  @extend .cf;
  text-align: center;
  margin-right: 8px;
}

.pagination-item {
  margin-left: 6px;
  @include border-radius(10px);
  text-align: center;
  display: inline-block;

  &:first-child {
    margin-left: 0;
  }

  .pagination-link {
    background-color: lighten($med-blue, 27%);
    color: $med-blue;
    @include border-radius(3px);
    @include lt-txt-shadow(#fff);
    border: 1px solid lighten($med-blue, 18%);
    padding: 3px 5px;
    display: block;
    @include trans;

    &:hover {
      background: lighten($med-blue, 5%);
      @include drk-txt-shadow($med-blue);
      color: #fff;
    }

    &.selected {
      background: darken($med-blue, 12%);
      color: #fff;
      border: 1px solid darken($med-blue, 10%);
      @include drk-txt-shadow($med-blue);
    }
  } // end .pagination-link

  &.home-link {
    text-indent: -9999px;
    .pagination-link {
      background-image: url('/assets/home_blue.png');
      background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSU<KEY>FW<KEY>2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDowMTgwMTE3NDA3MjA2ODExODA4M0NDNkQzM0M1RUMzRiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDoxRDQ4MDg2NEEwOUMxMUUyQUNFMkQyMTJFN0ExRTE4MiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDoxRDQ4MDg2M0EwOUMxMUUyQUNFMkQyMTJFN0ExRTE4MiIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MDg4MDExNzQwNzIwNjgxMTgwODNDQzZEMzNDNUVDM0YiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MDE4MDExNzQwNzIwNjgxMTgwODNDQzZEMzNDNUVDM0YiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4bkDIfAAADmElEQVR42uyYS2gTURSGb5JJMpOZSWaSSWP6CKIBxRetIChSXOiiIiLShaigILhxowii4kIEtaKCLxRBBAUFFyoiogtXFqmIFRUtVoUuxJ0P2iYmtbTG/4QLvlrtI8nMNPfARzOTdDL55t57zrmeueduMAdGI2gDfrAXPGEODa/D7qcBXARPNTPaopmx5Xj9GFwHs4XA0SMMDoI3asTYYtWnvLKqMVlVGV57VMNsxXsvwQVQ7ySBHpunME3RreCAooetkB5mHu/ozzSX6We5vt48Xp4FR8Dnaha4FhyVNS2tqDrz+f1j+qdCocDyJLK/rxeHx8BpkK2mKbwYdASU0M2IVZPWjOiY5RWfuMfDQuEIiybrDIzaQzj1FmwDgakuMM2TQYcejS0Jxyzml+WJ37jPx7BeMjORTGIU05TuAhsqPSgq8WUWn2ZdasRspaQQDKkluziNXhrFkXgijetepQwOVlZKoFTGaytgO9iNKWdQgsD8K182CgaLBEOhxoFs9u7gQP4BryEfuW0E0jU3gW5F19uiyVqD1qxyyvs1ArLCwlacYZlYJgWCHTh1C8xxi8AVoBNT6bJRk0hhymKtkpgdQcsE7gHT21zDa8hLIOVUgfPBPX9Qvo/k0ISnz/D0HVHoyppOxbgXCWczDt+BE3xddoTAWt56PcdC3hKJ1zCUJ47sWVHysFhdQwDLyQ4c9oD9QLOrkKYv3gN24oaU4hrnovg+PMzy2QwV5B95C3keDFZiBEq8aO3BE90Xq613nbzfashpybii6aeoB+eJz1tOgdR6vaKiFcVrnG7gX32rG8In+ZlqmJRsplPiw6kXYHWpBVLr1c5br1njbb3cEJTwKPGh/JmHMug2Tj0EzZMVSK3XNd56NU+29XJD/KwhraUoyttx6g5YMF6BFk/11HqtK3Xr5YZAN0OtIdPM6CocPgNXwIz/CaTWaxfVSpTqKeWjk2DVHLSpy2vIjTh8Dc6AxJ9lDElcDw5DWEqmvTlJYtUew0NDf537lvtK+5C093gSHAd9ZKoTNNEH8plMkZEreq2461ENke39wgay2Z4R3sqRR77bswi0kcCFY7koLlioFoH4rfRnpl27MVUVQqAQKAQKgUKgCCFQCBQChUAREwjbdg14v1mSa9nZp9s2Ark8Tyko1YMQU1gIFAKFQBFCoBAoBAqBIoRAIVAIFAJFCIFCoBA4xWNcG6qfPrx37A+x695+CDAAyz21HWnm6YoAAAAASUVORK5CYII=');
      background-repeat: no-repeat;
      background-size: 80%;
      background-position: 50% 50%;
      width: 24px;
    }
  } // end .home-link

  &.home-link {
    .selected {
      background-image: url('/assets/home_white.png');
      background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAAAzCAYAAAAAcY9ZAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiB<KEY>');
    }
  }
} // end .pagination-item



// *********************************************
//  5. Layout modes
// *********************************************

// Layout: 6040
.l-6040 {
  @extend .cf;
  @include ui-grid-rl(60%, 40%, 2%);
} // end .l-6040


// Layout: 7030
.l-7030 {
  @extend .cf;
  @include ui-grid-rl(70%, 30%, 2%);
}


// Layout: full-width
.l-full-width {

  .question-hdr {
    width: 28%;
    float: left;
  }

  .question-bd {
    width: 70%;
    float: right;
  }

  .challenge {
    .h5 {
      &:after {
        border-left-color: darken($black-15, 3%);
      }
    }
  }

  .h5 {
    &:after {
      position: absolute;
      content: "\0020";
      right: -28px;
      top: -1px;
      border: 12px solid $med-blue;
      border-right-color: transparent;
      border-top-color: transparent;
      border-bottom-color: transparent;
    }
  }
} // .l-full-width



// *********************************************
//  6. Headline + Intro
// *********************************************


// Headline block
.content-hdr {
  font-family: $lato-reg;
  margin-bottom: 30px;

  .h2 {
    // font-family: $lato-light;
    font-size: 36px;
    // font-weight: normal;
    letter-spacing: -1px;
    color: $drk-orange;
  }
}



// Intro block
.intro-mod {
  font-size: 16px;
  line-height: 1.45em;
  font-family: $lato-reg;
  margin-bottom: 39px;

 .h4 {
    font-weight: normal;
    font-size: 20px;
    margin-bottom: 13px;
    color: $med-blue;
  }

  .intro-txt {
    max-width: 75%;
  }
}





// *********************************************
//  7. Sticky Interactives
// *********************************************

.sticky-wrapper { margin-bottom: 52px; }

.interactive-mod {
  &.stuck {
    position: fixed;
    top: 65px;
  }

  &.bottomed {
    position: absolute;
    bottom: 0;
  }
}


// .sticky-wrapper need to have hard px widths to work correctly in fixed state
.l-7030 {

  .sticky-wrapper {
    width: 672px;
    float: right;
  }

  .interactive-mod {
    width: 672px;
  }

}


// *********************************************
//  8. Interactive + Questions
// *********************************************

.content-mod {
  @extend .cf;
  position: relative;
}


.interactive-mod {
  margin-bottom: 52px;
  width: 100%;
  z-index: 100;
  overflow: hidden;

  img {
    max-width: 100%;
  }
}

.questions-mod {
  margin-bottom: 52px;
  position: relative;
}

.question {
  margin: 0 0 52px;
  @extend .cf;
}

.challenge {
  .question-hdr, .question-hdr-collapse {
    background: darken($black-15, 3%);

    .h5 {
      @include drk-txt-shadow($black-15);
    }
  }
  .question-bd {
    background: $black-5;
  }
} // end .challenge


.question-hdr, .question-hdr-collapse {
  background: $med-blue;
  position: relative;
  padding: 4px 8px;
  clear: both;

  .h5 {
    font-family: $lato-reg;
    font-weight: normal;
    position: relative;
    color: #fff;
    font-size: 16px;
    @include drk-txt-shadow($med-blue);
  }
}

.question-bd {
  padding: 26px;
  @extend .mod-border-rounded;
}



// *********************************************
//  9. Styling for typographic elements
// *********************************************

.intro-mod,
.content-mod {
  font-size: 16px;
  line-height: 1.35em;
  ol,
  ul,
  dl,
  blockquote,
  p {
    margin-top: 16px;
    margin-bottom: 16px;
  }
}

// disable extra margin on first and last paragraphs in a module
.intro-mod,
.question-bd {
  p {
    &:first-child {
      margin-top: 0;
    }
    &:last-child {
      margin-bottom: 0;
    }
  }
}

// ordered lists

.intro-mod,
.content-mod {
  ol {
    counter-reset: li;
    list-style: none;
    *list-style: decimal;
    padding: 0;
    margin: 16px 0;

    ol, ul {
      margin: 16px 0 16px 16px;
    }

    > li {
      margin-bottom: 13px;
      position: relative;
      &:before {
        content:counter(li)".";
        counter-increment:li;
        margin-right: 8px;
        font-weight: bold;
        font-size: 0.65em;
        padding: 3px 5px;
        background-color: $black-5;
        position: relative;
        top: -2px;
        @include border-radius(2px);
      }
    } //li
  }//ol
}//content-mod


// unordered lists
.intro-mod,
.content-mod {
  ul {
    list-style: square;
    margin-left: 16px;

    ul, ol {
      margin: 16px 0 16px 16px;
    }

    li {
      margin-bottom: 13px;
    }
  }//ul
}//content-mod


//definition lists
.intro-mod,
.content-mod {
  dl {

  }
  dt {
    font-weight: bold;
    margin-top: 13px;
  }
  dd {
    margin-left: 16px;
  }
}


// text areas
.intro-mod,
.content-mod {
  form {
  }

  label {
    display: block;
    margin-bottom: 4px;
  }
  textarea {
    width: 100%;
    padding: 16px;
    border: 1px solid $black-15;
    font-family: $lato-reg;
    @include border-radius(8px);
  }

  em {
    display: block;
    font-size: 0.75em;
    text-align: right;
    color: $black-15;
  }
}

// radio buttons
.intro-mod,
.content-mod {
  label {
    margin-bottom: 13px;
  }
  input {
    margin-right: 8px;
  }
}

// screen shot answer
.image-answer {
  border: 3px dashed $lt-blue;
  padding: 40px;
  text-align: center;
  @include border-radius(10px);

  &.complete {
    margin-bottom: 12px;
  }
}

.image-file {
  @include border-radius(5px);
  background-color: #FFF;
  text-align: center;

  img {
    max-width: 100%;
    opacity: 0.6;
    @include border-radius(5px);
  }

  p {
    margin: 0;
  }
  a {
    font-size: 11px;
    color: $btn-blue;
    text-transform: uppercase;
    float: right;
  }
}

// submit
input[type="submit"],
button[type="submit"] {
  display: block;
  margin: 0 auto;
  @include btn ( lighten($btn-orange, 8%), $btn-orange2 );
  padding: 15px 30px;
  font-size: 15px;
  color: #fff;
  @include drk-txt-shadow($btn-orange);
}

// button
input[type="button"],
button[type="button"] {
  border: 0;
  @include btn;
}


// ******************************************
//  10. Sidebar
// ******************************************

.sidebar-mod {
  position: fixed;
  top: 20%;
  font-family: $lato-light;
  text-align: left;
  @include border-radius(0 0 0 8px);
  background-color: transparent;
  display: none;
  z-index: 200;
  width: 600px;
  right: -515px;

  @media screen and (min-width: 1024px) {
    right: -715px;
    width: 800px;
  }

  //transitions for "close" action
  -moz-transition: 0.4s right,
                      0.85s background-color,
                      0.20s 0.05s ease box-shadow;
  -webkit-transition: 0.4s right,
                      0.85s background-color,
                      0.20s 0.05s ease box-shadow;
          transition: 0.4s right,
                      0.85s background-color,
                      0.20s 0.05s ease box-shadow;

  &.expanded {
    right: 0;
    background-color: #fff;

    box-shadow: -3px 2px 15px rgba(0, 0, 0, 0.3),
                0 0 0 8000px rgba(68, 68, 68, 0.1),
                0 0 0 8000px rgba(255, 255, 255, 0.7);

    .sidebar-hdr {
      position: absolute;
      left: -85px;
    }

    .sidebar-bd {
      padding: 30px;
      background-color: #fff;
    }
  } // end .expanded
} // end sidebar-mod

.sidebar-hdr {
  cursor: pointer;
  left: 0;
  background: lighten($drk-orange, 5%) url('/assets/question.png') no-repeat 50% 10px;
  background: lighten($drk-orange, 5%) url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo2MTJGRTM0OEEwNzQxMUUyOUE2MkM1N0M3NTQ0M0ZDMyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo2MTJGRTM0OUEwNzQxMUUyOUE2MkM1N0M3NTQ0M0ZDMyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjYxMkZFMzQ2QTA3NDExRTI5QTYyQzU3Qzc1NDQzRkMzIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjYxMkZFMzQ3QTA3NDExRTI5QTYyQzU3Qzc1NDQzRkMzIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+1dIF3QAAAZ5JREFUeNqclc8vw2AYx9eui7BJmIgdhBIkLLg57+7u7uyP8KeIa+/uPbshSBBGXDYxslERW+v7yLfJ403blSf5dG3evp8+769nVhRFBSOKYBLMgCkwAcbZ1gOv4Bm0wAsY6M6WIRwBC2COIocfsNgeUdCn+AHcgc8kYRmsAheMFfJFAJrgErxroQjWwDIoqQ4NsAXqfJbOx8CPBYgvcA0u5AMilGEtgU0OOQ4R7aVkJuJ99SxDPgE3IquCeUNWYCbx0H1OyQ6zdvnrq7kXR8fGpcYFSApfdZIhHqi2svGuOGo2MyzmXISGuj9P2G5VR22PYbHNIceZN432H5dcKjlkuyq7I+ClvFcRYQjsDFldyTwK0yIUUZcnIC1cdZ8lE0dXMuzwrJYy9pyXY1rkOHZkY8vpWM85l1nxBs5sVo0ns2oYq3tI0mJAR8tmSbrnQf9vBHT04uIgc7kINv5QabTsFNzKPDpqQpvcQissrNYQUcRCe8W62E8qsDYr9SyYZrajRoH9YFYyZ49cg1Afl18bE7RZ44KcfwGhFnwLMABgdHwtnXk12wAAAABJRU5ErkJggg==') no-repeat 50% 10px;
  border-right: 4px solid $drk-orange;
  width: 85px;
  height: 79px;
  text-align: center;
  padding: 8px;
  float: left;
  @include border-radius(3px 0 0 3px);

  &:hover {
    background-color: darken($drk-orange, 5%);
  }

  .h5 {
    // text-transform: uppercase;
    font-family: $lato-reg;
    text-transform: none;
    color: #fff;
    font-size: 14px;
    line-height: 1.15em;
    margin-top: 33px;
    @include drk-txt-shadow($drk-orange);
  }
}//sidebar-hdr

.sidebar-bd {
  padding: 30px 30px 30px 105px;
  font-family: $lato-reg;
  font-size: 16px;
  @include border-radius(0 0 0 8px);
  background-color: transparent;
  height: 500px;
  overflow: scroll;

  .h4 {
    font-size: 24px;
    font-family: $lato-reg;
    font-weight: 400;
    margin-bottom: 14px;
  }

  .sidebar-txt {
    margin-bottom: 16px;

    &:last-child {
      margin-bottom: 0;
    }
  }//sidebar-txt
} // end sidebar-bd

.sidebar-bd-close {
  position: absolute;
  background-color: $black-15;
  padding: 2px 6px;
  top: 16px;
  right: 32px;
  color: #fff;
  cursor: pointer;
  @include border-radius(5px);
  @include trans;

  &:hover {
    background-color: darken($black-15, 15%);
  }
}//sidebar-bd-close






// ******************************************
//  11. Related Module
// ******************************************

.related-mod {
  margin-bottom: 50px;
  margin-top: 50px;
  border-top: none;
  background-color: lighten($related-green, 40%);
  border: 1px solid lighten($related-green, 30%);
  @extend .mod-border-rounded;
  @extend .cf;
}

.related-hdr {
  // background-color: $med-blue;
  background-color: $related-green;
  color: #fff;
  font-size: 18px;
  padding: 6px 13px;
  margin-bottom: 8px;
  @include box-shadow(0 2px 5px -1px $black-15);
  //@extend .drk-text-shadow;
}

.related-bd {
  padding: 16px 26px 30px;
  @extend .cf;
}

.related-items {
  @extend .cf;
}

.related-item {
  width: 30%;
  margin-left: 5%;
  float: left;

  &:first-child {
    margin-left: 0;
  }

  .h6 {
    font-size: 16px;
    margin-bottom: 3px;
    color: #000;
  }

  .related-item-txt {
    font-size: 14px;
    line-height: 1.35em;

    a {
      // @include btn;
      display: inline-block;
      padding: 7px 11px;
      color: lighten($btn-blue2, 40%);
      margin-top: 13px;
      background-color: lighten($btn-blue2, 2%);
      @include drk-txt-shadow($btn-blue2);
      @include trans;

      &:hover {
        background-color: darken($btn-blue2, 4%);
      }

      &:active {
        background-color: darken($btn-blue2, 10%);
      }
    }//a
  }//related-item-txt
} //related-item


.related-img {
  margin-bottom: 16px;
  width: 25%;

  img {
    max-width: 100%;
  }
}





// ******************************************
//  12. Image Types
// ******************************************

.content-img {
  position: relative;

  img {
    max-width: 100%;
    padding: 1em;
    background-color: #f9f9f9;
    border: 1px solid #e9e9e9;
  }

  figcaption {
    margin-top: 5px;
    font-size: 12px;
  }
} // .content-img

.img-reg { max-width: 60%; }

.img-inset {
  max-width: 30%;
  float: right;
  margin-left: 2em;
}

// img inside a question
.question-bd {
  .content-img {
    position: relative;
    img {
      padding: 0;
      background-color: transparent;
      // border: 0;
    }
  }

  .img-reg {
    max-width: 100%;
  }
} //question-bd

// expandable img icon
.img-expandable {
  position: absolute;
  top: 0;
  right: 0;
  width: 28px;
  height: 28px;
  background: $med-blue url('/assets/plus.png') no-repeat center;
  background: $med-blue url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDowNDgwMTE3NDA3MjA2ODExODIyQUE0NzczNTQ2ODgzRCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo3RDI1OEQ3RUEyRjAxMUUyODc4QkNENDU5RjNFMTk1RSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo3RDI1OEQ3REEyRjAxMUUyODc4QkNENDU5RjNFMTk1RSIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MDQ4MDExNzQwNzIwNjgxMTgyMkFBNDc3MzU0Njg4M0QiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MDQ4MDExNzQwNzIwNjgxMTgyMkFBNDc3MzU0Njg4M0QiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7eT1LfAAAALElEQVR42mL4//8/Axac9h8VYKhhYiATDCGNII/O/E8GGBinjsYjtTUCBBgAZiiR6+hReNkAAAAASUVORK5CYII=') no-repeat center;
  @include box-shadow(-1px 1px 2px rgba(0, 0, 0, 0.3) );
  @include trans;

  &:hover {
    background-color: darken($med-blue, 8%);
  }
}//img-expandable



// ******************************************
//  13. Activity Footer
// ******************************************

.activity-footer-mod {
  margin-bottom: 48px;

  .site-logo {
    margin: 0 auto;
  }
}



// ******************************************
//  14. Site Footer
// ******************************************

footer {
  .footer-txt {
    margin-bottom: 13px;
    color: $black-75;
    @include lt-txt-shadow(#fff);
    font-family: $lato-reg;

    &:last-child {
      margin-bottom: 0;
    }

    a {
      color: darken($black-75, 5%);
      font-weight: bold;
      @include trans;

      &:hover {
        color: darken($lt-blue, 55%);
      }
    }//a
  }//footer-txt
}//footer



// ******************************************
//  15. Saved Label
// ******************************************

#save {
  padding: 6px 12px;
  width: 90px;
  text-align: center;
  position: fixed;
  z-index: 10000;
  bottom: 20px;
  right: 20px;
  background-color: rgba( lighten($med-blue, 20%), 0.9 );
  border: 1px solid lighten($med-blue, 17%);
  @include border-radius(3px);
  @include trans;

  &.saved {
    // background-color: #EEE;
  }
}//save





// ******************************************
//  16. Activity Index Page
// ******************************************

.index-width {
  width: 675px;
  margin: 0 auto;
}

.index-mod {
  text-align: left;

  .intro-mod {
    margin-bottom: 60px;

    .intro-txt {
      font-size: 20px;
      line-height: 1.35em;
      max-width: 100%;
    }
  } // end intro-mod

  input[type="submit"],
  button[type="submit"] {
    font-size: 20px;
    padding: 20px 86px;
    margin: 0 auto 24px;
  }

  &.intro-mod {

    ul, ol {
      font-size: 20px;

      li {
        margin-bottom: 24px;
        &:before {
          background-color: lighten($med-blue, 27%);
          border: 1px solid lighten($med-blue, 18%);
          color: $med-blue;
          @include lt-txt-shadow(#fff);
        }

        a {
          color: #666;
          color: $med-blue;
          @include trans;

          &:visited {
            color: #aaa;
          }

          &:hover {
            color: darken($med-blue, 20%);
          }


        }//a
      }//li
    }//ul,ol
  } // end &.intro-mod
} // end index-mod

.index-list-header {
  font-size: 18px;
  font-weight: bold;
  margin: 36px 0 20px;
  color: #666;
}

.question, .intro-mod, .related-mod{
  a {
    @include trans;
    text-decoration: underline;
    &:visited {
      color: #aaa;
    }
    &:hover {
      color: darken($med-blue, 20%);
    }
  }
}

// social tools on index page
{'fraction_non_alphanumeric': 0.1683878110310532, 'fraction_numerical': 0.06862193506234233, 'mean_word_length': 3.5331139448786506, 'pattern_counts': {'":': 0, '<': 10, '<?xml version=': 0, '>': 12, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 9, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4991613', 'n_tokens_mistral': 27862, 'n_tokens_neox': 25011, 'n_words': 3315}