html, body {color: #007; min-height: 100% ; }
a:link{ color: #00f }
a:visited{ color: #00f}
h1, .tag{/* letter-spacing: .9em; */ width: 100%; text-align: center}

h1 img { height: 32px; margin-bottom: -4px;  }

h1{background: URL(/img/background.gif) repeat-x; height: 100px; min-height: 100px;}
.tag{ margin-top: -5em;letter-spacing: .9em;}

/* h1{color: #fff; background: #007} */

#navigation{ text-align: center; background: #0a9  ;}
/* #navigation p { font-size: 110%; background: #007; color: #fff; padding: 3px; text-align: center  } */

#navigation p{ display: inline; }
#navigation a, #navigation .ishere{ text-decoration: none; background: #00a; color: #fff; padding: 3px; /* display: block;  */border: 1px solid transparent; font-variant: small-caps }
#navigation a:hover{border-bottom: 1px solid #fff; font-weight: bold}

#footer{text-align: center;  clear:both; width: 100%; border-top: 2px solid #0a9; z-index: 1;
 	background: url(  /img/mjb-logo.gif   ) no-repeat;
	background-position: 50% 2px; padding-top: 55px;
}

#content{  
	padding: 15px; 
	width: 80%;
	font-size: 120%; 
	margin-top: 1%;
	margin-bottom: 1%;
	margin-left: 15% ;
	border-left: 2px solid #0a9;
	border-right: 2px solid #0a9;
	position: relative;
	
	}
.timestamp{ font-style: italic; text-align: right; font-size: 90%;}

/* body.compositions p{ white-space: pre } */

body.compositions #content{
	font-size: 90%;
	width: 80%;max-width: 80%;
	margin-left: 15%;display: table;
}
body.compositions #content h2, 
body.compositions #content h3,
body.compositions #content h4
{
	font-size: 90%;
	margin: 0; padding:0;
}
body.compositions #content h2{
	text-align: center;
}
.opusdetails{
	padding-top: 3px;
	margin-top: 25px;
	/* border-top: 1px solid #ccc; */
	clear: both;
}
.opusdetails strong {
    white-space: pre;
}
hr{clear: both; color: #ccc; background: #ccc; }
body.compositions .opusdetails h2 span{
	font-weight: lighter; 
}

body.compositions .for{
	margin: 0; padding:0; color: #888;
	text-align: center;
}
 body.compositions .sections,  body.compositions ol{
	margin: 0; padding-left:5%;
}

body.compositions .sections{
	/* how on earth does FireFox calculate these percentages? Display is nowhere near IE's and Opera's */ 
	width: 45%; max-width: 45%;  /* height: 100%; */  float: left;  border-right: 1px solid #ccc; 
	display: table-cell;
}
body.compositions .libinfo{
	/* workaround IE bug: width:50% is calculated from the available width to the right of the float, hence it is actually 25%*/
	/* Opera does it right so we give it a max-width to correct the problems the IE workaround introduced */
	width: 100%; max-width: 45%; /* float: right;  border-left: 1px solid #ccc;*/ padding-left: 5%;
	display: table-cell;
}
body.compositions .libinfo p{
	margin: 0; padding: 0;
}
body.compositions .notes{
	font-size: smaller; color: #666; padding-left: 10px;
}

#calendar{  float: right;  }

#languagelinks{ display: none;} 

img.left { float: left; margin: 0 .5em .5em 0; }

#blog { border: 2px solid #415FE8; background: #B0EEFF; font-size: 1em; padding: 1em 2em;}
#blog li { }
#blog li a { }