/* Fonts e.g. for engine output */
@font-face
{
   font-family: "CBArial";
   src: url("/Common/Media/Chess/fonts/CBArialLink.eot");
}

@font-face
{
   font-family: "CBArial";
   src: url("/Common/Media/Chess/fonts/CBArialLink.ttf");
}

@font-face
{
   font-family: "CBArial";
   src: url("/Common/Media/Chess/fonts/CBArialLinkItalic.eot");
   font-style: italic;
}

@font-face
{
   font-family: "CBArial";
   src: url("/Common/Media/Chess/fonts/CBArialLinkItalic.ttf");
   font-style: italic;
}

@font-face
{
   font-family: "CBArial";
   src: url("/Common/Media/Chess/fonts/CBArialLinkBold.eot");
   font-weight: bold;
}

@font-face
{
   font-family: "CBArial";
   src: url("/Common/Media/Chess/fonts/CBArialLinkBold.ttf");
   font-weight: bold;
}

.CBMainCanvas
{
   position: relative;
}

/*********************************************************************************************
cbNotation plugin.
*********************************************************************************************/

div.cbnota-container
{
   /*overflow: auto;*/
   /*font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Roboto, sans-serif;*/
   font-family: Roboto, sans-serif;
   font-size: 0.9em;
}

@media screen and (min-height: 300px)
{
   div.cbnota-container
   {
      font-size: 1.0em;
   }
}

@media screen and (min-height: 400px)
{
   div.cbnota-container
   {
      font-size: 1.05em;
   }
}

@media screen and (min-height: 600px)
{
   div.cbnota-container
   {
      font-size: 1.1em;
   }
}

@media screen and (min-height: 700px)
{
   div.cbnota-container
   {
      font-size: 1.2em;
   }
}

@media screen and (min-height: 800px)
{
   div.cbnota-container
   {
      font-size: 1.22em;
   }
}

@media screen and (min-height: 900px)
{
   div.cbnota-container
   {
      font-size: 1.25em;
   }
}

span.cbmove
{
   text-decoration: none;
   cursor: pointer;
   padding: 0px 2px 0px 2px;
   /*margin: 0px 2px 0px 2px;*/
   white-space: nowrap;
}

span.cbline
{
}


/*#notaheader-container {background: #000; color: #fff; height: 40px; position: absolute; top: 0; width: 100%; }*/
/*#notaheader-nopics {background: #000; color: #fff; height: 50px; position: absolute; top: 0; width: 100%; }*/


.notafooter-container
{
   background: #fff;
   color: #fff;
   height: 20px;
   min-height: 20px;
   padding: 1px;
   min-width: 1px;
   border-top: thin solid hsla( 0, 0%, 0%, 0.25);
   box-shadow: 1px 2px 2px -2px hsla( 20, 30%, 0%, 0.28 ) inset;
}

@media screen and (min-height: 800px)
{
   .notafooter-condainer
   {
      height: 28px;
      min-height: 28px;
      box-shadow: 2px 3px 4px -4px hsla( 20, 30%, 0%, 0.28 ) inset;
   }
}

.nota-container
{
   display: table;
   height: 100%;
   width: 100%;
   table-layout: fixed;
}

.nota-head-container,
.nota-game-container,
.nota-foot-container
{
   display: table-row;
}

.nota-head-container,
.nota-foot-container
{
}

.nota-head,
.nota-ogame,
.nota-foot
{
   display: table-cell;
}

.nota-game
{
   overflow-y: auto;
   position: absolute;
   top: 0px;
   left: 0px;
   right: 0px;
   bottom: 0px;
   padding: 2px;  /* no effect*/
   /*box-shadow: 0px 10px 14px -14px hsla( 20, 30%, 0%, 0.98 ) inset;*/
   box-shadow: 2px 4px 6px -6px hsla( 20, 30%, 0%, 0.98 ) inset;
}

@media screen and (min-width: 700px )
{
   .nota-game
   {
      /*margin-top: 3px;*/
      padding: 4px;
      box-shadow: 4px 10px 14px -14px hsla( 20, 30%, 0%, 0.98 ) inset;
   }
}

.nota-igame
{
   position: relative;
   height: 100%;
   width: 100%;
}

.nota-ogame
{
   height: 100%;
}

table.position
{
   border: 0px;
   padding: 1px;
}

.cbnota-container
{
   margin-bottom: 0px;
   display: block;
   width: 100%;
   height: 100%;
   /*overflow-y: auto;*/
   -webkit-overflow-scrolling: touch;
}

.nomat
{
   bottom: 0px;
}

span.cbline[data-level="0"][data-commented="1"]
{
   font-weight: bold;
}

span.cbline[data-level="0"]
{
   display: block;
   margin-top: 2px;
}

/*TOP LEVEL VARIANTE*/
span.cbline[data-level="0"]
{
}

span.cbline[data-level="1"]:before
{
   content: "[ ";
}

span.cbline[data-level="1"]:after
{
   content: "]";
}

span.cbline[data-level="2"]:before,
span.cbline[data-level="3"]:before,
span.cbline[data-level="4"]:before,
span.cbline[data-level="5"]:before,
span.cbline[data-level="6"]:before,
span.cbline[data-level="7"]:before,
span.cbline[data-level="8"]:before,
span.cbline[data-level="9"]:before,
span.cbline[data-level="10"]:before,
span.cbline[data-level="11"]:before,
span.cbline[data-level="12"]:before,
span.cbline[data-level="13"]:before,
span.cbline[data-level="14"]:before,
span.cbline[data-level="15"]:before
{
   content: "(";
}

span.cbline[data-level="2"]:after,
span.cbline[data-level="3"]:after,
span.cbline[data-level="4"]:after,
span.cbline[data-level="5"]:after,
span.cbline[data-level="6"]:after,
span.cbline[data-level="7"]:after,
span.cbline[data-level="8"]:after,
span.cbline[data-level="9"]:after,
span.cbline[data-level="10"]:after,
span.cbline[data-level="11"]:after,
span.cbline[data-level="12"]:after,
span.cbline[data-level="13"]:after,
span.cbline[data-level="14"]:after,
span.cbline[data-level="15"]:after
{
   content: ") ";
}

