@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,400i,600,600i,700,700i');

html {
  box-sizing: border-box;
	font-family: 'Open Sans', sans-serif;
	font-size: 16px;
	font-weight: 400;
	height: 100%;
}

body {
	background: #f8f8f8;
	color: #333;
	margin: 0;
  padding: 1em;
	height: 100%;
}

* {
  box-sizing: inherit;
}

h1 {
	font-size: 1.5em;
	margin: 0.5em 0;
}

a { color: #0068D1; text-decoration: none; }
a:hover { text-decoration: underline; }


/*---------------------------------------
TABLE STYLES
---------------------------------------*/
.guide-table {
	border-collapse: collapse;
}

.guide-table thead {
	background: #246bb2;
	border-bottom: 2px solid #eee;
	color: #fff;
	font-weight: 600;
}

.guide-table th,
.guide-table td {
	padding: 0.5em 0.75em;
	text-align: left;
}

.guide-table tbody tr {
	border-bottom: thin solid #ccc;
	transition: background 0.2s ease-out; }
.guide-table tbody tr:hover,
.guide-table tbody tr:nth-of-type(even):hover {
	background-color: #dfefff;
}

.guide-table tbody tr:last-of-type {
	border-bottom: none;
}

.guide-table tbody tr:nth-of-type(even) {
	background: #fff;
}

.guide-table td {
	position: relative;
}

/*---------------------------------------
POPUP STYLES
---------------------------------------*/
.guide-popup {
	background: #fff;
	border: thin solid #aaa;
	border-radius: 0.25em;
	box-shadow: 0 0em 0.25em rgba(0,0,0,0.5);
	left: 100%;
	margin-left: 0.25em;
	opacity: 0;
	padding: 1em 1.5em;
	pointer-events: none;
	position: absolute;
	top: -1em;
	width: 25em;
	z-index: 1; }
.guide-table tbody tr:hover .guide-popup {
	opacity: 1;
	transition: opacity 0.2s 0.7s ease-out; }
.guide-popup.guide-popup-vertical {
	top: calc(100% + 1em);
	transform: translateX(calc(-100% - 2em)); }
.guide-popup.guide-popup-inverted {
	bottom: calc(100% + 1em);
	top: initial;
	transform: translateX(calc(-100% - 2em)); }

.guide-popup::before {
	background: #fff;
	border: thin solid;
	border-color: #aaa transparent transparent #aaa;
	content: '';
	display: block;
	height: 1em;
	left: -0.55em;
	position: absolute;
	top: 1.5em;
	transform: rotate(-45deg);
	width: 1em; }
.guide-popup.guide-popup-vertical::before {
	left: 50%;
	top: -0.2em;
	transform: rotate(45deg) translate(-75%, 25%); }
.guide-popup.guide-popup-inverted::before {
	bottom: -0.2em;
	left: 50%;
	top: initial;
	transform: rotate(-135deg) translate(25%,-75%); }

.guide-popup h2 {
	font-size: 1em;
	font-weight: 700;
	margin: 0 0 0.5em 0;
}

.guide-popup p {
	margin: 0;
}

.guide-popup ul {
	margin: 0;
	padding-left: 2em;
}