User:C09notes/myskin.css

/* Sample style sheet for boom!, the book microformat             */ /* written by Hakon Wium Lie and Bert Bos, November 2005          */ /* You may reuse this style sheet for any purpose without any fees */

html { margin: 0; font: 10pt/1.26 "Gill Sans", sans-serif; counter-reset: toc-chapter; /* FAR */ }

body { margin: 0 0 0 28%; }

h1, h2, h3, h4, h5, h6 { font-family: "Gill Sans", sans-serif; margin: 2em 0 0.5em 0; page-break-after: avoid; }

h1 { padding: 2em 0 2em 0; margin: 0; font-size: 2.4em; font-weight: 900; }

/* Section Numbering: * Introduced distinct section# classes in order to properly define * section counter scopes. Without these, the scopes for counters * were wrong (typically expiring prematurely, e.g. with end of a * section Header not section Div. */

div.section2 { counter-reset: section-h3; }

div.section2 h2 { font-size: 1.4em; text-transform: uppercase; font-weight: bold; }

div.section2 h2::before { counter-increment: section-h2; content: counter(chapter) "." counter(section-h2) " " }

div.section3 { counter-reset: section-h4; }

div.section3 h3 { font-size: 1.3em; font-weight: bold; }

div.section3 h3::before { counter-increment: section-h3; content: counter(chapter) "." counter(section-h2) "." counter(section-h3) " " }

div.section4 { counter-reset: section-h5; }

/* FAR - to fix problem that h4 was showing up bigger than h3 */ div.section4 h4 { font-size: 1.2em; font-weight: bold; }

div.section4 h4::before { counter-increment: section-h4; content: counter(chapter) "." counter(section-h2) "." counter(section-h3) "." counter(section-h4) " " }

div.section5 h5 { font-size: 1.1em; font-weight: bold; }

div.section5 h5::before { counter-increment: section-h5; content: counter(chapter) "." counter(section-h2) "." counter(section-h3) "." counter(section-h4) "." counter(section-h5) " " }

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

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

/* p { margin: 0 }  /* FAR: original */ p { margin: .8em 0 } */ /* FAR */ p + p { text-indent: 1.3em } p.sidenote + p, p.caption, p.art { text-indent: 0; margin: 0 }

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

pre { margin: .6em .3em; }

/* FAR * originally: a { text-decoration: none; color: black } */ a { text-decoration: none; color: blue }

/* cross-references */

a.pageref::after { content: " (see page " target-counter(attr(href), page) ")"; } a.chapref::before { content: " Chapter " target-counter(attr(href), chapter) ", "; } a.figref { content: " Figure " counter(chapter) "." target-counter(attr(href), figure); } a.tableref { content: " Table " counter(chapter) "." target-counter(attr(href), figure); }

/* sidenotes - these appear in the left portion of the page that is otherwise empty */

