@charset "utf-8";
/* CSS Document */
body {font-size:20px !important; line-height:1.1;}
p {line-height:1.4;}
.special {color:#666 !important; font-weight:bold; text-decoration:underline !important;}
#content {
	background-color:#fff;
	padding:0 !important; 

}
sup { bottom:4px; !important; font-size:.85em;}
#major-head {
	width:100%;
	height:30px;
	padding-bottom:6px;
	float:left;
	display:inline;
}
#maincontent .subhead {
	font-family: Arial, Helvetica, sans-serif;
	color: #777;
	font-size:18px;
	float:left;
	margin-top:7px;
}
  #keyswitch a {padding:15px;}
  /*Handle Images*/
.chart {
	width:100% !important;
	max-width:100% !important;
}
.chart-scale {
	width:95% !important;
	max-width:95% !important;
	margin-left:10px !important;
	margin-right:auto !important;
}
.whitebg {
	width:100%;
	font-weight:bold;
	padding-top:50px;
	margin-bottom:0px;
}
.greenbg {
	background-color:rgba(93,200,27,0.7);
	margin-top:15px;
	margin-bottom:15px;
	width:100%;
	max-width:100%;
	height:130px;
	border-radius:8px;
	position:relative;
	font-weight:bold !important;
}
/* Typography */
.keyof {
	color:#444 !important; 
	font-family: Arial, Helvetica, sans-serif !important;
	font-size:18px;
	font-weight:normal !important;
}
#major-head {
	font-family: Arial !important;
	font-weight:bold;
	color:#222;
	font-size:32px;
	display:block;
	float:left;
	margin-top:2px;
}
.section {
	font-family: Arial !important;
	font-weight:bold;
	color:#222;
	font-size:28px;
}
#language {
	float:left;
	width:32px;
	height:32px;
	margin-left:12px;
	margin-top:-2px;
}
#description {
	width:auto;
	height:auto;
	display:block;
	float:left;
	margin-left:0px;
	margin-top:30px;
	line-height:1.1;
}
.key-of-chart1 {
	width:100%;
	max-width:100%;
	height:130px;
	float:left;
	display:block;
	margin-top:30px;
	margin-bottom:30px;
}
.key-of-chart2 {
	width:100%;
	max-width:100%;
	height:130px;
	float:left;
	display:block;
	margin-top:30px;
	margin-bottom:30px;
}
.key-of-chart3 {
	width:100%;
	max-width:100%;
	height:130px;
	float:left;
	display:block;
	margin-top:15px;
	margin-bottom:15px;
}
.natural-minor-box {
	width:100%;
	max-width:100%;
	height:120px;
	float:left;
	display:block;
	margin-top:50px;
}
.natural-minor-box-inline {
	max-width:100%;
	height:70px;
	width:160px;
	float:right;
	margin-top:10px;
	margin-bottom:40px;
	margin-left:10px;
}
.ukulelechord1 {
	margin-left:auto;
	margin-right:auto;
	width:70%;
	max-width:70%;
	margin-top:30px;
	margin-bottom:30px;
	display:block;
}
.mixo-scale {
	width:100%;
	max-width:100%;
	margin-top:30px;
	margin-bottom:30px;
	padding-top:15px;
}
.clear {
	clear:both;
}
#firstpos {
	width:76px;
	height:70px;
	padding:10px;
	float:left;
	margin-left:20px;
	text-align:left !important;
	border:white 3px solid;
	font-size:14px !important;
}
.firstpos-desc {
	width:300px;
	height:120px;
	float:left;
	margin-left:15px;
	font-size:18px !important;
	text-align:justify;
}
.major-scale {
	width:100%;
	max-width:100%;
	margin-top:30px;
	margin-bottom:30px;
	padding-top:15px;
}
.majorscale-desc {
	width:400px;
	height:100px;
	float:left;
	text-align:justify;
	margin-left:40px;
	margin-right:30px;
	line-height:1.1;
	font-size:18px !important;
}
#secondpos {
	width:85px;
	height:60px;
	padding:10px;
	float:left;
	margin-left:20px;
	text-align:left !important;
	border:white 3px solid;
	font-size:14px !important;
}
.secondpos-desc {
	width:760px;
	height:80px;
	float:left;
	margin-left:30px;
	font-size:18px !important;
}
#butwait {
	width:100%;
	height:auto !important;
	border:4px solid #888;
	border-radius:20px;
	padding:20px;
	color:#000;
	padding-bottom:50px !important;
	margin-top:30px;
	margin-left:30px;
}	
#butwait span {
	color:#222 !important;
	font-weight:bold;
}
.butwait {line-height:40px; border-bottom:1px solid #ccc;}
#butwait a span {
color:#222 !important;
}
/* Youtube inline stuff 
.yt-vid iframe{
	width:100% !important;
	max-width:100% !important;
	height:auto !important;
}
.yt-vid-inline iframe{
	width:100% !important;
	max-width:100% !important;
	height:260px !important;
	margin-top:10px;
	margin-bottom:10px;
}
.inline-vid1 {
	float:left;
	display:block; 
	margin-top:220px;
	width:100%; 
	max-width:100%;
	height:auto; 
}
.inline-vid2 {
	float:left;
	display:block; 
	margin-top:115px;
	width:100%; 
	max-width:100%;
	height:auto; 
}
.inline-vid3 {
	float:left;
	display:block; 
	margin-top:630px;
	width:100%; 
	max-width:100%;
	height:auto; 
}
.inline-vid4 {
	float:left;
	display:block; 
	margin-top:195px;
	width:100%; 
	max-width:100%;
	height:auto; 
}*/
.first-sec {
	float:left; 
	margin-left:15px; 
	margin-top:3050px;
}
.first-sec-inline {
	float:right; 
	width:100px;
	max-width:100%;
	height:110px !important;
	margin-left:10px; 
	margin-top:-30px;
	margin-bottom:0px;
}
/* #Tablet (Portrait)
================================================== */

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

    @media only screen and (min-width: 768px) and (max-width: 959px) {
  #keyswitch a {padding:15px !important; line-height:16px !important;}
/*Youtube Stuff		
.inline-vid1 {
	margin-top:240px;
}
.inline-vid2 {
	margin-top:135px;
}
.inline-vid3 {
	margin-top:585px;
}
.inline-vid4 {
	margin-top:212px;
}
*/
.first-sec {
	margin-left:15px; 
	margin-top:2600px;
}
#butwait {
	margin-left:0px !important;
	width:680px !important;
	height:160px !important;
	}
