body { 
 font-family: Arial,Helvetica,sans-serif; 
  margin: 0; padding: 5px; 
  background: white; color: #333; }

h1 {
  font-size: 1.5em; font-weight: normal;
  color: #3c227b;
}

h2, .question {
  font-weight: bold;
  color: #3c227b;
  border-bottom: 1px solid #3c227b;
  font-size: 1.3em;
}

td h2 {
  margin-top: 0;
}

h3 {
  color: #666;
}

h4 {
  color: #d083c1; /* mauve */  
}

h4.chapters {
  margin-top: 0;
  margin-bottom: -10px;
}

hr {
  margin-left: 5px;
  margin-right: 5px;
  color: #efefef;
}

tr {
  vertical-align: top;
}

.red, .required   { color: red; }

.productpic {
  float: left;
}

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

.hasicon {
  margin-left: 85px;
}

.authorpic {
  float: left; margin-right: 10px; 
  border: 1px solid #666;
}

.learnmore {
  background: url(images/stlogo.jpg) no-repeat;
  padding-left: 35px;
}

.intro {
  font-weight: bold;
}

a img {
  border: none;
}

.floatrightimg {
  float: right; 
  border: 1px solid #a6a6d0;
  margin-left: 15px;
}

.floatleftimg {
  float: left; 
  border: 1px solid #a6a6d0;
  margin-right: 15px;
}

.photoattrib {
  font-size: 0.55em !important;
}

.audiobox {
    border: 1px solid #999; 
    font-size: 80% !important; 
    padding: 5px 5px 5px 20px;
    background: url(images/audio.gif) center left no-repeat;
}

/* Listener's stories */
  .main dl {
    border: 1px solid #d4d4ee; /* pale cornflour blue */ 
    background: #ededee; /* pale blue-grey */ 
    padding: 5px;   
  }

  .main dt {
    text-align: right;
    font-size: small;
    font-weight: bold;
    padding-right: 65px;
  }

  .main dd {
    margin-bottom: 0.5em;
    margin-left: 0;
  }


 /* progress summary report form */
#report label {
  display: block;
  float: left;
  width: 350px;
  padding: 0;
  margin: 5px 0 0; /* set top margin same as form input elements */
  text-align: right;
  font-weight: normal;
}

#report  {  /* set width in form, not fieldset (still takes up more room w/ fieldset width */
  font:80% verdana,arial,sans-serif;
  margin: 0;
  padding: 0;
  min-width: 650px;
  max-width: 750px;
  width: 710px; 
}

#report fieldset {
  border-color: #d4d4ee; /* pale cornflour blue */
  border-width: 1px;
  border-style: solid;
  padding: 10px;     
  margin: 0 0 20px;
  font-weight: bold;
}

#report input, #report textarea {
  margin-bottom: 5px;
  margin-left: 5px;
}

/* FOOTER */
#footer {
  margin-left: auto; margin-right: auto;
  text-align: center;
  font-size: 70%;
} 

#footer li {
  display: inline;
  padding-left: 15px;
}

  /* Social network links in footer */
  #fb {
  background: url(images/icons/facebook15.png) top left no-repeat;
  padding-left: 18px;
  }

  #twitter {
  background: url(images/icons/twitter15.png) top left no-repeat;
  padding-left: 18px;
  }

/* The product category boxes on the main Product page */

.prodfeature {
  border: 1px solid #d4d4ee; /* pale cornflour blue */ 
  background: #ededee; /* pale blue-grey */  
  font-size: 0.8em;  
  padding-left: 5px; padding-right: 5px; 
}

.prodfeature h2  { /* floating heading */
  font: 1.1em Verdana,Arial,Helvetica,sans-serif;
  background: white; 
  /* border: 1px solid #dcd5de; */ /* purple */
  display: inline;
  padding: 2px 5px;
  position: relative; right: -5px; top: -0.7em;
}
  
.prodfeature ul {
  position: relative; top: -1.2em; left: -1em;
  margin-bottom: -10px;
}  
 
.prodfeature a {
  font-weight: normal; text-decoration: underline; 
} 

/* FOR SCREEN */
  
