/*  THIS IS THE STYLE SHEET FOR "GIANT STEPS, CENTRAL PARK WEST, AND MODULATORY CYCLES", aka "COLTRANE", using Georg's CSS */
/* all CSS validated by W3C CSS Validation Service,  */

html, body 
	{
	margin: 0; padding: 0; 
	}
	
body
	{
	position: relative;
	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 li's (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 /*, #logo h2*/
			{			
			padding: 0; 
			text-align: center;
			margin-top: 50px; 
			margin-bottom: 6px;
			/*margin-left: -15px;
			line-height: 150px;  */
			font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
			font-size: 29px; 
			font-weight: normal;
			color: #8A3404;
			/*border: 1px solid green;*/
			}
			
		/* #logo h2
			{
			 text-align: justify;
			 line-height: 115%;
			 padding: 0; 
		     margin: 4px 4px 4px 4px;
		     font-size: 13px;
			 font-weight: normal;
			}  */


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

#left p.sidebar, p#one
	{
	font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;  
	color: #F9F5E8;
	font-size: 14px; /* original is 14px;  */
	margin-left: 20px; 
	margin-right: 20px; 
	margin-bottom: 0;
	padding: 0;
	line-height: 130%;
	}

#left p#one
	{
	margin-top: 40px;
	}
#left p.sidebar
	{
	margin-top: 26px; /* was 22px;  */
	}
	
	

#left ul#highest
	{
 position: absolute;
	top: 1092px; /* first attempt was 1414px;  */
	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 ul#lowest
	{
	position: absolute;
	bottom: 173px;
	left: 65px;
	}
	
#left li
	{
	margin: 26px 0 0 0;
	padding: 0;
	list-style: none;
	/*border: 1px solid yellow;*/
	}	
	
#left li a
	{
	display: block;
	width: 100px;
	height: 34px;
	background: #495F5F url("images/favicon-for-Coltrane-links3.png") left no-repeat;
	padding: 0 0 0 46px;
	margin: 0;
	font-family: "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Lucida, Verdana, Arial, Helvetica, sans-serif; 
	font-size: 18px; 
	color: #DCD7B0; /* #8A3404; #F9F5E8;*/
	text-decoration:none;
	outline: none;
	/*border:1px solid green; */
	}
	
#left li.first
	{
	margin: 0 0 0 0;
	}	
	
#left li a:hover
	{
	color: #F9F5E8;
	background: #495F5F url("images/favicon-for-Coltrane-links6.png") left no-repeat;
	}



	
/*______________main div____________________________*/
	
#main  /*right div*/
	{
	position: absolute;
	left: 211px; 
	top: 200px; 
	right: 23px; 
	bottom: auto;
	width: 790px; 
	background: #DCD7B0;
	min-height: 1200px;
	}

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


#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;
			}			

#main h1, h1#and, h2, h3 
	{	
	font-family: "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Lucida, Verdana, Arial, Helvetica, sans-serif;
	font-size: 30px; /* was 42 */
	font-weight: 900;
	text-align: center;
	padding-top: 31px;
	padding-bottom: 0;
	margin: 0;
	color: #8A3404; /*  #8A4304; */ /*#8E4D09;*/ /* used #B5650C; before -- it is the orange-yellow Isi sent -- it works well with the other colours */ /* original is #C5683B; */ /* #0E5219; is the dark green Isi suggested */
	}

#main h1#and
	{
	font-size: 24px;
	margin-top: -30px; /* was -25px; */
	margin-bottom:  -35px; /* was -30px; */
	}	

#main h2
	{
	padding-top: 51px;
	font-size: 28px;
	text-align: left;
	margin-left: 75px;
	margin-bottom: -11px;
	}
	
#main h3
	{
	font-size: 15px;
	text-align: center;
	margin-top: 26px;
	margin-bottom: 0;
	padding: 0;
	}
	
	
	
	
	
/* --------------------------- link to PDFINFO ------------------------- */

ul#pdf
	{
	width: 264px;
	margin: 180px 0 0 75px; 
	overflow: visible;
	list-style: none;
	padding: 0;
	background-color: transparent;
	}   
	
ul#pdf li	
	{
	width: 264px; 
	margin: 0 auto; 
	padding: 0;
	/*line-height: 100%; */
	}

ul#pdf li a
	{
	display: block;
	width: 220px;
	height: 100%;
	background: #DCD7B0 url('../../images/PDF-bar.png') no-repeat 0 50%;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 10px;
	color: #451B07; 
	text-decoration: none;
	outline: none;
	margin: 0;
	padding-left: 36px; padding-right: 0; padding-top: 0; padding-bottom: 0
	}
	
ul#pdf li a:hover
	{
	width: 264px;
	color: #8A3404;
	text-decoration: none;
	outline: none;
	}	
	



/* --------------------------- end of link to PDFINFO ---------------------- */








#main p, p.lastmod, p.summary, p.summaryheading, p#about, ul#mods, li#mod1, li#mod2, li#mod3 
	{
	/* width: 640px;  */
	margin-top: 26px;  /* was 22px;    */
	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: 20px; /* 32px; was originally 55px;, without PDFinfo link*/
	}

#main p.h4
	{
	font-style: italic;
	font-weight: 900;
	margin-bottom: -17px;
	}
	
#main p.h5
	{
	font-style: italic;
	font-weight: normal;
	margin-bottom: -17px;
	}

#main p.lastmod
	{
	margin-left: 114px;
	margin-bottom: -17px;
	font-style: italic;
	}
	
#main p.summaryheading
	{
	margin-left: 99px; /*105px;  *//*114px;*/ 
	margin-bottom: -24px;
	}
	
#main p.summary
	{	
	 margin-left: 99px; /*105px; *//*114px;*/ 
	}
	
#main p#about
	{
	margin-top: 36px;
	margin-bottom: 55px;
	font-size: 15px;
	font-style: italic;
	line-height: 160%;
	}

		
#main div#gs_all
	{
	width: 600px; height: 111px; 
	background: url("images/gs_all.gif") no-repeat;
	background-color: #DCD7B0;
	margin: 32px auto 0 auto;
	padding-bottom: 5px; 
	}
	
#main div#cpw_cycle
	{
	width: 599px; height: 109px; 
	background: url("images/cpw_cycle.gif") no-repeat;
	background-color: #DCD7B0;
	margin: 32px auto 0 auto;
	padding-bottom: 5px; 
	}

#main div#gs_all_mods_lite
	{
	width: 600px; height: 453px; 
	background: url("images/gs_all_mods_lite.gif") no-repeat;
	background-color: #DCD7B0;
	margin: 32px auto 0 auto;
	padding-bottom: 5px;
	}
	
#main div#gsmodeb-g
	{
	width: 581px; height: 95px; 
	background: url("images/gsmodeb-g.gif") no-repeat;
	background-color: #DCD7B0;
	margin: 32px auto 0 auto;
	padding-bottom: 5px;
	}

/* ---- 'mixture' pop-up --------- */

a.mix
	{
	position: relative;  
	text-decoration: none;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 10px;
	color: #451B07; 
	vertical-align: super;
	line-height: 100%;
	outline: none;
	zoom:1;
	}
	
 a.mix span
	{
	display: none;
	}  
	
 a.mix:hover 
	{
   background:50% 50%;
   	} 

a.mix:hover span
	{
   display: block;
   position: absolute;
   text-decoration: none;
   outline: none;
   left: 13px; width: 236px;
   padding: 10px; 
   margin: 0; 
   border-right: solid 1px #9F9788;
   border-bottom: solid 1px #9F9788; 
   z-index: 100;
   font: 14px "Trebuchet MS", Helvetica, Arial, sans-serif;
   color: #F9F5E8; 
   background: #495F5F; /* #7F1B08; = dark red-brown of text font colour everywhere else */
   }
   






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

#main div#gs_eb-g_text
	{
	width: 466px; height: 88px; 
	background: url("images/gs_eb-g_text.png") no-repeat;
	background-color: #DCD7B0;
	margin: 27px auto -6px auto;
	padding-bottom: 0px;
	}
	
#main div#gsmodbg
	{
	width: 440px; height: 90px; 
	background: url("images/gsmodbg.gif") no-repeat;
	background-color: #DCD7B0;
	margin: 32px auto 0px auto;
	padding-bottom: 5px;
	}
	
#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 /*I used the same 'a.ct' styling for the 'click here' fragment link, near bottom of page*/
	{
	color: #8A3404; 
	background-color: transparent;
	}  
	
a.ct:hover, a.ct:active, a.ct:focus 
	{
	color: #626237; 
	background-color: transparent;
	}
	
#main div#gsphraseone
	{
	width: 600px; height: 100px; 
	background: url("images/gsphraseone.gif") no-repeat;
	background-color: #DCD7B0;
	margin: 32px auto 0px auto;
	padding-bottom: 5px;
	}
	
#main div#gslastmod1
	{
	width: 600px; height: 127px; 
	background: url("images/gslastmod1.gif") no-repeat;
	background-color: #DCD7B0;
	margin: 32px auto 0px auto;
	padding-bottom: 5px;
	}
	
#main div#gs_last_mod_text
	{
	width: 484px; height: 112px; 
	background: url("images/gs_last_mod_text.png") no-repeat;
	background-color: #DCD7B0;
	margin: 27px auto -6px auto;
	padding-bottom: 0px;
	}
	
#main div#gslastmodcommontone
	{
	width: 530px; height: 255px; 
	background: url("images/gslastmodcommontone.gif") no-repeat;
	background-color: #DCD7B0;
	margin: 32px auto 0px auto;
	padding-bottom: 5px;
	}
	
#main span#arrow
	{
	vertical-align: 10%;
	line-height: 50%;
	}
	
#main div#cpw_all1
	{
	width: 600px; height: 320px; 
	background: url("images/cpw_all1.gif") no-repeat;
	background-color: #DCD7B0;
	margin: 32px auto 0px auto;
	padding-bottom: 5px;
	}
	
	
#main ul#mods
	{
	width: 260px;
	list-style-type: none;
	margin-top: 26px;  
	margin-left: auto;   
	margin-right: auto; 
	margin-bottom: 0;
	padding: 0;
	/*border: 1px solid blue; */
	}

#main li#mod1, li#mod2, li#mod3 
	{
	padding: 0px 0px 18px 36px;
	margin: 0;
	/* border: 1px solid red;*/
	}

#main li#mod1
	{
	background: url("images/cpw1.gif") no-repeat 0 0;
	}

#main li#mod2
	{
	background: url("images/cpw2.gif") no-repeat 0 0;
	}

#main li#mod3
	{
	background: url("images/cpw3.gif") no-repeat 0 0;
	padding-bottom: 3px; }
	
#main span.super
	{
	font-size: 11px;
	vertical-align: .5em;
	line-height: 90%;
	}
	
#main div#cpw_cycle_text
	{
	width: 176px; height: 33px; 
	background: url("images/cpw_cycle_text.png") no-repeat;
	background-color: #DCD7B0;
	margin: 27px auto 2px auto;
	padding-bottom: 0px;
	}
	
#main div#cpw_altered_cycle_text
	{
	width: 276px; height: 35px; 
	background: url("images/cpw_altered_cycle_text.png") no-repeat;
	background-color: #DCD7B0;
	margin: 27px auto 2px auto;
	padding-bottom: 0px;
	}
	
#main div#cpwdesign5brown
	{
	width: 210px; height: 128px; 
	background: url("images/cpwdesign5brown.gif") no-repeat;
	background-color: #DCD7B0;
	margin: 20px auto 2px auto;
	padding-bottom: 0px;
	}

#main div#cpwb-d
	{
	width: 542px; height: 180px; 
	background: url("images/cpwb-d.gif") no-repeat;
	background-color: #DCD7B0;
	margin: 32px auto 0px auto;
	padding-bottom: 5px;
	}
	
#main div#cpwab-f
	{
	width: 510px; height: 176px; 
	background: url("images/cpwab-f.gif") no-repeat;
	background-color: #DCD7B0;
	margin: 32px auto 0px auto;
	padding-bottom: 5px;
	}
	
#main div#cpwab-f_ctpt_text
	{
	width: 500px; height: 152px; 
	background: url("images/cpwab-f_ctpt_text.png") no-repeat;
	background-color: #DCD7B0;
	margin: 24px auto 2px auto;
	padding-bottom: 0px;
	}
	
#main span.arrow
	{
	vertical-align: 10%;
	}
	
#main div#cpwd-ab
	{
	width: 530px; height: 140px; 
	background: url("images/cpwd-ab.gif") no-repeat;
	background-color: #DCD7B0;
	margin: 32px auto 0px auto;
	padding-bottom: 5px;
	}
	
#main div#cpwb-ab_sequence
	{
	width: 586px; height: 315px; 
	background: url("images/cpwb-ab_sequence.gif") no-repeat;
	background-color: #DCD7B0;
	margin: 32px auto 0px auto;
	padding-bottom: 22px;
	}
	
#main div#cpwcb-ab_sequence
	{
	width: 586px; height: 315px; 
	background: url("images/cpwcb-ab_sequence.gif") no-repeat;
	background-color: #DCD7B0;
	margin: 32px auto 0px auto;
	padding-bottom: 22px;
	}
	
#main div#cpwf-b
	{
	width: 531px; height: 134px; 
	background: url("images/cpwf-b.gif") no-repeat;
	background-color: #DCD7B0;
	margin: 32px auto 0px auto;
	padding-bottom: 5px;
	}
	
#main div#cpwfM7-e
	{
	width: 481px; height: 236px; 
	background: url("images/cpwfM7-e.gif") no-repeat;
	background-color: #DCD7B0;
	margin: 32px auto 0px auto;
	padding-bottom: 5px;
	}

#main div#cpwf-fsharp
	{
	width: 417px; height: 215px; 
	background: url("images/cpwf-fsharp.gif") no-repeat;
	background-color: #DCD7B0;
	margin: 32px auto 0px auto;
	padding-bottom: 5px;
	}
	
	
#sig
	{
	width: 200px; height: 58px;
	background-image: url("../images/sig_h1_4.png");
	background-repeat: no-repeat;
	background-color: #DCD7B0;
	margin-top: 64px;
	margin-left: 75px;
	margin-right: auto;
	margin-bottom: 0;   
	padding: 0;
	}
	
#main a.about	
	{
	display: inline-block;
	width: 27px; height: 24px;
	vertical-align: -.4em;
	margin: 0;
	padding: 0;
	background: url("images/favicon-for-Coltrane-links1.png") no-repeat; 
	background-color: #DCD7B0;
	border: none;
	text-decoration: none;
	outline: none;
	}