span.cbline[data-level="1"]
{
   font-size: 100%;
   display: block;
   font-weight: normal;
   margin-left: 2ex;
}

span.cbline[data-level="2"]
{
   font-size: 97%;
   display: block;
   margin-left: 2ex;
}

span.cbline[data-level="1"] span.cbmove[data-inx-mv="0"]
{
   text-decoration: none;
   font-weight: bold;
   text-decoration: underline;
   /*text-shadow:1px 1px 1px rgba(0, 0, 0, 0.45);*/
}

span.cbline[data-level="2"] span.cbmove[data-inx-mv="0"]
{
   text-decoration: none;
   text-shadow: none;
}

span.cbline[data-level="2"] span.cbmove[data-inx-mv="0"]
{
   text-decoration: none;
   /*text-shadow:1px 1px 1px rgba(0, 0, 0, 0.2);*/
}

span.cbline[data-level="6"] span.cbmove[data-inx-mv="0"]
{
   text-shadow: none;
   font-weight: normal;
}

span.cbline[data-level="3"]
{
   font-size: 96%;
}

span.cbline[data-level="3"]
{
   display: block;
   margin-left: 1.8ex;
}

span.cbline[data-level="4"]
{
   font-size: 94%;
   color: darkslategray;
   display: block;
   margin-left: 1.8ex;
}

span.cbline[data-level="5"]
{
   display: inline;
   font-size: 92%;
   color: slategray;
   font-weight: normal;
}

span.cbline[data-level="6"],
span.cbline[data-level="7"],
span.cbline[data-level="8"],
span.cbline[data-level="9"] span.cbline[data-level="10"] span.cbline[data-level="11"] span.cbline[data-level="12"] span.cbline[data-level="13"] span.cbline[data-level="14"] span.cbline[data-level="15"]
{
   font-style: italic;
}

span.cbcomment
{
   font-weight: normal;
   font-style: normal;
}

span.cbspec-glyph
{
   font-family: "CBArial";
}

span.cbcol-marker
{
   /*content:url(res/col_marker.gif);*/
   background-image: url("data:image/gif;base64,R0lGODlhEAAQAKIAAAD/AP//AP8AAAAAAP///wAAAAAAAAAAACH5BAEAAAQALAAAAAAQABAAAAM2SLrcOjBK+ZwbVWgdeicYSGycF4giKZhniKks+pKx6wA4Lt85sDc9nw3Y+zGCRksFNGlClNAEADs=");
   background-repeat: no-repeat;
   vertical-align: top;
   width: 16px;
   height: 16px;
   display: inline-block;
}

span.cbcurline
{
   /*color: hsla( 120, 60%, 40%, 1.0 );*/
   background-color: hsla( 60, 90%, 85%, 0.6 );   /*text marker*/
   /*background-image: linear-gradient( to bottom, hsla( 60, 90%, 80%, 0.7 ), hsla( 60, 90%, 90%, 0.3 ) );*/   /* overwrites node colors */
}

span.cbcurlineparent
{
   background-color: hsla( 120, 90%, 85%, 0.3 ); /* text marker*/
}

span.cbcurnode6
{
   background-color: hsla( 340, 70%, 70%, 0.4 ); /* text marker*/
}

span.cbcurnode5
{
   background-color: hsla( 165, 70%, 65%, 0.4 ); /* text marker*/
}

span.cbcurnode4
{
   background-color: hsla( 80, 70%, 60%, 0.4 ); /* text marker*/
}

span.cbcurnode3
{
   background-color: hsla( 40, 70%, 80%, 0.4 ); /* text marker*/
}

span.cbcurnode2
{
   background-color: hsla( 10, 80%, 85%, 0.4 ); /* text marker*/
}

span.cbcurnode1
{
   background-color: hsla( 220, 80%, 85%, 0.4 ); /* text marker*/
}

span.cbgame-result
{
   display: block;
   font-weight: bold;
   padding: 1em 2px 0px 2px;
}

.mat-balance
{
   width: 100%;
}

   .mat-balance span
   {
      display: inline-block;
      width: 16px;
      height: 16px;
      background-size: cover;
      padding: 1px;
   }

      .mat-balance span.piece-wp
      {
         background-image: url(/Common/Media/Buttons/wp-16px.png);
      }

      .mat-balance span.piece-wn
      {
         background-image: url(/Common/Media/Buttons/wn-16px.png);
      }

      .mat-balance span.piece-wb
      {
         background-image: url(/Common/Media/Buttons/wb-16px.png);
      }

      .mat-balance span.piece-wr
      {
         background-image: url(/Common/Media/Buttons/wr-16px.png);
      }

      .mat-balance span.piece-wq
      {
         background-image: url(/Common/Media/Buttons/wq-16px.png);
      }

      .mat-balance span.piece-wk
      {
         background-image: url(/Common/Media/Buttons/wk-16px.png);
      }

      .mat-balance span.piece-bp
      {
         background-image: url(/Common/Media/Buttons/bp-16px.png);
      }

      .mat-balance span.piece-bn
      {
         background-image: url(/Common/Media/Buttons/bn-16px.png);
      }

      .mat-balance span.piece-bb
      {
         background-image: url(/Common/Media/Buttons/bb-16px.png);
      }

      .mat-balance span.piece-br
      {
         background-image: url(/Common/Media/Buttons/br-16px.png);
      }

      .mat-balance span.piece-bq
      {
         background-image: url(/Common/Media/Buttons/bq-16px.png);
      }

      .mat-balance span.piece-bk
      {
         background-image: url(/Common/Media/Buttons/bk-16px.png);
      }

