@charset "Shift_JIS";

@import url(ie.css);

/* 
   ツキイチ CSS の修正案（パッチ）。
   このパッチ CSS をツキイチ HTML に適用すれば、
   Mozilla / WinIE5.x / MacIE5.x / Opera6 の
   すべてにおいて、ほぼ同じ表示結果が得られます。
   WinIE6 については未確認ながら、きっとオッケー。

   つまり、 ie.css をこの CSS に記述したように修正すれば、
   NN4.x 以外の主要 UA ほとんどに対応できる単一の CSS が
   出来上がりますですよ。
   NN4.x に対しては、既知のメジャーな回避技を使えば OK 。
   そしたらもう、 style.js は NN4.x 用 CSS を読ませる処理
   だけにしてよくなる。
*/

ul
	{
	/* ul の padding-left 初期値は UA によって違います。
	   よって全ての UA で、マーカーも含めたリスト項目の
	   表示位置を同じにするためには、
	   margin-left をいじるよりも、padding-left を
	   調整するほうが容易で確実。*/
	
	padding: 0;

	/* list-sytle-type が none 以外の場合であるなら
	   padding-left は 2em 〜 4em くらいが妥当かなとか。 */

	/* list-style-type: circle; */
	/* padding: 0 0 0 4em; */
	}

div#content
	{
	/* width には当然 margin 分は含まれませんから
	   左右 margin を 10%, width を 100% としたら
	   当然のように表示幅が 120% になるはず。
	   つまり、画面からはみ出しちゃう。
	   まぁ WinIE はアホなので、その正しい解釈ができない。

	   WinIE どうのは別として、左右 margin を決めたら、
	   たいていは width を具体的に明示する必要は無いです。 */

	width: auto;

	/* 以下は div#content li を float にする場合。

	   float されたモノは「通常フロー」から剥がされる、
	   つまり、float ボックスは存在しないかのように
	   扱われます。
	   この div の内包子要素がすべて float されてたなら、
	   この div は高さがゼロになるのが本来のハズ。
	   ゆえに height をどうにか与えないと、困るハズ。
	   WinIE は余計なおせっかいをするから、困らないんだけど。

	   以下のようにすれば妥当な気がするけども、
	   ウィンドウサイズによっては二行以上になることも
	   考えられるから、height を明示しなきゃいけない
	   ような手段 (float) はやめたほうがいい気配。 */

	/* height とか min-height とか : 1em とか; */
	}

div#content li
	{
	/* 以下は float を使う場合
	   float には width の明示が必須…。 */
	/* float: left; */
	/* width: 6em; */

	/* … というように、ここで float を使うのは
	   異様にめんどくさいことになるので
	   なるべくなら避けたい気分。 */

	/* float を使わなで行くなら */
	float: none;
	margin: 0 0 0 1em;
	display: inline;
	}

div#about
	{
	/* 親要素と子要素の余白を調整するときは
	   子要素の margin を調整するよりも、親要素の
	   padding を調整するのが普通はラク…なんだけど…。
	
	  「左右 padding を width には含まない」のが
	   CSS2 仕様と DOCTYPE スイッチの標準モードなわけで。
	
	   そうじゃない WinIE5.x 等とのかねあいを考えると、
	   width を明示したブロックでは左右 padding を 0 にして
	   子要素の左右 margin で左右余白を調整したほうが得策
	   …という判断。 */
	
	padding: 100px 0 0;
	}

div#about h3
	{
	width: auto; /* div#content の width と同じ理由 */
	margin-top: 0; /* 上余白は親要素の padding で調整したから */
	}

div#about ul
	{
	margin: 0.3em 0; /* 余白を親要素の padding で調整したから */
	}

div#about ul,
div#about p 
	{
	/* そして親要素との間の左右余白調整をここに列記 */
	margin-left: 0.1em;
	margin-right: 0.1em;
	}	

div#body,
div#body_top
	{
	width: auto; /* div#content の width と同じ理由 */
	}

div#server,
div#body,
div#body_top 
	{
	/* float は後続要素のテキストを回り込ませても、
	   ブロック要素自体は回り込まない。
	   つまり、 これら div の margin-right をよしなに
	   指定しないと、 border が float ブロックである
	   div#about の下に埋まるハズ。
	   div#about の width が 180px なので、たとえば以下とか。 */
	margin-right: 190px;
	}

div#body ul,
div#body_top ul
	{
	/* これらの ul はマーカー表示を復活させているので
	   そのへんの調整。 */
	margin: 0.1em 0;
	padding-left: 4em;
	}



/* 以下 Mozilla 用のお遊びをここに列記。 */

div.data
	{
	-moz-border-radius: 0 1em 0 0;
	}

div.block
	{
	-moz-border-radius: 2em 0 0 0.5em;
	}

div.diary
	{
	-moz-border-radius: 0 1em 1em 0;
	}

p.ex
	{
	-moz-border-radius: 1em 0 1em 0;
	}