/* -*- coding: utf-8 -*- */
/*----------------------------------------------*/
/*----------------------------------------------*/ 
/*      タブ朗 - style.css                        */ 
/*----------------------------------------------*/
/*----------------------------------------------*/


/*   便利な機能

コンソールから、util.listIds() として、使用している全てのIDを列挙できます。
同様に、util.listClasses() として、使用している全てのクラス名を列挙できます。

*/
 

/* @@@ デバッグ用 */
#debugPre {
 background-color: black;
 color: yellow;
 font-weight: bold;
}

/*----------------------------------------------*/ 
/*      センタリング                                */ 
/*----------------------------------------------*/
.centering {
  width: 850px;
  margin: 0 auto;
}
#wrap {
  width: 850px;
  margin: 0 auto;
  padding-top: 130px;
  padding-bottom: 30px;
  background: #fafafa;
}

/*----------------------------------------------*/ 
/*      HEADER & NAV                            */ 
/*----------------------------------------------*/
header {
  width: 100%;
  height: 34px;
  padding: 8px 0;
  color: #aaa;
  z-index: 100;
  position: fixed;
  box-shadow: 0 1px 2px 2px rgba(0,0,0,0.4);
  background: #3d3d3d;
}
header a {
  display: block;
  margin-left: 45px;
}
header a:hover {
  opacity: 0.9;
}
header h1 span {
  margin-left: 10px;
  display: inline-block;
  font-size: 18px;
}

nav {
  width: 100%;
  padding: 11px 0 12px 0;
  position: fixed;
  top: 50px;
  z-index: 80;
  box-shadow: 0 1px 2px 2px rgba(0,0,0,0.2);
  background: #dddddd;
}
nav .centering {
  width: 760px;
  padding: 0 45px;
}
nav button + button {
  margin-left: -4px;
}
#startCheck,
#helpShow,
#other {
  margin-left: 14px;
}
nav button:hover {
  opacity: 0.9;
}
nav button:disabled:hover {
  opacity: 1;
}

/*------- タブ朗・入力 -------*/
nav #toTableau {
  width: 76px;
  height: 33px;
  overflow: hidden;
  text-indent: 200%;
  white-space: nowrap;
  border: none;
  background: url(img/m_tablou.png) no-repeat;
}
nav #toTableau:active {
  background: url(img/m_tablou_on.png) no-repeat;
}
nav #toTableau:disabled {
  background: url(img/m_tablou_stay.png) no-repeat;
}
nav #toInput {
  width: 76px;
  height: 33px;
  position: relative;
  overflow: hidden;
  text-indent: 200%;
  white-space: nowrap;
  border: none;
  background: url(img/m_type.png) no-repeat;
}
nav #toInput:active {
  background: url(img/m_type_on.png) no-repeat;
}
nav #toInput:disabled {
  background: url(img/m_type_stay.png) no-repeat;
}
/*------- チェック開始・終了・中止 -------*/
nav #startCheck {
  width: 94px;
  height: 33px;
  overflow: hidden;
  text-indent: 200%;
  white-space: nowrap;
  border: none;
  background: url(img/m_check01.png) no-repeat;
}
nav #startCheck:active {
  background: url(img/m_check01_on.png) no-repeat;
}
nav #startCheck:disabled {
  background: url(img/m_check01_stay.png) no-repeat;
}
nav #finishCheck {
  width: 94px;
  height: 33px;
  overflow: hidden;
  text-indent: 200%;
  white-space: nowrap;
  border: none;
  background: url(img/m_check02.png) no-repeat;
}
nav #finishCheck:active {
  background: url(img/m_check02_on.png) no-repeat;
}
nav #finishCheck:disabled {
  background: url(img/m_check02_stay.png) no-repeat;
}
nav #cancelCheck {
  width: 94px;
  height: 33px;
  overflow: hidden;
  text-indent: 200%;
  white-space: nowrap;
  border: none;
  background: url(img/m_check03.png) no-repeat;
}
nav #cancelCheck:active {
  background: url(img/m_check03_on.png) no-repeat;
}
nav #cancelCheck:disabled {
  background: url(img/m_check03_stay.png) no-repeat;
}
/*------- 説明 -------*/
nav #helpShow {
  width: 94px;
  height: 33px;
  overflow: hidden;
  text-indent: 200%;
  white-space: nowrap;
  border: none;
  background: url(img/m_exp01.png) no-repeat;
}
nav #helpShow:active {
  background: url(img/m_exp01_on.png) no-repeat;
}
nav #helpShow:disabled {
  background: url(img/m_exp01_stay.png) no-repeat;
}
nav #helpHide {
  width: 94px;
  height: 33px;
  overflow: hidden;
  text-indent: 200%;
  white-space: nowrap;
  border: none;
  background: url(img/m_exp02.png) no-repeat;
}
nav #helpHide:active {
  background: url(img/m_exp02_on.png) no-repeat;
}
nav #helpHide:disabled {
  background: url(img/m_exp02_stay.png) no-repeat;
}
/*------- その他 -------*/
nav #other {
  width: 76px;
  height: 33px;
  position: relative;
  overflow: hidden;
  text-indent: 200%;
  white-space: nowrap;
  border: none;
  background: url(img/m_other.png) no-repeat;
}
nav #other:active {
  background: url(img/m_other_on.png) no-repeat;
}
nav #other:disabled {
  background: url(img/m_other_stay.png) no-repeat;
}
nav button:disabled {
  opacity: 0.4;
}
nav button:disabled:hover {
  opacity: 0.4;
}

