/*
    default.css
*/

html {
    scroll-behavior: smooth;
}

body {
    background-color: white;
    color: black;
    font-family: -apple-system, BlinkMacSystemFont,
      "Helvetica Neue", Arial,
      "Hiragino Kaku Gothic ProN", "Hiragino Sans",
      "BIZ UDGothic", Meiryo,
      sans-serif;
    text-align: left;
    margin-top: 20px;
    margin-left: 2%;
    margin-right: 2%;
    line-height: 1.3;
    /* 和文と欧文の間に自動で空きを入れる。プログレッシブエンハンスメント
       (未対応ブラウザでは無視される) */
    text-autospace: normal;
}

/*
span.menuitem {
    width: 3.9em;
    text-align: center;
    padding: 0px 2px;
    margin: 0px;
    color: white;
    background-color: #ddd;
    margin-right: 2px;
}
div.menu a:link,
div.menu a:visited {
    width: 3.9em;
    padding: 0px 2px;
    margin: 0px;
    color: #33a;
    background-color: #ddd;
    text-decoration: none;
}
div.menu a:active,
div.menu a:focus,
div.menu a:hover {
    width: 3.9em;
    padding: 0px 2px;
    margin: 0px;
    color: #fff;
    background-color: #33a;
    text-decoration: none;
}
span.menuseparator {
    width: 1em;
    padding: 0px;
    margin: 0px;
}
*/

address {
    text-align: right;
    font-size: x-small;
}

h1 {
    font-size: 200%;
    text-align: left;
    color: white;
    background-color: #33a;
    padding: 0.4em;
    margin: 0.2em 0em 0.5em 0em;
}

img.sitelogo {
    vertical-align: middle;
}

h2 {
    font-size: 150%;
    text-align: left;
    border-left: 10px solid #33a;
    padding-left: 0.5em;
    margin-top: 1.5em;
    margin-bottom: 0.5em;
}

