/*css layout formatting for by mtness.net*\
\*      2007-06-12, 2009-02-14           */

* { margin: 0; border: 0; padding: 0; }
html {
	height: 100%;
	overflow-y: hidden;
} /* IE7 workaround for vertical centering*/
body {
	width: 100%;
	height: 100%;
	background: #000;
	font-family: lucida sans, verdana, helvetica, arial, sans-serif;
	font-size: 12px;
	color: #ddd;
}

#logo
{
	position: absolute;
	top: 42px;
	left: 16px;
	width: 16px;
	height: 16px;
	background: transparent;
	z-index: 23;
}
#rootline 
{
	position: fixed;
	top: 4px;
	left: 20px;
	padding: 2px 0 0 4px; 
	font-family: mini, verdana, helvetica, arial, sans-serif;
	font-size: 8px;
	color: #0a0;
	z-index: 5;
}
#rootline a:link   { color: #0f0; text-decoration: none; }
#rootline a:visited{ color: #0f0; text-decoration: none; }
#rootline a:hover  { color: #ff0; text-decoration: none; }
#rootline a:active { color: #0f0; text-decoration: none; }
#user              
{
	position: absolute;
	top: 6px;
	right: 6px;
	font: 8px mini;
	color: #eee;
	background: transparent;
	z-index: 21;
}
#user a { color: #888 }
#user a:link   { }
#user a:visited{ }
#user a:hover  { color: #fff; text-decoration: none; }
#user a:active { }

#more
{
	position: absolute;
	bottom: 1.5em;
	right: 1em;
	font-size: 11px;
	background: transparent;
}
#more a { color: #444; }
#more a:link   { text-decoration: none;}
#more a:visited{ text-decoration: none;}
#more a:hover  { color: #eee; text-decoration: none;}
#more a:active { text-decoration: none; }


#wrapper {
	width: 100%;
	height: 100%;
	border: 0;
}

#wrapper td {
	vertical-align: middle;
	text-align: center;
}

.container {
	position: relative;
	text-align: center;
	margin: 0 auto;
	width: 480px;
	height: 480px;
}

.one, .two, .three, .four, .main, .six, .seven, .eight, .nine { position: absolute; overflow: hidden; }
.one	{ top:   0px; left:   0px; width: 114px; height: 114px;	background: top left no-repeat url(../i/m1.jpg); }
.two	{ top:   0px; left: 114px; width: 256px; height: 114px;	background: top left no-repeat url(../i/m2.jpg); }
.three	{ top:   0px; left: 370px; width: 110px; height: 114px;	background: top left no-repeat url(../i/m3.jpg); }
.four	{ top: 114px; left:   0px; width: 114px; height: 256px;	background: top left no-repeat url(../i/m4.jpg); }
.main	{ top: 114px; left: 114px; width: 256px; height: 256px;	background: top left no-repeat url(../i/m5.jpg); }
.six	{ top: 114px; left: 370px; width: 110px; height: 256px;	background: top left no-repeat url(../i/m6.jpg); }
.seven	{ top: 370px; left:   0px; width: 114px; height: 110px;	background: top left no-repeat url(../i/m7.jpg); }
.eight	{ top: 370px; left: 114px; width: 256px; height: 110px;	background: top left no-repeat url(../i/m8.jpg); }
.nine	{ top: 370px; left: 370px; width: 110px; height: 110px;	background: top left no-repeat url(../i/m9.jpg); }
.mainmenu                                                   
{
	position: absolute;
	top: 0;
	left: 0;
	width: 384px;
	height: 384px;
	z-index: 4;
}
#nav { list-style-type: none; margin: 0; border: 0; padding: 0; position: relative; z-index: 4; }

#war, #pure, #death, #wits, #path, #wealth, #sex, #ego, #love {}

#nav #war    a,
#nav #pure   a,
#nav #death  a,
#nav #wits   a,
#nav #path   a,
#nav #wealth a,
#nav #sex    a,
#nav #ego    a,
#nav #love   a { float: left; height: 0px; color: #666; overflow: hidden; }