/*----------------------------------------------*/ 
/*      説明　　　　　　　　                           */ 
/*----------------------------------------------*/
#help {
  width: 760px;
  margin: 0 auto 30px auto;
  position: relative;
  background: #eee;
}
#help h2 {
  width: 750px;
  margin: 0 auto;
  padding: 5px 0;
  padding-left: 10px;
  color: #fff;
  font-size: 16px;
  background: #ccc;
}
#help h3 {

}
#help p {
  padding: 0 0 15px 0;
}
#help .help-wrap {
  padding: 30px;
}
#help .help-exp {
  padding-bottom: 15px;
}
#help .help-exp li {
  line-height: 1.6;
}
#help .help-sample {
  margin-top: 15px;
  font-weight: bold;
}
#help em,
#help strong {
  font-weight: bold;
}
#help code {
  margin: 10px 0;
  padding: 5px 15px;
  display: block;
  line-height: 1.8;
  background: #fff;
}
#samples {
  padding: 0 15px 15px 15px;
}

.pos-rel {
  position: relative;
}




/* 
 * 入力に関するスタイル
 */

span.note {
  font-size: small;
}

#equalityContext {
  text-align: center;
  display:none;
}  

/* 
 * タブローに関するスタイル
 */
[draggable] {
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  /* Required to make elements draggable in old WebKit */
  -khtml-user-drag: element;
  -webkit-user-drag: element;
}

 td.over { /* @@@ これはデバッグ目的 */
     color: red;
     border: 2px dashed #000;
 }
    .rule {
      -webkit-user-drag: element;
      cursor: move/*pointer*/;
    }
    td.treeitem {
      height: 5ex;
      min-width: 6em;
    }
    td.node {
      color: #222;
      background: #fff;
    }

    td.blank {

    }
    td.left {
      border-right: 1px solid #ccc;
/*      border-left : 1px solid black;*/
/*      border-top: 1px solid black;*/
    }
    td.right {
/*      border-left : 1px solid black;*/
/*      border-right: 1px solid black;*/
/*      border-top: 1px solid black;*/
    }

    .rule {
      border: 1px gray solid;
      padding: 1ex;
      line-height: 5ex;
    }


/* ヘルプに関するスタイル 
 * ヘルプの文言は変化する。
 */
.sample {
 cursor: pointer;
}

#samples { /* table like */
        display: table;
        width: 640px;
      }
#raw { /* tr like */
        display: table-row;
      }


#propLogic { /* td like */
        display: table-cell;
        width: 50%;
