/* LC fullwidth = 140, LC = 120, RC fullwidth = 185, RC = 165, CC total left + right padding = 40px */

.hiddenmp3player {
  position: absolute;
  z-index: -10;
  left: 0px;
  top: 0px;
  height: 0px;
  width: 0px;
}

body {
	font-family: arial, times, helvetica, sans-serif;	
	min-width: 930px;      /* 2x (LC fullwidth + CC padding) + RC fullwidth = quite a bit less, but my header right + left graphics are wider */
	background-color: #f0e9e4;
	margin: 0px;
	padding: 0px;
	width: 100%; 	/* added this coz FF wasn't filling the screen */
}

#header {
  z-index: 5; position: absolute; left: 0px; top: 0px; width: 100%; background-color: #f0e9e4;
  background-image: url('images/header-repeat.jpg'); background-repeat: repeat-x;
}

#headerprop {
    height: 120px;
    float: right;
    width: 1px;
}

#container {			
  position: relative;		/* fix to IE7 10000px padding-bottom spill over footer */
  overflow: hidden;
  padding-left: 140px;   /* LC fullwidth */
  padding-right: 225px;  /* RC fullwidth + CC padding */
}

#container .column {
  position: relative;
  float: left;
  padding-bottom: 20010px;  /* X + padding-bottom */
  margin-bottom: -20000px;  /* X */
}

#centercolumn {
	min-height: 900px;		/* used to be 1800, but it extended too far down in non-IE (I think IE ignores it, which is why I didn't notice) Now it's the same as the IE min-height hack below */
	padding: 10px 20px; /* CC padding */
	width: 100%;
	z-index: 4; margin-top: 108px;	/* header graphic height */
	background-color: #f0e9e4;
  	background-image: url('images/cc-stave-repeat.jpg'); background-repeat: repeat-x; background-position: 0px 460px;
  	    overflow: hidden;		/* stops lc from jumping about upon resizing of window */
}

/* IE min-height hack */
.prop {
    height: 900px;
    float: right;
    width: 1px;
}

/* IE min-height hack continued */
.clear {
    clear: both;
    height: 1px;
    overflow: hidden;
}

#leftcolumn {
  width: 141px;          /* LC width (ie fullwidth minus 20 for padding) */
  padding: 560px 10px 0px 10px;       /* LC padding (top, right, bottom, left) */
  left: 185px;          /* RC fullwidth */
  margin-left: -100%;
  margin-top: 0px;
  z-index: 2;
  top: 108px;			/* header graphic height */
  background-color: #e5cebc; border-right: 1px solid #000;
  background-image: url('images/lc-right-edge-repeat.jpg'); background-repeat: repeat-y; background-position: 130px 0px;
}

/* Original holy grail IE6 hack to stop the negative margin pulling the left column too far to the left. Changed to left column disappearing hack + IE7 fix */
#container > #leftcolumn {
  left: -180px;             /* Negative of (LC fullwidth + CC padding) = width for all browers other than IE7 */
  margin-left: expression(
  document.all.centercolumn.offsetWidth * -1 +
  parseFloat(document.all.centercolumn.currentStyle.paddingLeft) +
  parseFloat(document.all.leftcolumn.currentStyle.paddingLeft) +
  parseFloat(document.all.leftcolumn.currentStyle.paddingRight)
  ); /* Fix for IE7 */
}

#lc-graphic {
  z-index: 1;			/* changed from -3 to 1 to make it work in Firefox (was fine in IE6 + 7 before) */
  position: absolute; left: 0px; top: -10px;		
}

.paypal-margin {
	margin-left: 0px;
}

#rightcolumn {
  width: 196px;          /* RC width (ie fullwidth minus 20 for padding) - SHOULD BE LESS according to holy grail */
  padding: 264px 0px 0px 0px;   /* RC padding (top, right, bottom, left) top padding is big so that smallmenu is positioned beneath mainmenu */
  margin-right: -250px;  /* Negative of RC fullwidth + CC padding = 225, but rc doesn't display in Opera, Safari + Konqueror. If set to -250, it works: probably coz of having removed padding from rc (note that the purpose of the neg margin is to pull rc into the padding of the container - the value of which is set wrongly now according to the changes I've made */
  z-index: 3;
  top: 108px;			/* header graphic height */
  background-color: #f0e9e4; border-right: 1px solid #000000; border-bottom: solid #000000; border-left: 1px solid #cccccc;
  background-image: url('images/rc.jpg'); background-repeat: no-repeat; background-position: -12px 0px;
}

