/*
Theme Name: Street Etiquette Fall 2011
Theme URI: http://streetetiquette.com/
Description: sup bro
Author: ANSS
Author URL: http://andnoneshallsurvive.com/
*/

/* Grid */

@grid: 4*@column + 3*@gutter;
@column: 225px;
@gutter: 15px;
@baseline: 18px;

/* Colors */

@light: #EDEDED;
@mid: #BFBFBF;

/* Elements */

@border: 1px solid @light;

/* Type */

@sans: 'PT Sans Narrow', sans-serif;
@serif: 'PT Serif', serif;

* {
 margin: 0;
 padding: 0;
 border: 0;
 font-size: 12px;
 font-family: @serif;
}

a {
 color: black; 
}

h2, h2 a {
 font-family: @serif;
 font-weight: normal;
 color: @mid;
 font-style: italic;
 margin-bottom: 10px;
 text-decoration: none;
}

h3, h3 a {
 font-family: @serif;
 font-weight: normal;
 font-size: 18px;
 font-style: italic;
 margin-bottom: 10px;
 text-decoration: none;
}

li {
 list-style-type: none;
}

p {
 margin-bottom: @baseline;
}

#wrapper {
 width: @grid;
 margin: 0 auto;
 height: 100%;
 padding: 0 25px 0;
}

#header {
 width: @grid;
 padding: 15px 0 0 0;
 margin-bottom: 6px;
 background: white;

 .logo {
  display: block;
  margin: 0 auto;
  width: @column;
  height: 175px;
  background-image: url('http://streetetiquette.com/wp-content/themes/2011/images/logo-charcoal.png');
  background-repeat: no-repeat;
  background-position: 25px 0;
 }
 
 .nav {
  font-family: 'PT Sans Narrow', sans-serif;
  text-align: center;
  width: @grid;
  padding: @baseline 0 10px;
  border-bottom: @border;
  
  a {
   font-family: 'PT Sans Narrow', sans-serif;
   font-weight: bold;
   font-size: 16px;
   text-decoration: none;
   text-transform: uppercase;
   margin: 0 20px 0;
  }
  
  a:hover {
   color: @mid;
  }
 }
}

