/* Fix user-agent */

* {
  /*box-sizingプロパティは、ボックスサイズの算出方法を指定する際に使用します。*/
    box-sizing: border-box;/*パディングとボーダーを幅と高さに含める*/
}

html {
    font-size: 62.5%;   /* 62.5% = 1rem = 10px ※rem:親を基準とする"em"に対し、"rem"は"html"を基準とします。 */
    font-weight: 300;
    -webkit-font-smoothing: antialiased;
}

html, input {
    font-family:
    Helvetica,
    Arial;
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body{
    font-size: 12px;
    font-size: 1.2rem;
}

ul {
    list-style: none;
    word-wrap: break-word;
}

/* jquery ui dialog ------------------------------------------------------------------------------------------------------ */
/* zIndexオプションは使えない仕様っぽい。cssで直接指定するしかないぽい。ぽいぽい？*/
.j-ui-dialog { z-index: 10000 !important ;}

/* Common parts 各ページ共通で使用されるパーツ------------------------------------------------------------------ */
/* header ------------------------------------------------------------------------------------------------------ */
.header {
    position: absolute;
    left: 0;
    top: 0;
    /*height: 72px;*//* ※設定しなければ、子の設定（大きさ）に依存します */
    width: 100%;
    background-color: #000;
}
/* twitter ----------------------------------------------------------------------------------------------------- */
#twitter {
    position: absolute;
    right: 16px;
    bottom: 16px;
}
/* button ------------------------------------------------------------------------------------------------------ */
.btn {
    margin: 0px;
    width: 80px;
    padding: 5px;
    padding-left: 8px;
    padding-right: 8px;
    border-radius: 5px;
    cursor: pointer;

	position: relative;
	background-color: #1abc9c;
	border-radius: 4px;
	color: #fff;
	line-height: 52px;
	-webkit-transition: none;
	transition: none;
	box-shadow: 0 2px 0 #0e8c73;
	text-shadow: 0 1px 1px rgba(0, 0, 0, .3);

    /*文字列の選択（反転）不可にする*/
    user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none; 

    /*文字がはみ出す場合は"…"にする */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.btn:hover {
	background-color: #31c8aa;
	box-shadow: 0 2px 0 #23a188;
}
.btn:active {
	top: 2px;
	box-shadow: none;
}

.btn[disabled], .btn[disabled]:hover, .btn[disabled]:active {
    border-color: #eaeaea;
    background: #fafafa;
    cursor: not-allowed;
    position: static;
    color: #999;
    /* Usually, !important should be avoided but here it's really needed :) */
    box-shadow: none !important;
    text-shadow: none !important;
}

/* table ------------------------------------------------------------------------------------------------------ */
table {
    width: auto;
    border-spacing: 0;
    font-size: 1.4rem;
    font-size:14px;
    margin: 0 auto;
}

table th {
    color: #fff;
    padding: 8px 15px;
    background: #258;
    background:-moz-linear-gradient(rgba(34,85,136,0.7), rgba(34,85,136,0.9) 50%);
    background:-webkit-gradient(linear, 100% 0%, 100% 50%, from(rgba(34,85,136,0.7)), to(rgba(34,85,136,0.9)));
    font-weight: bold;
    border-left:1px solid #258;
    border-top:1px solid #258;
    border-bottom:1px solid #258;
    line-height: 120%;
    text-align: center;
    text-shadow:0 -1px 0 rgba(34,85,136,0.9);
    box-shadow: 0px 1px 1px rgba(255,255,255,0.3) inset;
}
table th:first-child {
    border-radius: 5px 0 0 0;
}
table th:last-child {
    border-radius:0 5px 0 0;
    border-right:1px solid #258;
    box-shadow: 2px 2px 1px rgba(0,0,0,0.1),0px 1px 1px rgba(255,255,255,0.3) inset;
}
table tr td {
    padding: 8px 15px;
    border-bottom: 1px solid #84b2e0;
    border-left: 1px solid #84b2e0;
    text-align: center;
}
table tr td:last-child {
    border-right: 1px solid #84b2e0;
    box-shadow: 2px 2px 1px rgba(0,0,0,0.1);
}
table tr {
    background: #fff;
}
table tr:nth-child(2n+1) {
    background: #f1f6fc;
}
table tr:last-child td {
    box-shadow: 2px 2px 1px rgba(0,0,0,0.1);
}
table tr:last-child td:first-child {
    border-radius: 0 0 0 5px;
}
table tr:last-child td:last-child {
    border-radius: 0 0 5px 0;
}
#tbl_rooms_body tr:hover {
    background: #bbd4ee;
    cursor:pointer;
}

#tbl_avater_list_body td:hover{
    background: #bbd4ee;
    cursor:pointer;
}

