/*  
Theme Name: 500 Mixes (mobile)
Theme URI: http://500mixes.com
Version: 1
Author: Eric Nord
Author URI: http://www.ejnord.com
*/

/************************************************************************************
RESET
*************************************************************************************/
html, body, address, blockquote, div, dl, form, h1, h2, h3, h4, h5, h6, ol, p, pre, table, ul,
dd, dt, li, tbody, td, tfoot, th, thead, tr, button, del, ins, map, object,
a, abbr, acronym, b, bdo, big, br, cite, code, dfn, em, i, img, kbd, q, samp, small, span,
strong, sub, sup, tt, var, legend, fieldset, figure {
	border:0;
    outline:0;
    vertical-align:baseline;
    margin:0;
    padding:0;
}

img, fieldset {
	border: 0;
}

/* set html5 elements to block */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 
    display: block;
}

/* set img max-width */
img {
	max-width: 100%;
	height: auto;
}
/* ie 8 img max-width */
@media \0screen {
  img { width: auto;}
}

html, body {
	font-family: arial,helvetica,sans-serif;
	width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
/*    overflow-x: hidden; */
}

#wrap {min-height: 100%;}

a {
	text-decoration: none;
}


/************************************************************************************
HEADER
*************************************************************************************/
#header {
	background:#000;
	width:100%;
	border:0px solid #ff0000;
	overflow:hidden;
}

#header-box {
	width:100%;
	padding:10px 0;
	border:0px solid #00ff00;
	overflow:hidden;
}

#site-logo {
	border:0px solid #ff0000;
	float:left;
	margin:1px 0 0 10px;
	height:45px;
	width:109px;
/*	background:url(images/500mixes.png); */
}

#site-logo a {
	border:0px solid #ff0000;
}

#logo {
	height:45px;
	width:109px;
	border:0px solid #ff0000;	
}

#tagline {
	color:#888;
	font-size:13px;
	margin:15px 10px 0 0;
	float:right;
	border:0px solid #ff0000;
}


/************************************************************************************
TORSO
*************************************************************************************/
#torso {
	overflow:auto;
	min-height:100%;
}

#torso-box {
	width:100%;
	margin:0 auto;
	border:0px solid #00ff00;
	padding:14px 0 560px;
	overflow:hidden;
}

#content {
	padding:0 10px 66px 10px;
	overflow:hidden;
}

.mix-info {
	border:0px solid #ff0000;
	overflow:hidden;
}

.details p {
	clear:both;
}



/************************************************************************************
general
*************************************************************************************/

h1 {
	font-size:19px;
	font-weight:normal;
	color:#aaa;
	text-transform: uppercase;
	margin:0 0 12px 0;
}

h2 {
	text-transform: uppercase;
	font-size:14px;
	font-weight:normal;
	color:#999;
	margin:0 0 13px 10px;
}

.mix {
	width:100%;
	float:left;
	padding:0 0 4px;
	border-top:1px solid #000;
}

.number {
	float:left;
	text-align:center;
	font-size: 14px;
	line-height:13px;
	width:45px;
	border:0px solid #0000ff;
	color:#fff;
	background: url(images/bg_date.png);
	margin:10px 12px 0 0;
}

.date {
	height:37px;
	padding:8px 0 0;
}

.month {
	color:#ccc;
	font-size:12px;
	font-weight:bold;
	text-transform:uppercase;
}

.dj {
	float:left;
	border:0px solid #00ff00;
	font-weight:bold;
	font-size:15px;
	line-height:19px;
	text-transform: uppercase;	
}

.details {
	padding:9px 0 0;
	float:left;
	border:0px solid #0000ff;
}

.title {
	display:block;
	font-weight:bold;
	font-size:13px;
	line-height:18px;
	border:0px solid #ff0000;
}

.desc {
	border:0px solid #00ff00;
	font-size:12px;
	color:#999;
	line-height:16px;
}

.audio {
	width:238px;
	position:relative;
	height:35px;
	float:left;
	border:0px solid #0000ff;
	padding:5px 0 0;
	margin:2px 0;
}

.audio a {
	display:block;
	cursor:pointer;
	position:absolute;
	top:5px;
	right:0;
	float:right;
	height:27px;
	width:27px;
	border:0px solid #ff0000;
	background:url(images/dl.png);
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}

.audio a:hover {
	background-position: 27px 0; 
}


