<div style="position: absolute;">
   <div id="bas"></div>
   <div id="">
   <img id="pict" src="../../img/img/net.jpg" alt="Фото">
   </div>
</div>

<div id="basis3" style="visibility: hidden; top: 20%; left: 10px; transform: translate(0%, -20%);">

<!-- Вкладка с символами -->
<div id="copyr_d" class="cust sb borderStyle">
<div id="copyr_sym">
<input type="button" class="sym" id="s1" value="&#36;">
<input type="button" class="sym" id="s2" value="&#163;">
<input type="button" class="sym" id="s3" value="&#165;">
<input type="button" class="sym" id="s4" value="&#8364;">
<input type="button" class="sym" id="s5" value="&#8377;">
<input type="button" class="sym" id="s6" value="&#8381;">
<input type="button" class="sym" id="s7" value="&#8369;">
<input type="button" class="sym" id="s8" value="&#3647;">
<br>
<input type="button" class="sym" id="s9" value="&#177;">
<input type="button" class="sym" id="s10" value="&#215;">
<input type="button" class="sym" id="s11" value="&#247;">
<input type="button" class="sym" id="s12" value="&#8722;">
<input type="button" class="sym" id="s13" value="&#8730;">
<input type="button" class="sym" id="s14" value="&#8800;">
<input type="button" class="sym" id="s15" value="&#8804;">
<input type="button" class="sym" id="s16" value="&#8805;">
<input type="button" class="sym" id="s17" value="&#8721;">
<br>
<input type="button" class="sym" id="s26" value="&#8734;">
<input type="button" class="sym" id="s27" value="&#937;">
<input type="button" class="sym" id="s28" value="&#8486;">
<input type="button" class="sym" id="s29" value="&#945;">
<input type="button" class="sym" id="s30" value="&#946;">
<input type="button" class="sym" id="s31" value="&#8482;">
<input type="button" class="sym" id="s32" value="&#8729;">
<input type="button" class="sym" id="s33" value="&#8776;">
<br>
<input type="button" class="sym" id="s18" value="&#8592;">
<input type="button" class="sym" id="s19" value="&#8593;">
<input type="button" class="sym" id="s20" value="&#8594;">
<input type="button" class="sym" id="s21" value="&#8595;">
<input type="button" class="sym" id="s22" value="&#8598;">
<input type="button" class="sym" id="s23" value="&#8599;">
<input type="button" class="sym" id="s24" value="&#8600;">
<input type="button" class="sym" id="s25" value="&#8601;">
<br>
<input type="button" class="sym" id="s34" value="&#9632;">
<input type="button" class="sym" id="s35" value="&#9650;">
<input type="button" class="sym" id="s37" value="&#9675;">
<input type="button" class="sym" id="s38" value="&#9658;">
<input type="button" class="sym" id="s39" value="&#9660;">
<input type="button" class="sym" id="s40" value="&#9679;">
</div>
</div>

<!-- Блок настроек ссылок -->
<div id="link_d" class="cust sb borderStyle">
<div class="deploy">
{{link}}: <input id="link2" class="inpbig" style="margin-right: 0px;"> <input id="link2FromPage" onClick="linkFromPage()" type="button" value="{{select_page_from_site}}" style="margin-right: 10px;">
{{open_in_new_window}}: <select id="link3" class="sele">
<option selected value="yes">{{yes}}</option>
<option value="no">{{no}}</option>
</select><br>
</select>
{{underline}}: <select id="link5" class="sele">
<option value="yes">{{yes}}</option>
<option selected value="no">{{no}}</option>
</select>
{{color}}: <input type="color" id="link6c" class="colored" value="#0645AD" title="{{choose_color}}">
<input type="button" id="butlink" class="butin" value="{{insert}}" title="{{insert_link}}">
</div>
</div>

<!-- Окно для изменение цвета текста -->
<div id="col_d" class="cust sb borderStyle">
   <div class="deploy">
      {{change_text_color}}:
      <input type="color" id="colColor" class="colored" alt="{{color}}" title="{{choose_color}}">
      <button id="colFun_d" class="butin">{{select}}</button>
   </div>
</div>

<!-- Окно для изменение цвета фона текста -->
<div id="backgr_d" class="cust sb borderStyle">
   <div class="deploy">
      {{change_text_background}}:
      <input type="color" id="backgrColor" class="colored" alt="{{color}}" title="{{choose_color}}">
      <button id="backgrFun_d" class="butin">{{select}}</button>
   </div>
</div>

