/////////////////
// Semantic.gs // for LESS: http://lesscss.org/
/////////////////

// Defaults which you can freely override
@column-width: 60;
@gutter-width: 20;
@columns: 16;

// Utility variable — you should never need to modify this
@_gridsystem-width: (@column-width*@columns) + (@gutter-width*@columns) * 1px;

// Set @total-width to 100% for a fluid layout
@total-width: 100%;


//////////
// GRID //
//////////

body {
	width: 100%;
	.clearfix;
	background: url("../images/bg_top.png") top center #aaa no-repeat;
}

body.single {
  .article-wrapper {
    
  }
}

.row(@columns:@columns) {
	display: inline-block;
	width: @total-width*((@gutter-width + @_gridsystem-width)/@_gridsystem-width);
	margin: 0 @total-width*(((@gutter-width*.5)/@_gridsystem-width)*-1);
	.clearfix;
}
.column(@x,@columns:@columns) {
	display: inline;
	float: left;
	width: @total-width*((((@gutter-width+@column-width)*@x)-@gutter-width) / @_gridsystem-width);
	margin: 0 @total-width*((@gutter-width*.5)/@_gridsystem-width);
}
.offset(@offset:1) {
	margin-left: (@gutter-width+@column-width)*@offset + @total-width*((@gutter-width*.5)/@_gridsystem-width);
}

.drop-shadow(@x-axis: 0, @y-axis: 1px, @blur: 2px, @alpha: 0.1) {
  -webkit-box-shadow: @x-axis @y-axis @blur rgba(0, 0, 0, @alpha);
  -moz-box-shadow: @x-axis @y-axis @blur rgba(0, 0, 0, @alpha);
  -o-box-shadow: rgba(0,0,0,@alpha) @x-axis @y-axis @blur;
  box-shadow: @x-axis @y-axis @blur rgba(0, 0, 0, @alpha);
}

.border-radius(@radius: 5px){
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
  -o-border-radius: @radius;
  -ms-border-radius: @radius;
  -khtml-border-radius: @radius;
  border-radius: @radius;
}

.custom-font(@fontname, @fallback: "Helvetica, Arial") {
  font-family: @fontname, @fallback;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
}

.background-gradient(@gradient-from: #fff, @gradient-to: #eee){
  background-color: @gradient-from;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, @gradient-from), color-stop(100%, @gradient-to));
  background-image: -webkit-linear-gradient(@gradient-from,@gradient-to);
  background-image: -moz-linear-gradient(@gradient-from,@gradient-to);
  background-image: -o-linear-gradient(@gradient-from,@gradient-to);
  background-image: -ms-linear-gradient(@gradient-from,@gradient-to);
  background-image: linear-gradient(@gradient-from,@gradient-to);
}

.button(@gradient-from: #fff, @gradient-to: #eee, @fontcolor: #000, @fontname: "Helvetica, Arial"){
  .background-gradient(@gradient-from, @gradient-to);
  .drop-shadow(0, 1px, 4px, 0.5);
  .border-radius;
  
  text-shadow: @gradient-from 0 1px 0;
  border: 1px solid @gradient-from;
  color: @fontcolor;
  font-family: @fontname;
  cursor: pointer;
  padding: 5px 10px;
  display: block;
  
  &:hover {
    .background-gradient(@gradient-to, @gradient-from);
  }
}

// The micro clearfix http://nicolasgallagher.com/micro-clearfix-hack/
.clearfix() {
	*zoom:1;
	
	&:before,
	&:after {
	    content:"";
	    display:table;
	}
	&:after {
	    clear:both;
	}
}

//////////////
// INCLUDES
//////////////

@import "nggallery";

.alignleft { float: left; margin-right: 20px; }

