dip3.css

/*

"Dive Into Python 3" stylesheet

Copyright (c) 2009, Mark Pilgrim, All rights reserved.

Redistribution and use in source and binary forms, with or without modification,
are permitted provided that the following conditions are met:

* Redistributions of source code must retain the above copyright notice,
  this list of conditions and the following disclaimer.
* Redistributions in binary form must reproduce the above copyright notice,
  this list of conditions and the following disclaimer in the documentation
  and/or other materials provided with the distribution.

THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS 'AS IS'
AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE
LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
POSSIBILITY OF SUCH DAMAGE.


Classname Legend

.w = "widgets"    = wrapper block for hide/open/download links dynamically inserted into code listings
.b = "block"      = internal block dynamically inserted into code listings
.d = "download"   = download link for code listings
.p = "prompt"     = command-line or interactive shell prompt within code listings
.q = "quote"      = quote at beginning of each chapter
.f = "fancy"      = first paragraph of each chapter (gets a fancy drop-cap)
.c = "centered"   = centered footer text (also clears floats)
.a = "asterism"   = section break
.v = "navigation" = prev/next navigation links (not breadcrumbs)
.u = "Unicode"    = text contains Unicode characters (requires special font declaration to accommodate *cough* a certain browser)

.nm = "no mobile"     = hide this section on mobile devices
.nd = "no decoration" = hide the widgets on this code block
.pp = "pretty print"  = apply syntax highlighting to this code block
.pf = "padded frame"  = black border with internal padding
.fr = "framed"        = black border, no padding
.ss = "screenshot"    = image, floated right, with margin
.hl = "header link"   = auto-inserted pilcrow after h2 and h3 section headers

.note = "note/caution/important"   = indented block for tips/gotchas/language comparisons
.baa  = "best available ampersand" = wrapper block for ampersands
.ots  = "on the side"              = an aside that is set in normal type (as opposed to a big blue pullquote)
.xxxl = "ridiculously large"       = text sized 1000% larger than normal type

Acknowledgements & Inspirations

"The Elements of Typographic Style Applied to the Web" ... http://webtypography.net/toc/
"Setting Type on the Web to a Baseline Grid" ............. http://www.alistapart.com/articles/settingtypeontheweb
"Compose to a Vertical Rhythm" ........................... http://24ways.org/2006/compose-to-a-vertical-rhythm
"Use the Best Available Ampersand" ....................... http://simplebits.com/notebook/2008/08/14/ampersands.html
"Unicode Support in HTML, Fonts, and Web Browsers" ....... http://alanwood.net/unicode/
"Punctuation" ............................................ http://en.wikipedia.org/wiki/Punctuation
"Google Code Prettify" ................................... http://code.google.com/p/google-code-prettify/
*/

/* typography */

body, .w a, .inherit {
  font: medium/1.75 'Gill Sans', 'Gill Sans MT', Corbel, Helvetica, 'Nimbus Sans L', sans-serif;
  word-spacing: 0.1em;
}
pre, kbd, samp, code, var, .b, pre span {
  font: small/2.154 Consolas, 'Andale Mono', Monaco, 'Liberation Mono', 'Bitstream Vera Sans Mono', 'DejaVu Sans Mono', monospace;
  word-spacing: 0;
}
.u {
  font: medium/1.75 'Arial Unicode MS', FreeSerif, OpenSymbol, 'DejaVu Sans', sans-serif;
}
pre .u, td .u, pre .u span, .a, tr + tr th:first-child {
  font: medium/1.75 'Arial Unicode MS', 'DejaVu Sans', FreeSerif, OpenSymbol, sans-serif;
  color: #222;
}
.baa {
  font: oblique 105% Constantia, Baskerville, Palatino, 'Palatino Linotype', 'URW Palladio L', serif;
}
abbr {
  font-variant: small-caps;
  text-transform: lowercase;
  letter-spacing: 0.1em;
}
.q {
  text-align: right;
  font-style: oblique;
}
.q span {
  font-size: large;
}
.note {
  margin: 3.5em 4.94em;
}
.note span {
  display: block;
  float: left;
  font-size: xx-large;
  line-height: 0.875;
  margin: 0 0.22em 0 -1.22em;
  color: steelblue;
}
.c, w, .w a, .d {
  line-height: 2.154;
}
.f:first-letter {
  float: left;
  color: lightsteelblue;
  padding: 0.11em 4px 0 0;
  font: normal 4em/0.68 serif;
  text-shadow: steelblue 1px 1px 1px;
}
p, ul, ol {
  margin: 1.75em 0;
  font-size: medium;
}

/* basics */

html {
  background: #fff;
  color: #222;
}
body {
  margin: 1.75em 28px;
}
.c, .a, .xxxl {
  clear: both;
  text-align: center;
}
.c {
  margin: 2.154em 0;
}
.a {
  font-size: xx-large;
  line-height: .875;
  color: #82b445;
}
form div, #level {
  float: right;
}
.todo {
  color: #ddd;
}
#level span {
  color: #82b445;
}
.pf,.fr {
  border: 1px solid;
}
.pf {
  padding: 0 1.75em;
}
.xxxl {
  font-size:1000%;
  font-weight:bold;
  line-height:1;
  margin:0.7em 0;
}
.ss {
  float: right;
  margin: 0 0 1.75em 1.75em;
}

