TH CSS skeleton (characters)

/***************************************************************************

    CSS skeleton for TH character pages

	Contents:
	- General properties
	- Global IDs
	  > .button variants
	  > .display-user
	  > .label variants
	  > .panel
	  > .th, .thumb
	  > pagination
	  > grids
	- Containers
	  > #container
	  > #main
	  > #content
	  > #footer
	- Header
	- Sidebar
	- Profile page [.character-profile]
	  > .character-stats
	  > .character-fields
	  > .character-recent-images
	- Gallery [.character-gallery]
	- Worlds [.character-worlds]
	- Links [.character-links]
	- Comments [.comments]

***************************************************************************/

/***************************************************************************

    General properties

***************************************************************************/

/*
    Both must be overwritten or hover colour will be default blue.
	However, if [.display-user a] is set, that will take priority
*/
a, a:link, a:visited {}
a:hover {}

/*
    All timestamps
    Attempts thus far to remove the dotted
    bottom line have been unsuccessful
*/
abbr  {}

/*
    padding is asymmetrical by default. (9 20 0 19)
*/
blockquote
{
	padding-bottom: 9px;
}

/*
    Both the basic headers and the .panel headers need
	to be modified at the same time since it doesn't
	cascade into .panel, so comments? etc. aren't affected
	Oddly, things such as links do gain the changes...
*/
h1, .panel h1 { padding-left: 0px; } /* .panel h1 has extra left padding? */
h2, .panel h2 {}
h3, .panel h3{}
h4, .panel h4{}
h5, .panel h5{}
h6, .panel h6{}

/*
    If hr doesn't work, add <p></p> tags
    It seems to work fine for content,
    but not in the sidebar blurb

    default values:
	margin-top: 20px;
	border-top: 1px;
	margin-bottom: 19px;
*/
hr {}

/*
    p seems to crop up every now and then, so best to remove any
	padding whatsoever...
*/
p { padding: 0px; }

/***************************************************************************

    Global IDs

***************************************************************************/

/************************************************
    .button variants
	- [button] by itself cannot be modified
	- modal buttons are more specific
************************************************/
/*
    .button affected areas:
	- Worlds: "+ Add Character to a World"
	- Links: "Request Link"
	- Comments: "Post Comment"
*/
.button {}
.button:hover {}

/*
    .button.secondary affected areas:
	- Gallery: "Save Gallery"
	- Links: "Select Character"
	- Comments: "Select Character", "Select Image"
*/
.button.secondary {}
.button.secondary:hover {}

/************************************************
    .display-user
************************************************/

/*
    This affects any usernames
	On the main character profile page,
	it only affects the Designer in the character
	stats because "Owner" is a [.display-user-tiny]
	rather than just [.display-user].
*/
.display-user a {}
.display-user a:hover {}

/************************************************
    .label variants
	:hover (without using a:hover) is enough
	for changing the hover text colour.
	[a] does not affect label text
************************************************/

/*
    I've found that using .label in specific places will affect
	all labels in that container, but using the generic [.label]
	will affect only certain labels.

    .label affected areas:
	- Profile: tags
	- Links: character names
	- Comments: "Edit" labels

	To do hover text colour for character names, use [.label a]
	To do hover text colour for edit labels, use [.label] (same for .alert)
	Or: if the label itself isn't a link, use [.label a].
*/
.label {}
.label a {}

.label:hover {}
.label a :hover{}

/*
    .label.secondary affected areas:
	- Gallery: "Edit" label
	- Worlds: "Leave" label
	- Links: username labels
*/
.label.secondary {}
.label.secondary a {}

.label.secondary:hover {}
.label.secondary a:hover{}

/*
    .label.alert affected areas:
	- Links: "Delete Link"
	- Comments: "Delete" label

	To do hover text colour, don't use [a]
*/
.label.alert {}
.label.alert:hover {}

/************************************************
    .panel
************************************************/

