/*-----------------------------------------------
  Main CSS "djstyle.css"
-----------------------------------------------*/

/*-----------------------------------------------
  HTML Elements
/*---------------------------------------------*/
/* * {
	box-sizing: border-box;
	} */
	
/* *, *::before, *::after {
	-webkit-box-sizing: inherit;
	box-sizing: inherit;
	} */

/* :root {
	--color-bkgnd: #fefefe;
	--color-text: #000;
	--color-menu: #a8241b;
	--font-size: 16px;
	--border-radius: .2em;
	} */

html {
    height: 100%;
	scrollbar-color: #1e5482 #fff;
	}

body	{
	/* min-height: 100vh; */
	text-align: left;
	margin: 0;
	font-family: Verdana, Tahoma, Arial, sans-serif;
	font-size: 1.125rem;
	color: #000;
	/*background-color: #111;*/
	background-image: url(images/bkgnd-slate-black-980x450-clothify.jpg);
	/*background-image: url(images/images-not-used/bkgnd-tile-lite-grey-640x340.jpg);	*/
	}

header {
	position: relative;
	width: 100%;
	height: 90px;
	margin: 0px;
	text-align: center;
	text-decoration: none;
	/* background-image: url(images/banner-850x90.png); */
	background-color: #000;
	background-repeat: no-repeat;
	background-position: center;
	color: inherit;
	}

table {
	border-collapse: collapse;	
	}

th, td {
	font-size: 1.06rem;
	font-weight: bold;
	}

footer {
	position: relative; /* NEW */
	bottom: 0px; /* NEW */
	padding: 0px 0px 3px 0px;
	text-align: center;
	color: #000;
	background-color: #474b4c;
	background-image: url(images/bkgnd-paper-tan-worn-250x50.jpg);		
	}

footer::after { /* Insert text into footer */
	display: inline-block;
	white-space: pre-wrap;
	padding: 9px 0px 10px 0px; /* 10px 0px; */
	font-size: .563rem;
	line-height: 1rem;
	color: #333;
	/* content: "Copyright \00a9  2022  Dave Jeffrey \a \2013   All Rights Reserved  \2013  \a davejeffrey.com"; */
	content: "Copyright \00a9  2008 \2013  2025  Dave Jeffrey \a All Rights Reserved \a Page by Musician's Design Studio";
	}

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

#header-container {
	grid-area: header-container;
	margin-top: auto;
	}

#banner-container {
	box-sizing: border-box;
	display: grid;
	grid-template-columns: 320px 320px 125px 1fr;
	grid-template-rows: auto;
	grid-template-areas:
	"banner-name	banner-instruments	banner-photo	banner-website";
	width: 900px;
	height: 90px;
	margin: 0 auto;
	background-color: #000;
	justify-items: center;
	align-items: center;
	}

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

#banner-name {
	grid-area: banner-name;
	padding: 0px 0px 10px 0px;
	font-size: 1.75rem;
	letter-spacing: .2rem;
	color: #f0dc6b;
	}

#banner-instruments {
	grid-area: banner-instruments;
	padding: 0px 60px 10px 0px;
	text-align: center;
	font-size: 1.1rem;
	letter-spacing: .2rem;
	line-height: 1.7rem; 
	color: #da231a;
	}

#banner-photo {
	grid-area: banner-photo;
	}

#banner-website{
	grid-area: banner-website;
	padding: 0px 0px 10px 0px;
	font-size: .700rem;
	color: #fff;
	font-weight: bold;
	}

#menu-container {
	width: 100%;
	height: auto;
	padding: 5px 0px;
	margin: 0px auto;
	text-align: center;
	background-color: #e6d2b7;
	background-image: url(images/bkgnd-paper-tan-worn-250x50.jpg);
	}

#menu-button-bar-top, #menu-button-bar-bottom {
	display: inline-block;
	width: auto;
	height: 30px;
	margin: 5px 0px;
	background-color: #e0cbb0;
	background-image: url(images/bkgnd-paper-tan-worn-250x50.jpg);
	}

.menu-button, .menu-button-top-row, .menu-button-selected,  .menu-button-selected-top-row , .menu-button-spacer {
	position: relative;
	width: 95px;
	height: 30px;
	padding-bottom: 3px;
	margin: 0px -1px;
	font-size: .72rem; /* .813rem; */
	letter-spacing: .14rem; /* .1rem */
	color: #fff;
	font-weight: normal;
	background-color: #1e5482; /* #163d5e; */ /* #243849; */ /* #a8241b; */
	border: none;
    border-radius: 4px;
	cursor: pointer;
	}

.menu-button-selected, .menu-button-selected-top-row {
	background-color: #000;
	color: #fff;
	cursor: default;
	}

.menu-button:link, .menu-button-top-row:link, .menu-button:hover, .menu-button-top-row:hover, .menu-button:active, .menu-button-top-row:active, .menu-button:visited, .menu-button-top-row:visited {
	text-decoration: none;	
	border: none;
	transition: 0.2s;
	}

