FinalsClub/public/assets/css/screen.css

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

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

----------------------------------------------------------------

Oh, I didn't see you there, friend.

Please have a look around, I hope you enjoy your stay.

----------------------------------------------------------------

[Table of contents] - a map of our grounds.

	0.General
		a.elements
		b.classes

	1.Layout
		a.header
		b.content
		c.footer

	2.Forms
	3.Extensible Classes

	*.Pages, modules, sprites and media queries imported at end

----------------------------------------------------------------

[Prefixes] - some patterns that you may observe.

	g: global
	s: state

---------------------------------------------------------------- */
/* 0.`General
---------------------------------------------- */
.wrapper {
  position: relative;
  width: 880px;
  margin: 0 auto; }

.grid-1 {
  float: left;
  width: 9.091%;
  padding: 0;
  margin-left: 1.705%;
  margin-right: 1.705%; }

.grid-2 {
  float: left;
  width: 21.591%;
  padding: 0;
  margin-left: 1.705%;
  margin-right: 1.705%; }

.grid-3, .sidebar, #g-logo {
  float: left;
  width: 34.091%;
  padding: 0;
  margin-left: 1.705%;
  margin-right: 1.705%; }

.grid-4, #intro-video, #intro-text {
  float: left;
  width: 46.591%;
  padding: 0;
  margin-left: 1.705%;
  margin-right: 1.705%; }

.grid-5, #g-nav-main, #pg_courses .main-content, #pg_lectures .main-content, #pg_notes .main-content {
  float: left;
  width: 59.091%;
  padding: 0;
  margin-left: 1.705%;
  margin-right: 1.705%; }

.grid-6 {
  float: left;
  width: 71.591%;
  padding: 0;
  margin-left: 1.705%;
  margin-right: 1.705%; }

.grid-7 {
  float: left;
  width: 84.091%;
  padding: 0;
  margin-left: 1.705%;
  margin-right: 1.705%; }

.grid-8, #g-nav-user, #g-masthead-hr, .breadcrumb, .subheader, .main-content, #g-footer, #messages, #intro-schools {
  float: left;
  width: 96.591%;
  padding: 0;
  margin-left: 1.705%;
  margin-right: 1.705%; }

.futura, .futura-oblique, .breadcrumb .location, #schools .number_of_courses, #schools .number_of_notes, #pg_courses .course .course-data-number, .futura-light, h1, .subheader h2, .futura-light-oblique, .futura-bold, .info, .error, .link-bar a, body, p, #g-masthead, .form-header h4, #pg_home h1 {
  font-family: "futura-pt", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  font-weight: 500;
  -webkit-font-smoothing: antialiased; }

.futura-oblique, .breadcrumb .location, #schools .number_of_courses, #schools .number_of_notes, #pg_courses .course .course-data-number {
  font-style: italic; }

.futura-light, h1, .subheader h2 {
  font-weight: 300; }

.futura-light-oblique {
  font-style: italic;
  font-weight: 300; }

.futura-bold, .info, .error, .link-bar a {
  font-weight: 700; }

body {
  /* 16px / 24px */
  font-size: 1em;
  line-height: 1.5em; }

.tiny, #g-footer-copyright {
  /* 11px / 12px */
  font-size: 0.688em;
  line-height: 1.091em; }

.mini, #g-nav-footer li {
  /* 12px / 12px */
  font-size: 0.75em;
  line-height: 1em; }

.small, #g-nav-user, .form-header p, #intro-schools li, .link-bar a {
  /* 14px / 18px */
  font-size: 0.875em;
  line-height: 1.286em; }

.normal {
  /* 16px / 24px */
  font-size: 1em;
  line-height: 1.5em;
  /* 24 */ }

.big, h4, p, #g-nav-main a, .breadcrumb, #pg_lectures .lecture-name {
  /* 18px / 24px */
  font-size: 1.125em;
  line-height: 1.333em; }

.plump, #pg_courses .course .course-name {
  /* 21 / 30px */
  font-size: 1.313em;
  line-height: 1.429em; }

.large, h3, #schools .school_name {
  /* 26 / 36px */
  font-size: 1.625em;
  line-height: 1.385em; }

.fat, #pg_courses .course .course-data-number {
  /* 30 / 36px */
  font-size: 1.875em;
  line-height: 1.2em; }

