<commit_before>@import url(http://fonts.googleapis.com/css?family=Raleway:400,300,600);
/* Load Raleway from Google fonts - `@import` statements have to preceed
   all CSS statements, even comments. */


/**
 * # Style Guide for Georgia K-12 STEM Incubator
 *
 * CSS stylesheet for Georgia K-12 STEM Incubator. Based
 * (heavily) on [Skeleton](www.getskeleton.com), version
 * 2.0.4, by <NAME>. Style guide generated automatically
 * by [styledown](https://github.com/styledown/styledown)
 * from comments embedded in the stylesheet.
 *
 * If you're reading the CSS source code, you can view
 * the live style guide on the
 * [STEM Incubator site](http://sathomas.me/STEM/docs/styleguide/).
 * If you're reading the style guide and have no other
 * access to the source code, you can see the fully
 * commented CSS file by viewing the page source.
 *
 * In the style guide, the left side of this page
 * describes the various style elements and gives
 * guidance for their use. The right side shows an
 * example of the corresponding element. To see the
 * markup for any example, click on the ellipses
 * (`...`) below the example.
 */

/**
 * ## HTML Page Structure
 *
 * We use a straightforward semantic markup with the
 * three standard compononents of `<nav>`, `<main>`,
 * and `<footer>`.
 */

/**
 * Section:
 * Because the site is actually just a single page
 * application, there are multiple "apparent" pages
 * within the single HTML file. Each virtual page is
 * a single `<section>` within the `<main>` content.
 *
 * By default, all sections other than the first are
 * hidden by CSS. There's an exception, however, if
 * the user's browser does not support JavaScript.
 * In that case we display all the sections so the
 * user can at least scroll to see all of the static
 * content. To override the default behavior on any
 * particular section, add the class `hide` or `show`
 * as appropriate.
 *
 * > Note: We "hide" sections by positioning them
 * offscreen, not by setting their display property
 * to `none`. This keeps all sections accessible to
 * screen readers.
 *
 *     @example:
 *     <section class="show">
 *         This section is always visible.
 *     </section>
 *     <section class="hide">
 *         This section is never visible.
 *     </section>
 */

section {
    width: 100%;
}

html.js section:not(:first-of-type),
html.js section.hide,
section.hide {
    left: -9999em;
    position: absolute;
}

html.js section.show,
section.show {
    left: auto;
    position: static;
}

/**
 * Article:
 * A section can optionally be divided into multiple
 * `<article>` elements. When articles are used, they
 * will be alternately styled according to the light
 * and dark themes. (See Themes section below.)
 *
 *     @example:
 *     <section>
 *         <article>
 *             This is the first article.
 *         </article>
 *         <article>
 *             This is the second article.
 *         </article>
 *     </section>
 */

article {
    width: 100%;
}

/**
 * Dynamic Content:
 * To keep the site at least minimally usable for
 * users without JavaScript, all content that's
 * dynamically generated by JavaScript should be
 * enclosed in a container with the `dynamic`
 * class. In a no-JavaScript environment, that
 * content will be hidden (includng from screen
 * readers). Use the `dynamic` class for static
 * content that only makes sense when there is
 * dynamic content to go with it (for example,
 * static headings for dynamic content).
 *
 *     @example:
 *     <div class="no-js">
 *         <article class="dynamic">
 *             <h6>Heading for Content</h6>
 *             <!-- dynamically-generated content here -->
 *         </article>
 *     </div>
 */

.no-js .dynamic {
    display: none;
}

/**
 * ## Grid
 *
 * Within sections (and articles) we use a standard
 * 12-column grid for overall layout, in a responsive,
 * mobile-first architecture. The breakpoints are:
 *
 * - default (no media query) for smartphones
 * - `@media (min-width:  400px) {}` large smartphones/phablets
 * - `@media (min-width:  550px) {}` tablets
 * - `@media (min-width:  750px) {}` small desktops
 * - `@media (min-width: 1000px) {}` large desktops
 * - `@media (min-width: 1200px) {}` HD desktops
 *
 * The grid remains a single column for smartphones and
 * large smartphones/phablets and becomes multiple
 * columns for tablets and larger.
 */

/**
 * Container:
 * The `container` class encapsulates all grid-based
 * content. It centers the content and applies
 * margins.
 *
 *     @example:
 *     <div class="container">
 *         Contents here, starting with rows
 *     </div>
 */

/* Generic and mobile-first rules */
.container {
    box-sizing: border-box;
    margin: 0 auto;
    max-width: 960px;
    padding: 0 20px;     /* minimal padding */
    position: relative;
    width: 100%;         /* full width */
}

/* Clear floats */
.container:after {
    clear: both;
    content: "";
    display: table;
}

/* Large smartphones/phablets */
@media (min-width: 400px) {
    .container {
        padding: 0;     /* use width to increase */
        width: 85%;     /* the gutters */
    }
}

/* Tablets and above */
@media (min-width: 550px) {
    .container {
        width: 80%;    /* lower % for gutters */
    }
}

/**
 * Row:
 * The `row` class encapsulates a single row
 * in the grid. Content within the row will
 * be vertically aligned, subject to wrapping.
 *
 *     @example:
 *     <div class="container">
 *         <div class="row">
 *             Columns go here
 *         </div>
 *     </div>
 */

/* All we need to do for rows is clear all floats */
.row:after {
    clear: both;
    content: "";
    display: table;
}

/**
 * Column:
 * The `column` and `columns` classes identify grid
 * columns. They are combined with modifier classes
 * to indicate how many columns (out of twelve) the
 * content should cover. In addition to plain old
 * integers (`one column`), the grid supports columns
 * defined as fractions of the row (`one-third column`).
 *
 * > Note: offset columns are also defined but
 * currently disabled in the stylesheet to avoid
 * bothering the browser with unused rules. They're
 * simply commented out in the CSS, though, so that
 * they can be easily re-enabled without having to
 * re-calculate the percentages.
 *
 *     @example:
 *     <div class="container">
 *         <div class="row">
 *             <div class="three columns" style="background-color:lightgray">3/12 (1/4) of row</div>
 *             <div class="nine columns" style="background-color:lightgray">9/12 (3/4) of row</div>
 *         </div>
 *         <div class="row" style="margin-top:0.2em">
 *             <div class="one-third column" style="background-color:lightgray">1/3 of row</div>
 *             <div class="two-thirds column" style="background-color:lightgray">2/3 of row</div>
 *         </div>
 *     </div>
 */

/* Generic and mobile-first rules */
.column,
.columns {
  box-sizing: border-box;
  float: left;
  width: 100%;    /* any column is full-width */
}

/* Tablets and above */
@media (min-width: 550px) {
    .column,
    .columns {
        margin-left: 4%;   /* spacing between columns */
    }
    .column:first-child,
    .columns:first-child {
        margin-left: 0;    /* no spacing needed on left-most */
    }

    /* simple column definitions */
    .one.column,
    .one.columns          { width: 4.66666666667%; }
    .two.columns          { width: 13.3333333333%; }
    .three.columns        { width: 22%;            }
    .four.columns         { width: 30.6666666667%; }
    .five.columns          { width: 39.3333333333%; }
    .six.columns          { width: 48%;            }
    .seven.columns        { width: 56.6666666667%; }
    .eight.columns        { width: 65.3333333333%; }
    .nine.columns         { width: 74.0%;          }
    .ten.columns          { width: 82.6666666667%; }
    .eleven.columns       { width: 91.3333333333%; }
    .twelve.columns       { width: 100%; margin-left: 0; }

    /* fractional column definitions */
    .one-full.column      { width: 100%; margin-left: 0; }
    .one-half.column      { width: 48%; }
    .one-third.column     { width: 30.6666666667%; }
    .two-thirds.column    { width: 65.3333333333%; }
    .one-fourth.column    { width: 22%;            }
    .three-fourths.column { width: 74.0%;          }

    /* column offsets - disabled until we need them */
    /*
    .offset-by-one.column,
    .offset-by-one.columns            { margin-left: 8.66666666667%; }
    .offset-by-two.column,
    .offset-by-two.columns            { margin-left: 17.3333333333%; }
    .offset-by-three.column,
    .offset-by-three.columns          { margin-left: 26%;            }
    .offset-by-four.column,
    .offset-by-four.columns           { margin-left: 34.6666666667%; }
    .offset-by-five.column,
    .offset-by-five.columns            { margin-left: 43.3333333333%; }
    .offset-by-six.column,
    .offset-by-six.columns            { margin-left: 52%;            }
    .offset-by-seven.column,
    .offset-by-seven.columns          { margin-left: 60.6666666667%; }
    .offset-by-eight.column,
    .offset-by-eight.columns          { margin-left: 69.3333333333%; }
    .offset-by-nine.column,
    .offset-by-nine.columns           { margin-left: 78.0%;          }
    .offset-by-ten.column,
    .offset-by-ten.columns            { margin-left: 86.6666666667%; }
    .offset-by-eleven.column,
    .offset-by-eleven.columns         { margin-left: 95.3333333333%; }

    .offset-by-one-half.column,
    .offset-by-one-half.columns       { margin-left: 52%;            }
    .offset-by-one-third.column,
    .offset-by-one-third.columns      { margin-left: 34.6666666667%; }
    .offset-by-two-thirds.column,
    .offset-by-two-thirds.columns     { margin-left: 69.3333333333%; }
    .offset-by-one-fourth.column,
    .offset-by-one-fourth.columns     { margin-left: 26%;            }
    .offset-by-three-fourths.column,
    .offset-by-three-fourths.columns  { margin-left: 78.0%;          }
    */
}

/**
 * ## Typography
 *
 * The site's primary font is [Raleway](https://www.theleagueofmoveabletype.com/raleway)
 * from [Google fonts](http://www.google.com/fonts/specimen/Raleway).
 * Standard sans serif fallbacks are defined as well. The style sheets
 * use relative ems (`rem`) measurements based on `10px` sizing, so,
 * for example, `1.5rem = 15px`. For browsers that don't support
 * `rem` units, we don't define any fallbacks so all content will
 * revert to the browser defaults. (We do, however, ensure that the
 * default size is `15px`.)
 */

/* Force base font size of 10px for document */
html {
    font-size: 62.5%;
}

/**
 * Base:
 * Standard font size is 15px (1.5rem) with a 24px
 * line height.
 *
 *     @example:
 *     <p>
 *        The quick brown fox jumped over the lazy dog.<br/>
 *        The quick brown fox jumped over the lazy dog.
 *     </p>
 */

body {
    color: #222;
    font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 150%; /* don't use rems here only; for browers without rem support */
    font-weight: 400;
    line-height: 1.6;
}

p {
    margin-top: 0;
}

/**
 * Headings:
 * Headings use a slightly lighter font weight and specific line
 * heights and letter spacings tailored for the Raleway font
 * (but no so extreme as to be illegible if a font fallback
 * is required). We start with relatively modest font sizes
 * for mobile devices and then increase the sizes a bit for
 * tablets and larger.
 *
 *     @example:
 *     <h1>This is a first level heading</h1>
 *     <h2>This is a second level heading</h2>
 *     <h3>This is a third level heading</h3>
 *     <h4>This is a fourth level heading</h4>
 *     <h5>This is a fifth level heading</h5>
 *     <h6>This is a sixth level heading</h6>
 */

/* Generic heading styles */
h1, h2, h3, h4, h5, h6 {
    font-weight: 300;
    margin-bottom: 2rem;
    margin-top: 0;
}

/* Sizes for mobile */
h1 { font-size: 4.0rem; line-height: 1.2;  letter-spacing: -.1rem;}
h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; }
h3 { font-size: 3.0rem; line-height: 1.3;  letter-spacing: -.1rem; }
h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; }
h5 { font-size: 1.8rem; line-height: 1.5;  letter-spacing: -.05rem; }
h6 { font-size: 1.5rem; line-height: 1.6;  letter-spacing: 0; }

