From 1dbadfb375d3c782f46e71ead3c17fe6f8659033 Mon Sep 17 00:00:00 2001
From: Godwin <goodgodwin@hotmail.com>
Date: Sun, 30 Aug 2015 13:13:03 -0700
Subject: [PATCH] Made application.scss not compilable

---
 app/assets/stylesheets/_application.scss | 1914 ++++++++++++++++++++++
 1 file changed, 1914 insertions(+)
 create mode 100644 app/assets/stylesheets/_application.scss

diff --git a/app/assets/stylesheets/_application.scss b/app/assets/stylesheets/_application.scss
new file mode 100644
index 0000000..98b63e3
--- /dev/null
+++ b/app/assets/stylesheets/_application.scss
@@ -0,0 +1,1914 @@
+@import "bumbleberry";
+@import "settings";
+
+html, body {
+	color: #333;
+	position: relative;
+	z-index: -1;
+}
+
+h1, h2, h3, h4, h5, label, button, .button, dt, th, nav.sub-menu {
+	@include font-family(secondary);
+	font-weight: normal;
+}
+
+h2 {
+	margin: 0;
+	font-size: 6vw;
+}
+
+p {
+	font-size: 4vw;
+}
+
+a {
+	text-decoration: none;
+	color: $colour-1;
+	border-bottom: 0 solid;
+	outline: 0;
+	position: relative;
+
+	@include after {
+		content: '';
+		position: absolute;
+		border-bottom: 0 solid;
+		right: 0;
+		bottom: 0;
+		left: 0;
+		opacity: 0;
+		@include _(transition, all 150ms ease-in-out);
+		@include _(transform, translateY(-1em));
+	}
+
+	&:hover,
+	&:active,
+	&:focus {
+		@include after {
+			border-bottom: 0.1em solid;
+			opacity: 1;
+			transform: translateY(0);
+		}
+	}
+}
+
+table {
+    margin-bottom: 2em;
+	margin-left: 1em;
+	background-color: #F8F8F8;
+	width: 100%;
+	@include default-box-shadow(top, 2, true);
+
+	th, td {
+		text-align: left;
+		padding: 0.25em 0.5em;
+
+		&:first-child {
+			padding-left: 1em;
+		}
+
+		&:last-child {
+			padding-right: 1em;
+		}
+	}
+}
+
+button,
+.button {
+	position: relative;
+	display: inline-block;
+	color: $white;
+	background-color: $colour-1;
+	border: 0;
+	padding: 0.5em 1em;
+	font-size: 1.25em;
+	outline: 0;
+	border-bottom: 0.125em solid rgba(0, 0, 0, 0.15);
+	@include _(border-radius, 0.15em);
+	@include default-box-shadow(top, 2);
+	overflow: hidden;
+	cursor: pointer;
+	@include _(text-stroke, 1px rgba(0, 0, 0, 0.25));
+
+	@include before-and-after {
+		content: '';
+		position: absolute;
+		display: block;
+		top: 0;
+		right: 100%;
+		font-size: 1.15em;
+		background-color: rgba(0, 0, 0, 0);
+		border-color: transparent;
+		@include _(transition, all 250ms ease-in-out);
+	}
+	@include before {
+		height: 100%;
+		width: 100%;
+		margin-right: 1em;
+	}
+	@include after {
+		border-style: solid;
+		border-width: 1em 0 1em 1em;
+	}
+
+	&:hover,
+	&:focus,
+	&:hover,
+	&:focus {
+		@include before-and-after {
+			right: -1em;
+			border-left-color: rgba(0, 0, 0, 0.15);
+		}
+	}
+	&:hover,
+	&:focus {
+		@include before {
+			background-color: rgba(0, 0, 0, 0.15);
+		}
+	}
+
+	&:active {
+		@include _(transform, scale(0.95));
+
+		@include after {
+			left: 120%;
+		}
+	}
+
+	&:disabled {
+		@include _(opacity, 0.5);
+		cursor: inherit;
+
+		@include before-and-after {
+			display: none;
+		}
+	}
+
+	#main &[type="submit"] {
+		background-color: $colour-5;
+
+		&[value="send"] {
+			background-color: $colour-4;
+		}
+	}
+
+	&.register {
+		background-color: $colour-4;
+		//@include _(text-shadow, 0 0 0.15em rgba(0, 0, 0, 0.5));
+	}
+
+	form.logout & {
+		background-color: #666;
+	}
+
+	#main &.modify {
+		background-color: $colour-5;
+	}
+
+	#main &.delete {
+		background-color: $colour-4;
+	}
+}
+
+a.button {
+	@include after {
+		border-bottom: 1em solid transparent;
+		left: auto;
+		bottom: auto;
+		@include _(transform, none);
+	}
+}
+
+nav.sub-menu {
+	display: inline-block;
+	margin: 2rem 0 0;
+	text-align: center;
+	
+	a {
+	    margin: 0 1em 0.5em 0;
+		background-color: #E8E8E8;
+		color: #888;
+		display: inline-block;
+		padding: 0.25em 0.75em 0.333em;
+		font-size: 0.9em;
+		border: 1px solid #AAA;
+		border-bottom-width: 0.2em;
+		//@include _(text-shadow, 0 0.125em 0.25em #BBB);
+		@include _(border-radius, 0.15em);
+		@include default-box-shadow(top, 2);
+		@include _(text-shadow, 0 0.05em 0.05em #FFF);
+
+		&:hover, &:active, &:focus {
+			background-color: #D8D8D8;
+		}
+
+		&.current {
+			background-color: #CCC;
+			color: #666;
+			padding: 0.333em 0.75em 0.25em;
+		}
+
+		@include after {
+			display: none;
+		}
+	}
+
+	@include breakpoint(medium) {
+		border: 1px solid #AAA;
+		background-color: #AAA;
+		border-bottom-width: 0.125em;
+		@include _(border-radius, 0.15em);
+		@include default-box-shadow(top, 2);
+
+		a {
+			border: 0;
+			margin: 0 1px 0 0;
+			float: left;
+			@include _(border-radius, 0);
+			@include _(box-shadow, none);
+
+			&:last-child {
+				margin: 0;
+			}
+		}
+	}
+}
+
+textarea {
+	$line-height: 2em;
+	display: block;
+	width: 100%;
+	min-height: $line-height * 4;
+	font-size: 1.25em;
+	margin: 1em 0;
+	padding: 0 0.5em;
+	line-height: $line-height;
+	border: 0.1rem solid #E8E8E8;
+	outline: 0;
+	background: linear-gradient(
+		to bottom,
+		transparent,
+		transparent ($line-height - 0.05em),
+		rgba($colour-1, 0.33) 0.05em,
+		rgba($colour-1, 0.33)
+	);
+	background-size: 100% $line-height;
+	border-radius: 0 0 1em 0;
+	color: #000;
+	font-weight: bold;
+	@include default-box-shadow(top, 2);
+	@include _(transition, box-shadow 100ms ease-in-out);
+
+	&:hover, &:focus, &:active {
+		@include default-box-shadow(top, 1);
+	}
+}
+
+input {
+	&[type="text"], &[type="password"], &[type="telephone"], &[type="search"], &[type="email"], &[type="url"] {
+		display: block;
+		font-size: 1.25em;
+		outline: 0;
+		border: 0;
+		margin: 1em 0;
+		width: 100%;
+		padding: 0.25em 0.5em;
+		border-bottom: 0.15em solid transparent;
+		//@include default-box-shadow(top, 2, false, 0 0.05em 0 0 #666);
+		//@include _(transition, box-shadow 100ms ease-in-out);
+
+		&:hover, &:focus, &:active {
+			//@include default-box-shadow(top, 2, false, 0 0.15em 0 0 $colour-1);
+		}
+	}
+}
+
+.number-field,
+.email-field,
+.text-field {
+	position: relative;
+	//overflow: hidden;
+	margin-bottom: 2em;
+	background-color: #F8F8F8;
+	@include default-box-shadow(top, 1.5, false, 0 0.05em 0 0 #666);
+	@include _(transition, background-image 100ms ease-in-out);
+	$fn: '';
+	$capability: get_capability(map-get($compatibility-map, css-gradients));
+	@if $capability == yx or $capability == ax or $capability == y or $capability == a {
+		$fn: '-#{$browser_prefix}-';
+	}
+	@include _(background-size, 8px 8px);
+
+	label {
+		position: absolute;
+		z-index: 2;
+		font-size: 1em;
+		//float: left;
+		//@include font-family(primary);
+		//font-weight: bold;
+		//left: 0;
+		//top: 0;
+		padding: 0.25em 0.667em;
+		width: auto;
+		//background-color: #333;
+		@include _(transition, 'transform 250ms ease-in-out, color 250ms ease-in-out, background-color 250ms ease-in-out');
+		//@include _(transform-origin, left center);
+		//@include _(transform, scale(1) translateY(0));
+		top: 100%;
+		//@include _(transform, translateY(100%) scale(0.75));
+		@include _(transform, translateY(0) scale(0.75));
+		@include _(transform-origin, 0 0);
+		//line-height: 1em;
+		line-height: 1.5em;
+		background-color: transparent;
+		color: #333;
+	}
+
+	&.empty {
+		background-color: $white;//#E8E8E8;
+		background-image:
+			#{$fn}repeating-linear-gradient(
+				-45deg, #DDD,
+				#DDD 1px, transparent 1px,
+				transparent 6px
+			);
+		label {
+			z-index: 0;
+			@include _(transform, translateY(-100%) scale(1));
+			background-color: transparent;
+			color: #888;
+		}
+		input {
+			//@include _(box-shadow, none);
+		}
+	}
+
+	input {
+		margin: 0;
+		position: relative;
+		z-index: 1;
+		padding: 0.15em 0.5em;
+		background-color: transparent;
+		border: 0;
+	}
+
+	&.big input {
+		font-size: 2em;
+	}
+
+	&:focus, &:active {
+		label {
+			color: #333;
+		}
+	}
+	input {
+		&:focus, &:active {
+			@include _(box-shadow, inset 0 0 1em 1em #E8E8E8);
+		}
+	}
+	/*input {
+		&:focus, &:active, &:not([value=""]) {
+			+ label {
+				@include _(transform, scale(0.75) translateY(-20%));
+				top: -0.5em;
+			}
+		}
+	}*/
+}
+
+.input-field.other-field label {
+
+	input {
+		float: left;
+		margin: 0.33em 0;
+
+		&:checked {
+			+ div input {
+				//display: block;
+				z-index: 1;
+				@include _(opacity, 1);
+			}
+		}
+	}
+
+	div {
+		float: left;
+		position: relative;
+		margin: 0 0.25em;
+		font-size: 1em;
+
+		input {
+			//display: none;
+			@include _(opacity, 0);
+			@include _(transition, opacity 250ms ease-in-out);
+			z-index: -1;
+			position: absolute;
+			width: auto;
+			margin: 0;
+			border: 1px solid #CCC;
+			height: 1.5em;
+			left: 0;
+			top: 0;
+		}
+	}
+}
+
+.number-field {
+	display: inline-block;
+	font-size: 1.5em;
+
+	input {
+		text-align: right;
+	}
+}
+
+.input-field-help {
+	margin-bottom: 1em;
+	margin-left: 1em;
+}
+
+.check-box-field,
+.radio-button-field {
+	@include clearfix;
+	margin-bottom: 1em;
+	position: relative;
+	
+	label {
+		float: left;
+		@include default-box-shadow(top);
+		background-color: $colour-2;
+		text-align: center;
+		position: relative;
+		margin: 0 1em 3em;
+		padding: 0.5em;
+		cursor: pointer;
+		@include _(transition, #{'transform, background-color 100ms, 100ms ease-in-out, ease-in-out'});
+
+		&:hover {
+			@include _(transform, scale(1.1));
+		}
+
+		@include before-and-after {
+			content: '';
+			position: absolute;
+			visibility: hidden;
+			@include _(transition, transform 200ms ease-in-out);
+			@include _(transition, transform 200ms cubic-bezier(0, 0.38, 0.9, 2));
+		}
+
+		@include before {
+			background-color: $colour-5;
+			bottom: -0.3em;
+			right: -0.5em;
+			width: 2em;
+			height: 2em;
+			border-radius: 50%;
+			@include _(transform, scale(0));
+			@include default-box-shadow(top);
+		}
+
+		@include after {
+			border: 0.5em solid $white;
+			border-left: none;
+			border-top: none;
+			width: 1em;
+			height: 2em;
+			font-size: 0.6em;
+			bottom: 0.3em;
+			right: 0.3em;
+			@include _(transform, scale(0) rotate(45deg));
+		}
+	}
+
+	svg {
+		width: 100%;
+		height: 100%;
+		margin-bottom: 0.75em;
+		fill: $white;
+		stroke: rgba(0, 0, 0, 0.667);
+		stroke-width: 0.05em;
+
+		+ svg {
+			position: absolute;
+			top: 0;
+			left: 0;
+			right: 0;
+			@include _(opacity, 0.75);
+		}
+	}
+
+	input {
+		position: absolute;
+		opacity: 0;
+    	left: 1em;
+    	bottom: 0.5em;
+
+		&:checked + label {
+			background-color: $colour-1;
+			@include _(transform, scale(1.25));
+
+			@include before {
+				visibility: visible;
+				@include _(transform, scale(1));
+			}
+
+			@include after {
+				visibility: visible;
+				@include _(transform, scale(1) rotate(45deg));
+			}
+		}
+	}
+}
+
+.check-box-field {
+	label {
+		color: $white;
+		font-weight: normal;
+		@include font-family(secondary);
+		@include _(text-stroke, 0.5px #000);
+
+		@include before {
+			font-size: 0.6em;
+			bottom: -0.8em;
+		}
+
+		@include after {
+			font-size: 0.3em;
+			bottom: -0.5em;
+		}
+	}
+}
+
+.radio-button-field {
+	label {
+		width: 7em;
+		height: 5em;
+	}
+}
+.single-check-box-field,
+.single-radio-button-field {
+	margin-left: 1em;
+}
+
+.date-span {
+	margin-left: 1em;
+
+	label, input {
+		display: block;
+		height: 1.5em;
+		margin: 0 0.5em 1em 0;
+	}
+
+	label {
+		height: 1.5em;
+	}
+
+	input {
+		@include default-box-shadow(top);
+		background-color: $colour-1;
+		color: $white;
+		border: 0;
+		padding: 0 0.25em;
+		font-weight: normal;
+		@include font-family(secondary);
+		@include _(text-stroke, 0.5px #000)
+	}
+
+	.date-labels {
+		float: left;
+	}
+}
+
+form {
+	&.composition {
+		textarea {
+			height: 16em;
+		}
+	}
+}
+
+.actions {
+	text-align: center;
+	margin: 0 1em;
+
+	button, .button {
+		margin: 0 0.25em;
+	}
+
+	&.right {
+		text-align: right;
+
+		.note {
+			float: left;
+			color: $colour-1;
+			font-weight: bold;
+			font-size: 1.25em;
+		}
+	}
+}
+
+::-webkit-resizer {
+    visibility: hidden;
+    cursor: nw-resize;
+}
+
+@include selection {
+	background-color: rgba($colour-2, 0.75);
+	color: rgba($white, 0.75);
+}
+
+#main-nav {
+	position: relative;
+	top: 0;
+	left: 0;
+	width: 100%;
+	background-color: $white;
+	@include default-box-shadow(top, 2);
+	z-index: 1;
+
+	.nav {
+		text-align: center;
+		clear: left;
+		overflow: auto;
+		background-color: $colour-3;
+
+		a {
+			position: relative;
+			display: inline-block;
+			margin: 0;
+			padding: 1em 0;
+			float: left;
+			font-weight: normal;
+			@include font-family(secondary);
+			text-decoration: none;
+			font-size: 2.25vw;
+			outline: none;
+			border: 0;
+			width: 33.33%;
+			background-color: $colour-5;
+			color: $white;
+  			@include _(text-shadow, 0 0 0.35em #000);
+
+			@include after {
+				display: none;
+			}
+
+			@include before {
+				background-color: $colour-5;
+			}
+
+			&:nth-child(2) {
+				background-color: $colour-4;
+
+				@include before {
+					background-color: $colour-4;
+				}
+			}
+
+			&:nth-child(3) {
+				background-color: $colour-3;
+
+				@include before {
+					background-color: $colour-3;
+				}
+			}
+		}
+	}
+
+	.actions {
+		text-align: center;
+		position: absolute;
+		top: rems(0.5);
+		right: rems(1);
+	    font-size: 3.1vw;
+
+		> a, > form {
+			vertical-align: middle;
+			margin: 0 0 0.5em;
+		}
+	}
+}
+
+#main {
+	position: relative;
+	z-index: -1;
+	max-width: (rems(68) - $sidebar-width) * 2;
+	background-color: $white;
+	padding-bottom: rems(2);
+
+	article {
+		padding: rems(2.5) 7.5%;
+
+		&.supplementary {
+			//background-color: $colour-3;
+			margin: rems(1) 7.5%;
+			overflow: hidden;
+			border-radius: 0.33em;
+			border: 0.1rem solid #DDD;
+			background-color: #F7F7F7;
+			@include default-box-shadow(top, 2);
+		}
+
+		figure {
+			float: left;
+			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;
+		}
+	}
+}
+
+a.logo {
+	display: inline-block;
+	font-size: rems(5);
+	text-decoration: none;
+	padding: 0.1em;
+	border: 0;
+	float: left;
+	@include clearfix;
+
+	&:hover,
+	&:active,
+	&:focus {
+		@include after {
+			display: none;
+		}
+	}
+}
+
+@if capable_of(svg) {
+
+	@include keyframes(active-logo) {
+		0% { fill: $colour-1; }
+		15% { fill: $colour-5; }
+		30% { fill: $colour-3; }
+		45% { fill: $colour-4; }
+		60% { fill: $colour-2; }
+	}
+
+	@include keyframes(banner-load) {
+		0% { fill: #888; }
+	}
+
+	svg.bb-icon-logo {
+		fill: $colour-1;
+	}
+	svg.bb-icon-logo-text {
+		fill: #333;
+	}
+
+	.logo svg {
+		display: inline-block;
+		height: 1em;
+		width: 1em;
+		float: left;
+	}
+
+	.logo:hover svg.bb-icon-logo {
+		@include _(animation, active-logo 4s infinite);
+	}
+}
+
+#banner {
+	clear: left;
+
+	figure {
+		width: 100%;
+		max-width: rems(60);
+		margin: 0;
+	}
+
+	img {
+		width: 100%;
+		@include default-box-shadow;
+	}
+}
+
+$header-tilt: 8deg;
+
+#header-title {
+	font-size: 2.25vw;
+	background-size: cover;
+	background-position: 50% 20%;
+	background-repeat: no-repeat;
+	background-color: $colour-1;
+	color: #EEE;
+	overflow: hidden;
+	position: relative;
+	z-index: -1;
+
+	rect {
+		fill: $colour-1;
+	}
+
+	svg {
+		.colour-1 { fill: $colour-1; }
+		.colour-2 { fill: $colour-2; }
+		.colour-3 { fill: $colour-3; }
+		.colour-4 { fill: $colour-4; }
+		.colour-5 { fill: $colour-5; }
+	}
+
+	@if capable_of(css-mixblendmode) {
+		position: relative;
+
+		body.home & {
+			$colours: ($colour-2, $colour-5, $colour-4, $colour-3, $colour-1);
+			$gradient: (90deg);
+			$w: 100% / length($colours);
+			$i: 0;
+			@each $colour in $colours {
+				$gradient: append($gradient, #{$colour} #{$w * $i}, comma);
+				$i: $i + 1;
+				$gradient: append($gradient, #{$colour} #{$w * $i}, comma);
+			}
+			background-image: linear-gradient($gradient);
+		}
+
+		.cover {
+			position: absolute;
+			top: 0;
+			right: 0;
+			bottom: 0;
+			left: 0;
+			z-index: -1;
+			background-size: inherit;
+			background-position: inherit;
+			-webkit-filter: saturate(25%);
+			filter: saturate(25%);
+			@include _(mix-blend-mode, multiply);
+		}
+	}
+	
+	&.no-image,
+	&.short {
+		h1 {
+			text-align: center;
+			font-size: 3.5em;
+			margin: 0.25em 0.5em;
+			position: relative;
+			z-index: 1;
+			@include _(text-shadow, 0 0 0.15em #000);
+		}
+	}
+
+	svg {
+		display: none;
+		position: absolute;
+		width: 100%;
+		height: 100%;
+	}
+
+	.title {
+		position: relative;
+		padding: 1%;
+		overflow: hidden;
+		text-align: center;
+		@include _(text-shadow, 0 0.2em 0.5em rgba(32, 32, 32, 0.5))
+	}
+
+	.background {
+		position: absolute;
+		@include _(transform, rotate($header-tilt));
+		color: $colour-1;
+		@include _(opacity, 0.65);
+		margin: -4% -2%;
+		@if capable_of(calc) {
+			font-size: calc(5vw + #{rems(7)});
+		} @else {
+			font-size: rems(11);
+		}
+		display: none;
+	}
+
+	.details {
+		position: relative;
+		display: inline-block;
+		color: $white;
+		@include _(text-shadow, 0 0.2em 0.5em rgba(32, 32, 32, 0.75));
+	}
+
+	.primary {
+		font-size: 2.5em;
+		margin: 0;
+	}
+
+	.secondary {
+		font-size: 1.5em;
+	}
+}
+
+#footer {
+	padding: 1em;
+
+	.copy {
+		@include clearfix;
+
+		a {
+			float: right;
+			color: #666;
+		}
+	}
+
+	.facebook, .locale {
+		float: left;
+
+		a {
+			@include after {
+				display: none;
+			}
+			svg {
+				@include _(transition, fill 250ms ease-in-out);
+			}
+			&:hover, &:active, &:focus {
+				svg {
+					fill: #3B579D;
+				}
+			}
+		}
+	}
+
+	.github, .facebook {
+		.icons {
+			width: 1.5em;
+			height: 1.5em;
+			fill: #333;
+			vertical-align: middle;
+		}
+	}
+
+	.github {
+		position: relative;
+		background-color: $white;
+		border-radius: 0.25em;
+		border: 0.1em solid #DDD;
+		padding: 0.5em 0.5em 0.5em 2em;
+		text-align: center;
+		z-index: 1;
+		margin-bottom: 0.5em;
+
+		a {
+			margin: 0 0.5em;
+			font-size: 0.8em;
+			font-weight: bold;
+			color: inherit;
+		}
+
+		.icons {
+			position: absolute;
+			left: 0.5em;
+			top: 0.45em;
+			@include _(transition, 150ms fill ease-in-out);
+		}
+
+		&:hover .icons {
+			fill: #4183C4;
+		}
+	}
+
+	.locale {
+		@if capable_of(css3_selectors) {
+			margin: 0 0.5em;
+
+			#select-language {
+				position: absolute;
+				visibility: hidden;
+			}
+
+			.launch {
+				display: block;
+				height: 1.5em;
+				padding: 0 0.125em;
+				border-radius: 0.1em;
+				background-color: #888;
+				color: #E7E7E7;
+				text-align: center;
+				line-height: 1.5em;
+				font-weight: normal;
+				@include font-family(secondary);
+				@include _(transition, 150ms background-color ease-in-out);
+				cursor: pointer;
+
+				&:hover {
+					background-color: #333;
+				}
+
+				@include after {
+					content: '×';
+					display: block;
+					position: fixed;
+					top: 0.5em;
+					left: -1em;
+					z-index: 11;
+					color: #333;
+					font-size: 2em;
+					opacity: 0;
+					@include _(transition, 250ms left ease-in-out);
+				}
+			}
+
+			.selector {
+				position: fixed;
+				top: 0;
+				left: 0;
+				right: 0;
+				bottom: 0;
+				padding: 1em 4em;
+				overflow: auto;
+				background-color: $white;
+				z-index: 10;
+				@include _(transform, scale(0));
+				@include _(transform-origin, 6.25em _calc('100% - 2em', 98%));
+				@include _(transition, 250ms all ease-in-out);
+			}
+
+			ul {
+				list-style: none;
+				padding: 0;
+				margin: 0;
+				text-align: center;
+			}
+
+			li {
+				position: relative;
+				display: inline-block;
+				min-width: 6em;
+				margin: 1em;
+				text-align: center;
+				border-radius: 0.33em;
+				overflow: hidden;
+				@include default-box-shadow;
+				@include _(transform, scale(1));
+				@include _(transition, 100ms transform ease-in-out);
+
+				a {
+					display: block;
+					position: static;
+					background-color: $colour-1;
+					font-weight: normal;
+					@include font-family(secondary);
+					line-height: 1.5em;
+					color: $white;
+
+					@include before {
+						content: '';
+						position: absolute;
+						top: 0;
+						right: 0;
+						bottom: 0;
+						left: 0;
+						z-index: 1;
+					}
+				}
+
+				span {
+					padding: 1em;
+					height: 3.25em;
+					display: block;
+				}
+
+				&:hover {
+					@include _(transform, scale(1.25));
+				}
+			}
+
+			#select-language:checked ~ label {
+				@include after {
+					display: block;
+					left: 0.25em;
+					opacity: 1;
+				}
+				}
+
+			#select-language:checked ~ .selector {
+				@include _(transform, scale(1));
+			}
+		} @else {
+			display: none;
+		}
+	}
+}
+
+@include breakpoint(medium) {
+	h2 {
+		font-size: 2.25em;
+	}
+
+	p {
+		font-size: 1.4em;
+	}
+
+	#banner {
+		figure {
+			margin: rems(-20) auto rems(2);
+		}
+	}
+	
+	#main {
+		clear: right;
+
+		.columns {
+			form {
+				margin-top: 2em;
+			}
+		}
+
+		.lingua-franca-navigation {
+			width: 25%;
+			@include clearfix;
+
+			ul {
+				padding: 0;
+				list-style: none;
+				font-weight: normal;
+				@include font-family(secondary);
+
+				ul {
+					margin-left: 1em;
+					margin-bottom: 1em;
+					@include font-family(primary);
+				}
+			}
+
+			.current {
+				@include before {
+					content: '';
+					display: block;
+					position: absolute;
+					width: 0;
+					height: 0;
+					left: -1.5em;
+					top: 0.6667em;
+					border-width: 1em 0 1em 1em;
+					border-color: transparent transparent transparent #333;
+					border-style: solid;
+					font-size: 0.25em;
+				}
+			}
+		}
+
+		#lingua-franca-keys {
+			width: 75%;
+			float: right;
+		}
+	}
+
+	#main-nav {
+		height: rems(6);
+
+		.nav {
+			width: 80%;
+			clear: none;
+			padding-top: rems(1.5);
+			background-color: transparent;
+			overflow: visible;
+
+			a {
+				padding: 0;
+				float: none;
+				width: auto;
+				margin: 0 0.5em 0.75em;
+				font-size: 1em;
+				color: #666;
+				background-color: transparent;
+				@include _(text-shadow, 0 0.125em 0.25em #888);
+
+				&:nth-child(n) {
+					background-color: transparent;
+				}
+
+				&.current {
+					color: $colour-1;
+				}
+
+				@include after {
+					content: '';
+					display: block;
+					position: absolute;
+					bottom: -0.1em;
+					right: 0;
+					left: 0;
+					width: 0;
+					margin: 0 auto;
+					opacity: 0;
+					border-bottom: 0.15em solid;
+					@include _(box-shadow, 0 0.075em 0.15em #888);
+					@include _(transition, all 250ms ease-in-out);
+					@include _(transform, none);
+				}
+
+				&:hover,
+				&:active,
+				&:focus {
+					@include after {
+						opacity: 1;
+						width: 100%;
+					}
+				}
+			}
+		}
+
+		.actions {
+			font-size: 2vw;
+		}
+	}
+
+	#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;
+			}
+
+			@include before {
+				content: '';
+				position: absolute;
+				top: 0;
+				right: 0;
+				bottom: 0;
+				left: 0;
+				z-index: 1;
+				@include _(box-shadow, inset 0 -13rem 3em -4rem rgba(0, 0, 0, 0.8));
+				@include _(transition, opacity 250ms ease-in-out);
+			}
+		}
+
+		&.no-image {
+			min-height: 0;
+			font-size: 1em;
+		}
+
+		svg {
+			display: block;
+		}
+
+		svg rect {
+			@include _(animation, banner-load 1s ease-in-out);
+		}
+
+		.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%);
+		}
+
+		.details {
+			text-align: right;
+			color: #000;
+		}
+
+		.background {
+			display: block;
+		}
+		
+		.primary {
+			padding: 12% 0 0 0.25em;
+		}
+	}
+
+	#footer {
+		.github {
+			bottom: 0.5em;
+			left: 4em;
+			float: left;
+		}
+		.facebook {
+			position: absolute;
+			left: 0.5em;
+		}
+		.locale {
+			position: absolute;
+			left: 2em;
+		}
+	}
+}
+
+@include breakpoint(large) {
+	#banner {
+		body.fixed-banner & {
+			position: fixed;
+			top: 0;
+			right: 0;
+			left: $sidebar-width;
+			z-index: 1;
+		}
+
+		figure {
+			width: 90%;
+		}
+	}
+	
+	#main-nav {
+		position: fixed;
+		width: $sidebar-width;
+		height: 100%;
+		@include default-box-shadow(left, 2);
+
+		.nav {
+			text-align: left;
+			padding-top: rems(9);
+			width: 100%;
+
+			a {
+				font-size: 1.6em;
+				margin: 0.75em 1em;
+				@include _(transition, color 250ms ease-in-out);
+
+				&:hover, &:active, &:focus {
+					color: #333;
+
+					@include before {
+						@include _(opacity, 1)
+					}
+				}
+			}
+		}
+
+		.actions {
+			position: relative;
+			top: 0;
+			right: 0;
+			font-size: 1em;
+		}
+	}
+
+	#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;
+			}
+		}
+	}
+
+	a.logo {
+		display: block;
+		float: none;
+		font-size: rems(7.5);
+		padding: 0.2em;
+	}
+
+	.actions {
+		margin: 4em 2em 0 0;
+	}
+	
+	#footer {
+		position: fixed;
+		z-index: 1;
+		bottom: 0;
+		left: 0;
+		width: $sidebar-width;
+
+		.github {
+			position: absolute;
+			border-color: transparent;
+			max-width: 2.25em;
+			height: 2.25em;
+			left: 0.5em;
+			bottom: 0.333em;
+			overflow: hidden;
+			color: transparent;
+			padding: 0.333em;
+			line-height: 1.5em;
+			@include _(transition, all 250ms ease-in-out);
+
+			&:hover {
+				max-width: _calc('100% - 1em', 100%);
+				color: #333;
+				border-color: #DDD;
+				@include default-box-shadow(top, 2, true);
+			}
+
+			.icons {
+				float: left;
+				width: 1.5em;
+				height: 1.5em;
+				fill: #333;
+				vertical-align: middle;
+				position: static;
+			}
+
+			a {
+				margin: 0 0.5em;
+				font-size: 0.8em;
+				font-weight: bold;
+				color: inherit;
+				position: static;
+
+				&:hover {
+					text-decoration: underline;
+					
+					@include after {
+						display: none;
+					}
+				}
+			}
+		}
+		.facebook, .locale {
+			position: relative;
+			left: 2.5em;
+  			bottom: 0.25em;
+		}
+	}
+}
+
+@mixin header-colour($page, $colour) {
+	body.#{$page} {
+		#header-title {
+			background-color: $colour;
+
+			rect {
+				fill: $colour;
+			}
+		}
+	}
+}
+
+@include header-colour(about, $colour-1);
+@include header-colour(policy, $colour-3);
+
+#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;
+		}
+
+		&:last-child {
+			background-color: $colour-5;
+		}
+	}
+}
+
+#main form.payment {
+	text-align: center;
+
+	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: #333;
+		color: $colour-3;
+		vertical-align: bottom;
+	}
+
+	> button {
+		background-color: $colour-1;
+	}
+
+	.currency {
+		color: #888;
+		font-size: 1.667em;
+	}
+}
+
+#main ul.workshops {
+	list-style: none;
+	padding: 0;// 1em;
+	text-align: center;
+	@include default-box-shadow(top, 2, true);
+	background-color: #F8F8F8;
+
+	li {
+		display: inline-block;
+		margin: 0.5em;
+		vertical-align: middle;
+
+		@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);
+		}
+
+		&.view {
+			@include before {
+				display: block;
+			}
+			
+			.info {
+				//display: block;
+				left: 0;
+				right: 0;
+				top: 50%;
+				@include _(transform, translateY(-50%) scale(1));
+
+				@include breakpoint(large) {
+					left: 19rem;
+				}
+			}
+		}
+	}
+
+	h4, h5 {
+		color: $white;
+		background-color: $colour-1;
+		@include _(text-stroke, 1px rgba(0, 0, 0, 0.25));
+	}
+
+	h4 {
+		max-width: 10em;
+		cursor: pointer;
+		margin: 0;
+		padding: 1em;
+		position: relative;
+		@include default-box-shadow(top);
+		@include _(transition, transform 100ms ease-in-out);
+
+		&:hover {
+			z-index: 2;
+			@include _(transform, scale(1.25));
+		}
+	}
+
+	h5 {
+		font-size: 1.5em;
+		margin: 0;
+		padding: 0.5em 1em;
+
+		+ p {
+			margin-top: 0;
+		}
+	}
+
+	p {
+		padding: 1em;
+		max-height: 50vh;
+    	overflow-y: auto;
+	}
+
+	form {
+		text-align: center;
+	}
+
+	button {
+		margin: 1em 0.5em;
+	}
+
+	[contenteditable] {
+		outline: none;
+	}
+
+	.info {
+		position: fixed;
+		background-color: $white;
+		color: #333;
+		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);
+	}
+
+	[value="delete"] {
+		background-color: $colour-2;
+	}
+
+	[value="cancel"] {
+		background-color: $colour-4;
+	}
+}
+
+.conferences-register .policy-agreement {
+	padding: 0.25em 1em;
+	background-color: #F8F8F8;
+	@include default-box-shadow(top, 2, true);
+}
+
+.lingua-franca-translations {
+	position: relative;
+	@include default-box-shadow(top, 2);
+}
+
+.lingua-franca-translations .translation-examples {
+	//width: 100%;
+	padding: 0 7.5%;
+	z-index: 1;
+	background-color: $white;
+	padding-bottom: 0.5vh;
+}
+
+html #lingua-franca-translation-form {
+	@include _(box-shadow, none);
+}
+
+.lingua-franca-translations .translation-examples ul {
+	list-style: none;
+	padding: 0;
+	white-space: nowrap;
+	overflow-x: auto;
+	overflow-y: hidden;
+	width: 100%;
+	height: 6vh;
+	padding-top: 0.25em;
+	z-index: 1;
+	margin: 0;
+}
+
+.lingua-franca-translations .translation-examples li {
+	display: inline-block;
+	position: relative;
+	width: 5vw;
+	height: 5vh;
+	margin: 0 0.5em;
+
+	@include after {
+		content: '';
+		position: absolute;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		left: 0;
+		cursor: pointer;
+		outline: 0.25em solid rgba($colour-2, 0.25);
+		background-color: rgba($colour-2, 0.25);
+		outline-color: rgba($colour-2, 0.25);
+		@include _(transition, '#{background-color, outline-color 250ms, 250ms ease-in-out, ease-in-out}');
+	}
+
+	iframe {
+		@include _(transform, scale(0.05) translate(-950vw, -950vh));
+		width: 100vw;
+		height: 100vh;
+		@include _(transform-origin, 50% 50%);
+		//@include _(transition, '#{transform, position, z-index 250ms, 250ms, 0 ease-in-out, ease-in-out, linear 0, 250ms, 0}');
+		position: fixed;
+		margin: auto
+	}
+
+	&:hover {
+		@include after {
+			background-color: rgba($colour-3, 0);
+			outline-color: rgba($colour-3, 0.5);
+		}
+	}
+
+	&.open {
+		iframe {
+			top: 0;
+			left: 0;
+			z-index: 100;
+			//margin: auto;
+			@include _(transform, scale(0.75) translate(0, 0));
+			@include default-box-shadow(top, 2);
+			
+			@include breakpoint(large) {
+				left: 8.75rem;
+			}
+		}
+
+		@include after {
+			left: 0;
+			top: 0;
+			right: 0;
+			bottom: 0;
+			background-color: rgba($colour-3, 0.5);
+			position: fixed;
+			z-index: 99;
+		}
+		
+		/*@include before {
+			content: '';
+			position: fixed;
+			top: 0;
+			right: 0;
+			bottom: 0;
+			left: 0;
+			z-index: 101;
+			cursor: pointer;
+		}*/
+	}
+}
+
+.highlight-key {
+    outline: 3rem solid rgba($colour-2, 0.5);
+}
+
+#lingua-franca-translation-form button[type="submit"] {
+    margin-right: 0.25em;
+}
+
+.translation-history .translation-diff-info,
+.translation-history .diff ul {
+    list-style: none;
+    padding: 0;
+}
+
+.translation-history .translation-diff-info li {
+    margin-bottom: 0.5em;
+    font-style: italic;
+}
+
+.translation-history .translation-diff-info li,
+.translation-history .diff li {
+    width: 50%;
+    display: inline-block;
+    float: left;
+}
+
+#lingua-franca-keys td a .undefined {
+	font-style: italic;
+	color: #888;
+}
+
+.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;
+			border-radius: 50%;
+		}
+	}
+
+	.money .stat {
+		background-color: $colour-5;
+	}
+
+	.percent {
+		font-size: 1.5em;
+	}
+
+	.value {
+		position: relative;
+		z-index: 1;
+	}
+
+	.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;
+	}
+}
+
+.email-preview {
+	max-width: 40rem;
+	margin: 2em auto 0;
+	padding: 0.25em 1em;
+	background-color: #F8F8F8;
+	@include default-box-shadow(top, 2, true);
+}
+
+.facilitators {
+	display: inline-block;
+
+	.name, .role {
+		display: inline;
+	}
+
+	.role {
+		color: #666;
+
+		@include before {
+			content: '(';
+		}
+
+		@include after {
+			content: '), ';
+		}
+
+		&:last-child {
+			@include after {
+				content: ')';
+			}
+		}
+	}
+}
+
+.workshop-previews {
+	position: relative;
+	list-style: none;
+	padding: 0;
+
+	p {
+		padding: 0 1rem 0.5rem;
+		font-size: 1em;
+		color: #333;
+	}
+
+	h4 {
+		color: $white;
+		background-color: $colour-1;
+		padding: 0.5em 1em;
+		margin: 0;
+		@include _(text-stroke, 1px rgba(0, 0, 0, 0.25));
+	}
+
+	a {
+		display: block;
+		max-height: 10em;
+		overflow: hidden;
+		@include default-box-shadow(top, 2);
+		@include _(transition, transform 150ms ease-in-out);
+
+		&:hover, &:focus, &:active {
+			z-index: 1;
+			@include _(transform, scale(1.1));
+		}
+
+		@include before {
+			content: '';
+			position: absolute;
+			top: 0;
+			right: 0;
+			bottom: 0;
+			left: 0;
+			z-index: 1;
+			cursor: pointer;
+			@include _(box-shadow, inset 0em -2em 2em -1em $white);
+		}
+
+		@include after {
+			 display: none;
+		}
+	}
+}
\ No newline at end of file