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

   1 /*
   2 Title:  Master styles for screen media
   3 Author: Jordan Cooperman, jordan@vectormediagroup.com
   4 Year: 2011
   5
   6 Welcome, thou wanderer of the interwebs!
   7 If you have any questions, Don't be shy. Send me a line!
   8 ================================================================
   9 ----------------------------------------------------------------
  10
  11 [Table of contents]
  12
  13  0.General
  14  1.Layout
  15  2.Navigation
  16  3.Header
  17  4.Footer
  18  5.Pages
  19      i.
  20  6.Modules
  21  7.Forms
  22  8.Sprites
  23  *.User Defined
  24
  25 ----------------------------------------------------------------*/
  26 /* positioning */
  27 /* sprites */
  28 /* borders made from backgrounds */
  29 /* triangles */
  30 /* css3 */
  31 /* grid container
  32 ============================================== */
  33 .container-12 {
  34   width: 960px;
  35   margin: 0 auto;
  36   position: relative; }
  37   .container-12:after {
  38     content: ".";
  39     display: block;
  40     height: 0;
  41     clear: both;
  42     visibility: hidden; }
  43
  44 /* grid divisions
  45 ============================================== */
  46 .grid-1,
  47 .grid-2,
  48 .grid-3,
  49 .grid-4,
  50 .grid-5,
  51 .grid-6,
  52 .grid-7,
  53 .grid-8,
  54 .grid-9,
  55 .grid-10,
  56 .grid-11,
  57 .grid-12 {
  58   margin: 5px 5px;
  59   padding: 0;
  60   display: inline;
  61   float: left; }
  62
  63 .grid-1 {
  64   width: 7.292%; }
  65
  66 .grid-2 {
  67   width: 15.625%; }
  68
  69 .grid-3 {
  70   width: 23.958%; }
  71
  72 .grid-4 {
  73   width: 32.292%; }
  74
  75 .grid-5 {
  76   width: 40.625%; }
  77
  78 .grid-6 {
  79   width: 48.958%; }
  80
  81 .grid-7 {
  82   width: 57.292%; }
  83
  84 .grid-8 {
  85   width: 65.625%; }
  86
  87 .grid-9 {
  88   width: 73.958%; }
  89
  90 .grid-10 {
  91   width: 82.292%; }
  92
  93 .grid-11 {
  94   width: 90.625%; }
  95
  96 .grid-12 {
  97   width: 98.958%; }
  98
  99 .from-left-1 {
 100   margin-left: 70px; }
 101
 102 .from-left-2 {
 103   margin-left: 150px; }
 104
 105 .from-left-3 {
 106   margin-left: 230px; }
 107
 108 .from-left-4 {
 109   margin-left: 310px; }
 110
 111 .from-left-5 {
 112   margin-left: 390px; }
 113
 114 .from-left-6 {
 115   margin-left: 470px; }
 116
 117 .from-left-7 {
 118   margin-left: 550px; }
 119
 120 .from-left-8 {
 121   margin-left: 630px; }
 122
 123 .from-left-9 {
 124   margin-left: 710px; }
 125
 126 .from-left-10 {
 127   margin-left: 790px; }
 128
 129 .from-left-11 {
 130   margin-left: 870px; }
 131
 132 .from-left-12 {
 133   margin-left: 950px; }
 134
 135 .grid-centered {
 136   display: block;
 137   float: none;
 138   margin: 0 auto; }
 139
 140 * {
 141   font-family: "Verdana", "Helvetica Neue", "Arial", "Sans-serif"; }
 142
 143 body {
 144   /* 16px / 24px */
 145   font-size: 1em;
 146   line-height: 1.5em; }
 147
 148 .small {
 149   /* 13px / 18px */
 150   font-size: 0.813em;
 151   line-height: 1.385em; }
 152
 153 .normal, h3 {
 154   /* 16px / 24px */
 155   font-size: 1em;
 156   line-height: 1.5em;
 157   /* 24 */ }
 158
 159 .normal-large {
 160   /* 18 / 30 */
 161   font-size: 1.125em;
 162   line-height: 1.667em; }
 163
 164 .large, h2, h1 {
 165   /* 26 / 36px */
 166   font-size: 1.625em;
 167   line-height: 1.385em; }
 168
 169 .large-huge {
 170   /* 30 / 42px */
 171   font-size: 1.875em;
 172   line-height: 1.4em; }
 173   .large-huge.spaced {
 174     line-height: 2.4em; }
 175
 176 .huge {
 177   /* 42px / 48px */
 178   font-size: 2.625em;
 179   line-height: 1.143em; }
 180
 181 .massive {
 182   /* 68px / 72px */
 183   font-size: 4.25em;
 184   line-height: 0.988em; }
 185
 186 .gigantic {
 187   /* 110px / 120px */
 188   font-size: 6.875em;
 189   line-height: 1.091em; }
 190
 191 p {
 192   font-size: 1.125em;
 193   /* 18 / 16 */
 194   font-family: "minion-pro"; }
 195   p .drop-cap {
 196     font-size: 2em;
 197     /* 24 / 12 */ }
 198
 199 h1, h2, h3, h4, h5, h6 {
 200   font-family: "museo-slab";
 201   font-weight: 700;
 202   margin: 0; }
 203
 204 h1 .small {
 205   font-size: 0.66666666666667em;
 206   /* 20 / 30 */
 207   font-family: "museo-sans";
 208   font-weight: 300; }
 209
 210 #user-nav li {
 211   font-family: "museo-sans";
 212   font-weight: 500;
 213   font-style: italic; }
 214 #user-nav a {
 215   font-family: "museo-sans";
 216   font-weight: 500;
 217   font-style: normal; }
 218
 219 #main-nav a {
 220   font-family: "museo-slab";
 221   font-weight: 700; }
 222
 223 button,
 224 #footer-nav a {
 225   font-family: "museo-sans";
 226   font-weight: 500; }
 227
 228 /*
 229  * media queries included
 230  * at end of document
 231  */
 232 /* 0.`general
 233 ============================================== */
 234 ::-moz-selection {
 235   background: #44a1dd;
 236   color: #fff;
 237   text-shadow: none; }
 238
 239 ::selection {
 240   background: #44a1dd;
 241   color: #fff;
 242   text-shadow: none; }
 243
 244 hr.stripes {
 245   margin: 0;
 246   height: 16px;
 247   clear: both;
 248   border-top: 1px solid #e5e5e5;
 249   border-bottom: 1px solid #fff;
 250   background-image: url("../img/bg-stripes.png");
 251   background-repeat: repeat;
 252   background-color: #fff; }
 253 hr.spacer {
 254   padding: 0;
 255   margin: 10px 0 30px 0; }
 256 hr.heading {
 257   margin-bottom: 16px; }
 258 hr.bordered {
 259   border-bottom: 2px solid #f2b83b; }
 260
 261 button {
 262   -moz-border-radius: 5px;
 263   border-radius: 5px;
 264   padding: 8px 24px;
 265   border: 0;
 266   background-image: url("../img/button-bg.png");
 267   background-repeat: repeat-x;
 268   background-position: left bottom; }
 269   button.blue {
 270     background-color: #367da9;
 271     border: 1px solid #16567e;
 272     color: #fff; }
 273   button.green {
 274     background-color: #78b343;
 275     border: 1px solid #4f901b;
 276     color: #fff; }
 277   button.three-dim.blue {
 278     -moz-box-shadow: 2px 2px 0 #16567e;
 279     -webkit-box-shadow: 2px 2px 0 #16567e;
 280     box-shadow: 2px 2px 0 #16567e; }
 281   button.three-dim.green {
 282     -moz-box-shadow: 2px 2px 0 #4f901b;
 283     -webkit-box-shadow: 2px 2px 0 #4f901b;
 284     box-shadow: 2px 2px 0 #4f901b; }
 285
 286 h3.heading {
 287   margin-bottom: 16px;
 288   padding-left: 12px; }
 289
 290 em {
 291   font-family: "Georgia", "serif"; }
 292
 293 /* 1.`layout
 294 ============================================== */
 295 html,
 296 body {
 297   height: 100%;
 298   margin: 0; }
 299
 300 body {
 301   background-image: url("../img/bg-black-noise.gif");
 302   background-repeat: repeat; }
 303
 304 .header {
 305   -moz-box-shadow: 0 1px 1px #888888;
 306   -webkit-box-shadow: 0 1px 1px #888888;
 307   box-shadow: 0 1px 1px #888888;
 308   border-top: 1px solid #f2b83b;
 309   position: relative;
 310   z-index: 10;
 311   border-bottom: 2px solid #333; }
 312   .header .container-12 > div {
 313     margin-top: 0;
 314     margin-bottom: 0; }
 315
 316 .content {
 317   background-color: #fff; }
 318
 319 /* 2.`navigation
 320 ============================================== */
 321 #user-nav {
 322   border-bottom-left-radius: 5px;
 323   -moz-border-radius-bottomleft: 5px;
 324   -webkit-border-bottom-left-radius: 5px;
 325   border-bottom-right-radius: 5px;
 326   -moz-border-radius-bottomright: 5px;
 327   -webkit-border-bottom-right-radius: 5px;
 328   float: right;
 329   background-color: #f2b83b; }
 330   #user-nav li {
 331     display: inline-block;
 332     vertical-align: middle;
 333     float: none;
 334     padding: 3px 12px;
 335     color: #fff; }
 336     #user-nav li a {
 337       display: block;
 338       color: #fff; }
 339
 340 #main-nav {
 341   clear: both; }
 342   #main-nav:after {
 343     content: ".";
 344     display: block;
 345     height: 0;
 346     clear: both;
 347     visibility: hidden; }
 348   #main-nav ul {
 349     float: right; }
 350   #main-nav li {
 351     display: inline-block;
 352     vertical-align: middle;
 353     float: none; }
 354     #main-nav li a {
 355       -webkit-transition: color 0.25s ease-in-out;
 356       -moz-transition: color 0.25s ease-in-out;
 357       -o-transition: color 0.25s ease-in-out;
 358       -ms-transition: color 0.25s ease-in-out;
 359       transition: color 0.25s ease-in-out;
 360       display: block;
 361       padding: 10px;
 362       padding-left: 20px;
 363       text-transform: uppercase;
 364       color: #aaa; }
 365       #main-nav li a.active {
 366         position: relative;
 367         color: #fff; }
 368         #main-nav li a.active em {
 369           position: absolute;
 370           left: 0;
 371           top: 50%;
 372           margin-top: -8px;
 373           background-position: 0 0;
 374           width: 14px;
 375           height: 14px;
 376           background-repeat: no-repeat; }
 377       #main-nav li a em {
 378         text-transform: none; }
 379       #main-nav li a:hover {
 380         color: #eee; }
 381
 382 /* 3.`header
 383 ============================================== */
 384 #logo {
 385   float: left;
 386   padding: 5px;
 387   margin-left: 10px;
 388   margin-top: 5px; }
 389
 390 #header {
 391   margin-top: 20px; }
 392
 393 .highlight {
 394   background-image: url("../img/logo-bg.png");
 395   background-position: left bottom;
 396   background-repeat: no-repeat; }
 397
 398 /* 4.`footer
 399 ============================================== */
 400 .footer {
 401   color: #444;
 402   padding-top: 24px; }
 403   .footer #footer-nav {
 404     float: right;
 405     margin-right: -16px; }
 406     .footer #footer-nav li {
 407       display: inline-block;
 408       *display: inline; }
 409     .footer #footer-nav a {
 410       -webkit-transition: color 0.25s ease-in-out;
 411       -moz-transition: color 0.25s ease-in-out;
 412       -o-transition: color 0.25s ease-in-out;
 413       -ms-transition: color 0.25s ease-in-out;
 414       transition: color 0.25s ease-in-out;
 415       padding: 5px 16px;
 416       color: #999; }
 417       .footer #footer-nav a:hover {
 418         color: #fff; }
 419   .footer p {
 420     float: right;
 421     clear: both;
 422     margin-top: 24px; }
 423   .footer .creative_commons {
 424     float: right;
 425     clear: both; }
 426     .footer .creative_commons .section {
 427       clear: both;
 428       float: right; }
 429     .footer .creative_commons a {
 430       color: #777; }
 431
 432 /* 6.`modules
 433 ============================================== */
 434 .padded-loose {
 435   padding: 10px;
 436   padding-top: 0;
 437   padding-bottom: 0; }
 438
 439 .button-set.vertical button {
 440   margin-bottom: 16px; }
 441 .button-set.half-width-buttons button {
 442   width: 48%; }
 443 .button-set.centered {
 444   text-align: center; }
 445
 446 .video-wrapper {
 447   -moz-border-radius: 5px;
 448   border-radius: 5px;
 449   padding: 5px;
 450   background-color: #f5f5f5;
 451   text-align: center; }
 452
 453 .schools ul:after {
 454   content: ".";
 455   display: block;
 456   height: 0;
 457   clear: both;
 458   visibility: hidden; }
 459 .schools li {
 460   float: left;
 461   width: 25%;
 462   height: 100px; }
 463 .schools em {
 464   margin: 0 auto; }
 465
 466 /* 8.`sprites
 467 ============================================== */
 468 .icon,
 469 .sprite,
 470 .sprite-school {
 471   text-indent: -9999px;
 472   line-height: 0;
 473   font-size: 0;
 474   overflow: hidden;
 475   display: block; }
 476
 477 .sprite {
 478   background-image: url("../img/finalsclub-sprite-images.png"); }
 479
 480 .icon {
 481   background-image: url("../img/finalsclub-sprite-icons.png"); }
 482
 483 .sprite-school {
 484   background-image: url("../img/finalsclub-sprite-schools.gif"); }
 485
 486 .brown {
 487   background-position: 0 0;
 488   width: 61px;
 489   height: 72px; }
 490
 491 .columbia {
 492   background-position: -62px 0;
 493   width: 81px;
 494   height: 61px; }
 495
 496 .cornell {
 497   background-position: -144px 0;
 498   width: 71px;
 499   height: 72px; }
 500
 501 .dartmouth {
 502   background-position: -216px 0;
 503   width: 56px;
 504   height: 71px; }
 505
 506 .shield {
 507   background-position: -273px 0;
 508   width: 59px;
 509   height: 60px; }
 510
 511 .mit {
 512   background-position: -333px 0;
 513   width: 79px;
 514   height: 41px; }
 515
 516 .lock_haven {
 517   background-position: -413px 0;
 518   width: 61px;
 519   height: 68px; }
 520
 521 .cal {
 522   background-position: -475px 0;
 523   width: 91px;
 524   height: 72px; }
 525
 526 .texas {
 527   background-position: -567px 0;
 528   width: 54px;
 529   height: 68px; }
 530
 531 .yale {
 532   background-position: -622px 0;
 533   width: 51px;
 534   height: 50px; }
 535
 536 .penn {
 537   background-position: -674px 0;
 538   width: 115px;
 539   height: 65px; }
 540
 541 .harvard {
 542   background-position: -790px 0;
 543   width: 67px;
 544   height: 65px; }
 545
 546 /* media queries */
 547 /* media queries
 548 ============================================== */
 549 /* *.`user defined
 550 ============================================== */
 551 .right {
 552   float: right !important; }
 553
 554 .no-top-margin {
 555   margin-top: 0; }
 556
 557 .spacer {
 558   padding-top: 16px;
 559   padding-bottom: 32px; }
 560
 561 .yellow {
 562   color: #f2b83b; }
 563
 564 .half-width {
 565   width: 50%; }
 566
 567 .centered {
 568   text-align: center; }
 569
 570 .centered-rt-parent {
 571   margin: 0 auto; }