lib/dojo/resources/dojo.css

   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 }