#footer {
  clear: both;
  background-color: #c0a795; background-image: url('images/footer-background.jpg'); background-repeat: repeat-x;
  position: relative; z-index: 10;
  border-bottom: 2px solid #000000; border-top: 1px solid #000000;
  color: #ffdddd;
  padding: 14px 10px;	/* (top + bottom = 14 each; right + left = 10 each) */
}


/* IE6 Fix for spill over footer */
* html body {
  overflow: hidden;
}
* html #footer-wrapper {
  float: left;
  position: relative;
  z-index: 10;
  clear: both;			/* IE fix for footer jumping up when rc is short */
  width: 100%;
  padding-bottom: 10010px;
  margin-bottom: -10000px;
  background: #f0e9e4;         /* Same as body background */
}



.g-low-a-and-b-anim {
  z-index: 60; position: absolute; right: 145px; top: 23px;
}

.c-anim {
    z-index: 61; position: absolute; right: 109px; top: 0px;
}

.d-anim {
    z-index: 61; position: absolute; right: 173px; top: 78px;
}

.e-anim {
    z-index: 61; position: absolute; right: 154px; top: 79px;
}

.f-sharp-anim {
    z-index: 61; position: absolute; right: 166px; top: 72px;
}

.g-high-anim {
    z-index: 61; position: absolute; right: 173px; top: 77px;
}

.d-note-anim {
    z-index: 61; position: absolute; right: 82px; top: -5px;
}

.e-note-anim {
    z-index: 61; position: absolute; right: 44px; top: -5px;
}

.f-sharp-note-anim {
    z-index: 61; position: absolute; right: 10px; top: -5px;
}

.g-high-note-anim {
    z-index: 61; position: absolute; right: -2px; top: -5px;
}



.arrowstart {
  z-index: 14; position: absolute; right: -4px;
}

#low-g-arrowstart {
  top: 143px;
  }

#a-arrowstart {
  top: 168px;
}

#b-arrowstart {
  top: 193px;
}

#c-arrowstart {
  top: 218px;
}

#d-arrowstart {
  top: 243px;
  }

#e-arrowstart {
  top: 268px;
}

#f-sharp-arrowstart {
  top: 293px;
}

#high-g-arrowstart {
  top: 318px;
  }

#arrowend {
  z-index: 13; position: absolute; right: -3px; top: 107px;
}

.straightarrow {
  position: absolute; z-index: 12; right: -3px;
}

#straightarrow1 {
  top: 150px;
  }

#straightarrow2 {
  top: 175px;
  }
  
#straightarrow3 {
  top: 200px;
  }

#straightarrow4 {
  top: 225px;
  }

#straightarrow5 {
  top: 250px;
  }
  
#straightarrow6 {
  top: 275px;
  }
  
#straightarrow7 {
  top: 300px;
  }

.menutext {
	font-family: arial, times, helvetica, sans-serif;	
  position: absolute; right: 28px;
  text-align: right;
}

#page1 {
  top: 32px;
  }

#page2 {
  top: 57px;
}

#page3 {
  top: 82px;
}

#page4 {
  top: 107px;
}

#page5 {
  top: 132px;
  }

#page6 {
  top: 157px;
}

#page7 {
  top: 182px;
}

#page8 {
  top: 207px;
}
  
#smallmenutext {
  font-family: arial, times, helvetica, sans-serif;	
  text-align: right;
  font-size: 16px;
  padding-left: 0px;
  padding-right: 14px;
  margin-left: 0px;
  line-height: 23px;
  list-style: none;
}


/*
	Menu
*/


a.menu:link { 
	color: #000000;
	font-size: 17px;
	text-decoration: none;
	text-align: center;
	height: 1em;
		font-weight: bold;
	}

