@charset "utf-8";
body,h1,h2,h3,h4,h5,h6,p,a,form,input,table,tbody,tr,td,ul,li{margin:0px;padding:0px;}
* {
	box-sizing:border-box;
}
body{
	background-color:#ffffff;
	font-family: 'Lato', sans-serif;
	font-size:100%;
	line-height:115%;
}
h1{
	font-family:'Titillium Web', sans-serif;
	font-size:4vw;
	line-height:100%;
	font-weight:bold;
	letter-spacing:1px;
	text-align: center;
	width:100%;
	color:#87def8;
	background:linear-gradient(#091c35,#000000);
	border-top:#50637d solid 4px;
	text-shadow: 3px 3px 3px #000;
	padding:1%;
}
h2,h3,h4,h5,h6{
	font-family:'Titillium Web',sans-serif;
	font-size:3vw;
	line-height:100%;
	font-weight:bold;
	text-align: center;
	width:100%;
	color:#e2e5e9;
	background:linear-gradient(#333,#081422);
	padding:10px;
	margin:10px 0px 10px 0px;
	border-radius:10px 10px 0px 0px;
	text-shadow: 3px 3px 3px #000;
}
p.sub-heading{
	font-family:'Titillium Web', sans-serif;
	font-size:180%;
	text-align: center;
	line-height:100%;
	color:rgb(81, 136, 153);
	margin-top:1%;
	padding-left: 0%;
}
p{
	font-size:120%;
	line-height:120%;
	padding:1%;
}
a{
	font-size:107%;
	font-weight:bold;
	line-height:110%;
	color:#87def8;
	text-decoration:none;
	margin-bottom:2%;
}
a:hover{
	color:#152f52;
	text-decoration:underline;
}
a.leadlink:after{
	content:url('images/hrefarrow.jpg');
}
a img{
	border:none;
}
img{
	border:none;
}
ul{
	margin-left:15px;
}
li{
	font-size:12px;
	line-height:12px;
	padding:5px 0px 5px 0px;
}
textarea{
	margin:auto;
}
pre{
	text-align:center;
}
table{
	margin:auto;
}
hr{
	margin:1% 0%;
	clear:both;
}
select[id^="selectNav"]{
	position:relative;
	width:100%;
	font-size:18px;
	padding:6px;
	border-radius: 4px;
	box-shadow: 3px 3px 8px #666;;
}
select[id^="selectNav"] option{
	margin:5px;
}
.affix {
    top:0px;
    width: 100%;
    z-index: 9999 !important;
}
.well{
	  margin-bottom:2%;
}
div.caption{
	background:linear-gradient(#354355,#192636);
	border-bottom-left-radius:10px;
	border-bottom-right-radius:10px;
}
div.caption p{
	  padding:0%;
	  font-size:112%;
	  color:rgb(135, 222, 248);
	  border-radius:6px;
}
div.caption p:hover{
	color:#e9e9e9;
}
div.thumbnail{
	border:#76d6f3 solid 2px;
	border-radius: 10px;
	box-shadow: 1px 5px 6px #666;
	padding:0%;
}
div.thumbnail a:hover{
	text-decoration: none;
}
div#mainR div.thumbnail a img{
	position:relative;
	width:100%;
	border-radius:10px 10px 0px 0px;
	padding:0%;
}
.thumbnail.blueThumb {background:linear-gradient(#2b3036,#0a0c0f);border:#76d6f3 solid 2px;}
.thumbnail.blueThumb form{margin:4%;}
/**/
#head{
	position:relative;
	width:100%;
	height:123px;
	background:linear-gradient(#152f51,#040a11);
	/*background-image:url('images/headBG.jpg');
	background-repeat:repeat-x;
	background-position:top left;*/
	margin-top:50px;
	z-index:2;
}
#head #headCont{
	position:relative;
	height:123px;
	margin:auto;
}
#head #headCont #logo{
	position:relative;
	width:377px;
	height:123px;
	float:left;
	left:1%;
}
#head #headCont #logo a{
	position:absolute;
	top:10px;
	width:377px;
	height:117px;
	background:transparent url('images/logoN.png');
	outline:none;
}
#head #headCont #logo a img{
	display:none;
}
#head #headCont #search{
	position:relative;
	width:300px;
	height:33px;
	float:right;
	padding:70px 10px 0px 0px;
	text-align:right;
}
div#searchMobile{
	position:relative;
	display:none;
}

