Homestuck Workskin (Extended) for AO3

README.md

Homestuck Workskin (Extended) for Archive Of Our Own

This is an extended version of the Homestuck Work Skin available on AO3. It contains more colors and more specific labels for most major characters, along with some standard styles to mimic things like pesterlogs, prompts, links, and more.

Be sure to credit @wovenstarlight on AO3 when using this.

Features for HTML and CSS are annotated in comments. Most should not be modified. However, some custom layouts, class names, and colors have been inserted. These are marked "custom" - Ctrl+F/Cmd+F to find these and modify them as you like.

PREVIEW: https://archiveofourown.org/works/4428371

Usage Guide

CSS

• Go to the following link: https://archiveofourown.org/skins/new?skin_type=WorkSkin
• Enter a recognizable name in the Title field, such as Homestuck skin (extended).
• Copy everything in the file HS workskin - CSS.css and paste it in the "CSS" field, then hit Save.
• Edit the work you want to use this skin in. If it's a multi-chapter work, you'll want to edit the entire work, not just a single chapter. Scroll down to the "Associations" section; in the last option, "Select Work Skin", pick the name that you saved this work skin under. Save the work. You will now be able to add in pesterlogs and formatted text similar to that shown in the AO3 preview.

Most of the skin's classes can be used in <span> and <p> tags. Some classes are specially annotated to show how they may be used.

Table of contents

• Prompts and commands (header and next page link)
• Pesterlog (no "show/hide pesterlog" functionality, but otherwise perfectly mimics the look)
• All character colors, canon (includes humans, trolls, lusii, sprites, carapacians, cherubs, the Felt)
• Non-character colors, canon (includes aspects, denizens, blood colors, sign colors, and troll body reference colors)
• Interactive Pesterlog (fanmade)
• Custom colors section

HTML

• Create the work skin as instructed above.
• Create a new work/chapter, or edit an existing one (if trying to add this to a multi-chapter work, edit the entire work).
• Scroll down to the "Work Text" section, and select the HTML editor. Insert your code with appropriate class attributes. You can copy it from HS workskin - sample HTML.html as desired, or write your own from scratch using the file as a reference.
• Preview the work to ensure it works as expected, then Update. (Double-check for any <p></p> tags, which should be removed. If you get spacing errors, just delete all spacing between any <> tags.)

Sections

Ctrl+F/Cmd+F the text in double quotes to find each section.

• "AO3 PREVIEW" - the code for the workskin preview, linked above.
• "Interactive pesterlog" - the code for interactive pesterlogs, as displayed in the preview linked above. Fanmade.
• "PESTERLOG SAMPLE" - code for an excerpt of a canonical pesterlog, which you can directly copy and adapt, for ease of pesterlog creation.

HS workskin - CSS.css

/* Standard header prompt and commands */
#workskin .prompt { /* Title of the top of the page. Apply to <p> tags. ==> */
	font-size: 2.133em;
	font-weight: bold;
	font-family: "Courier New", courier, monospace;
	color: #000;
}
#workskin .command1,
#workskin .com1 { /* Arrow to the next page.
					Use &gt; instead of > and apply using <span> tag, so that
					it looks like <span class="command1">&gt;</span>. */
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 1.6em;
	font-weight: normal;
	color: #000000;
}
#workskin .command2,
#workskin .com2 { /* Command for the next page, looks like a link. Apply to <span> tag. */
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 1.6em;
	font-weight: normal;
	text-decoration: underline;
	color: #0000ee;
}

/** Scratch version of header and prompt
	To use these, add class="scratch secondclass" to the element,
	where secondclass is one of < prompt | command1 | com1 | command2 | com2 >.
	The <p> or <div> containing the prompt/command should be of class "intermission".
*/
#workskin .scratch.prompt { /* Title of the top of the page. ==> */
	color: #fff;
}
#workskin .scratch.command1,
#workskin .scratch.com1 { /* Arrow to the next page */
	color: #ffffff;
}
#workskin .scratch.command2,
#workskin .scratch.com2 { /* Command for the next page, looks like a link */
	color: #2cff4b;
}

/**	PESTERLOG
	Best applied to a <div> surrounding all paragraphs containing texts/speech.
	Note that all paragraph spacing is turned off, so all lines are spaced apart
	equally, whether separated by a <br> linebreak tag or a <p> paragraph tag.
	I recommend separating each new speaker's text/speech into a new paragraph, and
	putting <br> linebreak tags between each individual lines from that person.
	This is to accommodate users who turn off user styling, disabling this workskin.
	See the corresponding HTML for an example of a pesterlog (under "PESTERLOG SAMPLE").
*/
#workskin .block {
	max-width: 650px;
	margin: 1.33em auto;
	border: 1px dashed gray;
	padding: 0.7em 2.5em;
	background: #eeeeee;
	color: #000000;
}
#workskin .block p { margin: 0; }

/** Pesterlog, scratch version.
	White text on a green background, instead of black text on a gray background.
	Apply to <div> tags in the format class="scratch block".
*/
#workskin .scratch.block {
	background: #000000;
	color: #ffffff;
}

/** CUSTOM CHAT LOG
	If you'd like your own background and text colors for a pesterlog block:
	- Modify the code given below:
		- Change CUSTOM to your special pesterlog's name. Preferably,
		  pick a single short word.
		- Change the colors to your own (hex or RGB format). Make sure the colors
		  contrast enough to be easily readable!
	- In the HTML, apply to <div> tags in the format class="CUSTOM block".
	  Note that the name is case-sensitive- "custom" is NOT the same as "CUSTOM"!
*/
#workskin .CUSTOM.block {
	background: #6c0b6b; /* Background color */
	color: #ffffff; /* Text color */
}


/** All standard text.
	Note that usage of this is only required when styles are being used outside of
	a .block element. Use class="text secondclass" and replace <secondclass> with
	the appropriate character name.
*/

#workskin .block,
#workskin .text {
	font-size: 0.933em;
	font-weight: bold;
	font-family: "Courier New", courier, monospace;
}

/**	CANON COLORS
	Each character is listed with each of the following, as applicable.
	- First name
	- Nicknames
	- Chumhandle (full, all versions)
	- Chumhandle abbreviations (Characters with duplicate abbreviations have their
								abbreviations suffixed with "a" or "b" for alpha or beta
								respectively. Characters turned into sprites have their
								abbreviations followed by "s")
	- Name of group or family (non-humans only)

	All characters' styles are annotated with their full names for easier searching.

	SPECIAL CASES
	- Jasprose and Davepeta use different styles for their names and their actual speech/texts.
	  The styles for their names are .<chara>-name and .<chara>name, and for their speech/texts
	  are .<chara>-text and .<chara>text. Replace <chara> with the appropriate character (nick)name.
	- Similarly, Jade Harley and Jane Crocker use different styles when grimbark and
	  crockertier respectively. The styles for their names are the standard: .jade and
	  .jane, and the styles for their speech/texts are .grimbark and .crockertier respectively.
	- The Vantases have two main styles, gray and red. Instead of a single .vantas style,
	  there's two: .vantasb for gray, and .vantasa for red.

	CUSTOM CHARACTER NAMES
	I've added some personal headcanon names for special characters, including Davesprite
	and all the human ancestors/guardians. Each of these is tagged with the comment "custom".
	Feel free to change/delete these as you like. Alternatively, add your own custom names
	using the same format!
*/

