From befa2a51f76c7be8b9fbb5e37788064590d81955 Mon Sep 17 00:00:00 2001
From: Cole Austin Coughlin <cole.austin.coughlin@cern.ch>
Date: Fri, 3 Sep 2021 11:42:02 -0500
Subject: [PATCH] fixed website with new report

---
 .../templates/calculator.form.html.j2         | 343 ++++++++++------
 .../calculator/templates/userguide.html.j2    | 365 +++++++++---------
 cara/apps/static/css/style.css                | 250 ++++++++++++
 cara/apps/templates/about.html.j2             |  27 +-
 cara/apps/templates/index.html.j2             | 116 ++----
 cara/apps/templates/layout.html.j2            | 348 +++--------------
 6 files changed, 781 insertions(+), 668 deletions(-)
 create mode 100644 cara/apps/static/css/style.css

diff --git a/cara/apps/calculator/templates/calculator.form.html.j2 b/cara/apps/calculator/templates/calculator.form.html.j2
index c119d4e5..143202ab 100644
--- a/cara/apps/calculator/templates/calculator.form.html.j2
+++ b/cara/apps/calculator/templates/calculator.form.html.j2
@@ -17,15 +17,15 @@
 
 
 {% block main %}
-<div style="margin: 2em;">
-<div class="text-component text-component-page clearfix"></div>
-<div style="height: 8em; display: block;"></div>
 
 v{{ calculator_version }} <span style="float:right; font-weight:bold">Please send feedback to <a href="mailto:CARA-dev@cern.ch">CARA-dev@cern.ch</a></span>
