body {
    font-family: "Trebuchet MS", sans-serif;
    font-size: 24px;
	color: black;
	margin:0;
}

.wrapper {   width: 300px;  margin: 20px auto;}

h1 {
    text-align: center;
}
h2 {
  text-align: center;font-size:1.0em;
}


p { padding:0; margin:0; }
small { font-size:0.8em; }

diams::after {    content: "♦";	color: #D00;	font-size:1.2em;}
clubs::after {    content: "♣";	color: #000;	font-size:1.2em;}
hearts::after {    content: "♥";	color: #D00;	font-size:1.2em;}
spades::after {    content: "♠";	color: #000;	font-size:1.2em;}
double::after {    content: "❌";	color: #D00;	font-size:1.2em;}

battrebud {
  border-radius: 200%;
  width:200%;
  padding: 0.1em 0.2em 0.1em 0.2em;
  background: #ff4;
  border: 0.15em solid #33f;
  color: #33f;
  text-align: center;font-weight: bold;font-size:0.7em;
  display: inline; 
}
battrebud::before {    content: "BB";}

merabud {
  border-radius: 200%;
  width:200%;
  padding: 0.1em 0.2em 0.1em 0.2em;
  background: rgb(157, 173, 157);
  border: 0.15em solid #DED;
  color: #DED;
  text-align: center;font-weight: bold;font-size:0.7em;
   display: inline; 
}
merabud::before {    content: "MB";}


bridgeplus {
   font-size:0.75em;
}

bridgeplus::after {
  content: "BP";  border-radius: 200%;
  width:200%;
  padding: 0.1em 0.2em 0.1em 0.2em;
  background: rgb(31, 145, 232);
  border: 0.15em solid #FFF;
  color: #FFF;
  text-align: center;font-weight: bold;font-size:0.7em;
  display: inline; 
}

bridgepro {
  border-radius: 200%;
  width:200%;
  padding: 0.1em 0.2em 0.1em 0.2em;
  background: #000;
  border: 0.15em solid #DDD;
  color: #EEE;
  text-align: center;font-weight: bold;font-size:0.7em;
   display: inline; 
}
bridgepro::before {    content: "BP";}

pass::after {
  content: "PASS";  border-radius: 10%;
  width:200%;
  padding: 0.1em 0.2em 0.1em 0.2em;
  background: rgb(25, 97, 25);
  border: 0.15em solid #FFF;
  color: #FFF;
  font-size:0.66em;
  text-align: center;font-weight: bold;font-size:0.7em;
  display: inline; 
}

obs {
  font-size:0.75em;
}

obs::after {
 content: "OBS!";  border-radius: 200%;
 width:200%;
 padding: 0.1em 0.2em 0.1em 0.2em;
 background: rgb(150, 50, 180);
 border: 0.15em solid #FFF;
 color: #FFF;
 text-align: center;font-weight: bold;font-size:0.7em;
 display: inline; 
}


alert::after {
  content: "*"; 
  width:200%;
  vertical-align: super;
   text-align: center;font-weight: bold;font-size:0.7em;
  display: inline; 
 }
 

/* krav::after {
 content: "K"; 
 width:200%;
 vertical-align: super;
  text-align: center;font-weight: bold;font-size:0.7em;
 display: inline; 
}

utkrav::after {
  content: "UT"; 
  width:200%;
  vertical-align: super;
   text-align: center;font-weight: bold;font-size:0.7em;
  display: inline; 
  color: #C00;
} */
 
/*.bridge-pro::after  { content:"²"; }
.mera-bud::after a { content:"¹"; }*/

li { padding: 2px; }

span { vertical-align: middle; }
span:first-child {    display: inline-block;    width:16%;       font-size: 1.2em; text-align: center; }
span:nth-child(2) {    display: inline-block;    width:63%; }

span.head:first-child { margin-left:5px;width:75%; text-align:left;}

span.ud:first-child   { padding:0; margin:5px;    width:30%;   font-size: 1.0em;display: inline-block;  }
span.ud:nth-child(2)    { padding:0; margin:0px;    width:50%;   font-size: 1.0em;display: inline-block;  }

a { color:black }

table, th, td {
  border: 0px solid black; text-align: center
}
th, td:nth-child(1) { background-color: #68A;color:white;width:15%;  }
td:nth-child(2) { background-color: #0C0;color:white;width:20%;  }
td:nth-child(3) { background-color: #080; color:white;width:20%; }
td:nth-child(4) { background-color: #E00; color:white;width:20%; }
td:nth-child(5) { background-color: #800; color:white;width:20%; }

/* ----------- iPhone 5, 5S, 5C and 5SE ----------- Portrait and Landscape */
@media only screen and (min-device-width: 100px) and (max-device-width: 375px) {
  body { font-size: 13px;  }
  .wrapper {   width: 320;   margin: 0px auto; }
  span:first-child {    display: inline-block;    width:33px;       font-size: 1.2em; }
  span:nth-child(2) {    display: inline-block;   width:calc(100% - 90px); }
}

/* ----------- iPhone 6, 6S, 7 and 8 -----------  Portrait and Landscape */
@media only screen  and (min-device-width: 375px) and (max-device-width: 667px) { 
  body { font-size: 14px;  }
  .wrapper {   width: 365px;   margin: 0px auto; }
  span:first-child {    display: inline-block;    width:66px;       font-size: 1.2em; }
  span:nth-child(2) {    display: inline-block;   width:50%; }

}

/* ----------- iPhone 6+, 7+ and 8+ ----------- Portrait and Landscape */
@media only screen  and (min-device-width: 414px) and (max-device-width: 736px) { 
  body { font-size: 15px;  }
  .wrapper {   width: 404px;   margin: 5px auto; }
}

/* ----------- iPad 3, 4 and Pro 9.7" ----------- */
@media only screen and (min-device-width: 736px)  {
  body { font-size: 22px;  }
  .wrapper {   width: 600px;   margin: 20px auto; }
}