/*
Theme Name: MashUp Charts 2017
Theme URI: http://mashup-charts.com
Description: Custom
Author: raphaelhofer
Author URI: http://raphaelhofer.com
Version: 1.0
*/

/************************ 0: undoHTML ************************/
/* no list-markers by default, since lists are used more often for semantics */
ul {list-style-type:none;}
/* avoid browser default inconsistent heading font-sizes */
/* and pre/code too */
h1, h2, h3, h4, h5, h6, pre, code { font-size:1em; }
ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, body, html, iframe, p, blockquote, table, thead, tbody, tfoot, caption, th, tr, td, a, fieldset { margin:0; padding:0; border-collapse:collapse; border:0}
input, textarea, select, option { font-size:0.938em; margin:0; padding:0; border-collapse:collapse }
/* whoever thought blue linked was a good idea? */
a img { border:none }
a, a:link, a:visited { text-decoration:none; color:#fff; outline:none; }
img { border:0; }

/************************ 1: nice way to clear divs in gecko browsers without superflous markup ************************/
.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix {display: inline-table;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */


/************************ 2: BODY / HTML ************************/
/* BODY */
html {
margin:0;
padding:0;
}
/* End hide from IE-mac */
body {
/*style*/
background-color:#8E7B43;
margin:0;
padding:0;
text-align:center;
/*default*/
color:#fff;
font-family:Arial, sans-serif;
font-size:0.750em;
line-height:0.813em;
}

#wrapper {
margin:20px;
padding-left:140px;
}


/* CONTENT */

#content {
max-width:650px; /*810-160*/
min-height:500px;
background-color:#fff;
margin:0 auto;
padding:60px 70px 50px 70px;
-webkit-border-radius:34px;
-moz-border-radius:34px;
border-radius:34px;
/*
-webkit-box-shadow: 8px 8px 8px 0px rgba(0,0,0,0.5);
-moz-box-shadow: 8px 8px 8px 0px rgba(0,0,0,0.5);
box-shadow: 8px 8px 8px 0px rgba(0,0,0,0.5);
*/
text-align:left;
}


/* HTML */

h1 {
font-size:2.250em;
line-height:1.125em;
margin-bottom:15px;
}
h2, h3 {
font-size:1.438em;
line-height:1.438em;
margin-bottom:10px;
}
h4 {
font-size:1em;
line-height:1.25em;
margin:0;
}
fieldset {
padding:0 !important;
}
label {
clear:both;
float:left;
line-height:2em;
}
input, textarea, select {
color:#fff;
background-color:#000;
padding:3px;
border:solid 2px #8E7B43;
-webkit-border-radius:2px;
-moz-border-radius:2px;
border-radius:2px;
float:left;
margin-bottom:10px;
}
textarea {
font-size:1.0em;
font-family:Arial, sans-serif;
}
input[type=button], input[type=submit] {
clear:both;
font-size:1em;
font-weight:bold;
color:#000;
background-color:#8E7B43;
padding:2px 20px;
width:auto !important;
min-width:130px;
-webkit-border-radius:8px;
-moz-border-radius:8px;
border-radius:8px;
cursor:pointer;
}


/* HEADER + MENU */

#header {
position:fixed;
z-index:99;
width:200px;
margin:-32px 0 0 -220px;
}
#header-mobile {
display:none;
position:absolute;
top:10px;
left:10px;
border:#fff;
background-color:#fff;
padding:8px;
}
#header-logo {
background-image:url('i/header_top.png');
text-align:center;
}
#header-logo img {
margin-top:30px;
}
#header-bottom {
height:32px;
}

nav {
display:block;
background-image:url('i/header_bg.png');
}
nav ul {
margin:0 28px;
padding-top:12px;
}
nav li {
display:block;
margin-top:4px;
border:solid 1px #fff;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
text-align:center;
}
nav li a {
display:block;
width:100%;
height:100%;
font-size:1.167em;
line-height:2em;
font-weight:bold;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
}
nav li a:hover {
background-color:#333333;
}



/* GLOBAL MODULES */