h3 {
    font-size: 150%;
    text-align: left;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

/* tmp */
h4 {
    font-size: 120%;
    text-align: left;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

/* never use */
h5, h6 {
    background-color: red;
}

p {
    line-height: 1.4;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    margin-left: 0px;
}

span.kindinfo {
    text-align: right;
    margin-left: 8em;
}

span.compileerror {
    color: red;
    font-weight: bold;
}

code, pre, tt {
    font-size: 90%;
    font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
    /* コード内では和欧文間の自動スペースを入れない */
    text-autospace: no-autospace;
}

/* 地の文中のインラインコード(<code>, <tt>)に淡い背景を敷いて、地の文との
   区別をはっきりさせる。色は pre の背景(#f2f2f2)と同系統だが、それより
   少し薄くして地の文中では主張しすぎないようにする */
code, tt {
    background-color: #f5f5f5;
    padding: 0.1em 0.3em;
    border-radius: 3px;
}

/* pre の中の code/tt は pre 自体がブロックとして背景色を持つため、上の
   ルールをここで打ち消して二重に背景・パディングがつかないようにする
   (pre 内の見た目は従来どおり) */
pre code,
pre tt {
    background-color: transparent;
    padding: 0;
    border-radius: 0;
}

/* RUN/COPY ボタンは pre の外のツールバー行(script.js が生成)にあるので、
   pre の中身は四辺とも均等に padding をとれる(上だけ 0 にして中身が
   上端に張り付く、以前のボタン内蔵ハックは不要になった) */
pre {
    line-height: 1.1;
    background-color: #f2f2f2;
    padding: 1.1em;
    font-weight: normal;
    overflow: auto;
}


/* pre の直前に密着するヘッダー行(script.js が生成)。コード部分より
   ひと段暗い背景でコードブロックと一体に見せつつ(白い帯として浮くと、
   コードの上の隙間が広く見える)、コード部分と同色の caption タブや
   白背景のボタンが埋没しないようにする。左端に caption のタブ、右端に
   RUN/COPY のボタン群を置く */
.highlight__toolbar {
  display: flex;
  align-items: flex-end;
  margin: 1em 0 0;
  padding: 0.25em 0.25em 0 0.25em;
  background-color: #e6e6e6;
}
.highlight__toolbar + pre {
  margin-top: 0;
  /* ヘッダー行が上の余白を兼ねるので、上 padding は控えめにする。
     以前は <code> 直後の改行由来の空行が上余白を足していたが、
     出力側の修正(#254)で無くなったため、そのぶんここで少し広げる */
  padding-top: 0.75em;
}
/* RUN の出力欄: 入力欄の pre と出力欄(ヘッダー行+pre)を密着させて
   1つのブロックに見せる(js/run.js が付与)。境には 2px だけ白を挟み、
   出力欄のヘッダー(「実行結果」タブ+COPY)が入力欄の枠に貼り付いて
   見えないよう区切る */
.highlight--with-output {
  margin-bottom: 0;
}
.highlight__toolbar--attached {
  margin-top: 2px;
}

/* ツールバー右端のボタン置き場。ボタン間の隙間のカーソル形状と
   選択不可はここが引き受ける */
.highlight__button-group {
  margin-left: auto;
  cursor: default;
  -webkit-user-select: none;
  user-select: none;
}

/* for RUN (js/run.js, statichtml --run-ruby-wasm)。
   ヘッダー行の灰色に埋没しないよう、白背景+枠線でボタンらしくする */
.highlight__run-button {
  margin: 0 0.5em 0.25em 0;
  padding: 0.25em 0.5em;
  background-color: #fff;
  cursor: pointer;
  border: 1px solid #999;
  border-radius: 4px;
  font: inherit;
}
.highlight__run-button:hover {
  background-color: #EE8;
}
.highlight__run-button[disabled] {
  background-color: #070;
  border-color: #070;
  color: white;
  cursor: wait;
}
.highlight__run-output {
  width: 100%;
  box-sizing: border-box;
  background-color: #f2f2f2;
  margin-top: 0;
  white-space: pre-wrap;
}
.highlight__run-output--error {
  color: #a00;
}
pre.highlight.ruby[data-editing="true"]:focus-within {
  outline: auto;
}
/* 編集時は code をブロック化して pre の内容幅いっぱいをクリック・
   編集対象にする(内容の外側のクリックは js/run.js が code に
   フォーカスを移す) */
pre.highlight.ruby[data-editing="true"] > code {
  display: block;
}
pre.highlight.ruby[data-editing="true"] > code:focus {
  outline: none;
}

/* for COPY(highlight__button-group の中に入る)。RUN と同じ見た目 */
.highlight__copy-button {
  display: inline-block;
  margin-bottom: 0.25em;
  padding: 0.25em 0.5em;
  background: #fff;
  cursor: pointer;
  border: 1px solid #999;
  border-radius: 4px;
}
.highlight__copy-button:hover {
  background: #EE8;
}
.highlight__copy-button::after {
  content: "COPY"
}
.highlight__copy-button.copied {
  background: #070;
  border-color: #070;
  color: white;
}
.highlight__copy-button.copied::after {
  content: "COPIED"
}
.highlight__copy-text {
  position: fixed;
  left: -1000px;
}

/* for ?(RUN のヘルプページへのリンク。highlight__button-group の中で
   COPY の右に入る)。ボタン(RUN・COPY)と違いページ遷移するリンクなので、
   色・ホバーはサイト共通のリンクの見た目(a のスタイル)に任せて、
   ここでは丸囲みの形と配置だけ整える */
.highlight__help-link {
  display: inline-block;
  box-sizing: border-box;
  width: 1.5em;
  height: 1.5em;
  line-height: calc(1.5em - 2px);
  text-align: center;
  /* ただの ? だとクリックできると気付きにくいので、丸囲みはてなにして
     ヘルプアイコンらしくする。枠は currentColor なので、リンク色にも
     ホバーの反転(白文字+#33a 背景)にもそのまま追従する */
  border: 1px solid currentColor;
  border-radius: 50%;
  margin: 0 0.25em 0.25em 0.5em;
}

/* サンプルコードのキャプション。pre の上に密着したタブとして表示する
   (上だけ角丸でタブらしく)。script.js がツールバー行の左端に取り込む。
   下のコード部分と同じ背景色にして「つながったタブ」に見せる(ヘッダー
   行のほうがひと段暗いので埋没しない) */
.caption {
    display: inline-block;
    padding: 0.2em 0.5em;
    background: #f2f2f2;
    margin: 1em 0 0;
    border-radius: 6px 6px 0 0;
}
/* JS 無効時など、ツールバー化されず pre の直前に残った場合の密着 */
.caption + pre {
    margin-top: 0;
}
.highlight__toolbar > .caption {
    margin: 0;
}

blockquote {
    background-color: transparent;
    padding: 4px;
    margin-left: 3em;
    font-weight: normal;
}

ul {
    margin-left: 0px;
    padding-left: 2em;
}

li {
    margin-left: 0px;
    padding-left: 0px;
}

ol li {
    margin-bottom: 10px;
}

dl {
    margin-left: 0em;
}

dt {
    font-weight: bold;
}

dl.methodlist dt {
    font-family: sans-serif;
}

dd {
    margin: 0.3em 0em 1em 4em;
}

table {
    border-collapse: collapse;
}

th {
    text-align: left;
    vertical-align: top;
    background-color: #AAC;
    border: 3px solid white;
    padding: 0.3em;
}

td {
    text-align: left;
    vertical-align: top;
}

table.entries {
    width: 100%;
    height: 100%;
}

table.entries tr {
    /* border: 1px solid gray; */
    text-align: left;
    vertical-align: top;
}

td.signature {
    padding: 0;
    margin: 0;
    background-color: #DDD;
    border: 3px solid white;
    width: 30%;
    height: 100%;
}

td.signature a {
    display: block;
    padding: 0.3em;
    box-sizing: border-box;
}

td.signature a:only-child {
    height: 100%;
}

td.description {
    padding: 0.3em;
    background-color: #EEE;
    border: 3px solid white;
}

td.library {
    width: 6em;
    padding: 0.5em;
    background-color: #DDD;
    border: 3px solid white;
}

a {
    font-weight: bold;
    text-decoration: none;
}
a:link {
    color: #33a;
    background-color: transparent;
}
a:visited {
    /* color: #666666; */
    color: #33a;
    background-color: transparent;
}
a:hover, a:focus, a:active {
    color: #fff;
    background-color: #33a;
}

a.external {
    background: transparent url(images/external.png) no-repeat scroll right center;
    padding: 0 27px 0 0;
}

a.external:visited {
    /* color: #666666; */
    color: #33a;
    background-color: transparent;
}
a.external:hover, a.external:focus, a.external:active {
    color: #fff;
    background-color: #33a;
}

span.permalink {
    float: right;
    font-weight: normal;
}

form {
    padding: 0px;
    margin: 0px;
}

hr {
    color: #33a;
    height: 1px;
}

.inline-breadcrumb-list {
    display: inline-block;
    list-style-type: none;
    margin-bottom: 0;
    margin-top: 0;
    padding-left: 0;
}

.inline-breadcrumb-list li {
    display: inline-block;
    margin-bottom: 0;
}

.inline-breadcrumb-list li + li::before {
    content: ">";
    padding-left: 0.1rem;
    padding-right: 0.1rem;
}

.inline-ancestors-list {
    display: inline-flex;
    flex-direction: row-reverse;
    list-style-type: none;
    margin-bottom: 0;
    margin-top: 0;
    padding-left: 0;
}

.inline-ancestors-list li {
    margin-bottom: 0;
}

.inline-ancestors-list li + li::after {
    content: "<";
    padding-right: 0.3rem;
}

.class-toc {
    list-style: none;
    margin: 0.5em 0;
    padding: 0;
    column-gap: 1em;
    column-width: 10em;
    column-rule: 1px dotted #BBB;
}

.class-toc > li {
    display: inline-block;
    padding-left: 1em;
    text-indent: -1em;
    word-break: break-all;
    break-inside: avoid;
    width: 100%;
    box-sizing: border-box;
}

@media print {
    body {
        font-family: osaka,'MS Mincho',serif;
        line-height: 1.5;
    }
    div.menu {
        display: none;
    }
    div.footer {
        display: none;
    }
    h1 {
        color: black;
        background-color: white;
        border-bottom: 2px solid #33a;
        padding-bottom: 0em;
    }
    a, a:link, a:visited {
        color: #33a;
        font-weight: normal;
    }
}

#top_search {
 position: absolute;
 top: 15px;
 right: 10px;
}

/* EOL 警告バナー(statichtml --eol-warning、body の先頭に入る)。
   #rurema-topbar と同じく負マージンで body の余白(上 20px・左右 2%)を
   突き破って全幅にする。下マージン 20px は直後の topbar の margin-top -20px と
   相殺され、topbar がバナーの真下に密着する(バナーが無いページでは
   topbar 自身の負マージンが従来どおり body の余白を打ち消す) */
.eol-warning {
    background-color: #aa3333;
    color: white;
    padding: 0.4em 2%;
    margin: -20px -2% 20px;
}

.eol-warning a {
    color: white;
    text-decoration: underline;
}

@media only screen and (max-width:425px) {
    table.entries tr {
        display: block;
    }
    td.signature {
        display: block;
        width: inherit;
        text-indent: 0em !important;
    }
    td.description {
        display: block;
    }
    dd {
        margin: 0.3em 0em 1em 1em;
    }
    p {
        overflow-wrap: break-word;
    }
}

/* CC BY ロゴ画像はデフォルトの vertical-align: baseline だと下に文字の
   ディセンダ分の隙間ができ、横のリンクより浮いて見える上、リンクの
   ホバー背景がその隙間ぶん右・下にはみ出して見える。画像を a 要素の
   下端に揃えて解消する */
#footer img {
    vertical-align: bottom;
}

/* CC BY ロゴと無関係な「フィードバックを送る」リンクが近すぎるので、
   ひと呼吸あける */
#feedback-link {
    margin-left: 0.5em;
}

/* since/until バージョンバッジ(bitclust#132 P3)。地の文から浮かないよう
   リンク色(#33a)や EOL バナー(#aa3333)と同系統の抑えた配色にする */
span.method-since-badge,
span.method-until-badge {
    display: inline-block;
    margin-left: 0.6em;
    padding: 0 0.6em;
    border-radius: 1em;
    font-size: 75%;
    font-weight: normal;
}
span.method-since-badge { background-color: #e6f2e6; color: #2d6a2d; }
span.method-until-badge { background-color: #f7e6e6; color: #aa3333; }