@charset "EUC-JP";
@import "advanced.css";

/**
 *
 * 全体共通
 *
 */
body {
	background-color: #f9f9dc;
    color:            #24211e;
}
	p.back-to-top a {
		color: #606060;
	}

/**
 * 見出し
 */
h1, h2, h3, h4, h5, h6 {
	font-weight: bold;
	line-height: 1em;
}
	h1, h2, h3, h4 {
		clear: both;
	}
	h1 {
		line-height:   1em;
		margin:        0;
		margin-bottom: 1em;
	}
	div.title {
		text-align:    center;
		font-weight:   bold;
		margin-bottom: 2em;
	}
	div.title h1 {
		margin-bottom: .2em;
		font-size:     180%;
	}
	div.title div.subtitle {
		font-size: 85%;
	}
	div.title div.subtitle:before {
		content: '~ ';
	}
	div.title div.subtitle:after {
		content: ' ~';
	}
	h2 {
		width:            auto;
		font-size:        140%;
		text-align:       center;
	}
	h3 {
		font-size:        120%;
		background-color: #EAEACF;
		padding:          .3em .2em .2em .2em;
/*		border-top:       1px solid  white; */
		border-bottom:    1px dashed #56564C;
		margin-left:      .5em;
	}
	h4 {
		font-size:      100%;
		margin-left:    .75em;
		line-height:    1em;
		vertical-align: middle;
		padding:        0.1em 0.2em;
		border-left:    1em solid #90907F;
	}
	h5 {
		font-size: 100%;
	}
	h6 {
		font-size: 100%;
	}

/**
 * アンカー
 */
a:link {
	color:           rgb(0,66,255);
}
	a:visited {
		color:           #0FB19C;
	}
	a:hover {
		color:           #24211e;
		background:      white;
		text-decoration: underline;
	}
	a:active {
		position: relative;
		top:      1px;
		left:     1px;
	}

/**
 * 強調
 */
em, strong {
}
em {
	font-style:  normal;
	font-weight: bold;
}
strong {
	font-size:   120%;
	font-style:  normal;
	font-weight: bold;
}
div.super-strong {
	display:     block;
	text-align:  center;
	font-size:   130%;
	font-weight: bold;
	font-style:  normal;
	font-family: sans-serif;
}
/*
em, strong をデフォルトのままにして super-strong を導入？ それとも strong の size をでかくして super-strong を見送り？  どっちにしろ現状のコンテンツは em がなくて strong ばかりだから、ちょっとそれはあんまりな気がする。正直、em と strong の2段階で十分な気も。
*/

/**
 * 注意書き
 */
div.attention {
}
	div.attention:before {
		content: 'attention';
	}
/*
意味的には aside の正反対、かな？ strong, super-storng はあくまで 256 倍風に使うってことで
*/

hr {
	clear:        both;
}
p {
	text-align:    left;
	text-indent:   1em;
	margin-top:    .5em;
	margin-bottom: .5em;
}
.date {
	font-weight: normal;
	color:       black;
}
ul, ol {
  text-align: left;
}
pre {
  text-align: left;
}

/**
 * テーブル
 */
table {
/*	border-top:     1px solid #606060;
	border-left:    1px solid #606060; */
	border:         1px solid #606060;
	margin:         1em;
	margin-left:    auto;
	margin-right:   auto;
/*	border-spacing: 0; */
	border-collapse:   collapse;
/*  margin-top:     .5em; */
}
	caption {
/*		border:        1px dotted #333333; */
		margin-left:   auto;
		margin-right:  auto;
		caption-side:  top;
		margin-bottom: -.5em;
		/* table の margin が 1em なので */
		font-weight:   bold;
		text-align:    center;
		font-size:     105%;
	}
	table.caption-top {
		margin-top:   .3em;
		caption-side: top;
	}
	table.caption-top caption {
		margin-top : 1em;
	}
	table.caption-bottom {
		margin-bottom: .3em;
		caption-side:  bottom;
	}
	table.caption-bottom caption {
		margin-bottom: 1em;
	}
	table.caption-right {
		margin-right: .3em;
		caption-side: right;
	}
	table.caption-right caption {
		margin-right: 1em;
	}
	table.caption-left {
		margin-left:  .3em;
		caption-side: left;
	}
	table.caption-left caption {
		margin-left: 1em;
	}
	table.norborder {
		border: 0;
	}
	table.noborder td, table.norborder th {
		border: 0;
	}
	td, th {
		margin:        0;
		border:        1px solid #606060;
/*		border-right:  1px solid #606060;
		border-bottom: 1px solid #606060; */
	}
	table.figure {
		border-top:  .2em groove white;
		border-left: .2em groove white;
/*		border-style: collapse; */
		empty-cells:  hide;
	}
	table.figure td {
		text-align:       center;
		background-color: #F9FAD0;
	}
	table.figure td.img {
		vertical-align: middle;
	}
	table.figure td p {
		line-height: 1.4em;
	}
	table.figure td, table.figure th {
/*		border: .2em groove white; */
		border-right:  .2em groove white;
		border-bottom: .2em groove white;
	}
	th {
		padding:     .3em;
		font-size:   105%;
		font-weight: bold;
	}
	td {
		padding:        .25em;
		vertical-align: top;
	}

