﻿/****************************
＊探索拠点用CSS [共通]
Author&copyright:@skrige

ClipChat(cc.428.net)さんところのルームテキスト用CSSです。
・折りたたみボックス
・タグの太字化
・URL記入によるレイアウト崩れの対策
・テーブルタグ構造用のCSS
・ツールチップ表示
などが含まれます。
※単独では使用できません。別途色の設定cssが必要です。
ClipChat内での利用であれば自由に利用できます。
改造は自己責任でお願いします。ないしアイデア貰えれば検討するかも。

*****************************/
/***ページ全体***/

/* タグを見やすくする (文中表示用)*************************/
.tag{
	font-weight: bold;
}
/* URL対策 */
.talkarea{ word-break: break-all; word-wrap: break-word; }

/* リンクタグの改行対策 */
link+br{display:none;}

/*===============================================================*/
/*** ルームテキスト用  ***/
/*ルームテキスト全体を囲って要素指定をしやすいようにする*/
.roomtext{
	padding:0;
	margin:0;
	width:100%;
	box-sizing:border-box;
}
/*自動改行を1個だけ消す*/
.roomtext>br:first-child{
	display:none;
}
/* ルームリンクをボタン化する */
.roomtext a.tag{
	display:inline-block !important;
	width:auto;
	line-height:1.2em;
	height:1.2em;
	padding:0.1em 0.6em;
	margin-right:0.4em;
}
.roomtext a.tag:hover{
}

memo,.y_memo{
	font-size:80%;
	font-weight:normal;
}

/* 横に並べる用========== */
/* display:inline-block方式*/
/*
 <div class="parentbox">
  <div class="halfbox">左</div>
  <div class="halfbox">右</div>
</div>
*/
	div.parentbox{/* 自動改行およびホワイトスペース除去枠 */
		letter-spacing:-1em;
	}
	div.parentbox>br:first-child{display: none;} /* ボックス内自動改行対応 */
	div.parentbox+br{display: none;}/* ボックス後の自動改行対策 */
	/*　約半分サイズ */
	div.halfbox{
		display:inline-block;
		padding:0;
		margin:0;
		width:50%;
		box-sizing:border-box;
		vertical-align: top;
		letter-spacing:0;
	}
	.thirty{width:30% !important;}
	.forty{width:40% !important;}
	.fifity{width:50% !important;}
	.sixty{width:60% !important;}
	.seventy{width:70% !important;}
	div.halfbox>br:first-child{display: none;} /* ボックス内自動改行対応 */
	div.halfbox+br{display: none;}/* ボックス後の自動改行対策 */
/* display:table方式*/
/* 実装未定 、とりあえず動くはず？*/
/*
 <div class=tablebox">
  <div class="box">左</div>
  <div class="halfbox">右</div>
</div>
*/
	div.tablebox{
	    display:table;
	    table-layout:fixed;		
	}
	div.tablebox div.cell{
	    display:table-cell;
	    vertical-align:middle;
	}
	div.tablebox div.cell70{
	    width:70%;
	    display:table-cell;
	    vertical-align:middle;
	}

/* 個別ルームリンク用 */
div.roomlinks{
position:relative;
padding-bottom:1em !important;
line-height:1.4em;
}
/* メモを右下にくっつける */
div.roomlinks>.y_memo{
	font-size:80%;
    font-weight:normal;
	position: absolute;
	bottom: 0%;
	right: 5px;
}
/* 少し白い背景のボックス */
div.y_nakami {
	margin: 0;
	background:rgba(255,255,255,0.4);
	border:1px solid rgba(0,0,0,0.4);
	padding:0.4em 1em; 
}
div.y_nakami>br:first-child{display: none;} /* ボックス内の自動改行１個めを削除 */
div.y_nakami+br{display: none;}/* ボックス後の自動改行対策 */

/* 改行削除ボックス */
/* 改行を消すのみしかしないので、y_nakamiと合わせたり合わせなかったり。 */
.y_nobr{
	padding:0;
	margin:0;
	width:100%;
	box-sizing:border-box;
}
div.y_nobr>br{display: none;}

/* hr+br対策*/
hr+br{display: none;}

/* 折りたたみボックス******************************************/
/*
○○○が同じ部分が連動します。

折り畳みのタイトル
<label for="○○○" class="y_midashi">ここにラベルの名前</label>

隠す部分
<input type="checkbox" id="○○○" class="on-off"><div class="y_nakami">
※※※隠される部分
</div>
*/
/* 表示非表示動作部 */
/* チェックボックスの次の.y_nakamiの表示状態を切り替える */

input[type="checkbox"].on-off{
  display: none;
}

/*(個別に稼働するタイプ)*/
input[type="checkbox"].on-off + div.y_nakami{
  display: none;
}

input[type="checkbox"].on-off:checked + div.y_nakami{
  display: block;
}

/*(横並び時に連動させるタイプ)*/
/* display:inline-block方式専用 */
input[type="checkbox"].on-off + div.parentbox label.y_midashi + div.y_nakami{
  display: none;
}

input[type="checkbox"].on-off:checked + div.parentbox label.y_midashi + div.y_nakami{
  display: block;
}
/*ツールチップ表示*****************************************/
/* 使い方 <tip>表示名<tiptext>説明文</tiptext></tip> */
/* 表示文字の装飾 */
tip{
    display: inline-block;
}
/* ツールチップ部分を隠す */
tip tiptext {
    display: none;
}
tip tiptext:hover {
    display: none;
} 
/* マウスオーバー */
tip:hover {
    position: relative;
} 
/* マウスオーバー時にツールチップを表示 */
tip:hover tiptext {
    display: block;                  /* ボックス要素にする */
    position: absolute;            /* relativeからの絶対位置 */
    z-index:100;
}

/* テーブル作成*****************************/
/* 自動改行で崩れるので、改行無視のボックスに入れること */
table.list {
	width: 100%;
	border-collapse: separate;
	table-layout: fixed;
}
table.list tr td{
	width:auto;
	padding: 0.2em 0.2em;
	border:none;
}

table.list tr td>br{display: inline;}/* セル内の改行は消さない */
table.list .w1 {
	width: 1em;
}
table.list .w2 {
	width: 2em;
}
table.list .w3 {
	width: 3em;
}
table.list .w4 {
	width: 4em;
}
table.list .w5 {
	width: 5em;
}
table.list .w6 {
	width: 6em;
}
table.list .w7 {
	width: 7em;
}
table.list .w8 {
	width: 8em;
}
table.list .w9 {
	width: 9em;
}
table.list .w10 {
	width: 10em;
}
table.list .w11 {
	width: 11em;
}
table.list .w12 {
	width: 12em;
}
table.list .w13 {
	width: 13em;
}
table.list .w14 {
	width: 14em;
}
table.list .w15 {
	width: 15em;
}
table.list .w16 {
	width: 16em;
}
table.list .w17 {
	width: 17em;
}
table.list .w18 {
	width: 18em;
}
table.list .w19 {
	width: 19em;
}
table.list .w20 {
	width: 20em;
}