body
{
color: #381951;
background-color: lightyellow;
background-image: url(./images/goldsand.png);
font-family: sans-serif
}

/* We don't set the margins for the body as a whole because we want some elements to be full-width */

.emph
{
font-style: italic;
font-weight: bold
}

.iu
{
font-style: italic;
text-decoration: underline
}

.i
{
font-style: italic
}

.superscript
{
font-size: 60%;
vertical-align: top
}

.pullquote 
{
width: 30%;
background-color: lightyellow;
font-size: 100%;
font-style: italic;
color: black;
float: right;
border: 2px solid purple;
padding: 8px;
margin-top: 10px;
margin-left: 10px;
}

/* can have a background image for this using the same syntax as for the body */

.pos_abs
{
position: absolute;
left: 0px;
top: 0px
}

.smaller
{
font-size: 80%;
}

/* All of the above classes can be used with any tag

div.header
{
margin-left: 0%;
margin-right: 0%
}

/* This is used to set the header/title part of the page to be full-width */

div.body
{
margin-left: 15%;
margin-right: 15%
}

/* This makes the rest of the page to be less than full-width */

div.indentedbody
{
margin-left: 5%;
margin-right: 0%
}

span.right
{float: right;
width: 32px;
margin: 0}

a:link
{
text-decoration: underline;
color: #000033
}

a:visited
{
text-decoration: underline;
color: #000066
}

/* a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective */
a:hover
{
text-decoration: underline;
color: #FF6666;
background-color: #660000
}

/* a:active (if it is used) MUST come after a:hover in the CSS definition in order to be effective */

h1
{
text-align: center;
text-transform: uppercase
}

h2
{
text-transform: uppercase
}

h3
{
text-transform: uppercase
}

h4
{
font-style: italic;
text-transform: uppercase
}

h4.centre
{
text-align: center
}

h5
{
text-transform: uppercase;
font-style: italic;
font-weight: normal;
font-size: 100%
}

p
{
text-align: left;
line-height: 140%
}

p.centre
{
text-align: center
}

p.centresm
{
text-align: center;
font-size: 80%
}

p.comment
{
text-align: center;
font-style: italic
}

p.right
{
text-align: right;
font-size: 80%;
font-weight: bold
}

ul
{
list-style-type: disc
}

ul.level1
{
list-style-position: outside;
margin-left: 3%
} 

ul.level2ormore
{
list-style-position: outside
} 

ul.level2ormoresm
{
list-style-position: outside;
font-size: 80%
} 

li
{
padding-bottom: 4px;
padding-top: 4px;
line-height: 140%
}

tr
{
vertical-align: top
}

td.pad
{
padding: 1em
}

td.pad2
{
padding: 0.5em
}

td.pad3
{
padding-left: 0.5em;
padding-right: 5em;
padding-top: 0.5em;
padding-bottom: 0.5em
}

td.pad4
{
padding-left: 5em;
padding-right: 0.5em;
padding-top: 0.5em;
padding-bottom: 0.5em
}

td.left
{
text-align: left
}

td.right
{
text-align: right
}

td.centre
{
text-align: centre
}

/* This is all based on the tutorials at http://www.w3schools.com/css/default.asp