make login-form responsive

ot_templating/Resources/Public/assets/Classic/script/main.js

@@ -27,12 +27,13 @@ $(document).ready(function(){
         elt.children('ul.dropdown-menu').stop(true);
     }
 
-    $('.dropdown').on('mouseenter tap', function(e) {
+    $('.dropdown').on('mouseenter', function(e) {
 
         // Special: the dropdown is already displayed, this can
         //           happen on mobile or tablet
         if ($(this).hasClass('dropdown-displayed')) {
-            return
+            hideDropdownsFor($(this));
+            return;
         }
 
         // stop any delayed hiding on this since the cursor went back on it

ot_templating/Resources/Public/assets/Classic/style/_states.scss

@@ -56,6 +56,27 @@ $menu-font-color: $menu-font-color;
     margin: 0 5% 20px 5%;
   }
 
+  // Login form and user-toolbar
+  .user-toolbar {
+    text-align: center;
+  }
+
+  #login-popup {
+    @include flex;
+    position: static;
+    margin-top: 6px;
+  }
+
+  #login-popup .popup-form {
+    display: none;
+    position: static;
+    width: 100%;
+  }
+
+  #login-popup .show {
+    @include flex;
+  }
+
   //   Footer
   #footer {
     height: auto;
@@ -98,11 +119,11 @@ $menu-font-color: $menu-font-color;
   }
 
   #menu-container .toggle-menu {
-    display: flex;
+    @include flex;
   }
 
   #menu-container .toggle-dropdown {
-    display: flex;
+    @include flex;
   }
 
   #menu li {
@@ -112,7 +133,7 @@ $menu-font-color: $menu-font-color;
   }
 
   #menu li .menu-label {
-    display: flex;
+    @include flex;
     flex-direction: row;
     align-items: center;
   }

ot_templating/Resources/Public/assets/Classic/style/module/_breadcrumb.scss

@@ -5,7 +5,7 @@ $carrets-color: #b8b8b9;
 
 .breadcrumb {
   list-style: none;
-  display: flex;
+  @include flex;
   flex-direction: row;
   font-weight: bold;
 }

ot_templating/Resources/Public/assets/Classic/style/module/_carousel.scss

@@ -33,7 +33,7 @@ header .slick-track {
 // vertically center
 .content .slick-slide {
   background-color: #f2f2f2;
-  display: flex;
+  @include flex;
   align-items:center;
 }
 

ot_templating/Resources/Public/assets/Classic/style/module/_donors-box.scss

@@ -1,14 +1,14 @@
 // Donor's box
 
 .ot-donors .donor-list {
-  display: flex;
+  @include flex;
   flex-direction: column;
 }
 
 .ot-donors .donor-card {
   height: 80px;
   width: 100%;
-  display: flex;
+  @include flex;
   flex-direction: row;
   align-content: center;
   justify-content: center;

ot_templating/Resources/Public/assets/Classic/style/module/_dropdown.scss

@@ -21,7 +21,7 @@ ul.dropdown-menu li {
 }
 
 ul.dropdown-displayed {
-  display: flex;
+  @include flex;
   flex-direction: column;
 }
 

ot_templating/Resources/Public/assets/Classic/style/module/_events-box.scss

@@ -4,14 +4,14 @@
 }
 
 .ot-events .event-card {
-  display: flex;
+  @include flex;
   flex-direction: row;
   margin-bottom: 0.5em;
 }
 
 .ot-events .event-card > .event-poster {
   flex: 1;
-  display: flex;
+  @include flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
@@ -25,7 +25,7 @@
 
 .ot-events .event-card > .event-summary {
   flex: 2;
-  display: flex;
+  @include flex;
   flex-direction: column;
   padding: 0.3em;
 }

ot_templating/Resources/Public/assets/Classic/style/module/_events-index.scss

@@ -1,7 +1,7 @@
 // All events page from ot_widget
 
 .ot-all-events {
-  display: flex;
+  @include flex;
   flex-direction: row;
 }
 
@@ -16,13 +16,13 @@
 }
 
 .ot-all-events .events-controls, .events-results {
-  display: flex;
+  @include flex;
   flex-direction: column;
   margin: 0 1.5em;
 }
 
 .ot-all-events .event-search {
-  display: flex;
+  @include flex;
   flex-direction: column;
   margin-bottom: 2em;
 }
@@ -33,7 +33,7 @@
 }
 
 .ot-all-events .event-search form {
-  display: flex;
+  @include flex;
   flex-direction: column;
 }
 
@@ -63,7 +63,7 @@
 }
 
 .ot-all-events .event {
-  display: flex;
+  @include flex;
   flex-direction: column;
   border-bottom: solid 2px $otbox-header-background-color;
   border-radius: 4px;
@@ -73,14 +73,14 @@
 }
 
 .ot-all-events .event-preview {
-  display: flex;
+  @include flex;
   flex-direction: row;
   align-items: center;
 }
 
 .ot-all-events .event-preview .event-poster {
   flex: 1;
-  display: flex;
+  @include flex;
   flex-direction: column;
   align-items: center;
 }
@@ -95,7 +95,7 @@
 
 .ot-all-events .event-preview .event-summary {
   flex: 2;
-  display: flex;
+  @include flex;
   flex-direction: column;
 }
 
@@ -124,7 +124,7 @@
   padding: 0.4em 0.8em;
   font-size: 1.1em;
   margin-top: 0.4em;
-  display: flex;
+  @include flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;

ot_templating/Resources/Public/assets/Classic/style/module/_events-show.scss

@@ -1,12 +1,12 @@
 // Event's details page from ot_widget
 
 .ot-show-event {
-  display: flex;
+  @include flex;
   flex-direction: column;
 }
 
 .ot-show-event header {
-  display: flex;
+  @include flex;
   flex-direction: row;
   padding: 0.5em;
   margin-bottom: 2em;
@@ -34,7 +34,7 @@
 }
 
 .ot-show-event .event-content {
-  display: flex;
+  @include flex;
   flex-direction: row;
   margin-bottom: 2em;
 }
@@ -52,7 +52,7 @@
 
 .ot-show-event .event-summary {
   flex: 1;
-  display: flex;
+  @include flex;
   flex-direction: column;
 }
 

ot_templating/Resources/Public/assets/Classic/style/module/_fce-2col.scss

@@ -1,6 +1,6 @@
 // 2-Col container widget from ot_templating
 .fce-2col {
-  display: flex;
+  @include flex;
   flex-direction: row;
 }
 

ot_templating/Resources/Public/assets/Classic/style/module/_footer.scss

@@ -5,7 +5,7 @@
   margin-top: 40px;
   position: relative;
   height: 60px;
-  display: flex;
+  @include flex;
   flex-direction: row;
   align-items: center;
 }
@@ -25,7 +25,7 @@
 
 .footer-navbar {
   flex: 1;
-  display: flex;
+  @include flex;
   flex-direction: row;
   align-items: center;
   list-style: none;

ot_templating/Resources/Public/assets/Classic/style/module/_forms.scss

@@ -6,7 +6,7 @@ $forms-error-color: $forms-error-color;
 $forms-btn-background-color: $forms-btn-background-color;
 
 form .row {
-  display: flex;
+  @include flex;
   flex-direction: row;
 }
 
@@ -31,7 +31,7 @@ form .row > div:first-child {
 }
 
 div.input {
-  display: flex;
+  @include flex;
   flex-direction: column;
 }
 
@@ -73,7 +73,7 @@ div.input span.error {
 }
 
 span.submit {
-  display: flex;
+  @include flex;
   flex-direction: row;
   justify-content: flex-end;
 }

ot_templating/Resources/Public/assets/Classic/style/module/_members.scss

@@ -15,7 +15,7 @@ $otmembers-background-color: $otmembers-background-color;
 
   .ot-members-list {
     list-style: none;
-    display: flex;
+    @include flex;
     flex-direction: row;
     flex-wrap: wrap;
     align-items: end;
@@ -24,7 +24,7 @@ $otmembers-background-color: $otmembers-background-color;
 
   .ot-member {
     margin: 15px;
-    display: flex;
+    @include flex;
     flex-direction: column;
     align-items: center;
   }

ot_templating/Resources/Public/assets/Classic/style/module/_menu.scss

@@ -50,7 +50,7 @@ $submenu-item-height: 30px;
 }
 
 #menu li {
-  display: flex;
+  @include flex;
   height: 100%;
 }
 
@@ -59,7 +59,7 @@ $submenu-item-height: 30px;
 }
 
 #menu li a {
-  display: flex;
+  @include flex;
   flex-direction: row;
   align-items: center;
 

ot_templating/Resources/Public/assets/Classic/style/module/_noscript.scss

@@ -3,7 +3,7 @@ $warning-background-color: $warning-background-color;
 $warning-font-color: $warning-font-color;
 
 .no-script-warning {
-  display: flex;
+  @include flex;
   flex-direction: column;
   align-items: center;
   width: 100%;

ot_templating/Resources/Public/assets/Classic/style/module/_structures.scss

@@ -1,7 +1,7 @@
 // Structures page
 
 .ot-structures {
-  display: flex;
+  @include flex;
   flex-direction: row;
 
   .structure-controls {
@@ -15,13 +15,13 @@
   }
 
   .structure-controls, .structure-results {
-    display: flex;
+    @include flex;
     flex-direction: column;
     margin: 0 1.5em;
   }
 
   .structure-search {
-    display: flex;
+    @include flex;
     flex-direction: column;
     margin-bottom: 2em;
   }
@@ -32,7 +32,7 @@
   }
 
   .structure-search form {
-    display: flex;
+    @include flex;
     flex-direction: column;
   }
 
@@ -62,7 +62,7 @@
   }
 
   .structure {
-    display: flex;
+    @include flex;
     flex-direction: column;
     border-bottom: solid 2px $otbox-header-background-color;
     border-radius: 4px;
@@ -72,14 +72,14 @@
   }
 
   .structure-preview {
-    display: flex;
+    @include flex;
     flex-direction: row;
     align-items: center;
   }
 
   .structure-preview .structure-poster {
     flex: 1;
-    display: flex;
+    @include flex;
     flex-direction: column;
     align-items: center;
   }
