/* ******************************** */
/* Body classes                     */
/* ******************************** */
/*
  web     - web page
  app     - app page; additionally:
   apps   - app page on a smart phone (size < 410)
   appt   - app page on a tablet      (size > 410 && < 610)
  pwa     - progressive web app

  en      - english (preferred browser language)
  de      - german  (preferred browser language)

  msie    - microsoft internet explorer
  edge    - microsoft edge
  opera   - opera
  chrome  - google chrome
  safari  - apple safari
  firefox - mozilla firefox

  win     - windows
  ios     - ios
  mac     - mac
  android - android

  mobile  - mobile device (android, ios, ...)
*/


/* ******************************** */
/* Media Queries                    */
/* ******************************** */
/*

mobile
@media only screen and (max-width: 610px) { }

phone
@media only screen and (max-width: 410px) { ]

tablet
@media only screen and (min-width: 410px) { }

desktop
@media only screen and (min-width: 610px) {}

*/

/* ******************************** */
/* Generic display/print classes    */
/* ******************************** */
/*
  web     - display on web page only
  app     - display on app page only

  ext     - mark external links by an arrow

  screen  - display on screen only
  print   - print only

  de      - display if accept languade EN only
  en      - display if accept language DE only
*/


/* ******************************** */
/* visibility of elements           */
/* ******************************** */

@media screen { .print  { display: none; } }
@media print  { .screen { display: none; } }

body.web .app { display: none; }
body.web .pwa { display: none; }
body.app .web { display: none; }
body.app .pwa { display: none; }
body.pwa span.pwa { display: inline; }
body.pwa div.pwa  { display: block; }
body.pwa p.pwa    { display: block; }

body.en div.de, body.en p.de { display: none; }
body.de div.en, body.de p.en { display: none; }

/* this would be better, but is in conflict with img.de */
/* body.en .de { display: none; } */
/* body.de .en { display: none; } */

/* ******************************** */
/* Common styles for www.janko.at   */
/* ******************************** */

/* for compatibility with older browsers */
footer, header, main, article, section, aside, nav
{
  display: block
}

body, table, th, td,
footer, header, main, article, section, aside, nav
{
  font-family: Verdana, Arial, Helvetica, Sans-Serif;
  font-size: 12pt;
  line-height: 135%;
}

/* small, phone */

@media only screen and (max-width: 410px) 
{
body, table, th, td
{
  font-size: 13pt;
  line-height: 130%;
}
body
{
  margin-left: 10px;
  margin-right: 10px;
}}

/* nedium, tablet */

@media only screen and (min-width: 410px) 
{
body, table, th, td
{
  font-size: 13pt;
  line-height: 125%;
}
body
{
  margin-left: 15px;
  margin-right: 15px;
}}

/* large, desktop */

@media only screen and (min-width: 610px) 
{
body, table, th, td
{
  font-size: 12pt;
  line-height: 135%;
}
body
{
  margin-left: 20px;
  margin-right: 20px
}}

/* increase the line height for link lists (paragraphs with
 * text links) for mobile devices to ensure that the links
 * can be selected more easily with a finger */

@media only screen and (max-width: 610px) 
{
.linklist
{
  line-height: 135%;
}}

/* increase the gap between text blocks */

p, pre, hr, ul, ol, dl, dt, li, div, blockquote
{
  padding-top: 0.0em;
  padding-bottom: 0.0em;
  margin-top: 0.6em;
  margin-bottom: 0.0em;
}

/* unfortunately, sans-serif-monospace is very seldom available;
 * most monospace text will be rendered with courier. */

pre, .pre
{
  font-family: sans-serif-monospace, "Courier New", Courier, Monospace;
  font-size: 1.0em;
  line-height: 110%;
}

input
{
  font-family: Verdana, Arial, Helvetica, Sans-Serif;
  font-size: 1.0em;
}

hr
{
  height: 0.1em;
  margin-top: 1.0em;
}

blockquote
{
  margin-left: 1.5em;
}