/*
    .panel affected areas:
	- Links: character selection bar at the top,
	         individual link boxes
	- Comments: individual comment boxes
*/
.panel {}

/************************************************
    .th, .thumb
************************************************/

/*
    .th affected areas:
    - Profile: recent images
	- Gallery: images
	- Worlds: worlds

    Use this to modify box-shadow and the fat white border,
	as well as constrain the image's size
*/
.th {}
.th:hover {}

/*
    .thumb affected areas:
	- the entire section enclosing a character/world
	- no padding/margins
	- Profile: recent images
	- Gallery: images
	- Worlds: worlds
*/
.thumb {}

/************************************************
    pagination
************************************************/

/*
    There doesn't seem to be any pagination on character
	pages but just in case...
*/

/* non-active page numbers */
ul.pagination li a {}
ul.pagination li a:hover  {}

/* current page number, modify background colour here */
ul.pagination li.current a {}
ul.pagination li.current a:hover {}

/* note that these are different */
ul.pagination li {}
ul.pagination li:hover {}
ul.pagination li.current {}
ul.pagination li.current:hover {}

/************************************************
    grids
************************************************/

/*
    ul.large-block-grid-6

    Used for the main profile, and gallery.
	6 to a row, width of each li is then 16.6%.
	With fixed margins ~16.3% seems to work fine.
	For some reason, has -10px left and right margins.
	(To push it past #content's padding all the way to the edges?)
*/
ul.large-block-grid-6
{
    margin-left: 0px;
	margin-right: 0px;
}

/*
    ul.small-block-grid-6 li

	In the galleries, is a better option than .thumb and
	has more power than .thumb does.
	It's a better option because the padding is consistent.
*/
ul.large-block-grid-6 li
{
    padding-top: 10px;
}

/*
    ul.small-block-grid-4

	Used on the Worlds page only.
*/
ul.small-block-grid-4
{
    margin-left: 0px;
	margin-right: 0px;
}
ul.small-block-grid-4 li {}

/***************************************************************************

    Containers

***************************************************************************/

/*
    Contains everything on the page.
	Shrinking this causes stuff to overflow.
	Nice for backgrounds but don't touch the width/height.
*/
#container {}

/*
    Contains everything except the header and footer.
	(i.e. it contains #sidebar and #content)
	Can squash for a narrower content area.
*/
#main {}

/*
    Contains the main content of the page.
	Note that the padding is compounded with the container
	that represents the current page's content.

	Doing things like changing the text colour here will affect
	text in created divs, but not text in panels and etc.
	It also affects world names on the Worlds page.
	Better to do text colour changes in specific places.
*/
#content {}

/*
    Generally not useful for layouts unless something to meet
	the lower part of the page is required.
	It contains the profiler which I'll also turn off here.
*/
#footer  { display: none; }
.profiler { display: none; }

/***************************************************************************

    Header

***************************************************************************/

/*
    I have no idea what to do with this sometimes;
	it contains important functions so getting rid of it
	isn't a good idea but it's also too thick for layouts sometimes.
*/
#header {}

/*
    All header buttons including the dropdown
	If transparent, background colour will show through.
	However, dropdown li will also become transparent
	and will need to be set with [.dropdown li]
	Both [#header a] and [#header li] need to be transparent.
	Background colour can then be set on #header.
*/
#header a, #header li { /*background-color: transparent;*/ }
#header a:hover {}

/* Dropdown links */
#header .dropdown li {}

/* Vertical divider; border-right */
#header li.divider { /*border-right: 1px solid #000;*/ }

/* top-left homepage link */
#header .title-area {}

/* user icon */
#header img {}

/*
    To change the size of the bar visually
	(padding and font sizes not included)
	all these need to be changed
	Even if #header a is transparent it needs
	to be resized otherwise dropdowns will be
	impossible to use

	Issue: I don't know how to deal with the dropdown arrow
*/
/*#header, #header a, #header li, #header .title-area
{
    height: 30px;
}*/

