/*******************************************************************
 * Reset pre-formatted styles to null values.
 * This will help avoid browser differences and
 * give us complete control over the final appearance.
 *******************************************************************/

body, h1, h2, h3, h4, h5, h6, p, ol, ul, form, blockquote
{
 padding: 0;
 margin: 0;
}

h1, h2, h3, h4, h5, h6, pre, code
{
 font-size: 100%;
}

a
{
 text-decoration: none;
}

img
{
 border: none;
}

/*******************************************************************
 * Define the basic appearance of the body, major tags, etc.
 *******************************************************************/

body
{
 background-color: #ffffff;
 margin: 10px;
 margin: 0;
 color: #000000;
 font: normal 100% Georgia, "Times New Roman", Times, serif;
}

h1, h2, h3, h4, h5, h6
{
 color: #000000;
 font: bold 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
 line-height: 1.1;
 margin: 1em 0 0.5em 0;
 page-break-after: avoid;
}

/*
 * The typical page layout for this site does not have
 * need (or room) for a large H1 header.  Instead, make
 * H1 and H2 look identical, and promote one of the usual
 * H2 tags to be H1....
 */
h1, h2
{
 font-size: 180%;
}

h3
{
 font-size: 120%;
 padding-bottom: 0.1em;
 border-bottom: 1px solid black;
}

p
{
 margin: 0 0 0.5em 0;
}

ul, ol
{
 margin: 0.5em 1.5em;
}

a:link, a:visited
{
 text-decoration: none;
 color: #0000FF;
}
a:hover
{
 text-decoration: underline;
 color: #FF0000;
}

/*******************************************************************
 * Define standard elements used throughout the site.
 *******************************************************************/

/*
 * The wrapper contains everything within the web page,
 * including header and footer.  This is useful for
 * declaring maximum width, margins, etc.
 */
#wrapper
{
 /* Larger widths could overly stretch our flexible layout. */
 max-width: 1600px;
}

/*
 * The header displays the logo image and welcome message.
 */
#header
{
 margin: 10px;
 /* Left margin is logo image width + 20px padding. */
 margin-left: 130px;
 /* Minimum height is logo image height. */
 min-height: 110px;
 font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
 font-size: 120%;
 font-weight: bold;
 line-height: 1.1;
 letter-spacing: -0.5px;
}

#header #welcome
{
 font-size: 200%;
}

/*
 * Ideally, the logo would be floated.  However, due to an
 * Internet Explorer bug, divs with floated contents
 * (the logo) larger than the rest of the content (the title)
 * create spacing bugs.  The best way I found to avoid this
 * was to give the content a large left margin (above) and
 * position the image in the resulting empty space.
 */
#header #logo
{
 position: absolute;
 left: 10px;
 top: 10px;
}

/*
 * The navigation section displays quick links to the major web pages.
 * They are implemented by HTML <ol> lists.
 */
.navigation
{
 margin: 10px 0;
 padding: 0;
}

.navigation ul
{
 margin: 0;
 padding: .3em 0;
 text-align: center;
}

.navigation li
{
 list-style-type: none;
 display: inline;
}

.navigation a
{
 color: black;
 text-decoration: none;
 margin: .3em 0.5em;
 padding: 0em 0.5em;
 /* IE BUG: See below --> */
 /* border: 2px solid transparent; */
}
/* Use transparent borders only in REAL web browsers. */
html>body .navigation a { border: 2px solid transparent; }
/* Workaround an IE bug that blackens transparent borders: */
* html .navigation a { border: 2px hidden transparent; }

.productnav a
{
 /* IE BUG: See below --> */
 /* border: 1px solid transparent; */
}
/* Use transparent borders only in REAL web browsers. */
html>body .navigation a { border: 1px solid transparent; }
/* Workaround an IE bug that blackens transparent borders: */
* html .navigation a { border: 1px hidden transparent; }

.navigation a:hover
{
 color: black;
 background-color: #fd2419;
}

.sitenav
{
 background-color: #FFA914;
 font: bold 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
}

.productnav
{
 background-color: #99AAFF;
 font: bold 80% "Trebuchet MS", Arial, Helvetica, sans-serif;
}

body#frontpage a#frontlink,
body#products a#productslink,
body#forum a#forumlink,
body#mailing a#mailinglink,
body#biblio a#bibliolink,
body#archives a#archiveslink
{
 border: 2px solid black;
}
body#ocj1 a#ocj1link,
body#tite a#titelink,
body#bfg a#bfglink,
body#cac a#caclink
{
 border: 1px solid black;
}

