diff --git a/font/fontello.eot b/font/fontello.eot
index addc8789..818ad987 100644
Binary files a/font/fontello.eot and b/font/fontello.eot differ
diff --git a/font/fontello.svg b/font/fontello.svg
index 9fc79c16..149520d2 100644
--- a/font/fontello.svg
+++ b/font/fontello.svg
@@ -62,6 +62,7 @@
 <glyph glyph-name="resize-vertical" unicode="&#xe872;" d="M393 671q0-15-11-25t-25-11l-71 0 0-571 71 0q15 0 25-11t11-25-11-25l-143-143q-11-11-25-11t-25 11l-143 143q-11 11-11 25t11 25 25 11l71 0 0 571-71 0q-15 0-25 11t-11 25 11 25l143 143q11 11 25 11t25-11l143-143q11-11 11-25z" horiz-adv-x="428.571" />
 <glyph glyph-name="resize-horizontal" unicode="&#xe873;" d="M1000 350q0-15-11-25l-143-143q-11-11-25-11t-25 11-11 25l0 71-571 0 0-71q0-15-11-25t-25-11-25 11l-143 143q-11 11-11 25t11 25l143 143q11 11 25 11t25-11 11-25l0-71 571 0 0 71q0 15 11 25t25 11 25-11l143-143q11-11 11-25z" horiz-adv-x="1000" />
 <glyph glyph-name="eject" unicode="&#xe8a6;" d="M8 304l396 396q11 11 25 11t25-11l396-396q11-11 7-18t-18-7l-821 0q-15 0-18 7t7 18z m814-311l-786 0q-15 0-25 11t-11 25l0 143q0 15 11 25t25 11l786 0q15 0 25-11t11-25l0-143q0-15-11-25t-25-11z" horiz-adv-x="858.259" />
+<glyph glyph-name="trash" unicode="&#xe89f;" d="M0 633l0 141 289 0 0 76 246 0 0-76 289 0 0-141-824 0z m43-783l0 676 738 0 0-676-738 0z" horiz-adv-x="824" />
 <glyph glyph-name="star-half" unicode="&#xe80a;" d="M464 832l0-747-251-132q-12-7-22-7-12 0-18 8t-6 20q0 3 1 11l48 279-203 198q-14 15-14 27 0 21 31 26l280 41 126 254q11 23 27 23z" horiz-adv-x="500" />
 <glyph glyph-name="ok-circled2" unicode="&#xe81a;" d="M653 396l-235-235q-11-11-25-11t-25 11l-164 164q-11 11-11 25t11 25l57 57q11 11 25 11t25-11l82-82 153 153q11 11 25 11t25-11l57-57q11-11 11-25t-11-25z m79-46q0 83-41 152t-110 110-152 41-152-41-110-110-41-152 41-152 110-110 152-41 152 41 110 110 41 152z m125 0q0-117-57-215t-156-156-215-57-215 57-156 156-57 215 57 215 156 156 215 57 215-57 156-156 57-215z" horiz-adv-x="857.143" />
 <glyph glyph-name="cancel-circled2" unicode="&#xe86f;" d="M612 248l-81-81q-6-6-13-6t-13 6l-76 76-76-76q-6-6-13-6t-13 6l-81 81q-6 6-6 13t6 13l76 76-76 76q-6 6-6 13t6 13l81 81q6 6 13 6t13-6l76-76 76 76q6 6 13 6t13-6l81-81q6-6 6-13t-6-13l-76-76 76-76q6-6 6-13t-6-13z m120 102q0 83-41 152t-110 110-152 41-152-41-110-110-41-152 41-152 110-110 152-41 152 41 110 110 41 152z m125 0q0-117-57-215t-156-156-215-57-215 57-156 156-57 215 57 215 156 156 215 57 215-57 156-156 57-215z" horiz-adv-x="857.143" />
@@ -73,12 +74,12 @@
 <glyph glyph-name="tag" unicode="&#xe834;" d="M250 600q0 30-21 50t-50 21-50-21-21-50 21-50 50-21 50 21 21 50z m595-321q0-30-21-50l-274-275q-22-21-51-21-30 0-50 21l-399 400q-21 21-36 56t-15 65l0 232q0 29 21 50t50 21l232 0q30 0 65-15t57-36l399-398q21-22 21-51z" horiz-adv-x="857.143" />
 <glyph glyph-name="tags" unicode="&#xe835;" d="M250 600q0 30-21 50t-50 21-50-21-21-50 21-50 50-21 50 21 21 50z m595-321q0-30-21-50l-274-275q-22-21-51-21-30 0-50 21l-399 400q-21 21-36 56t-15 65l0 232q0 29 21 50t50 21l232 0q30 0 65-15t57-36l399-398q21-22 21-51z m214 0q0-30-21-50l-274-275q-22-21-51-21-20 0-33 8t-30 25l262 262q21 21 21 50t-21 51l-399 398q-21 21-57 36t-65 15l125 0q30 0 65-15t57-36l399-398q21-22 21-51z" horiz-adv-x="1071.429" />
 <glyph glyph-name="camera-alt" unicode="&#xe814;" d="M518 386q0 8-5 13t-13 5q-37 0-63-26t-26-63q0-8 5-13t13-5 13 5 5 13q0 22 16 38t38 16q8 0 13 5t5 13z m125-73q0-59-42-101t-101-42-101 42-42 101 42 101 101 42 101-42 42-101z m-571-320l857 0 0 71-857 0 0-71z m643 320q0 89-63 151t-151 63-151-63-63-151 63-151 151-63 151 63 63 151z m-571 358l214 0 0 71-214 0 0-71z m-71-107l857 0 0 143-462 0-36-71-359 0 0-71z m929 143l0-714q0-30-21-50t-50-21l-857 0q-30 0-50 21t-21 50l0 714q0 30 21 50t50 21l857 0q30 0 50-21t21-50z" horiz-adv-x="1000" />
+<glyph glyph-name="code" unicode="&#xe844;" d="M1000 849l500-500-500-500-154 154 346 346-346 346z m-692-500l346-346-154-154-500 500 500 500 154-154z" horiz-adv-x="1500" />
 <glyph glyph-name="print" unicode="&#xe942;" d="M214-7l500 0 0 143-500 0 0-143z m0 357l500 0 0 214-89 0q-22 0-38 16t-16 38l0 89-357 0 0-357z m643-36q0 15-11 25t-25 11-25-11-11-25 11-25 25-11 25 11 11 25z m71 0l0-232q0-7-5-13t-13-5l-125 0 0-89q0-22-16-38t-38-16l-536 0q-22 0-38 16t-16 38l0 89-125 0q-7 0-13 5t-5 13l0 232q0 44 32 76t76 32l36 0 0 304q0 22 16 38t38 16l375 0q22 0 49-11t42-27l85-85q16-16 27-42t11-49l0-143 36 0q44 0 76-32t32-76z" horiz-adv-x="928.571" />
 <glyph glyph-name="retweet" unicode="&#xe943;" d="M714 11q0-7-5-13t-13-5l-536 0q-4 0-8 1t-5 4-3 4-2 6-1 6l0 335-107 0q-15 0-25 11t-11 25q0 13 8 23l179 214q11 12 27 12t27-12l179-214q8-9 8-23 0-15-11-25t-25-11l-107 0 0-214 321 0q9 0 14-6l89-107q4-6 4-12z m357 232q0-13-8-23l-179-214q-11-13-27-13t-27 13l-179 214q-8 9-8 23 0 15 11 25t25 11l107 0 0 214-321 0q-9 0-14 7l-89 107q-4 5-4 11 0 7 5 13t13 5l536 0q4 0 8-1t5-4 3-4 2-6 1-6l0-335 107 0q15 0 25-11t11-25z" horiz-adv-x="1071.429" />
 <glyph glyph-name="comment" unicode="&#xe84a;" d="M1000 350q0-97-67-179t-182-130-251-48q-39 0-81 4-110-98-257-135-27-8-64-12-9-1-17 5t-10 16l0 1q-2 2 0 7t1 6 3 5l3 5t4 5 4 5q4 4 17 19t19 21 17 22 18 28 15 33 15 42q-88 50-138 123t-50 157q0 73 40 139t107 114 160 76 194 28q136 0 251-48t182-130 67-179z" horiz-adv-x="1000" />
 <glyph glyph-name="chat" unicode="&#xe84b;" d="M786 421q0-78-52-143t-143-104-197-38q-48 0-98 9-69-49-155-71-20-5-48-9l-2 0q-6 0-11 4t-6 12q-1 2-1 4t0 4 1 3l1 3t2 3 2 3 3 3 2 3q3 3 13 14t15 16 13 16 14 21 11 25q-69 40-109 99t-40 125q0 78 52 143t143 104 197 38 197-38 143-104 52-143z m214-143q0-67-40-125t-109-98q6-13 11-25t14-21 13-16 15-16 13-14q1-1 2-3t3-3 2-3 2-3l1-3t1-3 0-4-1-4q-2-8-7-12t-12-4q-28 4-48 9-86 22-155 71-50-9-98-9-151 0-263 74 32-2 49-2 90 0 172 25t147 72q70 51 107 118t37 142q0 43-13 85 72-40 114-99t42-128z" horiz-adv-x="1000" />
 <glyph glyph-name="location" unicode="&#xe853;" d="M429 493q0 59-42 101t-101 42-101-42-42-101 42-101 101-42 101 42 42 101z m143 0q0-61-18-100l-203-432q-9-18-27-29t-38-11-38 11-26 29l-204 432q-18 39-18 100 0 118 84 202t202 84 202-84 84-202z" horiz-adv-x="571.429" />
-<glyph glyph-name="trash" unicode="&#xe81e;" d="M286 439l0-321q0-8-5-13t-13-5l-36 0q-8 0-13 5t-5 13l0 321q0 8 5 13t13 5l36 0q8 0 13-5t5-13z m143 0l0-321q0-8-5-13t-13-5l-36 0q-8 0-13 5t-5 13l0 321q0 8 5 13t13 5l36 0q8 0 13-5t5-13z m143 0l0-321q0-8-5-13t-13-5l-36 0q-8 0-13 5t-5 13l0 321q0 8 5 13t13 5l36 0q8 0 13-5t5-13z m71-404l0 529-500 0 0-529q0-12 4-23t8-15 6-5l464 0q2 0 6 5t8 15 4 23z m-375 600l250 0-27 65q-4 5-9 6l-177 0q-6-1-9-6z m518-18l0-36q0-8-5-13t-13-5l-54 0 0-529q0-46-26-80t-63-34l-464 0q-37 0-63 33t-26 79l0 531-54 0q-8 0-13 5t-5 13l0 36q0 8 5 13t13 5l172 0 39 93q8 21 30 35t44 15l179 0q22 0 44-15t30-35l39-93 172 0q8 0 13-5t5-13z" horiz-adv-x="785.714" />
 <glyph glyph-name="basket" unicode="&#xe865;" d="M357-7q0-30-21-50t-50-21-50 21-21 50 21 50 50 21 50-21 21-50z m500 0q0-30-21-50t-50-21-50 21-21 50 21 50 50 21 50-21 21-50z m71 607l0-286q0-13-9-24t-23-12l-583-68q1-4 3-12t3-15 1-12q0-9-13-36l513 0q15 0 25-11t11-25-11-25-25-11l-571 0q-15 0-25 11t-11 25q0 8 6 22t16 33 11 21l-99 459-114 0q-15 0-25 11t-11 25 11 25 25 11l143 0q9 0 16-4t11-9 7-14 4-15 3-16 3-14l670 0q15 0 25-11t11-25z" horiz-adv-x="928.571" />
 <glyph glyph-name="login" unicode="&#xe868;" d="M661 350q0-15-11-25l-304-304q-11-11-25-11t-25 11-11 25l0 161-250 0q-15 0-25 11t-11 25l0 214q0 15 11 25t25 11l250 0 0 161q0 15 11 25t25 11 25-11l304-304q11-11 11-25z m196 196l0-393q0-66-47-114t-114-47l-179 0q-7 0-13 5t-5 13q0 2-1 11t0 15 2 13 6 11 11 4l179 0q37 0 63 26t26 63l0 393q0 37-26 63t-63 26l-174 0t-6 1-6 2-4 3-4 5-1 8q0 2-1 11t0 15 2 13 6 11 11 4l179 0q66 0 114-47t47-114z" horiz-adv-x="857.143" />
 <glyph glyph-name="logout" unicode="&#xe949;" d="M357 46q0-2 1-11t0-15-2-13-6-11-11-4l-179 0q-66 0-114 47t-47 114l0 393q0 66 47 114t114 47l179 0q7 0 13-5t5-13q0-2 1-11t0-15-2-13-6-11-11-4l-179 0q-37 0-63-26t-26-63l0-393q0-37 26-63t63-26l174 0t6-1 6-2 4-3 4-5 1-8z m518 304q0-15-11-25l-304-304q-11-11-25-11t-25 11-11 25l0 161-250 0q-15 0-25 11t-11 25l0 214q0 15 11 25t25 11l250 0 0 161q0 15 11 25t25 11 25-11l304-304q11-11 11-25z" horiz-adv-x="928.571" />
@@ -203,7 +204,6 @@
 <glyph glyph-name="flag-empty" unicode="&#xe93d;" d="M929 267l0 344q-94-51-171-51-46 0-81 18-56 27-103 43t-99 15q-97 0-225-71l0-334q137 63 242 63 31 0 58-4t55-15 43-17 46-22l16-8q25-12 56-12 67 0 163 51z m-750 440q0-20-10-36t-26-26l0-706q0-8-5-13t-13-5l-36 0q-8 0-13 5t-5 13l0 706q-16 9-26 26t-10 36q0 30 21 50t50 21 50-21 21-50z m821-36l0-426q0-22-20-32-6-3-9-5-122-65-206-65-49 0-88 20l-16 8q-36 18-55 27t-51 16-64 8q-57 0-131-25t-128-57q-8-5-18-5-9 0-18 4-18 11-18 31l0 414q0 20 17 31 20 12 44 24t64 29 85 28 86 11q62 0 117-17t117-48q21-11 50-11 68 0 173 62 12 7 17 9 17 9 35-1 17-11 17-31z" horiz-adv-x="1000" />
 <glyph glyph-name="flag-checkered" unicode="&#xe93e;" d="M464 292l0 107q-101-9-214-65l0-103q114 54 214 61z m0 233l0 110q-96-4-214-70l0-105q120 62 214 66z m464-258l0 103q-131-65-214-40l0 125q-11 3-22 8-3 2-18 9t-19 9-18 8-19 9-18 7-20 7-20 5-22 4-22 2-25 1q-13 0-27-2l0-124 11 0q57 0 107-16t110-46q11-5 22-8l0-105q23-9 51-9 67 0 163 51z m0 238l0 105q-94-51-171-51-25 0-44 4l0-109q83-23 214 50z m-750 202q0-20-10-36t-26-26l0-706q0-8-5-13t-13-5l-36 0q-8 0-13 5t-5 13l0 706q-16 9-26 26t-10 36q0 30 21 50t50 21 50-21 21-50z m821-36l0-426q0-22-20-32-6-3-9-5-122-65-206-65-49 0-88 20l-16 8q-36 18-55 27t-51 16-64 8q-57 0-131-25t-128-57q-8-5-18-5-9 0-18 4-18 11-18 31l0 414q0 20 17 31 20 12 44 24t64 29 85 28 86 11q62 0 117-17t117-48q21-11 50-11 68 0 173 62 12 7 17 9 17 9 35-1 17-11 17-31z" horiz-adv-x="1000" />
 <glyph glyph-name="terminal" unicode="&#xe907;" d="M326 301l-260-260q-6-6-13-6t-13 6l-28 28q-6 6-6 13t6 13l219 219-219 219q-6 6-6 13t6 13l28 28q6 6 13 6t13-6l260-260q6-6 6-13t-6-13z m602-255l0-36q0-8-5-13t-13-5l-536 0q-8 0-13 5t-5 13l0 36q0 8 5 13t13 5l536 0q8 0 13-5t5-13z" horiz-adv-x="928.571" />
-<glyph glyph-name="code" unicode="&#xe829;" d="M344 69l-28-28q-6-6-13-6t-13 6l-260 260q-6 6-6 13t6 13l260 260q6 6 13 6t13-6l28-28q6-6 6-13t-6-13l-219-219 219-219q6-6 6-13t-6-13z m330 595l-208-720q-2-7-9-11t-13-1l-35 9q-7 2-11 9t-1 14l208 720q2 7 9 11t13 1l35-9q7-2 11-9t1-14z m367-363l-260-260q-6-6-13-6t-13 6l-28 28q-6 6-6 13t6 13l219 219-219 219q-6 6-6 13t6 13l28 28q6 6 13 6t13-6l260-260q6-6 6-13t-6-13z" horiz-adv-x="1071.429" />
 <glyph glyph-name="reply-all" unicode="&#xe840;" d="M357 246l0-39q0-23-22-33-7-3-14-3-15 0-25 11l-286 286q-11 11-11 25t11 25l286 286q16 17 39 8 22-9 22-33l0-39-222-222q-11-11-11-25t11-25z m643-21q0-32-9-74t-21-77-27-70-23-50l-11-22q-4-9-16-9-3 0-5 1-14 4-13 19 24 223-59 315-36 40-95 62t-149 29l0-140q0-23-22-33-7-3-14-3-15 0-25 11l-286 286q-11 11-11 25t11 25l286 286q16 17 39 8 22-9 22-33l0-146q229-16 334-123 94-97 94-284z" horiz-adv-x="1000" />
 <glyph glyph-name="star-half-alt" unicode="&#xe80b;" d="M662 316l143 140-199 29-37 6-17 33-89 180 0-537 33-17 177-94-33 198-7 37z m252 146l-203-198 48-279q3-18-3-29t-19-10q-9 0-22 7l-251 132-251-132q-13-7-22-7-13 0-19 10t-3 29l48 279-203 198q-18 18-13 33t30 19l280 41 126 254q11 23 27 23t27-23l126-254 280-41q25-4 30-19t-13-33z" horiz-adv-x="928.571" />
 <glyph glyph-name="direction" unicode="&#xe854;" d="M782 655l-357-714q-9-20-32-20-3 0-8 1-12 3-20 13t-8 22l0 321-321 0q-12 0-22 8t-13 20 2 23 16 17l714 357q7 4 16 4 15 0 25-11 8-8 10-19t-4-22z" horiz-adv-x="785.714" />
diff --git a/font/fontello.ttf b/font/fontello.ttf
index 8d91cf3e..dcce7493 100644
Binary files a/font/fontello.ttf and b/font/fontello.ttf differ
diff --git a/font/fontello.woff b/font/fontello.woff
index ced31c53..71057697 100644
Binary files a/font/fontello.woff and b/font/fontello.woff differ
diff --git a/fontello.html b/fontello.html
index d13f22b3..ce0bdbfe 100644
--- a/fontello.html
+++ b/fontello.html
@@ -229,7 +229,7 @@ body {
   display: none;
 }
 </style>
