/* CSS Document */

BODY, select, option, tt {
	font: 8pt/16pt "Lucida Grande", Verdana, Lucida, "LiGothicMed", "MS Gothic", Arial, Tahoma, sans-serif;
	margin: 0px;
}
BODY {
	scrollbar-face-color:#DFDFDF;
	scrollbar-highlight-color:#DFDFDF;
	scrollbar-3dlight-color:#DFDFDF;
	scrollbar-shadow-color:#CFCFCF;
	scrollbar-darkshadow-color:#BFBFBF;
	scrollbar-track-color:#EFEFEF;
	scrollbar-arrow-color:#7F7F7F;
}

.button {
	color: #818181;
	background: #EFEFEF;
	border-top: 2px solid #DFDFDF;
	border-left: 2px solid #DFDFDF;
	border-right: 2px solid #CFCFCF;
	border-bottom: 2px solid #CFCFCF;
}

TD, TH, #newslist {
	font-size: 12px;
}

a {
	text-decoration: none;
}
a:link, a:visited, #newscont strong {
	color: #818181;
}
a:hover {
	text-decoration: underline;
}

#members, #lifemain tt {
	font-size: 11px;
}
#members strong {
	color: red;
}

#nav {
	text-align: center;
	display: block;
}
#nav img {
	margin: 5px;
}

#promain, #lifemain, #conmain, #othersmain, #trademain, #locatemain, #questmain {
	width: 640px;
	height: 320px;
}
#promain {
	background: url(../images/promain.jpg) no-repeat right bottom;
}
#lifemain {
	background: url(../images/lifemain.jpg) no-repeat right bottom;
}
#conmain {
	background: url(../images/conmain.jpg) no-repeat right bottom;
}
#othersmain {
	background: url(../images/othersmain.jpg) no-repeat right bottom;
}
#trademain {
	background: url(../images/main.jpg) no-repeat right bottom;
	height: 480px;
}

#newscont {
	font-size: 13px;
	line-height: 21px;
	width: 640px;
}
#newscont img {
	float: left;
	margin: 0 10px 10px 0;
}

#newslist {
	margin: 0;
	padding: 0;
	line-height: 21px;
}
#newslist li {
	margin: 0;
	list-style: none;
}
#newslist li tt {
	color: #ccc;
	font: bold xx-small "Lucida Grande", Verdana, Lucida, "LiGothicMed", "MS Gothic", Arial, Tahoma, sans-serif;
	margin: 0 5px 0 0;
}

div.subimg {
	color: #818181;
	float: right;
	font-size: 13px;
	font-weight: bold;
	width: 180px;
	text-align: left;
}
div.subimg img{
	margin: 10px 0 10px 10px;
}

#detail {
	font-size: 11px;
	color: #818181;
	padding: 0 0 30px 0;
}
#detail h3, #newscont h3 {
	color: #000;
	font: bold 26px "Lucida Grande", Verdana, Lucida, "LiGothicMed", "MS Gothic", Arial, Tahoma, sans-serif, simhei;
	margin: 0;
}
#detail em, #cart em {
	color: red;
	font-style: normal;
}
#detail em {
	font-size: 18px;
}
#detail strong, table.chart caption, #category {
	font-size: 15px;
	color: #666;
}
#detail img.promainpic {
	margin: 0 0 10px 10px;
	float: right;
}
#detail a.preview img {
	margin: 5px;
	vertical-align: middle;
}
#detail a:link {
	text-decoration: underline;
}

#category {
	text-align: right;
	padding: 0 0 10px 0;
}

#cart th, table.chart th, table.bchart th, td.pss dt {
	text-align: left;
	color: #fff;
	background: #818181;
}
#cart td, #cart th {
	padding: 5px;
}
#cart tt, table.chart tt, #lifemain tt {
	color: #ccc;
	font-style: normal;
}
td.pss dt {
	padding: 5px;
	margin: 1.5em 0;
}
td.pss dd {
	margin-top: 5px;
	margin-bottom: 5px;
}
#itemlist {
	text-align: center;
	height: 360px;
}

