@charset "EUC-JP";
/* $B?}(B */

body {
	font-size: 100%;
	margin: 0;
	padding: 0em;
	min-width: 360px;
	background-color: #ecffff;
	margin: 0.2em;
}

a:link { color: #0000ff; }
a:visited { color: #663399; }

/*
 * menu(main)
 * header(+navigation menu)
 * body(content)
 * foooter
 */

/** menu **/
div#menu {
	font-family: monospace, sans-serif; 
	_font-family: sans-serif, monospace;
}

div#menu ul {
	text-align: center;
	list-style: none;
	background-color: #ffffcc;
	margin: 0;
	padding: 0.3em;
}

div#menu li {
	display: inline-block;
	padding: 0;
}

div#menu li a {
	border: 1px solid #666666;
	color: #000000;
	text-decoration: none;
	display: block;
	width: 8em;
	text-align: center;
	padding-top: 2px;
	padding-bottom: 0.2em;
}

div#menu li a:hover {
	font-weight: bold;
	border: 1px solid #666666;
	border-bottom: solid 2px #dd0000;
	padding-top: 1px;
	padding-bottom: 1px;
}


/** header **/
/* #header$B$r:NMQ$7$?8e$K(B#cheader$B$OGQ;_(B */
/* #cheader$B$K4XO"$7$?Dj5A$O(Bsytle.css$B$K$b$"$k$+$iCm0U(B */
div#cheader,
div#header {
	background-color: #efdf9f;
	text-align: center;
	font-family: monospace, sans-serif; 
	_font-family: sans-serif, monospace;
	padding: 0.3em;
}

div#cheader { clear: both; }

div#menu li.msel  {
	/* background-color: #60bf60; */
	background-color: #88ffaa;
	font-weight: bold;
}

div#cbody div#navir, div#cbody div#navil, div#cbody div#navii,
div#header div#navir, div#header div#navil, div#header div#navii {
	font-size: 75%;
	font-family: monospace, sans-serif; 
	_font-family: sans-serif, monospace;
}

div#cbody div#navir,
div#header div#navir {
	text-align: right;
	padding-left: 0.5em;	/* $B%9%^!<%H%U%)%sMQ(B */
}

div#cbody div#navil,
div#header div#navil {
	text-align: left;
	float: left;
	letter-spacing: 0px;
	padding-right: 0.5em;	/* $B%9%^!<%H%U%)%sMQ(B */
}

div#cbody div#navii,
div#header div#navii {
	text-align: right;
	line-height: 120%;
	letter-spacing: 0px;
	padding-left: 0.5em;	/* $B%9%^!<%H%U%)%sMQ(B */
}


div#cbody div#navir a, div#cbody div#navil a, div#cbody div#navii a,
div#header div#navir a, div#header div#navil a, div#header div#navii a {
	text-decoration: none;
	color: #555555;
}

div#cbody div#navir a:hover, div#cbody div#navil a:hover, div#cbody div#navii a:hover,
div#header div#navir a:hover, div#header div#navil a:hover, div#header div#navii a:hover {
	border-bottom: solid 2px #dd0000;
	color: #000;
}

div#cbody div#navir span.nsel, div#cbody div#navil span.nsel, div#cbody div#navii span.nsel,
div#header div#navir span.nsel, div#header div#navil span.nsel, div#header div#navii span.nsel {
	border-bottom: solid 2px #dd0000;
	font-weight: bold;
	color: #000;
}

div#cbody div#navil div.balloon,
div#header div#navil div.balloon {
	display: inline-block;

	margin: 0;
	padding: 0;
}

div#cbody div#navil div.balloon span,
div#header div#navil div.balloon span {
	display: none;
}

div#cbody div#navil div.balloon:hover span,
div#header div#navil div.balloon:hover span {
	display: block;
	position: absolute;
	border: 1px dotted #666666;
	border-radius: 0.2em 0.2em;

	background-color: #aaaaaa;
	color: #fff;

	white-space: pre;	/* for IE & Edge */
}

/** body **/

/* #body$B:NMQ8e$O(B#ctext, #cbody$BGQ;_(B */

div#ctext {
	line-height: 130%;
	background-color: #ecffff;
	padding: 0.3em 0 0 0;
}

div#cbody { background-color: #efdf9f; }

div#body {
	margin: 0;
	line-height: 130%;
	/* border: solid red; */
	padding: 0;
}

/** footer **/

div#footer {
	text-align: center;
	padding: 0.5em 0 0.5em 0;
}

/*
 * Definitions for compatibility with old html
 */

hr {
	height: 3px;
	border-top: #474747 solid 1px;
	border-bottom: #d8d8d8 solid 1px;
	border-left: #474747 solid 1px;
	border-right: #474747 solid 1px;
}

h1, h2, h3 {
	font-family: monospace, sans-serif; 
	_font-family: sans-serif, monospace;
}

h1 { font-size: 150%; }
h2 { font-size: 130%; }
h3 { font-size: 110%; }
dd { margin-left: 1em; }

.center {
	text-align: center;
	margin: 0 auto;
}
.right { text-align: right; }
.left { text-align: left; } /* currently not in use*/
.fright { float: right; }
.fleft { float: left; } /* currently not in use */

.bold { font-weight: bold; }
.red { color: #ff0000; }
.green { color: #00ff00; } /* currentlry not in use */
.blue { color: #0000ff; } /* currently not in use */
.gray { color: #aaaaaa; } /* currently not in use */
.tt { font-family: monospace; } /* currently not in use */
.sml { font-size: 80%; }
.big { font-size: large; } /* currently not in use */


/*	$B%9%^!<%H%U%)%sMQ$N@_Dj(B	*/
/*
	Glayaxy Note 20 Ultra Android 11	412 x 883
	Glayaxy Note S10/S10+ Android 11	360 x 760
	Glayaxy S20 Android 11			360 x 800
	Glayaxy S20 Ultra Android 11		412 x 915
	Glayaxy S20+ Android 11			384 x 854
	iPad iPadOS 14.7.1			810 x 1080
	iPhone 11 Pro iOS 14.6			375 x 812
	iPhone 11 Pro MaxiOS 14.6		414 x 896
	iPhone 12/13 + Pro iOS 14.6		390 x 844
	iPhone 12/13 mini iOS 14.6		375 x 812
	iPhone 12/13 Pro Max iOS 14.6		428 x 926
	iPhone SE "nd gen iOS 14.6		375 x 667
	Kindle Fire HDX Linux			800 x 1200
 */

@media screen and (max-width: 412px) {
	div#menu li a { font-size: 47%; }
	div#cheader,
	div#header { font-size: 60%; } /* check log/1997/0814.html */

	div#cbody div#navir a, div#cbody div#navir span.nsel,
	div#cbody div#navil a, div#cbody div#navil span.nsel
	div#header div#navir a, div#header div#navir span.nsel,
	div#header div#navil a, div#header div#navil span.nsel
	{
		font-size: 65%;
	}

	div#ctext,
	div#body { font-size: 90%; }

	div#cbody div#navii a, div#cbody div#navii span.nsel,
	div#header div#navii a, div#header div#navii span.nsel { font-size: 70%; }

	/* for debug */
	/* #ctext { font-weight: bold; } */
}
