Several changes have been made to the admin template, which together with the previous commits result in version 2.1.1:v2.1.1

+ Optimization [CSS]: Unused .fa-* classes have been removed.
+ Optimization [CSS]: Hyphens have been disabled for the text within the content editor.
+ Optimization [CSS]: Some elements now have a smaller padding value which has benefits if the page is displayed on a mobile device.
+ Optimization [HTML]: The HTML <section> elements of the formular have been replaced with simple <div> elements because <section> elements should only be used for self-contained areas which have nothing to do with the rest of the content. The using of <section> elements at this place was semantically incorrect.
+ Implemented [JS]: Tab indents which are made by pressing <tab> can now also be removed by pressing <shift>+<tab>.
+ Optimization [JS]: The functions "emoticonReplace" and "markdownReplace" has been renamed to "insertEmoticon" and "insertMarkdown" and have been restructured.
+ Optimization [JS]: The DOMContentLoaded event listeners are not required because the file is included with the "defer" attribute.
+ Optimization [JS]: A function called "delayed" was added which executes a callback function after an delay of 20 ms (the delayed execution of code is necessary for the "insertEmoticon" and "insertMarkdown" functions because the content editor otherwise will losing focus when clicking outside at the emoticon or markdown buttons while the "onmousedown" event listener is still executing).

7 files changed, 205 insertions, 214 deletions

diff --git a/template/admin/html/auth.php b/template/admin/html/auth.php
index 0ab2d90..f5852c1 100644
--- a/template/admin/html/auth.php
+++ b/template/admin/html/auth.php
@@ -10,21 +10,21 @@
 <form action="" method="POST">
 	<input type="hidden" name="token" value="<?=Application::getSecurityToken()?>" />
 
-	<section class="flex">
-		<section>
+	<div class="flex">
+		<div class="flex-item">
 			<div class="form-icon-flex"><i class="fa fa-user-secret"></i></div>
 			<div class="form-label-flex"><label for="form_username"><?=$Language->template('label_username')?></label></div>
 			<div class="form-field-flex"><input id="form_username" name="username" value="<?=escapeHTML($FORM['DATA']['USERNAME'])?>" /></div>
-		</section>
-	</section>
-	<section class="flex">
-		<section>
+		</div>
+	</div>
+	<div class="flex">
+		<div class="flex-item">
 			<div class="form-icon-flex"><i class="fa fa-key"></i></div>
 			<div class="form-label-flex"><label for="form_password"><?=$Language->template('label_password')?></label></div>
 			<div class="form-field-flex"><input type="password" id="form_password" name="password" /></div>
-		</section>
-	</section>
-	<section class="flex flex-padding background">
+		</div>
+	</div>
+	<div class="flex flex-padding background">
 		<input type="submit" name="auth" value="Auth" />
-	</section>
+	</div>
 </form>
\ No newline at end of file
diff --git a/template/admin/html/database.php b/template/admin/html/database.php
index 3aad84e..8e69459 100644
--- a/template/admin/html/database.php
+++ b/template/admin/html/database.php
@@ -10,17 +10,17 @@
 <form action="" method="POST">
 	<input type="hidden" name="token" value="<?=$FORM['TOKEN']?>" />
 
-	<section class="flex flex-padding">
+	<div class="flex flex-padding">
 		<textarea id="content-editor" placeholder="<?=$Language->template('database_warning')?>" name="command"><?=escapeHTML($FORM['COMMAND'])?></textarea>
-	</section>
+	</div>
 
 <?php if($FORM['RESULT']): ?>
-	<section class="flex flex-padding background flex-direction-column">
+	<div class="flex flex-padding background flex-direction-column">
 		<pre id="database-result"><?=escapeHTML($FORM['RESULT'])?></pre>
-	</section>
+	</div>
 <?php endif; ?>
 
-	<section class="flex flex-padding background">
+	<div class="flex flex-padding background">
 		<input type="submit" name="execute" value="Execute" />
-	</section>
+	</div>
 </form>
\ No newline at end of file
diff --git a/template/admin/html/page/form.php b/template/admin/html/page/form.php
index 4ab61ae..93c45fe 100644
--- a/template/admin/html/page/form.php
+++ b/template/admin/html/page/form.php
@@ -8,13 +8,13 @@
 	<input type="hidden" name="token" value="<?=$FORM['TOKEN']?>" />
 
 <?php if($FORM['TYPE'] !== 'DELETE'): ?>
-	<section class="flex flex-responsive">
-		<section>
+	<div class="flex flex-responsive">
+		<div class="flex-item">
 			<div class="form-icon-flex"><i class="fa fa-database"></i></div>
 			<div class="form-label-flex"><label for="form_id">ID</label></div>
 			<div class="form-field-flex"><input<?=($FORM['TYPE'] === 'UPDATE') ? ' disabled="disabled"' : '';?> id="form_id" name="id" type="number" placeholder="[AUTO_INCREMENT]" value="<?=escapeHTML($FORM['DATA']['ID'])?>" /></div>
-		</section>
-		<section>
+		</div>
+		<div class="flex-item">
 			<div class="form-icon-flex"><i class="fa fa-user"></i></div>
 			<div class="form-label-flex"><label for="form_user"><?=$Language->template('label_user')?></label></div>
 			<div class="form-field-flex">
