/*  */
* {
}

body {
   font-family: Verdana, Arial, Sans-serif;
   font-size: 12pt;
   background-color: white;
   background-image: url('images/background.jpg');
   background-repeat: repeat-x;
   background-attachment: fixed;
   background-position: top;
}

A {
   color: #cc6600;
   text-decoration: none;
}
A:hover {
   text-decoration: underline;
}

HR {
   border: 1px solid #cccccc;
}


#mainbackground {
   z-index: 1;
   position: fixed;
   top: 101px;
   left: 0px;
   right: 0px;
   width: 741px;
   height: 623px;
   background-image: url('images/background-graphic.jpg');
   background-repeat: no-repeat;
}

#topbar {
   z-index: 100;
   position: fixed;
   top: 0px;
   left: 0px;
   /*width: 1200px;*/
   width: 110%;
   height: 101px;
   background-image: url('images/topbar.jpg');
   background-repeat: no-repeat;
}

#walllean {
   z-index: 1;
   position: fixed;
   top: 750px;
   left: 0px;
   width: 115px;
   height: 303px;
   background-image: url('images/karenwalllean.gif');
   background-repeat: no-repeat;
}


#menu {
   z-index: 2;
   position: fixed;
   top: 101px;
   left: 0px;
   width: 130px;
   height: 350px;
   padding: 10px 5px 10px 5px;
}

#menu A {
   display: block;
   font-size: 14px;
   text-decoration: none;
   color: #996600;
   font-weight: bold;
   padding: 2px 5px 2px 5px;
   -moz-border-radius: 0px 5px 10px 0px;
}

#menu A.SELECTED {
   color: black;
   border: 1px solid #999999;
   padding: 1px 4px 1px 4px;
}

#menu A.SELECTED:hover {
   background-color: transparent;
   color: black;
}

#menu A:hover {
   color: white;
   background-color: #996600;
}

.submenu {
/*   margin-left: 10px; */
   border-left: 10px solid #cccccc;
}

#main {
   z-index: 2;
   position: absolute;
   top: 101px;
   right: 0px;
   left: 151px;
   padding: 10px 5px 10px 5px;
   margin: 10px;
}

#bar {
   z-index: 101;
   position: absolute;
   position: fixed;
   top: 76px;
   left: 10px;
   font-weight: bold;
   font-size: 14px;
}

H1 {
   font-size: 16pt;
   margin: 0px;
}

.writeup {
   text-align: justify;
   margin: 0px 20px 10px 20px;
   max-width: 38em;
   /* the hack below needs to be properly customized for the layout of the
      page.. sort of a trial-and-error process.
      Source was: http://www.svendtofte.com/code/max_width_in_ie/
    */
   width:expression(
       document.body.clientWidth > (800/12) *
       parseInt(document.body.currentStyle.fontSize)?
           "38em":
           "auto" );

}

.writeup P {
   margin-top: 5px;
   text-indent: 12pt;

}

.relatedLink {
   font-size: 8pt;
   font-style: normal;
   color: #999999;
}


.sidebar {
   float: right;
   width: 200px;
   margin: 0px 10px 10px 20px;
   font-size: 10pt;
   background-color: #fff1cf;
   padding: 5px;
   border: 1px solid #999999;
}

.sidebar P {
   margin-top: 5px;
   text-indent: 12pt;
   text-align: justify;
}


.sidebar h2 {
   margin: 0px;
   font-size: 10pt;
   border-bottom: 1px solid black;
}

TABLE.recordings {
   margin-top: 50px;
   padding: 0px;
   border-collapse: collapse;

}

TABLE.recordings  TH {
   font-size: 10pt;
   text-align: left;
   border: 1px solid #999999;
   background-color: #fff1cf;
   padding: 0px 4px 0px 4px;
}
TABLE.recordings  TD {
   font-size: 10pt;
   padding: 4px 4px 0px 4px;
   vertical-align: top;
}

.right {
   text-align: right;
}

.pictureinset {
   float: right;
   margin: 0px 10px 10px 20px;
   font-size: 8pt;
   font-style: italic;
   color: #666666;
   padding: 5px;
   border: 1px solid #999999;
   text-align: center;
}

.pictureinset IMG {
   border: 1px solid black;
}


.upcoming {
   position: relative;
   padding: 0px;
   margin-top: 20px;
}

.upcoming .series {
	position: relative;
	border: 1px solid #999999;
	-moz-border-radius: 10px;
	margin: 0px 0px 30px 0px;
}

.upcoming .series .stitle {
	position: absolute;
	-moz-border-radius: 10px 10px 0px 0px;
	border-bottom: 1px solid #999999;
	background-color: #FFCF56;
	font-weight: bold;
	font-size: 14pt;
	top: 0px;
	left: 0px;
	right: 0px;
	padding-left: 20px;
}

.upcoming .series .swriteup {
	font-size: 90%;
	margin: 40px 10px 10px 10px;
}

.upcoming .series .swriteup IMG, .upcoming .series .concert .writeup IMG {
	float: right;
	border: 1px solid black;
	padding: 4px;
	margin: 0px 0px 4px 12px;
}
.upcoming .series .concert .writeup IMG {
	float: left;
	margin: 0px 12px 4px 0px;

}