<!-- Окно для ввода имени плагина, для левой стороны -->
<div id="pluginCreateLeft_d" class="cust sb borderStyle">
   <div class="deploy">
      {{create_plugin_left}}:<br>
      <label for="pluginCreateLeftName">{{enter_plugin_name}}</label>
      <label id="pluginRulesButton1" class="butin">!</label>
      <div id="pluginRulesBlock1">
         <div>{{plugin_name_guidelines}}</div>
         <hr>
         <div>{{used_plugin_names}}</div>
      </div>
      <input type="text" id="pluginCreateLeftName" class="inpbig">
      <label for="pluginCreateLeftTitle">{{enter_plugin_title}}</label>
      <input type="text" id="pluginCreateLeftTitle" class="inpbig">
      <button id="pluginCreateLeftFun_d" class="butin">{{add}}</button>
   </div>
</div>
<!-- Список для выбора плагина, для левой стороны -->
<div id="pluginAddLeft_d" class="cust sb borderStyle">
   <div class="deploy">
      {{add_plugin_left}}:<br>
      <label for="pluginAddLeftName">{{select_plugin}}</label>
      <select id="pluginAddLeftName" class="sele"></select>
      <label for="pluginAddLeftTitle">{{enter_plugin_title}}</label>
      <input type="text" id="pluginAddLeftTitle" class="inpbig">
      <button id="pluginAddLeftFun_d" class="butin">{{select}}</button>
   </div>
</div>
<!-- Окно для ввода имени плагина, для правой стороны -->
<div id="pluginCreateRight_d" class="cust sb borderStyle">
   <div class="deploy">
      {{create_plugin_right}}:<br>
      <label for="pluginCreateRightName">{{enter_plugin_name}}</label>
      <label id="pluginRulesButton2" class="butin">!</label>
      <div id="pluginRulesBlock2">
         <div>{{plugin_name_guidelines}}</div>
         <hr>
         <div>{{used_plugin_names}}</div>
      </div>
      <input type="text" id="pluginCreateRightName" class="inpbig">
      <label for="pluginCreateRightTitle">{{enter_plugin_title}}</label>
      <input type="text" id="pluginCreateRightTitle" class="inpbig">
      <button id="pluginCreateRightFun_d" class="butin">{{add}}</button>
   </div>
</div>
<!-- Список для выбора плагина, для правой стороны -->
<div id="pluginAddRight_d" class="cust sb borderStyle">
   <div class="deploy">
      {{add_plugin_right}}:<br>
      <label for="pluginAddRightName">{{select_plugin}}</label>
      <select id="pluginAddRightName" class="sele"></select>
      <label for="pluginAddRightTitle">{{enter_plugin_title}}</label>
      <input type="text" id="pluginAddRightTitle" class="inpbig">
      <button id="pluginAddRightFun_d" class="butin">{{select}}</button>
   </div>
</div>

<!-- редактирования меню страницы -->
<div id="contentPageCreate_d" class="cust sb borderStyle">
   <div class="deploy">
      {{create_page}}:<br>
      {{select_or_create_file}} <input id="contentPageCreateUrl" class="inpbig">
      <div id="contentPageCreateUrlManager" class="editi editib pers" style="margin: -3px 0px 0px -16px; width: 24px; height: 20px;"></div><br>
      {{menu_name}}: <input id="contentPageCreateName" class="inpbig">
      {{tab_title}}: <input id="contentPageCreateTitle" class="inpbig">
      {{design}}: <select id="contentPageCreateTemplate" class="sele">
         <?php ?>
      </select>
      <br>
      <button id="contentPageCreateFun_d" class="butin">{{create}}</button>
   </div>
</div>

<div id="contentPageSettings_d" class="cust sb borderStyle">
   <div class="deploy">
      <button id="contentPageSettingsFun_d" class="butin">{{edit}}</button>
   </div>
</div>

<!-- основные нрастройки страницы -->
<div id="settingsMain_d" class="cust2 sb borderStyle" style="width: 200px;">
   <div class="deploy" style="text-align: left;">
      <option id="save" class="butinAuto">{{save}}</option>
      <option id="saveHow" class="butinAuto">{{save_as}}</option>
      <option id="openPage" class="butinAuto">{{open}}</option>
      <option id="newPage" class="butinAuto">{{new}}</option>
   </div>
</div>






