/* #Reset & Basics (Inspired by E. Meyers)
================================================== */
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, 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, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block; }
body {
	line-height: 1; }
ol, ul {
	list-style: none; }
blockquote, q {
	quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none; }
table {
	border-collapse: collapse;
	border-spacing: 0; }


/* Clearfix */
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}
/* ================================================== */

/* Web Fonts */

@font-face {
    font-family: 'Noto Sans Bold';
    src: url('fonts/notosans-bold-webfont.eot');
    src: url('fonts/notosans-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/notosans-bold-webfont.woff') format('woff'),
         url('fonts/notosans-bold-webfont.ttf') format('truetype'),
         url('fonts/notosans-bold-webfont.svg#noto_sansbold') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'Noto Sans';
    src: url('fonts/notosans-regular-webfont.eot');
    src: url('fonts/notosans-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/notosans-regular-webfont.woff') format('woff'),
         url('fonts/notosans-regular-webfont.ttf') format('truetype'),
         url('fonts/notosans-regular-webfont.svg#noto_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;
}


/* Desktop Layout Styles */

body {
	/* background-color: #ece8e5; */
	font-size: 14px;
	line-height: 18px;
	font-family: 'Noto Sans', sans-serif;
	font-weight: normal;
}

.day {
	background-color: #ece8e5;
}
.night {
	background-color: #000;
}

#wrapper {
	width: 768px;
	margin: 0 auto 0;
}
.wrapper {
	width: 768px;
	margin: 0 auto 0;
}
.wrapper_np {
	width: 768px;
	margin: 0 auto 0;
}

#slider {
	width: 300px;
	height: 60px;
	margin: 30px auto 0px;
}
#slider p {
	font-size: 20px;
	font-family: 'Noto Sans', sans-serif;
	font-weight: normal;
	text-align: center;
	color: #AAA;
}
#slider ul li {
	font-size: 16px;
	font-family: 'Noto Sans', sans-serif;
	font-weight: bold;
	text-align: center;
	color: #AAA;
}

audio {
	width: 310px;
}

.content {
	position: relative;
	width: 100%;
}

.leftcol {
	position: relative;
	float: left;
	width: 348px;
	margin: 10px;
	padding: 8px;
}

.rightcol {
	position: relative;
	float: left;
	width: 348px;
	margin: 10px;
	padding: 8px;
}

/* Formatting */

strong {
	font-weight: bold;
}
h1 {
	font-size: 25px;
	line-height: 35px;
	padding-bottom: 10px;
	font-family: 'Noto Sans', sans-serif;
	font-weight: bold;
	color: #283744;
}
p {
	margin: 0px 0px 15px 0px;
}
.indent {
	padding-left: 10px;
}
.psongindent {
	margin: 0px;
	padding: 0px 0px 0px 10px;
}
.partistindent {
	margin: 0px;
	padding: 0px 0px 5px 20px;
	font-size: 10px;
	line-height: 10px;
}
	
.title {
	margin: 45px 5px 0px 5px;
	text-align: center;
	font-size: 52px;
	font-family: 'Noto Sans', sans-serif;
	font-weight: bold;
	color: #AAA;
}
.disclaimer {
	font-size: 12px;
	padding-top: 15px;
	text-align: center;
}
.quote {
	margin: 5px;
	padding: 5px;
	font-style: italic;
	color: #555;
}
.quotename {
	position: relative;
	float: right;
	margin: 10px 25px 10px 0px;
}

#logo {
	position: relative;
	width: 281px;
	margin: 35px auto 10px;
}
.logo {
	position: relative;
	width: 281px;
	margin: 35px auto 10px;
}

.scorebubble {
	position: absolute;
	top: -10px;
	right: -10px;
    height: 40px;
    width: 40px;
    border-radius: 20px;
    background: #dfddd6;
    /* border: 1px solid #000; */
    z-index: 1;
}
.score_cur {
	position: absolute;
	top: -10px;
	right: -10px;
	line-height: 40px;
    height: 40px;
    width: 40px;
    text-align: center;
    color: #000;
	font-family: 'Noto Sans';
	font-style: normal;
    font-size: 15px;
    z-index: 99;
}

.scorebubble_prev {
	position: absolute;
	top: 10px;
	right: -10px;
    height: 30px;
    width: 30px;
    border-radius: 15px;
    background: #dfddd6;
    /* border: 1px solid #000; */
    z-index: 1;
}
.score_prev {
	position: absolute;
	top: 10px;
	right: -10px;
	line-height: 30px;
    height: 30px;
    width: 30px;
    text-align: center;
    color: #000;
	font-family: 'Noto Sans';
	font-style: normal;
    font-size: 11px;
    z-index: 99;
}

