body {
    background: white;
    color: black;
    font-family: Bookman Old Style, Times New Roman, Serif;
    margin: 0;
    padding: 0;
}
img {
    border: 0;
}
img.shard {
    vertical-align: text-bottom;
} 
div.body {
    text-align: center;
    border-top: 2px solid grey;
    border-left: 2px solid grey;
    border-right: 2px solid black;
    border-bottom: 2px solid black;    
    width: 70%;
    position: relative;
    left: 15%;
    margin-top: 1em;
    margin-bottom: 1em;
    padding: 1em;
}

div.login {
    width: 50%;
    text-align: center;
    border-top: 2px solid grey;
    border-left: 2px solid grey;
    border-right: 2px solid black;
    border-bottom: 2px solid black;    
    position: relative;
    left: 20%;
    margin-top: 1em;
    margin-bottom: 1em;
    padding: 1em;
}

img.title {
}
img.leftborder {
    position: absolute;
    left: 5%;
    top: 30%;
}
img.rightborder {
    position: absolute;
    right: 5%;
    top: 30%;
}
img.footer {
    margin-top: 1em;
}
span.footer {   
    font-size: 70%;
    color: grey;
    align: right;
}
span.footer a {
    color: grey;
}
span.byline {
}
a.menuitem {
    color: black;
    font-weight: bold;
    font-size: 130%;
}
div.menu {
    text-align: center;
    position: relative;
    vertical-align: middle;
}
div.menu p {
    margin-left: 1em;
    margin-right: 30px;
}
img.bullet {
    vertical-align: middle;
}
p.intro {
    width: 80%;
    text-align: justify;
    font-size: 90%;
    position: relative;
    left: 10%;   
}
span.menuline {
    color: #333333;
    font-size: 80%;
    margin-left: 2em;
}

img.puzzle {
    position: absolute; 
    top: 5px;
    left: 10%;    
    border: 2px solid black;
}
div.line {
    background-image: url(crystals3.jpg);
    border-top: 2px solid black;
    border-bottom: 2px solid black;
    height: 75px;
}
span.titleline {
    position: relative;
    top: 40%;
    left: 60%;
    color: white;
    font-weight: bold;
    font-size: 120%;
}
div.intro {
    margin-top: 2em;
    margin-left: 2em;
    margin-right: 2em;
    font-style: italic;
}
div.intro p {
    text-align: left;
}
div.chapter {
    margin-top: 2em;
    margin-left: 2em;
    margin-right: 2em;
}
div.chapter p {
    text-align: left;
}
div.chapter h3 {
    text-align: left;
}
div.chapter pre {
    font-family: Bookman Old Style, Times New Roman, Serif;
    position: relative;
    left: 10%;
}
span.illustration {
    margin-right: 2em;
    margin-bottom: 1em;
    float: left;
    font-size: 70%;
    font-style: normal;
    text-align: center;
}
span.illustration_separate {
    margin-right: 2em;
    margin-bottom: 1em;
    font-size: 70%;
    font-style: normal;
    text-align: center;
}