From 8e9624e04d5376970b2be5c46e202dfb5dd58c7a Mon Sep 17 00:00:00 2001
From: Brady Miller <brady.g.miller@gmail.com>
Date: Mon, 10 Oct 2016 17:23:55 -0700
Subject: [PATCH] Show message indicator and several tab layout changes (#308)

* Integrated tab layout changes by MDSupport

* Modernized legacy theme buttons with Ray's work in the tan theme

* fixed the large font size in the tabs layout (with legacy themes)
---
 interface/main/tabs/js/user_data_view_model.js     |   7 ++
 interface/main/tabs/main.php                       |  15 ++-
 .../main/tabs/templates/patient_data_template.php  | 115 ++++++++++++---------
 interface/themes/style_babyblu.css                 |  97 ++++++++---------
 interface/themes/style_metal.css                   |  97 ++++++++---------
 interface/themes/style_oemr.css                    |  97 ++++++++---------
 interface/themes/style_purple.css                  |  97 ++++++++---------
 interface/themes/style_sky_blue.css                |  97 ++++++++---------
 interface/themes/tabs_style_compact.css            |  13 ++-
 interface/themes/tabs_style_full.css               |  13 ++-
 version.php                                        |   2 +-
 11 files changed, 365 insertions(+), 285 deletions(-)

diff --git a/interface/main/tabs/js/user_data_view_model.js b/interface/main/tabs/js/user_data_view_model.js
index 6257dad30..6fd2a72a0 100644
--- a/interface/main/tabs/js/user_data_view_model.js
+++ b/interface/main/tabs/js/user_data_view_model.js
@@ -26,10 +26,17 @@ function user_data_view_model(username,fname,lname,authGrp)
     self.fname=ko.observable(fname);
     self.lname=ko.observable(lname);
     self.authorization_group=ko.observable(authGrp);
+    self.messages=ko.observable("");
     return this;
 
 }
 
