TH CSS skeleton

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

    CSS skeleton for TH profile 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 [.profile-content]
	  > .profile-column
	   >> .profile-bulletin
	   >> .profile-feature
	   >> .profile-characters
	  > .profile-column
	   >> .profile-comments
	- Comments
	  > .comment-create
	   >> .forums-ic-panel
	  > .reveal-modal
	  > .forum-posts
	   >> .forum-posts-sidebar
	   >> .forum-post
	- Bulletins [.bulletins-index] and latest bulletins
	  > .bulletins-post
	   >> .bulletin-header
	   >> .bulletin-post
	- Characters [.profile-characters]
	  > .profile-characters-folders
	  > .profile-characters-filters
	   >> .sub-nav
	  > .characters-gallery
	   >> .thumb-character
	- Images
	  > .profile-gallery
	- Links
	  > .profile-links
	   >> .character-links-row
	- Worlds
	  > .profile-groups
	- Favourites
	  > .profile-creations
	- Designs
	  > .profile-creations
	- Art
	  > .profile-gallery
	- Stats
	  > .character-fields
	  > #modal-default

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

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

    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 bulletins 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:
	- only the "Post Comment" buttons
*/
.button {}
.button:hover {}

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

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

/* this affects any usernames */
.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: "Edit" labels, character name labels
	- Bulletins: "Edit" labels (both main and individual posts)
	- Characters: character name labels
	- Designs: character name labels
	- Images: character name labels
	- Favourites: character name labels
	- 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.primary affected areas:
	- Profile: recent characters character name labels (but not featured)
	- Characters: character name labels
	- Designs: character name labels
	- Favourites: character name labels

	.label is a better choice unless specificity is required.
*/
.label.primary {}
.label.primary:hover {}

/*
    .label.secondary affected areas:
	- Profile: latest bulletin "# Comments" label,
	           recent characters username labels
	- Bulletins: "# Comments" label (both main and individual posts)
	- Characters: username labels
	- Worlds: member rank label
	- Designs: username labels
	- Images: "Edit" labels
	- Favourites: username labels
*/
.label.secondary {}
.label.secondary:hover {}

/*
    .label.alert affected areas:
	- Profile: all the labels that say "Delete"
	- Bulletins: "Delete" labels
	- Comments: "Delete" labels

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

/*
    only appears on characters page;
    one each for each counter icon + number
*/
.label.muted {}

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

/*
    .panel affected areas:
	- Profile: latest bulletin, featured character, recent characters
	- Bulletins: bulletin backgrounds
	- Comments: comments (comment boxes)
	- Modals: character selection (scrolling area),
	          image selection (scrolling area)
*/
.panel {}

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

/*
    .th affected areas:
    - all character/world thumbnail image boxes

    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
	- 3 versions: padded (no padding-top), margin-bottom, no padding/margin
	- Profile: featured (images only (margin-bottom); excludes character),
	           recent characters
	- Characters: characters
	- Worlds: worlds (no padding)
	- Images: images (margin-bottom)
	- everything else is padded
*/
.thumb {}

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

/* 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.small-block-grid-6

    Used for all the pages.
	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?)

	On the Characters page, it's contained within
	an uneditable fieldset that has 20px margins,
	so it's padded an extra 10px from #content's edges by default.
	To overcome this and reach #content, margins should be -20px
	instead of the forced 0px here.

	Generally, styling the grids means finishing
	Worlds/Designs/Images/Favourites all at once, or at least
	very quickly.
*/
ul.small-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.
	However, it doesn't affect the profile page.

	Profile recent characters uses small-block-grid-3
	Profile featured character uses large-block-grid-6 (images only)

    remember that Characters page has the extra
	10px of padding all round though
*/
ul.small-block-grid-6 li
{
    padding-top: 10px;
}

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

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

/*
    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 box that says "User".
*/
#sidebar .header {}

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

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

/*
    .profile-content

	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.
	By default it's padded 10 10 10 10, but to maintain
	consistency I usually turn off the padding and add it
	in #content instead.
*/
.profile-content { padding: 0px; }

