var cssData = {
 "meta": {
  "noColor": 0
 },
 "adding": {},
 "info": {
  "157124": {
   "hex": "157124",
   "class_name": "cara"
  },
  "191919": {
   "hex": "191919",
   "class_name": "leira-hoserai"
  },
  "264186": {
   "hex": "264186",
   "class_name": "kadri"
  },
  "299999": {
   "hex": "299999",
   "class_name": "jhanu"
  },
  "400080": {
   "hex": "400080",
   "class_name": "neso-aris"
  },
  "430343": {
   "hex": "430343",
   "class_name": "kirino-sadness"
  },
  "443388": {
   "hex": "443388",
   "class_name": "wind-raz"
  },
  "490202": {
   "hex": "490202",
   "class_name": "black-to-kirino5"
  },
  "505545": {
   "hex": "505545",
   "class_name": "zweil"
  },
  "550000": {
   "hex": "550000",
   "class_name": "bell"
  },
  "570202": {
   "hex": "570202",
   "class_name": "black-to-kirino6"
  },
  "590590": {
   "hex": "590590",
   "class_name": "lhin"
  },
  "660202": {
   "hex": "660202",
   "class_name": "black-to-kirino7"
  },
  "710660": {
   "hex": "710660",
   "class_name": "karinas-mom"
  },
  "716006": {
   "hex": "716006",
   "class_name": "karinas-dad"
  },
  "740303": {
   "hex": "740303",
   "class_name": "black-to-kirino8"
  },
  "742424": {
   "hex": "742424",
   "class_name": "nightmare-karina"
  },
  "750000": {
   "hex": "750000",
   "class_name": "reyhsia"
  },
  "770000": {
   "hex": "770000",
   "class_name": "lettie-wormwood"
  },
  "777777": {
   "hex": "777777",
   "class_name": "melancholic"
  },
  "830303": {
   "hex": "830303",
   "class_name": "kirino"
  },
  "862929": {
   "hex": "862929",
   "class_name": "karina-transceiver"
  },
  "900000": {
   "hex": "750000",
   "class_name": "reyhsia"
  },
  "911111": {
   "hex": "911111",
   "class_name": "old-karina-to-kirino7"
  },
  "911135": {
   "hex": "911135",
   "class_name": "kirino-to-karina2"
  },
  "944444": {
   "hex": "944444",
   "class_name": "karina-narration"
  },
  "944446": {
   "hex": "944444",
   "class_name": "karina-narration"
  },
  "988013": {
   "hex": "988013",
   "class_name": "arandu"
  },
  "991919": {
   "hex": "991919",
   "class_name": "old-karina-to-kirino6"
  },
  "996633": {
   "hex": "996633",
   "class_name": "rel-irkin"
  },
  "courier-new": {
   "class_name": "courier-new",
   "face": "\"Courier New\", monospace"
  },
  "comic-sans": {
   "class_name": "comic-sans",
   "face": "\"Comic Sans\", cursive"
  },
  "trebuchet-ms": {
   "class_name": "trebuchet-ms",
   "face": "\"Trebuchet MS\", cursive"
  },
  "impact": {
   "class_name": "impact",
   "face": "\"Impact\", serif"
  },
  "times-new-roman": {
   "class_name": "times-new-roman",
   "face": "\"Times New Roman\", serif"
  },
  "verdana": {
   "class_name": "verdana",
   "face": "\"Verdana\", sans-serif"
  },
  "georgia": {
   "class_name": "georgia",
   "face": "\"Georgia\", serif"
  },
  "862929_courier-new": {
   "hex": "862929",
   "class_name": "karina-transceiver",
   "face": "\"Courier New\", monospace"
  },
  "eeeeee": {
   "hex": "eeeeee",
   "class_name": "invisible"
  },
  "c444e6": {
   "hex": "c444e6",
   "class_name": "karina"
  },
  "44a4e4": {
   "hex": "44a4e4",
   "class_name": "mabil"
  },
  "1919e6": {
   "hex": "1919e6",
   "class_name": "hannah"
  },
  "000000;830303": {
   "class_name": "black-to-kirino",
   "hexes": [
    "000000",
    "0f0000",
    "1d0101",
    "2c0101",
    "3a0101",
    "490202",
    "570202",
    "660202",
    "740303",
    "830303"
   ]
  },
  "000000": {
   "hex": "000000",
   "class_name": "black-to-kirino0"
  },
  "0f0000": {
   "hex": "0f0000",
   "class_name": "black-to-kirino1"
  },
  "1d0101": {
   "hex": "1d0101",
   "class_name": "black-to-kirino2"
  },
  "2c0101": {
   "hex": "2c0101",
   "class_name": "black-to-kirino3"
  },
  "3a0101": {
   "hex": "3a0101",
   "class_name": "black-to-kirino4"
  },
  "830303;c444e6": {
   "class_name": "kirino-to-karina",
   "hexes": [
    "830303",
    "8a0a1c",
    "911135",
    "99194f",
    "a02068",
    "a72781",
    "ae2e9a",
    "b636b4",
    "bd3dcd",
    "c444e6"
   ]
  },
  "8a0a1c": {
   "hex": "8a0a1c",
   "class_name": "kirino-to-karina1"
  },
  "99194f": {
   "hex": "99194f",
   "class_name": "kirino-to-karina3"
  },
  "a02068": {
   "hex": "a02068",
   "class_name": "kirino-to-karina4"
  },
  "a72781": {
   "hex": "a72781",
   "class_name": "kirino-to-karina5"
  },
  "ae2e9a": {
   "hex": "ae2e9a",
   "class_name": "kirino-to-karina6"
  },
  "b636b4": {
   "hex": "b636b4",
   "class_name": "kirino-to-karina7"
  },
  "bd3dcd": {
   "hex": "bd3dcd",
   "class_name": "kirino-to-karina8"
  },
  "c444e6;830303": {
   "class_name": "karina-to-kirino",
   "hexes": [
    "c444e6",
    "bd3dcd",
    "b636b4",
    "ae2e9a",
    "a72781",
    "a02068",
    "99194f",
    "911135",
    "8a0a1c",
    "830303"
   ]
  },
  "5e547c": {
   "hex": "5e547c",
   "class_name": "experiment-zero"
  },
  "007700": {
   "hex": "007700",
   "class_name": "lettie"
  },
  "9ba9ba": {
   "hex": "9ba9ba",
   "class_name": "reza"
  },
  "0083ff": {
   "hex": "0083ff",
   "class_name": "xan"
  },
  "cf0000": {
   "hex": "cf0000",
   "class_name": "nami"
  },
  "0022e2": {
   "hex": "0022e2",
   "class_name": "experiment-debug"
  },
  "e20200": {
   "hex": "e20200",
   "class_name": "experiment-hope"
  },
  "daa4f3": {
   "hex": "daa4f3",
   "class_name": "karina-faded"
  },
  "1d3163": {
   "hex": "1d3163",
   "class_name": "maevah"
  },
  "545e7c": {
   "hex": "5e547c",
   "class_name": "experiment-zero"
  },
  "a03807": {
   "hex": "a03807",
   "class_name": "anne"
  },
  "e78a34": {
   "hex": "e78a34",
   "class_name": "atlani"
  },
  "e26666": {
   "hex": "e26666",
   "class_name": "karina-okused"
  },
  "006660": {
   "hex": "006660",
   "class_name": "mr-bently"
  },
  "c44446": {
   "hex": "c44444",
   "class_name": "karina-kirinod"
  },
  "c44444": {
   "hex": "c44444",
   "class_name": "karina-kirinod"
  },
  "1919e6;c44444": {
   "class_name": "hannah-to-old-karina",
   "hexes": [
    "1919e6",
    "2c1ed4",
    "3f23c2",
    "5227b0",
    "652c9e",
    "78318c",
    "8b367a",
    "9e3a68",
    "b13f56",
    "c44444"
   ]
  },
  "2c1ed4": {
   "hex": "2c1ed4",
   "class_name": "hannah-to-old-karina1"
  },
  "3f23c2": {
   "hex": "3f23c2",
   "class_name": "hannah-to-old-karina2"
  },
  "5227b0": {
   "hex": "5227b0",
   "class_name": "hannah-to-old-karina3"
  },
  "652c9e": {
   "hex": "652c9e",
   "class_name": "hannah-to-old-karina4"
  },
  "78318c": {
   "hex": "78318c",
   "class_name": "hannah-to-old-karina5"
  },
  "8b367a": {
   "hex": "8b367a",
   "class_name": "hannah-to-old-karina6"
  },
  "9e3a68": {
   "hex": "9e3a68",
   "class_name": "hannah-to-old-karina7"
  },
  "b13f56": {
   "hex": "b13f56",
   "class_name": "hannah-to-old-karina8"
  },
  "c44444;830303": {
   "class_name": "old-karina-to-kirino",
   "hexes": [
    "c44444",
    "bd3d3d",
    "b63636",
    "ae2e2e",
    "a72727",
    "a02020",
    "991919",
    "911111",
    "8a0a0a",
    "830303"
   ]
  },
  "bd3d3d": {
   "hex": "bd3d3d",
   "class_name": "old-karina-to-kirino1"
  },
  "b63636": {
   "hex": "b63636",
   "class_name": "old-karina-to-kirino2"
  },
  "ae2e2e": {
   "hex": "ae2e2e",
   "class_name": "old-karina-to-kirino3"
  },
  "a72727": {
   "hex": "a72727",
   "class_name": "old-karina-to-kirino4"
  },
  "a02020": {
   "hex": "a02020",
   "class_name": "old-karina-to-kirino5"
  },
  "8a0a0a": {
   "hex": "8a0a0a",
   "class_name": "old-karina-to-kirino8"
  },
  "830303;c44444": {
   "class_name": "kirino-to-old-karina",
   "hexes": [
    "830303",
    "8a0a0a",
    "911111",
    "991919",
    "a02020",
    "a72727",
    "ae2e2e",
    "b63636",
    "bd3d3d",
    "c44444"
   ]
  },
  "e5c300": {
   "hex": "e5c300",
   "class_name": "seiva"
  },
  "ea7325": {
   "hex": "ea7325",
   "class_name": "master-sara"
  },
  "0a2442": {
   "hex": "0a2442",
   "class_name": "rixos"
  },
  "00adff": {
   "hex": "00adff",
   "class_name": "skylar-rolt"
  },
  "72767a": {
   "hex": "72767a",
   "class_name": "khon-vasq"
  },
  "1919a6": {
   "hex": "1919a6",
   "class_name": "hannah-narration"
  },
  "ffffff": {
   "hex": "ffffff",
   "class_name": "invisible"
  },
  "edf4fd": {
   "hex": "ffffff",
   "class_name": "invisible"
  },
  "cacaca": {
   "hex": "cacaca",
   "class_name": "silver-border"
  },
  "ebe200": {
   "hex": "ebe200",
   "class_name": "anne-white"
  },
  "008ceb": {
   "hex": "008ceb",
   "class_name": "anne-blue"
  },
  "7b00eb": {
   "hex": "7b00eb",
   "class_name": "anne-black"
  },
  "eb3000": {
   "hex": "eb3000",
   "class_name": "anne-red"
  },
  "0900eb": {
   "hex": "0900eb",
   "class_name": "anne-green"
  },
  "473cc4": {
   "hex": "473cc4",
   "class_name": "selem"
  },
  "b79b44": {
   "hex": "b79b44",
   "class_name": "yenna"
  },
  "8a87aa": {
   "hex": "8a87aa",
   "class_name": "xaja"
  },
  "b60000": {
   "hex": "b60000",
   "class_name": "doer"
  },
  "00bb55": {
   "hex": "00bb55",
   "class_name": "michi"
  },
  "1979e6": {
   "hex": "1979e6",
   "class_name": "arina"
  },
  "1979a6": {
   "hex": "1979a6",
   "class_name": "arina-narration"
  },
  "e61919": {
   "hex": "e61919",
   "class_name": "fulmen"
  },
  "030383": {
   "hex": "030383",
   "class_name": "kirino-memory"
  },
  "007bce": {
   "hex": "007bce",
   "class_name": "skylar-rolt-detective"
  },
  "c26d00": {
   "hex": "c26d00",
   "class_name": "skylar-rolt-monsters"
  },
  "8c19e6": {
   "hex": "8c19e6",
   "class_name": "skylar-rolt-her"
  },
  "9c0000": {
   "hex": "9c0000",
   "class_name": "skylar-rolt-riddle"
  },
  "0077ff": {
   "hex": "0077ff",
   "class_name": "henry-brayden"
  },
  "be9001": {
   "hex": "be9001",
   "class_name": "flynn"
  },
  "4a9a4a": {
   "hex": "4a9a4a",
   "class_name": "sevid"
  },
  "404d4d": {
   "hex": "404d4d",
   "class_name": "xirix"
  },
  "60a5a5": {
   "hex": "60a5a5",
   "class_name": "saia"
  },
  "5030a0": {
   "hex": "5030a0",
   "class_name": "mei-liva"
  },
  "779a3a": {
   "hex": "779a3a",
   "class_name": "undue"
  },
  "be8c8c": {
   "hex": "be8c8c",
   "class_name": "pidge"
  },
  "6e2111": {
   "hex": "6e2111",
   "class_name": "experiment-three"
  },
  "da9a00": {
   "hex": "da9a00",
   "class_name": "briar"
  },
  "e33030": {
   "hex": "e33030",
   "class_name": "briar-vikrei"
  },
  "da009a": {
   "hex": "da9a00",
   "class_name": "briar-milli"
  },
  "700c70": {
   "hex": "700c70",
   "class_name": "cygari"
  },
  "ad5d5d": {
   "hex": "ad5d5d",
   "class_name": "haide"
  },
  "a5ceff": {
   "hex": "a5ceff",
   "class_name": "neeyo"
  },
  "ffb700": {
   "hex": "ffb700",
   "class_name": "dawn-monster"
  },
  "ffbd00": {
   "hex": "ffbd00",
   "class_name": "argel"
  },
  "ff4200": {
   "hex": "ff4200",
   "class_name": "argel-mentor"
  },
  "cae34f": {
   "hex": "cae34f",
   "class_name": "allatu"
  },
  "6e0dc7": {
   "hex": "6e0dc7",
   "class_name": "soumaw"
  },
  "6cb267": {
   "hex": "6cb267",
   "class_name": "twyla"
  },
  "a49341": {
   "hex": "a49341",
   "class_name": "parsul"
  },
  "2ecc71": {
   "hex": "2ecc71",
   "class_name": "parsul-cajun"
  },
  "c8bf36": {
   "hex": "c8bf36",
   "class_name": "world-book-1"
  },
  "95703c": {
   "hex": "95703c",
   "class_name": "world-book-2"
  },
  "8f953c": {
   "hex": "8f953c",
   "class_name": "world-book-3"
  },
  "3c957b": {
   "hex": "3c957b",
   "class_name": "world-book-4"
  },
  "953c7a": {
   "hex": "953c7a",
   "class_name": "world-book-5"
  },
  "893c95": {
   "hex": "893c95",
   "class_name": "world-book-6"
  },
  "abae20": {
   "hex": "abae20",
   "class_name": "world-book-7"
  },
  "ff0000": {
   "hex": "ff0000",
   "class_name": "world-book-8"
  },
  "644a76": {
   "hex": "644a76",
   "class_name": "world-book-9"
  },
  "c1c431": {
   "hex": "c1c431",
   "class_name": "world-book-10"
  },
  "c231c4": {
   "hex": "c231c4",
   "class_name": "world-book-11"
  },
  "acacac": {
   "hex": "acacac",
   "class_name": "world-book-12"
  },
  "2e89cc": {
   "hex": "2e89cc",
   "class_name": "world-book-13"
  },
  "dedede": {
   "hex": "dedede",
   "class_name": "world-book-14"
  },
  "e619b8": {
   "hex": "e619b8",
   "class_name": "parsuls-princess"
  },
  "00bb69": {
   "hex": "00bb69",
   "class_name": "callie"
  },
  "73c0ca": {
   "hex": "73c0ca",
   "class_name": "lei-koen"
  },
  "ff8700": {
   "hex": "ff8700",
   "class_name": "januti"
  },
  "a1000": {
   "hex": "a1000",
   "class_name": "iritola"
  },
  "cc0066": {
   "hex": "cc0066",
   "class_name": "mattol"
  },
  "b7d9df": {
   "hex": "b7d9df",
   "class_name": "dieule"
  },
  "c97979": {
   "hex": "c97979",
   "class_name": "dieule-rude"
  },
  "8533dd": {
   "hex": "8533dd",
   "class_name": "rudara"
  },
  "38ac8b": {
   "hex": "38ac8b",
   "class_name": "seska"
  },
  "2e866d": {
   "hex": "2e866d",
   "class_name": "seska-older"
  },
  "db969b": {
   "hex": "db969b",
   "class_name": "estova-rei"
  },
  "698c8c": {
   "hex": "698c8c",
   "class_name": "haia-kenei"
  },
  "85b2b2": {
   "hex": "85b2b2",
   "class_name": "varei-maristo"
  },
  "77ccdd": {
   "hex": "77ccdd",
   "class_name": "ani-soei"
  },
  "4caa00": {
   "hex": "4caa00",
   "class_name": "kirilo-rekasai"
  },
  "3e2a75": {
   "hex": "3e2a75",
   "class_name": "kei-aliri"
  },
  "007f0f": {
   "hex": "007f0f",
   "class_name": "aeryl-kestei"
  },
  "4545aa": {
   "hex": "4545aa",
   "class_name": "kaira-veis"
  },
  "c519e6": {
   "hex": "c519e6",
   "class_name": "kauriga"
  },
  "b98500": {
   "hex": "b98500",
   "class_name": "aiden-sunspear"
  },
  "ad1999": {
   "hex": "ad1999",
   "class_name": "nadejda"
  },
  "31174d": {
   "hex": "31174d",
   "class_name": "hana-cheyn"
  },
  "0aa2af": {
   "hex": "0aa2af",
   "class_name": "severin"
  },
  "3ac291": {
   "hex": "3ac291",
   "class_name": "chief-aimi"
  },
  "947f14": {
   "hex": "947f14",
   "class_name": "aiea-7ci"
  },
  "c533a8": {
   "hex": "c533a8",
   "class_name": "book-of-stabbing"
  },
  "3b4d17": {
   "hex": "3b4d17",
   "class_name": "dr-arueth"
  },
  "9ad641": {
   "hex": "9ad641",
   "class_name": "orik-thornspike"
  },
  "0b325e": {
   "hex": "0b325e",
   "class_name": "lace-ryba"
  },
  "2a574a": {
   "hex": "2a574a",
   "class_name": "ylansa"
  },
  "475b70": {
   "hex": "475b70",
   "class_name": "safir-nejem"
  },
  "067e6f": {
   "hex": "067e6f",
   "class_name": "valech-belmonte"
  },
  "d6c92e": {
   "hex": "d6c92e",
   "class_name": "janika-linna"
  },
  "cc73c5": {
   "hex": "cc73c5",
   "class_name": "britt-bergfalk"
  },
  "ca7186": {
   "hex": "ca7186",
   "class_name": "resplendent"
  },
  "241e70": {
   "hex": "241e70",
   "class_name": "kathryn-wrona"
  },
  "51476b": {
   "hex": "51476b",
   "class_name": "yamamoto-mio"
  },
  "6c8a37": {
   "hex": "6c8a37",
   "class_name": "lochana"
  },
  "cf3a00": {
   "hex": "cf3a00",
   "class_name": "tam-of-house-lyr"
  },
  "187e65": {
   "hex": "187e65",
   "class_name": "kunal"
  },
  "71599c": {
   "hex": "71599c",
   "class_name": "teagan-markey"
  },
  "ff00de": {
   "hex": "ff00de",
   "class_name": "yakana"
  },
  "5f7504": {
   "hex": "5f7504",
   "class_name": "vidus"
  },
  "5b7654": {
   "hex": "5b7654",
   "class_name": "aelewin"
  },
  "1ec86f": {
   "hex": "1ec86f",
   "class_name": "simul"
  },
  "8c579c": {
   "hex": "8c579c",
   "class_name": "liactru"
  },
  "d10000": {
   "hex": "d10000",
   "class_name": "thistle"
  },
  "bb7700": {
   "hex": "bb7700",
   "class_name": "lothaire"
  },
  "8f2c53": {
   "hex": "8f2c53",
   "class_name": "cyria-agraud"
  },
  "d8a800": {
   "hex": "d8a800",
   "class_name": "aeterna"
  },
  "df0101": {
   "hex": "df0101",
   "class_name": "marlowar"
  },
  "ad20e6": {
   "hex": "ad20e6",
   "class_name": "meadowlark"
  },
  "c7c700": {
   "hex": "c7c700",
   "class_name": "firefly"
  },
  "00cc77": {
   "hex": "00cc77",
   "class_name": "tano-resaino"
  },
  "7700cc": {
   "hex": "7700cc",
   "class_name": "kesai-turo"
  },
  "8500ff": {
   "hex": "8500ff",
   "class_name": "vivian"
  },
  "66cc8a": {
   "hex": "66cc8a",
   "class_name": "tokata"
  },
  "ce5f2a": {
   "hex": "ce5f2a",
   "class_name": "hilda"
  },
  "4c1ee3": {
   "hex": "4c1ee3",
   "class_name": "novek-shen"
  },
  "f22222": {
   "hex": "f22222",
   "class_name": "as-han"
  },
  "a7a284": {
   "hex": "a7a284",
   "class_name": "hanska"
  },
  "19e673": {
   "hex": "19e673",
   "class_name": "yliki"
  },
  "7b19e6": {
   "hex": "7b19e6",
   "class_name": "mishka"
  },
  "64407e": {
   "hex": "64407e",
   "class_name": "alsy"
  },
  "505d15": {
   "hex": "505d15",
   "class_name": "obris-rook"
  },
  "a83737": {
   "hex": "a83737",
   "class_name": "zetla"
  },
  "a700eb": {
   "hex": "a700eb",
   "class_name": "lysenda"
  },
  "5c4e3a": {
   "hex": "5c4e3a",
   "class_name": "lysenda-cat"
  },
  "ca00aa": {
   "hex": "ca00aa",
   "class_name": "nicholai"
  },
  "e6199c": {
   "hex": "e6199c",
   "class_name": "cayli"
  },
  "7a7a7a": {
   "hex": "7a7a7a",
   "class_name": "roy-nessy"
  },
  "00d480": {
   "hex": "00d480",
   "class_name": "aki-nessy"
  }
 }
}
var cssExtra = "#workskin body {\r\n  font-size: 100%;\r\n}\r\n\r\n#workskin .half-point {\r\n  font-size: 0.5em;\r\n}\r\n\r\n#workskin .one-point {\r\n  font-size: 0.75em;\r\n}\r\n\r\n#workskin .three-point {\r\n  font-size: 1.25em;\r\n}\r\n\r\n#workskin .four-point {\r\n  font-size: 1.5em;\r\n}\r\n\r\n#workskin .hoverwrapper2 {\r\n  z-index: 2;\r\n  position: relative;\r\n  display: block;\r\n  height: 0%;\r\n}\r\n\r\n#workskin .hoverwrapper3 {\r\n  z-index: 3;\r\n  position: relative;\r\n  display: inline-block;\r\n  height: 0%;\r\n}\r\n\r\n#workskin .revealed,\r\n#workskin .revealed2,\r\n#workskin .revealed3 {\r\n  font-size: 0.0em;\r\n  display: block;\r\n  height: 0%;\r\n}\r\n\r\n#workskin .revealed2:hover {\r\n  font-size: 1.0em;\r\n  height: auto;\r\n}\r\n\r\n#workskin .hoverwrapper:hover .revealed {\r\n  font-size: 1.0em;\r\n  height: auto;\r\n}\r\n\r\n#workskin .hoverwrapper:hover .hoverwrapper2 {\r\n  height: auto;\r\n}\r\n\r\n#workskin .hoverwrapper2:hover .hoverwrapper3 {\r\n  height: auto;\r\n}\r\n\r\n#workskin .hoverwrapper:hover .fake_back {\r\n  width: 100%;\r\n  height: 100%;\r\n}\r\n\r\n#workskin .hoverwrapper2:hover .revealed2 {\r\n  font-size: 1.0em;\r\n  height: auto;\r\n}\r\n\r\n#workskin .hoverwrapper2:hover .fake_back2 {\r\n  width: 100%;\r\n  height: 100%;\r\n  z-index: 3;\r\n}\r\n\r\n#workskin .hoverwrapper3:hover .revealed3 {\r\n  font-size: 1.0em;\r\n  height: auto;\r\n}\r\n\r\n#workskin .hoverwrapper3:hover .fake_back3 {\r\n  width: 100%;\r\n  height: 100%;\r\n  z-index: 4;\r\n}\r\n\r\n#workskin .fake_back,\r\n#workskin .fake_back2,\r\n#workskin .fake_back3 {\r\n  height: 0%;\r\n  width: 0%;\r\n  background-color: transparent;\r\n  position: absolute;\r\n  top: 0px;\r\n  left: 0px;\r\n}\r\n\r\n#workskin .center-span {\r\n  display: block;\r\n  text-align: center;\r\n}\r\n\r\n#workskin .one-more-second {\r\n  display: block;\r\n  margin-left: auto;\r\n  margin-right: auto;\r\n  position: absolute;\r\n  opacity: 0%;\r\n  width: 0%;\r\n  height: 0%;\r\n}\r\n\r\n#workskin .hoverwrapper3:hover .one-more-second {\r\n  position: relative;\r\n  opacity: 100%;\r\n  width: auto;\r\n  height: auto;\r\n}";
var steps = 10;
var port_skin = false;
var fr;
var unclaimed_slugs = [];
var claimed_slugs = [];
var slug_counter = 0;
var live_slugs = {};
var class_names = {};
function digiDecimal(digitString){ 								//convert string 0-) to number 0-72
	let _0zArray = ["0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z","A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z","!","@","#","$","%","^","&","*","(",")"]
	return _0zArray.indexOf(digitString);
}
function digiAlpha(digitString){ 								//convert number 0-36 to string 0-) [0-9, a-z, A-Z, !-)]
	let _0zArray = ["0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z","A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z","!","@","#","$","%","^","&","*","(",")"]
	return _0zArray[digitString];
}
function convertDecimal(digit, currentBase) { 					//convert from any base to base 10
	if(currentBase == 10)
		return digit;
	let equiv = 0;
	let digitString = String(digit);
	for(let i = digitString.length-1; i>=0; i--) {
		let pow = digitString.length - i - 1;
		equiv += digiDecimal(digitString[i]) * Math.pow(currentBase, pow)
	}
	return equiv;
}
function convertBases(digit, currentBase, newBase){ 			//converts from any base (1-36) to any other base
	currentBase = Math.trunc(Math.min(72, Math.max(1,currentBase)));
	newBase = Math.trunc(Math.min(72, Math.max(1,newBase)));
	let negFlag = false;
	if(typeof digit == 'number' && digit < 0) {
		digit *= -1;
		negFlag = true;
	}
	let equiv = convertDecimal(digit, currentBase);
	if(newBase == 1) {
		equiv = parseInt(Array(equiv).fill(1).join(""));
	}
	else if(newBase != 10) {
		let digitString = String(digit);
		let equivString = "";
		while(equiv > 0) {
			let rem = equiv % newBase;
			let res = (equiv / newBase) - (rem/newBase);
			equivString = digiAlpha(rem) + equivString;
			equiv = res;
		}
		equiv = equivString;
		if(newBase < 10)
			equiv = parseInt(equiv);
	}
	if(negFlag)
		equiv *= -1;
	return equiv;
}

