add new CSS themes

ot_templating/Resources/Private/Partials/Assets.html

@@ -10,7 +10,7 @@
     </f:then>
     <f:else>
         <v:asset.style name="theme"
-                       path="EXT:ot_templating/Resources/Public/assets/style/theme-blue.css"
+                       path="EXT:ot_templating/Resources/Public/assets/style/theme-light-blue.css"
                        debug="0"/>
     </f:else>
 </f:if>

ot_templating/Resources/Private/Templates/Page/Home.html

@@ -6,7 +6,7 @@
 
 <f:section name='Configuration'>
     <flux:form id="3col" label="Gabarit Accueil" extensionName="Opentalent.OtTemplating">
-        <flux:field.select name="settings.themeColor" label="Couleur du thème" items="{ blue: 'Bleu', green: 'Vert', orange: 'Orange' }" />
+        <flux:field.select name="settings.themeColor" label="Couleur du thème" items="{ light-blue: 'Bleu ciel', blue: 'Bleu', green: 'Vert', orange: 'Orange', grey: 'Gris', red: 'Rouge', light-red: 'Rouge cerise', purple: 'Violet' }" />
         <flux:field.checkbox name="settings.displayCarousel" label="Afficher le caroussel" default="1"/>
         <flux:field.checkbox name="settings.staticDonors" label="Partenaires: affichage statique" default="0"/>
         <flux:field.input name="settings.eventsLimit" label="Prochains évènements: nombre maximum" default="5" minimum="1" maximum="24" eval="int"/>

ot_templating/Resources/Public/assets/style/theme-blue.css

@@ -139,7 +139,7 @@ ul.dropdown-left {
   flex-direction: row;
   flex-wrap: wrap;
   list-style: none;
-  background-color: #4facc6;
+  background-color: #3259d7;
   padding: 0;
   align-items: center;
   margin: 0 0 1em;
@@ -150,7 +150,7 @@ ul.dropdown-left {
   content: "";
   /* empty but necessary */
   position: absolute;
-  background-color: #4facc6;
+  background-color: #3259d7;
   height: 100%;
   left: -50%;
   width: 200%;
@@ -162,7 +162,7 @@ ul.dropdown-left {
 }
 
 #menu li.active {
-  background-color: #e6e6e6;
+  background-color: #3259d7;
 }
 
 #menu li a {
@@ -195,7 +195,7 @@ ul.dropdown-left {
 }
 
 #menu .dropdown.dropdown-displayed {
-  background-color: #e6e6e6;
+  background-color: #3259d7;
   color: #555;
 }
 
@@ -220,7 +220,7 @@ ul.dropdown-left {
 }
 
 #menu .dropdown-menu li.active {
-  background-color: #4facc6;
+  background-color: #3259d7;
 }
 
 #menu .dropdown-menu li.active > a {
@@ -251,37 +251,37 @@ ul.dropdown-left {
 }
 
 .content h1 {
-  color: #4facc6;
+  color: #3259d7;
   font-size: 1.6em;
   font-weight: 500;
 }
 
 .content h2 {
-  color: #4facc6;
+  color: #3259d7;
   font-size: 1.6em;
   font-weight: 500;
 }
 
 .content h3 {
-  color: #4facc6;
+  color: #3259d7;
   font-size: 1.2em;
   font-weight: 500;
 }
 
 .content h4 {
-  color: #333333;
+  color: #3259d7;
   font-size: 1.2em;
   font-weight: 500;
 }
 
 .content h5 {
-  color: #333333;
+  color: #3259d7;
   font-size: 1em;
   font-weight: 500;
 }
 
 .content a {
-  color: #4facc6;
+  color: #3259d7;
 }
 
 #footer {
@@ -381,7 +381,7 @@ footer .logo-ot {
 }
 
 .user-toolbar .dropside-menu {
-  background-color: #4facc6;
+  background-color: #3259d7;
   box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
 }
 
