/*-----------------common colors---------------------------------------------------------------------*/
/*red color:#be1e2d; */
/* grey text color: #555; */
/*beige rgba(238,233,226,.85) */

/*--------------! normalize.css v1.1.2 | MIT License | git.io/normalize----------------------------- */

/*Correct `block` display not defined in IE 6/7/8/9 and Firefox 3.*/
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section,
summary {display: block}

/*Correct `inline-block` display not defined in IE 6/7/8/9 and Firefox 3.*/
audio, canvas, video {display: inline-block; *display: inline; *zoom: 1}

/*Prevent modern browsers from displaying `audio` without controls.Remove excess height in iOS 5 devices.*/
audio:not([controls]) {display: none; height: 0}

/*Address `outline` inconsistency between Chrome and other browsers.*/
a:focus {outline:none !important}

/*Improve readability when focused and also mouse hovered in all browsers.*/
a:active, a:hover {outline: 0 !important}

/*----------------------listen to the songs button--------------------------------*/

#listen {
	width:190px;
	height:44px;
	color:#fff;
	line-height:44px;
	background-color:#be1e2d;
	text-align:center;
	margin:36px 0 0 0;
	cursor:pointer;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 6px; /* future proofing */
	-khtml-border-radius: 6px; /* for old Konqueror browsers */
}


@media all and (min-width:1360px) {
	#sideDisabler {
		display:block;
		position:absolute;
		width:190px;
		height:320px;
		top:136px;
		left:10px;
		background-color:rgba(255,255,255,0.7);
		margin:0;
		padding:0;
		z-index:10000;
	}	
}
@media all and (max-width:859px) and (max-height:719px) and (orientation: landscape) {
	#disabler {
		display:block;
		position:fixed;
		top:50%;
		left:0;
		width:112px;
		height:218px;
		margin:-100px 0 0 0;
		background-color:rgba(255,255,255,0.7);
		z-index:10000 !important;
	}
	#sideDisabler {
		display:block;
		position:absolute;
		width:190px;
		height:320px;
		top:136px;
		left:10px;
		background-color:rgba(255,255,255,0.7);
		margin:0;
		padding:0;
		z-index:10000;
	}
}
@media all and (max-width:859px) and (max-height:719px) and (orientation: portrait) {	
	#disabler {
		display:none;
		position:absolute;
		bottom:58px;
		left:50%;
		width:288px;
		height:64px;
		margin:0 0 0 -144px;
		background-color:orange;
		z-index:3000;
	}
	#sideDisabler {
		display:none;
	}
}
@media all and (max-width:859px) and (min-height:720px) {
	#disabler {
		display:block;
		position:fixed;
		bottom:58px;
		left:50%;
		width:288px;
		height:64px;
		margin:0 0 0 -144px;
		background-color:rgba(255,255,255,0.7);
		z-index:3000;
	}
	#sideDisabler {
		display:none;
	}
}
@media all and (min-width:860px) {
	#disabler {
		display:block;
		position:absolute;
		top:24px;
		right:50px;
		width:288px;
		height:64px;
		background-color:rgba(255,255,255,0.7);
		z-index:3000;
	}
}
/*@media all and (max-width:859px) and (max-height:540px)  {
	#moveBox {
		height:24px;
		margin: 5px 0 12px 40px;
		padding:0;
		opacity:.6;
		z-index:150;
		background-color:blue;
	}	
}*/
@media all and (max-width:639px) {
	#moveBox {
		height:24px;
		margin: 4px 0 0 50px;
		padding:0;
		opacity:.6;
		z-index:5000;
		/*background-color:blue;*/
	}	
}

@media all and (min-width:640px) and (max-width:859px) {
	#moveBox {
		height:24px;
		margin:-51px 0 0 120px;
		padding:0;
		opacity:.6;
		z-index:50;
		/*background-color:orange;*/
	}	
}

@media all and (min-width:860px) {
	#moveBox {
		height:24px;
		margin:-1rem 0 12px 0;
		padding:0;
		opacity:.6;
		z-index:50;
		/*background-color:yellow;*/
	}	
}

#moveBox p {
	font-size:1em !important;
	/*color:#b78e5a;*/
	color:#925405;
	position:relative;
	top:-5px;
	left:0;
	margin:0;
	padding:0;
	z-index:500;
}	

#movingBar {
	width:100px;
	height:6px;
	position:relative;
	top:-14px;
	left:96px;
	margin:0;
	padding:0;
	background-color:#925405;
	animation: animatedBar ease-in-out .65s;
    -moz-animation: animatedBar ease-in-out .65s;
    -webkit-animation: animatedBar ease-in-out .65s;
    -ms-animation: animatedBar ease-in-out .65s;
    -o-animation: animatedBar ease-in-out .65s;
	animation-iteration-count: infinite;
	-moz-animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
	-ms-animation-iteration-count: infinite;
	-o-animation-iteration-count: infinite;
}
@keyframes animatedBar {
    0% { transform: translate(260px, 0px); opacity: 0 }
    100% { transform: translate(0px, 0px); opacity: 0.35 }
}

/*----------preloading images--------------------------------------------------------*/
div#preload { display: none; }

body {
    font-family:Arial;
    color:#000;
    background-color: #888;
    line-height:1.3em;
	text-shadow:none;
	margin:0;
	padding:0;
	/*font-size:16px;*/
    text-align: center; /* !!! */
}
@media all and (max-width: 360px) {
	body { font-size:15px}
}
@media all and (min-width: 361px) {
	body { font-size:16px}
}

/*1. Remove border when inside `a` element in IE 6/7/8/9 and Firefox 3. 2. Improve image quality when scaled in IE 7.*/
img {
    border: 0; /* 1 */
    -ms-interpolation-mode: bicubic; /* 2 */
}
/*Remove most spacing between table cells.*/
table {border-collapse: collapse; border-spacing: 0}


/*----------------------------------header----------------------------------------*/

.sig {
	font-size:.75em;
	float:right;
	margin:-12px 0 0 0;
	padding:0 24px 0 0;
	font-style:italic;
	font-weight:bold;
	color:#be1e2d;
	text-decoration:none;
}

@media all and (max-width:1599px) {
	#container {
		position:absolute;
		top:0;
		left:0;
		margin: 0;
		padding:0;
		text-align: left;
		height:100%;
		width: 100%;
		background-color:#fff;
		overflow:hidden;
	}
}
@media all and (min-width:1600px) {
	#container {
		position:absolute;
		top:0;
		left:50%;
		display:block;
		margin: 0 0 0 -800px;
		padding:0;
		text-align:left;
		height:100%;
		width: 1600px;
		background-color:#fff;
		overflow:hidden;
	}
}
#topBox {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	background-color:#fff;
	z-index:10;
}
@media all and (max-width:859px) and (max-height:540px) and (orientation: landscape) {
	#topBox {height:45px; width:112px}
}
@media all and (max-width:859px) and (max-height:540px) and (orientation: portrait) {
	#topBox {height:116px}
}
@media all and (max-width:859px) and (min-height:541px) {
	#topBox {height:116px}
}
@media all and (min-width:860px) {
	#topBox {height:112px}
}

@media all and (max-width:859px) and (max-height:540px) and (orientation: landscape) {
	#infoBtn {display:none}
}
@media all and (max-width:859px) and (max-height:540px) and (orientation: portrait) {
	#infoBtn {
		position:absolute;
		top:52px;
		left:0;
		width:100%;
		height:68px;
		color:#000;
		cursor:pointer;
		margin:0;
		padding:0;
		line-height:1.2em;
	}
	#infoBtn:hover {color:#be1e2d;}
}
@media all and (max-width:859px) and (min-height:541px) {
	#infoBtn {
		position:absolute;
		top:52px;
		left:0;
		width:100%;
		height:68px;
		color:#000;
		cursor:pointer;
		margin:0;
		padding:0;
		line-height:1.2em;
	}
	#infoBtn:hover {color:#be1e2d;}
}
@media all and (min-width:860px) and (max-width:1359px) {
	#infoBtn {
		position:absolute;
		top:0;
		left:209px;
		width:320px;
		height:112px;
		color:#000;
		cursor:pointer;
	}
	#infoBtn:hover {color:#be1e2d;}
}
@media all and (min-width:1360px) {
	#infoBtn {
		position:absolute;
		top:0;
		left:225px;
		width:320px;
		height:112px;
		color:#000;
		cursor:pointer;
	}
	#infoBtn:hover {color:#be1e2d;}
}
.infoBtnSelected {color:#be1e2d !important}
@media all and (max-width:600px) {
	#infoBtn p {
		position:absolute;
		top:0;
		left:0;
		margin:1rem 0 0 50px;
		padding:0 24px 4px 0;
		line-height:1.3em;
		background-color:#fff;
		z-index:5000 !important;
		font-size:1.35rem;
		
	}		
}
@media all and (min-width:601px) and (max-width:859px) {
	#infoBtn p {
		margin:.5rem 0 0 0;
		padding:8px 50px 0 50px;
		line-height:.65rem;
		font-size:1.35rem;
		/*color:red;*/
	}		
}
@media all and (min-width:860px) {
	#infoBtn p {
		margin:30px 0 0 16px;
		padding:0;
		line-height:1.4em;
		font-size:1.35rem;
	}
}
@media all and (max-width:859px) {
	#infoDown {
		position:absolute;
		width:44px;
		height:24px;
		bottom:-19px;
		left:50%;
		margin:0 0 0 -22px;
		overflow:hidden;
	}
	#infoDown2 {
		position:absolute;
		width:44px;
		height:24px;
		bottom:4px;
		left:50%;
		margin:0 0 0 -22px;
		overflow:hidden;
	}
}
@media all and (min-width:860px) {
	#infoDown {
		position:absolute;
		width:44px;
		height:24px;
		bottom:-23px;
		left:50%;
		margin:0 0 0 -22px;
		overflow:hidden;
	}
	#infoDown2 {
		position:absolute;
		width:44px;
		height:32px;
		bottom:0;
		left:50%;
		margin:0 0 0 -22px;
		overflow:hidden;
	}
}

