FinalsClub/fc-new-design/assets/css/scss/screen.scss

/*
Title:	Master styles for screen media
Author: Jordan Cooperman, jordan@vectormediagroup.com
Year: 2011

Welcome, thou wanderer of the interwebs!
If you have any questions, Don't be shy. Send me a line!
================================================================
----------------------------------------------------------------

[Table of contents]

 0.General
 1.Layout
 2.Navigation
 3.Header
 4.Footer
 5.Pages
     i.
 6.Modules
 7.Forms
 8.Sprites
 *.User Defined

----------------------------------------------------------------*/

$gold: #f2b83b;
$blue: #367da9;
$dark-blue: #16567e;
$green: #78b343;
$dark-green: #4f901b;

@import "includes/mixins.scss";
@import "includes/grid.scss";
@import "includes/type.scss";

/*
 * media queries included
 * at end of document
 */


/* 0.`general
============================================== */

::-moz-selection { background: #44a1dd; color: #fff; text-shadow: none; }
::selection { background: #44a1dd; color: #fff; text-shadow: none; }


hr {
  &.stripes {
    margin: 0;
    height: 16px;
    clear: both;
    border-top: 1px solid #e5e5e5;
    border-bottom: 1px solid #fff;
    background-image: url("../img/bg-stripes.png");
    background-repeat: repeat;
    background-color: #fff;
  }
  &.spacer {
    padding: 0;
    margin : 10px 0 30px 0;
  }
  &.heading {
    margin-bottom: 16px;
  }
  &.bordered {
    border-bottom: 2px solid $gold;
  }
}

button {
  @include rounded;
  padding: 8px 24px;
  border: 0;
  background-image: url("../img/button-bg.png");
  background-repeat: repeat-x;
  background-position: left bottom;

  &.blue {
    background-color: $blue;
    border: 1px solid $dark-blue;
    color: #fff;
  }
  &.green {
    background-color: $green;
    border: 1px solid $dark-green;
    color: #fff;
  }
  &.three-dim.blue {
    @include drop-shadow(2px, 2px, 0, $dark-blue);
  }
  &.three-dim.green {
    @include drop-shadow(2px, 2px, 0, $dark-green);
  }
}

h3.heading {
  margin-bottom: 16px;
  padding-left: 12px;
}

em {
  font-family: "Georgia", "serif";
}

/* 1.`layout
============================================== */

html,
body {
  height : 100%;
  margin: 0;
}

body {
    background-image: url("../img/bg-black-noise.gif");
    background-repeat: repeat;
}

.header {
  @include drop-shadow(0, 1px, 1px, #888);
  border-top: 1px solid $gold;
  position: relative;
  z-index: 10;
  border-bottom: 2px solid #333;

  .container-#{$cols} {
    > div {
      margin-top: 0;
      margin-bottom: 0;
    }
  }
}
.content { background-color: #fff; }


/* 2.`navigation
============================================== */

#user-nav {
  @include rounded-side("left", "bottom");
  @include rounded-side("right", "bottom");
  float: right;
  background-color: $gold;

  li {
    display: inline-block;
    vertical-align: middle;
    float: none;
    padding: 3px 12px;
    color: #fff;

    a {
      display: block;
      color: #fff;
    }
  }
}

#main-nav {
    @include group;
    clear: both;

    ul {
      float: right;
    }
    li {
        display: inline-block;
        vertical-align: middle;
        float: none;

        a {
          @include transition(color);
          display: block;
          padding: 10px;
          padding-left: 20px;
          text-transform: uppercase;
          color: #aaa;

          &.active {
            position: relative;
            color: #fff;

            em {
              position: absolute;
              left: 0;
              top: 50%;
              margin-top: -8px;
              background-position: 0 0;
              width: 14px;
              height: 14px;
              background-repeat: no-repeat;
            }
          }
          em {
            text-transform: none;
          }

          &:hover {
            color: #eee;
          }
        }
    }
}



/* 3.`header
============================================== */

#logo {
  float: left;
  padding: 5px;
  margin-left: 10px;
  margin-top: 5px;
}
#header {
    margin-top: 20px;
}
.highlight {
  background-image: url("../img/logo-bg.png");
  background-position: left bottom;
  background-repeat: no-repeat;
}


/* 4.`footer
============================================== */

.footer {
  color: #444;
  padding-top: 24px;
  #footer-nav {
    float: right;
    margin-right: -16px;

    li {
      display: inline-block;
      *display: inline;
    }
    a {
      @include transition(color);
      padding: 5px 16px;
      color: #999;
      &:hover {
        color: #fff;
      }
    }
  }
  p {
    float: right;
    clear: both;
    margin-top: 24px;
  }
  .creative_commons {
    .section {
      clear: both;
      float: right;
    }
    float: right;
    clear: both;
    a {
      color: #777;
    }
  }
}

/* 6.`modules
============================================== */

.padded-loose {
  padding: 10px;
  padding-top: 0;
  padding-bottom: 0;
}

.button-set {
  &.vertical {
    button {
      margin-bottom: 16px;
    }
  }
  &.half-width-buttons {
    button {
      width: 48%;
    }
  }
  &.centered {
    text-align: center;
  }
}

.video-wrapper {
  @include rounded();
  padding: 5px;
  background-color: #f5f5f5;
  text-align: center;
}
.schools {
  ul {
    @include group;
  }
  li {
    float: left;
    width: 25%;
    height: 100px;
  }
  em {
    margin: 0 auto;
  }
}

/* 8.`sprites
============================================== */

.icon,
.sprite,
.sprite-school {
    text-indent : -9999px;
    line-height : 0;
    font-size   : 0;
    overflow    : hidden;
    display     : block;
}

.sprite { background-image : url('../img/finalsclub-sprite-images.png'); }
.icon { background-image   : url('../img/finalsclub-sprite-icons.png'); }
.sprite-school { background-image : url("../img/finalsclub-sprite-schools.gif"); }

.brown {
  background-position: 0 0;
  width: 61px;
  height: 72px;
}
.columbia {
  background-position: -62px 0;
  width: 81px;
  height: 61px;
}
.cornell {
  background-position: -144px 0;
  width: 71px;
  height: 72px;
}
.dartmouth {
  background-position: -216px 0;
  width: 56px;
  height: 71px;
}
.shield {
  background-position: -273px 0;
  width: 59px;
  height: 60px;
}
.mit {
  background-position: -333px 0;
  width: 79px;
  height: 41px;
}
.lock_haven {
  background-position: -413px 0;
  width: 61px;
  height: 68px;
}
.cal {
  background-position: -475px 0;
  width: 91px;
  height: 72px;
}
.texas {
  background-position: -567px 0;
  width: 54px;
  height:68px;
}
.yale {
  background-position: -622px 0;
  width: 51px;
  height: 50px;
}
.penn {
  background-position: -674px 0;
  width: 115px;
  height:65px;
}
.harvard {
  background-position: -790px 0;
  width: 67px;
  height: 65px;
}
/* media queries */

@import "includes/media.scss";

/* *.`user defined
============================================== */

.right { float: right !important;}
.no-top-margin { margin-top: 0; }
.spacer {
  padding-top: 16px;
  padding-bottom: 32px;
}
.yellow { color: $gold; }
.half-width { width: 50%; }
.centered { text-align: center;}
.centered-rt-parent { margin: 0 auto;}