.menu-button:link, .menu-button-top-row:link {
	background-color: #a8241b;
	color: #fff;
	}

.menu-button:hover, .menu-button-top-row:hover {
	background-color:#000;
	color: #f00;
	font-weight: normal;
	}

.menu-button:active, .menu-button-top-row:active {
	background-color:#000;
	color: #fff;
	}

.menu-button:visited, .menu-button-top-row:visited {
	background-color:#000;
	color: #fff;
	}

/* .menu-button:focus, .menu-button-top-row:focus {
	background-color:#000;
	color: #fff;
	text-decoration: none;	
	transition: 0.2s;
	} */

#content-index, #content-bio, #content-lessons, #content-music, #content-photos, #content-contact  {
	position: relative;
	width: 980px;
	height: auto;
	margin: 0 auto;
	padding: 30px;
	/* background-color: var(--clr-bkgnd); */
	font-size: 1.125rem;
	}

.pagetitle {
	position: relative; /* !IMPORTANT for position:absolute screws */
	display: block;
	width: 220px;
	padding-bottom: 3px;
	height: 40px;
	margin: 15px auto 0px auto;
	text-align: center;
	font-size: 1.05rem;
	font-weight: normal;
	letter-spacing: .12rem;
	color: #ddd;
	background-color: #111;
	border: 1px solid #484848;
	border-radius: 4px;
	}

.pagetitle:hover {
	background-color: none;
	}

h1	{
	margin: 0px 0px 20px 0px;
	text-align: center;
	font-family: Tahoma, Verdana, Arial, sans-serif; /* Tahoma preferred */
	font-size: 1.250rem;
	font-weight: bold;
	letter-spacing: .06em;
	color: #000;
	}

.heading-lessons, .heading-lessons-top, .heading-music-genre, .heading-music-genre-top,.heading-video-genre {
	position: relative; /* !IMPORTANT for position:absolute screws */
	display: block;
	height: 30px;
	padding-bottom: 2px;
	font-size: 1.063rem;
	font-weight: bold;
	vertical-align: middle;
	text-align: center;
	background-color: #e6d2b7;
	background-image: url(images/bkgnd-maple-birdseye-300x50.jpg);
	border: 1px solid #b6b6b6;
	border-radius: 4px;
	}

.heading-lessons, .heading-lessons-top {
	width: 150px;
	margin: 0px 0px -5px 0px;
	}

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

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

.heading-music-genre , .heading-music-genre-top, .heading-video-genre {
	box-sizing: border-box;
	width: 955px;
	height: 40px;
	padding-bottom: 5px;
	margin: 50px auto 15px auto;
	font-size: .938rem;
	letter-spacing: .1em;
	border: none;
	border-radius: 4px;
	}

.heading-music-genre-top {
	margin-top: 15px;
	}

/* .heading-video-genre {	
	width: 524px;
	} */

a img {
    border: 0;
	}

.hang-indent-20px {
    padding-left: 20px;
    text-indent: -20px;
	}

hr.standardrule {
	width: 100%;
	height: 1px;
	margin: 0px 0px;
	background-color: #808080;
	color: #808080;
	border: none;
	}

.horizrule-index, .horizrule-bio, .horizrule-lessons, .horizrule-contact {
	height: 1px;
	border-top: 1px solid #444;	
	}

.horizrule-index {
	width: 100%;
	margin: 24px 0px;
	}

.horizrule-bio {
	width: 490px;
	margin: 20px 0px -7px 195px;	
	}

.horizrule-lessons {
	width: 100%;
	margin: 25px 0px 15px 0px;
	}

.horizrule-contact {
	margin: 30px 0px;
	}

.button-top-page {
	position: relative;
	box-sizing: border-box;
	width: 40px;
	height: 40px;
	margin: 50px auto 0px auto;
	background-image: url(images/button-uparrow-blue-3d-40x40.png);
	}

/* .button-top-page-text:before {
	content: "Top Page";		
	} */

.button-hex-screw-TL, .button-hex-screw-TR, .button-hex-screw-BL, .button-hex-screw-BR , .button-hex-screw-music-L, .button-hex-screw-music-R , .button-hex-screw-pagetitle-L, .button-hex-screw-pagetitle-R {
	position: absolute;
	z-index: 10;
	width: 14px;
	height: 14px;
	background-image: url(images/image-screw-button-hex.png);
	background-size: 12px 12px;
	background-repeat: no-repeat;
	background-position: center;
	}

/* .button-hex-screw-TL {
	top: 8px;
	left: 8px;	
	}

.button-hex-screw-TR {
	top: 8px;
	right: 8px;
	}

.button-hex-screw-BL {
	bottom: 8px;
	left: 8px;
	}

.button-hex-screw-BR {
	right: 8px;
	bottom: 8px;
	} */