function numToHex(num) {
	let str = String(convertBases(num, 10, 16))
	if(str.length == 1)
		str = "0" + str;
	return str;
}
function hexToInt(hex) {
	return convertBases(hex, 16, 10);
}
function gradientNumbers(n1, n2) {
	let diff = n1 - n2;
	let steps2 = steps-1;
	let step = diff/steps2;
	let out = [n1];
	for(let i=1; i<steps2; i++)
		out.push(n1 - Math.round(i*step))
	out.push(n2)
	return out;
}
let distributeInteger = function* (total, divider) {
  if (divider === 0) {
    yield 0
  } else {
    let rest = total % divider
    let result = total / divider
     
    for (let i = 0; i < divider; i++) {
      if (rest-- >0) {
        yield Math.ceil(result)
      } else {
        yield Math.floor(result)
      }
    }
  } 
}
function distribute(total, divider) {
	let groups = []
	for (let member of distributeInteger(total, divider)) {
	  groups.push(member)
	}
	//basically evenly distributed
	if(total >= divider)
		return groups;
	//otherwise we have holes
	let zeroes = steps - total;
	let zerogroups = []
	for(let member of distributeInteger(zeroes, total-1))
		zerogroups.push(member);
	let newgroups = [];
	for(let i in groups) {
		if(groups[i] == 0)
			break;
		newgroups.push(groups[i])
		for(let j=0; j<(zerogroups[i]||0); j++)
			newgroups.push(0)
	}
	return newgroups;
}
function getGradientArrays(c1, c2, length) {
	if(length < 3)
		return [[c1, c2], [1, 1]];
	let gradient_hexes = [];
	if(cssData.info[c1+";"+c2]) {
		gradient_hexes = cssData.info[c1+";"+c2].hexes;
	}else{
		let rgb1 = c1.match(/(..)(..)(..)/)
		let rgb2 = c2.match(/(..)(..)(..)/)
		let rgrad = gradientNumbers(hexToInt(rgb1[1]), hexToInt(rgb2[1]))
		let ggrad = gradientNumbers(hexToInt(rgb1[2]), hexToInt(rgb2[2]))
		let bgrad = gradientNumbers(hexToInt(rgb1[3]), hexToInt(rgb2[3]))
		for(let i=0; i<rgrad.length; i++) {
			gradient_hexes.push(numToHex(rgrad[i])+numToHex(ggrad[i])+numToHex(bgrad[i]))
		}
	}
	let dist_numbers = distribute(length, steps);
	return [gradient_hexes, dist_numbers]
}
function escapify(string) { 									//escapes strings for RegExp
	return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
}

