diff --git a/mayan/apps/appearance/static/appearance/css/base.css b/mayan/apps/appearance/static/appearance/css/base.css
new file mode 100644
index 0000000000..9c9a7085dc
--- /dev/null
+++ b/mayan/apps/appearance/static/appearance/css/base.css
@@ -0,0 +1,132 @@
+@font-face {
+    font-family: 'IM Fell English SC';
+    font-style: normal;
+    font-weight: normal;
+    src:
+        local('IM FELL English SC'),
+        local('IM_FELL_English_SC'),
+        url('../fonts/IM_Fell_English_SC.eot?#iefix') format('embedded-opentype'),
+        url('../fonts/IM_Fell_English_SC.woff') format('woff'),
+        url('../fonts/IM_Fell_English_SC.svg#IMFellEnglishSC') format('svg'),
+        url('../fonts/IM_Fell_English_SC.ttf') format('truetype');
+}
+
+/* Flatly fonts */
+@font-face {
+    font-family: 'Lato';
+    font-style: normal;
+    font-weight: 400;
+    src:
+        local('Lato Regular'),
+        local('Lato-Regular'),
+        url('../fonts/Lato_400.eot?#iefix') format('embedded-opentype'),
+        url('../fonts/Lato_400.woff') format('woff'),
+        url('../fonts/Lato_400.svg#Lato') format('svg'),
+        url('../fonts/Lato_400.ttf') format('truetype');
+}
+@font-face {
+    font-family: 'Lato';
+    font-style: normal;
+    font-weight: 700;
+    src:
+        local('Lato Bold'),
+        local('Lato-Bold'),
+        url('../fonts/Lato_700.eot?#iefix') format('embedded-opentype'),
+        url('../fonts/Lato_700.woff') format('woff'),
+        url('../fonts/Lato_700.svg#Lato') format('svg'),
+        url('../fonts/Lato_700.ttf') format('truetype');
+}
+@font-face {
+    font-family: 'Lato';
+    font-style: italic;
+    font-weight: 400;
+    src:
+        local('Lato Italic'),
+        local('Lato-Italic'),
+        url('../fonts/Lato_400italic.eot?#iefix') format('embedded-opentype'),
+        url('../fonts/Lato_400italic.woff') format('woff'),
+        url('../fonts/Lato_400italic.svg#Lato') format('svg'),
+        url('../fonts/Lato_400italic.ttf') format('truetype');
+}
+
+body {
+    padding-top: 70px;
+}
+
+.navbar-brand {
+    font-family: "IM Fell English SC", serif;
+}
+
+#fancybox-left-ico {
+ left: 20px;
+}
+
+#fancybox-right-ico {
+ right: 20px;
+ left: auto;
+}
+
+.thin_border {
+    border: 1px solid black;
+}
+
+.lazy-load-carousel-loaded {
+    width: 100%;
+}
+
+.mayan-page-wrapper-interactive {
+    overflow: auto;
+}
+
+#carousel-container {
+    overflow-x: scroll; height: 500px;
+}
+
+.carousel-item {
+    margin: 5px 10px 10px 10px
+}
+
+.carousel-item-page-number {
+    text-align: center;
+}
+
+.img-nolazyload {
+    border: 1px solid black;
+}
+
+.document-page-content-divider {
+    text-align: center;
+}
+
+.label-tag {
+    text-shadow: 0px 0px 2px #000
+}
+
+.fancybox-nav span {
+    visibility: visible;
+}
+
+hr {
+    margin-top: 5px;
+    margin-bottom: 11px;
+}
+
+.btn-block {
+    margin-bottom: 15px;
+    white-space: normal;
+    min-height: 120px;
+    padding-top: 20px;
+    padding-bottom: 1px;
+}
+
+.btn-block .fa {
+    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
+}
+
+.btn-block {
+    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
+}
+
+.a-caption {
+    color: white;
+}
diff --git a/mayan/apps/appearance/templates/appearance/base.html b/mayan/apps/appearance/templates/appearance/base.html
index 0edc709d9f..4f4858143e 100644
--- a/mayan/apps/appearance/templates/appearance/base.html
+++ b/mayan/apps/appearance/templates/appearance/base.html
@@ -22,142 +22,7 @@
             <link href="{% static 'appearance/css/flatly.min.css' %}" media="screen" rel="stylesheet" type="text/css" />
             <link href="{% static 'appearance/packages/animate/animate.css' %}" media="screen" rel="stylesheet" type="text/css" />
             <link href="{% static 'appearance/packages/fancyBox-master/source/jquery.fancybox.css' %}" media="screen" rel="stylesheet" type="text/css" />