/* Standard white text */
#workskin .white { color: #ffffff; }

/* Standard black text */
#workskin .black,
/* Jade Harley, grimbark speech and text */
#workskin .grimbark,
/* Andrew Hussie */
#workskin .hussie,
#workskin .andrewhussie,
#workskin .andrew,
#workskin .huss {
	color: #000000;
}

/* John Egbert */
#workskin .john,
#workskin .ghostytrickster,
#workskin .gtb,
#workskin .ectobiologist,
#workskin .eb,
/* Jane's Tavrosprite, Tavrisprite, and GCATavrosprite */
#workskin .tavrosprite,
#workskin .tavrisprite,
#workskin .tavris,
#workskin .gcatavrosprite,
#workskin .gcatavros {
	color: #0715cd;
}

/* Rose Lalonde */
#workskin .rose,
#workskin .tentacletherapist,
#workskin .ttb,
/* Roxy's Fefetasprite */
#workskin .fefetasprite,
#workskin .fefeta,
/* Roxy's Rosesprite, and Jasprosesprite^2's speech and text */
#workskin .rosesprite,
#workskin .jasprosesprite-text,
#workskin .jasprosespritetext,
#workskin .jasprose-text,
#workskin .jasprosetext {
	color: #b536da;
}

/* Dave Strider */
#workskin .dave,
#workskin .turntechgodhead,
#workskin .tgb,
/* Dirk's Auto-Responder / Lil Hal Strider */
#workskin .ar,
#workskin .hal,
/* Dirk's Equiusprite and Arquiusprite */
#workskin .equiusprite,
#workskin .arquiusprite,
#workskin .arquius {
	color: #e00707;
}

/* Jade Harley */
#workskin .jade,
#workskin .gardengnostic,
#workskin .ggb,
/* Jake's Erisolsprite */
#workskin .erisolsprite,
#workskin .erisol,
/* Jake's Nepetasprite, and Davepetasprite^2's name and B33 < prefix */
#workskin .nepetasprite,
#workskin .davepetasprite-name,
#workskin .davepetaspritename,
#workskin .davepeta-name,
#workskin .davepetaname {
	color: #4ac925;
}

/* Jane Crocker */
#workskin .jane,
#workskin .gutsygumshoe,
#workskin .gga,
/* John's Nannasprite */
#workskin .nannasprite {
	color: #00d5f2;
}

/* Jane's speech and text when Crockertier */
#workskin .crockertier,
/* Dirk's Squarewave */
#workskin .squarewave {
	color: #ff0000;
}

/* Jake English */
#workskin .jake,
#workskin .golgothasterror,
#workskin .gta,
/* Jade's Becsprite and Jadesprite */
#workskin .becsprite,
#workskin .jadesprite,
#workskin .ggs {
	color: #1f9400;
}

/* Roxy Lalonde */
#workskin .roxy,
#workskin .tipsygnostalgic,
#workskin .tga {
	color: #ff6ff2;
}

/* Dirk Strider */
#workskin .dirk,
#workskin .timaeustestified,
#workskin .tta,
/* Dave's Davesprite */
#workskin .davesprite,
#workskin .tgs,
#workskin .byrd, /* custom */
/* Doomed Dave's Calsprite */
#workskin .calsprite,
/* Davepetasprite^2's speech and text */
#workskin .davepetasprite-text,
#workskin .davepetaspritetext,
#workskin .davepeta-text,
#workskin .davepetatext {
	color: #f2a400;
}

/* Jaspersprite, and Jasprosesprite^2's name */
#workskin .jaspersprite,
#workskin .jasprosesprite-name,
#workskin .jasprosespritename,
#workskin .jasprose-name,
#workskin .jasprosename {
	color: #f141ef;
}

#workskin .megido,
/* Aradia Megido */
#workskin .aradia,
#workskin .ara,
#workskin .apocalypsearisen,
#workskin .aa,
#workskin .aradiabot,
/* Damara Megido and the Handmaid */
#workskin .damara,
#workskin .handmaid,
#workskin .aradiasprite,
/* The Megido lusus */
#workskin .kangarammom,
#workskin .kangaram-mom,
#workskin .rammom,
#workskin .ram-mom {
	color: #a10000;
}

#workskin .nitram,
/* Tavros Nitram */
#workskin .tavros,
#workskin .tav,
#workskin .adiostoreador,
#workskin .at,
/* Rufioh Nitram and the Summoner */
#workskin .rufioh,
#workskin .summoner,
/* The Nitram lusus */
#workskin .tinkersprite,
#workskin .tinkerbull {
	color: #a15000;
}

#workskin .captor,
/* Sollux Captor */
#workskin .sollux,
#workskin .sol,
#workskin .twinarmageddons,
#workskin .ta,
/* Mituna Captor and the Ψiioniic/Psionic/Helmsman */
#workskin .mituna,
#workskin .psiioniic,
#workskin .psi,
#workskin .psii,
#workskin .helmsman,
/* The Captor lusus */
#workskin .biclopsprite,
#workskin .bicyclopsprite,
#workskin .biclops,
#workskin .biclopsdad,
#workskin .biclops-dad,
#workskin .bicyclops,
#workskin .bicyclopsdad,
#workskin .bicyclops-dad {
	color: #a1a100;
}

/* GRAY Vantas text */
#workskin .vantasb,
/* Karkat Vantas */
#workskin .karkat,
#workskin .kar,
#workskin .kk,
#workskin .carcinogeneticist,
#workskin .cg,
/* The Vantas lusus */
#workskin .crabsprite,
#workskin .crabdad {
	color: #626262;
}

/* RED Vantas text */
#workskin .vantasa,
/* Karkat's alternate text */
#workskin .altkarkat,
#workskin .altkar,
#workskin .altkk,
#workskin .altcarcinogeneticist,
#workskin .altcg,
/* Kankri Vantas and the Signless/Sufferer */
#workskin .kankri,
#workskin .signless,
#workskin .sufferer,
/* Red ~ATH text */
#workskin .athred {
	color: #ff0000;
}

#workskin .leijon,
/* Nepeta Leijon */
#workskin .nepeta,
#workskin .nep,
#workskin .arseniccatnip,
#workskin .ac,
/* Meulin Leijon and the Disciple */
#workskin .meulin,
#workskin .disciple,
/* The Leijon lusus */
#workskin .pouncesprite,
#workskin .pounce,
#workskin .pouncedeleon,
#workskin .pounce-de-leon {
	color: #416600;
}

#workskin .maryam,
/* Kanaya Maryam */
#workskin .kanaya,
#workskin .kan,
#workskin .grimauxiliatrix,
#workskin .ga,
/* Porrim Maryam and the Dolorosa */
#workskin .porrim,
#workskin .dolorosa,
/* The Maryam lusus */
#workskin .mothersprite,
#workskin .mothergrub,
#workskin .mother-grub,
#workskin .virginmothergrub,
#workskin .virgin-mother-grub {
	color: #008141;
}

#workskin .pyrope,
/* Terezi Pyrope */
#workskin .terezi,
#workskin .tez,
#workskin .tz,
#workskin .gallowscalibrator,
#workskin .gc,
/* Latula Pyrope and Neophyte Redglare */
#workskin .latula,
#workskin .neophyte,
#workskin .redglare,
/* The Pyrope lusus */
#workskin .dragonsprite,
#workskin .dragon,
#workskin .pyralspite {
	color: #008282;
}

