.ninja {
	color:				black;
	visibility:			hidden;
}



html {
	display:			table;
	position:			absolute;
	top:				0;
	left:				0;
	height:				100%;
	width:				100%;
	padding:			0;
	margin:				0;
	border:				0 none;
	font-family:		UnBatang,Cambria,Georgia,"Lucida Bright",Times,serif;
	color:				#fff;
	background:			#444;
	overflow:			auto;
/*	border:				2px dashed yellow;*/
}



body {
	display:			table-cell;
	text-align:			center;
	vertical-align:		top;
	padding:			0px;
	margin:				0px auto;
}

body.middle {
	vertical-align:		middle; /* This will center things vertically too. */
}

body.top { /* This body default */
	vertical-align:		top;
}

body.bottom {
	vertical-align:		bottom;
}



#container {
	display:			table;   /* Allow explicit height of 100%. */
	width:				70%;     /* Reduce width and ...      */
	margin:				0 auto;  /*  ...centers horisontally. */
	height:				100%;    /* Stretch table height to page height. */
	min-width:			900px;
	min-height:			500px;
/*	border:				1px dashed white;*/
}

.tall #container { /* This is #container default. */
	display:			table;   /* Allow explicit height of 100%. */
	height:				100%;    /* Stretch table height to page height. */
}

.short #container {
	display:			block;
	height:				auto;
}

.wide #container  {
	width:				100%;
	margin:				0;
}

.narrow #container { /* This is #container default. */
	width:				70%;
	margin:				0 auto;
}




.content {
	display:			table-row; /* Allow explicit height of 100% for #main (within table). */
	width:				100%;
	text-align:			center;
}

.topcontent {
	vertical-align:		top;
	height:				1em; /* Minor IE fix: Set a default (minimum) height, but will expand as necessary. */
/*	background:			#f44;*/
}

.maincontent {
	height:				100%;
/*	background:			#4f4;*/
}

.bottomcontent {
	vertical-align:		bottom;
	height:				1em; /* Minor IE fix: Set a default (minimum) height, but will expand as necessary. */
/*	background:			#44f;*/
}




#menu {
	height:				3em;
	font-size:			100%;
/*	text-shadow:			1px 1px 1px #111;*/
	color:				#333;
/*	text-transform:			uppercase;*/
/*	outline:			1px dashed cyan;*/
}


#menu ul {
	display:			table-cell;
	text-align:			center;
	vertical-align:		middle;
/*	height:				3em;*/
}

#menu li {
	vertical-align:		middle;
}

#menu li a {
	display:			inline-block;
	color:				#666;
	color:				#fff;
	padding:			0;
	margin:				0 1em;
	height:				100%;
	font-weight:		normal;
}

/*#menu ul:hover li a {
	color:				#ddd;
}*/

#menu ul li a:hover {
	color:				#fff;
	text-decoration:	underline;
/*	background:			#555;*/
}




#footer {
	font-size:			x-small;
}

#footer p {
	text-align:			center;
	font-size:			small;
	color:				#222;
	padding:			1em 0 0.5em 0;
	margin:				0;
	text-align:			center;
}




h1, h2, h3, h4, strong {
	font-weight:		bold;
	letter-spacing:		-0.06em;
/*	text-shadow:			1px 1px 1px #111;*/
	color:				#fff;
	padding:			0;
	margin:				0;
/*	border:				1px solid blue;*/
}

.maincontent h1 {
	margin:				0.6em 0 0.4em 0;
}


a, a:link, a:hover, a:active, a:visited {
	border:				none;
	outline:			none;
	text-decoration:	none;
	color:				#fff;
}

ul {
	margin:				0;
	padding:			0;
	list-style-type:	none;	
}

li {
	margin:				0;
	padding:			0;
	display:			inline-block;
}


img {
	display:			block; /* To avoid gaps. */
	padding:			0;
	margin:				0;
	border:				0 none;
}

