/*Typography*/
html {
	font-family: 'Titillium Web', sans-serif;
}
body {
	color: #232d33;
}
h1, h2, h3 {
	font-weight: 700;
	text-transform: uppercase;
}
h1 {
	font-size: 4em;
	text-align: center;
	text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
	h1.display {
		font-size: 5em;
		font-weight: 100;
		text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
	}
h1 {
	font-size: 4em;
	text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
h2 {
	font-size: 3em;
}
h3 {
	font-size: 2.2em;
	
}
h4 {
	font-size: 1.4em;
	font-weight: normal;
}
h5 {
	font-size: 1.2em;
	font-weight: normal;
}
h6 {
	font-size: 1em;
}
@media handheld, only screen and (max-width: 30em) {
	h1, h1.display {
		font-size: 3.5em;
	}
	h2 {
		font-size: 2.8em;
	}
	h3 {
		font-size: 1.8em;
	}
}



/*Generic*/
pre {
	background-color: #f6f6f6;
	color: inherit;
}
code, pre code {
	font-size: 0.8em;
	color: #e01b6a;
}
a, a:visited {
	color: #00b5d9;
}
a {
	-webkit-transition-duration: 100ms;
	-moz-transition-duration: 100ms;
	-o-transition-duration: 100ms;
	transition-duration: 100ms;
	-webkit-transition-property: line-height, background, color, border-color, border, top, margin, padding;
	-moz-transition-property: line-height, background, color, border-color, border, top, margin, padding;
	-o-transition-property: line-height, background, color, border-color, border, top, margin, padding;
	transition-property: line-height, background, color, border-color, border, top, margin, padding;
}
.row {
	background-repeat: no-repeat;
	background-position: 50% -1px;
}
.invisible {
	width: 0;
	height: 0;
	overflow: hidden;
}



/*Dark sections*/
.dark {
	background-color: #003a00;
	color: #fff;
	font-weight: 300;
}
.dark a {
	text-decoration: none;
	color: #009a00;
}
	.dark a:hover, .dark a:focus {
		color: #00b900;
	}
		.dark a:active {
			color: #00c000;
		}
.dark ::selection {
	background-color: #00ba00;
	color: #fff;
}
.dark ::-moz-selection {
	background-color: #00ba00;
	color: #fff;
}



/*Master title*/
h1.pageTitle {
	line-height: 1em;
}
	h1.pageTitle a, h1.pageTitle a:hover, h1.pageTitle a:focus {
		color: inherit;
	}
	h1.pageTitle a small {
		font-size: 1em;
		color: #737b80;
	}



/*Intro*/
.row-intro h1.pageTitle {
	font-size: 6em;
}
	.row-intro h1.pageTitle a {
		-webkit-transition-duration: 0ms;
		-moz-transition-duration: 0ms;
		-o-transition-duration: 0ms;
		transition-duration: 0ms;
	}
	@media handheld, only screen and (max-width: 60em) {
		.row-intro h1.pageTitle {
			font-size: 5em;
		}
	}
	@media handheld, only screen and (max-width: 40em) {
		.row-intro h1.pageTitle {
			font-size: 4em;
		}
	}
	@media handheld, only screen and (max-width: 28em) {
		.row-intro h1.pageTitle {
			font-size: 3.4em;
		}
	}
.row-intro {
	line-height: 1.5;
}
.row-intro .discreet, .row-intro dd {
	color: #737b80;
}
	.row-intro .discreet a {
		color: inherit;
		text-decoration: underline;
	}
		.row-intro .discreet a:hover, .row-intro .discreet a:focus {
			color: #fff;
		}

/*Download link*/
.row-intro h2 {
	min-height: 3em;
	padding-bottom: 1.6em;
	border-bottom-width: 1px;
	border-color: #2e3133;
	font-size: 1em;
	color: #737b80;
	font-weight: 300;
	text-transform: none;
}
.row-intro h2 a {
	position: relative;
	display: inline-block;
	padding: 0.4em 1.4em 0.4em 1.4em;
	min-width: 6em;
	text-align: center;
	margin-right: 0.8em;

	line-height: 2em;
	font-size: 1em;
	text-transform: uppercase;

	background-color: #009ebf;
	border-color: #12171a;
	color: #fff;
}
	.row-intro h2 a:hover, .row-intro h2 a:focus {
		top: -0.2em;
		border-bottom-width: 0.2em;
		text-decoration: none;
		background-color: #00b3d9;
		color: #fff;
	}
		.row-intro h2 a:active {
			top: 0;
			border-bottom-width: 0;
			color: #fff;
		}

/*Goodies*/
.row-intro dt {
	font-weight: inherit;
	margin-top: 1.2em;
}
.row-intro dt a {
	display: inline-block;
	padding: 0.2em;
	margin-left: -0.2em;
}
	.row-intro dt a:hover, .row-intro dt a:focus {
		padding-top: 0.05em;
		padding-bottom: 0.35em;
		text-decoration: none;
	}
		.row-intro dt a:active {
			padding-top: 0.2em;
			padding-bottom: 0.2em;
		}
.row-intro dt.discreet {
	float: left;
	clear: none;
	margin-right: 2em;
}
.row-intro dt.discreet a {
	text-decoration: none;
}

/*Highlight download*/
.highlightDownload dt a {
	color: #737b80;
}
.highlightDownload h2 {
	color: #fff;
}



/*Title row*/
.row-title {
	background-color: #5a0000;
	color: #fff;
	font-weight: 300;
	text-align: center;
	background-position: center;
	background-repeat: no-repeat;
    background-size: cover;
	min-height: 100%;
    position:relative;
}
.row-title .description {
	margin-top: 3.8em;
	margin-bottom: 4em;
	color: ##ddeeff;
}



/*Menu*/
#menu {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	text-align: center;
	z-index: 1000;
	background-color: #5a0000;
}
#menu.fixed {
	position: fixed;
	top: 0;
	left: 0;
}
#menu li {
	display: inline-block;
}
#menu a {
	display: inline-block;
	position: relative;
	padding: 0.4em 1.2em 0.5em 1.2em;
	border-color: #5a0000;
	text-transform: uppercase;
	color: #fff;
	text-decoration: none;
	border-top-width: 0.5em;
	border-bottom-width: 0.5em;
}
	@media handheld, only screen and (max-width: 55em) {
		#menu a {
			padding-right: 1em;
			padding-left: 1em;
		}
	}
	@media handheld, only screen and (max-width: 40em) {
		#menu a {
			font-size: 1.1em;
			padding-right: 0.8em;
			padding-left: 0.8em;
		}
	}
	@media handheld, only screen and (max-width: 30em) {
		#menu a {
			font-size: 0.85em;
			padding-right: 0.8em;
			padding-left: 0.8em;
		}
	}
	@media handheld, only screen and (max-width: 25em) {
		#menu a {
			padding-right: 0.55em;
			padding-left: 0.55em;
		}
	}
	#menu a.selected {
		background-color: #ba0000;
	}
	#menu a:hover, #menu a:focus {
		top: -0.2em;
	}
		#menu a:active {
			top: 0.15em;
			border-bottom-width: 0.35em;
		}
		#menu a:hover:active, #menu a.selected:hover, #menu a.selected:focus {
			top: 0;
			border-bottom-width: 0.5em;
		}
		#menu a.selected:hover {
			background-color: #bb0000;
		}

