/*  THIS IS THE STYLE SHEET FOR "All That We Hold" */

html, body 
	{
	margin: 0; padding: 0; 
	}
	

body {
    position: relative;
    min-height: 100vh;
    background: #3d3d3d linear-gradient(to bottom, white 299px,
transparent 299px) no-repeat;
	}

#top /*main div for whole page, horizontally centered*/
	{
	position: relative;
	width: 1024px;
	padding-top: 1px; padding-bottom: 0; padding-right: 0; padding-left: 0;  
	margin-top: -1px; margin-bottom: 0; margin-right: auto; margin-left: auto;	
		/* padding-top and margin top take care of Opera bug that 'lowers page' if fed a long page */
	border: none;	
	background: transparent;
	}



#logo  /* image-replacement div, with h1 (for actual text) and image-containing span */
    	{
     	position: relative;
     	width: 520px;
     	height: 160px;
     	margin-top: 16px; margin-right: auto; margin-bottom: 0px; margin-left: 97px;
		padding: 0;
     	text-align: center;
     	overflow: hidden;
     	background: transparent;
     	border: none;
     	}

		#logo span
			{
			background: url("../../images/logo.jpg") no-repeat;
			position: absolute;
			top: 0; 
			left: 0;
			width: 100%;
			height: 100%
			}
		
		#logo h1 
			{			
			padding: 0; 
			text-align: center;
			margin-top: 50px; 
			margin-bottom: 6px;
			font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
			font-size: 29px; 
			font-weight: normal;
			color: #8A3404;
			}
			
		


#left   /*  sidebar div  */
	{
	position: absolute;
	left: -207px; top: 128px; bottom: 10px; /* The reason why this works is precisely because #left is absolutely positioned 
											   RELATIVE to #main:  whatever #main's 'auto' bottom ends up being, #left's bottom
											   will always be 10px higher.  */
	width: 242px; 
	border: 1px solid #605D5C;
	margin: 0;
	padding: 0;
	background: #495F5F url("../../images/tmldvandimg.png") no-repeat;
	z-index: 2;
	font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;  
	color: #F9F5E8
	}


* html #left {   /*  sidebar div for IE6 - see: <http://www.alistapart.com/articles/conflictingabsolutepositions/> */
height: 1500px;
height: expression(eval(document.compatMode &&
document.compatMode=='CSS1Compat') ?
(parseFloat(this.parentNode.offsetHeight)-140)
:(parseFloat(this.parentNode.offsetHeight)-138));}  

	

#left p.one, p.two
	{
	font-size: 14px; /* original is 14px;  */
	margin-top: 540px;
	margin-left: 71px; 
	margin-right: 20px; 
	margin-bottom: 0;
	padding: 0;
	}

#left p.two
	{
	margin-top: 5px;
	margin-left: 71px;
	margin-right: 20px;
	}


#left ul#highest
	{
 position: absolute;
	top: 250px;  /*1213px; */
	left: 42px; /*65px;*/
	}



 #left ul			/* Note that Georg defines the margins and padding for all id's of ul here, rather than within each id  */
	{				/*   The uls, left on their own, actually leave fairly large margins/padding between their border edges */
	margin: 0;		/*   and the li outer edges. */
	padding: 0;
	}
	
#left ul#buy
	{
 position: absolute;
	top: 650px;  /*1213px; */
	left: 42px; /*65px;*/
	}

#left ul#lyrics
	{
 position: absolute;
	top: 1710px;  /*1213px; */
	left: 47px; /*65px;*/
	}

#left ul#performer
	{
 position: absolute;
	top: 3000px;  /*1213px; */
	left: 47px; /*65px;*/
	}
	
#left ul#lowest
	{
	position: absolute;
	bottom: 173px;
	left: 47px;
	}
	
#left li
	{
	margin: 26px 0 0 0;
	padding: 0;
	list-style: none;
	}	
	