/*        background-color: LightPink;*/
      }
#predLogic { /* td like */
        display: table-cell;
        width: 50%;
/*        background-color: GreenYellow;*/
      }

#input h2,
#tablu h2 {
  width: 750px;
  margin: 0 auto;
  margin-bottom: 15px;
  padding: 5px 0;
  padding-left: 10px;
  color: #fff;
  font-size: 16px;
  background: #ccc;
}

/*----------------------------------------------*/ 
/*      ie 以外は非表示                           */ 
/*----------------------------------------------*/
.ie {
  display: none;
}

/*----------------------------------------------*/ 
/*      入力結果                                 */ 
/*----------------------------------------------*/
.sec-02 {
  padding-top: 10px;
  position: relative;

}
.softSpecialKeyCover {
  width: 406px;
  margin: 0 auto;
}
.softSpecialKey + .softSpecialKey {
  margin-left: 5px;
}

#formulaInput {
  width: 404px;
  height: 40px;
  margin: 20px auto 15px auto;
  padding: 0 10px;
  display: block;
  border: none;
  font-size: 14px;
  color: #222;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  background: url(img/formula.png) no-repeat;
}

#parseFormula {
  width: 114px;
  height: 41px;
  position: absolute;
  top: 30px;
  right: 97px;
  overflow: hidden;
  text-indent: 200%;
  white-space: nowrap;
  border: none;
  background: url(img/enter.png) no-repeat;
}
#parseFormula:active {
  background: url(img/enter_on.png) no-repeat;
}

#clearInput,
#cursorLeft,
#cursorRight,
#deleteChar,
#BS {
  width: 73px;
  height: 41px;
  overflow: hidden;
  text-indent: 200%;
  white-space: nowrap;
  border: none;
}


#clearInput {
  background: url(img/clear.png) no-repeat;
}
#cursorLeft {
  background: url(img/to-left.png) no-repeat;
}
#cursorRight {
  background: url(img/to-right.png) no-repeat;
}
#deleteChar {
  background: url(img/delete.png) no-repeat;
}
#BS {
  background: url(img/backspace.png) no-repeat;
}
#clearInput:active {
  background: url(img/clear_on.png) no-repeat;
}
#cursorLeft:active {
  background: url(img/to-left_on.png) no-repeat;
}
#cursorRight:active {
  background: url(img/to-right_on.png) no-repeat;
}
#deleteChar:active {
  background: url(img/delete_on.png) no-repeat;
}
#BS:active {
  background: url(img/backspace_on.png) no-repeat;
}

/*----------------------------------------------*/ 
/*      解析結果                                 */ 
/*----------------------------------------------*/
#result {
  width: 780px;
  margin: 0 auto;
  margin-top: 30px;
  padding: 15px 35px;
  overflow: hidden;
  background: #eee;
}
#result .result-cover {
  overflow: hidden;
  padding: 0 47px;
}
#result p {
  width: 760px;
  height: 100px;
  padding: 15px 10px 15px 15px;
  float: left;
}
#result p span {
  width: 750px;
  height: 35px;
  padding-left: 10px;
  display: block;
  color: #fff;
  line-height: 35px;
  font-size: 18px;
  font-weight: bold;
  background: #ccc;
}
#result p #formulaShow {
  height: 55px;
  line-height: 50px;
  color: #222;
  font-size: 16px;
  background: #fff;
}
#result .result1 {
  width: 340px;
  float: left;
}
#result .result2 {
  width: 340px;
  margin-left: 5px;
  float: left;
  text-align: right;
}
#result input {
  width: 154px;
  height: 40px;
  border: none;
  overflow: hidden;
  text-indent: 200%;
  white-space: nowrap;
}
#result #addToPrems {
  margin-right: 5px;
  background: url(img/result-11.png);
}
#result #addToPrems:active {
  background: url(img/result-11_on.png);
}
#result #clearPrem {
  background: url(img/result-12.png);
}
#result #clearPrem:active {
  background: url(img/result-12_on.png);
}
#result #setConc {
  margin-right: 5px;
  background: url(img/result-21.png);
}
#result #setConc:active {
  background: url(img/result-21_on.png);
}
#result #clearConc {
  background: url(img/result-22.png);
}
#result #clearConc:active {
  background: url(img/result-22_on.png);
}

