Updated hero to use grid system and table/table-cell display

/* ==========================================================================
   Capital Framework
   Layout Helpers
   ========================================================================== */

/* topdoc
  name: Content layouts
  family: cf-layout
  patterns:
    - name: Standard content columns
      markup: |

                    Full-width column (spans 12 columns)

                    Half-width column (spans 6/12 columns)

                    Half-width column (spans 6/12 columns)

                    Third-width column (spans 4/12 columns)

                    Third-width column (spans 4/12 columns)

                    Third-width column (spans 4/12 columns)

                    Two thirds-width column (spans 8/12 columns)

      codenotes:
        - |
          Structural cheat sheet:
          -----------------------
          .content-l
            .content-l_col
      notes:
        - "Simplifies use of grid structure inside content containers (like .content-main)."
        - "Since .content-l_col's are nested within .content_main extra margins will occur.
           The .content-l container uses the grid_nested-col-group mixin to counter this."
        - ".content-l_col-RATIO classes default to stacking on mobile and displaying as columns
           above mobile-max width (600px). This may not be the desired breakpoint for
           all use cases, so mixins are provided to simplify changing column display to
           stacked."
        - "Three .content-l modifiers handle the stacking overrides for use cases of
           .content_main, .content_full, and .content_sidebar containers."
        - "Note that the divs with inline styles are for demonstration purposes
           only and should not be used in production."
    - name: .content-l__full modifier
      markup: |

                   Full-width column (spans 12 columns)

                   Half-width column (spans 6/12 columns)

                   Half-width column (spans 6/12 columns)

                   Third-width column (spans 4/12 columns)

                   Third-width column (spans 4/12 columns)

                   Third-width column (spans 4/12 columns)

                   Two thirds-width column (spans 8/12 columns)

      codenotes:
        - .content-l.content-l__full
      notes:
        - "Designed for use within .content_full containers."
        - "Displays .content-l_col-1-2 as columns at tablet sizes & above (600px+)"
        - "Displays other common .content-l_col modifiers (.content-l_col-1-3,
           .content-l_col-2-3, .content-l_col-3-8, .content-l_col-5-8)
           as columns above 767px."
    - name: .content-l__main modifier
      markup: |

                     Full-width column (spans 12 columns)

                     Half-width column (spans 6/12 columns)

                     Half-width column (spans 6/12 columns)

                     Third-width column (spans 4/12 columns)

                     Third-width column (spans 4/12 columns)

                     Third-width column (spans 4/12 columns)

                     Two thirds-width column (spans 8/12 columns)

      codenotes:
        - .content-l.content-l__main
      notes:
        - "Designed for use in .content_main containers, which have reduced (75%) width
           above tablet sizes to accommodate adjacent sidebar column."
        - "Displays .content-l_col-1-2 as columns in the tablet range, 600-800px;
           stacked from 800-899, the start of sidebar range; and as columns again at 900px+"
        - "Displays other common .content-l_col modifiers (.content-l_col-1-3, .content-l_col-2-3,
           .content-l_col-3-8, .content-l_col-5-8) as columns above 900px."
    - name: .content-l__sidebar modifier
      markup: |

                     Full-width column (spans 12 columns)

                   Half-width column (spans 6/12 columns)

                   Half-width column (spans 6/12 columns)

                   Third-width column (spans 4/12 columns)

                   Third-width column (spans 4/12 columns)

                   Third-width column (spans 4/12 columns)

                   Two thirds-width column (spans 8/12 columns)

      codenotes:
        - .content-l.content-l__sidebar
      notes:
        - "For use in sidebar containers, which are full width only
           on tablet widths (600-800px)."
        - "Displays .content-l_col-1-2 as columns in the tablet range,
           600-800px, and stacked at all other widths."
    - name: Large gutters modifier
      markup: |

                    Full-width column (spans 12 columns)

                    Half-width column (spans 6/12 columns)

                    Half-width column (spans 6/12 columns)

      codenotes:
        - .content-l.content-l__large-gutters
      notes:
        - "Adds 30px gutters to all columns by simply adding the
           .content-l__large-gutters modifier."
  tags:
    - cf-layout
*/

.content-l {
    // Used to position __divider modifiers
    position: relative;

    .respond-to-min(@tablet-min, {
        .grid_nested-col-group();
    });

    &__full {
        .respond-to-range(@tablet-min, 767px, {
            .stack-col-thirds();
            .stack-col-eighths();
        });
    }

    &__main {
        .respond-to-range(801px, 899px, {
            .stack-col(content-l_col-1-2);
        });

        .respond-to-range(@tablet-min, 899px, {
            .stack-col-thirds();
            .stack-col-eighths();
        });
    }

    &__sidebar {
        .stack-col-thirds();
        .stack-col-eighths();

        .respond-to-min(801px, {
            .stack-col(content-l_col-1-2);
        });
    }

    &__large-gutters {
        .respond-to-min(@tablet-min, {
            margin-left: -@grid_gutter-width;
            margin-right: -@grid_gutter-width;

            & .content-l_col {
                border-left-width: @grid_gutter-width;
                border-right-width: @grid_gutter-width;
            }
        });
    }
}

.content-l_col {
    & + & {
        margin-top: unit(@grid_gutter-width / @base-font-size-px, em);
    }
    .respond-to-min(@tablet-min, {
        &.content-l_col-1-2 + &.content-l_col-1-2,
        &.content-l_col-1-3 + &.content-l_col-1-3,
        &.content-l_col-3-8 + &.content-l_col-3-8,
        &.content-l_col-3-8 + &.content-l_col-5-8,
        &.content-l_col-5-8 + &.content-l_col-3-8 {
            margin-top: 0;
        }
    });
}

.content-l_col-1 {
    .respond-to-min(@tablet-min, {
        .grid_column(12);
    });
}

.content-l_col-1-2 {
    .respond-to-min(@tablet-min, {
        .grid_column(6);
    });
}

.content-l_col-1-3 {
    .respond-to-min(@tablet-min, {
        .grid_column(4);
    });
}

.content-l_col-2-3 {
    .respond-to-min(@tablet-min, {
        .grid_column(8);
    });
}

.content-l_col-3-8 {
    .respond-to-min(@tablet-min, {
        .grid_column(3, 8);
    });
}

.content-l_col-5-8 {
    .respond-to-min(@tablet-min, {
        .grid_column(5, 8);
    });
}

/* topdoc
  name: Content layout column dividers
  family: cf-layout
  notes:
    - "Adds dividers between specified .content-l_col-X-X classes."
    - "Layout dividers work in conjunction with .content-l_col-X-X elements and
       have specific needs depending on which column element variant they are
       attached to. For example .content-l_col-1-2 has different divider needs
       than .content-l_col-1-3 because they may break to single columns at different
       breakpoints."
    - "Dividers use absolute positioning relative to the .content-l element and
       depends on .content-l using `position: relative;`. This allows vertical
       dividers to span the height of the tallest column. Just be aware that if
       you have more than one row of columns, and each row has columns of
       different widths, the borders will cause unwanted overlapping since they
       will span the height of the entire .content-l element."
  patterns:
    - name: .content-l_col__before-divider (modifier)
      markup: |

                Half-width column (spans 6/12 columns)

                Half-width column (spans 6/12 columns)

                Third-width column (spans 4/12 columns)

                Third-width column (spans 4/12 columns)

                Third-width column (spans 4/12 columns)

      codenotes:
        - .content-l_col__before-divider
  tags:
    - cf-layout
*/

.content-l_col__before-divider.content-l_col-1-2 {
    .respond-to-max(@mobile-max {
        .grid_column__top-divider();
    });

    .respond-to-min(@tablet-min, {
        .grid_column__left-divider();
    });
}

.content-l_col__before-divider.content-l_col-1-3 {
    .respond-to-max(@mobile-max {
        .grid_column__top-divider();
    });

    .respond-to-min(@tablet-min, {
        .grid_column__left-divider();
    });
}

.stack-col(@col) {
    .content-l_col.@{col} {
        width: 100%;

        &.content-l_col__before-divider {
            .grid_column__top-divider();
        }
    }

    &.content-l__large-gutters {
        .content-l_col.@{col}.content-l_col__before-divider {
            border-left-width: @grid_gutter-width;
        }
    }

    .content-l_col.@{col} + .content-l_col.@{col} {
        margin-top: unit(@grid_gutter-width / @base-font-size-px, em);
    }
}

.stack-col-thirds() {
  .stack-col(content-l_col-1-3);
  .stack-col(content-l_col-2-3);

  .content-l_col.content-l_col-1-3 + .content-l_col.content-l_col-2-3,
  .content-l_col.content-l_col-2-3 + .content-l_col.content-l_col-1-3 {
     margin-top: unit(@grid_gutter-width / @base-font-size-px, em);
  }
}

