/* LightCyan PaleGreen (border:gold) Hintergrund:Ivory*/
/* alle Desktops und Tablets im Querformat */
@media screen {
/* padding: oben - rechts - unten - links */
body  { font-family:Tahoma, Verdana, Geneva, sans-serif;}

form       {margin:0;}
.bodyfr4   { font-family:Tahoma, Verdana, Geneva, sans-serif; font-size:13px; color:black; background-image:url("../images/jassenfr4.png");}
.bodydt    { font-family:Tahoma, Verdana, Geneva, sans-serif; font-size:13px; color:black; background-image:url("../images/jassendt.png");}
.bodyfr2   { font-family:Tahoma, Verdana, Geneva, sans-serif; font-size:13px; color:black; background-image:url("../images/jassenfr2.png");}

/* tabellenbasisdefinitionen */
table     {margin-top:12px;  border-spacing:0px; border-collapse:collapse;}
.tbnull   {margin-top: 0px; border-spacing:0px;}
.tbzero   { width:100%; margin-top: 0px; border-spacing:0px; border-collapse:collapse;}
.tbborder { width:100%; margin-top:12px; border-spacing:8px; padding-top: 1pt; border: 1px solid DarkGreen; border-collapse:collapse; background-color:white}
.tbblankb { width:100%; margin-top:0px;  border-spacing:8px; padding-top: 1pt; border-top: 0pt; border-left: 1pt solid DarkGreen; border-bottom: 1pt solid DarkGreen; border-right: 1pt solid DarkGreen; border-collapse:collapse;}
.tbblankbno{width:100%; margin-top:0px;  border-spacing:8px; padding-top: 0pt; border-top: 0pt; border-bottom:0pt; border-left: 1pt solid DarkGreen; border-right: 1pt solid DarkGreen; border-collapse:collapse;}
.tbform   { width:100%; margin-top:-4px; border-spacing:8px; padding-top: 1pt; border: 2px ridge gold; border-collapse:collapse; background-color:Ivory;}

td        {font-size:14px; background-color:transparent; line-height:1.3;}

/* zellen mit rand rundherum */
.tdleftb   {text-align:left;   border:1pt solid DarkGreen; padding:4px;}
.tdrightb  {text-align:right;  border:1pt solid DarkGreen; padding:4px;}
.tdcenterb {text-align:center; border:1pt solid DarkGreen; padding:4px;}
.tdvtopleb {text-align:left;   border:1pt solid DarkGreen; padding:4px; vertical-align:top;}
.tdvtopceb {text-align:center; border:1pt solid DarkGreen; padding:4px; vertical-align:top;}
.tdvmidleb {text-align:left;   border:1pt solid DarkGreen; padding:4px; vertical-align:middle;}
.tdvmidceb {text-align:center; border:1pt solid DarkGreen; padding:4px; vertical-align:middle;}
.tdvbotleb {text-align:left;   border:1pt solid DarkGreen; padding:4px; vertical-align:bottom;}

/* zellen mit rand oben und unten */
.tdleftbh   {text-align:left;   border-top:1pt solid DarkGreen; border-bottom:1pt solid DarkGreen; padding:4px;}
.tdrightbh  {text-align:right;  border-top:1pt solid DarkGreen; border-bottom:1pt solid DarkGreen; padding:4px;}
.tdcenterbh {text-align:center; border-top:1pt solid DarkGreen; border-bottom:1pt solid DarkGreen; padding:4px;}
.tdvtoplebh {text-align:left;   border-top:1pt solid DarkGreen; border-bottom:1pt solid DarkGreen; padding:4px; vertical-align:top;}
.tdvtopcebh {text-align:center; border-top:1pt solid DarkGreen; border-bottom:1pt solid DarkGreen; padding:4px; vertical-align:top;}
.tdvmidlebh {text-align:left;   border-top:1pt solid DarkGreen; border-bottom:1pt solid DarkGreen; padding:4px; vertical-align:middle;}
.tdvmidcebh {text-align:center; border-top:1pt solid DarkGreen; border-bottom:1pt solid DarkGreen; padding:4px; vertical-align:middle;}
.tdvmidribh {text-align:right;  border-top:1pt solid DarkGreen; border-bottom:1pt solid DarkGreen; padding:4px; vertical-align:middle;}

/* zellen ohne rand */
.tdleft    {text-align:left;   padding:4px;}
.tdcenter  {text-align:center; padding:4px;}
.tdright   {text-align:right;  padding:4px;}
.tdvtople  {text-align:left;   padding:4px; vertical-align:top;}
.tdvtopce  {text-align:center; padding:4px; vertical-align:top;}
.tdvtopri  {text-align:right;  padding:4px; vertical-align:top; }
.tdvmidle  {text-align:left;   padding:4px; vertical-align:middle;}
.tdvmidce  {text-align:center; padding:4px; vertical-align:middle;}
.tdvmidri  {text-align:right;  padding:4px; vertical-align:middle;}
.tdvbotle  {text-align:left;   padding:4px; vertical-align:bottom;}
.tdvbotce  {text-align:center; padding:4px; vertical-align:bottom;}
.tdbold    {font-size:larger; background-color:transparent; padding:4px;}
.tdbodyle  {background-color:transparent;                   vertical-align:top; padding:4px;}
.tdbodyce  {background-color:transparent;text-align:center; vertical-align:top; padding:4px;}
.tdbodyri  {background-color:transparent;text-align:right;  vertical-align:top; padding:4px;}

/* Farben dateien-Ordner */
.dateitab {text-align:left;   font-weight:bold; background-color:AliceBlue; border-bottom:1px solid DarkGreen; padding:4px;}
.dateice  {text-align:center; font-weight:bold; background-color:AliceBlue; border:1px solid DarkGreen; padding:4px;}
.dateile  {text-align:left;   font-weight:bold; background-color:AliceBlue; border:1px solid DarkGreen; padding:4px;}

.tileft    {text-align:left;   font-weight:bold; background-color:PaleGreen; border:1px solid DarkGreen; padding:4px;}
.ticenter  {text-align:center; font-weight:bold; background-color:PaleGreen; border:1px solid DarkGreen; padding:4px;}
.tiright   {text-align:right;  font-weight:bold; background-color:PaleGreen; border:1px solid DarkGreen; padding:4px;}
.tirighth  {text-align:right;  font-weight:bold; background-color:PaleGreen; border-top:1px solid DarkGreen; border-bottom:1px solid DarkGreen; padding:4px;}
.tivtople  {text-align:left;   vertical-align:top;    font-weight:bold; background-color:PaleGreen; border:1px solid DarkGreen; padding:4px;}
.tivtopce  {text-align:center; vertical-align:top;    font-weight:bold; background-color:PaleGreen; border:1px solid DarkGreen; padding:4px;}
.tivtopri  {text-align:right;  vertical-align:top;    font-weight:bold; background-color:PaleGreen; border:1px solid DarkGreen; padding:4px;}
.tivmidle  {text-align:left;   vertical-align:middle; font-weight:bold; background-color:PaleGreen; border:1px solid DarkGreen; padding:4px;}
.tivmidce  {text-align:center; vertical-align:middle; font-weight:bold; background-color:PaleGreen; border:1px solid DarkGreen; padding:4px;}
.tivmidri  {text-align:right;  vertical-align:middle; font-weight:bold; background-color:PaleGreen; border:1px solid DarkGreen; padding:4px;}
.tivbotle  {vertical-align:bottom; font-weight:bold; background-color:PaleGreen; border:1px solid DarkGreen; padding:4px;}
.tibold    {font-size:larger;  background-color:PaleGreen; border:1px solid DarkGreen; padding:4px;}

/* tabellentitel mit horizontalem rand */
.tilefth    {font-weight:bold; background-color:PaleGreen; border-top:1pt solid DarkGreen; border-bottom:1pt solid DarkGreen; padding:4px;}
.ticenterh  {text-align:center; font-weight:bold; background-color:PaleGreen; border-top:1pt solid DarkGreen; border-bottom:1pt solid DarkGreen; padding:4px;}
.tirighth   {text-align:right;  font-weight:bold; background-color:PaleGreen; border-top:1pt solid DarkGreen; border-bottom:1pt solid DarkGreen; padding:4px;}
.tivtopleh  {text-align:left;   vertical-align:top;    font-weight:bold; background-color:PaleGreen; border-top:1pt solid DarkGreen; border-bottom:1pt solid DarkGreen; padding:4px;}
.tivtopceh  {text-align:center; vertical-align:top;    font-weight:bold; background-color:PaleGreen; border-top:1pt solid DarkGreen; border-bottom:1pt solid DarkGreen; padding:4px;}
.tivtoprih  {text-align:right;  vertical-align:top;    font-weight:bold; background-color:PaleGreen; border-top:1pt solid DarkGreen; border-bottom:1pt solid DarkGreen; padding:4px;}
.tivmidleh  {text-align:left;   vertical-align:middle; font-weight:bold; background-color:PaleGreen; border-top:1pt solid DarkGreen; border-bottom:1pt solid DarkGreen; padding:4px;}
.tivmidceh  {text-align:center; vertical-align:middle; font-weight:bold; background-color:PaleGreen; border-top:1pt solid DarkGreen; border-bottom:1pt solid DarkGreen; padding:4px;}
.tivmidrih  {text-align:right;  vertical-align:middle; font-weight:bold; background-color:PaleGreen; border-top:1pt solid DarkGreen; border-bottom:1pt solid DarkGreen; padding:4px;}
.tivbotleh  {vertical-align:bottom; font-weight:bold; background-color:PaleGreen; border-top:1pt solid DarkGreen; border-bottom:1pt solid DarkGreen; padding:4px;}
.tiboldh    {font-size:larger; background-color:PaleGreen; border-top:1pt solid DarkGreen; border-bottom:1pt solid DarkGreen; padding:4px;}

a:link     {color:darkblue; background-color:transparent; padding-top: 2pt; padding-bottom: 3pt; padding-left: 3pt; padding-right: 3pt;}
a:visited  {color:darkblue; background-color:transparent}
a:active, a:hover   {color:red; background-color:transparent}

.hrclass   {width:100%; margin:3px 0px 3px 0px; border: 0; height: 1px; background-color: gray}

/* Formularfelder */
.mylabel       {display:inline-block; border:1px solid SteelBlue; padding:3px; margin:0 0 0 8px;}
.mylabel:hover {border:1px solid SteelBlue; padding:3px;}

.hidebutton {display:run-in;}
.hidetext   {display:run-in;}
.hidefone   {display:run-in;}

.button, a.button
{
appearance: none;
text-decoration: none;
background-color:PaleTurquoise; display:inline-block;
color:black; font-size:14px; font-weight:500; text-align:center;
border: ridge 2px; border-color:LightSlateGray;
padding: 5px 4px 5px 5px; border-radius:4px;
margin-right:1px; margin-top:0px;
box-shadow:1px 2px DarkGray;
}
.small {position:absolute; margin-left:8px; margin-top:6px;
border-radius:2px; width:60px;
height:28px; padding-top:1px; padding-bottom:4px;}

/* padding: oben - rechts - unten - links */

.b050   {width:54px;}
.b060   {width:60px;}
.b080   {width:80px;}
.b090   {width:90px;}
.b100   {width:98px;}
.b110   {width:110px;}
.b120   {width:120px;}
.b150   {width:150px;}
.b180   {width:180px;}
.b200   {width:200px;}
.b220   {width:220px;}
.b240   {width:240px;}
.b260   {width:260px;}
.b300   {width:300px;}
.b360   {width:360px;}

.select  {font-size:15px; border:2px solid DarkGreen; color:black; background-color:PaleTurquoise; height:32px; margin:0px; padding: 4px 4px 5px 4px; border-radius:2px;}

.admin, a.admin  {background-color:gold;}
.admin:hover, .button:hover, .small:hover, .b060:hover, .b080:hover, .b100:hover, .b120:hover,
.b180:hover, .b220:hover, b240:hover, .b260:hover, .b300:hover, .b360:hover, .b400:hover, .hidebutton:hover
{color:white; background-color:darkgreen; cursor:pointer;}

.titel      {width:79%;}
.textarea   {width:80%; height:260px; font-size:13px;  background-color:white; border-top: 1px solid black; border-left: 1px solid black; border-bottom: 1px solid LightGreen; border-right: 1px solid DeepSkyBlue}
.filebutton  {appearance:none; cursor:pointer; width:380px; font-size:13px; font-weight:500; color:black; background-color:Honeydew; border-width:0; border: ridge 2px; padding: 15px 4px 15px 14px; border-radius:4px; margin-left:8px;}
.textfeld   {font-size:13px; text-align:left;    background-color:white; border-top: 1px solid black; border-left: 1px solid black; border-bottom: 1px solid DodgerBlue; border-right: 1px solid DodgerBlue}
.textfeldce {font-size:15px; text-align:center;  background-color:white; border-top: 1px solid black; border-left: 1px solid black; border-bottom: 1px solid DodgerBlue; border-right: 1px solid DodgerBlue}
.punkte {padding-left:2px; padding-right:2px;}
.textfeldcero {font-size:15px; text-align:center; border:1px solid darkgreen; background-color:transparent;}
.t100   {width:100px;}
.t120   {width:120px;}
.t160   {width:160px;}
.t200   {width:200px;}
.checkbox   {margin-left:8px; margin-right:4px;}

#hintergrund     {position:relative; float:right; left:-160px; top:-100px;}
#seitecontainer  {position:relative; top:0px; left:0px; z-index:10; width:auto;}
#footercontainer {display:inline-block; text-align:center; position:relative; bottom:10px; left:0px; z-index:1; width:100%;}

.flexaltneu     {display:flex;}
/* padding: oben - rechts - unten - links */
.flexaltneu div {padding:2px 10px 2px 0px;}

/* Meldungen */
.log   {display:block; font-size:15px; text-align:left; min-height:32px;
        margin-top:5px; margin-bottom:4px; border:1px solid gray; }
.debug          {background-color:Magenta; color:white;}
.debug a        {background-color:Magenta; color:white;}
.debug a:hover  {background-color:Magenta; color:darkblue;}
.error          {background-color:red;     color:white;}
.warning        {background-color:darkorange;  color:white;}
.sockok         {background-color:lime;       padding: 0 3px 2px 3px;}
.sockwar        {background-color:darkorange; padding: 0 3px 2px 3px; color:black;}
.sockerr        {background-color:red;        padding: 0 3px 2px 3px; color:white;}
.socktra        {background-color:transparent; padding: 0 3px 2px 3px;}
.info, .mbtit   {background-color:Wheat; color:black;}

/* padding: oben - rechts - unten - links */

.karte, a.karte
{
border:3px ridge gold;
border-radius: 6px;
padding: 0px;
max-height:142px; width:auto;
margin-right:5px; margin-bottom:4px;
}
.blau,  .player0 {border:3px ridge DodgerBlue; max-height:142px; width:auto;}
.gruen, .player1 {border:3px ridge Green; max-height:142px; width:auto;}
.pink,  .player2 {border:3px ridge Purple; max-height:142px; width:auto;}
.gold,  .player3 {border:3px ridge gold; max-height:142px; width:auto;}
.shuffle {border:3px ridge LightCyan; margin:3px 0px -12px 0px;}

.teppich {max-height:140px; width:auto; margin-right:8px; margin-bottom:8px;}
.favorit
{max-height:140px;
border-radius: 10px;
border:5px ridge gold;
margin-right:8px; margin-bottom:4px; margin-top:-1px; margin-left:-4px;
}

/* padding: oben - rechts - unten - links */

#ichsteche {position:absolute; margin-left:304px; margin-top:372px; white-space:nowrap; z-index:99;
border: 2px ridge white; padding:6px;}
#sticheins  {position:absolute; margin-left:22px; margin-top:372px; white-space:nowrap; z-index:99;
border: 2px ridge white; padding:6px;}