#main
{
 margin: 2em 20px;
}
 
/*
 * The footer displays copyright and address information.
 * The text is contained inside an HTML <address> tag.
 */
#footer
{
 clear: both;
 border-top: 1px solid black;
 margin: 0 10px;
 padding: 0.5em 0;
 font-size: 80%;
 letter-spacing: 1px;
 word-spacing: 2px;
}

/*
 * The button is a link with an outward relief.
 */
a.button
{
 border-style: outset;
 padding: 0.2em 1em;
 line-height: 3em;
 background-color: #EEEEFF;
}

.nowrap
{
 white-space: nowrap;
}

.seriffont
{
 font-family: Georgia, "Times New Roman", Times, serif;
}

.sansfont
{
 font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}

.title
{
 text-align: center;
 margin: 20px;
 border: none;
 background-color: transparent;
}

.printform
{
 margin: 20px 0;
 padding: 15px;
 border: 1px dashed black;
 page-break-inside: avoid;
}

/*******************************************************************
 * Define elements used by our dialog type forms.
 *******************************************************************/

.dialog
{
  color: black;
  background-color: #EEF;
  border: outset #EEF;
  padding: 10px 20px 10px 20px;
  margin: 50px 100px 50px 100px;
}

.dialog h1, .dialog h2, .dialog h3
{
  border: none;
  background-color: transparent;
  margin: 0 0 .6em 0;
  padding: 0;
}

.dialog fieldset
{
  border: none;
  padding: 0;
  margin: 0;
}

.dialog .field
{
  margin: .5em 0;
}

.dialog .label
{
  float: left;
  width: 10em;
  font: 90% Arial, Helvetica, sans-serif;
  margin-right: 1em;
  clear: left;
}

.dialog .radio
{
  font: 90% Arial, Helvetica, sans-serif;
}

/*******************************************************************
 * Define custom elements used on specific pages in the site.
 *******************************************************************/

/*-------------------------
  Front page elements.
 -------------------------*/

#frontpage #main
{
 margin: 1em 20px 0 20px;
}

#frontpage #column1
{
 float: left;
 width: 65%;
}

#frontpage #column2
{
 float: right;
 width: 30%;
 border-left: 1px solid black;
 padding-left: 20px;
}

#featured
{
 margin: 1em 0 2em 0;
}
#featured h3
{
 margin: 1em 0 0.5em 0;
 border: 0;
}
#featured p
{
 margin: 0.2em 0 0.4em 0;
}

#news
{
 margin: 2em 0 0 0;
}
#news h3
{
 margin: 1em 0 0 0;
 border: 0;
}
#news p
{
 margin: 0.2em 0 0.4em 0;
}
.newsdate
{
 font-size: 90%;
 white-space: nowrap;
}

#today, #where, #awards, #mission, #newsletter, #links
{
 margin: 0em 0 2em 0;
}

#today
{
 border: 1pt solid #9999FF;
 background-color: #DDDDFF;
 padding: 0.5em;
 color: #000066;
}
#today h2
{
 margin: 0 0 0.5em 0;
 color: #000066;
}

#links ul
{
 padding: 0;
 margin: 0 0 0 1em;
}
#links li
{
 font: normal 120% "Trebuchet MS", Arial, Helvetica, sans-serif;
 list-style-type: none;
 padding: 0;
 margin: 0;
}

/*-------------------------
  Product page elements.
 -------------------------*/

#products h1,
#products h2
{
  margin: 1em 0 0.5em 0;
}
#products h3
{
}

#products p
{
  margin-left: 30px;
}

/* An individual product. */
#products .item
{
 clear: both;
 margin: 1.5em 50px;
}

/* An image of a boxcover, 200x255 max */
#products .item .boxcover
{
 float: left;
 width: 210px;
}
#products .boxcover img
{
 border: 2px solid transparent;
}
#products .boxcover img:hover
{
 border: 2px solid red;
}
/* Descriptions with a box cover. */
#products .item .desc
{
 margin-left: 220px;
 min-height: 260px;
}

/* Descriptions without a box cover. */
#products .item .desc2
{
}

/* Add padding to space out rows of buttons. */
#products a.button
{
 margin-right: 1em;
}

/*-----------------------------
  Bibliography page elements.
 -----------------------------*/

#biblio #main
{
 margin: 1em 2em 2em 2em;
}

