]> Pileus Git - ~andy/aweather-web/blob - data/global.css
Misc content/style updates
[~andy/aweather-web] / data / global.css
1 /* Clearn defaults */
2 * {
3         margin: 0;
4         padding: 0;
5         outline: 0;
6 }
7
8 h1, h2, h3, h4, h5, h6 {
9         font-weight: normal;
10 }
11
12 a {
13         color: black;
14         text-decoration: none;
15 }
16
17 a img {
18         border: none;
19 }
20
21 ul {
22         display: block;
23 }
24
25 /* Global styles */
26 .content h1, h2 {
27         margin-top:    1.5em;
28         margin-bottom: 0.3em;
29 }
30 h3, h4, h5, h6 {
31         margin-top: 0.8em;
32         margin-bottom: 0.1em;
33 }
34 .quote {
35         font-style: italic;
36         font-family: serif;
37 }
38 .quote:before {
39         font-weight: bold;
40         content: '“';
41 }
42 .quote:after {
43         font-weight: bold;
44         content: '”';
45 }
46 ul {
47         padding-left: 30px;
48 }
49 span.code {
50         font-family: monospace;
51 }
52 div.code {
53         font-family: monospace;
54         background-color: #666;
55         border: solid 1px #222;
56         padding: 2px 6px 2px 6px;
57         margin-bottom: 5px;
58         color: white;
59         font-weight: bold;
60 }
61
62 dt {
63         font-weight: bold;
64 }
65
66 dd {
67         margin-left: 10px;
68 }
69
70 .col {
71         float: left;
72         margin:  -10px 30px 0px 20px;
73 }
74
75 /* Layout */
76 body {
77         background: fixed;
78         background-image: url('../images/main-bg.png');
79         background-repeat: repeat-x;
80         background-color: white;
81         margin-left: auto;
82         margin-right: auto;
83         font-family: 'DejaVu Sans Condensed', Arial, sans-serif;
84         font-size:   0.8em;
85         line-height: 1.5em;
86         width: 850px;
87         /* width: 80%; */
88 }
89
90 /* Header stuff */
91 .top {
92         height: 80px;
93         margin-top: 15px;
94         border-collapse: collapse;
95         position: relative;
96 }
97
98 .top * {
99         float: left;
100 }
101
102 .logo {
103         width: 130px;
104         z-index: 1;
105 }
106
107 .title {
108         font-size: 22pt;
109         font-weight: bold;
110         font-style: italic;
111         color: #222;
112 }
113
114 .nav {
115         position: absolute;
116         top: 45px;
117         left: 135px;
118         right: 0px;
119         z-index: 1;
120         height: 36px;
121         margin: 0 0px 0 30px;
122         padding: 0 15px 0 15px;
123         border-radius: 8px;
124         -moz-border-radius: 8px;
125         background-image: url("../images/nav-bg.png");
126         box-shadow: 0px 2px 2px #a0a0ff;
127 }
128
129 .nav .sep {
130         width: 0px;
131         height: 36px;
132         border-left:  solid 1px #222;
133         border-right: solid 1px #777;
134         margin: 0 10px 0 10px;
135 }
136
137 .nav a {
138         display: block;
139         margin: 5px 7px 5px 7px;
140         padding: 2px;
141         font-size: 12pt;
142         font-weight: normal;
143         color: #f4f4f4;
144         border: solid 1px transparent;
145         border-radius: 4px;
146         -moz-border-radius: 4px;
147 }
148
149 .nav a:hover {
150         text-decoration: underline;
151 }
152
153 .nav a.cur {
154         background-color: #666;
155         border: solid 1px #888;
156         text-decoration: none;
157 }
158
159 /* Content */
160 .content {
161         background-color: white;
162         color: black;
163         margin-top: 20px;
164         padding:    24px;
165         padding-bottom: 36px;
166         border:     solid 1px #bce;
167         border-top: solid 1px #abd;
168         border-radius: 8px;
169         -moz-border-radius: 8px;
170 }
171
172 .content hr {
173         margin: 25px 0 25px 0;
174 }
175
176 .content a {
177         text-decoration: underline;
178 }
179
180 .msg {
181         color: red;
182         clear: both;
183         position: relative;
184         top: -10px;
185         font-weight: bold;
186         font-style: italic;
187         text-align: center;
188 }
189
190 /* Footer */
191 .footer, .footer * {
192         text-align: center;
193         font-size: 8pt;
194         margin-top: 5px;
195         margin-bottom: 15px;
196         color: #444;
197 }
198 .footer a {
199         text-decoration: underline;
200 }
201
202 /***********************
203  * Page specific stuff *
204  ***********************/
205 /* Index page */
206 .buttons {
207         margin-left: 25px;
208 }
209
210 .buttons > * {
211         margin-bottom: 10px;
212 }
213
214 .download {
215         position: relative;
216         display: block;
217         z-index: 1;
218         height: 62px;
219         width: 150px;
220         color: white;
221         font-size: 11pt;
222         text-decoration: none;
223         padding: 8px 25px 8px 25px;
224         background-image: url("../images/dl-bg.png");
225         border-radius: 10px;
226         -moz-border-radius: 10px;
227         box-shadow: 0px 2px 2px rgba(0,0,0,0.30);
228 }
229
230 .download > * {
231         display: block;
232 }
233
234 .download:first-line {
235         font-weight: bold;
236         font-style: italic;
237         line-height: 2em;
238 }
239
240 .download img {
241         position: absolute;
242         top:   10px;
243         right: 10px;
244 }
245
246 .screen {
247         float: right;
248         margin-left:  25px;
249         margin-right: 25px;
250 }
251
252 /* Screnshots */
253 .gallery {
254         padding: 0px; /* override ul */
255         margin: 20px;
256         font-size: larger;
257 }
258 .gallery > * {
259         list-style: none;
260         text-align: center;
261         left:   0;
262         float:  left;
263         width:  320px;
264         height: 350px;
265         margin: 15px;
266         padding-left:  15px;
267         padding-right: 15px;
268 }
269 .gallery a {
270         display: block;
271 }
272 .gallery img {
273         box-shadow: 0px 2px 6px #888;
274         margin-bottom: 4px;
275         float: none;
276         margin-left:   0px;
277 }
278
279 /* News */
280 .news {
281         margin-top: 20px;
282 }
283 .news dt {
284         clear: both;
285 }
286 .news dd {
287         margin-bottom: 15px;
288 }
289 .note { 
290         font-style: italic;
291         text-align: center;
292 }
293
294 /* Downloads */
295 li.linux, li.windows, li.macos {
296         list-style-type: none;
297         background-repeat: no-repeat;
298         padding-left: 50px;
299         margin: 10px 10px 20px 0;
300         clear: both;
301 }
302 li.linux {
303         background-image: url("../images/os-linux.png");
304 }
305 li.windows {
306         background-image: url("../images/os-windows.png");
307 }
308 li.macos {
309         background-image: url("../images/os-macos.png");
310 }
311 dl.inline dt {
312         display: block;
313         float: left;
314         clear: both;
315         font-weight: bold;
316         width: 8em;
317 }
318 dl.inline dt:after {
319         content: ":";
320 }
321 h1 + .note,
322 h2 + .note {
323         text-align: left;
324         margin-bottom: 10px;
325 }
326
327 dl.inline dt {
328         display: block;
329         float: left;
330         clear: both;
331         font-weight: bold;
332         width: 8em;
333 }
334 dl.inline dt:after {
335         content: ":";
336 }
337 dl.small dt {
338         width: 4em;
339 }