#infoDownTriangle {
	position:absolute;
	width:44px;
	height:24px;
	top:0;
	left:0;
	margin:0;
	background-image:url(../svg/btnSprite.svg);		
	background-repeat:no-repeat;
	background-size:1000px 300px;
	background-position:-440px -5px;
}
#infoDownTriangle2 {
	position:absolute;
	width:44px;
	height:24px;
	top:32px;
	left:0;
	margin:0;
	background-image:url(../svg/btnSprite.svg);		
	background-repeat:no-repeat;
	background-size:1000px 300px;
	background-position:-830px -5px;
}

@media all and (max-width:859px) {
	#songDown {display:none}
	#donateDown {display:none}
	#shareDown {display:none}
}
@media all and (min-width:860px) {
	#songDown {
		display:block;
		position:absolute;
		width:44px;
		height:24px;
		top:112px;
		/*right:314px;*/
		right:266px;
		margin:0;
		overflow:hidden;
		z-index:20;
	}
	#donateDown {
		display:block;
		position:absolute;
		width:44px;
		height:24px;
		top:112px;
		/*right:218px;*/
		right:170px;
		margin:0;
		overflow:hidden;
		z-index:20;
	}
	#shareDown {
		display:block;
		position:absolute;
		width:44px;
		height:24px;
		top:112px;
		/*right:122px;*/
		right:74px;
		margin:0;
		overflow:hidden;
		z-index:20;
	}
}

#songDownTriangle, #donateDownTriangle, #shareDownTriangle {
	position:absolute;
	width:44px;
	height:24px;
	top:-24px;
	left:0;
	margin:0;
	background-image:url(../svg/btnSprite.svg);		
	background-repeat:no-repeat;
	background-size:1000px 300px;
	background-position:-440px -5px;
}

@media all and (max-width:859px) and (max-height:540px) and (orientation: landscape) {
	#songUp {display:none}
	#donateUp {display:none}
	#shareUp {display:none}
}
@media all and (max-width:859px) and (max-height:540px) and (orientation: portrait) {
	#songUp {
		display:block;
		position:absolute;
		width:44px;
		height:24px;
		/*bottom:177px;*/
		bottom:135px;
		left:50%;
		margin:0 0 0 -118px;
		overflow:hidden;
		/*background-color:orange;*/
		z-index:20;
	}
	#donateUp {
		display:block;
		position:absolute;
		width:44px;
		height:24px;
		/*bottom:177px;*/
		bottom:135px;
		left:50%;
		margin:0 0 0 -22px;
		overflow:hidden;
		/*background-color:orange;*/
		z-index:20;
	}
	#shareUp {
		display:block;
		position:absolute;
		width:44px;
		height:24px;
		/*bottom:177px;*/
		bottom:135px;
		left:50%;
		margin:0 0 0 74px;
		overflow:hidden;
		/*background-color:orange;*/
		z-index:20;
	}
}
@media all and (max-width:859px) and (min-height:541px) and (max-height:687px) {
	#songUp {
		display:block;
		position:absolute;
		width:44px;
		height:24px;
		/*bottom:177px;*/
		bottom:135px;
		left:50%;
		margin:0 0 0 -118px;
		overflow:hidden;
		/*background-color:orange;*/
		z-index:20;
	}
	#donateUp {
		display:block;
		position:absolute;
		width:44px;
		height:24px;
		/*bottom:177px;*/
		bottom:135px;
		left:50%;
		margin:0 0 0 -22px;
		overflow:hidden;
		/*background-color:orange;*/
		z-index:20;
	}
	#shareUp {
		display:block;
		position:absolute;
		width:44px;
		height:24px;
		/*bottom:177px;*/
		bottom:135px;
		left:50%;
		margin:0 0 0 74px;
		overflow:hidden;
		/*background-color:orange;*/
		z-index:20;
	}
}
@media all and (max-width:859px) and (min-height:688px) {
	#songUp {
		display:block;
		position:absolute;
		width:44px;
		height:24px;
		/*bottom:177px;*/
		bottom:135px;
		left:50%;
		margin:0 0 0 -118px;
		overflow:hidden;
		/*background-color:orange;*/
		z-index:500;
	}
	#donateUp {
		display:block;
		position:absolute;
		width:44px;
		height:24px;
		/*bottom:177px;*/
		bottom:135px;
		left:50%;
		margin:0 0 0 -22px;
		overflow:hidden;
		/*background-color:orange;*/
		z-index:500;
	}
	#shareUp {
		display:block;
		position:absolute;
		width:44px;
		height:24px;
		/*bottom:177px;*/
		bottom:135px;
		left:50%;
		margin:0 0 0 74px;
		overflow:hidden;
		/*background-color:orange;*/
		z-index:500;
	}
}
@media all and (min-width:860px) {
	#songUp {display:none}
	#donateUp {display:none}
	#shareUp {display:none}
}


#songUpTriangle, #donateUpTriangle, #shareUpTriangle {
	position:absolute;
	width:44px;
	height:24px;
	top:24px;
	left:0;
	margin:0;
	background-image:url(../svg/btnSprite.svg);		
	background-repeat:no-repeat;
	background-size:1000px 300px;
	background-position:-500px 0;
	/*background-color:orange;*/
}



@media all and (max-width:859px) {
	#hamburgerBtn {
		position:absolute;
		width:72px;
		height:60px;
		top:0;
		right:6px;
		margin:0;
		padding:0;
		background-image:url(../svg/btnSprite.svg);		
		background-repeat:no-repeat;
		background-size:1000px 300px;
		background-position:-340px 12px;
		cursor:pointer;
	}
	#hamburgerBtn:hover {background-position:-340px -68px}		
}
@media all and (min-width:860px) {
	#hamburgerBtn {
		position:absolute;
		width:72px;
		height:60px;
		top:16px;
		right:6px;
		margin:0;
		padding:0;
		background-image:url(../svg/btnSprite.svg);		
		background-repeat:no-repeat;
		background-size:1000px 300px;
		background-position:-526px -148px;
		cursor:pointer;
	}
	#hamburgerBtn:hover {background-position:-526px -228px;}
}

@media all and (max-width:859px) and (max-height:719px) {
	#infoBox {bottom:0}
}
@media all and (max-width:859px) and (min-height:720px) {
	#infoBox {bottom:140px}
}

.charity {
	font-size:1rem;
	line-height:1.8rem !important;
	}

@media all and (max-width:859px) and (max-height:540px) and (orientation: landscape) {
	#shadeBox { width:100%; background-color:rgba(0,0,0,0.5)}
	#infoBox {
		line-height:1.6em;
		position:absolute;
		top:0;
		left:112px;
		right:0;
		background-color:rgba(238,233,226,0.92);
		border:1px solid #b7a083;
		z-index:9;
		background-image:url(../images/womensouppic.jpg);
		background-repeat:no-repeat;
		background-size:cover;
		background-position:65% bottom;
	}
	#contentLeft {
		height:80%;
		width:68%;
		position:relative;
		top:14px;
		left:50px;
		overflow-y:auto;
		color:#fff;
		font-weight:normal;
		/*background-color:orange;*/
	}
	#contentLeft ul {
		margin:0 0 24px 0;
		padding:0;
	}
	#contentLeft ul li {
		margin:0 0 .8rem 16px;
		padding:0 0 0 0;
		list-style-position:outside;
		font-size:1.1rem;
	}
	/*.charity {display:none !important}*/
}
@media all and (max-width:859px) and (max-height:540px) and (orientation: portrait) {
	#shadeBox { width:100%; background-color:rgba(0,0,0,0.5)}
	#infoBox {
		line-height:1.6em;
		position:absolute;
		top:116px;
		left:0;
		right:0;
		background-color:rgba(238,233,226,0.92);
		border:1px solid #b7a083;
		z-index:9;
		background-image:url(../images/womensouppic.jpg);
		background-repeat:no-repeat;
		background-size:cover;
		background-position:65% bottom;
	}
	#contentLeft {
		height:80%;
		width:80%;
		position:relative;
		top:35px;
		left:50px;
		overflow-y:auto;
		color:#fff;
		font-weight:normal;
	}
	#contentLeft ul {
		margin:0 0 1.8rem 0;
		padding:0;
	}
	#contentLeft ul li {
		margin:0 0 .8rem 1.15rem;
		padding:0 0 0 0;
		list-style-position:outside;
		font-size:1.2rem;
	}
	#infoBox p {
		line-height:1.4em;
		margin:4px 0 0 0 !important;
		padding:0;
	}
	.charity {display:block !important}
}

