umlaut 3.0.0alpha1

data/app/assets/javascripts/umlaut/ajax_windows.js

@@ -0,0 +1,35 @@
+/* ajax_windows.js.  Support for modal popup windows in Umlaut items. */
+jQuery(document).ready(function($) {
+   
+    var shared_modal_d = $("<div></div>").dialog({autoOpen: false, modal: true, width: "400px"}) ;
+
+    $("a.ajax_window").live("click", function(event) {                
+        
+        $(shared_modal_d).load(  this.href, function() {
+            var heading = shared_modal_d.find("h1, h2, h3, h4, h5, h6").eq(0).remove();
+            $(shared_modal_d).dialog("option", "title", heading.text());
+            $(shared_modal_d).dialog("open");
+        });
+        return false;
+    });
+    
+    function ajax_form_catch(event) {
+        $(shared_modal_d).load( $(event.target).closest("form").attr("action"), $(event.target).closest("form").serialize(), function() {
+           var heading = shared_modal_d.find("h1, h2, h3, h4, h5, h6").eq(0).remove();
+           $(shared_modal_d).dialog("option", "title", heading.text());
+           $(shared_modal_d).dialog("open");
+           
+        });
+        return false;
+    }
+    
+    //Trapping two events, click on the submit button or submit on the form
+    //is strangely needed in IE7 to trap both return-in-field submits
+    //and click-on-button submits. In FF just the second "submit" version
+    //is sufficient. 
+    $("form.modal_dialog_form input[type=submit]").live("click", ajax_form_catch );    
+    $("form.modal_dialog_form").live( "submit", ajax_form_catch);
+    
+
+    
+});

data/app/assets/javascripts/umlaut/ensure_window_size.js.erb

@@ -0,0 +1,34 @@
+// Some code to re-size our window to config defined minimum height/width
+//     We have little control over what size a content provider generates a
+//     window for a link resolver. Often it's too small. So we resize in
+//     js.
+
+// Some browsers won't let us resize the window though. Oh well, we try. 
+// Those that wont' let us just silently no-op. 
+
+jQuery(document).ready(function($) {    
+  var min_width = <%= UmlautController.umlaut_config.lookup!('minimum_window_width', 0).to_i %>;
+  var min_height = <%= UmlautController.umlaut_config.lookup!('minimum_window_height', 0).to_i %>;
+
+  // Default to something huge, so if we fail in getting dimensions,
+  // we won't resize. 
+  var orig_width = 100000; 
+  var orig_height = 100000;
+  
+  // JQuery document viewport width/height 
+  
+  orig_width = $(window).width();
+  orig_height = $(window).height();
+  
+  
+  
+  width_diff = min_width - orig_width;
+  height_diff = min_height - orig_height;
+  
+  if (width_diff < 0) { width_diff = 0 }
+  if (height_diff < 0) { height_diff = 0 }
+  
+  if (width_diff >0 || height_diff > 0) {
+    window.resizeBy(width_diff, height_diff)
+  }
+});

data/app/assets/javascripts/umlaut/expand_contract_toggle.js

@@ -0,0 +1,25 @@
+/* expand_contract_toggle.js: Support for show more/hide more in lists of umlaut content. */
+jQuery(document).ready(function($) {
+   
+    $(".expand_contract_toggle").live("click", function() {
+        var content = $(this).next(".expand_contract_content");
+        var icon = $(this).parent().find('img.toggle_icon');
+        
+        if (content.is(":visible")) {                    
+          icon.attr("src", icon.attr("src").replace("list_open.png", "list_closed.png"));
+          $(this).find(".expand_contract_action_label").text("Show ");
+          
+          content.hide();
+          
+        }
+        else {                    
+          icon.attr("src", icon.attr("src").replace("list_closed.png", "list_open.png"));
+          $(this).find(".expand_contract_action_label").text("Hide ");
+          content.show();
+        }
+        
+        return false;
+    });
+    
+    
+});

