Created
September 9, 2013 21:11
-
-
Save kyleturman/6501577 to your computer and use it in GitHub Desktop.
This file contains hidden or 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
/* Foundation v2.2.1 http://foundation.zurb.com */ | |
/* Artfully Masterminded by ZURB */ | |
/* -------------------------------------------------- | |
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; | |
} | |
sub {vertical-align: sub;} | |
sup {vertical-align: super;} | |
body { line-height: 1.5em; position: relative; -webkit-font-smoothing: antialiased; } | |
/* -------------------------------------------------- | |
:: Links | |
-------------------------------------------------- */ | |
a { text-decoration: none; line-height: inherit; } | |
a:focus { outline: none; } | |
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; } | |
li { margin-bottom: 12px; } | |
ul.large li { line-height: 21px; } | |
/* -------------------------------------------------- | |
:: Tables | |
-------------------------------------------------- */ | |
table { background: #fff; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; margin: 0 0 18px; border: 1px solid #ddd; } | |
table thead, table tfoot { background: #f5f5f5; } | |
table thead tr th, | |
table tfoot tr th, | |
table tbody tr td, | |
table tr td, | |
table tfoot tr td { font-size: 12px; line-height: 18px; text-align: left; } | |
table thead tr th, | |
table tfoot tr td { padding: 8px 10px 9px; font-size: 14px; font-weight: bold; color: #222; } | |
table thead tr th:first-child, table tfoot tr td:first-child { border-left: none; } | |
table thead tr th:last-child, table tfoot tr td:last-child { border-right: none; } | |
table tbody tr.even, | |
table tbody tr.alt { background: #f9f9f9; } | |
table tbody tr:nth-child(even) { background: #f9f9f9; } | |
table tbody tr td { color: #333; padding: 9px 10px; vertical-align: top; border: none; } | |
/* -------------------------------------------------- | |
:: Misc | |
---------------------------------------------------*/ | |
.left { float: left; } | |
.right { float: right; } | |
.text-left { text-align: left; } | |
.text-right { text-align: right; } | |
.text-center { text-align: center; } | |
.hide { display: none; } | |
/* Image Replacement */ | |
.ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; } | |
#googlemap img, object, embed { max-width: none; } | |
#map_canvas embed { max-width: none; } | |
#map_canvas img { max-width: none; } | |
#map_canvas object { max-width: none; } | |
/* Artfully Masterminded by ZURB */ | |
/* -------------------------------------------------- | |
:: Typography | |
-------------------------------------------------- */ | |
h1, h2, h3, h4, h5, h6 { color: #181818; font-weight: normal; line-height: 1.25; margin: 0; } | |
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; } | |
h1 { font-size: 46px; font-size: 4.6rem; margin-bottom: 12px;} | |
h2 { font-size: 35px; font-size: 3.5rem; margin-bottom: 9px; } | |
h3 { font-size: 28px; font-size: 2.8rem; margin-bottom: 9px; } | |
h4 { font-size: 21px; font-size: 2.1rem; margin-bottom: 3px; } | |
h5 { font-size: 18px; font-size: 1.8rem; font-weight: normal; margin-bottom: 3px; } | |
h6 { font-size: 15px; font-size: 1.5rem; font-weight: normal; } | |
.subheader { color: #777; font-weight: 300; margin-bottom: 24px; } | |
p { font-size: 13px; font-size: 1.3rem; line-height: 1.25; margin: 0 0 18px; } | |
p img { margin: 0; } | |
p.lead { font-size: 18px; font-size: 1.8rem; line-height: 1.5; } | |
em, i { font-style: italic; line-height: inherit; } | |
strong, b { 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) | |
*/ | |
.print-only { display: none !important; } | |
@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; } | |
.hide-on-print { display: none !important; } | |
.print-only { display: block !important; } | |
} | |
/* Artfully Masterminded by ZURB */ | |
/* -------------------------------------------------- | |
:: Grid | |
This is the mobile-friendly, responsive grid that | |
lets Foundation work much of its magic. | |
-------------------------------------------------- */ | |
.container { } | |
.row { width: 100%; max-width: 1110px; min-width: 727px; margin: 0 auto; | |
box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; | |
padding: 0 20px; | |
} | |
/* To fix the grid into a certain size, set max-width to width */ | |
.row .row { min-width: 0; max-width: none; } | |
.column, .columns { margin-left: 4.4%; float: left; min-height: 1px; position: relative; } | |
.column:first-child, .columns:first-child { margin-left: 0; } | |
[class*="column"] + [class*="column"]:last-child { float: right; } | |
[class*="column"] + [class*="column"].end { float: left; } | |
.row .one { width: 4.3%; } | |
.row .two { width: 13%; } | |
.row .three { width: 21.679%; } | |
.row .four { width: 30.37%; } | |
.row .five { width: 39.1%; } | |
.row .six { width: 47.8%; } | |
.row .seven { width: 56.5%; } | |
.row .eight { width: 65.2%; } | |
.row .nine { width: 73.9%; } | |
.row .ten { width: 82.6%; } | |
.row .eleven { width: 91.3%; } | |
.row .twelve { width: 100%; } | |
.row .offset-by-one { margin-left: 13.1%; } | |
.row .offset-by-two { margin-left: 21.8%; } | |
.row .offset-by-three { margin-left: 30.5%; } | |
.row .offset-by-four { margin-left: 39.2%; } | |
.row .offset-by-five { margin-left: 47.9%; } | |
.row .offset-by-six { margin-left: 56.6%; } | |
.row .offset-by-seven { margin-left: 65.3%; } | |
.row .offset-by-eight { margin-left: 74.0%; } | |
.row .offset-by-nine { margin-left: 82.7%; } | |
.row .offset-by-ten { margin-left: 91.4%; } | |
.row .centered { float: none; margin: 0 auto; } | |
.row .offset-by-one:first-child { margin-left: 8.7%; } | |
.row .offset-by-two:first-child { margin-left: 17.4%; } | |
.row .offset-by-three:first-child { margin-left: 26.1%; } | |
.row .offset-by-four:first-child { margin-left: 34.8%; } | |
.row .offset-by-five:first-child { margin-left: 43.5%; } | |
.row .offset-by-six:first-child { margin-left: 52.2%; } | |
.row .offset-by-seven:first-child { margin-left: 60.9%; } | |
.row .offset-by-eight:first-child { margin-left: 69.6%; } | |
.row .offset-by-nine:first-child { margin-left: 78.3%; } | |
.row .offset-by-ten:first-child { margin-left: 87%; } | |
.row .offset-by-eleven:first-child { margin-left: 95.7%; } | |
/* Source Ordering */ | |
.push-one { left: 8.7% } | |
.push-two { left: 17.4% } | |
.push-three { left: 26.1%; } | |
.push-four { left: 34.8%; } | |
.push-five { left: 43.5%; } | |
.push-six { left: 52.2%; } | |
.push-seven { left: 60.9%; } | |
.push-eight { left: 69.6%; } | |
.push-nine { left: 78.3%; } | |
.push-ten { left: 87%; } | |
.pull-one { right: 8.7% } | |
.pull-two { right: 17.4% } | |
.pull-three { right: 26.1%; } | |
.pull-four { right: 34.8%; } | |
.pull-five { right: 43.5%; } | |
.pull-six { right: 52.2%; } | |
.pull-seven { right: 60.9%; } | |
.pull-eight { right: 69.6%; } | |
.pull-nine { right: 78.3%; } | |
.pull-ten { right: 87%; } | |
img, object, embed { max-width: 100%; /*height: auto;*/ } | |
img { -ms-interpolation-mode: bicubic; } | |
#map_canvas img, .map_canvas img {max-width: none!important;} | |
/* 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; } | |
/* -------------------------------------------------- | |
:: 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 | |
For IE7/8 compatibility block-grid items need to be | |
the same height. You can optionally uncomment the | |
lines below to support arbitrary height, but know | |
that IE7/8 do not support :nth-child. | |
-------------------------------------------------- */ | |
.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%; margin-bottom: 4%;} | |
/* .block-grid.two-up>li:nth-child(2n+1) {clear: left;} */ | |
.block-grid.three-up { margin-left: -2% } | |
.block-grid.three-up>li { margin-left: 2%; width: 31.3%; margin-bottom: 2%;} | |
/* .block-grid.three-up>li:nth-child(3n+1) {clear: left;} */ | |
.block-grid.four-up { margin-left: -2% } | |
.block-grid.four-up>li { margin-left: 2%; width: 23%; margin-bottom: 2%;} | |
/* .block-grid.four-up>li:nth-child(4n+1) {clear: left;} */ | |
.block-grid.five-up { margin-left: -1.5% } | |
.block-grid.five-up>li { margin-left: 1.5%; width: 18.5%; margin-bottom: 1.5%;} | |
/* .block-grid.five-up>li:nth-child(5n+1) {clear: left;} */ | |
/* Artfully masterminded by ZURB */ | |
/* -------------------------------------------------- | |
:: Grid | |
-------------------------------------------------- */ | |
/* Mobile */ | |
@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; } | |
[class*="column"] + [class*="column"]:last-child { float: none; } | |
.column:before, .columns:before, .column:after, .columns:after { content:""; display:table; } | |
.column:after, .columns:after { clear: both; } | |
.offset-by-one, .offset-by-two, .offset-by-three, .offset-by-four, .offset-by-five, .offset-by-six, .offset-by-seven, .offset-by-eight, .offset-by-nine, .offset-by-ten, .offset-by-eleven, .centered { margin-left: 0 !important; } | |
.push-two, .push-three, .push-four, .push-five, .push-six, .push-seven, .push-eight, .push-nine, .push-ten { left: auto; } | |
.pull-two, .pull-three, .pull-four, .pull-five, .pull-six, .pull-seven, .pull-eight, .pull-nine, .pull-ten { right: auto; } | |
/* Mobile 4-column Grid */ | |
.row .phone-one:first-child, .row .phone-two:first-child, .row .phone-three:first-child, .row .phone-four:first-child { margin-left: 0; } | |
.row .phone-one:last-child, .row .phone-two:last-child, .row .phone-three:last-child, .row .phone-four:last-child { float: right; } | |
.row .phone-one, .row .phone-two, .row .phone-three, .row .phone-four { margin-left: 4.4%; float: left; min-height: 1px; position: relative; padding: 0; } | |
.row .phone-one { width: 21.68% !important; } | |
.row .phone-two { width: 47.8% !important; } | |
.row .phone-three { width: 73.9% !important; } | |
.row .phone-four { width: 100% !important; } | |
.row .push-one-phone { left: 26.08%; } | |
.row .push-two-phone { left: 52.2% } | |
.row .push-three-phone { left: 78.3% } | |
.row .pull-one-phone { right: 26.08% } | |
.row .pull-two-phone { right: 52.2% } | |
.row .pull-three-phone { right: 78.3%; } | |
} | |
/* -------------------------------------------------- | |
:: Block Grids | |
-------------------------------------------------- */ | |
@media only screen and (max-width: 767px) { | |
.block-grid.mobile { margin-left: 0; } | |
.block-grid.mobile > li { float: none; width: 100%; margin-left: 0; } | |
} | |
/* -------------------------------------------------- | |
:: Mobile Visibility Affordances | |
---------------------------------------------------*/ | |
.show-on-phones { display: none !important; } | |
.show-on-tablets { display: none !important; } | |
.show-on-desktops { display: block !important; } | |
.hide-on-phones { display: block !important; } | |
.hide-on-tablets { display: block !important; } | |
.hide-on-desktops { display: none !important; } | |
/* Modernizr-enabled tablet targeting */ | |
@media only screen and (max-width: 1280px) and (min-width: 768px) { | |
.hide-on-phones { display: block !important; } | |
.hide-on-tablets { display: none !important; } | |
.hide-on-desktops { display: block !important; } | |
.show-on-phones { display: none !important; } | |
.show-on-tablets { display: block !important; } | |
.show-on-desktops { display: none !important; } | |
} | |
@media only screen and (max-width: 767px) { | |
.hide-on-phones { display: none !important; } | |
.hide-on-tablets { display: block !important; } | |
.hide-on-desktops { display: block !important; } | |
.show-on-phones { display: block !important; } | |
.show-on-tablets { display: none !important; } | |
.show-on-desktops { display: none !important; } | |
} | |
/* Specific overrides for elements that require something other than display: block */ | |
table.show-on-desktops { display: table !important; } | |
table.hide-on-phones { display: table !important; } | |
table.hide-on-tablets { display: table !important; } | |
@media only screen and (max-width: 1280px) and (min-width: 768px) { | |
.touch table.hide-on-phones { display: table !important; } | |
.touch table.hide-on-desktops { display: table !important; } | |
.touch table.show-on-tablets { display: table !important; } | |
} | |
@media only screen and (max-width: 767px) { | |
table.hide-on-tablets { display: table !important; } | |
table.hide-on-desktops { display: table !important; } | |
table.show-on-phones { display: table !important; } | |
} | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment