assemblymade/coderwall

@import "base";
@import "compass/css3";

//Connections (previously called networks)
body#network {

  #main-content {
    padding-bottom: 285px;
    background: image-url("profile/clouds.png") no-repeat fixed center 100px, image-url("profile/tent-trees.png") no-repeat bottom center, image-url("profile/legs.png") no-repeat bottom center, image-url("profile/grass.jpg") repeat-x bottom center, image-url("profile/hills.png") repeat-x bottom center, image-url("profile/mountains-rays.png") no-repeat bottom center, image-url("blue-texture-bg.jpg") repeat;
  }

  .inside-main-content {
    width: 696px;
    padding: 0px 20px 30px 20px;
  }

  .back-up {
    position: absolute;
    top: 200px;
    right: -110px;
    display: block;
    &.hide {
      display: none !important;
    }
    width: 129px;
    height: 47px;
    line-height: 47px;
    background: image-url("profile/back-up.png") no-repeat top right;
    color: #fff;
    font-size: 1.4em;
    text-transform: uppercase;
    text-indent: 47px;
    @include transition-all;

    &:hover {
      color: #c4c4c4;
    }
  }

  #network-header {
    background: image-url("profile/network-banner.png") no-repeat top center;
    width: 696px;
    height: 96px;
    z-index: 1000;
    position: relative;
    top: 115px;

    &.fixed {
      position: fixed;
      top: -3px;
    }

    li {
      float: left;
      line-height: 85px;
      margin-left: 128px;

      a {
        color: #115f8b;
        text-transform: uppercase;
        @include transition-all;
        display: block;

        h1 {
          font-size: 2.6em;
        }

        &:hover {
          color: #fff;
          @include blue-tx-shad;
        }
      }

      .current {
        color: #fff;
        @include blue-tx-shad;
        position: relative;

        &:after {
          content: "";
          position: absolute;
          bottom: 8px;
          left: 60px;
          width: 0;
          height: 0;
          border-left: 10px solid transparent;
          border-right: 10px solid transparent;
          border-bottom: 10px solid #115f8b;
        }
      }
    }
  }

  .network-panel {
    width: 660px;
    @include paper-panel;
    @include border-radius(6px);
    margin: 0 auto;
    padding-top: 100px;
    position: relative;

    .more {
      //padding-bottom: 20px;
      height: 30px;

      a {
        position: absolute;
        bottom: -26px;
        left: 243px;
        font-size: 1.6em;
        text-transform: uppercase;
        display: block;
        width: 164px;
        margin: 0 auto;
        height: 70px;
        line-height: 65px;
        text-align: center;
        color: #fff;
        background: image-url("profile/more.png") no-repeat bottom center;
        @include transition-all;

        &:hover {
          color: #c4c4c4;
        }

      }
    }

    .network-list {
      border: 1px #e0e0e0 solid;
      margin: 20px;

      .me {
        background: #F3F3EF;
        box-shadow: inset 0px 0px 0px 5px rgba(207, 205, 184, 0.2);

        .user-details {
          h2 {
            //color: $light-blue;
          }

          h3 {
            //color: $light-blue !important;
          }
        }
      }

      .no-followers {
        padding: 40px 0;

        .join-link {
          font-size: 11px;
        }

        h1 {
          color: $red;
          text-align: center;
          text-transform: uppercase;
          font-size: 3.6em;
          margin-bottom: 10px;
          font-family: "MuseoSans-100";
        }

        p {
          width: 450px;
          margin: 0 auto;
          text-align: center;
          font-size: 1.6em;
          line-height: 1.6em;

          a {
            color: $light-blue;
          }
        }
      }

      > li {
        border-bottom: 1px #e0e0e0 solid;
        padding: 20px;
        position: relative;
        @include transition-all;

        &:hover {
          background: rgba(255, 255, 255, 0.8);
        }

        &:last-child {
          border: none;
        }

        .user {
          float: left;
          //padding-left: 45px;

          .level {
            position: absolute;
            width: 25px;
            height: 49px;
            line-height: 49px;
            top: -1px;
            left: 17px;
            background: #c13832 image-url("profile/network-ribbon-master.png") no-repeat top;
            text-align: center;
            color: #fff;
          }

          .pts {
            position: absolute;
            top: 55px;
            left: 19px;
            font-size: 1.2em;
            background: rgba(207, 205, 184, 0.2);
            @include border-radius(100px);
            color: #b3b29f;
            padding: 5px;

            span {
              display: block;
              font-size: 0.8em;
            }
          }

          img {
            float: left;
            border: 3px solid #fff;
            width: 60px;
            height: 60px;
            @include subtle-box-shadow;
          }

          a {
            @include transition-all;

            &:hover {
              opacity: 0.8;
            }
          }

          .user-details {
            float: left;
            padding: 10px 0 0 20px;
            width: 175px;

            h2 {
              font-size: 1.8em;
              font-family: "MuseoSans-300";
              @include ellipsis;

              a {
                color: $dark-grey;

                &:hover {
                  color: $light-blue;
                }
              }

            }

            h3 {
              font-size: 1.4em;
              font-family: "MuseoSans-300";
              color: #8c8c8c;
              @include ellipsis;

            }

          }
        }

        h4#thatsyou {
          padding-top: 25px;
          text-align: center;
        }

        .team {
          // float: right;
          // background: image-url("profile/team-panel.png") no-repeat;
          // width: 245px;
          // height: 65px;
          // @include border-radius(-25px);
          // position: relative;

          float: right;
          background: image-url("gold-star.png") no-repeat 5% 50%, image-url("gold-star.png") no-repeat 95% 50%, #ffffff;
          border: solid 2px #eaeaea;
          width: 245px;
          height: 65px;
          @include border-radius(6px);
          position: relative;

          a {
            @include transition-all;

            &:hover {
              opacity: 0.8;
            }
          }

          img {
            width: 30px;
            height: 30px;
            @include subtle-box-shadow;
            border: solid 2px #fff;
            float: left;
            margin: 15px 15px 0 35px;
          }

          .team-details {
            margin-top: 15px;

            h4 {
              width: 130px;
              @include ellipsis;
              font-family: "MuseoSans-300";
              text-transform: capitalize;
              line-height: 2.8em;

              a {
                color: $dark-grey;

                &:hover {
                  color: $light-blue;
                }
              }
            }

            .you {
              text-align: center;
              margin: 0 auto;
            }

            .hiring {
              position: absolute;
              z-index: 100;
              width: 68px;
              height: 68px;
              top: -6px;
              right: -6px;
              background: image-url("team/hiring.png") no-repeat;
              background-size: 68px 68px;

              span {
                display: none;
              }
            }
          }
        }
      }
    }
  }
}