/* Tablet and larger */
@media (min-width: 550px) {
    h1 { font-size: 5.0rem; }
    h2 { font-size: 4.2rem; }
    h3 { font-size: 3.6rem; }
    h4 { font-size: 3.0rem; }
    h5 { font-size: 2.4rem; }
    h6 { font-size: 1.5rem; }
}

/**
 * ## Themes
 *
 * The site uses two complementary themes, a light
 * theme and a dark theme. By default, most of the
 * site is styled with the light theme. The only
 * elements that default to the dark theme are
 * even-numbered articles and the footer.
 */

/**
 * Background and Color:
 * The default theme for any element can be overridden
 * by adding a `dark` or `light` class.
 *
 *     @example:
 *     <p>This is the light theme</p>
 *     <p class="dark">This is the dark theme</p>
 */

/**
 * Accent Color:
 * Each theme has its own accent color that is
 * automatically applied to some elements. (See
 * below for details.) The accent color can be
 * applied to arbitrary element by adding the
 * `accent` class.
 *
 *     @example:
 *     <p>
 *         This is the
 *         <span class="accent">accent color</span>
 *         for the light theme
 *     </p>
 *     <p class="dark">
 *         This is the
 *         <span class="accent">accent color</span>
 *         for the dark theme
 *     </p>
 */