.stack-col-eighths() {
  .stack-col(content-l_col-3-8);
  .stack-col(content-l_col-5-8);

  .content-l_col.content-l_col-3-8 + .content-l_col.content-l_col-5-8,
  .content-l_col.content-l_col-5-8 + .content-l_col.content-l_col-3-8 {
     margin-top: unit(@grid_gutter-width / @base-font-size-px, em);
  }
}

/* topdoc
  name: Content bar
  family: cf-layout
  patterns:
    - name: A 10 pixel bar that divides the header or hero from the main content
      markup: |

      notes:
        - "This is necessary because we don't have a predictable place to put a
           full-width border. It needs to be under the hero on pages with
           heroes, but under the header if there is no hero."
        - ".content_bar must come after .content_hero but before .content_wrapper"
  tags:
    - cf-layout
*/

.content_bar {
    height: 10px;
    background: @green;
}

/* topdoc
  name: Content line
  family: cf-layout
  patterns:
    - name: "A 1 pixel edge to edge bar that can divide content."
      markup: |

  tags:
    - cf-layout
*/

.content_line {
    height: 1px;
    background: @gray-50;
}

/* topdoc
  name: Main content and sidebar
  family: cf-layout
  patterns:
    - name: Standard layout for the main content area and sidebar
      markup: |

                Content hero

                    Main content area

                    Sidebar

      codenotes:
        - |
          Structural cheat sheet:
          -----------------------
          main.content
            .content_hero
            .content_bar
            .content_wrapper
              .content_sidebar
              .content_main
      notes:
        - "By default .content_main and .content_sidebar stack vertically. When
           using the modifiers described below to create columns, the columns
           will remain stacked for smaller screens and then convert to to
           columns at 801px."
        - ".content_bar must come after .content_hero (if it exists) but before
           .content_wrapper."
        - "Inline styling is for demonstration purposes only; do not include it
           in your markup."
    - name: Left-hand navigation layout
      markup: |

                    Section navigation

Main content area

                        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                        Cum corrupti tempora nam nihil qui mollitia consectetur
                        corporis nemo culpa dolorum! Laborum at eos deleniti
                        consequatur itaque officiis debitis quisquam! Provident!

                Footer

      codenotes:
        - .content__1-3
      notes:
        - "Add a class of .content__L-R to main.content to determine the width
           ratio of .content_main and .content_sidebar, where 'L' is the
           left-hand item and 'R' is the right-hand item. The two common
           configurations are 1-3 (sidebar on the left, content on the right, in
           a ratio of 1:3) and 2-1 (content on the left, sidebar on the right,
           in a ratio of 2:1). It is assumed that the content is wider than the
           sidebar."
    - name: Right-hand sidebar layout
      markup: |

Main content area

                        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                        Cum corrupti tempora nam nihil qui mollitia consectetur
                        corporis nemo culpa dolorum! Laborum at eos deleniti
                        consequatur itaque officiis debitis quisquam! Provident!

                    Sidebar

                Footer

      codenotes:
        - .content__2-1
      notes:
        - "Add a class of .content__L-R to main.content to determine the width
           ratio of .content_main and .content_sidebar, where 'L' is the
           left-hand item and 'R' is the right-hand item. The two common
           configurations are 1-3 (sidebar on the left, content on the right, in
           a ratio of 1:3) and 2-1 (content on the left, sidebar on the right,
           in a ratio of 2:1). It is assumed that the content is wider than the
           sidebar."
        - "Inline styling is for demonstration purposes only; do not include it
           in your markup."
    - name: Narrow content column option
      markup: |

Main content area

                        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                        Cum corrupti tempora nam nihil qui mollitia consectetur
                        corporis nemo culpa dolorum! Laborum at eos deleniti
                        consequatur itaque officiis debitis quisquam! Provident!

                    Sidebar

                Footer

      codenotes:
        - .content_main__narrow
      notes:
        - "Add a class of .content_main__narrow to .content_main to get a
           one-column (in a 12-column grid) gutter on the right side."
        - "Inline styling is for demonstration purposes only; do not include it
           in your markup."
    - name: Flush bottom modifier
      markup: |

                    Side with no bottom padding...

                    Main content with no bottom padding...

                        .content__flush-bottom is very useful when you have a
                        content block inside of .content_main with a background
                        and flush sides.

                Footer

      codenotes:
        - .content__flush-bottom
      notes:
        - "Add a class of .content__flush-bottom to .content_main or
           content_sidebar to remove bottom padding."
    - name: Flush top modifier (only on small screens)
      markup: |

                    Side with no top padding on small screens...

                    Main content

                Footer

      codenotes:
        - .content__flush-top-on-small
      notes:
        - "Add a class of .content__flush-top-on-small to .content_main or
           .content_sidebar to remove top padding on small screens only.
           'Small' screens in this case refers to the breakpoint where
           .content_main and .content_sidebar single column layout."
    - name: Flush all modifier (only on small screens)
      markup: |

                    Side with no padding or border-based gutters on small screens...

                    Main content

                Footer

      codenotes:
        - .content__flush-all-on-small
      notes:
        - "Add a class of .content__flush-all-on-small to .content_main or
           .content_sidebar to remove all padding and border-based gutters on
           small screens only. 'Small' screens in this case refers to the
           breakpoint where .content_main and .content_sidebar single column layout."
  tags:
    - cf-layout
*/

.content_wrapper {
    &:extend(.wrapper all);
}

.content_intro,
.content_main,
.content_sidebar {
    padding: unit(@grid_gutter-width / @base-font-size-px, em)
             unit((@grid_gutter-width / 2) / @base-font-size-px, em);

    .respond-to-min(600px, {
        .grid_column(12);
        padding: unit((@grid_gutter-width * 2) / @base-font-size-px, em)
                 unit((@grid_gutter-width / 2) / @base-font-size-px, em);
    });

    .respond-to-min(801px, {
        padding: unit((@grid_gutter-width * 2) / @base-font-size-px, em)
                 0;
    });
}

.respond-to-min(801px, {
    .content_intro {
        .grid_column(12);
    }
});

// Set up standard multi-column content area layouts
.respond-to-min(801px, {
    .content {
        &__1-3 {
            .content_sidebar {
                .grid_column(3);

                padding-right: unit(@grid_gutter-width / @base-font-size-px, em);
            }

            .content_main {
                .grid_column(9);
                position: relative;

                &:after {
                    content: '';
                    border-left: 1px solid @gray-50;
                    position: absolute;
                    top: unit((@grid_gutter-width * 2) / @base-font-size-px, em);
                    bottom: 0;
                    left: unit(-1 * @grid_gutter-width / @base-font-size-px, em);
                }
            }
        }

        &__2-1 {
            .content_main {
                .grid_column(8);

                &:after {
                    right: unit(-1 * @grid_gutter-width / @base-font-size-px, em);
                }
            }

            .content_sidebar {
                .grid_column(4);

                padding-left: unit(@grid_gutter-width / @base-font-size-px, em);
            }
        }
    }
}); // END min-width 801 block

.respond-to-min(1024px, {
    .content__2-1 .content_main__narrow {
        .grid_column(7, @grid_total-columns, 0, 1);
    }
});

.content__flush-bottom {
    padding-bottom: 0;
}

.content__flush-top-on-small {
    .respond-to-max(800px, {
        padding-top: 0;
    });
}

.content__flush-all-on-small {
    .respond-to-max(800px, {
        padding: 0;
        border-width: 0;
    });
}