@media all and (max-width:859px) and (min-height:541px) {
	#shadeBox { width:100%; background-color:rgba(0,0,0,0.5)}
	#infoBox {
		line-height:1.6em;
		position:absolute;
		top:116px;
		left:0;
		right:0;
		background-color:rgba(238,233,226,0.92);
		border:1px solid #b7a083;
		z-index:9;
		background-image:url(../images/womensouppic.jpg);
		background-repeat:no-repeat;
		background-size:cover;
		background-position:80% bottom;
	}
	#contentLeft {
		height:80%;
		width:380px;
		position:relative;
		top:35px;
		left:50px;
		overflow-y:auto;
		color:#fff;
		font-weight:normal;
	}
	#contentLeft ul {
		margin:0 0 1.8rem 0;
		padding:0;
	}
	#contentLeft ul li {
		margin:0 0 .8rem 1.15rem;
		padding:0 0 0 0;
		list-style-position:outside;
		font-size:1.2rem;
	}
	#infoBox p {
		line-height:1.4em;
		margin:4px 0 0 0 !important;
		padding:0;
	}
	.charity {display:block !important}
}



@media all and (min-width:860px) and (max-width:1359px) {
	#shadeBox { width:860px}
	#infoBox {
		line-height:1.6em;
		position:absolute;
		top:112px;
		left:0;
		right:0;
		bottom:0;
		background-color:rgba(238,233,226,0.92);
		border:1px solid #b7a083;
		z-index:9;
		background-image:url(../images/womensouppic.jpg);
		background-repeat:no-repeat;
		background-size:cover;
		background-position:right bottom;
	}
	#contentLeft {
		height:80%;
		position:relative;
		top:35px;
		left:224px;
		width:380px;
		overflow-y:auto;
		color:#fff;
		font-weight:normal;
		/*background-color:rgba(0,0,0,0.65);*/
	}
	#contentLeft ul {
		margin:0 0 1.8rem 0;
		padding:0;
	}
	#contentLeft ul li {
		margin: .5rem 0 .8rem 1.15rem;
		padding:0 0 0 0;
		list-style-position:outside;
		font-size:1.2rem;
	}
	#infoBox p {
		line-height:1.4em;
		margin:10px 0 16px 0 !important;
		padding:0;
	}
	.charity {display:block !important}
}
#shadeBox {
	position:absolute;
	top:0;
	left:0;
	/*background-color:orange;*/
	/*width:480px;*/
	height:100%;
	background-image:url(../images/shader.png);
	background-repeat:no-repeat;
	background-size:100% 100%;
	background-position:left top;
}
@media all and (min-width:1360px) {
	#shadeBox { width:640px}
	#infoBox {
		line-height:1.6em;
		position:absolute;
		top:112px;
		left:200px;
		right:0;
		bottom:0;
		background-color:rgba(238,233,226,0.92);
		border:1px solid #b7a083;
		z-index:9;
		background-image:url(../images/womensouppic.jpg);
		background-repeat:no-repeat;
		background-size:cover;
		background-position:right bottom;
	}
	#contentLeft {
		height:80%;
		position:absolute;
		top:35px;
		left:40px;
		width:420px;
		overflow-y:auto;
		color:#fff;
		font-weight:normal;
	}
	#contentLeft ul {
		margin:0 0 1.8rem 0;
		padding:0;
	}
	#contentLeft ul li {
		margin: .5rem 0 .8rem 1.15rem;
		padding:0 0 0 0;
		list-style-position:outside;
		font-size:1.2rem;
	}
	#infoBox p {
		line-height:1.4em;
		margin:10px 0 16px 0 !important;
		padding:0;
	}
	.charity {display:block !important}
}
@media all and (max-width:859px) {
	#contentRight {
		display:none;
	}
	.inspirationBox {
		display:none;
	}
}
@media all and (min-width:860px) and (max-width:1023px) {
	#contentRight {
		display:none;
	}
	.inspirationBox {
		display:none;
	}
}
@media all and (min-width:1024px) and (max-width:1359px) {
	#contentRight {
		display:block;
		max-height:80%;
		overflow-y:auto;
		width:360px;
		position:absolute;
		/*top:63px;*/
		top:35px;
		left:620px;
		overflow-y:auto;
	}
	.inspirationBox {
		display:block;
		max-height:80%;
		overflow-y:auto;
		width:360px;
		position:absolute;
		top:54px;
		left:620px;
		overflow-y:auto;
	}
}
@media all and (min-width:1360px) {
	#contentRight {
		display:block;
		max-height:80%;
		overflow-y:auto;
		width:400px;
		position:absolute;
		/*top:63px;*/
		top:35px;
		left:420px;
		overflow-y:auto;
	}
	.inspirationBox {
		display:block;
		max-height:80%;
		overflow-y:auto;
		width:400px;
		position:absolute;
		top:66px;
		left:420px;
		overflow-y:auto;
	}	
}



h3 { 
	font-size:1em;
	font-weight:bold;
	margin:0 0 8px 0;
	padding:0;
	}

@media all and (max-width:859px) {
	#topBtnBar {display:none}
}
@media all and (min-width:860px) {
	#topBtnBar {
		display:block;
		position:absolute;
		top:24px;
		/*right:98px;*/
		right:50px;
		width:288px;
		height:64px;
		/*background-color:orange;*/
	}
}

#topSongInfoBtn {
	display:block;
	float:left;
	width:96px;
	height:64px;
	/*background-color:blue;*/
	background-image:url(../svg/btnSprite.svg);		
	background-repeat:no-repeat;
	background-size:1000px 300px;
	background-position:-192px 0;
	cursor:pointer;
	line-height:112px;
	text-align:center;
}
#topSongInfoBtn:hover {background-position:-192px -80px}
.topSongInfoBtnSelected {background-position:-192px -80px !important}

#topDonateBtn {
	display:block;
	float:left;
	width:96px;
	height:64px;
	/*background-color:green;*/
	background-image:url(../svg/btnSprite.svg);		
	background-repeat:no-repeat;
	background-size:1000px 300px;
	background-position:-739px 0;
	cursor:pointer;
	line-height:112px;
	text-align:center;
}
#topDonateBtn:hover {background-position:-739px -80px}
.topDonateBtnSelected {background-position:-739px -80px !important}

#topShareBtn {
	display:block;
	float:left;
	width:96px;
	height:64px;
	/*background-color:red;*/
	background-image:url(../svg/btnSprite.svg);		
	background-repeat:no-repeat;
	background-size:1000px 300px;
	background-position:-872px 0;
	cursor:pointer;
	line-height:112px;
	text-align:center;
}
#topShareBtn:hover {background-position:-872px -80px}
.topShareBtnSelected {background-position:-872px -80px !important}

@media all and (max-width:859px) and (max-height:540px) and (orientation: landscape) {
	#bottomBtnBar {
		display:none;
		position:absolute;
		/*bottom:120px;*/
		bottom:58px;
		left:50%;
		width:288px;
		height:64px;
		margin:0 0 0 -144px;
	}
}
@media all and (max-width:859px) and (max-height:540px) and (orientation: portrait) {
	#bottomBtnBar {
		display:block;
		position:absolute;
		bottom:58px;
		left:50%;
		width:288px;
		height:64px;
		margin:0 0 0 -144px;
	}
}
@media all and (max-width:859px) and (min-height:541px) {
	#bottomBtnBar {
		display:block;
		position:absolute;
		bottom:58px;
		left:50%;
		width:288px;
		height:64px;
		margin:0 0 0 -144px;
	}
}
@media all and (min-width:860px) {
	#bottomBtnBar {display:none}
}

#bottomSongInfoBtn {
	display:block;
	float:left;
	width:96px;
	height:64px;
	/*background-color:blue;*/
	background-image:url(../svg/btnSprite.svg);		
	background-repeat:no-repeat;
	background-size:1000px 300px;
	background-position:-192px 0;
	cursor:pointer;
	line-height:112px;
	text-align:center;
}
#bottomSongInfoBtn:hover {background-position:-192px -80px}
.bottomSongInfoBtnSelected {background-position:-192px -80px !important}

#bottomDonateBtn {
	display:block;
	float:left;
	width:96px;
	height:64px;
	/*background-color:green;*/
	background-image:url(../svg/btnSprite.svg);		
	background-repeat:no-repeat;
	background-size:1000px 300px;
	background-position:-739px 0;
	cursor:pointer;
	line-height:112px;
	text-align:center;
}
#bottomDonateBtn:hover {background-position:-739px -80px}
.bottomDonateBtnSelected {background-position:-739px -80px !important}

#bottomShareBtn {
	display:block;
	float:left;
	width:96px;
	height:64px;
	/*background-color:red;*/
	background-image:url(../svg/btnSprite.svg);		
	background-repeat:no-repeat;
	background-size:1000px 300px;
	background-position:-872px 0;
	cursor:pointer;
	line-height:112px;
	text-align:center;
}
#bottomShareBtn:hover {background-position:-872px -80px}
.bottomShareBtnSelected {background-position:-872px -80px !important}