-    <link rel="stylesheet" href="js/css/fontello.css">
+    <link rel="stylesheet" href="css/fontello.css">
     <link rel="stylesheet" href="css/animation.css"><!--[if IE 7]>
     <link rel="stylesheet" href="css/fontello-ie7.css"><![endif]-->
     <script>
@@ -341,218 +341,218 @@ body {
         <div title="Code: 0xe8a6" class="the-icons span3"><i class="icon-eject"></i> <span class="i-name">icon-eject</span><span class="i-code">0xe8a6</span></div>
       </div>
       <div class="row">
+        <div title="Code: 0xe89f" class="the-icons span3"><i class="icon-trash"></i> <span class="i-name">icon-trash</span><span class="i-code">0xe89f</span></div>
         <div title="Code: 0xe80a" class="the-icons span3"><i class="icon-star-half"></i> <span class="i-name">icon-star-half</span><span class="i-code">0xe80a</span></div>
         <div title="Code: 0xe81a" class="the-icons span3"><i class="icon-ok-circled2"></i> <span class="i-name">icon-ok-circled2</span><span class="i-code">0xe81a</span></div>
         <div title="Code: 0xe86f" class="the-icons span3"><i class="icon-cancel-circled2"></i> <span class="i-name">icon-cancel-circled2</span><span class="i-code">0xe86f</span></div>
-        <div title="Code: 0xe939" class="the-icons span3"><i class="icon-help-circled"></i> <span class="i-name">icon-help-circled</span><span class="i-code">0xe939</span></div>
       </div>
       <div class="row">
+        <div title="Code: 0xe939" class="the-icons span3"><i class="icon-help-circled"></i> <span class="i-name">icon-help-circled</span><span class="i-code">0xe939</span></div>
         <div title="Code: 0xe93a" class="the-icons span3"><i class="icon-info-circled"></i> <span class="i-name">icon-info-circled</span><span class="i-code">0xe93a</span></div>
         <div title="Code: 0xe815" class="the-icons span3"><i class="icon-th-large"></i> <span class="i-name">icon-th-large</span><span class="i-code">0xe815</span></div>
         <div title="Code: 0xe832" class="the-icons span3"><i class="icon-eye"></i> <span class="i-name">icon-eye</span><span class="i-code">0xe832</span></div>
-        <div title="Code: 0xe833" class="the-icons span3"><i class="icon-eye-off"></i> <span class="i-name">icon-eye-off</span><span class="i-code">0xe833</span></div>
       </div>
       <div class="row">
+        <div title="Code: 0xe833" class="the-icons span3"><i class="icon-eye-off"></i> <span class="i-name">icon-eye-off</span><span class="i-code">0xe833</span></div>
         <div title="Code: 0xe834" class="the-icons span3"><i class="icon-tag"></i> <span class="i-name">icon-tag</span><span class="i-code">0xe834</span></div>
         <div title="Code: 0xe835" class="the-icons span3"><i class="icon-tags"></i> <span class="i-name">icon-tags</span><span class="i-code">0xe835</span></div>
         <div title="Code: 0xe814" class="the-icons span3"><i class="icon-camera-alt"></i> <span class="i-name">icon-camera-alt</span><span class="i-code">0xe814</span></div>
-        <div title="Code: 0xe942" class="the-icons span3"><i class="icon-print"></i> <span class="i-name">icon-print</span><span class="i-code">0xe942</span></div>
       </div>
       <div class="row">
+        <div title="Code: 0xe844" class="the-icons span3"><i class="icon-code"></i> <span class="i-name">icon-code</span><span class="i-code">0xe844</span></div>
+        <div title="Code: 0xe942" class="the-icons span3"><i class="icon-print"></i> <span class="i-name">icon-print</span><span class="i-code">0xe942</span></div>
         <div title="Code: 0xe943" class="the-icons span3"><i class="icon-retweet"></i> <span class="i-name">icon-retweet</span><span class="i-code">0xe943</span></div>
         <div title="Code: 0xe84a" class="the-icons span3"><i class="icon-comment"></i> <span class="i-name">icon-comment</span><span class="i-code">0xe84a</span></div>
+      </div>
+      <div class="row">
         <div title="Code: 0xe84b" class="the-icons span3"><i class="icon-chat"></i> <span class="i-name">icon-chat</span><span class="i-code">0xe84b</span></div>
         <div title="Code: 0xe853" class="the-icons span3"><i class="icon-location"></i> <span class="i-name">icon-location</span><span class="i-code">0xe853</span></div>
-      </div>
-      <div class="row">
-        <div title="Code: 0xe81e" class="the-icons span3"><i class="icon-trash"></i> <span class="i-name">icon-trash</span><span class="i-code">0xe81e</span></div>
         <div title="Code: 0xe865" class="the-icons span3"><i class="icon-basket"></i> <span class="i-name">icon-basket</span><span class="i-code">0xe865</span></div>
         <div title="Code: 0xe868" class="the-icons span3"><i class="icon-login"></i> <span class="i-name">icon-login</span><span class="i-code">0xe868</span></div>
-        <div title="Code: 0xe949" class="the-icons span3"><i class="icon-logout"></i> <span class="i-name">icon-logout</span><span class="i-code">0xe949</span></div>
       </div>
       <div class="row">
+        <div title="Code: 0xe949" class="the-icons span3"><i class="icon-logout"></i> <span class="i-name">icon-logout</span><span class="i-code">0xe949</span></div>
         <div title="Code: 0xe90d" class="the-icons span3"><i class="icon-resize-full"></i> <span class="i-name">icon-resize-full</span><span class="i-code">0xe90d</span></div>
         <div title="Code: 0xe871" class="the-icons span3"><i class="icon-resize-small"></i> <span class="i-name">icon-resize-small</span><span class="i-code">0xe871</span></div>
         <div title="Code: 0xe875" class="the-icons span3"><i class="icon-zoom-in"></i> <span class="i-name">icon-zoom-in</span><span class="i-code">0xe875</span></div>
-        <div title="Code: 0xe876" class="the-icons span3"><i class="icon-zoom-out"></i> <span class="i-name">icon-zoom-out</span><span class="i-code">0xe876</span></div>
       </div>
       <div class="row">
+        <div title="Code: 0xe876" class="the-icons span3"><i class="icon-zoom-out"></i> <span class="i-name">icon-zoom-out</span><span class="i-code">0xe876</span></div>
         <div title="Code: 0xe877" class="the-icons span3"><i class="icon-down-circled2"></i> <span class="i-name">icon-down-circled2</span><span class="i-code">0xe877</span></div>
         <div title="Code: 0xe878" class="the-icons span3"><i class="icon-up-circled2"></i> <span class="i-name">icon-up-circled2</span><span class="i-code">0xe878</span></div>
         <div title="Code: 0xe879" class="the-icons span3"><i class="icon-down-open"></i> <span class="i-name">icon-down-open</span><span class="i-code">0xe879</span></div>
-        <div title="Code: 0xe87a" class="the-icons span3"><i class="icon-left-open"></i> <span class="i-name">icon-left-open</span><span class="i-code">0xe87a</span></div>
       </div>
       <div class="row">
+        <div title="Code: 0xe87a" class="the-icons span3"><i class="icon-left-open"></i> <span class="i-name">icon-left-open</span><span class="i-code">0xe87a</span></div>
         <div title="Code: 0xe87b" class="the-icons span3"><i class="icon-right-open"></i> <span class="i-name">icon-right-open</span><span class="i-code">0xe87b</span></div>
         <div title="Code: 0xe87c" class="the-icons span3"><i class="icon-up-open"></i> <span class="i-name">icon-up-open</span><span class="i-code">0xe87c</span></div>
         <div title="Code: 0xe897" class="the-icons span3"><i class="icon-refresh"></i> <span class="i-name">icon-refresh</span><span class="i-code">0xe897</span></div>
-        <div title="Code: 0xe89d" class="the-icons span3"><i class="icon-play-circled2"></i> <span class="i-name">icon-play-circled2</span><span class="i-code">0xe89d</span></div>
       </div>
       <div class="row">
+        <div title="Code: 0xe89d" class="the-icons span3"><i class="icon-play-circled2"></i> <span class="i-name">icon-play-circled2</span><span class="i-code">0xe89d</span></div>
         <div title="Code: 0xe8a1" class="the-icons span3"><i class="icon-to-end-alt"></i> <span class="i-name">icon-to-end-alt</span><span class="i-code">0xe8a1</span></div>
         <div title="Code: 0xe8a3" class="the-icons span3"><i class="icon-to-start-alt"></i> <span class="i-name">icon-to-start-alt</span><span class="i-code">0xe8a3</span></div>
         <div title="Code: 0xe8aa" class="the-icons span3"><i class="icon-inbox"></i> <span class="i-name">icon-inbox</span><span class="i-code">0xe8aa</span></div>
-        <div title="Code: 0xe8b6" class="the-icons span3"><i class="icon-font"></i> <span class="i-name">icon-font</span><span class="i-code">0xe8b6</span></div>
       </div>
       <div class="row">
+        <div title="Code: 0xe8b6" class="the-icons span3"><i class="icon-font"></i> <span class="i-name">icon-font</span><span class="i-code">0xe8b6</span></div>
         <div title="Code: 0xe8b5" class="the-icons span3"><i class="icon-bold"></i> <span class="i-name">icon-bold</span><span class="i-code">0xe8b5</span></div>
         <div title="Code: 0xe8b4" class="the-icons span3"><i class="icon-italic"></i> <span class="i-name">icon-italic</span><span class="i-code">0xe8b4</span></div>
         <div title="Code: 0xe8b7" class="the-icons span3"><i class="icon-text-height"></i> <span class="i-name">icon-text-height</span><span class="i-code">0xe8b7</span></div>
-        <div title="Code: 0xe8b8" class="the-icons span3"><i class="icon-text-width"></i> <span class="i-name">icon-text-width</span><span class="i-code">0xe8b8</span></div>
       </div>
       <div class="row">
+        <div title="Code: 0xe8b8" class="the-icons span3"><i class="icon-text-width"></i> <span class="i-name">icon-text-width</span><span class="i-code">0xe8b8</span></div>
         <div title="Code: 0xe95d" class="the-icons span3"><i class="icon-align-left"></i> <span class="i-name">icon-align-left</span><span class="i-code">0xe95d</span></div>
         <div title="Code: 0xe95e" class="the-icons span3"><i class="icon-align-center"></i> <span class="i-name">icon-align-center</span><span class="i-code">0xe95e</span></div>
         <div title="Code: 0xe95f" class="the-icons span3"><i class="icon-align-right"></i> <span class="i-name">icon-align-right</span><span class="i-code">0xe95f</span></div>
-        <div title="Code: 0xe960" class="the-icons span3"><i class="icon-align-justify"></i> <span class="i-name">icon-align-justify</span><span class="i-code">0xe960</span></div>
       </div>
       <div class="row">
+        <div title="Code: 0xe960" class="the-icons span3"><i class="icon-align-justify"></i> <span class="i-name">icon-align-justify</span><span class="i-code">0xe960</span></div>
         <div title="Code: 0xe8b9" class="the-icons span3"><i class="icon-list"></i> <span class="i-name">icon-list</span><span class="i-code">0xe8b9</span></div>
         <div title="Code: 0xe8ba" class="the-icons span3"><i class="icon-indent-left"></i> <span class="i-name">icon-indent-left</span><span class="i-code">0xe8ba</span></div>
         <div title="Code: 0xe8bb" class="the-icons span3"><i class="icon-indent-right"></i> <span class="i-name">icon-indent-right</span><span class="i-code">0xe8bb</span></div>
-        <div title="Code: 0xe963" class="the-icons span3"><i class="icon-off"></i> <span class="i-name">icon-off</span><span class="i-code">0xe963</span></div>
       </div>
       <div class="row">
+        <div title="Code: 0xe963" class="the-icons span3"><i class="icon-off"></i> <span class="i-name">icon-off</span><span class="i-code">0xe963</span></div>
         <div title="Code: 0xe964" class="the-icons span3"><i class="icon-road"></i> <span class="i-name">icon-road</span><span class="i-code">0xe964</span></div>
         <div title="Code: 0xe8c9" class="the-icons span3"><i class="icon-list-alt"></i> <span class="i-name">icon-list-alt</span><span class="i-code">0xe8c9</span></div>
         <div title="Code: 0xe8ca" class="the-icons span3"><i class="icon-qrcode"></i> <span class="i-name">icon-qrcode</span><span class="i-code">0xe8ca</span></div>
-        <div title="Code: 0xe8cb" class="the-icons span3"><i class="icon-barcode"></i> <span class="i-name">icon-barcode</span><span class="i-code">0xe8cb</span></div>
       </div>
       <div class="row">
+        <div title="Code: 0xe8cb" class="the-icons span3"><i class="icon-barcode"></i> <span class="i-name">icon-barcode</span><span class="i-code">0xe8cb</span></div>
         <div title="Code: 0xe8cd" class="the-icons span3"><i class="icon-ajust"></i> <span class="i-name">icon-ajust</span><span class="i-code">0xe8cd</span></div>
         <div title="Code: 0xe8ce" class="the-icons span3"><i class="icon-tint"></i> <span class="i-name">icon-tint</span><span class="i-code">0xe8ce</span></div>
         <div title="Code: 0xe8d6" class="the-icons span3"><i class="icon-magnet"></i> <span class="i-name">icon-magnet</span><span class="i-code">0xe8d6</span></div>
-        <div title="Code: 0xe874" class="the-icons span3"><i class="icon-move"></i> <span class="i-name">icon-move</span><span class="i-code">0xe874</span></div>
       </div>
       <div class="row">
+        <div title="Code: 0xe874" class="the-icons span3"><i class="icon-move"></i> <span class="i-name">icon-move</span><span class="i-code">0xe874</span></div>
         <div title="Code: 0xe83f" class="the-icons span3"><i class="icon-link"></i> <span class="i-name">icon-link</span><span class="i-code">0xe83f</span></div>
         <div title="Code: 0xe912" class="the-icons span3"><i class="icon-share"></i> <span class="i-name">icon-share</span><span class="i-code">0xe912</span></div>
         <div title="Code: 0xe841" class="the-icons span3"><i class="icon-hdd"></i> <span class="i-name">icon-hdd</span><span class="i-code">0xe841</span></div>
-        <div title="Code: 0xe82b" class="the-icons span3"><i class="icon-link-ext"></i> <span class="i-name">icon-link-ext</span><span class="i-code">0xe82b</span></div>
       </div>
       <div class="row">
+        <div title="Code: 0xe82b" class="the-icons span3"><i class="icon-link-ext"></i> <span class="i-name">icon-link-ext</span><span class="i-code">0xe82b</span></div>
         <div title="Code: 0xe8d0" class="the-icons span3"><i class="icon-check-empty"></i> <span class="i-name">icon-check-empty</span><span class="i-code">0xe8d0</span></div>
         <div title="Code: 0xe837" class="the-icons span3"><i class="icon-bookmark-empty"></i> <span class="i-name">icon-bookmark-empty</span><span class="i-code">0xe837</span></div>
         <div title="Code: 0xe860" class="the-icons span3"><i class="icon-phone-squared"></i> <span class="i-name">icon-phone-squared</span><span class="i-code">0xe860</span></div>
-        <div title="Code: 0xe85d" class="the-icons span3"><i class="icon-rss"></i> <span class="i-name">icon-rss</span><span class="i-code">0xe85d</span></div>
       </div>
       <div class="row">
+        <div title="Code: 0xe85d" class="the-icons span3"><i class="icon-rss"></i> <span class="i-name">icon-rss</span><span class="i-code">0xe85d</span></div>
         <div title="Code: 0xe8dd" class="the-icons span3"><i class="icon-certificate"></i> <span class="i-name">icon-certificate</span><span class="i-code">0xe8dd</span></div>
         <div title="Code: 0xe891" class="the-icons span3"><i class="icon-left-circled"></i> <span class="i-name">icon-left-circled</span><span class="i-code">0xe891</span></div>
         <div title="Code: 0xe892" class="the-icons span3"><i class="icon-right-circled"></i> <span class="i-name">icon-right-circled</span><span class="i-code">0xe892</span></div>
-        <div title="Code: 0xe893" class="the-icons span3"><i class="icon-up-circled"></i> <span class="i-name">icon-up-circled</span><span class="i-code">0xe893</span></div>
       </div>
       <div class="row">
+        <div title="Code: 0xe893" class="the-icons span3"><i class="icon-up-circled"></i> <span class="i-name">icon-up-circled</span><span class="i-code">0xe893</span></div>
         <div title="Code: 0xe894" class="the-icons span3"><i class="icon-down-circled"></i> <span class="i-name">icon-down-circled</span><span class="i-code">0xe894</span></div>
         <div title="Code: 0xe8de" class="the-icons span3"><i class="icon-tasks"></i> <span class="i-name">icon-tasks</span><span class="i-code">0xe8de</span></div>
         <div title="Code: 0xe8df" class="the-icons span3"><i class="icon-filter"></i> <span class="i-name">icon-filter</span><span class="i-code">0xe8df</span></div>
-        <div title="Code: 0xe870" class="the-icons span3"><i class="icon-resize-full-alt"></i> <span class="i-name">icon-resize-full-alt</span><span class="i-code">0xe870</span></div>
       </div>
       <div class="row">
+        <div title="Code: 0xe870" class="the-icons span3"><i class="icon-resize-full-alt"></i> <span class="i-name">icon-resize-full-alt</span><span class="i-code">0xe870</span></div>
         <div title="Code: 0xe8e0" class="the-icons span3"><i class="icon-beaker"></i> <span class="i-name">icon-beaker</span><span class="i-code">0xe8e0</span></div>
         <div title="Code: 0xe858" class="the-icons span3"><i class="icon-docs"></i> <span class="i-name">icon-docs</span><span class="i-code">0xe858</span></div>
         <div title="Code: 0xe861" class="the-icons span3"><i class="icon-menu"></i> <span class="i-name">icon-menu</span><span class="i-code">0xe861</span></div>
-        <div title="Code: 0xe8bc" class="the-icons span3"><i class="icon-list-bullet"></i> <span class="i-name">icon-list-bullet</span><span class="i-code">0xe8bc</span></div>
       </div>
       <div class="row">
+        <div title="Code: 0xe8bc" class="the-icons span3"><i class="icon-list-bullet"></i> <span class="i-name">icon-list-bullet</span><span class="i-code">0xe8bc</span></div>
         <div title="Code: 0xe8bd" class="the-icons span3"><i class="icon-list-numbered"></i> <span class="i-name">icon-list-numbered</span><span class="i-code">0xe8bd</span></div>
         <div title="Code: 0xe8be" class="the-icons span3"><i class="icon-strike"></i> <span class="i-name">icon-strike</span><span class="i-code">0xe8be</span></div>
         <div title="Code: 0xe8bf" class="the-icons span3"><i class="icon-underline"></i> <span class="i-name">icon-underline</span><span class="i-code">0xe8bf</span></div>
-        <div title="Code: 0xe8c2" class="the-icons span3"><i class="icon-table"></i> <span class="i-name">icon-table</span><span class="i-code">0xe8c2</span></div>
       </div>
       <div class="row">
+        <div title="Code: 0xe8c2" class="the-icons span3"><i class="icon-table"></i> <span class="i-name">icon-table</span><span class="i-code">0xe8c2</span></div>
         <div title="Code: 0xe8e1" class="the-icons span3"><i class="icon-magic"></i> <span class="i-name">icon-magic</span><span class="i-code">0xe8e1</span></div>
         <div title="Code: 0xe8e3" class="the-icons span3"><i class="icon-money"></i> <span class="i-name">icon-money</span><span class="i-code">0xe8e3</span></div>
         <div title="Code: 0xe8c3" class="the-icons span3"><i class="icon-columns"></i> <span class="i-name">icon-columns</span><span class="i-code">0xe8c3</span></div>
-        <div title="Code: 0xe8ec" class="the-icons span3"><i class="icon-sort"></i> <span class="i-name">icon-sort</span><span class="i-code">0xe8ec</span></div>
       </div>
       <div class="row">
+        <div title="Code: 0xe8ec" class="the-icons span3"><i class="icon-sort"></i> <span class="i-name">icon-sort</span><span class="i-code">0xe8ec</span></div>
         <div title="Code: 0xe8ed" class="the-icons span3"><i class="icon-sort-down"></i> <span class="i-name">icon-sort-down</span><span class="i-code">0xe8ed</span></div>
         <div title="Code: 0xe8ee" class="the-icons span3"><i class="icon-sort-up"></i> <span class="i-name">icon-sort-up</span><span class="i-code">0xe8ee</span></div>
         <div title="Code: 0xe805" class="the-icons span3"><i class="icon-mail-alt"></i> <span class="i-name">icon-mail-alt</span><span class="i-code">0xe805</span></div>
-        <div title="Code: 0xe8f6" class="the-icons span3"><i class="icon-gauge"></i> <span class="i-name">icon-gauge</span><span class="i-code">0xe8f6</span></div>
       </div>
       <div class="row">
+        <div title="Code: 0xe8f6" class="the-icons span3"><i class="icon-gauge"></i> <span class="i-name">icon-gauge</span><span class="i-code">0xe8f6</span></div>
         <div title="Code: 0xe84c" class="the-icons span3"><i class="icon-comment-empty"></i> <span class="i-name">icon-comment-empty</span><span class="i-code">0xe84c</span></div>
         <div title="Code: 0xe84d" class="the-icons span3"><i class="icon-chat-empty"></i> <span class="i-name">icon-chat-empty</span><span class="i-code">0xe84d</span></div>
         <div title="Code: 0xe8f7" class="the-icons span3"><i class="icon-sitemap"></i> <span class="i-name">icon-sitemap</span><span class="i-code">0xe8f7</span></div>
-        <div title="Code: 0xe8c6" class="the-icons span3"><i class="icon-paste"></i> <span class="i-name">icon-paste</span><span class="i-code">0xe8c6</span></div>
       </div>
       <div class="row">
+        <div title="Code: 0xe8c6" class="the-icons span3"><i class="icon-paste"></i> <span class="i-name">icon-paste</span><span class="i-code">0xe8c6</span></div>
         <div title="Code: 0xe86d" class="the-icons span3"><i class="icon-lightbulb"></i> <span class="i-name">icon-lightbulb</span><span class="i-code">0xe86d</span></div>
         <div title="Code: 0xe957" class="the-icons span3"><i class="icon-exchange"></i> <span class="i-name">icon-exchange</span><span class="i-code">0xe957</span></div>
         <div title="Code: 0xe83d" class="the-icons span3"><i class="icon-download-cloud"></i> <span class="i-name">icon-download-cloud</span><span class="i-code">0xe83d</span></div>
-        <div title="Code: 0xe83e" class="the-icons span3"><i class="icon-upload-cloud"></i> <span class="i-name">icon-upload-cloud</span><span class="i-code">0xe83e</span></div>
       </div>
       <div class="row">
+        <div title="Code: 0xe83e" class="the-icons span3"><i class="icon-upload-cloud"></i> <span class="i-name">icon-upload-cloud</span><span class="i-code">0xe83e</span></div>
         <div title="Code: 0xe8fc" class="the-icons span3"><i class="icon-user-md"></i> <span class="i-name">icon-user-md</span><span class="i-code">0xe8fc</span></div>
         <div title="Code: 0xe8fd" class="the-icons span3"><i class="icon-stethoscope"></i> <span class="i-name">icon-stethoscope</span><span class="i-code">0xe8fd</span></div>
         <div title="Code: 0xe8c8" class="the-icons span3"><i class="icon-suitcase"></i> <span class="i-name">icon-suitcase</span><span class="i-code">0xe8c8</span></div>
-        <div title="Code: 0xe84f" class="the-icons span3"><i class="icon-bell-alt"></i> <span class="i-name">icon-bell-alt</span><span class="i-code">0xe84f</span></div>
       </div>
       <div class="row">
+        <div title="Code: 0xe84f" class="the-icons span3"><i class="icon-bell-alt"></i> <span class="i-name">icon-bell-alt</span><span class="i-code">0xe84f</span></div>
         <div title="Code: 0xe8f9" class="the-icons span3"><i class="icon-coffee"></i> <span class="i-name">icon-coffee</span><span class="i-code">0xe8f9</span></div>
         <div title="Code: 0xe8fa" class="the-icons span3"><i class="icon-food"></i> <span class="i-name">icon-food</span><span class="i-code">0xe8fa</span></div>
         <div title="Code: 0xe945" class="the-icons span3"><i class="icon-doc-text"></i> <span class="i-name">icon-doc-text</span><span class="i-code">0xe945</span></div>
-        <div title="Code: 0xe902" class="the-icons span3"><i class="icon-building"></i> <span class="i-name">icon-building</span><span class="i-code">0xe902</span></div>
       </div>
       <div class="row">
+        <div title="Code: 0xe902" class="the-icons span3"><i class="icon-building"></i> <span class="i-name">icon-building</span><span class="i-code">0xe902</span></div>
         <div title="Code: 0xe901" class="the-icons span3"><i class="icon-hospital"></i> <span class="i-name">icon-hospital</span><span class="i-code">0xe901</span></div>
         <div title="Code: 0xe8fe" class="the-icons span3"><i class="icon-ambulance"></i> <span class="i-name">icon-ambulance</span><span class="i-code">0xe8fe</span></div>
         <div title="Code: 0xe8ff" class="the-icons span3"><i class="icon-medkit"></i> <span class="i-name">icon-medkit</span><span class="i-code">0xe8ff</span></div>
-        <div title="Code: 0xe8b2" class="the-icons span3"><i class="icon-fighter-jet"></i> <span class="i-name">icon-fighter-jet</span><span class="i-code">0xe8b2</span></div>
       </div>
       <div class="row">
+        <div title="Code: 0xe8b2" class="the-icons span3"><i class="icon-fighter-jet"></i> <span class="i-name">icon-fighter-jet</span><span class="i-code">0xe8b2</span></div>
         <div title="Code: 0xe8fb" class="the-icons span3"><i class="icon-beer"></i> <span class="i-name">icon-beer</span><span class="i-code">0xe8fb</span></div>
         <div title="Code: 0xe900" class="the-icons span3"><i class="icon-h-sigh"></i> <span class="i-name">icon-h-sigh</span><span class="i-code">0xe900</span></div>
         <div title="Code: 0xe821" class="the-icons span3"><i class="icon-plus-squared"></i> <span class="i-name">icon-plus-squared</span><span class="i-code">0xe821</span></div>
-        <div title="Code: 0xe885" class="the-icons span3"><i class="icon-angle-double-left"></i> <span class="i-name">icon-angle-double-left</span><span class="i-code">0xe885</span></div>
       </div>
       <div class="row">
+        <div title="Code: 0xe885" class="the-icons span3"><i class="icon-angle-double-left"></i> <span class="i-name">icon-angle-double-left</span><span class="i-code">0xe885</span></div>
         <div title="Code: 0xe886" class="the-icons span3"><i class="icon-angle-double-right"></i> <span class="i-name">icon-angle-double-right</span><span class="i-code">0xe886</span></div>
         <div title="Code: 0xe887" class="the-icons span3"><i class="icon-angle-double-up"></i> <span class="i-name">icon-angle-double-up</span><span class="i-code">0xe887</span></div>
         <div title="Code: 0xe888" class="the-icons span3"><i class="icon-angle-double-down"></i> <span class="i-name">icon-angle-double-down</span><span class="i-code">0xe888</span></div>
-        <div title="Code: 0xe87d" class="the-icons span3"><i class="icon-angle-left"></i> <span class="i-name">icon-angle-left</span><span class="i-code">0xe87d</span></div>
       </div>
       <div class="row">
+        <div title="Code: 0xe87d" class="the-icons span3"><i class="icon-angle-left"></i> <span class="i-name">icon-angle-left</span><span class="i-code">0xe87d</span></div>
         <div title="Code: 0xe87e" class="the-icons span3"><i class="icon-angle-right"></i> <span class="i-name">icon-angle-right</span><span class="i-code">0xe87e</span></div>
         <div title="Code: 0xe87f" class="the-icons span3"><i class="icon-angle-up"></i> <span class="i-name">icon-angle-up</span><span class="i-code">0xe87f</span></div>
         <div title="Code: 0xe880" class="the-icons span3"><i class="icon-angle-down"></i> <span class="i-name">icon-angle-down</span><span class="i-code">0xe880</span></div>
-        <div title="Code: 0xe95a" class="the-icons span3"><i class="icon-desktop"></i> <span class="i-name">icon-desktop</span><span class="i-code">0xe95a</span></div>
       </div>
       <div class="row">
+        <div title="Code: 0xe95a" class="the-icons span3"><i class="icon-desktop"></i> <span class="i-name">icon-desktop</span><span class="i-code">0xe95a</span></div>
         <div title="Code: 0xe95b" class="the-icons span3"><i class="icon-laptop"></i> <span class="i-name">icon-laptop</span><span class="i-code">0xe95b</span></div>
         <div title="Code: 0xe95c" class="the-icons span3"><i class="icon-tablet"></i> <span class="i-name">icon-tablet</span><span class="i-code">0xe95c</span></div>
         <div title="Code: 0xe8a9" class="the-icons span3"><i class="icon-mobile"></i> <span class="i-name">icon-mobile</span><span class="i-code">0xe8a9</span></div>
-        <div title="Code: 0xe8d2" class="the-icons span3"><i class="icon-circle-empty"></i> <span class="i-name">icon-circle-empty</span><span class="i-code">0xe8d2</span></div>
       </div>
       <div class="row">
+        <div title="Code: 0xe8d2" class="the-icons span3"><i class="icon-circle-empty"></i> <span class="i-name">icon-circle-empty</span><span class="i-code">0xe8d2</span></div>
         <div title="Code: 0xe842" class="the-icons span3"><i class="icon-quote-left"></i> <span class="i-name">icon-quote-left</span><span class="i-code">0xe842</span></div>
         <div title="Code: 0xe843" class="the-icons span3"><i class="icon-quote-right"></i> <span class="i-name">icon-quote-right</span><span class="i-code">0xe843</span></div>
         <div title="Code: 0xe8f8" class="the-icons span3"><i class="icon-spinner"></i> <span class="i-name">icon-spinner</span><span class="i-code">0xe8f8</span></div>
-        <div title="Code: 0xe8d1" class="the-icons span3"><i class="icon-circle"></i> <span class="i-name">icon-circle</span><span class="i-code">0xe8d1</span></div>
       </div>
       <div class="row">
+        <div title="Code: 0xe8d1" class="the-icons span3"><i class="icon-circle"></i> <span class="i-name">icon-circle</span><span class="i-code">0xe8d1</span></div>
         <div title="Code: 0xe845" class="the-icons span3"><i class="icon-reply"></i> <span class="i-name">icon-reply</span><span class="i-code">0xe845</span></div>
         <div title="Code: 0xe85a" class="the-icons span3"><i class="icon-folder-empty"></i> <span class="i-name">icon-folder-empty</span><span class="i-code">0xe85a</span></div>
         <div title="Code: 0xe85b" class="the-icons span3"><i class="icon-folder-open-empty"></i> <span class="i-name">icon-folder-open-empty</span><span class="i-code">0xe85b</span></div>
-        <div title="Code: 0xe822" class="the-icons span3"><i class="icon-plus-squared-small"></i> <span class="i-name">icon-plus-squared-small</span><span class="i-code">0xe822</span></div>
       </div>
       <div class="row">
+        <div title="Code: 0xe822" class="the-icons span3"><i class="icon-plus-squared-small"></i> <span class="i-name">icon-plus-squared-small</span><span class="i-code">0xe822</span></div>
         <div title="Code: 0xe827" class="the-icons span3"><i class="icon-minus-squared-small"></i> <span class="i-name">icon-minus-squared-small</span><span class="i-code">0xe827</span></div>
         <div title="Code: 0xe903" class="the-icons span3"><i class="icon-smile"></i> <span class="i-name">icon-smile</span><span class="i-code">0xe903</span></div>
         <div title="Code: 0xe904" class="the-icons span3"><i class="icon-frown"></i> <span class="i-name">icon-frown</span><span class="i-code">0xe904</span></div>
-        <div title="Code: 0xe905" class="the-icons span3"><i class="icon-meh"></i> <span class="i-name">icon-meh</span><span class="i-code">0xe905</span></div>
       </div>
       <div class="row">
+        <div title="Code: 0xe905" class="the-icons span3"><i class="icon-meh"></i> <span class="i-name">icon-meh</span><span class="i-code">0xe905</span></div>
         <div title="Code: 0xe849" class="the-icons span3"><i class="icon-gamepad"></i> <span class="i-name">icon-gamepad</span><span class="i-code">0xe849</span></div>
         <div title="Code: 0xe944" class="the-icons span3"><i class="icon-keyboard"></i> <span class="i-name">icon-keyboard</span><span class="i-code">0xe944</span></div>
         <div title="Code: 0xe93d" class="the-icons span3"><i class="icon-flag-empty"></i> <span class="i-name">icon-flag-empty</span><span class="i-code">0xe93d</span></div>
-        <div title="Code: 0xe93e" class="the-icons span3"><i class="icon-flag-checkered"></i> <span class="i-name">icon-flag-checkered</span><span class="i-code">0xe93e</span></div>
       </div>
       <div class="row">
+        <div title="Code: 0xe93e" class="the-icons span3"><i class="icon-flag-checkered"></i> <span class="i-name">icon-flag-checkered</span><span class="i-code">0xe93e</span></div>
         <div title="Code: 0xe907" class="the-icons span3"><i class="icon-terminal"></i> <span class="i-name">icon-terminal</span><span class="i-code">0xe907</span></div>
-        <div title="Code: 0xe829" class="the-icons span3"><i class="icon-code"></i> <span class="i-name">icon-code</span><span class="i-code">0xe829</span></div>
         <div title="Code: 0xe840" class="the-icons span3"><i class="icon-reply-all"></i> <span class="i-name">icon-reply-all</span><span class="i-code">0xe840</span></div>
         <div title="Code: 0xe80b" class="the-icons span3"><i class="icon-star-half-alt"></i> <span class="i-name">icon-star-half-alt</span><span class="i-code">0xe80b</span></div>
       </div>
diff --git a/js/core.js b/js/core.js
index eb29648e..7f1dc229 100644
--- a/js/core.js
+++ b/js/core.js
@@ -5,6 +5,8 @@ define([
     "settings",
     "eventMgr",
     "mousetrap",
+    "text!html/bodyIndex.html",
+    "text!html/bodyViewer.html",
     "text!html/settingsTemplateTooltip.html",
     "text!html/settingsUserCustomExtensionTooltip.html",
     "storage",
@@ -12,7 +14,7 @@ define([
     "libs/bootstrap",
     "libs/layout",
     "libs/Markdown.Editor"
-], function($, _, utils, settings, eventMgr, mousetrap, settingsTemplateTooltipHTML, settingsUserCustomExtensionTooltipHTML) {
+], function($, _, utils, settings, eventMgr, mousetrap, bodyIndexHTML, bodyViewerHTML, settingsTemplateTooltipHTML, settingsUserCustomExtensionTooltipHTML) {
 
     var core = {};
 
@@ -366,7 +368,15 @@ define([
         }
     };
 
-    function init() {
+    // Initialize multiple things and then fire eventMgr.onReady
+    core.onReady = function() {
+
+        if(viewerMode === true) {
+            $('body').html(bodyViewerHTML);
+        }
+        else {
+            $('body').html(bodyIndexHTML);
+        }
 
         // listen to online/offline events
         $(window).on('offline', core.setOffline);
@@ -451,35 +461,6 @@ define([
         }, 1000);
 
         eventMgr.onReady();
-    }
-
-    // Initialize multiple things and then fire eventMgr.onReady
-    core.onReady = function() {
-
-        if(viewerMode === true) {
-            require([
-                "text!html/bodyViewer.html",
-            ], function(bodyViewerHTML) {
-                $('body').html(bodyViewerHTML);
-                init();
-            });
-        }
-        else {
-            require([
-                "text!html/bodyIndex.html",
-                "text!html/dialogInsertLink.html",
-                "text!html/dialogInsertImage.html",
-                "text!html/dialogImportImage.html",
-                "text!html/dialogRemoveFileConfirm.html",
-            ], function(bodyIndexHTML, dialogInsertLinkHTML, dialogInsertImageHTML, dialogImportImageHTML, dialogRemoveFileConfirmHTML) {
-                $('body').html(bodyIndexHTML);
-                utils.addModal('modal-insert-link', dialogInsertLinkHTML);
-                utils.addModal('modal-insert-image', dialogInsertImageHTML);
-                utils.addModal('modal-import-image', dialogImportImageHTML);
-                utils.addModal('modal-remove-file-confirm', dialogRemoveFileConfirmHTML);
-                init();
-            });
-        }
     };
 
     // Other initialization that are not prioritary
diff --git a/js/html/bodyIndex.html b/js/html/bodyIndex.html
index 98bc2d03..5443865d 100644
--- a/js/html/bodyIndex.html
+++ b/js/html/bodyIndex.html
@@ -22,7 +22,7 @@
 					<li class="stick">
 						<div class="input-prepend">
 							<span class="add-on"><i class="icon-search"></i></span><input
-								type="text" id="file-search" class="span3">
+								type="text" id="file-search" class="col-lg-3 form-control">
 						</div>
 					</li>
 				</ul></li>
@@ -94,586 +94,816 @@
 			<li><a class="brand" id="file-title" href="#"
 				title="Rename current document"> </a></li>
 			<li class="navbar-form"><input id="file-title-input" type="text"
-				class="span3 hide" placeholder="Document title" /></li>
+				class="col-lg-3 form-control hide" placeholder="Document title" /></li>
 		</ul>
 	</div>
 </div>
-<textarea id="wmd-input" class="ui-layout-center"></textarea>
+<textarea id="wmd-input" class="ui-layout-center form-control"></textarea>
 <div class="ui-layout-east preview-container"></div>
 <div class="ui-layout-south preview-container"></div>
 
-<div id="modal-import-harddrive-markdown" class="modal hide">
-	<div class="modal-header">
-		<button type="button" class="close" data-dismiss="modal"
-			aria-hidden="true">&times;</button>
-		<h3>Import from hard drive</h3>
-	</div>
-	<div class="modal-body">
-		<p>Please select your Markdown files here:</p>
-		<p>
-			<input type="file" id="input-file-import-harddrive-markdown" multiple />
-		</p>
-		<p>Or drag and drop your Markdown files here:</p>
-		<p id="dropzone-import-harddrive-markdown" class="drop-zone">Drop
-			files here</p>
-	</div>
-	<div class="modal-footer">
-		<a href="#" class="btn btn-primary" data-dismiss="modal">Close</a>
-	</div>
-</div>
 
-<div id="modal-import-harddrive-html" class="modal hide">
-	<div class="modal-header">
-		<button type="button" class="close" data-dismiss="modal"
-			aria-hidden="true">&times;</button>
-		<h3>Convert HTML to Markdown</h3>
-	</div>
-	<div class="modal-body">
-		<p>Please select your HTML files here:</p>
-		<p>
-			<input type="file" id="input-file-import-harddrive-html" multiple />
-		</p>
-		<p>Or drag and drop your HTML files here:</p>
-		<p id="dropzone-import-harddrive-html" class="drop-zone">Drop
-			files here</p>
-		<p>Or insert your HTML code here:</p>
-		<textarea id="input-convert-html"></textarea>
-	</div>
-	<div class="modal-footer">
-		<a href="#" class="btn" data-dismiss="modal">Close</a> <a href="#"
-			class="btn btn-primary action-convert-html" data-dismiss="modal">OK</a>
-	</div>
-</div>
+<div id="modal-insert-link" class="modal">
+	<div class="modal-dialog">
+		<div class="modal-content">
 
-<div id="modal-upload-gdrive" class="modal hide">
-	<div class="modal-header">
-		<button type="button" class="close" data-dismiss="modal"
-			aria-hidden="true">&times;</button>
-		<h3>Export to Google Drive</h3>
-	</div>
-	<div class="modal-body">
-		<blockquote class="muted">This will save the current
-			document to your Google Drive account and keep it synchronized.</blockquote>
-		<p>
-			Please specify a <b>folder ID</b> (optional):
-		</p>
-		<div class="input-prepend">
-			<span class="add-on"><i class="icon-gdrive"></i></span><input
-				id="input-sync-export-gdrive-parentid" type="text" class="span5"
-				placeholder="FolderID"></input>
+			<div class="modal-header">
+				<button type="button" class="close action-close-insert-link"
+					data-dismiss="modal" aria-hidden="true">&times;</button>
+				<h3 class="modal-title">Hyperlink</h3>
+			</div>
+			<div class="modal-body">
+				<p>Please provide the link URL and an optional title:</p>
+				<div class="input-prepend">
+					<span class="add-on"><i class="icon-globe"></i></span><input
+						id="input-insert-link" type="text" class="col-lg-5 form-control"
+						placeholder='http://example.com/ "optional title"'></input>
+				</div>
+			</div>
+			<div class="modal-footer">
+				<a href="#" class="btn" data-dismiss="modal">Cancel</a> <a href="#"
+					class="btn btn-primary action-insert-link" data-dismiss="modal">OK</a>
+			</div>
 		</div>
-		<br /> <br />
-		<blockquote class="muted">
-			<b>NOTE:</b>
-			<ul>
-				<li>If no folder ID is supplied, the file will be created in
-					your root folder.</li>
-				<li>You can move or rename the file afterwards within Google
-					Drive.</li>
-			</ul>
-		</blockquote>
-		<p>
-			<label class="checkbox"> <input
-				id="input-sync-export-gdrive-realtime" type="checkbox">
-				Create a real time collaborative document
-			</label>
-		</p>
-		<blockquote class="muted">
-			<b>NOTE:</b>
-			<ul>
-				<li>Real time collaborative documents can't be open outside
-					StackEdit.</li>
-				<li>Real time collaborative documents can't have multiple
-					synchronized locations.</li>
-			</ul>
-		</blockquote>
-	</div>
-	<div class="modal-footer">
-		<a href="#" class="btn" data-dismiss="modal">Cancel</a> <a href="#"
-			data-dismiss="modal"
-			class="btn btn-primary action-sync-export-gdrive">OK</a>
 	</div>
 </div>
 
-<div id="modal-upload-dropbox" class="modal hide">
-	<div class="modal-header">
-		<button type="button" class="close" data-dismiss="modal"
-			aria-hidden="true">&times;</button>
-		<h3>Export to Dropbox</h3>
-	</div>
-	<div class="modal-body">
-		<blockquote class="muted">This will save the current
-			document to your Dropbox account and keep it synchronized.</blockquote>
-		<p>
-			Please specify a <b>file path</b> for "<span class="file-title"></span>":
-		</p>
-		<div class="input-prepend">
-			<span class="add-on"><i class="icon-dropbox"></i></span><input
-				id="input-sync-export-dropbox-path" type="text" class="span5"
-				placeholder="/path/to/My Document.md"></input>
+
+<div id="modal-insert-image" class="modal">
+	<div class="modal-dialog">
+		<div class="modal-content">
+
+			<div class="modal-header">
+				<button type="button" class="close action-close-insert-link"
+					data-dismiss="modal" aria-hidden="true">&times;</button>
+				<h3 class="modal-title">Image</h3>
+			</div>
+			<div class="modal-body">
+				<p>Please provide the image URL and an optional title:</p>
+				<div class="input-prepend">
+					<span class="add-on"><i class="icon-picture"></i></span><input
+						id="input-insert-image" type="text" class="col-lg-5 form-control"
+						placeholder='http://example.com/image.jpg "optional title"'></input>
+				</div>
+			</div>
+			<div class="modal-footer">
+				<a href="#" class="btn action-import-image-gplus"
+					data-dismiss="modal"><i class="icon-gplus"></i> Import from
+					Google+</a> <a href="#" class="btn" data-dismiss="modal">Cancel</a> <a
+					href="#" class="btn btn-primary action-insert-image"
+					data-dismiss="modal">OK</a>
+			</div>
 		</div>
-		<br /> <br />
-		<blockquote class="muted">
-			<b>NOTE:</b>
-			<ul>
-				<li>Dropbox file path does not depend on document title.</li>
-				<li>The title of your document will not be synchronized.</li>
-				<li>Destination folder must exist.</li>
-				<li>Any existing file at this location will be overwritten.</li>
-			</ul>
-		</blockquote>
-	</div>
-	<div class="modal-footer">
-		<a href="#" class="btn" data-dismiss="modal">Cancel</a> <a href="#"
-			data-dismiss="modal"
-			class="btn btn-primary action-sync-export-dropbox">OK</a>
 	</div>
 </div>
 
-<div id="modal-manage-sync" class="modal hide">
-	<div class="modal-header">
-		<button type="button" class="close" data-dismiss="modal"
-			aria-hidden="true">&times;</button>
-		<h3>Synchronization</h3>
-	</div>
-	<div class="modal-body">
-		<p class="msg-sync-list hide">
-			"<span class="file-title"></span>" is synchronized with the following
-			location(s):
-		</p>
-		<div id="manage-sync-list"></div>
-		<blockquote class="msg-sync-list hide muted">
-			<b>NOTE:</b> Removing a synchronized location will not delete any
-			file.
-		</blockquote>
-		<blockquote class="msg-no-sync hide muted">
-			"<span class="file-title"></span>" is not synchronized yet.
-		</blockquote>
-		<p>Add a synchronized location manually:</p>
-		<div class="input-prepend input-append sync-manual">
-			<span class="add-on" title="Google Drive"><i
-				class="icon-gdrive"></i></span><input id="input-sync-manual-gdrive-id"
-				type="text" class="span5" placeholder="GoogleDriveFileID"></input> <a
-				class="btn action-sync-manual-gdrive" title="Add location"
-				data-dismiss="modal"><i class="icon-ok"></i></a>
+
+<div id="modal-import-image" class="modal">
+	<div class="modal-dialog">
+		<div class="modal-content">
+
+			<div class="modal-header">
+				<button type="button" class="close action-close-insert-link"
+					data-dismiss="modal" aria-hidden="true">&times;</button>
+				<h3 class="modal-title">Google+ image import</h3>
+			</div>
+			<div class="modal-body">
+				<div class="form-horizontal">
+					<div class="form-group">
+						<div class="col-lg-7">
+							<img>
+						</div>
+					</div>
+					<div class="form-group">
+						<label class="col-lg-4 control-label"
+							for="input-import-image-title">Title (optional)</label>
+						<div class="col-lg-7">
+							<input type="text" id="input-import-image-title"
+								placeholder="Image title" class="form-control">
+						</div>
+					</div>
+					<div class="form-group">
+						<label class="col-lg-4 control-label"
+							for="input-import-image-size">Size limit (optional)</label>
+						<div class="col-lg-7">
+							<input type="text" id="input-import-image-size" placeholder="123"
+								class="col-lg-2 form-control"><span class="help-inline">px</span>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="modal-footer">
+				<a href="#" class="btn" data-dismiss="modal">Cancel</a> <a href="#"
+					class="btn btn-primary action-import-image" data-dismiss="modal">OK</a>
+			</div>
 		</div>
-		<div class="input-prepend input-append sync-manual">
-			<span class="add-on" title="Dropbox"><i class="icon-dropbox"></i></span><input
-				id="input-sync-manual-dropbox-path" type="text" class="span5"
-				placeholder="/dropbox/file/path"></input> <a
-				class="btn action-sync-manual-dropbox" title="Add location"
-				data-dismiss="modal"><i class="icon-ok"></i></a>
-		</div>
-		<blockquote class="muted">
-			<b>NOTE:</b> This will first upload the document and overwrite the
-			existing file on the server.
-		</blockquote>
-	</div>
-	<div class="modal-footer">
-		<a href="#" class="btn btn-primary" data-dismiss="modal">Close</a>
 	</div>
 </div>
 
-<div id="modal-publish" class="modal hide">
-	<div class="modal-header">
-		<button type="button" class="close" data-dismiss="modal"
-			aria-hidden="true">&times;</button>
-		<h3>
-			Publish on <span class="publish-provider-name"></span>
-		</h3>
-	</div>
-	<div class="modal-body">
-		<div class="form-horizontal">
-			<div class="control-group modal-publish-ssh">
-				<label class="control-label" for="input-publish-ssh-host">Host</label>
-				<div class="controls">
-					<input type="text" id="input-publish-ssh-host"
-						placeholder="host.name.or.ip"> <span class="help-block">
-						Host must be accessible publicly, unless you are hosting your own
-						<a target="_blank"
-						href="https://github.com/benweet/stackedit-ssh-proxy">SSH
-							proxy</a>.
-					</span>
-				</div>
-			</div>
-			<div class="control-group modal-publish-ssh">
-				<label class="control-label" for="input-publish-ssh-port">Port
-					(optional)</label>
-				<div class="controls">
-					<input type="text" id="input-publish-ssh-port" placeholder="22">
-				</div>
-			</div>
-			<div class="control-group modal-publish-ssh">
-				<label class="control-label" for="input-publish-ssh-username">Username</label>
-				<div class="controls">
-					<input type="text" id="input-publish-ssh-username"
-						placeholder="username">
-				</div>
-			</div>
-			<div class="control-group modal-publish-ssh">
-				<label class="control-label" for="input-publish-ssh-password">Password</label>
-				<div class="controls">
-					<input type="password" id="input-publish-ssh-password"
-						placeholder="password"> <span class="help-block">
-						Passwords are transmitted in clear, unless you are hosting your
-						own <a target="_blank"
-						href="https://github.com/benweet/stackedit-ssh-proxy">SSH
-							proxy</a>.
-					</span>
-				</div>
-			</div>
-			<div class="control-group modal-publish-github">
-				<label class="control-label" for="input-publish-github-reponame">Repository</label>
-				<div class="controls">
-					<input type="text" id="input-publish-github-reponame"
-						placeholder="repository-name">
-				</div>
-			</div>
-			<div class="control-group modal-publish-github">
-				<label class="control-label" for="input-publish-github-username">Username
-					(optional)</label>
-				<div class="controls">
-					<input type="text" id="input-publish-github-username"
-						placeholder="username">
-				</div>
-			</div>
-			<div class="control-group modal-publish-github">
-				<label class="control-label" for="input-publish-github-branch">Branch</label>
-				<div class="controls">
-					<input type="text" id="input-publish-github-branch"
-						placeholder="branch-name">
-				</div>
-			</div>
-			<div class="control-group modal-publish-ssh modal-publish-github">
-				<label class="control-label" for="input-publish-file-path">File
-					path</label>
-				<div class="controls">
-					<input type="text" id="input-publish-file-path"
-						placeholder="path/to/file.md">
-				</div>
-			</div>
-			<div class="control-group modal-publish-gist">
-				<label class="control-label" for="input-publish-filename">Filename</label>
-				<div class="controls">
-					<input type="text" id="input-publish-filename"
-						placeholder="filename">
-				</div>
-			</div>
-			<div class="control-group modal-publish-gist">
-				<label class="control-label" for="input-publish-gist-id">Existing
-					ID (optional)</label>
-				<div class="controls">
-					<input type="text" id="input-publish-gist-id" placeholder="GistID">
-				</div>
-			</div>
-			<div class="control-group modal-publish-gist">
-				<label class="control-label" for="input-publish-gist-public">Public</label>
-				<div class="controls">
-					<input type="checkbox" id="input-publish-gist-public"
-						checked="checked" />
-				</div>
-			</div>
-			<div class="control-group modal-publish-blogger">
-				<label class="control-label" for="input-publish-blogger-url">Blog
-					URL</label>
-				<div class="controls">
-					<input type="text" id="input-publish-blogger-url"
-						placeholder="http://exemple.blogger.com/">
-				</div>
-			</div>
-			<div class="control-group modal-publish-tumblr">
-				<label class="control-label" for="input-publish-tumblr-hostname">Blog
-					hostname</label>
-				<div class="controls">
-					<input type="text" id="input-publish-tumblr-hostname"
-						placeholder="exemple.tumblr.com">
-				</div>
-			</div>
-			<div class="control-group modal-publish-wordpress">
-				<label class="control-label" for="input-publish-tumblr-hostname">WordPress
-					site</label>
-				<div class="controls">
-					<input type="text" id="input-publish-wordpress-site"
-						placeholder="exemple.wordpress.com"> <span
-						class="help-block"> <a target="_blank"
-						href="http://jetpack.me/">Jetpack plugin</a> is required for
-						self-hosted sites.
-					</span>
-				</div>
-			</div>
-			<div
-				class="control-group modal-publish-blogger modal-publish-tumblr modal-publish-wordpress">
-				<label class="control-label" for="input-publish-postid">Update
-					existing post ID (optional)</label>
-				<div class="controls">
-					<input type="text" id="input-publish-postid" placeholder="PostID">
-				</div>
-			</div>
-			<div class="control-group modal-publish-blogger">
-				<label class="control-label" for="input-publish-labels">Labels
-					(comma separated)</label>
-				<div class="controls">
-					<input type="text" id="input-publish-labels"
-						placeholder="Label1, Label2">
-				</div>
-			</div>
-			<div
-				class="control-group modal-publish-tumblr modal-publish-wordpress">
-				<label class="control-label" for="input-publish-tags">Tags
-					(comma separated)</label>
-				<div class="controls">
-					<input type="text" id="input-publish-tags" placeholder="Tag1, Tag2">
-				</div>
-			</div>
-			<div class="control-group modal-publish-dropbox">
-				<label class="control-label" for="input-publish-dropbox-path">File
-					path</label>
-				<div class="controls">
-					<input type="text" id="input-publish-dropbox-path"
-						placeholder="/path/to/My Document.html">
-				</div>
-			</div>
-			<div class="control-group modal-publish-gdrive">
-				<label class="control-label" for="input-publish-gdrive-fileid">File
-					ID (optional)</label>
-				<div class="controls">
-					<input type="text" id="input-publish-gdrive-fileid"
-						placeholder="FileID"> <span class="help-block">If
-						no file ID is supplied, a new file will be created in your Google
-						Drive root folder. You can move the file afterwards within Google
-						Drive.</span>
-				</div>
-			</div>
-			<div class="control-group modal-publish-gdrive">
-				<label class="control-label" for="input-publish-gdrive-filename">Force
-					filename (optional)</label>
-				<div class="controls">
-					<input type="text" id="input-publish-gdrive-filename"
-						placeholder="Filename"> <span class="help-block">If
-						no file name is supplied, the document title will be used.</span>
-				</div>
-			</div>
 
-			<div class="control-group">
-				<div class="control-label">Format</div>
-				<div class="controls">
-					<label class="radio"> <input type="radio"
-						name="radio-publish-format" value="markdown"> Markdown
-					</label> <label class="radio"> <input type="radio"
-						name="radio-publish-format" value="html"> HTML
-					</label> <label class="radio"> <input type="radio"
-						name="radio-publish-format" value="template"> Template
+<div id="modal-remove-file-confirm" class="modal">
+	<div class="modal-dialog">
+		<div class="modal-content">
+
+			<div class="modal-header">
+				<button type="button" class="close" data-dismiss="modal"
+					aria-hidden="true">&times;</button>
+				<h3 class="modal-title">Delete</h3>
+			</div>
+			<div class="modal-body">
+				<p>
+					Are you sure you want to delete "<span class="file-title"></span>"?
+				</p>
+				<blockquote class="muted">
+					<b>NOTE:</b> This will not delete the file on synchronized
+					locations.
+				</blockquote>
+			</div>
+			<div class="modal-footer">
+				<a href="#" class="btn" data-dismiss="modal">Cancel</a> <a href="#"
+					class="btn btn-primary action-remove-file" data-dismiss="modal">Delete</a>
+			</div>
+		</div>
+	</div>
+</div>
+
+
+<div id="modal-import-harddrive-markdown" class="modal">
+	<div class="modal-dialog">
+		<div class="modal-content">
+
+			<div class="modal-header">
+				<button type="button" class="close" data-dismiss="modal"
+					aria-hidden="true">&times;</button>
+				<h3 class="modal-title">Import from hard drive</h3>
+			</div>
+			<div class="modal-body">
+				<p>Please select your Markdown files here:</p>
+				<p>
+					<input type="file" id="input-file-import-harddrive-markdown"
+						multiple class="form-control" />
+				</p>
+				<p>Or drag and drop your Markdown files here:</p>
+				<p id="dropzone-import-harddrive-markdown" class="drop-zone">Drop
+					files here</p>
+			</div>
+			<div class="modal-footer">
+				<a href="#" class="btn btn-primary" data-dismiss="modal">Close</a>
+			</div>
+		</div>
+	</div>
+</div>
+
+
+<div id="modal-import-harddrive-html" class="modal">
+	<div class="modal-dialog">
+		<div class="modal-content">
+
+			<div class="modal-header">
+				<button type="button" class="close" data-dismiss="modal"
+					aria-hidden="true">&times;</button>
+				<h3 class="modal-title">Convert HTML to Markdown</h3>
+			</div>
+			<div class="modal-body">
+				<p>Please select your HTML files here:</p>
+				<p>
+					<input type="file" id="input-file-import-harddrive-html" multiple
+						class="form-control" />
+				</p>
+				<p>Or drag and drop your HTML files here:</p>
+				<p id="dropzone-import-harddrive-html" class="drop-zone">Drop
+					files here</p>
+				<p>Or insert your HTML code here:</p>
+				<textarea id="input-convert-html"></textarea>
+			</div>
+			<div class="modal-footer">
+				<a href="#" class="btn" data-dismiss="modal">Close</a> <a href="#"
+					class="btn btn-primary action-convert-html" data-dismiss="modal">OK</a>
+			</div>
+		</div>
+	</div>
+</div>
+
+
+<div id="modal-upload-gdrive" class="modal">
+	<div class="modal-dialog">
+		<div class="modal-content">
+
+			<div class="modal-header">
+				<button type="button" class="close" data-dismiss="modal"
+					aria-hidden="true">&times;</button>
+				<h3 class="modal-title">Export to Google Drive</h3>
+			</div>
+			<div class="modal-body">
+				<blockquote class="muted">This will save the current
+					document to your Google Drive account and keep it synchronized.</blockquote>
+				<p>
+					Please specify a <b>folder ID</b> (optional):
+				</p>
+				<div class="input-prepend">
+					<span class="add-on"><i class="icon-gdrive"></i></span><input
+						id="input-sync-export-gdrive-parentid" type="text"
+						class="col-lg-5 form-control" placeholder="FolderID"></input>
+				</div>
+				<br /> <br />
+				<blockquote class="muted">
+					<b>NOTE:</b>
+					<ul>
+						<li>If no folder ID is supplied, the file will be created in
+							your root folder.</li>
+						<li>You can move or rename the file afterwards within Google
+							Drive.</li>
+					</ul>
+				</blockquote>
+				<div class="checkbox">
+					<label> <input id="input-sync-export-gdrive-realtime"
+						type="checkbox"> Create a real time collaborative document
 					</label>
 				</div>
+				<br /> <br />
+				<blockquote class="muted">
+					<b>NOTE:</b>
+					<ul>
+						<li>Real time collaborative documents can't be open outside
+							StackEdit.</li>
+						<li>Real time collaborative documents can't have multiple
+							synchronized locations.</li>
+					</ul>
+				</blockquote>
+			</div>
+			<div class="modal-footer">
+				<a href="#" class="btn" data-dismiss="modal">Cancel</a> <a href="#"
+					data-dismiss="modal"
+					class="btn btn-primary action-sync-export-gdrive">OK</a>
 			</div>
 		</div>
 	</div>
-	<div class="modal-footer">
-		<a href="#" class="btn" data-dismiss="modal">Cancel</a> <a href="#"
-			data-dismiss="modal" class="btn btn-primary action-process-publish">OK</a>
-	</div>
 </div>
 
-<div id="modal-manage-publish" class="modal hide">
-	<div class="modal-header">
-		<button type="button" class="close" data-dismiss="modal"
-			aria-hidden="true">&times;</button>
-		<h3>Publication</h3>
-	</div>
-	<div class="modal-body">
-		<p class="msg-publish-list hide">
-			"<span class="file-title"></span>" is published on the following
-			location(s):
-		</p>
-		<div id="manage-publish-list"></div>
-		<blockquote class="muted">
-			<div class="msg-no-publish hide">
-				"<span class="file-title"></span>" is not published yet. <br /> <br />
-			</div>
-			<b>NOTE:</b> You can add publications using "Publish on" sub-menu.
-		</blockquote>
-	</div>
-	<div class="modal-footer">
-		<a href="#" class="btn btn-primary" data-dismiss="modal">Close</a>
-	</div>
-</div>
 
-<div id="modal-settings" class="modal hide">
-	<div class="modal-header">
-		<button type="button" class="close" data-dismiss="modal"
-			aria-hidden="true">&times;</button>
-		<h3>Settings</h3>
-		<ul class="nav nav-tabs">
-			<li class="active"><a class="action-load-settings"
-				href="#tabpane-settings-editor" data-toggle="tab">Editor</a></li>
-			<li><a class="action-load-settings"
-				href="#tabpane-settings-publish" data-toggle="tab">Publish</a></li>
-			<li><a class="action-load-settings"
-				href="#tabpane-settings-extensions" data-toggle="tab">Extensions</a></li>
-			<li><a class="action-load-settings"
-				href="#tabpane-settings-utils" data-toggle="tab">Utils</a></li>
-		</ul>
-	</div>
-	<div class="modal-body">
+<div id="modal-upload-dropbox" class="modal">
+	<div class="modal-dialog">
+		<div class="modal-content">
 
-		<div class="tab-content">
-			<div class="tab-pane active" id="tabpane-settings-editor">
-				<div class="form-horizontal">
-					<div class="control-group">
-						<div class="control-label">Layout orientation</div>
-						<div class="controls">
-							<label class="radio"> <input type="radio"
-								name="radio-layout-orientation" value="horizontal">
-								Horizontal
-							</label> <label class="radio"> <input type="radio"
-								name="radio-layout-orientation" value="vertical">
-								Vertical
-							</label>
-						</div>
-					</div>
-					<div class="control-group">
-						<label class="control-label" for="input-settings-theme">Theme</label>
-						<div class="controls">
-							<select id="input-settings-theme">
-							</select> <span class="help-block"><a target="_blank"
-								href="https://github.com/benweet/stackedit/blob/master/doc/theming.md#stackedit-theming-guide">Create
-									your own theme...</a></span>
-						</div>
-					</div>
-					<div class="control-group">
-						<label class="control-label" for="input-settings-lazy-rendering">Lazy
-							rendering <a href="#" class="tooltip-lazy-rendering">(?)</a>
-						</label>
-						<div class="controls">
-							<input type="checkbox" id="input-settings-lazy-rendering" />
-						</div>
-					</div>
-					<div class="control-group">
-						<label class="control-label"
-							for="input-settings-editor-font-family">Editor font</label>
-						<div class="controls form-inline">
-							<input type="text" id="input-settings-editor-font-family"
-								class="span2"> <input type="text"
-								id="input-settings-editor-font-size" class="input-mini"><span
-								class="help-inline">px</span>
-						</div>
-					</div>
-					<div class="control-group">
-						<label class="control-label"
-							for="textarea-settings-default-content">Default content <a
-							href="#" class="tooltip-default-content">(?)</a>
-						</label>
-						<div class="controls">
-							<textarea id="textarea-settings-default-content"></textarea>
-						</div>
-					</div>
-				</div>
+			<div class="modal-header">
+				<button type="button" class="close" data-dismiss="modal"
+					aria-hidden="true">&times;</button>
+				<h3 class="modal-title">Export to Dropbox</h3>
 			</div>
-			<div class="tab-pane" id="tabpane-settings-publish">
-				<div class="form-horizontal">
-					<div class="control-group">
-						<label class="control-label"
-							for="input-settings-publish-commit-msg">Commit message</label>
-						<div class="controls">
-							<input type="text" id="input-settings-publish-commit-msg">
-						</div>
-					</div>
-					<div class="control-group">
-						<label class="control-label"
-							for="textarea-settings-publish-template">Template <a
-							href="#" class="tooltip-template">(?)</a>
-						</label>
-						<div class="controls">
-							<textarea id="textarea-settings-publish-template"></textarea>
-						</div>
-					</div>
-					<div class="control-group">
-						<label class="control-label" for="input-settings-ssh-proxy">SSH
-							proxy</label>
-						<div class="controls">
-							<input type="text" id="input-settings-ssh-proxy">
-						</div>
-					</div>
+			<div class="modal-body">
+				<blockquote class="muted">This will save the current
+					document to your Dropbox account and keep it synchronized.</blockquote>
+				<p>
+					Please specify a <b>file path</b> for "<span class="file-title"></span>":
+				</p>
+				<div class="input-prepend">
+					<span class="add-on"><i class="icon-dropbox"></i></span><input
+						id="input-sync-export-dropbox-path" type="text"
+						class="col-lg-5 form-control"
+						placeholder="/path/to/My Document.md"></input>
 				</div>
+				<br /> <br />
+				<blockquote class="muted">
+					<b>NOTE:</b>
+					<ul>
+						<li>Dropbox file path does not depend on document title.</li>
+						<li>The title of your document will not be synchronized.</li>
+						<li>Destination folder must exist.</li>
+						<li>Any existing file at this location will be overwritten.</li>
+					</ul>
+				</blockquote>
 			</div>
-			<div class="tab-pane" id="tabpane-settings-extensions">
-				<div class="accordion" id="accordion-extensions"></div>
-				<span class="help-block pull-right"><a target="_blank"
-					href="https://github.com/benweet/stackedit/blob/master/doc/developer-guide.md#architecture">Create
-						your own extension...</a></span>
-			</div>
-			<div class="tab-pane" id="tabpane-settings-utils">
-				<div class="tab-pane-button-container">
-					<a href="#"
-						class="btn btn-block btn-primary action-import-settings"><i
-						class="icon-wrench icon-white"></i> Import settings</a> <a href="#"
-						class="btn btn-block btn-primary action-export-settings"
-						data-dismiss="modal"><i class="icon-wrench icon-white"></i>
-						Export settings</a> <a href="#"
-						class="btn btn-block btn-primary action-default-settings"
-						data-dismiss="modal"><i class="icon-wrench icon-white"></i>
-						Load default settings</a> <input type="file"
-						id="input-file-import-settings" class="hide">
-				</div>
-				<div class="tab-pane-button-container">
-					<a href="#" class="btn btn-block btn-primary action-welcome-file"
-						data-dismiss="modal"><i class="icon-info-sign icon-white"></i>
-						Welcome document</a> <a href="#" class="btn btn-block btn-primary"
-						data-dismiss="modal" data-toggle="modal"
-						data-target="#modal-app-reset"><i class="icon-fire icon-white"></i>
-						Reset application</a>
-				</div>
+			<div class="modal-footer">
+				<a href="#" class="btn" data-dismiss="modal">Cancel</a> <a href="#"
+					data-dismiss="modal"
+					class="btn btn-primary action-sync-export-dropbox">OK</a>
 			</div>
 		</div>
-
-	</div>
-	<div class="modal-footer">
-		<a href="#" class="btn" data-dismiss="modal">Cancel</a> <a href="#"
-			class="btn btn-primary action-apply-settings" data-dismiss="modal">OK</a>
 	</div>
 </div>
 
-<div id="modal-about" class="modal hide">
-	<div class="modal-header">
-		<button type="button" class="close" data-dismiss="modal"
-			aria-hidden="true">&times;</button>
-		<img src="img/stackedit-promo.png" />
-	</div>
-	<div class="modal-body"></div>
-	<div class="modal-footer">
-		<a href="#" class="btn btn-primary" data-dismiss="modal">Close</a>
+
+<div id="modal-manage-sync" class="modal">
+	<div class="modal-dialog">
+		<div class="modal-content">
+
+			<div class="modal-header">
+				<button type="button" class="close" data-dismiss="modal"
+					aria-hidden="true">&times;</button>
+				<h3 class="modal-title">Synchronization</h3>
+			</div>
+			<div class="modal-body">
+				<p class="msg-sync-list hide">
+					"<span class="file-title"></span>" is synchronized with the
+					following location(s):
+				</p>
+				<div id="manage-sync-list"></div>
+				<blockquote class="msg-sync-list hide muted">
+					<b>NOTE:</b> Removing a synchronized location will not delete any
+					file.
+				</blockquote>
+				<blockquote class="msg-no-sync hide muted">
+					"<span class="file-title"></span>" is not synchronized yet.
+				</blockquote>
+				<p>Add a synchronized location manually:</p>
+				<div class="input-prepend input-append sync-manual">
+					<span class="add-on" title="Google Drive"><i
+						class="icon-gdrive"></i></span><input id="input-sync-manual-gdrive-id"
+						type="text" class="col-lg-5 form-control"
+						placeholder="GoogleDriveFileID"></input> <a
+						class="btn action-sync-manual-gdrive" title="Add location"
+						data-dismiss="modal"><i class="icon-ok"></i></a>
+				</div>
+				<div class="input-prepend input-append sync-manual">
+					<span class="add-on" title="Dropbox"><i class="icon-dropbox"></i></span><input
+						id="input-sync-manual-dropbox-path" type="text"
+						class="col-lg-5 form-control" placeholder="/dropbox/file/path"></input>
+					<a class="btn action-sync-manual-dropbox" title="Add location"
+						data-dismiss="modal"><i class="icon-ok"></i></a>
+				</div>
+				<blockquote class="muted">
+					<b>NOTE:</b> This will first upload the document and overwrite the
+					existing file on the server.
+				</blockquote>
+			</div>
+			<div class="modal-footer">
+				<a href="#" class="btn btn-primary" data-dismiss="modal">Close</a>
+			</div>
+		</div>
 	</div>
 </div>
 
-<div id="modal-non-unique" class="modal hide">
-	<div class="modal-header">
-		<h3>Ooops...</h3>
-	</div>
-	<div class="modal-body">
-		<p>StackEdit has stopped because another instance was running in
-			the same browser.</p>
-		<blockquote class="muted">If you want to reopen
-			StackEdit, click on "Reload".</blockquote>
-	</div>
-	<div class="modal-footer">
-		<a href="javascript:window.location.reload();" class="btn btn-primary">Reload</a>
+
+<div id="modal-publish" class="modal">
+	<div class="modal-dialog">
+		<div class="modal-content">
+
+			<div class="modal-header">
+				<button type="button" class="close" data-dismiss="modal"
+					aria-hidden="true">&times;</button>
+				<h3 class="modal-title">
+					Publish on <span class="publish-provider-name"></span>
+				</h3>
+			</div>
+			<div class="modal-body">
+				<div class="form-horizontal">
+					<div class="control-group modal-publish-ssh">
+						<label class="col-lg-4 control-label" for="input-publish-ssh-host">Host</label>
+						<div class="col-lg-7">
+							<input type="text" id="input-publish-ssh-host"
+								placeholder="host.name.or.ip" class="form-control"> <span
+								class="help-block"> Host must be accessible publicly,
+								unless you are hosting your own <a target="_blank"
+								href="https://github.com/benweet/stackedit-ssh-proxy">SSH
+									proxy</a>.
+							</span>
+						</div>
+					</div>
+					<div class="control-group modal-publish-ssh">
+						<label class="col-lg-4 control-label" for="input-publish-ssh-port">Port
+							(optional)</label>
+						<div class="col-lg-7">
+							<input type="text" id="input-publish-ssh-port" placeholder="22"
+								class="form-control">
+						</div>
+					</div>
+					<div class="control-group modal-publish-ssh">
+						<label class="col-lg-4 control-label"
+							for="input-publish-ssh-username">Username</label>
+						<div class="col-lg-7">
+							<input type="text" id="input-publish-ssh-username"
+								placeholder="username" class="form-control">
+						</div>
+					</div>
+					<div class="control-group modal-publish-ssh">
+						<label class="col-lg-4 control-label"
+							for="input-publish-ssh-password">Password</label>
+						<div class="col-lg-7">
+							<input type="password" id="input-publish-ssh-password"
+								placeholder="password" class="form-control"> <span
+								class="help-block"> Passwords are transmitted in clear,
+								unless you are hosting your own <a target="_blank"
+								href="https://github.com/benweet/stackedit-ssh-proxy">SSH
+									proxy</a>.
+							</span>
+						</div>
+					</div>
+					<div class="control-group modal-publish-github">
+						<label class="col-lg-4 control-label"
+							for="input-publish-github-reponame">Repository</label>
+						<div class="col-lg-7">
+							<input type="text" id="input-publish-github-reponame"
+								placeholder="repository-name" class="form-control">
+						</div>
+					</div>
+					<div class="control-group modal-publish-github">
+						<label class="col-lg-4 control-label"
+							for="input-publish-github-username">Username (optional)</label>
+						<div class="col-lg-7">
+							<input type="text" id="input-publish-github-username"
+								placeholder="username" class="form-control">
+						</div>
+					</div>
+					<div class="control-group modal-publish-github">
+						<label class="col-lg-4 control-label"
+							for="input-publish-github-branch">Branch</label>
+						<div class="col-lg-7">
+							<input type="text" id="input-publish-github-branch"
+								placeholder="branch-name" class="form-control">
+						</div>
+					</div>
+					<div class="control-group modal-publish-ssh modal-publish-github">
+						<label class="col-lg-4 control-label"
+							for="input-publish-file-path">File path</label>
+						<div class="col-lg-7">
+							<input type="text" id="input-publish-file-path"
+								placeholder="path/to/file.md" class="form-control">
+						</div>
+					</div>
+					<div class="control-group modal-publish-gist">
+						<label class="col-lg-4 control-label" for="input-publish-filename">Filename</label>
+						<div class="col-lg-7">
+							<input type="text" id="input-publish-filename"
+								placeholder="filename" class="form-control">
+						</div>
+					</div>
+					<div class="control-group modal-publish-gist">
+						<label class="col-lg-4 control-label" for="input-publish-gist-id">Existing
+							ID (optional)</label>
+						<div class="col-lg-7">
+							<input type="text" id="input-publish-gist-id"
+								placeholder="GistID" class="form-control">
+						</div>
+					</div>
+					<div class="control-group modal-publish-gist">
+						<label class="col-lg-4 control-label"
+							for="input-publish-gist-public">Public</label>
+						<div class="col-lg-7">
+							<div class="checkbox">
+								<input type="checkbox" id="input-publish-gist-public"
+									checked="checked" />
+							</div>
+						</div>
+					</div>
+					<div class="control-group modal-publish-blogger">
+						<label class="col-lg-4 control-label"
+							for="input-publish-blogger-url">Blog URL</label>
+						<div class="col-lg-7">
+							<input type="text" id="input-publish-blogger-url"
+								placeholder="http://exemple.blogger.com/" class="form-control">
+						</div>
+					</div>
+					<div class="control-group modal-publish-tumblr">
+						<label class="col-lg-4 control-label"
+							for="input-publish-tumblr-hostname">Blog hostname</label>
+						<div class="col-lg-7">
+							<input type="text" id="input-publish-tumblr-hostname"
+								placeholder="exemple.tumblr.com" class="form-control">
+						</div>
+					</div>
+					<div class="control-group modal-publish-wordpress">
+						<label class="col-lg-4 control-label"
+							for="input-publish-tumblr-hostname">WordPress site</label>
+						<div class="col-lg-7">
+							<input type="text" id="input-publish-wordpress-site"
+								placeholder="exemple.wordpress.com" class="form-control">
+							<span class="help-block"> <a target="_blank"
+								href="http://jetpack.me/">Jetpack plugin</a> is required for
+								self-hosted sites.
+							</span>
+						</div>
+					</div>
+					<div
+						class="control-group modal-publish-blogger modal-publish-tumblr modal-publish-wordpress">
+						<label class="col-lg-4 control-label" for="input-publish-postid">Update
+							existing post ID (optional)</label>
+						<div class="col-lg-7">
+							<input type="text" id="input-publish-postid" placeholder="PostID"
+								class="form-control">
+						</div>
+					</div>
+					<div class="control-group modal-publish-blogger">
+						<label class="col-lg-4 control-label" for="input-publish-labels">Labels
+							(comma separated)</label>
+						<div class="col-lg-7">
+							<input type="text" id="input-publish-labels"
+								placeholder="Label1, Label2" class="form-control">
+						</div>
+					</div>
+					<div
+						class="control-group modal-publish-tumblr modal-publish-wordpress">
+						<label class="col-lg-4 control-label" for="input-publish-tags">Tags
+							(comma separated)</label>
+						<div class="col-lg-7">
+							<input type="text" id="input-publish-tags"
+								placeholder="Tag1, Tag2" class="form-control">
+						</div>
+					</div>
+					<div class="control-group modal-publish-dropbox">
+						<label class="col-lg-4 control-label"
+							for="input-publish-dropbox-path">File path</label>
+						<div class="col-lg-7">
+							<input type="text" id="input-publish-dropbox-path"
+								placeholder="/path/to/My Document.html" class="form-control">
+						</div>
+					</div>
+					<div class="control-group modal-publish-gdrive">
+						<label class="col-lg-4 control-label"
+							for="input-publish-gdrive-fileid">File ID (optional)</label>
+						<div class="col-lg-7">
+							<input type="text" id="input-publish-gdrive-fileid"
+								placeholder="FileID" class="form-control"> <span
+								class="help-block">If no file ID is supplied, a new file
+								will be created in your Google Drive root folder. You can move
+								the file afterwards within Google Drive.</span>
+						</div>
+					</div>
+					<div class="control-group modal-publish-gdrive">
+						<label class="col-lg-4 control-label"
+							for="input-publish-gdrive-filename">Force filename
+							(optional)</label>
+						<div class="col-lg-7">
+							<input type="text" id="input-publish-gdrive-filename"
+								placeholder="Filename" class="form-control"> <span
+								class="help-block">If no file name is supplied, the
+								document title will be used.</span>
+						</div>
+					</div>
+
+					<div class="form-group">
+						<div class="col-lg-4 control-label">Format</div>
+						<div class="col-lg-7">
+							<div class="radio">
+								<label> <input type="radio" name="radio-publish-format"
+									value="markdown"> Markdown
+								</label>
+							</div>
+							<div class="radio">
+								<label> <input type="radio" name="radio-publish-format"
+									value="html"> HTML
+								</label>
+							</div>
+							<div class="radio">
+								<label> <input type="radio" name="radio-publish-format"
+									value="template"> Template
+								</label>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="modal-footer">
+				<a href="#" class="btn" data-dismiss="modal">Cancel</a> <a href="#"
+					data-dismiss="modal" class="btn btn-primary action-process-publish">OK</a>
+			</div>
+		</div>
 	</div>
 </div>
 
-<div id="modal-app-reset" class="modal hide">
-	<div class="modal-header">
-		<h3>Reset application</h3>
-	</div>
-	<div class="modal-body">
-		<p>This will delete all your local documents.</p>
-		<blockquote class="muted">Are you sure?</blockquote>
-	</div>
-	<div class="modal-footer">
-		<a href="#" class="btn" data-dismiss="modal">Cancel</a> <a href="#"
-			class="btn btn-primary action-app-reset" data-dismiss="modal">OK</a>
+
+<div id="modal-manage-publish" class="modal">
+	<div class="modal-dialog">
+		<div class="modal-content">
+
+			<div class="modal-header">
+				<button type="button" class="close" data-dismiss="modal"
+					aria-hidden="true">&times;</button>
+				<h3 class="modal-title">Publication</h3>
+			</div>
+			<div class="modal-body">
+				<p class="msg-publish-list hide">
+					"<span class="file-title"></span>" is published on the following
+					location(s):
+				</p>
+				<div id="manage-publish-list"></div>
+				<blockquote class="muted">
+					<div class="msg-no-publish hide">
+						"<span class="file-title"></span>" is not published yet. <br /> <br />
+					</div>
+					<b>NOTE:</b> You can add publications using "Publish on" sub-menu.
+				</blockquote>
+			</div>
+			<div class="modal-footer">
+				<a href="#" class="btn btn-primary" data-dismiss="modal">Close</a>
+			</div>
+		</div>
 	</div>
 </div>
 
-<textarea id="md-section-helper"></textarea>
+
+<div id="modal-settings" class="modal">
+	<div class="modal-dialog">
+		<div class="modal-content">
+
+			<div class="modal-header">
+				<button type="button" class="close" data-dismiss="modal"
+					aria-hidden="true">&times;</button>
+				<h3 class="modal-title">Settings</h3>
+				<ul class="nav nav-tabs">
+					<li class="active"><a class="action-load-settings"
+						href="#tabpane-settings-editor" data-toggle="tab">Editor</a></li>
+					<li><a class="action-load-settings"
+						href="#tabpane-settings-publish" data-toggle="tab">Publish</a></li>
+					<li><a class="action-load-settings"
+						href="#tabpane-settings-extensions" data-toggle="tab">Extensions</a></li>
+					<li><a class="action-load-settings"
+						href="#tabpane-settings-utils" data-toggle="tab">Utils</a></li>
+				</ul>
+			</div>
+			<div class="modal-body">
+
+				<div class="tab-content">
+					<div class="tab-pane active" id="tabpane-settings-editor">
+						<div class="form-horizontal">
+							<div class="form-group">
+								<label class="col-lg-4 control-label">Layout orientation</label>
+								<div class="col-lg-7">
+									<div class="radio">
+										<label> <input type="radio"
+											name="radio-layout-orientation" value="horizontal">
+											Horizontal
+										</label>
+									</div>
+									<div class="radio">
+										<label> <input type="radio"
+											name="radio-layout-orientation" value="vertical">
+											Vertical
+										</label>
+									</div>
+								</div>
+							</div>
+							<div class="form-group">
+								<label class="col-lg-4 control-label" for="input-settings-theme">Theme</label>
+								<div class="col-lg-7">
+									<select id="input-settings-theme" class="form-control">
+									</select> <span class="help-block"><a target="_blank"
+										href="https://github.com/benweet/stackedit/blob/master/doc/theming.md#stackedit-theming-guide">Create
+											your own theme...</a></span>
+								</div>
+							</div>
+							<div class="form-group">
+								<label class="col-lg-4 control-label"
+									for="input-settings-lazy-rendering">Lazy rendering <a
+									href="#" class="tooltip-lazy-rendering">(?)</a>
+								</label>
+								<div class="col-lg-7">
+									<div class="checkbox">
+										<input type="checkbox" id="input-settings-lazy-rendering" />
+									</div>
+								</div>
+							</div>
+							<div class="form-group">
+								<label class="col-lg-4 control-label"
+									for="input-settings-editor-font-family">Editor font</label>
+								<div class="col-lg-8 form-inline">
+									<input type="text" id="input-settings-editor-font-family"
+										class="form-control col-lg-7"> <input type="text"
+										id="input-settings-editor-font-size"
+										class="form-control col-lg-2"> px
+								</div>
+							</div>
+							<div class="form-group">
+								<label class="col-lg-4 control-label"
+									for="textarea-settings-default-content">Default content
+									<a href="#" class="tooltip-default-content">(?)</a>
+								</label>
+								<div class="col-lg-7">
+									<textarea id="textarea-settings-default-content"
+										class="form-control"></textarea>
+								</div>
+							</div>
+						</div>
+					</div>
+					<div class="tab-pane" id="tabpane-settings-publish">
+						<div class="form-horizontal">
+							<div class="form-group">
+								<label class="col-lg-4 control-label"
+									for="input-settings-publish-commit-msg">Commit message</label>
+								<div class="col-lg-7">
+									<input type="text" id="input-settings-publish-commit-msg"
+										class="form-control">
+								</div>
+							</div>
+							<div class="form-group">
+								<label class="col-lg-4 control-label"
+									for="textarea-settings-publish-template">Template <a
+									href="#" class="tooltip-template">(?)</a>
+								</label>
+								<div class="col-lg-7">
+									<textarea id="textarea-settings-publish-template"
+										class="form-control"></textarea>
+								</div>
+							</div>
+							<div class="form-group">
+								<label class="col-lg-4 control-label"
+									for="input-settings-ssh-proxy">SSH proxy</label>
+								<div class="col-lg-7">
+									<input type="text" id="input-settings-ssh-proxy"
+										class="form-control">
+								</div>
+							</div>
+						</div>
+					</div>
+					<div class="tab-pane" id="tabpane-settings-extensions">
+						<div class="accordion" id="accordion-extensions"></div>
+						<span class="help-block pull-right"><a target="_blank"
+							href="https://github.com/benweet/stackedit/blob/master/doc/developer-guide.md#architecture">Create
+								your own extension...</a></span>
+					</div>
+					<div class="tab-pane" id="tabpane-settings-utils">
+						<div class="tab-pane-button-container">
+							<a href="#"
+								class="btn btn-block btn-primary action-import-settings"><i
+								class="icon-wrench icon-white"></i> Import settings</a> <a href="#"
+								class="btn btn-block btn-primary action-export-settings"
+								data-dismiss="modal"><i class="icon-wrench icon-white"></i>
+								Export settings</a> <a href="#"
+								class="btn btn-block btn-primary action-default-settings"
+								data-dismiss="modal"><i class="icon-wrench icon-white"></i>
+								Load default settings</a> <input type="file"
+								id="input-file-import-settings" class="hide">
+						</div>
+						<div class="tab-pane-button-container">
+							<a href="#" class="btn btn-block btn-primary action-welcome-file"
+								data-dismiss="modal"><i class="icon-info-sign icon-white"></i>
+								Welcome document</a> <a href="#" class="btn btn-block btn-primary"
+								data-dismiss="modal" data-toggle="modal"
+								data-target="#modal-app-reset"><i
+								class="icon-fire icon-white"></i> Reset application</a>
+						</div>
+					</div>
+				</div>
+
+			</div>
+			<div class="modal-footer">
+				<a href="#" class="btn" data-dismiss="modal">Cancel</a> <a href="#"
+					class="btn btn-primary action-apply-settings" data-dismiss="modal">OK</a>
+			</div>
+		</div>
+	</div>
+</div>
+
+
+<div id="modal-about" class="modal">
+	<div class="modal-dialog">
+		<div class="modal-content">
+
+			<div class="modal-header">
+				<button type="button" class="close" data-dismiss="modal"
+					aria-hidden="true">&times;</button>
+				<img src="img/stackedit-promo.png" />
+			</div>
+			<div class="modal-body"></div>
+			<div class="modal-footer">
+				<a href="#" class="btn btn-primary" data-dismiss="modal">Close</a>
+			</div>
+		</div>
+	</div>
+</div>
+
+
+<div id="modal-non-unique" class="modal">
+	<div class="modal-dialog">
+		<div class="modal-content">
+
+			<div class="modal-header">
+				<h3 class="modal-title">Ooops...</h3>
+			</div>
+			<div class="modal-body">
+				<p>StackEdit has stopped because another instance was running in
+					the same browser.</p>
+				<blockquote class="muted">If you want to reopen
+					StackEdit, click on "Reload".</blockquote>
+			</div>
+			<div class="modal-footer">
+				<a href="javascript:window.location.reload();"
+					class="btn btn-primary">Reload</a>
+			</div>
+		</div>
+	</div>
+</div>
+
+
+<div id="modal-app-reset" class="modal">
+	<div class="modal-dialog">
+		<div class="modal-content">
+
+			<div class="modal-header">
+				<h3 class="modal-title">Reset application</h3>
+			</div>
+			<div class="modal-body">
+				<p>This will delete all your local documents.</p>
+				<blockquote class="muted">Are you sure?</blockquote>
+			</div>
+			<div class="modal-footer">
+				<a href="#" class="btn" data-dismiss="modal">Cancel</a> <a href="#"
+					class="btn btn-primary action-app-reset" data-dismiss="modal">OK</a>
+			</div>
+		</div>
+	</div>
+</div>
+
+
+<textarea id="md-section-helper" class="form-control"></textarea>
 <div class="lock-ui hide"></div>
 <div id="dropboxjs" data-app-key="x0k2l8puemfvg0o"></div>
diff --git a/js/html/buttonHtmlCode.html b/js/html/buttonHtmlCode.html
index 839d2cb4..44119460 100644
--- a/js/html/buttonHtmlCode.html
+++ b/js/html/buttonHtmlCode.html
@@ -3,5 +3,5 @@
 </button>
 <div class="dropdown-menu pull-right">
 	<h3>HTML code</h3>
-	<textarea id="input-html-code"></textarea>
+	<textarea id="input-html-code" class="form-control"></textarea>
 </div>
diff --git a/js/html/buttonHtmlCodeSettingsBlock.html b/js/html/buttonHtmlCodeSettingsBlock.html
index 33e1e0ce..f1725e8c 100644
--- a/js/html/buttonHtmlCodeSettingsBlock.html
+++ b/js/html/buttonHtmlCodeSettingsBlock.html
@@ -1,11 +1,11 @@
 <p>Adds a "HTML code" button over the preview.</p>
 <div class="form-horizontal">
-	<div class="control-group">
-		<label class="control-label" for="textarea-html-code-template">Template
+	<div class="form-group">
+		<label class="col-lg-4 control-label" for="textarea-html-code-template">Template
 			<a href="#" class="tooltip-template">(?)</a>
 		</label>
-		<div class="controls">
-			<textarea id="textarea-html-code-template"></textarea>
+		<div class="col-lg-7">
+			<textarea id="textarea-html-code-template" class="form-control"></textarea>
 		</div>
 	</div>
 </div>
\ No newline at end of file
diff --git a/js/html/buttonStatSettingsBlock.html b/js/html/buttonStatSettingsBlock.html
index d854452a..c082bdfc 100644
--- a/js/html/buttonStatSettingsBlock.html
+++ b/js/html/buttonStatSettingsBlock.html
@@ -1,21 +1,21 @@
 <p>Adds a "Document statistics" button over the preview.</p>
 <div class="form-horizontal">
-	<div class="control-group form-inline">
+	<div class="form-group form-inline">
 		<label class="label-text" for="input-stat-name1">Title</label> <input
-			id="input-stat-name1" type="text" class="input-small"> <label
+			id="input-stat-name1" type="text" class="form-control col-lg-3"> <label
 			class="label-text" for="input-stat-value1">RegExp</label> <input
-			id="input-stat-value1" type="text" class="span2">
+			id="input-stat-value1" type="text" class="form-control col-lg-4">
 	</div>
-	<div class="control-group form-inline">
+	<div class="form-group form-inline">
 		<label class="label-text" for="input-stat-name2">Title</label> <input
-			id="input-stat-name2" type="text" class="input-small"> <label
+			id="input-stat-name2" type="text" class="form-control col-lg-3"> <label
 			class="label-text" for="input-stat-value2">RegExp</label> <input
-			id="input-stat-value2" type="text" class="span2">
+			id="input-stat-value2" type="text" class="form-control col-lg-4">
 	</div>
-	<div class="control-group form-inline">
+	<div class="form-group form-inline">
 		<label class="label-text" for="input-stat-name3">Title</label> <input
-			id="input-stat-name3" type="text" class="input-small"> <label
+			id="input-stat-name3" type="text" class="form-control col-lg-3"> <label
 			class="label-text" for="input-stat-value3">RegExp</label> <input
-			id="input-stat-value3" type="text" class="span2">
+			id="input-stat-value3" type="text" class="form-control col-lg-4">
 	</div>
 </div>
diff --git a/js/html/buttonSyncSettingsBlock.html b/js/html/buttonSyncSettingsBlock.html
index 96df6caa..a886382c 100644
--- a/js/html/buttonSyncSettingsBlock.html
+++ b/js/html/buttonSyncSettingsBlock.html
@@ -1,11 +1,11 @@
 <p>Adds a "Synchronize documents" button in the navigation bar.</p>
 <div class="form-horizontal">
-	<div class="control-group">
-		<label class="control-label" for="input-sync-period">Sync
+	<div class="form-group">
+		<label class="col-lg-5 control-label" for="input-sync-period">Sync
 			period (0: manual)</label>
-		<div class="controls">
-			<input type="text" id="input-sync-period" class="input-mini"
-				placeholder="180000"> <span class="help-inline">ms</span>
+		<div class="col-lg-6 form-inline">
+			<input type="text" id="input-sync-period"
+				class="col-lg-5 form-control" placeholder="180000"> ms
 		</div>
 	</div>
 </div>
\ No newline at end of file
diff --git a/js/html/dialogImportImage.html b/js/html/dialogImportImage.html
deleted file mode 100644
index 3f7236e7..00000000
--- a/js/html/dialogImportImage.html
+++ /dev/null
@@ -1,36 +0,0 @@
-<div class="modal-dialog">
-	<div class="modal-header">
-		<button type="button" class="close action-close-insert-link"
-			data-dismiss="modal" aria-hidden="true">&times;</button>
-		<h3>Google+ image import</h3>
-	</div>
-	<div class="modal-body">
-		<div class="form-horizontal">
-			<div class="control-group">
-				<div class="controls">
-					<img>
-				</div>
-			</div>
-			<div class="control-group">
-				<label class="control-label" for="input-import-image-title">Title
-					(optional)</label>
-				<div class="controls">
-					<input type="text" id="input-import-image-title"
-						placeholder="Image title">
-				</div>
-			</div>
-			<div class="control-group">
-				<label class="control-label" for="input-import-image-size">Size
-					limit (optional)</label>
-				<div class="controls">
-					<input type="text" id="input-import-image-size" placeholder="123"
-						class="input-mini"><span class="help-inline">px</span>
-				</div>
-			</div>
-		</div>
-	</div>
-	<div class="modal-footer">
-		<a href="#" class="btn" data-dismiss="modal">Cancel</a> <a href="#"
-			class="btn btn-primary action-import-image" data-dismiss="modal">OK</a>
-	</div>
-</div>
diff --git a/js/html/dialogInsertImage.html b/js/html/dialogInsertImage.html
deleted file mode 100644
index c8ebe846..00000000
--- a/js/html/dialogInsertImage.html
+++ /dev/null
@@ -1,22 +0,0 @@
-<div class="modal-dialog">
-	<div class="modal-header">
-		<button type="button" class="close action-close-insert-link"
-			data-dismiss="modal" aria-hidden="true">&times;</button>
-		<h3>Image</h3>
-	</div>
-	<div class="modal-body">
-		<p>Please provide the image URL and an optional title:</p>
-		<div class="input-prepend">
-			<span class="add-on"><i class="icon-picture"></i></span><input
-				id="input-insert-image" type="text" class="span5"
-				placeholder='http://example.com/image.jpg "optional title"'></input>
-		</div>
-	</div>
-	<div class="modal-footer">
-		<a href="#" class="btn action-import-image-gplus" data-dismiss="modal"><i
-			class="icon-gplus"></i> Import from Google+</a> <a href="#" class="btn"
-			data-dismiss="modal">Cancel</a> <a href="#"
-			class="btn btn-primary action-insert-image" data-dismiss="modal">OK</a>
-	</div>
-</div>
-
diff --git a/js/html/dialogInsertLink.html b/js/html/dialogInsertLink.html
deleted file mode 100644
index 79002e38..00000000
--- a/js/html/dialogInsertLink.html
+++ /dev/null
@@ -1,19 +0,0 @@
-<div class="modal-dialog">
-	<div class="modal-header">
-		<button type="button" class="close action-close-insert-link"
-			data-dismiss="modal" aria-hidden="true">&times;</button>
-		<h3>Hyperlink</h3>
-	</div>
-	<div class="modal-body">
-		<p>Please provide the link URL and an optional title:</p>
-		<div class="input-prepend">
-			<span class="add-on"><i class="icon-globe"></i></span><input
-				id="input-insert-link" type="text" class="span5"
-				placeholder='http://example.com/ "optional title"'></input>
-		</div>
-	</div>
-	<div class="modal-footer">
-		<a href="#" class="btn" data-dismiss="modal">Cancel</a> <a href="#"
-			class="btn btn-primary action-insert-link" data-dismiss="modal">OK</a>
-	</div>
-</div>
diff --git a/js/html/dialogRemoveFileConfirm.html b/js/html/dialogRemoveFileConfirm.html
deleted file mode 100644
index d6faf61d..00000000
--- a/js/html/dialogRemoveFileConfirm.html
+++ /dev/null
@@ -1,19 +0,0 @@
-<div class="modal-dialog">
-	<div class="modal-header">
-		<button type="button" class="close" data-dismiss="modal"
-			aria-hidden="true">&times;</button>
-		<h3>Delete</h3>
-	</div>
-	<div class="modal-body">
-		<p>
-			Are you sure you want to delete "<span class="file-title"></span>"?
-		</p>
-		<blockquote class="muted">
-			<b>NOTE:</b> This will not delete the file on synchronized locations.
-		</blockquote>
-	</div>
-	<div class="modal-footer">
-		<a href="#" class="btn" data-dismiss="modal">Cancel</a> <a href="#"
-			class="btn btn-primary action-remove-file" data-dismiss="modal">Delete</a>
-	</div>
-</div>
diff --git a/js/html/documentSelectorSettingsBlock.html b/js/html/documentSelectorSettingsBlock.html
index 72c52685..9f56a18c 100644
--- a/js/html/documentSelectorSettingsBlock.html
+++ b/js/html/documentSelectorSettingsBlock.html
@@ -1,31 +1,31 @@
 <p>Builds the "Open document" dropdown menu.</p>
 <div class="form-horizontal">
-	<div class="control-group">
-		<label class="control-label" for="select-document-selector-orderby">Order
+	<div class="form-group">
+		<label class="col-lg-4 control-label" for="select-document-selector-orderby">Order
 			by</label>
-		<div class="controls">
-			<select id="select-document-selector-orderby">
+		<div class="col-lg-7">
+			<select id="select-document-selector-orderby" class="form-control">
 				<option value="title">Document title</option>
 				<option value="mru">Most recently used</option>
 			</select>
 		</div>
 	</div>
-	<div class="control-group">
-		<label class="control-label"
+	<div class="form-group">
+		<label class="col-lg-4 control-label"
 			for="input-document-selector-shortcut-previous">"Previous"
 			shortcut <a href="http://craig.is/killing/mice#keys" target="_blank">(?)</a></label>
-		<div class="controls">
+		<div class="col-lg-7">
 			<input type="text" id="input-document-selector-shortcut-previous"
-				class="span2">
+				class="form-control">
 		</div>
 	</div>
-	<div class="control-group">
-		<label class="control-label"
+	<div class="form-group">
+		<label class="col-lg-4 control-label"
 			for="input-document-selector-shortcut-next">"Next"
 			shortcut <a href="http://craig.is/killing/mice#keys" target="_blank">(?)</a></label>
-		<div class="controls">
+		<div class="col-lg-7">
 			<input type="text" id="input-document-selector-shortcut-next"
-				class="span2">
+				class="form-control">
 		</div>
 	</div>
 </div>
\ No newline at end of file
diff --git a/js/html/markdownExtraSettingsBlock.html b/js/html/markdownExtraSettingsBlock.html
index cd88dd16..c41aabd1 100644
--- a/js/html/markdownExtraSettingsBlock.html
+++ b/js/html/markdownExtraSettingsBlock.html
@@ -1,40 +1,55 @@
 <p>Adds extra features to the original Markdown syntax.</p>
 <div class="form-horizontal">
-	<div class="control-group">
-		<label class="control-label" for="input-markdownextra-fencedcodegfm">GFM fenced code blocks</label>
-		<div class="controls">
-			<input type="checkbox" id="input-markdownextra-fencedcodegfm">
+	<div class="form-group">
+		<label class="col-lg-4 control-label"
+			for="input-markdownextra-fencedcodegfm">GFM fenced code
+			blocks</label>
+		<div class="col-lg-7">
+			<div class="checkbox">
+				<input type="checkbox" id="input-markdownextra-fencedcodegfm">
+			</div>
 		</div>
 	</div>
-	<div class="control-group">
-		<label class="control-label" for="input-markdownextra-tables">Tables</label>
-		<div class="controls">
-			<input type="checkbox" id="input-markdownextra-tables">
+	<div class="form-group">
+		<label class="col-lg-4 control-label" for="input-markdownextra-tables">Tables</label>
+		<div class="col-lg-7">
+			<div class="checkbox">
+				<input type="checkbox" id="input-markdownextra-tables">
+			</div>
 		</div>
 	</div>
-	<div class="control-group">
-		<label class="control-label" for="input-markdownextra-deflist">Definition lists</label>
-		<div class="controls">
-			<input type="checkbox" id="input-markdownextra-deflist">
+	<div class="form-group">
+		<label class="col-lg-4 control-label"
+			for="input-markdownextra-deflist">Definition lists</label>
+		<div class="col-lg-7">
+			<div class="checkbox">
+				<input type="checkbox" id="input-markdownextra-deflist">
+			</div>
 		</div>
 	</div>
-	<div class="control-group">
-		<label class="control-label" for="input-markdownextra-attrlist">Special attributes</label>
-		<div class="controls">
-			<input type="checkbox" id="input-markdownextra-attrlist">
+	<div class="form-group">
+		<label class="col-lg-4 control-label"
+			for="input-markdownextra-attrlist">Special attributes</label>
+		<div class="col-lg-7">
+			<div class="checkbox">
+				<input type="checkbox" id="input-markdownextra-attrlist">
+			</div>
 		</div>
 	</div>
-	<div class="control-group">
-		<label class="control-label" for="input-markdownextra-footnotes">Footnotes</label>
-		<div class="controls">
-			<input type="checkbox" id="input-markdownextra-footnotes">
+	<div class="form-group">
+		<label class="col-lg-4 control-label"
+			for="input-markdownextra-footnotes">Footnotes</label>
+		<div class="col-lg-7">
+			<div class="checkbox">
+				<input type="checkbox" id="input-markdownextra-footnotes">
+			</div>
 		</div>
 	</div>
-	<div class="control-group">
-		<label class="control-label" for="input-markdownextra-highlighter">Syntax
-			highlighter</label>
-		<div class="controls">
-			<select id="input-markdownextra-highlighter"><option>None</option>
+	<div class="form-group">
+		<label class="col-lg-4 control-label"
+			for="input-markdownextra-highlighter">Syntax highlighter</label>
+		<div class="col-lg-7">
+			<select id="input-markdownextra-highlighter" class="form-control"><option>None</option>
 				<option value="prettify">Prettify</option>
 				<option value="highlight">Highlight.js</option>
 			</select>
diff --git a/js/html/settingsExtensionsAccordion.html b/js/html/settingsExtensionsAccordion.html
index 906d93c0..092cfced 100644
--- a/js/html/settingsExtensionsAccordion.html
+++ b/js/html/settingsExtensionsAccordion.html
@@ -8,6 +8,6 @@
 			href="#collapse-<%= extensionId %>"> <%= extensionName %> </a>
 	</div>
 	<div id="collapse-<%= extensionId %>" class="accordion-body collapse">
-		<div class="accordion-inner"><%= settingsBlock %></div>
+		<div class="accordion-inner clearfix"><%= settingsBlock %></div>
 	</div>
 </div>
diff --git a/js/main.js b/js/main.js
index 15119187..1eb1ddc1 100644
--- a/js/main.js
+++ b/js/main.js
@@ -92,11 +92,10 @@ require([
     "synchronizer",
     "publisher",
     "mediaImporter",
-    "css!styles/fontello.css",
     "css!styles/jgrowl.css",
     "css!styles/prettify.css",
     "css!styles/highlight.css",
-    "less!styles/default.less",
+    "less!styles/main.less",
 ], function($, core) {
 
     $(function() {
diff --git a/js/styles/default.less b/js/styles/default.less
index 22d0b539..93c5374a 100644
--- a/js/styles/default.less
+++ b/js/styles/default.less
@@ -1,5 +1,3 @@
-@import "bootstrap/bootstrap.less";
-
 @body-background: #f5f5f5;
 @border: #ddd;
 
@@ -29,6 +27,7 @@ body {
 /*
 Override Bootstrap 
 */
+
 div,span,a,ul,li,textarea,input,button {
 	background-image: none !important;
 	filter: none !important;
@@ -38,10 +37,34 @@ div,span,a,ul,li,textarea,input,button {
 	text-shadow: none !important;
 }
 
+.form-inline {
+  .col-lg-1  { width: percentage((1 / @grid-columns)); }
+  .col-lg-2  { width: percentage((2 / @grid-columns)); }
+  .col-lg-3  { width: percentage((3 / @grid-columns)); }
+  .col-lg-4  { width: percentage((4 / @grid-columns)); }
+  .col-lg-5  { width: percentage((5 / @grid-columns)); }
+  .col-lg-6  { width: percentage((6 / @grid-columns)); }
+  .col-lg-7  { width: percentage((7 / @grid-columns)); }
+  .col-lg-8  { width: percentage((8 / @grid-columns)); }
+  .col-lg-9  { width: percentage((9 / @grid-columns)); }
+  .col-lg-10 { width: percentage((10/ @grid-columns)); }
+  .col-lg-11 { width: percentage((11/ @grid-columns)); }
+  .col-lg-12 { width: 100%; }
+  * {float:none;}
+}
+
 .btn,.navbar-inner,.add-on {
 	border: none !important;
 }
 
+.modal-backdrop {
+	background-color: fade(#999, 60%);
+}
+
+.modal-content {
+	border-width: 0;
+}
+
 .dropdown-menu {
 	border: 1px solid @border !important;
 	text-align: left;
@@ -80,7 +103,6 @@ input::-webkit-input-placeholder,textarea::-webkit-input-placeholder {
 .help-block {
 	color: #999999;
 	font-size: 12px;
-	line-height: 17px;
 }
 
 .modal textarea.error,.modal input.error {
@@ -516,6 +538,16 @@ div.dropdown-menu textarea {
 	background-repeat: no-repeat;
 }
 
+.icon-code {
+	font-size: 80%;
+	margin-left: -3px;
+	margin-right: 3px;
+}
+
+.icon-trash {
+	font-size: 90%;
+}
+
 .icon-stackedit {
 	background-image: url("../../img/icons.png") !important;
 	width: 16px;
@@ -589,11 +621,10 @@ div.dropdown-menu textarea {
 	width: 43px;
 	height: 11px;
 	background-position: 0 0;
-	margin: 0 20px 12px;
-}
-
-.working-indicator.show {
-	background-image: url("../../img/ajax-loader.gif") !important;
+	margin: 0 30px 12px;
+	&.show {
+		background-image: url("../../img/ajax-loader.gif") !important;
+	}
 }
 
 .ui-layout-toggler-north .caret,.ui-layout-toggler-south .caret {
@@ -645,64 +676,67 @@ div.dropdown-menu textarea {
 	float: left;
 }
 
-#modal-settings .modal-header {
-	padding-bottom: 0;
-}
-
-#modal-settings .form-horizontal {
-	margin-top: 10px;
-}
-
-#modal-settings textarea {
-	height: 80px;
-	max-width: 206px;
-}
-
-#modal-settings .accordion-group {
-	border: 0;
-	border-bottom: 1px solid #eee;
-	-webkit-border-radius: inherit;
-	-moz-border-radius: inherit;
-	border-radius: inherit;
-	margin-bottom: 10px;
-}
-
-#modal-settings .accordion-heading {
-	padding: 8px 15px;
-}
-
-#modal-settings .accordion-heading .accordion-toggle {
-	display: inline;
-	padding: 0;
-}
-
-#modal-settings .accordion-inner {
-	border: 0;
-	padding: 10px 40px;
-}
-
-#modal-settings .accordion-inner .form-horizontal .control-label {
-	text-align: left;
-}
-
-#modal-settings .accordion-inner .form-inline .label-text,#modal-settings .accordion-inner .control-label
-	{
-	margin: 0 10px;
-}
-
-#modal-settings .tab-pane-button-container {
-	width: 200px;
-	margin: 10px auto 20px;
-}
-
-#modal-settings .tab-pane-button-container .btn {
-	text-align: initial;
-	padding-left: 15px;
-}
-
-#modal-settings .nav-tabs {
-	border-bottom: 1px solid transparent;
-	margin: 20px 0 0;
+#modal-settings {
+	.modal-header {
+		padding-bottom: 0;
+	}
+	
+	.form-horizontal {
+		margin-top: 10px;
+	}
+	
+	textarea {
+		max-width: 100%;
+		min-height: 100px;
+	}
+	
+	.accordion-group {
+		border: 0;
+		border-bottom: 1px solid #eee;
+		-webkit-border-radius: inherit;
+		-moz-border-radius: inherit;
+		border-radius: inherit;
+		margin-bottom: 10px;
+		clear: both;
+	}
+	
+	.accordion-heading {
+		padding: 8px 15px;
+	}
+	
+	.accordion-heading .accordion-toggle {
+		display: inline;
+		padding: 0;
+	}
+	
+	.accordion-inner {
+		border: 0;
+		padding: 10px 40px;
+	}
+	
+	.accordion-inner .form-horizontal .control-label {
+		text-align: left;
+	}
+	
+	.accordion-inner .form-inline .label-text,.accordion-inner .control-label
+		{
+		margin: 0 10px;
+	}
+	
+	.tab-pane-button-container {
+		width: 200px;
+		margin: 10px auto 20px;
+	}
+	
+	.tab-pane-button-container .btn {
+		text-align: initial;
+		padding-left: 15px;
+	}
+	
+	.nav-tabs {
+		border-bottom: 1px solid transparent;
+		margin: 15px 0 0;
+	}
 }
 
 .nav-tabs>.active>a,.nav-tabs>.active>a:hover,.nav-tabs>.active>a:focus
diff --git a/js/styles/fontello.css b/js/styles/fontello.css
deleted file mode 100644
index 2099b843..00000000
--- a/js/styles/fontello.css
+++ /dev/null
@@ -1,368 +0,0 @@
-@font-face {
-  font-family: 'fontello';
-  src: url('../../font/fontello.eot?51731067');
-  src: url('../../font/fontello.eot?51731067#iefix') format('embedded-opentype'),
-       url('../../font/fontello.woff?51731067') format('woff'),
-       url('../../font/fontello.ttf?51731067') format('truetype'),
-       url('../../font/fontello.svg?51731067#fontello') format('svg');
-  font-weight: normal;
-  font-style: normal;
-}
-/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
-/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
-/*
-@media screen and (-webkit-min-device-pixel-ratio:0) {
-  @font-face {
-    font-family: 'fontello';
-    src: url('../../font/fontello.svg?51731067#fontello') format('svg');
-  }
-}
-*/
- 
- [class^="icon-"]:before, [class*=" icon-"]:before {
-  font-family: "fontello";
-  font-style: normal;
-  font-weight: normal;
-  speak: none;
- 
-  display: inline-block;
-  text-decoration: inherit;
-  width: 1em;
-  margin-right: .2em;
-  text-align: center;
-  /* opacity: .8; */
- 
-  /* For safety - reset parent styles, that can break glyph codes*/
-  font-variant: normal;
-  text-transform: none;
-     
-  /* fix buttons height, for twitter bootstrap */
-  line-height: 1em;
- 
-  /* Animation center compensation - margins should be symmetric */
-  /* remove if not needed */
-  margin-left: .2em;
- 
-  /* you can be more comfortable with increased icons size */
-  /* font-size: 120%; */
- 
-  /* Uncomment for 3D effect */
-  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
-}
- 
-.icon-plus:before { content: '\e81f'; } /* '' */
-.icon-minus:before { content: '\e823'; } /* '' */
-.icon-left-big:before { content: '\e88a'; } /* '' */
-.icon-up-big:before { content: '\e88c'; } /* '' */
-.icon-right-big:before { content: '\e88b'; } /* '' */
-.icon-down-big:before { content: '\e889'; } /* '' */
-.icon-home:before { content: '\e93c'; } /* '' */
-.icon-pause:before { content: '\e800'; } /* '' */
-.icon-fast-fw:before { content: '\e8a4'; } /* '' */
-.icon-fast-bw:before { content: '\e8a5'; } /* '' */
-.icon-to-end:before { content: '\e8a0'; } /* '' */
-.icon-to-start:before { content: '\e8a2'; } /* '' */
-.icon-stop:before { content: '\e89e'; } /* '' */
-.icon-up-dir:before { content: '\e94e'; } /* '' */
-.icon-play:before { content: '\e89b'; } /* '' */
-.icon-right-dir:before { content: '\e950'; } /* '' */
-.icon-down-dir:before { content: '\e94d'; } /* '' */
-.icon-left-dir:before { content: '\e94f'; } /* '' */
-.icon-cloud:before { content: '\e8ad'; } /* '' */
-.icon-umbrella:before { content: '\e8b0'; } /* '' */
-.icon-star:before { content: '\e808'; } /* '' */
-.icon-star-empty:before { content: '\e809'; } /* '' */
-.icon-check:before { content: '\e8cf'; } /* '' */
-.icon-left-hand:before { content: '\e88e'; } /* '' */
-.icon-up-hand:before { content: '\e88f'; } /* '' */
-.icon-right-hand:before { content: '\e88d'; } /* '' */
-.icon-down-hand:before { content: '\e890'; } /* '' */
-.icon-th-list:before { content: '\e817'; } /* '' */
-.icon-heart-empty:before { content: '\e807'; } /* '' */
-.icon-heart:before { content: '\e806'; } /* '' */
-.icon-music:before { content: '\e802'; } /* '' */
-.icon-th:before { content: '\e816'; } /* '' */
-.icon-flag:before { content: '\e838'; } /* '' */
-.icon-cog:before { content: '\e862'; } /* '' */
-.icon-attention:before { content: '\e851'; } /* '' */
-.icon-flash:before { content: '\e8ae'; } /* '' */
-.icon-cog-alt:before { content: '\e863'; } /* '' */
-.icon-scissors:before { content: '\e8c5'; } /* '' */
-.icon-flight:before { content: '\e8b1'; } /* '' */
-.icon-mail:before { content: '\e804'; } /* '' */
-.icon-edit:before { content: '\e941'; } /* '' */
-.icon-pencil:before { content: '\e847'; } /* '' */
-.icon-ok:before { content: '\e818'; } /* '' */
-.icon-ok-circled:before { content: '\e819'; } /* '' */
-.icon-cancel:before { content: '\e81c'; } /* '' */
-.icon-cancel-circled:before { content: '\e81d'; } /* '' */
-.icon-asterisk:before { content: '\e8d3'; } /* '' */
-.icon-attention-circled:before { content: '\e852'; } /* '' */
-.icon-plus-circled:before { content: '\e820'; } /* '' */
-.icon-minus-circled:before { content: '\e824'; } /* '' */
-.icon-forward:before { content: '\e856'; } /* '' */
-.icon-ccw:before { content: '\e896'; } /* '' */
-.icon-cw:before { content: '\e895'; } /* '' */
-.icon-resize-vertical:before { content: '\e872'; } /* '' */
-.icon-resize-horizontal:before { content: '\e873'; } /* '' */
-.icon-eject:before { content: '\e8a6'; } /* '' */
-.icon-star-half:before { content: '\e80a'; } /* '' */
-.icon-ok-circled2:before { content: '\e81a'; } /* '' */
-.icon-cancel-circled2:before { content: '\e86f'; } /* '' */
-.icon-help-circled:before { content: '\e939'; } /* '' */
-.icon-info-circled:before { content: '\e93a'; } /* '' */
-.icon-th-large:before { content: '\e815'; } /* '' */
-.icon-eye:before { content: '\e832'; } /* '' */
-.icon-eye-off:before { content: '\e833'; } /* '' */
-.icon-tag:before { content: '\e834'; } /* '' */
-.icon-tags:before { content: '\e835'; } /* '' */
-.icon-camera-alt:before { content: '\e814'; } /* '' */
-.icon-print:before { content: '\e942'; } /* '' */
-.icon-retweet:before { content: '\e943'; } /* '' */
-.icon-comment:before { content: '\e84a'; } /* '' */
-.icon-chat:before { content: '\e84b'; } /* '' */
-.icon-location:before { content: '\e853'; } /* '' */
-.icon-trash:before { content: '\e81e'; } /* '' */
-.icon-basket:before { content: '\e865'; } /* '' */
-.icon-login:before { content: '\e868'; } /* '' */
-.icon-logout:before { content: '\e949'; } /* '' */
-.icon-resize-full:before { content: '\e90d'; } /* '' */
-.icon-resize-small:before { content: '\e871'; } /* '' */
-.icon-zoom-in:before { content: '\e875'; } /* '' */
-.icon-zoom-out:before { content: '\e876'; } /* '' */
-.icon-down-circled2:before { content: '\e877'; } /* '' */
-.icon-up-circled2:before { content: '\e878'; } /* '' */
-.icon-down-open:before { content: '\e879'; } /* '' */
-.icon-left-open:before { content: '\e87a'; } /* '' */
-.icon-right-open:before { content: '\e87b'; } /* '' */
-.icon-up-open:before { content: '\e87c'; } /* '' */
-.icon-refresh:before { content: '\e897'; } /* '' */
-.icon-play-circled2:before { content: '\e89d'; } /* '' */
-.icon-to-end-alt:before { content: '\e8a1'; } /* '' */
-.icon-to-start-alt:before { content: '\e8a3'; } /* '' */
-.icon-inbox:before { content: '\e8aa'; } /* '' */
-.icon-font:before { content: '\e8b6'; } /* '' */
-.icon-bold:before { content: '\e8b5'; } /* '' */
-.icon-italic:before { content: '\e8b4'; } /* '' */
-.icon-text-height:before { content: '\e8b7'; } /* '' */
-.icon-text-width:before { content: '\e8b8'; } /* '' */
-.icon-align-left:before { content: '\e95d'; } /* '' */
-.icon-align-center:before { content: '\e95e'; } /* '' */
-.icon-align-right:before { content: '\e95f'; } /* '' */
-.icon-align-justify:before { content: '\e960'; } /* '' */
-.icon-list:before { content: '\e8b9'; } /* '' */
-.icon-indent-left:before { content: '\e8ba'; } /* '' */
-.icon-indent-right:before { content: '\e8bb'; } /* '' */
-.icon-off:before { content: '\e963'; } /* '' */
-.icon-road:before { content: '\e964'; } /* '' */
-.icon-list-alt:before { content: '\e8c9'; } /* '' */
-.icon-qrcode:before { content: '\e8ca'; } /* '' */
-.icon-barcode:before { content: '\e8cb'; } /* '' */
-.icon-ajust:before { content: '\e8cd'; } /* '' */
-.icon-tint:before { content: '\e8ce'; } /* '' */
-.icon-magnet:before { content: '\e8d6'; } /* '' */
-.icon-move:before { content: '\e874'; } /* '' */
-.icon-link:before { content: '\e83f'; } /* '' */
-.icon-share:before { content: '\e912'; } /* '' */
-.icon-hdd:before { content: '\e841'; } /* '' */
-.icon-link-ext:before { content: '\e82b'; } /* '' */
-.icon-check-empty:before { content: '\e8d0'; } /* '' */
-.icon-bookmark-empty:before { content: '\e837'; } /* '' */
-.icon-phone-squared:before { content: '\e860'; } /* '' */
-.icon-rss:before { content: '\e85d'; } /* '' */
-.icon-certificate:before { content: '\e8dd'; } /* '' */
-.icon-left-circled:before { content: '\e891'; } /* '' */
-.icon-right-circled:before { content: '\e892'; } /* '' */
-.icon-up-circled:before { content: '\e893'; } /* '' */
-.icon-down-circled:before { content: '\e894'; } /* '' */
-.icon-tasks:before { content: '\e8de'; } /* '' */
-.icon-filter:before { content: '\e8df'; } /* '' */
-.icon-resize-full-alt:before { content: '\e870'; } /* '' */
-.icon-beaker:before { content: '\e8e0'; } /* '' */
-.icon-docs:before { content: '\e858'; } /* '' */
-.icon-menu:before { content: '\e861'; } /* '' */
-.icon-list-bullet:before { content: '\e8bc'; } /* '' */
-.icon-list-numbered:before { content: '\e8bd'; } /* '' */
-.icon-strike:before { content: '\e8be'; } /* '' */
-.icon-underline:before { content: '\e8bf'; } /* '' */
-.icon-table:before { content: '\e8c2'; } /* '' */
-.icon-magic:before { content: '\e8e1'; } /* '' */
-.icon-money:before { content: '\e8e3'; } /* '' */
-.icon-columns:before { content: '\e8c3'; } /* '' */
-.icon-sort:before { content: '\e8ec'; } /* '' */
-.icon-sort-down:before { content: '\e8ed'; } /* '' */
-.icon-sort-up:before { content: '\e8ee'; } /* '' */
-.icon-mail-alt:before { content: '\e805'; } /* '' */
-.icon-gauge:before { content: '\e8f6'; } /* '' */
-.icon-comment-empty:before { content: '\e84c'; } /* '' */
-.icon-chat-empty:before { content: '\e84d'; } /* '' */
-.icon-sitemap:before { content: '\e8f7'; } /* '' */
-.icon-paste:before { content: '\e8c6'; } /* '' */
-.icon-lightbulb:before { content: '\e86d'; } /* '' */
-.icon-exchange:before { content: '\e957'; } /* '' */
-.icon-download-cloud:before { content: '\e83d'; } /* '' */
-.icon-upload-cloud:before { content: '\e83e'; } /* '' */
-.icon-user-md:before { content: '\e8fc'; } /* '' */
-.icon-stethoscope:before { content: '\e8fd'; } /* '' */
-.icon-suitcase:before { content: '\e8c8'; } /* '' */
-.icon-bell-alt:before { content: '\e84f'; } /* '' */
-.icon-coffee:before { content: '\e8f9'; } /* '' */
-.icon-food:before { content: '\e8fa'; } /* '' */
-.icon-doc-text:before { content: '\e945'; } /* '' */
-.icon-building:before { content: '\e902'; } /* '' */
-.icon-hospital:before { content: '\e901'; } /* '' */
-.icon-ambulance:before { content: '\e8fe'; } /* '' */
-.icon-medkit:before { content: '\e8ff'; } /* '' */
-.icon-fighter-jet:before { content: '\e8b2'; } /* '' */
-.icon-beer:before { content: '\e8fb'; } /* '' */
-.icon-h-sigh:before { content: '\e900'; } /* '' */
-.icon-plus-squared:before { content: '\e821'; } /* '' */
-.icon-angle-double-left:before { content: '\e885'; } /* '' */
-.icon-angle-double-right:before { content: '\e886'; } /* '' */
-.icon-angle-double-up:before { content: '\e887'; } /* '' */
-.icon-angle-double-down:before { content: '\e888'; } /* '' */
-.icon-angle-left:before { content: '\e87d'; } /* '' */
-.icon-angle-right:before { content: '\e87e'; } /* '' */
-.icon-angle-up:before { content: '\e87f'; } /* '' */
-.icon-angle-down:before { content: '\e880'; } /* '' */
-.icon-desktop:before { content: '\e95a'; } /* '' */
-.icon-laptop:before { content: '\e95b'; } /* '' */
-.icon-tablet:before { content: '\e95c'; } /* '' */
-.icon-mobile:before { content: '\e8a9'; } /* '' */
-.icon-circle-empty:before { content: '\e8d2'; } /* '' */
-.icon-quote-left:before { content: '\e842'; } /* '' */
-.icon-quote-right:before { content: '\e843'; } /* '' */
-.icon-spinner:before { content: '\e8f8'; } /* '' */
-.icon-circle:before { content: '\e8d1'; } /* '' */
-.icon-reply:before { content: '\e845'; } /* '' */
-.icon-folder-empty:before { content: '\e85a'; } /* '' */
-.icon-folder-open-empty:before { content: '\e85b'; } /* '' */
-.icon-plus-squared-small:before { content: '\e822'; } /* '' */
-.icon-minus-squared-small:before { content: '\e827'; } /* '' */
-.icon-smile:before { content: '\e903'; } /* '' */
-.icon-frown:before { content: '\e904'; } /* '' */
-.icon-meh:before { content: '\e905'; } /* '' */
-.icon-gamepad:before { content: '\e849'; } /* '' */
-.icon-keyboard:before { content: '\e944'; } /* '' */
-.icon-flag-empty:before { content: '\e93d'; } /* '' */
-.icon-flag-checkered:before { content: '\e93e'; } /* '' */
-.icon-terminal:before { content: '\e907'; } /* '' */
-.icon-code:before { content: '\e829'; } /* '' */
-.icon-reply-all:before { content: '\e840'; } /* '' */
-.icon-star-half-alt:before { content: '\e80b'; } /* '' */
-.icon-direction:before { content: '\e854'; } /* '' */
-.icon-crop:before { content: '\e8c4'; } /* '' */
-.icon-fork:before { content: '\e8da'; } /* '' */
-.icon-unlink:before { content: '\e82a'; } /* '' */
-.icon-help:before { content: '\e828'; } /* '' */
-.icon-info:before { content: '\e93b'; } /* '' */
-.icon-attention-alt:before { content: '\e850'; } /* '' */
-.icon-superscript:before { content: '\e8c0'; } /* '' */
-.icon-subscript:before { content: '\e8c1'; } /* '' */
-.icon-eraser:before { content: '\e908'; } /* '' */
-.icon-puzzle:before { content: '\e909'; } /* '' */
-.icon-mic:before { content: '\e94a'; } /* '' */
-.icon-mute:before { content: '\e94b'; } /* '' */
-.icon-shield:before { content: '\e90a'; } /* '' */
-.icon-calendar-empty:before { content: '\e867'; } /* '' */
-.icon-extinguisher:before { content: '\e90b'; } /* '' */
-.icon-rocket:before { content: '\e8db'; } /* '' */
-.icon-angle-circled-left:before { content: '\e881'; } /* '' */
-.icon-angle-circled-right:before { content: '\e882'; } /* '' */
-.icon-angle-circled-up:before { content: '\e883'; } /* '' */
-.icon-angle-circled-down:before { content: '\e884'; } /* '' */
-.icon-anchor:before { content: '\e906'; } /* '' */
-.icon-lock-open-alt:before { content: '\e830'; } /* '' */
-.icon-bullseye:before { content: '\e90c'; } /* '' */
-.icon-ellipsis:before { content: '\e961'; } /* '' */
-.icon-ellipsis-vert:before { content: '\e962'; } /* '' */
-.icon-rss-squared:before { content: '\e85e'; } /* '' */
-.icon-play-circled:before { content: '\e89c'; } /* '' */
-.icon-ticket:before { content: '\e8d8'; } /* '' */
-.icon-minus-squared:before { content: '\e825'; } /* '' */
-.icon-minus-squared-alt:before { content: '\e826'; } /* '' */
-.icon-level-up:before { content: '\e898'; } /* '' */
-.icon-level-down:before { content: '\e955'; } /* '' */
-.icon-ok-squared:before { content: '\e81b'; } /* '' */
-.icon-pencil-squared:before { content: '\e848'; } /* '' */
-.icon-link-ext-alt:before { content: '\e82c'; } /* '' */
-.icon-export-alt:before { content: '\e846'; } /* '' */
-.icon-compass:before { content: '\e855'; } /* '' */
-.icon-collapse:before { content: '\e958'; } /* '' */
-.icon-collapse-top:before { content: '\e899'; } /* '' */
-.icon-expand:before { content: '\e89a'; } /* '' */
-.icon-euro:before { content: '\e8e4'; } /* '' */
-.icon-pound:before { content: '\e8e5'; } /* '' */
-.icon-dollar:before { content: '\e8e6'; } /* '' */
-.icon-rupee:before { content: '\e8e7'; } /* '' */
-.icon-yen:before { content: '\e8e8'; } /* '' */
-.icon-renminbi:before { content: '\e8e9'; } /* '' */
-.icon-won:before { content: '\e8ea'; } /* '' */
-.icon-bitcoin:before { content: '\e8eb'; } /* '' */
-.icon-file:before { content: '\e946'; } /* '' */
-.icon-doc-text-inv:before { content: '\e947'; } /* '' */
-.icon-sort-name-up:before { content: '\e8f1'; } /* '' */
-.icon-sort-name-down:before { content: '\e8f2'; } /* '' */
-.icon-sort-alt-up:before { content: '\e8ef'; } /* '' */
-.icon-sort-alt-down:before { content: '\e8f0'; } /* '' */
-.icon-sort-number-up:before { content: '\e8f3'; } /* '' */
-.icon-sort-number-down:before { content: '\e8f4'; } /* '' */
-.icon-thumbs-up-alt:before { content: '\e839'; } /* '' */
-.icon-thumbs-down-alt:before { content: '\e83a'; } /* '' */
-.icon-down:before { content: '\e951'; } /* '' */
-.icon-up:before { content: '\e954'; } /* '' */
-.icon-right:before { content: '\e953'; } /* '' */
-.icon-left:before { content: '\e952'; } /* '' */
-.icon-female:before { content: '\e80f'; } /* '' */
-.icon-male:before { content: '\e80e'; } /* '' */
-.icon-sun:before { content: '\e8ac'; } /* '' */
-.icon-moon:before { content: '\e8af'; } /* '' */
-.icon-box:before { content: '\e85c'; } /* '' */
-.icon-bug:before { content: '\e8dc'; } /* '' */
-.icon-picture:before { content: '\e812'; } /* '' */
-.icon-globe:before { content: '\e8ab'; } /* '' */
-.icon-leaf:before { content: '\e8b3'; } /* '' */
-.icon-glass:before { content: '\e801'; } /* '' */
-.icon-gift:before { content: '\e8d4'; } /* '' */
-.icon-videocam:before { content: '\e811'; } /* '' */
-.icon-headphones:before { content: '\e86b'; } /* '' */
-.icon-video:before { content: '\e810'; } /* '' */
-.icon-target:before { content: '\e8a7'; } /* '' */
-.icon-award:before { content: '\e959'; } /* '' */
-.icon-thumbs-up:before { content: '\e93f'; } /* '' */
-.icon-thumbs-down:before { content: '\e940'; } /* '' */
-.icon-user:before { content: '\e80c'; } /* '' */
-.icon-users:before { content: '\e80d'; } /* '' */
-.icon-credit-card:before { content: '\e965'; } /* '' */
-.icon-briefcase:before { content: '\e8c7'; } /* '' */
-.icon-floppy:before { content: '\e966'; } /* '' */
-.icon-folder:before { content: '\e948'; } /* '' */
-.icon-folder-open:before { content: '\e859'; } /* '' */
-.icon-doc:before { content: '\e857'; } /* '' */
-.icon-calendar:before { content: '\e866'; } /* '' */
-.icon-chart-bar:before { content: '\e90f'; } /* '' */
-.icon-pin:before { content: '\e831'; } /* '' */
-.icon-attach:before { content: '\e82d'; } /* '' */
-.icon-book:before { content: '\e8cc'; } /* '' */
-.icon-phone:before { content: '\e85f'; } /* '' */
-.icon-megaphone:before { content: '\e967'; } /* '' */
-.icon-upload:before { content: '\e83c'; } /* '' */
-.icon-download:before { content: '\e83b'; } /* '' */
-.icon-signal:before { content: '\e8a8'; } /* '' */
-.icon-camera:before { content: '\e813'; } /* '' */
-.icon-shuffle:before { content: '\e956'; } /* '' */
-.icon-volume-off:before { content: '\e94c'; } /* '' */
-.icon-volume-down:before { content: '\e869'; } /* '' */
-.icon-volume-up:before { content: '\e86a'; } /* '' */
-.icon-search:before { content: '\e803'; } /* '' */
-.icon-key:before { content: '\e8d9'; } /* '' */
-.icon-lock:before { content: '\e82e'; } /* '' */
-.icon-lock-open:before { content: '\e82f'; } /* '' */
-.icon-bell:before { content: '\e84e'; } /* '' */
-.icon-bookmark:before { content: '\e836'; } /* '' */
-.icon-fire:before { content: '\e8d5'; } /* '' */
-.icon-wrench:before { content: '\e864'; } /* '' */
-.icon-hammer:before { content: '\e8f5'; } /* '' */
-.icon-clock:before { content: '\e86c'; } /* '' */
-.icon-truck:before { content: '\e8e2'; } /* '' */
-.icon-block:before { content: '\e86e'; } /* '' */
\ No newline at end of file
diff --git a/js/styles/main.less b/js/styles/main.less
new file mode 100644
index 00000000..cac7b816
--- /dev/null
+++ b/js/styles/main.less
@@ -0,0 +1,4 @@
+@import "bootstrap/bootstrap.less";
+@import "../../css/fontello.css"
+@import "default.less"
+