.zitat, .note
{
  border-left: 0.2em solid;
  margin-left: 0.4em;
  padding-left: 0.8em;
}

.note
{
  font-style: italic;
}

.boxed, .impressum
{
  padding: 0.3em 0.6em 0.3em 0.6em;
  margin: 0.9em 0.0em 0.3em 0.0em;
  border-style: solid;
  border-width: 0.1em;
}

.small,  small   { font-size: 90%; }
.large,  large   { font-size: 115%; }
.ins,    ins     { }
.del,    del     { text-decoration: line-through; }

.right           { float: right; }
.left            { float: left; }
.def             { border-bottom: dotted 1px; }
.hidden          { display: none; }
.intern          { display: none; }

.outline         {-webkit-text-stroke-width: 1px;
                  -webkit-text-fill-color:   white; 
                  -webkit-text-stroke-color: black; }
.secret          { color: rgb(153,153,153);
                   background-color: rgb(153,153,153);}
.secret:hover    { color: rgb(0,0,0);
                   background-color: rgb(255,255,255);}

code             { white-space: pre; }

/* ******************************** */
/* reset all floats                 */
/* ******************************** */

.reset
{
  clear: both;
}

div.reset
{
  font-size: 1pt;
  line-height: 1pt;
  margin-top: 0pt;
  margin-bottom: 0pt;
  padding-top: 0pt;
  padding-bottom: 0pt;
}

/* ******************************** */
/* Puzzle/Game-Container            */
/* ******************************** */

@media only screen and (max-width: 610px) 
{
div#oj-container
{
  text-align: center;
}
div#oj-container table
{
  margin: 0 auto;
  text-align: left;
}}

/* ******************************** */
/* Keystrokes                       */
/* ******************************** */

kbd, .kbd
{
  background-image: linear-gradient(rgba(255,255,255,.4),rgba(127,127,127,.2));
  border: 1px solid;
  border-radius: 2px;
  border-color: #DDD #AAA #888 #CCC;
  font-family: inherit;
  font-size: 80%;
  font-variant: small-caps;
  padding: 0.1em 0.4em 0.1em 0.4em;
  vertical-align: 0.15em;
  text-shadow: 0 1px rgba(255,255,255,0.5);
  white-space: nowrap;
}

/* ******************************** */
/* Images                           */
/* ******************************** */

img
{
  border: none;
  page-break-inside: avoid;
}

img.flag
{
  width: 1.25em; height: 0.85em;
}

/* ******************************** */
/* Page Header                      */
/* ******************************** */

.header
{
  display: block;
}

.head1 /* veraltet */
{
  float: left;
  margin-top: 10px;
}

.head2 /* veraltet */
{
  text-align: right;
  font-size: 1.15em;
  font-weight: bold;
  padding: 0.0em 0.0em 0.3em 0.0em;
  margin: 0.0em 0.0em 0.0em 0.0em;
}

.header1
{
  float: left;
  text-align: left;
  margin-top: 5px;
  margin-bottom: 10px;
}

.header2
{
  text-align: right;
  font-size: 1.15em;
  font-weight: bold;
  padding-top: 15px;
  color: rgb(102,102,102);
}

.head A:hover,
.head1 A:hover, .head2 A:hover, /* veraltet */
.header1 A:hover, .header2 A:hover
{
  background-color: rgb(240,230,210);
  text-decoration: none;
}

/* mobile */
@media only screen and (max-width: 610px) 
{
.header,
.head1, .head2, /* veraltet */
.header1, .header2
{
  display: none;
}}

/* ******************************** */
/* Main Navigation                  */
/* ******************************** */

.navi
{
  clear: both;
  text-align: right;
  padding: 0.1em 0.2em 0.1em 0.2em;
  margin: 0.2em 0.0em 0.0em 0.0em;
  border-top-style: solid;
  border-bottom-style: solid;
  border-width: 0.1em;
}

.navi-menu
{
  display: none;
}

.navi-trail
{
  float: left;
}