.upcoming .series .concert {
	clear: both;
	position: relative;
	margin: 10px;
	margin-bottom: 30px;
}

.upcoming .series .concert .time {
	position: absolute;
	right: 0px;
	font-size: 12px;
	font-weight: bold;
	top: 20px;
	border: 1px solid #999999;
	padding: 2px 5px 2px 5px;
	-moz-border-radius: 0px 0px 0px 10px;
	background-color: #FFCF56;
}

.upcoming .series .concert .title {
	position: relative;
	top: 0px;
	right: 0px;
	left: 0px;
	border-bottom: 1px solid #999999;
	border-left: 1px solid #999999;
	padding-left: 5px;
	font-weight: bold;
	font-size: 15px;
	height: 20px;
	margin-bottom: 20px;

}

.upcoming .series .concert .writeup {
	font-size: 85%;
	font-style: italic;
}

.upcoming .series .concert TABLE {
	margin-left: 20px;
	margin-right: 20px;
}

.upcoming .series .concert TH, .upcoming .series .concert TD {
	font-size: 12px;
	text-align: left;
	vertical-align: top;

}


.upcoming .series .concert TH {
	padding-right: 5px;
}

.upcoming .series .concert TD {
}

.thumbnailsOuter {
   z-index: 3;
   border: 1px solid #cccccc;
   -moz-border-radius: 5px;
   padding: 10px 10px 0px 10px;
}

.thumbnails {
   width: 100%;

   z-index: 4;
   overflow: auto;
   height: 140px;
}

/* wacky workaround for 'fox on mac' */
.nooverflow {
   overflow: hidden;
}

.thumbnailsInner {
   z-index: 5;
}

.thumbnail {
   display: inline;
/* display: table-cell;*/
}

.thumbnails IMG:hover {
   border: 4px solid yellow;
}

.thumbnails IMG {
   border: 4px solid black;
}

#pictureSummary {
   background-color: #dddddd;
   border: 1px solid #999999;
   -moz-border-radius: 10px;
   padding: 20px;
   margin-top: 20px;
}

#pictureSummary IMG {
   border: 1px solid black;
   display: block;
   position: relative;
   display: block;
   margin: 0px;
   margin-right: 20px;
}

#pictureSummary IMG:hover {
   border: 1px solid #cc6600;
}

#pictureSummary .title {
   font-weight: bold;
   font-size: 16pt;
   margin-left: 20px;
   margin-bottom: 40px;
}

#pictureSummary .picNavlinks {
   position: relative;
   font-size: 10px;
   font-weight: bold;
   top: -8px;
   left: 0px;
}

.hidden {
   display: none;
}

#pictureFrame {
   z-index: 150;
   position: absolute;
   top: 30px;
   left: 10px;
/*   border: 1px solid black;
   background-color: white;
   padding: 10px;*/
}

#pictureTitle {
   position: absolute;
   top: -23px;
   height: 10px;
   left: 46px;
   width: 504px;
   height: 22px;
   background-color: #FFCF56;
   font-weight: bold;
   text-align: center;
   font-size: 14px;
   border: 1px solid black;
}
#closeButton, #nextButton, #prevButton {
   position: absolute;
   top: -23px;
   height: 22px;
   width: 22px;
   font-size: 14px;
   background-color: #FFFF00;
   border: 1px solid black;
   font-weight: bold;
   padding: 0px 0px 0px 0px;
   color: black;
   text-align: center;
}

#closeButton {   left: 551px; }
#nextButton { left: 23px; }
#prevButton { left: 0px; }

#closeButton:hover, #nextButton:hover, #prevButton:hover {
   background-color: red;
   color: white;
   text-decoration: none;
}


#pictureFrame IMG {
   border: 1px solid black;
   position: relative;
   display: block;
   padding: 10px;
   background-color: white;
}

#pictureContent {
   position: relative;
   display: block;
}

.blog .header {
   font-size: 11pt;
   font-weight: bold;
   letter-spacing: 1px;
   margin-bottom: 40px;
}


.blog {
   position: relative;
   margin: 30px;
}

.blog .entry {
   position: relative;
   border: 1px solid #999999;
   -moz-border-radius: 10px;
}

.blog .avatar {
   z-index: 5;
   position: absolute;
   left: -24px;
   top: -24px;
}

.blog .avatar IMG {
   width: 48px;
   height: 48px;
   border: 1px solid #999999;
}

.blog .title {
   position: relative;
   z-index: 4;
   top: 0px;
   left: 0px;
   right: 0px;
   height: 18px;
   font-size: 12px;
   font-weight: bold;
   text-align: right;
   padding-left: 30px;
   padding-right: 10px;
   -moz-border-radius: 10px 10px 0px 0px;
   background-color: #FFCF56;
   border-bottom: 1px solid #999999;
}

.blog .date {
   position: absolute;
   top: 20px;
   right: 0px;
   padding-right: 10px;
   font-size: 10px;
   font-style: italic;
   color: #999999;
}

.blog .content {
   font-size: 11pt;
   margin: 20px;
}