@media screen {

  .halffloat {
  float: left;
  width: 47%;
  margin-left: 15px;
  }	

  /* Neat external-link icon adder */

  a[href^="http:"] {
    background: url(images/newwin.png) right bottom no-repeat;
    padding-right: 20px;
  }
      
  /* HEADER - not shown when printed */
  
  #header {
    background: #7e0051; color: white;
    font-size: 0.8em; font-weight: bold; border: 1px solid #7e0051;
  }
  
  .logo {
   float: left;
   margin-left: 10px; margin-top: 10px; 
  } 

  #sitename {
    font: bold 2.8em Arial,sans-serif;
    margin: 10px 0 0 100px;
    text-shadow: 2px 2px 2px #000;
  }

  #byline {
   margin-left: 100px; padding-bottom: 10px;
   text-shadow: 2px 2px 2px #000;
  } 

 /* 
  #logo  { 
    background: url(images/header.gif) no-repeat; height: 0; overflow: hidden; 
    padding-top: 29px; padding-bottom: 0; margin-bottom: -10px;}
*/	

  /* MAIN MENU - not shown when printed */

  #menu {
    background: url(images/menubg.gif) repeat-x; border: 1px solid #730051;
    display: block; margin-top: 5px; 
    font-size: 0.9em;
  }

  #menu li {
    display: inline; 
  }

  #menu a {
    padding: 0.4em 0.8em;   
    color: white; 
    text-decoration: none; font-weight: bold;
    text-shadow: 2px 2px 2px #000;
  }

  #home .home, #overview .overview, #benefits .benefits, #products .products, 
  #research .research, #nutrition .nutrition, #faq .faq, #contact .contact, 
  #menu a:hover {
    color: #e3dc34; /* gold */ 
  }

  /* CONTENT AREA */

  .hasfeatures { /* i.e. has a right column */
    margin-right: 12em;
  } 
 
  #leftcol { /* where the secondary navigation goes - hidden when printed */
    float: left; margin-right: 20px; 
    width: 12.5em;
  }

  .main {
    border: 1px solid #d4d4ee; /* pale cornflour blue */
    margin-top: 15px; margin-left: 13em; 
    padding-right: 1em; padding-left: 1em; 
  }
  
  .main a {
    color: #7e0051;
    font-weight: bold;
    text-decoration: none;
  }

  .main a:hover {
    text-decoration: underline;
  }
 
  .main p {
    text-align: justify;
  }

  .main p, .main li, .main dd {
    font: 0.95em/1.3em Verdana,Arial,sans-serif;
  }
  
  .col1 {
    margin-right: 55%;
  }

  .col2 {
    margin-left: 50%;
  }

  .top3points {
    margin-top: -3.9em;
  }   
  .intro {
    font-size: 1.05em !important; 
  }

  .highlightbox {
    border: 1px solid #d4d4ee; /* pale cornflour blue */ 
    background: #f3f3ff; /* pale blue */ 
    padding: 10px;
  }

  .productdetail {
    margin-left: 210px;
  }

/* Cart buttons */

a.cartbutton {
  color: #f1e9f4; /* pale purple */
  background: #7e0051; /* dark purple */
  font: 1em Arial,sans-serif;
}

/* Share on Facebook button */
.fb_share_button { 
  display: inline-block; 
  float: right;
  padding:1px 20px 0 5px; 
  margin-top: 20px;
  height:15px; 
  font-weight: normal;
  font-size: 0.7em;
  border:1px solid #d8dfea; 
  background: url(images/facebook_share_icon.gif) no-repeat top right !important; 
} 

.fb_share_button:hover { 
  color:#3c227b; 
  border-color:#295582; 
  text-decoration:none !important; 
}

}

/* FOR PRINTING */
  
@media print {

  #header, #menu, #leftcol, .fb_share_button, object, #orderforms, #footerlinks,
  #socialnet, #valid { 
    display: none; 
  }
		
  #main { 
    margin: 0; 
  }

  #halffloat {
    float: none !important;
    width: inherit;
  }

 .productdetail {
    margin-left: 10px;
  }

}

/* Feature boxes in side columns */

.feature {
  border: 1px solid #dcd5de; /* pale grey */ 
  margin-top: 25px; 
  background: #f1e9f4; /* mauve */  
  font-size: 0.8em;
  color: #333;  
}

.feature h3  { /* floating heading */
  font: bold 0.9em Verdana,Arial,Helvetica,sans-serif;
  background: white; color: #7e0051; /* purple */
  border: 1px solid #dcd5de; /* purple */
  display: inline;
  padding: 2px 5px;
  position: relative; right: -5px; top: -0.7em;
}
  
.feature ul {
  position: relative; top: -1.2em; left: -1em;
  color: #730051; /* purple */
  margin-bottom: -10px;
}  

.feature li {
  margin-bottom: 0.4em;
  margin-right: -0.8em;
}

.feature p {
  position: relative; top: -1.2em;
  padding: 0 5px;
  margin-bottom: -5px;
}

.feature img {
  display: block; 
  margin-left: auto; margin-right: auto;
  padding-bottom: 10px;
}

.feature a:hover {
  color: #e139c3; /* pink */
}

#rightcol { /* this does have info worth printing */
  float: right; margin-left: 20px;
  width: 11.5em;
}

.firstitem { /* the first feature box needs a different top margin */
  margin-top: 15px;
}