@charset "utf-8";
/* Browser Reset. Based on http://meyerweb.com/eric/tools/css/reset/ */
/* Modified here to remove specifically styled elements used later. */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
	margin: 0;
}
address, caption, cite, code, dfn, th, var {
	font-style:normal;
	font-weight:normal;
}
caption, th {
	text-align:left;
}
abbr, acronym {
	border:0;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
	content: '';
	content: none;
}
/* remember to define focus styles */
:focus {
	outline: 0;
}
/* remember to highlight inserts somehow */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/* W3C HTML 4 Default CSS Reset */
html, address, blockquote, body, dd, div, dl, dt, fieldset, form, frame, frameset, h1, h2, h3, h4, h5, h6, noframes, ol, p, ul, center, dir, hr, menu, pre {
	display: block;
	unicode-bidi: embed
}
li {
	display: list-item
}
head {
	display: none
}
/* End of resets. */
/* Mac OS-X UI style preference. Lucida alternatives for PC NOT USED; Geneva used instead. Tahoma is similar (Mac). Web safe Verdana back-up. */
body, #pageNote {
	font-family: "Lucida Grande", Geneva, Tahoma, Verdana, sans-serif;
	font-size: 100%; /* Percentage needed for IE 6 and 7 to scale as other browsers at very large or very small sizes. */
	line-height: 1.45; /* Factor x body (paragraph) text size. Unitless to be computed proportionately in each decendant, with a decimal point to cover CSS validator bug. */
}
/* No body width specified to allow horizontal centering of the container. */
body {
	text-align: center; /* IE fix to allow child to be horizontally centered in the Browser. Reset within the content's container. */
	padding: 0;
	color: #FFF;
	background-color: #000;
	margin: 0px;
	border: 0;
	outline: 0;
	vertical-align: baseline;
	background-attachment: scroll;
	background-image: url(images/background.jpg);
	background-repeat: repeat-x;
	background-position: left top;
}
/* Suggested stack for headings. */
h1, h2, h3, h4, h5, h6, .lyrics p, #lyricQuote, #songContent .story:before {
	font-family: Cambria, Georgia, Times, “Times New Roman”, serif;
}
h1, h2, h3, h4, h5, h6 {
	font-weight:bold;
	color: #000;
}
/* em font sizes relative */
h1 {
	font-size: 1.5em;
	margin: 0.5em 0em 0.25em;
}
h2 {
	font-size: 1.375em;
	margin: .5em 0em .273em;
}
h3 {
	font-size: 1.25em;
	margin: .5em 0em .3em;
}
h4 {
	font-size: 1.125em;
	margin: 0.5em 0em .434em;
}
h5 {
	font-size: 1.0em;
	margin: 0.5em 0em 0.5em;
}
h6 {
	font-size: 0.875em;
	margin: 0.5em 0em 0.434em;
}
/* Appropriate em factoring set in each element individually, above to achieve approx 6 pixel lower margin. Or here to globalize. */
h1, h2, h3, h4, h5, h6 {
	margin-top: 0.25em;
	margin-bottom: 2px;
}
/* Style the alt text in the event that an image is not available. */
img {
	font-style: italic;
}
p {
	margin: 0.5em 0px 0em; /* Keep lower margin in check scrolling requirements checked. Top margin of any following content will provide space. */
}
/* List elements will inherit from their ol or ul parent. Ensure left margin and left padding explicitly set for x-browser compatibility. */
ol, ul {
	list-style-position: inside; /* Avoid falling outside the browser if margin and padding were zero. */
	font-size: 1.0em;
	margin: 0.1em 0px 0.2em 10px; /* Offset each new list slightly. Left padding set in Browser reset. Small space above a little more below; list belongs to any content above it. */
}
li, p, #pageNote {
	font-size: 0.875em; /* Equivalent to 14px from 16px body 100%. */
}
li {
	margin: 0.2em 0px 0em;
	list-style-type: disc;
}
/* Keep sub-list fonts equal to their parent and a little more compact. */
li li {
	font-size: 1.0em;
	margin: 0.1em 0px 0em;
	list-style-type: square;
}
#siteMap #mainContent p, #siteMap #mainContent ol, #siteMap #mainContent ul {
	margin-top: 0.25em;
}
.paperContent #mainContent h1 {
	margin-top: -24px; /* Put heading resting on the first set of staves. */
}
#col2Content p {
	margin: 0px;
}
em {
	font-style: italic;
}
strong {
	font-weight: bold;
}
sup {
	font-size: 50%;
	vertical-align: super;
}
li li li {
	list-style-type: circle;
}
/* Miscellaneous classes for reuse */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
	float: right;
	margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
	clear:both;
	height:0px;
	font-size: 1px;
	line-height: 0px;
}
img.fltlft, img.fltrt {
	margin-bottom: 0;
	margin-top: 0.5em;
}
.hidden, .print {
	display: none;
}
/* Fix the top heading near the upper edge of the page. */
.topHeading {
	margin-top: 5px;
}
#container {
	background-image: url(images/background_wood_320_240.jpg);
	background-repeat: repeat;
	background-position: left -20px;
	background-attachment: scroll;
	width: 1024px;
	margin: 0 auto; /* Horizontal centre. */
	text-align: left; /* Reset IE horizontal centering text alignment for the content. */
	overflow: hidden; /* Trim the floated containers relatively positioned. */
	color: #000;
}
#header {
	height: 220px;
	color: #FFF; /* No background-colour, so that wood shows through at the extreme right hand side. */
	background-attachment: scroll;
	background-image: url(images/iomodulebg.jpg);
	background-repeat: no-repeat;
	background-position: 188px top;
	width: 1024px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	position: relative;
}
#header h1 {
	margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
	padding: 20px 0 10px; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
	text-align: center;
	width: 648px;
}
#nav {
	height: 192px;
	width: 630px;
	position: absolute;
	left: 188px;
	top: 0px;
}
#siteMap #nav {
	width: 836px;
}
#banner {
	height: 80px;
	width: 480px;
}
#FlashID {
	position: absolute;
	left: 35px;
	top: 8px;
	height: 80px;
	width: 480px;
	background-color: #030;
}
#navMain {
	height: 62px;
	width: 462px;
	position: absolute;
	bottom: 11px;
	left: 41px;
}
#navAux {
	width: 75px;
	position: absolute;
	height: 183px;
	top: 4px;
	left: 537px;
}
/* Navigation Buttons*/
#navMain a {
	width:75px;
	height:62px;
	float:left;
	display:inline;
	margin: 0px 0px 0px 2px;
	padding: 0px;
	overflow: hidden; /* IE Fix, though not likely to trigger */
}
#navAux a {
	width:75px;
	height:60px;
	float:left;
	margin: 0px 0px 2px;
	padding: 0px;
	overflow: hidden; /* IE Fix, though not likely to trigger */
}
/* JavaScript message just above the main navigation buttons */
#pluginMessages {
	width:470px;
	position: absolute;
	bottom: 85px;
	left: 40px;
	border: none;
}
#pluginMessages p {
	text-align: center;
	font-weight: bold;
}
.shelf {
	background-attachment: scroll;
	background-image: url(images/keyboardshelfshadow_sprite.jpg);
	background-repeat: no-repeat;
	background-position: center -120px;
	height: 28px;
	width: 1024px;
	background-color: #960;
	text-align: right;
}
/* Padding applied in the sub-element for IE lt 6 box model bug. */
.shelfGraffiti {
	font-weight: bold;
	color: #630;
	font-size: 1.125em;
	/* Centralise the single line of text. */
	line-height: 24px;
	padding-top: 0px;
	padding-right: 10px;
	padding-bottom: 0px;
	padding-left: 10px;
	/* z-index to keep expanded text visible above shelf boundaries. */
	position: relative;
	z-index: 100;
	text-shadow: 0px 1px 2px #CC9966;
}
/* The stage is floated to contain any floated content which may expand downwards.*/
#stage {
	margin: 0px;
	padding: 0px;
	width: 1024px;
	background-attachment: scroll;
	background-image: url(images/keyboardshelfshadow_sprite.jpg); /* Shelf shadow. */
	background-repeat: no-repeat;
	background-position: left -148px;
	float: left;
}
/* No width to fix drop float issue. */
#footer {
	background-color: #000;
	height: 148px;
	background-attachment: scroll;
	background-image: url(images/keyboardshelfshadow_sprite.jpg);
	background-repeat: no-repeat;
	background-position: center 29px;
	position: relative;
	clear: left;
}
/* Links on musical instrument graphics in Arial or most similar, to match graphical text in header. Ensure Helvetica does not go below 14px, especially bold. */
#header, #footer, #lyricsPage #navLyrics, .lyrics a, .panelFont {
	font-family: Arial, Helvetica, sans-serif;
}
.panelFont {
	text-shadow: 1px -1px 1px #000000;
	color: #FFF;
}
#mainContent {
	height: auto;
	width: 1024px;
	float: left;
	position: relative;
	margin: 0px;
	padding: 0px;
}
/* Paper manuscript in column 1. */
.paperContent #mainContent {
	width: 586px;
	position: relative;
	top: 0px;
	right: 0px;
	border-top: 0px none #FFC;
	/*border-right: 20px solid #FFC;*/ /* Not needed/seen - beyond the right of the stage. */
	border-bottom: 0px none #FFC;
	border-left: 44px solid #FFC;
	background-position: left 3px;
	border-right: 20px solid #FFC;
}
/* Nested floated divs to ensure paper background fills its required height. */
#shadowContainer {
	float: left;
	width: 1024px;
	background-attachment: scroll;
	background-image:  url(images/paper_lhs_shadow_slice.jpg);
	background-repeat: repeat-y;
	background-position: left top;
	position: relative;
	top: 0px;
	right: 44px; /* Move to show to the left of the paper. */
}
/* Only used on multi-column layouts. Paper and contact page*/
#col1 {
	float: left;
	width: 650px;
	position: relative;
	top: -25px; /* Move up to cover shelf */
	left: 0px;
}
.paperTop {
	background-color: #FFC;
	float: left;
	height: 28px;
	width: 100%;
}
/* Width of col1, subtract the LHS shadow, total width = col1 - 2xborder. Controls width of staves and content. */
.paper {
	float: left;
	width: 586px;
	position: relative;
	background-position: left top;
	border-right: 20px solid #FFC;
	border-left: 20px solid #FFC;
	border-top: 0px none;
	border-bottom: 0px none;
}
/* Only manuscript paper and contact pages have col1. Move left to expose shadow */
.paperContent #col1 {
	width: 626px;
	left: 24px;
}
/* The effective width of the content */
#col1Content {
	width: 576px;
	float: left;
	padding: 0px 5px;
}
.paperContent #mainContent, .staves {
	background-attachment: scroll;
	background-image: url(images/paper_bg_slice.gif);
	background-repeat: repeat;
	background-position: left 5px;
}
#col2 {
	width: 374px;
	height: auto;
	clear: none;
	float: left;
	margin-top: 30px;
}
.paperContent #col2 {
	position: relative;
	left: 24px;
	top: 0px;
}
/* Position links absolutely at the bottom of the footer. */
.accessLinks {
	color: #FFF; /* Divider bars. */
	position: absolute;
	width: 100%;
	bottom: 0px;
	left: 0px;
	padding: 0px 0px 2px;
}
#header .accessLinks {
	margin: 0px 0px 9px;
}
#footer .accessLinks, #socialLinks {
	margin: 0px 0px 3px;
}
#emailLink {
	display: inline;
	float: right;
	margin-right: 10px;
}
.accessLinks ul, .accessLinks li, #socialLinks ul, #socialLinks li {
	margin: 0px;
	padding: 0px;
}
.accessLinks ul {
	text-align: center;
}
.accessLinks ul li {
	font-size: 1.25em;
	display: inline;
}
.accessLinks a {
	margin: 0px 10px;
	padding: 0px;
}
/* ioLinks are specific link customizations for this site - except sitemap page. Lyrics links not styled different if visited - one is a named anchor. */
.ioLinks a:link, #breadcrumbs a:link, #breadcrumbs a:visited {
	color: #060;
}
.ioLinks a:link, .ioLinks a:visited {
	text-decoration: underline; /* Underline in addition to color - do not color only - make obvious. */
}
/* Visited links in the main text change color. */
.ioLinks a:visited {
	color: #609;
}
/* Main site links are uniquely styled. The siteMap pages main content uses the browser default. */
.accessLinks a:link, .accessLinks a:visited, .lyricRef a:link, .lyricRef a:visited {
	color: #FFF;
	text-decoration: none;
}
#breadcrumbs a:link, #breadcrumbs a:visited {
	text-decoration: underline; /* Underline the breadcrumbs to make obvious. */
}
.siteCredits a {
	font-weight: bold;
}
.siteCredits, .siteCredits a:link, .siteCredits a:visited {
	text-decoration: none;
	color: #CCC;
}
.ioLinks a:hover, .ioLinks a:focus, #breadcrumbs a:hover, #breadcrumbs a:focus, .accessLinks a:hover, .accessLinks a:focus, .lyricRef a:hover, .lyricRef a:focus {
 text-decoration: underline;
 color: #0C0;
}
#mainContent a.imgLink {
	padding: 5px;
}
/* Show accessibility focus to keyboard tabbed image buttons and links. Will also show onClick - deal with later with js forcing onBlur() */
#header a:focus, #socialLinks a:focus, #mainContent a.imgLink:focus, input:focus, textarea:focus, select:focus {
	outline:#0C0 dotted 1px;
}
#header .accessLinks a:focus {
	outline: 0;
}
.ioLinks a:active, #breadcrumbs a:active, .accessLinks a:active, .lyricRef a:active {
	text-decoration: underline;
	color: #90C;
}
#singerWarning {
	background-color: #FFF;
	padding: 5px;
	border: 15px solid #000;
	margin-right: 10px;
}
#mainContent img.woodInset {
	border-top: 3px inset #963;
	border-right: 3px inset #633;
	border-bottom: 3px inset #C96;
	border-left: 3px inset #CC9;
}
/* Wide enough for piano keys plus vertical croll bar. No horizontal scrolling. */
#lyricsPage #navLyrics {
	float: left;
	/* Allow scrollbar width. */
	width: 304px;
	background-color: #000;
	/* These cause Dreamweaver to display incorrectly in Design View. */
	/* Put specific oveflows second to apply to compliant browsers. */
	overflow: auto;
	overflow-x: auto;
	overflow-y: scroll;
	height: 473px;
	padding: 5px;
	font-size: 1em;
	margin: 0px;
}
#lyricsPage #navLyrics ul {
	margin: 0px;
}
#lyricsPage #navLyrics li {
	list-style-type: none;
	height: 46px;
	width: 286px;
	padding: 0px;
	margin: 0px;/*overflow: hidden;*/
}
#lyricsPage #navLyrics li a {
	text-decoration: none;
	text-align: right;
	width: 268px;
	display: block;
	padding: 0px 10px 5px;
}
/* Top padding used to position the text appropriately wrt the key's border black keys.*/
#lyricsPage #navLyrics .keyB a, #lyricsPage #navLyrics .keyE a {
	padding-top: 3px;
	height: 38px;
}
#lyricsPage #navLyrics .keyA a {
	padding-top: 10px;
	height: 31px;
}
#lyricsPage #navLyrics .keyG a {
	padding-top: 17px;
	height: 24px;
}
#lyricsPage #navLyrics .keyD a {
	padding-top: 13px;
	height: 28px;
}
#lyricsPage #navLyrics .keyC a {
	padding-top: 21px;
	height: 20px;
}
#lyricsPage #navLyrics .keyF a {
	padding-top: 21px;
	height: 19px; /* Slightly narrower than the visibly identical C key. */
}
/* No difference in color for these links - behaving as menu items not visited text. */
#lyricsPage #navLyrics a:link, #lyricsPage #navLyrics a:visited {
	text-decoration: none;
	color: #333;
}
#lyricsPage #navLyrics a:hover, #lyricsPage #navLyrics a:focus {
	color: #0C0;
	text-decoration: underline;
}
#lyricsPage #navLyrics a:active {
	text-decoration: none;
	color: #000;
	padding-left: 11px; /* Move text slightly to simulate key being pressed. */
}
/* Set the specific keyboard graphics on the octave. */
#lyricsPage #navLyrics .keyB a:link, #lyricsPage #navLyrics .keyB a:visited, #lyricsPage #navLyrics .keyB a:hover, #lyricsPage #navLyrics .keyB a:focus {
	background-image: url(lyrics/images/keyboard_sprite.jpg);
	background-position: left top;
	background-repeat: no-repeat;
}
#lyricsPage #navLyrics .keyB a:active {
	background-image: url(lyrics/images/keyboard_sprite.jpg);
	background-position: -288px top;
	background-repeat: no-repeat;
}
#lyricsPage #navLyrics .keyA a:link, #lyricsPage #navLyrics .keyA a:visited, #lyricsPage #navLyrics .keyA a:hover, #lyricsPage #navLyrics .keyA a:focus {
	background-image: url(lyrics/images/keyboard_sprite.jpg);
	background-position: left -46px;
	background-repeat: no-repeat;
}
#lyricsPage #navLyrics .keyA a:active {
	background-image: url(lyrics/images/keyboard_sprite.jpg);
	background-position: -288px -46px;
	background-repeat: no-repeat;
}
#lyricsPage #navLyrics .keyG a:link, #lyricsPage #navLyrics .keyG a:visited, #lyricsPage #navLyrics .keyG a:hover, #lyricsPage #navLyrics .keyG a:focus {
	background-image: url(lyrics/images/keyboard_sprite.jpg);
	background-position: left -92px;
	background-repeat: no-repeat;
}
#lyricsPage #navLyrics .keyG a:active {
	background-image: url(lyrics/images/keyboard_sprite.jpg);
	background-position: -288px -92px;
	background-repeat: no-repeat;
}
#lyricsPage #navLyrics .keyF a:link, #lyricsPage #navLyrics .keyF a:visited, #lyricsPage #navLyrics .keyF a:hover, #lyricsPage #navLyrics .keyF a:focus {
	background-image: url(lyrics/images/keyboard_sprite.jpg);
	background-position: left -138px;
	background-repeat: no-repeat;
}
#lyricsPage #navLyrics .keyF a:active {
	background-image: url(lyrics/images/keyboard_sprite.jpg);
	background-position: -288px -138px;
	background-repeat: no-repeat;
}
#lyricsPage #navLyrics .keyE a:link, #lyricsPage #navLyrics .keyE a:visited, #lyricsPage #navLyrics .keyE a:hover, #lyricsPage #navLyrics .keyE a:focus {
	background-image: url(lyrics/images/keyboard_sprite.jpg);
	background-position: left -184px;
	background-repeat: no-repeat;
}
#lyricsPage #navLyrics .keyE a:active {
	background-image: url(lyrics/images/keyboard_sprite.jpg);
	background-position: -288px -184px;
	background-repeat: no-repeat;
}
#lyricsPage #navLyrics .keyD a:link, #lyricsPage #navLyrics .keyD a:visited, #lyricsPage #navLyrics .keyD a:hover, #lyricsPage #navLyrics .keyD a:focus {
	background-image: url(lyrics/images/keyboard_sprite.jpg);
	background-position: left -230px;
	background-repeat: no-repeat;
}
#lyricsPage #navLyrics .keyD a:active {
	background-image: url(lyrics/images/keyboard_sprite.jpg);
	background-position: -288px -230px;
	background-repeat: no-repeat;
}
#lyricsPage #navLyrics .keyC a:link, #lyricsPage #navLyrics .keyC a:visited, #lyricsPage #navLyrics .keyC a:hover, #lyricsPage #navLyrics .keyC a:focus {
	background-image: url(lyrics/images/keyboard_sprite.jpg);
	background-position: left -276px;
	background-repeat: no-repeat;
}
#lyricsPage #navLyrics .keyC a:active {
	background-image: url(lyrics/images/keyboard_sprite.jpg);
	background-position: -288px -276px;
	background-repeat: no-repeat;
}
/* Lyrics page has stacked containers to create the two etchings behind the lyrics and song info but in front of the wood background. */
#lyricsEtchingBG {
	background-attachment: scroll;
	background-image: url(lyrics/images/lyricsiconetching.png);
	background-repeat: no-repeat;
	background-position: 492px 200px;
	height: 483px;
}
#storyEtchingBG {
	background-attachment: scroll;
	background-image: url(lyrics/images/storyiconetching.png);
	background-repeat: no-repeat;
	background-position: 840px 60px;
	height: 100%;
	width: 100%;
}
#lyricsPage #songContent {
	float:left;
	width: 700px;
	height: 463px;
	/* These cause Dreamweaver to display incorrectly in Design View. */
	/* Put specific oveflows second to apply to compliant browsers. */
	overflow: auto;
	overflow-x: auto;
	overflow-y: auto;
	background-attachment: scroll;
	background-image: url(lyrics/images/globereflect_w236.jpg);
	background-position: 455px 245px;
	background-repeat: no-repeat;
	padding: 10px 0px 10px 10px;
}
/* Javascript adds this class to make an individual set of lyrics fill the visible screen. Must be after the above rule. */
#lyricsPage #songContent.fullScreen {
	height: 473px;
	margin-bottom: 0px;
	padding-bottom: 0px;
}
.lyrics {
	width: 400px;
	font-weight: bold;
	background-position: left 18px;
	margin: 0px 0px 10px;
	float: left;
	padding: 10px 5px;
	line-height: 1em;
	border-top: 1px none #000;
	border-right: 15px solid #FFC;
	border-bottom: 1px none #000;
	border-left: 15px solid #FFC;
}
.audioAvailable {
	font-style: italic;
	font-size: 0.75em;
	display: block;
	margin-bottom: 5px;
	color: #666;
}
.lyrics p {
	font-size: 0.875em;
	line-height: 1.25em;
	padding: 0px;
	margin: 0px 0px .5em;
}
.lyrics h1 {
	margin-top: 0px;
	font-size: 1.25em;
}
.lyrics h2, .lyrics h3 {
	text-transform: uppercase;
	font-weight: normal;
	font-family: "Courier New", Courier, monospace;
	font-size: 1em;
	padding: 0px;
	margin: 0.625em 0px 0.312em;
}
#lyricsPage .lyrics a.lyricsTop {
	/* Ensure lyrics are scrolled to very top with the anchor. */
	/*float: right;*/ /* Float makes a block. */
	display: block;
	visibility: visible; /* hidden;*/
	margin: -20px 0px 0px; /* Same as the upper padding+margin, to ensure jump right to the top and hides previous lyric set. */
	padding: 0px;
	font-size: 1px;
	line-height: 0px;
	height: 20px;
	border: 0;
	text-decoration: none;
}
.lyrics a.lyricsJump {
	float: right;
	margin-top: -1.5em;
}
#lyricsPage .lyrics a.lyricsJump:link, #lyricsPage .lyrics a.lyricsJump:visited {
	color: #060;
}
#lyricsPage .lyrics a.lyricsJump:hover, #lyricsPage .lyrics a.lyricsJump:focus {
	color: #0C0;
}
#lyricsPage .lyrics a.lyricsJump:active {
	color: #90C;
}
#lyricsPage .story {
	background-color: #333;
	width: 220px;
	border: 2px solid #93C;
	float: left;
	padding: 5px;
	margin: 0px 0px 10px 5px;
	font-family: Verdana, Geneva, sans-serif;
}
#lyricsPage .story p {
	font-size: 0.75em;
	color: #FFF;
	margin: 0px;
	padding: 0px;
}
#songContent .story p:before {
	font-style: italic;
	color: #FFF;
	content: "\0022The story behind the song...\0022";
	display: block;
}
#contactPage #col1 {
	position: static; /* Override the relative positioning in front of the shelf. */
	overflow: hidden;
	width: 525px;
}
/* Set explicitly, override manuscript pages */
#contactPage #col1Content {
	color: #FFF;
	background-color: #000;
	width: 523px;
	padding: 0px;
}
#contactPage #col1Content, #contactPage #col1Content h1, input, select, textarea {
	font-family: "Lucida Grande", Geneva, "Segoe UI", Tahoma, "Trebuchet MS", Arial, sans-serif; /* Communicator; default OS for Mac, Windows, Linux (ish) */
}
#contactPage #col1Content h1, #contactPage #formContact label {
	font-size: .875em;
	color: #FFF;
	font-weight: bold;
}
#contactPage #col1Content h1 {
	text-align: left;
	margin: 0px;
	padding-bottom: 0px;
	padding-left: 230px;
	padding-top: 20px;
	position: absolute;
	left: 0px;
	bottom: 20px;
}
#contactPage #col2 {
	width: 498px;
}
#col2Content {
	height: auto;
	width: 100%;
	float: left;
	text-align: center;  /* To auto center horizontally */
	overflow: visible;
}
#col2Content div {
	text-align: left; /* Reseting if any text was included within this content. */
}
#col2 .photoGallery {
	float: left;
	width: 100%;
}
/* Position specific pictures based on their size and location. */
#picTop {
	float: left;
	margin: 14px 0px 0px 47px;
}
#picBot {
	float: left;
	margin: 0px 0px 0px 5px;
}
#communicatorTop {
	background-attachment: scroll;
	background-color: #000;
	background-image: url(contact/images/communicator_sprite.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	height: 115px;
	width: 100%;
	float: left;
	position: relative;
}
#communicatorCenter {
	width: 390px;
	height: 313px; /* This height plus padding plus communicator top height and 57px default exposed bottom image = min-height set in php generated stylesheet. */
	padding: 5px 45px 0px;
	margin: 0px 0px 0px 43px;
	background-attachment: scroll;
	background-color: #000;
	background-image: url(contact/images/communicator_slice.jpg);
	background-repeat: repeat-y;
	background-position: left top;
	float: left;
}
/* Communicator's entire height is controlled by the communicatorBottom div. Height is defined in other style sheets - php and */
#communicatorBottom {
	background-attachment: scroll;
	background-image: url(contact/images/communicator_sprite.jpg);
	background-repeat: no-repeat;
	background-position: left 317px; /* Precisely positioned as it includes the wood background within the image. */
	clear: left;
	width: 1024px;
}
#communicatorShadow {
	background-attachment: scroll;
	background-color: #C90;
	background-image: url(contact/images/communicatorshadow.jpg);
	background-repeat: repeat-y;
	background-position: left top;
	width: 43px;
	float: left;
}
#formContact, #formFeedback {
	width: 100%;
	margin: 0px;
	padding: 1px 0px 0px; /* Required to clear the focus border. */
	bottom: 0px;
	overflow: auto;
	/* Allow the form to scroll above the bottom graphic. */	
	position: relative;
	border: 0px none #000;
}
#formContact {
	height: 310px; /* Just high enough to eliminate scrollbars at default text size. NOTE: Seems to have no effect when increased. */
}
/* User feedback after sending the contact form. */
#formFeedback {
	height: 263px; /* Just high enough to eliminate scrollbars at default text size. NOTE: Seems to have no effect when increased. */
	border-top: 1px solid #000;
	border-right: 1px none #FFF;
	border-bottom: 1px solid #609;
	border-left: 1px none #FFF;
}
#formContact .formPair {
	float: left;
	width: 100%;
	padding-right: 0px;
	padding-left: 0px;
	margin-bottom: 4px;
	line-height: 20px;
}
label {
	display: block;
	padding-bottom: 0px;
	overflow: hidden; /* IE6, IE7 Expanding box fix. Text still visible if zoomed. */
}
#formContact label {
	text-align: right;
	clear: left;
	float: left;
	width: 115px;
	padding-right: 7px;
	margin-left: 20px;
}
/* Label not included now - matches navigation labels when included. */
#contactPage #formFeedbackNav label {
	font-size: 14px;
	font-weight: normal;
	text-align: center;
	padding: 0px 15px 6px 0px;
}
input, select, textarea {
	font-size: .875em;
	font-weight: normal;
	float: left;
	display: block;
}
input {
	height: 20px;
	width: 221px;
	padding-left: 5px;
}
input, select {
	clear: none;
}
/* To avoid default scrollbars, slightly smaller for Safari. Chrome has no effect - textarea set in php. */
select {
	height: 24px;
	line-height: 24px;
}
/* Default widths, browser-specifics in another php-driven style sheet. */
select {
	width: 228px;
}
/* Message label and textarea. */
/* Wider and narrower to fit optional captcha */
#sprytextarea1.nocaptcha textarea, textarea {
	height: 152px;
	width: 223px;
}
#sprytextarea1.captcha textarea {
	clear:left;
	height: 100px;
	width: 345px;
	margin-left: 20px;
}
#sprytextarea1.captcha {
	margin-top: -5px;
}
/* Label for the message further left */
#sprytextarea1.captcha label {
	text-align: left;
}
#securityCheck.nocaptcha {
	display: none;
}
img#imgCaptcha {
	float: left;
	clear: both;
	padding-left: 21px;
}
input#security_code {
	width: 100px;
}
#captchaInput {
	margin-right: 20px;
	padding-top: 10px;
}
#captchaInput label {
	clear: none;
	width: auto;
	margin-left: 0px;
}
/* Error states for the security captcha. Duplicate the javascript triggered styles. */
.captchaRequiredMsg, .captchaInvalidMsg {
	display: none;
}
.captchaRequiredState .captchaRequiredMsg, .captchaInvalidState .captchaInvalidMsg {
	text-align: right;
	color: #C00;
	display: block;
	clear: left;
	float: left;
	width: 348px;
	margin: -4px 0px 4px 20px;
}
input.captchaRequiredState, .captchaRequiredState input, input.captchaInvalidState, .captchaInvalidState input {
	background-color: #C00;
}
.greenOnGreen {
	background-color: #030;
	border: 1px solid #000;
	color: #6F0;
}
/* user-hidden, php accessed anti-spam bot field */
.orgField {
	display: none;
	position: absolute;
	left: -9999px;
	top: 0px;
}
#formFeedbackHeading, #formFeedbackMessage {
	padding-right: 10px;
	padding-left: 10px;
}
#formFeedbackHeading, #formFeedbackNav {
	font-weight: bold;
	text-align: center;
}
#formFeedbackNav {
	width: 100%;
}
#formFeedbackMessage {
	text-align: left;
}
#contactPage input.contactSubmit {
	font-weight: bold;
	padding: 0px;
	height: 36px;
	width: 66px;
	color: #FFF;
	background-attachment: scroll;
	background-image: url(contact/images/formsend.gif);
	background-repeat: no-repeat;
	background-position: center top;
	border: 1px solid #F00;
	margin-right: 0px;
	margin-bottom: 0px;
}
#contactPage input#formSubmit {
	float: left;
	clear: left;
	margin-top: 0px;
	margin-left: 142px;
}
#contactPage input#formNav {
	float: none;
	margin-right: auto;
	margin-left: auto;
	margin-top: 10px;
}
#contactPage input.contactSubmit:hover, #contactPage input.contactSubmit:focus {
	background-attachment: scroll;
	background-image: url(contact/images/formsend.gif);
	background-repeat: no-repeat;
	background-position: center -36px;
	border: 1px solid #F90;
}
/* IE fails to display the active state. */
#contactPage input.contactSubmit:active {
	background-attachment: scroll;
	background-image: url(contact/images/formsend.gif);
	background-repeat: no-repeat;
	background-position: center -72px;
	border: 1px solid #0F0;
}
.movieBorder {
	border: 5px solid #000;
}
.movie {
	margin: auto auto 0px;
	display: block;
}
#lyricQuote {
	clear: left;
	width: 90%;
	margin: 23px auto 10px; /* Just enough margin to sit the communicator on the lower shelf with 2 lines of lyric. */
	padding: 0px; /* Clear the top groove with the top half leading. */
}
#lyricQuote {
	border-top: 5px groove #AC660E;
}
#lyricQuote p, #pluginMessages p {
	color: #FFF;
	margin: 0;
	text-shadow: 1px 3px 3px #000000;
}
#lyricQuote .lyricSnippet {
	font-size: 110%;
	font-style: italic;
	line-height: 1.2;
	padding-left: 10px;
	padding-right: 10px;
}
.lyricSnippet:before, .lyricSnippet:after {
	font-size: 150%;
	font-weight: bold;
}
.lyricSnippet:before {
	content: "“ ";
	margin-left: -10px;
}
.lyricSnippet:after {
	content: " ”";
	line-height: 0.75;
	float: right;
	margin-right: -10px;
}
#lyricQuote .lyricRef {
	text-align: right;
	font-size: 95%;
	left: 0px;
	/*top: -10px;*/ /* Instead of negative margin - causes IE6 border chaos. */
	margin: 5px 0px 0px;
	line-height: 1.3;
}
.lyricRef:before {
	content: "\2014  ";
}
#outroPage #mainContent ul {
	clear: left;
}
/* Do not style the links to pages, documents or files on the accessible site map page. */
#siteMap #container, #siteMap #stage, #siteMap #mainContent {
/*background-image: none;*/ /* Using this rule alone seems to add an upper margin to the images, therefore keep same background. */
}
#siteMap #header {
	background-attachment: scroll;
	background-color: #333;
	background-image: url(images/introoutrosongs.gif);
	background-repeat: no-repeat;
	background-position: 833px 32px;
}
/* This rule will scale the text on the sitemap page. */
#siteMap #mainContent {
	font-size: 1.0em;
}
#siteMap #container {
	overflow: visible; /* Allow zoomed text to be visible. */
}
/* Increase font size on the accessible site map page. */
#siteMap #header img {
	padding: 0px 0px 17px 23px;
}
#siteMap .column {
	padding: 0px 10px 15px;
	width: 305px;
	border-top: 1px solid #000;
	border-right: 1px solid #666;
	border-bottom: 3px solid #333;
	border-left: 2px solid #333;
	margin-bottom: 10px;
}
#siteMap .staves {
	background-position: left 15px;
}
#siteMap #colL, #siteMap #colM {
	float: left;
}
#siteMap #colL {
	margin-left: 5px;
}
#siteMap #colM {
	margin-left: 15px;
}
#siteMap #colR {
	float: right;
	margin-right: 5px;
}
/* Cross-browser solution for image list-style-image uses background image instead, but does not scale nicely with bigger text. */
#siteMap .sitePages li {
	list-style-image: url(images/lightbuttonplay.gif);
}
#siteMap .audioDocs li {
	list-style-image: url(images/audioplay.gif);
}
#siteMap .lyricsDocs li, #siteMap .lyricsDocsJS li {
	list-style-image: url(images/pdficon_small.gif);
}
#siteMap .getAdobe {
	clear: both;
}
/* Explicitly size to contain any script error messages in the application; Windows Safari. */
/*#counter {
	position: absolute;
	bottom: 1px;
	right: 5px;
	height: 35px;
	width: 90px;
}*/
#counter {
	position: absolute;
	top: 2px;
	right: -100px;
	height: 35px;
	width: 90px;
}
#socialLinks {
	line-height: 0px; /* Keep vertically checked - causes a slight gap in Firefox, Safari and Chrome otherwise. */
	height: 33px;
	margin: 0px;
	padding: 0px;
	position: absolute;
	left: 5px;
	bottom: 0px;  /* Will sit at the same level as the footer links lower margin. */
}
#socialLinks ul li {
	list-style-type: none;
	display: inline;
}
/* Facebook Like link, iframe only trimmed to hide the number on RHS also has inline style and url qery parameters. */
#fbLike, .twitter-share-button {
	position: absolute;
	top: 2px;  /* Will sit left of the social links. */
	z-index: 100;
	overflow: hidden;
}
/* Control the position, for consistent margins, width to trim off the no. of  Likes. */
#fbLike {
	left: 67px;
	width: 45px;
}
.twitter-share-button {
	left: 117px;
	width: 57px; /* Trime the number of Likes. */
}
#socialLinks ul li.optional {
	display: none; /* Only display the Like feature on certain pages. */
}
#homePage #socialLinks ul li.optional {
	display: inline; /* Only display the Like feature on certain pages. */
}
#pageNote {
	background-color: #FFC;
	text-align: left;
	color: #000;
	margin-left: 24px; /* Match the content on the paper in col1. */
	position:absolute;
	left: 0px;
	z-index: 200;
	padding-right: 10px;
	padding-left: 10px;
	margin-top: 3px;
	margin-right: 15px;	/*display: block;*/
	visibility: hidden;
}
#siteCreditsGoWWW {
	font-family: "Times New Roman", Times, serif;
	font-size: 0.875em;
	text-align: right;
	padding-right: 10px;
	float: right;
	position: relative;
	top: 90px;
	right: 0px;
}