From 3e20622c9601828890477497200b5812b521f391 Mon Sep 17 00:00:00 2001
From: erickson <erickson@dcc99617-32d9-48b4-a31d-7c20da2025e4>
Date: Wed, 4 Jul 2007 17:37:08 +0000
Subject: [PATCH] moved all visually obvious inline color and border elements
 from the xhtml into the theme css for easier theming. created an alternate
 test theme called 'reddish' and added alternate stylesheet declaration note:
 this is not even remotely a re-design ;)  just making what we have easier to
 theme.

git-svn-id: svn://svn.open-ils.org/ILS/trunk@7511 dcc99617-32d9-48b4-a31d-7c20da2025e4
---
 Open-ILS/web/opac/locale/en-US/opac.dtd            |  2 +
 Open-ILS/web/opac/skin/default/css/layout.css      | 63 ++++----------
 .../skin/default/xml/advanced/advanced_global.xml  |  4 +-
 Open-ILS/web/opac/skin/default/xml/body.xml        |  2 +-
 .../web/opac/skin/default/xml/common/altcanvas.xml |  2 +-
 .../web/opac/skin/default/xml/common/cn_browse.xml |  4 -
 .../opac/skin/default/xml/common/css_common.xml    |  3 +
 .../web/opac/skin/default/xml/common/holds.xml     |  6 +-
 .../web/opac/skin/default/xml/common/login.xml     |  2 +-
 .../web/opac/skin/default/xml/common/orgtree.xml   |  2 +-
 .../web/opac/skin/default/xml/common/sidebar.xml   |  8 +-
 .../web/opac/skin/default/xml/home/homesearch.xml  | 14 ++--
 .../web/opac/skin/default/xml/page_advanced.xml    |  2 +-
 .../web/opac/skin/default/xml/page_cnbrowse.xml    |  2 +-
 Open-ILS/web/opac/skin/default/xml/page_myopac.xml | 27 ++----
 .../web/opac/skin/default/xml/page_rdetail.xml     |  8 +-
 .../skin/default/xml/rdetail/rdetail_altcanvas.xml |  2 +-
 .../opac/skin/default/xml/result/result_common.xml |  2 +-
 .../opac/skin/default/xml/result/result_info.xml   |  2 +-
 .../opac/skin/default/xml/result/result_table.xml  |  2 +-
 Open-ILS/web/opac/theme/default/css/colors.css     | 76 ++++++++++++++---
 Open-ILS/web/opac/theme/reddish/css/colors.css     | 96 ++++++++++++++++++++++
 22 files changed, 219 insertions(+), 112 deletions(-)
 create mode 100644 Open-ILS/web/opac/theme/reddish/css/colors.css

diff --git a/Open-ILS/web/opac/locale/en-US/opac.dtd b/Open-ILS/web/opac/locale/en-US/opac.dtd
index e5d58fac6e..40dc546007 100644
--- a/Open-ILS/web/opac/locale/en-US/opac.dtd
+++ b/Open-ILS/web/opac/locale/en-US/opac.dtd
@@ -57,6 +57,8 @@
 	contain at least one letter (a-z/A-Z), 
 	and contain at least one number.">
 
+<!ENTITY opac.style.reddish "Reddish">
+
 <!ENTITY holds.where_am_i
 	"PINES is a statewide system with both patrons and items
 	associated with over 250 libraries, holds lists are not as simple as
diff --git a/Open-ILS/web/opac/skin/default/css/layout.css b/Open-ILS/web/opac/skin/default/css/layout.css
index eae2f6b54f..33cbce6e90 100644
--- a/Open-ILS/web/opac/skin/default/css/layout.css
+++ b/Open-ILS/web/opac/skin/default/css/layout.css
@@ -7,79 +7,51 @@ body { background-color: white; }
 .right			{ position:absolute; right: 0px; }
 .hide_me			{ display:none; visibility: hidden; }
 