@media screen and ( min-height: 800px )
{

   .mat-balance span
   {
      display: inline-block;
      width: 24px;
      height: 24px;
      background-size: cover;
      margin: 1px;
   }

      .mat-balance span.piece-wp
      {
         background-image: url(/Common/Media/Buttons/wp-24px.png);
      }

      .mat-balance span.piece-wn
      {
         background-image: url(/Common/Media/Buttons/wn-24px.png);
      }

      .mat-balance span.piece-wb
      {
         background-image: url(/Common/Media/Buttons/wb-24px.png);
      }

      .mat-balance span.piece-wr
      {
         background-image: url(/Common/Media/Buttons/wr-24px.png);
      }

      .mat-balance span.piece-wq
      {
         background-image: url(/Common/Media/Buttons/wq-24px.png);
      }

      .mat-balance span.piece-wk
      {
         background-image: url(/Common/Media/Buttons/wk-24px.png);
      }

      .mat-balance span.piece-bp
      {
         background-image: url(/Common/Media/Buttons/bp-24px.png);
      }

      .mat-balance span.piece-bn
      {
         background-image: url(/Common/Media/Buttons/bn-24px.png);
      }

      .mat-balance span.piece-bb
      {
         background-image: url(/Common/Media/Buttons/bb-24px.png);
      }

      .mat-balance span.piece-br
      {
         background-image: url(/Common/Media/Buttons/br-24px.png);
      }

      .mat-balance span.piece-bq
      {
         background-image: url(/Common/Media/Buttons/bq-24px.png);
      }

      .mat-balance span.piece-bk
      {
         background-image: url(/Common/Media/Buttons/bk-24px.png);
      }
}

.div.cbgame-header-compact
{
   padding-bottom:2px;
}

div.cbgame-header
{
   text-align: center;
   width: 100%;
   padding-top: 1px;
   padding-bottom: 0.25em;
   border-bottom: 1px solid rgba( 50, 50, 50, 0.4 );
   box-shadow: 0px 5px 8px -8px hsla( 20, 30%, 0%, 0.98 ) inset;
   background-image: linear-gradient( to bottom, hsla( 30, 10%, 98%, 0.6), hsla( 30, 10%, 95%, 0.6) );
}

@media screen and (min-width: 700px)
{
   div.cbgame-header
   {
      padding: 3px;
      background-image: linear-gradient( to bottom, hsla( 30, 10%, 98%, 1.0), hsla( 40, 10%, 95%, 1.0) );
      box-shadow: 0px 10px 14px -14px hsla( 20, 30%, 0%, 0.98 ) inset;
   }
}

@media screen and (min-width: 1200px)
{
   div.cbgame-header
   {
      font-size:105%;
      padding: 2px;
      padding-top: 3px;
      padding-bottom:4px;
      /*background-image: linear-gradient( to bottom, hsla( 30, 10%, 98%, 1.0), hsla( 40, 10%, 94%, 1.0) );*/
   }
}

/*box-shadow: 0px -40px 50px -50px hsla( 20, 30%, 40%, 0.10 ) inset, 0px 180px 7px -180px hsla( 20, 20%, 20%, 0.80 ) inset;*/


div.cbgame-headerinside
{
   text-align: center;
   width: 100%;
   /*margin-bottom: 0.1em;*/
   padding-bottom: 0.2em;
}

.cbresult
{
   font-size:100%;
   font-weight: bold;
   white-space: nowrap;
   text-align: center;
}


/* DEBUGGING: */
/*td
{
   border: 1px solid green;
}

tr
{
   border: 1px solid red;
}*/

.cbplayerwhite
{
   font-weight: bold;
   text-align:left;
   padding-left:1px;
}

.cbplayerblack
{
   font-weight: bold;
   text-align:right;
   padding-right:1px;
}

.cbflagwhite-morecompact
{
   text-align:left;
   vertical-align:top;
   padding-left:1px;
}

.cbflagblack-morecompact
{
   text-align:right;
   vertical-align:top;
   padding-right:1px;
}

.cbflagwhite
{
   text-align:left;
   vertical-align:top;
   padding-left:3px;
}

.cbflagblack
{
   text-align:right;
   vertical-align:top;
   padding-right:3px;
}

@media screen and (min-width: 800px) and (min-height: 400px)
{
   .cbplayerwhite
   {
      padding-left: 2px;
   }

   .cbplayerblack
   {
      padding-right: 2px;
   }
}

@media screen and (min-width: 1200px) and (min-height: 700px)
{
   .cbplayerwhite
   {
      padding-left: 3px;
   }

   .cbplayerblack
   {
      padding-right: 4px;
   }
}

.cbplayerimage
{
   vertical-align: top;
   border:1px solid lightgray;
}

.cbplayerportrait
{
   vertical-align: top;
}

span.cbplayer
{
   font-weight: bold;
}

span.cbplayertiny
{
   font-weight: bold;
}

span.cbevent
{
   font-size:96%;
   text-align:center;
}

span.cbeventdate
{
   font-size:90%;
   padding-left:0.35em!important;
}

span.cbsite
{
   font-size:90%;
   font-style:italic;
   margin-left: 4px;
   margin-right:5px;
   padding: 0px !important;
}

span.cbmain-header
{
   display: block;
   font-size: larger;
   padding:3px;
}

span.cbmain-header-tiny
{
   font-size:90%;
   display: block;
   overflow: hidden;
   box-shadow: 0px 10px 14px -14px hsla( 20, 30%, 0%, 0.98 ) inset;
   padding:1px;
}

span.cbmain-header-verycompact
{
   font-size:92%;
   display: block;
   overflow: hidden;
   box-shadow: 0px 10px 14px -14px hsla( 20, 30%, 0%, 0.98 ) inset;
   padding:2px;
}

span.cbmain-header-morecompact
{
   font-size:94%;
   display: block;
   overflow: hidden;
   box-shadow: 0px 10px 14px -14px hsla( 20, 30%, 0%, 0.98 ) inset;
   padding:2px;
}

span.cbmain-header-compact
{
   font-size:95%;
   display: block;
   overflow: hidden;

   background-image: linear-gradient( to bottom, hsla( 30, 10%, 98%, 1.0), hsla( 40, 10%, 95%, 1.0) );
   box-shadow: 0px 10px 14px -14px hsla( 20, 30%, 0%, 0.98 ) inset;
}

span.cbeco
{
   font-size: xx-small;
   font-weight: bold;
   margin: 0px;
   padding: 0px;
}

span.cbround:before
{
   content: "(";
}

span.cbround:after
{
   content: ")";
}

span.cbannotator:before
{
   content: "[";
}

span.cbannotator:after
{
   content: "]";
}

span.cbannotator
{
   font-style: italic;
   font-size: 95%;
}