a.menu:visited { 
	color: #443322;
	font-size: 17px;
	text-decoration: none;
	text-align: center;
	height: 1em;
		font-weight: bold;
} 

a.menu:active { 
	color: #ffff00;
	font-size: 17px;
	text-decoration: none;
	text-align: center;
	height: 1em;
		font-weight: bold;
			background-color: #000000;
	} 

a.menu:hover { 
	color: #443322;
	font-size: 17px;
	text-decoration: underline;
	text-align: center;
	height: 1em;
		font-weight: bold;
				background-color: #ffddbb;
	} 


.unclickable {
	color: #ffeedd;
	font-size: 17px;
	font-weight: bold;
			background-color: #442200;
} 


/*
	Links
*/


a:link { 
	color: #0000ff; 
	text-decoration: underline; 
	}

a:visited { 
	color: #5511dd;
	text-decoration: underline;  
	} 

a:active { 
	color: #0000ff;
	text-decoration: underline;  
	background: #aa77dd;
	} 

a:hover { 
	color: #8844bb; 
	text-decoration: underline;
	} 



#lcmenu {
  padding-left: 0px;
  margin-left: -5px;
  line-height: 30px;
}

.newsletter-icon { list-style: disc url('images/newsletter-icon.gif') inside; }
.messageboard-icon { list-style: disc url('images/messageboard-icon.gif') inside; vertical-align: center; }
.faves-icon { list-style: disc url('images/faves-icon.gif') inside; }
.friend-icon { list-style: disc url('images/friend-icon.gif') inside; }
.link-icon { list-style: disc url('images/link-icon.gif') inside; }
.paypal-icon { list-style: disc url('images/paypal-icon.jpg') inside; }

a.smalllink:link { 
	color: #0000ff; 
	text-decoration: underline;
	font-size: 13px;
	}

a.smalllink:visited { 
	color: #5511dd;
	text-decoration: underline;
	font-size: 13px;
	}

a.smalllink:active { 
	color: #0000ff;
	text-decoration: underline;  
	background: #aa77dd;
	font-size: 13px;
	}

a.smalllink:hover { 
	color: #8844bb; 
	text-decoration: underline;
	font-size: 13px;
	}

.smallunclickable {
	color: #ffeedd;
	font-size: 13px;
	background-color: #442200;
} 

.rc-small-unclickable {
	color: #ffeedd;
	font-size: 16px;
	background-color: #442200;
} 

a:link img { 
	border: 1px #f0e9e4 solid;
}

a:visited img { 
	border: 1px #f0e9e4 solid;
}

a:active img { 
	border: 1px #f0e9e4 solid;
}

a:hover img { 
	border: 1px #6666ff solid;
}

a:link img.valid { border: none; }
a:visited img.valid { border: none; }

/*
	Text formatting
*/


p
{
	font-family: arial, times, helvetica, sans-serif;
	font-size: 1em;
	font-weight: normal;
	font-style: normal;
	color: #000000;
	line-height: 130%;
	text-align: left;
}

.centered {
	text-align: center;
}

.backingvox {
	text-align: center;
	font-size: 95%;
	font-style: italic;
	color: #666666;
	position: relative; bottom: 2.25em; left: 13em;
}

.victorindent {
	text-indent: 42px;
	font-style: italic;
}

p.lctext
{
	font-family: arial, times, helvetica, sans-serif;
	font-size: 0.8em;
	font-weight: normal;
	color: #555;
	line-height: 110%;
	text-align: left;
	margin-right: 20px;				/* to compensate for the lc width which was extended coz FF wouldn't display the background image (presumably coz of padding) */
}

p.rctext
{
	font-family: arial, times, helvetica, sans-serif;
	font-size: 0.8em;
	font-weight: normal;
	color: #555;
	line-height: 110%;
	text-align: left;
	margin: 0px 25px 0px 20px;				/* to compensate for the deleted rc padding */
}


p.footer
{
	font-family: arial, times, helvetica, sans-serif;
	font-size: 0.9em;
	font-weight: normal;
	color: #000000;
	line-height: 110%;
	text-align: left;
}