/**
 * 引用
 */
blockquote {
        margin-left:  1.5em;
        margin-right: 1em;
        padding:      .2em .5em;
        border-width: 1px;
        border-style: dotted;
        border-color: #7D6854;
        background:   #F5F2E7;
}
blockquote:after {
	margin-top:  -1em;
	content:     'quotation';
	color:       white;
	text-align:  right;
	font-size:   80%;
	font-style:  italic;
	font-weight: bold;
	display:     block;
	line-height: 1em;
}

/**
 * リスト
 */
div.toc h2 {
	width:        auto;
	margin:       0;
	font-size:    90%;
	border-top:   none;
	border-left:  none;
	border-right: none;
}

/**
 * 付加的な文章
 */
span.aside {
	color:     #666666;
	font-size: 95%;
}
div.aside {
	margin-left:  7.5%;
	margin-right: 7.5%;
	border:       .1em dashed #B2B087;
	line-height:  1em;
	background:   #F6F6D9;
}
div.aside p {
	margin-left:  1em;
	margin-right: 1em;
}
div.aside:before {
	content:       'ところで ...';
	color:         #e0ddaa;
	color:         white;
	background:    #B2B087;
	font-size:     80%;
	padding:       .15em .6em;
}

/**
 * キーボード入力と入力画面
 */
kbd {
	color:          inherit;
	background:     inherit;
	white-space:    pre;
	font-weight:    normal;
	padding-bottom: .2em;
	border-bottom:  2px dotted;
}
	div.console {
		display:        block;
		white-space:    pre;
		line-break:     pre;
		border:         3px outset;
		line-height:    1.3em;
		padding:        .2em;
		padding-bottom: .5em;
		text-align:     left;
	}
	div.console:before {
		font-size:     90%;
		content:       'terminal';
		display:       block;
		background:    #bbbbbb;
		text-align:    center;
		font-family:   Chicago, Techno, Impact, sans-serif;
	/*	font-weight:   bold; */
		margin-bottom: .5em;
	}
	div.console kbd {
		border-bottom-width:  1px;
		padding-bottom:       .1em;
	}

/**
 * キートップ
 */
span.keytop {
		/* よくある outset 表現 */
	font-family:   sans-serif;
		/* kbd と違って proportional の方がよい */
}
	/* [ A ] 表記をわざわざ CSS でやってみる */
	span.keytop:before {
		content:    '[ ';
		color:      inherit;
		background: inherit;
		padding:    inherit;
	}
	span.keytop:after {
		content:    ' ]';
		color:      inherit;
		background: inherit;
	}

/**
 * フェイスマーク
 */
span.smily {
	font-family: "courier new";
	/* 最近の WWW 発のものは proportional font で */
}
span.smily-mono {
}

/**
 * コード
 */
div.code {
	display:        block;
	border:         3px groove;
	line-height:    1.25em;
	padding:        .3em;
}
	code {
	}
	div.code code {
		white-space: normal;
		/* フツー code は pre な気がしないでもない */
	}
	div.code span.element {
		/* HTML 文書の”要素” */
	}
	div.code span.attribute {
		/* HTML の要素の中の属性 */
	}
	div.code span.depracated {
		/* HTML の要素、属性のうち depracated なもの */
	}
	div.code span.additional {
		text-decoration: line-through;
		/* HTML の属性のうち応用的なもの */
	}
	div.code span.content {
		/* HTML の要素の中の内容 */
	}
	div.code span.tag {
		/* HTML 要素の中のタグ */
	}
	div.code span.element-name {
		/* HTML のタグの中の要素名 */
	}
	div.code span.selector {
		/* CSS のセレクタ */
	}
	div.code span.property {
		/* CSS のプロパティなど */
	}
	div.code span.value {
		/* CSS の値など */
	}