.module {
clear:both;
background-color:#000;
padding:10px;
margin-bottom:10px;
-webkit-border-radius:8px;
-moz-border-radius:8px;
border-radius:8px;
/*
-webkit-box-shadow: -1px -1px 5px 1px rgba(0,0,0,0.3);
-moz-box-shadow: -1px -1px 5px 1px rgba(0,0,0,0.3);
box-shadow: -1px -1px 5px 1px rgba(0,0,0,0.3);
*/
}
.module li {
display:block;
height:47px;
overflow:hidden;
margin-bottom:10px;
}
.module .mp3 li {
height:81px;
}
.module li a {
display:block;
color:#8E7B43;
/*font-weight:bold;*/
font-size:1em;
line-height:1.25em;
}
.module li a h4 {
color:#8E7B43;
}
.module li a:hover, 
.module li a:hover h4 {
color:#fff;
}
.module li a time {
float:left;
height:47px;
width:47px;
color:#fff;
}
.module .play li a {
background-image:url('i/button_play.jpg');
background-repeat:no-repeat;
background-position:right top;
}

.badge {
width:45px;
height:43px;
padding-left:1px;
padding-top:2px;
color:#fff;
background-color:#8E7B43;
background:-webkit-linear-gradient(#bfb597, #8E7B43); /* For Safari 5.1 to 6.0 */
background:-o-linear-gradient(#bfb597, #8E7B43); /* For Opera 11.1 to 12.0 */
background:-moz-linear-gradient(#bfb597, #8E7B43); /* For Firefox 3.6 to 15 */
background:linear-gradient(#bfb597, #8E7B43); /* Standard syntax */
border:solid 1px #8E7B43;
-webkit-border-radius:8px;
-moz-border-radius:8px;
border-radius:8px;
float:left;
margin-right:8px;
font-size:2.938em;
line-height:45px;
font-weight:bold;
text-align:center;
}
.badge .smallrank {
font-size:0.688em;
vertical-align:top;
}
.badge .tinyrank {
font-size:0.531em;
vertical-align:top;
}

.button {
float:left;
border:solid 2px #8E7B43;
-webkit-border-radius:8px;
-moz-border-radius:8px;
border-radius:8px;
font-weight:normal;
color:#8E7B43 !important;
}
/*
.button:hover {
background-color:#3D341D;
}
*/
.button-white {
display:inline-block;
color:#999 !important;
line-height:26px;
text-align:center;
font-weight:bold;
margin:0 auto 10px auto;	
background-color:#fff;
/*
background:-webkit-linear-gradient(#fff, #E4E4E4); 
background:-o-linear-gradient(#fff, #E4E4E4); 
background:-moz-linear-gradient(#fff, #E4E4E4);
background:linear-gradient(#fff, #E4E4E4);	
*/	
border:1px solid #bababa;
-webkit-border-radius:8px;
-moz-border-radius:8px;
border-radius:8px;
/*
-webkit-box-shadow: -1px -1px 5px 1px rgba(0,0,0,0.1);
-moz-box-shadow: -1px -1px 5px 1px rgba(0,0,0,0.1);
box-shadow: -1px -1px 5px 1px rgba(0,0,0,0.1);	
*/	
}
.button-white:hover {
background-color:#f7f7f7;
/*
background:-webkit-linear-gradient(#fcfcfc, #e0e0e0);
background:-o-linear-gradient(#fcfcfc, #e0e0e0); 
background:-moz-linear-gradient(#fcfcfc, #e0e0e0);
background:linear-gradient(#fcfcfc, #e0e0e0);
*/
}

.preview {
width:65px;
height:43px;
margin:0 8px 0 0;
}
.mp3 .preview {
width:77px;
height:77px;
}
.social {
height:24px;
width:24px;
margin-left:7px;
}
.preview img,
.social img {
height:100%;
-webkit-border-radius:6px;
-moz-border-radius:6px;
border-radius:6px;
padding:0 !important;
}
.preview img {
width:100%;
}
.social-intro {
float:left;
line-height:28px;
}

.subscribe {
color:#bababa;
line-height:28px;
text-align:right;
}
.subscribe div {
display:inline-block;
vertical-align:top;
}

.search input {
width:64%;
margin-right:8px;
}
.search input[type=submit] {
clear:none;
width:35%;
margin:0;
}

.more {
display:block;
padding:5px 0;
}

.copy, .copy a {
color:#bbb;
text-align:center;
}

.w50 {
width:49%;
}
.w25 {
width:23%;
margin-right:5px;
}
.w11 {
width:9.65%;
margin-right:5px;
}
.l {
float:left;
margin-left:0 !important;
}
.r {
float:right;
margin-right:0 !important;
}


/* HOME */

.rsGCaption a {
color:#8E7B43;
}
.rsGCaption a:hover {
color:#fff;
}
.new-mp3 a {
display:block;
float:left;
width:33%;
color:#8E7B43;
}
.new-mp3 a:hover {
color:#fff;
}
.new-mp3 img {
float:left;
width:6em;
height:6em;
margin:0 5px 10px 0;
border:solid 1px #fff;
}
.new-mp3 h4 {
padding-top:1.25em;
padding-right:0.5em;
}


/* VIDEO SINGLE */

.video-title {
font-size:1.438em;
line-height:1.313em;
margin-left:57px;
padding-top:1px;
}
.video-title .smalltitle {
display:inline-block;
margin-top:-1px;
font-size:0.688em;
line-height:1.1em;
}
.video-container {
position:relative;
padding-bottom:56.25%;
height:0;
max-width:100%; 
overflow:hidden;
} 
.video-container iframe,
.video-container object,
.video-container embed {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
.video-tools {
margin:0 0 10px 0;
}
.video-tools a {
line-height:20px;
}
.video-tools img {
float:left;
} 
.post-ratings-intro,
.post-ratings-loading {
float:left;
line-height:28px; /*img+padding+border*/
height:auto !important;
}
.post-ratings-loading img {
float:left;
height:28px;
width:auto;
}
.post-ratings-stars {
padding:2px;
margin-left:7px;
height:20px;
}
.post-ratings-stars img {
height:100%;
}
.video-social {
float:right;
}
.video-credits {
position:relative;
margin-top:5px;
color:#8E7B43;
}
.video-credits a {
color:#8E7B43;
}
.video-artist {
float:left;
line-height:1.25em;
}
.video-fix {
float:right;
}
.video-fixcredits,
.video-broken {
padding:2px 4px 2px 2px;
margin-left:7px;
line-height:20px;
}
.video-fixcredits img,
.video-broken img {
float:left;
margin:0 2px;
}
#feedback-broken {
position: absolute;
width:100%;
margin-top:-33px;
background-color:#000;
color:#fff;
line-height:28px;
text-align:center;
}
.feedback-fixcredits {
display:none;
clear:both;
color:#fff;
padding-top:15px;
}
.feedback-fixcredits label {
width:110px;
}
.feedback-fixcredits input {
width:50%;
}


/* MASHER LIST */

.list-alpha {
height:auto !important;
min-height:47px;
}
.list-alpha ul {
display:block;
margin-left:57px
}
.list-alpha li {
height:auto;
margin-bottom:2px;
}
.list-alpha li a {
font-weight:normal;
}
.list-alpha li a h4 {
float:left;
margin-right:10px;
color:#fff;
}


/* MP3 */

.mp3-title {
font-size:1em;
line-height:1em;
margin:0 0 2px 0;
color:#fff;
}
.mp3-download,
.mp3-broken {
padding:2px 4px 2px 2px;
margin:4px 7px 0 0;
line-height:20px !important;
}
.mp3-download img,
.mp3-broken img {
float:left;
margin:0 2px;
}


/* TEXT */

.text p {
color:#dedede;
line-height:1.25em;
}
.text input, 
.text textarea,
.text select {
clear:both;
width:98%;
}
#notifyme {
width:auto !important;
margin:5px 5px 10px 0;
}
#imagecaptcha_1 {
width:270px !important;
}


/* BOX */
.config table {
width:94%;
}
.config td {
width:25%;
}
.config input {
width:55%;
}
.config select {
width:90%;
}
.config #pickfont,
.config #pickback,
.config #pickborder {
line-height:25px;
margin-left:6px;
}

#ci_code {
display:none;
}
#ci_code textarea {
font-family:Arial,sans-serif;
height:210px;
border:solid 1px #fff;
}


