html
    {
    margin-bottom: 1px;  /*keeps the scroll bar in firefox on a short page*/
    min-height: 101%;
    }

body
   {
   width:95%;
   max-width:1250px;
   font-size:100%;
   font-family: 'Lato', sans-serif;
   margin:1rem auto;
   padding:0 0;
   background-color:#000000;
   line-height:1.5rem;
   color:#cccccc;
   -webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
   }



*
 {
 box-sizing:border-box;
 }

a
 {
 text-decoration:none;
 color:#E16B6D;
 outline:none;
 }

a:hover
       {
       color:#ffffff;
       }

h1
  {
  font-size:2rem;
  line-height:2.5rem;
  font-weight:bold;
  color:#ffffff;
  }


h2
  {
  font-size:1.5rem;
  line-height:2rem;
  }

h3
  {
  font-size:1.5rem;
  }

h4
  {
  font-size:1.25rem;
  }

h5
  {
  font-size:1rem;
  }

h6
  {
  font-size:0.8rem;
  }

h1, h2, h3, h4, h5, h6
  {
  color:#E9DDF5;
  }

h1, h2, h3, h4, h5, h6
    {
    margin:0.5rem 0;
    display:block;
    }


hr
	{
	width:60%;
	background-color:#006060;
	border-color:#006060;
	height:4px;
	margin-top:50px;
	margin-bottom:50px;
	}




.clearfix
         {
         clear:both;
         }


.flex-horiz, flexboxV1
{
display:flex;
flex-flow:row wrap;
justify-content:space-around;
}


.bold
     {
     font-weight:bold;
     }

.photocaption
             {
             font-size:0.7rem;
			 margin-top: 0.1rem;
             }

nav
   {
    clear:both;
   }


li a /*keeps sub-menus on top*/
{
position:relative;
z-index:1;
}


.wrapper
        {
        width:100%;
        float:left;
        margin-bottom:20px;
        /*background-color:#5f2d91;*/
        }

.content
        {
        background-color:#222222;
        font-size:1rem;
        float:left;
        width:100%;
        clear:both;
        border-left:10px solid #5f2d91;
        border-right:10px solid #5f2d91;
        border-bottom:10px solid #5f2d91;
        padding:3%;
        }


.song-title
	{
	display:inline-block;
	font-style:italic;
	font-size:80%;
	margin-left:10px;
	white-space:nowrap;
	text-overflow:ellipsis;
	overflow:hidden;
	width:200px;
	vertical-align:bottom;
	}




audio
{
width:200px;
height:30px;
margin-right:1rem;
}

audio::-webkit-media-controls-panel
{
background-color:#5f2d91;
color:white;
}


audio::-webkit-media-controls-play-button, video::-webkit-media-controls-play-button {
    -webkit-appearance: media-play-button;
    display: -webkit-box;
    width: 16px;
    height: 16px;
    background-color: #006060;
    border: initial;
    color: #ffffff;
	}



.audiomenu
          {
          width:83%;
		  height:100%;
          float:left;
		  display:flex;
		  flex-direction:column;
		  justify-content:space-between;
          font-size:0.8rem;
          }


.audiomenu span
           {
           font-style:italic;
		   }





img
   {
   width:auto;
   max-width:100%;
   height:auto;
   }


iframe
   {
   width:100%;
   max-width:350px;
   max-height:197px;/*this is set for 16:9 playback - other ratios will be letterboxed/pillarboxed*/
   border:1px solid #555;
   margin-top:15px;
   }




.samples
     {
     font-size:0.8rem;
     }

.samples p span
      {
      font-style:italic;
      }

.samples audio
         {
         float:left;
         }


.backbtn
    {
    color:#ffffff;
    font-weight:bold;
    font-size:1rem;
    background-color:#006060;
    padding:5px;
    border:3px solid #5f2d91;
    border-radius:4px;
    display:inline-block;
    clear:both;
    float:left;
    margin-top:2rem;
    }





/*--------HEADER----------*/






#banner
       {
       float:left;
       /*background: linear-gradient(to bottom, #004040 0%,#006060 20%,#006060 85%,#008080 100%,#009090 100%); /* W3C */
       background-color:#006060;
       /*background-color:#444444;*/
       color:#ffffff;
       font-weight:bold;
       padding:0 1rem 1rem 1rem;
       width:100%;
       border-top:10px solid #5f2d91;
       border-left:10px solid #5f2d91;
       border-right:10px solid #5f2d91;
       border-top-left-radius:20px;
       border-top-right-radius:20px;
       }


#banner p
         {
         font-size:1.8rem;
         margin:0px;
         letter-spacing:0.5rem;
         }

#bannerleft
           {
           float:left;
           }

#bannerleft
           {
           width:60%;
           }

#bannerright
            {
            width:40%;
            float:right;
            }
#socmed
       {
       margin-top:1rem;
       margin-left:-0.5rem;
       }

#bannervid
          {
          float:right;
          margin-top:1rem;
          background-color:#285E5F;
          }

