1/* reset styles */ 2html, 3body, 4div, 5h1, h2, h3, h4, h5, h6, 6p, 7img, 8dl, dt, dd, 9table, tbody, tfoot, thead, tr, th, td { 10 border: 0; 11 margin: 0; 12 padding: 0; 13} 14 15/* OVERALL */ 16 17html, 18body { 19 background-color: white; 20 overflow: auto; 21} 22 23body { 24 background: white url(bg_fade.jpg) repeat-x; 25 font-family: Arial, Helvetica, sans-serif; 26 font-size: 13px; 27} 28 29a { 30 color: #069; 31} 32 33a.visited { 34 color: #036; 35} 36 37p, ul, ol, li { 38 line-height: 1.3em; 39} 40 41table { 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 50td, 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 59th { 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 228p { 229 margin: 1em 0 1em 0; 230} 231 232code { 233 font-family: "Lucida Console", Monaco, monospace; 234} 235 236pre { 237 color: #007000; 238 background-color: #fafafa; 239 border: solid 1px #ccc; 240 margin: 1em 0 1em 0; 241 padding: 1em; 242} 243 244dt { 245 color: #1f2a33; 246 font-size: 110%; 247} 248 249dd { 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