Fix "block"s to be inline-block, width 100%

* Use border-image-width to allow border to encroach into text area without using ::before element for the border.
* Rearrange things so .wide is last; makes sure wide is always displayed as `block` with priority over mustache divs default `inline-block`
* Fix main page column-gap
* adjust font size inside .note and .descriptive

themes/5ePhb.style.less

@@ -19,7 +19,7 @@ body {
 }
 .useSansSerif(){
 	font-family : ScalySansRemake;
-	font-size   : 0.325cm;
+	font-size   : 0.318cm;
 	line-height : 1.2em;
 	p,dl,ul,ol {
 		line-height : 1.2em;
@@ -51,6 +51,7 @@ body {
 	max-height        : 100%;
 	column-span       : all;
 	columns           : inherit;
+	column-gap        : inherit;
 }
 .page{
 	.useColumns();
@@ -209,29 +210,21 @@ body {
 	// *            NOTE
 	// *****************************/
 	.note{
-		&::before{
-			content             : "";
-			box-sizing          : border-box;
-			border-style        : solid;
-			border-width        : 11px;
-			border-image        : @noteBorderImage 12;
-			border-image-outset : 9px 0px;
-			position            : absolute;
-			width               : 100%;
-			height              : 100%;
-			top                 : 0;
-			left                : 0;
-		}
 		.useSansSerif();
-		position            : relative;
-		margin-top          : 1.3em;
-		margin-left         : -0.1em;
-		margin-right        : -0.1em;
 		background-color    : @noteGreen;
+		border-style        : solid;
+		border-width        : 1px;
+		border-image        : @noteBorderImage 12 stretch;
+		border-image-outset : 9px 0px;
+		border-image-width  : 11px;
+		margin-top          : 9px; //Prevent top border getting cut off on colbreak
+		padding             : 0.13cm 0.16cm;
 		filter              : drop-shadow(1px 4px 6px #888);
-		padding             : 0.5em 0.6em;
 		& + * {
-			margin-top : 1.3em;
+			margin-top : 0.45cm;
+		}
+		h5 {
+			font-size : 0.375cm;
 		}
 		p{
 			display        : block;
@@ -241,7 +234,7 @@ body {
 			padding-top : .8em;
 		}
 		:last-child {
-			margin-bottom : 0em;
+			margin-bottom : 0;
 		}
 	}
 	//************************************
@@ -249,18 +242,19 @@ body {
 	// ************************************/
 	.descriptive{
 		.useSansSerif();
-		display             : inline-block;
-		margin-top          : 1.4em;
 		background-color    : #faf7ea;
-		font-family         : ScalySansRemake;
 		border-style        : solid;
 		border-width        : 7px;
 		border-image        : @descriptiveBoxImage 12 stretch;
 		border-image-outset : 4px;
-		filter              : drop-shadow(0 0 3px #faf7ea);
+		margin-top          : 4px; //Prevent top border getting cut off on colbreak
 		padding             : 0.1em;
+		filter              : drop-shadow(0 0 3px #faf7ea);
 		& + * {
-			margin-top : 1.4em;
+			margin-top : 0.45cm;
+		}
+		h5 {
+			font-size : 0.375cm;
 		}
 		p{
 			display        : block;
@@ -271,7 +265,7 @@ body {
 			padding-top : .8em;
 		}
 		:last-child {
-			margin-bottom : 0em;
+			margin-bottom : 0;
 		}
 	}
 	//*****************************
@@ -380,7 +374,6 @@ body {
 			margin                : 0px -6px 1em;
 		}
 
-		//-webkit-transform : translateZ(0); //Prevents shadows from breaking across columns, but breaks internal columns...
 		position          : relative;
 		padding           : 0px;
 		margin-bottom     : 1em;
@@ -520,12 +513,15 @@ body {
 
 	pre code{
 		width               : 100%;
-		display             : block;
+		display             : inline-block;
-		border              : 4px solid;
+		border-style        : solid;
+		border-width        : 1px;
 		border-image        : @codeBorderImage 26 stretch;
 		border-image-width  : 10px;
 		border-image-outset : 2px;
 		border-radius       : 12px;
+		margin-top          : 2px; //Prevent top border getting cut off on colbreak
+		margin-bottom       : 2px;
 		& + * {
 			margin-top : 1em;
 		}
@@ -543,9 +539,6 @@ body {
 		break-after                : always;
 		-moz-column-break-after    : always;
 		break-before               : column;
-		&+* {
-			margin-top: 0;
-		}
 	}
 	//Avoid breaking up
 	blockquote,table{
@@ -595,19 +588,7 @@ body {
 		break-inside                : auto;
 	}
 }
-//*****************************
+
-// *         WIDE
-// *****************************/
-.page .wide{
-	column-span         : all;
-	-webkit-column-span : all;
-	-moz-column-span    : all;
-	display             : block;
-	margin-bottom       : 0.34cm;
-	&+* {
-		margin-top : 0;
-	}
-}
 //*****************************
 // *       CLASS TABLE
 // *****************************/
@@ -733,16 +714,15 @@ body {
 // *****************************/
 .page {
 	.block {
-		break-inside : avoid;
+		break-inside      : avoid;
-		-webkit-transform   : translateZ(0); //Prevents shadows from breaking across columns
+		display           : inline-block;
+		min-width         : 100%;
+		-webkit-transform : translateZ(0); //Prevents shadows from breaking across columns
 	}
 	.inline-block {
 		display : inline-block;
 		text-indent : initial;
 	}
-	div {
-		column-gap : 0.5cm; //Default spacing if a div uses multicolumns
-	}
 }
 
 //*****************************
@@ -788,3 +768,17 @@ body {
 		margin-top: -1em;
 	}
 }
+
+//*****************************
+// *         WIDE
+// *****************************/
+.page .wide{
+	column-span         : all;
+	-webkit-column-span : all;
+	-moz-column-span    : all;
+	display             : block;
+	margin-bottom       : 0.34cm;
+	&+* {
+		margin-top : 0;
+	}
+}