nice pretty upgrade to item show page

Gemfile.lock

@@ -52,9 +52,9 @@ specs:
 - bundler: 
     version: 0.9.26
 - haml: 
-    version: 3.0.13
+    version: 3.0.17
 - compass: 
-    version: 0.10.2
+    version: 0.10.4
 - diff-lcs: 
     version: 1.1.2
 - factory_girl: 
@@ -70,7 +70,7 @@ specs:
 - mysql: 
     version: 2.8.1
 - nokogiri: 
-    version: 1.4.2
+    version: 1.4.3.1
 - rdiscount: 
     version: 1.6.5
 - rspec-core: 

app/helpers/items_helper.rb

@@ -1,4 +1,5 @@
 module ItemsHelper
+  NeoitemsURLFormat = 'http://neoitems.net/search2.php?Name=%s&AndOr=and&Category=All&Special=0&Status=Active&Sort=ItemID&results=15&SearchType=8'
   module PetTypeImage
     Format = 'http://pets.neopets.com/cp/%s/%i/%i.png'
     
@@ -47,6 +48,18 @@ module ItemsHelper
     end
   end
   
+  def list_zones(zones, method=:label)
+    zones.sort { |x,y| x.label <=> y.label }.map(&method).join(', ')
+  end
+  
+  def nc_icon_for(item)
+    image_tag 'nc.png', :title => 'NC Mall Item', :alt => 'NC', :class => 'nc-icon' if item.nc?
+  end
+  
+  def neoitems_url_for(item)
+    sprintf(NeoitemsURLFormat, CGI::escape(item.name))
+  end
+  
   private
   
   def build_on_random_standard_pet_types(species, &block)

app/models/item.rb

@@ -3,6 +3,8 @@ class Item < ActiveRecord::Base
   
   SwfAssetType = 'object'
   
+  NCRarities = [0, 500]
+  
   set_table_name 'objects' # Neo & PHP Impress call them objects, but the class name is a conflict (duh!)
   set_inheritance_column 'inheritance_type' # PHP Impress used "type" to describe category
   
@@ -17,6 +19,39 @@ class Item < ActiveRecord::Base
   
   # Not defining validations, since this app is currently read-only
   