@@ -24,46 +24,46 @@
 					<?php endforeach; ?>
 				</select>
 			</div>
-		</section>
-	</section>
-	<section class="flex flex-responsive">
-		<section>
+		</div>
+	</div>
+	<div class="flex flex-responsive">
+		<div class="flex-item">
 			<div class="form-icon-flex"><i class="fa fa-file-text-o"></i></div>
 			<div class="form-label-flex"><label for="form_name"><?=$Language->template('label_name')?></label></div>
 			<div class="form-field-flex"><input id="form_name" name="name" value="<?=escapeHTML($FORM['DATA']['NAME'])?>" /></div>
-		</section>
-		<section>
+		</div>
+		<div class="flex-item">
 			<div class="form-icon-flex"><i class="fa fa-link"></i></div>
 			<div class="form-label-flex"><label for="form_slug"><?=$Language->template('label_slug')?></label></div>
 			<div class="form-field-flex"><input id="form_slug" name="slug" value="<?=escapeHTML($FORM['DATA']['SLUG'])?>" /></div>
-		</section>
-	</section>
-	<section class="flex flex-responsive">
-		<section>
+		</div>
+	</div>
+	<div class="flex flex-responsive">
+		<div class="flex-item">
 			<div class="form-icon-flex"><i class="fa fa-clock-o"></i></div>
 			<div class="form-label-flex"><label for="form_time_insert"><?=$Language->template('label_insert')?></label></div>
 			<div class="form-field-flex"><input id="form_time_insert" name="time_insert" placeholder="[YYYY-MM-DD HH:II:SS]" value="<?=escapeHTML($FORM['DATA']['TIME_INSERT'])?>" /></div>
-		</section>
-		<section>
+		</div>
+		<div class="flex-item">
 			<div class="form-icon-flex"><i class="fa fa-clock-o"></i></div>
 			<div class="form-label-flex"><label for="form_time_update"><?=$Language->template('label_update')?></label></div>
 			<div class="form-field-flex"><input id="form_time_update" name="time_update" placeholder="<?=escapeHTML($FORM['DATA']['TIME_UPDATE'] ? $FORM['DATA']['TIME_UPDATE'] : '[CURRENT_TIMESTAMP]')?>" value="" /></div>
-		</section>
-	</section>
-	<section class="flex flex-padding">
+		</div>
+	</div>
+	<div class="flex flex-padding">
 		<textarea id="content-editor" name="body" placeholder="[…]"><?=escapeHTML($FORM['DATA']['BODY'])?></textarea>
-	</section>
-	<section class="flex flex-padding background flex-arguments">
+	</div>
+	<div class="flex flex-padding background flex-arguments">
 		<input id="form_argv" name="argv" maxlength="100" placeholder="[ARGUMENT_FOO=one|ARGUMENT_BAR=two …]" value="<?=escapeHTML($FORM['DATA']['ARGV'])?>" />
-	</section>
-	<section class="flex flex-padding background flex-emoticons">
+	</div>
+	<div class="flex flex-padding background flex-emoticons">
 		<ul id="emoticon-list" class="button-list emoticons">
 			<?php foreach(getEmoticons() as $emoticon => $data):?>
 				<li data-emoticon="<?=$emoticon?>" title="<?=$data[1]?>"><?=$data[0]?></li>
 			<?php endforeach; ?>
 		</ul>
-	</section>
-	<section class="flex flex-padding background">
+	</div>
+	<div class="flex flex-padding background">
 		<ul id="markdown-list" class="button-list markdown">
 			<li data-markdown="bold" class="fa fa-bold" title="<?=$Language->template('markdown_bold')?>"></li>
 			<li data-markdown="italic" class="fa fa-italic" title="<?=$Language->template('markdown_italic')?>"></li>
@@ -75,14 +75,14 @@
 			<li data-markdown="list_ul" class="fa fa-list-ul" title="<?=$Language->template('markdown_list_ul')?>"></li>
 			<li data-markdown="list_ol" class="fa fa-list-ol" title="<?=$Language->template('markdown_list_ol')?>"></li>
 		</ul>
-	</section>
+	</div>
 <?php else: ?>
-	<section class="flex flex-padding background flex-direction-column">
+	<div class="flex flex-padding background flex-direction-column">
 		<?=$HTML?>
-	</section>
+	</div>
 <?php endif; ?>
 
-	<section class="flex flex-padding background">
+	<div class="flex flex-padding background">
 		<?php if($FORM['TYPE'] === 'INSERT'): ?>
 			<input type="submit" name="insert" value="<?=$Language->text('insert')?>" />
 		<?php elseif($FORM['TYPE'] === 'UPDATE'): ?>
@@ -90,5 +90,5 @@
 		<?php elseif($FORM['TYPE'] === 'DELETE'): ?>
 			<input type="submit" name="delete" value="<?=$Language->text('delete')?>" id="delete-button" data-text="<?=$Language->template('sure')?>" />
 		<?php endif; ?>
-	</section>
+	</div>
 </form>
\ No newline at end of file
diff --git a/template/admin/html/post/form.php b/template/admin/html/post/form.php
index 3ad4376..14888aa 100644
--- a/template/admin/html/post/form.php
+++ b/template/admin/html/post/form.php
@@ -8,13 +8,13 @@
 	<input type="hidden" name="token" value="<?=$FORM['TOKEN']?>" />
 
 <?php if($FORM['TYPE'] !== 'DELETE'): ?>
