/*
	CSS3 for mobile phone webpage

   A pure CSS accordion widget using CSS3,
   border-radius, ":target" pseudo-class
   and transition.

   Only works in recent Webkit-based browsers.
*/
/* ######## GLOBAL ########### */
* {
	box-sizing: border-box;
}
html{height: 100%;}

body{
	height: 100%;
	background-color:black;
	color:#ffb5f8;
	font-family: verdana, helvetica, arial, sans-serif;
	padding: 0; /*0.1em;*/
    margin: 0;
	letter-spacing: 0.05em;
  /*border: 1px solid red;*/
}

p{
	/*border-bottom:1px #00ff42 solid;*/
	margin-top:0;
	margin-left:0;
	padding: 0.5em 0em 0em 0em;
}

hr{
	color:#00ff42;
	background-color:#00ff42;
	height:1px;
}

iframe{height: 100%;}

.blockcenter{
    display: block;
    margin-left: auto;
    margin-right: auto; 
}

.indent2{margin-left: 2vw;}
.indent3{margin-left: 3vw;}
.indent4{margin-left: 4vw;}
.indent5{margin-left: 5vw;}
.expand {letter-spacing: 0.15em;}
.xexpand{letter-spacing: 0.3em;}
.line120{line-height: 1.2em;}
.line150{line-height: 1.5em;}
.top	{vertical-align: top;}
.middle	{vertical-align: middle;}
.bottom	{vertical-align: bottom;}  
.padmedium {padding:0.5em;}
.padwide   {padding:1.0em;}

/* ####################  T E X T  ######################### */
/* text sizes are percentage of that defined in body */
.extrafine  {font-size: 7pt;}
.fine  {font-size: 8pt;}
.medium  {font-size: 9pt;}
.text50 {font-size: 50%;}
.text60 {font-size: 60%;}
.text70 {font-size: 70%;}
.text75 {font-size: 75%;}
.text80 {font-size: 80%;}
.text90 {font-size: 90%;}
.text100 {font-size: 100%;} /*same as default*/
.text110 {font-size: 110%;}
.text120 {font-size: 120%;}
.text125 {font-size: 125%;}
.text140 {font-size: 140%;}
.text150 {font-size: 150%;}
.text160 {font-size: 160%;}
.text180 {font-size: 180%;}
.text200 {font-size: 200%;}
.big	{font-size:150%; font-weight: bold;}

/* these affect text- can be used in p,font,td,etc */
.left {text-align: left;}
.center {text-align: center;}
.right  {text-align: right;}
.justify{text-align: justify;}
.bold   {font-weight: bold;}
.bolder {font-weight: 900;}
.italic	{font-style: italic;}
.serif {font-family: Times New Roman, serif;}