.huge, h2 {
  /* 36px / 42px */
  font-size: 2.25em;
  line-height: 1.167em; }

.massive {
  /* 52px / 60px */
  font-size: 3.25em;
  line-height: 1.154em; }

.gigantic, h1 {
  /* 60px / 72px */
  font-size: 3.75em;
  line-height: 1.2em; }

.tiny-line-height {
  line-height: 0.5em; }

.tight-line-height, #g-nav-user ul, .subheader h1, .subheader h3 {
  line-height: 1em; }

/* a.`elements
-------------------------- */
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  margin-bottom: 0.375em; }

a {
  -webkit-transition: color 0.25s ease-in-out;
  -moz-transition: color 0.25s ease-in-out;
  -o-transition: color 0.25s ease-in-out;
  -ms-transition: color 0.25s ease-in-out;
  transition: color 0.25s ease-in-out;
  color: #e8a200; }
  a:hover {
    color: #e8a200; }

p {
  margin: 0;
  margin-bottom: 0.75em;
  color: #444; }

img {
  max-width: 100%; }

button {
  padding: 0.375em 0.75em;
  border: 0;
  background: none;
  background-color: #333;
  border: 1px solid #000;
  color: #fff; }

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

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

/* b.`classes
-------------------------- */
.wf-loading h1 {
  opacity: 0; }

h1 {
  -webkit-transition: opacity 0.25s ease-in-out;
  -moz-transition: opacity 0.25s ease-in-out;
  -o-transition: opacity 0.25s ease-in-out;
  -ms-transition: opacity 0.25s ease-in-out;
  transition: opacity 0.25s ease-in-out;
  opacity: 1; }

.wf-loading h2 {
  opacity: 0; }

h2 {
  -webkit-transition: opacity 0.25s ease-in-out;
  -moz-transition: opacity 0.25s ease-in-out;
  -o-transition: opacity 0.25s ease-in-out;
  -ms-transition: opacity 0.25s ease-in-out;
  transition: opacity 0.25s ease-in-out;
  opacity: 1; }

.wf-loading h3 {
  opacity: 0; }

h3 {
  -webkit-transition: opacity 0.25s ease-in-out;
  -moz-transition: opacity 0.25s ease-in-out;
  -o-transition: opacity 0.25s ease-in-out;
  -ms-transition: opacity 0.25s ease-in-out;
  transition: opacity 0.25s ease-in-out;
  opacity: 1; }

.wf-loading h4 {
  opacity: 0; }

h4 {
  -webkit-transition: opacity 0.25s ease-in-out;
  -moz-transition: opacity 0.25s ease-in-out;
  -o-transition: opacity 0.25s ease-in-out;
  -ms-transition: opacity 0.25s ease-in-out;
  transition: opacity 0.25s ease-in-out;
  opacity: 1; }

.wf-loading h5 {
  opacity: 0; }

h5 {
  -webkit-transition: opacity 0.25s ease-in-out;
  -moz-transition: opacity 0.25s ease-in-out;
  -o-transition: opacity 0.25s ease-in-out;
  -ms-transition: opacity 0.25s ease-in-out;
  transition: opacity 0.25s ease-in-out;
  opacity: 1; }

.wf-loading h6 {
  opacity: 0; }

h6 {
  -webkit-transition: opacity 0.25s ease-in-out;
  -moz-transition: opacity 0.25s ease-in-out;
  -o-transition: opacity 0.25s ease-in-out;
  -ms-transition: opacity 0.25s ease-in-out;
  transition: opacity 0.25s ease-in-out;
  opacity: 1; }

.wf-loading p {
  opacity: 0; }

p {
  -webkit-transition: opacity 0.25s ease-in-out;
  -moz-transition: opacity 0.25s ease-in-out;
  -o-transition: opacity 0.25s ease-in-out;
  -ms-transition: opacity 0.25s ease-in-out;
  transition: opacity 0.25s ease-in-out;
  opacity: 1; }

.wf-loading li {
  opacity: 0; }

li {
  -webkit-transition: opacity 0.25s ease-in-out;
  -moz-transition: opacity 0.25s ease-in-out;
  -o-transition: opacity 0.25s ease-in-out;
  -ms-transition: opacity 0.25s ease-in-out;
  transition: opacity 0.25s ease-in-out;
  opacity: 1; }

/* 1.`Layout
---------------------------------------------- */
html,
body {
  height: 100%;
  margin: 0; }

body {
  background-position: 20% 0; }

.sidebar form {
  margin-left: 1.5em; }

/* a.`header
-------------------------- */
#g-masthead {
  background-color: #262626; }
  #g-masthead .wrapper {
    background-color: #262626; }

#g-logo a {
  display: block; }

#g-nav-user {
  padding: 0.375em 0.75em 0.75em;
  text-align: right; }
  #g-nav-user li {
    display: inline; }
    #g-nav-user li.first, #g-nav-user li.first a {
      border: 0; }
  #g-nav-user a {
    padding: 0 0.75em;
    color: #ffcd58; }

