/* Reset */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	font-size: 100%;
	vertical-align: baseline;
	border: 0;
	outline: 0;
	background: transparent;
	}


/*
.trackCard .cardFooter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px; 
}

.trackCard audio {
    border: none; 
    width: 100%;
    max-width: 200px; 
    height: 30px; 
    -webkit-appearance: none;
    appearance: none;
}*/
.trackCard {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 103px;
    overflow: hidden;
    border: 1px solid transparent;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.trackCard:hover {
    border-color: #fff;
    transform: scale(1.05);
    z-index: 2;
}

.trackCard img.avator {
    width: 100%;
    height: 38%;  /* One-third of the total height */
    object-fit: cover;  /* Ensure image is cropped appropriately */
}

.trackCard h4.trackNameSmall {
    margin: 10px 0 5px;
    font-size: 1.2em;  /* Adjust as needed */
    text-align: left;
/*    overflow: hidden;  /* Prevent the title from overflowing */
    text-overflow: ellipsis;  /* Show ellipsis if title is too long */
    white-space: nowrap;  /* Ensure title stays on a single line if needed */
}

.trackCard p.artistInfo {
    margin: 0;
    font-size: 1em;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.trackCard p.artistInfo a {
    text-decoration: none;
    color: #eee;
}

.trackCard p.artistInfo .bpm {
    font-weight: normal;
    font-size: 0.9em;
}

.trackCard .moreInfo {
    margin-top: 10px;
    display: block;
    text-align: right;
}

	
ol, ul {
	list-style: none;
	}

blockquote, q {
	quotes: none;
	}

:focus {
	outline: 0;
	}

table {
	border-collapse: collapse;
	border-spacing: 0;
	}
	
	
img {
	border: none;
	-ms-interpolation-mode: bicubic;
	}
	
a {
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	}
	
	
/* end reset */


/* remember to add ubuntu font */

body {
	font-family: 'Ubuntu', sans-serif;
	font-size: 14px;
	background: #bbb;
	color: #222;

	
position: relative;
 
 min-width:740px;        /* Suppose you want minimum width of 1000px */
   width: auto !important;  /* Firefox will set width as auto */
   
    width: 100%;
	max-width:1920px
	}
	

#menu ul {
  list-style-type: none;
  margin: 0 0 32px;
  padding: 0;
  
  text-align: center; 
}

#menu li {
  
display: inline-block;
padding: 4px;
margin: 0;
}

#menu li a {
 
  padding: 12px 8px 12px 8px;
	margin:  4px 8px;
  font-size: 14px;
  font-weight: bold;
  color: #222;
  letter-spacing: 1.6px;
  text-decoration: none;
  text-transform: uppercase;
	background: #ddd;
  
 
}

#menu li a.selected {
border-bottom: 4px solid #222;
}

#menu li a:hover {
border-bottom: 4px solid #222;
}

#sidebar {
position: absolute;
top: 0px;
background: #bbb;
width: 64px;
z-index: 20;
height: 100%;
overflow: hidden; 
box-shadow: inset -2px 0px 4px #0000003C;

}

#sidebar ul {
list-style-type: none;
  margin: 0;
  padding: 0;
  width: 64px;
  padding-top: 128px;
}

#sidebar li:hover {
background: #999;
}

#sidebar li a {
  display: block;
   padding: 16px;
  margin: 0px;
  
}

#footer {
padding: 64px 64px 48px 15%;
margin-top: 0;

position: relative;


bottom: 0px;
z-index: 10;
background: #ccc;
}

#footer div.footerSection{
float: left;
margin-right: 10%;
}

#footer div.footerSection img {
margin-left: 32px;
margin-bottom: 32px;
}

#footer ul {

list-style-type: none;
  margin: 0 16px 0 16px;
  padding: 0;
  padding-left: 0;
  

   text-align: left; 
   margin-bottom: 32px;
  }
  
#footer li {
display: block;
padding: 4px;
font-size: 11px;
padding-left: 0;
margin-left: 0;

}

