[483] | 1 | /* |
---|
| 2 | dojo.css |
---|
| 3 | Baseline CSS file for general usage. |
---|
| 4 | |
---|
| 5 | This file is intended to be a "quick and dirty" stylesheet you can use to give |
---|
| 6 | a straight-up web page some basic styling without having to do the dirty work |
---|
| 7 | yourself. It includes a modified version of YUI's reset.css (we pulled some |
---|
| 8 | of the list reset definitions, among other things), and then provides some very |
---|
| 9 | basic style rules to be applied to general HTML elements. |
---|
| 10 | |
---|
| 11 | This stylesheet is NOT intended to serve as the foundation for more complex things-- |
---|
| 12 | including the use of a TABLE for layout purposes. The table definitions in this |
---|
| 13 | file make the assumption that you will be using tables for thier declared purpose: |
---|
| 14 | displaying tabular data. |
---|
| 15 | |
---|
| 16 | If you are looking for a baseline stylesheet using tables for grid layout, you will |
---|
| 17 | need to supply your own layout rules to override the ones in this stylesheet. |
---|
| 18 | |
---|
| 19 | Applications using Dojo will function correctly without including this |
---|
| 20 | file, but it should provide sane defaults for many common things that page |
---|
| 21 | authors often need to set up manually. |
---|
| 22 | |
---|
| 23 | The Dojo Core uses this stylesheet to quickly style HTML-based tests and demos. Feel |
---|
| 24 | free to use it as you will. |
---|
| 25 | */ |
---|
| 26 | |
---|
| 27 | /*****************************************************************************************/ |
---|
| 28 | |
---|
| 29 | /* |
---|
| 30 | The below are borrowed from YUI's reset style sheets for pages and fonts. |
---|
| 31 | We've verified w/ the YUI development team that these are entirely |
---|
| 32 | copyright Yahoo, written entirely by Nate Koechley and Matt Sweeney without |
---|
| 33 | external contributions. |
---|
| 34 | |
---|
| 35 | Copyright (c) 2007, Yahoo! Inc. All rights reserved. |
---|
| 36 | Code licensed under the BSD License: |
---|
| 37 | http://developer.yahoo.net/yui/license.txt |
---|
| 38 | version: 2.2.1 |
---|
| 39 | */ |
---|
| 40 | |
---|
| 41 | body, div, dl, dt, dd, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td { |
---|
| 42 | margin: 0; |
---|
| 43 | padding: 0; |
---|
| 44 | } |
---|
| 45 | |
---|
| 46 | fieldset, img { |
---|
| 47 | border: 0 none; |
---|
| 48 | } |
---|
| 49 | |
---|
| 50 | address, caption, cite, code, dfn, th, var { |
---|
| 51 | font-style: normal; |
---|
| 52 | font-weight: normal; |
---|
| 53 | } |
---|
| 54 | |
---|
| 55 | caption, th { |
---|
| 56 | text-align: left; |
---|
| 57 | } |
---|
| 58 | |
---|
| 59 | q:before, q:after { |
---|
| 60 | content:""; |
---|
| 61 | } |
---|
| 62 | |
---|
| 63 | abbr, acronym { |
---|
| 64 | border:0; |
---|
| 65 | } |
---|
| 66 | /* End YUI imported code. */ |
---|
| 67 | |
---|
| 68 | /*****************************************************************************************/ |
---|
| 69 | |
---|
| 70 | /* |
---|
| 71 | Begin Dojo additions. |
---|
| 72 | |
---|
| 73 | Style definitions, based loosely on the Dijit Tundra theme. |
---|
| 74 | Relative unit calculations based on "Compose to a Vertical Rhythm", |
---|
| 75 | by Richard Rutter (http://24ways.org/2006/compose-to-a-vertical-rhythm) |
---|
| 76 | |
---|
| 77 | If changing the font size, make sure you do it in both |
---|
| 78 | percent and px (% for IE, px for everything else). |
---|
| 79 | % value based on default size of 16px (in most browsers). |
---|
| 80 | So if you want the default size to be 14px, set the |
---|
| 81 | % to 87% (14 / 16 = 0.875). |
---|
| 82 | |
---|
| 83 | Typical values: |
---|
| 84 | 10px: 62.5% |
---|
| 85 | 11px: 69% (68.75) |
---|
| 86 | 12px: 75% |
---|
| 87 | 13px: 81.25% |
---|
| 88 | 14px: 87.5% |
---|
| 89 | 16px: 100% |
---|
| 90 | |
---|
| 91 | Default: 12px |
---|
| 92 | */ |
---|
| 93 | body { |
---|
| 94 | font: 12px Myriad,Helvetica,Tahoma,Arial,clean,sans-serif; |
---|
| 95 | *font-size: 75%; |
---|
| 96 | } |
---|
| 97 | |
---|
| 98 | /* Headings */ |
---|
| 99 | h1 { |
---|
| 100 | font-size: 1.5em; |
---|
| 101 | font-weight: normal; |
---|
| 102 | line-height: 1em; |
---|
| 103 | margin-top: 1em; |
---|
| 104 | margin-bottom:0; |
---|
| 105 | } |
---|
| 106 | |
---|
| 107 | h2 { |
---|
| 108 | font-size: 1.1667em; |
---|
| 109 | font-weight: bold; |
---|
| 110 | line-height: 1.286em; |
---|
| 111 | margin-top: 1.929em; |
---|
| 112 | margin-bottom:0.643em; |
---|
| 113 | } |
---|
| 114 | |
---|
| 115 | h3, h4, h5, h6 { |
---|
| 116 | font-size: 1em; |
---|
| 117 | font-weight: bold; |
---|
| 118 | line-height: 1.5em; |
---|
| 119 | margin-top: 1.5em; |
---|
| 120 | margin-bottom: 0; |
---|
| 121 | } |
---|
| 122 | |
---|
| 123 | /* paragraphs, quotes and lists */ |
---|
| 124 | p { |
---|
| 125 | font-size: 1em; |
---|
| 126 | margin-top: 1.5em; |
---|
| 127 | margin-bottom: 1.5em; |
---|
| 128 | line-height: 1.5em; |
---|
| 129 | } |
---|
| 130 | |
---|
| 131 | blockquote { |
---|
| 132 | font-size: 0.916em; |
---|
| 133 | margin-top: 3.272em; |
---|
| 134 | margin-bottom: 3.272em; |
---|
| 135 | line-height: 1.636em; |
---|
| 136 | padding: 1.636em; |
---|
| 137 | border-top: 1px solid #ccc; |
---|
| 138 | border-bottom: 1px solid #ccc; |
---|
| 139 | } |
---|
| 140 | |
---|
| 141 | ol li, ul li { |
---|
| 142 | font-size: 1em; |
---|
| 143 | line-height: 1.5em; |
---|
| 144 | margin: 0; |
---|
| 145 | } |
---|
| 146 | |
---|
| 147 | /* pre and code */ |
---|
| 148 | pre, code { |
---|
| 149 | font-size:115%; |
---|
| 150 | *font-size:100%; |
---|
| 151 | font-family: Courier, "Courier New"; |
---|
| 152 | background-color: #efefef; |
---|
| 153 | border: 1px solid #ccc; |
---|
| 154 | } |
---|
| 155 | |
---|
| 156 | pre { |
---|
| 157 | border-width: 1px 0; |
---|
| 158 | padding: 1.5em; |
---|
| 159 | } |
---|
| 160 | |
---|
| 161 | /* |
---|
| 162 | Tables |
---|
| 163 | |
---|
| 164 | Note that these table definitions make the assumption that you are using tables |
---|
| 165 | to display tabular data, and NOT using tables as layout mechanisms. If you are |
---|
| 166 | using tables for layout, you will probably want to override these rules with |
---|
| 167 | more specific ones. |
---|
| 168 | |
---|
| 169 | These definitions make tabular data look presentable, particularly when presented |
---|
| 170 | inline with paragraphs. |
---|
| 171 | */ |
---|
| 172 | table { font-size:100%; } |
---|
| 173 | |
---|
| 174 | .dojoTabular { |
---|
| 175 | border-collapse: collapse; |
---|
| 176 | border-spacing: 0; |
---|
| 177 | border: 1px solid #ccc; |
---|
| 178 | margin: 0 1.5em; |
---|
| 179 | } |
---|
| 180 | |
---|
| 181 | .dojoTabular th { |
---|
| 182 | text-align: center; |
---|
| 183 | font-weight: bold; |
---|
| 184 | } |
---|
| 185 | |
---|
| 186 | .dojoTabular thead, |
---|
| 187 | .dojoTabular tfoot { |
---|
| 188 | background-color: #efefef; |
---|
| 189 | border: 1px solid #ccc; |
---|
| 190 | border-width: 1px 0; |
---|
| 191 | } |
---|
| 192 | |
---|
| 193 | .dojoTabular th, |
---|
| 194 | .dojoTabular td { |
---|
| 195 | padding: 0.25em 0.5em; |
---|
| 196 | } |
---|