@charset "utf-8";

/* Style for "Cascading Style Sheets, designing for the Web" 3rd
 * edition. Copyright 1997-2004 by Håkon Wium Lie and Bert Bos
 */

/* The body text is in Gill Sans 10/13, with a wide margin left for
 * small figures, captions and side notes. Some figures and tables are
 * fullwidth and use the margin space as well as the body
 * width. Paragraphs are justified and are indented, unless they come
 * after a white line (mtb) or after some displayed element (figure,
 * table, etc.)
 */

@page {
  margin: 27mm 16mm 27mm 16mm;
  size: 7in 9.25in;
}

@page :left {
  @top-left {
    font:  bold 10pt "Gill Alternate One Monotype", "Gill Sans", sans-serif;
    content: "Cascading Style Sheets";
    vertical-align: bottom;
    padding-bottom: 2em;
  }

  @bottom-left {
    font: bold 10pt "Gill Alternate One Monotype", "Gill Sans", sans-serif;
    content: counter(page);
    padding-top: 2em;
    vertical-align: top;
  }
}

@page :right {
  @top-right {
    font: bold 10pt "Gill Alternate One Monotype", "Gill Sans", sans-serif;
    content: string(header, first); 
    vertical-align: bottom;
    padding-bottom: 2em; 
  }

  @bottom-right {
    font: bold 10pt "Gill Alternate One Monotype", "Gill Sans", sans-serif;
    content: counter(page);
    text-align: right;
    vertical-align: top;
    padding-top: 2em;
  }
}

@page fore-matter :left {
  @top-left {
    font: bold 10pt "Gill Alternate One Monotype", "Gill Sans", sans-serif;
    content: "Cascading Style Sheets";
    vertical-align: bottom;
    padding-bottom: 2em;
  }

  @bottom-left {
    font: bold 10pt "Gill Alternate One Monotype", "Gill Sans", sans-serif;
    content: counter(page, lower-roman);
    padding-top: 2em;
    vertical-align: top;
  }
}

@page fore-matter :right {
  @top-right {
    font: bold 10pt "Gill Alternate One Monotype", "Gill Sans", sans-serif;
    content: string(header, first); 
    vertical-align: bottom;
    padding-bottom: 2em; 
  }

  @bottom-right {
    font: bold 10pt "Gill Alternate One Monotype", "Gill Sans", sans-serif;
    content: counter(page, lower-roman);
    text-align: right;
    vertical-align: top;
    padding-top: 2em;
  }
}

@page blank :left {
  @top-left {
    content: normal;
  }

  @bottom-left {
    content: normal;
  }
}

@page blank :right {
  @top-right {
    content: normal;
  }

  @bottom-right {
    content: normal;
  }
}


a:link img, a:visited img
{
	border-style: none;
}

html {
	margin: 0;
	padding: 0;
	background: white;
}

@media screen
{
	html {margin: 1em 2em}
	body {background: white}
}

body {
	color: black;
	font: 10pt/1.26 "Gill Alternate One Monotype", "Gill Sans", sans-serif;
	text-align: justify;
	margin: 0 0 0 4.2cm;
 	padding: 0;
	/* line-stacking-strategy: block-line-height; */
	widows: 2;
	orphans: 2;
	hyphens: auto;

}
@media screen, projection
{
	body {
		margin: 1em 2em 1em 30%;
	}
}

div.chapter, div.uchapter, div.uuchapter, div.appendix {
  page-break-after: always;
  clear: both;
}

div.uchapter {
  page: fore-matter;
}

div.uuchapter {
  page: blank;
}


p, div.nobreak p {
	margin: 0;
	text-indent: 13pt
}

@media print { 
	div.figure.top + p, div.figure.bottom + p {
		margin: 0;
		text-indent: 13pt
	}
}

/*
p:first-child, h1 + p, h2 + p, h3 + p, ul + p, ol + p, pre + p,
div.figure + p, h2 + .sidenote + p, h3 + .sidenote + p,
h1 + .sidenote + p,
table + p, div.propdef + p, dl + p, blockquote + p
.sidenote + p, 
*/

