1 /* reset styles */ 2 html, 3 body, 4 div, 5 h1, h2, h3, h4, h5, h6, 6 p, 7 img, 8 dl, dt, dd, 9 table, tbody, tfoot, thead, tr, th, td { 10 border: 0; 11 margin: 0; 12 padding: 0; 13 } 14 15 /* OVERALL */ 16 17 html, 18 body { 19 background-color: white; 20 overflow: auto; 21 } 22 23 body { 24 background: white url(bg_fade.jpg) repeat-x; 25 font-family: Arial, Helvetica, sans-serif; 26 font-size: 13px; 27 } 28 29 a { 30 color: #069; 31 } 32 33 a.visited { 34 color: #036; 35 } 36 37 p, ul, ol, li { 38 line-height: 1.3em; 39 } 40 41 table { 42 border-collapse: collapse; 43 border-width: 0; 44 empty-cells: show; 45 font-size: 1em; 46 margin: 0 0 1em 0; 47 padding: 0; 48 } 49 50 td, th { 51 background-color: inherit; 52 border: 1px solid #ccc; 53 padding: 6px 12px; 54 55 text-align: left; 56 vertical-align: top; 57 } 58 59 th { 60 background-color: #dee8f1; 61 } 62 63 /* HEADER */ 64 65 #header { 66 border-bottom: 3px solid #94b922; 67 height: 111px; 68 padding: 0 10px; 69 } 70 71 #header ul { 72 height: 29px; 73 list-style: none; 74 margin: 7px 0 0; 75 padding: 0; 76 } 77 78 #header li { 79 float: left; 80 margin: 0px 2px 0px 0px; 81 padding: 0; 82 } 83 84 #header li a { 85 background: url(bg_images_sprite.png) no-repeat 0 -58px; 86 color: #666; 87 display: block; 88 font-size: 13px; 89 font-weight: bold; 90 height: 29px; 91 margin: 0px; 92 text-decoration: none; 93 text-align: center; 94 width: 94px; 95 } 96 97 #header li a:hover 98 { 99 background: url(bg_images_sprite.png) no-repeat 0 -29px; 100 } 101 102 /* tab highlighting */ 103 .home #home-link a, 104 .community #community-link a, 105 .tech #tech-link a, 106 .source #source-link a, 107 .about #about-link a, 108 .compatibility #compatibility-link a { 109 background: green url(bg_images_sprite.png) no-repeat 0 0; 110 color: #fff; 111 cursor:default; 112 font-weight: bold; 113 } 114 115 #header li a span { 116 position: relative; 117 top: 7px; 118 } 119 120 #headerLeft { 121 padding-top: 25px; 122 } 123 124 #headerLeft img { 125 height: 50px; 126 width: 349px; 127 } 128 129 #headerRight { 130 position: absolute; right: 0; top: 0; 131 text-align: right; 132 } 133 134 #headerLinks { 135 font-size: 11px; 136 height: 13px; 137 margin: 10px 10px 0 0; 138 vertical-align: top; 139 } 140 141 #headerLinks a { 142 color: #7FA9B5; 143 } 144 145 #headerLinks img { 146 vertical-align: middle; 147 } 148 149 /* SIDEBAR */ 150 151 #sidebar { 152 background-color: #fff; 153 float: left; 154 font-size: 12px; 155 margin-top: 1em; 156 padding-left: 6px; 157 width: 250px; 158 } 159 160 #sidebar h1 { 161 font-size: 12px; 162 font-weight: bold; 163 margin: .5em 0 0 0; 164 padding: 3px 0 1px 9px; 165 } 166 167 #sidebar ul { 168 list-style: none; 169 margin: 0; 170 padding: 0 0 5px 18px; 171 } 172 173 #sidebar ul ul { 174 margin-top: .35em; 175 } 176 177 #sidebar li { 178 line-height: 16px; 179 padding: 0; 180 } 181 182 #sidebar li a { 183 text-decoration: none; 184 } 185 186 #sidebar li a:hover { 187 text-decoration: underline; 188 } 189 190 /* FOOTER */ 191 192 #footer { 193 clear: both; 194 font-size: 80%; 195 margin: 0 3em; 196 } 197 198 #footerLeft { 199 float: left; 200 } 201 202 #footerRight { 203 float: right; 204 } 205 206 /* MAIN */ 207 208 #main { 209 margin: 1em; 210 overflow: hidden; 211 } 212 213 #main h1 { 214 color: #5d7d99; 215 font-size: 150%; 216 } 217 218 #main h2 { 219 color: #435a6e; 220 font-size: 120%; 221 } 222 223 #main h3 { 224 color: #1f2a33; 225 font-size: 110%; 226 } 227 228 p { 229 margin: 1em 0 1em 0; 230 } 231 232 code { 233 font-family: "Lucida Console", Monaco, monospace; 234 } 235 236 pre { 237 color: #007000; 238 background-color: #fafafa; 239 border: solid 1px #ccc; 240 margin: 1em 0 1em 0; 241 padding: 1em; 242 } 243 244 dt { 245 color: #1f2a33; 246 font-size: 110%; 247 } 248 249 dd { 250 margin: 1em 1em 1em 1em; 251 } 252 253 /* TABLE OF CONTENTS */ 254 255 .toc { 256 background-color: #fafafa; 257 border: 1px solid #94b922; 258 display: inline-block; 259 padding: 1em; 260 margin: 1em 0; 261 } 262 263 .toctitle { 264 color: #007000; 265 font-size: 110%; 266 } 267 268 .toc ul { 269 list-style: none; 270 margin-left: 0; 271 padding: 0; 272 } 273 274 .toc li { 275 margin-left: 1em; 276 padding: 0; 277 } 278 279 280 /* REBOX (the little blue boxes on the home page) */ 281 282 .rebox { 283 background: #daf3fc; 284 border-collapse: collapse; 285 border-width: 0px; 286 float: left; 287 font-size: 13px; 288 margin: 1em 1em 1.5em 1em; 289 -moz-border-radius: 5px; 290 -webkit-border-radius: 5px; 291 width: 30%; 292 } 293 294 .rebox p img { 295 display: block; 296 margin-bottom: 2em; 297 } 298 299 .rebox p { 300 line-height: 1.25em; 301 margin-bottom: 16px; 302 } 303 304 .rebox h2, .rebox h3 { 305 background: url('rebox-gradient.gif') no-repeat center bottom #95c0d0; 306 color: white; 307 display: block; 308 font-size: 16px; 309 padding: .5em .5em .5em .75em; 310 -moz-border-radius-topright: 5px; 311 -moz-border-radius-topleft: 5px; 312 -webkit-border-top-right-radius: 5px; 313 -webkit-border-top-left-radius: 5px; 314 } 315 316 .rebox img { 317 float: left; 318 margin: 1em; margin-bottom: 5em; 319 padding: 0 0 3em 0; 320 } 321 322