From dfdb44b5ae63349064b2882aa6206355714a0a1b Mon Sep 17 00:00:00 2001
From: Godwin <goodgodwin@hotmail.com>
Date: Fri, 3 Jun 2016 17:23:32 -0700
Subject: [PATCH] Fixed broken workshop links and fixed awkward styles

---
 app/assets/stylesheets/_application.scss      | 2173 +++++++++--------
 app/controllers/conferences_controller.rb     |    3 +
 app/helpers/application_helper.rb             |   54 +-
 app/models/workshop.rb                        |    4 +-
 app/views/application/about.html.haml         |    2 +-
 app/views/conferences/_contact_info.html.haml |   12 +-
 app/views/workshops/new.html.haml             |   14 +-
 7 files changed, 1162 insertions(+), 1100 deletions(-)

diff --git a/app/assets/stylesheets/_application.scss b/app/assets/stylesheets/_application.scss
index ac8930c..6efbf97 100644
--- a/app/assets/stylesheets/_application.scss
+++ b/app/assets/stylesheets/_application.scss
@@ -892,7 +892,7 @@ ul.warnings li,
 	padding-bottom: rems(2);
 
 	article {
-		padding: rems(2.5) 7.5%;
+		padding: rems(2.5) 0;
 
 		&.supplementary {
 			margin: rems(1) 7.5%;
@@ -903,17 +903,28 @@ ul.warnings li,
 			@include default-box-shadow(top, 2);
 		}
 
+		ul {
+			font-size: 1.125em;
+			line-height: 1.5em;
+		}
+
+		li {
+			margin-bottom: 0.5em;
+		}
+	}
+
+	.featured-image-container {
+		@include _-(display, flex);
+		@include _(flex-wrap, wrap);
+
 		figure {
-			float: left;
+			@include _(order, 1);
+			width: 100%;
+			height: 12em;
+			margin: 0;
 			background-size: cover;
 			background-position: center;
 			background-repeat: no-repeat;
-			width: 33%;
-			height: 12em;
-			margin-left: -1em;
-			margin-top: 2em;
-			margin-right: 1.5em;
-			margin: 2em 1.5em 1.5em -1.5em;
 		}
 	}
 }
@@ -1202,1363 +1213,1389 @@ $header-tilt: 8deg;
 	}
 }
 
