emels/static/admin/css/base.css

   1 /*
   2     DJANGO Admin styles
   3 */
   4
   5 @import url(fonts.css);
   6
   7 body {
   8     margin: 0;
   9     padding: 0;
  10     font-size: 14px;
  11     font-family: "Roboto","Lucida Grande","DejaVu Sans","Bitstream Vera Sans",Verdana,Arial,sans-serif;
  12     color: #333;
  13     background: #fff;
  14 }
  15
  16 /* LINKS */
  17
  18 a:link, a:visited {
  19     color: #447e9b;
  20     text-decoration: none;
  21 }
  22
  23 a:focus, a:hover {
  24     color: #036;
  25 }
  26
  27 a:focus {
  28     text-decoration: underline;
  29 }
  30
  31 a img {
  32     border: none;
  33 }
  34
  35 a.section:link, a.section:visited {
  36     color: #fff;
  37     text-decoration: none;
  38 }
  39
  40 a.section:focus, a.section:hover {
  41     text-decoration: underline;
  42 }
  43
  44 /* GLOBAL DEFAULTS */
  45
  46 p, ol, ul, dl {
  47     margin: .2em 0 .8em 0;
  48 }
  49
  50 p {
  51     padding: 0;
  52     line-height: 140%;
  53 }
  54
  55 h1,h2,h3,h4,h5 {
  56     font-weight: bold;
  57 }
  58
  59 h1 {
  60     margin: 0 0 20px;
  61     font-weight: 300;
  62     font-size: 20px;
  63     color: #666;
  64 }
  65
  66 h2 {
  67     font-size: 16px;
  68     margin: 1em 0 .5em 0;
  69 }
  70
  71 h2.subhead {
  72     font-weight: normal;
  73     margin-top: 0;
  74 }
  75
  76 h3 {
  77     font-size: 14px;
  78     margin: .8em 0 .3em 0;
  79     color: #666;
  80     font-weight: bold;
  81 }
  82
  83 h4 {
  84     font-size: 12px;
  85     margin: 1em 0 .8em 0;
  86     padding-bottom: 3px;
  87 }
  88
  89 h5 {
  90     font-size: 10px;
  91     margin: 1.5em 0 .5em 0;
  92     color: #666;
  93     text-transform: uppercase;
  94     letter-spacing: 1px;
  95 }
  96
  97 ul li {
  98     list-style-type: square;
  99     padding: 1px 0;
 100 }
 101
 102 li ul {
 103     margin-bottom: 0;
 104 }
 105
 106 li, dt, dd {
 107     font-size: 13px;
 108     line-height: 20px;
 109 }
 110
 111 dt {
 112     font-weight: bold;
 113     margin-top: 4px;
 114 }
 115
 116 dd {
 117     margin-left: 0;
 118 }
 119
 120 form {
 121     margin: 0;
 122     padding: 0;
 123 }
 124
 125 fieldset {
 126     margin: 0;
 127     padding: 0;
 128     border: none;
 129     border-top: 1px solid #eee;
 130 }
 131
 132 blockquote {
 133     font-size: 11px;
 134     color: #777;
 135     margin-left: 2px;
 136     padding-left: 10px;
 137     border-left: 5px solid #ddd;
 138 }
 139
 140 code, pre {
 141     font-family: "Bitstream Vera Sans Mono", Monaco, "Courier New", Courier, monospace;
 142     color: #666;
 143     font-size: 12px;
 144 }
 145
 146 pre.literal-block {
 147     margin: 10px;
 148     background: #eee;
 149     padding: 6px 8px;
 150 }
 151
 152 code strong {
 153     color: #930;
 154 }
 155
 156 hr {
 157     clear: both;
 158     color: #eee;
 159     background-color: #eee;
 160     height: 1px;
 161     border: none;
 162     margin: 0;
 163     padding: 0;
 164     font-size: 1px;
 165     line-height: 1px;
 166 }
 167
 168 /* TEXT STYLES & MODIFIERS */
 169
 170 .small {
 171     font-size: 11px;
 172 }
 173
 174 .tiny {
 175     font-size: 10px;
 176 }
 177
 178 p.tiny {
 179     margin-top: -2px;
 180 }
 181
 182 .mini {
 183     font-size: 10px;
 184 }
 185
 186 p.mini {
 187     margin-top: -3px;
 188 }
 189
 190 .help, p.help, form p.help {
 191     font-size: 11px;
 192     color: #999;
 193 }
 194
 195 .help-tooltip {
 196     cursor: help;
 197 }
 198
 199 p img, h1 img, h2 img, h3 img, h4 img, td img {
 200     vertical-align: middle;
 201 }
 202
 203 .quiet, a.quiet:link, a.quiet:visited {
 204     color: #999;
 205     font-weight: normal;
 206 }
 207
 208 .float-right {
 209     float: right;
 210 }
 211
 212 .float-left {
 213     float: left;
 214 }
 215
 216 .clear {
 217     clear: both;
 218 }
 219
 220 .align-left {
 221     text-align: left;
 222 }
 223
 224 .align-right {
 225     text-align: right;
 226 }
 227
 228 .example {
 229     margin: 10px 0;
 230     padding: 5px 10px;
 231     background: #efefef;
 232 }
 233
 234 .nowrap {
 235     white-space: nowrap;
 236 }
 237
 238 /* TABLES */
 239
 240 table {
 241     border-collapse: collapse;
 242     border-color: #ccc;
 243 }
 244
 245 td, th {
 246     font-size: 13px;
 247     line-height: 16px;
 248     border-bottom: 1px solid #eee;
 249     vertical-align: top;
 250     padding: 8px;
 251     font-family: "Roboto", "Lucida Grande", Verdana, Arial, sans-serif;
 252 }
 253
 254 th {
 255     font-weight: 600;
 256     text-align: left;
 257 }
 258
 259 thead th,
 260 tfoot td {
 261     color: #666;
 262     padding: 5px 10px;
 263     font-size: 11px;
 264     background: #fff;
 265     border: none;
 266     border-top: 1px solid #eee;
 267     border-bottom: 1px solid #eee;
 268 }
 269
 270 tfoot td {
 271     border-bottom: none;
 272     border-top: 1px solid #eee;
 273 }
 274
 275 thead th.required {
 276     color: #000;
 277 }
 278
 279 tr.alt {
 280     background: #f6f6f6;
 281 }
 282
 283 .row1 {
 284     background: #fff;
 285 }
 286
 287 .row2 {
 288     background: #f9f9f9;
 289 }
 290
 291 /* SORTABLE TABLES */
 292
 293 thead th {
 294     padding: 5px 10px;
 295     line-height: normal;
 296     text-transform: uppercase;
 297     background: #f6f6f6;
 298 }
 299
 300 thead th a:link, thead th a:visited {
 301     color: #666;
 302 }
 303
 304 thead th.sorted {
 305     background: #eee;
 306 }
 307
 308 thead th.sorted .text {
 309     padding-right: 42px;
 310 }
 311
 312 table thead th .text span {
 313     padding: 8px 10px;
 314     display: block;
 315 }
 316
 317 table thead th .text a {
 318     display: block;
 319     cursor: pointer;
 320     padding: 8px 10px;
 321 }
 322
 323 table thead th .text a:focus, table thead th .text a:hover {
 324     background: #eee;
 325 }
 326
 327 thead th.sorted a.sortremove {
 328     visibility: hidden;
 329 }
 330
 331 table thead th.sorted:hover a.sortremove {
 332     visibility: visible;
 333 }
 334
 335 table thead th.sorted .sortoptions {
 336     display: block;
 337     padding: 9px 5px 0 5px;
 338     float: right;
 339     text-align: right;
 340 }
 341
 342 table thead th.sorted .sortpriority {
 343     font-size: .8em;
 344     min-width: 12px;
 345     text-align: center;
 346     vertical-align: 3px;
 347     margin-left: 2px;
 348     margin-right: 2px;
 349 }
 350
 351 table thead th.sorted .sortoptions a {
 352     position: relative;
 353     width: 14px;
 354     height: 14px;
 355     display: inline-block;
 356     background: url(../img/sorting-icons.svg) 0 0 no-repeat;
 357     background-size: 14px auto;
 358 }
 359
 360 table thead th.sorted .sortoptions a.sortremove {
 361     background-position: 0 0;
 362 }
 363
 364 table thead th.sorted .sortoptions a.sortremove:after {
 365     content: '\\';
 366     position: absolute;
 367     top: -6px;
 368     left: 3px;
 369     font-weight: 200;
 370     font-size: 18px;
 371     color: #999;
 372 }
 373
 374 table thead th.sorted .sortoptions a.sortremove:focus:after,
 375 table thead th.sorted .sortoptions a.sortremove:hover:after {
 376     color: #447e9b;
 377 }
 378
 379 table thead th.sorted .sortoptions a.sortremove:focus,
 380 table thead th.sorted .sortoptions a.sortremove:hover {
 381     background-position: 0 -14px;
 382 }
 383
 384 table thead th.sorted .sortoptions a.ascending {
 385     background-position: 0 -28px;
 386 }
 387
 388 table thead th.sorted .sortoptions a.ascending:focus,
 389 table thead th.sorted .sortoptions a.ascending:hover {
 390     background-position: 0 -42px;
 391 }
 392
 393 table thead th.sorted .sortoptions a.descending {
 394     top: 1px;
 395     background-position: 0 -56px;
 396 }
 397
 398 table thead th.sorted .sortoptions a.descending:focus,
 399 table thead th.sorted .sortoptions a.descending:hover {
 400     background-position: 0 -70px;
 401 }
 402
 403 /* FORM DEFAULTS */
 404
 405 input, textarea, select, .form-row p, form .button {
 406     margin: 2px 0;
 407     padding: 2px 3px;
 408     vertical-align: middle;
 409     font-family: "Roboto", "Lucida Grande", Verdana, Arial, sans-serif;
 410     font-weight: normal;
 411     font-size: 13px;
 412 }
 413
 414 textarea {
 415     vertical-align: top;
 416 }
 417
 418 input[type=text], input[type=password], input[type=email], input[type=url],
 419 input[type=number], textarea, select, .vTextField {
 420     border: 1px solid #ccc;
 421     border-radius: 4px;
 422     padding: 5px 6px;
 423     margin-top: 0;
 424 }
 425
 426 input[type=text]:focus, input[type=password]:focus, input[type=email]:focus,
 427 input[type=url]:focus, input[type=number]:focus, textarea:focus, select:focus,
 428 .vTextField:focus {
 429     border-color: #999;
 430 }
 431
 432 select {
 433     height: 30px;
 434 }
 435
 436 select[multiple] {
 437     min-height: 150px;
 438 }
 439
 440 /* FORM BUTTONS */
 441
 442 .button, input[type=submit], input[type=button], .submit-row input, a.button {
 443     background: #79aec8;
 444     padding: 10px 15px;
 445     border: none;
 446     border-radius: 4px;
 447     color: #fff;
 448     cursor: pointer;
 449 }
 450
 451 a.button {
 452     padding: 4px 5px;
 453 }
 454
 455 .button:active, input[type=submit]:active, input[type=button]:active,
 456 .button:focus, input[type=submit]:focus, input[type=button]:focus,
 457 .button:hover, input[type=submit]:hover, input[type=button]:hover {
 458     background: #609ab6;
 459 }
 460
 461 .button[disabled], input[type=submit][disabled], input[type=button][disabled] {
 462     opacity: 0.4;
 463 }
 464
 465 .button.default, input[type=submit].default, .submit-row input.default {
 466     float: right;
 467     border: none;
 468     font-weight: 400;
 469     background: #417690;
 470 }
 471
 472 .button.default:active, input[type=submit].default:active,
 473 .button.default:focus, input[type=submit].default:focus,
 474 .button.default:hover, input[type=submit].default:hover {
 475     background: #205067;
 476 }
 477
 478 .button[disabled].default,
 479 input[type=submit][disabled].default,
 480 input[type=button][disabled].default {
 481     opacity: 0.4;
 482 }
 483
 484
 485 /* MODULES */
 486
 487 .module {
 488     border: none;
 489     margin-bottom: 30px;
 490     background: #fff;
 491 }
 492
 493 .module p, .module ul, .module h3, .module h4, .module dl, .module pre {
 494     padding-left: 10px;
 495     padding-right: 10px;
 496 }
 497
 498 .module blockquote {
 499     margin-left: 12px;
 500 }
 501
 502 .module ul, .module ol {
 503     margin-left: 1.5em;
 504 }
 505
 506 .module h3 {
 507     margin-top: .6em;
 508 }
 509
 510 .module h2, .module caption, .inline-group h2 {
 511     margin: 0;
 512     padding: 8px;
 513     font-weight: 400;
 514     font-size: 13px;
 515     text-align: left;
 516     background: #79aec8;
 517     color: #fff;
 518 }
 519
 520 .module caption,
 521 .inline-group h2 {
 522     font-size: 12px;
 523     letter-spacing: 0.5px;
 524     text-transform: uppercase;
 525 }
 526
 527 .module table {
 528     border-collapse: collapse;
 529 }
 530
 531 /* MESSAGES & ERRORS */
 532
 533 ul.messagelist {
 534     padding: 0;
 535     margin: 0;
 536 }
 537
 538 ul.messagelist li {
 539     display: block;
 540     font-weight: 400;
 541     font-size: 13px;
 542     padding: 10px 10px 10px 65px;
 543     margin: 0 0 10px 0;
 544     background: #dfd url(../img/icon-yes.svg) 40px 12px no-repeat;
 545     background-size: 16px auto;
 546     color: #333;
 547 }
 548
 549 ul.messagelist li.warning {
 550     background: #ffc url(../img/icon-alert.svg) 40px 14px no-repeat;
 551     background-size: 14px auto;
 552 }
 553
 554 ul.messagelist li.error {
 555     background: #ffefef url(../img/icon-no.svg) 40px 12px no-repeat;
 556     background-size: 16px auto;
 557 }
 558
 559 .errornote {
 560     font-size: 14px;
 561     font-weight: 700;
 562     display: block;
 563     padding: 10px 12px;
 564     margin: 0 0 10px 0;
 565     color: #ba2121;
 566     border: 1px solid #ba2121;
 567     border-radius: 4px;
 568     background-color: #fff;
 569     background-position: 5px 12px;
 570 }
 571
 572 ul.errorlist {
 573     margin: 0 0 4px;
 574     padding: 0;
 575     color: #ba2121;
 576     background: #fff;
 577 }
 578
 579 ul.errorlist li {
 580     font-size: 13px;
 581     display: block;
 582     margin-bottom: 4px;
 583 }
 584
 585 ul.errorlist li:first-child {
 586     margin-top: 0;
 587 }
 588
 589 ul.errorlist li a {
 590     color: inherit;
 591     text-decoration: underline;
 592 }
 593
 594 td ul.errorlist {
 595     margin: 0;
 596     padding: 0;
 597 }
 598
 599 td ul.errorlist li {
 600     margin: 0;
 601 }
 602
 603 .form-row.errors {
 604     margin: 0;
 605     border: none;
 606     border-bottom: 1px solid #eee;
 607     background: none;
 608 }
 609
 610 .form-row.errors ul.errorlist li {
 611     padding-left: 0;
 612 }
 613
 614 .errors input, .errors select, .errors textarea {
 615     border: 1px solid #ba2121;
 616 }
 617
 618 div.system-message {
 619     background: #ffc;
 620     margin: 10px;
 621     padding: 6px 8px;
 622     font-size: .8em;
 623 }
 624
 625 div.system-message p.system-message-title {
 626     padding: 4px 5px 4px 25px;
 627     margin: 0;
 628     color: #c11;
 629     background: #ffefef url(../img/icon-no.svg) 5px 5px no-repeat;
 630 }
 631
 632 .description {
 633     font-size: 12px;
 634     padding: 5px 0 0 12px;
 635 }
 636
 637 /* BREADCRUMBS */
 638
 639 div.breadcrumbs {
 640     background: #79aec8;
 641     padding: 10px 40px;
 642     border: none;
 643     font-size: 14px;
 644     color: #c4dce8;
 645     text-align: left;
 646 }
 647
 648 div.breadcrumbs a {
 649     color: #fff;
 650 }
 651
 652 div.breadcrumbs a:focus, div.breadcrumbs a:hover {
 653     color: #c4dce8;
 654 }
 655
 656 /* ACTION ICONS */
 657
 658 .addlink {
 659     padding-left: 16px;
 660     background: url(../img/icon-addlink.svg) 0 1px no-repeat;
 661 }
 662
 663 .changelink, .inlinechangelink {
 664     padding-left: 16px;
 665     background: url(../img/icon-changelink.svg) 0 1px no-repeat;
 666 }
 667
 668 .deletelink {
 669     padding-left: 16px;
 670     background: url(../img/icon-deletelink.svg) 0 1px no-repeat;
 671 }
 672
 673 a.deletelink:link, a.deletelink:visited {
 674     color: #CC3434;
 675 }
 676
 677 a.deletelink:focus, a.deletelink:hover {
 678     color: #993333;
 679     text-decoration: none;
 680 }
 681
 682 /* OBJECT TOOLS */
 683
 684 .object-tools {
 685     font-size: 10px;
 686     font-weight: bold;
 687     padding-left: 0;
 688     float: right;
 689     position: relative;
 690     margin-top: -48px;
 691 }
 692
 693 .form-row .object-tools {
 694     margin-top: 5px;
 695     margin-bottom: 5px;
 696     float: none;
 697     height: 2em;
 698     padding-left: 3.5em;
 699 }
 700
 701 .object-tools li {
 702     display: block;
 703     float: left;
 704     margin-left: 5px;
 705     height: 16px;
 706 }
 707
 708 .object-tools a {
 709     border-radius: 15px;
 710 }
 711
 712 .object-tools a:link, .object-tools a:visited {
 713     display: block;
 714     float: left;
 715     padding: 3px 12px;
 716     background: #999;
 717     font-weight: 400;
 718     font-size: 11px;
 719     text-transform: uppercase;
 720     letter-spacing: 0.5px;
 721     color: #fff;
 722 }
 723
 724 .object-tools a:focus, .object-tools a:hover {
 725     background-color: #417690;
 726 }
 727
 728 .object-tools a:focus{
 729     text-decoration: none;
 730 }
 731
 732 .object-tools a.viewsitelink, .object-tools a.golink,.object-tools a.addlink {
 733     background-repeat: no-repeat;
 734     background-position: 93% center;
 735     padding-right: 26px;
 736 }
 737
 738 .object-tools a.viewsitelink, .object-tools a.golink {
 739     background-image: url(../img/tooltag-arrowright.svg);
 740 }
 741
 742 .object-tools a.addlink {
 743     background-image: url(../img/tooltag-add.svg);
 744 }
 745
 746 /* OBJECT HISTORY */
 747
 748 table#change-history {
 749     width: 100%;
 750 }
 751
 752 table#change-history tbody th {
 753     width: 16em;
 754 }
 755
 756 /* PAGE STRUCTURE */
 757
 758 #container {
 759     position: relative;
 760     width: 100%;
 761     min-width: 980px;
 762     padding: 0;
 763 }
 764
 765 #content {
 766     padding: 20px 40px;
 767 }
 768
 769 .dashboard #content {
 770     width: 600px;
 771 }
 772
 773 #content-main {
 774     float: left;
 775     width: 100%;
 776 }
 777
 778 #content-related {
 779     float: right;
 780     width: 260px;
 781     position: relative;
 782     margin-right: -300px;
 783 }
 784
 785 #footer {
 786     clear: both;
 787     padding: 10px;
 788 }
 789
 790 /* COLUMN TYPES */
 791
 792 .colMS {
 793     margin-right: 300px;
 794 }
 795
 796 .colSM {
 797     margin-left: 300px;
 798 }
 799
 800 .colSM #content-related {
 801     float: left;
 802     margin-right: 0;
 803     margin-left: -300px;
 804 }
 805
 806 .colSM #content-main {
 807     float: right;
 808 }
 809
 810 .popup .colM {
 811     width: auto;
 812 }
 813
 814 /* HEADER */
 815
 816 #header {
 817     width: auto;
 818     height: 40px;
 819     padding: 10px 40px;
 820     background: #417690;
 821     line-height: 40px;
 822     color: #ffc;
 823     overflow: hidden;
 824 }
 825
 826 #header a:link, #header a:visited {
 827     color: #fff;
 828 }
 829
 830 #header a:focus , #header a:hover {
 831     text-decoration: underline;
 832 }
 833
 834 #branding {
 835     float: left;
 836 }
 837
 838 #branding h1 {
 839     padding: 0;
 840     margin: 0 20px 0 0;
 841     font-weight: 300;
 842     font-size: 24px;
 843     color: #f5dd5d;
 844 }
 845
 846 #branding h1, #branding h1 a:link, #branding h1 a:visited {
 847     color: #f5dd5d;
 848 }
 849
 850 #branding h2 {
 851     padding: 0 10px;
 852     font-size: 14px;
 853     margin: -8px 0 8px 0;
 854     font-weight: normal;
 855     color: #ffc;
 856 }
 857
 858 #branding a:hover {
 859     text-decoration: none;
 860 }
 861
 862 #user-tools {
 863     float: right;
 864     padding: 0;
 865     margin: 0 0 0 20px;
 866     font-weight: 300;
 867     font-size: 11px;
 868     letter-spacing: 0.5px;
 869     text-transform: uppercase;
 870     text-align: right;
 871 }
 872
 873 #user-tools a {
 874     border-bottom: 1px solid rgba(255, 255, 255, 0.25);
 875 }
 876
 877 #user-tools a:focus, #user-tools a:hover {
 878     text-decoration: none;
 879     border-bottom-color: #79aec8;
 880     color: #79aec8;
 881 }
 882
 883 /* SIDEBAR */
 884
 885 #content-related {
 886     background: #f8f8f8;
 887 }
 888
 889 #content-related .module {
 890     background: none;
 891 }
 892
 893 #content-related h3 {
 894     font-size: 14px;
 895     color: #666;
 896     padding: 0 16px;
 897     margin: 0 0 16px;
 898 }
 899
 900 #content-related h4 {
 901     font-size: 13px;
 902 }
 903
 904 #content-related p {
 905     padding-left: 16px;
 906     padding-right: 16px;
 907 }
 908
 909 #content-related .actionlist {
 910     padding: 0;
 911     margin: 16px;
 912 }
 913
 914 #content-related .actionlist li {
 915     line-height: 1.2;
 916     margin-bottom: 10px;
 917     padding-left: 18px;
 918 }
 919
 920 #content-related .module h2 {
 921     background: none;
 922     padding: 16px;
 923     margin-bottom: 16px;
 924     border-bottom: 1px solid #eaeaea;
 925     font-size: 18px;
 926     color: #333;
 927 }
 928
 929 .delete-confirmation form input[type="submit"] {
 930     background: #ba2121;
 931     border-radius: 4px;
 932     padding: 10px 15px;
 933     color: #fff;
 934 }
 935
 936 .delete-confirmation form input[type="submit"]:active,
 937 .delete-confirmation form input[type="submit"]:focus,
 938 .delete-confirmation form input[type="submit"]:hover {
 939     background: #a41515;
 940 }
 941
 942 .delete-confirmation form .cancel-link {
 943     display: inline-block;
 944     vertical-align: middle;
 945     height: 15px;
 946     line-height: 15px;
 947     background: #ddd;
 948     border-radius: 4px;
 949     padding: 10px 15px;
 950     color: #333;
 951     margin: 0 0 0 10px;
 952 }
 953
 954 .delete-confirmation form .cancel-link:active,
 955 .delete-confirmation form .cancel-link:focus,
 956 .delete-confirmation form .cancel-link:hover {
 957     background: #ccc;
 958 }
 959
 960 /* POPUP */
 961 .popup #content {
 962     padding: 20px;
 963 }
 964
 965 .popup #container {
 966     min-width: 0;
 967 }
 968
 969 .popup #header {
 970     padding: 10px 20px;
 971 }