span.cbelo
{
   font-size: 85%;
   padding-left:0.25em!important;
   font-weight:normal;
}

span.cbelocompact
{
   font-size: 85%;
   padding-left:0.20em!important;
   font-weight:normal;
}

div.cbgame-header span
{
   padding: 0 0.2ex 0 0.2ex;
}

span.cbnota-title
{
   font-family: Roboto, sans-serif;
   text-transform: uppercase;
   /*font-weight: bold;*/
   font-size: 75%;
}

@media screen and (min-width: 1000px) and (min-height: 700px)
{
   span.cbnota-title
   {
      font-size: 90%;
   }
}

 	
/*********************************************************************************************
cbDiagram plugin.
*********************************************************************************************/

figure.cbdiag
{
   display: block;
}

.cbdiag-img
{
   margin: 1em auto 1em auto;
   display: block;
}

.cbdiag-left,
.cbdiag-right,
.cbdiag-down,
.cbdiag-up
{
   padding: 2px;
   border: thin none gray;
}

.cbdiag-left
{
   border-left-style: solid;
}

.cbdiag-right
{
   border-right-style: solid;
}

.cbdiag-down
{
   border-bottom-style: solid;
}

.cbdiag-up
{
   border-top-style: solid;
}

figure.cbdiag > figcaption
{
   font-style: normal;
   font-size: 80%;
   text-align: center;
   font-weight: normal;
   margin: 0.3em auto 0.3em auto;
   display: block;
   font-family: Arial;
}

.cbeval-root
{
   position: relative;
   width: 100%;
   height: 100px;
}

   .cbeval-root .cbeval-img
   {
      width: 100%;
      height: 100%;
   }

/*/////////////////////////////////////*/
/*REPLAY CLASSES*/
.cbrepl-table
{
   border-collapse: separate;
   border-spacing: 0px;
   border: thin solid black;
   margin: 1em 0em;
   empty-cells: show;
}

.cbrepl-left
{
   background-color: Gray;
   padding: 8px;
   border: 0px;
}

.cbrepl-right
{
   background-color: #FEFDE8;
   padding: 8px;
   border-left: thin solid black;
   border-top: 0px;
   border-bottom: 0px;
   border-right: 0px;
   width: 100%;
}

.cbrepl-board-container
{
   background-color: #606060;
   padding: 8px;
   border: thin solid black;
}

.cbrepl-panel
{
   margin: 8px 0 0 0;
   text-align: center;
   padding: 4px;
}

   .cbrepl-panel button
   {
      width: 45px;
      height: 45px;
      border-style: none;
      background-color: transparent;
      background-image: url(panel.png);
   }

      .cbrepl-panel button[value="first"]
      {
         background-position: 0% 0%;
      }

      .cbrepl-panel button[value="last"]
      {
         background-position: 20% 0%;
      }

      .cbrepl-panel button[value="prev"]
      {
         background-position: 40% 0%;
      }

      .cbrepl-panel button[value="next"]
      {
         background-position: 60% 0%;
      }

      .cbrepl-panel button[value="start-animate"]
      {
         background-position: 80% 0%;
      }

      .cbrepl-panel button[value="stop-animate"]
      {
         background-position: 100% 0%;
      }


      .cbrepl-panel button[value="start-animate"][disabled]
      {
         background-position: 80% 33.33%;
      }

      .cbrepl-panel button[value="stop-animate"][disabled]
      {
         background-position: 100% 33.33%;
      }

      .cbrepl-panel button[value="first"][disabled]
      {
         background-position: 0% 33.33%;
      }

      .cbrepl-panel button[value="prev"][disabled]
      {
         background-position: 40% 33.33%;
      }

      .cbrepl-panel button[value="next"][disabled]
      {
         background-position: 60% 33.33%;
      }

      .cbrepl-panel button[value="last"][disabled]
      {
         background-position: 20% 33.33%;
      }

      .cbrepl-panel button[value="first"]:not([disabled]):active
      {
         background-position: 0% 100%;
      }

      .cbrepl-panel button[value="last"]:not([disabled]):active
      {
         background-position: 20% 100%;
      }

      .cbrepl-panel button[value="prev"]:not([disabled]):active
      {
         background-position: 40% 100%;
      }

      .cbrepl-panel button[value="next"]:not([disabled]):active
      {
         background-position: 60% 100%;
      }

      .cbrepl-panel button[value="start-animate"]:not([disabled]):active
      {
         background-position: 80% 100%;
      }

      .cbrepl-panel button[value="stop-animate"]:not([disabled]):active
      {
         background-position: 100% 100%;
      }

.cbcomment
{
   color: brown;
}

span.cbmove:hover
{
   background-color: #F5F1D3;
   -moz-border-radius: 0.2em;
   border-radius: 0.2em;
}

span.cbmove:active,
span.cbmove.cbcur-move,
span.cbmove.cbcur-move:hover
{
   background-color: brown;
   color: white;
   -moz-border-radius: 0.2em;
   border-radius: 0.2em;
}

.cbrepl-adv
{
   color: White;
   font-family: Arial;
}

   .cbrepl-adv.any
   {
      border-top: 2px solid gray;
      padding-top: 8px;
      margin-top: 8px;
   }

   .cbrepl-adv a
   {
      color: White !important;
   }

   .cbrepl-adv > .cbproduct
   {
      display: table;
      width: 100%;
   }

      .cbrepl-adv > .cbproduct img
      {
         border: thin solid white;
         margin-right: 8px;
         padding: 2px;
      }

      .cbrepl-adv > .cbproduct .title
      {
      }

      .cbrepl-adv > .cbproduct .authors
      {
         font-size: 80%;
      }

   .cbrepl-adv .cbp-row
   {
      display: table-row;
   }

   .cbrepl-adv .cbp-left,
   .cbrepl-adv .cbp-right
   {
      display: table-cell;
      vertical-align: top;
   }

   .cbrepl-adv .cbp-right
   {
      width: 100%;
   }

.cbrepl-eval.any
{
   border-top: 2px solid gray;
   padding-top: 8px;
   margin-top: 8px;
}



