/* halloween.css */

/* ######## 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 */
  .dhSectionHeading{
    font-size: 1.25em;
  }
}

* {
	box-sizing: border-box;
}

/* ########  G L O B A L  ######### */
html{height: 100%;}

body{
	background-color: #ffaa66;
	color:black;
	font-family: verdana, helvetica, arial, sans-serif;
	padding: 0em 0.5em; /*0.1em;*/
    margin: 0;
	letter-spacing: 0.1em;
  	/*border: 1px solid red;*/
}
/*
p{
	margin-top: 0em;
	margin-left: 0em;
	margin-bottom: 0em;
	padding: 0em 0em 0.5em 0.2em;
}
*/
hr{
	color: #404000;
	background-color: #404000;
	height:2px;
}

.block{
	display: inline-block;
}

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

/* ########  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 ###########################*/


#header{
  height: 100%;
  /*width: 400px;*/
  width: clamp(240px, 50vw, 512px);
  margin-left: auto;
  margin-right: auto;

}

.headerimg{
  width: 512px;
  max-width: 100%; /* add this line */
  /*
  min-width: 200px;
  max-width: 480px;
  */	
}
/* zztop */
#exploreForest{
    margin: 0.5em;
    margin-bottom: 2em;
    border: 5px solid #806000;
    border-radius: 2em;
    background-color:#ffe0c0; 
    padding: 0.5em;
    text-align: left;
}

#exploreForest img{
    margin: 0.5em 1em;  
    display: block;
    border: 0;	
    float: left;
    margin-right: 10px;
}

#exploreForest p{
  margin-left: 0.5em;
}
    
/* zzsection */
.dhSectionHeading{
    width: 100%;
    color: #040000;    
    font-size: 1.5em;
    font-weight: 700;
    letter-spacing: 0.1em;
    margin: 0.75em 0.5em 0.75em 0.5em;
}

.dhSectionItem{
    display: flex;
    width: 100%;
    margin: 0 0 0.5em 0.5em;
    justify-content: flex-start;
    color: #040000; 
}

/*.dhSectionImageContainer{*/
.dhSectionItem img{
  width: clamp(72px, 24vw, 240px);
  height: 100%;

}

.dhSectionImageContainer img{
  display: block;
  width: 512px;
  max-width: 100%; /* add this line */
}

.dhSectionTitle{
    margin-left:1em;
    font-size: 1.1em;
}

.dhSectionDesc{
    margin: 1em 0 0 1em;   
}

img.rb{
    margin-left: 1em;
}

/* ------------------------------------- */
/* ####   POP UP VIDEO AND IMAGE  #### */
/* ------------------------------------- */
/* zzpopup */
#loadingContainer {
  position: fixed;
  top: 12vh;
  width: 96vw;
  /*height: 60px;*/
  /*border: 8px solid red;*/
  z-index: 21000;
}

.flexBox {
  display: flex;
  /*justify-content: space-between;*/
  /*justify-content: center;*/
  /*border: 8px solid blue;*/
}

#loadingScreen{
  /* min width needs to be narrower than screen */
  width: clamp(240px, 50vw, 512px);
  min-height: 10vh;
  border: 8px double #a06000;
  border-radius: 1.5em;
  background-color:#ffe0c0; 
  padding: 2em 0 2em 0;
  text-align: center;
  font-size: 1.5em;
  font-weight: 800;
  letter-spacing: 0.05em;
  overflow: hidden;
  margin: auto;
  /*margin-left: auto;*/
  /*margin-right: auto;*/
}

.popupContainingBlock{
	position: fixed;
	top: 0;
	left: 0;
    width:100%;
	height: 100vh;
    background-color: rgba(0, 0, 0, 0.7);
    transition:opacity 500ms;
    opacity:1;
    /*display: none;*/
    visibility: hidden;
	z-index: 2000;/**/
}

/* Width set in js */
#popupVideoPanel,
#popupImagePanel{
   position:relative;
   top: 5vh;
   /*max-width: 90vw;*/
   /*max-height: 90vw;*/
   background-color: #ffaa66;
   margin-left: auto;
   margin-right: auto;
}