/* ADS */
#ad-sky {
width:160px;
height:600px;
position:fixed;
left:50%;
margin-left:400px;
margin-top:60px;
}
.ad-wrapper {
margin:0 auto;
text-align:center;
}


/* FOOTER */

footer {
display:none;

width:100%;
background-color:#000;
position:fixed;
bottom:0;
z-index:100;
border-top:solid 1px #fff;
}
#footer_ad {
width:100%;
max-width:970px;
margin:10px auto 0 auto;
text-align:center;
}
#google-ads-1 {
margin:0 auto;
}


/* RESPONSE */
@media only screen and (min-width:1150px) {
	#wrapper {
	padding-left:0;
	padding-right:40px;
	}
	#ad-sky {
	display:block;
	}
	#ad-leader {
	display:none;
	}	
}
@media only screen and (max-width:1149px) {
	#wrapper {
	padding-left:140px;
	padding-right:0;
	}
	#ad-sky {
	display:none;
	}
	#ad-leader {
	display:block;
	}
}


@media only screen and (min-width:993px) {
	.tablet-hide {
	display:block !important;
	}
}
	
@media only screen and (max-width:992px) {

	.tablet-hide {
	display:none;
	}
	#wrapper {
	padding:0;
	margin:70px 10px 10px 10px;
	}
	#content {
	min-width:560px; /*560 = 600-2x20*/
	padding:20px;
	padding-bottom:10px;
	-webkit-border-radius:17px;
	-moz-border-radius:17px;
	border-radius:17px;
	}
	#header {
	margin:0;
	top:0;
	left:0;
	width:100%;
	background-color:#000;
	}
	#header-mobile {
	display:block;
	}
	#header-logo, nav { 
	background-image:none;
	}
	#header-logo {
	height:auto;
	}
	#header-logo img {
	margin:8px 0;
	}
	nav {
	border-top:solid 2px #fff;
	border-bottom:solid 2px #fff;
	}	
	nav ul {
	margin:0;
	padding:0;
	}
	nav li {
	border:0;
	border-top:solid 2px #333;
	margin:0;
	-webkit-border-radius:0;
	-moz-border-radius:0;
	border-radius:0;
	}	
	nav li a {
	font-size:1.375em;
	line-height:2.25em;
	}	


}

