html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

/* force scrollbars */
html { overflow-y: scroll; }

/* Hand cursor on clickable input elements */
label, input[type="button"], input[type="submit"], input[type="image"], button { cursor: pointer; }


*
{
	box-decoration-break:	clone;
	-webkit-box-sizing:		border-box;
	-moz-box-sizing:		border-box;
	box-sizing:				border-box;
}

.cent
{
	margin-left:	auto;
	margin-right:	auto;
}

.clr
{
	clear:			both;
}

.clear:after
{
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}

.ilb
{
	display:		inline-block;
}

.mw500
{
	max-width:		500px;
}

.w50
{
	width:			50%;
}

.tcent
{
	text-align:		center;
}
.tleft
{
	text-align:		left;
}
.tright
{
	text-align:		right;
}
.fleft
{
	float:			left;
}
.fright
{
	float:			right;
}

td,
th
{
	vertical-align:	top;
}

*, *:before, *:after
{
	-moz-box-sizing:	border-box;
	-webkit-box-sizing:	border-box;
	box-sizing:			border-box;
}




/* main title */
@font-face {
	font-family: 'Parisienne';
	font-style: normal;
	font-weight: 400;
	src: local('Parisienne'), local('Parisienne-Regular'), url(https://johann-lau.de/things/archived/eigenmode/pub/fonts/Parisienne.ttf) format('truetype');
}

/* content title */
@font-face {
	font-family: 'Cherry Swash';
	font-style: normal;
	font-weight: 400;
	src: local('Cherry Swash'), local('CherrySwash-Regular'), url(https://johann-lau.de/things/archived/eigenmode/pub/fonts/Cherry_Swash.ttf) format('truetype');
}

/* content */

@font-face {
	font-family: 'Brawler';
	font-style: normal;
	font-weight: 400;
	src: local('Brawler'), url(https://johann-lau.de/things/archived/eigenmode/pub/fonts/Brawler.ttf) format('truetype');
}

html
{
	height:				100%;
}

body
{
	font-size:				62.5%;
	padding:				0px 0px 20px 0px;
	margin:					0px;
	background:				#301116;
	background:				-webkit-linear-gradient(top, 
		hsl(350,30%,30%) 0%,
		hsl(350,50%,15%) 20%,
		hsl(350,40%,10%) 100%
		), hsl(350,40%,10%);
	background:				-moz-linear-gradient(top, 
		hsl(350,30%,30%) 0%,
		hsl(350,50%,15%) 20%,
		hsl(350,40%,10%) 100%
		), hsl(350,40%,10%);
	background:				-ms-linear-gradient(top, 
		hsl(350,30%,30%) 0%,
		hsl(350,50%,15%) 20%,
		hsl(350,40%,10%) 100%
		), hsl(350,40%,10%);
	background:				linear-gradient(top, 
		hsl(350,30%,30%) 0%,
		hsl(350,50%,15%) 20%,
		hsl(350,40%,10%) 100%
		), hsl(350,40%,10%);
	background-repeat:		repeat-x;
	background-position:	top;
	font-family:			Verdana, Geneva, sans-serif;
	min-height:				100%;
}

a
{
	text-decoration:		none;
}


#content_wrap
{
	margin:				auto;
	max-width:			120em;
	min-height:			400px;
	display:block;
}

h1
{
	margin:						20px 16px 1px 16px;
	padding:					7px 12px 21px 12px;
	text-align:					center;
	font-weight:				400;
	font-size:					350%;
	border-radius:				0 0 0.3em 0.3em ;
	font-family:			'Cherry Swash', serif;
	font-weight:				400;
	color:					#FEF8E8;
	color:					hsl(45, 90%, 90%);

	background:				#7C5157;
	background:				-webkit-linear-gradient(top, 
							hsla(350,30%,25%,0.0) 0%,
							hsla(350,50%,20%,0.0) 80%,
							hsla(350,50%,35%,0.95) 100%
							), hsla(350,40%,25%,0.0);
	background:				-moz-linear-gradient(top, 
							hsla(350,30%,25%,0.0) 0%,
							hsla(350,50%,20%,0.0) 80%,
							hsla(350,50%,35%,0.95) 100%
							), hsla(350,40%,25%,0.0);
	background:				linear-gradient(top, 
							hsla(350,30%,25%,0.0) 0%,
							hsla(350,50%,20%,0.0) 80%,
							hsla(350,50%,35%,0.95) 100%
							), hsla(350,40%,25%,0.0);
	text-shadow:			-.5px -.5px .5px hsla(45, 90%, 60%, .75),
							0px 0px 2px hsl(45, 90%, 60%),
							0.01em 0.01em 0.125em hsl(45, 90%, 60%),
							0.01em 0.01em 0.5em hsl(45, 90%, 60%),
							.02em .02em .01em hsl(45, 90%, 60%),
							-0.01em -0.01em 0.12em hsla(45, 90%, 60%, .25);
}

#content_subheader
{
	margin:						auto;
	margin:						1px 16px 0 16px;
	border-radius:				0.5em 0.5em 0 0;
	background:					#634146;
	background:				-moz-linear-gradient(top, 
		hsl(45,90%,90%) 0%,
		hsl(45,90%,95%) 30%,
		hsl(45,90%,90%) 100%
		), hsl(45,90%,90%);
	background:				-ms-linear-gradient(top, 
		hsl(45,90%,90%) 0%,
		hsl(45,90%,95%) 30%,
		hsl(45,90%,90%) 100%
		), hsl(45,90%,90%);
	background:				-webkit-linear-gradient(top, 
		hsl(45,90%,90%) 0%,
		hsl(45,90%,95%) 30%,
		hsl(45,90%,90%) 100%
		), hsl(45,90%,90%);
	background:				linear-gradient(top, 
		hsl(45,90%,90%) 0%,
		hsl(45,90%,95%) 30%,
		hsl(45,90%,90%) 100%
		), hsl(45,90%,90%);
	color:						#F1E9EB;
	color:						hsl(45,90%,20%);
	padding:					5px 4px 6px 4px;
	text-align:					center;
	text-shadow:				0px 0px 1px hsl(45,30%,90%);
	font-size:					170%;
	line-height: 				120%;
	font-weight:				100;
	font-family:					'Brawler';	
	box-shadow:					inset 1px 2px 1px -1px hsla(45,90%,80%,0.5),
								inset -1px -2px 1px -1px hsla(45,90%,60%,0.5),
								0 0 2px 2px hsla(45,90%,60%,0.75),
								3px 3px 10px -2px rgba(0,0,0,0.2);
}


#content
{
	background:						#F1E9EB;
	background:				-moz-linear-gradient(top, 
		hsl(45,90%,95%) 0%,
		hsl(45,90%,98%) 30%,
		hsl(45,90%,92%) 100%
		), hsl(45,90%,92%);
	background:				-webkit-linear-gradient(top, 
		hsl(45,90%,95%) 0%,
		hsl(45,90%,98%) 30%,
		hsl(45,90%,92%) 100%
		), hsl(45,90%,92%);
	background:				linear-gradient(top, 
		hsl(45,90%,95%) 0%,
		hsl(45,90%,98%) 30%,
		hsl(45,90%,92%) 100%
		), hsl(45,90%,92%);
	border-left:					2px solid #ccc;
	border-right:					2px solid #ccc;
	border-bottom:					2px solid #ccc;
	box-shadow:						5px 5px 15px -3px rgba(0,0,0,0.3);
	color:							hsl(45,90%,15%);
	margin:							1px 16px 8px 16px;
	border-bottom-right-radius:		15px;
	border-bottom-left-radius:		15px;
	font-size:						200%;
	font-family:					'Brawler';
	padding:						.75em 1.5em;
}

#content h2,
#content h3,
#content h4,
#content h5,
#content h6
{
	color:						hsl(350,50%,35%);
	text-align:					left;
	border-radius:				0px;
	font-weight:				400;
}

#content h2
{
	/* exactly as much as the padding of #content */
	margin:						3px 0px;
	padding:					8px 5% 1px 5%;
	font-size:					1.40em;
}

#content h3
{
	margin:						2px 0px;
	padding:					8px 6% 1px 6%;
	font-size:					1.30em;
}

#content h4
{
	margin:						2px 0px;
	padding:					5px 7% 1px 7%;
	font-size:					1.250em;
}

#content h5
{
	margin:						0px 0px;
	padding:					0px 8%;
	font-size:					1.1250em;
}

#content h6
{
	margin:						0px 0px;
	padding:					0px 8%;
	font-size:					1.0em;
	line-height:				120%;
}

a
{
	color:				hsl(199,80%,35%);
	text-shadow:		0 1px 1px hsl(199,80%,35%);

	text-decoration:	none;
	
	border-bottom: 1px dotted hsl(199,80%,35%);
}

a:hover
{
	border-bottom: 1px solid hsl(199,80%,35%);
}



#popup_bg
{
	position:				fixed;
	top:					0;
	left:					0;
	width:					100%;
	height:					100%;
	z-index:				1;

	background: 			#000;
	opacity:				.95;

	-webkit-transition: 	opacity .25s ease;
	-moz-transition: 		opacity .25s ease;
	-o-transition: 			opacity .25s ease;
	transition: 			opacity .25s ease;

}

#popup_bg:hover
{
	opacity:				0.9;
	-webkit-transition: 	opacity .45s ease;
	-moz-transition: 		opacity .45s ease;
	-o-transition: 			opacity .45s ease;
	transition: 			opacity .45s ease;
}

.popup
{
	position:				fixed;
	z-index:				10;
	display:				inline-block;

}

.popup_content
{
	color:					#000;
	background-color:		#fff;
	border:					4px solid #fe0;
	box-shadow:				2px 2px 20px #000;
	padding:				2px;
	border-radius:			10px;
}

/* messages */

.error,
.warning,
.notice
{
	padding:				8px;
}

.error
{
	color:					#800;
	background-color:		#fee;
	box-shadow:				2px 2px 20px #f00;
}
.warning
{
}

.notice
{
	color:					#080;
	background-color:		#efe;
	box-shadow:				2px 2px 10px #0f0;
}

/* forms */

#content textarea,
#content input
{
	padding:				0.35em;
	font-size:				1.05em;
	font-family:			'Brawler';	
}

#content textarea,
#content input[type="text"],
#content input[type="password"]
{
	border-radius:			0.25em;
	color:					#333;
	box-shadow:				inset 1px 1px 8px #ccc;
	border-top:				1px solid #aaa;
	border-left:			1px solid #aaa;
	border-right:			1px solid #ccc;
	border-bottom:			1px solid #ccc;

	background:				-webkit-linear-gradient(top, 
		hsl(45,0%,95%) 0%,
		hsl(45,0%,100%) 1em,
		hsl(45,0%,90%) 100%
		), hsl(45,0%,90%);
	background:				-moz-linear-gradient(top, 
		hsl(45,0%,95%) 0%,
		hsl(45,0%,100%) 1em,
		hsl(45,0%,90%) 100%
		), hsl(45,0%,90%);
	background:				-ms-linear-gradient(top, 
		hsl(45,0%,95%) 0%,
		hsl(45,0%,100%) 1em,
		hsl(45,0%,90%) 100%
		), hsl(45,0%,90%);
	background:				linear-gradient(top, 
		hsl(45,0%,95%) 0%,
		hsl(45,0%,100%) 1em,
		hsl(45,0%,90%) 100%
		), hsl(45,0%,90%);

}

#content input[type="submit"]
{
	padding:				0.35em 0.75em;
	margin:					0.3em 0;
	border-radius:			0.25em;
	color:					hsl(55,100%,25%);
	box-shadow:				inset 1px 1px 8px hsl(45,100%,35%);
	border-top:				1px solid hsl(55,100%,35%);
	border-left:			1px solid hsl(55,100%,35%);
	border-right:			1px solid hsl(55,100%,75%);
	border-bottom:			1px solid hsl(55,100%,75%);
	background:				-webkit-linear-gradient(top, 
		hsl(55,100%,65%) 0%,
		hsl(55,100%,80%) 1em,
		hsl(55,100%,60%) 100%
		), hsl(55,100%,60%);
	background:				-moz-linear-gradient(top, 
		hsl(55,100%,65%) 0%,
		hsl(55,100%,80%) 1em,
		hsl(55,100%,60%) 100%
		), hsl(55,100%,60%);
	background:				-ms-linear-gradient(top, 
		hsl(55,100%,65%) 0%,
		hsl(55,100%,80%) 1em,
		hsl(55,100%,60%) 100%
		), hsl(55,100%,60%);
	background:				linear-gradient(top, 
		hsl(55,100%,65%) 0%,
		hsl(55,100%,80%) 1em,
		hsl(55,100%,60%) 100%
		), hsl(55,100%,60%);
}

#content input[type="submit"]:hover
{
	color:					hsl(45,100%,25%);
	box-shadow:				inset 1px 1px 8px hsl(45,100%,35%);
	border-top:				1px solid hsl(45,100%,35%);
	border-left:			1px solid hsl(45,100%,35%);
	border-right:			1px solid hsl(45,100%,75%);
	border-bottom:			1px solid hsl(45,100%,75%);
	background:				-webkit-linear-gradient(top, 
		hsl(45,100%,65%) 0%,
		hsl(45,100%,80%) 1em,
		hsl(45,100%,60%) 100%
		), hsl(45,100%,60%);
	background:				-moz-linear-gradient(top, 
		hsl(45,100%,65%) 0%,
		hsl(45,100%,80%) 1em,
		hsl(45,100%,60%) 100%
		), hsl(45,100%,60%);
	background:				-ms-linear-gradient(top, 
		hsl(45,100%,65%) 0%,
		hsl(45,100%,80%) 1em,
		hsl(45,100%,60%) 100%
		), hsl(45,100%,60%);
	background:				linear-gradient(top, 
		hsl(45,100%,65%) 0%,
		hsl(45,100%,80%) 1em,
		hsl(45,100%,60%) 100%
		), hsl(45,100%,60%);

}



/* general */

.w99
{
	width:						99%;
}
.pad
{
	padding:					1em;
}
#header
{

	padding:				0.37em 1em;
	max-width:				600px;
	margin:					auto;
	text-align:				center;
	font-size:				500%;
}
#header:nth-of-type(1)
{
	font-size:				2em;
	padding:				0.7em 1em;
}
#header .title,
#header .subtitle
{
	display:				inline-block;
	font-family:			'Parisienne', serif;
	font-weight:			400;
	line-height:			90%;
	color:					#FEF8E8;
	color:					hsl(45, 90%, 95%);
}

#header .title
{
	padding:				0.21em 0.21em 0.01em 0.21em;
	text-shadow:
							-.5px -.5px .5px hsla(45, 90%, 60%, 0.75),
							0px 0px 2px hsl(45, 90%, 60%),
							0.01em 0.01em 0.25em hsl(45, 90%, 60%),
							0.01em 0.01em 0.35em hsl(45, 90%, 60%),
							.015em .015em .03em hsla(45, 90%, 60%, 0.75),
							-0.01em -0.01em 0.08em hsl(45, 90%, 60%);
}

#header div.subtitle
{
	vertical-align:			top;
	display:				block;
	padding:				0.05em 5em 0.02em 25%;
	text-align:				right;
	font-size:				30%;
	letter-spacing:			0.05em;
	line-height:			120%;
	font-family:			'Georgia', serif;
	color:					#FDF2D4;
	color:					hsl(348, 90%, 90%);

	text-shadow:
							-.5px -.5px .5px hsla(345, 90%, 80%, 0.25),
							-.5px -.5px .5px hsla(355, 90%, 60%, 0.25),
							0px 0px 2px hsla(350, 90%, 60%, 0.5),
							0.01em 0.01em 0.025em hsl(48, 90%, 60%),
							0.01em 0.01em 0.15em hsl(340, 90%, 60%),
							.02em .02em .02em hsl(352, 90%, 60%),
							-0.01em -0.01em 0.05em hsla(345, 90%, 60%, 0.5);
	position:				relative;
	right:					0em;
}

#header:nth-of-type(1) div.subtitle
{
	font-size:				75%;
}#main_menu_wrap
{
	margin:					0 1.5em;
}

#main_menu
{
	text-align:				left;
	font-size:				220%;
	font-weight:			700;
	max-width:				900px;
	margin:					auto;
	border-radius:			1.7em;

	background:				#634146;

	background:				-webkit-linear-gradient(top, 
		hsl(350,50%,13%) 0%,
		hsl(350,50%,14%) 30%,
		hsl(350,50%,13%) 100%);
	background:				-moz-linear-gradient(top, 
		hsl(350,50%,13%) 0%,
		hsl(350,50%,14%) 30%,
		hsl(350,50%,13%) 100%);
	background:				-ms-linear-gradient(top, 
		hsl(350,50%,13%) 0%,
		hsl(350,50%,14%) 30%,
		hsl(350,50%,13%) 100%);
	background:				linear-gradient(top, 
		hsl(350,50%,13%) 0%,
		hsl(350,50%,14%) 30%,
		hsl(350,50%,13%) 100%);
	box-shadow:				1px 1px 1px hsl(350,20%,40%),
							inset 1px 1px 1px hsl(350,80%,8%);
	color:					hsl(350,20%,55%);
	
}

#main_menu a
{
	border:					1px solid hsla(350,80%,8%,0);
	text-decoration:		none;
	color:					#F1E9EB;
	color:					hsl(350,50%,90%);
	text-shadow:			0 0 10px hsl(350,20%,60%),
							0px 0px 0px hsl(350,90%,90%),
							0 0 10px hsl(350,20%,60%);
	box-shadow:				0.01em 0.01em 0.125em hsla(45, 60%, 0%, 0),
							0.025em 0.025em 0.0125em hsla(45, 60%, 0%, 0);

}

#main_menu a:hover
{

	border:					1px solid hsla(350,80%,8%,0.95);
	color:					#F1E9EB;
	color:					hsl(350,90%,95%);
	text-shadow:			0 0 2px hsl(350,90%,84%);
	background:				#7C5157;
	background:				-webkit-linear-gradient(top, 
		hsl(350,20%,33%) 0%,
		hsl(350,20%,44%) 20%,
		hsl(350,30%,23%) 100%);
	background:				-moz-linear-gradient(top, 
		hsl(350,20%,33%) 0%,
		hsl(350,20%,44%) 20%,
		hsl(350,30%,23%) 100%);
	background:				-ms-linear-gradient(top, 
		hsl(350,20%,33%) 0%,
		hsl(350,20%,44%) 20%,
		hsl(350,30%,23%) 100%);
	background:				linear-gradient(top, 
		hsl(350,20%,33%) 0%,
		hsl(350,20%,44%) 20%,
		hsl(350,30%,23%) 100%);


}

/* menu */

#main_menu ul li > a,
#main_menu ul li > div
{
	display:				inline-block;

	padding:				4px 4px;
	width:					100%;

	text-align:				center;
	-webkit-transition: 	all 0.25s ease-in-out;
	-moz-transition: 		all 0.25s ease-in-out;
	-o-transition: 			all 0.25s ease-in-out;
	transition: 			all 0.25s ease-in-out;
/*
	border-radius:			20px;
	background:				rgba(0,0,0,0.0);
*/
	box-shadow:				inset -3px -3px 12px rgba(0,0,0,0.0), inset 3px 3px 12px rgba(255,255,255,0.0), 1px 1px 5px rgba(0,0,0,0.0);
}

#main_menu ul li:first-child > a,
#main_menu ul li:first-child > div
{
	border-radius:			1.7em  0 0 1.7em;
}

#main_menu ul li:last-child > a,
#main_menu ul li:last-child > div
{
	border-radius:			0 1.7em 1.7em 0;
}

#main_menu ul li > .here
{
	border:					1px solid hsl(350,80%,28%);
	background:				#D2ABB2;
	background:				hsl(350,80%,95%);
	background:				-webkit-linear-gradient(top, 
		hsl(350,20%,83%) 0%,
		hsl(350,20%,94%) 20%,
		hsl(350,30%,73%) 100%);
	background:				-moz-linear-gradient(top, 
		hsl(350,20%,83%) 0%,
		hsl(350,20%,94%) 20%,
		hsl(350,30%,73%) 100%);
	background:				-ms-linear-gradient(top, 
		hsl(350,20%,83%) 0%,
		hsl(350,20%,94%) 20%,
		hsl(350,30%,73%) 100%);
	background:				linear-gradient(top, 
		hsl(350,20%,83%) 0%,
		hsl(350,20%,94%) 20%,
		hsl(350,30%,73%) 100%);

	color:					hsl(350,20%,18%);
	text-shadow:			
							0 0 4px hsl(350,80%,95%),
							0 0 0px hsl(350,80%,85%),
							0 0 2px hsl(350,80%,80%);

	box-shadow:				0.01em 0.01em 0.25em hsla(45, 60%, 70%, 0.5),
							0.025em 0.025em 0.025em hsla(45, 60%, 70%, 0.5);

}



#main_menu ul
{
	font-size:				1.2rem;
	font-family:			'Georgia', serif;
	font-weight:			400;
}

#main_menu ul,
#main_menu ul ul
{
	padding:				0;
	margin:					0;
	list-style:				none;
}

#main_menu ul li
{
	display:				inline-block;
	position: 				relative;

}

/* second-level menu */

#main_menu ul li ul
{
	border:					1px solid hsl(350,80%,93%);
	background:				-webkit-linear-gradient(top, 
		hsl(350,50%,13%) 0%,
		hsl(350,50%,14%) 30%,
		hsl(350,50%,13%) 100%);
	background:				-moz-linear-gradient(top, 
		hsl(350,50%,13%) 0%,
		hsl(350,50%,14%) 30%,
		hsl(350,50%,13%) 100%);
	background:				-ms-linear-gradient(top, 
		hsl(350,50%,13%) 0%,
		hsl(350,50%,14%) 30%,
		hsl(350,50%,13%) 100%);
	background:				linear-gradient(top, 
		hsl(350,50%,13%) 0%,
		hsl(350,50%,14%) 30%,
		hsl(350,50%,13%) 100%);
	opacity:				0;
	filter:					alpha(opacity = 0);
	position:				absolute;
	top:					-0px;
	left:					-0px;
	padding:				0;
	z-index:				-1;
	border-radius:			0.5em;
	display:				block;
	-webkit-transition: 	all 0.125s ease-in-out;
	-moz-transition: 		all 0.125s ease-in-out;
	-o-transition: 			all 0.125s ease-in-out;
	transition: 			all 0.125s ease-in-out;
}

#main_menu ul li ul li
{
	width:					100%;
}

#main_menu ul li ul li > a,
#main_menu ul li ul li > div
{
	text-align:				left;
	width:					100%;
	white-space:			nowrap;
	text-overflow:			ellipsis;
	overflow:				hidden;
	padding:				4px 8px;
	background:				rgba(255,255,255,0.0);
	display:				block;
}

#main_menu ul li ul li:first-child > a,
#main_menu ul li ul li:first-child > div
{
	border-radius:			0.5em 0.5em 0 0;
}

#main_menu ul li ul li > a,
#main_menu ul li ul li > div
{
	border-radius:			0;
}

#main_menu ul li ul li:last-child > a,
#main_menu ul li ul li:last-child > div
{
	border-radius:			0 0 0.5em 0.5em;
}


/* to override top and left in browsers other than IE, which will position to the top right of the containing li, rather than bottom left */
/*
li > ul
{
	top: auto;
	left: auto;
}
*/
#main_menu:nth-of-type(1) ul li:hover ul
{
	opacity:				1;
	filter:					alpha(opacity = 100);
	z-index:				100; /* so it instantly goes above -1 */

	-webkit-transition:		all 0.35s ease-in-out;
	-moz-transition: 		all 0.35s ease-in-out;
	-o-transition: 			all 0.35s ease-in-out;
	transition: 			all 0.35s ease-in-out;
}

/* hide from older IE */

.nav_bg
{
	display:			none;
}

#main_menu:nth-of-type(1) .nav_bg
{
	position:			fixed;
	top:				0px;
	left:				0px;
	right:				0px;
	bottom:				0px;
	background-color:	#fe8;
	opacity:			0;
	filter:				alpha(opacity = 0);
	z-index:			-1;

	-webkit-transition: all 0.35s ease-in-out;
	-moz-transition: 	all 0.35s ease-in-out;
	-o-transition: 		all 0.35s ease-in-out;
	transition: 		all 0.35s ease-in-out;
}

/* nice! */

#main_menu ul li:hover .nav_bg
{
	display:			block;
	opacity:			0.12;
	filter:				alpha(opacity = 12);
	z-index:			1;
}


#main_menu ul li .nav_bg:hover
{
	opacity:			0;
	filter:				alpha(opacity = 0);
	z-index:			-100;
}#footer
{
	text-align:				right;
	padding:				25px 25px 20px 25px;
	color:					hsl(350,40%,42%);
	background:				-webkit-linear-gradient(top, 
		hsla(350,50%,10%,0) 0%,
		hsla(350,40%,15%,.95) 20%,
		hsla(350,40%,10%,0) 100%
		), hsla(350,40%,10%,0);
	background:				-moz-linear-gradient(top, 
		hsla(350,50%,10%,0) 0%,
		hsla(350,40%,15%,.95) 20%,
		hsla(350,40%,10%,0) 100%
		), hsla(350,40%,10%,0);
	background:				-ms-linear-gradient(top, 
		hsla(350,50%,10%,0) 0%,
		hsla(350,40%,15%,.95) 20%,
		hsla(350,40%,10%,0) 100%
		), hsla(350,40%,10%,0);
	background:				linear-gradient(top, 
		hsla(350,50%,10%,0) 0%,
		hsla(350,40%,15%,.95) 20%,
		hsla(350,40%,10%,0) 100%
		), hsla(350,40%,10%,0);
}

#footer a
{
	color:					#7C5157;
	color:					hsl(350,70%,82%);
	text-shadow:			0 0 2px hsl(350,90%,75%);
	margin:					0 1em;
	border:					none;
	font-size:				1.6em;
}

#footer a:hover
{
	color:					#D2ABB2;
	color:					hsl(350,70%,90%);
	text-shadow:			0 0 3px hsl(350,99%,95%);
}

#footer span
{
	opacity:				0;
}

#footer span:hover
{
	opacity:				1;
}


@media screen and (min-width: 1201px)
{
	body
	{
		font-size:			62.5%;
	}
	#header .title
	{
		font-size:			500%;
	}
	#main_menu li
	{
		font-size:			110%;
	}
	h1
	{
		padding:			7px 12px 12px 12px;
	}
}

@media screen and (max-width: 1200px)
{
	body
	{
		font-size:			60%;
	}
	#header .title
	{
		font-size:			450%;
	}
	#main_menu li
	{
		font-size:			100%;
	}
	h1
	{
		padding:			6px 10px 10px 10px;
	}
}

@media screen and (max-width: 800px)

{
	body
	{
		font-size:			59%;
	}
	#header .title
	{
		font-size:			350%;
	}
	#main_menu li
	{
		font-size:			85%;
	}
}

@media screen and (max-width: 400px)
{
	body
	{
		font-size:			56%;
	}
	#header .title
	{
		font-size:			300%;
	}
	#main_menu li
	{
		font-size:			70%;
	}
	h1
	{
		padding:			3px 6px 6px 6px;
	}
}

@media screen and (max-width: 300px)
{
	body
	{
		font-size:			54%;
	}
	#header .title
	{
		font-size:			250%;
	}
	#main_menu li
	{
		font-size:			60%;
	}
	h1
	{
		padding:			0px 0px;
	}
}