body { background-color: white; color: black; }
body { margin: 0em; padding: 0px; font: 10px Arial, helvetica, sans-serif; }

a:visited { color: #442222; }
a { color: black; }
//a[href] { text-decoration: underline; }

/**** Body Backgrounds ****/

/* Use a background image for the left column.  In an ideal world, this would
   be covered by having the #leftcolumn have the height of 100%, but
   CSS2 is kind of lame in some respects... */

body {
    background: white url(images/black-background.png) repeat-y top left; 
}
body.archive {
    background: white url(images/blue-background.png) repeat-y top left;
}
body.homepage { background: #ffcc99; }
body.timeline, body.schedule { background: white; }


/**** Header Style ****/

div#header a { color: #555; }
div#header a:visited { color: #555; }
div#header a:hover { color: #993333; }

div#header { 
  background-color: #ffcc99;
  color: #555;
  margin: 0em;
  padding: 4px 4px .7em 4px;
  border: none;
  border-bottom: 4px solid black;
}

div#header .links { padding-left: 1.2em; vertical-align: bottom; }

div#header .mtglogo { width: 118px; height: 60px; vertical-align: bottom; }

div#header a { padding: .4em; text-decoration: none;
               font-weight: bold; font-size: 120%; }
div#header img { border: none; margin: 0; padding: 0; }


/**** Homepage Styles ****/

body.homepage { color: black; }

/* Big Current Show info; home page */

div#current_show_big, div#upcoming_events { padding: 30px; }

div#current_show_big img,
div#upcoming_events img {
  float: left;
  margin-right: 30px;
  border: .1em solid black;
}

/* Added by quentin 2007/10/23 for Pippin, remove at end of show! */
/* Update from kadauber 2018/04/29 - this just looks better for every show. Leave it. */
div#current_show_big img {
  border: none !important;
}
body.currentshow div#leftcolumn img { border: none !important; }

div#current_show_big .attributions { font-size: 150%; font-weight: bold; }
div#current_show_big h1 { font-size: 200%; }
div#current_show_big { 
  background-color: white; 
  border: none;
}

div#upcoming_events { border-top: 4px solid black; }
div#upcoming_events div { margin-left: 160px; }
div#upcoming_events div p { margin-top: 0; margin-bottom: 1em; margin-left: 2em; text-indent: -2em; }
div#upcoming_events div p.continuation { text-indent: 0em; }

div#upcoming_events .title { font-weight: bold; font-style: italic; margin-right: 1ex; }

/**** Regular page ****/

div#leftcolumn { 
  background-color: black; color: white;
  border: 20px solid black;
  padding: 0;
  width: 130px; height: 100%;
  float: left;
}

body.archive div#leftcolumn { 
    background-color: #223377; color: white;
    border: 20px solid #223377;
}

div#leftcolumn a { color: white; }
div#leftcolumn a:visited { color: #bb9911; }

div#leftcolumn img { border: .1em solid #222222; width:130px; height:130px; }

div#content { padding: 20px; position: absolute; left: 170px; }

div.text { font-size: 130%; text-align: left; }

p.footnote { font-size: 85%; }

/**** Multiple shows ****/

/* Would love to use overflow:auto, but the way KHTML handles it is confusing.
body.timeline #shows { overflow: auto; }
*/

table.timeline { border-collapse: collapse; margin-top: 2em; }

table.timeline td { 
	vertical-align: top; 
	padding:0px; margin: 0px; 
}

td.column { 
    height: 100%;
    width: 190px;
    text-align: left;
    padding-bottom: 40px;
}

