AARON MONTOYA

Honoring Tribal Legacies Website

MAY 2014–2015

National Park Service, University of Oregon

Select PHP, jQuery, SASS SCSS, images and HTML—GitHub

The collection of common-core aligned curricula is intended to provide options for K–12 classroom teachers. With the teaching resources, teachers can meet common core goals while exposing students to the cultures, histories and significance of the peoples who are considered native to the lands now called the United States of America.

My role in the project was to build a website, and my charge was to make it as accessible to as many people as possible. I reviewed and understood the content and sketched extensively before setting out to build. The value of sketching, prototyping, research and deep forethought cannot be understated—I believe the process leading up to production is the one that determines the ultimate quality of a product.

The users of the site are likely teachers of elementary, primary and secondary school children. I made decisions regarding the format of the content, the navigation of the site and its overall architecture based on the desires, values, expectations and behaviors of that persona. I interviewed teachers and sought feedback during each stage of the process, especially during prototyping, to ensure that my perception was accurate. I officially published the website during May 2015. I continue to receive positive feedback from the National Parks Service folks with whom I worked about the impact of the website.

I chose Wordpress as the content management system, because it is an open-source, stable, supported and widely-used tool that is perfect for the simple tasks the website performs. I integrated my custom theme with Wordpress using PHP and used jQuery, HTML and SASS SCSS to create the structure, style and behavior of it. Git paired with GitHub, SublimeText2, and Adobe Creative Suite are tools that I employ during production to manage code versioning and collaboration, compose code and create graphics and video.

Samples

PHP + HTML


<!doctype html>
<!--[if lt IE 7]><html <?php language_attributes(); ?> class="no-js lt-ie9 lt-ie8 lt-ie7"><![endif]-->
<!--[if (IE 7)&!(IEMobile)]><html <?php language_attributes(); ?> class="no-js lt-ie9 lt-ie8"><![endif]-->
<!--[if (IE 8)&!(IEMobile)]><html <?php language_attributes(); ?> class="no-js lt-ie9"><![endif]-->
<!--[if gt IE 8]><!--> <html <?php language_attributes(); ?> class="no-js"><!--<![endif]-->

 <head>
  <?php // Define the character set for the document ?>
  <meta charset="utf-8">

  <?php // force Internet Explorer to use the latest rendering engine available ?>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <title><?php wp_title(''); ?></title>

  <?php // mobile meta ?>
  <meta name="HandheldFriendly" content="True">
  <meta name="MobileOptimized" content="320">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

  <?php // icons & favicons ?>
  <link rel="apple-touch-icon" href="<?php echo get_template_directory_uri(); ?>/library/images/apple-icon-touch.png">
  <link rel="icon" href="<?php echo get_template_directory_uri(); ?>/favicon.png">
  <!--[if IE]>
   <link rel="shortcut icon" href="<?php echo get_template_directory_uri(); ?>/favicon.ico">
  <![endif]-->
  <?php // set /favicon.ico for IE10 win ?>
  <meta name="msapplication-TileColor" content="#f01d4f">
  <meta name="msapplication-TileImage" content="<?php echo get_template_directory_uri(); ?>/library/images/win8-tile-icon.png">

  <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>">

  <?php // wordpress head functions ?>
  <?php wp_head(); ?>
  <?php // end of wordpress head ?>

  <!-- ADOBE TYPEKIT //-->
  <script src="//use.typekit.net/xuh4iwz.js"></script>
  <script>try{Typekit.load();}catch(e){}</script>
  <!-- *END* ADOBE TYPEKIT //-->

 </head>

 <body <?php body_class(); ?>>

  <header class="header" role="banner">
   <ul class="header-items">
    <li class="icon-menu menu-icon-alt" tabindex="1">MENU</li>
    <li><p class="logo-type"><a href="<?php echo home_url(); ?>" rel="nofollow"><?php bloginfo('name'); ?></a></p></li>
    <li><svg class="header-logo-images logo-header-nps"><!-- SVG information redacted to improve readability //--></svg></li>
   </ul>
  </header>

  <a id="top"></a>

  <div class="clearfix"></div>

  <input id="toggle-nav" type="checkbox" />
  <nav role="navigation" class="nav-top">
   <?php

   // Dynamic Navigation
   // This tool searches the curriculum a person is using via the WordPress post.
   // It extracts the table of contents menu and uses the data to dynamically
   // construct a navigation menu germane to the particular curriculum in use.
   // The generated menu appears when a person uses the MENU button.


   // Get the nav menu based on $menu_name (same as 'theme_location' or 'menu' arg to wp_nav_menu)
      // This code based on wp_nav_menu's code to get Menu ID from menu slug
      $menu_name = 'main-nav';

      // Identify the curriculum the person is using
   $current_post_id = $wp_query->post->ID;

   // Fetch the content of the curriculum via the WordPress post
   $current_post_content = apply_filters('the_content', get_post_field('post_content', $post_id));

   // Tell the computer to look for these strings in the post content
   $table_of_contents_markup_begin = '/\<\!\-\-\[nav\-menu\-options\]\/\/\-\-\>/';
   $table_of_contents_markup_end = '/\<\!\-\-\[end\-nav\-menu\-options\]\/\/\-\-\>/';

   // Split the post contents at the locations at which the strings occur;
   // they are markers intentionally embedded in the post to identify the navigation menu items to display
   $current_post_table_of_contents = preg_split ($table_of_contents_markup_begin, $current_post_content);
   $current_post_table_of_contents = preg_split ($table_of_contents_markup_end, $current_post_table_of_contents[1]);
   $current_post_table_of_contents = $current_post_table_of_contents[0];

   // Find and remove class declarations from navigation markup in preparation for application of different styles
   $class_string = '/ class\=\"[[:alnum:][:punct:]]*\"/';
   $replacement_string = '';
   $current_post_table_of_contents = preg_replace($class_string, $replacement_string, $current_post_table_of_contents);

   // Load the curriculum title into $current_post_title.
   // The title string matches a class of style rules that format the navigation to correspond with the aesethetics of the current curriculum
   $current_post_title = get_post_field('post_title', $post_id);
   $current_post_color_class = get_post_field('post_name', $post_id);
   $current_post_color_class = 'nav-current-'.$current_post_color_class;

   // If the navigation data loaded and processed properly, put it on the page
   if ($current_post_table_of_contents) {echo '<div class="nav-current '.$current_post_color_class.'"><h1>'.$current_post_title.'</h1>'.$current_post_table_of_contents.'</div>';}

   // Load all WordPress posts with the type 'attachment' in preparation for a search
   $my_args = array(
       'post_status'  => 'any',
       'post_type'     => 'attachment',
       'posts_per_page' => -1
     );
   $attachment_posts_array = get_posts( $my_args );

   // Load all Wordpress posts with the type 'page' in preparation for a search
   $my_args = array(
       'post_status'  => 'publish',
       'post_type'   => 'page',
       'posts_per_page' => -1
    );
   $pages_array = get_pages( $my_args );
   
   $download_icon = '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 51.3 1000 897.9" enable-background="new 0 51.3 1000 897.9" xml:space="preserve"><g id="Layer_2" display="none"><rect x="-22" y="-15" display="inline" stroke="#FFFFFF" stroke-miterlimit="10" width="1044" height="1036"/></g><g id="Layer_1"><polygon fill="#FFFFFF" points="1000.5,516 500.3,949.2 0,516  "/><rect x="278.4" y="51.3" fill="#FFFFFF" width="443.1" height="480.8"/></g></svg>';

   // Remove white space
   function clean_up_aid($o) {
    return trim($o);
   }

   // Remove slash characters and white space
   function clean_up($n) {
    $cleaned = explode("/", $n);

    $cleaned = array_map("clean_up_aid", $cleaned);
    return $cleaned;
   }

   // Declare arrays for use in upcoming operation loops
   $essentials = array();
   $page_links = array();

   // Loop through $attachment_post_array and $pages_array and load the name and IDs into arrays
   $key = null;
   foreach ( (array) $attachment_posts_array as $key => $attachment_post_array ) {
    $id = $attachment_post_array->ID;
    $name = $attachment_post_array->post_name;

    $essentials[$id] = $name;
   }

   $key = null;
   foreach ( (array) $pages_array as $key => $page_pieces ) {
    $id = $page_pieces->ID;
    $name = $page_pieces->post_name;
    $page_link = $page_pieces->guid;
    $page_links[$id] = $page_link;

    $page_essentials[$id] = $name;
   }

   // If a menu exists, load it into $menu and operate on it
      if ( ( $locations = get_nav_menu_locations() ) && isset( $locations[ $menu_name ] ) ) {
    $menu = wp_get_nav_menu_object( $locations[ $menu_name ] );

    $menu_items = wp_get_nav_menu_items($menu->term_id);

    // Set a flag to remove the download section of the navigation menu on the front page where it is not applicable
    $remove_download_section = false;
    if (is_front_page()) {
     $remove_download_section = true;
    }

    $menu_list = '<ul id="menu-' . $menu_name . '" class="nav">';
    
    // Loop through the menu items and organize the data in preparation for posting to the page
    foreach ( (array) $menu_items as $key => $menu_item ) {
        $url = $menu_item->url;

        // Load the description of the menu item into $description_output afer injecting HTML tags to format the copy
        $description = $menu_item->description;
        $description_formatted = explode( ":", $description );
        $description_formatted_num = count( $description_formatted );
        if( $description_formatted_num > 1 ) {
         $description_output = "<em>".$description_formatted[0]."</em><br />".$description_formatted[1];
        } else {
         $description_output = $description;
        }

     $title = $menu_item->title;
     $title = strtolower($title);

     // If we've reached the download section, insert the appropriate tags and data
     if( $title == "download" ) {
      $description_output = '<div class="nav-download-icon">'.$download_icon.'</div><div class="nav-download-copy">'.$description_output."</div>";
     }

     // From the menu item title, build the class name that corresponds with the style rules for the curriculum in use
     $title_for_class = str_replace(" ", "-", $title);
     $section_class = "nav-".$title_for_class;

     // Ouput the section title, e.g. "elementary" or "post-secondary"
     $title_output .= '<p class="nav-title '.$section_class.'">' . $title . '</p>';

     // Do not repeat the section title for curriculum that belong to the same section
     if ($title == $prev_title) {
      $title_output = null;
      $author_avatars = '<ul class="nav-authors-no-title">';
     } else {
      $author_avatars = '<ul class="nav-authors">';
     }
     $prev_title = $title;

     // Load author names into $authors array
     // Use them to build the author avatars that appear next to the curriculum in the navigation menu
        $authors = $menu_item->attr_title;
     $authors = explode(",", $authors);
     $authors = array_map("clean_up", $authors);

     // Build menu items by matching author name strings to pages those authors are credited for making and add them to the navigation menu
     foreach( $authors as $key2 => $author ) {
      // Insert author name strings into style rule classes
      $author_nav_color_class = "nav-border-color-".$author[0];

      // Find author, title and link information for each curriculum
      $author_to_find = $author[0];
      $page_to_find = "contributor-".$author_to_find;
      $match = array_search( $author_to_find, $essentials );
      $page_match = array_search( $page_to_find, $page_essentials );

      // If the page has an author, build the menu item using the fetched information
      // If the page does not have an author, build the menu item appropriately
      // If the author string does not match any information, report failure and display anonymous avatar
      if ($match && $page_match) {
       $author_avatar_attributes = wp_get_attachment_image_src($match);

       $authors_output .= "author_name:".$author[0]."<br />Attachment ID:".$match."<br />author_avatar_location:".$author_avatar_attributes[0]."<br />";

       $author_avatars .= '<li><a href="'.$page_links[$page_match].'"><img src="'.$author_avatar_attributes[0].'"></a><a href="'.$page_links[$page_match].'">'.$author[1].'</a></li>';

      } else if( $page_match ) {
       $author_avatars .= '<li><a href="'.$page_links[$page_match].'"><div class="icon-anonymous">: )</div></a><a href="'.$page_links[$page_match].'">'.$author[1].'</a></li>';
      } else {
       $authors_output .="failed to find match for '".$author[0]."'! Displaying anonyuser instead.<br />";

       if( $title != "download" ) {
        $author_avatars .= '<li><div class="icon-anonymous">: )</div>'.$author[1].'</li>';
       }
      }
     }

     $author_avatars .= "</ul>";

     // Append the formatted menu item to the navigation menu
     if( $title == "download" && $remove_download_section ) {
      $menu_list .= '<div class="nav-no-download-section"></div>';

     } else {
      $menu_list .= $title_output.'<li class="'.$section_class.'"><a href="' . $url . '" class="nav-description '.$author_nav_color_class.'"><span>' . $description_output . '</span></a>'.$author_avatars.'</li>';
     }

     // Update log with potential error information
     $authors_output_log .= $authors_output."<br />";

     // Reset variables for next loop
     $authors_output = null;
     $author_avatars = null;
    }

    $menu_list .= '</ul>';
      } else {
       // Output error message if a menu is not located
    $menu_list = '<ul><li>Menu "' . $menu_name . '" not defined.</li></ul>';
      }
      // $menu_list now ready to output

      // Add navigation menu to page
      echo $menu_list;

      // Reset the WordPress API posts query for re-use further down the page
      rewind_posts();

   ?>

  </nav>
    

jQuery


  jQuery(document).ready(function($) {

  /* Listen for depression of the 'enter' key; reveal the navigation menu and activate the menu button upon such an event. */

  $(".menu-icon-alt").on(
    "keydown", function(event) {
      pressed_key = event.which;

      if (pressed_key == "13") {

        /* If the menu button is in the active state already, replace the style rules with the ones that correspond to the button's inactive state. */
        /* Hide the navigation menu overlay. */

        if ($(".menu-icon-alt").hasClass("icon-menu-active")) {
          $(".menu-icon-alt").html("MENU");
          $(".menu-icon-alt").removeClass("icon-menu-active");

          $("nav.nav-active").addClass("nav-top");
          $("nav.nav-active").removeClass("nav-active");

        }

        /* Otherwise, replace the style rules with the ones that correspond to the button's active state. */
        /* Reveal the navigation menu overlay and scroll to the top of the page. */

        else {
          $(".menu-icon-alt").addClass( "icon-menu-active" );
          $(".menu-icon-alt").html("X");

          $("nav.nav-top").addClass("nav-active");
          $("nav.nav-top").removeClass("nav-top");

          $("html, body").animate({ scrollTop: 0 }, 'fast');
        }
      }
    });

  /* Listen for depression of a mouse button; reveal the navigation menu and activate the menu button upon such an event. */

  $(".menu-icon-alt").on(
    "click", function() {

      /* If the menu button is in the active state already, replace the style rules with the ones that correspond to the button's inactive state. */
      /* Hide the navigation menu overlay. */

      if ($(".menu-icon-alt").hasClass("icon-menu-active")) {
        $(".menu-icon-alt").html("MENU");
        $(".menu-icon-alt").removeClass("icon-menu-active");

        $("nav.nav-active").addClass("nav-top");
        $("nav.nav-active").removeClass("nav-active");

      }

      /* Otherwise, replace the style rules with the ones that correspond to the button's active state. */
      /* Reveal the navigation menu overlay and scroll to the top of the page. */

      else {
        $(".menu-icon-alt").addClass( "icon-menu-active" );
        $(".menu-icon-alt").html("X");

        $("nav.nav-top").addClass("nav-active");
        $("nav.nav-top").removeClass("nav-top");

        $("html, body").animate({ scrollTop: 0 }, 'fast');
      }
    });

  /* Listen for a mouse click on the navigation menu; reveal the navigation menu and activate the menu button upon such an event. */

  $(".nav-current a").on(
    "click", function () {

      /* If the menu button is in the active state already, replace the style rules with the ones that correspond to the button's inactive state. */
      /* Hide the navigation menu overlay. */

      if ($(".menu-icon-alt").hasClass("icon-menu-active")) {
        $(".menu-icon-alt").html("MENU");
        $(".menu-icon-alt").removeClass("icon-menu-active");

        $("nav.nav-active").addClass("nav-top");
        $("nav.nav-active").removeClass("nav-active");

      }

      /* Otherwise, replace the style rules with the ones that correspond to the button's active state. */
      /* Reveal the navigation menu overlay and scroll to the top of the page. */

      else {
        $(".menu-icon-alt").addClass( "icon-menu-active" );
        $(".menu-icon-alt").html("X");

        $("nav.nav-top").addClass("nav-active");
        $("nav.nav-top").removeClass("nav-top");

        $("html, body").animate({ scrollTop: 0 }, 'fast');
      }
    });

  /* Listen for a mouse click on the navigation menu; reveal the navigation menu and activate the menu button upon such an event. */

  $(".btn-access-curricula").on(
    "click", function () {

      /* If the menu button is in the active state already, replace the style rules with the ones that correspond to the button's inactive state. */
      /* Hide the navigation menu overlay. */

      if ($(".menu-icon-alt").hasClass("icon-menu-active")) {
        $(".menu-icon-alt").html("MENU");
        $(".menu-icon-alt").removeClass("icon-menu-active");

        $("nav.nav-active").addClass("nav-top");
        $("nav.nav-active").removeClass("nav-active");

      }

      /* Otherwise, replace the style rules with the ones that correspond to the button's active state. */
      /* Reveal the navigation menu overlay and scroll to the top of the page. */

      else {
        $(".menu-icon-alt").addClass( "icon-menu-active" );
        $(".menu-icon-alt").html("X");

        $("nav.nav-top").addClass("nav-active");
        $("nav.nav-top").removeClass("nav-top");

        $("html, body").animate({ scrollTop: 0 }, 'fast');
      }
    });

  });
    