#left li a
	{
	display: block;
	width: 140px; /*100px;*/
	height: 34px;
	background: #495F5F url("images/favicon-for-Coltrane-links3.png") no-repeat left;
	margin: 0;
	font-family: "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Lucida, Verdana, Arial, Helvetica, sans-serif; 
	font-size: 18px; 
	color: #DCD7B0; 
	text-decoration:none;
	outline: none; padding-left: 46px; /*46px; */ padding-right:0; padding-top:0; padding-bottom:0
	}


#left ul#lowest li a, #left ul#lyrics li a, #left ul#performer li a  /*This eliminates the favicons from the lower ul's li anchors*/
	{
	background: #495F5F;
	} 
	
#left li.first
	{
	margin: 0 0 0 0;
	}	
	
#left li a:hover
	{
	color: #F9F5E8;
	background: #495F5F url("images/favicon-for-Coltrane-links6.png") no-repeat left;
	}



	
/*______________main div____________________________*/
	
#main  /*right div*/
	{
	position: absolute;
	left: 211px; 
	top: 200px; 
	right: 23px; 
	bottom: auto;
	width: 790px; 
	background: #DCD7B0; /* url("images/title.png") no-repeat; */
	min-height: 1200px;
	}

#main div#title_div  /* image-replacement div, with h1 for text, and image-containing span */
    	{
     	position: absolute;
     	width: 790px;
     	height: 110px;
     	margin: 0;
		padding: 0;
     	text-align: center;
     	overflow: hidden;
     	background: transparent;
     	border: none;
     	}

#main span#title
			{
			background: url("images/title.png") no-repeat;
			position: absolute;
			top: 0; 
			left: 0;
			width: 100%;
			height: 100%
			}
		
#main h1#title_text
			{			
			padding: 0; 
			text-align: center;
			margin-top: 50px; 
			margin-bottom: 6px;
			font-family: "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Lucida, Verdana, Arial, Helvetica, sans-serif;
			font-size: 24px; 
			font-weight: normal;
			color: #8A3404;
			}



* html #main {height: 1200px; /* min-height for IE5 */}

			

#main h1, h2, h2#susan, h2.performers, #main h1 span
	{	
	font-family: "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Lucida, Verdana, Arial, Helvetica, sans-serif;
	font-size: 18px; 
	font-weight: normal;  
	text-align: center;
	padding-top: 140px; /* was 150px;  */
	padding-bottom: 0;
	margin: 0 0 -140px 0;   /* when Danny's comments are ready, put this back to "0 0 -135 0;"   used to be -145 */
	color: #8A3404; 
	}

#main h1#music
	{	
	text-align: left;
	padding-top: 140px; /* was 150px;  */
	padding-bottom: 0px;
	margin: 0 0 -140px 295px;   /* when Danny's comments are ready, put this back to "0 0 -135 0;"   used to be -145 */
	color: #8A3404; 
	}  
	


#main h1#lyrics
	{	
	text-align: left;
	padding-top: 140px; /* was 150px;  */
	padding-bottom: 0;
	margin: 0 0 -140px 296px;   /* when Danny's comments are ready, put this back to "0 0 -135 0;"   used to be -145 */
	color: #8A3404; 
	}


#main h1 span
	{
	font-size: 14px;
	}
	
#main h2, h2.performers 
	{
	padding-top: 40px; 
	font-size: 20px; 
	font-style: italic;
	text-align: left;
	margin-left: 75px;
	margin-bottom: -11px;
	}

#main h2.performers
	{
	padding-top: 48px;
	}
	
#main div#downbeat
	{
	margin-top: 173px; /* was 183px; -- use it if h1 is lower  */
	margin-left: 116px;
	margin-right: 116px;
	margin-bottom: -14px;
	padding: 0; 
	/*border: 1px solid green;*/  
	} 





#main p, p.moremargin, p.performer, #main p.video_photos, p.sig, p#triads, p#points3_4_5, p.grissett, div.grissett, div#grissett_time, p#about 
	{
	/* width: 640px;  */
	margin-top: 26px;  
	margin-left: 75px;   
	margin-right: 75px;
	margin-bottom: 0;
	padding: 0;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 15px;
	color: #451B07;
	line-height: 135%;
	}

#main p#first
	{
	margin-top: 180px; /* was originally 50px;, before PDFinfo link */
	}