/**
 * Heading Themes:
 * Heading levels 3-6 automatically use the theme's
 * accent color when they're within an article. This
 * can be overriden (reverting the heading to its
 * natural color) by adding the class `noaccent`.
 * Because the accent color is also used for links,
 * it is _strongly recommended_ that all headings
 * also act as links.
 *
 * > Note: Heading levels 1 and 2 are not normally
 * accented.
 *
 *     @example:
 *     <article class="light">
 *         <h6>This is a heading within an article</h6>
 *     </article>
 *     <article class="light">
 *         <h6 class="noaccent">This is an unaccented heading within an article</h6>
 *     </article>
 *     <article class="dark">
 *         <h6>This is a heading within a dark-themed article</h6>
 *     </article>
 *     <article class="dark">
 *         <h6 class="noaccent">This is an unaccented heading within a dark-themed article</h6>
 *     </article>
 */

/**
 * Links:
 * Links use the appropriate accent color and are underlined.
 * Links within headings use the default heading color and
 * are only underlined on hover.
 *
 *     @example:
 *     <article class="light">
 *         <p>
 *             This is a
 *             <a href="#">standard link</a>
 *             within an article
 *         </p>
 *     </article>
 *     <article class="dark">
 *         <p>
 *             This is a
 *             <a href="#">standard link</a>
 *             within a dark-themed article
 *         </p>
 *     </article>
 *     <article>
 *         <h2>
 *             This is a
 *             <a href="#">standard link</a>
 *             within a second level heading
 *         </h2>
 *         <h3>
 *             This is a
 *             <a href="#">standard link</a>
 *             within a third level heading
 *         </h3>
 *     </article>
 */

/**
 * Footer:
 * By default, the footer is styled using
 * the dark theme. Links within the footer,
 * however, default to the normal (non-accented)
 * color and change to the accented color on
 * hover. Although this scheme de-emphasizes
 * links within the footer, it can make those
 * links hard to discover. For this reason, it
 * is recommended that footer links include some
 * other affordance (e.g. an icon) to indicate
 * clickability. The footer includes a top border in
 * the theme color to separate it from same-themed
 * content that may immediately precede it.
 * To style the footer using the light theme, add
 * a `light` class.
 *
 *     @example:
 *     <div class="dark">
 *         This is content in the dark theme.
 *     </div>
 *     <footer>
 *         This is
 *         <a href="#">a link</a>
 *         within a footer.
 *     </footer>
 *     <div class="light">
 *         This is content in the light theme.
 *     </div>
 *     <footer class="light">
 *         This is
 *         <a href="#">a link</a>
 *         within a footer.
 *     </footer>
 */

/*
 * Because browser support for CSS variables is
 * essentially non-existent and we have to re-use
 * the same colors for several styles, all colors
 * have a comment identifying them. That comment
 * is available for global search-and-replace.
 */

/*
 * In many of the selectors that follow, we're
 * explicitly ignoring `<article>` elements
 * with the `hero` class. In general, it's
 * probably not a good idea to make the hero
 * element an article since it doesn't really
 * have any meaningful content, but we'll go
 * ahead and add the necessary filters just in
 * case, as that's probably an easy mistake to
 * make.
 */

body,
.light,
article.light:not(.hero):nth-of-type(even)
article.light:not(.hero):nth-of-type(even) h3,
article.light:not(.hero):nth-of-type(even) h4,
article.light:not(.hero):nth-of-type(even) h5,
article.light:not(.hero):nth-of-type(even) h6 {
    background-color: #ffffff /* light: background */;
    color: #403D3B /* light: color */;
}

article:not(.hero):nth-of-type(even),
footer,
.dark {
    background-color: #6b6764 /* dark: background */;
    color: #ffffff /* dark: color */;
}