#workskin .serket,
/* Vriska Serket */
#workskin .vriska,
#workskin .vris,
#workskin .arachnidsgrip,
#workskin .ag,
/* Aranea Serket and Marquise Spinneret Mindfang */
#workskin .aranea,
#workskin .marquise,
#workskin .spinneret,
#workskin .mindfang,
/* The Serket lusus */
#workskin .spidersprite,
#workskin .spider,
#workskin .spidermom,
#workskin .spider-mom {
	color: #005682;
}

#workskin .zahhak,
/* Equius Zahhak */
#workskin .equius,
#workskin .centaurstesticle,
#workskin .ct,
/* Horuss Zahhak and E%ecutor/Executor Darkleer/the E%patria8/Expatriate */
#workskin .horuss,
#workskin .executor,
#workskin .expatri8,
#workskin .darkleer,
/* The Zahhak lusus */
#workskin .aurthoursprite,
#workskin .aurthour,
/* Alternate Aradia's text */
#workskin .altaradia {
	color: #000056;
}

#workskin .makara,
/* Gamzee Makara */
#workskin .gamzee,
#workskin .gam,
#workskin .terminallycapricious,
#workskin .tc,
/* Kurloz Makara and the Grand Highblood */
#workskin .kurloz,
#workskin .grandhighblood,
#workskin .ghb,
/* The Makara lusus */
#workskin .goatsprite,
#workskin .goatdad {
	color: #2b0057;
}

/* The Makaras' chucklevoodoos */
#workskin .altgamzee,
#workskin .altgam,
#workskin .altgm,
#workskin .altgz,
#workskin .altterminallycapricious,
#workskin .alttc,
#workskin .altkurloz,
#workskin .altgrandhighblood,
#workskin .altghb,
#workskin .altmakara,
#workskin .chucklevoodoo,
#workskin .chucklevoodoos {
	color: #5716ad;
}

#workskin .ampora,
/* Eridan Ampora */
#workskin .eridan,
#workskin .eri,
#workskin .caligulasaquarium,
#workskin .ca,
/* Cronus Ampora and Orphaner Dualscar */
#workskin .cronus,
#workskin .orphaner,
#workskin .dualscar,
/* The Ampora lusus */
#workskin .seahorsesprite,
#workskin .skyhorsesprite,
#workskin .seahorsedad,
#workskin .seahorse-dad,
#workskin .skyhorsedad,
#workskin .skyhorse-dad {
	color: #6a006a;
}

#workskin .peixes,
/* Feferi Peixes */
#workskin .feferi,
#workskin .fef,
#workskin .ff,
#workskin .cuttlefishculler,
#workskin .cc,
/* Meenah Peixes and Her Imperious Condescension */
#workskin .meenah,
#workskin .herimperiouscondescension,
#workskin .hic,
#workskin .condesce,
#workskin .condy,
#workskin .batterwitch,
/* The Peixes lusus */
#workskin .gl’bgolybsprite,
#workskin .glbgolybsprite,
#workskin .gl’bgolyb,
#workskin .glbgolyb {
	color: #77003c;
}

/* Calliope the cherub */
#workskin .calliope,
#workskin .callie,
#workskin .uug,
#workskin .uranianumbra {
	color: #929292;
}

/* Caliborn the cherub */
#workskin .caliborn,
#workskin .uur,
#workskin .undyingumbrage {
	color: #323232;
}

/* Alternate Calliope */
#workskin .altcalliope,
#workskin .altcallie,
#workskin .altuug,
/* Caliborn's blood color */
#workskin .calibornblood,
#workskin .uurblood,
#workskin .undyingumbrageblood {
	color: #ff0000;
}

/* Alternate Caliborn */
#workskin .altcaliborn,
#workskin .altuur,
/* Calliope's blood color */
#workskin .calliopeblood,
#workskin .callieblood,
#workskin .uugblood,
#workskin .uranianumbrablood
/* General text color for the Felt and Lord English
	Also used for writing Doc Scratch's name */
#workskin .thefelt,
#workskin .felt,
#workskin .lordenglish {
	color: #2ed73a;
}

/* Exiles and Carapacians */
#workskin .exile,
/* Wayward Vagabond / The Mayor */
#workskin .warwearyvillein,
#workskin .wizardlyvassal,
#workskin .waywardvagabond,
#workskin .wastelandicvindicator,
#workskin .wv,
#workskin .mayor,
#workskin .themayor,
/* Peregrine Mendicant */
#workskin .parcelmistress,
#workskin .peregrinemendicant,
#workskin .prospitianmonarch,
#workskin .pm,
/* Aimless Renegade */
#workskin .authorityregulator,
#workskin .aimlessrenegade,
#workskin .armamentsregent,
#workskin .ar,
/* The White King and White Queen */
#workskin .whiteking,
#workskin .writkeeper,
#workskin .wk,
#workskin .whitequeen,
#workskin .windsweptquestant,
#workskin .wq,
/* Jack Noir / Spades Slick */
#workskin .jacknoir,
#workskin .jack,
#workskin .noir,
#workskin .spadesslick,
#workskin .spades,
#workskin .slick,
#workskin .ss,
/* Diamonds Droog */
#workskin .draconiandignitary,
#workskin .diamondsdroog,
#workskin .diamonds,
#workskin .droog,
#workskin .dd,
/* Hearts Boxcars */
#workskin .hegemonicbrute,
#workskin .heartsboxcars,
#workskin .hearts,
#workskin .boxcars,
#workskin .hb,
/* Clubs Deuce */
#workskin .courtyarddroll,
#workskin .clubsdeuce,
#workskin .clubs,
#workskin .deuce,
#workskin .cd {
	color: #ffffff;
	background-color: #000000;
}

/* The Black Queen / Snowman */
#workskin .blackqueen,
#workskin .bq,
#workskin .snowman,
#workskin .felt8 {
	color: #6c7073;
	background-color: #000000;
}

/* John's and Jane's Dad */
#workskin .dad,
#workskin .johnsdad,
#workskin .janesdad,
#workskin .pipefan413 {
	color: #4b4b4b;
}

/* John's Nanna */
#workskin .nanna,
#workskin .johnsnanna,
#workskin .janelle { /* custom */
	color: #09d8bb;
}

/* Jane's Poppop */
#workskin .poppop,
#workskin .janespoppop,
#workskin .jonathan { /* custom */
	color: #0085ff;
}

/* Rose's Mom */
#workskin .rosesmom,
#workskin .roxanne { /* custom */
	color: #fc00a4;
}

/* Roxy's Mom */
#workskin .roxysmom,
#workskin .rosalyn,
#workskin .roz { /* custom */
	color: #7f009e;
}

/* Dave's Bro */
#workskin .davesbro,
#workskin .derrick,
#workskin .bro { /* custom */
	color: #deab14;
}

/* Dirk's Bro */
#workskin .dirksbro,
#workskin .devin,
#workskin .dev { /* custom */
	color: #a30101;
}

/* Jade's Grandpa */
#workskin .grandpa,
#workskin .jadesgrandpa,
#workskin .joshua { /* custom */
	color: #006201;
}

/* Jake's Grandma */
#workskin .grandma,
#workskin .jakesgrandma,
#workskin .jadene { /* custom */
	color: #659829;
}

