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

#navcon {
	background: #636363;
	width: 600px;
	height: 28px;
}

#nav {
	font-family: bbdfont, Verdana, Geneva, sans-serif;
	width: 580px;  /* was 700px; */
	font-size:16px;
	color:#000;
	margin-top: auto;
	margin-bottom: auto;
	/*  vertical-align: middle; */
	height: 34px;
	margin-left: 430px;
	/*left: 530px;
	top: 125px; /* was 125 */
}

#nav ul {
	list-style-type: none;
	height: 28px;
}

#nav ul li {
	float: left;
	position: relative;
	padding-top: 2px;
	margin-top: auto;
	margin-bottom: auto;
	vertical-align: middle;
}

#nav ul li.spacer {
	width: 6px;
	height: 6px;
	background-repeat: no-repeat;
	padding: 0;
	cursor: default;
	background-image: url("../_imgs/spacer.png");
	top: 12px;
}

#nav ul li a {
	text-align: center;
	display:block;
	text-decoration:none;
	letter-spacing: 0.2em;
	height: 22px;
	width: auto;
	padding-right: 20px;
	padding-bottom: 0px;
	padding-left: 20px;
	padding-top: 6px;
	background-color: #636363;
	vertical-align: middle;
	color: #FFF;
	outline: none;
	/* margin-top: auto;
	margin-bottom: auto; */
}

#nav ul li a:visited {
	outline: none;	
}

#nav ul li a:hover {
	color: #FFF;
	background-color: #7f7f7f;
}

/* #nav ul li a:active {
	color: #FFF;
	background-color: #353535;
} */

#nav ul li ul {
	display: none;
	height: 28px;
}
 
#nav ul li:hover ul {
	display: block;
	position: absolute;
	z-index: 4;
	margin-left: 0px;
	padding-top: 1px;
}
 
#nav ul li:hover ul li a {
	display:block;
	width: 130px;
	letter-spacing: 0em;
	height: 22px;
	text-align: left;
	padding-top: 6px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #FFF;
	margin-top: -2px;
}

#home-pg li.home a {
	background-color:#202020;
} 

#about-pg li.about a {
	background-color:#202020;
} 

#info-pg li.info a {
	background-color:#202020;
} 

.jewelry {
	background-color:#202020;
}

#link-pg li.link a {
	background-color:#202020;
} 

#disc-pg li.disc a {
	background-color:#202020;
} 

#charm-pg li.charm a {
	background-color:#202020;
} 

#bubble-pg li.bubble a {
	background-color:#202020;
} 

#resin-pg li.resin a {
	background-color:#202020;
} 

#coin-pg li.coin a {
	background-color:#202020;
} 

#info_text ul li a {
	text-align: center;
	/* letter-spacing: 0.1em; */
	height: 22px;
	width: auto;
	padding-bottom: 0px;
	padding-left: 0px;
	color: #FFF;
	outline: none;
}

#info_text a {
	color: #FFF;
	outline: none;
	padding-left: 2px;
	padding-right: 2px;
}

.top { border-top: 1px solid #FFF 
}

.pagecenter {
	color:#636363;
	left: auto;
	right: auto;
	background-color: #000;
}
.black {
	background-color: #000;
}
/*******************************************************************************

 BROWSER HACKS: the hacks below should not be changed unless you are an expert

 *******************************************************************************/

/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul iframe
{
	position: absolute;
	z-index: 1010;
	filter:alpha(opacity:0.1);
}
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
{
	ul li.MenuBarItemIE
	{
		display: inline;
		f\loat: left;
		background: #7F7F7F;
	}
}