mockups/content/css/mockups.css

   1 body {
   2   background-color: white;
   3   color: black;
   4   font-family: Arial, sans-serif;
   5   font-size: small;
   6   margin: 8px;
   7   margin-top: 3px;
   8 }
   9
  10 img {
  11   border: 0;
  12 }
  13
  14 table {
  15   border-collapse: collapse;
  16 }
  17
  18 th, td {
  19   padding: 0;
  20   vertical-align: top;
  21   text-align: left;
  22 }
  23
  24 a:link {
  25   color: #0000cc;
  26 }
  27
  28 a:active {
  29   color: #cc0000;
  30 }
  31
  32 a:visited {
  33   color: #551a8b;
  34 }
  35
  36 h1 {
  37   font-size: x-large;
  38   margin-top: 0px;
  39 }
  40
  41 h2 {
  42   font-size: large;
  43 }
  44
  45 h3 {
  46   font-size: medium;
  47 }
  48
  49 h4 {
  50   font-size: small;
  51 }
  52
  53 form {
  54   margin: 0;
  55   padding: 0;
  56 }
  57
  58 li {
  59   margin-bottom: 0.25em;
  60 }
  61
  62 pre, code {
  63   color: #007000;
  64   font-family: "bogus font here", monospace;
  65   font-size: 100%;
  66 }
  67
  68 pre {
  69   border: 1px solid silver;
  70   background-color: #f5f5f5;
  71   padding: 0.5em;
  72   overflow: auto;
  73   margin: 2em;
  74 }
  75
  76 pre ins {
  77   color: #cc0000;
  78   font-weight: bold;
  79   text-decoration: none;
  80 }
  81
  82 .newmark {
  83   color: red;
  84   font-size: 80%;
  85   vertical-align: top;
  86 }
  87
  88 a.selected, .selected a, .selected {
  89   color: black;
  90   font-weight: bold;
  91   text-decoration: none;
  92 }
  93
  94 a.selected:visited, .selected a:visited {
  95   color: black;
  96 }
  97
  98 #login {
  99   text-align: right;
 100 }
 101
 102 #header {
 103   height: 50px;
 104   margin-bottom: 11px;
 105   position: relative;
 106 }
 107
 108 #logo {
 109   padding-right: 18px;
 110   position: absolute;
 111   left: 0;
 112   top: -5px;
 113 }
 114
 115 #logo img {
 116   width: 143px;
 117   height: 59px;
 118 }
 119
 120 #title {
 121   border-top: 1px solid #3366cc;
 122   background-color: #e5ecf9;
 123   font-size: large;
 124   font-weight: bold;
 125   margin: 0;
 126   padding: 0;
 127   padding-top: 1px;
 128   padding-bottom: 1px;
 129   margin-top: 5px;
 130 }
 131
 132 #title, #breadcrumbs {
 133   margin-left: 200px;
 134   padding-left: 3px;
 135 }
 136
 137 #breadcrumbs {
 138   margin-top: 3px;
 139 }
 140
 141 #side {
 142   width: 200px;
 143   margin-bottom: 3em;
 144   float: left;
 145 }
 146
 147 #menu ul {
 148   margin: 0;
 149   padding: 0;
 150   list-style-type: none;
 151   margin-bottom: 1em;
 152   font-size: 95%;
 153 }
 154
 155 #menu ul ul {
 156   margin-left: 10px;
 157   margin-bottom: 0;
 158 }
 159
 160 #menu li {
 161   margin-top: 4px;
 162 }
 163
 164 #menu h4 {
 165   margin: 0;
 166   padding: 0;
 167   margin-bottom: 1em;
 168 }
 169
 170 #badge {
 171   clear: both;
 172   margin-top: 3.5em;
 173   margin-bottom: 1em;
 174   height: 53px;
 175   font-style: italic;
 176 }
 177
 178 #search {
 179   margin-top: 2em;
 180 }
 181
 182 #search .header {
 183   font-weight: bold;
 184   font-size: 90%;
 185   margin-bottom: 1px;
 186 }
 187
 188 #search .button {
 189   margin-top: 1px;
 190 }
 191
 192 #search .input input {
 193   width: 125px;
 194 }
 195
 196 #body {
 197   border-left: 1px dotted silver;
 198   margin-left: 200px;
 199   margin-right: 25px;
 200   padding-left: 18px;
 201   padding-bottom: 25px;
 202 }
 203
 204 #footer {
 205   clear: both;
 206   text-align: center;
 207   margin-top: 3.5em;
 208   margin-bottom: 1em;
 209   background-image: url("http://www.google.com/images/art.gif");
 210   height: 53px;
 211   background-repeat: no-repeat;
 212   background-position: left center;
 213 }
 214
 215 #footer .text {
 216   padding-top: 20px;
 217 }
 218
 219 div.download {
 220   padding-top: 0.5em;
 221   padding-bottom: 0.5em;
 222 }
 223
 224 div.download a {
 225   border: 1px solid #3366cc;
 226   background-color: #e5ecf9;
 227   padding: 0.5em;
 228   position: relative;
 229   font-weight: bold;
 230 }
 231
 232 .termsagree {
 233   margin-top: 1em;
 234   margin-bottom: 1em;
 235   background-color: #e5ecf9;
 236   padding: 0.5em;
 237 }
 238
 239 .termsagree .button {
 240   padding-top: 0.5em;
 241 }
 242
 243 .termsagree .text {
 244   font-weight: bold;
 245 }
 246
 247 .termsagree .text .printable {
 248   font-weight: normal;
 249 }
 250
 251 .termsagree .text, .termsagree .button {
 252   padding-left: 5px;
 253 }
 254
 255 @media print {
 256   .noprint {
 257     display: none;
 258   }
 259
 260   #header, #side, #login {
 261     display: none;
 262   }
 263
 264   #body {
 265     margin: 0;
 266     border: 0;
 267     padding: 0;
 268   }
 269 }
 270
 271 table.programorgs {
 272   text-align: left;
 273   width: 100%;
 274   border-color: #e5ecf9;
 275   border-width: 5px;
 276   border-left-style: solid;
 277   border-right-style: solid;
 278   border-bottom-style: solid;
 279 }
 280
 281 table.programorgs td {
 282   padding-left: 5px;
 283 }
 284
 285 table.programorgs td.triangle {
 286   width: 10px;
 287 }
 288
 289 table.programorgs td.letter {
 290   width: 1em;
 291 }
 292
 293 table.tabletabs {
 294   width: 100%;
 295 }
 296
 297 table.tabletabs td {
 298   text-align: center;
 299 }
 300
 301 table.tabletabs td.notab {
 302   border-bottom-width: 5px;
 303   border-bottom-style: solid;
 304   border-bottom-color: #e5ecf9;
 305   border-right-style: hidden;
 306 }
 307
 308 table.tabletabs td.tab {
 309   border-bottom: 5px solid #e5ecf9;
 310   border-top: 2px solid #e5ecf9;
 311   border-right: 2px solid #e5ecf9;
 312   border-left: 2px solid #e5ecf9;
 313 }
 314
 315 table.tabletabs td.selectedtab {
 316   border: 5px #e5ecf9;
 317   border-style: solid solid hidden solid;
 318   font-weight: bold;
 319 }
 320
 321 table.profile {
 322   text-align: left;
 323   width: 100%;
 324   border-width: 0px 0px 0px 0px;
 325   border-spacing: 2px;
 326   border-style: hidden hidden hidden hidden;
 327   border-collapse: separate;
 328 }
 329
 330 table.profile td {
 331   padding-left: 5px;
 332 }
 333
 334 table.profile td.explain {
 335   padding-left: 5px;
 336   font-size: 75%;
 337   vertical-align: top;
 338 }
 339
 340 table.profile td.submit {
 341   text-align: center;
 342 }
 343
 344 table.profile th {
 345   padding-top: 5px;
 346   text-align: left;
 347   font-weight: bold;
 348   font-style: italic;
 349 }
 350
 351 table.user_roles {
 352   text-align: left;
 353   width: 100%;
 354   border-width: 0px 0px 0px 0px;
 355   border-spacing: 2px;
 356   border-style: hidden hidden hidden hidden;
 357   border-collapse: separate;
 358 }
 359
 360 table.user_roles td {
 361   border-width: 0px 0px 0px 0px;
 362   padding: 2px 2px 2px 2px;
 363   border-style: hidden hidden hidden hidden;
 364   -moz-border-radius: 0px 0px 0px 0px;
 365   font-family: sans-serif;
 366   text-align: left;
 367 }
 368
 369 table.user_roles td.program_last {
 370   border-width: 0px 0px 1px 0px;
 371   padding: 2px 2px 2px 2px;
 372   border-style: hidden hidden solid hidden;
 373   -moz-border-radius: 0px 0px 0px 0px;
 374   font-family: sans-serif;
 375   text-align: left;
 376 }
 377
 378 table.user_roles td.org_last {
 379   border-width: 0px 0px 1px 0px;
 380   padding: 2px 2px 2px 2px;
 381   border-style: hidden hidden dotted hidden;
 382   -moz-border-radius: 0px 0px 0px 0px;
 383   font-family: sans-serif;
 384   text-align: left;
 385 }
 386
 387 td.h1 {
 388   text-align: left;
 389   font-family: sans-serif;
 390   font-weight: bold;
 391 }
 392
 393 td.h2 {
 394   text-align: center;
 395   font-family: sans-serif;
 396   font-style: italic;
 397   font-weight: bold;
 398   border-bottom-width: 1px;
 399   border-style: none none solid none;
 400   background: #c3d9ff;
 401 }
 402
 403 td.program {
 404 }
 405
 406 td.org {
 407 }
 408
 409 td.role {
 410 }
 411
 412 td.error {
 413   color: #cc0000;
 414   border-style: solid;
 415   border-color: red;
 416   font-size: 80%;
 417 }
 418
 419 td.error_outline {
 420   color: #cc0000;
 421   border-style: solid;
 422   border-color: red;
 423 }
 424
 425 th.error {
 426   color: #cc0000;
 427 }
 428
 429 table.input {
 430   font-size: 100%;
 431   background: #c3d9ff;
 432   -moz-border-radius-topleft: 4px; -moz-border-radius-topright: 4px;
 433   -moz-border-radius-bottomright: 4px; -moz-border-radius-bottomleft: 4px;
 434 }
 435
 436 table.input td {
 437   background: #c3d9ff;
 438   padding-left: 5px;
 439 }
 440
 441 table.input td.help {
 442   background: #c3d9ff;
 443   padding-left: 5px;
 444   font-size: 75%;
 445 }
 446
 447 td.explain {
 448   width: 200px;
 449   /*color: #676767; */
 450   vertical-align: top;
 451 }
 452
 453 table.input th {
 454   padding-top: 5px;
 455   text-align: left;
 456   font-size: 120%;
 457 }
 458
 459 .important {
 460   color:#cc0000;
 461   font-style:italic;
 462 }
 463
 464 .important a {
 465   color:#cc0000;
 466 }
 467
 468 .statusmsg {
 469   font-style:italic;
 470   font-size:x-small;
 471 }
 472
 473 #panel {
 474   margin-top: 4ex;
 475 }
 476
 477 #panel input {
 478   width: 150px;
 479   margin-bottom: 4px;
 480 }
 481
 482 table.mentororg {
 483   width: 100%;
 484 }
 485
 486 td.mentororg {
 487   background:#bbcced ;
 488   padding: 5px;
 489 }
 490
 491 td.mentororg a {
 492   color: #aa0033;
 493 }
 494
 495 td.mentorapp {
 496   padding-left: 20px;
 497   background: #e8e8e8;
 498 }
 499
 500 span.would {
 501   background-color: yellow;
 502 }
 503
 504 span.interested {
 505   background-color: green;
 506 }
 507
 508 span.indifferent {
 509   background-color: blue;
 510 }
 511
 512 span.disagree {
 513   background-color: red;
 514 }
 515
 516 table.applist  {
 517   background: #C3D9FF;
 518   border-spacing: 0px;
 519   -moz-border-radius-topleft: 4px;
 520   -moz-border-radius-topright: 4px;
 521   -moz-border-radius-bottomright: 4px;
 522   -moz-border-radius-bottomleft: 4px;
 523 }
 524
 525 table.applist td, th {
 526   padding-left: 5px;
 527   padding-right: 5px;
 528 }
 529
 530 tr.listapp {
 531   background: #E8EEF7;
 532 }
 533
 534 tr.listrequestapp {
 535   background: #c2bddd;
 536 }
 537
 538 tr.listapp:hover {
 539   background: #ffeac0;
 540   cursor: pointer;
 541 }
 542
 543 tr.listrequestapp:hover {
 544   background: #ffeac0;
 545   cursor: pointer;
 546 }
 547
 548 tr.lastacceptlistapp {
 549   text-align: center;
 550 }
 551
 552 table.mentors {
 553   width: 100%;
 554   border-spacing: 0px;
 555   background: #C3D9FF;
 556   -moz-border-radius-topleft: 4px;
 557   -moz-border-radius-topright: 4px;
 558   -moz-border-radius-bottomright: 4px;
 559   -moz-border-radius-bottomleft: 4px;
 560 }
 561
 562 td.orgapp {
 563   padding-left: 20px;
 564   background: #e8eef7;
 565 }
 566
 567 th.orgapp {
 568   text-align: left;
 569   padding-left: 10px;
 570   background: #e8eef7;
 571   font-size: 80%;
 572   font-weight: normal;
 573 }
 574
 575 table.apptable {
 576   background: #c3d9ff;
 577   -moz-border-radius-topleft: 4px; -moz-border-radius-topright: 4px;
 578   -moz-border-radius-bottomright: 4px; -moz-border-radius-bottomleft: 4px;
 579   width: 100%;
 580   border-spacing: 0px;
 581 }
 582
 583 table.apptable td {
 584   background: none;
 585 }
 586
 587 table.apptable a {
 588   color: #3366cc;
 589 }
 590
 591 td.newapp a {
 592   color: #008000;
 593 }
 594
 595 tr.appodd {
 596 }
 597
 598 tr.appeven {
 599   background: #e5ecf9;
 600 }
 601
 602 td.time {
 603   font-size: 60%;
 604 }
 605
 606 pre {
 607   overflow: auto;
 608 }
 609
 610 h2 {
 611   font-size: large;
 612 }
 613
 614 div.extern_app {
 615   background: #bbcced;
 616   margin: 10px;
 617   padding: 2px;
 618 }
 619
 620 td.extern_app {
 621   vertical-align:top;
 622 }
 623
 624 div.extern_orginfo {
 625   width: 200px;
 626   border-style: solid;
 627   border-color: #3399cc;
 628   padding: 10px;
 629 }
 630
 631 td.extern_orginfo {
 632   vertical-align:top;
 633 }
 634
 635 table.organizations td {
 636   padding-right: 25px;
 637   vertical-align: top;
 638 }
 639
 640 div.sidebar a {
 641   color: #3366cc;
 642 }
 643
 644 div.sidebar {
 645   padding: 1px;
 646 }
 647
 648 div.sidebarselect {
 649   padding: 3px;
 650   background: #C3D9FF;
 651   -moz-border-radius-topleft: 4px;
 652   -moz-border-radius-bottomleft: 4px;
 653 }
 654
 655 div.sidebarselect a {
 656   color: #3366cc;
 657 }
 658
 659 td.frameleft {
 660   padding: 3px;
 661   background: #C3D9FF;
 662   -moz-border-radius-topleft: 4px;
 663   -moz-border-radius-bottomleft: 4px;
 664 }
 665
 666 td.frameright {
 667   padding: 3px;
 668   background: #C3D9FF;
 669   -moz-border-radius-topright: 4px;
 670   -moz-border-radius-bottomright: 4px;
 671 }
 672
 673 div.frametop {
 674   padding: 3px;
 675   background: #C3D9FF;
 676   width: 100%;
 677 }
 678
 679 div.info {
 680   background: #FFcc33;
 681   text-align: center;
 682   width: 100%;
 683 }
 684
 685 div.orgabout {
 686   padding: 5px
 687 }
 688
 689 div.orgaboutdescript {
 690   padding: 5px
 691 }
 692
 693 div.question {
 694   padding: 10px;
 695   font-size: 120%;
 696   font-weight: bold;
 697 }
 698
 699 div.section {
 700   padding: 10px;
 701   font-size: 130%;
 702   font-weight: bold;
 703   text-align: center;
 704 }
 705
 706 div.sectionlist {
 707   padding: 10px;
 708   font-size: 120%;
 709   font-weight: bold;
 710 }
 711
 712 div.app_text {
 713   background-color: #ffffff;
 714   padding-left: 5px;
 715   font-family: Fixed,monospace;
 716   -moz-border-radius-topleft: 6px;
 717   -moz-border-radius-topright: 6px;
 718   -moz-border-radius-bottomright: 6px;
 719   -moz-border-radius-bottomleft: 6px;
 720 }
 721
 722 div.comment_group {
 723   width: 100%;
 724   margin-bottom: 5px;
 725 }
 726
 727 div.comment {
 728   background-color: #e8e8e8;
 729   margin: 5px;
 730   padding: 2px;
 731 }
 732
 733 div.comment_time {
 734   width: auto;
 735   background: #C3D9FF;
 736   padding: 2px;
 737 }
 738
 739 div.comment_text {
 740   margin-top: 2px;
 741 }
 742
 743 h2.infosection {
 744   border-bottom: 1px solid black;
 745 }
 746
 747 td.navanchor {
 748   text-align: right;
 749   font-size: x-small;
 750 }
 751
 752 .tB {
 753   padding: 3px;
 754   border: 1px solid #ffdea0;
 755   background-color: #fff8dc;
 756   margin-bottom:0.5em;
 757   margin-top:1em;
 758   font-weight:bold;
 759 }
 760
 761 .tB td{
 762   background-color:#fff8dc;
 763 }
 764
 765 .tB a {
 766   font-weight:normal;
 767   font-size:x-small;
 768 }
 769
 770 .tBRed {
 771   padding: 3px;
 772   border: 1px solid #cdc9c9;
 773   background-color: #ffe5e5;
 774   margin-bottom:0.5em;
 775   margin-top:1em;
 776   font-weight:bold;
 777 }
 778
 779 table.tB2 {
 780   border: 1px solid #ffdea0;
 781   border-spacing: 0px;
 782   -moz-border-radius-topleft: 4px;
 783   -moz-border-radius-topright: 4px;
 784   -moz-border-radius-bottomright: 4px;
 785   -moz-border-radius-bottomleft: 4px;
 786 }
 787
 788 table.tB2 th{
 789   background-color: #e5ecf9;
 790   border-top: 1px solid #ffdea0;
 791   border-bottom: 1px solid #ffdea0;
 792   padding: 1px
 793 }
 794
 795 table.tB2 td {
 796   padding-left: 5px;
 797   padding-right: 5px;
 798 }
 799
 800 .tBRed td {
 801   background-color:#ffe5e5;
 802 }
 803
 804 .tBRed a {
 805   font-weight: normal;
 806   font-size: x-small;
 807 }
 808
 809 .ftl {
 810   font-weight: bold;
 811 }
 812
 813 dt {
 814   font-weight: bold;
 815 }
 816
 817 dd {
 818   margin:0em 0em 1em 1em;
 819 }
 820
 821 ul {
 822   margin-top: 0;
 823 }
 824
 825 .colorswatch {
 826   height: 18px;
 827   width: 20px;
 828 }
 829
 830 .colorhover {
 831   border: 1px solid blue;
 832   cursor: pointer;
 833   background: #fff;
 834 }
 835
 836 .colorchooser {
 837   position: absolute;
 838   display:none; z-index:999;
 839 }
 840
 841 .mono {
 842   font-family: "Courier New", Courier, monospace;
 843 }
 844
 845 table.palette {
 846   font-size: 5px;
 847   border: 1px solid #999;
 848   border-collapse: collapse;
 849 }
 850
 851 table.palette td a {
 852   display: block;
 853   text-decoration: none;
 854 }
 855
 856 table.palette td a div {
 857   width: 20px;
 858   height: 20px;
 859 }
 860
 861 table.palette a {
 862   border: 1px solid #ccc;
 863   padding: 1px;
 864 }
 865
 866 table.palette a:hover {
 867   border: 1px solid red;
 868   cursor: pointer;
 869 }
 870
 871 span.selectedresponse {
 872   font-weight: bold;
 873   border-bottom: 1px solid #ffdea0;
 874   border-right: 1px solid #ffdea0;
 875   background-color: #fff8dc;
 876 }
 877
 878 .popup {
 879   cursor: help;
 880   text-decoration: none;
 881 }
 882
 883 .blog {
 884   border: 10px solid #e5ecf9;
 885   border-top: 1px solid #3366cc;
 886 }
 887
 888 .blog h2 {
 889   margin-top: 0.1em;
 890   background-color: #e5ecf9;
 891 }
 892
 893 .blog h2 a, .blog h2 a:visited {
 894   text-decoration: none;
 895   color: black;
 896 }
 897
 898 .blog .entry {
 899   margin-bottom: 1em;
 900 }
 901
 902 .blog .title {
 903    font-size: medium;
 904 }
 905
 906 .blog .author {
 907   color: gray;
 908   margin-bottom: 0.5em;
 909 }
 910
 911 .blog .snippet {
 912   background-color: white;
 913 }
 914
 915 .todo {
 916   color: #cc0000;
 917   font-size: 80%;
 918 }
 919