add magic item images, some wpm creatures

src/assets/styles/styles.css

@@ -344,14 +344,6 @@ table th {
 	font-style: italic;
 }
 
-.headlessTableWrapper thead {
-	display: none;
-}
-
-.nonHumanClassTableWrapper table thead tr:last-child {
-	display: none;
-}
-
 .dividedTableWrapper {
 	display: block;
 	margin: 1rem 0;
@@ -382,6 +374,23 @@ table th {
 	max-width: 90%;
 }
 
+details.gm-notes {
+	border: 1px dashed #885c68;
+	padding-left: 1rem;
+}
+
+details.gm-notes summary {
+	margin-left: -1rem;
+}
+
+details.gm-notes ul {
+	margin-top: 0;
+}
+
+.headlessTableWrapper thead {
+	display: none;
+}
+
 a.hiddenLink {
 	border-bottom: transparent;
 	color: #fadbb0;
@@ -529,7 +538,47 @@ a.licenseLink:hover {
 	top: 1rem;
 }
 
-.menubar {
+.menubar {/**
+	* Scrolling shadows by @kizmarh and @leaverou
+	* Only works in browsers supporting background-attachment: local; & CSS gradients
+	* Degrades gracefully
+	*/
+   
+   html {
+	   background: white;
+	   font: 120% sans-serif;
+   }
+   
+   .scrollbox {
+	   overflow: auto;
+	   width: 200px;
+	   max-height: 200px;
+	   margin: 50px auto;
+   
+	   background:
+		   /* Shadow covers */
+		   linear-gradient(white 30%, rgba(255,255,255,0)),
+		   linear-gradient(rgba(255,255,255,0), white 70%) 0 100%,
+		   
+		   /* Shadows */
+		   radial-gradient(50% 0, farthest-side, rgba(0,0,0,.2), rgba(0,0,0,0)),
+		   radial-gradient(50% 100%,farthest-side, rgba(0,0,0,.2), rgba(0,0,0,0)) 0 100%;
+	   background:
+		   /* Shadow covers */
+		   linear-gradient(white 30%, rgba(255,255,255,0)),
+		   linear-gradient(rgba(255,255,255,0), white 70%) 0 100%,
+		   
+		   /* Shadows */
+		   radial-gradient(farthest-side at 50% 0, rgba(0,0,0,.2), rgba(0,0,0,0)),
+		   radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,.2), rgba(0,0,0,0)) 0 100%;
+	   background-repeat: no-repeat;
+	   background-color: white;
+	   background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
+	   
+	   /* Opera doesn't support this in the shorthand */
+	   background-attachment: local, local, scroll, scroll;
+   }
+   
 	background: #282c32;
 	display: static;
 	max-height: 1px;
@@ -742,6 +791,10 @@ a.licenseLink:hover {
 	text-align: center;
 }
 
+.nonHumanClassTableWrapper table thead tr:last-child {
+	display: none;
+}
+
 .page {
 	background: #372734;
 	background: rgba(55, 39, 52, 0.9);
@@ -1073,12 +1126,14 @@ a.pageTitle-sublink {
 	font-weight: bold;
 }
 
+
 .toolDetails {
 	border: 1px dashed;
 	display: none;
 	margin-bottom: 4%;
 	overflow-y: auto;
 	padding: 0 2rem;
+	position: relative;
 	width: 100%;
 }
 
@@ -1114,6 +1169,14 @@ a.pageTitle-sublink {
 	text-align: center;
 }
 
+.bottomShadow {
+	box-shadow: rgba(0, 0, 0, 0.35) 0px -50px 36px -28px inset;
+}
+
+.topShadow {
+	box-shadow: rgba(0, 0, 0, 0.35) 0px 50px 36px 28px inset;
+}
+
 .zineIssue-wrapper .table-of-contents {
 	display: none;
 }