.navi-trail,
.navi-menu,
.navi-site
{
margin-top: 0px;
}

.navi-line
{
  margin-top: -0.2em;
  text-align: right;
}

/* ******************************** */
/* APP Navigation                   */
/* ******************************** */

@media only screen and (max-width: 610px) {
.navi
{
  display: none;
  text-align: left;
  position: absolute;
  width: 10em;
  right: 0px;
  top: 50px;
  z-index: 10;
  background: none !important;
  background-color: rgb(64,64,64) !important;
  border-top: 3px solid rgb(64,64,64);
}

.navi-trail,
.navi-menu,
.navi-site
{
  float: none;
  display: block;
  border-bottom: 5px solid rgb(64,64,64);
  border-top: 5px solid rgb(64,64,64)
}

.navi-trail a,
.navi-links a,
.navi-menu a,
.navi-site a
{
  display: block;
  padding: 3px;
  margin: 5px;
}

.navi-links,
.navi-line
{
  display: none;
}
}

/* ******************************** */
/* Abstract                         */
/* ******************************** */

.abstract
{
  font-weight: bold;
  padding: 0.0em 0.0em 0.0em 0.0em;
  margin: 0.4em 0.0em 0.8em 0.0em;
}

.abstract + .abstract
{
  margin-top: -6pt;
}

.abstract h4
{
  clear: left;
}

/* ******************************** */
/* Main Title                       */
/* ******************************** */

/* desktop */
@media only screen and (min-width: 610px) {
.title h1
{
  font-size: 1.4em;
  font-weight: bold;
  padding: 0px 0px 0px 0px;
  margin: 0.8em 0.0em 0.4em 0.0em;
}
.title .abstract
{
  margin-top: -0.5em;
  margin-bottom: 1.5em;
}
.title img.title-logo,
.title img.title-navi
{
  display: none;
}}

/* mobile */
@media only screen and (max-width: 610px) {
.title
{
  margin-bottom: 1.0em;
  margin-top: -1.5em;
  min-height: 70px;
  padding: 5px;
  background-color: rgb(138,51,51);
}
.title img.title-icon
{
  float: left;
  margin-top: 20px;
  margin-left: 5px;
  margin-right: 10px;
}}

/* phone */
@media only screen and (max-width: 410px) {
/* margins must correspond to body margins */
.title
{
  margin-left:  -10px;
  margin-right: -10px;
  padding-left:  10px;
}}

/* tablet */
@media only screen and (min-width: 410px) {
/* margins must correspond to body margins */
.title
{
  margin-left:  -15px;
  margin-right: -15px;
  padding-left:  15px;
}}

/* mobile */
@media only screen and (max-width: 610px) {
.title h1
{
  margin-top: 20px;
  margin-bottom: 2px;
  color: rgb(240,240,240);
}}

/* phone */
@media only screen and (max-width: 410px) {
.title h1 { font-size: 1.1em; }
.title .abstract { font-size: 0.8em; }
}

/* tablet */
@media only screen and (min-width: 410px) {
.title h1 { font-size: 1.4em; }
.title .abstract { font-size: 0.9em; }
}

/* mobile */
@media only screen and (max-width: 610px) {
.title .abstract
{
  margin-top:   -5px;
  margin-bottom: 4px;
  color: rgb(240,240,240);
}
.title img.title-navi
{
  float: right;
  display: block;
  margin-top: 25px;
  margin-left: 5px;
}}

/* phone */
@media only screen and (max-width: 410px) {
.title img.title-navi
{
  float: right;
  display: block;
  margin-top: 25px;
  height: 25px;
  width: 25px;
}}

/* ******************************** */
/* Copyright                        */
/* ******************************** */

.copyright
{
  margin: 1.5em 0.0em 0.0em 0.0em;
  padding: 0.5em 0.0em 0.0em 0.0em;
  border-top: 0.3em solid;
}

.copyright table
{
  padding: 0.0em 0.0em 0.0em 0.0em;
  margin: 0.0em 0.0em 0.0em 0.0em;
}