/* topdoc
  name: Block
  family: cf-layout
  notes:
    - ".block is a base class with several modifiers that help you separate
       chunks of content via margins, padding, borders, and backgrounds."
  patterns:
    - name: Standard block example
      markup: |
        Main content...

            Content block

            Content block

            Content block

      codenotes:
        - .block
      notes:
        - "The standard .block class by itself simply adds a margin of twice the
           gutter width to the top and bottom."
    - name: Flush-top modifier
      markup: |
        Main content...

            Content block with no top margin.

            Content block

      codenotes:
        - .block.block__flush-top
      notes:
        - "Removes the top margin from .block."
    - name: Flush-bottom modifier
      markup: |
        Main content...

            Content block with no bottom margin.

            Content block with no top margin.

      codenotes:
        - .block.block__flush-bottom
      notes:
        - "Removes the bottom margin from .block."
    - name: Flush-sides modifier
      markup: |

                    Section navigation

                    Main content...

                        Content block with no side margins.

      codenotes:
        - .block.block__flush-sides
      notes:
        - "Removes the side margin from .block."
        - "Typically used in conjuction with .block__bg to create a 'well' whose
           background extends into the left and right gutters. (See below.)"
    - name: Border-top modifier
      markup: |
        Main content...

            Content block with top border.

      codenotes:
        - .block.block__border-top
      notes:
        - "Adds top border to .block."
    - name: Border-bottom modifier
      markup: |
        Main content...

            Content block with bottom border.

      codenotes:
        - .block.block__border-bottom
      notes:
        - "Adds bottom border to .block."
    - name: Padded-top modifier
      markup: |
        Main content...

            Content block with reduced top margin & added top padding
            and border.

      codenotes:
        - .block.block__padded-top
      notes:
        - "Breaks top margin into margin & padding. Useful in combination with
           block__border-top to add padding between block contents & border."
    - name: Padded-bottom modifier
      markup: |

            Content block with reduced bottom margin & added bottom padding
            and border.

        Content...
      codenotes:
        - .block.block__padded-bottom
      notes:
        - "Breaks bottom margin into margin & padding. Useful in combination with
           block__border-bottom to add padding between block contents & border."
    - name: Background modifier
      markup: |
        Main content...

            Content block with a background

      codenotes:
        - .block.block__bg
      notes:
        - "Adds a background color and padding to .block."
    - name: Background and flush-sides modifier combo example
      markup: |

                    Section navigation

                    Main content...

                        Content block with a background and flush sides

      codenotes:
        - .block.block__flush-sides.block__bg
      notes:
        - "This is an example of combining modifiers to get a flush padded bg
           with a .block."
    - name: Sub blocks
      markup: |

                Sub content block

                Sub content block

                Sub content block

      codenotes:
        - .block.block__sub
      notes:
        - "Useful for when you need some consistent margins between
           blocks that are nested within other blocks."
        - "Note that the divs with inline styles are for demonstration purposes
           only and should not be used in production."
    - name: Mixing content blocks with content layouts
      markup: |

                    Content block that is also a content column.
                    Notice how my top margins only exist on smaller screens when
                    I need to stack vertically.

                    Content block that is also a content column.
                    Notice how my top margins only exist on smaller screens when
                    I need to stack vertically.

      codenotes:
        - .block.content-l_col
      notes:
        - "You can safely combine .block with .content-l_col to
           achieve a column-based layout at larger screens with no top margins
           and a vertical layout at smaller screens that do have margins."
        - "Note that the divs with inline styles are for demonstration purposes
           only and should not be used in production."
  tags:
    - cf-layout
*/

.block {
    margin-top: unit((@grid_gutter-width * 2) / @base-font-size-px, em);
    margin-bottom: unit((@grid_gutter-width * 2) / @base-font-size-px, em);

    &__border-top {
        border-top: 1px solid @gray-50;
    }

    &__border-bottom {
        border-bottom: 1px solid @gray-50;
    }

    &__flush-top {
        margin-top: 0 !important;
    }

    &__flush-bottom {
        margin-bottom: 0 !important;
    }

    &__flush-sides {
        margin-right: -(@grid_gutter-width / 2);
        margin-left: -(@grid_gutter-width / 2);
        .respond-to-min(600px, {
            margin-right: -@grid_gutter-width;
            margin-left: -@grid_gutter-width;
        });
    }

    &__bg {
        padding: unit(@grid_gutter-width / @base-font-size-px, em)
                 unit((@grid_gutter-width / 2) / @base-font-size-px, em);
        background: @gray-10;
        .respond-to-min(600px, {
            padding: unit(45 / @base-font-size-px, em)
                     unit(@grid_gutter-width / @base-font-size-px, em);
        });
    }

    &__padded-top {
        padding-top: unit(30px / @base-font-size-px, em);
        margin-top: unit(30px / @base-font-size-px, em);
    }

    &__padded-bottom {
        padding-bottom: unit(30px / @base-font-size-px, em);
        margin-bottom: unit(30px / @base-font-size-px, em);
    }

    &__sub {
        margin-top: unit(30px / @base-font-size-px, em);
        margin-bottom: unit(30px / @base-font-size-px, em);
    }

    // Overrides for when .block is also a column
    .content-l_col&,
    .content-l_col&__sub {
        .respond-to-min(600px, {
            margin-top: 0;
        });
    }
}

/* topdoc
  name: Bleedbar sidebar styling
  family: cf-layout
  patterns:
    - name: Give the sidebar a background color that bleeds off the edge of the screen
      markup: |

                Content hero

                    Main content area

                    Bleeding sidebar

      codenotes:
        - ".content__bleedbar"
      notes:
        - "Simply add class .content__bleedbar to main.content."
        - "Only supports sidebars on the right, for now."
        - "Inline styling is for demonstration purposes only; do not include it
           in your markup."
  tags:
    - cf-layout
*/

.content__bleedbar {
    // Overrides the border between main and sidebar, because bleedbar makes its own.
    .content_main:after {
        content: none;
    }

    .content_sidebar {
        padding: unit(@grid_gutter-width / @base-font-size-px, em)
                 unit((@grid_gutter-width / 2) / @base-font-size-px, em);
        background: @gray-10;
    }

    .respond-to-min(801px, {
        // Prevent pseudo element background from creating horizontal scrollbar.
        overflow: hidden;

        .content_sidebar {
            padding: unit((@grid_gutter-width * 2) / @base-font-size-px, em)
                     0
                     unit((@grid_gutter-width / 2) / @base-font-size-px, em)
                     unit(@grid_gutter-width / @base-font-size-px, em);
            margin-left: 0;
            position: relative;
            z-index: 1;

            // Remove background color from actual sidebar.
            // It will now be provided by pseudoelement :after sidebar parent.
            background: transparent;

            .lt-ie8 & {
                // Make sure the sidebar still has a background in IE7.
                padding-right: @grid_gutter-width;
                background: @gray-10;
            }
        }

        .content_wrapper:after {
            // Create faux sidebar background.
            content: '';
            display: block;
            width: 9999px;
            border-left: 1px solid @gray-50;
            height: 100%;
            position: absolute;
            top: 0;
            z-index: 0;
            // The three in the below calculation is a magic number.
            // Not entirely sure what to do about it right now.
            margin-left: (@grid_gutter-width / 3);
            background: @gray-10;
        }

        &.content__2-1 .content_wrapper:after {
            left: 66.666666667%;
        }

        &.content__3-1 .content_wrapper:after {
            left: 75%;
        }
    });
}

/* topdoc
  name: cf-grid helpers
  family: cf-layout
  patterns:
    - name: .wrapper (base)
      markup: |

            Wrapper

      notes:
        - "Turns an element into a cf-grid wrapper at 801px and above."
        - "Includes some explicit declarations for IE8 due to the fact that it
           doesn't support media queries."
    - name: .wrapper__match-content (modifier)
      markup: |

            .wrapper.wrapper__match-content

                    .content_wrapper .content_main

      notes:
        - "The .content area has a visual gutter twice the size of a normal
           wrapper because the gutters from the sidebar and main content divs
           add to the gutters of the wrapper. This modifier gives you a wrapper
           with wider gutters to match the visual gutters of the .content area."
    - name: Column divider modifiers
      notes:
        - "cf-grid columns use left and right borders for fixed margins which
           means it's not possible to set visual left and right borders directly
           on them. Instead we can use the :before pseudo element and position
           it absolutely. The added benefit of doing it this way is that the
           border spans the entire height of the next parent using `position:
           relative;`. This means that the border will always match the height
           of the tallest column in the row."
      codenotes:
        - .grid_column__top-divider
        - .grid_column__left-divider
        - |
          .my-column-1-2 {

              // Creates a column that spans 6 out of 12 columns.
              .grid_column(6, 12);

              // Add a top divider only at screen 599px and smaller.
              .respond-to-max(599px {
                  .grid_column__top-divider();
              });

              // Add a left divider only at screen 600px and larger.
              .respond-to-min(600px, {
                  .grid_column__left-divider();
              });

          }
  tags:
    - cf-layout
*/

.wrapper {
    .respond-to-min(801px, {
        .grid_wrapper();
    });

    &__match-content {
        padding-left: @grid_gutter-width / 2;
        padding-right: @grid_gutter-width / 2;

        .respond-to-min(600px, {
            padding-left: @grid_gutter-width;
            padding-right: @grid_gutter-width;
            max-width: 1140px;
        });
    }
}

.lt-ie9 {
    & .wrapper {
        max-width: 960px;
    }

    & body {
        min-width: 800px;
    }
}

.grid_column__top-divider {
    margin-top: unit((@grid_gutter-width * 2) / @base-font-size-px, em);
    border-left-width: @grid_gutter-width / 2;

    &:before {
        content: "";
        display: block;
        height: 1px;
        margin-bottom: unit(@grid_gutter-width / @base-font-size-px, em);
        background-color: @gray-50;
        position: static;
        width: 100%;
        margin-left: auto !important;
    }
}

