app/soc/content/css/soc-090602.css

   1 /*
   2 Copyright 2009 the Melange authors.
   3
   4 Licensed under the Apache License, Version 2.0 (the "License");
   5 you may not use this file except in compliance with the License.
   6 You may obtain a copy of the License at
   7
   8   http://www.apache.org/licenses/LICENSE-2.0
   9
  10 Unless required by applicable law or agreed to in writing, software
  11 distributed under the License is distributed on an "AS IS" BASIS,
  12 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  13 See the License for the specific language governing permissions and
  14 limitations under the License.
  15  */
  16
  17 /*
  18  * STANDARD HTML TAGS
  19  */
  20
  21 body {
  22   background-color: white;
  23   color: black;
  24
  25   font-family: Arial, sans-serif;
  26   font-size: medium;
  27
  28   margin: 8px;
  29   margin-top: 3px;
  30 }
  31
  32 img {
  33   border: 0;
  34 }
  35
  36 form {
  37   margin: 0;
  38   padding: 0;
  39 }
  40
  41 li {
  42   margin-bottom: 0.25em;
  43 }
  44
  45 /* HEADERS */
  46 h1 {
  47   font-size: x-large;
  48   margin-top: 0px;
  49 }
  50
  51 h2 {
  52   font-size: large;
  53 }
  54
  55 h3 {
  56   font-size: medium;
  57 }
  58
  59 h4 {
  60   font-size: small;
  61 }
  62
  63 /* PRE-FORMATTED TEXT */
  64 pre, code {
  65   color: #007000;
  66   font-family: "bogus font here", monospace;
  67   font-size: 100%;
  68 }
  69
  70 pre {
  71   border: 1px solid silver;
  72   background-color: #f5f5f5;
  73   padding: 0.5em;
  74   overflow: auto;
  75   margin: 2em;
  76 }
  77
  78 pre ins {
  79   color: #cc0000;
  80   font-weight: bold;
  81   text-decoration: none;
  82 }
  83
  84 /* LINKS AND ANCHORS */
  85 a:link {
  86   color: #0000cc;
  87 }
  88
  89 a:active {
  90   color: #cc0000;
  91 }
  92
  93 a:visited {
  94   color: #551a8b;
  95 }
  96
  97 a.selected, .selected a, .selected {
  98   color: black;
  99   font-weight: bold;
 100   text-decoration: none;
 101 }
 102
 103 a.novisit {
 104   color: #2a55a3;
 105 }
 106
 107 a.noul, a.noulv {
 108   color: #4182fa; /* #93b7fa; */
 109   text-decoration: none;
 110 }
 111
 112 a:hover.noul {
 113   text-decoration: underline;
 114 }
 115
 116 a:visited.noul {
 117   color: #a32a91; /* #2a55a3; */
 118 }
 119
 120
 121 /* Styles used by Django Forms */
 122 ul.errorlist {
 123   color: #FF0000;
 124   font-size: small;
 125 }
 126
 127
 128 /* TABLES */
 129 table {
 130   border-collapse: collapse;
 131 }
 132
 133 th, td {
 134   /*padding: 0;*/
 135   padding:2px 5px;
 136   vertical-align: top;
 137   text-align: left;
 138 }
 139
 140 /* FORM FIELDS */
 141 td.formfieldrequired {
 142   font-style: italic;
 143   font-size: small;
 144   text-align: center;
 145 }
 146
 147 td.formfieldhelptext {
 148   font-style: italic;
 149   font-size: small;
 150   padding: 5px;
 151 }
 152
 153 td.formfielderror {
 154   color: #FF0000;
 155   font-size: small;
 156 }
 157
 158 td.formfieldheading {
 159   font-weight: bold;
 160   font-size: small;
 161 }
 162
 163 td.formfieldlabel {
 164   font-weight: bold;
 165   font-size: small;
 166   text-align: right;
 167 }
 168
 169 td.twolineformfieldlabel {
 170   font-weight: bold;
 171   font-size: small;
 172   text-align: left;
 173 }
 174
 175 td.twolineformfieldlabel {
 176   font-weight: bold;
 177   font-size: small;
 178 }
 179
 180 td.twolineformfielderrorlabel {
 181   font-weight: bold;
 182   color: #FF0000;
 183   font-size: small;
 184 }
 185
 186 td.formfieldvalue {
 187   text-align: left;
 188 }
 189
 190 td.formfieldvalue input {
 191   width: 100%;
 192 }
 193
 194 td.formfieldvalue input[type=checkbox] {
 195   width: auto;
 196 }
 197
 198 td.formfieldvalue input:focus {
 199   background-color: #FFFF99;
 200   font-weight: bold;
 201 }
 202
 203 td.formfieldvalue textarea {
 204   width: 100%;
 205 }
 206
 207 td.formfieldvalue select {
 208   width: 100%;
 209 }
 210
 211 td.formfielderrorlabel, td.warning, span.formfielderrorlabel {
 212   font-weight: bold;
 213   color: #FF0000;
 214   font-size: small;
 215   text-align: right;
 216 }
 217
 218 /* TABLE QUEUES (used with .list) */
 219 table#queues {
 220   border-collapse: collapse;
 221   width: 100%;
 222 }
 223
 224 table#queues tr {
 225   border-bottom: thin solid lightgray;
 226 }
 227
 228 table#queues td {
 229   padding: 2px;
 230 }
 231
 232 /* TOOLTIPS */
 233
 234 #purr-container {
 235   position: fixed;
 236   bottom: 0;
 237   right: 0;
 238 }
 239
 240 .tooltip {
 241   position: relative;
 242   width: 300px;
 243 }
 244
 245 .tooltip .close {
 246   position: absolute;
 247   top: 12px;
 248   right: 12px;
 249   display: block;
 250   width: 18px;
 251   height: 17px;
 252   text-indent: -9999px;
 253   background: url('/soc/content/images/purrClose.png') no-repeat 0 10px;
 254 }
 255
 256 .tooltip-body {
 257   min-height: 50px;
 258   padding: 22px 22px 0 22px;
 259   background: url('/soc/content/images/purrTop.png') no-repeat left top;
 260   color: #f9f9f9;
 261 }
 262
 263 .tooltip-body img {
 264   width: 50px;
 265   margin: 0 10px 0 0;
 266   float: left;
 267 }
 268
 269 .tooltip-body h3 {
 270   margin: 0;
 271   font-size: 1.1em;
 272 }
 273
 274 .tooltip-body p {
 275   margin: 5px 0 0 60px;
 276   font-size: 0.8em;
 277   line-height: 1.4em;
 278 }
 279
 280 .tooltip-bottom {
 281   height: 22px;
 282   background: url('/soc/content/images/purrBottom.png') no-repeat left top;
 283 }
 284
 285 /*
 286  * PAGE ELEMENTS
 287  */
 288
 289 #title {
 290   border-top: 1px solid #3366cc;
 291   background-color: #e5ecf9;
 292   font-size: large;
 293   font-weight: bold;
 294   margin: 0;
 295   padding: 0;
 296   padding-top: 1px;
 297   padding-bottom: 1px;
 298   margin-top: 5px;
 299   margin-left: 200px;
 300   padding-left: 3px;
 301 }
 302
 303 #notice {
 304   margin-left: 200px;
 305   padding: 3px;
 306 }
 307
 308 #logo {
 309   padding-right: 18px;
 310   position: absolute;
 311   left: 0;
 312   top: -5px;
 313 }
 314
 315 #login {
 316   text-align: right;
 317 }
 318
 319 #badge {
 320   clear: both;
 321   margin-top: 3.5em;
 322   margin-bottom: 1em;
 323   height: 53px;
 324   font-style: italic;
 325 }
 326
 327 #body {
 328   border-left: 1px dotted silver;
 329   margin-left: 200px;
 330   margin-right: 25px;
 331   padding-left: 18px;
 332   padding-bottom: 25px;
 333 }
 334
 335 #body .buttons {
 336   margin-right: 4px;
 337   margin-top: 20px;
 338 }
 339
 340 #body a.button, input[type^="submit"], input[type^="button"] {
 341   margin: 0;
 342   padding: 2px 5px 2px 5px;
 343   font-family: Arial, Sans-serif;
 344   font-size: 12px;
 345   text-decoration: none;
 346   color: #222;
 347   cursor: default;
 348   background: #ddd url("/soc/content/images/button-background.gif") repeat-x 0 0;
 349   border: 1px solid #aaa;
 350 }
 351
 352 #body a.button:hover, input[type^="submit"]:hover, input[type^="button"]:hover {
 353   border-color: #9cf #69e #69e #7af;
 354 }
 355
 356 #header {
 357   height: 50px;
 358   margin-bottom: 11px;
 359   position: relative;
 360 }
 361
 362 #footer {
 363   clear: both;
 364   text-align: center;
 365   margin-top: 3.5em;
 366   margin-bottom: 1em;
 367   background-image: url("http://www.google.com/images/art.gif");
 368   height: 53px;
 369   background-repeat: no-repeat;
 370   background-position: left center;
 371   padding-left: 125px;
 372 }
 373
 374 #footer .text {
 375   padding-top: 20px;
 376 }
 377
 378 #created {
 379   font-size: x-small;
 380   color:#C0C0C0;
 381   text-align: right;
 382 }
 383
 384 /* Google Map */
 385 #role_profile_map {
 386   height: 240px;
 387   width: 320px;
 388 }
 389
 390 #org_home_extras {
 391   margin:2em 0em 2em;
 392   min-height:500px;
 393 }
 394
 395 #extras_left {
 396   width: 55%;
 397   left: 0px;
 398   float: left;
 399 }
 400
 401 #extras_right {
 402   width: 43%;
 403   right: 0px;
 404   float: right;
 405 }
 406
 407 /* Organization home gmap */
 408 #org_home_map {
 409   height: 500px;
 410   width: 500px;
 411 }
 412
 413 /* SIDEBAR MENU */
 414 #side {
 415   width: 200px;
 416   margin-bottom: 3em;
 417   float: left;
 418   font-size: small;
 419 }
 420
 421 #menu ul {
 422   margin: 0;
 423   padding: 0;
 424   list-style-type: none;
 425   margin-bottom: 1em;
 426   font-size: 95%;
 427 }
 428
 429 #menu ul ul {
 430   margin-left: 10px;
 431   margin-bottom: 0;
 432 }
 433
 434 #menu li {
 435   margin-top: 4px;
 436   list-style-type: none;
 437   list-style-image: none;
 438 }
 439
 440 #menu img {
 441   margin-right: 4px;
 442 }
 443
 444 #menu li.leaf {
 445   padding-left: 14px;
 446 }
 447
 448 #menu h4 {
 449   margin: 0;
 450   padding: 0;
 451   margin-bottom: 1em;
 452 }
 453
 454 /*  */
 455
 456 span.unread {
 457   font-weight: bold;
 458   color: #FF0000;
 459 }
 460
 461 span.edited {
 462   color: #808080;
 463 }
 464
 465 /* SEARCH FIELD */
 466 #search {
 467   margin-top: 2em;
 468 }
 469
 470 #search .header {
 471   font-weight: bold;
 472   font-size: 90%;
 473   margin-bottom: 1px;
 474 }
 475
 476 #search .button {
 477   margin-top: 1px;
 478 }
 479
 480 #search .input input {
 481   width: 125px;
 482 }
 483
 484 /* BLOG FEEDS */
 485 .blog {
 486   border: 10px solid #e5ecf9;
 487   border-top: 1px solid #3366cc;
 488 }
 489
 490 .blog h2 {
 491   margin-top: 0.1em;
 492   background-color: #e5ecf9;
 493 }
 494
 495 .blog h2 a {
 496   text-decoration: none;
 497   color: black;
 498 }
 499
 500 .blog h2 a:visited {
 501   text-decoration: none;
 502   color: black;
 503 }
 504
 505
 506 .blog .entry {
 507   margin-bottom: 1em;
 508 }
 509
 510 .blog .title {
 511    font-size: medium;
 512 }
 513
 514 .blog .author {
 515   color: gray;
 516   margin-bottom: 0.5em;
 517 }
 518
 519 .blog .snippet {
 520   background-color: white;
 521 }
 522
 523 /* LIST */
 524 .list {
 525   background-color: #E5ECF9;
 526   border: 1px solid  #93b7fa;
 527   border-bottom: 2px solid #93b7fa;
 528   padding: 3px;
 529   -moz-border-radius: 5px 5px 0px 0px;
 530 }
 531
 532 .list .pagination {
 533   text-align: right;
 534   padding: 3px;
 535 }
 536
 537 .list table{
 538   background-color: white;
 539 }
 540
 541 .list table th {
 542   background-color: #eeeeec;
 543   border-right: 1px solid lightgray;
 544   border-top: 1px solid lightgray;
 545 }
 546
 547 .list table tr.on {
 548   background-color: #ff9;
 549   cursor: hand;
 550   cursor: pointer;
 551 }
 552
 553 .list table tr.off {
 554   background-color: #fff;
 555 }
 556
 557 .list table td.last {
 558   border-right: 1px solid lightgray;
 559 }
 560
 561 .list table .first {
 562   border-left: 1px solid lightgray;
 563 }
 564
 565 .list table td.no_hand {
 566   cursor: default;
 567 }
 568
 569 /*
 570  * STUDENT PROPOSAL REVIEWS
 571  */
 572 .studentproposalreview {
 573   font-size: small;
 574 }
 575
 576 .studentproposalreview .title {
 577   background-color: #e5ecf9;
 578 }
 579
 580 .studentproposalreview .student{
 581   background: #d0f5a9;
 582 }
 583
 584 .studentproposalcomment-public,
 585 .studentproposalreview-public .other {
 586   background: #f5f6ce;
 587 }
 588
 589 .studentproposalcomment-private,
 590 .studentproposalreview-private .other {
 591   background: #D2EDF6;
 592 }
 593
 594 /*
 595  * CUSTOM CLASSES
 596  */
 597
 598 .assignedslot {
 599   background-color: #d0f5a9;
 600 }
 601
 602 .todo {
 603   color: #cc0000;
 604   font-size: 80%;
 605 }
 606
 607 .newmark {
 608   color: red;
 609   font-size: 80%;
 610   vertical-align: top;
 611 }
 612
 613 .error {
 614   color: red;
 615 }
 616
 617 .notice {
 618   background:#fad163;
 619   font-size: small;
 620   font-weight: bold;
 621 }
 622
 623 .fieldhelptext {
 624   width: 450px;
 625   background:#fad163;
 626   font-size: small;
 627   border: 1px solid black;
 628 }
 629
 630 .rounded_ul { background: url(/soc/content/images/ul.gif) no-repeat top left; }
 631 .rounded_ur { background: url(/soc/content/images/ur.gif) no-repeat top right; }
 632 .rounded_ll { background: url(/soc/content/images/ll.gif) no-repeat bottom left; }
 633 .rounded_lr { background: url(/soc/content/images/lr.gif) no-repeat bottom right; }
 634
 635 /* Disabled text. */
 636 .disabled {
 637   color: gray;
 638 }
 639
 640 .plaintext {
 641   background:transparent none repeat scroll 0 0;
 642   border:0 none;
 643   color:black;
 644 }