/*  This is the style sheet for "Downloadable audio file of "All That We Hold", by Michael Leibson and Susan Gillis". */

html, body 
	{
	margin: 0; padding: 0; 
	}
	
body
	{
	min-height: 100vh;
	background: #3d3d3d linear-gradient(to bottom, white 299px,
transparent 299px) no-repeat; /*   previous way of doing it:      background: url(images/bodyimage.gif) repeat-x; */
	}	


#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 ul#highest
	{
 position: absolute;
	top: 250px; /*210px; */
	left: 42px; /*20px;*/
	}



#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 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; padding-right:0; padding-top:0; padding-bottom:0
	}



#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;
	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.jpg) 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, h1.bold, li.ol, li.ul, h1.table, #main h2, #main h1 span, h1.suite
	{	
	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: 40px;  
	padding-bottom: 0;
	margin: 0 0 -10px 0; 
	color: #8A3404; 
	}


#main h1 span
	{
	font-size: 14px;
	}

#main h1.bold
	{
	font-weight: 900;
	}
	


#main ol			/* 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: 35px 200px  auto  200px;		/*   and the li outer edges. */
	padding: 0;
	}

#main ul.ul
	{
	margin: 0px auto auto 40px;
	padding: 0;
	}

#main li.ul-image, li.ul-image2
	{
	list-style-type: none;
	width: 333px;
	height: 66px; 
	margin-top: 0px;  
	margin-left: 0px;   
	margin-right: 75px;
	margin-bottom: 20px;
	background: #DCD7B0 url(images/return_to_merchant2.png) no-repeat;
	}

#main li.ul-image2
	{
	margin-top: 21px;
	list-style-type: none;
	width: 333px;
	height: 291px; 
	background: #DCD7B0 url(images/paypal2.png) no-repeat;
	}

#main li.ul-image3
	{
	margin-top: 21px;
	list-style-type: none;
	width: 333px;
	height: 87px; 
	background: #DCD7B0 url(images/paypal3.png) no-repeat;
	}	
	
	
	
#main li.ol  
	{	
	font-size: 15px; 
	font-weight: 900;  
	text-align: left;
	padding: 0; 
	margin: 0;
	color: #8A3404; 
	} 
	
#main li.ul  
	{	
	list-style-type: none;
	margin: 0 auto 20px auto;
	padding: 0;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 15px;
	color: #451B07; 
	line-height: 135%;
	font-weight: normal;  
	text-align: left;
	}

#main p, #main ul#format, #main span#format, #main span.one   
	{
	/* 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: 150px;
	}

#main ul#format
	{
	color: #8A3404;
	list-style-type: disc;
	margin-left: 320px;
	}

#main span#format
	{
	margin: 0;
	color: #8A3404; 
	}


#main span#note
	{
	color: #8A3404; 
	font-weight: 900;
	font-style: italic;
	}
	
#main span#not
	{
	text-decoration: underline;
	}	

#main span#one
	{
	text-decoration: underline;
	font-style: italic;
	}

#main div#end
	{
	height: 100px;
	padding: 0; 
	margin: 0;
	}
	
/* ---------------------------- TABLES -------------------------   */

#main div.table
	{
	/*width: 640px; */
	margin-top: 60px;  
	margin-left: 152px; /*182px; */ /*75px; */ 
	margin-right: 75px;
	margin-bottom: 0;
	padding: 0;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 20px; /*13px;*/
	color: #8A3404; /*#451B07; */
	/*font-style: italic;*/
	font-weight: bold;
	line-height: 135%;
	}

	
table#articles
	{
	table-layout: fixed; 
	width: 560px;
	line-height: 120%;
 	border-collapse: collapse;
 	border: none;
 	margin-top: 10px; margin-bottom: 10px; margin-right: auto; margin-left: auto;
 	padding: 0;
 	}
/* IE6 adjustment */    
* html body #container .transcriptions-top {line-height: 121%;}
/* Opera & Safari adjustment*/   
@media screen and (-webkit-min-device-pixel-ratio:0;){table.transcriptions-top {line-height: 125%;}}

td {border: none; vertical-align: top; padding: 0 0 15px 0; margin-top: 0px; margin-bottom: 0px;}
.articles_left {width: 300px;} /*370px;}*/
.articles_centre {width: 75px; text-align: left;}
.articles_right {width: 150px; padding-left: 10px; text-align: left; overflow: hidden;}

td span, div.suite span, div#jazzsuite span, div#classicalsuite span, div#thinkingmusicsuite span
	{
	/*font-family: Verdana, Geneva, sans-serif;
	font-size: 10px;
	color: #451B07; */
	font-weight: normal;
	}

#main div.suite 
	{
	/*width: 640px; */
	margin-top: 26px;  
	margin-left: 75px;   
	margin-right: 75px;
	margin-bottom: 0;
	padding: 0;
	font-family: Verdana, Geneva, sans-serif;
	text-align: center;
	color: #451B07; 
	/*font-style: italic;*/
	font-weight: bold;
	line-height: 135%;
	}


table.suite
	{
	table-layout: fixed; 
	width: 560px;
	line-height: 120%;
 	border-collapse: collapse;
 	border: none;
 	margin-top: -8px; margin-bottom: 10px; margin-right: auto; margin-left: auto;
 	padding: 0;
 	}
/* IE6 adjustment */    
* html body #container .transcriptions-top {line-height: 121%;}
/* Opera & Safari adjustment*/   
@media screen and (-webkit-min-device-pixel-ratio:0;){table.transcriptions-top {line-height: 125%;}}

table#suite td {border: none; vertical-align: top; text-align: center; padding: 0 0 15px 0; margin-top: 0px; margin-bottom: 0px;}
.suite_1 {width: 110px; text-align: center;} 
.suite_2 {width: 80px; text-align: center;}
.suite_3 {width: 180px; text-align: center;}
.suite_4 {width: 80px; text-align: center;}
.suite_5 {width: 110px; text-align: center; overflow: hidden;} 




a {text-decoration: none;}