+  def nc?
+    NCRarities.include?(rarity_index)
+  end
+  
+  def restricted_zones
+    unless @restricted_zones
+      @restricted_zones = []
+      zones_restrict.split(//).each_with_index do |switch, id|
+        @restricted_zones << Zone.find(id.to_i + 1) if switch == '1'
+      end
+    end
+    @restricted_zones
+  end
+  
+  def occupied_zones
+    all_body_ids = []
+    zone_body_ids = {}
+    selected_assets = swf_assets.select('body_id, zone_id').each do |swf_asset|
+      zone_body_ids[swf_asset.zone_id] ||= []
+      body_ids = zone_body_ids[swf_asset.zone_id]
+      body_ids << swf_asset.body_id unless body_ids.include?(swf_asset.body_id)
+      all_body_ids << swf_asset.body_id unless all_body_ids.include?(swf_asset.body_id)
+    end
+    zones = []
+    total_body_ids = all_body_ids.size
+    zone_body_ids.each do |zone_id, body_ids|
+      zone = Zone.find(zone_id)
+      zone.sometimes = true if body_ids.size < total_body_ids
+      zones << zone
+    end
+    zones
+  end
+  
   def species_support_ids
     @species_support_ids_array ||= read_attribute('species_support_ids').split(',').map(&:to_i)
   end
@@ -91,7 +126,7 @@ class Item < ActiveRecord::Base
   
   search_filter :is do |is_what|
     raise ArgumentError, "We don't know how an item can be \"#{is_what}\". Did you mean is:nc?" unless is_what == 'nc'
-    arel_table[:rarity_index].in([0, 500])
+    arel_table[:rarity_index].in(NCRarities)
   end
   
   search_filter :only do |species_name|

app/models/zone.rb

@@ -3,6 +3,9 @@ class Zone < StaticResource
   ItemZoneSets = {}
   
   attr_reader *AttributeNames
+  # When selecting zones that an asset occupies, we allow the zone to set
+  # whether or not the zone is "sometimes" occupied. This is false by default.
+  attr_writer :sometimes
 
   def initialize(attributes)
     AttributeNames.each do |name|
@@ -10,6 +13,10 @@ class Zone < StaticResource
     end
   end
   
+  def uncertain_label
+    @sometimes ? "#{label} sometimes" : label
+  end
+  
   n = 0
   @objects = YAML.load_file(Rails.root.join('config', 'zones.yml')).map do |a|
     a['id'] = (n += 1)

app/stylesheets/_clean_constants.scss

@@ -14,3 +14,8 @@ $error-border-color:    #fbc2c4;
 
 $header-font: Delicious, Helvetica, Arial, Verdana, sans-serif;
 $body-font: "Droid Serif", Georgia, "Times New Roman", Times, serif;
+
+$object-img-size: 80px;
+$object-width: 100px;
+$object-padding: 6px;
+$nc-icon-size: 16px;

app/stylesheets/items/_index.scss

@@ -2,6 +2,18 @@ form {
   margin-bottom: 2em;
 }
 
+.object .nc-icon {
+  height: 16px;
+  position: absolute;
+  right: ($object-width - $object-img-size) / 2 + $object-padding;
+  top: $object-img-size - $nc-icon-size;
+  width: 16px;
+  
+  &:hover {
+    @include opacity(.5);
+  }
+}
+
 @mixin main_unit {
   float: left;
   width: 49%;

app/stylesheets/items/_show.scss

@@ -4,10 +4,22 @@ body.show {
     display: block;
     margin-bottom: 1em;
     padding: 1em 0;
+    
+    div, img {
+      @include inline-block;
+    }
+    
+    div {
+      text-align: left;
+    }
+    
+    a {
+      font-size: 75%;
+      margin-left: 1em;
+    }
   }
   
   #item-thumbnail {
-    @include inline-block;
     border: 1px solid $module-border-color;
     height: 80px;
     margin-right: .5em;
@@ -15,8 +27,7 @@ body.show {
   }
   
   #item-name {
-    @include inline-block;
-    margin-top: 1em;
+    margin-bottom: 0;
   }
   
   #item-preview {
@@ -64,4 +75,33 @@ body.show {
     overflow: hidden;
     width: 300px;
   }
+  
+  #item-zones {
+    font: {
+      family: $body-font;
+      size: 85%;
+    }
+    
+    p:first-child {
+      margin-bottom: .25em;
+    }
+  }
+  
+  #item-preview-header {
+    margin-top: 3em;
+    
+    h3, a {
+      @include inline-block;
+    }
+    
+    a {
+      font-size: 85%;
+      margin: -1.5em 0 0 1em
+    }
+  }
+  
+  .nc-icon {
+    height: 16px;
+    width: 16px;
+  }
 }

app/views/items/_item.html.haml

@@ -2,3 +2,4 @@
   = link_to item_path(item, :q => @query) do
     = image_tag item.thumbnail_url, :alt => item.description, :title => item.description
     = item.name
+    = nc_icon_for(item)

app/views/items/show.html.haml

@@ -1,10 +1,28 @@
 %header
   = image_tag @item.thumbnail_url, :id => 'item-thumbnail'
-  %h2#item-name= @item.name
+  %div
+    %h2#item-name= @item.name
+    = nc_icon_for(@item)
+    - unless @item.rarity.empty?
+      == Rarity: #{@item.rarity_index} (#{@item.rarity})
+    %a.button{:href => neoitems_url_for(@item)} NeoItems
 
 %p= @item.description
 
-%h3 Preview
+#item-zones
+  %p
+    %strong Occupies:
+    = list_zones @item.occupied_zones, :uncertain_label
+  %p
+    %strong Restricts:
+    - if @item.restricted_zones.empty?
+      None
+    - else
+      = list_zones @item.restricted_zones
+
+#item-preview-header
+  %h3 Preview
+  %a#customize-more.button{:href => 'http://impress.openneo.net/'} Customize more
 
 #item-preview
   #item-preview-species= standard_species_images(@item.supported_species)