#butwait span {
		margin-top:0px !important;
	}
#major-head {
	font-size:32px !important;
}
.greenbg {height:120px !important; margin-bottom:70px;}
	}
    @media only screen and (min-width: 480px) and (max-width: 767px) {
.greenbg {height:120px !important; margin-bottom:70px;}
  #keyswitch a {padding:6px !important; font-size:16px !important;}
	}
	/* #Mobile (Portrait)
================================================== */

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

    @media only screen and (min-width: 320px) and (max-width: 479px) {
  #keyswitch a {padding:10px !important;}
  
  body {font-size:18px !important; line-height:1;}
/*Youtube stuff
.yt-vid-inline iframe{
	width:100% !important;
	max-width:100% !important;
	height:170px !important;
}*/
.key-of-chart1 {
margin-top:10px !important;
margin-bottom:-20px !important;	
}
.key-of-chart2 {
margin-top:10px !important;
margin-bottom:-20px !important;	
}
.key-of-chart3 {
margin-top:10px !important;
margin-bottom:-20px !important;	
}
.whitebg {
margin-top:-20px !important;
}
.ukulelechord1 {
margin-top:20px !important;
margin-bottom:30px !important;	
}

.greenbg {height:90px !important; margin-bottom:70px;}
.first-sec-inline {
	float:right; 
	width:100px;
	max-width:100%;
	height:110px !important;
	margin-left:10px; 
	margin-top:-10px;
	margin-bottom:0px;
}
#butwait {
	margin-left:0px !important;
	width:260px !important;
	height:350px !important;
	}
#butwait span {
		margin-top:-10px !important;
		font-size:22px !important;
	}
#butwait .special {font-size:18px !important;}
#major-head {font-size:22px !important;}
.section {
	font-family: Arial !important;
	font-weight:bold;
	color:#222;
	font-size:26px;
}
.ukulelechord1 {
	width:80%;
	max-width:80%;
}
	}