@charset "utf-8";
/* CSS Document */

#outer-wrapper {
	position: absolute;
	background: #000;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	min-width: 960px;
	min-height: 410px;
	width: 100%;
	z-index: 1;
}
#content {
	position: absolute;
	display: block;
	top: 50%;
	left: 50%;
	width: 930px;
	margin-left: -465px;
	margin-top: -23px;
	z-index: 2;
}
	#content h2 {
		position: absolute;
		display: none;
		top: 0px;
		padding: 10px 20px;
		width: 160px;
		color: #555;
		font-size: 80%;
		font-weight: normal;
		letter-spacing: .0em;
		line-height: 18px;
		background: #000 url(/images/content-bg.gif) repeat-x;
	}
	
	#content #content-about {
		left: 0px;
	}
	#content #content-fineart {
		left: 200px;
	}
	#content #content-design {
		left: 530px;
	}
	#content #content-illustration {
		left: 730px;
	}
	
#dotnav {
	position: absolute;
	display: block;
	top: 50%;
	left: 50%;
	margin-top: -89px;
	margin-left: -39px;
	width: 78px;
	height: 78px;
	background: #000;	
	z-index: 2;
}
#mc-logo {
	position: absolute;
	display: inline-block;
	top: 50%;
	left: 50%;
	margin-top: -105px;
	margin-left: -55px;
	width: 110px;
	height: 110px;
	background: #000 url(../images/mc-logo.gif) no-repeat center center;	
	z-index: 3;
}
.logo-resting {
	left: 0px;
}
#navbar-wrapper {
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	margin-top: -78px;
	height: 55px;
	color: #fff;
}
#navbar1 {
	position: absolute;
	left: 0;
	width: 50%;
	height: 55px;
	background: #55520b url(../images/navbg-left.gif) repeat-y top right;	
	z-index: 1;
}
#navbar2 {
	position: absolute;
	right: 0;
	width: 50%;
	height: 55px;
	background: #42015d url(../images/navbg-right.gif) repeat-y top left;	
	z-index: 1;
}

#footer {
	position: absolute;
	text-align: center;
	bottom: 20px;
	width: 100%;
	height: 85px;
	background: url(../images/michael-creative.gif) no-repeat top center;
	color: #444;
	font-size: 90%;
	font-weight: normal;
}
#footer ul {
	list-style: none;
	margin-top: 60px;
}
#footer li {
	display: inline;
	padding: 0px 4px;
	border-right: 1px solid #444;
}
#footer li.last {
	border-right: none;
}
#footer a {
	color: #444;
	text-decoration: none;
}
#footer a:hover, #footer a:active {
	color: #fff;
	text-decoration: underline;
}
	#dotnav div {
		width: 38px;
		height: 38px;
		cursor: pointer;
	}

	#dotnav #dotAbout {
		position: absolute;
		top: 0;
		left: 0;
		border-right: 1px solid #42015d;
		border-bottom: 1px solid #42015d;
		background: url(../images/dot-purple.gif) no-repeat center center;
	}
	#dotnav #dotDesign {
		position: absolute;
		top: 0;
		left: 39px;
		border-bottom: 1px solid #42015d;
		background: url(../images/dot-green.gif) no-repeat center center;
	}
	#dotnav #dotFineArt {
		position: absolute;
		top: 39px;
		left: 0px;
		border-right: 1px solid #42015d;
		background: url(../images/dot-green.gif) no-repeat center center;
	}
	#dotnav #dotIllustration {
		position: absolute;
		top: 39px;
		left: 39px;
		background: url(../images/dot-purple.gif) no-repeat center center;
	}
	.dotHover {
		background: url(../images/dot-white.gif) no-repeat center center !important;
	}
	
	#navbar1 ul {
		position: absolute;
		top: 0px;
		right: 65px;
		list-style: none;
	}
	#navbar2 ul {
		position: absolute;
		top: 0px;
		left: 5px;
		list-style: none;		
	}
	#navbar1 li, #navbar2 li {
		display: block;
		float: left;
		font-weight: normal;
		letter-spacing: .0em;
	}
	#navbar1 li {
		width: 200px;
	}
	#navbar2 li {
		width: 200px;
		text-align: right;
	}
	#navbar2 li.first {
		width: 260px;
	}
	#navbar1 li a, 	#navbar2 li a {
		display: inline-block;
		height: 35px;
		width: 160px;
		padding: 20px 20px 0px;
		text-decoration: none;
	}
	#navbar1 li a {
		color: #a3a16d;
	}
	#navbar2 li a {
		color: #8e64a0;
	}
	#navbar1 a:hover, #navbar2 li a:hover, #navbar1 li a.hover, #navbar2 li a.hover {
		color: #fff;
		background: #161616;
	}
	#navbar1 #nav-about.hover {
		background: url(/images/nav-about-hover-bg.gif) repeat-y;
	}
	#navbar1 #nav-fineart.hover {
		background: url(/images/nav-fineart-hover-bg.gif) repeat-y;
	}
	#navbar2 #nav-design.hover {
		background: url(/images/nav-design-hover-bg.gif) repeat-y;
	}
	#navbar2 #nav-illustration.hover {
		background: url(/images/nav-illustration-hover-bg.gif) repeat-y;
	}

#detail-about, #detail-fineart, #detail-design, #detail-illustration {
	display: none;
	color: #fff;
	font-size: 80%;
	font-style: italic;
}