#bannervid iframe
                 {
                 /*border-radius:10px*/
                 margin-top:2rem;
                 /*background-color:#285E5F;*/
                 float:right;
                 }

#roles
{
font-size:1.3rem;
/*width:300px;*/
display:flex;
float:right;
flex-flow:row nowrap;
justify-content:space-between;
}


#socmed a:hover
             {
             opacity:0.5;
             }




 /*--------NAVIGATION from cssmenus.com---------*/
 /*-------see other stylesheet-----------*/



/*---------------------HOME------index.html------*/


#home .content
      {
      padding:0;
      }



#home_lt_col, #home_rt_col
              {
              width:50%;
              float:left;
              padding:2% 4% 4% 4%;
              }

#home_lt_col
             {
             /*border-right:5px solid #006060;*/
             }

#news
	{
	border:1px solid gold;
	padding:0.5rem 1rem;
	border-radius:0.5rem;
	background-color:#221100;
	}


#bonham_stuff
             {
             width:100%;
             }


#homepage_video_b
                 {
                 max-width:100%;
                 height:auto;
                 float:left;
                 margin:0;
                 }

#motto
      {
      font-style:italic;
      text-align:center;
      margin-bottom:2rem;
      }

#motto span
       {
       text-decoration:underline;
       }

#home .audiomenu
{
width:100%;
}

#divide
{
width:100%;
background-color:#006060;
text-align:center;
padding:5px 0;
border:6px solid #5f2d91;
}

#home_btm
{
width:100%;
padding:2% 4% 4% 4%;
}



#home_btm iframe
{
margin-bottom:20px;
}


/*-----------------ABOUT ME----------------------*/

#abt-me-lft
{
width:35%;
float:left;
text-align:right;
padding-right:20px;
}

#abt-me-lft img
{
margin-bottom:20px;
}

#abt-me-rt
{
width:65%;
float:left;
}





/*----------------LESSONS----------------*/

#montagelft
           {
           float:left;
           margin-right:4rem;
           }




/*---------------are grades for you?-----------*/

#cert3
      {
      float:left;
      margin:0 2rem 1rem 0;
      max-width:50%;
      height:auto;
      }


/*---------------EXAM RESULTS------------------*/


.examresults
	{
	width:65%;
	max-width:700px;
	margin: 2rem auto 1rem;
	border:1px solid gold;
	border-radius:0.5rem 0.5rem 0 0;
	clear:both;
	}

.gradeheads
	{
	width:100%;
	background-color: gold;
	color:black;
	font-weight:bold;
	height:2rem;
	text-align: left;
	padding:0.25rem 0 0 0.5rem;
	clear:both;
	}

.student
	{
	width:30%;
	min-width:175px;
	font-weight:bold;
	/*border-left: 1px solid gold;*/
	}



.board
	{
	width:45%;
	white-space: nowrap;
	text-overflow: ellipsis;
	}



.mark
	{
	width:25%;
	}


.student, .board, .mark
	{
	border-bottom: 1px dotted #6F32AC;
	padding-top:5px;
	padding-bottom:6px;
	padding-left:1rem;
	float:left;
	}

/*-------schools results------*/

.schoolheads
	{
	width:100%;
	background-color: gold;
	color:black;
	font-weight:bold;
	height:2rem;
	text-align: left;
	padding:0.25rem 0 0 0.5rem;
	}

.school-row
	{
	border-bottom: 1px dotted #6F32AC;
	clear:both;
	}

.school-gradeboard
	{
  width:55%;
	min-width:55%;
	float:left;
	}




.school-no
	{
	width:15%;
	min-width:15%;
	float:left;
	}

.school-mark
	{
	width:30%;
	min-width:30%;
	float:left;
	}

.school-gradeboard, .school-no, .school-mark
	{
	/*border-bottom: 1px dotted #6F32AC;*/
	padding-top:5px;
	padding-bottom:6px;
	padding-left:1rem;
	}

/*----------grades demos-------------*/


#gradesdemos .content .flex-horiz h5,
#sdrsg .content .flex-horiz h5
	{
	color:gold;
	margin-bottom:-10px;
	}




/*-------------jimmy drumming audio---------*/



#inner-wrap
{
width:100%;
display:flex;
flex-flow:row nowrap;
justify-content:space-between;
}



#picholder
          {
		  /*height:100%;*/
		  width:17%;
		  display:flex;
		  flex-direction:column;
          float:left;
		  justify-content:space-between;
          }



/*********************jimmy drumming video menu ------------------*/





/*-------------LINKS------------*/


#linkslist
          {
		  float:left;
          width:100%;
          font-size:1rem;
          }

.linkspanel
          {
		  display:flex;
		  flex-flow:column wrap;
          margin-bottom:1.2rem;
          }


.linkitem
         {
         /*float:left;*/
         /*width:33.3%;*/
         margin-right:5rem;
         }


/*-----------DRUM SALES-------------*/




