zurb-foundation 2.2.1.2 → 3.0.3

data/stylesheets/foundation/reveal.scss

@@ -0,0 +1,54 @@
+/* CSS for jQuery Reveal Plugin
+ * Maintained for Foundation. foundation.zurb.com
+ * Free to use under the MIT license.
+ * http://www.opensource.org/licenses/mit-license.php
+ */
+
+  @import "base";
+
+/* Reveal Modals ---------------------- */
+
+  .reveal-modal-bg { position: fixed; height: 100%; width: 100%; background: #000; background: rgba(#000, .45); z-index: 40; display: none; top: 0; left: 0; }
+
+  .reveal-modal { background: $white; visibility: hidden; display: none; top: 100px; left: 50%; margin-left: -260px; width: 520px; position: absolute; z-index: 41; padding: 30px; @include box-shadow(0 0 10px rgba(#000,.4));
+    *:first-child { margin-top: 0; }
+    *:last-child { margin-bottom: 0; }
+    .close-reveal-modal {
+      @include font-size(22);
+      line-height: .5;
+      position: absolute;
+      top: 8px;
+      right: 11px;
+      color: #aaa;
+      text-shadow: 0 -1px 1px rbga(0,0,0,.6);
+      font-weight: bold;
+      cursor: pointer;
+    }
+    &.small   { width: 30%; margin-left: -10%; }
+    &.medium  { width: 40%; margin-left: -20%; }
+    &.large   { width: 60%; margin-left: -30%; }
+    &.expand  { width: 90%; margin-left: -45%; }
+    .row { min-width: 0; }
+  }
+
+  /* Mobile */
+  @media only screen and (max-width: $screenSmall - 1) {
+    .reveal-modal-bg { position: absolute; }
+
+    .reveal-modal,
+    .reveal-modal.small,
+    .reveal-modal.medium,
+    .reveal-modal.large,
+    .reveal-modal.xlarge { width: 80%; top: 15px; left: 50%; margin-left: -40%; padding: 20px; height: auto; }
+  }
+
+  /* NOTES
+  Close button entity is ×
+
+  Example markup
+  <div id="myModal" class="reveal-modal">
+   <h2>Awesome. I have it.</h2>
+   <p class="lead">Your couch.  I it's mine.</p>
+   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ultrices aliquet placerat. Duis pulvinar orci et nisi euismod vitae tempus lorem consectetur. Duis at magna quis turpis mattis venenatis eget id diam. </p>
+   <a class="close-reveal-modal">&#215;</a>
+  </div> */

data/stylesheets/foundation/tabs.scss

@@ -0,0 +1,89 @@
+/* Requires
+   globals.css
+   app.js */
+
+  @import "base";
+
+/* Tabs ---------------------- */
+
+  dl.tabs { border-bottom: solid 1px darken($white, 10%); display: block; height: $tabHeight; padding: 0; margin-bottom: 20px;
+    &.contained { margin-bottom: 0; }
+
+    dt { color: darken($white, 30%); cursor: default; display: block; float: left; font-size: ms(0) - 2px; height: $tabHeight; line-height: $tabHeight; padding: 0 9px 0 20px; width: auto; text-transform: uppercase;
+      &:first-child { padding: 0 9px 0 0; }
+    }
+
+    dd { display: block; float: left; padding: 0; margin: 0;
+      a { color: lighten($txtColor, 30%); display: block; font-size: ms(0); height: $tabHeight; line-height: $tabHeight; padding: 0px ms(1) * 1.4; }
+      &.active { border-top: 3px solid $mainColor; margin-top: -3px;
+        a { cursor: default; color: lighten($txtColor, 10%); background: #fff; border-left: 1px solid darken($white, 10%); border-right: 1px solid darken($white, 10%); font-weight: bold; }
+      }
+      &:first-child { margin-left: 0; }
+    }
+
+    &.vertical { height: auto; border-bottom: 1px solid darken($white, 10%);
+      dt, dd { float: none; height: auto; }
+
+      dd { border-left: 3px solid darken($white, 20%);
+        a { background: darken($white, 5%); border: none; border: 1px solid darken($white, 10%); border-width: 1px 1px 0 0; color: #555; display: block; font-size: ms(0); height: auto; line-height: 1; padding: 15px 20px; @include box-shadow(0 1px 0 $shinyEdge inset);
+        }
+        &.active { margin-top: 0; border-top: 1px solid lighten($black, 30%); border-left: 4px solid lighten($black, 10%);
+          a { background: lighten($black, 30%); border: none; color: #fff; height: auto; margin: 0; position: static; top: 0; @include box-shadow(0 0 0); }
+        }
+        &:first-child a.active { margin: 0; }
+      }
+    }
+
+    &.pill { border-bottom: none; margin-bottom: 10px;
+      dd { margin-right: 10px;
+        &:last-child { margin-right: 0; }
+        a { @include border-radius(1000px); background: darken($white, 10%); height: $tabHeight - 14; line-height: $tabHeight - 14; color: #666; }
+
+        &.active { border: none; margin-top: 0;
+          a { background-color: $mainColor; border: none; color: #fff; }
+        }
+      }
+      &.contained { border-bottom: solid 1px #eee; margin-bottom: 0; }
+    }
+
+    &.two-up, &.three-up, &.four-up, &.five-up {
+      dt a, dd a { padding: 0 ms(1); text-align: center; overflow: hidden; }
+    }
+    &.two-up dt, &.two-up dd      { width: 50%; }
+    &.three-up dt, &.three-up dd  { width: 33.33%; }
+    &.four-up dt, &.four-up dd    { width: 25%; }
+    &.five-up dt, &.five-up dd    { width: 20%; }
+  }
+
+  ul.tabs-content { display: block; margin: 0 0 20px; padding: 0;
+    &>li { display: none;
+      &.active { display: block; }
+    }
+    &.contained { padding: 0;
+      &>li { border: solid 0 darken($white, 10%); border-width: 0 1px 1px 1px; padding: 20px; }
+      &.vertical>li { border-width: 1px 1px 1px 1px; }
+    }
+  }
+
+  .no-js ul.tabs-content>li { display: block; }
+
+  @media only screen and (max-width: $screenSmall - 1) {
+    dl.tabs.mobile, dl.nice.tabs.mobile { width: auto; margin: 20px -20px 40px; height: auto; }
+    dl.tabs.mobile dt, dl.tabs.mobile dd, dl.nice.tabs.mobile dt, dl.nice.tabs.mobile dd { float: none; height: auto; }
+
+    dl.tabs.mobile dd a { display: block; width: auto; height: auto; padding: 18px 20px; line-height: 1; border: solid 0 #ccc; border-width: 1px 0 0; margin: 0; color: #555; background: #eee; @include font-size(15); }
+    dl.tabs.mobile dd a.active { height: auto; margin: 0; border-width: 1px 0 0; }
+
+
+    .tabs.mobile { border-bottom: solid 1px #ccc; height: auto;
+
+      dd a { padding: 18px 20px; border: none; border-left: none; border-right: none; border-top: 1px solid #ccc; background: #fff; }
+      dd a.active { border: none; background: $mainColor; color: #fff; margin: 0; position: static; top: 0; height: auto; }
+      dd:first-child a.active { margin: 0; }
+    }
+
+    dl.contained.mobile, dl.nice.contained.mobile { margin-bottom: 0; }
+    dl.contained.tabs.mobile dd a { padding: 18px 20px; }
+
+    dl.tabs.mobile + ul.contained { margin-left: -20px; margin-right: -20px; border-width: 0 0 1px 0; }
+  }

data/stylesheets/foundation/typography.scss

@@ -0,0 +1,83 @@
+@import "base";
+
+  /* Base Type Styles Using Modular Scale ---------------------- */
+
+  body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,p,blockquote,th,td {
+    margin:0;
+    padding:0;
+    font-size: ms(0);
+  }
+
+  p { font-size: ms(0); line-height: 1.6; margin-bottom: ms(1);
+    &.lead { font-size: ms(0) * 1.25; line-height: 1.6; margin-bottom: ms(1); }
+    img.left, img { margin: ms(1); margin-left: 0; }
+    img.right { margin: ms(1); margin-right: 0; }
+  }
+  aside p { font-size: ms(0) - 1; line-height: 1.35; font-style: italic; }
+
+  h1, h2, h3, h4, h5, h6 {
+    text-rendering: optimizeLegibility;
+    line-height: 1.1;
+    margin-bottom: ms(0);
+    margin-top: ms(0);
+    small { font-size: 60%; color: #888; line-height: 0; }
+  }
+
+  h1 { font-size: ms(5); }
+  h2 { font-size: ms(4); }
+  h3 { font-size: ms(3); }
+  h4 { font-size: ms(2); }
+  h5 { font-size: ms(1); }
+  h6 { font-size: ms(0); }
+
+  hr { border: solid #ddd; border-width: 1px 0 0; clear: both; margin: 22px 0 21px; height: 0; }
+
+  .subheader { line-height: 1.3; color: #777; font-weight: 300; margin-bottom: ms(1); }
+
+  em, i { font-style: italic; line-height: inherit; }
+  strong, b { font-weight: bold; line-height: inherit; }
+  small { font-size: 60%; line-height: inherit; }
+  code { font-weight: bold; background: $highlightColor; }
+
+  /* Lists ---------------------- */
+  ul, ol { font-size: ms(0); line-height: 1.6; margin-bottom: ms(1); list-style-position: inside; }
+  ul.square, ul.circle, ul.disc { margin-left: ms(1); }
+  ul.square { list-style-type: square; }
+  ul.circle { list-style-type: circle ; }
+  ul.disc { list-style-type: disc; }
+  ul.no-bullet { list-style: none; }
+  ul.large li { line-height: 21px; }
+
+  /* Blockquotes ---------------------- */
+  blockquote, blockquote p { line-height: 1.5; color: #777; }
+  blockquote { margin: 0 0 ms(1); padding: 9px 20px 0 19px; border-left: 1px solid #ddd; }
+  blockquote cite { display: block; font-size: ms(0) - 1; color: #555; }
+  blockquote cite:before { content: "\2014 \0020"; }
+  blockquote cite a, blockquote cite a:visited { color: #555; }
+
+  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; box-shadow:none !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; }
+    .hide-on-print { display: none !important; }
+    .print-only { display: block !important; }
+  }

data/stylesheets/foundation/ui.scss

@@ -0,0 +1,352 @@
+/* Requires:
+   globals.css */
+
+/* Table of Contents
+
+:: Visibility
+:: Alerts
+:: Labels
+:: Tooltips
+:: Panels
+:: Side Nav
+:: Sub Nav
+:: Pagination
+:: Breadcrumbs
+:: Lists
+:: Link Lists
+:: Keystroke Chars
+:: Video
+:: Tables
+:: Microformats
+
+*/
+
+  @import "base";
+
+  /* Visibility Classes ---------------------- */
+
+  /* Standard visibility targeting */
+  .show-for-small,
+  .show-for-medium,
+  .hide-for-large,
+  .show-for-xlarge { display: none !important; }
+
+  .hide-for-xlarge,
+  .show-for-large,
+  .hide-for-small,
+  .hide-for-medium { display: block !important; }
+
+  /* Very large display targeting */
+  @media only screen and (min-width: $screenXlarge) {
+    .hide-for-small,
+    .hide-for-medium,
+    .hide-for-large,
+    .show-for-xlarge { display: block !important; }
+
+    .show-for-small,
+    .show-for-medium,
+    .show-for-large,
+    .hide-for-xlarge { display: none !important; }
+  }
+
+  /* Medium display targeting */
+  @media only screen and (max-width: $screenMedium) and (min-width: $screenSmall) {
+    .hide-for-small,
+    .show-for-medium,
+    .hide-for-large,
+    .hide-for-xlarge { display: block !important; }
+
+    .show-for-small,
+    .hide-for-medium,
+    .show-for-large,
+    .show-for-xlarge { display: none !important; }
+  }
+
+  /* Small display targeting */
+  @media only screen and (max-width: $screenSmall - 1) {
+    .show-for-small,
+    .hide-for-medium,
+    .hide-for-large,
+    .hide-for-xlarge { display: block !important; }
+
+    .hide-for-small,
+    .show-for-medium,
+    .show-for-large,
+    .show-for-xlarge { display: none !important; }
+  }
+
+  /* Orientation targeting */
+  .show-for-landscape,
+  .hide-for-portrait { display: block !important; }
+  .hide-for-landscape,
+  .show-for-portrait { display: none !important; }
+
+  @media screen and (orientation: landscape) {
+    .show-for-landscape,
+    .hide-for-portrait { display: block !important; }
+    .hide-for-landscape,
+    .show-for-portrait { display: none !important; }
+  }
+
+  @media screen and (orientation: portrait) {
+    .show-for-portrait,
+    .hide-for-landscape { display: block !important; }
+    .hide-for-portrait,
+    .show-for-landscape { display: none !important; }
+  }
+
+  /* Touch-enabled device targeting */
+  .show-for-touch { display: none !important; }
+  .hide-for-touch { display: block !important; }
+  .touch .show-for-touch { display: block !important; }
+  .touch .hide-for-touch { display: none !important; }
+
+  /* Specific overrides for elements that require something other than display: block */
+
+  table.show-for-xlarge,
+  table.show-for-large,
+  table.hide-for-small,
+  table.hide-for-medium { display: table !important; }
+
+  @media only screen and (max-width: $screenMedium) and (min-width: $screenSmall) {
+    .touch table.hide-for-xlarge,
+    .touch table.hide-for-large,
+    .touch table.hide-for-small,
+    .touch table.show-for-medium { display: table !important; }
+  }
+
+  @media only screen and (max-width: $screenSmall - 1) {
+    table.hide-for-xlarge,
+    table.hide-for-large,
+    table.hide-for-medium,
+    table.show-for-small { display: table !important; }
+  }
+
+  /* Alerts ---------------------- */
+
+  div.alert-box { display: block; padding: 6px 7px 7px; font-weight: bold; font-size: ms(0); color: $white; background-color: $mainColor; border: 1px solid rgba(#000,.1); margin-bottom: 12px; @include border-radius(3px); text-shadow: 0 -1px rgba(#000,.3); position: relative;
+
+    &.success { background-color: $successColor; color: #fff; text-shadow: 0 -1px rgba(#000,.3); }
+    &.alert { background-color: $alertColor; color: #fff; text-shadow: 0 -1px rgba(#000,.3); }
+    &.secondary { background-color: $secondaryColor; color: darken($secondaryColor, 60%); text-shadow: 0 1px rgba(#fff,.3); }
+
+    a.close { color: #333; position: absolute; right: 4px; top: -1px; font-size: ms(1); opacity: 0.2; padding: 4px; }
+    a.close:hover, a.close:focus { opacity: 0.4; }
+
+  }
+
+
+  /* Labels ---------------------- */
+
+  .label { padding: 1px 4px 2px; font-size: ms(0) - 2; font-weight: bold; text-align: center; text-decoration: none; line-height: 1; white-space: nowrap; display: inline; position: relative; bottom: 1px; color: #fff; background: $mainColor;
+
+    &.radius { @include border-radius($buttonRadius); }
+    &.round { padding: 1px 7px 2px; @include border-radius(1000px); }
+
+    &.alert     { background-color: $alertColor; }
+    &.success   { background-color: $successColor; }
+    &.secondary   { background-color: $secondaryColor; color: darken($secondaryColor, 60%); }
+
+  }
+
+  /* Tooltips ---------------------- */
+
+  .has-tip { border-bottom: dotted 1px #ccc; cursor: help; font-weight: bold; color: #333;
+
+    &:hover { border-bottom: dotted 1px #0593dc; color: #0192dd; }
+    &.tip-left, &.tip-right { float: none !important; }
+
+  }
+
+  .tooltip { display: none; background: rgb(0,0,0); background: rgba(0,0,0,0.8); position: absolute; color: #fff; font-weight: bold; @include font-size(12); padding: 5px; z-index: 999; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; line-height: normal;
+
+    &>.nub { display: block; width: 0; height: 0; border: solid 5px; border-color: transparent transparent rgb(0,0,0) transparent; border-color: transparent transparent rgba(0,0,0,0.8) transparent; position: absolute; top: -10px; left: 10px; }
+    &.tip-override>.nub { border-color: transparent transparent rgb(0,0,0) transparent !important; border-color: transparent transparent rgba(0,0,0,0.8) transparent !important; top: -10px !important; }
+    &.tip-top>.nub { border-color: rgb(0,0,0) transparent transparent transparent; border-color: rgba(0,0,0,0.8) transparent transparent transparent; top: auto; bottom: -10px; }
+
+    &.tip-left, &.tip-right { float: none !important; }
+
+    &.tip-left>.nub { border-color: transparent transparent transparent rgb(0,0,0); border-color: transparent transparent transparent rgba(0,0,0,0.8); right: -10px; left: auto; }
+    &.tip-right>.nub { border-color: transparent rgb(0,0,0) transparent transparent; border-color: transparent rgba(0,0,0,0.8) transparent transparent; right: auto; left: -10px; }
+
+    &.noradius { @include border-radius(0); }
+    &.opened { color: #0192DD !important; border-bottom: dotted 1px #0593DC !important; }
+
+  }
+
+  .tap-to-close { display: block; @include font-size(10); color: #888; font-weight: normal; }
+
+  @media only screen and (max-width: $screenSmall - 1) {
+    .tooltip {
+      @include font-size(14);
+      line-height: 1.4;
+      padding: 7px 10px 9px 10px;
+    }
+    .tooltip > .nub, .tooltip.top > .nub, .tooltip.left > .nub, .tooltip.right > .nub {
+      border-color: transparent transparent rgb(0,0,0) transparent;
+      border-color: transparent transparent rgba(0,0,0,0.85) transparent;
+      top: -12px;
+      left: 10px;
+    }
+  }
+
+  /* Panels ---------------------- */
+
+  div.panel { background: darken($white, 5%); border: solid 1px darken($white, 10%); margin: 0 0 22px 0; padding: 20px;
+
+    *:first-child { margin-top: 0; }
+    *:last-child { margin-bottom: 0; }
+
+    &.callout { background: $mainColor; color: #fff; border-color: darken($mainColor, 10%); @include box-shadow(inset 0px 1px 0px rgba(255,255,255,0.5));
+      a { color: #fff; }
+      .button { background: $white; border: none; color: $mainColor; @include text-shadow(none);
+
+        &:hover { background: rgba(255,255,255,0.8); }
+      }
+    }
+
+    &.radius { @include border-radius($buttonRadius); }
+
+  }
+
+  /* Side Nav ---------------------- */
+
+  ul.side-nav { display: block; list-style: none; margin: 0; padding: ms(1) 0;
+
+    li { display: block; list-style: none; margin: 0 0 (ms(0)/2) 0;
+
+      a { display: block; }
+      &.active a { color: lighten($black, 30%); font-weight: bold; }
+      &.divider { border-top: 1px solid darken($white, 10%); height: 0; padding: 0; }
+    }
+  }
+
+/* Sub Navs http://www.zurb.com/article/292/how-to-create-simple-and-effective-sub-na ---------------------- */
+
+  dl.sub-nav { display: block; width: auto; overflow: hidden; margin: -4px 0 18px -9px; padding-top: 4px;
+
+    dt, dd { float: left; display: inline; margin-left: 9px; margin-bottom: 4px; }
+    dt { color: #999; font-weight: normal; }
+    dd a { text-decoration: none; @include border-radius(1000px); }
+    dd.active a { font-weight: bold; background: $mainColor; color: #fff; padding: 3px 9px; cursor: default; }
+
+  }
+
+  /* Pagination ---------------------- */
+
+  ul.pagination { display: block; height: 24px; margin-left: -5px;
+
+    li { float: left; display: block; height: 24px; color: #999; font-size: ms(0); margin-left: 5px;
+
+      a { display: block; padding: 1px 7px 1px; color: #555; }
+      &:hover a, a:focus { background: darken($white, 10%); }
+      &.unavailable a { cursor: default; color: #999; }
+      &.unavailable:hover a, &.unavailable a:focus { background: transparent; }
+      &.current a { background: $mainColor; color: $white; font-weight: bold; cursor: default;
+        &:hover { background: $mainColor; }
+      }
+    }
+
+  }
+
+  /* Breadcrums ---------------------- */
+
+  ul.breadcrumbs { display: block; background: lighten($secondaryColor, 5%); padding: 6px 10px 7px; border: 1px solid $secondaryColor; @include border-radius(2px); overflow: hidden;
+
+    li { margin: 0; padding: 0 12px 0 0; float: left; list-style: none;
+
+      a, span { text-transform: uppercase; @include font-size(11); padding-left: 12px; }
+      &:first-child a, &:first-child span { padding-left: 0; }
+    }
+
+    li:before { content: "/"; color: #aaa; }
+    li:first-child:before { content: " "; }
+    li.current a { cursor: default; color: #333; }
+    li:hover a, li a:focus { text-decoration: underline; }
+    li.current:hover a, li.current a:focus { text-decoration: none; }
+    li.unavailable {
+      a { color: #999; }
+      &:hover a, a:focus { text-decoration: none; color: #999; cursor: default; }
+    }
+
+  }
+
+  /* Lists ---------------------- */
+
+  ul.nice, ol.nice { list-style: none; margin: 0;
+
+    li { padding-left: 13px; position: relative;
+      span.bullet, span.number { position: absolute; left: 0; top: 0; color: #ccc; }
+    }
+  }
+
+  /* Link List */
+  ul.link-list { margin: 0 0 ms(1) -22px; padding: 0; list-style: none; overflow: hidden;
+
+    li { list-style: none; float: left; margin-left: 22px; display: block;
+
+      a { display: block; }
+    }
+  }
+
+
+  /* Keytroke Characters ---------------------- */
+
+  .keystroke, kbd { font-family: "Consolas", "Menlo", "Courier", monospace; font-size: ms(0) - 1; padding: 2px 4px 0px; margin: 0; background: darken($white, 7%); border: solid 1px darken($white, 14%); @include border-radius($buttonRadius); }
+
+
+  /* Video - Mad props to http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/ ---------------------- */
+
+  .flex-video {
+    position: relative;
+    padding-top: 25px;
+    padding-bottom: 67.5%;
+    height: 0;
+    margin-bottom: 16px;
+    overflow: hidden;
+
+    &.widescreen { padding-bottom: 57.25%; }
+    &.vimeo { padding-top: 0; }
+
+    iframe, object, embed, video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
+
+  }
+
+  @media only screen and (max-device-width: 800px), only screen and (device-width: 1024px) and (device-height: 600px), only screen and (width: 1280px) and (orientation: landscape), only screen and (device-width: 800px), only screen and (max-width: 767px) {
+    .flex-video { padding-top: 0; }
+  }
+
+  /* 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 { @include font-size(12); line-height: 18px; text-align: left; }
+  table thead tr th,
+  table tfoot tr td { padding: 8px 10px 9px; @include font-size(14); 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; }
+
+  /* Microformats ---------------------- */
+
+  ul.vcard { display: inline-block; margin: 0 0 12px 0; border: 1px solid #ddd; padding: 10px;
+
+    li { margin: 0; display: block; }
+    li.fn { font-weight: bold; @include font-size(15); }
+
+  }
+
+  p.vevent {
+    span.summary { font-weight: bold; }
+    abbr { cursor: default; text-decoration: none; font-weight: bold; border: none; padding: 0 1px; }
+  }
+