/*---------------------------------------------------------
  Small Device CSS "djsmall.css" - "max-device-width:480px"
---------------------------------------------------------*/

/*-----------------------------------------------
  HTML Elements
-----------------------------------------------*/

/*disable banner hyperlink on small devices*/
/* .disabled { 
  pointer-events: none;
  cursor: default;
  opacity: 0.6; */
	}

html {}

body	{}

header {
	height: 90px;
	/* background-image: url(images/banner-320x100.png); */
	}

h1	{
	margin: 25px 0px 10px 0px;
	font-size: 1.25rem;	
	font-weight: normal;
	color: #666;
	}

.horizrule-index {
	width: 260px;
	margin: 15px auto 25px auto;
	}

.horizrule-bio {
	width: auto;
	margin: 30px auto 0px auto;	
	}

.horizrule-contact {
	width: 100%;
	margin: 25px auto 15px auto;
	}

footer {}

footer:after {}

/*-----------------------------------------------
  GLOBAL DIVs and Classes
-----------------------------------------------*/
#wrapper {
	position: relative;
	width: 100%; 
	margin: 0px auto;
	background-color: #474b4c;
	background-image: url(images/bkgnd-slate-black-980x450-clothify.jpg);	
	}

#wrapper.bkgnd-lightpage {
	background-color: #fefefe;
	background-image: none;
	}

#banner-container {
	grid-template-columns: 195px 125px;
	grid-template-rows: 1fr 1fr;
	grid-template-areas:
	"banner-name		banner-photo"	
	"banner-instruments	banner-photo";	
	width: 320px;
	background-color: #000;
	}

#banner-name, #banner-instruments, #banner-photo, #banner-website {
	
	}

#banner-name {
	padding: 4px 5px 0px 0px;
	font-size: 1.4rem;
	letter-spacing: .2rem;
	color: #f0dc6b;
	}

#banner-instruments {
	padding: 0px 10px 12px 0px;
	text-align: center;
	font-size: .95rem;
	letter-spacing: .08rem;
	line-height: 21px; 
	color: #e00; /* #da231a; */
	}

#banner-photo {
	padding-top: 3px;
	background-repeat: no-repeat;
	}

#banner-website{
	display: none
	}

.heading-lessons, .heading-lessons-top {
	margin: 40px auto 5px auto;
	}

.heading-lessons-top {
	margin-top: 15px;
	}

.heading-music-genre, .heading-music-genre-top, .heading-video-genre {
	width: 300px;
	padding-bottom: 2px;
	margin-bottom: 10px;
	}

#menu-button-bar-top {
	}

.menu-button, .menu-button-selected, .menu-button-top-row, .menu-button-selected-top-row {
	padding-bottom: 1px;
	margin: 0px 1px;
	}

#content-index, #content-bio, #content-music, #content-photos, #content-schedule, #content-lessons, #content-contact {
	position: relative;
	top: 0px;
	left: 0px;
	width: 320px;
	padding: 0px 0px 0px 0px;
	text-align: left;
	}
	
.bkgnd-img-rule, .bkgnd-img-rule-no-margin {
	width: 100%	;
	margin: 0px;
	}
	
.bullet-music-style {
	padding-bottom: 0px;
	margin: 0px 8px;
	font-size: .5rem;
	}

.bullet-music-style-hide {
	display: none;
	}	

.insert-return:after {
    content: "\a";
	white-space: pre;	
	}

/*-----------------------------------------------
  INDEX Page - index.html
-----------------------------------------------*/
#content-index {
	box-sizing: border-box;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto auto auto auto;
	grid-template-areas:
		"index-photo-UL"
		"index-text-plaque"
		"index-photo-UR"
		"index-btn-contain";
	width: 320px;
	grid-row-gap: 30px;
	padding: 0px 0px;
	margin: 30px auto;
	justify-content: center; 
	background-color: #474b4c;
	background-image: url(images/bkgnd-slate-black-980x450-clothify.jpg);
	}

