body {
	background-color:#ddd;
	padding:0 0 5px 0;
	border:0;
	margin:0;
}
/* -----------   formatting for main divisions   -------------
general layout:
	outline
		header
			logo
			menu
		teaching           ----- (with various divisions depending on material)
			(narrative)
			(tab1, tab2, tab3 etc)  ----- n = the number of lines of tab
			(tabandchord)  ----- boxed chord by tab and diagram
			(chords)       ----- song lyrics with chords
			(dividers)
		footer
			menu
			copyright
------------------------------------------------------- */

#outline{
	position:relative;
	width:96%;
	margin-left:auto;
	margin-right:auto;
	background-color:#fff;
}

#header {}

#logo {
	background-color:#dbb;
	border-bottom:3px solid #f00;
	width:100%;
	padding:0;
}

#menu {}

#teaching {
	width:90%;
	position:relative;
	margin-left:auto;
	margin-right:auto;
	background-color:#fff;
	color:#00f;
	padding:10px 0 0 0;
}

#footer {}

#copyright {
	padding:5px 0 1px 0;
	text-align:center;
}

/* -----------  formatting for dividers  -------------*/
hr {
	width:60%;
	margin-left:auto;
	margin-right:auto;
	color:#aaa;
	background-color:#aaa;
	height:10px;
	border-top:3px solid #000;
	border-bottom:3px solid #000;
}

#header hr, #footer hr {
	width:80%;
	margin-left:auto;
	margin-right:auto;
	height:5px;
	color:#383;
	background-color:#383;
	border:3px solid #383;
}

div .hr1 {
	height:20px;
	width:60%;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:30px;
}

div .hr1a, div .hr1c { /* the idea is to have 3 equal divs with the center div formatted slightly differently */
	border:1px solid #383;
	height:6px;
	width:30%;
	float:left;
	background-color:#383;
	margin-top:3px;
}
div .hr1b {
	border:1px solid #383;
	height:12px;
	width:38%;
	float:left;
	background-color:#383;
	margin:1px 0;
}


/* -----------  formatting for headers  -------------
h1.logo = formatting for the website ref in the header.
h1 = the title sentence.
h1+p = formatting for the first paragraph on the page.

h2 = section headings
h3 = sub headings
h4 = chord and figure captions
h5 = header for the 'extras' box - see further down
--------------------------------------------------*/

h1, h2, h3, h4, h5 {
	font-family:Verdana, Arial, sans-serif;
	color:#383; 
}

#logo h1 {
	color:#383;
	font-family:Arial,sans-serif;
	text-align:center;
	font-size:18pt;
	background-color:#dbb;
	padding:4px 0 6px 0;
	margin:0;
}

h1 {
	color:#fff;
	background-color:#d00;
	font-size:18pt;
	padding: 1px 0 3px 5px;
}
h1+p {
	font-weight:bold; /* makes the 1st para of each page bold */
}

h2 {
	font-size:18pt;
	margin: 12px 0 24px 0;
}

h3 {
	font-size:14pt;
	margin: 18px 0 12px;}

h4 {
	font-size:12pt;
	margin:5px 0 0 0;
}
h4.tab {
	padding:5px 0 10px 25px;
}


/* ---------  paragraph formatting    ---------  */

p, dd, dl, dt {
	font-family:Verdana, Arial, sans-serif;
	color:#000;
	font-size:12pt;
}

.menu p {
	text-align:center;
	margin:5px 0 0 0;
	color:#dbb;
}

/* --------- "extras" div is used to mark out special tips, warnings etc -----------------
------------ (don't overuse!) ------------------------------------------------------------*/

.extras {
	width: 60%;
	margin-left: auto;
	margin-right: auto;
	border: 3px solid #000;
	background-color: #ddd;
	padding: 5px;
}
.extras h5 {
	background-color: #bbb;
	color: #009;
	text-align:center;
	padding:2px 0 2px 0;
	margin: 4px 0 0 0;
	border-bottom:1px solid #000;
}


/* ----------  special coding for chords and lyrics  ---------------*/	
.chords{
    display: inline-block; /* for IE6 to set hasLayout in order to enclose floats */
}
.chords{
    display: block; /* resets the p display to default */
    overflow: hidden; /* make the p enclose the floats */
}
.chords span {
    float: left; /* the two line spans will line up in a row and then wrap to next row */
    margin-right: 0.5em; /* mimics a normal word spacing */
	margin-left:0;
    height: 2.4em;
    line-height: 1.1em;
    text-align: center; /* the short upper line will center over the lower line */
}
.barline {/* the vertical bar divider for a chords and lyrics chart...*/
	padding:0;
}

