![[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.15 ! julien 8: $Id: base.css,v 1.14 2007/08/13 12:50:15 julien 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 */
1.15 ! julien 27: min-width: 50em;
1.1 ot 28: }
1.9 ot 29: p, pre, dt {
1.1 ot 30: line-height: 130%;
31: padding-left: 20px;
32: }
33:
34: /*
1.13 ot 35: Main blocks - see also ul.navbar
1.1 ot 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;
1.5 ot 48: margin-top: 22px;
1.1 ot 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;
1.13 ot 78: font-size: smaller;
1.1 ot 79: text-align: justify;
80: }
81:
82: /*
83: Headers
84: */
85:
86: h1 {
87: font-family: "Gill Sans", Helvetica, sans-serif;
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: padding: .5em;
231: }
1.11 ot 232: fieldset.moreoptions legend {
233: font-weight: normal;
234: }
1.1 ot 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:
1.12 ot 337: p.toggle
1.1 ot 338: {
339: background: transparent url('../images/arrow-down.gif') 0 0 no-repeat;
340: text-indent: 20px;
341: cursor:pointer;
1.12 ot 342: color: #005A9C;
343: background-color: transparent;
344: margin-bottom: 0;
1.1 ot 345: }
346:
1.12 ot 347: p.closed
1.1 ot 348: {
1.12 ot 349: background: transparent url('../images/arrow-right.gif') 0 0 no-repeat !important;
1.1 ot 350: }
351:
352:
353: .hidden
354: {
355: display:none;
356: }
357: fieldset.moreoptions {
358: border-color: white;
359: border-style: dotted;
360: margin-bottom: 0;
361: padding-left: .3em;
362: }
1.13 ot 363: fieldset.moreoptions div, fieldset.moreoptions table {
1.10 ot 364: margin-top: 0;
1.1 ot 365: margin-left: .5em;
366: font-size: smaller;
367: }
1.13 ot 368:
369: fieldset.moreoptions td, fieldset.moreoptions th, fieldset.moreoptions table {
370: border: 0 !important;
371: }
372: fieldset.moreoptions th {
373: background-color: transparent !important;
374: text-align: left;
375: }
376:
377:
1.1 ot 378: fieldset.closed {
379: border: 0;
380: }
381:
382:
383:
384: /* IE6 hack, avoid "leaking" of fiedset background into legend
385: (more hacking in tabtastic.css to make the "ghost" of the legend disappear) */
386: * html legend { position:absolute; top: -25em !important; left: -25em !important; }
387: * html fieldset{ position: relative; margin-top:0 !important; padding-top:0 !important; }
388:
389:
390:
391: /* tables in the documentation */
392:
393: table {
394: border-collapse: collapse;
395: border-right: 1px solid #ccc;
396: }
397: td, th{
398: border-top: 0px solid #ddd;
399: border-bottom: 1px solid #ccc;
400: border-left: 1px solid #eee;
401: padding: 6px;
402: border-collapse: collapse;
403: }
404: th {
405: background-color: #eee;
406: color: #11111A;
407: border-right: 1px solid #ccc;
408: }
409:
1.13 ot 410:
1.1 ot 411: /*
412: Menu Bar
413: */
414:
1.13 ot 415: ul.navbar {
1.1 ot 416: color: #005A9C;
417: border-top: 1px solid #005A9C;
418: border-bottom: 1px solid #005A9C;
419: background-color: white;
420: margin: 3em 0 0 0;
421: padding: 3px 0 3px 0;
422: line-height: 140%;
423: vertical-align: bottom;
424: font-size: 0.9em;
425: list-style-type: none;
426: text-align: center;
427: font-weight: bold;
428: }
429:
1.13 ot 430: ul.navbar { padding-left: 1em; padding-right: 1em}
431: ul.navbar li {
1.1 ot 432: display: inline;
433: }
434:
1.13 ot 435: ul.navbar li a {
1.1 ot 436: padding-right: 1.2em;
437: padding-left: 1.2em;
438: }
439:
440: /*
441: legalese and logos beneath the menu bar
442: */
443:
444: p#activity_logos {
445: float:left;
446: width: 144px;
447: padding: 8px 0 40px 0;
448: }
449:
450: p#support_logo {
451: float: right; width: 180px; padding: 0; margin-top: 12px; font-size: x-small; text-align:center;
452: }
453:
454:
455: p.copyright {
456: margin-top: 20px;
457: margin-left: 210px;
458: margin-right: 240px;
459: font-size: x-small;
460: text-align: justify;
461: text-transform: uppercase;
462: font-family: "Bitstream Vera Sans Mono", monospace;
463: color: #888;
464: background-color: white;
465: line-height: 120%;
466: }
467:
468: p.copyright a {
469: color: #88f;
470: background-color: white;
471: text-decoration: none;
472: }
473:
474:
475:
476: /*
1.13 ot 477: Jump Bar - results page - based on navbar styling
1.1 ot 478: (from markup validator - note used in this design yet)
479: */
480: #jumpbar {
1.13 ot 481: margin-top: -1.5em;
482: margin-bottom: 1em;
1.1 ot 483: }
484: #jumpbar li {
1.13 ot 485: color: #11111A !important;
1.1 ot 486: }
1.3 ot 487: /* language selection bar */
488: #lang_choice {
489: position: absolute;
490: display: block;
1.6 ot 491: width: 50em;
1.5 ot 492: top: 0px;
1.3 ot 493: text-align: right;
1.5 ot 494: right: 75px;
495: margin-top: 6px;
1.3 ot 496: font-size: x-small;
1.4 ot 497: list-style: none;
1.3 ot 498: }
1.4 ot 499: #lang_choice li { display: inline; padding-left: .5em;}