* {margin: 0; padding: 0;}


/* 
---------------------------------------------------------------------------------------
PRIMARY LAYOUT
---------------------------------------------------------------------------------------*/

body {
	text-align: center; 
	color: #111; 
	background: #fff url(/images/bkgrd2.jpg) top center no-repeat;; 
	margin: 0 auto; 
	padding: 0;
} 

#wrap {
	width: 700px;
	text-align: center; 
	margin: 120px auto 0 auto; 
	padding: 30px 0 0 0;  
}

#header {
	width: 410px; 
	height: 180px; 
	text-align: left; 
	margin: 0 auto; 
	padding: 0; 
	background: url(/images/logo.gif) no-repeat;
}


/* 
---------------------------------------------------------------------------------------
TYPOGRAPHY
---------------------------------------------------------------------------------------*/

body {font: x-small Verdana, Arial, Helvetica, sans-serif; line-height: 1.8em;}

p {margin: 0 0 1em 0; padding: 0;}

h1, h2, h3, h4 {
	font: 1.2em Courier, "Courier New",  serif;
	font-weight: normal;
	text-transform: uppercase;
	letter-spacing: 1px; 
	color: #666; 
	background: none;
}

a, a:link, a:visited, a:active, a:hover
{text-decoration: none; color: #00a6e8; background: none;}

a:active, a:hover {text-decoration: underline; color: #00a6e8; background: none;}


/* 
---------------------------------------------------------------------------------------
BASIC IMAGE/MEDIA STYLES
---------------------------------------------------------------------------------------*/

img {border: none;}


/* 
---------------------------------------------------------------------------------------
HEADER STYLES
---------------------------------------------------------------------------------------*/

#header h1 {text-indent: -9999px; display: none;}

#header h2 {
	text-indent: -9999px;
	display: block;
	width: 91px;
	height: 15px;
	background: url(/images/welcome.gif) no-repeat;
	margin: 40px 0 0 150px;
}


/* 
---------------------------------------------------------------------------------------
TOP NAVIGATION STYLES
---------------------------------------------------------------------------------------*/

#topnav1 ul {width: 52px; list-style: none; margin:0 0 28px 347px; padding: 0;}
#topnav2 ul {width: 48px; list-style: none; margin: 0; padding: 0;}

#topnav1 li {width: 52px; list-style: none; text-indent: -9999px; margin: 0 0 9px 0;}
#topnav2 li {width: 48px; list-style: none; text-indent: -9999px; margin: 0 0 9px 0;}

/* Fix for <li> padding in IE PC.Hide from IE 5 Mac \*/
#topnav1 li, #topnav2 li {float: left; clear: both;} /* */
html>body #topnav1 li, html>body #topnav2 li {float: none; clear: none;}

#topnav1 ul li a {display: block; width: 52px; height: 8px; overflow: hidden;}
#topnav2 ul li a {display: block; width: 48px; height: 10px; overflow: hidden;}

/* HIDE FROM IE MAC \*/
#topnav1 ul li a, #topnav2 ul li a {width: 100%;} /**/
html>body #topnav1 ul li a, html>body #topnav2 ul li a {width: auto;}

#topnav1 ul li#about a,
#topnav1 ul li#about a:link, 
#topnav1 ul li#about a:visited {
	background: url(/images/nav_about.gif) 0 -9px no-repeat;
}

#topnav1 ul li#contact a,
#topnav1 ul li#contact a:link, 
#topnav1 ul li#contact a:visited {
	background: url(/images/nav_contact.gif) 0 -9px no-repeat;
}

#topnav1 ul li#blog a,
#topnav1 ul li#blog a:link, 
#topnav1 ul li#blog a:visited {
	height: 12px;
	background: url(/images/nav_blog.gif) 0 -12px no-repeat;
}

#topnav2 ul li#novels a,
#topnav2 ul li#novels a:link, 
#topnav2 ul li#novels a:visited {
	background: url(/images/nav_novels.gif) 0 -10px no-repeat;
}

#topnav2 ul li#comics a,
#topnav2 ul li#comics a:link, 
#topnav2 ul li#comics a:visited {
	background: url(/images/nav_comics.gif) 0 -10px no-repeat;
}

#topnav2 ul li#other a,
#topnav2 ul li#other a:link, 
#topnav2 ul li#other a:visited {
	background: url(/images/nav_other.gif) 0 -10px no-repeat;
}


#topnav1 ul li#about a:active,
#topnav1 ul li#about a:hover,
#topnav1 ul li#contact a:active,
#topnav1 ul li#contact a:hover,
#topnav1 ul li#blog a:active,
#topnav1 ul li#blog a:hover,
#topnav2 ul li#novels a:active,
#topnav2 ul li#novels a:hover,
#topnav2 ul li#comics a:active,
#topnav2 ul li#comics a:hover,
#topnav2 ul li#other a:active,
#topnav2 ul li#other a:hover {
	background-position: 0 0;
}

.about #topnav1 ul li#about a,
.contact #topnav1 ul li#contact a,
.blog #topnav1 ul li#blog a,
.novels #topnav2 ul li#novels a,
.comics #topnav2 ul li#comics a,
.other #topnav2 ul li#other a {
	background-position: 0 0
}