p:first-child, h1 + p, h2 + p, h3 + p, ul + p, ol + p, pre + p,
div.figure + p, h2 + .sidenote + p, h3 + .sidenote + p,
h1 + .sidenote + p, pre + .sidenote + p,
h2 + .sidefigure + p, h3 + .sidefigure + p,
h1 + .sidefigure + p,
table + p, div.propdef + p, div.propdef + div p, dl + p, blockquote + p,
pre + div > p:first-child,
.note + p,
div.indent + p, div.wide-table + p
{
    text-indent: 0pt
}


p.mtb
{
    margin-top: 0.9em;
    text-indent: 0;
}

.author
{
	margin-top: 2em;
	text-indent: 0;
	text-align: right;
}

/* The chapter heading has the number ("Chapter 7") in a smaller font
 * in the left margin. Can we rely on generated text?
 */


div.uchapter, div.chapter, div.appendix {
  /*string-set: header "";*/
  clear: both;
}

div.chapter {
	counter-increment: chapter;
	counter-reset: figno tableno;
}

div.appendix {
	counter-increment: appendix;
	counter-reset: figno tableno;
}


h1.chapter::before,
h1.uchapter::before,
h1.uuchapter::before,
h1.appendix::before
{
	white-space: pre;
	margin-left: -2.5cm;
	font-size: 50%;
}


h1.chapter::before
{ 
	content: "Chapter " counter(chapter) " \A";
}
h1.chapter {
	string-set: header "Chapter " counter(chapter) ": " content();
}


h1.appendix::before
{
	content: "Appendix\a0" counter(appendix, upper-latin) " \A";
}
h1.appendix {
	string-set: header "Appendix " counter(appendix, upper-latin) ": " content();
}


h1.uchapter::before
{
	content: "\B0  \B0  \B0  \B0  \B0 \A";
}
h1.uchapter {
	string-set: header content();
}


h1 {
	text-align: left;
	padding: 2em 0 0 0;
	font-size: 24pt;
	line-height: 1;
	font-weight: 900;
	page-break-after: avoid;
	/*margin-bottom: 3em;*/
	height: 5em;
	margin-bottom: 0.5em;
}


/* Section headings are in bold (h2), small-caps (h3) and italics
 * (h4), but in fact there aren't any h4 in the book. They are not
 * numbered.
 */

h2 {
	text-align: left;
	margin: 2.4em 0 0.6em 0;
	font-size: 120%;
	font-weight: bold;
	text-transform: uppercase;
	page-break-after: avoid;
}
h2 + .sidenote {
	page-break-after: avoid;
}

h2 span.element {
	font-size: 100%;
}

h3, h4, h5 {
	text-align: left;
	margin: 2.4em 0 0.6em 0;
	font-size: 10pt;
	page-break-after: avoid;
}

h3
{
	/*
	font-variant: small-caps;
	font-weight: normal;
	*/
	font-weight: bold;
}

h4
{
    font-style: italic;
    font-weight: normal;
}

/* Side notes and small figures go into the left margin. Captions go
 * below the figure. Side notes and captions are 9pt (90% of
 * body). Captions in the left margin are right justified.
 */

.sidenote, div.sidefigure, em.bestpractice, table.grade
{
	float: left;
	clear: left;
	margin: 0 2% 1.2em -42%;
	width: 4.0cm;
	page-break-inside: avoid;
	font-style: normal;
	text-indent: 0;
/*	text-align: left; */
	text-align: right;
}
@media screen, projection
{
	.sidenote, div.sidefigure, em.bestpractice, table.grade
	{
		width: 40%;
	}

}



div.sidefigure
{
	display: table;
}


.sidenote, div.sidefigure, div.figure, caption, .table-caption
{
    font-size: 90%;
    line-height: 1.3; /* should be inherited, but bug in Prince? */
}


div.widefigure, div.figure.wide {
    margin: 1.2em 0 1.2em -42%;
    position: relative;
    page-break-inside: avoid;
}