/* Doc Scratch's standard pure white text */
#workskin .docscratch,
#workskin .scratch-white {
	color: #ffffff;
}

/** Doc Scratch's white text on a green background,
	as in the Intermission. For use outside .scratch.block */
#workskin .scratch-green,
#workskin .scratchgreen,
#workskin .intermission {
	color: #ffffff;
	background-color: #0e4603;
}

/* The off-white letter O in Doc Scratch's name */
#workskin .scratcho,
#workskin .docscratcho {
	color: #e0e0e0;
}

/* Felt members Itchy and Stitch */
#workskin .itchy,
#workskin .felt1,
#workskin .stitch,
#workskin .felt9 {
	color: #ffea00;
}

/* Felt members Doze and Sawbuck */
#workskin .doze,
#workskin .felt2,
#workskin .sawbuck,
#workskin .felt10 {
	color: #4040fd;
}

/* Felt members Trace and Matchsticks */
#workskin .trace,
#workskin .felt3,
#workskin .matchsticks,
#workskin .felt11 {
	color: #df0000;
}

/* Felt members Clover and Eggs */
#workskin .clover,
#workskin .felt4,
#workskin .eggs,
#workskin .felt12 {
	color: #a357ff;
}

/* Felt members Fin and Biscuits */
#workskin .fin,
#workskin .felt5,
#workskin .biscuits,
#workskin .felt13 {
	color: #ff6000;
}

/* Felt members Die and Quarters */
#workskin .die,
#workskin .felt6,
#workskin .quarters,
#workskin .felt14 {
	color: #008140;
}

/* Felt members Crowbar and Cans */
#workskin .crowbar,
#workskin .felt7,
#workskin .cans,
#workskin .felt15 {
	color: #950015;
}

/* The letter O in Felt member Snowman's name */
#workskin .snowmano,
#workskin .felt8o {
	color: #000000;
}

/** SPECIAL COLORS
	This is a collection of non-character text colors, added partly for reference and
	partly for cases where you need these for highlighting special words. The majority
	of the colors here have both colored text and backgrounds.
	This list contains:
	- Aspects
	- Denizens (colors picked from known denizens' browser logos, and hypothetical
				colors/names added for unknown denizens)
	- Incipisphere planets and other bodies
	- Miscellaneous special colors
	- Blood and sign colors (sometimes different from typing colors)
	- Troll horn and skin colors
*/

/* Aspects */

#workskin .time { /* from logo and pants, 4331 */
	color: #fc0c02;
	background-color: #8e1414;
}

#workskin .space { /* from logo and shirt, 4297 */
	color: #ffffff;
	background-color: #000000;
}

#workskin .void { /* from extended zodiac */
	color: #001957;
	background-color: #104ea2;
}

#workskin .light { /* from logo and pants, 3296 */
	color: #fff743;
	background-color: #e76700;
}

#workskin .mind { /* from extended zodiac */
	color: #06ffc9;
	background-color: #00923d;
}

#workskin .heart { /* from logo and shorts, 5858 */
	color: #bd1864;
	background-color: #55142a;
}

#workskin .rage { /* from logo and shirt, 4828 */
	color: #9c4dad;
	background-color: #391e71;
}

#workskin .hope { /* From logo and hood, 5858 */
	color: #fdfdfd;
	background-color: #ffc331;
}

#workskin .doom { /* from extended zodiac */
	color: #000000;
	background-color: #306800;
}

#workskin .life { /* From logo and hood, 5858 */
	color: #76c34e;
	background-color: #605542;
}

#workskin .blood { /* from extended zodiac */
	color: #ba1016;
	background-color: #3e1601;
}

#workskin .breath { /* from logo and pant outline, 4297 */
	color: #10e0ff;
	background-color: #0063d0;
}

/* Denizens */

#workskin .hephaestus,
#workskin .dtime {
	color: #e00707;
	background-color: #000000;
}

#workskin .echidna,
#workskin .dspace {
	color: #ffffff;
	background-color: #1501b0;
}

#workskin .nix,
#workskin .dvoid {
	color: #ffffff;
	background-color: #8900fe;
}

#workskin .cetus,
#workskin .dlight {
	color: #ffffff;
	background-color: #bb66ff;
}

#workskin .metis,
#workskin .dmind { /* custom */
	color: #f6ce00;
	background-color: #2a8539;
}

#workskin .psyche,
#workskin .dheart { /* custom */
	color: #ffffff;
	background-color: #bd1864;
}

#workskin .pallas,
#workskin .drage { /* custom */
	color: #ffffff;
	background-color: #994bb3;
}

#workskin .abraxas,
#workskin .dhope {
	color: #29ff01;
	background-color: #136501;
}

#workskin .moros,
#workskin .ddoom { /* custom */
	color: #ffffff;
	background-color: #204020;
}

#workskin .hemera,
#workskin .dlife {
	color: #ffffff;
	background-color: #fcaf01;
}

#workskin .eusebia,
#workskin .dblood { /* custom */
	color: #ffffff;
	background-color: #ba1016;
}

#workskin .typheus,
#workskin .dbreath {
	color: #ffffff;
	background-color: #00ff01;
}

#workskin .yaldabaoth,
#workskin .denizenlord {
	color: #d71e0b;
	background-color: #fea807;
}

/* Incipisphere bodies */

#workskin .prospit { /* from extended zodiac */
	color: #ffff00;
	background-color: #e49700;
}

#workskin .derse { /* from extended zodiac */
	color: #ff01fe;
	background-color: #9700e4;
}

#workskin .skaia {
	color: #ffffff;
	background-color: #21afff;
}

#workskin .horrorterror,
#workskin .horrorterrors,
#workskin .noblecircle {
	color: #8915b9;
	background-color: #000000;
}

/* Miscellaneous special colors */

/* Blue ~ATH text */
#workskin .athblue {
	color: #0000ff;
}

/* Blood colors */

/* Megido blood */
#workskin .megidoblood,
#workskin .aradiablood,
#workskin .arablood,
#workskin .apocalypsearisenblood,
#workskin .aablood,
#workskin .damarablood,
#workskin .handmaidblood,
#workskin .kangarammomblood,
#workskin .kangaram-momblood,
#workskin .rammomblood,
#workskin .ram-momblood {
	color: #a10000;
}

/* Nitram blood */
#workskin .nitramblood,
#workskin .tavrosblood,
#workskin .tavblood,
#workskin .adiostoreadorblood,
#workskin .atblood,
#workskin .rufiohblood,
#workskin .summonerblood,
#workskin .tinkerbullblood {
	color: #a25203;
}

/* Captor blood */
#workskin .captorblood,
#workskin .solluxblood,
#workskin .solblood,
#workskin .twinarmageddonsblood,
#workskin .tablood,
#workskin .mitunablood,
#workskin .psiioniicblood,
#workskin .psiblood,
#workskin .psiiblood,
#workskin .helmsmanblood,
#workskin .biclopsblood,
#workskin .biclopsdadblood,
#workskin .biclops-dadblood,
#workskin .bicyclopsblood,
#workskin .bicyclopsdadblood,
#workskin .bicyclops-dadblood {
	color: #a1a100;
}

