/****************************
** ＩＤ別カスケード設定群  **

**  2005.03.14 By Kitani.  **
**  http://jigsaw.w3.org/css-validator/で検証済み(CSS2) **
*****************************/

/* 2011.06.28: What's New */
div#history dd{
 font-size: 85%;
}
div#history dt{
 font-size: 90%;
}
div#history small{
  margin-left: 1em;
}


/** ID [title]: タイトル部分 **/
div#title{
  border-style: none;
  margin-left: auto; 
  margin-right: auto;
  text-align: center;
}

/** ID [date]: 日付表示 **/
div#date{
  border-style: none;
  margin-left: auto; 
  margin-right: auto;
  text-align: center;
}

/** ID [abstract]: 概要のため <p></p>タグを利用し、インデントを設定する。 **/
div#abstract p{ text-align: left; margin:0; text-indent: 1em;}
div#abstract p.center{ text-align: center; margin:0; text-indent: 0em;}
div#abstract p.wide-center{ text-align: center; margin:1em 0; text-indent: 0em;}


/** ID [exp]: 説明のため。<dl></dl>を利用する。 **/
div#exp{ border-style: none;  margin-left: 10%;  margin-right: 10%; }
div#exp dl{ margin-left: -2em; }
div#exp dt{ font-size: 110%; font-weight: bold; border-width: 0 0 1px 0; border-style: dashed; border-style: #000000; margin-bottom: 0.5em; }
/* div#exp dd{ font-size: 90%; font-weight: normal; padding-bottom: 0.5em; width:600px; margin-left: 3em; } */
/* 2011.05.04 */
div#exp dd{ font-size: 90%; font-weight: normal; padding-bottom: 0.5em; width: 95%; margin-left: 3em; }
div#exp strong{ font-size: 100%; }
div#exp img{ margin-top: 0.5em; margin-bottom: 0.5em; padding-left: 2em;  border-style: none;}
div#exp img.right{ margin-top: 0.5em; margin-bottom: 0.5em; padding-left: 2em;  border-style: none; float: right;}
div#exp ul{ margin-left: -1em; }
div#exp ol{ margin-left: -1em; }
div#exp li{  font-size: 100%; font-weight: normal; width:600px; }
div#exp a{ font-size: 110%; }
div#exp p{ clear: both; text-indent: 1em;}

div#exp table{
  margin-top:   auto; 
  margin-left:  auto;
  width: 100%;
  border-collapse: separate;
  empty-cells: hide;
  border: 3px solid gray;
}
div#exp table th{
 border: 1px solid gray;
 text-align: center;
 vertical-align: middle;
}
div#exp table td {
 border: 1px solid gray;
 text-align: left; 
 vertical-align: middle;
}
div#exp table strong{ font-size: 100%; }
div#exp table img{ border-style: none;}
div#exp table a{ font-size: 100%; }
div#exp table col.head{ width:20%; }


/** ID [topics]: トピックスのため。<dl></dl>を利用する。 2008.01.11**/
div#topics{ border-style: none;  margin-left: 10%;  margin-right: 10%; }
div#topics dl{ margin-left: 0; }
div#topics dt{ font-size: 100%; font-weight: bold; border-width: 0 0 1px 0; border-style: dashed; border-style: #000000; margin-bottom: 0.5em; }
div#topics dd{ font-size: 90%; font-weight: normal; padding-bottom: 0.5em; width:600px; margin-left: 3em; }
div#topics strong{ font-size: 100%; }
div#topics img{ margin-top: 0.5em; margin-bottom: 0.5em; padding-left: 2em;  border-style: none;}
div#topics img.right{ margin-top: 0.5em; margin-bottom: 0.5em; padding-left: 2em;  border-style: none; float: right;}
div#topics ul{ margin-left: -1em; }
div#topics ol{ margin-left: -1em; }
div#topics li{  font-size: 100%; font-weight: normal; width:600px; }
div#topics a{ font-size: 110%; }
div#topics p{ clear: both; text-indent: 1em;}
div#topics table caption{  font-weight: bold; }



/** ID [left_exp]: 説明のため。<dl></dl>を利用するが，左寄せを使う。 **/
div#left_exp{ border-style: none;  }
div#left_exp dt{ font-size: 110%; font-weight: bold; }
div#left_exp dd{ font-size: 90%; font-weight: normal; padding-bottom: 0.2em; width:600px;}
div#left_exp strong{ font-size: 100%; }
div#left_exp img{ margin-top: 0.5em; margin-bottom: 0.5em; padding-left: 2em;  border-style: none;}
div#left_exp li{  font-size: 100%; font-weight: normal; width:600px; }
div#left_exp a{ font-size: 100%; }
div#left_exp p{ margin-top: -0.1em; margin-left: 1em; }

/** ID [img_exp]: イメージの説明のため。**/
/** <span>絵のキャプション</span><p>絵そのもの</p>を利用する。 **/
/** 絵は320x240pxの二段組みを想定 **/
div#img_exp{ border-style: none;  margin-left: auto;  margin-right: auto; height: auto; width: 670px;}
div#img_exp img{ margin-top: 0.5em; margin-bottom: 0.5em; border-style: none;}
div#img_exp a{ font-size: 100%; }

  /** p1, p2はそれぞれの第１，第２段落を意味する。
      <table>
	<tr><td>第１段落</td><td>第２段落</td></tr>
      </table>
　　　と同一ということ。
  **/