.ie-hover-fix,
.opacity-100 {
  opacity:				1.0;	/* Good browsers */
  -moz-opacity:			1.0;	/* Netscape */
  -khtml-opacity:		1.0;	/* Safari 1.x */
  filter: alpha(opacity=100);	/* IE 5-7 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";	/* IE 8... Crikey this is fugly! */
}

.opacity-notes,
.opacity-90 {
  opacity: 				0.90;	/* Good browsers */
  -moz-opacity: 		0.90;	/* Netscape */
  -khtml-opacity: 		0.90;	/* Safari 1.x */
  filter: alpha(opacity=85);	/* IE 5-7 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";	/* IE 8... What's wrong with this picture? */
}

.opacity-50 {
  opacity: 				0.5;	/* Good browsers */
  -moz-opacity: 		0.5;	/* Netscape */
  -khtml-opacity:		0.5;	/* Safari 1.x */
  filter: alpha(opacity=50);	/* IE 5-7 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";	/* IE 8... Will you look at this!? */
}

.opacity-0 {
  opacity:				0.0;	/* Good browsers */
  -moz-opacity:			0.0;	/* Netscape */
  -khtml-opacity:		0.0;	/* Safari 1.x */
  filter: alpha(opacity=0);		/* IE 5-7 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";		/* IE 8... What the hell is wrong with these people? */
}



.opacity-0-to-100-on-hover
{
  opacity:				0.0;	/* Good browsers */
  -moz-opacity:			0.0;	/* Netscape */
  -khtml-opacity:		0.0;	/* Safari 1.x */
  filter: alpha(opacity=0);		/* IE 5-7 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";	/* IE 8 ... What the hell is wrong with these people? */
}

.opacity-0-10-100-on-hover:hover {
  opacity:				1.0;	/* Good browsers */
  -moz-opacity:			1.0;	/* Netscape */
  -khtml-opacity:		1.0;	/* Safari 1.x */
  filter: alpha(opacity=100);	/* IE 5-7 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";	/* IE 8 ... What the hell is wrong with these people? */
}



.raise-on-hover {
	z-index:			0;
}

.raise-on-hover:hover {
	z-index:			999;
}



.dropshadow-large {
	box-shadow:			7px 7px 11px #222;
	-moz-box-shadow:	7px 7px 11px #222;
}

.dropshadow-medium {
	box-shadow:			4px 4px 7px #222;
	-moz-box-shadow:	4px 4px 7px #222;
}

.dropshadow-small {
	box-shadow:			2px 2px 4px #222;
	-moz-box-shadow:	2px 2px 4px #222;
}



.undisplayed {
	display:			none;
}

.hidden {
	visibility:			hidden;
}


.ie-blank-fix {
	/* IE ignores hovering empty links areas, so we fill it with a blank image.*/
	background:			url("blank.png") no-repeat transparent;
}





#preload {
	display: none;
}




.mail {
	position:			absolute;
	bottom:				0;
	right:				100px;
	overflow:			hidden;
	color:				transparent;
	z-index:			1000;
}


.mail > a {
	display:			block;
	width:				36px;
	height:				30px;
	background-image:	url("mail.png");
	background-position: 50% 50%;
	background-repeat:	no-repeat;
/*	border:				1px dashed white;*/
	padding:			10px;
	overflow:			hidden;
	margin-bottom:		-25px;
	vertical-align:		baseline;
	text-decoration:	none;
}

.mail > a:hover {
	margin-bottom:	-5px;
}

.mail > a > span {
	display:			none;
}




.lightwhale {
	position:			absolute;
	bottom:				0;
	right:				100px;
	overflow:			hidden;
	color:				transparent;
	z-index:			1000;
	font-size:		2rem;
}


.lightwhale > a {
	display:			block;
	padding:			10px;
	overflow:			hidden;
	margin-bottom:		-40px;
	vertical-align:		baseline;
	text-decoration:	none;
}

.lightwhale > a:hover {
	margin-bottom:	-5px;
}

.lightwhale > a > span {
	display:			none;
}