.aboutme {
	font-size: 32px;
	text-align: center;
	float: center;
}

.aboutme a {
	color: #737b80;
	text-decoration: none;
}

.oddsends {
	font-size: 20px;
	text-align: center;
	float: center;
}

/*All reference sections*/
.reference > .row {
	border-top-width: 1em;
	border-color: #5a0000;
	background-image: url(images/down-red.png);
}

.reference h3 {
	margin-top: 2.68em;
}
.reference .description {
	max-width: 46em;
}
.reference .description.center {
	text-align: center;
}
.reference .column {
	background-color: #fff;
}
	.reference .colored {
		background-color: #ddd;
	}



/*Source*/

/*Trigger style*/
.source {
	margin-top: 1.34em;
}
.source .trigger {
	overflow-y: hidden;
	position: relative;
	display: block;
	padding: 0 5%;
	text-align: center;

	text-transform: uppercase;
	text-decoration: none;
	font-size: 0.8em;

	border-width: 1px;
	border-color: #00b5d9;
	background-color: #00b5d9;
	color: #fff;

	letter-spacing: 0.2em;
	word-spacing: 0.4em;

	-webkit-transition-duration: 200ms;
	-moz-transition-duration: 200ms;
	-o-transition-duration: 200ms;
	transition-duration: 200ms;
}
	.source .trigger:hover {
		border-color: #0099bf;
		background-color: #0099bf;
	}
	.source .trigger:active {
		position: relative;
		top: 0.2em;
	}
	.source.collapsed .trigger {
		border-color: #f6f6f6;
		background-color: #f6f6f6;
		color: #00b5d9;
	}
	.source.collapsed .trigger:hover {
		border-color: #00b5d9;
	}