pre
{
	font-family: arial, times, helvetica, sans-serif;
	font-size: 1em;
	font-weight: normal;
	color: #000000;
	line-height: 130%;
	text-align: left;
}

ul
{
	font-weight: normal;
		font-style: normal;
	color: #000000;
	line-height: 1.5em;
	margin-left: 30px;
	margin-right: 14px;
	text-align: left;
}


.maroon {
	color: #771133;
}

ol
{
	font-weight: normal;
		font-style: normal;
	color: #000000;
	line-height: 1.5em;
	margin-left: 30px;
	margin-right: 14px;
	text-align: left;
}


.sublist
{
	font-weight: normal;
	font-size: 95%;
	font-style: italic;
	color: #555;
	line-height: 1.4em;
	text-align: left;
	margin-left: 30px;
	margin-right: 14px;
		text-indent: 20px;
		list-style-type: circle;
}

.dim
{
	font-size: 95%;
	font-style: italic;
	color: #666;
}

.dim_non_italic
{
	font-size: 95%;
	color: #666;
}

.dimsmall {
	font-size: 90%;
	margin-right: 14px;
	font-style: italic;
	color: #666;
}

.indent
{
	text-indent: 16px;
}

.dimindent
{
	text-indent: 16px;
	font-size: 95%;
	margin-left: 14px;
	font-style: italic;
	color: #666;
}

.victorindent
{
	text-indent: 54px;
	font-family: arial, times, helvetica, sans-serif;
	font-size: 1em;
	font-weight: normal;
	color: #000;
	line-height: 130%;
	text-align: left;
}

.dimindentedparagraph
{
	margin-left: 22px;
	font-size: 95%;
	font-style: italic;
	color: #666;
}

.dimcentered
{
	text-align: center;
	font-size: 95%;
	font-style: italic;
	color: #666;
}

.rightaligned {
	text-align: right;
}



h1 {
	font-size: 1.7em;
	font-weight: bold;
	line-height: 115%;
	padding-top: 20px;
	padding-bottom: 20px;
	color: #dcb;
}


.glow {
    position: absolute;
    left: 2px; top: 3px;
    color: #753;
  	font-size: 1.7em;
	font-weight: bold;
	line-height: 115%;
	padding-top: 20px;
}



h2 {
	font-size: 1.2em;
	font-weight: bold;
	padding-top: 15px;
	padding-bottom: 15px;
	line-height: 115%;
	color: #642;
}


h3 {
	font-family: arial, times, helvetica, sans-serif;
	font-size: 1.05em;
	line-height: 105%;
	font-weight: bold;
	padding-top: 10px;
	padding-bottom: 10px;
	color: #420;
	text-align: left;
}

.help {
  border-bottom: 1px dotted #444;
  cursor: help;
}






.review {
	background-color: #fff; background-image: url('images/newspaper.jpg'); background-repeat: no-repeat;
	font-family: courier, arial, times, helvetica, sans-serif;
	font-weight: normal;
	font-style: italic;
	color: #444;
	text-align: center;
	font-size: 90%;
	line-height: 110%;
	border: 1px solid #777;
	margin: 2em 2em 0em 2em;
	padding: 1em 0.5em 0em 0.5em;
	overflow: hidden;
}

.review-hellip {
	font-family: arial, times, helvetica, sans-serif;
	font-weight: normal;
	font-style: italic;
	font-size: 95%;
	color: #444;
	text-align: center;
	line-height: 110%;
}

.review-caption-text {
	font-family: arial, times, helvetica, sans-serif;
	font-weight: normal;
	font-style: normal;
	font-size: 95%;
	color: #666;
	text-align: center;
	line-height: 100%;
}


.inverted-commas {
	font-size: 3.5em;
	font-weight: bold;
	font-family: times, arial, helvetica, sans-serif;
	line-height: 110%;
	color: #000;
}

.inverted-comma-close {
	font-size: 3.5em;
	font-weight: bold;
	font-family: times, arial, helvetica, sans-serif;
	line-height: 110%;
	color: #000;
}



