html {
  background: url('/images/css/bk_body.gif') top center;
}

body {
  width: 800px;
  margin: 0 auto;
  font-family: Georgia, serif;
}

#container {
  min-height: 100%;
  position: relative;
  background: white url('/images/css/bk_box.gif') top center repeat-y;
  padding: 0 10px;
}

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

a:visited {
  color: #993;
}

a:hover,
a:active {
  color: #c60;
  text-decoration: underline;
}

/* LOGO */

header h1 {
  float: left;
  text-indent: -9999px;
  margin: 10px 0 30px 10px;
}

header h1 a {
  display: block;
  background: url('/images/logo.jpg') no-repeat;
  width: 124px;
  height: 159px;
}

/* TOP TABS */

#tabs {
  float: left;
  position: relative;
  background: url('/images/css/bar.gif') 500px 56px repeat-x;
  height: 75px;
  width: 630px;
  padding-left: 16px;
}

#tabs ul {
  list-style-type: none;
  position: absolute;
  bottom: 19px;
}

#tabs li {
  float: left;
}

#tabs a {
  display: block;
  padding: 0.4em 0.8em 0.4em 0.6em;
  color: #693;
}

#tabs .active,
#tabs .active:hover   { background: #693 url('/images/css/tab_right.gif') no-repeat right top; }
#tabs .active a,
#tabs .active a:hover { background:      url('/images/css/tab_left.gif') no-repeat left top;
  color: white;
}

#tabs li:hover { background:      url('/images/css/tab_right_active.gif') no-repeat right top; }
#tabs a:hover  { background:      url('/images/css/tab_left_active.gif') no-repeat left top;
  color: #c60;
  text-decoration: underline;
}

/* ADS */

#top_banner {
  float: right;
  margin: 16px 84px;
  text-align: center;
}

#bottom_banner {
  margin: 10px 31px;
  padding-bottom: 4em;
  clear: both;
}

/* OUTLINE */

#outline {
  clear: left;
  float: right;
  font-size: 13px;
  width: 140px;
  padding: 0 10px 30px 10px;
}

#outline ol {
  list-style-type: none;
}
#outline li {
  margin-top: 0.4em;
}
#outline ol ol {
  padding-left: 1em;
}

#outline a.active {
  font-style: italic;
  color: #000;
}

#outline a.active:hover,
#outline a.active:active {
  color: #c60;
}

/* CONTENT */

#content {
  clear: left;
  line-height: 1.75;
  padding: 0 10px 10px 10px;
  width: 599px;
  border-right: 1px solid #999;
}

#content ul,
#content ol,
#content p {
  margin-bottom: 1em;
}

#content li { margin-left: 30px; }

#content a {
  text-decoration: none;
  border-bottom: 1px dotted #bbb;
}

#content a:hover, #content a:active {
  border-bottom: 1px solid #c60;
}

h2 {
  font-family: 'Puritan', Helvetica, Arial, sans-serif;
  font-size: 32px;
  line-height: 1;
  color: #000;
  margin-bottom: 14px;
}

h3 {
  font-family: 'News Cycle', Helvetica, Arial, sans-serif;
  font-size: 20px;
  color: #693;
  margin-bottom: 1em;
}

.next {
  font-family: 'Puritan', Helvetica, Arial, sans-serif;
  text-align: right;
  font-size: 24px;
}

/* FOOTER */

footer {
  clear: both;
  position: absolute;
  bottom: 0;
  background: black;
  width: 780px;
  padding: 1em 0;
  text-align: center;
}

footer p {
  font-family: 'Puritan', sans-serif;
  color: #666;
}

footer a:link,
footer a:visited {
  color: #ccc;
  text-decoration: underline;
}

footer a:hover { color: #c60; }


/* SECTION-SPECIFIC */

/* Options comparison */

ul.proList {
  list-style-image: url('/images/css/li_pro.gif');
}
ul.conList {
  list-style-image: url('/images/css/li_con.gif');
}

h3.topLine {
  padding-top: 0.5em;
  border-top: 1px solid #999;
}

/* Images */

.illustration { /* float right by default */
  float: right;
  margin: 0 0 10px 10px;
}
.left {
  float: left;
  margin: 0 10px 10px 0;
}
.quarter { width: 117px; }
.half    { width: 234px; }
.full    { width: 100%;
  float: none;
  margin: 1em 0;
}
.illustration p {
  border-top: 1px dashed #999;
  margin: 8px;
  font-family: 'News Cycle', sans-serif;
  font-size: 15px;
  line-height: 1.4;
}

/* Glossary */

dt { font-weight: bold; margin-bottom: 0.4em; }
dd { margin-bottom: 1em; }
#content dd p { margin-bottom: 0.5em; }

#glossary {
  font-family: 'News Cycle', sans-serif;
  margin: 10px -3px 0 -3px;
}

#glossary li {
  float: left;
  height: 30px;
  width: 30px;
  margin: 3px;
}

#glossary a {
  display: block;
  height: 28px;
  width: 28px;
  border: 1px solid #693;
  text-align: center;
  line-height: 24px;
  font-size: 16px;
  text-decoration: none;
}

#glossary a:visited {
  border: 1px solid #993;
}

#glossary li:first-child {
  width: 66px;
}

#glossary li:first-child a {
  width: 64px;
}

#glossary a:hover,
#glossary a:active {
  border-color: #c60;
}

#glossary .active a {
  background-color: #c60;
  border-color: #c60;
  color: white;
}