-<div>
-    <img src="/static/images/cara_logo.200x200.png" style="height: 7em; display:inline-block; vertical-align:middle; padding: 1em;">
-    <h1 style="display:inline-block; vertical-align:middle;"><b>CARA - </b> COVID Airborne Risk Assessment calculator</h1>
-</div>
+{# This should probably be the same as the index logo and title  #}
+<header class= "bg-light">
+  <div class="container container--narrow container--padding">
+    <img src="/static/images/cara_logo.200x200.png"  class="logo">
+    <h1 class="head-center"><b>CARA - </b> COVID Airborne Risk Assessment Calculator</h1>
+  </div>
+</header>
 
 {% if DEBUG %}
 <form id="covid_calculator" name="covid_calculator" onsubmit="return debug_submit(this)" class="form-inline">
@@ -36,37 +36,45 @@ v{{ calculator_version }} <span style="float:right; font-weight:bold">Please sen
 
 <input type="hidden" name="calculator_version" value="{{ calculator_version }}">
 
-<div class="container-fluid">
-  <div class="row">
-<div class="col-lg-4 col-md-6">
-
+{# <div class="container-fluid"> #}
+{# <div class="row"> #}
+<section>
+  <div class="container container--padding">
+  <div class = "split">
+  <div>
     <!-- General Options -->
 
-    <div class="row">
-      <label class="col-xl-3 col-lg-4 col-sm-3 col-form-label">Simulation name:</label>
-      <input type="text" class="col-xl-5 col-lg-7 col-sm-7 col-7" name="simulation_name" placeholder="E.g. Workshop without masks" required>
+    <div class="form-group">
+      <b><label class="col-form-label">Simulation name:</label></b>
+      <input type="text" class="col-sm-10 form-control" name="simulation_name" placeholder="E.g. Workshop without masks" required>
     </div>
 
-    <div class="row">
-      <label class="col-xl-3 col-lg-4 col-sm-3 col-form-label">Room number:</label>
-      <input type="text" class="col-xl-5 col-lg-7 col-sm-7 col-7" name="room_number" placeholder="E.g. 17/R-033" required>
+    <div class="for-group">
+      <b><label class="col-form-label">Room number:</label></b>
+      <input type="text" class="col-sm-10 form-control" name="room_number" placeholder="E.g. 17/R-033" required>
     </div>
 
     <hr width="80%">
+
     <b>Virus data:</b>
 
     <div data-tooltip="Choose the SARS-CoV-2 Variant of Concern (VOC).">
         <span class="tooltip_text">?</span>
-    </div><br>
+    </div>
+    
+    <br>
+    <br>
 
-    <div class="row">
-        <label class="col-xl-3 col-lg-4 col-sm-3 col-form-label">Variant:</label>
-        <select id="Variant" name="virus_type" class="col-xl-5 col-lg-7 col-sm-7 col-7">
-          <option value="SARS_CoV_2">SARS-CoV-2 (nominal strain)</option>
-          <option value="SARS_CoV_2_B117">SARS-CoV-2 (Alpha VOC)</option>
-          <option value="SARS_CoV_2_P1">SARS-CoV-2 (Gamma VOC)</option>
-          <option value="SARS_CoV_2_B16172">SARS-CoV-2 (Delta VOC)</option>
-        </select>
+    <div class="form-group row">
+      <label class="col-sm-2 col-form-label">Variant:</label>
+      <div class="col-sm-8">
+      <select id="Variant" name="virus_type" class="form-control">
+        <option value="SARS_CoV_2">SARS-CoV-2 (nominal strain)</option>
+        <option value="SARS_CoV_2_B117">SARS-CoV-2 (Alpha VOC)</option>
+        <option value="SARS_CoV_2_P1">SARS-CoV-2 (Gamma VOC)</option>
+        <option value="SARS_CoV_2_B16172">SARS-CoV-2 (Delta VOC)</option>
+      </select>
+      </div>
     </div>
 
     <hr width="80%">
@@ -74,51 +82,58 @@ v{{ calculator_version }} <span style="float:right; font-weight:bold">Please sen
     <b>Room data:</b>
     <div data-tooltip="The area you wish to study (choose one of the 2 options). Use GIS Portal or measure. Also indicate if a central (radiator-type) heating system is in use.">
         <span class="tooltip_text">?</span>
-    </div><br>
+    </div>
+    
+    <br>
 
-    <div class="row">
-
-      <div class="col-xl-3 col-lg-4 col-sm-3">
+    <div class="form-group row">
+      <div class="col-sm-4">
         <input type="radio" id="room_data_volume" name="volume_type" value="room_volume_explicit" onclick="require_fields(this)" tabindex="-1" required>
         <label class="col-form-label">Room volume:</label>
       </div>
-      <input type="number" step="any" id="room_volume" class="non_zero col-xl-3 col-lg-5 col-md-7 col-sm-3 col-3" name="room_volume" placeholder="Room volume (m³)" min="0" data-has-radio="#room_data_volume">
+      <div class="col-sm-6">
+        <input type="number" step="any" id="room_volume" class="non_zero form-control" name="room_volume" placeholder="Room volume (m³)" min="0" data-has-radio="#room_data_volume">
+      </div>
     </div>
+    
 
-    <div class="row">
-      <div class="col-xl-3 col-lg-4 col-sm-3">
+    <div class="form-group row">
+      <div class="col-sm-4">
         <input type="radio" id="room_data_dimensions" name="volume_type" value="room_volume_from_dimensions" onclick="require_fields(this)" tabindex="-1" required>
         <label for="room_data_dimensions">Floor area:</label> &nbsp;&nbsp;
       </div>
-      <input type="number" step="any" id="floor_area" class="non_zero col-xl-3 col-lg-5 col-md-7 col-sm-3 col-3" name="floor_area" placeholder="Room floor area (m²)" min="0" data-has-radio="#room_data_dimensions">
+      <div class="col-sm-6">
+        <input type="number" step="any" id="floor_area" class="non_zero form-control" name="floor_area" placeholder="Room floor area (m²)" min="0" data-has-radio="#room_data_dimensions">
+      </div>  
     </div>
-    <div class="row">
-      <div class="col-xl-3 col-lg-4 col-sm-3">
-        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <label for="room_data_dimensions">Ceiling height:</label> &nbsp;&nbsp;
+    <div class="form-group row">
+      <div class="col-sm-4">
+        <label for="room_data_dimensions">Ceiling height:</label> &nbsp;&nbsp;
       </div>
-      <input type="number" step="any" id="ceiling_height" class="non_zero col-xl-3 col-lg-5 col-md-7 col-sm-3 col-3" name="ceiling_height" placeholder="Room ceiling height (m)" min="0" data-has-radio="#room_data_dimensions">
-    </div><br>
+      <div class="col-sm-6">
+        <input type="number" step="any" id="ceiling_height" class="non_zero form-control" name="ceiling_height" placeholder="Room ceiling height (m)" min="0" data-has-radio="#room_data_dimensions">
+      </div>
+    </div>
+    
+    <br>
 
     Central heating system in use:
     <input type="radio" id="heating_no" name="room_heating_option" value=0 checked="checked">
       <label for="heating_no">No</label>&nbsp;&nbsp;
     <input type="radio" id="heating_yes" name="room_heating_option" value=1>
       <label for="heating_yes">Yes</label>&nbsp;&nbsp;
-    
-    <div class="row">
-      <label class="col-xl-2 col-lg-3 col-sm-2 col-form-label">Location:</label>
-      <div data-tooltip="The country is shown using a 3-letter code, e.g. CHE for Switzerland.">
-        <span class="tooltip_text">?</span>
-      </div>
-      <select id="location_select" form="not-submitted" class="col-xl-3 col-lg-7 col-sm-7 col-7" name="location_select" required></select>
+
+    <div class="form-group row">
+      <label class="col-sm-3">Location:</label>
+      <select id="location_select" form="not-submitted" class="col-sm-7 form-control" name="location_select" required></select>
       <div style="display: none">
           <!--
           This block allows us to have hidden input values which are retained during forward/back navigation, as per
           https://stackoverflow.com/a/6384276/741316
           -->
-          <input type="text" name="location_name" />
-          <input type="text" name="location_latitude" />
-          <input type="text" name="location_longitude" />
+          <input type="text" name="location_name" required>
+          <input type="text" name="location_latitude" required>
+          <input type="text" name="location_longitude" required>
       </div>
     </div>
 
@@ -128,8 +143,13 @@ v{{ calculator_version }} <span style="float:right; font-weight:bold">Please sen
     <b>Ventilation data:</b>
     <div data-tooltip="The available means of venting / filtration of indoor spaces.">
         <span class="tooltip_text">?</span>
-    </div><br>
+    </div>
+    
+    <br>
+
     Ventilation type:
+    <br>
+    
     <input type="radio" id="no_ventilation" name="ventilation_type" value="no_ventilation" checked>
       <label for="no_ventilation">No ventilation</label>&nbsp;&nbsp;
     <input type="radio" id="mechanical_ventilation" name="ventilation_type" value="mechanical_ventilation" data-enables="#DIVmechanical_ventilation">
@@ -138,47 +158,70 @@ v{{ calculator_version }} <span style="float:right; font-weight:bold">Please sen
       <label for="natural_ventilation">Natural</label><br>
 
     <div id="DIVmechanical_ventilation" class="tabbed" style="display:none">
-        <input type="radio" id="mech_type_air_supply" name="mechanical_ventilation_type" value="mech_type_air_supply" onclick="require_fields(this)" tabindex="-1">
-          <label for="mech_type_air_supply">Air supply flow rate</label> &nbsp;&nbsp;
-        <input type="number" step="any" id="air_supply" class="non_zero" name="air_supply" min="0" placeholder="(m³ / hour)" data-has-radio="#mech_type_air_supply"><br>
-        <input type="radio" id="mech_type_air_changes" name="mechanical_ventilation_type" value="mech_type_air_changes" onclick="require_fields(this)" tabindex="-1">
-          <label for="mech_type_air_changes">Air changes per hour</label> &nbsp;&nbsp;
-        <input type="number" step="any" id="air_changes" class="non_zero" name="air_changes" min="0" placeholder="(h⁻¹) only fresh air" data-has-radio="#mech_type_air_changes"><br>
+        <div class="form-group row">
+          <input type="radio" id="mech_type_air_supply" name="mechanical_ventilation_type" value="mech_type_air_supply" onclick="require_fields(this)" tabindex="-1">
+          <label for="mech_type_air_supply" class="col-form-label col-sm-5">Air supply flow rate</label> &nbsp;&nbsp;
+          <input type="number" step="any" id="air_supply" class="non_zero form-control col-sm-5" name="air_supply" min="0" placeholder="(m³ / hour)" data-has-radio="#mech_type_air_supply"><br>
+        </div>
+        <div class="form-group row">
+          <input type="radio" id="mech_type_air_changes" name="mechanical_ventilation_type" value="mech_type_air_changes" onclick="require_fields(this)" tabindex="-1">
+          <label for="mech_type_air_changes" class="col-form-label col-sm-5">Air changes per hour</label> &nbsp;&nbsp;
+          <input type="number" step="any" id="air_changes" class="non_zero form-control col-sm-5" name="air_changes" min="0" placeholder="(h⁻¹) only fresh air" data-has-radio="#mech_type_air_changes"><br>
+        </div>
     </div>
 
     <div id="DIVnatural_ventilation" class="tabbed" style="display:none">
-        Number of windows: <input type="number" id="windows_number" class="non_zero" name="windows_number" min="1"><br>
-        Height of window: <input type="number" step="any" id="window_height" class="non_zero" name="window_height" placeholder="meters" min="0"><br>
-        Window type:
+      <div class="form-group row">
+        <label class="col-form-label col-sm-5">Number of windows:</label>
+        <input type="number" id="windows_number" class="non_zero form-control col-sm-5" name="windows_number" min="1"><br>
+      </div>
+      <div class="form-group row">
+        <label class="col-form-label col-sm-5">Height of window: </label>
+        <input type="number" step="any" id="window_height" class="non_zero form-control col-sm-5" name="window_height" placeholder="meters" min="0"><br>
+      </div>
+        Window type:<br>
         <input type="radio" id="window_sliding" name="window_type" value="window_sliding" onclick="require_fields(this)" checked="checked">
           <label for="window_sliding">Sliding / Side-Hung</label>&nbsp;&nbsp;
         <input type="radio" id="window_hinged" name="window_type" value="window_hinged" onclick="require_fields(this)">
           <label for="window_hinged">Top- or Bottom-Hung</label>&nbsp;&nbsp;<br>
-        Width of window: <input type="number" step="any" id="window_width" class="non_zero disabled" name="window_width" placeholder="meters" min="0" data-has-radio="#window_hinged"><br>
-        Opening distance: <input type="number" step="any" id="opening_distance" class="non_zero" name="opening_distance" placeholder="meters" min="0"><br>
-        Windows open:</span><br>
-        <span class="tabbed"><input type="radio" id="windows_open_permanently" name="window_opening_regime" value="windows_open_permanently" onclick="require_fields(this)" checked="checked"></span>
-          <label for="windows_open_permanently">Permanently</label><br>
-        <span class="tabbed"><input type="radio" id="windows_open_periodically" name="window_opening_regime" value="windows_open_periodically" onclick="require_fields(this)"></span>
-          <label for="windows_open_periodically">Periodically:</label>&nbsp;&nbsp;
-        <input type="number" step="any" id="windows_duration" class="non_zero disabled" name="windows_duration" placeholder="Duration (min)" min="1" data-has-radio="#windows_open_periodically"> /
-        <input type="number" step="any" id="windows_frequency" class="non_zero disabled" name="windows_frequency" placeholder="Frequency (min)" min="1" data-has-radio="#windows_open_periodically">
+        <div class="form-group row">
+          <label class="col-form-label col-sm-5">Width of window: </label>
+          <input type="number" step="any" id="window_width" class="non_zero disabled form-control col-sm-5" name="window_width" placeholder="meters" min="0" data-has-radio="#window_hinged"><br>
+        </div>
+        <div class="form-group row">
+          <label class="col-form-label col-sm-5">Opening distance: </label>
+          <input type="number" step="any" id="opening_distance" class="non_zero form-control col-sm-5" name="opening_distance" placeholder="meters" min="0"><br>
+        </div>
+        Windows open:</span><br><br>
+        <div class="form-group row">
+          <span class="tabbed"><input type="radio" id="windows_open_permanently" name="window_opening_regime" value="windows_open_permanently" onclick="require_fields(this)" checked="checked"></span>
+          <label for="windows_open_permanently" class="col-form-label col-sm-3">Permanently</label><br>
+        </div>
+        <div class="form-group row">
+          <span class="tabbed"><input type="radio" id="windows_open_periodically" name="window_opening_regime" value="windows_open_periodically" onclick="require_fields(this)"></span>
+          <label for="windows_open_periodically" class="col-form-label col-sm-3">Periodically:</label>&nbsp;&nbsp; <br>
+          <input type="number" step="any" id="windows_duration" class="non_zero disabled form-control col-sm-4" name="windows_duration" placeholder="Duration (min)" min="1" data-has-radio="#windows_open_periodically"> 
+          <input type="number" step="any" id="windows_frequency" class="non_zero disabled form-control col-sm-4" name="windows_frequency" placeholder="Frequency (min)" min="1" data-has-radio="#windows_open_periodically">
+        </div>
         <br>
     </div>
 
-    HEPA filtration:
+    HEPA filtration: <br>
     <input type="radio" id="hepa_no" name="hepa_option" value=0 onclick="require_fields(this)" checked="checked">
-      <label for="hepa_no">No</label>&nbsp;&nbsp;
+      <label for="hepa_no" class="col-form-label">No</label>&nbsp;&nbsp;
     <input type="radio" id="hepa_yes" name="hepa_option" value=1 onclick="require_fields(this)">
-      <label for="hepa_yes">Yes</label>&nbsp;&nbsp;
-    <input type="number" step="any" id="hepa_amount" class="non_zero disabled" name="hepa_amount" placeholder="(m³ / hour)" min="0" data-has-radio="#hepa_yes">
+      <label for="hepa_yes" class="col-form-label">Yes</label>&nbsp;&nbsp;
+    <input type="number" step="any" id="hepa_amount" class="non_zero disabled form-control col-sm-4" name="hepa_amount" placeholder="(m³ / hour)" min="0" data-has-radio="#hepa_yes">
     <hr width="80%">
 
     <b>Face masks:</b>
     <div data-tooltip="Masks worn at workstations or removed when a 2m physical distance is respected and proper venting is ensured.">
         <span class="tooltip_text">?</span>
-    </div><br>
-    Are masks worn when occupants are at workstations?
+    </div>
+    
+    <br>
+    
+    Are masks worn when occupants are at workstations?<br>
     <input type="radio" id="mask_on" name="mask_wearing_option" value="mask_on" required>
       <label for="mask_on">Yes</label>&nbsp;&nbsp;
     <input type="radio" id="mask_off"  name="mask_wearing_option" value="mask_off" required checked="checked">
@@ -189,9 +232,9 @@ v{{ calculator_version }} <span style="float:right; font-weight:bold">Please sen
     <input type="radio" id="mask_type_ffp2"  name="mask_type" value="FFP2" onclick="require_fields(this)">
       <label for="mask_type_ffp2">FFP2</label><br>
     <hr width="80%">
-</div>
 
-<div class="col-lg-4 col-md-6">
+  </div>
+  <div>
 
     <!-- Event Options -->
     <b>Event data:</b>
@@ -199,21 +242,26 @@ v{{ calculator_version }} <span style="float:right; font-weight:bold">Please sen
         <span class="tooltip_text">?</span>
     </div><br>
 
-    <div class="row">
-      <label class="col-xl-3 col-lg-4 col-sm-3 col-form-label">Total number of occupants:</label>
-      <input type="number" id="total_people" class="col-lg-4 col-md-5 col-sm-3" name="total_people" min=1 required>
+    <div class="form-group row">
+      <label class="col-sm-5 col-form-label">Total number of occupants:</label>
+      <input type="number" id="total_people" class="form-control col-sm-3" name="total_people" min=1 required>
     </div>
 
-    <div class="row">
-      <label class="col-xl-3 col-lg-4 col-sm-3 col-form-label">Number of infected people: </label>
-      <input type="number" id="infected_people" class="col-lg-4 col-md-5 col-sm-3" name="infected_people" min=1 value=1 required><br>
+    <div class="form-group row">
+      <label class="col-sm-5 col-form-label">Number of infected people: </label>
+      <input type="number" id="infected_people" class="form-control col-sm-3" name="infected_people" min=1 value=1 required><br>
     </div>
 
     <span id="training_limit_error" class="red_text" hidden>Training activities limited to 1 infected<br></span>
     <hr width="80%">
 
-    Activity type:
-    <select id="activity_type" name="activity_type">
+    {# </div>
+    <div> #}
+
+    <div class="form-group row">
+    <label class="col-form-label col-sm-4">Activity type:</label>
+    
+    <select id="activity_type" name="activity_type" class="form-control col-sm-5">
       <option value="office">Office</option>
       <option value="meeting">Meeting</option>
       <option value="callcentre">Call Centre</option>
@@ -225,16 +273,42 @@ v{{ calculator_version }} <span style="float:right; font-weight:bold">Please sen
       <option value="training">Training</option>
       <option value="gym">Gym</option>
     </select><br>
-    Exposed person(s) presence:<br>
-    <span class="tabbed">Start: </span><input type="time" id="exposed_start" class="start_time" data-time-group="exposed" data-lunch-break="exposed_lunch" name="exposed_start" value="08:30" required> &nbsp;&nbsp;
-    Finish: <input type="time" id="exposed_finish" class="finish_time" data-time-group="exposed" data-lunch-break="exposed_lunch" name="exposed_finish" value="17:30" required><br>
-    Infected person(s) presence:<br>
-    <span class="tabbed">Start: </span><input type="time" id="infected_start" class="start_time" data-time-group="infected" data-lunch-break="infected_lunch" name="infected_start" value="08:30" required> &nbsp;&nbsp;
-    Finish: <input type="time" id="infected_finish" class="finish_time" data-time-group="infected" data-lunch-break="infected_lunch" name="infected_finish" value="17:30" required><br>
+    </div>
+
+
+    <div style=" margin-right:2rem;">
+      <div style="padding:10px; border: 2px solid rgb(47, 52, 66);">
+        Exposed person(s) presence:<br>
+        <div class="split">
+        <div>
+        Start: <input type="time" id="exposed_start" class="start_time" data-time-group="exposed" data-lunch-break="exposed_lunch" name="exposed_start" value="08:30" required> &nbsp;&nbsp;
+        </div>
+        <div>
+        Finish: <input type="time" id="exposed_finish" class="finish_time" data-time-group="exposed" data-lunch-break="exposed_lunch" name="exposed_finish" value="17:30" required><br>
+        </div>
+        </div>
+      </div>
+      <br>
+
+      <div style="padding:10px; border: 2px solid rgb(47, 52, 66);">
+        Infected person(s) presence:<br>
+        <div class="split">
+        <div>
+        Start: <input type="time" id="infected_start" class="start_time" data-time-group="infected" data-lunch-break="infected_lunch" name="infected_start" value="08:30" required> &nbsp;&nbsp;
+        </div>
+        <div>
+        Finish: <input type="time" id="infected_finish" class="finish_time" data-time-group="infected" data-lunch-break="infected_lunch" name="infected_finish" value="17:30" required><br>
+        </div>
+        </div>
+      </div>
+      <br>
+    </div>
+
     <hr width="80%">
 
-    Which month is the event?
-    <select id="event_month" name="event_month" value="January" required>
+    <div class="form-group row">
+    <label class="tabbed col-form-label col-sm-7">Which month is the event?</label>
+    <select id="event_month" name="event_month" class="form-control col-sm-4" value="January" required>
       <option value="January">January</option>
       <option value="February">February</option>
       <option value="March">March</option>
@@ -248,6 +322,7 @@ v{{ calculator_version }} <span style="float:right; font-weight:bold">Please sen
       <option value="November">November</option>
       <option value="December">December</option>
     </select><br>
+    </div>
     <hr width="80%">
 
     <span id="activity_breaks">
@@ -258,9 +333,12 @@ v{{ calculator_version }} <span style="float:right; font-weight:bold">Please sen
     </span><br>
 
     <!-- Lunch Options -->
-    <input type="checkbox" id="infected_dont_have_breaks_with_exposed" name="infected_dont_have_breaks_with_exposed" value='1' onclick="toggle_split_breaks()">
-      <label for="infected_dont_have_breaks_with_exposed">Input separate breaks for infected and exposed person(s)</label><br>
-    <div id="DIVexposed_breaks" style="float:left; margin-left:10pt;">
+    <div class="form-check">
+      <input type="checkbox" id="infected_dont_have_breaks_with_exposed" class="tabbed form-check-input" name="infected_dont_have_breaks_with_exposed" value='1' onclick="toggle_split_breaks()">
+      <label for="infected_dont_have_breaks_with_exposed" class="form-check-label col-sm-12">Input separate breaks for infected and exposed person(s)</label>
+
+    </div><br>
+    <div id="DIVexposed_breaks" style="float:left; margin-left:1rem; margin-right:2rem;">
       <span id="exposed_break_title" style="display:none;"><b>Exposed person(s) breaks:</b></span>
       <div style="padding:10px; border: 2px solid rgb(47, 52, 66);">
         Lunch break:&nbsp;&nbsp;
@@ -268,18 +346,31 @@ v{{ calculator_version }} <span style="float:right; font-weight:bold">Please sen
           <label for="exposed_lunch_option_no">No</label>&nbsp;&nbsp;
         <input type="radio" id="exposed_lunch_option_yes" data-lunch-select="exposed" name="exposed_lunch_option" value=1 checked="checked" onclick="require_fields(this)">
           <label for="exposed_lunch_option_yes">Yes</label><br>
-
+        <div class="split">
+        <div>
         Start: <input type="time" id="exposed_lunch_start" class="start_time" data-time-group="exposed_lunch" data-lunch-for="exposed" data-has-radio="#exposed_lunch_option_yes" name="exposed_lunch_start" value="12:30" required> &nbsp;&nbsp;
+        </div>
+        <div>
         Finish: <input type="time" id="exposed_lunch_finish" class="finish_time" data-time-group="exposed_lunch" data-lunch-for="exposed" data-has-radio="#exposed_lunch_option_yes" name="exposed_lunch_finish" value="13:30" required><br>
+        </div>
+        </div>
 
         <!-- Coffee Options -->
+        <div class="split">
+        <div class="col-sm-5">
         Coffee Breaks:&nbsp;&nbsp;
+        </div>
+        <div class="col-sm-7">
         <input type="radio" id="exposed_coffee_break_0" name="exposed_coffee_break_option" value="coffee_break_0" checked="checked">
           <label for="exposed_coffee_break_0" >No breaks</label>&nbsp;&nbsp;
         <input type="radio" id="exposed_coffee_break_2" name="exposed_coffee_break_option" value="coffee_break_2">
           <label for="exposed_coffee_break_2">2</label>&nbsp;&nbsp;
         <input type="radio" id="exposed_coffee_break_4" name="exposed_coffee_break_option" value="coffee_break_4">
           <label for="exposed_coffee_break_4">4</label><br>
+        </div>
+        </div>
+
+        <br>
 
         Duration (minutes):
         <select id="exposed_coffee_duration" name="exposed_coffee_duration">
@@ -294,7 +385,7 @@ v{{ calculator_version }} <span style="float:right; font-weight:bold">Please sen
       <br>
     </div>
 
-    <div id="DIVinfected_breaks" style="display:none; float:left; margin-left:10pt;">
+    <div id="DIVinfected_breaks" style="display:none; float:left; margin-left:1rem; margin-right:2rem;">
       <b>Infected person(s) breaks:</b>
       <div style="padding:10px; border: 2px solid rgb(47, 52, 66);">
         Lunch break:&nbsp;&nbsp;
@@ -303,17 +394,31 @@ v{{ calculator_version }} <span style="float:right; font-weight:bold">Please sen
         <input type="radio" id="infected_lunch_option_yes" data-lunch-select="infected" name="infected_lunch_option" value=1 checked="checked" onclick="require_fields(this)">
           <label for="infected_lunch_option_yes">Yes</label><br>
 
+        <div class="split">
+        <div>
         Start: <input type="time" id="infected_lunch_start" class="start_time" data-time-group="infected_lunch" data-lunch-for="infected" data-has-radio="#infected_lunch_option_yes" name="infected_lunch_start" value="12:30"> &nbsp;&nbsp;
+        </div>
+        <div>
         Finish: <input type="time" id="infected_lunch_finish" class="finish_time" data-time-group="infected_lunch" data-lunch-for="infected" data-has-radio="#infected_lunch_option_yes" name="infected_lunch_finish" value="13:30"><br>
+        </div>
+        </div>
 
         <!-- Coffee Options -->
-        Coffee Breaks:&nbsp;&nbsp;
+        <div class="split">
+        <div class="col-sm-5">
+        Coffee Breaks:
+        </div>
+        <div class="col-sm-7">
         <input type="radio" id="infected_coffee_break_0" name="infected_coffee_break_option" value="coffee_break_0" checked="checked">
           <label for="infected_coffee_break_0" >No breaks</label>&nbsp;&nbsp;
         <input type="radio" id="infected_coffee_break_2" name="infected_coffee_break_option" value="coffee_break_2">
           <label for="infected_coffee_break_2">2</label>&nbsp;&nbsp;
         <input type="radio" id="infected_coffee_break_4" name="infected_coffee_break_option" value="coffee_break_4">
           <label for="infected_coffee_break_4">4</label><br>
+        </div>
+        <div>
+
+        <br>
 
         Duration (minutes):
         <select id="infected_coffee_duration" name="infected_coffee_duration">
@@ -330,17 +435,23 @@ v{{ calculator_version }} <span style="float:right; font-weight:bold">Please sen
 
     <br style="clear:both;">
     <i>Coffee breaks are spread evenly throughout the day.</i><br>
-    <hr width="80%">
-    <div class="row">
-    <div class="col-md-4 col-md-offset-4">
-        <button type='submit' class="btn btn-primary" id="generate_report">Generate report</button>
-    </div>
-    </div>
+    {# <hr width="80%"> #}
+    
     <br><br>
+  </div> 
+  </div>
+  
+</section>
+
+<div class="center">
+  <button type='submit' class="btn btn-primary bigButton" id="generate_report">
+      Generate report
+  </button>
 </div>
 
-<div class="col-lg-4 col-sm-12">
+<br><br>
 
+<div class="container container--padding">
   <b>Quick Guide:</b><br>
   This tool simulates the long range airborne spread SARS-CoV-2 virus in a finite volume and estimates the risk of COVID-19 infection. It is based on current scientific data and can be used to compare the effectiveness of different mitigation measures.<br>
   <b>Virus data:</b> <br>
@@ -388,18 +499,19 @@ v{{ calculator_version }} <span style="float:right; font-weight:bold">Please sen
   for more detailed explanations on how to use this tool. <br>
 </div>
 
+<div class="center container--padding">
+<button class="btn btn-primary bigButton" type="button" data-toggle="collapse" data-target="#collapseDisclaimer" aria-expanded="false" aria-controls="collapseDisclaimer">
+    Disclaimer 
+</button>
 </div>
-</div>
-<br><br><br><br>
-</form>
 
-<div>
-    <h3>Disclaimer:</h3>
-    <p>
+<div class="collapse container container--padding" id="collapseDisclaimer">
+  <div class="card card-body">
+    <p> 
         CARA is a risk assessment tool developed to model the concentration of viruses in enclosed spaces, in order to inform space-management decisions.
     </p>
     <p>
-        CARA models the concentration profile of virions in enclosed spaces with clear and intuitive graphs.
+        CARA models the concentration profile of potential infectious viruses in enclosed spaces with clear and intuitive graphs.
         The user can set a number of parameters, including room volume, exposure time, activity type, mask-wearing and ventilation.
         The report generated indicates how to avoid exceeding critical concentrations and chains of airborne transmission in spaces such as individual offices, meeting rooms and labs.
     </p>
@@ -427,10 +539,9 @@ v{{ calculator_version }} <span style="float:right; font-weight:bold">Please sen
     <p>
         CARA has not undergone review, approval or certification by competent authorities, and as a result, it cannot be considered
         as a fully endorsed and reliable tool, namely in the assessment of potential viral emissions from infected hosts to be modelled.
-    </p>
+    </p>  </div>
 </div>
 
-<div class="text-component text-component-page clearfix"></div>
-<br>
-</div>
+</form>
+
 {% endblock main %}
diff --git a/cara/apps/calculator/templates/userguide.html.j2 b/cara/apps/calculator/templates/userguide.html.j2
index ede8c8e3..2902dd26 100644
--- a/cara/apps/calculator/templates/userguide.html.j2
+++ b/cara/apps/calculator/templates/userguide.html.j2
@@ -1,21 +1,28 @@
-{% extends "page.html.j2" %}
+{% extends "layout.html.j2" %}
 
+{% block main %}
 
+<div class="container container--padding">
+    <br><h1>Instructions for use</h1></br>
+    <p>This is a guide to help you use the calculator app.
+    If you are using the expert version of the tool,  you should look at the expert notes.</p>
+    <p>For more information on the Airborne Transmission of SARS-CoV-2, feel free to check out the HSE Seminar: <a href="https://cds.cern.ch/record/2743403">https://cds.cern.ch/record/2743403</a></p>
+    <p>The methodology, mathematical equations and parameters of the model are described here in the CERN Report: <a href="https://cds.cern.ch/record/2756083"> CERN-OPEN-2021-004</a></p> 
+</div>
 
-{% block contents %}
+<div class="center">
+<button class="btn btn-primary bigButton" type="button" data-toggle="collapse" data-target="#collapseDisclaimer" aria-expanded="false" aria-controls="collapseDisclaimer">
+    Disclaimer 
+</button>
+</div>
 
-<h1>Instructions for use</h1>
-<p>This is a guide to help you use the calculator app.
-If you are using the expert version of the tool,  you should look at the expert notes.</p>
-<p>For more information on the Airborne Transmission of SARS-CoV-2, feel free to check out the HSE Seminar: <a href="https://cds.cern.ch/record/2743403">https://cds.cern.ch/record/2743403</a></p>
-<p>The methodology, mathematical equations and parameters of the model are described here in the CERN Report: <a href="https://cds.cern.ch/record/2756083"> CERN-OPEN-2021-004</a></p> 
-<h2>Disclaimer</h2>
-
-    <p>
+<div class="collapse container container--padding" id="collapseDisclaimer">
+  <div class="card card-body">
+    <p> 
         CARA is a risk assessment tool developed to model the concentration of viruses in enclosed spaces, in order to inform space-management decisions.
     </p>
     <p>
-        CARA models the concentration profile of potential virions in enclosed spaces with clear and intuitive graphs.
+        CARA models the concentration profile of potential infectious viruses in enclosed spaces with clear and intuitive graphs.
         The user can set a number of parameters, including room volume, exposure time, activity type, mask-wearing and ventilation.
         The report generated indicates how to avoid exceeding critical concentrations and chains of airborne transmission in spaces such as individual offices, meeting rooms and labs.
     </p>
@@ -43,168 +50,178 @@ If you are using the expert version of the tool,  you should look at the expert
     <p>
         CARA has not undergone review, approval or certification by competent authorities, and as a result, it cannot be considered
         as a fully endorsed and reliable tool, namely in the assessment of potential viral emissions from infected hosts to be modelled.
-    </p>
-
-<h2>How to use this tool</h2>
-<h3>Simulation Name &amp; Room number</h3>
-<p>In order to be able to trace back the simulations in your workplace risk assessments, performed with the tool, you can give each one a unique name - for example "Office use on Tuesday mornings".
-The simulation name has no bearing on the calculation.</p>
-<p>A room number is included, if you do not wish to use a formal room number any reference will do - for example "57/2-004"</p>
-<h3>Virus Data</h3>
-<p>Please choose the correct virus strain or any reported Variant of Concern (VOC) from the list. 
-Changing this setting alters the properties of the virus which are used for the simulation.
-This has a significant effect on the probability of infection. 
-The choices are:</p>
-<ul>
-<li><code>SARS-CoV-2 (nominal strain)</code>, covering typical strains and varaints which are not of concern from an epidemiologic point of view of the virus;</li>
-<li><code>SARS-CoV-2 (Alpha VOC)</code>, first identified in the UK at the end of 2020 which is found to be approximately 1.5x more transmissible compared to the non-VOCs; </li>
-<li><code>SARS-CoV-2 (Gamma VOC)</code>, first identified in Brazil in January 2021 which is found to be approximately 2.2x more transmissible compared to the non-VOCs.</li>
-<li><code>SARS-CoV-2 (Delta VOC)</code>, first identified in India towards the end of 2020 which is found to be approximately 60% more transmissible compared to the ALPHA VOC.</li>
-</ul>
-<p>The user can base their choice according to the prevalence of the different variants in the local area. Access to this information can be found here:</p>
-<ul>
-<li>Geneva: <a href="https://www.covid19.admin.ch/fr/epidemiologic/virus-variants?detGeo=GE">https://www.covid19.admin.ch/fr/epidemiologic/virus-variants?detGeo=GE</a></li>
-<li>Ain (France): <a href="https://www.santepubliquefrance.fr/dossiers/coronavirus-covid-19/covid-19-cartographie-des-variants-en-france-donnees-par-region-et-par-departement">https://www.santepubliquefrance.fr/dossiers/coronavirus-covid-19/covid-19-cartographie-des-variants-en-france-donnees-par-region-et-par-departement</a></li>
-</ul>
-<p>N.B. The transmission data for the Gamma variant has been taken from a study data gathered in Manaus, Brazil where the variant was first observed.
-The local population in Manaus had very high levels of Covid-19 antibodies (&gt;67%) in recent months.
-This factor has been taken into account by the authors of the study, via statistical adjustments to the transmission value (i.e. it has been increased, to account for spread in a population with significant acquired Covid-19 immunity).
-However, this value may be revised in the future as more studies of the Gamma VOC transmission in different geographical locations become available.</p>
-<h3>Room Data</h3>
-<p>Please enter either the room volume (in m³) or both the floor area (m²) and the room height (m).
-This information is available via GIS Portal (<a href="https://gis.cern.ch/gisportal/">https://gis.cern.ch/gisportal/</a>).</p>
-<h4>Room heating system</h4>
-<p>The use of central heating (e.g. radiators) reduces relative humidity of the indoor air, which can decrease the decay rate of viral infectivity. If your space is heated with such water radiators, select 'Yes'. If your space does not have such heating, or they are not in use in the period of the simulation (e.g. summer), select 'No'.</p>
-<h3>Ventilation type</h3>
-<p>There are three main options:</p>
-<h4>Mechanical ventilation</h4>
-<p>If the room has mechanical ventilation, suppling fresh air from outside (either a local or centralised system), you should select this option.
-In order to make an accurate calculation you will need to know either the flow rate of fresh air supplied in the room or th total number of air changes per hour with fresh air.</p>
-<p>Please bear in mind that any of the two inputs only consider the supply of fresh air. If a portion of air is recirculated, it shall not be accounted for in the inputs.</p>
-<h4>Natural ventilation</h4>
-<p>Natural ventilation refers to rooms which have openable windows. 
-There are many possibilities to calculate natural ventilation air flows, for simplification this tool assumes a single-sided natural ventilation scheme which is a conservative approach for the purpose of this tool.</p>
-<p>Please choose the type of window (see illustration below):</p>
-<ul>
-<li>Sliding or side-hung</li>
-<li>Top- or bottom-hung
-<img src="static/images/window_type.PNG" alt="Window type" title="How to determine the window type"> </li>
-</ul>
-<p>Please enter the number, height and width and opening distance of the windows (in m).
-If there are multiple windows of different sizes, you should take an average.</p>
-<p>The window opening distance (in m) is:</p>
-<ul>
-<li>In the case of Sliding or Side-Hung option, the length the window is moved open.
-<em>Window opening distance example (image of open window and measuring tape):</em>
- <img src="static/images/window_opening.png" alt="Window Opening Distance" title="How to measure window opening distance"></li>
-<li>In case of Top- or Bottom-Hung, the distance between the fixed frame and the movable glazed part when open.</li>
-</ul>
-<p><strong>Notes</strong>: If you are unsure about the opening distance for the window, it is recommended to choose a conservative value (5 cms, 0.05m or 10cms, 0.10m).
-If you open the window at different distances throughout the day, choose an average value.</p>
-<p>When using natural ventilation, the circulation of air is simulated as a function of the difference between the temperature inside the room and the outside air temperature. The average outdoor temperature for each hour of the day has been computed for every month of the year based on historical data for Geneva, Switzerland.
-It is therefore very important to enter the correct time and date in the event data section.
-Finally, you must specify if the windows are open permanently (at all the times), or periodically (in intervals for a certain duration and frequency - both in minutes) - e.g. open the window for 10 minutes (duration) every 60 minutes (frequency).</p>
-<h4>No ventilation</h4>
-<p>This option assumes there is neither Mechanical nor Natural ventilation in the simulation.</p>
-<h4>HEPA filtration</h4>
-<p>A HEPA filter is a high efficiency particulate matter filter, which removes small airborne particles from the air.
-They can be very useful for removing particles with viruses from the air in an enclosed space.
-The calculator allows you to simulate the installation of a HEPA air filter within the room.
-The recommended airflow rate for the HEPA filter should correspond to a total air exchange rate of 3 - 6 ACH (the higher the better, even beyond 6).</p>
-<h3>Event Data</h3>
-<p>Here we capture the information about the event being simulated.
-First enter the number of occupants in the space, if you have a (small) variation in the number of people, please input the average or consider using the expert tool.
-Within the number of people occupying the space, you should specify how many are infected.</p>
-<p>As an example, for a shared office with 4 people, where one person is infected, we enter 4 occupants and 1 infected person.</p>
-<h4>Activity type</h4>
-<p>There are a few predefined activities in the tool at present.</p>
-<p><strong>Office </strong> = All persons seated, talking occasionally (1/3rd of the time, with normal breathing the other 2/3rds of the time). Everyone (exposed and infected occupants) is treated the same in this model.
-<strong>Meeting</strong> = All persons seated, having a conversation (approximately each occupant is 1/N % of the time talking, where N is the number of occupants). Everyone (exposed and infected occupants) is treated the same in this model.</p>
-<p><strong>Library</strong> = All persons seated, breathing only (not talking), all the time.</p>
-<p><strong>Call Centre</strong> = All persons seated, all talking simultaneously, all the time. This is a conservative profile, i.e. will show an increased <code>P(i)</code> compared to office/meeting activity. Everyone (exposed and infected occupants) is treated the same in this model.</p>
-<p><strong>Control Room (day shift)</strong> = All persons seated, all talking 50% of the time. This is a conservative profile, i.e. will show an increased <code>P(i)</code> compared to office/meeting activity. Everyone (exposed and infected occupants) is treated the same in this model.</p>
-<p><strong>Control Room (night shift)</strong> = All persons seated, all talking 10% of the time. Everyone (exposed and infected occupants) is treated the same in this model.</p>
-<p><strong>Lab</strong> = Based on a typical lab or technical working area, all persons are doing light activity and talking 50% of the time. Everyone (exposed and infected occupants) is treated the same in this model.</p>
-<p><strong>Workshop</strong> = Based on a mechanical assembly workshop or equipment installation scenario, all persons are doing moderate activity and talking 50% of the time. This activity is equally applicable to bicycling, or walking on a gradient, in the LHC tunnels. Everyone (exposed and infected occupants) is treated the same in this model.</p>
-<p><strong>Training</strong> = Based on a typical training course scenario.
-One individual (the trainer) is standing and talking, with all other individuals seated and talking quietly (whispering).
-In this case it is assumed that the infected person is the trainer, because this is the worst case in terms of viral shedding.</p>
-<p><strong>Gym</strong> = All persons are doing heavy exercise and breathing (not talking). Everyone (exposed and infected occupants) is treated the same in this model.</p>
-<h3>Timings</h3>
-<p>You should enter the time (hours:minutes) for the start and end of the simulation period (i.e. 8:30 to 17:30 for a typical office day).
-It is important to enter the correct times for the simulation, in particular when using natural ventilation.
-It is possible to specify a different time for the entry and exit of both the exposed and infected person, however for most cases (where we do not know apriori which of the occupants is infected), it is recommended to set these to the same values as the activity start and end.</p>
-<h4>When is the event?</h4>
-<p>This is included for completeness in all simulations, however it is of particular relevance to those using natural ventilation because of variations in outside air temperature.</p>
-<p>Only the month is used by the model to retrieve the average outdoor air temperatures for the Geneva region.</p>
-<h3>Breaks</h3>
-<h4>Lunch Break</h4>
-<p>You have the option to specify a lunch break.
-This will be useful if you plan to simulate a typical full working day.
-During the lunch break it is assumed that all occupants will leave the simulated space (to go eat lunch somewhere else - restaurant or break room).
-If you plan to eat lunch in the same area where you have been working, you should select 'No' even if a lunch break will be taken, since the risk of infection is related to the occupation of the simulated space.
-See 'Split Breaks' if the occupants do not break at the same time.</p>
-<p>It should also be noted that the infection probabilities presented in the report does not take into account any potential exposures during the break times.</p>
-<h4>Coffee Breaks</h4>
-<p>You have the option to choose 0(No breaks), 2 or 4 coffee breaks during the simulated period.
-It is assumed that all occupants vacate the space during the break period.
-If coffee breaks are taken in-situ, this option should be set to 'No breaks'.</p>
-<p>When enabled, the breaks are spread equally throughout the day - for example if we simulate the period from 9:00 to 18:00, with a lunch break from 13:00 to 14:00 and considering 2 coffee breaks, the tool will schedule the first coffee break around 11:00 and the second around 16:00.
-The exact timing of the breaks within the day is not particularly critical to an accurate simulation, so you do not need to be concerned about major differences if you take a coffee break at 10:00 instead of 11:00.
-The variation of coffee breaks can be altered in 5 minute increments up to 30 minutes in length.
-Note that this doesn't necessarily have to be a coffee break, it can represent any period where the simulated space is vacated.
-See 'Split Breaks' if the occupants do not break at the same time.</p>
-<p>It should also be noted that the infection probabilities presented in the report does not take into account any potential exposures during the break times.</p>
-<h4>Split breaks</h4>
-<p>You have the option to specify whether the exposed and infected person(s) break at the same time.
-If not, then you can input separate breaks. This is particularly different when specifying coffee breaks as they are spread evenly throughout the activity times specified.</p>
-<p>If we take an example where the exposed person(s) activity time is from 9:00 to 18:00 and the infected person(s) is from 10:00 to 17:00, with both having a lunch break from 13:00 to 14:00 and have 2 coffee breaks each, we can have two different results:</p>
-<ol>
-<li><p>Specify the default situtaion where both exposed and infected persons(s) have their breaks at the same time: in this case the coffee break times are calculated based on the activity time of the exposed - both will have their first coffee break around 11:00 and the second around 16:00.</p>
-</li>
-<li><p>Specify separate breaks for the infected person(s): in this case the coffee breaks will be calculated based on the different activity times (i.e. exposed from 9:00 to 18:00 and infected from 10:00 to 17:00) - the exposed person(s) will have their first coffee break around 11:00 and the second around 16:00, whereas the infected will have their first coffee break around 11:30 and the second around 15:30.</p>
-</li>
-</ol>
-<h3>Face Masks</h3>
-<p>The model allows for a simulation with either a continuous wearing of face masks throughout the duration of the event, or have the removed at all times - i.e. all occupants (infected and exposed alike) wear or not masks for the duration of the simulation. 
-Please bear in mind the user inputs shall be aligned with the current applicable public health &amp; safety instructions. 
-Please check what are the applicable rules, before deciding which assumptions are used for the simulation.</p>
-<p>If you have selected the Training activity type, this equates to the trainer and all participants either wearing masks throughout the training (Yes), or removing them when seated/standing at their socially distanced positions within the training room (No). 
-Please confirm what are the applicable rules, before deciding which assumptions are used for the simulation</p>
-<p>For the time being only the Type 1 surgical and FFP2 masks can be selected.</p>
-<h2>Generate Report</h2>
-<p>When you have entered all the necessary information, please click on the Generate Report button to execute the model. With the implementation of Monte Carlo simulations, the browser might take a few secounds to react.</p>
-<h1>Report</h1>
-<p>The report will open in your web browser.
-It contains a summary of all the input data, which will allow the simulation to be repeated if required in the future as we improve the model.</p>
-<h2>Results</h2>
-<p>This part of the report shows the <code>P(I)</code> or probability of one exposed person getting infected.
-It is estimated based on the emission rate of virus into the simulated volume, and the amount which is inhaled by exposed individuals.
-This probability is valid for the simulation duration - i.e. the start and end time.
-If you are using the natural ventilation option, the simulation is only valid for the selected month, because the following or preceding month will have a different average temperature profile.
-The <code>expected number of new cases</code> for the simulation is calculated based on the probability of infection, multiplied by the number of exposed occupants.</p>
-<p>The graph shows the variation in the concentration of virions within the simulated volume.
-It is determined by:</p>
-<ul>
-<li>The presence of the infected person, who emits airborne viruses in the volume.</li>
-<li>The emission rate is related to the type of activity of the infected person (sitting, light exercise), their level of vocalisation (breathing, talking or shouting).</li>
-<li>The accumulation of virions in the volume, which is driven, among other factors, by ventilation (if applicable).<ul>
-<li>In a mechanical ventilation scenario, the removal rate is constant, based on fresh airflow supply in and out of the simulated space.</li>
-<li>Under natural ventilation conditions, the effectiveness of ventilation relies upon the hourly temperature difference between the inside and outside air temperature.</li>
-<li>A HEPA filter removes virions from the air at a constant rate and is modelled in the same way as mechanical ventilation, however air passed through a HEPA filter is recycled (i.e. it is not fresh air).</li>
-</ul>
-</li>
-</ul>
-<h3>QR code</h3>
-<p>At the end of the report you can find a unique QR code / hyperlink for this report. This provides an automatic way to review the calculator form with the corresponding specified parameters.
-This allows for:</p>
-<ul>
-<li>sharing reports by either scanning or clicking on the QR code to obtain a shareable link.</li>
-<li>easily regenerating reports with any new versions of the CARA model released in the future.</li>
-</ul>
-<h1>Conclusion</h1>
-<p>This tool provides informative comparisons for COVID-19 (long-range) airborne risk only - see Disclaimer
-If you have any comments on your experience with the app, or feedback for potential improvements, please share them with the development team <a href="mailto:cara-dev@cern.ch">Send email</a>.</p>
+    </p>  </div>
+</div>
 
 
-{% endblock contents %}
+<div class="container container--padding">
+    <h1>How to use this tool</h1><br>
+    <h3>Simulation Name &amp; Room number</h3><br>
+    <p>In order to be able to trace back the simulations in your workplace risk assessments, performed with the tool, you can give each one a unique name - for example "Office use on Tuesday mornings".
+    The simulation name has no bearing on the calculation.</p>
+    <p>A room number is included, if you do not wish to use a formal room number any reference will do - for example "57/2-004"</p>
+    <br><h3>Virus Data</h3><br>
+    <p>Please choose the correct virus strain or any reported Variant of Concern (VOC) from the list. 
+    Changing this setting alters the properties of the virus which are used for the simulation.
+    This has a significant effect on the probability of infection. 
+    The choices are:</p>
+    <ul>
+    <li><code>SARS-CoV-2 (nominal strain)</code>, covering typical strains and varaints which are not of concern from an epidemiologic point of view of the virus;</li>
+    <li><code>SARS-CoV-2 (Alpha VOC)</code>, first identified in the UK at the end of 2020 which is found to be approximately 1.5x more transmissible compared to the non-VOCs; </li>
+    <li><code>SARS-CoV-2 (Gamma VOC)</code>, first identified in Brazil in January 2021 which is found to be approximately 2.2x more transmissible compared to the non-VOCs.</li>
+    <li><code>SARS-CoV-2 (Delta VOC)</code>, first identified in India towards the end of 2020 which is found to be approximately 60% more transmissible compared to the ALPHA VOC.</li>
+    </ul>
+    <p>The user can base their choice according to the prevalence of the different variants in the local area. Access to this information can be found here:</p>
+    <ul>
+    <li>Geneva: <a href="https://www.covid19.admin.ch/fr/epidemiologic/virus-variants?detGeo=GE">https://www.covid19.admin.ch/fr/epidemiologic/virus-variants?detGeo=GE</a></li>
+    <li>Ain (France): <a href="https://www.santepubliquefrance.fr/dossiers/coronavirus-covid-19/covid-19-cartographie-des-variants-en-france-donnees-par-region-et-par-departement">https://www.santepubliquefrance.fr/dossiers/coronavirus-covid-19/covid-19-cartographie-des-variants-en-france-donnees-par-region-et-par-departement</a></li>
+    </ul>
+    <p>N.B. The transmission data for the Gamma variant has been taken from a study data gathered in Manaus, Brazil where the variant was first observed.
+    The local population in Manaus had very high levels of Covid-19 antibodies (&gt;67%) in recent months.
+    This factor has been taken into account by the authors of the study, via statistical adjustments to the transmission value (i.e. it has been increased, to account for spread in a population with significant acquired Covid-19 immunity).
+    However, this value may be revised in the future as more studies of the Gamma VOC transmission in different geographical locations become available.</p>
+    <br><h3>Room Data</h3><br>
+    <p>Please enter either the room volume (in m³) or both the floor area (m²) and the room height (m).
+    This information is available via GIS Portal (<a href="https://gis.cern.ch/gisportal/">https://gis.cern.ch/gisportal/</a>).</p>
+    <br><h4>Room heating system</h4><br>
+    <p>The use of central heating (e.g. radiators) reduces relative humidity of the indoor air, which can decrease the decay rate of viral infectivity. If your space is heated with such water radiators, select 'Yes'. If your space does not have such heating, or they are not in use in the period of the simulation (e.g. summer), select 'No'.</p>
+    <br><h3>Ventilation type</h3><br>
+    <p>There are three main options:</p>
+    <br><h4>Mechanical ventilation</h4><br>
+    <p>If the room has mechanical ventilation, suppling fresh air from outside (either a local or centralised system), you should select this option.
+    In order to make an accurate calculation you will need to know either the flow rate of fresh air supplied in the room or th total number of air changes per hour with fresh air.</p>
+    <p>Please bear in mind that any of the two inputs only consider the supply of fresh air. If a portion of air is recirculated, it shall not be accounted for in the inputs.</p>
+    <br><h4>Natural ventilation</h4><br>
+    <p>Natural ventilation refers to rooms which have openable windows. 
+    There are many possibilities to calculate natural ventilation air flows, for simplification this tool assumes a single-sided natural ventilation scheme which is a conservative approach for the purpose of this tool.</p>
+    <p>Please choose the type of window (see illustration below):</p>
+    <ul>
+    <li>Sliding or side-hung</li>
+    <li>Top- or bottom-hung
+     </li>
+	 
+    </ul>
+	<img src="static/images/window_type.PNG" alt="Window type" title="How to determine the window type" width="100%">
+    <p>Please enter the number, height and width and opening distance of the windows (in m).
+    If there are multiple windows of different sizes, you should take an average.</p>
+    <p>The window opening distance (in m) is:</p>
+    <ul>
+	<li>In case of Top- or Bottom-Hung, the distance between the fixed frame and the movable glazed part when open.</li>
+    <li>In the case of Sliding or Side-Hung option, the length the window is moved open.
+    <em>Window opening distance example (image of open window and measuring tape):</em>
+    </li>
+	
+    
+    </ul>
+	<img src="static/images/window_opening.png" alt="Window Opening Distance" title="How to measure window opening distance" width="70%" style="margin:auto; display:block;">
+    <p><strong>Notes</strong>: If you are unsure about the opening distance for the window, it is recommended to choose a conservative value (5 cms, 0.05m or 10cms, 0.10m).
+    If you open the window at different distances throughout the day, choose an average value.</p>
+    <p>When using natural ventilation, the circulation of air is simulated as a function of the difference between the temperature inside the room and the outside air temperature. The average outdoor temperature for each hour of the day has been computed for every month of the year based on historical data for Geneva, Switzerland.
+    It is therefore very important to enter the correct time and date in the event data section.
+    Finally, you must specify if the windows are open permanently (at all the times), or periodically (in intervals for a certain duration and frequency - both in minutes) - e.g. open the window for 10 minutes (duration) every 60 minutes (frequency).</p>
+    <br><h4>No ventilation</h4><br>
+    <p>This option assumes there is neither Mechanical nor Natural ventilation in the simulation.</p>
+    <br><h4>HEPA filtration</h4><br>
+    <p>A HEPA filter is a high efficiency particulate matter filter, which removes small airborne particles from the air.
+    They can be very useful for removing particles with viruses from the air in an enclosed space.
+    The calculator allows you to simulate the installation of a HEPA air filter within the room.
+    The recommended airflow rate for the HEPA filter should correspond to a total air exchange rate of 3 - 6 ACH (the higher the better, even beyond 6).</p>
+    <br><h3>Event Data</h3><br>
+    <p>Here we capture the information about the event being simulated.
+    First enter the number of occupants in the space, if you have a (small) variation in the number of people, please input the average or consider using the expert tool.
+    Within the number of people occupying the space, you should specify how many are infected.</p>
+    <p>As an example, for a shared office with 4 people, where one person is infected, we enter 4 occupants and 1 infected person.</p>
+    <br><h4>Activity type</h4><br>
+    <p>There are a few predefined activities in the tool at present.</p>
+	<ul>
+	<li><strong>Office </strong> = All persons seated, talking occasionally (1/3rd of the time, with normal breathing the other 2/3rds of the time). Everyone (exposed and infected occupants) is treated the same in this model.</li>
+	<li><strong>Meeting</strong> = All persons seated, having a conversation (approximately each occupant is 1/N % of the time talking, where N is the number of occupants). Everyone (exposed and infected occupants) is treated the same in this model.</li>
+	<li><strong>Library</strong> = All persons seated, breathing only (not talking), all the time.</li>
+	<li><strong>Call Centre</strong> = All persons seated, all talking simultaneously, all the time. This is a conservative profile, i.e. will show an increased <code>P(i)</code> compared to office/meeting activity. Everyone (exposed and infected occupants) is treated the same in this model.</li>
+	<li><strong>Control Room (day shift)</strong> = All persons seated, all talking 50% of the time. This is a conservative profile, i.e. will show an increased <code>P(i)</code> compared to office/meeting activity. Everyone (exposed and infected occupants) is treated the same in this model.</li>
+	<li><strong>Control Room (night shift)</strong> = All persons seated, all talking 10% of the time. Everyone (exposed and infected occupants) is treated the same in this model.</li>
+	<li><strong>Lab</strong> = Based on a typical lab or technical working area, all persons are doing light activity and talking 50% of the time. Everyone (exposed and infected occupants) is treated the same in this model.</li>
+	<li><strong>Workshop</strong> = Based on a mechanical assembly workshop or equipment installation scenario, all persons are doing moderate activity and talking 50% of the time. This activity is equally applicable to bicycling, or walking on a gradient, in the LHC tunnels. Everyone (exposed and infected occupants) is treated the same in this model.</li>
+	<li><strong>Training</strong> = Based on a typical training course scenario.
+    One individual (the trainer) is standing and talking, with all other individuals seated and talking quietly (whispering).
+    In this case it is assumed that the infected person is the trainer, because this is the worst case in terms of viral shedding.</li>
+	<li><strong>Gym</strong> = All persons are doing heavy exercise and breathing (not talking). Everyone (exposed and infected occupants) is treated the same in this model.</li>
+	</ul>
+    <br><h3>Timings</h3>
+    <p>You should enter the time (hours:minutes) for the start and end of the simulation period (i.e. 8:30 to 17:30 for a typical office day).
+    It is important to enter the correct times for the simulation, in particular when using natural ventilation.
+    It is possible to specify a different time for the entry and exit of both the exposed and infected person, however for most cases (where we do not know apriori which of the occupants is infected), it is recommended to set these to the same values as the activity start and end.</p>
+    <br><h4>When is the event?</h4><br>
+    <p>This is included for completeness in all simulations, however it is of particular relevance to those using natural ventilation because of variations in outside air temperature.</p>
+    <p>Only the month is used by the model to retrieve the average outdoor air temperatures for the Geneva region.</p>
+    <br><h3>Breaks</h3><br>
+    <h4>Lunch Break</h4><br>
+    <p>You have the option to specify a lunch break.
+    This will be useful if you plan to simulate a typical full working day.
+    During the lunch break it is assumed that all occupants will leave the simulated space (to go eat lunch somewhere else - restaurant or break room).
+    If you plan to eat lunch in the same area where you have been working, you should select 'No' even if a lunch break will be taken, since the risk of infection is related to the occupation of the simulated space.
+    See 'Split Breaks' if the occupants do not break at the same time.</p>
+    <p>It should also be noted that the infection probabilities presented in the report does not take into account any potential exposures during the break times.</p>
+    <br><h4>Coffee Breaks</h4><br>
+    <p>You have the option to choose 0(No breaks), 2 or 4 coffee breaks during the simulated period.
+    It is assumed that all occupants vacate the space during the break period.
+    If coffee breaks are taken in-situ, this option should be set to 'No breaks'.</p>
+    <p>When enabled, the breaks are spread equally throughout the day - for example if we simulate the period from 9:00 to 18:00, with a lunch break from 13:00 to 14:00 and considering 2 coffee breaks, the tool will schedule the first coffee break around 11:00 and the second around 16:00.
+    The exact timing of the breaks within the day is not particularly critical to an accurate simulation, so you do not need to be concerned about major differences if you take a coffee break at 10:00 instead of 11:00.
+    The variation of coffee breaks can be altered in 5 minute increments up to 30 minutes in length.
+    Note that this doesn't necessarily have to be a coffee break, it can represent any period where the simulated space is vacated.
+    See 'Split Breaks' if the occupants do not break at the same time.</p>
+    <p>It should also be noted that the infection probabilities presented in the report does not take into account any potential exposures during the break times.</p>
+    <br><h4>Split breaks</h4><br>
+    <p>You have the option to specify whether the exposed and infected person(s) break at the same time.
+    If not, then you can input separate breaks. This is particularly different when specifying coffee breaks as they are spread evenly throughout the activity times specified.</p>
+    <p>If we take an example where the exposed person(s) activity time is from 9:00 to 18:00 and the infected person(s) is from 10:00 to 17:00, with both having a lunch break from 13:00 to 14:00 and have 2 coffee breaks each, we can have two different results:</p>
+    <ol>
+    <li><p>Specify the default situtaion where both exposed and infected persons(s) have their breaks at the same time: in this case the coffee break times are calculated based on the activity time of the exposed - both will have their first coffee break around 11:00 and the second around 16:00.</p>
+    </li>
+    <li><p>Specify separate breaks for the infected person(s): in this case the coffee breaks will be calculated based on the different activity times (i.e. exposed from 9:00 to 18:00 and infected from 10:00 to 17:00) - the exposed person(s) will have their first coffee break around 11:00 and the second around 16:00, whereas the infected will have their first coffee break around 11:30 and the second around 15:30.</p>
+    </li>
+    </ol>
+    <br><h3>Face Masks</h3><br>
+    <p>The model allows for a simulation with either a continuous wearing of face masks throughout the duration of the event, or have the removed at all times - i.e. all occupants (infected and exposed alike) wear or not masks for the duration of the simulation. 
+    Please bear in mind the user inputs shall be aligned with the current applicable public health &amp; safety instructions. 
+    Please check what are the applicable rules, before deciding which assumptions are used for the simulation.</p>
+    <p>If you have selected the Training activity type, this equates to the trainer and all participants either wearing masks throughout the training (Yes), or removing them when seated/standing at their socially distanced positions within the training room (No). 
+    Please confirm what are the applicable rules, before deciding which assumptions are used for the simulation</p>
+    <p>For the time being only the Type 1 surgical and FFP2 masks can be selected.</p>
+    <br><h2>Generate Report</h2><br>
+    <p>When you have entered all the necessary information, please click on the Generate Report button to execute the model. With the implementation of Monte Carlo simulations, the browser might take a few secounds to react.</p>
+    <br><h1>Report</h1><br>
+    <p>The report will open in your web browser.
+    It contains a summary of all the input data, which will allow the simulation to be repeated if required in the future as we improve the model.</p>
+    <br><h2>Results</h2><br>
+    <p>This part of the report shows the <code>P(I)</code> or probability of one exposed person getting infected.
+    It is estimated based on the emission rate of virus into the simulated volume, and the amount which is inhaled by exposed individuals.
+    This probability is valid for the simulation duration - i.e. the start and end time.
+    If you are using the natural ventilation option, the simulation is only valid for the selected month, because the following or preceding month will have a different average temperature profile.
+    The <code>expected number of new cases</code> for the simulation is calculated based on the probability of infection, multiplied by the number of exposed occupants.</p>
+    <p>The graph shows the variation in the concentration of infectious viruses within the simulated volume.
+    It is determined by:</p>
+    <ul>
+    <li>The presence of the infected person, who emits airborne viruses in the volume.</li>
+    <li>The emission rate is related to the type of activity of the infected person (sitting, light exercise), their level of vocalisation (breathing, talking or shouting).</li>
+    <li>The accumulation of infectious quanta in the volume, which is driven, among other factors, by ventilation (if applicable).<ul>
+    <li>In a mechanical ventilation scenario, the removal rate is constant, based on fresh airflow supply in and out of the simulated space.</li>
+    <li>Under natural ventilation conditions, the effectiveness of ventilation relies upon the hourly temperature difference between the inside and outside air temperature.</li>
+    <li>A HEPA filter removes infectious virus from the air at a constant rate and is modelled in the same way as mechanical ventilation, however air passed through a HEPA filter is recycled (i.e. it is not fresh air).</li>
+    </ul>
+    </li>
+    </ul>
+    <br><h3>QR code</h3><br>
+    <p>At the end of the report you can find a unique QR code / hyperlink for this report. This provides an automatic way to review the calculator form with the corresponding specified parameters.
+    This allows for:</p>
+    <ul>
+    <li>sharing reports by either scanning or clicking on the QR code to obtain a shareable link.</li>
+    <li>easily regenerating reports with any new versions of the CARA model released in the future.</li>
+    </ul>
+    <br><h1>Conclusion</h1><br>
+    <p>This tool provides informative comparisons for COVID-19 (long-range) airborne risk only - see Disclaimer
+    If you have any comments on your experience with the app, or feedback for potential improvements, please share them with the development team <a href="mailto:cara-dev@cern.ch">Send email</a>.</p>
+</div>
+
+{% endblock main %}
diff --git a/cara/apps/static/css/style.css b/cara/apps/static/css/style.css
new file mode 100644
index 00000000..2f93f6a6
--- /dev/null
+++ b/cara/apps/static/css/style.css
@@ -0,0 +1,250 @@
+*,
+*::before,
+*::after {
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+body,
+main,
+h1,
+h2,
+h3,
+p {
+  margin: 0;
+}
+
+/*-- Body Reset --*/
+body {
+  /* overflow-x: hidden */
+  font-family: 'Montserrat', sans-serif;
+  color: rgb(47, 72, 88);
+}
+
+/*============= TOP BAR HEADER =============*/
+
+.top-bar{
+  background: rgb(34, 34, 34);
+  height: 2.8rem;
+  padding: 0.5rem 0;
+}
+
+.top-bar a {
+  color: rgb(153, 153, 153);
+  text-decoration: none;
+  font-size: 1.1rem;
+}
+
+/*============= NAVIGATION =============*/
+
+.navbar-brand img {
+  height: 4rem;
+}
+
+.navbar {
+  font-size: 1rem;
+  font-weight: 600;
+  letter-spacing: .1rem;
+  box-shadow: 0 .5rem .5rem rgba(0,0,0,.5);
+  z-index: 1;
+  background: rgb(42, 52, 66);
+}
+
+.nav {
+  margin-inline: auto;
+  width: min(90%, 70.5rem);
+}
+
+.nav-item {
+  padding: .2rem;
+}
+
+.nav-link {
+  color: rgb(255, 255, 255)!important;
+}
+
+.nav-link.active,
+.nav-link:hover {
+  color: rgb(45, 138, 241)!important;
+}
+
+/*============= SPLIT =============*/
+
+.split {
+  /* flex: 1; */
+  clear: both;
+  display: inline-flex;
+  flex-direction: column;
+  /* width: 100%; */
+}
+
+
+
+/*============= TEXT AND CONTENT =============*/
+
+.logo {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  height: 6em;
+}
+
+section {
+  /* padding: 3rem 0; */
+}
+
+.container {
+  margin-inline: auto;
+  width: min(90%, 70.5rem);
+}
+
+.container--narrow {
+  max-width: 44rem;
+}
+
+.container--padding {
+  padding: 2rem 0;
+}
+
+.header-text {
+  text-align: center;
+}
+
+.head-center {
+  text-align: center;
+}
+
+.center {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.bigButton {
+  width: 18em;
+  height: 4em;
+  background: rgb(45, 138, 241);
+}
+
+
+
+.disclaimer {
+  background: rgb(45, 138, 241);
+  padding: 1.5rem 0;
+  color: black;
+}
+
+/*===== FIXED BACKGROUND IMG =====*/
+
+.fixed-background {
+  overflow: hidden; /*-- Correction for iOS --*/
+}
+
+/*===== INPUT =====*/
+
+.text-input {
+  
+}
+
+
+
+/*============= FOOTER =============*/
+
+footer {
+  background-color: rgb(42, 52, 66);
+  padding: 1rem 2rem 3rem;
+}
+
+footer img {
+  height: 5.5rem;
+  margin: 1.5rem auto;
+}
+
+/*============= MEDIA QUERIES =============*/
+
+/* Devices over 640px (xl) */
+@media screen and (min-width: 40em) {
+  .split {
+    flex-direction: row;
+  }
+
+  .split > * {
+    flex-basis: 100%;
+  }
+
+  .header-text {
+    text-align: left;
+  }
+
+  .split > * + * {
+    margin-left: 2em;
+  }
+
+  .bigButton {
+    width: 25%;
+  }
+
+  .logo {
+    float: left;
+  }
+}
+/* Devices under 768px (md) */
+/* @media (max-width: 767.98px) {
+
+} */
+
+
+/*============ BOOTSTRAP BREAK POINTS:
+
+Extra small (xs) devices (portrait phones, less than 576px)
+No media query since this is the default in Bootstrap
+
+Small (sm) devices (landscape phones, 576px and up)
+@media (min-width: 576px) { ... }
+
+Medium (md) devices (tablets, 768px and up)
+@media (min-width: 768px) { ... }
+
+Large (lg) devices (desktops, 992px and up)
+@media (min-width: 992px) { ... }
+
+Extra (xl) large devices (large desktops, 1200px and up)
+@media (min-width: 1200px) { ... }
+
+=============*/
+
+/* -- Bootstrap Mobile Gutter Fix -- */
+/* .row, .container-fluid {
+  margin-left: 0px !important;
+  margin-right: 0px !important;
+} */
+
+/*-- Fixed Background Image --*/
+/* .fixed-background {
+  position: relative;
+  width: 100%;
+  z-index: 1000!important;
+}
+.fixed-wrap {
+  clip: rect(0, auto, auto, 0);
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: -999 !important;
+}
+.fixed {
+  z-index: -999!important;
+  display: block;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-size: cover;
+  background-position: center center;
+  -webkit-transform: translateZ(0);
+  transform: translateZ(0);
+  will-change: transform;
+} */
\ No newline at end of file
diff --git a/cara/apps/templates/about.html.j2 b/cara/apps/templates/about.html.j2
index 8bb5cde9..200cdf17 100644
--- a/cara/apps/templates/about.html.j2
+++ b/cara/apps/templates/about.html.j2
@@ -1,6 +1,8 @@
-{% extends "page.html.j2" %}
+{% extends "layout.html.j2" %}
 
-{% block contents %}
+{% block main %}
+
+<div class="container container--padding"> 
 
 <h1>Airborne Transmission of SARS-CoV-2</h1><br>
 Currently, the existing public health measures point to the importance of proper building and environmental engineering control measures, such as proper Indoor Air Quality (IAQ).
@@ -8,7 +10,7 @@ This pandemic clearly raised increased awareness on airborne transmission of res
 Out of the main modes of viral transmission, the airborne route of SARS-CoV-2 seems to have a significant importance to the spread of COVID-19 infections world-wide, hence proper guidance to building engineers or facility managers, on how to prevent on-site transmission, is essential.<br>
 For information on the Airborne Transmission of SARS-CoV-2, feel free to check out the HSE Seminar: <a href=https://cds.cern.ch/record/2743403>https://cds.cern.ch/record/2743403</a>.<br>
 Slides available in <a href=https://indico.cern.ch/event/968258>https://indico.cern.ch/event/968258/</a>.
-
+<br><br>
 <h1>What is CARA?</h1><br>
 CARA stands for COVID Airborne Risk Assessment and was developed in the spring of 2020 to better understand and quantify the risk of long-range airborne spread of SARS-CoV-2 virus in workplaces. CARA comes with different applications that allow more or less flexibility in the input parameters:
 <ul>
@@ -24,12 +26,12 @@ The model used is based on scientific publications relating to airborne transmis
 The tool helps assess the potential dose of infectious airborne viruses in indoor gatherings, with people seated, standing, moving around, while breathing, speaking or shouting/singing. The model is based on the Wells-Riley model of aerosol disease transmission, which assumes a fixed value for the average infectious dose. The dose-response models for respiratory diseases is more accurate, although since this parameter for SARS-CoV-2 is not known so far, the Wells-Riley method is recommended in the health science community (see <a href="#references_block">References</a>).
 The methodology of the model is divided into three parts:
 <ol>
-	<li>Estimating the emission rate of virions.</li>
+	<li>Estimating the emission rate of infectious viruses.</li>
 	<li>Modeling the concentration evolution of viruses within a given volume and consequent inhalation dose during the exposure time.</li>
 	<li>Estimating the probability of a COVID-19 infection, the expected number of new cases arising from the transmission event and the basic reproduction rate (R0).</li>
 </ol>
 Parts #1 and #3 are mainly based on methods published in scientific papers (see <a href="#references_block">References</a>), and cover the medical aspects, which is not the core competencies of the authors. The ‘heart and soul’ of CARA lies within the Part #2 and the concentration modelling, which is based on a mass-balance differential equation solved for a constant emission rate and time-dependent exchange rate (e.g. natural ventilation flow rate). Other aspects, e.g., the biological decay of the virus in the air, gravitational settlement of the aerosols, mechanical supply of fresh air, effect of HEPA filtration, among others, are also included.<br>
-
+<br>
 <h1>What is the aim of CARA?</h1><br>
 Although the user is able to calculate the infection probability of a stand-alone event with a pre-defined set of protection measures, the main utility of CARA is to compare the relative impact of different measures and/or combination of measure. For example:
 <ul>
@@ -40,16 +42,21 @@ Although the user is able to calculate the infection probability of a stand-alon
 	<li>Etc…</li>
 </ul>
 
-<h1>Authors:</h1><br>
-{{ text_blocks['Authors'] }}
-
+	
+<h1>Main Developers:</h1><br>
+{{ text_blocks['Main Developers'] }}
+<br>
+<h2>Code Contributors:</h2><br>
+{{ text_blocks['Code Contributors'] }}
+<br>
 <h1>Acknowledgements:</h1><br>
 {{ text_blocks['Acknowledgements'] }}
-
+<br>
 <a id="references_block" style="color:#2f4858"><h1>References:</h1></a><br>
 {{ text_blocks['References'] }}
 
 <div class="text-component text-component-page clearfix"></div>
 <br>
 </div>
-{% endblock contents %}
+</div>
+{% endblock main %}
diff --git a/cara/apps/templates/index.html.j2 b/cara/apps/templates/index.html.j2
index c774420c..e93898e7 100644
--- a/cara/apps/templates/index.html.j2
+++ b/cara/apps/templates/index.html.j2
@@ -1,81 +1,47 @@
 {% extends "layout.html.j2" %}
 {% set active_page="home/" %}
 
-    {% block main %}
-    <div style="height: 8em; display: block;"></div>
-
-    <div class="field--item">
-      <div class="component-row component-row__display__fluidcenter section-navigation effect_none">
-        <div class="component-row__row">
-          <div class="component-row__column component-row__center section-has-no-column col-md-12 col-sm-12 col-xs-12">
-            <div class="box-effects-wrapper ">
-
-              <div class="text-component text-component-page clearfix" style="position:relative; " >
-
-                <img src="/static/images/cara_logo.200x200.png" style="height:10em; display:inline-block; vertical-align:middle; padding: 1em;">
-                <h2 class="text-component-title" style="display:inline-block; vertical-align:middle; align:center;">
-                  CARA: COVID Airborne Risk Assessment Tools
-                </h2>
-
-                <h2>Introduction</h2><br>
-                <div class="text-component-text cern_full_html" >
-                    <p>
-                    CARA is a risk assessment tool developed to model the concentration of viruses in enclosed spaces, in order to inform space-management decisions.
-                    It does this by simulating the long-range airborne spread SARS-CoV-2 virus in a finite volume, assuming homogenous mixing, and it estimates the risk of COVID-19 infection therein.
-                    Please see the <a href="/about">About</a> page for more details on the methodology, assumptions and limitations of CARA.
-                    </p>
-                    <p>
-                    The full CARA source code can be accessed freely under an Apache 2.0 open source license from our <a href="https://gitlab.cern.ch/cara/cara">code repository</a>.
-                    It includes detailed instructions on how to run your own version of this tool.
-                    </p>
-                </div>
-
-                <br>
-                <h2>CARA@CERN</h2><br>
-                <div class="text-component-text cern_full_html" >
-                  <p>
-                  CARA has been developed by CERN with the intention of allowing members of personnel with roles related to supervision, health & safety or space management to simulate the concerned workplaces on CERN sites.
-                  A hosted <a href="{{ calculator_prefix }}">CERN version of the CARA Covid Calculator</a> is available on this site to members of the CERN personnel.
-                  </p>
-                </div>
-
-                <br>
-                <h2>Authors</h2>
-                <div class="text-component-text cern_full_html" >
-                  <p>
-                    <h4>Andre Henriques<sup>1</sup>, Luis Aleixo<sup>1</sup>, Marco Andreini<sup>1</sup>, Gabriella Azzopardi<sup>2</sup>, James Devine<sup>3</sup>, Philip Elson<sup>4</sup>, Nicolas Mounet<sup>2</sup>, Markus Kongstein Rognlien<sup>2,6</sup>, Nicola Tarocco<sup>5</sup></h4><br>
-
-                    <sup>1</sup>HSE Unit, Occupational Health & Safety Group, CERN<br>
-                    <sup>2</sup>Beams Department, Accelerators and Beam Physics Group, CERN<br>
-                    <sup>3</sup>Experimental Physics Department, Safety Office, CERN<br>
-                    <sup>4</sup>Beams Department, Controls Group, CERN<br>
-                    <sup>5</sup>Information Technology Department, Collaboration, Devices & Applications Group, CERN<br>
-                    <sup>6</sup>Norwegian University of Science and Technology (NTNU)<br>
-                  </p>
-
-                  <br>
-                  <h3>Acknowledgements:</h3>
-                  <p>
-                    We wish to thank CERN’s HSE Unit, Beams Department, Experimental Physics Department, Information Technology Department, Industry, Procurement and Knowledge Transfer Department and International Relations Sector for their support to the study.
-                    Thanks to Doris Forkel-Wirth, Benoit Delille, Walid Fadel, Olga Beltramello, Letizia Di Giulio, Evelyne Dho, Wayne Salter, Benoit Salvant and colleagues from the COVID working group for providing expert advice and extensively testing the model.
-                    Finally, we wish to thank Fabienne Landua and the design service for preparing the illustrations and Alessandro Raimondo, Ana Padua and Manuela Cirilli from the Knowledge Transfer Group for their continuous support.
-                    Our compliments towards the work and research performed by world leading scientists in this domain: Prof. Manuel Gameiro, Prof. Shelly Miller, Prof. Linsey Marr, Prof. Jose Jimenez, Dr. Lidia Morawska, Prof Yuguo Li et al. – their scientific contribution was indispensable for this project.
-                    <span style="height: 3vh; display: block;"></span>
-                  </p>
-                </div>
-
-              </div>
-
-            </div>
-          </div>
-
-        </div>
-
-      </div>
-
+{% block main %}
+    {# <div style="height: 5em; display: block;"></div> #}
+<header class= "bg-light">
+  <div class="container container--narrow container--padding">
+    <img src="/static/images/cara_logo.200x200.png"  class="logo">
+    <h1 class="head-center"><b>CARA - </b> COVID Airborne Risk Assessment</h1>
+  </div>
+</header>
+   
+<div class="container container--padding">
+    <h2 class="header-text">Introduction</h2><br>
+    <div>
+        <p>
+        CARA is a risk assessment tool developed to model the concentration of viruses in enclosed spaces, in order to inform space-management decisions.
+        It does this by simulating the long-range airborne spread SARS-CoV-2 virus in a finite volume, assuming homogenous mixing, and it estimates the risk of COVID-19 infection therein.
+        Please see the <a href="/about">About</a> page for more details on the methodology, assumptions and limitations of CARA.
+        </p>
+        <p>
+        The full CARA source code can be accessed freely under an Apache 2.0 open source license from our <a href="https://gitlab.cern.ch/cara/cara">code repository</a>.
+        It includes detailed instructions on how to run your own version of this tool.
+        </p>
     </div>
 
-    <a class="endof-cern-header-blocks"></a>
-
+    <br>
+    <h2 class="header-text">CARA @ CERN</h2><br>
+    <div>
+      <p>
+      CARA has been developed by CERN with the intention of allowing members of personnel with roles related to supervision, health & safety or space management to simulate the concerned workplaces on CERN sites.
+      A hosted <a href="{{ calculator_prefix }}">CERN version of the CARA Covid Calculator</a> is available on this site to members of the CERN personnel.
+      </p>
     </div>
-    {% endblock main %}
+
+    <br>
+    <h3 class="header-text">Acknowledgements</h3><br>
+    <p>
+      We wish to thank CERN’s HSE Unit, Beams Department, Experimental Physics Department, Information Technology Department, Industry, Procurement and Knowledge Transfer Department and International Relations Sector for their support to the study.
+      Thanks to Doris Forkel-Wirth, Benoit Delille, Walid Fadel, Olga Beltramello, Letizia Di Giulio, Evelyne Dho, Wayne Salter, Benoit Salvant and colleagues from the COVID working group for providing expert advice and extensively testing the model.
+      Finally, we wish to thank Fabienne Landua and the design service for preparing the illustrations and Alessandro Raimondo, Ana Padua and Manuela Cirilli from the Knowledge Transfer Group for their continuous support.
+      Our compliments towards the work and research performed by world leading scientists in this domain: Prof. Manuel Gameiro, Prof. Shelly Miller, Prof. Linsey Marr, Prof. Jose Jimenez, Dr. Lidia Morawska, Prof Yuguo Li et al. – their scientific contribution was indispensable for this project.
+      <span style="height: 3vh; display: block;"></span>
+    </p>
+
+  </div>
+{% endblock main %}
diff --git a/cara/apps/templates/layout.html.j2 b/cara/apps/templates/layout.html.j2
index e30fae1b..7997a7ea 100644
--- a/cara/apps/templates/layout.html.j2
+++ b/cara/apps/templates/layout.html.j2
@@ -1,14 +1,10 @@
 <!DOCTYPE html>
-<html lang="en" dir="ltr"
-  prefix="content: http://purl.org/rss/1.0/modules/content/  dc: http://purl.org/dc/terms/  foaf: http://xmlns.com/foaf/0.1/  og: http://ogp.me/ns#  rdfs: http://www.w3.org/2000/01/rdf-schema#  schema: http://schema.org/  sioc: http://rdfs.org/sioc/ns#  sioct: http://rdfs.org/sioc/types#  skos: http://www.w3.org/2004/02/skos/core#  xsd: http://www.w3.org/2001/XMLSchema# "
-  class=" js">
+<html lang="en">
 
 <head>
-  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-
-  <meta name="MobileOptimized" content="width">
-  <meta name="HandheldFriendly" content="true">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
 
   <title>
   {% block title %}
@@ -16,286 +12,73 @@
   {% endblock title %}
   </title>
 
-  <link rel="stylesheet" media="all" href="/static/css/cern-theme.css">
-  <link rel="stylesheet" media="all" href="/static/css/cern-theme2.css">
-  <link rel="stylesheet" media="all" href="/static/css/cern-theme3.css">
-  <link rel="stylesheet" media="all" href="/static/css/colorbox.css">
-  <link rel="stylesheet" media="all" href="/static/css/colors.css">
-  <link rel="stylesheet" media="all" href="/static/css/cern-theme4.css">
+  {# <link rel="stylesheet" href="/static/css/bootstrap.css"> #}
+  
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
+  <link rel="stylesheet" href="/static/css/style.css">
+  <link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700&display=swap" rel="stylesheet">
+  
 
   {% block extra_headers %}
   {% endblock extra_headers %}
-
 </head>
 
-<body
-  class="cern-theme-on path-frontpage page-node-type-landing-page has-glyphicons no-admin-toolbar dev-status-ui cern-toolbar has-header toolbar-fixed">
-  <a href="https://againstcovid19.cern/welcome#main-content" class="visually-hidden focusable skip-link">
-    Skip to main content
-  </a>
-  <div id="cern-global-loading-layout" style="display: none;"><span><span></span></span><span></span></div>
-  <div id="cern-toolbar" role="group" aria-label="CERN Toolbar" class="user-not-authenticated"
-    style="top: 0px; opacity: 1;">
-    <h1>
-      <a href="https://home.cern/" title="CERN" class="ext" data-extlink="">
-        CERN
-        <span>Accelerating science</span>
-        <svg focusable="false" class="ext" role="img" aria-label="(link is external)" xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 80 40">
-          <metadata>
-            <sfw xmlns="http://ns.adobe.com/SaveForWeb/1.0/">
-              <slicesourcebounds y="-8160" x="-8165" width="16389" height="16384" bottomleftorigin="true">
-              </slicesourcebounds>
-              <optimizationsettings>
-                <targetsettings targetsettingsid="0" fileformat="PNG24Format">
-                  <png24format transparency="true" filtered="false" interlaced="false" nomattecolor="false"
-                    mattecolor="#FFFFFF"></png24format>
-                </targetsettings>
-              </optimizationsettings>
-            </sfw>
-          </metadata>
-          <title>(link is external)</title>
-          <path
-            d="M48 26c-1.1 0-2 0.9-2 2v26H10V18h26c1.1 0 2-0.9 2-2s-0.9-2-2-2H8c-1.1 0-2 0.9-2 2v40c0 1.1 0.9 2 2 2h40c1.1 0 2-0.9 2-2V28C50 26.9 49.1 26 48 26z">
-          </path>
-          <path
-            d="M56 6H44c-1.1 0-2 0.9-2 2s0.9 2 2 2h7.2L30.6 30.6c-0.8 0.8-0.8 2 0 2.8C31 33.8 31.5 34 32 34s1-0.2 1.4-0.6L54 12.8V20c0 1.1 0.9 2 2 2s2-0.9 2-2V8C58 6.9 57.1 6 56 6z">
-          </path>
-        </svg></a>
-    </h1>
-    <ul>
-      {% if user.is_authenticated() %}
-      <li class="signin">
-        <span>
-            Signed in as:
-            <a href="https://cern.ch/users-portal" class="account cern-multiple-mobile-signin ext">
-            {{ user.username }}
-            </a>
-        </span>
-      </li>
-      <li><a href="/auth/logout" class="cern-signout cern-multiple-mobile-signin">Sign out</a></li>
-      <script>
-        var AuthUserDomain = "{{ user.domain() }}";
-      </script>
-      {% endif %}
-      <li><a href="https://cern.ch/directory" class="cern-directory ext"title="Search CERN resources and browse the directory" data-extlink="">Directory</a></li>
-    </ul>
-  </div>
-
-  <div class="dialog-off-canvas-main-canvas" data-off-canvas-main-canvas="">
-    <header role="banner" style="display: block;">
-      <img src="/static/images/hse_triangle_right_1.png" style="float:left; height: 65pt; margin-top: 7pt">
-      <div class="header-wrapper" style="background: rgb(47, 52, 66); clear: none;">
-        <div class="site-info col-sm-3" style="max-height: 76px;">
-          <div class="site-info__text col-lg-9 col-md-10 col-sm-9" style="overflow:hidden;">
-            <a href="/" title="Home" rel="home">
-              <img src="/static/images/cara_logo_white_text.png" alt="home">
-            </a>
-          </div>
-        </div>
-
-        <div class="site-nav col-sm-9 ">
-
-          <div class="region region-header">
-            <nav role="navigation" aria-labelledby="block-cernoverride-main-menu-menu"
-              id="block-cernoverride-main-menu">
-              <h2 class="sr-only" id="block-cernoverride-main-menu-menu">Main navigation</h2>
-
-              <nav class="navbar navbar-default main-menu">
-                <div class="container-fluid">
-                  <!-- Brand and toggle get grouped for better mobile display -->
-                  <div class="navbar-header">
-                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
-                      data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
-                      <span class="sr-only">Toggle navigation</span>
-                      <span class="icon-bar"></span>
-                      <span class="icon-bar"></span>
-                      <span class="icon-bar"></span>
-                    </button>
-                  </div>
-
-                  <!-- Collect the nav links, forms, and other content for toggling -->
-                  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
-
-                    <ul class="nav navbar-nav">
-                      <li>
-                        <a href="/" class="{{ "is-active" if "home/" == active_page else "" }}">
-                            Home
-                        </a>
-                      </li>
-
-                      <li class="dropdown">
-                        <a href="{{ calculator_prefix }}" class="dropdown-toggle {{ "is-active" if "calculator" in active_page else "" }}">
-                            COVID Calculator
-                            <span class="caret"></span>
-                        </a>
-                        <ul class="dropdown-menu">
-                          <li>
-                            <a href="{{ calculator_prefix }}" class="{{ "is-active" if "calculator" == active_page else "" }}">
-                                Calculator
-                            </a>
-                          </li>
-                          <li>
-                            <a href="{{ calculator_prefix }}/user-guide" class="{{ "is-active" if "user-guide" in active_page else "" }}">
-                                User guide
-                            </a>
-                          </li>
-                        </ul>
-                        <li>
-                          <a href="/expert-app" target="_blank">
-                              Expert App (BETA)
-                          </a>
-                        </li>
-                        <li>
-                          <a href="https://hse.cern/covid-19-information">
-                              Covid Information
-                          </a>
-                        </li>
-                      </li>
-                      <li>
-                        <a href="/about" class="{{ "is-active" if "about" == active_page else "" }}">
-                            About
-                        </a>
-                      </li>
-                    </ul>
-                  </div>
-                </div>
-              </nav>
-
-            </nav>
-
-          </div>
-
-        </div>
-
+<body>
+  <div class="top-bar">
+    <div class="container">
+      <div class="col-12 text-left">
+        <p><a href="https://againstcovid19.cern/welcome#main-content">CERN Against COVID-19</a></p>
       </div>
-
-    </header>
+    </div>
   </div>
 
+  <nav class="navbar navbar-dark navbar-expand-lg">
+    <div class="container">
+
+      <a href="/" class="navbar-brand"><img src="/static/images/cara_logo_white_text.png" alt="Logo" title="Logo"></a>
+      
+      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
+      </button>
+
+      <div class="collapse navbar-collapse" id="navbarResponsive">
+        <ul class="navbar-nav ml-auto">
+          <li class="nav-item"><a href="/" class="{{ "nav-link active" if "home/" == active_page else "nav-link" }}">HOME</a></li>
+          <li class="nav-item"><a href="{{ calculator_prefix }}" class="{{ "nav-link active" if "calculator/" == active_page else "nav-link" }}">COVID CALCULATOR</a></li>
+          <li class="nav-item"><a href="{{ calculator_prefix }}/user-guide" class="{{ "nav-link active" if "user-guide" in active_page else "nav-link" }}">USER GUIDE</a></li>
+          <li class="nav-item"><a href="https://hse.cern/covid-19-information" class="nav-link">COVID INFORMATION</a></li>
+          <li class="nav-item"><a href="/about" class="{{ "nav-link active" if "about" == active_page else "nav-link" }}">ABOUT</a></li>
+        </ul>
+      </div>
+    </div>
+  </nav>
+
   <main role="main">
     {% block main %}
     {% endblock main %}
   </main>
 
-  <footer role="contentinfo">
-    <div class="row cern-footer">
-      <div class="col-xs-12 col-sm-3 col-md-3 col-lg-3 footer-first-col">
-        <div class="region region-footercolumn1">
-          <section id="block-disclaimer"
-            class="block block-block-content block-block-content112ec55d-2622-43e4-9063-e7433079dfb1 clearfix">
+  <footer>
+    <div class="container">
+      <div class="row text-light text-center py-4 justify-content-center">
 
-            <h2 class="block-title">Disclaimer</h2>
-
-            <div class="field field--name-body field--type-text-with-summary field--label-hidden field--item">
-              <p><span style="font-size:10px;"><em>CERN strives to deploy its know-how and technologies to help solve
+        <div class="col-sm-10 col-md-8 col-lg-6">
+          <img src="/static/images/cara_logo_white_text.png" alt="Logo">
+          <p><span style="font-size:10px;"><em>CERN strives to deploy its know-how and technologies to help solve
                     the challenges arising in the local and global fight against COVID-19. As a particle physics
                     research organisation, CERN is not in a position to advise on medical research, health or health
                     policy issues. Any initiative is conducted on a best effort and as-is basis, without liability or
                     warranty.</em></span></p>
-            </div>
-          </section>
-
+          <p style="font-size:10px;">
+              CARA is <a href="https://gitlab.cern.ch/cara/cara/-/blob/master/LICENSE" class="ext">Apache 2.0 licensed</a> open-source
+              software developed at CERN.
+              You can find the source code at <a href="https://gitlab.cern.ch/cara/cara">https://gitlab.cern.ch/cara/cara</a>,
+              where we welcome contributions, feature requests and issue reports.
+          </p>
         </div>
 
       </div>
-      <div class="col-xs-12 col-sm-8 col-md-8 col-lg-8 footer-second-col">
-        <div class="row">
-          <!-- CONTACT US -->
-          <div class="col-sm-5 col-md-4 col-md-offset-0 col-lg-4 col-lg-offset-0">
-            <div class="region region-footercolumn2">
-              <nav role="navigation" aria-labelledby="block-cernoverride-footer-menu" id="block-cernoverride-footer">
-
-                <h2 class="visually-hidden" id="block-cernoverride-footer-menu">Footer menu</h2>
-
-                <ul class="menu nav">
-                  <li>
-                    <a href="mailto:cara-dev@cern.ch" title="Contact the Task Force" class="mailto"
-                      data-extlink="">Contact<svg focusable="false" class="mailto" role="img"
-                        aria-label="(link sends email)" xmlns="http://www.w3.org/2000/svg" viewBox="0 10 70 20">
-                        <metadata>
-                          <sfw xmlns="http://ns.adobe.com/SaveForWeb/1.0/">
-                            <slicesourcebounds y="-8160" x="-8165" width="16389" height="16384" bottomleftorigin="true">
-                            </slicesourcebounds>
-                            <optimizationsettings>
-                              <targetsettings targetsettingsid="0" fileformat="PNG24Format">
-                                <png24format transparency="true" filtered="false" interlaced="false"
-                                  nomattecolor="false" mattecolor="#FFFFFF"></png24format>
-                              </targetsettings>
-                            </optimizationsettings>
-                          </sfw>
-                        </metadata>
-                        <title>(link sends email)</title>
-                        <path
-                          d="M56 14H8c-1.1 0-2 0.9-2 2v32c0 1.1 0.9 2 2 2h48c1.1 0 2-0.9 2-2V16C58 14.9 57.1 14 56 14zM50.5 18L32 33.4 13.5 18H50.5zM10 46V20.3l20.7 17.3C31.1 37.8 31.5 38 32 38s0.9-0.2 1.3-0.5L54 20.3V46H10z">
-                        </path>
-                      </svg></a>
-                  </li>
-                  <li>
-                      <a href="https://gitlab.cern.ch/cara/cara" title="CARA code repository" data-extlink="">
-                        Source code
-                      </a>
-                  </li>
-                </ul>
-
-              </nav>
-
-              <p style="font-size:10px;">
-                CARA is <a href="https://gitlab.cern.ch/cara/cara/-/blob/master/LICENSE" class="ext">Apache 2.0 licensed</a> open-source
-                software developed at CERN.
-                You can find the source code at <a href="https://gitlab.cern.ch/cara/cara">https://gitlab.cern.ch/cara/cara</a>,
-                where we welcome contributions, feature requests and issue reports.
-              </p>
-
-            </div>
-          </div>
-          <!-- general info -->
-          <div class="col-sm-6 col-sm-offset-1 col-md-4 col-md-offset-0 col-lg-4">
-            <div class=" mb-4">
-
-            </div>
-          </div>
-          <!-- cern and you -->
-          <div class="col-sm-6 col-sm-offset-6 col-md-4 col-md-offset-0 col-lg-4  col-lg-offset-0">
-            <div class=" mb-4">
-
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 footer-last-logo">
-        <a href="https://hse.cern/" title="HSE home" target="_blank">
-          <img src="/static/images/HSE_logo_white.png" alt="HSE home" style="width:450px; margin-left:-300px;">
-        </a>
-      </div>
     </div>
-
-    <div class="copy-wrapper light">
-      <a href="https://copyright.web.cern.ch/" class="ext" data-extlink="">
-        Copyright
-        <svg focusable="false" class="ext" role="img" aria-label="(link is external)" xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 80 40">
-          <metadata>
-            <sfw xmlns="http://ns.adobe.com/SaveForWeb/1.0/">
-              <slicesourcebounds y="-8160" x="-8165" width="16389" height="16384" bottomleftorigin="true">
-              </slicesourcebounds>
-              <optimizationsettings>
-                <targetsettings targetsettingsid="0" fileformat="PNG24Format">
-                  <png24format transparency="true" filtered="false" interlaced="false" nomattecolor="false"
-                    mattecolor="#FFFFFF"></png24format>
-                </targetsettings>
-              </optimizationsettings>
-            </sfw>
-          </metadata>
-          <title>(link is external)</title>
-          <path
-            d="M48 26c-1.1 0-2 0.9-2 2v26H10V18h26c1.1 0 2-0.9 2-2s-0.9-2-2-2H8c-1.1 0-2 0.9-2 2v40c0 1.1 0.9 2 2 2h40c1.1 0 2-0.9 2-2V28C50 26.9 49.1 26 48 26z">
-          </path>
-          <path
-            d="M56 6H44c-1.1 0-2 0.9-2 2s0.9 2 2 2h7.2L30.6 30.6c-0.8 0.8-0.8 2 0 2.8C31 33.8 31.5 34 32 34s1-0.2 1.4-0.6L54 12.8V20c0 1.1 0.9 2 2 2s2-0.9 2-2V8C58 6.9 57.1 6 56 6z">
-          </path>
-        </svg></a>
-      &nbsp;© 2020 - 2021 CERN</div>
   </footer>
 
   <script src="/static/js/js_packaged_for_theme.js"></script>
@@ -304,35 +87,14 @@
   <script src="/static/js/ScrollMagic.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js" integrity="sha512-8qmis31OQi6hIRgvkht0s6mCOittjMa9GMqtK9hes5iEQBQE/Ca6yGE5FsW36vyipGoWQswBj/QBm2JR086Rkw==" crossorigin="anonymous"></script>
   <script src="/static/js/usage-tracking.js"></script>
+
+	<!-- Popper JS -->
+	<script src="js/popper.min.js"></script>
+	<!-- Font Awesome -->
+	<script src="js/all.min.js"></script>
+
   {% block body_scripts %}
   {% endblock body_scripts %}
 
-  <div id="cboxOverlay" style="display: none;"></div>
-  <div id="colorbox" class="" role="dialog" tabindex="-1" style="display: none;">
-    <div id="cboxWrapper">
-      <div>
-        <div id="cboxTopLeft" style="float: left;"></div>
-        <div id="cboxTopCenter" style="float: left;"></div>
-        <div id="cboxTopRight" style="float: left;"></div>
-      </div>
-      <div style="clear: left;">
-        <div id="cboxMiddleLeft" style="float: left;"></div>
-        <div id="cboxContent" style="float: left;">
-          <div id="cboxTitle" style="float: left;"></div>
-          <div id="cboxCurrent" style="float: left;"></div><button type="button" id="cboxPrevious"></button><button
-            type="button" id="cboxNext"></button><button type="button" id="cboxSlideshow"></button>
-          <div id="cboxLoadingOverlay" style="float: left;"></div>
-          <div id="cboxLoadingGraphic" style="float: left;"></div>
-        </div>
-        <div id="cboxMiddleRight" style="float: left;"></div>
-      </div>
-      <div style="clear: left;">
-        <div id="cboxBottomLeft" style="float: left;"></div>
-        <div id="cboxBottomCenter" style="float: left;"></div>
-        <div id="cboxBottomRight" style="float: left;"></div>
-      </div>
-    </div>
-    <div style="position: absolute; width: 9999px; visibility: hidden; display: none; max-width: none;"></div>
-  </div>
 </body>
 </html>