.cbrepl-download
{
   text-align: center;
   left: 0px;
   right: 0px;
   text-align: center;
   /*    position: absolute;*/
   bottom: 8px;
   margin-top: 16px;
}

   .cbrepl-download a
   {
      color: brown;
      font-family: Arial;
   }

.cbrepl-gameselect
{
   padding-bottom: 8px;
}

   .cbrepl-gameselect button
   {
      width: 20px;
      height: 20px;
      border-style: none;
      background-color: transparent;
      background-image: url(select.png);
   }

.cbadv-slogan-up, .cbadv-slogan-down
{
   font-weight: bold;
   margin-bottom: 0.5em;
   margin-top: 0.5em;
}

.cbadv-slogan-up
{
   margin-bottom: 0.5em;
}

.cbadv-slogan-down
{
   margin-top: 0.5em;
}

/*/////////////////////*/

.LogTrace
{
   font-size: 10px;
   border-top: thin solid rgba(230, 230, 230, 0.4);
   padding-top: 2px;
   color: darkblue;
}

.LogError
{
   border-top: thin solid rgba(230, 230, 230, 0.4);
   color: red;
   padding-top: 3px;
   padding-bottom: 3px;
}

.LogCAPError
{
   text-transform:uppercase;
   font-size: 105%;
   border-top: thin solid rgba(230, 230, 230, 0.4);
   color: red;
   padding-top: 3px;
   padding-bottom: 3px;
}

.LogException
{
   border-top: thin solid rgba(230, 230, 230, 0.4);
   color: darkred;
   font-weight: bold;
   padding-top: 3px;
   padding-bottom: 3px;
}

.LogChat
{
   padding-top: 2px;
   font-size: 13px;
   /*font-family: sans-serif;*/
   font-family: Roboto, 'Merriweather', sans-serif;
   color: #000000;
}

.LogIntoChat
{
   padding-top: 2px;
   font-size: 12px;
   font-family: Roboto, 'Merriweather', sans-serif;
   color: #6600FF;
}

.LogKibitzChat
{
   padding-top: 3px;
   font-size: 12px;
   font-family: Roboto, 'Merriweather', sans-serif;
   color: #0e0e52;
}

.LogSendChat
{
   padding-top: 2px;
   font-size: 12px;
   font-family: Roboto, 'Merriweather', sans-serif;
   /*font-family: sans-serif;*/
   color: #555555;
}

.LogBold
{
   padding-top: 2px;
   font-size: 12px;
   /*font-family: 'Merriweather', sans-serif;*/
   font-family: Roboto, 'Montserrat', sans-serif;
   font-weight: lighter;
   text-transform: uppercase;
   font-weight: bold;
}

.LogGreen
{
   padding-top: 1px;
   font-family: Roboto, 'Montserrat', sans-serif;
   font-weight: lighter;
   text-transform: uppercase;
   font-size: 11px;
   color: green;
}

.LogRed
{
   padding-top: 1px;
   font-size: 12px;
   color: red;
}

.LogWarning
{
   padding-top: 2px;
   font-size: 13px;
   font-family: sans-serif;
   font-style: italic;
   color: darkred;
   padding-top: 2px;
   text-align: left;
}

.LogForceLogOff
{
   padding-top: 4px;
   font-size: 16px;
   font-family: Roboto, sans-serif;
   color: darkmagenta;
   padding-top: 2px;
}


/****************************************/

/*.clsNotation
{
   font-size: 13px;
   font-family: sans-serif;
}*/

.ChessBoard2D
{
   cursor: pointer;
}

/************* database grid:*/

.dbPlayerCell
{
}

.dbEventCell
{
   font-style: italic !important;
}

.dbResultCell
{
   font-weight: bold !important;
}

.video
{
   background-color: #606060;
}

.plNameCell
{
   font-weight: 500 !important;
   text-indent: 12px !important; /* make space for icon */
}

.plEloCell
{
}

.plDefaultCell
{
}

.plStatCell
{
   /*	text-indent: 14px !important;
	color: #bbb;*/
   color: #444;
}

.plRankCell
{
   color: #444;
}

.gmWhiteCell
{
   font-weight: 400 !important;
   text-indent: 13px !important; /* make space for icon */
   font-size: larger;
}

.gmBlackCell
{
   font-weight: 400 !important;
   font-size: larger;
}

.gmEloCell
{
}

.gmLine
{
}

.gmMoves
{
   /*font-style: italic;*/
   font-size: 95%;
}

.gmPremiumOnly
{
   font-size: 70%;
   color: lightgray;
}

.liveBookMove
{
   font-size: 100%;
   font-weight: 600 !important;
}

.liveBookMoreMoves
{
   font-size: 75%;
   font-weight: normal;
   /**/padding-left: 0.1em;*/
}

.liveBookMyLine
{
   font-weight: 600 !important;
   font-size: 110%;
}

.liveBookMoveInRep
{
   font-weight: 600 !important;
   font-size: 110%;
}

.liveBookMoveImportant
{
   font-weight: 600 !important;
   font-size: 110%;
}

.liveBookBoth
{
   color: darkcyan;
}

.liveBookWhite
{
   color: blue;
}

.liveBookBlack
{
   color: hsl( 130, 85%, 25% );
}

.liveBookGames
{
}

.liveBookResult
{
}

.liveBookEval
{
   /*color: hsla( 120, 50%, 20%, 1.0 );*/
   font-size: 115%;
   text-shadow:1px 1px 1px rgba(0, 0, 0, 0.25);
}

.liveBookEloAvg
{
}

.liveBookVisits
{
   font-weight: 400 !important;
}

.liveBookPlayers
{
   font-style: italic;
   font-size: 95%;
}

@media screen and (min-width: 800px) and (min-height: 600px)
{
   .dbPlayerCell
   {
      font-weight: 700 !important;
   }
}

@media screen and (min-width: 1000px) and (min-height: 700px)
{
   .dbPlayerCell
   {
      font-size: 110%;
   }

   .plNameCell
   {
      font-size: larger;
   }



   .liveBookMove
   {
      font-size: 115%;
      font-weight: 600 !important;
   }

   .liveBookMyLine
   {
      font-weight: 600 !important;
      font-size: 135%;
   }

   .liveBookMoveInRep
   {
      font-weight: 600 !important;
      font-size: 140%;
   }

   .liveBookMoveImportant
   {
      font-weight: 600 !important;
      font-size: 145%;
   }
}