div.figure, div.widefigure
{
	position: relative;
	margin: 1.33em 0;
	page-break-inside: avoid;
}


div.section {
  clear: both
}

@media print {

    @supports (float: top) or (float: top-next) {
	div.figure.top {
		float: top;
		float: top-next;
		margin: 0 0 13pt 4.2cm;
	}

	div.figure.bottom {
		float: bottom;
		margin: 13pt 0 0 4.2cm;
	}

	div.widefigure  {
		width: 100%;
		float: top;
		float: top-next;
		margin: 0 0 13pt 0;
	}

	div.widefigure.bottom  {
		float: bottom
	}
    }

}


div.figure .caption {
	float: left;
	clear: left;
	width: 4.0cm;
	text-align: right;
	font-size: 90%;
	line-height: 1.3; /* should be inherited, but bug in Prince? */
	text-indent: 0;
    margin: 0 0 1.2em  -4.4cm;
}


div.widefigure .caption, div.wide .caption {
	float: none;
	width: 100%;
	text-align: left;
	font-size: 90%;
/* 	margin: 1em 0 13pt 0; */
 	margin: 1em 0 1em 0; 
	text-indent: 0;
}


div.sidefigure .caption
{
    font-size: 90%;
    line-height: 1.3;
    margin: 0.7em 0 0.7em 0; padding: 0;
/*    width: 3.8cm; */
    text-align: right;
    text-indent: 0;
}

div.sidefigure .art {
    text-align: right;
}

div.sidefigure .art img {
    float: right;
}



p.art
{
    margin: 0;
    text-indent: 0;
/*    line-height: 1px; */
}

p.hilite {
  text-indent: 0; 
  background: silver; 
  padding: 5pt;
}

img, div.figure object, div.sidefigure object,
div.figure img, div.sidefigure img
{
    max-width: 100%;
    /*width: 100%;*/
}


.full {
  width: 100%;
}


/* Figures are numbered ("Figure 3.17") in bold and with a quad space
 * after the number. Can we rely on generated text? If not, add the
 * numbers by hand and enclose them in span.figno
 */

div.sidefigure .caption:before,
div.figure .caption:before,
div.widefigure .caption:before, 
.figno {
    content: "Figure\A0" counter(chapter) "." counter(figno);
    counter-increment: figno;
    font-weight: bold;
    margin-right: 0.3em;
}
div.appendix div.sidefigure .caption:before,
div.appendix div.figure .caption:before,
div.appendix div.widefigure .caption:before,
div.appendix .figno {
    content: "Figure\A0" counter(appendix, upper-latin) "." counter(figno);
}

/* Lists are indented to the same level as paragraphs (1em). We want
 * the bullets to be left-aligned with the left edge of the body text,
 * but the corresponding CSS properties are badl supported :-(
 */

ul, ol
{
	margin: 0.5em 0 0.5em 0;
	padding: 0 0 0 1.5em;
}
ol.long li {
    margin-top: 1.2em; margin-bottom: 1.2em;
}

dl { margin-top: 0.8em }

dl.compact dt
{
	display: compact;
}

dt
{
	font-weight: bold;
	page-break-after: avoid;
}

li {
	margin: 0;
	padding: 0;
}

/* Code examples are indented to the value of text-indent.
 */

pre
{
	font: 9pt/1.3 "Lucida Console", "Lucida Sans Typewriter", monospace;
	font: 8pt/1.3 "Lucida Sans Typewriter", monospace;
/*	font: 9pt/2.4 "Lucida Console", "Lucida Sans Typewriter", monospace;*/
	margin: 1.2em 0 1.2em 13pt;
/*	text-align: left;		/* Apparently not default in MacIE... */
/*	page-break-inside: avoid;*/
/*	white-space: pre-wrap;  */
/*	page-break-before: avoid; */
	widows: 4;
	orphans: 4;
}

/* Short displays (<3 lines) should not have a page break before */
.short {
    page-break-before: avoid;
}