.inverted-comma-close-news-page {
	font-size: 3.5em;
	font-weight: bold;
	font-family: times, arial, helvetica, sans-serif;
	line-height: 110%;
	color: #000;
}

.displace-last-line-of-quote {
	font-size: 100%;
	font-style: italic;
	color: #666;
	vertical-align: top;
}

.displace-last-line-of-quote-review {
	font-family: courier, arial, times, helvetica, sans-serif;
	font-weight: normal;
	font-style: italic;
	font-size: 100%;
	color: #444;
	text-align: center;
	vertical-align: top;
}






.hr-dotted {
    display: block;
    margin-left: auto;
    margin-right: auto;
	width: 53%;
	border-top: 1px dashed #777
}

table.centered {
    margin-left: auto;
    margin-right: auto;
}


.emptyspace
{
	padding-bottom: 10px;
}

.bigemptyspace
{
	padding-bottom: 40px;
}


.alertbox
{
	font-family: arial, times, helvetica, sans-serif;
	font-size: 1.3em;
	font-weight: normal;
	color: #ffddbb;
	line-height: 130%;
	text-align: center;
	background-color: #531; border: 1px solid #000;
	margin-left: 84px;
	margin-right: 84px;
}

.ad-format
{
	border: 1px #8f8fff solid;
	width: 90%;
}

.fakeemail
{
	color: #00f;
	text-decoration: underline;
}

.floatleft
{
  float: left;
}
  
.floatright
{
  float: right;
}


.disneythumbnail {
	height: 163px;
	width: 117px;
	float: left;
	padding: 0px;
}

.disney-square-thumbnail {
	height: 163px;
	width: 163px;
	float: left;
	padding: 0px;
}

.disneycharacterthumbnail {
    display: block;
    margin-left: auto;
    margin-right: auto
}

img.thumbnail 
{
	border: 1px #8f8fff solid;
	padding: 4px;
}

.thumbnail-caption-text
{
	font-weight: normal;
	font-style: italic;
	font-size: 85%;
	color: #555555;
	text-align: center;
	caption-side: bottom;
	width: auto;
	line-height: 100%;
}


.captioned-thumbnail-table {
	margin: 1em;
	margin-right: 2em;
}

.ipa {
	height: 26px;
}

.shaded-image {
	height: 210px;
    display: block;
    margin-left: auto;
    margin-right: auto
}

.brclear {
  clear: both;
}

.brclearleft {
  clear: left;
}

.brclearright {
  clear: right;
}

.mp3player {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.mp3playernoncentered {
    margin: 20px;
}

.language-table-numbers {
	text-align: right;
	padding-right: 8px;
}

.language-table-languages {
	text-align: left;
	padding-right: 8px;
	font-weight: bold;
}

.track-listing-number {
	text-align: right;
	padding-right: 8px;
}

.track-listing-title {
	text-align: left;
	padding-right: 8px;
	font-weight: bold;
}

.track-listing-other {
	text-align: left;
	font-style: italic;
	color: #333333;
}

.linktoustextdisplaydemo {
	color: #000000;
	background-color: #ffffff;
}


.linktouscode {
	width: 528px;
	background-color: #000000;
}

.warning-table {
	text-align: center;
	background-color: #ffffff; border: 2px solid #000000;
	margin-left: 84px;
	margin-right: 84px;
}

.warning-text {
	font-family: arial, times, helvetica, sans-serif;
	font-size: 1.2em;
	font-weight: normal;
	color: #ff0000;
	line-height: 150%;
	text-align: center;
	padding: 20px;
}

#lyrics-table {
	border: 2px #000000 solid;
	padding: 7px;
	margin: 5px;
}

.lyrics-table-headings {
	border: 1px #221100 solid;
	padding: 5px;
	font-weight: bold;
	background-color: #ccbbaa;
}

.lyrics-table-lc {
	border: 1px #777777 solid;
	padding: 5px;
	background-color: #eeddcc;
}

.lyrics-table-cc {
	border: 1px #aaaaaa solid;
	padding: 5px;
	margin: 5px;
	font-style: italic;
	color: #444444;
}

.lyrics-table-rc {
	border: 1px #555555 solid;
	padding: 5px;
	margin: 5px;
}