/*
	Chartreuse 	#7FFF00
	lime 		#00ff00 
	MediumSpringGreen 	#00FA9A
	palegreen 	#98FB98
	SpringGreen #00FF7F
	Fuchsia  Magenta 	#FF00FF
	Violet 		#EE82EE
	.green 		#00ff42
	.lilac 		#ffc5f8
*/
.black {color:#000000;}
.black	{color:black;}
.blue  	{color:blue;}
.green {color:#00ee42;}
.green	{color:green;}
.grey	{color:#999999;}
.lilac {color:#ffc5f8;}
.orange {color:#ffA500;}
.red   	{color:red;}
.silver	{color:silver;}
.white	{color:white;}

a:link { text-decoration: none; background: transparent; color: #ffb5f8; border: 0;}
a:visited { text-decoration: none; background: transparent; color: #ffb5f8; border: 0;}
a:hover { text-decoration: none; background: transparent; color: #ffe4ff; border: 0;}
a:active { text-decoration: none; background: transparent; color: #ffe4ff; border: 0; outline: none;}
a:focus {color: #ffe4ff; outline: none;}
/*a.keynav:focus {outline: 1px solid #cccccc;}*//*color: #ffffff*/
a:focus img {border: 1px solid #cccccc;}
/*a:keynavdiv:focus > div{background-color: #505050;}*/
a.orangelink:link { text-decoration: none; background: transparent; color: #ff8c00; border: 0;}
a.orangelink:visited { text-decoration: none; background: transparent; color: #ff8c00; border: 0;}
a.orangelink:hover { text-decoration: none; background: transparent; color: #ffc500; border: 0;}
a.orangelink:active { text-decoration: none; background: transparent; color: #ffc500; border: 0; outline: none;}
a.orangelink:focus {color: #ffc500; outline: none;}

/* ########  N O T E S #########
/* The height and width properties do not include padding, borders, or margins. */
/* Using box-sizing:border-box height and widths include padding and borders, but not margins */
/* header height = 6px padding + 32px height + 6px padding + 6px border = 50px */
/* 1px space for effect */
/* audioplayercontainer height = 60px height + 3px border= 63px */
/* 1px space for effect */
/* nowplaying height = 60px height + 3px border= 63px */

/* ######## Possibly affected by Media Queries ########### */
/* may want to fix heights and tops in px or vw using media queries*/

/* ##############  H O M E  P A G E   L A Y O U T ################### */
/* 20171114 stopped using position:fixed because of behavior in some browsers 
	achieved same effect with html{height:100%}.
	Trying to keep heights in ems, instead of viewpoint heights, becuse viewpoint 
	heights can vary as much as 33% with/without chrome in landscape mode.
	Minimum heights should provably be in pixels */

#header{
	display: table;
	width: 100%;
	height: 3.5em; /* must match categorylist top*/
	background-color:black;	
	border-bottom: 0.3em solid #00dd42; /*1px #ffb5f8 solid;*/
	z-index:90;
	overflow: hidden;
}

.logo{
	display: table-cell;
	width: 50%;
	/* min/max doesn't work on table cells */
	/*min-width: 160px;
	max-width: 320px;*/
	padding: 0.3em  0 0.2em 0.5em;/**/
  	/*border: 1px solid red;*/
}

.logo img{
    width:auto;
	max-width: 60vw;/**/
    height:100%; /* to keep aspect ratio */
}

.iconcontainer{
	display: table-cell;
	vertical-align: middle;
  	/*border: 1px solid yellow;;*/
}

#icons{
	display: inline-block;
	float: right;
	margin-left: auto;
	margin-right: 0.5em;
  	/*border: 1px solid green;;*/
}

#icons img{
    width:auto;
    height:100%; /*to keep aspect ratio  */
	min-height: 1.0em;
	max-height: 1.5em;/**/
}

.categorylist{
	/*position:absolute;
	top: 3.5em;  height of header */
  	width: 100%;
	/* height plus header height needs to be slightly larger than 
		100% so browser chrome will hide */ 
	height: calc(100% - 3.0em);/**/
	/*margin-top: 48px;*/
  	overflow-y: auto;
}

.category{
	font-size:2em;
	text-align:center;
	padding: 0.5em;
	border-bottom:1px #00ff42 solid;

}	
.category-disabled{
	font-size:2em;
	color:#808080;
	text-align:center;
	padding: 0.5em;
	border-bottom:1px #00ff42 solid;
}

.category img{
    display: block;
    margin-left: auto;
    margin-right: auto;
	width: 40vmin;
	min-width: 200px;
	max-width: 300px;
	height: auto;
	border: 1px solid black;	
}

/* ##############  S O N G S  &  V I D E O S  P A G E   L A Y O U T ################### */
/* 1em = 12pt = 16px = 100% */
/* flex items only seem to work on id not classnames */
#pagename {
	display: table-cell;
	text-align: center;
	vertical-align: middle;
	/*top: 50%;
	transform: translateY(-50%);*/
	/*right: 0;*/
	/*line-height: 3.5em;  must match header height */
	/*vertical-align: middle;*/
	/*margin-left: auto;
	margin-right: 1em;*/
	padding-right: 10vw;
	font-size: 1.2em;
	/*border: 1px solid yellow;*/
}
/* holds audioplayer - see below */
#audioplayercont{
	/*position: fixed;*/
	-webkit-backface-visibility: hidden;
	/*top: 49px;  header height + margin + border + padding + 1 */ 
	width: 100%;
	/*min-width: 320px;*/
	height: 3.6em; /*60px;*/	
  	/*min-height: 48px;*/
	margin: 0 auto;
	padding: 0;
	background-color: #eeb5e8;	
	/*border-bottom:1px #ffb5f8 solid;*/
	border-top: 0.15em solid black;
	border-bottom: 0.3em solid #00dd42;
	z-index:8000;
}

#nowplaying{
  	/*clear: both;*/
  	/*position: fixed;*/
	-webkit-backface-visibility: hidden;
  	width: 100%;
  	/*top: 113px;*/
  	height: 2em;
	font-size: 1em;
	text-align: center;
	vertical-align: middle;
	color: black;
	background-color: #eeb5e8;	
	/*margin: 0 auto;*/
	padding: 0.1em 7vw 0 0;
	border-top: 0.15em solid black;
	border-bottom: 0.3em solid #00dd42;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
#nowplaying:focus{background-color: red;}

#contentlist{
	position: relative;
	/*position: absoltute;
	top: 8.9em; 30vmin;*/
	/*margin-top: 140px;*/
	width: 100%;
  	overflow-y: auto;
	/*border: 1px solid yellow;;*/
}
/* height plus header height needs to be slightly larger than 
	100% so browser chrome will hide */
.songlist{
	height: calc(100% - 8.0em);/**/
}
.videolist{
	height: calc(100% - 3.0em);/**/
}
/* transparent div so page is scrollable to hide chrome on mobile browser */
/* hack for when list is too short to trigger scrolling */
.videohidechrome{
	position: absolute;
	top: 1px;
	left: 0;
	width: 1px;
	height: calc(100% + 1px);
	background-color: transparent;
	/*border: 2px solid red;*/
}
.group{
	color: #ffd8f8;
	letter-spacing: 2px;
	padding: 0.2em 0 0.2em 1em;
	border-bottom:1px #00ff42 solid;
}
.songitem{
	text-align:left;
	padding: 0.2em 0;
	border-bottom:1px #00ff42 solid;
}
.songitem:hover{
	background-color: #606060;
}
.songitem a{
	display: block;
}
.songitem a:focus{
	background-color: #606060;
}
.songname{
	display: inline-block;
	line-height: 150%;
	font-size: 1.10em;
	font-weight: 500;
	color: #00ee42;
	padding: 0.5em; 
}
.songinfo{
	display: inline-block;
	line-height: 150%;
	font-size: .65em;
	font-weight: 400;
	color: #ffe0f8;
	margin-left: 5vw;
	padding: 0;
}
.songinfo b{
	font-size: 110%;
}

/* ##############  V I D E O   P A G E   L A Y O U T ################### */
/* video duplicates songs - can combine and rename 'mediaitem' */
.videoitem{
	text-align:left;
	padding: 0.2em 0;/*0.5em 0.5em 0.5em 1em;*/
	border-bottom:1px #00ff42 solid;
}
.videoitem:hover{
	background-color: #606060;
}
.videoitem a{
	display: block;
}
.videoitem a:focus{
	background-color: #606060;
}
.videoname{
	display: inline-block;/**/
	line-height: 150%;
	font-size: 1.1em;
	font-weight: 500;
	color: #ffd8f8;/* #ffd8f8 #00ee42 */
	margin: 0 0 0 0.5em;
	padding: 0.5em 0.5em 0.5em 0.5em; 
}
.videoinfo{
	display: inline-block;
	line-height: 150%;
	font-size: .75em;
	font-weight: 400;
	color: #00ee42;
	margin-left: 5vw;
	padding: 0;
}

#test{
 	border: 1px solid red;
  	background: #c0c0c0;
  	color: black;
	width: 300px;
	height: 48px;
	position:absolute;
	left: 20vw;
	top: 180px;
	z-index: 10000;
}
/* ########### POP UP IMAGE AND VIDEO ###########################*/

.overlay{
    position:fixed;
    visibility:hidden;
    top:0;
	left:0;
	bottom:0;
	right:0;
    z-index:10;
    background:rgba(0, 0, 0, 0.5);
    transition:opacity 300ms;
    opacity:1;
    padding:0;
}

.landscape {
	margin: 5vmin 0;/**/
	top: 0;
	left: 50%;
  	transform: translateX(-50%);
}

.portrait {
	margin: 0 5vmin;/**/
	left: 0;
	top: 50%;
  	transform: translateY(-50%);
}

/* I want this to be 100% of client space. */
/* if document scrolls how is this affected? */
/* this needs to be centered in window. */
.containingBlock{
    visibility:hidden;
	position: absolute;
	z-index: 200;
	max-width: 96%;
	max-height: 96%;
	padding: 2vmin;
    background:#ffffff;
    border-radius:0.16em;
	/*top: 0;
	left: 0;
    padding:0 2vmin 2vmin 2vmin;*/
	/*border: 2px dashed yellow;*/
}
.popupheader{
	position:relative;
	top: 0;
	left: 0;
	height: 2em;
	margin: 0px;
	padding: 0px;
	/*border: 1px dashed red;*/
	/*border-bottom: 1px solid black;*/
}

.popuptitle{
	position:relative;
	margin-left: 1%;
	margin-right: 8%;
	font-size: 0.9em;
	color: #884485;
	text-align: center;
  	top: 50%;
  	transform: translateY(-50%);
}

.closebutton{
  	position: absolute;
  	top: -0.3em;
  	right: -0.3em;/**/
	width: 1.8em;
	height: 1.8em;
    margin: 0px;
	padding: 0px;
    /*border: 2px solid #ffffff;
	border-radius: 0.7em;*/
    background-size: 100%;/**/
    background-repeat: no-repeat;
    background-position: center;
	background-color: transparent;
	background-image: url('../images/close_bw64.png'); /* relative to this css file*/
    outline:none;
}
.closeimg{background-image: url('../images/close2.png');}
.closebutton:hover{cursor: pointer;}
/* alternate close button */
.X{
	position: relative;
	margin: 0 auto;
	color: #008800;
	font-size: 2.5em;
    border: 1px dashed green;/**/
}

#popupVideo {
  	position: absolute;
  	visibility: hidden;
	width: 100%;/**/
	height: 100%;
  	top: 0;left:0;bottom: 0;right: 0;/**/
  	z-index:10000;
	/*top: 50%;
	left: 50%;
  	transform: translateX(-50%);
  	transform: translateY(-50%);*/
    background:rgba(0, 0, 0, 0.5);
    transition:opacity 300ms;
    opacity:1;
    padding:0;
}
/* padding doesn't seem to work for videoplayer, so use margins there */
#videowrapper { 
    position:absolute; /* maybe could be absolute - maybe no difference */
    height:100%;
    width:100%; /**//* of container */
	padding: 3vmin;
	background-color: white;
    border-radius: 0.5em; /*0.16em;*/
}
#videoplayer {
	/*position: relative;*/
	width: 100%;
	height: 100%;
}

.imagewrapper { 
  	position: relative;
	top: 0;
	left: 0;
  	/*border: 1px solid red;*/
}

/* image display in imagewrapper */
#imagedisplay{
	max-width: 98vw;
	max-height: 75vh;/**/ 
    margin-left: auto;
    margin-right: auto;
  	/*border: 2px dashed green;*/
}

/* ########### AUDIO PLAYER ###########################*/
/* updated audioplayer 20171104 using input type range for sliders */

#audioplayer{
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
	width: 40vw; /*450px;*/
    min-width: 320px;
	/*height: 14vmin;*/
	margin: 0 auto;
	/*border: 2px solid #f0a5e8;*/
	/* position audioplayer so that children can be referenced to its position*/
	/*position: relative;*/
}

/* buttons seems to control height of player*/
#playButton{
    -webkit-align-self: center;
    align-self: center;
    height:60px; 
    width: 60px;
    margin: 0;
    border: none;
    background-size: 50% 50%;
    background-repeat: no-repeat;
    background-position: center;
	/*border: 1px solid red;*/
    /*float:left;*/
    /*display: inline-block;*/
  	outline:none; 
}

#playButton:focus{
	outline:none;
}
#playButton:hover{
	outline:none;
	cursor: pointer;
}

#muteButton{
    -webkit-align-self: center;
    align-self: center;
    height:60px; 
    width: 60px;
    margin: 0;
    border: none;
    background-size: 50% 50%;
    background-repeat: no-repeat;
    background-position: center;
	/*border: 1px solid red;*/
    /*float:left;*/
    /*display: inline-block;*/
    outline:none;

}

