/* floating footnote div
This will be loaded on EVERY page, and its difficult to get around this 
in wordpress. So its better if you paste this into your template's css
and then disable the "enque css" line in the php file...
---just remember that you must do it again if you change templates!---
 */

/* Style The hover popup (desktop) */
#footnotediv {
	position: absolute;
	background-color: white;
	padding: 3px;
	padding-left: 12px;
	padding-right: 12px;
	border: 1px solid #CDBBB5;
	box-shadow: #555 0 0 10px;
	-webkit-box-shadow: #555 0 0 10px;
	-moz-box-shadow: 0 0 10px #555;
	z-index: 99;
	/* Prevent text from causing horizontal blowout */
	word-wrap: break-word;
	overflow-wrap: break-word;
	box-sizing: border-box;
}

/* Mobile overrides: fixed positioning, capped width, scrollable */
@media (max-width: 768px), (pointer: coarse) {
	#footnotediv {
		position: fixed !important;
		left: 50% !important;
		transform: translateX(-50%) !important;
		top: 80px !important;
		width: 70vw !important;
		max-width: 70vw !important;
		max-height: 50vh !important;
		overflow-y: auto !important;
		overflow-x: hidden !important;
		/* Bigger text and padding for touch */
		font-size: 1em;
		padding: 10px 14px;
		/* Nicer shadow on mobile */
		box-shadow: 0 4px 20px rgba(0,0,0,0.35);
		-webkit-box-shadow: 0 4px 20px rgba(0,0,0,0.35);
	}
}


/* Style Reference Marks */
.fn-ref-mark {
	cursor: pointer;
	/* Ensure tappable area is large enough on mobile */
	display: inline-block;
	padding: 0 2px;
}

/* Style Footnote Heading Title */
#fn-heading {
	font-weight: bold;
}

/* Style Footnote Text */
.fn-text {
	text-decoration: none;
}

/* If you want to style just the back link after the footnote text */
a.fn-text {
	border-bottom: none;
}

/* If you use an image as a footnote text backlink */
a.fn-text img {
	margin: 0;
	padding: 0;
	border: 0;
}