$github-widget-background-color: white;
$github-widget-glow-color: #333333;
$github-widget-stat-color: black;
$github-widget-note-color: #999;
$github-widget-gradient-dark-color: #FAFAFA;
$github-widget-gradient-light-color: #EFEFEF;
$github-widget-border-color: #EEE;
$github-widget-border-dark-color: #DDD;

.github-widget {

  .github-widget-caption {
    //float: left;
    background-color: $github-widget-background-color;
    border: 1px solid $github-widget-border-dark-color;
    border-radius: 20px 20px 0px 0px;
    width: 99.6%;
    padding-bottom: 2px;
    
    background: $github-widget-gradient-dark-color;
    background: -webkit-gradient(linear,left top,left bottom,from($github-widget-gradient-light-color),to($github-widget-gradient-dark-color));
    background: -moz-linear-gradient(top,$github-widget-gradient-light-color,$github-widget-gradient-dark-color);
    
    .github-widget-stat { 
      //float: left;     
      
      & > span {
        //list-style-type: none;
        text-align: center;
        margin-bottom: 10px;  
        margin-right: 30px;     
        display: inline-block;
        
        &.github-widget-avatar {
          height: 60px;
          width: 60px; 
          margin-left: 20px;
          margin-top: 20px;
          margin-right: 30px;

          display: block;

          @media(min-width: 28.75em) {
            display: inline-block;
          }
          
          img {
            border-radius: 5px;
            //float: left;
            height: 60px;
            width: 60px;    
            
            &:hover {
              box-shadow: 1px 1px 1px $github-widget-glow-color;
            }
          }
        }
        
        &.github-widget-repos-count, &.github-widget-followers-count {
          
          line-height: 36px;
          margin-left: 20px;

          @media(min-width: 28.75em) {
            margin-left: inherit;
          }
                    
          a {

            strong {
              font-size: 36px;
              font-weight: bold;
              color: $github-widget-stat-color;

              display: inline;

              @media(min-width: 28.75em) {
                display: block;
              }
            }
            
            span {
              display: inline;

              @media(min-width: 28.75em) {
                display: block;
              }

              font-size: 11px;
              color: $github-widget-note-color;
            }
            
            &:hover {
              text-decoration: none;
              
              strong {
                text-shadow: 1px 1px 1px $github-widget-glow-color;
              }
              
              span {
                color: $github-widget-stat-color;
              }
            }
          }
        }
      }
    }
  }
  
  ul.github-widget-repos-list {
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    margin-right: 0;
    padding: 0 0 0 0;
    width: 100%;
    //height: 300px;
    //overflow-y: scroll;
    
    & > li {
      list-style-type: none;
      display: block;
      border: 1px solid $github-widget-border-dark-color;
      border-top: none;
      margin: 0 0 0 0;
      padding: 0 0 0 0;
      //border-radius: 4px;
            
      h3 {
        margin: 0 0 0 0;
        padding: 5px 5px 5px 5px;
        padding-left: 25px;
        background-image: url(../images/icon-public.png);
        background-position: 5px 50%;
        background-repeat: no-repeat;
        
        &.fork-flag {
          background-image: url(../images/icon-fork.png);
        }
      }
      
      ul.repo-stats {
        display: block;
        padding: 5px 5px 5px 5px;
        float:right;
        z-index: 5;        
        
        li {
          display: inline-block;
          color: $github-widget-note-color;
          font-weight: bold;

          &.language {
            text-align: right;
            padding-right: 5px;
            //width: 90px;     
          } 
                    
          a {
            padding-left: 20px;
            padding-right: 5px;
            background-repeat: no-repeat;
            background-position: 2px;
            text-align: right; 
            
            &:hover {
              text-decoration: none;
            }           
            
            &.watchers {
              background-image: url(../images/repostat_watchers.png);
            }
            
            &.forks {
              background-image: url(../images/repostat_forks.png);
            }
          }
          

        }
      }
      
      .body {
        padding: 10px 10px 10px 10px;
        border-top: 1px solid $github-widget-border-color;
        //border-bottom-right-radius: 4px;
        //border-bottom-left-radius: 4px;
        background: $github-widget-gradient-dark-color;
        background: -webkit-gradient(linear,left top,left bottom,from($github-widget-gradient-dark-color),to($github-widget-gradient-light-color));
        background: -moz-linear-gradient(top,$github-widget-gradient-dark-color,$github-widget-gradient-light-color);
        
        .updated-at {
          color: $github-widget-note-color;
        }
      }
      
    }
    
    & > li:last {
      border-bottom-right-radius: 20px;
      border-bottom-left-radius: 20px;
    }
  }

}