/*Choose trigger content*/
.source .trigger {
	height: 2.6em;
}
.source .trigger .hide, .source .trigger .show {
	position: absolute;
	display: block;
	width: 100%;
	text-align: center;
	left: 0;
	height: 2.6em;
	line-height: 2.7em;
	-webkit-transition-duration: 250ms;
	-moz-transition-duration: 250ms;
	-o-transition-duration: 250ms;
	transition-duration: 250ms;
	-webkit-transition-property: top;
	-moz-transition-property: top;
	-o-transition-property: top;
	transition-property: top;
    -webkit-transition-timing-function: ease-in-out;
    -moz-transition-timing-function: ease-in-out;
    -o-transition-timing-function: ease-in-out;
    transition-timing-function: ease-in-out;
}
.source .trigger .hide, .source.collapsed .trigger .show {
	top: 0;
}
	.source .trigger .show {
		top: 10em;
	}
	.source.collapsed .trigger .hide {
		top: -10em;
	}

/*Code area*/
.sourceContent {
	border-color: #00b5d9;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	overflow: auto;
	max-height: 24em;
	-webkit-transition-duration: 250ms;
	-moz-transition-duration: 250ms;
	-o-transition-duration: 250ms;
	transition-duration: 250ms;
	-webkit-transition-property: padding, border-width, max-height, box-shadow;
	-moz-transition-property: padding, border-width, max-height, box-shadow;
	-o-transition-property: padding, border-width, max-height, box-shadow;
	transition-property: padding, border-width, max-height, box-shadow;
    -webkit-transition-timing-function: ease-in-out;
    -moz-transition-timing-function: ease-in-out;
    -o-transition-timing-function: ease-in-out;
    transition-timing-function: ease-in-out;

}
	.collapsed .sourceContent {
		overflow-y: hidden;
		max-height: 0;
		padding-top: 0;
		padding-bottom: 0;
		border-top-width: 0;
		border-bottom-width: 0;
		border-color: transparent;
	}


/*Grid*/
.row-grid .column p {
	text-align: center;
	margin-top: 0;
	margin-bottom: 0;
	padding-top: 0.8em;
	padding-bottom: 1em;
	line-height: 1em;
}



/*Lists*/
.row-lists .column {
	background-color: transparent;
}
.row-lists ul, .row-lists ol, .row-lists dl {
	background-color: #eee;
}

.row-content h2 {
	min-height: 3em;
	padding-bottom: 1.6em;
	border-bottom-width: 1px;
	border-color: #fff;
	font-size: 1em;
	color: #FF0000;
	font-weight: 300;
	text-transform: none;
}
.row-content h2 a {
	position: relative;
	display: inline-block;
	padding: 0.4em 1.4em 0.4em 1.4em;
	min-width: 6em;
	text-align: center;
	margin-right: 0.8em;

	line-height: 2em;
	font-size: 1em;
	text-transform: uppercase;

	background-color: #009e00;
	border-color: #fff;
	color: #fff;
}
	.row-content h2 a:hover, .row-content h2 a:focus {
		top: -0.2em;
		border-bottom-width: 0.2em;
		text-decoration: none;
		background-color: #00b900;
		color: #fff;
	}
		.row-content h2 a:active {
			top: 0;
			border-bottom-width: 0;
			color: #fff;
		}



/*Tables*/
.row-tables .gravity td {
	width: 29.3%;
	height: 4em;
	padding: 2%;
	border-color: #d5dbde;
	background-image: url(images/gravity.png);
	background-repeat: no-repeat;
	background-position: -10px -10px;
}
	.row-tables .gravity .center {
		background-position: 50% -13px;
	}
	.row-tables .gravity .right {
		background-image: url(images/gravity-ne.png);
		background-position: 100% 0;
	}
	.row-tables .gravity .middle, .row-tables .gravity .vertical-center {
		background-position: -13px 50%;
	}
	.row-tables .gravity .middle.center, .row-tables .gravity .vertical-center.center {
		background-image: none;
	}
	.row-tables .gravity .middle.right, .row-tables .gravity .vertical-center.right {
		background-image: url(images/gravity-e.png);
		background-position: 100% 50%;
	}
	.row-tables .gravity .bottom {
		background-image: url(images/gravity-sw.png);
		background-position: 0 100%;
	}
	.row-tables .gravity .bottom.center {
		background-image: url(images/gravity-s.png);
		background-position: 50% 100%;
	}
	.row-tables .gravity .bottom.right {
		background-image: url(images/gravity-se.png);
		background-position: 100% 100%;
	}



