﻿.clsBodyStage
{
	/*overflow:hidden;*/
	background:url(/resources/images/stage_grayscale.jpg) no-repeat center;
}
/*CORE:START*/ 
#loadOverlayWrapper {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
    display: flex;
    justify-content: center;
	display:none;
}
#loadOverlay {
	position:relative;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:#000;
	z-index:1;
	opacity:.5;
}
#loadOverLayText {
	position:absolute;
	top:30%;
	z-index:10000;
	background:#fff;
	border-radius:5px;
	padding:10px;
}
.divHomeContentWrapper {
	margin:50px 0px 0px 0px;
}
.home-panel {
	background:#efefef;
	border:1px solid #ccc;
	border-radius:5px;
	padding:10px;
	margin: 0px 0px 30px 0px;
	box-shadow: 0px 0px 14px rgb(0 0 0 / 33%);
	font-size:16px;
} 
.hr-gray {
	border:1px solid #ccc;
}
.hr-gray
.svgIcon {
	width:30px;
	color:#ccc;
}
.imgAbout {
	width:100%;
}
.content-link {
	font-size:14px;
}
table td
{
	padding:5px;
}
#divPageWrapper
{
	
}
.exitStageLeft {
	float:left;
	cursor:pointer;
	font-weight:bold;
	border:1px solid #ccc;
	border-radius:5px;
	padding:5px 10px 5px 10px;
	background:#fff;
	margin-top: 2px;
}
#divStageWrapper
{
	margin:0px 0px 132px 0px;
	position:relative;
	width:100%;
	bottom:77px;
}
#divStageAudioWrapper
{
	width:100%;
	background:#efefef;
	height:80px;
	text-align:center;
	float:left;
	position:fixed;
	bottom:0px;
	border:2px solid #ccc;
}
#divStageAudioControls
{
	position:absolute;
	float:right;
	width:20%;
	display:none;
	margin:auto auto;
	background:#fff;
	height:100%;
}
#divStageAudioSongDetail {
	/*position:absolute;
	float:left;*/
	color:#000;
	padding-left:5px;
	font-size:10pt;
	display:none;
}
#divStageAudioPlayerTitle
{

	width:100%;
	margin:auto auto;
	height:25px;
	border-top:2px solid #ccc;

}
#spanAudioClock
{
	padding-left:5px;
}
#divStageAudioPlayer
{

	width:80%;
	margin:auto auto;
	float:right;
	height:55px;
	text-align:center;
}
#divStageAlbumsWrapper
{	
	width:auto;
	margin:0px 0px 0px 0px;
}
#pauseButton
{
 	width:50px;
 	height:50px;
	display:none;
	cursor:pointer;
 	margin:10px auto;
 	opacity:.5;
}
#playButton
{
 	width:50px;
 	height:50px;
 	display:none;
 	cursor:pointer;
 	margin:10px auto;
 	opacity:.5;
}
#divStageAudioPlayerProgressBarWrapper {
	width:100%;
	float:left;
}
#divStageAudioPlayerProgressBar {
	background:#ccc;
	width:0%;
	text-align:center;
	float:left;
}
.bg-black {
	background:#000;
	color:#fff;
}
.tx-r {
	text-align:right;
}
.tx-18 {
	font-size:18px;
}
.mg-r-10 {
	margin-right:10px;
}
.mg-l-10 {
	margin-left:10px;
}
.mg-t-20 {
	margin-top:20px;
}
.pd-5 {
	padding:5px;
}
/*CORE:END*/

