/* Reveiw date 04.02.21

/* CONTENTS ........

review the notion of splitting all css up into smaller files for specific things BUT remember css 'cascades' 




1 - BASIC Styling 
page reset 
basic page styling   



2 - INDEX Pages

Footer 
Log-in
Register



3 - SITE HOME Pages

Site Header
Site Footer 
Site Nav Bars 



4 - SITE PAGES

Understanding
Rhythm Page 
Exercise Page 
Repertoire Page
Course Pages



5 - GENERAL OTHER STYLING  

image
text
colour

end contents. */
























/* 

1 - BASIC Styling 
page reset 
basic page styling  
*/


*{
  margin: 0;
  padding: 0;
}


body {
    margin: 0 0 0 0;
    font-family: 'Lato', sans-serif;
    font-size: 1.2em;             /* general font before specific text sizing and styling  */
    line-height: 1.3;

    background-color: #e3e2df ;      /*  #edf5e1   #c8a474     */

  }


section {
    
 /* backgroundimage used  http://www.eef4194eb25f5726abe69b6af-11495.sites.k-hosting.co.uk/images/bambooandmoon3.jpg*/
  background-image: url('../site/images/bambooandmoon3-a.jpg');  
  /* Center and scale the image */
  background-position: left; /* top bottom left right center */
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  width: auto;
  height: auto;
  overflow: hidden !important;
}








































/* 

2 - INDEX Pages

Index page
Index Footer 
Log-in
Register

*/








/*  ellipse cx="150" cy="40" rx="120" ry="25" */
/*   text class="ellipsetext" fill="#ffffff" font-size="10" font-family="Verdana" x="60" y="50"   */


@media(max-width:650px){

     .ellipse{ 
     cx: 144px;
     cy: 45px;
     rx: 100px;
     ry: 25px;}


     .indexellipsetext{
     font-size: 10px;}

}



.indexellipsetext{
     font-size: 12px;
 
}



.ellipsetext{
    font-size: 18px;
   }


@media(min-width:1100px){
   .ellipse{
      rx: 120px;
      ry: 30px;
      }
   .ellipsetext{
    font-size: 20px;
   }
}

















.indexwrapper{

  margin:  10% 10% 10% 10%;
  width: 80%;
  color: #000000;

}


.indexinfo{

  padding:3% 10% 3% 10%;
  width: 80%;

  border-radius: 10px;
  background-color: #fff;  

  color: #000000;

}








.indexloginbtn{
  width: 150px;
  float: right;
  padding: 10px 20px 10px 20px;
  cursor: pointer;
  border-radius: 10px;
  background-color: #e3e2df;  
  /*border: #1469d8 1px solid;*/}



.indexregbtn{
  width: 150px;
  float: left;
  padding: 10px 20px 10px 20px;
  cursor: pointer;
  border-radius: 10px;
  background-color: #e3e2df;  
  /*border: #1469d8 1px solid;*/
}












/* Index Footer */


.footerbox{
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
/*  flex-wrap: wrap;   */

  overflow:none;

  padding: 3%;


}


.footeritem{
 /*   padding: 20px 5px 20px 5px;   */

    padding: 20px;

/* width: 25%;  see @media query below */

    height: auto;

    align-items: center;
    text-align: center;

    border: 1px dotted #fff;
    border-radius: 10px;
  }




@media(max-width:1100px){
    .footerbox{
    flex-direction: column;}
    .footeritem{
    width: 80%;}
}


@media(min-width:1100px){
    .footeritem{
    width: 30%;    
    flex-direction: row;}
}











































































/*

3 - SITE HOME Pages

Site Nav Bars 

Site Header
Site Footer 

Site Home page

*/









/* Site-Nav Bar */




.wrapper{  /* this is the class of the complete nav bar */
  /*  border: 1px solid #B0C4DE;   */

  margin: 0 30px 0 30px;
  display: flex;
/*  flex-direction: row;  media query */
  align-items: flex-start;

  border-radius: 20px;
}



.topic{ /* this is the class containing one button and one dropdown list */
  border: 1px solid #B0C4DE;
  border-right: none;
  padding: 10px;

}




/*   #e3e2df   */


.accordion {  /* this is the class of the button */

  padding: 10px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;

  cursor: pointer;

  font-size: 100%;

  /* background-color: #eee;*/
  background-color: rgba(157, 175, 187, 0.6);
  color: #444;
  transition: 1s;

}



.memberaccordion {  /* this is the class of the button */

  padding: 10px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;

  cursor: pointer;

  font-size: 100%;

  /* background-color: #eee;*/
  background-color: rgba(157, 175, 187, 0.6);
  color: #444;
  transition: 1s;

}