#footer li a {
display: inline-block;
padding: 4px;
font-size: 11px;
font-weight: 400;
text-transform: none;
letter-spacing: .4px;
color: #222;
text-decoration: none;
}

#footer li a:hover {
text-decoration: underline;
}

#footer h4 {
font-size: 16px;
  font-weight: bold;
  color: #222;
  letter-spacing: .3px;
  margin-bottom: 24px;
}

#player {
padding: 32px 32px 48px 10%;
background: #333;
color: #eee;

}

#main {
padding: 16px 32px 64px 32px;
background: #1A2E36 ;
}


/* ---- Header layout ---- */
#header {
	background: #181818;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 24px;
	height: 64px;
	z-index: 30;
	position: relative;
	border-bottom: 1px solid #333;
}
.header-left {
	display: flex;
	align-items: center;
	gap: 20px;
}
.header-center {
	display: flex;
	align-items: center;
}
.header-right {
	display: flex;
	align-items: center;
	gap: 16px;
}

/* Logo */
#header a.ccMlogo {
	display: flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
}
#header a.ccMlogo:hover { opacity: 0.85; }
#header a.ccMlogo .logo-graphic {
	height: 36px;
	width: auto;
}
.logo-text {
	display: flex;
	flex-direction: column;
	line-height: 1.1;
	font-size: 20px;
	font-weight: 700;
	color: #669966;
	letter-spacing: 0.5px;
}
.logo-sub {
	display: block;
	font-size: 10px;
	font-weight: 400;
	color: #888;
	letter-spacing: 0.8px;
}

/* License buttons */
#license-buttons {
	display: flex;
	align-items: center;
	gap: 6px;
}
.license-btn {
	display: inline-flex;
	align-items: center;
	color: #fff;
	font-weight: bold;
	font-size: 12px;
	padding: 5px 10px;
	border-radius: 4px;
	cursor: help;
	letter-spacing: 0.5px;
	position: relative;
	transition: opacity 0.2s;
}
.license-ccm { background: #669966; }
.license-mp { background: #518BA1; }
.license-q {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(255,255,255,0.25);
	border-radius: 50%;
	width: 15px;
	height: 15px;
	font-size: 10px;
	margin-left: 4px;
}
.license-btn:hover { opacity: 0.9; }
.license-btn .license-tooltip {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	margin-top: 8px;
	width: 380px;
	padding: 14px 16px;
	background: #222;
	color: #ddd;
	font-size: 13px;
	font-weight: normal;
	line-height: 1.5;
	letter-spacing: normal;
	border-radius: 6px;
	box-shadow: 0 4px 16px rgba(0,0,0,0.5);
	z-index: 100;
	cursor: default;
}
.license-btn:hover .license-tooltip { display: block; }

/* Remix event */
#event a {
	text-decoration: none;
	font-weight: 700;
	font-size: 13px;
	color: #72A951;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	padding: 6px 16px;
	border: 1px solid #72A951;
	border-radius: 16px;
	transition: background 0.2s, color 0.2s;
}
#event a:hover {
	background: #72A951;
	color: #fff;
}

/* Search */
#header_search a {
	color: #ccc;
	text-decoration: none;
	background: #2a2a2a;
	padding: 6px 24px;
	font-size: 13px;
	letter-spacing: 0.8px;
	border-radius: 16px;
	border: 1px solid #444;
	transition: background 0.2s, border-color 0.2s;
}
#header_search a:hover {
	background: #333;
	border-color: #666;
	color: #fff;
}

/* Sign-in link (not signed in) */
a.header-signin {
	color: #ccc;
	text-decoration: none;
	font-size: 13px;
	font-weight: bold;
	letter-spacing: 0.5px;
	padding: 6px 16px;
	border: 1px solid #E77D42;
	border-radius: 16px;
	transition: background 0.2s, color 0.2s;
}
a.header-signin:hover {
	background: #E77D42;
	color: #fff;
}