.songcontainer {
	position: relative;
	height: 50px;
}

.prevsong {
	position: relative;
	height: 50px;
}

.box {
	width: 310px;
	background: #dfddd6; /* #e2e1d5 */
	border-radius: 5px;
	margin: 20px auto 10px;
	line-height: 24px;
}
.padding {
	padding: 5px 0px 5px 5px;
}

.songbox {
	position: relative;
	width: 300px;
	background: #dfddd6; /* #e2e1d5 */
	border-radius: 5px;
	margin: 20px auto 10px;
	padding: 5px;
	line-height: 24px;
}
.songbox_blank {
	position: relative;
	width: 300px;
	margin: 20px auto 10px;
	padding: 5px;
	line-height: 24px;
}
.songbox_blue {
	border: 1px solid #1A2C86;
	box-shadow: 0px 0px 5px #1A2C86;
}
.songbox_green {
	border: 1px solid #0B933B;
	box-shadow: 0px 0px 5px #0B933B;
}
.songbox_orange {
	border: 1px solid #EB4E1B;
	box-shadow: 0px 0px 5px #EB4E1B;
}
.songbox_purple {
	border: 1px solid #6A2985;
	box-shadow: 0px 0px 5px #6A2985;
}
.songbox_red {
	border: 1px solid #E5001C;
	box-shadow: 0px 0px 5px #E5001C;
}
.songbox_yellow {
	border: 1px solid #FFD814;
	box-shadow: 0px 0px 5px #FFD814;
}
.songbox p {
	margin: 0 0 5px 0;
}
.listennow {
	position: relative;
	width: 250px;
	background: #dfddd6;
	border: 1px solid #283744;
	border-radius: 5px;
	margin: 30px auto 30px;
	padding: 30px 0px 30px 0px;
	font-size: 35px;
	font-family: 'Noto Sans Bold';
	text-align: center;
}
.listennow a {
	color: #000;
	text-decoration: none;
}

.whitetext {
	color: #FFF;
}

.blacktext {
	color: #000;
}

.opacity100 {
	opacity: 1.0;
	filter:alpha(opacity=100); /* For IE8 and earlier */
}

.opacity90 {
	opacity: 0.9;
	filter:alpha(opacity=90); /* For IE8 and earlier */
}

.opacity80 {
	opacity: 0.8;
	filter:alpha(opacity=80); /* For IE8 and earlier */
}

.opacity70 {
	opacity: 0.7;
	filter:alpha(opacity=70); /* For IE8 and earlier */
}

.opacity60 {
	opacity: 0.6;
	filter:alpha(opacity=60); /* For IE8 and earlier */
}

.opacity50 {
	opacity: 0.5;
	filter:alpha(opacity=50); /* For IE8 and earlier */
}

.opacity40 {
	opacity: 0.4;
	filter:alpha(opacity=40); /* For IE8 and earlier */
}

.opacity30 {
	opacity: 0.3;
	filter:alpha(opacity=30); /* For IE8 and earlier */
}

.opacity20 {
	opacity: 0.2;
	filter:alpha(opacity=20); /* For IE8 and earlier */
}

.opacity10 {
	opacity: 0.1;
	filter:alpha(opacity=10); /* For IE8 and earlier */
}

.opacity0 {
	opacity: 0;
	filter:alpha(opacity=0); /* For IE8 and earlier */
}

.opacity100:hover {
	opacity: 1.0;
	filter:alpha(opacity=100); /* For IE8 and earlier */
}

.opacity90:hover {
	opacity: 1.0;
	filter:alpha(opacity=100); /* For IE8 and earlier */
}

.opacity80:hover {
	opacity: 1.0;
	filter:alpha(opacity=100); /* For IE8 and earlier */
}

.opacity70:hover {
	opacity: 1.0;
	filter:alpha(opacity=100); /* For IE8 and earlier */
}

.opacity60:hover {
	opacity: 1.0;
	filter:alpha(opacity=100); /* For IE8 and earlier */
}

.opacity50:hover {
	opacity: 1.0;
	filter:alpha(opacity=100); /* For IE8 and earlier */
}

.opacity40:hover {
	opacity: 1.0;
	filter:alpha(opacity=100); /* For IE8 and earlier */
}

