html, body {
  font-family: 'Arial', sans-serif;
}

body.paper {
  background: url('images/BGpaper.jpg');
  margin: 5em;
  padding: 0em
}

body.water {
  background: url('images/BGwater.jpg');
  margin: 1em;
  padding: 0em;
  color: white;
}
 

body.plain {margin: 5em;
           padding: 0em; 
           }

p {
  line-height: 150%;
  text-align: justify;
}

.centered {
  line-height: 150%;
  text-align: center;
}

div.centered {
  line-height: 150%;
  text-align: center;
}

div.paper {background-image: url('images/BGpaper.jpg');
           color: #000;
           font-family: Arial; line-height: 150%; 
           border: 2px solid #CCF; 
           margin: 6em;
           padding: 2em 
           }
           
div.paper2 {background-image: url('images/papyrus.jpg');
           color: #000;
           font-family: Arial; line-height: 150%; 
           border: 2px solid #CCF; 
           margin: 6em;
           padding: 2em 
           }
           
div.text {background-color: #FFFFFF;
           color: #000;
           font-family: Arial; line-height: 150%; 
           border: 2px solid #0762D7; 
           margin: 4em;
           padding: 2em 
           }
           
div.title {background-color: #0066FF;
           color: #000;
           font-family: Arial; line-height: 150%; 
           border: 4px solid #F4F5FD; 
           margin: 4em;
           padding: 2em 
           }

div.brown {background-color: #FFFFFF;
           border: 0px;
           margin: 5em;
           padding: 0em; 
           }


div.centered {text-align: center;
           }


i { font-weight: bold;
    }

b {color: #009999;}

u {font-size: 150%;
  font-weight: bold;
  color: #091;
  text-transform: uppercase;}

/* valid color codes:   0,3,6,9,C,F    just use pair of three instead of six  code: padding: 0;*/

span.highlight { color: #091;
                 font-weight: bold;
                 font-variant: small-caps; 
                 }
                 
span.highlight2 { 
               color: #091
                 }                 
                 
span.fixIt  { 
            color: #800080;
            font-weight: bold;
            }    

.Quote       { font-family: Arial; line-height: 150%; 
               border: 2px solid #CCF; margin-left: 20; margin-right: 20; padding: 10; 
               background-color: #ECECFF }
               
.Quote2       { font-family: Arial; 
                line-height: 150%; 
               border: 2px solid #CCF; 
               margin-left: 20; 
               margin-right: 20; 
               padding: 10; 
               background-color: #ECECFF;
               color: #009999;
               font-style: italic;
               font-weight: bold;
}         

.FloatRight { margin-left: 1em;  margin-bottom: 1em; float: right; text-align: center; font-weight: bold; font-size: 80%; }
.FloatLeft { margin-right: 1em; margin-bottom: 1em; float: left; text-align: center; font-weight: bold; font-size: 80%; }

hr { clear: both; height: 2px; border-top: 2px solid  #993300; }

a { text-decoration: underline; font-weight: bold; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 {
  margin: 10, 0, 10, 0;  
}

h1 {
  font-size: 160%;
  font-weight: bold;  
  color: #900;
}

h2 { 
  font-size: 120%;
  font-weight: normal;
  text-transform: uppercase;
  color: #091;
}

h3 {
  font-size: 160%;
  font-weight: bold;
  color: #0099FF;
}

h4 {
  font-weight: bold;
  font-variant: small-caps;
  letter-spacing: 0.1em;
  color: #099;
}

h5 {
  font-weight: bold;
  text-align: center;
  font-size: 100%;
}

span.lead {
  font-weight: bold;
  font-variant: small-caps;
  letter-spacing: 0.1em;
  color: #099;
}

span.subLead {
  font-weight: bold;
  color: #009999;
}

li { 
  line-height: 150%;
  margin: 1em;
}