/*
    Notif buttons.
	Padding: 5 10 5 10
	Margin: 5 0 0 0
*/
#header .button {}

/*
    Contains all the header bar stuff.
	With some resizing of #header it's possible to
	set up a header image while preserving the header bar.
	#header's background goes under this.

	I haven't yet figured out how to adjust the padding
	of the dropdown buttons.
*/
.top-bar-section {}

/*
    Only the left side of the header bar items,
	excluding the top left homepage link.
	Floats left.
*/
.top-bar-section .left {}

/*
    Only the right side of the header bar items.
	Floats right.

	At the moment there's only one item so
	#header .user-link does the same thing.
*/
.top-bar-section .right {}

/***************************************************************************

    Sidebar

***************************************************************************/

/*
    The whole sidebar.
	All the li are transparent, so changing the
	background colour affects everything except
	for the box that says "User" (.header).

	Changing the text colour affects blurb text.
	Padding pads all the content.
	Default width is 16.6667%.
*/
#sidebar {}

/*
    Changing the colour affects all the link text in the sidebar.
	Note that [.side-nav a] doesn't do the same.
	Neither does [.side-nav li a].
*/
#sidebar a {}
#sidebar a:hover {}

/*
    Changing the background colour affects only the .header,
	user link, blurb, and buttons.
	Inserting padding here will also affect the .dividers so
	be careful...

	Changing colour on hover here will affect every li in the
	sidebar, including the blurb (which is probably not the
	intended effect). So, the hover is put in [a] rather than [li].
*/
#sidebar li {}

/*
    This contains only the part of the sidebar that has any content
	(as opposed to #sidebar which stretches the length of the page)

	It has padding at the top and bottom. #sidebar has no padding.
*/
.side-nav {}

/*
    The username + avatar box.
	I recall having weird problems when doing up Jay's CSS,
	but at the moment there doesn't seem to be any problem setting
	a background image for this.
*/
#sidebar .display-user-tiny a {}

/*
    The blurb.
	<hr> seems to require being between <p></p> tags.

	Note! Links in the blurb will appear like the other
	buttons in the sidebar, i.e. they will stretch the
	length of the sidebar and have padding. If this is not
	what you want, add this (will affect ALL links in the blurb):

	#sidebar .blurb a {display: inline; padding: 0px;}
*/
#sidebar .blurb {}

/*
    The box that contains the folder that the character is in.
	Use [a] to customise the text.
*/
#sidebar .header {}
#sidebar .header a {}

/*
    The character's name and icon.
*/

#sidebar .display-character a {}

/*
    The dividers.
	5px of padding on top and below, border is border-top.
*/
#sidebar .divider {}

/*
    It's not possible to touch any of the other buttons individually.
	However it's possible to mess with the little icons...
*/
#sidebar i {}

/*
    The currently active page.
	Use [.active a] to change the text colour.
*/
#sidebar .active {}

/***************************************************************************

    Profile page

***************************************************************************/

/*
    .character-profile

	Main editable content of the profile.
	Separate from the columns below.
	I usually throw in an extra div inside, just in case
	I want to make more to abuse later.
	There's no padding.
*/
.character-profile {}

/************************************************
    .character-stats
************************************************/

/*
    The character stats box.
	Forced to float right. It overlaps everything else
	on the page.
	Resembles a [.panel] but isn't one.

	I don't really know what to do with it sometimes...
*/
.character-profile .character-stats {}

/*
    Each row in the stats box.
	Contains a [.character-stat-title] and
	a [.character-stat-value].
*/
.character-profile .character-stats .character-stat-row {}

/*
    Title of a row in the character stats.
*/
.character-profile .character-stats .character-stat-title {}

/*
    Value of a row in the character stats.
*/
.character-profile .character-stats .character-stat-value {}

/*
    Username + picture in the character stats.
	Can reach the image alone with [img] if you
	want to hide it...
*/
.character-profile .character-stats .display-user {}

