public/assets/css/screen.css

   1 /* ----------------------------------------------------------------
   2
   3 Title: Master styles for screen media
   4 Author: Jordan Cooperman, jordan@vectormediagroup.com
   5 Year: 2012
   6
   7 ----------------------------------------------------------------
   8
   9 Oh, I didn't see you there, friend.
  10
  11 Please have a look around, I hope you enjoy your stay.
  12
  13 ----------------------------------------------------------------
  14
  15 [Table of contents] - a map of our grounds.
  16
  17     0.General
  18         a.elements
  19         b.classes
  20
  21     1.Layout
  22         a.header
  23         b.content
  24         c.footer
  25
  26     2.Extensible Classes
  27
  28
  29     *.Pages, modules, sprites and media queries imported at end
  30
  31 ----------------------------------------------------------------
  32
  33 [Prefixes] - some patterns that you may observe.
  34
  35     g: global
  36     s: state
  37
  38 ---------------------------------------------------------------- */
  39 /* 0.`General
  40 ---------------------------------------------- */
  41 .wrapper {
  42   position: relative;
  43   width: 880px;
  44   margin: 0 auto; }
  45
  46 .grid-1 {
  47   float: left;
  48   width: 9.091%;
  49   padding: 0;
  50   margin-left: 1.705%;
  51   margin-right: 1.705%; }
  52
  53 .grid-2 {
  54   float: left;
  55   width: 21.591%;
  56   padding: 0;
  57   margin-left: 1.705%;
  58   margin-right: 1.705%; }
  59
  60 .grid-3, #g-logo {
  61   float: left;
  62   width: 34.091%;
  63   padding: 0;
  64   margin-left: 1.705%;
  65   margin-right: 1.705%; }
  66
  67 .grid-4, #intro-video, #intro-text {
  68   float: left;
  69   width: 46.591%;
  70   padding: 0;
  71   margin-left: 1.705%;
  72   margin-right: 1.705%; }
  73
  74 .grid-5, #g-nav-main {
  75   float: left;
  76   width: 59.091%;
  77   padding: 0;
  78   margin-left: 1.705%;
  79   margin-right: 1.705%; }
  80
  81 .grid-6, #pg_courses .main-content {
  82   float: left;
  83   width: 71.591%;
  84   padding: 0;
  85   margin-left: 1.705%;
  86   margin-right: 1.705%; }
  87
  88 .grid-7 {
  89   float: left;
  90   width: 84.091%;
  91   padding: 0;
  92   margin-left: 1.705%;
  93   margin-right: 1.705%; }
  94
  95 .grid-8, #g-nav-user, #g-masthead-hr, .breadcrumb, .subheader, .main-content, #g-footer, #intro-schools {
  96   float: left;
  97   width: 96.591%;
  98   padding: 0;
  99   margin-left: 1.705%;
 100   margin-right: 1.705%; }
 101
 102 .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, .link-bar a, body, p, #g-masthead, #pg_home h1 {
 103   font-family: "futura-pt", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
 104   font-weight: 500;
 105   -webkit-font-smoothing: antialiased; }
 106
 107 .futura-oblique, .breadcrumb .location, #schools .number_of_courses, #schools .number_of_notes, #pg_courses .course .course-data-number {
 108   font-style: italic; }
 109
 110 .futura-light, h1, .subheader h2 {
 111   font-weight: 300; }
 112
 113 .futura-light-oblique {
 114   font-style: italic;
 115   font-weight: 300; }
 116
 117 .futura-bold, .link-bar a {
 118   font-weight: 700; }
 119
 120 body {
 121   /* 16px / 24px */
 122   font-size: 1em;
 123   line-height: 1.5em; }
 124
 125 .tiny, #g-footer-copyright {
 126   /* 11px / 12px */
 127   font-size: 0.688em;
 128   line-height: 1.091em; }
 129
 130 .mini, #g-nav-footer li {
 131   /* 12px / 12px */
 132   font-size: 0.75em;
 133   line-height: 1em; }
 134
 135 .small, #g-nav-user, #intro-schools li, .link-bar a {
 136   /* 14px / 18px */
 137   font-size: 0.875em;
 138   line-height: 1.286em; }
 139
 140 .normal {
 141   /* 16px / 24px */
 142   font-size: 1em;
 143   line-height: 1.5em;
 144   /* 24 */ }
 145
 146 .big, p, #g-nav-main a, .breadcrumb {
 147   /* 18px / 24px */
 148   font-size: 1.125em;
 149   line-height: 1.333em; }
 150
 151 .plump, #pg_courses .course .course-name {
 152   /* 21 / 30px */
 153   font-size: 1.313em;
 154   line-height: 1.429em; }
 155
 156 .large, h3, #schools .school_name {
 157   /* 26 / 36px */
 158   font-size: 1.625em;
 159   line-height: 1.385em; }
 160
 161 .fat, #pg_courses .course .course-data-number {
 162   /* 30 / 36px */
 163   font-size: 1.875em;
 164   line-height: 1.2em; }
 165
 166 .huge, h2 {
 167   /* 36px / 42px */
 168   font-size: 2.25em;
 169   line-height: 1.167em; }
 170
 171 .massive {
 172   /* 52px / 60px */
 173   font-size: 3.25em;
 174   line-height: 1.154em; }
 175
 176 .gigantic, h1 {
 177   /* 60px / 72px */
 178   font-size: 3.75em;
 179   line-height: 1.2em; }
 180
 181 .tiny-line-height {
 182   line-height: 0.5em; }
 183
 184 .tight-line-height, #g-nav-user ul, .subheader h1, .subheader h3 {
 185   line-height: 1em; }
 186
 187 /* a.`elements
 188 -------------------------- */
 189 h1, h2, h3, h4, h5, h6 {
 190   margin: 0;
 191   margin-bottom: 0.375em; }
 192
 193 a {
 194   -webkit-transition: color 0.25s ease-in-out;
 195   -moz-transition: color 0.25s ease-in-out;
 196   -o-transition: color 0.25s ease-in-out;
 197   -ms-transition: color 0.25s ease-in-out;
 198   transition: color 0.25s ease-in-out;
 199   color: #e8a200; }
 200   a:hover {
 201     color: #e8a200; }
 202
 203 p {
 204   margin: 0;
 205   margin-bottom: 0.75em;
 206   color: #444; }
 207
 208 img {
 209   max-width: 100%; }
 210
 211 ::-moz-selection {
 212   background: #44a1dd;
 213   color: #fff;
 214   text-shadow: none; }
 215
 216 ::selection {
 217   background: #44a1dd;
 218   color: #fff;
 219   text-shadow: none; }
 220
 221 /* b.`classes
 222 -------------------------- */
 223 .wf-loading h1 {
 224   opacity: 0; }
 225
 226 h1 {
 227   -webkit-transition: opacity 0.25s ease-in-out;
 228   -moz-transition: opacity 0.25s ease-in-out;
 229   -o-transition: opacity 0.25s ease-in-out;
 230   -ms-transition: opacity 0.25s ease-in-out;
 231   transition: opacity 0.25s ease-in-out;
 232   opacity: 1; }
 233
 234 .wf-loading h2 {
 235   opacity: 0; }
 236
 237 h2 {
 238   -webkit-transition: opacity 0.25s ease-in-out;
 239   -moz-transition: opacity 0.25s ease-in-out;
 240   -o-transition: opacity 0.25s ease-in-out;
 241   -ms-transition: opacity 0.25s ease-in-out;
 242   transition: opacity 0.25s ease-in-out;
 243   opacity: 1; }
 244
 245 .wf-loading h3 {
 246   opacity: 0; }
 247
 248 h3 {
 249   -webkit-transition: opacity 0.25s ease-in-out;
 250   -moz-transition: opacity 0.25s ease-in-out;
 251   -o-transition: opacity 0.25s ease-in-out;
 252   -ms-transition: opacity 0.25s ease-in-out;
 253   transition: opacity 0.25s ease-in-out;
 254   opacity: 1; }
 255
 256 .wf-loading h4 {
 257   opacity: 0; }
 258
 259 h4 {
 260   -webkit-transition: opacity 0.25s ease-in-out;
 261   -moz-transition: opacity 0.25s ease-in-out;
 262   -o-transition: opacity 0.25s ease-in-out;
 263   -ms-transition: opacity 0.25s ease-in-out;
 264   transition: opacity 0.25s ease-in-out;
 265   opacity: 1; }
 266
 267 .wf-loading h5 {
 268   opacity: 0; }
 269
 270 h5 {
 271   -webkit-transition: opacity 0.25s ease-in-out;
 272   -moz-transition: opacity 0.25s ease-in-out;
 273   -o-transition: opacity 0.25s ease-in-out;
 274   -ms-transition: opacity 0.25s ease-in-out;
 275   transition: opacity 0.25s ease-in-out;
 276   opacity: 1; }
 277
 278 .wf-loading h6 {
 279   opacity: 0; }
 280
 281 h6 {
 282   -webkit-transition: opacity 0.25s ease-in-out;
 283   -moz-transition: opacity 0.25s ease-in-out;
 284   -o-transition: opacity 0.25s ease-in-out;
 285   -ms-transition: opacity 0.25s ease-in-out;
 286   transition: opacity 0.25s ease-in-out;
 287   opacity: 1; }
 288
 289 .wf-loading p {
 290   opacity: 0; }
 291
 292 p {
 293   -webkit-transition: opacity 0.25s ease-in-out;
 294   -moz-transition: opacity 0.25s ease-in-out;
 295   -o-transition: opacity 0.25s ease-in-out;
 296   -ms-transition: opacity 0.25s ease-in-out;
 297   transition: opacity 0.25s ease-in-out;
 298   opacity: 1; }
 299
 300 .wf-loading li {
 301   opacity: 0; }
 302
 303 li {
 304   -webkit-transition: opacity 0.25s ease-in-out;
 305   -moz-transition: opacity 0.25s ease-in-out;
 306   -o-transition: opacity 0.25s ease-in-out;
 307   -ms-transition: opacity 0.25s ease-in-out;
 308   transition: opacity 0.25s ease-in-out;
 309   opacity: 1; }
 310
 311 /* 1.`Layout
 312 ---------------------------------------------- */
 313 html,
 314 body {
 315   height: 100%;
 316   margin: 0; }
 317
 318 body {
 319   background-position: 20% 0; }
 320
 321 /* a.`header
 322 -------------------------- */
 323 #g-masthead {
 324   background-color: #262626; }
 325   #g-masthead .wrapper {
 326     background-color: #262626; }
 327
 328 #g-logo a {
 329   display: block; }
 330
 331 #g-nav-user {
 332   padding: 0.375em 0.75em 0.75em;
 333   text-align: right; }
 334   #g-nav-user li {
 335     display: inline; }
 336     #g-nav-user li.first, #g-nav-user li.first a {
 337       border: 0; }
 338   #g-nav-user a {
 339     padding: 0 0.75em;
 340     color: #ffcd58; }
 341
 342 #g-nav-main ul {
 343   float: right;
 344   padding: 0.375em 0; }
 345 #g-nav-main li {
 346   display: inline-block;
 347   *display: inline;
 348   *zoom: 1;
 349   vertical-align: middle; }
 350 #g-nav-main a {
 351   position: relative;
 352   display: block;
 353   padding: 0.375em 0;
 354   margin-left: 1.5em;
 355   color: #fff; }
 356   #g-nav-main a:hover {
 357     color: #ffcd58; }
 358   #g-nav-main a .icon {
 359     position: absolute;
 360     left: 0; }
 361 #g-nav-main #school_link {
 362   padding-left: 1.65em; }
 363   #g-nav-main #school_link .icon {
 364     top: 50%;
 365     margin-top: -10px; }
 366 #g-nav-main #blog_link {
 367   padding-left: 1.8em; }
 368   #g-nav-main #blog_link .icon {
 369     top: 50%;
 370     margin-top: -9px; }
 371 #g-nav-main #archive_link {
 372   padding-left: 1.65em; }
 373
 374 #g-masthead-hr {
 375   position: absolute;
 376   margin-top: 0;
 377   margin-bottom: 0;
 378   top: 100%;
 379   height: 3px;
 380   border: 0;
 381   background-color: #ffcd58; }
 382
 383 /* b.`content
 384
 385 -------------------------- */
 386 #g-page {
 387   background-color: #fff;
 388   margin-bottom: 3em; }
 389
 390 .page {
 391   display: none;
 392   margin-bottom: 1.5em;
 393   margin-top: 3px;
 394   color: #333; }
 395
 396 .breadcrumb {
 397   border-bottom: 1px solid #f5f5f5;
 398   background-color: #fafafa; }
 399   .breadcrumb a {
 400     display: block;
 401     float: left;
 402     padding: 0.375em; }
 403     .breadcrumb a:hover .action {
 404       color: #e8a200; }
 405     .breadcrumb a:hover .location {
 406       color: #666; }
 407     .breadcrumb a span {
 408       -webkit-transition: color 0.25s ease-in-out;
 409       -moz-transition: color 0.25s ease-in-out;
 410       -o-transition: color 0.25s ease-in-out;
 411       -ms-transition: color 0.25s ease-in-out;
 412       transition: color 0.25s ease-in-out; }
 413   .breadcrumb .action {
 414     color: #666; }
 415   .breadcrumb .location {
 416     color: #bbb; }
 417
 418 .subheader {
 419   padding: 1.5em 0 2.25em; }
 420   .subheader h1, .subheader h3 {
 421     margin: 0; }
 422   .subheader h1 {
 423     color: #333; }
 424
 425 /* c.`footer
 426 -------------------------- */
 427 #g-footer {
 428   text-align: center; }
 429
 430 #g-nav-footer {
 431   margin-bottom: 0.75em;
 432   text-align: center; }
 433   #g-nav-footer li {
 434     display: inline;
 435     text-align: center; }
 436   #g-nav-footer a {
 437     padding: 0 0.75em; }
 438
 439 #g-footer-copyright img {
 440   margin: 0 auto;
 441   margin-bottom: 0.75em; }
 442
 443 .footer {
 444   color: #444;
 445   padding-top: 24px; }
 446   .footer #footer-nav {
 447     float: right;
 448     margin-right: -16px; }
 449     .footer #footer-nav li {
 450       display: inline-block;
 451       *display: inline; }
 452     .footer #footer-nav a {
 453       -webkit-transition: color 0.25s ease-in-out;
 454       -moz-transition: color 0.25s ease-in-out;
 455       -o-transition: color 0.25s ease-in-out;
 456       -ms-transition: color 0.25s ease-in-out;
 457       transition: color 0.25s ease-in-out;
 458       padding: 5px 16px;
 459       color: #999; }
 460       .footer #footer-nav a:hover {
 461         color: #fff; }
 462   .footer p {
 463     float: right;
 464     clear: both;
 465     margin-top: 24px; }
 466   .footer .creative_commons {
 467     float: right;
 468     clear: both; }
 469     .footer .creative_commons .section {
 470       clear: both;
 471       float: right; }
 472     .footer .creative_commons a {
 473       color: #777; }
 474
 475 /* 7.`Extensible Classes
 476 ---------------------------------------------- */
 477 .group:after, .wrapper:after, #g-nav-main:after, .page:after, .breadcrumb:after, #schools li:after, .schools ul:after {
 478   content: ".";
 479   display: block;
 480   height: 0;
 481   clear: both;
 482   visibility: hidden; }
 483
 484 .right {
 485   float: right !important; }
 486
 487 .left {
 488   float: left !important; }
 489
 490 .spacer {
 491   padding-top: 16px;
 492   padding-bottom: 32px; }
 493
 494 .half-width {
 495   width: 50%; }
 496
 497 .centered {
 498   text-align: center; }
 499
 500 .centered-rt-parent {
 501   margin: 0 auto; }
 502
 503 /* A.Sprites
 504 ----------------------------------------------------------------
 505
 506 [Table of contents] - a map of our sprites
 507
 508     A1.Setup
 509     A2.Sprites
 510
 511 ---------------------------------------------------------------- */
 512 /* A1.`Setup
 513 ---------------------------------------------- */
 514 .icon,
 515 .sprite {
 516   text-indent: -9999px;
 517   line-height: 0;
 518   font-size: 0;
 519   overflow: hidden;
 520   display: block; }
 521
 522 .sprite {
 523   background-image: url("../img/finalsclub-sprite-images.png"); }
 524
 525 .icon {
 526   background-image: url("../img/finalsclub-sprite-icons.png"); }
 527
 528 /* A2.`Sprites
 529 ---------------------------------------------- */
 530 .paperclip, #g-nav-main #school_link .icon, .paperclip-active, #g-nav-main #school_link:hover .icon {
 531   background-position: 0 0;
 532   width: 22px;
 533   height: 20px; }
 534
 535 .paperclip-active, #g-nav-main #school_link:hover .icon {
 536   background-position: -24px 0; }
 537
 538 .align-lines, #g-nav-main #blog_link .icon {
 539   background-position: 0 -25px;
 540   width: 24px;
 541   height: 17px; }
 542
 543 .align-lines-active, #g-nav-main #blog_link:hover .icon {
 544   background-position: -27px -25px; }
 545
 546 .book, #g-nav-main #archive_link .icon, .book-active, #g-nav-main #archive_link:hover .icon {
 547   background-position: 0 -46px;
 548   width: 19px;
 549   height: 26px; }
 550
 551 .book-active, #g-nav-main #archive_link:hover .icon {
 552   background-position: -24px -46px; }
 553
 554 .logo-brown {
 555   display: block;
 556   background: url(../img/sprite-schools.png) no-repeat -117px -78px;
 557   width: 32px;
 558   height: 37px; }
 559
 560 .logo-california {
 561   display: block;
 562   background: url(../img/sprite-schools.png) no-repeat -53px -78px;
 563   width: 46px;
 564   height: 37px; }
 565
 566 .logo-columbia {
 567   display: block;
 568   background: url(../img/sprite-schools.png) no-repeat 0px -78px;
 569   width: 51px;
 570   height: 37px; }
 571
 572 .logo-cornell {
 573   display: block;
 574   background: url(../img/sprite-schools.png) no-repeat -117px 0px;
 575   width: 38px;
 576   height: 37px; }
 577
 578 .logo-dartmouth {
 579   display: block;
 580   background: url(../img/sprite-schools.png) no-repeat 0px -117px;
 581   width: 30px;
 582   height: 37px; }
 583
 584 .logo-harvard {
 585   display: block;
 586   background: url(../img/sprite-schools.png) no-repeat -72px -39px;
 587   width: 39px;
 588   height: 37px; }
 589
 590 .logo-lock_haven {
 591   display: block;
 592   background: url(../img/sprite-schools.png) no-repeat -32px -117px;
 593   width: 33px;
 594   height: 37px; }
 595
 596 .logo-mit {
 597   display: block;
 598   background: url(../img/sprite-schools.png) no-repeat 0px -39px;
 599   width: 70px;
 600   height: 37px; }
 601
 602 .logo-penn {
 603   display: block;
 604   background: url(../img/sprite-schools.png) no-repeat 0px 0px;
 605   width: 115px;
 606   height: 37px; }
 607
 608 .logo-shield {
 609   display: block;
 610   background: url(../img/sprite-schools.png) no-repeat -67px -117px;
 611   width: 36px;
 612   height: 37px; }
 613
 614 .logo-texas {
 615   display: block;
 616   background: url(../img/sprite-schools.png) no-repeat -105px -117px;
 617   width: 29px;
 618   height: 37px; }
 619
 620 .logo-yale {
 621   display: block;
 622   background: url(../img/sprite-schools.png) no-repeat -117px -39px;
 623   width: 38px;
 624   height: 37px; }
 625
 626 /*----------------------------------------------------------------
 627
 628 [Table of contents]
 629
 630  0.Home
 631  1.Schools
 632  2.Courses
 633  3.Course
 634  4.Legal
 635
 636 ----------------------------------------------------------------*/
 637 /* 0.`Home
 638 ---------------------------------------------- */
 639 #pg_home .subheader {
 640   text-align: center;
 641   padding: 3em 0; }
 642 #pg_home .section-home {
 643   margin-bottom: 1.5em; }
 644
 645 #intro-schools li {
 646   display: inline-block;
 647   *display: inline;
 648   *zoom: 1;
 649   vertical-align: middle;
 650   position: relative;
 651   padding: 0.375em 0;
 652   padding-right: 0.75em; }
 653   #intro-schools li:after {
 654     content: "";
 655     position: absolute;
 656     right: 3px;
 657     top: 50%;
 658     width: 3px;
 659     height: 2px;
 660     background-color: #999; }
 661
 662 /* 1.`Schools
 663 ---------------------------------------------- */
 664 #schools a {
 665   display: block;
 666   float: left;
 667   clear: both;
 668   padding: 0.375em; }
 669   #schools a:hover .school_name {
 670     color: #e8a200; }
 671   #schools a:hover .number_of_courses, #schools a:hover .number_of_notes {
 672     color: #444; }
 673   #schools a span {
 674     -webkit-transition: color 0.25s ease-in-out;
 675     -moz-transition: color 0.25s ease-in-out;
 676     -o-transition: color 0.25s ease-in-out;
 677     -ms-transition: color 0.25s ease-in-out;
 678     transition: color 0.25s ease-in-out; }
 679 #schools .icon-pair, #schools .text-pair {
 680   display: inline-block;
 681   *display: inline;
 682   *zoom: 1;
 683   vertical-align: middle; }
 684 #schools .icon-pair {
 685   margin-right: 0.75em; }
 686 #schools .school_name {
 687   color: #333; }
 688 #schools .number_of_courses, #schools .number_of_notes {
 689   color: #999; }
 690
 691 /* 2.`Courses
 692 ---------------------------------------------- */
 693 #pg_courses .course {
 694   position: relative;
 695   margin-bottom: 0.75em; }
 696   #pg_courses .course .course-name {
 697     display: block;
 698     margin-bottom: 0.375em;
 699     text-transform: capitalize;
 700     color: #000;
 701     -webkit-transition: color 0.25s ease-in-out;
 702     -moz-transition: color 0.25s ease-in-out;
 703     -o-transition: color 0.25s ease-in-out;
 704     -ms-transition: color 0.25s ease-in-out;
 705     transition: color 0.25s ease-in-out; }
 706     #pg_courses .course .course-name:hover {
 707       color: #e8a200; }
 708   #pg_courses .course .course-description {
 709     color: #777; }
 710   #pg_courses .course .course-content {
 711     padding-bottom: 1.5em;
 712     margin-left: 60px;
 713     background-image: url("../img/dotted-x.png");
 714     background-position: bottom;
 715     background-repeat: repeat-x; }
 716   #pg_courses .course .course-data {
 717     position: absolute;
 718     top: 0;
 719     color: #bfbfbf; }
 720   #pg_courses .course .course-data-item {
 721     margin-bottom: 0.25em;
 722     text-align: center; }
 723   #pg_courses .course .course-data-description {
 724     margin-top: -0.5em; }
 725
 726 /* 3.`Course
 727 ---------------------------------------------- */
 728 .link-bar {
 729   margin-left: -0.375em; }
 730   .link-bar li {
 731     display: block;
 732     float: left; }
 733     .link-bar li.last a {
 734       border: 0; }
 735   .link-bar a {
 736     display: block;
 737     padding: 0 0.375em;
 738     border-right: 1px solid #ffcd58;
 739     color: #e8a200; }
 740
 741 .video-wrapper {
 742   -moz-border-radius: 5px;
 743   border-radius: 5px;
 744   padding: 5px;
 745   background-color: #f5f5f5;
 746   text-align: center;
 747   line-height: 0; }
 748
 749 .schools li {
 750   float: left;
 751   width: 25%;
 752   height: 100px; }
 753 .schools em {
 754   margin: 0 auto; }
 755
 756 /* 4. Legal
 757 ---------------------------------------------- */
 758
 759 #pg_legal .subheader {
 760   text-align: center;
 761   padding: 3em 0; }
 762 #pg_legal .section-home {
 763   margin-bottom: 1.5em; }
 764
 765 /* media queries
 766 ============================================== */