.active, .accordion:hover {
  background-color: rgba(254, 233, 188, 0.4);
}



.active, .memberaccordion:hover {
  background-color: rgba(254, 233, 188, 0.4);
}



.panel {  /* this is the class containing the dropdown list */

  max-height: 0;  /* this is styling edited by javascript */
  transition: max-height 0.4s ease-out;

  border: 1px solid #B0C4DE;
  border-right: none;

  background-color: rgba(254, 233, 188, 0.1);
  overflow: hidden;

}

.menu {
    list-style-type: none;
}

.droptext:a {
    text-decoration: none;
}

.droptext{
  padding:0 0 5px 10px;
  colour: #fff;
  font-style: itallic;
  text-decoration: none;
}



@media only screen and (min-width: 320px){
.wrapper{
  flex-direction: column;}

.topic{
    width: 60%;}

.droptext{
  padding:0 0 5px 2px;
  font-size: 60%;}
}



@media only screen and (min-width: 600px){

.wrapper{
  flex-direction: column;}

.topic{
    width: 50%;}

.droptext{
  padding:0 0 5px 5px;
  font-size: 60%;}

}



@media only screen and (min-width: 1000px){

.wrapper{
  flex-direction: row;
}


.droptext{
  padding:0 0 5px 5px;
  font-size: 70%;}

}


































































/* Site Header */


.welcome{

float: right;
padding: 5px;
color: #fff;

}













/* Site Footer */


.footerbox{
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
/*  flex-wrap: wrap;   */

  overflow:none;

  padding: 3%;

  width:100%;


}


.footeritem{
 /*   padding: 20px 5px 20px 5px;   */

    padding: 20px;

/* width: 25%;  see @media query below */

    height: auto;

    align-items: center;
    text-align: center;

    border: 1px dotted #fff;
    border-radius: 10px;
  }




@media(max-width:1100px){
    .footerbox{
    flex-direction: column;}
    .footeritem{
    width: 80%;}
}


@media(min-width:1100px){
    .footeritem{
    width: 30%;    
    flex-direction: row;}
}

















































/* Site-Home Page */



.sitehomewrapper{

width: 100%;
background-color: #fff;
}


.cardswrapper{

  width:90%;
  margin:0 5% 0 5%;

  justify-content: center;
  align-items: center;
 
}



.guestinfo{
  width:90%;
  margin:0 5% 0 5%;

  padding: 5%;

  justify-content: center;
  align-items: center;

  background-color: #fff;


  border: 1px solid #BFBFBF;
  box-shadow: 5px 5px 5px #aaaaaa;


}




































































































/* 

4 - SITE PAGES

4a - Understanding and Exercise Pages 
4b - Rhythm Page 
4c - Repertoire Page
4d - Course Pages



/*

Some 'general site page' structuring

.pagearea
.pagearticle
.pageaside

*/




.pagearea{
  display: flex;
  justify-content: center;        
  width: 100%;
}


   .pagearea{
      flex-direction: row;}




   .pagearticle{
      width:70%;}



    .pageaside{
      width:30%;
      margin: 0 8%;}



     .pagepdfbox{

    width: auto;
    height: auto;


}

     .pagepdfviewer{
    margin:0 auto 50px auto;
    padding:20px auto;
    width: 100%;
    height:600px;
    border:3px solid #a07952;
     }




#pdf{
    margin:5% 5% 5% 5%;
    width:90%;
    height:90%;
    border:2px solid #a07952;
    overflow: scroll;}








































/*  

4a - Understanding and Exercise Pages   

titlecontainer----- 
title box     media box     textbox     imagebox   

article     
aside       aside nav bar
aside-now-at-bottom

aside nav bar

*/



.titlecontainer{
    display: flex;
    /* flex-direction:row;            /* or column */
    align-items: center;           /* or flex-start or flex-end */
    justify-content: center;       /* or flex-start or flex-end */
    width: 100%;}


.titlebox{
  width: auto;
  height: auto;
/*  flex: 3;     doing anything ??? */ 
  margin: 5% 5% 5% 5%;
  padding: 3%;}



.mediabox{
    width: auto;
    height: auto;
    margin: 5% 5% 5% 5%;
    padding: 5px 10px 5px 20px;}  /* top right bottom left  */


@media(max-width:650px){
   .titlecontainer{
      flex-direction: column;   
      }
}
@media(min-width:650px){
   .titlecontainer{
      flex-direction: row;
      }
}