.button-hex-screw-music-L {
	top: 12px;
	left: 10px;
	}
	
.button-hex-screw-music-R {
	top: 12px;
	right: 10px;
	}	

.button-hex-screw-pagetitle-L {
	top: 11px;
	left: 13px;
	}
	
.button-hex-screw-pagetitle-R {
	top: 11px;
	right: 13px;
	}

.button-end-cap-L, .button-end-cap-R {
	position: absolute;
	z-index: 10;
	width: 14px;
	height: 40px;
	background-image: url(images/image-oak-quartersawn-14x40.png);
	}

.button-end-cap-L {
	top: 0px;
	left: 0px;
	border-radius: 4px 0px 0px 4px;
	}
	
.button-end-cap-R {
	top: 0px;
	right: 0px;
	border-radius: 0px 4px 4px 0px;	
	}	

/*-----------------------------------------------
  CLASSES Global / Other
-----------------------------------------------*/

.normal	{ font-weight: normal; }

.bold	{ font-weight: bold; }
	
.italic	{ font-style: italic; }

.underline { text-decoration: underline; }

.center { text-align: center; }

.left {
	left: 0px;
	border:0;
	}
.middle {
	vertical-align: middle;
	border:0;
	}

.black 	{ color: #000; }
.white 	{ color: #FFF; }

.blue 	{ color: #191970; } /* MidnightBlue */
.brown 	{ color: #8B4513; } /* SaddleBrown */
.grey 	{ color: #777; }

.font6		{ font-size:  .375rem; }
.font7		{ font-size:  .438rem; }
.font8		{ font-size:  .500rem; }
.font9		{ font-size:  .563rem; }
.font10		{ font-size:  .625rem; }
.font11		{ font-size:  .688rem; }
.font12		{ font-size:  .750rem; }
.font13		{ font-size:  .813rem; }
.font14		{ font-size:  .875rem; }
.font15		{ font-size:  .938rem; }
.font16		{ font-size: 1.000rem }
.font17		{ font-size: 1.063rem; }
.font18		{ font-size: 1.125rem; }
.font19		{ font-size: 1.188rem; }
.font20		{ font-size: 1.250rem; }
.font21		{ font-size: 1.313rem; }
.font22		{ font-size: 1.375rem; }
.font23		{ font-size: 1.438rem; }
.font24		{ font-size: 1.500rem; }

.indent50	{ margin-left: 50px; }

.arial		{ font-family: Arial, Tahoma, Verdana, sans-serif; }
.tahoma		{ font-family: Tahoma, Arial, Verdana, sans-serif; }
.verdana	{ font-family: Verdana, Tahoma, Arial, sans-serif; }

.lspace1	{ letter-spacing: .1px; }
.lspace2	{ letter-spacing: .2px; }
.lspace3	{ letter-spacing: .3px; }
.lspace4	{ letter-spacing: .4px; }
.lspace5	{ letter-spacing: .5px; }

.lheight2rem	{ line-height: 2rem; }

.bkgnd-slate {
	background-image: url(images/bkgnd-slate-black-980x450.jpg);	
	}

.bkgnd-img-rule, .bkgnd-img-rule-no-margin, .bkgnd-img-rule-music-genre  {
	width: 100%;
	height: 15px;
	background-color: #BE8657;
	background-image: url(images/bkgnd-oak-quartersawn-980x40.jpg);
	background-repeat: repeat-x;
	border-top: 0px solid #E8E8E8;
	border-left: 0px;
	border-bottom: 0px solid #A0A0A0;
	border-right: 0px;
	}
	
.bkgnd-img-rule {
	margin: 0px 0px 10px 0px;
	
	}

.bkgnd-img-rule-no-margin {
	margin: 0px 0px 0px 0px;
	}	

.bkgnd-img-rule-music-genre {
	width: 950px;
	margin: 0px auto 10px auto;
	}

.bullet-music-style, .bullet-music-style-hide, .bullet-music-style-bottompad {
	display: inline-block;
	margin: 0px 15px;
	font-size: .563rem;
	line-height: 25px;
	vertical-align: middle;
	color: #222;
	}

.bullet-music-style-bottompad {
	padding-bottom: 4px;
	}

/*-----------------------------------------------
  INDEX Page - index.html
-----------------------------------------------*/
#content-index {
	box-sizing: border-box;
	display: grid;
/* 	grid-template-columns: 280px 1fr 280px;
	grid-template-rows: 200px auto 200px;	 */
	grid-template-columns: 280px 420px 280px;
	grid-template-rows: 200px 200px 173px;
	grid-template-areas:
		"index-photo-UL		index-text-plaque	index-photo-UR"
		"index-photo-LL		index-text-plaque	index-photo-LR"
		"index-btn-contain	index-btn-contain	index-btn-contain";
	grid-column-gap: 0px;
	grid-row-gap: 0px;
	width: 980px;
    min-height: calc(100vh - 155px - 85px); /* NEW */
	padding: 30px 0px 15px 0px;
	}

#index-photo-UL, #index-photo-UR, #index-photo-LL, #index-photo-LR {
	position: relative;
	height: 200px;
	background-repeat: no-repeat;
	border-radius: 4px;
	}

#index-photo-UL {	
	grid-area: index-photo-UL;
	background-image: url(photos/photo-dj-profile-BW-280x200.jpg);
	border-radius: 4px 0px 0px 0px;
	}

#index-photo-UR {
	grid-area: index-photo-UR;	
	background-image: url(photos/photo-dj-empire-BW-280x200.jpg);	
	border-radius: 0px 4px 0px 0px;
	}

#index-photo-LL {
	grid-area: index-photo-LL;	
	background-image: url(photos/photo-dj-vibes-BW-280x200.jpg);
	border-radius: 0px 0px 0px 4px;
	}