/**/
div#subHead{
	position:relative;
	width:100%;
	height:300px;
	background:#000000 url('images/guitarStock1.jpg') no-repeat center center;
	background-size:120%;
	border-bottom:6px solid #153159;
	padding:5px 0px 5px 0px;
	text-align:center;
}
div#subHead2{
	position:relative;
	width:100%;
	height:300px;
	background:#000000 url('images/gearStock1.jpg') no-repeat center center;
	background-size:120%;
	border-bottom:6px solid #153159;
	padding:5px 0px 5px 0px;
	text-align:center;
}
div#subHead3{
	position:relative;
	width:100%;
	height:300px;
	background:#000000 url('images/ampStock1.jpg') no-repeat center center;
	background-size:120%;
	border-bottom:6px solid #153159;
	padding:5px 0px 5px 0px;
	text-align:center;
}
/*NAVIGATION SIDE*/
div#mainL{
	position:relative;
	width:24%;
	padding:.5% 0%;
	vertical-align:top;
	float:left;
	display:none;
}
div#mainL #navTabs{
	width:100%;
	padding:0px 0px 0px 0px;
	margin-bottom:0px;
}
div#mainL #navTabs div.nTab{
	position:relative;
	background:linear-gradient(rgb(255, 255, 255),#cecdcd);
	width:100%;
	padding:5px;
	margin-bottom:2px;
}
div#mainL #navTabs div.nTab:hover{
	position:relative;
	background:linear-gradient(rgb(255, 255, 255),#a3a3a3);
	color:#82ace7;
}
div#mainL #navTabs div.nTab a{
	position:relative;
	font-family:'Roboto Condensed', sans-serif;
	font-weight:bold;
	font-size:120%;
	color:#152f51;
	text-decoration:none;
	margin:1%;
	margin-left:5%;
}
div#mainL #navTabs div.nTab a:hover{
	color:#82ace7;
}
div#mainL #navTabs select{
	position:relative;
	width:100%;
	margin-bottom:8px;
	color:#333333;
	font-weight:bold;
}
div#mainL #navTabs select option.selHead{
	font-weight:bold;
	color:#333333;
}
form select[id^="selectNav"] option.selHead{
	width:100%;
	color:#999999;
	text-align:center;
}
div#mainL #navTabs select option{
	font-weight:normal;
	color:#336699;
}
/*New Nav*/
nav#barNav.navbar{
	min-height:5px;
	background:linear-gradient(#333,#040a11);
}
nav#barNav.navbar li{
	padding:0px;
}
nav#barNav.navbar-fixed-top li a{
	font-family:'Titillium Web', sans-serif;
	font-size:1.6vw;
	color:#87def8;
}
nav#barNav button.navbar-toggle{
	float:left;
	margin-left:15px;
}
.navbar-fixed-top .navbar-collapse{
	max-height:800px;
}
a.dropdown-toggle{
	margin-bottom:0px;
}
.dropdown-menu{
	background:linear-gradient(#091c35,#000000);
}

ul.nav.navbar-nav li a:hover, ul.nav.navbar-nav li.dropdown.open ul.dropdown-menu li a:hover{
	background:#333;
}

/*old nav
div#mainL #navDropMenu{
	display:none;
}
div#mainL #navDropMenu div.nTab{
	position:relative;
	width:226px;
	height:30px;
	margin-bottom:3%;
}
div#mainL #navDropMenu div.nTab a{
	position:absolute;
	width:290px;
	height:30px;
	font-family:'Roboto Condensed', sans-serif;
	font-weight:bold;
	font-size:16px;
	line-height:16px;
	color:#152f51;
	text-decoration:none;
}
div#mainL #navDropMenu div.nTab a:hover{
	color:#a3c0e8;
}
div#mainL #navDropMenu select{
	position:relative;
	width:290px;
	margin-bottom:8px;
	color:#333333;
	font-weight:bold;
}
div#mainL #navDropMenu select option.selHead{
	font-weight:bold;
	color:#333333;
}
div#mainL #navDropMenu select option{
	font-weight:normal;
	color:#336699;
}*/
/*CONTENT SIDE*/
div#mainR{
	position:relative;
	width:100%;
	background-color:transparent;
	padding:0% 1%;
	vertical-align:top;
	float:left;
}
div#mainR #homeTab{
	position:relative;
	width:100%;
	height:auto;
	text-align:right;
}
div#mainR img{
	padding:0px 5px 0px 5px;
}
div#mainR #gtr {
	margin:auto;
	margin-top:10px;
	margin-bottom:10px;
	width:650px;
	border:1px solid #333;
}
div#mainR #gtr th{
	background-image:url('images/h2bg1.jpg');
	background-repeat:repeat-x;
	font-size:16px;
	padding:5px;
	text-align:left;
}
div#mainR div.vidLes{
	position:relative;
	width:640px;
	height:210px;
	margin:auto;
	margin-top:10px;
	margin-bottom:10px;
	border-bottom:1px dotted #999999;
}
div#mainR div.vidLes span.vidTitle{
	position:relative;
	width:100%;
	font-size:16px;
	line-height:20px;
	font-weight:bold;
	color:#152f52;
	margin-bottom:10px;
}
div#mainR table.chordTbl{
	position:relative;
	width:100%;
	text-align:center;
	margin-bottom:10px;
}
div#mainR table.chordTbl tbody tr td{
	width:50%;
	font-size:12px;
	line-height:12px;
	vertical-align:middle;
}
div#mainR #scaleLayout{
	position:relative;
	width:100%;
	height:auto;
	margin:auto;
	text-align:center;
}
div#mainR #scaleLayout #patternShow{
	position:relative;
	width:100%;
	height:auto;
}
div#mainR #scaleLayout #patternSelect{
	position:relative;
	width:100%;
	margin-bottom:40px;
}
div#mainR #scaleLayout #patternSelect #scaleCaption{
	font-size:14px;
	line-height:14px;
	font-weight:bold;
	color:#152f52;
}
div#mainR #scaleLayout #patternSelect div.selectBtn{
	position:relative;
	width:14.285%;
	font-size:12px;
	line-height:12px;
	color:#fff;
	background-color:#84a1cd;
	border:1px solid #000000;
	padding:5px 0px 5px 0px;
	cursor:pointer;
	float:left;
}
div#mainR #scaleLayout #patternSelect div.selectBtn:hover{
	background-color:#152f52;
}
div.adLink{
	position:relative;
	width:100%;
	text-align:center;
}
/**/
#foot{
	position:relative;
	width:100%;
	background:linear-gradient(#152f51,#000);
	color:#9cc3ff;
	border-top: #02050a solid 5px;
	z-index:3;
	clear:left;
}
#foot p{
	font-size:100%;
}
#foot #footCont{
	position:relative;
	margin:auto;
}
#foot #footCont #footLinks{
	position:relative;
	padding:10px 10px 0px 10px;
	text-align:center;
}
#foot #footCont #footLinks a, #foot #footCont #footLinks input{
	color:#9cc3ff;
	text-decoration:none;
	font-size:110%;
	font-weight:normal;
	padding:0px 0px 0px 20px;
}
#foot #footCont #footLinks a:hover{
	color:#fff;
}
#foot #footCont #footLinks ul{
	list-style-type:none;
	float:left;
	border-left:1px solid #336699;
	padding-left:5px;
}
#foot #footCont #footLinks ul li{
	width:120px;
	padding:4px 15px 4px 0px;
}
#foot #footCont #footLinks ul#plainList{
	list-style-type:none;
	float:left;
	border-left:none;
	padding-left:5px;
}
#foot #footCont #footLinks ul#plainList li{
	width:120px;
	padding:4px 15px 4px 0px;
}
#foot #footAd{
	position:absolute;
	width:468px;
	height:60px;
	top:15px;
	left:50%;
	margin-left:-150px;
	text-align:center;
}
@media (min-width: 800px)  {
   .col-md-4 {width: 33.33333333%;float:left;}
}
@media only screen and (max-width:768px){
	h1{
		font-size:4vw;
	}
	h2,h3,h4,h5,h6{
		font-size:3.75vw;
		border-radius:0px;
	}
	h2{
		margin-top:0%;
	}
	p{
		margin-left:2%;
		margin-right:2%;
	}
	a{
		font-size: 100%;
	}
	#head #headCont #search{
		display:none;
	}
	#head{
		margin-top:50px;
	}
	div#searchMobile{
		position:relative;
		display:block;
		float:right;
		padding:5px;
		text-align:right;
		width:99%;
		top: 60%;
		clear:left;
	}
	
	div#mainL{width:100%;min-width:100%;padding:0px;float:none;}
	div#mainL #navTabs{
		display:none;
	}
	div#mainL #navDropMenu{
		position:fixed;
		background:linear-gradient(#152f51,#000);
		width:100%;
		max-width:100%;
		margin:0px 0px 0px 0px;
		float:left;
		display:none;
		top:55px;
		z-index: 999999;
	}
	div#mainL #navDropMenu div.nTab{
		width:100%;
		margin-bottom:0%;
		float:left;
	}
	div#mainL div#menuTab.nTab{
		position:fixed;
		width:100%;
		height:55px;
		background:linear-gradient(#152f51,#000000);
		/*background:#eaeff3 url('images/h2bg1.jpg') repeat-x bottom left;*/
		margin-bottom:0px;
		padding:15px 10px;
		float:left;
		cursor:pointer;
		display:block;
		top:0;
		z-index: 999999;
	}
	div#mainL #navDropMenu div.nTab a{
		position:relative;
		width:100%;
		font-size:122%;
		color:rgb(135, 222, 248);
		padding:8px;
		text-align:left;
		float:left;
	}
	div#mainL div#menuTab.nTab a{
		position:relative;
		width:100%;
		font-size:5vw;
		background-image:url('images/navTabBGmobile.png');
		background-repeat:repeat-x;
		padding:8px;
		text-align:left;
		float:left;
	}
	div#mainL #navDropMenu div.nTab a:hover{
		background-image:none;
		background-color:#3b577f;
		color:#a3c0e8;
	}
	div#mainL div#menuTab.nTab a:hover{
		background-image:none;
		background-color:#3b577f;
		color:#a3c0e8;
		text-decoration:none;
		cursor:pointer;
	}
	form select[id^="selectNav"]{
		width:96%;
		text-align:center;
		margin:2%;
	}
	form select[id^="selectNav"] option.selHead{
		width:100%;
		text-align:center;
	}
	div#mainL div.adPanel{display:none;}
	div#mainL div#sideProduct{display:none;}

	nav#barNav.navbar-fixed-top li a{
		font-family:'Titillium Web', sans-serif;
		font-size:3vw;
		color:#87def8;
		margin:0%;
	}

	div#mainR div.mobileAd{display:block;}
	div#mainR{width:100%;}
	div#mainR h2, div#mainR h3, div#mainR h4, div#mainR h5, div#mainR h6{width:102%;margin:0% -1% 1% -1%;}
	div[class^="col"]{margin:0%;}

	#footAd{
		display:none;
	}
	#foot{
		font-size:80%;
		padding:1%;
	}
	#lessonSwitch{
		display:none;
	}

	div#subHead{
		position:relative;
		width:100%;
		height:120px;
		background:#000000 url('images/guitarStock1.jpg') no-repeat center center;
		background-size:125%;
		padding:5px 0px 5px 0px;
		text-align:center;
		border:none;
	}
	div#subHead2{
		position:relative;
		width:100%;
		height:120px;
		background:#000000 url('images/gearStock1.jpg') no-repeat center center;
		background-size:125%;
		border-bottom:none;
		padding:5px 0px 5px 0px;
		text-align:center;
	}
}

@media only screen and (max-width:468px){
	#head #headCont #logo{
		position:relative;
		width:90%;
		float:none;
		text-align:center;
		left:50%;
		margin-left:-45%;
		top:-1px;
		}
	#head #headCont #logo a{
		position:relative;
		width:377px;
		height:117px;
		background:transparent;
		outline:none;
	}
	#head #headCont #logo a img{
		width:90%;
		display:block;
	}
	div#mainR div.adLink{
		display:none;
	}
	pre{
		font-size:2.75vw;
	}
	.affix {
		top:20px;
		width: 100%;
		z-index: 9999 !important;
	  }
	div[class^="col"]{margin:0%;}  
}

@media only screen and (min-width:768px){
	div#mainR div.mobileAd{display:none;}
	div#mainL div#menuTab.nTab{display:none;}
	div#mainL div#navTabs{display:block;}
}