@media all and (max-width:859px) and (max-height:540px) and (orientation: landscape) {
	.sideKO {
		display:block;
		position:absolute;
		top:0;
		left:0;
		width:112px;
		bottom:0;
		z-index:10;
		background-color:#fff;
		
	}
	#sideBtnBar {
		display:block;
		position:absolute;
		top:50%;
		left:0;
		width:136px;
		height:218px;
		margin:-100px 0 0 0;
		z-index:11;
	}
	.sideSongInfoBtn {
		position:relative;
		top:0;
		left:0;
		width:136px;
		height:62px;
		margin:0 0 20px 0;
		padding:0;
		line-height:100px;
		text-indent:21px;
		background-image:url(../svg/sideBtnSprite.svg);
		background-repeat:no-repeat;
		background-size:440px 840px;
		background-position:0 -20px;
		cursor:pointer;
	}
	.sideSongInfoBtn:hover {background-position:0 -100px}
	.infoSelected {background-position:0 -180px !important}
	
	.sideDonateBtn {
		position:relative;
		top:0;
		left:0;
		width:136px;
		height:58px;
		margin:0 0 20px 0;
		padding:0;
		line-height:94px;
		text-indent:30px;
		background-image:url(../svg/sideBtnSprite.svg);
		background-repeat:no-repeat;
		background-size:440px 840px;
		background-position:0 -262px;
		cursor:pointer;
	}
	.sideDonateBtn:hover {background-position:0 -342px}
	.donateSelected {background-position:0 -422px !important}
	
	.sideShareBtn {
		position:relative;
		top:0;
		left:0;
		width:136px;
		height:58px;
		margin:0;
		padding:0;
		line-height:94px;
		text-indent:34px;
		background-image:url(../svg/sideBtnSprite.svg);
		background-repeat:no-repeat;
		background-size:440px 840px;
		background-position:0 -502px;
		cursor:pointer;
	}
	.sideShareBtn:hover {background-position:0 -582px}
	.shareSelected {background-position:0 -662px !important}
	
	.sideLogo {
		position:absolute;
		top:0;
		left:0;
		width:112px;
		height:45px;
		background-image:url(../svg/btnSprite.svg);
		background-repeat:no-repeat;
		background-size:1000px 300px;
		background-position:0 -90px;
	}
}
@media all and (min-width:860px) {
	#sideBtnBar {display:none}
	.sideKO {display:none}
}




/*--------------------------------flipper animation------------------------------*/

@media all and (max-width:859px) and (max-height:540px) and (orientation: landscape) {
	#dotBox { /*width and marginLeft set in js*/
		display:block;
		opacity:1;
		height:10px;
		position:absolute;
		/*bottom:210px;*/
		bottom:10px;
		left:50%;
		/*background-color:orange;*/
		z-index:1;
	}
}
@media all and (max-width:859px) and (max-height:540px) and (orientation: portrait) {
	#dotBox { /*width and marginLeft set in js*/
		display:block;
		opacity:1;
		height:10px;
		position:absolute;
		/*bottom:210px;*/
		bottom:152px;
		left:50%;
		/*background-color:orange;*/
		z-index:1;
	}
}
@media all and (max-width:859px) and (min-height:541px) {
	#dotBox { /*width and marginLeft set in js*/
		display:block;
		opacity:1;
		height:10px;
		position:absolute;
		/*bottom:210px;*/
		bottom:152px;
		left:50%;
		/*background-color:orange;*/
		z-index:1;
	}
}
@media all and (min-width:860px) {
	#dotBox { /*width and marginLeft set in js*/
		display:block;
		opacity:1;
		height:10px;
		position:absolute;
		bottom:16px;
		left:50%;
		/*background-color:orange;*/
		z-index:100;
	}
}

.dot {
	display:block;
	width:6px;
	height:6px;
	float:left;
	margin:0 10px 0 0;
	background-color:transparent;
	border:2px solid #aaa;
	opacity:1;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 6px; /* future proofing */
	-khtml-border-radius: 6px; /* for old Konqueror browsers */
	/*cursor:pointer;*/
}

.currentDot {
	display:block;
	background-color:#aaa !important;
	border:2px solid #aaa !important;
	opacity:1 !important;
	}

@keyframes animatedBackground {
    0% { transform: translate(-200px, 0px); opacity: 0 }
    100% { transform: translate(0px, 0px); opacity: 1 }
}
@-moz-keyframes animatedBackground {
    0% { transform: translate(-200px, 0px); opacity: 0 }
    100% { transform: translate(0px, 0px); opacity: 1 }
}
@-webkit-keyframes animatedBackground {
    0% { transform: translate(-200px, 0px); opacity: 0 }
    100% { transform: translate(0px, 0px); opacity: 1 }
}
@-ms-keyframes animatedBackground {
    0% { transform: translate(-200px, 0px); opacity: 0 }
    100% { transform: translate(0px, 0px); opacity: 1 }
}
@-o-keyframes animatedBackground {
    0% { transform: translate(-200px, 0px); opacity: 0 }
    100% { transform: translate(0px, 0px); opacity: 1 }
}

@keyframes animatedBackgroundPrev {
    0% { transform: translate(200px, 0px); opacity: 0 }
    100% { transform: translate(0px, 0px); opacity: 1 }
}
@-moz-keyframes animatedBackgroundPrev {
    0% { transform: translate(200px, 0px); opacity: 0 }
    100% { transform: translate(0px, 0px); opacity: 1 }
}
@-webkit-keyframes animatedBackgroundPrev {
    0% { transform: translate(200px, 0px); opacity: 0 }
    100% { transform: translate(0px, 0px); opacity: 1 }
}
@-ms-keyframes animatedBackgroundPrev {
    0% { transform: translate(200px, 0px); opacity: 0 }
    100% { transform: translate(0px, 0px); opacity: 1 }
}
@-o-keyframes animatedBackgroundPrev {
    0% { transform: translate(200px, 0px); opacity: 0 }
    100% { transform: translate(0px, 0px); opacity: 1 }
}

.pic {
	width:100%;
	height:100%;
	background-repeat:no-repeat;
	background-size:cover;
	background-position: center center;
	animation: animatedBackgroundPrev .5s ease-in-out 1 !important;
    -moz-animation: animatedBackgroundPrev .5s ease-in-out 1 !important;
    -webkit-animation: animatedBackgroundPrev .5s ease-in-out !important;
    -ms-animation: animatedBackgroundPrev .5s ease-in-out 1 !important;
    -o-animation: animatedBackgroundPrev .5s ease-in-out 1 !important;
}
.picPrev {
	dispaly:none;
	width:100%;
	height:100%;
	background-repeat:no-repeat;
	background-size:cover;
	background-position: center center;
	animation: animatedBackground .5s ease-in-out 1 !important;
    -moz-animation: animatedBackground .5s ease-in-out 1 !important;
    -webkit-animation: animatedBackground .5s ease-in-out !important;
    -ms-animation: animatedBackground .5s ease-in-out 1 !important;
    -o-animation: animatedBackground .5s ease-in-out 1 !important;
}
.picPrevFlushLeft {
	dispaly:none;
	width:100%;
	height:100%;
	background-repeat:no-repeat;
	background-size:cover;
	background-position: right center;
	animation: animatedBackground .5s ease-in-out 1 !important;
    -moz-animation: animatedBackground .5s ease-in-out 1 !important;
    -webkit-animation: animatedBackground .5s ease-in-out !important;
    -ms-animation: animatedBackground .5s ease-in-out 1 !important;
    -o-animation: animatedBackground .5s ease-in-out 1 !important;
}
.picNextFlushLeft {
	dispaly:none;
	width:100%;
	height:100%;
	background-repeat:no-repeat;
	background-size:cover;
	background-position: right center;
	animation: animatedBackgroundPrev .5s ease-in-out 1 !important;
    -moz-animation: animatedBackgroundPrev .5s ease-in-out 1 !important;
    -webkit-animation: animatedBackgroundPrev .5s ease-in-out !important;
    -ms-animation: animatedBackgroundPrev .5s ease-in-out 1 !important;
    -o-animation: animatedBackgroundPrev .5s ease-in-out 1 !important;
}

.frame {
	background-image:url(../images/AdobeStock_40225624.jpg);
	background-repeat:no-repeat;
	background-size:cover;
	background-position: right center;
	position:absolute;
	background-color:#fff;
	z-index:0;
	overflow:hidden;
}
#gradation {
	height:180px;
	position:absolute;
	z-index:1;
	/*background-color:orange;*/	
	background-image:url(../images/gradation.png);
	background-repeat:no-repeat;
	background-size:cover;
	background-position: right bottom;
}