.popupHeader{
   display: grid; 
   height: 3em;
   grid-template-columns: auto max-content;
   gap: 0.5em;
   padding: 0;
   align-items: center;
}

.popupTitle{
	font-size: 1.5em;
	text-align: center;
}

.closeButton{
  	position: absolute;
  	top: 0.25em;
  	right: 0.1em;
	width: 2em;
	height: 2em;
	padding: 0px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
	background-color: transparent;
	background-image: url('images/close button_64.png'); /* relative to this css file*/
    outline:none;
}

.closeButton:hover{cursor: pointer;}

/* -------------------------------- */
/* image display in imageContainer */
/* -------------------------------- */
/* zzimg */
/* Using viewport ratios messes with resizing panels? */
/* But em is too big on small screen. */
#videoWrapper,
#imgWrapper { 
  padding: 0 2vmin 2vmin 2vmin;
  /*padding: 0 1em 1em 1em;*/
}
/*
#videoContainer,
#imgContainer{
  z-index: 2100;
}
*/
/* This is the img */
#imgDisplay{
  /*width: 512px;*/
  /*max-width: 100%;*/ /* add this line */
  /*height: auto;*/
  /*margin: 0 2vw 2vw;*/
}

#zheader{
  height: 100%;
  /*width: 400px;*/
  width: clamp(240px, 50vmin, 512px);
  margin-left: auto;
  margin-right: auto;

}
/* This is the img */
.zheaderimg{
  width: 512px;
  max-width: 100%; /* add this line */
  /*
  min-width: 200px;
  max-width: 480px;
  */	
}

.zvideoWrapper{
    position:relative;
    padding-bottom:75%; /* I think this is for aspect ratio */
    padding-top:0px;
    height:0;
}

/* video display in mediawrapper */
#zvideoPlayer{ /*applied to video tag*/
	max-width: 100%;
	height: auto;  
	/*position: relative;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin: 0px 8px 8px 0px;*/
	/*max-width: 92%;*/
	/*max-height: 85vh;*/ 

    margin-left: auto;
    margin-right: auto;
}
 
/* ############################ */   
/*
.item img{
	display: block;
	border: 0;	
	float: left;
	margin-right: 10px;
}
*/
/*
.item img.rb{
	display: block;
	border :0;
	margin-top: 0;
	margin-bottom: 0;	
}
.item div{
	display: table-cell;
	margin-top: 0;
	padding-top: 0;
}
.item p{
	display: block;
	margin-top: 0;
	margin-bottom: 0;
	padding-top: 0;	
}
*/
.logo{
  	-webkit-flex-shrink: 0; /* Safari */
  	flex-shrink: 0;
	min-width: 160px;
	max-width:50%;
	margin:0;
	padding: 0;
  	/*border: 1px solid red;*/
}

.logo img{
    width:auto;
    max-width:100%;
    height:auto; /* to keep aspect ratio */
	/*margin: auto;*/
	/*top: 50%;
	transform: translateY(-50%);*/
}

#zheader img.icon{
	max-height:7vw;
}

#icons{
  	-webkit-flex-shrink: 1; /* Safari */
  	flex-shrink: 1;
    -webkit-align-self: center; /* Safari 7.0+ */
    align-self: center;
	/*margin: auto;*/
	margin-left: auto;
	margin-right: 6vw;
}

.categorylist{
  	width: 100%;
	margin-top: 48px;
	height: auto;
}
.category{
	font-size:2em;
	text-align:center;
	padding: 0.5em;
	border-bottom:1px #00ff42 solid;
    margin: 0 auto;
}	
.category-disabled{
	font-size:2em;
	color:#808080;
	text-align:center;
	padding: 0.5em;
	border-bottom:1px #00ff42 solid;
}

/* ##############  S O N G S   P A G E   L A Y O U T ################### */

/* flex items only seem to work on id not classnames */
#pagename {
  	-webkit-flex-shrink: 1; /* Safari */
  	flex-shrink: 1;
    -webkit-align-self: center; /* Safari 7.0+ */
    align-self: center;
	/*margin: auto;*/
	margin-left: 10vw;
	margin-right: auto;
	font-size: 1.25em;
}