@media only screen and (max-width:767px) {

	.mobile-hide {
	display:none;
	}
	
	.video-title .smalltitle {
	font-size:0.813em;
	line-height:1.188em;
	}
	.video-tools, 
	.video-credits,
	.module li h4,
	.module li p,
	.more,
	.rsGCaption a,
	.new-mp3,
	.mp3-title,
	.text p {
	font-size:1.25em;
	line-height:1.063em;
	}
	.mp3-download,
	.mp3-broken,
	.text label {
	font-size:1.25em !important;
	} 
	.search input,
	.config input,
	.config textarea,
	.config select,
	.tdomf_form input,
	.tdomf_form textarea {
	font-size:1.25em;
	line-height:1.25em;	
	}
	.button-white,
	.subscribe {
	font-size:1.25em;
	line-height:28px;
	}
	
	.rsGCaption {
	height:3em !important;
	}
	
	.new-mp3 h4 {
	padding-top:0;
	}
	.new-mp3 img {
	height:3.5em;
	width:3.5em;
	}	
		
	.post-ratings-intro,
	.post-ratings-loading {
	line-height:33px;
	}
	.social {
	height:29px;
	width:29px;
	}
	.post-ratings-stars {
	height:25px;
	}
	
	.video-fix {
	margin-top:3px;
	}
	
	.feedback-fixcredits label {
	width:150px;
	}
	
	.mp3 .preview {
	width:79px;
	height:79px;	
	}
	.module .mp3 li {
	height:83px;
	}
	
	.search input {
	width:55%;
	}

	.w11 {
	width:9.4%;
	}
	
}
@media only screen and (max-width:639px) {
	html, body {
	width:640px;
	}
}