| 1 | /* -------------------------------------------------------------- |
|---|
| 2 | |
|---|
| 3 | typography.css |
|---|
| 4 | * Sets up some sensible default typography. |
|---|
| 5 | |
|---|
| 6 | -------------------------------------------------------------- */ |
|---|
| 7 | |
|---|
| 8 | /* Default font settings. |
|---|
| 9 | The font-size percentage is of 16px. (0.75 * 16px = 12px) */ |
|---|
| 10 | html { font-size:100.01%; } |
|---|
| 11 | body { |
|---|
| 12 | font-size: 75%; |
|---|
| 13 | color: #222; |
|---|
| 14 | background: #fff; |
|---|
| 15 | font-family: "Helvetica Neue", Arial, Helvetica, sans-serif; |
|---|
| 16 | } |
|---|
| 17 | |
|---|
| 18 | |
|---|
| 19 | /* Headings |
|---|
| 20 | -------------------------------------------------------------- */ |
|---|
| 21 | |
|---|
| 22 | h1,h2,h3,h4,h5,h6 { font-weight: normal; color: #111; } |
|---|
| 23 | |
|---|
| 24 | h1 { font-size: 3em; line-height: 1; margin-bottom: 0.5em; } |
|---|
| 25 | h2 { font-size: 2em; margin-bottom: 0.75em; } |
|---|
| 26 | h3 { font-size: 1.5em; line-height: 1; margin-bottom: 1em; } |
|---|
| 27 | h4 { font-size: 1.2em; line-height: 1.25; margin-bottom: 1.25em; } |
|---|
| 28 | h5 { font-size: 1em; font-weight: bold; margin-bottom: 1.5em; } |
|---|
| 29 | h6 { font-size: 1em; font-weight: bold; } |
|---|
| 30 | |
|---|
| 31 | h1 img, h2 img, h3 img, |
|---|
| 32 | h4 img, h5 img, h6 img { |
|---|
| 33 | margin: 0; |
|---|
| 34 | } |
|---|
| 35 | |
|---|
| 36 | |
|---|
| 37 | /* Text elements |
|---|
| 38 | -------------------------------------------------------------- */ |
|---|
| 39 | |
|---|
| 40 | p { margin: 0 0 1.5em; } |
|---|
| 41 | /* |
|---|
| 42 | These can be used to pull an image at the start of a paragraph, so |
|---|
| 43 | that the text flows around it (usage: <p><img class="left">Text</p>) |
|---|
| 44 | */ |
|---|
| 45 | .left { float: left !important; } |
|---|
| 46 | p .left { margin: 1.5em 1.5em 1.5em 0; padding: 0; } |
|---|
| 47 | .right { float: right !important; } |
|---|
| 48 | p .right { margin: 1.5em 0 1.5em 1.5em; padding: 0; } |
|---|
| 49 | |
|---|
| 50 | a:focus, |
|---|
| 51 | a:hover { color: #09f; } |
|---|
| 52 | a { color: #06c; text-decoration: underline; } |
|---|
| 53 | |
|---|
| 54 | blockquote { margin: 1.5em; color: #666; font-style: italic; } |
|---|
| 55 | strong,dfn { font-weight: bold; } |
|---|
| 56 | em,dfn { font-style: italic; } |
|---|
| 57 | sup, sub { line-height: 0; } |
|---|
| 58 | |
|---|
| 59 | abbr, |
|---|
| 60 | acronym { border-bottom: 1px dotted #666; } |
|---|
| 61 | address { margin: 0 0 1.5em; font-style: italic; } |
|---|
| 62 | del { color:#666; } |
|---|
| 63 | |
|---|
| 64 | pre { margin: 1.5em 0; white-space: pre; } |
|---|
| 65 | pre,code,tt { font: 1em 'andale mono', 'lucida console', monospace; line-height: 1.5; } |
|---|
| 66 | |
|---|
| 67 | |
|---|
| 68 | /* Lists |
|---|
| 69 | -------------------------------------------------------------- */ |
|---|
| 70 | |
|---|
| 71 | li ul, |
|---|
| 72 | li ol { margin: 0; } |
|---|
| 73 | ul, ol { margin: 0 1.5em 1.5em 0; padding-left: 1.5em; } |
|---|
| 74 | |
|---|
| 75 | ul { list-style-type: disc; } |
|---|
| 76 | ol { list-style-type: decimal; } |
|---|
| 77 | |
|---|
| 78 | dl { margin: 0 0 1.5em 0; } |
|---|
| 79 | dl dt { font-weight: bold; } |
|---|
| 80 | dd { margin-left: 1.5em;} |
|---|
| 81 | |
|---|
| 82 | |
|---|
| 83 | /* Tables |
|---|
| 84 | -------------------------------------------------------------- */ |
|---|
| 85 | |
|---|
| 86 | /* |
|---|
| 87 | Because of the need for padding on TH and TD, the vertical rhythm |
|---|
| 88 | on table cells has to be 27px, instead of the standard 18px or 36px |
|---|
| 89 | of other elements. |
|---|
| 90 | */ |
|---|
| 91 | table { margin-bottom: 1.4em; width:100%; } |
|---|
| 92 | th { font-weight: bold; } |
|---|
| 93 | thead th { background: #c3d9ff; } |
|---|
| 94 | th,td,caption { padding: 4px 10px 4px 5px; } |
|---|
| 95 | /* |
|---|
| 96 | You can zebra-stripe your tables in outdated browsers by adding |
|---|
| 97 | the class "even" to every other table row. |
|---|
| 98 | */ |
|---|
| 99 | tbody tr:nth-child(even) td, |
|---|
| 100 | tbody tr.even td { |
|---|
| 101 | background: #e5ecf9; |
|---|
| 102 | } |
|---|
| 103 | tfoot { font-style: italic; } |
|---|
| 104 | caption { background: #eee; } |
|---|
| 105 | |
|---|
| 106 | |
|---|
| 107 | /* Misc classes |
|---|
| 108 | -------------------------------------------------------------- */ |
|---|
| 109 | |
|---|
| 110 | .small { font-size: .8em; margin-bottom: 1.875em; line-height: 1.875em; } |
|---|
| 111 | .large { font-size: 1.2em; line-height: 2.5em; margin-bottom: 1.25em; } |
|---|
| 112 | .hide { display: none; } |
|---|
| 113 | |
|---|
| 114 | .quiet { color: #666; } |
|---|
| 115 | .loud { color: #000; } |
|---|
| 116 | .highlight { background:#ff0; } |
|---|
| 117 | .added { background:#060; color: #fff; } |
|---|
| 118 | .removed { background:#900; color: #fff; } |
|---|
| 119 | |
|---|
| 120 | .first { margin-left:0; padding-left:0; } |
|---|
| 121 | .last { margin-right:0; padding-right:0; } |
|---|
| 122 | .top { margin-top:0; padding-top:0; } |
|---|
| 123 | .bottom { margin-bottom:0; padding-bottom:0; } |
|---|