.grid_column__left-divider {
    border-left-width: @grid_gutter-width;

    &:before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        width: 1px;
        display: block;
        background-color: @gray-50;
        margin-left: -@grid_gutter-width;
    }
}

/* topdoc
  name: Hero
  family: cf-layout
  patterns:
    - name: .hero
      markup: |

Hero title

                        Hero text goes here

                        Call to action

      notes:
        - "Hero consists of a headline, a small amount of additional text, an optional call to
           action, and an illustration. Its background color is flush with
           the sides of the screen, and the content is centered with wrapper classes."
        - "The illustration can be customized by setting the background-image property
           on the .hero_wrapper's after pseudo element."
        - "On small screens (or where media queries are not supported), the text spans the
           full width of the .hero_wrapper and the illustration is displayed underneath.
           To customize, set a background size on the .hero_wrapper:after pseudo element,
           and set a bottom padding value on the .hero_wrapper equal to the height of the
           illustration + the desired top and bottom padding for the illustration. When
           customizing the bottom padding value, it must be reset on larger screen sizes."
        - "For larger screen sizes, media queries are used to position the illustration
           to the right of the text. A space equivalent to the width of 5 of 12 columns
           is allotted to the image at each breakpoint (333px for tablet, 475px on desktop),
           and the image is centered vertically and horizontally within that space.
           To customize the image size, set a background-size for the .hero_wrapper:after pseudo
           element at each breakpoint."
        - "On desktop, the hero should not exceed 300px in height. The image should be 195px in
           height to conform to this standard."
      codenotes:
        - .hero
    - name: .hero__wide-image
      markup: |

Hero title

                        Hero text goes here

                        Call to action

      notes:
        - "If the illustration is wide enough to take up the whole space allotted
           for it, add the wide-image class to position the illustration at the top
           right, rather than center of the image area."
      codenotes:
        - .hero__wide-image
    - name: .hero__small-content modifier
      markup: |

Hero title

                        Hero text goes here

      notes:
        - "If the hero text is short or doesn't include a call to action, adding
           the small-content class will increase the top padding value so the
           text is more vertically aligned with the image."
      codenotes:
        - .hero__small-content
  tags:
    - cf-layout
*/

// 300px - 60px for top/bottom padding
@hero-desktop-height: 240px;
@hero-image-height: 195px;

