/*
Theme Name: Frank The Butcher
Theme URL: http://butchersblocktv.com/
Description: Custom theme for Frank The Butcher
Author: Jermaine Davis
Author URL: http://andnoneshallsurvive.com/
*/

/* 8-Column Grid */
 @grid: 8 * @column + 7 * @gutter;
 @column: 120px;
 @gutter: 15px;

/*Colors */
 @red: #FF0000;
 @grey: #DEDEDE;
 @darkgrey: #B5B5B5;

* {
 font-family: Helvetica;
 font-size: 12px;
 line-height: 18px;
 margin: 0;
 padding: 0;
}

html, body {height: 100%;}

a {
 color: black;
 text-decoration: none;
 font-weight: normal;
}

a img {border: none;}

h1 {
 font-size: 16px;
 
 em {
  font-size: 16px;
 }
}

h2 {
 margin-bottom: 18px;
 color: @darkgrey;
 font-weight: normal;
}

p {
 margin-bottom: 18px;
}


#wrapper {
 width: @grid + 2 * @gutter;
 padding-left: @gutter;
 margin: 0 auto;
 min-height: 100%;
}

#header {
 height: 104px;
 width: @grid;
 margin-bottom: 37px;
 padding: 35px 0 0 0;
  
 .logo {
  float: left;
  width: 2 * @column + @gutter; 
  height: 100px;
  background-image: url('http://butchersblocktv.com/wp-content/themes/2011/images/logo.png');
  background-repeat: no-repeat;
  margin-right: @gutter;
  cursor: pointer;
 }
 
 .nav {
  float: left;
  width: 6 * @column + 5 * @gutter;
  height: 100px;
   
  a {
   float: left;
   border-top: 1px solid @grey;
   width: @column;
   padding: 22px 0 0 0;
   margin-right: @gutter;
   display: block;
  }
  
  a:hover {
   border-top: 1px solid @red;
  }
  
  .search {
   float: left;
   width: 2 * @column + @gutter;
   border-top: 1px solid @grey;
   padding: 22px 0 0 0;
   
   input {
    width: 2 * @column + @gutter;
    border: none;
    color: @darkgrey;
    background-image: url('http://butchersblocktv.com/wp-content/themes/2011/images/return.png');
    background-repeat: no-repeat;
   }
  }
  
  .search:hover {
   border-top: 1px solid red;
  }
 }
}


#subheader{
 height: 211px;
 width: @grid;
 margin: 0 0 45px 0;

 .links {
  display: none;
  padding-top: 13px;
  float: left;
  width: 2 * @column + 1 * @gutter;
  margin-left: 15px;
  border-top: 1px solid @grey;
  
  .column {
   float: left;
   width: @column;
   margin-right: 15px;
   
   span {
    color: @darkgrey;
   }
   
   a:before {
    color: @darkgrey;
    content:"\2014";
   }
  }
 }
 
 .featured {
  float: left;
  width: @grid;
  height: 211px;
  position: relative;
 }
  
 a.prev.browse.left {
  position: absolute;
  width: 21px;
  height: 57px;
  top: 98px;
  left: -1px;
  cursor: pointer;
  z-index: 100;
  background-image: url('http://butchersblocktv.com/wp-content/themes/2011/images/left.png');
 }
 
  a.next.browse.right {
  position: absolute;
  right: 0px;
  width: 21px;
  height: 57px;
  top: 98px;
  right: -1px;
  cursor: pointer;
  z-index: 100;
  background-image: url('http://butchersblocktv.com/wp-content/themes/2011/images/right.png');
 } 
 
 .scrollable {
   position: relative;
   overflow: hidden;
   width: @grid;
   height: 211px;
   
  .items {
	width: 20000em;
	position: absolute;
	clear: both;
	
	div {
	 float: left;
	}
  }
  
  .feature {
    cursor: pointer;
	float: left;
	width: 2 * @column + 1 * @gutter;
	border-top: 1px solid @grey;
	padding-top: 13px;
	margin-right: 15px;
	
   .title {
    color: @darkgrey;
    margin-bottom: 13px;
   }	
  }
  
  .feature:hover {
   border-top: 1px solid red;
   
   
   .title {
    color: black;
   }
  }
  
  img {
   float:left;
   margin-right: 15px;
   width: 2 * @column + @gutter;
   height: 162px;
  }
  
  .active {
   position: relative;
   cursor: default;
  }
 }
}

