Re-implement existing website template (from PHP). Add all assets.

Website/wwwroot/css/gallery.less

@@ -0,0 +1,198 @@
+@import "colours.less";
+
+#tabs{
+	background:@primary;
+	margin:-20px;
+	margin-bottom:10px;
+	position:fixed;
+	width:100%;
+	box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.8);
+	overflow-x:auto;
+	white-space:nowrap;
+
+	a{
+		display:inline-block;
+		color:@primary-100;
+		padding:15px 30px;
+		text-decoration:none;
+		text-transform: uppercase;
+
+		&.active{
+			color:#fff;
+			border-bottom:3px solid #fff;
+		}
+	}
+}
+
+.album{
+	width:33.33%;
+	/*float:left;*/
+	display:inline-block;
+	vertical-align:top;
+
+	div{
+		margin:5px;
+		padding:5px;
+		background:@control2;
+	}
+
+	span{
+		display:block;
+		text-align:center;
+		color:@Grey-800;
+		overflow:hidden;
+	}
+}
+
+.imageSelector{
+	.image{
+		width:25%;
+		display:inline-block;
+		vertical-align:top;
+		text-align:center;
+
+		&.selected {
+			>div{
+				background:@primary-300;
+
+				&:hover{
+					background:@primary-400;
+				}
+			}
+		}
+
+		input[type=checkbox]{
+			display:none;
+		}
+
+		>div{
+			margin:5px;
+			padding:5px;
+			background:@control2;
+
+			&:hover{
+				background:@Grey-400;
+			}
+		}
+	}
+}
+
+#album-viewer{
+	height:100%;
+	display:flex;
+	flex-direction: column;
+
+	#album-description{
+		flex: 0 0 auto;
+
+		.expander{
+			padding:5px;
+			background:@control2;
+
+			&:after{
+				float:right;
+				content: "+";
+			}
+
+			&.expanded:after{
+				content: '-';
+			}
+		}
+
+		.text{
+			background:@control;
+			padding:5px;
+
+			&.ng-hide{
+				//opacity: 0;
+				line-height: 0;
+			}
+		}
+	}
+
+	#album-thumbnails{
+		flex: 0 0 auto;
+		overflow-x:auto;
+		overflow-y:hidden;
+		white-space:nowrap;
+		text-align:center;
+
+		img{
+			width:100px;
+			border:3px solid transparent;
+
+			&.selected{
+				border:3px solid @primary-300;
+			}
+		}
+	}
+
+	#album-images{
+		flex: 1 1 auto;
+		overflow:auto;
+		position:relative;
+
+		.image{
+			position:absolute;
+			top: 0;
+			left: 0;
+			right: 0;
+			bottom: 0;
+			overflow:hidden;
+			text-align:center;
+
+			img{
+				max-height: 100%;
+
+			}
+		}
+	}
+}
+
+#galleryUpload{
+
+	.upload{
+		font-size:2em;
+		padding:5px;
+	}
+
+	.dragDrop{
+		min-height:200px;
+		border-color: @background;
+		background-position: center;
+		background-size: 100px;
+		margin-bottom:5px;
+
+		&.dragOver{
+			border: 3px dashed @Grey-700;
+			background-image: url("/images/upload.svg");
+			background-repeat: no-repeat;
+		}
+	}
+
+	.newImage{
+		display:flex;
+		margin-bottom:5px;
+
+		.information{
+			flex:1;
+		}
+
+		.preview{
+			flex:1;
+			position: relative;
+
+			.imageContainer{
+				position:absolute;
+				top:0;
+				bottom:0;
+				right:0;
+				text-align:right;
+
+				img{
+					height:100%;
+				}
+			}
+		}
+	}
+}