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 .alert {
  99     font-size: 70%;
 100     color: #FF0000;
 101     text-decoration: none;
 102 }
 103
 104 .small {
 105     text-decoration: none;
 106     color: #000000;
 107     font-size: 80%;
 108 }
 109
 110 .link {
 111     text-decoration: none;
 112     color: #0000cc;
 113     font-size: 70%;
 114 }
 115
 116 .more {
 117     text-decoration: none;
 118     font-size: 70%;
 119 }
 120
 121 .back {
 122     text-decoration: none;
 123     font-size: 70%;
 124 }
 125
 126 .center { text-align:center; }
 127 .right { text-align:right; }
 128
 129 /* this class is used sporadically through the application as an
 130  * alternative to the typical anchor
 131  */
 132 .link_selected {
 133     text-decoration: none;
 134     color: #0000FF;
 135     font-size: 70%;
 136 }
 137 .link_selected:visited {
 138     text-decoration: none;
 139     color: #6895A2;
 140     font-size: 70%;
 141 }
 142
 143 .link_submit {
 144     text-decoration: none;
 145     font-size: 0.8em;
 146     color: #250DA6;
 147 }
 148 .link_submit a:visited { color: #0000cc; }
 149 .link_submit a:hover { color: #A28268; text-decoration:underline; }
 150
 151 .items {
 152     font-size: 6pt;
 153 }
 154
 155 .title {
 156     font-size: 12pt;
 157     font-weight: bold;
 158     text-decoration: none;
 159 }
 160
 161 /* see .titlebar below */
 162 .title_bar {
 163     font-size: 12pt;
 164     font-weight: bold;
 165     text-decoration: none;
 166     color: #000000;
 167 }
 168 /* the title bar showing the logged in user, date, etc */
 169 .title_bar_top {
 170     font-size: 0.8em;
 171     font-weight: bold;
 172     text-decoration: none;
 173     color: #004E63;
 174 }
 175
 176
 177 /*=============================================================
 178  * Here we have taken variables from globals.php and turned them into CSS classes
 179  * these should be used in place of the GLOBAL variables -- JRM March 2008
 180  *=============================================================*/
 181 .body_top { background-color: #94d6e7; }    /* $top_bg_line */
 182 .bgcolor2 { background-color: #94d6e7; }    /* $GLOBALS['style']['BGCOLOR2'] */
 183 .body_bottom { background: url('../pic/aquabg.gif') repeat; }  /* $bottom_bg_line */
 184 .body_title { background-color: #D1F5FF; }  /* $title_bg_line */
 185 .body_nav { background-color: #94D5E7; }    /* $nav_bg_line */
 186 .body_filler { background-color: #f7f0d5; } /* $login_filler_line */
 187 .body_login { background: url('../pic/aquabg.gif') repeat; } /* $login_body_line */
 188 .table_bg { background-color: #ccc; }           /* $table_bg */
 189 .bgcolor1 { background-color: #ccc; }       /* $GLOBALS['style']['BGCOLOR1'] */
 190 .textcolor11 { background-color: #222; }    /* $GLOBALS['style']['TEXTCOLOR11'] */
 191 .highlightcolor { background-color: #ddd; } /* $GLOBALS['style']['HIGHLIGHTCOLOR'] */
 192 .bottom_line { background: url('../pic/aquabg.gif') repeat; }    /* $GLOBALS['style']['BOTTOM_BG_LINE'] */
 193 .logobar { background-color: #24262c; height: 110px; }                 /* $GLOBALS['logoBarHeight']  262331 */
 194 .navbar { height: 22px; }                   /* $GLOBALS['navBarHeight'] */
 195 .titlebar { height: 20px; }                 /* $GLOBALS['titleBarHeight'] */
 196
 197
 198 /*==========================================================
 199  * box with 'info' icon in the background
 200  * useful for small information boxes
 201  *=========================================================*/
 202 .infobox {
 203     background: #FFF9E8 url('../../images/info.png') no-repeat center left;
 204     padding: 3px 3px 3px 19px;
 205 }
 206
 207
 208 /*==========================================================
 209  * Calendars
 210  *
 211  * All the calendar CSS files are held in the directory:
 212  *   interface/main/calendar/modules/PostCalendar/pntemplates/default/style
 213  * However, there may be some cross-over between this main
 214  * CSS file and that other one.
 215  *
 216  * ONE EXCEPTION is the Outlook-style calendar
 217  * it relies on a CSS file in this same folder
 218  * named ajax_calendar.css
 219  *
 220  *=========================================================*/
 221
 222
 223 /*=============================================================
 224  * For the reports list page
 225  *============================================================*/
 226 #reports_list {
 227     font-family: sans-serif;
 228     margin-top: 5px;
 229 }
 230 #reports_list td {
 231     font-size: 1em;
 232 }
 233 #reports_list ul {
 234     list-style: none;
 235 }
 236 #reports_list li {
 237     padding: 2px 0px 0px 0px;
 238     font-size: 0.9em;
 239 }
 240
 241 /*=============================================================
 242  * For the list of office notes page
 243  *============================================================*/
 244 #officenotes_list {
 245     width: 100%;
 246 }
 247 #officenotes_list table {
 248     width: 100%;
 249     border-collapse: collapse;
 250     border: 1px solid black;
 251 }
 252 #officenotes_list td {
 253     padding: 3px;
 254     border-bottom: 1px solid black;
 255     background-color: #FFF9E8;
 256 }
 257
 258 /*=============================================================
 259  * For the editing office notes page
 260  *============================================================*/
 261 #officenotes_edit table {
 262     border-collapse: collapse;
 263 }
 264 #officenotes_edit form {
 265     padding: 0px; margin: 0px;
 266 }
 267 #officenotes_edit .existingnotes table {
 268     /* for some unexplicable reason this particular style block is being ignored */
 269     border: 1px solid black;
 270     border-collapse: collapse;
 271 }
 272 #officenotes_edit .existingnotes td {
 273     padding: 3px;
 274     border-bottom: 1px solid black;
 275     background-color: #FFF9E8;
 276 }
 277
 278
 279 /*=============================================================
 280  * For the the address book list
 281  *============================================================*/
 282 #addressbook_list table { border-collapse: collapse; }
 283 #addressbook_list td { padding: 0px 4px 0px 4px; }
 284 #addressbook_list a, #addressbook_list a:visited, #addressbook_list a:hover { color:#0000cc; }
 285 #addressbook_list .search td {
 286     padding: 3px 0px 10px 0px;
 287 }
 288 #addressbook_list .head td {
 289     font-size: 0.8em;
 290     background-color:#cccccc;
 291     font-weight:bold;
 292 }
 293 #addressbook_list .detail td {
 294     font-size: 0.8em;
 295 }
 296 #addressbook_list .inputtext {
 297     font-weight:normal;
 298     border-style:solid;
 299     border-width:1px;
 300     border-color: #000000;
 301 }
 302 #addressbook_list .button {
 303 }
 304 #addressbook_list .evenrow { background-color: #E7D294; }
 305 #addressbook_list .oddrow { background-color: #FFF3D1; }
 306
 307 /*=============================================================
 308  * For the patient documents list
 309  *============================================================*/
 310 #documents_list form {
 311     margin: 0px; padding: 0px;
 312 }
 313 #documents_list table {
 314     width: 25%;
 315     overflow: hidden;
 316     margin: 10px;
 317 }
 318 #documents_list td {
 319     font-size: 0.8em;
 320     vertical-align: top;
 321 }
 322 #documents_list a {
 323 }
 324 #documents_list .treeMenuDefault {
 325 }
 326 #documents_list .treeMenuBold {
 327     font-weight: bold;
 328 }
 329 #documents_list {
 330     width: 25%;
 331     height: 90%;
 332     overflow: auto;
 333     border: 2px inset;
 334     float: left;
 335 }
 336 #documents_actions {
 337     padding-top: 10px;
 338     width: 70%;
 339     height: 90%;
 340     float: right;
 341     overflow: auto;
 342 }
 343 #documents_actions iframe {
 344     display: inline;
 345     border:none;
 346     width:100%;
 347     height:600px;
 348     overflow: auto;
 349 }
 350 #documents_actions form {
 351     margin: 0px; padding: 0px;
 352 }
 353 #documents_actions table {
 354     width: 100%;
 355 }
 356
 357
 358 /*=============================================================
 359  * For the prescription list page
 360  *============================================================*/
 361 #prescription_list {
 362     padding: 0px;
 363     margin: 2px;
 364     width: 100%;
 365 }
 366 #prescription_list table {
 367     border-collapse: collapse;
 368     width: 100%;
 369     border: 1px solid #999;
 370     background-color: white;
 371 }
 372 #prescription_list th {
 373     background-color: #999;
 374     font-size:0.8em;
 375 }
 376 #prescription_list td {
 377   font-size:0.7em;
 378   border-bottom: 1px solid #999;
 379 }
 380 #prescription_list a {
 381   font-size:0.8em;
 382   text-decoration:none;
 383 }
 384 #prescription_list .onescript {
 385     cursor: pointer;
 386 }
 387 #prescription_list .inactive {
 388   color:#777777;
 389 }
 390 #prescription_list .highlight {
 391     background-color: #336699;
 392     color: white;
 393 }
 394 #prescription_list #print_links {
 395     width: 100%;
 396     text-align: right;
 397 }
 398
 399
 400 /*=============================================================
 401  * Immunizations
 402  * seen in the patient immunization screen
 403  *============================================================*/
 404 #immunization_list {
 405     width: 100%;
 406     text-align: center;
 407 }
 408
 409 #immunization_list table {
 410     border-collapse: collapse;
 411     border: 1px solid black;
 412     background-color: white;
 413     width: 99%;
 414 }
 415
 416 #immunization_list table th {
 417     background-color: #ddd;
 418 }
 419
 420 #immunization_list table td {
 421     border-top: 1px solid black;
 422 }
 423
 424 #immunization_list .selected {
 425     background-color: #6699cc;
 426     color: white;
 427 }
 428
 429 #immunization_list .highlight {
 430     background-color: #336699;
 431     color: white;
 432     cursor: pointer;
 433 }
 434
 435 #immunization_list button {
 436     font-size: 0.8em;
 437 }
 438
 439
 440 /*=============================================================
 441  * Patient Stats
 442  * seen in the patient stats screens
 443  *============================================================*/
 444 #patient_stats {
 445     width: 100%;
 446     padding: 10px;
 447 }
 448
 449 #patient_stats table {
 450     width: 100%;
 451     border-collapse: collapse;
 452 }
 453 #patient_stats td {
 454     padding: 3px;
 455 }
 456 #patient_stats .statrow {
 457     cursor: pointer;
 458 }
 459
 460 #patient_stats .head {
 461     font-size: 0.8em;
 462 }
 463
 464 #patient_stats .detail {
 465     font-size: 0.8em;
 466     vertical-align: top;
 467 }
 468
 469 #patient_stats .buttons {
 470     margin: 10px;
 471 }
 472
 473 #patient_stats .btn {
 474 }
 475
 476 #patient_stats .bg1 {
 477     background-color: #fff;
 478 }
 479 #patient_stats .bg2 {
 480     background-color: #ffd;
 481 }
 482
 483 #patient_stats .nowrap {
 484     white-space: nowrap;
 485 }
 486 #patient_stats .typehead {
 487     border-top: 2px solid black;
 488     background-color: #ddd;
 489 }
 490
 491 #patient_stats .highlight {
 492     background-color: #336699;
 493     color: white;
 494 }
 495
 496
 497
 498 /*=============================================================
 499  * Patient Stats Summary
 500  * seen in the patient summary screen
 501  *============================================================*/
 502 #patient_stats_summary {
 503     width:100%;
 504 }
 505 #patient_stats_summary table {
 506     border-collapse: collapse;
 507     background-color: white;
 508 }
 509 #patient_stats_summary .noend_noreturn {
 510     color: #ee0000;
 511 }
 512 #patient_stats_summary .noend {
 513     color: #dd5500;
 514 }
 515 #patient_stats_summary .noreturn {
 516     color: #0000ff;
 517 }
 518 #patient_stats_summary .title {
 519     font-size: 1.1em;
 520 }
 521 #patient_stats_summary .more {
 522     font-size: 0.8em;
 523 }
 524 #patient_stats_summary .issuetitle {
 525     background-color: #ddd;
 526 }
 527 #patient_stats_issues {
 528     width: 100%;
 529 }
 530 #patient_stats_issues td {
 531     color: black;
 532 }
 533 #patient_stats_spreadsheets {
 534     width: 100%;
 535 }
 536 #patient_stats_imm {
 537     width: 100%;
 538 }
 539 #patient_stats_prescriptions {
 540     width: 100%;
 541 }
 542
 543 /*=============================================================
 544  * Patient Notes
 545  * seen in the patient summary and notes screens
 546  *============================================================*/
 547 #pnotes .billing {
 548     background-color: #dfd;
 549 }
 550
 551 #pnotes .highlight {
 552     background-color: #fff;
 553 }
 554
 555 #pnotes table {
 556     border-collapse:collapse;
 557 }
 558
 559 #pnotes .noterow {
 560     cursor: pointer;
 561 }
 562
 563 #pnotes .noterow td {
 564     border-top:1px solid black;
 565     vertical-align: top;
 566     padding: 5px;
 567     margin: 5px;
 568 }
 569
 570
 571 /*=============================================================
 572  * Patient Past Encounters and Documents
 573  * seen in the patient encounter screen
 574  *============================================================*/
 575 #patient_pastenc {
 576     width:100%;
 577 }
 578
 579 #patient_pastenc .billing_note {
 580     width: 25%;
 581 }
 582 #patient_pastenc .billing_note_text {
 583     padding: 5px;
 584     border: 2px outset black;
 585     background-color: lightgrey;
 586 }
 587 #patient_pastenc .billing_note_text_highlight {
 588     background-color:#f7f5d1;
 589 }
 590 #patient_pastenc table {
 591     border-collapse: collapse;
 592     width:100%;
 593 }
 594 #patient_pastenc tr {
 595     cursor: pointer;
 596 }
 597 #patient_pastenc td {
 598     border-top: 1px solid black;
 599     vertical-align: top;
 600 }
 601 #patient_pastenc th {
 602     text-align: left;
 603 }
 604 #patient_pastenc #tooltipdiv {
 605     position:absolute;
 606     width:500px;
 607     border:1px solid black;
 608     padding:2px;
 609     background-color:#ffffaa;
 610     visibility:hidden;
 611     z-index:1000;
 612     font-size:9pt;
 613 }
 614 #patient_pastenc .highlight {
 615     background-color: #fff;
 616 }
 617 #patient_pastenc .tooltip {
 618     position:absolute;
 619     border:1px solid #333;
 620     background:#f7f5d1;
 621     padding:2px 5px;
 622     color:#333;
 623     display:none;
 624 }
 625
 626 /*=============================================================
 627  * This section relates to the custom layouts that can be made
 628  * using the OEMR tool in the Admin section. For example, the
 629  * Patient Demographics are a custom layout.
 630  *============================================================*/
 631
 632 /* Patient Demographics */
 633
 634 #DEM .groupname {
 635     font-weight: bold;
 636     color: #080;
 637     font-size: 0.8em;
 638     padding-right: 5px;
 639     vertical-align: bottom;
 640     height: 2em;
 641 }
 642 #DEM .label {
 643     font-weight: bold;
 644     font-size: 0.8em;
 645     vertical-align: bottom;
 646 }
 647 #DEM .data {
 648     font-size: 0.8em;
 649     vertical-align: bottom;
 650     text-align: left;
 651     padding-right: 30px;
 652 }
 653
 654 /* Patient History */
 655
 656 #HIS .groupname {
 657     font-weight: bold;
 658     color: #080;
 659     font-size: 0.8em;
 660     padding-right: 5px;
 661     vertical-align: bottom;
 662     height: 2em;
 663 }
 664 #HIS .label {
 665     font-weight: bold;
 666     font-size: 0.8em;
 667     vertical-align: bottom;
 668 }
 669 #HIS .data {
 670     font-size: 0.8em;
 671     vertical-align: bottom;
 672     text-align: left;
 673     padding-right: 30px;
 674 }
 675
 676
 677 /* the upcoming events section of the demographics page */
 678 #appts {
 679     border: 1px solid black;
 680     background-color: #D1F5FF;
 681     padding: 3px;
 682 }
 683 #appts #apptstitle {
 684     font-weight: bold;
 685     background-color: white;
 686     width: 100%;
 687     text-align: center;
 688     margin-bottom: 5px;
 689     color: #005B74;
 690 }
 691 #appts a {
 692     color: #004E63;
 693 }
 694 #appts a:hover {
 695     background-color: #6895A2;
 696     color: #E8FAFF;
 697     text-decoration: none;
 698 }