#social {
 position: fixed;
 left: -20px;
 top: 170px;
 height: 210px;
 width: 55px;
 border-radius: 10px;
 padding: 20px 0 0 10px;
 border: 1px solid @grey;
 background: white;
 z-index: 100000;
 
 img {
  width: 30px;
  margin-left: 15px;
  margin-bottom: 5px;
 }
}

#content {
 width: @grid;
 padding: 0 0 160px 0;
 margin: 0 0 36px 0;
 overflow: auto;
 min-height: 300px;
 overflow-x: hidden;
 
 .left {
  float: left;
  width: 2 * @column + @gutter;
  margin-right: @gutter;
 
  .twitter {
   float: left;
   width: 2 * @column + @gutter;
   border-top: 1px solid @grey;
   padding: 13px 0 0 0;
   margin: 0 @gutter 27px 0;
  
   ul {
    color: black;
    list-style-type: none;
   }
  
   ul li {
    margin-bottom: 17px;
   
    a{
     color: @red;
    }
   
    span.tweet_text a {
     font-size: 11px;
    }
   
    span.tweet_time a {
    color: @darkgrey;
    font-size: 11px;
    }
   }
  }
  
  .column {
   float: left;
   width: 2 * @column + @gutter;
   border-top: 1px solid @grey;
   padding: 13px 0 0 0;
   margin: 0 @gutter 27px 0; 
  
    ul {
     list-style-type: none;
    }
    
    li {
     list-style-type: none;
    }
    
   }
  }
  
 .posts {
  float: left;
  width: 4 * @column + 3 * @gutter;
  margin-right: @gutter;
  color: @darkgrey;
  
  a {
   color: @darkgrey;
  }
  
  .metadata {
   display: block;
   margin-bottom: 18px;
  }
   
  .title{
   font-size: 16px;
   color: black;
   font-weight: bold;
   text-transform: uppercase;
  }
  
  .post {
   border-top: 1px solid @grey;
   padding: 13px 0 0 0;
   margin-bottom: 54px;
  }
  
  .entry {
   color: black;
   padding: 18px 0 0 0;
   margin-bottom: 18px;
      
   a {
   color: @red;
   }
  }
 }
 
 .right {
  float: left;
  width: 2 * @column + @gutter;
  
  .music {
   float: left;
   width: 2 * @column + @gutter;
   border-top: 1px solid @grey;
   padding: 13px 0 0 0;
  
   h2 {
    margin-bottom: 49px;
   }
  
   .music_project {
    width: 2 * @column + @gutter;
    height: 120px;
    margin-bottom: 27px;
   
    .music_cover {
     margin: 0 @gutter 18px 0;
     float: left;
   
     img {
      width: @column;
     }
    }
  
    .music_info {
     padding: 5px 0 0 0;
     color: @darkgrey;
    }
  
    span.title {
     color: black;
    }
   } 
  }
  
  .advertisement {
   float: left;
   width: 2 * @column + @gutter;
   border-top: 1px solid @grey;
   padding: 13px 0 0 0;
   
   h2 {
    margin-bottom: 49px;
   }
   
   img {
    margin-bottom: 18px; 
   }
  }
 }
}

.music_grid {
 float: left;
 padding: 18px 0 0 0;
 width: @grid + @gutter;
 margin-bottom: 18px;
 
 .music_project {
  float: left;
  width: 2 * @column + @gutter;
  margin: 0 15px 18px 0;
  overflow: hidden;
  
  img {
     width: 2 * @column + @gutter;
  }
  
  .music_info p, .music_info span {
   font-size: 12px;
   display: inline;
  }
 } 
  .music_more {
   border-top: 1px solid @grey;
   color: @darkgrey;
   width: 2 * @column + @gutter;
   float: left;
   padding: 27px 0 0 0;
  }
}