-
-            <style type="text/css">
-                @font-face {
-                    font-family: 'IM Fell English SC';
-                    font-style: normal;
-                    font-weight: normal;
-                    src:
-                        local('IM FELL English SC'),
-                        local('IM_FELL_English_SC'),
-                        url('{% static "appearance/fonts/IM_Fell_English_SC.eot?#iefix" %}') format('embedded-opentype'),
-                        url('{% static "appearance/fonts/IM_Fell_English_SC.woff" %}') format('woff'),
-                        url('{% static "appearance/fonts/IM_Fell_English_SC.svg#IMFellEnglishSC" %}') format('svg'),
-                        url('{% static "appearance/fonts/IM_Fell_English_SC.ttf" %}') format('truetype');
-                }
-
-                /* Flatly fonts */
-                @font-face {
-                    font-family: 'Lato';
-                    font-style: normal;
-                    font-weight: 400;
-                    src:
-                        local('Lato Regular'),
-                        local('Lato-Regular'),
-                        url('{% static "appearance/fonts/Lato_400.eot?#iefix" %}') format('embedded-opentype'),
-                        url('{% static "appearance/fonts/Lato_400.woff" %}') format('woff'),
-                        url('{% static "appearance/fonts/Lato_400.svg#Lato" %}') format('svg'),
-                        url('{% static "appearance/fonts/Lato_400.ttf" %}') format('truetype');
-                }
-                @font-face {
-                    font-family: 'Lato';
-                    font-style: normal;
-                    font-weight: 700;
-                    src:
-                        local('Lato Bold'),
-                        local('Lato-Bold'),
-                        url('{% static "appearance/fonts/Lato_700.eot?#iefix" %}') format('embedded-opentype'),
-                        url('{% static "appearance/fonts/Lato_700.woff" %}') format('woff'),
-                        url('{% static "appearance/fonts/Lato_700.svg#Lato" %}') format('svg'),
-                        url('{% static "appearance/fonts/Lato_700.ttf" %}') format('truetype');
-                }
-                @font-face {
-                    font-family: 'Lato';
-                    font-style: italic;
-                    font-weight: 400;
-                    src:
-                        local('Lato Italic'),
-                        local('Lato-Italic'),
-                        url('{% static "appearance/fonts/Lato_400italic.eot?#iefix" %}') format('embedded-opentype'),
-                        url('{% static "appearance/fonts/Lato_400italic.woff" %}') format('woff'),
-                        url('{% static "appearance/fonts/Lato_400italic.svg#Lato" %}') format('svg'),
-                        url('{% static "appearance/fonts/Lato_400italic.ttf" %}') format('truetype');
-                }
-
-                body {
-                    padding-top: 70px;
-                }
-
-                .navbar-brand {
-                    font-family: "IM Fell English SC", serif;
-                }
-
-                #fancybox-left-ico {
-                 left: 20px;
-                }
-
-                #fancybox-right-ico {
-                 right: 20px;
-                 left: auto;
-                }
-
-                .thin_border {
-                    border: 1px solid black;
-                }
-
-                .lazy-load-carousel-loaded {
-                    width: 100%;
-                }
-
-                .mayan-page-wrapper-interactive {
-                    overflow: auto;
-                }
-
-                #carousel-container {
-                    overflow-x: scroll; height: 500px;
-                }
-
-                .carousel-item {
-                    margin: 5px 10px 10px 10px
-                }
-
-                .carousel-item-page-number {
-                    text-align: center;
-                }
-
-                .img-nolazyload {
-                    border: 1px solid black;
-                }
-
-                .document-page-content-divider {
-                    text-align: center;
-                }
-
-                .label-tag {
-                    text-shadow: 0px 0px 2px #000
-                }
-
-                .fancybox-nav span {
-                    visibility: visible;
-                }
-
-                hr {
-                    margin-top: 5px;
-                    margin-bottom: 11px;
-                }
-
-                .btn-block {
-                    margin-bottom: 15px;
-                    white-space: normal;
-                    min-height: 120px;
-                    padding-top: 20px;
-                    padding-bottom: 1px;
-                }
-
-                .btn-block .fa {
-                    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
-                }
-
-                .btn-block {
-                    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
-                }
-
-                .a-caption {
-                    color: white;
-                }
-
-            </style>
+            <link href="{% static 'appearance/css/base.css' %}" media="screen" rel="stylesheet" type="text/css" />
             {% block stylesheets %}{% endblock %}
 
         {% endcompress %}