html, body{height:100%}

body {margin:0; height:100%; font-family:Trebuchet MS,sans-serif; color:white; background-color:black;}

a:link {color: #FFE070; font-weight:bold;}
a:visited {color: #FFE070; font-weight:bold;}
a:hover {color: white; font-weight: bold; background-color:#405878}

hr {color:#808080;}

p  {font-size:17px; line-height:20px; margin-top:8px; margin-bottom:8px;}
ul {font-size:17px; line-height:20px; margin-top:8px; margin-bottom:8px;}
li {font-size:17px; line-height:20px; margin-top:8px; margin-bottom:8px;}
h1 {font-size:36px; font-weight:bold; margin:0; color:#FFE070;}
h2 {font-size:28px; font-weight:bold; color:#FFE070;}
h3 {font-size:20px; font-weight:bold; margin-top:16px; margin-bottom:8px;}
em {font-style:italic;}

ol.start {counter-reset: mycounter;}
ol.start li, ol.continue li {list-style: none;}
ol.start li:before, ol.continue li:before { 
    content: counter(mycounter) ". "; 
    counter-increment: mycounter;
}

#menu-top{
	position:absolute; left:0; right:0; text-align:center;
	height:40px; border-bottom:solid 3px #FFE070;
	background-color: #01102f;
	display:none;
}
#menu-left{
	position:absolute; left:0; width:200px; top:0; bottom:0; overflow:hidden;
	background-color:#4c5870; background-attachment:fixed;
	background-image: linear-gradient(to bottom, #01102f, #2f405c);
}

#wrapper{
	position:absolute; left:200px; right:0; top:0; bottom:0; overflow:auto;
	padding:0 16px 24px 16px;
	color:white; background-color:#222;
}
#header, #content, #footer{width:870px; margin:auto;}

#leftmenu {height:100%; padding-left:16px;}
#leftmenu a{text-decoration:none;}
#leftmenu p{font-weight:bold; color:white;}
#leftmenu p.menu1{margin-left:0;}
#leftmenu p.menu2{margin-left:16px;}
#leftmenu div{margin:0;}
#leftmenu div.menuactive{padding-left:8px; border:solid 3px #FFE070; border-right:0; background-color:#222; border-radius:8px 0 0 8px;}
#leftmenu div.menucat{
	padding-left:11px; border-right:solid 3px #FFE070;
	padding-top:1px; padding-bottom:1px;
	margin-top:-1px; margin-bottom:-1px;
}
#leftmenu div.menupadtop{height:38px; border-right:solid 3px #FFE070;}
#leftmenu div.menupadbot{height:100%; border-right:solid 3px #FFE070;}

#footer{text-align:center;}
#footer hr{margin-top:24px;}
/*#footer a{white-space:nowrap; text-decoration:none;}*/
#menu-bottom div.botmenu-spacer, #menu-top div.botmenu-spacer {display:inline;}

#menu-phone{display:none;}
#menu-bottom, #menu-top{text-align:center; font-size:17px;}
#menu-bottom a, #menu-top a{
	padding:8px; display:inline-flex; line-height:16px;
	white-space:nowrap; text-decoration:none;
}

#content h3{margin-left:8px;}
#content p {margin-left:16px;}
#content ol{margin-left:16px;}
#content li{list-style-position: inside;}
#content li{display: flex;}
#content li:before {flex: 0 0 32px;}

div.cat{margin-top:24px; margin-bottom:8px; width:100%;}
div.cat h2{float:left;}
div.cat h2.mus{margin-bottom:16px;}
div.cat p.home-cat, div.cat p.art-cat{float:right;}
#song-list, #video-list, #art-list{clear:both;}

.vid-box{width:100%; margin-top:12px; margin-bottom:24px; padding:0 8px; background-color:#555; border-radius:12px;}
.vid-box p, .vid-box h3{margin:0; margin-left:8px!important;}
.vid-title{padding:8px;}
.vid-month{float:right; color:#ccc;}
.vid-descr{padding:8px;}

.vid-video{position:relative; padding-bottom:56.25%; padding-top:30px; height:0; overflow:hidden;}
.vid-video iframe, .vid-video object, .vid-video embed{
	position:absolute; top:0; left:0; width:100%; height:100%;	
}

a.b2t{float:right; margin-top:8px; text-decoration:none;}
div.home-link{text-align:center;}
div.home-link a, p.read-more a, p.read-less a{height:20px; padding:4px 12px 6px 12px; border-radius:16px; text-decoration:none;}
div.home-link a{background-color:#0f5499;}
p.read-more a{background-color:#006622;}
p.read-less a{background-color:#ff0000;}

div.song-free-box{padding:1px 4px 5px 14px; background-color:#555;}
.vid-box, .jp-audio .jp-interface, div.song-free-box, .shad-img{
	box-shadow: -2px -2px 4px #000 inset,  2px 2px 4px #aaa inset; border-radius:12px;
}
.song-month{color:#ccc;}
.song-duration{font-weight:normal; font-size:17px;}
.song-spacer{height:8px; width:100px;}
.song-descrip{
	max-height:72px; margin-bottom:10px;
	position:relative; overflow:hidden;
}
.song-descrip p.read-more{
	height:64px; margin:0 0 -4px 0; padding:0;
	position:absolute; bottom:0; left:0; width:100%; text-align:center; 
	/*background-image: linear-gradient(to bottom, transparent, #222);*/
	background-image: linear-gradient(to bottom, rgba(32,32,32,0), rgba(32,32,32,.8), rgba(32,32,32,1)); /*match #wrapper background-color #222*/
}
.song-descrip p.read-more a{position:relative; top:36px; margin-left:-32px;}
.song-descrip p.read-less {margin-top:16px; text-align:center;}
.song-descrip p.read-less a{margin-left:-16px;}
.song-descrip-green{background-image: linear-gradient(to bottom, rgba(0,68,17,1), rgba(32,32,32,0));}
div.song-divider{
	width:100%; height:3px;
	background-image: linear-gradient(to left, rgba(32,32,32,0), rgba(112,112,112,1), rgba(32,32,32,0));
}
div.song-divider-green{
	width:100%; height:3px;
	background-image: linear-gradient(to left, rgba(32,32,32,0), rgba(0,160,68,1), rgba(32,32,32,0));
}
div.song-divider-red{
	width:100%; height:3px;
	background-image: linear-gradient(to left, rgba(32,32,32,0), rgba(255,60,0,1), rgba(32,32,32,0));
}
p.cat-desc{clear:both; position:relative; top:-8px; left:-16px; color:#ccc;} 

.pdf-right{
	float:right;
	background-image:url('img/icon20x27-PDF.png'); background-repeat:no-repeat; background-position:left;
	height:27px; padding:8px 4px 0 26px; margin:-6px 0 -2px 12px;
	font-size:17px;
}
.perf-right{float:right; margin:0 12px; color:#ccc;}

.headphones{
	background-image:url('img/icon-headphones-27ccc.png'); background-repeat:no-repeat; background-position:left;
	height:27px; padding:8px 4px 0 33px; margin:-2px 0;
	font-size:17px; color:#ccc;
}
p.headphones{float:right;}
#first-headphones{margin-top:-2px;}
img.headphones{margin-left:16px;}
div.headphones{margin-top:8px;}


.art-box{width:100%; text-align:center;}
.art-box img{max-width:100%; border:solid white 1px;}
.art-box h3{margin:6px 12px 32px 12px;}

#contact, #bio{margin-top:28px;}
.bio-table{margin:16px 0;}
.bio-row {display:table-row; vertical-align:top;}
div.bio-image {
	display:table-cell; width:330px;
	background:url(img/bio-bkg1.png) repeat-x;
	text-align:right; padding:0 12px 28px 12px;	
}
.bio-image img{border:solid 3px #666}
div.bio-text {
	display:table-cell; width:100%;
	background:url(img/bio-bkg2.png) repeat-x;
	vertical-align:top; padding:0 12px 28px 4px;
}
.bio-text h3, .bio-text p{margin:0;}
.bio-year, .bio-location{color:#aaa; vertical-align:middle;}
.bio-location{float:right;}
div.bio-title h3{margin:12px 0; color:#FFE070;}
div.bio-desc p{margin-left:8px!important; margin-bottom:8px;}

span.nowrap{white-space:nowrap}

/*RESPONSIVE BREAKPOINTS*/
@media only screen and (max-width: 1140px) {
	#header, #content, #footer{width:720px; margin:auto;}
	.perf-right{display:none;}
	#first-headphones{margin-top:20px;}
	#first-headphones + h2{clear:left;}
	div.cat p.home-cat{float:left; margin-left:0!important;}
	p.headphones{float:left; margin-left:0!important;}
}
@media only screen and (max-width: 980px) {
	#header, #content, #footer{width:644px; margin:auto;}
	p, ul, li, #menu-bottom a, #menu-top a, .song-duration, .pdf-right, .headphones{font-size:16px;}
	h3{font-size:19px;}
	h2{font-size:26px;}
	h1{font-size:33px;}
	div.home-link a, p.read-more a, p.read-less a{height:18px; border-radius:12px;}
}
@media only screen and (max-width: 900px) {
	#menu-left{display:none;}
	#menu-top{display:block;}
	#wrapper{top:43px; left:0;}
}
@media only screen and (max-width: 700px) {
	#header, #content, #footer{width:90%; margin:auto;}
	#header div.shad-img{display:none}
	#first-headphones, p.headphones{margin-bottom:20px;}
	.song-duration{display:none;}
	.song-month{font-size:16px; white-space:nowrap;}
	div.bio-row, div.bio-image, div.bio-text {width:100%; text-align:left; display:block;}
	div.bio-image{padding-bottom:6px;}
	div.bio-text{padding-bottom:32px;}
	
}
@media only screen and (max-width: 640px) {
	div.cat p.art-cat{float:left; margin-left:0!important;}
}
@media only screen and (max-width: 600px) {
	#menu-top{height:70px;}
	#wrapper{top:73px; left:0;}
	.pdf-right{display:none}
}
@media only screen and (max-width: 500px) {
	p, ul, li, #menu-bottom a, #menu-top a, .song-duration, .pdf-right, .headphones{font-size:15px;}
	h3{font-size:18px;}
	h2{font-size:24px;}
	h1{font-size:32px;}
	div.home-link a, p.read-more a, p.read-less a{height:18px; border-radius:12px;}
	.jp-volume-controls{display:none;}
	.jp-audio{width:300px;}
	.jp-audio .jp-type-single .jp-progress{width:170px;}
	.jp-duration{margin-right:20px;}
	#viz-list .b2t{display:none;}
}
@media only screen and (max-width: 400px) {
	#first-headphones, p.headphones{display:none;}
}
@media only screen and (max-width: 370px) {
	.jp-audio{width:280px;}
	.jp-audio .jp-type-single .jp-progress{width:150px;}
}
@media only screen and (max-width: 340px) {
	.jp-audio{width:260px;}
	.jp-audio .jp-type-single .jp-progress{width:130px;}
	#menu-top{height:96px;}
	#wrapper{top:99px; left:0;}
	#viz-list .song-month{display:none;}
	#viz-list p{clear:left;}
}
@media only screen and (max-width: 320px) {
	.jp-audio{width:230px;}
	.jp-audio .jp-type-single .jp-progress{width:100px;}
}
@media only screen and (max-width: 290px) {
	.jp-audio{width:200px;}
	.jp-audio .jp-type-single .jp-progress{width:70px;}
}
@media only screen and (max-width: 260px) {
	.jp-audio{width:170px;}
	.jp-audio .jp-type-single .jp-progress{width:40px;}
}