.textbox{
  margin: 5% 5% 5% 5%;
  width:85%;
  padding: 3%;
  /* border-radius:5%; */
  background-color: rgba(157, 175, 187, 0.2);

  border-bottom: 3px solid #B0C4DE;
}


.imagebox{
  margin: 5% 5% 5% 5%;
  width:85%;
  padding: 3%;}
  















/*

pagebox - display flex row or column max-width
article     
aside       aside nav bar
aside-now-at-bottom

*/






.pagebox{

  display: flex;
  justify-content: center;        
  width: 100%;
}

@media(max-width:750px){
   .pagebox{
      flex-direction: column;}

      .article{
      width:100%;}

      .aside{
      width:84%;
      margin: 0 8%;}


}


@media(min-width:750px){
      .pagebox{
      flex-direction: row;}

      .article{
      width:60%;}

      .aside{
      width:40%;}

}



@media(min-width: 1500px){
      .pagebox{
      width:80%;
      margin: 0 10%;}

      .article{
      width:60%;}

      .aside{
      width:40%;}

}



/* Aside Nav Bar */

.accordionaside {  /* this is the class of the button */


  padding: 0 10px;
  width: 100%;
  border: none;
  text-align: center;
  outline: none;

  cursor: pointer;

  font-size: 80%;

  /* background-color: #eee;*/
  background-color: rgba(157, 175, 187, 0.2);
  color: #444;
  transition: 1s;
}





@media only screen and (min-width: 320px){

.aside_topic{
    width: 60%;}

}


@media only screen and (min-width: 600px){

.aside_topic{
    width: 40%;}

}

@media only screen and (min-width: 1200px){

.aside_topic{
    width: 25%;}

}

/*  ..... end aside nav bar  */

















































/* 

4b - Rhythm Pages  */



#thumbcontainer{
   margin: 5% 5% 0 5%;
   width: 90%;}

.thumbimagerow{
   margin: 4% auto 20px auto;
   padding: 10px;
   width: 100%;
   text-align: center;}

/* see 8thnotecss.css and 16thnotecss.css for specific stylign of thumbnails  */
/* thumbimage 'columns' are just divs made to float 'left' with a given % width to ensure they all fit on the same line
16thnotecss.css ........
.columnthumb{
float: left;
width: 6%;
}
.columnthumb img {
  width: 90%;
  opacity: 0.8; 
  cursor: pointer; 
}


.thumbgap{
  float: left;
  width: 1%;
}
.thumbgap img {
  width: 90%;
  height: 5%;}

.columnthumb img {
  width: 90%;
  opacity: 0.8; 
  cursor: pointer; 
}

#imagethumb1, #imagethumb2, #imagethumb3, #imagethumb4{
  border-bottom:3px solid rgb(254, 233, 188);
}
#imagethumb5, #imagethumb6, #imagethumb7, #imagethumb8, #imagethumb9, #imagethumb10{
  border-bottom:3px solid rgb(157, 175, 187);
}
#imagethumb11, #imagethumb12, #imagethumb13, #imagethumb14{
  border-bottom:3px solid rgb(254, 233, 188);
}
#imagethumb15, #imagethumb16{
  border-bottom:3px solid #333;
}
*/


#topcontainer{
 margin: 5% 5% 0 5%;
 width: 90%;}


canvas { 
  width: 100%;
  background-color: rgba(157, 175, 187, 0.8);}

#buttonrow{
  width:100%;
  min-height:35px;
  padding: 0;

  background-color: rgba(157, 175, 187, 0.8);}

.buttonbox{
  width:25%;
  float: left;}

.button{
    width:90%;
    margin:0 5% 0 5%;
    height:3%;

    background-image: linear-gradient(to right, rgb(254, 233, 188), rgba(157, 175, 187, 0.2));}









































































/*    

4c - Play Along pages   /    4d Course Pages

audiobox-----audio item-----audio     */



.audiobox{

  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  flex-wrap: wrap;

  padding: 5%;  /* top right bottom left */
  background-color: #393534;

  overflow:none;
}



.audioitem{
    padding: 20px 5px 20px 5px;
    align-items: center;

    height: auto;
/*  width see @media() query below  */

    border: 1px dotted #fff;
    border-radius: 10px;}


.audiocontrols{
  height:1.8em;
  width:100%;
}




/*  OF USE?  controlling media with javascript

https://developer.apple.com/library/archive/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/ControllingMediaWithJavaScript/ControllingMediaWithJavaScript.html#//apple_ref/doc/uid/TP40009523-CH3-SW1  */



.audio{
  background-color: #a07952;
  opacity: 0.1;}