#audioplayercont{
	position: fixed;
	-webkit-backface-visibility: hidden;
	top: 49px; /* header height + margin + border + padding + 1 */ 
	width: 100%;
	/*min-width: 320px;*/
	height: 60px; /*60px;*/	
  	/*min-height: 48px;*/
	margin: 0 auto;
	padding: 0;
	background-color: #eeb5e8;	
	/*border-bottom:1px #ffb5f8 solid;*/
	border-bottom: 3px solid #00dd42;
	z-index:8000;
}

#nowplaying{
  	/*clear: both;*/
  	position: fixed;/**/
	-webkit-backface-visibility: hidden;
  	width: 100%;
  	top: 113px;
  	height: 24px;
	font-size: .85em;
	text-align: center;
	color: black;
	background-color: #eeb5e8;	
	/*border-bottom:1px #ffb5f8 solid;*/
	margin: 0 auto;
	padding: 0;
	border-bottom: 4px solid #00dd42;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

#contentlist{
	margin-top: 140px;
	height: 100%;
  	overflow: auto;
  	/*overflow: scroll;*/
}
.group{
	color: #ffd8f8;
	letter-spacing: 2px;
	padding: 0.2em 0 0.2em 1em;
	border-bottom:1px #00ff42 solid;
}
.songitem{
	text-align:left;
	padding: 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.05em;
	font-weight: 600;
	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%;
}
.videoitem{
	text-align:left;
	padding: 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.02em;
	font-weight: 600;
	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;
}

/* ########### AUDIO PLAYER ###########################*/
#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: 60px;
	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{
    height:60px; 
    width: 60px;
    margin: auto 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;}

#mutebutton{
    height:60px; 
    width: 60px;
    margin: auto 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;}

/* path relative to css file */
.play{background: url('../images/play.png') ;}
.pause{background: url('../images/pause.png') ;}
.notmuted{background: url('../images/mute_b256.png') ;}
.muted{background: url('../images/mute_g256.png') ;}

/* 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: 0;  
}
#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 #############################*/	


/*######### GENERAL #############################*/	
.indent2{margin-left: 2vw;}
.indent3{margin-left: 3vw;}
.indent4{margin-left: 4vw;}
.indent5{margin-left: 5vw;}

.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%;}
.text110 {font-size: 110%;}
.text120 {font-size: 120%;}
.text125 {font-size: 125%;}
.text130 {font-size: 130%;}
.text140 {font-size: 140%;}
.text150 {font-size: 150%;}
.text175 {font-size: 175%;}
.text200 {font-size: 200%;}

.expand {letter-spacing: 0.15em;}
.xexpand{letter-spacing: 0.3em;}

.bold   {font-weight: bold;}
.bolder {font-weight: 800;}

/* 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;}

.middle {vertical-align: -50%;}

/*
	Chartreuse 	#7FFF00
	lime 		#00ff00 
	MediumSpringGreen 	#00FA9A
	palegreen 	#98FB98
	SpringGreen #00FF7F
	Fuchsia  Magenta 	#FF00FF
	Violet 		#EE82EE
	.green 		#00ff42
	.lilac 		#ffc5f8
*/
.black {color:#000000;}
.green {color:#00ee42;}
.lilac {color:#ffc5f8;}
.brown {color:#a08000;}
.darkbrown {color:#704000;}
.darkred {color:#400000;}

a:link { text-decoration: none; background: transparent; color: #003399; border: 0;}
a:visited { text-decoration: none; background: transparent; color: #003399; border: 0;}
a:hover { text-decoration: underline; background: transparent; color: #6677ff; border: 0;}
a:active { text-decoration: underline; background: transparent; color: #6677ff; border: 0; outline: none;}
a:focus { text-decoration: underline #f04080; outline: none; color: #f04080;} 
a:focus img {border: 1px solid #000000;}/*color: #ffffff*/
/*a:keynavdiv:focus > div{background-color: #505050;}*/

iframe{
  		height: 100%; 
  }