#index-photo-LR {
	grid-area: index-photo-LR;	
	background-image: url(photos/photo-eric-louis-galicia-BW-280x200.jpg);
	border-radius: 0px 0px 4px 0px;	
	}

#index-text-plaque { 
	grid-area: index-text-plaque;	
	box-sizing: border-box;
	position: relative; /* !IMPORTANT for position:absolute screws */
	padding: 10px 40px 20px 40px;
	background-color: #ead9c8;
	background-image: url(images/bkgnd-maple-birdseye-440x110.jpg);
	border-top: 8px solid #af794b;
	border-bottom: 8px solid #af794b;
	border-image: url(images/bkgnd-oak-quartersawn-500x20.jpg) 125 round;
	border-radius: 0px;
	/* overflow: hidden; */
	}

#index-button-container {
	display: grid;
	grid-template-columns: auto auto auto;
	grid-template-rows: auto;
	grid-template-areas:
		"index-button-title-1	index-button-title-2	index-button-title-3";
 	grid-column-gap: 70px;
	grid-row-gap: 15px;
	justify-self: center;
	grid-area: index-btn-contain;
	margin-top: 30px;
	}

.index-button-title {
	position: relative;
	z-index: 2;
	width: 125px;
	height: 30px;
	padding-top: 8px;
	margin: 0px;
	background-color: #000;
	color: #fefefe;
	font-size: .813rem;
	letter-spacing: .05em;
	line-height: 1.1em;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	}

.index-button-title-1 {
	grid-area: index-button-title-1;
	}

.index-button-title-2 {
	grid-area: index-button-title-2;
	}

.index-button-title-3 {
	grid-area: index-button-title-3;
	}

.index-button-title:link, .index-button-title:hover, .index-button-title:active, .index-button-title:visited {
	background-color: #000;
	background-image: none;
	text-decoration: none;	
	transition: 0.2s;
	border: none;	
	}

.index-button-title:link {
	color: #fff;
	}

.index-button-title:hover {
	color: #f00;
	font-weight: normal;
	}

.index-button-title:active {
	color: #fff;
	}

.index-button-title:visited {
	color: #fff;
	}

#index-button-photo-1, #index-button-photo-2, #index-button-photo-3  {
	height: 90px;
	width: 125px;
	margin: 16px 0px 0px -5px;
	border-radius: 4px;
	}

#index-button-photo-1 {
	background-image: url(photos/photo-betty-blue-125x90.jpg);
	grid-area: index-button-photo-1;
	}

#index-button-photo-2 {
	background-image: url(images/coverart-Dale-Norris-Refractions-125x90.png);
	grid-area: index-button-photo-2;
	}

#index-button-photo-3 {
	background-image: url(photos/photo-peatmoss-125x90.jpg);
	grid-area: index-button-photo-3;
	}



.spanlink { /* make div a hyperlink */
	position: absolute;  
  	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	/* background-image: url(images/empty.gif);/*edit: fixes overlap error in IE7/8, need to have empty gif */
	z-index: 2;
	}

/*-----------------------------------------------
  LESSONS Page - lessons.html
-----------------------------------------------*/
#lessons-intro {
	box-sizing: border-box;
	display: grid;
	grid-template-columns: 300px 1fr 300px;
	grid-template-rows: auto;
	grid-template-areas:
		"lessons-photo-L	lessons-text-plaque		lessons-photo-R";
	grid-column-gap: 0px;
	grid-row-gap: 30px;		
	width: 980px;
	padding: 15px 0px;
	margin: 0px auto;
	}

#lessons-photo-L, #lessons-photo-R {
	height: 346px;
	/* width: 250px; */
	/* align-self: center; */
	background-repeat: no-repeat;
	background-size: cover;
	margin-top: 0px;
	}

#lessons-photo-L {	
	grid-area: lessons-photo-L;
	background-image: url(photos/photo-ny-musicians-union-BW-250x263.jpg);
	border-radius: 4px 0px 0px 4px;
	}