#index-photo-UL, #index-photo-UR, #index-photo-LL, #index-photo-LR {
	width: 280px;
	margin: 0px auto;
	background-color: #555;
	}

#index-photo-LL, #index-photo-LR {
	display: none;
	}

#index-photo-UL {
	}

#index-photo-UR {
	}

#index-text-plaque {
	width: 320px;
	padding: 5px 15px 30px 15px;
	justify-self: center;
	line-height: 1.2em;
	}

p.index-intro {
	margin: 35px 0px 25px 0px;
	text-align: center;
	word-spacing: 0.1em;
	}

p.index-detail	{
	margin: 15px 0px 10px 10px;
	word-spacing: 0.1em;
	}

#index-button-container {
	display: grid;
	grid-template-columns: 235px;
	grid-template-rows: 90px 90px 90px;
	grid-template-areas:
		"index-button-title-1"
		"index-button-title-2"
		"index-button-title-3";
	grid-row-gap: 30px;		
	margin-top: 0px;
	}

.index-button-title {
	width: 85px;
	margin: 30px 0px 0px 0px;
	border: none;
	}

#index-button-photo-1, #index-button-photo-2, #index-button-photo-3  {
	margin: -52px 0px 0px 100px;
	}

/* a.index-button-title:link{
	color: #fff;
	text-decoration: none;
	background-color: #000;
	border: none;
	outline: 0;
	}

a.index-button-title:hover {
	color: #F00;
	background-color: #000;
	text-decoration: none;
	border: none;
	outline: 0;
	}

a.index-button-title:active {
	color: #fff;
	text-decoration: none;
	border: none;
	outline: 0;
	}

a.index-button-title:visited {
	color: #fff;
	text-decoration: none;
	border: none;
	outline: 0;
	} */

/* a.index-button-title:focus {
	color: #fff;
	text-decoration: none;
	border: none;
	outline: 0; 
	}	*/

/*-----------------------------------------------
  LESSONS Page - lessons.html
-----------------------------------------------*/
#lessons-intro{
	grid-template-columns: 1fr;
	grid-template-rows: auto auto;
	grid-template-areas:
		"lessons-text-plaque"
		"lessons-photo-R";
	grid-row-gap: 30px;			
	width: auto;
	padding: 0px;
	background-color: #474b4c;
	background-image: url(images/bkgnd-slate-black-980x450-clothify.jpg);
	}

#lessons-photo-L {
	display: none;
	}

#lessons-photo-R {
	width: 250px;
	height: 263px;
	margin-top: 0px;
	justify-self: center;
	}

#lessons-text-plaque {
	box-sizing: border-box;
	grid-area: lessons-text-plaque;
	justify-self: center;
	width: 320px;
	height: auto;	
	padding: 20px 30px 30px 30px;
	margin: 15px auto 0px auto;
	border-radius: 0px;
	background-image: url(images/bkgnd-maple-birdseye-440x110.jpg);
	}

#content-lessons {
	grid-template-columns: 1fr;
	grid-template-rows: auto auto;
	grid-template-areas:
		"lessons-main-body"
		"lessons-close";
	grid-column-gap: 0px;
	grid-row-gap: 30px;
	padding: 0px;
	margin-top: 30px;
	margin-bottom: -30px;
	background-image: none;
	}

#lessons-photo-1 { /* DJ playing drums */
	display: none;
	width: 320px;
	height: 280px;
	margin: 15px 0px 0px 0px;
	}

#lessons-photo-2 { /* Kenny's Music Shoppe */
	display: none;
	width: 320px;
	height: 222px;
	margin: 0px 0px 0px 0px;
	background-image: url(photos/photo-kennys-music-shoppe-320x222.jpg);
	border-image: url(images/bkgnd-oak-quartersawn-500x20.jpg)125 round;
	}

#lessons-main-body {
	box-sizing: border-box;
	width: 340px;
	height: auto;
	padding: 10px 15px;
	margin-top: 0px;
	justify-self: center;
	background-color: #f0f0f0;
	background-image: none;
	border-top: 0px solid #af794b; /* 0px */
	border-bottom: 0px solid #af794b; /* 0px */
	border-image: url(images/bkgnd-oak-quartersawn-500x20.jpg) 125 round;
	border-radius: 8px;
	}