/*
    Character stats tags.
*/
.character-profile .character-stats .label {}
.character-profile .character-stats .label:hover {}

/************************************************
    .character-fields
************************************************/

/*
    Fields.
	Hierarchy:
	> .character-fields
	   > .character-fields-title
	   > .character-field-row
		  > .character-field-title
		  > .character-field-value
*/
.character-profile .character-fields {}

/*
    The title of the character fields.
	The dividing line between the title and the fields
	is here.
	Padding: 5 20 5 20
	Border: 0 0 1 0
	Margin: 0 0 15 0
*/
.character-profile .character-fields .character-fields-title {}

/*
    Each row of the stats.
*/
.character-profile .character-fields .character-field-row {}

/*
    The title of the field.
	Text aligned right, uppercase by default.
*/
.character-profile .character-fields .character-field-title {}

/*
    The value of the field.
	Spacing between the title and the value is done here
	by way of padding (20px left and right).
*/
.character-profile .character-fields .character-field-value {}

/************************************************
    .character-recent-images
************************************************/

/*
    Recent images.
	Hierarchy:
	> .character-recent-images
	   > .character-recent-images-title
	   > .character-recent-images-gallery
	      > .character-gallery
*/
.character-profile .character-recent-images {}

/*
    The title of the recent images.
	The dividing line between the title and the gallery
	is here.
	Padding: 5 20 5 20
	Border: 0 0 1 0
	Margin: 0 0 15 0
*/
.character-profile .character-recent-images .character-recent-images-title {}

/*
    The fieldset that contains the container that contains
	the large-block-grid-6 gallery.
	20px of padding all around, 5px margins top and bottom.
*/
.character-profile .character-recent-images .character-recent-images-gallery {}

/*
    The container that contains the character gallery.
	No padding or margins.

	Since the character gallery is a grid, it has -10 margins
	on both left and right sides.
*/
.character-profile .character-recent-images .character-gallery {}

/***************************************************************************

    Gallery

***************************************************************************/

/*
    Character image gallery.
	The gallery is a large-block-grid-6.
*/
.character-gallery {}

/*
    Thumbnails.
	Also the same as [.thumb].
	Contains only the image + the "Edit" label.
*/
.character-gallery .gallery-thumb {}
.character-gallery .gallery-thumb .th {}
.character-gallery .gallery-thumb .th:hover {}

/*
    Only the edit label.
	To push it into the exact corner of the image,
	remove the bottom margin of .th and the margins
	for .label.secondary.

	There strictly isn't a need to style it, but just
	in case it's hard to see...
*/
.character-gallery .label.secondary {}

/*
    The save button.
*/
.character-gallery .button {}
.character-gallery .button:hover {}

/***************************************************************************

    Worlds

***************************************************************************/

/*
    The worlds container.

	Worlds are contained in a small-block-grid-4.
*/
.character-worlds {}

/*
    The "Add Character to a World" button.
*/
.character-worlds .button {}
.character-worlds .button:hover {}

/*
    The "Leave" label. One of those things that no one else
	will see so this is not strictly necessary...
*/
.character-worlds .label.secondary {}
.character-worlds .label.secondary a {}

.character-worlds .label.secondary:hover {}
.character-worlds .label.secondary a:hover {}

/***************************************************************************

    Links

***************************************************************************/

/*
    The links page.
	The structure is exactly the same as the user profile
	links page minus the character selection bar at the top,
	so you can copy and paste any code for user profile links
	and change [.profile-links] to [.character-links]
	and vice versa.

	This is probably one of the harder pages to style because
	there aren't very many unique ids and changing one thing
	is likely to break another thing...
*/
.character-links {}

/************************************************
    .forums-ic-panel
************************************************/

/*
    This is named the same as the one used in comments, so
	be sure to add [.character-links] before it to avoid
	confusion...

	This is the entire bar at the top.
	Padding 2px all around, margin 20px bottom.
*/
.character-links .forums-ic-panel {}

/*
    This part contains the character selection buttons and
	so on.
*/
.character-links .forums-ic-select {}

