@charset "utf-8";
/* css for 雑記帖 */
     body {
       background: lightyellow; /* navajowhite; */
     }
     h1 {
       text-align: center;
     }
     h2 {
       text-align: center;
     }
     div.center{
       text-align: center;
     }
     div.right{
       text-align: right;
     }
     div.zakkicho{
     }
     div.zakkicho p {
       margin-top: 1.5em;
       margin-bottom: 1em;
       /* margin-left: 4em; */
       white-spcae: normal;
     }
     div.zakkicho h3 {
       background-color:#e5ecf9;
       font-size: 144%; /* x-large */
     }
     div.zakkicho h4 {
       margin-top: 0.5em;
       margin-bottom: -0.5em;
       font-size: 120%; /* large */
       text-decoration: underline;
     }
     span.code {
       background-color: #e5ecf9;
     }
     span.bakafuji{
       font-size: 173%; /* xx-large */
     }
     span.date{
       background-color:#e5ecf9;
       font-size: 144%; /* x-large */
     }

     div.zakkicho table {
         background-color: lightcyan;
         border: 2px solid black;
     }

     div.zakkicho th {
         background-color: crimson;
         border: 1px solid black;
         border-width 1px;
         padding: 0px;
     }

     div.zakkicho td {
         text-align: center;
         border-width 1px;
         padding: 0px;
         border: 1px solid black;
     }

     div.zakkicho blockquote p {
        border-style: solid;
        border-width: 1px 3px 3px 1px;
        background: azure;
        white-space:  normal;
        padding: 0.5em;
     }

    div.zakkicho blockquote p.link {
    /* border-style: solid; */
    /* border-width: 1px 3px 3px 1px; */
    border-bottom:     3px double #ccddff;
    background: azure;
    white-space:  pre;
    padding: 0.5em;
    font-size:         85%;
    font-weight:       bold;
    }
    div.zakkicho blockquote p.link:before {
    content: "引用元: ";
    }

     /* 複数に影響するクラス */
     .caption{
         text-align: center;
         font-size: 120%;
     }

     .indent {
        margin-left: 2em;
     }

     .asciiart {
        font-family: "ＭＳ Ｐゴシック" /*, モナーフォントってどう指定するの? */;
        font-style: normal;
        margin-left: 3em;
        backgraund:  #ffeeff;
     }

     .emphasisl0 { /* 強調表示 色変更とアンダーライン付加 */
        color:red; 
        text-decoration: underline;
     }

     .emphasis { /* 強調表示 */
        color:red; 
        font-size: 144%; 
        font-weight: bold;
     }

     .emphasisl2 { /* さらに強調表示 */
        color:red; 
        font-size: 207%; /* 1.44 ** 2 */
        font-weight: bold;
     }

     .emphasisl3 { /* もっとさらに強調表示 */
        color:red; 
        font-size: 298%; /* 1.44 ** 3 */
        font-weight: bold;
     }
     
     .whisper {  /* ささやきモード */
        color: blue;
        font-size: 80%;
        font-weight: normal;
     }
     .whisperl2 {  /* さらに小声でささやきモード */
        color: blue;
        font-size: 64%;
        font-weight: normal;
     }
     .whisperl3 {  /* さらに小声でささやきモード */
        color: blue;
        font-size: 51%;
        font-weight: normal;
     }

     .code { /* プログラムコード用 */
         backgraund:        #ddddbb;
     }

/*
        hxxk.jp - :before 擬似要素 / :after 擬似要素の活用例
        http://hxxk.jp/2004/11/27/1550
*/
blockquote{
  /* color:             #cccccc; */
  border:            1px solid #cccccc;
  margin:            1em 2em 1em 3em;
  padding:           0 1em;
  /* backgraund:        #eeeeee;*/
  /* backgraund:        azure; */
  backgraund:        #ffeeff;
  }

blockquote[title]:before{
  display:           block;
  /* color:             #cccccc; */
  background:        transparent;
  content:           ""attr(title)" より引用";
  border-bottom:     3px double #ccddff;
  margin-bottom:     0.5em;
  padding-top:       0.5em;
  padding-bottom:    0.5em;
  padding-left:      1em;
  font-size:         80%;
  font-weight:       bold;
  }

blockquote[cite]:after{
  display:           block;
  /* color:             #cccccc; */
  background:        transparent;
  content:           "引用元 URI : "attr(cite)"";
  text-align:        right;
  border-top:        3px double #99bbff;
  margin-top:        0.5em;
  padding-top:       0.5em;
  padding-right:     2em;
  padding-bottom:    0.5em;
  font-size:         80%;
  font-weight:       bold;
  }
pre[title]:before{
  display:           block;
  text-align:        left;
  /* color:             #cccccc; */
  background:        transparent;
  content:         attr(title);
  border-bottom:     3px double #ccddff;
  margin-bottom:     0.5em;
  padding-top:       0.5em;
  padding-bottom:    0.5em;
  padding-left:      1em;
  font-size:         80%;
  font-weight:       bold;
  font-family:       "Trebuchet MS",sans-serif;
  }

