/* Font Family
================================================== */

@import url("//fonts.googleapis.com/css?family=Yanone+Kaffeesatz:200,300,400");


/* Desktop
================================================== */

.container {
	position: relative;
	margin: 0 auto;
	width: 100%;
}
.column { width:inherit; }


/* Tablet (Portrait)
================================================== */

@media only screen and (min-width: 768px) and (max-width: 959px) {
.container { width:100%; }
}


/* Mobile (Portrait)
================================================== */

@media only screen and (max-width: 767px) {
.container { width:100%; }
}


/* Mobile (Landscape)
================================================== */

@media only screen and (min-width: 480px) and (max-width: 767px) {
.container { width:100%; }
}


/* CSS Reset
================================================== */




/* Basic Styles
================================================== */


* {
-webkit-tap-highlight-color:rgba(0,0,0,0);
-webkit-tap-highlight-color:transparent;
}


/* Typography
================================================== */




/* Links
================================================== */



/* Misc.
================================================== */

.add-bottom { margin-bottom:20px !important; }
.left {
	float: left;
	font-family: thsarabunnew;
	font-size: 1.6rem;
}
.right {
	float: right;
	font-family: thsarabunnew;
	font-size: 1.6rem;
}
.center { text-align:center; }


/* Custom Styles
================================================== */

