                 <div id='wolfcage-rulepreview-mask'></div>
                 <select id='wolfcage-generator-select-input' 
                         class=''></select> &nbsp;
-                <button id='wolfcage-generator-colorpicker-button' 
-                        class=''>Color Picker</button>
+                <button id='wolfcage-generator-bordercolor-button' 
+                        class=''>Border Color</button>
                 <button id='wolfcage-generator-thumbmontage-button' 
                         class=''>Thumbs</button>
             </div>
             <div id='wolfcage-rules-preview-container'></div>
             <div class='wolfcage-generator-box' style='float:right;'></div>
             <div id='wolfcage-generatemessage-container'>Generating Cellular Automata...</div>
-            <div id='wolfcage-colorpicker' class='cp cp-small'></div>
         </div>
         <div id='wolfcage-generator-board'></div>
     </div>

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

exports.thumbnailsModal = "
<div id='wolfcage-thumbnailsmodal-montage-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 


exports.toproweditor = "
<div id='rowed-container'>

    <div id='wolfcage-board'></div>
</div>
"

exports.generatorPreviewCell = ({leftBitActive, middleBitActive, rightBitActive, previewIndex}) => 
    leftBitClass = if leftBitActive then "wolfcage-generator-preview-cell-active" else ""