@media(max-width:650px){
    .audiobox{
    flex-direction: column;}
    .audioitem{
    width: 80%;}
}

@media(min-width:650px){
    .audioitem{
    width: 42%;}
}

@media(min-width:1100px){
    .audioitem{
    width: 30%;}
 
}





/*     pdf display-----pdf box-----pdftextbox-----pdf viewer-----pdf     */


.pdfdisplay{
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  flex-wrap: wrap;}


.pdftextbox{
  margin:50px auto 0 auto;
  padding: 1% 3% 1% 3%;

  width: 30%;

  border-radius:5%;
  /*  background-image: linear-gradient(to right, rgb(254, 233, 188), rgb(157, 175, 187));   */   
  background-color: rgba(157, 175, 187, 0.5);
}



#pdfviewer{
  margin:0 auto 50px auto;
  padding:20px auto;

    width: 70%;
  height:600px;

  border:3px solid #a07952;}



#pdf{
    margin:5% 5% 5% 5%;
    width:90%;
    height:90%;
    border:2px solid #a07952;
    overflow: scroll;}


/*
@media only screen and (min-width: 600px) {
  #pdftextbox {
    width: 70%;
  }
}

@media only screen and (min-width: 1200px) {
  #pdftextbox {
    width: 50%;
  }
}
*/

@media only screen and (min-width: 600px) {
  #pdfviewer {
    width: 70%;
    height:90%;
  }
}

@media only screen and (min-width: 1200px) {
  #pdfviewer {
    padding:0;
    width: 50%;
  }
}

































/*    

4d - Course Pages 

coursepage_wrapper     */






.coursepage_wrapper{  

  margin: 50px 50px 50px 50px;

  padding: 50px 50px 50px 50px;

  display: flex;

  align-items: flex-start;
}


.coursepage_wrapper a{  
       font-style: italic;        
       cursor: pointer;
       font-size: 100%;



}




    /* Selects the first letter of a <p> */
        .coursepage_wrapper p::first-letter {
        font-size: 150%;
        text-shadow: 5px -4px #558ABB;
        padding: 4px;
        }













@media only screen and (min-width: 320px){

  .coursepage_wrapper{
  flex-direction: column;}
}



@media only screen and (min-width: 600px){

  .coursepage_wrapper{
  flex-direction: column;}
}



@media only screen and (min-width: 1000px){

  .coursepage_wrapper{
  flex-direction: column;}
}




  .coursepage_wrapper ul{
  list-style-type: circle;
}


.center{
  float: center;
}










































/* GENERAL OTHER STYLING  

image

text

colour

*/


/* image styling */


.image1{
  width: 100%;
}
.image2{
  width: 70%;
}




/* text styling */



a{
  text-decoration: none;
  cursor: pointer;
  color: inherit;}







.indexloginbtn{

  font-size: 1em;
  color: #000000;
  /*border: #1469d8 1px solid;*/}


@media(max-width:650px){
  .indexloginbtn{

  padding: 5px 10px 5px 10px;	

  font-size: 0.8em;
  color: #000000;
  /*border: #1469d8 1px solid;*/}
}






.indexregbtn{

  font-size: 1em;
  color: #000000;
  /*border: #1469d8 1px solid;*/}


@media(max-width:650px){
  .indexregbtn{

  padding: 5px 10px 5px 10px;	

  font-size: 0.8em;
  color: #000000;
  /*border: #1469d8 1px solid;*/}
}








.bigheading{
  font-size: 500%;
}

.smallheading{
  font-size: 210%;
}

.smallerheading{
  font-size: 130%;
}


@media(max-width:650px){
   .bigheading{
  font-size: 250%;
}
.smallheading{
  font-size: 150%;
}
.smallerheading{
  font-size: 90%;
}
}








.logotext{
  font-size: 80%;
  color: #fff;
}



.audiotext{
  margin:10px 0 0 0;
  vertical-align: 10px;
  font-size: 80%;
  color: #a07952;
  float: bottom;}

.buttontext{
  font-style: italic;
  font-size: 80%;}


  
.droptext {
  font-style: italic;
  font-size: 80%;}


.footertext{
  font-style: italic;
  font-size: 80%;
  margin:5%;}


.imagetext{
  font-style: italic;
  font-size: 80%;
  margin:5%;}

.italic{
  font-style: italic;
  font-size: 90%;
}


.mediatext{
    font-size: 85%;}


.errortext{

  color: red;
  font-style: italic;
  font-size: 80%;
}



/* some colour styling */


.colour1{

  color: #505c50;}