#lessons-photo-R {
	grid-area: lessons-photo-R;
	background-image: url(photos/photo-betty-blue-BW-250x263.jpg);
	border-radius: 0px 4px 4px 0px;
	}

#lessons-text-plaque {
	box-sizing: border-box;
	grid-area: lessons-text-plaque;
	position: relative; /* !IMPORTANT for position:absolute screws */
	height: 346px;
	padding: 2px 25px 25px 25px;
	margin: 0px;
	background-color: #ead9c8;
	background-image: url(images/bkgnd-maple-birdseye-440x110.jpg);
	border-top: 8px solid #Af794b;
	border-bottom: 8px solid #af794b;
	border-image: url(images/bkgnd-oak-quartersawn-500x20.jpg)125 round;
	border-radius: 0px;
	}

#content-lessons {
	box-sizing: border-box;
	display: grid;
	grid-template-columns: 300px 1fr;
	grid-template-rows: auto auto auto;
	grid-template-areas:
		"lessons-photos		lessons-main-body"
		"lessons-photos		lessons-main-body"
		"lessons-close		lessons-close";
	grid-column-gap: 0px;
	grid-row-gap: 0px;
	justify-content: center;
	width: 980px;
	padding: 0px 0px;
	margin: 15px auto 30px auto;
	text-align: left;
	font-size: 1.125rem;
	line-height: 1.3em;
	}

#lessons-photos {
	grid-area: lessons-photos;
	}

#lessons-photo-1, #lessons-photo-2 {
	background-position: -20px 0px;
	background-repeat: no-repeat;	
	}

#lessons-photo-1 {
	height: 302px;
	background-image: url(photos/photo-dj-empire-345x302.jpg);
	margin-bottom: 0px;
	border-radius: 4px 0px 0px 0px;
	border-bottom: 15px solid #000;
	border-image: url(images/bkgnd-maple-birdseye-300x50.jpg) round 75;
	/* border-image: url(images/bkgnd-black-grey-diag-stripe-500x200.jpg) 10 round; */
	}

#lessons-photo-2 {
	height: 292px;
	background-image: url(photos/photo-kennys-music-shoppe-345x292.jpg);
	border-radius: 0px 0px 0px 4px;	
	}

#lessons-main-body {
	box-sizing: border-box;
	grid-area: lessons-main-body;
	padding: 0px 30px 0px 40px;
	background-color: #f5f5f5;
	border-radius: 0px 4px 4px 0px;
	}

p.lessons-title	{
	margin: 20px 0px 20px 0px;
	font-size: 1.25rem;
	font-weight: bold;
	letter-spacing: .06rem;
	text-align: center;
	}

.lessonlength {
	color: #8b4513;
	font-weight: bold;
	}

.kennys {
	margin-top: 15px;
	}

.kennys-located {
	margin-bottom: -4px;
	}

#lessons-close {
	box-sizing: border-box;
	grid-area: lessons-close;
	padding: 40px 0px;
	margin-top: 30px;
	background-color: #f5f5f5;
	border-radius: 4px;
	}

#instruments { /* container for instrument photos 3,4,5,6,7 */
	width: 920px;
	height: 130px;
	margin: 0 auto;
	border-top: solid 1px #666;
	border-bottom: solid 1px #666;
	}

#lessons-photo-3 {
	float: left;
	margin: 10px 36px 0px 0px;	
	width: 140px;
	height: 105px;
	background-image: url(photos/photo-bongos-lp-aspire-140x105.png);
	}

#lessons-photo-4 {
	float: left;
	margin: 12px 72px 0px 0px;
	width: 140px;
	height: 105px;
	background-image: url(photos/photo-congas-pearl-pwc202-511-140x105.png);
	}

#lessons-photo-5 {
	float: left;
	margin: 12px 44px 0px 0px;
	width: 140px;
	height: 105px;
	background-image: url(photos/photo-drums-gretsch-brooklyn-140x105.png);
	}

#lessons-photo-6 {
	float: left;
	margin: 18px 36px 0px 0px;
	width: 140px;
	height: 105px;
	background-image: url(photos/photo-timbales-lp-1516B-Prestige-140x105.png);
	}

#lessons-photo-7 {
	float: right;
	margin: 18px 20px 0px 0px;
	width: 140px;
	height: 105px;
	background-image: url(photos/photo-vibes-yamaha-yvrd-2700g-140x105.png);
	}

#lessons-times {
	text-align: center;
	}

p.lessons-closing {
	width: 620px;
	margin: 40px 0px 0px 235px;
	line-height: 1.3em;
	}

/*-----------------------------------------------
  MUSIC Page - music.html
-----------------------------------------------*/
#content-music {
	box-sizing: border-box;
	width: 980px;
	text-align: center;
	margin: 15px auto 0px auto;
	padding: 0px 0px 40px 0px;
	background-color: none;
	background-image: none;
	}

