<!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">