-	<section class="flex flex-responsive">
-		<section>
+	<div class="flex flex-responsive">
+		<div class="flex-item">
 			<div class="form-icon-flex"><i class="fa fa-database"></i></div>
 			<div class="form-label-flex"><label for="form_id">ID</label></div>
 			<div class="form-field-flex"><input<?=($FORM['TYPE'] === 'UPDATE') ? ' disabled="disabled"' : '';?> id="form_id" name="id" type="number" placeholder="[AUTO_INCREMENT]" value="<?=escapeHTML($FORM['DATA']['ID'])?>" /></div>
-		</section>
-		<section>
+		</div>
+		<div class="flex-item">
 			<div class="form-icon-flex"><i class="fa fa-user"></i></div>
 			<div class="form-label-flex"><label for="form_user"><?=$Language->template('label_user')?></label></div>
 			<div class="form-field-flex">
@@ -24,46 +24,46 @@
 					<?php endforeach; ?>
 				</select>
 			</div>
-		</section>
-	</section>
-	<section class="flex flex-responsive">
-		<section>
+		</div>
+	</div>
+	<div class="flex flex-responsive">
+		<div class="flex-item">
 			<div class="form-icon-flex"><i class="fa fa-newspaper-o"></i></div>
 			<div class="form-label-flex"><label for="form_name"><?=$Language->template('label_name')?></label></div>
 			<div class="form-field-flex"><input id="form_name" name="name" value="<?=escapeHTML($FORM['DATA']['NAME'])?>" /></div>
-		</section>
-		<section>
+		</div>
+		<div class="flex-item">
 			<div class="form-icon-flex"><i class="fa fa-link"></i></div>
 			<div class="form-label-flex"><label for="form_slug"><?=$Language->template('label_slug')?></label></div>
 			<div class="form-field-flex"><input id="form_slug" name="slug" value="<?=escapeHTML($FORM['DATA']['SLUG'])?>" /></div>
-		</section>
-	</section>
-	<section class="flex flex-responsive">
-		<section>
+		</div>
+	</div>
+	<div class="flex flex-responsive">
+		<div class="flex-item">
 			<div class="form-icon-flex"><i class="fa fa-clock-o"></i></div>
 			<div class="form-label-flex"><label for="form_time_insert"><?=$Language->template('label_insert')?></label></div>
 			<div class="form-field-flex"><input id="form_time_insert" name="time_insert" placeholder="[YYYY-MM-DD HH:II:SS]" value="<?=escapeHTML($FORM['DATA']['TIME_INSERT'])?>" /></div>
-		</section>
-		<section>
+		</div>
+		<div class="flex-item">
 			<div class="form-icon-flex"><i class="fa fa-clock-o"></i></div>
 			<div class="form-label-flex"><label for="form_time_update"><?=$Language->template('label_update')?></label></div>
 			<div class="form-field-flex"><input id="form_time_update" name="time_update" placeholder="<?=escapeHTML($FORM['DATA']['TIME_UPDATE'] ? $FORM['DATA']['TIME_UPDATE'] : '[CURRENT_TIMESTAMP]')?>" value="" /></div>
-		</section>
-	</section>
-	<section class="flex flex-padding">
+		</div>
+	</div>
+	<div class="flex flex-padding">
 		<textarea id="content-editor" name="body" placeholder="[…]"><?=escapeHTML($FORM['DATA']['BODY'])?></textarea>
-	</section>
-	<section class="flex flex-padding background flex-arguments">
+	</div>
+	<div class="flex flex-padding background flex-arguments">
 		<input id="form_argv" name="argv" maxlength="100" placeholder="[ARGUMENT_FOO=one|ARGUMENT_BAR=two …]" value="<?=escapeHTML($FORM['DATA']['ARGV'])?>" />
-	</section>
-	<section class="flex flex-padding background flex-emoticons">
+	</div>
+	<div class="flex flex-padding background flex-emoticons">
 		<ul id="emoticon-list" class="button-list emoticons">
 			<?php foreach(getEmoticons() as $emoticon => $data):?>
 				<li data-emoticon="<?=$emoticon?>" title="<?=$data[1]?>"><?=$data[0]?></li>
 			<?php endforeach; ?>
 		</ul>
-	</section>
-	<section class="flex flex-padding background">
+	</div>
+	<div class="flex flex-padding background">
 		<ul id="markdown-list" class="button-list markdown">
 			<li data-markdown="bold" class="fa fa-bold" title="<?=$Language->template('markdown_bold')?>"></li>
 			<li data-markdown="italic" class="fa fa-italic" title="<?=$Language->template('markdown_italic')?>"></li>
@@ -75,14 +75,14 @@
 			<li data-markdown="list_ul" class="fa fa-list-ul" title="<?=$Language->template('markdown_list_ul')?>"></li>
 			<li data-markdown="list_ol" class="fa fa-list-ol" title="<?=$Language->template('markdown_list_ol')?>"></li>
 		</ul>
-	</section>
+	</div>
 <?php else: ?>
-	<section class="flex flex-padding background flex-direction-column">
+	<div class="flex flex-padding background flex-direction-column">
 		<?=$HTML?>