/* Galaxy icon (signed in) */
#header a.galaxy-link {
	display: flex;
	align-items: center;
	text-decoration: none;
	transition: filter 0.3s, transform 0.3s;
	filter: drop-shadow(0 0 4px rgba(231, 125, 66, 0.4));
}
#header a.galaxy-link img {
	width: 44px;
	height: 44px;
}
#header a.galaxy-link:hover {
	filter: drop-shadow(0 0 14px rgba(231, 125, 66, 0.8)) drop-shadow(0 0 6px rgba(81, 139, 161, 0.5));
	transform: scale(1.12);
	opacity: 1;
}

	h3 {
font-size: 16px;
  font-weight: bold;
  color: #EEE;
  letter-spacing: 1.6px;
  text-decoration: none;
  text-transform: uppercase;
  margin-bottom: 0px;
  display: inline-block;
  margin-right: 32px;
}

a.buttonMain {

background: #191;
color: #fff;
padding: 8px;
text-transform: uppercase;
letter-spacing: 1.6px;
font-weight: bold;
 text-decoration: none;
margin: 0;
font-size: 14px;
border-radius: 4px;

} 

a.buttonMain:hover {
background: #161;
}

div.subsections {
margin-top: 3px;
padding-left: 3px;
}




div.cards {
text-align: center;
max-width: 1366px;
margin: auto;
}

div.trackCard {
text-align: left;
clear: both;
background: #111;
/* break on chrome: 
display: inline-block; */ 
padding: 8px 8px 0px 8px;
border-radius: 8px 8px 0px 0px;

}



div.trackCard img.avator {
float: left;
margin-right: 16px;
margin-bottom: 8px;
}

h4.trackNameSmall {
font-size: 14px;
margin-top: 16px;
margin-bottom: 4px;
color: #EEE;
}

p.artistInfo {
font-size: 14px;
color: #eee;
margin-bottom: 16px;
}

div.trackCard a {
color: #191;
text-decoration: none;
font-weight: 70;
}

div.trackCard a:hover {
color: #161;


}

div.cardFooter p.bpm {
font-weight: 700;

}

div.cardFooter span.bpm {
font-weight: 700;
position: relative;
color: #111;
/*left: 48px;
bottom: 14px;*/ 
}

div.cardFooter {
position: relative;
clear: both;
/*background: #414141;*/ 
background: #111; 
margin-left: -8px;
margin-right: -8px;
padding-right: 12px;
padding-left: 8px;
padding-top: 2px;
height: 44px;

}

div.cardFooter a.playcard {

float: left;
}



div.cardFooter a.moreInfo {

float: right;
}

div.cardFooter a:hover {
opacity: 0.5;
}





div.cardFooter img {
margin: 0;
}


div.subsections select {
float: right;
font-size: 14px;
padding: 8px 16px;
border: 0px solid #aaa;
width: 256px;
background: #ccc url(img/arrowdown.svg) 95% 50% no-repeat;

color: #222;
margin-top: 24px;
margin-right: 0px;
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
letter-spacing: .5px;
border-radius: 4px;
}


div.trackList {
background: #eee;
padding: 0px;
border-radius: 8px;
Margin-top: 8px;
position: relative;
height: 200px
}

div.trackListSection2 a, div.trackListSection3 a {
color: #191;
text-decoration: none;
font-weight: 700;
letter-spacing: .5px;
}

div.trackListSection2 a:hover {
color: #161;
}

div.trackList a.likeCount {

position: absolute;
left: 20px;
bottom: -8px;
}
div.trackList a.reviewCount {

position: absolute;
left: 80px;
bottom: -8px;
}

div.trackList a.buylicence {

background: #f80;
color: #fff;
padding: 8px;
text-transform: uppercase;
letter-spacing: 1.6px;
font-weight: bold;
 text-decoration: none;

font-size: 14px;
border-radius: 4px;
margin-right: 16px;
margin-bottom: 16px;
vertical-align: 100%;
display: inline;
} 

div.trackList a.buylicence:hover {

background: #d60;
}





div.trackList img.avator {
position: absolute;
left: 32px;
top: 32px;
height: 136px;
width: 136px;

}

div.trackList h4.trackName {
font-size: 20px;
font-weight: 700;
letter-spacing: .3px;

height: 24px;
overflow: hidden;
}