public/javascripts/items/show.js

@@ -1,6 +1,9 @@
+// FIXME: pick a consistent javascript style! underscores for vars or camelCase?
+
 var PREVIEW_SWF_ID = 'item-preview-swf',
   PREVIEW_SWF = document.getElementById(PREVIEW_SWF_ID),
   speciesList = $('#item-preview a'),
+  customize_more_el = $('#customize-more'),
   MainWardrobe;
 
 if(typeof console == 'undefined' || typeof console.log == 'undefined') {
@@ -72,6 +75,9 @@ function PetType() {
     PetType.current = this;
     speciesList.filter('.current').removeClass('current');
     this.link.addClass('current');
+    customize_more_el.attr('href',
+      'http://impress.openneo.net/wardrobe?species=' + this.species_id + 
+      '&color=' + this.color_id + '&objects[]=' + Item.current.id);
     if(this.activated) {
       Preview.enable();
       this.load();
@@ -120,6 +126,7 @@ PetType.createFromLink = function (link) {
 
 function Item(id) {
   this.assets_by_body_id = {};
+  this.id = id;
   
   this.load = function (pet_type) {
     var url = '/items/' + id + '/bodies/' + pet_type.body_id + '/swf_assets.json',

public/stylesheets/compiled/ie.css

@@ -2,87 +2,87 @@
 body.bp {
   text-align: center;
 }
-/* line 48, ../../../../../.rvm/gems/ruby-1.9.2-preview3@rails3beta4/gems/compass-0.10.2/frameworks/blueprint/stylesheets/blueprint/_ie.scss */
+/* line 48, ../../../../../.rvm/gems/ruby-1.9.2-preview3/gems/compass-0.10.4/frameworks/blueprint/stylesheets/blueprint/_ie.scss */
 * html body.bp legend {
   margin: 0px -8px 16px 0;
   padding: 0;
 }
-/* line 52, ../../../../../.rvm/gems/ruby-1.9.2-preview3@rails3beta4/gems/compass-0.10.2/frameworks/blueprint/stylesheets/blueprint/_ie.scss */
+/* line 52, ../../../../../.rvm/gems/ruby-1.9.2-preview3/gems/compass-0.10.4/frameworks/blueprint/stylesheets/blueprint/_ie.scss */
 html > body.bp p code {
   *white-space: normal;
 }
-/* line 67, ../../../../../.rvm/gems/ruby-1.9.2-preview3@rails3beta4/gems/compass-0.10.2/frameworks/blueprint/stylesheets/blueprint/_ie.scss */
+/* line 67, ../../../../../.rvm/gems/ruby-1.9.2-preview3/gems/compass-0.10.4/frameworks/blueprint/stylesheets/blueprint/_ie.scss */
 body.bp .container {
   text-align: left;
 }
-/* line 69, ../../../../../.rvm/gems/ruby-1.9.2-preview3@rails3beta4/gems/compass-0.10.2/frameworks/blueprint/stylesheets/blueprint/_ie.scss */
+/* line 69, ../../../../../.rvm/gems/ruby-1.9.2-preview3/gems/compass-0.10.4/frameworks/blueprint/stylesheets/blueprint/_ie.scss */
 body.bp sup {
   vertical-align: text-top;
 }
-/* line 71, ../../../../../.rvm/gems/ruby-1.9.2-preview3@rails3beta4/gems/compass-0.10.2/frameworks/blueprint/stylesheets/blueprint/_ie.scss */
+/* line 71, ../../../../../.rvm/gems/ruby-1.9.2-preview3/gems/compass-0.10.4/frameworks/blueprint/stylesheets/blueprint/_ie.scss */
 body.bp sub {
   vertical-align: text-bottom;
 }
-/* line 73, ../../../../../.rvm/gems/ruby-1.9.2-preview3@rails3beta4/gems/compass-0.10.2/frameworks/blueprint/stylesheets/blueprint/_ie.scss */
+/* line 73, ../../../../../.rvm/gems/ruby-1.9.2-preview3/gems/compass-0.10.4/frameworks/blueprint/stylesheets/blueprint/_ie.scss */
 body.bp hr {
   margin: -8px auto 11px;
 }
-/* line 75, ../../../../../.rvm/gems/ruby-1.9.2-preview3@rails3beta4/gems/compass-0.10.2/frameworks/blueprint/stylesheets/blueprint/_ie.scss */
+/* line 75, ../../../../../.rvm/gems/ruby-1.9.2-preview3/gems/compass-0.10.4/frameworks/blueprint/stylesheets/blueprint/_ie.scss */
 body.bp img {
   -ms-interpolation-mode: bicubic;
 }
-/* line 77, ../../../../../.rvm/gems/ruby-1.9.2-preview3@rails3beta4/gems/compass-0.10.2/frameworks/blueprint/stylesheets/blueprint/_ie.scss */
+/* line 77, ../../../../../.rvm/gems/ruby-1.9.2-preview3/gems/compass-0.10.4/frameworks/blueprint/stylesheets/blueprint/_ie.scss */
 body.bp fieldset {
   padding-top: 0;
 }
-/* line 79, ../../../../../.rvm/gems/ruby-1.9.2-preview3@rails3beta4/gems/compass-0.10.2/frameworks/blueprint/stylesheets/blueprint/_ie.scss */
+/* line 79, ../../../../../.rvm/gems/ruby-1.9.2-preview3/gems/compass-0.10.4/frameworks/blueprint/stylesheets/blueprint/_ie.scss */
 body.bp textarea {
   overflow: auto;
 }
-/* line 82, ../../../../../.rvm/gems/ruby-1.9.2-preview3@rails3beta4/gems/compass-0.10.2/frameworks/blueprint/stylesheets/blueprint/_ie.scss */
+/* line 82, ../../../../../.rvm/gems/ruby-1.9.2-preview3/gems/compass-0.10.4/frameworks/blueprint/stylesheets/blueprint/_ie.scss */
 body.bp input.text {
   margin: 0.5em 0;
   background-color: white;
   border: 1px solid #bbbbbb;
 }
-/* line 86, ../../../../../.rvm/gems/ruby-1.9.2-preview3@rails3beta4/gems/compass-0.10.2/frameworks/blueprint/stylesheets/blueprint/_ie.scss */
+/* line 86, ../../../../../.rvm/gems/ruby-1.9.2-preview3/gems/compass-0.10.4/frameworks/blueprint/stylesheets/blueprint/_ie.scss */
 body.bp input.text:focus {
   border: 1px solid #666666;
 }
-/* line 88, ../../../../../.rvm/gems/ruby-1.9.2-preview3@rails3beta4/gems/compass-0.10.2/frameworks/blueprint/stylesheets/blueprint/_ie.scss */
+/* line 88, ../../../../../.rvm/gems/ruby-1.9.2-preview3/gems/compass-0.10.4/frameworks/blueprint/stylesheets/blueprint/_ie.scss */
 body.bp input.title {
   margin: 0.5em 0;
   background-color: white;
   border: 1px solid #bbbbbb;
 }
-/* line 92, ../../../../../.rvm/gems/ruby-1.9.2-preview3@rails3beta4/gems/compass-0.10.2/frameworks/blueprint/stylesheets/blueprint/_ie.scss */
+/* line 92, ../../../../../.rvm/gems/ruby-1.9.2-preview3/gems/compass-0.10.4/frameworks/blueprint/stylesheets/blueprint/_ie.scss */
 body.bp input.title:focus {
   border: 1px solid #666666;
 }
-/* line 94, ../../../../../.rvm/gems/ruby-1.9.2-preview3@rails3beta4/gems/compass-0.10.2/frameworks/blueprint/stylesheets/blueprint/_ie.scss */
+/* line 94, ../../../../../.rvm/gems/ruby-1.9.2-preview3/gems/compass-0.10.4/frameworks/blueprint/stylesheets/blueprint/_ie.scss */
 body.bp input.checkbox {
   position: relative;
   top: 0.25em;
 }
-/* line 97, ../../../../../.rvm/gems/ruby-1.9.2-preview3@rails3beta4/gems/compass-0.10.2/frameworks/blueprint/stylesheets/blueprint/_ie.scss */
+/* line 97, ../../../../../.rvm/gems/ruby-1.9.2-preview3/gems/compass-0.10.4/frameworks/blueprint/stylesheets/blueprint/_ie.scss */
 body.bp input.radio {
   position: relative;
   top: 0.25em;
 }
-/* line 100, ../../../../../.rvm/gems/ruby-1.9.2-preview3@rails3beta4/gems/compass-0.10.2/frameworks/blueprint/stylesheets/blueprint/_ie.scss */
+/* line 100, ../../../../../.rvm/gems/ruby-1.9.2-preview3/gems/compass-0.10.4/frameworks/blueprint/stylesheets/blueprint/_ie.scss */
 body.bp input.button {
   position: relative;
   top: 0.25em;
 }
-/* line 103, ../../../../../.rvm/gems/ruby-1.9.2-preview3@rails3beta4/gems/compass-0.10.2/frameworks/blueprint/stylesheets/blueprint/_ie.scss */
+/* line 103, ../../../../../.rvm/gems/ruby-1.9.2-preview3/gems/compass-0.10.4/frameworks/blueprint/stylesheets/blueprint/_ie.scss */
 body.bp textarea {
   margin: 0.5em 0;
 }
-/* line 105, ../../../../../.rvm/gems/ruby-1.9.2-preview3@rails3beta4/gems/compass-0.10.2/frameworks/blueprint/stylesheets/blueprint/_ie.scss */
+/* line 105, ../../../../../.rvm/gems/ruby-1.9.2-preview3/gems/compass-0.10.4/frameworks/blueprint/stylesheets/blueprint/_ie.scss */
 body.bp select {
   margin: 0.5em 0;
 }
-/* line 107, ../../../../../.rvm/gems/ruby-1.9.2-preview3@rails3beta4/gems/compass-0.10.2/frameworks/blueprint/stylesheets/blueprint/_ie.scss */
+/* line 107, ../../../../../.rvm/gems/ruby-1.9.2-preview3/gems/compass-0.10.4/frameworks/blueprint/stylesheets/blueprint/_ie.scss */
 body.bp button {
   position: relative;
   top: 0.25em;

public/stylesheets/compiled/print.css

@@ -6,11 +6,11 @@ body.bp {
   background: none;
   font-size: 10pt;
 }
-/* line 52, ../../../../../.rvm/gems/ruby-1.9.2-preview3@rails3beta4/gems/compass-0.10.2/frameworks/blueprint/stylesheets/blueprint/_print.scss */
+/* line 52, ../../../../../.rvm/gems/ruby-1.9.2-preview3/gems/compass-0.10.4/frameworks/blueprint/stylesheets/blueprint/_print.scss */
 body.bp .container {
   background: none;
 }
-/* line 54, ../../../../../.rvm/gems/ruby-1.9.2-preview3@rails3beta4/gems/compass-0.10.2/frameworks/blueprint/stylesheets/blueprint/_print.scss */
+/* line 54, ../../../../../.rvm/gems/ruby-1.9.2-preview3/gems/compass-0.10.4/frameworks/blueprint/stylesheets/blueprint/_print.scss */
 body.bp hr {
   background: #cccccc;
   color: #cccccc;
@@ -20,54 +20,54 @@ body.bp hr {
   padding: 0;
   border: none;
 }
-/* line 62, ../../../../../.rvm/gems/ruby-1.9.2-preview3@rails3beta4/gems/compass-0.10.2/frameworks/blueprint/stylesheets/blueprint/_print.scss */
+/* line 62, ../../../../../.rvm/gems/ruby-1.9.2-preview3/gems/compass-0.10.4/frameworks/blueprint/stylesheets/blueprint/_print.scss */
 body.bp hr.space {
   background: white;
   color: white;
 }
-/* line 65, ../../../../../.rvm/gems/ruby-1.9.2-preview3@rails3beta4/gems/compass-0.10.2/frameworks/blueprint/stylesheets/blueprint/_print.scss */
+/* line 65, ../../../../../.rvm/gems/ruby-1.9.2-preview3/gems/compass-0.10.4/frameworks/blueprint/stylesheets/blueprint/_print.scss */
 body.bp h1, body.bp h2, body.bp h3, body.bp h4, body.bp h5, body.bp h6 {
   font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
 }
-/* line 67, ../../../../../.rvm/gems/ruby-1.9.2-preview3@rails3beta4/gems/compass-0.10.2/frameworks/blueprint/stylesheets/blueprint/_print.scss */
+/* line 67, ../../../../../.rvm/gems/ruby-1.9.2-preview3/gems/compass-0.10.4/frameworks/blueprint/stylesheets/blueprint/_print.scss */
 body.bp code {
   font-size: 0.9em;
   font-family: "andale mono", "lucida console", monospace;
 }
-/* line 72, ../../../../../.rvm/gems/ruby-1.9.2-preview3@rails3beta4/gems/compass-0.10.2/frameworks/blueprint/stylesheets/blueprint/_print.scss */
+/* line 72, ../../../../../.rvm/gems/ruby-1.9.2-preview3/gems/compass-0.10.4/frameworks/blueprint/stylesheets/blueprint/_print.scss */
 body.bp a img {
   border: none;
 }
-/* line 75, ../../../../../.rvm/gems/ruby-1.9.2-preview3@rails3beta4/gems/compass-0.10.2/frameworks/blueprint/stylesheets/blueprint/_print.scss */
+/* line 75, ../../../../../.rvm/gems/ruby-1.9.2-preview3/gems/compass-0.10.4/frameworks/blueprint/stylesheets/blueprint/_print.scss */
 body.bp a:link, body.bp a:visited {
   background: transparent;
   font-weight: 700;
   text-decoration: underline;
 }
-/* line 79, ../../../../../.rvm/gems/ruby-1.9.2-preview3@rails3beta4/gems/compass-0.10.2/frameworks/blueprint/stylesheets/blueprint/_print.scss */
+/* line 79, ../../../../../.rvm/gems/ruby-1.9.2-preview3/gems/compass-0.10.4/frameworks/blueprint/stylesheets/blueprint/_print.scss */
 body.bp p img.top {
   margin-top: 0;
 }
-/* line 81, ../../../../../.rvm/gems/ruby-1.9.2-preview3@rails3beta4/gems/compass-0.10.2/frameworks/blueprint/stylesheets/blueprint/_print.scss */
+/* line 81, ../../../../../.rvm/gems/ruby-1.9.2-preview3/gems/compass-0.10.4/frameworks/blueprint/stylesheets/blueprint/_print.scss */
 body.bp blockquote {
   margin: 1.5em;
   padding: 1em;
   font-style: italic;
   font-size: 0.9em;
 }
-/* line 86, ../../../../../.rvm/gems/ruby-1.9.2-preview3@rails3beta4/gems/compass-0.10.2/frameworks/blueprint/stylesheets/blueprint/_print.scss */
+/* line 86, ../../../../../.rvm/gems/ruby-1.9.2-preview3/gems/compass-0.10.4/frameworks/blueprint/stylesheets/blueprint/_print.scss */
 body.bp .small {
   font-size: 0.9em;
 }
-/* line 88, ../../../../../.rvm/gems/ruby-1.9.2-preview3@rails3beta4/gems/compass-0.10.2/frameworks/blueprint/stylesheets/blueprint/_print.scss */
+/* line 88, ../../../../../.rvm/gems/ruby-1.9.2-preview3/gems/compass-0.10.4/frameworks/blueprint/stylesheets/blueprint/_print.scss */
 body.bp .large {
   font-size: 1.1em;
 }
-/* line 90, ../../../../../.rvm/gems/ruby-1.9.2-preview3@rails3beta4/gems/compass-0.10.2/frameworks/blueprint/stylesheets/blueprint/_print.scss */
+/* line 90, ../../../../../.rvm/gems/ruby-1.9.2-preview3/gems/compass-0.10.4/frameworks/blueprint/stylesheets/blueprint/_print.scss */
 body.bp .quiet {
   color: #999999;
 }
-/* line 92, ../../../../../.rvm/gems/ruby-1.9.2-preview3@rails3beta4/gems/compass-0.10.2/frameworks/blueprint/stylesheets/blueprint/_print.scss */
+/* line 92, ../../../../../.rvm/gems/ruby-1.9.2-preview3/gems/compass-0.10.4/frameworks/blueprint/stylesheets/blueprint/_print.scss */
 body.bp .hide {
   display: none;
 }

public/stylesheets/compiled/screen.css

@@ -37,36 +37,51 @@ form {
   margin-bottom: 2em;
 }
 
-/* line 14, ../../../app/stylesheets/items/_index.scss */
+/* line 5, ../../../app/stylesheets/items/_index.scss */
+.object .nc-icon {
+  height: 16px;
+  position: absolute;
+  right: 16px;
+  top: 64px;
+  width: 16px;
+}
+/* line 12, ../../../app/stylesheets/items/_index.scss */
+.object .nc-icon:hover {
+  opacity: 0.5;
+  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
+  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
+}
+
+/* line 26, ../../../app/stylesheets/items/_index.scss */
 #search-help {
   float: left;
   width: 49%;
   padding-right: 1%;
 }
-/* line 9, ../../../app/stylesheets/items/_index.scss */
+/* line 21, ../../../app/stylesheets/items/_index.scss */
 #search-help h2 {
   font-size: 125%;
 }
-/* line 18, ../../../app/stylesheets/items/_index.scss */
+/* line 30, ../../../app/stylesheets/items/_index.scss */
 #search-help dl {
   text-align: left;
 }
-/* line 22, ../../../app/stylesheets/items/_index.scss */
+/* line 34, ../../../app/stylesheets/items/_index.scss */
 #search-help dd {
   margin-bottom: 1em;
 }
 
-/* line 27, ../../../app/stylesheets/items/_index.scss */
+/* line 39, ../../../app/stylesheets/items/_index.scss */
 #species-search-links {
   float: left;
   width: 49%;
   padding-left: 1%;
 }
-/* line 9, ../../../app/stylesheets/items/_index.scss */
+/* line 21, ../../../app/stylesheets/items/_index.scss */
 #species-search-links h2 {
   font-size: 125%;
 }
-/* line 32, ../../../app/stylesheets/items/_index.scss */
+/* line 44, ../../../app/stylesheets/items/_index.scss */
 #species-search-links img {
   height: 80px;
   width: 80px;
@@ -79,43 +94,49 @@ body.show header {
   margin-bottom: 1em;
   padding: 1em 0;
 }
-/* line 9, ../../../app/stylesheets/items/_show.scss */
-body.show #item-thumbnail {
+/* line 8, ../../../app/stylesheets/items/_show.scss */
+body.show header div, body.show header img {
   display: -moz-inline-box;
   -moz-box-orient: vertical;
   display: inline-block;
   vertical-align: middle;
   *display: inline;
   *vertical-align: auto;
+}
+/* line 12, ../../../app/stylesheets/items/_show.scss */
+body.show header div {
+  text-align: left;
+}
+/* line 16, ../../../app/stylesheets/items/_show.scss */
+body.show header a {
+  font-size: 75%;
+  margin-left: 1em;
+}
+/* line 22, ../../../app/stylesheets/items/_show.scss */
+body.show #item-thumbnail {
   border: 1px solid #006600;
   height: 80px;
   margin-right: .5em;
   width: 80px;
 }
-/* line 17, ../../../app/stylesheets/items/_show.scss */
+/* line 29, ../../../app/stylesheets/items/_show.scss */
 body.show #item-name {
-  display: -moz-inline-box;
-  -moz-box-orient: vertical;
-  display: inline-block;
-  vertical-align: middle;
-  *display: inline;
-  *vertical-align: auto;
-  margin-top: 1em;
+  margin-bottom: 0;
 }