@media all and (max-width:859px) and (max-height:540px) and (orientation: landscape) {
	.frame {
		top:0;
		left:112px;
		right:0;
		bottom:0;
	}
	#gradation {
		left:112px;
		bottom:0;
		right:0;
	}
	h1 {
		display:block;
		font-size:1.5em;
		color:#fff;
		margin:0;
		padding:0;
		position:absolute;
		left:162px;
		/*bottom:28px;*/
		bottom:3rem;
		z-index:6;
		font-weight:normal;
	}
	.logo {
		display:none;
	}
}
@media all and (max-width:859px) and (max-height:540px) and (orientation: portrait) {
	.frame {
		top:116px;
		left:0;
		right:0;
		bottom:140px;
	}
	#gradation {
		bottom:140px;
		right:0;
	}
	h1 {
		display:block;
		font-size:1.5em;
		color:#fff;
		margin:0;
		padding:0;
		position:absolute;
		left:48px;
		bottom:178px;
		z-index:6;
		font-weight:normal;
	}
	.logo {
		width:140px;
		height:60px;
		margin:0;
		padding:0;
		border-right:none;
		background-image:url(../svg/btnSprite.svg);
		background-repeat:no-repeat;
		background-size:1000px 300px;
		background-position:0 0;
		z-index:15;
	}
}
@media all and (max-width:859px) and (min-height:541px) {
	.frame {
		top:116px;
		left:0;
		right:0;
		bottom:140px;
	}
	#gradation {
		bottom:140px;
		right:0;
	}
	h1 {
		display:block;
		font-size:1.5em;
		color:#fff;
		margin:0;
		padding:0;
		position:absolute;
		left:48px;
		bottom:178px;
		z-index:6;
		font-weight:normal;
	}
	.logo {
		width:140px;
		height:60px;
		margin:0;
		padding:0;
		border-right:none;
		background-image:url(../svg/btnSprite.svg);
		background-repeat:no-repeat;
		background-size:1000px 300px;
		background-position:0 0;
		z-index:15;
	}
}
@media all and (min-width:860px) and (max-width:1359px) {
	.frame {
		top:112px;
		left:0;
		right:0;
		bottom:0;
	}
	#gradation {
		bottom:0;
		right:0;
		left:0;
	}
	h1 {
		display:block;
		font-size:1.7em;
		color:#fff;
		margin:0;
		padding:0;
		position:absolute;
		left:62px;
		bottom:78px;
		z-index:6;
		font-weight:normal;
	}
	.logo {
		width:180px;
		height:80px;
		margin:0;
		padding:0;
		border-right:none;
		background-image:url(../svg/btnSprite.svg);
		background-repeat:no-repeat;
		background-size:1000px 300px;
		background-position:0 -160px;
		z-index:15;
	}
}
@media all and (min-width:1360px) {
	.frame {
		top:112px;
		left:200px;
		right:0;
		bottom:0;
	}
	#gradation {
		bottom:0;
		right:0;
		left:200px;
	}
	h1 {display:none}
	.logo {
		width:200px;
		height:80px;
		margin:0;
		padding:0;
		border-right:1px solid #ccc;
		background-image:url(../svg/btnSprite.svg);
		background-repeat:no-repeat;
		background-size:1000px 300px;
		background-position:0 -160px;
		z-index:15;
	}
}

@media all and (max-width:859px) and (max-height:540px) and (orientation: landscape) {
	#prevBtn {
		width:50px;
		height:68px;
		position:absolute;
		top:50%;
		left:112px;
		margin:-34px 0 0 0;
		padding:0;
		background-image:url(../svg/btnSprite.svg);		
		background-repeat:no-repeat;
		background-size:1000px 300px;
		background-position:-590px 4px;
		background-color:rgba(0,0,0,0.45);
		cursor:pointer;
		z-index:6;
	}
	#prevBtn:hover {background-position:-593px 4px}
	
	#prevBtnDisable {
		display:block;
		width:50px;
		height:68px;
		position:absolute;
		top:50%;
		left:0;
		margin:-74px 0 0 0;
		padding:0;
		cursor:auto;
		background-color:rgba(255,255,255,0);
		z-index:7;
	}
}
@media all and (max-width:859px) and (max-height:540px) and (orientation: portrait) {
	#prevBtn {
		width:50px;
		height:68px;
		position:absolute;
		top:50%;
		left:0;
		margin:-74px 0 0 0;
		padding:0;
		background-image:url(../svg/btnSprite.svg);		
		background-repeat:no-repeat;
		background-size:1000px 300px;
		background-position:-590px 4px;
		background-color:rgba(0,0,0,0.45);
		cursor:pointer;
		z-index:6;
	}
	#prevBtn:hover {background-position:-593px 4px}
	
	#prevBtnDisable {
		display:block;
		width:50px;
		height:68px;
		position:absolute;
		top:50%;
		left:0;
		margin:-74px 0 0 0;
		padding:0;
		cursor:auto;
		background-color:rgba(255,255,255,0);
		z-index:7;
	}
}
@media all and (max-width:859px) and (min-height:541px) {
	#prevBtn {
		width:50px;
		height:68px;
		position:absolute;
		top:50%;
		left:0;
		margin:-74px 0 0 0;
		padding:0;
		background-image:url(../svg/btnSprite.svg);		
		background-repeat:no-repeat;
		background-size:1000px 300px;
		background-position:-590px 4px;
		background-color:rgba(0,0,0,0.45);
		cursor:pointer;
		z-index:6;
	}
	#prevBtn:hover {background-position:-593px 4px}
	
	#prevBtnDisable {
		display:block;
		width:50px;
		height:68px;
		position:absolute;
		top:50%;
		left:0;
		margin:-74px 0 0 0;
		padding:0;
		cursor:auto;
		background-color:rgba(255,255,255,0);
		z-index:7;
	}
}
@media all and (min-width:860px) and (max-width:1359px) {
	#prevBtn {
		width:50px;
		height:68px;
		position:absolute;
		top:50%;
		left:0;
		margin:34px 0 0 0;
		padding:0;
		background-image:url(../svg/btnSprite.svg);		
		background-repeat:no-repeat;
		background-size:1000px 300px;
		background-position:-590px 4px;
		background-color:rgba(0,0,0,0.45);
		cursor:pointer;
		z-index:6;
	}
	#prevBtn:hover {background-position:-593px 4px}
	
	#prevBtnDisable {
		display:block;
		width:50px;
		height:68px;
		position:absolute;
		top:50%;
		left:0;
		margin:34px 0 0 0;
		padding:0;
		cursor:auto;
		background-color:rgba(255,255,255,0);
		z-index:7;
	}
}
@media all and (min-width:1360px) {
	#prevBtn {
		width:50px;
		height:68px;
		position:absolute;
		top:50%;
		left:200px;
		margin:34px 0 0 0;
		padding:0;
		background-image:url(../svg/btnSprite.svg);		
		background-repeat:no-repeat;
		background-size:1000px 300px;
		background-position:-590px 4px;
		background-color:rgba(0,0,0,0.45);
		cursor:pointer;
		z-index:6;
	}
	#prevBtn:hover {background-position:-593px 4px}
	
	#prevBtnDisable {
		display:block;
		width:50px;
		height:68px;
		position:absolute;
		top:50%;
		left:200px;
		margin:34px 0 0 0;
		padding:0;
		cursor:auto;
		background-color:rgba(255,255,255,0);
		z-index:7;
	}
}

@media all and (max-width:859px) and (max-height:540px) and (orientation: landscape) {
	#nextBtn {
		width:50px;
		height:68px;
		position:absolute;
		top:50%;
		right:0;
		margin:-34px 0 0 0;
		padding:0;
		background-image:url(../svg/btnSprite.svg);		
		background-repeat:no-repeat;
		background-size:1000px 300px;
		background-position:-670px 4px;
		background-color:rgba(0,0,0,0.45);
		cursor:pointer;
		z-index:6;
	}
	#nextBtn:hover {background-position:-667px 4px}
	
	#nextBtnDisable {
		display:none;
		width:50px;
		height:68px;
		position:absolute;
		top:50%;
		right:0;
		margin:-74px 0 0 0;
		padding:0;
		cursor:auto;
		background-color:rgba(255,255,255,0);
		z-index:7;
	}
}
@media all and (max-width:859px) and (max-height:540px) and (orientation: portrait) {
	#nextBtn {
		width:50px;
		height:68px;
		position:absolute;
		top:50%;
		right:0;
		margin:-74px 0 0 0;
		padding:0;
		background-image:url(../svg/btnSprite.svg);		
		background-repeat:no-repeat;
		background-size:1000px 300px;
		background-position:-670px 4px;
		background-color:rgba(0,0,0,0.45);
		cursor:pointer;
		z-index:6;
	}
	#nextBtn:hover {background-position:-667px 4px}
	
	#nextBtnDisable {
		display:none;
		width:50px;
		height:68px;
		position:absolute;
		top:50%;
		right:0;
		margin:-74px 0 0 0;
		padding:0;
		cursor:auto;
		background-color:rgba(255,255,255,0);
		z-index:7;
	}
}
@media all and (max-width:859px) and (min-height:541px) {
	#nextBtn {
		width:50px;
		height:68px;
		position:absolute;
		top:50%;
		right:0;
		margin:-74px 0 0 0;
		padding:0;
		background-image:url(../svg/btnSprite.svg);		
		background-repeat:no-repeat;
		background-size:1000px 300px;
		background-position:-670px 4px;
		background-color:rgba(0,0,0,0.45);
		cursor:pointer;
		z-index:6;
	}
	#nextBtn:hover {background-position:-667px 4px}
	
	#nextBtnDisable {
		display:none;
		width:50px;
		height:68px;
		position:absolute;
		top:50%;
		right:0;
		margin:-74px 0 0 0;
		padding:0;
		cursor:auto;
		background-color:rgba(255,255,255,0);
		z-index:7;
	}
}
@media all and (min-width:860px) {
	#nextBtn {
		width:50px;
		height:68px;
		position:absolute;
		top:50%;
		right:0;
		margin:34px 0 0 0;
		padding:0;
		background-image:url(../svg/btnSprite.svg);		
		background-repeat:no-repeat;
		background-size:1000px 300px;
		background-position:-670px 4px;
		background-color:rgba(0,0,0,0.45);
		cursor:pointer;
		z-index:6;
	}
	#nextBtn:hover {background-position:-667px 4px}
	
	#nextBtnDisable {
		display:none;
		width:50px;
		height:68px;
		position:absolute;
		top:50%;
		right:0;
		margin:34px 0 0 0;
		padding:0;
		cursor:auto;
		background-color:rgba(255,255,255,0);
		z-index:7;
	}
}

