body {
    font-family:    Arial, Helvetica, sans-serif;
    font-size:      0.80em;
    background:     #eef;
    color:          #fff;
    margin:         0;
    padding:        0;
    height: 100%;
}
h1 {
    color:          #666;
    font-family:    Garamond, Times, serif;
    font-weight:    normal;
    font-size:      2.8em;
}
h1.first {
    margin-top:     0;
}
h2 {
    color:      #942923;
    font-size:  1.1em;
}
h2.first {
    margin-top:     0;
}
h3 {
    color:      #942923;
    font-size:  1em;
}
blockquote {
    color:      #942923;
}
a {
    color:      #942923;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
form {
    margin:         0;
    padding:        0;
}
img {
    border:         0;
}
.clearhack {
    clear:          both;
}
/* FUNDAMENTAL STRUCTURE:
   Canvas, centred in viewport
   Top bar contains logo and contact/buy tickets links
   Banner bar contains photographic tagline/informational banner
   Toolbar bar contains links to departments
   Content bar contains page's data
*/
#canvas {
    min-height: 100%;
    width:      760px;
    margin:     0 auto;    
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    border-left:    solid 1px #666;
    border-right:   solid 1px #666;
    border-bottom:  solid 1px #666;
    background: #fff url(images/footer.jpg) no-repeat bottom right;
    padding-bottom: 190px;
}
#top {
    color:      #000;
    height:     85px;
    padding-top: 20px;
}
#logo {
    width:      273px;
    height:     64px;
    float:      left;
}
#toplinks {
    width:      370px;
    float:      right;
    line-height: 60px;
    text-align: right;
    padding:    10px;
    padding-right: 20px;
}
#toolbar {
    background:     #a02020;
    color:          #fff;
    text-align:     center;
    line-height:    2.2em;
}
#toolbar a {
    color:      #fff;
    padding-left:     8px;
    margin-left:      4px;
    padding-right:      8px;
    margin-right:     4px;
}
#toolbar a:hover {
    color:              #aaa;
    text-decoration:    none;
}
#toolbar a.hi {
    color:          #fff;
    border-left:    solid 2px #000;
    border-right:   solid 2px #000;
}
#content {
    color:      #444;
    padding:    10px 0 30px 0;
}
#footer {
    background:     #111;
    color:          #666;
    font-size:      0.8em;
    padding-top:    5px;
    padding-bottom: 10px;
}
#copyright {
    width:          400px;
    float:          left;
}
#footlinks {
    width:          400px;
    float:          right;
    text-align:     right;
}
#footer a {
    color:      #666;
}

/* COLUMNS */
.columns .first {
    width:          48%;
    margin-right:   1.75%;
    border-right:   dotted 1px #ccc;
    padding-right:  1.75%;
    float:          left;
}
.columns .second {
    width:          48%;
    float:          left;
}

/* MAIN MENU */
.mainmenu .itemrow {
    padding-bottom:  10px;
}
.mainmenu .itemrow .itemsep {
    width:          3%;
    height:         170px;
    float:          left;
}
.mainmenu .menuitem {
    width:          48%;
    float:          left;
}
.mainmenu .menuitem .header {
    color:          #822;
    font-size:      1.8em;
    font-family:    Garamond, Times, serif;
    font-weight:    normal;
}
.mainmenu .menuitem .description {
    padding-left:   2em;
}
.mainmenu .menuitem .readmore {
    font-size:      0.9em;
    text-align:     right;
}
.mainmenu .clearhack {
    clear:          both;
}    


/* LAYOUTS */
/**** PlainLayout (FOR ERRORS, THAT KIND OF THING) ****/
#plainlayout {
    margin:         0 20px 0 20px;
}

/**** MainLayout (MAIN HOMEPAGE) ****/
#mainlayout {
    margin-left: 220px;
}
#mainlayout #preamble {
    margin: 0 20px 0 20px;
}
#mainlayout #menuPreviewsPanel {
    margin: 0 0 0 20px;
}
#mainlayout #menuPreviews {
    width: 540px;
    float: left;
}
#mainlayout #menuPreviewsBuffer {
    width: 10px;
    height: 12em;
    float: left;
}

/**** ProseLayout (LAYOUT WITH PICTURE ON LEFT) ****/
#proselayout {
    margin:         0 20px 0 20px;
}
#proselayout div.image {
    width:          220px;
    float:          left;
}
#proselayout div.prose {
    width:          520px;
    float:          left;
    margin-left:    20px;
}
