/* 
 * The main wrap comprises the "content" section of the website--everything
 * outside of menus and sidebars. This section gets printed, so it is
 * important to knock out special formatting for links, etc.
 */

main.wrap {
	padding: 15px;
	float: left;
	width: 678px;
	max-width: calc(100% - 30px);
	float: left;
	}

@media (min-width: 700px) {
	main.wrap {
		max-width: calc(100% - 305px);
		}
}

	main.wrap h1, main.wrap h2, main.wrap h3, main.wrap h4 {
		font-family: 'Oxygen', sans-serif;
		}

	.new-page {
		page-break-before: always;
		}


	main.wrap p,
	main.wrap table {
		font-family: 'Oxygen', sans-serif;
		font-size: 110%;
		margin-bottom: 12px;
		margin-top: 0px;
		}

		main.wrap h2 a,
		main.wrap h2 a:link,
		main.wrap h2 a:visited,
		main.wrap h3 a,
		main.wrap h3 a:link,
		main.wrap h3 a:visited,
		main.wrap p a,
		main.wrap p a:link,
		main.wrap p a:visited
		main.wrap ul a,
		main.wrap ul a:link,
		main.wrap ul a:visited,
		main.wrap ol a,
		main.wrap ol a:link,
		main.wrap ol a:visited {
			color: #339999;
			font-weight: bold;
			text-decoration: none;
			}

		main.wrap h2 a:hover,
		main.wrap h2 a:active,
		main.wrap h3 a:hover,
		main.wrap h3 a:active,
		main.wrap p a:hover,
		main.wrap p a:active
		main.wrap ul a:hover,
		main.wrap ul a:active,
		main.wrap ol a:hover,
		main.wrap ol a:active {
			background-color: #cad49d;
			text-decoration: none;
			}

	main.wrap div.search-results h3 {
		margin-top: 20px !important;
		margin-bottom: 0 !important;
		padding: 0 !important;
		}

		main.wrap div.search-results a,
		main.wrap div.search-results a:link,
		main.wrap div.search-results a:visited {
			color: #339999;
			}

		main.wrap div.search-results a:hover {
			background-color: #cad49d;
			text-decoration: none;
			}

	main.wrap p.next-page-link {
		text-align: right;
		}

	main.wrap p.last-updated {
		font-size: 85%;
		font-style: italic;
		}


@media screen {
		main.wrap p a:not([href*='wanderersguild.com']):not([href^='#']):not([href^='/']):after,
		main.wrap li a:not([href*='wanderersguild.com']):not([href^='#']):not([href^='/']):after {
			font-family: 'FontAwesome';
			content: " \f08e";
			font-size: 60%;
			color: #9e4f11;
			vertical-align: super;
			font-weight: 200;
			}
}

	main.wrap div.search-results p{
		margin-top: 0 !important;
		margin-left: 15px;
		font-size: 90%;
		padding-top: 0 !important;
		}

	main.wrap p img {
		max-width: 100%;
		}

	main.wrap ul,
	main.wrap ol {
		font-family: 'Oxygen', sans-serif;
		}

	main.wrap ul li,
	main.wrap ol li {
		font-size: 110%;
		}

	main.wrap ul li ul li,
	main.wrap ol li ul li {
		font-size: 100% !important;
		}


	main.wrap ul.extra-space li {
		margin-top: 6px;
		}

		main.wrap ul li:first-child {
			margin-top: 0px !important;
			}

	main.wrap p.breadcrumbs {
		font-size: 90%;
		margin-bottom: 3px !important;
		}

		body.home main.wrap p.breadcrumbs {
			display: none;
			}

	main.wrap h2 {
		font-size: 160%;
		}

	main.wrap h3 {
		margin-bottom: 0;
		font-size: 135%;
		}

	main.wrap h4 {
		font-size: 115%;
		font-style: italic;
		margin-bottom: 0;
		}

	main.wrap table.tier-table,
	main.wrap table.left-align,
	main.wrap table.spell-cost-table {
			margin: 12px auto;
			border: 0px none transparent;
			border-spacing: 0px;
			border-collapse: collapse;
		}

		main.wrap table.tier-table th, 
		main.wrap table.tier-table td {
			padding: 3px 5px;
			text-align: center;
			}

		main.wrap table.tier-table th {
			border-bottom: 1px solid black;
			}

	main.wrap table.left-align {
			margin: 12px auto;
			}

		main.wrap table.left-align th,
		main.wrap table.left-align td {
			padding: 3px 5px;
			text-align: left;
			}

		main.wrap table.left-align th {
			border-bottom: 1px solid black;
			}

		main.wrap table.tier-table tr:nth-child(odd),
		main.wrap table.left-align tr:nth-child(odd),
		main.wrap table.spell-cost-table tr:nth-child(odd) {
			background-color: #ffffff !important;
			}



		main.wrap table.tier-table tr:nth-child(even),
		main.wrap table.left-align tr:nth-child(even),
		main.wrap table.spell-cost-table tr:nth-child(even) {
			background-color: #c1e0e0 !important;
			}

	main.wrap table.spell-cost-table th,
	main.wrap table.spell-cost-table td {
		padding: 3px 8px 3px 5px;
		}

		main.wrap table.spell-cost-table tr td:nth-child(2) {
			text-align: right !important;
			}


@media (max-width: 500px) {
	main.wrap table.tier-table {
		font-size: 90% !important;
		}
}


@media print {
	a, a:link, a:visited, a:hover, a:active {
		text-decoration: none;
		color: #000000 !important;
		font-weight: normal !important;
		}
	
	p, li	{
		text-align: justify;
		font-size: 12pt !important;
		}
	
	.center {
		text-align: center;
		}

	a.printurl[href^="http"]::after {
		content: " (" attr(href) ")";
		overflow-wrap: break-word;
		word-wrap: break-word;
		word-break: break-all;
		font-size: 10pt !important;
		}
		
	main.wrap p.breadcrumbs {
		display: none;
		}

	main.wrap p.next-page-link {
		display: none;
		}

}

div.resource-item {
	padding-bottom: 15px;
	}


div.resource-image {
	width: 100px;
	margin-right: 15px;
	float: left;
	padding: 0px;
	clear: both;
	}

	div.resource-image img {
		max-width: 100px;
		padding: 0px;
		margin: 0px;
		}

		div.resource-image figure {
			margin: 0px;
			padding: 0px;
			}



.right {
	text-align: right !important;
	}

hr {
	clear: both;
	width: 80%;
	border-top: 1px solid #9e4f11;
	border-right: 0px none transparent;
	border-bottom: 0px none transparent;
	border-left: 0px none transparent;
	margin: 15px auto 15px auto;
	}

div.resource-link {
	max-width: 100%;
	}

	div.resource-link p {
		margin-bottom: 15px;
		}

@media screen and (min-width: 500px) {
	div.resource-link div.site-link-image {
		width: 150px;
		max-width: 100%;
		float: left;
		margin: 0px 15px 15px 0px;
		padding: 0px;
		display: inline-block;
		}

		div.resource-link div.site-link-image img {
			max-width: 100%;
			padding: 0px;
			margin: 0px;
			border: 0px none transparent;
			display: block;
			}
}

@media screen and (max-width: 499px) {
	div.resource-link div.site-link-image {
		display: none;
		}

		div.resource-link div.site-link-image img {
			display: none;
			}
}


		div.resource-link div.site-link-body {
			float: left;
			width: calc(100% - 165px);
			}

@media screen and (max-width: 499px) {
			div.resource-link div.site-link-body {
				float: none;
				width: 100%;
				}
}