table pre {
  margin: 0.3em 0;
}

    
/* A sidebar is a text in a frame with a gray background. Its title is
 * not above it, but in the left margin.
 * Problem: if the sidebar is longer than a page, we would like the
 * box the frame to be closed at the bottom of the page and the word
 * "continued" to be inserted...
 */

div.sidebar
{
    float: top;
    float: top-next; 
/*    margin: 0 0 13pt 0; */
    margin: 1.2em 0 1.2em 0;
    border: thin solid;
    background: #CCC;
    padding: 0.5em 1em;
    page-break-inside: avoid;
    column-count: 2;
    column-gap: 1.5em;
}

@media screen
{
    div.sidebar {margin: 1.2em 0 1.2em -4.2cm}
}

div.sidebar h2
{
    margin-top: 0;
/*
    float: left;
    width: 38%;
    text-align: right;
    margin: 0 auto 0 -42%;
    clear: left;
*/
}

div.sidebar h3
{
    display: run-in;
    font-variant: normal;
    font-weight: bold;
    font-size: 1em;
    margin-top: 1.2em;
}

div.sidebar h3:after
{
    content: "\A0\A0";
}

div.sidebar h3 + *
{
    margin-top: 0.6em;
}

/* Tables are full-width. There is a thin rule above and below the
 * table and below the row with column headings. Between the other
 * rows are dotted rules. All cells are left-aligned (not justified).
 */

th, td { text-align: left }

div.wide-table-top {
    clear: both;
    margin: 1.2em 0 1.2em 0;
    width: 100%;
    float: top;
}

div.wide-table {
    clear: both;
    margin: 1.2em 0 1.2em -42%;
    width: 142%;
}


div.wide-table-top table, div.wide-table table {
    width: 100%;
}


div.table {
    clear: both;
    margin: 1.2em 0 1.2em 0;
}

table.wide
{
    clear: both;
    border-collapse: collapse;
    border-spacing: 0;
    border-top: thin solid;
    border-bottom: thin solid;
    margin: 1.2em 0 1.2em -42%;
    width: 142%;
}


tr
{
    vertical-align: baseline;
}

table.frame td, table.frame th,
table.frame, table.border, table.border td, table.border th {
  border-collapse: collapse;
  border: thin solid black;
}

td.border {
  border: thin solid black;
  width: 6em;
  height: 6em;
}

/* A smaller table, inside the normal margins and without border */

table.small
{
    border-collapse: collapse;
    border-spacing: 0;
    margin: 1.2em 0 1.2em 0;
}

table.small td, table.small th
{
    text-indent: 0;
    /*padding: 0.2em 0 0.2em 1em;*/
    padding-right: 1em;
    text-indent: 0;
}

/* A small table with no borders and no padding. */

table.basic
{
    border-collapse: collapse;
    border-spacing: 0;
    margin: 1.2em 0 1.2em 0;
}

table.basic td, table.basic th
{
    padding: 0.1em;
}

/* Add class=lined to get dotted lines between the rows */

table.lined {
    border-top: thin solid;
    border-bottom: thin solid;
    margin: 1.2em 0 0.6em 0;
}

table.lined td, table.lined th
{
    border-top: none;
    border-bottom: thin dotted;
    padding-top: 0.2em;
    padding-bottom: 0.2em;
}

/* add some spacing around table cells */
table.spaced td, table.spaced th {
    padding: 0.2em 0.3em 0.2em 0.3em;
}



/* The table of character entities */

table.paired
{
	width: 100%;
}

table.paired td:first-child,
table.paired th:first-child,
table.paired td:first-child + td + td,
table.paired th:first-child + th + th,
table.paired td:first-child + td + td + td + td,
table.paired th:first-child + th + th + th + th
{
    text-align: right;
}

table.properties {
  font-size: 6pt; margin: 0; padding: 0;
  margin: 1.2em 0 1.2em -42%;
  border-collapse: collapse;
}
table.properties th, table.properties td
{
    padding: 0.2em;
    margin: 0;
    text-align: left;
    text-indent: 0;
    line-height: 1em;
    border: thin solid black;
}
table.properties tr td:last-child a {
  content: target-counter(attr(href), page);
}


