+exports.body = "
+<div id='wolfcage-wrapper'>
+    <ul id='wolfcage-tab-container'>
+        <li id='wolfcage-tab-generator' 
+            data-tab-module='generator'>
+            Generator
+        </li>
+        <li id='wolfcage-tab-toproweditor' 
+            data-tab-module='toproweditor'>
+            Top Row Editor
+        </li>
+    </ul>
+    <div id='wolfcage-container'></div>
+    <div id='wolfcage-veil'></div>
+    <div id='wolfcage-modal'></div>
+</div>
+"
+
 exports.generatorBoard = "
 <div id='wolfcage-board-container'>
     <div id='wolfcage-board'></div>
 </div>
 "
+
+
 exports.colorPickers = "
 <div class='wolfcage-colorpicker-wrapper'>
     <div class='wolfcage-colorpicker-container'>
         <div class='wolfcage-colorpicker-container-title'>Active Cell</div>
-        <select id='wolfcage-colorpicker-active-hex' ></select>
+        <select id='wolfcage-colorpicker-select-active-hex' ></select>
     </div>
     <div class='wolfcage-colorpicker-container'>
         <div class='wolfcage-colorpicker-container-title'>Cell Border</div>
-        <select id='wolfcage-colorpicker-border-hex'  ></select>
+        <select id='wolfcage-colorpicker-select-border-hex'  ></select>
     </div>
     <div class='wolfcage-colorpicker-container'>
         <div class='wolfcage-colorpicker-container-title'>Inactive Cell</div>
-        <select id='wolfcage-colorpicker-inactive-hex'  ></select>
+        <select id='wolfcage-colorpicker-select-inactive-hex'  ></select>
     </div>
 </div>
 "
 
 exports.colorPickerOption = (color)=>
     return "<option value='#{color.hex}' style='background-color:#{color.hex}'> 
-                   #{color.name}
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
             </option>"
 
 exports.generatorPreviewCell = ({leftBitActive, middleBitActive, rightBitActive, previewIndex}) => 

                    class=''></select> &nbsp;
            <button id='wolfcage-generator-colorpicker-button' 
                    class=''>Color Picker</button>
        </div>
        </div>


        <div id='#{ id }' style='left:#{ left }px;' class='wolfcage-board-cell #{ activeClass }'></div>
    "

exports.thumbMontage = "
<div id='wolfcage-thumbmontage-container'></div>
"

thumbnail = (rule)=>
    return "
        <div class='wolfcage-thumbmontage-rulethumb-box '
            data-rule='#{ rule }'>
            <div class='wolfcage-rulethumb-rulenum'>#{rule}</div>
        </div>
    "

exports.thumbnails = (ruleList) =>
    nails = ""
    for rule in ruleList
        nails += thumbnail(rule)
    return nails 