#copyright {
	font-size: 10px;
	color: #818181;
	padding-top: 10px;
	height: 200px;
}

div.items {
	width: 120px;
	text-align: center;
	margin: 0 0 15px 0;
	display: block;
}
div.items img, {
	margin: 0 0 5px 0;
}
div.items a {
	font-size: 11px;
	font-weight: bold;
}
div.items a img, #detail a.preview img, a.float img {
	border: 1px solid #818181;
	font-weight: bold;
}
div.items a:hover img, #detail a.preview:hover img {
	border: 2px solid #000;
}

.input {
	font-size: 11px;
	border-top: 1px solid #000;
	border-left: 1px solid #000;
	border-bottom: 1px solid #D0D0D0;
	border-right: 1px solid #D0D0D0;
}

table.chart {
	border-top: 1px solid #ccc;
	border-right: 1px solid #ccc;
}
table.chart td, table.chart th {
	border-left: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	padding: 5px;
}
#cart th a:link, #cart th a:visited {
	color: #fff;
	text-decoration: none;
}
table.chart caption {
	font-weight: bold;
	text-align: left;
}

tr.alt, td.alt {
	background: #f4f4f4;
}
#detail td p {
	padding: 10px;
}

#detail b {
	color: #A36209;
}

.updotted {
	border-top: 1px dotted #818181;
}

.btdotted {
	border-bottom: 1px dotted #818181;
}

img.visa {
	float: left;
	vertical-align: middle;
}
/* bake chart */
table.bchart caption {
	font-weight: bold;
	text-align: left;
}
table.bchart {
	border-top: 1px solid #ccc;
	border-right: 1px solid #ccc;
}
table.bchart td, table.bchart th {
	border-left: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	padding: 3px;
}
table.bchart td b {
	font-size: 12px;
}
table.bchart td em {
	color: #fff;
	font-style: normal;
	font-weight: bold;
}


/* traditional navbar */
#navbar {
	font-size: 11px;
	padding: 3px 0; margin: 0;
	background: #818181;
}
#navbar li {
	list-style: none; margin: 0;
	display: inline;
	color: #FFF;	
}
#navbar li a, #navbar li.tabbed {
	padding: 3px 0.5em; margin: 0;
	text-decoration: none;
}
#navbar li a:link {
	color: #ccc;
}
#navbar li a:visited {
	color: #ccc;
}
#navbar li a:hover, #navbar li.tabbed {
	color: #FFF;
	border-top: 1px solid #333;
	background: #333;
}
#tabnav
	{
		height: 20px;
		margin: 0;
		padding-left: 10px;
		background: url(../images/tab_bottom.gif) repeat-x bottom;
	}

#tabnav li
	{
		margin: 0; 
		padding: 0;
  		display: inline;
  		list-style-type: none;
  	}
	
#tabnav a:link, #tabnav a:visited
	{
		float: left;
		background: #f3f3f3;
		line-height: 14px;
		font-weight: bold;
		padding: 2px 10px 2px 10px;
		margin-right: 4px;
		border: 1px solid #ccc;
		text-decoration: none;
		color: #666;
	}

#tabnav a:link.active, #tabnav a:visited.active
	{
		border-bottom: 1px solid #fff;
		background: #fff;
		color: #000;
	}

#tabnav a:hover
	{
		background: #fff;
	}
#panel1 {
	margin: 10px 0 10px 0;
}
/* beans list album style */
div.container {
	width: 570px;
	text-align: center;
	padding-left: 30px;
}
div.spacer {
	clear: both;
}
a.float {
	display: block;
}
a.float:link, a.float:visited {
	float: left;
	width: 90px;
	height: 120px;
	padding: 5px;
	text-align: center;
	border: 1px solid #ccc;
	margin: 5px 5px;
}
a.float p {
	margin: 0;
	font-size: 11px;
}
a.float img {
	margin: 10px 0;
}
a.float:hover {
	background: #f4f4f4;
}
a.float:hover img {
	border-color: #000;
}