/************************************************************************************
FOOTER (NEW)
*************************************************************************************/

#footer {
/* tablet */
	background:#404345;
	position: relative;
	margin-top: -620px; /* must match torso-box */ /* negative value of footer height */
	height: 620px; /* must match torso-box */
	clear:both;
	border-top:12px solid #ddd;
	width:100%;
} 

#footer-box {
	width:650px
/* tablet */
	min-width:660px;
	margin:0 auto;
	padding:20px 14px 0;
	border:0px solid #666;
	color:#ccc;
	overflow:hidden;
}

#about {
	float:left;
	clear:both;
	width:260px;
	border:0px solid #666;
}

#about p {
	float:left;
	line-height:18px;
	font-size:14px;
	color:#aaa;
	margin:2px 0 11px;
	padding:0;
}

#social {
	border:0px solid #666;
/* tablet */
	margin:13px 0 24px;
	float:left;
	width:241px;
	clear:both;
}

#social-media {
	margin:2px 0 0;
	border:1px solid #ff0000;
	overflow:hidden;
	float:left;
}

#social a {
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	color:#ccc;
	line-height:22px;
	margin:2px 10px 0 0;
	width:50px;
	height:50px;
	overflow:hidden;
	float:left;
	
}


a#facebook {
	background:url(http://500mixes.com/wp-content/themes/500mixes/images/facebook.png);
	width:50px;
	height:50px;
}

a#twitter {
	background:url(http://500mixes.com/wp-content/themes/500mixes/images/twitter.png);
	width:50px;
	height:50px;
}

a#facebook:hover {
	background:url(http://500mixes.com/wp-content/themes/500mixes/images/facebook_hov.png);
}

a#twitter:hover {
	background:url(http://500mixes.com/wp-content/themes/500mixes/images/twitter_hov.png);
}

#footer h3 {
	font-size:16px;
	color:#666;
	text-shadow: -1px -1px #333;
	margin:4px 0 8px 0;
	text-transform: uppercase;
	border:0px solid #ff0000;
}


/************************************************************************************
CHARTS
*************************************************************************************/

.charting {
	height:29px;
	padding:16px 0 0;
}

.chart-position {
	color:#fff;
	font-size:18px;
	font-weight:normal;
	text-transform:uppercase;
}

/************************************************************************************
CONTACT FORM
*************************************************************************************/

#contact {
	border:0px solid #00ff00;
	float:left;
	clear:both;
/* tablet: removed 
	width:418px; */

}

.wpcf7-form-control {
	background: #555;
	border:1px solid #000;
	border-radius: 3px;
    border-top: solid 1px #111;  
    border-left: solid 1px #111;  
    border-right: solid 1px #777;  
    border-bottom: solid 1px #777; 
    margin:4px 0 4px;
    padding:6px;
    color:#ccc;
    font-size:13px;
    font-family:Arial, Helvetica, sans-serif;
    line-height:15px;
}

.fieldwidth {
	width:280px;
}

#wpcf7-f384-t1-o1 textarea {

}

 
/* SEND BUTTON */ 
.wpcf7 input.wpcf7-submit{
    -webkit-transition: 0;
    -moz-transition: 0;
    -o-transition: 0;
    transition: 0;
    border: none;
    position: relative;
    color: #ccc;
    text-shadow: -1px -1px 0px #222;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    font-size: 13px;
	padding: 7px 15px;
    background-color: #333333;
}
 
/* On hover */
.wpcf7 input.wpcf7-submit:hover{
     color:#fff;
    cursor: pointer;
    text-decoration: none; 
    background-color: #000000;
}
 
/* On click */
.wpcf7 input.wpcf7-submit:active{
    top: 1px;
    color: #d8c6e2;
    background-color: #000000;
    background: -webkit-gradient(linear, left top, left bottom, from(#4d1b5c), to(#4d1b5c));    
    background:  -moz-linear-gradient(top, #4d1b5c, #4d1b5c);   
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#4d1b5c', endColorstr='#4d1b5c');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#4d1b5c, endColorstr=#4d1b5c)"; 
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}


/************************************************************************************
RADIO
*************************************************************************************/

a#radio {
	font-size:0.8em; 
	color:#fff; 
	padding:7px 9px 6px;
	margin-right:11px;
	background-color:#9C33FF;
	border-radius: 4px;
	text-transform: uppercase;
}

a#radio:hover {
	background-color:black;
	color:#fff000;
}