@import url(http://fonts.googleapis.com/css?family=Quicksand:300,400,700);
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css);


* { box-sizing: border-box; }
html, body { height: 100%; margin: 0;} 

body { 
  background:#1c1c1c;
  font-family: 'Quicksand', sans-serif; 
  margin: 0 auto;
  color: #ffffff;
  display: -webkit-flex; 
  display: -ms-flexbox;
  display: flex; 
  flex-direction: column;
}





.toggle, [id^=drop] { display: none; }

.banner img {
	width: 100%;
	border:2px solid #1c1c1c;
	/*padding:20px;*/
	margin:.2em;
}

.banner img:hover {
	border:2px solid #999;
}





/*header, footer { 
  min-width: 1000px;
}*/

header { 
  min-height: 65px;
  padding: 0;
  background: url(../pics/header.jpg) top center no-repeat; 
  width:100%;
  height: 64px;
  margin: 0px 0px 0px 0px;
  background-color:#000;
}
#logo {
	display:block;
	float:left;
	background:url(../pics/logo.png) top center no-repeat;
	width:353px;
	height:38px;
	margin-top:10px;
	margin-left:10px;
}

footer {
	flex: none;
	background:#0e0e0e;
	width:100%;
	height: 2em; 
	color:#666;
	position:fixed;
	bottom:0px;
	left:0px;
	z-index: 11;
	padding-top: .6em;
	padding-bottom: .6em;
	text-align: center;	
	font-family: sans-serif;
	font-size:.7em;
	border-top: 1px solid #1c1c1c;
}
footer a{ color: #666; }
footer a:hover{ color: #CCC; }

div.wrap { 
	height: 100%;
	display: -webkit-flex; 
	display: -ms-flexbox;
	display: flex;
	flex-flow: row wrap;
	padding: 0em; 
	background:#1c1c1c;
	min-height: 300px;
	/*min-width: 300px;	*/
   } 
  

nav, nav.sub, main, aside { 
	/*padding: 0.5em;*/
	height: 100%;
	}

nav { background:#444; flex:none; order:1; width: 220px;}
main { background:#1c1c1c; flex:1; order:2; } 
aside { background:#191919; flex:none; order:3}





/*div.wrap {
  flex: 1;
}*/


ul {
  list-style-type: none; 
  display: block;
  flex-direction: column;
  height: 100%;
  padding-left: 0px;
  margin: 0px; 
}


.accordion {
  color: #ced7e1;
  width: 100%;
}
.accordion .section {
  width: 100%;
}
.accordion .section input[type='radio'] {
  display: none;
}

.accordion .section input[type='radio']:checked + label {
  background: #444;
}
.accordion .section input[type='radio']:checked + label:before {
  content: " ";
  position: absolute;
  box-shadow: inset 3px 0 0 #f9ef90;
  height: 100%;
  left: 0;
}

.accordion .section input[type='radio']:checked ~ .content {
  max-height: 400px;

  opacity: 1;
  z-index: 10;
  overflow-y: auto;
  background: #000;
}

.accordion .section label {
  position: relative;
  cursor: pointer;
  padding: 10px 20px;
  display: table;
  background: #2d2d2d;;
  width: 100%;
  -webkit-transition: background 0.3s ease-in-out;
  -moz-transition: background 0.3s ease-in-out;
  -ms-transition: background 0.3s ease-in-out;
  transition: background 0.3s ease-in-out;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  color: #c8c8c8;
  font-weight:bold;
}

.accordion .section label:before {
  content: " ";
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  height: 1px;
  border-top: 1px solid #000;
  
}

.accordion .section label:hover {
  background: #444;
  
}
.accordion .section label span {
  display: table-cell;
  vertical-align: middle;
}

.accordion .section:last-of-type {
  border-bottom: 1px solid #000;
}
.accordion .section .content {
  max-height: 0;
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  -ms-transition: all 0.4s;
  transition: all 0.4s;
  opacity: 0;
  position: relative;
  overflow-y: hidden;
}

*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.left-menu {
  width: 220px;
}

.accordion {
  font-size: 14px;
}
.accordion .section .content {
  padding: 0 15px;
}
.accordion .section input[type='radio'] {
  display: none;
}

.accordion .section input[type='radio']:checked ~ .content {
  padding: 0px;
}

ul {
  width: 100%;
  padding: 0;
  margin: 0;
  list-style: none;
}

ul li {
  padding: 0px;
}

ul li i {
  font-size: 15px;
  width: 15px;
  margin-right: 10px;
  color: #626161;
}
ul li:hover {
  cursor: pointer;

}

ul li:hover i {
  color: #f9ef90;
}


ul li a {
  display: block;
  padding: 10px 10px 10px 20px;
  color: #9a9a9a;
  text-decoration: none;
  font-family: sans-serif;
  font-size:.85em;
}

ul li a:hover {
  color: #f9ef90;
  background: #161616;
}
li.active > a {
  color: #81bcff;
  background: #0e0e0e;
}



ul li:last-of-type {
    margin-bottom: 0px;
}




.albumcover {
  

  color: #FFF;
  background: #000;
  text-align:left;
  margin: 40px auto 10px auto; 
      display: flex; 
  /* height: 15rem; */
  flex-flow: wrap; 
}

.cover {
  flex:2;

  max-width: 160px;
  color: #FFF;
  background: #000; 
    padding: 10px; 
}

.cover img {
	width: 100%;
	max-width: 150px;
	height: auto;
	/*padding:20px;*/

}

.albumtext {
  flex:4;
  color: #FFF;
  background: #000;
  text-align:left;
  padding-left: 20px;
  padding-right: 20px;
   
}



@media all and (max-width : 1000px) {


.toggle + a, .menu { display: none;  }

.toggle {
  display: block;
  background-color: #333;
  padding: 0 20px;
  color: #FFF;
  font-size: 20px;
  line-height: 60px;
  text-decoration: none;
  border: none;
  
  
}

[id^=drop]:checked + ul { 
display: block;
}






div.wrap { 
	flex-flow: no wrap;
	display: block;
   } 




nav, main, aside { 
	/*padding: 0.5em;*/
	height: auto;
	display: block;
	}

nav { background:#444; flex:none; order:1; width: 100%;}
main { background:#1c1c1c; flex:none; order:2;} 
aside { background:#191919; flex:none; order:3}






.accordion {
  font-size: 20px;
}

.left-menu {
  width: 100%;
}



}