body {
    font-family:    Arial, Helvetica, sans-serif;
    font-size:      0.80em;
    background:     #fff url('../gfx/background.gif');
    color:          #fff;
    margin:         0;
    padding:        0;
}
h1 {
    color:          #942923;
    font-family:    Garamond, Times, serif;
    font-weight:    normal;
    margin-top:     15px;
    margin-bottom:  20px;
    font-size:      2.3em;
}
h1.first {
    margin-top:     0;
}
h2 {
   color:          #942923;    font-family:    Garamond, Times, serif;    font-weight:    normal;    margin-top:     15px;    margin-bottom:  20px;    font-size:      1.7em;
}
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;
}
input {
    font-family:    Arial, Helvetica, sans-serif;
    font-size:      0.9em;
}
select {
    font-family:    Arial, Helvetica, sans-serif;
    font-size:      0.9em;
}
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 {
    width:      800px;
    margin:     0 auto;
    margin-top: 7px;
    background: #fff;
}
#top {
    background: #fff;
    color:      #000;
    height:     80px;
}
#logo {
    width:      400px;
    float:      left;
}
#toplinks {
    width:      370px;
    float:      right;
    line-height: 20px;
    text-align: right;
    padding:    0px;
    padding-top:   20px;
    padding-right: 20px;
}
#logo a img {
    position:   relative;
    top:        10px;
    left:       20px;
    border:     none;
}
#banner {
    background: #e09;
    height:     160px;
}
#banner p {     /* Banner paragraphs only visible to screen-readers */
    display:    none;
}
#toolbar {
    background:     #111;
    color:          #fff;
    text-align:     center;
    line-height:    2.2em;
}
#toolbar a {
    color:      #fff;
    margin:     4px;
}
#toolbar a:hover {
    color:              #aaa;
    text-decoration:    none;
}
#toolbar a.hi {
    color:      #fff200;
}
#navbar {
    border-bottom:      solid 1px #eee;
    font-size:          0.8em;
    color:              #666;
    padding:            5px 20px 0 20px;
}
#navbar #breadcrumbs {
    float: left;
    width: 460px;
}
#navbar #currentsection {
    float: right;
    width: 300px;
    text-align: right;
    font-weight:        bold;
}
#content {
    background: #fff;
    color:      #444;
    padding:    10px 0 30px 0;
}
#footer {
    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;
}
/* CONTENT STRUCTURES
*/
div.breadcrumbs {
    font-size:      0.8em;
}
div.breadcrumbs a {
    color:          #942923;
}
div.besidesectionlinks {
    float: left;
    width: 460px;
}
div.sectionlinks {
    float: right;
    width: 300px;
    font-size: 0.8em;
    text-align: right;
    position: relative;
    top: -10px;
}
div.sectionlinks a {
}
div.sectionlinks a.hi {
    color:          #666;
}
div.navlinks {
    font-size:      0.9em;
    position:       relative;
    top:            -15px;      /* To nestle up to the header */
    border-bottom:     solid 1px #eee;
    margin-bottom:  10px;
}
div.navlinks a {
    margin:         0 5px 0 5px;
}
div.navlinks a.hi {
    color:          #942923;
}
div.navlinks a.first {
    margin-left:    0;
}
/* PANELS */
.besidepanels {
    width:          580px;
    margin-left:    20px;
    float:          left;
    display:        inline;
}
.panelbar {
    width:          180px;
    margin-left:    20px;
    float:          right;
}
.panel {
    background:     #ddd;
    padding:        10px;
    font-size:      0.8em;
    margin-bottom:  20px;
}
.panel .title {
    font-weight:    bold;
    color:          #942923;
    margin-bottom:  5px;
}
.panel .section {
    margin-bottom:  5px;
}
.panel a {
    color:          #666;
}
.panel .input {
    margin-top:     5px;
    margin-bottom:  5px;
}
.panel .input .name {
}
.panel .input .value {
}
.panel .input .value input {
    padding:        0;
    margin:         0;
    border:         0;
    font-size:      0.85em;
    height:         2.2em;
    width:          100%;
    line-height:    2.2em;
    background:     #fff;
}
.panel .submit {
    text-align:     right;
}
.panel .submit input {
    padding:        0 10px 0 10px;
    height:         2.2em;
    background:     #942923;
    color:          #fff;
    border:         none;
    font-size:      0.85em;
    line-height:    2.2em;
}
/* EVENTS */
.events {
    margin:         0;
}
.event {
    position:       relative;
    padding-bottom: 15px;
    border: solid 1px #ccc;
    margin-bottom:  15px;
    padding:7px;
}
.event .image {
    float:      left;
    margin-right:   10px;
    top:            0px;
    left:           0px;
}
.event .details {
    margin-left:    0px;
}
.event .details .soldout {
    float:          right;
    background:     #666;
/*    border:         solid 1px #666; */
    color:          #fff;
    height:         2em;
    width:          16em;
    line-height:    2em;
    text-align:     center;
    font-size:      0.9em;
    font-weight:    bold;
}
.event .details .buytickets {
    float:          right;
    background:     #942923;
/*    border:         solid 1px #666; */
    color:          #fff;
    height:         2em;
    width:          10em;
    line-height:    2em;
    text-align:     center;
    font-size:      0.9em;
    font-weight:    bold;
    cursor:         pointer;
    cursor:         hand;
}
.event .details .buytickets a {
    color:          #fff;
    text-decoration: none;
}
.event .details .buytickets a:hover {
    text-decoration: none;
}
.event .details .title {
    color:          #942923;
    font-size:      1.1em;
    font-weight:    bold;
    margin-bottom:  3px;
}
.event .details .time {
    color:          #942923;
    margin-bottom:  3px;
}
.event .details .price {
    color:          #942923;
    margin-top:     3px;
}
.event .details .description {
}
/* PARTNERS */
.partners {
}
.partner {
    float:          left;
    height:         220px;
    width:          180px;
    margin:         5px;
}
.partner .image {
    background:     #ccc;
    height:         180px;
    width:          180px;
}
.partner .image img {
    height:         180px;
    width:          180px;
}
.partner .text {
    font-size:      0.9em;
    text-align:     center;
}
/* DOWNLOADS */
ul.downloads li {
    margin-bottom:  0.5em;
}
/* BLOCK MENU */
#menu {
    position:       relative;
    background:     #eee;
    margin:         10px 0 10px 0;
    padding:        10px 0 10px 0;
    border-top:     dashed 1px #999;
    border-bottom:  dashed 1px #999;
}
#menu #menuImage {
    position:       absolute;
    left:           -220px;
    top:            -70px;
    height:         300px;
    width:          220px;
    background:     #0c0;
}
#menu #menuOptions {
    position:       relative;
    width:          235px;
    float:          left;
    margin:         10px 0 10px 0;
}
#menu #menuNarratives {
    position:       relative;
    width:          305px;
    float:          left;
    margin:         17px 0 10px 0;
    padding:        0 20px 0 20px;
}
.visible { }
.invisible {
    display:        none;
}
#menu #menuOptions .option {
    background:     #888;
    color:          #fff;
    padding:        5px;
    padding-left:   20px;
    margin:         7px 0 7px 0;
    cursor:         pointer;
    cursor:         hand;
}
#menu #menuOptions .optionhi {
    background:     #942923;
    color:          #fff;
    padding:        5px;
    padding-left:   20px;
    margin:         7px 0 7px 0;
    cursor:         pointer;
    cursor:         hand;
}
#menu #menuOptions a {
    color:          #fff;
}
#menu #menuOptions a:hover {
    text-decoration: none;
}
/* NAME/VALUE TABLES */
table.namedvalues {
}
table.namedvalues td.name {
    padding-right:          1em;
    vertical-align:         top;
    /* text-align:             right; */
    font-weight:            bold;
    color:                  #942923;
}
table.namedvalues td.value {
    vertical-align:         top;
}
/* TABULATION TABLES */
table.tabulate {
    margin:                 0 auto;
    border-collapse:        collapse;
    border:     1px solid #ccc;
    font-size:      0.85em;
}
table.tabulate thead td {
    font-weight:            bold;
    border-bottom:          solid 2px #ccc;
    border-left:            dashed 1px #ccc;
    border-right:           dashed 1px #ccc;
}
table.tabulate td {
    padding:                3px;
    border-bottom:          solid 1px #ccc;
    border-left:            dashed 1px #ccc;
    border-right:           dashed 1px #ccc;
}
table.tabulate td.num {
    text-align:             center;
}
table.tabulate td.currency {
    text-align:         right;
}