#muteButton:focus{
	outline:none;
}
#muteButton:hover{
	outline:none;
  	cursor: pointer;
}

/* path relative to css file */
.play{background: url('../images/play_128.png') ;}
.pause{background: url('../images/pause_128.png') ;}
.notmuted{background: url('../images/mute_b128.png') ;}
.muted{background: url('../images/mute_g128.png') ;}

/* ######## RANGE INPUT ######## */
/* cannot comma separate pseudo selectors */

#timelineSlider {
	width: 20vw;
	min-width: 64px;
	/*height: 16px;*/
}
#volumeSlider {
	width: 5vw;
	min-width: 64px;
	/*height: 16px;*/
}

input[type=range]{
    -webkit-appearance: none;/*-*/
    /*-moz-appearance: none;*/
	width: 100%;
	height: 10px;
 	border: 1px solid #be85b8;
  	border-radius: 6px;
  	background: rgba(0,0,0,.12);
  	/*outline-color: transparent;*/	
	margin: 8px 0;
}
input[type=range]:focus {
  outline: none;
  border: 1px solid #ffccf5;/**/
  background: rgba(0.5,0.2,0.5,.33);
  /*outline-color: transparent;*/
}
/* -MOZ */ 
/**/
input[type=range]::-moz-range-track {
  height: 10px;
  border: 1px solid #be85b8;
  border-radius: 6px;
  background: rgba(0,0,0,.12);
  cursor: pointer;
}
input[type=range]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 9px;
  background: black;
  cursor: pointer;
}