body.app .copyright
{
  border-top: 0;
}

/* ******************************** */
/* Headlines                        */
/* ******************************** */

h1, h2, h3, .h1, .h2, .h3
{
  font-weight: bold;
  line-height: 130%;
  padding: 0.2em 0.0em 0.2em 0.0em;
  margin: 0.0em 0.0em 0.2em 0.0em;
}

h4, h5, h6, .h4, .h5, .h6
{
  font-style: italic;
  padding: 0.0em 0.0em 0.0em 0.0em;
  margin: 0.8em 0.0em 0.0em 0.0em;
}

h1, .h1 { margin-top: 1.00em; font-size: 1.45em; }
h2, .h2 { margin-top: 0.90em; font-size: 1.30em; }
h3, .h3 { margin-top: 0.80em; font-size: 1.15em; }

h1+h2, .h1+.h2,
h2+h3, .h2+.h3,
h3+h4, .h3+.h4
{
  margin-top: 0.2em;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6
{
  page-break-after: avoid;
  page-break-inside: avoid;
}

h1+h2, .h1+.h2,
h2+h3, .h2+.h3,
h3+h4, .h3+.h4,
h4+h5, .h4+.h5,
h5+h6, .h5+.h6
{
  page-break-before: avoid;
}

/* ------------------------------ */
/* Numbered headings              */
/* ------------------------------ */

body.num
{
  counter-reset: h1;
}
body.num h1:before
{
  content: counter(h1) ". ";
  counter-increment: h1;
}
body.num h1
{
  counter-reset: h2;
}
body.num h2:before
{
  content: counter(h1) "." counter(h2) " ";
  counter-increment: h2;
}
body.num h2
{
  counter-reset: h3;
}
body.num h3:before
{
  content: counter(h1) "." counter(h2) "." counter(h3) " ";
  counter-increment: h3;
}
body.num h3
{
  counter-reset: h4;
}
body.num h4:before
{
  content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) " ";
  counter-increment: h4;
}


/* ------------------------------ */
/* Table of contents              */
/* ------------------------------ */

.toc1 { margin-left: 0.0em; margin-top: 0.3em; }
.toc2 { margin-left: 0.5em; margin-top: 0.2em; }
.toc3 { margin-left: 1.5em; margin-top: 0.1em; }
.toc4 { margin-left: 2.5em; margin-top: 0.1em; }

/* ------------------------------ */
/* Normal Lists                   */
/* ------------------------------ */

ul ul, ol ol, ul ol, ol ul, ol li, ul li
      { margin-top:   0.2em; }
ul li { margin-left: -1.0em; }
dd    { margin-left:  1.5em; }

@media print {
ul, ol, dl { page-break-before: avoid; }
}

/* ------------------------------ */
/* Numbered inline rule Lists     */
/* rules -- numbers before        */
/* bl    -- numbers inline        */
/* ------------------------------ */

/* HACK frontpage ignores all rules within this media query */
@media (min-width: 1px)
{

ol.rules,
ul.rules,
ul.bl
{
  margin-left: 0;
  padding-left: 0
}

ol.rules li,
ul.rules li,
ul.bl li
{
  margin-left: 0;
  padding-left: 0;
  list-style-type: none
}

ol.rules li:before,
ul.rules li:before
{
  color:#aa4040;
  font-size:1.3em
}

ul.rules li:nth-child(1):before { content: "\278a\2005"; }
ul.rules li:nth-child(2):before { content: "\278b\2005"; }
ul.rules li:nth-child(3):before { content: "\278c\2005"; }
ul.rules li:nth-child(4):before { content: "\278d\2005"; }
ul.rules li:nth-child(5):before { content: "\278e\2005"; }
ul.rules li:nth-child(6):before { content: "\278f\2005"; }
ul.rules li:nth-child(7):before { content: "\2790\2005"; }
ul.rules li:nth-child(8):before { content: "\2791\2005"; }
ul.rules li:nth-child(9):before { content: "\2792\2005"; }

ol.rules li:nth-child(1):before { content: "\278a\2005"; }
ol.rules li:nth-child(2):before { content: "\278b\2005"; }
ol.rules li:nth-child(3):before { content: "\278c\2005"; }
ol.rules li:nth-child(4):before { content: "\278d\2005"; }
ol.rules li:nth-child(5):before { content: "\278e\2005"; }
ol.rules li:nth-child(6):before { content: "\278f\2005"; }
ol.rules li:nth-child(7):before { content: "\2790\2005"; }
ol.rules li:nth-child(8):before { content: "\2791\2005"; }
ol.rules li:nth-child(9):before { content: "\2792\2005"; }

} /* media */