-/* line 23, ../../../app/stylesheets/items/_show.scss */
+/* line 34, ../../../app/stylesheets/items/_show.scss */
 body.show #item-preview div {
   float: left;
 }
-/* line 28, ../../../app/stylesheets/items/_show.scss */
+/* line 39, ../../../app/stylesheets/items/_show.scss */
 body.show #item-preview-species {
   width: 400px;
 }
-/* line 31, ../../../app/stylesheets/items/_show.scss */
+/* line 42, ../../../app/stylesheets/items/_show.scss */
 body.show #item-preview-species a, body.show #item-preview-species img {
   height: 50px;
   width: 50px;
 }
-/* line 36, ../../../app/stylesheets/items/_show.scss */
+/* line 47, ../../../app/stylesheets/items/_show.scss */
 body.show #item-preview-species a {
   display: -moz-inline-box;
   -moz-box-orient: vertical;
@@ -124,35 +145,63 @@ body.show #item-preview-species a {
   *display: inline;
   *vertical-align: auto;
 }
-/* line 39, ../../../app/stylesheets/items/_show.scss */
+/* line 50, ../../../app/stylesheets/items/_show.scss */
 body.show #item-preview-species a.current {
   background: #eeffee;
   outline: 1px solid #006600;
 }
-/* line 44, ../../../app/stylesheets/items/_show.scss */
+/* line 55, ../../../app/stylesheets/items/_show.scss */
 body.show #item-preview-species a.deactivated {
