@import url("shadows/shadows.css");
@import url("comp-image.css");

html, body {
  background-color: #668;
  color: #fff;
  font: 16px "Arial","Trebuchet MS",Verdana,sans-serif;
  padding: 0; margin: 0;
}

h1 { font-size: 160%; }
h2 { font-size: 135%; }
h3 { font-size: 110%; }

a:link, a:visited { color: #00f; text-decoration: none; }
a:hover { color: #fa2; text-decoration: underline; }

.page-header {
  background-color: #88a;
  padding: 1em;
  border-bottom: 1px solid #446;
}

.page-header .title {
  font: bold 28px "Arial","Trebuchet MS",Verdana,sans-serif;
  text-shadow: 2px 2px 4px #224;
}

.page-header .title a, .page-header .title a:link, .page-header .title a:visited {
  color: #fff;
  text-decoration: none;
}

.page-header .tagline {
  color: #000;
  font-size: 90%;
  margin-left: 17em;
  margin-top: -0.3em;
}

.page-header .info {
  float: right;
  margin-right: 100px;
  font-size: 80%;
  color: #445;
}

.page-header .title a:hover {
  color: #aaf;
}

.page-footer {
  font-size: 90%;
  background-color: #cce;
  color: #556;
  padding: 1em;
  border-top: 1px solid #000;
}

.page-footer a, .page-footer a:link, .page-footer a:visited {
  color: #000; text-decoration: none;
}

.page-footer a:hover { text-decoration: underline; }

.page-container {
  position: relative;
}

.page-content {
  background-image: url("img/b-shadow.png");
  background-repeat: repeat-x;
  background-position: 0 0;
  background-color: #ffe;
  color: #334;
  padding-left: 2em;
  margin-right: 300px;
  padding-right: 2em;
  border-right: 1px dotted #000;
  min-height: 600px;
}

.page-links {
  background-image: url("img/b-shadow.png");
  background-repeat: repeat-x;
  background-position: 0 0;
  position: absolute;
  top: 0; right: 0;
  width: 300px;
  font-size: 90%;
}

.page-links-content {
  padding: 0 1em;
}

.page-links .section {
  padding-bottom: 0.2em;
  background-image: url("img/section-sep.png");
  background-repeat: no-repeat;
  background-position: 50% 100%;
}

.page-links .section .title {
  margin-top: 1em;
  font-weight: bold;
  text-shadow: 1px 1px 3px #000;
}

.page-links .section .title:before { content: "» " }

.page-links a, .page-links a:link, .page-links a:visited { color: #8df; text-decoration: none; }
.page-links a:hover { text-decoration: underline; color: #fa2; }

.key {
  padding: 0 3px;
  font-family: monospace;
  font-weight: bold;
  white-space: nowrap;
  color: #000;
  border: 1px solid #aaa;
}

span.key:hover { background-color: #ccf; }

.monospace { font-family: monospace; }

.warn { color: #a00; }

.done { color: #2a2; }

@media print {
  .page-content { margin-right: 0; min-height: none; border-right: none; }
  .page-links { display: none; }
}