/**
 *
 * ページ全体
 * ついでにページ先頭へのアンカーにもなる
 */
div#page {
	max-width:        55em;
	background-color: #f9f9dc;
/*	border:           1px solid #f9f9dc; */
	margin:           0 auto 0 auto;
	height:           100%;
	padding-left:     1em;
	padding-right:    1em;
	position: relative;
}

/**
 * メニュー
 */
div.menu {
	margin: 0;
	width:  11.5em;
/*	height: 100%; */
	float:  left;
}

/**
 * 参考
 */
div.references:before {
	content: 'references';
}

/**
 * 連続したページのナビゲーション
 */
div.sequential-navi {
	padding:     0;
	line-height: 1em;
	height:      1.15em;
	clear:       both;
}

/**
 *
 * ヘッダ
 *
 */
div.header {
	margin-bottom: 0;
/*	margin-left: 12em; */
  clear: both;
}
	div.crumb-list {
		margin-top: 1em;
		font-size:  90%;
	}
	div.title {
		margin-top: 1em;
	}
	div.toc {
		padding:       0;
		margin-bottom: .5em;
		font-size:     90%;
	}
	div.lead {
		width:            auto;
	}
/*	div.toc + div.lead { */
	div.summary div.lead {
/*		width:        48%; */
		margin-left:  0;
	}
/*
toc と lead の両方を入れる場合は必ず summary の中に入れるものとする。
toc + lead の順番とする。
*/
	div.header div.sequential-navi {
		margin-top: 1em;
	}

/**
 *
 * 本文
 *
 */
div.body {
/*	clear: both; */
/*	margin-left: 12em; */
	margin-top:    0;
	margin-bottom: 0;
	border:        1px solid #888888;
	width:         auto;;
	padding:       1em;
	clear:         both;
/*  float: left; */
}
	div.section {
		margin-right: 10em;
		/* 注の分の余白を空けておく */
	}
	div.figure {
		text-align: center;
		/* 説明用の図はセンタリング（これだけだと図とは限らないけど） */
/*		background-color: white;
		border: 1px solid black;
		clear:  both;	 */
	}
/*	div.figure div.img {
		float: left;
		clear: left;
	}
*/
	div.with-note {
		margin:   0;
		height:   auto;
		width:    100%;
		/* この width: 100% を外すと Win IE の表示がおかしくなる */
	}
/*
with-note を position: relative で包含ブロックとして定義し、margin-right で右余白を空けて置く。そこへ position: absolute の right: をマイナスにして注を放り込む。これなら > セレクタが無効の IE でも問題なく動作する。
*/
	div.inbody-note {
	}
	div.append {
	}
	ins {
		margin:          1em;
		padding:         0;
		border:          1px dashed #333333;
		display:         block;
		text-decoration: none;
	}
	/* ins 要素だけだとどういう追記なのか分からないんだけど、title もつけるようにすればいいかな？ */

/**
 * 注
 */
span.annotate {
	vertical-align: super;
	font-size:      80%;
	padding-left:   .3em;
	padding-right:  .3em;
}

/**
 * 脚注
 */
div.note dl, div.note dt, div.note dd {
	border: none;
}
div.note dl:before {
	content: '';
}
div.note dt {
	width:       2.5em;
	float:       left;
	clear:       left;
	font-weight: bold;
}
div.note dd {
	margin-left: 3em;
}
div.note span.note {
	vertical-align: baseline;
}

/**
 *
 * フッタ
 *
 *
 */
div.footer {
	clear:       both;
/*	margin-left: 12em; */
	margin-bottom: 1em;
}
	div.changelog {
	}
	div.changelog dt {
		width: 7em;
		float: left;
		clear: left;
	}
	div.changelog dd {
		margin-left: 7.5em;
	}
	div.footer div.sequential-navi {
	}
	div.lastupdate {
		text-align: right;
		font-size:  90%;
	}