.opacity30:hover {
	opacity: 1.0;
	filter:alpha(opacity=100); /* For IE8 and earlier */
}

.opacity20:hover {
	opacity: 1.0;
	filter:alpha(opacity=100); /* For IE8 and earlier */
}

.opacity10:hover {
	opacity: 1.0;
	filter:alpha(opacity=100); /* For IE8 and earlier */
}

.opacity0:hover {
	opacity: 1.0;
	filter:alpha(opacity=100); /* For IE8 and earlier */
}

.blue {
	background-color: #1A2C86;
}
.green {
	background-color: #0B933B;
}
.orange {
	background-color: #EB4E1B;
}
.purple {
	background-color: #6A2985;
}
.red {
	background-color: #E5001C;
}
.yellow {
	background-color: #FFD814;
}

/* Desktop Navigation */

nav {
	height: 40px;
	width: 100%;
	background: #262422;
	font-size: 14pt;
	font-family: 'Noto Sans Bold';
	position: relative;
	/* border-bottom: 2px solid #ec4e1b; */
}
.navbar_blue {
	box-shadow: 0px 10px 40px #1A2C86;
}
.navbar_green {
	box-shadow: 0px 10px 40px #0B933B;
}
.navbar_orange {
	box-shadow: 0px 10px 40px #EB4E1B;
}
.navbar_purple {
	box-shadow: 0px 10px 40px #6A2985;
}
.navbar_red {
	box-shadow: 0px 10px 40px #E5001C;
}
.navbar_yellow {
	box-shadow: 0px 10px 40px #FFD814;
}
nav ul {
	padding: 0;
	margin: 0 auto;
	width: 600px;
	height: 40px;
}
nav li {
	display: inline;
	float: left;
}
nav a {
	display: inline-block;
	width: 150px;
	text-align: center;
	text-decoration: none;
	line-height: 40px;
	/* background-color: #333; */
	/* text-shadow: 0px 0px 8px #DDD; */
}
.text_blue {
	color: #1A2C86;
}
.text_green {
	color: #0B933B;
}
.text_orange {
	color: #EB4E1B;
}
.text_purple {
	color: #6A2985;
}
.text_red {
	color: #E5001C;
}
.text_yellow {
	color: #FFD814;
}
nav li a {
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
}
.border_blue {
	border-right: 1px solid #1A2C86;
}
.border_green {
	border-right: 1px solid #0B933B;
}
.border_orange {
	border-right: 1px solid #EB4E1B;
}
.border_purple {
	border-right: 1px solid #6A2985;
}
.border_red {
	border-right: 1px solid #E5001C;
}
.border_yellow {
	border-right: 1px solid #FFD814;
}
nav li:last-child a {
	border-right: 0;
}
nav a:hover, nav a:active {
	background-color: #333;
}
nav a#pull {
	display: none;
}

#the-sticky-div.sticky {
     position: fixed;
     top: 0;
}

/* Form Elements */


form {
	margin-bottom: 20px; }
fieldset {
	margin-bottom: 20px; }