function convertText(data) {
	//kill divs they cause problems
	data = data.replace(/\[div\]([^\n]+?)\n?\[\/div\]/g, "$1\n")
	//split i styles
	data = data.replace(/\[i ([^\]]+\][\s\S]*?)\[\/i\]/g, "[i][span $1[/span][/i]")
	//purge empty tags
	data = data.replace(/\[u\](\r?\n?)\[\/u\]/g, "$1");
	data = data.replace(/\[b\](\r?\n?)\[\/b\]/g, "$1");
	data = data.replace(/\[i\](\r?\n?)\[\/i\]/g, "$1");
	data = data.replace(/\[font [^\]]+\](\r?\n?)\[\/font\]/g, "$1");
	data = data.replace(/\[u\](\r?\n?)\[\/u\]/g, "$1");
	data = data.replace(/\[b\](\r?\n?)\[\/b\]/g, "$1");
	data = data.replace(/\[i\](\r?\n?)\[\/i\]/g, "$1");
	data = data.replace(/\[div\](\r?\n?)\[\/div\]/g, "$1");
	//delete leading quote tag
	data = data.replace(/\[quote[^\]]+\]/, "");
	//convert middles to <hr>
	data = data.replace(/\[\/quote\][ \r\n]+\[quote[^\]]+\]/g, "<hr>");
	// convert remaining pairs into blockquote
	data = data.replace(/\[quote[^\]]+\](.+?)\[\/quote\]/g, "<blockquote>$1</blockquote>")
	//turn the last and any remaining into a <hr>
	data = data.replace(/\[\/?quote[^\]]*\]/g, "<hr>");
	//convert simple tags
	data = data.replace(/\[(\/)?(i|b|s|a|u|div|hr)\]/g, "<$1$2>")
	//convert quote tags
	data = data.replace(/\[(a href|div align|img src|img style|img alt)(="[^\]]+")\]/g, "<$1$2>")
	//convert font sizeToContent
	data = data.replace(/\[font size="1"\]/g, '<span class="one-point">')
	data = data.replace(/\[font size="3"\]/g, '<span class="three-point">')
	data = data.replace(/\[font size="4"\]/g, '<span class="four-point">')
	//[span style="color:rgb(131, 3, 3);"]
	//[font face="courier new" style="color:rgb(134, 41, 41);"]
	//[font color="44a4e4"]
	let divs = data.match(/\[(span|font)([^\]]+)]/g);
	let cached_tags = [];
	for(let c in divs) {
		let tag = divs[c];
		if(cached_tags.includes(tag))
			continue;
		cached_tags.push(tag);
		let faceCheck = tag.match(/face="([^"]+)"/);
		let hexCheck = tag.match(/color="#?([0-9a-f]+)"/);
		let styleCheck = tag.match(/rgb\(([^, )]+), ?([^, )]+), ?([^, )]+)\)/);
		let font_face = ""
		let slug = {};
		if(faceCheck)
			font_face = " " + faceCheck[1].toLowerCase().replace(/ /g, "-")
		if(styleCheck){
			slug.hex = numToHex(styleCheck[1]) + numToHex(styleCheck[2]) + numToHex(styleCheck[3])
		}else if(hexCheck) {
			slug.hex = hexCheck[1];
		}
		let slugname = slug.hex;
		if(!slug.hex) {
			if(slug.face) {
				slugname = slug.face.replace(/ /g, "-");
			}else{
				slugname = "NoColor" + cssData.meta.noColor;
				cssData.meta.noColor++;
				port_skin = true;
			}
		}else if(slug.face) {
			slugname += "_" + slug.face.replace(/ /g, "-");
		}
		if(cssData.info[slugname]) {
			slug = cssData.info[slugname];
		}else if(cssData.adding[slugname]) {
			slug.class_name = cssData.adding[slugname];
			cssData.info[slugname] = slug;
			port_skin = true;
		}else{
			unclaimed_slugs.push(slugname);
		}
		data = data.replace(new RegExp(escapify(tag), 'g'), '<span class="' + slug.class_name + font_face + '">')
	}
	//[gradient="000000;830303"]
	let grads = data.match(/\[gradient="[^"]+"][^\n]+?\[\/gradient\]/g);
	if(grads) {
		for(let g in grads) {
			let gradient = grads[g];
			let bits = gradient.match(/\[gradient="([^;]+);([^"]+?)"]([^\n]+)\[\/gradient\]/);
			let c1 = bits[1];
			let c2 = bits[2];
			let master_class = c1 + ";" + c2;
			let msg = bits[3];
			let words = msg.split(" ");
			let len = words.length;
			// if less than 5 characters do by character instead
			if(len < 5)
				len = msg.length;
			let g_as = getGradientArrays(c1, c2, len);
			let hex_array = g_as[0];
			let dist_array = g_as[1];
			// register new classes
			if(!cssData.info[master_class]) {
				let over_name = cssData.adding[master_class] || "Unknown"
				if(over_name == "Unknown")
					unclaimed_slugs.push(master_class)
				cssData.info[master_class] = {
					class_name: over_name,
					hexes: hex_array
				}
				for(let i=0; i<hex_array.length; i++) {
					if(cssData.info.hasOwnProperty(hex_array[i]))
						continue;
					cssData.info[hex_array[i]] = {
						hex: hex_array[i],
						class_name: over_name + i
					}
				}
				port_skin = true;
			}
			let replacement = "";
			let counter = 0;
			for(let h in hex_array) {
				let val = dist_array[h];
				if(val == 0)
					continue;
				let hex = hex_array[h];
				let str = ""
				let max = counter+val;
				for(counter; counter<max; counter++) {
					if(words.length < 5) {
						// style by substring
						str += msg.substring(counter, counter+1)
					}else{
						//style by word
						str += words[counter];
						//add a space unless this is the last one
						if(counter != words.length-1)
							str += " ";
					}
				}
				replacement += `<span class="${cssData.info[hex].class_name}">${str}</span>`
			}
			data = data.replace(gradient, replacement);
		}
	}
	data = data.replace(/\[\/(font|span)\]/g, "</span>");
	data = data.replace(/\r?\n/g, "<br>")
	data = data.replace(/([^\r\n]+)\r?\n\r?\n/g, "<p>$1</p>")
	return data;
}
function writeWorkskin() {
	let cssblock = "";
	for(let c in cssData.info) {
		cssblock += writeCSSBlock(c);
	}
	cssblock += cssExtra;
	return cssblock;
}
function writeCSSBlock(c) {
	var cssblock = "";
	if(cssData.info[c].hasOwnProperty("hexes"))
		return ""; // gradient cache
	cssblock += `#workskin .${cssData.info[c].class_name} {\n`
	if(cssData.info[c].hex)
		cssblock += `  color: #${cssData.info[c].hex};\n`
	if(cssData.info[c].face)
		cssblock += `  font-family:${cssData.info[c].face};\n`
	cssblock += "}\n\n"
	return cssblock;
}
function printWorkskin() {
	var fs = require('fs');
	var cssblock = writeWorkskin();
	fs.writeFile('workskin.txt', cssblock, function() {
		console.log('workskin written');
	})
	
}
function docLoaded() {
}
function beginConversion() {
	var converted = convertText(document.getElementById("import").value);
	document.getElementById("workskin").innerHTML = converted;
	// to do, deal with unknown colors
	
	document.getElementById("workskin-css").innerHTML = writeWorkskin();
	document.getElementById("final-output").innerHTML = converted;
	if(unclaimed_slugs.length) {
		claimSlugs();
	}
	if(claimed_slugs.length) {
		var cssblock = "";
		for(var s in claimed_slugs) {
			cssblock += writeCSSBlock(claimed_slugs[s]);
		}
		document.getElementById("workskin-new").innerHTML = cssblock;
		document.getElementById("workskin-new").style.visibility = "";
		document.getElementById("workskin-cond").innerHTML = "You have new code, so go to My Dashboard -> Skins -> My Work Skins and update your skin (or create a new Skin if you haven't yet). Send the data in the second textbox to Cajun so it can be permanently registered.";
	}
}
function findCloseHex(hex) {
	// r, g, b, max_diff * total_diff, hex
	var diff = [255, 255, 255, 195075, ""];
	var h_equiv = [
		convertDecimal(hex.substring(0, 2), 16),
		convertDecimal(hex.substring(2, 4), 16),
		convertDecimal(hex.substring(4, 6), 16)
	];
	for(var h in cssData.info) {
		var hex_obj = cssData.info[h];
		if(hex_obj.hexes)
			continue;
		if(!hex_obj.hex)
			continue;
		if(!hex_obj.hasOwnProperty("h_equiv")) {
			hex_obj.h_equiv = [
				convertDecimal(hex_obj.hex.substring(0, 2), 16),
				convertDecimal(hex_obj.hex.substring(2, 4), 16),
				convertDecimal(hex_obj.hex.substring(4, 6), 16)
			];
			
		}
		var self_diff = [
			Math.abs(h_equiv[0] - hex_obj.h_equiv[0]),
			Math.abs(h_equiv[1] - hex_obj.h_equiv[1]),
			Math.abs(h_equiv[2] - hex_obj.h_equiv[2])
		];
		// prioritize smallest max diff and smallest total diff
		self_diff.push(Math.max(self_diff[0], self_diff[1], self_diff[2])*(self_diff[0] + self_diff[1] + self_diff[2]))
		self_diff.push(h);
		if(self_diff[3] < diff[3])
			diff = self_diff;
		class_names[hex_obj.class_name] = h;
	}
	return diff[4];
}
function claimSlugs() {
	var slug_holder = document.getElementById("slug-container");
	for(var slug in unclaimed_slugs) {
		var hex = unclaimed_slugs[slug]
		var slug_child = document.createElement("div");
		slug_child.id = "slug-" + slug_counter;
		slug_child.className = "slug-sub-container";
		var inner = "";
		var close_hex = findCloseHex(hex);
		console.log(close_hex);
		var close_name = cssData.info[close_hex].class_name;
		inner += `<span style="color:#${hex};">#${hex}</span> `;
		inner += `<input type="text" id="name-slug-${slug_counter}" size="25" placeholder="Character name"></input>`
		inner += `<div id="claimed-slug-${slug_counter}"></div>`
		inner += `<input type="checkbox" id="swap-slug-${slug_counter}"></input> Switch to `
		inner += `<span style="color:#${close_hex};">#${close_hex}: ${close_name}</span>`
		slug_child.innerHTML = inner;
		console.log(slug_child);
		slug_holder.appendChild(slug_child);
		live_slugs[`slug-${slug_counter}`] = {gh:hex, ch:close_hex};
		slug_counter++;
	}
	document.getElementById("claim-slugs").style.visibility = "";
}
function testSlugs() {
	var fin = [];
	var fin_id = [];
	for(var slug_id in live_slugs) {
		var given_hex = live_slugs[slug_id].gh;
		var close_hex = live_slugs[slug_id].ch;
		var rename_hex = live_slugs[slug_id].nh;
		var close_check = document.getElementById("swap-"+slug_id);
		var rename_check = document.getElementById("rename-"+slug_id);
		var given_name = document.getElementById("name-"+slug_id);
		if(rename_hex && rename_check && rename_check.checked) {
			// switch to an existing slug with a particular name
			cssData.info[given_hex] = {
				hex: cssData.info[rename_hex].hex,
				class_name: cssData.info[rename_hex].class_name,
			}
			fin_id.push(slug_id);
			continue;
		}
		if(close_hex && close_check && close_check.checked) {
			// switch to an existing slug with a similar color
			cssData.info[given_hex] = {
				hex: cssData.info[close_hex].hex,
				class_name: cssData.info[close_hex].class_name,
			}
			fin_id.push(slug_id);
			continue;
		}
		if(given_name) {
			if(given_name.value == "")
				continue;
			
			var nname = given_name.value.toLowerCase().replace(/ /g, "-").replace(/'/g, "");
			if(class_names.hasOwnProperty(nname)) {
				// name's taken
				var other_hex = class_names[nname];
				live_slugs[slug_id].nh = other_hex;
				var inner = `Name <span style="color:#${other_hex};">${nname} (#${other_hex})</span> already registered.<br>`;
				inner += `<input type="checkbox" id="rename-${slug_id}"></input> Switch to `
				inner += `<span style="color:#${other_hex};">#${other_hex}: ${nname}</span>`
				document.getElementById("claimed-"+slug_id).innerHTML = inner;
				continue;
			}
			// name's free, set up a temp
			cssData.info[given_hex] = {
				hex: given_hex,
				class_name: nname
			}
			addCSSRule(`#workskin .${nname} {color:#${given_hex};}`, slug_id)
			class_names[nname] = given_hex;
			claimed_slugs.push(given_hex);
			fin_id.push(slug_id);
			continue;
		}
	}
	//clear out the ones that are done
	for(var f in fin_id) {
		var slug_id = fin_id[f];
		var given_hex = live_slugs[slug_id].gh;
		unclaimed_slugs.splice(unclaimed_slugs.indexOf(given_hex), 1)
		document.getElementById(slug_id).remove();
		delete live_slugs[slug_id];
	}
	if(unclaimed_slugs.length == 0) {
		// all claimed
		document.getElementById("claim-slugs").style.visibility = "hidden";
		beginConversion();
	}
}
function addCSSRule(cssCode, styleid) {						// add a new CSS rule
	$(`<style id="${styleid}">${cssCode}</style>`).appendTo("body");
}