.shop_header
	{
	padding:1% 0 1.5% 0;
	width:100%;
	text-align:center;
	font-size:2rem;
	font-weight:bold;
	background-color:gold;
	color:#016160;
	border-radius:10px;
	font-style:italic;
	text-shadow:2px 2px 4px #999;
	margin-bottom:10px;
  }

.salestank
	{
	display:flex;
	flex-wrap:wrap;
	flex-direction:row;
	justify-content:space-around;
	/*border:2px solid #602d91;
	padding:3px;
	border-radius:7px;*/
	}


.salestank a
  {
  cursor:zoom-in;
  }


.salespanel
			{
			display:flex;
			flex-wrap:wrap;
			flex-direction:row;
			/*justify-content:space-around;*/
			border:1px solid gold;
			border-radius:5px;
			width:100%;
			padding:20px;
			background-color:#222;
			margin-bottom:15px;
			}



.leftpanel
	{
	width:40%;
	display:flex;
	flex-direction:column;
	/*justify-content:space-between;*/
	padding-right:10%;
	}

  .leftpanel ul li
  {
  margin-bottom:10px;
  }

.itemtitle
	{
	font-size:1.5rem;
	font-weight:bold;
	color:#ffaa00;
	}

.itemsubtitle
	{
  margin-top:15px;
	font-size:1.1rem;
	/*text-indent:1rem;*/
	font-weight:bold;
	color:#ffaa00;
	}

.price
	{
	font-size:1.25rem;
	font-weight:bold;
	color:#00cc00;
	margin-top:20px;
	}



.rightpanel
	{
	width:60%;
  }


.flex-container /* this is the scrolling container for photos of items for sale */
    {
    background-color:#5e2c91;
    display: flex;
    flex-direction:row;
    flex-wrap: nowrap;
    overflow:auto;
    border-radius:20px;
    scrollbar-color:#5e2c91 #ffd700;   /* only works in firefox */
    }

.flex-item
    {
    flex: 0 0 auto;
    }

.flex-item img
    {
    height:300px;
    width: auto;
    padding-bottom:6px;
    padding-top:10px;
    padding-left:10px;
    padding-right:10px;
    border-radius:20px;
    }




.itemdesc
	{
	display:flex;
	flex-direction:column;
	justify-content:space-between;
	width:40%;
	}

.sold
	{
  width:85%;
  position:relative;
  left:55%;
	}

#soldlist
  {
  color:#ffd700;
  height:300px;
  overflow:auto;
  margin-left:10px;
  margin-bottom:5px;
  background-image: url("../assets/sold2.gif");
  }




.reduced
	{
	background-color:gold;
	color:#016160;
	width:150px;
	text-align:center;
	border-radius:3px;
	position:relative;
	top:25px;
	left:-10px;
	transform: rotate(-5deg);
	font-weight:bold;
	}

.reduced:after
	{
	content:"Price Reduction";
	}




/*-----------FOOTER---------------*/
#footer
      {
	  display:flex;
	  flex-direction:row;
	  justify-content:space-between;
      width:100%;
      background-color:#006060;
      color: #ffffff;
      font-size:0.7rem;
      border-bottom:10px solid #5f2d91;
      border-left:10px solid #5f2d91;
      border-right:10px solid #5f2d91;
      border-bottom-left-radius:20px;
      border-bottom-right-radius:20px;
	  padding:0 20px 0 20px;
      }

#footer p
       {
       display:inline;
       }

.fxd_btm_ftr
            {
            position:fixed;
            bottom:75px;
            right:5px;
            }

.shoppromo
	{
	position:fixed;
	top:80px;
	right:5px;
	background-color:#ffd602;
	color:#016160;
	font-size:0.9rem;
	font-weight:bold;
	font-style:italic;
	padding:0 5px;
	text-align:center;
	border-radius:5px;
	transform:rotate(4deg);
	}

#salesbody .shoppromo
	{
	display:none;
	}


/*---MEDIA QUERIES---*/


@media screen and (max-width: 768px)

{
    body
        {
        width:95%;
        }


    img
       {
       display:none;
       }

	#salesbody img
	   {
	   display:inline;
	   }


    #banner img
        {
        display:inline;
        }

    .content
            {
            font-size:120%;
            line-height:1.75rem;
            }

    #home_lt_col, #home_rt_col, #links, .vidmenitem
       {
       width:100%;
       float:none;
       padding:0;
       }

     .vidmenitem, .vidmenitem img
                 {
                 display:block;
                 float:none;
                 }

     #roles, #abt-me-lft
           {
           display:none;
           }

	 #abt-me-rt
	 {
	 width:100%;
	 float:none;
	 }

     #home_rt_col, #home_lt_col, #home_btm
           {
           border:0;
		   }

}

@media screen and (max-width: 1050px)

{
	.student, .board, .mark
		{
		width:100%;
		}

	.mark
		{
		border-bottom:1px solid gold;
		}

}