/*
    Displays the selected character, just like for comments.
*/
.character-links #character_display {}

/*
    The "Select Character" button.
	Padding: 10 20 11 20
	Margin: 2 2 2 2
*/
.character-links #select_character {}

/*
    The "Request Link" button.
	Note that using just [.button] will also affect the
	"Select Character" button.
	Padding/margins are a bit weird:
	Padding: 10 20 11 20
	Margin: 2 2 5 2
*/
.character-links .forums-ic-select .button.radius {}

/*
    The character select modal styling can be done
	below under the comments section, since they use
	the same id (#select_character_panel).
*/

/************************************************
    .character-links-row
************************************************/

/*
    Each row of links.
	It contains everything in a single link.
*/
.character-links .character-links-row {}

/*
    This one is probably going to be troublesome to style,
	but it might be useful depending on what you're trying
	to do...

	Affects 3 things:
	1. A container around the character icons/names/delete link label
	2. A container around the links text
	3. The links text panels

	Might be easier to understand visually if you add a
	margin to separate them.
	3 can easily be styled separately. 1 and 2 are harder
	to distinguish and require a lot of small fixes.
*/
.character-links .character-links-row .clearfix {}

/*
    This shows up 4 times in a [.character-links-row].
	1. left side character icon/names
	2. right side character icon/names/delete label
	3. left side character text (containing the [.panel])
	4. right side character text (containing the [.panel])

	Comes with 5px of padding all around.
*/
.character-links .character-links-link {}

/*
    Contains the LEFT side icon and names in the row.
	It's presumably text-right because it's text-alignment right...

	Side effect: styling this will affect the box containing
	the edit button in the [.panel] under the text box.
	Fix with [.profile-links .character-links-link .panel .text-right].
*/
.character-links .character-links-link .text-right {}

/*
    Contains the RIGHT side icon, names and the delete label.
	Again, it's probably text-left because text-alignment left.

	No side effect for this one.
*/
.character-links .character-links-link .text-left {}

/*
    The character icons.
	Has a max height of 100px, no min-height.
*/
.character-links .character-links-link .icon-100 {}

/*
    Affects all the labels. That is,
	1. The delete label
	2. The small link icon
	3. Character name label
	4. Username label

	This is necessary because you can't affect
	only the character name labels. Everything else
	can be specifically modified.
*/
.character-links .label {}
.character-links .label:hover {}

/* The delete labels alone. */
.character-links .label.alert {}
.character-links .label.alert:hover {}

/* The link icons alone. */
.character-links .label.muted {}
.character-links .label.muted:hover {}

/*
    The username label alone.
	Note that changing the text colour here will not work;
	you need to use [a].
*/
.character-links .label.secondary {}
.character-links .label.secondary a {}

.character-links .label.secondary:hover {}
.character-links .label.secondary a:hover {}

/*
    The panels that contain the text box and edit buttons.
*/
.character-links .character-links-link .panel {}

/* The textboxes. */
.character-links .character-links-link .panel .form-control {}

/*
    A row inside the panel that contains the
	"Notify (username) of change?" text as well as
	the [.text-right] that contains the button.
*/
.character-links .character-links-link .panel .row {}

/* The edit button. */
.character-links .character-links-link .panel button.tiny {}
.character-links .character-links-link .panel button.tiny:hover {}

/***************************************************************************

    Comments

***************************************************************************/
/*
	  > .comment-create
	   >> .forums-ic-panel
	  > .reveal-modal
	  > .forum-posts
	   >> .forum-posts-sidebar
	   >> .forum-post
*/

/*
    Comments container.
	If the divider hr needs to be modified, do it here (.comments hr)

	Note that no styling is applied to specific bulletin pages,
	so nothing will happen on there...
*/
.comments {}

/*
    The section for making comments.
    The important part is the IC switch + hidden components.
*/
.comment-create {}

/************************************************
    .forums-ic-panel
************************************************/

