Skip to content

Instantly share code, notes, and snippets.

@sourcegate

sourcegate/dabblet.css

Created May 26, 2012 18:58
Download ZIP
Gumby
Raw
dabblet.css
/* 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; }
}
Raw
dabblet.html
<!-- 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>
Raw
settings.json
{"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