Annotation of 2002/css-validator/style/base.css, revision 1.13

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.13    ! ot          8:    $Id: base.css,v 1.1 2007/02/20 01:56:44 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: }
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;}

Webmaster