div.trackListSection1 {
position: absolute;
left: 196px;
top: 28px;
width: 56px;
margin-right: 16px;

}

div.trackListSection1 img {
margin-top: 12px;
}

div.trackListSection2 {
position: absolute;
left: 280px;
top: 28px;
width: 30%;
}

div.trackListSection1 a:hover, div.trackListSection3 a:hover  {
opacity: 0.5;
}


div.trackListSection3 {
position: absolute;
right: 24px;
top: 16px;
display: inline;
}

div.trackListSection4 {
position: absolute;
right: 24px;
bottom: 16px;

vertical-align: middle;
display: inline;
}

div.trackListSection4 a.moreinfo:hover  {
opacity: 0.5;
}

div.trackList div.trackTabs {

width: 30%;
height: 40px;
position: absolute;
left: 280px;
top: 148px;
z-index: 50;
overflow: hidden;
display: inline;
}

div.trackTabs a {
display: inline-block;
padding: 2px 4px;
background: #191;
color: #fff;
border-radius: 2px;
font-weight: 700;
text-decoration: none;
font-size: 10px;
text-transform: uppercase;
letter-spacing: .4px;
margin: 2px 2px;
}

div.trackTabs a:hover {
background: #161;
}



div.trackTabs img {
vertical-align:middle;
}

div.trackList p.artistInfo, div.trackpage_panel p.artistInfo {
color: #222;
margin-top: 4px;
}


div.trackList a.share {
display: inline;
}

div.trackList a.flag {
display: inline;
}



#navigation ul {
  list-style-type: none;
  margin: 64px 8px;
  padding: 0;
  
  text-align: center; 
}

#navigation a.prevPage, #navigation a.nextPage {
margin: 0 24px;
}


#navigation li {
  
display: inline-block;
padding: 0;
margin: 0;

}

#navigation ul img:hover {
opacity: 0.5;
}

#navigation li a {
 
  padding: 12px 14px;
	margin: 0 2px;
  font-size: 16px;
  font-weight: bold;
 border-radius: 8px;
  
  text-decoration: none;
  text-transform: uppercase;
	background: #fff;
	
  color: #222;
  width: 40px;
 
}

#navigation li a.selected {
background: #222;
  color: #eee;
}

#navigation li a:hover {
background: #222;
  color: #eee;
}




div.trackpage_panel {
background: #eee;
 border-radius: 8px;
 padding: 32px;
margin-bottom: 16px;
}


div.trackinfo a {
color: #191;
text-decoration: none;
font-weight: 700;
letter-spacing: .5px;
}

div.trackinfo a.reviewaction {
float: right;
margin-top: 0px;
margin-right: 16px;
}


div.trackpage_panel div.trackTabs {

margin-top: 24px;
}

div.trackinfo p.length {
color: #222;
margin-top: 4px;
}

div.trackinfo p.bpm {
color: #222;
margin-top: 4px;
font-weight: 700;
}

div.trackpage_panel div.trackinfo h4 a {
font-size: 24px;

}

div.trackpage_panel div.trackinfo {
padding-top: 16px;
}

div.trackinfo h4 a {
color: #222;
text-decoration: none;
font-size: 16px;
font-weight: 700;
letter-spacing: .3px;

height: 24px;
overflow: hidden;
}

div.trackinfo h4 a:hover {
color: #888;
}

div.trackpage_panel div.trackpage_trackplayer {
display: block;
margin-top: 32px;
}

div.trackpage_panel a.downloadTrack {
margin-top: 24px;
display: inline-block;
}


div.starlike_count {
display: inline-block;
text-align: center;
position: relative;
top: 16px;
}

div.starlike_count a {
display: block;
}

div.starlike_count a.likeCount {
color: #191;
text-decoration: none;
font-weight: 700;
letter-spacing: .5px;
position: relative;
top: -8px;
margin-bottom: 24px;
}


div.review_count {
display: inline-block;
text-align: center;
position: relative;
top: 16px;
margin-bottom: 24px;
}

div.review_count a {
display: block;
}