/************************************************
    .profile-column
************************************************/
/*
    The two columns below the editable profile content.
	Not a part of [.profile-content].
	There doesn't seem to be a way to differentiate between the two.
	Merging them into a straight line is simple: width: 100%;

	It may be a good idea to apply thumbnail/label
	styling in here.
*/
.profile-column {}

/*
    .profile-column headings
	This overwrites the default h1.
	However, it also overwrites the h1 in the panel, so
	overwrite it again.
*/
.profile-column h1 {}
.profile-column .panel h1 {}

/*
    .profile-column .panel
	Simply, all the panels in the columns.
*/
.profile-column .panel {}

/************************************************
    .profile-bulletin
************************************************/

/*
    .profile-column .profile-bulletin

	The bulletin section, which is in the same column as
	featured and recent characters. Includes the header.
	.profile-bulletin-content is the panel that
	contains everything but the header.

	The divs appear to be the same as the bulletin pages',
	so any styling done on those and not specific to only
	the bulletin pages will apply here as well.
	I'm unsure if ".profile-column" is required,
	but just to be safe...
*/
.profile-column .profile-bulletin {}
.profile-column .profile-bulletin-content {}

/************************************************
    .profile-feature
************************************************/
/*
    The featured character section.
	Only the images are in a grid.
	The character itself isn't bounded by anything.
	The dividing line is a hr.
	The images are inside [.profile-feature-gallery].
	Trivia: the image gallery thumbs don't have rounded corners

	.profile-feature .th - all thumbnails
	.profile-feature .profile-feature-gallery .th - only image gallery thumbs

	.profile-column .th - all thumbs on the profile page
	^ may be convenient
*/
.profile-column .profile-feature {}


/************************************************
    .profile-characters
************************************************/
/*
    The recent characters section.
	Much like the above...
	Character names are .label,
	usernames are .label.secondary.
*/
.profile-column .profile-characters {}

/************************************************
    .profile-comments
************************************************/
/*
    Not much has to be done here since it's handled
	in the regular comments styling.
	The column that holds this floats right and
	can't be forced to float left or none.
	Since the columns aren't differentiated it also
	means that column locations can't be switched.
*/
.profile-column .profile-comments {}

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

    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 {}

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

    Bulletins

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

/* The container for the bulletins page */
.bulletins-index {}

/************************************************
    .bulletins-post
************************************************/

/*
    The div for each individual post on the
	bulletins page.
	It's also a panel so any [.panel] styling
	will apply to it.

	I'm leaving out [.bulletins-index] so that the
	styling will apply to both the main profile page's
	latest bulletin as well. If that's not the
	desired effect, then add it in and throw in a
	[.profile-content] version for the front page.
*/
.bulletins-post {}

/************************************************
    .bulletin-header
************************************************/

/*
    Giving this section its own comment header because
	it consists of a fair bit of stuff.

	The header consists of everything that is not in
	the content of the post.
	Note that the padding is a little weird:
	0 20 10 20, so padding the top may be a good idea
	especially on the front page where the title runs off
	the top of the panel (50 seems
	like a good amount)
*/
.bulletin-header {}

/*
    Why does the title run off the top of the panel?
	It's because this div is set to position: absolute;
	in order to keep it aligned with the bottom of the
	icon image. (The same {position: absolute; bottom: 0px;}
	in {position: relative} trick I used for Jay's header bar)
	However, if the icon image is too small, the text too long
	and the column too narrow (which occurs only on the front page)
	it will be pushed upwards and out of the box.

	Inserting position: relative; here will fix the front
	page problem, but also make it not align with the bottom
	of the icon.
*/
.bulletin-header .bulletin-header-content {}

/*
    The icon used in the header.
*/
.bulletin-header .forum-thread-avatar {}

/*
    The bulletin title.
*/
.bulletin-header .bulletin-title {}
.bulletin-header .bulletin-title:hover {}

/*
    The part that says who posted it and when.
	Contains the labels.
*/
.bulletin-header .bulletin-caption {}