-/*
-input:focus:not(.invalid_value) { background: #E0F0E0; color: darkblue;}
-*/
-input:focus { background: #E0F0E0; color: darkblue;}
-/*select:focus { background: #E0F0E0; color: darkblue;}*/ /* this was causing strange behavior */
-a:focus { background: #E0F0E0; color: darkblue;}
-
 table { border-collapse: collapse; }
 
 /* generic CSS for a table with data */
 .data_grid { font-weight: 500; border-collapse: collapse;}
-.data_grid thead tr { background: #E0F0E0; color: #000000; }
-.data_grid thead td { border: 1px solid #808080; padding-right: 5px; padding-left: 5px;}
-.data_grid tbody td { border: 1px solid #E0E0E0; padding: 5px; }
+.data_grid thead tr { }
+.data_grid thead td { padding-right: 5px; padding-left: 5px;}
+.data_grid tbody td { padding: 5px; }
 .data_grid_center { text-align: center; }
 
 .data_grid_nb { font-weight: 500; border-collapse: collapse;}
-.data_grid_nb thead tr { background: #E0F0E0; color: #000000; }
-.data_grid_nb thead td { border: none; padding-right: 5px; padding-left: 5px;}
-.data_grid_nb tbody td { border: none; padding: 5px; }
+.data_grid_nb thead tr { color: #000000; }
+.data_grid_nb thead td { padding-right: 5px; padding-left: 5px;}
+.data_grid_nb tbody td { padding: 5px; }
 
 
 .classic_link { text-decoration: underline; color: black;}
 .classic_link:visited { text-decoration: underline; color: black;}
 .classic_link_col { text-decoration: underline; color: red;}
 
-.adv_quick_search { background-color: #E0F0E0; padding: 3px;}
-/*
-.adv_quick_search_submit { background-color: #F0E0E0; padding: 3px;}
-*/
-.adv_quick_search_submit { border-bottom: 3px solid #A0A0A0; padding: 3px;}
-
 .encircled { border: 1px solid black; }
 
-.light_border { border: 1px solid #E0E0E0; }
 
-/*.overdue { color: red; font-size: 110%; background: #F0F0E0; }*/
-.overdue { color: red; font-weight: bold;}
+.adv_quick_search { padding: 3px;}
+.adv_quick_search_submit { padding: 3px;}
 
-/*
-#main_table { border-collapse: collapse; width: 100%; height: 100%; }
-#main_left_cell { height: 100%; width: 20%; vertical-align: top;margin: 0px; padding: 0px;}
-#main_right_cell { height: 100%; width: 80%; vertical-align: top; margin: 0px; padding:0px;}
-*/
+.overdue { color: red; font-weight: bold;}
 
 #main_table { border-collapse: collapse; width: 100%;  }
 #main_left_cell { width: 20%; vertical-align: top;margin: 0px; padding: 0px;}
 #main_right_cell { width: 80%; vertical-align: top; margin: 0px; padding:0px;}
 
 
-.canvas { min-height: 300px; }
-#not_the_canvas {}
-
-#canvas_main { min-height: 300px; padding-left: 4px; -moz-border-radius: 6px; padding-bottom: 4px; }
-.non_canvas {  min-height: 300px; padding-left: 4px; -moz-border-radius: 6px;}
+#content { min-height: 300px; }
 
+.canvas {  min-height: 300px; padding-left: 4px; -moz-border-radius: 6px;}
+#canvas_main { padding-bottom: 4px; }
 
 #loading_div { width: 100%;}
 
 
-/* default to image size to avoid image stretching */
-/*
-.logo { height: 65px; width: 180px; }
-*/
-
 
 .shadowed { background: #F0F0E0; }
 .no_copies { background: #E0E0E0; }
 .overdue_circ { border: 2px dashed #F0D0E0; }
 
-/*
-.org_tree { height: 500px; padding-left: 2px; padding-right: 2px; }            
-*/
 .org_tree { padding-left: 2px; padding-right: 2px; }            
 .org_link { padding-right: 15px; }
 #org_link_container { margin-bottom: 5px; padding-left: 4px; padding-bottom: 3px; padding-top: 3px; width: 100%; }
@@ -175,13 +147,8 @@ table { border-collapse: collapse; }
 
 /* ---------------------------------------------------------------------- */
 
-.myopac_link { 
-	width: 12%; margin: 3px; padding: 3px; 
-	text-align: center; vertical-align: middle; 
-	border-bottom: 1px solid #808080; 
-	border: 1px solid #808080; }
-
-.myopac_link_active { background: #E0F0E0; font-weight: 700;}
+.myopac_link { width: 12%; margin: 3px; padding: 3px; text-align: center; vertical-align: middle;  }
+.myopac_link_active { font-weight: 700;}
 .myopac_table thead tr td { padding: 2px; font-weight: 500; border: 1px solid #808080;}
 .myopac_table td { padding: 3px; }
 .myopac_form_pic { width: 20px; height: 20px; }
@@ -204,11 +171,9 @@ table { border-collapse: collapse; }
 	padding: 6px;
 	border: 2px solid #E0E0E0;
 	font-weight: 600;
-	/*background: #F0F0F0;*/
 }
 
 .rdetail_extras_td { padding-right: 15px; padding-left: 15px; border-right: 1px solid #888; }
-.rdetail_extras_selected { background: #E0F0E0;} 
 .rdetails_extra_links { border: 1px solid #808080; padding-right: 5px; padding-left: 5px; }
 
 
diff --git a/Open-ILS/web/opac/skin/default/xml/advanced/advanced_global.xml b/Open-ILS/web/opac/skin/default/xml/advanced/advanced_global.xml
index 8ad8a0eb2d..b1aed85073 100644
--- a/Open-ILS/web/opac/skin/default/xml/advanced/advanced_global.xml
+++ b/Open-ILS/web/opac/skin/default/xml/advanced/advanced_global.xml
@@ -288,8 +288,10 @@
 
 	</tr>
 
-	<tr style='border: 2px solid #E0F0E0;'>
+	<tr class='border_4_2'>
 		<td colspan='2'><input type='submit' onclick='advSubmitGlobal();' value='&advanced.search.submit;'></input></td>
 	</tr>
 
 </table>
+
+
diff --git a/Open-ILS/web/opac/skin/default/xml/body.xml b/Open-ILS/web/opac/skin/default/xml/body.xml
index c295c157cb..98d7da7a24 100644
--- a/Open-ILS/web/opac/skin/default/xml/body.xml
+++ b/Open-ILS/web/opac/skin/default/xml/body.xml
@@ -10,7 +10,7 @@
 					<!--#include virtual="common/sidebar.xml"-->
 				</td>
 				<td id='main_right_cell'>
-					<div id='canvas' class='canvas'>
+					<div id='content' class=''>
 
 						<!--#if expr="$OILS_PAGE!='advanced.xml'"-->
 							<!--#include virtual="common/searchbar.xml"-->
diff --git a/Open-ILS/web/opac/skin/default/xml/common/altcanvas.xml b/Open-ILS/web/opac/skin/default/xml/common/altcanvas.xml
index 7ffdcc8e85..a9bf957535 100644
--- a/Open-ILS/web/opac/skin/default/xml/common/altcanvas.xml
+++ b/Open-ILS/web/opac/skin/default/xml/common/altcanvas.xml
@@ -28,7 +28,7 @@
 		<!-- #include virtual="cn_browse.xml"-->
 	<!--#endif-->
 
-	<div id='loading_alt' class='hide_me non_canvas' style='margin-top: 6px;'>
+	<div id='loading_alt' class='hide_me canvas' style='margin-top: 6px;'>
 		<div style='margin-top: 30px; margin-bottom: 30px; text-align: center; font-weight: 700;' class='color_3'>
 			<img src='../../../../images/progressbar_green.gif' style='margin: 5px;'> </img>
 		</div>
diff --git a/Open-ILS/web/opac/skin/default/xml/common/cn_browse.xml b/Open-ILS/web/opac/skin/default/xml/common/cn_browse.xml
index 363c9e0de6..2d0692a2ee 100644
--- a/Open-ILS/web/opac/skin/default/xml/common/cn_browse.xml
+++ b/Open-ILS/web/opac/skin/default/xml/common/cn_browse.xml
@@ -1,7 +1,3 @@
-<!--
-<div id='cn_browse' class='hide_me non_canvas cn_browser' 
-	style='width: 90%; text-align: center; padding: 15px;'>
-	-->
 <div id='cn_browse' class='hide_me cn_browser' 
 	style='width: 95%; text-align: center; padding: 15px;'>
 	<div id='cn_browse_loading'  class='cn_browse_loading hide_me'>&common.cn.loading;</div>
diff --git a/Open-ILS/web/opac/skin/default/xml/common/css_common.xml b/Open-ILS/web/opac/skin/default/xml/common/css_common.xml
index e7fc06cd63..adee673e9f 100644
--- a/Open-ILS/web/opac/skin/default/xml/common/css_common.xml
+++ b/Open-ILS/web/opac/skin/default/xml/common/css_common.xml
@@ -11,6 +11,9 @@
 <link type='text/css' rel="stylesheet" href="<!--#echo var='OILS_THEME_BASE'-->/default/css/colors.css"  
 	name='Default' csstype='color'/>
 
+<link type='text/css' rel="alternate stylesheet" title='&opac.style.reddish;' href="<!--#echo var='OILS_THEME_BASE'-->/reddish/css/colors.css"  
+	name='Default' csstype='color'/>
+
 <!-- OpenSearch auto discovery -->
 <link rel='search' 
 	 type="application/opensearchdescription+xml"
diff --git a/Open-ILS/web/opac/skin/default/xml/common/holds.xml b/Open-ILS/web/opac/skin/default/xml/common/holds.xml
index 288741e173..1b727f2203 100644
--- a/Open-ILS/web/opac/skin/default/xml/common/holds.xml
+++ b/Open-ILS/web/opac/skin/default/xml/common/holds.xml
@@ -1,6 +1,6 @@
 
 <div>
-	<div id='xulholds_box' class='hide_me non_canvas' style='margin-top: 6px;'>
+	<div id='xulholds_box' class='hide_me canvas' style='margin-top: 6px;'>
 		<center>
 			<table class='data_grid' style='margin-top: 20px;'>
 				<tbody>
@@ -19,13 +19,13 @@
 		</center>
 	</div>
 
-	<div id='check_holds_box' class='hide_me non_canvas' 
+	<div id='check_holds_box' class='hide_me canvas' 
 		style='margin-top: 6px; width: 100%; text-align: center'>
 		<br/><br/><br/>
 		<b>&common.hold.check;</b>
 	</div>
 
-	<div id='holds_box' class='hide_me non_canvas' style='margin-top: 6px;'>
+	<div id='holds_box' class='hide_me canvas' style='margin-top: 6px;'>
 	
 		<br/>
 		<table width='90%'>
diff --git a/Open-ILS/web/opac/skin/default/xml/common/login.xml b/Open-ILS/web/opac/skin/default/xml/common/login.xml
index 8cef67aa6d..197166f944 100644
--- a/Open-ILS/web/opac/skin/default/xml/common/login.xml
+++ b/Open-ILS/web/opac/skin/default/xml/common/login.xml
@@ -1,5 +1,5 @@
 
-<div id='login_box' class='hide_me non_canvas' style='margin-top: 6px;'>
+<div id='login_box' class='hide_me canvas' style='margin-top: 6px;'>
 
 	<script language='javascript'>
 		config.ids.login = {};
diff --git a/Open-ILS/web/opac/skin/default/xml/common/orgtree.xml b/Open-ILS/web/opac/skin/default/xml/common/orgtree.xml
index 7d71b3b3ec..d4008d3f68 100644
--- a/Open-ILS/web/opac/skin/default/xml/common/orgtree.xml
+++ b/Open-ILS/web/opac/skin/default/xml/common/orgtree.xml
@@ -1,6 +1,6 @@
 
 <!-- the org tree -->
-<div id='org_container' class='hide_me non_canvas'>
+<div id='org_container' class='hide_me canvas'>
 
 	<div id='org_link_container' class='color_1'>
 		<span class='org_link'>
diff --git a/Open-ILS/web/opac/skin/default/xml/common/sidebar.xml b/Open-ILS/web/opac/skin/default/xml/common/sidebar.xml
index f0d57f0689..8902d7c10f 100644
--- a/Open-ILS/web/opac/skin/default/xml/common/sidebar.xml
+++ b/Open-ILS/web/opac/skin/default/xml/common/sidebar.xml
@@ -37,7 +37,7 @@
 			<span>&navigate.loggedinas;<b id='username_dest'> </b></span>
 		</div>
 
-		<div id='sidebar_results_wrapper' class='hide_me'  style='border: 1px solid #A7EA9D;'>
+		<div id='sidebar_results_wrapper' class='hide_me border_1'>
 			<div title="&navigate.titleGroupResults;" 
 				id='mresult_link_div' class="side_bar_item hide_me">
 				<a id='sidebar_title_group_results'>&navigate.titleGroupResults;</a>
@@ -104,7 +104,7 @@
 		style='text-align:center; margin-top: 20px;'> 
 		<hr/>
 		<div id='adv_quick_search'>
-			<div class='adv_quick_search'><b>&sidebar.quick.search;</b></div>
+			<div class='adv_quick_search color_4'><b>&sidebar.quick.search;</b></div>
 			<div style='margin-top: 8px;'>
 				<table><tbody><tr>
 					<td>
@@ -132,8 +132,8 @@
 	<div id='adv_marc_search_sidebar' class='sidebar_chunk hide_me' 
 		style='text-align:center; margin-top: 20px;'> 
 		<hr/>
-		<div class='adv_quick_search'><b>&search.marc;</b></div>
-		<table style='margin: 3px; border: 3px solid #E0E0E0; width: 100%;' id='adv_sdbar_table'>
+		<div class='adv_quick_search color_4'><b>&search.marc;</b></div>
+		<table style='margin: 3px; width: 100%;' id='adv_sdbar_table' class='border_4_3'>
 			<tbody>
 				<tr>
 					<td>&search.marc.tag;</td>
diff --git a/Open-ILS/web/opac/skin/default/xml/home/homesearch.xml b/Open-ILS/web/opac/skin/default/xml/home/homesearch.xml
index 91bf24453e..c87fadb5ed 100644
--- a/Open-ILS/web/opac/skin/default/xml/home/homesearch.xml
+++ b/Open-ILS/web/opac/skin/default/xml/home/homesearch.xml
@@ -1,6 +1,6 @@
 
-<div id='canvas_main' 
-	style='border: 3px solid #A7EA9D; -moz-border-radius: 6px; padding: 6px; margin-top: 65px;' 
+<div id='canvas_main' class='home_search canvas'
+	style='-moz-border-radius: 6px; padding: 6px; margin-top: 65px;' 
 	xmlns="http://www.w3.org/1999/xhtml" xmlns:xi="http://www.w3.org/2001/XInclude">
 
 	<!-- load my js -->
@@ -38,13 +38,13 @@
 
 		<tbody>
 
-			<tr style='background: #E0F6E0'>
+			<tr class='color_3'>
 
 				<script language='javascript'>
 					config.ids.common.now_searching = 'now_searching_location';
 				</script>
 
-				<td style='padding: 6px; border: 1px solid #D0D0D0;' class='' align='center'>
+				<td style='padding: 6px;' class='border_5' align='center'>
 					<span>&opac.search.nowSearching;</span>
 					<span style='padding: 1px;' id='now_searching_location'>  </span>
 				</td>
@@ -54,7 +54,7 @@
 			<tr class='rowpad'><td></td></tr>
 
 			<tr>
-				<td nowrap='nowrap' align='center' style='border: 1px solid #D0D0D0;' class='color_1'>
+				<td nowrap='nowrap' align='center' class='color_1 border_5'>
 					<input id='search_box' style='width: 300px;' type='text' />
 					<span style='padding-left: 6px;'>
 						<input type='button' style='width: 40px;' id='search_submit' value='Go!' />
@@ -64,7 +64,7 @@
 
 			<tr class='rowpad'><td></td></tr>
 
-			<tr style='border: 1px solid #D0D0D0; background: #E0F6E0'>
+			<tr class='color_3 border_5'>
 
 				<td nowrap='nowrap' align='center' style='padding: 4px;'>
 
@@ -85,7 +85,7 @@
 
 			<tr class='rowpad'><td></td></tr>
 
-			<tr class='color_1' style='border: 1px solid #D0D0D0;'>
+			<tr class='color_1 border_5'>
 				<td align='center' style='padding: 4px; padding-bottom: 6px;'>
 					<span style='padding-right: 15px;'>
 						<a id='home_adv_search_link' href='javascript:void(0);'>&opac.navigate.advanced;</a></span>
diff --git a/Open-ILS/web/opac/skin/default/xml/page_advanced.xml b/Open-ILS/web/opac/skin/default/xml/page_advanced.xml
index 15ada7beb2..e2583afe71 100644
--- a/Open-ILS/web/opac/skin/default/xml/page_advanced.xml
+++ b/Open-ILS/web/opac/skin/default/xml/page_advanced.xml
@@ -1,4 +1,4 @@
-<div id='canvas_main' style='margin-top: 20px;'>
+<div id='canvas_main' class='canvas' style='margin-top: 20px;'>
 
 	<script language='javascript' src='../js/advanced.js'> </script>
 
diff --git a/Open-ILS/web/opac/skin/default/xml/page_cnbrowse.xml b/Open-ILS/web/opac/skin/default/xml/page_cnbrowse.xml
index 349d4d3ee3..c81598ec08 100644
--- a/Open-ILS/web/opac/skin/default/xml/page_cnbrowse.xml
+++ b/Open-ILS/web/opac/skin/default/xml/page_cnbrowse.xml
@@ -1,4 +1,4 @@
-<div id='canvas_main' style='margin-top: 20px;'>
+<div id='canvas_main' class='canvas' style='margin-top: 20px;'>
 	<script language='javascript' src='../js/cn_browse.js'> </script>
 	<!--#include virtual="common/cn_browse.xml"-->
 </div>
diff --git a/Open-ILS/web/opac/skin/default/xml/page_myopac.xml b/Open-ILS/web/opac/skin/default/xml/page_myopac.xml
index a8a807fc89..f973255cda 100644
--- a/Open-ILS/web/opac/skin/default/xml/page_myopac.xml
+++ b/Open-ILS/web/opac/skin/default/xml/page_myopac.xml
@@ -1,10 +1,10 @@
-<div id='canvas_main' class='hide_me'>
+<div id='canvas_main' class='canvas hide_me'>
 
 	<script language='javascript' src='../js/myopac.js'> </script>
     <script language='javascript' src='<!--#echo var="OILS_JS_BASE"-->/DP_DateExtensions.js'/>
 
 	<script> config.ids.altcanvas.myopac_reload = 'myopac_reloading'; </script>
-	<div id='myopac_reloading' class='hide_me non_canvas'> &common.loading; </div>
+	<div id='myopac_reloading' class='hide_me canvas'> &common.loading; </div>
 
 	<script language='javascript'>
 		config.ids.myopac = {};
@@ -17,48 +17,37 @@
 		<tbody>
 			<tr id='myopac_nav_row'>
 
-				<!--
-				<td width='1%' style='border-right: 1px solid #808080;'></td>
-				-->
-
-				<td class='myopac_link' id='myopac_summary_td' >
+				<td class='myopac_link border_6' id='myopac_summary_td' >
 					<a href='javascript:void(0);' 
 						onclick='myOPACChangePage("summary");'>&myopac.account;</a>
 				</td>
 
-				<td class='myopac_link' id='myopac_checked_td' >
+				<td class='myopac_link border_6' id='myopac_checked_td' >
 					<a href='javascript:void(0);' 
 						onclick='myOPACChangePage("checked");'>&myopac.checkouts;</a>
 				</td>
 
-				<td class='myopac_link' id='myopac_holds_td' >
+				<td class='myopac_link border_6' id='myopac_holds_td' >
 					<a href='javascript:void(0);' 
 						onclick='myOPACChangePage("holds");'>&myopac.holds;</a>
 				</td>
 
-				<td class='myopac_link' id='myopac_fines_td' >
+				<td class='myopac_link border_6' id='myopac_fines_td' >
 					<a href='javascript:void(0);' 
 						onclick='myOPACChangePage("fines");'>&myopac.fines;</a>
 				</td>
 
-				<td class='myopac_link' id='myopac_prefs_td' >
+				<td class='myopac_link border_6' id='myopac_prefs_td' >
 					<a href='javascript:void(0);' 
 						onclick='myOPACChangePage("prefs");'>&myopac.preferences;</a>
 				</td>
 
-				<td class='myopac_link' id='myopac_bookbag_td' nowrap='nowrap'>
-					<!--
-					<span><img src='../../../../images/bookbag.gif' style='width: 25px; height: 25px;'> </img></span>
-					-->
+				<td class='myopac_link border_6' id='myopac_bookbag_td' nowrap='nowrap'>
 					<a href='javascript:void(0);' 
 						onclick='myOPACChangePage("bookbag");'>&myopac.bookbags;</a>
 
 				</td>
 
-				<!--
-				<td width='1%' style='border-left: 1px solid #808080;'></td>
-				-->
-
 			</tr>
 		</tbody>
 	</table>
diff --git a/Open-ILS/web/opac/skin/default/xml/page_rdetail.xml b/Open-ILS/web/opac/skin/default/xml/page_rdetail.xml
index 479a296c2a..76906231c0 100644
--- a/Open-ILS/web/opac/skin/default/xml/page_rdetail.xml
+++ b/Open-ILS/web/opac/skin/default/xml/page_rdetail.xml
@@ -1,4 +1,4 @@
-<div id='canvas_main'>
+<div id='canvas_main' class='canvas'>
 
 	<script language='javascript' src='../js/sidebar_extras.js'> </script>
 	<script language='javascript' src='../js/result_common.js'> </script>
@@ -16,7 +16,7 @@
 
 	<table width='100%' id='np_table' class='hide_me' style='margin-top: 3px;'>
 		<tbody>
-			<tr style='height: 1em; background: #E0F6E0'>
+			<tr class='color_4' style='height: 1em;'>
 				<td style='vertical-align: top;'>
 
 					<span>
@@ -69,8 +69,8 @@
 		</tbody>
 	</table>
 
-	<div style='font-weight: bold; padding: 5px; margin: 5px; background: #E0F0E0; width: 100%;' 
-		class='hide_me' id='rdetail_deleted_exp'>
+	<div style='font-weight: bold; padding: 5px; margin: 5px; width: 100%;' 
+		class='hide_me color_4' id='rdetail_deleted_exp'>
 		&rdetail.record.deleted;
 	</div>
 
diff --git a/Open-ILS/web/opac/skin/default/xml/rdetail/rdetail_altcanvas.xml b/Open-ILS/web/opac/skin/default/xml/rdetail/rdetail_altcanvas.xml
index 00f0caff6c..79babf847a 100644
--- a/Open-ILS/web/opac/skin/default/xml/rdetail/rdetail_altcanvas.xml
+++ b/Open-ILS/web/opac/skin/default/xml/rdetail/rdetail_altcanvas.xml
@@ -10,7 +10,7 @@
 		config.ids.rdetail.view_marc_box = "rdetail_view_marc_box";
 	</script>
 
-	<div class='hide_me non_canvas' id='view_marc_div'> 
+	<div class='hide_me canvas' id='view_marc_div'> 
 		<div>
 			<table width='100%'><tbody><tr>
 				<td class='color_1' align='left' style='padding-left: 7px;text-decoration: underline;'>
diff --git a/Open-ILS/web/opac/skin/default/xml/result/result_common.xml b/Open-ILS/web/opac/skin/default/xml/result/result_common.xml
index 7bdf1adebd..e1ac2e24b8 100644
--- a/Open-ILS/web/opac/skin/default/xml/result/result_common.xml
+++ b/Open-ILS/web/opac/skin/default/xml/result/result_common.xml
@@ -1,5 +1,5 @@
 
-<div id='canvas_main' xmlns:xi="http://www.w3.org/2001/XInclude" >
+<div id='canvas_main' class='canvas' xmlns:xi="http://www.w3.org/2001/XInclude" >
 
 	<script language='javascript'>
 		config.ids.result = {};
diff --git a/Open-ILS/web/opac/skin/default/xml/result/result_info.xml b/Open-ILS/web/opac/skin/default/xml/result/result_info.xml
index 8b7b3de49c..24c5219845 100644
--- a/Open-ILS/web/opac/skin/default/xml/result/result_info.xml
+++ b/Open-ILS/web/opac/skin/default/xml/result/result_info.xml
@@ -1,7 +1,7 @@
 <table style='width: 100%;'>
 	<tbody>
 
-		<tr style='height: 1em; background: #E0F6E0'>
+		<tr class='color_4' style='height: 1em;'>
 
 			<td style='vertical-align: top;'  id='next_prev_links'>
 
diff --git a/Open-ILS/web/opac/skin/default/xml/result/result_table.xml b/Open-ILS/web/opac/skin/default/xml/result/result_table.xml
index eb52a11222..4e91797218 100644
--- a/Open-ILS/web/opac/skin/default/xml/result/result_table.xml
+++ b/Open-ILS/web/opac/skin/default/xml/result/result_table.xml
@@ -141,7 +141,7 @@
    <table style='width: 100%; margin-top: 12px;' id='result_info_2' class='hide_me'>
       <tbody>
                
-	      <tr style='height: 1em; background: #E0F6E0'>
+	      <tr class='color_4' style='height: 1em;'>
                      
 	         <td style='vertical-align: top;'  id='next_prev_links2'>
                         
diff --git a/Open-ILS/web/opac/theme/default/css/colors.css b/Open-ILS/web/opac/theme/default/css/colors.css
index fa1a3d0a8f..68162fc201 100644
--- a/Open-ILS/web/opac/theme/default/css/colors.css
+++ b/Open-ILS/web/opac/theme/default/css/colors.css
@@ -2,14 +2,76 @@ body a			{ color: black; text-decoration: none;}
 body a:visited { color: black; text-decoration: none;}
 body a:hover	{ color: red; text-decoration: underline;}
 
+
+/* the idea is to have 4 complimentary colors that 
+ * are used throughout the opac.  Edit those colors
+ * in this file
+ */
+ 
 .color_1 { background: #A7EA9D; color: #000000; }
 .color_2 { background: #64EA4F; color: #000000; }
-.color_3 { background: #CCFFFF; color: #000000; }
+.color_3 { background: #E0F6E0; color: #000000; }
 .color_4 { background: #E0F0E0; color: #000000; }
-.color_border1 { }
+
+.border_1 { border: 1px solid #A7EA9D; }
+.border_2 { border: 1px solid #64EA4F; }
+.border_3 { border: 1px solid #E0F6E0; }
+.border_4 { border: 1px solid #E0F0E0; }
+
+.border_1_2 { border: 2px solid #A7EA9D; }
+.border_2_2 { border: 2px solid #64EA4F; }
+.border_3_2 { border: 2px solid #E0F6E0; }
+.border_4_2 { border: 2px solid #E0F0E0; }
+
+.border_1_3 { border: 3px solid #A7EA9D; }
+.border_2_3 { border: 3px solid #64EA4F; }
+.border_3_3 { border: 3px solid #E0F6E0; }
+.border_4_3 { border: 3px solid #E0F0E0; }
+
+
+
+
+/* general purpose light borders */
+.border_5 { border: 1px solid #D0D0D0; }
+.border_6 { border: 1px solid #808080; }
+
+input:focus { background: #E0F0E0; color: #000000;}
+a:focus { background: #E0F0E0; color: #000000;}
+
 
 /* ---------------------------------------------------------------------- */
-.sidebar_chunk {}
+
+.canvas { /* main content div for each page */
+    border-left: 3px solid #A7EA9D;
+    border-bottom: 3px solid #A7EA9D;
+	border-top: 3px solid #A7EA9D;
+}
+
+/* border around home search box */
+.home_search { border: 3px solid #A7EA9D; }
+
+/* main nav sidebar */
+.sidebar_item_active { background: #A7EA9D; }
+
+/* record detail summary block */
+.rdetail_desc { border: 1px solid #A7EA9D; }
+.rdetail_item { border: 1px solid #A7EA9D; }
+.rdetail_extras_selected { background: #E0F0E0;} 
+
+
+.data_grid thead tr { background: #E0F0E0; color: #000000; }
+.data_grid thead td { border: 1px solid #808080; }
+.data_grid tbody td { border: 1px solid #E0F6E0; }
+.data_grid_nb thead tr { background: #E0F0E0; color: #000000; }
+.data_grid_nb thead td { border: none; }
+.data_grid_nb tbody td { border: none; }
+
+.light_border { border: 1px solid #E0F6E0; }
+
+.adv_quick_search_submit { border-bottom: 3px solid #E0F6E0;}
+
+.myopac_link_active { background: #E0F6E0; }
+
 .sidebar_extra_link { text-decoration: none; }
 #searchbar_tag_on { color: red; }
 .searchbar_item { color: black; } 
@@ -24,17 +86,9 @@ body a:hover	{ color: red; text-decoration: underline;}
 .copy_count_cell { border-right: 1px solid #E0E0E0; } 
 .copy_count_div {	border-left: 2px solid #E0F6E0; border-right: 2px solid #E0F6E0; }
 
-.rdetail_desc { border: 1px solid #A7EA9D; }
-.rdetail_item { border: 1px solid #A7EA9D; }
 #rdetail_image_cell { border: 1px solid white; border-right: 1px solid #A7EA9D;}
-.rdetail_header {  }
 
 
-.sidebar_item_active { background: #A7EA9D; }
 
-#canvas_main { border-left: 3px solid #A7EA9D; border-bottom: 3px solid #A7EA9D; 
-	border-top: 3px solid #A7EA9D;  }
 
-.non_canvas {  border-left: 3px solid #A7EA9D; border-top: 3px solid #A7EA9D; 
-	border-bottom: 3px solid #A7EA9D; }
 
diff --git a/Open-ILS/web/opac/theme/reddish/css/colors.css b/Open-ILS/web/opac/theme/reddish/css/colors.css
new file mode 100644
index 0000000000..7c49125116
--- /dev/null
+++ b/Open-ILS/web/opac/theme/reddish/css/colors.css
@@ -0,0 +1,96 @@
+body a			{ color: black; text-decoration: none;}
+body a:visited { color: black; text-decoration: none;}
+body a:hover	{ color: red; text-decoration: underline;}
+
+
+/*
+.color_1 { background: #A7EA9D; color: #000000; }
+.color_2 { background: #64EA4F; color: #000000; }
+.color_3 { background: #CCFFFF; color: #000000; }
+.color_4 { background: #E0F0E0; color: #000000; } E0F6EO?
+*/
+
+.color_1 { background: #FF8000; color: #000000; }
+.color_2 { background: #B35A00; color: #000000; }
+.color_3 { background: #FFDFBF; color: #000000; }
+.color_4 { background: #FFC080; color: #000000; }
+
+.border_1 { border: 1px solid #FF8000; }
+.border_2 { border: 1px solid #B35A00; }
+.border_3 { border: 1px solid #FFDFBF; }
+.border_4 { border: 1px solid #FFC080; }
+
+.border_1_2 { border: 2px solid #FF8000; }
+.border_2_2 { border: 2px solid #B35A00; }
+.border_3_2 { border: 2px solid #FFDFBF; }
+.border_4_2 { border: 2px solid #FFC080; }
+
+.border_1_3 { border: 3px solid #FF8000; }
+.border_2_3 { border: 3px solid #B35A00; }
+.border_3_3 { border: 3px solid #FFDFBF; }
+.border_4_3 { border: 3px solid #FFC080; }
+
+
+
+
+/* general purpose light borders */
+.border_5 { border: 1px solid #D0D0D0; }
+.border_6 { border: 1px solid #808080; }
+
+input:focus { background: #FFDFBF; color: #000000;}
+a:focus { background: #FFDFBF; color: #000000;}
+
+
+/* ---------------------------------------------------------------------- */
+
+.canvas { /* main content div for each page */
+    border-left: 3px solid #FF8000;
+    border-bottom: 3px solid #FF8000;
+	border-top: 3px solid #FF8000;
+}
+
+/* border around home search box */
+.home_search { border: 3px solid #FF8000; }
+
+/* main nav sidebar */
+.sidebar_item_active { background: #FF8000; }
+
+/* record detail summary block */
+.rdetail_desc { border: 1px solid #FF8000; }
+.rdetail_item { border: 1px solid #FF8000; }
+.rdetail_extras_selected { background: #FFC080;} 
+
+
+.data_grid thead tr { background: #FFC080; color: #000000; }
+.data_grid thead td { border: 1px solid #808080; }
+.data_grid tbody td { border: 1px solid #FFDFBF; }
+.data_grid_nb thead tr { background: #FFC080; color: #000000; }
+.data_grid_nb thead td { border: none; }
+.data_grid_nb tbody td { border: none; }
+
+.light_border { border: 1px solid #FFDFBF; }
+
+.adv_quick_search_submit { border-bottom: 3px solid #FFDFBF;}
+
+.myopac_link_active { background: #FFDFBF; }
+
+.sidebar_extra_link { text-decoration: none; }
+#searchbar_tag_on { color: red; }
+.searchbar_item { color: black; } 
+#login_box { border-top: 1px solid #808080; border-bottom: 1px solid #808080; }
+#next_prev_links_dead { color: #808080; text-decoration: none; }
+
+.nav_link_active {font-weight: bold;}
+
+.search_link { text-decoration: none; }
+.result_table_subtable { border-top: 1px solid #E0E0E0; }
+
+.copy_count_cell { border-right: 1px solid #E0E0E0; } 
+.copy_count_div {	border-left: 2px solid #E0F6E0; border-right: 2px solid #E0F6E0; }
+
+#rdetail_image_cell { border: 1px solid white; border-right: 1px solid #A7EA9D;}
+
+
+
+
+
-- 
2.11.0