a { color: #0071c9; text-decoration: none }

h1 {
  .custom-font("Open Sans Condensed");
  font-weight: bold;
  font-size: 42px;
  color: #0a1691;
}

.grey-button {
  .button(#ddd, #aaa, #444, "Open Sans Condensed, Helvetica, Arial");
  float: left;
  margin: 0 10px 10px 0;
}

table.regular {
  width: 100%;
  background-color: #cbcbcb;
  margin: 0 0 40px 0;
  .drop-shadow(0, 1px, 10px, 0.2);
  border: 1px solid #999;
  
  tr.stathead {
    background-color: #cbcbcb;
    
    td {
      padding: 5px 10px;
      font-size: 24px;
      font-family: "Open Sans Condensed", Helvetica, Arial;
      font-weight: normal;
      color: #303030;
      -webkit-font-smoothing: antialiased;
      text-align: left;
    }
  }
  
  thead tr {
    background-color: #eee;
    border: 1px solid #999;
    
    th {
      padding: 5px 10px;
      font-size: 18px;
      font-family: "Open Sans Condensed", Helvetica, Arial;
      font-weight: normal;
      color: #303030;
      -webkit-font-smoothing: antialiased;
      text-align: left;
    }
  }
  
  tbody tr:nth-child(even) { background-color: #aaa }
  
  tbody tr {
    border: 1px solid #999;
  }
  
  tbody td {
    vertical-align: middle;
    padding: 5px;
    border: 1px solid #999;
  }
}

.wrapper {
  width: 960px;
  margin: 0px auto;
}

.logo {
  background: url("../images/logo.png") no-repeat;
  width: 610px;
  height: 144px;
  overflow: hidden;
  text-indent: -9999px;
  margin: 20px 0 15px;
}

#navigation {
  background: url("../images/bg_nav_noise.png") repeat-x #eee;
  border-bottom: 1px solid #888;
  margin-bottom: 20px;
  
  ul {
    margin: 0px;
    .clearfix();
    padding: 10px 0;
    
    li {
      list-style: none;
      display: inline;
      float: left;
      position: relative;
      margin: 0px;
      padding: 0px;
      
      a {
        text-decoration: none;
        font-family: "Open Sans Condensed", Helvetica, Arial;
        font-size: 21px;
        color: #333;
        padding: 10px 20px;
      }
      
      ul.sub-menu {
        position: absolute;
        top: 35px;
        left: 0px;
        background-color: #eee;
        margin: 0px;
        display: none;
        z-index: 999;
        
        li {
          float: none;
          display: block;
          margin: 0px;
          width: 220px;
          padding: 0px;
          position: relative;
                    
          a {
            padding: 5px 10px;
            display: block;
            font-size: 18px;
          }
          
          a:hover { color: #367f07 }
          
          ul.sub-menu {
            position: absolute;
            top: 0px;
            left: 220px;
            display: none;
            padding: 0px;
          }
        }
      }
    }
    
    li:hover ul.sub-menu {
      display: block;
      
      ul.sub-menu { display: none }
      
      li:hover ul.sub-menu { display: block }
    }
  }
  
  .menu-main-container { float: left; margin-right: 10px }
  
  .login {
    float: left;
    position: relative;
    
    a,
    span {
      display: block;
      text-decoration: none;
      font-family: "Open Sans Condensed", Helvetica, Arial;
      font-size: 21px;
      color: #fff;
      padding: 10px 20px;
      background-color: #0a1691;
    }
    
    a {
      position: absolute;
      top: -10px;
      left: 0px;
      padding: 20px 20px 10px;
      border-bottom: 1px solid #000535;
    }
    
    .login-form {
      display: none;
      position: absolute;
      top: 51px;
      right: 0px;
      background-color: #0a1691;
      padding: 20px 20px 10px;
      color: #fff;
      border-bottom: 3px solid #000535;
      
      input {
        background-color: #e3e3e3;
        border: none;
        padding: 5px;
        .custom-font("Open Sans Condensed");
        color: #444;
        font-size: 18px;
        margin-bottom: 10px;
        .border-radius;
        width: 200px;
      }
      
      input.submit {
        .button(#b1b1b1, #8a8a8a, #444, "Open Sans Condensed, Helvetica, Arial");
        width: auto;
        float: right;
      }
    }
    
    &:hover .login-form { display: block }
  }
}

#slideshow {
  .column(10);
  
  .slide {
    position: relative;
    z-index: 10;
    
    h2 {
      position: absolute;
      top: -10px;
      left: -20px;
      font-family: "Bangers", Helvetica, Arial;
      font-size: 30px;
      font-weight: normal;
      background-color: #2d2d2d;
      color: #fff;
      -webkit-font-smoothing: antialiased;
      margin: 0px;
      padding: 0px 10px;
      float: left;
      .clearfix;
    }
    
    h2:before {
      display: block;
      content: "";
      position: absolute;
      border-style: solid;
      width: 0;
      height: 0;
      z-index: 1;
      left: 1px;
      top: 45px;
      border-width: 19px 0px 19px 19px;
      border-color: #000 transparent transparent transparent;
    }
    
    p {
      font-family: Helvetica, Arial;
      font-size: 14px;
      color: #000;
      
      span {
        background-color: #fff;
        .drop-shadow(0, 1px, 2px, 0.7)
      }
      
      a { color: #f35143; text-decoration: none }
    }
  }
}

.main-message {
  .column(6);
  
  .tag1,
  .tag2,
  .tag3 {
    font-family: "Open Sans Condensed", Helvetica, Arial;
    font-size: 23px;
    font-weight: normal;
    color: #444;
    -webkit-font-smoothing: antialiased;
    
    span { text-transform: uppercase }
  }
  
  .tag1 { margin-bottom: 20px }
  
  .tag2 {
    font-size: 52px;
    font-weight: bold;
    color: #000;
    line-height: 42px;
    margin-bottom: 10px;
    
    span {
      font-size: 34px;
      display: block;
      text-transform: uppercase;
      text-align: right;
    }
  }
  
  .tag3 {
    font-size: 24px;
    text-align: right;
    margin-right: 40px;
    
    a { color: #000 }
  }
}

.ad-728x90 {
  width: 728px;
  height: 90px;
  background-color: #444;
  float: left;
  margin: 10px 30px 0 0;
}

a.send-tips {
  display: block;
  float: left;
}

.premium-information,
.free-information {
  .column(8);
  margin-bottom: 20px;
  
  .the-latest {
    font-size: 24px;
    font-family: "Open Sans Condensed", Helvetica, Arial;
    font-weight: normal;
    color: #484741;
    -webkit-font-smoothing: antialiased;
  }
  
  h2 {
    font-size: 36px;
    font-family: "Open Sans Condensed", Helvetica, Arial;
    font-weight: normal;
    color: #fff;
    -webkit-font-smoothing: antialiased;
    background: url("../images/bg_leather.png") repeat-x;
    text-shadow: 0 1px 1px #000;
    padding: 0 10px;
    float: left;
    margin: 0;
  }
  
  .subtitle {
    color: #0a1691;
    font-family: "Open Sans Condensed", Helvetica, Arial;
    font-weight: normal;
    font-size: 18px;
    color: #000;
    -webkit-font-smoothing: antialiased;
    
    a { color: #0a1691; text-decoration: none }
  }
  
  .post {
    h3 {
      font-size: 30px;
      font-family: "Open Sans Condensed", Helvetica, Arial;
      font-weight: bold;
      color: #0a1691;
      -webkit-font-smoothing: antialiased;
      margin: 10px 0 0;
      
      a { text-decoration: none; color: #0a1691 }
    }
    
    small {
      font-size: 12px;
      color: #000;
      font-weight: bold;
      margin-bottom: 10px;
      display: block;
    }
  }
}

.premium-information { margin-left: 0px }
.free-information { margin-right: 0px }

#top-player-profiles {
  background-color: #777;
  border-top: 20px solid #888;
  border-bottom: 20px solid #bbb;
  margin-bottom: 20px;
  
  h2 {
    font-size: 48px;
    font-family: "Open Sans Condensed", Helvetica, Arial;
    font-weight: normal;
    color: #303030;
    -webkit-font-smoothing: antialiased;
    margin: 0 0 10px;
  }
  
  .player-profiles {
    .column(8);
  }
  
  a.more {
    .custom-font("Open Sans Condensed");
    color: #770a01;
    font-size: 24px;
  }
}

.player-profiles {
  padding-bottom: 20px;
  
  h3 {
    font-size: 24px;
    font-family: "Open Sans Condensed", Helvetica, Arial;
    font-weight: normal;
    font-style: italic;
    color: #f3ece2;
    -webkit-font-smoothing: antialiased;
    margin: 0 0 10px;
  }
  
  table {
    width: 100%;
    background-color: #9d9d9d;
    margin: 0px;
    .drop-shadow(0, 1px, 10px, 0.2);
    
    thead {
      background-color: #cbcbcb;
      
      th {
        padding: 5px 0;
        font-size: 18px;
        font-family: "Open Sans Condensed", Helvetica, Arial;
        font-weight: normal;
        color: #303030;
        -webkit-font-smoothing: antialiased;
        text-align: left;
      }
      
      th.rank { padding-left: 10px }
    }
    
    tr.even { background-color: #aaa }
    
    td { vertical-align: middle }
    
    td.rank {
      font-size: 36px;
      font-family: "Open Sans Condensed", Helvetica, Arial;
      font-weight: normal;
      color: #f3ece2;
      -webkit-font-smoothing: antialiased;
      padding: 0px 10px;
    }
    td.photo {}
    td.name {
      width: 150px;
      
      a {
        font-size: 14px;
        color: #0a1590;
        text-decoration: none;
      }
    }
    td.position {}
    td.weight-height {}
    td.rate {}
  }
}

table.tablehead {
  width: 100%;
  background-color: #cbcbcb;
  margin: 0px;
  .drop-shadow(0, 1px, 10px, 0.2);
  border: 1px solid #999;
  
  tr.stathead {
    background-color: #cbcbcb;
    
    td {
      padding: 5px 10px;
      font-size: 24px;
      font-family: "Open Sans Condensed", Helvetica, Arial;
      font-weight: normal;
      color: #303030;
      -webkit-font-smoothing: antialiased;
      text-align: left;
    }
  }
  
  tr.colhead {
    background-color: #eee;
    
    td {
      padding: 5px 10px;
      font-size: 18px;
      font-family: "Open Sans Condensed", Helvetica, Arial;
      font-weight: normal;
      color: #303030;
      -webkit-font-smoothing: antialiased;
      text-align: left;
    }
  }
  
  tr.evenrow { background-color: #aaa }
  
  td {
    vertical-align: middle;
    padding: 5px;
  }
}

#blog {
  .articles,
  .article {
    .column(11);
    
    h2 {
      .custom-font("Open Sans Condensed");
      color: #303030;
      font-size: 48px;
      margin: 10px 0 10px 0;
    }
    
    .post {
      h3 {
        font-family: Helvetica, Arial;
        font-size: 24px;
        text-shadow: 0 1px 0 rgba(255,255,255,0.7);
        margin: 0 0 10px 0;
        
        a {
          color: #0a1590;
          text-decoration: none;
        }
      }
      
      img.attachment-featured-post {
        display: block;
        margin: 0 0 10px 0;
      }
      
      small {
        font-size: 12px;
        color: #fff;
        
        a { color: #770a01 }
      }
    }
    
    .sticky-post {
      background-color: #eee;
      padding: 20px;
      margin-bottom: 20px;
      
      .featured-image {
        width: 605px;
        overflow: hidden;
      }
      
      small {
        color: #666;
      }
    }
    
    hr {
      background: none;
      margin: 20px 0 20px;
      border: none;
      border-bottom: 1px solid #6a6a6a;
    }
  }
  
  .sidebar {
    .column(5);
  }
  
  .article-meta {
    background-color: #777;
    border-top: 20px solid #888;
    
    .comments {
      .column(11);
      padding-top: 10px;
    }
    
    .postmetadata {
      color: #ccc;
      text-shadow: 0 1px 0 rgba(0,0,0,0.5);
      padding: 20px 0 20px 0;
      
      a { color: #fff }
    }
  }
  
}

#footer {
  background: url("../images/bg_dark-pattern.png") #222;
  color: #fff;
  padding: 20px 0 20px;
  
  #menu-footer {
    margin-left: 0px;
    padding: 0px;
  }
  
  .widget {
    .column(4);
  }
  
  .widget_nav_menu {
    li {
      list-style: none;
      font-size: 18px;
      font-weight: normal;
      margin: 0px;
      
      a {
        color: #999;
        text-decoration: none;
      }
    }
  }
}

#disqus_thread {

  h3 { color: #ccc; text-shadow: 0 1px 0 rgba(0,0,0,0.5); }
  
  .dsq-textarea-background {
    .drop-shadow(0, 1px, 10px, 0.2);
    
    .dsq-textarea-wrapper {
      padding: 10px;
      background-color: #eee;
    }
  }
}

#page {
  h2 {
    .custom-font("Open Sans Condensed");
    font-size: 48px;
    margin: 0 0 20px 0;
  }
  
  .page-column {
    .column(10);
  }
  
  .sidebar {
    .column(6);
  }
  
  .player-profiles {
    background-color: #777777;
    padding: 20px;
  }
}

#player-profile {

  .content { .column(10); margin-left: 0px; }
  
  .sidebar { .column(6); margin-right: 0px; }

  #profile-header {
    .background-gradient(#d0d0d0, #aaaaaa);
    padding: 20px;
    margin: 0px auto;
    position: relative;
    .drop-shadow(0, 0, 5px, 0.3);
    border: 1px solid #d0d0d0;
    
    .rank {
      position: absolute;
      top: -5px;
      right: -5px;
      background: url("../images/rank-corner.png") no-repeat;
      width: 70px;
      height: 70px;
      color: #9b7f10;
      font-size: 21px;
      text-align: right;
      padding: 10px;
    }
  }
  
  .rating-detail {
    margin: 20px 0 10px 0;
  }
  
  .photo {
    width: 150px;
    height: 150px;
    float: left;
    margin-right: 20px;
  }
  
  .details {
    float: left;
    margin-right: 20px;
    color: #8d0e00;
    
    strong {
      color: #000;
    }
  }

  h2 {
    .custom-font("Open Sans Condensed");
    font-size: 40px;
    margin: 0;
    color: #fff;
    text-shadow: 0 1px 0px rgba(0,0,0,0.5);
    float: left;
  }
  
  .bio,
  .strengths,
  .weaknesses,
  .schools-interest {
    
    p {
      font-size: 14px;
      line-height: 24px;
    }
  }
}

blockquote {
  padding: 0 0 0 15px;
  margin: 0 0 20px 20px;
  border-left: 10px solid #888;
  display: block;
  p {
    margin-bottom: 0;
    font-size: 18px !important;
    color: #555;
  }
  small {
    display: block;
    color: #ddd;
    &:before {
      content: '\2014 \00A0';
    }
  }
}

blockquote:before,
blockquote:after {
  content: "";
}

#profile-posts {
  padding-bottom: 20px;
  border-bottom: 1px solid #999;
  
  h3 {
    font-family: Helvetica, Arial;
    font-size: 24px;
    color: #666;
    margin: 0 0 10px 0;
    padding: 0px;
  }
  
  ul {
    margin: 0px;
    padding: 0px;
    
    li {
      list-style: none;
      margin: 0px;
      padding: 0px;
      
      a { color: #0a1691; }
    }
  }
}


.sportstube-blog {
  
}