/*
    The labels.
	.label touches both,
	.label.alert only touches the "Delete" one.
*/
.bulletin-header .bulletin-caption .label {}
.bulletin-header .bulletin-caption .label.alert {}

/************************************************
    .bulletin-post
************************************************/

/*
    Whatever in the post that isn't contained by the header.
*/
.bulletin-post {}

/*
    The bar that contains the comments label and centres it.
*/
.bulletin-post .text-center {}

/*
    The comments label.
	Use [a] to change the text colour.
*/
.bulletin-post .text-center .label {}
.bulletin-post .text-center .label a {}

.bulletin-post .text-center .label:hover {}
.bulletin-post .text-center .label a:hover {}

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

    Characters

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

/* The container for the characters page */
.profile-characters {}

/*
    The content is split into multiple rows:
	1. Folder h1 ("UNSORTED") and folder icons
	2. Filters, not including h1 ("FILTERS")
	3. Gallery + pagination
*/
.profile-characters .row {}

/*
    The hr dividing the filters and the gallery itself.
*/
.profile-characters hr {}

/************************************************
    .profile-characters-folders
************************************************/

/*
    Folder row

	Contains the title. Folder icons are a [.small-block-grid-6].
	Padding is applied on [.text-center]/[li].
*/
.profile-characters .profile-characters-folders {}

/*
    The little container in the top right that contains the
	labels.
	Probably of not much practical use to style, but could
	probably use for nudging the labels or something...
*/
.profile-characters .profile-characters-folders .right {}

/*
    Labels on the top right. (View Unsorted/View All)
	[.right] forces a float: right; so they're stuck there.
	There's no way to differentiate them.
*/
.profile-characters .profile-characters-folders .right .label{}
.profile-characters .profile-characters-folders .right .label:hover{}

/* Back label */
.profile-characters .profile-characters-folders h1 .label{}
.profile-characters .profile-characters-folders h1 .label:hover{}

/*
    Folder buttons
	Tricks:
	1. { visibility: hidden; } for [i] to retain
	   text alignment but hide folder icon
	2. background-image a custom folder icon
	   (probably not possible to do custom for each one)
*/
.profile-characters .profile-characters-folders .button {}
.profile-characters .profile-characters-folders .button:hover {}

/************************************************
    .profile-characters-filters
************************************************/

/*
    The row that contains the filters.

	Each filter/sort category has a div to itself
	that contains a .sub-nav.
*/
.profile-characters .profile-characters-filters {}

/*
    "FILTERS" text.
*/
.profile-characters .profile-characters-filters h1 {}

/*
    The tags filter.
	This is also a [.row].
*/
.profile-characters .profile-characters-filters-tags {}

/*
    The ordering filter.
	This is also a [.row].
*/
.profile-characters .profile-characters-filters-orderby {}

/*
    Each [.sub-nav] contains a dt and a bunch of dds...
	At the moment I haven't figured out a nice way
	to style them neatly, since nothing contains only the dds.

	A specific [.sub-nav] can be styled by using the specific
	div from above:
	.profile-characters .profile-characters-filters-tags .sub-nav
	.profile-characters .profile-characters-filters-orderby .sub-nav

	I imagine it isn't going to be necessary to be that specific though.

	Ideas:
	1. {float: left;} the dt and {float: right;} the dd.
	2. {padding-top: 1.5em;} in [.sub-nav], {margin-top: -1.2em} in dt.
	3. More interesting: {float: left; clear: both;} in dd, but
	                     I haven't found a practical use for this yet
						 (.row can't be resized because it has a min-width
						 of 100%, making it impossible to arrange the tag
						 stacks next to each other)
*/
.profile-characters .sub-nav {}

/*
    This is the description of the filter.
*/
.profile-characters .sub-nav dt {}

/*
    These are the filter options.
	[dd] has margins, while [dd a] has padding.
	The background colour for active dds is in [dd a]
	rather than [dd].
	Basically, make changes to [dd a] rather than [dd]
	unless the margins need to be changed.

	Changes made to dd will affect dd.active, unless
	dd.active is styled.
*/
.profile-characters .sub-nav dd {}
.profile-characters .sub-nav dd a {}
.profile-characters .sub-nav dd a:hover {}