.tooltip {
 display: none;
 width: @column;
 height: 2 * @column + @gutter + 2px;
 background: white;
 padding: 2px 0 0 @gutter;
 
 .data {
  border-top: 1px solid @grey;
  padding: 27px 0 0 0;
  height: 91px;
  
  .artist {
   color: @darkgrey;
  }
 }
}

 .music_posts {
  float: left;
  width: 4 * @column + 3 * @gutter;
  margin: 0 @gutter 0 0 ;
  color: @darkgrey;
  
  a {
   color: @darkgrey;
  }
  
  .metadata {
   display: block;
   margin-bottom: 18px;
  }
   
  .title{
   font-size: 16px;
   color: black;
   font-weight: bold;
   text-transform: uppercase;
   margin-bottom: 18px;
  }
  
  .post {
   border-top: 1px solid @grey;
   padding: 13px 0 0 0;
   margin-bottom: 54px;
  }
  
  .entry {
   color: black;
   padding: 18px 0 0 0;
   margin-bottom: 18px;
   
   a {
   color: @red;
   }
  }
}

.video_grid {
 padding: 18px 0 0 0;
 float: left;
 width: @grid + @gutter;
 margin-bottom: 18px;
 min-height: 144px;
}
 
 .video {
  float: left;
  cursor: pointer;
  width: 2 * @column + @gutter;
  margin: 0 @gutter 18px 0;

  .video_thumb {
   height: 144px;
  
   img {
    width: 2 * @column + @gutter;
    height: 144px;
    cursor: pointer;
    margin-bottom: 3px;
   }
  }
  
 .tooltip {
  display: none;
  width: 2 * @column + @gutter;
  height: 72px;
  background: white;
  padding: 18px 0 0 0;
  
  .data {
   border-top: 1px solid @grey;
   padding-top: 18px;

   .date {
    color: @darkgrey;
   }
  }
 }
}

 .video_more {
  border-top: 1px solid @grey;
  color: @darkgrey;
  width: 2 * @column + @gutter;
  float: left;
  padding: 18px 0 0 0;
 } 


.overlay {
 display: none;
 z-index: 10000;
 width: 745px;
 -moz-box-shadow: 0 0 90px 5px #333;
 -webkit-box-shadow: 0 0 90px #333;
 cursor: default;
 
 .video_title {
  text-transform: uppercase;
  font-weight: bold;
 }
 
 p.grey {
  color: @darkgrey;
 }
 
 .video_desc {
  margin-top: -5px;
  padding: 18px 15px 18px 15px;
  background: white;
 }
}

.overlay .close {
	position: absolute;
	right: -15px;
	top: -15px;
	cursor: pointer;
	height: 35px;
	width: 35px;
}

.search {

 .middle {
  float: left;
  width: 2 * @column + @gutter;
  margin-right: @gutter;
 }

 .right {
  float: left;
  width: 2 * @column + @gutter;
 }
 
 .videos {
  border-top: 1px solid @grey;
  padding: 13px 0 0 0;
  
  h2 {
   margin-bottom: 49px;
  }
 }
 
 .music {
  float: right;
  width: 2 * @column + @gutter;
  border-top: 1px solid @grey;
  padding: 13px 0 0 0;
  
  .music_project {
   width: 2 * @column + @gutter;
   height: 120px;
   margin-bottom: 27px;
   
   .music_cover {
    margin: 0 @gutter 18px 0;
    float: left;
   
   img {
    width: @column;
    }
   }
  
   .music_info {
    padding: 5px 0 0 0;
    color: @darkgrey;
   }
  
   span.title {
    color: black;
   }
  } 
 }
}

.about {
 padding: 18px 0 36px 0;
 min-height: 300px;
 
 img {
  float: left;
  width: 4 * @column + 3 * @gutter;
  margin-right: @gutter;
 }
 
 .text {
  float: left;
  width: 4 * @column + 3 * @gutter;
  border-top: 1px solid @grey;
  padding: 27px 0 0 0;
 }
}

br.clear {
 clear: both;
}

#footer {
 margin-top: -6 * 18px - 38px;
 border-top: 1px solid @grey;
 height: 6 * 18px;
 background-color: #f7f7f7;
 
 a {
  color: @darkgrey;
 }
 
 .inner {
  border-top: 1px solid white;
  
  .footer-content {
   width: @grid;
   margin: 0 auto;
   color: @darkgrey;
   
   .frankmatic {
    padding: 18px 0 0 0;
    float: left;
    width: 2 * @column + @gutter;
    margin-right: @gutter;
   }
   
   .copy {
    width: 2 * @column + @gutter;
    padding: 36px 0 0 0;
    float: right;
    margin-right: @gutter;
   }
   
   .anss {
    width: 2 * @column + @gutter;
    padding: 36px 0 0 0;
    float: right;
   }
  }
 }
}

#wpadminbar {
 display: none;
}