/*----------------------------side nav----------------------------------------*/

@media all and (max-width:1359px) {
	#navList {display:none}	
}
@media all and (min-width:1360px) {
	#navList {
		display:block;
		position:absolute;
		top:136px;
		left:12px;
		list-style:none;
		/*background-color:beige;*/
		margin:0;
		padding:0;
	}	
}

#navList li {
	list-style-position:outside;
		height:40px;
		width:220px;
		/*background-color:orange;*/
		line-height:44px;
		margin:0;
		padding:0 0 0 10px;
		color:#888;
		cursor:pointer;
	}
#navList li:hover {color:#000}
.navItemSelected {color:#be1e2d !important; font-weight:bold !important}



/*-------------------------other panels------------------------------------------*/

@media all and (max-width:859px) and (max-height:540px) {
	#songInfoBox, #newMe, #mirage, #float, #belong, #hero, #snapshot, #time {
		display:none;
		position:absolute;
		top:0;
		/*height:0;*/
		left:0;
		right:0;
		/*bottom:182px;*/
		bottom:0;
		/*background-color:rgba(2255,255,255,.85);*/
		background-color:rgba(238,233,226,0.92);
		border:1px solid #b7a083;
		z-index:10;
	}
}
@media all and (max-width:859px) and (min-height:541px) and (max-height:687px) {
	#songInfoBox, #newMe, #mirage, #float, #belong, #hero, #snapshot, #time {
		display:none;
		position:absolute;
		/*top:0;*/
		height:0;
		left:0;
		right:0;
		/*bottom:182px;*/
		bottom:0;
		/*background-color:rgba(2255,255,255,.85);*/
		background-color:rgba(238,233,226,0.92);
		border:1px solid #b7a083;
		z-index:10;
	}
}
@media all and (max-width:859px) and (min-height:688px) {
	#songInfoBox, #newMe, #mirage, #float, #belong, #hero, #snapshot, #time {
		display:none;
		position:absolute;
		/*top:128px;*/
		height:0;
		left:0;
		right:0;
		/*bottom:140px;*/
		bottom:140px;
		/*background-color:rgba(2255,255,255,.85);*/
		background-color:rgba(238,233,226,0.92);
		border:1px solid #b7a083;
		z-index:10;
	}
}
@media all and (min-width:860px) and (max-width:1359px) {
	#songInfoBox, #newMe, #mirage, #float, #belong, #hero, #snapshot, #time {
		display:none;
		position:absolute;
		top:112px;
		left:0;
		right:0;
		bottom:0;
		/*background-color:rgba(2255,255,255,.85);*/
		background-color:rgba(238,233,226,0.92);
		border:1px solid #b7a083;
		z-index:10;
	}
}
@media all and (min-width:1360px) {
	#songInfoBox, #newMe, #mirage, #float, #belong, #hero, #snapshot, #time {
		display:none;
		position:absolute;
		top:112px;
		left:200px;
		right:0;
		bottom:0;
		/*background-color:rgba(2255,255,255,.85);*/
		background-color:rgba(238,233,226,0.92);
		border:1px solid #b7a083;
		z-index:10;
	}
}

@media all and (max-width:859px) and (max-height:540px) {
	#donateBox, #shareBox {
		display:none;
		position:absolute;
		top:0;
		/*height:0;*/
		left:0;
		right:0;
		/*bottom:182px;*/
		bottom:0;
		background-color:rgba(238,233,226,0.92);
		border:1px solid #b7a083;
		z-index:10;
	}
	.smallBox {
		display:block;
		position:absolute;
		/*top:36px;*/
		top:20px;
		left:24px;
		right:24px;
		margin:0;
		padding:0;
		bottom:68px;
		/*background-color:orange;*/
		overflow-y:auto;
	}
	#cancel, #infoCancel, #shareCancel {
		display:none;
		width:50px;
		height:54px;
		position:absolute;
		bottom:0;
		left:50%;
		margin:0 0 0 -25px;
		/*background-color:orange;*/
		background-image:url(../svg/btnSprite.svg);
		background-repeat:no-repeat;
		background-size:1000px 300px;
		background-position:-645px -165px;
		cursor:pointer;
		z-index:201;
		line-height:80px;
		}
}
@media all and (max-width:859px) and (min-height:541px) and (max-height:687px) {
	#donateBox, #shareBox {
		display:none;
		position:fixed;
		height:0;
		left:0;
		right:0;
		bottom:0;
		background-color:rgba(238,233,226,0.92);
		border:1px solid #b7a083;
		z-index:10;
	}
	.smallBox {
		display:none;
		position:absolute;
		/*top:36px;*/
		top:58px;
		left:12px;
		right:12px;
		margin:0;
		padding:0;
		/*background-color:orange;*/
	}
		#cancel, #infoCancel, #shareCancel {
		display:none;
		width:50px;
		height:54px;
		position:absolute;
		bottom:24px;
		left:50%;
		margin:0 0 0 -25px;
		/*background-color:orange;*/
		background-image:url(../svg/btnSprite.svg);
		background-repeat:no-repeat;
		background-size:1000px 300px;
		background-position:-645px -165px;
		cursor:pointer;
		z-index:201;
		line-height:80px;
	}
	#cancel:hover, #infoCancel:hover, #shareCancel:hover {
		background-position:-645px -245px;
	}
}


@media all and (max-width:859px) and (min-height:688px) {
	#donateBox, #shareBox {
		display:none;
		position:fixed;
		/*top:0;*/
		height:0;
		left:0;
		right:0;
		bottom:140px;
		background-color:rgba(238,233,226,0.92);
		border:1px solid #b7a083;
		z-index:10;
	}
	.smallBox {
		display:none;
		position:absolute;
		top:36px;
		left:24px;
		right:24px;
		margin:0;
		padding:0;
		/*background-color:orange;*/
	}
	#cancel, #infoCancel, #shareCancel {display:none}
}

@media all and (min-width:860px) {
	#donateBox, #shareBox {
		/*display:none;*/
		position:absolute;
		top:112px;
		/*right:50px;*/
		right:0;
		width:384px;
		height: 0;
		background-color:rgba(238,233,226,0.92);
		border:1px solid #b7a083;
		z-index:10;
	}
	.smallBox {
		display:none;
		/*width:324px;*/
		width:342px;
		min-height:240px;
		margin:30px 0 40px 21px;
		padding:0;
		/*background-color:orange;*/
	}
	#cancel, #infoCancel, #shareCancel {display:none}
}
.smallBox p {
	margin:0;
	padding:0;
}
.smallBox div {
	display:block;
	width:100%;
	height:44px;
	border:1px solid #888;
	line-height:44px;
	text-indent:40px;
	text-decoration:none;
	cursor:pointer;
	color:#000;
	margin:20px 0 20px 0;
	padding:0;
	background-color:rgba(255,255,255,0.8);
}
.smallBox div:hover {
	border:1px solid #be1e2d;
	color:#be1e2d;
	background-color:rgba(255,255,255,1.0);
}
.taskButtonSelected {
	background-image:url(../svg/btnSprite.svg);		
	background-repeat:no-repeat;
	background-size:1000px 300px;
	background-position:-758px -160px;
	border:1px solid #be1e2d !important;
	color:#be1e2d !important;
	background-color:rgba(255,255,255,1.0) !important;
}
#pay {
	display:block;
	width:100%;
	height:44px;
	border:1px solid #888;
	line-height:44px;
	text-indent:0;
	text-decoration:none;
	cursor:pointer;
	color:#fff;
	margin:36px 0 60px 0;
	padding:0;
	background-color:#be1e2d;
	border:1px solid #be1e2d;
	-moz-border-radius: 22px;
	-webkit-border-radius: 22px;
	border-radius: 22px; /* future proofing */
	-khtml-border-radius: 22px; /* for old Konqueror browsers */
	text-align:center !important;
}

@media all and (max-width:859px) and (max-height:540px) and (orientation: portrait) {
	.songInfoContent {
		position:absolute;
		top:54px;
		left:48px;
		/*width:288px;*/
		width:80%;
		/*bottom:24px;*/
		bottom:72px;
		overflow-y:auto;
		margin:0;
		padding:0;
	}
}
@media all and (max-width:859px) and (max-height:540px) and (orientation: landscape) {
	.songInfoContent {
		position:absolute;
		top:54px;
		left:48px;
		/*width:288px;*/
		width:80%;
		bottom:24px;
		/*bottom:96px;*/
		overflow-y:auto;
		margin:0;
		padding:0;
	}
}
@media all and (max-width:859px) and (min-height:541px) and (max-height:687px) {
	.songInfoContent {
		position:absolute;
		top:54px;
		left:48px;
		/*width:288px;*/
		width:80%;
		bottom:96px;
		overflow-y:auto;
		margin:0;
		padding:0;
	}
}
@media all and (max-width:859px) and (min-height:688px) {
	.songInfoContent {
		position:absolute;
		top:54px;
		left:48px;
		/*width:288px;*/
		width:80%;
		bottom:24px;
		overflow-y:auto;
		margin:0;
		padding:0;
		border-bottom:none;
	}
}
@media all and (min-width:860px) and (max-width:1359px) {
	.songInfoContent {
		position:absolute;
		top:66px;
		left:224px;
		width:360px;
		bottom:40px;
		overflow-y:auto;
		border-bottom:1px solid #aaa;
	}
}
@media all and (min-width:1360px) {
	.songInfoContent {
		position:absolute;
		top:66px;
		left:40px;
		width:360px;
		bottom:40px;
		overflow-y:auto;
		border-bottom:1px solid #aaa;
	}
}