@@ -94,7 +94,7 @@
 
   .structure-preview .structure-summary {
     flex: 2;
-    display: flex;
+    @include flex;
     flex-direction: column;
   }
 
@@ -123,7 +123,7 @@
     padding: 0.4em 0.8em;
     font-size: 1.1em;
     margin-top: 0.4em;
-    display: flex;
+    @include flex;
     flex-direction: row;
     justify-content: center;
     align-items: center;

ot_templating/Resources/Public/assets/Classic/style/module/_user-toolbar.scss

@@ -14,7 +14,7 @@ $user-toolbar-popup-background-color: $user-toolbar-popup-background-color;
 }
 
 .user-toolbar-username {
-  display: flex;
+  @include flex;
   flex-direction: row;
   align-items: center;
   height: 45px;
@@ -46,7 +46,7 @@ $user-toolbar-popup-background-color: $user-toolbar-popup-background-color;
 
   li {
     height: 3.5em;
-    display: flex;
+    @include flex;
     flex-direction: row;
     align-items: center;
     padding: 0;
@@ -96,7 +96,7 @@ $user-toolbar-popup-background-color: $user-toolbar-popup-background-color;
 }
 
 #login-popup .popup-form {
-  display: flex;
+  @include flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;

ot_templating/Resources/Public/assets/Classic/style/style.css

@@ -76,6 +76,15 @@ ul.dropdown-menu li {
 }
 
 ul.dropdown-displayed {
+  /* 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: column;
 }
@@ -183,6 +192,15 @@ ul.dropdown-left {
 }
 
 #menu li {
+  /* 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;
   height: 100%;
 }
@@ -192,6 +210,15 @@ ul.dropdown-left {
 }
 
 #menu li a {
+  /* 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;
   align-items: center;
@@ -433,6 +460,15 @@ ul.dropdown-left {
   margin-top: 40px;
   position: relative;
   height: 60px;
+  /* 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;
   align-items: center;
@@ -454,6 +490,15 @@ ul.dropdown-left {
 
 .footer-navbar {
   flex: 1;
+  /* 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;
   align-items: center;
@@ -484,6 +529,15 @@ footer .logo-ot {
 }
 
 .user-toolbar-username {
+  /* 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;
   align-items: center;
@@ -512,6 +566,15 @@ footer .logo-ot {
 }
 .user-toolbar .dropdown-menu li {
   height: 3.5em;
+  /* 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;
   align-items: center;
@@ -554,6 +617,15 @@ footer .logo-ot {
 }
 
 #login-popup .popup-form {
+  /* 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: column;
   justify-content: center;
@@ -571,6 +643,15 @@ footer .logo-ot {
 
 .breadcrumb {
   list-style: none;
+  /* 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;
   font-weight: bold;
@@ -632,6 +713,15 @@ header .slick-track {
 
 .content .slick-slide {
   background-color: #f2f2f2;
+  /* 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;
   align-items: center;
 }
@@ -683,6 +773,15 @@ header .slick-track {
 }
 
 .ot-events .event-card {
+  /* 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;
   margin-bottom: 0.5em;
@@ -690,6 +789,15 @@ header .slick-track {
 
 .ot-events .event-card > .event-poster {
   flex: 1;
+  /* 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;
@@ -704,6 +812,15 @@ header .slick-track {
 
 .ot-events .event-card > .event-summary {
   flex: 2;
+  /* 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: column;
   padding: 0.3em;
@@ -723,6 +840,15 @@ header .slick-track {
 }
 
 .ot-all-events {
+  /* 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;
 }
@@ -738,12 +864,30 @@ header .slick-track {
 }
 
 .ot-all-events .events-controls, .events-results {
+  /* 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: column;
   margin: 0 1.5em;
 }
 
 .ot-all-events .event-search {
+  /* 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: column;
   margin-bottom: 2em;
@@ -755,6 +899,15 @@ header .slick-track {
 }
 
 .ot-all-events .event-search form {
+  /* 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: column;
 }
@@ -785,6 +938,15 @@ header .slick-track {
 }
 
 .ot-all-events .event {
+  /* 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: column;
   border-bottom: solid 2px #323232;
@@ -795,6 +957,15 @@ header .slick-track {
 }
 
 .ot-all-events .event-preview {
+  /* 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;
   align-items: center;
@@ -802,6 +973,15 @@ header .slick-track {
 
 .ot-all-events .event-preview .event-poster {
   flex: 1;
+  /* 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: column;
   align-items: center;
@@ -817,6 +997,15 @@ header .slick-track {
 
 .ot-all-events .event-preview .event-summary {
   flex: 2;
+  /* 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: column;
 }
@@ -846,6 +1035,15 @@ header .slick-track {
   padding: 0.4em 0.8em;
   font-size: 1.1em;
   margin-top: 0.4em;
+  /* 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;
@@ -858,11 +1056,29 @@ header .slick-track {
 }
 
 .ot-show-event {
+  /* 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: column;
 }
 
 .ot-show-event header {
+  /* 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;
   padding: 0.5em;
@@ -891,6 +1107,15 @@ header .slick-track {
 }
 
 .ot-show-event .event-content {
+  /* 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;
   margin-bottom: 2em;
@@ -909,6 +1134,15 @@ header .slick-track {
 
 .ot-show-event .event-summary {
   flex: 1;
+  /* 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: column;
 }
@@ -949,6 +1183,15 @@ header .slick-track {
 }
 
 .ot-donors .donor-list {
+  /* 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: column;
 }
@@ -956,6 +1199,15 @@ header .slick-track {
 .ot-donors .donor-card {
   height: 80px;
   width: 100%;
+  /* 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;
   align-content: center;
@@ -982,6 +1234,15 @@ header .slick-track {
 }
 .ot-members .ot-members-list {
   list-style: none;
+  /* 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;
@@ -990,6 +1251,15 @@ header .slick-track {
 }
 .ot-members .ot-member {
   margin: 15px;
+  /* 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: column;
   align-items: center;
@@ -1004,6 +1274,15 @@ header .slick-track {
 }
 
 .ot-structures {
+  /* 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;
 }
@@ -1016,11 +1295,29 @@ header .slick-track {
   flex: 1;
 }
 .ot-structures .structure-controls, .ot-structures .structure-results {
+  /* 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: column;
   margin: 0 1.5em;
 }
 .ot-structures .structure-search {
+  /* 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: column;
   margin-bottom: 2em;
@@ -1030,6 +1327,15 @@ header .slick-track {
   font-weight: bold;
 }
 .ot-structures .structure-search form {
+  /* 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: column;
 }
@@ -1055,6 +1361,15 @@ header .slick-track {
   align-self: flex-end;
 }
 .ot-structures .structure {
+  /* 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: column;
   border-bottom: solid 2px #323232;
@@ -1064,12 +1379,30 @@ header .slick-track {
   justify-content: space-around;
 }
 .ot-structures .structure-preview {
+  /* 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;
   align-items: center;
 }
 .ot-structures .structure-preview .structure-poster {
   flex: 1;
+  /* 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: column;
   align-items: center;
@@ -1083,6 +1416,15 @@ header .slick-track {
 }
 .ot-structures .structure-preview .structure-summary {
   flex: 2;
+  /* 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: column;
 }
@@ -1107,6 +1449,15 @@ header .slick-track {
   padding: 0.4em 0.8em;
   font-size: 1.1em;
   margin-top: 0.4em;
+  /* 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;
@@ -1142,6 +1493,15 @@ header .slick-track {
 }
 
 form .row {
+  /* 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;
 }
@@ -1168,6 +1528,15 @@ form .row > div:first-child {
 }
 
 div.input {
+  /* 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: column;
 }
@@ -1206,6 +1575,15 @@ div.input span.error {
 }
 
 span.submit {
+  /* 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: flex-end;
@@ -1262,6 +1640,15 @@ form button[type=submit]:hover {
 }
 
 .fce-2col {
+  /* 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;
 }
@@ -1328,6 +1715,44 @@ form button[type=submit]:hover {
     margin: 0 5% 20px 5%;
   }
 
+  .user-toolbar {
+    text-align: center;
+  }
+
+  #login-popup {
+    /* 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;
+    position: static;
+    margin-top: 6px;
+  }
+
+  #login-popup .popup-form {
+    display: none;
+    position: static;
+    width: 100%;
+  }
+
+  #login-popup .show {
+    /* 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;
+  }
+
   #footer {
     height: auto;
     min-height: 100px;
@@ -1364,10 +1789,28 @@ form button[type=submit]:hover {
   }
 
   #menu-container .toggle-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;
   }
 
   #menu-container .toggle-dropdown {
+    /* 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;
   }
 
@@ -1378,6 +1821,15 @@ form button[type=submit]:hover {
   }
 
   #menu li .menu-label {
+    /* 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;
     align-items: center;

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

@@ -76,6 +76,15 @@ ul.dropdown-menu li {
 }
 
 ul.dropdown-displayed {
+  /* 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: column;
 }
@@ -183,6 +192,15 @@ ul.dropdown-left {
 }
 
 #menu li {
+  /* 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;
   height: 100%;
 }
@@ -192,6 +210,15 @@ ul.dropdown-left {
 }
 
 #menu li a {
+  /* 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;
   align-items: center;
@@ -433,6 +460,15 @@ ul.dropdown-left {
   margin-top: 40px;
   position: relative;
   height: 60px;
+  /* 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;
   align-items: center;
@@ -454,6 +490,15 @@ ul.dropdown-left {
 
 .footer-navbar {
   flex: 1;
+  /* 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;
   align-items: center;
@@ -484,6 +529,15 @@ footer .logo-ot {
 }
 
 .user-toolbar-username {
+  /* 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;
   align-items: center;
@@ -512,6 +566,15 @@ footer .logo-ot {
 }
 .user-toolbar .dropdown-menu li {
   height: 3.5em;
+  /* 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;
   align-items: center;
@@ -554,6 +617,15 @@ footer .logo-ot {
 }
 
 #login-popup .popup-form {
+  /* 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: column;
   justify-content: center;
@@ -571,6 +643,15 @@ footer .logo-ot {
 
 .breadcrumb {
   list-style: none;
+  /* 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;
   font-weight: bold;
@@ -632,6 +713,15 @@ header .slick-track {
 
 .content .slick-slide {
   background-color: #f2f2f2;
+  /* 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;
   align-items: center;
 }
@@ -683,6 +773,15 @@ header .slick-track {
 }
 
 .ot-events .event-card {
+  /* 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;
   margin-bottom: 0.5em;
@@ -690,6 +789,15 @@ header .slick-track {
 
 .ot-events .event-card > .event-poster {
   flex: 1;
+  /* 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;
@@ -704,6 +812,15 @@ header .slick-track {
 
 .ot-events .event-card > .event-summary {
   flex: 2;
+  /* 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: column;
   padding: 0.3em;
@@ -723,6 +840,15 @@ header .slick-track {
 }
 
 .ot-all-events {
+  /* 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;
 }
@@ -738,12 +864,30 @@ header .slick-track {
 }
 
 .ot-all-events .events-controls, .events-results {
+  /* 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: column;
   margin: 0 1.5em;
 }
 
 .ot-all-events .event-search {
+  /* 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: column;
   margin-bottom: 2em;
@@ -755,6 +899,15 @@ header .slick-track {
 }
 
 .ot-all-events .event-search form {
+  /* 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: column;
 }
@@ -785,6 +938,15 @@ header .slick-track {
 }
 
 .ot-all-events .event {
+  /* 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: column;
   border-bottom: solid 2px #323232;
@@ -795,6 +957,15 @@ header .slick-track {
 }
 
 .ot-all-events .event-preview {
+  /* 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;
   align-items: center;
@@ -802,6 +973,15 @@ header .slick-track {
 
 .ot-all-events .event-preview .event-poster {
   flex: 1;
+  /* 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: column;
   align-items: center;
@@ -817,6 +997,15 @@ header .slick-track {
 
 .ot-all-events .event-preview .event-summary {
   flex: 2;
+  /* 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: column;
 }
@@ -846,6 +1035,15 @@ header .slick-track {
   padding: 0.4em 0.8em;
   font-size: 1.1em;
   margin-top: 0.4em;
+  /* 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;
@@ -858,11 +1056,29 @@ header .slick-track {
 }
 
 .ot-show-event {
+  /* 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: column;
 }
 
 .ot-show-event header {
+  /* 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;
   padding: 0.5em;
@@ -891,6 +1107,15 @@ header .slick-track {
 }
 
 .ot-show-event .event-content {
+  /* 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;
   margin-bottom: 2em;
@@ -909,6 +1134,15 @@ header .slick-track {
 
 .ot-show-event .event-summary {
   flex: 1;
+  /* 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: column;
 }
@@ -949,6 +1183,15 @@ header .slick-track {
 }
 
 .ot-donors .donor-list {
+  /* 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: column;
 }
@@ -956,6 +1199,15 @@ header .slick-track {
 .ot-donors .donor-card {
   height: 80px;
   width: 100%;
+  /* 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;
   align-content: center;
@@ -982,6 +1234,15 @@ header .slick-track {
 }
 .ot-members .ot-members-list {
   list-style: none;
+  /* 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;
@@ -990,6 +1251,15 @@ header .slick-track {
 }
 .ot-members .ot-member {
   margin: 15px;
+  /* 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: column;
   align-items: center;
@@ -1004,6 +1274,15 @@ header .slick-track {
 }
 
 .ot-structures {
+  /* 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;
 }
@@ -1016,11 +1295,29 @@ header .slick-track {
   flex: 1;
 }
 .ot-structures .structure-controls, .ot-structures .structure-results {
+  /* 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: column;
   margin: 0 1.5em;
 }
 .ot-structures .structure-search {
+  /* 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: column;
   margin-bottom: 2em;
@@ -1030,6 +1327,15 @@ header .slick-track {
   font-weight: bold;
 }
 .ot-structures .structure-search form {
+  /* 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: column;
 }
@@ -1055,6 +1361,15 @@ header .slick-track {
   align-self: flex-end;
 }
 .ot-structures .structure {
+  /* 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: column;
   border-bottom: solid 2px #323232;
@@ -1064,12 +1379,30 @@ header .slick-track {
   justify-content: space-around;
 }
 .ot-structures .structure-preview {
+  /* 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;
   align-items: center;
 }
 .ot-structures .structure-preview .structure-poster {
   flex: 1;
+  /* 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: column;
   align-items: center;
@@ -1083,6 +1416,15 @@ header .slick-track {
 }
 .ot-structures .structure-preview .structure-summary {
   flex: 2;
+  /* 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: column;
 }
@@ -1107,6 +1449,15 @@ header .slick-track {
   padding: 0.4em 0.8em;
   font-size: 1.1em;
   margin-top: 0.4em;
+  /* 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;
@@ -1142,6 +1493,15 @@ header .slick-track {
 }
 
 form .row {
+  /* 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;
 }
@@ -1168,6 +1528,15 @@ form .row > div:first-child {
 }
 
 div.input {
+  /* 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: column;
 }
@@ -1206,6 +1575,15 @@ div.input span.error {
 }
 
 span.submit {
+  /* 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: flex-end;
@@ -1262,6 +1640,15 @@ form button[type=submit]:hover {
 }
 
 .fce-2col {
+  /* 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;
 }
@@ -1328,6 +1715,44 @@ form button[type=submit]:hover {
     margin: 0 5% 20px 5%;
   }
 
+  .user-toolbar {
+    text-align: center;
+  }
+
+  #login-popup {
+    /* 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;
+    position: static;
+    margin-top: 6px;
+  }
+
+  #login-popup .popup-form {
+    display: none;
+    position: static;
+    width: 100%;
+  }
+
+  #login-popup .show {
+    /* 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;
+  }
+
   #footer {
     height: auto;
     min-height: 100px;
@@ -1364,10 +1789,28 @@ form button[type=submit]:hover {
   }
 
   #menu-container .toggle-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;
   }
 
   #menu-container .toggle-dropdown {
+    /* 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;
   }
 
@@ -1378,6 +1821,15 @@ form button[type=submit]:hover {
   }
 
   #menu li .menu-label {
+    /* 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;
     align-items: center;

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

@@ -76,6 +76,15 @@ ul.dropdown-menu li {
 }
 
 ul.dropdown-displayed {
+  /* 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: column;
 }
@@ -183,6 +192,15 @@ ul.dropdown-left {
 }
 
 #menu li {
+  /* 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;
   height: 100%;
 }
@@ -192,6 +210,15 @@ ul.dropdown-left {
 }
 
 #menu li a {
+  /* 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;
   align-items: center;
@@ -433,6 +460,15 @@ ul.dropdown-left {
   margin-top: 40px;
   position: relative;
   height: 60px;
+  /* 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;
   align-items: center;
@@ -454,6 +490,15 @@ ul.dropdown-left {
 
 .footer-navbar {
   flex: 1;
+  /* 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;
   align-items: center;
@@ -484,6 +529,15 @@ footer .logo-ot {
 }
 
 .user-toolbar-username {
+  /* 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;
   align-items: center;
@@ -512,6 +566,15 @@ footer .logo-ot {
 }
 .user-toolbar .dropdown-menu li {
   height: 3.5em;
+  /* 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;
   align-items: center;
@@ -554,6 +617,15 @@ footer .logo-ot {
 }
 
 #login-popup .popup-form {
+  /* 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: column;
   justify-content: center;
@@ -571,6 +643,15 @@ footer .logo-ot {
 
 .breadcrumb {
   list-style: none;
+  /* 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;
   font-weight: bold;
@@ -632,6 +713,15 @@ header .slick-track {
 
 .content .slick-slide {
   background-color: #f2f2f2;
+  /* 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;
   align-items: center;
 }
@@ -683,6 +773,15 @@ header .slick-track {
 }
 
 .ot-events .event-card {
+  /* 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;
   margin-bottom: 0.5em;
@@ -690,6 +789,15 @@ header .slick-track {
 
 .ot-events .event-card > .event-poster {
   flex: 1;
+  /* 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;
@@ -704,6 +812,15 @@ header .slick-track {
 
 .ot-events .event-card > .event-summary {
   flex: 2;
+  /* 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: column;
   padding: 0.3em;
@@ -723,6 +840,15 @@ header .slick-track {
 }
 
 .ot-all-events {
+  /* 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;
 }
@@ -738,12 +864,30 @@ header .slick-track {
 }
 
 .ot-all-events .events-controls, .events-results {
+  /* 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: column;
   margin: 0 1.5em;
 }
 
 .ot-all-events .event-search {
+  /* 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: column;
   margin-bottom: 2em;
@@ -755,6 +899,15 @@ header .slick-track {
 }
 
 .ot-all-events .event-search form {
+  /* 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: column;
 }
@@ -785,6 +938,15 @@ header .slick-track {
 }
 
 .ot-all-events .event {
+  /* 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: column;
   border-bottom: solid 2px #323232;
@@ -795,6 +957,15 @@ header .slick-track {
 }
 
 .ot-all-events .event-preview {
+  /* 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;
   align-items: center;
@@ -802,6 +973,15 @@ header .slick-track {
 
 .ot-all-events .event-preview .event-poster {
   flex: 1;
+  /* 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: column;
   align-items: center;
@@ -817,6 +997,15 @@ header .slick-track {
 
 .ot-all-events .event-preview .event-summary {
   flex: 2;
+  /* 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: column;
 }
@@ -846,6 +1035,15 @@ header .slick-track {
   padding: 0.4em 0.8em;
   font-size: 1.1em;
   margin-top: 0.4em;
+  /* 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;
@@ -858,11 +1056,29 @@ header .slick-track {
 }
 
 .ot-show-event {
+  /* 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: column;
 }
 
 .ot-show-event header {
+  /* 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;
   padding: 0.5em;
@@ -891,6 +1107,15 @@ header .slick-track {
 }
 
 .ot-show-event .event-content {
+  /* 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;
   margin-bottom: 2em;
@@ -909,6 +1134,15 @@ header .slick-track {
 
 .ot-show-event .event-summary {
   flex: 1;
+  /* 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: column;
 }
@@ -949,6 +1183,15 @@ header .slick-track {
 }
 
 .ot-donors .donor-list {
+  /* 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: column;
 }
@@ -956,6 +1199,15 @@ header .slick-track {
 .ot-donors .donor-card {
   height: 80px;
   width: 100%;
+  /* 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;
   align-content: center;
@@ -982,6 +1234,15 @@ header .slick-track {
 }
 .ot-members .ot-members-list {
   list-style: none;
+  /* 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;
@@ -990,6 +1251,15 @@ header .slick-track {
 }
 .ot-members .ot-member {
   margin: 15px;
+  /* 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: column;
   align-items: center;
@@ -1004,6 +1274,15 @@ header .slick-track {
 }
 
 .ot-structures {
+  /* 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;
 }
@@ -1016,11 +1295,29 @@ header .slick-track {
   flex: 1;
 }
 .ot-structures .structure-controls, .ot-structures .structure-results {
+  /* 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: column;
   margin: 0 1.5em;
 }
 .ot-structures .structure-search {
+  /* 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: column;
   margin-bottom: 2em;
@@ -1030,6 +1327,15 @@ header .slick-track {
   font-weight: bold;
 }
 .ot-structures .structure-search form {
+  /* 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: column;
 }
@@ -1055,6 +1361,15 @@ header .slick-track {
   align-self: flex-end;
 }
 .ot-structures .structure {
+  /* 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: column;
   border-bottom: solid 2px #323232;
@@ -1064,12 +1379,30 @@ header .slick-track {
   justify-content: space-around;
 }
 .ot-structures .structure-preview {
+  /* 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;
   align-items: center;
 }
 .ot-structures .structure-preview .structure-poster {
   flex: 1;
+  /* 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: column;
   align-items: center;
@@ -1083,6 +1416,15 @@ header .slick-track {
 }
 .ot-structures .structure-preview .structure-summary {
   flex: 2;
+  /* 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: column;
 }
@@ -1107,6 +1449,15 @@ header .slick-track {
   padding: 0.4em 0.8em;
   font-size: 1.1em;
   margin-top: 0.4em;
+  /* 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;
@@ -1142,6 +1493,15 @@ header .slick-track {
 }
 
 form .row {
+  /* 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;
 }
@@ -1168,6 +1528,15 @@ form .row > div:first-child {
 }
 
 div.input {
+  /* 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: column;
 }
@@ -1206,6 +1575,15 @@ div.input span.error {
 }
 
 span.submit {
+  /* 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: flex-end;
@@ -1262,6 +1640,15 @@ form button[type=submit]:hover {
 }
 
 .fce-2col {
+  /* 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;
 }
@@ -1328,6 +1715,44 @@ form button[type=submit]:hover {
     margin: 0 5% 20px 5%;
   }
 
+  .user-toolbar {
+    text-align: center;
+  }
+
+  #login-popup {
+    /* 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;
+    position: static;
+    margin-top: 6px;
+  }
+
+  #login-popup .popup-form {
+    display: none;
+    position: static;
+    width: 100%;
+  }
+
+  #login-popup .show {
+    /* 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;
+  }
+
   #footer {
     height: auto;
     min-height: 100px;
@@ -1364,10 +1789,28 @@ form button[type=submit]:hover {
   }
 
   #menu-container .toggle-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;
   }
 
   #menu-container .toggle-dropdown {
+    /* 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;
   }
 
@@ -1378,6 +1821,15 @@ form button[type=submit]:hover {
   }
 
   #menu li .menu-label {
+    /* 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;
     align-items: center;

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

@@ -76,6 +76,15 @@ ul.dropdown-menu li {
 }
 
 ul.dropdown-displayed {
+  /* 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: column;
 }
@@ -183,6 +192,15 @@ ul.dropdown-left {
 }
 
 #menu li {
+  /* 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;
   height: 100%;
 }
@@ -192,6 +210,15 @@ ul.dropdown-left {
 }
 
 #menu li a {
+  /* 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;
   align-items: center;
@@ -433,6 +460,15 @@ ul.dropdown-left {
   margin-top: 40px;
   position: relative;
   height: 60px;
+  /* 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;
   align-items: center;
@@ -454,6 +490,15 @@ ul.dropdown-left {
 
 .footer-navbar {
   flex: 1;
+  /* 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;
   align-items: center;
@@ -484,6 +529,15 @@ footer .logo-ot {
 }
 
 .user-toolbar-username {
+  /* 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;
   align-items: center;
@@ -512,6 +566,15 @@ footer .logo-ot {
 }
 .user-toolbar .dropdown-menu li {
   height: 3.5em;
+  /* 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;
   align-items: center;
@@ -554,6 +617,15 @@ footer .logo-ot {
 }
 
 #login-popup .popup-form {
+  /* 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: column;
   justify-content: center;
@@ -571,6 +643,15 @@ footer .logo-ot {
 
 .breadcrumb {
   list-style: none;
+  /* 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;
   font-weight: bold;
@@ -632,6 +713,15 @@ header .slick-track {
 
 .content .slick-slide {
   background-color: #f2f2f2;
+  /* 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;
   align-items: center;
 }
@@ -683,6 +773,15 @@ header .slick-track {
 }
 
 .ot-events .event-card {
+  /* 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;
   margin-bottom: 0.5em;
@@ -690,6 +789,15 @@ header .slick-track {
 
 .ot-events .event-card > .event-poster {
   flex: 1;
+  /* 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;
@@ -704,6 +812,15 @@ header .slick-track {
 
 .ot-events .event-card > .event-summary {
   flex: 2;
+  /* 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: column;
   padding: 0.3em;
@@ -723,6 +840,15 @@ header .slick-track {
 }
 
 .ot-all-events {
+  /* 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;
 }
@@ -738,12 +864,30 @@ header .slick-track {
 }
 
 .ot-all-events .events-controls, .events-results {
+  /* 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: column;
   margin: 0 1.5em;
 }
 
 .ot-all-events .event-search {
+  /* 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: column;
   margin-bottom: 2em;
@@ -755,6 +899,15 @@ header .slick-track {
 }
 
 .ot-all-events .event-search form {
+  /* 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: column;
 }
@@ -785,6 +938,15 @@ header .slick-track {
 }
 
 .ot-all-events .event {
+  /* 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: column;
   border-bottom: solid 2px #323232;
@@ -795,6 +957,15 @@ header .slick-track {
 }
 
 .ot-all-events .event-preview {
+  /* 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;
   align-items: center;
@@ -802,6 +973,15 @@ header .slick-track {
 
 .ot-all-events .event-preview .event-poster {
   flex: 1;
+  /* 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: column;
   align-items: center;
@@ -817,6 +997,15 @@ header .slick-track {
 
 .ot-all-events .event-preview .event-summary {
   flex: 2;
+  /* 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: column;
 }
@@ -846,6 +1035,15 @@ header .slick-track {
   padding: 0.4em 0.8em;
   font-size: 1.1em;
   margin-top: 0.4em;
+  /* 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;
@@ -858,11 +1056,29 @@ header .slick-track {
 }
 
 .ot-show-event {
+  /* 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: column;
 }
 
 .ot-show-event header {
+  /* 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;
   padding: 0.5em;
@@ -891,6 +1107,15 @@ header .slick-track {
 }
 
 .ot-show-event .event-content {
+  /* 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;
   margin-bottom: 2em;
@@ -909,6 +1134,15 @@ header .slick-track {
 
 .ot-show-event .event-summary {
   flex: 1;
+  /* 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: column;
 }
@@ -949,6 +1183,15 @@ header .slick-track {
 }
 
 .ot-donors .donor-list {
+  /* 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: column;
 }
@@ -956,6 +1199,15 @@ header .slick-track {
 .ot-donors .donor-card {
   height: 80px;
   width: 100%;
+  /* 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;
   align-content: center;
@@ -982,6 +1234,15 @@ header .slick-track {
 }
 .ot-members .ot-members-list {
   list-style: none;
+  /* 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;
@@ -990,6 +1251,15 @@ header .slick-track {
 }
 .ot-members .ot-member {
   margin: 15px;
+  /* 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: column;
   align-items: center;
@@ -1004,6 +1274,15 @@ header .slick-track {
 }
 
 .ot-structures {
+  /* 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;
 }
@@ -1016,11 +1295,29 @@ header .slick-track {
   flex: 1;
 }
 .ot-structures .structure-controls, .ot-structures .structure-results {
+  /* 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: column;
   margin: 0 1.5em;
 }
 .ot-structures .structure-search {
+  /* 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: column;
   margin-bottom: 2em;
@@ -1030,6 +1327,15 @@ header .slick-track {
   font-weight: bold;
 }
 .ot-structures .structure-search form {
+  /* 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: column;
 }
@@ -1055,6 +1361,15 @@ header .slick-track {
   align-self: flex-end;
 }
 .ot-structures .structure {
+  /* 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: column;
   border-bottom: solid 2px #323232;
@@ -1064,12 +1379,30 @@ header .slick-track {
   justify-content: space-around;
 }
 .ot-structures .structure-preview {
+  /* 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;
   align-items: center;
 }
 .ot-structures .structure-preview .structure-poster {
   flex: 1;
+  /* 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: column;
   align-items: center;
@@ -1083,6 +1416,15 @@ header .slick-track {
 }
 .ot-structures .structure-preview .structure-summary {
   flex: 2;
+  /* 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: column;
 }
@@ -1107,6 +1449,15 @@ header .slick-track {
   padding: 0.4em 0.8em;
   font-size: 1.1em;
   margin-top: 0.4em;
+  /* 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;
@@ -1142,6 +1493,15 @@ header .slick-track {
 }
 
 form .row {
+  /* 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;
 }
@@ -1168,6 +1528,15 @@ form .row > div:first-child {
 }
 
 div.input {
+  /* 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: column;
 }
@@ -1206,6 +1575,15 @@ div.input span.error {
 }
 
 span.submit {
+  /* 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: flex-end;
@@ -1262,6 +1640,15 @@ form button[type=submit]:hover {
 }
 
 .fce-2col {
+  /* 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;
 }
@@ -1328,6 +1715,44 @@ form button[type=submit]:hover {
     margin: 0 5% 20px 5%;
   }
 
+  .user-toolbar {
+    text-align: center;
+  }
+
+  #login-popup {
+    /* 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;
+    position: static;
+    margin-top: 6px;
+  }
+
+  #login-popup .popup-form {
+    display: none;
+    position: static;
+    width: 100%;
+  }
+
+  #login-popup .show {
+    /* 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;
+  }
+
   #footer {
     height: auto;
     min-height: 100px;
@@ -1364,10 +1789,28 @@ form button[type=submit]:hover {
   }
 
   #menu-container .toggle-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;
   }
 
   #menu-container .toggle-dropdown {
+    /* 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;
   }
 
@@ -1378,6 +1821,15 @@ form button[type=submit]:hover {
   }
 
   #menu li .menu-label {
+    /* 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;
     align-items: center;

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

@@ -76,6 +76,15 @@ ul.dropdown-menu li {
 }
 
 ul.dropdown-displayed {
+  /* 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: column;
 }
@@ -183,6 +192,15 @@ ul.dropdown-left {
 }
 
 #menu li {
+  /* 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;
   height: 100%;
 }
@@ -192,6 +210,15 @@ ul.dropdown-left {
 }
 
 #menu li a {
+  /* 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;
   align-items: center;
@@ -433,6 +460,15 @@ ul.dropdown-left {
   margin-top: 40px;
   position: relative;
   height: 60px;
+  /* 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;
   align-items: center;
@@ -454,6 +490,15 @@ ul.dropdown-left {
 
 .footer-navbar {
   flex: 1;
+  /* 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;
   align-items: center;
@@ -484,6 +529,15 @@ footer .logo-ot {
 }
 
 .user-toolbar-username {
+  /* 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;
   align-items: center;
@@ -512,6 +566,15 @@ footer .logo-ot {
 }
 .user-toolbar .dropdown-menu li {
   height: 3.5em;
+  /* 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;
   align-items: center;
@@ -554,6 +617,15 @@ footer .logo-ot {
 }
 
 #login-popup .popup-form {
+  /* 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: column;
   justify-content: center;
@@ -571,6 +643,15 @@ footer .logo-ot {
 
 .breadcrumb {
   list-style: none;
+  /* 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;
   font-weight: bold;
@@ -632,6 +713,15 @@ header .slick-track {
 
 .content .slick-slide {
   background-color: #f2f2f2;
+  /* 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;
   align-items: center;
 }
@@ -683,6 +773,15 @@ header .slick-track {
 }
 
 .ot-events .event-card {
+  /* 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;
   margin-bottom: 0.5em;
@@ -690,6 +789,15 @@ header .slick-track {
 
 .ot-events .event-card > .event-poster {
   flex: 1;
+  /* 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;
@@ -704,6 +812,15 @@ header .slick-track {
 
 .ot-events .event-card > .event-summary {
   flex: 2;
+  /* 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: column;
   padding: 0.3em;
@@ -723,6 +840,15 @@ header .slick-track {
 }
 
 .ot-all-events {
+  /* 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;
 }
@@ -738,12 +864,30 @@ header .slick-track {
 }
 
 .ot-all-events .events-controls, .events-results {
+  /* 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: column;
   margin: 0 1.5em;
 }
 
 .ot-all-events .event-search {
+  /* 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: column;
   margin-bottom: 2em;
@@ -755,6 +899,15 @@ header .slick-track {
 }
 
 .ot-all-events .event-search form {
+  /* 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: column;
 }
@@ -785,6 +938,15 @@ header .slick-track {
 }
 
 .ot-all-events .event {
+  /* 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: column;
   border-bottom: solid 2px #323232;
@@ -795,6 +957,15 @@ header .slick-track {
 }
 
 .ot-all-events .event-preview {
+  /* 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;
   align-items: center;
@@ -802,6 +973,15 @@ header .slick-track {
 
 .ot-all-events .event-preview .event-poster {
   flex: 1;
+  /* 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: column;
   align-items: center;
@@ -817,6 +997,15 @@ header .slick-track {
 
 .ot-all-events .event-preview .event-summary {
   flex: 2;
+  /* 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: column;
 }
@@ -846,6 +1035,15 @@ header .slick-track {
   padding: 0.4em 0.8em;
   font-size: 1.1em;
   margin-top: 0.4em;
+  /* 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;
@@ -858,11 +1056,29 @@ header .slick-track {
 }
 
 .ot-show-event {
+  /* 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: column;
 }
 
 .ot-show-event header {
+  /* 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;
   padding: 0.5em;
@@ -891,6 +1107,15 @@ header .slick-track {
 }
 
 .ot-show-event .event-content {
+  /* 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;
   margin-bottom: 2em;
@@ -909,6 +1134,15 @@ header .slick-track {
 
 .ot-show-event .event-summary {
   flex: 1;
+  /* 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: column;
 }
@@ -949,6 +1183,15 @@ header .slick-track {
 }
 
 .ot-donors .donor-list {
+  /* 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: column;
 }
@@ -956,6 +1199,15 @@ header .slick-track {
 .ot-donors .donor-card {
   height: 80px;
   width: 100%;
+  /* 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;
   align-content: center;
@@ -982,6 +1234,15 @@ header .slick-track {
 }
 .ot-members .ot-members-list {
   list-style: none;
+  /* 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;
@@ -990,6 +1251,15 @@ header .slick-track {
 }
 .ot-members .ot-member {
   margin: 15px;
+  /* 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: column;
   align-items: center;
@@ -1004,6 +1274,15 @@ header .slick-track {
 }
 
 .ot-structures {
+  /* 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;
 }
@@ -1016,11 +1295,29 @@ header .slick-track {
   flex: 1;
 }
 .ot-structures .structure-controls, .ot-structures .structure-results {
+  /* 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: column;
   margin: 0 1.5em;
 }
 .ot-structures .structure-search {
+  /* 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: column;
   margin-bottom: 2em;
@@ -1030,6 +1327,15 @@ header .slick-track {
   font-weight: bold;
 }
 .ot-structures .structure-search form {
+  /* 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: column;
 }
@@ -1055,6 +1361,15 @@ header .slick-track {
   align-self: flex-end;
 }
 .ot-structures .structure {
+  /* 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: column;
   border-bottom: solid 2px #323232;
@@ -1064,12 +1379,30 @@ header .slick-track {
   justify-content: space-around;
 }
 .ot-structures .structure-preview {
+  /* 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;
   align-items: center;
 }
 .ot-structures .structure-preview .structure-poster {
   flex: 1;
+  /* 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: column;
   align-items: center;
@@ -1083,6 +1416,15 @@ header .slick-track {
 }
 .ot-structures .structure-preview .structure-summary {
   flex: 2;
+  /* 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: column;
 }
@@ -1107,6 +1449,15 @@ header .slick-track {
   padding: 0.4em 0.8em;
   font-size: 1.1em;
   margin-top: 0.4em;
+  /* 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;
@@ -1142,6 +1493,15 @@ header .slick-track {
 }
 
 form .row {
+  /* 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;
 }
@@ -1168,6 +1528,15 @@ form .row > div:first-child {
 }
 
 div.input {
+  /* 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: column;
 }
@@ -1206,6 +1575,15 @@ div.input span.error {
 }
 
 span.submit {
+  /* 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: flex-end;
@@ -1262,6 +1640,15 @@ form button[type=submit]:hover {
 }
 
 .fce-2col {
+  /* 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;
 }
@@ -1328,6 +1715,44 @@ form button[type=submit]:hover {
     margin: 0 5% 20px 5%;
   }
 
+  .user-toolbar {
+    text-align: center;
+  }
+
+  #login-popup {
+    /* 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;
+    position: static;
+    margin-top: 6px;
+  }
+
+  #login-popup .popup-form {
+    display: none;
+    position: static;
+    width: 100%;
+  }
+
+  #login-popup .show {
+    /* 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;
+  }
+
   #footer {
     height: auto;
     min-height: 100px;
@@ -1364,10 +1789,28 @@ form button[type=submit]:hover {
   }
 
   #menu-container .toggle-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;
   }
 
   #menu-container .toggle-dropdown {
+    /* 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;
   }
 
@@ -1378,6 +1821,15 @@ form button[type=submit]:hover {
   }
 
   #menu li .menu-label {
+    /* 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;
     align-items: center;

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

@@ -76,6 +76,15 @@ ul.dropdown-menu li {
 }
 
 ul.dropdown-displayed {
+  /* 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: column;
 }
@@ -183,6 +192,15 @@ ul.dropdown-left {
 }
 
 #menu li {
+  /* 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;
   height: 100%;
 }
@@ -192,6 +210,15 @@ ul.dropdown-left {
 }
 
 #menu li a {
+  /* 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;
   align-items: center;
@@ -433,6 +460,15 @@ ul.dropdown-left {
   margin-top: 40px;
   position: relative;
   height: 60px;
+  /* 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;
   align-items: center;
@@ -454,6 +490,15 @@ ul.dropdown-left {
 
 .footer-navbar {
   flex: 1;
+  /* 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;
   align-items: center;
@@ -484,6 +529,15 @@ footer .logo-ot {
 }
 
 .user-toolbar-username {
+  /* 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;
   align-items: center;
@@ -512,6 +566,15 @@ footer .logo-ot {
 }
 .user-toolbar .dropdown-menu li {
   height: 3.5em;
+  /* 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;
   align-items: center;
@@ -554,6 +617,15 @@ footer .logo-ot {
 }
 
 #login-popup .popup-form {
+  /* 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: column;
   justify-content: center;
@@ -571,6 +643,15 @@ footer .logo-ot {
 
 .breadcrumb {
   list-style: none;
+  /* 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;
   font-weight: bold;
@@ -632,6 +713,15 @@ header .slick-track {
 
 .content .slick-slide {
   background-color: #f2f2f2;
+  /* 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;
   align-items: center;
 }
@@ -683,6 +773,15 @@ header .slick-track {
 }
 
 .ot-events .event-card {
+  /* 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;
   margin-bottom: 0.5em;
@@ -690,6 +789,15 @@ header .slick-track {
 
 .ot-events .event-card > .event-poster {
   flex: 1;
+  /* 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;
@@ -704,6 +812,15 @@ header .slick-track {
 
 .ot-events .event-card > .event-summary {
   flex: 2;
+  /* 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: column;
   padding: 0.3em;
@@ -723,6 +840,15 @@ header .slick-track {
 }
 
 .ot-all-events {
+  /* 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;
 }
@@ -738,12 +864,30 @@ header .slick-track {
 }
 
 .ot-all-events .events-controls, .events-results {
+  /* 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: column;
   margin: 0 1.5em;
 }
 
 .ot-all-events .event-search {
+  /* 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: column;
   margin-bottom: 2em;
@@ -755,6 +899,15 @@ header .slick-track {
 }
 
 .ot-all-events .event-search form {
+  /* 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: column;
 }
@@ -785,6 +938,15 @@ header .slick-track {
 }
 
 .ot-all-events .event {
+  /* 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: column;
   border-bottom: solid 2px #323232;
@@ -795,6 +957,15 @@ header .slick-track {
 }
 
 .ot-all-events .event-preview {
+  /* 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;
   align-items: center;
@@ -802,6 +973,15 @@ header .slick-track {
 
 .ot-all-events .event-preview .event-poster {
   flex: 1;
+  /* 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: column;
   align-items: center;
@@ -817,6 +997,15 @@ header .slick-track {
 
 .ot-all-events .event-preview .event-summary {
   flex: 2;
+  /* 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: column;
 }
@@ -846,6 +1035,15 @@ header .slick-track {
   padding: 0.4em 0.8em;
   font-size: 1.1em;
   margin-top: 0.4em;
+  /* 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;
@@ -858,11 +1056,29 @@ header .slick-track {
 }
 
 .ot-show-event {
+  /* 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: column;
 }
 
 .ot-show-event header {
+  /* 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;
   padding: 0.5em;
@@ -891,6 +1107,15 @@ header .slick-track {
 }
 
 .ot-show-event .event-content {
+  /* 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;
   margin-bottom: 2em;
@@ -909,6 +1134,15 @@ header .slick-track {
 
 .ot-show-event .event-summary {
   flex: 1;
+  /* 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: column;
 }
@@ -949,6 +1183,15 @@ header .slick-track {
 }
 
 .ot-donors .donor-list {
+  /* 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: column;
 }
@@ -956,6 +1199,15 @@ header .slick-track {
 .ot-donors .donor-card {
   height: 80px;
   width: 100%;
+  /* 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;
   align-content: center;
@@ -982,6 +1234,15 @@ header .slick-track {
 }
 .ot-members .ot-members-list {
   list-style: none;
+  /* 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;
@@ -990,6 +1251,15 @@ header .slick-track {
 }
 .ot-members .ot-member {
   margin: 15px;
+  /* 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: column;
   align-items: center;
@@ -1004,6 +1274,15 @@ header .slick-track {
 }
 
 .ot-structures {
+  /* 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;
 }
@@ -1016,11 +1295,29 @@ header .slick-track {
   flex: 1;
 }
 .ot-structures .structure-controls, .ot-structures .structure-results {
+  /* 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: column;
   margin: 0 1.5em;
 }
 .ot-structures .structure-search {
+  /* 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: column;
   margin-bottom: 2em;
@@ -1030,6 +1327,15 @@ header .slick-track {
   font-weight: bold;
 }
 .ot-structures .structure-search form {
+  /* 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: column;
 }
@@ -1055,6 +1361,15 @@ header .slick-track {
   align-self: flex-end;
 }
 .ot-structures .structure {
+  /* 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: column;
   border-bottom: solid 2px #323232;
@@ -1064,12 +1379,30 @@ header .slick-track {
   justify-content: space-around;
 }
 .ot-structures .structure-preview {
+  /* 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;
   align-items: center;
 }
 .ot-structures .structure-preview .structure-poster {
   flex: 1;
+  /* 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: column;
   align-items: center;
@@ -1083,6 +1416,15 @@ header .slick-track {
 }
 .ot-structures .structure-preview .structure-summary {
   flex: 2;
+  /* 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: column;
 }
@@ -1107,6 +1449,15 @@ header .slick-track {
   padding: 0.4em 0.8em;
   font-size: 1.1em;
   margin-top: 0.4em;
+  /* 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;
@@ -1142,6 +1493,15 @@ header .slick-track {
 }
 
 form .row {
+  /* 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;
 }
@@ -1168,6 +1528,15 @@ form .row > div:first-child {
 }
 
 div.input {
+  /* 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: column;
 }
@@ -1206,6 +1575,15 @@ div.input span.error {
 }
 
 span.submit {
+  /* 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: flex-end;
@@ -1262,6 +1640,15 @@ form button[type=submit]:hover {
 }
 
 .fce-2col {
+  /* 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;
 }
@@ -1328,6 +1715,44 @@ form button[type=submit]:hover {
     margin: 0 5% 20px 5%;
   }
 
+  .user-toolbar {
+    text-align: center;
+  }
+
+  #login-popup {
+    /* 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;
+    position: static;
+    margin-top: 6px;
+  }
+
+  #login-popup .popup-form {
+    display: none;
+    position: static;
+    width: 100%;
+  }
+
+  #login-popup .show {
+    /* 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;
+  }
+
   #footer {
     height: auto;
     min-height: 100px;
@@ -1364,10 +1789,28 @@ form button[type=submit]:hover {
   }
 
   #menu-container .toggle-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;
   }
 
   #menu-container .toggle-dropdown {
+    /* 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;
   }
 
@@ -1378,6 +1821,15 @@ form button[type=submit]:hover {
   }
 
   #menu li .menu-label {
+    /* 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;
     align-items: center;

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

@@ -76,6 +76,15 @@ ul.dropdown-menu li {
 }
 
 ul.dropdown-displayed {
+  /* 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: column;
 }
@@ -183,6 +192,15 @@ ul.dropdown-left {
 }
 
 #menu li {
+  /* 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;
   height: 100%;
 }
@@ -192,6 +210,15 @@ ul.dropdown-left {
 }
 
 #menu li a {
+  /* 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;
   align-items: center;
@@ -433,6 +460,15 @@ ul.dropdown-left {
   margin-top: 40px;
   position: relative;
   height: 60px;
+  /* 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;
   align-items: center;
@@ -454,6 +490,15 @@ ul.dropdown-left {
 
 .footer-navbar {
   flex: 1;
+  /* 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;
   align-items: center;
@@ -484,6 +529,15 @@ footer .logo-ot {
 }
 
 .user-toolbar-username {
+  /* 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;
   align-items: center;
@@ -512,6 +566,15 @@ footer .logo-ot {
 }
 .user-toolbar .dropdown-menu li {
   height: 3.5em;
+  /* 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;
   align-items: center;
@@ -554,6 +617,15 @@ footer .logo-ot {
 }
 
 #login-popup .popup-form {
+  /* 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: column;
   justify-content: center;
@@ -571,6 +643,15 @@ footer .logo-ot {
 
 .breadcrumb {
   list-style: none;
+  /* 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;
   font-weight: bold;
@@ -632,6 +713,15 @@ header .slick-track {
 
 .content .slick-slide {
   background-color: #f2f2f2;
+  /* 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;
   align-items: center;
 }
@@ -683,6 +773,15 @@ header .slick-track {
 }
 
 .ot-events .event-card {
+  /* 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;
   margin-bottom: 0.5em;
@@ -690,6 +789,15 @@ header .slick-track {
 
 .ot-events .event-card > .event-poster {
   flex: 1;
+  /* 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;
@@ -704,6 +812,15 @@ header .slick-track {
 
 .ot-events .event-card > .event-summary {
   flex: 2;
+  /* 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: column;
   padding: 0.3em;
@@ -723,6 +840,15 @@ header .slick-track {
 }
 
 .ot-all-events {
+  /* 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;
 }
@@ -738,12 +864,30 @@ header .slick-track {
 }
 
 .ot-all-events .events-controls, .events-results {
+  /* 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: column;
   margin: 0 1.5em;
 }
 
 .ot-all-events .event-search {
+  /* 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: column;
   margin-bottom: 2em;
@@ -755,6 +899,15 @@ header .slick-track {
 }
 
 .ot-all-events .event-search form {
+  /* 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: column;
 }
@@ -785,6 +938,15 @@ header .slick-track {
 }
 
 .ot-all-events .event {
+  /* 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: column;
   border-bottom: solid 2px #323232;
@@ -795,6 +957,15 @@ header .slick-track {
 }
 
 .ot-all-events .event-preview {
+  /* 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;
   align-items: center;
@@ -802,6 +973,15 @@ header .slick-track {
 
 .ot-all-events .event-preview .event-poster {
   flex: 1;
+  /* 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: column;
   align-items: center;
@@ -817,6 +997,15 @@ header .slick-track {
 
 .ot-all-events .event-preview .event-summary {
   flex: 2;
+  /* 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: column;
 }
@@ -846,6 +1035,15 @@ header .slick-track {
   padding: 0.4em 0.8em;
   font-size: 1.1em;
   margin-top: 0.4em;
+  /* 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;
@@ -858,11 +1056,29 @@ header .slick-track {
 }
 
 .ot-show-event {
+  /* 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: column;
 }
 
 .ot-show-event header {
+  /* 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;
   padding: 0.5em;
@@ -891,6 +1107,15 @@ header .slick-track {
 }
 
 .ot-show-event .event-content {
+  /* 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;
   margin-bottom: 2em;
@@ -909,6 +1134,15 @@ header .slick-track {
 
 .ot-show-event .event-summary {
   flex: 1;
+  /* 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: column;
 }
@@ -949,6 +1183,15 @@ header .slick-track {
 }
 
 .ot-donors .donor-list {
+  /* 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: column;
 }
@@ -956,6 +1199,15 @@ header .slick-track {
 .ot-donors .donor-card {
   height: 80px;
   width: 100%;
+  /* 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;
   align-content: center;
@@ -982,6 +1234,15 @@ header .slick-track {
 }
 .ot-members .ot-members-list {
   list-style: none;
+  /* 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;
@@ -990,6 +1251,15 @@ header .slick-track {
 }
 .ot-members .ot-member {
   margin: 15px;
+  /* 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: column;
   align-items: center;
@@ -1004,6 +1274,15 @@ header .slick-track {
 }
 
 .ot-structures {
+  /* 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;
 }
@@ -1016,11 +1295,29 @@ header .slick-track {
   flex: 1;
 }
 .ot-structures .structure-controls, .ot-structures .structure-results {
+  /* 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: column;
   margin: 0 1.5em;
 }
 .ot-structures .structure-search {
+  /* 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: column;
   margin-bottom: 2em;
@@ -1030,6 +1327,15 @@ header .slick-track {
   font-weight: bold;
 }
 .ot-structures .structure-search form {
+  /* 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: column;
 }
@@ -1055,6 +1361,15 @@ header .slick-track {
   align-self: flex-end;
 }
 .ot-structures .structure {
+  /* 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: column;
   border-bottom: solid 2px #323232;
@@ -1064,12 +1379,30 @@ header .slick-track {
   justify-content: space-around;
 }
 .ot-structures .structure-preview {
+  /* 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;
   align-items: center;
 }
 .ot-structures .structure-preview .structure-poster {
   flex: 1;
+  /* 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: column;
   align-items: center;
@@ -1083,6 +1416,15 @@ header .slick-track {
 }
 .ot-structures .structure-preview .structure-summary {
   flex: 2;
+  /* 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: column;
 }
@@ -1107,6 +1449,15 @@ header .slick-track {
   padding: 0.4em 0.8em;
   font-size: 1.1em;
   margin-top: 0.4em;
+  /* 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;
@@ -1142,6 +1493,15 @@ header .slick-track {
 }
 
 form .row {
+  /* 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;
 }
@@ -1168,6 +1528,15 @@ form .row > div:first-child {
 }
 
 div.input {
+  /* 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: column;
 }
@@ -1206,6 +1575,15 @@ div.input span.error {
 }
 
 span.submit {
+  /* 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: flex-end;
@@ -1262,6 +1640,15 @@ form button[type=submit]:hover {
 }
 
 .fce-2col {
+  /* 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;
 }
@@ -1328,6 +1715,44 @@ form button[type=submit]:hover {
     margin: 0 5% 20px 5%;
   }
 
+  .user-toolbar {
+    text-align: center;
+  }
+
+  #login-popup {
+    /* 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;
+    position: static;
+    margin-top: 6px;
+  }
+
+  #login-popup .popup-form {
+    display: none;
+    position: static;
+    width: 100%;
+  }
+
+  #login-popup .show {
+    /* 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;
+  }
+
   #footer {
     height: auto;
     min-height: 100px;
@@ -1364,10 +1789,28 @@ form button[type=submit]:hover {
   }
 
   #menu-container .toggle-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;
   }
 
   #menu-container .toggle-dropdown {
+    /* 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;
   }
 
@@ -1378,6 +1821,15 @@ form button[type=submit]:hover {
   }
 
   #menu li .menu-label {
+    /* 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;
     align-items: center;

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

@@ -76,6 +76,15 @@ ul.dropdown-menu li {
 }
 
 ul.dropdown-displayed {
+  /* 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: column;
 }
@@ -183,6 +192,15 @@ ul.dropdown-left {
 }
 
 #menu li {
+  /* 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;
   height: 100%;
 }
@@ -192,6 +210,15 @@ ul.dropdown-left {
 }
 
 #menu li a {
+  /* 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;
   align-items: center;
@@ -433,6 +460,15 @@ ul.dropdown-left {
   margin-top: 40px;
   position: relative;
   height: 60px;
+  /* 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;
   align-items: center;
@@ -454,6 +490,15 @@ ul.dropdown-left {
 
 .footer-navbar {
   flex: 1;
+  /* 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;
   align-items: center;
@@ -484,6 +529,15 @@ footer .logo-ot {
 }
 
 .user-toolbar-username {
+  /* 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;
   align-items: center;
@@ -512,6 +566,15 @@ footer .logo-ot {
 }
 .user-toolbar .dropdown-menu li {
   height: 3.5em;
+  /* 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;
   align-items: center;
@@ -554,6 +617,15 @@ footer .logo-ot {
 }
 
 #login-popup .popup-form {
+  /* 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: column;
   justify-content: center;
@@ -571,6 +643,15 @@ footer .logo-ot {
 
 .breadcrumb {
   list-style: none;
+  /* 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;
   font-weight: bold;
@@ -632,6 +713,15 @@ header .slick-track {
 
 .content .slick-slide {
   background-color: #f2f2f2;
+  /* 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;
   align-items: center;
 }
@@ -683,6 +773,15 @@ header .slick-track {
 }
 
 .ot-events .event-card {
+  /* 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;
   margin-bottom: 0.5em;
@@ -690,6 +789,15 @@ header .slick-track {
 
 .ot-events .event-card > .event-poster {
   flex: 1;
+  /* 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;
@@ -704,6 +812,15 @@ header .slick-track {
 
 .ot-events .event-card > .event-summary {
   flex: 2;
+  /* 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: column;
   padding: 0.3em;
@@ -723,6 +840,15 @@ header .slick-track {
 }
 
 .ot-all-events {
+  /* 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;
 }
@@ -738,12 +864,30 @@ header .slick-track {
 }
 
 .ot-all-events .events-controls, .events-results {
+  /* 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: column;
   margin: 0 1.5em;
 }
 
 .ot-all-events .event-search {
+  /* 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: column;
   margin-bottom: 2em;
@@ -755,6 +899,15 @@ header .slick-track {
 }
 
 .ot-all-events .event-search form {
+  /* 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: column;
 }
@@ -785,6 +938,15 @@ header .slick-track {
 }
 
 .ot-all-events .event {
+  /* 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: column;
   border-bottom: solid 2px #323232;
@@ -795,6 +957,15 @@ header .slick-track {
 }
 
 .ot-all-events .event-preview {
+  /* 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;
   align-items: center;
@@ -802,6 +973,15 @@ header .slick-track {
 
 .ot-all-events .event-preview .event-poster {
   flex: 1;
+  /* 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: column;
   align-items: center;
@@ -817,6 +997,15 @@ header .slick-track {
 
 .ot-all-events .event-preview .event-summary {
   flex: 2;
+  /* 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: column;
 }
@@ -846,6 +1035,15 @@ header .slick-track {
   padding: 0.4em 0.8em;
   font-size: 1.1em;
   margin-top: 0.4em;
+  /* 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;
@@ -858,11 +1056,29 @@ header .slick-track {
 }
 
 .ot-show-event {
+  /* 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: column;
 }
 
 .ot-show-event header {
+  /* 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;
   padding: 0.5em;
@@ -891,6 +1107,15 @@ header .slick-track {
 }
 
 .ot-show-event .event-content {
+  /* 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;
   margin-bottom: 2em;
@@ -909,6 +1134,15 @@ header .slick-track {
 
 .ot-show-event .event-summary {
   flex: 1;
+  /* 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: column;
 }
@@ -949,6 +1183,15 @@ header .slick-track {
 }
 
 .ot-donors .donor-list {
+  /* 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: column;
 }
@@ -956,6 +1199,15 @@ header .slick-track {
 .ot-donors .donor-card {
   height: 80px;
   width: 100%;
+  /* 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;
   align-content: center;
@@ -982,6 +1234,15 @@ header .slick-track {
 }
 .ot-members .ot-members-list {
   list-style: none;
+  /* 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;
@@ -990,6 +1251,15 @@ header .slick-track {
 }
 .ot-members .ot-member {
   margin: 15px;
+  /* 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: column;
   align-items: center;
@@ -1004,6 +1274,15 @@ header .slick-track {
 }
 
 .ot-structures {
+  /* 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;
 }
@@ -1016,11 +1295,29 @@ header .slick-track {
   flex: 1;
 }
 .ot-structures .structure-controls, .ot-structures .structure-results {
+  /* 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: column;
   margin: 0 1.5em;
 }
 .ot-structures .structure-search {
+  /* 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: column;
   margin-bottom: 2em;
@@ -1030,6 +1327,15 @@ header .slick-track {
   font-weight: bold;
 }
 .ot-structures .structure-search form {
+  /* 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: column;
 }
@@ -1055,6 +1361,15 @@ header .slick-track {
   align-self: flex-end;
 }
 .ot-structures .structure {
+  /* 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: column;
   border-bottom: solid 2px #323232;
@@ -1064,12 +1379,30 @@ header .slick-track {
   justify-content: space-around;
 }
 .ot-structures .structure-preview {
+  /* 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;
   align-items: center;
 }
 .ot-structures .structure-preview .structure-poster {
   flex: 1;
+  /* 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: column;
   align-items: center;
@@ -1083,6 +1416,15 @@ header .slick-track {
 }
 .ot-structures .structure-preview .structure-summary {
   flex: 2;
+  /* 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: column;
 }
@@ -1107,6 +1449,15 @@ header .slick-track {
   padding: 0.4em 0.8em;
   font-size: 1.1em;
   margin-top: 0.4em;
+  /* 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;
@@ -1142,6 +1493,15 @@ header .slick-track {
 }
 
 form .row {
+  /* 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;
 }
@@ -1168,6 +1528,15 @@ form .row > div:first-child {
 }
 
 div.input {
+  /* 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: column;
 }
@@ -1206,6 +1575,15 @@ div.input span.error {
 }
 
 span.submit {
+  /* 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: flex-end;
@@ -1262,6 +1640,15 @@ form button[type=submit]:hover {
 }
 
 .fce-2col {
+  /* 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;
 }
@@ -1328,6 +1715,44 @@ form button[type=submit]:hover {
     margin: 0 5% 20px 5%;
   }
 
+  .user-toolbar {
+    text-align: center;
+  }
+
+  #login-popup {
+    /* 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;
+    position: static;
+    margin-top: 6px;
+  }
+
+  #login-popup .popup-form {
+    display: none;
+    position: static;
+    width: 100%;
+  }
+
+  #login-popup .show {
+    /* 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;
+  }
+
   #footer {
     height: auto;
     min-height: 100px;
@@ -1364,10 +1789,28 @@ form button[type=submit]:hover {
   }
 
   #menu-container .toggle-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;
   }
 
   #menu-container .toggle-dropdown {
+    /* 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;
   }
 
@@ -1378,6 +1821,15 @@ form button[type=submit]:hover {
   }
 
   #menu li .menu-label {
+    /* 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;
     align-items: center;

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

@@ -76,6 +76,15 @@ ul.dropdown-menu li {
 }
 
 ul.dropdown-displayed {
+  /* 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: column;
 }
@@ -183,6 +192,15 @@ ul.dropdown-left {
 }
 
 #menu li {
+  /* 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;
   height: 100%;
 }
@@ -192,6 +210,15 @@ ul.dropdown-left {
 }
 
 #menu li a {
+  /* 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;
   align-items: center;
@@ -433,6 +460,15 @@ ul.dropdown-left {
   margin-top: 40px;
   position: relative;
   height: 60px;
+  /* 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;
   align-items: center;
@@ -454,6 +490,15 @@ ul.dropdown-left {
 
 .footer-navbar {
   flex: 1;
+  /* 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;
   align-items: center;
@@ -484,6 +529,15 @@ footer .logo-ot {
 }
 
 .user-toolbar-username {
+  /* 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;
   align-items: center;
@@ -512,6 +566,15 @@ footer .logo-ot {
 }
 .user-toolbar .dropdown-menu li {
   height: 3.5em;
+  /* 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;
   align-items: center;
@@ -554,6 +617,15 @@ footer .logo-ot {
 }
 
 #login-popup .popup-form {
+  /* 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: column;
   justify-content: center;
@@ -571,6 +643,15 @@ footer .logo-ot {
 
 .breadcrumb {
   list-style: none;
+  /* 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;
   font-weight: bold;
@@ -632,6 +713,15 @@ header .slick-track {
 
 .content .slick-slide {
   background-color: #f2f2f2;
+  /* 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;
   align-items: center;
 }
@@ -683,6 +773,15 @@ header .slick-track {
 }
 
 .ot-events .event-card {
+  /* 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;
   margin-bottom: 0.5em;
@@ -690,6 +789,15 @@ header .slick-track {
 
 .ot-events .event-card > .event-poster {
   flex: 1;
+  /* 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;
@@ -704,6 +812,15 @@ header .slick-track {
 
 .ot-events .event-card > .event-summary {
   flex: 2;
+  /* 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: column;
   padding: 0.3em;
@@ -723,6 +840,15 @@ header .slick-track {
 }
 
 .ot-all-events {
+  /* 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;
 }
@@ -738,12 +864,30 @@ header .slick-track {
 }
 
 .ot-all-events .events-controls, .events-results {
+  /* 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: column;
   margin: 0 1.5em;
 }
 
 .ot-all-events .event-search {
+  /* 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: column;
   margin-bottom: 2em;
@@ -755,6 +899,15 @@ header .slick-track {
 }
 
 .ot-all-events .event-search form {
+  /* 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: column;
 }
@@ -785,6 +938,15 @@ header .slick-track {
 }
 
 .ot-all-events .event {
+  /* 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: column;
   border-bottom: solid 2px #323232;
@@ -795,6 +957,15 @@ header .slick-track {
 }
 
 .ot-all-events .event-preview {
+  /* 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;
   align-items: center;
@@ -802,6 +973,15 @@ header .slick-track {
 
 .ot-all-events .event-preview .event-poster {
   flex: 1;
+  /* 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: column;
   align-items: center;
@@ -817,6 +997,15 @@ header .slick-track {
 
 .ot-all-events .event-preview .event-summary {
   flex: 2;
+  /* 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: column;
 }
@@ -846,6 +1035,15 @@ header .slick-track {
   padding: 0.4em 0.8em;
   font-size: 1.1em;
   margin-top: 0.4em;
+  /* 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;
@@ -858,11 +1056,29 @@ header .slick-track {
 }
 
 .ot-show-event {
+  /* 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: column;
 }
 
 .ot-show-event header {
+  /* 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;
   padding: 0.5em;
@@ -891,6 +1107,15 @@ header .slick-track {
 }
 
 .ot-show-event .event-content {
+  /* 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;
   margin-bottom: 2em;
@@ -909,6 +1134,15 @@ header .slick-track {
 
 .ot-show-event .event-summary {
   flex: 1;
+  /* 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: column;
 }
@@ -949,6 +1183,15 @@ header .slick-track {
 }
 
 .ot-donors .donor-list {
+  /* 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: column;
 }
@@ -956,6 +1199,15 @@ header .slick-track {
 .ot-donors .donor-card {
   height: 80px;
   width: 100%;
+  /* 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;
   align-content: center;
@@ -982,6 +1234,15 @@ header .slick-track {
 }
 .ot-members .ot-members-list {
   list-style: none;
+  /* 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;
@@ -990,6 +1251,15 @@ header .slick-track {
 }
 .ot-members .ot-member {
   margin: 15px;
+  /* 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: column;
   align-items: center;
@@ -1004,6 +1274,15 @@ header .slick-track {
 }
 
 .ot-structures {
+  /* 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;
 }
@@ -1016,11 +1295,29 @@ header .slick-track {
   flex: 1;
 }
 .ot-structures .structure-controls, .ot-structures .structure-results {
+  /* 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: column;
   margin: 0 1.5em;
 }
 .ot-structures .structure-search {
+  /* 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: column;
   margin-bottom: 2em;
@@ -1030,6 +1327,15 @@ header .slick-track {
   font-weight: bold;
 }
 .ot-structures .structure-search form {
+  /* 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: column;
 }
@@ -1055,6 +1361,15 @@ header .slick-track {
   align-self: flex-end;
 }
 .ot-structures .structure {
+  /* 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: column;
   border-bottom: solid 2px #323232;
@@ -1064,12 +1379,30 @@ header .slick-track {
   justify-content: space-around;
 }
 .ot-structures .structure-preview {
+  /* 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;
   align-items: center;
 }
 .ot-structures .structure-preview .structure-poster {
   flex: 1;
+  /* 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: column;
   align-items: center;
@@ -1083,6 +1416,15 @@ header .slick-track {
 }
 .ot-structures .structure-preview .structure-summary {
   flex: 2;
+  /* 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: column;
 }
@@ -1107,6 +1449,15 @@ header .slick-track {
   padding: 0.4em 0.8em;
   font-size: 1.1em;
   margin-top: 0.4em;
+  /* 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;
@@ -1142,6 +1493,15 @@ header .slick-track {
 }
 
 form .row {
+  /* 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;
 }
@@ -1168,6 +1528,15 @@ form .row > div:first-child {
 }
 
 div.input {
+  /* 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: column;
 }
@@ -1206,6 +1575,15 @@ div.input span.error {
 }
 
 span.submit {
+  /* 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: flex-end;
@@ -1262,6 +1640,15 @@ form button[type=submit]:hover {
 }
 
 .fce-2col {
+  /* 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;
 }
@@ -1328,6 +1715,44 @@ form button[type=submit]:hover {
     margin: 0 5% 20px 5%;
   }
 
+  .user-toolbar {
+    text-align: center;
+  }
+
+  #login-popup {
+    /* 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;
+    position: static;
+    margin-top: 6px;
+  }
+
+  #login-popup .popup-form {
+    display: none;
+    position: static;
+    width: 100%;
+  }
+
+  #login-popup .show {
+    /* 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;
+  }
+
   #footer {
     height: auto;
     min-height: 100px;
@@ -1364,10 +1789,28 @@ form button[type=submit]:hover {
   }
 
   #menu-container .toggle-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;
   }
 
   #menu-container .toggle-dropdown {
+    /* 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;
   }
 
@@ -1378,6 +1821,15 @@ form button[type=submit]:hover {
   }
 
   #menu li .menu-label {
+    /* 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;
     align-items: center;