#dropdown  {position:absolute; margin-left:-3px; margin-top:2px; z-index:99;}

#stichfenster {width:824px; margin:0 auto; height:442px; padding-left:6px;}
/*#stichfenster {width:824px; margin-left:8px; height:442px; padding:0;}*/
#ajaxstich {display:inline-block; width:422px; height:422px; margin-top:4px; margin-left:-6px; padding:5px; background-size:cover; background-repeat:no-repeat;}

.mid      {text-align:center; vertical-align:bottom;}
.ver      {vertical-align:middle; padding-left:2px; padding-right:2px;}
.links    {position:absolute; margin-left:10px;  margin-top:122px;}
.rechts   {position:absolute; margin-left:285px; margin-top:122px;}
.oben     {position:absolute; margin-left:148px; margin-top:8px;}
.unten    {position:absolute; margin-left:148px; margin-top:215px;}
.unten div, .oben div, .links div, .rechts div { font-size:16px; color:white;}

.name {white-space:nowrap; background-color:DarkSlateGray; padding:1px 5px 2px 5px; opacity:0.9; border: 1px solid gold; margin-bottom:4px; margin-top:-4px;}
div .name {color:white;}
/* padding: oben - rechts - unten - links */

.box      {display:block; width:130px; height:200px; text-align:center;}
.boxmitte {display:flex;  width:130px; height:200px; justify-content:center; align-items: center; flex-wrap:wrap;}
.boxunten {display:flex; justify-content:center; width:130px; height:200px; align-items: flex-end; flex-wrap:wrap;}