#content {
 width: @grid;
 background: white;
 padding: @baseline 0 0 0;

 .banner {
  padding-bottom: 2*@baseline;
  min-height: 590px;
  
  
  .bx-wrapper {
   width: @grid;
   
   .bx-pager {
    position: absolute;
    width: 50px;
    background-color: white;
    top: 0px;
    right: 0px;
    height: @baseline;
    padding: 5px;
    
    a {
     text-decoration: none;
     font-family: @sans;
     font-size: 13px;
     margin: 0 5px 0;
    }
   }
   
   a.pager-active {
    color: @mid;
   }
   
   .bx-prev, .bx-next {
    display: none;
   }
   
   li {
   width: @grid;
   height: 590px;
   }
  }
 }
 
 .social {
  border-top: @border;
  padding: @baseline 0 @baseline;
  text-align: center;
 
   a {
    width: 35px;
    height: 35px;
    display: inline-block;
    padding: 0 10px 0;
    background-position: 10 0;
    background-repeat: no-repeat;
   }
   
   a.twitter {
    background-image: url('http://streetetiquette.com/wp-content/themes/2011/images/social-twitter-sized.png');
   }
   
   a.vimeo {
    background-image: url('http://streetetiquette.com/wp-content/themes/2011/images/social-vimeo-sized.png');
   }
   
   a.facebook {
    background-image: url('http://streetetiquette.com/wp-content/themes/2011/images/social-facebook-sized.png');
   }
   
   a.contact {
    background-image: url('http://streetetiquette.com/wp-content/themes/2011/images/social-mail-sized.png');
   }
   
   a.rss {
    background-image: url('http://streetetiquette.com/wp-content/themes/2011/images/social-rss-sized.png');
   }
  }
 
 .articles {
  
  .bx-wrapper {
   width: @grid;  
  
   a.bx-prev {
    position: absolute;
    top: 130px;
    left: -50px;
    width: 50px;
    height: 50px;
    background-image: url('http://streetetiquette.com/wp-content/themes/2011/images/arrow-left.png');
    display: block;
    text-indent: -999999px;
   }
   
   a.bx-next {
    position: absolute;
    top: 130px;
    right: -35px;
    width: 50px;
    height: 50px;
    background-image: url('http://streetetiquette.com/wp-content/themes/2011/images/arrow-right.png');
    display: block;
    text-indent: -999999px;
   }   
  }
  
  li {
  width: @column + @gutter;
  }
 
  #post {
   width: @column;
   float: left;
   margin: 0 @gutter 2*@baseline 0;
   border-top: 1px solid @light;
   padding-top: 10px;
 
   span.category a {
    font-family: @serif;
    text-decoration: none;
    font-style: italic;
    color: @mid;
   }
  
   a.title {
    font-family: @sans;
    font-weight: bold;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 16px;
    display: block;
    height: 55px;
    padding: @baseline/3 0 @baseline/2;
   }
   
   p {
    font-family: @serif;
   }
   
   img {
    margin-bottom: @baseline;
   }
  }
  
  #post:hover {
   border-top: 1px solid @mid;
  }
  
  #post.last {
    margin-right: 0;
   }
 }
 
 .single {
 
  span.category {
   color: @mid;
   display: block;
   text-align: center;
   padding: @baseline 0 0 0;
  }
  
  span.category a {
   font-family: @serif;
   color: @mid;
   text-decoration: none;
   font-style: italic;
   font-size: 14px;
  }
  
  span.commentsnumber {
   color: @mid;
   display: block;
   text-align: center;
   padding: @baseline 0 3*@baseline;
   border-bottom: @border;
   font-style: italic;
   font-size: 14px;
  }
 
  span.title {
   font-family: @sans;
   font-weight: bold;
   font-size: 24px;
   letter-spacing: .1em;
   text-transform: uppercase;
   display: block;
   text-align: center;
   margin: 2*@baseline 0 0 0;
  }
  
  .video {
   width: 800px;
   margin: 2*@baseline auto 0;
   padding-bottom: 2*@baseline;
   border-bottom: @border;
   }
  
  .article-text {
   float: right;
   width: 315px ;
   padding-top: 2*@baseline;
   line-height: @baseline;
   
   img {
    display: none;
   }
   
   p {
    font-family: @serif;
    font-size: 13px;
    line-height: 19px;
    padding-bottom: @baseline;
   }
  }
  
  .article-images {
   float: left;
   width: 600px;
   padding: 2*@baseline 0 0;
   margin-right: @gutter;
   
   p {
    margin-bottom: 10px;
   }
  
   img {
    width: 600px;
    margin-bottom: 10px;
   }
  
   span {
    font-family: @serif;
    font-style: italic;
    text-align: center;
    display: block;
    padding: 10px 0 0 0;
    margin-bottom: 2*@baseline;
    border-top: @border;
   } 
  }
  
  .article-archive {
   padding: 2*@baseline 92px 2*@baseline;
   width: 615px;
   margin: 0 auto;
  }
 }
}

#share {
 width: 315px;
 border-top: @border;
 padding-top: @baseline;
 height: 2*@baseline;
 
 span {
 float: left;
 width: 50px;
 margin-right: @gutter; 
 }
 
 #social-button {
 float: left;
 width: 100px;
 margin-right: @gutter;
 }
}

.subscribe {
 padding-top: @baseline;
 height: 7*@baseline;
 
 #QS_user_email_theme {
  height: 30px;
  width: 170px;
  padding: 8px 4px 8px;
  border: @border;
  margin: @baseline 0 @baseline;
 }
}