.sidenote { float: left; clear: left; margin: 0 0 1em -41%; width: 34%; /* FAR, orig was 37% */ font-size: 0.9em; font-style: normal; text-indent: 0; text-align: left; /* FAR; orig was right */ page-break-inside: avoid; background: #CDC; /* FAR */ border: thin solid; /* FAR */ padding: 0.5em 1em; }

.sidequote { float: left; clear: left; width: 33%; /* FAR, orig was 37% */ font-size: 1.1em; /* FAR, larger for emphasis */ font-style: italic; text-indent: 0; text-align: left; /* FAR; orig was right */ page-break-inside: avoid; background: lemonchiffon; /* FAR */ border: thin solid; /* FAR */ padding: 0.5em 1em; margin: 0 0 1em -41%; }

.sidequest { float: left; clear: left; width: 33%; /* FAR, orig was 37% */ font-size: 1.1em; /* FAR, larger for emphasis */ font-style: italic; text-indent: 0; text-align: left; /* FAR; orig was right */ page-break-inside: avoid; background: lightblue; /* FAR */ border: thin solid; /* FAR */ padding: 0.5em 1em; margin: 0 0 1em -41%; }

/* FAR - side margin images - give more space than a normal note */ .sideimg { float: left; clear: left; margin: 0 0 1em -41%; width: 39%; /* FAR, orig was 37% */ font-size: 0.9em; font-style: normal; text-indent: 0; text-align: left; /* FAR; orig was right */ page-break-inside: avoid; padding: 0 0; }

.sideimg img { width: 100%; border: none; }

.imgcode { page-break-inside: avoid }

/* sidebars */

div.sidebar { float: top-next; margin: 1.2em 0 1.2em 0; border: thin solid; background: #CCC; padding: 0.5em 1em; page-break-inside: avoid; -moz-column-count: 2; /* FAR: default for Firefox 1.5 */ column-count: 2; /* defined in CSS3 and supported by Prince */ column-gap: 1.5em; }

/* FAR: codebars - same as a sidebar, but inline not floated and * single column not 2-col */

div.codebar { /* float: top-next; */ margin: .5em 0 .5em 0; border: thin solid; padding: 0.25em .5em; background: #EEE; page-break-inside: avoid; font-size: 85%; /* FAR */ }

div.sidebar h2 { margin-top: 0; }

/* figures and tables*/

div.figure { margin: 1em 0; counter-increment: figure; page-break-inside: avoid; /* FAR - keep caption together with figure */ }

div.figure .caption, div.table .caption { float: left; clear: left; width: 34%; /* FAR orig 37% */ text-align: right; font-size: 0.9em; margin: 0 0 1.2em -40%; }

div.figure .caption::before { content: "Figure " counter(chapter) "." counter(figure) ": "; font-weight: bold; }

div.table .caption::before { content: "Table " counter(chapter) "." counter(table) ": "; font-weight: bold; }

div.table { margin: 1em 0; counter-increment: table; }

div.table th { text-align: left; }

table th, table td { text-align: left; padding-right: 1em; }

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

@page { margin: 27mm 16mm 27mm 16mm; /* size: 7in 9.25in; */ size: 8.5in 11in; /* FAR */

@footnotes { border-top: thin solid black; padding-top: 0.3em; margin-top: 0.6em; margin-left: 30%; } }

/* define default page and names pages: cover, blank, frontmatter */

@page :left { @top-left { font: 11pt "Gill Sans", serif; content: "Programming on the Web"; vertical-align: bottom; padding-bottom: 2em; }

@bottom-left { font: 11pt "Gill Sans", serif; content: counter(page); padding-top: 2em; vertical-align: top; } }

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

@bottom-right { font: 11pt "Gill Sans", serif; content: counter(page); text-align: right; vertical-align: top; padding-top: 2em; } }

@page frontmatter :left { @top-left { font: 11pt "Gill Sans", serif; content: string(title); vertical-align: bottom; padding-bottom: 2em; }

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

@page cover { margin: 0; }

@page frontmatter :right { @top-right { font: 11pt "Gill Sans", serif; content: string(header, first); vertical-align: bottom; padding-bottom: 2em; }

@bottom-right { font: 11pt "Gill 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 } }

/* footnotes */

.footnote { /* FAR: consider revising this so that they don't entirely break */ /* display: none;                  /* default rule */ display: block;                  /* FAR: default rule */

display: prince-footnote;       /* prince-specific rules */ position: footnote; footnote-style-position: inside;

counter-increment: footnote; margin-left: 1.4em; font-size: 90%; line-height: 1.4; }

.footnote::footnote-call { vertical-align: super; font-size: 80%; }

.footnote::footnote-marker { vertical-align: super; color: green; padding-right: 0.4em; }

/*  A book consists of different types of sections. We propose to use DIV elements with these class names:

frontcover halftitlepage: contains the title of the book titlepage: contains the title of the book, name of author(s) and publisher imprint: left page with copyright, publisher, library printing information dedication: right page with short dedication foreword: written by someone other than the author(s) toc: table of contents preface: preface, including acknowledgements chapter: each chapter is given its own DIV element references: contains list of references appendix: each appendix is given its own bibliography glossary index colophon: describes how the book was produced backcover

A book will use several of the types listed above, but few books will use all of them.

/* which section uses which named page */

div.halftitlepage, div.titlepage, div.imprint, div.dedication { page: blank } div.foreword, div.toc, div.preface { page: frontmatter }

/* page breaks */

div.frontcover, div.halftitlepage, div.titlepage { page-break-before: right } div.imprint { page-break-before: always } div.dedication, div.foreword, div.toc, div.preface, div.chapter, div.reference, div.appendix, div.bibliography, div.glossary, div.index, div.colophon { page-break-before: always } div.backcover { page-break-before: left }

/* the front cover; this code is probably not very reusable by other books */

div.frontcover { page: cover; }

div.frontcover img { position: absolute; /* width: 7in; height: 9.25in; */ width: 8.5in; height: 11in; /* FAR */ left: 0; top: 0; z-index: -1; }

div.frontcover h1 { position: absolute; left: 2cm; top: 1cm; color: white; font-size: 44pt; font-weight: normal; }

div.frontcover h2 { position: absolute; right: 0; top: 5cm; color: black; background: white; font-size: 16pt; font-weight: normal; padding: 0.2em 5em 0.2em 1em; letter-spacing: 0.15em; }

div.frontcover h3 { position: absolute; left: 2cm; top: 7cm; color: white; font-size: 24pt; font-weight: normal; }

div.frontcover p { position: absolute; left: 2cm; bottom: 1.5cm; font-size: 24pt; color: black; font-weight: bold; text-transform: uppercase; }

/* titlepage, halftitlepage */

div.titlepage h1, div.halftitlepage h1 { margin-bottom: 2em; } div.titlepage h2, div.halftitlepage h2 { font-size: 1.2em; margin-bottom: 3em; } div.titlepage h3, div.halftitlepage h3 { font-size: 1em; margin-bottom: 3em; } div.titlepage p, div.halftitlepage p { font-size: 1.4em; font-weight: bold; margin: 0; padding: 0; }

/* TOC */

ul.toc, ul.toc ul { list-style-type: none; margin: 0; padding: 0; } ul.toc ul { margin-left: 1em; font-weight: normal; } ul.toc > li { font-weight: bold; margin-bottom: 0.5em; } ul.toc a::after { content: leader('.') target-counter(attr(href), page); font-style: normal; } ul.toc > li.frontmatter a::after { content: leader('.') target-counter(attr(href), page, lower-roman); font-style: normal; } ul.toc > li.endmatter a::after { content: leader('.') target-counter(attr(href), page); 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; }

/* chapter numbers */

div.chapter { counter-reset: section-h2 figure table; /* FAR */ /* counter-reset: figure; /* FAR: figure numbers reset for each chap */ /* counter-reset: table; /* FAR: table numbers reset for each chap */ counter-increment: chapter; /* counter-reset: section-h2; /* FAR */ /* counter-reset: figure; /* FAR: figure numbers reset for each chap */ /* counter-reset: table; /* FAR: table numbers reset for each chap */ }

h1::before { white-space: pre; margin-left: -2.5cm; font-size: 50%; content: "\B0 \B0  \B0  \B0  \B0 \A";  /* ornaments */ }

div.chapter h1::before { content: "Chapter " counter(chapter) " \A"; }

div.frontcover h1::before, div.titlepage h1::before, div.halftitlepage h1::before { content: normal;                 /* that is, none */ }

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

/* index */

ul.index { list-style-type: none; margin: 0; padding: 0; moz-column-count: 2 /* FAR */ column-count: 2; column-gap: 1em; }

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

/* FAR: reduce indent on sidenote list items and set the symbol*/ .sidenote ul { margin-left: 0.5em; padding-left: 0.5em; list-style: square; }

/* FAR: actually want to use this as the bullet not in place of the * bullet, since the latter is much harder on the reader * OMIT UNTIL FIXED */ /* .sidenote ul li:before { content: "\00BB \0020"; }

/* FAR */ div.TBD { float: top-next; margin: 1.2em 0 1.2em 0; border: thin solid; background: #FCC; padding: 0.5em 1em; page-break-inside: avoid; column-count: 2; column-gap: 1.5em; font-size: 70%; }

/* FAR: inline colorized questions for student consideration */ span.Q { background: #CFC; border: none; padding: 0.1em 0.2em; margin: 0; line-height: 125%; page-break-inside: avoid; }

/* FAR: inline colorized issues to be resolved - P for problem */ span.P { background: #FAA; border: none; padding: 0.1em 0em; margin: 0; line-height: 125%; page-break-inside: avoid; }

/* FAR try setting tutorial material in a different font to make it stand apart * and drop float and columns for better layout (since often large) */ div.tutorial { /* float: top-next; // dropped b/c floats overtake text */ /* margin: 1.2em 0 1.2em 0; */ /*border: thin solid; // dropped b/c often spans multi pages */ /*background: #FCC;*/ /* padding: 0.5em 1em; */ /* page-break-inside: avoid; */ /* -moz-column-count: 2; /* FAR: default for Firefox 1.5 */ /* column-count: 2; /* FAR: original value - for use by Prince */ /* column-gap: 1.5em; */ /* font-family: "Eras Light ITC", sans-serif; */  /* FAR - looks wierd in light face */ }

span.element, span.attribute { 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; }

/* FAR - allow extra sections to appear on screen media

@media screen, handheld { html { margin: 1em; font: 14px "Gill Sans", sans-serif; } h1 { margin-bottom: 0.5em } div.frontcover, div.halftitlepage, div.titlepage, div.imprint, div.dedication, div.foreword, div.toc, div.index { display: none } }



@media handheld { html { margin: 1em; font: 14px "Gill Sans", sans-serif; } h1 { margin-bottom: 0.5em } div.frontcover, div.halftitlepage, div.titlepage, div.imprint, div.dedication, div.foreword, div.toc, div.index { display: none } }

@media screen { html { margin: 1em; font: 14px "Gill Sans", sans-serif; } h1 { margin-bottom: 0.5em } div.frontcover, div.halftitlepage, div.titlepage, div.imprint { display: none } }

.thumbwrapper .highslide { } .highslide img { border: 2px solid gray; cursor: url(highslide/graphics/zoomin.cur), pointer; outline: none; } .highslide:hover img { border: 2px solid silver; }

.highslide-image { border: 10px solid white; } .highslide-image-blur { } .highslide-caption { display: none; border: 2px solid white; border-top: none; padding: 5px; background-color: #F0EDE0; } .highslide-loading { display: block; color: black; font-size: 8pt; font-family: sans-serif; font-weight: bold; text-decoration: none; padding: 2px; border: 1px solid black; background-color: white; /*padding-left: 22px; background-image: url(highslide/graphics/loader.white.gif); background-repeat: no-repeat; background-position: 3px 1px;*/ } .highslide-loading a { color: black; } .control { float: right; display: block; position: relative; margin: 0 5px; font-size: 9pt; font-weight: bold; text-decoration: none; text-transform: uppercase; margin-top: 1px; margin-bottom: 1px; } .control:hover { border-top: 1px solid #333; border-bottom: 1px solid #333; margin-top: 0; margin-bottom: 0; } .highslide-move { cursor: move; } .highslide-overlay { display: none; } a.highslide-credits, a.highslide-credits i { padding: 2px; color: silver; text-decoration: none; font-size: 10px; } a.highslide-credits:hover, a.highslide-credits:hover i { color: white; background-color: gray; } .highslide-previous-next { text-align: center; padding-bottom: 5px; } .highslide-previous-next a { font-size: 7pt; font-weight: bold; text-decoration: none; text-transform: uppercase; color: white; padding: 0 20px; } .highslide-html { border: 2px solid silver; background-color: white; } .highslide-html-blur { border: 2px solid gray; } .highslide-html-content { position: absolute; display: none; } /* Individual CSS-classes: no border */ .highslide-no-border .highslide-image { border: none; border-bottom: 1px solid white; } .highslide-no-border .highslide-html { border: none; } .highslide-no-border .highslide-caption { border: none; border-bottom: 1px solid white; background-color: gray; color: white; } .highslide-no-border .highslide-caption code { color: white; }

/* Individual CSS-classes: gradient */ .highslide-white .highslide-image { border: 5px solid white; } .highslide-white .highslide-caption { background-color: white; } .highslide-white .control, .highslide-white .control * { color: #666; } .highslide-white .highslide-html { border: 2px solid white; }

/* Individual CSS-classes: narrow border */ .highslide-narrow-border .highslide-image { border: 2px solid white; } .highslide-narrow-border .highslide-caption { background-color: white; }

/* Individual CSS-classes: black border */ .highslide-black-border .highslide-image { border: 2px solid #655F2F; } .highslide-black-border .highslide-caption { border: 2px solid #655F2F; border-top: none; background-color: white; color: #333; }

/* Individual CSS-classes: specified blur style */ .highslide-blur-example .highslide-image-blur { border-color: silver; }

.highslide-blur-example .highslide-caption-blur { border-color: silver; }

.html-header { background-image: url(highslide/graphics/header-background.gif); cursor: default; height: 18px; padding: 2px; } .highslide-html-blur #highslide-html-7-header { background-image: url(highslide/graphics/header-background-blur.gif); height: 18px; padding: 2px; }

/* Controlbar example */ .controlbar { background: url(highslide/graphics/controlbar3.gif); width: 163px; height: 29px; } .controlbar a { display: block; float: left; margin: 0px 0 0 5px; height: 29px; width: 34px; }

/* Controlbar example */ .controlbar2 { margin-left: 60px; background: url(highslide/graphics/controlbar2.gif); width: 210px; height: 32px; } .controlbar2 a { display: block; float: left; margin: 0 0 0 5px; height: 30px; width: 42px; }

/* Put these last in your highlide-related CSS */ .highslide-display-block { display: block; } .highslide-display-none { display: none; }