/* ------------------------------ */
/* Columns                        */
/* ------------------------------ */

.col,
.col ol { margin-top: 0pt; margin-bottom: 0pt; }

@media screen and (min-width: 500px) {
.col
{
  padding: 0.5em;
  column-gap: 2em;
  column-count: 2;
}}

@media screen and (min-width: 750px) {
.col
{
  padding: 0.5em;
  column-gap: 2em;
  column-count: 3;
}}

@media print {
.col
{
  padding: 0.5em;
  column-gap: 2em;
  column-count: 3;
}}

.col2
{
  padding: 0.5em;
  column-gap: 2em;
  column-count: 2;
}

.col3
{
  padding: 0.5em;
  column-gap: 2em;
  column-count: 3;
}

/* ******************************** */
/* Generic Tables                   */
/* ******************************** */

table, th, td
{
  text-align: left;
  vertical-align: top;
  border-collapse: collapse;
}

table
{
  padding: 0.0em 0.0em 0.0em 0.0em;
  margin: 0.4em 0.0em 0.0em 0.0em;
}

th, td
{
  padding: 0.1em 0.3em 0.1em 0.3em;
  margin:  0.2em 0.2em 0.2em 0.2em;
}

th
{
  font-weight: bold;
}

td.R, th.R
{
  text-align: right;
  padding-left: 0.5em;
  padding-right: 0.5em;
}

td.L, th.L
{
  text-align: left;
  padding-left: 0.5em;
  padding-right: 0.5em;
}

td.C, th.C
{
  text-align: center;
}

/* ******************************** */
/* Framed Tables                    */
/* ******************************** */

table.framed
{
  margin: 0.4em 0.0em 0.0em 0.0em;
  border: solid;
  border-width: 0.2em 0.2em 0.2em 0.2em;
}

table.framed th, table.framed td
{
  border: solid;
  border-width: 0.1em 0.1em 0.1em 0.1em;
}

table.framed th
{
  border-bottom-width: 2px;
}

/* ******************************** */
/* Shaded Tables                    */
/* ******************************** */

table.shaded
{
  margin: 0.4em 0.0em 0.0em 0.0em;
}

table.shaded th, table.shaded td
{
  border: solid;
  border-width: 0.2em 0.2em 0.2em 0.2em;
}

/* ******************************** */
/* Sortable Tables                  */
/* ******************************** */

table.sortable
{
  margin: 0.8em 0.0em 0.0em 0.0em;
}

table.sortable th
{
  cursor: pointer;
}

/* ******************************** */
/* Scrolling Tables                 */
/* ******************************** */

body.app table.scrolling
{
  display: block;
  overflow-x: auto;
  white-space: nowrap;
  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  -o-hyphens: none;
  hyphens: none;
}

/* ******************************** */
/* Overview Tables                  */
/* ******************************** */

table.overview th
{
  font-weight: normal;
  text-align: center;
  vertical-align: top;
  border-collapse: collapse;
}
table.overview td
{
  font-weight: normal;
  text-align: left;
  vertical-align: top;
  border-collapse: collapse;
}

/* ******************************** */
/* Score Tables                     */
/* ******************************** */