#g-nav-main ul {
  float: right;
  padding: 0.375em 0; }
#g-nav-main li {
  display: inline-block;
  *display: inline;
  *zoom: 1;
  vertical-align: middle; }
#g-nav-main a {
  position: relative;
  display: block;
  padding: 0.375em 0;
  margin-left: 1.5em;
  color: #fff; }
  #g-nav-main a:hover {
    color: #ffcd58; }
  #g-nav-main a .icon {
    position: absolute;
    left: 0; }
#g-nav-main #school_link {
  padding-left: 1.65em; }
  #g-nav-main #school_link .icon {
    top: 50%;
    margin-top: -10px; }
#g-nav-main #blog_link {
  padding-left: 1.8em; }
  #g-nav-main #blog_link .icon {
    top: 50%;
    margin-top: -9px; }
#g-nav-main #archive_link {
  padding-left: 1.65em; }

#g-masthead-hr {
  position: absolute;
  margin-top: 0;
  margin-bottom: 0;
  top: 100%;
  height: 3px;
  border: 0;
  background-color: #ffcd58; }

/* b.`content

-------------------------- */
#g-page {
  background-color: #fff;
  margin-bottom: 3em; }

.page {
  display: none;
  margin-bottom: 1.5em;
  margin-top: 3px;
  color: #333; }

.breadcrumb {
  position: relative;
  border-bottom: 1px solid #f8f8f8;
  background-color: #fafafa; }
  .breadcrumb a {
    display: block;
    float: left;
    padding: 0.375em;
    opacity: 0.7;
    -webkit-transition: opacity 0.25s ease-in-out;
    -moz-transition: opacity 0.25s ease-in-out;
    -o-transition: opacity 0.25s ease-in-out;
    -ms-transition: opacity 0.25s ease-in-out;
    transition: opacity 0.25s ease-in-out; }
    .breadcrumb a .action {
      color: #e8a200; }
    .breadcrumb a .location {
      color: #666; }
    .breadcrumb a:hover {
      opacity: 1; }
    .breadcrumb a span {
      -webkit-transition: color 0.25s ease-in-out;
      -moz-transition: color 0.25s ease-in-out;
      -o-transition: color 0.25s ease-in-out;
      -ms-transition: color 0.25s ease-in-out;
      transition: color 0.25s ease-in-out; }
  .breadcrumb .action {
    color: #666; }
  .breadcrumb .location {
    color: #bbb; }

.subheader {
  padding: 2.25em 0 3em;
  margin-bottom: 2.25em;
  border-top: 1px solid #f7f7f7;
  border-bottom: 1px solid #fbf7eb;
  border-bottom: 1px solid rgba(255, 205, 88, 0.1);
  background-color: #fcfcfc; }
  .subheader h1, .subheader h3 {
    margin: 0; }
  .subheader h1 {
    color: #333; }

/* c.`footer
-------------------------- */
#g-footer {
  text-align: center; }

#g-nav-footer {
  margin-bottom: 0.75em;
  text-align: center; }
  #g-nav-footer li {
    display: inline;
    text-align: center; }
  #g-nav-footer a {
    padding: 0 0.75em; }

#g-footer-copyright img {
  margin: 0 auto;
  margin-bottom: 0.75em; }

.footer {
  color: #444;
  padding-top: 24px; }
  .footer #footer-nav {
    float: right;
    margin-right: -16px; }
    .footer #footer-nav li {
      display: inline-block;
      *display: inline; }
    .footer #footer-nav a {
      -webkit-transition: color 0.25s ease-in-out;
      -moz-transition: color 0.25s ease-in-out;
      -o-transition: color 0.25s ease-in-out;
      -ms-transition: color 0.25s ease-in-out;
      transition: color 0.25s ease-in-out;
      padding: 5px 16px;
      color: #999; }
      .footer #footer-nav a:hover {
        color: #fff; }
  .footer p {
    float: right;
    clear: both;
    margin-top: 24px; }
  .footer .creative_commons {
    float: right;
    clear: both; }
    .footer .creative_commons .section {
      clear: both;
      float: right; }
    .footer .creative_commons a {
      color: #777; }

/* 2.`Forms
---------------------------------------------- */
input.text {
  padding: 0.375em;
  background-color: #e5e5e5;
  border: 1px solid #ccc; }
  input.text:focus {
    border: 1px solid #aaa;
    outline: 0; }

.form-header h4 {
  color: #e8a200; }

.form-section {
  margin-bottom: 3em; }

form .row {
  margin-bottom: 0.75em; }
  form .row button {
    margin-top: 0.75em; }

/* 3.`Extensible Classes
---------------------------------------------- */
.group:after, .wrapper:after, #g-nav-main:after, .page:after, .breadcrumb:after, #schools li:after, .schools ul:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden; }

.right {
  float: right !important; }

.left {
  float: left !important; }

.spacer {
  padding-top: 16px;
  padding-bottom: 32px; }

.half-width {
  width: 50%; }

.centered {
  text-align: center; }

.centered-rt-parent {
  margin: 0 auto; }

.light {
  color: #444; }

.info {
  color: #6bcf77; }

.error {
  color: #b7300b; }

/* A.Sprites
----------------------------------------------------------------

[Table of contents] - a map of our sprites

    A1.Setup
    A2.Sprites

---------------------------------------------------------------- */
/* A1.`Setup
---------------------------------------------- */
.icon,
.sprite {
  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"); }

/* A2.`Sprites
---------------------------------------------- */
.paperclip, #g-nav-main #school_link .icon, .paperclip-active, #g-nav-main #school_link:hover .icon {
  background-position: 0 0;
  width: 22px;
  height: 20px; }

.paperclip-active, #g-nav-main #school_link:hover .icon {
  background-position: -24px 0; }

.align-lines, #g-nav-main #blog_link .icon {
  background-position: 0 -25px;
  width: 24px;
  height: 17px; }

.align-lines-active, #g-nav-main #blog_link:hover .icon {
  background-position: -27px -25px; }

.book, #g-nav-main #archive_link .icon, .book-active, #g-nav-main #archive_link:hover .icon {
  background-position: 0 -46px;
  width: 19px;
  height: 26px; }

.book-active, #g-nav-main #archive_link:hover .icon {
  background-position: -24px -46px; }

.logo-brown {
  display: block;
  background: url(../img/sprite-schools.png) no-repeat -117px -78px;
  width: 32px;
  height: 37px; }

.logo-california {
  display: block;
  background: url(../img/sprite-schools.png) no-repeat -53px -78px;
  width: 46px;
  height: 37px; }

.logo-columbia {
  display: block;
  background: url(../img/sprite-schools.png) no-repeat 0px -78px;
  width: 51px;
  height: 37px; }

.logo-cornell {
  display: block;
  background: url(../img/sprite-schools.png) no-repeat -117px 0px;
  width: 38px;
  height: 37px; }

.logo-dartmouth {
  display: block;
  background: url(../img/sprite-schools.png) no-repeat 0px -117px;
  width: 30px;
  height: 37px; }

.logo-harvard {
  display: block;
  background: url(../img/sprite-schools.png) no-repeat -72px -39px;
  width: 39px;
  height: 37px; }

.logo-lock_haven {
  display: block;
  background: url(../img/sprite-schools.png) no-repeat -32px -117px;
  width: 33px;
  height: 37px; }

.logo-mit {
  display: block;
  background: url(../img/sprite-schools.png) no-repeat 0px -39px;
  width: 70px;
  height: 37px; }

.logo-penn {
  display: block;
  background: url(../img/sprite-schools.png) no-repeat 0px 0px;
  width: 115px;
  height: 37px; }

.logo-shield {
  display: block;
  background: url(../img/sprite-schools.png) no-repeat -67px -117px;
  width: 36px;
  height: 37px; }

.logo-texas {
  display: block;
  background: url(../img/sprite-schools.png) no-repeat -105px -117px;
  width: 29px;
  height: 37px; }

.logo-yale {
  display: block;
  background: url(../img/sprite-schools.png) no-repeat -117px -39px;
  width: 38px;
  height: 37px; }

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

[Table of contents]

 0.General
 1.Home
 2.Schools
 3.Courses
 4.Course
 5.Notes

----------------------------------------------------------------*/
/* 0.`General
---------------------------------------------- */
#messages {
  padding: 0.75em; }

/* 1.`Home
---------------------------------------------- */
#pg_home .subheader {
  text-align: center;
  padding: 3em 0;
  border: 0;
  background: none; }
