@media all
{
  body             { font-family: Arial, Verdana, Tahoma, sans-serif; font-size: 12pt; text-align: justify; }                
  
  /* Headings and paragraphing */
  h1               { font-weight: bold; font-size: 18pt;                     padding-left: 5px;  }
  h2               { font-weight: bold; font-size: 16pt; font-style: italic; padding-left: 10px; }
  h3               { font-weight: bold; font-size: 14pt; font-style: italic; padding-left: 15px; }                   
  p                {                                                         padding-left: 20px; } 
  blockquote       {                    font-size: 10pt;                                         }
  
  /* Images */
  img              { border-style: solid; border-width: 1px; color: #3311AA; }

  /* Preformatted text and code */
  code             { font-family: "Courier New", monospace; font-size: 10pt; }
  pre              { margin: 5px 5px 0px 30px; padding: 2px 5px 0px 5px; font-family: "Courier New", monospace; font-size: 10pt; color: black; background-color: white; }
  pre.out          { font-style: italic;}
  pre.in           { font-weight: bold; }
  
  /* Lists */
  ul               { margin: 0px 5px 0px 30px; }
  ol               { margin: 0px 5px 0px 30px; }
  li               { margin-left: 20px; padding-bottom: 10px; }

  /* Tables */
  table            { text-align: left;   margin-left: 30px;  border-collapse: separate; border-width: 5px; clear: both; }
  table td         { background-color: white; }
  table td p       { padding-left: 5px;  margin-left: 5px;   font-size: 10pt; }
  table th         { background-color: white; }
  table th p       { padding-left: 5px;  margin-left: 5px;   font-size: 12pt; }
  
  /* Forms */
  table.form       { text-align: center; margin-left: 100px; font-size: 10pt; }
  table.form td    { background-color: #DDDDDD; }
  input            { margin: 5px; }

  /* Unicode aware sections and similar */
  p.equation       { font-family: "Arial Unicode MS", "Lucida Sans Unicode", Arial, sans-serif; font-size: 14pt; padding-left: 40px; }
  span.equation    { font-family: "Arial Unicode MS", "Lucida Sans Unicode", Arial, sans-serif;                                      }
  span.ipa         { font-family: "Arial Unicode MS", "Lucida Sans Unicode", Arial, sans-serif;                                      }
  p.seq            { font-family: "Courier New", "Courier", monotype;                           font-size: 14pt; padding-left: 40px; }
}

@media screen
{
  body             { background-color: white; color: #3311AA; margin: 0px; }

  /* Named divisions */
  #nav             { position: absolute; top: 0px;   left: 0px;   width: 170px;                padding: 160px 0px 20px 0px;  background: white url( "../images/root.png" ) no-repeat center top; border-style: groove; border-width: 1pt; }
  #title           { position: absolute; top: 0px;   left: 175px; width: 900px; height: 120px; padding: 0px  20px 20px 5px;  clear: right; background-color: #CCCCCC; border-style: groove;  border-width: 1pt; }
  #main            { position: absolute; top: 145px; left: 175px; width: 900px;                padding: 0px  20px 20px 5px; background-color: #DDDDDD; border-style: groove;  border-width: 1pt; }

  #title p         { font-weight: bold; font-size: 32pt;  padding-top: 20px;                                         }
  #nav h1          { font-size: 16pt;                     padding-top: 10px; text-align: right; padding-right: 10px; }
  #nav h2          { font-size: 14pt;                     padding-top: 10px; text-align: right; padding-right: 10px; }
  #nav p           { font-size: 12pt; font-style: italic;                    text-align: right; padding-right: 10px; }
  #nav a           { color: #3311AA; }
  #nav img         { border: none; }

  #popup           { width: 85%; padding-bottom: 75px; }
  #popup table     { background-color: #DDDDDD; }

  /* Divisions for positioning images and text */
  div.container    { width: 100%;  float: left;   margin: 20px 0px 20px 0px;                                clear: both; } 
  div.wimg         { width: 100%;                 margin-top:   20px;  font-size: 10pt; text-align: center; clear: both; } /* Wide images */
  div.rimg         { width: 45%;   float: right;  margin-left:  20px;  font-size: 10pt; text-align: center;              } /* Right floated images */
  div.limg         { width: 45%;   float: left;   margin-right: 20px;  font-size: 10pt; text-align: center;              } /* Left floated images */
  div.bimg         { width: 45%;   float: left;   margin-right: 20px;  font-size: 10pt; text-align: center;              } /* Two column images */
  div.thumb        { width: 20%;   float: left;   margin-left:  20px;  font-size: 10pt; text-align: center;              } /* Small images */

  /* Anchors */
  a                { text-decoration: none; }
  a:link           { color: black; }
  a:visited        { color: #444444; }
  a:active         { color: #E78C87; }
  a:hover          { color: #E78C87; }
}

@media print
{
  body             { background-color: white; color: black; }

  #title p         { font-weight: bold; font-size: 20pt; text-align: center; }
  #nav             { display: none; }

  /* Print-specific paragraphs and anchors */
  p                { padding-left: 0px; }
  a                { text-decoration: underline; color: black; }
}