/*HACK*/
#tbBookGrid .x-grid-cell-inner
{
   direction: ltr;
}

/*HACK*/
#tbPanelGrid .x-grid-cell-inner
{
   direction: ltr;
}

.gmMoveLen
{
}

.gmKibitzers
{
}

.gmTourn
{
   font-style: italic;
}

.challName
{
   font-weight: 400 !important;
   text-indent: 13px !important; /* make space for icon */
}


.clsPing
{
   font-weight: bold;
   background-color: #DCF7CC;
   font-size: larger;
}

.clsWait
{
   cursor: wait;
}

.clsPointer
{
   cursor: crosshair;
}

.TournGroup-live
{
   color: #108810;
}

.TournGroup-finished
{
   color: #333333;
}


/*************************************/

.NonMobiH1
{
   font-size: 21px;
   text-align: center;
   font-family: sans-serif;
}

.NonMobiH3
{
   font-size: 17px;
   text-align: center;
   font-family: sans-serif;
}

.NonMobiBody
{
   font-size: 17px;
   text-align: center;
   font-family: sans-serif;
}

.NonMobiLink
{
   color: red !important;
   font-family: sans-serif;
   text-align: center;
   font-size: 20px;
}

   .NonMobiLink:visited
   {
      color: black !important;
   }


table.scroll
{
   border-spacing: 0;
   border: 0px;
   padding: 1px;
}

table.notaTable
{
   width: 100%;
   margin-left: auto;
   margin-right: auto;
}

/***********************/

.PlaychessLogoInRibbon
{
   background-image: url( 'media/playchess_48pix.png');
   background-repeat: no-repeat;
   background-position: center;
   vertical-align: middle;
}

.cb-button
{
   border-radius: 1px;
   border: 1px solid gray;
   font-size: 12px;
   font-family: Roboto, sans-serif;
   font-weight: normal;
   color: white;
}

   .cb-button:disabled
   {
      color: lightgrey;
      border-color: gray;
   }

.cb-CloseButton
{
   border-radius: 1px;
   border: 1px solid gray;
   /* background-color: rgb( 220, 50, 0 );*/
   background-image: linear-gradient(to bottom right, rgb(255,6,19),rgb(187,24,23));
   color: white;
   font-weight: bold;
   padding: 0px; /* essential for proper centering in small buttons*/
}

   .cb-CloseButton:hover
   {
      /*background-color: rgb( 240, 100, 50 );*/
      background-image: linear-gradient(to bottom right, rgb(255,255,19),rgb(147,140,13));
   }

   .cb-CloseButton:active
   {
      /*background-color: rgb( 200, 100, 60 );*/
      background-image: linear-gradient(to bottom right, rgb(155,155,39),rgb(137,114,33));
   }

@media screen and (min-height: 600px)
{
   .cb-CloseButton
   {
      border-radius: 3px;
      border: 1px solid #aaaaaa;
   }
}


#posInputBtnsBG .cb-button
{
   border-radius: 4px;
   background-color: rgba(238, 213, 183, 0.4);
}

   #posInputBtnsBG .cb-button:hover
   {
      background-color: rgba(238, 213, 183, 0.6);
   }

   #posInputBtnsBG .cb-button:active
   {
      background-color: rgba(238, 213, 183, 0.8);
   }


#content
{
   position: absolute;
   top: 50px;
   left: 0;
   right: 0;
   bottom: 50px;
   overflow: scroll;
   -webkit-overflow-scrolling: touch;
}

/**************** Forms *****************/

.formSubTitle
{
   font-weight: bold;
}

/*****************************************/
/**
    CRAZY SHIT for TPL
*/
tpl[if="0"],
tpl[if=""]
{
   display: none;
}


/***********************
    ENGINE
*/

.lines-container
{
   overflow-y: auto;
   width: 100%;
   height: 100%;
   padding: 4px;
}

.engine-lines
{
   font-family: Roboto, sans-serif;
   font-size: 0.85em;
}

@media screen and (min-height: 300px)
{
   .engine-lines
   {
      font-size: 0.9em;
   }
}

@media screen and (min-height: 400px)
{
   .engine-lines
   {
      font-size: 0.95em;
   }
}

@media screen and (min-height: 500px)
{
   .engine-lines
   {
      font-size: 1.00em;
   }
}

@media screen and (min-height: 600px)
{
   .engine-lines
   {
      font-size: 1.05em;
   }
}

@media screen and (min-height: 700px)
{
   .engine-lines
   {
      font-size: 1.1em;
   }
}

@media screen and (min-height: 800px)
{
   .engine-lines
   {
      font-size: 1.15em;
   }
}

@media screen and (min-height: 900px)
{
   .engine-lines
   {
      font-size: 1.2em;
   }
}

.engine-lines .line
{
   /*font-family: sans-serif;*/
   /*font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Arial, Helvetica, sans-serif;*/
   font-family: Roboto, sans-serif;
   padding-bottom: 2px;
   padding-top: 2px;
}

   .engine-lines .line .nota
   {
      padding-bottom: 2px;
      white-space: nowrap;
      text-overflow: ellipsis;
   }

   .engine-lines .line.outdated .nota
   {
      color: darkgray;
   }

.engine-lines[data-lines="1"] .line .nota
{
   font-weight: bold;
   white-space: inherit;
   text-overflow: inherit;
}

.engine-lines .line .nota .pvnum
{
   margin-right: 4px;
}

   .engine-lines .line .nota .pvnum:after
   {
      content: ".";
   }

.engine-lines .line .nota .symbol
{
   margin-right: 2px;
}

.engine-lines .data,
.engine-lines .data-common
{
   font-size: 90%;
   font-weight: normal;
   color: darkslategray;
   padding-left: 1em;
}

.engine-lines .line .data
{
   display: none;
}

.engine-lines[data-lines="1"] .line .data
{
   display: inherit;
}

.engine-lines .data-common
{
   display: inherit;
}

.engine-lines[data-lines="1"] .data-common
{
   display: none;
}