.prevnext {
 border-top: @border;
 padding-top: @baseline;
 
 .prev {
  float: left;
 }
 
 .next {
  float: right;
 }
 
 a {
  text-decoration: none;
 }
}

.related {
 border-top: @border;
 padding-top: @baseline;
 
 li {
  float: left;
 }
 
   #post {
   width: @column;
   margin: 0 @gutter 2*@baseline 0;
   padding-top: 10px;
 
   span.category a {
    font-family: @serif;
    text-decoration: none;
    font-style: italic;
    color: @mid;
   }
  
   a.title {
    font-family: @sans;
    font-weight: bold;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 16px;
    display: block;
    padding: @baseline/3 0 @baseline/2;
   }
   
   p {
    font-family: @serif;
   }
   
   img {
    margin-bottom: @baseline;
   }
  }
  
  
  #post.last {
    margin-right: 0;
   }
 }


.comments {
 border-top: @border;
 padding: 2*@baseline 0 2*@baseline;
 
 .commentlist {
  margin-bottom: 2*@baseline;
 }
 
 .respond {
  border-top: @border;
  padding-top: @baseline;
 }
 
 .item {
  border-left: 3px solid @light;
  padding-left: 15px;
  margin-bottom: @baseline;
  width: 615px;
 }
 
  .comment-reply {
   width: 500px;
   border-top: @border;
   padding: 15px;
 }
 
 
 .commentauthor, .commentauthor a {
  font-family: @sans;
  font-size: 16px;
  text-transform: uppercase;
  text-decoration: none;
  margin-bottom: 10px;
  
  h2 {
   display: inline;
   text-transform: none;
  }
 }
 
 .commentauthor a {
  font-weight: bold;
 }
 
 input {
  height: 30px;
  width: 170px;
  padding: 8px 4px 8px;
  border-bottom: @border;
  margin-bottom: @baseline;
 }
 
 label {
  display: inline-block;
  width: 60px;
 }
 
 textarea {
  margin: @baseline 0 @baseline;
  border: @border;
  padding: 10px;
  width: 615px;
 }
 
 input.submit {
  background-color: white;
  border: @border;
  padding: 8px 4px 10px;
  cursor: pointer;
  font-style: italic;
 }
}

.about {
 img {
  float: left;
  width: 615px;
  margin-bottom: @baseline;
  margin-right: @gutter;
 }
}

.shop {
 padding: 3*@baseline 0 6*@baseline;
 text-align: center;
}

.press {
 text-align: center;
 
 h2 {
  border-bottom: @border;
  padding-bottom: 6px;
 }

 a { text-decoration: none;}
 a:hover { color: @mid;}
 
 p {
  margin-bottom: @baseline/2;
 }
}

.search {
 padding: 2*@baseline 0 2*@baseline;

 #post {
  float: left;
  width: @column;
  margin-right: @gutter;
  height: 200px;
  margin-bottom: 2*@baseline;
  
  img {
   margin-bottom: @baseline;
  }
 }
 
 #post.last {
  margin-right: 0;
 }
 
 a.title {
  font-family: @sans;
  font-weight: bold;
  text-decoration: none;
  text-transform: uppercase; 
  font-size: 16px;
  display: block;
  height: 55px;
  padding: @baseline/3 0 @baseline/2;
 }
}

.footer {
 width: @grid;
 font-family: @serif;
 padding: @baseline 0 3*@baseline;
 border-top: @border;
 
 a {
  text-decoration: none; 
 }
 
 a:hover {
  color: @mid;
 }
 
 input {
  height: 30px;
  border: @border;
  padding: 8px 4px 8px;
  width: 175px;
  font-family: @serif;
  font-style: italic;
 }

 .footer-column {
  float: left;
  width: @column;
  margin-right: @gutter;
 }
 
 .last {
  margin-right: 0px;
 }
}

#wpstats {
 visibility: hidden;
}



br.clear {
 clear: both;
}