![[BACK]](/prx/000/https/dev.w3.org/cvsweb/icons/back.gif,_ANDesc=img,){kind=icon}
Return to base.css CVS log ![[TXT]](/prx/000/https/dev.w3.org/cvsweb/icons/text.gif,_ANDesc=img,){kind=icon}
![[DIR]](/prx/000/https/dev.w3.org/cvsweb/icons/dir.gif,_ANDesc=img,){kind=icon}
Up to [Public] / 2002 / css-validator / style|
Return to base.css CVS log | Up to [Public] / 2002 / css-validator / style |
1.1 ot 1: /*
2: Base Style Sheet for the W3C CSS validation service
3: based on the one for Markup Validation Service.
4:
5: Copyright 2000 W3C (MIT, INRIA, Keio). All Rights Reserved.
6: See http://www.w3.org/Consortium/Legal/ipr-notice.html#Copyright
7:
1.3 ! ot 8: $Id: base.css,v 1.2 2006/09/25 05:30:22 ot Exp $
1.1 ot 9: */
10:
11: /*
12: General styling
13: */
14: html {
15: background-color: white;
16: color: #11111A;
17: }
18:
19: body {
20: margin: auto auto;
21: padding-left: 6%;
22: padding-right: 6%;
23: background-color: white;
24: color: #11111A;
25: font-family: Helvetica, "Trebuchet MS", Arial, sans-serif;
26: font-size: 1em; /* setting base font to user's prefered size */
27: min-width: 50em;
28: }
29: p {
30: line-height: 130%;
31: padding-left: 20px;
32: }
33:
34: /*
35: Main blocks - see also #menu styled in navbar.css
36: */
37:
38: #banner {
39: background-color: white;
40: color: #11111A;
41: background-image: url(../images/header.jpg);
42: background-repeat: no-repeat;
43: background-attachment: scroll;
44: background-position: top right;
45: padding: 4px 0 0 0;
46: height: 55px;
47: margin-bottom: 0;
48: margin-top: 12px;
49: border: 0;
50:
51: }
52:
53: #banner h1 {
54: vertical-align: middle;
55: font-size: 1.5em;
56: display: inline;
57: }
58:
59: p#tagline {
60: font-size: x-small;
61: padding: 0;
62: line-height: 100%;
63: margin: 0 0 4em .8em;
64: background-color: white;
65: color: #11111A;
66: clear: both;
67: }
68:
69: #main {
70: padding: 15px 0;
71: background-color: white;
72: margin: 0;
73: color: #11111A;
74: }
75:
76: .intro {
77: font-style: italic;
78: text-align: justify;
79: }
80:
81: /*
82: Headers
83: */
84:
85: h1 {
86: font-family: "Gill Sans", Helvetica, sans-serif;
87: font-size-adjust: .53;
88: font-weight: bold;
89: font-style: normal;
90: text-decoration: none;
91: }
92:
93: h2 {
94: color: #777742;
95: background: white;
96: padding: 5px 15px;
97: margin-top: 30px;
98: margin-bottom: 20px;
99: font-size: 1.3em;
100: text-align: center;
101: text-decoration: none;
102: font-family: "Gill Sans", sans-serif;
103: }
104:
105: h3 {
106: background-color: #fff;
107: color: #777742;
108: font-size: 1.1em;
109: padding: 2px 10px;
110: border-bottom: 1px dotted #aaaa77;
111: text-decoration: none;
112: font-family: "Gill Sans", sans-serif;
113: }
114:
115: h4 {
116: color: #777742;
117: background-color: white;
118: font-weight: 600;
119: font-style: italic;
120: text-decoration: none;
121: font-size: 1.0em;
122: padding-left: 15px;
123: font-family: "Gill Sans", sans-serif;
124: }
125:
126: h5,h6 {
127: background-color: white;
128: color: #11111A;
129: font-family: "Gill Sans", sans-serif;
130: font-weight: normal;
131: padding-left: 15px;
132: }
133: /*
134: General link styling
135: */
136:
137: a:link, a:visited {
138: color: #005A9C;
139: background-color: transparent;
140: text-decoration: none;
141:
142: }
143:
144: a:hover, a:active {
145: color: #005A9C;
146: background-color: transparent;
147: text-decoration: underline;
148: }
149:
150:
151: /*
152: Other basic styles
153: */
154:
155: /* TODO - add ol, li, td here ? */
156: p, dt {
157: margin-left: 15px;
158: margin-right: 25px;
159: }
160:
161: dd {
162: margin-left: 35px;
163: margin-right: 25px;
164: }
165:
166: #news dt {
167: font-weight: bold;
168: margin-top: 1em;
169: }
170:
171: img {
172: margin:0;
173: padding: 0;
174: vertical-align: middle;
175: border: 0;
176: }
177:
178: acronym:hover, abbr:hover {
179: cursor: help;
180: }
181:
182: abbr[title], acronym[title], span[title], strong[title] {
183: border-bottom: thin dotted;
184: cursor: help;
185: }
186:
187: pre, code, tt {
188: font-family: "Bitstream Vera Sans Mono", Monaco, "Andale Mono", monospace;
189: line-height: 100%;
190: white-space: pre;
191: }
192:
193: a:link img, a:visited img {
194: border-style: none;
195: }
196:
197: ul.toc {
198: list-style: none;
199: }
200:
201: /*
202: Stuff we don't actually want too visible - or not at all
203: */
204: .hideme { display: none; }
205:
206:
207: /*
208: Forms on front page, with tabtastic and toggable extra options
209: */
210: #frontforms {
211: margin-left: 12%;
212: margin-right: 12%;
213:
214: }
215:
216:
217:
218: /* Fieldsets */
219:
220: /* generic style for form fields */
221: fieldset {
222: border: 1px solid #005A9C;
223: background-color: transparent;
224: color: #11111A;
225: margin-bottom: 3em;
226: margin-left: 0;
227: }
228: fieldset legend {
229: font-weight: bold;
230: background-color: white;
231: color: #11111A;
232: border: 1px solid #005A9C;
233: padding: .5em;
234: }
235: fieldset p {
236: margin: 0 0 0.8em 0;
237: padding: 0;
238: }
1.2 ot 239:
240: fieldset div {
241: padding-top: 1em;
242: }
243:
1.1 ot 244: fieldset p.instructions {
1.2 ot 245: padding-top: 1em;
246: padding-bottom: 0;
247: margin-bottom: 0;
1.1 ot 248: }
249: fieldset p.submit_button {
250: text-align: right;
251: padding-top: .5em;
252: }
253: fieldset p.submit_button input {
254: font-weight: bold;
255: color: #005A9C;
256: background: #fff;
257: padding: 0.2em 2em;
258: border: 2px outset #005A9C;
259: }
260:
261: /* home page fieldsets */
262:
263: .tabset_tabs {
264: margin:0;
265: padding:0;
266: list-style-type:none;
267: position:relative;
268: z-index:2;
269: white-space:nowrap;
270: }
271:
272: .tabset_tabs li {
273: margin:0;
274: padding:0;
275: display:inline;
276: }
277:
278: .tabset_tabs a {
279: border: 0;
280: border-left: 1px solid #ADDBFE;
281: text-decoration:none;
1.2 ot 282: padding: 0.8em 0.6em 0 0.6em;
1.1 ot 283: background: white;
284: font-weight: bold;
285: }
286:
287: .tabset_tabs a:hover {
288: color:#424242 ! important;
289: background: #E1F0FD url(../images/sm_gradient_hover.gif) 0 0 repeat-x;
290: text-decoration:none;
291: }
292:
1.2 ot 293: .tabset_tabs a.active, .tabset_tabs a.active:hover {
1.1 ot 294: color:#424242 ! important;
295: background-color: #8FCFFD !important;
296: background: #8FCFFD url(../images/sm_gradient_active.gif) 0 0 repeat-x;
297: border-color: #ADDBFE;
298: border-left-width:1px;
299: cursor:default;
300: border-bottom: white;
1.2 ot 301: padding-top:0.8em;
1.1 ot 302: padding-bottom:1px;
303: color: #fffff0 !important;
304: }
305:
1.2 ot 306: .tabset_tabs li.firstchild a, .tabset_tabs li:first-child a {
307: border-left: 1px solid white;
308: }
309: div#fields {
310: background: #8FCFFD url(../images/lg_gradient.gif) bottom left repeat-x;
311: margin: 0;
312: padding: 0;
1.1 ot 313: }
314: .tabset_content {
1.2 ot 315: border: none;
1.1 ot 316: position:relative;
317: z-index:1;
318: padding:0.5em 1em;
319: border-left: 1px solid white;
1.2 ot 320: padding-bottom: 2em;
1.1 ot 321: }
322:
323: input {
324: vertical-align: middle;
325: }
326: input.reset {
327: text-align: center;
328: }
329: input.default {
330: text-align: center;
331: font-weight: bold;
332: }
333:
334:
335: /* the following from http://www.mindsack.com/toggle/ (c) Kent Brewster */
336:
337: .toggle
338: {
339: background: transparent url('../images/arrow-down.gif') 0 0 no-repeat;
340: text-indent: 20px;
341: cursor:pointer;
342: }
343:
344: .toggle.closed
345: {
346: background: transparent url('../images/arrow-right.gif') 0 0 no-repeat;
347: }
348:
349: p.toggle {
350: color: #005A9C;
351: background-color: transparent;
352: }
353: p.toggle:hover {
354: text-decoration: underline;
355: }
356:
357: .hidden
358: {
359: display:none;
360: }
361: fieldset.moreoptions {
362: border-color: white;
363: border-style: dotted;
364: margin-bottom: 0;
365: padding-left: .3em;
366: }
367: fieldset.moreoptions div {
368: margin-left: .5em;
369: font-size: smaller;
370: }
371: fieldset.closed {
372: border: 0;
373: }
374:
375:
376:
377: /* IE6 hack, avoid "leaking" of fiedset background into legend
378: (more hacking in tabtastic.css to make the "ghost" of the legend disappear) */
379: * html legend { position:absolute; top: -25em !important; left: -25em !important; }
380: * html fieldset{ position: relative; margin-top:0 !important; padding-top:0 !important; }
381:
382:
383:
384: /* tables in the documentation */
385:
386: table {
387: border-collapse: collapse;
388: border-right: 1px solid #ccc;
389: }
390: td, th{
391: border-top: 0px solid #ddd;
392: border-bottom: 1px solid #ccc;
393: border-left: 1px solid #eee;
394: padding: 6px;
395: border-collapse: collapse;
396: }
397: th {
398: background-color: #eee;
399: color: #11111A;
400: border-right: 1px solid #ccc;
401: }
402:
403: /*
404: Menu Bar
405: */
406:
407: #menu {
408: color: #005A9C;
409: border-top: 1px solid #005A9C;
410: border-bottom: 1px solid #005A9C;
411: background-color: white;
412: margin: 3em 0 0 0;
413: padding: 3px 0 3px 0;
414: line-height: 140%;
415: vertical-align: bottom;
416: font-size: 0.9em;
417: list-style-type: none;
418: text-align: center;
419: font-weight: bold;
420: }
421:
422: #menu { padding-left: 1em; padding-right: 1em}
423: #menu li {
424: display: inline;
425: }
426:
427: #menu li a {
428: padding-right: 1.2em;
429: padding-left: 1.2em;
430: }
431:
432: /*
433: legalese and logos beneath the menu bar
434: */
435:
436: p#activity_logos {
437: float:left;
438: width: 144px;
439: padding: 8px 0 40px 0;
440: }
441:
442: p#support_logo {
443: float: right; width: 180px; padding: 0; margin-top: 12px; font-size: x-small; text-align:center;
444: }
445:
446:
447: p.copyright {
448: margin-top: 20px;
449: margin-left: 210px;
450: margin-right: 240px;
451: font-size: x-small;
452: text-align: justify;
453: text-transform: uppercase;
454: font-family: "Bitstream Vera Sans Mono", monospace;
455: color: #888;
456: background-color: white;
457: line-height: 120%;
458: }
459:
460: p.copyright a {
461: color: #88f;
462: background-color: white;
463: text-decoration: none;
464: }
465:
466:
467:
468: /*
469: Jump Bar - results page
470: (from markup validator - note used in this design yet)
471: */
472: #jumpbar {
473: background-color: #dfebf7;
474: color: #11111A;
475: float: right;
476: width: 8em;
477: margin-right: 0;
478: text-align: left;
479: text-decoration: none;
480: padding: 1ex;
481: border-left: 1px solid #005A9C;
482: border-bottom: 1px solid #005A9C;
483: margin-top: -15px;
484: font-size: 0.9em;
485: font-weight: bold;
486: margin-left: 1em;
487: }
488:
489: #jumpbar ul {
490: padding: 0;
491: margin: 0;
492: }
493:
494: #jumpbar li {
495: list-style-type: none;
496: text-align: right;
497: }
498:
499: div#jumpbar li a {
500: height: 20px;
501: padding-right: 20px;
502: padding-left: 25px;
503: }
504: div#jumpbar li a:hover {
505: text-decoration: underline;
506: }
507:
508: #jumpbar li a:link, #jumpbar li a:visited {
509: text-decoration: none;
510: text-align: right;
511: display: block;
512: width: 8em;
513: padding: 2px 0px;
514: margin: 0;
515: border-top: dotted 1px #053188;
516: }
517:
518: #jumpbar li a#selected:link, #jumpbar li a#selected:visited {
519: text-decoration: underline;
520: background-color: #fff;
521: color: #053188;
522: border-right: solid 1px #ddd;
523: border-bottom: solid 1px #fff;
524: }
525:
1.3 ! ot 526: /* language selection bar */
! 527: #lang_choice {
! 528: position: absolute;
! 529: display: block;
! 530: width; 10em;
! 531: top: 60px;
! 532: text-align: right;
! 533: right: 48px;
! 534: font-size: x-small;
! 535: }