-	</section>
+	</div>
 <?php endif; ?>
 
-	<section class="flex flex-padding background">
+	<div class="flex flex-padding background">
 		<?php if($FORM['TYPE'] === 'INSERT'): ?>
 			<input type="submit" name="insert" value="<?=$Language->text('insert')?>" />
 		<?php elseif($FORM['TYPE'] === 'UPDATE'): ?>
@@ -90,5 +90,5 @@
 		<?php elseif($FORM['TYPE'] === 'DELETE'): ?>
 			<input type="submit" name="delete" value="<?=$Language->text('delete')?>" id="delete-button" data-text="<?=$Language->template('sure')?>" />
 		<?php endif; ?>
-	</section>
+	</div>
 </form>
\ No newline at end of file
diff --git a/template/admin/html/user/form.php b/template/admin/html/user/form.php
index be8502c..a260ee0 100644
--- a/template/admin/html/user/form.php
+++ b/template/admin/html/user/form.php
@@ -8,68 +8,68 @@
 	<input type="hidden" name="token" value="<?=$FORM['TOKEN']?>" />
 
 <?php if($FORM['TYPE'] !== 'DELETE'): ?>
-	<section class="flex flex-responsive">
-		<section>
+	<div class="flex flex-responsive">
+		<div class="flex-item">
 			<div class="form-icon-flex"><i class="fa fa-database"></i></div>
 			<div class="form-label-flex"><label for="form_id">ID</label></div>
 			<div class="form-field-flex"><input<?=($FORM['TYPE'] === 'UPDATE') ? ' disabled="disabled"' : '';?> id="form_id" name="id" type="number" placeholder="[AUTO_INCREMENT]" value="<?=escapeHTML($FORM['DATA']['ID'])?>" /></div>
-		</section>
-		<section>
+		</div>
+		<div class="flex-item">
 			<div class="form-icon-flex"><i class="fa fa-key"></i></div>
 			<div class="form-label-flex"><label for="form_password"><?=$Language->template('label_password')?></label></div>
 			<div class="form-field-flex"><input id="form_password" name="password" placeholder="[NO CHANGE]" value="<?=escapeHTML($FORM['DATA']['PASSWORD'])?>" type="password" /></div>
-		</section>
-	</section>
-	<section class="flex flex-responsive">
-		<section>
+		</div>
+	</div>
+	<div class="flex flex-responsive">
+		<div class="flex-item">
 			<div class="form-icon-flex"><i class="fa fa-user"></i></div>
 			<div class="form-label-flex"><label for="form_fullname"><?=$Language->template('label_fullname')?></label></div>
 			<div class="form-field-flex"><input id="form_fullname" name="fullname" value="<?=escapeHTML($FORM['DATA']['FULLNAME'])?>" /></div>
-		</section>
-		<section>
+		</div>
+		<div class="flex-item">
 			<div class="form-icon-flex"><i class="fa fa-envelope-o"></i></div>
 			<div class="form-label-flex"><label for="form_mailaddr"><?=$Language->template('label_mailaddr')?></label></div>
 			<div class="form-field-flex"><input id="form_mailaddr" name="mailaddr" value="<?=escapeHTML($FORM['DATA']['MAILADDR'])?>" /></div>
-		</section>
-	</section>
-	<section class="flex flex-responsive">
-		<section>
+		</div>
+	</div>
+	<div class="flex flex-responsive">
+		<div class="flex-item">
 			<div class="form-icon-flex"><i class="fa fa-user-secret"></i></div>
 			<div class="form-label-flex"><label for="form_username"><?=$Language->template('label_username')?></label></div>
 			<div class="form-field-flex"><input id="form_username" name="username" value="<?=escapeHTML($FORM['DATA']['USERNAME'])?>" /></div>
-		</section>
-		<section>
+		</div>
+		<div class="flex-item">
 			<div class="form-icon-flex"><i class="fa fa-link"></i></div>
 			<div class="form-label-flex"><label for="form_slug"><?=$Language->template('label_slug')?></label></div>
 			<div class="form-field-flex"><input id="form_slug" name="slug" value="<?=escapeHTML($FORM['DATA']['SLUG'])?>" /></div>
-		</section>
-	</section>
-	<section class="flex flex-responsive">
-		<section>
+		</div>
+	</div>
+	<div class="flex flex-responsive">
+		<div class="flex-item">
 			<div class="form-icon-flex"><i class="fa fa-clock-o"></i></div>
 			<div class="form-label-flex"><label for="form_time_insert"><?=$Language->template('label_insert')?></label></div>
 			<div class="form-field-flex"><input id="form_time_insert" name="time_insert" placeholder="[YYYY-MM-DD HH:II:SS]" value="<?=escapeHTML($FORM['DATA']['TIME_INSERT'])?>" /></div>
-		</section>
-		<section>
+		</div>
+		<div class="flex-item">
 			<div class="form-icon-flex"><i class="fa fa-clock-o"></i></div>
 			<div class="form-label-flex"><label for="form_time_update"><?=$Language->template('label_update')?></label></div>
 			<div class="form-field-flex"><input id="form_time_update" name="time_update" placeholder="<?=escapeHTML($FORM['DATA']['TIME_UPDATE'] ? $FORM['DATA']['TIME_UPDATE'] : '[CURRENT_TIMESTAMP]')?>" value="" /></div>
