switch metaset view changes

app/assets/stylesheets/application.css

@@ -1413,6 +1413,7 @@ float: left;
     font-size: 17px;
     line-height: 21px;
     border: none;
+    background: none;
 }
 #metacodeSwitchTabs .setTitle {
     
@@ -1420,12 +1421,24 @@ float: left;
 #metacodeSwitchTabs .setDesc {
     margin-bottom: 5px;
 }
+#switchMetacodes > p {
+    margin: 16px 0 16px 0;
+}
+#metacodeSwitchTabs > ul {
+    width: 130px;
+}
+#metacodeSwitchTabs > ul li {
+    font-size: 14px;
+}
+#metacodeSwitchTabs li.ui-state-active a {
+    color: #00BCD4;
+}
 .customMetacodeList,
 .metacodeSetList {
     height: 301px;
     overflow: hidden;
     margin: 5px 0 15px 0;
-    border-bottom: 1px solid #BBB;
+    /*  border-bottom: 1px solid #BBB;*/
 }
 .customMetacodeList ul li {
     cursor: pointer;
@@ -1461,6 +1474,7 @@ float: left;
     width: auto !important;
     padding: 0 10px;
     font-weight: normal;
+    float: right;
 }
 /* about, getInvolved */
 

app/views/shared/_switchmetacodes.html.erb

@@ -13,18 +13,19 @@
      index = allMetacodeSets.index(set)   
    end %>
 <h3>Switch Metacode Set</h3>
+
+<p>Use metacode sets to enter different modes of mapping.</p>
         
 <div id="metacodeSwitchTabs">
   <ul>
     <% allMetacodeSets.each do |m| %>
     <li><a href="#metacodeSwitchTabs<%= m.id %>" data-set-id="<%= m.id %>"><%= m.name %></a></li>
     <% end %>
-    <li><a href="#metacodeSwitchTabsCustom" data-set-id="custom" id="metacodeSetCustom">Custom</a></li>
+    <li><a href="#metacodeSwitchTabsCustom" data-set-id="custom" id="metacodeSetCustom">CUSTOM SELECTION</a></li>
   </ul>
   <% allMetacodeSets.each_with_index do |m, localindex| %>
   <div id="metacodeSwitchTabs<%= m.id %>"
        data-metacodes="<%= m.metacodes.map(&:name).join(',') %>">
-    <p class="setTitle"><%= m.name %></p>
     <% @list = '' %>
     <% m.metacodes.sort{|x,y| x.name <=> y.name }.each_with_index do |m, index| %>
       <% @list += '<li><img src="' + m.icon + '" alt="' + m.name + '" /><p>' + m.name.downcase + '</p><div class="clearfloat"></div></li>' %> 
@@ -37,7 +38,7 @@
       <div class="clearfloat"></div>
     </div>
     <button class="button" onclick="Metamaps.Create.updateMetacodeSet(<%= m.id %>, <%= localindex %>, false);">
-        Switch to Set
+        Switch Set
     </button>
   </div>
   <% end %>