/********************************************************************************
Sitewide defaults 
********************************************************************************/

html {  /* force scroll bars to prevent lateral shift */
  overflow-y: scroll;
}

body {
  background:#fff url(bkgnd.png) repeat-x;
  font-family: "Caudex", Georgia, "Times New Roman", Times, serif;
  font-size: medium;
  width: 800px;
  margin: 10px auto 0 auto;
  padding: 0;
}

p, ul li {
  margin: 0.5em 0;
  line-height: 1.3em;
}

h1 {
  font-family: "PT Sans Narrow", "Arial Narrow", sans-serif;
  font-size: xxx-large;
  color: #333300;
  margin: 0.4em 0;
}

h2 {
  font-family: "PT Sans", "Arial", sans-serif;
  font-size: large;
  color: #333300;
  margin: 0.7em 0;
}

h3 {
  font-family: "PT Sans", "Arial", sans-serif;
  font-size: medium;
  color: #333300;
  margin: 0.5em 0;
}

a {
  text-decoration: none;
}

img {
  border: none; /* to keep IE 8 behaving */
}

a:link, a:visited {
  color: #933300;
}
h1 a:link, h2 a:link, h3 a:link, h1 a:visited, h2 a:visited, h3 a:visited {
  color: #733300;
}
a:hover, h1 a:hover, h2 a:hover, h3 a:hover {
  color: #B33300;
}
a:active, h1 a:active, h2 a:active, h3 a:active {
  color: #F33300;
}
a h1, a h2, a h3, a h4 {
  /* anchors should go inside headings, this will flag backwards examples */
  color: #0F0;
} 

.displace { /* to move things offscreen */
  position: absolute;
  left: -5000px;
  }

sup {
  font-size: 70%;
}

blockquote {
  background: #EEE;
  border: #DDD 2px solid;
  padding: 0.5em 1.0em;
  margin: 1.0em 2.0em;
}

.footnote {
  font-size: smaller;
}

p.next {
  float: right;
  margin-bottom: 1.0em;
}

p.prev {
  float: left;
  margin-bottom: 1.0em;
}

ul {
  padding-left: 40px;
  list-style-image: url(diamond_13.png);
  list-style-type: square;
}


/********************************************************************************
Page layouts
********************************************************************************/

.clear {
  clear: both;
}

.single-column-full {
  text-align: left;
  clear: both;
  margin-bottom: 1.0em;
}

.single-column-inset {
  text-align: left;
  padding: 0 50px;
  margin-bottom: 1.0em;
}

/*
Two-column layouts should start with the left column
*/
.two-column-left {
  text-align: left;
  clear: both;
  float: left;
  width: 390px;
  margin-right: 0;
  padding-right: 9px;
  border-right: 1px #AFB9FF solid;
  margin-bottom: 1.0em;
}

.two-column-right {
  text-align: left;
  float: right;
  width: 390px;
  margin-left: -1px;  /* superimposes the two column's borders */
  padding-left: 10px;
  border-left: 1px #AFB9FF solid;
  margin-bottom: 1.0em;
}


/********************************************************************************
Images
********************************************************************************/

/*
Floated images without captions. For theee, simply apply the class to the image itself:

<img src="..." class="image-left" />

*/

.image-left {
  float: left;
  margin-right: 10px;
}

.image-right {
  float: right;
  margin-left: 10px;
}

/*
Centered image, no caption, nothing on the sides. For this, apply the class to a div wrapped around the image and set the width in the attributes to match watch you set for the image, e.g., 

<div class="image-center" style="width: 400px">
  <img src="..." width="400"/>
</div>

*/

.image-center {
  margin: 8px auto 8px auto;
}

/*
For captioned images, you should set the width explicitly in the attributes using inline CSS to match the size of the enclosed image. That will force the caption to word-wrap properly to that width. So, a typical usage would be:

<div class="captioned-image-right" style="width: 400px">
  <img class="captioned-image-image" src="..." width="400" />
  <div class="captioned-image-caption">
    caption text
  </div>
</div>

Note that if the image is particularly narrow, you can set the outermost div to be wider than the image; the caption will fill the width of the box, and the image will be centered over the caption.
*/
.captioned-image-inline {
  display: inline-block;
  vertical-align: top;
  margin: 2px;
  border: 2px solid #D3D3D3;
}

.captioned-image-left {
  float: left;
  margin: 8px 8px 10px 0;
  border: 2px solid #D3D3D3;
}

.captioned-image-right {
  float: right;
  margin: 8px 0 8px 10px;
  border: 2px solid #D3D3D3;
}

.captioned-image-center {
  margin: 8px auto 8px auto;
  border: 2px solid #D3D3D3;
}

.captioned-image-image {
  display: block;
  margin: auto auto;
}

.captioned-image-caption {
  font-size: 90%;
  padding: 0.3em;
}

/********************************************************************************
Footer
********************************************************************************/

@media print {
  .footer {
    display: none;
  }
}

.footer-bar {
  clear: both;
  width: 800px;
  height: 40px;
  background: #4D5470;
  border-top: 2px solid #000;
  margin-top: 10px;
}

.footer_text {
  clear: both;
  text-align: center;
  font-size: 80%;
  padding: 0.3em 0;
  margin-bottom: 10px;
  background-color: #DDD;
  border-radius: 0 0 10px 10px;
}