@charset "utf-8";
/* CSS Document */
sup { bottom:4px; !important; font-size:.85em;}
#col-mid {
	width:97% !important;
}
#blowchord-inline {
	display:none;
}
#major-head {
	font-family: Arial !important;
	font-weight:bold;
	color:#222;
	font-size:32px;
	display:block;
	float:left;
	margin-top:2px;
}
#maincontent .subhead {
	font-family: Arial, Helvetica, sans-serif;
	color: #777;
	font-size:18px;
	float:left;
	margin-top:7px;
}
img {max-width:100% !important;
}
#top {
	display:inline;
	float:left;
	width:100%;
	height:auto;
}
#notation-wrap {
	width:450px;
	height:150px;
	position:relative;
	display:block;
	margin-top:20px;
	float:left;
}
.notation-chart {
	position:absolute;
	z-index:1;
	left:30px;
	top:0px;
	width:370px;
	height:110px;
	background:#fff;
	border:4px solid #000;
	box-shadow: 5px 5px 10px #222;
}
.firstpos {
	position:absolute;
	z-index:2;
	top:22px;
	left:0px;
	background:#fd7e40;
	border:4px solid #000;
	font-size:12px;
	font-family: Arial, Helvetica, sans-serif;
	color:#000;
	padding-top:3px;
	text-align:center;
	width:70px;
	height:60px;
}
.firstpos span {
	font-family: Arial !important;
	font-size:36px !important;
	text-align:center !important;
	font-weight:bold !important;
}
.secondpos {
	position:absolute;
	z-index:2;
	top:22px;
	left:372px;
	background:#fff;
	border:3px solid #000;
	font-size:12px;
	font-family: Arial, Helvetica, sans-serif;
	color:#000;
	padding-top:3px;
	text-align:center;
	width:70px;
	height:60px;
}
.secondpos span {
	font-family: Arial !important;
	font-size:26px !important;
	text-align:center !important;
}
.infobox {
	display:block;
	float:left;
	margin-top:10px;
	width:55%;
	height:auto;
	text-align:left;
}
#blowchord-wrap {
	position:relative;
	display:inline-block;
	float:right;
	margin-right:3%;
	z-index:2;
	width:350px;
	height:410px;
	text-align:center;
}
.blowchord-chart {
	position:relative;
	margin-left:auto;
	margin-right:auto;
	z-index:1;
	margin-top:-20px;
	width:200px;
	height:267px;
}
.blowchord-chart span {
	text-align:center;
}
.blowharp {
	position:relative;
	width:350px;
	height:140px;
	top:-22px;
	margin:auto;
	z-index:2
}
.clear {
	clear:both;
}
#mid {
	width:auto;
	margin-top:-30px !important;
	height:auto;
}
#mid-chords-wrap {
	width:740px;
	height:auto;
	margin-left:auto;
	margin-right:auto;
}
#mid-chords-wrap span {
	font-family: Arial !important;
	font-size:24px !important;
}
#draw1-wrap {
	position:relative;
	display:inline;
	float:left;
	z-index:2;
	width:350px;
	height:410px;
	text-align:center;
}
.draw1-chart {
	position:relative;
	margin-left:auto;
	margin-right:auto;
	z-index:1;
	margin-top:-20px;
	width:200px;
	height:267px;
}
.draw1-harp {
	position:relative;
	width:350px;
	height:140px;
	top:-22px;
	margin:auto;
	z-index:2
}
#draw2-wrap {
	position:relative;
	display:inline;
	float:left;
	z-index:2;
	width:350px;
	height:410px;
	text-align:center;
	margin-left:40px;
}
.draw2-chart {
	position:relative;
	margin-left:auto;
	margin-right:auto;
	z-index:1;
	margin-top:-20px;
	width:200px;
	height:267px;
}
.draw2-harp {
	position:relative;
	width:350px;
	height:140px;
	top:-22px;
	margin:auto;
	z-index:2
}
#bot-chords-wrap {
	width:930px;
	margin-top:20px;
	margin-bottom:30px;
	height:auto;
	margin-left:auto;
	margin-right:auto;
}
#draw3-wrap {
	position:relative;
	display:inline;
	float:left;
	z-index:2;
	width:300px;
	height:410px;
	text-align:center;
}
.draw3-chart {
	position:relative;
	margin-left:auto;
	margin-right:auto;
	z-index:1;
	margin-top:-20px;
	width:200px;
	height:267px;
}
.draw3-harp {
	position:relative;
	width:300px;
	height:120px;
	top:-22px;
	margin:auto;
	z-index:2
}
#draw4-wrap {
	position:relative;
	display:inline;
	float:left;
	z-index:2;
	width:300px;
	height:410px;
	text-align:center;
	margin-left:10px;
}
.draw4-chart {
	position:relative;
	margin-left:auto;
	margin-right:auto;
	z-index:1;
	margin-top:-20px;
	width:200px;
	height:267px;
}
.draw4-harp {
	position:relative;
	width:300px;
	height:120px;
	top:-22px;
	margin:auto;
	z-index:2
}
#draw5-wrap {
	position:relative;
	display:inline;
	float:left;
	z-index:2;
	width:300px;
	height:410px;
	text-align:center;
	margin-left:10px;
}
.draw5-chart {
	position:relative;
	margin-left:auto;
	margin-right:auto;
	z-index:1;
	margin-top:-20px;
	width:200px;
	height:267px;
}
.draw5-harp {
	position:relative;
	width:300px;
	height:120px;
	top:-22px;
	margin:auto;
	z-index:2
}
/* #Tablet (Portrait)
================================================== */

    /* Note: Design for a width of 768px */

    @media only screen and (min-width: 768px) and (max-width: 959px) {
			
			
img {max-width:100% !important;}
#major-head {
font-size:32px !important;	
}
#blowchord-wrap {
	position:relative;
	display:inline-block;
	float:right;
	margin-right:3%;
	z-index:2;
	width:250px;
	height:310px;
	text-align:center;
}
.blowchord-chart {
	position:relative;
	margin-left:auto;
	margin-right:auto;
	margin-top:-20px;
	width:150px;
	height:200px;
}
.blowchord-chart span {
	text-align:center;
}
.blowharp {
	position:relative;
	width:250px;
	height:140px;
	top:-22px;
	margin:auto;
	z-index:2
}
#draw1-wrap {
	position:relative;
	display:inline;
	float:left;
	z-index:2;
	width:300px;
	height:350px;
	text-align:center;
}
.draw1-chart {
	position:relative;
	margin-left:auto;
	margin-right:auto;
	z-index:1;
	margin-top:-20px;
	width:180px;
	height:220px;
}
.draw1-harp {
	position:relative;
	width:300px;
	height:140px;
	top:-5px;
	margin:auto;
	z-index:2
}
#draw2-wrap {
	position:relative;
	display:inline;
	float:right;
	width:300px;
	height:350px;
	text-align:center;
	margin-right:3%;
}
.draw2-chart {
	position:relative;
	margin-left:auto;
	margin-right:auto;
	z-index:1;
	margin-top:-20px;
	width:180px;
	height:220px;
}
.draw2-harp {
	position:relative;
	width:300px;
	height:140px;
	top:-5px;
	margin:auto;
	z-index:2;
}
#bot-chords-wrap {
	width:740px;
	margin-top:20px;
	margin-bottom:30px;
	height:auto;
	margin-left:auto;
	margin-right:auto;
}
#draw3-wrap {
	position:relative;
	display:inline;
	float:left;
	z-index:2;
	width:230px;
	height:310px;
	text-align:center;
	margin-top:20px;
}
.draw3-chart {
	position:relative;
	margin-left:auto;
	margin-right:auto;
	z-index:1;
	margin-top:-20px;
	width:150px;
	height:200px !important;
}
.draw3-harp {
	position:relative;
	width:230px;
	height:120px;
	top:-22px;
	margin:auto;
	z-index:2
}
#draw4-wrap {
	position:relative;
	display:inline;
	float:left;
	z-index:2;
	width:230px;
	height:310px;
	text-align:center;
	margin-left:15px;
	margin-top:20px;
}
.draw4-chart {
	position:relative;
	margin-left:auto;
	margin-right:auto;
	z-index:1;
	margin-top:-20px;
	width:150px;
	height:200px !important;
}
.draw4-harp {
	position:relative;
	width:230px;
	height:120px;
	top:-22px;
	margin:auto;
	z-index:2
}
#draw5-wrap {
	position:relative;
	display:inline;
	float:left;
	z-index:2;
	width:230px;
	height:310px;
	text-align:center;
	margin-left:15px;
	margin-top:20px;
}
.draw5-chart {
	position:relative;
	margin-left:auto;
	margin-right:auto;
	z-index:1;
	margin-top:-20px;
	width:150px;
	height:200px !important;
}
.draw5-harp {
	position:relative;
	width:230px;
	height:120px;
	top:-22px;
	margin:auto;
	z-index:2
}
	}
	/* #Mobile (Portrait)
================================================== */

    /* Note: Design for a width of 480px */

    @media only screen and (min-width: 480px) and (max-width: 767px) {
/* Mobile Switches */	
#blowchord-wrap {
	display:none;
}
#blowchord-inline {
	display:block;
	margin-bottom:30px;
}
.blowharp {
	top:-5px;
}
.subhead {
	font-size:16px;
}
.infobox {
	display:block;
	float:left;
	margin-top:10px;
	width:97%;
	height:auto;
	text-align:left;
}
#mid-chords-wrap {
	width:97%;
}
#bot-chords-wrap {
	width:97%;
}
#draw1-wrap, #draw2-wrap, #draw3-wrap, #draw4-wrap, #draw5-wrap {
margin-left:auto;
margin-right:auto;
margin-top:30px;
margin-bottom:30px;	
float:none;
}
.draw1-harp, .draw2-harp, .draw3-harp, .draw4-harp, .draw5-harp {
min-width:350px !important;

}
	}