footer {
    border-top: 1px solid #ffffff /* dark: color */;
}

footer.light {
    border-top: 1px solid #403D3B /* light: color */;
}

.accent,
article:not(.hero) h3:not(.noaccent),
article:not(.hero) h4:not(.noaccent),
article:not(.hero) h5:not(.noaccent),
article:not(.hero) h6:not(.noaccent),
a,
footer.light a:hover, footer.light a:focus,
footer .light a:hover, footer .light a:focus,
footer a.light:hover, footer a.light:focus {
    color: #2bbae4 /* light: accent */;
}

article:not(.hero):nth-of-type(even).accent,
article:not(.hero):nth-of-type(even) .accent,
article:not(.hero):nth-of-type(even) h3:not(.noaccent),
article:not(.hero):nth-of-type(even) h4:not(.noaccent),
article:not(.hero):nth-of-type(even) h5:not(.noaccent),
article:not(.hero):nth-of-type(even) h6:not(.noaccent),
article.dark:not(.hero) h3:not(.noaccent),
article.dark:not(.hero) h4:not(.noaccent),
article.dark:not(.hero) h5:not(.noaccent),
article.dark:not(.hero) h6:not(.noaccent),
article:not(.hero) .dark h3:not(.noaccent),
article:not(.hero) .dark h4:not(.noaccent),
article:not(.hero) .dark h5:not(.noaccent),
article:not(.hero) .dark h6:not(.noaccent),
article:not(.hero) h3.dark:not(.noaccent),
article:not(.hero) h4.dark:not(.noaccent),
article:not(.hero) h5.dark:not(.noaccent),
article:not(.hero) h6.dark:not(.noaccent),
article:not(.hero):nth-of-type(even) a,
footer.accent, footer .accent,
footer a:hover, footer a:focus,
.dark.accent, .dark .accent, .dark a, a.dark {
    color: #e3e132 /* dark: accent */;
}

a, a:hover, a:focus, a:visited {
    text-decoration: underline;
}

h1 a, h2 a {
    color: inherit;
}

h1 a, h1 a:visited,
h2 a, h2 a:visited,
h3 a, h3 a:visited,
h4 a, h4 a:visited,
h5 a, h5 a:visited,
h6 a, h6 a:visited {
    text-decoration: none;
}

h1 a:hover, h1 a:focus,
h2 a:hover, h2 a:focus,
h3 a:hover, h3 a:focus,
h4 a:hover, h4 a:focus,
h5 a:hover, h5 a:focus,
h6 a:hover, h6 a:focus {
    text-decoration: underline;
}

footer {
    border-top: 1px solid #ffffff /* dark: color */;
}

footer a {
    color: inherit;
    text-decoration: none;
}

footer a:focus, footer a:hover {
    text-decoration: none;
}


/**
 * ## Components
 *
 * Higher level components on the site generally
 * strive for very semantic markup to keep the
 * HTML as clean and simple as possible. (This
 * is especially helpful since much of the site
 * is dynamic and the underlying HTML actually
 * originates in JavaScript templates.) The cost,
 * of course, is a bit of added complexity in
 * the CSS.
 */

/**
 * Navigation Bar:
 * The responsive navigation bar at the top
 * of all "pages" on the site.
 */

/**
 * Hero:
 * The "hero" panel intended for the top (just
 * below the navigation) of the landing page.
 */

/**<commit_msg>(issue #9) styles for navigation bar<commit_after>@import url(http://fonts.googleapis.com/css?family=Raleway:400,300,600);
/* Load Raleway from Google fonts - `@import` statements have to preceed
   all CSS statements, even comments. */


/**
 * # Style Guide for Georgia K-12 STEM Incubator
 *
 * CSS stylesheet for Georgia K-12 STEM Incubator. Based
 * (heavily) on [Skeleton](www.getskeleton.com), version
 * 2.0.4, by <NAME>. Style guide generated automatically
 * by [styledown](https://github.com/styledown/styledown)
 * from comments embedded in the stylesheet.
 *
 * If you're reading the CSS source code, you can view
 * the live style guide on the
 * [STEM Incubator site](http://sathomas.me/STEM/docs/styleguide/).
 * If you're reading the style guide and have no other
 * access to the source code, you can see the fully
 * commented CSS file by viewing the page source.
 *
 * In the style guide, the left side of this page
 * describes the various style elements and gives
 * guidance for their use. The right side shows an
 * example of the corresponding element. To see the
 * markup for any example, click on the ellipses
 * (`...`) below the example.
 */

/**
 * ## HTML Page Structure
 *
 * We use a straightforward semantic markup with the
 * three standard compononents of `<nav>`, `<main>`,
 * and `<footer>`.
 */

/**
 * Section:
 * Because the site is actually just a single page
 * application, there are multiple "apparent" pages
 * within the single HTML file. Each virtual page is
 * a single `<section>` within the `<main>` content.
 *
 * By default, all sections other than the first are
 * hidden by CSS. There's an exception, however, if
 * the user's browser does not support JavaScript.
 * In that case we display all the sections so the
 * user can at least scroll to see all of the static
 * content. To override the default behavior on any
 * particular section, add the class `hide` or `show`
 * as appropriate.
 *
 * > Note: We "hide" sections by positioning them
 * offscreen, not by setting their display property
 * to `none`. This keeps all sections accessible to
 * screen readers.
 *
 *     @example:
 *     <section class="show">
 *         This section is always visible.
 *     </section>
 *     <section class="hide">
 *         This section is never visible.
 *     </section>
 */

section {
    width: 100%;
}

html.js section:not(:first-of-type),
html.js section.hide,
section.hide {
    left: -9999em;
    position: absolute;
}

