<div class="vp-option-page" id="vp_inputPage">

<!-- TEST: CodeMirror style -->

<!-- <style>

#vp-wrapper .vp-option-page .CodeMirror { border: 1px solid silver; }

#vp-wrapper .vp-option-page .CodeMirror-empty { outline: 1px solid #c22; }

#vp-wrapper .vp-option-page .CodeMirror-empty.CodeMirror-focused { outline: none; }

#vp-wrapper .vp-option-page .CodeMirror pre.CodeMirror-placeholder { color: #999; }

</style> -->

<!-- TEST: CodeMirror -->

<!-- <textarea id="vp_testCodeMirror" name="code" style="display: none;" placeholder="placeholder text">starting value</textarea>

<br/> -->

<div id="vp_settingBox" class="vp-setting-box list-group">

<!-- sample div -->

<!-- <div class="vp-setting-item list-group-item">

<input type="checkbox" id="input_zenmode_set_zenmode_on_load">

<label for="input_zenmode_set_zenmode_on_load">Set zenmode on when a notebook opens</label>

</div> -->

</div>

<div id="vp_settingFunctions" class="vp-option-command-btn-container">

<button type="button" id="vp_loadSetting" class="vp-task-btn blue" style="display: inline-block;">

<span class="vp-multilang">Load</span>

</button>

<button type="button" id="vp_saveSetting" class="vp-task-btn green" style="display: inline-block;">

<span class="vp-multilang">Save</span>

</button>

<button type="button" id="vp_setDefault" class="vp-task-btn gray" style="display: inline-block;">

<span class="vp-multilang">Default</span>

</button>

</div>

</div>