#pg_home .section-home {
  margin-bottom: 1.5em; }

#intro-schools li {
  display: inline-block;
  *display: inline;
  *zoom: 1;
  vertical-align: middle;
  position: relative;
  padding: 0.375em 0;
  padding-right: 0.75em; }
  #intro-schools li:after {
    content: "";
    position: absolute;
    right: 3px;
    top: 50%;
    width: 3px;
    height: 2px;
    background-color: #999; }

/* 2.`Schools
---------------------------------------------- */
#schools a {
  display: block;
  float: left;
  clear: both;
  padding: 0.375em; }
  #schools a:hover .school_name {
    color: #e8a200; }
  #schools a:hover .number_of_courses, #schools a:hover .number_of_notes {
    color: #444; }
  #schools a span {
    -webkit-transition: color 0.25s ease-in-out;
    -moz-transition: color 0.25s ease-in-out;
    -o-transition: color 0.25s ease-in-out;
    -ms-transition: color 0.25s ease-in-out;
    transition: color 0.25s ease-in-out; }
#schools .icon-pair, #schools .text-pair {
  display: inline-block;
  *display: inline;
  *zoom: 1;
  vertical-align: middle; }
#schools .icon-pair {
  margin-right: 0.75em; }
#schools .school_name {
  color: #333; }