.profile-characters .sub-nav dd.active {}
.profile-characters .sub-nav dd.active a {}
.profile-characters .sub-nav dd.active a:hover {}

/*
    The tag search textbox.
	Unless !important is added, it'll probably get
	overwritten (even for border and box-shadow properties).
*/
.profile-characters .sub-nav .inline-tiny {}

/************************************************
    .characters-gallery
************************************************/

/*
    The structure of the gallery is like this:
	- .characters-gallery
	  > fieldset
	    >> .small-block-grid-6
		  >>> .thumb-character
*/
.profile-characters .characters-gallery {}

/*
    Remember that the uneditable fieldset has
	20px of padding left and right, and
	that the grid has -10px margins on the same sides,
	so to cancel that out this needs -20px on
	left and right.

	Incidentally, this won't align with the dts
	because dt has margins. (10px left and right)
*/
.profile-characters ul.small-block-grid-6
{
    margin-left: -20px;
	margin-right: -20px;
}

/*
    Character thumbs.
	Exactly the same thing as [.thumb].
	Contains in this order:
	[.th]
	[.thumb-caption]

	Where [.thumb-caption] contains
	[.label.primary][.label.secondary][.label.muted][.nowrap]
	all on the same line,
	and where [.nowrap] contains all the little count icons in
	individual [.label.muted]s.
*/
.profile-characters .thumb-character {}

/*
    These will override the global specifications.
	Remember that .th is the image box itself and has the border
	and box-shadow.
*/
.profile-characters .thumb {}
.profile-characters .th {}
.profile-characters .th:hover {}

/* Everything below the thumbnail */
.profile-characters .thumb-caption {}

/*
    It bothers me when labels are sometimes on the same line
	and sometimes on different lines, so I'm breaking
	them into different lines.
	[div.label] ensures that the counter icons aren't split up;
	only the major labels are affected (the counter icons are
	in a span and not a div).
*/

.profile-characters .thumb-caption div.label { display: block; }

/*
    Meanwhile, force long names with multiple words to break into
	more than one line. If there are too many counter icons in one line
	they'll also be split into two.
*/
.profile-characters .thumb-caption .label { white-space: normal; }

/*
    Name labels.
	Should be obvious but [.label.primary] is character name,
	[.label.secondary] is username.
*/
.profile-characters .thumb-caption .label.primary {}
.profile-characters .thumb-caption .label.secondary {}

.profile-characters .thumb-caption .label.primary a {}
.profile-characters .thumb-caption .label.primary a:hover {}
.profile-characters .thumb-caption .label.secondary a {}
.profile-characters .thumb-caption .label.secondary a:hover {}

/*
    Small icons.
	No need to use [i] to change colour of the icon.
*/
.profile-characters .thumb-caption .label.muted {}
.profile-characters .thumb-caption .label.muted .favorited{}

/*
    I feel an inexplicable pointlessness in documenting this
	but it may have a point eventually

	The box that contains the pagination at the top and bottom
	of the gallery...
*/
.profile-characters .pagination-centered {}

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

    Images

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

/* The container for the gallery page */
.profile-gallery {}

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

/*
    The labels.
*/
.profile-gallery .label { white-space: normal; }
.profile-gallery .label a {}
.profile-gallery .label a: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...
*/
.profile-gallery .label.secondary {}

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

    Links

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

/*
    The links page.
	The structure is exactly the same as the character
	links page minus the character selection bar at the top,
	so you can copy and paste any code for character links
	and change [.character-links] to [.profile-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...
*/
.profile-links {}

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

/*
    Each row of links.
	It contains everything in a single link.
*/
.profile-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.
*/
.profile-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.
*/
.profile-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].
*/
.profile-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.
*/
.profile-links .character-links-link .text-left {}

/*
    The character icons.
	Has a max height of 100px, no min-height.
*/
.profile-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.
*/
.profile-links .label {}
.profile-links .label:hover {}

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

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

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

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

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