#chatbereich {display:inline-block; position:absolute; width:432px; margin-top:10px; margin-left:14px;}
#lastchat    {display:block; border:2px ridge gold; margin-top:6px; padding:3px; min-height:24px; margin-left:auto; margin-right:auto; text-align:center; background-color:white; font-size:15px;}
#chatfenster {width:auto; height:220px; margin-top:2px; padding:2px;
              line-height:1.5; font-size:14px; border-radius:4px;
              border:2px ridge gold; background-color:Ivory;}
#chatbeitrag {width:424px; margin-top:8px; padding:2px; font-size:15px; border:2px ridge gold; border-radius:4px; background-color:White;}
#chatbeitrag:focus {background-color:white;}
#chatbutton  {border-radius:4px; padding-top:3px; width:52px; margin-left:8px}
#kontrabutton{border-radius:4px;}
#zurtafel    {float:right; margin-top:0px; margin-right:130px;}
#neumischen  {display:inline-block; margin-left:8px; overflow:hidden;}
#offenejasse {display:inline-block; width:100px; height:19px; overflow:hidden; text-align:center; border:2px ridge gold; cursor:pointer; background-color:White; padding:4px 3px 4px 3px; border-radius:4px;  z-index:99;}
#offengegner {display:inline-block; border:0; margin-left:32px; cursor:pointer;}
#pushsse     {border-radius:4px; padding:3px; width:52px; margin-left:308px;}
#rangliste   {width:290px; margin-top:10px;
              border:2px ridge gold; padding:0px 4px 0px 4px; background-color:White;
              line-height:1.5; font-size:14px; border-radius:4px;}