/*MULTI:START*/
.clsAlbumTile
{
	width:320px;
	height:250px;
	float:left;
	background:#fff;
	border:1px solid transparent;
	border-radius:5px;
	margin:5px 0px 5px 5px;
	padding:5px;
}
.clsAlbumTile img {
	width:50px;
}
.clsAlbumTileSongList
{
	overflow:auto;
	height:90%;
	background:#fff;
	padding:5px;
}
.clsAlbumTileSongListItemInactive
{
	background:#efefef;
	border:1px solid #ccc;
	margin:0px 0px 10px 0px;
	cursor:pointer;
	border-radius:5px;
}
.clsAlbumTileSongListItemActive
{
	background:#efefef;
	border:1px solid lightgreen;
	margin:0px 0px 10px 0px;
	font-weight:bold;
	cursor:pointer;
	border-radius:5px;
}
.clsAlbumTileSongListItemInactive:hover
{
	border:1px solid lightgreen;
	background: #ccc;
}
.clsAlbumTileSongListItemInactive img, .clsAlbumTileSongListItemActive img{
	margin-top:20px;
}
.clsAudioPlayerWrapper
{
	text-align:center;
	width:100%;
	padding:5px;
}
/*MULTI:NDE*/

/*SINGLE:START*/
.clsSingleAlbumTile
{
	width:400px;
	position:relative;
	top:100px;
	border:1px solid #000;
	margin:auto auto; 
	padding:5px;
	box-shadow: 0px 0px 14px rgb(0 0 0 / 33%);
}
.clsSingleSongTile, .clsSingleSongTileLyrics
{
	/*height:calc(100vh);*/
	position:relative;
	top:140px;
}
.singleSongListenButtonWrapper {
	margin:20px 0px 0px 0px;
}
.singleSongListenButton {
	border:1px solid #000;
	border-radius:10px;
	background:#fff;
	padding:5px;
	color:#000;
}
.singleSongListenButton img {
	margin:0px 5px 5px 0px;
}
.bg-white {
	background:#fff;
}
.100h {
	height:100%;
}
.singleSongLyricsWrapper {
	height:calc(100vh) - 150;
	box-shadow: 0px 0px 14px rgb(0 0 0 / 33%);
}
.clsSingleAlbumTileCreditsList
{
	overflow:auto;
	background:#fff;
	padding:5px;
	display:none;
}
.divCreditItem {
	margin-bottom:10px;
}
.clsSingleAlbumTileSongList
{
	overflow:auto;
	background:#fff;
	padding:5px;
}
.clsSingleAlbumTileGraphicsList
{
	overflow:auto;
	height:227px;
	background:#fff;
	padding:5px;
	display:none;
}
.clsSingleAlbumTileOwnerList
{
	background:#fff;
	padding:5px;
	display:none;
}
.clsSingleAlbumTileSongListItemInactive
{
	background:#fff;
	border:1px solid #ccc;
	padding:5px 5px 5px 5px;
	margin:5px 5px 5px 0px;
	border-radius:10px;
}
.clsSingleAlbumTileSongListItemActive
{
	background:#efefef;
	border:1px solid lightgreen;
	padding:5px 5px 5px 5px;
	margin:5px 5px 5px 0px;
	font-weight:bold;
	border-radius:10px;
}
.clsSingleAlbumTileSongListItemInactive:hover
{
	border:1px solid lightgreen;
	background: #ccc;
}
.clsSingleAlbumSongLink {
	width: 70%;
    display: inline-block;
    cursor:pointer;
}
.clsSingleAlbumSongCommentsLink {
	float: right;
    width: 20%;
    text-align: right;
    cursor:pointer;
}
.clsSingleAlbumSongCommentsContainer {

}
.clsSingleAlbumSongCommentsLink a {
	font-size:12px;
}
.commentShow {
	display:inline-block;
}
.commentHide {
	display:none;
}
.clsSingleAudioPlayerWrapper
{
	text-align:center;
	width:100%;
	padding:5px;
}