/* Pages ------------------------------------------------------------------------------------------------------------ */

#pages {
    height: 100%; /*764px;*/
    margin: 0;
    padding: 0;
    width: 100%; /*1024px;*/
    transform-origin:0 0;   /*左上を基準として縮尺*/
    transform: scale(1);  /*縮尺*/
}

.page {
    position: absolute;
    height: 100%;
    width: 100%;
}

/* Login Page ------------------------------------------------------------------------------------------------------ */
/* login(class), page(class)の両方を含む要素("login page")にのみ設定が適用される */
.login.page {
    background-color: #000;
    background-image: url("../img/background.png");
    /*display: none;/* add for debug rayout*/
}

.login.page .img.title{
    margin: 0 auto; /*重要！！センタリング(中央ぞろえ)の正しい書き方！！*/
    width: 480px;
    height: 256px;
    alt: "";
    background: url('../img/title.png');
    background-size: 100% auto;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

#event_about_this_site{
    position: relative;
    top: 20%;
    bottom: auto;
    left: 21%;
    right: auto;

    font-size: 16px;
    font-size: 1.6rem;

    width: 128px;
    height: 128px;
    border-radius:  50%;
    background-color: rgba(255,0,0,0.0);
}
/* 最低でも"min-width:1px"を設定しないとIE11の挙動がおかしくなる */
@media screen and (max-width: 1020px) and (min-width: 768px){ /* 狭いブラウザとタブレット向け */

}/* 狭いブラウザとタブレット向け */

@media screen and (max-width: 767px) and (min-width:1px) { /* スマホ対応 */
    /* img以外で、アスペクト比を合わせるテクニック */
    .login.page .img.title {
        width: 100%;
        height: 100%;
        position: absolute;
    }
    .login.page .wrapper {
        position: relative;
        width: 100%;
    }
    .login.page .wrapper:before {
        content:"";
        display: block;
        padding-top: 53%; /* 高さを幅の53%に固定 256 / 480 * 100 = 53.3333... */
    }
    #event_about_this_site{
        position: relative;
        top: 18%;
        bottom: auto;
        left: 21%;
        right: auto;

        width: 26%;
        height: 52%;
    }
}/* スマホ */

@media screen and (max-height: 360px) and (min-width:1px) { /* スマホ対応 */
    .login.page .img.title {
        margin-left: auto;
        margin-right: auto;
        margin-top: 0px;
        margin-bottom: 0px;
        width: 480px;
        height: 256px;
        background-size: 100% auto;
        top: 128px;
        left: 0px;
        bottom: 0px;
        right: 0px;
    }
}/* スマホ */

.login.page .form {
    height: 100px;
    margin-top: -300px;
    position: absolute;

    text-align: center;
    top: 50%;
    width: 100%;
}

.login.page .form .ipt_username {
    background-color: transparent;
    border: none;
    border-bottom: 2px solid #000;
    outline: none;
    padding-bottom: 15px;
    text-align: center;
    width: 400px;
}

.login.page .lbl_username {
    font-size: 2.4rem;
    font-size: 24px;
}

.login.page .ipt_username {
    font-size: 2.8rem;
    font-size: 28px;
    letter-spacing: 3px;
}

.login.page .lbl_username, .login.page .ipt_username, .login.page .lbl_totalUsersCount {
    color: #000;
    font-weight: 100;
}

@media screen and (max-width: 767px) and (min-width:1px) { /* スマホ対応 */
    .login.page .form .ipt_username {
        width: 100%;
    }
}/* スマホ */

/* lounge page ------------------------------------------------------------------------------------------------------ */
.lounge.page {
    background-color: #000;
    background-image: url("../img/background.png");
    display: none;
}

.tableArea {
    height: 100%;
    width: 50%;
    text-align: center;
    padding-top: 80px;
    margin: 0 auto;
}

@media screen and (max-width: 767px) and (min-width:1px) { /* スマホ対応 */
    .tableArea {
        width: 80%;
    }
    table {
        width: 100%;
    }

}/* スマホ */

/* Chat page ------------------------------------------------------------------------------------------------------ */
.chat.page {
    display: none;
    width: 100%;
    height: 100%;
}

#chatArea {
    height: 100%;
    width:100%;
    padding-top: 72px;    /* 上メニュー分 */
    padding-bottom: 60px; /* 下チャット入力欄分 */
}

#messages {
    font-size: 24px;
    font-size: 2.4rem;
    height: 100%;
    width: 100%;
    margin: 0;
    position: relative;/* 重要！！子要素にposition:absoluteがある場合、これ記述しないと上手くスクロール表示しない*/
    overflow-y: scroll;
    padding: 10px 20px 10px 20px;
}