/* Blood of humans, exiles, and Vantases*/
#workskin .humanblood,
#workskin .johnblood,
#workskin .roseblood,
#workskin .daveblood,
#workskin .jadeblood,
#workskin .janeblood,
#workskin .jakeblood,
#workskin .roxyblood,
#workskin .dirkblood,
#workskin .dadblood,
#workskin .momblood,
#workskin .broblood,
#workskin .grandpablood,
#workskin .grandmablood,
#workskin .poppopblood,
#workskin .nannablood,
#workskin .exileblood,
#workskin .vantasblood,
#workskin .karkatblood,
#workskin .karblood,
#workskin .kkblood,
#workskin .carcinogeneticistblood,
#workskin .cgblood,
#workskin .kankriblood,
#workskin .signlessblood,
#workskin .suffererblood,
#workskin .crabdadblood {
	color: #ff0000;
}

/* Leijon blood */
#workskin .leijonblood,
#workskin .nepetablood,
#workskin .nepblood,
#workskin .arseniccatnipblood,
#workskin .acblood,
#workskin .meulinblood,
#workskin .discipleblood,
#workskin .pounceblood,
#workskin .pouncedeleonblood,
#workskin .pounce-de-leonblood {
	color: #2e4800;
}

/* Maryam blood */
#workskin .maryamblood,
#workskin .kanayablood,
#workskin .kanblood,
#workskin .grimauxiliatrixblood,
#workskin .gablood,
#workskin .porrimblood,
#workskin .dolorosablood,
#workskin .mothergrubblood,
#workskin .mother-grubblood,
#workskin .virginmothergrubblood,
#workskin .virgin-mother-grubblood {
	color: #078446;
}

/* Pyrope blood */
#workskin .pyropeblood,
#workskin .tereziblood,
#workskin .tezblood,
#workskin .tzblood,
#workskin .gallowscalibratorblood,
#workskin .gcblood,
#workskin .latulablood,
#workskin .neophyteblood,
#workskin .redglareblood,
#workskin .dragonblood,
#workskin .pyralspiteblood {
	color: #008282;
}

/* Serket blood */
#workskin .serketblood,
#workskin .vriskablood,
#workskin .vrisblood,
#workskin .arachnidsgripblood,
#workskin .agblood,
#workskin .araneablood,
#workskin .marquiseblood,
#workskin .spinneretblood,
#workskin .mindfangblood,
#workskin .spiderblood,
#workskin .spidermomblood,
#workskin .spider-momblood {
	color: #004182;
}

/* Zahhak blood */
#workskin .zahhakblood,
#workskin .equiusblood,
#workskin .centaurstesticleblood,
#workskin .ctblood,
#workskin .horussblood,
#workskin .executorblood,
#workskin .expatri8blood,
#workskin .darkleerblood,
#workskin .aurthourblood,
#workskin .altaradiablood {
	color: #0021cb;
}

/* Makara blood */
#workskin .makarablood,
#workskin .gamzeeblood,
#workskin .gamblood,
#workskin .terminallycapriciousblood,
#workskin .tcblood,
#workskin .kurlozblood,
#workskin .grandhighbloodblood,
#workskin .ghbblood,
#workskin .goatdadblood {
	color: #440a7f;
}

/* Ampora blood */
#workskin .amporablood,
#workskin .eridanblood,
#workskin .eriblood,
#workskin .caligulasaquariumblood,
#workskin .cablood,
#workskin .cronusblood,
#workskin .orphanerblood,
#workskin .dualscarblood,
#workskin .seahorsedadblood,
#workskin .seahorse-dadblood,
#workskin .skyhorsedadblood,
#workskin .skyhorse-dadblood {
	color: #6a006a;
}

/* Peixes blood */
#workskin .peixesblood,
#workskin .feferiblood,
#workskin .fefblood,
#workskin .ffblood,
#workskin .cuttlefishcullerblood,
#workskin .ccblood,
#workskin .meenahblood,
#workskin .herimperiouscondescensionblood,
#workskin .hicblood,
#workskin .condesceblood,
#workskin .condyblood,
#workskin .batterwitchblood,
#workskin .gl’bgolybblood,
#workskin .glbgolybblood {
	color: #99004d;
}

/* Sign colors */

/* Megido sign */
#workskin .megidosign,
#workskin .aradiasign,
#workskin .arasign,
#workskin .apocalypsearisensign,
#workskin .aasign,
#workskin .damarasign,
#workskin .handmaidsign,
#workskin .kangarammomsign,
#workskin .kangaram-momsign,
#workskin .rammomsign,
#workskin .ram-momsign {
	color: #a60100;
}

/* Nitram sign */
#workskin .nitramsign,
#workskin .tavrossign,
#workskin .tavsign,
#workskin .adiostoreadorsign,
#workskin .atsign,
#workskin .rufiohsign,
#workskin .summonersign,
#workskin .tinkerbullsign {
	color: #a25203;
}

/* Captor sign */
#workskin .captorsign,
#workskin .solluxsign,
#workskin .solsign,
#workskin .twinarmageddonssign,
#workskin .tasign,
#workskin .mitunasign,
#workskin .psiioniicsign,
#workskin .psisign,
#workskin .psiisign,
#workskin .helmsmansign,
#workskin .biclopssign,
#workskin .biclopsdadsign,
#workskin .biclops-dadsign,
#workskin .bicyclopssign,
#workskin .bicyclopsdadsign,
#workskin .bicyclops-dadsign {
	color: #a1a100;
}

/* Gray Vantas sign */
#workskin .vantasbsign,
#workskin .karkatsign,
#workskin .karsign,
#workskin .kksign,
#workskin .carcinogeneticistsign,
#workskin .cgsign {
	color: #6c6c6c;
}

/* Red Vantas sign */
#workskin .vantasasign,
#workskin .altkarkatsign,
#workskin .altkarsign,
#workskin .altkksign,
#workskin .altcarcinogeneticistsign,
#workskin .altcgsign,
#workskin .kankrisign,
#workskin .signlesssign,
#workskin .sufferersign {
	color: #ff0000;
}

/* Leijon sign */
#workskin .leijonsign,
#workskin .nepetasign,
#workskin .nepsign,
#workskin .arseniccatnipsign,
#workskin .acsign,
#workskin .meulinsign,
#workskin .disciplesign,
#workskin .pouncesign,
#workskin .pouncedeleonsign,
#workskin .pounce-de-leonsign {
	color: #416600;
}

/* Maryam sign */
#workskin .maryamsign,
#workskin .kanayasign,
#workskin .kansign,
#workskin .grimauxiliatrixsign,
#workskin .gasign,
#workskin .porrimsign,
#workskin .dolorosasign,
#workskin .mothergrubsign,
#workskin .mother-grubsign,
#workskin .virginmothergrubsign,
#workskin .virgin-mother-grubsign {
	color: #078446;
}

/* Pyrope sign */
#workskin .pyropesign,
#workskin .terezisign,
#workskin .tezsign,
#workskin .tzsign,
#workskin .gallowscalibratorsign,
#workskin .gcsign,
#workskin .latulasign,
#workskin .neophytesign,
#workskin .redglaresign,
#workskin .dragonsign,
#workskin .pyralspitesign {
	color: #008282;
}

/* Serket sign */
#workskin .serketsign,
#workskin .vriskasign,
#workskin .vrissign,
#workskin .arachnidsgripsign,
#workskin .agsign,
#workskin .araneasign,
#workskin .marquisesign,
#workskin .spinneretsign,
#workskin .mindfangsign,
#workskin .spidersign,
#workskin .spidermomsign,
#workskin .spider-momsign {
	color: #004083;
}

