/* Standard header prompt and commands */

h2 {
  font-weight: bold;
  color: red;
  font-size: 32px;
}






#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: red;
}

/** 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: red;
}

/**	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-size: 15px;
	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;
}


/* 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;
}



/* Miscellaneous special colors */

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



/** 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;
}