Created
May 26, 2012 18:58
-
-
Save sourcegate/2794945 to your computer and use it in GitHub Desktop.
Gumby
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* Gumby */ | |
| /* -------------------------------------------------- | |
| Table of Contents | |
| ----------------------------------------------------- | |
| :: Reset & Standards | |
| :: Links | |
| :: Lists | |
| :: Tables | |
| :: Misc | |
| */ | |
| /* -------------------------------------------------- | |
| :: Global Reset & Standards | |
| -------------------------------------------------- */ | |
| /* | |
| Eric Meyer's CSS Reset | |
| http://meyerweb.com/eric/tools/css/reset/ | |
| v2.0 | 20110126 | |
| License: none (public domain) | |
| */ | |
| html, body, div, span, applet, object, iframe, | |
| h1, h2, h3, h4, h5, h6, p, blockquote, pre, | |
| a, abbr, acronym, address, big, cite, code, | |
| del, dfn, em, img, ins, kbd, q, s, samp, | |
| small, strike, strong, sub, sup, tt, var, | |
| b, u, i, center, | |
| dl, dt, dd, ol, ul, li, | |
| fieldset, form, label, legend, | |
| table, caption, tbody, tfoot, thead, tr, th, td, | |
| article, aside, canvas, details, embed, | |
| figure, figcaption, footer, header, hgroup, | |
| menu, nav, output, ruby, section, summary, | |
| time, mark, audio, video { | |
| margin: 0; | |
| padding: 0; | |
| border: 0; | |
| font: inherit; | |
| vertical-align: baseline; | |
| } | |
| html { | |
| font-size: 62.5%; | |
| } | |
| /* HTML5 display-role reset for older browsers */ | |
| article, aside, details, figcaption, figure, | |
| footer, header, hgroup, menu, nav, section { | |
| display: block; | |
| } | |
| body { | |
| line-height: 1; | |
| } | |
| ol, ul { | |
| list-style: none; | |
| } | |
| blockquote, q { | |
| quotes: none; | |
| } | |
| blockquote:before, blockquote:after, | |
| q:before, q:after { | |
| content: ''; | |
| content: none; | |
| } | |
| table { | |
| border-collapse: collapse; | |
| border-spacing: 0; | |
| } | |
| .left, .columns.left { float: left; } | |
| .right, .columns.right { float: right; } | |
| .hide { display: none; } | |
| .highlight { background: #fcf8bf; } | |
| /*======================================================================= | |
| ❤❤❤ Artfully Masterminded by ZURB. Perfected by Digital Surgeons. ❤❤❤ | |
| ========================================================================*/ | |
| body { | |
| background: #fff; | |
| font-family: "Helvetica Neue", "HelveticaNeue", Helvetica, Arial, "Lucida Grande", sans-serif; | |
| font-size: 16px; | |
| line-height: 1.6; | |
| color: #555; | |
| position: relative; | |
| -webkit-font-smoothing: antialiased; | |
| } | |
| /*===================================================== | |
| Headings | |
| ======================================================*/ | |
| h1, h2, h3, h4, h5, h6 { | |
| color: #1b1b1b; | |
| font-weight: bold; | |
| line-height: 1.6; | |
| } | |
| h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { | |
| font-weight: inherit; | |
| } | |
| h1 { | |
| font-size: 46px; | |
| margin-bottom: 12px; | |
| } | |
| h2 { | |
| font-size: 36px; | |
| margin-bottom: 9px; | |
| } | |
| h3 { | |
| font-size: 28px; | |
| margin-bottom: 9px; | |
| } | |
| h4 { | |
| font-size: 21px; | |
| margin-bottom: 3px; | |
| } | |
| h5 { | |
| font-size: 18px; | |
| font-weight: normal; | |
| margin-bottom: 3px; | |
| } | |
| h6 { | |
| font-size: 15px; | |
| font-weight: normal; | |
| } | |
| .subhead { | |
| color: #777; | |
| font-weight: normal; | |
| margin-bottom: 20px; | |
| } | |
| /*===================================================== | |
| Links & Paragraph styles | |
| ======================================================*/ | |
| p { | |
| font-size: 16px; | |
| line-height: 1.6; | |
| margin: 0 0 18px; | |
| } | |
| p img { | |
| margin: 0; | |
| } | |
| p.lead { | |
| font-size: 18px; | |
| } | |
| a { color: #d04526; text-decoration: none; outline: 0; line-height: inherit; } | |
| a:hover { color: #c03d20; } | |
| p a, p a:visited { line-height: inherit; } | |
| /*===================================================== | |
| Lists | |
| ======================================================*/ | |
| ul, ol { margin-bottom: 18px; } | |
| ul { list-style: none outside; } | |
| ol { list-style: decimal; } | |
| ol, ul.square, ul.circle, ul.disc { margin-left: 30px; } | |
| ul.square { list-style: square outside; } | |
| ul.circle { list-style: circle outside; } | |
| ul.disc { list-style: disc outside; } | |
| ul ul, ol ol { margin: 4px 0 5px 30px; } | |
| li { margin-bottom: 12px; } | |
| ul.large li { line-height: 21px; } | |
| /* Mobile */ | |
| @media handheld, only screen and (max-width: 767px) { | |
| body, p { font-size: 15px; font-size: 1.5rem; line-height: 1.4; } | |
| } | |
| em { font-style: italic; line-height: inherit; } | |
| strong { font-weight: bold; line-height: inherit; } | |
| small { font-size: 60%; line-height: inherit; } | |
| h1 small, h2 small, h3 small, h4 small, h5 small { color: #777; } | |
| /* Blockquotes */ | |
| blockquote, blockquote p { line-height: 20px; color: #777; } | |
| blockquote { margin: 0 0 18px; padding: 9px 20px 0 19px; border-left: 1px solid #ddd; } | |
| blockquote cite { display: block; font-size: 12px; font-size: 1.2rem; color: #555; } | |
| blockquote cite:before { content: "\2014 \0020"; } | |
| blockquote cite a, blockquote cite a:visited { color: #555; } | |
| hr { border: solid #ddd; border-width: 1px 0 0; clear: both; margin: 12px 0 18px; height: 0; } | |
| abbr, acronym { text-transform: uppercase; font-size: 90%; color: #222; border-bottom: 1px solid #ddd; cursor: help; } | |
| abbr { text-transform: none; } | |
| /** | |
| * Print styles. | |
| * | |
| * Inlined to avoid required HTTP connection: www.phpied.com/delay-loading-your-print-css/ | |
| * Credit to Paul Irish and HTML5 Boilerplate (html5boilerplate.com) | |
| */ | |
| @media print { | |
| * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; | |
| -ms-filter: none !important; } /* Black prints faster: sanbeiji.com/archives/953 */ | |
| p a, p a:visited { color: #444 !important; text-decoration: underline; } | |
| p a[href]:after { content: " (" attr(href) ")"; } | |
| abbr[title]:after { content: " (" attr(title) ")"; } | |
| .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* Don't show links for images, or javascript/internal links */ | |
| pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } | |
| thead { display: table-header-group; } /* css-discuss.incutio.com/wiki/Printing_Tables */ | |
| tr, img { page-break-inside: avoid; } | |
| @page { margin: 0.5cm; } | |
| p, h2, h3 { orphans: 3; widows: 3; } | |
| h2, h3{ page-break-after: avoid; } | |
| } | |
| /*======================================================================= | |
| ❤❤❤ Artfully Masterminded by ZURB. Perfected by Digital Surgeons. ❤❤❤ | |
| ========================================================================*/ | |
| /*================================================= | |
| +++ LE GRID +++ | |
| A Responsive Grid -- Gumby defaults to a standard 960 grid, | |
| but you can change it to whatever you'd like. | |
| ==================================================*/ | |
| .container { padding: 0px 20px; } | |
| .row { width: 100%; max-width: 940px; min-width: 720px; margin: 0 auto; } | |
| /* To fix the grid into a different size, set max-width to your desired width */ | |
| .row .row { min-width: 0px; } | |
| .column, .columns { margin-left: 2.127663%; box-sizing: border-box; | |
| float: left; min-height: 1px; position: relative; } | |
| .column:first-child, .columns:first-child, .alpha, .omega { margin-left: 0px; } | |
| [class*="column"] + [class*="column"]:last-child { float: right; } | |
| .row .one.columns { width: 6.382989%; } | |
| .row .two.columns { width: 14.893641%; } | |
| .row .three.columns { width: 23.404293%; } | |
| .row .four.columns { width: 31.914945%; } | |
| .row .five.columns { width: 40.425597%; } | |
| .row .six.columns { width: 48.936249%; } | |
| .row .seven.columns { width: 57.446901%; } | |
| .row .eight.columns { width: 65.957553%; } | |
| .row .nine.columns { width: 74.468205%; } | |
| .row .ten.columns { width: 82.978857%; } | |
| .row .eleven.columns { width: 91.489509%; } | |
| .row .twelve.columns { width: 100%; } | |
| /*** Formula: Column Width + Twice the Default Margin ***/ | |
| .row .push_one { margin-left: 10.638315%; } | |
| .row .push_two { margin-left: 19.148967%; } | |
| .row .push_three { margin-left: 27.659619%; } | |
| .row .push_four { margin-left: 36.170271%; } | |
| .row .push_five { margin-left: 44.680923%; } | |
| .row .push_six { margin-left: 53.191575%; } | |
| .row .push_seven { margin-left: 61.702227%; } | |
| .row .push_eight { margin-left: 70.212879%; } | |
| .row .push_nine { margin-left: 78.723531%; } | |
| .row .push_ten { margin-left: 87.234183%; } | |
| /*.row .push_eleven { margin-left: 95.744835%; }*/ | |
| /* Centering Columns is fun */ | |
| .row .one.centered { margin-left: 46.808586%; } | |
| .row .two.centered { margin-left: 42.55326%; } | |
| .row .three.centered { margin-left: 38.297934%; } | |
| .row .four.centered { margin-left: 34.042608%; } | |
| .row .five.centered { margin-left: 29.787282%; } | |
| .row .six.centered { margin-left: 25.531956%; } | |
| .row .seven.centered { margin-left: 21.27663%; } | |
| .row .eight.centered { margin-left: 17.021304%; } | |
| .row .nine.centered { margin-left: 12.765978%; } | |
| .row .ten.centered { margin-left: 8.510652%; } | |
| .row .eleven.centered { margin-left: 4.255326%; } | |
| /*** Formula: Column Width + Default Margin ***/ | |
| .row .push_one:first-child { margin-left: 8.510652%; } | |
| .row .push_two:first-child { margin-left: 17.021304%; } | |
| .row .push_three:first-child { margin-left: 25.531956%; } | |
| .row .push_four:first-child { margin-left: 34.042608%; } | |
| .row .push_five:first-child { margin-left: 42.55326%; } | |
| .row .push_six:first-child { margin-left: 51.063912%; } | |
| .row .push_seven:first-child { margin-left: 59.574564%; } | |
| .row .push_eight:first-child { margin-left: 68.085216%; } | |
| .row .push_nine:first-child { margin-left: 76.596868%; } | |
| .row .push_ten:first-child { margin-left: 85.10652%; } | |
| .row .push_eleven:first-child { margin-left: 93.617172%; } | |
| /*************** 16-column styles ****************/ | |
| .sixteen.colgrid .row .one.columns { width: 4.255326%; } | |
| .sixteen.colgrid .row .two.columns { width: 10.638315%; } | |
| .sixteen.colgrid .row .three.columns { width: 17.021304%; } | |
| .sixteen.colgrid .row .four.columns { width: 23.404293%; } | |
| .sixteen.colgrid .row .five.columns { width: 29.787282%; } | |
| .sixteen.colgrid .row .six.columns { width: 36.170271%; } | |
| .sixteen.colgrid .row .seven.columns { width: 42.55326%; } | |
| .sixteen.colgrid .row .eight.columns { width: 48.936249%; } | |
| .sixteen.colgrid .row .nine.columns { width: 55.319238%; } | |
| .sixteen.colgrid .row .ten.columns { width: 61.702227%; } | |
| .sixteen.colgrid .row .eleven.columns { width: 68.085216%; } | |
| .sixteen.colgrid .row .twelve.columns { width: 74.468205%; } | |
| .sixteen.colgrid .row .thirteen.columns { width: 80.851194%; } | |
| .sixteen.colgrid .row .fourteen.columns { width: 87.234183%; } | |
| .sixteen.colgrid .row .fifteen.columns { width: 93.617172%; } | |
| .sixteen.colgrid .row .sixteen.columns { width: 100%; } | |
| /*** Formula: Column Width + Twice the Default Margin ***/ | |
| .sixteen.colgrid .row .push_one { margin-left: 8.510652%; } | |
| .sixteen.colgrid .row .push_two { margin-left: 14.893641%; } | |
| .sixteen.colgrid .row .push_three { margin-left: 21.27663%; } | |
| .sixteen.colgrid .row .push_four { margin-left: 27.659619%; } | |
| .sixteen.colgrid .row .push_five { margin-left: 34.042608%; } | |
| .sixteen.colgrid .row .push_six { margin-left: 40.425597%; } | |
| .sixteen.colgrid .row .push_seven { margin-left: 46.808586%; } | |
| .sixteen.colgrid .row .push_eight { margin-left: 53.191575%; } | |
| .sixteen.colgrid .row .push_nine { margin-left: 59.574564%; } | |
| .sixteen.colgrid .row .push_ten { margin-left: 65.957553%; } | |
| .sixteen.colgrid .row .push_eleven { margin-left: 72.340542%; } | |
| .sixteen.colgrid .row .push_twelve { margin-left: 78.723531%; } | |
| .sixteen.colgrid .row .push_thirteen { margin-left: 85.10652%; } | |
| .sixteen.colgrid .row .push_fourteen { margin-left: 91.489509%; } | |
| .sixteen.colgrid .row .push_fifteen { margin-left: 97.872498%; } | |
| /* Centering Columns is fun */ | |
| .sixteen.colgrid .row .one.centered { margin-left: 47.872424%; } | |
| .sixteen.colgrid .row .two.centered { margin-left: 44.680929%; } | |
| .sixteen.colgrid .row .three.centered { margin-left: 41.489434%; } | |
| .sixteen.colgrid .row .four.centered { margin-left: 38.297939%; } | |
| .sixteen.colgrid .row .five.centered { margin-left: 35.106444%; } | |
| .sixteen.colgrid .row .six.centered { margin-left: 31.914949%; } | |
| .sixteen.colgrid .row .seven.centered { margin-left: 28.723454%; } | |
| .sixteen.colgrid .row .eight.centered { margin-left: 25.531959%; } | |
| .sixteen.colgrid .row .nine.centered { margin-left: 22.340464%; } | |
| .sixteen.colgrid .row .ten.centered { margin-left: 19.148969%; } | |
| .sixteen.colgrid .row .eleven.centered { margin-left: 15.957474%; } | |
| .sixteen.colgrid .row .twelve.centered { margin-left: 12.765979%; } | |
| .sixteen.colgrid .row .thirteen.centered { margin-left: 9.574484%; } | |
| .sixteen.colgrid .row .fourteen.centered { margin-left: 6.382989%; } | |
| .sixteen.colgrid .row .fifteen.centered { margin-left: 3.191495%; } | |
| /*** Formula: Column Width + Default Margin ***/ | |
| .sixteen.colgrid .row .push_one:first-child { margin-left: 6.382989%; } | |
| .sixteen.colgrid .row .push_two:first-child { margin-left: 12.765978%; } | |
| .sixteen.colgrid .row .push_three:first-child { margin-left: 19.148967%; } | |
| .sixteen.colgrid .row .push_four:first-child { margin-left: 25.531956%; } | |
| .sixteen.colgrid .row .push_five:first-child { margin-left: 31.914945%; } | |
| .sixteen.colgrid .row .push_six:first-child { margin-left: 38.297934%; } | |
| .sixteen.colgrid .row .push_seven:first-child { margin-left: 44.680923%; } | |
| .sixteen.colgrid .row .push_eight:first-child { margin-left: 51.063912%; } | |
| .sixteen.colgrid .row .push_nine:first-child { margin-left: 57.446901%; } | |
| .sixteen.colgrid .row .push_ten:first-child { margin-left: 63.82989%; } | |
| .sixteen.colgrid .row .push_eleven:first-child { margin-left: 70.212879%; } | |
| .sixteen.colgrid .row .push_twelve:first-child { margin-left: 76.595868%; } | |
| .sixteen.colgrid .row .push_thirteen:first-child { margin-left: 82.978857%; } | |
| .sixteen.colgrid .row .push_fourteen:first-child { margin-left: 89.361846%; } | |
| .sixteen.colgrid .row .push_fifteen:first-child { margin-left: 95.744835%; } | |
| img, object, embed { max-width: 100%; height: auto; } | |
| img { -ms-interpolation-mode: bicubic; } | |
| /* Nicolas Gallagher's micro clearfix */ | |
| .row:before, .row:after, .clearfix:before, .clearfix:after { content:""; display:table; } | |
| .row:after, .clearfix:after { clear: both; } | |
| .row, .clearfix { zoom: 1; } | |
| /*======================================================================= | |
| ❤❤❤ Artfully Masterminded by ZURB. Perfected by Digital Surgeons. ❤❤❤ | |
| ========================================================================*/ | |
| /* -------------------------------------------------- | |
| :: Block grids | |
| These are 2-up, 3-up, 4-up and 5-up ULs, suited | |
| for repeating blocks of content. Add 'mobile' to | |
| them to switch them just like the layout grid | |
| (one item per line) on phones | |
| -------------------------------------------------- | |
| .block-grid { display: block; overflow: hidden; } | |
| .block-grid>li { display: block; height: auto; float: left; } | |
| .block-grid.two-up { margin-left: -4% } | |
| .block-grid.two-up>li { margin-left: 4%; width: 46%; } | |
| .block-grid.three-up { margin-left: -2% } | |
| .block-grid.three-up>li { margin-left: 2%; width: 31.3%; } | |
| .block-grid.four-up { margin-left: -2% } | |
| .block-grid.four-up>li { margin-left: 2%; width: 23%; } | |
| .block-grid.five-up { margin-left: -1.5% } | |
| .block-grid.five-up>li { margin-left: 1.5%; width: 18.5%; } */ | |
| /*================================================== | |
| +++ Grid +++ | |
| ===================================================*/ | |
| /* Mobile */ | |
| @media only screen and (max-width: 480px) { | |
| /* Style adjustments for viewports 480px and under go here */ | |
| .row { | |
| text-align: center; | |
| } | |
| } | |
| @media only screen and (max-width: 767px) { | |
| body { -webkit-text-size-adjust: none; -ms-text-size-adjust: none; width: 100%; min-width: 0; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; } | |
| .container { min-width: 0; margin-left: 0; margin-right: 0; } | |
| .row { width: 100%; min-width: 0; margin-left: 0; margin-right: 0; } | |
| .row .row .column, .row .row .columns { padding: 0; } | |
| .column, .columns { width: auto !important; float: none; margin-left: 0; margin-right: 0; } | |
| .column:last-child, .columns:last-child { margin-right: 0; float: none; } | |
| .row .row .column, .row .row .columns { padding: 0; } | |
| .column, .columns { width: auto !important; float: none; margin-left: 0px; margin-right: 0px; } | |
| .column:last-child, .columns:last-child { margin-right: 0; float: none; } | |
| [class*="column"] + [class*="column"]:last-child { float: none; } | |
| [class*="column"]:before, [class*="column"]:after { display: table; } | |
| [class*="column"]:after { clear: both; } | |
| .push_one, .push_two, .push_three, .push_four, .push_five, .push_six, .push_seven, .push_eight, .push_nine, .push_ten, .push_eleven, .centered { margin-left: 0% !important; } | |
| } | |
| /*======================================================================= | |
| ❤❤❤ A Beautifully Responsive UI Kit. Perfected by Digital Surgeons. ❤❤❤ | |
| ========================================================================*/ | |
| /*======================================================================= | |
| Buttons | |
| ========================================================================*/ | |
| .btn { | |
| position: relative; | |
| display: inline-block; | |
| width: auto; | |
| height: 36px; | |
| line-height: 36px; | |
| border: 1px solid #999; | |
| border-radius: 4px; | |
| cursor: pointer; | |
| margin: 0 0 20px 0; | |
| -webkit-box-shadow: inset 0 1px 1px #fff, | |
| 0 1px 2px rgba(0,0,0,0.31); /* Remove this line if you dont want a dropshadow on your buttons*/ | |
| box-shadow: inset 0 1px 1px #fff, | |
| 0 1px 2px rgba(0,0,0,0.31); /* Remove this line if you dont want a dropshadow on your buttons*/ | |
| background: #ccc; /* Old browsers */ | |
| background: -moz-linear-gradient(top, #eee 0%, #ccc 100%); /* FF3.6+ */ | |
| background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eee), color-stop(100%,#ccc)); /* Chrome,Safari4+ */ | |
| background: -webkit-linear-gradient(top, #eee 0%,#ccc 100%); /* Chrome10+,Safari5.1+ */ | |
| background: -o-linear-gradient(top, #eee 0%,#ccc 100%); /* Opera 11.10+ */ | |
| background: -ms-linear-gradient(top, #eee 0%,#ccc 100%); /* IE10+ */ | |
| background: linear-gradient(top, #eee 0%,#ccc 100%); /* W3C */ | |
| filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */ | |
| } | |
| .btn:hover { | |
| -webkit-box-shadow: inset 0 1px 1px #fff, | |
| 0 1px 2px rgba(0,0,0,0.31); /* Remove this line if you dont want a dropshadow on your buttons*/ | |
| box-shadow: inset 0 1px 1px #fff, | |
| 0 1px 2px rgba(0,0,0,0.31); /* Remove this line if you dont want a dropshadow on your buttons*/ | |
| background: #ccc; /* Old browsers */ | |
| background: -moz-linear-gradient(top, #fff 0%, #ddd 100%); /* FF3.6+ */ | |
| background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fff), color-stop(100%,#ddd)); /* Chrome,Safari4+ */ | |
| background: -webkit-linear-gradient(top, #fff 0%,#ddd 100%); /* Chrome10+,Safari5.1+ */ | |
| background: -o-linear-gradient(top, #fff 0%,#ddd 100%); /* Opera 11.10+ */ | |
| background: -ms-linear-gradient(top, #fff 0%,#ddd 100%); /* IE10+ */ | |
| background: linear-gradient(top, #fff 0%,#ddd 100%); /* W3C */ | |
| filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#dddddd',GradientType=0 ); /* IE6-9 */ | |
| } | |
| .btn a, .btn:hover a { | |
| display: block; | |
| font-family: "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif; | |
| font-weight: bold; | |
| font-size: 16px; | |
| padding: 0 20px; | |
| text-align: center; | |
| text-decoration: none; | |
| color: #444; | |
| text-shadow: 0 1px 1px #fff; | |
| } | |
| .btn:hover a { | |
| line-height: inherit; | |
| } | |
| .btn:active { | |
| background: #ccc; /* Old browsers */ | |
| background: -moz-linear-gradient(top, #ddd 0%, #fff 100%); /* FF3.6+ */ | |
| background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ddd), color-stop(100%,#fff)); /* Chrome,Safari4+ */ | |
| background: -webkit-linear-gradient(top, #ddd 0%,#fff 100%); /* Chrome10+,Safari5.1+ */ | |
| background: -o-linear-gradient(top, #ddd 0%,#fff 100%); /* Opera 11.10+ */ | |
| background: -ms-linear-gradient(top, #ddd 0%,#fff 100%); /* IE10+ */ | |
| background: linear-gradient(top, #ddd 0%,#fff 100%); /* W3C */ | |
| filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dddddd', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */ | |
| } | |
| .btn.primary { | |
| height: 56px; | |
| line-height: 56px; | |
| border: 1px solid #7d180a; | |
| background: #c54224; /* Old browsers */ | |
| background: -moz-linear-gradient(top, #ef6638 0%, #b62918 100%); /* FF3.6+ */ | |
| background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ef6638), color-stop(100%,#b62918)); /* Chrome,Safari4+ */ | |
| background: -webkit-linear-gradient(top, #ef6638 0%,#b62918 100%); /* Chrome10+,Safari5.1+ */ | |
| background: -o-linear-gradient(top, #ef6638 0%,#b62918 100%); /* Opera 11.10+ */ | |
| background: -ms-linear-gradient(top, #ef6638 0%,#b62918 100%); /* IE10+ */ | |
| background: linear-gradient(top, #ef6638 0%,#b62918 100%); /* W3C */ | |
| filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ef6638', endColorstr='#b62918',GradientType=0 ); /* IE6-9 */ | |
| -webkit-box-shadow: inset 0 1px 1px #fb926a, | |
| 0 1px 2px rgba(0,0,0,0.61); /* Remove this line if you dont want a dropshadow on your buttons*/ | |
| box-shadow: inset 0 1px 1px #fb926a, | |
| 0 1px 2px rgba(0,0,0,0.61); /* Remove this line if you dont want a dropshadow on your buttons*/ | |
| -webkit-box-sizing: border-box; | |
| -moz-box-sizing: border-box; | |
| -ms-box-sizing: border-box; | |
| box-sizing: border-box; | |
| } | |
| .btn.primary:hover { | |
| line-height: 56px; | |
| background: #ed754e; /* Old browsers */ | |
| background: -moz-linear-gradient(top, #ed754e 0%, #c93e23 100%); /* FF3.6+ */ | |
| background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ed754e), color-stop(100%,#c93e23)); /* Chrome,Safari4+ */ | |
| background: -webkit-linear-gradient(top, #ed754e 0%,#c93e23 100%); /* Chrome10+,Safari5.1+ */ | |
| background: -o-linear-gradient(top, #ed754e 0%,#c93e23 100%); /* Opera 11.10+ */ | |
| background: -ms-linear-gradient(top, #ed754e 0%,#c93e23 100%); /* IE10+ */ | |
| background: linear-gradient(top, #ed754e 0%,#c93e23 100%); /* W3C */ | |
| filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ed754e', endColorstr='#c93e23',GradientType=0 ); /* IE6-9 */ | |
| } | |
| .btn.primary a, btn.primary:hover a { | |
| font-size: 24px; | |
| color: #fff; | |
| text-shadow: 0 1px 2px #6f1c0e, | |
| 0 1px 0 #6f1c0e; | |
| } | |
| .btn.primary:active { | |
| background: #ed754e; /* Old browsers */ | |
| background: -moz-linear-gradient(top, #c93e23 0%, #ed754e 100%); /* FF3.6+ */ | |
| background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c93e23), color-stop(100%,#ed754e)); /* Chrome,Safari4+ */ | |
| background: -webkit-linear-gradient(top, #c93e23 0%,#ed754e 100%); /* Chrome10+,Safari5.1+ */ | |
| background: -o-linear-gradient(top, #c93e23 0%,#ed754e 100%); /* Opera 11.10+ */ | |
| background: -ms-linear-gradient(top, #c93e23 0%,#ed754e 100%); /* IE10+ */ | |
| background: linear-gradient(top, #c93e23 0%,#ed754e 100%); /* W3C */ | |
| filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c93e23', endColorstr='#ed754e',GradientType=0 ); /* IE6-9 */ | |
| } | |
| .btn.secondary { | |
| height: 56px; | |
| line-height: 56px; | |
| border-color: #1d692d; | |
| -webkit-box-shadow: inset 0 1px 1px #94dda6, | |
| 0 1px 2px rgba(0,0,0,0.61); /* Remove this line if you dont want a dropshadow on your buttons*/ | |
| -moz-box-shadow: inset 0 1px 1px #94dda6, | |
| 0 1px 2px rgba(0,0,0,0.61); /* Remove this line if you dont want a dropshadow on your buttons*/ | |
| box-shadow: inset 0 1px 1px #94dda6, | |
| 0 1px 2px rgba(0,0,0,0.61); /* Remove this line if you dont want a dropshadow on your buttons*/ | |
| background: #5dbb73; /* Old browsers */ | |
| background: -moz-linear-gradient(top, #5dbb73 0%, #2d9047 100%); /* FF3.6+ */ | |
| background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5dbb73), color-stop(100%,#2d9047)); /* Chrome,Safari4+ */ | |
| background: -webkit-linear-gradient(top, #5dbb73 0%,#2d9047 100%); /* Chrome10+,Safari5.1+ */ | |
| background: -o-linear-gradient(top, #5dbb73 0%,#2d9047 100%); /* Opera 11.10+ */ | |
| background: -ms-linear-gradient(top, #5dbb73 0%,#2d9047 100%); /* IE10+ */ | |
| background: linear-gradient(top, #5dbb73 0%,#2d9047 100%); /* W3C */ | |
| filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5dbb73', endColorstr='#2d9047',GradientType=0 ); /* IE6-9 */ | |
| } | |
| .btn.secondary:hover { | |
| background: #68ce80; /* Old browsers */ | |
| background: -moz-linear-gradient(top, #68ce80 0%, #3cae5a 100%); /* FF3.6+ */ | |
| background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#68ce80), color-stop(100%,#3cae5a)); /* Chrome,Safari4+ */ | |
| background: -webkit-linear-gradient(top, #68ce80 0%,#3cae5a 100%); /* Chrome10+,Safari5.1+ */ | |
| background: -o-linear-gradient(top, #68ce80 0%,#3cae5a 100%); /* Opera 11.10+ */ | |
| background: -ms-linear-gradient(top, #68ce80 0%,#3cae5a 100%); /* IE10+ */ | |
| background: linear-gradient(top, #68ce80 0%,#3cae5a 100%); /* W3C */ | |
| filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#68ce80', endColorstr='#3cae5a',GradientType=0 ); /* IE6-9 */ | |
| } | |
| .btn.secondary a, .btn.secondary:hover a { | |
| font-size: 24px; | |
| color: #fff; | |
| text-shadow: 0 1px 2px #114a1e, | |
| 0 1px 0 #114a1e; | |
| } | |
| .btn.secondary:active { | |
| background: #68ce80; /* Old browsers */ | |
| background: -moz-linear-gradient(top, #3cae5a 0%, #68ce80 100%); /* FF3.6+ */ | |
| background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3cae5a), color-stop(100%,#68ce80)); /* Chrome,Safari4+ */ | |
| background: -webkit-linear-gradient(top, #3cae5a 0%,#68ce80 100%); /* Chrome10+,Safari5.1+ */ | |
| background: -o-linear-gradient(top, #3cae5a 0%,#68ce80 100%); /* Opera 11.10+ */ | |
| background: -ms-linear-gradient(top, #3cae5a 0%,#68ce80 100%); /* IE10+ */ | |
| background: linear-gradient(top, #3cae5a 0%,#68ce80 100%); /* W3C */ | |
| filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3cae5a', endColorstr='#68ce80',GradientType=0 ); /* IE6-9 */ | |
| } | |
| .btn.tertiary { | |
| height: 46px; | |
| line-height: 46px; | |
| border-color: #c19114; | |
| background: #feeeb8; /* Old browsers */ | |
| background: -moz-linear-gradient(top, #feeeb8 0%, #fed554 100%); /* FF3.6+ */ | |
| background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#feeeb8), color-stop(100%,#fed554)); /* Chrome,Safari4+ */ | |
| background: -webkit-linear-gradient(top, #feeeb8 0%,#fed554 100%); /* Chrome10+,Safari5.1+ */ | |
| background: -o-linear-gradient(top, #feeeb8 0%,#fed554 100%); /* Opera 11.10+ */ | |
| background: -ms-linear-gradient(top, #feeeb8 0%,#fed554 100%); /* IE10+ */ | |
| background: linear-gradient(top, #feeeb8 0%,#fed554 100%); /* W3C */ | |
| filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#feeeb8', endColorstr='#fed554',GradientType=0 ); /* IE6-9 */ | |
| -webkit-box-shadow: inset 0 2px 2px #fef9e9, | |
| inset 0 -3px 5px #fcaa20, | |
| 0 1px 2px rgba(0,0,0,0.61); /* Remove this line if you dont want a dropshadow on your buttons*/ | |
| box-shadow: inset 0 2px 2px #fef9e9, | |
| inset 0 -3px 5px #fcaa20, | |
| 0 1px 2px rgba(0,0,0,0.61); /* Remove this line if you dont want a dropshadow on your buttons*/ | |
| } | |
| .btn.tertiary:hover { | |
| background: #fef4d3; /* Old browsers */ | |
| background: -moz-linear-gradient(top, #fef4d3 0%, #fcde7e 100%); /* FF3.6+ */ | |
| background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fef4d3), color-stop(100%,#fcde7e)); /* Chrome,Safari4+ */ | |
| background: -webkit-linear-gradient(top, #fef4d3 0%,#fcde7e 100%); /* Chrome10+,Safari5.1+ */ | |
| background: -o-linear-gradient(top, #fef4d3 0%,#fcde7e 100%); /* Opera 11.10+ */ | |
| background: -ms-linear-gradient(top, #fef4d3 0%,#fcde7e 100%); /* IE10+ */ | |
| background: linear-gradient(top, #fef4d3 0%,#fcde7e 100%); /* W3C */ | |
| filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fef4d3', endColorstr='#fcde7e',GradientType=0 ); /* IE6-9 */ | |
| -webkit-box-shadow: inset 0 2px 2px #fef9e9, | |
| inset 0 -3px 5px #fdc841, | |
| 0 1px 2px rgba(0,0,0,0.61); /* Remove this line if you dont want a dropshadow on your buttons*/ | |
| box-shadow: inset 0 2px 2px #fef9e9, | |
| inset 0 -3px 5px #fdc841, | |
| 0 1px 2px rgba(0,0,0,0.61); /* Remove this line if you dont want a dropshadow on your buttons*/ | |
| } | |
| .btn.tertiary a, .btn.tertiary:hover a { | |
| font-size: 20px; | |
| color: #6a4a00; | |
| text-shadow: 0 1px 2px #fff; | |
| } | |
| .btn.tertiary:active { | |
| background: #fef4d3; /* Old browsers */ | |
| background: -moz-linear-gradient(top, #fcde7e 0%, #fef4d3 100%); /* FF3.6+ */ | |
| background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fcde7e), color-stop(100%,#fef4d3)); /* Chrome,Safari4+ */ | |
| background: -webkit-linear-gradient(top, #fcde7e 0%,#fef4d3 100%); /* Chrome10+,Safari5.1+ */ | |
| background: -o-linear-gradient(top, #fcde7e 0%,#fef4d3 100%); /* Opera 11.10+ */ | |
| background: -ms-linear-gradient(top, #fcde7e 0%,#fef4d3 100%); /* IE10+ */ | |
| background: linear-gradient(top, #fcde7e 0%,#fef4d3 100%); /* W3C */ | |
| filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcde7e', endColorstr='#fef4d3',GradientType=0 ); /* IE6-9 */ | |
| } | |
| .oval { | |
| -moz-border-radius: 1000px; | |
| -webkit-border-radius: 1000px; | |
| border-radius: 1000px; | |
| } | |
| .btn.left { | |
| text-align: left; | |
| text-indent: 12px; | |
| } | |
| /*===================================================================== | |
| Resize your buttons (Works in conjunction with .primary, .secondary, | |
| .tertiary button styles as well!) | |
| =======================================================================*/ | |
| .small.btn { | |
| line-height: 24px !important; | |
| height: 24px; | |
| } | |
| .small.btn a, .small.btn:hover a { | |
| font-size: 12px; | |
| } | |
| .medium.btn { | |
| line-height: 40px !important; | |
| height: 40px; | |
| } | |
| .medium.btn a, .medium.btn:hover a { | |
| font-size: 16px; | |
| } | |
| .large.btn { | |
| line-height: 65px !important; | |
| height: 65px; | |
| } | |
| .large.btn a, .large.btn:hover a { | |
| font-size: 30px; | |
| } | |
| /* Mobile Buttons */ | |
| @media only screen and (max-width: 767px) { | |
| .btn { display: block; } | |
| button.btn { width: 100%; padding-left: 0px; padding-right: 0px; } | |
| .btn.primary, .btn.secondary, .btn.tertiary, .btn.large { | |
| width: 100% !important; | |
| } | |
| .btn.medium { | |
| min-width: 75% !important; | |
| } | |
| } | |
| /* Correct FF button padding, thx ZURB */ | |
| @-moz-document url-prefix(http://) { | |
| input[type=submit].button::-moz-focus-inner, button.button::-moz-focus-inner { border: 0; padding: 0; } | |
| input[type=submit].small.button { padding: 7px 20px 8px; } | |
| input[type=submit].medium.button { padding: 8px 34px 9px; } | |
| input[type=submit].large.button { padding: 9px 48px 10px; } | |
| } | |
| /* -------------------------------------------------- | |
| Alerts | |
| -------------------------------------------------- */ | |
| div.alert-box { display: block; padding: 6px 7px; font-weight: bold; font-size: 13px; background: #eee; border: 1px solid rgba(0,0,0,0.1); margin-bottom: 12px; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; text-shadow: 0px 1px rgba(255,255,255,0.9); position: relative; } | |
| .alert-box.success { background-color: #7fae00; color: #fff; text-shadow: 0px -1px rgba(0,0,0,0.3); } | |
| .alert-box.warning { background-color: #c08c00; color: #fff; text-shadow: 0px -1px rgba(0,0,0,0.3); } | |
| .alert-box.error { background-color: #c00000; color: #fff; text-shadow: 0px -1px rgba(0,0,0,0.3); } | |
| .alert-box a.close { color: #000; position: absolute; right: 4px; top: 0px; font-size: 18px; opacity: 0.2; padding: 4px; } | |
| .alert-box a.close:hover { opacity: 0.4; } | |
| /*======================================================================= | |
| Pagination | |
| ========================================================================*/ | |
| ul.pagination { display: block; height: 24px; margin-left: -5px; } | |
| ul.pagination li { float: left; display: block; height: 24px; color: #999; font-size: 15px; margin-left: 5px; } | |
| ul.pagination li a { display: block; padding: 6px 7px 4px; color: #555; } | |
| ul.pagination li.current a, ul.pagination li:hover a { border-bottom: solid 2px #00a6fc; color: #141414; } | |
| ul.pagination li.unavailable a { cursor: default; color: #999; } | |
| ul.pagination li.unavailable:hover a { border-bottom: none; } | |
| /*======================================================================= | |
| Tabs | |
| ========================================================================*/ | |
| .tabs { | |
| display: block; | |
| } | |
| .tabs ul { | |
| margin: 0; | |
| padding: 0; | |
| height: 30px; | |
| border-bottom: 1px solid #1d692d; | |
| } | |
| .tabs li { | |
| display: block; | |
| width: auto; | |
| padding: 0; | |
| margin: 0 10px 0 0; | |
| line-height: 30px; | |
| float: left; | |
| color: #999; | |
| cursor: default; | |
| } | |
| .tabs li a { | |
| display: block; | |
| width: auto; | |
| height: 29px; | |
| padding: 0 9px; | |
| line-height: 30px; | |
| border: 1px solid #1d692d; | |
| margin: 0 -1px 0 0; | |
| color: #05390a; | |
| text-shadow: 0 1px 1px #77d58e; | |
| background: #5dbb73; | |
| } | |
| .tabs li a:hover { | |
| text-decoration: none; | |
| } | |
| .tabs li.active a { | |
| height: 30px; | |
| font-weight: bold; | |
| background: #ebffef; | |
| border-width: 1px 1px 0 1px; | |
| text-shadow: 0 1px 1px #fff; | |
| } | |
| .tabs div { | |
| display: none; | |
| padding: 20px 10px; | |
| } | |
| .tabs div.active { | |
| display: block; | |
| } | |
| .tabs li:last-child { | |
| margin-right: 0; | |
| } | |
| /**** Pretty Tab Styles ****/ | |
| .pretty.tabs ul { | |
| display: table; | |
| width: 100%; | |
| border: 1px solid #999; | |
| border-radius: 4px 4px 0 0; | |
| -webkit-box-shadow: inset 0 1px 1px #fff; | |
| box-shadow: inset 0 1px 1px #fff; | |
| background: #ccc; /* Old browsers */ | |
| background: -moz-linear-gradient(top, #eee 0%, #ccc 100%); /* FF3.6+ */ | |
| background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eee), color-stop(100%,#ccc)); /* Chrome,Safari4+ */ | |
| background: -webkit-linear-gradient(top, #eee 0%,#ccc 100%); /* Chrome10+,Safari5.1+ */ | |
| background: -o-linear-gradient(top, #eee 0%,#ccc 100%); /* Opera 11.10+ */ | |
| background: -ms-linear-gradient(top, #eee 0%,#ccc 100%); /* IE10+ */ | |
| background: linear-gradient(top, #eee 0%,#ccc 100%); /* W3C */ | |
| filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */ | |
| } | |
| .pretty.tabs li { | |
| display: table-cell; | |
| float: none; | |
| text-align: center; | |
| } | |
| .pretty.tabs li a { | |
| padding: 0; | |
| font-size: 16px; | |
| height: 52px; | |
| line-height: 52px; | |
| color: #444; | |
| border: none; | |
| border-right: 1px solid #999; | |
| text-shadow: 0 1px 1px #fff; | |
| font-weight: bold; | |
| background: transparent; | |
| } | |
| .pretty.tabs li:last-child a { | |
| border-right: none; | |
| } | |
| .pretty.tabs li.active a { | |
| font-weight: bold; | |
| color: #fff; | |
| position: relative; | |
| border: none; | |
| text-shadow: 0 2px 1px #1d692d, | |
| 0 1px 1px #1d692d | |
| ; | |
| -webkit-box-shadow: inset 0 1px 1px #94dda6, | |
| 0 1px 0 #1d692d, | |
| 0 -1px 0 #1d692d, | |
| 1px 0 0 #1d692d, | |
| -1px 0 0 #1d692d | |
| ; | |
| box-shadow: inset 0 1px 1px #94dda6, | |
| 0 1px 0 #1d692d, | |
| 0 -1px 0 #1d692d, | |
| 1px 0 0 #1d692d, | |
| -1px 0 0 #1d692d | |
| ; | |
| background: #5dbb73; /* Old browsers */ | |
| background: -moz-linear-gradient(top, #5dbb73 0%, #2d9047 100%); /* FF3.6+ */ | |
| background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5dbb73), color-stop(100%,#2d9047)); /* Chrome,Safari4+ */ | |
| background: -webkit-linear-gradient(top, #5dbb73 0%,#2d9047 100%); /* Chrome10+,Safari5.1+ */ | |
| background: -o-linear-gradient(top, #5dbb73 0%,#2d9047 100%); /* Opera 11.10+ */ | |
| background: -ms-linear-gradient(top, #5dbb73 0%,#2d9047 100%); /* IE10+ */ | |
| background: linear-gradient(top, #5dbb73 0%,#2d9047 100%); /* W3C */ | |
| filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5dbb73', endColorstr='#2d9047',GradientType=0 ); /* IE6-9 */ | |
| } | |
| .pretty.tabs ul li.active:first-child a { | |
| border-radius: 4px 0 0 0; | |
| margin-left: 0; | |
| } | |
| .pretty.tabs ul li.active:last-child a { | |
| border-radius: 0 4px 0 0; | |
| } | |
| /**** Pill Tabs ****/ | |
| .pill.tabs { height: auto; } | |
| .pill.tabs li, .pill.tabs li, .pretty.pill.tabs li { float: none; height: auto; } | |
| .pill.tabs li a { display: block; width: auto; height: auto; padding: 15px 20px; line-height: 1; border: solid 0 #ccc; border-width: 1px 1px 0; margin: 0; color: #555; background: #eee; font-size: 15px; font-size: 1.5rem; } | |
| .pill.tabs li a.active { height: auto; margin: 0; border-width: 1px 0 0; background: #fff; } | |
| .pretty.pill.tabs { border-bottom: solid 1px #eee; height: auto; } | |
| .pretty.pill.tabs li a { padding: 15px 20px; border: none; border-left: 1px solid #eee; border-right: 1px solid #eee; border-top: 1px solid #eee; background: #fff; } | |
| .pretty.pill.tabs li a.active { border: none; background: #00a6fc; color: #fff; margin: 0; position: static; top: 0; height: auto; } | |
| .pretty.pill.tabs li.active:first-child a { margin: 0; } | |
| /* Vertically Align Stuff */ | |
| .valign { display: table; width: 100%; } | |
| .valign > div, .valign > article { display: table-cell; vertical-align: middle; } | |
| /*======================================================================= | |
| ======================================================================== | |
| ❤❤❤ A Beautifully Responsive UI Kit. Perfected by Digital Surgeons. ❤❤❤ | |
| ======================================================================== | |
| ========================================================================*/ | |
| /*======================================================================= | |
| Form Styles | |
| ========================================================================*/ | |
| form { | |
| margin: 0 0 18px; | |
| } | |
| form label { | |
| display: block; | |
| font-size: 16px; | |
| line-height: 18px; | |
| cursor: pointer; | |
| margin-bottom: 9px; | |
| } | |
| form .field { | |
| position: relative; | |
| margin-bottom: 10px; | |
| } | |
| form dt { | |
| margin: 0; | |
| } | |
| .field .text input, .field .text input[type="search"], form textarea { | |
| font-size: 14px; | |
| width: 100%; | |
| border: none; | |
| box-shadow: none; | |
| border: none; | |
| padding: 0; | |
| margin: 0; | |
| outline: none; | |
| resize: none; | |
| } | |
| form textarea { | |
| height: 150px; | |
| } | |
| .field .text input[type="search"] { | |
| -webkit-appearance: textfield; | |
| } | |
| .field .text, .field .search, .field .textarea { | |
| position: relative; | |
| font-size: 14px; | |
| padding: 8px 10px; | |
| outline: none !important; | |
| background: #fff; | |
| box-shadow: inset 0 2px 3px #ccc, | |
| 0 1px 0 #f4fff6 | |
| ; | |
| border: 1px solid #b7b7b7; | |
| border-radius: 4px; | |
| } | |
| .field .text.oval { | |
| border-radius: 1000px; | |
| } | |
| .field .search { | |
| padding: 2px 10px; | |
| line-height: 24px; | |
| margin-bottom: 0; | |
| border: 1px solid #1d692d; | |
| box-shadow: 0px 1px 1px #94dda6, | |
| inset 0 1px 3px #888 | |
| ; | |
| } | |
| label + .text, label + textarea, label + select, label + div.dropdown, select + div.dropdown { | |
| margin-top: -9px; | |
| } | |
| .field.error .text { | |
| margin-top: 45px; | |
| box-shadow: inset 0 2px 3px #feb9a2, | |
| 0 1px 0 #f4fff6 | |
| ; | |
| -webkit-transition-duration: .2s; | |
| } | |
| .field.error .text, .field.error input { | |
| color: #cd4225; | |
| background: #ffdace; | |
| } | |
| form .msg { | |
| display: block; | |
| opacity: 0; | |
| height: 0; | |
| width: 100%; | |
| overflow: hidden; | |
| } | |
| form .error > .msg { | |
| opacity: 1; | |
| height: auto; | |
| overflow: visible; | |
| position: absolute; | |
| top: 0px; | |
| display: block; | |
| width: 100%; | |
| background: #b72a18; | |
| color: #fff; | |
| font-weight: 500; | |
| font-size: 14px; | |
| text-align: center; | |
| padding: 8px 0; | |
| border-radius: 4px; | |
| -webkit-transition-duration: .2s; | |
| } | |
| form .error .msg .caret { | |
| left: 50%; | |
| top: 100%; | |
| border-right: 5px solid transparent; | |
| border-left: 5px solid transparent; | |
| border-top: 5px solid #b72a18; | |
| opacity: 1; | |
| } | |
| /* Form Picker Element (<select>) */ | |
| .picker { | |
| position: relative; | |
| width: auto; | |
| height: 38px; | |
| display: inline-block; | |
| margin: 0 0 2px 1.2%; | |
| } | |
| .picker:first-child { | |
| margin-left: 0; | |
| } | |
| .picker select { | |
| position: absolute; | |
| z-index: 0; | |
| display:none; | |
| } | |
| .picker .toggle { | |
| position: relative; | |
| top: 0; | |
| left: 0; | |
| height: 36px; | |
| padding: 0 35px 0 20px; | |
| border: 1px solid #999; | |
| border-radius: 4px; | |
| font: bold 16px "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif; | |
| line-height: 36px; | |
| color: #444; | |
| text-shadow: 0 1px 1px #fff; | |
| display: inline-block; | |
| z-index: 1; | |
| background: #ccc; /* Old browsers */ | |
| background: -moz-linear-gradient(top, #eee 0%, #ccc 100%); /* FF3.6+ */ | |
| background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eee), color-stop(100%,#ccc)); /* Chrome,Safari4+ */ | |
| background: -webkit-linear-gradient(top, #eee 0%,#ccc 100%); /* Chrome10+,Safari5.1+ */ | |
| background: -o-linear-gradient(top, #eee 0%,#ccc 100%); /* Opera 11.10+ */ | |
| background: -ms-linear-gradient(top, #eee 0%,#ccc 100%); /* IE10+ */ | |
| background: linear-gradient(top, #eee 0%,#ccc 100%); /* W3C */ | |
| filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */ | |
| -webkit-box-shadow: inset 0 1px 1px #fff, | |
| 0 1px 2px rgba(0,0,0,0.31); /* Remove this line if you dont want a dropshadow on your buttons*/ | |
| -moz-box-shadow: inset 0 1px 1px #fff, | |
| 0 1px 2px rgba(0,0,0,0.31); /* Remove this line if you dont want a dropshadow on your buttons*/ | |
| box-shadow: inset 0 1px 1px #fff, | |
| 0 1px 2px rgba(0,0,0,0.31); /* Remove this line if you dont want a dropshadow on your buttons*/ | |
| } | |
| .picker .toggle:hover { | |
| border-color: #bbb; | |
| background: #eee; /* Old browsers */ | |
| background: -moz-linear-gradient(top, #fff 0%, #ddd 100%); /* FF3.6+ */ | |
| background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fff), color-stop(100%,#ddd)); /* Chrome,Safari4+ */ | |
| background: -webkit-linear-gradient(top, #fff 0%,#ddd 100%); /* Chrome10+,Safari5.1+ */ | |
| background: -o-linear-gradient(top, #fff 0%,#ddd 100%); /* Opera 11.10+ */ | |
| background: -ms-linear-gradient(top, #fff 0%,#ddd 100%); /* IE10+ */ | |
| background: linear-gradient(top, #fff 0%,#ddd 100%); /* W3C */ | |
| filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#dddddd',GradientType=0 ); /* IE6-9 */ | |
| } | |
| .caret { | |
| display: inline-block; | |
| position: absolute; | |
| width: 0; | |
| height: 0; | |
| text-indent: -99999px; | |
| *text-indent: 0; | |
| vertical-align: top; | |
| border-left: 4px solid transparent; | |
| border-right: 4px solid transparent; | |
| border-top: 4px solid #000000; | |
| opacity: 0.5; | |
| filter: alpha(opacity=30); | |
| content: "\2193"; | |
| -webkit-transition-duration: .2s; | |
| } | |
| .picker .caret { | |
| right: 12px; | |
| top: 16px; | |
| } | |
| .picker:hover .caret, .picker.open .caret { | |
| opacity: 1; | |
| filter: alpha(opacity=100); | |
| -webkit-transition-duration: .2s; | |
| } | |
| .picker ul { | |
| display: inline-block; | |
| position: absolute; | |
| text-align: center; | |
| left: 0; | |
| top: 20px; | |
| min-width: 180px; | |
| height: 0; | |
| max-height: 0; | |
| margin: 0; | |
| overflow: hidden; | |
| background: #fff; | |
| border-radius: 4px; | |
| } | |
| .picker.open ul { | |
| width: auto; | |
| height: auto; | |
| max-height: 1000px; | |
| top: 40px; | |
| border: 1px solid #bbb; | |
| -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.31); /* Remove this line if you dont want a dropshadow on your buttons*/ | |
| -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.31); /* Remove this line if you dont want a dropshadow on your buttons*/ | |
| box-shadow: 0 1px 2px rgba(0,0,0,0.31); /* Remove this line if you dont want a dropshadow on your buttons*/ | |
| -webkit-transition-duration: .4s; | |
| z-index: 99; | |
| } | |
| .picker ul li { | |
| margin-bottom: 0; | |
| border-bottom: 1px solid #eee; | |
| } | |
| .picker ul li:last-child { | |
| border-bottom: none; | |
| } | |
| .picker ul li a { | |
| display: block; | |
| padding: 10px 50px; | |
| } | |
| /* Inlined Label Style */ | |
| input.placeholder, textarea.placeholder { color: #888; } | |
| /* Text input and textarea sizes */ | |
| input.input-text, textarea { width: 254px; } | |
| input.small, textarea.small { width: 134px; } | |
| input.medium, textarea.medium { width: 254px; } | |
| input.large, textarea.large { width: 434px; } | |
| /* Fieldsets */ | |
| form fieldset { padding: 9px 9px 2px 9px; border: solid 1px #ddd; margin: 18px 0; } | |
| /* Inlined Radio & Checkbox */ | |
| form .field input[type=radio], form .field input[type=checkbox] { | |
| display: inline; | |
| width:auto; | |
| margin-bottom:0; | |
| } | |
| form .field .radio span, form .field .checkbox span { | |
| display: inline-block; | |
| width: 16px; | |
| height: 16px; | |
| position: relative; | |
| top: 2px; | |
| border: solid 1px #ccc; | |
| background: #fefefe; | |
| } | |
| form .field .radio.checked span, form .field .checkbox.checked span { | |
| background: url(../img/sprite_checkradio.gif) #fefefe 0 1px no-repeat; | |
| } | |
| form .field .radio span { | |
| border-radius: 8px; | |
| -webkit-border-radius: 8px; | |
| -moz-border-radius: 8px; | |
| } | |
| form .field .checkbox span { | |
| border-radius: 3px; | |
| -webkit-border-radius: 3px; | |
| -moz-border-radius: 3px; | |
| } | |
| form .field .checkbox.checked span { | |
| background-position: 0px -14px; | |
| } | |
| @media only screen and (max-width: 767px) { | |
| /* inform JS */ | |
| .picker:after { | |
| content: 'handheld'; | |
| display: none; | |
| } | |
| .picker select { | |
| display: inline-block; | |
| position: relative; | |
| opacity: 1; | |
| z-index: 1; | |
| max-width: 100%; | |
| height: 38px; | |
| line-height: 38px; | |
| font-size: 15px; | |
| } | |
| .picker .toggle { | |
| display: none; | |
| } | |
| } | |
| /*===================================================== | |
| Tables | |
| ======================================================*/ | |
| table { background: #fff; -moz-border-radius: 3px; -webkit-border-radius: 3px; width: 100%; margin: 0 0 18px; border: 1px solid #ddd; } | |
| table thead { background: #f5f5f5; } | |
| table thead tr th, | |
| table tbody tr td { font-size: 12px; line-height: 18px; text-align: left; } | |
| table thead tr th { padding: 8px 10px 9px; font-size: 14px; font-weight: bold; color: #222; } | |
| table thead tr th:first-child { border-left: none; } | |
| table thead tr th:last-child { border-right: none; } | |
| table thead tr { } | |
| table tbody { } | |
| table tbody tr { } | |
| table tbody tr.even, | |
| table tbody tr.alt { background: #f1f8fe; } | |
| table tbody tr:nth-child(even) { background: #f1f8fe; } | |
| table tbody tr td { color: #999; padding: 9px 10px; vertical-align: top; border: none;} | |
| /*===================================================== | |
| Navigation (with dropdowns) | |
| ======================================================*/ | |
| .navbar { | |
| width: 100%; | |
| display: table; | |
| border: 1px solid #1d692d; | |
| margin-bottom: 20px; | |
| background: #5dbb73; /* Change this to suit the color theme of your site */ | |
| } | |
| .navbar .logo { | |
| display: table-cell; | |
| height: 55px; | |
| margin: 0; | |
| line-height: 0; | |
| vertical-align: middle; | |
| } | |
| .navbar .logo a { | |
| display: block; | |
| height: 55px; | |
| line-height: 60px; | |
| padding: 0 0 0 15px; | |
| overflow: hidden; | |
| } | |
| .navbar ul { | |
| display: table; | |
| width: 100%; | |
| float: none; | |
| vertical-align: middle; | |
| margin-bottom: 0; | |
| } | |
| .navbar ul li { | |
| display: table-cell; | |
| float: none; | |
| list-style-type: none; | |
| margin-bottom: 0; | |
| margin-left: 0; | |
| text-align: center; | |
| border-right: 1px solid #114a1e; | |
| } | |
| .navbar > ul > li > a { | |
| display: block; | |
| height: 55px; | |
| line-height: 55px; | |
| font-size: 16px; | |
| padding: 0 15px; | |
| color: #fff; | |
| font-weight: bold; | |
| text-shadow: 0 1px 2px #114a1e, | |
| 0 1px 0 #114a1e; | |
| } | |
| .navbar > ul > li .field { | |
| position: relative; | |
| display: inline-block; | |
| text-align: center; | |
| } | |
| .navbar > ul > li .field .search input { | |
| line-height: 14px; | |
| } | |
| .navbar > ul > li:hover > a { | |
| position: relative; | |
| background: #05390a; | |
| z-index: 1000; | |
| } | |
| .navbar > ul > li > li > a { | |
| padding: 0 33px; | |
| } | |
| .navbar > ul > li:last-child, .navbar > ul > li:last-child a:hover { | |
| border-right: none; | |
| } | |
| /**** Navbar positioning for Microsoft's browser who deserves not to be mentioned ****/ | |
| .oldie .navbar, .oldie .navbar > ul > li > a { display: block; } | |
| .oldie .navbar .logo, .oldie .navbar ul, .oldie .navbar ul li { float: left; display: inline-block; } | |
| .oldie .navbar .logo a { display: block; overflow: hidden; } | |
| .oldie .navbar > ul > li .field { display: inline-block; padding: 0 18px; } | |
| /******** Pretty Navbar Styles *********/ | |
| .pretty.navbar { | |
| border-radius: 4px; | |
| background: -moz-linear-gradient(top, #5dbb73 0%, #2d9047 100%); /* FF3.6+ */ | |
| background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5dbb73), color-stop(100%,#2d9047)); /* Chrome,Safari4+ */ | |
| background: -webkit-linear-gradient(top, #5dbb73 0%,#2d9047 100%); /* Chrome10+,Safari5.1+ */ | |
| background: -o-linear-gradient(top, #5dbb73 0%,#2d9047 100%); /* Opera 11.10+ */ | |
| background: -ms-linear-gradient(top, #5dbb73 0%,#2d9047 100%); /* IE10+ */ | |
| background: linear-gradient(top, #5dbb73 0%,#2d9047 100%); /* W3C */ | |
| filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5dbb73', endColorstr='#2d9047',GradientType=0 ); /* IE6-9 */ | |
| -webkit-box-shadow: inset 0 1px 1px #94dda6, | |
| 0 1px 2px rgba(0,0,0,0.61) !important; /* Remove this line if you dont want a dropshadow on your buttons*/ | |
| -moz-box-shadow: inset 0 1px 1px #94dda6, | |
| 0 1px 2px rgba(0,0,0,0.61) !important; /* Remove this line if you dont want a dropshadow on your buttons*/ | |
| box-shadow: inset 0 1px 1px #94dda6, | |
| 0 1px 2px rgba(0,0,0,0.61) !important; /* Remove this line if you dont want a dropshadow on your buttons*/ | |
| } | |
| .pretty.navbar li { | |
| -webkit-box-shadow: | |
| inset 1px 0 0 #94dda6; | |
| -moz-box-shadow: | |
| inset 1px 0 0 #94dda6; | |
| box-shadow: | |
| inset 1px 0 0 #94dda6; | |
| } | |
| .pretty.navbar ul:first-child li:first-child a { | |
| border-radius: 4px 0 0 4px; | |
| } | |
| .pretty.navbar ul li:last-child a { | |
| border-radius: 0 4px 4px 0; | |
| } | |
| .pretty.navbar > ul > li:hover > a { | |
| -webkit-box-shadow: 2px 0 0 #114a1e; | |
| -moz-box-shadow: 2px 0 0 #114a1e; | |
| box-shadow: 2px 0 0 #114a1e; | |
| } | |
| .pretty.navbar > ul > li:first-child, .pretty.navbar > ul > li:first-child a:hover { | |
| box-shadow: none; | |
| } | |
| /******** CSS3 Dropdown Menu Styles **********/ | |
| .navbar li .dropdown { | |
| width: auto; | |
| min-width: 0px; | |
| max-width: 380px; | |
| height: 0; | |
| position: absolute; | |
| background: #fff; | |
| overflow: hidden; | |
| z-index: 999; | |
| } | |
| .navbar li:hover .dropdown { | |
| min-height: 60px; | |
| max-height: 500px; | |
| height: auto; | |
| padding: 0; | |
| border-top: 1px solid #1d692d; | |
| -webkit-box-shadow: 0px 3px 4px rgba(0,0,0,.3); | |
| -moz-box-shadow: 0px 3px 4px rgba(0,0,0,.3); | |
| box-shadow: 0px 3px 4px rgba(0,0,0,.3); | |
| -webkit-transition: ease-in-out .2s; | |
| -moz-transition: ease-in-out .2s; | |
| -o-transition: ease-in-out .2s; | |
| -ms-transition: ease-in-out .2s; | |
| transition: ease-in-out .2s; | |
| } | |
| .navbar li .dropdown ul { | |
| margin: 0; | |
| } | |
| .navbar li .dropdown ul > li { | |
| display: block; | |
| width: 100%; | |
| float: left; | |
| text-align: left; | |
| height: auto; | |
| font: 16px "Helvetica Neue", arial, sans-serif; | |
| border-radius: none; | |
| } | |
| .navbar li .dropdown ul > li a { | |
| display: block; | |
| line-height: 26px; | |
| height: 26px; | |
| padding: 10px 20px; | |
| border-bottom: 1px solid #ddd; | |
| } | |
| .navbar ul .dropdown ul li:first-child a { | |
| border-radius: 0; | |
| } | |
| .navbar li .dropdown li a:hover { | |
| background: #ebfeee; | |
| } | |
| @media only screen and (max-width: 767px) { | |
| .navbar, .pretty.navbar { | |
| background: transparent; | |
| border: 0; | |
| text-align: center; | |
| -webkit-box-shadow: none !important; | |
| box-shadow: none !important; | |
| } | |
| .navbar .logo { | |
| display: block; | |
| margin-bottom: 30px; | |
| } | |
| .navbar ul { | |
| display: block; | |
| width: 100%; | |
| margin-left: 0 !important; | |
| box-sizing: border-box; | |
| } | |
| .navbar ul li { | |
| display: block; | |
| width: 100%; | |
| border-right: 0 !important; | |
| } | |
| .navbar ul li > a { | |
| font-size: 22px !important; | |
| border: 1px solid #1d692d; | |
| background: #5dbb73; /* Old browsers */ | |
| } | |
| .navbar > ul > li .field { | |
| padding-top: 20px; | |
| width: 90%; | |
| } | |
| .navbar > ul > li .search { | |
| } | |
| .navbar li a:hover, .navbar > ul > li:first-child, .navbar > ul > li:first-child a:hover, .navbar > ul > li:last-child, .navbar > ul > li:last-child a:hover { | |
| box-shadow: none; | |
| } | |
| .navbar > ul > li:last-child, .navbar > ul > li:last-child a:hover { | |
| border-right: none; | |
| } | |
| .navbar li:first-child a { | |
| border-radius: 4px 4px 0 0 !important; | |
| } | |
| .navbar li:last-child a { | |
| border-radius: 0 0 4px 4px !important; | |
| } | |
| .navbar li:hover .dropdown { | |
| display: none; | |
| } | |
| .pretty.navbar ul li > a { | |
| background: -moz-linear-gradient(top, #5dbb73 0%, #2d9047 100%); /* FF3.6+ */ | |
| background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5dbb73), color-stop(100%,#2d9047)); /* Chrome,Safari4+ */ | |
| background: -webkit-linear-gradient(top, #5dbb73 0%,#2d9047 100%); /* Chrome10+,Safari5.1+ */ | |
| background: -o-linear-gradient(top, #5dbb73 0%,#2d9047 100%); /* Opera 11.10+ */ | |
| background: -ms-linear-gradient(top, #5dbb73 0%,#2d9047 100%); /* IE10+ */ | |
| background: linear-gradient(top, #5dbb73 0%,#2d9047 100%); /* W3C */ | |
| filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5dbb73', endColorstr='#2d9047',GradientType=0 ); /* IE6-9 */ | |
| -webkit-box-shadow: inset 0 1px 1px #94dda6; | |
| -moz-box-shadow: inset 0 1px 1px #94dda6; | |
| box-shadow: inset 0 1px 1px #94dda6; | |
| } | |
| .navbar ul li:hover > a { | |
| background: #05390a; | |
| border-right: none; | |
| box-shadow: none !important; | |
| } | |
| .pretty.navbar ul li .btn { | |
| margin-top: 20px; | |
| } | |
| } | |
| /*===================================================== | |
| Sub Navigation | |
| ======================================================*/ | |
| .subnav { | |
| display: block; | |
| width: auto; | |
| overflow: hidden; | |
| margin: 0 0 18px 0; | |
| padding-top: 4px; | |
| } | |
| .subnav li, .subnav dt, .subnav dd { | |
| float: left; | |
| display: inline; | |
| margin-left: 9px; | |
| margin-bottom: 4px; | |
| } | |
| .subnav li:first-child, .subnav dt:first-child, .subnav dd:first-child { | |
| margin-left: 0; | |
| } | |
| .sub-nav dt { | |
| color: #999; | |
| font-weight: normal; | |
| } | |
| .subnav li a, .subnav dd a { | |
| color: #05390a; | |
| font-size: 15px; | |
| text-decoration: none; | |
| -webkit-border-radius: 4px; | |
| -moz-border-radius: 4px; | |
| } | |
| .subnav li.active a, .subnav dd.active a { | |
| background: #5dbb73; | |
| padding: 5px 9px; | |
| text-shadow: 0 1px 1px #77d58e; | |
| } | |
| /** Intrinsic Ratio video embedding (maintains aspect ratio) **/ | |
| .video { | |
| width: 100%; | |
| position: relative; | |
| height: 0; | |
| padding-bottom: 56.25%; | |
| } | |
| .youtube.video, .vimeo.video { | |
| padding-top: 30px; | |
| } | |
| .video video, .video iframe, .video object, .video embed { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| /** Line Section Row Dividers **/ | |
| .line { | |
| padding-bottom: 20px; | |
| margin-bottom: 20px; | |
| border-bottom-style: solid; | |
| border-bottom-color: #ccc; | |
| } | |
| .thin.line { | |
| border-width: 1px; | |
| } | |
| .medium.line { | |
| border-width: 2px; | |
| } | |
| .thick.line { | |
| border-width: 4px; | |
| } | |
| /* Skip Links */ | |
| .skipnav li { | |
| display: inline-block; | |
| margin-left: 2%; | |
| } | |
| .skipnav li:first-child { | |
| margin-left: 0; | |
| } | |
| .skiplink a, .skipnav a { | |
| background: #5dbb73; | |
| color: #05390a; | |
| padding: 6px 15px; | |
| border-radius: 4px; | |
| text-shadow: 0 1px 1px #77d58e; | |
| } | |
| .skiplink a:hover, .skipnav a:hover { | |
| background: #72dd8d; | |
| } | |
| .skiplink a i, .skipnav a i { | |
| margin-left: 10px; | |
| } | |
| /* Preformatted Text */ | |
| pre { | |
| background-color: #1b1b1b; | |
| -moz-border-radius: 4px; | |
| -webkit-border-radius: 4px; | |
| -o-border-radius: 4px; | |
| -ms-border-radius: 4px; | |
| -khtml-border-radius: 4px; | |
| border-radius: 4px; | |
| box-shadow: inset 0 2px 2px #000; | |
| border: 1px solid #e6ffeb; | |
| box-sizing: border-box; | |
| color: #fff; | |
| font-family: Courier, monospace; | |
| font-size: 14px; | |
| text-align: left; | |
| overflow: hidden !important; | |
| padding: 20px; | |
| white-space: pre-wrap; | |
| } | |
| code { | |
| color: #D04526; | |
| font-family: Courier, monospace; | |
| font-size: 14px; | |
| padding: 2px 4px 2px 4px; | |
| background: #e7ffec; | |
| border-radius: 4px; | |
| } | |
| /* Contain floats: h5bp.com/q */ | |
| .clearfix:before, .clearfix:after { content: ""; display: table; } | |
| .clearfix:after { clear: both; } | |
| .clearfix { zoom: 1; } | |
| /* ========================================================================== | |
| Styles targeting cavemen who still use printers. | |
| Who prints in 2012? Seriously... | |
| Inlined to avoid required HTTP connection: h5bp.com/r | |
| ========================================================================== */ | |
| @media print { | |
| * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */ | |
| a, a:visited { text-decoration: underline; } | |
| a[href]:after { content: " (" attr(href) ")"; } | |
| abbr[title]:after { content: " (" attr(title) ")"; } | |
| .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* Don't show links for images, or javascript/internal links */ | |
| pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } | |
| thead { display: table-header-group; } /* h5bp.com/t */ | |
| tr, img { page-break-inside: avoid; } | |
| img { max-width: 100% !important; } | |
| @page { margin: 0.5cm; } | |
| p, h2, h3 { orphans: 3; widows: 3; } | |
| h2, h3 { page-break-after: avoid; } | |
| } | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- content to be placed inside <body>…</body> --> | |
| Whatever is clever dude<br> | |
| <div class="row"> | |
| <div class="three columns"> | |
| <p class="btn primary"><a href="#">This is my button</a></p></div> | |
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| {"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment