body {
   background: #669999;
   text-align: left;
   font-family: Verdana;
   font-size: medium;
}

div {
   background: #e2ffe2;   
}

h1 {
   width: 100%;
   font-size: x-large;
   margin-top: 0;
   margin-bottom: 10px;
   color: #990000;
}

h2 {
   width: 100%;
   font-size: large;
   margin: 0;
   color: #990000;
}

p {
   text-align: justify;
   margin-top: 5px;
   margin-bottom: 10px;  
}

img {
   border: 0;
}

a {
   color: #3333ff;
   text-decoration: none;
}

a:visited {
   color: #3333ff;
}

a:hover {
   color: #33aaff;
   text-decoration: underline;
}

a:active {
   color: #aa0000;
}

textarea {
   height: 100px;
   width: 400px;
   background: #f0fff0;
}

textarea:focus {
   background: #ffffbb;
}

button {
   background: #f0fff0;
}

input {
   background: #f0fff0;
}

input:focus {
   background: #ffffbb;
}

span.error {
   color: red;
}

/* Not used
#mainContainer {
   max-width: 800px;
   margin: 0 auto;
   text-align: left;
}
*/

#top {
    background: #ffffbb;
}

#top h1 {
   color: #003300;
   font-size: xx-large;
}

#top h2 {
   font-size: x-large;
}

#center {
   display: table;
   background: #eeeeff;
}

#left {
   width: 20%;
   border-left: 5pt solid #990000;
   border-right: 5pt solid #669999;
   display: table-cell;
   vertical-align: top;
   padding: 5pt;
/*   font-size: x-small; */
}

#left a {
   font-size: small;
}

#left a.topLevel {
   color: #003300;
   font-size: medium;
}

/* Some padding - this will be used for foldable stuff. I need
   an element to hide, a div is ideal, and padding shows nesting. I also
   need to be specific to #left because otherwise otherwise #left div would
   take precedence if I ever added #left div to this file. */
#left div.inner {
   border: 0;
   padding-left: 10pt;
}

/* Copying for the right div. Same reasoning */
#right div.inner {
   border: 0;
   padding-left: 10pt;
}

/* This will change
#left h1 {
   width: 100%;
   background: #ccccee;
   font-size: large;
   font-variant: small-caps;
   margin-bottom: 1px;
}

#left h2 {
   font-size: small;
}

#left a {
   text-decoration: none;
   color: #113b11;
}

#left a:hover {
   background: #d4d4ff;
   text-decoration: underline;
}

#left ul {
   margin: 0;
   list-style-position: outside;
   list-style-type: square;
   padding-left: 0;
}
*/

#right {
   width: 80%;
   display: table-cell;
   vertical-align: top;
   margin: 0;
}

#right div {
   border-bottom: 5pt solid #669999;
   padding: 5pt;
}

#right div.error {
    border: 1pt solid black;
    background: #ff0000;
}

#right div.success {
    border: 1pt solid black;
    background: #00ff00;
}

#right div.general {
    background: #ffffff;
}

#right div.announcements {
    background: #ffffff;
}

span.title {
    color: black;
    font-weight: bold;
}

span.dismiss {
    color: black;
    font-size: small;
}

#right div div.gradeReport {
   border: 1pt solid black;
   margin-bottom: 15pt;
}

#right div div.gradeReport h1 {
   text-align: center;
}

#right div div.gradeReport td.header {
   text-align: center;
   vertical-align: top;
   width: 100pt;
}

#right #bottom {
   border-bottom: 0;
   padding-top: 0;
   padding-bottom: 0;
   font-size: small;
}