div.review_count a.likeCount {
color: #191;
text-decoration: none;
font-weight: 700;
letter-spacing: .5px;
position: relative;
top: -8px;
}

div.trackpage_actions {
margin-bottom: 48px;
width: 50%;

}

div.description {
margin-bottom: 64px;
}

div.description p {
width: 50%;
line-height: 24px;
font-size: 14px;
}

div.panel_aside {
background: #ddd;
width: 272px;
padding: 16px;
float: right;
margin-left: 16px;

}

div.trackpostdate {
text-align: right;
background: #eee;
margin: -16px -16px 20px -16px;
padding: 0 16px 16px 0;
font-size: 11px;
font-weight: 700;
color: #888;
letter-spacing: .6px;
}

div.panel_aside div.avator_aside {
text-align: center;
}


div.panel_aside img.avator {

height: 136px;
width: 136px;
margin-top: 16px;
}

div.panel_aside div.seperator {
border-bottom: 8px solid #eee;
margin: 32px -16px;

}

div.panel_aside div.edpick {
padding-bottom: 8px;
}

div.panel_aside div.edpick img {
float: left;
margin-right: 16px;
}

div.panel_aside div.edpick p {
font-size: 11px;
line-height: 16px;
}

div.panel_aside div.edpick p.author {
font-weight: 700;
text-align: right;
margin-right: 16px;
}


div.panel_aside div.licence_type {
padding-bottom: 20px;
}

div.panel_aside div.licence_type img {
float: left;
margin: 0 16px 16px 8px;


}

div.panel_aside div.licence_type p strong a {
padding: 16px 32px 16px 8px;
margin-top: 16px;
font-size: 24px;
position: relative;
top:16px;
color: #222;
text-decoration: none;
background:  url(img/arrowright.svg) 95% 50% no-repeat;
}


div.panel_aside a.buylicence {

background: #f80;
color: #fff;
padding: 8px;
text-transform: uppercase;
letter-spacing: 1.6px;
font-weight: bold;
 text-decoration: none;

font-size: 14px;
border-radius: 4px;
margin: 16px;

vertical-align: 100%;
display: inline;
} 

div.panel_aside div.buylicence {
text-align: center;
}


a.button_user {

background: #191;
color: #fff;
padding: 8px;
text-transform: uppercase;
letter-spacing: 1.6px;
font-weight: bold;
 text-decoration: none;
margin:4px 4px;
font-size: 14px;
border-radius: 4px;
display: inline-block;
} 

a.button_user:hover {
background: #161;
}



a.button_profile {

background: #aaa;
color: #222;
padding: 8px 16px;
text-transform: uppercase;
letter-spacing: .5px;
font-weight: bold;
 text-decoration: none;
margin: 4px 4px;
font-size: 14px;
border-radius: 4px;
display: inline-block;
} 

a.button_profile:hover {
background: #fff;
}

a.button_profile_selected {

background: #fff;
color: #222;
padding: 8px 16px;
text-transform: uppercase;
letter-spacing: .5px;
font-weight: bold;
 text-decoration: none;
margin: 4px 4px;
font-size: 14px;
border-radius: 4px;
display: inline-block;

} 





a.button_admin {

background: #d54;
color: #fff;
padding: 8px;
text-transform: uppercase;
letter-spacing: 1.6px;
font-weight: bold;
 text-decoration: none;
margin:4px 4px;
font-size: 14px;
border-radius: 4px;
display: inline-block;
} 

a.button_admin:hover {
background: #a32;
}



div.user_options {
padding: 4px;
text-align: center;

}
div.admin_options {
padding: 4px;
text-align: center;
}

div.trackpage_sample_usage {
display: inline-block;
width: 304px;
line-height: 24px;
text-align: left;
margin-right: 16px;
}

div.trackpage_sample_usage h5 {

padding-bottom: 8px;
border-bottom:  2px solid #222;
margin-bottom: 16px;
}


div.trackpage_sample_usage span {
color: #191;
text-decoration: none;
font-weight: 700;
letter-spacing: .5px;
}

div.trackpage_sample_usage span:hover {
color: #161;
}