/* Zahhak sign */
#workskin .zahhaksign,
#workskin .equiussign,
#workskin .centaurstesticlesign,
#workskin .ctsign,
#workskin .horusssign,
#workskin .executorsign,
#workskin .expatri8sign,
#workskin .darkleersign,
#workskin .aurthoursign,
#workskin .altaradiasign {
	color: #0021cb;
}

/* Makara sign */
#workskin .makarasign,
#workskin .gamzeesign,
#workskin .gamsign,
#workskin .terminallycapricioussign,
#workskin .tcsign,
#workskin .kurlozsign,
#workskin .grandhighsignsign,
#workskin .ghbsign,
#workskin .goatdadsign {
	color: #440a7f;
}

/* Ampora sign */
#workskin .amporasign,
#workskin .eridansign,
#workskin .erisign,
#workskin .caligulasaquariumsign,
#workskin .casign,
#workskin .cronussign,
#workskin .orphanersign,
#workskin .dualscarsign,
#workskin .seahorsedadsign,
#workskin .seahorse-dadsign,
#workskin .skyhorsedadsign,
#workskin .skyhorse-dadsign {
	color: #6a006a;
}

/* Peixes sign */
#workskin .peixessign,
#workskin .feferisign,
#workskin .fefsign,
#workskin .ffsign,
#workskin .cuttlefishcullersign,
#workskin .ccsign,
#workskin .meenahsign,
#workskin .herimperiouscondescensionsign,
#workskin .hicsign,
#workskin .condescesign,
#workskin .condysign,
#workskin .batterwitchsign,
#workskin .gl’bgolybsign,
#workskin .glbgolybsign {
	color: #99004d;
}

/* Troll body colors */

#workskin .hornbottom,
#workskin .hornbase,
#workskin .horn1 {
	color: #ff4200;
}

#workskin .hornmiddle,
#workskin .hornmid,
#workskin .horn2 {
	color: #ff9000;
}

#workskin .horntop,
#workskin .horntip,
#workskin .horn3 {
	color: #ffba29;
}

#workskin .trollskin {
	color: #c4c4c4;
}

/** INTERACTIVE PESTERCHUM LAYOOUT
	These are styles for a table layout version of pesterlogs. When hovered over,
	specific lines will be highlighted in a slightly lighter color. This design
	accommodates both the standard (user)name + message layout, as well as a
	second layout including (user)name, message, and timestamp of message.

	To use these styles, create a <table class="ichum">. For each new message,
	create a new <tr> table row. Each table row should contain at the very least
	one <td> cell with the (user)name, and one <td> cell with the message.
	A third <td> cell can be added to include the timestamp.

	You may want to place the entire pesterlog inside a div.block to fully mimic
	authentic Homestuck layouts.

	See the corresponding HTML for an example of an interactive pesterlog
	(under "Interactive pesterlog").
*/
#workskin .ichum {
	font-size: 0.933em;
	font-weight: bold;
	font-family: Courier New, courier, monospace;
	border-collapse: collapse;
	margin: 0.7em auto;
}
#workskin .block .ichum {
	font-size: 1em;
}

#workskin .ichum td:nth-child(even) {
	text-align: left;
	vertical-align: middle;
	width: 100%;
	padding-left: 0.4em;
}

#workskin .ichum td:first-child {
	text-align: left;
	vertical-align: top;
}

#workskin .ichum td:nth-child(3) {
	text-align: right;
	vertical-align: top;
}

#workskin .block .ichum tr:hover {
	background-color: #ffffff;
}
#workskin .scratch.block .ichum tr:hover {
	background-color: #292929;
}
#workskin .ichum tr:hover {
	background-color: #aaa2;
}

/**	CUSTOM TEXT COLORS
	The sample class below is for the user "unpredictableArtist", or UA.
	You can change the class names (after the dot) as you like.
	The "color" value changes the text color.
	To make additional custom user classes, simply copy the entire four lines below
	(from the first "#workskin" to the closing curly bracket "}") and paste,
	then change the names and color once again.

	Be sure to update your work skin before applying it to your works!
*/

#workskin .unpredictableartist,
#workskin .ua {
	color: #c6347c;
}

HS workskin - sample HTML.html

<!---------- AO3 PREVIEW ---------->
<p align="center"><span class="aradiablood">♈</span> <span class="tavrosblood">♉</span> <span class="solluxblood">♊</span> <span class="karkatblood">♋</span> <span class="nepetablood">♌</span> <span class="kanayablood">♍</span> <span class="tereziblood">♎</span> <span class="vriskablood">♏</span> <span class="equiusblood">♐</span> <span class="gamzeeblood">♑</span> <span class="eridanblood">♒</span> <span class="feferiblood">♓</span> <span class="calibornblood">⛎</span></p>

<div class="block">
	<p>These are the Pesterchum and Trollian log and <span class="black">text</span>.</p>
</div>
<div class="scratch block">
    <p>These are the <span class="scratch-green">scratched</span> Pesterchum and Trollian log and <span class="white">text</span>.</p>
</div>
<div class="CUSTOM block">
    <p>If you'd like, you can add your own chat log background/text color format by using the instructions under "CUSTOM CHAT LOG" in the linked CSS (Ctrl+F/Cmd+F to find the guide)!</p>
</div>


<p>
    <span class="prompt">This is a prompt.</span><br />
<span class="command1">&gt; </span><span class="command2" title="you tried to click this didnt you">This is a command.</span>
</p>

<p class="intermission">
    <span class="scratch prompt">[o] This is a scratch prompt.</span><br />
<span class="scratch command1">&gt; </span><span class="scratch command2" title="admit it you totally tried to click em both">This is a scratch command.</span>
</p>

<p>
    <span class="text john">EB: this is john egbert.</span><br />
	<span class="text rose">TT: This is Rose Lalonde.</span><br />
	<span class="text dave">TG: this is dave strider</span><br />
	<span class="text jade">GG: this is jade harley!</span>
</p>

<p>
    <span class="text jane">GG: This is Jane Crocker.</span><br />
	<span class="text jake">GT: This is jake english.</span><br />
	<span class="text roxy">TG: this is <strike>rxoy</strike> roxy lalonde</span><br />
	<span class="text dirk">TT: This is Dirk Strider.</span>
</p>

