karmaworld/assets/css/global.css

   1 /* GLOBAL */
   2
   3 body
   4 {
   5   font-family: "MuseoSlab-700";
   6 }
   7
   8 .half-padding
   9 {
  10   padding-left: 5px;
  11   padding-right: 5px;
  12 }
  13
  14 .no-padding
  15 {
  16   padding-left: 0px;
  17   padding-right: 0px;
  18 }
  19
  20 /* GLOBAL HEADER */
  21
  22 header#global_header
  23 {
  24   background-color: #45484c;
  25   background-image: -webkit-gradient(linear, left top, left bottom, from(#45484c), to(#000000)); /* Safari 4+, Chrome */
  26   background-image: -webkit-linear-gradient(top, #45484c, #000000); /* Chrome 10+, Safari 5.1+, iOS 5+ */
  27   background-image:    -moz-linear-gradient(top, #45484c, #000000); /* Firefox 3.6-15 */
  28   background-image:      -o-linear-gradient(top, #45484c, #000000); /* Opera 11.10-12.00 */
  29   background-image:         linear-gradient(to bottom, #45484c, #000000); /* Firefox 16+, IE10, Opera 12.50+ */
  30   height: 46px;
  31   width: 100%;
  32   position: fixed;
  33   z-index: 100;
  34 }
  35
  36 #logo_container
  37 {
  38   padding-top: 4px;
  39 }
  40
  41 #logo_container img
  42 {
  43   margin-top: 10px;
  44 }
  45
  46 #browse_container
  47 {
  48   padding-top: 19px;
  49   font-family: "MuseoSlab-700";
  50   font-size: 13px;
  51   color: #FFF;
  52 }
  53
  54 #search_container
  55 {
  56   margin-top: 7px;
  57   background: url(../img/global_header_search.png);
  58   width: 227px;
  59   height: 25px;
  60 }
  61
  62 #search_txt
  63 {
  64   width: 200px;
  65   height: 25px;
  66   font-size: 12px;
  67   background: none;
  68   border: none;
  69   margin-left: 27px;
  70   margin-top: 5px;
  71 }
  72
  73 #login_container
  74 {
  75   color: #FFF;
  76   padding-top: 18px;
  77   font-size: 12px;
  78   cursor: pointer;
  79   padding-bottom: 16px;
  80 }
  81
  82 #login_container.clicked
  83 {
  84   background-color: black;
  85   color: #f05a28;
  86 }
  87
  88 #login_box
  89 {
  90   margin-top: 15px;
  91   cursor: default;
  92 }
  93
  94 #login_fb
  95 {
  96   background: url(../img/global_header_login_fbbg.png);
  97   cursor: pointer;
  98   padding-top: 5px;
  99 }
 100
 101 #login_form
 102 {
 103   background: url(../img/global_header_login_formbg.png);
 104 }
 105
 106 #login_form input
 107 {
 108   height: 34px;
 109   font-size: 20px;
 110   margin-top: 15px;
 111 }
 112
 113 #login_form .columns
 114 {
 115   font-size: 14px;
 116 }
 117
 118 #login_submit, #login_signup
 119 {
 120   background-color: #f05a28;
 121   padding-top: 10px;
 122   padding-bottom: 10px;
 123   cursor: pointer;
 124 }
 125
 126 #login_submit .columns, #login_signup .columns
 127 {
 128   font-size: 14px;
 129   text-align: center;
 130 }
 131
 132 /* LOGGED IN */
 133
 134 #global_header_logged_in_content
 135 {
 136   width: 320px;
 137 }
 138
 139 #global_header_addnote
 140 {
 141   text-align: right;
 142 }
 143
 144 #global_header_mycourses
 145 {
 146   padding-top: 15px;
 147   cursor: pointer;
 148   padding-bottom: 16px;
 149 }
 150
 151 #global_header_mycourses_copy
 152 {
 153   font-size: 15px;
 154   color: #fff;
 155 }
 156
 157 #global_header_mycourses_copy.clicked
 158 {
 159   background-color: black;
 160   color: #f05a28;
 161 }
 162
 163 #global_header_mycourses_list
 164 {
 165   margin-top: 16px;
 166   width: 223px;
 167   background: url(../img/home_video_screen_60opacity.png);
 168 }
 169
 170 #global_header_mycourses_list ul
 171 {
 172   margin: 0px;
 173 }
 174
 175 #global_header_mycourses_list li
 176 {
 177   padding-top: 16px;
 178   padding-bottom: 14px;
 179   border-bottom: 1px solid #fff;
 180   color: #fff;
 181   list-style: none;
 182   font-family: "MuseoSlab-500";
 183   font-size: 17px;
 184 }
 185
 186 #global_header_mycourses_list li:last-child
 187 {
 188   border: none;
 189 }
 190
 191 #global_header_add_course
 192 {
 193   background-color: #f05a28;
 194   width: 223px;
 195   padding-top: 10px;
 196   padding-bottom: 10px;
 197   padding-left: 10px;
 198 }
 199
 200 #global_header_avatar_menu
 201 {
 202   cursor: pointer;
 203   height: 33px;
 204   width: 82px;
 205   margin-top: 6px;
 206 }
 207
 208 #global_header_avatar_container
 209 {
 210   height: 33px!important;
 211   width: 31px!important;
 212   overflow: hidden;
 213 }
 214
 215 #global_header_note_count
 216 {
 217   color: #FFF;
 218   background-color: #f05a28;
 219   font-size: 12px;
 220   height: 33px;
 221   padding: 12px 0px;
 222   text-align: center;
 223 }
 224
 225 #global_header_arrow_container
 226 {
 227   width: 9px!important;
 228 }
 229
 230 #global_header_arrow_container img
 231 {
 232   padding-bottom: 6px;
 233 }
 234
 235 #global_header_avatar_moreinfo_content
 236 {
 237   background: url(../img/home_video_screen_60opacity.png);
 238 }
 239
 240 #global_header_avatar_moreinfo
 241 {
 242   width: 203px;
 243 }
 244
 245 #global_header_avatar_moreinfo_name a, #global_header_avatar_moreinfo_mynotes a
 246 {
 247   padding-top: 20px;
 248   font-size: 17px;
 249   font-family: "MuseoSlab-500";
 250   color: #FFF;
 251 }
 252
 253 #global_header_avatar_moreinfo_school a
 254 {
 255   padding-top: 5px;
 256   padding-bottom: 20px;
 257   font-size: 12px;
 258   font-family: "MuseoSans-700";
 259   color: #FFF;
 260   text-transform: uppercase;
 261 }
 262
 263 #global_header_avatar_moreinfo_gear
 264 {
 265   padding-top: 16px;
 266   text-align: left;
 267 }
 268
 269 #global_header_avatar_moreinfo_mynotes
 270 {
 271   background-color: #f05a28;
 272   padding-bottom: 3px;
 273 }
 274
 275 /* INTERFACE ELEMENTS */
 276
 277 .hero_gradient_bar
 278 {
 279   background-color: #ffffff;
 280   background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#e8e8e8)); /* Safari 4+, Chrome */
 281   background-image: -webkit-linear-gradient(top, #ffffff, #e8e8e8); /* Chrome 10+, Safari 5.1+, iOS 5+ */
 282   background-image:    -moz-linear-gradient(top, #ffffff, #e8e8e8); /* Firefox 3.6-15 */
 283   background-image:      -o-linear-gradient(top, #ffffff, #e8e8e8); /* Opera 11.10-12.00 */
 284   background-image:         linear-gradient(to bottom, #ffffff, #e8e8e8); /* Firefox 16+, IE10, Opera 12.50+ */
 285   border-bottom: solid 1px #bdbcbd;
 286   -webkit-box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, .35); /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
 287           box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, .35); /* Opera 10.5, IE9+, Firefox 4+, Chrome 6+, iOS 5 */
 288   width: 100%;
 289 }
 290
 291 .button_bevel
 292 {
 293   -webkit-border-radius: 10px; /* Safari 3-4, iOS 1-3.2, Android ≤1.6 */
 294           border-radius: 10px; /* Opera 10.5, IE9+, Safari 5, Chrome, Firefox 4+, iOS 4, Android 2.1+ */
 295
 296   /* useful if you don't want a bg color from leaking outside the border: */
 297   -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;
 298   background-color: #eff0ef;
 299   background-image: -webkit-gradient(linear, left top, left bottom, from(#eff0ef), to(#a4a5a5)); /* Safari 4+, Chrome */
 300   background-image: -webkit-linear-gradient(top, #eff0ef, #a4a5a5); /* Chrome 10+, Safari 5.1+, iOS 5+ */
 301   background-image:    -moz-linear-gradient(top, #eff0ef, #a4a5a5); /* Firefox 3.6-15 */
 302   background-image:      -o-linear-gradient(top, #eff0ef, #a4a5a5); /* Opera 11.10-12.00 */
 303   background-image:         linear-gradient(to bottom, #eff0ef, #a4a5a5); /* Firefox 16+, IE10, Opera 12.50+ */
 304   border: solid 1px #eff0ef;
 305   cursor: pointer;
 306 }
 307
 308 .button_interior
 309 {
 310   -webkit-border-radius: 8px; /* Safari 3-4, iOS 1-3.2, Android ≤1.6 */
 311           border-radius: 8px; /* Opera 10.5, IE9+, Safari 5, Chrome, Firefox 4+, iOS 4, Android 2.1+ */
 312
 313   /* useful if you don't want a bg color from leaking outside the border: */
 314   -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;
 315   background-color: #f05a28;
 316   background-image: -webkit-gradient(linear, left top, left bottom, from(#f05a28), to(#c73e11)); /* Safari 4+, Chrome */
 317   background-image: -webkit-linear-gradient(top, #f05a28, #c73e11); /* Chrome 10+, Safari 5.1+, iOS 5+ */
 318   background-image:    -moz-linear-gradient(top, #f05a28, #c73e11); /* Firefox 3.6-15 */
 319   background-image:      -o-linear-gradient(top, #f05a28, #c73e11); /* Opera 11.10-12.00 */
 320   background-image:         linear-gradient(to bottom, #f05a28, #c73e11); /* Firefox 16+, IE10, Opera 12.50+ */
 321 }
 322
 323 .inverted_button
 324 {
 325   -webkit-border-radius: 8px; /* Safari 3-4, iOS 1-3.2, Android ≤1.6 */
 326           border-radius: 8px; /* Opera 10.5, IE9+, Safari 5, Chrome, Firefox 4+, iOS 4, Android 2.1+ */
 327
 328   /* useful if you don't want a bg color from leaking outside the border: */
 329   -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;
 330   background-color: #ebebeb;
 331   background-image: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#cfcfcf)); /* Safari 4+, Chrome */
 332   background-image: -webkit-linear-gradient(top, #ebebeb, #cfcfcf); /* Chrome 10+, Safari 5.1+, iOS 5+ */
 333   background-image:    -moz-linear-gradient(top, #ebebeb, #cfcfcf); /* Firefox 3.6-15 */
 334   background-image:      -o-linear-gradient(top, #ebebeb, #cfcfcf); /* Opera 11.10-12.00 */
 335   background-image:         linear-gradient(to bottom, #ebebeb, #cfcfcf); /* Firefox 16+, IE10, Opera 12.50+ */
 336   border-top: solid 1px #fefefe;
 337   color: #f05a28;
 338   font-family: "MuseoSlab-700";
 339   font-size: 16px;
 340   text-align: center;
 341   padding: 10px 19px;
 342   cursor: pointer;
 343 }
 344
 345 .button_arrow
 346 {
 347   padding-bottom: 2px;
 348 }
 349
 350 .column_header
 351 {
 352   font-family: "MuseoSlab-900";
 353   font-size: 10px;
 354   color: #8e8e8e;
 355   border-bottom: 1px solid #8e8e8e;
 356   text-transform: uppercase;
 357   margin-bottom: 20px;
 358   padding-left: 0px;
 359 }
 360
 361 /* GLOBAL ACTIVITY ITEMS */
 362 a.course_link, a.course_link:hover, a.school_link, a.school_link:hover, a.prof_link, a.prof_link:hover
 363 {
 364   text-decoration: underline;
 365   color: #555555;
 366 }
 367
 368 .activity_timestamp
 369 {
 370   font-family: "MuseoSlab-500";
 371   font-size: 10px;
 372   text-transform: uppercase;
 373   padding: 5px 0;
 374 }
 375
 376 .row_alt_on
 377 {
 378   background: url(../img/dashboard_activity_alt_on_bg.gif);
 379   padding: 5px 0;
 380 }
 381
 382 .activity_details_action, .activity_details_action a
 383 {
 384   font-family: "MuseoSlab-500";
 385   font-size: 20px;
 386   line-height: 125%;
 387 }
 388
 389 a.activity_actor, a.activity_actor:hover
 390 {
 391   color: #f1592a;
 392   text-decoration: underline;
 393 }
 394
 395 a.activity_target, a.activity_target:hover
 396 {
 397   color: #9ccf00;
 398   text-decoration: underline;
 399 }
 400
 401 .activity_details_context, .activity_details_context a
 402 {
 403   font-family: "MuseoSlab-900";
 404   font-size: 11px;
 405   text-transform: uppercase;
 406   line-height: 200%;
 407 }
 408
 409 .activity_details_callout
 410 {
 411   padding: 20px 25px;
 412   margin: 15px 0 13px;
 413   background-color: #c8cdb8;
 414 }
 415
 416 .activity_details_callout_copy
 417 {
 418   font-family: "MuseoSans-900";
 419   font-size: 12px;
 420   color: #3a3a3a;
 421   line-height: 125%;
 422 }
 423
 424 .activity_details_status
 425 {
 426   font-size: 13px;
 427   font-family: "MuseoSans-500";
 428   color: #232323;
 429 }
 430
 431 .activity_details_status_number
 432 {
 433   color: #f1592a;
 434   font-family: "MuseoSans-900";
 435 }
 436
 437 .activity_details_status_secondary_number
 438 {
 439   font-family: "MuseoSlab-900";
 440 }
 441
 442 .course_meta_action
 443 {
 444   height: 36px;
 445   width: 39px;
 446   font-family: "MuseoSlab-900";
 447   font-size: 9px;
 448   color: #FFF;
 449   text-align: center;
 450   padding-top: 13px;
 451   margin-top: 20px; /* POSITION WITH JAVASCRIPT */
 452 }
 453
 454 .course_meta_join
 455 {
 456   background: url(../img/course_meta_join_bg.png) no-repeat;
 457   text-transform: uppercase;
 458 }
 459
 460 .course_meta_drop
 461 {
 462   background: url(../img/course_meta_drop_bg.png) no-repeat;
 463   text-transform: uppercase;
 464 }
 465
 466 #upload_button_container
 467 {
 468   height: 70px;
 469   margin: 10px 0px;
 470 }
 471
 472 #upload_button
 473 {
 474   height: 66px;
 475   margin: 1px;
 476   font-family: "MuseoSlab-900";
 477   font-size: 32px;
 478   text-align: center;
 479   padding-top: 20px;
 480 }
 481
 482 /* COPY */
 483
 484 .body_copy h1
 485 {
 486   font-family: "MuseoSlab-700";
 487   font-size: 15px;
 488   text-transform: uppercase;
 489   margin-top: 18px;
 490   margin-bottom: 10px;
 491 }
 492
 493 .body_copy p
 494 {
 495   font-family: "MuseoSlab-500";
 496   font-size: 15px;
 497   margin-top: 8px;
 498   margin-bottom: 8px;
 499 }
 500
 501 /* GLOBAL FOOTER */
 502
 503 footer#global_footer
 504 {
 505   width: 100%;
 506   height: 164px;
 507   color: #FFF;
 508   padding-top: 36px;
 509   background-color: #000;
 510 }
 511
 512 footer#global_footer a
 513 {
 514   color: #FFF;
 515 }
 516
 517 #footer_links_container
 518 {
 519   font-size: 13px;
 520   padding-bottom: 54px;
 521 }
 522
 523 #colophon
 524 {
 525   font-family: "MuseoSlab-500";
 526   font-size: 11px;
 527   line-height: 175%;
 528 }
 529
 530 #colophon a
 531 {
 532   color: #FFF;
 533   text-decoration: underline;
 534 }
 535
 536 #cc_logo
 537 {
 538   margin-right: 5px;
 539   margin-top: 3px;
 540 }
 541
 542 /* EDITS POST DESIGN */
 543 ul#course_menu li a
 544 {
 545   color: white;
 546 }
 547
 548 .subhead
 549 {
 550   color: #F05A28;
 551   font-family: "MuseoSlab-700";
 552   font-size: 38px;
 553 }
 554
 555 /* New course-list homepage css */
 556 #subhead
 557 {
 558   padding-top: 47px;
 559   text-align: center;
 560   font-family: "MuseoSlab-500";
 561   font-size: 24px;
 562 }
 563
 564 .center
 565 {
 566   text-align: center;
 567 }
 568
 569 #page_instruction
 570 {
 571   font-family: "MuseoSlab-700";
 572   font-size: 12px;
 573   padding-bottom: 14px
 574 }
 575
 576 table#course_list
 577 {
 578   margin:14px auto;
 579 }
 580
 581 table#course_list tr:nth-child(even)
 582 {
 583   background: url(../img/dashboard_activity_alt_on_bg.gif);
 584 }
 585
 586 table#course_list thead
 587 {
 588   border-bottom: solid 1px black;
 589 }
 590
 591 table#course_list th
 592 {
 593   font-family: "MuseoSlab-500";
 594   font-size: 12px;
 595 }
 596
 597 /* hack - table sorter moves the th into a div */
 598 table#course_list th div
 599 {
 600   font-family: "MuseoSlab-500";
 601   font-size: 12px;
 602 }
 603
 604 table#course_list td
 605 {
 606   font-family: "MuseoSlab-700";
 607   font-size: 12px;
 608 }
 609 /* end new course-list homepage css */
 610
 611 a.white
 612 {
 613   color: white;
 614 }
 615
 616 a.white:hover
 617 {
 618   color: #FFF;
 619   cursor: pointer;
 620   text-decoration: underline;
 621 }
 622
 623 /* post-designers css hacks */
 624 .button_disabled img
 625 {
 626   opacity: 0.4;
 627   filter: alpha(opacity=40); /* msie */
 628 }
 629
 630 .voted_message
 631 {
 632   cursor: pointer;
 633   font-size: 13px;
 634   font-family: "MuseoSans-500";
 635   color: #232323;
 636 }
 637
 638 .voted_message:hover
 639 {
 640   cursor: pointer;
 641   text-decoration: underline;
 642 }
 643
 644 /* new form submit */
 645 .submit_upload
 646 {
 647   background: none;
 648   border: none;
 649   color: white;
 650   cursor: pointer;
 651   font-family: "MuseoSlab-700";
 652   font-size: 32px;
 653 }
 654
 655 /* GAAAH, random body p copy should be readable text */
 656 p.text
 657 {
 658   font-family: "MuseoSlab-500";
 659   font-size: 17px;
 660   margin: 20px 0 0;
 661   line-height: 150%;
 662 }
 663 p.text a
 664 {
 665   color: #f05a28;
 666   text-decoration: underline;
 667 }
 668
 669 #thankyou
 670 {
 671   border: 1px solid #8e8e8e;
 672   margin: 60px 20px;
 673   padding: 20px;
 674 }
 675
 676 #thankyou p
 677 {
 678   font-family: "MuseoSlab-500";
 679   font-size: 17px;
 680   margin: 0px;
 681 }