/*
Theme Name: BREK ONE
Theme URL: http://brekone.com/
Description; sup brek
Author: Jermaine Davis
Author URL: http://andnoneshallsurvive.com/
*/


* {
 font-family: Helvetica, Arial, sans-serif;
 font-size: 11px;
 margin: 0;
 padding: 0;
 line-height: 16px;
}

// Grid
@grid: 1125px;
@column: 175px;
@gutter: 15px;

@baseline: 18px;

//Colors
@grey: #F6F6F6;
@midgrey: #e9e9e9;
@darkgrey: #979595;
@gold: #c1ac44;

//Elements
@border: 1px solid @midgrey;
@darkborder: 1px solid @darkgrey;
@lightborder: 1px solid white;

a {
 color: black;
 text-decoration: none;
}

a:hover {
 text-decoration: underline;
}

h1 {
 font-size: 16px;
}

h2 {
 color: @darkgrey;
 font-weight: normal;
 margin-bottom: @baseline;
 background: @grey;
 text-transform: uppercase;
 padding: 13px 0 13px 10px;
}

h3 {
 color: @darkgrey;
 font-weight: normal;
 background: @grey;
 text-transform: uppercase;
 padding: 13px 0 13px 10px;
}

p {
 margin-bottom: 16px;
}

li {
 list-style-type: none;
}

#wrapper {
 width: 6*@column + 5*@gutter;
 margin: 0 auto;
 margin-bottom: 100px;
 min-height: 100%;
 padding-top: @baseline;
}

#mixart {
 padding-bottom: 12px;
 margin-bottom: @baseline;
 border-bottom: @border;
}

#feature {
 width: @grid;
 margin-bottom: 2*@baseline;
 position: relative;
 padding-bottom: @baseline;
 border-bottom: @border;
 
 .logo {
  float: left;
  width: 2*@column + @gutter;
  margin-right: @gutter;
  padding: 0 0 0 0;
  
  a img {
   width: 200px;
   padding: 48px 0 0 90px;
  }
 }
 
 .feature-thumbs {
  float: left;
  width: 4*@column + 3*@gutter;
  height: 8*@baseline;
  overflow: hidden;
 }

  li {
   width: @column + @gutter;
  }
 
  a.bx-prev {
   text-indent: -9999em;
   background-image: url(http://www.brekone.com/wp-content/themes/brek/images/arrow-left.png);
   width: 27px;
   height: 144px;
   position: absolute;
   top: 0;
   left: 0;
   cursor: pointer;
   z-index: 9999;
  }
  
  a.bx-next {
   text-indent: -9999em;
   background-image: url(http://www.brekone.com/wp-content/themes/brek/images/arrow-right.png);
   width: 27px;
   height: 144px;
   position: absolute;
   top: 0;
   right: 15px;
   cursor: pointer;
   z-index: 9999;
  }
}

#sidebar {
 float: left;
 width: @column;
 margin-right: @gutter;
}

.nav {
 border-bottom: @border;
 margin-bottom: @baseline;
 list-style-type: none;
}

.nav a {
 color: @darkgrey;
 background-color: @grey;
 text-transform: uppercase;
 padding: 13px 0 13px 10px;
 margin-bottom: @baseline;
 display: block;
}

 .nav a:hover {
  color: @gold;
 }

.social {
 margin-bottom: @baseline;
 height: 2*@baseline;
 
 a {
  height: 36px;
  display: block;
  float: left;
  background-repeat: no-repeat;
  background-color: transparent;
 }
 
 a.soundcloud {
  background-image: url('http://www.brekone.com/wp-content/themes/brek/images/social-cloud.png');
  width: 77px; 
 }
 
  a.soundcloud:hover {
   background-image: url('http://www.brekone.com/wp-content/themes/brek/images/social-cloud-hover.png');
  }
 
  a.twitter {
  background-image: url('http://www.brekone.com/wp-content/themes/brek/images/social-twitter.png');
  width: 50px;
 }
 
  a.twitter:hover {
   background-image: url('http://www.brekone.com/wp-content/themes/brek/images/social-twitter-hover.png');
  }
 
  a.facebook {
  background-image: url('http://www.brekone.com/wp-content/themes/brek/images/social-fb.png');
  width: 46px;
 }
 
 a.facebook:hover {
  background-image: url('http://www.brekone.com/wp-content/themes/brek/images/social-fb-hover.png');
 }
}