.hero {
  background-color: @gray-10;

  &_wrapper {
    padding: unit(@grid_gutter-width / @base-font-size-px, em)
             unit(15px / @base-font-size-px, em);

    .respond-to-min(@tablet-min, {
      display: table;
      min-height: unit(@hero-desktop-height / @base-font-size-px, em);
    });

    .respond-to-min(@desktop-min, {
      padding: unit(45px / @base-font-size-px, em);
    });

    .lt-ie9 & {
      // Reduce min-height because IE8 apparently isn't honoring the border-box property,
      // perhaps due to bug seen here: http://grab.by/JutE
      min-height: initial;
    }
  }

  &_text {
    .respond-to-min(@tablet-min, {
      .grid_column(1, 2);
      display: table-cell;
      vertical-align: middle;
    });

    .respond-to-min(801px, {
      .grid_column(7,12);
      display: table-cell;
      vertical-align: middle;
    });
  }

  &_heading {
    .heading-1();

    .respond-to-max(800px, {
      .heading-2();
    });
  }

  &_subhead {
    .heading-3();

    margin-bottom: unit(@grid_gutter-width / 22px, em);

    .respond-to-max(800px, {
      .heading-4();
    });

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

  &_cta {
    .webfont-regular();

    margin-bottom: initial;
  }

  &_image {
    position: relative;
    min-height: unit(@hero-image-height / @base-font-size-px, em);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;

    .respond-to-min(@tablet-min, {
      .grid_column(1, 2);
      display: table-cell;
      vertical-align: middle;
    });

    .respond-to-min(801px, {
      .grid_column(5,12);
      display: table-cell;
      vertical-align: middle;
    });

    .respond-to-max(@mobile-max, {
      margin-top: unit(@grid_gutter-width / @base-font-size-px, em);
    });
  }
}

/**
 * TEMP FIX FOR HEADING RECURSION ISSUE, SEE OPEN PR AT CF-CORE.
 * https://github.com/cfpb/cf-core/pull/48
 */
.heading-1( @font-size: 34px, @line-height: 44px ) {
    .webfont-regular();
    // Spacing in the design manual is based off of the baseline so this margin
    // number has been eyeballed to be 30px.
    margin-bottom: unit( 16px / @font-size, em );
    font-size: unit( @font-size / @base-font-size-px, em );
    line-height: unit( @line-height / @font-size );
}

.heading-2( @font-size: 26px, @line-height: 33px ) {
    .webfont-regular();
    // Spacing in the design manual is based off of the baseline so this margin
    // number has been eyeballed to be 30px.
    margin-bottom: unit( 19px / @font-size, em );
    font-size: unit( @font-size / @base-font-size-px, em );
    line-height: unit( @line-height / @font-size );
}

.heading-3( @font-size: 22px, @line-height: 28px )  {
    .webfont-regular();
    // Spacing in the design manual is based off of the baseline so this margin
    // number has been eyeballed to be 30px.
    margin-bottom: unit( 21px / @font-size, em );
    font-size: unit( @font-size / @base-font-size-px, em );
    line-height: unit( @line-height / @font-size );
}

.heading-4( @font-size: 18px, @line-height: @base-line-height-px )  {
    .webfont-medium();
    // Spacing in the design manual is based off of the baseline so this margin
    // number has been eyeballed to be 30px.
    margin-bottom: unit( 21px / @font-size, em );
    font-size: unit( @font-size / @base-font-size-px, em );
    line-height: unit( @line-height / @font-size );
}

/* topdoc
    name: EOF
    eof: true
*/

/* ==========================================================================
   Capital Framework
   Layout Helpers
   ========================================================================== */

/* topdoc
  name: Content layouts
  family: cf-layout
  patterns:
    - name: Standard content columns
      markup: |

                    Full-width column (spans 12 columns)

                    Half-width column (spans 6/12 columns)

                    Half-width column (spans 6/12 columns)

                    Third-width column (spans 4/12 columns)

                    Third-width column (spans 4/12 columns)

                    Third-width column (spans 4/12 columns)

                    Two thirds-width column (spans 8/12 columns)

      codenotes:
        - |
          Structural cheat sheet:
          -----------------------
          .content-l
            .content-l_col
      notes:
        - "Simplifies use of grid structure inside content containers (like .content-main)."
        - "Since .content-l_col's are nested within .content_main extra margins will occur.
           The .content-l container uses the grid_nested-col-group mixin to counter this."
        - ".content-l_col-RATIO classes default to stacking on mobile and displaying as columns
           above mobile-max width (600px). This may not be the desired breakpoint for
           all use cases, so mixins are provided to simplify changing column display to
           stacked."
        - "Three .content-l modifiers handle the stacking overrides for use cases of
           .content_main, .content_full, and .content_sidebar containers."
        - "Note that the divs with inline styles are for demonstration purposes
           only and should not be used in production."
    - name: .content-l__full modifier
      markup: |

                   Full-width column (spans 12 columns)

                   Half-width column (spans 6/12 columns)

                   Half-width column (spans 6/12 columns)

                   Third-width column (spans 4/12 columns)

                   Third-width column (spans 4/12 columns)

                   Third-width column (spans 4/12 columns)

                   Two thirds-width column (spans 8/12 columns)

      codenotes:
        - .content-l.content-l__full
      notes:
        - "Designed for use within .content_full containers."
        - "Displays .content-l_col-1-2 as columns at tablet sizes & above (600px+)"
        - "Displays other common .content-l_col modifiers (.content-l_col-1-3,
           .content-l_col-2-3, .content-l_col-3-8, .content-l_col-5-8)
           as columns above 767px."
    - name: .content-l__main modifier
      markup: |

                     Full-width column (spans 12 columns)

                     Half-width column (spans 6/12 columns)

                     Half-width column (spans 6/12 columns)

                     Third-width column (spans 4/12 columns)

                     Third-width column (spans 4/12 columns)

                     Third-width column (spans 4/12 columns)

                     Two thirds-width column (spans 8/12 columns)

      codenotes:
        - .content-l.content-l__main
      notes:
        - "Designed for use in .content_main containers, which have reduced (75%) width
           above tablet sizes to accommodate adjacent sidebar column."
        - "Displays .content-l_col-1-2 as columns in the tablet range, 600-800px;
           stacked from 800-899, the start of sidebar range; and as columns again at 900px+"
        - "Displays other common .content-l_col modifiers (.content-l_col-1-3, .content-l_col-2-3,
           .content-l_col-3-8, .content-l_col-5-8) as columns above 900px."
    - name: .content-l__sidebar modifier
      markup: |

                     Full-width column (spans 12 columns)

                   Half-width column (spans 6/12 columns)

                   Half-width column (spans 6/12 columns)

                   Third-width column (spans 4/12 columns)

                   Third-width column (spans 4/12 columns)

                   Third-width column (spans 4/12 columns)

                   Two thirds-width column (spans 8/12 columns)

      codenotes:
        - .content-l.content-l__sidebar
      notes:
        - "For use in sidebar containers, which are full width only
           on tablet widths (600-800px)."
        - "Displays .content-l_col-1-2 as columns in the tablet range,
           600-800px, and stacked at all other widths."
    - name: Large gutters modifier
      markup: |

                    Full-width column (spans 12 columns)

                    Half-width column (spans 6/12 columns)

                    Half-width column (spans 6/12 columns)

      codenotes:
        - .content-l.content-l__large-gutters
      notes:
        - "Adds 30px gutters to all columns by simply adding the
           .content-l__large-gutters modifier."
  tags:
    - cf-layout
*/

.content-l {
    // Used to position __divider modifiers
    position: relative;

    .respond-to-min(@tablet-min, {
        .grid_nested-col-group();
    });

    &__full {
        .respond-to-range(@tablet-min, 767px, {
            .stack-col-thirds();
            .stack-col-eighths();
        });
    }

    &__main {
        .respond-to-range(801px, 899px, {
            .stack-col(content-l_col-1-2);
        });

        .respond-to-range(@tablet-min, 899px, {
            .stack-col-thirds();
            .stack-col-eighths();
        });
    }

    &__sidebar {
        .stack-col-thirds();
        .stack-col-eighths();

        .respond-to-min(801px, {
            .stack-col(content-l_col-1-2);
        });
    }

    &__large-gutters {
        .respond-to-min(@tablet-min, {
            margin-left: -@grid_gutter-width;
            margin-right: -@grid_gutter-width;

            & .content-l_col {
                border-left-width: @grid_gutter-width;
                border-right-width: @grid_gutter-width;
            }
        });
    }
}

.content-l_col {
    & + & {
        margin-top: unit(@grid_gutter-width / @base-font-size-px, em);
    }
    .respond-to-min(@tablet-min, {
        &.content-l_col-1-2 + &.content-l_col-1-2,
        &.content-l_col-1-3 + &.content-l_col-1-3,
        &.content-l_col-3-8 + &.content-l_col-3-8,
        &.content-l_col-3-8 + &.content-l_col-5-8,
        &.content-l_col-5-8 + &.content-l_col-3-8 {
            margin-top: 0;
        }
    });
}

.content-l_col-1 {
    .respond-to-min(@tablet-min, {
        .grid_column(12);
    });
}

.content-l_col-1-2 {
    .respond-to-min(@tablet-min, {
        .grid_column(6);
    });
}

.content-l_col-1-3 {
    .respond-to-min(@tablet-min, {
        .grid_column(4);
    });
}

.content-l_col-2-3 {
    .respond-to-min(@tablet-min, {
        .grid_column(8);
    });
}

.content-l_col-3-8 {
    .respond-to-min(@tablet-min, {
        .grid_column(3, 8);
    });
}

.content-l_col-5-8 {
    .respond-to-min(@tablet-min, {
        .grid_column(5, 8);
    });
}

/* topdoc
  name: Content layout column dividers
  family: cf-layout
  notes:
    - "Adds dividers between specified .content-l_col-X-X classes."
    - "Layout dividers work in conjunction with .content-l_col-X-X elements and
       have specific needs depending on which column element variant they are
       attached to. For example .content-l_col-1-2 has different divider needs
       than .content-l_col-1-3 because they may break to single columns at different
       breakpoints."
    - "Dividers use absolute positioning relative to the .content-l element and
       depends on .content-l using `position: relative;`. This allows vertical
       dividers to span the height of the tallest column. Just be aware that if
       you have more than one row of columns, and each row has columns of
       different widths, the borders will cause unwanted overlapping since they
       will span the height of the entire .content-l element."
  patterns:
    - name: .content-l_col__before-divider (modifier)
      markup: |

                Half-width column (spans 6/12 columns)

                Half-width column (spans 6/12 columns)

                Third-width column (spans 4/12 columns)

                Third-width column (spans 4/12 columns)

                Third-width column (spans 4/12 columns)

      codenotes:
        - .content-l_col__before-divider
  tags:
    - cf-layout
*/

.content-l_col__before-divider.content-l_col-1-2 {
    .respond-to-max(@mobile-max {
        .grid_column__top-divider();
    });

    .respond-to-min(@tablet-min, {
        .grid_column__left-divider();
    });
}

.content-l_col__before-divider.content-l_col-1-3 {
    .respond-to-max(@mobile-max {
        .grid_column__top-divider();
    });

    .respond-to-min(@tablet-min, {
        .grid_column__left-divider();
    });
}

.stack-col(@col) {
    .content-l_col.@{col} {
        width: 100%;

        &.content-l_col__before-divider {
            .grid_column__top-divider();
        }
    }

    &.content-l__large-gutters {
        .content-l_col.@{col}.content-l_col__before-divider {
            border-left-width: @grid_gutter-width;
        }
    }

    .content-l_col.@{col} + .content-l_col.@{col} {
        margin-top: unit(@grid_gutter-width / @base-font-size-px, em);
    }
}

.stack-col-thirds() {
  .stack-col(content-l_col-1-3);
  .stack-col(content-l_col-2-3);

  .content-l_col.content-l_col-1-3 + .content-l_col.content-l_col-2-3,
  .content-l_col.content-l_col-2-3 + .content-l_col.content-l_col-1-3 {
     margin-top: unit(@grid_gutter-width / @base-font-size-px, em);
  }
}

.stack-col-eighths() {
  .stack-col(content-l_col-3-8);
  .stack-col(content-l_col-5-8);

  .content-l_col.content-l_col-3-8 + .content-l_col.content-l_col-5-8,
  .content-l_col.content-l_col-5-8 + .content-l_col.content-l_col-3-8 {
     margin-top: unit(@grid_gutter-width / @base-font-size-px, em);
  }
}

/* topdoc
  name: Content bar
  family: cf-layout
  patterns:
    - name: A 10 pixel bar that divides the header or hero from the main content
      markup: |

      notes:
        - "This is necessary because we don't have a predictable place to put a
           full-width border. It needs to be under the hero on pages with
           heroes, but under the header if there is no hero."
        - ".content_bar must come after .content_hero but before .content_wrapper"
  tags:
    - cf-layout
*/

.content_bar {
    height: 10px;
    background: @green;
}

/* topdoc
  name: Content line
  family: cf-layout
  patterns:
    - name: "A 1 pixel edge to edge bar that can divide content."
      markup: |

  tags:
    - cf-layout
*/

.content_line {
    height: 1px;
    background: @gray-50;
}

/* topdoc
  name: Main content and sidebar
  family: cf-layout
  patterns:
    - name: Standard layout for the main content area and sidebar
      markup: |

                Content hero

                    Main content area

                    Sidebar

      codenotes:
        - |
          Structural cheat sheet:
          -----------------------
          main.content
            .content_hero
            .content_bar
            .content_wrapper
              .content_sidebar
              .content_main
      notes:
        - "By default .content_main and .content_sidebar stack vertically. When
           using the modifiers described below to create columns, the columns
           will remain stacked for smaller screens and then convert to to
           columns at 801px."
        - ".content_bar must come after .content_hero (if it exists) but before
           .content_wrapper."
        - "Inline styling is for demonstration purposes only; do not include it
           in your markup."
    - name: Left-hand navigation layout
      markup: |

                    Section navigation

Main content area

                        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                        Cum corrupti tempora nam nihil qui mollitia consectetur
                        corporis nemo culpa dolorum! Laborum at eos deleniti
                        consequatur itaque officiis debitis quisquam! Provident!

                Footer

      codenotes:
        - .content__1-3
      notes:
        - "Add a class of .content__L-R to main.content to determine the width
           ratio of .content_main and .content_sidebar, where 'L' is the
           left-hand item and 'R' is the right-hand item. The two common
           configurations are 1-3 (sidebar on the left, content on the right, in
           a ratio of 1:3) and 2-1 (content on the left, sidebar on the right,
           in a ratio of 2:1). It is assumed that the content is wider than the
           sidebar."
    - name: Right-hand sidebar layout
      markup: |

Main content area

                        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                        Cum corrupti tempora nam nihil qui mollitia consectetur
                        corporis nemo culpa dolorum! Laborum at eos deleniti
                        consequatur itaque officiis debitis quisquam! Provident!

                    Sidebar

                Footer

      codenotes:
        - .content__2-1
      notes:
        - "Add a class of .content__L-R to main.content to determine the width
           ratio of .content_main and .content_sidebar, where 'L' is the
           left-hand item and 'R' is the right-hand item. The two common
           configurations are 1-3 (sidebar on the left, content on the right, in
           a ratio of 1:3) and 2-1 (content on the left, sidebar on the right,
           in a ratio of 2:1). It is assumed that the content is wider than the
           sidebar."
        - "Inline styling is for demonstration purposes only; do not include it
           in your markup."
    - name: Narrow content column option
      markup: |

Main content area

                        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                        Cum corrupti tempora nam nihil qui mollitia consectetur
                        corporis nemo culpa dolorum! Laborum at eos deleniti
                        consequatur itaque officiis debitis quisquam! Provident!

                    Sidebar

                Footer

      codenotes:
        - .content_main__narrow
      notes:
        - "Add a class of .content_main__narrow to .content_main to get a
           one-column (in a 12-column grid) gutter on the right side."
        - "Inline styling is for demonstration purposes only; do not include it
           in your markup."
    - name: Flush bottom modifier
      markup: |

                    Side with no bottom padding...

                    Main content with no bottom padding...

                        .content__flush-bottom is very useful when you have a
                        content block inside of .content_main with a background
                        and flush sides.

                Footer

      codenotes:
        - .content__flush-bottom
      notes:
        - "Add a class of .content__flush-bottom to .content_main or
           content_sidebar to remove bottom padding."
    - name: Flush top modifier (only on small screens)
      markup: |

                    Side with no top padding on small screens...

                    Main content

                Footer

      codenotes:
        - .content__flush-top-on-small
      notes:
        - "Add a class of .content__flush-top-on-small to .content_main or
           .content_sidebar to remove top padding on small screens only.
           'Small' screens in this case refers to the breakpoint where
           .content_main and .content_sidebar single column layout."
    - name: Flush all modifier (only on small screens)
      markup: |

                    Side with no padding or border-based gutters on small screens...

                    Main content

                Footer

      codenotes:
        - .content__flush-all-on-small
      notes:
        - "Add a class of .content__flush-all-on-small to .content_main or
           .content_sidebar to remove all padding and border-based gutters on
           small screens only. 'Small' screens in this case refers to the
           breakpoint where .content_main and .content_sidebar single column layout."
  tags:
    - cf-layout
*/

.content_wrapper {
    &:extend(.wrapper all);
}

.content_intro,
.content_main,
.content_sidebar {
    padding: unit(@grid_gutter-width / @base-font-size-px, em)
             unit((@grid_gutter-width / 2) / @base-font-size-px, em);

    .respond-to-min(600px, {
        .grid_column(12);
        padding: unit((@grid_gutter-width * 2) / @base-font-size-px, em)
                 unit((@grid_gutter-width / 2) / @base-font-size-px, em);
    });

    .respond-to-min(801px, {
        padding: unit((@grid_gutter-width * 2) / @base-font-size-px, em)
                 0;
    });
}

.respond-to-min(801px, {
    .content_intro {
        .grid_column(12);
    }
});

// Set up standard multi-column content area layouts
.respond-to-min(801px, {
    .content {
        &__1-3 {
            .content_sidebar {
                .grid_column(3);

                padding-right: unit(@grid_gutter-width / @base-font-size-px, em);
            }

            .content_main {
                .grid_column(9);
                position: relative;

                &:after {
                    content: '';
                    border-left: 1px solid @gray-50;
                    position: absolute;
                    top: unit((@grid_gutter-width * 2) / @base-font-size-px, em);
                    bottom: 0;
                    left: unit(-1 * @grid_gutter-width / @base-font-size-px, em);
                }
            }
        }

        &__2-1 {
            .content_main {
                .grid_column(8);

                &:after {
                    right: unit(-1 * @grid_gutter-width / @base-font-size-px, em);
                }
            }

            .content_sidebar {
                .grid_column(4);

                padding-left: unit(@grid_gutter-width / @base-font-size-px, em);
            }
        }
    }
}); // END min-width 801 block

.respond-to-min(1024px, {
    .content__2-1 .content_main__narrow {
        .grid_column(7, @grid_total-columns, 0, 1);
    }
});

.content__flush-bottom {
    padding-bottom: 0;
}

.content__flush-top-on-small {
    .respond-to-max(800px, {
        padding-top: 0;
    });
}

.content__flush-all-on-small {
    .respond-to-max(800px, {
        padding: 0;
        border-width: 0;
    });
}

/* topdoc
  name: Block
  family: cf-layout
  notes:
    - ".block is a base class with several modifiers that help you separate
       chunks of content via margins, padding, borders, and backgrounds."
  patterns:
    - name: Standard block example
      markup: |
        Main content...

            Content block

            Content block

            Content block

      codenotes:
        - .block
      notes:
        - "The standard .block class by itself simply adds a margin of twice the
           gutter width to the top and bottom."
    - name: Flush-top modifier
      markup: |
        Main content...

            Content block with no top margin.

            Content block

      codenotes:
        - .block.block__flush-top
      notes:
        - "Removes the top margin from .block."
    - name: Flush-bottom modifier
      markup: |
        Main content...

            Content block with no bottom margin.

            Content block with no top margin.

      codenotes:
        - .block.block__flush-bottom
      notes:
        - "Removes the bottom margin from .block."
    - name: Flush-sides modifier
      markup: |

                    Section navigation

                    Main content...

                        Content block with no side margins.

      codenotes:
        - .block.block__flush-sides
      notes:
        - "Removes the side margin from .block."
        - "Typically used in conjuction with .block__bg to create a 'well' whose
           background extends into the left and right gutters. (See below.)"
    - name: Border-top modifier
      markup: |
        Main content...

            Content block with top border.

      codenotes:
        - .block.block__border-top
      notes:
        - "Adds top border to .block."
    - name: Border-bottom modifier
      markup: |
        Main content...

            Content block with bottom border.

      codenotes:
        - .block.block__border-bottom
      notes:
        - "Adds bottom border to .block."
    - name: Padded-top modifier
      markup: |
        Main content...

            Content block with reduced top margin & added top padding
            and border.

      codenotes:
        - .block.block__padded-top
      notes:
        - "Breaks top margin into margin & padding. Useful in combination with
           block__border-top to add padding between block contents & border."
    - name: Padded-bottom modifier
      markup: |

            Content block with reduced bottom margin & added bottom padding
            and border.

        Content...
      codenotes:
        - .block.block__padded-bottom
      notes:
        - "Breaks bottom margin into margin & padding. Useful in combination with
           block__border-bottom to add padding between block contents & border."
    - name: Background modifier
      markup: |
        Main content...

            Content block with a background

      codenotes:
        - .block.block__bg
      notes:
        - "Adds a background color and padding to .block."
    - name: Background and flush-sides modifier combo example
      markup: |

                    Section navigation

                    Main content...

                        Content block with a background and flush sides

      codenotes:
        - .block.block__flush-sides.block__bg
      notes:
        - "This is an example of combining modifiers to get a flush padded bg
           with a .block."
    - name: Sub blocks
      markup: |

                Sub content block

                Sub content block

                Sub content block

      codenotes:
        - .block.block__sub
      notes:
        - "Useful for when you need some consistent margins between
           blocks that are nested within other blocks."
        - "Note that the divs with inline styles are for demonstration purposes
           only and should not be used in production."
    - name: Mixing content blocks with content layouts
      markup: |

                    Content block that is also a content column.
                    Notice how my top margins only exist on smaller screens when
                    I need to stack vertically.

                    Content block that is also a content column.
                    Notice how my top margins only exist on smaller screens when
                    I need to stack vertically.

      codenotes:
        - .block.content-l_col
      notes:
        - "You can safely combine .block with .content-l_col to
           achieve a column-based layout at larger screens with no top margins
           and a vertical layout at smaller screens that do have margins."
        - "Note that the divs with inline styles are for demonstration purposes
           only and should not be used in production."
  tags:
    - cf-layout
*/

.block {
    margin-top: unit((@grid_gutter-width * 2) / @base-font-size-px, em);
    margin-bottom: unit((@grid_gutter-width * 2) / @base-font-size-px, em);

    &__border-top {
        border-top: 1px solid @gray-50;
    }

    &__border-bottom {
        border-bottom: 1px solid @gray-50;
    }

    &__flush-top {
        margin-top: 0 !important;
    }

    &__flush-bottom {
        margin-bottom: 0 !important;
    }

    &__flush-sides {
        margin-right: -(@grid_gutter-width / 2);
        margin-left: -(@grid_gutter-width / 2);
        .respond-to-min(600px, {
            margin-right: -@grid_gutter-width;
            margin-left: -@grid_gutter-width;
        });
    }

    &__bg {
        padding: unit(@grid_gutter-width / @base-font-size-px, em)
                 unit((@grid_gutter-width / 2) / @base-font-size-px, em);
        background: @gray-10;
        .respond-to-min(600px, {
            padding: unit(45 / @base-font-size-px, em)
                     unit(@grid_gutter-width / @base-font-size-px, em);
        });
    }

    &__padded-top {
        padding-top: unit(30px / @base-font-size-px, em);
        margin-top: unit(30px / @base-font-size-px, em);
    }

    &__padded-bottom {
        padding-bottom: unit(30px / @base-font-size-px, em);
        margin-bottom: unit(30px / @base-font-size-px, em);
    }

    &__sub {
        margin-top: unit(30px / @base-font-size-px, em);
        margin-bottom: unit(30px / @base-font-size-px, em);
    }

    // Overrides for when .block is also a column
    .content-l_col&,
    .content-l_col&__sub {
        .respond-to-min(600px, {
            margin-top: 0;
        });
    }
}

/* topdoc
  name: Bleedbar sidebar styling
  family: cf-layout
  patterns:
    - name: Give the sidebar a background color that bleeds off the edge of the screen
      markup: |

                Content hero

                    Main content area

                    Bleeding sidebar

      codenotes:
        - ".content__bleedbar"
      notes:
        - "Simply add class .content__bleedbar to main.content."
        - "Only supports sidebars on the right, for now."
        - "Inline styling is for demonstration purposes only; do not include it
           in your markup."
  tags:
    - cf-layout
*/

.content__bleedbar {
    // Overrides the border between main and sidebar, because bleedbar makes its own.
    .content_main:after {
        content: none;
    }

    .content_sidebar {
        padding: unit(@grid_gutter-width / @base-font-size-px, em)
                 unit((@grid_gutter-width / 2) / @base-font-size-px, em);
        background: @gray-10;
    }

    .respond-to-min(801px, {
        // Prevent pseudo element background from creating horizontal scrollbar.
        overflow: hidden;

        .content_sidebar {
            padding: unit((@grid_gutter-width * 2) / @base-font-size-px, em)
                     0
                     unit((@grid_gutter-width / 2) / @base-font-size-px, em)
                     unit(@grid_gutter-width / @base-font-size-px, em);
            margin-left: 0;
            position: relative;
            z-index: 1;

            // Remove background color from actual sidebar.
            // It will now be provided by pseudoelement :after sidebar parent.
            background: transparent;

            .lt-ie8 & {
                // Make sure the sidebar still has a background in IE7.
                padding-right: @grid_gutter-width;
                background: @gray-10;
            }
        }

        .content_wrapper:after {
            // Create faux sidebar background.
            content: '';
            display: block;
            width: 9999px;
            border-left: 1px solid @gray-50;
            height: 100%;
            position: absolute;
            top: 0;
            z-index: 0;
            // The three in the below calculation is a magic number.
            // Not entirely sure what to do about it right now.
            margin-left: (@grid_gutter-width / 3);
            background: @gray-10;
        }

        &.content__2-1 .content_wrapper:after {
            left: 66.666666667%;
        }

        &.content__3-1 .content_wrapper:after {
            left: 75%;
        }
    });
}

/* topdoc
  name: cf-grid helpers
  family: cf-layout
  patterns:
    - name: .wrapper (base)
      markup: |

            Wrapper

      notes:
        - "Turns an element into a cf-grid wrapper at 801px and above."
        - "Includes some explicit declarations for IE8 due to the fact that it
           doesn't support media queries."
    - name: .wrapper__match-content (modifier)
      markup: |

            .wrapper.wrapper__match-content

                    .content_wrapper .content_main

      notes:
        - "The .content area has a visual gutter twice the size of a normal
           wrapper because the gutters from the sidebar and main content divs
           add to the gutters of the wrapper. This modifier gives you a wrapper
           with wider gutters to match the visual gutters of the .content area."
    - name: Column divider modifiers
      notes:
        - "cf-grid columns use left and right borders for fixed margins which
           means it's not possible to set visual left and right borders directly
           on them. Instead we can use the :before pseudo element and position
           it absolutely. The added benefit of doing it this way is that the
           border spans the entire height of the next parent using `position:
           relative;`. This means that the border will always match the height
           of the tallest column in the row."
      codenotes:
        - .grid_column__top-divider
        - .grid_column__left-divider
        - |
          .my-column-1-2 {

              // Creates a column that spans 6 out of 12 columns.
              .grid_column(6, 12);

              // Add a top divider only at screen 599px and smaller.
              .respond-to-max(599px {
                  .grid_column__top-divider();
              });

              // Add a left divider only at screen 600px and larger.
              .respond-to-min(600px, {
                  .grid_column__left-divider();
              });

          }
  tags:
    - cf-layout
*/

.wrapper {
    .respond-to-min(801px, {
        .grid_wrapper();
    });

    &__match-content {
        padding-left: @grid_gutter-width / 2;
        padding-right: @grid_gutter-width / 2;

        .respond-to-min(600px, {
            padding-left: @grid_gutter-width;
            padding-right: @grid_gutter-width;
            max-width: 1140px;
        });
    }
}

.lt-ie9 {
    & .wrapper {
        max-width: 960px;
    }

    & body {
        min-width: 800px;
    }
}

.grid_column__top-divider {
    margin-top: unit((@grid_gutter-width * 2) / @base-font-size-px, em);
    border-left-width: @grid_gutter-width / 2;

    &:before {
        content: "";
        display: block;
        height: 1px;
        margin-bottom: unit(@grid_gutter-width / @base-font-size-px, em);
        background-color: @gray-50;
        position: static;
        width: 100%;
        margin-left: auto !important;
    }
}

.grid_column__left-divider {
    border-left-width: @grid_gutter-width;

    &:before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        width: 1px;
        display: block;
        background-color: @gray-50;
        margin-left: -@grid_gutter-width;
    }
}