-@include breakpoint(medium) {
-	body {
-		padding-bottom: 0;
+@include keyframes(fade-out) {
+	to {
+		@include _(opacity, 0.25);
 	}
+}
 
-	h2 {
-		font-size: 2.25em;
-	}
+body :focus,
+input[type="submit"]:focus,
+.check-box-field input:focus + label,
+.radio-button-field input:focus + label {
+	@include _(animation, fade-out ease-in-out 500ms infinite alternate both);
+}
 
-	p {
-		font-size: 1.333em;
+body {
+	input:focus,
+	textarea:focus,
+	.textarea {
+		@include _(animation, none);
 	}
+}
 
-	form {
-		&.flex-form {
-			display: flex;
-			align-items: flex-start;
-
-			.input-field {
-				flex: 1;
-			}
+@mixin header-colour($page, $colour) {
+	body.#{$page} {
+		#header-title {
+			background-color: $colour;
 
-			button, .button {
-				margin-left: 1em;
-				height: 2.6em;
+			rect {
+				fill: $colour;
 			}
 		}
 	}
+}
 
-	.number-field,
-	.email-field,
-	.text-field {
-		&.big input {
-			font-size: 2em;
-		}
-	}
+@include header-colour(about, $colour-3);
+@include header-colour(policy, $colour-5);
 
-	.flex-column {
-		display: flex;
-		align-items: flex-start;
-		margin-top: 1em;
+#bike_small + label {
+	padding: 0.5em 2.5em;
+}
 
-		p:first-child {
-			margin-top: 0;
+#bike_medium + label {
+	padding: 0.5em 1.5em;
+}
+
+#main .three-options {
+	text-align: center;
+
+	button {
+		background-color: $colour-4;
+		width: 6em;
+		font-size: 1.5em;
+		margin: 0.25em;
+
+		&:first-child {
+			background-color: $colour-3;
 		}
 
-		.stretch-item {
-			flex: 1;
-			margin-right: 1em;
+		&:last-child {
+			background-color: $colour-5;
 		}
 	}
+}
 
-	.flex-form, .flex-column {
-		button, .button {
-			width: auto;
-		}
+#main .skip {
+	button {
+		background-color: #CCC;
 	}
+}
 
-	#main-nav {
-		.logo {
-			margin-top: 0.25em;
-			font-size: 4.25em;
-		}
+#main form.payment {
+	text-align: center;
 
-		.nav {
-			position: static;
-			font-size: 1.8em;
-			display: block;
-			text-align: right;
-			background-color: transparent;
-			@include _(box-shadow, none);
+	input[type="number"] {
+		margin-top: 1em;
+		font-size: 1.5em;
+		text-align: center;
+		width: 4em;
+		height: 1.9em;
+		border: 0;
+		@include default-box-shadow(top);
+		background-color: $black;
+		color: $colour-3;
+		vertical-align: bottom;
+	}
 
-			form {
-				background-color: transparent;
-			}
-		}
+	> button {
+		background-color: $colour-1;
+	}
 
-		.nav a, .nav button {
-			width: auto;
-			min-width: 3.5em;
-			overflow: visible;
-			margin-left: 0.725em;
-			line-height: 3em;
-			padding: 0 0 1em;
-			color: $black;
-			@include _(box-shadow, none);
-			@include _(text-shadow, none);
+	.currency {
+		color: #888;
+		font-size: 1.667em;
+	}
+}
 
-			@include before-and-after {
-				content: '';
-				display: block;
-				position: absolute;
-				background-color: rgba(0, 0, 0, 0.33);
-				z-index: -1;
-				margin: 0;
-				border: 0;
-				font-size: 1em;
-				left: -0.51em;
-				right: -0.51em;
-				top: 0;
-				height: 0;
-				width: auto;
-				@include _(opacity, 1);
-				@include _(transition, height 150ms ease-in-out);
-				@include _(transform, rotate(-20deg) scaleX(0.94) scaleY(1.5) translate(-0.5em, -0.5em));
-				@include _(transform-origin, 0 0);
-			}
+#main ul.workshops {
+	list-style: none;
+	padding: 0;// 1em;
+	text-align: center;
+	@include default-box-shadow(top, 2, true);
+	background-color: #F8F8F8;
 
-			@include after {
-				height: 3em;
-				@include _(opacity, 0.1);
-			}
-			@include before {
-			    box-shadow: 0 0 2em -0.5em rgba(#000, 0.75);
-				@include _(opacity, 0.33);
-			}
+	li {
+		display: inline-block;
+		margin: 0.5em;
+		vertical-align: middle;
 
-			&.current {
-				z-index: 2;
+		@include before {
+			content: '';
+			display: none;
+			position: fixed;
+			top: 0;
+			right: 0;
+			bottom: 0;
+			left: 0;
+			background-color: #000;
+			z-index: 99;
+			@include _(opacity, 0.5);
+		}
 
-				@include before {
-					height: 3em;
-					@include _(opacity, 0.67);
-				}				
+		&.view {
+			@include before {
+				display: block;
 			}
+			
+			.info {
+				left: 0;
+				right: 0;
+				top: 50%;
+				@include _(transform, translateY(-50%) scale(1));
 
-			&:hover {
-				@include before {
-					height: 3em;
+				@include breakpoint(large) {
+					left: 19rem;
 				}
 			}
 		}
+	}
 
-		.nav a {
-			&[class] {
-				background-color: transparent;
-			}
+	h4, h5 {
+		color: $white;
+		background-color: $colour-1;
+		@include _(text-stroke, 1px rgba(0, 0, 0, 0.25));
+	}
 
-			&.policy {
-				@include before-and-after {
-					background-color: $colour-5;
-				}
-			}
+	h4 {
+		max-width: 10em;
+		cursor: pointer;
+		margin: 0;
+		padding: 1em;
+		position: relative;
+		@include default-box-shadow(top);
+		@include _(transition, transform 100ms ease-in-out);
 
-			&.about {
-				@include before-and-after {
-					background-color: $colour-3;
-				}
-			}
+		&:hover {
+			z-index: $zindex-base + 3;
+			@include _(transform, scale(1.25));
 		}
+	}
 
-		.nav a.register, .nav button {
-			@include before-and-after {
-				background-color: $colour-2;
-			}
-			&:focus, &:active {
-				@include _(transform, none);
-			}
+	h5 {
+		font-size: 1.5em;
+		margin: 0;
+		padding: 0.5em 1em;
+
+		+ p {
+			margin-top: 0;
 		}
+	}
 
-		.user-nav-bar {
-			top: 0;
-			left: 0;
-			right: auto;
-			width: auto;
-			float: none;
-			text-align: left;
-			background-color: #EEE;
-			@include _(border-radius, 0 0 0.5em 0);
-			font-size: 0.8em;
-			padding: 0 1em 0 0.5em;
-			@include default-box-shadow(top, 2);
+	p {
+		padding: 1em;
+		max-height: 50vh;
+		overflow-y: auto;
+	}
 
-			a {
-				display: inline-block;
-				padding: 0.25em 0;
+	form {
+		text-align: center;
+	}
 
-				&:hover {
-					color: lighten($black, 25%);
-				}
-			}
+	button {
+		margin: 1em 0.5em;
+	}
 
-			.my-account {
-				max-width: none;
-				overflow: visible;
+	[contenteditable] {
+		outline: none;
+	}
 
-				@include after {
-					content: '|';
-					display: inline;
-					@include _(opacity, 0.25);
-					position: static;
-					margin: 0 0.5em;
-				}
-			}
-		}
+	.info {
+		position: fixed;
+		background-color: $white;
+		color: $black;
+		left: auto;
+		right: auto;
+		top: auto;
+		z-index: 100;
+		max-width: 40em;
+		max-height: 40em;
+		margin: auto;
+		text-align: left;
+		@include _(transition, all 250ms ease-in-out);
+		@include _(transform, translateY(0) scale(0));
+		@include default-box-shadow(top);
 	}
 
-	#banner {
-		margin: 3em auto;
+	[value="delete"] {
+		background-color: $colour-2;
+	}
 
-		figure {
-			min-height: 40em;
-			margin: rems(-20) auto rems(2);
-		}
+	[value="cancel"] {
+		background-color: $colour-4;
+	}
+}
 
-		.title {
-			font-size: 1.9em;
-			margin: 3em 0 1em;
-		}
+.conferences-register .policy-agreement {
+	padding: 0.25em 1em;
+	margin: 0 0 3em;
+	border: 0.1em solid #DDD;
+	@include _(border-radius, 0.25em);
+	@include default-box-shadow(top, 2);
+}
 
-		img {
-			@include _(box-shadow, 0 0 2em -0.5em rgba(0, 0, 0, 0.5));
-		}
-	}
-	
-	#registration-steps {
-		ul {
-			display: inline-block;
-			text-align: left;
-			margin-top: -4em;
-		}
+body.policy .policy-agreement ul {
+	padding: 0 1.5em 0;
+}
 
-		li {
-			display: inline-block;
-			float: left;
+.stats {
+	list-style: none;
 
-			@include after {
-				content: '';
-				top: 1.125em;
-				left: auto;
-				right: -0.25em;
-				@include _(transform, rotate(45deg));
-			}
+	h3 {
+		display: inline-block;
+	}
 
-			&.enabled:hover,
-			&.enabled:hover ~ li {
-				@include after {
-					@include _(transform, rotate(-135deg));
-					background-color: transparent;
-				}
-			}
+	.stat {
+		position: relative;
+		padding: 0 0.25em;
+		margin: 0.5em;
+		font-size: 2em;
+		display: inline-block;
+		color: $white;
+		background-color: $colour-1;
+		@include default-box-shadow(top, 2);
+		@include _(text-stroke, 1px rgba(0, 0, 0, 0.25));
+
+		&.important {
+			width: 2em;
+			height: 2em;
+			line-height: 2em;
+			text-align: center;
+			@include _(border-radius, 50%);
 		}
 	}
 
-	ul.warnings {
-		li {
-			margin: 1em 4em;
-		}
+	.money .stat {
+		background-color: $colour-5;
 	}
 
-	.warning-info {
-		margin-left: 1em;
+	.percent {
+		font-size: 1.5em;
 	}
 
-	#main {
-		clear: right;
+	.value {
+		position: relative;
+		z-index: $zindex-base + 2;
+	}
 
-		.columns {
-			form {
-				margin-top: 2em;
-			}
+	.stat-with-label {
+		display: inline-block;
+		text-align: center;
+		vertical-align: middle;
+		background-color: $colour-3;
+		margin: 0.5em;
+		@include default-box-shadow(top, 2);
+
+		.stat {
+			margin-top: 0.25em;
 		}
 	}
 
-	#header-title {
-		min-height: rems(35);
-		font-size: 1em;
+	.label {
+		padding: 0.5em 0.5em 0;
+		font-weight: bold;
+	}
 
-		&.short {
-			font-size: 2em;
-			min-height: rems(15);
+	.breakdown {
+		text-align: center;
+	}
+}
 
-			h1 {
-				position: absolute;
-				bottom: 0;
-				text-align: left;
-				font-size: 2em;
-			}
+.email-preview {
+	max-width: 40rem;
+	margin: 2em auto 0;
+	padding: 0.25em 1em;
+	background-color: #F8F8F8;
+	@include default-box-shadow(top, 2, true);
+}
 
-			@include before {
-				content: '';
-				position: absolute;
-				top: 0;
-				right: 0;
-				bottom: 0;
-				left: 0;
-				z-index: $zindex-base + 2;
-				@include _(box-shadow, inset 0 -13rem 3em -4rem rgba(0, 0, 0, 0.8));
-				@include _(transition, opacity 250ms ease-in-out);
-			}
-		}
+.facilitators {
+	display: inline-block;
 
-		&.no-image {
-			min-height: 0;
-			font-size: 1em;
-		}
+	.facilitator {
+		margin: 0 0 0.5em 1.25em;
+	}
 
-		svg {
-			display: block;
-		}
+	.name {
+		position: relative;
+		font-weight: bold;
 
-		svg rect {
-			@include _(animation, banner-load 1s ease-in-out);
+		@include before {
+			content: '';
+			position: absolute;
+			width: 0.3em;
+			height: 0.3em;
+			background-color: #333;
+			border-radius: 50%;
+			left: -0.75em;
+			top: 0.5em;
+			@include _(opacity, 0.5);
 		}
+	}
 
-		.title {
-			text-align: left;
-			width: 110%;
-			background-color: rgba($white, 0.5);
-			@include _(transform, rotate(-$header-tilt) translate3d(0, 0, 0));
-			@include _(transform-origin, 0 100%);
-		}
+	.name, .role {
+		display: inline;
+	}
 
-		.details {
-			text-align: right;
-			color: #000;
-		}
-
-		.background {
-			display: block;
-		}
-		
-		.primary {
-			padding: 12% 0 0 0.25em;
-		}
-	}
-
-	#footer {
-		footer {
-			font-size: 1em;
-		}
+	.role {
+		color: #666;
+		white-space: nowrap;
 
-		.github {
-			flex: none;
-			flex-basis: auto;
-			bottom: 0.5em;
-			float: left;
-			margin-right: 1em;
-			margin-left: 1em;
-		}
-		.facebook {
-			margin: 0;
-		}
-		ul.locales {
-			flex: none;
-			flex-basis: auto;
-			flex-grow: 1;
+		@include before {
+			content: '(';
 		}
-	}
-
-	.check-box-field,
-	.radio-button-field {
-		display: flex;
 
-		label {
-			flex: 1;
-			border: 0.1em solid;
-			border-left: 0;
-			text-align: left;
+		@include after {
+			content: '), ';
 		}
 
-		input:first-child + label {
-			border: 0.1em solid;
+		&:last-child {
+			@include after {
+				content: ')';
+			}
 		}
 	}
 }
 
-@include keyframes(fade-out) {
-	to {
-		@include _(opacity, 0.25);
-	}
-}
+.workshop-previews {
+	position: relative;
+	list-style: none;
+	padding: 0;
 
-body :focus,
-input[type="submit"]:focus,
-.check-box-field input:focus + label,
-.radio-button-field input:focus + label {
-	@include _(animation, fade-out ease-in-out 500ms infinite alternate both);
-}
+	p {
+		padding: 0 1rem 0.5rem;
+		font-size: 1em;
+		color: $black;
+	}
 
-body {
-	input:focus,
-	textarea:focus,
-	.textarea {
-		@include _(animation, none);
+	h4 {
+		color: $white;
+		background-color: $colour-1;
+		padding: 0.5em 1em;
+		margin: 0;
+		@include _(text-stroke, 1px rgba(0, 0, 0, 0.25));
 	}
-}
 
-@include breakpoint(large) {
-	#main-nav {
-		.nav {
-			font-size: 1.9em;
-			margin-top: 0;
-		}
+	a {
+		display: block;
+		max-height: 10em;
+		overflow: hidden;
+		margin: 0.5em 0;
+		@include default-box-shadow(top, 2);
+		@include _(transition, transform 150ms ease-in-out);
 
-		.user-nav-bar {
-			@include _(border-radius, 0 0 0.5em 0.5em);
-			padding: 0 1em;
-			font-size: 1em;
+		&:hover, &:focus, &:active {
+			z-index: $zindex-base + 2;
+			@include _(transform, scale(1.1));
 		}
-	}
 
-	#banner {
-		body.fixed-banner & {
-			position: fixed;
+		@include before {
+			content: '';
+			position: absolute;
 			top: 0;
 			right: 0;
-			left: $sidebar-width;
+			bottom: 0;
+			left: 0;
 			z-index: $zindex-base + 2;
+			cursor: pointer;
+			@include _(box-shadow, inset 0em -2em 2em -1em $white);
 		}
 
-		figure {
-			width: 90%;
-		}
-	}
-	
-	#main {
-		padding-left: $sidebar-width;
-	    min-height: 100vh;
-	}
-
-	#header-title {
-		&.no-image {
-			min-height: 0;
-		}
-		&.short {
-			min-height: rems(25);
-		}
-		&.no-image,
-		&.short {
-			h1 {
-				text-align: left;
-				margin: 0.67em 0;
-			}
+		@include after {
+			 display: none;
 		}
 	}
+}
 
-	#main-nav .logo {
-		font-size: 5em;
-	}
+.translated-content.block {
+	display: inherit;
+}
 
-	a.logo {
-		display: block;
-		float: none;
-		padding: 0.2em;
-	}
+html[data-lingua-franca-example="html"] {
+	$caption-height: 4rem;
+	@include _(transform, translateY($caption-height));
 
-	.actions {
-		margin: 4em 2em 0 0;
-	}
-	
-	#footer {
-		overflow: visible;
-		padding: 0;
+	#lingua-franca-window-caption {
+		position: absolute;
+		top: 0;
+		left: 0;
 		width: 100%;
-		height: 3em;
-
-		footer {
-			max-width: $row-width;
-			margin: 0 auto;
-		}
-	}
-}
+		height: $caption-height;
+		background-color: #CCC;
+		z-index: 1000;
+		font-size: 1rem;
+		@include _(transform, translateY($caption-height * -1));
 
-@mixin header-colour($page, $colour) {
-	body.#{$page} {
-		#header-title {
-			background-color: $colour;
+		.window-tab {
+			height: 1.75rem;
+			position: relative;
+			background-color: #EEE;
+			float: left;
+			padding: 0.25em 2em 0 1em;
+			margin: 0.25em 1em;
+			@include _(border-radius, 0.5em 0.5em 0 0);
+			color: #444;
+			@include font-family(secondary);
 
-			rect {
-				fill: $colour;
+			@include after {
+				content: '×';
+				position: absolute;
+				right: 0.5em;
+				top: 0.25em;
 			}
 		}
-	}
-}
-
-@include header-colour(about, $colour-3);
-@include header-colour(policy, $colour-5);
-
-#bike_small + label {
-	padding: 0.5em 2.5em;
-}
-
-#bike_medium + label {
-	padding: 0.5em 1.5em;
-}
-
-#main .three-options {
-	text-align: center;
-
-	button {
-		background-color: $colour-4;
-		width: 6em;
-		font-size: 1.5em;
-		margin: 0.25em;
 
-		&:first-child {
-			background-color: $colour-3;
+		i {
+			font-style: normal;
 		}
 
-		&:last-child {
-			background-color: $colour-5;
+		.window-minimize,
+		.window-maximize {
+			@include after {
+				content: '';
+				position: absolute;
+				top: 0.75em;
+				right: 2em;
+				border-style: solid;
+				border-width: 0 0.5em 0.5em 0.5em;
+				border-left-color: transparent;
+				border-right-color: transparent;
+			}
+		}
+		
+		.window-minimize {
+			@include after {
+				right: 3.5em;
+				border-top-width: 0.5em;
+				border-bottom-width: 0;
+			}
 		}
-	}
-}
 
-#main .skip {
-	button {
-		background-color: #CCC;
-	}
-}
+		.window-close {
+			@include after {
+				content: '×';
+				position: absolute;
+				right: 0.25em;
+				top: 0.1em;
+				font-size: 1.75em;
+				line-height: 1em;
+			}
+		}
 
-#main form.payment {
-	text-align: center;
+		.window-url-bar {
+			position: absolute;
+			top: $caption-height / 2;
+			left: 0;
+			width: 100%;
+			height: $caption-height / 2;
+			background-color: #EEE;
 
-	input[type="number"] {
-		margin-top: 1em;
-		font-size: 1.5em;
-		text-align: center;
-		width: 4em;
-		height: 1.9em;
-		border: 0;
-		@include default-box-shadow(top);
-		background-color: $black;
-		color: $colour-3;
-		vertical-align: bottom;
-	}
+			.url-bar {
+				position: absolute;
+				top: 0.25rem;
+				left: 3.5rem;
+				bottom: 0.25rem;
+				right: 0.25rem;
+				background-color: #FFF;
+				border: 1px solid #CCC;
+				padding: 0 0.25rem;
+				font-size: 0.8em;
+				line-height: 1.75em;
+			}
+		}
 
-	> button {
-		background-color: $colour-1;
+		.window-back,
+		.window-forward {
+			@include after {
+				content: '';
+				position: absolute;
+				left: 0.5em;
+				top: 0.5em;
+				border-style: solid;
+				border-width: 0.5em 0.75em 0.5em 0;
+				border-top-color: transparent;
+				border-bottom-color: transparent;
+				color: #666;
+			}
+		}
+
+		.window-forward {
+			@include after {
+				left: 2em;
+				border-right-width: 0;
+				border-left-width: 0.75em;
+			}
+		}
 	}
 
-	.currency {
-		color: #888;
-		font-size: 1.667em;
+	@include translation-pointer;
+}
+
+.workshop-notes {
+	p {
+		font-size: 1em;
 	}
 }
 
-#main ul.workshops {
+.workshop-list {
 	list-style: none;
-	padding: 0;// 1em;
-	text-align: center;
-	@include default-box-shadow(top, 2, true);
-	background-color: #F8F8F8;
+	padding: 0;
 
-	li {
-		display: inline-block;
-		margin: 0.5em;
-		vertical-align: middle;
+	.workshop-description {
+		font-size: 0.8em;
+		max-height: 20em;
+		padding: 1em;
+		overflow: hidden;
+	}
 
-		@include before {
-			content: '';
-			display: none;
-			position: fixed;
-			top: 0;
-			right: 0;
-			bottom: 0;
-			left: 0;
-			background-color: #000;
-			z-index: 99;
-			@include _(opacity, 0.5);
-		}
+	> li {
+		margin-bottom: 1em;
+		border: 0.2em solid;
+		@include _(border-radius, 0.25em);
 
-		&.view {
-			@include before {
-				display: block;
-			}
-			
-			.info {
-				//display: block;
-				left: 0;
-				right: 0;
-				top: 50%;
-				@include _(transform, translateY(-50%) scale(1));
+		> a {
+			display: block;
+			color: inherit;
 
-				@include breakpoint(large) {
-					left: 19rem;
-				}
+			@include after {
+				display: none;
 			}
 		}
-	}
 
-	h4, h5 {
-		color: $white;
-		background-color: $colour-1;
-		@include _(text-stroke, 1px rgba(0, 0, 0, 0.25));
-	}
+		ul {
+			padding-left: 2.5em;
+			margin-bottom: 1.5em;
+		}
 
-	h4 {
-		max-width: 10em;
-		cursor: pointer;
-		margin: 0;
-		padding: 1em;
-		position: relative;
-		@include default-box-shadow(top);
-		@include _(transition, transform 100ms ease-in-out);
+		li {
+			border: 0;
+		}
 
 		&:hover {
-			z-index: $zindex-base + 3;
-			@include _(transform, scale(1.25));
+			@include default-box-shadow;
 		}
-	}
 
-	h5 {
-		font-size: 1.5em;
-		margin: 0;
-		padding: 0.5em 1em;
+		&.interested {
+			.workshop-interest {
+				background-color: rgba($colour-5, 0.5);
+			}
+		}
 
-		+ p {
-			margin-top: 0;
+		&.mine {
+			.workshop-interest {
+				background-color: lighten($colour-1, 25%);
+				background-color: rgba($colour-1, 0.5);
+			}
 		}
 	}
 
+	.title {
+		margin: 0;
+		background-color: $black;
+		color: #FFF;
+		padding: 0.25em 0.5em 0.5em;
+	}
+
 	p {
-		padding: 1em;
-		max-height: 50vh;
-    	overflow-y: auto;
+		margin-top: 0;
+		font-size: 1em;
 	}
 
+	.workshop-interest {
+		padding: 0.5em 1em;
+		font-weight: bold;
+		background-color: #EEE;
+	}
+}
+
+#main .workshop-interest {
+	text-align: right;
+
 	form {
-		text-align: center;
+		display: inline;
 	}
 
 	button {
-		margin: 1em 0.5em;
-	}
+		font-size: 0.9em;
+		margin: 1em;
+		background-color: $colour-1;
 
-	[contenteditable] {
-		outline: none;
+		&.delete {
+			background-color: $colour-4;			
+		}
 	}
 
-	.info {
-		position: fixed;
-		background-color: $white;
-		color: $black;
-		left: auto;
-		right: auto;
-		top: auto;
-		z-index: 100;
-		max-width: 40em;
-		max-height: 40em;
-		margin: auto;
+	body.home & {
 		text-align: left;
-		@include _(transition, all 250ms ease-in-out);
-		@include _(transform, translateY(0) scale(0));
-		@include default-box-shadow(top);
+		font-style: italic;
+		color: #888;
+		margin-top: -0.5em;
+		margin-bottom: -0.5em;
+		margin-left: 1em;
 	}
+}
 
-	[value="delete"] {
-		background-color: $colour-2;
+.original-text {
+	margin: 0 0 1em 1em;
+
+	.value {
+		border: 0.1em solid #DDD;
+		padding: 1em;
+		margin: 1em 0 3em 0;
+		background-color: #F8F8F8;
+		@include _(border-radius, 0.25em);
+	}
+	
+	h4, h5, h6 {
+		margin: 0;
 	}
 
-	[value="cancel"] {
-		background-color: $colour-4;
+	h5 {
+		font-size: 1em;
 	}
-}
 
-.conferences-register .policy-agreement {
-	padding: 0.25em 1em;
-	margin: 0 0 3em;
-	border: 0.1em solid #DDD;
-    @include _(border-radius, 0.25em);
-	@include default-box-shadow(top, 2);
-}
+	h6 {
+		font-size: 0.9em;
+	}
 
-body.policy .policy-agreement ul {
-	padding: 0 1.5em 0;
-}
-
-.stats {
-	list-style: none;
-
-	h3 {
-		display: inline-block;
-	}
-
-	.stat {
-		position: relative;
-		padding: 0 0.25em;
-		margin: 0.5em;
-		font-size: 2em;
-		display: inline-block;
-		color: $white;
-		background-color: $colour-1;
-		@include default-box-shadow(top, 2);
-		@include _(text-stroke, 1px rgba(0, 0, 0, 0.25));
-
-		&.important {
-			width: 2em;
-			height: 2em;
-			line-height: 2em;
-			text-align: center;
-			@include _(border-radius, 50%);
-		}
-	}
-
-	.money .stat {
-		background-color: $colour-5;
-	}
-
-	.percent {
-		font-size: 1.5em;
-	}
-
-	.value {
-		position: relative;
-		z-index: $zindex-base + 2;
-	}
-
-	.stat-with-label {
-		display: inline-block;
-		text-align: center;
-		vertical-align: middle;
-		background-color: $colour-3;
-		margin: 0.5em;
-		@include default-box-shadow(top, 2);
-
-		.stat {
-			margin-top: 0.25em;
-		}
-	}
-
-	.label {
-		padding: 0.5em 0.5em 0;
-		font-weight: bold;
-	}
-
-	.breakdown {
-		text-align: center;
+	p {
+		margin: 0.5em 0;
+		font-size: 0.9em;
 	}
 }
 
-.email-preview {
-	max-width: 40rem;
-	margin: 2em auto 0;
-	padding: 0.25em 1em;
-	background-color: #F8F8F8;
-	@include default-box-shadow(top, 2, true);
+.facilitator .button {
+	font-size: 0.9em;
+	vertical-align: -0.75em;
 }
 
-.facilitators {
-	display: inline-block;
-
-	.facilitator {
-		margin: 0 0 0.5em 1.25em;
-	}
-
-	.name {
-		position: relative;
-		font-weight: bold;
-
-		@include before {
-			content: '';
-			position: absolute;
-			width: 0.3em;
-			height: 0.3em;
-			background-color: #333;
-			border-radius: 50%;
-			left: -0.75em;
-			top: 0.5em;
-			@include _(opacity, 0.5);
-		}
-	}
+#main .facilitators .actions {
+	margin: 0;
+}
 
-	.name, .role {
-		display: inline;
+#main form.add-facilitator {
+	button {
+		height: 2.4em;
+		font-size: 0.9em;
 	}
+}
 
-	.role {
-		color: #666;
-		white-space: nowrap;
-
-		@include before {
-			content: '(';
+.conferences-edit_schedule {
+	#main {
+		.location {
+			padding-top: 0.25em;
 		}
-
-		@include after {
-			content: '), ';
+		.errors {
+			padding: 0.25em;
+			background-color: $colour-2;
+			color: $white;
+			@include _(text-stroke, 0.5px #000);
 		}
-
-		&:last-child {
-			@include after {
-				content: ')';
-			}
+		.conflict-score {
+			padding: 0.25em;
+			background-color: $colour-3;
+			color: $black;
 		}
-	}
-}
+		.all-workshops, .all-events {
+			list-style: none;
+			padding: 0;
 
-.workshop-previews {
-	position: relative;
-	list-style: none;
-	padding: 0;
+			li {
+				margin: 0.5em;
+				padding: 0.5em;
+				border: 1px solid #CCC;
+				background-color: lighten($colour-1, 35);
+				@include default-box-shadow(top, 2);
 
-	p {
-		padding: 0 1rem 0.5rem;
-		font-size: 1em;
-		color: $black;
-	}
+				&.error {
+					outline: 0.2em solid $colour-2;
+					outline-offset: -0.2em;
+				}
+			}
 
-	h4 {
-		color: $white;
-		background-color: $colour-1;
-		padding: 0.5em 1em;
-		margin: 0;
-		@include _(text-stroke, 1px rgba(0, 0, 0, 0.25));
-	}
+			h3 {
+				margin: 0;
+			}
 
-	a {
-		display: block;
-		max-height: 10em;
-		overflow: hidden;
-		margin: 0.5em 0;
-		@include default-box-shadow(top, 2);
-		@include _(transition, transform 150ms ease-in-out);
+			.workshop-interest {
+				color: #888;
+				text-align: left;
+				margin: 0.25em 0;
+			}
 
-		&:hover, &:focus, &:active {
-			z-index: $zindex-base + 2;
-			@include _(transform, scale(1.1));
-		}
+			.error-description {
+				background-color: $colour-2;
+				color: $white;
+				padding: 0.5em;
+				margin-top: 0.5em;
+			}
 
-		@include before {
-			content: '';
-			position: absolute;
-			top: 0;
-			right: 0;
-			bottom: 0;
-			left: 0;
-			z-index: $zindex-base + 2;
-			cursor: pointer;
-			@include _(box-shadow, inset 0em -2em 2em -1em $white);
-		}
+			.warnings {
+				background-color: $colour-3;
+				color: $black;
+				padding: 0.5em;
+				margin-top: 0.5em;
+				list-style: none;
 
-		@include after {
-			 display: none;
+				li {
+					padding: 0;
+					margin: 0;
+					background-color: transparent;
+					@include _(box-shadow, none);
+				}
+			}
 		}
-	}
-}
-
-.froala-wrapper + div {
-	width: 0;
-	height: 0;
-	overflow: hidden;
-	opacity: 0;
-}
-
-.translated-content.block {
-	display: inherit;
-}
-
-html[data-lingua-franca-example="html"] {
-	$caption-height: 4rem;
-	@include _(transform, translateY($caption-height));
+		.day_parts {
+			list-style: none;
 
-	#lingua-franca-window-caption {
-		position: absolute;
-		top: 0;
-		left: 0;
-		width: 100%;
-		height: $caption-height;
-		background-color: #CCC;
-		z-index: 1000;
-		font-size: 1rem;
-		@include _(transform, translateY($caption-height * -1));
+			h4 {
+				display: inline-block;
+				min-width: 12.5em;
+				margin: 0.25em 0;
+			}
 
-		.window-tab {
-			height: 1.75rem;
-			position: relative;
-			background-color: #EEE;
-			float: left;
-			padding: 0.25em 2em 0 1em;
-			margin: 0.25em 1em;
-			@include _(border-radius, 0.5em 0.5em 0 0);
-			color: #444;
-			@include font-family(secondary);
+			select, .select {
+				float: right;
+				min-width: 5em;
+			}
 
-			@include after {
-				content: '×';
-				position: absolute;
-				right: 0.5em;
-				top: 0.25em;
+			.select {
+				padding-left: 0.25em;
 			}
 		}
-
-		i {
-			font-style: normal;
+		.actions {
+			margin: 2em;
 		}
-
-		.window-minimize,
-		.window-maximize {
-			@include after {
-				content: '';
-				position: absolute;
-				top: 0.75em;
-				right: 2em;
-				border-style: solid;
-				border-width: 0 0.5em 0.5em 0.5em;
-				border-left-color: transparent;
-				border-right-color: transparent;
-			}
+		.unsaved {
+			@include font-family(secondary);
+			background-color: lighten($colour-3, 25);
+			margin: 0 5em 2em;
+			padding: 0.5em;
 		}
-		
-		.window-minimize {
-			@include after {
-				right: 3.5em;
-				border-top-width: 0.5em;
-				border-bottom-width: 0;
+		.all-events {
+			li {
+				background-color: lighten($colour-5, 35);
+				
+				&.meal {
+					background-color: lighten($colour-3, 25);
+				}
 			}
-		}
 
-		.window-close {
-			@include after {
-				content: '×';
-				position: absolute;
-				right: 0.25em;
-				top: 0.1em;
-				font-size: 1.75em;
-				line-height: 1em;
+			h3 {
+				margin-bottom: 0.5em;
 			}
 		}
+	}
+}
 
-		.window-url-bar {
-			position: absolute;
-			top: $caption-height / 2;
-			left: 0;
-			width: 100%;
-			height: $caption-height / 2;
-			background-color: #EEE;
+.conferences-schedule {
+	.actions {
+		margin: 2em;
+	}
+	
+	ul.events, ul.locations {
+		list-style: none;
 
-			.url-bar {
-				position: absolute;
-				top: 0.25rem;
-				left: 3.5rem;
-				bottom: 0.25rem;
-				right: 0.25rem;
-				background-color: #FFF;
-				border: 1px solid #CCC;
-				padding: 0 0.25rem;
-				font-size: 0.8em;
-				line-height: 1.75em;
-			}
+		.button {
+			float: left;
+			font-size: 1em;
+			margin-bottom: 0.5em;
+			margin-right: 0.5em;
 		}
 
-		.window-back,
-		.window-forward {
-			@include after {
-				content: '';
-				position: absolute;
-				left: 0.5em;
-				top: 0.5em;
-				border-style: solid;
-				border-width: 0.5em 0.75em 0.5em 0;
-				border-top-color: transparent;
-				border-bottom-color: transparent;
-				color: #666;
-			}
+		h3 {
+			display: inline-block;
+			margin: 0.25em 0 0;
 		}
 
-		.window-forward {
-			@include after {
-				left: 2em;
-				border-right-width: 0;
-				border-left-width: 0.75em;
-			}
+		li {
+			clear: both;
 		}
 	}
-
-	@include translation-pointer;
 }
 
-.workshop-notes {
-	p {
-		font-size: 1em;
-	}
-}
+.programme {
 
-.workshop-list {
-	list-style: none;
-	padding: 0 2em;
+	.schedule {
+		width: auto;
+		margin: 0;
+		min-width: 100%;
+		@include _(box-shadow, none);
+		table-layout: fixed;
+		border-spacing: 0.25em;
+		border-collapse: separate;
 
-	.workshop-description {
-		font-size: 0.8em;
-		max-height: 20em;
-		padding: 1em;
-		overflow: hidden;
-	}
+		td {
+			position: relative;
+			vertical-align: middle;
 
-	> li {
-		margin-bottom: 1em;
-		border: 0.2em solid;
-		@include _(border-radius, 0.25em);
+			.title {
+				text-align: center;
+				@include font-family(secondary);
+				color: #666;
+			}
+			
 
-		> a {
-			display: block;
-			color: inherit;
+			&.previewable {
+				cursor: pointer;
 
-			@include after {
-				display: none;
+				&:hover {
+					@include default-box-shadow(top, 2);
+				}
 			}
-		}
 
-		ul {
-			padding-left: 2.5em;
-			margin-bottom: 1.5em;
-		}
+			&.workshop {
+				background-color: lighten($colour-1, 35);
+				border: 0.25em solid $colour-1;
 
-		li {
-			border: 0;
-		}
+				.preview {
+					position: absolute;
+					top: 0;
+					right: 0;
+					bottom: 0;
+					left: 0;
 
-		&:hover {
-			@include default-box-shadow;
-		}
+					@include after {
+						display: none;
+					}
+				}
+			}
 
-		&.interested {
-			.workshop-interest {
-				background-color: rgba($colour-5, 0.5);
+			&.event {
+				background-color: lighten($colour-5, 35);
+				border: 0.25em solid $colour-5;
 			}
-		}
 
-		&.mine {
-			.workshop-interest {
-				background-color: lighten($colour-1, 25%);
-				background-color: rgba($colour-1, 0.5);
+			&.meal {
+				background-color: lighten($colour-3, 25);
+				border: 0.25em solid $colour-3;
 			}
-		}
-	}
 
-	.title {
-		margin: 0;
-		background-color: $black;
-		color: #FFF;
-		padding: 0.25em 0.5em 0.5em;
-	}
+			&.not-interested {
+				.title {
+					opacity: 0.5;
+				}
+			}
 
-	p {
-		margin-top: 0;
-		font-size: 1em;
-	}
+			.info {
+				position: fixed;
+				top: 0;
+				right: 0;
+				bottom: 0;
+				left: 0;
+				z-index: 1000;
+				background-color: $white;
+				text-align: left;
+				overflow-y: auto;
+				@include _(transition, transform 250ms ease-in-out);
+				@include _(transform-origin, center bottom);
+				@include _(transform, rotate(180deg) translate3d(0, 0, 0));
 
-	.workshop-interest {
-		padding: 0.5em 1em;
-		font-weight: bold;
-		background-color: #EEE;
-	}
-}
+				.close {
+					float: right;
+					font-size: 2em;
 
-#main .workshop-interest {
-	text-align: right;
+					@include before {
+						content: '×';
+						padding: 0 0.5em;
+					}
 
-	form {
-		display: inline;
-	}
+					@include after {
+						display: none;
+					}
+				}
 
-	button {
-		font-size: 0.9em;
-		margin: 1em;
-		background-color: $colour-1;
+				h2 {
+					margin-bottom: 0.5em;
+				}
+			}
 
-		&.delete {
-			background-color: $colour-4;			
+			&:target .info {
+				@include _(transform, rotate(0) translate3d(0, 0, 0));
+			}
 		}
 	}
 
-	body.home & {
-		text-align: left;
-		font-style: italic;
-		color: #888;
-		margin-top: -0.5em;
-		margin-bottom: -0.5em;
-		margin-left: 1em;
+	.programme-day {
+		margin-top: 2em;
+	}
+
+	.programme-day-part {
+		overflow-x: auto;
 	}
 }
 
-.original-text {
-	margin: 0 0 1em 1em;
-	h4 {
-		margin: 0;
+.select-field {
+	line-height: 1.75em;
+
+	select {
+		display: block;
+		width: 100%;
+		height: 2.1em;
+		font-family: inherit;
+		font-size: 1.5em;
+		padding: 0.25em;
+		@include default-box-shadow(top, 1.5, false);
 	}
-	.value {
-		margin-left: 1em;
+}
+
+@include breakpoint(medium) {
+	body {
+		padding-bottom: 0;
+	}
+
+	h2 {
+		font-size: 2.25em;
 	}
+
 	p {
-		font-size: 1.1em;
+		font-size: 1.333em;
 	}
-}
 
-.facilitator .button {
-	font-size: 0.9em;
-	vertical-align: -0.75em;
-}
+	form {
+		&.flex-form {
+			display: flex;
+			align-items: flex-start;
 
-#main .facilitators .actions {
-	margin: 0;
-}
+			.input-field {
+				flex: 1;
+			}
 
-#main form.add-facilitator {
-	button {
-		height: 2.4em;
-		font-size: 0.9em;
+			button, .button {
+				margin-left: 1em;
+				height: 2.6em;
+			}
+		}
 	}
-}
 
-.conferences-edit_schedule {
-	#main {
-		.location {
-			padding-top: 0.25em;
+	.number-field,
+	.email-field,
+	.text-field {
+		&.big input {
+			font-size: 2em;
+		}
+	}
+
+	.flex-column {
+		display: flex;
+		align-items: flex-start;
+		margin-top: 1em;
+
+		p:first-child {
+			margin-top: 0;
+		}
+
+		.stretch-item {
+			flex: 1;
+			margin-right: 1em;
 		}
-		.errors {
-			padding: 0.25em;
-			background-color: $colour-2;
-			color: $white;
-			@include _(text-stroke, 0.5px #000);
+	}
+
+	.flex-form, .flex-column {
+		button, .button {
+			width: auto;
 		}
-		.conflict-score {
-			padding: 0.25em;
-			background-color: $colour-3;
-			color: $black;
+	}
+
+	#main-nav {
+		.logo {
+			margin-top: 0.25em;
+			font-size: 4.25em;
 		}
-		.all-workshops, .all-events {
-			list-style: none;
-			padding: 0;
 
-			li {
-				margin: 0.5em;
-				padding: 0.5em;
-				border: 1px solid #CCC;
-				background-color: lighten($colour-1, 35);
-				@include default-box-shadow(top, 2);
+		.nav {
+			position: static;
+			font-size: 1.8em;
+			display: block;
+			text-align: right;
+			background-color: transparent;
+			@include _(box-shadow, none);
 
-				&.error {
-					outline: 0.2em solid $colour-2;
-					outline-offset: -0.2em;
-				}
+			form {
+				background-color: transparent;
 			}
+		}
 
-			h3 {
+		.nav a, .nav button {
+			width: auto;
+			min-width: 3.5em;
+			overflow: visible;
+			margin-left: 0.725em;
+			line-height: 3em;
+			padding: 0 0 1em;
+			color: $black;
+			@include _(box-shadow, none);
+			@include _(text-shadow, none);
+
+			@include before-and-after {
+				content: '';
+				display: block;
+				position: absolute;
+				background-color: rgba(0, 0, 0, 0.33);
+				z-index: -1;
 				margin: 0;
+				border: 0;
+				font-size: 1em;
+				left: -0.51em;
+				right: -0.51em;
+				top: 0;
+				height: 0;
+				width: auto;
+				@include _(opacity, 1);
+				@include _(transition, height 150ms ease-in-out);
+				@include _(transform, rotate(-20deg) scaleX(0.94) scaleY(1.5) translate(-0.5em, -0.5em));
+				@include _(transform-origin, 0 0);
 			}
 
-			.workshop-interest {
-				color: #888;
-				text-align: left;
-				margin: 0.25em 0;
+			@include after {
+				height: 3em;
+				@include _(opacity, 0.1);
 			}
-
-			.error-description {
-				background-color: $colour-2;
-				color: $white;
-				padding: 0.5em;
-				margin-top: 0.5em;
+			@include before {
+			    box-shadow: 0 0 2em -0.5em rgba(#000, 0.75);
+				@include _(opacity, 0.33);
 			}
 
-			.warnings {
-				background-color: $colour-3;
-				color: $black;
-				padding: 0.5em;
-				margin-top: 0.5em;
-				list-style: none;
+			&.current {
+				z-index: 2;
 
-				li {
-					padding: 0;
-					margin: 0;
-					background-color: transparent;
-					@include _(box-shadow, none);
+				@include before {
+					height: 3em;
+					@include _(opacity, 0.67);
+				}				
+			}
+
+			&:hover {
+				@include before {
+					height: 3em;
 				}
 			}
 		}
-		.day_parts {
-			list-style: none;
 
-			h4 {
-				display: inline-block;
-				min-width: 12.5em;
-				margin: 0.25em 0;
+		.nav a {
+			&[class] {
+				background-color: transparent;
 			}
 
-			select, .select {
-				float: right;
-				min-width: 5em;
+			&.policy {
+				@include before-and-after {
+					background-color: $colour-5;
+				}
 			}
 
-			.select {
-				padding-left: 0.25em;
+			&.about {
+				@include before-and-after {
+					background-color: $colour-3;
+				}
 			}
 		}
-		.actions {
-			margin: 2em;
-		}
-		.unsaved {
-			@include font-family(secondary);
-			background-color: lighten($colour-3, 25);
-			margin: 0 5em 2em;
-			padding: 0.5em;
+
+		.nav a.register, .nav button {
+			@include before-and-after {
+				background-color: $colour-2;
+			}
+			&:focus, &:active {
+				@include _(transform, none);
+			}
 		}
-		.all-events {
-			li {
-				background-color: lighten($colour-5, 35);
-				
-				&.meal {
-					background-color: lighten($colour-3, 25);
+
+		.user-nav-bar {
+			top: 0;
+			left: 0;
+			right: auto;
+			width: auto;
+			float: none;
+			text-align: left;
+			background-color: #EEE;
+			@include _(border-radius, 0 0 0.5em 0);
+			font-size: 0.8em;
+			padding: 0 1em 0 0.5em;
+			@include default-box-shadow(top, 2);
+
+			a {
+				display: inline-block;
+				padding: 0.25em 0;
+
+				&:hover {
+					color: lighten($black, 25%);
 				}
 			}
 
-			h3 {
-				margin-bottom: 0.5em;
+			.my-account {
+				max-width: none;
+				overflow: visible;
+
+				@include after {
+					content: '|';
+					display: inline;
+					@include _(opacity, 0.25);
+					position: static;
+					margin: 0 0.5em;
+				}
 			}
 		}
 	}
-}
 
-.conferences-schedule {
-	.actions {
-		margin: 2em;
-	}
-	
-	ul.events, ul.locations {
-		list-style: none;
+	#banner {
+		margin: 3em auto;
 
-		.button {
-			float: left;
-			font-size: 1em;
-			margin-bottom: 0.5em;
-			margin-right: 0.5em;
+		figure {
+			min-height: 40em;
+			margin: rems(-20) auto rems(2);
 		}
 
-		h3 {
-			display: inline-block;
-			margin: 0.25em 0 0;
+		.title {
+			font-size: 1.9em;
+			margin: 3em 0 1em;
 		}
 
-		li {
-			clear: both;
+		img {
+			@include _(box-shadow, 0 0 2em -0.5em rgba(0, 0, 0, 0.5));
 		}
 	}
-}
-
-.programme {
-
-	.schedule {
-		width: auto;
-		margin: 0;
-		min-width: 100%;
-		@include _(box-shadow, none);
-		table-layout: fixed;
-		border-spacing: 0.25em;
-		border-collapse: separate;
+	
+	#registration-steps {
+		ul {
+			display: inline-block;
+			text-align: left;
+			margin-top: -4em;
+		}
 
-		td {
-			position: relative;
-			vertical-align: middle;
+		li {
+			display: inline-block;
+			float: left;
 
-			.title {
-				text-align: center;
-				@include font-family(secondary);
-				color: #666;
+			@include after {
+				content: '';
+				top: 1.125em;
+				left: auto;
+				right: -0.25em;
+				@include _(transform, rotate(45deg));
 			}
-			
 
-			&.previewable {
-				cursor: pointer;
-
-				&:hover {
-					@include default-box-shadow(top, 2);
+			&.enabled:hover,
+			&.enabled:hover ~ li {
+				@include after {
+					@include _(transform, rotate(-135deg));
+					background-color: transparent;
 				}
 			}
+		}
+	}
 
-			&.workshop {
-				background-color: lighten($colour-1, 35);
-				border: 0.25em solid $colour-1;
+	ul.warnings {
+		li {
+			margin: 1em 4em;
+		}
+	}
 
-				.preview {
-					position: absolute;
-					top: 0;
-					right: 0;
-					bottom: 0;
-					left: 0;
+	.warning-info {
+		margin-left: 1em;
+	}
 
-					@include after {
-						display: none;
-					}
-				}
-			}
+	.workshop-list {
+		padding: 0 2em;
+	}
 
-			&.event {
-				background-color: lighten($colour-5, 35);
-				border: 0.25em solid $colour-5;
+	#main {
+		clear: right;
+
+		article {
+			padding: rems(2.5) 7.5%;
+		}
+
+		.columns {
+			form {
+				margin-top: 2em;
 			}
+		}
 
-			&.meal {
-				background-color: lighten($colour-3, 25);
-				border: 0.25em solid $colour-3;
+		.featured-image-container {
+			display: block;
+
+			figure {
+				float: left;
+				width: 33%;
+				margin: 0 1.5em 1.5em -1.5em;
 			}
+		}
+	}
 
-			&.not-interested {
-				.title {
-					opacity: 0.5;
-				}
+	#header-title {
+		min-height: rems(35);
+		font-size: 1em;
+
+		&.short {
+			font-size: 2em;
+			min-height: rems(15);
+
+			h1 {
+				position: absolute;
+				bottom: 0;
+				text-align: left;
+				font-size: 2em;
 			}
 
-			.info {
-				position: fixed;
+			@include before {
+				content: '';
+				position: absolute;
 				top: 0;
 				right: 0;
 				bottom: 0;
 				left: 0;
-				z-index: 1000;
-				background-color: $white;
-				text-align: left;
-				overflow-y: auto;
-				@include _(transition, transform 250ms ease-in-out);
-				@include _(transform-origin, center bottom);
-				@include _(transform, rotate(180deg) translate3d(0, 0, 0));
+				z-index: $zindex-base + 2;
+				@include _(box-shadow, inset 0 -13rem 3em -4rem rgba(0, 0, 0, 0.8));
+				@include _(transition, opacity 250ms ease-in-out);
+			}
+		}
 
-				.close {
-					float: right;
-					font-size: 2em;
+		&.no-image {
+			min-height: 0;
+			font-size: 1em;
+		}
 
-					@include before {
-						content: '×';
-						padding: 0 0.5em;
-					}
+		svg {
+			display: block;
+		}
 
-					@include after {
-						display: none;
-					}
-				}
+		svg rect {
+			@include _(animation, banner-load 1s ease-in-out);
+		}
 
-				h2 {
-					margin-bottom: 0.5em;
-				}
-			}
+		.title {
+			text-align: left;
+			width: 110%;
+			background-color: rgba($white, 0.5);
+			@include _(transform, rotate(-$header-tilt) translate3d(0, 0, 0));
+			@include _(transform-origin, 0 100%);
+		}
 
-			&:target .info {
-				@include _(transform, rotate(0) translate3d(0, 0, 0));
-			}
+		.details {
+			text-align: right;
+			color: #000;
+		}
+
+		.background {
+			display: block;
+		}
+		
+		.primary {
+			padding: 12% 0 0 0.25em;
 		}
 	}
 
-	.programme-day {
-		margin-top: 2em;
+	#footer {
+		footer {
+			font-size: 1em;
+		}
+
+		.github {
+			flex: none;
+			flex-basis: auto;
+			bottom: 0.5em;
+			float: left;
+			margin-right: 1em;
+			margin-left: 1em;
+		}
+		.facebook {
+			margin: 0;
+		}
+		ul.locales {
+			flex: none;
+			flex-basis: auto;
+			flex-grow: 1;
+		}
 	}
 
-	.programme-day-part {
-		overflow-x: auto;
+	.check-box-field,
+	.radio-button-field {
+		display: flex;
+
+		label {
+			flex: 1;
+			border: 0.1em solid;
+			border-left: 0;
+			text-align: left;
+		}
+
+		input:first-child + label {
+			border: 0.1em solid;
+		}
 	}
 }
 
-.select-field {
-	line-height: 1.75em;
+@include breakpoint(large) {
+	#main-nav {
+		.nav {
+			font-size: 1.9em;
+			margin-top: 0;
+		}
 
-	select {
+		.user-nav-bar {
+			@include _(border-radius, 0 0 0.5em 0.5em);
+			padding: 0 1em;
+			font-size: 1em;
+		}
+	}
+
+	#banner {
+		body.fixed-banner & {
+			position: fixed;
+			top: 0;
+			right: 0;
+			left: $sidebar-width;
+			z-index: $zindex-base + 2;
+		}
+
+		figure {
+			width: 90%;
+		}
+	}
+	
+	#main {
+		padding-left: $sidebar-width;
+	    min-height: 100vh;
+	}
+
+	#header-title {
+		&.no-image {
+			min-height: 0;
+		}
+		&.short {
+			min-height: rems(25);
+		}
+		&.no-image,
+		&.short {
+			h1 {
+				text-align: left;
+				margin: 0.67em 0;
+			}
+		}
+	}
+
+	#main-nav .logo {
+		font-size: 5em;
+	}
+
+	a.logo {
 		display: block;
+		float: none;
+		padding: 0.2em;
+	}
+
+	.actions {
+		margin: 4em 2em 0 0;
+	}
+	
+	#footer {
+		overflow: visible;
+		padding: 0;
 		width: 100%;
-		height: 2.1em;
-		font-family: inherit;
-		font-size: 1.5em;
-		padding: 0.25em;
-		@include default-box-shadow(top, 1.5, false);
-    }
+		height: 3em;
+
+		footer {
+			max-width: $row-width;
+			margin: 0 auto;
+		}
+	}
 }
diff --git a/app/controllers/conferences_controller.rb b/app/controllers/conferences_controller.rb
index 7a05555..a1f40e2 100644
--- a/app/controllers/conferences_controller.rb
+++ b/app/controllers/conferences_controller.rb
@@ -1037,6 +1037,9 @@ class ConferencesController < ApplicationController
 			workshop.notes              = params[:notes]
 			workshop.needs_facilitators = params[:needs_facilitators].present?
 			workshop.save
+
+			# Rouge nil facilitators have been know to be created, just destroy them here now
+			WorkshopFacilitator.where(:user_id => nil).destroy_all
 		else
 			return do_403
 		end
diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
index 027ee51..dff73af 100644
--- a/app/helpers/application_helper.rb
+++ b/app/helpers/application_helper.rb
@@ -680,16 +680,16 @@ module ApplicationHelper
 		description_id = nil
 		html = label_tag(name, nil, id: label_id)
 
-		if options[:warning].present?
-			description_id = "#{name.to_s}-label" unless options[:help].present?
-			html += content_tag(:div, _(options[:warning], :s, 2), id: description_id, class: 'warning-info')
-		end
-
 		if options[:help].present?
-			description_id = "#{name.to_s}-label"
+			description_id ||= "#{name.to_s}-desc"
 			html += content_tag(:div, _(options[:help], :s, 2), id: description_id, class: 'input-field-help')
 		end
 
+		if options[:warning].present?
+			description_id ||= "#{name.to_s}-desc"
+			html += content_tag(:div, _(options[:warning], :s, 2), id: description_id, class: 'warning-info')
+		end
+
 		html += content_tag(:div, value.present? ? value.html_safe : '',
 				id: name,
 				class: 'textarea',
@@ -698,10 +698,50 @@ module ApplicationHelper
 				aria: { labeledby: label_id, describedby: description_id }
 			)
 	
-		return content_tag(:div, html, class: ['text-area-field', 'input-field']).html_safe
+		html = content_tag(:div, html, class: ['text-area-field', 'input-field']).html_safe
+		html += _original_content(options[:original_value], options[:original_lang]) if options[:original_value].present?
+
+		return html.html_safe
+	end
+
+	def textfield(name, value, options = {})
+		html = ''
+		description_id = nil
+		
+		if options[:heading].present?
+			description_id ||= "#{name.to_s}-desc"
+			html += content_tag(:h3, _(options[:heading]), id: description_id)
+		end
+
+		html += show_errors name
+		html += label_tag name
+		html += text_field_tag(name, value,
+				required: options[:required],
+				lang: options[:lang],
+				aria: { describedby: description_id }
+			)
+
+		html = content_tag(:div, html.html_safe,
+				class: [
+					'text-field',
+					'input-field',
+					options[:big] ? 'big' : nil,
+					(@errors || {})[name].present? ? 'has-error' : nil
+			])
+
+		html += _original_content(options[:original_value], options[:original_lang]) if options[:original_value].present?
+
+		return html.html_safe
 	end
 
 	private
+		def _original_content(value, lang)
+			content_tag(:div, (
+					content_tag(:h4, _('translate.content.Translation_of')) +
+					content_tag(:div, value, class: 'value', lang: lang)
+				).html_safe, class: 'original-text')
+		end
+
 		def _form_field(type, name, value, options)
 			if type == 'check_box'
 				self.send(type + '_tag', name, "1", value, options)
diff --git a/app/models/workshop.rb b/app/models/workshop.rb
index c8ef90c..375bdfd 100644
--- a/app/models/workshop.rb
+++ b/app/models/workshop.rb
@@ -31,7 +31,7 @@ class Workshop < ActiveRecord::Base
     def active_facilitators
         users = []
         workshop_facilitators.each do |u|
-            users << User.find(u.user_id) unless u.role.to_sym == :requested
+            users << User.find(u.user_id) unless u.role.to_sym == :requested || u.user.nil?
         end
         return users
     end
@@ -78,7 +78,7 @@ class Workshop < ActiveRecord::Base
         return 0 unless id
         collaborators = []
         workshop_facilitators.each do |f|
-            collaborators << f.user_id unless f.role.to_sym == :requested
+            collaborators << f.user_id unless f.role.to_sym == :requested || f.user_id.nil?
         end
         return 10 unless collaborators.present?
         interested = WorkshopInterest.where("workshop_id=#{id} AND user_id NOT IN (#{collaborators.join ','})") || []
diff --git a/app/views/application/about.html.haml b/app/views/application/about.html.haml
index 007dd77..ddb059a 100644
--- a/app/views/application/about.html.haml
+++ b/app/views/application/about.html.haml
@@ -14,7 +14,7 @@
 		= columns(medium: 12) do
 			%h3=_'articles.about_bikebike.headings.Who_is_Invited', :t
 			%p=_'articles.about_bikebike.paragraphs.Who_is_Invited', :p
-		= columns(medium: 12) do
+		= columns(medium: 12, class: 'featured-image-container') do
 			%h3=_'articles.about_bikebike.headings.Types_of_Workshops', :t
 			%figure{style: "background-image: url(#{image_path('columbus_people.jpg')})"}
 			%p=_'articles.about_bikebike.paragraphs.Types_of_Workshops', :p
diff --git a/app/views/conferences/_contact_info.html.haml b/app/views/conferences/_contact_info.html.haml
index ff8e5c9..789d7fc 100644
--- a/app/views/conferences/_contact_info.html.haml
+++ b/app/views/conferences/_contact_info.html.haml
@@ -3,16 +3,8 @@
 	%p=_'articles.conference_registration.paragraphs.Contact_Info', :s, 2
 = columns(medium: 12) do
 	= form_tag register_path(@this_conference.slug) do
-		%h3=_'articles.conference_registration.headings.name','What is your name?'
-		.text-field.input-field{class: @errors[:name].present? ? 'has-error' : nil}
-			= show_errors :name
-			= label_tag :name
-			= text_field_tag :name, @name, required: true
-		%h3=_'articles.conference_registration.headings.location','Where are you coming from?'
-		.text-field.input-field{class: @errors[:location].present? ? 'has-error' : nil}
-			= show_errors :location
-			= label_tag :location
-			= text_field_tag :location, @registration.city || location(lookup_ip_location), required: true
+		= textfield :name, @name, required: true, heading: 'articles.conference_registration.headings.name'
+		= textfield :location, (@registration.city || location(lookup_ip_location)), required: true, heading: 'articles.conference_registration.headings.location'
 		%h3=_'articles.conference_registration.headings.languages','Which languages do you speak?'
 		- puts @errors.to_json.to_s
 		.check-box-field.input-field{class: @errors[:languages].present? ? 'has-error' : nil}
diff --git a/app/views/workshops/new.html.haml b/app/views/workshops/new.html.haml
index f1b9bc7..7ed003b 100644
--- a/app/views/workshops/new.html.haml
+++ b/app/views/workshops/new.html.haml
@@ -19,18 +19,8 @@
 						%h2=_@page_title, :t
 				- else
 					%h2=_@page_title, :t
-				.text-field.input-field.big
-					= label_tag :title
-					= text_field_tag :title, @title, required: true, lang: @translation
-				- if @is_translating
-					.original-text
-						%h4=_'translate.content.Translation_of'
-						.value=@workshop.title!
-				= textarea :info, @info, help: 'articles.workshops.paragraphs.info', lang: @translation
-				- if @is_translating
-					.original-text
-						%h4=_'translate.content.Translation_of'
-						.value=(@workshop.info! || '').html_safe
+				= textfield :title, @title, required: true, lang: @translation, big: true,  original_value: @is_translating ? @workshop.title! : nil, original_lang: @workshop.locale
+				= textarea :info, @info, help: 'articles.workshops.paragraphs.info', lang: @translation, original_value: @is_translating ? richtext(@workshop.info!, 4).html_safe : nil, original_lang: @workshop.locale
 			- if !@is_translating && (@workshop.id.blank? || @can_edit)
 				= columns(medium: 6) do
 					%h3=_'articles.workshops.headings.languages','Workshop Language'