/* The textboxes. */
.profile-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.
*/
.profile-links .character-links-link .panel .row {}

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

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

    Worlds

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

/*
    The container for the world page.
*/
.profile-groups {}

/*
    This controls the default padding on each thumb.
	[.text-center.clearboth] refers to only the leftmost one,
	and could probably be used for making dividing borders...

	Note though that this won't be a consistent design since
	not all the pages have .clearboth...
*/
.profile-groups .text-center {}
.profile-groups .text-center.clearboth {}

/*
    These are contained within .text-center inside a small-block-grid-6,
	which has -10px margins as usual. Each one has some
	padding on the left and right sides, as a note.
	This is also reached with the global [.thumb].

	The change on b is to make the label split onto the next line.
*/
.profile-groups .gallery-thumb {}
.profile-groups .gallery-thumb b { display: block; }

.profile-groups .gallery-thumb .th {}
.profile-groups .gallery-thumb .th:hover {}

/*
    The rank label.
*/
.profile-groups .label {}

/*
    The "Save Worlds" button.
	Apply background colour directly.
*/
.profile-groups .button {}
.profile-groups .button:hover {}

/*
    Another pointless discovery.
	There's a div 250 pixels high below the save button...
	Might be cute for an image, but I also don't know if there
	are any special conditions for it appearing/not appearing.
*/
.profile-groups .spacer-250 {}

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

    Favourites

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

/*
    For some reason, the container for this page is also
	[.profile-creations] (same as the Designs page).
	I imagine there isn't going to be any huge difference
	and anyway there isn't really a way to differentiate the
	things...
*/

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

    Designs

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

/* The container for the designs page */
.profile-creations {}

/*
    Thumbnails.
	Also the same as [.thumb].
	Includes the labels.
*/
.profile-creations .thumb-character {}

.profile-creations .thumb-character .th {}
.profile-creations .thumb-character .th:hover {}

/*
    The labels. Again, splitting onto different lines.
*/
.profile-creations .thumb-character .label { display: block; white-space: normal; }

.profile-creations .thumb-character .label.primary {}
.profile-creations .thumb-character .label.secondary {}

.profile-creations .thumb-character .label.primary a {}
.profile-creations .thumb-character .label.primary a:hover {}
.profile-creations .thumb-character .label.secondary a {}
.profile-creations .thumb-character .label.secondary a:hover {}

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

    Art

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

/*
    The container here is the same as the one used for the
	Images page (.profile-gallery). I imagine there's no
	need to go through this since there's nothing new here...
*/

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

    Stats

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

/*
    Class name is literally the same as the one used for
	fields on character pages...
	If you're modifying your profile css for character css,
	be sure to check this section.
*/
.character-fields {}

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

/*
    The title of the field.
	Text aligned right, uppercase by default.
*/
.character-fields .character-field-row .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-fields .character-field-row .character-field-value {}

/*
    For modifying the appearance of dates specifically on this page.
*/
.character-fields .character-field-row abbr {}

/************************************************
    #modal-default
************************************************/

/*
    The modal that appears when you click on either of the
	subscribed users/subscriber links.
	Can also be reached with [.reveal-modal], but this will
    affect the other modals (namely, the select character/image
    ones in comments).
*/
#modal-default {}

/* The title of the modal. */
#modal-default h1 {}

/*
    The grid that contains the users in the modal.
*/
#modal-default .small-block-grid-8 {}

/*
    Each of the li in the grid. 5px padding all round.
*/
#modal-default .small-block-grid-8 li {}

/*
    Each of the cells (1 per li) in the grid.
	10px padding, 5px margins all round so it looks
	kind of cramped at small sizes...
	Unfortunately the padding and margins can't be changed.
*/
#modal-default .small-block-grid-8 .character-select-cell {}
#modal-default .small-block-grid-8 .character-select-cell:hover {}

/*
    The username labels.
*/
#modal-default .small-block-grid-8 .label {}
#modal-default .small-block-grid-8 .label:hover {}