/* ctips.css - 2020-11-17 */

@media screen {

  [class^="tt"]:hover, [class^="tb"]:hover 
    {color:#444444;outline:thin solid grey;outline-offset:-1px}

 [class^="tt"]:hover,   [class^="tb"]:hover {cursor:help;} 
 [class^="tt w"]:hover, [class^="tb w"]:hover {cursor:pointer;} 

  ins[class^="tt"]:active::before, ins[class^="tb"]:active::before
    {background-image:linear-gradient(#FFD600,#FFB200); border:thin solid grey; 
     outline-offset:-1px; z-index:2; position:absolute; }

  ins[class^="tt"]:hover::after,   ins[class^="tb"]:hover::after
    {background-color:orange; color:white; border:thin solid grey; 
     font-weight:normal; font-size:85%; outline-offset:-1px; z-index:1;
     position:absolute;  text-align:right; border-radius:25px;}

/* special */
  .jyun4:hover::after{content:'\A0 cjk - first\A0';}
  .nin4:hover::after{content:'\A0 cjk - year\A0';}
  .sei4:hover::after{content:'\A0 cjk - dead\A0';}
  .t0bu:hover::after{content:'\A0 stamp - building\A0';}
  .t0fi:hover::after{content:'\A0 stamp - figure\A0';}
  .t0nu:hover::after{content:'\A0 stamp - number\A0';}
  .t0sy:hover::after{content:'\A0 stamp - symbol\A0';}
/* metals & alloys & materials */
  .ag47:hover::after{content:'\A0 metal - silver (argentum)\A0';}
  .ag79:hover::after{content:'\A0 alloy - electrum (AgAu)\A0';}
  .al13:hover::after{content:'\A0 metal - aluminium\A0';}
  .au79:hover::after{content:'\A0 metal - gold (aurum)\A0';}
  .bc00:hover::after{content:'\A0 material - baked clay\A0';}
  .bi83:hover::after{content:'\A0 metal - bismuth\A0';}
  .cl00:hover::after{content:'\A0 material - celluloid\A0';}
  .cr24:hover::after{content:'\A0 metal - chromium\A0';}
  .cu13:hover::after{content:'\A0 alloy - aluminium bronze (CuAl)\A0';}
  .cu28:hover::after{content:'\A0 alloy - cupronickel (CuNi)\A0';}
  .cu29:hover::after{content:'\A0 metal - copper (cuprum)\A0';}
  .cu30:hover::after{content:'\A0 alloy - brass (CuZn)\A0';}
  .cu47:hover::after{content:'\A0 alloy - billon (CuAg)\A0';}
  .cu50:hover::after{content:'\A0 alloy - bronze (CuSn)\A0';}
  .cu58:hover::after{content:'\A0 alloy - nickel silver (CuNiZn)\A0';}
  .cu70:hover::after{content:'\A0 alloy - nickel brass (CuZnNi)\A0';}
  .cu77:hover::after{content:'\A0 alloy - manganese bronze (CuZnMnNi)\A0';}
  .cu89:hover::after{content:'\A0 alloy - nordic gold (CuAlZnSn)\A0';}
  .cu92:hover::after{content:'\A0 alloy - copper nickel alumin(i)um (CuAlNi)\A0';}
  .fe06:hover::after{content:'\A0 alloy - steel (FeC)\A0';}
  .fe26:hover::after{content:'\A0 metal - iron (ferrum)\A0';}
  .fr00:hover::after{content:'\A0 material - fibre\A0';}
  .lp00:hover::after{content:'\A0 material - laid paper\A0';}
  .mg12:hover::after{content:'\A0 metal - magnesium\A0';}
  .mn25:hover::after{content:'\A0 metal - manganese\A0';}
  .nb41:hover::after{content:'\A0 metal - niobium\A0';}
  .ni28:hover::after{content:'\A0 metal - nickel\A0';}
  .pa00:hover::after{content:'\A0 material - paper board\A0';}
  .pb82:hover::after{content:'\A0 metal - lead (plumbum)\A0';}
  .pd46:hover::after{content:'\A0 metal - palladium\A0';}
  .pl00:hover::after{content:'\A0 material - plastic\A0';}
  [class^="tt w"]:hover::after,
  .pr00:hover::after{content:'\A0 material - paper\A0';}
  .pt78:hover::after{content:'\A0 metal - platinum\A0';}
  .pz00:hover::after{content:'\A0 material - porcelain\A0';}
  .rh45:hover::after{content:'\A0 metal - rhodium\A0';}
  .sb51:hover::after{content:'\A0 metal - antimony (stibium)\A0';}
  .sn50:hover::after{content:'\A0 metal - tin (stannum)\A0';}
  .ta73:hover::after{content:'\A0 metal - tantalum\A0';}
  .ti22:hover::after{content:'\A0 metal - titanium\A0';}
  .vc00:hover::after{content:'\A0 material - vulcanized rubber\A0';}
  .zn30:hover::after{content:'\A0 metal - zinc\A0';}
  .zn81:hover::after{content:'\A0 alloy - pewter (ZnSbCu[Pb])\A0';}
/* watermarks pics */
  .w014:active::before{content: url(../pics/w014.gif);} 
  .w025:active::before{content: url(../pics/w025.gif);} 
  .w026:active::before{content: url(../pics/w026.gif);} 
  .w028:active::before{content: url(../pics/w028.gif);} 
  .w029:active::before{content: url(../pics/w029.gif);} 
  .w030:active::before{content: url(../pics/w030.gif);} 
  .w031:active::before{content: url(../pics/w031.gif);} 
  .w033:active::before{content: url(../pics/w033.gif);} 
  .w034:active::before{content: url(../pics/w034.gif);} 
  .w039:active::before{content: url(../pics/w039.gif);} 
  .w041:active::before{content: url(../pics/w041.gif);} 
  .w043:active::before{content: url(../pics/w043.gif);} 
  .w047:active::before{content: url(../pics/w047.gif);} 
  .w051:active::before{content: url(../pics/w051.gif);} 
  .w059:active::before{content: url(../pics/w059.gif);} 
  .w062:active::before{content: url(../pics/w062.gif);} 
  .w063:active::before{content: url(../pics/w063.gif);} 
  .w064:active::before{content: url(../pics/w064.gif);} 
  .w069:active::before{content: url(../pics/w069.gif);} 
  .w072:active::before{content: url(../pics/w072.gif);} 
  .w079:active::before{content: url(../pics/w079.gif);} 
  .w129:active::before{content: url(../pics/w129.gif);} 
  .w133:active::before{content: url(../pics/w133.gif);} 
  .w135:active::before{content: url(../pics/w135.gif);} 
  .w136:active::before{content: url(../pics/w136.gif);} 
  .w146:active::before{content: url(../pics/w146.gif);} 
  .w156:active::before{content: url(../pics/w156.gif);} 
  .w157:active::before{content: url(../pics/w157.gif);} 
  .w158:active::before{content: url(../pics/w158.gif);} 
  .w160:active::before{content: url(../pics/w160.gif);} 
  .w162:active::before{content: url(../pics/w162.gif);} 
  .w169:active::before{content: url(../pics/w169.gif);} 
  .w171:active::before{content: url(../pics/w171.gif);} 
  .w172:active::before{content: url(../pics/w172.gif);} 
  .w174:active::before{content: url(../pics/w174.gif);} 
  .w175:active::before{content: url(../pics/w175.gif);} 
  .w176:active::before{content: url(../pics/w176.gif);} 
  .w178:active::before{content: url(../pics/w178.gif);} 
  .w184:active::before{content: url(../pics/w184.gif);} 
  .w186:active::before{content: url(../pics/w186.gif);} 
  .w188:active::before{content: url(../pics/w188.gif);} 
  .w189:active::before{content: url(../pics/w189.gif);} 
  .w194:active::before{content: url(../pics/w194.gif);} 
  .w196:active::before{content: url(../pics/w196.gif);} 
  .w197:active::before{content: url(../pics/w197.gif);} 
  .w198:active::before{content: url(../pics/w198.gif);} 
  .w200:active::before{content: url(../pics/w200.gif);} 
  .w211:active::before{content: url(../pics/w211.gif);} 
  .w213:active::before{content: url(../pics/w213.gif);} 
  .w218:active::before{content: url(../pics/w218.gif);} 
  .w220:active::before{content: url(../pics/w220.gif);} 
  .w221:active::before{content: url(../pics/w221.gif);} 
  .w224:active::before{content: url(../pics/w224.gif);} 
  .w228:active::before{content: url(../pics/w228.gif);} 
  .w237:active::before{content: url(../pics/w237.gif);} 
  .w251:active::before{content: url(../pics/w251.gif);} 
/* watermarks text */
  .w000:hover::after{content:'\A0 watermark - company watermark\A0';}
  .w014:hover::after{content:'\A0 watermark - sixteen diamonds\A0';}
  .w025:hover::after{content:'\A0 watermark - four petals (small cruciform blossoms)\A0';}
  .w026:hover::after{content:'\A0 watermark - cross and circle pattern\A0';}
  .w028:hover::after{content:'\A0 watermark - curved triangles (thorns)\A0';}
  .w029:hover::after{content:'\A0 watermark - tangled polygons\A0';}
  .w030:hover::after{content:'\A0 watermark - c pattern (greek)\A0';}
  .w031:hover::after{content:'\A0 watermark - lattice with eights\A0';}
  .w033:hover::after{content:'\A0 watermark - wavy (serpentine) lines\A0';}
  .w034:hover::after{content:'\A0 watermark - small circles\A0';}
  .w039:hover::after{content:'\A0 watermark - reichsdruckerei wavy lines\A0';}
  .w041:hover::after{content:'\A0 watermark - rhine waves\A0';}
  .w043:hover::after{content:'\A0 watermark - gerber waves\A0';}
  .w047:hover::after{content:'\A0 watermark - giesecke z pattern\A0';}
  .w051:hover::after{content:'\A0 watermark - giesecke three-pronged pattern\A0';}
  .w059:hover::after{content:'\A0 watermark - 3 dimensional chain\A0';}
  .w062:hover::after{content:'\A0 watermark - hexagons with 3 stars\A0';}
  .w063:hover::after{content:'\A0 watermark - star hexagon pattern\A0';}
  .w064:hover::after{content:'\A0 watermark - diamond star pattern\A0';}
  .w069:hover::after{content:'\A0 watermark - ovals with 4 rays\A0';}
  .w072:hover::after{content:'\A0 watermark - s-s pattern\A0';}
  .w079:hover::after{content:'\A0 watermark - bochum star flowers\A0';}
  .w129:hover::after{content:'\A0 watermark - thyssen pattern\A0';}
  .w133:hover::after{content:'\A0 watermark - wavy bundles\A0';}
  .w135:hover::after{content:'\A0 watermark - furrows\A0';}
  .w136:hover::after{content:'\A0 watermark - waffle pattern\A0';}
  .w146:hover::after{content:'\A0 watermark - zigzag lines\A0';}
  .w156:hover::after{content:'\A0 watermark - hexagonal weave\A0';}
  .w157:hover::after{content:'\A0 watermark - wavy lattice\A0';}
  .w158:hover::after{content:'\A0 watermark - braided stripes\A0';}
  .w160:hover::after{content:'\A0 watermark - intertwined squares\A0';}
  .w162:hover::after{content:'\A0 watermark - octagonal tiles\A0';}
  .w169:hover::after{content:'\A0 watermark - stonework\A0';}
  .w171:hover::after{content:'\A0 watermark - light crosses\A0';}
  .w172:hover::after{content:'\A0 watermark - dark crosses\A0';}
  .w174:hover::after{content:'\A0 watermark - bent cross pattern\A0';}
  .w175:hover::after{content:'\A0 watermark - cross maze\A0';}
  .w176:hover::after{content:'\A0 watermark - hooked maze\A0';}
  .w178:hover::after{content:'\A0 watermark - intertwined circles\A0';}
  .w184:hover::after{content:'\A0 watermark - looped cross\A0';}
  .w186:hover::after{content:'\A0 watermark - droplet pattern\A0';}
  .w188:hover::after{content:'\A0 watermark - parquet pattern\A0';}
  .w189:hover::after{content:'\A0 watermark - molten octagons\A0';}
  .w194:hover::after{content:'\A0 watermark - blunt honeycomb\A0';}
  .w196:hover::after{content:'\A0 watermark - round honeycomb\A0';}
  .w197:hover::after{content:'\A0 watermark - spindles\A0';}
  .w198:hover::after{content:'\A0 watermark - wheels of triangles\A0';}
  .w200:hover::after{content:'\A0 watermark - scales\A0';}
  .w211:hover::after{content:'\A0 watermark - intertwined ss\A0';}
  .w213:hover::after{content:'\A0 watermark - s crown pattern\A0';}
  .w218:hover::after{content:'\A0 watermark - z pattern\A0';}
  .w220:hover::after{content:'\A0 watermark - delta pattern\A0';}
  .w221:hover::after{content:'\A0 watermark - sigma pattern\A0';}
  .w224:hover::after{content:'\A0 watermark - for protection\A0';}
  .w228:hover::after{content:'\A0 watermark - marble\A0';}
  .w237:hover::after{content:'\A0 watermark - c cross pattern\A0';}
  .w251:hover::after{content:'\A0 watermark - hammer shield\A0';}
/* shapes pics */
  .xo8x:active::before{content: url(../pics/xo8x.gif);} 
/* shapes text */
  .xr0x:hover::after{content:'\A0 circle\A0';}
  .xr0c:hover::after{content:'\A0 circle - curved sides or scalloped\A0';}
  .xr0s:hover::after{content:'\A0 circle - scrolled sides\A0';}
  .xo0h:hover::after{content:'\A0 ellipse - horizontal\A0';}
  .xo0v:hover::after{content:'\A0 ellipse - vertical\A0';}
  .xt3x:hover::after{content:'\A0 triangle\A0';}
  .xt3d:hover::after{content:'\A0 triangle - down-pointing\A0';}
  .xt3r:hover::after{content:'\A0 triangle - rounded corners\A0';}
  .xd4x:hover::after{content:'\A0 rhombus\A0';}
  .xd4h:hover::after{content:'\A0 rhombus - leveled top and bottom cut outs\A0';}
  .xd4r:hover::after{content:'\A0 rhombus - rounded corners\A0';}
  .xo4h:hover::after{content:'\A0 rectangle - horizontal\A0';}
  .xo4r:hover::after{content:'\A0 rectangle - rounded corners\A0';}
  .xo4v:hover::after{content:'\A0 retancgle - vertical\A0';}
  .xs4x:hover::after{content:'\A0 square\A0';}
  .xs4c:hover::after{content:'\A0 square - curved sides or scalloped\A0';}
  .xs4l:hover::after{content:'\A0 square - large cut out or clipped corners\A0';}
  .xs4r:hover::after{content:'\A0 square - rounded corners\A0';}
  .xs4s:hover::after{content:'\A0 square - scrolled sides\A0';}
  .xt4p:hover::after{content:'\A0 parallelogram\A0';}
  .xt4t:hover::after{content:'\A0 trapezoid\A0';}
  .xp5x:hover::after{content:'\A0 pentagon\A0';}
  .xp5l:hover::after{content:'\A0 pentagon - large cut out or clipped corners\A0';}
  .xh6x:hover::after{content:'\A0 hexagon\A0';}
  .xh6p:hover::after{content:'\A0 hexagon - number of spokes\A0';}
  .xh6r:hover::after{content:'\A0 hexagon - rounded corners\A0';} 
  .xh7x:hover::after{content:'\A0 heptagon\A0';}
  .xh7r:hover::after{content:'\A0 heptagon - rounded corners\A0';}
  .xo8x:hover::after{content:'\A0 octagon\A0';}
  .xo8c:hover::after{content:'\A0 octagon - curved sides or scalloped\A0';}
  .xo8r:hover::after{content:'\A0 octagon - rounded corners\A0';}
  .xn9x:hover::after{content:'\A0 nonagon\A0';}
  .xn9r:hover::after{content:'\A0 nonagon - rounded corners\A0';}
  .x10x:hover::after{content:'\A0 decagon\A0';}
  .x10r:hover::after{content:'\A0 decagon - rounded corners\A0';}
  .x11x:hover::after{content:'\A0 hendecagon\A0';}
  .x11r:hover::after{content:'\A0 hendecagon - rounded corners\A0';}
  .x12x:hover::after{content:'\A0 dodecagon\A0';}
  .x12c:hover::after{content:'\A0 dodecagon - curved sides or scalloped\A0';}
  .x12r:hover::after{content:'\A0 dodecagon - rounded corners\A0';}
  .x15x:hover::after{content:'\A0 pentadecagon\A0';}
  .x15r:hover::after{content:'\A0 pentadecagon - rounded corners\A0';}
  .x16x:hover::after{content:'\A0 hexadecagon\A0';}
  .x16c:hover::after{content:'\A0 hexadecagon - curved sides or scalloped\A0';}
  .x32x:hover::after{content:'\A0 dotriacontagon\A0';}
  .x32c:hover::after{content:'\A0 dotriacontagon - curved sides or scalloped\A0';}
}