/* topdoc
  name: Hero
  family: cf-layout
  patterns:
    - name: .hero
      markup: |

Hero title

                        Hero text goes here

                        Call to action

      notes:
        - "Hero consists of a headline, a small amount of additional text, an optional call to
           action, and an illustration. Its background color is flush with
           the sides of the screen, and the content is centered with wrapper classes."
        - "The illustration can be customized by setting the background-image property
           on the .hero_wrapper's after pseudo element."
        - "On small screens (or where media queries are not supported), the text spans the
           full width of the .hero_wrapper and the illustration is displayed underneath.
           To customize, set a background size on the .hero_wrapper:after pseudo element,
           and set a bottom padding value on the .hero_wrapper equal to the height of the
           illustration + the desired top and bottom padding for the illustration. When
           customizing the bottom padding value, it must be reset on larger screen sizes."
        - "For larger screen sizes, media queries are used to position the illustration
           to the right of the text. A space equivalent to the width of 5 of 12 columns
           is allotted to the image at each breakpoint (333px for tablet, 475px on desktop),
           and the image is centered vertically and horizontally within that space.
           To customize the image size, set a background-size for the .hero_wrapper:after pseudo
           element at each breakpoint."
        - "On desktop, the hero should not exceed 300px in height. The image should be 195px in
           height to conform to this standard."
      codenotes:
        - .hero
    - name: .hero__wide-image
      markup: |

Hero title

                        Hero text goes here

                        Call to action

      notes:
        - "If the illustration is wide enough to take up the whole space allotted
           for it, add the wide-image class to position the illustration at the top
           right, rather than center of the image area."
      codenotes:
        - .hero__wide-image
    - name: .hero__small-content modifier
      markup: |

Hero title

                        Hero text goes here

      notes:
        - "If the hero text is short or doesn't include a call to action, adding
           the small-content class will increase the top padding value so the
           text is more vertically aligned with the image."
      codenotes:
        - .hero__small-content
  tags:
    - cf-layout
*/

