/* ------------------------------------------------------
   HTML ELEMENTS
--------------------------------------------------------- */

/* top elements */
* { margin:0; padding: 0; outline: 0; }

body {
	margin: 0; padding: 0;
	font: 0.9em/1.6em  Verdana, Tahoma, Arial,sans-serif;
	color: #555;
	background: #FFF url(images/bg.gif) repeat-x;	
	text-align: center; 
}

/* links */
a:link, a:visited {
	color: #CC66CC; 
	background-color: inherit;
	text-decoration: none;
}
a:hover {
	color: #575757;
	background-color: inherit;
}

/* headers */
h1, h2, h3 {
	font-family: 'Trebuchet MS', Tahoma, Verdana, Sans-serif;
	font-style:bold;
}

h1 {
	position: absolute;	
	font: bold 2.5em "Trebuchet MS", Arial, Tahoma, Sans-Serif;
	margin: 0; padding:0;
	color: #7587F3;
	letter-spacing: -2px;	
	border: none;	
	
	/* change the values of top and Left to adjust the position of the logo*/
	top: 34px; left: 5px;		
}
h1 span { color: #9933CC; }

h2, #sidebar h3 {
	padding: 10px 10px 5px 10px;
	color: #6666cc;
	background-color: inherit;
	background-image:none;
	border-bottom: 1px solid #EFF0F1;
}
h2 {border-top: 1px solid #EFF0F1;}
h3 {
	font-size: 1em;	
	color: #404040;
	background:url(images/h3-back.gif) no-repeat center; 
}
h4 {
	color:#6666cc;
}	

h3, h4, p, dl {
	padding: 10px;		
	margin: 0;
}

/* images */
img {
    border: none;
}
img.float-right {
  margin: 5px 0px 5px 15px;  
}
img.float-left {
  margin: 5px 15px 5px 0px;
}

#sidebar h3, 
#sidebar p {
	padding-left: 0;
}

ul, ol {
	margin: 10px 20px;
	padding: 0 20px;
}
dt {font-weight:bold;}
dd {margin-bottom:10px;}