.clsSingleAlbumGraphicsTile
{
	width:400px;
	position:relative;
	top:130px;
	background:#ccc;
	border:1px solid #000;
	margin:auto auto; 
	padding:5px;
}
.clsSingleAlbumLargeGraphicWrapper
{
	position:relative;
}
.clsAlbumTabsWrapper
{
	position:absolute;
	right:6px;
	margin:-11px 0px 0px 0px;
}
#spanAlbumCreditsLink
{
	float:right;
	cursor:pointer;
	color:blue;
}
#spanAlbumOwnerLink
{
	float:right;
	cursor:pointer;
	color:blue;
}
#spanAlbumTracksLink
{
	float:right;
	cursor:pointer;
	color:blue;
}
#spanAlbumGraphicsLink
{
	float:right;
	cursor:pointer;
	color:blue;

}
.clsAlbumTabActive
{
	background:#fff;
	padding:4.5px;
	border-radius:5px 5px 0px 0px;
	border-left:1px solid #ccc;
	border-top:1px solid #ccc;
	border-right:1px solid #ccc;
	border-bottom: 1px solid #fff;
}
.clsAlbumTabInactive
{
	padding:4.5px;
	border-radius:5px 5px 0px 0px;
	border-left:1px solid #ccc;
	border-top:1px solid #ccc;
	border-right:1px solid #ccc;
	border-bottom: 1px solid #ccc;
}
.clsAlbumTabsSpacer
{
	background:#efefef;
	float:right;
	width:5px;
	border-bottom:1px solid #ccc;
	margin:10px 0px 0px 0px;
}
#spanProgress
{
	width:20px;
}
#divAlbumGraphicsWrapper
{
	position:relative;
	float:left;
	width:100%;
	height:100%;
}
#divAlbumGraphicsPrev
{
	left:0px;
	float:left;
	width:40px;
	position:absolute;
	top:0%;
	font-size:24pt;
	color:#000;
	cursor:pointer;
	background:#fff;
	padding:5px;
	border-radius:0px 0px 10px 0px;
	opacity:.5;
	text-align:center;
}
#divAlbumGraphicsNext
{
	right:0px;
	float:left;
	width:40px;
	position:absolute;
	top:0%;
	text-align:right;
	font-size:24pt;
	color:#000;
	cursor:pointer;
	background:#fff;
	padding:5px;
	border-radius:0px 0px 0px 10px;
	opacity:.5;
	text-align:center;
}
#divAlbumGraphicsImage
{
	text-align:center;
	margin:auto auto;
}
#divAlbumGraphicsImage img
{
	width:100%;

}
/*SINGLE:END*/

/*COMMENTS:START*/
#divCommentsOutput {
	margin:0px 0px 20px 0px;
}
/*COMMENTS:END*/

/*HOME:START*/
#divHomeBanner
{
	text-align:center;
}
#divHomeContent
{
	position:relative;
	width:100%;
	text-align:center;
	font-size:14pt;
	margin:20px 0px 0px 0px;
}
#divCurrentAlbumList
{
	margin:20px 10px 0px 0px;
}
.clsHomeAlbumListItem
{
	margin:auto auto;
	padding:10px 0px 10px 0px;
	background:#efefef;
	border:1px solid #cccccc;
	cursor:pointer;
	margin:10px;
	border-radius:5px;
}
.logoutLink {
	float:right;
	margin:0px 40px 0px 0px;
	font-size:12px;
	padding:5px;
	border-radius:5px;
	border:1px solid #ccc;
	cursor:pointer;
}
.btn-pill {
	background:#ccc;
	padding:10px;
	border-radius:5px;
	border:1px solid #ccc;
}
.btn-pill-sm {
	background:#ccc;
	padding:10px;
	border-radius:5px;
	border:1px solid #ccc;
	font-size:12px;
	font-style:none;
}
.tx-center {
	text-align:cneter;
}
/*HOME:END*/

#divAlbumThumbs
{
	position:fixed;
}
.clsAlbumThumbWrapper
{
	height:60px;
	background:#efefef;
	margin:5px;
	cursor:pointer;
}