/* Highlight Styles */
::selection { background-color:#262223; color:#444; }


/* Audio Player Styles
================================================== */

/* Default / Desktop / Firefox */
audio {
	width: 95%;
	margin-top: 0;
	margin-right: 15px;
	margin-bottom: 0;
	margin-left: 14px;
}
#mainwrap { box-shadow:0 0 6px 1px rgba(0,0,0,.25); }
#audiowrap { background-color:#231F20; margin:0 auto; }
#plwrap { margin:0 auto; }
#tracks { position:relative; text-align:center; }
#nowPlay { display:inline; }
#npTitle { margin:0; padding:21px; text-align:right; }
#npAction { padding:21px; position:absolute; }
#plList { margin:0; }
#plList li { background-color:#231F20; cursor:pointer; display:block; margin:0; padding:21px 0; }
#plList li:hover { background-color:#262223; }
.plItem { position:relative; }
.plTitle {
	left: 50px;
	overflow: hidden;
	position: absolute;
	right: 65px;
	text-overflow: ellipsis;
	top: 0;
	white-space: nowrap;
	font-family: thsarabunnew;
	font-size: 1.4rem;
}
.plNum {
	padding-left: 21px;
	width: 25px;
	font-family: thsarabunnew;
	font-size: 1.4rem;
}
.plLength {
	padding-left: 21px;
	position: absolute;
	right: 21px;
	top: 0;
	font-family: thsarabunnew;
	font-size: 1.4rem;
}
.plSel,.plSel:hover { background-color:#262223!important; cursor:default!important; }
a[id^="btn"] { background-color:#231F20; color:#C8C7C8; cursor:pointer; display:inline-block; font-size:50px; margin:0; padding:21px 27px; text-decoration:none; }
a[id^="btn"]:last-child { margin-left:-4px; }
a[id^="btn"]:hover,a[id^="btn"]:active { background-color:#262223; }
a[id^="btn"]::-moz-focus-inner { border:0; padding:0; }

/* IE 9 */
html[data-useragent*="MSIE 9.0"] audio {
	margin-left: 9px;
	outline: none;
	width: 95%;
}
html[data-useragent*="MSIE 9.0"] #audiowrap { background-color:#000; }
html[data-useragent*="MSIE 9.0"] a[id^="btn"] { background-color:#000; }
html[data-useragent*="MSIE 9.0"] a[id^="btn"]:hover { background-color:#080808; }
html[data-useragent*="MSIE 9.0"] #plList li { background-color:#000; }
html[data-useragent*="MSIE 9.0"] #plList li:hover { background-color:#080808; }
html[data-useragent*="MSIE 9.0"] .plSel,
html[data-useragent*="MSIE 9.0"] .plSel:hover { background-color:#080808!important; }

/* IE 10 */
html[data-useragent*="MSIE 10.0"] audio {
	margin-left: 6px;
	width: 95%;
}
html[data-useragent*="MSIE 10.0"] #audiowrap { background-color:#000; }
html[data-useragent*="MSIE 10.0"] a[id^="btn"] { background-color:#000; }
html[data-useragent*="MSIE 10.0"] a[id^="btn"]:hover { background-color:#080808; }
html[data-useragent*="MSIE 10.0"] #plList li { background-color:#000; }
html[data-useragent*="MSIE 10.0"] #plList li:hover { background-color:#080808; }
html[data-useragent*="MSIE 10.0"] .plSel,
html[data-useragent*="MSIE 10.0"] .plSel:hover { background-color:#080808!important; }

/* IE 11 */
html[data-useragent*="rv:11.0"] audio {
	margin-left: 2px;
	width: 95%;
}
html[data-useragent*="rv:11.0"] #audiowrap { background-color:#000; }
html[data-useragent*="rv:11.0"] a[id^="btn"] { background-color:#000; }
html[data-useragent*="rv:11.0"] a[id^="btn"]:hover { background-color:#080808; }
html[data-useragent*="rv:11.0"] #plList li { background-color:#000; }
html[data-useragent*="rv:11.0"] #plList li:hover { background-color:#080808; }
html[data-useragent*="rv:11.0"] .plSel,
html[data-useragent*="rv:11.0"] .plSel:hover { background-color:#080808!important; }

/* All Apple Products */
html[data-useragent*="Apple"] audio { margin:0; width:95%; }
html[data-useragent*="Apple"] #audiowrap { background-color:#000; }
html[data-useragent*="Apple"] a[id^="btn"] { background-color:#000; }
html[data-useragent*="Apple"] a[id^="btn"]:hover { background-color:#080808; }
html[data-useragent*="Apple"] #plList li { background-color:#000; }
html[data-useragent*="Apple"] #plList li:hover { background-color:#080808; }
html[data-useragent*="Apple"] .plSel,
html[data-useragent*="Apple"] .plSel:hover { background-color:#080808!important; }

/* IOS 7 */
html[data-useragent*="OS 7"] body { color:#373837; }
html[data-useragent*="OS 7"] audio {
	margin-left: 3px;
	width: 95%;
}
html[data-useragent*="OS 7"] #audiowrap { background-color:#e6e6e6; }
html[data-useragent*="OS 7"] a[id^="btn"] { background-color:#e6e6e6; color:#373837; }
html[data-useragent*="OS 7"] a[id^="btn"]:hover { background-color:#eee; }
html[data-useragent*="OS 7"] #plList li { background-color:#e6e6e6; }
html[data-useragent*="OS 7"] #plList li:hover { background-color:#eee; }
html[data-useragent*="OS 7"] .plSel,
html[data-useragent*="OS 7"] .plSel:hover { background-color:#eee!important; }

/* IOS 8 */
html[data-useragent*="OS 8"] body { color:#373837; }
html[data-useragent*="OS 8"] audio {
	margin-left: 6px;
	width: 95%;
}
html[data-useragent*="OS 8"] #audiowrap { background-color:#e4e4e4; }
html[data-useragent*="OS 8"] a[id^="btn"] { background-color:#e4e4e4; color:#373837; }
html[data-useragent*="OS 8"] a[id^="btn"]:hover { background-color:#eee; }
html[data-useragent*="OS 8"] #plList li { background-color:#e4e4e4; }
html[data-useragent*="OS 8"] #plList li:hover { background-color:#eee; }
html[data-useragent*="OS 8"] .plSel,
html[data-useragent*="OS 8"] .plSel:hover { background-color:#eee!important; }

/* IOS 9 */
html[data-useragent*="OS 9"] body { color:#373837; }
html[data-useragent*="OS 9"] audio {
	margin-left: 6px;
	width: 95%;
}
html[data-useragent*="OS 9"] #audiowrap { background-color:#d5d5d5; }
html[data-useragent*="OS 9"] a[id^="btn"] { background-color:#d5d5d5; color:#373837; }
html[data-useragent*="OS 9"] a[id^="btn"]:hover { background-color:#eee; }
html[data-useragent*="OS 9"] #plList li { background-color:#d5d5d5; }
html[data-useragent*="OS 9"] #plList li:hover { background-color:#eee; }
html[data-useragent*="OS 9"] .plSel,
html[data-useragent*="OS 9"] .plSel:hover { background-color:#eee!important; }

/* Chrome */
html[data-useragent*="Chrome"] body { color:#5a5a5a; }
html[data-useragent*="Chrome"] audio {
	margin-left: 9px;
	width: 95%;
}
html[data-useragent*="Chrome"] #audiowrap { background-color:#fafafa; }
html[data-useragent*="Chrome"] a[id^="btn"] { background-color:#fafafa; color:#5a5a5a; }
html[data-useragent*="Chrome"] a[id^="btn"]:hover { background-color:#eee; }
html[data-useragent*="Chrome"] #plList li { background-color:#fafafa; }
html[data-useragent*="Chrome"] #plList li:hover { background-color:#eee; }
html[data-useragent*="Chrome"] .plSel,
html[data-useragent*="Chrome"] .plSel:hover { background-color:#eee!important; }

/* Chrome / Android / Tablet */
html[data-useragent*="Chrome"][data-useragent*="Android"] body { color:#373837; }
html[data-useragent*="Chrome"][data-useragent*="Android"] audio {
	margin-left: 4px;
	width: 95%;
}
html[data-useragent*="Chrome"][data-useragent*="Android"] #audiowrap { background-color:#fafafa; }
html[data-useragent*="Chrome"][data-useragent*="Android"] a[id^="btn"] { background-color:#fafafa; color:#373837; }
html[data-useragent*="Chrome"][data-useragent*="Android"] a[id^="btn"]:hover { background-color:#eee; }
html[data-useragent*="Chrome"][data-useragent*="Android"] #plList li { background-color:#fafafa; }
html[data-useragent*="Chrome"][data-useragent*="Android"] #plList li:hover { background-color:#eee; }
html[data-useragent*="Chrome"][data-useragent*="Android"] .plSel,
html[data-useragent*="Chrome"][data-useragent*="Android"] .plSel:hover { background-color:#eee!important; }


/* Audio Player Media Queries
================================================== */

/* Tablet Portrait */
@media only screen and (min-width: 768px) and (max-width: 959px) {
audio { width:526px; }
html[data-useragent*="MSIE 9.0"] audio { width:536px; }
html[data-useragent*="MSIE 10.0"] audio { width:543px; }
html[data-useragent*="rv:11.0"] audio { width:551px; }
html[data-useragent*="OS 7"] audio { width:546px; }
html[data-useragent*="OS 8"] audio { width:550px; }
html[data-useragent*="OS 9"] audio { width:550px; }
html[data-useragent*="Chrome"] audio { width:95%; }
html[data-useragent*="Chrome"][data-useragent*="Android"] audio { margin-left:4px; width:545px; }
.left {
	float: left;
	height: auto;
	width: 100%;
	position: relative;
	margin: 0px;
	padding: 5px;
}
.right {
	float: left;
	height: auto;
	width: 100%;
	position: relative;
	margin: 0px;
	padding: 5px;
}
#npAction {
	position: relative;
	margin: 0px;
	padding: 5px;
}
#npTitle {
	width: 100%;
	float: left;
	height: auto;
	position: relative;
	text-align: left;
	margin: 0px;
	padding: 5px;
}
.plTitle {
	left: 50px;
	overflow: hidden;
	position: absolute;
	right: 65px;
	text-overflow: ellipsis;
	top: 0;
	white-space: nowrap;
	font-family: thsarabunnew;
	font-size: 1.6rem;
}
.plNum {
	padding-left: 21px;
	width: 25px;
	font-family: thsarabunnew;
	font-size: 1.6rem;
}
.plLength {
	padding-left: 21px;
	position: absolute;
	right: 21px;
	top: 0;
	font-family: thsarabunnew;
	font-size: 1.6rem;
}
}

/* Mobile Landscape */
@media only screen and (min-width: 480px) and (max-width: 767px) {
audio { width:390px; }
html[data-useragent*="MSIE 9.0"] audio { width:400px; }
html[data-useragent*="MSIE 10.0"] audio { width:407px; }
html[data-useragent*="rv:11.0"] audio { width:415px; }
html[data-useragent*="OS 7"] audio { width:410px; }
html[data-useragent*="OS 8"] audio { width:414px; }
html[data-useragent*="OS 9"] audio { width:414px; }
html[data-useragent*="Chrome"] audio { width:95%; }
html[data-useragent*="Chrome"][data-useragent*="Mobile"] audio { margin-left:4px; width:410px; }

.left {
	float: left;
	height: auto;
	width: 90%;
	position: relative;
	margin: 0px;
	padding: 5px;
}
.right {
	float: left;
	height: auto;
	width: 90%;
	position: relative;
	margin: 0px;
	padding: 5px;
}
#npAction {
	position: relative;
	margin: 0px;
	padding: 5px;
	font-size: 2rem;
}
#npTitle {
	width: 100%;
	float: left;
	height: auto;
	position: relative;
	text-align: left;
	margin: 0px;
	padding: 5px;
	font-size: 2rem;
}
.plTitle {
	left: 50px;
	overflow: hidden;
	position: absolute;
	right: 65px;
	text-overflow: ellipsis;
	top: 0;
	white-space: nowrap;
	font-family: thsarabunnew;
	font-size: 1.8rem;
}
.plNum {
	padding-left: 21px;
	width: 25px;
	font-family: thsarabunnew;
	font-size: 1.8rem;
}
.plLength {
	padding-left: 21px;
	position: absolute;
	right: 21px;
	top: 0;
	font-family: thsarabunnew;
	font-size: 1.8rem;
}
}

/* Mobile Portrait */
@media only screen and (max-width: 479px) {
audio { width:270px; }
html[data-useragent*="MSIE 9.0"] audio { width:280px; }
html[data-useragent*="MSIE 10.0"] audio { width:287px; }
html[data-useragent*="rv:11.0"] audio { width:295px; }
html[data-useragent*="OS 7"] audio { width:290px; }
html[data-useragent*="OS 8"] audio { width:294px; }
html[data-useragent*="OS 9"] audio { width:294px; }
html[data-useragent*="Chrome"] audio { width:95%; }
html[data-useragent*="Chrome"][data-useragent*="Mobile"] audio { margin-left:4px; width:290px; }
.left {
	float: left;
	height: auto;
	position: relative;
	margin: 0px;
	padding: 5px;
	width: 90%;
}
.right {
	float: left;
	height: auto;
	position: relative;
	margin: 0px;
	padding: 5px;
	width: 90%;
}
#npAction {
	position: relative;
	margin: 0px;
	font-size: 1.8rem;
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
}
#npTitle {
	
	float: left;
	height: auto;
	position: relative;
	text-align: left;
	margin: 0px;
	font-size: 1.8rem;
	padding-top: 0px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
}
.plTitle {
	left: 50px;
	overflow: hidden;
	position: absolute;
	right: 65px;
	text-overflow: ellipsis;
	top: 0;
	white-space: nowrap;
	font-family: thsarabunnew;
	font-size: 1.8rem;
}
.plNum {
	padding-left: 21px;
	width: 25px;
	font-family: thsarabunnew;
	font-size: 1.8rem;
}
.plLength {
	padding-left: 21px;
	position: absolute;
	right: 21px;
	top: 0;
	font-family: thsarabunnew;
	font-size: 1.8rem;
}
}