#biblio h1,
#biblio h2
{
 font: bold 120% Georgia, "Times New Roman", Times, serif;
 margin: 2em 0 1em 0;
}

#biblio #main li
{
 font: normal 90% Georgia, "Times New Roman", Times, serif;
 margin: 1em 0;
}

/*-----------------------------
  Specific product pages.
 -----------------------------*/

/*
 * Any pages using product body/side divisions
 * should also change the left/right margins to 0,
 * as below.
 */
#productbody
{
 float: right;
 width: 65%;
 margin-right: 5%;
 margin-bottom: 2em;
}

#productside
{
 float: left;
 width: 30%;
 text-align: center;
 margin-bottom: 2em;
}
#productside-inner
{
 max-width: 300px;
 margin-left: auto;
 margin-right: auto;
}

#productbody li
{
 list-style-type: square;
 margin: 0.5em 0;
}

.product-contents
{
 float: left;
}
.product-examples
{
 float: left;
 text-align: center;
 margin: 20px;
}

#product-discussion
{
 margin: 25px 50px;
 padding: 0.25em 1em;
 border: 1px dashed black;
}

#product-awards
{
 margin: 25px 50px;
 padding: 10px;
 border: 1px solid #CCCC00;
 background-color: #FFFFCC;
}

#product-downloads
{
 margin: 25px 50px;
 border: 1px solid black;
 background-color: #CCFFFF;
}
#product-downloads h3
{
 margin: 1em 0 0 0;
 border: none;
}
#product-downloads li
{
 margin: 1em;
 list-style-type: none;
 font: normal 90% "Trebuchet MS", Arial, Helvetica, sans-serif;
}

/*
 * Since we are limiting the pixel width of the product sidebar,
 * we don't want the "#main" division's margins to interfere
 * with our other calculations used to center elements.
 * Basically, any page that uses product body/side divs
 * should be listed here.
 */
#tite #main,
#bfg #main,
#cac2 #main
{
 margin-left: 0;
 margin-right: 0;
}

/*
 * Since this page uses an image as its title, we have to make
 * the H1 tag look like part of the body text that follows.
 */
#tite h1
{
 font: bold 100% Georgia, "Times New Roman", Times, serif;
 margin: 0;
}
#tite p
{
 margin: 0 0 1em 0;
}

#bfg h1
{
 font: bold 400% "Times New Roman", Times, serif;
 font-variant: small-caps;
 line-height: .80;
 margin: 0.25em 0 0.25em 0;
}

#oob h3
{
 border: 0;
}

#cac #main
{
 width: 952px;
 margin-right: auto;
 margin-left: auto;
}

#printorder h1
{
 margin: 0 0 0.5em 0;
}
#printorder h3
{
 border: 0;
}


#privacy #main
{
 margin: 2em;
}
#privacy ol
{
 list-style-type: decimal;
}
#privacy ol ol
{
 list-style-type: lower-alpha;
}
#privacy p
{
 margin: 1em;
}

#paypalorder h1,
#paypalorder h2
{
 margin: 1em 0 0.5em 0;
 padding: .3em .4em;
 border: 1px solid #00FF00;
 background-color: #DDFFDD;
}
#paypalorder h3
{
 margin: 1em 0 0.5em 0;
 padding: .2em .3em;
 border: 1px solid #00FF00;
 background-color: #DDFFDD;
}
#paypalorder .h3ship
{
 font-size: 70%;
}
#paypalorder h4
{
 margin: 0.3em;
 margin-bottom: 1em;
 padding: 0.2em .3em;
 border: 1px solid #AAAAFF;
 background-color: #DDDDFF;
}
#paypalorder p
{
 margin: 0 50px 1em 50px;
}
#paypalorder .product
{
 margin: 0 50px;
}
#paypalorder .delivery
{
 margin: 20px 50px;
 padding: 0.3em;
 background-color: #EEEEFF;
 border: 1px solid black;
}

/*******************************************************************
 * Special overrides for printing.
 *******************************************************************/

@media print
{

  body
  {
   font-size: 90% !important;
  }

  #header
  {
    margin-left: 100px;
    min-height: 90px;
  }
  #header #logo
  {
   width: 80px;
   height: 80px;
  }
  #header #welcome
  {
   font-size: 120% !important;
  }

  .navigation
  {
   display: none !important;
  }

  #main
  {
   margin: 2em 0 !important;
  }

}

/*******************************************************************
 * All done!
 *******************************************************************/