<!-- Главная панель -->
<div id="panel" class="borderStyle"><div id="arrow-left" class="arrow borderStyle">&vltri;</div><div class="toolbar-container">
    <div class="toolbar-group" style="margin-left: 14px;">
        <span id="toolbar-group-button-main" class="editi editib pers toolbar-group-button"></span>
        <span class="toolbar-group-content">

            <div id="settingsMain" class="editi editib swit"></div>
            <div id="htm" onclick="showHtmlCode()" class="editi editib pers" alt="{{html_code_main_block_alt}}" title="{{html_code_main_block_title}}"></div>
            <div id="bac" class="editi editib pers" alt="{{undo_action_alt}}" title="{{undo_action_title}}"></div>
            <div id="forw" class="editi editib pers" alt="{{redo_action_alt}}" title="{{redo_action_title}}"></div>

        </span>
    </div>

    <div class="toolbar-group">
        <span id="toolbar-group-button-text" class="editi editib pers toolbar-group-button"></span>
        <span class="toolbar-group-content">
       
            <div class="align-dropdown-text" id="ff">
                <div class="current" data-cmd="'Roboto', sans-serif">Roboto</div><span class="dropdown-arrow">▾</span>
                <ul class="align-list" style="left: -1px;">
                    <li data-cmd="'Roboto', sans-serif"><div>Roboto</div></li>
                    <li data-cmd="'Open Sans', sans-serif"><div>Open Sans</div></li>
                    <li data-cmd="'Montserrat', sans-serif"><div>Montserrat</div></li>
                    <li data-cmd="'Lora', serif"><div>Lora</div></li>
                    <li data-cmd="'Source Sans 3', sans-serif"><div>Source Sans Pro</div></li>
                    <li data-cmd="'Merriweather', serif"><div>Merriweather</div></li>
                    <li data-cmd="'PT Serif', serif"><div>PT Serif</div></li>
                    <li data-cmd="'Playfair Display', serif"><div>Playfair Display</div></li>
                </ul>
            </div>
            <div class="align-dropdown-text" id="fs">
                <div class="current" data-cmd="15px">15px</div><span class="dropdown-arrow">▾</span>
                <ul class="align-list" style="left: -1px;">
                    <li data-cmd="1px"><div>1px</div></li><li data-cmd="2px"><div>2px</div></li><li data-cmd="4px"><div>4px</div></li><li data-cmd="6px"><div>6px</div></li><li data-cmd="8px"><div>8px</div></li><li data-cmd="10px"><div>10px</div></li><li data-cmd="11px"><div>11px</div></li><li data-cmd="12px"><div>12px</div></li><li data-cmd="13px"><div>13px</div></li><li data-cmd="14px"><div>14px</div></li><li data-cmd="15px"><div>15px</div></li><li data-cmd="16px"><div>16px</div></li><li data-cmd="17px"><div>17px</div></li><li data-cmd="18px"><div>18px</div></li><li data-cmd="19px"><div>19px</div></li><li data-cmd="20px"><div>20px</div></li><li data-cmd="22px"><div>22px</div></li><li data-cmd="24px"><div>24px</div></li><li data-cmd="28px"><div>28px</div></li><li data-cmd="32px"><div>32px</div></li><li data-cmd="48px"><div>48px</div></li><li data-cmd="56px"><div>56px</div></li><li data-cmd="64px"><div>64px</div></li><li data-cmd="96px"><div>96px</div></li>
                </ul>
            </div>

            <div id="bol" class="editi editib pers editf" alt="{{bold_alt}}" title="{{bold_title}}"></div>
            <div id="ital" class="editi editib pers editf" alt="{{italic_alt}}" title="{{italic_title}}"></div>
            <div id="under" class="editi editib pers editf" alt="{{underline_alt}}" title="{{underline_title}}"></div>
            <div id="strik" class="editi editib pers editf" alt="{{strikethrough_alt}}" title="{{strikethrough_title}}"></div>
            <div style="display: inline-block;">
                <div id="col" class="editi editimc pers" alt="{{font_color_alt}}" title="{{font_color_title}}"></div>
                <div id="backgr" class="editi editimc pers" alt="{{background_color_alt}}" title="{{background_color_title}}"></div>
                <div class="pickr-container"></div>
            </div>
            <div id="sup" class="editi editib pers editf" alt="{{superscript_alt}}" title="{{superscript_title}}"></div>
            <div id="sub" class="editi editib pers editf" alt="{{subscript_alt}}" title="{{subscript_title}}"></div>
            <div class="align-dropdown">
                <div class="current editi editib pers" style="background-position:-798px 1666px;" data-cmd="listNone"></div>
                <ul class="align-list">
                    <li data-cmd="1"><div class="editi editib pers" id="listNone"></div></li>
                    <li data-cmd="2"><div class="editi editib pers" id="listDots"></div></li>
                    <li data-cmd="3"><div class="editi editib pers" id="listNumbers"></div></li>
                    <li data-cmd="4"><div class="editi editib pers" id="listLetters"></div></li>
                </ul>
            </div>            
            <div class="align-dropdown">
                <div class="current editi editib pers" style="background-position: 765px 517px;" data-cmd="equal"></div>
                <ul class="align-list">
                    <li data-cmd="equal"><div class="editi editib pers" id="equal"></div></li>
                    <li data-cmd="equac"><div class="editi editib pers" id="equac"></div></li>
                    <li data-cmd="equar"><div class="editi editib pers" id="equar"></div></li>
                    <li data-cmd="equaj"><div class="editi editib pers" id="equaj"></div></li>
                </ul>
            </div>            
            <div id="forma" class="editi editib pers" alt="{{remove_format_alt}}" title="{{remove_format_title}}"></div>
        </span>
    </div>

    <div class="toolbar-group">
        <span id="toolbar-group-button-paste" class="editi editib pers toolbar-group-button"></span>
        <span class="toolbar-group-content">

            <div id="link" class="editi editib swit" alt="{{insert_link_alt}}" title="{{insert_link_title}}"></div>
            <div id="linkdel" class="editi editib pers" alt="{{remove_link_alt}}" title="{{remove_link_title}}"></div>

            <div class="align-dropdown-oneImg">
                <div class="current editi editib pers" id="oneImg"></div>
                <ul class="align-list" style="left: -1px;">
                    <li data-cmd="imgLink"><div id="imgLink">{{insert_image_link}}</div></li>
                    <li data-cmd="imgPc"><div id="imgPc">{{insert_image_PC}}</div></li>
                    <li data-cmd="imgManager"><div id="imgManager">{{insert_image_manager}}</div></li>
                </ul>
            </div>      
            <div id="hr" class="editi editib pers editf"></div>
            <div id="tabl" class="editi editib pers editf"></div>
            <div id="copyr" class="editi editib swit"></div>

            <select id="pluginDropdownContent" class="edits pers3">
                <option id="pluginAddLeft" value="pluginAddLeft" class="swit">{{add_plugin_left}}</option>
                <option id="pluginAddRight" value="pluginAddRight" class="swit">{{add_plugin_right}}</option>
                <option id="pluginDelete" value="pluginDelete" class="editfText">{{delete_plugin}}</option>
                <option id="pluginMove" value="pluginMove" class="editfText">{{move_plugin}}</option>
            </select>

        </span>
    </div>