#nav #war    a,
#nav #pure   a,
#nav #death  a	{ padding: 98px 0 0 0; } 
#nav #wits   a, 
#nav #path   a, 
#nav #wealth a	{ padding: 62px 0 0 0; } 
#nav #sex    a, 
#nav #ego    a, 
#nav #love   a 	{ padding: 99px 0 0 0; } 

#war a, #pure a, #death a, #wits a, #path a, #wealth a, #sex a, #ego a, #love a { display: block; position: absolute; background: top left no-repeat url(../i/m5.jpg); }

#war    a	{ top:   0px; left:   0px; width:  98px; height: 98px; background-position:      0      0; }
#pure   a	{ top:   0px; left:  98px; width:  62px; height: 98px; background-position:  -98px      0; }
#death  a 	{ top:   0px; left: 158px; width:  99px; height: 98px; background-position: -158px      0; }
#wits   a	{ top:  98px; left:   0px; width: 106px; height: 63px; background-position:      0  -98px; }
#path   a	{ top:  98px; left:  98px; width:  62px; height: 63px; background-position:  -98px  -98px; }
#wealth a	{ top:  98px; left: 158px; width:  99px; height: 63px; background-position: -158px  -98px; }
#sex    a	{ top: 158px; left:   0px; width: 106px; height: 99px; background-position:      0 -158px; }
#ego    a	{ top: 158px; left:  98px; width:  62px; height: 99px; background-position:  -98px -158px; }
#love   a	{ top: 158px; left: 158px; width:  99px; height: 99px; background-position: -158px -158px; }

#nav #war    a:hover { background-position:      0 -255px; }
#nav #pure   a:hover { background-position:  -98px -255px; }
#nav #death  a:hover { background-position: -158px -255px; }
#nav #wits   a:hover { background-position:      0 -353px; }
#nav #path   a:hover { background-position:  -98px -353px; }
#nav #wealth a:hover { background-position: -158px -353px; }
#nav #sex    a:hover { background-position:      0 -413px; }
#nav #ego    a:hover { background-position:  -98px -413px; }
#nav #love   a:hover { background-position: -158px -413px; }
                   
#nav #war    a:active, #war    a.selected { background-position:      0 -511px; }
#nav #pure   a:active, #pure   a.selected { background-position:  -98px -511px; }
#nav #death  a:active, #death  a.selected { background-position: -158px -511px; }
#nav #wits   a:active, #wits   a.selected { background-position:      0 -863px; }
#nav #path   a:active, #path   a.selected { background-position:  -98px -863px; }
#nav #wealth a:active, #wealth a.selected { background-position: -158px -863px; }
#nav #sex    a:active, #sex    a.selected { background-position:      0 -924px; }
#nav #ego    a:active, #ego    a.selected { background-position:  -98px -924px; }
#nav #love   a:active, #love   a.selected { background-position: -158px -924px; }

/* content elements formatting */

.container h1 { font-size: 1em ; margin: 0px; padding: 16px 0 4px 0; }
.container h2 { font-size: 0.95em; margin: 0px; padding:  8px 0 4px 0; }
.container h3 { font-size: 0.9em; margin: 0px; padding:  8px 0 4px 0; }
.container em { font-size: 0.8em; margin: 0px; font-style: normal; }

/* 	div#content p:first-letter { color: #00cc00; font-weight: bold; } */

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

#legal
{
	position: fixed;
	width: 100%;
	bottom: 0;
	left: 0;
	border: 0px solid #000000;
	padding: 2px 0 3px 0;
	font: 8px mini;
	z-index: 21;
	background: #333;
	text-align: center;
}
#legal a { color: #888 }
#legal a:link   { text-decoration: none;}
#legal a:visited{ text-decoration: none;}
#legal a:hover  { color: #fff; text-decoration: none;}
#legal a:active { text-decoration: none;}

#mtness
{
	position: fixed;
	bottom: 3px;
	right: 0;
	border: 0px solid #000000;
	z-index: 23;
}