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

   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
  27 $gold: #f2b83b;
  28 $blue: #367da9;
  29 $dark-blue: #16567e;
  30 $green: #78b343;
  31 $dark-green: #4f901b;
  32
  33 @import "includes/mixins.scss";
  34 @import "includes/grid.scss";
  35 @import "includes/type.scss";
  36
  37 /*
  38  * media queries included
  39  * at end of document
  40  */
  41
  42
  43 /* 0.`general
  44 ============================================== */
  45
  46 ::-moz-selection { background: #44a1dd; color: #fff; text-shadow: none; }
  47 ::selection { background: #44a1dd; color: #fff; text-shadow: none; }
  48
  49
  50 hr {
  51   &.stripes {
  52     margin: 0;
  53     height: 16px;
  54     clear: both;
  55     border-top: 1px solid #e5e5e5;
  56     border-bottom: 1px solid #fff;
  57     background-image: url("../img/bg-stripes.png");
  58     background-repeat: repeat;
  59     background-color: #fff;
  60   }
  61   &.spacer {
  62     padding: 0;
  63     margin : 10px 0 30px 0;
  64   }
  65   &.heading {
  66     margin-bottom: 16px;
  67   }
  68   &.bordered {
  69     border-bottom: 2px solid $gold;
  70   }
  71 }
  72
  73 button {
  74   @include rounded;
  75   padding: 8px 24px;
  76   border: 0;
  77   background-image: url("../img/button-bg.png");
  78   background-repeat: repeat-x;
  79   background-position: left bottom;
  80
  81   &.blue {
  82     background-color: $blue;
  83     border: 1px solid $dark-blue;
  84     color: #fff;
  85   }
  86   &.green {
  87     background-color: $green;
  88     border: 1px solid $dark-green;
  89     color: #fff;
  90   }
  91   &.three-dim.blue {
  92     @include drop-shadow(2px, 2px, 0, $dark-blue);
  93   }
  94   &.three-dim.green {
  95     @include drop-shadow(2px, 2px, 0, $dark-green);
  96   }
  97 }
  98
  99 h3.heading {
 100   margin-bottom: 16px;
 101   padding-left: 12px;
 102 }
 103
 104 em {
 105   font-family: "Georgia", "serif";
 106 }
 107
 108 /* 1.`layout
 109 ============================================== */
 110
 111 html,
 112 body {
 113   height : 100%;
 114   margin: 0;
 115 }
 116
 117 body {
 118     background-image: url("../img/bg-black-noise.gif");
 119     background-repeat: repeat;
 120 }
 121
 122 .header {
 123   @include drop-shadow(0, 1px, 1px, #888);
 124   border-top: 1px solid $gold;
 125   position: relative;
 126   z-index: 10;
 127   border-bottom: 2px solid #333;
 128
 129   .container-#{$cols} {
 130     > div {
 131       margin-top: 0;
 132       margin-bottom: 0;
 133     }
 134   }
 135 }
 136 .content { background-color: #fff; }
 137
 138
 139 /* 2.`navigation
 140 ============================================== */
 141
 142 #user-nav {
 143   @include rounded-side("left", "bottom");
 144   @include rounded-side("right", "bottom");
 145   float: right;
 146   background-color: $gold;
 147
 148   li {
 149     display: inline-block;
 150     vertical-align: middle;
 151     float: none;
 152     padding: 3px 12px;
 153     color: #fff;
 154
 155     a {
 156       display: block;
 157       color: #fff;
 158     }
 159   }
 160 }
 161
 162 #main-nav {
 163     @include group;
 164     clear: both;
 165
 166     ul {
 167       float: right;
 168     }
 169     li {
 170         display: inline-block;
 171         vertical-align: middle;
 172         float: none;
 173
 174         a {
 175           @include transition(color);
 176           display: block;
 177           padding: 10px;
 178           padding-left: 20px;
 179           text-transform: uppercase;
 180           color: #aaa;
 181
 182           &.active {
 183             position: relative;
 184             color: #fff;
 185
 186             em {
 187               position: absolute;
 188               left: 0;
 189               top: 50%;
 190               margin-top: -8px;
 191               background-position: 0 0;
 192               width: 14px;
 193               height: 14px;
 194               background-repeat: no-repeat;
 195             }
 196           }
 197           em {
 198             text-transform: none;
 199           }
 200
 201           &:hover {
 202             color: #eee;
 203           }
 204         }
 205     }
 206 }
 207
 208
 209
 210 /* 3.`header
 211 ============================================== */
 212
 213 #logo {
 214   float: left;
 215   padding: 5px;
 216   margin-left: 10px;
 217   margin-top: 5px;
 218 }
 219 #header {
 220     margin-top: 20px;
 221 }
 222 .highlight {
 223   background-image: url("../img/logo-bg.png");
 224   background-position: left bottom;
 225   background-repeat: no-repeat;
 226 }
 227
 228
 229 /* 4.`footer
 230 ============================================== */
 231
 232 .footer {
 233   color: #444;
 234   padding-top: 24px;
 235   #footer-nav {
 236     float: right;
 237     margin-right: -16px;
 238
 239     li {
 240       display: inline-block;
 241       *display: inline;
 242     }
 243     a {
 244       @include transition(color);
 245       padding: 5px 16px;
 246       color: #999;
 247       &:hover {
 248         color: #fff;
 249       }
 250     }
 251   }
 252   p {
 253     float: right;
 254     clear: both;
 255     margin-top: 24px;
 256   }
 257   .creative_commons {
 258     .section {
 259       clear: both;
 260       float: right;
 261     }
 262     float: right;
 263     clear: both;
 264     a {
 265       color: #777;
 266     }
 267   }
 268 }
 269
 270 /* 6.`modules
 271 ============================================== */
 272
 273 .padded-loose {
 274   padding: 10px;
 275   padding-top: 0;
 276   padding-bottom: 0;
 277 }
 278
 279 .button-set {
 280   &.vertical {
 281     button {
 282       margin-bottom: 16px;
 283     }
 284   }
 285   &.half-width-buttons {
 286     button {
 287       width: 48%;
 288     }
 289   }
 290   &.centered {
 291     text-align: center;
 292   }
 293 }
 294
 295 .video-wrapper {
 296   @include rounded();
 297   padding: 5px;
 298   background-color: #f5f5f5;
 299   text-align: center;
 300 }
 301 .schools {
 302   ul {
 303     @include group;
 304   }
 305   li {
 306     float: left;
 307     width: 25%;
 308     height: 100px;
 309   }
 310   em {
 311     margin: 0 auto;
 312   }
 313 }
 314
 315 /* 8.`sprites
 316 ============================================== */
 317
 318 .icon,
 319 .sprite,
 320 .sprite-school {
 321     text-indent : -9999px;
 322     line-height : 0;
 323     font-size   : 0;
 324     overflow    : hidden;
 325     display     : block;
 326 }
 327
 328 .sprite { background-image : url('../img/finalsclub-sprite-images.png'); }
 329 .icon { background-image   : url('../img/finalsclub-sprite-icons.png'); }
 330 .sprite-school { background-image : url("../img/finalsclub-sprite-schools.gif"); }
 331
 332 .brown {
 333   background-position: 0 0;
 334   width: 61px;
 335   height: 72px;
 336 }
 337 .columbia {
 338   background-position: -62px 0;
 339   width: 81px;
 340   height: 61px;
 341 }
 342 .cornell {
 343   background-position: -144px 0;
 344   width: 71px;
 345   height: 72px;
 346 }
 347 .dartmouth {
 348   background-position: -216px 0;
 349   width: 56px;
 350   height: 71px;
 351 }
 352 .shield {
 353   background-position: -273px 0;
 354   width: 59px;
 355   height: 60px;
 356 }
 357 .mit {
 358   background-position: -333px 0;
 359   width: 79px;
 360   height: 41px;
 361 }
 362 .lock_haven {
 363   background-position: -413px 0;
 364   width: 61px;
 365   height: 68px;
 366 }
 367 .cal {
 368   background-position: -475px 0;
 369   width: 91px;
 370   height: 72px;
 371 }
 372 .texas {
 373   background-position: -567px 0;
 374   width: 54px;
 375   height:68px;
 376 }
 377 .yale {
 378   background-position: -622px 0;
 379   width: 51px;
 380   height: 50px;
 381 }
 382 .penn {
 383   background-position: -674px 0;
 384   width: 115px;
 385   height:65px;
 386 }
 387 .harvard {
 388   background-position: -790px 0;
 389   width: 67px;
 390   height: 65px;
 391 }
 392 /* media queries */
 393
 394 @import "includes/media.scss";
 395
 396 /* *.`user defined
 397 ============================================== */
 398
 399 .right { float: right !important;}
 400 .no-top-margin { margin-top: 0; }
 401 .spacer {
 402   padding-top: 16px;
 403   padding-bottom: 32px;
 404 }
 405 .yellow { color: $gold; }
 406 .half-width { width: 50%; }
 407 .centered { text-align: center;}
 408 .centered-rt-parent { margin: 0 auto;}