/*	Less Framework 4
	http://lessframework.com
	by Joni Korpi
	License: http://opensource.org/licenses/mit-license.php	*/


/*	Resets
	------	*/

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, 
p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em, 
img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, hr, 
dl, dt, dd, ol, ul, li, fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figure, figcaption, hgroup, 
menu, footer, header, nav, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-family:Trebuchet MS,Verdana,Sans-Serif;
}

article, aside, canvas, figure, figure img, figcaption, hgroup,
footer, header, nav, section, audio, video {
	display: block;
}

a img {border: 0;}

body {
	-webkit-text-size-adjust: 100%; /* Stops Mobile Safari from auto-adjusting font-sizes */
	background-color:#000000;
}



/* default styles */


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

.left
{
  display:block;
  width:70%;
  float:left;
}

.main_header
{
  height:195px;
  width:100%;
  background-image:url(../img/logo.gif);
  background-position:top center;
  background-repeat:no-repeat;
}

.facebooklike
{
  position:absolute;
  top:2px;
  left:2px;	
}


#upgrade
{
	display:none;
	background-color:#eeeeee;
	border-bottom:2px solid #000000;
	height:50px;
	width:100%;
	color:#000000;
	font-size:15px;
	font-weight:bold;
	padding:10px;
	text-align:center;
}

#upgrade A
{
	color:#a1a1a1;
}

/* ----- navigation */

nav
{
  	width:100%;
	height:35px;
	position:absolute;
	margin-top:160px;
	text-align:center;
}

nav ul, nav li
{
  margin:0px;
  padding:0px;
  list-style:none;
  float:left;	
}