html.js section.show,
section.show {
    left: auto;
    position: static;
}

/**
 * Article:
 * A section can optionally be divided into multiple
 * `<article>` elements. When articles are used, they
 * will be alternately styled according to the light
 * and dark themes. (See Themes section below.)
 *
 *     @example:
 *     <section>
 *         <article>
 *             This is the first article.
 *         </article>
 *         <article>
 *             This is the second article.
 *         </article>
 *     </section>
 */

article {
    width: 100%;
}

/**
 * Dynamic Content:
 * To keep the site at least minimally usable for
 * users without JavaScript, all content that's
 * dynamically generated by JavaScript should be
 * enclosed in a container with the `dynamic`
 * class. In a no-JavaScript environment, that
 * content will be hidden (includng from screen
 * readers). Use the `dynamic` class for static
 * content that only makes sense when there is
 * dynamic content to go with it (for example,
 * static headings for dynamic content).
 *
 *     @example:
 *     <div class="no-js">
 *         <article class="dynamic">
 *             <h6>Heading for Content</h6>
 *             <!-- dynamically-generated content here -->
 *         </article>
 *     </div>
 */

.no-js .dynamic {
    display: none;
}

/**
 * ## Grid
 *
 * Within sections (and articles) we use a standard
 * 12-column grid for overall layout, in a responsive,
 * mobile-first architecture. The breakpoints are:
 *
 * - default (no media query) for smartphones
 * - `@media (min-width:  400px) {}` large smartphones/phablets
 * - `@media (min-width:  550px) {}` tablets
 * - `@media (min-width:  750px) {}` small desktops
 * - `@media (min-width: 1000px) {}` large desktops
 * - `@media (min-width: 1200px) {}` HD desktops
 *
 * The grid remains a single column for smartphones and
 * large smartphones/phablets and becomes multiple
 * columns for tablets and larger.
 */

/**
 * Container:
 * The `container` class encapsulates all grid-based
 * content. It centers the content and applies
 * margins.
 *
 *     @example:
 *     <div class="container">
 *         Contents here, starting with rows
 *     </div>
 */

/* Generic and mobile-first rules */
.container {
    box-sizing: border-box;
    margin: 0 auto;
    max-width: 960px;
    padding: 0 20px;     /* minimal padding */
    position: relative;
    width: 100%;         /* full width */
}

/* Clear floats */
.container:after {
    clear: both;
    content: "";
    display: table;
}

/* Large smartphones/phablets */
@media (min-width: 400px) {
    .container {
        padding: 0;     /* use width to increase */
        width: 85%;     /* the gutters */
    }
}

/* Tablets and above */
@media (min-width: 550px) {
    .container {
        width: 80%;    /* lower % for gutters */
    }
}

/**
 * Row:
 * The `row` class encapsulates a single row
 * in the grid. Content within the row will
 * be vertically aligned, subject to wrapping.
 *
 *     @example:
 *     <div class="container">
 *         <div class="row">
 *             Columns go here
 *         </div>
 *     </div>
 */

/* All we need to do for rows is clear all floats */
.row:after {
    clear: both;
    content: "";
    display: table;
}

/**
 * Column:
 * The `column` and `columns` classes identify grid
 * columns. They are combined with modifier classes
 * to indicate how many columns (out of twelve) the
 * content should cover. In addition to plain old
 * integers (`one column`), the grid supports columns
 * defined as fractions of the row (`one-third column`).
 *
 * > Note: offset columns are also defined but
 * currently disabled in the stylesheet to avoid
 * bothering the browser with unused rules. They're
 * simply commented out in the CSS, though, so that
 * they can be easily re-enabled without having to
 * re-calculate the percentages.
 *
 *     @example:
 *     <div class="container">
 *         <div class="row">
 *             <div class="three columns" style="background-color:lightgray">3/12 (1/4) of row</div>
 *             <div class="nine columns" style="background-color:lightgray">9/12 (3/4) of row</div>
 *         </div>
 *         <div class="row" style="margin-top:0.2em">
 *             <div class="one-third column" style="background-color:lightgray">1/3 of row</div>
 *             <div class="two-thirds column" style="background-color:lightgray">2/3 of row</div>
 *         </div>
 *     </div>
 */

/* Generic and mobile-first rules */
.column,
.columns {
  box-sizing: border-box;
  float: left;
  width: 100%;    /* any column is full-width */
}