/* -WEBKIT */ /*width: 100%;*/
/**/
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;  
  height: 10px;
  border: 1px solid #be85b8;
  border-radius: 6px;
  background: rgba(0,0,0,.22);
  cursor: pointer;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 9px;
  background: black;
  cursor: pointer;
  /* IMPORTANT */
  margin-top: -5px; /* half of track height? */
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: rgba(0,0,0,.22);
}

/* -MS  WTF?*/  /*width: 100%;*/
/**/
input[type=range]::-ms-track {
  width: 100%;
  height: 10px;
  border-color: transparent;
  color: transparent;
  background: transparent;
  cursor: pointer;
}
input[type=range]::-ms-fill-lower {
  background: rgba(0,0,0,.22);
  border: 1px solid #be85b8;
  border-radius: 6px;
}
input[type=range]::-ms-fill-upper {
  background: rgba(0,0,0,.22);
  border: 1px solid #be85b8;
  border-radius: 6px;
}
input[type=range]::-ms-thumb {
  height: 18px;
  width: 18px;
  margin-top: 1px;
  border: 1px solid #000000;
  border-radius: 9px;
  background: black;
  cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
  background: #3071A9;
}
input[type=range]:focus::-ms-fill-upper {
  background: #3071A9;
}

/* ------- END RANGE INPUT ------ */

