/* tables */
#ts   {margin-bottom:8px;border-spacing:12px}
#ts td {cursor:default;font-size:.9em;font-size:.9rem;border-width:1px;border-style:solid;border-color:#C0C0C0;box-shadow:1px 2px 3px RGBA(0,0,0,0.4);out_line:dashed 1px #FF00FF}
#ts td img {display:block;width:100%}  /* ensures responsiveness */
#ts td.nb {border-style:none;box-shadow:none}
#ts td.ar {text-align:right;white-space:nowrap;border-style:none;box-shadow:none}
#ts td.cp {cursor:pointer;background-size:cover;background-repeat:no-repeat}
#ts td.cp input {display:none}
#ts td.cp input ~ div {background-image:url(imgs/style-check-n.png);background-size:cover}
#ts td.cp input:checked ~ div {background-image:url(imgs/style-check-y.png)}
#ts td.de {border-style:dashed;border-color:#A0A0A0}  /* default */
#ts td.dc {padding:2px;background-color:#FFFFFF;max-width:350px}
#ts td.dc span {overflow-wrap:break-word;color:#FFFF00;font-size:.9em;font-size:.9rem;background-color:#404040}
#ts td.ce {padding:2px;text-align:center;vertical-align:middle;background-color:#FFFFFF}
#ts td.ce a:hover {cursor:default;background:none}
#ts td.ce.ov {overflow:hidden;text-overflow:clip}
#ts td.ce.ov div {position:relative}
#ts td.ce.ov span {position:absolute;top:0;left:50%;transform:translate(-50%,0)}
#ts td.ce b {color:RGBA(255,0,0,0.5)}

div.at {color:#808080;font-size:.8em}
.at p.bu  {position:relative;margin-bottom:4px;padding-left:8px;text-indent:-0px}
.at p.bu::before {position:absolute;top:-3px;left:0px;content:'\2022';font-size:1.4em}
.at p a {opacity:.6}
.at span > span {position:relative;display:inline-block;width:16px}
.at span > span:after {position:absolute;bottom:-4px;display:inline-block;content:"";width:16px;height:16px;background-size:contain;background-repeat:no-repeat}
.at span > span.bl::after {background-image:url('./imgs/blossom18-icon.png')}
.at span > span.bf::after {background-image:url('./imgs/butterfly14-icon.png')}
.at span > span.lf::after {background-image:url('./imgs/leaf15-icon.png')}
.at span > span.mk::after {background-image:url('./imgs/MartinKrzywinski.png')}
.at span > span.sf01::after {background-image:url('./imgs/snowflake-arbinto-1.png     ')}
.at span > span.sf02::after {background-image:url('./imgs/snowflake-gradlo-11.png     ')}
.at span > span.sf03::after {background-image:url('./imgs/snowflake-shancel-9.png     ')}
.at span > span.sf04::after {background-image:url('./imgs/snowflake-arryn-1.png       ')}
.at span > span.sf05::after {background-image:url('./imgs/snowflake-listarlette-42.png')}
.at span > span.sf06::after {background-image:url('./imgs/snowflake-sammon-46.png     ')}
.at span > span.sf07::after {background-image:url('./imgs/snowflake-herik-42.png      ')}
.at span > span.sf08::after {background-image:url('./imgs/snowflake-ciiqhie-1.png     ')}
.at span > span.sf09::after {background-image:url('./imgs/snowflake-timky-9.png       ')}
.at span > span.sf10::after {background-image:url('./imgs/snowflake-owtune-46.png     ')}
.at span > span.sf11::after {background-image:url('./imgs/snowflake-miricolle-8.png   ')}
.at span > span.sf12::after {background-image:url('./imgs/snowflake-rusers-9.png      ')}
.at span > span.w3::after {background-image:url('./imgs/icons/W3Schools.png')}

/*
butterfly01.png  blossom14.png  snowflake-arbinto-1.png       leaf08.png
butterfly03.png  blossom15.png  snowflake-gradlo-11.png       leaf09.png
butterfly09.png  blossom02.png  snowflake-shancel-9.png       leaf10.png
butterfly04.png  blossom04.png  snowflake-arryn-1.png         leaf11.png
butterfly16.png  blossom08.png  snowflake-listarlette-42.png  leaf12.png
butterfly06.png  blossom17.png  snowflake-sammon-46.png       leaf13.png
butterfly15.png  blossom11.png  snowflake-herik-42.png        leaf14.png
butterfly14.png  blossom13.png  snowflake-ciiqhie-1.png       leaf15.png
butterfly08.png  blossom18.png  snowflake-timky-9.png         leaf16.png
                 blossom12.png  snowflake-owtune-46.png     
                                snowflake-miricolle-8.png   
                                snowflake-rusers-9.png      
*/

/* screens <= 895px */
@media only screen AND (max-width:895px){
  #ts td.dc span,
  #ts td {font-size:.8em;font-size:.8rem}
}

/* screens <= 561px */
@media only screen AND (max-width:561px){
  #ts td.dc span,
  #ts td {font-size:.7em;font-size:.7rem}
  #ts td.ar {white-space:normal}
}

/* screens <= 440px */
@media only screen AND (max-width:440px){
  #ts   {border-spacing:8px}
}

/* screens <= 400px */
@media only screen AND (max-width:400px){
  #ts   {border-spacing:6px}
}