input[type="submit"] {
    display: inline-block;
    text-decoration: none;
    font: bold 12px/12px HelveticaNeue, Arial;
	margin: 0 3% 0 3%;
    padding: 8px 11px;
    color: #555;
    border: 1px solid #dedede;
    border-radius: 5px;

    background: #f5f5f5;
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#f0f0f0'); /*  IE */
    background: -webkit-gradient(linear, left top, left bottom, from(#f9f9f9), to(#f0f0f0)); /*  WebKit */
    background: -moz-linear-gradient(top,  #f9f9f9, #f0f0f0);
    border-color: #dedede #d8d8d8 #d3d3d3;
    color: #555;
    text-shadow: 0 1px 0 #fff;
    -webkit-box-shadow: 0 1px 1px #eaeaea, inset 0 1px 0 #fbfbfb;
    -moz-box-shadow: 0 1px 1px #eaeaea, inset 0 1px 0 #fbfbfb;
    box-shadow: 0 1px 1px #eaeaea, inset 0 1px 0 #fbfbfb;
}
input[type="text"],
input[type="number"],
input[type="password"],
input[type="email"],
textarea,
select {
	position: relative;
	border: 1px solid #ccc;
	padding: 3%;
	margin: 0px 3% 20px 3%;
	outline: none;
	border-radius: 5px;
	color: #777;
	width: 88%;
	display: block;
	background: #fff; }
select {
	padding: 0; }
input[type="text"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
textarea:focus {
	border: 1px solid #aaa;
	color: #444;
	-moz-box-shadow: 0 0 3px rgba(0,0,0,.2);
	-webkit-box-shadow: 0 0 3px rgba(0,0,0,.2);
	box-shadow:  0 0 3px rgba(0,0,0,.2); }
textarea {
	min-height: 60px; }
label,
legend {
	display: block;
	font-weight: bold;
	font-size: 13px;  }
select {
	width: 220px; }
input[type="checkbox"] {
	display: inline; }
label span,
legend span {
	font-weight: normal;
	font-size: 13px;
	color: #444; }


.likebtn, .dislikebtn {
	position: relative;
	display: inline;
	margin: 0px;
	padding: 0px;
	float: left;
	font-size: 14px;
	font-family: 'Noto Sans', sans-serif;
	font-weight: normal;
    text-decoration: none;
	width: 50%;
    height: 35px;
    color: #555;
    border: 1px solid #dedede;
    border-radius: 5px;

    background: #f5f5f5;
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#f0f0f0'); /*  IE */
    background: -webkit-gradient(linear, left top, left bottom, from(#f9f9f9), to(#f0f0f0)); /*  WebKit */
    background: -moz-linear-gradient(top,  #f9f9f9, #f0f0f0);
    border-color: #dedede #d8d8d8 #d3d3d3;
    color: #555;
    text-shadow: 0 1px 0 #fff;
    box-shadow: 0 1px 1px #eaeaea, inset 0 1px 0 #fbfbfb;
}

.submitted {
	text-align: center;
	font-size: 18px;
}



.ratings th {
	padding: 4px 0px 4px 0px;
	text-align: left;
	vertical-align: middle;
}

.ratings td {
	padding: 4px 0px 4px 0px;
	text-align: left;
	vertical-align: middle;
}

.score {
	width: 23%;
	text-align: center;
}

.scorename {
	font-size: 11px;
	line-height: 12px;
}


/* Footer */

.footer {
	clear: both;
}


/*Styles for screen 768px and lower*/
@media screen and (max-width: 768px) {


}

/*Styles for screen 515px and lower*/
@media screen and (max-width: 768px) {
	#wrapper {
		width: 94%;
		margin: 0% 3% 0% 3%;
	}
	.wrapper {
		width: 94%;
		margin: 0% 3% 0% 3%;
	}
	.wrapper_np {
		width: 94%;
		margin: 0% 3% 0% 3%;
	}
	.leftcol, .rightcol {
		position: relative;
		width: 94%;
		margin: 10px 0 10px 0;
		padding: 3%;
	}
	nav {
		border-bottom: 0;
		height: auto;
	}
	nav ul {
  		width: 100%;
  		display: none;
  		height: auto;
	}
  	nav li {
        display: none;
  		width: 50%;
  		float: left;
  		position: relative;
  	}
  	nav li a {
        display: none;
		border-bottom: 1px solid #333;
		border-right: 1px solid #333;
	}
	nav li:last-child a {
		border-right: 1px solid;
	}
  	nav a {
	  	text-align: left;
	  	width: 100%;
	  	text-indent: 25px;
  	}
	nav a#pull {
		display: block;
		background-color: #262422;
		width: 100%;
		position: relative;
	}
	nav a#pull:after {
		content:"";
		/* background: url('../images/navicon.png') no-repeat; */
		width: 30px;
		height: 30px;
		display: inline-block;
		position: absolute;
		right: 15px;
		top: 10px;
	}
	input[type="text"],
	input[type="number"],
	input[type="password"],
	input[type="email"],
	textarea,
	select {
		position: relative;
		padding: 3%;
		margin: 0 0 20px 0;
		width: 94%;
	}
	input[type="submit"] {
		position: relative;
		margin: 0;
		padding: 3%;
		width: 100%;
	}
}

/*Smartphone*/
@media only screen and (max-width : 320px) {

	audio {
		width: 94%;
	}
	.box {
		position: relative;
		width: 94%;
		margin: 10px auto 0;
	}
	.padding {
		padding: 3% 0% 3% 3%;
	}
	.songbox, .songbox_blank {
		position: relative;
		width: 88%;
		margin: 10px auto 0;
		padding: 3%;
	}

	nav li {
		display: block;
		float: none;
		width: 100%;
	}
	nav li a {
		border-bottom: 1px solid #333;
	}
}