@hero-desktop-height: 300px;
@hero-image-height: 195px;
@desktop-image-container-width: 475px; //width of 5 of 12 columns at 1140px
@tablet-image-container-width: 333px; //width of 5 of 12 columns at 799px

.hero {
  background-color: @gray-10;

  &_wrapper {
    position: relative;
    padding-top: unit(@grid_gutter-width / @base-font-size-px, em);
    // bottom padding = image height at mobile + padding for top/bottom of image
    padding-bottom: unit((@hero-image-height + @grid_gutter-width * 2) / @base-font-size-px, em);

    &:after {
      display: block;
      width: 100%;
      height: 100%;
      position: absolute;
      top:0;
      right: 0;
      content: "";
      background-position: center bottom unit(@grid_gutter-width / @base-font-size-px, em);
      background-repeat: no-repeat;
    }

    .respond-to-min(@tablet-min, {
      padding-right: unit(@tablet-image-container-width / @base-font-size-px, em);
      padding-bottom: unit(@grid_gutter-width / @base-font-size-px, em);

      &:after {
        width: @tablet-image-container-width;
        background-position: center;
      }
    });

    .respond-to-min(800px, {
      box-sizing: border-box;
      min-height: @hero-desktop-height;
      padding-top: unit(40px / @base-font-size-px, em); // approximates 45px visually
      padding-right: unit(@desktop-image-container-width / @base-font-size-px, em);
      padding-bottom: unit(40px / @base-font-size-px, em); // approximates 45px visually

      &:after {
        width: @desktop-image-container-width;
        background-position: center;
      }
    });

    .lt-ie9 & {
      // Reduce min-height because IE8 apparently isn't honoring the border-box property,
      // perhaps due to bug seen here: http://grab.by/JutE
      min-height: 0;
      // Fallback for four-value bg-pos syntax
      &:after {
        background-position: right center;
      }
    }
  }

  &_heading {
    .h2();
    .respond-to-min(800px, {
      .h1();
    });
  }

  &_subhead {
    .h4();
    .webfont-regular();
    margin-bottom: 0;

    .respond-to-min(800px, {
      .h3();
      margin-bottom: 0;
    });
  }

  &_cta {
    .webfont-regular();
    margin-top: @grid_gutter-width;
    margin-bottom: 0;

    a {
      border-bottom-width: 1px;
      cursor: pointer;
    }
  }

  // increase top padding to compensate for less text
  &__small-content &_wrapper {
    .respond-to-min(800px, {
      padding-top: unit(55px / @base-font-size-px, em); // approximates 60px visually
    });
  }

  // if the image is wide, position at top and right
  &__wide-image &_wrapper:after {
    .respond-to-min(800px, {
      background-position: top unit(40px / @base-font-size-px, em) right;
    });
  }
}

