// Selection // -------------------------------------------------- ::-moz-selection { background-color: lighten($base-color, 65%); color: $base-color; text-shadow: none; } ::selection { background-color: lighten($base-color, 65%); color: $base-color; text-shadow: none; } // Body // -------------------------------------------------- body { font-family: $base-font; color: $text-color; } // TYPOGRAPHY // -------------------------------------------------- body { font-family: $base-font; color: $text-color; @include font-size(16); } p { @include font-size(18,yes,28); } li { @include font-size(16,12,24); } // Headings h1, h2, h3, h4, h5, h6 { font-family: $heading-font; text-rendering: optimizeLegibility; // Fix the character spacing for headings } h1 { @include font-size(36); } h2 { @include font-size(32); } h3 { @include font-size(28); } h4 { @include font-size(24); } h5 { @include font-size(20); } h6 { @include font-size(18); } u, ins { text-decoration: none; border-bottom: 1px solid $text-color; } // Tables table { border-collapse: collapse; margin: ((0px + $doc-line-height) / 2) 0; margin: ((0rem + ($doc-line-height / $doc-font-size)) / 2) 0; width: 100%; } tbody { tr:hover > td, tr:hover > th { background-color: $table-hover-color; } } thead { tr:first-child td { border-bottom: 2px solid $table-border-color; } } th { padding: (0px + $doc-line-height) / 2; padding: (0rem + ($doc-line-height / $doc-font-size)) / 2; font-family: $alt-font; font-weight: bold; text-align: left; background-color: $table-header-color; border-bottom: 1px solid darken($border-color, 15%); } td { border-bottom: 1px solid $border-color; padding: (0px + $doc-line-height) / 2; padding: (0rem + ($doc-line-height / $doc-font-size)) / 2; @include font-size(18); } tr, td, th { vertical-align: middle; } // Links // -------------------------------------------------- a { text-decoration: none; color: $link-color; &:visited { color: lighten($link-color, 20); } &:hover { color: darken($link-color, 20); } &:focus { outline: thin dotted; color: darken($link-color, 20); } &:hover, &:active { outline: 0; } } .link-arrow { font-weight: 100; text-decoration: underline; font-style: normal; } // Figures // -------------------------------------------------- figcaption { padding-top: 10px; @include font-size(14); line-height: 1.3; color: lighten($text-color, 10); } // Feature Image Caption // -------------------------------------------------- .image-credit { margin: 0 auto; max-width: 440px; padding-top: 5px; padding-right: 20px; padding-left: 20px; text-align: right; @include font-size(14,no); line-height: 1.3; color: lighten($text-color, 30); @include clearfix(); @include media($medium) { max-width: 760px; padding-right: 60px; padding-left: 60px; } @include media($large) { max-width: 960px; } a { color: lighten($text-color, 30); } } // Note text // -------------------------------------------------- .notice { margin-top: 1.5em; padding: .5em 1em; text-indent: 0; @include font-size(16); background-color: lighten($black, 95); border: 1px solid lighten($black, 90); @include rounded(4px); } // Blockquotes // -------------------------------------------------- blockquote { font-family: $alt-font; font-style: italic; @include font-size(16); padding-left: 20px; border-left: 8px solid $black; } // Footnotes // -------------------------------------------------- .footnotes { @include font-size(14); font-family: $base-font; } // Code // -------------------------------------------------- tt, code, kbd, samp, pre { font-family: $code-font; } p, li { code { @include font-size(14); font-family: $code-font; white-space: nowrap; margin: 0 2px; padding: 0 5px; border: 1px solid lighten($black, 90); background-color: lighten($black, 95); @include rounded(3px); } } pre { @include font-size(14); overflow-x: auto; } // Utility Classes // -------------------------------------------------- .wrap { margin: 0 auto; } .all-caps { text-transform: uppercase; } .pull-left { float: left; padding-right: $gutter; } .pull-right { float: right; padding-left: $gutter; } .unstyled-list { list-style: none; margin-left: 0; padding-left: 0; li { list-style-type: none; } } .no-scroll { overflow: hidden; } // Global Transition // --------------------------------------------------- b, i, strong, em, blockquote, p, q, span, figure, img, h1, h2, header, input, a, .highlight { @include transition(all .2s ease); }