Updated alternate interface to look nicer based on changes by Zimi

css/index_interface2.css

@@ -1,12 +1,326 @@
+/** RESET **/
+* {
+	margin: 0;
+	padding: 0;
+}
+
+
+html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-weight: inherit;
+  font-style: inherit;
+  font-size: 100%;
+  font-family: inherit;
+  vertical-align: baseline;
+}
+
+.clear {
+  clear:both;
+  font-size:0;
+  height:0;
+  overflow:hidden;
+}
+
+body {
+	margin: 0px;
+	padding: 0;
+	background: #FFFFFF;
+	text-align: justify;
+	font-family:  Tahoma, Arial, Helvetica, sans-serif;
+}
+
+
+#wrapper_e {
+}
+.full_height_wrapper{
+	margin: 0px;
+	padding: 0;
+	text-align: justify;
+	height:285px;
+	font-family:  Tahoma, Arial, Helvetica, sans-serif;
+	min-width:1024px;
+}
+.half_height_wrapper{
+	margin: 0px;
+	padding: 0;
+	text-align: justify;
+	height:94px;
+	font-family:  Tahoma, Arial, Helvetica, sans-serif;
+	min-width:1024px;
+}
+
+#top_page {
+}
+#top_page_in_e {
+}
+
+.full_height_top_page{
+	height: 207px;
+}
+.half_height_top_page{
+	height: 56px;
+}
+
+.full_height{
+	margin: 0px;
+	padding: 0;
+	background: #FFF;
+	text-align: justify;
+	font-family:  Tahoma, Arial, Helvetica, sans-serif;
+	height: 271px;
+	padding-top:14px;
+}
+.half_height{
+	margin: 0px;
+	padding: 0;
+	background: #FFF;
+	text-align: justify;
+	font-family:  Tahoma, Arial, Helvetica, sans-serif;
+	height: 80px;
+	padding-top:14px;
+}
+
+
+#header_line {
+	margin: 16px 0px 0px 12px;
+	padding: 0;
+	text-align: justify;
+	font-family:  Tahoma, Arial, Helvetica, sans-serif;
+	height: 24px;
+}
+
+
+#menu_left_e {
+}
+.menu_full_height {
+	padding: 0;
+	height: 137px;
+	width:145px;
+	display:block;
+	float:left;
+	padding:9px 22px 0px 44px;
+	padding-left:44px;
+	padding-top:9px;
+	list-style:none;
+}
+
+.menu_half_height {
+	padding: 0;
+	height: 47px;
+	list-style:none;
+	width:145px;
+	display:block;
+	float:left;
+	padding:9px 22px 0px 44px;
+	padding-left:44px;
+	padding-top:9px;
+}
+
+#menu_left li {
+	list-style: none;
+}
+
+#item_1 a{
+	background: url(images/btn_field.jpg) no-repeat left top;
+	list-style: none;
+	display: inline; 
+	float: left;
+	width: 145px;
+	height: 36px;
+	color:#9f9f9f;
+	text-decoration:none;
+	padding:8px 0px 0px 18px;
+	border:none;
+}
+
+#item_1 a:hover{
+	list-style: none;
+	display: inline; 
+	float: left;
+	width: 145px;
+	height: 36px;
+	text-decoration:none;
+	color:#49b848;
+}
+
+#item_2_e a{
+}
+
+.item_2_full_height a{
+	background: url(images/btn_field.jpg) no-repeat left top;
+	list-style: none;
+	display: inline; 
+	float: left;
+	width: 145px;
+	height: 36px;
+	text-decoration:none;
+	color:#9f9f9f;
+	padding:8px 0px 0px 18px;
+	border:none;
+}
+.item_2_half_height a{
+	float: left;
+	width: 145px;
+	height: 1px;
+	text-decoration:none;
+	color:#b8b8ba;
+	display:none;
+}
+.item_2_full_height a:hover{
+list-style: none;
+	display: inline; 
+	float: left;
+	width: 145px;
+	height: 36px;
+	text-decoration:none;
+	color:#05b0f7;
+	background: url(images/btn_field.jpg) no-repeat left top;
+}
+
+#item_2_e a:hover{
+}
+.item_2_half_height {
+	float: left;
+	width: 145px;
+	height: 1px;
+	display:none;
+}
+
+#item_3_e a{
+}
+.item_3_half_height {
+	float: left;
+	width: 145px;
+	height: 1px;
+	display:none;
+}
+.item_3_full_height a{
+	background: url(images/btn_field.jpg) no-repeat left top;
+	list-style: none;
+	display: inline; 
+	float: left;
+	width: 145px;
+	height: 36px;
+	text-decoration:none;
+	color:#9f9f9f;
+	padding:8px 0px 0px 18px;
+	border:none;
+}
+.item_3_half_height a{
+}
+.item_3_full_height a:hover{
+	list-style: none;
+	display: inline; 
+	float: left;
+	width: 145px;
+	height: 36px;
+	text-decoration:none;
+	color:#ff3506;
+}
+
+#item_3_e a:hover{
+}
+
+#info_e {
+}
+
+.info_full_height{
+	margin: 0px;
+	padding: 0;
+	background: #CCC;
+ 	border: 1px solid #e9e9eb;
+	text-align: justify;
+	font-family:  Tahoma, Arial, Helvetica, sans-serif;
+	display:block;
+	float:left;
+	height: 137px;
+	width:214px;
+	padding-right:115px;
+}
+.info_half_height{
+	margin: 0px;
+	padding: 0;
+	background: #CCC;
+ 	border: 1px solid #e9e9eb;
+	text-align: justify;
+	font-family:  Tahoma, Arial, Helvetica, sans-serif;
+	display:block;
+	float:left;
+	height: 56px;
+	width:214px;
+	padding-right:115px;
+}
+
+
+
+a:active {
+ /* border: 4px inset;*/
+}
+
+
+#arrow_up_e {
+}
+
+.arrow_up_full_height {
+	margin: 0 auto;
+	padding: 0;
+	background: #EEE;
+	background: url(images/arrow_up.png) no-repeat left top;
+	text-align: justify;
+	font-family:  Tahoma, Arial, Helvetica, sans-serif;
+	height: 20px;
+	width:20px;
+	position:absolute;
+	left:480px;
+	top:270px;
+}
+
+.arrow_up_half_height {
+	display:none;
+}
+
+#arrow_down_e {
+}
+
+.arrow_down_full_height {
+	display:none;
+}
+.arrow_down_half_height {
+	margin: 0 auto;
+	padding: 0;
+	background: #EEE;
+	background: url(images/arrow_down.jpg) no-repeat left top;
+	text-align: justify;
+	font-family:  Tahoma, Arial, Helvetica, sans-serif;
+	height: 20px;
+	width:20px;
+	left:480px;
+	top:80px;
+	position:absolute;
+}
+
+#bottom_page {
+	margin: 0px;
+	padding: 0;
+	background: #CCC;
+	text-align: justify;
+	font-family:  Tahoma, Arial, Helvetica, sans-serif;
+	height: 100%;
+}
+
+
 .headerexpand {
     position: absolute; 
     height: 20px;
     bottom: 0px;
-    right: 0px;
+    right: 20%;
 }
 #headerexpandimage {