.ipt_chat_message {
    font-size: 24px;
    font-size: 2.4rem;
    position: absolute;
    left: 0px;
    bottom: 0px;
    border: 10px solid #000;
    height: 60px;
    outline: none;
    padding-left: 10px;
    width: 100%;
}

/* li に追加する用*/
.log {
    display: block;
    position: relative;
    color: gray;
    /* background-color: #23a188; */
    font-size: 14px;
    font-size: 1.4rem;
    margin-top: 4px;
    text-align: center;
    white-space: nowrap;        /*自動改行は無し*/
    width: 100%;
}
.message {
    display: block;
    position: relative;
    /* background-color: #ff0000;   /*背景色*/
    margin-top: 4px;
}

.message.typing .messageBody {
    color: gray;
}

/* 顔画像 */
#img_avater{
    border: double 4px #888; 
    background-color:#33aa33; 
    cursor: pointer;
}
.msg_img_avater{
    position: absolute;
    background-color: #aaffff;
}
/*chat時の名前表示設定 */
.msg_username {
    top: 16px; 
    left: 0px;               /*balloon基準*/
    position: absolute;
    font-weight: 700;
    overflow: hidden;
    padding-right: 15px;
    text-align: right;
    /* background-color: #aaaaaa; */
}
/* 吹き出しのパーツの入れ物 */
.msg_fukidashi{
    position: absolute;
    /* background-color: #ff00ff;   /*背景色*/
}
/* 吹き出しのパーツ */
.fuki_balloon {
    position: absolute;          /*これをabsoluteにしておかないと、自動改行で吹き出しがおかしく表示される*/
    left: 15px;                  /*名前の長さから逆算しないとダメぽい*/
    padding: 10px;               /*内側の余白*/
    width: 360px;                /*ブロックの幅*/
    font-weight: 500;            /*文字の太さ*/
    text-decoration: none;       /*文字飾り*/
    color:#cc0033 ;              /*文字色*/
    background-color: #f7ffff;   /*背景色*/
    border: 2px solid #66a9ff;
    border-radius: 10px;
}
.fuki_edge_outline{  /*吹き出しトンガリ部分外側線(border風)*/
    position: absolute;
    left : 0px;
    top: 14px;
    width: 0px;
    height: 0px;
    border-bottom: 15px solid #66a9ff;
    border-left: 15px solid transparent;
}
.fuki_edge{          /*吹き出しトンガリ部分*/
    position: absolute;
    left : 4px;
    top: 14px;    
    width: 0px;
    height: 0px;
    border-bottom: 13px solid #f7ffff;
    border-left: 13px solid transparent;
}

/* Dice */
.dice{/* dice 画像*/
    display: none;
    width: 64px;
    height: 64px;
    position: absolute;
    background-image: url("../img/dice.png");
    background-repeat: no-repeat;
    background-position: 0px 0px;
    overflow: hidden;   /* 画面外は表示しない(スクロールバーを出さない) */
}

.diceGroup{
    position: relative;
    float: right;           /* margin-leftでなくfloatでよさそう*/
}

.btn.createRoom, .btn.tableUpdate, .btn.exitRoom, .btn.rollDice, .btn.rollDice2, .btn.openImageFileDialog, .btn.daifugou, .btn.reversi, .btn.daifugou_getData {
    position: relative;
    text-align: center;
    height: 56px;
    margin-top: 8px;
    margin-bottom: 8px;
    /*margin-left: auto;    /* 要素の右寄せ。左寄せなら"margin-right： auto;"とする。centerなら両方記述する。 */
    float: right;           /* margin-leftでなくfloatでよさそう*/
    margin-right: 8px;
    white-space: nowrap;    /* 自動改行させない */
    overflow: hidden;       /* はみ出たとこは表示しない */
}





.btn.rollDice{
    border-top-left-radius: 4px;
    border-top-right-radius: 0px;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 0px;
    width: 51px;
    margin-right: 36px;     /*指定数値分だけ左に移動する*/

    white-space: nowrap;  /* 自動改行不可 */
}


.diceCounter, .diceCounter[disabled], .diceCounter[disabled]:active, .diceCounter[disabled]:hover {
    margin: 0px;
    width: 28px;
    height: 28px;
    padding: 0px;

    position: absolute;
    left: 52px;/*  */
    
    text-align: center;
    line-height: 28px;      /*上下の位置*/
    font-size: 20px;
    font-size: 2.0rem;
    font-weight: 500;       /*文字の太さ*/
    /*文字列の選択（反転）不可にする*/
    user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none; 
}

.diceCounter.up{
    border-top-left-radius: 0px;
    border-top-right-radius: 4px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    top: 8px;
}
.diceCounter.up:active {
    top: 10px;
    box-shadow: none;
}
.diceCounter.up[disabled]:active, .diceCounter.up[disabled]:hover {
    top: 8px;
}

