/*

  "Segments" are portions of the page like the "Email" or "Phone/Fax" portions
  of the Contact page.

  "Asides" are notes on side, like the main page glass descriptions.
  (If these contain citations we should be using the CITE tag in there.)

  "Separators" are the thin line between the title bar of the page and the
  nav/content area.

*/

body {
  color: black;
  background-color: white;
/* For the SSL nonsense we need a fully-qualified URL.
  background-image: url(images/background.gif);
*/
  background-image: url(http://www.crystalprotein.com/images/background.gif);
  margin: 0;
  padding: 0;
  height: 100%;
}

html {
  height: 100%;
}

table {
  border-collapse: collapse;
}

table.segment {
  margin-bottom: 1em;
}

table#whole_page {
  width: 100%;
  height: 100%;
}

table#whole_page td {
  padding: 0;
}

a:link        { color: rgb(204, 204, 255); }
a:visited     { color: rgb(194, 194, 245); }
a:hover       { color: rgb(170, 170, 250); }
a:active      { color: rgb(255, 255, 255); }

.nav a:link        { color: rgb(134, 134, 185); }
.nav a:visited     { color: rgb(124, 124, 175); }
.nav a:hover       { color: rgb(100, 100, 180); }
.nav a:active      { color: rgb(185, 185, 185); }

p, address, q, h1, h2, h3 {
  font-family:  Verdana, Arial, Helvetica, sans-serif; 
  font-style: normal;
  color: white;
  font-size: .9em;
  margin: .5em;
}

h1, h2, h3 {
  font-weight: bold;
}

q {
  display: block;
  padding-left: 2em;
  padding-right: 2em;
  font-style: italic;
}

body {
  font-family:  Verdana, Arial, Helvetica, sans-serif; 
}

td.nav {
  background-color: rgb(238, 238, 238);
  height: 100%;
  width: 135px;
  vertical-align: top;
}

td.nav p             { margin: 6px 0 6px 6px;         }
td.nav p, td.nav div { font-size: .75em; color: black }

img.segment_header {
  padding: 0 .25em 0 .25em;
}

img.photo {
  padding: .25em;
}

hr { width: 90%; margin: .5em auto }
hr.con_float {
  margin: .4em .5em;
}
html>body hr.con_float {
  width: auto;
}

td.content_area {
  color: white;
  background-color: black;
  vertical-align: top;
  padding: 1em;
  height: 100%;
}

.content_area p, .content_area div {
  color: white;
  background-color: black;
}

.content_area table {
  margin-left: .5em;
  margin-right: .5em;
}

/*
.content_area a {
  color: #ccccff;
  background-color: black;
}
*/

.separator_row {
  background-color: black;
}

.aside {
  font-style: italic;
}

/* Some "asides" are set off from the rest of the text (e.g. on homepage). */
.further_aside {
  padding: 1.5em;
  padding-bottom: 0;
  margin-bottom: 0;
}

/* use only when necessary */
.right  { text-align: right;  }
.left   { text-align: left;   }
.center { text-align: center; }

ul {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: .9em;
  line-height: 1.6em;
  list-style-type: none;
  margin: 0 .4em .1em .4em;
  padding: 0;
}

a img {
  border: none;
}

div.segment {
  clear: both;
  margin: 1em .5em;
  padding-bottom: .5em;
}

/* Internet Explorer, stylin' the form. */
form {
  margin: 0;
}

div.notice {
  margin: .5em auto .5em auto;
  text-align: center;
  font-size: .9em;
  padding: 1.5em;
}

.notice span {
  border: medium ridge red;
  padding: .5em;
}

.notice_block, table.notice_block {
  text-align: center;
  margin: .8em auto .8em auto;
  clear: both;
}

.notice_block table {
  margin: auto;
}

.notice_block .notice_child {
  padding: .4em;
  font-size: .9em;
  border: medium ridge gray;
}

.notice_block.emphatic .notice_child {
  border: medium ridge red;
}

.content_area .block_center {
  margin: 0 auto 0 auto;
}

.d {
  border: thin solid red;
}

.thanks {
  text-align: center;
  margin: 1em;
}

.float_text p.image_note {
  font-size: .75em;
  text-align: center;
}

.shim {
  clear: both;
}

.or {
  word-spacing: .75em;
  font-style: italic;
}

.answer {
  padding: .75em;
}

.answer p, p.answer {
  font-size: .8em;
}

table.drawing_styles {
  width: 75%;
}

table.drawing_styles td {
  width: 20%; /* Four drawing styles (in molecule order form). */
}

table.drawing_styles img {
  margin: auto;
}

div.options {
  padding: .5em;
}

div.warning p {
  border: medium solid red;
  width: 50%;
  padding: .5em;
}

/*
  Internet Explorer, graciously clearing your lead if you specify substantial width.
  (Neighborhood of 65%.  Suspect it's because the float messes with IE's head.
  Forget the width %, then.
  
*/
.citation {
  font-style: italic;
  padding-left: 1em;
  padding-right: 1em;
/* Great, now I have to cope with IE7 bugs, too.  EVERYONE, QUICK -- STOP USING IE!  */
  overflow: auto;
}

p.copyright {
/* Wait for IE audience to be capable.
  position: fixed;
*/
  font-size: .8em;
  margin-top: 1em;
  float: right;
}

.quote_group {
  width: 80%;
  margin: auto;
}

hr.quote_separator {
  width: 10%;
}

ul.bulleted {
  list-style-type: square;
  margin: .25em 2em 1em 2em;
}

p.attribution {
  text-align: right;
}

img.inset {
  margin-bottom: 0em;
  margin-right: 2.5em;
  margin-left: 1em;
  float: right;
}

td.drawing_style_cell {
  vertical-align: top;
}

.block_center {
  margin-left: auto;
  margin-right: auto;
}