<p>
    <span class="text aradia">AA: this is aradia megid0. this is also damara megid0, the handmaid, aradiasprite, and aradiab0t</span><br />
	<span class="text tavros">AT: tHIS IS TAVROS NITRAM, aND ALSO,, rUFIOH NITRAM, tHE SUMMONER, aND TINKERSPRITE,,,</span><br />
    <span class="text sollux">TA: thii2 ii2 2ollux captor. thii2 ii2 al2o miituna captor, the p2iioniic or the helm2man, and biiclop2priite.</span><br />
	<span class="text karkat">CG: THIS IS KARKAT VANTAS. THIS IS ALSO CRABSPRITE.</span><br />
	<span class="text altkarkat">FCG: THIS IS ALT KARKAT. THIS IS ALSO KANKRI VANTAS AND THE SIGNLESS/SUFFERER.</span><br />
	<span class="text nepeta">AC: :33 &lt; this is nepeta leijon!!! this is also meulin leijon, the disciple, and pouncesprite</span><br />
	<span class="text kanaya">GA: This Is Kanaya Maryam, Porrim Maryam, The Dolorosa, And Mothersprite</span><br />
	<span class="text terezi">GC: TH1S 1S T3R3Z1 PYROP3, L4TUL4 PYROP3, N3OPHYT3 R3DGL4R3, 4ND DR4GONSPR1T3</span><br />
	<span class="text vriska">AG: This is Vriska Serket. This is also Aranea Serket, Marquise Spinneret Mindfang, and Spidersprite.</span><br />
	<span class="text equius">CT: D --&gt; This is Equius Zahhak. This is also Horuss Zahhak, the Executor or the Expatri8 Darkleer, and Aurthoursprite. This is also alt Aradia</span><br />
	<span class="text gamzee">TC: this is gamzee makara. THIS IS ALSO KURLOZ MAKARA. and the grand highblood. AND GOATSPRITE.</span><br />
	<span class="text chucklevoodoo">THESE ARE KURLOZ'S CHUCKLEVOODOOS.</span><br />
	<span class="text eridan">CA: this is eridan ampora, cronus ampora, orphaner dualscar, an seahorsesprite</span><br />
	<span class="text feferi">CC: T)(is is Feferi Peixes, Meena)( Peixes, )(er Imperious Condescension or t)(e Condesce, and Gl'bgolybsprite.</span>
</p>

<p>
    <span class="text tavrosprite">TAVROSPRITE: tHIS IS, TAVROSPRITE,,,</span><br />
	<span class="text tavrisprite">TAVRISPRITE: uHHH, This is,,, tAVRISPRITE!!??!,!,!,!</span><br />
	<span class="text gcatavros">GCATAVROSPRITE: tHIS,, aCHOOO!!! iS GCATAVROSPRITE,, chOOOOOOO!</span>
</p>

<p>
    <span class="text fefeta">FEFETASPRITE: 3833 &lt; t)(is is fefetasprite!</span><br />
	<span class="text rosesprite">ROSESPRITE: This is Rosesprite.</span>
</p>

<p>
    <span class="text hal">TT: This is AR. Or, you know, Hal works too.</span><br />
    <span class="text equiusprite">EQUIUSPRITE: D --&gt; This is Equiusprite</span><br />
    <span class="text arquius">ARQUIUSPRITE: B --&gt; This is Arquiusprite</span>
</p>

<p>
    <span class="text erisol">ERISOLSPRITE: thii2 ii2 erii2ol2priite.</span><br />
    <span class="text nepetasprite">NEPETASPRITE: :33 &lt; this is nepetasprite :33</span>
</p>

<p>
    <span class="text jade">JADE: </span><span class="text grimbark">this is GRIMBARK JADE!!!!!</span><br />
    <span class="text jane">JANE: </span><span class="text crockertier">This is Crockertier Jane. SUBMIT.</span>
</p>

<p>
  <span class="text nannasprite">NANNASPRITE: This is Nannasprite!</span>
</p>

<p>
    <span class="text becsprite">BECSPRITE: This is Becsprite.</span><br />
    <span class="text jadesprite">JADESPRITE: this is jadesprite :(</span>
</p>

<p>
    <span class="text davesprite">DAVESPRITE: this is davesprite (but maybe call me byrd)</span><br />
	<span class="text calsprite">CALSPRITE: THIS IS CALSPRITE HAA HAA HEE HEE HOO HOO</span>
</p>

<p>
  <span class="text jaspersprite">JASPERSPRITE: This is Jaspersprite. Meow.</span>
</p>

<p>
    <span class="text jasprose-name">JASPROSESPRITE^2:</span> <span class="text jasprose-text">This is Jasprose. Meow!</span><br />
	<span class="text davepeta-name">DAVEPETASPRITE^2: B33 &lt;</span> <span class="text davepeta-text">this is davepeta!!! BDD</span>
</p>

<p>
    <span class="text calliope">UU: this is UranianUmbra, or calliope.</span><br />
	<span class="text caliborn">uu: THIS IS uNDYINGuMBRAGE. OR CALIBORN.</span>
</p>

<p>
    <span class="text altcalliope">CALLIOPE: this is alternate universe calliope.</span><br />
	<span class="text altcaliborn">THIS IS FUTURE CALIBORN. AND LORD ENGLISH. THIS IS ALSO THE FELT.</span>
</p>

<p>
  <span class="text exile">&gt;These are the exiles.</span>
</p>

<p>
    <span class="text whitequeen">&gt;This is the White Queen.</span><br />
	<span class="text blackqueen">&gt;This is the Black Queen.</span>
</p>

<p>
  <span class="text dad">THIS IS DAD.</span>
</p>

<p>
    <span class="text nanna">GG: This is John's Nanna, Janelle!</span><br />
	<span class="text poppop">GT: this is jane's poppop, jonathan.</span>
</p>

<p>
    <span class="text rosesmom">TG: this is roses mom! or roxanne</span><br />
	<span class="text roxysmom">TT: This is Roxy's mom, or Rosalyn.</span>
</p>

<p>
    <span class="text davesbro">TT: This is Dave's Bro, or Derrick. Or just Bro.</span><br />
	<span class="text dirksbro">TG: this is dirks bro but you can call me devin</span>
</p>

<p>
    <span class="text grandpa">GT: This is jades grandpa joshua.</span><br />
	<span class="text grandma">GG: this is jakes grandma jadene!</span>
</p>

<p>
  <span class="text hussie">This is Andrew Hussie.</span>
</p>

<p>
    (<span class="text scratch">This is <span class="text felt">D<span class="text scratcho">o</span>c Scratch</span>.</span>)<br />
	<span class="text scratch-green">Can you hear me now?</span>
</p>

<p>
    <span class="text itchy">This is <span class="text felt">Itchy</span>.</span><br />
    <span class="text doze">This is <span class="text felt">Doze</span>.</span><br />
    <span class="text trace">This is <span class="text felt">Trace</span>.</span><br />
    <span class="text clover">This is <span class="text felt">Clover</span>.</span><br />
    <span class="text fin">This is <span class="text felt">Fin</span>.</span><br />
    <span class="text die">This is <span class="text felt">Die</span>.</span><br />
    <span class="text crowbar">This is <span class="text felt">Crowbar</span>.</span><br />
    <span class="text snowman">This is <span class="text felt">Sn<span class="text snowmano">o</span>wman</span>.</span><br />
    <span class="text stitch">This is <span class="text felt">Stitch</span>.</span><br />
    <span class="text sawbuck">This is <span class="text felt">Sawbuck</span>.</span><br />
    <span class="text matchsticks">This is <span class="text felt">Matchsticks</span>.</span><br />
    <span class="text eggs">This is <span class="text felt">Eggs</span>.</span><br />
    <span class="text biscuits">This is <span class="text felt">Biscuits</span>.</span><br />
    <span class="text quarters">This is <span class="text felt">Quarters</span>.</span><br />
    <span class="text cans">This is <span class="text felt">Cans</span>.</span>
</p>

<p>
    <span class="text time">This is Time.</span><br />
    <span class="text space">This is Space.</span><br />
    <span class="text void">This is Void.</span><br />
    <span class="text light">This is Light.</span><br />
    <span class="text mind">This is Mind.</span><br />
    <span class="text heart">This is Heart.</span><br />
    <span class="text rage">This is Rage.</span><br />
    <span class="text hope">This is Hope.</span><br />
    <span class="text doom">This is Doom.</span><br />
    <span class="text life">This is Life.</span><br />
    <span class="text blood">This is Blood.</span><br />
    <span class="text breath">This is Breath.</span>
</p>

<p>
    <span class="text hephaestus">This is Hephaestus.</span><br />
    <span class="text echidna">This is Echidna.</span><br />
    <span class="text nix">This is Nix.</span><br />
    <span class="text cetus">This is Cetus.</span><br />
    <span class="text metis">This is Metis of Mind's sample text.</span><br />
    <span class="text psyche">This is Psyche of Heart's sample text.</span><br />
    <span class="text pallas">This is Pallas of Rage's sample text.</span><br />
    <span class="text abraxas">This is Abraxas.</span><br />
    <span class="text moros">This is Moros of Doom's sample text.</span><br />
    <span class="text hemera">This is Hemera.</span><br />
    <span class="text eusebia">This is Eusebia of Blood's sample text.</span><br />
    <span class="text typheus">This is Typheus.</span><br />
    <span class="text yaldabaoth">This is Yaldabaoth, the Denizenlord.</span>
</p>

<p>
    <span class="text skaia">This is Skaia.</span><br />
	<span class="text prospit">This is Prospit.</span><br />
	<span class="text derse">This is Derse.</span><br />
	<span class="text noblecircle">This is the Noble Circle of Horrorterrors.</span>
</p>

<p>
    <span class="text athblue">This is the blue ath text.</span><br />
	<span class="text athred">This is the red ath text.</span>
</p>

<p>
  <span class="text squarewave">SQUAREWAVE: THIS IS SQUAREWAVE YO</span>
</p>

<p>
    <span class="text megidoblood">This is the Megidos' blood.</span><br />
    <span class="text nitramblood">This is the Nitrams' blood.</span><br />
    <span class="text captorblood">This is the Captors' blood.</span><br />
    <span class="text vantasblood">This is the Vantases' and the humans' blood.</span><br />
    <span class="text leijonblood">This is the Leijons' blood.</span><br />
    <span class="text maryamblood">This is the Maryams' blood.</span><br />
    <span class="text pyropeblood">This is the Pyropes' blood.</span><br />
    <span class="text serketblood">This is the Serkets' blood.</span><br />
    <span class="text zahhakblood">This is the Zahhaks' blood.</span><br />
    <span class="text makarablood">This is the Makaras' blood.</span><br />
    <span class="text amporablood">This is the Amporas' blood.</span><br />
    <span class="text peixesblood">This is the Peixeses' blood.</span>
</p>

<p>
    <span class="text megidosign">This is the Megidos' sign.</span><br />
    <span class="text nitramsign">This is the Nitrams' sign.</span><br />
    <span class="text captorsign">This is the Captors' sign.</span><br />
    <span class="text vantasbsign">This is Karkat's sign.</span><br />
    <span class="text vantasasign">This would have been Kankri's and the Signless' sign.</span><br />
    <span class="text leijonsign">This is the Leijons' sign.</span><br />
    <span class="text maryamsign">This is the Maryams' sign.</span><br />
    <span class="text pyropesign">This is the Pyropes' sign.</span><br />
    <span class="text serketsign">This is the Serkets' sign.</span><br />
    <span class="text zahhaksign">This is the Zahhaks' sign.</span><br />
    <span class="text makarasign">This is the Makaras' sign.</span><br />
    <span class="text amporasign">This is the Amporas' sign.</span><br />
    <span class="text peixessign">This is the Peixeses' sign.</span>
</p>

<p>
    <span class="text horn3">This is the tip of the horn.</span><br />
    <span class="text horn2">This is the middle of the horn.</span><br />
    <span class="text horn1">This is the base of the horn.</span><br />
    <span class="text trollskin">This is the skin of trolls.</span>
</p>

<!----- CUSTOM: Interactive pesterlog ----->
<div class="block">
    <p>-- unpredictableArtist <span class="ua">[UA]</span> began pestering ???? [??] --</p>
        <table class="ichum">
            <tbody>
                <tr class="ua">
                    <td>UA:</td>
                    <td>this is an interactive version of the usual pesterlog</td>
                    <td>??:??</td>
                </tr>
                <tr class="ua">
                    <td>UA:</td>
                    <td>try mousing over the messages!</td>
                    <td>??:??</td>
                </tr>
                <tr class="ua">
                    <td>UA:</td>
                    <td>or tapping them, if you're on mobile</td>
                    <td>??:??</td>
                </tr>
            </tbody>
        </table>
    <p>-- unpredictableArtist <span class="ua">[UA]</span> ceased pestering ???? [??] --</p>
</div>

<div class="scratch block">
	<p>-- unpredictableArtist <span class="ua">[UA]</span> began pestering ???? [??] --</p>
        <table class="ichum">
            <tbody>
                <tr class="ua">
                    <td>UA:</td>
                    <td>here's another version of the same</td>
                    <td>??:??</td>
                </tr>
                <tr class="ua">
                    <td>UA:</td>
                    <td>but this time, we're in a scratched (intermission) pesterlog!</td>
                    <td>??:??</td>
                </tr>
            </tbody>
        </table>
	<p>-- unpredictableArtist <span class="ua">[UA]</span> ceased pestering ???? [??] --</p>
</div>

<p class="text">-- unpredictableArtist <span class="ua">[UA]</span> began pestering ???? [??] --</p>
<table class="ichum">
    <tbody>
        <tr class="ua">
            <td>UA:</td>
            <td>here's a version outside of the .block div</td>
            <td>??:??</td>
        </tr>
        <tr class="ua">
            <td>UA:</td>
            <td>this hover-style pesterlog was inspired by <a href="http://archiveofourown.org/works/5776528" rel="nofollow">this fic</a>
            </td>
            <td>??:??</td>
        </tr>
        <tr class="ua">
            <td>UA:</td>
            <td>hover styles should work even outside .block divs</td>
            <td>??:??</td>
        </tr>
        <tr class="ua">
            <td>UA:</td>
            <td>though that also depends on the reader's background color of choice!</td>
            <td>??:??</td>
        </tr>
    </tbody>
</table>
<p class="text">-- unpredictableArtist <span class="ua">[UA]</span> ceased pestering ???? [??] --</p>





<!---------- PESTERLOG SAMPLE ---------->
<!------- From https://www.homestuck.com/story/26 ------->
<!----- Regular ----->
<div class="block">
	<p class="dave">TG: did you get the beta yet</p>
	<p class="john">EB: no.<br />
					EB: did you?</p>
	<p class="dave">TG: man i got two copies already<br />
					TG: but i dont care im not going to play it or anything the game sounds boring</p>
</div>

<!----- Interactive ----->
<div class="block">
    <table class="ichum">
        <tr class="dave">
            <td>TG:</td>
            <td>did you get the beta yet</td>
        </tr>
        <tr class="john">
            <td>EB:</td>
            <td>no.</td>
        </tr>
        <tr class="john">
            <td>EB:</td>
            <td>did you?</td>
        </tr>
        <tr class="dave">
            <td>TG:</td>
			<td>man i got two copies already</td>
        </tr>
        <tr class="dave">
            <td>TG:</td>
            <td>but i dont care im not going to play it or anything the game sounds boring</td>
        </tr>
    </table>
</div>