/* balken, mbtit, info: identisch; eintragen, tbform: schwächer; werkasten, resbalken:white */
.werkasten {width:104px; display:inline-block; margin-top:6px; margin-bottom:64px; text-align:center; vertical-align:bottom; background-color:white; padding:4px; border:2px ridge gold;}
.balken {display:block; padding-top:4px; padding-left:4px; font-size:16px; background-color:Ivory; border: 2px ridge gold; height:28px; line-height:25px; margin-top:0px; margin-bottom:4px;}
.resbalken {display:inline-block; width:399px; border:1px solid DarkGreen; background-color:White; margin-top:6px;  padding:4px; font-size:14px; text-align:center;}
/* flexboxen */
.flexblatt     {display:flex;width:auto; flex-wrap:wrap;}
.flexstich     {flex-wrap:nowrap;}

.flexblatt div {padding:0px 6px 0px 0px;}
#matchtafel {margin-top:10px;}
#startblock {width:200px; border:2px ridge gold; float:right; margin-top:20px; padding:8px;}
.matchtab {font-size:16px; width:fit-content; border-left:1px solid DarkGreen; border-bottom:1px solid DarkGreen; margin-top:20px; text-align:center; margin-left:auto; margin-right:auto; background-color:white;}
.matchblatt, .fahnderblatt, .fahnderhelp  {display:flex; flex-direction:row; flex-wrap:nowrap; height:34px; line-height:24px;}
.matchblatt div {padding:4px; width:74px; border-top:1px solid DarkGreen; border-right:1px solid DarkGreen;}