ul[title]:before{
  display:           block;
  text-align:        left;
  /* color:             #cccccc; */
  background:        transparent;
  content:         attr(title);
  border-bottom:     3px double #ccddff;
  margin-bottom:     0.5em;
  padding-top:       0.5em;
  padding-bottom:    0.5em;
  padding-left:      1em;
  font-size:         80%;
  font-weight:       bold;
  font-family:       "Trebuchet MS",sans-serif;
}

pre em{
  color:             #ff0000;
  }
/*
 blockquote.cite {
  border-style: solid;
  border-width: 0px 0px 0px 4px;
  margin-left: 3em;
  padding: 0.5em;
  color: navy;
  background-color: RGB(245,245,245);
  text-color: #00CCFF;
 }
*/
 pre { 
  border-style: solid;
  border-width: 1px 3px 3px 1px;
  background: azure;
  white-space:  pre;
  overflow: auto; 
  padding: 0.5em;
 }

 pre.code {
  width: 90%;
  overflow: auto; /* scroll */;
  line-height: 1.2em;
 }
 
 .code {
   backgraund:        #ddddbb;
 }
 .g-tools_title {font-size: 100% /* medium; */}
 .g-tools_body  {font-size: 100% /* medium; */}
 .g-tools_img   {font-size: 83%; /* small */}
 .g-tools_by    {font-size: 83%; /* small */}
/* style="padding:10px;width:150px;color:white;background-color:#7B9AE7"> */
/*
書き方や環境によってバラバラ…　表のセンタリング方法の謎 - ［ホームページ作成］All About
http://allabout.co.jp/computer/hpcreate/closeup/CU20050806A/index3.htm
*/
   div.ctable {
      text-align: center;     /* IEでセンタリングさせる方法 */
   }
   div.ctable table {
      margin: auto;     /* 標準のセンタリング方法 */
      text-align: left;     /* IE用方法の弊害対策用 */
   }
<!--
background: #60A9F2;
background: #C40000;
background: #EFDC2E;
background: #EF7575;
background: #80B020;
background: #CCFFCC;
background: #90EE90;
background: #F8F7FC;
-->

/*
 * based upon
 *  http://www.akatsukinishisu.net/itazuragaki/2001_10.html#ruby_for_Mozilla_3
 */
ruby {
  display:inline-table;
  text-align:center;
  white-space:nowrap;
  text-indent:0;
  text-align:center;
  margin: 0;
  vertical-align:-15%;
}

/* ルビベース */
ruby>rb,ruby>rbc {
  display:table-row-group;
  text-align:center;
  /* line-height:90%; */
}

/* 前側ルビテキスト */
ruby>rt,ruby>rbc+rtc {
  display:table-header-group;
  font-size:70%;
  line-height:30%;
  letter-spacing:0;
  text-align:center;
}

/* 後側ルビテキスト */
ruby>rbc+rtc+rtc {
  display:table-footer-group;
  font-size:70%;
  line-height:30%;
  letter-spacing:0;
  text-align:center;
}

/* 複雑ルビテキスト */
rbc>rb,rtc>rt {
  display:table-cell;
  letter-spacing:0;
  text-align:center;
}

rtc>rt[rbspan] {
  display:table-caption;
  text-align:center;
}

/* ルビ括弧 */
rp {
  display:none;
}

/* もんたメソッド

.lf_monta {
 color:black;
 background-color:black;
 cursor: pointer;
}

*/

/* ######### */

/* 
ヽ( ・∀・)ノくまくまー(2006-09-07)
http://wota.jp/ac/?date=20060907

● CSSでポップアップ

ちょっとした説明文をポップアップするには "title" 属性が便利であるが、

    * ブラウザによっては複数行表示できない
    * 画像を含んだコンテンツは表現できない

という問題がある。かと言ってJSを持ち出すのも面倒だと思っていたら、CSSのみでも実現できるらしい。そのまとめ。(via RailsChat)
*/

.popup .tips {
  display         : none;
  position        : absolute;
}

.popup a:hover {
  position:relative;
}

.popup a:hover .tips{
  display          : block;
  top              : 10px;
  left             : 20px;
  white-space      : nowrap;
  border           : 1px solid black;
  background-color : #FFFFAA;
}

/* 
これにより "popup" 内は、"a" リンク部分のマウスオーバー時に、同リンク中の "tips" クラスの内容が表示される。
HTML

<div class="popup">
ミハエル・シュー
<a>
<div class="tips"><pre>
　　　 　 ☆ノハヽ　　　　　
ブロロロ 　从 ’ｗ’)　　
三三　〓（　 0┳0　　　
三　 　◎'━◎┻ ）
ミハエル・シュー・マイハ巡回中！
</pre></div>
[kwsk]
</a>
</div>

[実行結果] ("[kwsk]" 部分がリンク)
ミハエル・シュー

　　　 　 ☆ノハヽ　　　　　
ブロロロ 　从 ’ｗ’)　　
三三　〓（　 0┳0　　　
三　 　◎'━◎┻ ）
ミハエル・シュー・マイハ巡回中！

[kwsk]
● ハマリ
IE はこの形式を認識しない

a.popup:hover {
*/