/* #Mobile (Portrait)
================================================== */

    /* Note: Design for a width of 320px */

    @media only screen and (min-width: 320px) and (max-width: 479px) {
		
	/* Mobile Switches */	
#major-head {
	font-size:26px;
}
#blowchord-wrap {
	display:none;
}
#notation-wrap {
	width:300px;
	height:100px;
}
.notation-chart {
	position:absolute;
	z-index:1;
	left:12px;
	top:0px;
	width:270px;
	height:80px;
	background:#fff;
	border:2px solid #000;
	box-shadow: none;
}
.firstpos {
	position:absolute;
	z-index:2;
	top:10px;
	left:0px;
	background:#fd7e40;
	border:2px solid #000;
	font-size:11px;
	font-family: Arial, Helvetica, sans-serif;
	text-shadow:none;
	color:#000;
	padding-top:6px;
	text-align:center;
	line-height:10px;
	width:44px;
	height:50px;
}
.firstpos span {
	font-family: Arial !important;
	font-size:20px !important;
	text-align:center !important;
	line-height:26px !important;
	text-shadow:none;
}
.secondpos {
	position:absolute;
	z-index:2;
	top:10px;
	left:257px;
	border:2px solid #000;
	font-size:11px;
	line-height:10px;
	font-family: Arial, Helvetica, sans-serif;
	text-shadow:none;
	color:#000;
	padding-top:6px;
	text-align:center;
	width:44px;
	height:50px;
}
.secondpos span {
	font-family: Arial !important;
	text-shadow:none;
	font-size:20px !important;
	text-align:center !important;
	line-height:22px !important;
}
#blowchord-inline, #draw1-wrap, #draw2-wrap, #draw3-wrap, #draw4-wrap, #draw5-wrap {
	display:block;
	margin-bottom:10px;
	width:300px;
	height:300px;
	margin-left:auto;
	margin-right:auto;
	margin-top:10px;
	margin-bottom:10px;
}
.blowchord-chart, .draw1-chart, .draw2-chart, .draw3-chart, .draw4-chart, .draw5-chart {
	width:150px;
	height:180px;
}
.blowharp, .draw1-harp, .draw2-harp, .draw3-harp, .draw4-harp, .draw5-harp {
	top:5px;
	width:280px;
}
.infobox {
	display:block;
	float:left;
	margin-top:10px;
	width:97%;
	height:auto;
	text-align:left;
}
#mid-chords-wrap {
	width:97%;
}
#bot-chords-wrap {
	width:97%;
}
	}