.eintragen {background-color:White;}
.besitzer  {width:102px; display:inline-block; text-align:center; padding-top:2px; font-size:14px;}
.eintragen:hover, .beitragen:hover, .bereich:hover {background-color:gold; cursor:pointer;}
.bereich {background-color:WhiteSmoke;}
.zebra div, .beitragen div {background-color:WhiteSmoke;}
.weiss {background-color:white}

.EgoMatch {cursor:pointer;}
.flexfahnder   {width:120px;}
.fahnderblatt div, .fahnderhelp div {padding:4px; border-right:1px solid DarkGreen; border-top:1px solid DarkGreen; width:118px;}
.flexajax     {display:flex; flex-direction:column; flex-wrap:nowrap;}
.flexajax div {border:1px solid orange;}
/* padding: oben - rechts - unten - links */
}

/********************************************************************/
/* Tablets im Hoch- oder Phones im Querformat                       */
/********************************************************************/
@media screen and (min-width:681px) and (max-width:960px) and
(orientation:portrait),
screen and (max-width:680px) and (orientation:landscape)
{
#chatbereich {margin-left:6px; width:396px;}
#chatbeitrag {width:388px;}
#chatbutton  {display:none;}
#zurtafel    {margin-right:96px;}
#neumischen  {margin-left:6px;}
#rangliste   {width:288px;}
/* padding: oben - rechts - unten - links */
.matchblatt, .fahnderblatt, .fahnderhelp  {height:40px; line-height:30px;}
.fahnderblatt div {width:100px;}
.fahnderhelp div {width:106px;}
.werkasten   {min-width:70px; margin-bottom:54px;}
.resbalken  {width:383px;}
.hidebutton {display:none;}
.hidefone   {display:run-in;}
.titel      {width:95%}
.karte, a.karte {max-height:136px; width:auto;}
.besitzer  {width:98px; font-size:14px;}
}