.music-row-container {
	position: relative;
	width: 960px;
	height: 100px;
	margin: 0px auto 8px auto;
	border: solid #e0e0e0 0px;
	border-radius: 4px;
	overflow: hidden;
	}

.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: relative;
	float: left;
	text-align: center;
	height: 100px;
	background-color: #f0f0f0;
	}

.music-coverart {
	clear: left;
	width: 98px;
	border-left: 0px solid #AAA;
	overflow: hidden;
	}

.music-song-link, .video-song-link {
	width: 88px;
	height: 55px;
	padding-top: 45px;
	text-align: center;
	font-size: .563rem;
	font-weight: normal;
	}

.music-artist, .video-artist {
	width: 220px;
	height: 70px;
	padding-top: 30px;
	font-size: .813rem;
	font-weight: bold;
	color: #000;
	}

.music-album {
	font-size: .813rem;
	font-weight: normal;
	font-style: italic;
	color: black;
	}

.music-instrument, .video-instrument {
	width: 120px;
	height: 56px;
	padding-top: 44px;
	font-size: .625rem;
	font-weight: normal;
	font-style: normal;
	}

.music-audio-controls {
	width: 430px;
	height: 100px;
	padding: 0px 0px 0px 0px;
	margin-bottom: 15px;
	text-align: center;
	font-size: .750rem;
	font-weight: normal;
	border-radius: 0px 0px 0px 0px;
	overflow: hidden;
	}

audio {
	width: 275px;
	height: 50px;
	}

.music-video-controls {
	clear: both;
	margin-left: 210px;
	margin-bottom: 0px;
	width: 524px;
	height: auto;
	padding: 0px 0px 0px 0px;
	text-align: center;
	font-size: .750rem;
	font-weight: normal;
	}

video {
	width: 526px;
	}

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

.video-song-link, .video-artist, .video-instrument {
	width: 262px;
	border-top: 1px solid #aaa;
	}

.video-artist {
	clear: left;
	margin-left: 210px;
	height: 49px;
	padding-top: 11px;
	border-left: 1px solid #aaa;
    border-radius: 4px 0px 0px 0px;
	}

.video-song-link {
	height: 36px;
	padding-top: 24px;
	border-right: 1px solid #aaa;
	border-radius: 0px 4px 0px 0px;	
	}

.video-instrument {
	height: 35px;
	padding-top: 15px;
	margin-bottom: 0px;
	}

.media-player-notice {
	margin: 10px 0px;
	color: #8B4513;
	text-align: center;
	font-family: Tahoma, Aria, sans-serif;
	font-size: .688rem;
	font-weight: normal;
	letter-spacing: .5px;
	line-height: 135%;
	}

.player-not-supported {
	color: #0066CC;
	}

/*-----------------------------------------------
  PHOTOS Page - photos.html
-----------------------------------------------*/
#content-photos {
	box-sizing: border-box;
	width: 980px;
	padding: 0px 5px 40px 5px;
	margin: 5px auto 0px auto;
	background-image: none;
	}

#photo-left-col, #photo-right-col {
	position: relative;
	top: 0px;
	width: 475px;
	margin-top: 10px;
	}

#photo-left-col {
	margin-left: 0px;
	float: left;
	}

#photo-right-col {
	margin-right: 0px;
	float: right;
	}

.photo-with-caption {
	position: relative;
	width: 475px;
    overflow: hidden;
	}

.photo-1, .photo-2, .photo-3, .photo-4, .photo-5, .photo-6, .photo-7, .photo-8, .photo-9, .photo-10, .photo-11, .photo-12, .photo-13, .photo-14 {
	overflow: hidden;
	border-top: solid 0px #af794b;
	border-image: url(images/bkgnd-oak-quartersawn-500x20.jpg) 125 round;
	border-radius: 4px 4px 0px 0px;
	}

.photo-1 {
	background-image: url(photos/photo-dj-under-lights-475x519.jpg);
	height: 519px;
	}

.photo-2 {
	background-image: url(photos/photo-charles-brown-concert-475x569.jpg);
	height: 569px;
	}

.photo-3 {
	background-image: url(photos/photo-bernard-purdie-475x584.jpg);
	height: 584px;
	}

.photo-4 {
	background-image: url(photos/photo-alfredo-de-la-fe-475x356.jpg);
	height: 356px;
	}

.photo-5 {
	background-image: url(photos/photo-threeplay-peekskill-475x314.jpg);
	height: 314px;
	}

.photo-6 {
	background-image: url(photos/photo-eric-louis-galicia-475x356.jpg);
	height: 356px;
	}

.photo-7 {
	background-image: url(photos/photo-peatmoss-475x317.jpg);
	height: 317px;
	}

.photo-8 {
	background-image: url(photos/photo-oro-valley-jfestival-475x312.jpg);
	height: 312px;
	}