nav li a:link, nav li a:active, nav li a:visited
{
  display:block;
  height:35px;
  padding:0px 20px;
  font-size:15px;
  line-height:35px;
  color:#ffffff;
  text-decoration:none;
  margin-right:2px;
  background-color:#202020;
  /* Safari 4-5, Chrome 1-9 */
  background: -webkit-gradient(linear, left bottom, left top, from(#121212), to(#797979));
  /* Safari 5.1, Chrome 10+ */
  background: -webkit-linear-gradient(bottom, #121212, #202020);
  /* Firefox 3.6+ */
  background: -moz-linear-gradient(bottom, #121212, #202020);
  /* IE 10 */
  background: -ms-linear-gradient(bottom, #121212, #202020);
  /* Opera 11.10+ */
  background: -o-linear-gradient(bottom, #121212, #202020);
}


nav li a.active
{
  background-color:#797979;
  text-shadow:1px 1px #202020;
  /* Safari 4-5, Chrome 1-9 */
  background: -webkit-gradient(linear, left top, left bottom, from(#bababa), to(#797979));
  /* Safari 5.1, Chrome 10+ */
  background: -webkit-linear-gradient(top, #bababa, #797979);
  /* Firefox 3.6+ */
  background: -moz-linear-gradient(top, #bababa, #797979);
  /* IE 10 */
  background: -ms-linear-gradient(top, #bababa, #797979);
  /* Opera 11.10+ */
  background: -o-linear-gradient(top, #bababa, #797979);
}

nav li a:hover
{
  background-color:#202020;
  /* Safari 4-5, Chrome 1-9 */
  background: -webkit-gradient(linear, left bottom, left top, from(#202020), to(#797979));
  /* Safari 5.1, Chrome 10+ */
  background: -webkit-linear-gradient(bottom, #202020, #797979);
  /* Firefox 3.6+ */
  background: -moz-linear-gradient(bottom, #202020, #797979);
  /* IE 10 */
  background: -ms-linear-gradient(bottom, #202020, #797979);
  /* Opera 11.10+ */
  background: -o-linear-gradient(bottom, #202020, #797979);
}

.content
{
	width:100%;
}

aside
{
	display:block;
	width:29%;
	float:right;	
}

/* ---- accordeon classes & behaviour */

.accordeon .songheader
{
  display:block;
  height:30px;  
  font-size:14px;
  font-weight:normal;
  line-height:30px;
  color:#ffffff;
  text-align:center;
  text-shadow:1px 1px #202020;
  background-color:#202020;	
  text-decoration:none;
  /* Safari 4-5, Chrome 1-9 */
  background: -webkit-gradient(linear, left bottom, left top, from(#121212), to(#202020));
  /* Safari 5.1, Chrome 10+ */
  background: -webkit-linear-gradient(bottom, #121212, #202020);
  /* Firefox 3.6+ */
  background: -moz-linear-gradient(bottom, #121212, #202020);
  /* IE 10 */
  background: -ms-linear-gradient(bottom, #121212, #202020);
  /* Opera 11.10+ */
  background: -o-linear-gradient(bottom, #121212, #202020);
}

.accordeon .songheader:active
{
  background-color:#797979;
  /* Safari 4-5, Chrome 1-9 */
  background: -webkit-gradient(linear, left bottom, left top, from(#202020), to(#797979));
  /* Safari 5.1, Chrome 10+ */
  background: -webkit-linear-gradient(bottom, #202020, #797979);
  /* Firefox 3.6+ */
  background: -moz-linear-gradient(bottom, #202020, #797979);
  /* IE 10 */
  background: -ms-linear-gradient(bottom, #202020, #797979);
  /* Opera 11.10+ */
  background: -o-linear-gradient(bottom, #202020, #797979);
}

.accordeon section:target .songheader, .accordeon section:first-of-type .songheader
{
  background-color:#797979;
  background: -webkit-gradient(linear, left bottom, left top, from(#202020), to(#797979));
  /* Safari 5.1, Chrome 10+ */
  background: -webkit-linear-gradient(bottom, #202020, #797979);
  /* Firefox 3.6+ */
  background: -moz-linear-gradient(bottom, #202020, #797979);
  /* IE 10 */
  background: -ms-linear-gradient(bottom, #202020, #797979);
  /* Opera 11.10+ */
  background: -o-linear-gradient(bottom, #202020, #797979);
}

.songheader span
{
  font-size:11px;	
}

/* collapsed*/
.accordeon section
{
  display:block;
  height:30px;
  border-bottom:2px solid #000000;
  overflow:hidden;
  -webkit-transition:all 0.3s ease-in-out;
  -moz-transition:all 0.3s ease-in-out;
  -o-transition:all 0.3s ease-in-out;
  -ms-transition:all 0.3s ease-in-out;	
  -transition:all 0.3s ease-in-out;
  background-color:#131313;
}

/* expanded */
.accordeon section:target
{
  display:block;
  height:290px;
  overflow:hidden;
  -webkit-transition:all 0.3s ease-in-out;
  -moz-transition:all 0.3s ease-in-out;
  -o-transition:all 0.3s ease-in-out;
  -ms-transition:all 0.3s ease-in-out;	
  -transition:all 0.3s ease-in-out;
}

.song:first-of-type
{
  display:block;
  height:290px;
  overflow:hidden;
  -webkit-transition:all 0.3s ease-in-out;
  -moz-transition:all 0.3s ease-in-out;
  -o-transition:all 0.3s ease-in-out;
  -ms-transition:all 0.3s ease-in-out;	
  -transition:all 0.3s ease-in-out;
}


/* open first item */

.accordeon section:first-child .songheader
{
  background-color:#797979;
  background: -webkit-gradient(linear, left bottom, left top, from(#202020), to(#797979));
  /* Safari 5.1, Chrome 10+ */
  background: -webkit-linear-gradient(bottom, #202020, #797979);
  /* Firefox 3.6+ */
  background: -moz-linear-gradient(bottom, #202020, #797979);
  /* IE 10 */
  background: -ms-linear-gradient(bottom, #202020, #797979);
  /* Opera 11.10+ */
  background: -o-linear-gradient(bottom, #202020, #797979);
}


/* accordeon contents */

.song
{
  font-size:12px;
  color:#A9A9A9;
  text-align:center;
}

.song P
{
  text-align:center;
  padding:8px 10px 10px 10px;
  clear:both;	
}

.song a:link img, .song a:active img, .song a:visited img
{
  display:block;
  height:150px;
  width:150px;	
  margin:0px;
  padding:0px;
  border:1px outset #CCCCCC;
  clear:both;
  margin:0 auto;
}

.song a:hover img
{
  display:block;
  height:150px;
  width:150px;	
  margin:0px;
  padding:0px;
  border:1px inset #CCCCCC;
  clear:both;
  margin:0 auto;
}

.download
{
	color:#A9A9A9;
	text-decoration:underline;
	font-size:11px;
}

.song object, .song a:link img, .song a:active img, .song a:visited img, .song a:hover img
{
  display:none;
}

/* text content */

.textcontent
{
  font-size:13px;
  line-height:25px;
  color:#A9A9A9 !important;	
  padding:0px 30px 20px 20px;
}

.textcontent_header
{
  display:block;
  height:20px;
  background: -webkit-gradient(linear, left top, left bottom, from(#797979), to(#000000));
  /* Safari 5.1, Chrome 10+ */
  background: -webkit-linear-gradient(top, #797979, #000000);
  /* Firefox 3.6+ */
  background: -moz-linear-gradient(top, #797979, #000000);
  /* IE 10 */
  background: -ms-linear-gradient(top, #797979, #000000);
  /* Opera 11.10+ */
  background: -o-linear-gradient(top, #797979, #000000);  
}

.textcontent a:link, .textcontent a:active, .textcontent a:visited, .textcontent a:hover
{
  color:#ffffff;	
}

.shop_header
{
  display:block;
  height:20px;
  background: -webkit-gradient(linear, left top, left bottom, from(#797979), to(#202020));
  /* Safari 5.1, Chrome 10+ */
  background: -webkit-linear-gradient(top, #797979, #202020);
  /* Firefox 3.6+ */
  background: -moz-linear-gradient(top, #797979, #202020);
  /* IE 10 */
  background: -ms-linear-gradient(top, #797979, #202020);
  /* Opera 11.10+ */
  background: -o-linear-gradient(top, #797979, #202020);  
}

.interview
{
  -moz-column-count: 2;
  -moz-column-gap: 1em;
  -moz-column-rule: none;
  -webkit-column-count: 2;
  -webkit-column-gap: 1em;
  -webkit-column-rule: none;
}

.textcontent H1, .textcontent strong
{
  color:#ffffff;	
}

.interview IMG
{	
  margin-left:7%;
}

.textcontent TABLE
{
  width:100%;
  text-align:left;
  margin-top:10px;
  margin-bottom:10px;
}

.textcontent TABLE TH, .textcontent TABLE TD
{
  padding:5px;
}

.textcontent TABLE TH
{
  background-color:#131313;
}

.textcontent TABLE TD
{
  border-bottom:2px solid #131313;
}


/* aside items */

aside section
{
  display:block;
  clear:both;
  padding:10px;
  border-bottom:2px solid #202020;	
}

aside section h3
{
  color:#ffffff;	
  font-weight:normal;
  font-size:14px;
  margin:0px;
}

aside section h3:before
{
  content:':: ';	
}


/* social media section */

.socialmedia
{
  height:150px;
  border-bottom:0px;
  padding-top:30px;
}

.socialmedia a
{
 	height:32px;
	width:32px;
	display:block;
	float:right;
	border:none;
	background-position:top left;
	background-repeat:no-repeat;
	margin:0px 2px 5px 5px;	
}

.facebook { background-image:url(../img/icons/facebook.png); }
.twitter { background-image:url(../img/icons/twitter.png); }
.lastfm { background-image:url(../img/icons/lastfm.png); }
.myspace { background-image:url(../img/icons/myspace.png); }
.youtube { background-image:url(../img/icons/youtube.png); }
.rss { background-image:url(../img/icons/rss.png); }
.officialfm { background-image:url(../img/icons/officialfm.png); }
.soundcloud { background-image:url(../img/icons/soundcloud.png); }
.itunes { background-image:url(../img/icons/itunes.png); }

/* tweets */

.tweets
{
  padding:10px 10px 10px 0px;
}

/* links */

.links A:link, .links A:active, .links A:visited
{
	color:#a9a9a9;
	text-decoration:underline;
	font-size:13px;
}

.links A:hover
{
	color:#ffffff;
	text-decoration:underline overline;
} 

/* footer */

footer
{
  display:block;
  width:100%;
  clear:both;
  background-color:#1c1c1c;
  height:30px;
  line-height:30px;
  border-top:2px solid #000000;	
  border-bottom:2px solid #000000;
  text-align:right;
  /* Safari 4-5, Chrome 1-9 */
  background: -webkit-gradient(linear, left bottom, left top, from(#202020), to(#121212));
  /* Safari 5.1, Chrome 10+ */
  background: -webkit-linear-gradient(bottom, #202020, #121212);
  /* Firefox 3.6+ */
  background: -moz-linear-gradient(bottom, #202020, #121212);
  /* IE 10 */
  background: -ms-linear-gradient(bottom, #202020, #121212);
  /* Opera 11.10+ */
  background: -o-linear-gradient(bottom, #202020, #121212);
}


@media only screen and (min-width: 768px) and (max-width: 991px) {
  

}



@media only screen and (max-width: 767px) {
	
  .socialmedia
  {
	height:40px;
	text-align:center; 
    padding-top:10px;
  }
  
  .main_header
  {
	height:150px;
	moz-background-size:cover;
	webkit-background-size:cover;
	background-size:cover;
  }
  
  nav
  {
	  margin-top:125px;
  }
  
  nav li a:link, nav li a:active, nav li a:visited, nav li a:hover
  {
	  font-size:13px;
	  height:25px;
	  line-height:25px;
  }
	
  .left, aside
  {
	float:none;
	clear:both;	
	width:100%;
  }
  
  .links
  {
  -moz-column-count: 2;
  -moz-column-gap: 1em;
  -moz-column-rule: none;
  -webkit-column-count: 2;
  -webkit-column-gap: 1em;
  -webkit-column-rule: none;
  }
  
  .accordeon section
  {
	height:50px;  
  }
  
  .accordeon section:target
  {
	height:290px;  
  }
  
  .accordeon .songheader
  {
	height:50px;
	line-height:50px;  
  }
  
.interview
{
  -moz-column-count: 1;
  -moz-column-gap: 0em;
  -moz-column-rule: none;
  -webkit-column-count: 1;
  -webkit-column-gap: 0em;
  -webkit-column-rule: none;
}

.interview IMG
{
  float:none;
  clear:both;
  margin:0px 0px 10px 0px;	
}
	
}


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


  .main_header
  {
	moz-background-size:cover;
	webkit-background-size:cover;
	background-size:cover;
  }

 .left, aside
  {
	float:none;
	clear:both;	
	width:100%;
  }
  
  .links
  {
  -moz-column-count: 3;
  -moz-column-gap: 1em;
  -moz-column-rule: none;
  -webkit-column-count: 3;
  -webkit-column-gap: 1em;
  -webkit-column-rule: none;
  }
  
  .shoutbox
  {
	width:47%;
	clear:none;
	float:left;  
  }
  
  .tweets
  {
	width:47%;
	clear:none;
	float:right; 
	padding-top:59px; 
  }
  
.interview
{
  -moz-column-count: 1;
  -moz-column-gap: 0em;
  -moz-column-rule: none;
  -webkit-column-count: 1;
  -webkit-column-gap: 0em;
  -webkit-column-rule: none;
}

.interview IMG
{
  float:left;
  margin:0px 10px 10px 0px;	
}
  
  

	
}