trunk/src/dom/work/001.css

   1 /* css Zen Garden default style - 'Tranquille' by Dave Shea - http://www.mezzoblue.com/ */\r
   2 /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/  */\r
   3 /* All associated graphics copyright 2003, Dave Shea */\r
   4 /* Added: May 7th, 2003 */\r
   5 \r
   6 \r
   7 /* IMPORTANT */\r
   8 /* This design is not a template. You may not reproduce it elsewhere without the \r
   9    designer's written permission. However, feel free to study the CSS and use \r
  10    techniques you learn from it elsewhere. */\r
  11 \r
  12 \r
  13 /* The Zen Garden default was the first I put together, and almost didn't make the cut. I briefly flirted with using\r
  14     'Salmon Cream Cheese' as the main style for the Garden, but switched back to this one before launch.\r
  15 \r
  16     All graphics in this design were illustrated by me in Photoshop. Google Image Search provided inspiration for\r
  17     some of the elements. I did a bit of research on Kanji to come up with the characters on the top left. Anyone who\r
  18     can read that will most likely tell you it makes no sense, but the best I could do was putting together the\r
  19     characters for 'beginning' 'complete' and 'skill' to roughly say something like 'we're breaking fresh ground.'\r
  20 \r
  21     It's a stretch. */\r
  22 \r
  23 \r
  24 /* basic elements */\r
  25 html {\r
  26         margin: 0px;\r
  27         padding: 0px;\r
  28         }\r
  29 body { \r
  30         font: 9pt/17pt georgia; \r
  31         color: #555753; \r
  32         background: #fff url(/001/blossoms.jpg) no-repeat bottom right; \r
  33         margin: 0px; \r
  34         padding: 0px;\r
  35         }\r
  36 p { \r
  37         font: 9pt/17pt georgia; \r
  38         margin-top: 0px; \r
  39         text-align: justify;\r
  40         }\r
  41 h3 { \r
  42         font: italic normal 12pt georgia; \r
  43         letter-spacing: 1px; \r
  44         margin-bottom: 0px; \r
  45         color: #7D775C;\r
  46         }\r
  47 a:link { \r
  48         font-weight: bold; \r
  49         text-decoration: none; \r
  50         color: #B7A5DF;\r
  51         }\r
  52 a:visited { \r
  53         font-weight: bold; \r
  54         text-decoration: none; \r
  55         color: #D4CDDC;\r
  56         }\r
  57 a:hover, a:active { \r
  58         text-decoration: underline; \r
  59         color: #9685BA;\r
  60         }\r
  61 acronym {\r
  62         border-bottom: none;\r
  63         }\r
  64 \r
  65 \r
  66 /* specific divs */\r
  67 #container { \r
  68         background: url(/001/zen-bg.jpg) no-repeat top left; \r
  69         padding: 0px 175px 0px 110px;  \r
  70         margin: 0px; \r
  71         position: absolute;\r
  72         top: 0px;\r
  73         left: 0px;\r
  74         }\r
  75 \r
  76 #intro { \r
  77         min-width: 470px;\r
  78         }\r
  79 #pageHeader { \r
  80         margin-bottom: 20px;\r
  81         }\r
  82 \r
  83 /* using an image to replace text in an h1. This trick courtesy Douglas Bowman, http://www.stopdesign.com/articles/css/replace-text/ */\r
  84 #pageHeader h1 { \r
  85         background: transparent url(/001/h1.gif) no-repeat top left; \r
  86         margin-top: 10px; \r
  87         width: 219px; \r
  88         height: 87px; \r
  89         float: left;\r
  90         }\r
  91 #pageHeader h1 span {\r
  92         display:none\r
  93         }\r
  94 #pageHeader h2 { \r
  95         background: transparent url(/001/h2.gif) no-repeat top left; \r
  96         margin-top: 58px; \r
  97         margin-bottom: 40px; \r
  98         width: 200px; \r
  99         height: 18px; \r
 100         float: right;\r
 101         }\r
 102 #pageHeader h2 span {\r
 103         display:none\r
 104         }\r
 105 \r
 106 #quickSummary {\r
 107         clear:both; \r
 108         margin: 20px 20px 20px 10px; \r
 109         width: 160px; \r
 110         float: left;\r
 111         }\r
 112 #quickSummary p {\r
 113         font: italic 10pt/22pt georgia; \r
 114         text-align:center;\r
 115         }\r
 116 \r
 117 #preamble {\r
 118         clear: right; \r
 119         padding: 0px 10px 0px 10px;\r
 120         }\r
 121 #supportingText {       \r
 122         padding-left: 10px; \r
 123         margin-bottom: 40px;\r
 124         }\r
 125 \r
 126 #footer { \r
 127         text-align: center; \r
 128         }\r
 129 #footer a:link, #footer a:visited { \r
 130         margin-right: 20px; \r
 131         }\r
 132 \r
 133 #linkList {\r
 134         margin-left: 600px; \r
 135         position: absolute; \r
 136         top: 0px; \r
 137         right: 0px;\r
 138         }\r
 139 #linkList2 { \r
 140         font: 10px verdana, sans-serif; \r
 141         background: transparent url(/001/paper-bg.jpg) top left repeat-y; \r
 142         padding: 10px; \r
 143         margin-top: 150px; \r
 144         width: 130px; \r
 145         }\r
 146 #linkList h3.select { \r
 147         background: transparent url(/001/h3.gif) no-repeat top left; \r
 148         margin: 10px 0px 5px 0px; \r
 149         width: 97px; \r
 150         height: 16px; \r
 151         }\r
 152 #linkList h3.select span {\r
 153         display:none\r
 154         }\r
 155 #linkList h3.favorites { \r
 156         background: transparent url(/001/h4.gif) no-repeat top left; \r
 157         margin: 25px 0px 5px 0px; \r
 158         width: 60px; \r
 159         height: 18px; \r
 160         }\r
 161 #linkList h3.favorites span {\r
 162         display:none\r
 163         }\r
 164 #linkList h3.archives { \r
 165         background: transparent url(/001/h5.gif) no-repeat top left; \r
 166         margin: 25px 0px 5px 0px; \r
 167         width:57px; \r
 168         height: 14px; \r
 169         }\r
 170 #linkList h3.archives span {\r
 171         display:none\r
 172         }\r
 173 #linkList h3.resources { \r
 174         background: transparent url(/001/h6.gif) no-repeat top left; \r
 175         margin: 25px 0px 5px 0px; \r
 176         width:63px; \r
 177         height: 10px; \r
 178         }\r
 179 #linkList h3.resources span {\r
 180         display:none\r
 181         }\r
 182 \r
 183 \r
 184 #linkList ul {\r
 185         margin: 0px;\r
 186         padding: 0px;\r
 187         }\r
 188 #linkList li {\r
 189         line-height: 2.5ex; \r
 190         background: transparent url(/001/cr1.gif) no-repeat top center; \r
 191         display: block; \r
 192         padding-top: 5px; \r
 193         margin-bottom: 5px;\r
 194         list-style-type: none;\r
 195         }\r
 196 #linkList li a:link {\r
 197         color: #988F5E;\r
 198         }\r
 199 #linkList li a:visited {\r
 200         color: #B3AE94;\r
 201         }\r
 202 \r
 203 \r
 204 #extraDiv1 {\r
 205         background: transparent url(/001/cr2.gif) top left no-repeat; \r
 206         position: absolute; \r
 207         top: 40px; \r
 208         right: 0px; \r
 209         width: 148px; \r
 210         height: 110px;\r
 211         }\r
 212 .accesskey {\r
 213         text-decoration: underline;\r
 214         }