/*
    The entire section containing the IC switch.
*/
.comment-create .forums-ic-panel {}

/*
    It didn't use to be, but now it's of an appropriate width.
	The switch area can be reached with [.switch],
	but there's no point since the colour is dependent on
	[label], which cannot be edited (I think).
	Things to think of: colour, font.
*/
.comment-create .forums-ic-switch {}

/*
    The selection area that contains the character
	and the relevant buttons.
*/
.comment-create .forums-ic-select {}

/*
    The thing that shows the picture and current
	selected character. No padding.
*/
.comment-create .forums-ic-select #character_display {}

/*
    Affects both buttons.
*/
.comment-create .forums-ic-select .button {}
.comment-create .forums-ic-select .button:hover {}

/*
    Affects a specific button only.
	Can use for playing with alignment/line breaks.
*/
.comment-create .forums-ic-select #select_character {}
.comment-create .forums-ic-select #select_image {}

.comment-create .forums-ic-select #select_character:hover {}
.comment-create .forums-ic-select #select_image:hover {}

/*
    Can be used to style the textbox.
	Things to think about:
	padding, margins, colour, border-radius, box-shadow
	It's possible to make it entirely borderless/put
	a background image on it, but note that users can
	change the size of the textbox on their screen
	(not that this is a deterrent for doing cute things...)

	If a background colour is specified (even transparent),
	it does not darken when the user clicks on it.

	A fixed-sized textbox will be necessary if alignment's
	important, since we don't want it to deform too much when
	the user changes the window size...this is best used
	only with small textboxes tbh
*/
.comment-create .form-control {}

/*
    The "Post Comment" button.
	Ideally all buttons should be styled the same, and
    all in one place though.
*/
.comment-create .button {}
.comment-create .button:hover {}

/************************************************
    .reveal-modal
************************************************/

/*
    These are the things that pop up for selecting characters
    and images...and also affect the ones that do things
    like submit images for characters and stuff
	The latter don't need to be styled completely,
	but may be worth checking for how readable they are
	especially when working with a dark background

	.reveal-modal{} affects all modals;
	here I'll use their specific ids for comments.
*/
#select_character_panel,
#select_image_panel {}

/* title of the modal */
#select_character_panel h4,
#select_image_panel h4 {}

/* selection area of the modal */
#select_character_panel .panel,
#select_image_panel .panel {}

/* more specific versions */
#select_character_panel .character-select-panel {}
#select_image_panel .image-select-panel {}

/* character selection */
#select_character_panel .character-select-row {}
#select_character_panel.character-select-row:hover {}

/* image selection */
#select_image_panel .image-select-cell {}
#select_image_panel .image-select-cell:hover {}

/* .button doesn't work, so use these */
#select_character_panel .character-select-button {}
#select_image_panel .image-select-button {}

#select_character_panel .character-select-button:hover {}
#select_image_panel .image-select-button:hover {}

/************************************************
    .forum-posts
************************************************/

/*
    A container that holds each individual comment.
	Adjust the padding here, add a line to
	differentiate individual comments...
*/
.forum-posts {}

/*
    Holds the user's avatar. Can be used to crop
	the image by way of overflow: hidden;.
*/
.forum-posts .forum-posts-sidebar {}

/* Holds the main content of the post. */
.forum-posts .forum-post {}

/*
    Notes who (and which character if applicable) posted
	the comment, and when.
	The date can be styled with abbr.
*/
.forum-posts .forum-post .forum-post-caption {}

/*
    For styling the Edit/Delete buttons.
	[.label] gets both of them, while [.label.alert]
	only gets the delete button.
*/
.forum-posts .forum-post .label {}
.forum-posts .forum-post .label.alert {}

.forum-posts .forum-post .label:hover {}
.forum-posts .forum-post .label.alert:hover {}

/*
    Main text content.
    If there's no universal styling for .panel,
    the background/border etc. can be changed here.
*/
.forum-posts .forum-post-content {}