/**********************************************************/
/* Phones im Hochformat */
/**********************************************************/
@media screen and (max-width: 680px) and
(orientation: portrait)
{
#stichfenster {margin-left:6px; margin-top:0px; height:406px;}
#ajaxstich{display:inline-block; width:438px; height:420px; margin-top:4px; padding:4px; background-image:url("../images/jategruen.gif"); background-size:396px;}
#chatbereich {margin-left:-40px;}
#chatfenster {margin-left:0px; margin-top:0px; height:180px;}
#chatbeitrag {width:298px;}
#ichsteche   {margin-left:270px; margin-top:332px;}
#sticheins   {margin-left:10px;  margin-top:332px;}
#rangliste   {width:354px; margin-top:14px;}

.matchblatt, .fahnderblatt, .fahnderhelp  {height:40px; line-height:30px;}
.fahnderblatt div {width:90px;}
.fahnderhelp div {width:96px;}
.werkasten   {text-align:left; width:auto; border:0; margin-bottom:54px;}
.resbalken  {width:352px;}
.button   {font-size:13px;}
.button   {font-size:13px;}
.b080     {width:80px;}
.links    {margin-left:0px;  margin-top:100px;}
.rechts   {margin-left:242px; margin-top:100px;}
.oben     {margin-left:121px; margin-top:4px; }
.unten    {margin-left:121px; margin-top:190px;}
.box      {width:96px; height:180px;}
.boxmitte {width:120px; height:180px;}
/* padding: oben - rechts - unten - links */
.hidebutton {display:none;}
.hidefone   {display:none;}
.titel      {width:95%}
.besitzer  {width:90px; font-size:14px;}
.karte, a.karte
{
max-height:130px; width:auto;
margin-right:2px;
margin-top:  2px;
border-radius: 4px;
border: 2px ridge Gold;
}
}

/* The animation code */
@keyframes warnung {
    from {color:white; background-color: orange;}
    to   {color:lime;  background-color: red;}
}

@media print
{
td    {background-color:white}
body  {background-color:white}
}