<!doctype html> <html> <head>

<title>HologramExample</title>
<style type="text/css">
    @charset "UTF-8";
    /* https://raw.github.com/trulia/hologram-example/master/templates/static/css/doc.css */
    .container {
        max-width: 1128px;
        width: auto;
        margin: 0 auto;
    }

    .content {
        margin-top: 5px;
    }

    .main > h1 {
        margin-top: 30px;
    }

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

    footer {
        margin-top: 20px;
        text-align: center;
    }

    .componentMenu {
        max-height: 535px;
        width: 175px;
        overflow-y: auto;
    }

    blockquote:before {
        content: "Design Note:";
        font-weight: bold;
    }

    blockquote {
        border: 1px solid #eee;
        border-radius: 4px;
        font-family: "Comic Sans MS";
        font-size:16px;
        margin: 10px 0;
        padding: 5px;

    }

    code {
        padding: 2px 4px;
        color: #d14;
        white-space: nowrap;
        background-color: #f9f9f9;
        border: 1px solid #ccc;
        border-radius: 4px;
    }

    div.codeExample, div.jsExample {
        border: 1px solid #ccc;
        border-radius: 4px;
        margin: 10px 0;
    }

    div.jsExample {
        border-top: 0px;
    }

    div.codeExample:before, div.jsExample:before {
        font-family: "OpenSans", sans-serif;
        color: #222;
        border: 1px solid #ccc;
        border-radius: 4px;
        border-bottom-left-radius: 0;
        border-top-right-radius: 0;
        position: relative;
        padding: 2px;
        display: block;
    }

    div.codeExample:before {
        content: "Example";
        background-color: #f9f9f9;
        width: 60px;
        top: -1px;
        left: -1px;
    }

    div.jsExample:before {
        content: "JS Example";
        background-color: #fff;
        width: 80px;
        top: -11px;
        left: -11px;
    }

    div.codeBlock, div.exampleOutput {
        padding: 10px;
    }

    div.codeBlock {
        background-color: #f9f9f9;
        border-top: 1px solid #ccc;
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
    }

    .docSwatch {
        min-height: 218.21px;
        border: 1px solid #ccc;
        padding: 10px 0 0 10px;
        font-size: 12px;
        margin-bottom: 5px;
    }

    .codeExample .line > div:after {
        content: attr(class);
        display: block;
        min-height: 40px;
        line-height: 40px;
        background-color: #EEE;
        text-align: center;
        border-radius: 3px;
        font-size: 12px;
    }

    table, table tr, table td, table th {
        padding: 7px;
        border: 1px solid #ccc;
    }

    table th {
        font-weight: bold;
    }

    /* https://raw.github.com/trulia/hologram-example/master/templates/static/css/github.css */

    hll { background-color: #ffffcc; }
    .c { color: #999988; font-style: italic; } /* Comment */
    .err { color: #a61717; background-color: #e3d2d2; } /* Error */
    .k { color: #000000; font-weight: bold; } /* Keyword */
    .o { color: #000000; font-weight: bold; } /* Operator */
    .cm { color: #999988; font-style: italic; } /* Comment.Multiline */
    .cp { color: #999999; font-weight: bold; font-style: italic; } /* Comment.Preproc */
    .c1 { color: #999988; font-style: italic; } /* Comment.Single */
    .cs { color: #999999; font-weight: bold; font-style: italic; } /* Comment.Special */
    .gd { color: #000000; background-color: #ffdddd; } /* Generic.Deleted */
    .ge { color: #000000; font-style: italic; } /* Generic.Emph */
    .gr { color: #aa0000; } /* Generic.Error */
    .gh { color: #999999; } /* Generic.Heading */
    .gi { color: #000000; background-color: #ddffdd; } /* Generic.Inserted */
    .go { color: #888888; } /* Generic.Output */
    .gp { color: #555555; } /* Generic.Prompt */
    .gs { font-weight: bold; } /* Generic.Strong */
    .gu { color: #aaaaaa; } /* Generic.Subheading */
    .gt { color: #aa0000; } /* Generic.Traceback */
    .kc { color: #000000; font-weight: bold; } /* Keyword.Constant */
    .kd { color: #000000; font-weight: bold; } /* Keyword.Declaration */
    .kn { color: #000000; font-weight: bold; } /* Keyword.Namespace */
    .kp { color: #000000; font-weight: bold; } /* Keyword.Pseudo */
    .kr { color: #000000; font-weight: bold; } /* Keyword.Reserved */
    .kt { color: #445588; font-weight: bold; } /* Keyword.Type */
    .m { color: #009999; } /* Literal.Number */
    .s { color: #d01040; } /* Literal.String */
    .na { color: #008080; } /* Name.Attribute */
    .nb { color: #0086B3; } /* Name.Builtin */
    .nc { color: #445588; font-weight: bold; } /* Name.Class */
    .no { color: #008080; } /* Name.Constant */
    .nd { color: #3c5d5d; font-weight: bold; } /* Name.Decorator */
    .ni { color: #800080; } /* Name.Entity */
    .ne { color: #990000; font-weight: bold; } /* Name.Exception */
    .nf { color: #990000; font-weight: bold; } /* Name.Function */
    .nl { color: #990000; font-weight: bold; } /* Name.Label */
    .nn { color: #555555; } /* Name.Namespace */
    .nt { color: #000080; } /* Name.Tag */
    .nv { color: #008080; } /* Name.Variable */
    .ow { color: #000000; font-weight: bold; } /* Operator.Word */
    .w { color: #bbbbbb; } /* Text.Whitespace */
    .mf { color: #009999; } /* Literal.Number.Float */
    .mh { color: #009999; } /* Literal.Number.Hex */
    .mi { color: #009999; } /* Literal.Number.Integer */
    .mo { color: #009999; } /* Literal.Number.Oct */
    .sb { color: #d01040; } /* Literal.String.Backtick */
    .sc { color: #d01040; } /* Literal.String.Char */
    .sd { color: #d01040; } /* Literal.String.Doc */
    .s2 { color: #d01040; } /* Literal.String.Double */
    .se { color: #d01040; } /* Literal.String.Escape */
    .sh { color: #d01040; } /* Literal.String.Heredoc */
    .si { color: #d01040; } /* Literal.String.Interpol */
    .sx { color: #d01040; } /* Literal.String.Other */
    .sr { color: #009926; } /* Literal.String.Regex */
    .s1 { color: #d01040; } /* Literal.String.Single */
    .ss { color: #990073; } /* Literal.String.Symbol */
    .bp { color: #999999; } /* Name.Builtin.Pseudo */
    .vc { color: #008080; } /* Name.Variable.Class */
    .vg { color: #008080; } /* Name.Variable.Global */
    .vi { color: #008080; } /* Name.Variable.Instance */
    .il { color: #009999; } /* Literal.Number.Integer.Long */

    /* https://raw.github.com/trulia/hologram-example/master/build/css/screen.css */

    article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary {
        display: block;
    }

    audio, canvas, video {
        display: inline-block;
        *display: inline;
        *zoom: 1;
    }

    audio:not([controls]) {
        display: none;
        height: 0;
    }

    [hidden] {
        display: none;
    }

    html {
        font-size: 100%;
        -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%
    }

    body {
        margin: 0;
    }

    a:focus {
        outline: thin dotted;
    }

    a:active, a:hover {
        outline: 0;
    }

    b, strong {
        font-weight: bold;
    }

    dfn {
        font-style: italic;
    }

    pre {
        white-space: pre;
        white-space: pre-wrap;
        word-wrap: break-word;
    }

    q {
        quotes: none;
    }

    q:before, q:after {
        content: '';
        content: none;
    }

    small {
        font-size: 80%
    }

    sub, sup {
        font-size: 75%;
        line-height: 0;
        position: relative;
        vertical-align: baseline;
    }

    sup {
        top: -0.5em;
    }

    sub {
        bottom: -0.25em;
    }

    dl, dt, dd, menu, ol, ul {
        margin: 0;
        padding: 0;
        list-style-type: none;
    }

    img {
        border: 0;
        -ms-interpolation-mode: bicubic;
    }

    svg:not(:root) {
        overflow: hidden;
    }

    figure {
        margin: 0;
    }

    form {
        margin: 0;
    }

    fieldset {
        margin: 0;
        padding: 0;
    }

    legend {
        border: 0;
        padding: 0;
        white-space: normal;
        *margin-left: -7px;
    }

    button, input, select, textarea {
        font-size: 100%;
        margin: 0;
        vertical-align: baseline;
        *vertical-align: middle;
    }

    button, input {
        line-height: normal;
    }

    button, html input[type="button"], input[type="reset"], input[type="submit"] {
        -webkit-appearance: button;
        cursor: pointer;
        *overflow: visible;
    }

    button[disabled], input[disabled] {
        cursor: default;
    }

    input[type="checkbox"], input[type="radio"] {
        box-sizing: border-box;
        padding: 0;
        *height: 13px;
        *width: 13px;
    }

    input[type="search"] {
        -webkit-appearance: textfield;
        -moz-box-sizing: content-box;
        -webkit-box-sizing: content-box;
        box-sizing: content-box;
    }

    input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {
        -webkit-appearance: none;
    }

    button::-moz-focus-inner, input::-moz-focus-inner {
        border: 0;
        padding: 0;
    }

    textarea {
        overflow: auto;
        vertical-align: top;
    }

    table {
        border-collapse: collapse;
        border-spacing: 0;
    }

    th {
        font-weight: normal;
    }

    .main {
        overflow: hidden;
        *overflow: visible;
        zoom: 1;
    }

    .line .lastCol {
        display: table-cell;
        vertical-align: top;
        width: 10000px !important;
        *display: block;
        *zoom: 1;
        *width: auto !important;
    }

    .line, .box, .box .boxHead, .box .boxFoot, .content > section, .container {
        zoom: 1;
    }

    .line:before, .box:before, .box .boxHead:before, .box .boxFoot:before, .content > section:before, .container:before, .line:after, .box:after, .box .boxHead:after, .box .boxFoot:after, .content > section:after, .container:after {
        content: " ";
        display: table;
    }

    .line:after, .box:after, .box .boxHead:after, .box .boxFoot:after, .content > section:after, .container:after {
        clear: both;
    }

    .listInline > li {
        display: inline-block;
        *display: inline;
        *zoom: 1;
    }

    .hideVisually {
        border: 0;
        clip: rect(0 0 0 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
    }

    .hideVisually.focusable:active, .hideVisually.focusable:focus {
        clip: auto;
        height: auto;
        margin: 0;
        overflow: visible;
        position: static;
        width: auto;
    }

    .hideText {
        background-color: transparent;
        border: 0;
        overflow: hidden;
        *text-indent: -9999px;
    }

    .hideText:before {
        content: "";
        display: block;
        width: 0;
        height: 100%
    }

    .hideFully {
        display: none !important;
        visibility: hidden;
    }

    .txtC, table .txtC, table tr .txtC {
        text-align: center;
    }

    .txtL, table .txtL, table tr .txtL {
        text-align: left;
    }

    .txtR, table .txtR, table tr .txtR {
        text-align: right;
    }

    .txtT, table .txtT, table tr .txtT {
        vertical-align: top;
    }

    .txtB, table .txtB, table tr .txtB {
        vertical-align: bottom;
    }

    .txtM, table .txtM, table tr .txtM {
        vertical-align: middle;
    }

    p, .headingDoubleSub, ol, ul, .table {
        margin-top: 5px;
        margin-bottom: 5px;
    }

    .box {
        margin-top: 21px;
        margin-bottom: 21px;
    }

    table h1, table h2, table h3, table h4, table h5, table h6, table p, table ul, table ol, table dl, table blockquote, table .media, table pre {
        margin-left: 0;
        margin-right: 0;
    }

    .pan {
        padding: 0 !important;
    }

    .man {
        margin: 0 !important;
    }

    .pas {
        padding: 5px !important;
    }

    .mas {
        margin: 5px !important;
    }

    .pam {
        padding: 10px !important;
    }

    .mam {
        margin: 10px !important;
    }

    .pal {
        padding: 21px !important;
    }

    .mal {
        margin: 21px !important;
    }

    .pvn {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .mvn {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .pvs {
        padding-top: 5px !important;
        padding-bottom: 5px !important;
    }

    .mvs {
        margin-top: 5px !important;
        margin-bottom: 5px !important;
    }

    .pvm {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }

    .mvm {
        margin-top: 10px !important;
        margin-bottom: 10px !important;
    }

    .pvl {
        padding-top: 21px !important;
        padding-bottom: 21px !important;
    }

    .mvl {
        margin-top: 21px !important;
        margin-bottom: 21px !important;
    }

    .phn {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .mhn {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .phs {
        padding-left: 5px !important;
        padding-right: 5px !important;
    }

    .mhs {
        margin-left: 5px !important;
        margin-right: 5px !important;
    }

    .phm {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .mhm {
        margin-left: 10px !important;
        margin-right: 10px !important;
    }

    .phl {
        padding-left: 21px !important;
        padding-right: 21px !important;
    }

    .mhl {
        margin-left: 21px !important;
        margin-right: 21px !important;
    }

    .ptn {
        padding-top: 0 !important;
    }

    .mtn {
        margin-top: 0 !important;
    }

    .pts {
        padding-top: 5px !important;
    }

    .mts {
        margin-top: 5px !important;
    }

    .ptm {
        padding-top: 10px !important;
    }

    .mtm {
        margin-top: 10px !important;
    }

    .ptl {
        padding-top: 21px !important;
    }

    .mtl {
        margin-top: 21px !important;
    }

    .prn {
        padding-right: 0 !important;
    }

    .mrn {
        margin-right: 0 !important;
    }

    .prs {
        padding-right: 5px !important;
    }

    .mrs {
        margin-right: 5px !important;
    }

    .prm {
        padding-right: 10px !important;
    }

    .mrm {
        margin-right: 10px !important;
    }

    .prl {
        padding-right: 21px !important;
    }

    .mrl {
        margin-right: 21px !important;
    }

    .pbn {
        padding-bottom: 0 !important;
    }

    .mbn {
        margin-bottom: 0 !important;
    }

    .pbs {
        padding-bottom: 5px !important;
    }

    .mbs {
        margin-bottom: 5px !important;
    }

    .pbm {
        padding-bottom: 10px !important;
    }

    .mbm {
        margin-bottom: 10px !important;
    }

    .pbl {
        padding-bottom: 21px !important;
    }

    .mbl {
        margin-bottom: 21px !important;
    }

    .pln {
        padding-left: 0 !important;
    }

    .mln {
        margin-left: 0 !important;
    }

    .pls {
        padding-left: 5px !important;
    }

    .mls {
        margin-left: 5px !important;
    }

    .plm {
        padding-left: 10px !important;
    }

    .mlm {
        margin-left: 10px !important;
    }

    .pll {
        padding-left: 21px !important;
    }

    .mll {
        margin-left: 21px !important;
    }

    @font-face {
        font-family: "OpenSans";
        src: url("http://static.trulia-cdn.com/images/fonts/OpenSans/OpenSans-Light-webfont.eot");
        src: url("http://static.trulia-cdn.com/images/fonts/OpenSans/OpenSans-Light-webfont.eot?#iefix") format("embedded-opentype"), url("http://static.trulia-cdn.com/images/fonts/OpenSans/OpenSans-Light-webfont.woff") format("woff"), url("http://static.trulia-cdn.com/images/fonts/OpenSans/OpenSans-Light-webfont.ttf") format("truetype"), url("http://static.trulia-cdn.com/images/fonts/OpenSans/OpenSans-Light-webfont.svg#OpenSansLight") format("svg");
        font-weight: 300;
        font-style: normal;
    }

    @font-face {
        font-family: "OpenSans";
        src: url("http://static.trulia-cdn.com/images/fonts/OpenSans/OpenSans-Regular-webfont.eot");
        src: url("http://static.trulia-cdn.com/images/fonts/OpenSans/OpenSans-Regular-webfont.eot?#iefix") format("embedded-opentype"), url("http://static.trulia-cdn.com/images/fonts/OpenSans/OpenSans-Regular-webfont.woff") format("woff"), url("http://static.trulia-cdn.com/images/fonts/OpenSans/OpenSans-Regular-webfont.ttf") format("truetype"), url("http://static.trulia-cdn.com/images/fonts/OpenSans/OpenSans-Regular-webfont.svg#OpenSansRegular") format("svg");
        font-weight: 400;
        font-style: normal;
    }

    @font-face {
        font-family: "OpenSans";
        src: url("http://static.trulia-cdn.com/images/fonts/OpenSans/OpenSans-Bold-webfont.eot");
        src: url("http://static.trulia-cdn.com/images/fonts/OpenSans/OpenSans-Bold-webfont.eot?#iefix") format("embedded-opentype"), url("http://static.trulia-cdn.com/images/fonts/OpenSans/OpenSans-Bold-webfont.woff") format("woff"), url("http://static.trulia-cdn.com/images/fonts/OpenSans/OpenSans-Bold-webfont.ttf") format("truetype"), url("http://static.trulia-cdn.com/images/fonts/OpenSans/OpenSans-Bold-webfont.svg#OpenSansBold") format("svg");
        font-weight: 600;
        font-style: normal;
    }

    body {
        font-size: 14px;
        font-size: .875rem;
        line-height: 1.5em;
        color: #222;
    }

    body, input, select, textarea, button {
        font-family: OpenSans, sans-serif;
    }

    h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
        font-weight: 300;
        font-style: normal;
    }

    h1, .h1 {
        font-size: 36px;
        font-size: 2.25rem;
        line-height: 1.3;
        margin: 5px 0;
        font-weight: bold;
    }

    h2, .h2 {
        font-size: 28px;
        font-size: 1.75rem;
        line-height: 1.4;
        margin: 5px 0;
    }

    h3, .h3 {
        font-size: 24px;
        font-size: 1.5rem;
        line-height: 1.4;
        margin: 5px 0;
    }

    h4, .h4 {
        font-size: 20px;
        font-size: 1.25rem;
        line-height: 1.4;
        margin: 5px 0;
    }

    h5, .h5 {
        font-size: 16px;
        font-size: 1rem;
        line-height: 1.5;
        margin: 5px 0;
        font-weight: bold;
    }

    h6, .h6 {
        font-size: 14px;
        font-size: .875rem;
        line-height: 1.5;
        margin: 5px 0;
        font-weight: bold;
    }

    .h7 {
        font-size: 12px;
        font-size: .75rem;
        line-height: 1.6;
        margin: 5px 0;
    }

    .headingDoubleSuper {
        display: block;
        clear: both;
        min-width: 10px;
    }

    .headingDoubleSub {
        font-size: 14px;
        font-size: .875rem;
        display: block;
        float: left;
        font-weight: normal;
        line-height: 1.5;
    }

    .headingDoubleInline {
        display: inline-block;
    }

    pre, code {
        font-family: Menlo, Consolas, Monaco, "Lucida Console", monospace;
    }

    .typeWarning {
        color: #cc2114;
    }

    .typeHighlight {
        color: #5eab1f;
    }

    .typeLowlight {
        color: #999;
    }

    .typeReversed1 {
        color: white;
    }

    .typeReversed2 {
        color: #eff6e9;
    }

    .typeDeemphasize {
        font-weight: 300 !important;
    }

    .typeWeightNormal {
        font-weight: normal !important;
    }

    .typeEmphasize {
        font-weight: bold !important;
    }

    .cols1 {
        width: 4.16667% !important;
        *width: 2.30496% !important;
    }

    .cols2 {
        width: 8.33333% !important;
        *width: 6.47163% !important;
    }

    .cols3 {
        width: 12.5% !important;
        *width: 10.6383% !important;
    }

    .cols4 {
        width: 16.66667% !important;
        *width: 14.80496% !important;
    }

    .cols5 {
        width: 20.83333% !important;
        *width: 18.97163% !important;
    }

    .cols6 {
        width: 25% !important;
        *width: 23.1383% !important;
    }

    .cols7 {
        width: 29.16667% !important;
        *width: 27.30496% !important;
    }

    .cols8 {
        width: 33.33333% !important;
        *width: 31.47163% !important;
    }

    .cols9 {
        width: 37.5% !important;
        *width: 35.6383% !important;
    }

    .cols10 {
        width: 41.66667% !important;
        *width: 39.80496% !important;
    }

    .cols11 {
        width: 45.83333% !important;
        *width: 43.97163% !important;
    }

    .cols12 {
        width: 50% !important;
        *width: 48.1383% !important;
    }

    .cols13 {
        width: 54.16667% !important;
        *width: 52.30496% !important;
    }

    .cols14 {
        width: 58.33333% !important;
        *width: 56.47163% !important;
    }

    .cols15 {
        width: 62.5% !important;
        *width: 60.6383% !important;
    }

    .cols16 {
        width: 66.66667% !important;
        *width: 64.80496% !important;
    }

    .cols17 {
        width: 70.83333% !important;
        *width: 68.97163% !important;
    }

    .cols18 {
        width: 75% !important;
        *width: 73.1383% !important;
    }

    .cols19 {
        width: 79.16667% !important;
        *width: 77.30496% !important;
    }

    .cols20 {
        width: 83.33333% !important;
        *width: 81.47163% !important;
    }

    .cols21 {
        width: 87.5% !important;
        *width: 85.6383% !important;
    }

    .cols22 {
        width: 91.66667% !important;
        *width: 89.80496% !important;
    }

    .cols23 {
        width: 95.83333% !important;
        *width: 93.97163% !important;
    }

    .cols24 {
        width: 100% !important;
        *width: 98.1383% !important;
    }

    .line {
        margin-left: -21px;
    }

    .line .col {
        min-height: 1px;
        float: left;
        zoom: 1;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        padding-left: 21px;
    }

    .line .colExt {
        float: right;
        zoom: 1;
        padding: 0 0 0 21px;
    }

    .line .lastCol {
        float: none;
        *display: block;
        *width: auto !important;
        *zoom: 1;
    }

    .line .col:last-child {
        display: table-cell;
        float: none;
        vertical-align: top;
        width: 10000px !important;
    }

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

    a {
        color: #1885f0;
    }

    a:hover, a:focus {
        color: #5eab1f;
    }

    .linkLowlight {
        color: #999;
    }

    .linkLowlight:hover, .linkLowlight:focus {
        color: #5eab1f;
    }

    .linkForward:after {
        margin-left: .35714em;
        content: "\00BB"
    }

    .linkBack:before {
        margin-right: .35714em;
        content: "\00AB"
    }

    .backgroundBasic {
        background-color: white;
    }

    .backgroundLowlight {
        background-color: #f9f9f9;
    }

    .backgroundHighlight {
        background-color: #5eab1f;
    }

    .backgroundInverse {
        background-color: #222;
    }

    .box {
        position: relative;
    }

    .box .boxHead, .box .boxFoot {
        padding: 0;
        margin: 0 21px;
    }

    .box .boxBody {
        padding: 0 21px 1px;
    }

    .boxHighlight {
        border: 1px solid #e9e9e9;
        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        -ms-border-radius: 6px;
        -o-border-radius: 6px;
        border-radius: 6px;
        -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.17);
        -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.17);
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.17);
    }

    .boxBasic {
        border: 1px solid #e9e9e9;
        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        -ms-border-radius: 6px;
        -o-border-radius: 6px;
        border-radius: 6px;
    }

    .boxHeadBasic {
        border-bottom: solid 1px #e9e9e9;
    }

    .boxFootBasic {
        border-top: solid 1px #e9e9e9;
    }

    .boxClose {
        border: 0;
        position: absolute;
        cursor: pointer;
        background-color: transparent;
    }

    .boxClose {
        top: 3px;
        right: 6px;
        width: 20px;
        height: 20px;
        text-align: center;
        color: #999;
        font-size: 14px;
        font-size: .875rem;
    }

    .boxClose:hover, .boxClose:focus {
        color: #222;
    }

    ol, ul {
        list-style-type: none;
    }

    ol > li, ul > li {
        margin: .2em 0;
    }

    .listBordered > li, .listBorderedHover > li {
        padding: 10px;
        border-top: 1px solid #e9e9e9;
    }

    .listBordered > li:first-child, .listBorderedHover > li:first-child {
        border-top: 1px solid transparent;
    }

    .listBorderedHover > li {
        margin: 0;
    }

    .listBorderedHover > li:hover {
        background-color: #f9f9f9;
    }

    .listInline > li {
        vertical-align: middle;
        padding-right: 10px;
    }

    .lvn > li {
        padding-top: 0;
        padding-bottom: 0;
    }

    .lvs > li {
        padding-top: 5px;
        padding-bottom: 5px;
    }

    .lvm > li {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .lvl > li {
        padding-top: 21px;
        padding-bottom: 21px;
    }

    .lhn > li {
        padding-left: 0;
        padding-right: 0;
    }

    .lhs > li {
        padding-left: 5px;
        padding-right: 5px;
    }

    .lhm > li {
        padding-left: 10px;
        padding-right: 10px;
    }

    .lhl > li {
        padding-left: 21px;
        padding-right: 21px;
    }

    .toggle {
        position: relative;
        cursor: pointer;
    }

    .toggleArrow .before, .toggleArrow:before {
        content: "\25BA";
        display: inline-block;
        width: 1.3em;
        font-size: .9em;
        text-align: center;
    }

    .toggleArrowActive:before {
        content: "\25BC"
    }

    .toggleArrow:hover .before {
        text-decoration: none;
    }

    .toggleArrow .active, .toggleActive .inactive {
        display: none;
    }

    .toggleActive .active {
        display: inline-block;
    }

    .toggleActive .inactive {
        display: none;
    }

    .frameThumb, .frameSmall, .frameStandard, .frameStacked {
        display: inline-block;
        *display: inline;
        *zoom: 1;
        *border: 1px solid #e9e9e9;
        -webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.2);
        -moz-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.2);
        box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.2);
    }

    .frameThumb img, .frameSmall img, .frameStandard img, .frameStacked img {
        display: block;
    }

    .frameThumb .polaroid, .frameSmall .polaroid, .frameStandard .polaroid, .frameStacked .polaroid {
        margin-top: 5px;
    }

    .frameThumb {
        padding: 2px;
    }

    .frameSmall {
        padding: 6px;
    }

    .frameStandard {
        padding: 8px;
    }

    .frameStacked {
        padding: 8px;
        position: relative;
        background-color: #fff;
    }

    .frameStacked:before, .frameStacked:after {
        -webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.2);
        -moz-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.2);
        box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.2);
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: -999;
        content: "";
        background-color: #f9f9f9;
    }

    .frameStacked:before {
        left: 5px;
        top: 0;
        -webkit-transform: rotate(1deg);
        -moz-transform: rotate(1deg);
        -ms-transform: rotate(1deg);
        -o-transform: rotate(1deg);
        transform: rotate(1deg);
    }

    .frameStacked:after {
        right: 5px;
        top: 0;
        -webkit-transform: rotate(-1deg);
        -moz-transform: rotate(-1deg);
        -ms-transform: rotate(-1deg);
        -o-transform: rotate(-1deg);
        transform: rotate(-1deg);
    }

    .badgeStandard, .badgePrimary, .badgeSecondary, .badgeTertiary {
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        -ms-border-radius: 3px;
        -o-border-radius: 3px;
        border-radius: 3px;
        font-size: 12px;
        font-size: .75rem;
        padding: .35714em .42857em .21429em;
        display: inline-block;
        color: white;
        line-height: 1;
        text-transform: uppercase;
    }

    .badgeStandard {
        background-color: #999;
    }

    .badgePrimary {
        background-color: #ff5c00;
    }

    .badgeSecondary {
        background-color: #5eab1f;
    }

    .badgeTertiary {
        background-color: #cc2114;
    }

    button {
        background: 0;
        border: 0;
    }

    .btn {
        padding: .5em 1em;
        margin: 0;
        display: inline-block;
        font-weight: normal;
        line-height: normal;
        font-size: 14px;
        font-size: .875rem;
        text-decoration: none;
        cursor: pointer;
        border: 0;
        background: 0;
        text-align: center;
        border: 1px solid #ccc;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        -ms-border-radius: 4px;
        -o-border-radius: 4px;
        border-radius: 4px;
    }

    .btnSml {
        font-size: 12px;
        font-size: .75rem;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        -ms-border-radius: 4px;
        -o-border-radius: 4px;
        border-radius: 4px;
    }

    .btnLrg {
        font-size: 16px;
        font-size: 1rem;
        line-height: 1.6;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        -ms-border-radius: 4px;
        -o-border-radius: 4px;
        border-radius: 4px;
    }

    .btnFullWidth {
        width: 100%
    }

    .btnDefault, a.btnDefault {
        border: 1px #d7d7d7 solid;
        background: #f3f3f3;
        color: #222;
        text-shadow: 0 1px 0 white;
        -webkit-box-shadow: 0 1px 0 #ccc;
        -moz-box-shadow: 0 1px 0 #ccc;
        box-shadow: 0 1px 0 #ccc;
    }

    .btnDefault:hover, .btnDefault:focus {
        background: #f6f6f6;
    }

    .btnDefault:active {
        position: relative;
        top: 1px;
        -webkit-box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05);
        -moz-box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05);
        box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05);
    }

    .btnPrimary, a.btnPrimary, .btnDanger, a.btnDanger {
        color: white;
        text-shadow: 0;
    }

    .btnPrimary, a.btnPrimary {
        border: 1px #d14b00 solid;
        background: #ff5c00;
        -webkit-box-shadow: 0 1px 0 #d35500;
        -moz-box-shadow: 0 1px 0 #d35500;
        box-shadow: 0 1px 0 #d35500;
    }

    .btnPrimary:hover, .btnPrimary:focus {
        background: #ff660f;
    }

    .btnPrimary:active {
        position: relative;
        top: 1px;
        -webkit-box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05);
        -moz-box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05);
        box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05);
    }

    .btnDanger, a.btnDanger {
        border: 1px #a21a10 solid;
        background: #cc2114;
        -webkit-box-shadow: 0 1px 0 #d35500;
        -moz-box-shadow: 0 1px 0 #d35500;
        box-shadow: 0 1px 0 #d35500;
    }

    .btnDanger:hover, .btnDanger:focus {
        background: #da2315;
    }

    .btnDanger:active {
        position: relative;
        top: 1px;
        -webkit-box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05);
        -moz-box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05);
        box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05);
    }

    .btn[disabled], .btn[disabled]:hover, .btn[disabled]:focus .btn[disabled]:active, .btnDisabled, a.btnDisabled, .btnDisabled:hover, .btnDisabled:focus, .btnDisabled:active {
        border: 0;
        background: #ccc;
        color: #999;
        text-shadow: 0;
        cursor: default;
    }

    .btn[disabled]:active, .btnDisabled:active {
        position: static;
        color: #999;
        box-shadow: none;
    }

    .btnLink {
        color: #1885f0;
        border: 1px solid transparent;
    }

    .btnLink:hover, .btnLink:focus {
        color: #5eab1f;
    }

    .table {
        width: 100%
    }

    .table thead th {
        font-weight: bold;
        color: #222;
    }

    .table th, .table td {
        padding: 8px;
    }

    .tableBasic th, .tableBasic td {
        border: 1px solid #e9e9e9;
    }

    .tan td, .tan th {
        padding: 0;
    }

    .tas td, .tas th {
        padding: 5px;
    }

    .tam td, .tam th {
        padding: 10px;
    }

    .tal td, .tal th {
        padding: 21px;
    }

    .tvn td, .tvn th {
        padding-top: 0;
        padding-bottom: 0;
    }

    .tvs td, .tvs th {
        padding-top: 5px;
        padding-bottom: 5px;
    }

    .tvm td, .tvm th {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .tvl td, .tvl th {
        padding-top: 21px;
        padding-bottom: 21px;
    }

    .thn td, .thn th {
        padding-left: 0;
        padding-right: 0;
    }

    .ths td, .ths th {
        padding-left: 5px;
        padding-right: 5px;
    }

    .thm td, .thm th {
        padding-left: 10px;
        padding-right: 10px;
    }

    .thl td, .thl th {
        padding-left: 21px;
        padding-right: 21px;
    }

    body {
        background: white;
    }

    .content > section, .container {
        width: 1128px;
        margin: 0 auto;
    }

    .main[role="main"] {
        position: relative;
        top: -10px;
    }

    .content > section, .content .container {
        margin-top: 0;
    }

    .skipLink:focus {
        width: 100%;
        padding: 5px 0;
        display: block;
        position: absolute;
        z-index: 100;
        text-indent: 5px;
        color: #fff;
        background: #5eab1f;
    }

    .header {
        padding-bottom: 15px;
        *position: relative;
        *z-index: 100;
        background: white;
        border-bottom: 1px solid #ccc;
    }

    .headerSubSection {
        margin: 1px 0;
        font-size: 11px;
        font-size: .6875rem;
        text-align: right;
        line-height: 1;
    }

    .headerSubSection a {
        color: #222;
    }

    .headerSubSection .highlight {
        display: inline-block;
        padding: 2px 10px;
        color: #fff;
        -webkit-border-radius: 5px 5px 0 0;
        -moz-border-radius: 5px 5px 0 0;
        -ms-border-radius: 5px 5px 0 0;
        -o-border-radius: 5px 5px 0 0;
        border-radius: 5px 5px 0 0;
        background: #888;
    }

    .headerSubSection .listInline {
        margin: 0;
    }

    .headerMainSection {
        position: relative;
    }

    .headerMainSection .logo {
        position: absolute;
        left: 0;
        top: -1px;
    }

    .menuWrap {
        margin-left: 97px;
    }

    .content {
        padding-top: 5px;
    }

    .content > section {
        margin-top: 5px;
    }

    .sideBar {
        width: 185px;
        margin-right: 20px;
        float: left;
    }

    .main {
        float: none;
        *display: block;
        *width: auto;
        *zoom: 1;
    }

    .aside {
        width: 300px;
        margin-left: 20px;
        float: right;
    }

    .footer {
        clear: both;
        margin-top: 40px;
        font-size: 12px;
        font-size: .75rem;
    }

    .footerBox {
        border-top: 5px solid #5eab1f;
    }

    .footerBox .boxBody {
        margin: 10px 0;
    }

    .footerGroup a {
        color: #222;
    }

    .footerGroup a:hover, .footerGroup a:focus {
        color: #5eab1f;
        text-decoration: underline;
    }

    .footerCol {
        width: 125px;
    }

    .footerGroupHeading {
        float: left;
    }

    .footerGroupHeading {
        width: 120px;
        margin: 0;
        clear: right;
        font-weight: bold;
    }

    .footerGroupList {
        margin: 0;
    }

    .footerGroupList > li {
        margin: 0;
    }

    .footerDisclaimer {
        float: left;
    }

    .footerNoteAside {
        float: right;
    }

</style>
<link rel=stylesheet href="/assets/application.css" type="text/css">
<script rel=javascript src="/assets/application.js" type="text/javascript"></script>

</head> <header class=“header pbn” role=“banner”>

<div class="backgroundHighlight typeReversed1">
    <div class="container">
        <h1 class="h2 mvs">My Styleguide</h1>
    </div>
</div>
<div class="backgroundLowlight typeReversed1">
    <div class="container">
        <span>
            <ul class="docNav listInline">
                <% for c in categories %>
                    <li><a href="/styleguide/<%= c[0] %>.html"><%= c[0] %></a></li>
                <% end %>
            </ul>
        </span>
    </div>
</div>

</header> <div class=“content”>

<section>
    <div class="line">
        <div class="col cols4">
            <div class="componentMenu box boxBasic backgroundBasic">
                <div class="boxBody pan">
                    <ul class="componentList listBorderedHover">
                        <% blocks.each do |block| %>
                            <li><a href="#<%= block[:name] %>"><%= block[:title] %></a></li>
                        <% end %>
                    </ul>
                </div>
            </div>
        </div>
        <div class="main col cols20 lastCol">