interface/themes/style_oemr.css

   1 /*=============================================================
   2  *
   3  * This stylesheet was built with this color scheme
   4  * http://www.wellstyled.com/tools/colorscheme2/index-en.html?tetrad;50;0;217;0.35930735930735924;0.9058823529411765;0.35930735930735924;0.6341176470588235;0.08982683982683981;1;0.17965367965367962;1;0.35930735930735924;0.9058823529411765;0.35930735930735924;0.6341176470588235;0.08982683982683981;1;0.17965367965367962;1;0.35930735930735924;0.9058823529411765;0.35930735930735924;0.6341176470588235;0.08982683982683981;1;0.17965367965367962;1;0.35930735930735924;0.9058823529411765;0.35930735930735924;0.6341176470588235;0.08982683982683981;1;0.17965367965367962;1;0
   5  *
   6  *============================================================*/
   7 body {
   8     margin: 0px 0px 0px 2px;
   9     /* set the base font and size for all DOM children */
  10     font-family: sans-serif;
  11     font-size: 1em;
  12     background-color: #94d6e7;
  13 }
  14
  15 a {
  16   color: #250DA6;
  17   text-decoration: none;
  18 }
  19
  20 a:visited { color: #0000cc; }
  21 a:hover { color: #A28268; text-decoration: underline; }
  22
  23
  24 /*=============================================================
  25  * The top-menu in the old style, non-concurrent, layout where
  26  * the menu runs across the top of the window
  27  *============================================================*/
  28 #nav_topmenu {
  29     width: 100%;
  30     overflow: hidden;
  31     padding: 0px; margin: 0px;
  32 }
  33 #nav_topmenu form {
  34     padding: 0px; margin: 0px;
  35 }
  36 #nav_topmenu table {
  37     width: 100%;
  38     padding: 0px; margin: 0px;
  39     border-collapse: collapse;
  40 }
  41 #nav_topmenu tr {
  42     padding: 0px; margin: 0px;
  43 }
  44 #nav_topmenu td {
  45     padding: 0px; margin: 0px;
  46     text-align: center;
  47 }
  48 #nav_topmenu a {
  49     padding: 1px 2px 1px 2px;
  50     text-decoration: none;
  51     color: #004E63;
  52 }
  53 #nav_topmenu a:hover {
  54     background-color: #6895A2;
  55     color: #E8FAFF;
  56 }
  57 /* menu, menu_selected, and logout are older classes still used */
  58 .menu {
  59     font-size: 0.8em;
  60     color: #6895A2;
  61     text-align: left;
  62 }
  63 .menu a:hover {
  64     background-color: #6895A2;
  65     color: #E8FAFF;
  66 }
  67 .menu_selected {
  68     font-style: italic;
  69     color: #000000;
  70     text-align: left;
  71 }
  72 .logout {
  73     font-style: italic;
  74     color: #000000;
  75     text-align: right;
  76 }
  77
  78 .text {
  79     text-decoration: none;
  80     color: #000000;
  81     font-size: 10pt;
  82 }
  83
  84 .required {
  85     text-decoration: none;
  86     font-size: 10pt;
  87     color: #880000;
  88     font-weight: bold;
  89 }
  90
  91 .bold {
  92     text-decoration: none;
  93     font-size: 10pt;
  94     color: #000000;
  95     font-weight: bold;
  96 }
  97
  98 .italic {
  99     font-style: italic;
 100 }
 101
 102 .alert {
 103     font-size: 70%;
 104     color: #FF0000;
 105     text-decoration: none;
 106 }
 107
 108 .small {
 109     text-decoration: none;
 110     color: #000000;
 111     font-size: 80%;
 112 }
 113
 114 .link {
 115     text-decoration: none;
 116     color: #0000cc;
 117     font-size: 70%;
 118 }
 119
 120 .more {
 121     text-decoration: none;
 122     font-size: 70%;
 123 }
 124
 125 .back {
 126     text-decoration: none;
 127     font-size: 70%;
 128 }
 129
 130 .center { text-align:center; }
 131 .right { text-align:right; }
 132
 133 /* this class is used sporadically through the application as an
 134  * alternative to the typical anchor
 135  */
 136 .link_selected {
 137     text-decoration: none;
 138     color: #0000FF;
 139     font-size: 70%;
 140 }
 141 .link_selected:visited {
 142     text-decoration: none;
 143     color: #6895A2;
 144     font-size: 70%;
 145 }
 146
 147 .link_submit {
 148     text-decoration: none;
 149     font-size: 0.8em;
 150     color: #250DA6;
 151 }
 152 .link_submit a:visited { color: #0000cc; }
 153 .link_submit a:hover { color: #A28268; text-decoration:underline; }
 154
 155 .items {
 156     font-size: 6pt;
 157 }
 158
 159 .title {
 160     font-size: 12pt;
 161     font-weight: bold;
 162     text-decoration: none;
 163 }
 164
 165 /* see .titlebar below */
 166 .title_bar {
 167     font-size: 12pt;
 168     font-weight: bold;
 169     text-decoration: none;
 170     color: #000000;
 171 }
 172 /* the title bar showing the logged in user, date, etc */
 173 .title_bar_top {
 174     font-size: 0.8em;
 175     font-weight: bold;
 176     text-decoration: none;
 177     color: #004E63;
 178 }
 179
 180 /* a generic class for highlighting */
 181 .highlight * {
 182     background-color: #336699;
 183     color: white;
 184 }
 185
 186
 187 /*=============================================================
 188  * Here we have taken variables from globals.php and turned them into CSS classes
 189  * these should be used in place of the GLOBAL variables -- JRM March 2008
 190  *=============================================================*/
 191 .body_top { background-color: #94d6e7; }    /* $top_bg_line */
 192 .bgcolor2 { background-color: #94d6e7; }    /* $GLOBALS['style']['BGCOLOR2'] */
 193 .body_bottom { background: url('../pic/aquabg.gif') repeat; }  /* $bottom_bg_line */
 194 .body_title { background-color: #D1F5FF; }  /* $title_bg_line */
 195 .body_nav { background-color: #94D5E7; }    /* $nav_bg_line */
 196 .body_filler { background-color: #f7f0d5; } /* $login_filler_line */
 197 .body_login { background: url('../pic/aquabg.gif') repeat; } /* $login_body_line */
 198 .table_bg { background-color: #ccc; }           /* $table_bg */
 199 .bgcolor1 { background-color: #ccc; }       /* $GLOBALS['style']['BGCOLOR1'] */
 200 .textcolor11 { background-color: #222; }    /* $GLOBALS['style']['TEXTCOLOR11'] */
 201 .highlightcolor { background-color: #ddd; } /* $GLOBALS['style']['HIGHLIGHTCOLOR'] */
 202 .bottom_line { background: url('../pic/aquabg.gif') repeat; }    /* $GLOBALS['style']['BOTTOM_BG_LINE'] */
 203 .logobar { background-color: #24262c; height: 110px; }                 /* $GLOBALS['logoBarHeight']  262331 */
 204 .navbar { height: 22px; }                   /* $GLOBALS['navBarHeight'] */
 205 .titlebar { height: 20px; }                 /* $GLOBALS['titleBarHeight'] */
 206
 207
 208 /*==========================================================
 209  * box with 'info' icon in the background
 210  * useful for small information boxes
 211  *=========================================================*/
 212 .infobox {
 213     background: #FFF9E8 url('../../images/info.png') no-repeat center left;
 214     padding: 3px 3px 3px 19px;
 215 }
 216
 217
 218 /*==========================================================
 219  * Calendars
 220  *
 221  * All the calendar CSS files are held in the directory:
 222  *   interface/main/calendar/modules/PostCalendar/pntemplates/default/style
 223  * However, there may be some cross-over between this main
 224  * CSS file and that other one.
 225  *
 226  * ONE EXCEPTION is the Outlook-style calendar
 227  * it relies on a CSS file in this same folder
 228  * named ajax_calendar.css
 229  *
 230  *=========================================================*/
 231
 232
 233 /*=============================================================
 234  * For the reports list page
 235  *============================================================*/
 236 #reports_list {
 237     font-family: sans-serif;
 238     margin-top: 5px;
 239 }
 240 #reports_list td {
 241     font-size: 1em;
 242 }
 243 #reports_list ul {
 244     list-style: none;
 245 }
 246 #reports_list li {
 247     padding: 2px 0px 0px 0px;
 248     font-size: 0.9em;
 249 }
 250
 251 /*=============================================================
 252  * For the list of office notes page
 253  *============================================================*/
 254 #officenotes_list {
 255     width: 100%;
 256 }
 257 #officenotes_list table {
 258     width: 100%;
 259     border-collapse: collapse;
 260     border: 1px solid black;
 261 }
 262 #officenotes_list td {
 263     padding: 3px;
 264     border-bottom: 1px solid black;
 265     background-color: #FFF9E8;
 266 }
 267
 268 /*=============================================================
 269  * For the editing office notes page
 270  *============================================================*/
 271 #officenotes_edit table {
 272     border-collapse: collapse;
 273 }
 274 #officenotes_edit form {
 275     padding: 0px; margin: 0px;
 276 }
 277 #officenotes_edit .existingnotes table {
 278     /* for some unexplicable reason this particular style block is being ignored */
 279     border: 1px solid black;
 280     border-collapse: collapse;
 281 }
 282 #officenotes_edit .existingnotes td {
 283     padding: 3px;
 284     border-bottom: 1px solid black;
 285     background-color: #FFF9E8;
 286 }
 287
 288
 289 /*=============================================================
 290  * For the the address book list
 291  *============================================================*/
 292 #addressbook_list table { border-collapse: collapse; }
 293 #addressbook_list td { padding: 0px 4px 0px 4px; }
 294 #addressbook_list a, #addressbook_list a:visited, #addressbook_list a:hover { color:#0000cc; }
 295 #addressbook_list .search td {
 296     padding: 3px 0px 10px 0px;
 297 }
 298 #addressbook_list .head td {
 299     font-size: 0.8em;
 300     background-color:#cccccc;
 301     font-weight:bold;
 302 }
 303 #addressbook_list .detail td {
 304     font-size: 0.8em;
 305 }
 306 #addressbook_list .inputtext {
 307     font-weight:normal;
 308     border-style:solid;
 309     border-width:1px;
 310     border-color: #000000;
 311 }
 312 #addressbook_list .button {
 313 }
 314 #addressbook_list .evenrow { background-color: #E7D294; }
 315 #addressbook_list .oddrow { background-color: #FFF3D1; }
 316
 317 /*=============================================================
 318  * For the patient documents list
 319  *============================================================*/
 320 #documents_list form {
 321     margin: 0px; padding: 0px;
 322 }
 323 #documents_list table {
 324     width: 25%;
 325     overflow: hidden;
 326     margin: 10px;
 327 }
 328 #documents_list td {
 329     font-size: 0.8em;
 330     vertical-align: top;
 331 }
 332 #documents_list a {
 333 }
 334 #documents_list .treeMenuDefault {
 335 }
 336 #documents_list .treeMenuBold {
 337     font-weight: bold;
 338 }
 339 #documents_list {
 340     width: 25%;
 341     height: 90%;
 342     overflow: auto;
 343     border: 2px inset;
 344     float: left;
 345 }
 346 #documents_actions {
 347     padding-top: 10px;
 348     width: 70%;
 349     height: 90%;
 350     float: right;
 351     overflow: auto;
 352 }
 353 #documents_actions iframe {
 354     display: inline;
 355     border:none;
 356     width:100%;
 357     height:600px;
 358     overflow: auto;
 359 }
 360 #documents_actions form {
 361     margin: 0px; padding: 0px;
 362 }
 363 #documents_actions table {
 364     width: 100%;
 365 }
 366
 367
 368 /*=============================================================
 369  * For the prescription list page
 370  *============================================================*/
 371 #prescription_list {
 372     padding: 0px;
 373     margin: 2px;
 374     width: 100%;
 375 }
 376 #prescription_list table {
 377     border-collapse: collapse;
 378     width: 100%;
 379     border: 1px solid #999;
 380     background-color: white;
 381 }
 382 #prescription_list th {
 383     background-color: #999;
 384     font-size:0.8em;
 385 }
 386 #prescription_list td {
 387   font-size:0.7em;
 388   border-bottom: 1px solid #999;
 389 }
 390 #prescription_list a {
 391   font-size:0.8em;
 392   text-decoration:none;
 393 }
 394 #prescription_list .onescript {
 395     cursor: pointer;
 396 }
 397 #prescription_list .inactive {
 398   color:#777777;
 399 }
 400 #prescription_list .highlight {
 401     background-color: #336699;
 402     color: white;
 403 }
 404 #prescription_list #print_links {
 405     width: 100%;
 406     text-align: right;
 407 }
 408
 409
 410 /*=============================================================
 411  * Immunizations
 412  * seen in the patient immunization screen
 413  *============================================================*/
 414 #immunization_list {
 415     width: 100%;
 416     text-align: center;
 417 }
 418
 419 #immunization_list table {
 420     border-collapse: collapse;
 421     border: 1px solid black;
 422     background-color: white;
 423     width: 99%;
 424 }
 425
 426 #immunization_list table th {
 427     background-color: #ddd;
 428 }
 429
 430 #immunization_list table td {
 431     border-top: 1px solid black;
 432 }
 433
 434 #immunization_list .selected {
 435     background-color: #6699cc;
 436     color: white;
 437 }
 438
 439 #immunization_list .highlight {
 440     cursor: pointer;
 441 }
 442
 443 #immunization_list button {
 444     font-size: 0.8em;
 445 }
 446
 447
 448 /*=============================================================
 449  * Patient Stats
 450  * seen in the patient stats screens
 451  *============================================================*/
 452 #patient_stats {
 453     width: 100%;
 454     padding: 10px;
 455 }
 456
 457 #patient_stats table {
 458     width: 100%;
 459     border-collapse: collapse;
 460 }
 461 #patient_stats td {
 462     padding: 3px;
 463 }
 464 #patient_stats .statrow {
 465     cursor: pointer;
 466 }
 467
 468 #patient_stats .head {
 469     font-size: 0.8em;
 470 }
 471
 472 #patient_stats .detail {
 473     font-size: 0.8em;
 474     vertical-align: top;
 475 }
 476
 477 #patient_stats .buttons {
 478     margin: 10px;
 479 }
 480
 481 #patient_stats .btn {
 482 }
 483
 484 #patient_stats .bg1 {
 485     background-color: #fff;
 486 }
 487 #patient_stats .bg2 {
 488     background-color: #ffd;
 489 }
 490
 491 #patient_stats .nowrap {
 492     white-space: nowrap;
 493 }
 494 #patient_stats .typehead {
 495     border-top: 2px solid black;
 496     background-color: #ddd;
 497 }
 498
 499 #patient_stats .highlight {
 500     background-color: #336699;
 501     color: white;
 502 }
 503
 504
 505
 506 /*=============================================================
 507  * Patient Stats Summary
 508  * seen in the patient summary screen
 509  *============================================================*/
 510 #patient_stats_summary {
 511     width:100%;
 512 }
 513 #patient_stats_summary table {
 514     border-collapse: collapse;
 515     background-color: white;
 516 }
 517 #patient_stats_summary .noend_noreturn {
 518     color: #ee0000;
 519 }
 520 #patient_stats_summary .noend {
 521     color: #dd5500;
 522 }
 523 #patient_stats_summary .noreturn {
 524     color: #0000ff;
 525 }
 526 #patient_stats_summary .title {
 527     font-size: 1.1em;
 528 }
 529 #patient_stats_summary .more {
 530     font-size: 0.8em;
 531 }
 532 #patient_stats_summary .issuetitle {
 533     background-color: #ddd;
 534 }
 535 #patient_stats_issues {
 536     width: 100%;
 537 }
 538 #patient_stats_issues td {
 539     color: black;
 540 }
 541 #patient_stats_spreadsheets {
 542     width: 100%;
 543 }
 544 #patient_stats_imm {
 545     width: 100%;
 546 }
 547 #patient_stats_prescriptions {
 548     width: 100%;
 549 }
 550
 551 /*=============================================================
 552  * Patient Notes
 553  * seen in the patient summary and notes screens
 554  *============================================================*/
 555 #pnotes .billing {
 556     background-color: #dfd;
 557 }
 558 #pnotes table {
 559     border-collapse:collapse;
 560 }
 561
 562 #pnotes .noterow {
 563     cursor: pointer;
 564 }
 565
 566 #pnotes .noterow td {
 567     border-top:1px solid black;
 568     vertical-align: top;
 569     padding: 5px;
 570     margin: 5px;
 571 }
 572
 573
 574 /*=============================================================
 575  * Patient Past Encounters and Documents
 576  * seen in the patient encounter screen
 577  *============================================================*/
 578 #patient_pastenc {
 579     width:100%;
 580 }
 581
 582 #patient_pastenc .billing_note {
 583     width: 25%;
 584 }
 585 #patient_pastenc .billing_note_text {
 586     padding: 5px;
 587     border: 2px outset black;
 588     background-color: lightgrey;
 589 }
 590 #patient_pastenc .billing_note_text_highlight {
 591     background-color:#f7f5d1;
 592     color: #000;
 593 }
 594 #patient_pastenc table {
 595     border-collapse: collapse;
 596     width:100%;
 597     background-color: #fff;
 598 }
 599 #patient_pastenc tr {
 600     cursor: pointer;
 601 }
 602 #patient_pastenc td {
 603     border-top: 1px solid black;
 604     vertical-align: top;
 605     padding: 5px;
 606 }
 607 #patient_pastenc th {
 608     text-align: left;
 609     background-color: #ccc;
 610     padding: 5px;
 611 }
 612 #patient_pastenc #tooltipdiv {
 613     position:absolute;
 614     width:500px;
 615     border:1px solid black;
 616     padding:2px;
 617     background-color:#ffffaa;
 618     visibility:hidden;
 619     z-index:1000;
 620     font-size:9pt;
 621 }
 622 #patient_pastenc .tooltip {
 623     position:absolute;
 624     border:1px solid #333;
 625     background:#f7f5d1;
 626     padding:2px 5px;
 627     color:#333;
 628     display:none;
 629 }
 630
 631 /*=============================================================
 632  * This section relates to the custom layouts that can be made
 633  * using the OEMR tool in the Admin section. For example, the
 634  * Patient Demographics are a custom layout.
 635  *============================================================*/
 636
 637 /* Patient Demographics */
 638
 639 #DEM .groupname {
 640     font-weight: bold;
 641     color: #080;
 642     font-size: 0.8em;
 643     padding-right: 5px;
 644     vertical-align: bottom;
 645     height: 2em;
 646 }
 647 #DEM .label {
 648     font-weight: bold;
 649     font-size: 0.8em;
 650     vertical-align: bottom;
 651 }
 652 #DEM .data {
 653     font-size: 0.8em;
 654     vertical-align: bottom;
 655     text-align: left;
 656     padding-right: 30px;
 657 }
 658
 659 /* Patient History */
 660
 661 #HIS .groupname {
 662     font-weight: bold;
 663     color: #080;
 664     font-size: 0.8em;
 665     padding-right: 5px;
 666     vertical-align: bottom;
 667     height: 2em;
 668 }
 669 #HIS .label {
 670     font-weight: bold;
 671     font-size: 0.8em;
 672     vertical-align: bottom;
 673 }
 674 #HIS .data {
 675     font-size: 0.8em;
 676     vertical-align: bottom;
 677     text-align: left;
 678     padding-right: 30px;
 679 }
 680
 681
 682 /* the upcoming events section of the demographics page */
 683 #appts {
 684     border: 1px solid black;
 685     background-color: #D1F5FF;
 686     padding: 3px;
 687 }
 688 #appts #apptstitle {
 689     font-weight: bold;
 690     background-color: white;
 691     width: 100%;
 692     text-align: center;
 693     margin-bottom: 5px;
 694     color: #005B74;
 695 }
 696 #appts a {
 697     color: #004E63;
 698 }
 699 #appts a:hover {
 700     background-color: #6895A2;
 701     color: #E8FAFF;
 702     text-decoration: none;
 703 }
 704
 705
 706 /*=============================================================
 707  * Patient Reports
 708  * seen in the patient reports screens
 709  *============================================================*/
 710 #patient_reports {
 711     width:100%;
 712 }
 713 #patient_reports .issues {
 714     padding-right: 30px;
 715 }
 716 #patient_reports .issues table {
 717     margin: 10px 0px 10px 0px;
 718 }
 719 #patient_reports .issues td {
 720     padding: 2px;
 721 }
 722 #patient_reports .encounters td {
 723     padding: 2px;
 724 }
 725 #patient_reports .encounter_forms {
 726     margin:5px 15px 5px 15px;
 727 }
 728 #patient_reports td {
 729     vertical-align: top;
 730 }
 731 #patient_reports ul {
 732     list-style: none;
 733 }
 734
 735
 736 /*=============================================================
 737  * Report - Custom
 738  * seen as the patient report (custom_report.php)
 739  *============================================================*/
 740 #report_custom {
 741     width:100%;
 742 }
 743 #report_custom hr {
 744     border: 2px dotted black;
 745 }
 746 #report_custom .billing {
 747     margin: 5px;
 748     padding: 5px;
 749 }
 750 #report_custom h1 {
 751     font-size: 120%;
 752     margin:  0px 0px 5px 0px;
 753     padding: 0px;
 754 }
 755 #report_custom h2 {
 756     font-size: 105%;
 757     margin:  0px 0px 5px 0px;
 758     padding: 0px;
 759 }
 760 #report_custom .immunizations {
 761     margin: 5px;
 762     padding: 5px;
 763 }
 764 #report_custom .notes {
 765     margin: 5px;
 766     padding: 5px;
 767 }
 768 #report_custom .transactions {
 769     margin: 5px;
 770     padding: 5px;
 771 }
 772 #report_custom .communications {
 773     margin: 5px;
 774     padding: 5px;
 775 }
 776 #report_custom .documents {
 777     margin: 5px;
 778     padding: 5px;
 779 }
 780 #report_custom .demographics {
 781     margin: 5px;
 782     padding: 5px;
 783 }
 784 #report_custom .insurance {
 785     margin: 5px;
 786     padding: 5px;
 787 }
 788 #report_custom .history {
 789     margin: 5px;
 790     padding: 5px;
 791 }
 792 #report_custom .issue {
 793     margin-left: 20px;
 794 }
 795 #report_custom .issue_type {
 796     font-weight: bold;
 797     padding: 5px 0px 5px 0px;
 798 }
 799 #report_custom .issue_diag {
 800     margin: 0px 20px 0px 20px;
 801 }
 802 #report_custom .issue_title {
 803 }
 804 #report_custom .issue_comments {
 805 }
 806 #report_custom .encounter {
 807     width: 100%;
 808     border-top:2px dotted black;
 809     padding: 10px 5px 10px 5px;
 810     margin-top: 10px;
 811 }
 812 #report_custom .encounter h1 {
 813     font-size: 140%;
 814     margin: 0px;
 815     padding: 0px;
 816 }
 817 #report_custom .encounter_form {
 818     margin: 10px;
 819     padding: 10px;
 820     border-top: 1px solid gray;
 821 }
 822
 823
 824 /*=============================================================
 825  * Patient - Encounter Forms
 826  * seen when viewing an existing encounter (forms.php)
 827  *============================================================*/
 828 #encounter_forms {
 829     width:100%;
 830     padding: 5px;
 831 }
 832 #encounter_forms table {
 833     border-collapse:collapse;
 834     width:100%;
 835 }
 836 #encounter_forms th {
 837     background-color: #ccc;
 838 }
 839 #encounter_forms tr {
 840     vertical-align:top;
 841     cursor: pointer;
 842     background-color: #fff;
 843 }
 844 #encounter_forms .formrow {
 845     border-bottom:1px solid black;
 846     vertical-align: top;
 847     padding: 5px;
 848 }
 849
 850
 851 /*=============================================================
 852  * Patient - Code Search
 853  * seen when searching for codes (search_code.php)
 854  *============================================================*/