.lyrics-table-rrc {
	border: 1px #aaaaaa solid;
	padding: 5px;
	margin: 5px;
	font-style: italic;
	color: #777777;
	font-size: 90%;
}

.send-to-friend-input {
	padding: 5px;
	font-weight: bold;
	text-align: right;
}

.send-to-friend-input-left {
	padding: 5px;
	font-weight: bold;
	text-align: left;
}

.fakecourierlink {
	font-family: courier, arial;
	color: #0000ff;
}

.send-to-friend-default-text {
	font-family: courier, arial;
	background-color: #ffffff;
	border: 1px #aaaaaa solid;
	padding: 9px;
	text-align: center;
}

.figure {
	color: #cc0000;
	font-weight: bold;
}


.ludo-table {
	border: 2px #000000 solid;
	padding: 7px;
	margin: 5px;
}

.ludo-row-header {
	border: 1px #221100 solid;
	padding: 5px;
	font-weight: bold;
	background-color: #ccbbaa;
}

.ludo-word-header {
	border: 1px #221100 solid;
	padding: 5px;
	font-weight: bold;
	background-color: #ccbbaa;
}

.ludo-eq-header {
	border: 1px #221100 solid;
	padding: 5px;
	font-weight: bold;
	background-color: #ccbbaa;
}

.ludo-def-header {
	border: 1px #221100 solid;
	padding: 5px;
	font-weight: bold;
	background-color: #ccbbaa;
}

.ludo-word {
	border: 1px #777777 solid;
	padding: 5px;
	background-color: #eeddcc;
}

.ludo-eq {
	border: 1px #aaaaaa solid;
	padding: 5px;
	margin: 5px;
	font-style: italic;
	color: #444444;
	text-align: center;
}

.ludo-def {
	border: 1px #555555 solid;
	padding: 5px;
	margin: 5px;
}

.qwerty { font-family: courier, arial; 	font-weight: bold; font-size: 1.7em; }


.hidden
{
	position: absolute;
	left: -9000px;
	top: 0;
}

.smalllineheight
{
	font-weight: normal;
	font-size: 78%;
	margin-top: 2px;
		margin-bottom: 0px;
		margin-left: 16px;
	color: #aaaaaa;
	line-height: 80%;
	text-align: center;
}


.floatingmenubig
{
	font-size: 14px;
		margin-left: 1px;
	color: #dddddd;
	line-height: 122%;
	text-align: left;
}

.floatingmenusmall
{
	font-size: 11px;
		margin-left: 1px;
	color: #dddddd;
	line-height: 122%;
	text-align: left;
}

.floatingdim
{
	font-size: 14px;
		margin-left: 1px;
	color: #aaaaaa;
	line-height: 122%;
	text-align: left;
}

a:focus
{
	background: #ffee00;
}


span.sortarrow
{
	color: #efefef;
    text-decoration: none;
}

#error-body {
	font-family: arial, times, helvetica, sans-serif;		
	background-color: #ffffff;
	margin: 0px;
	padding: 0px;
	width: 100%;
}

#error404 {
	background-color: #f0e9e4; border: 3px solid #000000;
	text-align: center;
	margin-top: 90px;
	padding-left: 40px;
	padding-right: 40px;
}


.error-heading {
    position: relative;
    left: 2px; top: 3px;
    color: #ffeedd;
  	font-size: 1.7em;
	font-weight: bold;
	line-height: 115%;
	padding-top: 20px;
	text-align: center;
}


.strike {
	text-decoration: line-through;
}

.code {
	font-family: courier;
	margin-left: 14px;
}

.Sachs-H1 {
	font-size: 1.25em;
	font-weight: bold;
	color: #753;
}

.Sachs-H2 {
	font-size: 1.15em;
	font-weight: bold;
	color: #531;
	margin-left: 3em;
}

.Sachs-H3 {
	font-size: 1.1em;
	font-weight: bold;
	color: #310;
	margin-left: 6em;
}

.Sachs-H4 {
	font-size: 1.05em;
	font-weight: bold;
	color: #000;
	margin-left: 9em;
}