@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;
font-family: Arial !important;
font-weight:bold !important;
color:#222;
font-size:36px;
margin-top:2px;
}
#maincontent .subhead {
font-family: Arial, Helvetica, sans-serif;
color: #777;
font-size:18px;
float:left;
margin-top:7px;
}
/*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;
}
.orangebg {
background-color:rgba(241,102,35,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;
}
.section {
font-family: Arial !important;
font-weight:bold;
color:#222;
font-size:26px;
}
#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;
}
.major-diatonic-box {
width:100%;
max-width:100%;
height:120px;
float:left;
display:block;
margin-top:50px;
}
.major-diatonic-box-inline {
max-width:100%;
height:70px;
width:160px;
float:right;
margin-top:10px;
margin-bottom:40px;
margin-left:10px;
}
.guitarchord1 {
float:left;
width:100%;
max-width:100%;
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:2550px;
}
.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) {
/*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;
}
}
/* #Mobile (Portrait)
================================================== */
/* Note: Design for a width of 320px */
@media only screen and (min-width: 320px) and (max-width: 479px) {
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;
}
.guitarchord1 {
margin-top:20px !important;
margin-bottom:0px !important;
}
.orangebg {height:90px !important;}
.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:330px !important;
}
#butwait span {
margin-top:-10px !important;
font-size:22px !important;
}
#major-head {
font-family: Arial !important;
font-weight:bold;
color:#222;
font-size:26px;
display:block;
float:left;
margin-top:2px;
}
}