table caption
{
    display: table-cell;
    column-span: 4;
    margin-top: 0.6em;
    text-align: left;
    border-bottom: thin solid black;
    border-top: none;
}

table tr.abc td {
  text-align: center;
  font-size: 10pt;
}

.formatted {
  font-family: serif;
  text-indent: 0;
}

/* Tables are numbered ("Table 3.1") in bold, with a quad space after
 * the number. If generated text doesn't work, add the number by hand
 * and enclose it in span.tableno
 */

table caption::before, .tableno, p.table-caption::before
{
    content: "Table\A0" counter(chapter) "." counter(tableno) " ";
    counter-increment: tableno;
    font-weight: bold;
    margin-right: 0.3em;
}

p.table-caption {
  text-indent: 0;
  margin: 0.3em 0 1em;
}




div.appendix table caption:before,
div.appendix .tableno
{
    content: "Table\A0" counter(appendix, upper-latin) "." counter(tableno);
}



/* for the cursor property */

table.cursor {
  margin: 1em 0;
}

table.cursor td {
    border-bottom: thin dotted;
    padding: 0.3em;
}
table.cursor tr td:first-child {
  background: #d6d6d6;
}
  


/* Property definitions contain two tables, .grade and .propdef
 */

div.propdef
{
    clear: both;
    margin: 1.2em 0;
    page-break-inside: avoid;
}

div.propdef td
{
    vertical-align: baseline;
    padding-top: 0;
    padding-bottom: 0;
}

table.grade
{
    border: none;
}

table.grade td
{
    border: none;
}

table.propdef
{
    margin: 0;
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    border-top: thin solid;
    border-bottom: thin solid;
    table-layout: fixed;
}

table.propdef td:first-child
{
    padding-left: 0;
    width: 6em;
    width: 20%;
    white-space: nowrap;
}

table.propdef td
{
    border: none;
    padding: 0.1em 0 0.1em 1em;
    text-indent: 0;
}

table.propdef tr:first-child td
{
    padding-top: 0.25em;
}

table.propdef tr:last-child td
{
    padding-bottom: 0.25em;
}

/* Names of HTML elements and attributes are in small caps. (XML
 * elements are case-sensitive, so we use <code> for those.) Foreign
 * word, such as "e.g." are marked as em.foreign.
 */

span.element, span.attribute
{
/*	font-variant: small-caps; */
	text-transform: uppercase;
	font-weight: bold;
	font-size: 80%;
}

span.property
{
    font-weight: bold
}


code, span.css, span.value, span.declaration
{
	font: 90% "Lucida Console", "Lucida Sans Typewriter", monospace;
}
/*
code.CSS, span.CSS, code.HTML, span.HTML, code.selector,
code.css, span.css, code.html, span.html, 
*/

em.foreign
{
  font-style: normal;
}

.u
{
  text-decoration: underline;
}

acronym
{
    /* text-transform: lowercase; */
    /* font-variant: small-caps; */
    font-style: normal;
    text-decoration: none;
    /*font-size: 80%;*/
}
abbr
{
    text-decoration: none;
}

sup
{
    vertical-align: super;
    line-height: 0.1em;
    font-size: 0.6em;
}

sub
{
    vertical-align: sub;
    line-height: 0.1em;
    font-size: 0.6em;
}

.issue {
    color: white;
    background: red;
    padding: 0.1em 0.2em;
}

q::before {
  content: "\201C";
}

q::after {
  content: "\201D";
}

em.line-number
{
    font: 90% "Gill Alternate One Monotype", "Gill Sans", sans-serif;
}

del
{
    text-decoration: line-through
}

div.example
{
    background: #CCC;
    padding: 0.5em;
}

button
{
	font-size: inherit;
}

/* Links aren't highlighted in any way in the printed version.
 */

:link, :visited
    {
	text-decoration: none;
	color: inherit;
    }