/*Forms*/
.row-forms input.plain, .row-forms textarea.plain {
	background-color: #ddd;
}



/*Demo*/
.reference > .doesntload {
	background-image: url(images/dota.jpg);
	background-position: 50% 50%;
	background-repeat: repeat;
	background-size: cover;

	-webkit-box-shadow: inset 0 0.5em 7em rgba(18, 23, 26, 0.6);
	-moz-box-shadow: inset 0 0.5em 7em rgba(18, 23, 26, 0.6);
	box-shadow: inset 0 0.5em 7em rgba(18, 23, 26, 0.6);
}
.row-samples .row-content {
	background-position: 50% -1px;
	background-image: url(images/down-red.png);
	background-repeat: no-repeat;
}
	@media handheld, only screen and (max-width: 60em) {
		.row-samples .row-content.buffer.even {
			padding-top: 10%;
			padding-bottom: 8%;
		}
	}
	@media handheld, only screen and (max-width: 40em) {
		.row-samples .row-content.buffer.even {
			padding-top: 16%;
			padding-bottom: 10%;
		}
	}
.background-clip {
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: 50% 100%;
	overflow-x: hidden;
}
	.background-clip .left, .background-clip .right {
		height: 42px;
		width: 50%;
		position: relative;
		float: left;
		clear: none;
	}
	.background-clip .left {
		left: -42px;
	}
	.background-clip .right {
		left: 42px;
	}
.row-samples .background-clip {
	background-image: url(images/down-dark-inverted.png);
}
	.row-samples .background-clip .left, .row-samples .background-clip .right {
		background-color: #12171a;
	}
.row-samples .footnote {
	text-align: center;
	text-shadow: 0 0.1em 0.4em #000;
}
	.row-samples .footnote code {
		display: inline-block;
		padding: 0.15em 0.3em 0.1em 0.3em;
		margin-right: 0.2em;
		margin-left: 0.3em;
		background-color: #fff;
		text-shadow: none;

		-webkit-border-radius: 0.25em;
		-moz-border-radius: 0.25em;
		border-radius: 0.25em;

		-webkit-box-shadow: 0 0.1em 0.3em #000;
		-moz-box-shadow: 0 0.1em 0.3em #000;
		box-shadow: 0 0.1em 0.3em #000;
	}

