/*  THIS IS THE STYLE SHEET FOR "thinkingMusic.ca articles in PDF format" */

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/sidebarpdfsamples.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 h1.sidebar
	{
	font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;  
	color: white; 
	font-size: 40px; /*25px;*/
	font-weight: normal;
	text-align: center;
	margin-top: 63px; 
	margin-bottom: 0;
	padding: 0;
	}

#left h2.sidebar
	{
	width: 125px;
	font-family: "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Lucida, Verdana, Arial, Helvetica, sans-serif; 
	color: #F9F5E8; 
	font-size: 12px; /*18px; */
	font-style: normal;
	text-align: center;
	margin: 10px auto -15px auto;
	padding: 0;
	}


#left div#gsp1
	{
	width: 188px; height: 250px; 
	background: #495F5F url(images/gsp1.png) no-repeat;  
	padding-bottom:0px; margin-left:auto; margin-right:auto; margin-top:190px; margin-bottom:0; background-color:#495F5F 
	}	
	
#left div#gsbm
	{
	width: 188px; height: 522px; 
	background: #495F5F url(images/gsbm.png) no-repeat;  
	padding-bottom:0px; margin-left:auto; margin-right:auto; margin-top: 70px; /*41px;*/ margin-bottom:0; background-color:#495F5F 
	}	

#left div#fbp1
	{
	width: 188px; height: 280px; 
	background: #495F5F url(images/fbp1.png) no-repeat;  
	padding-bottom:0px; margin-left:auto; margin-right:auto; margin-top: 70px; margin-bottom:0; background-color:#495F5F 
	}	


#left ul#highest
	{
 position: absolute;
	top: 1802px; /* 1675px; 1213px; */
	left: 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 li
	{
	margin: 26px 0 0 0;
	padding: 0;
	list-style: none;
	}	
	
#left li a
	{
	display: block;
	width: 100px;
	height: 34px;
	background: #495F5F url(../analyses/coltrane/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(../analyses/coltrane/images/favicon-for-Coltrane-links6.png) no-repeat left;
	}


/* ---- 'pdfsamples' pop-up --------- */

a#pdfsamplesgsp1, a#pdfsamplesgsbm, a#pdfsamplesfbp1
	{
	display: block;
	position: relative;  top: 0; left: 0;
	width: 188px; height: 250px; 
	text-decoration: none;
	outline: none;
	zoom: 1;
	z-index: 2;
	}
	
a#pdfsamplesgsbm
	{
	height: 522px; 
	}	
a#pdfsamplesfbp1	
	{
	height: 280px; 
	}

	
a#pdfsamplesgsp1 span#gsp1span, a#pdfsamplesgsbm span#gsbmspan, a#pdfsamplesfbp1 span#fbp1span 
	{
	display: none;
	}  
	
a#pdfsamplesgsp1:hover, a#pdfsamplesgsbm:hover, a#pdfsamplesfbp1:hover,
a#pdfsamplesgsp1:active, a#pdfsamplesgsbm:active, a#pdfsamplesfbp1:active
 	{
     border: none;  
   	} 
	
a#pdfsamplesgsp1:hover span#gsp1span, a#pdfsamplesgsbm:hover span#gsbmspan,  a#pdfsamplesfbp1:hover span#fbp1span
	{
   display: block;
   position: absolute; top: -207px; left: 240px; /*was 0; I changed it because the diff images were overlapping ea other -- all with same z-index, and no other solution  */
   text-decoration: none;
   outline: none;
   width: 702px; height: 885px;
   padding: 0; 
   margin: 0; 
   border: none;
   background: white; 
   }
   
a#pdfsamplesgsbm:hover span#gsbmspan
	{
	top: -267px; left: 193px;
	width: 900px;
	height: 933px;
    }	
    

a#pdfsamplesfbp1:hover span#fbp1span
	{
	top: -323px; left: 200px;
	width: 874px;
	height: 866px;
    }	

    

a#pdfsamplesgsp1 img, a#pdfsamplesgsbm img, a#pdfsamplesfbp1 img
	{border: none;}


/* ---------- end of 'pdfsamples' pop-up elements ---------  */  

















	
/*______________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.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, 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.table, h1#individualarticles, h1#jazzsuite, h1#classicalsuite, h1#thinkingmusicsuite
	{
	font-family: Verdana, Geneva, sans-serif;
	font-size: 16px;
	font-weight: bold;
	text-align: center;
	color: #451B07; 
	line-height: 135%;
	}
	
#main h1.suite
	{
	padding-top: 26px;
	padding-bottom: 20px;	
	}	
	
	
#main h2.table
	{
	padding-top: 10px;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 13px;
	font-style: italic;
	text-align: center;
	font-weight: normal;
	margin: 0 0 -10px 0;
	color: #451B07; /* #8A3404;  */
	line-height: 135%;
	}

#main p, span#click  
	{
	/* 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: 160px;
	}

#main p#one_purchase
	{
	color: #8A3404;
	/*font-weight: bold;*/
	}


#main div.suite p 
	{
	font-size: 13px;
	margin: 8px 0;
	padding: 0 0;
	}

#main span#click
	{
	margin: 0;
	font-weight: 900;
	font-style: italic;
	color: #451B07;	
	}

#main p#what_will_happen_next
	{
	margin-top: 23px;
	}
#main div#downloadyourpdf
	{
	width: 550px;
	height: 66px; /*was 457px*/
	margin-top: 23px;  
	margin-left: 120px;   
	margin-right: auto;
	margin-bottom: 0;
	padding: 0;
	background: #DCD7B0 url(images/return_to_merchant.png) no-repeat;
	}



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

#main div.table
	{
	/*width: 640px; */
	margin-top: 26px;  
	margin-left: 75px;   
	margin-right: 75px;
	margin-bottom: 0;
	padding: 0;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 13px;
	color: #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: 370px;}
.articles_centre {width: 80px; text-align: center;}
.articles_right {width: 110px; text-align: center; 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;}

#main a.ct 
	{
	line-height: 135%;   
	padding: 0;
	margin: 0;
	background-color: transparent;
	border: none;
	text-decoration: none;
	outline: none;
	}

a.ct, a.ct:link, a.ct:visited 
	{
	color: #8A3404; 
	background-color: transparent;
	}  
	
a.ct:hover, a.ct:active, a.ct:focus 
	{
	color: #626237; 
	background-color: transparent;
	text-decoration: none;
	outline: none;
	}