table.scores
{
  margin: 0.4em 0.0em 0.0em 0.0em;
}
table.scores th, table.scores td
{
  border: solid;
  border-width: 0.2em 0.2em 0.2em 0.2em;
}

/* ******************************** */
/* Inline Frames                    */
/* ******************************** */

iframe
{
  height: 200px;
  border: 0;
  width: 100%;
  margin: 0pt 0pt 0pt 0pt;
  padding: 0pt 0pt 0pt 0pt;
}

iframe#regeln    { height: 160px; }
iframe#scores    { height: 200px; }
iframe#bedienung { height: 500px; }

@media print
{
  iframe#bedienung { display: none; }
}

/* ******************************** */
/* Footnotes                        */
/* ******************************** */

.fn, .fb
{
  color: rgb(222,0,0);
  text-decoration: none!important;
  text-align: center;
  font-size: 0.65em;
  font-weight: bold;
  display: inline-block;
  vertical-align: super;
  padding-left: 0.3em;
  padding-right: 0.3em;
  border-radius: 4px;
  cursor: pointer;
}

a.fn:hover,
a.fb:hover
{
  color: rgb(255,255,255);
  background-color: rgb(222,0,0);
}

.fn1,
.fb1
{
  position: relative;
  padding-left: 0.2em;
  padding-right: 0.2em;
  line-height: 120%;
  font-size: 80%;
  font-weight: 500;
  color: rgb(255,255,255);
  background-color: rgb(153,102,51);
  display: inline-block;
  border-radius: .225em;
  text-decoration: none!important;
  cursor: pointer;
}
.fn1
{
  margin-left: 0.15em;
  margin-right: 0.15em;
  top: -0.15em;
}
.fb1
{
  top: -0.10em;
  margin-left: 0.0em;
  margin-right: 0.15em;
}

.fn1:hover,
.fb1:hover
{
  color: rgb(255,255,255);
  background-color: rgb(222,0,0);
}

/* ******************************** */
/* Mark external Links              */
/* ******************************** */

a[href^="http://"]:before,
a[href^="https://"]:before
{
  content:  '\2191';
  position: relative;
  top:      -0.15em
}

.noext a[href^="http://"]:before,
.noext a[href^="https://"]:before,
.title a[href^="http://"]:before,
.title a[href^="https://"]:before
{
  content:  none;
  position: static;
  top:      0;
}

/* ******************************** */
/* Link Lists (100x100 Images)      */
/* ******************************** */

.imgnavi
{
  float: left;
}
.imgnavi ul
{
  margin: 5px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  list-style-type: none;
  text-align: left;
}
.imgnavi ul li
{
  margin: 6px 0px 6px 0px;
  padding: 0px;
  width: 115px;
  float: left;
  text-align: center;
}
.imgnavi ul li a
{
  display: block;
  padding: 0px 0px 0px 5px;
}
.imgnavi ul li img
{
  display: block;
  text-align: left;
  margin: 0px 0px 0px 3px;
}

/* ******************************** */
/* Scrollable Link Lists            */
/* ******************************** */

body.app .hscroll
{
  overflow: auto;
  overflow-y: hidden;
  width: 100%;
  position: relative;
}

body.app .hscroll ul
{
  margin: 0;
  padding: 0;
}

/* new */

img.hscroll-l,
img.hscroll-r { display: none; }

body.app img.hscroll-l,
body.app img.hscroll-r
{
  display: inline;
  height: 100px;
  width: 20px;
  margin-top: 38px;
}

body.app img.hscroll-l  { float: left; }
body.app img.hscroll-r  { float: right; }

body.app .hscroll-outer
{
  margin-left: 25px;
  margin-right: 25px;
}

/* old, for compatibility only */

img.hscroll-left,
img.hscroll-right { display: none; }

body.app img.hscroll-left  { float: left; }
body.app img.hscroll-right { float: right; }

body.app img.hscroll-left,
body.app img.hscroll-right
{
  margin-bottom: -50px;
  top: -80px;
  z-index: 5;
  position: relative;
  display: inline;
  opacity: 0.8;
}