@media all and (max-width:859px) and (max-height:540px) {
	h2 {
		display:none;
		position:absolute;
		top:24px;
		left:46px;
		font-size:1.2em;
		margin:0;
		padding:0;
		font-weight:normal;
	}
}
@media all and (max-width:859px) and (min-height:541px) {
	h2 {
		display:none;
		position:absolute;
		top:24px;
		left:48px;
		font-size:1.2em;
		margin:0;
		padding:0;
		font-weight:normal;
	}
}
@media all and (min-width:860px) and (max-width:1359px) {
	h2 {
		position:absolute;
		top:24px;
		left:224px;
		font-size:1.2em;
		margin:0;
		padding:0;
		font-weight:normal;
	}
}
@media all and (min-width:1360px) {
	h2 {
		position:absolute;
		/*top:24px;*/
		top:36px;
		left:40px;
		font-size:1.2em;
		margin:0;
		padding:0;
		font-weight:normal;
	}
}

.songInfoContent p {
	font-size:1em;
	line-height:1.6em;
	width:100%;
	margin:0 0 12px 0;
	padding:0;
}

.smallHead {
	width:100%;
	font-size:.8em;
	line-height:1em;
}

@media all and (max-width:859px) {
	.inspiration {
		display:none;
		position: relative;
		top:0;
		float:right;
		width:360px;
	}
}
@media all and (min-width:860px) {
	.inspiration {
		display:block;
		font-size:1em;
		line-height:1.6em;
		margin:0 0 12px 0;
		padding:0;
		width:360px;
	}
}

#likeBtn {
	margin:40px 0 40px -110px;
	border:none;
	background-color:transparent;
	padding:0;
	cursor:default;
		
	transform: scale(1.4);
	-ms-transform: scale(1.4); 
	-webkit-transform: scale(1.4); 
	-o-transform: scale(1.4); 
	-moz-transform: scale(1.4); 
	transform-origin: bottom left;
	-ms-transform-origin: bottom left;
	-webkit-transform-origin: bottom left;
	-moz-transform-origin: bottom left;
	-webkit-transform-origin: bottom left;

	}

#playBtn {
	width:140px;
	height:140px;
	position:absolute;
	top:50%;
	left:50%;
	z-index:5;
	cursor:pointer;
	background-image:url(../svg/btnSprite.svg);
	background-repeat:no-repeat;
	background-size:1000px 300px;
	background-position:-836px -158px;
	opacity:.8;
}
#playBtn:hover {
	
	opacity:1;
}

@media all and (max-width:859px) {
	#playBtn {margin:-100px 0 0 -74px}
}
@media all and (min-width:860px) and (max-width:1359px) {
	#playBtn {margin:0 0 0 -76px}
}
@media all and (min-width:1360px) {
	#playBtn {margin:0 0 0 24px}
}


/* ------------------------mCustomScrollbar--------------------------------------- */
/* vertical scrollbar */
.mCSB_container{
	width:auto;
	margin-right:0;
	overflow:hidden;
    /*background-color: yellow !important;*/
}
.mCSB_container.mCS_no_scrollbar{
	margin-right:0;
}
.mCS_disabled>.mCustomScrollBox>.mCSB_container.mCS_no_scrollbar,
.mCS_destroyed>.mCustomScrollBox>.mCSB_container.mCS_no_scrollbar{
	margin-right:30px;
}
.mCustomScrollBox>.mCSB_scrollTools{  /*this one?*/
	width:8px;
	height:100%;
	top:0;
	right:0;
}
.mCSB_scrollTools .mCSB_draggerContainer{
	position:absolute;
	top:0;
	left:0;
	bottom:0;
	right:0; 
	height:auto;
}
.mCSB_scrollTools a+.mCSB_draggerContainer{
	margin:10px 0;
}
.mCSB_scrollTools .mCSB_draggerRail{
    display:none;
	width:10px;
	height:100%;
	margin:0 auto;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	border-radius:10px;
}
.mCSB_scrollTools .mCSB_dragger{
	cursor:pointer;
	width:100%;
	height:30px;
}
.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
	width:8px;
	height:100%;
	margin:0 auto;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	border-radius:10px;
	text-align:right;
}
.mCSB_scrollTools .mCSB_buttonUp,
.mCSB_scrollTools .mCSB_buttonDown{
	display:block;
	position:relative;
	height:20px;
	overflow:hidden;
	margin:0 auto;
	cursor:pointer;
}
.mCSB_scrollTools .mCSB_buttonDown{
	top:100%;
	margin-top:-40px;
}
/* horizontal scrollbar */
.mCSB_horizontal>.mCSB_container{
	height:auto;
	margin-right:0;
	margin-bottom:30px;
	overflow:hidden;
}
.mCSB_horizontal>.mCSB_container.mCS_no_scrollbar{
	margin-bottom:0;
}
.mCS_disabled>.mCSB_horizontal>.mCSB_container.mCS_no_scrollbar,
.mCS_destroyed>.mCSB_horizontal>.mCSB_container.mCS_no_scrollbar{
	margin-right:0;
	margin-bottom:30px;
}
.mCSB_horizontal.mCustomScrollBox>.mCSB_scrollTools{
	width:100%;
	height:16px;
	top:auto;
	right:auto;
	bottom:0;
	left:0;
	overflow:hidden;
}
.mCSB_horizontal>.mCSB_scrollTools a+.mCSB_draggerContainer{
	margin:0 20px;
}
.mCSB_horizontal>.mCSB_scrollTools .mCSB_draggerRail{
	width:100%;
	height:2px;
	margin:7px 0;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	border-radius:10px;
}
.mCSB_horizontal>.mCSB_scrollTools .mCSB_dragger{
	width:30px;
	height:100%;
}
.mCSB_horizontal>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
	width:100%;
	height:4px;
	margin:6px auto;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	border-radius:10px;
}
.mCSB_horizontal>.mCSB_scrollTools .mCSB_buttonLeft,
.mCSB_horizontal>.mCSB_scrollTools .mCSB_buttonRight{
	display:block;
	position:relative;
	width:20px;
	height:100%;
	overflow:hidden;
	margin:0 auto;
	cursor:pointer;
	float:left;
}
.mCSB_horizontal>.mCSB_scrollTools .mCSB_buttonRight{
	margin-left:-40px;
	float:right;
}
.mCustomScrollBox{
	-ms-touch-action:none; /*MSPointer events - direct all pointer events to js*/
}

/* default scrollbar colors and backgrounds (default theme) */
.mCustomScrollBox>.mCSB_scrollTools{
	opacity:0.75;
	filter:"alpha(opacity=75)"; -ms-filter:"alpha(opacity=75)"; /* old ie */
}
.mCustomScrollBox:hover>.mCSB_scrollTools{
	opacity:1;
	filter:"alpha(opacity=100)"; -ms-filter:"alpha(opacity=100)"; /* old ie */
}
.mCSB_scrollTools .mCSB_draggerRail{
    background:rgba(153,153,153,0.25);
}
.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
	background:rgba(153,153,153,0.2);
}
.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{
	background:rgba(153,153,153,0.3);
}
.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{
	background:rgba(153,153,153,0.3);
}
.mCSB_scrollTools .mCSB_buttonUp,
.mCSB_scrollTools .mCSB_buttonDown,
.mCSB_scrollTools .mCSB_buttonLeft,
.mCSB_scrollTools .mCSB_buttonRight{
	background-image:url(mCSB_buttons.png);
	background-repeat:no-repeat;
	opacity:0.4;
	filter:"alpha(opacity=40)"; -ms-filter:"alpha(opacity=40)"; /* old ie */
}
.mCSB_scrollTools .mCSB_buttonUp{
	background-position:0 0;
	/* 
	sprites locations are 0 0/-16px 0/-32px 0/-48px 0 (light) and -80px 0/-96px 0/-112px 0/-128px 0 (dark) 
	*/
}
.mCSB_scrollTools .mCSB_buttonDown{
	background-position:0 -20px;
	/* 
	sprites locations are 0 -20px/-16px -20px/-32px -20px/-48px -20px (light) and -80px -20px/-96px -20px/-112px -20px/-128px -20px (dark) 
	*/
}
.mCSB_scrollTools .mCSB_buttonLeft{
	background-position:0 -40px;
	/* 
	sprites locations are 0 -40px/-20px -40px/-40px -40px/-60px -40px (light) and -80px -40px/-100px -40px/-120px -40px/-140px -40px (dark) 
	*/
}
.mCSB_scrollTools .mCSB_buttonRight{
	background-position:0 -56px;
	/* 
	sprites locations are 0 -56px/-20px -56px/-40px -56px/-60px -56px (light) and -80px -56px/-100px -56px/-120px -56px/-140px -56px (dark) 
	*/
}
.mCSB_scrollTools .mCSB_buttonUp:hover,
.mCSB_scrollTools .mCSB_buttonDown:hover,
.mCSB_scrollTools .mCSB_buttonLeft:hover,
.mCSB_scrollTools .mCSB_buttonRight:hover{
	opacity:0.75;
	filter:"alpha(opacity=75)"; -ms-filter:"alpha(opacity=75)"; /* old ie */
}
.mCSB_scrollTools .mCSB_buttonUp:active,
.mCSB_scrollTools .mCSB_buttonDown:active,
.mCSB_scrollTools .mCSB_buttonLeft:active,
.mCSB_scrollTools .mCSB_buttonRight:active{
	opacity:0.9;
	filter:"alpha(opacity=90)"; -ms-filter:"alpha(opacity=90)"; /* old ie */
}

