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   min-height: 25em; }
 320
 321 /* 2.`navigation
 322 ============================================== */
 323 #user-nav {
 324   border-bottom-left-radius: 5px;
 325   -moz-border-radius-bottomleft: 5px;
 326   -webkit-border-bottom-left-radius: 5px;
 327   border-bottom-right-radius: 5px;
 328   -moz-border-radius-bottomright: 5px;
 329   -webkit-border-bottom-right-radius: 5px;
 330   float: right;
 331   background-color: #f2b83b; }
 332   #user-nav li {
 333     display: inline-block;
 334     vertical-align: middle;
 335     float: none;
 336     padding: 3px 12px;
 337     color: #fff; }
 338     #user-nav li a {
 339       display: block;
 340       color: #fff; }
 341
 342 #main-nav {
 343   clear: both; }
 344   #main-nav:after {
 345     content: ".";
 346     display: block;
 347     height: 0;
 348     clear: both;
 349     visibility: hidden; }
 350   #main-nav ul {
 351     float: right; }
 352   #main-nav li {
 353     display: inline-block;
 354     vertical-align: middle;
 355     float: none; }
 356     #main-nav li a {
 357       -webkit-transition: color 0.25s ease-in-out;
 358       -moz-transition: color 0.25s ease-in-out;
 359       -o-transition: color 0.25s ease-in-out;
 360       -ms-transition: color 0.25s ease-in-out;
 361       transition: color 0.25s ease-in-out;
 362       display: block;
 363       padding: 10px;
 364       padding-left: 20px;
 365       text-transform: uppercase;
 366       color: #aaa; }
 367       #main-nav li a.active {
 368         position: relative;
 369         color: #fff; }
 370         #main-nav li a.active em {
 371           position: absolute;
 372           left: 0;
 373           top: 50%;
 374           margin-top: -8px;
 375           background-position: 0 0;
 376           width: 14px;
 377           height: 14px;
 378           background-repeat: no-repeat; }
 379       #main-nav li a em {
 380         text-transform: none; }
 381       #main-nav li a:hover {
 382         color: #eee; }
 383
 384 /* 3.`header
 385 ============================================== */
 386 #logo {
 387   float: left;
 388   padding: 5px;
 389   margin-left: 10px;
 390   margin-top: 5px; }
 391
 392 #header {
 393   margin-top: 20px; }
 394
 395 .highlight {
 396   background-image: url("../img/logo-bg.png");
 397   background-position: left bottom;
 398   background-repeat: no-repeat; }
 399
 400 /* 4.`footer
 401 ============================================== */
 402 .footer {
 403   color: #444;
 404   padding-top: 24px; }
 405   .footer #footer-nav {
 406     float: right;
 407     margin-right: -16px; }
 408     .footer #footer-nav li {
 409       display: inline-block;
 410       *display: inline; }
 411     .footer #footer-nav a {
 412       -webkit-transition: color 0.25s ease-in-out;
 413       -moz-transition: color 0.25s ease-in-out;
 414       -o-transition: color 0.25s ease-in-out;
 415       -ms-transition: color 0.25s ease-in-out;
 416       transition: color 0.25s ease-in-out;
 417       padding: 5px 16px;
 418       color: #999; }
 419       .footer #footer-nav a:hover {
 420         color: #fff; }
 421   .footer p {
 422     float: right;
 423     clear: both;
 424     margin-top: 24px; }
 425   .footer .creative_commons {
 426     float: right;
 427     clear: both; }
 428     .footer .creative_commons .section {
 429       clear: both;
 430       float: right; }
 431     .footer .creative_commons a {
 432       color: #777; }
 433
 434 /* 6.`modules
 435 ============================================== */
 436 .padded-loose {
 437   padding: 10px;
 438   padding-top: 0;
 439   padding-bottom: 0; }
 440
 441 .button-set.vertical button {
 442   margin-bottom: 16px; }
 443 .button-set.half-width-buttons button {
 444   width: 48%; }
 445 .button-set.centered {
 446   text-align: center; }
 447
 448 .video-wrapper {
 449   -moz-border-radius: 5px;
 450   border-radius: 5px;
 451   padding: 5px;
 452   background-color: #f5f5f5;
 453   text-align: center; }
 454
 455 .schools ul:after {
 456   content: ".";
 457   display: block;
 458   height: 0;
 459   clear: both;
 460   visibility: hidden; }
 461 .schools li {
 462   float: left;
 463   width: 25%;
 464   height: 100px; }
 465 .schools em {
 466   margin: 0 auto; }
 467
 468 /* 8.`sprites
 469 ============================================== */
 470 .icon,
 471 .sprite,
 472 .sprite-school {
 473   text-indent: -9999px;
 474   line-height: 0;
 475   font-size: 0;
 476   overflow: hidden;
 477   display: block; }
 478
 479 .sprite {
 480   background-image: url("../img/finalsclub-sprite-images.png"); }
 481
 482 .icon {
 483   background-image: url("../img/finalsclub-sprite-icons.png"); }
 484
 485 .sprite-school {
 486   background-image: url("../img/finalsclub-sprite-schools.gif"); }
 487
 488 .brown {
 489   background-position: 0 0;
 490   width: 61px;
 491   height: 72px; }
 492
 493 .columbia {
 494   background-position: -62px 0;
 495   width: 81px;
 496   height: 61px; }
 497
 498 .cornell {
 499   background-position: -144px 0;
 500   width: 71px;
 501   height: 72px; }
 502
 503 .dartmouth {
 504   background-position: -216px 0;
 505   width: 56px;
 506   height: 71px; }
 507
 508 .shield {
 509   background-position: -273px 0;
 510   width: 59px;
 511   height: 60px; }
 512
 513 .mit {
 514   background-position: -333px 0;
 515   width: 79px;
 516   height: 41px; }
 517
 518 .lock_haven {
 519   background-position: -413px 0;
 520   width: 61px;
 521   height: 68px; }
 522
 523 .cal {
 524   background-position: -475px 0;
 525   width: 91px;
 526   height: 72px; }
 527
 528 .texas {
 529   background-position: -567px 0;
 530   width: 54px;
 531   height: 68px; }
 532
 533 .yale {
 534   background-position: -622px 0;
 535   width: 51px;
 536   height: 50px; }
 537
 538 .penn {
 539   background-position: -674px 0;
 540   width: 115px;
 541   height: 65px; }
 542
 543 .harvard {
 544   background-position: -790px 0;
 545   width: 67px;
 546   height: 65px; }
 547
 548 /* media queries */
 549 /* media queries
 550 ============================================== */
 551 /* *.`user defined
 552 ============================================== */
 553 .right {
 554   float: right !important; }
 555
 556 .no-top-margin {
 557   margin-top: 0; }
 558
 559 .spacer {
 560   padding-top: 16px;
 561   padding-bottom: 32px; }
 562
 563 .yellow {
 564   color: #f2b83b; }
 565
 566 .half-width {
 567   width: 50%; }
 568
 569 .centered {
 570   text-align: center; }
 571
 572 .centered-rt-parent {
 573   margin: 0 auto; }
 574
 575
 576
 577
 578 #messages {
 579         text-align:  center;
 580         background: #adf;
 581         color: black;
 582         font-weight: bold;
 583         padding: 0.5em 0;
 584 }
 585
 586 div.school {
 587
 588         cursor: pointer; cursor: hand;
 589         margin: 1%;
 590         padding: 2%;
 591         border: solid 1px #888;
 592         -moz-border-radius: 0.20em;
 593         -webkit-border-radius: 0.20em;
 594         -webkit-box-shadow: 0 0.2em 0.3em rgba(0, 0, 0, .1);
 595         -moz-box-shadow: 0 0.2em 0.3em rgba(0, 0, 0, .1);
 596         /*
 597         */
 598 }
 599
 600 div.school div.name {
 601         font-weight: bold;
 602         font-size: 120%;
 603         margin: 0 0;
 604 }
 605
 606 div.school div.desc {
 607         font-size: 90%;
 608         color: #888;
 609         font-style: italic;
 610         margin: 0 0;
 611 }
 612
 613
 614 div.course {
 615         margin: 1em 0;
 616 }
 617
 618
 619 div.press {
 620         margin: 2em 0;
 621 }
 622 img.press {
 623         height: 2.5em;
 624         float: left;
 625         zborder: solid 1px #aaa;
 626         margin: 0 2em 1em 0;
 627 }
 628
 629 div.press p.date {
 630         font-size: 90%;
 631         color: #68a;
 632 }
 633
 634 div.press p.readmore {
 635         font-size: 90%;
 636         font-style: italic;
 637 }
 638
 639 div.press p.readmore a {
 640         color: #48c;
 641 }
 642
 643 div.conduct { text-align: center; }
 644 div.conduct p.academic {
 645         padding: 2em 0;
 646 }
 647 div.conduct img {
 648         display: inline;
 649         padding: 20px;
 650         border: solid 1px #888;
 651         background: -webkit-gradient(linear, left top, left bottom, from(#fdfdfd), to(#f8f8f8));
 652         background: -moz-linear-gradient(top,  #fdfdfd,  #f8f8f8);
 653         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fcfcff', endColorstr='#f4f4ff');
 654         -webkit-border-radius: .2em;
 655         -moz-border-radius: .2em;
 656         border-radius: .2em;
 657         -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.5);
 658         -moz-box-shadow: 0 1px 2px rgba(0,0,0,.5);
 659         box-shadow: 0 1px 2px rgba(0,0,0,.5);
 660 }
 661 div.conduct p.vague {
 662         font-style: italic;
 663         font-size: 80%;
 664         color: #888;
 665 }
 666
 667
 668
 669 .row {
 670         display: table-row;
 671 }
 672 .row .label {
 673         width: 50%;
 674         text-align: right;
 675         display: table-cell;
 676         padding: 0.8em 3% 0.8em 0%;
 677         white-space: nowrap;
 678         font-weight: bold;
 679 }
 680 .row .field {
 681         width: 300px;
 682
 683         display: table-cell;
 684         padding: 0.2em 0;
 685 }
 686 .row .field input {
 687         width: 90%;
 688 }
 689
 690 div.content h1 {
 691         color: #000;
 692         text-align: left;
 693         font-weight: bold;
 694         font-family: Georgia, Helvetica;
 695 }
 696
 697 .content h1 {
 698         border-bottom: 2px solid #5c6572;
 699         zbackground: transparent url("/images/bg_main-heading.gif") 0 100% repeat-x;
 700         font-family: Georgia, helvetica;
 701         font-weight: normal;
 702         font-size: 140%;
 703         padding: 0.2em 0;
 704         margin-bottom: 1em;
 705 }
 706
 707 #pg_courses {
 708   min-height:700px;
 709 }
 710 #pg_courses #right {
 711   float:right;
 712   width:500px;
 713 }
 714
 715 .note, .notes_instructor, .notes_head {
 716         margin: 1.0em 0;
 717 }
 718
 719 .notes_head {
 720         font-weight: bold;
 721 }
 722
 723 .notes_instructor, .notes_head {
 724         color: #888;
 725 }
 726
 727 .notes_instructor {
 728         padding-bottom: 1.0em;
 729         border-bottom: solid 1px #aaa;
 730 }
 731
 732 .note .name {
 733         font-size: 110%;
 734 }
 735 .note .visits {
 736         font-style: italic;
 737         color: #aaa;
 738 }
 739
 740
 741 .lecture, .lectures_instructor, .lectures_head {
 742         margin: 1.0em 0;
 743 }
 744
 745 .lectures_head {
 746         font-weight: bold;
 747 }
 748
 749 .lectures_instructor, .lectures_head {
 750         color: #888;
 751 }
 752
 753 .lectures_instructor {
 754         padding-bottom: 1.0em;
 755         border-bottom: solid 1px #aaa;
 756 }
 757
 758 .lecture .name {
 759         font-size: 110%;
 760 }
 761 .lecture .created {
 762         font-style: italic;
 763         color: #aaa;
 764 }
 765
 766 .lecture {
 767         margin: 0.5em 0;
 768         padding: 0.5em 1em;
 769         border: solid 1px #888;
 770         -moz-border-radius: 0.20em;
 771         -webkit-border-radius: 0.20em;
 772 }
 773