code {
  margin: 5px 0;
  padding: 15px;
  text-align: left;
  display: block;
  overflow: auto;  
  font: 500 1em/1.5em 'Lucida Console', 'courier new', monospace;
  /* white-space: pre; */
  background: #FAFAFA;
  border: 1px solid #f2f2f2;  
  border-left: 4px solid #CC99CC;
}
acronym {
  cursor: help;
  border-bottom: 1px solid #777;
}
blockquote {
	margin: 10px;
 	padding: 10px 15px 10px 32px;
  	background: #FAFAFA url(images/quote.gif) no-repeat 8px 10px !important;
	background-position: 10px 10px;
	border: 1px solid #f2f2f2; 
	border-left: 4px solid #CC99CC;
    font-weight: bold;
}
object {
	display:block;
	margin:10px auto;
}
strong {color:#000;padding:0 2px;}
em {font-style:normal;color:#000;background-color:#FFFFCC;padding:0 3px;}


/* start - table */
table {
	border-collapse: collapse;
	margin: 10px 20px;		
}
tr { background: #FFF; }
tr.altrow { background: #F9F9F9;}
th, td {
	text-align: left;			
	border-width: 1px;
  	border-style: solid;
}
th {
	color: #555;
	background: #FBF0FF; 
	padding: .8em 1em;	
  	border-color: #EAD8F5 #D8B9EE #EAD8F5 #EAD8F5;
	white-space: nowrap;
}
th.siderow { border-color: #EAD8F5 #EAD8F5 #D8B9EE #EAD8F5;text-align:center;}
th.sabian {	background-color:#FAFAFA;border-color: #EFEFEF;}

td {
	border-color: #EFEFEF;	
	padding: .7em 1em;	
}
td strong {color:#555;padding:0;}
td em {background-color:transparent;color:#CC66CC;padding:0;font-weight:bold;}

td.nowrap {white-space: nowrap;font-weight:bold;}

table.topics { margin: 0 0 10px;}
table.topics th { border:none;background-color:#FFF;}
table.topics td {
	border:none;
	border-bottom:1px dashed #EFEFEF;	
	padding: 10px 5px;
	line-height:1.2em;
	vertical-align: top;
}
table.topics td strong {display:block;padding:0;margin:0 0 5px 0;line-height:1em;}
table.topics td.left { width:90px;}
table.topics td.left img {
	background: #FAFAFA;
	border: 1px solid #E4E4E4;
	padding: 10px;
}

/* table of chart index */
table.chartlist {margin:1em auto;width:550px;}
table.chartlist td {width:33%;vertical-align: top; text-align:center;border:none;}
table.chartlist td strong {display:block;}

/* table of chart details in each page */
table.t-chart {margin:10px 0 20px;}
table.t-chart td {border:none;padding:0;vertical-align:top;}
table.t-chart td img {margin:15px 10px 0;}

/* table of KANJI ranking */
table.t-acc-rank {margin:10px 0;}
table.t-acc-rank th,
table.t-acc-rank td {	padding: .5em .6em;}


/* form elements */
form {
	margin:10px;
    padding: 10px;
	border: 1px solid #f2f2f2; 
	background-color: #FAFAFA; 
}
label {
	display:block;
	font-weight:bold;
	margin:5px 0;
}
input {
	padding: 4px 5px;
	border:1px solid #eee;
	font: normal 1em Verdana, sans-serif;
	color:#777;
}
textarea {
	width:350px;
	padding:4px 5px;
	font: normal 1em Verdana, sans-serif;
	border:1px solid #eee;
	height:100px;
	display:block;
	color:#777;
}
input.button { 
	margin: 0; 
	font: bolder 12px Verdana, Sans-serif; 
	border: 1px solid #CCC; 
	padding: 4px 5px;
	background: #FFF;
	color: #9933CC;
}
/* search form */
form.search {
	position: absolute;
	top: 26px; right: 5px;
	padding: 0; margin: 0;
	border: none;
	background-color: transparent; 
}
form.search input.textbox { 
	margin: 0; 
	width: 120px;
	border: 1px solid #CCC; 
	background: #FFF;
	color: #333; 	
	vertical-align: top;
}
form.search input.button {
	width: 60px;
	vertical-align: top;
}

/* -------------------------------------
   LAYOUT
---------------------------------------- */
#wrap {
	margin: 0 auto; 
	padding: 0; 
	width: 800px;
	text-align: left;
}

/* header */
#header { 
	position: relative;
	height: 100px; 
	margin: 0; padding: 0;
	color: #808080; 		
}

#header h2#slogan { 
	position: absolute;
	margin: 0; padding: 0;	
	font: 11px "ＭＳ Ｐ明朝", "細明朝体", "ヒラギノ明朝 Pro W3", serif;
	border-bottom:none;

	/* change the border-top style  */
	border-top:1px solid #EFF0F1;
	padding-top:3px;

	/* change the values of top and Left to adjust the position of the slogan*/
	top: 72px; left: 5px;
}

#header p.coment {padding:5px;}

/* menu */
#menu {
	clear: both;
	background: #9966CC url(images/menubg.gif) repeat-x;
	height: 30px;
	margin: 0;
	font: bolder 0.9em/30px Tahoma, Verdana, Arial, Sans-Serif;		
}
#menu ul{
	margin: 0; padding: 0 0 0 8px;
}
#menu ul li {
	float: left;
	list-style: none;		
	border-right: 1px solid #cc99ff;
}
#menu ul li a {
	display: block;
	text-decoration: none;	
	padding: 0 15px;
	color: #FFF;	
}
#menu ul li a:hover {
  	color: #333;	
	background: url(images/menu-hover-bg.gif) repeat-x;
}
#menu ul li#current a {
	color: #333;
	background: url(images/menu-current-bg.gif) repeat-x;	
}