/* links */

a {
  text-decoration: none;
  border-bottom: 1px dotted;
}
a:hover {
  border-bottom: 1px solid;
}
a:link, .w a {
  color: steelblue;
}
a:visited {
  color: #b44582;
}
.c a {
  color: inherit;
}
a.hl:link, a.hl:visited {
  color: #fff;
  padding-left: 0.2em;
  text-decoration: none;
  border: 0;
}
a.hl:hover, h2[id]:hover a.hl, h3[id]:hover a.hl {
  background: transparent;
  color: gainsboro;
}

/* code blocks */

pre {
  padding-left: 2.154em;
  border-left: 1px solid #ddd;
}
.w {
  float: left;
}
.c, .w, .w a, .d {
  font-size: small;
}
.b, ol, p, blockquote, h1, h2, h3 {
  clear: left;
}
pre a, .w a {
  padding: 0.4375em 0;
}
.w a {
  text-decoration: underline;
}
dfn {
  font-style: inherit;
}
mark {
  font-weight: bold;
  display: inline-block;
  width: 100%;
  background: #ff8;
}
pre span, .p {
  color: #667;
}

/* tables */

table {
  width: 100%;
  border-collapse: collapse;
}
th, td {
  width: 45%;
  padding: 0 0.5em;
  border: 1px solid #bbb;
}
th {
  text-align: left;
  vertical-align: baseline;
}
td {
  vertical-align: top;
}
th:first-child {
  width: 10%;
  text-align: center;
}
td pre {
  padding: 0;
}

/* overrides */

li ol, .q, th, td, td pre {
  margin: 0;
}
code, var, samp {
  line-height: inherit !important;
}
pre a, td code a, .w a, pre a:hover, td a:link, td a:visited, td pre {
  border: 0;
}

/* headers and pullquotes */

h1, h2, h3, aside {
  font-family: "Book Antiqua", Palatino, Georgia, serif;
}
h1, h2, h3 {
  font-variant: small-caps;
}
h1, h2 {
  letter-spacing: -1px;
}
h1, h1 code {
  font-size: xx-large;
  line-height: 1.3125;
}
h2, h2 code {
  font-size: x-large;
  line-height: 1.167;
  margin: 1.167em 0;
}
h3, h3 code {
  font-size: large;
  line-height: 1.556;
  margin: 1.556em 0;
}
h1 {
  border-bottom: 4px double;
  width: 100%;
  margin: 1.49em 0;
  counter-reset: h2;
}
h1:before {
  content: "Chapter " counter(h1) ". ";
}
h2:before {
  counter-increment: h2;
  content: counter(h1) "." counter(h2) ". ";
}
h2 {
  counter-reset: h3;
}
#toc + h2:before {
  content: "";
}
h3:before {
  counter-increment: h3;
  content: counter(h1) "." counter(h2) "." counter(h3) ". ";
}
#appa h1:before {
  counter-increment: h1;
  content: 'Appendix A. '
}
#appa h2:before {
  counter-increment: h2;
  content: 'A.' counter(h2) '. '
}
#appa h3:before {
  counter-increment: h3;
  content: 'A.' counter(h2) '.' counter(h3) '. '
}
#appb h1:before {
  counter-increment: h1;
  content: 'Appendix B. '
}
#appb h2:before {
  counter-increment: h2;
  content: 'B.' counter(h2) '. '
}
#appb h3:before {
  counter-increment: h3;
  content: 'B.' counter(h2) '.' counter(h3) '. '
}
#appc h1:before {
  counter-increment: h1;
  content: 'Appendix C. '
}
#appc h2:before {
  counter-increment: h2;
  content: 'C.' counter(h2) '. '
}
#appc h3:before {
  counter-increment: h3;
  content: 'C.' counter(h2) '.' counter(h3) '. '
}
#appd h1:before {
  counter-increment: h1;
  content: 'Appendix D. '
}
#appd h2:before {
  counter-increment: h2;
  content: 'D.' counter(h2) '. '
}
#appd h3:before {
  counter-increment: h3;
  content: 'D.' counter(h2) '.' counter(h3) '. '
}
aside {
  display: block;
  float: right;
  font-style: oblique;
  font-size: xx-large;
  width: 25%;
  margin: 1.75em 0 .75em 1.75em;
  background: steelblue;
  color: white;
  padding: 1.75em;
  border: 1px solid;
  -moz-border-radius: 1em;
  -webkit-border-radius: 1em;
  border-radius: 1em;
}
aside.ots {
  font-style: normal;
  font-size: medium;
  line-height: 1.75;
}
aside a {
  color: #fff !important;
}
aside code {
  font-size: inherit;
}

/* previous/next navigation links */

.v a {
  text-decoration: none;
  border: 0;
  display: block;
}
.v a {
  float: left;
}
.v a + a {
  float: right;
}
.v span {
  font-size: 1000%;
  line-height: 1;
  margin: 0;
  text-shadow: gainsboro 3px 3px 3px;
}

/* syntax highlighting */

.str { color: #080; }
.kwd { color: #008; }
.com, .traceback { color: #800; }
.typ { color: #606; }
.lit { color: #066; }
.pun { color: #660; }
.pln { color: #000; }
.tag { color: #008; }
.atn { color: #606; }
.atv { color: #080; }
.dec { color: #606; }