// simplifies customizing a hero
.setup-hero(@url: '', @width:0, @height:0, @tablet-width:@width, @desktop-width:@width) {
  .hero_wrapper {
    &:after {
      background-image: url(@url);
      background-size: @width;

      .respond-to-min(@tablet-min, {
        background-size: @tablet-width;
      });

      .respond-to-min(800px, {
        background-size: @desktop-width;
      });
    }
    // when a value has been passed in for height, run this to update padding
    & when (@height > 0) {
      padding-bottom: unit((@height + @grid_gutter-width * 2) / @base-font-size-px, em);
      .respond-to-min(@tablet-min, {
        padding-bottom: unit(@grid_gutter-width / @base-font-size-px, em);
      });
      .respond-to-min(800px, {
        padding-bottom: unit(40px / @base-font-size-px, em); // approximates 45px visually
      });
    }
  }
}

/* topdoc
    name: EOF
    eof: true
*/


Add linter lint style

Add linter lint style

fatal: unable to access 'https://github.com/atom-haskell/haskell-ghc-mod.git/': The requested URL returned error: 403


Update and rename theme_material_design/static/src/less/options to theme_material_design/static/src/less/options/bg_img_04.less

body {
	background: url("../../img/backgrounds/bg_blur_img_04.jpg") no-repeat center center fixed;
    background-size: cover;
}

@text-color:        @gray-lighter;
@headings-color:    white;

#wrapwrap {
    background-color: rgba(0,0,0,0.3);
    }

@navbar-default-bg:                     rgba(0,0,0,0.3);
@navbar-default-link-color:             @gray-lighter;
@navbar-default-link-hover-color:       white;

/* oe_structure */
.oe_structure.oe_empty:empty:before, [data-oe-type=html]:empty:before {
    color: white;
}

error: pathspec 'theme_material_design/static/src/less/options/bg_img_04.less' did not match any file(s) known to git


Added test less file

Added test less file

error: pathspec 'app/assets/stylesheets/index.less' did not match any file(s) known to git


Initial commit

Initial commit

/* CFPB SimpleGrid */
/* Clearfix Hack: http://nicolasgallagher.com/micro-clearfix-hack/ */
.row:before,
.row:after {
    content: " ";
    display: table;
}
.row:after {
    clear: both;
}
.row {
    margin: 1em auto;
    width: 102%;
    margin-left: -2%;
    overflow: hidden;
    clear: both;
    /* Clearfix hack for IE 6/7 only */
    *zoom: 1;
}
.row .span1, .row .span2, .row .span3, .row .span4, .row .span5, .row .span6, .row .span7, .row .span8, .row .span9, .row .span10, .row .span11, .row .span12 {
    float: left;
    margin-left: 2%;
    background-color: #ccc;
    min-height: 100px;
    margin-top: 1em;
}
.row .span1 {
    width: 6.33333%;
}
.row .span2 {
    width: 14.66667%;
}
.row .span3 {
    width: 23%;
}
.row .span4 {
    width: 31.33333%;
}
.row .span5 {
    width: 39.66667%;
}
.row .span6 {
    width: 48%;
}
.row .span7 {
    width: 56.33333%;
}
.row .span8 {
    width: 64.66667%;
}
.row .span9 {
    width: 73%;
}
.row .span10 {
    width: 81.33333%;
}
.row .span11 {
    width: 89.66667%;
}
.row .span12 {
    width: 98%;
}

@column-count: 12;
@gutter-width: 2%;

.row {
    margin: 1em auto;
    width: 102%;
    margin-left: -2%;
    overflow: hidden;
    clear: both;
    /* Clearfix hack for IE 6/7 only */
    *zoom: 1;
}

.span( @columns ) {
  width: @columns / @column-count * 100 - @gutter-width;
  margin-top: 1em;
  margin-left: @gutter-width;
  min-height: 100px;
  float: left;
}


For those who use LESS

For those who use LESS

I created a LESS version of your same CSS

.fac {
  user-select: none;
  position: relative;
  display: inline-block;
  vertical-align: middle;
  font-size: 1.2em;

  label {
    margin: 0em 1em 0em 0em;
    padding-left: 1.5em;
    cursor:pointer;
    font-weight:inherit;
  }

  > input + label:before {
    transition: opacity 0.3s ease-in-out;
  }

  > input + label:before, > span::after {
    font-family: FontAwesome;
    position:absolute;
    left:0;
  }

  input {
    display: none;
  }

}

.fac-checkbox, .fac-checkbox-round {
  > input + label:before {
    opacity: 1;
  }
}

.fac-checkbox, .fac {
  > input:checked + label:before {
    opacity: 0;
  }
}

.fac-radio, .fac-checkbox-o, .fac-checkbox-round-o {
  > input + label:before {
    opacity: 0;
  }
  > input:checked + label:before {
    opacity: 1;
  }
}

.fac-2x {
  font-size: 2em;
}

.fac-default {
  > input + label:before, > span::after {
    color: #000000;
  }
}

.fac-primary {
  > input + label:before, > span::after {
    color: @brand-primary;
  }
}

.fac-success {
  > input + label:before, > span::after {
    color: @brand-success;
  }
}

.fac-info {
  > input + label:before, > span::after {
    color: @brand-info;
  }
}

.fac-warning {
  > input + label:before, > span::after {
    color: @brand-warning;
  }
}

.fac-danger {
  > input + label:before, > span::after {
    color: @brand-danger;
  }
}

/********* Controls ***********/
.fac-checkbox {
  > span::after {
    content: @fa-var-check-square;
  }
  > input[type=checkbox] + label:before {
    content: @fa-var-square;
  }
}

.fac-checkbox-round {
  > span::after {
    content: @fa-var-check-circle;
  }
  > input[type=checkbox] + label:before {
    content: @fa-var-circle;
  }
}

.fac-checkbox-o {
  > span::after {
    content: @fa-var-square-o;
  }
  > input[type=checkbox] + label:before {
    content: @fa-var-check-square-o;
  }
}

.fac-checkbox-round-o {
  > span::after {
    content: @fa-var-circle-o;
  }
  > input[type=checkbox] + label:before {
    content: @fa-var-check-circle-o;
  }
}

.fac-radio {
  > span::after {
    content: @fa-var-circle-o;
  }
  > input[type=radio] + label:before {
    content: @fa-var-dot-circle-o;
  }
}

error: pathspec 'fac.less' did not match any file(s) known to git


Specify inactive pane state to when there are multiple panes.

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/wwmyers/solarized-seti-ui.git/'