.search {
 padding-bottom: @baseline;
 border-bottom: @border;
 margin-bottom: @baseline;
}

input {
 width: @column - 10px;
 padding: 13px 0 13px 10px;
 border: none;
 color: @darkgrey;
 background: @grey;
}

.sidebar-feed {
 margin-bottom: @baseline;
 padding-bottom: @baseline;
 border-bottom: @border;
}

.twitter-feed {
 background: @grey;
 padding: 13px 0 0 0;
 
 .twitter-header {
  height: 3*@baseline + 10px;
  margin: 0 10px 5px 10px;
  border-bottom: @lightborder;
  
  .avatar {
   float: left;
   margin-right: @gutter;
  }
  
  .name {
   float: left;
   width: 90px;
   margin-bottom: 3px;
  }
  
  .follow-button {
   float: left;
   margin: 2px 4px 0 0;
  }
  
  .follow {
   float: left;
   font-size: 10px;
   color: @darkgrey;
  }
  
  a .follow:hover {
   text-decoration: none;
  }
 
 .line {
  width: 100%;
  float: left;
  margin-top: 15px;
  border-top: 1px solid @midgrey;
 }
}

 .tweet span {
  font-size: 11px;
 }
 
 .tweet span a {
  font-size: 11px;
  color: @gold;
 }
 
 span.tweet_time a {
  font-size: 10px;
  color: @darkgrey;
 }
 
 
 ul.tweet_list {
  list-style-type: none;
 }
 
  ul.tweet_list li {
  padding: 10px;
 }
 
 .tweet_even {
  background: @midgrey;
 }
}

 .events {
 background: @grey;
 padding: 13px 0 0 0;
 
 .events-header {
  text-align: center;
  height: 32px;
  margin: 0 10px 5px 10px;
  border-bottom: @lightborder;
 
  .line {
   width: 100%;
   float: left;
   margin-top: 15px;
   border-top: 1px solid @midgrey;
  }
 }
 
 .events-footer {
  text-align: center;
  height: 32px;
  margin: 0 10px 13px 10px;
  border-top: 1px solid @midgrey;
  padding-bottom: 13px;
  
  .line {
   width: 100%;
   float: left;
   border-top: @lightborder;
  }
  
  a {
   margin-top: 13px;
   display: block;
  }
 }
 
 li {
  list-style-type: none;
  padding: 10px;
  font-size: 11px;
  
  a.venue {
   color: @gold;
  }
  
  a {
   font-weight: bold;
   text-transform: uppercase;
  }
 }
 
 li.even {
  background: @midgrey;
 }
}

#content {
 float: left;
 width: 5*@column + 4*@gutter;
}

.post {
 padding-bottom: 2*@baseline;
 border-bottom: @border;
 margin-bottom: 2*@baseline;
 
 .left {
  width: 3*@column + 2*@gutter;
  margin-right: @gutter;
  float: left;
 }
 
 iframe {
  margin-bottom: @baseline;
 }
 
 .right {
  float: right;
  width: 2*@column + @gutter;
 }

  .scrollable {
   position:relative;
   overflow:hidden;
   width: 3*@column + 2*@gutter;
   height: 480px;
  }
 
  .scrollable .items {
   width: 20000em;
   position: absolute;
  }
  
  img.slide {
   width: 555px;
  }

 .items div {
  float:left;
 }
 
 .navi {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 100;
  padding-left: 6px;
  background: @grey;
  line-height: 0px;
  
  a {
   color: black;
   font-size: 9px;
   margin-right: 8px;
   cursor: pointer;
  }
 }
 
 .title  a{
 float: left;
 width: 2*@column + @gutter;
 font-size: 18px;
 margin-bottom: 6px;
 text-transform: uppercase;
 }
 
 .meta {
  color: @gold;
  margin-bottom: @baseline;
  
  a {
   color: @gold;
  }
 }
 
 .entry {
  float: left;
  width: 2*@column + @gutter;
  margin-bottom: @baseline;
  
  p a {
   color: @gold;
  }
 }
 
 .share {
  float: left;
  width: @column;
  height: 2*@baseline;
  background-color: #ededed;
  color: @darkgrey;
  
  a {
   height: 50px;
   display: block;
   float: left;
   background-repeat: no-repeat;
  }
  
  span {
   float: left;
   padding: 13px 13px 0 13px;
  }
  
  a.twitter {
  background-image: url('http://www.brekone.com/wp-content/themes/brek/images/share-twitter.png');
  width: 50px;
 }
 
  a.twitter:hover {
   background-image: url('http://www.brekone.com/wp-content/themes/brek/images/share-twitter-hover.png');
  }
 
  a.facebook {
  background-image: url('http://www.brekone.com/wp-content/themes/brek/images/share-fb.png');
  width: 46px;
 }
 
 a.facebook:hover {
  background-image: url('http://www.brekone.com/wp-content/themes/brek/images/share-fb-hover.png');
 }
  
 }
}
 