div#img_exp p.p1{ width: 320px; height: auto; float: left;  }
div#img_exp p.p2{ width: 320px; height: auto; float: right; }



/** ID [table4]: ４段組テーブル<td></td>が四つの場合**/
/** <span>絵のキャプション</span><p>絵そのもの</p>を利用する。 **/
/** 絵は160x120pxの４段組みを想定 **/
div#table4{ 
   border-style: none; width: 660px;
   margin-left: auto;  margin-right: auto; height: auto;
}
div#table4 img{ margin-top: 0.5em; margin-bottom: 0.5em; border-style: none;}
div#table4 a{ font-size: 100%; }

  /** p1, p2はそれぞれの第１，第２段落を意味する。
      <table>
	<tr><td>第１段落</td><td>第２段落</td></tr>
      </table>
　　　と同一ということ。
  **/
div#table4 p.p1{
   width: 160px; height: auto; float: left;
   text-align: center;
}
div#table4 p.p2{
   width: 160px; height: auto; float: left; margin-left: 5px;
   text-align: center;
}
div#table4 p.p3{
   width: 160px; height: auto; float: left; margin-left: 5px;
   text-align: center;
}
div#table4 p.p4{
   width: 160px; height: auto; float: right; margin-right: 5px;
   text-align: center;
}
/**
*** ID [table]: 説明のため。<table></table>を利用する。 ***
**/
div#table{
  margin-top:   auto; 
  margin-left:  15px;
  margin-right:  15px;
}
div#table table{
/*  border-collapse: collapse; */
  border-collapse: separate;
  empty-cells: hide;
  border: 3px solid gray;
}
div#table th {
 border: 1px solid gray;
 text-align: center; 
}
div#table td {
 border: 1px solid gray;
 text-align: center; 
}
div#table strong{ font-size: 100%; }
div#table img{ border-style: none;}

div#table a{ font-size: 100%; }

/**
*** ID [table-left]: リスト表示なテーブル<table></table>を利用する。 ***
**/
div#table-left{
  margin-top:   auto; 
  margin-left:  15px;
  margin-right:  15px;
}
div#table-left table{
/*  border-collapse: collapse; */
  border-collapse: separate;
  empty-cells: hide;
  border: 3px solid gray;
}
div#table-left th {
 border: 1px solid gray;
 text-align: center;
 vertical-align: middle;
}
div#table-left td {
 border: 1px solid gray;
 text-align: left; 
 vertical-align: middle;
}
div#table-left strong{ font-size: 100%; }
div#table-left img{ border-style: none;}

div#table-left a{ font-size: 100%; }

div#table-left col.head{ width:20%; }

/**
*** ID [table-install]: インストール記録用テーブル<table></table>を利用する。 ***
**/
div#table-install{
  margin-top:   auto; 
  margin-left:  15px;
  margin-right:  15px;
}
div#table-install table{
/*  border-collapse: collapse; */
  border-collapse: separate;
  empty-cells: hide;
  border: 3px solid gray;
}
div#table-install th {
 border: 1px solid gray;
 text-align: left; 
 width: 20%;
}
div#table-install td {
 border: 1px solid gray;
 text-align: left; 
}
div#table-install strong{ font-size: 100%; }
div#table-install img{ border-style: none;}

div#table-install a{ font-size: 100%; }

div#table-install pre{
  border: solid gold 2px;
  text-align: left;
}

/**
*** ID [table-game]: ゲーム用テーブル<table></table>を利用する。３列の場合 ***
**/
div#table-game{
  margin-top:   auto; 
  margin-left:  15px;
  margin-right:  15px;
}
div#table-game table{
/*  border-collapse: collapse; */
  border-collapse: separate;
  empty-cells: hide;
  border: 3px solid gray;
}
div#table-game th {
 border: 1px solid gray;
 text-align: left; 
}
div#table-game td {
 border: 1px solid gray;
 text-align: left; 
}
div#table-game strong{ font-size: 100%; }
div#table-game img{ border-style: none;}

div#table-game a{ font-size: 100%; }

div#table-game pre{
  border: solid gold 2px;
  text-align: left;
}

/**
** table-game内で魔法説明をするためのもの [id=table-game]内で利用 **
**/
div#magic th {
 border: 1px solid gray;
 text-align: left; 
 width: 20%;
}


/**
*** ID [table-c]: 位置整頓のため<table></table>を利用する。 ***
**/
div#table-c{
  margin-top:   auto; 
  margin-left:  15px;
  margin-right:  15px;
}
div#table-c table{
  border-collapse: separate;
  empty-cells: hide;
  border: 0px solid gray;
}
div#table-c th {
 border: 0px solid gray;
 text-align: center; 
 vertical-align: top;
 width: 100px;
}
div#table-c td {
 border: 0px solid gray;
 text-align: left; 
 width: 100px;
}
div#table-c td.top {
 border: 0px solid gray;
 text-align: left; 
 width: 100px;
 valign: top;
}
div#table-c td.buttom {
 border: 0px solid gray;
 text-align: left; 
 width: 100px;
 valign: buttom;
}
div#table-c td.center {
 border: 0px solid gray;
 text-align: center; 
 width: 100px;
}
div#table-c td.right {
 border: 0px solid gray;
 text-align: right; 
 width: 100px;
}
div#table-c strong{ font-size: 100%; }
div#table-c img{ border-style: none;}

div#table-c a{ font-size: 100%; }