public/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   padding: 1em 3%; }
 319
 320 /* 2.`navigation
 321 ============================================== */
 322 #user-nav {
 323   border-bottom-left-radius: 5px;
 324   -moz-border-radius-bottomleft: 5px;
 325   -webkit-border-bottom-left-radius: 5px;
 326   border-bottom-right-radius: 5px;
 327   -moz-border-radius-bottomright: 5px;
 328   -webkit-border-bottom-right-radius: 5px;
 329   float: right;
 330   background-color: #f2b83b; }
 331   #user-nav li {
 332     display: inline-block;
 333     vertical-align: middle;
 334     float: none;
 335     padding: 3px 12px;
 336     color: #fff; }
 337     #user-nav li a {
 338       display: block;
 339       color: #fff; }
 340
 341 #main-nav {
 342   clear: both; }
 343   #main-nav:after {
 344     content: ".";
 345     display: block;
 346     height: 0;
 347     clear: both;
 348     visibility: hidden; }
 349   #main-nav ul {
 350     float: right; }
 351   #main-nav li {
 352     display: inline-block;
 353     vertical-align: middle;
 354     float: none; }
 355     #main-nav li a {
 356       -webkit-transition: color 0.25s ease-in-out;
 357       -moz-transition: color 0.25s ease-in-out;
 358       -o-transition: color 0.25s ease-in-out;
 359       -ms-transition: color 0.25s ease-in-out;
 360       transition: color 0.25s ease-in-out;
 361       display: block;
 362       padding: 10px;
 363       padding-left: 20px;
 364       text-transform: uppercase;
 365       color: #aaa; }
 366       #main-nav li a.active {
 367         position: relative;
 368         color: #fff; }
 369         #main-nav li a.active em {
 370           position: absolute;
 371           left: 0;
 372           top: 50%;
 373           margin-top: -8px;
 374           background-position: 0 0;
 375           width: 14px;
 376           height: 14px;
 377           background-repeat: no-repeat; }
 378       #main-nav li a em {
 379         text-transform: none; }
 380       #main-nav li a:hover {
 381         color: #eee; }
 382
 383 /* 3.`header
 384 ============================================== */
 385 #logo {
 386   float: left;
 387   padding: 5px;
 388   margin-left: 10px;
 389   margin-top: 5px; }
 390
 391 #header {
 392   margin-top: 20px; }
 393
 394 .highlight {
 395   background-image: url("../img/logo-bg.png");
 396   background-position: left bottom;
 397   background-repeat: no-repeat; }
 398
 399 /* 4.`footer
 400 ============================================== */
 401 .footer {
 402   color: #444;
 403   padding-top: 24px; }
 404   .footer #footer-nav {
 405     float: right;
 406     margin-right: -16px; }
 407     .footer #footer-nav li {
 408       display: inline-block;
 409       *display: inline; }
 410     .footer #footer-nav a {
 411       -webkit-transition: color 0.25s ease-in-out;
 412       -moz-transition: color 0.25s ease-in-out;
 413       -o-transition: color 0.25s ease-in-out;
 414       -ms-transition: color 0.25s ease-in-out;
 415       transition: color 0.25s ease-in-out;
 416       padding: 5px 16px;
 417       color: #999; }
 418       .footer #footer-nav a:hover {
 419         color: #fff; }
 420   .footer p {
 421     float: right;
 422     clear: both;
 423     margin-top: 24px; }
 424   .footer .creative_commons {
 425     float: right;
 426     clear: both; }
 427     .footer .creative_commons .section {
 428       clear: both;
 429       float: right; }
 430     .footer .creative_commons a {
 431       color: #777; }
 432
 433 /* 6.`modules
 434 ============================================== */
 435 .padded-loose {
 436   padding: 10px;
 437   padding-top: 0;
 438   padding-bottom: 0; }
 439
 440 .button-set.vertical button {
 441   margin-bottom: 16px; }
 442 .button-set.half-width-buttons button {
 443   width: 48%; }
 444 .button-set.centered {
 445   text-align: center; }
 446
 447 .video-wrapper {
 448   -moz-border-radius: 5px;
 449   border-radius: 5px;
 450   padding: 5px;
 451   background-color: #f5f5f5;
 452   text-align: center; }
 453
 454 .schools ul:after {
 455   content: ".";
 456   display: block;
 457   height: 0;
 458   clear: both;
 459   visibility: hidden; }
 460 .schools li {
 461   float: left;
 462   width: 25%;
 463   height: 100px; }
 464 .schools em {
 465   margin: 0 auto; }
 466
 467 /* 8.`sprites
 468 ============================================== */
 469 .icon,
 470 .sprite,
 471 .sprite-school {
 472   text-indent: -9999px;
 473   line-height: 0;
 474   font-size: 0;
 475   overflow: hidden;
 476   display: block; }
 477
 478 .sprite {
 479   background-image: url("../img/finalsclub-sprite-images.png"); }
 480
 481 .icon {
 482   background-image: url("../img/finalsclub-sprite-icons.png"); }
 483
 484 .sprite-school {
 485   background-image: url("../img/finalsclub-sprite-schools.gif"); }
 486
 487 .brown {
 488   background-position: 0 0;
 489   width: 61px;
 490   height: 72px; }
 491
 492 .columbia {
 493   background-position: -62px 0;
 494   width: 81px;
 495   height: 61px; }
 496
 497 .cornell {
 498   background-position: -144px 0;
 499   width: 71px;
 500   height: 72px; }
 501
 502 .dartmouth {
 503   background-position: -216px 0;
 504   width: 56px;
 505   height: 71px; }
 506
 507 .shield {
 508   background-position: -273px 0;
 509   width: 59px;
 510   height: 60px; }
 511
 512 .mit {
 513   background-position: -333px 0;
 514   width: 79px;
 515   height: 41px; }
 516
 517 .lock_haven {
 518   background-position: -413px 0;
 519   width: 61px;
 520   height: 68px; }
 521
 522 .cal {
 523   background-position: -475px 0;
 524   width: 91px;
 525   height: 72px; }
 526
 527 .texas {
 528   background-position: -567px 0;
 529   width: 54px;
 530   height: 68px; }
 531
 532 .yale {
 533   background-position: -622px 0;
 534   width: 51px;
 535   height: 50px; }
 536
 537 .penn {
 538   background-position: -674px 0;
 539   width: 115px;
 540   height: 65px; }
 541
 542 .harvard {
 543   background-position: -790px 0;
 544   width: 67px;
 545   height: 65px; }
 546
 547 /* media queries */
 548 /* media queries
 549 ============================================== */
 550 /* *.`user defined
 551 ============================================== */
 552 .right {
 553   float: right !important; }
 554
 555 .no-top-margin {
 556   margin-top: 0; }
 557
 558 .spacer {
 559   padding-top: 16px;
 560   padding-bottom: 32px; }
 561
 562 .yellow {
 563   color: #f2b83b; }
 564
 565 .half-width {
 566   width: 50%; }
 567
 568 .centered {
 569   text-align: center; }
 570
 571 .centered-rt-parent {
 572   margin: 0 auto; }
 573
 574
 575
 576
 577 #messages {
 578         text-align:  center;
 579         background: #adf;
 580         color: black;
 581         font-weight: bold;
 582         padding: 0.5em 0;
 583 }
 584
 585 div.school {
 586
 587         cursor: pointer; cursor: hand;
 588         margin: 1%;
 589         padding: 2%;
 590         border: solid 1px #888;
 591         -moz-border-radius: 0.20em;
 592         -webkit-border-radius: 0.20em;
 593         -webkit-box-shadow: 0 0.2em 0.3em rgba(0, 0, 0, .1);
 594         -moz-box-shadow: 0 0.2em 0.3em rgba(0, 0, 0, .1);
 595         /*
 596         */
 597 }
 598
 599 div.school div.name {
 600         font-weight: bold;
 601         font-size: 120%;
 602         margin: 0 0;
 603 }
 604
 605 div.school div.desc {
 606         font-size: 90%;
 607         color: #888;
 608         font-style: italic;
 609         margin: 0 0;
 610 }
 611
 612