data/app/assets/javascripts/umlaut/search_autocomplete.js

@@ -0,0 +1,46 @@
+/* search_autocomplete.js.  Add autocomplete to Umlaut journal title search. */
+jQuery(document).ready(function($) {
+    
+    $("form.OpenURL").live("submit", function() {
+       var form = $(this);
+       if ( form.find(".rft_title").val() != $(this).val()) {
+          form.find(".rft_object_id").val("");
+          form.find(".rft_title").val("");
+       }
+    });
+    
+  $("input.title_search").autocomplete({
+            minLength: 3,
+            source: function(request, response) {              
+              var form = $(this.element).closest("form");
+              $.ajax({
+                  url: form.attr("action").replace("journal_search", "auto_complete_for_journal_title"),
+                  dataType: "json",
+                  data: form.serialize(),
+                  success: function(data) {
+                    response($.map(data, function(item) {
+                      return {
+                        label: item.title,
+                        id: item.object_id
+                      }
+                    }));
+                  }
+              });
+            },
+            select: function(event, ui) {
+              var form = $(event.target).closest("form");
+              
+              form.find("input.rft_object_id").val(ui.item.id);
+              form.find("input.rft_title").val( ui.item.label );
+              form.find("select.sfx_title_search").val("exact");
+            }
+          });
+  
+});
+
+
+/*					select: function(event, ui) {
+						log(ui.item ? ("Selected: " + ui.item.value + ", geonameId: " + ui.item.id) : "Nothing selected, input was " + this.value);
+					}
+				});
+*/

data/app/assets/javascripts/umlaut/simple_visible_toggle.js

@@ -0,0 +1,8 @@
+/* simple_visible_toggle.js.  Used for toggling visibility of error information. Can possibly be combined with more powerful expand_contract_toggle.js */
+jQuery(document).ready(function($) {
+   
+    $("a.simple_visible_toggle").live("click", function() {
+       $(this).next().toggle(); 
+    });
+    
+});

data/app/assets/javascripts/umlaut/update_html.js

