@charset "utf-8";
body {margin: 0; font-size: 12px; font-family: Arial, Helvetica, sans-serif; background-color: #12677D; scroll-behavior: smooth;}


/* Topbar */
.topbar {overflow: hidden; background-color: #333; position: fixed; top: 0; width: 100%; height: 30px; z-index: 100;}
.topbarwidth {max-width: 1270px; margin: auto;}
.topbar a {float: right; display: block; color: #f2f2f2; text-align: center; padding: 8px 8px; margin-left: 10px; text-decoration: none; font-size: 14px; height: 30px; transition: 0.2s;}
.topbar a:hover {background: #ddd; color: black; transition: 0.2s;}
#topbarlogo {float: left; display: block; height: 30px; width: 300px; transition: 1s;}
#topbarlogo img {width: 200px; height: 30px;}
#topbarlogo a {float: left; display: block; padding: 0px; margin: 0px;}
#topbarlogo a:hover {background: #333;}
.topbarfadein {visibility: visible; opacity: 1; transition: visibility 0s 1s, opacity 1s linear;}
.topbarfadeout {visibility: hidden; opacity: 0; transition: visibility 0s 1s, opacity 1s linear;}

/* Header */
.header {padding: 16px; max-width: 1238px; background-color: #12677D; overflow: auto; clear: both; margin-top: 30px; background-image: url("../img/music1.png"); background-repeat: no-repeat;  background-position: right; height: 56px;}
.headerlogo {padding: 1px; float: left;}
.headerlogo img {}

/* Footer */
.footer {background-color: #333; max-width: 1250px; padding: 10px; margin: 0; color: #f2f2f2; text-align: center;}

/* Main Content */
.pagecontainer {max-width: 1270px; margin-left: auto ; margin-right: auto; background-color: #ffffff}

/* To Top Button */
#myBtn {display: none; position: fixed; bottom: 10px; right: 20px; z-index: 99; font-size: 18px; border: none; outline: none; background-color: #555; color: white; cursor: pointer; padding: 15px; border-radius: 4px; transition: 0.3s;}
#myBtn:hover {background-color: #222; transition: 0.3s;}


/* Navbar */
#navbar {overflow: hidden; background-color: #333; clear: both; z-index: 10;}
/*#navbar a {float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px;}
#navbar a:hover {background-color: #ddd; color: black;}
#navbar a.active {background-color: #4CAF50; color: white;} */
.navsmall {display: none; background-color: #555; color: white; float: right; border: none; outline: none; cursor: pointer; padding: 14px 16px; font-size: 17px;}
.navsmall:focus {background-color: #ccc;}
.navoption {background-color: #555; color: white; float: left; border: none; outline: none; cursor: pointer; padding: 14px 16px; font-size: 17px;}
.navoption:hover {background-color: #777;}
#navoption1:hover {background-color: #777;}
#navoption2:hover {background-color: #777;}
#navoption3:hover {background-color: #777;}
#navoption4:hover {background-color: #777;}
#navoption5:hover {background-color: #777;}
#dropmenu {overflow: hidden; width: 1270px; display: block; color: #ffffff; z-index:10;}
.dropmenuplus {position: absolute;}
#menu1 {display:none; padding: 0px 10px 20px 10px;}
#menu2 {display:none; padding: 0px 10px 20px 10px;}
#menu3 {display:none; padding: 0px 10px 20px 10px;}
#menu4 {display:none; padding: 0px 10px 20px 10px;}
#menu5 {display:none; padding: 0px 10px 20px 10px;}
#menu6 {display:none; padding: 15px 10px 15px 10px; color: #000; width: 250px; float: right; border-left: 1px solid #000; border-right: 1px solid #000; border-bottom: 1px solid #000;}
.navcolumn {display: block; width: 24%; float:left;}
.twocols {}
.columntext {color: #ffffff; font-size: 12px; font-family: Helvetica, Arial, sans-serif; border: none; outline: none; cursor: pointer; background-color: transparent;}
.row {overflow:auto;}
.row a {float: none; color: #ffffff; padding: 2px; text-decoration: none; display: block; text-align: left;}
.row a:hover {opacity: 0.6;}

/* Searchbar */
.search-container-small {display: none;}
#navbar .search-container-small {float: right;}
#navbar .search-container-small button {float: right; background-color: #555; color: white; float: right; border: none; outline: none; cursor: pointer; padding: 14px 16px; font-size: 17px;}
#navbar .search-container-small button:hover {background: #ccc;}
#navbar .search-container {float: right;}
#navbar .search-container button {float: right; padding: 6px 10px; margin-top: 8px; margin-right: 16px; background: #ddd; font-size: 17px; border: none; cursor: pointer;}
#navbar .search-container button:hover {background: #ccc;}
#navbar input[type=text] {padding: 6px; margin-top: 8px; font-size: 17px; border: none; width:120px; -webkit-transition: width 0.4s ease-in-out; transition: width 0.4s ease-in-out;}
#navbar input[type=text]:not(:focus) {transition-delay: 3s;}

/* Main Page Contents */
.content {overflow: hidden; padding: 10px; background-color: #ffffff;}
.contenttop {max-width: 1250px; padding-bottom: 10px; font-size: 10px}
.contenttop a {text-decoration: none; color: #333;}
.contenttop a:hover {opacity: 0.6;}
#page-contents {overflow: hidden; padding: 10px; background-color: #ffffff;}

.sticky {position: fixed; top: 30px; width: 1270px;}
.stickydrop {position: fixed; top: 78px;}
.sticky + .stickydrop + .content {padding-top: 58px;}

/* Login Box */
#loginbox {overflow: hidden; width: 1270px; display: block; color: #ffffff; z-index: 20;}
.loginboxplus {position: fixed;}
#loginform {display:none; padding: 15px 10px 15px 10px; background-color: #ddd; color: #000; width: 300px; float: right; border-left: 1px solid #000; border-right: 0px solid #000; border-bottom: 1px solid #000;}
#loginform input[type=text], input[type=password] {width: 100%; padding: 10px 5px; margin: 8px 0; display: inline-block; border: 1px solid #ccc; box-sizing: border-box;}
#loginform button {background-color: #4CAF50; color: white; padding: 14px 20px; margin: 8px 0; border: none; cursor: pointer; width: 100%;}
#loginform button:hover {opacity: 0.8;}
.inputfielderror {box-shadow: 0 0 3px #cc0000;}

/* User Menu */
#usermenu {display:none; padding: 15px 10px 15px 10px; background-color: #ddd; color: #000; width: 150px; float: right; border-left: 1px solid #000; border-right: 0px solid #000; border-bottom: 1px solid #000; z-index: 20;}
#usermenu a {padding: 6px 8px 6px 16px; text-decoration: none; font-size: 15px; color: #000; display: block; cursor: pointer; transition: 0.2s;}
#usermenu i {width: 18px; text-align: center;}
#usermenu a:hover {color: #818181; transition: 0.2s;}
#usermenu button {padding: 6px 8px 6px 16px; text-decoration: none; font-size: 15px; color: #000; display: block; border: none; cursor: pointer; outline: none; background-color: inherit; font-weight: normal;}
#usermenu button:hover {color: #818181;}
.menudivider {border-top: 1px solid #818181;}
.loggedinusername {}

/* Checking area */
.mainresult {display: block; width: 100%; min-height: 72px; border-bottom: 1px solid #333; padding-top: 5px; clear: both; text-decoration: none;} /* 970px */
.mainresultcover {float: left; height: 72px; width: 70px; text-align: center;}
.mainresultcover img {border-radius: 20%; transition: 0.5s;}
.mainresultinfo {float: left; padding: 5px 5px 5px 10px; min-height:63px;}
.mainresultinfoout {width: calc(100% - 230px);}
.mainresultinfouser {width: calc(100% - 260px);}
.mainresultcwout {width: calc(100% - 165px);}
.mainresultcwuser {width: calc(100% - 185px);}
.mainresultdate {float: left; text-align: right; padding-top: 5px; min-height: 67px; width: 70px;}
.mainresultsell {float: left; text-align: right; padding-top: 5px; min-height: 67px; width: 70px;}
.mainresultsellnonli {font-size: 20px; color: rgba(231, 234, 242, 1);}
.mainresultselllinks {font-size: 20px; color: rgba(18, 103, 125, 0.6); transition: 0.2s;}
.mainresultselllinks:hover {font-size: 20px; color: rgba(18, 103, 125, 1); transition: 0.2s;}
.mainresultoptions {display: block; max-width: 1250px; clear: both; float: left;}
.mainresultoptions a {text-decoration: none; color: #333; transition: 0.2s;}
.mainresultoptions a:hover {opacity: 0.6; transition: 0.2s;}
.mainresult a {cursor: pointer; text-decoration: none; color: #000;}
.mainresult:hover {background-color: #eee;}
.mainresulttitle {float: left; display: block; clear: right; padding: 5px 10px 4px 6px; background-color: #b7cacb; font-weight: bold; min-width: 270px; margin: 0px 0px 10px 0px; font-size: 13px; border-left: 10px solid #81A3A7;}
.mainresultuser {float: left; height: 72px; width: 20px; text-align: center; font-size: 12px; opacity: 1;}
.mainresult:hover .mainresultcover img {border-radius: 10%; transition: 0.5s;}
.thumbsize {max-width: 70px; max-height: 70px;}
.resultmemberopts {position: relative; display: inline-block;}
.resultmemberopts-content {display: none; position: absolute; background-color: #f9f9f9; min-width: 180px; text-align: left; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); border: 1px solid #000; right: 0; z-index: 5; opacity: 1;}
.resultmemberopts-content a {padding: 6px 8px 6px 8px; text-decoration: none; font-size: 12px; color: #000; display: block; cursor: pointer;}
.resultmemberopts-content a:hover {color: #818181;}
.resultmemberopts-content i {width: 18px; text-align: center;}

.mainarea {clear: both; float: left; width: 100%;}
.mainleft {float: left; width: calc(100% - 280px); min-height: 500px;}
.mainmusictitle {float: left; padding: 5px 10px 4px 6px; clear: right; background-color: #b7cacb; font-weight: bold; min-width: 270px; margin: 0px 0px 5px 10px; font-size: 13px; border-left: 10px solid #81A3A7;}
.mainmusictop {float: left; min-height: 160px; width: 100%;}
.mainmusiccover {float: left; min-height: 140px; width: 160px; text-align: center;}
.mainmusiccover img {border-radius: 5%;}
.mainmusicinfo {float: left; min-height: 115px; width: calc(100% - 200px); margin: 20px 10px 5px 10px;}
.mainmusicdetails {float: left; width: 100%;}
.mainmusictracks {float: left; min-height: 50px; width: 100%;}
.mainmusicnotes {float: left; width: 100%; border-left: 8px solid #81A3A7; margin-left: 10px; padding: 0px 0px 0px 5px;}
.mainright {float: right; width: 270px; min-height: 500px;}
.musicsides {clear: both; float:left; width: 100%; margin: 0px 0px 20px 40px;}
.musicsides a {float: left; padding: 6px 10px; margin-top: 8px; margin-right: 16px; background-color: #ddd; font-size: 17px; border: none; cursor: pointer; display: block; border-radius: 10%;}
.musicsides a:hover {opacity: 0.6;}
.musicsides a:visited {background-color: #eee; font-weight: bold;}
.musiccategory {float: left; display: inline-block; margin-right: 4px;}

.pagination {min-width: 50px; text-align: right; display: block; float: left; clear: both;}

.notlive {opacity: 0.4;}
.notlive:hover {opacity: 0.8;}
.playerplaylist {list-style:none;}
.playerplaylistnone {list-style:none;}
#playerplaylistnone {list-style:none;}
#playerplaylistnone li {cursor:context-menu; padding:5px 3px 5px 0px;}

#playerplaylist ul {list-style:none; padding-left: 40px;}
#playerplaylist li {cursor:pointer; padding:5px 3px 5px 0px; font-size: 12px;}
#playerplaylist li.active {font-weight:bold;}

#playerbuttons {margin-left: 40px; width: 100%; list-style: none; clear: both;}
#playerbuttons ul {display:inline;}
#playerplay{width:20px; height:20px; background-image:url('../img/icon_play.png'); background-repeat:no-repeat; float:left; list-style: none;}
#playerpause{width:20px; height:20px; background-image:url('../img/icon_pause.png'); background-repeat:no-repeat; float:left; list-style: none;}
#playerstop{width:20px; height:20px; background-image:url('../img/icon_stop.png'); background-repeat:no-repeat; float:left; list-style: none;}
#playerprev{width:20px; height:20px; background-image:url('../img/icon_prev.png'); background-repeat:no-repeat; float:left; list-style: none;}
#playernext{width:20px; height:20px; background-image:url('../img/icon_next.png'); background-repeat:no-repeat; float:left; list-style: none;}

.registerform {background-color: white; width: 95%;}
.registerform input[type=text], .registerform input[type=password] {width: 95%; padding: 15px; margin: 5px 0 22px 0; display: inline-block; border: none; background: #f1f1f1; box-sizing: border-box; clear: both;}
.registerform input[type=text]:focus, .registerform input[type=password]:focus {background-color: #ddd; outline: none;}
.registerform label {clear: both;}
.registerbtn {background-color: #4CAF50; color: white; padding: 16px 20px; margin: 8px 0; border: none; cursor: pointer; width: 95%; opacity: 0.9;}
.registerbtn:hover {opacity: 1;}
.registerform a {color: dodgerblue;}
.regsignin {background-color: #f1f1f1; text-align: center; padding: 16px 0px 16px 0px; width: 90%;}

.profileheader {width: 100%; height: 200px; border: 0px solid #000000; position: relative; background-color: #ccc;}
.prof1 {width: 100%; height: 150px; top: 0; border-bottom: 1px solid #000000; position: absolute;}
.prof2 {width: 100%; height: 120px; bottom: 0; border: 0px solid #ff0000; position: absolute;}
.prof1cam {right: 10px; top: 10px; position: absolute; opacity: 0.4; cursor: pointer;}
.prof2cam {left: 70px; top: -90px; opacity: 0.4; cursor: pointer;}
.prof1cam:hover {opacity: 0.8;}
.prof2cam:hover {opacity: 0.8;}
.profcover {width: 100px; height: 120px; margin-left: 40px; float: left; border: 0px solid #ff0000;}
.profilecover {width: 100px; height: 100px; position: relative; overflow: hidden; border-radius: 50%;}
.profilecover img {display: inline; margin: 0 auto;}
.profileusername {width: auto; background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 20px; border-radius: 20px; display:inline-block; padding: 10px 20px 10px 20px;}
.prof21 {width: calc(100% - 160px); height: 70px; float: left; border: 0px solid #ff0000; margin-left: 20px;}
.prof22 {width: calc(100% - 160px); height: 50px; float: left; border: 0px solid #ff0000; margin-left: 20px;}
.profileinfo {display: inline-block; min-height: 40px; border: 0px solid #ff0000; margin: 5px 20px 5px 20px; padding: 5px 0 0 0; text-align: center;}
.profiledivider {display: inline-block; border: 1px solid #aaa; height: 30px; margin: 10px;}
.profsmall {}
.smallrow {}
.mainresultuseradmin {}

.mainfull {float: left; width: 100%; min-height: 500px;}
.mainfullhalf {float: left; width: 45%; min-height: 500px; padding: 16px;}
.messageclosebtn {margin-left: 15px; color: #9F6000; font-weight: bold; float: right; font-size: 22px; line-height: 20px; cursor: pointer; transition: 0.3s;}
.messageclosebtn:hover {opacity: 0.6;}
.mainregister {float: left; width: 45%; min-height: 500px; padding: 16px;}
.maincomposer {float: left; width: 45%; min-height: 500px; padding: 16px; border-left: 1px solid #ddd;}

.messagewarning {padding: 10px; background-color: #FEEFB3; color: #9F6000;}
.messageerror {padding: 10px; background-color: #FFD2D2; color: #D8000C;}
.messagesuccess {padding: 10px; background-color: #DFF2BF; color: #4F8A10;}
.messageinfo {padding: 10px; background-color: #BDE5F8; color: #00529B;}
.messageclosebtn {margin-left: 15px; color: #9F6000; font-weight: bold; float: right; font-size: 22px; line-height: 20px; cursor: pointer; transition: 0.3s;}
.messageclosebtn:hover {opacity: 0.6;}
.wmstandard {display: block; float: left; width: auto; min-width: 100px;}

#adminmusicoptions {display: none; position: fixed; bottom: 0px; width: 900px; left: 20%; z-index: 99; font-size: 12px; border: 1px solid #000; outline: none; background-color: #fff; color: black; padding: 15px; border-radius: 4px; transition: 0.3s; margin: 0 auto;}
.shorturl {padding: 6px; margin-top: 8px; font-size: 12px; width:160px;}

/*
.mainleft {float: left; width: calc(100% - 100px); min-height: 500px;}
.mainlefthalf {float: left; width: 480px; min-height: 500px;}

*/

/* Responsive */
@media only screen and (min-width: 1100px) {
	#navbar input[type=text]:focus {width: 300px;}
}
@media only screen and (max-width: 1270px) {
	#dropmenu {width: 100%;}
	.sticky {width: 100%;}
	#loginbox {width: 100%;}
	#adminmusicoptions {width: 80%; left: 5%;}

}
/* Reduce Navbar to 2 */
@media only screen and (max-width: 1199px) {
	#dropmenu {width: 100%;}
	.navcolumn {width: 49%;}
	.twocols {float: left; width: 100%;}
}
@media only screen and (max-width: 860px) {
	.search-container {display: none;}
	.search-container-small {display: initial;}
	.mainleft {width: 100%; min-height: auto;}
	.mainright {width: 100%; min-height: auto; clear: both;}
	.musicsides {margin: 0px 0px 20px 20px;}
	#playerbuttons {margin-left: 20px;}
	#playerplaylist ul {padding-left: 20px;}
	#playerplaylistnone ul {padding-left: 20px;}
	.mainregister {width: 90%;}
	.maincomposer {width: 90%; border-left: 0px; border-top: 1px solid #ddd; min-height: 0px; height: auto;}

}
/* Reduce Navbar to 1 */
@media only screen and (max-width: 680px) {
	.mainresultsell {display: none;}
	.mainresultinfoout {width: calc(100% - 160px);}
	.mainresultinfouser {width: calc(100% - 180px);}
	#menu1 {height: 260px;}
	#menu2 {height: 260px;}
	#menu3 {height: 260px;}
	#menu4 {height: 260px;}
	#menu5 {height: 260px;}
	.row {height: 240px;}
	.smallrow {background-image: url('../img/icon-arrowsmenu.png'); background-repeat: no-repeat; background-attachment: fixed; background-position: right;}
	#navbar button:not(:first-child) {display: none;}
	#navbar button.navsmall {display: block;}
	.search-container-small {display: none;}
	#dropmenu {width: 100%;}
	.navcolumn {width: 99%;}
	.headerlogo img {width: 200px; height: 30px;}
	.header {background-size: 200px 50px; height: 36px;}
	#topbarlogo {width: 140px;}
	#topbarlogo img {width: 140px; height: 20px; margin-top: 5px;}
	.stickydrop {top: 77px;}
	.sticky + .stickydrop + .content {padding-top: 58px;}
	.profileusername {font-size: 14px;}
	.profcover {margin-left: 10px;}
	.prof21 {width: calc(100% - 120px); margin-left: 10px;}
	.prof22 {width: calc(100% - 120px); margin-left: 10px;}
	.profileinfo {margin: 5px 5px 5px 5px;}
	#adminmusicoptions {width: 80%; left: 0;}
	.loggedinusername {display: none;}
}
@media only screen and (max-width: 550px) {
	.footer {padding-right: 80px;}
	.mainresult {overflow: hidden;}
	.mainresultinfouser {width: calc(100% - 180px);}
	.mainresultuser {text-align: right;}
	.mainresultuseradmin {display: none;}
	.pagination {min-width: 0px;}
	.mainmusictitle {margin: 0px 0px 5px 0px;}
	.mainmusiccover {width: 140px;}
	.mainmusicinfo {width: calc(100% - 160px); margin: 20px 10px 5px 0px;}
	.musicsides {margin: 0px 0px 20px 0px;}
	#playerbuttons {margin-left: 0px;}
	#playerplaylist ul {padding-left: 0px;}
	#playerplaylist li {font-size: 10px;}
	#playerplaylistnone ul {padding-left: 0px;}
	#playerplaylistnone li {font-size: 10px;}
	.profsmall {display: none;}
}
@media only screen and (max-width: 359px) {
	#navbar button.navsmall:nth-last-child(-n+3) {display: none;}
}
@media (max-width: 630px) and (orientation:landscape) {
	#menu1 {height: 180px;}
	#menu2 {height: 180px;}
	#menu3 {height: 180px;}
	#menu4 {height: 180px;}
	#menu5 {height: 180px;}
	.row {height: 160px;}
	.smallrow {background-image: url('../img/icon-arrowsmenu.png'); background-repeat: no-repeat; background-attachment: fixed; background-position: right; background-size: 10px 140px;}
}