div.trackpage_sample_usage ul {
padding-left: 24px;
}

div.trackpage_sample_usage li {

border-bottom: 1px solid #aaa;
margin-bottom: 8px;

}

div.trackpage_sample_usage a.artistlinkinfo {
color: #222;
text-decoration: none;
display: block;
background:  url(img/arrowright.svg) 95% 50% no-repeat;
padding-left: 4px;

}

div.trackpage_sample_usage a.artistlinkinfo:hover {
background: #ddd url(img/arrowright.svg) 95% 50% no-repeat;
}


div.trackpage_sources {
text-align: center;

width: 100%;
}









div.trackpage_panel div.track_review {
background: #ddd;
margin: 16px 32px 8px 32px;
}

div.trackpage_panel div.track_review_date {
background: #222;
color: #eee;
padding: 8px 32px;
text-align: right;
font-weight: 700;
font-size: 11px;
}

div.trackpage_panel div.track_review_avator {
float: left;
padding: 16px;
background: #ddd;
}

div.trackpage_panel div.track_review_avator img {
width: 48px;
height: 48px;
}

div.trackpage_panel p.review_credit {
margin: 16px 0 0 0;

}

div.trackpage_panel div.review_text {
padding: 32px 64px 32px 80px;
line-height: 24px;
font-size: 14px;
letter-spacing: .4px;
}


div.trackpage_panel p.review_credit a {
color: #191;
text-decoration: none;
font-weight: 700;
letter-spacing: .5px;
}

div.trackpage_panel p.review_credit a:hover {
color: #161;
}

div.trackpage_panel div.review_actions {

margin: 0 32px 0px 32px;
padding: 4px 16px;
text-align: right;
}





div.userpage_panel div.artistinfo {
padding: 32px 16px;
}


div.userpage_panel {
background: #eee;
 border-radius: 8px;
 padding: 32px;
margin-bottom: 16px;
}

div.userpage_panel h4  {
color: #222;
text-decoration: none;
font-size: 24px;
font-weight: 700;
letter-spacing: .3px;


overflow: hidden;
margin-bottom: 24px;
}

div.panel_aside div.featuredtrack img {
float: left;
margin: 0 16px 16px 8px;


}

div.featuredtrack ul {
padding-left: 32px;
padding-top: 16px;
}

div.featuredtrack li {


margin-bottom: 8px;


}

div.featuredtrack a.featuredtrackinfo {
color: #222;
text-decoration: none;
display: block;
background:  url(img/arrowright.svg) 95% 50% no-repeat;
padding-left: 8px;
line-height: 20px;

}

div.featuredtrack a.featuredtrackinfo:hover {
background: #ccc url(img/arrowright.svg) 95% 50% no-repeat;
}


div.featuredtrack span {
color: #191;
text-decoration: none;
font-weight: 700;
letter-spacing: .5px;
}

div.featuredtrack span:hover {
color: #161;
}


div.userpage_panel_options {

 border-radius: 8px;
 padding: 4px;
margin-bottom: 16px;
}

div.userinfo {
background: #ddd;
padding: 32px;
line-height: 24px;
margin-bottom: 8px;
letter-spacing: .9px;
}





div.userinfo a {
color: #191;
text-decoration: none;
font-weight: 700;

}

div.userinfo a:hover {
color: #161;
}


div.userinfo p.userinfotext1 {
font-size: 12px;
color: #888;
}

div.userinfo p.userinfotext2 {
font-size: 16px;
color: #222;
}




@media only screen and (max-width: 880px) {
#event {
	
	right: 25%;
	}
	
#header_search {

	right: 28px;
	top: 96px;
	}
	
	#header a.userlogin {
	top: 24px;
	}	

#header a.upload {
	top: 24px;
	}
	
}

@media only screen and (max-width: 820px) {
div.trackList a.share {
display: none;
}

div.trackList a.flag {
display: none;
}
}

@media only screen and (max-width: 820px) {
div.trackList a.buylicence {
	
	display: none;

}
}

@media only screen and (max-width: 820px) {
div.trackList a.cclicence {
	
	display: none;

}
}