.engine-lines[data-lines="1"] .pvnum
{
   display: none;
}

div.board-toolbar div.brd-btn
{
   display: inline-block;
   height: 100%;
   /*margin-right: 8px;*/
}

   div.board-toolbar div.brd-btn div.icn
   {
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
      margin: 10% auto;
      height: 80%;
   }

   div.board-toolbar div.brd-btn[data-enabled="false"] div.icn
   {
      opacity: 0.3;
   }

   div.board-toolbar div.brd-btn[data-on="true"]
   {
      background-color: rgba(255,255,255,0.5);
   }

div.board-toolbar div.brd-btn
{
   background-color: rgba(255,255,255,0.1);
}

   div.board-toolbar div.brd-btn:hover
   {
      background-color: rgba(255,255,255,0.3);
   }

   div.board-toolbar div.brd-btn:active
   {
      background-color: rgba(255,255,255,0.5);
   }

   div.board-toolbar div.brd-btn div.txt
   {
      display: none;
   }

div.board-toolbar[data-cnt="1"] div.brd-btn
{
   width: 100%;
}

div.board-toolbar[data-cnt="2"] div.brd-btn
{
   width: 50%;
}

div.board-toolbar[data-cnt="3"] div.brd-btn
{
   width: 33%;
}

div.board-toolbar[data-cnt="4"] div.brd-btn
{
   width: 25%;
}

div.board-toolbar[data-cnt="5"] div.brd-btn
{
   width: 20%;
}

div.board-toolbar[data-cnt="6"] div.brd-btn
{
   width: 16%;
}

div.board-toolbar[data-cnt="7"] div.brd-btn
{
   width: 14.27%;
}

div.board-toolbar[data-cnt="8"] div.brd-btn
{
   width: 12.5%;
}

/**************************************************************/
.board-msg
{
   /*font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Roboto, Arial, Helvetica, sans-serif;*/
   font-family: Roboto, sans-serif;
}

   .board-msg.modal
   {
      z-index: 20;
   }

      .board-msg.modal:after
      {
         content: "";
         position: absolute;
         left: -10000px;
         top: -10000px;
         right: -10004px;
         bottom: -10004px;
         border-color: rgba(0,0,0,0.2);
         border-width: 10000px;
         border-style: solid;
      }

.splitter
{
   background-color: black;
   position: absolute;
}

   .splitter.dir-v
   {
      height: 8px;
      width: 100%;
      cursor: row-resize;
   }

   .splitter.dir-h
   {
      width: 8px;
      height: 100%;
      cursor: col-resize;
   }

   .splitter:hover
   {
      background-color: rgb( 140, 140, 140);
   }

/**********************************************************/

.ExtToolTips
{
   padding: 2px;
   background-color: rgb(247, 243, 243);
}

/**********************************************************/

.x-splitter-horizontal
{
   /*background-image:linear-gradient( to bottom, rgb( 224, 224, 224 ), rgb( 232, 232, 232 ), rgb( 213, 213, 213 ) );*/
   background-image: linear-gradient( to bottom, rgb( 246, 246, 246), rgb( 235, 235, 235 ) 30% );
}

.x-splitter-vertical
{
   /*background-image:linear-gradient( to right, rgb( 235, 235, 235), rgb( 246, 246, 246 ) 30% );*/
   background-image: linear-gradient( to right, rgb( 246, 246, 246), rgb( 235, 235, 235 ) 30% );
}

.CBRibbonBar
{
   /*background-image:linear-gradient( to right, rgb( 225, 225, 225 ) 30%, rgb( 249, 249, 249 ) );*/
   background-image: linear-gradient( to right, rgb( 220, 216, 216 ), rgb( 255, 252, 252 ) 35%, rgb( 230, 230, 230 ) );
}


/*@media screen and (min-width: 800px ) {
   .CBRibbonBarTraining {
      background-image: linear-gradient( to right, rgb( 216, 222, 216 ), rgb( 252, 255, 252 ) 280px, rgb( 230, 234, 230 ) );
   }


   .CBRibbonBarOnlineDB {
      background-image: linear-gradient( to right, rgb( 220, 215, 208 ), rgb( 255, 253, 252 ) 40%, rgb( 220, 210, 200 ) );
   }
}*/

.CBChatOut
{
   border-radius: 1px; /* iOS 8 hack for box-shadow problem*/
   box-shadow: 0px 5px 9px -9px hsla( 20, 30%, 0%, 0.98 ) inset;
}

/*.CBInfoParentLoggedIn
{
   background-image: linear-gradient( to right, rgba(6, 216,19,1.0), rgba(24, 147,23,1.0) );
}

.CBInfoParentNotLoggedIn
{
   background-image: linear-gradient( to right, rgba(254, 254,252,1.0), rgba( 251, 251,247,1.9) );
}*/

.CBInfoNotLoggedIn
{
   width: 100%;
   /*display: inline-block;*/
   font-family: Roboto, 'Merriweather', Helvetica, sans-serif;
   box-shadow: 0px 5px 9px -9px hsla( 20, 30%, 0%, 0.98 ) inset;
   padding: 2px;
   color: black;
   font-size: xx-small;
}

.CBInfoLoggedIn
{
   margin: auto;
   font-family: Roboto, 'MontSerrat', Helvetica, sans-serif;
   font-size: 10px;
   letter-spacing: 0.06em;
   text-transform: uppercase;
   text-align: center;
   color: white;
   padding-top: 2px;
}

.CBInfoNotLoggedIn h3
{
   font-family: Roboto, 'Montserrat', sans-serif;
   text-transform: uppercase;
   font-weight: lighter;
   margin-bottom: 3px;
}

.CBInfoNotLoggedIn a
{
   font-family: Roboto, 'Montserrat', sans-serif;
   text-transform: uppercase;
   font-weight: lighter;
}

.CBEngineOut
{
   box-shadow: 0px 5px 9px -9px hsla( 20, 30%, 0%, 0.98 ) inset;
}


@media screen and (min-height: 450px)
{
   .CBInfoNotLoggedIn
   {
      font-size: x-small;
   }

      .CBInfoNotLoggedIn h3
      {
         margin-bottom: 4px;
      }

   .CBInfoLoggedIn
   {
      font-size: 12px;
      letter-spacing: 0.08em;
      padding-top: 3px;
   }
}

