/* The attribute "text-align: center;" in the body definition, and the attribute 
   "text-align: left;" in the div.page definition are a work-around for a bug in 
   internet explorer with centering the page in the window. */
   
body { margin: 0; padding: 0px; background-image: url('images/background.jpg'); }

div.page { position: relative; margin-left: auto; margin-right: auto; margin-top: 0px; width: 959px; }

p, ul, ol, li, h3, h4, h5, h6 { padding: 0px; 
  margin-left: 0px; margin-right: 0px; margin-top: 6px; margin-bottom: 0px; }

ul { list-style-position: outside; list-style-type: disc;    margin-left: 15px; padding-left: 1px; }
ol { list-style-position: outside; list-style-type: decimal; margin-left: 24px; padding-left: 3px; }

img { border-width: 0px; border-spacing: 0px; padding: 0px; margin: 0px; }

table { border-width: 0px; border-spacing: 0px; padding: 0px; margin: 0px; }

td { vertical-align: top; padding: 0px;
  margin-left: 4px; margin-right: 4px; margin-top: 1px; margin-bottom: 1px; }

h1 { font-size: 18pt; font-weight: bold; margin-top: 0px; }
h2 { font-size: 16pt; font-weight: bold; margin-top: 0px; }
h3 { font-size: 14pt; font-weight: bold; }
h4 { font-size: 12pt; font-weight: bold; }
h5 { font-size: 10pt; font-weight: bold; }
h6 { font-size: 10pt; font-weight: normal; }

h1, h2, h3, h4, h5, h6 { font-family: 'trebuchet ms', arial, helvetica, sans-serif; color: black; }

body, p, td, ul, ol, li { 
  font-family: 'trebuchet ms', arial, helvetica, sans-serif; font-size: 10pt; color: white; }

p, li { line-height: 18px }

p.menu        { text-align: center; font-weight: bold; }
p.nl          { text-align: right;  font-weight: bold; margin-top: 0px; }
p.en          { text-align: left;   font-weight: bold; margin-top: 0px; }
p.source      { font-size: 8pt; line-height: 17px; margin-top: 4px; color: #AAAAAA; }
p.description { font-size: 8pt; line-height: 17px; margin-top: 0px; color: #BF9452; }
p.goldnote    { font-size: 8pt; margin-top: 0px; color: #FDE798; }

a.intern:link    { color: #FADD9F; text-decoration: none }  /* unvisited link  */
a.intern:visited { color: #FADD9F; text-decoration: none }  /* visited link    */
a.intern:hover   { color: black }                           /* mouse over link */
a.intern:active  { color: black }                           /* selected link   */

a.extern:link    { color: #FDE798; text-decoration: none }  /* unvisited link  */
a.extern:visited { color: #FADD9F; text-decoration: none }  /* visited link    */
a.extern:hover   { color: black }                           /* mouse over link */
a.extern:active  { color: black }                           /* selected link   */


div.photoolmec { position: absolute; left:   0px; top: 0px; width: 303px; height: 576px; 
                 background-image: url('images/jaguar_man_on_feathers.jpg'); }
div.photomaria { position: absolute; left: 656px; top: 0px; width: 303px; height: 576px; }
div.maskleft   { position: absolute; left:   0px; top: 0px; width: 176px; height: 576px;
                 background-image: url('images/featherback_strip.jpg'); }
div.maskright  { position: absolute; left: 783px; top: 0px; width: 176px; height: 576px;
                 background-image: url('images/mask_044.jpg'); }

div.goldmask   { position: absolute; left: 176px; top: 0px; width: 783px; height: 576px;
                 background-image: url('images/gold_foil_background.jpg'); }
div.goldolmec  { position: absolute; left: 303px; top: 0px; width: 656px; height: 576px;
                 background-image: url('images/gold_foil_background.jpg'); }
div.goldmaria  { position: absolute; left:   0px; top: 0px; width: 656px; height: 576px;
                 background-image: url('images/gold_foil_background.jpg'); }

div.bluebar    { position: absolute; left: 518px; top: 80px; width: 265px; height: 14px;
                 background-image: url('images/blue_bar.jpg'); }
div.bluemaria  { position: absolute; left:   0px; top: 80px; width: 265px; height: 14px;
                 background-image: url('images/blue_bar.jpg'); }

/* textmask1 and textmask2 are set to a width of 500 to allow for browser inconsistencies
   in displaying fonts, but the actual width used is 452. Similarly textrela1 and textrela2 
   are set to a width of 417, while only 369 is used and textmaria1 and textmaria 2 are set 
   to a width of 374, while only 334 is used. */

div.title      { position: absolute; left:  50px; top:  15px; width: 563px; height:  35px; }

div.textindex  { position: absolute; left:  50px; top: 125px; width: 380px; height: 413px; }
div.textmask1  { position: absolute; left: 265px; top: 125px; width: 500px; height: 413px; }
div.textmask2  { position: absolute; left: 265px; top: 143px; width: 500px; height: 395px; }
div.textrela1  { position: absolute; left: 190px; top: 125px; width: 417px; height: 413px; }
div.textrela2  { position: absolute; left: 190px; top: 143px; width: 417px; height: 395px; }
div.textmaria1 { position: absolute; left: 275px; top: 123px; width: 374px; height: 413px; }
div.textmaria2 { position: absolute; left: 275px; top: 141px; width: 374px; height: 395px; }

/* div.scrolling1 is meant to be used inside div.textmask1 for the long texts of the
   questions answers on voice dialogue in the files vd_<theme name>.html */

div.scrolling1 { position: absolute; left: 0px; top: 32px; width: 449px; height: 360px; 
                 overflow: auto; border: 1px solid #B68D57; padding-right: 6px; }

div.backward   { position: absolute; left: 252px; top: 125px; width:  80px; height:  24px; }
div.forward    { position: absolute; left: 637px; top: 470px; width:  80px; height:  24px; }
div.menu       { position: absolute; left:   0px; top: 125px; width: 265px; height: 170px; }
div.menuindex  { position: absolute; left: 391px; top: 125px; width: 265px; height: 170px; }

div.ennote     { position: absolute; left: 138px; top: 520px; width:  60px; height:  18px; }
div.nlnote     { position: absolute; left:  46px; top: 520px; width:  80px; height:  18px; 
                 text-align:right; }

div.siteiconmask  { position: absolute; left: 746px; top:  37px; width:  25px; height:  13px; }
div.sitenotemask  { position: absolute; left: 616px; top:  34px; width: 120px; height:  18px; 
                    text-align:right; }
div.siteiconmaria { position: absolute; left:  12px; top:  37px; width:  25px; height:  13px; }
div.sitenotemaria { position: absolute; left:  49px; top:  34px; width: 120px; height:  18px; }

div.mailiconmask  { position: absolute; left: 746px; top:  55px; width:  25px; height:  13px; }
div.mailnotemask  { position: absolute; left: 616px; top:  52px; width: 120px; height:  18px; 
                    text-align:right; }
div.mailiconmaria { position: absolute; left:  12px; top:  55px; width:  25px; height:  13px; }
div.mailnotemaria { position: absolute; left:  49px; top:  52px; width: 120px; height:  18px; }

div.citation      { position: absolute; left:  23px; top: 347px; width: 220px; height: 136px; }
div.description   { position: absolute; left:   9px; top: 270px; width: 161px; height: 303px; }