/*================================ page setup =================================*/
 html{
	margin:0;
	padding:0;
	max-height:100%;
	max-width:100%;}

body{
	max-height:100%;
	max-width:100%;
	margin:0;
	padding:0;
	background:url(../images/musbackground.jpg);
	background-size: 100% 100%;
	background-position:center;
	/* background-color: #fff; */
	}

.flex-container {
	display:flex;	
    flex-flow:column nowrap;
    height:100vh;
	width:100%;
	overflow:hidden;
	background:transparent;
	
	}

.flex-wrapper {
	
	overflow:auto;
	flex:1 1 100%;
	flex-flow:row nowrap;
	background:transparent;
	}

.main{
	
	overflow:auto;
	flex:1 1 60%;
	
	}
	
.cards{
	display: flex  ;
    flex-flow:row wrap;
	width:clamp(20rem,90%, 95rem);
	height:100%;
    align-items: stretch;
    justify-content:space-evenly;
	overflow-y:auto;
	}

.card {
	display:flex ;
	 flex: 1 0 50%;
    margin: 5px;
	/* height:auto;  */
    border: 2px solid #cc0000;
    box-shadow: 5px 6px #ddccff;
	height:25px;
	width:25px;
	font-family: arial, verdana, sans-serif;
    font-size: 1em;
	font-style:italic;
    line-height: 1.5em;
	/* text-align: left; */
	padding:0 2px;
	color:#fff;
	background:transparent;
	align-self:flex-start;
	
	opacity:1;
	}
.cardh {
	display:flex;
    margin: 0px 0px 0 55px;
    border: 2px solid #cc0000;
	 border-radius: 1em ;
	height:auto;
	width:auto;
	align-self:center;
	opacity:1;
	justify-content :center;
	align-content:center;
	
}

.cardhp {
	
    margin: 2px 2px ;
    border: 2px solid #cc0000;
	 border-radius: 1em ;
	height:50px;
	width:50px;
	/* align-self:center; */
	opacity:1;
	cursor:pointer;
}

.pcardh {
	
     margin: 15px 2px 0 2px;
    border: 2px solid #cc0000;
	 border-radius: 1em ;
	height:auto;
	width:auto;
	align-self:center;
	opacity:1;
	cursor:pointer;
}

.cardm {
    display:flex 1 0 60%;
	margin-top:150px;
    border: 2px solid #cc0000;
	 border-radius: 1em ;
	height:auto;
	width:clamp(10rem,50%, 25rem);
	align-self:centre;
	opacity:1;
}
.cardms {
	display:flex 1 0 60%;
	margin-top:10px;
	margin-left:30%;
    border: 2px solid #cc0000;
	 border-radius: 0.5em ;
	height:auto;
	width:clamp(10rem,25.5%, 25rem);
	align-self:centre;
	
	opacity:1;
	
	
}
	.message {
		font-family: arial, verdana, sans-serif;
		font-size: 1em;
		font-style:italic;
		line-height: 1.25em;
		text-align: centre;
		margin-top:0;
		padding:0 ;
		color:#000;
			}
	
.info, .content {
	/* display:flex 1 1 50%; */
	/* justify-content :space-around; */
	/* align-content:center; */
	font-family: arial, verdana, sans-serif;
    font-size: 1em;
	font-style:italic;
    line-height: 1.25em;
	text-align: justify;
	margin-top:0;
	/* margin: 0px 10px; */
	padding: 0px 10px;
	color:#000;
	background:#eee;
	background:transparent;
	overflow:auto;
	}

.header {
	display:flex ;
	background: #eee;
	height:40px;
	max-width:100%;
	margin:0px;
	padding-left:10px;
	border-bottom: 3px solid #ff00ff;
	align-content:center;
	justify-content:space-evenly;
	background:transparent;
	}
	
	.header2 {
	background: #eee;
	margin-left:20px;
	padding-left:0px;
	align-self:center;
	background:transparent;
	
	}
	

	