#schools .number_of_courses, #schools .number_of_notes {
  color: #999; }

/* 3.`Courses
---------------------------------------------- */
#pg_courses .course {
  position: relative;
  clear: both;
  margin-bottom: 0.75em; }
  #pg_courses .course .course-name {
    display: block;
    margin-bottom: 0.375em;
    text-transform: capitalize;
    color: #000; }
    #pg_courses .course .course-name:hover {
      color: #e8a200; }
  #pg_courses .course .course-description {
    color: #777; }
  #pg_courses .course .course-content {
    padding-bottom: 1.5em;
    margin-left: 60px;
    background-image: url("../img/dotted-x.png");
    background-position: bottom;
    background-repeat: repeat-x; }
  #pg_courses .course .course-data {
    position: absolute;
    top: 0;
    color: #bfbfbf; }
  #pg_courses .course .course-data-item {
    margin-bottom: 0.25em;
    text-align: center; }
  #pg_courses .course .course-data-description {
    margin-top: -0.5em; }

/* 4.`Course
---------------------------------------------- */
#pg_lectures .lecture {
  padding-bottom: 1.5em;
  margin-bottom: 0.75em;
  background-image: url("../img/dotted-x.png");
  background-position: bottom;
  background-repeat: repeat-x; }
#pg_lectures .lecture-name {
  display: block;
  margin-bottom: 0.375em;
  color: #000;
  -webkit-transition: color 0.25s ease-in-out;
  -moz-transition: color 0.25s ease-in-out;
  -o-transition: color 0.25s ease-in-out;
  -ms-transition: color 0.25s ease-in-out;
  transition: color 0.25s ease-in-out; }
  #pg_lectures .lecture-name:hover {
    color: #e8a200; }

/* 5.`Notes
---------------------------------------------- */
.link-bar {
  margin-left: -0.375em; }
  .link-bar li {
    display: block;
    float: left; }
    .link-bar li.last a {
      border: 0; }
  .link-bar a {
    display: block;
    padding: 0 0.375em;
    border-right: 1px solid #ffcd58;
    color: #e8a200; }

.video-wrapper {
  -moz-border-radius: 5px;
  border-radius: 5px;
  padding: 5px;
  background-color: #f5f5f5;
  text-align: center;
  line-height: 0; }

.schools li {
  float: left;
  width: 25%;
  height: 100px; }
.schools em {
  margin: 0 auto; }

/* media queries
============================================== */