.diceCounter.down{
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 4px;
    line-height: 22px;    /*上下の位置*/
    top: 36px;
}
.diceCounter.down:active {
	top: 38px;
	box-shadow: none;
}
.diceCounter.down[disabled]:active, .diceCounter.down[disabled]:hover {
    line-height: 22px;    /*上下の位置*/
	top: 36px;
} 

.btn.rollDice2{
    border-top-left-radius: 4px;
    border-top-right-radius: 0px;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 0px;
    width: 79px;
    margin-right: 50px;     /*指定数値分だけ左に移動する*/

    white-space: nowrap;  /* 自動改行不可 */
}

.diceCounter-value-selector {
    top: 8px;
    left: 100px;
    margin: 0px;
    width: 48px;
    height: 56px;
    padding: 0px;
    padding-left: 12px;
    padding-top: 2px;
    border-top-left-radius: 0px;
    border-top-right-radius: 4px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 4px;
    cursor: pointer;

	position: absolute;
	background-color: #1abc9c;
	color: #fff;
	-webkit-transition: none;
	transition: none;
	box-shadow: 0 2px 0 #0e8c73;
	text-shadow: 0 1px 1px rgba(0, 0, 0, .3);

    /*文字列の選択（反転）不可にする*/
    user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none; 
    
    text-align: center;
    font-size: 14px;
    font-size: 1.4rem;
    font-weight: 500;       /*文字の太さ*/

}

/* 重要！！！
    ・cssファイルで設定したスタイルは、DOMのgetElementById, getElementByClassで取得した要素には追加されていません。
    ・別で管理しているようです。cssで設定した内容を取得するには・・・
    ・"var style = element.currentStyle || document.defaultView.getComputedStyle(element, '');"
    ・として取りましょう。
*/
/* dpについて
    ・cssの単位ではない（使えない）
    ・Androidのデザインにおいて、必ず理解しておくべきポイントのひとつがdpについてです。
    ・dp(density-independent pixels)とは密度非依存ピクセルのことで、dipとも呼ばれています。

*/

/* positionについて
    static:   デフォルト値。位置指定(right,left,top,buttom)無効な要素となる。つまり本来配置されるべき位置から変更できない。
    relative: 本来"static"で配置される位置が基準(0,0)となり、そこからの相対座標となる。
    fixed:    viewport(画面左上)が基準(0,0)となる。つまり、ページがスクロールされても、いつでも同じ場所に配置されるという事。
    absolute: 上位ボックス位置指定有効(staticで無い)かつ最も近い世代の祖先要素が基準(0,0)となる。
*/

/* propertyとAttributeの違い
◆Attribute
・HTMLの世界の住人
・HTMLに書いたものがそのまま出る
・静的
・設定/解除 -> get/setAttribute()
・設定/解除 -> $().attr/$().removeAttr() - jquery
◆Property
・JavaScriptの世界の住人
・扱いやすいようにパースされている
・動的（なこともある）
・element.property
・設定/解除 -> オブジェクト.プロパティ名/ delete オブジェクト.プロパティ名
・設定/解除 -> $().prop() - jquery

JQuery操作まとめ
・.val()や.css()のように専用のメソッドがあるもの…それを使う
・フォーム関連の属性….prop()を使う
・URL属性…取得したいもので使い分ける
・data-属性….attr()を使う
・ブラウザが非対応な可能性もある属性….attr()を使う
*/

/*display:none と visibility:hidden の違い
・visibility:hidden 要素はあるけど見えない状態。
・display:none      要素も取得されず、完全にその場にない扱い。
*/

/* [disabled]はattribute(属性)設定で、propertyではない。*/
/* classには本来"disabled"という属性は無いので、attr()で追加する。 */
/* checkboxやradiobutton, inputやtext等の”フォーム関連の属性”は基本"disabled"属性を持っているので、prop()を使う。attr(),ましてやremoveAttr()は論外*/

/* importantについて
   CSSのスタイルシートはブラウザのデフォルト・スタイルシート→ユーザー・スタイルシート（用意した場合ですが）→ページ作者のスタイルシートの順に優先度が高くなります。
   また、ひとつのスタイルシートにおいても後から指定したスタイルが優先されます。後からとは同じセレクタのスタイルが重複した場合は最後（CSSソースの下）に指定したスタイル
   が優先されることです。また、普通のスタイルよりはクラスセレクタを使ったスタイルが優先され、クラスセレクタよりはIDセレクタを使ったスタイルが優先されます。

　 !importantルールを使うとスタイルを優先させることができます。「プロパティ: 値」の後に半角スペースで区切り、!importantを配置します。ただし、「プロパティ: 値」ごとに指定する
   必要があります。
*/