6f07bc3129046dc1aeeca608d3ebf1ad5b18348b
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 }