-  -moz-opacity: 0.5;
-  -webkit-opacity: 0.5;
-  -o-opacity: 0.5;
-  -khtml-opacity: 0.5;
   opacity: 0.5;
   -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
   filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
   background: #fbe3e4;
 }
-/* line 49, ../../../app/stylesheets/items/_show.scss */
+/* line 60, ../../../app/stylesheets/items/_show.scss */
 body.show #item-preview-species a.deactivated.current {
   outline-color: #fbc2c4;
 }
-/* line 56, ../../../app/stylesheets/items/_show.scss */
+/* line 67, ../../../app/stylesheets/items/_show.scss */
 body.show #item-preview-error {
   display: none;
   padding: 20px 10px 0;
   width: 380px;
 }
-/* line 62, ../../../app/stylesheets/items/_show.scss */
+/* line 73, ../../../app/stylesheets/items/_show.scss */
 body.show #item-preview-swf {
   height: 300px;
   overflow: hidden;
   width: 300px;
 }
+/* line 79, ../../../app/stylesheets/items/_show.scss */
+body.show #item-zones {
+  font-family: "Droid Serif", Georgia, "Times New Roman", Times, serif;
+  font-size: 85%;
+}
+/* line 85, ../../../app/stylesheets/items/_show.scss */
+body.show #item-zones p:first-child {
+  margin-bottom: .25em;
+}
+/* line 90, ../../../app/stylesheets/items/_show.scss */
+body.show #item-preview-header {
+  margin-top: 3em;
+}
+/* line 93, ../../../app/stylesheets/items/_show.scss */
+body.show #item-preview-header h3, body.show #item-preview-header a {
+  display: -moz-inline-box;
+  -moz-box-orient: vertical;
+  display: inline-block;
+  vertical-align: middle;
+  *display: inline;
+  *vertical-align: auto;
+}
+/* line 97, ../../../app/stylesheets/items/_show.scss */
+body.show #item-preview-header a {
+  font-size: 85%;
+  margin: -1.5em 0 0 1em;
+}
+/* line 103, ../../../app/stylesheets/items/_show.scss */
+body.show .nc-icon {
+  height: 16px;
+  width: 16px;
+}