@font-face
	{
	font-family: 'DWfont';
	src: url('/Fonts/DWfont.eot'); 
	src: 
		local('MagicMedieval'),
		url('/Fonts/DWfont.ttf')
		format('truetype');
	}
	
html
{
	font-size: 22px;
}
	
body
	{
	background-color: #141414;
	color: #eeeeee;
	font-family: Verdana, sans-serif;
	line-height: 150%;
	min-width: 900px;
	margin-bottom: 150px;
	}

h1
	{
	font-family: "DWfont", Verdana, sans-serif;
	font-size: 2.5rem;
	padding: 0;
	margin: 1rem;
	line-height: 125%;
	letter-spacing: 3px;
	font-weight: normal;
	clear: both;
	color: black;
	text-align: center;
	text-shadow: 1px 1px 3px #22553B, -1px -1px 3px #E8B758, 1px 1px 1px white;
	}
	
h1 span
	{
	font-variant: small-caps;
	white-space: nowrap;
	}

h2
	{
	font-family: "DWfont", Verdana, sans-serif;
	font-size: 1.75rem;
	padding: 0;
	margin: 2rem 0;
	line-height: 2rem;
	letter-spacing: 2px;
	font-weight: normal;
	clear: both;
	background: linear-gradient(#141414, #141414, goldenrod, #141414, #141414);
	color: black;
	width: 100%;
	text-align: center;
	text-shadow: 1px 1px 2px palegoldenrod, -1px -1px 1px darkgoldenrod;
	border-radius: 50%;
	}
	
h2 span
{
	background: radial-gradient(white, palegoldenrod, goldenrod, rgba(40,40,40,0.5), rgba(40,40,40,0), rgba(40,40,40,0), rgba(40,40,40,0));
	padding: 1.5rem 5rem;
}

h3
	{
	font-family: "DWfont", Verdana, sans-serif;
	font-size: 1.5rem;
	padding: 0;
	margin: 0;
	line-height: 1.4rem;
	letter-spacing: 1px;
	font-weight: normal;
	clear: both;
	color: black;
	text-shadow: 1px 1px 2px #22553B, -1px -1px 2px #E8B758, 1px 1px 1px white
	}
	
h3.float
{
	float: left;
	transform: rotate(315deg) translate(1rem, -1rem);
	width: 134px;
	height: 134px;
	border-radius: 50%;
	position: relative;
	margin: 0.5rem;
	background: radial-gradient(closest-side at 50% 50%, grey, #141414);
	box-shadow: 0 0 1rem 0 black inset, 0 0 1rem 0 black;
	text-align: center;
	border: 3px solid darkgoldenrod;
}

h3.float div
{
	position: absolute;
	top:50%;
	left:50%;
	transform: translate(-50%, -50%);
}

h3.float+div
{
	margin-left: 165px;
}

main
{
	margin: 0 auto;
	width: 800px;
	position: relative;	
}

footer
{
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	border-top: 1px solid white;
	padding: 10px;
	margin-top: 5px;
	line-height: 80%;
	background-color: #141414;
}

footer p
{
	font-size: 60%;
	white-space: nowrap;
}

a
{
	color: #eeeeee;
	text-decoration: none;
}

a.download
{
	border-left: 4px solid rgb(255,0,0);
	background: linear-gradient(to right, rgba(139,0,0,1), rgba(139,0,0,0));
	margin: 0.5rem 0;
	display: table;
	width: 100%;
}

a.external
{
	border-left: 4px solid rgb(0, 255, 0);
	background: linear-gradient(to right, rgba(0,139,0,1), rgba(0,139,0,0));
	margin: 0.5rem 0;
	display: table;
	width: 100%;
}

a.internal
{
	border-left: 4px solid rgba(0,139,0,1);
	background: linear-gradient(to right, black, rgba(0,70,0,0));
	margin: 0.5rem 0;
	display: table;
	width: 100%;
}

a.glossary:hover
{
	border-bottom: 1px dotted gold;
}

a.glossary
{
	color: goldenrod;
}

a u
{
	border-bottom: 1px dotted gold;
	color: goldenrod;
	text-decoration: none;
}

div.step, div.page, div.character, div.character_prof
{
	padding: 0.5rem;
	line-height: 120%;
	border-radius: 50%;
	display: inline-block;
	text-align: center;
	vertical-align:text-bottom;
	margin: 5px;
}

div.step, div.page
{
	height: 60px;
	width: 60px;
	font-size: 50%;
}

div.character, div.character_prof
{
	height: 50px;
	width: 50px;
	font-size: 50%;
	color: #ffd394;
	background: black;	
}

div.step
{
	background: black;
	color: #eeeeee;
	transition: color 2s, background 2s;
}

div.page
{
	background: #eeeeee;
	color: black;
}

div.character::first-line
{
	font-size: 300%;
	line-height: 70%; 
	color: #ee9999;
}

div.character_prof
{
	position: relative;
}

div.character_prof div
{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 0.6rem;
}

div.step::first-letter, div.page::first-letter
{ 
    font-size: 200%;
}

div.step:hover
{
	background: #eeeeee;
	color: black;
	transition: color 3s, background 3s;
}

div.equipment, div.skills
{
	font-size: 60%;
	padding: 0.5rem;
	line-height: 130%;
	border-radius: 1rem;
	display: inline-block;
	text-align: left;
	vertical-align:top;
	margin: 5px;
	color: #ee9999;
	background: black;
}

div.equipment
{
	padding-left: 115px;
	width: calc(100% - (115px + 1rem + 2px + 64px + 2rem));
}

div.skills
{
	padding-left: 78px;
	width: calc(100% - (78px + 1rem + 2px + 64px + 2rem));
}

div.equipment span, div.skills span
{
	color: #ffd394;
	font-size: 130%;
}

div.equipment span
{
	margin-left: -95px;
}

div.skills span
{
	margin-left: -58px;
}

div.note
{
	border-left: 4px solid rgb(0, 0, 255);
	background: linear-gradient(to right, rgba(0,0,139,1), rgba(0,0,139,0));
	margin: 0.5rem 0;
	display: table;
	width: 100%;
}

div.list
{
	display: table;
	width: 100%;
	margin: 0.5rem 0;
	border-left: 4px solid rgb(96, 45, 185);
	background: linear-gradient(to right, rgba(128, 0, 128, 1), rgba(128, 0, 128, 0)); 
}

div.highlight_list
{
	display: table;
	width: 100%;
	margin: 0.5rem 0;
	border-left: 4px solid rgb(210,105,30);
	background: linear-gradient(to right, rgba(165,42,42,1), rgba(165,42,42,0));
}

div.progress
{
	max-width: 620px;
	text-align: center;
	border: 2px solid grey;
	border-radius: 1rem;
	background: radial-gradient(closest-side at 50% 50%, grey, #141414);
	padding: 0.5rem;
	margin: 0.5rem auto;
	box-shadow: 0 0 1rem 0 grey inset;
}

p.formula
{
	text-align: center;
	font-size: 0.8rem;
	background: black;
	border: 2px solid gold;
	border-radius: 1rem;
	box-shadow: 0 0 1rem gold inset;
	width: 80%;
	margin: 0 auto;
}

p.formula span
{
	color: red;
}

ul
{
	list-style: none;
}

ul li
{
	padding-left: 45px;
	min-height: 45px;
	height: 45px;
	background-image: url('/Images/bullet3.png');
	background-repeat: no-repeat;
	background-position: left center;
	display: table-cell;
	align-items: center;
	font-size: 0.7rem;
	line-height: 130%;
	vertical-align: middle;
}

li span
{
	font-weight: bold;
}

div.profession
{
	height: 350px;
	width: 175px;
	margin: 0.25rem;
	border: 3px inset goldenrod;
	box-shadow: 0 0 1rem 0 black inset, 0 0 1rem 0 black;
	display: inline-block;
	vertical-align: top;
}

div.profession > div
{
	height: 340px;
	width: 165px;
	background: #000;
	opacity: 0;
	transition: opacity 1s;
	padding: 5px;
	position: relative;
	font-size: 0.65rem;
	line-height: 130%;
}

div.profession > div:hover, div.profession > div:focus
{
	transition: opacity 2s;
	opacity: 0.75;
}

div.profession#barbarian
{
	background-image:url("/Images/barbarian.jpg");
	background-repeat: no-repeat;
	background-size: cover;
}

div.profession#knight
{
	background-image:url("/Images/knight.png");
	background-repeat: no-repeat;
	background-size: cover;
}

div.profession#mystic
{
	background-image:url("/Images/mystic.jpg");
	background-repeat: no-repeat;
	background-size: cover;
}

div.profession#sorcerer
{
	background-image:url("/Images/sorcerer.jpg");
	background-repeat: no-repeat;
	background-size: cover;
}
	
div.divider
{
	margin: 1.5rem 3rem; 
	background: linear-gradient(#141414, #141414, goldenrod, #141414, #141414);
	clear: both;
	border-radius: 50%;
}

div.divider.last
{
	margin-bottom: 0;
}

div.primary
	{
	border: 4px inset darkgrey;
	color: #202020;
	font-size: 0.7rem;
	line-height: 175%;
	width: 12ch;
	text-align: center;
	padding: 5px;
	margin: 10px;
	display: inline-block;
	border-radius: 0 0 100% 100%;
	background: linear-gradient(135deg, #b5bdc8 0%,#828c95 36%,#28343b 100%);
	position: relative;
	height: 140px;
	text-shadow: 0 1px 1px white;
	vertical-align: top;
	}
	
div.primary > div.score
	{
	background: linear-gradient(315deg,  rgba(80,80,80,1) 0%,rgba(235,235,235,1) 50%, rgba(180,180,180,1) 100%);
	border: 4px inset darkgrey;
	font-size: 1.4rem;
	padding: 1.2rem 0;
	border-radius: 50%;
	color: grey;
	width: 3.6rem;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -35%);
	text-shadow: 0px 1px 1px white, -1px 0px 1px white;
	}

/* Bottom Navigation Panel (forward and back arrows) */

nav
{
	position: relative;
	height: 3ch;
}

nav a
{
	margin: 1rem 0.1rem;
	background: linear-gradient(#141414, goldenrod, #141414);
	display: inline-block;
	color: black;
	text-shadow: 1px 1px 2px palegoldenrod, -1px -1px 1px darkgoldenrod;
	text-decoration: none;
	outline: none;
	white-space: no-wrap;
}

nav a.left
{
	position: absolute;
	left: 0;
	border-radius: 50% 25% 25% 50%;
	padding: 0.5ch 0.5ch 0.5ch 5ch;
}

nav a.right
{
	position: absolute;
	right: 0;
	border-radius: 25% 50% 50% 25%;
	padding: 0.5ch 5ch 0.5ch 0.5ch;
	}

nav a.middle
{
	position: absolute;
	left: 50%;
	transform: translate(-50%, 0);
	border-radius: 25%;
	padding: 0.5ch;
}

/* Left-side Example Panels */

div.example /* Example heading */
{
	position: absolute;
	transform:rotate(270deg) translate(-50%, 125%);
	font-size: 1.25rem;
	right: 0;
	top: 0;
	outline: none;
}

div.example_outer /* Outer panel */
{
	position: fixed;
	top: 50%;
	transform: translate(-735px, -50%);
	transition: 2s;
	width: 700px;
	border: 2px solid grey;
	border-radius: 1rem;
	box-shadow: 0 0 1rem 0 grey inset, 0 0 1rem black;
	padding: 0.5rem;
	background: #333333;
	z-index: 1;
	min-height: 14ch;
	outline: none;
}

@media screen and (min-width: 900px)
{
	div.example_outer
	{
	transform:translate(calc(-690px - ((100vw - 820px)/2)), -50%);
	}
}
			
div.example_outer:focus
{
	transform: translate(0, -50%);
}

div.example_inner /* Example text */
{
	margin-right: 2rem;
	margin-top: -1.75rem;
	font-size: 80%;
	line-height: 150%;
	padding: 1rem;
	padding-top: 1.75rem;
	outline: none;
	opacity: 0;
	text-align: left;
}

div.example_outer:focus div.example_inner
{
	opacity: 1;
}

/* TABLES */

table
{
	font-size:0.7rem;
	line-height: 125%;
	border-collapse: collapse;
	margin: 1rem auto;
}

thead
{
	color: #ee9999;
	background: black;
	border-bottom: 3px solid gold;
}

th, td
{
	padding: 10px 5px;
}
			
tbody tr:nth-child(even) {background-color: #383838}

tbody
{
	border-bottom: 3px solid gold;
}