#result2 {
  width: 760px;
  padding: 15px 45px 30px 45px;
  overflow: hidden;
  background: #eee;
}
#result2 .result2 {
  width: 760px;
}
#result2 h3 {
  width: 750px;
  padding: 5px 0 5px 10px;
  color: #fff;
  background: #ccc;
}
#result2 .zent {
  margin-bottom: 30px;
}
#prems, #conc {
  padding: 15px;
  background: #fff;
}


/*----------------------------------------------*/ 
/*      キーボード                                 */ 
/*----------------------------------------------*/
#softKeyBd {
  width: 740px;
  height: 195px;
  margin: 0 auto;
  padding: 20px 10px;
  position: relative;
  background: url(img/kbg.png) no-repeat center top;
}

.big-letter,
.small-letter1,
.small-letter2 {
  margin: 10px 0 0 0;
}

.big-letter {
  width: 710px;
  margin: 10px auto;
  margin-top: 20px;
}
.small-letter1 {
  width: 306px;
  position: relative;
  left: 40px;
}
.small-letter2 {
  width: 305px;
  position: relative;
  left: 16px;
}
.kakko {
  position: absolute;
  left: 357px;
  top: 100px;
}
.kigou {
  position: absolute;
  left: 332px;
  top: 160px;
}


.kakko1 {
  width: 46px;
  height: 50px;
  overflow: hidden;
  text-indent: 200%;
  white-space: nowrap;
  border: none;
  background: url(img/kakko1.png) no-repeat;
}
.kakko2 {
  width: 46px;
  height: 50px;
  overflow: hidden;
  text-indent: 200%;
  white-space: nowrap;
  border: none;
  background: url(img/kakko2.png) no-repeat;
}
.C1 {
  width: 46px;
  height: 50px;
  overflow: hidden;
  text-indent: 200%;
  white-space: nowrap;
  border: none;
  background: url(img/C1.png) no-repeat;
}
.T1 {
  width: 46px;
  height: 50px;
  overflow: hidden;
  text-indent: 200%;
  white-space: nowrap;
  border: none;
  background: url(img/T1.png) no-repeat;
}
.P1 {
  width: 46px;
  height: 50px;
  overflow: hidden;
  text-indent: 200%;
  white-space: nowrap;
  border: none;
  background: url(img/P1.png) no-repeat;
}
.H1 {
  width: 46px;
  height: 50px;
  overflow: hidden;
  text-indent: 200%;
  white-space: nowrap;
  border: none;
  background: url(img/H1.png) no-repeat;
}
.M1 {
  width: 46px;
  height: 50px;
  overflow: hidden;
  text-indent: 200%;
  white-space: nowrap;
  border: none;
  background: url(img/M1.png) no-repeat;
}
.S1 {
  width: 46px;
  height: 50px;
  overflow: hidden;
  text-indent: 200%;
  white-space: nowrap;
  border: none;
  background: url(img/S1.png) no-repeat;
}
.wa2 {
  width: 46px;
  height: 50px;
  overflow: hidden;
  text-indent: 200%;
  white-space: nowrap;
  border: none;
  background: url(img/wa2.png) no-repeat;
}
.R2 {
  width: 46px;
  height: 50px;
  overflow: hidden;
  text-indent: 200%;
  white-space: nowrap;
  border: none;
  background: url(img/R2.png) no-repeat;
}
.L2 {
  width: 46px;
  height: 50px;
  overflow: hidden;
  text-indent: 200%;
  white-space: nowrap;
  border: none;
  background: url(img/L2.png) no-repeat;
}
.V2 {
  width: 46px;
  height: 50px;
  overflow: hidden;
  text-indent: 200%;
  white-space: nowrap;
  border: none;
  background: url(img/V2.png) no-repeat;
}
.W2 {
  width: 46px;
  height: 50px;
  overflow: hidden;
  text-indent: 200%;
  white-space: nowrap;
  border: none;
  background: url(img/W2.png) no-repeat;
}
.less2 {
  width: 46px;
  height: 50px;
  overflow: hidden;
  text-indent: 200%;
  white-space: nowrap;
  border: none;
  background: url(img/less.png) no-repeat;
}
.more2 {
  width: 46px;
  height: 50px;
  overflow: hidden;
  text-indent: 200%;
  white-space: nowrap;
  border: none;
  background: url(img/more.png) no-repeat;
}
.I3{
  width: 46px;
  height: 50px;
  overflow: hidden;
  text-indent: 200%;
  white-space: nowrap;
  border: none;
  background: url(img/I3.png) no-repeat;
} 
.a {
  width: 46px;
  height: 50px;
  overflow: hidden;
  text-indent: 200%;
  white-space: nowrap;
  border: none;
  background: url(img/a.png) no-repeat;
}
.b {
  width: 46px;
  height: 50px;
  overflow: hidden;
  text-indent: 200%;
  white-space: nowrap;
  border: none;
  background: url(img/b.png) no-repeat;
}
.c {
  width: 46px;
  height: 50px;
  overflow: hidden;
  text-indent: 200%;
  white-space: nowrap;
  border: none;
  background: url(img/c.png) no-repeat;
}
.d {
  width: 46px;
  height: 50px;
  overflow: hidden;
  text-indent: 200%;
  white-space: nowrap;
  border: none;
  background: url(img/d.png) no-repeat;
}
.e {
  width: 46px;
  height: 50px;
  overflow: hidden;
  text-indent: 200%;
  white-space: nowrap;
  border: none;
  background: url(img/e.png) no-repeat;
}
.f {
  width: 46px;
  height: 50px;
  overflow: hidden;
  text-indent: 200%;
  white-space: nowrap;
  border: none;
  background: url(img/f.png) no-repeat;
}
.x {
  width: 46px;
  height: 50px;
  overflow: hidden;
  text-indent: 200%;
  white-space: nowrap;
  border: none;
  background: url(img/x.png) no-repeat;
}
.y {
  width: 46px;
  height: 50px;
  overflow: hidden;
  text-indent: 200%;
  white-space: nowrap;
  border: none;
  background: url(img/y.png) no-repeat;
}
.z {
  width: 46px;
  height: 50px;
  overflow: hidden;
  text-indent: 200%;
  white-space: nowrap;
  border: none;
  background: url(img/z.png) no-repeat;
}
.u {
  width: 46px;
  height: 50px;
  overflow: hidden;
  text-indent: 200%;
  white-space: nowrap;
  border: none;
  background: url(img/u.png) no-repeat;
}
.v {
  width: 46px;
  height: 50px;
  overflow: hidden;
  text-indent: 200%;
  white-space: nowrap;
  border: none;
  background: url(img/v.png) no-repeat;
}
.w {
  width: 46px;
  height: 50px;
  overflow: hidden;
  text-indent: 200%;
  white-space: nowrap;
  border: none;
  background: url(img/w.png) no-repeat;
}
.kigou1 {
  width: 46px;
  height: 50px;
  overflow: hidden;
  text-indent: 200%;
  white-space: nowrap;
  border: none;
  background: url(img/kigou1.png) no-repeat;
}
.kigou2 {
  width: 46px;
  height: 50px;
  overflow: hidden;
  text-indent: 200%;
  white-space: nowrap;
  border: none;
  background: url(img/kigou2.png) no-repeat;
}
.kigou3 {
  width: 46px;
  height: 50px;
  overflow: hidden;
  text-indent: 200%;
  white-space: nowrap;
  border: none;
  background: url(img/kigou3.png) no-repeat;
}
.kigou4 {
  width: 46px;
  height: 50px;
  overflow: hidden;
  text-indent: 200%;
  white-space: nowrap;
  border: none;
  background: url(img/kigou4.png) no-repeat;
}
.kigou5 {
  width: 46px;
  height: 50px;
  overflow: hidden;
  text-indent: 200%;
  white-space: nowrap;
  border: none;
  background: url(img/kigou5.png) no-repeat;
}
.kigou6 {
  width: 46px;
  height: 50px;
  overflow: hidden;
  text-indent: 200%;
  white-space: nowrap;
  border: none;
  background: url(img/kigou6.png) no-repeat;
}