.photo-9 {
	background-image: url(photos/photo-dj-vibes-475x356.jpg);
	height: 356px;
	}

.photo-10 {
	background-image: url(photos/photo-jorge-lopez-475x263.jpg);
	height: 263px;
	}

.photo-11 {
	background-image: url(photos/photo-reals-lounge-475x340.jpg);
	height: 340px;
	}

.photo-12 {
	background-image: url(photos/photo-betty-blue-475x582.jpg);
	height: 582px;
	}

.photo-13 {
	background-image: url(photos/photo-arturos-bob-dorough-475x356.jpg);
	height: 356px;
	}

.photo-14 {
	background-image: url(photos/photo-ny-musicians-union-475x900.jpg);
	height: 900px;
	}

.photolinked {
	position: relative;
	width: 475px;
	}

.photolinked :hover {
    background: #000;
    border: solid 6px #F00;
    margin: -6px;
	width: 463px;
	}

.caption {
	padding: 10px 15px 12px 20px;
	margin: 0px 0px 20px 0px;
	vertical-align: top;
	text-align: left;
	font-size: 1.063rem;
	font-weight: normal;
	color: #FFF;
	background-color: #000;
	background-image: url(images/bkgnd-black-grey-diag-stripe-500x200.jpg);
	border-top: solid 0px #AF794B;
	border-bottom: solid 0px #AF794B;
	border-image: url(images/bkgnd-oak-quartersawn-500x20.jpg) 125 round;
	border-radius: 0px 0px 4px 4px;
	}

.caption a:link {
	color: #FFF;
	background-color: inherit;
	font-weight: bold;
	text-decoration: none;
	}

.caption a:visited {
	color: #FFF;
	background-color: inherit;
	font-weight: bold;
	text-decoration: none;
	}

.caption a:hover {
	color: #F00;
	background-color: #000;
	font-weight: bold;
	text-decoration: none;
	}

.caption a:active {
	color: #FFF;
	background-color: inherit;
	font-weight: bold;
	text-decoration: none;
	}

/*-----------------------------------------------
  BIO Page ("About") - bio.html
-----------------------------------------------*/
#content-bio {
	box-sizing: border-box;
	width: 980px;
	padding: 50px 140px 40px 140px;
	margin: 15px auto 30px auto;
	line-height: 1.5rem;
	border-radius: 4px;
	background-color: #f5f5f5;
	}

#bio-single-column {
	width: 700px;
	margin: 0px auto 0px auto;
	}

/* #bio-left-column, #bio-right-column, #bio-single-column {
	position: relative;
	top: 15px;
	text-align: left;
	font-size: 1.125rem;
	line-height: 1.3rem;
	}

#bio-left-column {
	float: left;
	left: 0px;
	width: 469px;
	padding: 0px 20px 0px 0px;
	margin-bottom: 15px;
	border-style:solid;
	border-width: 0px 1px 0px 0px;
	border-color: #A0A0A0;
	}

#bio-right-column {
	float: right;
	left: 0px;
	width: 455px;
	padding: 0px 0px 0px 35px;
	margin-bottom: 25px;
	} */

#bio-photo1, #bio-photo2, #bio-photo3, #bio-photo4, #bio-photo5, #bio-photo6 {
	float: left;
	width: 120px;
	height: 110px;
	margin: 5px 30px 0px 0px;
	}

#bio-photo2, #bio-photo3, #bio-photo4, #bio-photo5, #bio-photo6 {
	border-top: solid #AF794B 5px;
	border-bottom: solid #AF794B 5px;
	border-radius: none;
	border-image: url(images/bkgnd-oak-quartersawn-120x20.jpg)30 round;	
	}

#bio-photo1 {
	height: 120px;
	margin-top: 20px;
	margin-bottom: 0px; 
	background-image: url(photos/photo-you-rule-me-bio-120x120.png);
	}

#bio-photo2 {
	margin-top: 10px;
	background-image: url(photos/photo-dayna-bio-120x110.jpg);
 	}

/*#bio-photo3 {
	margin-top: 3px;
	background-image: url(photos/photo-welcome-vegas-bio-120x110.jpg);
	} */

#bio-photo4 {
	clear: left;
	float: left;
	margin-top: 18px;	
	background-image: url(photos/photo-dj-vibes-bio-120x110.jpg);
	}

#bio-photo5 {
	clear: left;
	float: left;
	margin-top: 5px;
	margin-bottom: 5px;
	background-image: url(photos/photo-dj-bongos-bio-120x110.jpg);
	}

#bio-photo6  {
	width: 165px;
	margin-top: -5px;
	background-image: url(photos/photo-tucson-saguaros-bio-165x110.jpg);
	}

p.bio-close {
	display: block;
	margin-top: 30px;
	margin-left: 30px;
	}

/*-----------------------------------------------
  CONTACT Page - contact.html
-----------------------------------------------*/
#content-contact {
	box-sizing: border-box;
	display: grid;