#main div.video_music, div.video_animation
	{
	width: 560px; height: 315px; 
	background: #DCD7B0 url("images/All That We Hold, lighter green gradient, reversed, less white.jpg") no-repeat;
	padding-bottom:0px; margin-left:auto; margin-right:auto; margin-top:32px; margin-bottom:0; background-color:#DCD7B0 
	}
	
#main div.video_animation	
	{
	background: #DCD7B0 url("images/All That We Hold video thumbnail, 560.jpg") no-repeat;
	}
	

#main h3.video_credits, h3.video_credits_lines, h3.copyright, h3.animation_credits,  h3.click, h3.photo_copyright
	{
	font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
	font-size: 14px;
	text-align: left;
	font-weight: normal;
	color: #8A3404;	
	margin-top: 16px; 
	margin-left: 226px;
	margin-right: auto;
	margin-bottom: 0px;				
	line-height: 130%;
	text-decoration:none;
	outline: none;
	padding: 0;
	}					

#main h3.video_credits_lines
	{
	margin-top: 1px;
	}
	
#main h3.copyright, h3.click
	{
	margin-top: 6px;
	margin-right: auto; margin-left: auto;
	text-align: center;
	}
	
#main p.moremargin
	{
	margin-top: 36px;
	}
	
	
#main h3.animation_credits
	{
	text-align: center;
	margin-right: auto; margin-left: auto;
	}
	



#main a.reference_page, a.reference_name, a.reference
	{
	/*color: #451B07;*/
	font-style: italic;
	font-size: 15px;
	line-height: 135%;   
	padding: 0;
	margin: 0;
	background-color: transparent;
	border: none;
	text-decoration: none;
	outline: none;
	}

a.reference_page, a.reference_page:link, a.reference_page:visited  
	{
	color: #451B07; /* ORIGINALLY #8A3404; */
	background-color: transparent;
	}  
	
a.reference:hover, a.reference:active, a.reference:focus, a.reference_name:hover,  a.reference_name:active, a.reference_name:focus, a.reference_page:hover, a.reference_page:active, a.reference_page:focus
	{
	color: #626237; 
	background-color: transparent;
	}
	
a.reference
	{
	color: #8A3404;
	background-color: transparent;
	}

a.reference_name
	{
	font-family: "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Lucida, Verdana, Arial, Helvetica, sans-serif;
	font-weight: 900;
	color: #8A3404; /*#451B07;*/
	}

a.reference_page
	{
	font-weight: 900;
	}






#main a.to	
	{
	display: inline-block;
	width: 27px; height: 24px;
	vertical-align: -.7em;
	margin: 0;
	padding: 0;
	background: url("images/favicon-for-Coltrane-links1.png") no-repeat; 
	background-color: #DCD7B0;
	border: none;
	text-decoration: none;
	outline: none;
	}


#main p.lyrics 
	{
	margin-top: 26px;  
	margin-left: 290px;   
	margin-right: 235px;
	margin-bottom: 0;
	padding: 0;
	font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;    /*Verdana, Geneva, sans-serif;  */
	font-size: 15px;
	font-weight: normal;
	color: #8A3404;  /*#451B07; */
	line-height: 135%; 
	}



#main div#photo_yvette, div#photo_michael, div#photo_george, div#photo_michel
	{
	width: 100px;
	height: 100px;
	background-color: transparent;
	margin: 32px auto 0px 75px;
	padding: 0;
	border: none;
	text-decoration: none;
	outline: none;
	}

#photo_yvette
	{
	background: url("images/yvette.jpg") no-repeat; 
	}


#main p.performer
	{
	margin-top: 7px;
	}

#photo_michael
	{
	background: url("images/michael.jpg") no-repeat; 
	}

#photo_george
	{
	background: url("images/george.jpg") no-repeat; 
	}
	
#photo_michel
	{
	background: url("images/michel.jpg") no-repeat;
	}
	

#main p.video_photos	
	{
	margin-top: 12px;
	margin-left: 79px;
	font-family: "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Lucida, Verdana, Arial, Helvetica, sans-serif;
	font-style: italic;
	/*font-weight: 900;*/
	color: #8A3404; /*#451B07;*/
	}	
	
	
