From ed511a229fe27df3f2eee4774ce4d40d97defcab Mon Sep 17 00:00:00 2001
From: Nate Jones <git@reliberate.com>
Date: Fri, 12 Dec 2014 22:04:27 +0000
Subject: [PATCH] Operator Panel: Stylized status buttons, moved CSS to
 templates.

---
 app/operator_panel/index.php     | 181 ++++++-------------------------
 app/operator_panel/index_inc.php |  47 ++++----
 themes/enhanced/template.php     | 150 +++++++++++++++++++++++++
 themes/minimized/template.php    | 150 +++++++++++++++++++++++++
 4 files changed, 361 insertions(+), 167 deletions(-)

diff --git a/app/operator_panel/index.php b/app/operator_panel/index.php
index 982ed20aa8..b1395702e3 100644
--- a/app/operator_panel/index.php
+++ b/app/operator_panel/index.php
@@ -263,41 +263,39 @@ require_once "resources/header.php";
 		document.getElementById('cmd_reponse').innerHTML=xmlhttp.responseText;
 	}
 
-<?php
 //hide/show destination input field
-	echo "function toggle_destination(ext) {\n";
-	echo "	refresh_stop();\n";
-	echo "	$('#destination_'+ext).fadeToggle(200, function(){\n";
-	echo "		if ($('#destination_'+ext).is(':visible')) {\n";
-	echo "			$('#destination_'+ext).focus();\n";
-	echo "		}\n";
-	echo "		else {\n";
-	echo "			$('#destination_'+ext).val('');\n";
-	echo "			refresh_start();\n";
-	echo "		}\n";
-	echo "	});\n";
-	echo "}\n";
+	function toggle_destination(ext) {
+		refresh_stop();
+		$('#destination_'+ext).fadeToggle(200, function(){
+			if ($('#destination_'+ext).is(':visible')) {
+				$('#destination_'+ext).focus();
+			}
+			else {
+				$('#destination_'+ext).val('');
+				refresh_start();
+			}
+		});
+	}
 
-	echo "function get_transfer_cmd(uuid, destination) {\n";
-	echo "	cmd = \"uuid_transfer \"+uuid+\" \"+destination+\" XML ".trim($_SESSION['user_context'])."\";\n";
-	echo "	return cmd;\n";
-	echo "}\n";
+	function get_transfer_cmd(uuid, destination) {
+		cmd = "uuid_transfer " + uuid + " " + destination + " XML <?=trim($_SESSION['user_context'])?>";
+		return cmd;
+	}
 
-	echo "function get_originate_cmd(source, destination) {\n";
-	echo "	cmd = \"bgapi originate {sip_auto_answer=true,origination_caller_id_number=\"+destination+\",sip_h_Call-Info=_undef_}user/\"+source+\" \"+destination+\" XML ".trim($_SESSION['user_context'])."\";\n";
-	echo "	return cmd;\n";
-	echo "}\n";
+	function get_originate_cmd(source, destination) {
+		cmd = "bgapi originate {sip_auto_answer=true,origination_caller_id_number=" + destination + ",sip_h_Call-Info=_undef_}user/" + source + " " + destination + " XML <?=trim($_SESSION['user_context'])?>";
+		return cmd;
+	}
 
-	echo "function get_eavesdrop_cmd(ext, chan_uuid) {\n";
-	echo "	cmd = \"bgapi originate {origination_caller_id_name=".$text['label-eavesdrop'].",origination_caller_id_number=\"+ext+\"}user/".$_SESSION['user']['extensions'][0]."@".$_SESSION['domain_name']." &eavesdrop(\"+chan_uuid+\")\";";
-	echo "	return cmd;\n";
-	echo "}\n";
+	function get_eavesdrop_cmd(ext, chan_uuid) {
+		cmd = "bgapi originate {origination_caller_id_name=<?=$text['label-eavesdrop']?>,origination_caller_id_number=" + ext + "}user/<?=$_SESSION['user']['extensions'][0]?>@<?=$_SESSION['domain_name']?> &eavesdrop(" + chan_uuid + ")";
+		return cmd;
+	}
 