.footer {
	background:#eee ;
	height:50px;
	min-width:100%;
	margin:0;
	padding:0;
	border-top:#ff00ff 3px solid;
	display:flex;
	justify-content:flex-end;
	align-items:center;
	
	}
		
.asideleft	{background:#fff;background:transparent;}
.aside	{background:#fff;background:transparent;}
.main	{background:#fff;background:transparent;}

	

li#SV {background:#eee;}

/* .header { order: 0;}  /*--- outside --- */ */
/* .asideleft	{ order: 2; } /* inside wrapper */ */
/* .main	{ order: 1; } /* inside wrapper */ */
/* .aside  { order: 3; } /* inside wrapper */ */
/* .footer { order: 2; } /*--- outside --- */ */



/*==================================== end page setup ====================================*/

.copyright
{
    font-family: arial, verdana, sans-serif;
    font-size: 0.8em;
    line-height: 1.5em;
	text-align:right;
	padding-right:20px;
}



#audio{
	/* display:flex; */
	margin: 0px 30% 0 20%;
  width:60%;
  align-self:center;
  justify-content:center;
}

button.butt{
	border:hidden;
	background-color:#fff;
	line-height:0px;
	width:100%;
	text-align:left;
	cursor:pointer;
	
}
	
.debs
{
	max-height:100%;
	max-width:12em;
	line-height:1rem;
    padding: 10px;
	margin: auto;
	border: #ff00ff 0px solid;
	-moz-border-radius: 1em 2em 1em 2em;
         border-radius: 1em 2em 1em 2em;
	align-self:center;
	
}

.debsmax
{	height:100%;
	max-width:100%;
    padding: 10px;
	margin:10px auto;
	border: #ff00ff 0px solid;
	-moz-border-radius: 1em 2em 1em 2em;
         border-radius: 1em 2em 1em 2em;
	align-self:center;
}

.fluid {max-height:100%; max-width:100%;}

.centre{text-align:center;}

em{font-weight:bold;}

.h1style{
	font-family:Georgia serif;
    font-size:  calc( 0.9rem + 1.0vw); 
	color: #ffff00;
	font-style: italic;
    font-weight: bold;
	align-self:center;
	}
	
.h3style{
	font-weight: bold;
	font-style:italic;
	font-size:18px;
	color:#770077;
	text-align:center;
	}

.menuicon,.svicon {
		display:flex;
		max-width:25px;
		height:23px;
		margin: 2.5px 10px 0 0;
		border:1px solid #ff00ff;
		background-color:#ffddff;
		border-radius:5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}

 .aside,.asideleft  { 
	display:flex;
	flex-flow:column nowrap;
	justify-content:flex-start;
	align-items:center;
	width:20%;
 }
 
 .like {
	 width:120px;
	 height:60px;
	 word-break: break-all;
	 white-space: normal;
	 font: 1em sans-serif;
  /* Uniform text field size */
  /* width: 300px; */
  box-sizing: border-box;
  /* Match form field borders */
  border: 1px solid #999;
  white-space: initial;
 
 }
 
	
	#speaker{ 
    float: left;
   height: 15px;
	width:25px;
    margin: 10px 0px 0 0px;
	display:none;
}

.play1{
    float: left;
    height: 15px;
	width:25px;
    margin: -7px 0px 0 0px;
	display:none;
}
.play2{
    float: left;
    height: 15px;
	width:25px;
   margin: -7px 10px 0 0;
	display:none;
}

.play3{
    float: left;
    height: 15px;
	width:25px;
    margin: -7px 10px 0 0;
	display:none;
}

.play4{
    float: left;
    height: 15px;
	width:25px;
    margin: -7px 10px 0 0;
	display:none;
}

.play5{
    float: left;
    height: 15px;
	width:25px;
    margin: -7px 10px 0 0;
	display:none;
}

.play6{
    float: left;
    height: 15px;
	width:25px;
    margin: -7px 10px 0 0;
	display:none;
}

.play7{
    float: left;
    height: 15px;
	width:25px;
    margin: -7px 10px 0 0;
	display:none;
}

.play8{
    float: left;
    height: 15px;
	width:25px;
    margin: -7px 10px 0 0;
	display:none;
}

.play9{
    float: left;
    height: 15px;
	width:25px;
    margin: -7px 10px 0 0;
	display:none;
}

.play10{
    float: left;
    height: 15px;
	width:25px;
    margin: -7px 10px 0 0;
	display:none;
}

div.current-time{
    position: absolute;
    font-size: 10px;
    bottom: 7px;
    left: 3px;
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
    font-weight: 300;
}
div.time-duration{
    position: absolute;
    font-size: 10px;
    bottom: 7px;
    right: 3px;
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
    font-weight: 300;
}



 

/*================================== Navigation Menu =================================*/



.nav ul li {list-style-type:none; }
.nav ul li a {text-decoration:none;}


.nav ul.level1 {
	
	margin-top:2px ; 
	margin-left: 1rem;
	margin-right: 0.1rem;
	padding:0; 
	width:6em; 
	border: 1px solid #ff00ff; 
	background:#ffddff;
	/* z-index:100; */
	}
	
	.nav ul.level2{
	display:flex;
	flex-flow: column nowrap;
	margin:0px 0 0 0em; 
	padding:0; 
	width:6em; 
	border: 1px solid #ff00ff; 
	background:#ffddff;
	/* z-index:100; */
	}
	
 .nav li {
	 display:flex;
	color:#000;
	margin:0px;
	padding:0px;
	width:6em;
	line-height:1.5em;
	border-bottom:1px solid #ff00ff;
	background:#ffddff;
	z-index:100;
	}

	
	

.nav li a {display:flex; padding: 0.25em 0 0.25em 0.25em;width:6em;z-index:100;}


.nav li a:hover{background:#ffbbff;}

.nav ul ul li a {display:flex; width:6em; color:#000;}
.nav li a:hover{color:#ff0000;text-decoration:none;}
.nav ul li a:hover{background:#ccff00;text-decoration:none;}
.nav li a:active{color:#ffff00;text-decoration:none;}
.nav li:active{background:#00aa00;text-decoration:none;}
 ul li.sultana a {background-color:#00aa00; color:#ffff00;}
 
 
 

ul li.sultana a {background-color:#00aa00; color:#ffff00;}

 .asideleft { display:none;}
 
/*=============================== end Navigation Menu ===============================*/

.header { order: 0;}  /*--- outside --- */
nav.asideleft	{ order: 1; } /* inside wrapper */
	main.main	{ order: 2; } /* inside wrapper */
	aside.aside  { order: 3; } /* inside wrapper */
.footer { order: 1; } /*--- outside --- */

/*===============================Media Queries=======================================*/

@media all and (min-width: 678px) {
	.asideleft { display:flex;}
	.nav ul.level1 {
	
	margin-top:2px ; 
	margin-left: 1rem;
	margin-right:12rem;
	padding:0; 
	width:6em; 
	border: 1px solid #ff00ff; 
	background:#ffddff;
	/* z-index:100; */
	}
	.nav  ul.level2 {
	/* display:flex; */
	flex-flow: row nowrap;
	margin:-35px 6em 0 6em; 
	padding:0; 
	width:24em; 
	background:#ffddff;
	}
	
	.nav  ul.level2 li a{
		background:#ffddff;
	justify-content:center;
	/* background:#ffddff; */
	}
	
	.nav  ul.level2 li a:hover {background:#ccff00;}
	
	.nav ul.level2 li.sultana a {background-color:#00aa00; color:#ffff00;}
	
	
	
    .flex-wrapper {
		display: -webkit-flex;
		display:flex;	
		flex-flow:row nowrap;	
		justify-content:space-between;
		overflow:auto;
		}
		
	.debs{float:left;}
		
	.fluid { }
	
	.main{margin-top:0%;}

	
	
}

/*===============================End Media Queries===================================*/