Paypal Registration

app/assets/stylesheets/sass/_base.scss

@@ -1,4 +1,43 @@
 table#translations {
+	table-layout: fixed;
+	padding: 0;
+
+	.key, .pages {
+		width: 25%;
+		overflow: hidden;
+
+		&:hover	{
+			overflow: visible;
+		}
+	}
+
+	.pages {
+		position: relative;
+
+		ul {
+			font-size: 1em;
+			margin: 0;
+			list-style: none;
+			position: absolute;
+			left: 0;
+			top: 0;
+		}
+
+		a {
+			display: block;
+		}
+
+		&:hover {
+			ul {
+				z-index: 100;
+			}
+
+			a {
+				background-color: $white;
+			}
+		}
+	}
+
 	td.value {
 		position: relative;
 		cursor: text;
@@ -396,6 +435,48 @@ ul.tags,
 	outline: none !important;
 }
 
+#register-dlg {
+	position: fixed;
+	left: 0;
+	top: 0;
+	width: 100%;
+	height: 100%;
+	background-color: transparent;
+	visibility: hidden;
+	z-index: 100;
+	@include text-shadow(none);
+	@include transition(background-color 250ms ease-in-out 125ms, visibility 0 linear 250ms);
+
+	form {
+		position: fixed;
+		min-width: 30em;
+		left: 110%;
+		right: 0;
+		max-width: 30em;
+		bottom: 0;
+		margin: auto;
+		top: 0;
+		background-color: $white;
+		height: 10em;
+		padding: 1em;
+		z-index: 101;
+		@include transform(skewX(-30deg));
+		@include transition(all 250ms ease-in-out 0);
+	}
+
+	&.open {
+		background-color: rgba($primary-color, 0.8);
+		visibility: visible;
+		@include transition(background-color 250ms ease-in-out);
+
+		form {
+			left: 0;
+			@include transform(skewX(0));
+			@include transition(all 250ms ease-in-out 125ms);
+		}
+	}
+}
+
 @include breakpoint(medium) {
 	.organizations-index,
 	.conferences-index {

app/assets/stylesheets/sass/_layout.scss

@@ -85,7 +85,7 @@ body {
 			float: left;
 
 			.logo {
-				width: auto;
+				width: 100%;
 				height: 90%;//2em;
 				fill: $primary-color;
 				position: absolute;
@@ -236,6 +236,11 @@ body {
 		text-align: center;
 	}
 
+	form {
+		text-align: center;
+		padding: 2em 0;
+	}
+
 	@include breakpoint(medium) {
 		+ #content {
 			padding-top: 0;
@@ -333,23 +338,33 @@ main {
 		//}
 	}
 
-	.align-bottom > div {
-		margin-bottom: 3em;
-	}
+	//.align-bottom > div {
+		//margin-bottom: 3em;
+	//}
 
 	.button {
 		width: 75%;
 		color: inherit;
 		border-color: inherit;
-		background-color: rgba(darken($article-color, 0), 0.33);
+		background-color: rgba(darken($primary-color, 0), 0.33);
 		padding: 0.75em 1em;
+		white-space: nowrap;
 		@include text-shadow(none);
 
 		&:hover {
-			background-color: $article-color;
+			background-color: $primary-color;
 			color: $white;
 			border-color: transparent;
 		}
+
+		&#register-now {
+			background-color: rgba(darken($warning-color, 0), 0.33);
+			margin-top: 0;
+
+			&:hover {
+				background-color: $warning-color;
+			}
+		}
 	}
 
 	.organizations & {
@@ -433,7 +448,8 @@ main {
 		}
 	}
 
-	.page-style-emphasize-banner & {
+	.page-style-emphasize-banner &,
+	.conferences & {
 		figure img {
 			box-shadow: 0 0 2em $black;
 		}
@@ -495,6 +511,10 @@ main {
 			}
 		}
 
+		.page-style-article.small-banner & {
+			min-height: 10em;
+		}
+
 		.page-style-list & {
 			min-height: 10em;
 			height: 30em;
@@ -505,6 +525,10 @@ main {
 				font-size: 6vw;
 			}
 		}
+		
+		.row .align-bottom.buttons {
+			height: 14em;
+		}
 	}
 
 	@include breakpoint(large) {
@@ -526,6 +550,10 @@ main {
 			border-bottom-left-radius: inherit;
 		}
 
+		.button {
+			//margin-top: 20%;
+		}
+
 		.page-style-list & {
 			height: 15em;
 			height: 15vw;
@@ -560,6 +588,10 @@ main {
 
 			.row .align-bottom {
 				height: auto;
+
+				&.buttons {
+					height: 10em;
+				}
 			}
 		}
 	}
@@ -623,13 +655,15 @@ main {
 	position: absolute;
 	top: 100%;
 	right: 0.25em;
-	margin: 0.25em 0.25em 0 0;
+	//margin: 0.25em 0.25em 0 0;
+	margin: -1em 0.25em 0 0;
 	font-size: 0.8em;
 	text-align: right;
 	text-shadow: none;
 	@include opacity(0.5);
 	clear: right;
 	z-index: 2;
+	mix-blend-mode: luminosity;
 
 	> span {
 		display: none;
@@ -1043,3 +1077,7 @@ table {
 .clearfix {
 	@include clearfix;
 }
+
+article.row {
+	margin-left: 0;
+}