@media screen and (min-height: 600px)
{
   .CBChatOut
   {
      /*border-top: 1px solid rgba( 50, 50, 50, 0.15 );*/
      border-radius: 1px; /* iOS 8 hack for box-shadow problem*/
      box-shadow: 0px 11px 20px -20px hsla( 20, 30%, 0%, 0.96 ) inset;
   }

   .CBEngineOut
   {
      /*border-top: 1px solid rgba( 50, 50, 50, 0.15 );*/
      border-radius: 1px; /* iOS 8 hack for box-shadow problem*/
      box-shadow: 0px 11px 20px -20px hsla( 20, 30%, 0%, 0.96 ) inset;
   }

   .CBInfoNotLoggedIn
   {
      /*border-top: 1px solid rgba( 50, 50, 50, 0.15 );*/
      box-shadow: 0px 11px 20px -20px hsla( 20, 30%, 0%, 0.96 ) inset;
      padding: 5px;
      font-size: small;
   }

      .CBInfoNotLoggedIn h3
      {
         margin-bottom: 6px;
      }

   .CBInfoLoggedIn
   {
      padding-top: 4px;
      font-size: 14px;
      letter-spacing: 0.09em;
   }
}

@media screen and (min-height: 850px)
{

   .CBChatOut
   {
      /*border-top: 1px solid rgba( 50, 50, 50, 0.15 );*/
      border-radius: 1px; /* iOS 8 hack for box-shadow problem*/
      box-shadow: 0px 15px 24px -24px hsla( 20, 30%, 0%, 0.98 ) inset;
   }

   .CBEngineOut
   {
      /*border-top: 1px solid rgba( 50, 50, 50, 0.15 );*/
      border-radius: 1px; /* iOS 8 hack for box-shadow problem*/
      box-shadow: 0px 15px 24px -24px hsla( 20, 30%, 0%, 0.98 ) inset;
   }

   .CBInfoNotLoggedIn
   {
      font-size: small;
      box-shadow: 0px 15px 24px -24px hsla( 20, 30%, 0%, 0.98 ) inset;
   }

      .CBInfoNotLoggedIn h3
      {
         margin-bottom: 8px;
      }
}

.BoardAreaShadowT
{
   /*border: 1px solid red;*/
   border-radius: 1px; /* iOS 8 hack for box-shadow problem*/
   box-shadow: 0px 18px 25px -25px hsla( 20, 30%, 0%, 0.98 ) inset;
   /*-12px 0px 19px -19px hsla( 20, 30%, 0%, 0.98 ) inset, 
      12px 0px 19px -19px hsla( 20, 30%, 0%, 0.98 ) inset;*/
}

.BoardAreaShadowR
{
   /*border: 1px solid red;*/
   border-radius: 1px; /* iOS 8 hack for box-shadow problem*/
   box-shadow: -12px 0px 25px -25px hsla( 20, 30%, 0%, 0.98 ) inset;
}

.BoardAreaShadowB
{
   /*border: 1px solid red;*/
   border-radius: 1px; /* iOS 8 hack for box-shadow problem*/
   box-shadow: 0px -12px 19px -19px hsla( 20, 30%, 0%, 0.98 ) inset, -12px 0px 19px -19px hsla( 20, 30%, 0%, 0.98 ) inset, 12px 0px 19px -19px hsla( 20, 30%, 0%, 0.98 ) inset;
}

.BoardAreaShadowL
{
   /*border: 1px solid red;*/
   border-radius: 1px; /* iOS 8 hack for box-shadow problem*/
   box-shadow: 12px 0px 19px -19px hsla( 20, 30%, 0%, 0.98 ) inset;
}

.BoardBottomURL
{
   text-align: center;
   font-family: Roboto, sans-serif;
   font-size: 21px;
   font-weight: normal;
   /*color: #f6f5aa;*/
   color: #fff190;
}

.x-header, x-panel-header
{
   background-image: linear-gradient( to right, rgb( 235, 235, 235 ), rgb( 249, 249, 249 ) 60% ) !important;
}

/* another Ext JS hack*/
.x-grid-item, .x-btn-inner-default-toolbar-large, .x-btn-inner-default-toolbar-medium, .x-btn-inner-default-toolbar-small
{
   font-family: Roboto,tahoma,arial,verdana,sans-serif;
}


.CBSymbol
{
   font-family: "CBArial";
}

.shakeAnimation
{
   animation: animShake 2.0s ease;
   animation-delay: 3s;
   animation-iteration-count: 5;
   animation-duration: 5s;
}

@keyframes animShake
{
   0%, 100%
   {
      transform: translateX(0);
   }

   10%, 30%, 50%, 70%, 90%
   {
      transform: translateX(-3px);
   }

   20%, 40%, 60%, 80%
   {
      transform: translateX(3px);
   }
}

.blinkAnimation
{
   animation: blinkFrames 0.5s linear 6;
}

@keyframes blinkFrames
{
   0%
   {
      opacity: 1.0;
   }

   25%
   {
      opacity: 0.8;
   }

   50%
   {
      opacity: 0.1;
   }

   70%
   {
      opacity: 0.8;
   }

   100%
   {
      opacity: 1.0;
   }
}

.gridEmptyText
{
   font-family: Roboto;
   margin-top: 20px;
   margin-left: 20px;
   /*padding-top: 40px;*/
   font-size: 120%;
}

.PgnButton
{
   padding-left: 2px;
   padding-right:2px;
}

.eloSmaller
{
   font-size: 80%;
}
 

/*@keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 1; }
    50.01% { opacity: 0; }
    100% { opacity: 0; }
}*/

/* Für die dunklen Mutter Ribbons */
/*.x-btn-inner
{
   color:white!important;
}*/


/*.cbMenuItem32
{
   line-height: 32px;
}

.cbMenuItem16
{
   line-height: 24px;
}

.cbMenuIcon16
{
   line-height: 32px;
   width: 40px;
   height: 40px;
}*/

/*.x-menu-item-icon-default
{
   width: 32px;
   height: 32px;
}*/