SASS SCSS


/******************************************************************
Site Name: Honoring Tribal Legacies
Author: Aaron Montoya

Stylesheet: Variables

Declare variables like colors, fonts, base values, and defaults.
******************************************************************/

/*********************
COLORS
*********************/

$alert-yellow: #ebe16f;
$alert-red: #fbe3e4;
$alert-green: #e6efc2;
$alert-blue: #d5edf8;

$black: #5f6062;
$black-dark: darken($black,9%);
$black-darker: darken($black,18%);
$white: #fff;
$white-dark: darken($white,9%);

$black-screen: rgba(0,0,0,0.18);
$black-screen-more: rgba(0,0,0,.5);
$white-screen: rgba(255,255,255,0.18);
$white-screen-subtle: rgba(255,255,255,0.02);

$light-gray: #f8f9fa;
$gray: #eaedf2;
$text-color: #5c6b80;
$meta-gray: #9fa6b4;

$tan: #eceee5;

$green: #7dd667;
$yellow: #ffff00;
$red: #ff0000;
$orange: #ff9900;

$bones-pink: #f01d4f;
$blue: #2980b9;

$link-color: $black;
$color-link-hover: darken($link-color, 9%);
$color-nav-author-link: $white;
$color-nav-author-link-hover: #fff;

$border-color: #ccc;
$disabled-gray: #cfcfcf;

$nav-contributors: #ffc92e;

$menu-active: lighten($black, 9%);
$menu: $black-dark;

$curriculum-1-honey: #0099ff;
$curriculum-1-highlight: lighten($curriculum-1-honey, 40%);

$curriculum-2-inglebret: #f69200;
$curriculum-2-highlight: lighten($curriculum-2-inglebret, 40%);

$curriculum-3-brown: #eac81c;
$curriculum-3-highlight: lighten($curriculum-3-brown, 40%);

$curriculum-4-buswell: #1ee093;
$curriculum-4-highlight: lighten($curriculum-4-buswell, 40%);

$curriculum-5-cajune: #67c9d1;
$curriculum-5-highlight: lighten($curriculum-5-cajune, 40%);

$curriculum-6-doyle: #ffbc71;
$curriculum-6-highlight: lighten($curriculum-6-doyle, 20%);

$curriculum-7-lamb: #dc4745;
$curriculum-7-highlight: lighten($curriculum-7-lamb, 40%);

$transparent-white: rgba(255,255,255,0.15);

$nav-introduction: #5f6062;
$nav-early-childhood: #79dbb7;
$nav-elementary: #5dbf9c;
$nav-intermediate: #79dbb7;
$nav-secondary: #5dbf9c;
$nav-post-secondary: #79dbb7;
$nav-no-download: $nav-post-secondary;
$nav-download: #4eb9ff;

/******************************************************************
Site Name: Honoring Tribal Legacies
Author: Aaron Montoya

Stylesheet: Typography
******************************************************************/

/*********************
FONT FACE
*********************/

// base font stacks
$sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif;
$serif: "Georgia", Cambria, Times New Roman, Times, serif;

$pt-serif: 'PT Serif', $serif;
$pt-serif-caption: 'PT Serif Caption', $serif;
$pt-sans: 'PT Sans', $sans-serif;
$pt-sans-narrow: 'PT Sans Narrow', $sans-serif;
$narrow: 'Yanone Kaffeesatz', $sans-serif;
$source-sans-pro: 'Source Sans Pro', $sans-serif;
$adobe-garamond-pro: 'adobe-garamond-pro', $serif;

/*
typographical defaults
*/
p {
  // turning off hyphenation
  -webkit-hyphens: none;
     -moz-hyphens: none;
          hyphens: none;

  // enabling fancy ligatures when available
  -webkit-font-feature-settings: "liga", "dlig";
   -moz-font-feature-settings: "liga=1, dlig=1";
      -ms-font-feature-settings: "liga", "dlig";
       -o-font-feature-settings: "liga", "dlig";
          font-feature-settings: "liga", "dlig";
}

/******************************************************************
Site Name: Honoring Tribal Legacies
Author: Aaron Montoya

Stylesheet: Button Styles
******************************************************************/

/*********************
BUTTON DEFAULTS
*********************/

%btn {
  display: inline-block;
  position: relative;
  font-family: $sans-serif;
  text-decoration: none;
  color: $white;
  font-size: 0.9em;
  font-size: 34px;
  line-height: 34px;
  font-weight: normal;
  padding: 0 24px;
  border-radius: 4px;
  border: 0;
  cursor: pointer;
  @include transition(background-color 0.14s ease-in-out);

  // hovering on the btn
  &:hover, &:focus {
    color: $white;
    text-decoration: none;
  } // end hover

  // clicking on the button
  &:active {
    top: 1px; // adds a tiny hop to the click
  } // end active

} // end .button

/******************************************************************
Site Name: Honoring Tribal Legacies
Author: Aaron Montoya

Stylesheet: Form Styles
******************************************************************/

/*********************
INPUTS
*********************/

// setting up defaults
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
select,
textarea,
.field
{
  background-color: $white-dark;
  @include transition(background-color 0.24s ease-in-out);
  border: 0;
  border-radius: 3px;
  box-shadow: 0 3px 0 0 $black-darker;
  color: $black-darker;
  display: block;
  font-family: $source-sans-pro;
  font-size: 1em;
  height: 40px;
  line-height: 40px;
  margin-top: 3px;
  max-width: 700px;
  padding: 9px 15px;
  vertical-align: middle;
  width: 100%;

  // a focused input (or hovered on)
  &:focus,
  &:active
  {
    background-color: lighten($white-dark, 3%);
  }
  // end hover or focus

  // error notification
  &.error,
  &.is-invalid
  {
    color: $alert-red;
    border-color: $alert-red;
    background-color: $white;
    background-position:99% center;
    background-repeat: no-repeat;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo2NDM0NDREQkYwNEIxMUUyOTI4REZGQTEzMzA2MDcyNiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo2NDM0NDREQ0YwNEIxMUUyOTI4REZGQTEzMzA2MDcyNiI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjQ3ODRGRkE2RjA0QTExRTI5MjhERkZBMTMzMDYwNzI2IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjY0MzQ0NERBRjA0QjExRTI5MjhERkZBMTMzMDYwNzI2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+U8iT5wAAAedJREFUeNqk1U9I02Ecx/HtV3aIFAc1hcRDUoGXRAq0oNLA2CrsEFmHbikZu0iQYIFGYAiegkCpLipBxPpDEBMUzB0EhSG2LhG7hMR2GviPgUTvB57Bw8P3+U23B16HPX8+e/b8nt93wezZSMCnhXETF3AcB5BDCnH8Dq98ExcGHcFn8Ah3cdDni+fxnPDv9oAnTB7CKu6VCFXtChZy56LxUjt+jfuB8toSOth9wd7xWAWhqrUjYR/FRTwWJm+iIPT/w7bQf5ljiZnBg45dtKFX6H+LU8gIY8OEV6vgTkStwXWE8BPTGDHGPqNPz2mCfSOOYkA99TvCt1bhGPL68zMcwmncMuape10jrI+q4BbHi/FLn31S9z2x5tRhTc+1W506ipM+T3oRD4X+8+qtc4SqFvL0z/Fr14S+Szjis8bz9Lvvaq8cwS/wwGfdlqfPSWqTiFlX77o13u9Ym1PBs8JAytpRoy44X9Ft9E/gvbA+rYKn8NcaaMVc8UHgBw4b9/iqUQZ6hOAJFbyDcUflmsEX4a6+wTtHGfhAIUqa1U29Zc2BytouThD8x6xuN5CtMPi2CrXLZkZf/HyZoRFCP7n+QVR4PV7uI/AjGghN7OU/r1ilnqILtfpNC+o6vIFljBKYlhb/F2AAgaBsWR5wRiIAAAAASUVORK5CYII=);
    outline-color: $alert-red;
  }
  // end invalid input

  // success notification
  &.success,
  &.is-valid
  {
    color: $alert-green;
    border-color: $alert-green;
    background-color: $white;
    background-position:99% center;
    background-repeat: no-repeat;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo2NDM0NDRERkYwNEIxMUUyOTI4REZGQTEzMzA2MDcyNiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo2NDM0NDRFMEYwNEIxMUUyOTI4REZGQTEzMzA2MDcyNiI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjY0MzQ0NERERjA0QjExRTI5MjhERkZBMTMzMDYwNzI2IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjY0MzQ0NERFRjA0QjExRTI5MjhERkZBMTMzMDYwNzI2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+7olkTQAAAfhJREFUeNqklU9oE0EUhzdroWjw0tBeWlDxkEaIp55TsCU9VKIgCrHBelA8CQ1Kr1WPbZrQ3gqtQqvGqxpQc2jBk6BIIaAGD4qNCKURpDSKiPi98gLDsJt//uBjsztvfnk7895sIPAw6/joGMThFJyAXn2+A+9gA57/TaY/eU0OeBgfhGm4DiGnsb7DAszxBz/NAdcKjMJLuNWCqagHbsscN5+L+hmH4QkMOe1L5jzFfNA2PgT34ajTuY7AGuZB0/hmh5m+gS0r8xv1zRvg+gGCHZiOwnF4DP3iB3sQkYxPd2C6CWfhB9Xwlus5+K1j4jXuaq3a+gM1H9OPcAa+7q9lPidZJqHbiIm7Wg22rsEI7FrPSzAMX/T+ADyAKSsu7Fr1KplehLvwCs5DvfBf65p+MypqRbO1FXK9utH4/QKuaqYTsG3E3INJv00Q46px3+XxanJ/Ute2/vqP4FKDza2KcdljIKdnhS0xXYULTaqmLMZFn8FFSFtvt6x70ExFCS5oUXspq2ssa7oEl1swFa+CGFdgtkHgPDyDKy02zyxNU6lXRUZb1EuHYayNNs+Yh5B0WQo+/8fpJnNTZFuzz2OpjoQ2QruSOQlMy35fEGmEGMxY9e1brxobw7TkWA1h6xfckUPb+JhGoE/Hpfvew7qUld/H9J8AAwDpw3WYrxcZ3QAAAABJRU5ErkJggg==);
    outline-color: $alert-green;
  }
  // end valid input

}
// end input defaults

// spacing out the password
input[type="password"] {
  letter-spacing: 0.3em;
}

// textareas
textarea {
  line-height: 1.5em;
  max-width: 100%;
  min-height: 120px;
}

// submits
input[type="submit"] {
  background-color: $black-dark;
  @include transition(background-color 0.24s ease-in-out);
  border: none;
  border-radius: 3px;
  box-shadow: 0 3px 0 0 $black-darker;
  color: $white;
  display: block;
  font-size: 1.125em;
  margin: 27px auto 0;
  padding: 9px 18px;
  text-transform: uppercase;
}

// message styling

div.wpcf7 img.ajax-loader {
  border: none;
  vertical-align: middle;
  margin-top: -60px;
}

span.wpcf7-form {
  margin: 9px 0 0;
}

span.wpcf7-not-valid-tip {
  background-color: $red;
  border-radius: 3px;
  color: $white;
  display: inline-block;
  margin: 3px 0 0;
  padding: 9px;
  text-transform: none;
}

div.wpcf7-response-output {
  border: 3px solid $white-dark;
  border-radius: 3px;
  line-height: 1.25;
  font-size: 1.125em;
  margin: 18px 9px;
  padding: 9px;
}

div.wpcf7-validation-errors {
  border-color: $yellow;
}

.wpcf7-form {
  font-family: $source-sans-pro;

  p {
    font-size: 1.125em;
    margin: 9px 9px 0;
    text-align: left;
    text-transform: uppercase;
  }
}

/******************************************************************
Site Name: Honoring Tribal Legacies
Author: Aaron Montoya

Stylesheet: Base Mobile Stylesheet
******************************************************************/

/*********************
GENERAL STYLES
*********************/

body {
  background-color: $gray;
  color: $text-color;
  font-family: $pt-serif;
  font-size: 100%;
  -webkit-font-smoothing: antialiased;
}

.hide {
  display: none;
}

.debug {
  background: rgba(0,0,0,0.8);
  color: white;
  display: block;
  margin: 36px 0 0;
  position: relative;
  z-index: 999;
}

/*********************
LAYOUT & GRID STYLES
*********************/

.wrap {
  margin: 0 auto;
  width: 100%;
}

.container {
  margin: 50px auto 0;
  max-width: 1250px;
  overflow: hidden;
}

/*********************
LINK STYLES
*********************/

a, a:visited {
  color: $color-nav-author-link;

  /* mobile tap color */
  &:link {
    /*
    This highlights links on iPhones/iPads;
    it basically works like the :hover selector for mobile devices.
    */
    -webkit-tap-highlight-color: rgba(0,0,0,0.3);
  }
}

/******************************************************************
H1, H2, H3, H4, H5 STYLES
******************************************************************/

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5
{
  font-weight: 500;
  text-rendering: optimizelegibility;

  /* removing text decoration from all headline links */
  a {
    text-decoration: none;
  }
}

h1, .h1 {
  font-size: 1.75em;
  line-height: 1.25em;
}

h2, .h2 {
  font-size: 1.5em;
  line-height: 1.25em;
}

h3, .h3 {
  color: $black;
  font-size: 1.5em;
}

h4, .h4 {
  font-size: 1.5em;
  font-weight: 700;
}

h5, .h5 {
  color: $black;
  font-family: $source-sans-pro;
  font-size: 1.06125em;
  letter-spacing: 1px;
  line-height: 1;
  margin: 9px 0 0;
  text-align: center;
  text-transform: uppercase;
}

/*********************
HEADER STYLES
*********************/

.logo-type {
  font-family: $narrow;
  font-size: 2em;
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1;
  margin: 0;

  a {
    color: $white;
    line-height: 1;
    text-decoration: none;
  }
}

.icon-menu {
  background: $menu;
  border-radius: 3px;
  box-shadow: 0 1px 0 0 $black-darker;
  color: $white;
  cursor: pointer;
  display: block;
  font-size: 0.8em; 
  font-family: $sans-serif;
  font-weight: 900;
  padding: 9px;
  text-align: center;
  transition: all 1s;
  width: 56px;
}

.icon-menu-active {
  background: $menu-active;
  overflow: hidden;
  transition: all 1s;
}

.header {
  background: $black-dark;
  box-shadow: 0 9px 18px 9px rgba( 0,
  0,
  0,
  .33 );
  box-shadow-left: 0;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 100;
}

.header-items {
  background-color: $black;
  margin: 0 auto;
  max-width: 1250px;
  padding: 9px;

  & > a {
    display: inline-block;
  }

  li {
    display: inline-block;
    margin-left: 9px;
    vertical-align: middle;

    &:first-of-type {
      margin: 0;
    }

    &:nth-of-type(3),
  &:last-of-type {
      display: none;
    }
  }
}

.clearfix {
  clear: both;
}

#toggle-nav {
  display: none;
  float: left;
  margin-left: 22px;
  margin-top: 40px;
  opacity: 1;
  z-index: 999;
}

/*********************
POSTS & CONTENT STYLES
*********************/