-		</section>
-	</section>
-	<section class="flex flex-padding">
+		</div>
+	</div>
+	<div class="flex flex-padding">
 		<textarea id="content-editor" name="body" placeholder="[…]"><?=escapeHTML($FORM['DATA']['BODY'])?></textarea>
-	</section>
-	<section class="flex flex-padding background flex-arguments">
+	</div>
+	<div class="flex flex-padding background flex-arguments">
 		<input id="form_argv" name="argv" maxlength="100" placeholder="[ARGUMENT_FOO=one|ARGUMENT_BAR=two …]" value="<?=escapeHTML($FORM['DATA']['ARGV'])?>" />
-	</section>
-	<section class="flex flex-padding background flex-emoticons">
+	</div>
+	<div class="flex flex-padding background flex-emoticons">
 		<ul id="emoticon-list" class="button-list emoticons">
 			<?php foreach(getEmoticons() as $emoticon => $data):?>
 				<li data-emoticon="<?=$emoticon?>" title="<?=$data[1]?>"><?=$data[0]?></li>
 			<?php endforeach; ?>
 		</ul>
-	</section>
-	<section class="flex flex-padding background">
+	</div>
+	<div class="flex flex-padding background">
 		<ul id="markdown-list" class="button-list markdown">
 			<li data-markdown="bold" class="fa fa-bold" title="<?=$Language->template('markdown_bold')?>"></li>
 			<li data-markdown="italic" class="fa fa-italic" title="<?=$Language->template('markdown_italic')?>"></li>
@@ -81,14 +81,14 @@
 			<li data-markdown="list_ul" class="fa fa-list-ul" title="<?=$Language->template('markdown_list_ul')?>"></li>
 			<li data-markdown="list_ol" class="fa fa-list-ol" title="<?=$Language->template('markdown_list_ol')?>"></li>
 		</ul>
-	</section>
+	</div>
 <?php else: ?>
-	<section class="flex flex-padding background flex-direction-column">
+	<div class="flex flex-padding background flex-direction-column">
 		<?=$HTML?>
-	</section>
+	</div>
 <?php endif; ?>
 
-	<section class="flex flex-padding background">
+	<div class="flex flex-padding background">
 		<?php if($FORM['TYPE'] === 'INSERT'): ?>
 			<input type="submit" name="insert" value="<?=$Language->text('insert')?>" />
 		<?php elseif($FORM['TYPE'] === 'UPDATE'): ?>
@@ -96,5 +96,5 @@
 		<?php elseif($FORM['TYPE'] === 'DELETE'): ?>
 			<input type="submit" name="delete" value="<?=$Language->text('delete')?>" id="delete-button" data-text="<?=$Language->template('sure')?>" />
 		<?php endif; ?>
-	</section>
+	</div>
 </form>