/*scrollbar themes*/
/*dark (dark colored scrollbar)*/
.mCS-dark>.mCSB_scrollTools .mCSB_draggerRail{
	background:#000; /* rgba fallback */
	background:rgba(0,0,0,0.15);
}
.mCS-dark>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
	background:#000; /* rgba fallback */
	background:rgba(0,0,0,0.75);
}
.mCS-dark>.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{
	background:rgba(0,0,0,0.85);
}
.mCS-dark>.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.mCS-dark>.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{
	background:rgba(0,0,0,0.9);
}
.mCS-dark>.mCSB_scrollTools .mCSB_buttonUp{
	background-position:-80px 0;
}
.mCS-dark>.mCSB_scrollTools .mCSB_buttonDown{
	background-position:-80px -20px;
}
.mCS-dark>.mCSB_scrollTools .mCSB_buttonLeft{
	background-position:-80px -40px;
}
.mCS-dark>.mCSB_scrollTools .mCSB_buttonRight{
	background-position:-80px -56px;
}
/*light-2*/
.mCS-light-2>.mCSB_scrollTools .mCSB_draggerRail{
	width:4px;
	background:#fff; /* rgba fallback */
	background:rgba(255,255,255,0.1);
	-webkit-border-radius:1px;
	-moz-border-radius:1px;
	border-radius:1px;
}
.mCS-light-2>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
	width:4px;
	background:#fff; /* rgba fallback */
	background:rgba(255,255,255,0.75);
	-webkit-border-radius:1px;
	-moz-border-radius:1px;
	border-radius:1px;
}
.mCS-light-2.mCSB_horizontal>.mCSB_scrollTools .mCSB_draggerRail{
	width:100%;
	height:4px;
	margin:6px 0;
}
.mCS-light-2.mCSB_horizontal>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
	width:100%;
	height:4px;
	margin:6px auto;
}
.mCS-light-2>.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{
	background:rgba(255,255,255,0.85);
}
.mCS-light-2>.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.mCS-light-2>.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{
	background:rgba(255,255,255,0.9);
}
.mCS-light-2>.mCSB_scrollTools .mCSB_buttonUp{
	background-position:-32px 0;
}
.mCS-light-2>.mCSB_scrollTools .mCSB_buttonDown{
	background-position:-32px -20px;
}
.mCS-light-2>.mCSB_scrollTools .mCSB_buttonLeft{
	background-position:-40px -40px;
}
.mCS-light-2>.mCSB_scrollTools .mCSB_buttonRight{
	background-position:-40px -56px;
}
/*dark-2*/
.mCS-dark-2>.mCSB_scrollTools .mCSB_draggerRail{
	width:4px;
	background:#000; /* rgba fallback */
	background:rgba(0,0,0,0.1);
	-webkit-border-radius:1px;
	-moz-border-radius:1px;
	border-radius:1px;
}
.mCS-dark-2>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
	width:4px;
	background:#000; /* rgba fallback */
	background:rgba(0,0,0,0.75);
	-webkit-border-radius:1px;
	-moz-border-radius:1px;
	border-radius:1px;
}
.mCS-dark-2.mCSB_horizontal>.mCSB_scrollTools .mCSB_draggerRail{
	width:100%;
	height:4px;
	margin:6px 0;
}
.mCS-dark-2.mCSB_horizontal>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
	width:100%;
	height:4px;
	margin:6px auto;
}
.mCS-dark-2>.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{
	background:rgba(0,0,0,0.85);
}
.mCS-dark-2>.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.mCS-dark-2>.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{
	background:rgba(0,0,0,0.9);
}
.mCS-dark-2>.mCSB_scrollTools .mCSB_buttonUp{
	background-position:-112px 0;
}
.mCS-dark-2>.mCSB_scrollTools .mCSB_buttonDown{
	background-position:-112px -20px;
}
.mCS-dark-2>.mCSB_scrollTools .mCSB_buttonLeft{
	background-position:-120px -40px;
}
.mCS-dark-2>.mCSB_scrollTools .mCSB_buttonRight{
	background-position:-120px -56px;
}
/*light-thick*/
.mCS-light-thick>.mCSB_scrollTools .mCSB_draggerRail{
	width:4px;
	background:#fff; /* rgba fallback */
	background:rgba(255,255,255,0.1);
	-webkit-border-radius:2px;
	-moz-border-radius:2px;
	border-radius:2px;
}
.mCS-light-thick>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
	width:6px;
	background:#fff; /* rgba fallback */
	background:rgba(255,255,255,0.75);
	-webkit-border-radius:2px;
	-moz-border-radius:2px;
	border-radius:2px;
}
.mCS-light-thick.mCSB_horizontal>.mCSB_scrollTools .mCSB_draggerRail{
	width:100%;
	height:4px;
	margin:6px 0;
}
.mCS-light-thick.mCSB_horizontal>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
	width:100%;
	height:6px;
	margin:5px auto;
}
.mCS-light-thick>.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{
	background:rgba(255,255,255,0.85);
}
.mCS-light-thick>.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.mCS-light-thick>.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{
	background:rgba(255,255,255,0.9);
}
.mCS-light-thick>.mCSB_scrollTools .mCSB_buttonUp{
	background-position:-16px 0;
}
.mCS-light-thick>.mCSB_scrollTools .mCSB_buttonDown{
	background-position:-16px -20px;
}
.mCS-light-thick>.mCSB_scrollTools .mCSB_buttonLeft{
	background-position:-20px -40px;
}
.mCS-light-thick>.mCSB_scrollTools .mCSB_buttonRight{
	background-position:-20px -56px;
}
/*dark-thick*/
.mCS-dark-thick>.mCSB_scrollTools .mCSB_draggerRail{
	width:4px;
	background:#000; /* rgba fallback */
	background:rgba(0,0,0,0.1);
	-webkit-border-radius:2px;
	-moz-border-radius:2px;
	border-radius:2px;
}
.mCS-dark-thick>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
	width:6px;
	background:#000; /* rgba fallback */
	background:rgba(0,0,0,0.75);
	-webkit-border-radius:2px;
	-moz-border-radius:2px;
	border-radius:2px;
}
.mCS-dark-thick.mCSB_horizontal>.mCSB_scrollTools .mCSB_draggerRail{
	width:100%;
	height:4px;
	margin:6px 0;
}
.mCS-dark-thick.mCSB_horizontal>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
	width:100%;
	height:6px;
	margin:5px auto;
}
.mCS-dark-thick>.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{
	background:rgba(0,0,0,0.85);
}
.mCS-dark-thick>.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.mCS-dark-thick>.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{
	background:rgba(0,0,0,0.9);
}
.mCS-dark-thick>.mCSB_scrollTools .mCSB_buttonUp{
	background-position:-96px 0;
}
.mCS-dark-thick>.mCSB_scrollTools .mCSB_buttonDown{
	background-position:-96px -20px;
}
.mCS-dark-thick>.mCSB_scrollTools .mCSB_buttonLeft{
	background-position:-100px -40px;
}
.mCS-dark-thick>.mCSB_scrollTools .mCSB_buttonRight{
	background-position:-100px -56px;
}
/*light-thin*/
.mCS-light-thin>.mCSB_scrollTools .mCSB_draggerRail{
	background:#fff; /* rgba fallback */
	background:rgba(255,255,255,0.1);
}
.mCS-light-thin>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
	width:2px;
}
.mCS-light-thin.mCSB_horizontal>.mCSB_scrollTools .mCSB_draggerRail{
	width:100%;
}
.mCS-light-thin.mCSB_horizontal>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
	width:100%;
	height:2px;
	margin:7px auto;
}
/*dark-thin*/
.mCS-dark-thin>.mCSB_scrollTools .mCSB_draggerRail{
	background:#000; /* rgba fallback */
	background:rgba(0,0,0,0.15);
}
.mCS-dark-thin>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
	width:2px;
	background:#000; /* rgba fallback */
	background:rgba(0,0,0,0.75);
}
.mCS-dark-thin.mCSB_horizontal>.mCSB_scrollTools .mCSB_draggerRail{
	width:100%;
}
.mCS-dark-thin.mCSB_horizontal>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
	width:100%;
	height:2px;
	margin:7px auto;
}
.mCS-dark-thin>.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{
	background:rgba(0,0,0,0.85);
}
.mCS-dark-thin>.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.mCS-dark-thin>.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{
	background:rgba(0,0,0,0.9);
}
.mCS-dark-thin>.mCSB_scrollTools .mCSB_buttonUp{
	background-position:-80px 0;
}
.mCS-dark-thin>.mCSB_scrollTools .mCSB_buttonDown{
	background-position:-80px -20px;
}
.mCS-dark-thin>.mCSB_scrollTools .mCSB_buttonLeft{
	background-position:-80px -40px;
}
.mCS-dark-thin>.mCSB_scrollTools .mCSB_buttonRight{
	background-position:-80px -56px;
}