/* 	grid-template-columns: 250px 1fr 250px;
	grid-template-rows: auto; */	
	grid-template-columns: 337px auto;
	grid-template-rows: 375px;
	grid-template-areas:
		"contact-photo-2	contact-text-plaque";
	grid-column-gap: 0px;
	width: 689px;
    min-height: calc(100vh - 155px - 85px); /* NEW */
	padding: 15px 0px 0px 0px;
	/* margin: 0px auto; */
	margin: 0px auto -51px auto;	
	}

#contact-text-plaque {
	box-sizing: border-box;
	grid-area: contact-text-plaque;
	position: relative; /* !IMPORTANT for position:absolute screws */
	/* height: auto; */
	height: 375px;
	padding: 25px 35px 30px 35px;
	text-align: center;
	background-color: #ead9c8;
	background-image: url(images/bkgnd-maple-birdseye-440x110.jpg);
	border-top: 8px solid #af794b;
	border-bottom: 8px solid #af794b;
	border-image: url(images/bkgnd-oak-quartersawn-500x20.jpg) 125 round;
	border-radius: 0px;
	}

#contact-photo-1, #contact-photo-2 {
	width: 250px;
	height: 278px;
	align-self: center;
	}

#contact-photo-1 {
	grid-area: contact-photo-1;
	background-image: url(photos/photo-dj-under-lights-oil-250x278.jpg);
	display: none;

	}
	
#contact-photo-2 {
	grid-area: contact-photo-2;
	background-image: url(photos/photo-eric-louis-galicia-oil-250x278.jpg);
	width: 337px;
	height: 375px;
	background-size: 337px 375px;
	background-repeat: no-repeat;
	background-position: center;
	border-radius: 6px 0px 0px 6px;
	}

.contact-name {
	font-weight: bold;
	}

.contact-location {
	font-size: .875rem;
	font-weight: normal;
	margin-bottom: 10px;
	}	

.contact-phone-email-head {
	margin: 40px 0px 10px 0px;
	text-align: left;
	font-size: 1.0rem;
	font-weight: bold;
	color: #000;
	}

.clicktocall {
	font-size: .688rem;
	font-weight: normal;
	color: #C82E2E;
	text-decoration: none;
	}

.clicktelnumbers-lessons , .clicktelnumbers-contact{
	text-decoration: none;
	}

.clicktelnumbers-lessons a:link {
	font-weight: bold;
	color: #000;
	text-decoration: none;
	}

.clicktelnumbers-lessons a:hover {
	font-weight: bold;
	color: #f00;
	text-decoration: none;
	}

.clicktelnumbers-contact a:link {
	font-weight: bold;
	color: #000;
	text-decoration: none;
	}	

.clicktelnumbers-contact a:hover {
	font-weight: bold;
	color: #f00;
	text-decoration: none;
	}

.home-mobile-line {
	margin: 15px 0px 10px 20px;
	text-align: left;
	}

.home-mobile-label {
	font-size: .938rem;
	}

.bottomspace {
	margin: 0px 0px 0px 0px;
	}

/*-----------------------------------------------
  HYPERLINKS
-----------------------------------------------*/
a:link {
	color: #0066CC;
	outline: 0;
	}

a:visited {
	background-color: #000;
	color: #0066CC;
	outline: 0;
	}

a:hover {
	background-color: inherit;
	color: #DC143C;/*Crimson*/
	outline: 0;
	text-decoration: none;
	}

a:active {
	background-color: inherit;
	color: #191970;
	outline: 0;
	}

/*-----------------------------------------------*/

.main-menu a:link {
	padding: 2px 0px;
	background-color: inherit;
	color: #FFF;
	font-weight: normal	;
	text-decoration: none;
	}

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

.main-menu a:hover {
	padding: 7px 0px;
	background-color: #000;
	color: #FFF;
	font-weight: normal;
	text-decoration: none;
	}

.main-menu a:active {
	padding: 4px 0px 4px 0px;
	background-color: inherit;
	color: #FFF;
	font-weight: normal;
	text-decoration: none;
	}
/*-----------------------------------------------*/

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

a.index-button-title:hover {
	color: #FFF;
	background-color: #a8241b;
	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: #000;
	text-decoration: none;
	border: none;
	outline: 0;
	}*/

/*-----------------------------------------------*/

a.index-text-plaque:link {
	color: #000;
	text-decoration: none;
	outline: 0;
	}

a.index-text-plaque:visited {
	color: #000;
	text-decoration: none;
	border: none;
	outline: 0;
	}

a.index-text-plaque:hover {
	color: #a8241b;
	text-decoration: none;
	border: none;
	outline: 0;
	}

a.index-text-plaque:active {
	color: #0084D1;
	text-decoration: none;
	border: none;
	outline: 0;
	}

a.index-text-plaque:focus {
	color: #000;
	text-decoration: none;
	border: none;
	outline: 0;
	}

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