theme/default/display.css

   1 /**************************************************************\r
   2    AUTHOR:  Pat Heard (fullahead.org)\r
   3    DATE:    2006.09.12 \r
   4    PURPOSE: Styles the html elements\r
   5  **************************************************************/\r
   6 \r
   7 /* Forces horizontal scrollbar on in Mozilla */\r
   8 html {\r
   9   margin-bottom: 1px;\r
  10 }\r
  11 \r
  12 html,\r
  13 body {\r
  14   height: 100%;\r
  15 }\r
  16 \r
  17 body {\r
  18   margin: 0;\r
  19   padding: 0;\r
  20   text-align: center;\r
  21 \r
  22   font: 400 0.8em georgia, serif;\r
  23   line-height: 180%;\r
  24 \r
  25   background: url(body.jpg) repeat top left;\r
  26   color: #6D6864;\r
  27 }\r
  28 \r
  29 h1, h2, h3, h4, h5, h6, p, dl {\r
  30   margin: 0;\r
  31   padding: 10px 0;\r
  32 }\r
  33 \r
  34 h1 {   \r
  35   clear: both;\r
  36   font: 400 1.9em georgia, serif;\r
  37   color: #532406;  \r
  38 }\r
  39 \r
  40 h2 {\r
  41   clear: both;\r
  42   font: 400 1.3em georgia, serif;\r
  43   color: #61804E;\r
  44 }\r
  45 \r
  46 h3 {\r
  47   font: 700 1.1em georgia, serif;\r
  48   color: #8F512A;\r
  49 }\r
  50 \r
  51 h4 {\r
  52   font: 400 0.9em georgia, serif;\r
  53   text-transform: uppercase;\r
  54 }\r
  55 \r
  56 a {\r
  57   text-decoration: none;\r
  58   color: #5E9040;  \r
  59   border-bottom: 1px solid #B8E78B;\r
  60 }\r
  61 \r
  62 \r
  63 a:visited {\r
  64   background-color: #F1FFE3;\r
  65 }\r
  66 \r
  67 a:hover {\r
  68   color: #3C5D29;\r
  69   background-color: #F1FFE3;\r
  70   border-bottom: 1px solid #4A6E35;\r
  71 }\r
  72 \r
  73 \r
  74 ol {  \r
  75   margin: 10px 30px;\r
  76   padding: 0 30px;\r
  77 \r
  78   font-size: 1.4em;\r
  79   color: #532406;\r
  80   background-color: #FFF;\r
  81 }\r
  82 \r
  83 ol span {\r
  84   font-size: 0.7em;\r
  85   color: #6D6864;\r
  86 }\r
  87 \r
  88 ul {\r
  89   margin: 10px 30px;\r
  90   padding: 0 30px 0 5px;\r
  91   list-style: none;\r
  92 }\r
  93 \r
  94 ul li {\r
  95   padding-left: 25px;\r
  96   background: url(bullet.gif) no-repeat;\r
  97   background-position: 0 3px;\r
  98 }\r
  99 \r
 100 acronym {\r
 101   cursor: help;\r
 102   border-bottom: 1px solid #DDD;\r
 103 }\r
 104 \r
 105 blockquote {\r
 106   margin: 10px 0;\r
 107   background-color: #F1FFE3;\r
 108   border-bottom: 1px solid #B8E78B;\r
 109 }\r
 110 \r
 111 blockquote p {\r
 112   margin: 0.4em 0.8em;\r
 113 }\r
 114 \r
 115 del {\r
 116   color: #AAA;\r
 117 }\r
 118 \r
 119 code {\r
 120   margin: 15px 0;\r
 121   padding: 10px;\r
 122   display: block;\r
 123   overflow: auto;\r
 124   \r
 125   font: 400 1em courier, monospace;\r
 126   line-height: 120%;\r
 127   white-space: pre;\r
 128   \r
 129   background: #F4F4F4;\r
 130   border-bottom: 1px solid #D3D3D3;\r
 131 }\r
 132 \r
 133 \r
 134 \r
 135 /**************************************************************\r
 136    Tables\r
 137  **************************************************************/\r
 138 \r
 139 table {\r
 140   width: 100%;\r
 141   margin-bottom: 10px;  \r
 142   \r
 143   font-size: 1em;\r
 144   border-collapse: collapse;\r
 145 }\r
 146 \r
 147 table caption {\r
 148   margin-top: 10px;\r
 149   padding: 0 0 0.5em 3px;\r
 150 \r
 151   font: 400 0.8em georgia, sans-serif;\r
 152   text-align: left;  \r
 153 }\r
 154 \r
 155 table th,\r
 156 table td {\r
 157   text-align: left;\r
 158   vertical-align: top;\r
 159   padding: 4px 7px !important;\r
 160   padding: 6px 10px;\r
 161 }\r
 162 \r
 163 \r
 164 thead th {\r
 165   background-color: #F1FFE3;\r
 166   border-bottom: 1px solid #B8E78B;\r
 167 }\r
 168 \r
 169 tbody tr.dark {\r
 170   background-color: #F5F5F5;\r
 171 }\r
 172 \r
 173 tbody td {\r
 174   border-bottom: 1px solid #DDD;\r
 175 }\r
 176 \r
 177 tbody tr:hover {\r
 178   background-color: #FBFEDF;\r
 179 }\r
 180 \r
 181 /**************************************************************\r
 182    Form Elements\r
 183  **************************************************************/\r
 184 \r
 185 label {\r
 186   float: left;\r
 187   text-align: right;\r
 188   width: 9em;\r
 189   padding-right: 1em;\r
 190   \r
 191 }\r
 192 \r
 193 \r
 194 input,\r
 195 textarea,\r
 196 select {\r
 197   padding: 4px;\r
 198   font: 400 1em georgia, sans-serif;\r
 199   \r
 200   color: #666;\r
 201   background: #FFF;\r
 202   border-width: 1px;\r
 203   border-style: solid;\r
 204   border-color: #888 #DDD #DDD #888;  \r
 205 }\r
 206 \r
 207 \r
 208 input:focus,\r
 209 textarea:focus,\r
 210 select:focus {  \r
 211   padding: 3px;\r
 212   color: #000;\r
 213   background: #F1FFE3;\r
 214   border-width: 2px;\r
 215 }\r
 216 \r
 217 input.button {\r
 218   padding: 1px 10px;\r
 219 \r
 220   font: 400 1em georgia, sans-serif;\r
 221   cursor: pointer;\r
 222 \r
 223   color: #fff;\r
 224   background: #508231;\r
 225   border-width: 1px;\r
 226   border-style: solid;\r
 227   border-color: #B8E78B #2D5018 #2D5018 #B8E78B;\r
 228 }\r
 229 \r
 230 .required {\r
 231   cursor: help;\r
 232   border-bottom: 1px solid #CCC;\r
 233 }\r
 234 \r
 235 \r
 236 \r
 237 /**************************************************************\r
 238    Images\r
 239  **************************************************************/\r
 240 \r
 241 img.floatRight {\r
 242   margin: 5px 0px 10px 15px;  \r
 243 }\r
 244 \r
 245 img.floatLeft {\r
 246   margin: 5px 15px 10px 0px;\r
 247 }\r
 248 \r
 249 a img {  \r
 250   border: 4px solid #D5C9C2;\r
 251 }\r
 252 \r
 253 a:hover img {  \r
 254   border: 4px solid #BAAAA1;\r
 255 }\r
 256 \r
 257 /**************************************************************\r
 258    #wrapper & #content: wrapper positions and sets the width\r
 259    on the content.  The background is then applied to #content.\r
 260  **************************************************************/\r
 261 \r
 262 #wrap {\r
 263   width: 589px;\r
 264   height: 100%;\r
 265   margin: 0 auto;\r
 266 \r
 267   text-align: left;\r
 268 }\r
 269 \r
 270 #content {\r
 271   float: left;\r
 272   width: 589px;\r
 273   height: 100%;\r
 274   min-height: 100%;\r
 275 \r
 276   background: url(content.gif) repeat-y top center;\r
 277 }\r
 278 \r
 279 #content[id] {\r
 280   height: auto;\r
 281   background: url(content.png) repeat-y top center;\r
 282 }\r
 283 \r
 284 /**************************************************************\r
 285    #header: Holds the site title and header images\r
 286  **************************************************************/\r
 287 \r
 288 #header {\r
 289   padding: 60px 0 2em 49px;\r
 290   background: url(header.jpg) no-repeat top center;\r
 291 }\r
 292 \r
 293 /* Forces IE to set the hasLayout flag and show the header at the height of its contents \*/\r
 294 * html #header {\r
 295   height: 1%;\r
 296 }\r
 297 /* End hide from IE-mac */\r
 298 \r
 299 #header h1,\r
 300 #header h2 {\r
 301   margin: 0;\r
 302   padding: 0;\r
 303   background: none;\r
 304 }\r
 305 \r
 306 #header h1 {\r
 307   font-size: 3.5em;\r
 308   font-family: georgia;\r
 309   letter-spacing: -3px;\r
 310   color: #6E310B;\r
 311 }\r
 312 \r
 313 /**************************************************************\r
 314    #menu: The top level site menu\r
 315  **************************************************************/\r
 316 \r
 317 ul#menu {\r
 318   width: 491px;\r
 319   margin: 0 auto;\r
 320   padding: 0 !important;\r
 321   padding: 0 0 0 10px;\r
 322 }\r
 323 \r
 324 ul#menu li {\r
 325   display: inline;\r
 326   list-style: none;\r
 327   margin: 0;\r
 328   padding: 0;\r
 329 }\r
 330 \r
 331 ul#menu li a {\r
 332   float: left;\r
 333   padding: 15px 0 5px 0;\r
 334 \r
 335   font: 400 1.54em georgia, serif;\r
 336   text-align: center;\r
 337   text-decoration: none;\r
 338 \r
 339   color: #61804E;\r
 340   border-bottom: 1px solid #D3F1B6;\r
 341 }\r
 342 \r
 343 ul#menu li a:visited {\r
 344   background-color: #FFF;\r
 345 }\r
 346 \r
 347 ul#menu li a:hover {\r
 348   color: #2E5F0F;\r
 349   background: url(menu.gif) repeat-x bottom left;\r
 350 }\r
 351 \r
 352 ul#menu li a.here {\r
 353   color: #512103;\r
 354   background: url(menu.gif) repeat-x bottom left;\r
 355 }\r
 356 \r
 357 /* helper classes to control width of links in topbar */\r
 358 ul.two li a {\r
 359   width: 50%;\r
 360 }\r
 361 \r
 362 ul.three li a {\r
 363   width: 33%;\r
 364 }\r
 365 \r
 366 ul.four li a {\r
 367   width: 25%;\r
 368 }\r
 369 \r
 370 ul.five li a {\r
 371   width: 20%;\r
 372 }\r
 373 \r
 374 /**************************************************************\r
 375    #page: Holds the main page content.\r
 376  **************************************************************/\r
 377 \r
 378 #page {\r
 379   float: left;\r
 380   clear: both;\r
 381   width: 491px !important;\r
 382   width: 100%;\r
 383 \r
 384   padding: 2em 49px;\r
 385 }\r
 386 \r
 387 /**************************************************************\r
 388    .footer: Site footer\r
 389  **************************************************************/\r
 390 \r
 391 .footer {\r
 392   padding-top: 3em;\r
 393   font-size: 0.85em;\r
 394   clear: both;\r
 395 }\r
 396 \r
 397 /**************************************************************\r
 398    .bigLinks: Large, clickable links\r
 399  **************************************************************/\r
 400 \r
 401 ul.bigLinks {\r
 402   margin: 10px 0;\r
 403   padding: 0;\r
 404   list-style: none;\r
 405 \r
 406 }\r
 407 \r
 408 ul.bigLinks li {\r
 409   display: inline;\r
 410   margin: 0;\r
 411   padding: 0;\r
 412   background: none;\r
 413 }\r
 414 \r
 415 ul.bigLinks li a,\r
 416 ul.bigLinks li a:visited {\r
 417   display: block;\r
 418 \r
 419   margin: 10px 0;\r
 420   padding: 3px;\r
 421 \r
 422   text-decoration: none;\r
 423   background-color: #FFF;\r
 424   border: 0;\r
 425 }\r
 426 \r
 427 ul.bigLinks li a:hover {\r
 428   padding-bottom: 2px;\r
 429   background-color: #F1FFE3;\r
 430   border-bottom: 1px solid #B8E78B;\r
 431 }\r
 432 \r
 433 ul.bigLinks li a span.title {\r
 434   color: #5E9040;\r
 435   border-bottom: 1px solid #B8E78B;\r
 436 }\r
 437 \r
 438 ul.bigLinks li a:hover span.title {\r
 439   color: #3C5D29;\r
 440   border-bottom: 1px solid #4A6E35;\r
 441 }\r
 442 \r
 443 ul.bigLinks li a span.desc {\r
 444   display: block;\r
 445   color: #6D6864;\r
 446 }\r
 447 \r
 448 ul.bigLinks li a:hover span.desc {\r
 449   color: #555;\r
 450 }\r
 451 \r
 452 /**************************************************************\r
 453    Width classes used by the site columns\r
 454  **************************************************************/\r
 455 \r
 456 .width100 {\r
 457   width: 100%;\r
 458 }\r
 459 \r
 460 .width75 {\r
 461   width: 73%;\r
 462 }\r
 463 \r
 464 .width66 {\r
 465   width: 64%;\r
 466 }\r
 467 \r
 468 .width50 {\r
 469   width: 48%;\r
 470 }\r
 471 \r
 472 .width33 {\r
 473   width: 31%;\r
 474 }\r
 475 \r
 476 .width25 {\r
 477   width: 23%;\r
 478 }\r
 479 \r
 480 /**************************************************************\r
 481    Alignment classes\r
 482  **************************************************************/\r
 483 \r
 484 .floatLeft {\r
 485   float: left;\r
 486 }\r
 487 \r
 488 .floatRight {\r
 489   float: right;\r
 490 }\r
 491 \r
 492 .alignLeft {\r
 493   text-align: left;\r
 494 }\r
 495 \r
 496 .alignRight {\r
 497   text-align: right;\r
 498 }\r
 499 \r
 500 /**************************************************************\r
 501    Generic display classes\r
 502  **************************************************************/\r
 503 \r
 504 .clear {\r
 505   clear: both;\r
 506 }\r
 507 \r
 508 .block {\r
 509   display: block;\r
 510 }\r
 511 \r
 512 .big {\r
 513   font-size: 1.3em;\r
 514 }\r
 515 \r
 516 .small {\r
 517   font-size: 0.85em;\r
 518 }\r
 519 \r
 520 .bold {\r
 521   font-weight: bold;\r
 522 }\r
 523 \r
 524 .italic {\r
 525   font-style: italic;\r
 526 }\r
 527 \r
 528 .grey {\r
 529   color: #AAA;\r
 530 }\r
 531 \r
 532 .green {\r
 533   color: #82C048;\r
 534 }\r
 535 \r
 536 .darkBrown {\r
 537   color: #512103;\r
 538 }\r
 539 \r
 540 .greenBg {\r
 541   padding: 0 10px;\r
 542   background-color: #F1FFE3;\r
 543   border-bottom: 1px solid #B8E78B;\r
 544 }\r
 545 \r
 546 .highlight {\r
 547   padding: 1px 2px;\r
 548   background: #D9F5EC;\r
 549   border-top: 1px solid #BDEDDE;\r
 550 }\r
 551 \r
 552 ul.menuish li {\r
 553   display: inline;\r
 554   list-style: none;\r
 555 }\r