/* FORM TABLES */
form {
    text-align: center;
}
form table {
    text-align: left;
    border-collapse: collapse;
}
form table td.name {
    color:      #666;
    font-weight:    bold;
    border-left:    solid 7px #fff;
    border-bottom:  solid 1px #eee;
    padding-top:    0.5em;
    padding-bottom: 0.5em;
    padding-right:  1em;
    padding-left:   0.5em;
    vertical-align: top;
}
form table td.fieldInvalidMessage {
    background: #942923;
    color:      #fff;
    font-size:  0.8em;
    padding:    2px;
}
form table td.invalid {
    border-left:    solid 7px #942923;
}
form table td.subheading {
    font-size:  1.1em;
    font-weight:    bold;
    color:      #942923;
    padding-top:    10px;
}
form table td.value {
    border-bottom:  solid 1px #eee;
    padding-top:    0.5em;
    padding-bottom: 0.5em;
    vertical-align: top;
}
form table td.value input {
}
form table td.submit {
    text-align: right;
}
form table td.submit input {
    border:     solid 2px #942923;
    background: #942923;
    color:      #fff;
    font-size:  0.85em;
    font-weight:    bold;
}
.button {
    border:     solid 2px #942923;
    background: #942923;
    color:      #fff;
    font-size:  0.85em;
    font-weight:    bold;
}
form table td.value select {
}
form table td.value textarea {
}


.explanation {
    font-size:  0.85em;
    color:      #666;
}

.adminPanelWrapper {
    float:      left;
}
.adminPanel {
    margin:     5px;
    padding:    5px;
    border-right:   solid 1px #ccc;
    border-bottom:  solid 1px #ddd;
    background: #f8f8f8;
    filter:     progid:DXImageTransform.Microsoft.Gradient(startColorStr='#ffffff', endColorStr='#cccccc', gradientType='0');
}

/* 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;
}

/* ROOM HIRE CALENDARS */
table.calendar {
}
table.calendar td {
    font-size:  0.8em;
    color:      #fff;
    font-weight:    bold;
    vertical-align: top;

}
table.calendar td div.select {
    text-align: center;
    font-size:  1.1em;
}
table.calendar td div.select a {
    color:      #fff;
    text-decoration: underline;
}
table.calendar td.toolbar {
    font-size:  0.9em;
    color:      #333;
}
table.calendar td.blocked {
    background: #004;
}
table.calendar td.avail {
    background: #090;
}
table.calendar td.partavail {
    background: #c90;
}
table.calendar td.unavail { 
    background: #942923;
}
table.calendar td.padding {
    background: #ddd;
}
table.calendar td.hour {
    width:      55px;
    height:     3em;
}
table.calendar td.dayheader {
    width:      100px;
    background: #999;
    color:      #000;
}
table.calendar td.day {
    width:      100px;
    height:     4em;
}
table.calendar td.month {
    width:      100px;
    height:     4em;
}