@@ -0,0 +1,152 @@
+/* update_html.js:  Provide functions to update content on page with background responses from Umlaut. Used by Umlaut itself, as well as by third party callers.*/
+(function($) {
+   
+    function SectionTarget(config) {
+       //Add properties from config to ourself
+       $.extend(this, config);
+       
+       //Defaults
+       if (this.selector == undefined)
+         this.selector = "#" + this.umlaut_section_id;
+       if (this.position == undefined)
+         this.position = "html";
+              
+    }
+    //Callback default to no-op function please.    
+    var noop = function() {};
+    SectionTarget.prototype.before_update = noop;
+    SectionTarget.prototype.after_update = noop;
+    SectionTarget.prototype.complete = noop;
+    
+    SectionTarget.prototype.ensure_placement_destination = function() {
+        if ( this.selector == undefined) {
+          return null; 
+        }
+        
+        //Already have it cached?
+        if ( this.host_div_element ) {
+          return this.host_div_element;
+        }                        
+        
+        var new_div = $('<div class="umlaut" style="display:none"></div>');        
+        // Find the first thing matched by selector, and call the
+        // method specified in "action" string on it, giving it our
+        // HTML to replace. This works because our actions are
+        // all arguments that will take one method: html, before, after, append,
+        // prepend.                       
+        $(this.selector).eq(0)[ this.position  ]( new_div );
+        
+        //Cache for later
+        this.host_div_element = new_div;
+        return this.host_div_element;
+      };
+    
+
+  // Define an object constructor on the global window object
+  // For our UmlautHtmlUpdater object. 
+  function HtmlUpdater(umlaut_base, context_object) {
+    if (context_object == undefined)
+      context_object = "";      
+    
+    umlaut_base = umlaut_base.replace(/\/$/,'');
+    this.umlaut_uri =  umlaut_base + '/resolve/partial_html_sections?umlaut.response_format=json&' + context_object;
+        
+    this.section_targets = [];
+           
+    this.add_section_target = function(config) {
+      this.section_targets.push( new SectionTarget(config) ); 
+    };
+    
+    //default no-op call-backs
+    this.complete = function() {};
+    
+    //Code for seeing if a URI is same origin or not borrowed from jQuery
+    this.is_remote_url = function(url) {
+      var regexp = /^(\w+:)?\/\/([^\/?#]+)/;
+      var parts = regexp.exec( url );
+      return (parts && (parts[1] && parts[1] !== location.protocol || parts[2] !== location.host));
+    }
+    
+    this.update = function() {
+      // Need to capture because we won't have 'this' inside the ajax
+      // success handler. 
+      var myself = this;       
+      var dataType = this.is_remote_url( this.umlaut_uri ) ? "jsonp" : "json";
+       $.ajax({
+             url: myself.umlaut_uri,
+             dataType: dataType,
+             jsonp: "umlaut.jsonp",
+             error: function() {
+               $.error("Problem loading background elements.");
+             },
+             success: function(umlaut_response) {
+              for (var i = 0; i < myself.section_targets.length; i++) {
+                  var section_target = myself.section_targets[i];                                
+                 
+                  var umlaut_html_section = myself.find_umlaut_response_section(umlaut_response, section_target.umlaut_section_id);
+                                    
+                  if (umlaut_html_section == undefined) {
+                    continue;
+                  }                  
+                  var count = null;
+                  if (typeof umlaut_html_section.response_count != "undefined") { 
+                    count = parseInt(umlaut_html_section.response_count.value);
+                  }
+                  var existing_element = section_target.ensure_placement_destination();
+                  var new_element = $('<div class="umlaut" style="display:none" class="' + section_target.umlaut_section_id +'"></div>');
+                  new_element.html(umlaut_html_section.html_content);
+
+                  
+                  var should_continue = section_target.before_update(new_element, count, section_target);
+                                    
+                  if (should_continue != false) {                    
+                    existing_element.replaceWith(new_element);
+                    
+                    section_target.host_div_element = new_element;
+
+                    new_element.show();
+                  
+                    section_target.after_update(new_element, count, section_target)                                        
+                    
+                  }
+               }
+               
+               //Do we need to update again?
+               if (umlaut_response.partial_html_sections.in_progress) {   
+                  //Fix our update URI to be the one umlaut suggests
+                  //Except strip out the umlaut.jsonp parameter, jquery is
+                  //going to add that back in as desired. 
+                  myself.umlaut_uri = 
+                    umlaut_response.partial_html_sections.in_progress.refresh_url.replace(/[?;&]umlaut\.jsonp=[^;&]+/, '');
+                  
+                  
+                  var refresh_seconds = 
+                    umlaut_response.partial_html_sections.in_progress.requested_wait_seconds;
+                  window.setTimeout(function() { myself.update();  }, refresh_seconds * 1000); 
+                  
+               } else {
+                 myself.complete();
+                 for (var i = 0; i < myself.section_targets.length; i++) {
+                   var section_target = myself.section_targets[i];
+                   section_target.complete(section_target);
+                 }
+               }
+               
+             }
+       });
+    };
+    this.find_umlaut_response_section = function(response, id) {
+      return $.grep(response.partial_html_sections.html_section, function(section) {
+        return section.id == id;
+      })[0];
+    };
+    
+  };
+  
+  //Put it in a global object, leave space for other things in "Umlaut" later.
+  if (window.Umlaut == undefined)
+    window.Umlaut = new Object();
+  window.Umlaut.HtmlUpdater = HtmlUpdater; 
+  
+})(jQuery);
+

data/app/assets/javascripts/umlaut.js

@@ -0,0 +1,17 @@
+// This is a manifest file that'll be compiled into including all
+// umlaut files. It can be included in a rails application.js manifest
+// as:
+//         require 'umlaut'
+// to include all umlaut js.  
+
+
+// jquery and jquery-ui are required for umlaut, it's okay
+// if the manifest chain ends up 'require'ing twice because
+// it's mentioned in local manifest, sprockets is smart enough. 
+//= require jquery
+//= require jquery-ui
+
+// Require all js files inside the 'umlaut' subdir next to this file.  
+//= require_tree './umlaut'
+
+

data/app/assets/stylesheets/umlaut.css

@@ -0,0 +1,857 @@
+/* TODO: Clean up this CSS a LOT to make it easier for local apps to
+ * selectively override. Quite likely turn it into one or more sass-ified .scss
+ * in ./umlaut, with "umlaut.css" being a manifest file that includes
+ * them in a way that can be over-ridden. See Blacklight. 
+ */
+
+/*********************/
+/* GENERAL RESET CSS */
+/*********************/
+
+html, body, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, fieldset{
+	margin: 0;
+	padding: 0;
+	border: 0;
+}
+
+body {
+ font-size:12px;
+}
+
+/* Not sure why we're forcing scroll bars, but that's what this
+   does */
+/* hide from IE mac \*/
+html {
+    min-height: 100%;
+    margin-bottom: 1px;
+}
+/* end hiding from IE5 mac */
+/* But on some pages, we definitely do NOT want to force
+   vertical scroll bar */
+html.noscroll {
+  margin-bottom: 0;
+  min-height: auto;
+  /* Make IE7 hide that annoying grayed out scrollbar, when we REALLY
+     don't want a scrollbar */
+  overflow: auto;
+}
+body {
+	font-family: Verdana, Arial, Helvetica, sans-serif;
+}
+ul { 
+	list-style-type: none;
+}
+h1 {
+	font-size: 1.5em;
+	font-style:italic;
+	font-weight:bold;
+	margin-bottom:1em;
+}
+h2 {
+	font-size: 1.25em;
+	font-weight:bold;
+	margin-bottom:0.8em;
+}
+h3 {
+	font-size: 1em;
+	font-weight:bold;
+	margin-bottom:0.7em;
+}
+h4 {
+	font-size: 1em;
+	font-weight:bold;
+  margin-bottom: 0.125em;
+}
+
+/********************/
+/* PAGE LAYOUT      */
+/********************/
+
+.container {
+	width: 780px;
+	position: relative;
+	margin-top: 10px;
+	margin-bottom: 10px;
+	margin-left: auto;
+  margin-right: auto;
+	padding:0;
+	display: block; 
+  border: 1px solid #eeb211;
+  background-color: #FFFDEA;
+}
+
+.main_column {
+	width: 545px;
+	padding: 10px;
+	margin:0;
+	float: left;
+	font-size:12px;
+  background-color: #FFFDEA;
+}
+
+.main_column ol, .main_column ul{
+	margin-left: 20px;
+}
+
+.sidebar {
+  background-color: #FCF1D4;
+	margin-left:575px;
+	padding-top: 4em;
+  padding-bottom: 2em;
+  font-size:90%;
+  /* For reasons I can not explain, giving this thing a border
+     with the same color as it's bg keeps IE7 happier; without the
+     border, IE7 doesn't really display the div right. */
+  border: 1px solid #FCF1D4;
+}
+
+.headerStatusBar {
+  border-bottom: 1px solid #eeb211;
+  background-color: #FCF1D4;
+  padding: .25em; 
+}
+.header {
+  background-color: #FFFDEA;
+  padding: 5px 10px;
+  border-bottom: 1px solid #eeb211;
+}
+
+.footer {
+  clear: both;
+  font-size: 80%;
+  border-top: 1px solid #eeb211;
+  padding: 10px;
+}
+
+
+.umlaut_resolve {
+  font-size: 12px;
+  /* for reasons not clear, IE7 started freaking out if this bg color
+     was there. Shouldn't be neccesary anyway, it was overkill. */
+  /*background-color: #FFFDEA;*/
+}
+
+.umlaut_resolve a {
+  text-decoration: none;
+  font-weight: bold;
+  color: #0066CC
+}
+
+.umlaut_resolve a:hover {
+  color: #EEB211;
+}
+
+/* used on search screen */
+.oneColumn {
+  padding: 10px;
+}
+
+/****************************************************/
+/* Styles for individual section boxes, and parent  */ 
+/* areas, on resolve screen.                        */
+/****************************************************/
+
+.main_response_list {
+  margin: 10px 0 10px 30px;
+}
+
+.main_response_list .umlaut_section {
+  padding: .125em .25em;
+  margin-top: 1.25em;
+  margin-bottom: .5em;
+}
+
+.resource_info {
+	font-size:11px;
+	padding: 2px;
+}	
+
+.resource_info_sections .umlaut_section {
+  margin-top: 12px;
+  margin-bottom: 4px;
+  padding-top: 6px;
+  padding-left: 4px;
+  margin-left: 8px;
+}
+
+.sidebar .umlaut_section {
+	/*border:1px solid #e9e9e9;*/
+	margin: .5em 1em .75em .5em;
+	padding: 0.5em;
+}
+
+.umlaut_section .response_list {
+  margin-left:20px;
+	line-height:110%;
+}
+
+.sidebar .umlaut_section .response_list {
+  margin-left:10px;
+}
+
+
+.response_list .response_item  {
+  padding-bottom: 5px;
+}
+
+/*******************************/
+/* Standard inteface devices      */
+/*******************************/
+
+.background_progress_spinner {
+  line-height: 1.5em;
+  color: gray;
+}
+
+.background_progress_spinner img {
+  vertical-align: bottom;
+}
+
+.main_response_list .background_progress_spinner {
+  padding-left: 18px; 
+}
+
+.sidebar .background_progress_spinner {
+  padding-left: 10px; 
+}
+
+.resource_info .background_progress_spinner { 
+  padding-left: 24px;
+  padding-top: 8px;
+}
+
+.pagination {
+    border: 1px solid #e9e9e9;
+    font-size: 125%;
+    margin-top: .75em;
+    margin-bottom: .75em;
+    padding: .25em;
+}
+
+.expand_contract_toggle {
+  margin-top: 4px;
+  margin-bottom: 4px;
+  margin-left: -18px;
+}
+
+/* IE-only, IE doesn't like our negative margin
+   inside a table. Use that crazy '*' so only IE will see it. */
+table .expand_contract_toggle {
+  *margin-left: 0;
+}
+
+
+
+.section_subheading {
+  margin-top: .75em;
+  margin-bottom: .75em;
+}
+
+.expand_contract_content {
+  margin-top: 0.5em;
+}
+
+div.expand_contract_section {
+  margin-top: 0.25em;
+}
+
+li.expand_contract_section {
+  margin: 0;
+  padding: 0;
+  background: none;
+}
+
+
+
+img.toggle_icon {
+  border: none;
+  vertical-align: middle;
+  margin-right: 2px;
+}
+
+
+/******************************/
+/* Errors and notices         */
+/******************************/
+
+.formError {
+	font-weight: bold;
+	color: #EA0000;
+	font-style: italic;
+  margin-top: 1em;
+  margin-bottom: 1em;
+}
+
+.error {
+	color:#CC0000;
+	font-size:14px;
+	font-weight:bold;
+}
+
+.notice {
+  background-color: #FCF1D4;
+}
+
+.heading img {
+  float: left;
+}
+
+
+/****************************************/
+/* Special looks for particular sections */
+/****************************************/
+
+.umlaut_section.fulltext .response_list {
+  margin-left: 4px;
+}
+.umlaut_section.fulltext .response_item  {
+  background: url(famfamfam/page_text.gif) no-repeat 0px 0px;
+  padding: 0px 18px 8px 22px;
+}
+
+.umlaut_section.fulltext .expand_contract_toggle,
+.umlaut_section.audio .expand_contract_toggle,
+.umlaut_section.excerpts .expand_contract_toggle {
+  margin-left: 8px; 
+}
+
+
+.umlaut_section.audio .response_item {
+  background: url(famfamfam/page_sound.gif) no-repeat 0px 0px;
+  padding: 0px 18px 8px 22px;
+}
+
+.sidebar .umlaut_section.coins {
+  border: none; 
+}
+
+.umlaut_section.excerpts .response_item  {
+  background:  url(famfamfam/book_open.png) no-repeat 0px 0px;
+  padding: 0px 18px 8px 22px;
+}
+
+
+#service_errors_content {
+  background-color: white;
+  padding: 5px;
+  margin: 6px;
+  border: 1px solid #E9E9E9;
+}
+
+#service_errors_content li {
+  margin-bottom: 0.5em;
+}
+
+.sidebar .umlaut_section.help {
+  background-color: #FFFDEA;
+  border:1px solid #e9e9e9;
+  padding: 0.5em;
+  padding-bottom: 10px;
+}
+
+#helpicon {
+  font-size: 45px;
+  font-weight: bold;
+  float: left;
+  background-color: #FCF1D4;
+  margin-right: 12px;
+  padding-right: 6px;
+  padding-left: 6px;
+}
+
+.error_icon {
+  font-size: 22px;
+  font-weight: bold;
+  float: left;
+  background-color: #FFFF66;
+  color: 	#CC3333;
+  margin-right: 4px;
+}
+
+.content {
+  font-size: 12px;
+  padding: 10px;
+}
+
+
+.holding_heading_row {
+  border-top: 1px solid #E9E9E9; 
+  padding-right: 18px;
+  padding-top: 4px;
+  padding-bottom: 0px;
+}
+.holding tr:first-child > td.holding_heading_row {
+  border-top: none;
+  padding-top: 0px;
+}
+
+
+/*******************************************/
+/*  Little semantic pieces on resolve page */
+/*******************************************/
+
+.highlighted_section {
+  background-color: white;
+  border: 1px solid #e9e9e9;
+  margin: -1px;
+  padding: 4px;  
+}
+
+.link_source {
+  color: gray;
+  padding-left: 10px;
+  margin-top: .25em;
+}
+
+.response_notes {
+   margin-top: .5em;
+}
+
+.sidebar .response_notes {
+  margin-left: 10px;
+}
+
+.available {
+	color: #00CC33;
+	font-style: italic;
+	font-size: 12px;
+}
+
+.notAvailable {
+	color: #FF0000;
+	font-style: italic;
+	font-size:12px;
+}
+.fulltext .notAvailable {
+  margin-left: 16px;
+  padding-left: 0;
+}
+
+.section_prompt {
+  font-style: italic;
+  margin-left: 22px;
+  margin-bottom: 8px;
+}
+
+.response_coverage_statement {
+  margin-bottom: .5em;
+  margin-top: .25em;
+}
+
+.edition_warning {
+   color: gray;
+   margin-top: 6px;
+   margin-bottom: 6px;
+}
+
+.edition_warning > .label {
+  font-style: normal;
+  font-weight: bold;
+}
+
+.debug_info {
+  margin-top: 5px;
+  margin-bottom: 5px;
+  padding: 4px;
+  background-color: #FCF1D4;
+  overflow: auto;
+}
+
+
+ /* For disabled inline text  */
+.grayedOut {
+  color: #999999;
+  text-decoration:  none;
+}
+
+/*************************************/
+/* hacky presentation-related markup */
+/*************************************/
+
+.clear {
+  clear: both;
+}
+
+hr {
+  border: 0;
+  height: 1px;
+  color: #E9E9E9;  
+}
+
+.line {
+	width: 100%;
+	border-bottom: 1px solid #e9e9e9;
+	margin: 4px 0px 0px;
+}
+	
+.line2 {
+	width: 100%;
+	border-bottom: 1px solid #eeb211;
+	margin: 10px 0px 15px;}
+
+  ul.smallText li.fulltextlink {
+  padding-top: 2px;
+  clear: both;
+}
+
+.small_indent {
+  margin-left: 10px;
+}
+
+.section_content_indent {
+  margin-left: 20px;
+}
+
+.largeText { font-size:12px;}
+.largeTextb { font-size:12px; font-weight:bold;}
+.smallText { font-size:10px;}
+.smallTextb { font-size:10px; font-weight:bold;}
+.smallTextlink { font-size:10px; color:#0066CC} 
+
+/***********************/
+/* Autocomplete styles */
+/***********************/
+
+div.auto_complete {
+  width: 350px;
+  background: #fff;
+}
+div.auto_complete ul {
+  border:1px solid #888;
+  margin:0;
+  padding:0;
+  width:100%;
+  list-style-type:none;
+}
+div.auto_complete ul li {
+  margin:0;
+  padding:3px;
+}
+div.auto_complete ul li.selected {
+  background-color: #ffb;
+}
+div.auto_complete ul strong.highlight {
+  color: #800; 
+  margin:0;
+  padding:0;
+}
+
+
+
+/**********************/
+/* Search controller  */
+/**********************/
+
+.citationLinker {
+	font-size:11px;
+	padding: 2px;
+	border: 1px solid #ebb211;
+	background-color: #eee;
+  margin-bottom: 12px;
+  margin-top: 12px;
+}	
+.citationLinker a:link { 
+   /*text-decoration:underline;*/
+   color : #666; 
+}
+
+.azNav {
+	text-align: center;
+  margin-top: 10px;
+  margin-bottom: 10px;
+	}
+.azNav a {
+  font-size: 1.1em;
+  font-weight: bold;
+  padding:.15em .3em .15em .3em;
+	border: 1px solid #bbb;
+	text-decoration: none;
+	color : #0066CC;
+  line-height: 2em;
+	}
+.azNav a:hover {
+	background-color: #eee;
+}
+
+.journalList {
+	line-height:18px;
+}
+.journalList a {color: #0066CC; }
+
+/* search results */
+
+.search_citation {
+ 	border-bottom: 1px solid #e9e9e9;
+  padding: 10px;
+  position: relative;
+  overflow: auto;
+  clear: both;
+}
+
+ul.citation {
+  width: 80%;
+  float: left;
+  clear: both;
+  position: relative;	
+}
+
+ul.citation li {
+  padding-bottom: 0.66em;
+  float: left;
+}
+
+.citation .label {
+  display: block;
+  text-align: right;
+  width: 100px; 
+  font-weight: bold;
+  float: left;
+  clear: left;
+}
+
+.citation .value {
+  display: block;  
+  float: left;  
+  width: 400px;
+  margin-left: 20px;
+}
+
+.citation .issn, .citation .isbn, .citation .cite, .citation .pub {
+  font-size: 80%;
+}
+.citation .cite {
+  margin-left: 120px; 
+  clear: left;
+  
+}
+
+.citation_link {
+  float: left;
+  width: 18%;
+  text-align: right;
+}
+
+
+
+  
+/***************************************************************/
+/*  Banner page                                                */
+/* Styles used for banner frame page with tiny menu in banner.
+   These styles used both for frameset and iframe version. 
+   Styles used for just iframe version come later. */
+
+
+#banner_fulltext li.fulltextlink {
+  padding-bottom: 4px;
+}
+
+#banner_fulltext li.frameescaping {
+    background: url(famfamfam/page_up.gif) no-repeat 0px 0px;
+  /* Special icon override */
+}
+
+
+
+body.banner {
+  background-color: #E6D19A;
+}
+
+.banner_menu {
+  position: absolute;
+  top: 8px;
+  bottom: 8px;
+  left: 0;
+  right: 0;
+  width: 100%;
+  _height: 88%; /* IE6 only */
+  font-size: 10px;
+}
+
+.banner_menu_inner_container {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.banner_section {
+  float: left; 
+  overflow-y: auto;
+  overflow-x: hidden;
+  height: 100%; 
+  font-size:10px;
+  margin-left: 6px;
+  padding-left: 4px;
+  padding-right: 2px;
+}
+
+
+.banner_menu h3 {
+  font-size:10px; 
+  font-weight:bold;
+  margin-bottom: 2px;
+  margin-top: 1px;
+}
+
+.banner_section li {
+  padding-bottom: 3px;
+}
+
+.banner_section #helpicon {
+  font-size: 18px;
+}
+
+#banner_controls {
+  width: 140px;
+}
+
+#banner_citation {
+  width: 200px;
+  overflow-y: auto; 
+  border: 1px solid #e9e9e9;
+  background-color: white;
+  margin-left: 22px;
+}
+
+#banner_fulltext {
+  width: 260px; 
+  overflow-y: auto;   
+	border: 1px solid #e9e9e9;
+  background-color: white;
+}
+
+#banner_help {
+  width: 130px;
+}
+
+/* Styles used specifically for new iframe version of banner page.
+   Note that page using iframe version styles must include the
+   special banner_with_iframe_ie6.css file in conditional
+   comments for IE less than 7 only, for IE6 and under compatibility. */
+  #banner_with_iframe #frame {
+    padding: 0;
+    margin: 0;
+    display: block;
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    border: 0;
+  }
+  #banner_with_iframe #content {
+    position: absolute;
+    padding: 0;
+    margin: 0;
+    top: 98px;
+    left: 0px;
+    right: 0px;
+    bottom: 0;  
+  }
+  /* new iframe style banner frameset */
+  #banner_with_iframe #banner_header  {
+      background-color: #E6D19A;
+      position: absolute;
+      /* Ie6 likes it better when height/width comes before top, left, right, no idea why.  */
+      height: 94px;        
+      top: 0;
+      left: 0;
+      right: 0;
+      padding: 0;
+      margin: 0;
+      border-bottom: 4px gray solid;
+      overflow-y: auto;
+      overflow-x: hidden;
+  }
+
+
+
+/*************************************/
+/* Ajax (and non) popup modal window */
+/*************************************/
+
+.ajax_modal_dialog {
+  border: 1px solid #999999;
+  background-color: white;
+  position:absolute;
+  left: 25%;
+  top: 20%;
+  z-index: 1000;  
+  font-size: 12px;
+}
+
+.ajax_modal_bg_overlay {
+    background-color: gray;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    width: 99.9%;
+    height: 99.9%;
+    z-index: 999;
+    opacity: 0.6;
+    -moz-opacity: 0.6;  
+    filter: alpha(opacity=60); 
+}
+
+.ajax_modal_dialog .inner_modal_dialog {    
+  background-color: #FCF1D4;
+  margin: 1px;
+  padding: 1em;
+}
+
+.ajax_modal_dialog .modal_dialog_form {
+  width:395px;
+}
+
+.ajax_modal_dialog h2, .ajax_modal_dialog h3 {
+  font-weight: normal;
+  font-size: 1em;
+}
+
+.success_status {
+  position: absolute;
+  left: 15%;
+  top: 2em;
+  z-index: 100;  
+  background-color: #e6e6e6;
+  border: 1px solid #999999;
+  padding: 1em;  
+}
+
+.inner_modal_dialog .section {
+  padding-top: 0.8em;
+  padding-bottom: 0.8em;
+}
+
+.inner_modal_dialog li {
+  margin-bottom: 0.33em;
+}
+
+.inner_modal_dialog ul {
+  margin-top: 0.5em;
+  margin-bottom: 0.5em;
+}
+
+.inner_modal_dialog .collection {
+  font-weight: bold; 
+}
+
+.inner_modal_dialog .status {
+  font-style: italic;
+}
+
+.no_js .inner_modal_dialog {
+  margin: 2em;
+}
+
+.no_js .inner_modal_dialog .cancel {
+   display: none;
+}
+
+	
+  
+