/* Tablets and above */
@media (min-width: 550px) {
    .column,
    .columns {
        margin-left: 4%;   /* spacing between columns */
    }
    .column:first-child,
    .columns:first-child {
        margin-left: 0;    /* no spacing needed on left-most */
    }

    /* simple column definitions */
    .one.column,
    .one.columns          { width: 4.66666666667%; }
    .two.columns          { width: 13.3333333333%; }
    .three.columns        { width: 22%;            }
    .four.columns         { width: 30.6666666667%; }
    .five.columns          { width: 39.3333333333%; }
    .six.columns          { width: 48%;            }
    .seven.columns        { width: 56.6666666667%; }
    .eight.columns        { width: 65.3333333333%; }
    .nine.columns         { width: 74.0%;          }
    .ten.columns          { width: 82.6666666667%; }
    .eleven.columns       { width: 91.3333333333%; }
    .twelve.columns       { width: 100%; margin-left: 0; }

    /* fractional column definitions */
    .one-full.column      { width: 100%; margin-left: 0; }
    .one-half.column      { width: 48%; }
    .one-third.column     { width: 30.6666666667%; }
    .two-thirds.column    { width: 65.3333333333%; }
    .one-fourth.column    { width: 22%;            }
    .three-fourths.column { width: 74.0%;          }

    /* column offsets - disabled until we need them */
    /*
    .offset-by-one.column,
    .offset-by-one.columns            { margin-left: 8.66666666667%; }
    .offset-by-two.column,
    .offset-by-two.columns            { margin-left: 17.3333333333%; }
    .offset-by-three.column,
    .offset-by-three.columns          { margin-left: 26%;            }
    .offset-by-four.column,
    .offset-by-four.columns           { margin-left: 34.6666666667%; }
    .offset-by-five.column,
    .offset-by-five.columns            { margin-left: 43.3333333333%; }
    .offset-by-six.column,
    .offset-by-six.columns            { margin-left: 52%;            }
    .offset-by-seven.column,
    .offset-by-seven.columns          { margin-left: 60.6666666667%; }
    .offset-by-eight.column,
    .offset-by-eight.columns          { margin-left: 69.3333333333%; }
    .offset-by-nine.column,
    .offset-by-nine.columns           { margin-left: 78.0%;          }
    .offset-by-ten.column,
    .offset-by-ten.columns            { margin-left: 86.6666666667%; }
    .offset-by-eleven.column,
    .offset-by-eleven.columns         { margin-left: 95.3333333333%; }

    .offset-by-one-half.column,
    .offset-by-one-half.columns       { margin-left: 52%;            }
    .offset-by-one-third.column,
    .offset-by-one-third.columns      { margin-left: 34.6666666667%; }
    .offset-by-two-thirds.column,
    .offset-by-two-thirds.columns     { margin-left: 69.3333333333%; }
    .offset-by-one-fourth.column,
    .offset-by-one-fourth.columns     { margin-left: 26%;            }
    .offset-by-three-fourths.column,
    .offset-by-three-fourths.columns  { margin-left: 78.0%;          }
    */
}

/**
 * ## Typography
 *
 * The site's primary font is [Raleway](https://www.theleagueofmoveabletype.com/raleway)
 * from [Google fonts](http://www.google.com/fonts/specimen/Raleway).
 * Standard sans serif fallbacks are defined as well. The style sheets
 * use relative ems (`rem`) measurements based on `10px` sizing, so,
 * for example, `1.5rem = 15px`. For browsers that don't support
 * `rem` units, we don't define any fallbacks so all content will
 * revert to the browser defaults. (We do, however, ensure that the
 * default size is `15px`.)
 */

/* Force base font size of 10px for document */
html {
    font-size: 62.5%;
}

/**
 * Base:
 * Standard font size is 15px (1.5rem) with a 24px
 * line height.
 *
 *     @example:
 *     <p>
 *        The quick brown fox jumped over the lazy dog.<br/>
 *        The quick brown fox jumped over the lazy dog.
 *     </p>
 */

body {
    color: #222;
    font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 150%; /* don't use rems here only; for browers without rem support */
    font-weight: 400;
    line-height: 1.6;
}

p {
    margin-top: 0;
}

/**
 * Headings:
 * Headings use a slightly lighter font weight and specific line
 * heights and letter spacings tailored for the Raleway font
 * (but no so extreme as to be illegible if a font fallback
 * is required). We start with relatively modest font sizes
 * for mobile devices and then increase the sizes a bit for
 * tablets and larger.
 *
 *     @example:
 *     <h1>This is a first level heading</h1>
 *     <h2>This is a second level heading</h2>
 *     <h3>This is a third level heading</h3>
 *     <h4>This is a fourth level heading</h4>
 *     <h5>This is a fifth level heading</h5>
 *     <h6>This is a sixth level heading</h6>
 */

/* Generic heading styles */
h1, h2, h3, h4, h5, h6 {
    font-weight: 300;
    margin-bottom: 2rem;
    margin-top: 0;
}

/* Sizes for mobile */
h1 { font-size: 4.0rem; line-height: 1.2;  letter-spacing: -.1rem;}
h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; }
h3 { font-size: 3.0rem; line-height: 1.3;  letter-spacing: -.1rem; }
h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; }
h5 { font-size: 1.8rem; line-height: 1.5;  letter-spacing: -.05rem; }
h6 { font-size: 1.5rem; line-height: 1.6;  letter-spacing: 0; }

/* Tablet and larger */
@media (min-width: 550px) {
    h1 { font-size: 5.0rem; }
    h2 { font-size: 4.2rem; }
    h3 { font-size: 3.6rem; }
    h4 { font-size: 3.0rem; }
    h5 { font-size: 2.4rem; }
    h6 { font-size: 1.5rem; }
}

/**
 * ## Themes
 *
 * The site uses two complementary themes, a light
 * theme and a dark theme. By default, most of the
 * site is styled with the light theme. The only
 * elements that default to the dark theme are
 * even-numbered articles and the footer.
 */

/**
 * Background and Color:
 * The default theme for any element can be overridden
 * by adding a `dark` or `light` class.
 *
 *     @example:
 *     <p>This is the light theme</p>
 *     <p class="dark">This is the dark theme</p>
 */

/**
 * Accent Color:
 * Each theme has its own accent color that is
 * automatically applied to some elements. (See
 * below for details.) The accent color can be
 * applied to arbitrary element by adding the
 * `accent` class.
 *
 *     @example:
 *     <p>
 *         This is the
 *         <span class="accent">accent color</span>
 *         for the light theme
 *     </p>
 *     <p class="dark">
 *         This is the
 *         <span class="accent">accent color</span>
 *         for the dark theme
 *     </p>
 */