\ No newline at end of file
diff --git a/template/admin/rsrc/main.css b/template/admin/rsrc/main.css
index aa13b22..ed79989 100644
--- a/template/admin/rsrc/main.css
+++ b/template/admin/rsrc/main.css
@@ -31,8 +31,8 @@ h5{font-size:0.55rem;}h6{font-size:0.50rem;}
 /* Document
 /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
 html,body{margin:0;padding:0;}
-main{padding:1rem;}
-html{font-size:1.25rem;color:#333;background:url(background.png) fixed center #CCC;-webkit-hyphens:auto;hyphens:auto;}
+main{padding:0.75rem;}
+html{font-size:1.25rem;color:#333;background:url("background.png") fixed center #CCC;-webkit-hyphens:auto;hyphens:auto;}
 body{font-family:Ruda,sans-serif;font-size:0.7rem;line-height:1.2rem;}
 
 /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
@@ -54,9 +54,9 @@ body{font-family:Ruda,sans-serif;font-size:0.7rem;line-height:1.2rem;}
 #header-desc{font-size:0.6rem;font-weight:700;line-height:1rem;}
 #header-desc span{color:#CCC;}
 #header-logo{display:block;max-height:5rem;float:left;margin-right:0.5rem;}
-.header-line{padding:0.5rem 1rem;overflow:hidden;}
+.header-line{padding:0.5rem 0.75rem;overflow:hidden;}
 .header-line:first-child{background:#5E819F;position:sticky;top:0;}
-.header-line:last-child{background:#EEE;border:0.05rem solid #AAA;border-left:none;border-right:none;padding:0.25rem 1rem;}
+.header-line:last-child{background:#EEE;border:0.05rem solid #AAA;border-left:none;border-right:none;padding:0.25rem 0.75rem;}
 
 /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
 /* Footer
@@ -85,11 +85,9 @@ body{font-family:Ruda,sans-serif;font-size:0.7rem;line-height:1.2rem;}
 #site-navi{clear:both;display:flex;box-sizing:border-box;justify-content:space-between;}
 #site-navi > div{display:flex;align-items:center;border:0.05rem solid #AAA;background:#EEE;}
 #site-navi > div > a{display:block;}
-#site-navi > section{display:flex;overflow:hidden;align-items:center;}
-#site-navi > section > div{border:0.05rem solid #AAA;background:#EEE;}
 
 #site-navi .disabled{pointer-events:none;color:#AAA;}
-#site-navi .active a{background:#CCC !important;font-weight:600;pointer-events: none;}
+#site-navi .active a{background:#CCC !important;font-weight:600;pointer-events:none;}
 
 #site-navi ol{list-style:none;margin:0;padding:0;}
 #site-navi li{float:left;display:inline-block;}
@@ -111,13 +109,10 @@ img{border:none;max-width:100%;}
 #database-result{color:inherit;}
 
 /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
-/* Table elements
+/* Tables
 /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
-table{width:100%;margin:0 0 1rem;}td{vertical-align:middle;}
-table,td{border-spacing:0;border-collapse:collapse;padding:0.5rem;border:0.05rem solid #000;}
-thead,tr:nth-child(even){background:#EEE;}
-thead > tr, th{font-weight:700;font-style:italic;}
-thead > tr > td, th > td{text-align:center;}
+table{width:100%;margin-bottom:1rem;}td{vertical-align:middle;}
+table,td{padding:0.5rem;border:0.05rem solid #AAA;}
 
 /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
 /* Brackets
@@ -138,8 +133,8 @@ a.brackets:before,a.brackets:after{color:#222;}
 .item-list-li{display:block;border:0.05rem solid #AAA;margin-bottom:1rem;clear:both;}
 .item-list-li > header,
 .item-list-li > footer{background:#EEE;overflow:hidden;}
-.item-list-li > blockquote{margin:0;padding:1rem;font-family:inherit;}
-.item-list-li > header{padding:0.5rem 1rem;border-bottom:0.05rem solid #AAA;position:sticky;top:0;}
+.item-list-li > blockquote{margin:0;padding:0.75rem;font-family:inherit;}
+.item-list-li > header{padding:0.5rem 0.75rem;border-bottom:0.05rem solid #AAA;position:sticky;top:0;}
 .item-list-li > footer{border-top:0.05rem solid #AAA;}
 .item-list-li > footer > ul{margin:0;padding:0;list-style:none;}
 .item-list-li > footer > ul > li{display:inline-block;float:left;}
@@ -152,7 +147,7 @@ a.brackets:before,a.brackets:after{color:#222;}
 /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
 /* Argument list
 /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
-.arguments{list-style:none;margin:0;padding:0.25rem 1rem;background:#EEE;font-size:0.6rem;text-align:center;border-top:0.05rem solid #AAA;}
+.arguments{list-style:none;margin:0;padding:0.25rem 0.75rem;background:#EEE;font-size:0.6rem;text-align:center;border-top:0.05rem solid #AAA;}
 .arguments > li{display:inline;}
 .arguments > li:before{content:"[";font-weight:700;margin-right:0.1rem;}
 .arguments > li:after{content:"]";font-weight:700;margin-left:0.1rem;}
@@ -163,19 +158,18 @@ a.brackets:before,a.brackets:after{color:#222;}
 form{border:0.05rem solid #AAA;}
 
 .flex{display:flex;width:100%;justify-content:center;overflow:hidden;box-sizing:border-box;}
-.flex + section{border-top:0.05rem solid #AAA;}
-.flex > section {display:flex;box-sizing:padding-box;width:100%;}
-.flex > section{border-right:0.05rem solid #AAA;}
-.flex > section:last-child{border-right:none;}
-.flex > section > div{display:flex;align-items:center;padding:0.5rem;box-sizing:border-box;}
-.flex > section > div + div{border-left:0.05rem solid #AAA;}
-.flex.flex-responsive > section{width:50%;}
+.flex + .flex{border-top:0.05rem solid #AAA;}
+.flex > .flex-item {display:flex;box-sizing:padding-box;width:100%;}
+.flex > .flex-item{border-right:0.05rem solid #AAA;}
+.flex > .flex-item:last-child{border-right:none;}
+.flex > .flex-item > div{display:flex;align-items:center;padding:0.5rem;box-sizing:border-box;}
+.flex > .flex-item > div + div{border-left:0.05rem solid #AAA;}
+.flex.flex-responsive > .flex-item{width:50%;}
 
 .form-icon-flex{background:#DDD;width:10%;justify-content:center;}
 .form-label-flex{background:#DDD;width:30%;border-left:none !important;}
 .form-field-flex{width:60%;}
 
-.fa + label{margin-left:0.25rem;}
 .background{background:#DDD;}
 .flex-padding{padding:0.5rem;}
 .flex-direction-column{flex-direction:column;}
@@ -193,7 +187,7 @@ form{border:0.05rem solid #AAA;}
 /* Form elements
 /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
 input,select,textarea{width:100%;box-sizing:padding-box;background:#EEE;color:#404040;font-family:inherit;font-size:0.7rem;padding:0.25rem;border:0.05rem solid #AAA;}
-textarea{font-family:Kadwa,sans-serif;box-sizing:border-box;display:inline-block;resize:vertical;min-height:15rem;line-height:1.4rem;padding:0.75rem;}
+textarea{font-family:Kadwa,sans-serif;box-sizing:border-box;display:inline-block;resize:vertical;min-height:15rem;line-height:1.3rem;padding:0.5rem;-webkit-hyphens:none;hyphens:none;}
 input[type="submit"]{text-transform:uppercase;}
 input:disabled{background:#DDD;color:#888;}
 input:disabled:hover{cursor:not-allowed;}
@@ -208,33 +202,25 @@ label:after{content:":";}
 /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
 /* FontAwesome Icons
 /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
-.fa-rss:before{content:"\f09e"}
 .fa-bug:before{content:"\f188"}
 .fa-key:before{content:"\f084"}
 .fa-link:before{content:"\f0c1"}
 .fa-bold:before{content:"\f032"}
 .fa-code:before{content:"\f121"}
-.fa-bars:before{content:"\f0c9"}
 .fa-user:before{content:"\f007"}
-.fa-home:before{content:"\f015"}
-.fa-plus:before{content:"\f067"}
 .fa-book:before{content:"\f02d"}
 .fa-italic:before{content:"\f033"}
 .fa-header:before{content:"\f1dc"}
-.fa-search:before{content:"\f002"}
 .fa-trash-o:before{content:"\f014"}
 .fa-sign-in:before{content:"\f090"}
 .fa-clock-o:before{content:"\f017"}
 .fa-list-ul:before{content:"\f0ca"}
 .fa-list-ol:before{content:"\f0cb"}
-.fa-smile-o:before{content:"\f118"}
 .fa-database:before{content:"\f1c0"}
 .fa-sign-out:before{content:"\f08b"}
 .fa-dashboard:before{content:"\f0e4"}
 .fa-picture-o:before{content:"\f03e"}
 .fa-envelope-o:before{content:"\f003"}
-.fa-eyedropper:before{content:"\f1fb"}
-.fa-rss-square:before{content:"\f143"}
 .fa-arrow-left:before{content:"\f060"}
 .fa-quote-right:before{content:"\f10e"}
 .fa-user-secret:before{content:"\f21b"}
@@ -244,8 +230,6 @@ label:after{content:":";}
 .fa-external-link:before{content:"\f08e"}
 .fa-github-square:before{content:"\f092"}
 .fa-pencil-square-o:before{content:"\f044"}
-.fa-question-circle:before{content:"\f059"}
-.fa-pencil-square-o:before{content:"\f044"}
 .fa-exclamation-triangle:before{content:"\f071"}
 
 /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
@@ -260,15 +244,15 @@ label:after{content:":";}
 /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
 @media only screen and (max-width:37.5rem) {
 	.flex.flex-responsive{display:block;width:auto;}
-	.flex.flex-responsive > section {width:100%;}
-	.flex.flex-responsive > section + section{border-top:0.05rem solid #AAA;}
+	.flex.flex-responsive > .flex-item {width:100%;}
+	.flex.flex-responsive > .flex-item + .flex-item{border-top:0.05rem solid #AAA;}
 
 	#main-navi{font-size:1rem;}
 	#main-navi li span{display:none;}
 	#main-navi li .fa{margin-right:0;}
 	#main-navi a{padding:0.5rem;}
 
-	.flex-emoticons{display:none !important;}
+	.flex-emoticons{display:none;}
 }
 
 /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
diff --git a/template/admin/rsrc/main.js b/template/admin/rsrc/main.js
index a93b8be..f6f7884 100644
--- a/template/admin/rsrc/main.js
+++ b/template/admin/rsrc/main.js
@@ -7,10 +7,10 @@ var next = document.getElementById("next-site");
 //==============================================================================
 // Handle arrow keys and change the location to the desired direction
 //==============================================================================
-document.addEventListener("keyup", function(event) {
-	if(!event.ctrlKey && !event.shiftKey) {
-		(event.keyCode === 37 && prev) && (window.location.href = prev.getAttribute("href"));
-		(event.keyCode === 39 && next) && (window.location.href = next.getAttribute("href"));
+document.addEventListener("keyup", function(e) {
+	if(!e.ctrlKey && !e.shiftKey) {
+		(e.keyCode === 37 && prev) && (window.location.href = prev.getAttribute("href"));
+		(e.keyCode === 39 && next) && (window.location.href = next.getAttribute("href"));
 	}
 }, false);
 
@@ -30,124 +30,131 @@ var markdownTags = {
 };
 
 //==============================================================================
+// Timeout function for delayed execution of code
+//==============================================================================
+function delayed(callback) {
+	window.setTimeout(callback, 20);
+}
+
+//==============================================================================
 // Set caret position in editor
 //==============================================================================
 function setCaretPosition(position) {
-	window.setTimeout(function() {
-		document.getElementById("content-editor").focus();
-		document.getElementById("content-editor").setSelectionRange(position, position);
-	}, 50);
-
+	document.getElementById("content-editor").setSelectionRange(position, position);
+	document.getElementById("content-editor").focus();
 }
 
 //==============================================================================
-// Insert markdown around text in editor
+// Insert emoticon after cursor in editor
 //==============================================================================
-function markdownReplace(tagname) {
-	var element = document.activeElement;
+function insertEmoticon(target, emoticon) {
+	var selectionStart = target.selectionStart;
+	var selectionEnd = target.selectionEnd;
 
-	if(element.nodeName === 'TEXTAREA') {
-		var selectionStart = element.selectionStart;
-		var selectionEnd = element.selectionEnd;
+	var content = target.value;
+	target.value = content.slice(0, selectionStart) + emoticon + content.slice(selectionEnd);
 
-		var selectedText = element.value.substring(selectionStart, selectionEnd);
-
-		var content = element.value;
-		element.value = content.slice(0, selectionStart) + markdownTags[tagname][0] + selectedText + markdownTags[tagname][1] + content.slice(selectionEnd);
-
-		setCaretPosition(selectionStart + markdownTags[tagname][0].length + selectedText.length + markdownTags[tagname][1].length);
-	}
+	delayed(function() {
+		setCaretPosition(selectionStart + emoticon.length);
+	});
 }
 
 //==============================================================================
-// Insert emoticon after cursor in editor
+// Insert markdown around text in editor
 //==============================================================================
-function emoticonReplace(emoticon) {
-	var element = document.activeElement;
+function insertMarkdown(target, markdown) {
+	var selectionStart = target.selectionStart;
+	var selectionEnd = target.selectionEnd;
 
-	if(element.nodeName === 'TEXTAREA') {
-		var selectionStart = element.selectionStart;
-		var selectionEnd = element.selectionEnd;
+	var selectedText = target.value.substring(selectionStart, selectionEnd);
 
-		var content = element.value;
-		element.value = content.slice(0, selectionStart) + emoticon + content.slice(selectionEnd);
+	var content = target.value;
+	target.value = content.slice(0, selectionStart) + markdownTags[markdown][0] + selectedText + markdownTags[markdown][1] + content.slice(selectionEnd);
 
-		setCaretPosition(selectionStart + emoticon.length);
-	}
+	delayed(function() {
+		setCaretPosition(selectionStart + markdownTags[markdown][0].length + selectedText.length + markdownTags[markdown][1].length);
+	});
 }
 
 //==============================================================================
 // Keep server-side session active if the user is writing a long text
 //==============================================================================
-addEventListener("DOMContentLoaded", function() {
-	setInterval(function() {
-		var Request = new XMLHttpRequest();
-		Request.open("HEAD", "", true);
-		Request.send();
-	}, 300000);
-}, false);
+setInterval(function() {
+	var Request = new XMLHttpRequest();
+	Request.open("HEAD", "", true);
+	Request.send();
+}, 300000);
 
 //==============================================================================
-// Insert tab indent into editor if <tab> is pressed
+// Confirmation message for delete button
 //==============================================================================
-addEventListener("DOMContentLoaded", function() {
+if(document.getElementById("delete-button")) {
+	document.getElementById("delete-button").onclick = function(e) {
+		return confirm(e.target.getAttribute('data-text'));
+	};
+}
+
+//==============================================================================
+// Insert or remove tab indent in editor if [<shift>+]<tab> is pressed
+//==============================================================================
+(function() {
 	if(document.getElementById("content-editor")) {
 		var element = document.getElementById("content-editor");
 		element.addEventListener('keydown', function(e) {
-			if(e.keyCode === 9 && !e.ctrlKey && !e.shiftKey) {
+			if(e.keyCode === 9 && !e.ctrlKey) {
 				var selectionStart = element.selectionStart;
 				var selectionEnd = element.selectionEnd;
 
 				var content = element.value;
 
-				element.value = content.substring(0, selectionStart) + "\t" + content.substring(selectionEnd);
+				if(e.shiftKey) {
+					if(content.substring(selectionStart, selectionStart -1) === "\t") {
+						element.value = content.substring(0, selectionStart - 1) + content.substring(selectionEnd);
+						setCaretPosition(selectionStart - 1);
+					}
+				}
+
+				else {
+					element.value = content.substring(0, selectionStart) + "\t" + content.substring(selectionEnd);
+					setCaretPosition(selectionStart + 1);
+				}
 
-				setCaretPosition(selectionStart + 1);
 				e.preventDefault();
 			}
 		}, false);
 	}
-}, false);
+})();
 
 //==============================================================================
-// Confirmation message for delete buttons
+// Emoticon button list
 //==============================================================================
-addEventListener("DOMContentLoaded", function() {
-	if(document.getElementById("delete-button")) {
-		document.getElementById("delete-button").onclick = function(e) {
-			return confirm(e.target.getAttribute('data-text'));
-		};
-	}
-}, false);
-
-//==============================================================================
-// Emoticon listener
-//==============================================================================
-addEventListener("DOMContentLoaded", function() {
+(function() {
 	if(document.getElementById("emoticon-list")) {
 		var list = document.getElementById("emoticon-list");
+		var node = document.getElementById("content-editor");
 		var items = list.getElementsByTagName("li");
 
 		for(var i = 0; i < items.length; ++i) {
 			items[i].onmousedown = function(e) {
-				emoticonReplace(e.target.getAttribute('data-emoticon'));
+				insertEmoticon(node, e.target.getAttribute('data-emoticon'));
 			};
 		}
 	}
-}, false);
+})();
 
 //==============================================================================
-// Markdown listener
+// Markdown button list
 //==============================================================================
-addEventListener("DOMContentLoaded", function() {
+(function() {
 	if(document.getElementById("markdown-list")) {
 		var list = document.getElementById("markdown-list");
+		var node = document.getElementById("content-editor");
 		var items = list.getElementsByTagName("li");
 
 		for(var i = 0; i < items.length; ++i) {
 			items[i].onmousedown = function(e) {
-				markdownReplace(e.target.getAttribute('data-markdown'));
+				insertMarkdown(node, e.target.getAttribute('data-markdown'));
 			};
 		}
 	}
-}, false);
\ No newline at end of file
+})();
\ No newline at end of file