.kennys-located {
	text-align: center;
	}

.kennys-address {
	width: 200px;
	margin: auto;
	white-space: nowrap;
	}		

.days-times {
	text-align: center;
	}

#lessons-close {
	box-sizing: border-box;
	width: 340px;
	height: auto;
	padding: 30px 15px;
	margin-top: 0px;
	justify-self: center;
	background-color: #f0f0f0;	
	background-image: none;
	border-top: 0px solid #af794b; /* 0px */
	border-bottom: 0px solid #af794b; /* 0px */
	border-image: url(images/bkgnd-oak-quartersawn-500x20.jpg) 125 round;		
	border-radius: 8px;
	}

#instruments { /* container for instrument photos 4,5,6,7 */
	width: 310px;
	height: 53px;
	padding: 20px 0px;
	margin: 10px 0px 30px 0px;
	}

#lessons-photo-3, #lessons-photo-4, #lessons-photo-5, #lessons-photo-6, #lessons-photo-7 {
	width: 64px;
	height: 48px;	
} 

#lessons-photo-3 {
	background-image: url(photos/photo-bongos-lp-aspire-64x48.png);
	margin:0px -7px 0px -8px;
	}

#lessons-photo-4 {
	background-image: url(photos/photo-congas-pearl-pwc202-511-64x48.png);
	margin:0px 7px 0px 0px;
 	}

#lessons-photo-5 {
	background-image: url(photos/photo-drums-gretsch-brooklyn-64x48.png);
	margin:0px 0px 0px 0px;
	}

#lessons-photo-6 {
	background-image: url(photos/photo-timbales-lp-1516B-Prestige-64x48.png);
	margin:0px 0px 0px 0px;
	}

#lessons-photo-7 {
	background-image: url(photos/photo-vibes-yamaha-yvrd-2700g-64x48.png);
	margin:0px 0px 0px -3px;
	}

p.lessons-closing {
	width: 320px;
	margin: 20px 0px 0px 0px;
	line-height: 1.3em;
	}
/*-----------------------------------------------
  MUSIC Page - music.html
-----------------------------------------------*/
#content-music {
	text-align: left;
	width: 320px;
	padding: 0px 0px 30px 0px;
	border: none;
	}

.music-row-container {
	position: relative;
	width: 300px;
	height: 200px;
	padding: 0px 0px 0px 0px;
	margin: 0px auto 10px auto;
	background-color: #f0f0f0;
	border: none;
	}

.music-song-link, .music-artist, .music-instrument, .music-instrument-twoline, .music-coverart, .music-audio-controls, .music-video-controls, .video-song-link, .video-artist, .video-instrument {
	position: absolute;
	}

.music-coverart {
	top: 0px;
	width: 100px;
	height: 100px;
	border-top: 0px solid #777;
	border-right: 0px solid #777;
	border-bottom: 0px solid #777;
	border-left: 0px solid #777;
	border-radius: 4px 0px 0px 0px;
	background-color: #f0f0f0;
	}
	
.music-song-link {
	top: 0px;
	left: 100px;
	width: 	200px;
	height: 17px;
	padding: 8px 0px 0px 0px;
	font-weight: normal;
	border-top: 0px solid #777;
	border-right: 0px solid #777;
	border-bottom: 0px solid #777;
	border-left: 0px solid #777;
	border-radius: 0px 4px 0px 0px;
	text-align: center;
	}

.music-artist, .video-artist {
	top: 25px;
	left: 100px;
	width: 200px;
	height: 40px;
	padding-top: 16px;
	font-weight: bold;
	border-top: 0px solid #777;
	border-right: 0px solid #777;
	border-bottom: 0px solid #777;
	border-left: 0px solid #777;
	}
	
.music-album {
	font-weight: normal;
	}	

.music-instrument, .music-instrument-twoline, .video-instrument {
	font-weight: normal;
	}