#main div#v_photo_6
	{
	position: relative;
	width: 80px;
	height: 60px;
	background-color: transparent;
	margin-left: 79px;
	margin-top:10px;
	margin-right: 20px;
	margin-bottom: 0px;
	padding: 0;
	border: none;
	text-decoration: none;
	outline: none;
	background: url("images/photo6.jpg") no-repeat;
	}	
	
#main div#v_photo_lampshade
	{
	position: relative;
	width: 90px;
	height: 60px;
	background-color: transparent;
	margin-left: 179px;
	margin-top: -60px;
	margin-right: 20px;
	margin-bottom: 0px;
	padding: 0;
	border: none;
	text-decoration: none;
	outline: none;
	background: url("images/lampshade.jpg") no-repeat;
	}		
	
#main div#v_photo_12
	{
	position: relative;
	width: 33px;
	height: 60px;
	background-color: transparent;
	margin-left: 289px;
	margin-top: -60px;
	margin-right: 20px;
	margin-bottom: 0px;
	padding: 0;
	border: none;
	text-decoration: none;
	outline: none;
	background: url("images/photo12.jpg") no-repeat;
	}		
	
#main div#v_photo_13
	{
	position: relative;
	width: 35px;
	height: 60px;
	background-color: transparent;
	margin-left: 342px;
	margin-top: -60px;
	margin-right: 20px;
	margin-bottom: 0px;
	padding: 0;
	border: none;
	text-decoration: none;
	outline: none;
	background: url("images/photo13.jpg") no-repeat;
	}		
	
#main div#v_photo_14
	{
	position: relative;
	width: 92px;
	height: 60px;
	background-color: transparent;
	margin-left: 397px;
	margin-top: -60px;
	margin-right: 20px;
	margin-bottom: 0px;
	padding: 0;
	border: none;
	text-decoration: none;
	outline: none;
	background: url("images/photo14.jpg") no-repeat;
	}		
	
#main div#v_photo_11
	{
	position: relative;
	width: 90px;
	height: 60px;
	background-color: transparent;
	margin-left: 509px;
	margin-top: -60px;
	margin-right: 20px;
	margin-bottom: 0px;
	padding: 0;
	border: none;
	text-decoration: none;
	outline: none;
	background: url("images/photo11.jpg") no-repeat;
	}		
	
#main div#v_photo_18
	{
	position: relative;
	width: 90px;
	height: 60px;
	background-color: transparent;
	margin-left: 619px;
	margin-top: -60px;
	margin-right: 20px;
	margin-bottom: 0px;
	padding: 0;
	border: none;
	text-decoration: none;
	outline: none;
	background: url("images/photo18.jpg") no-repeat;
	}		
	
#main h3.click
	{
	margin-top: 12px;
	}
	
#main h3.photo_copyright
	{
	text-align: left;
	margin-top: 10px;
	margin-left: 79px;
	}
	
#main div#sig
	{
	width: 200px; height: 58px;
	background-image: url("../images/sig_h1_4.png");
	background-repeat: no-repeat;
	background-color: #DCD7B0;
	margin-top: 75px; /* was 0px */
	margin-left: 75px;
	margin-right: auto;
	margin-bottom: 0;   
	padding: 0
	}
	
#main p.sig
	{
	margin-top: 12px;
	}
	
	
	
#main p#about
	{
	margin-top: 36px;
	margin-bottom: 55px;
	font-size: 15px;
	font-style: italic;
	line-height: 160%;
	}



a {text-decoration: none;}


		
	
#main a.about	
	{
	display: inline-block;
	width: 25px; height: 20px;
	vertical-align: -4px; /*-.275em;  */
	margin: 0;
	padding: 0;
	background: #DCD7B0 url("images/note-link2.png") no-repeat; 
	border:medium none; text-decoration:none; outline:none; background-color:#DCD7B0
	}

	
#main a.about	
	{
	width: 27px; height: 24px;
	vertical-align: -.4em;
	background: url("images/favicon-for-Coltrane-links1.png") no-repeat; 
	border: medium none;
	}