body {
  padding: 20px 20px;
  margin: 0;
  background-color: #ffffff;
  color: #555555;
  font-family: Ubuntu, Arial, Helvetica, sans-serif;
  font-weight: normal;
  line-height: 1.3;
}

body.outline {
  background-image: url(images/bg1024.png);
  background-position: center top;
  background-repeat: no-repeat;
}

img {
  border: none;
}

div#content {
  position: relative;
  width: 980px;
  margin: 0 auto;
}

h1 {
  font-size: 48pt;
  font-family: Ubuntu, Arial, Helvetica, sans-serif;
  font-weight: bold;
  padding: 0 0 10px 0;
  margin: 0 0 60px 0;
  border-bottom: 6px solid #c80032;
}

div.quotation {
  position: relative;
  margin: 80px 40px 0 40px;
  font-family: Qlassik Bold;
  font-style: italic;
}

div.quote-body:before {
  position: absolute;
  left: -0.5em;
  content: "“";
}

div.quote-body:after {
  content: "”";
}

div.quote-body {
  font-size: 46pt;
  text-align: left;
}

div.quote-body em {
  color: #ffff88;
}

div.quote-attrib {
    text-align: right;
    font-size: 28pt;
}

a {
  text-decoration: none;
  color: #555588;
}

a:hover {
  text-decoration: underline;
}

#nav {
  position: absolute;
  right: 0;
  top: 0;
  padding: 34px 0 34px 34px;
  opacity: 0.1;
}

#nav:hover {
  opacity: 1;
}

#nav a {
  display: block;
  float: left;
  width: 34px;
  height: 34px;
  border: none;
  text-decoration: none;
  background-image: url(images/nav-arrows.png);
  border-radius: 5px;
}

#nav-prev { background-position:  -3px -3px; }
#nav-toc  { background-position: -43px -3px; }
#nav-next { background-position: -82px -3px; }

#nav a:hover {
  background-color: #444444;
}

#title-header {
  text-align: center;
  font-size: 48pt;
  font-weight: bold;
  margin: 180px 20px 0 20px;
}

#title-subtitle {
  text-align: center;
  font-size: 32pt;
  font-style: italic;
  margin: 0.2em 20px 0 20px;
}

#title-author {
  text-align: center;
  font-size: 22pt;
  font-family: Qlassik Bold;
  font-style: italic;
  margin: 2.4em 20px 0 20px;
}

#title-logo {
  width: 410px;
  height: 120px;
  margin: 120px auto 30px auto;
  padding: 0;
  background-image: url(images/logo.png);
}

#footer {
  display: none;
}

#toc {
  float: left;
  margin: 0 0 0 0.8em;
  padding: 0;
  font-size: 18pt;
}

#toc li {
  margin: 4px 0 0 0;
  padding: 5px 0 5px 0.2em;
  background-repeat: no-repeat;
}

#toc li:hover {
  background-color: #666666;
}

#toc a {
  padding: 0 6px;
  color: #555555;
  text-decoration: none;
}

#toc li:hover a {
  color: white;
  background-color: #666666;
}

ul {
  margin: 0 0 0 0.8em;
  padding: 0;
  font-size: 40pt;
  font-weight: bold;
}

li {
  margin: 0 0 0 0;
  padding: 6px 0 6px 0.2em;
  background-repeat: no-repeat;
}

li tt {
  font-size: 75%;
  font-family: monospace;
  font-weight: bold;
}

#content ul li em {
  font-style: normal;
  color: #c80032;
}

strike {
  color: #777777;
}

.code {
  margin: 1.0em 14px 24px 14px;
  padding: 0;
  color: #444444;
  background-color: #ffffff;
  font-family: monospace, Bitstream Vera Sans Mono, Courier New;
  font-size: 24.0pt;
  font-weight: bold;
  line-height: 130%;
}

.code.big {
  font-size: 40.0pt;
}

.code + ul {
  margin-top: 48px;
}

.synComment    { color: #a0a0a0; font-weight: normal; font-style: italic; }
.synConstant   { color: #338833; }
.synIdentifier { color: #885500; }
.synStatement  { color: #1111ff; ; font-weight: bold; }
.synPreProc    { color: #a020f0; }
.synType       { color: #2e8b57; font-weight: bold; }
.synSpecial    { color: #6a5acd; }
.synUnderlined { color: #000000; text-decoration: underline; }
.synError      { color: #ffffff; background: #ff0000 none; }
.synTodo       { color: #0000FF; background: #ffff00 none; }

::-moz-selection { background: #ffe7bf; }
::selection      { background: #ffe7bf; }

div.pic {
  float: right;
  padding: 12px 0 0 0;
  margin-left: 20px;
}

div.pic div.caption {
  font-size: 11px;
  font-family: Arial, Helvetica, sans-serif;
  text-align: right;
}

.screenshot {
  text-align: center;
}

#credits li {
  font-size: 26pt;
}

#jquery-logo {
  margin-top: 180px;
}

div.included {
  margin: 0;
  padding: 0;
  font: normal normal 22px serif;
  line-height: 130%;
}

div.included h1 {
  background-image: none;
  font-size: 24pt;
  font-family: serif;
  font-weight: bold;
}

div.included ul {
  font: normal normal 100% serif;
  list-style: disc;
  margin: 1em;
}

div.included li {
  background-image: none;
  padding: 0 0 0 0.2em;
  margin: 0.2em 1em;
}

div.included pre.pffft-src {
  font-size: 24pt;
  line-height: 30pt;
  float: left;
  margin: 40px 200px 0 20px;
}

div.included ul.pffft {
  float: left;
  margin: 24px 0 0 0;
  font-size: 28pt;
}


#the-box {
  width:         300px;
  height:        220px;
  border:        2px solid #008800;
  position:      absolute;
  top:           150px;
  left:          0px;
  border-radius: 0px;
  transform:     rotate(0deg);
}

pre#box-css {
  position: absolute;
  left: 400px;
  top: 114px;
  font-family: monospace, Bitstream Vera Sans Mono, Courier New;
  font-size: 20.0pt;
  font-weight: bold;
  line-height: 130%;
}

pre#box-css .hidden {
  display:none;
}

.twiddlable:hover {
  background-color: #aaccff;
  outline: 2px solid #aaccff;
}

.dob-entry {
  margin: 2.4em 0.6em;
  font-size: 140%;
}

.dob-entry input.dob {
  width: 9em;
  padding-left: 6px;
}

.dob-entry input.dob:focus {
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(82, 168, 236, 0.6)
}

.dob-entry input {
  font-size: 26px;
  color: #444444;
}

.dob-entry .jq-dte {
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.375) inset;
}

.dob-entry .jq-dte.focus {
  border: 1px solid #4b6e99;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(82, 168, 236, 0.6)
}

.dob-entry span.jq-dte span.jq-dte-tooltip,
.dob-entry span.jq-dte span.jq-dte-errorbox {
  font-size: 24px;
  color: #333333;
}