.kakko1:active {
  background: url(img/kakko1_on.png) no-repeat;
}
.kakko2:active {
  background: url(img/kakko2_on.png) no-repeat;
}
.C1:active {
  background: url(img/C1_on.png) no-repeat;
}
.T1:active {
  background: url(img/T1_on.png) no-repeat;
}
.P1:active {
  background: url(img/P1_on.png) no-repeat;
}
.H1:active {
  background: url(img/H1_on.png) no-repeat;
}
.M1:active {
  background: url(img/M1_on.png) no-repeat;
}
.S1:active {
  background: url(img/S1_on.png) no-repeat;
}
.wa2:active {
  background: url(img/wa2_on.png) no-repeat;
}
.R2:active {
  background: url(img/R2_on.png) no-repeat;
}
.L2:active {
  background: url(img/L2_on.png) no-repeat;
}
.V2:active {
  background: url(img/V2_on.png) no-repeat;
}
.W2:active {
  background: url(img/W2_on.png) no-repeat;
}
.less2:active {
  background: url(img/less_on.png) no-repeat;
}
.more2:active {
  background: url(img/more_on.png) no-repeat;
}
.I3:active{
  background: url(img/I3_on.png) no-repeat;
} 
.a:active {
  background: url(img/a_on.png) no-repeat;
}
.b:active {
  background: url(img/b_on.png) no-repeat;
}
.c:active {
  background: url(img/c_on.png) no-repeat;
}
.d:active {
  background: url(img/d_on.png) no-repeat;
}
.e:active {
  background: url(img/e_on.png) no-repeat;
}
.f:active {
  background: url(img/f_on.png) no-repeat;
}
.x:active {
  background: url(img/x_on.png) no-repeat;
}
.y:active {
  background: url(img/y_on.png) no-repeat;
}
.z:active {
  background: url(img/z_on.png) no-repeat;
}
.u:active {
  background: url(img/u_on.png) no-repeat;
}
.v:active {
  background: url(img/v_on.png) no-repeat;
}
.w:active {
  background: url(img/w_on.png) no-repeat;
}
.kigou1:active {
  background: url(img/kigou1_on.png) no-repeat;
}
.kigou2:active {
  background: url(img/kigou2_on.png) no-repeat;
}
.kigou3:active {
  background: url(img/kigou3_on.png) no-repeat;
}
.kigou4:active {
  background: url(img/kigou4_on.png) no-repeat;
}
.kigou5:active {
  background: url(img/kigou5_on.png) no-repeat;
}
.kigou6:active {
  background: url(img/kigou6_on.png) no-repeat;
}


/*----------------------------------------------*/ 
/*      タブロー　                                  */ 
/*----------------------------------------------*/
#generalContext {
  width: 760px;
  padding: 0 45px;
}
#generalContext div {
  padding: 0 15px 15px 15px;
  background: #eee;
}
#generalContext .tablu-choices {
  padding: 15px;
  background: #eee;
}
#generalContext .rule {
  margin-top: 10px;
  margin-left: 3px;
  padding: 5px 20px;
  display: inline-block;
  border: none;
  text-align: center;
  color: #222;
  font-weight: bold;
  background: #fff;
}
#generalContext .rule.command {
  color: #fff;
  background: #3d3d3d;
}

#tablPanel {
  width: 730px;
  margin: 0 45px;
  padding: 15px;
  display: block;
  background: #eee;
}
#tablPanel tr {
  padding: 0 15px;
  border: 1px solid #ccc;
}
#tablPanel tr + #tablPanel tr {
  margin-bottom: 5px;
}