-	height: 20px;
-}.box {
+	height: 15px;
+}
+.box {
  margin: 18px;	
 }
 .online {
@@ -16,66 +330,155 @@
  background: #FF0000;
 }
 a {
- padding: 3px 0.5em;
+ /*padding: 3px 0.5em;
  margin-left: 3px;
  border: 1px solid #778;
  background: #DDE;
  text-decoration: none;
- color: black;
+ color: black;*/
 }
 a:active {
-  border: 4px inset;
+ /* border: 4px inset;*/
 }
 
-#header {
+.header {
   position : absolute;
   width : 20%;
-  height : 30%;
-  top : 0;
+  height : 38%;
+  top : 40%;
   right : 0;
   bottom : auto;
   left : 0;
-  /*border-bottom: 1px solid #aaa;*/
+  /*max-height:136px;*/
 }
 #calllist {
   position : absolute;
   width : 50%;
-  height : 30%;
+  height : 38%;
+  top : 2%;
   left : 50%;
-  top : 0;
   right : 0;
+  /*max-height:180px;*/
   bottom : auto;
 }
 #qstatus {
   position : absolute;
   width : 30%;
-  height : 30%;
-  top : 0;
+  height : 38%;
+  top : 2%;
   right : 0;
   left: 20%;
   bottom : auto;
-  /*border: 1px solid #aaa;*/
+  /*max-height:38%;*/
 }
 #casefunctions {
   position : absolute;
-  width : 20%;
-  height : 30%;
-  top : 0;
+  width : 17%;
+  height : 38%;
+  top : 2%;
   right : 0;
-  left: 0;
+  left: 3%;
+  font-size:15px;
   bottom : auto;
 }
+#casefunctions li {
+ list-style:none;
+}
 #content {
   position : absolute;
-  top : 30%;
+  top : 40%;
   left : 0;
   bottom : auto;
   width : 100%;
-  height : 70%;
+  height : 60%;
 }
 .embeddedobject {
   width:100%;
   height:100%;
   position:absolute;
 }
+#main-qstatus {
+  width:185px;
+  /*max-height:116px;*/
+  position:absolute;
+  left:3%;
+  top:2%;
+  height:90%;
+ border: 2px solid #e9e9eb;
+border-radius: 15px;
+-moz-border-radius: 15px;
 