td.column img.logo { background-color: #ffcc99; width: 130px; height: 130px; }
td.column.current img.logo { background-color: black; }

td.column h3 { text-align: center; font-size: 140%; font-weight: bold; }
td.column .attribution { font-style: italic; }

td.column.current { background-color: black; color: white; padding-bottom: 2em; }
td.column.current a { color: white; }
td.column.current a:visited { color: #bb9911; }

td.column img.logo {
  display: block;
  padding: 0 30px;
  border-top: 4px solid black;
  border-bottom: 4px solid black;
  text-align: center;
  margin-bottom: 15px;
}
td.column .time { 
  text-align: center;
  font-size: 140%; font-weight: bold; 
  padding: 2px;
}
td.column p,td.column h3 { padding-left: 30px; padding-right: 30px; }

h1, span.titletext { 
  font-weight: bold; font-size: 200%; text-align: left; 
}
h2 { text-align: left; font-size: 160%; }

div.past-navbar { padding-top: 8px; }
span.nav-years a,span.nav-years span { margin: 0px 1em; }
span.nav-years .currentpage { font-size: 120%; font-weight: bold; }

/**** Special for schedule listings ****/
body.schedule h1 { padding: 0 1em; }
body.timeline span.titletext { padding: 0 1em 0 .5em; }

/**** Table Spacing ****/

table.spacing { border: none; }
table.spacing td { padding: 0; margin: 0;}

html,body { height: 100%; }

/**** MTG Tables ****/

table.jobs { border-collapse: collapse; }
table.jobs { margin-bottom: 1.5em; }

table.jobs td,
table.jobs th { padding: .2em; border: .1em solid #888888; }

table.jobs th { 
  background: #223377; color: white; 
  text-align: left;
  height: 1.8em;
  font-size: 130%;
}
table.jobs td { vertical-align: top; font-size: 120%; }

table.jobs td { width: 50%; }
div.officers table.jobs td { width: 33%; }

/**** Contact Form *****/

form { margin-top: 1em; }

form .entry { clear: both; margin: .2em; }

form .entry label { 
    width: 10.5em; text-align: right; float: left; padding-right: 0.2em;
    font-size: 120%;
    font-weight: bold;
}

form .entry input,
form .entry select { text-align: left; }

form .buttons { margin-left: 13em; margin-top: .7em; }
form .buttons input { margin-right: .3em; }

form p { font-size: 120%; }

sup.requiredfield { color: #FF0000; }

div.address { font-size: 120%; }

/***** Ticket Reservations *****/

body.reservations {
    background: #ffcc99 url(images/black-background.png) repeat-y top left; 
}

body.reservations #content {
    padding: 0px;
}

body.reservations #form {
    padding: 20px;
    background: white; 
    border-bottom: .4em solid black;
}

body.reservations form { padding-bottom: 2em; }

div.disclaimer { padding: 20px; }

div.disclaimer p { font-size: 120%; }

div.tix_reserved_warning { font-weight: bold; font-size: 120%; }

p.cash-warning { font-weight: bold; font-size: 140%; }

/***** Copy HTML *****/

div.copyhtml { font-size: 130%; }

div.copyhtml h2 { background-color: #223377; color: white; padding: .2em; }
div.copyhtml h2 a { color: white; }

div.copyhtml h1 { font-size: 150%; }
div.copyhtml h2 { font-size: 120%; }

/***** ProdStaff Tables *****/

table.prodstaff { width: 100%; }
table.prodstaff { border-collapse: collapse; }
table.prodstaff td.staffcolumn { 
     border: 2em solid white; width: 50%; vertical-align: top;
}
table.prodstaff td.staffcolumn table { width: 100%; }

/***** Photos *****/

.photos .image { text-align: center; margin-left: 1em; margin-right: 1em; }
.photos .caption { font-size: 120%; text-align: center; }
.photos .caption.thumbnail { margin-top: -.5em; margin-bottom: 1em; }
.photos .credit { font-style: italic; }

.photos h2 { background-color: #223377; color: white; padding: .2em; font-size: 140%; }

/***** Rehearsals *****/

table.rehearsals { border-collapse: collapse; }

table.rehearsals .day { 
  background: #223377; color: white; 
  height: 1.8em;
}

table.rehearsals td,
table.rehearsals th { 
  padding: .2em; border: .1em solid #888888; 
  text-align: left;
}

table.rehearsals th { font-size: 130%; }
table.rehearsals td { font-size: 120%; }

table.rehearsals .announce { font-weight: bold; text-align: center; }

table.rehearsals .prodstaff { background-color: #ddeeff; }
table.rehearsals .orchestra { background-color: #ddffee; }


/***** Print version *****/
@media print {
    #leftcolumn { display: none; }
    #header { display: none; }
    #validation { display: none; }
    #content { position: relative; }
}