/* ******************************** */
/* Accordions                       */
/* ******************************** */

.accordion:visited,
.accordion:link    { color: rgb(102,51,0); }
.accordion:hover   { color: rgb(255,0,0);  }

/* ******************************** */
/* Link Buttons                     */
/* ******************************** */

.button
{
  cursor: pointer;
  color: rgb(0,0,0);
  background-Color: rgb(204,204,204);
  text-decoration: none;
  text-align: center;
  font-size: 0.9em;
  width: 1.0em;
  padding: 0.1em 0.5em 0.1em 0.5em;
  border-left: 2px solid rgb(240,240,240);
  border-top: 2px solid rgb(240,240,240);
  border-right: 2px solid rgb(51,51,51);
  border-bottom: 2px solid rgb(51,51,51);
}

.button:hover
{
  border-left: 2px solid rgb(51,51,51);
  border-top: 2px solid rgb(51,51,51);
  border-right: 2px solid rgb(255,255,255);
  border-bottom: 2px solid rgb(255,255,255);
}

.button:visited, A.button:link, A.button:active
{
  color: rgb(0,0,0);
}

/* ------------------------------ */
/* tabs                           */
/* ------------------------------ */

.index-a
{
  outline: none;
  font-Weight: bold;
  padding: 1px 5px 5px 5px;
  border-top: 1px solid rgb(190,170,150);
  border-left: 1px solid rgb(190,170,150);
  border-right: 1px solid rgb(190,170,150);
  border-radius: 3px 3px 0px 0px;
  background-color: rgb(240,240,220);
}

.index-i
{
  padding: 1px 5px 3px 5px;
  border-top: 1px solid rgb(190,170,150);
  border-left: 1px solid rgb(190,170,150);
  border-right: 1px solid rgb(190,170,150);
  border-radius: 3px 3px 0px 0px;
}

.index-c
{
  margin-top: 4px;
  padding: 0.0em 0.5em 0.5em 0.5em;
  border-top: 1px solid rgb(190,170,150);
  border-left: 1px solid rgb(190,170,150);
  border-right: 1px solid rgb(190,170,150);
  border-bottom: 1px solid rgb(190,170,150);
  border-radius: 0 3px 3px 3px;
  background-color: rgb(240,240,220);
}
body.app .index-c
{
  padding: 0.0em 0.2em 0.2em 0.2em;
}

/* ------------------------------ */
/* CSS Sprites                    */
/* ------------------------------ */

img.navmenu   {background:url('img/Nav.png')        0 0; width: 32px; height: 32px }
img.navprev   {background:url('img/Nav.png')    -32px 0; width: 32px; height: 32px }
img.navnext   {background:url('img/Nav.png')    -64px 0; width: 32px; height: 32px }
img.navback   {background:url('img/Nav.png')    -96px 0; width: 32px; height: 32px }
img.navopen   {background:url('img/Nav.png')   -128px 0; width: 32px; height: 32px }
img.navclose  {background:url('img/Nav.png')   -160px 0; width: 32px; height: 32px }
img.navtools  {background:url('img/Nav.png')   -192px 0; width: 32px; height: 32px }
img.navlogo   {background:url('img/Nav.png')   -224px 0; width: 32px; height: 32px }
img.navselect {background:url('img/Nav.png')   -256px 0; width: 32px; height: 32px }
img.navplay   {background:url('img/Nav.png')   -288px 0; width: 32px; height: 32px }