+function viewMessages()
+{
+    navigateTab(webroot_url+"/interface/main/messages/messages.php?form_active=1","msg");
+    activateTabByName("msg",true);
+}
+
 function editSettings()
 {
     navigateTab(webroot_url+"/interface/super/edit_globals.php?mode=user","msc");
diff --git a/interface/main/tabs/main.php b/interface/main/tabs/main.php
index 3cb574053..eae80c8a4 100644
--- a/interface/main/tabs/main.php
+++ b/interface/main/tabs/main.php
@@ -56,7 +56,15 @@ function goRepeaterServices(){
     // Ensure send the skip_timeout_reset parameter to not count this as a manual entry in the
     //  timing out mechanism in OpenEMR.
 
-    // TODO: placeholder for checking the messages and displaying them
+    // Send the skip_timeout_reset parameter to not count this as a manual entry in the
+    //  timing out mechanism in OpenEMR.
+    $.post("<?php echo $GLOBALS['webroot']; ?>/library/ajax/dated_reminders_counter.php",
+        { skip_timeout_reset: "1" },
+        function(data) {
+            // Go knockout.js
+            app_view_model.application_data.user().messages(data);
+        }
+    );
 
     // run background-services
     $.post("<?php echo $GLOBALS['webroot']; ?>/library/ajax/execute_background_services.php",
@@ -93,10 +101,11 @@ var webroot_url="<?php echo $web_root; ?>";
 </script>
 <link rel="stylesheet" href="<?php echo $css_header;?>" type="text/css">
 <link rel="stylesheet" type="text/css" href="<?php echo $webroot; ?>/interface/themes/<?php echo $GLOBALS['theme_tabs_layout']; ?>?v=<?php echo $v_js_includes; ?>"/>
+<link rel="stylesheet" href="<?php echo $GLOBALS['assets_static_relative'] ?>/font-awesome-4-6-3/css/font-awesome.min.css">
 <link rel="shortcut icon" href="<?php echo $webroot; ?>/interface/pic/favicon.ico" />
+
 <script type="text/javascript" src="<?php echo $GLOBALS['assets_static_relative']; ?>/knockout-3-4-0/dist/knockout.js"></script>
 <script type="text/JavaScript" src="<?php echo $GLOBALS['assets_static_relative']; ?>/jquery-min-2-2-0/index.js"></script>
-
 <script type="text/javascript" src="js/custom_bindings.js?v=<?php echo $v_js_includes; ?>"></script>
 
 <script type="text/javascript" src="js/user_data_view_model.js?v=<?php echo $v_js_includes; ?>"></script>
@@ -117,8 +126,6 @@ var xl_strings_tabs_view_model = <?php echo json_encode( array(
 <script type="text/javascript" src="js/frame_proxies.js?v=<?php echo $v_js_includes; ?>"></script>
 <script type="text/javascript" src="js/dialog_utils.js?v=<?php echo $v_js_includes; ?>"></script>
 
-<link rel="stylesheet" href="<?php echo $GLOBALS['assets_static_relative'] ?>/font-awesome-4-6-3/css/font-awesome.min.css">
-
 <?php
 // Below code block is to prepare certain elements for deciding what links to show on the menu
 //
diff --git a/interface/main/tabs/templates/patient_data_template.php b/interface/main/tabs/templates/patient_data_template.php
index 5c1a7aed4..390d7eaaa 100644
--- a/interface/main/tabs/templates/patient_data_template.php
+++ b/interface/main/tabs/templates/patient_data_template.php
@@ -29,70 +29,89 @@
                 <?php echo xlt("Patient"); ?>:
                 <!-- ko if: patient -->
                     <a class="ptName" data-bind="click:refreshPatient,with: patient" href="#">
-                        <span data-bind="text: pname()"></span>(<span data-bind="text: pubpid"></span>)
+                        <span data-bind="text: pname()"></span>
+                        (<span data-bind="text: pubpid"></span>)
                     </a>
                 <!-- /ko -->
                 <!-- ko ifnot: patient -->
                     <?php echo xlt("None");?>
                 <!-- /ko -->
                 <!-- ko if: patient -->
-                    <strong><a href="#" class="clear" data-bind="click:clearPatient" title="<?php echo xlt("Clear") ?>">
-                        <i class="fa fa-times"></i>
-                    </a></strong>
+                    <a class="css_button_small" href="#" class="clear" data-bind="click:clearPatient" title="<?php echo xlt("Clear") ?>">
+                        <i style="font-size:150%;" class="fa fa-times"></i>
+                    </a>
                 <!-- /ko -->
             </div>
             <div class="patientInfo">
-                <!-- ko if: patient -->
-                    <span data-bind="text:patient().str_dob()"></span>
-                <!-- /ko -->
+            <!-- ko if: patient -->
+                <span data-bind="text:patient().str_dob()"></span>
+            <!-- /ko -->
             </div>
         </span>
         <span class="patientDataColumn">
-            &nbsp;
-            <!-- ko if: patient -->
-            <!-- ko with: patient -->
-                <div class="patientCurrentEncounter">
-                    <span><?php echo xlt("Selected Encounter"); ?>:</span>
-                    <!-- ko if:selectedEncounter() -->
-                        <a data-bind="click: refreshEncounter" href="#">
-                            <span data-bind="text:selectedEncounter().date()"></span>
-                            (<span data-bind="text:selectedEncounter().id()"></span>)
-                        </a>
-                    <!-- /ko -->
-                    <!-- ko if:!selectedEncounter() -->
-                        <?php echo xlt("None") ?>
-                    <!-- /ko -->
+        <!-- ko if: patient -->
+        <!-- ko with: patient -->
+            <a class="css_button_small" data-bind="click: clickNewEncounter" href="#" title="<?php echo xlt("New Encounter");?>">
+                <i style="font-size:150%;" class="fa fa-plus"></i>
+            </a>
+            <div class="patientCurrentEncounter">
+                <span><?php echo xlt("Open Encounter"); ?>:</span>
+                <!-- ko if:selectedEncounter() -->
+                    <a data-bind="click: refreshEncounter" href="#">
+                        <span data-bind="text:selectedEncounter().date()"></span>
+                        (<span data-bind="text:selectedEncounter().id()"></span>)
+                    </a>
+                <!-- /ko -->
+                <!-- ko if:!selectedEncounter() -->
+                    <?php echo xlt("None") ?>
+                <!-- /ko -->
+            </div>
+            <!-- ko if: encounterArray().length > 0 -->
+                <div class="patientInfo">
+                    <span class="patientDataColumn patientEncountersColumn">
+                        <span class="patientEncounterList" >
+                            <div data-bind="click: clickEncounterList">
+                            <!-- ko if: encounterArray().length == 1 -->
+                                <?php echo xlt("View Past Encounter");?>
+                            <!-- /ko -->
+                            <!-- ko if: encounterArray().length > 1 -->
+                                <?php echo xlt("View Past Encounters");?>
+                            <!-- /ko -->
+                                (<span data-bind="text:encounterArray().length"></span>)
+                            </div>
+                            <table class="encounters">
+                                <tbody>
+                                <!-- ko  foreach:encounterArray -->
+                                    <tr >
+                                        <td data-bind="click: chooseEncounterEvent">
+                                            <span data-bind="text:date"></span>
+                                            <span data-bind="text:category"></span>
+                                        </td>
+                                        <td class="review" data-bind="click: reviewEncounterEvent">
+                                            <?php echo xlt("Review"); ?>
+                                        </td>
+                                    </tr>
+                                <!-- /ko -->
+                                </tbody>
+                            </table>
+                        </span>
+                    </span>
                 </div>
             <!-- /ko -->
-            <!-- /ko -->
+        <!-- /ko -->
+        <!-- /ko -->
         </span>
-        <span class="patientDataColumn patientEncountersColumn">
-            <!-- ko if: patient -->
-            <!-- ko with: patient -->
-            <span class="patientEncounterList" >
-                <div data-bind="click: clickNewEncounter"><?php echo xlt("New Encounter");?></div>
-                <div data-bind="click: clickEncounterList"><?php echo xlt("Past Encounter List");?>
-                    (<span data-bind="text:encounterArray().length"></span>)
-                </div>
-                <table class="encounters">
-                    <tbody>
-                    <!-- ko  foreach:encounterArray -->
-                        <tr >
-                            <td data-bind="click: chooseEncounterEvent">
-                                <span data-bind="text:date"></span>
-                                <span data-bind="text:category"></span>
-                            </td>
-                            <td class="review" data-bind="click: reviewEncounterEvent">
-                                <?php echo xlt("Review"); ?>
-                            </td>
-                        </tr>
-                    <!-- /ko -->
-                    </tbody>
-                </table>
+        <!-- ko if: user -->
+        <!-- ko with: user -->
+        <!-- ko if:messages() -->
+            <span class="messagesColumn">
+                <a style="font-size:150%;" class="css_button_small" href="#" data-bind="click: viewMessages" title="<?php echo xlt("View Messages");?>">
+                    <i class="fa fa-envelope"></i>&nbsp;<span style="display:inline" data-bind="text: messages()"></span>
+                </a>
             </span>
-            <!-- /ko -->
-            <!-- /ko -->
-        </span>
+        <!-- /ko -->
+        <!-- /ko -->
+        <!-- /ko -->
     </div>
     <!-- /ko -->
 </script>
diff --git a/interface/themes/style_babyblu.css b/interface/themes/style_babyblu.css
index c23f1bb78..e1291bf47 100644
--- a/interface/themes/style_babyblu.css
+++ b/interface/themes/style_babyblu.css
@@ -617,64 +617,69 @@ font-weight: bold;
  * CSS BUTTONS
 */
 .css_button_small {
-    background: transparent url( '../../images/bg_button_a_small.gif' ) no-repeat scroll top right;
-    color: #444;
-    display: block;
-    float: left;
-    font: bold 9px arial, sans-serif;
-    height: 19px;
+    background: #063f80;
+    color: #ffffff !important;
+    display: inline-block;
+    font-weight: 300;
     margin-right: 3px;
-    padding-right: 10px; /* sliding doors padding */
+    /* sliding doors padding */
     text-decoration: none;
+    padding: 2px 7px 2px;
+    border: none;
+    font-size: 0.7em;
+    box-shadow: 2px 1px 4px #88888B;
+    border-radius: 5px;
 }
 
 .css_button_small span {
-    background: transparent url( '../../images/bg_button_span_small.gif' ) no-repeat;
-    display: block;
-    line-height: 20px;
-    padding: 0px 0px 0px 10px;
+    display: inline-block;
 }
 
-.css_button {
-    background: transparent url( '../../images/bg_button_a.gif' ) no-repeat scroll top right;
-    color: #444;
-    display: block;
-    float: left;
-    font: bold 10px arial, sans-serif;
-    height: 24px;
-    margin-right: 3px;
-    padding-right: 10px; /* sliding doors padding */
-    text-decoration: none;
+.css_button_small:hover {
+    background: #1050b6;
+    box-shadow: 0px 1px 3px #DDD;
 }
 
-.css_button span {
-    background: transparent url( '../../images/bg_button_span.gif' ) no-repeat;
-    display: block;
-    line-height: 14px;
-    padding: 5px 0 5px 10px;
-}
-.css_btn {
-    background: #fcfcfc;
-    background-image: -webkit-linear-gradient(top, #fcfcfc, #c1ced1);
-    background-image: -moz-linear-gradient(top, #fcfcfc, #c1ced1);
-    background-image: -ms-linear-gradient(top, #fcfcfc, #c1ced1);
-    background-image: -o-linear-gradient(top, #fcfcfc, #c1ced1);
-    background-image: linear-gradient(to bottom, #fcfcfc, #c1ced1);
-    -webkit-border-radius: 28;
-    -moz-border-radius: 28;
-    border-radius: 28px;
-    font: bold 10px arial, sans-serif;
-    color: #444;
-    font-size: 10px;
-    padding: 6px 15px 6px 15px;
-    border: solid #8d9194 1px;
+.css_button, input[type="button"], input[type="submit"], button{
+    background: #063f80;
+    color: #ffffff !important;
+    display: inline-block;
+    font-weight: 300;
+    margin: 4px;
+    vertical-align: middle;
+    /* sliding doors padding */
     text-decoration: none;
-    height: 24px;
-    outline: none;
+    padding: 4px 6px 4px;
+    border: none;
+    border-radius: 5px;
+    font-size:0.8em;
+    box-shadow: 2px 1px 4px #88888B;
 }
-.css_btn:hover{
-    color: orangered;
+
+.css_button span, input[type="button"] span, input[type="submit"] span, button span {
+    display: inline-block;
+}
+
+.css_button[href*="deleter"], input[type="button"][href*="deleter"], button[href*="deleter"] {
+  background: red !important;
+}
+
+.css_button:hover, input[type="button"]:hover, input[type="submit"]:hover, button:hover {
+    background: #1050b6;
+    box-shadow: 3px 4px 6px #DDD ;
 }
+
+input[type="button"][style="background-color:#ffff55"] {
+    background: #2672ec !important;
+}
+
+input[type="text"] {
+    background: #ffffff;
+    border: 1px solid #444444;
+    padding: 3px;
+    margin: 3px;
+}
+
 .sellistclass {
 float:left;
 }
diff --git a/interface/themes/style_metal.css b/interface/themes/style_metal.css
index a3bdca7bf..f1e244f39 100644
--- a/interface/themes/style_metal.css
+++ b/interface/themes/style_metal.css
@@ -617,64 +617,69 @@ font-weight: bold;
  * CSS BUTTONS
 */
 .css_button_small {
-    background: transparent url( '../../images/bg_button_a_small.gif' ) no-repeat scroll top right;
-    color: #444;
-    display: block;
-    float: left;
-    font: bold 9px arial, sans-serif;
-    height: 19px;
+    background: #063f80;
+    color: #ffffff !important;
+    display: inline-block;
+    font-weight: 300;
     margin-right: 3px;
-    padding-right: 10px; /* sliding doors padding */
+    /* sliding doors padding */
     text-decoration: none;
+    padding: 2px 7px 2px;
+    border: none;
+    font-size: 0.7em;
+    box-shadow: 2px 1px 4px #88888B;
+    border-radius: 5px;
 }
 
 .css_button_small span {
-    background: transparent url( '../../images/bg_button_span_small.gif' ) no-repeat;
-    display: block;
-    line-height: 20px;
-    padding: 0px 0px 0px 10px;
+    display: inline-block;
 }
 
-.css_button {
-    background: transparent url( '../../images/bg_button_a.gif' ) no-repeat scroll top right;
-    color: #444;
-    display: block;
-    float: left;
-    font: bold 10px arial, sans-serif;
-    height: 24px;
-    margin-right: 3px;
-    padding-right: 10px; /* sliding doors padding */
-    text-decoration: none;
+.css_button_small:hover {
+    background: #1050b6;
+    box-shadow: 0px 1px 3px #DDD;
 }
 
-.css_button span {
-    background: transparent url( '../../images/bg_button_span.gif' ) no-repeat;
-    display: block;
-    line-height: 14px;
-    padding: 5px 0 5px 10px;
-}
-.css_btn {
-    background: #fcfcfc;
-    background-image: -webkit-linear-gradient(top, #fcfcfc, #c1ced1);
-    background-image: -moz-linear-gradient(top, #fcfcfc, #c1ced1);
-    background-image: -ms-linear-gradient(top, #fcfcfc, #c1ced1);
-    background-image: -o-linear-gradient(top, #fcfcfc, #c1ced1);
-    background-image: linear-gradient(to bottom, #fcfcfc, #c1ced1);
-    -webkit-border-radius: 28;
-    -moz-border-radius: 28;
-    border-radius: 28px;
-    font: bold 10px arial, sans-serif;
-    color: #444;
-    font-size: 10px;
-    padding: 6px 15px 6px 15px;
-    border: solid #8d9194 1px;
+.css_button, input[type="button"], input[type="submit"], button{
+    background: #063f80;
+    color: #ffffff !important;
+    display: inline-block;
+    font-weight: 300;
+    margin: 4px;
+    vertical-align: middle;
+    /* sliding doors padding */
     text-decoration: none;
-    height: 24px;
-    outline: none;
+    padding: 4px 6px 4px;
+    border: none;
+    border-radius: 5px;
+    font-size:0.8em;
+    box-shadow: 2px 1px 4px #88888B;
 }
-.css_btn:hover{
-    color: orangered;
+
+.css_button span, input[type="button"] span, input[type="submit"] span, button span {
+    display: inline-block;
+}
+
+.css_button[href*="deleter"], input[type="button"][href*="deleter"], button[href*="deleter"] {
+  background: red !important;
 }
+
+.css_button:hover, input[type="button"]:hover, input[type="submit"]:hover, button:hover {
+    background: #1050b6;
+    box-shadow: 3px 4px 6px #DDD ;
+}
+
+input[type="button"][style="background-color:#ffff55"] {
+    background: #2672ec !important;
+}
+
+input[type="text"] {
+    background: #ffffff;
+    border: 1px solid #444444;
+    padding: 3px;
+    margin: 3px;
+}
+
 .sellistclass {
 float:left;
 }
diff --git a/interface/themes/style_oemr.css b/interface/themes/style_oemr.css
index c6297c66b..3ab1b4077 100644
--- a/interface/themes/style_oemr.css
+++ b/interface/themes/style_oemr.css
@@ -616,64 +616,69 @@ font-weight: bold;
  * CSS BUTTONS
 */
 .css_button_small {
-    background: transparent url( '../../images/bg_button_a_small.gif' ) no-repeat scroll top right;
-    color: #444;
-    display: block;
-    float: left;
-    font: bold 9px arial, sans-serif;
-    height: 19px;
+    background: #063f80;
+    color: #ffffff !important;
+    display: inline-block;
+    font-weight: 300;
     margin-right: 3px;
-    padding-right: 10px; /* sliding doors padding */
+    /* sliding doors padding */
     text-decoration: none;
+    padding: 2px 7px 2px;
+    border: none;
+    font-size: 0.7em;
+    box-shadow: 2px 1px 4px #88888B;
+    border-radius: 5px;
 }
 
 .css_button_small span {
-    background: transparent url( '../../images/bg_button_span_small.gif' ) no-repeat;
-    display: block;
-    line-height: 20px;
-    padding: 0px 0px 0px 10px;
+    display: inline-block;
 }
 
-.css_button {
-    background: transparent url( '../../images/bg_button_a.gif' ) no-repeat scroll top right;
-    color: #444;
-    display: block;
-    float: left;
-    font: bold 10px arial, sans-serif;
-    height: 24px;
-    margin-right: 3px;
-    padding-right: 10px; /* sliding doors padding */
-    text-decoration: none;
+.css_button_small:hover {
+    background: #1050b6;
+    box-shadow: 0px 1px 3px #DDD;
 }
 
-.css_button span {
-    background: transparent url( '../../images/bg_button_span.gif' ) no-repeat;
-    display: block;
-    line-height: 14px;
-    padding: 5px 0 5px 10px;
-}
-.css_btn {
-    background: #fcfcfc;
-    background-image: -webkit-linear-gradient(top, #fcfcfc, #c1ced1);
-    background-image: -moz-linear-gradient(top, #fcfcfc, #c1ced1);
-    background-image: -ms-linear-gradient(top, #fcfcfc, #c1ced1);
-    background-image: -o-linear-gradient(top, #fcfcfc, #c1ced1);
-    background-image: linear-gradient(to bottom, #fcfcfc, #c1ced1);
-    -webkit-border-radius: 28;
-    -moz-border-radius: 28;
-    border-radius: 28px;
-    font: bold 10px arial, sans-serif;
-    color: #444;
-    font-size: 10px;
-    padding: 6px 15px 6px 15px;
-    border: solid #8d9194 1px;
+.css_button, input[type="button"], input[type="submit"], button{
+    background: #063f80;
+    color: #ffffff !important;
+    display: inline-block;
+    font-weight: 300;
+    margin: 4px;
+    vertical-align: middle;
+    /* sliding doors padding */
     text-decoration: none;
-    height: 24px;
-    outline: none;
+    padding: 4px 6px 4px;
+    border: none;
+    border-radius: 5px;
+    font-size:0.8em;
+    box-shadow: 2px 1px 4px #88888B;
 }
-.css_btn:hover{
-    color: orangered;
+
+.css_button span, input[type="button"] span, input[type="submit"] span, button span {
+    display: inline-block;
+}
+
+.css_button[href*="deleter"], input[type="button"][href*="deleter"], button[href*="deleter"] {
+  background: red !important;
+}
+
+.css_button:hover, input[type="button"]:hover, input[type="submit"]:hover, button:hover {
+    background: #1050b6;
+    box-shadow: 3px 4px 6px #DDD ;
 }
+
+input[type="button"][style="background-color:#ffff55"] {
+    background: #2672ec !important;
+}
+
+input[type="text"] {
+    background: #ffffff;
+    border: 1px solid #444444;
+    padding: 3px;
+    margin: 3px;
+}
+
 .sellistclass {
 float:left;
 }
diff --git a/interface/themes/style_purple.css b/interface/themes/style_purple.css
index 518cc64ee..49ddff323 100644
--- a/interface/themes/style_purple.css
+++ b/interface/themes/style_purple.css
@@ -616,64 +616,69 @@ font-weight: bold;
  * CSS BUTTONS
 */
 .css_button_small {
-    background: transparent url( '../../images/bg_button_a_small.gif' ) no-repeat scroll top right;
-    color: #444;
-    display: block;
-    float: left;
-    font: bold 9px arial, sans-serif;
-    height: 19px;
+    background: #063f80;
+    color: #ffffff !important;
+    display: inline-block;
+    font-weight: 300;
     margin-right: 3px;
-    padding-right: 10px; /* sliding doors padding */
+    /* sliding doors padding */
     text-decoration: none;
+    padding: 2px 7px 2px;
+    border: none;
+    font-size: 0.7em;
+    box-shadow: 2px 1px 4px #88888B;
+    border-radius: 5px;
 }
 
 .css_button_small span {
-    background: transparent url( '../../images/bg_button_span_small.gif' ) no-repeat;
-    display: block;
-    line-height: 20px;
-    padding: 0px 0px 0px 10px;
+    display: inline-block;
 }
 
-.css_button {
-    background: transparent url( '../../images/bg_button_a.gif' ) no-repeat scroll top right;
-    color: #444;
-    display: block;
-    float: left;
-    font: bold 10px arial, sans-serif;
-    height: 24px;
-    margin-right: 3px;
-    padding-right: 10px; /* sliding doors padding */
-    text-decoration: none;
+.css_button_small:hover {
+    background: #1050b6;
+    box-shadow: 0px 1px 3px #DDD;
 }
 
-.css_button span {
-    background: transparent url( '../../images/bg_button_span.gif' ) no-repeat;
-    display: block;
-    line-height: 14px;
-    padding: 5px 0 5px 10px;
-}
-.css_btn {
-    background: #fcfcfc;
-    background-image: -webkit-linear-gradient(top, #fcfcfc, #c1ced1);
-    background-image: -moz-linear-gradient(top, #fcfcfc, #c1ced1);
-    background-image: -ms-linear-gradient(top, #fcfcfc, #c1ced1);
-    background-image: -o-linear-gradient(top, #fcfcfc, #c1ced1);
-    background-image: linear-gradient(to bottom, #fcfcfc, #c1ced1);
-    -webkit-border-radius: 28;
-    -moz-border-radius: 28;
-    border-radius: 28px;
-    font: bold 10px arial, sans-serif;
-    color: #444;
-    font-size: 10px;
-    padding: 6px 15px 6px 15px;
-    border: solid #8d9194 1px;
+.css_button, input[type="button"], input[type="submit"], button{
+    background: #063f80;
+    color: #ffffff !important;
+    display: inline-block;
+    font-weight: 300;
+    margin: 4px;
+    vertical-align: middle;
+    /* sliding doors padding */
     text-decoration: none;
-    height: 24px;
-    outline: none;
+    padding: 4px 6px 4px;
+    border: none;
+    border-radius: 5px;
+    font-size:0.8em;
+    box-shadow: 2px 1px 4px #88888B;
 }
-.css_btn:hover{
-    color: orangered;
+
+.css_button span, input[type="button"] span, input[type="submit"] span, button span {
+    display: inline-block;
+}
+
+.css_button[href*="deleter"], input[type="button"][href*="deleter"], button[href*="deleter"] {
+  background: red !important;
+}
+
+.css_button:hover, input[type="button"]:hover, input[type="submit"]:hover, button:hover {
+    background: #1050b6;
+    box-shadow: 3px 4px 6px #DDD ;
 }
+
+input[type="button"][style="background-color:#ffff55"] {
+    background: #2672ec !important;
+}
+
+input[type="text"] {
+    background: #ffffff;
+    border: 1px solid #444444;
+    padding: 3px;
+    margin: 3px;
+}
+
 .sellistclass {
 float:left;
 }
diff --git a/interface/themes/style_sky_blue.css b/interface/themes/style_sky_blue.css
index dc2e56046..47c9b017f 100644
--- a/interface/themes/style_sky_blue.css
+++ b/interface/themes/style_sky_blue.css
@@ -616,64 +616,69 @@ font-weight: bold;
  * CSS BUTTONS
 */
 .css_button_small {
-    background: transparent url( '../../images/bg_button_a_small.gif' ) no-repeat scroll top right;
-    color: #444;
-    display: block;
-    float: left;
-    font: bold 9px arial, sans-serif;
-    height: 19px;
+    background: #063f80;
+    color: #ffffff !important;
+    display: inline-block;
+    font-weight: 300;
     margin-right: 3px;
-    padding-right: 10px; /* sliding doors padding */
+    /* sliding doors padding */
     text-decoration: none;
+    padding: 2px 7px 2px;
+    border: none;
+    font-size: 0.7em;
+    box-shadow: 2px 1px 4px #88888B;
+    border-radius: 5px;
 }
 
 .css_button_small span {
-    background: transparent url( '../../images/bg_button_span_small.gif' ) no-repeat;
-    display: block;
-    line-height: 20px;
-    padding: 0px 0px 0px 10px;
+    display: inline-block;
 }
 
-.css_button {
-    background: transparent url( '../../images/bg_button_a.gif' ) no-repeat scroll top right;
-    color: #444;
-    display: block;
-    float: left;
-    font: bold 10px arial, sans-serif;
-    height: 24px;
-    margin-right: 3px;
-    padding-right: 10px; /* sliding doors padding */
-    text-decoration: none;
+.css_button_small:hover {
+    background: #1050b6;
+    box-shadow: 0px 1px 3px #DDD;
 }
 
-.css_button span {
-    background: transparent url( '../../images/bg_button_span.gif' ) no-repeat;
-    display: block;
-    line-height: 14px;
-    padding: 5px 0 5px 10px;
-}
-.css_btn {
-    background: #fcfcfc;
-    background-image: -webkit-linear-gradient(top, #fcfcfc, #c1ced1);
-    background-image: -moz-linear-gradient(top, #fcfcfc, #c1ced1);
-    background-image: -ms-linear-gradient(top, #fcfcfc, #c1ced1);
-    background-image: -o-linear-gradient(top, #fcfcfc, #c1ced1);
-    background-image: linear-gradient(to bottom, #fcfcfc, #c1ced1);
-    -webkit-border-radius: 28;
-    -moz-border-radius: 28;
-    border-radius: 28px;
-    font: bold 10px arial, sans-serif;
-    color: #444;
-    font-size: 10px;
-    padding: 6px 15px 6px 15px;
-    border: solid #8d9194 1px;
+.css_button, input[type="button"], input[type="submit"], button{
+    background: #063f80;
+    color: #ffffff !important;
+    display: inline-block;
+    font-weight: 300;
+    margin: 4px;
+    vertical-align: middle;
+    /* sliding doors padding */
     text-decoration: none;
-    height: 24px;
-    outline: none;
+    padding: 4px 6px 4px;
+    border: none;
+    border-radius: 5px;
+    font-size:0.8em;
+    box-shadow: 2px 1px 4px #88888B;
 }
-.css_btn:hover{
-    color: orangered;
+
+.css_button span, input[type="button"] span, input[type="submit"] span, button span {
+    display: inline-block;
+}
+
+.css_button[href*="deleter"], input[type="button"][href*="deleter"], button[href*="deleter"] {
+  background: red !important;
+}
+
+.css_button:hover, input[type="button"]:hover, input[type="submit"]:hover, button:hover {
+    background: #1050b6;
+    box-shadow: 3px 4px 6px #DDD ;
 }
+
+input[type="button"][style="background-color:#ffff55"] {
+    background: #2672ec !important;
+}
+
+input[type="text"] {
+    background: #ffffff;
+    border: 1px solid #444444;
+    padding: 3px;
+    margin: 3px;
+}
+
 .sellistclass {
 float:left;
 }
diff --git a/interface/themes/tabs_style_compact.css b/interface/themes/tabs_style_compact.css
index 6c0564843..fc41e611a 100644
--- a/interface/themes/tabs_style_compact.css
+++ b/interface/themes/tabs_style_compact.css
@@ -34,6 +34,7 @@ body
     display: flex;
     flex-direction: column;
     margin: 0px;
+    font-size: 12px;
 }
 #mainBox
 {
@@ -185,6 +186,10 @@ div.closeDlgIframe {
     min-height: 4em;
 }
 
+.patientCurrentEncounter {
+    display: inline;
+}
+
 .patientDataColumn
 {
     width: 33%;
@@ -192,6 +197,12 @@ div.closeDlgIframe {
     display: block;
 }
 
+.messagesColumn
+{
+    float: right;
+    padding-right: 20px;
+}
+
 .patientEncountersColumn
 {
 }
@@ -414,4 +425,4 @@ div.closeDlgIframe {
         position:relative;
         top:6px;
         right:5px;
-}
+}
\ No newline at end of file
diff --git a/interface/themes/tabs_style_full.css b/interface/themes/tabs_style_full.css
index 1f840bfec..0ab3cf598 100644
--- a/interface/themes/tabs_style_full.css
+++ b/interface/themes/tabs_style_full.css
@@ -37,6 +37,7 @@ body
     flex-direction: column;
     margin: 0px;
     background-color: #f4f4f4;
+    font-size: 12px;
 }
 #mainBox
 {
@@ -225,6 +226,10 @@ div.closeDlgIframe:before {
     color: #333 !important;
 }
 
+.patientCurrentEncounter {
+    display: inline;
+}
+
 .patientCurrentEncounter a {
     color: #333 !important;
 }
@@ -236,6 +241,12 @@ div.closeDlgIframe:before {
     display: block;
 }
 
+.messagesColumn
+{
+    float: right;
+    padding-right: 20px;
+}
+
 .patientEncountersColumn
 {
 }
@@ -455,4 +466,4 @@ div.menuLabel:hover {
         position:relative;
         top:6px;
         right:5px;
-}
+}
\ No newline at end of file
diff --git a/version.php b/version.php
index 3d247dd04..bb4a1a437 100644
--- a/version.php
+++ b/version.php
@@ -34,5 +34,5 @@ $v_offsite_portal='1.47';
 // Also whenever you change a .js file, make sure that all URLs referencing it
 // end with "?v=$v_js_includes".  Search the code for examples of doing this.
 // All this is to keep browsers from using an older cached version.
-$v_js_includes = 10;
+$v_js_includes = 11;
 ?>
-- 
2.11.4.GIT