.music-instrument , .music-instrument-twoline {
	top: 80px;
	left: 100px;
	width: 200px;
	height: 24px;
	padding-top: 0px;
	border-top: 0px solid #777;
	border-right: 0px solid #777;
	border-bottom: 0px solid #777;
	border-left: 0px solid #777;
	}

.music-audio-controls {
	top: 100px;
	width: 300px;
	height: 100px;
	padding: 0px 0px 0px 0px;	
	text-align: center;
	font-weight: normal;
	background-image: none;
	border-top: 0px solid #777;
	border-right: 0px solid #777;
	border-bottom: 0px solid #777;
	border-left: 0px solid #777;
	border-radius: 0px 0px 4px 4px;
	z-index: 3;
	}
	
audio	{
	width: 270px;
	height: 50px;
	}	

.video-row-container {
	width: 300px;
	height: 230px;
	border: 0px;
	margin: 0px auto;
	}

.music-video-controls {
	clear: left;
	margin-left: 0px;
	margin-bottom: 40px;
	width: 300px;
	height: auto; /* 230px; */
	padding: 0px 0px 0px 0px;	
	text-align: center;
	font-weight: normal;
	background-image: none;
	background-color: inherit;
	}
	
video {
	width: 300px;
	}	
	
.video-song-link, .video-artist {
	border-bottom: 5px solid #999;
	}

.video-artist {
	float: left;
	width: 0px; /* 148px; */
	height: 0px; /* 38px; */
	padding-top: 12px;
	display: none;
	}

.video-song-link {
	margin-left: 0px;
	width: 149px;
	height: 35px;
	padding-top: 15px;	
	border-left: 1px solid #ccc;
	}	

.video-instrument {
	position: absolute;
	clear: left;
	margin-left: 0px;
	width: 1px;
	height: 1px;
	overflow: hidden;
	display:none;
	}	

.media-player-notice {
	margin: 15px 0px 10px 0px;
	text-align: left;
	margin-left: 10px;
	font-weight: normal;
	letter-spacing: .5px;
	line-height: 135%;
	color: #8B4513;
	}
	
.player-not-supported {
	color: #0066CC;
	}
	
/*-----------------------------------------------
  PHOTOS Page - photos.html
-----------------------------------------------*/
#content-photos {
	width: 100%;
	padding-top: 0px;
    padding-bottom: 30px;
	margin: 0px auto;
	background-color: #fefefe;
	background-image: inherit;
	border: none;
	}
	
#photo-left-col, #photo-right-col {
	position: relative;
	clear: both;
	display: block;
	top: 15px;
	width: 100%;
	margin: 0px;
	}	

.photo-with-caption {
	position: relative;
	width: 320px;
	margin: 0px auto;
	}
	
.caption {
	margin-bottom: 20px;
	}	
	
.photo-1 {
	background-image: url(photos/photo-dj-under-lights-320x351.jpg);
	height: 351px;
	}

.photo-2 {
	background-image: url(photos/photo-charles-brown-concert-320x383.jpg);
	height: 383px;
	}

.photo-3 {
	background-image: url(photos/photo-bernard-purdie-320x393.jpg);
	height: 393px;
	}

.photo-4 {
	background-image: url(photos/photo-alfredo-de-la-fe-320x240.jpg);
	height: 240px;
	}
.photo-5 {
	background-image: url(photos/photo-threeplay-peekskill-320x212.jpg);
	height: 212px;
	}

.photo-6 {
	background-image: url(photos/photo-eric-louis-galicia-320x240.jpg);
	height: 240px;
	}

.photo-7 {
	background-image: url(photos/photo-peatmoss-320x214.jpg);
	height: 214px;
	}

.photo-8 {
	background-image: url(photos/photo-oro-valley-jfestival-320x210.jpg);
	height: 210px;
	}

.photo-9 {
	background-image: url(photos/photo-dj-vibes-320x240.jpg);
	height: 240px;
	}

.photo-10 {
	background-image: url(photos/photo-jorge-lopez-320x177.jpg);
	height: 177px;
	}

