diff --git a/static/css-include/timeline-v1.css b/static/css-include/timeline-v1.css
new file mode 100644
index 0000000..4f845da
--- /dev/null
+++ b/static/css-include/timeline-v1.css
@@ -0,0 +1,127 @@
+
+  /* The actual timeline (the vertical ruler) */
+  .timeline {
+    position: relative;
+    max-width: 800px;
+    margin: 0 auto;
+  }
+  
+  /* The actual timeline (the vertical ruler) */
+  .timeline::after {
+    content: '';
+    position: absolute;
+    width: 6px;
+    background-color: var(--style-colour);
+    top: 0;
+    bottom: 0;
+    left: 50%;
+    margin-left: -3px;
+  }
+  
+  /* Container around content */
+  .container {
+    padding: 10px 40px;
+    position: relative;
+    background-color: inherit;
+    width: 50%;
+  }
+  
+  /* The circles on the timeline */
+  .container::after {
+    content: '';
+    position: absolute;
+    width: 25px;
+    height: 25px;
+    right: -12px;
+    background-color: var(--style-colour);
+    border: 4px solid #FF9F55;
+    top: 15px;
+    border-radius: 50%;
+    z-index: 1;
+  }
+  
+  /* Place the container to the left */
+  .left {
+    left: 0;
+  }
+  
+  /* Place the container to the right */
+  .right {
+    left: 50%;
+  }
+  
+  /* Add arrows to the left container (pointing right) */
+  .left::before {
+    content: " ";
+    height: 0;
+    position: absolute;
+    top: 22px;
+    width: 0;
+    z-index: 1;
+    right: 30px;
+    border: medium solid var(--style-colour);
+    border-width: 10px 0 10px 10px;
+    border-color: transparent transparent transparent var(--style-colour);
+  }
+  
+  /* Add arrows to the right container (pointing left) */
+  .right::before {
+    content: " ";
+    height: 0;
+    position: absolute;
+    top: 22px;
+    width: 0;
+    z-index: 1;
+    left: 30px;
+    border: medium solid var(--style-colour);
+    border-width: 10px 10px 10px 0;
+    border-color: transparent var(--style-colour) transparent transparent;
+  }
+  
+  /* Fix the circle for containers on the right side */
+  .right::after {
+    left: -11px;
+  }
+  
+  /* The actual content */
+  .content {
+    padding: 20px 30px;
+    background-color: white;
+    position: relative;
+    border: medium solid var(--style-colour);
+    border-width: 5px;
+    border-radius: 6px;
+  }
+  
+  /* Media queries - Responsive timeline on screens less than 600px wide */
+  @media screen and (max-width: 600px) {
+  /* Place the timelime to the left */
+    .timeline::after {
+      left: 31px;
+    }
+  
+  /* Full-width containers */
+    .container {
+      width: 100%;
+      padding-left: 70px;
+      padding-right: 25px;
+    }
+  
+  /* Make sure that all arrows are pointing leftwards */
+    .container::before {
+      left: 60px;
+      border: medium solid var(--style-colour);
+      border-width: 10px 10px 10px 0;
+      border-color: transparent var(--style-colour) transparent transparent;
+    }
+  
+  /* Make sure all circles are at the same spot */
+    .left::after, .right::after {
+      left: 15px;
+    }
+  
+  /* Make all right containers behave like the left ones */
+    .right {
+      left: 0%;
+    }
+  }
\ No newline at end of file
diff --git a/templates/base.html b/templates/base.html
index 7599b47..09952db 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -45,10 +45,6 @@
   <link href="{{ FEED_DOMAIN }}/{% if TAG_FEED_RSS_URL %}{{ TAG_FEED_RSS_URL.format(slug=tag.slug) }}{% else %}{{ TAG_FEED_RSS.format(slug=tag.slug) }}{% endif %}" type="application/rss+xml" rel="alternate" title="{{ SITENAME }} Tags RSS Feed" />
   {% endif %}
 
-  {% if (article and article.photo_gallery) or (articles_page and articles_page.object_list[0].photo_gallery) %}
-	<link rel="stylesheet" href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/css-include/magnific-popup.css">
-  {% endif %}
-
   {% if TRACKING == True %}
   {% include 'include/trackingcode.html' %}
   {% endif %}
@@ -56,6 +52,12 @@
   {% endblock head %}
   {% block somemorehead %}
   {% endblock somemorehead %}
+
+  {% if USE_LIGHTBOX == True %}
+  {% if (article and article.photo_gallery) or (articles_page and articles_page.object_list[0].photo_gallery) %}
+	<link rel="stylesheet" href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/css-include/magnific-popup.css">
+  {% endif %}
+  {% endif %}
 </head>
 <body class="is-preload">
   <div id="wrapper">
@@ -115,6 +117,7 @@
 {{ IMAGETRACKINGCODE }}
 {% endif %}
 
+{% if USE_LIGHTBOX == True %}
 {% if (article and article.photo_gallery) or (articles_page and articles_page.object_list[0].photo_gallery) %}
 <!-- jQuery 1.7.2+ or Zepto.js 1.0+ -->
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
@@ -141,5 +144,6 @@ $('.gallery').magnificPopup({
 });
 </script>
 {% endif %}
+{% endif %}
 </body>
 </html>