@charset 'utf-8';

/*
 * common styles
 */
body
{
	background-color: #add8e6;
}

/*
 * site title
 */
header
{
	background-color: white;
	height: 179px;
	margin-top: -100px;
}

header h1
{
	position: relative;
	top: 100px;
	text-align: right;
	font-size: 2.5em;
	font-family: "ヒラギノ丸ゴ Pro W4", "Hiragino Maru Gothic Pro",
		"ＭＳ Ｐゴシック", "MS PGothic", fantasy;
}

header a
{
	text-decoration: none;
	color: #00008b;
}

/*
 * global menu
 */
nav
{
	height: 2.5em;
	background-color: #00008b;
	border: solid thin #00008b;
	margin-bottom: 1em;
}

nav h1
{
	display: none;
}

nav ul
{
	margin: 0;
	padding: 0;
}

nav li
{
	display: table;
	float: left;
	width: 18%;
	height: 2em;		/* the `height' require to fit subitems */
	margin: .15em;
}

nav a
{
	/*
	 * if you browse this site with IE7 or earlier versions,
	 * the menu looks like broken layout,
	 * but you can use it.
	 */
	display: table-cell;
	height: 100%;
	text-align: center;
	vertical-align: middle;
	font-weight: bold;
	text-decoration: none;
	color: white;
}

nav a:hover
{
	color: yellow;
}

/*
 * article
 */
article
{
	float: left;
	width: 70%;
	padding: 0 .5em;
	border-radius: 8px;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	color: #333;
	background-color: white;
	font-family: 'メイリオ', 'Meiryo',
		'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro',
		'Osaka',
		'ＭＳ Ｐゴシック', 'MS P Gothic',
		Verdana, Arial, Helvetica, sans-serif;
}

article p
{
	line-height: 1.5em;
}

article a:link
{
	color: black;
}

article a:visited
{
	color: #666;
}

article a:hover
{
	color: orange;
}

article h1
{
	border-bottom: solid 2px red;
	font-size: 1.8em;
}

article h1 + p.revision
{
	text-align: right;
	margin-top: -2.8em;
	color: #666;
}

article section
{
	width: 98%;
	margin-left: auto;
}

article h2
{
	margin-top: 2em;
	padding: 5px 0 5px 15px;
	background-color: #00008b;
	color: #cfcfcf;
	font-size: 1.2em;
}

article h3
{
	font-size: 1em;
}

article ul
{
	padding: 0;
}

article ul li
{
	list-style-type: none;
	border-left: solid .5em #3cb371;
	padding-left: .5em;
	margin: 2em 0 .5em 1em;
}

article dt
{
	margin: 2em 0 .5em 1em;
	border-left: solid .5em #3cb371;
	padding-left: .5em;
}

article dd
{
	margin-left: 2em;
}

article pre
{
	overflow: auto;
	margin-left: 2em;
	border: solid 1px #006633;
	padding: .5em;
	color: #006633;
	background-color: white;
	font-family: monospace;
}

article .note
{
	margin: 0 2em;
	padding: 2px 1em;
	background-color: #e5e5e5;
	position: relative;	/* for dog-ear */
}

article .note:before
{
	content: "";
	border-width: 0 16px 16px 0;
	border-style: solid;
	border-color: white white #a5a5a5 #a5a5a5;
	background-color: #000;
	position: absolute;
	top: 0;
	right: 0;
}

article table,
article th,
article td
{
	border: solid thin black;
}

/*
 * aside
 */
aside
{
	width: 25%;
	float: right;
	padding: 3px;
	color: #cfcfcf;
	background-color: #191970;
	font-size: .9em;
}

aside h1
{
	margin: 1px;
	border: solid 1px #777;
	padding: 3px;
	color: white;
	font-size: 1em;
}

aside ul
{
	padding: 0 1em;
}

aside ul li
{
	display: block;
	margin-bottom: .5em;
}

aside dl dd
{
	margin-left: 1em;
}

aside a:link
{
	color: #ddd;
}

aside a:visited
{
	color: #999;
}

aside a:hover
{
	color: yellow;
}

/*
 * footer
 */
footer
{
	clear: both;
	padding: 5em 0 0 2em;
	font-size: .7em;
}