+}
+
+#main-casenotes{
+height:85%;
+}
+#main-contactdetails{
+/*height:85%;*/
+}
+#main-calllist{
+/*height:85%;*/
+}
+#main-appointmentlist{
+height:85%;
+}
+#main-projectinfo{
+height:85%;
+}
+
+.wait_wrapper{
+margin: 0 auto;
+position:absolute;
+top:40%;
+height:60%;
+width:160px;
+left:40%;
+list-style:none;
+}
+
+
+
+.wait_li_1 a{
+	background: url(images/btn_field.jpg) no-repeat left top;
+	list-style: none;
+	display: inline; 
+	float: left;
+	width: 145px;
+	height: 36px;
+	color:#9f9f9f;
+	text-decoration:none;
+	padding:8px 0px 0px 18px;
+	border:none;
+}
+
+.wait_li_1 a:hover{
+	list-style: none;
+	display: inline; 
+	float: left;
+	width: 145px;
+	height: 36px;
+	text-decoration:none;
+	color:#49b848;
+}
+.wait_li_2 a{
+	background: url(images/btn_field.jpg) no-repeat left top;
+	list-style: none;
+	display: inline; 
+	float: left;
+	width: 145px;
+	height: 36px;
+	color:#9f9f9f;
+	text-decoration:none;
+	padding:8px 0px 0px 18px;
+	border:none;
+}
+
+.wait_li_2 a:hover{
+	list-style: none;
+	display: inline; 
+	float: left;
+	width: 145px;
+	height: 36px;
+	text-decoration:none;
+	color:#ff3506;
+}

css/respondent_interface2.css

@@ -11,3 +11,8 @@
 .addresp{
 	font-style:italic;
 }
+
+.text{
+font-size:14px;
+font-family:Tahoma, Arial, Helvetica, sans-serif;
+}

css/status_interface2.css

@@ -0,0 +1,34 @@
+.statusbox {
+ padding: 1px 1px;
+ margin: 1px;
+ border: 1px solid #778;
+ text-decoration: none;
+ color: black;
+ float: left;
+ text-align: center;
+ clear: both;
+}
+.statusbutton {
+ padding: 1px 1px;
+ margin: 1px;
+ border: 1px solid #778;
+ text-decoration: none;
+ color: black;
+ text-align: center;
+ float: left;
+}
+.online {
+ background: #00FF00;
+}
+.offline {
+ background: #FF0000;
+}
+.tobecoded {
+ background: orange;
+}
+.text {
+ float: left;
+ font-size:14px;
+ font-family:Tahoma, Arial, Helvetica, sans-serif;
+}
+

css/tabber_interface2.css

@@ -0,0 +1,118 @@
+/* $Id: example.css,v 1.5 2006/03/27 02:44:36 pat Exp $ */
+
+/*--------------------------------------------------
+  REQUIRED to hide the non-active tab content.
+  But do not hide them in the print stylesheet!
+  --------------------------------------------------*/
+.tabberlive .tabbertabhide {
+ display:none;
+}
+
+/*--------------------------------------------------
+  .tabber = before the tabber interface is set up
+  .tabberlive = after the tabber interface is set up
+  --------------------------------------------------*/
+.tabber {
+}
+.tabberlive {
+ /*margin-top:1em;*/
+}
+
+/*--------------------------------------------------
+  ul.tabbernav = the tab navigation list
+  li.tabberactive = the active tab
+  --------------------------------------------------*/
+ul.tabbernav
+{
+ margin:0;
+ padding: 3px 0;
+ border-bottom: 1px solid #e9e9eb;
+ font: bold 10px Verdana, sans-serif;
+}
+
+ul.tabbernav li
+{
+ list-style: none;
+ margin: 0;
+ display: inline;
+}
+
+ul.tabbernav li a
+{
+ padding: 3px 0.5em;
+ margin-left: 3px;
+ border: 1px solid #e9e9eb;
+ border-bottom: none;
+ background: #e9e9eb;
+ text-decoration: none;
+ font-size: 9px;
+border-top-left-radius: 5px;
+-moz-border-radius-topleft: 5px;
+border-top-right-radius: 5px;
+-moz-border-radius-topright: 5px;
+
+
+
+}
+
+ul.tabbernav li a:link { color: #448; }
+ul.tabbernav li a:visited { color: #667; }
+
+ul.tabbernav li a:hover
+{
+ color: #000;
+ background: #AAE;
+ border-color: #227;
+}
+
+ul.tabbernav li.tabberactive a
+{
+ background-color: #fff;
+ border-bottom: 1px solid #fff;
+
+}
+
+ul.tabbernav li.tabberactive a:hover
+{
+ color: #000;
+ background: white;
+ border-bottom: 1px solid white;
+}
+
+/*--------------------------------------------------
+  .tabbertab = the tab content
+  Add style only after the tabber interface is set up (.tabberlive)
+  --------------------------------------------------*/
+.tabberlive .tabbertab {
+ position:absolute;
+ border: 2px solid #e9e9eb;
+border-bottom-left-radius: 15px;
+-moz-border-radius-bottomleft: 15px;
+border-bottom-right-radius: 15px;
+-moz-border-radius-bottomright: 15px;
+
+ border-top:0;
+ top: 1.25em;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ overflow:auto;
+}
+
+/* If desired, hide the heading since a heading is provided by the tab */
+.tabberlive .tabbertab h2 {
+ display:none;
+}
+.tabberlive .tabbertab h3 {
+ display:none;
+}
+
+/* Example of using an ID to set different styles for the tabs on the page*/
+.tabberlive#tab1 {
+}
+.tabberlive#tab2 {
+}
+.tabberlive#tab2 .tabbertab {
+ height:100%;
+ overflow:auto;
+}