@@ -395,7 +395,7 @@ footer .logo-ot {
 #login-popup .popup-form {
   visibility: hidden;
   width: 240px;
-  background-color: #4facc6;
+  background-color: #3259d7;
   border-radius: 4px;
   padding: 1em 1.6em;
   position: absolute;
@@ -433,7 +433,7 @@ footer .logo-ot {
 }
 
 .breadcrumb a {
-  color: #54acc6;
+  color: #3259d7;
 }
 
 .breadcrumb li {
@@ -488,7 +488,7 @@ footer .logo-ot {
 }
 
 .ot-box header h3 {
-  color: #4facc6;
+  color: #3259d7;
   font-size: 1.2em;
   font-weight: bold;
   padding: 0;
@@ -496,7 +496,7 @@ footer .logo-ot {
 }
 
 .ot-box a {
-  color: #4facc6;
+  color: #3259d7;
 }
 
 .ot-box footer:not(:empty) {
@@ -597,8 +597,8 @@ footer .logo-ot {
 }
 
 .ot-all-events .event-search form button {
-  border: solid 2px #4facc6;
-  color: #4facc6;
+  border: solid 2px #3259d7;
+  color: #3259d7;
 }
 
 .ot-all-events .event-search form button:hover {
@@ -705,10 +705,10 @@ footer .logo-ot {
 }
 
 .ot-show-event .go-back {
-  color: #4facc6;
+  color: #3259d7;
   font-weight: bold;
   padding: 0.5em 0.7em;
-  border: solid 2px #4facc6;
+  border: solid 2px #3259d7;
   border-radius: 6px;
   margin: auto;
 }
@@ -873,7 +873,7 @@ textarea.form-control {
 }
 
 .form-control:focus {
-  border: 2px solid #7db6e2;
+  border: 2px solid #3259d7;
 }
 
 .form-control:invalid {
@@ -940,7 +940,7 @@ form button[type=submit]:hover {
   color: #262626;
   padding: 0 2em;
   margin: 0 0.5em 3em 0.5em;
-  border-left: solid 2px #7db6e2;
+  border-left: solid 2px #3259d7;
 }
 
 .fce-2col {

ot_templating/Resources/Public/assets/style/theme-blue.scss

@@ -1,3 +1,38 @@
-// Blue Theme: keep default colors here
-@import
-"style";
+// Blue Theme
+$main-color: #3259d7;
+
+@use 'style' with (
+  $menu-background-color: $main-color,
+  $menu-background-color-hovered: $main-color,
+  $menu-background-color-current: $main-color,
+  $menu-font-color: #ffffff,
+  $menu-font-color-hovered: #555,
+
+  $menu-dropdown-background-color: #ffffff,
+  $menu-dropdown-background-color-hovered: #e6e6e6,
+  $menu-dropdown-background-color-current: $main-color,
+  $menu-dropdown-font-color: #555,
+  $menu-dropdown-font-color-hovered: #555,
+  $menu-dropdown-font-color-current: #ffffff,
+
+  $user-toolbar-color: #666666,
+  $user-toolbar-dropdown-background-color: #ffffff,
+  $user-toolbar-popup-background-color: $main-color,
+
+  $breadcrumb-current-color: #737373,
+  $breadcrumb-a-color: $main-color,
+
+  $otbox-header-background-color: #323232,
+  $otbox-header-font-color: $main-color,
+
+  $content-h1-color: $main-color,
+  $content-h2-color: $main-color,
+  $content-h3-color: $main-color,
+  $content-h4-color: $main-color,
+  $content-h5-color: $main-color,
+
+  $content-a-color: $main-color,
+
+  $forms-label-color: 4facc6,
+  $forms-control-focused-border-color: $main-color,
+);

ot_templating/Resources/Public/assets/style/theme-green.css

@@ -139,7 +139,7 @@ ul.dropdown-left {
   flex-direction: row;
   flex-wrap: wrap;
   list-style: none;
-  background-color: #228d00;
+  background-color: #04a04c;
   padding: 0;
   align-items: center;
   margin: 0 0 1em;
@@ -150,7 +150,7 @@ ul.dropdown-left {
   content: "";
   /* empty but necessary */
   position: absolute;
-  background-color: #228d00;
+  background-color: #04a04c;
   height: 100%;
   left: -50%;
   width: 200%;
@@ -162,7 +162,7 @@ ul.dropdown-left {
 }
 
 #menu li.active {
-  background-color: #228d00;
+  background-color: #04a04c;
 }
 
 #menu li a {
@@ -195,7 +195,7 @@ ul.dropdown-left {
 }
 
 #menu .dropdown.dropdown-displayed {
-  background-color: #228d00;
+  background-color: #04a04c;
   color: #555;
 }
 
@@ -220,7 +220,7 @@ ul.dropdown-left {
 }
 
 #menu .dropdown-menu li.active {
-  background-color: #228d00;
+  background-color: #04a04c;
 }
 
 #menu .dropdown-menu li.active > a {
@@ -251,37 +251,37 @@ ul.dropdown-left {
 }
 
 .content h1 {
-  color: #228d00;
+  color: #04a04c;
   font-size: 1.6em;
   font-weight: 500;
 }
 
 .content h2 {
-  color: #228d00;
+  color: #04a04c;
   font-size: 1.6em;
   font-weight: 500;
 }
 
 .content h3 {
-  color: #228d00;
+  color: #04a04c;
   font-size: 1.2em;
   font-weight: 500;
 }
 
 .content h4 {
-  color: #228d00;
+  color: #04a04c;
   font-size: 1.2em;
   font-weight: 500;
 }
 
 .content h5 {
-  color: #228d00;
+  color: #04a04c;
   font-size: 1em;
   font-weight: 500;
 }
 
 .content a {
-  color: #228d00;
+  color: #04a04c;
 }
 
 #footer {
@@ -381,7 +381,7 @@ footer .logo-ot {
 }
 
 .user-toolbar .dropside-menu {
-  background-color: #228d00;
+  background-color: #04a04c;
   box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
 }
 
@@ -395,7 +395,7 @@ footer .logo-ot {
 #login-popup .popup-form {
   visibility: hidden;
   width: 240px;
-  background-color: #228d00;
+  background-color: #04a04c;
   border-radius: 4px;
   padding: 1em 1.6em;
   position: absolute;
@@ -433,7 +433,7 @@ footer .logo-ot {
 }
 
 .breadcrumb a {
-  color: #228d00;
+  color: #04a04c;
 }
 
 .breadcrumb li {
@@ -488,7 +488,7 @@ footer .logo-ot {
 }
 
 .ot-box header h3 {
-  color: #228d00;
+  color: #04a04c;
   font-size: 1.2em;
   font-weight: bold;
   padding: 0;
@@ -496,7 +496,7 @@ footer .logo-ot {
 }
 
 .ot-box a {
-  color: #228d00;
+  color: #04a04c;
 }
 
 .ot-box footer:not(:empty) {
@@ -597,8 +597,8 @@ footer .logo-ot {
 }
 
 .ot-all-events .event-search form button {
-  border: solid 2px #228d00;
-  color: #228d00;
+  border: solid 2px #04a04c;
+  color: #04a04c;
 }
 
 .ot-all-events .event-search form button:hover {
@@ -705,10 +705,10 @@ footer .logo-ot {
 }
 
 .ot-show-event .go-back {
-  color: #228d00;
+  color: #04a04c;
   font-weight: bold;
   padding: 0.5em 0.7em;
-  border: solid 2px #228d00;
+  border: solid 2px #04a04c;
   border-radius: 6px;
   margin: auto;
 }
@@ -873,7 +873,7 @@ textarea.form-control {
 }
 
 .form-control:focus {
-  border: 2px solid #228d00;
+  border: 2px solid #04a04c;
 }
 
 .form-control:invalid {
@@ -940,7 +940,7 @@ form button[type=submit]:hover {
   color: #262626;
   padding: 0 2em;
   margin: 0 0.5em 3em 0.5em;
-  border-left: solid 2px #228d00;
+  border-left: solid 2px #04a04c;
 }
 
 .fce-2col {

ot_templating/Resources/Public/assets/style/theme-green.scss

@@ -1,36 +1,38 @@
 // Green theme
+$main-color: #04a04c;
+
 @use 'style' with (
-  $menu-background-color: #228d00,
-  $menu-background-color-hovered: #228d00,
-  $menu-background-color-current: #228d00,
+  $menu-background-color: $main-color,
+  $menu-background-color-hovered: $main-color,
+  $menu-background-color-current: $main-color,
   $menu-font-color: #ffffff,
   $menu-font-color-hovered: #555,
 
   $menu-dropdown-background-color: #ffffff,
   $menu-dropdown-background-color-hovered: #e6e6e6,
-  $menu-dropdown-background-color-current: #228d00,
+  $menu-dropdown-background-color-current: $main-color,
   $menu-dropdown-font-color: #555,
   $menu-dropdown-font-color-hovered: #555,
   $menu-dropdown-font-color-current: #ffffff,
 
   $user-toolbar-color: #666666,
   $user-toolbar-dropdown-background-color: #ffffff,
-  $user-toolbar-popup-background-color: #228d00,
+  $user-toolbar-popup-background-color: $main-color,
 
   $breadcrumb-current-color: #737373,
-  $breadcrumb-a-color: #228d00,
+  $breadcrumb-a-color: $main-color,
 
   $otbox-header-background-color: #323232,
-  $otbox-header-font-color: #228d00,
+  $otbox-header-font-color: $main-color,
 
-  $content-h1-color: #228d00,
-  $content-h2-color: #228d00,
-  $content-h3-color: #228d00,
-  $content-h4-color: #228d00,
-  $content-h5-color: #228d00,
+  $content-h1-color: $main-color,
+  $content-h2-color: $main-color,
+  $content-h3-color: $main-color,
+  $content-h4-color: $main-color,
+  $content-h5-color: $main-color,
 
-  $content-a-color: #228d00,
+  $content-a-color: $main-color,
 
   $forms-label-color: 4facc6,
-  $forms-control-focused-border-color: #228d00,
+  $forms-control-focused-border-color: $main-color,
 );

ot_templating/Resources/Public/assets/style/theme-grey.css

@@ -0,0 +1,960 @@
+@charset "UTF-8";
+body {
+  overflow-x: hidden;
+}
+
+a {
+  text-decoration: none;
+}
+
+.ui-datepicker {
+  z-index: 10000 !important;
+}
+
+.alert {
+  color: #e60000;
+  font-weight: bold;
+}
+
+body {
+  max-width: 1170px;
+  margin: auto;
+  font-family: Liberation Sans, Arial;
+  font-size: 14px;
+}
+
+#header {
+  align-items: center;
+  margin-top: 0.4em;
+  margin-bottom: 1.2em;
+}
+
+.main {
+  /* OLD - iOS 6-, Safari 3.1-6 */
+  display: -webkit-box;
+  /* OLD - Firefox 19- (buggy but mostly works) */
+  display: -moz-box;
+  /* TWEENER - IE 10 */
+  display: -ms-flexbox;
+  /* NEW - Chrome */
+  display: -webkit-flex;
+  /* NEW, Spec - Opera 12.1, Firefox 20+ */
+  display: flex;
+  flex-direction: row;
+}
+
+.leftcol {
+  width: 15%;
+  min-width: 185px;
+}
+
+.rightcol {
+  width: 15%;
+  min-width: 185px;
+}
+
+.dropdown {
+  position: relative;
+  display: inline-block;
+}
+
+ul.dropdown-menu {
+  display: none;
+  position: absolute;
+  z-index: 1;
+  margin: auto 0;
+  padding: 0;
+  list-style: none;
+}
+
+ul.dropdown-menu li {
+  padding: 12px 16px;
+}
+
+ul.dropdown-right {
+  top: 0;
+  left: 100%;
+}
+
+ul.dropdown-left {
+  top: 0;
+  right: 100%;
+}
+
+#topbar {
+  /* OLD - iOS 6-, Safari 3.1-6 */
+  display: -webkit-box;
+  /* OLD - Firefox 19- (buggy but mostly works) */
+  display: -moz-box;
+  /* TWEENER - IE 10 */
+  display: -ms-flexbox;
+  /* NEW - Chrome */
+  display: -webkit-flex;
+  /* NEW, Spec - Opera 12.1, Firefox 20+ */
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  margin-top: 0.8em;
+  margin-bottom: 1em;
+  height: 75px;
+  list-style: none;
+}
+
+.topbar-logo img, .topbar-network-logo img {
+  margin: 6px;
+}
+
+.topbar-logo img {
+  max-height: 95%;
+}
+
+.topbar-network-logo {
+  margin-left: 6px;
+}
+
+.topbar-network-logo img {
+  max-height: 50px;
+}
+
+.topbar-title {
+  margin: 0 0.8em 0 0.8em;
+  flex: 1;
+  color: #333;
+  font-size: 1.6em;
+  font-weight: 500;
+}
+
+#menu {
+  /* OLD - iOS 6-, Safari 3.1-6 */
+  display: -webkit-box;
+  /* OLD - Firefox 19- (buggy but mostly works) */
+  display: -moz-box;
+  /* TWEENER - IE 10 */
+  display: -ms-flexbox;
+  /* NEW - Chrome */
+  display: -webkit-flex;
+  /* NEW, Spec - Opera 12.1, Firefox 20+ */
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  list-style: none;
+  background-color: #8c8c8c;
+  padding: 0;
+  align-items: center;
+  margin: 0 0 1em;
+  position: relative;
+}
+
+#menu:after {
+  content: "";
+  /* empty but necessary */
+  position: absolute;
+  background-color: #8c8c8c;
+  height: 100%;
+  left: -50%;
+  width: 200%;
+  z-index: -1;
+}
+
+#menu li {
+  height: 100%;
+}
+
+#menu li.active {
+  background-color: #8c8c8c;
+}
+
+#menu li a {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 12px;
+  height: 26px;
+  color: #ffffff;
+  font-size: 14px;
+  text-align: center;
+  text-decoration: none;
+}
+
+#menu li.active a {
+  color: #555;
+}
+
+#menu li.dropdown-displayed a {
+  color: #555;
+}
+
+#menu li a:hover {
+  text-decoration: none;
+  color: #555;
+}
+
+#menu .caret {
+  margin-left: 5px;
+}
+
+#menu .dropdown.dropdown-displayed {
+  background-color: #8c8c8c;
+  color: #555;
+}
+
+#menu .dropdown-menu {
+  min-width: 180px;
+  white-space: nowrap;
+  background-color: #ffffff;
+  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
+}
+
+#menu .dropdown-menu li {
+  width: 100%;
+  padding: 0;
+}
+
+#menu .dropdown-menu li:hover {
+  background-color: #e6e6e6;
+}
+
+#menu .dropdown-menu li:hover a {
+  color: #555;
+}
+
+#menu .dropdown-menu li.active {
+  background-color: #8c8c8c;
+}
+
+#menu .dropdown-menu li.active > a {
+  color: #ffffff;
+}
+
+#menu .dropdown-menu a {
+  height: 14px;
+  padding: 8px 12px;
+  width: auto;
+  color: #555;
+  font-size: 14px;
+}
+
+.content {
+  flex: 1;
+  padding: 0 2em;
+  min-width: 600px;
+}
+
+.content h1, h2, h3, h4, h5, h6 {
+  font-weight: 500;
+  line-height: 1.1;
+}
+
+.content h1, h2 {
+  padding: 5px;
+}
+
+.content h1 {
+  color: #8c8c8c;
+  font-size: 1.6em;
+  font-weight: 500;
+}
+
+.content h2 {
+  color: #8c8c8c;
+  font-size: 1.6em;
+  font-weight: 500;
+}
+
+.content h3 {
+  color: #8c8c8c;
+  font-size: 1.2em;
+  font-weight: 500;
+}
+
+.content h4 {
+  color: #8c8c8c;
+  font-size: 1.2em;
+  font-weight: 500;
+}
+
+.content h5 {
+  color: #8c8c8c;
+  font-size: 1em;
+  font-weight: 500;
+}
+
+.content a {
+  color: #8c8c8c;
+}
+
+#footer {
+  margin-top: 40px;
+  position: relative;
+  height: 60px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+#footer::after {
+  content: "";
+  /* empty but necessary */
+  position: absolute;
+  background-image: linear-gradient(to bottom, #575757 0, #3d3d3d 100%);
+  background-repeat: repeat-x;
+  box-shadow: 0px -2px 10px 0px #656565;
+  height: 84px;
+  left: -50%;
+  width: 200%;
+  z-index: -1;
+  margin: 0;
+}
+
+.footer-navbar {
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  list-style: none;
+}
+
+.footer-navbar a {
+  color: #ffffff;
+  text-decoration: none;
+  font-weight: 700;
+  margin: 0 14px;
+  font-size: 14px;
+}
+
+.footer-navbar a:hover {
+  color: #a6a6a6;
+}
+
+footer .logo-ot {
+  margin-right: 20px;
+}
+
+.user-toolbar {
+  color: #666666;
+  font-size: 16px;
+  position: relative;
+  display: inline-block;
+}
+
+.user-toolbar-username {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  height: 45px;
+  max-height: 100%;
+}
+
+.user-toolbar .fa {
+  margin: auto 5px;
+}
+
+.user-toolbar a {
+  text-decoration: none;
+  color: #666666;
+}
+
+.user-toolbar ul {
+  list-style: none;
+}
+
+.user-toolbar .dropdown-menu {
+  min-width: 240px;
+  background-color: #ffffff;
+  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
+  right: 0;
+}
+.user-toolbar .dropdown-menu li {
+  height: 3.5em;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 0;
+}
+.user-toolbar .dropdown-menu li:hover {
+  background-color: #cccccc;
+}
+.user-toolbar .dropdown-menu a {
+  width: 100%;
+  padding: 12px 16px;
+}
+
+.user-toolbar .dropside-menu {
+  background-color: #8c8c8c;
+  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
+}
+
+#login-popup {
+  position: relative;
+  display: inline-block;
+  cursor: pointer;
+}
+
+/* The actual popup */
+#login-popup .popup-form {
+  visibility: hidden;
+  width: 240px;
+  background-color: #8c8c8c;
+  border-radius: 4px;
+  padding: 1em 1.6em;
+  position: absolute;
+  right: 0;
+  top: 1em;
+  z-index: 1;
+}
+
+/* Toggle this class when clicking on the popup container (hide and show the popup) */
+#login-popup .show {
+  visibility: visible;
+}
+
+#login-popup .popup-form {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+#login-popup .popup-form > input {
+  margin: 0.6em;
+}
+
+/* Error messages */
+.login-errormsg {
+  text-align: center;
+}
+
+.breadcrumb {
+  list-style: none;
+  display: flex;
+  flex-direction: row;
+  font-weight: bold;
+}
+
+.breadcrumb a {
+  color: #8c8c8c;
+}
+
+.breadcrumb li {
+  margin: 0 3px;
+}
+
+.breadcrumb li a {
+  margin: 0 3px;
+}
+
+.breadcrumb li::before {
+  /*content: "> ";*/
+  font-family: "Font Awesome 5 Free";
+  content: "";
+  color: #b8b8b9;
+}
+
+.breadcrumb li:first-child::before {
+  content: "";
+}
+
+.breadcrumb > li:last-child {
+  color: #737373;
+}
+
+.slick-track {
+  max-height: 380px;
+  overflow: hidden;
+}
+
+.slick-slide img {
+  max-width: initial;
+}
+
+.carousel .carousel-img:not(.slick-slide) {
+  width: 100%;
+  display: none;
+}
+
+.carousel .carousel-img:first-child:not(.slick-slide) {
+  display: inline;
+}
+
+.ot-box {
+  font-size: 0.8em;
+}
+
+.ot-box header {
+  background: #323232;
+  padding: 0.5em;
+  margin: 1em 0;
+}
+
+.ot-box header h3 {
+  color: #8c8c8c;
+  font-size: 1.2em;
+  font-weight: bold;
+  padding: 0;
+  margin: 0;
+}
+
+.ot-box a {
+  color: #8c8c8c;
+}
+
+.ot-box footer:not(:empty) {
+  border-top: solid 1px #4d4d4d;
+  margin: 0.5em 0;
+  padding: 0.5em;
+  font-size: 1.2em;
+}
+
+.ot-events {
+  margin: 1em 0;
+}
+
+.ot-events .event-card {
+  display: flex;
+  flex-direction: row;
+  margin-bottom: 0.5em;
+}
+
+.ot-events .event-card > .event-poster {
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+}
+
+.ot-events .event-card > .event-poster img {
+  margin: auto;
+  width: 75%;
+  height: auto;
+}
+
+.ot-events .event-card > .event-summary {
+  flex: 2;
+  display: flex;
+  flex-direction: column;
+  padding: 0.3em;
+}
+
+.ot-events .event-card > .event-summary .event-name {
+  font-weight: bold;
+  color: #393939;
+}
+
+.ot-events .event-card > .event-summary .event-date {
+  color: #666;
+}
+
+.ot-events .no-events p {
+  padding: 1em;
+}
+
+.ot-all-events {
+  display: flex;
+  flex-direction: row;
+}
+
+.ot-all-events .events-controls {
+  order: 1;
+  flex: 1;
+}
+
+.ot-all-events .events-results {
+  order: 0;
+  flex: 1;
+}
+
+.ot-all-events .events-controls, .events-results {
+  display: flex;
+  flex-direction: column;
+  margin: 0 1.5em;
+}
+
+.ot-all-events .event-search {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 2em;
+}
+
+.ot-all-events h3 {
+  font-size: 1.2em;
+  font-weight: bold;
+}
+
+.ot-all-events .event-search form {
+  display: flex;
+  flex-direction: column;
+}
+
+.ot-all-events .event-search form input, button {
+  margin-bottom: 1em;
+  line-height: 1.4em;
+  font-size: 1.1em;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  padding: 6px 12px;
+}
+
+.ot-all-events .event-search form button {
+  border: solid 2px #8c8c8c;
+  color: #8c8c8c;
+}
+
+.ot-all-events .event-search form button:hover {
+  background-color: #d8edf3;
+  cursor: pointer;
+}
+
+.ot-all-events #event-map {
+  height: 400px;
+  width: 100%;
+  align-self: flex-end;
+}
+
+.ot-all-events .event {
+  display: flex;
+  flex-direction: column;
+  border-bottom: solid 2px #323232;
+  border-radius: 4px;
+  height: 200px;
+  padding: 1em;
+  justify-content: space-around;
+}
+
+.ot-all-events .event-preview {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.ot-all-events .event-preview .event-poster {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.ot-all-events .event-preview .event-poster img {
+  width: auto;
+  max-width: 100%;
+  min-width: 40%;
+  height: auto;
+  margin-right: 4em;
+}
+
+.ot-all-events .event-preview .event-summary {
+  flex: 2;
+  display: flex;
+  flex-direction: column;
+}
+
+.ot-all-events .event-preview .event-summary > span {
+  margin-bottom: 0.5em;
+}
+
+.ot-all-events .event-preview .event-name {
+  font-size: 1.4em;
+  color: #333333;
+  font-weight: bold;
+}
+
+.ot-all-events .event-preview .event-loc-date {
+  font-size: 1.1em;
+  color: #4d4d4d;
+  font-weight: bold;
+}
+
+.ot-all-events .event-preview .event-description {
+  color: #4d4d4d;
+}
+
+.ot-all-events .event-see {
+  align-self: stretch;
+  padding: 0.4em 0.8em;
+  font-size: 1.1em;
+  margin-top: 0.4em;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+}
+
+.ot-all-events .event-see:hover {
+  text-decoration: none;
+  font-weight: bold;
+}
+
+.ot-show-event {
+  display: flex;
+  flex-direction: column;
+}
+
+.ot-show-event header {
+  display: flex;
+  flex-direction: row;
+  padding: 0.5em;
+  margin-bottom: 2em;
+  align-items: center;
+}
+
+.ot-show-event .event-name {
+  font-size: 1.8em;
+  font-weight: bold;
+  flex: 1;
+}
+
+.ot-show-event .go-back {
+  color: #8c8c8c;
+  font-weight: bold;
+  padding: 0.5em 0.7em;
+  border: solid 2px #8c8c8c;
+  border-radius: 6px;
+  margin: auto;
+}
+
+.ot-show-event .go-back:hover {
+  background-color: #d8edf3;
+  text-decoration: none;
+}
+
+.ot-show-event .event-content {
+  display: flex;
+  flex-direction: row;
+  margin-bottom: 2em;
+}
+
+.ot-show-event .event-content .event-poster {
+  flex: 1;
+}
+
+.ot-show-event .event-poster img {
+  width: auto;
+  max-width: 100%;
+  min-width: 40%;
+  height: auto;
+}
+
+.ot-show-event .event-summary {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.ot-show-event .event-description {
+  margin-bottom: 1em;
+  padding: 1em 0.5em;
+}
+
+.ot-show-event .event-infos {
+  border: none;
+  width: 94%;
+  margin: 0 3%;
+  padding-top: 1em;
+}
+
+.ot-show-event .event-infos tr {
+  background-color: #ffdd99;
+}
+
+.ot-show-event .event-infos tr:nth-child(odd) {
+  background-color: #ffd480;
+}
+
+.ot-show-event .event-content .event-infos td {
+  padding: 0.8em 1.6em;
+}
+
+.ot-show-event .event-content .event-infos tr td:first-child {
+  font-weight: bold;
+  color: #2E2D2D;
+}
+
+.ot-show-event #event-map {
+  height: 400px;
+  width: 100%;
+  align-self: center;
+}
+
+.ot-donors .donor-list {
+  display: flex;
+  flex-direction: column;
+}
+
+.ot-donors .donor-card {
+  height: 80px;
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  align-content: center;
+  justify-content: center;
+  margin-bottom: 1em;
+}
+
+.ot-donors .donor-card img {
+  width: auto;
+  max-height: 100%;
+  max-width: 95%;
+  margin: auto;
+  /* Style the alt text */
+  font-size: 1.1em;
+}
+
+.frame-type-menu_sitemap {
+  font-size: 16px;
+  font-weight: bold;
+}
+
+.frame-type-menu_sitemap > ul {
+  padding-left: 1.5em;
+  list-style: none;
+}
+
+.frame-type-menu_sitemap li ul {
+  list-style: disc;
+}
+
+.frame-type-menu_sitemap li ul li ul {
+  list-style: square;
+}
+
+.frame-type-menu_sitemap li {
+  padding-top: 0.5em;
+  padding-bottom: 0.5em;
+  color: #979797;
+}
+
+form .row {
+  display: flex;
+  flex-direction: row;
+}
+
+form .row > div {
+  padding-left: 2em;
+  flex: 1;
+}
+
+form .row > div:first-child {
+  padding-left: 0;
+}
+
+.form-group {
+  margin-bottom: 18px;
+}
+
+.control-label {
+  color: 4facc6;
+  display: inline-block;
+  max-width: 100%;
+  margin-bottom: 10px;
+  font-weight: 700;
+}
+
+div.input {
+  display: flex;
+  flex-direction: column;
+}
+
+.form-control {
+  height: 28px;
+  box-sizing: content-box;
+  padding: 6px 12px;
+  font-size: 14px;
+  line-height: 1.2em;
+  color: #555;
+  background-color: #fff;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}
+
+textarea.form-control {
+  padding: 12px 12px;
+  height: 180px;
+}
+
+.form-control:focus {
+  border: 2px solid #8c8c8c;
+}
+
+.form-control:invalid {
+  box-shadow: none;
+}
+
+div.input .error {
+  color: #e60000;
+}
+
+div.input span.error {
+  margin-top: 5px;
+}
+
+span.submit {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+}
+
+form button[type=submit] {
+  width: 120px;
+}
+
+form button[type=submit]:hover {
+  background-color: #e6e6e6;
+  cursor: pointer;
+}
+
+::-webkit-input-placeholder {
+  color: #8c8c8c !important;
+  opacity: 1;
+}
+
+:-moz-placeholder {
+  color: #8c8c8c !important;
+  opacity: 1;
+}
+
+::-moz-placeholder {
+  color: #8c8c8c !important;
+  opacity: 1;
+}
+
+:-ms-input-placeholder {
+  color: #8c8c8c !important;
+  opacity: 1;
+}
+
+.contact-form {
+  width: 80%;
+  margin: auto;
+  min-width: 600px;
+}
+
+.contact-form-info {
+  font-size: 12px;
+  padding: 0 5px 10px 5px;
+  font-style: italic;
+  color: #4d4d4d;
+}
+
+.faq-item .content {
+  color: #262626;
+  padding: 0 2em;
+  margin: 0 0.5em 3em 0.5em;
+  border-left: solid 2px #8c8c8c;
+}
+
+.fce-2col {
+  display: flex;
+  flex-direction: row;
+}
+
+.fce-2col .col {
+  flex: 1;
+  margin-right: 2em;
+}
+
+.fce-2col .col:last-child {
+  margin-right: 0;
+}
+
+/*# sourceMappingURL=theme-grey.css.map */

ot_templating/Resources/Public/assets/style/theme-grey.scss

@@ -0,0 +1,38 @@
+// Grey Theme
+$main-color: #8c8c8c;
+
+@use 'style' with (
+  $menu-background-color: $main-color,
+  $menu-background-color-hovered: $main-color,
+  $menu-background-color-current: $main-color,
+  $menu-font-color: #ffffff,
+  $menu-font-color-hovered: #555,
+
+  $menu-dropdown-background-color: #ffffff,
+  $menu-dropdown-background-color-hovered: #e6e6e6,
+  $menu-dropdown-background-color-current: $main-color,
+  $menu-dropdown-font-color: #555,
+  $menu-dropdown-font-color-hovered: #555,
+  $menu-dropdown-font-color-current: #ffffff,
+
+  $user-toolbar-color: #666666,
+  $user-toolbar-dropdown-background-color: #ffffff,
+  $user-toolbar-popup-background-color: $main-color,
+
+  $breadcrumb-current-color: #737373,
+  $breadcrumb-a-color: $main-color,
+
+  $otbox-header-background-color: #323232,
+  $otbox-header-font-color: $main-color,
+
+  $content-h1-color: $main-color,
+  $content-h2-color: $main-color,
+  $content-h3-color: $main-color,
+  $content-h4-color: $main-color,
+  $content-h5-color: $main-color,
+
+  $content-a-color: $main-color,
+
+  $forms-label-color: 4facc6,
+  $forms-control-focused-border-color: $main-color,
+);

ot_templating/Resources/Public/assets/style/theme-light-blue.css

@@ -0,0 +1,960 @@
+@charset "UTF-8";
+body {
+  overflow-x: hidden;
+}
+
+a {
+  text-decoration: none;
+}
+
+.ui-datepicker {
+  z-index: 10000 !important;
+}
+
+.alert {
+  color: #e60000;
+  font-weight: bold;
+}
+
+body {
+  max-width: 1170px;
+  margin: auto;
+  font-family: Liberation Sans, Arial;
+  font-size: 14px;
+}
+
+#header {
+  align-items: center;
+  margin-top: 0.4em;
+  margin-bottom: 1.2em;
+}
+
+.main {
+  /* OLD - iOS 6-, Safari 3.1-6 */
+  display: -webkit-box;
+  /* OLD - Firefox 19- (buggy but mostly works) */
+  display: -moz-box;
+  /* TWEENER - IE 10 */
+  display: -ms-flexbox;
+  /* NEW - Chrome */
+  display: -webkit-flex;
+  /* NEW, Spec - Opera 12.1, Firefox 20+ */
+  display: flex;
+  flex-direction: row;
+}
+
+.leftcol {
+  width: 15%;
+  min-width: 185px;
+}
+
+.rightcol {
+  width: 15%;
+  min-width: 185px;
+}
+
+.dropdown {
+  position: relative;
+  display: inline-block;
+}
+
+ul.dropdown-menu {
+  display: none;
+  position: absolute;
+  z-index: 1;
+  margin: auto 0;
+  padding: 0;
+  list-style: none;
+}
+
+ul.dropdown-menu li {
+  padding: 12px 16px;
+}
+
+ul.dropdown-right {
+  top: 0;
+  left: 100%;
+}
+
+ul.dropdown-left {
+  top: 0;
+  right: 100%;
+}
+
+#topbar {
+  /* OLD - iOS 6-, Safari 3.1-6 */
+  display: -webkit-box;
+  /* OLD - Firefox 19- (buggy but mostly works) */
+  display: -moz-box;
+  /* TWEENER - IE 10 */
+  display: -ms-flexbox;
+  /* NEW - Chrome */
+  display: -webkit-flex;
+  /* NEW, Spec - Opera 12.1, Firefox 20+ */
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  margin-top: 0.8em;
+  margin-bottom: 1em;
+  height: 75px;
+  list-style: none;
+}
+
+.topbar-logo img, .topbar-network-logo img {
+  margin: 6px;
+}
+
+.topbar-logo img {
+  max-height: 95%;
+}
+
+.topbar-network-logo {
+  margin-left: 6px;
+}
+
+.topbar-network-logo img {
+  max-height: 50px;
+}
+
+.topbar-title {
+  margin: 0 0.8em 0 0.8em;
+  flex: 1;
+  color: #333;
+  font-size: 1.6em;
+  font-weight: 500;
+}
+
+#menu {
+  /* OLD - iOS 6-, Safari 3.1-6 */
+  display: -webkit-box;
+  /* OLD - Firefox 19- (buggy but mostly works) */
+  display: -moz-box;
+  /* TWEENER - IE 10 */
+  display: -ms-flexbox;
+  /* NEW - Chrome */
+  display: -webkit-flex;
+  /* NEW, Spec - Opera 12.1, Firefox 20+ */
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  list-style: none;
+  background-color: #0aa5ec;
+  padding: 0;
+  align-items: center;
+  margin: 0 0 1em;
+  position: relative;
+}
+
+#menu:after {
+  content: "";
+  /* empty but necessary */
+  position: absolute;
+  background-color: #0aa5ec;
+  height: 100%;
+  left: -50%;
+  width: 200%;
+  z-index: -1;
+}
+
+#menu li {
+  height: 100%;
+}
+
+#menu li.active {
+  background-color: #0aa5ec;
+}
+
+#menu li a {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 12px;
+  height: 26px;
+  color: #ffffff;
+  font-size: 14px;
+  text-align: center;
+  text-decoration: none;
+}
+
+#menu li.active a {
+  color: #555;
+}
+
+#menu li.dropdown-displayed a {
+  color: #555;
+}
+
+#menu li a:hover {
+  text-decoration: none;
+  color: #555;
+}
+
+#menu .caret {
+  margin-left: 5px;
+}
+
+#menu .dropdown.dropdown-displayed {
+  background-color: #0aa5ec;
+  color: #555;
+}
+
+#menu .dropdown-menu {
+  min-width: 180px;
+  white-space: nowrap;
+  background-color: #ffffff;
+  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
+}
+
+#menu .dropdown-menu li {
+  width: 100%;
+  padding: 0;
+}
+
+#menu .dropdown-menu li:hover {
+  background-color: #e6e6e6;
+}
+
+#menu .dropdown-menu li:hover a {
+  color: #555;
+}
+
+#menu .dropdown-menu li.active {
+  background-color: #0aa5ec;
+}
+
+#menu .dropdown-menu li.active > a {
+  color: #ffffff;
+}
+
+#menu .dropdown-menu a {
+  height: 14px;
+  padding: 8px 12px;
+  width: auto;
+  color: #555;
+  font-size: 14px;
+}
+
+.content {
+  flex: 1;
+  padding: 0 2em;
+  min-width: 600px;
+}
+
+.content h1, h2, h3, h4, h5, h6 {
+  font-weight: 500;
+  line-height: 1.1;
+}
+
+.content h1, h2 {
+  padding: 5px;
+}
+
+.content h1 {
+  color: #0aa5ec;
+  font-size: 1.6em;
+  font-weight: 500;
+}
+
+.content h2 {
+  color: #0aa5ec;
+  font-size: 1.6em;
+  font-weight: 500;
+}
+
+.content h3 {
+  color: #0aa5ec;
+  font-size: 1.2em;
+  font-weight: 500;
+}
+
+.content h4 {
+  color: #0aa5ec;
+  font-size: 1.2em;
+  font-weight: 500;
+}
+
+.content h5 {
+  color: #0aa5ec;
+  font-size: 1em;
+  font-weight: 500;
+}
+
+.content a {
+  color: #0aa5ec;
+}
+
+#footer {
+  margin-top: 40px;
+  position: relative;
+  height: 60px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+#footer::after {
+  content: "";
+  /* empty but necessary */
+  position: absolute;
+  background-image: linear-gradient(to bottom, #575757 0, #3d3d3d 100%);
+  background-repeat: repeat-x;
+  box-shadow: 0px -2px 10px 0px #656565;
+  height: 84px;
+  left: -50%;
+  width: 200%;
+  z-index: -1;
+  margin: 0;
+}
+
+.footer-navbar {
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  list-style: none;
+}
+
+.footer-navbar a {
+  color: #ffffff;
+  text-decoration: none;
+  font-weight: 700;
+  margin: 0 14px;
+  font-size: 14px;
+}
+
+.footer-navbar a:hover {
+  color: #a6a6a6;
+}
+
+footer .logo-ot {
+  margin-right: 20px;
+}
+
+.user-toolbar {
+  color: #666666;
+  font-size: 16px;
+  position: relative;
+  display: inline-block;
+}
+
+.user-toolbar-username {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  height: 45px;
+  max-height: 100%;
+}
+
+.user-toolbar .fa {
+  margin: auto 5px;
+}
+
+.user-toolbar a {
+  text-decoration: none;
+  color: #666666;
+}
+
+.user-toolbar ul {
+  list-style: none;
+}
+
+.user-toolbar .dropdown-menu {
+  min-width: 240px;
+  background-color: #ffffff;
+  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
+  right: 0;
+}
+.user-toolbar .dropdown-menu li {
+  height: 3.5em;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 0;
+}
+.user-toolbar .dropdown-menu li:hover {
+  background-color: #cccccc;
+}
+.user-toolbar .dropdown-menu a {
+  width: 100%;
+  padding: 12px 16px;
+}
+
+.user-toolbar .dropside-menu {
+  background-color: #0aa5ec;
+  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
+}
+
+#login-popup {
+  position: relative;
+  display: inline-block;
+  cursor: pointer;
+}
+
+/* The actual popup */
+#login-popup .popup-form {
+  visibility: hidden;
+  width: 240px;
+  background-color: #0aa5ec;
+  border-radius: 4px;
+  padding: 1em 1.6em;
+  position: absolute;
+  right: 0;
+  top: 1em;
+  z-index: 1;
+}
+
+/* Toggle this class when clicking on the popup container (hide and show the popup) */
+#login-popup .show {
+  visibility: visible;
+}
+
+#login-popup .popup-form {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+#login-popup .popup-form > input {
+  margin: 0.6em;
+}
+
+/* Error messages */
+.login-errormsg {
+  text-align: center;
+}
+
+.breadcrumb {
+  list-style: none;
+  display: flex;
+  flex-direction: row;
+  font-weight: bold;
+}
+
+.breadcrumb a {
+  color: #0aa5ec;
+}
+
+.breadcrumb li {
+  margin: 0 3px;
+}
+
+.breadcrumb li a {
+  margin: 0 3px;
+}
+
+.breadcrumb li::before {
+  /*content: "> ";*/
+  font-family: "Font Awesome 5 Free";
+  content: "";
+  color: #b8b8b9;
+}
+
+.breadcrumb li:first-child::before {
+  content: "";
+}
+
+.breadcrumb > li:last-child {
+  color: #737373;
+}
+
+.slick-track {
+  max-height: 380px;
+  overflow: hidden;
+}
+
+.slick-slide img {
+  max-width: initial;
+}
+
+.carousel .carousel-img:not(.slick-slide) {
+  width: 100%;
+  display: none;
+}
+
+.carousel .carousel-img:first-child:not(.slick-slide) {
+  display: inline;
+}
+
+.ot-box {
+  font-size: 0.8em;
+}
+
+.ot-box header {
+  background: #323232;
+  padding: 0.5em;
+  margin: 1em 0;
+}
+
+.ot-box header h3 {
+  color: #0aa5ec;
+  font-size: 1.2em;
+  font-weight: bold;
+  padding: 0;
+  margin: 0;
+}
+
+.ot-box a {
+  color: #0aa5ec;
+}
+
+.ot-box footer:not(:empty) {
+  border-top: solid 1px #4d4d4d;
+  margin: 0.5em 0;
+  padding: 0.5em;
+  font-size: 1.2em;
+}
+
+.ot-events {
+  margin: 1em 0;
+}
+
+.ot-events .event-card {
+  display: flex;
+  flex-direction: row;
+  margin-bottom: 0.5em;
+}
+
+.ot-events .event-card > .event-poster {
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+}
+
+.ot-events .event-card > .event-poster img {
+  margin: auto;
+  width: 75%;
+  height: auto;
+}
+
+.ot-events .event-card > .event-summary {
+  flex: 2;
+  display: flex;
+  flex-direction: column;
+  padding: 0.3em;
+}
+
+.ot-events .event-card > .event-summary .event-name {
+  font-weight: bold;
+  color: #393939;
+}
+
+.ot-events .event-card > .event-summary .event-date {
+  color: #666;
+}
+
+.ot-events .no-events p {
+  padding: 1em;
+}
+
+.ot-all-events {
+  display: flex;
+  flex-direction: row;
+}
+
+.ot-all-events .events-controls {
+  order: 1;
+  flex: 1;
+}
+
+.ot-all-events .events-results {
+  order: 0;
+  flex: 1;
+}
+
+.ot-all-events .events-controls, .events-results {
+  display: flex;
+  flex-direction: column;
+  margin: 0 1.5em;
+}
+
+.ot-all-events .event-search {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 2em;
+}
+
+.ot-all-events h3 {
+  font-size: 1.2em;
+  font-weight: bold;
+}
+
+.ot-all-events .event-search form {
+  display: flex;
+  flex-direction: column;
+}
+
+.ot-all-events .event-search form input, button {
+  margin-bottom: 1em;
+  line-height: 1.4em;
+  font-size: 1.1em;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  padding: 6px 12px;
+}
+
+.ot-all-events .event-search form button {
+  border: solid 2px #0aa5ec;
+  color: #0aa5ec;
+}
+
+.ot-all-events .event-search form button:hover {
+  background-color: #d8edf3;
+  cursor: pointer;
+}
+
+.ot-all-events #event-map {
+  height: 400px;
+  width: 100%;
+  align-self: flex-end;
+}
+
+.ot-all-events .event {
+  display: flex;
+  flex-direction: column;
+  border-bottom: solid 2px #323232;
+  border-radius: 4px;
+  height: 200px;
+  padding: 1em;
+  justify-content: space-around;
+}
+
+.ot-all-events .event-preview {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.ot-all-events .event-preview .event-poster {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.ot-all-events .event-preview .event-poster img {
+  width: auto;
+  max-width: 100%;
+  min-width: 40%;
+  height: auto;
+  margin-right: 4em;
+}
+
+.ot-all-events .event-preview .event-summary {
+  flex: 2;
+  display: flex;
+  flex-direction: column;
+}
+
+.ot-all-events .event-preview .event-summary > span {
+  margin-bottom: 0.5em;
+}
+
+.ot-all-events .event-preview .event-name {
+  font-size: 1.4em;
+  color: #333333;
+  font-weight: bold;
+}
+
+.ot-all-events .event-preview .event-loc-date {
+  font-size: 1.1em;
+  color: #4d4d4d;
+  font-weight: bold;
+}
+
+.ot-all-events .event-preview .event-description {
+  color: #4d4d4d;
+}
+
+.ot-all-events .event-see {
+  align-self: stretch;
+  padding: 0.4em 0.8em;
+  font-size: 1.1em;
+  margin-top: 0.4em;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+}
+
+.ot-all-events .event-see:hover {
+  text-decoration: none;
+  font-weight: bold;
+}
+
+.ot-show-event {
+  display: flex;
+  flex-direction: column;
+}
+
+.ot-show-event header {
+  display: flex;
+  flex-direction: row;
+  padding: 0.5em;
+  margin-bottom: 2em;
+  align-items: center;
+}
+
+.ot-show-event .event-name {
+  font-size: 1.8em;
+  font-weight: bold;
+  flex: 1;
+}
+
+.ot-show-event .go-back {
+  color: #0aa5ec;
+  font-weight: bold;
+  padding: 0.5em 0.7em;
+  border: solid 2px #0aa5ec;
+  border-radius: 6px;
+  margin: auto;
+}
+
+.ot-show-event .go-back:hover {
+  background-color: #d8edf3;
+  text-decoration: none;
+}
+
+.ot-show-event .event-content {
+  display: flex;
+  flex-direction: row;
+  margin-bottom: 2em;
+}
+
+.ot-show-event .event-content .event-poster {
+  flex: 1;
+}
+
+.ot-show-event .event-poster img {
+  width: auto;
+  max-width: 100%;
+  min-width: 40%;
+  height: auto;
+}
+
+.ot-show-event .event-summary {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.ot-show-event .event-description {
+  margin-bottom: 1em;
+  padding: 1em 0.5em;
+}
+
+.ot-show-event .event-infos {
+  border: none;
+  width: 94%;
+  margin: 0 3%;
+  padding-top: 1em;
+}
+
+.ot-show-event .event-infos tr {
+  background-color: #ffdd99;
+}
+
+.ot-show-event .event-infos tr:nth-child(odd) {
+  background-color: #ffd480;
+}
+
+.ot-show-event .event-content .event-infos td {
+  padding: 0.8em 1.6em;
+}
+
+.ot-show-event .event-content .event-infos tr td:first-child {
+  font-weight: bold;
+  color: #2E2D2D;
+}
+
+.ot-show-event #event-map {
+  height: 400px;
+  width: 100%;
+  align-self: center;
+}
+
+.ot-donors .donor-list {
+  display: flex;
+  flex-direction: column;
+}
+
+.ot-donors .donor-card {
+  height: 80px;
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  align-content: center;
+  justify-content: center;
+  margin-bottom: 1em;
+}
+
+.ot-donors .donor-card img {
+  width: auto;
+  max-height: 100%;
+  max-width: 95%;
+  margin: auto;
+  /* Style the alt text */
+  font-size: 1.1em;
+}
+
+.frame-type-menu_sitemap {
+  font-size: 16px;
+  font-weight: bold;
+}
+
+.frame-type-menu_sitemap > ul {
+  padding-left: 1.5em;
+  list-style: none;
+}
+
+.frame-type-menu_sitemap li ul {
+  list-style: disc;
+}
+
+.frame-type-menu_sitemap li ul li ul {
+  list-style: square;
+}
+
+.frame-type-menu_sitemap li {
+  padding-top: 0.5em;
+  padding-bottom: 0.5em;
+  color: #979797;
+}
+
+form .row {
+  display: flex;
+  flex-direction: row;
+}
+
+form .row > div {
+  padding-left: 2em;
+  flex: 1;
+}
+
+form .row > div:first-child {
+  padding-left: 0;
+}
+
+.form-group {
+  margin-bottom: 18px;
+}
+
+.control-label {
+  color: 4facc6;
+  display: inline-block;
+  max-width: 100%;
+  margin-bottom: 10px;
+  font-weight: 700;
+}
+
+div.input {
+  display: flex;
+  flex-direction: column;
+}
+
+.form-control {
+  height: 28px;
+  box-sizing: content-box;
+  padding: 6px 12px;
+  font-size: 14px;
+  line-height: 1.2em;
+  color: #555;
+  background-color: #fff;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}
+
+textarea.form-control {
+  padding: 12px 12px;
+  height: 180px;
+}
+
+.form-control:focus {
+  border: 2px solid #0aa5ec;
+}
+
+.form-control:invalid {
+  box-shadow: none;
+}
+
+div.input .error {
+  color: #e60000;
+}
+
+div.input span.error {
+  margin-top: 5px;
+}
+
+span.submit {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+}
+
+form button[type=submit] {
+  width: 120px;
+}
+
+form button[type=submit]:hover {
+  background-color: #e6e6e6;
+  cursor: pointer;
+}
+
+::-webkit-input-placeholder {
+  color: #8c8c8c !important;
+  opacity: 1;
+}
+
+:-moz-placeholder {
+  color: #8c8c8c !important;
+  opacity: 1;
+}
+
+::-moz-placeholder {
+  color: #8c8c8c !important;
+  opacity: 1;
+}
+
+:-ms-input-placeholder {
+  color: #8c8c8c !important;
+  opacity: 1;
+}
+
+.contact-form {
+  width: 80%;
+  margin: auto;
+  min-width: 600px;
+}
+
+.contact-form-info {
+  font-size: 12px;
+  padding: 0 5px 10px 5px;
+  font-style: italic;
+  color: #4d4d4d;
+}
+
+.faq-item .content {
+  color: #262626;
+  padding: 0 2em;
+  margin: 0 0.5em 3em 0.5em;
+  border-left: solid 2px #0aa5ec;
+}
+
+.fce-2col {
+  display: flex;
+  flex-direction: row;
+}
+
+.fce-2col .col {
+  flex: 1;
+  margin-right: 2em;
+}
+
+.fce-2col .col:last-child {
+  margin-right: 0;
+}
+
+/*# sourceMappingURL=theme-light-blue.css.map */

ot_templating/Resources/Public/assets/style/theme-light-blue.scss

@@ -0,0 +1,38 @@
+// Light-Blue theme (default value)
+$main-color: #0aa5ec;
+
+@use 'style' with (
+  $menu-background-color: $main-color,
+  $menu-background-color-hovered: $main-color,
+  $menu-background-color-current: $main-color,
+  $menu-font-color: #ffffff,
+  $menu-font-color-hovered: #555,
+
+  $menu-dropdown-background-color: #ffffff,
+  $menu-dropdown-background-color-hovered: #e6e6e6,
+  $menu-dropdown-background-color-current: $main-color,
+  $menu-dropdown-font-color: #555,
+  $menu-dropdown-font-color-hovered: #555,
+  $menu-dropdown-font-color-current: #ffffff,
+
+  $user-toolbar-color: #666666,
+  $user-toolbar-dropdown-background-color: #ffffff,
+  $user-toolbar-popup-background-color: $main-color,
+
+  $breadcrumb-current-color: #737373,
+  $breadcrumb-a-color: $main-color,
+
+  $otbox-header-background-color: #323232,
+  $otbox-header-font-color: $main-color,
+
+  $content-h1-color: $main-color,
+  $content-h2-color: $main-color,
+  $content-h3-color: $main-color,
+  $content-h4-color: $main-color,
+  $content-h5-color: $main-color,
+
+  $content-a-color: $main-color,
+
+  $forms-label-color: 4facc6,
+  $forms-control-focused-border-color: $main-color,
+);

ot_templating/Resources/Public/assets/style/theme-light-red.css

@@ -0,0 +1,960 @@
+@charset "UTF-8";
+body {
+  overflow-x: hidden;
+}
+
+a {
+  text-decoration: none;
+}
+
+.ui-datepicker {
+  z-index: 10000 !important;
+}
+
+.alert {
+  color: #e60000;
+  font-weight: bold;
+}
+
+body {
+  max-width: 1170px;
+  margin: auto;
+  font-family: Liberation Sans, Arial;
+  font-size: 14px;
+}
+
+#header {
+  align-items: center;
+  margin-top: 0.4em;
+  margin-bottom: 1.2em;
+}
+
+.main {
+  /* OLD - iOS 6-, Safari 3.1-6 */
+  display: -webkit-box;
+  /* OLD - Firefox 19- (buggy but mostly works) */
+  display: -moz-box;
+  /* TWEENER - IE 10 */
+  display: -ms-flexbox;
+  /* NEW - Chrome */
+  display: -webkit-flex;
+  /* NEW, Spec - Opera 12.1, Firefox 20+ */
+  display: flex;
+  flex-direction: row;
+}
+
+.leftcol {
+  width: 15%;
+  min-width: 185px;
+}
+
+.rightcol {
+  width: 15%;
+  min-width: 185px;
+}
+
+.dropdown {
+  position: relative;
+  display: inline-block;
+}
+
+ul.dropdown-menu {
+  display: none;
+  position: absolute;
+  z-index: 1;
+  margin: auto 0;
+  padding: 0;
+  list-style: none;
+}
+
+ul.dropdown-menu li {
+  padding: 12px 16px;
+}
+
+ul.dropdown-right {
+  top: 0;
+  left: 100%;
+}
+
+ul.dropdown-left {
+  top: 0;
+  right: 100%;
+}
+
+#topbar {
+  /* OLD - iOS 6-, Safari 3.1-6 */
+  display: -webkit-box;
+  /* OLD - Firefox 19- (buggy but mostly works) */
+  display: -moz-box;
+  /* TWEENER - IE 10 */
+  display: -ms-flexbox;
+  /* NEW - Chrome */
+  display: -webkit-flex;
+  /* NEW, Spec - Opera 12.1, Firefox 20+ */
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  margin-top: 0.8em;
+  margin-bottom: 1em;
+  height: 75px;
+  list-style: none;
+}
+
+.topbar-logo img, .topbar-network-logo img {
+  margin: 6px;
+}
+
+.topbar-logo img {
+  max-height: 95%;
+}
+
+.topbar-network-logo {
+  margin-left: 6px;
+}
+
+.topbar-network-logo img {
+  max-height: 50px;
+}
+
+.topbar-title {
+  margin: 0 0.8em 0 0.8em;
+  flex: 1;
+  color: #333;
+  font-size: 1.6em;
+  font-weight: 500;
+}
+
+#menu {
+  /* OLD - iOS 6-, Safari 3.1-6 */
+  display: -webkit-box;
+  /* OLD - Firefox 19- (buggy but mostly works) */
+  display: -moz-box;
+  /* TWEENER - IE 10 */
+  display: -ms-flexbox;
+  /* NEW - Chrome */
+  display: -webkit-flex;
+  /* NEW, Spec - Opera 12.1, Firefox 20+ */
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  list-style: none;
+  background-color: #dd453f;
+  padding: 0;
+  align-items: center;
+  margin: 0 0 1em;
+  position: relative;
+}
+
+#menu:after {
+  content: "";
+  /* empty but necessary */
+  position: absolute;
+  background-color: #dd453f;
+  height: 100%;
+  left: -50%;
+  width: 200%;
+  z-index: -1;
+}
+
+#menu li {
+  height: 100%;
+}
+
+#menu li.active {
+  background-color: #dd453f;
+}
+
+#menu li a {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 12px;
+  height: 26px;
+  color: #ffffff;
+  font-size: 14px;
+  text-align: center;
+  text-decoration: none;
+}
+
+#menu li.active a {
+  color: #555;
+}
+
+#menu li.dropdown-displayed a {
+  color: #555;
+}
+
+#menu li a:hover {
+  text-decoration: none;
+  color: #555;
+}
+
+#menu .caret {
+  margin-left: 5px;
+}
+
+#menu .dropdown.dropdown-displayed {
+  background-color: #dd453f;
+  color: #555;
+}
+
+#menu .dropdown-menu {
+  min-width: 180px;
+  white-space: nowrap;
+  background-color: #ffffff;
+  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
+}
+
+#menu .dropdown-menu li {
+  width: 100%;
+  padding: 0;
+}
+
+#menu .dropdown-menu li:hover {
+  background-color: #e6e6e6;
+}
+
+#menu .dropdown-menu li:hover a {
+  color: #555;
+}
+
+#menu .dropdown-menu li.active {
+  background-color: #dd453f;
+}
+
+#menu .dropdown-menu li.active > a {
+  color: #ffffff;
+}
+
+#menu .dropdown-menu a {
+  height: 14px;
+  padding: 8px 12px;
+  width: auto;
+  color: #555;
+  font-size: 14px;
+}
+
+.content {
+  flex: 1;
+  padding: 0 2em;
+  min-width: 600px;
+}
+
+.content h1, h2, h3, h4, h5, h6 {
+  font-weight: 500;
+  line-height: 1.1;
+}
+
+.content h1, h2 {
+  padding: 5px;
+}
+
+.content h1 {
+  color: #dd453f;
+  font-size: 1.6em;
+  font-weight: 500;
+}
+
+.content h2 {
+  color: #dd453f;
+  font-size: 1.6em;
+  font-weight: 500;
+}
+
+.content h3 {
+  color: #dd453f;
+  font-size: 1.2em;
+  font-weight: 500;
+}
+
+.content h4 {
+  color: #dd453f;
+  font-size: 1.2em;
+  font-weight: 500;
+}
+
+.content h5 {
+  color: #dd453f;
+  font-size: 1em;
+  font-weight: 500;
+}
+
+.content a {
+  color: #dd453f;
+}
+
+#footer {
+  margin-top: 40px;
+  position: relative;
+  height: 60px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+#footer::after {
+  content: "";
+  /* empty but necessary */
+  position: absolute;
+  background-image: linear-gradient(to bottom, #575757 0, #3d3d3d 100%);
+  background-repeat: repeat-x;
+  box-shadow: 0px -2px 10px 0px #656565;
+  height: 84px;
+  left: -50%;
+  width: 200%;
+  z-index: -1;
+  margin: 0;
+}
+
+.footer-navbar {
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  list-style: none;
+}
+
+.footer-navbar a {
+  color: #ffffff;
+  text-decoration: none;
+  font-weight: 700;
+  margin: 0 14px;
+  font-size: 14px;
+}
+
+.footer-navbar a:hover {
+  color: #a6a6a6;
+}
+
+footer .logo-ot {
+  margin-right: 20px;
+}
+
+.user-toolbar {
+  color: #666666;
+  font-size: 16px;
+  position: relative;
+  display: inline-block;
+}
+
+.user-toolbar-username {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  height: 45px;
+  max-height: 100%;
+}
+
+.user-toolbar .fa {
+  margin: auto 5px;
+}
+
+.user-toolbar a {
+  text-decoration: none;
+  color: #666666;
+}
+
+.user-toolbar ul {
+  list-style: none;
+}
+
+.user-toolbar .dropdown-menu {
+  min-width: 240px;
+  background-color: #ffffff;
+  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
+  right: 0;
+}
+.user-toolbar .dropdown-menu li {
+  height: 3.5em;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 0;
+}
+.user-toolbar .dropdown-menu li:hover {
+  background-color: #cccccc;
+}
+.user-toolbar .dropdown-menu a {
+  width: 100%;
+  padding: 12px 16px;
+}
+
+.user-toolbar .dropside-menu {
+  background-color: #dd453f;
+  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
+}
+
+#login-popup {
+  position: relative;
+  display: inline-block;
+  cursor: pointer;
+}
+
+/* The actual popup */
+#login-popup .popup-form {
+  visibility: hidden;
+  width: 240px;
+  background-color: #dd453f;
+  border-radius: 4px;
+  padding: 1em 1.6em;
+  position: absolute;
+  right: 0;
+  top: 1em;
+  z-index: 1;
+}
+
+/* Toggle this class when clicking on the popup container (hide and show the popup) */
+#login-popup .show {
+  visibility: visible;
+}
+
+#login-popup .popup-form {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+#login-popup .popup-form > input {
+  margin: 0.6em;
+}
+
+/* Error messages */
+.login-errormsg {
+  text-align: center;
+}
+
+.breadcrumb {
+  list-style: none;
+  display: flex;
+  flex-direction: row;
+  font-weight: bold;
+}
+
+.breadcrumb a {
+  color: #dd453f;
+}
+
+.breadcrumb li {
+  margin: 0 3px;
+}
+
+.breadcrumb li a {
+  margin: 0 3px;
+}
+
+.breadcrumb li::before {
+  /*content: "> ";*/
+  font-family: "Font Awesome 5 Free";
+  content: "";
+  color: #b8b8b9;
+}
+
+.breadcrumb li:first-child::before {
+  content: "";
+}
+
+.breadcrumb > li:last-child {
+  color: #737373;
+}
+
+.slick-track {
+  max-height: 380px;
+  overflow: hidden;
+}
+
+.slick-slide img {
+  max-width: initial;
+}
+
+.carousel .carousel-img:not(.slick-slide) {
+  width: 100%;
+  display: none;
+}
+
+.carousel .carousel-img:first-child:not(.slick-slide) {
+  display: inline;
+}
+
+.ot-box {
+  font-size: 0.8em;
+}
+
+.ot-box header {
+  background: #323232;
+  padding: 0.5em;
+  margin: 1em 0;
+}
+
+.ot-box header h3 {
+  color: #dd453f;
+  font-size: 1.2em;
+  font-weight: bold;
+  padding: 0;
+  margin: 0;
+}
+
+.ot-box a {
+  color: #dd453f;
+}
+
+.ot-box footer:not(:empty) {
+  border-top: solid 1px #4d4d4d;
+  margin: 0.5em 0;
+  padding: 0.5em;
+  font-size: 1.2em;
+}
+
+.ot-events {
+  margin: 1em 0;
+}
+
+.ot-events .event-card {
+  display: flex;
+  flex-direction: row;
+  margin-bottom: 0.5em;
+}
+
+.ot-events .event-card > .event-poster {
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+}
+
+.ot-events .event-card > .event-poster img {
+  margin: auto;
+  width: 75%;
+  height: auto;
+}
+
+.ot-events .event-card > .event-summary {
+  flex: 2;
+  display: flex;
+  flex-direction: column;
+  padding: 0.3em;
+}
+
+.ot-events .event-card > .event-summary .event-name {
+  font-weight: bold;
+  color: #393939;
+}
+
+.ot-events .event-card > .event-summary .event-date {
+  color: #666;
+}
+
+.ot-events .no-events p {
+  padding: 1em;
+}
+
+.ot-all-events {
+  display: flex;
+  flex-direction: row;
+}
+
+.ot-all-events .events-controls {
+  order: 1;
+  flex: 1;
+}
+
+.ot-all-events .events-results {
+  order: 0;
+  flex: 1;
+}
+
+.ot-all-events .events-controls, .events-results {
+  display: flex;
+  flex-direction: column;
+  margin: 0 1.5em;
+}
+
+.ot-all-events .event-search {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 2em;
+}
+
+.ot-all-events h3 {
+  font-size: 1.2em;
+  font-weight: bold;
+}
+
+.ot-all-events .event-search form {
+  display: flex;
+  flex-direction: column;
+}
+
+.ot-all-events .event-search form input, button {
+  margin-bottom: 1em;
+  line-height: 1.4em;
+  font-size: 1.1em;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  padding: 6px 12px;
+}
+
+.ot-all-events .event-search form button {
+  border: solid 2px #dd453f;
+  color: #dd453f;
+}
+
+.ot-all-events .event-search form button:hover {
+  background-color: #d8edf3;
+  cursor: pointer;
+}
+
+.ot-all-events #event-map {
+  height: 400px;
+  width: 100%;
+  align-self: flex-end;
+}
+
+.ot-all-events .event {
+  display: flex;
+  flex-direction: column;
+  border-bottom: solid 2px #323232;
+  border-radius: 4px;
+  height: 200px;
+  padding: 1em;
+  justify-content: space-around;
+}
+
+.ot-all-events .event-preview {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.ot-all-events .event-preview .event-poster {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.ot-all-events .event-preview .event-poster img {
+  width: auto;
+  max-width: 100%;
+  min-width: 40%;
+  height: auto;
+  margin-right: 4em;
+}
+
+.ot-all-events .event-preview .event-summary {
+  flex: 2;
+  display: flex;
+  flex-direction: column;
+}
+
+.ot-all-events .event-preview .event-summary > span {
+  margin-bottom: 0.5em;
+}
+
+.ot-all-events .event-preview .event-name {
+  font-size: 1.4em;
+  color: #333333;
+  font-weight: bold;
+}
+
+.ot-all-events .event-preview .event-loc-date {
+  font-size: 1.1em;
+  color: #4d4d4d;
+  font-weight: bold;
+}
+
+.ot-all-events .event-preview .event-description {
+  color: #4d4d4d;
+}
+
+.ot-all-events .event-see {
+  align-self: stretch;
+  padding: 0.4em 0.8em;
+  font-size: 1.1em;
+  margin-top: 0.4em;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+}
+
+.ot-all-events .event-see:hover {
+  text-decoration: none;
+  font-weight: bold;
+}
+
+.ot-show-event {
+  display: flex;
+  flex-direction: column;
+}
+
+.ot-show-event header {
+  display: flex;
+  flex-direction: row;
+  padding: 0.5em;
+  margin-bottom: 2em;
+  align-items: center;
+}
+
+.ot-show-event .event-name {
+  font-size: 1.8em;
+  font-weight: bold;
+  flex: 1;
+}
+
+.ot-show-event .go-back {
+  color: #dd453f;
+  font-weight: bold;
+  padding: 0.5em 0.7em;
+  border: solid 2px #dd453f;
+  border-radius: 6px;
+  margin: auto;
+}
+
+.ot-show-event .go-back:hover {
+  background-color: #d8edf3;
+  text-decoration: none;
+}
+
+.ot-show-event .event-content {
+  display: flex;
+  flex-direction: row;
+  margin-bottom: 2em;
+}
+
+.ot-show-event .event-content .event-poster {
+  flex: 1;
+}
+
+.ot-show-event .event-poster img {
+  width: auto;
+  max-width: 100%;
+  min-width: 40%;
+  height: auto;
+}
+
+.ot-show-event .event-summary {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.ot-show-event .event-description {
+  margin-bottom: 1em;
+  padding: 1em 0.5em;
+}
+
+.ot-show-event .event-infos {
+  border: none;
+  width: 94%;
+  margin: 0 3%;
+  padding-top: 1em;
+}
+
+.ot-show-event .event-infos tr {
+  background-color: #ffdd99;
+}
+
+.ot-show-event .event-infos tr:nth-child(odd) {
+  background-color: #ffd480;
+}
+
+.ot-show-event .event-content .event-infos td {
+  padding: 0.8em 1.6em;
+}
+
+.ot-show-event .event-content .event-infos tr td:first-child {
+  font-weight: bold;
+  color: #2E2D2D;
+}
+
+.ot-show-event #event-map {
+  height: 400px;
+  width: 100%;
+  align-self: center;
+}
+
+.ot-donors .donor-list {
+  display: flex;
+  flex-direction: column;
+}
+
+.ot-donors .donor-card {
+  height: 80px;
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  align-content: center;
+  justify-content: center;
+  margin-bottom: 1em;
+}
+
+.ot-donors .donor-card img {
+  width: auto;
+  max-height: 100%;
+  max-width: 95%;
+  margin: auto;
+  /* Style the alt text */
+  font-size: 1.1em;
+}
+
+.frame-type-menu_sitemap {
+  font-size: 16px;
+  font-weight: bold;
+}
+
+.frame-type-menu_sitemap > ul {
+  padding-left: 1.5em;
+  list-style: none;
+}
+
+.frame-type-menu_sitemap li ul {
+  list-style: disc;
+}
+
+.frame-type-menu_sitemap li ul li ul {
+  list-style: square;
+}
+
+.frame-type-menu_sitemap li {
+  padding-top: 0.5em;
+  padding-bottom: 0.5em;
+  color: #979797;
+}
+
+form .row {
+  display: flex;
+  flex-direction: row;
+}
+
+form .row > div {
+  padding-left: 2em;
+  flex: 1;
+}
+
+form .row > div:first-child {
+  padding-left: 0;
+}
+
+.form-group {
+  margin-bottom: 18px;
+}
+
+.control-label {
+  color: 4facc6;
+  display: inline-block;
+  max-width: 100%;
+  margin-bottom: 10px;
+  font-weight: 700;
+}
+
+div.input {
+  display: flex;
+  flex-direction: column;
+}
+
+.form-control {
+  height: 28px;
+  box-sizing: content-box;
+  padding: 6px 12px;
+  font-size: 14px;
+  line-height: 1.2em;
+  color: #555;
+  background-color: #fff;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}
+
+textarea.form-control {
+  padding: 12px 12px;
+  height: 180px;
+}
+
+.form-control:focus {
+  border: 2px solid #dd453f;
+}
+
+.form-control:invalid {
+  box-shadow: none;
+}
+
+div.input .error {
+  color: #e60000;
+}
+
+div.input span.error {
+  margin-top: 5px;
+}
+
+span.submit {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+}
+
+form button[type=submit] {
+  width: 120px;
+}
+
+form button[type=submit]:hover {
+  background-color: #e6e6e6;
+  cursor: pointer;
+}
+
+::-webkit-input-placeholder {
+  color: #8c8c8c !important;
+  opacity: 1;
+}
+
+:-moz-placeholder {
+  color: #8c8c8c !important;
+  opacity: 1;
+}
+
+::-moz-placeholder {
+  color: #8c8c8c !important;
+  opacity: 1;
+}
+
+:-ms-input-placeholder {
+  color: #8c8c8c !important;
+  opacity: 1;
+}
+
+.contact-form {
+  width: 80%;
+  margin: auto;
+  min-width: 600px;
+}
+
+.contact-form-info {
+  font-size: 12px;
+  padding: 0 5px 10px 5px;
+  font-style: italic;
+  color: #4d4d4d;
+}
+
+.faq-item .content {
+  color: #262626;
+  padding: 0 2em;
+  margin: 0 0.5em 3em 0.5em;
+  border-left: solid 2px #dd453f;
+}
+
+.fce-2col {
+  display: flex;
+  flex-direction: row;
+}
+
+.fce-2col .col {
+  flex: 1;
+  margin-right: 2em;
+}
+
+.fce-2col .col:last-child {
+  margin-right: 0;
+}
+
+/*# sourceMappingURL=theme-light-red.css.map */

ot_templating/Resources/Public/assets/style/theme-light-red.scss

@@ -0,0 +1,38 @@
+// Red Theme
+$main-color: #dd453f;
+
+@use 'style' with (
+  $menu-background-color: $main-color,
+  $menu-background-color-hovered: $main-color,
+  $menu-background-color-current: $main-color,
+  $menu-font-color: #ffffff,
+  $menu-font-color-hovered: #555,
+
+  $menu-dropdown-background-color: #ffffff,
+  $menu-dropdown-background-color-hovered: #e6e6e6,
+  $menu-dropdown-background-color-current: $main-color,
+  $menu-dropdown-font-color: #555,
+  $menu-dropdown-font-color-hovered: #555,
+  $menu-dropdown-font-color-current: #ffffff,
+
+  $user-toolbar-color: #666666,
+  $user-toolbar-dropdown-background-color: #ffffff,
+  $user-toolbar-popup-background-color: $main-color,
+
+  $breadcrumb-current-color: #737373,
+  $breadcrumb-a-color: $main-color,
+
+  $otbox-header-background-color: #323232,
+  $otbox-header-font-color: $main-color,
+
+  $content-h1-color: $main-color,
+  $content-h2-color: $main-color,
+  $content-h3-color: $main-color,
+  $content-h4-color: $main-color,
+  $content-h5-color: $main-color,
+
+  $content-a-color: $main-color,
+
+  $forms-label-color: 4facc6,
+  $forms-control-focused-border-color: $main-color,
+);

ot_templating/Resources/Public/assets/style/theme-orange.css

@@ -139,7 +139,7 @@ ul.dropdown-left {
   flex-direction: row;
   flex-wrap: wrap;
   list-style: none;
-  background-color: #ff6200;
+  background-color: #e4611b;
   padding: 0;
   align-items: center;
   margin: 0 0 1em;
@@ -150,7 +150,7 @@ ul.dropdown-left {
   content: "";
   /* empty but necessary */
   position: absolute;
-  background-color: #ff6200;
+  background-color: #e4611b;
   height: 100%;
   left: -50%;
   width: 200%;
@@ -162,7 +162,7 @@ ul.dropdown-left {
 }
 
 #menu li.active {
-  background-color: #ff6200;
+  background-color: #e4611b;
 }
 
 #menu li a {
@@ -195,7 +195,7 @@ ul.dropdown-left {
 }
 
 #menu .dropdown.dropdown-displayed {
-  background-color: #ff6200;
+  background-color: #e4611b;
   color: #555;
 }
 
@@ -220,7 +220,7 @@ ul.dropdown-left {
 }
 
 #menu .dropdown-menu li.active {
-  background-color: #ff6200;
+  background-color: #e4611b;
 }
 
 #menu .dropdown-menu li.active > a {
@@ -251,37 +251,37 @@ ul.dropdown-left {
 }
 
 .content h1 {
-  color: #ff6200;
+  color: #e4611b;
   font-size: 1.6em;
   font-weight: 500;
 }
 
 .content h2 {
-  color: #ff6200;
+  color: #e4611b;
   font-size: 1.6em;
   font-weight: 500;
 }
 
 .content h3 {
-  color: #ff6200;
+  color: #e4611b;
   font-size: 1.2em;
   font-weight: 500;
 }
 
 .content h4 {
-  color: #ff6200;
+  color: #e4611b;
   font-size: 1.2em;
   font-weight: 500;
 }
 
 .content h5 {
-  color: #ff6200;
+  color: #e4611b;
   font-size: 1em;
   font-weight: 500;
 }
 
 .content a {
-  color: #ff6200;
+  color: #e4611b;
 }
 
 #footer {
@@ -381,7 +381,7 @@ footer .logo-ot {
 }
 
 .user-toolbar .dropside-menu {
-  background-color: #ff6200;
+  background-color: #e4611b;
   box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
 }
 
@@ -395,7 +395,7 @@ footer .logo-ot {
 #login-popup .popup-form {
   visibility: hidden;
   width: 240px;
-  background-color: #ff6200;
+  background-color: #e4611b;
   border-radius: 4px;
   padding: 1em 1.6em;
   position: absolute;
@@ -433,7 +433,7 @@ footer .logo-ot {
 }
 
 .breadcrumb a {
-  color: #ff6200;
+  color: #e4611b;
 }
 
 .breadcrumb li {
@@ -488,7 +488,7 @@ footer .logo-ot {
 }
 
 .ot-box header h3 {
-  color: #ff6200;
+  color: #e4611b;
   font-size: 1.2em;
   font-weight: bold;
   padding: 0;
@@ -496,7 +496,7 @@ footer .logo-ot {
 }
 
 .ot-box a {
-  color: #ff6200;
+  color: #e4611b;
 }
 
 .ot-box footer:not(:empty) {
@@ -597,8 +597,8 @@ footer .logo-ot {
 }
 
 .ot-all-events .event-search form button {
-  border: solid 2px #ff6200;
-  color: #ff6200;
+  border: solid 2px #e4611b;
+  color: #e4611b;
 }
 
 .ot-all-events .event-search form button:hover {
@@ -705,10 +705,10 @@ footer .logo-ot {
 }
 
 .ot-show-event .go-back {
-  color: #ff6200;
+  color: #e4611b;
   font-weight: bold;
   padding: 0.5em 0.7em;
-  border: solid 2px #ff6200;
+  border: solid 2px #e4611b;
   border-radius: 6px;
   margin: auto;
 }
@@ -873,7 +873,7 @@ textarea.form-control {
 }
 
 .form-control:focus {
-  border: 2px solid #ff6200;
+  border: 2px solid #e4611b;
 }
 
 .form-control:invalid {
@@ -940,7 +940,7 @@ form button[type=submit]:hover {
   color: #262626;
   padding: 0 2em;
   margin: 0 0.5em 3em 0.5em;
-  border-left: solid 2px #ff6200;
+  border-left: solid 2px #e4611b;
 }
 
 .fce-2col {

ot_templating/Resources/Public/assets/style/theme-orange.scss

@@ -1,36 +1,38 @@
 // Orange theme
+$main-color: #e4611b;
+
 @use 'style' with (
-  $menu-background-color: #ff6200,
-  $menu-background-color-hovered: #ff6200,
-  $menu-background-color-current: #ff6200,
+  $menu-background-color: $main-color,
+  $menu-background-color-hovered: $main-color,
+  $menu-background-color-current: $main-color,
   $menu-font-color: #ffffff,
   $menu-font-color-hovered: #555,
 
   $menu-dropdown-background-color: #ffffff,
   $menu-dropdown-background-color-hovered: #e6e6e6,
-  $menu-dropdown-background-color-current: #ff6200,
+  $menu-dropdown-background-color-current: $main-color,
   $menu-dropdown-font-color: #555,
   $menu-dropdown-font-color-hovered: #555,
   $menu-dropdown-font-color-current: #ffffff,
 
   $user-toolbar-color: #666666,
   $user-toolbar-dropdown-background-color: #ffffff,
-  $user-toolbar-popup-background-color: #ff6200,
+  $user-toolbar-popup-background-color: $main-color,
 
   $breadcrumb-current-color: #737373,
-  $breadcrumb-a-color: #ff6200,
+  $breadcrumb-a-color: $main-color,
 
   $otbox-header-background-color: #323232,
-  $otbox-header-font-color: #ff6200,
+  $otbox-header-font-color: $main-color,
 
-  $content-h1-color: #ff6200,
-  $content-h2-color: #ff6200,
-  $content-h3-color: #ff6200,
-  $content-h4-color: #ff6200,
-  $content-h5-color: #ff6200,
+  $content-h1-color: $main-color,
+  $content-h2-color: $main-color,
+  $content-h3-color: $main-color,
+  $content-h4-color: $main-color,
+  $content-h5-color: $main-color,
 
-  $content-a-color: #ff6200,
+  $content-a-color: $main-color,
 
   $forms-label-color: 4facc6,
-  $forms-control-focused-border-color: #ff6200,
+  $forms-control-focused-border-color: $main-color,
 );

ot_templating/Resources/Public/assets/style/theme-purple.css

@@ -0,0 +1,960 @@
+@charset "UTF-8";
+body {
+  overflow-x: hidden;
+}
+
+a {
+  text-decoration: none;
+}
+
+.ui-datepicker {
+  z-index: 10000 !important;
+}
+
+.alert {
+  color: #e60000;
+  font-weight: bold;
+}
+
+body {
+  max-width: 1170px;
+  margin: auto;
+  font-family: Liberation Sans, Arial;
+  font-size: 14px;
+}
+
+#header {
+  align-items: center;
+  margin-top: 0.4em;
+  margin-bottom: 1.2em;
+}
+
+.main {
+  /* OLD - iOS 6-, Safari 3.1-6 */
+  display: -webkit-box;
+  /* OLD - Firefox 19- (buggy but mostly works) */
+  display: -moz-box;
+  /* TWEENER - IE 10 */
+  display: -ms-flexbox;
+  /* NEW - Chrome */
+  display: -webkit-flex;
+  /* NEW, Spec - Opera 12.1, Firefox 20+ */
+  display: flex;
+  flex-direction: row;
+}
+
+.leftcol {
+  width: 15%;
+  min-width: 185px;
+}
+
+.rightcol {
+  width: 15%;
+  min-width: 185px;
+}
+
+.dropdown {
+  position: relative;
+  display: inline-block;
+}
+
+ul.dropdown-menu {
+  display: none;
+  position: absolute;
+  z-index: 1;
+  margin: auto 0;
+  padding: 0;
+  list-style: none;
+}
+
+ul.dropdown-menu li {
+  padding: 12px 16px;
+}
+
+ul.dropdown-right {
+  top: 0;
+  left: 100%;
+}
+
+ul.dropdown-left {
+  top: 0;
+  right: 100%;
+}
+
+#topbar {
+  /* OLD - iOS 6-, Safari 3.1-6 */
+  display: -webkit-box;
+  /* OLD - Firefox 19- (buggy but mostly works) */
+  display: -moz-box;
+  /* TWEENER - IE 10 */
+  display: -ms-flexbox;
+  /* NEW - Chrome */
+  display: -webkit-flex;
+  /* NEW, Spec - Opera 12.1, Firefox 20+ */
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  margin-top: 0.8em;
+  margin-bottom: 1em;
+  height: 75px;
+  list-style: none;
+}
+
+.topbar-logo img, .topbar-network-logo img {
+  margin: 6px;
+}
+
+.topbar-logo img {
+  max-height: 95%;
+}
+
+.topbar-network-logo {
+  margin-left: 6px;
+}
+
+.topbar-network-logo img {
+  max-height: 50px;
+}
+
+.topbar-title {
+  margin: 0 0.8em 0 0.8em;
+  flex: 1;
+  color: #333;
+  font-size: 1.6em;
+  font-weight: 500;
+}
+
+#menu {
+  /* OLD - iOS 6-, Safari 3.1-6 */
+  display: -webkit-box;
+  /* OLD - Firefox 19- (buggy but mostly works) */
+  display: -moz-box;
+  /* TWEENER - IE 10 */
+  display: -ms-flexbox;
+  /* NEW - Chrome */
+  display: -webkit-flex;
+  /* NEW, Spec - Opera 12.1, Firefox 20+ */
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  list-style: none;
+  background-color: #a5377e;
+  padding: 0;
+  align-items: center;
+  margin: 0 0 1em;
+  position: relative;
+}
+
+#menu:after {
+  content: "";
+  /* empty but necessary */
+  position: absolute;
+  background-color: #a5377e;
+  height: 100%;
+  left: -50%;
+  width: 200%;
+  z-index: -1;
+}
+
+#menu li {
+  height: 100%;
+}
+
+#menu li.active {
+  background-color: #a5377e;
+}
+
+#menu li a {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 12px;
+  height: 26px;
+  color: #ffffff;
+  font-size: 14px;
+  text-align: center;
+  text-decoration: none;
+}
+
+#menu li.active a {
+  color: #555;
+}
+
+#menu li.dropdown-displayed a {
+  color: #555;
+}
+
+#menu li a:hover {
+  text-decoration: none;
+  color: #555;
+}
+
+#menu .caret {
+  margin-left: 5px;
+}
+
+#menu .dropdown.dropdown-displayed {
+  background-color: #a5377e;
+  color: #555;
+}
+
+#menu .dropdown-menu {
+  min-width: 180px;
+  white-space: nowrap;
+  background-color: #ffffff;
+  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
+}
+
+#menu .dropdown-menu li {
+  width: 100%;
+  padding: 0;
+}
+
+#menu .dropdown-menu li:hover {
+  background-color: #e6e6e6;
+}
+
+#menu .dropdown-menu li:hover a {
+  color: #555;
+}
+
+#menu .dropdown-menu li.active {
+  background-color: #a5377e;
+}
+
+#menu .dropdown-menu li.active > a {
+  color: #ffffff;
+}
+
+#menu .dropdown-menu a {
+  height: 14px;
+  padding: 8px 12px;
+  width: auto;
+  color: #555;
+  font-size: 14px;
+}
+
+.content {
+  flex: 1;
+  padding: 0 2em;
+  min-width: 600px;
+}
+
+.content h1, h2, h3, h4, h5, h6 {
+  font-weight: 500;
+  line-height: 1.1;
+}
+
+.content h1, h2 {
+  padding: 5px;
+}
+
+.content h1 {
+  color: #a5377e;
+  font-size: 1.6em;
+  font-weight: 500;
+}
+
+.content h2 {
+  color: #a5377e;
+  font-size: 1.6em;
+  font-weight: 500;
+}
+
+.content h3 {
+  color: #a5377e;
+  font-size: 1.2em;
+  font-weight: 500;
+}
+
+.content h4 {
+  color: #a5377e;
+  font-size: 1.2em;
+  font-weight: 500;
+}
+
+.content h5 {
+  color: #a5377e;
+  font-size: 1em;
+  font-weight: 500;
+}
+
+.content a {
+  color: #a5377e;
+}
+
+#footer {
+  margin-top: 40px;
+  position: relative;
+  height: 60px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+#footer::after {
+  content: "";
+  /* empty but necessary */
+  position: absolute;
+  background-image: linear-gradient(to bottom, #575757 0, #3d3d3d 100%);
+  background-repeat: repeat-x;
+  box-shadow: 0px -2px 10px 0px #656565;
+  height: 84px;
+  left: -50%;
+  width: 200%;
+  z-index: -1;
+  margin: 0;
+}
+
+.footer-navbar {
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  list-style: none;
+}
+
+.footer-navbar a {
+  color: #ffffff;
+  text-decoration: none;
+  font-weight: 700;
+  margin: 0 14px;
+  font-size: 14px;
+}
+
+.footer-navbar a:hover {
+  color: #a6a6a6;
+}
+
+footer .logo-ot {
+  margin-right: 20px;
+}
+
+.user-toolbar {
+  color: #666666;
+  font-size: 16px;
+  position: relative;
+  display: inline-block;
+}
+
+.user-toolbar-username {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  height: 45px;
+  max-height: 100%;
+}
+
+.user-toolbar .fa {
+  margin: auto 5px;
+}
+
+.user-toolbar a {
+  text-decoration: none;
+  color: #666666;
+}
+
+.user-toolbar ul {
+  list-style: none;
+}
+
+.user-toolbar .dropdown-menu {
+  min-width: 240px;
+  background-color: #ffffff;
+  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
+  right: 0;
+}
+.user-toolbar .dropdown-menu li {
+  height: 3.5em;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 0;
+}
+.user-toolbar .dropdown-menu li:hover {
+  background-color: #cccccc;
+}
+.user-toolbar .dropdown-menu a {
+  width: 100%;
+  padding: 12px 16px;
+}
+
+.user-toolbar .dropside-menu {
+  background-color: #a5377e;
+  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
+}
+
+#login-popup {
+  position: relative;
+  display: inline-block;
+  cursor: pointer;
+}
+
+/* The actual popup */
+#login-popup .popup-form {
+  visibility: hidden;
+  width: 240px;
+  background-color: #a5377e;
+  border-radius: 4px;
+  padding: 1em 1.6em;
+  position: absolute;
+  right: 0;
+  top: 1em;
+  z-index: 1;
+}
+
+/* Toggle this class when clicking on the popup container (hide and show the popup) */
+#login-popup .show {
+  visibility: visible;
+}
+
+#login-popup .popup-form {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+#login-popup .popup-form > input {
+  margin: 0.6em;
+}
+
+/* Error messages */
+.login-errormsg {
+  text-align: center;
+}
+
+.breadcrumb {
+  list-style: none;
+  display: flex;
+  flex-direction: row;
+  font-weight: bold;
+}
+
+.breadcrumb a {
+  color: #a5377e;
+}
+
+.breadcrumb li {
+  margin: 0 3px;
+}
+
+.breadcrumb li a {
+  margin: 0 3px;
+}
+
+.breadcrumb li::before {
+  /*content: "> ";*/
+  font-family: "Font Awesome 5 Free";
+  content: "";
+  color: #b8b8b9;
+}
+
+.breadcrumb li:first-child::before {
+  content: "";
+}
+
+.breadcrumb > li:last-child {
+  color: #737373;
+}
+
+.slick-track {
+  max-height: 380px;
+  overflow: hidden;
+}
+
+.slick-slide img {
+  max-width: initial;
+}
+
+.carousel .carousel-img:not(.slick-slide) {
+  width: 100%;
+  display: none;
+}
+
+.carousel .carousel-img:first-child:not(.slick-slide) {
+  display: inline;
+}
+
+.ot-box {
+  font-size: 0.8em;
+}
+
+.ot-box header {
+  background: #323232;
+  padding: 0.5em;
+  margin: 1em 0;
+}
+
+.ot-box header h3 {
+  color: #a5377e;
+  font-size: 1.2em;
+  font-weight: bold;
+  padding: 0;
+  margin: 0;
+}
+
+.ot-box a {
+  color: #a5377e;
+}
+
+.ot-box footer:not(:empty) {
+  border-top: solid 1px #4d4d4d;
+  margin: 0.5em 0;
+  padding: 0.5em;
+  font-size: 1.2em;
+}
+
+.ot-events {
+  margin: 1em 0;
+}
+
+.ot-events .event-card {
+  display: flex;
+  flex-direction: row;
+  margin-bottom: 0.5em;
+}
+
+.ot-events .event-card > .event-poster {
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+}
+
+.ot-events .event-card > .event-poster img {
+  margin: auto;
+  width: 75%;
+  height: auto;
+}
+
+.ot-events .event-card > .event-summary {
+  flex: 2;
+  display: flex;
+  flex-direction: column;
+  padding: 0.3em;
+}
+
+.ot-events .event-card > .event-summary .event-name {
+  font-weight: bold;
+  color: #393939;
+}
+
+.ot-events .event-card > .event-summary .event-date {
+  color: #666;
+}
+
+.ot-events .no-events p {
+  padding: 1em;
+}
+
+.ot-all-events {
+  display: flex;
+  flex-direction: row;
+}
+
+.ot-all-events .events-controls {
+  order: 1;
+  flex: 1;
+}
+
+.ot-all-events .events-results {
+  order: 0;
+  flex: 1;
+}
+
+.ot-all-events .events-controls, .events-results {
+  display: flex;
+  flex-direction: column;
+  margin: 0 1.5em;
+}
+
+.ot-all-events .event-search {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 2em;
+}
+
+.ot-all-events h3 {
+  font-size: 1.2em;
+  font-weight: bold;
+}
+
+.ot-all-events .event-search form {
+  display: flex;
+  flex-direction: column;
+}
+
+.ot-all-events .event-search form input, button {
+  margin-bottom: 1em;
+  line-height: 1.4em;
+  font-size: 1.1em;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  padding: 6px 12px;
+}
+
+.ot-all-events .event-search form button {
+  border: solid 2px #a5377e;
+  color: #a5377e;
+}
+
+.ot-all-events .event-search form button:hover {
+  background-color: #d8edf3;
+  cursor: pointer;
+}
+
+.ot-all-events #event-map {
+  height: 400px;
+  width: 100%;
+  align-self: flex-end;
+}
+
+.ot-all-events .event {
+  display: flex;
+  flex-direction: column;
+  border-bottom: solid 2px #323232;
+  border-radius: 4px;
+  height: 200px;
+  padding: 1em;
+  justify-content: space-around;
+}
+
+.ot-all-events .event-preview {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.ot-all-events .event-preview .event-poster {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.ot-all-events .event-preview .event-poster img {
+  width: auto;
+  max-width: 100%;
+  min-width: 40%;
+  height: auto;
+  margin-right: 4em;
+}
+
+.ot-all-events .event-preview .event-summary {
+  flex: 2;
+  display: flex;
+  flex-direction: column;
+}
+
+.ot-all-events .event-preview .event-summary > span {
+  margin-bottom: 0.5em;
+}
+
+.ot-all-events .event-preview .event-name {
+  font-size: 1.4em;
+  color: #333333;
+  font-weight: bold;
+}
+
+.ot-all-events .event-preview .event-loc-date {
+  font-size: 1.1em;
+  color: #4d4d4d;
+  font-weight: bold;
+}
+
+.ot-all-events .event-preview .event-description {
+  color: #4d4d4d;
+}
+
+.ot-all-events .event-see {
+  align-self: stretch;
+  padding: 0.4em 0.8em;
+  font-size: 1.1em;
+  margin-top: 0.4em;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+}
+
+.ot-all-events .event-see:hover {
+  text-decoration: none;
+  font-weight: bold;
+}
+
+.ot-show-event {
+  display: flex;
+  flex-direction: column;
+}
+
+.ot-show-event header {
+  display: flex;
+  flex-direction: row;
+  padding: 0.5em;
+  margin-bottom: 2em;
+  align-items: center;
+}
+
+.ot-show-event .event-name {
+  font-size: 1.8em;
+  font-weight: bold;
+  flex: 1;
+}
+
+.ot-show-event .go-back {
+  color: #a5377e;
+  font-weight: bold;
+  padding: 0.5em 0.7em;
+  border: solid 2px #a5377e;
+  border-radius: 6px;
+  margin: auto;
+}
+
+.ot-show-event .go-back:hover {
+  background-color: #d8edf3;
+  text-decoration: none;
+}
+
+.ot-show-event .event-content {
+  display: flex;
+  flex-direction: row;
+  margin-bottom: 2em;
+}
+
+.ot-show-event .event-content .event-poster {
+  flex: 1;
+}
+
+.ot-show-event .event-poster img {
+  width: auto;
+  max-width: 100%;
+  min-width: 40%;
+  height: auto;
+}
+
+.ot-show-event .event-summary {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.ot-show-event .event-description {
+  margin-bottom: 1em;
+  padding: 1em 0.5em;
+}
+
+.ot-show-event .event-infos {
+  border: none;
+  width: 94%;
+  margin: 0 3%;
+  padding-top: 1em;
+}
+
+.ot-show-event .event-infos tr {
+  background-color: #ffdd99;
+}
+
+.ot-show-event .event-infos tr:nth-child(odd) {
+  background-color: #ffd480;
+}
+
+.ot-show-event .event-content .event-infos td {
+  padding: 0.8em 1.6em;
+}
+
+.ot-show-event .event-content .event-infos tr td:first-child {
+  font-weight: bold;
+  color: #2E2D2D;
+}
+
+.ot-show-event #event-map {
+  height: 400px;
+  width: 100%;
+  align-self: center;
+}
+
+.ot-donors .donor-list {
+  display: flex;
+  flex-direction: column;
+}
+
+.ot-donors .donor-card {
+  height: 80px;
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  align-content: center;
+  justify-content: center;
+  margin-bottom: 1em;
+}
+
+.ot-donors .donor-card img {
+  width: auto;
+  max-height: 100%;
+  max-width: 95%;
+  margin: auto;
+  /* Style the alt text */
+  font-size: 1.1em;
+}
+
+.frame-type-menu_sitemap {
+  font-size: 16px;
+  font-weight: bold;
+}
+
+.frame-type-menu_sitemap > ul {
+  padding-left: 1.5em;
+  list-style: none;
+}
+
+.frame-type-menu_sitemap li ul {
+  list-style: disc;
+}
+
+.frame-type-menu_sitemap li ul li ul {
+  list-style: square;
+}
+
+.frame-type-menu_sitemap li {
+  padding-top: 0.5em;
+  padding-bottom: 0.5em;
+  color: #979797;
+}
+
+form .row {
+  display: flex;
+  flex-direction: row;
+}
+
+form .row > div {
+  padding-left: 2em;
+  flex: 1;
+}
+
+form .row > div:first-child {
+  padding-left: 0;
+}
+
+.form-group {
+  margin-bottom: 18px;
+}
+
+.control-label {
+  color: 4facc6;
+  display: inline-block;
+  max-width: 100%;
+  margin-bottom: 10px;
+  font-weight: 700;
+}
+
+div.input {
+  display: flex;
+  flex-direction: column;
+}
+
+.form-control {
+  height: 28px;
+  box-sizing: content-box;
+  padding: 6px 12px;
+  font-size: 14px;
+  line-height: 1.2em;
+  color: #555;
+  background-color: #fff;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}
+
+textarea.form-control {
+  padding: 12px 12px;
+  height: 180px;
+}
+
+.form-control:focus {
+  border: 2px solid #a5377e;
+}
+
+.form-control:invalid {
+  box-shadow: none;
+}
+
+div.input .error {
+  color: #e60000;
+}
+
+div.input span.error {
+  margin-top: 5px;
+}
+
+span.submit {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+}
+
+form button[type=submit] {
+  width: 120px;
+}
+
+form button[type=submit]:hover {
+  background-color: #e6e6e6;
+  cursor: pointer;
+}
+
+::-webkit-input-placeholder {
+  color: #8c8c8c !important;
+  opacity: 1;
+}
+
+:-moz-placeholder {
+  color: #8c8c8c !important;
+  opacity: 1;
+}
+
+::-moz-placeholder {
+  color: #8c8c8c !important;
+  opacity: 1;
+}
+
+:-ms-input-placeholder {
+  color: #8c8c8c !important;
+  opacity: 1;
+}
+
+.contact-form {
+  width: 80%;
+  margin: auto;
+  min-width: 600px;
+}
+
+.contact-form-info {
+  font-size: 12px;
+  padding: 0 5px 10px 5px;
+  font-style: italic;
+  color: #4d4d4d;
+}
+
+.faq-item .content {
+  color: #262626;
+  padding: 0 2em;
+  margin: 0 0.5em 3em 0.5em;
+  border-left: solid 2px #a5377e;
+}
+
+.fce-2col {
+  display: flex;
+  flex-direction: row;
+}
+
+.fce-2col .col {
+  flex: 1;
+  margin-right: 2em;
+}
+
+.fce-2col .col:last-child {
+  margin-right: 0;
+}
+
+/*# sourceMappingURL=theme-purple.css.map */

ot_templating/Resources/Public/assets/style/theme-purple.scss

@@ -0,0 +1,38 @@
+// Purple Theme
+$main-color: #a5377e;
+
+@use 'style' with (
+  $menu-background-color: $main-color,
+  $menu-background-color-hovered: $main-color,
+  $menu-background-color-current: $main-color,
+  $menu-font-color: #ffffff,
+  $menu-font-color-hovered: #555,
+
+  $menu-dropdown-background-color: #ffffff,
+  $menu-dropdown-background-color-hovered: #e6e6e6,
+  $menu-dropdown-background-color-current: $main-color,
+  $menu-dropdown-font-color: #555,
+  $menu-dropdown-font-color-hovered: #555,
+  $menu-dropdown-font-color-current: #ffffff,
+
+  $user-toolbar-color: #666666,
+  $user-toolbar-dropdown-background-color: #ffffff,
+  $user-toolbar-popup-background-color: $main-color,
+
+  $breadcrumb-current-color: #737373,
+  $breadcrumb-a-color: $main-color,
+
+  $otbox-header-background-color: #323232,
+  $otbox-header-font-color: $main-color,
+
+  $content-h1-color: $main-color,
+  $content-h2-color: $main-color,
+  $content-h3-color: $main-color,
+  $content-h4-color: $main-color,
+  $content-h5-color: $main-color,
+
+  $content-a-color: $main-color,
+
+  $forms-label-color: 4facc6,
+  $forms-control-focused-border-color: $main-color,
+);

ot_templating/Resources/Public/assets/style/theme-red.css

@@ -0,0 +1,960 @@
+@charset "UTF-8";
+body {
+  overflow-x: hidden;
+}
+
+a {
+  text-decoration: none;
+}
+
+.ui-datepicker {
+  z-index: 10000 !important;
+}
+
+.alert {
+  color: #e60000;
+  font-weight: bold;
+}
+
+body {
+  max-width: 1170px;
+  margin: auto;
+  font-family: Liberation Sans, Arial;
+  font-size: 14px;
+}
+
+#header {
+  align-items: center;
+  margin-top: 0.4em;
+  margin-bottom: 1.2em;
+}
+
+.main {
+  /* OLD - iOS 6-, Safari 3.1-6 */
+  display: -webkit-box;
+  /* OLD - Firefox 19- (buggy but mostly works) */
+  display: -moz-box;
+  /* TWEENER - IE 10 */
+  display: -ms-flexbox;
+  /* NEW - Chrome */
+  display: -webkit-flex;
+  /* NEW, Spec - Opera 12.1, Firefox 20+ */
+  display: flex;
+  flex-direction: row;
+}
+
+.leftcol {
+  width: 15%;
+  min-width: 185px;
+}
+
+.rightcol {
+  width: 15%;
+  min-width: 185px;
+}
+
+.dropdown {
+  position: relative;
+  display: inline-block;
+}
+
+ul.dropdown-menu {
+  display: none;
+  position: absolute;
+  z-index: 1;
+  margin: auto 0;
+  padding: 0;
+  list-style: none;
+}
+
+ul.dropdown-menu li {
+  padding: 12px 16px;
+}
+
+ul.dropdown-right {
+  top: 0;
+  left: 100%;
+}
+
+ul.dropdown-left {
+  top: 0;
+  right: 100%;
+}
+
+#topbar {
+  /* OLD - iOS 6-, Safari 3.1-6 */
+  display: -webkit-box;
+  /* OLD - Firefox 19- (buggy but mostly works) */
+  display: -moz-box;
+  /* TWEENER - IE 10 */
+  display: -ms-flexbox;
+  /* NEW - Chrome */
+  display: -webkit-flex;
+  /* NEW, Spec - Opera 12.1, Firefox 20+ */
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  margin-top: 0.8em;
+  margin-bottom: 1em;
+  height: 75px;
+  list-style: none;
+}
+
+.topbar-logo img, .topbar-network-logo img {
+  margin: 6px;
+}
+
+.topbar-logo img {
+  max-height: 95%;
+}
+
+.topbar-network-logo {
+  margin-left: 6px;
+}
+
+.topbar-network-logo img {
+  max-height: 50px;
+}
+
+.topbar-title {
+  margin: 0 0.8em 0 0.8em;
+  flex: 1;
+  color: #333;
+  font-size: 1.6em;
+  font-weight: 500;
+}
+
+#menu {
+  /* OLD - iOS 6-, Safari 3.1-6 */
+  display: -webkit-box;
+  /* OLD - Firefox 19- (buggy but mostly works) */
+  display: -moz-box;
+  /* TWEENER - IE 10 */
+  display: -ms-flexbox;
+  /* NEW - Chrome */
+  display: -webkit-flex;
+  /* NEW, Spec - Opera 12.1, Firefox 20+ */
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  list-style: none;
+  background-color: #df0009;
+  padding: 0;
+  align-items: center;
+  margin: 0 0 1em;
+  position: relative;
+}
+
+#menu:after {
+  content: "";
+  /* empty but necessary */
+  position: absolute;
+  background-color: #df0009;
+  height: 100%;
+  left: -50%;
+  width: 200%;
+  z-index: -1;
+}
+
+#menu li {
+  height: 100%;
+}
+
+#menu li.active {
+  background-color: #df0009;
+}
+
+#menu li a {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 12px;
+  height: 26px;
+  color: #ffffff;
+  font-size: 14px;
+  text-align: center;
+  text-decoration: none;
+}
+
+#menu li.active a {
+  color: #555;
+}
+
+#menu li.dropdown-displayed a {
+  color: #555;
+}
+
+#menu li a:hover {
+  text-decoration: none;
+  color: #555;
+}
+
+#menu .caret {
+  margin-left: 5px;
+}
+
+#menu .dropdown.dropdown-displayed {
+  background-color: #df0009;
+  color: #555;
+}
+
+#menu .dropdown-menu {
+  min-width: 180px;
+  white-space: nowrap;
+  background-color: #ffffff;
+  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
+}
+
+#menu .dropdown-menu li {
+  width: 100%;
+  padding: 0;
+}
+
+#menu .dropdown-menu li:hover {
+  background-color: #e6e6e6;
+}
+
+#menu .dropdown-menu li:hover a {
+  color: #555;
+}
+
+#menu .dropdown-menu li.active {
+  background-color: #df0009;
+}
+
+#menu .dropdown-menu li.active > a {
+  color: #ffffff;
+}
+
+#menu .dropdown-menu a {
+  height: 14px;
+  padding: 8px 12px;
+  width: auto;
+  color: #555;
+  font-size: 14px;
+}
+
+.content {
+  flex: 1;
+  padding: 0 2em;
+  min-width: 600px;
+}
+
+.content h1, h2, h3, h4, h5, h6 {
+  font-weight: 500;
+  line-height: 1.1;
+}
+
+.content h1, h2 {
+  padding: 5px;
+}
+
+.content h1 {
+  color: #df0009;
+  font-size: 1.6em;
+  font-weight: 500;
+}
+
+.content h2 {
+  color: #df0009;
+  font-size: 1.6em;
+  font-weight: 500;
+}
+
+.content h3 {
+  color: #df0009;
+  font-size: 1.2em;
+  font-weight: 500;
+}
+
+.content h4 {
+  color: #df0009;
+  font-size: 1.2em;
+  font-weight: 500;
+}
+
+.content h5 {
+  color: #df0009;
+  font-size: 1em;
+  font-weight: 500;
+}
+
+.content a {
+  color: #df0009;
+}
+
+#footer {
+  margin-top: 40px;
+  position: relative;
+  height: 60px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+#footer::after {
+  content: "";
+  /* empty but necessary */
+  position: absolute;
+  background-image: linear-gradient(to bottom, #575757 0, #3d3d3d 100%);
+  background-repeat: repeat-x;
+  box-shadow: 0px -2px 10px 0px #656565;
+  height: 84px;
+  left: -50%;
+  width: 200%;
+  z-index: -1;
+  margin: 0;
+}
+
+.footer-navbar {
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  list-style: none;
+}
+
+.footer-navbar a {
+  color: #ffffff;
+  text-decoration: none;
+  font-weight: 700;
+  margin: 0 14px;
+  font-size: 14px;
+}
+
+.footer-navbar a:hover {
+  color: #a6a6a6;
+}
+
+footer .logo-ot {
+  margin-right: 20px;
+}
+
+.user-toolbar {
+  color: #666666;
+  font-size: 16px;
+  position: relative;
+  display: inline-block;
+}
+
+.user-toolbar-username {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  height: 45px;
+  max-height: 100%;
+}
+
+.user-toolbar .fa {
+  margin: auto 5px;
+}
+
+.user-toolbar a {
+  text-decoration: none;
+  color: #666666;
+}
+
+.user-toolbar ul {
+  list-style: none;
+}
+
+.user-toolbar .dropdown-menu {
+  min-width: 240px;
+  background-color: #ffffff;
+  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
+  right: 0;
+}
+.user-toolbar .dropdown-menu li {
+  height: 3.5em;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 0;
+}
+.user-toolbar .dropdown-menu li:hover {
+  background-color: #cccccc;
+}
+.user-toolbar .dropdown-menu a {
+  width: 100%;
+  padding: 12px 16px;
+}
+
+.user-toolbar .dropside-menu {
+  background-color: #df0009;
+  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
+}
+
+#login-popup {
+  position: relative;
+  display: inline-block;
+  cursor: pointer;
+}
+
+/* The actual popup */
+#login-popup .popup-form {
+  visibility: hidden;
+  width: 240px;
+  background-color: #df0009;
+  border-radius: 4px;
+  padding: 1em 1.6em;
+  position: absolute;
+  right: 0;
+  top: 1em;
+  z-index: 1;
+}
+
+/* Toggle this class when clicking on the popup container (hide and show the popup) */
+#login-popup .show {
+  visibility: visible;
+}
+
+#login-popup .popup-form {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+#login-popup .popup-form > input {
+  margin: 0.6em;
+}
+
+/* Error messages */
+.login-errormsg {
+  text-align: center;
+}
+
+.breadcrumb {
+  list-style: none;
+  display: flex;
+  flex-direction: row;
+  font-weight: bold;
+}
+
+.breadcrumb a {
+  color: #df0009;
+}
+
+.breadcrumb li {
+  margin: 0 3px;
+}
+
+.breadcrumb li a {
+  margin: 0 3px;
+}
+
+.breadcrumb li::before {
+  /*content: "> ";*/
+  font-family: "Font Awesome 5 Free";
+  content: "";
+  color: #b8b8b9;
+}
+
+.breadcrumb li:first-child::before {
+  content: "";
+}
+
+.breadcrumb > li:last-child {
+  color: #737373;
+}
+
+.slick-track {
+  max-height: 380px;
+  overflow: hidden;
+}
+
+.slick-slide img {
+  max-width: initial;
+}
+
+.carousel .carousel-img:not(.slick-slide) {
+  width: 100%;
+  display: none;
+}
+
+.carousel .carousel-img:first-child:not(.slick-slide) {
+  display: inline;
+}
+
+.ot-box {
+  font-size: 0.8em;
+}
+
+.ot-box header {
+  background: #323232;
+  padding: 0.5em;
+  margin: 1em 0;
+}
+
+.ot-box header h3 {
+  color: #df0009;
+  font-size: 1.2em;
+  font-weight: bold;
+  padding: 0;
+  margin: 0;
+}
+
+.ot-box a {
+  color: #df0009;
+}
+
+.ot-box footer:not(:empty) {
+  border-top: solid 1px #4d4d4d;
+  margin: 0.5em 0;
+  padding: 0.5em;
+  font-size: 1.2em;
+}
+
+.ot-events {
+  margin: 1em 0;
+}
+
+.ot-events .event-card {
+  display: flex;
+  flex-direction: row;
+  margin-bottom: 0.5em;
+}
+
+.ot-events .event-card > .event-poster {
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+}
+
+.ot-events .event-card > .event-poster img {
+  margin: auto;
+  width: 75%;
+  height: auto;
+}
+
+.ot-events .event-card > .event-summary {
+  flex: 2;
+  display: flex;
+  flex-direction: column;
+  padding: 0.3em;
+}
+
+.ot-events .event-card > .event-summary .event-name {
+  font-weight: bold;
+  color: #393939;
+}
+
+.ot-events .event-card > .event-summary .event-date {
+  color: #666;
+}
+
+.ot-events .no-events p {
+  padding: 1em;
+}
+
+.ot-all-events {
+  display: flex;
+  flex-direction: row;
+}
+
+.ot-all-events .events-controls {
+  order: 1;
+  flex: 1;
+}
+
+.ot-all-events .events-results {
+  order: 0;
+  flex: 1;
+}
+
+.ot-all-events .events-controls, .events-results {
+  display: flex;
+  flex-direction: column;
+  margin: 0 1.5em;
+}
+
+.ot-all-events .event-search {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 2em;
+}
+
+.ot-all-events h3 {
+  font-size: 1.2em;
+  font-weight: bold;
+}
+
+.ot-all-events .event-search form {
+  display: flex;
+  flex-direction: column;
+}
+
+.ot-all-events .event-search form input, button {
+  margin-bottom: 1em;
+  line-height: 1.4em;
+  font-size: 1.1em;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  padding: 6px 12px;
+}
+
+.ot-all-events .event-search form button {
+  border: solid 2px #df0009;
+  color: #df0009;
+}
+
+.ot-all-events .event-search form button:hover {
+  background-color: #d8edf3;
+  cursor: pointer;
+}
+
+.ot-all-events #event-map {
+  height: 400px;
+  width: 100%;
+  align-self: flex-end;
+}
+
+.ot-all-events .event {
+  display: flex;
+  flex-direction: column;
+  border-bottom: solid 2px #323232;
+  border-radius: 4px;
+  height: 200px;
+  padding: 1em;
+  justify-content: space-around;
+}
+
+.ot-all-events .event-preview {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.ot-all-events .event-preview .event-poster {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.ot-all-events .event-preview .event-poster img {
+  width: auto;
+  max-width: 100%;
+  min-width: 40%;
+  height: auto;
+  margin-right: 4em;
+}
+
+.ot-all-events .event-preview .event-summary {
+  flex: 2;
+  display: flex;
+  flex-direction: column;
+}
+
+.ot-all-events .event-preview .event-summary > span {
+  margin-bottom: 0.5em;
+}
+
+.ot-all-events .event-preview .event-name {
+  font-size: 1.4em;
+  color: #333333;
+  font-weight: bold;
+}
+
+.ot-all-events .event-preview .event-loc-date {
+  font-size: 1.1em;
+  color: #4d4d4d;
+  font-weight: bold;
+}
+
+.ot-all-events .event-preview .event-description {
+  color: #4d4d4d;
+}
+
+.ot-all-events .event-see {
+  align-self: stretch;
+  padding: 0.4em 0.8em;
+  font-size: 1.1em;
+  margin-top: 0.4em;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+}
+
+.ot-all-events .event-see:hover {
+  text-decoration: none;
+  font-weight: bold;
+}
+
+.ot-show-event {
+  display: flex;
+  flex-direction: column;
+}
+
+.ot-show-event header {
+  display: flex;
+  flex-direction: row;
+  padding: 0.5em;
+  margin-bottom: 2em;
+  align-items: center;
+}
+
+.ot-show-event .event-name {
+  font-size: 1.8em;
+  font-weight: bold;
+  flex: 1;
+}
+
+.ot-show-event .go-back {
+  color: #df0009;
+  font-weight: bold;
+  padding: 0.5em 0.7em;
+  border: solid 2px #df0009;
+  border-radius: 6px;
+  margin: auto;
+}
+
+.ot-show-event .go-back:hover {
+  background-color: #d8edf3;
+  text-decoration: none;
+}
+
+.ot-show-event .event-content {
+  display: flex;
+  flex-direction: row;
+  margin-bottom: 2em;
+}
+
+.ot-show-event .event-content .event-poster {
+  flex: 1;
+}
+
+.ot-show-event .event-poster img {
+  width: auto;
+  max-width: 100%;
+  min-width: 40%;
+  height: auto;
+}
+
+.ot-show-event .event-summary {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.ot-show-event .event-description {
+  margin-bottom: 1em;
+  padding: 1em 0.5em;
+}
+
+.ot-show-event .event-infos {
+  border: none;
+  width: 94%;
+  margin: 0 3%;
+  padding-top: 1em;
+}
+
+.ot-show-event .event-infos tr {
+  background-color: #ffdd99;
+}
+
+.ot-show-event .event-infos tr:nth-child(odd) {
+  background-color: #ffd480;
+}
+
+.ot-show-event .event-content .event-infos td {
+  padding: 0.8em 1.6em;
+}
+
+.ot-show-event .event-content .event-infos tr td:first-child {
+  font-weight: bold;
+  color: #2E2D2D;
+}
+
+.ot-show-event #event-map {
+  height: 400px;
+  width: 100%;
+  align-self: center;
+}
+
+.ot-donors .donor-list {
+  display: flex;
+  flex-direction: column;
+}
+
+.ot-donors .donor-card {
+  height: 80px;
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  align-content: center;
+  justify-content: center;
+  margin-bottom: 1em;
+}
+
+.ot-donors .donor-card img {
+  width: auto;
+  max-height: 100%;
+  max-width: 95%;
+  margin: auto;
+  /* Style the alt text */
+  font-size: 1.1em;
+}
+
+.frame-type-menu_sitemap {
+  font-size: 16px;
+  font-weight: bold;
+}
+
+.frame-type-menu_sitemap > ul {
+  padding-left: 1.5em;
+  list-style: none;
+}
+
+.frame-type-menu_sitemap li ul {
+  list-style: disc;
+}
+
+.frame-type-menu_sitemap li ul li ul {
+  list-style: square;
+}
+
+.frame-type-menu_sitemap li {
+  padding-top: 0.5em;
+  padding-bottom: 0.5em;
+  color: #979797;
+}
+
+form .row {
+  display: flex;
+  flex-direction: row;
+}
+
+form .row > div {
+  padding-left: 2em;
+  flex: 1;
+}
+
+form .row > div:first-child {
+  padding-left: 0;
+}
+
+.form-group {
+  margin-bottom: 18px;
+}
+
+.control-label {
+  color: 4facc6;
+  display: inline-block;
+  max-width: 100%;
+  margin-bottom: 10px;
+  font-weight: 700;
+}
+
+div.input {
+  display: flex;
+  flex-direction: column;
+}
+
+.form-control {
+  height: 28px;
+  box-sizing: content-box;
+  padding: 6px 12px;
+  font-size: 14px;
+  line-height: 1.2em;
+  color: #555;
+  background-color: #fff;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}
+
+textarea.form-control {
+  padding: 12px 12px;
+  height: 180px;
+}
+
+.form-control:focus {
+  border: 2px solid #df0009;
+}
+
+.form-control:invalid {
+  box-shadow: none;
+}
+
+div.input .error {
+  color: #e60000;
+}
+
+div.input span.error {
+  margin-top: 5px;
+}
+
+span.submit {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+}
+
+form button[type=submit] {
+  width: 120px;
+}
+
+form button[type=submit]:hover {
+  background-color: #e6e6e6;
+  cursor: pointer;
+}
+
+::-webkit-input-placeholder {
+  color: #8c8c8c !important;
+  opacity: 1;
+}
+
+:-moz-placeholder {
+  color: #8c8c8c !important;
+  opacity: 1;
+}
+
+::-moz-placeholder {
+  color: #8c8c8c !important;
+  opacity: 1;
+}
+
+:-ms-input-placeholder {
+  color: #8c8c8c !important;
+  opacity: 1;
+}
+
+.contact-form {
+  width: 80%;
+  margin: auto;
+  min-width: 600px;
+}
+
+.contact-form-info {
+  font-size: 12px;
+  padding: 0 5px 10px 5px;
+  font-style: italic;
+  color: #4d4d4d;
+}
+
+.faq-item .content {
+  color: #262626;
+  padding: 0 2em;
+  margin: 0 0.5em 3em 0.5em;
+  border-left: solid 2px #df0009;
+}
+
+.fce-2col {
+  display: flex;
+  flex-direction: row;
+}
+
+.fce-2col .col {
+  flex: 1;
+  margin-right: 2em;
+}
+
+.fce-2col .col:last-child {
+  margin-right: 0;
+}
+
+/*# sourceMappingURL=theme-red.css.map */

ot_templating/Resources/Public/assets/style/theme-red.scss

@@ -0,0 +1,38 @@
+// Red Theme
+$main-color: #df0009;
+
+@use 'style' with (
+  $menu-background-color: $main-color,
+  $menu-background-color-hovered: $main-color,
+  $menu-background-color-current: $main-color,
+  $menu-font-color: #ffffff,
+  $menu-font-color-hovered: #555,
+
+  $menu-dropdown-background-color: #ffffff,
+  $menu-dropdown-background-color-hovered: #e6e6e6,
+  $menu-dropdown-background-color-current: $main-color,
+  $menu-dropdown-font-color: #555,
+  $menu-dropdown-font-color-hovered: #555,
+  $menu-dropdown-font-color-current: #ffffff,
+
+  $user-toolbar-color: #666666,
+  $user-toolbar-dropdown-background-color: #ffffff,
+  $user-toolbar-popup-background-color: $main-color,
+
+  $breadcrumb-current-color: #737373,
+  $breadcrumb-a-color: $main-color,
+
+  $otbox-header-background-color: #323232,
+  $otbox-header-font-color: $main-color,
+
+  $content-h1-color: $main-color,
+  $content-h2-color: $main-color,
+  $content-h3-color: $main-color,
+  $content-h4-color: $main-color,
+  $content-h5-color: $main-color,
+
+  $content-a-color: $main-color,
+
+  $forms-label-color: 4facc6,
+  $forms-control-focused-border-color: $main-color,
+);