/*Dark blue   #3183C4*/
/*Light blue  #A4BBDF*/
/* a:link {color:#FFDB94;text-decoration:none;}
a:visited {color:#FFDB94;text-decoration:none;} */
a:link {color:#C0C0C0;text-decoration:none;}
a:visited {color:#C0C0C0;text-decoration:none;}
a:hover {color:#A7C4F3;text-decoration:underline;}
a:active {color:#A7C4F3;text-decoration:underline;}

a.darklink:link {color:#5E6571;text-decoration:none;}
a.darklink:visited {color:#5E6571;text-decoration:none;}
a.darklink:hover {color:#A7C4F3;text-decoration:underline;}
a.darklink:active {color:#A7C4F3;text-decoration:underline;}

a.menulink:link {color:#5E6571;text-decoration:none;}
a.menulink:visited {color:#5E6571;text-decoration:none;}
a.menulink:hover {color:#5E6571;text-decoration:none;}
a.menulink:active {color:#5E6571;text-decoration:none;}

a.otherlink:link {color:#5E6571;text-decoration:none;}
a.otherlink:visited {color:#5E6571;text-decoration:none;}
a.otherlink:hover {text-decoration:underline;color:#F6F9FE;background-color:#202020;}
a.otherlink:active {color:#A7C4F3;text-decoration:underline;}

a.lessonlink:link {color:#A7C4F3;text-decoration:none;}
a.lessonlink:visited {color:#A7C4F3;text-decoration:none;}
a.lessonlink:hover {color:#C0C0C0;text-decoration:underline;}
a.lessonlink:active {color:#C0C0C0;text-decoration:underline;}


@font-face {
    font-family: guifont;
    src: url('https://www.jackbealeguitar.co.uk/qsr.otf');
}

body	
	{
    font-family: guifont, "Verdana", "Arial", "sans-serif";
	font-size:100%;
	background-attachment:fixed;
	/*width:contain;*/
	margin:auto;
	color:#202020;
	background-color:#A7C4F3;
	background-position:center center;
	background-image:url('https://www.jackbealeguitar.co.uk/images/background.png');
	background-repeat:no-repeat;
	background-size: cover;
	/*var-fontColor: red;*/
	}

h2.ruled,h3.ruled{
	border-bottom-style:solid;
	border-width:3px;
	padding-bottom:3px;
	margin-right:3px;
/*    -webkit-column-span: all; 
    column-span: all; */
}
#mainhead
	{font-size:35px;
	color:#FFDB94;
	margin-top:0px;
	/* padding-top:6px; */
	margin-bottom:5px;
	/* padding-bottom:5px;	 */
	text-align:center;
	/* border-top-style:none;
	border-right-style:none;
	border-bottom-style:solid;
	border-left-style:none;
	border-color:#F6F9FE;
	border-width:5px; */
	opacity:0.8;
	filter: alpha(opacity=80);
/* 	
	border-top-left-radius:5px;
	background-color:#FFDB94; */
	text-shadow: 5px 5px 3px #0F273B;
	/*-webkit-border-top-left-radius:5px;  Safari */
	box-shadow: 5px 5px 3px #0F273B;
	-moz-box-shadow: 5px 5px 3px #0F273B;
	-webkit-box-shadow: 5px 5px 3px #0F273B;
	background-color:#F6F9FE;
/* 	background: -webkit-linear-gradient(#A7C4F3 0%, #F6F9FE 30%, #93A4BF 70%, #768399 100%); 
    background: -o-linear-gradient(#A7C4F3 0%, #F6F9FE 30%, #93A4BF 70%, #768399 100%);      
    background: -moz-linear-gradient(#A7C4F3 0%, #F6F9FE 30%, #93A4BF 70%, #768399 100%);    
    background: linear-gradient(#A7C4F3 0%, #F6F9FE 30%, #93A4BF 70%, #768399 100%);      */    
	background: -webkit-linear-gradient(#FFF 0%, #F6F9FE 70%, #93A4BF 90%, #829196 100%); 
    background: -o-linear-gradient(#FFF 0%, #F6F9FE 70%, #93A4BF 90%, #829196 100%);      
    background: -moz-linear-gradient(#FFF 0%, #F6F9FE 70%, #93A4BF 90%, #829196 100%);    
    background: linear-gradient(#FFF 0%, #F6F9FE 70%, #93A4BF 90%, #829196 100%);         
	z-index:1;
	
}

nav {
	display: table;
	/* width: 99.3%; */
	width: 100%;
	/* border-collapse: collapse; */
	border: none;	
	text-align:center;
	font-size:125%;
	background-color:#F6F9FE;
	font-weight: bold;
	opacity:0.8;
	filter: alpha(opacity=80);
	padding-top:5px;
	padding-bottom:5px;
	padding-left:0px;
	padding-right:0x;
/* 	background: -webkit-linear-gradient(#A7C4F3 0%, #F6F9FE 30%, #93A4BF 70%, #768399 100%); 
    background: -o-linear-gradient(#A7C4F3 0%, #F6F9FE 30%, #93A4BF 70%, #768399 100%); 
    background: -moz-linear-gradient(#A7C4F3 0%, #F6F9FE 30%, #93A4BF 70%, #768399 100%); 
    background: linear-gradient(#A7C4F3 0%, #F6F9FE 30%, #93A4BF 70%, #768399 100%); 
 */
	background: -webkit-linear-gradient(#F6F9FE 0%, #FFF 50%, #93A4BF 100%); 
         background: -o-linear-gradient(#F6F9FE 0%, #FFF 50%, #93A4BF 100%); 
       background: -moz-linear-gradient(#F6F9FE 0%, #FFF 50%, #93A4BF 100%); 
            background: linear-gradient(#F6F9FE 0%, #FFF 50%, #93A4BF 100%); 
	box-shadow: 5px 5px 3px #0F273B;
	-moz-box-shadow: 5px 5px 3px #0F273B;
	-webkit-box-shadow: 5px 3px 4px #0F273B;
	z-index:0;
}
nav ul {
	display: table-row;
}
nav li {
	display: table-cell;
	margin: 0;
	width:25%;
}
nav a{
    display: block;
	color:#291400;
    width:100%;	
	}
/* nav.navigationbar
	{
	font-size:125%;
	
	color:Black;
 
	margin:auto;
	text-align:center;
	border:0;
	background-color:#F6F9FE;
	opacity:0.8;
	filter: alpha(opacity=80);
	font-weight: bold;
	padding:5px;
	left:0px;
	right:0px;
	box-shadow: 5px 5px 3px #0F273B;
	-moz-box-shadow: 5px 5px 3px #0F273B;
	-webkit-box-shadow: 5px 3px 4px #0F273B;

	}
	
	
ul.navigationbar {
	margin:auto;
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
; 
}

li.navigationbar{
    float: left;
	display: inline;
}

a.navigationbar {
    display: block;
	color:#291400;
    width:200px; */

/*     background-color: #dddddd; */

nav a:hover{	
	/* content: url(http://www.jackbealeguitar.co.uk/images/hover.png); 
    display: block; */
	color:#F6F9FE;
	/* background-color:#202020; */
	
	background-size: cover;
	background-position:center;
	background-image:url('http://www.jackbealeguitar.co.uk/images/menuhover.gif');
	background-repeat:no-repeat;
}	
#bodybox
	{
    /* margin-left:30px;
	margin-right:30px; */
	opacity:0.8;
	filter: alpha(opacity=80);
	position:absolute;
	top:143px;
	bottom:60px;
	left:0px;
	right:0px;
	padding-top:0px;
	padding-bottom:20px;
	padding-left:20px;
	padding-right:20px;
	-moz-box-shadow: 3px 3px 3px #0F273B;
	-webkit-box-shadow: 3px 3px 3px #0F273B;
	box-shadow: 3px 3px 3px #0F273B;
	/* max-height: 400px; */
	min-height:310px;
	min-width:780px;
	/* resize: both; */
    overflow: auto;
    overflow-y: scroll;
    overflow-x: hidden;
	background-color:#F6F9FE;
	}
@media (max-width: 980px) {
  #bodybox {
    font-size: 220%;
	overflow-x: scroll;

  }
}
@media (max-width: 980px) {
button {

    font-size: 120%;
}
}	
@media (max-width: 980px) {
  .bom {
	height:40px;
	width:40px;
  }
}
@media (max-width: 980px) {
  .bomt {
    font-size: 220%;
  }
}
#aroundthewebfooter{
	font-size:120%;
	bottom:0px;
	left:0px;
	right:0px;
	position:fixed;
	background-color:black;
    color:white;
    clear:both;
    text-align:center;
	/* height:40px;	 */
	opacity:0.8;
	filter: alpha(opacity=80);
    padding:15px;
	background: -webkit-linear-gradient(#586780, Black); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#586780, Black); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#586780, Black); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#586780, Black); /* Standard syntax (must be last) */

	
	}
	
#subemail{
	border-width:3px;
	border-style:inset;
	border-radius:5px;
	-webkit-border-radius:5px;
	padding-left:15px;
	padding-right:15px;
	opacity:initial;
	margin-top:15px;
	padding-bottom:5px;
	background: -webkit-linear-gradient(160deg, #EDF3FD, #A7C4F3); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(160deg, #EDF3FD, #A7C4F3); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(160deg, #EDF3FD, #A7C4F3); /* For Firefox 3.6 to 15 */
    background: linear-gradient(160deg, #EDF3FD, #A7C4F3); /* Standard syntax (must be last) */
	}	
#influences{font-size:0px;list-style-type:none;height:0px;visibility: hidden;}
#othermenu{
	z-index:3;
	visibility:hidden;
	margin-left:0px;
	font-size:0px;
	height:0px;
	width:0px;
	position:absolute;
	left:-20px;right:-20px;
	line-height:0px;
	font-size:125%;
	color:Black;
	text-align:left;
	border:0;
	background-color:#F6F9FE;
	opacity:0.8;
	filter: alpha(opacity=80);
	font-weight: bold;
	padding:5px;
	margin-left:0px;
	background: -webkit-linear-gradient(#FFF 0%, #F6F9FE 70%, #93A4BF 90%, #829196 100%); 
    background: -o-linear-gradient(#FFF 0%, #F6F9FE 70%, #93A4BF 90%, #829196 100%);      
    background: -moz-linear-gradient(#FFF 0%, #F6F9FE 70%, #93A4BF 90%, #829196 100%);    
    background: linear-gradient(#FFF 0%, #F6F9FE 70%, #93A4BF 90%, #829196 100%);         
	box-shadow: 5px 5px 3px #0F273B;
	-moz-box-shadow: 5px 5px 3px #0F273B;
	-webkit-box-shadow: 5px 3px 4px #0F273B;
/* 	border-bottom-right-radius:15px;
	-webkit-border-bottom-right-radius:15px;
	border-bottom-left-radius:15px;
	-webkit-border-bottom-left-radius:15px;
 */	
	
}
#twitterfeedbox{width:260px;position:absolute;min-width:250px;}	
/* position:relative; top:5px;right:10px; width:fit-content;*/
#onleft{
	float:left;margin-left:270px;width:50%;
	/* padding-bottom:50px; */
	border-left-style:groove;
	border-width:3px;
	border-color:#202020;
	padding-left:10px;
	}
/* width:390px; */
#onright{
	float:right;
	/* margin-right:5px;width:25%; */
	border-left-style:groove;
	border-width:3px;
	border-color:#202020;
	padding-left:10px;
	min-width:300px;
}
#toparrow{
	visibility:hidden;
	padding-left:10px;
	padding-right:10px;
	background: -webkit-linear-gradient(#206040, Black); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#206040, Black); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#206040, Black); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#206040, Black); /* Standard syntax (must be last) */
	opacity:0.6;
	filter: alpha(opacity=80);
	width:auto;
	height:35px;
	padding-bottom:3px;
	position:absolute;
	bottom:10px;right:25%;
	font-size:25px;
	font-weight:bold;
/* 		border-top-left-radius:5px; */
	border-style:outset;
	border-radius:5px;
	-webkit-border-radius:5px;
}
#expandablelesson1,#expandablelesson2{}
#lessonhistory,#lessonnav{}
#shrinkformobile{width:845px;height:390px;margin-right:10px;margin-bottom:10px;margin-top:10px;float:left;}

.keytable{
border:1px;
border-style:solid;
border-color:#D2D2D2;
padding:2px;
font-size:75%;
}
th.keytable{height:10px;}
td.keytable{height:10px;}

.caltable{
border:1px;
border-style:solid;
border-color:#D2D2D2;
padding:2px;
font-size:110%;
}
th.caltable{width:120px;}
td.caltable{width:120px;}
.navbox{
position:fixed;right:50px;top:80px;
text-align:right;
border-style:Solid;
border-color:#AC9D8F;
border-width:3px;
padding:10px;
opacity:0.2;
filter: alpha(opacity=20);
border-radius:5px;
-webkit-border-radius:5px;
background-color:#206040;
background: -webkit-linear-gradient(#206040, Black); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#206040, Black); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#206040, Black); /* For Firefox 3.6 to 15 */
background: linear-gradient(#206040, Black);
z-index:4;
}
.navbox:hover{opacity:initial;}


#closeEvents:hover,#closeFreeLessons:hover{cursor:pointer;}
#closeEvents,#closeFreeLessons{	
	background-color:Black;
	/* opacity:0.9; */
	height:26px;
	text-align:center;
	width:auto;
	/* width:contain; */
	position:absolute;
	top:5px;
	right:20px;
	padding:8px;
	color:#C0C0C0;
	visibility:hidden;
	z-index: 3;

	font-size:18px;
	border-style:Solid;
	border-color:#AC9D8F;
	border-width:3px;
	/* border-radius:10px; */
}
#closeEvents{
	background: -webkit-linear-gradient(#206040, Black); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#206040, Black); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#206040, Black); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#206040, Black); /* Standard syntax (must be last) */
	

}
#closeFreeLessons{
	background: -webkit-linear-gradient(#586780, Black); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#586780, Black); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#586780, Black); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#586780, Black); /* Standard syntax (must be last) */

}

#clicktocloseevents,#clicktocloselessons,#imagebox{
	position:absolute;
	top:0px;left:0px;
	background-color:rgba(192,192,192,0.8);
	/* opacity:0.8;
	filter: alpha(opacity=80);
	background-color:#C0C0C0; */
			/* background-color:pink; */
	z-index: 2;
				
			
}
#imagebox{text-align: center;}
#imagebox:hover{cursor:zoom-out;}
#Events,#FreeLessons
{
	background-color:Black;
	filter: alpha(opacity=90);

	opacity:0.9;
	visibility:hidden;
	position:absolute;
	top:50px;
	bottom:45px;
	left:20px;
	right:20px;
	padding:20px;
    /* overflow-x: scroll; */
	color:#C0C0C0;
	border-style:Solid;
	border-color:#AC9D8F;
	resize: both;
    /* overflow: auto; */
	border-width:5px;
		/* resize:both; */
	overflow: auto;
	z-index: 3;
	min-height:400px;
	min-width:700px;
	}
	
#Events{	
	background: -webkit-linear-gradient(#206040, Black); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#206040, Black); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#206040, Black); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#206040, Black); /* Standard syntax (must be last) */

	}


#FreeLessons{	
	

	background: -webkit-linear-gradient(#586780, Black); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#586780, Black); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#586780, Black); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#586780, Black); /* Standard syntax (must be last) */
	padding-right:0px;
	}

#currentlesson{
	position:relative;top:inherit;
	margin-top:10px;
    overflow-y: auto;
	height:90%;
	padding-right:20px;
}
#staticbox{
/* 	
	padding-top:30px;
	padding-bottom:15px;
	padding-left: 20px;
	left:40px;
	right:60px;
	top:54.5px; */
	/* width:auto; */
	margin-left: 0px;
	margin-right: 0px;
	border-bottom-style:Solid;
	padding-left:30px;
	padding-right:30px;
	padding-top:5px;
	padding-bottom:10px;
	position:absolute;
	top:0px;
	left:0px;
	right:0px;
	width:auto;
	min-height:50px;
	-moz-box-shadow: 0px 10px 10px #0F273B;
	-webkit-box-shadow: 0px 10px 10px #0F273B;
	box-shadow: 0px 10px 10px #0F273B;
	background-color:black;
	background: -webkit-linear-gradient(#586780, Black); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#586780, Black); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#586780, Black); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#586780, Black); /* Standard syntax (must be last) */
	border-bottom-width:3px;
	z-index:4;
}



.fourcolmode{
    -webkit-column-count: 4; 
    -moz-column-count: 4; 
    column-count: 4;
    -webkit-column-width: 188px; 
    -moz-column-width: 188px; 
    column-width: 188px;
}
.threecolmode{
    -webkit-column-count: 3; 
    -moz-column-count: 3; 
    column-count: 3;
    -webkit-column-width: 250px; 
    -moz-column-width: 250px; 
    column-width: 250px;
}
.twocolmode{
	margin-top:20px;
    -webkit-column-count: 2; 
    -moz-column-count: 2; 
    column-count: 2;
    -webkit-column-width: 380px; 
    -moz-column-width: 380px; 
    column-width: 380px;
}
	
#youtubevid{z-index: 1;}
#switchmodes{
	visibility:hidden;
	display: inline;
 	position:absolute;
	top:3px;left:3px;
}
#showslug{visibility:hidden;}
#shareme{
	position:absolute;top:5px;right:5px;opacity:initial;z-index:2;
		border-width:2px;
	border-style:inset;
	transition: all .8s ease-in-out;
	border-radius:5px;
	-webkit-border-radius:5px;
	padding-left:15px;
	opacity:initial;
	background: -webkit-linear-gradient(#FFF 0%, #F6F9FE 70%, #93A4BF 90%, #829196 100%); 
    background: -o-linear-gradient(#FFF 0%, #F6F9FE 70%, #93A4BF 90%, #829196 100%);      
    background: -moz-linear-gradient(#FFF 0%, #F6F9FE 70%, #93A4BF 90%, #829196 100%);    
    background: linear-gradient(#FFF 0%, #F6F9FE 70%, #93A4BF 90%, #829196 100%);         

}
#shareme:hover{	border-style:outset;}

.shadowed{
-moz-box-shadow: 3px 3px 2px #0F273B;
-webkit-box-shadow: 3px 3px 2px #0F273B;
box-shadow: 3px 3px 2px #0F273B;
}
.shadowedzoom{
-moz-box-shadow: 3px 3px 2px #0F273B;
-webkit-box-shadow: 3px 3px 2px #0F273B;
box-shadow: 3px 3px 2px #0F273B;
}
.shadowedzoom:hover{
cursor:zoom-in;}
.twitter-timeline{opacity:initial;}
.zoomer{
transition: all .2s ease-in-out;
}
.zoomer:hover{
transform: scale(1.3);
cursor:pointer;
-moz-box-shadow: 0px 0px 6px #CF29A6;
-webkit-box-shadow: 0px 0px 6px #CF29A6;
box-shadow: 0px 0px 6px #CF29A6;
border-style:solid;
border-color:#CCCCCC;
border-width:3px;



}
.clickable{cursor:pointer;}
.solidcolour{opacity:initial;}
.hideme{visibility:hidden;width:0px;height:0px;color:none;font-size:0px;}
/*cookie accpet stuff */
#cookieacc
	{
	font-size:60%;
	opacity:0.8;
	filter: alpha(opacity=80);
	position:fixed;
	/* bottom:0px; */
	bottom:-160px;
	left:0px;
	right:0px;
	visibility:hidden;
	height:0px;
	background-color:#FFFFFF;
	border-top-style:solid;
	border-right-style:none;
	border-bottom-style:none;
	border-left-style:none;
	border-color:Black;
	border-width:5px;
	padding:5px;
	z-index:5;
	}