.photo-11 {
	background-image: url(photos/photo-reals-lounge-320x229.jpg);
	height: 229px;
	}

.photo-12 {
	background-image: url(photos/photo-betty-blue-320x392.jpg);
	height: 392px;
	}

.photo-13 {
	background-image: url(photos/photo-arturos-bob-dorough-320x240.jpg);
	height: 240px;
	}

.photo-14 {
	background-image: url(photos/photo-ny-musicians-union-320x606.jpg);
	height: 606px;
	}

/*-----------------------------------------------
  BIO Page ("About") - bio.html 
-----------------------------------------------*/
#content-bio {
	width: 340px;
	padding: 30px 10px;
	background-color: #fefefe;
	background-image: none;
	border: none;
	}

#bio-left-column, #bio-right-column, #bio-single-column{
	position: relative;
	width: 320px;
	padding: 0px 0px;
	left: 0px;
	text-align: left;
	line-height: 1.3em;
	}
	
#bio-left-column {
	border-right: none;
	border-bottom: 1px solid #aaa;
	}
	
#bio-right-column {
	margin-top: 10px;
	}

#bio-photo1, #bio-photo2, #bio-photo3, #bio-photo4, #bio-photo5, #bio-photo6 {
	margin-top: 10px;
	margin-right: 20px;
	}

#bio-photo1 {
	margin-top: 10px;
 	}

#bio-photo2 {
	margin-top: 14px;
 	}

#bio-photo3 {
	margin-top: 12px;
	}

#bio-photo4 {
	margin-top: 13px;
	}

#bio-photo5 {
	margin-top: 11px;
	}

#bio-photo6{
	width: 120px;
	margin: 13px 20px 30px 0px;
	background-image: url(photos/photo-tucson-saguaros-bio-120x110.jpg);
	}

p.bio-closing {
	margin-top: 0px;
	margin-left: 0px;
	}

/*-----------------------------------------------
  CONTACT Page - contact.html
-----------------------------------------------*/	
#content-contact {
	grid-template-columns: 1fr;
	grid-template-rows: auto auto;
	grid-template-areas:
		"contact-text-plaque"
		"contact-photo-2";
	grid-row-gap: 30px;
	width: 320px;
	padding: 0px 0px 30px 0px;
	margin-bottom: 0px;
	}

#contact-photo-1, #contact-photo-2 {
	justify-self: center;
	}

#contact-photo-1 {
	display: none;
	}
	
#contact-photo-2 {
	width: 250px;
	height: 278px;
	background-size: 250px 278px;
	}

#contact-text-plaque {
	width: 320px;
	margin: 15px 0px 0px 0px;
	padding: 25px 15px 25px 15px;
	justify-self: center;	
	text-align: center;
	border-radius: 0px 0px 4px 4px;
	}

.contact-phone-email-head {
	margin: 45px 0px 10px 0px;
	text-align: left;
	font-weight: bold;
	}
	
.clicktelnumbers-lessons {
	font-weight: normal;
	text-decoration: none;
	}

.clicktelnumbers-contact{
	font-weight: bold;
	text-decoration: none;
	}	
	
.home-mobile {
	font-weight: normal;
	margin-left: 7px;
	}	

/*-----------------------------------------------
 HYPERLINKS
 ----------------------------------------------*/
.main-menu a:link{
	background-color: inherit;
	color: #fff;
	font-weight: normal;
	text-decoration: none;
	}

.main-menu a:visited{
	padding: 4px 0px 8px 0px;
	background-color: inherit;
	color: #fff;
	font-weight: normal;
	text-decoration: none;
	}

.main-menu a:hover{
	padding: 8px 0px 11px 0px;
	background-color: #000;
	color: #fff;
	font-weight: normal;
	text-decoration: none;
	border-radius: 2px;
	}

.main-menu a:active{
	padding: 9px 0px 8px 0px;
	background-color: #000;
	color: #f0dc6b;
	font-weight: normal;
	text-decoration: none;
	}

/* --END page ------------------------------------ */