.indent, blockquote
{
    margin: 1.2em 0 1.2em 13pt;
    text-indent: 0;
}

pre.proportional {
	font-family: serif;
}

.wsn { 
	white-space: normal
}

.wsp { 
	white-space: pre
}

td.center {
	text-align: center
}

.dim { 
  color: gray;
}

/*
div div {
  background: #EEE;
}
div div div {
  background: #DDD;
}
div div div div {
  background: #CCC;
}
*/

ul.toc {
	list-style: none;
	margin-top: 0;
	margin-bottom: 0;
	text-align: left;
}

ul.toc li {
	font-weight: bold;
}

ul.toc li li {
	font-weight: normal;
}

ul.toc li li li {
	font-style: italic;
}

dfn { 
	font-style: italic
}

table.grade td {
  width: 20%;
  text-align: center;
}

table.grade td.full, span.full {
  font: 100% "Gill Sans";
  content: "\25CF";
}

table.grade td.half, span.half {
  font: 100% "Gill Sans";
  content: "\25D1";
}

table.grade td.none, span.none {
  font: 100% "Gill Sans";
  content: "\25CB";
}

table.grade td.unknown {
  font: 100% "Gill Sans";
  content: "??";
}


/* style the TOC */

ul.toc a::after {
  content: leader('.') target-counter(attr(href), page);
  font-style: normal;
}

ul.toc li.uchapter a::after {
  content: leader('.') target-counter(attr(href), page, lower-roman);
  font-style: normal;
}


ul.toc li.chapter::before {
  content: "Chapter " counter(toc-chapter, decimal);
  display: block;
  margin: 1em 0 0.1em -2.5cm;
  font-weight: normal;
  counter-increment: toc-chapter;
  page-break-after: avoid;
}

ul.toc li.appendix::before {
  content: "Appendix " counter(toc-chapter, upper-latin);
  display: block;
  margin: 1em 0 0.1em -2.5cm;
  font-weight: normal;
  counter-increment: toc-chapter;
}


ul.toc {
  margin-left: 0; padding-left: 0;
}
ul.toc ul.toc {
  margin-left: 0; padding-left: 2em;
}

ul.toc li li::before, ul.toc li li::before {
  content: normal;
}

div.address {
  margin-left: 2em;
/*  white-space: pre-line; */
}

ul.cities {
  margin: 0; padding: 0;
}
ul.cities li {
  display: inline;
}
ul.cities li:before {
  display: inline;
/*  font-family: mydingbats; */
/*  font-size: 30%; */
/*  vertical-align: 0.6em; */
  content: "\2022\00A0";
/*  content: "- ";  */
}

ul.cities li:first-child:before {
  content: normal;
}

div.legal p {
  text-indent: 0;
  margin: 0.3em 0;
}

.unicode {
  font-family: Arial;
}

.xml-drawing {
  float: right;
  width: 50%;
}

a.pageref::after {
  content: " "  target-counter(attr(href), page) ;
}

.nobreak {
  page-break-inside: avoid;
}

.avoidbreak:last-child, ul.toc {
  page-break-before: avoid;
}

.avoidbreak:first-child, ul.toc {
  page-break-after: avoid;
}
  

#first-chapter {
  counter-reset: page 1;
}

#lang table td, #lang table th {
    white-space: pre;
    padding: 0.2em 0.2em 0.2em 0.2em;
}

#preface .section {
  page-break-before: always;
}


/* For the online version: */
.note {
  color: #C00;
  font-size: 90%;
  margin: 0.9em 0;
}

/* For the lines at the top and bottom about translations */
#language, #translations {
  background: #DDD;
  border-radius: 0.5em;
}
#translations {
  margin: 6em 0 1em 0;
}
#language {
  display: table;
  width: 100%;
  border-collapse: collapse;
}
#language p, #translations {
  padding: 0.5em 1em;
}
#language p {
  text-indent: 0;
  display: table-cell;
}
#language p:first-child {
  white-space: nowrap;
}
#language p + p {
  border-left: thin solid;
}
#translations h2 {
  margin-top: 0;
}