</div><div id="arrow-right" class="arrow borderStyle">&vrtri;</div></div>

<!-- текстовый редактор -->
<form name="dat">
   <textarea id="tex" name="tex" class="sb"></textarea>
   </form>
</div>

<!-- поля для редактирование элементов -->
<div id="editingMenuItems" class="borderStyle">
    <div id="editingMenuItemsCopy" class="editingMenuItemsElement">{{copy}}</div>
    <div id="editingMenuItemsCut" class="editingMenuItemsElement">{{cut}}</div>
    <div id="editingMenuItemsPaste" class="editingMenuItemsElement">{{paste}}</div>
    <hr id="editingMenuItemsHr">
    
    <div id="elementEditPanelHr" class="elementEditPanelElement">
        {{thickness_px}}: <input id="hr1Edit" class="inptx" value="1" type="number" title="{{thickness_tooltip}}"><br>
        {{width_px_percent}}: <input id="hr2Edit" class="inptx" value="95%" type="text" title="{{width_tooltip}}"><br>
        {{position}}: <select id="hr4Edit" class="sele" title="{{position_tooltip}}">
            <option value="left_clear">{{left_clear}}</option>
            <option value="right_clear">{{right_clear}}</option>
            <option value="center_clear">{{center_clear}}</option>
            <option selected value="left_text">{{left_text}}</option>
            <option value="right_text">{{right_text}}</option>
            <option value="text">{{in_text}}</option>
        </select><br>
        {{color}}: <input type="color" id="hr3cEdit" class="colored" title="{{choose_color}}"><br>
        {{margin_top_px}}: <input id="hrMarginTopEdit" class="inptx" value="0" type="number" title="{{padding_top_tooltip}}"><br>
        {{margin_right_px}}: <input id="hrMarginRightEdit" class="inptx" value="0" type="number" title="{{padding_right_tooltip}}"><br>
        {{margin_bottom_px}}: <input id="hrMarginBottomEdit" class="inptx" value="0" type="number" title="{{padding_bottom_tooltip}}"><br>
        {{margin_left_px}}: <input id="hrMarginLeftEdit" class="inptx" value="0" type="number" title="{{padding_left_tooltip}}"><br>
        <input type="button" id="buthrEdit" class="butin" value="{{edit}}" title="{{edit_hr}}">
    </div>
    
    <div id="elementEditPanelImg" class="elementEditPanelElement">
        {{image_url}}: <input id="ima1Edit" class="inpbig" title="{{url_tooltip}}"><br>
        {{image_width_px}}: <input id="ima6Edit" class="inptx" placeholder="{{auto}}" value="250" type="number" title="{{width_tooltip}}"><br>
        {{image_height_px}}: <input id="ima6aEdit" class="inptx" placeholder="{{auto}}" value="" type="number" title="{{height_tooltip}}"><br>
        {{position}}: <select id="ima4Edit" class="sele" title="{{position_tooltip}}">
            <option value="left_clear">{{left_clear}}</option>
            <option value="right_clear">{{right_clear}}</option>
            <option value="center_clear">{{center_clear}}</option>
            <option selected value="left_text">{{left_text}}</option>
            <option value="right_text">{{right_text}}</option>
            <option value="text">{{in_text}}</option>
        </select><br>
        {{margin_top_px}}: <input id="imaMarginTopEdit" class="inptx" value="0" type="number" title="{{padding_top_tooltip}}"><br>
        {{margin_right_px}}: <input id="imaMarginRightEdit" class="inptx" value="0" type="number" title="{{padding_right_tooltip}}"><br>
        {{margin_bottom_px}}: <input id="imaMarginBottomEdit" class="inptx" value="0" type="number" title="{{padding_bottom_tooltip}}"><br>
        {{margin_left_px}}: <input id="imaMarginLeftEdit" class="inptx" value="0" type="number" title="{{padding_left_tooltip}}"><br>
        {{border_px}}: <input id="ima7Edit" class="inptx" value="0" type="number" title="{{border_tooltip}}"><br>
        {{border_color}}: <input type="color" id="ima8cEdit" class="colored" title="{{choose_color}}"><br>
        {{link_tooltip}}: <input id="imaLinkEdit" class="inpbig" type="url" title="{{link_tooltip}}"><br>
        <input type="button" id="butimaEdit" class="butin" value="{{edit}}" title="{{edit_image}}"><br>
    </div>
    
    <div id="elementEditPanelTable" class="elementEditPanelElement">
        <input type="button" class="buttonEditTable" value="{{add_row}}" id="editTableButtonAddLine" title="{{add_row_tooltip}}"><br>
        <input type="button" class="buttonEditTable" value="{{delete_row}}" id="editTableButtonDeleteLine" title="{{delete_row_tooltip}}"><br>
        <input type="button" class="buttonEditTable" value="{{add_column}}" id="editTableButtonAddColumn" title="{{add_column_tooltip}}"><br>
        <input type="button" class="buttonEditTable" value="{{delete_column}}" id="editTableButtonDeleteColumn" title="{{delete_column_tooltip}}"><br>
        {{width_px_percent}}: <input id="tab1Edit" class="inptx" value="50%" type="text" title="{{width_tooltip}}"><br>
        {{position}}: <select id="tab6Edit" class="sele" title="{{position_tooltip}}">
            <option value="left_clear">{{left_clear}}</option>
            <option value="right_clear">{{right_clear}}</option>
            <option value="center_clear">{{center_clear}}</option>
            <option selected value="left_text">{{left_text}}</option>
            <option value="right_text">{{right_text}}</option>
            <option value="text">{{in_text}}</option>
        </select><br>
        {{padding_inner_px}}: <input id="tab4Edit" class="inptx" value="1" type="number" title="{{padding_inner_tooltip}}"><br>
        {{margin_top_px}}: <input id="tabMarginTopEdit" class="inptx" value="0" type="number" title="{{padding_top_tooltip}}"><br>
        {{margin_right_px}}: <input id="tabMarginRightEdit" class="inptx" value="0" type="number" title="{{padding_right_tooltip}}"><br>
        {{margin_bottom_px}}: <input id="tabMarginBottomEdit" class="inptx" value="0" type="number" title="{{padding_bottom_tooltip}}"><br>
        {{margin_left_px}}: <input id="tabMarginLeftEdit" class="inptx" value="0" type="number" title="{{padding_left_tooltip}}"><br>
        {{border_px}}: <input id="tab9Edit" class="inptx" value="1" type="number" title="{{border_tooltip}}"><br>
        {{border_color}}: <input type="color" id="tab10cEdit" class="colored" title="{{choose_color}}"><br>
        {{background_color}}: <input type="color" id="tab11cEdit" class="colored" value="#FFFFFF" title="{{choose_color}}"><br>
        <input type="button" id="butabEdit" class="butin" value="{{edit}}" title="{{edit_table}}"><br>
    </div>

</div>