/* pan */
#pan {
	margin:20px 0 0;
	padding:0;
	line-height:1em;
}

/* main column */
#main {
	float: right;
	margin: 10px 0 20px 15px;
	padding: 0;
	width: 76%;	
}
#main a {text-decoration:underline;}

#main ul.three {}
#main ul.three li {width: 32%;float: left;}

#main div#swf-top {	/* online chart of top(home)  */
	width:490px; height:300px;
	margin:1em auto;
}
#main div.ads-box { margin:10px auto;width:480px;} 
#main div.ads-box p { font-size:11px;margin:0; padding:0;}

#main div.topic-left {float:left;width:47%;margin:10px 0 10px 10px;padding:0;}
#main div.topic-right {float:right;width:47%;margin:10px 10px 10px 0;padding:0;}
#main div.topic-left h3,
#main div.topic-right h3 {
	background:none;
	background-color:#FAFAFA;
	border-bottom: 1px solid #f2f2f2; border-right: 1px solid #f2f2f2; 
	padding:0 5px; margin:0; 
}
#main div.topic-left h4,
#main div.topic-right h4 {
	padding-left:0;padding-bottom:0;
}
#main div.topic-left p,
#main div.topic-right p {
	padding:5px;line-height:1.1em;
}

#main div.topic-left ul,
#main div.topic-right ul {
	list-style: none;
	margin: 5px 0; padding: 0;
}
#main div.topic-left li,
#main div.topic-right li {
	background: url(images/point.gif) no-repeat 0.3em 0.3em;
	padding-left: 20px;
}

#main div.news { 
	width:80%; height:150px;
	overflow: auto;
	margin:10px 0 10px 8%;
	padding:2%;
	border: 1px solid #f2f2f2;
}
#main div.news p {font-size:0.85em;line-height:1.1em;padding:0 ;margin:0 0 5px; }
.submenu { font-size: 12px; text-align:center;}/* menu list of main part */


/* sidebar */
#sidebar {
	float: left;
	width: 22%;
	margin: 10px 0 20px;
    padding: 0;
	display: inline;
}
#sidebar ul.sidemenu {
	list-style: none;
	text-align: left;
	margin: 0 0 7px 0; padding: 0;
	text-decoration: none;
}
#sidebar ul.sidemenu li {
	border-bottom: 1px solid #EFF0F1;	
	background: url(images/arrow.gif) no-repeat 3px 11px;
	padding: 3px 5px 3px 20px;
}

* html body #sidebar ul.sidemenu li { height: 1%; }

#sidebar ul.sidemenu li a {
	font-weight: bolder;
	background-image: none;
	text-decoration: none;	
}

/* smaller font-size */
#header p.coment,
#pan,
#sidebar ul.sidemenu li, #sidebar p {
	font-size: 12px;
}

/* footer */
#footer { 
	clear: both; 	
	color: #666666; 	
	padding: 0;	 
	background: #FFF url(images/footerbg.gif) repeat-x;
	height: 60px;
	font-size:11px;

}
#footer a { 
	text-decoration: none; 
	font-weight: normal;
}
#footer-content {
	margin: 0 auto;
	width: 800px
}
#footer-content #footer-left {
	padding: 10px;
	width: 50%;
	float: left;
	text-align: left;
}
#footer-content #footer-right {
	padding: 10px;
	width: 45%;
	float: right;
	text-align: right;
}

/* alignment classes */
.float-left  { float: left; }
.float-right { float: right; }
.align-left  { text-align: left; }
.align-right { text-align: right; }
.align-center { text-align: center;}

/* additional classes */
.clear  { clear: both; }
.ranking { color:#FF0033;font-weight:bold;} /* five stars of gamble (in chart)  */
.pop { color:#FF0033;} /* services */

/* Google ads box */
.ads1 {margin-bottom:2em;} /* top of page */
.ads2 {clear:both;width:800px;margin:3em 0 2em;padding-top:1em;border-top:1px solid #EFF0F1;text-align:center;} /* bottom of page */