geocities.css

Tue, 27 Jan 2015 16:02:44 -0800

author
L. David Baron <[email protected]>
date
Tue, 27 Jan 2015 16:02:44 -0800
changeset 15118
3cc923a1e530
parent 13653
57350131e028
child 15914
3655e29783be
permissions
-rwxr-xr-x

[css-overflow] Note regressions from bikeshed conversion.

     1 @import url(http://fonts.googleapis.com/css?family=Nosifer|Gochi+Hand|Press+Start+2P);
     2 /*
     3  * Style sheet for the CSS3 specification,
     4  * to be used in addition to http://www.w3.org/StyleSheets/TR/W3C-{WD,PR,REC}
     5  */
     7 @media print {
     8 	html { margin: 0 !important }
     9 	body { font-family: serif }
    10 	th, td { font-family: inherit }
    11 	a { color: inherit !important }
    12 	div.example:before { font-family: serif !important }
    13 	pre.example:before { font-family: serif !important }
    14 	a:link, a:visited { text-decoration: none !important }
    15 	a:link:after, a:visited:after { /* create a cross-ref "see..." */ }
    16 }
    17 @page {
    18 	margin: 1.5cm 1.1cm;
    19 }
    21 body {
    22 	counter-reset: exampleno figure issue;
    23 	margin: 0 auto !important;
    24 	max-width: 50em;
    25 	text-align: center;
    26 }
    28 body {
    29 	background: url('construction.gif') top left repeat-y, url('construction.gif') top right repeat-y, url('spacebg.gif') black !important;
    30 	color: yellow !important;
    31 	font-family: Comic Sans MS, "Gochi Hand", fantasy !important;
    32 	font-size: 1.2em;
    33 }
    34 pre, code {
    35 	font-family: "Press Start 2P", monospace !important;
    36 }
    37 h1,h2,h3,h4,h5,h6 {
    38 	color: lime !important;
    39 	background: black !important;
    40 	letter-spacing: 3px !important;
    41 	font-family: Nosifer, monospace !important;
    42 	border-bottom: thick solid !important;
    43 	padding: 3px !important;
    44 	text-align: center !important;
    45 }
    46 h1,h2,h3,h4,h5,h6,.example, .issue, .figure, .note, .propdef {
    47 	-webkit-animation: rainbow-border 2s infinite;
    48 	-moz-animation: rainbow-border 2s infinite;
    49 	-o-animation: rainbow-border 2s infinite;
    50 	-ms-animation: rainbow-border 2s infinite;
    51 }
    52 .example, .issue, .figure, .note, .propdef {
    53 	border: 10px ridge !important;
    54 	background: transparent !important;
    55 }
    56 .head > p:first-of-type > a::before {
    57 	content: url('w3c.gif') !important;
    58 }
    59 .head > p:first-of-type > a > img {
    60 	display: none !important;
    61 }
    62 p:nth-child(5n):not(:nth-child(2n))::after { content: " NO FEAR."; }
    64 @-webkit-keyframes rainbow-border {
    65 	0%, 100% { border-color: red; }
    66 	16% { border-color: orange; }
    67 	33% { border-color: yellow; }
    68 	50% { border-color: lime; }
    69 	67% { border-color: blue; }
    70 	83% { border-color: purple; }
    71 }
    72 @-moz-keyframes rainbow-border {
    73 	0%, 100% { border-color: red; }
    74 	16% { border-color: orange; }
    75 	33% { border-color: yellow; }
    76 	50% { border-color: lime; }
    77 	67% { border-color: blue; }
    78 	83% { border-color: purple; }
    79 }
    80 @-o-keyframes rainbow-border {
    81 	0%, 100% { border-color: red; }
    82 	16% { border-color: orange; }
    83 	33% { border-color: yellow; }
    84 	50% { border-color: lime; }
    85 	67% { border-color: blue; }
    86 	83% { border-color: purple; }
    87 }
    88 @-ms-keyframes rainbow-border {
    89 	0%, 100% { border-color: red; }
    90 	16% { border-color: orange; }
    91 	33% { border-color: yellow; }
    92 	50% { border-color: lime; }
    93 	67% { border-color: blue; }
    94 	83% { border-color: purple; }
    95 }
    97 /* Pagination */
    98 h1, h2, h3, h4, h5, h6 { page-break-after: avoid }
    99 div.figure, div.sidefigure, pre, table.propdef, table.propdef-extra,
   100 div.example { page-break-inside: avoid }
   101 dt { page-break-after: avoid }
   103 span.id {float: right; font-weight: bold}
   105 /* General Structural Markup */
   106 h2, h3, h5, h6 { margin-top: 3em; }
   108 h1 + h2 { margin-top: 0; }
   110 h4 { margin-top: 4em; }
   112 p, div.note, div.issue {
   113 	margin-top: 1em;
   114 	margin-bottom: 1em;
   115 }
   117 dd > p:first-child, li > p:first-child, .note > p:first-child, .issue > p:first-child {
   118 	margin-top: 0
   119 }
   121 pre {
   122 	margin-top: 1em;
   123 	margin-bottom: 1em;
   124 }
   126 img {
   127 	border-style: none;
   128 	color: white;
   129 }
   130 .toc {
   131 }
   133 body {
   134 	line-height: 1.5;
   135 }
   137 a:link, a:visited {
   138 	color: inherit;
   139 	text-decoration: underline;
   140 }
   142 a.logo:link, a.logo:visited {
   143 	padding: 0;
   144 	border-style: none;
   145 }
   147 dl dd { margin: 0 0 1em 2em }
   148 .head dd { margin-bottom: 0; }
   149 ul, ol { margin-left: 0; padding-left: 2em; }
   150 li { margin: 0.25em 2em 0.5em 0; padding-left: 0 }
   152 ul.indexlist { margin-left: 0; columns: 13em; }
   153 ul.indexlist li { margin-left: 0; list-style: none }
   154 ul.indexlist li li { margin-left: 1em }
   156 /* Examples */
   158 .example {
   159 	counter-increment: exampleno;
   160 }
   161 div.example:before, pre.example:before {
   162 	content: "Example";
   163 	content: "Example " counter(exampleno);
   164 	min-width: 7.5em;
   165 	text-transform: uppercase;
   166 	display: block;
   167 }
   168 div.illegal-example:before, pre.illegal-example:before {
   169 	content: "Invalid Example";
   170 	content: "Invalid Example" counter(exampleno);
   171 }
   172 div.example, div.illegal-example, div.html, div.illegal-html, div.xml,
   173 div.illegal-xml, pre.example, pre.illegal-example, pre.html,
   174 pre.illegal-html, pre.xml, pre.illegal-xml {
   175 	padding: 0.5em;
   176 	margin: 1em 0;
   177 	position: relative;
   178 	clear: both;
   179 }
   180 pre.example, pre.illegal-example, pre.html,
   181 pre.illegal-html, pre.xml, pre.illegal-xml {
   182 	padding-top: 1.5em;
   183 }
   184 pre.illegal-example { color: red }
   185 div.illegal-example { color: red }
   186 div.illegal-example p { color: black }
   188 div.html { color: #600 }
   189 pre.html { color: #600 }
   190 pre.illegal-html { color: red }
   191 div.illegal-html { color: red }
   192 div.illegal-html p { color: black }
   193 pre.deprecated-html { color: red }
   194 div.deprecated-html { color: red }
   195 div.deprecated-html p { color: black }
   197 div.xml { color: #600 }
   198 pre.xml { color: #600 }
   199 pre.illegal-xml { color: red }
   200 div.illegal-xml { color: red }
   201 div.illegal-xml p { color: black }
   203 .css, .property { color: #005a9c }		/* inline CSS code (SPAN/CODE) */
   204 code.css { font-family: inherit; font-size: 100% }
   205 code.html { color: #600 }	/* inline HTML */
   206 code.xml { color: #600 }	/* inline XML */
   207 .property { font: inherit; white-space: nowrap; }	/* name of a CSS property (SPAN) */  
   208 .descriptor { }			/* name of a CSS descriptor (SPAN) */
   209 .type { font-style: italic }	/* A <type> value for a property */
   211 dfn { font-weight: bolder; }
   213 .issue, .note, div.example, pre.example {
   214 	padding: .5em;
   215 	/* padding: .5rem; /* proposed unit in css3-values */
   216 	border-left-width: .5em;
   217 	/* border-left-width: .5rem; /* proposed unit in css3-values */
   218 	border-left-style: solid;
   219 }
   220 span.note, span.issue { padding: .1em .5em .15em; }
   222 /* Open issue / editorial remark; not intended for a final publication */
   223 .issue {
   224 	border-color: #E05252;
   225 	background: #FBE9E9;
   226 	counter-increment: issue;
   227 }
   229 .issue:before {
   230 	content: "Issue " counter(issue);
   231 	padding-right: 1em;
   232 	text-transform: uppercase;
   233 	color: #E05252;    
   234 }
   236 /* Class note is a non-normative note. May be inline or a P or DIV */
   237 .note {
   238 	border-color: #52E052;
   239 	background: #E9FBE9;
   240 }
   242 .normref { color: red }	
   243 .informref { color: green }	
   245 /* Example box */
   246 div.example, pre.example {
   247 	border-color: #E0CB52;
   248 	background: #FCFAEE;    
   249 }
   251 div.example:before, pre.example:before { 
   252 	color: #B9AB2D; 
   253 	font-family: sans-serif;
   254 }
   256 /* ToC not indented, but font style shows hierarchy */
   257 ul.toc {margin: 1em 0; padding: 0; line-height: 1.3; font-weight: bold; /*text-transform: uppercase;*/ }
   258 ul.toc ul {margin: 0; padding: 0; font-weight: normal; text-transform: none; }
   259 ul.toc ul ul {margin: 0 0 0 2em; font-style: italic; }
   260 ul.toc ul ul ul {margin: 0}
   261 ul.toc > li {margin: 1.5em 0; padding: 0; }
   262 ul.toc ul.toc li { margin: 0.3em 0 0 0; }
   263 ul.toc a { text-decoration: none; }
   264 ul.toc a:hover, ul.toc a:focus { text-decoration: underline; }
   265 /*
   266 ul.toc li li li, ul.toc li li li ul {margin-left: 0; display: inline}
   267 ul.toc li li li ul, ul.toc li li li ul li {margin-left: 0; display: inline}
   268 */
   270 /* Section numbers in a column of their own */
   271 ul.toc span.secno {float: left; width: 4em; margin-left: -5em}
   272 ul.toc ul ul span.secno { margin-left: -7em; }
   273 /*ul.toc span.secno {text-align: right}*/
   274 ul.toc li {clear: both}
   275 ul.toc {margin-left: 5em}
   276 /* If we had 'tab', floats would not be needed here:
   277 	 ul.toc span.secno {tab: 5em right; margin-right: 1em}
   278 	 ul.toc li {text-indent: 5em hanging}
   279  The second line in case items wrap
   280 */
   282 ul.index {
   283 	list-style: none;
   284 }
   286 s, del {text-decoration: line-through; color: red}
   287 u, ins {text-decoration: underline; background: #bfa}
   289 div.figure, div.sidefigure {
   290 	text-align: center;
   291 	margin: 2.5em 0;
   292 }
   293 div.sidefigure {
   294 	float: right;
   295 	width: 50%;
   296 	margin: 0 0 0.5em 0.5em
   297 }
   298 div.figure img, div.sidefigure img {
   299 	display: block;
   300 	margin: auto;
   301 	max-width: 100%
   302 }
   303 p.caption, caption {
   304 	text-align: center;
   305 	font-style: italic;
   306 	font-size: 90%;
   307 }
   308 p.caption:before {
   309 	content: "Figure " counter(figure) ". ";
   310 	font-weight: bold;
   311 }
   312 p.caption {
   313 	counter-increment: figure;
   314 }
   316 /* DL list is indented, but figure inside it is not */
   317 dd { margin-left: 2em }
   318 dd div.figure { margin-left: -2em }
   320 sup {
   321 	vertical-align: super;
   322 	font-size: 80%
   323 }
   325 /* "Equations" (not real MathML, but simple HTML) are put in a
   326 blockquote and may have an equation number. We make sure the
   327 blockquote has enough margin on the right and then put the equation
   328 number there. */
   330 blockquote {
   331 	margin: 0.5em 4em 0.5em 2em;
   332 	text-indent: 0;
   333 }
   334 .eqno {
   335 	text-align: right;
   336 	float: right;
   337 	width: 3em;
   338 	margin: 0 -4em 0 0;
   339 	font-weight: bold;
   340 	/* background: silver; color: black; padding: 0.1em */
   341 }
   343 table.equiv-table { border-spacing: 0; margin: 0.5em 0 }
   344 table.equiv-table th, table.equiv-table td { padding: 0.3em }
   345 table.equiv-table th { text-align: left }
   346 /* table.equiv-table th:first-child { text-align: right } */
   347 table.equiv-table td, table.equiv-table th { border-bottom: thin solid #666 }
   348 table.equiv-table { border-bottom: hidden }
   349 table.equiv-table { empty-cells: show }
   350 table.equiv-table caption { margin: 0.5em 0 0 0 }
   352 /* Style for table of properties */
   353 table.proptable {
   354 	font-size: small;
   355 	border-collapse: collapse;
   356 	border-spacing: 0;
   357 	text-align: left;
   358 	margin: 1em 0;
   359 }
   361 table.proptable td, table.proptable th {
   362 	padding: 0.4em;
   363 	text-align: center;
   364 }
   366 table.proptable tr:hover td {
   367 	background: #DEF;
   368 }
   371 /* Style for table that defines a property or a descriptor */
   372 table.propdef, table.propdef-extra, table.descdef {
   373 	border-spacing: 0;
   374 	padding: 0 1em 0.5em;
   375 	width: 100%;
   376 	table-layout: fixed;
   377 	background: #DEF;
   378 	margin: 1.2em 0;
   379 	border-left: 0.5em solid #8CCBF2;
   380 }
   382 table.propdef td, table.propdef-extra td, table.descdef td,
   383 table.propdef th, table.propdef-extra th, table.descdef th {
   384 	padding: 0.5em;
   385 	vertical-align: baseline;
   386 	border-bottom: 1px solid #bbd7e9;
   387 }
   388 /*
   389 table.propdef dfn, table.propdef-extra dfn, table.descdef dfn {
   390 	font-weight: bold;
   391 	font-style: normal
   392 }
   393 */
   394 table.propdef td:first-child,
   395 table.propdef-extra td:first-child,
   396 table.descdef td:first-child,
   397 table.propdef th:first-child,
   398 table.propdef-extra th:first-child,
   399 table.descdef th:first-child {
   400 	font-style: italic;
   401 	font-weight: normal;
   402 	width: 8.3em;
   403 	padding-left: 1em;      
   404 }
   405 table.propdef td[colspan]:first-child,
   406 table.propdef-extra td[colspan]:first-child,
   407 table.descdef td[colspan]:first-child,
   408 table.propdef th[colspan]:first-child,
   409 table.propdef-extra th[colspan]:first-child,
   410 table.descdef th[colspan]:first-child {
   411 	font-style: inherit
   412 }
   413 table.propdef tr:first-child,
   414 table.propdef-extra tr:first-child,
   415 table.descdef tr:first-child {
   417 }
   419 table.propdef > tbody > tr:last-child th,
   420 table.propdef-extra > tbody > tr:last-child th,
   421 table.descdef > tbody > tr:last-child th,
   422 table.propdef > tbody > tr:last-child td,
   423 table.propdef-extra > tbody > tr:last-child td,
   424 table.descdef > tbody > tr:last-child td {
   425 	border-bottom: 0;
   426 }
   428 table.propdef tr:first-child th,
   429 table.propdef-extra tr:first-child th,
   430 table.descdef tr:first-child th,
   431 table.propdef tr:first-child td,
   432 table.propdef-extra tr:first-child td,
   433 table.descdef tr:first-child td {
   434 	padding-top: 1em;
   435 }
   437 /* For when values are extra-complex and need formatting for readability */
   438 table td.pre {
   439 	white-space: pre-wrap;
   440 }
   442 /* A footnote at the bottom of a propdef */
   443 table.propdef td.footnote {padding-top: 0.6em; width: auto}
   444 table.propdef td.footnote:before {
   445 	content: " ";
   446 	display: block;
   447 	height: 0.6em;
   448 	width: 4em;
   449 	border-top: thin solid;
   450 }
   452 table.proptable td .property {
   453 	display: block;
   454 	text-align: left;
   455 	font-weight: bold;
   456 }
   458 /* CSS modules typically don't use MUST, SHOULD etc. from RFC 2119,
   459 or, if they do, they don't put them in uppercase. But the following
   460 class is provided in case a spec wants to use RFC 2119 terms in
   461 uppercase in the source. */
   463 em.rfc2119 {
   464 	text-transform: lowercase;
   465 	font-variant: small-caps;
   466 	font-style: normal
   467 }
   469 /* In Profile specs, a table of required features: */
   471 table.features th {
   472 	background: #00589f;
   473 	color: #fff;
   474 	text-align: left;
   475 	padding: 0.2em 0.2em 0.2em 0.5em;
   476 }
   477 table.features td {
   478 	vertical-align: top;
   479 	border-bottom: 1px solid #ccc;
   480 	padding: 0.3em 0.3em 0.3em 0.7em;
   481 }
   484 /* Style for data tables (and properly marked-up proptables) */
   486 .data, .proptable {
   487 	margin: 1em auto;
   488 	border-collapse: collapse;
   489 	width: 100%;
   490 	border: hidden;      
   491 }
   492 .data caption {
   493 	width: 100%;
   494 	text-align: center;
   495 }
   497 .data td, .data thx,
   498 .proptable td, .proptable thx {
   499 	padding: 0.5em;
   500 	text-align: center;
   501 	border-top: 1px dotted;        
   502 }
   504 .data thead td:empty {
   505 	padding: 0;
   506 	border: 0;
   507 }
   509 .data thead th[scope="row"],
   510 .proptable thead th[scope="row"] {
   511 	text-align: right;
   512 	color: inherit;
   513 }
   515 .data thead,
   516 .proptable thead,
   517 .data tbody,
   518 .proptable tbody {
   519 	color: inherit;
   520 	border-bottom: 1px solid;
   521 }
   523 .data colgroup {
   524 	border-left: 1px solid;
   525 }
   527 .data tbody th:first-child,
   528 .proptable tbody th:first-child ,
   529 .data tbody td[scope="row"]:first-child,
   530 .proptable tbody td[scope="row"]:first-child {
   531 	text-align: right;
   532 	color: inherit;
   533 	border-right: 1px solid;
   534 	border-top: 1px dotted;
   535 	padding-right: 1em;
   536 }
   538 .data tbody th[rowspan],
   539 .proptable tbody th[rowspan],
   540 .data tbody td[rowspan],
   541 .proptable tbody td[rowspan]{
   542 	border-left: 1px dotted;
   543 }
   545 .data tbody th[rowspan]:first-child,
   546 .proptable tbody th[rowspan]:first-child,
   547 .data tbody td[rowspan]:first-child,
   548 .proptable tbody td[rowspan]:first-child{
   549 	border-left: 0;
   550 	border-right: 1px dotted;
   551 }    
   553 .complex.data th,
   554 .complex.data td {
   555 	border: 1px dotted;
   556 }
   559 .data img {
   560 	vertical-align: middle;
   561 }
   563 table.propdef {
   564 	table-layout: auto;
   565 }
   566 .propdef th {
   567 	font-style: italic;
   568 	font-weight: normal;
   569 	text-align: left;
   570 	width: 3em;
   571 }
   572 dt dfn code {
   573 	font-size: inherit;
   574 }
   576 /* This is mostly to make the list inside the CR exit criteria more compact. */
   577 ol.inline, ol.inline li {display: inline; padding: 0; margin: 0}
   578 ol.inline {counter-reset: list-item}
   579 ol.inline li {counter-increment: list-item}
   580 ol.inline li:before {content: "(" counter(list-item) ") "; font-weight: bold}
   582 /* This styles the obsoletion notice on some of our older/abandoned specs. */
   583 details.obsolete[open] {
   584 	background: #fdd; 
   585 	color: red; 
   586 	font-weight: bold; 
   587 	text-align: center; 
   588 	padding: .5em; 
   589 	border: thick solid red; 
   590 	border-radius: 1em; 
   591 	position: fixed; 
   592 	left: 1em; 
   593 	right: 1em;
   594 	bottom: 1em; 
   595 	z-index: 1000;
   596 }
   598 details.obsolete:not([open]) > summary {
   599 	background: #fdd; 
   600 	color: red; 
   601 	font-weight: bold; 
   602 	text-align: center; 
   603 	padding: .5em; 	
   604 }

mercurial