img.prev      {background:url('img/Icon.png')      0 0; width: 16px; height: 16px }
img.next      {background:url('img/Icon.png')  -16px 0; width: 16px; height: 16px }
img.undoall   {background:url('img/Icon.png')  -32px 0; width: 16px; height: 16px }
img.undo      {background:url('img/Icon.png')  -48px 0; width: 16px; height: 16px }
img.redo      {background:url('img/Icon.png')  -64px 0; width: 16px; height: 16px }
img.redoall   {background:url('img/Icon.png')  -80px 0; width: 16px; height: 16px }
img.info      {background:url('img/Icon.png')  -96px 0; width: 16px; height: 16px }
img.check     {background:url('img/Icon.png') -112px 0; width: 16px; height: 16px }
img.cmarkers  {background:url('img/Icon.png') -128px 0; width: 16px; height: 16px }
img.ihint     {background:url('img/Icon.png') -144px 0; width: 16px; height: 16px }
img.isol      {background:url('img/Icon.png') -160px 0; width: 16px; height: 16px }
img.load      {background:url('img/Icon.png') -176px 0; width: 16px; height: 16px }
img.save      {background:url('img/Icon.png') -192px 0; width: 16px; height: 16px }
img.vmarkers  {background:url('img/Icon.png') -208px 0; width: 16px; height: 16px }
img.reset     {background:url('img/Icon.png') -224px 0; width: 16px; height: 16px }
img.rotate    {background:url('img/Icon.png') -240px 0; width: 16px; height: 16px }
img.mail      {background:url('img/Icon.png') -256px 0; width: 16px; height: 16px }
img.lines     {background:url('img/Icon.png') -272px 0; width: 16px; height: 16px }
img.smarkers  {background:url('img/Icon.png') -288px 0; width: 16px; height: 16px }
img.options   {background:url('img/Icon.png') -304px 0; width: 16px; height: 16px }
img.value     {background:url('img/Icon.png') -320px 0; width: 16px; height: 16px }
img.new       {background:url('img/Icon.png') -480px 0; width: 16px; height: 16px }
img.zoom      {background:url('img/Icon.png') -496px 0; width: 16px; height: 16px }
img.cross     {background:url('img/Icon.png') -560px 0; width: 16px; height: 16px }
img.mouse     {background:url('img/Icon.png') -512px 0; width: 16px; height: 16px }
img.finger    {background:url('img/Icon.png') -528px 0; width: 16px; height: 16px }
img.key       {background:url('img/Icon.png') -544px 0; width: 16px; height: 16px }
img.screen    {background:url('img/Icon.png') -576px 0; width: 16px; height: 16px }
img.menu      {background:url('img/Icon.png') -592px 0; width: 16px; height: 16px }

img.markerq   {background:url('img/Icon.png') -336px 0; width: 16px; height: 16px }
img.markerw   {background:url('img/Icon.png') -352px 0; width: 16px; height: 16px }
img.markere   {background:url('img/Icon.png') -400px 0; width: 16px; height: 16px }
img.markerr   {background:url('img/Icon.png') -384px 0; width: 16px; height: 16px }
img.markerx   {background:url('img/Icon.png') -368px 0; width: 16px; height: 16px }
img.markera   {background:url('img/Icon.png') -416px 0; width: 16px; height: 16px }
img.markerb   {background:url('img/Icon.png') -432px 0; width: 16px; height: 16px }
img.markerc   {background:url('img/Icon.png') -448px 0; width: 16px; height: 16px }
img.markerd   {background:url('img/Icon.png') -464px 0; width: 16px; height: 16px }

img.un { background:url('img/Flag.png')    0   0; width: 18px; height: 12px }
img.de { background:url('img/Flag.png')  -18px 0; width: 18px; height: 12px }
img.en { background:url('img/Flag.png')  -36px 0; width: 18px; height: 12px }
img.fr { background:url('img/Flag.png')  -54px 0; width: 18px; height: 12px }
img.it { background:url('img/Flag.png')  -72px 0; width: 18px; height: 12px }
img.es { background:url('img/Flag.png')  -90px 0; width: 18px; height: 12px }
img.ru { background:url('img/Flag.png') -108px 0; width: 18px; height: 12px }
img.cn { background:url('img/Flag.png') -126px 0; width: 18px; height: 12px }
img.ja { background:url('img/Flag.png') -144px 0; width: 18px; height: 12px }

/* ------------------------------ */
/* THE END                        */
/* ------------------------------ */