/**
 * Heading Themes:
 * Heading levels 3-6 automatically use the theme's
 * accent color when they're within an article. This
 * can be overriden (reverting the heading to its
 * natural color) by adding the class `noaccent`.
 * Because the accent color is also used for links,
 * it is strongly recommended that all headings
 * also act as links.
 *
 * > Note: Heading levels 1 and 2 are not normally
 * accented.
 *
 *     @example:
 *     <article class="light">
 *         <h6>This is a heading within an article</h6>
 *     </article>
 *     <article class="light">
 *         <h6 class="noaccent">This is an unaccented heading within an article</h6>
 *     </article>
 *     <article class="dark">
 *         <h6>This is a heading within a dark-themed article</h6>
 *     </article>
 *     <article class="dark">
 *         <h6 class="noaccent">This is an unaccented heading within a dark-themed article</h6>
 *     </article>
 */

/**
 * Links:
 * Links use the appropriate accent color and are underlined.
 * Links within headings use the default heading color and
 * are only underlined on hover.
 *
 *     @example:
 *     <article class="light">
 *         <p>
 *             This is a
 *             <a href="#">standard link</a>
 *             within an article
 *         </p>
 *     </article>
 *     <article class="dark">
 *         <p>
 *             This is a
 *             <a href="#">standard link</a>
 *             within a dark-themed article
 *         </p>
 *     </article>
 *     <article>
 *         <h2>
 *             This is a
 *             <a href="#">standard link</a>
 *             within a second level heading
 *         </h2>
 *         <h3>
 *             This is a
 *             <a href="#">standard link</a>
 *             within a third level heading
 *         </h3>
 *     </article>
 */

/**
 * Footer:
 * By default, the footer is styled using
 * the dark theme. Links within the footer,
 * however, default to the normal (non-accented)
 * color and change to the accented color on
 * hover. Although this scheme de-emphasizes
 * links within the footer, it can make those
 * links hard to discover. For this reason, it
 * is recommended that footer links include some
 * other affordance (e.g. an icon) to indicate
 * clickability. The footer includes a top border in
 * the theme color to separate it from same-themed
 * content that may immediately precede it.
 * To style the footer using the light theme, add
 * a `light` class.
 *
 *     @example:
 *     <div class="dark">
 *         This is content in the dark theme.
 *     </div>
 *     <footer>
 *         This is
 *         <a href="#">a link</a>
 *         within a footer.
 *     </footer>
 *     <div class="light">
 *         This is content in the light theme.
 *     </div>
 *     <footer class="light">
 *         This is
 *         <a href="#">a link</a>
 *         within a footer.
 *     </footer>
 */

/*
 * Because browser support for CSS variables is
 * essentially non-existent and we have to re-use
 * the same colors for several styles, all colors
 * have a comment identifying them. That comment
 * is available for global search-and-replace.
 */

/*
 * In many of the selectors that follow, we're
 * explicitly ignoring `<article>` elements
 * with the `hero` class. In general, it's
 * probably not a good idea to make the hero
 * element an article since it doesn't really
 * have any meaningful content, but we'll go
 * ahead and add the necessary filters just in
 * case, as that's probably an easy mistake to
 * make.
 */

body,
.light,
article.light:not(.hero):nth-of-type(even)
article.light:not(.hero):nth-of-type(even) h3,
article.light:not(.hero):nth-of-type(even) h4,
article.light:not(.hero):nth-of-type(even) h5,
article.light:not(.hero):nth-of-type(even) h6 {
    background-color: #ffffff /* light: background */;
    color: #403D3B /* light: color */;
}

article:not(.hero):nth-of-type(even),
footer,
.dark {
    background-color: #6b6764 /* dark: background */;
    color: #ffffff /* dark: color */;
}

footer {
    border-top: 1px solid #ffffff /* dark: color */;
}

footer.light {
    border-top: 1px solid #403D3B /* light: color */;
}

.accent,
article:not(.hero) h3:not(.noaccent),
article:not(.hero) h4:not(.noaccent),
article:not(.hero) h5:not(.noaccent),
article:not(.hero) h6:not(.noaccent),
a,
footer.light a:hover, footer.light a:focus,
footer .light a:hover, footer .light a:focus,
footer a.light:hover, footer a.light:focus {
    color: #2bbae4 /* light: accent */;
}

article:not(.hero):nth-of-type(even).accent,
article:not(.hero):nth-of-type(even) .accent,
article:not(.hero):nth-of-type(even) h3:not(.noaccent),
article:not(.hero):nth-of-type(even) h4:not(.noaccent),
article:not(.hero):nth-of-type(even) h5:not(.noaccent),
article:not(.hero):nth-of-type(even) h6:not(.noaccent),
article.dark:not(.hero) h3:not(.noaccent),
article.dark:not(.hero) h4:not(.noaccent),
article.dark:not(.hero) h5:not(.noaccent),
article.dark:not(.hero) h6:not(.noaccent),
article:not(.hero) .dark h3:not(.noaccent),
article:not(.hero) .dark h4:not(.noaccent),
article:not(.hero) .dark h5:not(.noaccent),
article:not(.hero) .dark h6:not(.noaccent),
article:not(.hero) h3.dark:not(.noaccent),
article:not(.hero) h4.dark:not(.noaccent),
article:not(.hero) h5.dark:not(.noaccent),
article:not(.hero) h6.dark:not(.noaccent),
article:not(.hero):nth-of-type(even) a,
footer.accent, footer .accent,
footer a:hover, footer a:focus,
.dark.accent, .dark .accent, .dark a, a.dark {
    color: #e3e132 /* dark: accent */;
}

a, a:hover, a:focus, a:visited {
    text-decoration: underline;
}

h1 a, h2 a {
    color: inherit;
}

h1 a, h1 a:visited,
h2 a, h2 a:visited,
h3 a, h3 a:visited,
h4 a, h4 a:visited,
h5 a, h5 a:visited,
h6 a, h6 a:visited {
    text-decoration: none;
}

