@media screen and (min-width:800px)  
{   /* Target landscape smartphones, portrait tablets, narrow desktops  */ 

BODY 
  { 
    margin: 3;
    SCROLLBAR-FACE-COLOR: #445387; 
   SCROLLBAR-ARROW-COLOR: #604910;  
   SCROLLBAR-TRACK-COLOR: #546387; 
   SCROLLBAR-BASE-COLOR: #FFFFFF;
  // FONT-SIZE: 11pt; 
  // font-weight: normal;
   background-image: url('background_new.png'); 
   background-repeat: repeat-y
   background-repeat: repeat-x
   BACKGROUND-COLOR:  #243357; 
  // COLOR: #604910;  
  //FONT-FAMILY: arial, Helvetica, verdana,  sans serif; 
  // min-width: 600px;// Needs to be equal to contentframe DIV width - fix for Mozilla 
  } 

   A:link {text-decoration: none; color: #B04010; }
   A:visited {text-decoration: none; color: #803010; }
   A:active {text-decoration: none; color: #FF0000; }
  A:hover {text-decoration: underline; color: #FF0000; BACKGROUND-COLOR: #FFFFFF;}  

  .centeredImage
    {
    text-align:center;
    margin-top:0px;
    margin-bottom:0px;
    padding:0px;
    }


  
  #outerarea
{
  position: absolute;
  top: 81px;
  z-index: 2;
  width:40%;
  max-width: 800px;
  min-width: 600px;
  //height: 60px;
  overflow: hidden;
  background-image: url('background_new.png');
  BACKGROUND-COLOR: #243357;
  margin: 0 auto;
  left: 0;
  right: 0;
}

  #contentframe {
 // align:center;
  //margin-left: auto; //centers the div in the browser screen
  //margin-right: auto; 
  //margin-top: 10px;
 // position: absolute;
 // top: 100px;
  width: 600px;  
  border: 1px solid #000;
  //background-image: url('prch-arc.png');
  BACKGROUND-COLOR: #FFFFFF;
  }

  #content {
  //position: relative;
  margin:10px;
  padding:10px;
  border: 1px solid #301010;
  //background-image: url('prch-arc.png');
  BACKGROUND-COLOR: #FFFFFF;
  text-align: justify;  
    
  }

  #title {
  text-align: left; // correction for the kludgy fix for IE to allow centering (see above)
  margin-top: 0px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 10px;
  padding: 0px;
  border: 0px;
  }


 #leftcolumn {
    position: absolute;
    top: 160px;
    left: 5px;  
    margin: 0;
    white-space:nowrap;
    width: 70px;
    line-height: 1.1em;
    overflow: visible;
    border-collapse: collapse;
    z-index: 3;
  }



font.topspiel {
 font-family: Times,  serif;
 font-weight: bold;
 font-size: 11pt; color: #FFE8C0; 
}

font.pagetitle {
 font-family: Times,  serif;
 font-weight: bold;
 font-size: 15pt; color: #A05010;
}

font.byline {
 font-family: arial, Helvetica, verdana,  sans serif;
 font-weight: normal;
 font-style: italic;
 font-size: 9pt; color: #302020;
}

font.aboutspiel {
 font-family: arial, Helvetica, verdana,  sans serif;
 font-weight: normal;
 font-size: 9pt; color: #000000;
}
  A.aboutlink:link {text-decoration: none; color: #504020; }
  A.aboutlink:visited {text-decoration: none; color: #504020; }
  A.aboutlink:active {text-decoration: none; color: #504020; }
  A.aboutlink:hover {text-decoration: underline; color: #FF9850; BACKGROUND-COLOR: #FFFFFF;}  

font.lefttext {
 font-family: Times,  serif;
 font-weight: bold;
 font-size: 12pt; color: #FFE8C0;  
}

  A.leftcol:link {text-decoration: none; color: #FFE8C0; }
  A.leftcol:visited {text-decoration: none; color: #FFE8C0; }
  A.leftcol:active {text-decoration: none; color: #FFE8C0; }
  A.leftcol:hover {text-decoration: underline; color: #FFFFFF; BACKGROUND-COLOR: #243357;}  

font.sectionheading {
 font-family: arial, Helvetica, verdana,  sans serif;
 font-weight: bold;
 font-size: 12pt; color: #A05010;
}

font.subsectionheading {
 font-family: arial, Helvetica, verdana,  sans serif;
 font-weight: bold;
 font-size: 11pt; color: #A05010;
}

font.introtext {
 font-family: Times, serif;
 font-weight: normal;
 font-size: 12pt; color: #000000;
}

font.maintext {
 font-family: arial, Helvetica, verdana,  sans serif;
 font-weight: normal;
 font-size: 11pt; color: #000000;
}

font.feedbacktext {
 font-family: arial, Helvetica, verdana,  sans serif;
 font-weight: normal;
 font-size: 11pt; color: #000000;
}

font.copyrighttext {
 font-family: arial, Helvetica, verdana,  sans serif;
 font-weight: normal;
 font-size: 10pt; color: #000000;
}

// used for giving examples of how to cite pages on the website
font.citationformat {
 font-family: Times, serif;
 font-weight: normal;
 font-size: 9pt; color: #705020;
}

font.leadcapital {
 font-family: Times,  serif;
 font-weight: bold;
 font-size: 17pt; color: #A05010;
}

font.bioheading {
 font-family: arial, Helvetica, verdana,  sans serif;
 font-weight: bold;
 font-size: 12pt; color: #A05010;
}

table.sidewindow {
 float:right; 
 width:200px;
 BACKGROUND-COLOR: #E0D5B5;
 border: 1px solid #150000; 
 padding: .2em; 
 margin-bottom: 10px;
 margin-left: 10px;
}

font.sidewindows {
 font-family: arial, Helvetica, verdana,  sans serif;
 font-weight: normal;
 font-size: 9pt; color: #000000;
}

font.notenotice {
 font-family: arial, Helvetica, verdana,  sans serif;
 font-weight: normal;
 font-size: 9pt; color: #000000;
}

font.sourcecitation {
 font-family: arial, Helvetica, verdana,  sans serif;
 font-weight: normal;
 font-size: 9pt; color: #000000; //color: #B04010;
}

.TranspDiv
{
   filter:alpha(opacity=60); 
   -moz-opacity: 0.6; 
   opacity: 0.6; 
}
 

}  // end rules for width >= 800 px



// ************************************************************************************************

// ************************************************************************************************



@media screen and (min-width:480px) and (max-width:799px) 
{   /* Target landscape smartphones, portrait tablets, narrow desktops  */ 


BODY 
  { 
    margin: 3;
    SCROLLBAR-FACE-COLOR: #445387; 
   SCROLLBAR-ARROW-COLOR: #604910;  
   SCROLLBAR-TRACK-COLOR: #546387; 
   SCROLLBAR-BASE-COLOR: #FFFFFF;
  // FONT-SIZE: 11pt; 
  // font-weight: normal;
   background-image: url('background_new.png'); 
   background-repeat: repeat-y
   background-repeat: repeat-x
   BACKGROUND-COLOR:  #243357; 
  // COLOR: #604910;  
  //FONT-FAMILY: arial, Helvetica, verdana,  sans serif; 
  // min-width: 600px;// Needs to be equal to contentframe DIV width - fix for Mozilla 
  } 

   A:link {text-decoration: none; color: #B04010; }
   A:visited {text-decoration: none; color: #803010; }
   A:active {text-decoration: none; color: #FF0000; }
  A:hover {text-decoration: underline; color: #FF0000; BACKGROUND-COLOR: #FFFFFF;}  

  .centeredImage
    {
    text-align:center;
    margin-top:0px;
    margin-bottom:0px;
    padding:0px;
    }


  
  #outerarea
{
  position: absolute;
  top: 81px;
  z-index: 2;
  width:40%;
  max-width: 800px;
  min-width: 600px;
  //height: 60px;
  overflow: hidden;
  background-image: url('background_new.png');
  BACKGROUND-COLOR: #243357;
  margin: 0 auto;
  left: 0;
  right: 0;
}

  #contentframe {
 // align:center;
  //margin-left: auto; //centers the div in the browser screen
  //margin-right: auto; 
  //margin-top: 10px;
 // position: absolute;
 // top: 100px;
  width: 600px;  
  border: 1px solid #000;
  //background-image: url('prch-arc.png');
  BACKGROUND-COLOR: #FFFFFF;
  }

  #content {
  //position: relative;
  margin:10px;
  padding:10px;
  border: 1px solid #301010;
  //background-image: url('prch-arc.png');
  BACKGROUND-COLOR: #FFFFFF;
  text-align: justify;  
    
  }

  #title {
  text-align: left; // correction for the kludgy fix for IE to allow centering (see above)
  margin-top: 0px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 10px;
  padding: 0px;
  border: 0px;
  }


 #leftcolumn {
    position: absolute;
    top: 160px;
    left: 5px;  
    margin: 0;
    white-space:nowrap;
    width: 70px;
    line-height: 1.1em;
    overflow: visible;
    border-collapse: collapse;
    z-index: 3;
  }



font.topspiel {
 font-family: Times,  serif;
 font-weight: bold;
 font-size: 11pt; color: #FFE8C0; 
}

font.pagetitle {
 font-family: Times,  serif;
 font-weight: bold;
 font-size: 15pt; color: #A05010;
}

font.byline {
 font-family: arial, Helvetica, verdana,  sans serif;
 font-weight: normal;
 font-style: italic;
 font-size: 9pt; color: #302020;
}

font.aboutspiel {
 font-family: arial, Helvetica, verdana,  sans serif;
 font-weight: normal;
 font-size: 9pt; color: #000000;
}
  A.aboutlink:link {text-decoration: none; color: #504020; }
  A.aboutlink:visited {text-decoration: none; color: #504020; }
  A.aboutlink:active {text-decoration: none; color: #504020; }
  A.aboutlink:hover {text-decoration: underline; color: #FF9850; BACKGROUND-COLOR: #FFFFFF;}  

font.lefttext {
 font-family: Times,  serif;
 font-weight: bold;
 font-size: 12pt; color: #FFE8C0;  
}

  A.leftcol:link {text-decoration: none; color: #FFE8C0; }
  A.leftcol:visited {text-decoration: none; color: #FFE8C0; }
  A.leftcol:active {text-decoration: none; color: #FFE8C0; }
  A.leftcol:hover {text-decoration: underline; color: #FFFFFF; BACKGROUND-COLOR: #243357;}  

font.sectionheading {
 font-family: arial, Helvetica, verdana,  sans serif;
 font-weight: bold;
 font-size: 12pt; color: #A05010;
}

font.subsectionheading {
 font-family: arial, Helvetica, verdana,  sans serif;
 font-weight: bold;
 font-size: 11pt; color: #A05010;
}

font.introtext {
 font-family: Times, serif;
 font-weight: normal;
 font-size: 12pt; color: #000000;
}

font.maintext {
 font-family: arial, Helvetica, verdana,  sans serif;
 font-weight: normal;
 font-size: 11pt; color: #000000;
}

font.feedbacktext {
 font-family: arial, Helvetica, verdana,  sans serif;
 font-weight: normal;
 font-size: 11pt; color: #000000;
}

font.copyrighttext {
 font-family: arial, Helvetica, verdana,  sans serif;
 font-weight: normal;
 font-size: 10pt; color: #000000;
}

// used for giving examples of how to cite pages on the website
font.citationformat {
 font-family: Times, serif;
 font-weight: normal;
 font-size: 9pt; color: #705020;
}

font.leadcapital {
 font-family: Times,  serif;
 font-weight: bold;
 font-size: 17pt; color: #A05010;
}

font.bioheading {
 font-family: arial, Helvetica, verdana,  sans serif;
 font-weight: bold;
 font-size: 12pt; color: #A05010;
}

table.sidewindow {
 float:right; 
 width:200px;
 BACKGROUND-COLOR: #E0D5B5;
 border: 1px solid #150000; 
 padding: .2em; 
 margin-bottom: 10px;
 margin-left: 10px;
}

font.sidewindows {
 font-family: arial, Helvetica, verdana,  sans serif;
 font-weight: normal;
 font-size: 9pt; color: #000000;
}

font.notenotice {
 font-family: arial, Helvetica, verdana,  sans serif;
 font-weight: normal;
 font-size: 9pt; color: #000000;
}

font.sourcecitation {
 font-family: arial, Helvetica, verdana,  sans serif;
 font-weight: normal;
 font-size: 9pt; color: #000000; //color: #B04010;
}

.TranspDiv
{
   filter:alpha(opacity=60); 
   -moz-opacity: 0.6; 
   opacity: 0.6; 
}
 

}  // end rules for width 480 - 799 px





// ************************************************************************************************

// ************************************************************************************************




@media screen and (max-width:479px) 
{   /* Target portrait smartphones */ 


BODY 
  { 
    margin: 3;
    SCROLLBAR-FACE-COLOR: #445387; 
   SCROLLBAR-ARROW-COLOR: #604910;  
   SCROLLBAR-TRACK-COLOR: #546387; 
   SCROLLBAR-BASE-COLOR: #FFFFFF;
  // FONT-SIZE: 11pt; 
  // font-weight: normal;
   background-image: url('background_new.png'); 
   background-repeat: repeat-y
   background-repeat: repeat-x
   BACKGROUND-COLOR:  #243357; 
  // COLOR: #604910;  
  //FONT-FAMILY: arial, Helvetica, verdana,  sans serif; 
  // min-width: 600px;// Needs to be equal to contentframe DIV width - fix for Mozilla 
  } 

   A:link {text-decoration: none; color: #B04010; }
   A:visited {text-decoration: none; color: #803010; }
   A:active {text-decoration: none; color: #FF0000; }
  A:hover {text-decoration: underline; color: #FF0000; BACKGROUND-COLOR: #FFFFFF;}  

  .centeredImage
    {
    text-align:center;
    margin-top:0px;
    margin-bottom:0px;
    padding:0px;
    }


  
  #outerarea
{
  position: absolute;
  top: 81px;
  z-index: 2;
  width:40%;
  max-width: 800px;
  min-width: 600px;
  //height: 60px;
  overflow: hidden;
  background-image: url('background_new.png');
  BACKGROUND-COLOR: #243357;
  margin: 0 auto;
  left: 0;
  right: 0;
}

  #contentframe {
 // align:center;
  //margin-left: auto; //centers the div in the browser screen
  //margin-right: auto; 
  //margin-top: 10px;
 // position: absolute;
 // top: 100px;
  width: 600px;  
  border: 1px solid #000;
  //background-image: url('prch-arc.png');
  BACKGROUND-COLOR: #FFFFFF;
  }

  #content {
  //position: relative;
  margin:10px;
  padding:10px;
  border: 1px solid #301010;
  //background-image: url('prch-arc.png');
  BACKGROUND-COLOR: #FFFFFF;
  text-align: justify;  
    
  }

  #title {
  text-align: left; // correction for the kludgy fix for IE to allow centering (see above)
  margin-top: 0px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 10px;
  padding: 0px;
  border: 0px;
  }


 #leftcolumn {
    position: absolute;
    top: 160px;
    left: 5px;  
    margin: 0;
    white-space:nowrap;
    width: 70px;
    line-height: 1.1em;
    overflow: visible;
    border-collapse: collapse;
    z-index: 3;
  }



font.topspiel {
 font-family: Times,  serif;
 font-weight: bold;
 font-size: 11pt; color: #FFE8C0; 
}

font.pagetitle {
 font-family: Times,  serif;
 font-weight: bold;
 font-size: 15pt; color: #A05010;
}

font.byline {
 font-family: arial, Helvetica, verdana,  sans serif;
 font-weight: normal;
 font-style: italic;
 font-size: 9pt; color: #302020;
}

font.aboutspiel {
 font-family: arial, Helvetica, verdana,  sans serif;
 font-weight: normal;
 font-size: 9pt; color: #000000;
}
  A.aboutlink:link {text-decoration: none; color: #504020; }
  A.aboutlink:visited {text-decoration: none; color: #504020; }
  A.aboutlink:active {text-decoration: none; color: #504020; }
  A.aboutlink:hover {text-decoration: underline; color: #FF9850; BACKGROUND-COLOR: #FFFFFF;}  

font.lefttext {
 font-family: Times,  serif;
 font-weight: bold;
 font-size: 12pt; color: #FFE8C0;  
}

  A.leftcol:link {text-decoration: none; color: #FFE8C0; }
  A.leftcol:visited {text-decoration: none; color: #FFE8C0; }
  A.leftcol:active {text-decoration: none; color: #FFE8C0; }
  A.leftcol:hover {text-decoration: underline; color: #FFFFFF; BACKGROUND-COLOR: #243357;}  

font.sectionheading {
 font-family: arial, Helvetica, verdana,  sans serif;
 font-weight: bold;
 font-size: 12pt; color: #A05010;
}

font.subsectionheading {
 font-family: arial, Helvetica, verdana,  sans serif;
 font-weight: bold;
 font-size: 11pt; color: #A05010;
}

font.introtext {
 font-family: Times, serif;
 font-weight: normal;
 font-size: 12pt; color: #000000;
}

font.maintext {
 font-family: arial, Helvetica, verdana,  sans serif;
 font-weight: normal;
 font-size: 11pt; color: #000000;
}

font.feedbacktext {
 font-family: arial, Helvetica, verdana,  sans serif;
 font-weight: normal;
 font-size: 11pt; color: #000000;
}

font.copyrighttext {
 font-family: arial, Helvetica, verdana,  sans serif;
 font-weight: normal;
 font-size: 10pt; color: #000000;
}

// used for giving examples of how to cite pages on the website
font.citationformat {
 font-family: Times, serif;
 font-weight: normal;
 font-size: 9pt; color: #705020;
}

font.leadcapital {
 font-family: Times,  serif;
 font-weight: bold;
 font-size: 17pt; color: #A05010;
}

font.bioheading {
 font-family: arial, Helvetica, verdana,  sans serif;
 font-weight: bold;
 font-size: 12pt; color: #A05010;
}

table.sidewindow {
 float:right; 
 width:200px;
 BACKGROUND-COLOR: #E0D5B5;
 border: 1px solid #150000; 
 padding: .2em; 
 margin-bottom: 10px;
 margin-left: 10px;
}

font.sidewindows {
 font-family: arial, Helvetica, verdana,  sans serif;
 font-weight: normal;
 font-size: 9pt; color: #000000;
}

font.notenotice {
 font-family: arial, Helvetica, verdana,  sans serif;
 font-weight: normal;
 font-size: 9pt; color: #000000;
}

font.sourcecitation {
 font-family: arial, Helvetica, verdana,  sans serif;
 font-weight: normal;
 font-size: 9pt; color: #000000; //color: #B04010;
}

.TranspDiv
{
   filter:alpha(opacity=60); 
   -moz-opacity: 0.6; 
   opacity: 0.6; 
}
 

}  // end rules for width < 480 px