.about {
 width: 5*@column + 4*@gutter - 3*baseline;
 padding: 3*@baseline;
 color: white;
 height: 580px - 6*@baseline;
 
 p {
  width: 2*@column + 1*@gutter;
  font-size: 13px;
  line-height: 18px;
 }
}

.contact { 
 padding-top: 12px;
 
 p {
  margin-bottom: 24px;
 }

  strong, a {
   font-size: 16px;
 }
}
 
  .event {
  border-bottom: @border;
  
  .social {
   float: right;
   margin: 0;
   padding-top: 8px;
  }
  
  span {
  width: @column;
  margin-right: @gutter;
  display: inline-block;
  padding: @baseline 0 @baseline;
  
  a {
   cursor: pointer;
  }
 }
 
 span.date {
  width: @column / 2;
 }
 
 span.venue {
  width: @column * 1.5;
 }
 
 span.flyer, span.info {
  text-align: right;
 }
}

 .event:hover, .event:hover a {
  color: @gold;
 }
 
.overlay {
 display: none;
 z-index: 1000000;
 cursor: default;
}

img.flyer {
 width: 500px;
}

img.download {
 float: left;
 width: 2*@column + @gutter;
 margin: 0 @gutter @baseline 0;
 display: block;
 overflow: hidden;
 
 .last {
  margin-right: 0px;
 }
}

.downloads {

.tooltip {
 display: none;
 background: @grey;
 height: 2*@column + @gutter - 26px;
 width: 2*@column + @gutter - 26px;
 padding: 13px;
 color: @darkgrey;
 pointer-events: auto;
 text-align: left;
 
 tooltip-inner {
  position: relative;
 }
 
 a.download {
  text-align: center;
  position: absolute;
  top: 4*@baseline;
  display: block;
  color: @gold;
  font-size: 14px;
 }
 
 .download-entry {
  margin-bottom: 2*@baseline;
 }
 
 .download-title {
  color: black;
  text-transform: uppercase;
  margin-bottom: 2*@baseline;
  padding-top: @baseline;
  font-size: 18px;
 }
 
 a {
  color: @darkgrey;
  text-transform: uppercase;
  display: block;
 }
}
}

// Feature tooltip //

  .tooltip {
   height: 144px - 49px;
   width: @column - 26px;
   display: none;
   background: @grey;
   padding: 50px 13px 0;
   color: black;
   pointer-events: none;
   text-align: center;
   text-transform: uppercase;
  }
  
  
.prevnext {
 background: @midgrey;
 padding: 13px 0 13px 15px;
 text-transform: uppercase;
 
 .previous {
  float: left;
  display: inline-block;
 }
 
 .next {
  float: right;
  display: inline-block;
  margin-right: 15px;
 }
 
 a {
  color: @darkgrey;
 }
}

.footer {
 border-top: 1px solid @midgrey;
 background-color: @grey;
 width: 100%;
 color: @darkgrey;
 padding-bottom: @baseline;
 
 h2 {
  border-bottom: 1px solid @midgrey;
  margin-bottom: @baseline;
  font-weight: normal;
  color: @darkgrey;
  padding: 4px 0 4px;
 }
 
 a {
  color: @darkgrey;
 }
 
 li {
  list-style-type: none;
 }
 
 .inner {
  border-top: 1px solid white;
  padding-top: 2*@baseline;
  
  .footer-content {
   margin: 0 auto;
   width: @grid;
  
  .brekman {
   float: left;
   width: @column;
   margin-right: @gutter;
   
   img {
    width: 100px;
   }
  }
  }
  
  .archives, .topics {
   float: left;
   width: @column;
   margin-right: @gutter;
  }
  
  .credit {
   width: @column;
   float: right;
  }
 }
}



br.clear {
clear: both;
}