h1 a:hover, h1 a:focus,
h2 a:hover, h2 a:focus,
h3 a:hover, h3 a:focus,
h4 a:hover, h4 a:focus,
h5 a:hover, h5 a:focus,
h6 a:hover, h6 a:focus {
    text-decoration: underline;
}

footer {
    border-top: 1px solid #ffffff /* dark: color */;
}

footer a {
    color: inherit;
    text-decoration: none;
}

footer a:focus, footer a:hover {
    text-decoration: none;
}


/**
 * ## Components
 *
 * Higher level components on the site generally
 * strive for very semantic markup to keep the
 * HTML as clean and simple as possible. (This
 * is especially helpful since much of the site
 * is dynamic and the underlying HTML actually
 * originates in JavaScript templates.) The cost,
 * of course, is a bit of added complexity in
 * the CSS.
 */

/**
 * Navigation Bar:
 * The responsive navigation bar at the top of all "pages"
 * on the site. The navigation must be wrapped in a `<div>`
 * of class `header`, and it must include an `<input>` of
 * type `checkbox` and an associated empty label before
 * the unordered list of menu items. An optional `h1` allows
 * branding. Links within that heading are displayed identically
 * to standard heading text (no underline or hover). See the
 * example for details.
 *
 *     @example:
 *     <div class="header">
 *         <h1>
 *             <a href="#">Site Name</a>
 *         </h1>
 *     	   <nav>
 *     	       <input type="checkbox" id="nav-toggle"/>
 *     	       <label for="nav-toggle"></label>
 *             <ul>
 *                 <li><a href="#">First Selection</a></li>
 *                 <li><a href="#">Second Selection</a></li>
 *                 <li><a href="#">Third Selection</a></li>
 *             </ul>
 *         </nav>
 *     </div>
 */

/*
 * The styles below are derived from
 * [Navigataur](https://coderwall.com/p/sujd_w/navigataur-a-pure-css-responsive-navigation-menu)
 * by <NAME>. There are a couple of conventions that
 * are different than other styles in this stylesheet.
 * Unlike regular content, the navigation bar relies on `px`
 * units for precise positioning. Also, the style definitions
 * are desktop-first rather than mobile-first to help make the
 * code more understandable.
 */

/*
 * Start with generic and desktop styles.
 */

/*
 * For now the navigation bar uses the light accent
 * color as a background, but it could use a different
 * color without affecting the theme.
 */
.header {
	background-color: #2bbae4 /* light: accent */;
	min-height: 100px;
	height: 100%;
	padding: 0 20px;
}

/*
 * Optional branding is marked up as an `h1`.
 */
.header h1 {
	color: #ffffff;
    float: left;
    font-size: 36px;
    padding: 30px 0 0;
}

.header h1 a {
    text-decoration: none;
}

nav {
    display: block;
    float: right;
}

nav label {
	z-index: 2;
}

nav ul {
    margin: 15px 0;
    padding: 0;
}

nav, nav ul, nav li, nav li > a {
	height: 100%;
}

nav li > a {
    color: #ffffff;
	display: block;
	font-size: 16px;
	line-height: 1;
	padding: 32px 20px;
	text-decoration: none;
}

/*
 * Visual changes for mobile viewports
 */

@media only screen and (max-width: 750px){
	nav ul {
		background: #2bbae4 /* light: accent */;
		border-top: 1px solid #1a6f88; /* much darker version of background */
	}

    nav li:not(:first-child) {
        border-top: 1px solid #25a1c5; /* slightly darker version of background */
    }

	nav ul, nav li, nav li > a {
		height: auto;
	}

	nav li > a {
		padding: 15px 15px;
	}

	nav li > a:hover, nav li > a:focus {
        text-decoration: none;
	}

	nav label:after {
        color: #ffffff;
		content: 'Menu';
		display: block;
		font-size: 16px;
		margin: 33px 0;
		padding: 10px;
		text-align: center;
		width: 100px;
	}

	#nav-toggle:checked + label:after{
		content: 'Close Menu';
	}
}

/*
 * The following rules implement the responsive
 * behavior of the navigation bar. You probably
 * don't want to change them unless you're
 * fixing a bug in them.
 */

/*
 * As above, start with the desktop version.
 */

.header {
    position: relative;
}

#nav-toggle, nav label {
    display: none;
}

nav li {
    float:left;
    list-style: none;
}

/*
 * Be sure to clear all floats.
 */

.header:before, .header:after {
    content: "";
    display: table;
}

.header:after {
    clear: both;
}

/*
 * Now adjust for mobile views
 */

@media only screen and (max-width: 750px) {
	nav ul {
        display: none;
        margin: 0;
        opacity: 0;
        position: absolute;
        right: 0;
        width: 100%;
    }
	nav li {
        display: block;
        margin: 0;
        width: 100%;
    }
	nav li > a {
        display: block;
        text-decoration: none;
        width: 100%;
    }
	nav label {
        cursor: pointer;
        display: block;
        position: relative;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
                user-select: none;
    }
	#nav-toggle:checked ~ ul {
        display: block;
        opacity: 1;
    }
}

/**
 * Hero:
 * The "hero" panel intended for the top (just
 * below the navigation) of the landing page.
 */

/**
{'fraction_non_alphanumeric': 0.13475617872831344, 'fraction_numerical': 0.02722190176154768, 'mean_word_length': 2.5347396486825597, 'pattern_counts': {'":': 0, '<': 275, '<?xml version=': 0, '>': 288, 'https://': 5, 'lorem ipsum': 0, 'www.': 6, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 40, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3469989', 'n_tokens_mistral': 15548, 'n_tokens_neox': 14344, 'n_words': 4716}