/* entry content */
.entry-content {
  padding: 0 9px 90px;

  a {
    color: $black-dark;
    font-weight: bold;
    word-break: break-word;
    word-wrap: break-word;
  }

  audio,
    video
  {
    margin-top: 9px;
    max-height: 500px;
    max-width: 100%;
    width: 100%;
  }

  p {
    color: $black-darker;
    font-size: 1em;
    line-height: 1.675;
    margin: 0;
  }

  sup {
    border-radius: 0.25em;
    padding: 0.25em 0.5em;
  }

  h1,
    h2,
    h3,
    h4
  {
    color: $black;
    font-family: $source-sans-pro;
    line-height: 1;
    margin: 0;
    letter-spacing: -.025em;
  }

  h1 {
    font-size: 1.5em;
    font-weight: 600;
    margin-top: 45px;
    text-transform: uppercase;
  }

  h2,
    h4
  {
    font-style: italic;
  }

  h2 {
    line-height: 1.25;
  }

  h3,
    h4
  {
    font-weight: 500;
    line-height: 1.25;
  }

  p + h4 {
    margin: 27px 0 0;
  }

  .quote-end + h1 {
    margin-top: 90px;
  }

  h2,
    h3,
    h4
  {
    margin-top: 36px;
  }

  h1 + h1,
    h1 + h2,
    h1 + h3,
    h1 + h4,
    h2 + h2,
    h2 + h3,
    h2 + h4,
    h3 + h3,
    h3 + h4
  {
    margin-top: 18px;
  }

  iframe {
    height: 250px;
    margin: 30px 0 0;
    width: 100%;
  }

  img,
    svg
  {
    display: block;
    height: auto;
    margin: 9px auto 0;
    max-height: 500px;
    max-width: 100%;
  }

  p,
    ol,
    ul,
    div + ol,
    div + ul,
    h1 + ol,
    h2 + ol,
    h3 + ol,
    h4 + ol,
    h1 + ul,
    h2 + ul,
    h3 + ul,
    h4 + ul
  {
    margin-top: 27px;
  }

  p + p {
    margin-top: 9px;
  }

  ol {
    list-style-type: decimal;
  }

  ol ol {
    list-style-type: lower-alpha;
    margin: 9px 0;
  }

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

  ol.olist-alpha {
    list-style-type: lower-alpha;
  }

  ol,
    ul
  {
    color: $black-darker;
    line-height: 1.675;
    list-style-type: disc;
    margin: 0;
    padding: 0 0 0 27px;

    li {
      p {
        margin-top: 0.25em;
      }
    }

    img {
      margin: 18px 0 0;
    }

    img,
      .container-table
    {
      & + li {
        margin-top: 27px;
      }
    }

    ul,
      ol
    {
      li {
        font-size: 1em;

        p {
          font-size: 1em;
        }
      }
    }
  }

  p + ol,
    p + ul,
    ul + ol,
    ol + ul
  {
    margin-top: 9px;
  }

  ul ul {
    li {
      list-style-position: outside;
      list-style-type: circle;

      p {
        font-size: inherit;
      }
    }
  }

  td ul:first-child {
    margin-top: 0;
  }

  div.caption + li {
    margin-top: 27px;
  }

  table {
    border: 1px solid $black-dark;
    color: $black-dark;
    margin: 27px 0 0;

    caption {
      color: $meta-gray;
      font-size: 0.75em;
      letter-spacing: 1px;
      margin: 0 0 7px;
      text-transform: uppercase;
    }
  }

  tr {
    border-top: 1px solid $black-dark;

    &:first-of-type {
      border-top: 0;
    }
  }

  td {
    border-left: 1px solid $black-dark;
    border-bottom: 1px solid $black-dark;
    line-height: 1.5;
    min-width: 30%;
    padding: 9px;
  }

  td.empty {
    min-width: 100px;
  }

  th {
    border-bottom: 1px solid $black-dark;
    border-left: 1px solid $black-dark;
    font-family: $sans-serif;
    font-weight: 600;
    line-height: 1.5;
    padding: 9px;
    text-align: left;
    text-transform: uppercase;
    vertical-align: top;
  }

  .container-curriculum-section-open {
    background: $black;
    margin: 90px -9px 0;
    padding: 3em 9px 1em;

    svg {
      display: block;
      margin: 90px auto;
      width: 51%;
    }

    h1,
      h2
    {
      color: $white;
      font-family: $source-sans-pro;
      font-size: 1.875em;
      font-weight: 500;
      line-height: 1;
      letter-spacing: 0.0125em;
      margin: 0;
      padding-top: 0.25em;
    }

    h1 {
      text-transform: uppercase;
    }

    h2 {
      font-style: italic;
      letter-spacing: -0.025em;
      text-transform: uppercase;
    }

    h1 + h1,
      h1 + h2,
      h3 + h3,
      h3 + h4,
      h4 + h4 {
      margin-top: 0.25em;
    }

    h3,
      h4
    {
      color: $white;
      font-family: $pt-sans-narrow;
      font-size: 1.675em;
      font-style: normal;
      font-weight: 600;
      letter-spacing: -0.025em;
      line-height: 1.125;
      margin: 0;
    }

    h4 {
      font-weight: 500;
    }

    .category-tags li {
      border-color: $white;
      color: $white;
    }
  }

  .copy-green {
    color: green;
    font-weight: 600;
  }

  .copy-red {
    color: red;
    font-weight: 600;
  }

  .curriculum-download {
    margin-top: 99px;
    
    a {
      background-color: $black;
      border-radius: 9px;
      box-shadow: 0 15px 25px -15px $black-dark;
      color: $white;
      display: inline-block;
      margin-top: 36px;
      max-width: 350px;
      padding: 18px;
      text-decoration: none;

      p {
        color: $white;
        font-family: $source-sans-pro;
        line-height: 1;
        margin: 0;

        &:first-of-type {
          text-transform: uppercase;
        }

        &:nth-child(2) {
          border-top: 1px dotted $white;
          margin-top: 9px;
          padding-top: 9px;
        }
      }
    }
  }

  .icon-honey-inside-activity,
    .icon-honey-outside-activity
  {
    float: left;
    height: 50px;
    position: relative;
    width: auto;

    & + h3 {
      margin-left: 54px;

      & + h4 {
        margin-top: 27px;
      }
    }
  }

  .icon-honey-inside-activity {
    top: 26px;
  }

  .icon-honey-outside-activity {
    top: 15px;
  }

  .svg-sacred-hoop {
    height: 100%;
    min-height: 272px;
  }

  .sxwiwis {
    padding: 0;
  }

  .table-responsive {
    tbody,
  thead {
      display: inline-block;

      &:last-of-type {
        td,
  th {
          &:last-child {
            border-bottom: 0;
          }
        }
      }
    }

    thead {
      td,
  th {
        border-left: 0;
      }
    }

    tr {
      display: inline-block;
      width: 100%;

      td,
  th {
        display: block;
      }
    }

    & + .table-responsive {
      border-top: 0;
      margin-top: 0;
    }
  }

  .table-responsive-constrain-col-1 {
    max-width: 150px;
  }

  .table-responsive-height-cell-1 {
    line-height: 1.5;
  }

  .table-responsive-height-cell-2 {
    line-height: 1.5;
  }

  .table-responsive-height-cell-3 {
    line-height: 3;
  }

  .quote-begin,
    .quote-end
  {
    background: $black;
    border-radius: 60px;
    color: $white;
    font-family: $adobe-garamond-pro;
    font-size: 60px;
    font-weight: bold;
    height: 60px;
    line-height: 1.5;
    margin: 60px auto 0;
    text-align: center;
    width: 60px;

    &::before {
      content: '\201C';
    }
  }

  .quote-end {
    margin: 18px auto 0;

    &::before {
      content: '\201D';
    }
  }

  .quote,
    .callout
  {
    margin-top: 18px;

    p {
      color: $black;
      font-family: $source-sans-pro;
      font-size: 2.25em;
      font-style: italic;
      font-weight: 300;
      letter-spacing: -0.0325em;
      line-height: 0.75;
      max-width: 100%;
      margin: 15px 0;

      &:first-of-type {
        margin: 0;
      }
    }
  }

  .quote-citation {
    line-height: 1.1875;
    font-family: $source-sans-pro;
  }

  .callout {
    border-bottom: $black-dark 15px solid;
    margin: 1.5em 0 0;
    padding: 0.75em 0 1em;

    p {
      color: inherit;
      font-style: normal;
      margin: 0.5em 0 0;
    }
  }

  .callout + p {
    color: $black-darker;
    font-family: $source-sans-pro;
    font-weight: 300;
    margin: 0.5em 0 0;
  }

  dd {
    color: #787878;
    font-size: 0.9em;
    margin-bottom: 1.5em;
    margin-left: 0;
  }

  .size-auto,
    .size-full,
    .size-large,
    .size-medium,
    .size-thumbnail
  {
    max-width: 100%;
    height: auto;
  }

  pre {
    background: $black;
    border-radius: 3px;
    color: $light-gray;
    font-size: 0.9em;
    margin: 0 0 1.5em;
    padding: 1.5em;
  }

}
/* end .entry-content */

#content {
  background: $white;
}


