TH misc CSS tweaks

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

    TOYHOUSE UTILITY CSS

    These are small tweaks that are meant to be
    used with the default layout, but should
    work otherwise...probably...
	Feel free to use/incorporate any part of this
	in a separate stylesheet, credit optional.

	Last updated 26/10/14

    http://toyhou.se/aleator

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

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

    = padding and margins

    Some divs could use a bit more padding
    and wider margins


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

/* separate main page content from the recent panels */
.profile-characters .profile-characters-content.panel
{
    margin-top: 20px;
}

/* bring content slightly further away from the sides */
#content
{
    padding-left: 30px;
    padding-right: 30px;
}

/* move the bulletin comment link slightly lower*/
.bulletin-post .text-center
{
    padding-top: 30px;
}

/* space out the IC switch and hidden stuff for comments
   use with comment box tweaks below for better effect */
.forums-ic-switch
{
    margin-bottom: 10px;
}
.forums-ic-select
{
    padding: 0px;
    margin: 0px 20px 10px 20px;
}

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

    = removing parts

    Removes various parts of the layout
    You can choose only the ones you need;
    all of them are disabled by default.
    Uncomment to turn it on.


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

/*  === header ===  */

/* #header { display: none; } */

/*  === footer ===  */

/* #footer, .profiler { display: none; } */

/*  === sidebar header ===
    The blue thing in the sidebar */

/*.side-nav li.header { display: none; } */

/*  === profile page recent panels === */
/*.profile-characters .profile-characters-content.panel,
.profile-characters .profile-images-content.panel
{
    display: none;
}*/

/*  === character page user link in sidebar === */
/*.side-nav .display-user-tiny,
.side-nav .display-user-tiny a
{
    display: none;
}*/

/*  === character page character stats ===
    See below for an alternative to getting
    rid of the stats panel
*/
/*.character-stats { display: none; } */

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

    = comment box

    Rearranges the things in the comment box,
    mainly with regards to the IC commenting switch
    and the buttons that appear when it's turned on

    The reasoning is that if you have long character
    names and a small window it'll break the
    layout and look quite bad, so here I'm
    splitting them into different lines and/or
    just rearranging them so it's less likely to happen.

    The left-aligned version is active by default,
    comment it out and uncomment the right-aligned version
    to use it.


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

/*
    === left-aligned ===

    IC switch on the left. Hidden parts appear
    on the line underneath the switch.

    "POST IC" text fits on one line instead of two.

*/

.forums-ic-switch
{
    width: 15%;
    float: left;
clear: both;
}
.forums-ic-select
{
    float: left;
    display: inline;
    clear: both;
padding-left: 0px;
padding-right: 0px;
}
#character_display,
#character_display img
{
    margin-right: 10px;
}


/*
    === right-aligned ===

    IC switch on the left. Hidden parts appear
    on the right side, character name and buttons
    split into two lines with the buttons
    appearing underneath the character.

    "POST IC" text fits on one line instead of two.

*/

/*
.forums-ic-switch
{
    float: left;
    width: 4em;
    padding-right: 0px;
    padding-left: 0px;

}
.forums-ic-select
{
    float: right;
    width: auto !important;
    padding-right: 0px;
    text-align: right;
}
.forums-ic-select .button
{
    margin-right: 0px;
}

#character_display
{
    float: right;
    clear: both;
    margin-bottom: 10px;
}

#select_character, #select_image
{
    float: right;
}

#select_character
{
    clear: right;
}
*/

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

    = comment labels

    This is probably an overly specific thing but
    it shifts the edit/delete labels on the
    comment box above the box, rather than
    stuck in the corner which looks ugly when
    the comment content is long enough to go near it
    It also makes the caption (posted by ___) break
    into multiple lines if the user/character name is long.


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

.forum-post-content
{
    margin-top: 2px;
}
.forum-post-caption
{
    width: 50%;
}
.forum-post .label,
.forum-post .label.alert
{
    margin-top: -21px;
}

/* This sends the date onto a new line
   which looks neater with long names,
   but it's also excessively long, I
   haven't figured out how to deal with this */
/*
.forum-post-caption abbr
{
    display: block;
}
*/

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

    = character labels/details

    Tidies up the labels.
    - Breaks character names into multiple lines
      if they're too long, instead of stretching
      into someone else's territory.
      (Side effect: label now stretches the width of
      the thumbnail even if the name is short)
    - Separates short character/user names into two lines.
    - Splits the edit icon onto another line.
    - Splits the count icons onto multiple lines
      if they're too long.
    - Centres everything below the character.


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

.profile-characters .thumb-caption,
.profile-creations .thumb-caption
{
    margin-left: auto;
    margin-right; auto;
}
.profile-characters .thumb-caption .label.primary,
.profile-characters .thumb-caption .nowrap,
.profile-creations .thumb-caption .label.primary,
.profile-creations .thumb-caption .label.secondary,
.profile-gallery .gallery-thumb .label,
.profile-characters .gallery-thumb .label.secondary
{
    margin-left: auto;
    margin-right: auto;
    display: block;
    white-space: normal !important;
}

/* comment out this section if you don't want the
   pencil on a different line */
.profile-characters .thumb-caption div.label.muted
{
    margin-top: 6px;
    margin-bottom: 6px;
    margin-left: auto;
    margin-right: auto;
    display: block;
    white-space: normal !important;
}

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

    = character stats hack

    * Only works on character main page.

    Turns the character stats panel into an image
    centred above the fields section.

    The obvious downside is that you can't show
    the character stats, but I've also been
    unable to find a way to style the stats to
    look good lol (especially since it's forced
    to float right).
    Also, the rest of the content has to float
    left, or weird things will happen.


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

.character-stats
{
    width: 100%;
    background-color: transparent;
    border: 0px;
    display: block;
    background-repeat: no-repeat;
    background-position: center;

    /* change these two to match your image */
    /* it means you have to individually paste the css into every character */
    /* and modify it from there but I can't think of an easy way to do this */
    height: 300px;
    background-image: url('http://placekitten.com/g/200/300');

}

.character-stat-row,
.character-stat-row img,
.character-stat-title,
.character-stat-row .label,
.character-stats abbr
{
    display: none;
}

.character-fields,
.character-text,
.character-recent-images
{
    display: block;
    float: left;
    clear: both;
    width: 100%;
}