/*MODAL:START*/
#divModal
{

}
#divModalCloak
{
	display:none;
	width:100%;
	height:100%;
	position:absolute;
	top:0px;
	background:#000000;
	opacity:.5;
}
#divModalWrapper
{
	display:none;
	margin: auto auto;
	position:absolute;
	width:100%;
	top:50px;
}
#divModalHeader
{
	background:#efefef;
	position:relative;
	border-radius:10px 10px 0px 0px;
	padding:10px;
	border-left:2px solid #000000;
	border-top:2px solid #000000;
	border-right:2px solid #000000;
	border-bottom: 1px solid #ccc;
	font-weight:bold;
	font-size:14pt;
}
.albumSongCommentsModalSongName {
	font-size:18px;
	font-style:italic;
}
.singleAlbumTitleStage {
	margin:10px 0px 20px 0px;
	text-align: center;
}
.albumSongCommentLink {
	text-align:right;
	margin:10px 5px 0px 5px;
}
.albumSongCommentLink a {
	padding:5px;
	background:#efefef;
	border:1px solid #ccc;
	border-radius:5px;
}
#commentFormWrapper {
	display:none;
	background:#efefef;
	padding:10px;
}
.albumSongCommentsContainer {

}
.albumSongCommentItem {
	margin:10px 5px 15px 5px;
	background:#efefef;
	padding:10px;
	border:1px solid #ccc;
	border-radius:5px;
	box-shadow: 0px 0px 5px rgb(0 0 0 / 33%);
}

.albumSongCommentDate {
	font-size:12px;
}
.albumSongComment {
	font-style:italic;
	font-size:16px;
}
.pageComment {
	font-size:16px;
}
.commentHint {
	font-style:normal;
	font-size:12px;
	margin:10px 0px 0px 0px;
}
.commentHint a {
	font-size:12px;
}
#taComment,#txtAreaAlbumSongComment {
	border:5px solid #fff;
}
.spanSongModalToolItem
{
	cursor:pointer;
	border-radius:5px;
	border:1px solid #ccc;
	background:#ffffff;
	padding:3px;
	margin:0px 5px 0px 0px;
}
.spanSongModalToolItemActive
{
	cursor:pointer;
	border-radius:5px;
	background:#ccc;
	padding:3px;
	margin:0px 5px 0px 0px;
}
#divModalBody
{
	background:#ffffff;
	position:relative;
	padding:5px;
	border-left:2px solid #000000;
	border-right:2px solid #000000;
	max-height:400px;
}
.modalTrackTypeLabel {
	position: fixed;
    background: #afadad;
    display: -webkit-inline-box;
    padding: 5px;
	margin: -9px 0px 0px -7px;
	color:#fff;
}
#divModalFooter
{ 
	background:#efefef;
	position:relative;
	border-radius:0px 0px 10px 10px;
	padding:10px;
	border-left:2px solid #000000;
	border-bottom:2px solid #000000;
	border-right:2px solid #000000;
}
#divModalCloserWrapper
{
	position:absolute;
	top:10px;
	right:10px;
	border-radius:12px 12px 12px 12px;
	background:#ffffff;
	border:1px solid #ccc;
	padding:3px;
	width:30px;
	text-align:center;
	cursor:pointer;
}
#divModalCloserWrapper a
{
	text-decoration:none;
	color:#000000;
	font-size:12pt;
}
/*MODAL:END*/