/*Browser window*/
.browser {
	border-width: 1px;
	border-color: rgba(18, 23, 26, 0.6);

	-webkit-box-shadow: 0 0.4em 2em 0.1em #12171a;
	-moz-box-shadow: 0 0.4em 2em 0.1em #12171a;
	box-shadow: 0 0.4em 2em 0.1em #12171a;
}
.trigger {
	display: none;
}

	/*Rounded corners*/
	.browser, .browser .titlebar {
		-webkit-border-top-left-radius: 0.25em;
		-webkit-border-top-right-radius: 0.25em;
		-moz-border-radius-topleft: 0.25em;
		-moz-border-radius-topright: 0.25em;
		border-top-left-radius: 0.25em;
		border-top-right-radius: 0.25em;
	}
	.browser, .browser .content, .browser, .browser iframe {
		-webkit-border-bottom-left-radius: 0.25em;
		-webkit-border-bottom-right-radius: 0.25em;
		-moz-border-radius-bottomleft: 0.25em;
		-moz-border-radius-bottomright: 0.25em;
		border-bottom-left-radius: 0.25em;
		border-bottom-right-radius: 0.25em;
	}

	/*Unloaded state*/
	.browser.unloaded {
		border-color: transparent;
		background-color: rgba(18, 23, 26, 0.97);
	}
	.browser.unloaded .content {
		background-color: transparent;
	}
	.browser.unloaded .content iframe {
		display: none;
	}
	.browser.unloaded .trigger {
		display: block;
		height: 100%;
		width: 100%;
		padding-top: 7.8em;
		padding-right: 5%;
		padding-left: 5%;
		text-align: center;

		color: #393d40;
		font-size: 1.8em;
		letter-spacing: 0.2em;
		text-transform: uppercase;
		font-weight: 200;
		line-height: 1.8;
	}
		.browser .trigger .limit {
			display: inline-block;
			max-width: 16em;
		}
		.browser.unloaded .trigger:hover {
			color: #737b80;
		}
		@media handheld, only screen and (max-height: 50em) {
			.browser.unloaded .trigger {
				padding-top: 6em;
			}
		}
		@media handheld, only screen and (max-height: 40em) {
			.browser.unloaded .trigger {
				padding-top: 3.6em;
			}
		}
		@media handheld, only screen and (max-height: 30em) {
			.browser.unloaded .trigger {
				padding-top: 2.4em;
			}
		}



	/*Title bar*/
	.browser .titlebar {
		background-color: #d3d3d3;

		background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#e7e7e7), to(#c0c0c0));
		background-image: -webkit-linear-gradient(#e7e7e7, #c0c0c0);
		background-image: -moz-linear-gradient(#e7e7e7, #c0c0c0);
		background-image: -o-linear-gradient(#e7e7e7, #c0c0c0);
		background-image: linear-gradient(#e7e7e7, #c0c0c0);

		-webkit-box-shadow: inset 0 0.1em 0.1em #f3f3f3;
		-moz-box-shadow: inset 0 0.1em 0.1em #f3f3f3;
		box-shadow: inset 0 0.1em 0.1em #f3f3f3;
	}
	.browser .titlebar td {
		border-width: 0;
	}
	.browser .windowcontrols, .browser .titlebar .title, .browser .extracontrols {
		height: 1em;
		overflow: hidden;
		vertical-align: middle;
	}

		/*Window controls*/
		.browser .windowcontrols {
			width: 2.5em;
			padding: 0.4em 0 0.4em 0.8em;
		}
		.browser .windowcontrols li {
			width: 0;
			height: 0;
			margin-right: 0.25em;
			padding: 0.25em;
			overflow: hidden;
			border-radius: 99em;
			border-width: 1px;

			background-color: rgb(0, 0, 0);
			background-color: rgba(0, 0, 0, 0.15);
			border-color: rgb(0, 0, 0);
			border-color: rgba(0, 0, 0, 0.2);

			-webkit-box-shadow: 0 1px 1px 1px rgba(255, 255, 255, 0.2);
			-moz-box-shadow: 0 1px 1px 1px rgba(255, 255, 255, 0.2);
			box-shadow: 0 1px 1px 1px rgba(255, 255, 255, 0.2);
		}
			.browser .windowcontrols li:hover {
				background-color: rgba(0, 0, 0, 0.25);
			}

		/*Window title*/
		.browser .titlebar .title {
			text-align: center;
			font-size: 0.9em;
			font-weight: normal;
			text-transform: none;
			color: #555;
			text-shadow: 0 1px 1px rgba(255, 255, 255, 0.6);
		}

		/*Extra controls*/
		.browser .extracontrols {
			width: 2.5em;
		}
			.browser .extracontrols a {
				background-position: 50% 50%;
				background-repeat: no-repeat;
				width: 1.8em;
				height: 1.8em;
				opacity: 0.8;
			}
			.browser .extracontrols a:hover {
				opacity: 1;
			}
			.browser .extracontrols .open a {
				background-image: url(images/external.png);
			}
				.browser.unloaded .extracontrols .open {
					display: none;
				}



	/*Tabs*/
	.browser .tabbar {
		position: relative;
		z-index: 10;
		background-color: #999;
		font-size: 0.8em;
		color: #444;
		text-shadow: 0 1px 1px rgba(255, 255, 255, 0.4);

		-webkit-box-shadow: 0 0.2em 0.6em rgba(0, 0, 0, 0.3);
		-moz-box-shadow: 0 0.2em 0.6em rgba(0, 0, 0, 0.3);
		box-shadow: 0 0.2em 0.6em rgba(0, 0, 0, 0.3);
	}
		.browser .tabbar li {
			text-align: center;
			position: relative;
			width: 33%;
			float: left;
			clear: none;
		}
		.browser .tabbar li.first {
			width: 34%;
		}
		.browser .tabbar li.selected {
			z-index: 10;
		}
		.browser .tabbar a {
			display: block;
			width: 100%;
			padding-top: 0.5em;
			padding-bottom: 0.4em;
			color: inherit;
			font-weight: 700;

			border-color: #555;
			border-top-width: 1px;

			-webkit-box-shadow: inset 0 0.3em 0.2em rgba(0, 0, 0, 0.15);
			-moz-box-shadow: inset 0 0.3em 0.2em rgba(0, 0, 0, 0.15);
			box-shadow: inset 0 0.3em 0.2em rgba(0, 0, 0, 0.15);

			-webkit-transition-duration: 25ms;
			-moz-transition-duration: 25ms;
			-o-transition-duration: 25ms;
			transition-duration: 25ms;

			-webkit-border-bottom-left-radius: 0.4em;
			-webkit-border-bottom-right-radius: 0.4em;
			-moz-border-radius-bottomleft: 0.4em;
			-moz-border-radius-bottomright: 0.4em;
			border-bottom-left-radius: 0.4em;
			border-bottom-right-radius: 0.4em;

		}
			.browser .tabbar a:hover {
				background-color: #a0a0a0;
			}
			.browser .tabbar .selected a {
				border-top-color: #888;
				border-right-width: 1px;
				border-bottom-width: 1px;
				border-left-width: 1px;

				background-color: #b0b0b0;
				color: #222;

				-webkit-box-shadow: inset 0 0.3em 0.2em rgba(0, 0, 0, 0.05);
				-moz-box-shadow: inset 0 0.3em 0.2em rgba(0, 0, 0, 0.05);
				box-shadow: inset 0 0.3em 0.2em rgba(0, 0, 0, 0.05);
			}
				.browser .tabbar .first.selected a {
					border-left-width: 0;
				}
				.browser .tabbar .last.selected a {
					border-right-width: 0;
				}
				.browser .tabbar .selected a:hover {
					background-color: #bbb;
				}



	/*Content*/
	.browser .content {
		background-color: #fff;
		overflow: hidden;
	}
	.browser .content, .browser .content iframe {
		height: 40em;
	}
	@media handheld, only screen and (max-height: 50em) {
		.browser .content, .browser .content iframe {
			height: 30em;
		}
	}
	@media handheld, only screen and (max-height: 40em) {
		.browser .content, .browser .content iframe {
			height: 20em;
		}
	}
	@media handheld, only screen and (max-height: 30em) {
		.browser .content, .browser .content iframe {
			height: 15em;
		}
	}



/*Footer*/
.row-footer h1.pageTitle {
	font-size: 3.5em;
}
.row-footer h1, .row-footer p, .row-footer h1 a, .row-footer h1 img {
	margin-right: auto;
	margin-left: auto;
}
.row-footer h1 img {
	max-height: 0.5em;
}

/*Image & description*/
.row-footer .row-content {
	max-width: 34em;
}
.row-footer .column img {
	border-radius: 0.2em;

	-webkit-box-shadow: 0 0.1em 0.4em #000;
	-moz-box-shadow: 0 0.1em 0.4em #000;
	box-shadow: 0 0.1em 0.4em #000;
}
.row-footer .column.fixed {
	width: 3.8em;
}
.row-footer .column.fluid.right > .column-content {
	margin-left: 5em;
}
.row-footer .column.fluid {
	margin-bottom: 4em;
}

/* Tooltips for details */
.tooltip {
    position: relative;
    display: inline-block;
}

/* Tooltip text */
.tooltip .tooltiptext {
    visibility: hidden;
    width: 60%;
    box-shadow: inset 0 0 0 1000px rgba(90,0,0,.8);
    color: #fff;
    text-align: justify;
    padding: 10px;
	margin: auto;
    border-radius: 6px;
	opacity: 0;
    transition: opacity 1s;
 
    /* Position the tooltip text - see examples below! */
    position: absolute;
	margin-left: auto;
	margin-right: auto;
	left: 0px;
	right: 0px;
    z-index: 1;
	top: 10px; 
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
    visibility: visible;
	opacity: 1;
}

.tooldes {
	overflow-y: scroll; 
	height:150px;
	font-size: 0.8em;
	color: #FFFFFF;
	text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
	text-align: justify;
}

.year {
	text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
	color: #5a0000;"
}