-	echo "function get_record_cmd(uuid) {\n";
-	echo "	cmd = \"uuid_record \"+uuid+\" start ".$_SESSION['switch']['recordings']['dir']."/archive/".date("Y")."/".date("M")."/".date("d")."/\"+uuid+\".wav\";\n";
-	echo "	return cmd;\n";
-	echo "}\n";
-?>
+	function get_record_cmd(uuid) {
+		cmd = "uuid_record " + uuid + " start <?=$_SESSION['switch']['recordings']['dir']?>/archive/<?=date('Y')?>/<?=date('M')?>/<?=date('d')?>/" + uuid + ".wav";
+		return cmd;
+	}
 
 //virtual functions
 	function virtual_drag(call_id, ext) {
@@ -357,138 +355,25 @@ require_once "resources/header.php";
 </script>
 
 <style type="text/css">
-	DIV.ext {
-		float: left;
-		width: 235px;
-		margin: 0px 8px 8px 0px;
-		padding: 0px;
-		border-style: solid;
-		-moz-border-radius: 5px;
-		-webkit-border-radius: 5px;
-		border-radius: 5px;
-		-webkit-box-shadow: 0 0 3px #e5e9f0;
-		-moz-box-shadow: 0 0 3px #e5e9f0;
-		box-shadow: 0 0 3px #e5e9f0;
-		border-width: 1px 3px;
-		border-color: #b9c5d8 #c5d1e5;
-		background-color: #e5eaf5;
-		cursor: default;
-		}
-
-	DIV.state_active {
-		background-color: #baf4bb;
-		border-width: 1px 3px;
-		border-color: #77d779;
-		}
-
-	DIV.state_ringing {
-		background-color: #a8dbf0;
-		border-width: 1px 3px;
-		border-color: #41b9eb;
-		}
-
 	TABLE {
 		border-spacing: 0px;
 		border-collapse: collapse;
 		border: none;
 		}
-
-	TABLE.ext {
-		width: 100%;
-		height: 60px;
-		-moz-border-radius: 5px;
-		-webkit-border-radius: 5px;
-		border-radius: 5px;
-		background-color: #e5eaf5;
-		-moz-border-radius: 5px;
-		-webkit-border-radius: 5px;
-		border-radius: 5px;
-		}
-
-	TD.ext_icon {
-		vertical-align: middle;
-		-moz-border-radius: 5px;
-		-webkit-border-radius: 5px;
-		border-radius: 5px;
-		}
-
-	IMG.ext_icon {
-		cursor: move;
-		width: 39px;
-		height: 42px;
-		border: none;
-		}
-
-	TD.ext_info {
-		text-align: left;
-		vertical-align: top;
-		font-family: arial;
-		font-size: 10px;
-		overflow: auto;
-		width: 100%;
-		padding: 3px 5px 3px 7px;
-		-moz-border-radius: 5px;
-		-webkit-border-radius: 5px;
-		border-radius: 5px;
-		background-color: #f0f2f6;
-		}
-
-	TD.state_ringing {
-		background-color: #d1f1ff;
-		}
-
-	TD.state_active {
-		background-color: #e1ffe2;
-		}
-
-	TABLE.state_ringing {
-		background-color: #a8dbf0;
-		}
-
-	TABLE.state_active {
-		background-color: #baf4bb;
-		}
-
-	.user_info {
-		font-family: arial;
-		font-size: 10px;
-		display: inline-block;
-		}
-
-	.user_info strong {
-		color: #3164AD;
-		}
-
-	.caller_info {
-		display: block;
-		margin-top: 7px;
-		font-family: arial;
-		font-size: 10px;
-		}
-
-	.call_info {
-		display: inline-block;
-		padding: 0px;
-		font-family: arial;
-		font-size: 10px;
-		}
-
 </style>
 
 <?php
-
 //create simple array of users own extensions
 unset($_SESSION['user']['extensions']);
 foreach ($_SESSION['user']['extension'] as $assigned_extensions) {
 	$_SESSION['user']['extensions'][] = $assigned_extensions['user'];
 }
+?>
 
-echo "<div id='ajax_reponse'>";
-//	include("index_inc.php");
-echo "</div>\n";
-echo "<div id='cmd_reponse' style='display: none;'></div>";
-echo "<br><br>";
-
+<div id='ajax_reponse'></div>
+<div id='cmd_reponse' style='display: none;'></div>
+<br><br>
 
+<?php
 require_once "resources/footer.php";
 ?>
\ No newline at end of file
diff --git a/app/operator_panel/index_inc.php b/app/operator_panel/index_inc.php
index 5ff78fdcdb..6bc8850ecb 100644
--- a/app/operator_panel/index_inc.php
+++ b/app/operator_panel/index_inc.php
@@ -59,7 +59,7 @@ foreach ($activity as $extension => $fields) {
 $groups = array_unique($groups);
 sort($groups);
 
-echo "<table cellpadding='0' cellspacing='0' border='0' width='100%'>";
+echo "<table width='100%'>";
 echo "	<tr>";
 echo "		<td valign='top' align='left' width='50%' nowrap>";
 echo "			<b>".$text['title-operator_panel']."</b>";
@@ -67,15 +67,24 @@ echo "		</td>";
 echo "		<td valign='top' align='center' nowrap>";
 
 if (sizeof($_SESSION['user']['extensions']) > 0) {
-	$status_options = Array(
-		"Available" => $text['label-status_available'],
-		"Available (On Demand)" => $text['label-status_on_demand'],
-		"On Break" => $text['label-status_on_break'],
-		"Do Not Disturb" => $text['label-status_do_not_disturb'],
-		"Logged Out" => $text['label-status_logged_out']
-		);
-	foreach ($status_options as $status_value => $status_label) {
-		echo "		<input type='button' class='btn' value=\"".$status_label."\" onclick=\"send_cmd('index.php?status='+escape('".$status_value."'));\">";
+	$status_options[1]['status'] = "Available";
+	$status_options[1]['label'] = $text['label-status_available'];
+	$status_options[1]['style'] = "op_btn_status_available";
+	$status_options[2]['status'] = "Available (On Demand)";
+	$status_options[2]['label'] = $text['label-status_on_demand'];
+	$status_options[2]['style'] = "op_btn_status_available_on_demand";
+	$status_options[3]['status'] = "On Break";
+	$status_options[3]['label'] = $text['label-status_on_break'];
+	$status_options[3]['style'] = "op_btn_status_on_break";
+	$status_options[4]['status'] = "Do Not Disturb";
+	$status_options[4]['label'] = $text['label-status_do_not_disturb'];
+	$status_options[4]['style'] = "op_btn_status_do_not_disturb";
+	$status_options[5]['status'] = "Logged Out";
+	$status_options[5]['label'] = $text['label-status_logged_out'];
+	$status_options[5]['style'] = "op_btn_status_logged_out";
+
+	foreach ($status_options as $status_option) {
+		echo "	<input type='button' id='".$status_option['style']."' class='btn' value=\"".$status_option['label']."\" onclick=\"send_cmd('index.php?status='+escape('".$status_option['status']."'));\">\n";
 	}
 }
 
@@ -157,7 +166,7 @@ foreach ($activity as $extension => $ext) {
 	}
 
 	//determine block style by state (if any)
-	$style = ($ext_state != '') ? "state_".$ext_state : null;
+	$style = ($ext_state != '') ? "op_state_".$ext_state : null;
 
 	//determine the call identifier passed on drop
 	if ($ext['uuid'] == $ext['call_uuid'] && $ext['variable_bridge_uuid'] == '') { // transfer an outbound internal call
@@ -237,19 +246,19 @@ foreach ($activity as $extension => $ext) {
 			$status_hover = $text['label-status_logged_out_or_unknown'];
 	}
 
-	$block .= "<div id='".$extension."' class='ext ".$style."' ".(($_GET['vd_ext_from'] == $extension || $_GET['vd_ext_to'] == $extension) ? "style='border-style: dotted;'" : null)." ".(($ext_state != 'active' && $ext_state != 'ringing') ? "ondrop='drop(event, this.id);' ondragover='allowDrop(event, this.id);' ondragleave='discardDrop(event, this.id);'" : null).">"; // DRAG TO
-	$block .= "<table class='ext ".$style."'>";
+	$block .= "<div id='".$extension."' class='op_ext ".$style."' ".(($_GET['vd_ext_from'] == $extension || $_GET['vd_ext_to'] == $extension) ? "style='border-style: dotted;'" : null)." ".(($ext_state != 'active' && $ext_state != 'ringing') ? "ondrop='drop(event, this.id);' ondragover='allowDrop(event, this.id);' ondragleave='discardDrop(event, this.id);'" : null).">"; // DRAG TO
+	$block .= "<table class='op_ext ".$style."'>";
 	$block .= "	<tr>";
-	$block .= "		<td class='ext_icon'>";
+	$block .= "		<td class='op_ext_icon'>";
 	$block .= "			<span name='".$extension."'>"; // DRAG FROM
-	$block .= 				"<img id='".$call_identifier."' class='ext_icon' src='resources/images/status_".$status_icon.".png' title='".$status_hover."' ".(($draggable) ? "draggable='true' ondragstart=\"drag(event, this.parentNode.getAttribute('name'));\" onclick=\"virtual_drag('".$call_identifier."', '".$extension."');\"" : "onfocus='this.blur();' draggable='false' style='cursor: not-allowed;'").">";
+	$block .= 				"<img id='".$call_identifier."' class='op_ext_icon' src='resources/images/status_".$status_icon.".png' title='".$status_hover."' ".(($draggable) ? "draggable='true' ondragstart=\"drag(event, this.parentNode.getAttribute('name'));\" onclick=\"virtual_drag('".$call_identifier."', '".$extension."');\"" : "onfocus='this.blur();' draggable='false' style='cursor: not-allowed;'").">";
 	$block .= 			"</span>";
 	$block .= "		</td>";
-	$block .= "		<td class='ext_info ".$style."'>";
+	$block .= "		<td class='op_ext_info ".$style."'>";
 	if ($dir_icon != '') {
 		$block .= "			<img src='resources/images/".$dir_icon.".png' align='right' style='margin-top: 3px; margin-right: 1px; width: 12px; height: 12px;' draggable='false'>";
 	}
-	$block .= "			<span class='user_info'>";
+	$block .= "			<span class='op_user_info'>";
 	if ($ext['effective_caller_id_name'] != '' && $ext['effective_caller_id_name'] != $extension) {
 		$block .= "			<strong class='strong'>".$ext['effective_caller_id_name']."</strong> (".$extension.")";
 	}
@@ -258,9 +267,9 @@ foreach ($activity as $extension => $ext) {
 	}
 	$block .= "			</span><br>";
 	if ($ext_state != '') {
-		$block .= "		<span class='caller_info'>";
+		$block .= "		<span class='op_caller_info'>";
 		$block .= "			<table align='right'><tr><td style='text-align: right;'>";
-		$block .= "				<span class='call_info'>".$ext['call_length']."</span><br>";
+		$block .= "				<span class='op_call_info'>".$ext['call_length']."</span><br>";
 		//record
 		if (permission_exists('operator_panel_record') && $ext_state == 'active') {
 			$call_identifier_record = $ext['call_uuid'];
diff --git a/themes/enhanced/template.php b/themes/enhanced/template.php
index 39c4a5957f..d1694cbc2e 100644
--- a/themes/enhanced/template.php
+++ b/themes/enhanced/template.php
@@ -249,6 +249,7 @@ input.btn, input.button {
 	background-color: #000;
 	text-align: center;
 	text-transform: uppercase;
+	text-shadow: 0px 0px 1px rgba(0, 0, 0, 0.85);
 	opacity: 0.9;
 	-moz-opacity: 0.9;
 	}
@@ -954,6 +955,155 @@ legend {
 		padding: 20px;
 		}
 
+/* operator panel styles begin */
+
+	DIV.op_ext {
+		float: left;
+		width: 235px;
+		margin: 0px 8px 8px 0px;
+		padding: 0px;
+		border-style: solid;
+		-moz-border-radius: 5px;
+		-webkit-border-radius: 5px;
+		border-radius: 5px;
+		-webkit-box-shadow: 0 0 3px #e5e9f0;
+		-moz-box-shadow: 0 0 3px #e5e9f0;
+		box-shadow: 0 0 3px #e5e9f0;
+		border-width: 1px 3px;
+		border-color: #b9c5d8 #c5d1e5;
+		background-color: #e5eaf5;
+		cursor: default;
+		}
+
+	DIV.op_state_active {
+		background-color: #baf4bb;
+		border-width: 1px 3px;
+		border-color: #77d779;
+		}
+
+	DIV.op_state_ringing {
+		background-color: #a8dbf0;
+		border-width: 1px 3px;
+		border-color: #41b9eb;
+		}
+
+	TABLE.op_ext {
+		width: 100%;
+		height: 60px;
+		-moz-border-radius: 5px;
+		-webkit-border-radius: 5px;
+		border-radius: 5px;
+		background-color: #e5eaf5;
+		-moz-border-radius: 5px;
+		-webkit-border-radius: 5px;
+		border-radius: 5px;
+		}
+
+	TD.op_ext_icon {
+		vertical-align: middle;
+		-moz-border-radius: 5px;
+		-webkit-border-radius: 5px;
+		border-radius: 5px;
+		}
+
+	IMG.op_ext_icon {
+		cursor: move;
+		width: 39px;
+		height: 42px;
+		border: none;
+		}
+
+	TD.op_ext_info {
+		text-align: left;
+		vertical-align: top;
+		font-family: arial;
+		font-size: 10px;
+		overflow: auto;
+		width: 100%;
+		padding: 3px 5px 3px 7px;
+		-moz-border-radius: 5px;
+		-webkit-border-radius: 5px;
+		border-radius: 5px;
+		background-color: #f0f2f6;
+		}
+
+	TD.op_state_ringing {
+		background-color: #d1f1ff;
+		}
+
+	TD.op_state_active {
+		background-color: #e1ffe2;
+		}
+
+	TABLE.op_state_ringing {
+		background-color: #a8dbf0;
+		}
+
+	TABLE.op_state_active {
+		background-color: #baf4bb;
+		}
+
+	.op_user_info {
+		font-family: arial;
+		font-size: 10px;
+		display: inline-block;
+		}
+
+	.op_user_info strong {
+		color: #3164AD;
+		}
+
+	.op_caller_info {
+		display: block;
+		margin-top: 7px;
+		font-family: arial;
+		font-size: 10px;
+		}
+
+	.op_call_info {
+		display: inline-block;
+		padding: 0px;
+		font-family: arial;
+		font-size: 10px;
+		}
+
+	#op_btn_status_available {
+		background-image: -moz-linear-gradient(top, #8ec989 25%, #2d9c38 64%);
+		background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.25, #8ec989), color-stop(0.64, #2d9c38));
+		background-color: #2d9c38;
+		border: 1px solid #006200;
+		}
+
+	#op_btn_status_available_on_demand {
+		background-image: -moz-linear-gradient(top, #abd0aa 25%, #629d62 64%);
+		background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.25, #abd0aa), color-stop(0.64, #629d62));
+		background-color: #629d62;
+		border: 1px solid #619c61;
+		}
+
+	#op_btn_status_on_break {
+		background-image: -moz-linear-gradient(top, #ddc38b 25%, #be8e2c 64%);
+		background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.25, #ddc38b), color-stop(0.64, #be8e2c));
+		background-color: #be8e2c;
+		border: 1px solid #7d1b00;
+		}
+
+	#op_btn_status_do_not_disturb {
+		background-image: -moz-linear-gradient(top, #cc8984 25%, #960d10 64%);
+		background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.25, #cc8984), color-stop(0.64, #960d10));
+		background-color: #960d10;
+		border: 1px solid #5b0000;
+		}
+
+	#op_btn_status_logged_out {
+		background-image: -moz-linear-gradient(top, #cacac9 25%, #8d8d8b 64%);
+		background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.25, #cacac9), color-stop(0.64, #8d8d8b));
+		background-color: #8d8d8b;
+		border: 1px solid #5d5f5a;
+		}
+
+/* operator panel styles end */
+
 </style>
 
 <script type="text/javascript">
diff --git a/themes/minimized/template.php b/themes/minimized/template.php
index 7ddfe5e21c..0a5a8722bc 100644
--- a/themes/minimized/template.php
+++ b/themes/minimized/template.php
@@ -249,6 +249,7 @@ input.btn, input.button {
 	background-color: #000;
 	text-align: center;
 	text-transform: uppercase;
+	text-shadow: 0px 0px 1px rgba(0, 0, 0, 0.85);
 	opacity: 0.9;
 	-moz-opacity: 0.9;
 	}
@@ -949,6 +950,155 @@ legend {
 		padding: 20px;
 		}
 
+/* operator panel styles begin */
+
+	DIV.op_ext {
+		float: left;
+		width: 235px;
+		margin: 0px 8px 8px 0px;
+		padding: 0px;
+		border-style: solid;
+		-moz-border-radius: 5px;
+		-webkit-border-radius: 5px;
+		border-radius: 5px;
+		-webkit-box-shadow: 0 0 3px #e5e9f0;
+		-moz-box-shadow: 0 0 3px #e5e9f0;
+		box-shadow: 0 0 3px #e5e9f0;
+		border-width: 1px 3px;
+		border-color: #b9c5d8 #c5d1e5;
+		background-color: #e5eaf5;
+		cursor: default;
+		}
+
+	DIV.op_state_active {
+		background-color: #baf4bb;
+		border-width: 1px 3px;
+		border-color: #77d779;
+		}
+
+	DIV.op_state_ringing {
+		background-color: #a8dbf0;
+		border-width: 1px 3px;
+		border-color: #41b9eb;
+		}
+
+	TABLE.op_ext {
+		width: 100%;
+		height: 60px;
+		-moz-border-radius: 5px;
+		-webkit-border-radius: 5px;
+		border-radius: 5px;
+		background-color: #e5eaf5;
+		-moz-border-radius: 5px;
+		-webkit-border-radius: 5px;
+		border-radius: 5px;
+		}
+
+	TD.op_ext_icon {
+		vertical-align: middle;
+		-moz-border-radius: 5px;
+		-webkit-border-radius: 5px;
+		border-radius: 5px;
+		}
+
+	IMG.op_ext_icon {
+		cursor: move;
+		width: 39px;
+		height: 42px;
+		border: none;
+		}
+
+	TD.op_ext_info {
+		text-align: left;
+		vertical-align: top;
+		font-family: arial;
+		font-size: 10px;
+		overflow: auto;
+		width: 100%;
+		padding: 3px 5px 3px 7px;
+		-moz-border-radius: 5px;
+		-webkit-border-radius: 5px;
+		border-radius: 5px;
+		background-color: #f0f2f6;
+		}
+
+	TD.op_state_ringing {
+		background-color: #d1f1ff;
+		}
+
+	TD.op_state_active {
+		background-color: #e1ffe2;
+		}
+
+	TABLE.op_state_ringing {
+		background-color: #a8dbf0;
+		}
+
+	TABLE.op_state_active {
+		background-color: #baf4bb;
+		}
+
+	.op_user_info {
+		font-family: arial;
+		font-size: 10px;
+		display: inline-block;
+		}
+
+	.op_user_info strong {
+		color: #3164AD;
+		}
+
+	.op_caller_info {
+		display: block;
+		margin-top: 7px;
+		font-family: arial;
+		font-size: 10px;
+		}
+
+	.op_call_info {
+		display: inline-block;
+		padding: 0px;
+		font-family: arial;
+		font-size: 10px;
+		}
+
+	#op_btn_status_available {
+		background-image: -moz-linear-gradient(top, #8ec989 25%, #2d9c38 64%);
+		background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.25, #8ec989), color-stop(0.64, #2d9c38));
+		background-color: #2d9c38;
+		border: 1px solid #006200;
+		}
+
+	#op_btn_status_available_on_demand {
+		background-image: -moz-linear-gradient(top, #abd0aa 25%, #629d62 64%);
+		background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.25, #abd0aa), color-stop(0.64, #629d62));
+		background-color: #629d62;
+		border: 1px solid #619c61;
+		}
+
+	#op_btn_status_on_break {
+		background-image: -moz-linear-gradient(top, #ddc38b 25%, #be8e2c 64%);
+		background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.25, #ddc38b), color-stop(0.64, #be8e2c));
+		background-color: #be8e2c;
+		border: 1px solid #7d1b00;
+		}
+
+	#op_btn_status_do_not_disturb {
+		background-image: -moz-linear-gradient(top, #cc8984 25%, #960d10 64%);
+		background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.25, #cc8984), color-stop(0.64, #960d10));
+		background-color: #960d10;
+		border: 1px solid #5b0000;
+		}
+
+	#op_btn_status_logged_out {
+		background-image: -moz-linear-gradient(top, #cacac9 25%, #8d8d8b 64%);
+		background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.25, #cacac9), color-stop(0.64, #8d8d8b));
+		background-color: #8d8d8b;
+		border: 1px solid #5d5f5a;
+		}
+
+/* operator panel styles end */
+
 </style>
 
 <script type="text/javascript">