/*COMMENTS:START*/
#divCommentsInputWrapper {
	background:transparent;
}
.divCommentsInput {
	background:#efefef;
	padding:10px;
	border-radius:5px;
	border:1px solid #ccc;
	box-shadow: 0px 0px 14px rgb(0 0 0 / 33%);
}
.divCommentsSubContent {
	padding:10px;
}
#genComCharLmt, #songComCharLmt {
	float:right;
}
.taComments {
	width:100%;
}
/*COMMENTS:END*/
/*MEDIA QUERIES:START*/
@media screen and (min-width : 100px) {
	.clsAlbumTile
	{
	width:98%;
	height:250px;
	}
	.clsSingleAlbumTile 
	{
		width:100%;
		height:100%;
		position:relative;
		top:106px;
		background:#efefef;
		border:1px solid #ccc;
		margin:auto auto; 
		padding:5px;
	}
	.clsSingleAlbumTileSongList
	{
		overflow:auto;
		height:100%;
		background:#fff;
		padding:5px;
	}
	.clsSingleAlbumTileGraphicsList
	{
		overflow:auto;
		height:100%;
		background:#fff;
		padding:5px;
	}
	#divHomeBanner
	{
		font-size:22pt;
	}
	#divModalWrapper
	{
		width:100%;
	}
}
@media screen and (min-width : 320px) {
	.clsAlbumTile
	{
	width:98%;
	height:250px;
	}
	.clsSingleAlbumTile 
	{
		width:100%;
		height:100%;
		position:relative;
		top:106px;
		background:#efefef;
		border:1px solid #ccc;
		margin:auto auto; 
		padding:5px;
	}
	.clsSingleAlbumTileSongList
	{
		overflow:auto;
		height:100%;
		background:#fff;
		padding:5px;
	}
	.clsSingleAlbumTileGraphicsList
	{
		overflow:auto;
		height:100%;
		background:#fff;
		padding:5px;
	}
	#divHomeBanner
	{
		font-size:24pt;
	}
	#divModalWrapper
	{
		width:100%;
		top:100px;
	}
}
@media screen and (min-width : 480px) {
	.clsAlbumTile
	{
	width:99%;
	height:250px;
	}
	.clsSingleAlbumTile 
	{
		width:100%;
		height:100%;
		position:relative;
		top:126px;
		background:#efefef;
		border:1px solid #ccc;

		padding:5px;
	}
	.clsSingleAlbumTileSongList
	{
		overflow:auto;
		height:100%;
		background:#fff;
		padding:5px;
	}
	.clsSingleAlbumTileGraphicsList
	{
		overflow:auto;
		height:100%;
		background:#fff;
		padding:5px;
	}
	#divHomeBanner
	{
		font-size:20pt;
	}
	#divModalWrapper
	{
		width:100%;
	}
	
}
@media screen and (min-width : 768px) {
	.clsAlbumTile
	{
	width:320px;
	height:250px;
	}
	.clsSingleAlbumTile 
	{
		width:600px;
		height:100%;
		position:relative;
		top:130px;
		background:#efefef;
		border:1px solid #ccc;
		margin:auto auto; 
		padding:5px;
	}
	.clsSingleAlbumTileSongList
	{
		overflow:auto;
		height:100%;
		background:#fff;
		padding:5px;
	}
	.clsSingleAlbumTileGraphicsList
	{
		overflow:auto;
		height:100%;
		background:#fff;
		padding:5px;
	}
	#divHomeBanner
	{
		font-size:16pt;
	}
	#divModalWrapper
	{
		width:80%;
	}
}
@media screen and (min-width : 992px) {
	.clsAlbumTile
	{
	width:320px;
	height:250px;
	}
	.clsSingleAlbumTile 
	{
		width:700px;
		height:100%;
		position:relative;
		top:130px;
		background:#efefef;
		border:1px solid #ccc;
		margin:auto auto; 
		padding:5px;
	}
	.clsSingleAlbumTileSongList
	{
		overflow:auto;
		height:100%;
		background:#fff;
		padding:5px;
	}
	.clsSingleAlbumTileGraphicsList
	{
		overflow:auto;
		height:100%;
		background:#fff;
		padding:5px;
	}
	#divHomeBanner
	{
		font-size:16pt;
	}
	#divModalWrapper
	{
		width:75%;
	}
}
@media screen and (min-width : 1200px) {
	.clsAlbumTile
	{
	width:320px;
	height:calc(70vh);
	}

	#divHomeBanner
	{
		font-size:16pt;
	}
	.clsSingleAlbumTile
	{
		width:700px;
		height:auto;
		position:relative;
		top:130px;
		background:#efefef;
		border:1px solid #ccc;
		margin:auto auto; 
		padding:5px;
		border-radius: 5px;
	}
	.clsSingleAlbumTileSongList
	{
		overflow:auto;
		height:auto;
		background:#fff;
		padding:5px;
	}
	.clsSingleAlbumTileGraphicsList
	{
		overflow:auto;
		height:max-content;
		background:#fff;
		padding:5px;
	}
	.clsSingleAlbumTileSongListItemInactive
	{
		font-weight:bold;
	}
	.clsSingleAlbumTileSongListItemActive
	{
		font-weight:bold;
	}
	#divModalWrapper
	{
		width:50%;
	}
}
/*MEDIA QUERIES:END*/