/* tab formatting:
	format each line as a <p> element.
	only first line of tab needs a class mark up.
	choose the class with the number that matches the total number of lines to be included in the tab
	(eg, 4 lines of tab plus LH fingering plus beat line = tab6)
++ note also that the class "tab" w/out a number is set aside for other elements
	(eg, marking a caption for a tab)*/
.tab1,
.tab2,
.tab2+p,
.tab3,
.tab3+p,
.tab3+p+p,
.tab4,
.tab4+p,
.tab4+p+p,
.tab4+p+p+p,
.tab5,
.tab5+p,
.tab5+p+p,
.tab5+p+p+p,
.tab5+p+p+p+p,
.tab6,
.tab6+p,
.tab6+p+p,
.tab6+p+p+p,
.tab6+p+p+p+p,
.tab6+p+p+p+p+p,
.tab7,
.tab7+p,
.tab7+p+p,
.tab7+p+p+p,
.tab7+p+p+p+p,
.tab7+p+p+p+p+p,
.tab7+p+p+p+p+p+p,
.tab8,
.tab8+p,
.tab8+p+p,
.tab8+p+p+p,
.tab8+p+p+p+p,
.tab8+p+p+p+p+p,
.tab8+p+p+p+p+p+p,
.tab8+p+p+p+p+p+p+p,
.tab9,
.tab9+p,
.tab9+p+p,
.tab9+p+p+p,
.tab9+p+p+p+p,
.tab9+p+p+p+p+p,
.tab9+p+p+p+p+p+p,
.tab9+p+p+p+p+p+p+p,
.tab9+p+p+p+p+p+p+p+p {
	font-family: "Courier New", monospace;
	padding:0 0 0 25px; /* left indented */
	margin:0;
	font-weight:normal; /* h1+p makes the first <p> bold.
						this rule deals with the situation where the opening <p> is part of a tab */
}

/* --------------  formatting for combined tab and chord diagrams  ------------------------- */

div.tabandchord {
	font-family:courier,monospace;  /* ensure tab paragraph is set to "tab1" or "tab2" (see below)*/
	border-width:2px;
	border-style:solid;
	border-color:red;
	margin-bottom:10px;
	width:60%;
	padding:1px 5px 15px 5px;
}
.tabandchord img {
	width:40%;
	float:right;
}


/* -----------  formatting for lists  ----------------------*/

ul, ol {
	font-family:Verdana, Arial, sans-serif;
	font-size:11pt;
	color:#888;
}

/* -----------  formatting for links/anchors   -------------*/

.menu a {
	text-decoration:none;
}

.menu a:link {
	color:#383;
}
.menu a:visited {
	color:#383;
}
.menu a:hover {
	color:#f00;
	background:#dbb;
}
.menu a:active {
	color:#383;
}

/*  -----------  definition lists --------------------------
	(requires different formatting for IE and FF.
		css below is for FF;  for IE formatting, see the file "resources_IE.css".)  */

dl {
	width:100%;
	overflow:hidden; /* these 2 rules are needed to ensure the <dl> element extends vertically 
						to the end of the list. */
}

dt {
	float:left;
	width:15%;
	clear:left;
	border-top:1px solid #000;
	margin:0;
	padding:.5em 0;
	font-weight:bold;
}

dd {
	float:left;
	width:82%;
	border-top:1px solid #000;
	margin:0;
	padding:.5em 0;
}

dd h5 {
	margin:0;
	padding:1.2em 0 0 0;
}
dd p {
	margin:0;
	padding:.25em 0 0 0;
}

dd a {
	text-decoration:none;
	font-weight:bold;
}
dd a:link {
	color:#000;
	background-color:#ddd;
}
dd a:visited {
	color:#000;
	background-color:#ddd;
}
dd a:hover {
	color:#f00;
	background:#dbb;
}
dd a:active {
	color:#000;
	background-color:#ddd;
}



/* -----------  special characters ---------------------------   
quotes
	double = &ldquo; &rdquo;
	single = &lsquo; &rsquo;

-------------*/