/* These were for original dhAudioPlayer - can probably delete */
#timeline{
	width: 20vw;
    min-width: 100px;
	max-width: 50vw;
	height: 20px;
	/*margin-top: 20px;*/
    margin: auto 0;
	/*float: left;*/
    display: inline-block;
	border-radius: 10px; /* half of track height */
	background: rgba(0,0,0,.22);
  
}
#playhead{
	width: 20px;
	height: 20px;
	border-radius: 50%;
	margin-top: 0px;
	background: rgba(0, 0, 0,1);

}
#volumeslider{
	width: 64px;
	min-width: 36px;
	height: 60px;
	margin: 0;
	/*float: left;*/
    display: inline-block;
}
#volumetrack{
    position: relative;
	height: 16px;
    top: 50%;
    transform: translateY(-50%);
	/*width: 64px;*/
	/*min-width: 36px;*/
	margin: auto 0 auto 0;
	/*float: left;*/
	border-radius: 8px; /* half of track height */
	background: rgba(0,0,0,.22);
    padding: 0;  
}
#zvolumetrack{
	/*width: 64px;*/
	/*min-width: 36px;*/
	height: 16px;
	margin: auto 0 auto 0;
	/*float: left;*/
	border-radius: 8px;
	background: rgba(0,0,0,.3);
    /*padding: auto;*/  
}
#volumethumb{
    position: absolute;
	width: 20px;
	height: 20px;
    top: 50%;
    transform: translateY(-50%);
	border-radius: 50%;
	margin: 0;
	background: rgba(0, 0, 0,1);
}
/*
#volumetrack{
	width: 64px;
	min-width: 36px;
	height: 16px;
	margin: 22px 0 auto 0;
	float: left;
	border-radius: 8px;
	background: rgba(0,0,0,.3);
}
#zvolumethumb{
	width: 20px;
	height: 20px;
	border-radius: 50%;
	margin-top: -2px;
	background: rgba(0, 0, 0,1);

}  
*/

/*######### end audioplayer #############################*/	

/* ######## Media Queries ########### */
/* Default styles first then media queries */
/* start small*/
@media only screen and (min-width: 800px) and (max-width: 1024px) {
  /* Add your custom styles here for Desktop */
}

@media only screen and (max-width: 1023px) {
  /* Add your custom styles here for Tablet */
}

@media only screen and (max-width: 640px) {
  /* Add your custom styles here for Mobile */
}

@media only screen and (max-width: 480px) {
  /* Add your custom styles here for smaller Mobile */
}