/* Customization of elements according to author */
.container-curriculum-1-rose-honey {
  .container-curriculum-open {
    background: url(http://honoringtriballegacies.com/wp-content/uploads/2014/12/1-rose-honey-1-open.jpg);
    background-position: 0 0;
    background-size: cover;
  }

  .container-curriculum-toc {
    ul li {
      &:nth-child(5) a {
        max-width: 180px;
      }
    }
  }

  a,
    h1,
    h2,
    h3,
    h4,
    .quote p,
    .icon-pdf h2,
    .callout,
    .icon-learning-episode div h2,
    .icon-learning-episode div h3,
    .icon-appendix h2,
    .icon-appendix h3
  {
    color: $curriculum-1-honey;
  }

  .quote-begin,
    .icon-pdf,
    .icon-learning-episode,
    .icon-appendix,
    .container-curriculum-section-open,
    .container-curriculum-toc ul li a,
    .curriculum-download a
  {
    background-color: $curriculum-1-honey;
  }

  .copy-highlight {
    background-color: $curriculum-1-highlight;
  }

  .callout {
    border-bottom-color: $curriculum-1-honey;
  }

  .table,
    .table div,
    .icon-learning-episode div,
    .icon-pdf div
  {
    border-color: $curriculum-1-honey;
  }
}

.container-curriculum-2-ella-inglebret {
  a,
  h1,
  h2,
  h3,
  h4,
  .quote p,
  .icon-pdf div h2,
  .icon-pdf h3,
  .callout,
  .icon-learning-episode div h2,
  .icon-learning-episode div h3,
  .icon-appendix h2,
  .icon-appendix h3
  {
    color: $curriculum-2-inglebret;
  }

  .quote-begin,
  .icon-pdf,
  .icon-learning-episode,
  .container-curriculum-section-open,
  .container-curriculum-toc ul li a,
  .curriculum-download a
  {
    background-color: $curriculum-2-inglebret;
  }

  .copy-highlight {
    background-color: $curriculum-2-highlight;
  }

  .container-curriculum-open {
    background: url(http://honoringtriballegacies.com/wp-content/uploads/2014/12/0-open.jpg);
    background-position: 50% 50%;
    background-size: cover;

    h1 {
      max-width: 8em;
    }
  }

  .container-curriculum-toc {
    ol li {
      &:first-child h3 {
        max-width: 140px;
      }

      &:nth-child(2) h3 {
        max-width: 170px;
      }

      &:nth-child(3) h3 {
        max-width: 180px;
      }

      &:nth-child(4) h3 {
        max-width: 170px;
      }
    }

    ul li {
      &:last-child a {
        max-width: 200px;
      }
    }
  }
  
  .table,
  .table div,
  .icon-learning-episode div,
  .icon-pdf div
  {
    border-color: $curriculum-2-inglebret;
  }
}

.container-curriculum-3-shana-brown {
  .container-curriculum-open {
    background: url(http://honoringtriballegacies.com/wp-content/uploads/2014/12/3-shana-brown-1-open.jpg);
    background-position: 50% 100%;
    background-size: cover;
  }

  .container-curriculum-toc {
    ol li {
      &:first-child h2 {
        max-width: 190px;
      }

      &:nth-child(2) h3 {
        max-width: 160px;
      }

      &:nth-child(3) h2,
  h3 {
        max-width: 190px;
      }

      &:nth-child(4) h2 {
        max-width: 250px;
      }

      &:nth-child(5) h2 {
        max-width: 210px;
      }
    }
  }

  a,
  h1,
  h2,
  h3,
  h4,
  .quote,
  .icon-pdf h2,
  .callout,
  .icon-learning-episode div h2,
  .icon-learning-episode div h3,
  .icon-appendix h2,
  .icon-appendix h3,
  .category-tags li
  {
    color: $curriculum-3-brown;
  }

  .quote-begin,
  .icon-pdf,
  .icon-learning-episode,
  .icon-appendix,
  .container-curriculum-section-open,
  .container-curriculum-toc ul li a,
  .curriculum-download a
  {
    background-color: $curriculum-3-brown;
  }

  .copy-highlight {
    background-color: $curriculum-3-highlight;
  }

  .callout {
    border-bottom-color: $curriculum-3-brown;
  }

  .table,
  .table div,
  .category-tags li,
  .icon-learning-episode div,
  .icon-pdf div
  {
    border-color: $curriculum-3-brown;
  }
}

.container-curriculum-4-carol-buswell {
  a,
  h1,
  h2,
  h3,
  .quote,
  .icon-pdf div h2,
  .icon-pdf div h3,
  .callout,
  .icon-learning-episode div h2,
  .icon-learning-episode div h3
  {
    color: $curriculum-4-buswell;
  }

  .quote-begin,
  .icon-pdf,
  .icon-learning-episode,
  .container-curriculum-section-open,
  .container-curriculum-toc ul li a,
  .curriculum-download a
  {
    background-color: $curriculum-4-buswell;
  }

  .copy-highlight {
    background-color: $curriculum-4-highlight;
  }

  .callout {
    border-bottom-color: $curriculum-4-buswell;
  }

  .container-curriculum-open {
    background: url(http://honoringtriballegacies.com/wp-content/uploads/2014/12/4-carol-buswell-0-open.jpg);
    background-position: 50% 100%;
    background-size: cover;
  }

  .container-curriculum-toc {
    ol li {
      &:nth-child(2) h2 {
        max-width: 190px;
      }

      &:nth-child(3) h2 {
        max-width: 180px;
      }

      &:nth-child(4) h2 {
        max-width: 210px;
      }

      &:nth-child(7) h2 {
        max-width: 180px;
      }

      &:nth-child(8) h2 {
        max-width: 180px;
      }

      &:nth-child(10) h2 {
        max-width: 180px;
      }
      
    }

    ul:first-of-type {
      li {
        &:nth-child(6) a {
          max-width: 220px;
        }
      }
    }

    ul:nth-of-type(2) {
      li {
        &:nth-child(2) a {
          max-width: 220px;
        }

        &:nth-child(3) a {
          max-width: 200px;
        }
      }
    }
  }

  .table,
  .table div,
  .category-tags li,
  .icon-learning-episode div,
  .icon-pdf div
  {
    border-color: $curriculum-4-buswell;
  }
}

.container-curriculum-5-julie-cajune {
  .container-curriculum-open {
    background: url(http://honoringtriballegacies.com/wp-content/uploads/2015/02/5-julie-cajune-1-open.jpg);
    background-size: cover;
    background-position: 50% 15%;

    .icon-avatar-empty {
      background-color: $curriculum-5-cajune;
    }
  }

  .container-curriculum-toc {
    ul:first-of-type {
      li:first-child a {
        max-width: 210px;
      }

      li:nth-child(6) a {
        max-width: 220px;
      }
    }
  }

  a,
  h1,
  h2,
  h3,
  h4,
  .quote,
  .icon-pdf h2,
  .callout,
  .icon-learning-episode div h2,
  .icon-learning-episode div h3,
  .icon-appendix h2,
  .icon-appendix h3,
  .category-tags li
  {
    color: $curriculum-5-cajune;
  }

  .quote-begin,
  .icon-pdf,
  .icon-learning-episode,
  .icon-appendix,
  .container-curriculum-section-open,
  .container-curriculum-toc ul li a,
  .curriculum-download a
  {
    background-color: $curriculum-5-cajune;
  }

  .copy-highlight {
    background-color: $curriculum-5-highlight;
  }

  .callout {
    border-bottom-color: $curriculum-5-cajune;
  }

  .table,
  .table div,
  .category-tags li,
  .icon-learning-episode div
  {
    border-color: $curriculum-5-cajune;
  }

  .table div p:first-of-type {
    color: $curriculum-5-cajune;
    font-style: italic;
  }
}

.container-curriculum-6-shane-doyle {
  .container-curriculum-open {
    background: url(http://honoringtriballegacies.com/wp-content/uploads/2014/12/6-shane-doyle-1-open.jpg);
    background-position: 50% 100%;
    background-size: cover;

    .icon-avatar-empty {
      background-color: $curriculum-6-doyle;
    }
  }

  a,
  h1,
  h2,
  h3,
  h4,
  .quote,
  .icon-pdf h2,
  .callout,
  .icon-learning-episode div h2,
  .icon-learning-episode div h3,
  .icon-appendix h2,
  .icon-appendix h3,
  .category-tags li
  {
    color: $curriculum-6-doyle;
  }

  .quote-begin,
  .icon-pdf,
  .icon-learning-episode,
  .icon-appendix,
  .container-curriculum-section-open,
  .container-curriculum-toc ul li a,
  .curriculum-download a
  {
    background-color: $curriculum-6-doyle;
  }

  .copy-highlight {
    background-color: $curriculum-6-highlight;
  }

  .callout {
    border-bottom-color: $curriculum-6-doyle;
  }

  .table,
  .table div,
  .category-tags li,
  .icon-learning-episode div
  {
    border-color: $curriculum-6-doyle;
  }

  .table div p:first-of-type {
    color: $curriculum-6-doyle;
    font-style: italic;
  }
}

.container-curriculum-7-carmelita-lamb {
  .container-curriculum-open {
    background: url(http://honoringtriballegacies.com/wp-content/uploads/2014/12/7-carmelita-lamb-0-open.jpg);
    background-position: 50% 100%;
    background-size: cover;
  }

  .container-curriculum-toc {
    ol:nth-of-type(2) {
      li:first-child h2 {
        max-width: 180px;
      }

      li:nth-child(4) h2 {
        max-width: 180px;
      }
    }
  }

  a,
  h1,
  h2,
  h3,
  h4,
  .quote,
  .icon-pdf h2,
  .callout,
  .icon-learning-episode div h2,
  .icon-learning-episode div h3,
  .icon-appendix h2,
  .icon-appendix h3
  {
    color: $curriculum-7-lamb;
  }

  .quote-begin,
  .icon-pdf,
  .icon-learning-episode,
  .icon-appendix,
  .container-curriculum-section-open,
  .container-curriculum-toc ul li a,
  .curriculum-download a
  {
    background-color: $curriculum-7-lamb;
  }

  .copy-highlight {
    background-color: $curriculum-7-highlight;
  }

  .callout {
    border-bottom-color: $curriculum-7-lamb;
  }

  .table,
  .table div,
  .category-tags li,
  .icon-learning-episode div,
  .icon-pdf div,
  .icon-appendix div
  {
    border-color: $curriculum-7-lamb;
  }
}

.container-curriculum-open {
  background-position: 0 0;
  background-size: cover;
  margin: 0 -9px;
  margin-bottom: -90px;
  padding: 9px;
  padding-bottom: 30px;
  padding-top: 30px;

  a,
  h1,
  h2
  {
    color: $white;
    font-family: $pt-sans-narrow;
    letter-spacing: -.025em;
    line-height: 1.125;
    margin: 0;
    text-shadow: 1px 3px 5px $black-dark;
    text-transform: none;
  }

  h1 {
    font-size: 2.5em;
    font-weight: bold;
  }

  h2 {
    font-size: 2em;
    font-style: normal;
    font-weight: normal;
    margin: 0.25em 0 0;
  }

  div {
    background: rgba(0,0,0,0.6);
    box-shadow: 1px 3px 5px rgba(0,0,0,0.5);
    margin-top: 60px;
  }

  ul {
    list-style-type: none;
    margin: 0;
    margin-top: 54px;
    padding: 0;

    & > li {
      font-size: initial;
    }

    li {
      margin: 15px 0 0;
      position: relative;

      a {
        display: inline-block;
        font-weight: 400;
        font-size: 1.8em;
        margin: 15px 0 0 9px;
        position: absolute;
        text-decoration: none;
      }

      img,
      .icon-avatar-empty
      {
        border-radius: 60px;
        box-shadow: 1px 3px 5px rgba(0,0,0,0.5);
        display: inline-block;
        height: 60px;
        width: 60px;
        margin: 0;

        &:nth-of-type(2) {
          clear: both;
        }
      }

      .icon-avatar-empty {
        background: $black;
        box-shadow: 5px 5px 15px rgba(0,0,0,0.5) inset;
    -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
        text-align: center;
        font-size: 32px;
        line-height: 1em;
        line-height: 1.65;

        &:before {
          content: ": )";
          color: $white-dark;
          opacity: 0.5;
        }
      }
    }
  }

  .caption,
  .caption-with-toggle
  {
    border-radius: 3px;
    box-shadow: 1px 1px 5px -3px $black-screen-more;
  }
}

ul.category-tags {
  padding: 0          !important;
  margin: 1em 0 0       !important;
  max-width: 100%;

  & > li {
    border: 1px solid $black;
    border-radius: 100px;
    display: inline-block;
    color: $black;
    font-family: $source-sans-pro;
    font-size: 1.25em;
    font-weight: 500;
    line-height: 1;
    margin: 1em 1.5em 0 0;
    padding: 15px;

    &:last-child {
      margin: 1em 0 0;
    }
  }
}

.drop-cap {
  font-size: 5.75em;
  float: left;
  line-height: 0.8;
  margin: 0 9px 0 0;
}

.caption,
.caption-with-toggle
{
  background: $black-dark;
  font-family: $pt-serif-caption;
  font-style: italic;
  margin: 5px 0 0;
  padding: 18px;

  p {
    color: $white;
    font-size: 0.9em;
    font-weight: 400;
    line-height: 1.75;
    word-spacing: 0.075em;

    &:first-of-type {
      margin: 0;
    }
  }
}

.caption-with-toggle {
  label {
    display: block;
    float: right;
    height: 50px;
    margin-right: -39px;
    margin-top: -4px;
    position: relative;
    width: 40px;
  }

  p {
    height: 50px;
    overflow: hidden;
    margin: 0;
  }

  &::before {
    color: white;
    content: '+';
    float: right;
    font-family: "Source Sans Pro";
    font-size: 5em;
    font-weight: 900;
    line-height: 0;
    padding: 0.27em 0;
  }
}

table.days-of-week {
  border: 0;
  width: 100%;

  p {
    margin: 0;
  }

  p,
  ol li,
  ul li
  {
    font-size: inherit;
  }

  td,
  th,
  tr
  {
    border: 0;
  }
  
  th {

    padding: 0;
    padding-top: 9px;
    width: 1px;

    &::before {
      background-color: $curriculum-3-brown;
      border-radius: 3px;
      color: $white;
      display: inline-block;
      line-height: 1.75;
      text-align: center;
      width: 30px;
      height: 30px;
    }
  }

  tr:first-of-type {
    th::before {
      content: "M";
    }
  }

  tr:nth-of-type(2) {
    th::before {
      content: "T";
    }
  }

  tr:nth-of-type(3) {
    th::before {
      content: "W";
    }
  }

  tr:nth-of-type(4) {
    th::before {
      content: "R";
    }
  }

  tr:nth-of-type(5) {
    th::before {
      content: "F";
    }
  }

  .icon-pdf {
    margin: 0;
  }
}

#toggle-caption-1:checked + div[class="caption-with-toggle"],
#toggle-caption-2:checked + div[class="caption-with-toggle"],
#toggle-caption-3:checked + div[class="caption-with-toggle"],
#toggle-caption-4:checked + div[class="caption-with-toggle"],
#toggle-caption-5:checked + div[class="caption-with-toggle"],
#toggle-caption-6:checked + div[class="caption-with-toggle"]
{
  p {
    height: auto;
  }

  &::before {
    content: '–';
  }
}

#toggle-caption-1,
#toggle-caption-2,
#toggle-caption-3,
#toggle-caption-4,
#toggle-caption-5,
#toggle-caption-6
{
  display: none;
}

.icon {
  display: table;
  text-decoration: none;
}

.icon-pdf,
.icon-learning-episode,
.icon-appendix
{
  background: $black;
  border-radius: 3px;
  box-shadow: 1px 1px 5px -3px $black-screen-more;
  color: $white;
  display: table;
  font-family: $source-sans-pro;
  font-size: 1.25em;
  font-weight: 300;
  line-height: 1;
  margin: 30px 0 0;
  position: relative;
  text-decoration: none;

  &::before {
    color: $white;
    content: 'PDF';
    display: block;
    font-family: $source-sans-pro;
    font-size: inherit;
    font-weight: 300;
    line-height: 1.25;
    padding: 9px;
    word-break: normal;
  }

  div {
    background: $white;
    border: 1px solid $black;
    border-radius: 0 3px 3px 0;
    display: table-cell;
    font-size: inherit;
    line-height: 1.25;
    margin: 1px 1px 1px 40px; 
    padding: 9px;
    vertical-align: top;

    h2,
    h3
    {
      color: $black;
      font-size: inherit;
      line-height: 1.5;
      margin: 0;
    }

    h2 {
      border: 0;
      font-style: normal;
      font-weight: 600;
      padding: 0;
    }

    h3 {
      font-style: italic;
      font-weight: 500;     
      margin-top: 5px;
    }

    h2 + h3 {
      margin-top: 5px;
    }
  }
}

.icon-pdf-indent {
  display: table;
  margin-left: 54px;  
}

.icon-pdf-list-1-constraints {
  a:nth-of-type(1) {
    h3 {
      max-width: 7em;
    }
  }

  a:nth-of-type(2) {
    h3 {
      max-width: 7em;
    }
  }

  a:nth-of-type(3) {
    h3 {
      max-width: 11.75em;
    }
  }

  a:nth-of-type(4) {
    h3 {
      max-width: 11.75em;
    }
  }

  a:nth-of-type(5) {
    h3 {
      max-width: 6.15em;
    }
  }

  a:last-child {
    h3 {
      max-width: 6.75em;
    }   
  }
}

.icon-pdf-list-1-constraints h3:nth-of-type(2) {
  max-width: 10em;
}

.icon-learning-episode::before {
  content: counter(learning-episode);
  counter-increment: learning-episode;
}


.icon-appendix {
  &:before {
    content: counter(appendix,upper-alpha);
    counter-increment: appendix;
  }
}

svg.icon-app-store,
img.icon-app-store
{
  height: 60px;
  margin: 9px 18px 0 0;
  width: auto;  
}

.tighten-1 {
  max-width: 10em;
}

.tighten-2,
.tighten-3,
.tighten-4
{
  max-width: 8em;
}

.tighten-5 {
  max-width: 9em;
}

.tighten-6 {
  max-width: 7em;
}

.table-key {
  display: none;
}

.container-table {
  div[class="container-table-row"]:first-of-type {
    div[class*="table-key"] {
      display: block;
      font-style: italic;
    }
  }
}

.table {
  border: 1px solid $black;
  border-radius: 0.5em;
  margin: 2em 0 0 0;
  padding: 1.5em;

  h3 {
    margin: 0;
  }

  div {
    border-top: 1px solid $black;
    margin: 1em 0 0;
    padding: 1em 0 0;

    p {
      margin: 0.33em 0 0;
    }

    ul,
    ol
    {
      padding: 0 0 0 20px;
      margin: 0;

      li {
        font-size: 1em;
      }
    }

    &:first-child {
      border: 0;
      margin: 0;
      padding: 0;
    }
  }
}

.copy-highlight {
  background: $black;
  color: $black-darker;
  margin: 45px 0 0;
  padding: 3em 2em;

  h1 {
    color: inherit;
    font-family: $pt-serif;
    font-style: italic;
    font-weight: normal;
    margin: 0;
    text-transform: initial;

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

  h5 {
    color: inherit;
    font-size: 1.125em;
    font-style: italic;
    letter-spacing: 0;
    margin: 0.5em 0 0;
    text-transform: initial;
  }

  p:first-of-type {
    margin: 0;
  }

  h5 + p:first-of-type,
  h1 + p:first-of-type
  {
    margin-top: 1.5em;
  }
}

.copy-highlight + ul,
.copy-highlight + p,
.copy-highlight + li
{
  margin-top: 45px;
}

.footnote-indicator-white,
.footnote-indicator-black
{
  font-weight: 900;
}

.footnote-indicator-white {
  background: rgba(255,255,255,0.25);
}

.footnote-indicator-black {
  background: rgba(0,0,0,0.25);
  color: $white;
}

div[class="footnote"] {
  background: rgba(255,255,255,0.75);
  color: $black-darker;
  display: none;
  line-height: 1.675;
  margin: 1em 0 0;
  padding: 1em;
}

#toggle-footnote-1,
#toggle-footnote-2,
#toggle-footnote-3,
#toggle-footnote-4,
#toggle-footnote-5,
#toggle-footnote-6,
#toggle-footnote-7,
#toggle-footnote-8,
#toggle-footnote-9,
#toggle-footnote-10,
#toggle-footnote-11,
#toggle-footnote-12
{
  display: none;
}

#toggle-footnote-1:checked + div,
#toggle-footnote-2:checked + div,
#toggle-footnote-3:checked + div,
#toggle-footnote-4:checked + div,
#toggle-footnote-5:checked + div,
#toggle-footnote-6:checked + div,
#toggle-footnote-7:checked + div,
#toggle-footnote-8:checked + div,
#toggle-footnote-9:checked + div,
#toggle-footnote-10:checked + div,
#toggle-footnote-11:checked + div,
#toggle-footnote-12:checked + div
{
  display: block;
}

.container-curriculum-toc {
  a {
    text-decoration: none;
  }

  ul {
    line-height: normal;
    list-style: none;
    margin: 0;
    padding: 0;

    li {

      margin: 27px 0;

      a {
        background-color: $black;
        border-radius: 3px;
        box-shadow: 1px 1px 5px -3px $black-screen-more;
        color: $white;
        display: inline-block;
        font-family: $source-sans-pro;
        font-size: 1.25em;
        font-weight: normal;
        line-height: 1.25;
        padding: 9px;
        text-decoration: none;
      }
    }

    &:last-child {
      margin-top: 60px;
    }
  }

  p {
    border: 3px solid $curriculum-2-inglebret;
    color: $curriculum-2-inglebret;
    display: inline-block;
    font-family: $source-sans-pro;
    font-size: 1.2em;
    margin: 0;
    padding: 15px;
  }

  h2 {
    display: table;
    font-style: normal;
    font-weight: 600;
  }

  & > h2 {
    margin: 2em 0 0;
    font-size: 1.75em;
  }

  ol {
    margin: 0;
    padding: 0;
    list-style: none;
    line-height: normal;
    counter-reset: learning-episode;

    li {
      p {
        border: initial;
        display: block;
        padding: 0;
      }
    }

    a {
      color: initial;
    }
  }

  .clear-fix {
    z-index: -1;
  }
}

ol.list-appendix {
  counter-reset: appendix;

  li {
    font-size: 1em;
  }
}

/*********************
CONTRIBUTOR PAGE STYLES
*********************/

.page-contributor {
  font-size: 16px;

  h1 {
    display: block;
    color: $black-dark;
    font-size: 2.5em;
    font-family: $source-sans-pro;
    margin: 27px auto 0;
    text-align: center;
    text-transform: none;

    & + p {
      margin-top: 45px;
    }
  }

  .avatar { 
    border-radius: 999px;
    box-shadow: 1px 3px 5px 0 rgba(0,0,0,0.5);
    display: block;
    margin: 0 auto;
  }

  .color-band {
    background-color: #a9a9ab;
    display: block;
      height: 150px;
      margin: 0 -27px -75px;
  }

  .contributors-icon-anonymous {
    background: rgb(145,146,148);
    color: $black-dark;
    float: none;
    font-size: 87px;
    height: 150px;
    line-height: 1.5;
    text-align: center;
-webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    width: 150px;
  }

  .mobile-hidden {
    display: none;
  }
}

.brown {
  .color-band {
    background-color: $curriculum-3-brown;
  }
}

.buswell {
  .color-band {
    background-color: $curriculum-4-buswell;
  }
}

.cajune {
  .color-band {
    background-color: $curriculum-5-cajune;
  }
}

.doyles,
  .doylem {
  .color-band {
    background-color: $curriculum-6-doyle;
  }
}

.honey {
  .color-band {
    background-color: $curriculum-1-honey;
  }
}

.inglebret {
  .color-band {
    background-color: $curriculum-2-inglebret;
  }
}

.lamb {
  .color-band {
    background-color: $curriculum-7-lamb;
  }
}

/*********************
INTRODUCTION PAGE STYLES
*********************/

.page-introduction {
  #reveal-volume-1-chapters,
  #reveal-volume-2-chapters
  {
    display: none;
  }

  #reveal-volume-1-chapters:checked ~ a[class="icon-pdf icon-pdf-indent volume-1"],
  #reveal-volume-2-chapters:checked ~ a[class="icon-pdf icon-pdf-indent volume-2"]
  {
    clip: auto;
    position: relative;
  }

  #reveal-volume-1-chapters:checked + div label[class="lbl-show-chapters"]:after,
  #reveal-volume-2-chapters:checked + div label[class="lbl-show-chapters"]:after
  {
    background: $black-dark;
    border-radius: 3px;
    bottom: 0;
    content: "▲     Hide Chapters";
    display: block;
    left: 0;
    padding: 9px 18px;
    position: absolute;
    right: 0;
    text-align: center;
    top: 0;
    white-space: pre;
  }

  .bg-introduction {
    background-color: $black-dark;
    background-image: url(http://honoringtriballegacies.com/wp-content/themes/honoring-tribal-legacies/library/images/bg-introduction.jpg);
    background-position: center 50px;
    background-repeat: no-repeat;
    background-size: cover;
    left: 0;
    margin: auto;
    max-width: 1250px;
    position: fixed;
    text-align: center;
    top: 0;
    width: 100%;

    h1 {
      color: $white;
      font-family: $source-sans-pro;
      font-size: 2.5em;
      font-weight: bold;
      line-height: 0;
      padding: 150px 9px 300px;
      text-transform: uppercase;
      text-shadow: 1px 3px 5px $black-dark;
    }
  }

  .container-btn-access-curricula {
    display: block;
    text-align: center;

    .btn-access-curricula {
      background-color: $black-dark;
      border-radius: 3px;
      color: $white;
      display: inline-block;
      font-family: $source-sans-pro;
      font-size: 1.06125em;
      line-height: 1;
      margin: 36px auto 9px;
      padding: 9px;
      text-decoration: none;
      text-transform: uppercase;

      &:hover {
        background-color: $black;
        box-shadow: 3px 3px 6px -6px $black-dark;
      }
    }
  }

  .icon-pdf-indent {
      clip: rect(0 0 0 0);
      overflow: hidden;
      position: absolute;
  }

  .introduction-body {
    background-color: white;
    margin: 0 -9px -90px;
    padding: 0 9px 90px;
    position: relative;   

    p {
      background-color: $white;
      margin: 0 auto;

      &:first-of-type {
        margin-top: 300px;
        padding-top: 18px;
      }

      & + p {
        margin-top: 18px;
      }
    }

    .contributors-grid {
      list-style-type: none;
      margin-top: 9px;
      padding: 0;

      li {
          display: inline-block;
          margin-top: 18px;
          vertical-align: top;
          width: 49.25%;

          a {
            font-weight: 500;
          }

        img {
          border-radius: 75px;
          display: block;
          height: 75px;
          margin: 0 auto;
          padding: 0;
          width: 75px;
        }
      }
    }
  }

  .lbl-show-chapters {
    background-color: $black-dark;
    border-radius: 3px;
    box-shadow: 0 1px 0 0 $black-darker;
    color: $white;
    display: inline-block;
    font-family: $source-sans-pro;
    font-weight: 600;
    margin: 18px 0 0 54px;
    padding: 9px 18px;
    position: relative;
    text-transform: uppercase;
  }

  .width-constrain-1 {
    max-width: 281px;
  }

  .width-constrain-2 {
    max-width: 319px;
  }
}

/*********************
NAVIGATION STYLES
*********************/

nav {
  margin: auto;
  margin-top: 50px;
}

.nav {
  background: green;
  border-bottom: 0;
  color: $white;
  display: inline-block;
  margin: 0;
  width: 100%;

  li {
    display: block;
    float: none;
    font-family: $source-sans-pro;
    padding: 0 18px 45px;

    a {
      text-decoration: none;

      span {
        display: inline-block;
        padding: 0;
      }
    }

    &:nth-child(2) span {
      max-width: 220px;
    }

    &:nth-child(4) span {
      max-width: 240px;
    }

    &:nth-child(6) span {
      max-width: 250px;
    }

    &:nth-child(8) span {
      max-width: 250px;
    }

    &:nth-child(12) span {
      max-width: 230px;
    }

    &:nth-child(14) span {
      max-width: 150px;
    }
  }

  .nav-introduction {
    background-color: $nav-introduction;
  }

  .nav-early-childhood {
    background-color: $nav-early-childhood;
  }

  .nav-elementary {
    background-color: $nav-elementary;
  }

  .nav-intermediate {
    background-color: $nav-intermediate;
  }

  .nav-secondary {
    background-color: $nav-secondary;
  }

  .nav-post-secondary {
    background-color: $nav-post-secondary;
  }

  .nav-download {
    background-color: $nav-download;

    &:last-child {
      padding-bottom: 100px;
    }
  }

  .nav-no-download-section {
    background-color: $nav-no-download;
    height: 45px;
  }

} /* end .nav */

.nav-active {
  max-width: 1250px;
  position: relative;
  top: 0px;
  transition: top .6s;
  visibility: visible;

  & + .container {
    display: none;
  }
}

.nav-current {
  background-color: $black-dark;
  padding: 18px 9px 72px;

  h1 {
    color: $white;
    font-family: $source-sans-pro;
    font-size: 1.5em;
    font-weight: 300;
    margin: 36px 0 0;
  }

  & > h1:first-child {
    margin-top: 0;
  }

  ul {
    margin: 18px 0 0;

    li {
      margin: 18px 0 0;

      &:first-of-type {
        margin-top: 0;
      }

      a {
        background-color: $black-screen;
        border-radius: 3px;
        box-shadow: 3px 3px 6px -6px $black-dark;
        color: $white;
        display: inline-block;
        font-family: $source-sans-pro;
        padding: 9px;
        text-decoration: none;
      }
    }
  }

  ol {
    counter-reset: nav-curriculum-lessons-toc;

    li {
      margin-top: 18px;

      a {
        background-color: $black-screen;
        border-radius: 3px;
        box-shadow: 3px 3px 6px -6px $black-dark;
        display: inline-block;
          text-decoration: none;

        div {
          background-color: rgba(0,0,0,.18);
          border-radius: 0 3px 3px 0;
          display: inline-block;
          padding: 9px;

          h2,
          h3
          {
            color: $white;
            font-family: $source-sans-pro;
            font-size: 1em;
            line-height: 1.5;
            margin: 0;
            max-width: 230px;
          }

          h3 {
            font-style: italic;
          }
        }

        &:before {
          border-radius: 3px 0 0 3px;
          color: $white;
          content: counter(nav-curriculum-lessons-toc);
          counter-increment: nav-curriculum-lessons-toc;
          display: inline-block;
          font-family: $source-sans-pro;
          font-size: 1.125em;
          line-height: 1;
          min-width: 15px;
          padding: 9px;
          text-align: center;
          vertical-align: top;
        };
      }
    }

    & > li:first-child {
      margin-top: 0;
    }
  }

  ol:nth-of-type(2) {
    counter-reset: appendix;

    li a:before {
      content: counter(appendix,upper-alpha);
      counter-increment: appendix;
    }
  }

  ol + ul {
    margin-top: 54px;
  }

  & > div:last-child {

    a {
      background-color: $black-screen;
      border-radius: 9px;
      box-shadow: 3px 3px 6px -6px $black-dark;
      color: $white;
      display: inline-block;
      font-family: $source-sans-pro;
      margin: 9px 0 0 0;
      max-width: 260px;
      padding: 18px;      
      text-decoration: none;

      p {
        border-top: 1px dotted white;
        margin: 9px 0 0;
        padding-top: 9px;

        &:first-of-type {
          border-top: 0;
          margin-top: 0;
          padding-top: 0;
        }
      }
    }
  }
}

.nav-current-honey {
  background-color: $curriculum-1-honey;
}

.nav-current-inglebret {
  background-color: $curriculum-2-inglebret;

  ol li {
    &:first-child h3 {
      max-width: 120px;
    }

    &:nth-child(2) h3 {
      max-width: 150px;
    }

    &:nth-child(3) h3 {
      max-width: 154px;
    }

    &:nth-child(4) h3 {
      max-width: 150px;
    }

    &:nth-child(5) h3 {
      max-width: 100px;
    }
  }
}

.nav-current-brown {
  background-color: $curriculum-3-brown;

  ol li {
    &:first-child h2 {
      max-width: 160px;
    }

    &:nth-child(2) h3 {
      max-width: 140px;
    }

    &:nth-child(4) h3 {
      max-width: 200px;
    }

    &:nth-child(5) h2 {
      max-width: 170px;
    }
  }
}

.nav-current-buswell {
  background-color: $curriculum-4-buswell;

  ol li {
    &:nth-child(2) h2 {
      max-width: 160px;
    }

    &:nth-child(3) h2 {
      max-width: 150px;
    }

    &:nth-child(4) h2 {
      max-width: 170px;
    }

    &:nth-child(7) h2 {
      max-width: 130px;
    }

    &:nth-child(8) h2 {
      max-width: 150px;
    }

    &:nth-child(10) h2 {
      max-width: 150px;
    }
  }

  ul:nth-of-type(2) {
    li {
      &:nth-child(2) a {
        max-width: 180px;
      }
    }
  }
}

.nav-current-cajune {
  background-color: $curriculum-5-cajune;
}

.nav-current-doyle {
  background-color: $curriculum-6-doyle;

  ol li {
    &:nth-child(5) h2 {
      max-width: 190px;
    }

    &:nth-child(6) h2 {
      max-width: 190px;
    }

    &:nth-child(7) h2 {
      max-width: 190px;
    }

    &:nth-child(8) h2 {
      max-width: 190px;
    }
  }
}

.nav-current-lamb {
  background-color: $curriculum-7-lamb;

  ol:nth-of-type(2) {
    li:first-child h2 {
      max-width: 150px;
    }

    li:nth-child(4) h2 {
      max-width: 150px;
    }
  }
}

.nav-title {
  color: $white;
  font-size: 2em;
  font-family: $source-sans-pro;
  font-weight: 100;
  line-height: .5em;
  margin: 0;
  padding: 45px 18px;
  text-transform: uppercase;
}

.nav-top {
  max-width: 1250px;
  position: absolute;
  top: -99999px;
  visibility: hidden;
}

a.nav-description {
  background-color: $white;
  border-radius: 3px;
  box-shadow: 1.5px 3px 6px -3px $black;
  color: $black;
  display: inline-block;
  font-weight: 300;
  font-size: 1.5em;
  line-height: 1.25;
  padding: 9px;
}

.nav-authors,
.nav-authors-no-title
{
  line-height: 1;
  margin: 18px 0 0;
  padding: 0;

  li {
    display: inline-block;
    font-size: 1em;
    font-weight: 400;
    line-height: 42px;
    margin: 9px 36px 0 0;
    padding: 0;

    a {
      color: $white;

      &:hover,
      focus
      {
        color: $white-dark;
      }
    }

    div {
      display: inline-block;
    }
  }

  img {
    border-radius: 36px;
    float: left;
    height: 36px;
    margin-right: 5px;
    width: 36px;
  }

  p {
    margin-left: 48px;
    padding: 0 .5em 0 .5em;
  }
}

a.nav-border-color-honey {
  border-left: 5px solid $curriculum-1-honey;
}

a.nav-border-color-inglebret {
  border-left: 5px solid $curriculum-2-inglebret;
}

a.nav-border-color-brown {
  border-left: 5px solid $curriculum-3-brown;
}

a.nav-border-color-buswell {
  border-left: 5px solid $curriculum-4-buswell;
}

a.nav-border-color-cajune {
  border-left: 5px solid $curriculum-5-cajune;
}

a.nav-border-color-doylem,
a.nav-border-color-penniman
{
  border-left: 5px solid $curriculum-6-doyle;
}

a.nav-border-color-lamb {
  border-left: 5px solid $curriculum-7-lamb;
}

.nav-contributors {
  background: $nav-contributors;
  padding: 0 0 90px;

  .nav-title {
    color: $black;
  }

  a {
    color: $black;
    font-weight: normal;
    font-size: 1em;
    line-height: 1.5;

    .contributor-name {
      font-size: 1.25em;
    }

    img {
      border-radius: 63px;
      display: block;
      height: 63px;
      margin: auto;
      width: 63px;
    }
  }

  li {
    background: $nav-contributors;

    h3 {
      margin: 9px 0 0;
      text-align: center;
    }

    p {
      color: $black;
      font-weight: normal;
      font-size: 1em;
      line-height: 1.5;
    }

    &:first-child {
      padding: 0;
    }

    &:nth-child(2) {
      p {
        margin: 0;
      }
    }
  }
}

.nav-contributors-names a {
  float: none         !important;
  font-size: 1.5em          !important;
}

#nav-curriculum-title:before {
  content: 'curriculum';
}

#nav-curriculum-title {
  color: $black 
  margin-bottom: 45px;
  text-transform: uppercase;  
}

.nav-download-icon:before {
  content: 'PDF';
}

.nav-download-icon {
  background: $black;
  color: $white;
  float: left;
  font-size: 0.9em;
  padding: 0.3em 0.5em;

  svg {
    display: block;
    width: 32px;
    height: 32px;
    margin: auto;
  }
}

.nav-download-copy {
  margin-left: 75px;
}

.icon-anonymous {
  background: rgb(145,146,148);
  border-radius: 36px;
  color: $black;
  float: left;
  font-size: 20px;
    height: 36px;
  line-height: 32px;
  margin-right: 5px;
  text-align: center;
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  vertical-align: middle;
  width: 36px;
}

a.contributors-icon-anonymous {
  background: rgb(145,146,148);
  border-radius: 63px;
  display: block;
  font-size: 36px;
  height: 63px;
  line-height: 58px;
  margin: 0 auto;
  -webkit-transform: rotate(90deg);
      transform: rotate(90deg);
  text-align: center;
  vertical-align: middle;
  width: 63px;
}

/*********************
FOOTER STYLES
*********************/

.btn-top {
  background: rgba(230,0,0,0);
  display: inline-block;
  line-height: 0;
  margin: 0;
  padding: 0;
  text-align: center;
  width: 100%;

  a {
    background-color: $black-dark;
    border-radius: 3px;
    box-shadow: 0 1px 0 0 $black-darker;
    color: $white;
    font-family: $source-sans-pro;
    font-weight: 900;
    font-size: 1.25em;
    padding: 0.5em 0.7em;
    position: relative;
    text-decoration: none;
    text-transform: uppercase;
    top: -20px;

    span {
      font-size: 1.2em;
      padding: 0;
      position: relative;
      top: 0;
    }
  }
}

.copyright {
  color: $white;
  font-family: $source-sans-pro;
  font-size: 0.7em;
  font-weight: bold;
  line-height: 1.25;
  margin: 0;
  text-transform: uppercase;

  &:first-child {
    padding-bottom: 0;
  };
}

.container-copyright {
  margin: 54px 9px 0;
  padding-bottom: 18px;
}

.container-footer-content {
  max-width: 302px;
  margin: auto;
}

.container-footer-logo-images {
  margin: 9px 0 0;

  a {
    color: transparent;
  }
}

.container-nav-bttm-feedback-form {
  display: none;
  margin: 18px auto 0;
  max-width: 700px;
  text-align: center;
}

.container-site-designer-link {
  text-align: center;

  a.site-designer-link {
    background-color: $white-screen-subtle;
    border-radius: 3px;
    display: inline-block;
    color: $black-dark;
    font-family: $source-sans-pro;
    font-size: 1em;
    font-weight: 700;
    margin: 36px auto 0;
    padding: 18px;
    text-decoration: none;

    &:hover {
      background-color: $white-screen;
      box-shadow: 3px 3px 6px -6px $black-dark;
    }
  }
}

.footer {
  background-color: $black;
  clear: both;
  color: $light-gray;
  position: relative;
  width: 100%;

  div:nth-child(2) {    
    text-align: center;
  }
}

.footer-logo {
  clear: both;
  font-family: $narrow;
  font-size: 2.25em;
  line-height: 1;
  margin: 9px auto 0;
  text-align: center;
  text-transform: uppercase;

  a {
    color: $white;
    text-decoration: none;
  }

  svg {
    height: 187px;
    max-width: 500px;
  }
}

.footer-logo-images {
  display: inline-block;
  max-width: 150px;
  max-height: 100px;
  padding: 9px;
  width: 30%;

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

  &:last-child {
    padding-left: 0;
  }
}

.footer-nav {
  background: $black-dark;
  padding: 0 27px;

  li {
    line-height: 1;
    padding: 27px 0 0;

    a {
      color: $white;
      font-family: $source-sans-pro;
      font-size: 1.5em;
      font-weight: 900;
      text-decoration: none;
      text-transform: uppercase;
    }
  }
}

.inner-footer {
  background: $black;
  max-width: 1250px;
  padding: 9px;
  padding-bottom: 0;
}

.logo-footer-coe {
  padding-bottom: 18px; 
  padding-top: 18px;
}

.nav-bttm-btn-feedback {
  background: $black-dark;
  color: $white;
  cursor: pointer;
  display: block;
  font-family: $source-sans-pro;
  font-size: 1.5em;
  font-weight: 900;
  line-height: 1;
  margin: auto;
  max-width: 700px;
  padding: 27px;
  text-transform: uppercase;
}

.nav-footer {
  margin-top: 27px;
  max-width: 700px;
}

#reveal-nav-bttm-feedback-form {
  float: left;
  left: 35px;
  opacity: 0;
  position: relative;
  top: -35px;
  width: 0;
}

#reveal-nav-bttm-feedback-form:checked ~ div {
  display: block;

  textarea {
    position: relative;
  }

  input {
    position: relative;
  }
}

/******************************************************************
Site Name: Honoring Tribal Legacies
Author: Aaron Montoya

Stylesheet: 380up - Phones and small displays - Devices with 380px across or more
******************************************************************/

/*********************
LAYOUT & GRID STYLES
*********************/

.container {
  margin-top: 55px;
}

/*********************
HEADER STYLES
*********************/

.logo-type {
  font-size: 2.4em;
}

.header-items {
  padding: 9px 18px;
}

/*********************
NAVIGATION STYLES
*********************/

nav {
  margin-top: 55px;
}

.nav-current {
  padding: 36px 18px 90px;

  & > div:last-child {
    a {
      font-size: 1.125em;
      margin-top: 27px;
    }
  }

  h1 {
    font-size: 1.75em;
    margin-top: 54px;
  }

  ol {
    margin-top: 27px;

    li {
      margin-top: 27px;

      a {
        font-size: 1.25em;

        &:before {
          
        }

        div {
          font-size: 16px;

          h2,
          h3
          {
            font-size: 1.125em;
            max-width: 270px;
          }
        }
      }
    }
  }

  ul {
    margin-top: 27px;

    li {
      margin-top: 27px;

      a {
        font-size: 1.125em;
      }
    }
  }
}

.nav-current-brown {
  ol li {
    &:first-child h2 {
      max-width: 210px;
    }

    &:nth-child(2) h3 {
      max-width: 160px;
    }

    &:nth-child(3) h2 {
      max-width: 250px;
    }

    &:nth-child(4) h2 {
      max-width: 250px;
    }

    &:nth-child(5) h2 {
      max-width: 190px;
    }
  }
}

.nav-current-buswell {
  ol li {
    &:nth-child(2) h2 {
      max-width: 180px;
    }

    &:nth-child(3) h2 {
      max-width: 160px;
    }

    &:nth-child(4) h2 {
      max-width: 190px;
    }

    &:nth-child(7) h2 {
      max-width: none;
    }

    &:nth-child(8) h2 {
      max-width: 170px;
    }

    &:nth-child(10) h2 {
      max-width: 170px;
    }
  }

  ul:nth-of-type(2) {
    li:nth-of-type(2) a {
      max-width: 200px;
    }
  }
}

.nav-current-doyle {
  ol li {
    &:nth-child(5) h2 {
      max-width: none;
    }

    &:nth-child(6) h2 {
      max-width: none;
    }

    &:nth-child(7) h2 {
      max-width: none;
    }

    &:nth-child(8) h2 {
      max-width: none;
    }
  }
}

.nav-current-inglebret {
  ol li {
    &:first-child h3 {
      max-width: none;
    }

    &:nth-child(2) h3 {
      max-width: none;
    }

    &:nth-child(3) h3 {
      max-width: none;
    }

    &:nth-child(4) h3 {
      max-width: 170px;
    }

    &:nth-child(5) h3 {
      max-width: none;
    }
  }
}

.nav-current-lamb {
  ol:nth-of-type(2) {
    li:first-child h2 {
      max-width: 170px;
    }

    li:nth-child(4) h2 {
      max-width: 160px;
    }
  }
}

.nav-contributors li p {
  font-size: 1.0625em;
}

/******************************************************************
H1, H2, H3, H4, H5 STYLES
******************************************************************/

h1, .h1 {
  font-size: 2.1em;
}

/*********************
POSTS & CONTENT STYLES
*********************/

#content {
  background: $white;
}

.entry-content {
  padding: 0 18px 120px;

  audio, img, svg, video {
    margin-top: 18px;
  }

  h1,
  h2,
  h3,
  h4
  {
    font-size: 1.675em;
  }

  iframe {
    height: 250px;
  }

  ul,
  ol
  {
    & > li {
      font-size: 1.0625em
    }

    img,
    .container-table
    {
      & + li {
        margin-top: 36px;
      }
    }
  }

  h1
  {
    margin-top: 54px;
  }

  h2,
  h3,
  h4
  {
    margin-top: 45px;
  }

  p,
  ol,
  ul,
  div + ol,
  div + ul,
  h1 + ol,
  h2 + ol,
  h3 + ol,
  h4 + ol,
  h1 + ul,
  h2 + ul,
  h3 + ul,
  h4 + ul
  {
    margin-top: 36px;
  }

  .container-curriculum-section-open {
    padding: 45px 18px 18px;
    margin: 120px -18px 0;

    h1,
    h2
    {
      font-size: 1.875em;
    }

    h3,
    h4
    {
      font-size: 1.75em;
    }

    div {
      height: 125px;
    }
  }

  .icon-honey-inside-activity,
  .icon-honey-outside-activity
  {
    height: 55px;

    & + h3 {
      margin-left: 63px;
    }
  }
}

table.days-of-week {
  td {
    padding: 18px;
  }

  th {
    padding-top: 18px;
    font-size: 1.1em;
  }
}

.container-curriculum-open {
  padding: 45px 18px 60px;
  margin: 0 -18px -120px;

  h1 {
    font-size: 2.875em;
    margin: 0;
  }

  h2 {
    font-size: 2em;
  }

  img {
    margin: 36px 0;
  }
}

.container-curriculum-section-2 {
  p {
    max-width: 8em;
  }
}

.container-curriculum-toc {
  ul:last-child {
    margin-top: 75px;
  }

  ul li {
    margin: 36px 0;

    a {
      font-size: 1.25em;
    }
  }

  h2 {
    font-size: 1.75em;
  }

  ol li {
    font-size: 1em;

    &:nth-child(10) div::before {
      left: -7px;
    }
  }
}

.caption, .caption-with-toggle {
  margin: 14px 0 0;
}

.caption-with-toggle p {
  height: 55px;
  font-size: 1em;
}

ul.category-tags > li {
  font-size: 1.25em;
  padding: 20px;
}

.icon-pdf, .icon-learning-episode, .icon-appendix {
  font-size: 1.375em;

  &::before {
    line-height: 1.25
  }
  
  div {
    right: -19px;
  }
}

.icon-pdf {
  div {
    margin-bottom: -63px;
    top: -43px;
    margin-left: 40px;
  }
}

.icon-pdf-indent {
  margin-left: 72px;
}

.quote,
.callout
{
  margin: 45px 0 0;

  p {
    font-size: 3.25em;
  }
}

.quote-begin,
.quote-end
{
  width: 75px;
  height: 75px;
  border-radius: 75px;
  font-size: 75px;
  margin: 90px auto 0;
}

.quote-end {
  margin: 30px auto 0;
}

.drop-cap {
  font-size: 6em;
}

.tighten-1,
.tighten-2,
.tighten-3
{
  max-width: 11.5em;
}

.tighten-4 {
  max-width: 11em;
}

.copy-highlight h5 {
  font-size: 1.25em;
}

.copy-highlight + ul {
  margin-top: 51px;
}

.footnote {
  font-size: 1.1em;
}

ol.list-appendix > li {
  font-size: 1em;
}

/*********************
CONTRIBUTOR PAGE STYLES
*********************/

.page-contributor {
  h1 {
    font-size: 2.75em;
    margin-top: 27px;
  }
}

/*********************
INTRODUCTION PAGE STYLES
*********************/

.page-introduction {
  .bg-introduction {
    h1 {
      font-size: 2.875em;
      margin: 0;
      padding: 200px 18px 350px;
    }
  }

  .container-btn-access-curricula .btn-access-curricula {
    font-size: 1.125em;
    padding: 18px;
  }

  .introduction-body {
    margin-bottom: -120px;
    margin-left: -18px;
    margin-right: -18px;
    padding-left: 18px;
    padding-right: 18px;

    .contributors-grid {
      li {
        margin-top: 27px;
      }
    }
  }

  .lbl-show-chapters {
    margin-left: 72px;
  }

  .width-constrain-1 {
    max-width: 341px;
  }

  .width-constrain-2 {
    max-width: 382px;
  }
}

/*********************
CUSTOMIZATION BY AUTHOR
*********************/

.container-curriculum-1-rose-honey {
  .container-curriculum-toc {
    ul li {
      &:nth-child(5) a {
        max-width: none;
      }
    }
  }
}

.container-curriculum-2-ella-inglebret {
  .container-curriculum-toc {
    ol li {
      &:first-child h3 {
        max-width: 160px;
      }

      &:nth-child(2) h3 {
        max-width: 190px;
      }

      &:nth-child(3) h3 {
        max-width: 190px;
      }

      &:nth-child(4) h3 {
        max-width: 190px;
      }
    }

    ul li {
      &:last-child a {
        max-width: 210px;
      }
    }
  }
}

.container-curriculum-3-shana-brown {
  .container-curriculum-toc {
    ol li {
      &:first-child h2 {
        max-width: 210px;
      }

      &:nth-child(2) h3 {
        max-width: 250px;
      }

      &:nth-child(3) h2,
      h3
      {
        max-width: 210px;
      }

      &:nth-child(4) h2 {
        max-width: 210px;
      }

      &:nth-child(5) h2 {
        max-width: 230px;
      }
    }
  }
}

.container-curriculum-4-carol-buswell {
  .container-curriculum-toc {
    ol li {
      &:nth-child(2) h2 {
        max-width: 210px;
      }

      &:nth-child(3) h2 {
        max-width: 190px;
      }

      &:nth-child(4) h2 {
        max-width: 230px;
      }

      &:nth-child(8) h2 {
        max-width: 200px;
      }

      &:nth-child(10) h2 {
        max-width: 200px;
      }
    }

    ul:nth-of-type(2) {
      li:nth-of-type(2) a {
        max-width: 230px;
      }

      li:nth-of-type(3) a {
        max-width: 210px;
      }
    }
  }
}

.container-curriculum-5-julie-cajune {
  .container-curriculum-toc {
    ul:first-of-type {
      li:first-child a {
        max-width: 220px;
      }
    }
  }
}

.container-curriculum-7-carmelita-lamb {
  .container-curriculum-toc {
    ol:nth-of-type(2) {
      li:first-child h2 {
        max-width: 200px;
      }

      li:nth-child(4) h2 {
        max-width: 190px;
      }
    }
  }
}

/*********************
FOOTER STYLES
*********************/

.btn-top {
  a {
    font-size: 1.5em;
    top: -27px;
  }
}

.container-copyright {
  margin-left: 27px;
  margin-right: 27px;
  padding-bottom: 45px;
}

.container-footer-content {
  max-width: 344px;
}

.footer-nav {
  padding-top: 0;
}

.footer-logo {
  svg {
    height: 213px;
  }
}

.inner-footer {
  padding: 18px;
  padding-bottom: 0;
}

/******************************************************************
Site Name: Honoring Tribal Legacies
Author: Aaron Montoya

Stylesheet: 481up - Larger mobile devices - Devices with 480px across or more

This stylesheet is loaded for larger devices.
******************************************************************/

/*********************
LAYOUT & GRID STYLES
*********************/

.container {
  margin-top: 65px;
}

/*********************
NAVIGATION STYLES
*********************/

nav {
  margin-top: 68px;
}

.nav li {
  &:nth-child(2) span {
    max-width: none;
  }

  &:nth-child(4) span {
    max-width: none;
  }

  &:nth-child(6) span {
    max-width: 320px;
  }

  &:nth-child(12) span {
    max-width: 370px;
  }

  &:nth-child(14) span {
    max-width: none;
  }
}

.nav-authors li, .nav-authors-no-title li {
  
}

a.nav-description {
  padding: 18px;
}

.nav-current {
  ol li {
    &:nth-child(4) h3 {
      max-width: none;
    }

    a div {
      h2, h3 {
        max-width: 370px;
      }
    }
  }
}

.nav-current-brown {
  ol li {
    &:first-child h2 {
      max-width: 310px;
    }

    &:nth-child(2) h3 {
      max-width: none;
    }

    &:nth-child(4) h2 {
      max-width: 300px;
    }

    &:nth-child(5) h2 {
      max-width: none;
    }
  }
}

.nav-current-buswell {
  ol li {
    &:nth-child(2) h2 {
      max-width: none;
    }

    &:nth-child(3) h2 {
      max-width: none;
    }

    &:nth-child(4) h2 {
      max-width: none;
    }

    &:nth-child(8) h2 {
      max-width: none;
    }

    &:nth-child(10) h2 {
      max-width: none;
    }
  }

  ul:nth-of-type(2) {
    li:nth-of-type(2) a {
      max-width: none;
    }
  }
}

.nav-current-lamb {
  ol:nth-of-type(2) {
    li:first-child h2 {
      max-width: none;
    }

    li:nth-child(4) h2 {
      max-width: none;
    }
  }
}

/******************************************************************
H1, H2, H3, H4, H5 STYLES
******************************************************************/

h1, .h1 {
  font-size: 2.7em;
}

/*********************
HEADER STYLES
*********************/

.logo-type {
  font-size: 3.125em;
}

.header-items {
  li {
    margin-left: 18px;
  }
}

/*********************
POSTS & CONTENT STYLES
*********************/

/* entry content */
.entry-content {
  h1, h2, h3, h4 {
    font-size: 2em;
  }

  .callout {
    margin: 63px 0 0;
  }

  .container-curriculum-section-open {
    h1, h2 {
      font-size: 2.125em;
    }

    h3, h4 {
      font-size: 2em;
    }
  }

  .icon-honey-inside-activity, .icon-honey-outside-activity {
    height: 65px;

    & + h3 {
      margin-left: 72px;
    }
  }

  .svg-sacred-hoop {
    height: 400px;
    height: 100%;
    min-height: 400px;
  }

  .table-responsive-constrain-col-1 {
    max-width: none;
  }

  .table-responsive-height-cell-2 {
    line-height: 1.5;
  }

  .table-responsive-height-cell-3 {
    line-height: 1.5;
  }

  .quote, .callout {
    p {
      font-size: 3em;
    }
  }
} /* end .entry-content */

.container-curriculum-toc {

  ul li a {
    font-size: 1.5em;
  }

  ul, ol {
    li {
      font-size: 1em;
    }

    &:nth-child(10) div::before {
      left: -8px;
    }
  }
}

ul.category-tags > li {
  font-size: 1.5em;
}

.container-curriculum-open {
  h1 {
    font-size: 3.5em;
  }

  h2 {
    font-size: 2.5em;
  }
}

.container-curriculum-open-2-ella-inglebret h1 {
  max-width: 8em;
}

.icon-learning-episode, .icon-pdf, .icon-appendix {
  font-size: 1.5em;
}

.icon-learning-episode div {
  margin-bottom: -69px;
}

.tighten-1 {
  max-width: 11em;
}

.tighten-6 {
  max-width: initial;
}

/*********************
CUSTOMIZATION BY AUTHOR
*********************/

.container-curriculum-2-ella-inglebret {
  .container-curriculum-toc {
    ol li {
      &:first-child h3 {
        max-width: none;
      }

      &:nth-child(2) h3 {
        max-width: none;
      }

      &:nth-child(3) h3 {
        max-width: none;
      }

      &:nth-child(4) h3 {
        max-width: none;
      }
    }

    ul li {
      &:last-child a {
        max-width: none;
      }
    }
  }
}

.container-curriculum-3-shana-brown {
  .container-curriculum-toc {
    ol li {
      &:first-child h2 {
        max-width: 230px;
      }

      &:nth-child(3) h2, h3 {
        max-width: 320px;
      }

      &:nth-child(4) h2 {
        max-width: 380px;
      }

      &:nth-child(5) h2 {
        max-width: 250px;
      }
    }
  }
}

.container-curriculum-4-carol-buswell {
  .container-curriculum-toc {
    ol li {
      &:nth-child(2) h2 {
        max-width: 230px;
      }

      &:nth-child(3) h2 {
        max-width: 210px;
      }

      &:nth-child(4) h2 {
        max-width: 300px;
      }

      &:nth-child(7) h2 {
        max-width: none;
      }

      &:nth-child(8) h2 {
        max-width: 220px;
      }

      &:nth-child(10) h2 {
        max-width: 210px;
      }
    }

    ul:first-of-type {
      li:nth-of-type(6) a {
        max-width: none;
      }
    } 

    ul:nth-of-type(2) {
      li:nth-of-type(2) a {
        max-width: 260px;
      }

      li:nth-of-type(3) a {
        max-width: none;
      }
    }
  }
}

.container-curriculum-5-julie-cajune {
  .container-curriculum-toc {
    ul:first-of-type {
      li:first-child a {
        max-width: none;
      }

      li:nth-child(6) a {
        max-width: none;
      }
    }
  }
}

.container-curriculum-7-carmelita-lamb {
  .container-curriculum-toc {
    ol:nth-of-type(2) {
      li:first-child h2 {
        max-width: 220px;
      }

      li:nth-child(4) h2 {
        max-width: none;
      }
    }
  }
}

/*********************
CONTRIBUTOR PAGE STYLES
*********************/

.page-contributor {
  h1 {
    font-size: 3em;
    margin-top: 27px;
  }
}

/*********************
INTRODUCTION PAGE STYLES
*********************/

.page-introduction {
  .bg-introduction {
    h1 {
      font-size: 3.5em;
    }
  }

  .introduction-body {
    padding-bottom: 120px;
    
    .contributors-grid {
      li {
        margin-top: 36px;
      }
    }
  }

  .width-constrain-1 {
    max-width: 365px;
  }

  .width-constrain-2 {
    max-width: 410px;
  }
}

/*********************
FOOTER STYLES
*********************/

.container-footer-content {
  max-width: 442px;
}

.container-copyright {
  margin-top: 72px;
}

.copyright {
  font-size: 0.9em;
}

.container-site-designer-link .site-designer-link {
  margin-top: 54px;
}

.footer-logo {
  svg{
    height: 274px;
  }
}

.footer-logo-images {
  padding: 18px;
  max-height: 150px;
}

.footer-nav {
  padding-left: 36px;
  padding-right: 36px;

  li {
    padding: 36px 0 0;

    a {
      font-size: 2em;
    }
  }
}

.nav-bttm-btn-feedback {
  font-size: 2em;
  padding: 36px;
}

.nav-footer {
  margin-top: 45px;
}

/******************************************************************
Site Name: Honoring Tribal Legacies
Author: Aaron Montoya

Stylesheet: 575up - Small tablets and small medium-sized mobile devices - Devices with 575px across or more
******************************************************************/

/*********************
LAYOUT & GRID STYLES
*********************/

.container {
  margin-top: 85px;
}

/******************************************************************
H1, H2, H3, H4, H5 STYLES
******************************************************************/

h1, .h1 {
  font-size: 3.125em;
}

/*********************
HEADER STYLES
*********************/

.header-items li {
  &:nth-of-type(3) {
    display: inline-block;
  }
}

.logo-header-nps {
  height: 60px;
  width: auto;
  margin-top: 5px;
}

.logo-type {
  font-size: 3.25em;
}

/*********************
NAVIGATION STYLES
*********************/

nav {
  margin-top: 87px;
}

.nav li {
  &:nth-child(8) span {
    max-width: none;
  }
}

.nav-current {
  & > div:last-child a {
    max-width: none;
  }

  ol li a div {
    h2,
    h3
    {
      max-width: 400px;
    }
  }
}

/*********************
POSTS & CONTENT STYLES
*********************/

.entry-content {
  padding-bottom: 180px;

  h1,
  h2,
  h3,
  h4
  {
    font-size: 2em;
  }

  iframe {
    height: 325px;
  }

  h1
  {
    margin-top: 63px;
  }

  h2,
  h3,
  h4
  {
    margin-top: 54px;
  }

  p,
  ol,
  ul,
  div + ol,
  div + ul,
  h1 + ol,
  h2 + ol,
  h3 + ol,
  h4 + ol,
  h1 + ul,
  h2 + ul,
  h3 + ul,
  h4 + ul
  {
    margin-top: 45px;
  }

  p,
  ul,
  ol,
  .footnote,
  .copy-highlight,
  .caption,
  .caption-with-toggle,
  .container-table
  {
    max-width: 700px;
  }

  .caption, .caption-with-toggle {
    p {
      word-spacing: 0.125em;
    }
  }

  .container-curriculum-section-open {
    h1 {
      font-size: 2.5em;
      letter-spacing: 0.00625em;
    }

    h2 {
      font-size: 2.5em;
    }

    h3, h4 {
      font-size: 2.25em;
    }

    div {
      height: 150px;
    }
  }

  .icon-honey-inside-activity, .icon-honey-outside-activity {
    height: 75px;

    & + h3 {
      margin-left: 81px;

      & + h4 {
        margin-top: 36px;
      }
    }
  }

  .icon-honey-inside-activity {
    top: 33px;
  }

  .icon-honey-outside-activity {
    top: 15px;
  }

  .svg-sacred-hoop {
    height: 485px;
    height: 100%;
    min-height: 485px;
  }

  .table-responsive-height-cell-3 {
    line-height: 1.5;
  }

  .quote-begin, .quote-end {
    width: 88px;
    height: 88px;
    border-radius: 88px;
    font-size: 88px;
  }

  .quote-end {
    margin-top: 27px;
  }

  .quote, .callout {
    margin-top: 27px;

    p {
      font-size: 3.75em;
      max-width: 100%;
    }
  }
}

.container-curriculum-open {
  h1 {
    font-size: 4.5em;
    margin: 0;
  }

  h2 {
    font-size: 3em;
  }

  img {
    margin: 60px 0;
    width: 75px;
    height: 75px;
    border-radius: 75px;
  }
}

.container-curriculum-toc {
  h2 {
    font-size: 2.5em;
  }

  ul {
    max-width: initial;

    &:last-child {
      margin-top: 105px;
    }
  }
}

table.days-of-week {
  th {
    text-align: right;

    &::before {
      width: auto;
      height: auto;
      padding: 3px 9px;
      line-height: auto;
    }
  }

  tr:first-of-type {
    th::before {
      content: "MON";
    }
  }

  tr:nth-of-type(2) {
    th::before {
      content: "TUE";
    }
  }

  tr:nth-of-type(3) {
    th::before {
      content: "WED";
    }
  }

  tr:nth-of-type(4) {
    th::before {
      content: "THU";
    }
  }

  tr:nth-of-type(5) {
    th::before {
      content: "FRI";
    }
  }
}

.icon-learning-episode, .icon-pdf {
  font-size: 1.625em;
  margin: 45px 0 0;
}

.icon-learning-episode {
  div {
    top: -63px;
    margin-bottom: -82px;
    margin-left: 25px;
    min-height: 75px;
  }
}

.icon-pdf-indent {
  margin-left: 81px;
}

.icon-pdf {
  &::before {
    line-height: 1.375;
  }

  div {
    top: -47px;
    margin-bottom: -66px;
    margin-left: 45px;
  }
}

.tighten-1 {
  max-width: 15em;
}

.copy-highlight {
  padding: 4em 3em;
  margin: 72px 0 0;

  h5 {
    font-size: 1.5em;
  }
}

.copy-highlight + ul {
  margin: 63px 0 0;
}

ul.category-tags {
  max-width: 100%;
}

/*********************
CUSTOMIZATION BY AUTHOR
*********************/

.container-curriculum-3-shana-brown {
  .container-curriculum-toc {
    ol li {
      &:first-child h2 {
        max-width: 430px;
      }

      &:nth-child(2) h3 {
        max-width: none;
      }

      &:nth-child(3) h2, h3 {
        max-width: 350px;
      }

      &:nth-child(4) h2 {
        max-width: 410px;
      }

      &:nth-child(5) h2 {
        max-width: none;
      }
    }
  }
}

.container-curriculum-4-carol-buswell {
  .container-curriculum-toc {
    ol li {
      &:nth-child(2) h2 {
        max-width: none;
      }

      &:nth-child(3) h2 {
        max-width: none;
      }

      &:nth-child(4) h2 {
        max-width: none;
      }

      &:nth-child(8) h2 {
        max-width: none;
      }

      &:nth-child(10) h2 {
        max-width: none;
      }
    }

    ul:nth-of-type(2) {
      li:nth-of-type(2) a {
        max-width: none;
      }
    }
  }
}

.container-curriculum-7-carmelita-lamb {
  .container-curriculum-toc {
    ol:nth-of-type(2) {
      li:first-child h2 {
        max-width: none;
      }
    }
  }
}

/*********************
CONTRIBUTOR PAGE STYLES
*********************/

.page-contributor {
  h1 {
    font-size: 3.25em;
    margin-top: 27px;

    & + p {
      margin-top: 63px;
    }
  }
}

/*********************
INTRODUCTION PAGE STYLES
*********************/

.page-introduction {
  .bg-introduction {
    h1 {
      font-size: 4.5em;
      padding-top: 225px;
    }
  }

  .introduction-body {
    margin-bottom: -180px;

    .contributors-grid {
      max-width: none;

      li {
        width: 32.85%;
      }
    }
  }

  .lbl-show-chapters {
    margin-left: 81px;
  }

  .width-constrain-1 {
    max-width: 390px;
  }

  .width-constrain-2 {
    max-width: 440px;
  }
}

/*********************
FOOTER STYLES
*********************/

.container-footer-content {
  max-width: 500px;
}

.footer-logo {
  svg {
    height: 331px;
  }
}

.container-copyright {
}

.copyright {
  font-size: 0.9em;
}

/******************************************************************
Site Name: Honoring Tribal Legacies
Author: Aaron Montoya

Stylesheet: 768up - Tablet and Small Desktop Stylesheet - Devices with 768px across or more
******************************************************************/

/*********************
LAYOUT & GRID STYLES
*********************/

.container {
  margin-top: 105px;
}

/******************************************************************
H1, H2, H3, H4, H5 STYLES
******************************************************************/

h1, .h1 {
  font-size: 4.3em;
}

/*********************
HEADER STYLES
*********************/

.header-items {
  padding: 9px 27px;

  li {
    margin-left: 18px;
  }
}

.logo-type {
  font-size: 4.5em;
}

.logo-header-nps {
  height: 80px;
  width: 64px;
}

.icon-menu {
  box-shadow: 0 3px 0 0 $black-darker;
  font-size: 0.9em;
  padding: 18px;
  width: 75px;
}

/*********************
NAVIGATION STYLES
*********************/

nav {
  margin-top: 107px;
}

.nav {
  border: 0;

  ul {
    padding-left: 36px;
  }

  li {

    &:nth-child(2) span {
      max-width: 250px;
    }

    &:nth-child(6) span {
      max-width: 290px;
    }

    &:nth-child(12) span {
      max-width: 260px;
    }

    &:nth-child(14) span {
      max-width: 170px;
    }

    a {
      border-bottom: 0;
    }

    ul.sub-menu,
    ul.children
    {
      border: 1px solid #ccc;
      border-top: 0;
      margin-top: 0;      
      position: absolute;
      visibility: hidden;
      z-index: 8999;

      li {
        a {
          border-bottom: 1px solid #ccc;
          border-right: 0;
          display: block;
          padding-left: 10px;
          width: 180px;

        &:last-child {
          a {
            border-bottom: 0;
          }
        }
      }
    }

  }
  /* end .menu ul li */

  .nav-download {
    &:last-child {
      padding-bottom: 150px;
    }
  }

}
/* end .nav */

a.nav-description {
  font-size: 1.75em;
  vertical-align: top;
  width: 50%;
}

.nav-authors, .nav-authors-no-title {
  display: inline-block;
  line-height: 1;
  margin: 0;
  max-width: 50%;

  li {
    font-size: 1.125em;
    margin-top: 18px;

    div {
      display: inline-block;
    }
  }

  img {
    border-radius: 54px;
    float: left;
    height: 54px;
    width: 54px;
  }

  p {
    margin-left: 64px;
    padding: 0 2.5em 0 .75em;
  }
}

.nav-current {
  padding: 54px 27px 120px;

  & > div:last-child a {
    font-size: 1.25em;
  }

  h1 {
    font-size: 2.25em;
  }

  ol li a {
    font-size: 1.5em;

    &:before {
      padding: 12px;
    }

    div {
      padding: 12px;

      h2, h3 {
        font-size: 1.25em;
      }
    }
  }

  ul li a {
    font-size: 1.25em;
    padding: 12px;
  }
}

.nav-current-brown {
  ol li {
    &:first-child h2 {
      max-width: none;
    }

    &:nth-child(3) h2 {
      max-width: none;
    }

    &:nth-child(4) h2 {
      max-width: 490px;
    }

    &:nth-child(5) h2 {
      max-width: 630px;
    }
  }
}

.nav-download-copy {
  margin-left: 100px;
}

.nav-contributors {
  li {
    display: inline-block;
    padding: 0 27px 18px;
    width: 50%;

    a img {
      height: 90px;
      width: 90px;
    }

    a.contributors-icon-anonymous {
      font-size: 45px;
      height: 90px;
      line-height: 80px;
      width: 90px;
    }

    h3 {
      font-size: 1.75em;
    }

    p {
      font-size: 1.1875em;
    }

    &:first-child,
    &:nth-child(2)
    {
      display: block;
      width: auto;
    }

    &:nth-child(2) {
      max-width: 700px;
      padding-bottom: 45px;
    }

  }
}

/*********************
POSTS & CONTENT STYLES
*********************/

.container-curriculum-2-ella-inglebret {
  div[class="container-table-row"]:nth-of-type(1) {
    div[class*="table"] {
      div:nth-of-type(1) {
        height: 100px;
      }

      div:nth-of-type(2) {
        height: 270px;
      }

      div:nth-of-type(3),
      div:nth-of-type(4)
      {
        height: 90px;
      }

      div:nth-of-type(5) {
        height: 250px;

        ul {
          margin: 0;
        }
      }

      &:first-child {
        div:nth-of-type(2) {
          height: 116px;
        }

        div:nth-of-type(3) {
          height: 270px;
        }

        div:nth-of-type(4),
        div:nth-of-type(5)
        {
          height: 90px;
        }

        div:nth-of-type(6) {
          height: 250px;
        }
      }
    }

    div[class*="table-key"]:first-of-type {
      display: table-cell;

      div:first-of-type {
        display: none;
      }

      div:nth-of-type(2) {
        border: 0;
      }
    }
  }

  div[class="container-table-row"]:nth-of-type(2) {
    div[class*="table"] {
      div:nth-of-type(1) {
        height: 75px;
      }

      div:nth-of-type(2) {
        height: 250px;
      }

      div:nth-of-type(3) {
        height: 90px;
      }

      div:nth-of-type(4) {
        height: 150px;
      }

      div:nth-of-type(5) {
        height: 190px;

        ul {
          margin: 0;
        }
      }
    }
  }

  div[class="container-table-row"]:nth-of-type(3) {
    div[class*="table"] {
      div:nth-of-type(1) {
        height: 30px;
      }

      div:nth-of-type(2) {
        height: 180px;
      }

      div:nth-of-type(3) {
        height: 110px;
      }

      div:nth-of-type(4) {
        height: 170px;
      }

      div:nth-of-type(5) {
        height: 190px;

        ul {
          margin: 0;
        }
      }
    }
  }
}

.entry-content {
  padding: 0 27px 180px;

  audio,
  img,
  svg,
  video
  {
    margin-top: 27px;
  }

  ul,
  ol
  {

    img,
    .container-table
    {
      & + li {
        margin-top: 54px;
      }
    }

    li {
      font-size: 1.0625em;
    }
  }

  h1 {
    margin-top: 72px;
  }

  h1 + h1,
  h1 + h2,
  h1 + h3,
  h1 + h4,
  h2 + h2,
  h2 + h3,
  h2 + h4,
  h3 + h3,
  h3 + h4
  {
    margin-top: 36px;
  }

  h2,
  h3,
  h4
  {
    margin-top: 63px;
  }

  p,
  ol,
  ul,
  div + ol,
  div + ul,
  h1 + ol,
  h2 + ol,
  h3 + ol,
  h4 + ol,
  h1 + ul,
  h2 + ul,
  h3 + ul,
  h4 + ul
  {
    margin-top: 54px;
  }

  p + p {
    margin-top: 18px;
  }

  h1,
  h2,
  h3,
  h4
  {
    font-size: 2.5em;
  }

  iframe {
    height: 425px;
  }

  p,
  td,
  th
  {
    font-size: 1.0625em;
  }

  p,
  ol,
  ul
  {
    margin-left: auto;
    margin-right: auto;
  }

  .art-constrain {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }

  .caption,
  .caption-with-toggle
  {
    margin-left: auto;
    margin-right: auto;
  }

  .container-curriculum-section-open {
    margin: 120px -27px 0;
    padding: 60px 27px 27px;

    h1 {
      font-size: 2.75em;
      letter-spacing: 0;
    }

    h1 + h1,
    h1 + h2,
    h3 + h3,
    h3 + h4,
    h4 + h4
    {
      margin-top: 0.5em;
    }

    h2 {
      font-size: 2.75em;
    }

    h3, h4 {
      font-size: 2.5em;
    }
  }

  .icon-honey-inside-activity,
  .icon-honey-outside-activity
  {
    height: 85px;

    & + h3 {
      margin-left: 90px;

      & + h4 {
        margin-top: 45px;
      }
    }
  }

  .icon-honey-inside-activity {
    top: 35px;
  }

  .svg-sacred-hoop {
    height: 642px;
    height: 100%;
    min-height: 642px;
  }

  .table div ul li {
    font-size: 1.3em;
  }

  .quote, .callout {
    margin-top: 36px;

    p {
      font-size: 4.5em;
    }
  }

  .quote-end {
    margin-top: 36px;
  }
}

ul.category-tags > li {
  font-size: 2em;
}

.container-curriculum-open {
  margin: 0 -27px -120px;
  padding: 60px 27px 90px;

  h1 {
    font-size: 5em;
    margin: 0;
  }

  h2 {
    font-size: 3.75em;
  }

  ul {
    margin: 0;
    margin-top: 90px;

    li {
      a {
        font-size: 2.5em;
        margin: 18px 0 0 18px;
      }

      img, .icon-avatar-empty {
        width: 90px;
        height: 90px;
        border-radius: 90px;

        &::before {
          font-size: 48px;
        }
      }
    }
  }

  h1, h2 {
    & + ul {
      margin-top: 90px;
    }
  }
}

.container-curriculum-toc {
  ul:last-child {
    margin-top: 120px;
  }

  ul li a {
    font-size: 1.625em;
    padding: 18px;
  }

  h2 {
    font-size: 2.75em;
  }
}

table.days-of-week {
  td {
    padding: 27px;
  }

  th {
    padding-top: 27px;
  }
}

.icon-learning-episode, .icon-appendix {
  &:before {
    padding: 18px;
  }

  div {
    padding: 18px;
  }
}

.icon-pdf {
  div {
    top: -51px;
    margin-bottom: -70px;
    margin-left: 50px;
  }
}

.tighten-4 {
  max-width: 10.5em;
}

.tighten-5 {
  max-width: initial;
}

.container-table {
  display: table;
  margin: 90px 0 0;

  & + * {
    clear: both;
  }

  .table-key {
    text-align: right;
    position: relative;
    font-style: italic;
    display: table-cell;
  }

  .table {
    margin: 0;
  
    p {
      margin: 0;
    }
  }
}

.container-table-row {
  display: table-row;
}

.table {
  display: table-cell;
  width: 33.3%;
  border: 0;
  padding: 0 15px;

  &:first-of-type {
    width: 20%;
    top: -6px;
  }
}

.copy-highlight {
  margin-left: auto;
  margin-right: auto;
}

.copy-highlight + ul {
  margin: 72px auto 0;
}

.caption, .caption-with-toggle {
  margin: 0;

  p {
    font-size: 1em;
  }
}

.container-curriculum-3-shana-brown {
  .container-curriculum-toc {
    ol li {
      &:first-child h2 {
        max-width: 260px;
      }

      &:nth-child(3) h2,
      h3
      {
        max-width: 370px;
      }

      &:nth-child(4) h2 {
        max-width: 440px;
      }
    }

  }
}


/*********************
CONTRIBUTOR PAGE STYLES
*********************/

.page-contributor {
  h1 {
    font-size: 3.75em;
    margin-top: 27px;

    & + p {
      margin-top: 63px;
    }
  }

  .avatar {
    width: 300px;
    height: 300px;
  }

  .color-band {
    margin: 0 -27px -150px;
    height: 250px;
  }

  .contributors-icon-anonymous {
    font-size: 170px;
    line-height: 1.5;
  }

  .large-display-hidden {
    display: none;
  }

  .mobile-hidden {
    display: block;
  }
}

/*********************
INTRODUCTION PAGE STYLES
*********************/

.page-introduction {
  .bg-introduction {
    h1 {
      font-size: 5em;
      padding-top: 250px;
    }
  }

  .container-btn-access-curricula .btn-access-curricula {
    margin-top: 54px;
    font-size: 1.25em;
  }

  .lbl-show-chapters {
    font-size: 1.25em;
  }

  .introduction-body {
    padding-left: 27px;
    padding-right: 27px;
    padding-bottom: 150px;
    margin-left: -27px;
    margin-right: -27px;

    p:first-of-type {
      padding-top: 54px;
    }

    .contributors-grid {
      li {
        margin-top: 45px;
        width: 32.97%;

        h5 {
          font-size: 1.25em;
          letter-spacing: 2px;
          margin-top: 18px;
          word-spacing: 2px;
        }

        img {
          height: 150px;
          width: 150px;
        }
      }
    }
  }
}

/*********************
FORM STYLES
*********************/

div.wpcf7-response-output {
  font-size: 1.25em;
}

input[type="submit"] {
  font-size: 1.25em;
  margin: 54px auto 0;
  padding: 18px 27px;
}

.wpcf7-form {
  p {
      font-size: 1.25em;
      margin: 27px 27px 0;
  }
}

/*********************
FOOTER STYLES
*********************/

.btn-top a {
  font-size: 1.75em;
}

.footer-logo {
  svg {
    height: 331px;
  }
}

.container-copyright {
  margin-left: 54px;
  margin-right: 54px;
  padding-bottom: 72px;
}

/******************************************************************
Site Name: Honoring Tribal Legacies
Author: Aaron Montoya

Stylesheet: 1010up - iPad - Devices with 1010px across or more
******************************************************************/

/*********************
LAYOUT & GRID STYLES
*********************/

.container {
  margin-top: 115px;
}

/*********************
NAVIGATION STYLES
*********************/

.nav li {
  &:nth-child(2) span {
    max-width: none;
  }

  &:nth-child(4) span {
    max-width: 330px;
  }

  &:nth-child(6) span {
    max-width: 390px;
  }

  &:nth-child(8) span {
    max-width: 290px;
  }

  &:nth-child(12) span {
    max-width: none;
  }

  &:nth-child(14) span {
    max-width: none;
  }
}

.nav-current {
  ul,
  ol
  {
    -webkit-columns: 2;
    -moz-columns: 2;
    columns: 2;
  }
}

.nav-current-brown {
  ol li {
    &:first-child h2 {
      max-width: 340px;
    }

    &:nth-child(3) h2 {
      max-width: 280px;
    }

    &:nth-child(4) h2 {
      max-width: 370px;
    }
  }
}

/*********************
HEADER STYLES
*********************/

.logo-header-coe {
  height: auto;
  width: 318px;
}

.logo-type {
  font-size: 5.45em;
}

.header-items li {
  margin-left: 27px;

  &:last-of-type {
    display: inline-block;
  }
}

.logo-header-nps,
.logo-header-uo
{ 
  height: 90px;
  width: 72px;
}

/******************************************************************
H1, H2, H3, H4, H5 STYLES
******************************************************************/

h1, .h1 {
  font-size: 3.699em;
}

/*********************
POSTS & CONTENT STYLES
*********************/

.entry-content {

  h1 {
    margin-top: 81px;
  }

  h1,
  h2,
  h3,
  h4
  {
    font-size: 2.75em;
  }

  h2,
  h3,
  h4
  {
    margin-top: 72px;
  }

  iframe {
    height: 600px;
  }

  ol, p, ul,
  div + ol,
  div + ul,
  h1 + ol,
  h2 + ol,
  h3 + ol,
  h4 + ol,
  h1 + ul,
  h2 + ul,
  h3 + ul,
  h4 + ul
  {
    margin-top: 63px;
  }

  .icon-honey-inside-activity, .icon-honey-outside-activity {
    height: 95px;

    & + h3 {
      margin-left: 99px;

      & + h4 {
        margin-top: 54px;
      }
    }
  }

  .icon-honey-inside-activity {
    top: 42px;
  }

  .icon-honey-outside-activity {
    top: 20px;
  }

  .table-responsive {
    thead,
    tbody
    {
      display: table-header-group;
      width: 100%;

      &:last-of-type {
        td, th {
          &:last-child {
            border-bottom: 1px solid #000000;
          }
        }
      }

      tr {
        display: table-row;
      }

      td,
      th
      {
        display: table-cell;
        border-left: 1px solid #000000;
        border-bottom: 1px solid #000000;
      }
    }
  }

  .quote, .callout {
    p {
      font-size: 5.25em;
    }
  }
}

.container-curriculum-open {
  margin: 0 -27px -120px;
  padding: 60px 27px;

  h1 {
    font-size: 6em;
    margin: 0;
  }

  h2 {
    font-size: 4.25em;
  }

  img {
    margin: 60px 0 0;
  }
}

.container-curriculum-open h2 + ul {
  margin-top: 90px;
}

.container-curriculum-section-open {
  margin: 120px -27px 0;
  padding: 90px 27px 27px;

  div {
    margin: 180px auto;
  }

  h1,
  h2
  {
    font-size: 3.5em;
  }

  h1 {
    letter-spacing: -.01875em;
  }

  h2 {
    letter-spacing: -0.025em;
  }

  h3,
  h4
  {
    font-size: 3em;
  }
}

.container-curriculum-toc{
  ul, ol {
    max-width: initial;
  }

  ol {
    margin: 36px 0 0;

    li {
      &:last-child a div div h3 {
        max-width: initial;
      }
    }
  }
    

  h2 > {
    font-size: 3.25em;
  }
}

.caption, .caption-with-toggle {
  p {
    font-size: 1.06125em;
    word-spacing: 0.25em;
  }
}

.caption-with-toggle p {
  height: 60px;
}

ul.category-tags > li {
  font-size: 2em;
}

table.days-of-week {
  tr:first-of-type {
    th::before {
      content: "MONDAY";
    }
  }

  tr:nth-of-type(2) {
    th::before {
      content: "TUESDAY";
    }
  }

  tr:nth-of-type(3) {
    th::before {
      content: "WEDNESDAY";
    }
  }

  tr:nth-of-type(4) {
    th::before {
      content: "THURSDAY";
    }
  }

  tr:nth-of-type(5) {
    th::before {
      content: "FRIDAY";
    }
  }
}

.icon-pdf {
  div {
    top: -61px;
    right: -29px;
    margin-bottom: -90px;
    margin-left: 50px;
  }
}

.icon-appendix {
  h2 {
    margin: -29px;
    margin-left: 60px;
    padding: 30px;
  }
}

.tighten-1 {
  max-width: 18em;
}

.container-table .table-key {
  top: -10px;
  padding: 0 30px;
}

.copy-highlight h5 {
  font-size: 1.75em;
}

.container-curriculum-3-shana-brown {
  .container-curriculum-toc {
    ol li {
      &:first-child h2 {
        max-width: none;
      }

      &:nth-child(3) h2 {
        max-width: none;
      }

      &:nth-child(4) h2 {
        max-width: 840px;
      }
    }
  }
}

/*********************
CONTRIBUTOR PAGE STYLES
*********************/

.page-contributor {
  h1 {
    font-size: 4.5em;
    margin-top: 36px;

    & + p {
      margin-top: 72px;
    }
  }
}

/******************************************************************
Site Name: Honoring Tribal Legacies
Author: Aaron Montoya

Stylesheet: 1030up - Desktop Stylesheet - 1030px and larger
******************************************************************/

/*********************
NAVIGATION STYLES
*********************/

.nav li {
  &:nth-child(4) span {
    max-width: none;
  }
}

/******************************************************************
H1, H2, H3, H4, H5 STYLES
******************************************************************/

h1, .h1 {
  font-size: 3.75em;
}

/*********************
HEADER STYLES
*********************/

.logo-type {
  font-size: 5.6em;
}

/*********************
POSTS & CONTENT STYLES
*********************/

.entry-content {
  ul.category-tags > li {
    font-size: 2.25em;
  }

  .container-curriculum-open h1 {
    font-size: 6.5em;
    margin: 0;
  }

  .container-curriculum-section-open {
    svg { 
      height: 0;
    }
  }

  .tighten-2,
  .tighten-3
  {
    max-width: 100%;
  }
}

/******************************************************************
Site Name: Honoring Tribal Legacies
Author: Aaron Montoya

Stylesheet: 1240up - Super Large Monitor Stylesheet - Displays with 1240px across or more
******************************************************************/

/*********************
LAYOUT & GRID STYLES
*********************/

.container {
  margin-top: 130px;
}

/*********************
NAVIGATION STYLES
*********************/

nav {
  margin-top: 132px;
}

.nav-authors li {
  font-size: 1.25em;
}

.nav-current {
  & > div:last-child a {
    font-size: 1.325em;
    margin-top: 45px;
  }

  h1 {
    font-size: 2.5em;
  }

  ol,
  ul
  {
    margin-top: 45px;
  }

  ul li a {
    font-size: 1.325em;
  }

  ol li a {
    font-size: 1.5em;

    div {
      h2,
      h3
      {
        font-size: 1.325em;
      }
    }
  }
}

.nav-current-brown {
  ol li {
    &:first-child h2 {
      max-width: 360px;
    }

    &:nth-child(3) h2 {
      max-width: 290px;
    }

    &:nth-child(4) h2 {
      max-width: 390px;
    }
  }
}

.nav-contributors {
  li {
    a.contributors-icon-anonymous {
      font-size: 54px;
      height: 108px;
      line-height: 95px;
      width: 108px;
    }

    a img {
      height: 108px;
      width: 108px;
    }

    h3 {
      font-size: 2em;
    }
  }
}

/******************************************************************
H1, H2, H3, H4, H5 STYLES
******************************************************************/

h1, .h1 {
  font-size: 4.3818em;
}

/*********************
HEADER STYLES
*********************/

.logo-type {
  font-size: 7.125em;
}

.icon-menu {
  box-shadow: 0 5px 0 0 $black-darker;
  font-size: 1em;
  padding: 27px;
  width: 103px;
}

/*********************
POSTS & CONTENT STYLES
*********************/

.container {
  box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.25);
}

.entry-content {

  h1 {
    margin-top: 90px;
  }

  h2,
  h3,
  h4
  {
    margin-top: 81px;
  }

  iframe {
    height: 700px;
  }

  p,
  ol,
  ul,
  div + ol,
  div + ul,
  h1 + ol,
  h2 + ol,
  h3 + ol,
  h4 + ol,
  h1 + ul,
  h2 + ul,
  h3 + ul,
  h4 + ul
  {
    margin-top: 72px;
  }

  ol + ul {
    margin-top: 0;
  }

  .caption,
  .caption-with-toggle
  {
    p {
      font-size: 1.125em;
      line-height: 1.875;
    }
  }

  .caption-with-toggle {
    p {
      height: 70px;
    }
  }

  .icon-honey-inside-activity,
  .icon-honey-outside-activity
  {
    height: 105px;

    & + h3 {
      margin-left: 108px;

      & + h4 {
        margin-top: 63px;
      }
    }
  }

  .icon-honey-inside-activity {
    top: 50px;
  }

  .icon-honey-outside-activity {
    top: 20px;
  }

  .quote {
    margin-top: 45px;

    p {
      font-size: 6em;
    }
  }

  .quote-end {
    margin-top: 45px;
  }
}

.container-curriculum-open {
  h1 {
    font-size: 7.5em;
    margin: 0;
  }

  h2 {
    font-size: 5em;
  }
}

.tighten-1 {
  max-width: 21em;
}

.container-curriculum-toc {
  position: relative;
  margin-top: 81px;

  ul {
    display: inline-block;
    position: relative;
    left: 0;
    bottom: 0;
    width: 42.5%;
    margin-top: 0;

    li:first-of-type {
      margin-top: 0;
    }
  }

  ul:first-of-type {
    margin-right: 90px;
    display: inline-block;
    position: relative;
    left: 0;
    width: 42.5%;
  }

  ul:last-of-type {
    position: absolute;
    top: 0;
    left: 47.5%;
  }

  h1 {
    &:first-of-type  {
      top: 0;
    };
  }

  h2 {
    display: inline-block;
    margin-right: 60px;
  }

  .icon-learning-episode {
    margin-top: 30px;
  }
}

.container-curriculum-7-carmelita-lamb {
  .container-curriculum-toc-ul {
    &:first-of-type {
      top: -485px;
    }
  }
}

.icon-learning-episode h2 {
  display: block;
  float: none;
}

table.days-of-week {
  tr {
    display: inline-block;
    width: 20%;
    vertical-align: top;
  }

  th {
    display: block;
    text-align: left;
  }

  td {
    padding: 18px 18px 0 0;

    a {
      -moz-hyphens: manual;
      word-break: break-all;
    }
  }

  .icon-pdf::before {
    padding: 9px;
    word-break: break-word;
  }
}

/*********************
INTRODUCTION PAGE STYLES
*********************/
.page-introduction {
  .bg-introduction {
    left: inherit;
    margin-left: -27px;
  }

  .container-btn-access-curricula .btn-access-curricula {
    font-size: 1.5em;
    margin-top: 63px;
  }

  .introduction-body {
    padding-bottom: 180px;

    .contributors-grid {
      li {
        width: 24.75%;
      }
    }
  }
}

/*********************
FORM STYLES
*********************/

div.wpcf7-response-output {
  font-size: 1.5em;
}

input[type="submit"] {
  font-size: 1.5em;
  padding: 18px 36px;
}

.wpcf7-form {
  p {
      font-size: 1.5em;
      margin: 27px 36px 0;
  }
}

/*! Made with Bones: http://themble.com/bones :) */

/******************************************************************
Site Name: Honoring Tribal Legacies
Author: Aaron Montoya

Stylesheet: Main Stylesheet

Calling in the separate media queries.
******************************************************************/

/*********************
IMPORTING PARTIALS
Establish all mixins, functions, and variables.
*********************/

@import "compass";

// normalize: http://necolas.github.io/normalize.css/
@import "partials/normalize";

// Sass variables
@import "partials/variables";

// typography
@import "partials/typography";

// Sass functions
@import "partials/functions";

// import mixins
@import "partials/mixins";

// the grid
@import "partials/grid";

/*********************
IMPORTING MODULES
Modules are reusable blocks or elements.
*********************/

// alert boxes
@import "modules/alerts";

// buttons
@import "modules/buttons";

// forms (inputs & labels)
@import "modules/forms";

/*********************
BASE (MOBILE) SIZE
Mobile styles.
*********************/

// styles in base.scss
@import "breakpoints/base";

/*********************
380px and above
*********************/
@media only screen and (min-width: 380px) {

  // styles in 380up.scss
  @import "breakpoints/380up";

} // end of media query

/*********************
LARGER MOBILE DEVICES
*********************/
@media only screen and (min-width: 481px) {

  // styles in 481up.scss
  @import "breakpoints/481up";

} // end of media query

/*********************
575px and above
*********************/
@media only screen and (min-width: 575px) {

  // styles in 575up.scss
  @import "breakpoints/575up";

} // end of media query

/*********************
TABLET & SMALLER LAPTOPS
*********************/
@media only screen and (min-width: 768px) {

  // styles in 768up.scss
  @import "breakpoints/768up";

} // end of media query

/*********************
iPad
Targeting the iPad.
*********************/
@media only screen and (min-width: 1010px) {

  // styles in 1010up.scss
  @import "breakpoints/1010up";

} // end of media query

/*********************
DESKTOP
*********************/
@media only screen and (min-width: 1030px) {

  // styles in 1030up.scss
  @import "breakpoints/1030up";

} // end of media query

/*********************
LARGE VIEWING SIZE
Larger monitors and possibly full screen viewers.
*********************/
@media only screen and (min-width: 1240px) {

  // styles in 1240up.scss
  @import "breakpoints/1240up";

} // end of media query

/*********************
RETINA (2x RESOLUTION DEVICES)
*********************/
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
       only screen and (min--moz-device-pixel-ratio: 1.5),
       only screen and (min-device-pixel-ratio: 1.5) {

  // styles in 2x.scss
  @import "breakpoints/2x";

} // end of media query

/*********************
PRINT STYLESHEET
*********************/
@media print {

  // styles in print.scss
  @import "partials/print";

}