Headliner (CSS: character)

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

    character css by cy @ toyhou.se

	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]

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

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

    Options

    Colours used:

    #000

    #333

    #777

    #bbb

    #eee

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

/*

    If you don't like the round images and fixed-width image sizes	

	please comment out/remove this entire section

*/

.character-links .character-links-link .icon-100 

{

    border-radius: 50%;

    width: 100px;

	height: 100px;

}

.th img, .th.radius

{

    width: 70px !important;

	height: 70px !important;

	overflow: hidden;

	border-radius: 50%;

}

.th, .th.radius

{

    border-radius: 50%;

}

#sidebar .display-user img

{

    max-width: 140px;

	max-height: 140px;

    width: 140px;

	height: 140px;

}

/*

    Change this to modify the header image,

	or you can comment out/remove it altogether

	if you don't want a header image.

*/

#header 

{

    /*  

	    Don't modify this unless you want a larger header - 

		it's to make it align with the rest of the page content.

	*/

    width: 700px !important;

	/*

	    Change this to match the image.

		You might need a bit of trial and error to

		see how it works with the links.

	*/

	height: 300px !important;

	/*

	    Put your header image here.

		The rest are modifications to how the image is

		shown you can play around with them if you want

		something that tiles for example

	*/

	background-image: url('http://i.imgur.com/4ECUk9k.png');

	background-color: transparent;

	background-repeat: no-repeat;

	background-position: center top;

}

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

    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 

{

    color: #777;

}

a:hover 

{

    color: #bbb;

}

/* 

    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: 15px 10px 15px 10px;

	border-top: 2px solid #000;

	border-bottom: 2px solid #000;

	border-left: 0px;

	color: #333;

	margin-left: 30px;

	margin-right: 30px;

	text-align: justify;

}

/*

    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; 

	text-transform: none;

	font-size: 35px;

	color: #000;

}

h2, .panel h2 

{

    font-size: 31px;

	color: #000;

}

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 

{

    border-top: 1px solid #000;

	margin-top: 1em;

	margin-bottom: 1em;

}

/*

    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 

{

    background-color: #000;

	color: #fff;

}

.button:hover 

{

    background-color: #000;

	color: #777;

}

.button:active

{

    box-shadow: none;

}

/*

    .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 

{

    background-color: transparent;

}

.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 { background-color: transparent; }

.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 

{

    background-color: transparent;

	border-radius: 0px;

	border: 0px;

	font-size: 12px;

}

.panel p

{

    font-size: 12px;

}

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

    .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 img, .th.radius

{

    border: 0px;

}

.th, .th.radius

{

    box-shadow: 0px 0px 0px #fff;

}

.th:hover 

{

    box-shadow: 0px 0px 5px #eee;

}

/*

    .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 

{

    color: #777;

}

ul.pagination li a:hover  

{

    background-color: #eee;

    color: #bbb;

}

/* current page number, modify background colour here */

ul.pagination li.current a 

{ 

    background-color: transparent; 

	color: #000;

	font-weight: bold;

}

ul.pagination li.current a:hover 

{

    color: #777;

}

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

{

    width: 700px;

	min-width: 700px;

	margin-left: auto;

	margin-right: auto;

}

/*

    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 

{

    width: 550px;

	padding: 0px 0px 200px 20px;

	font-size: 14px;

	text-align: justify;

}

#content p

{

    font-size: 14px;

	text-align: justify;

}

/*

    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 

{

    min-width: 700px;

	width: 700px;

    position: relative;

	height: 30px;

	margin-left: auto;

	margin-right: auto;

	margin-bottom: 20px;

	margin-top: 10px;

	border-bottom: 2px solid #000;

}

/* 

    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: #fff; 

	color: #777;

	min-height: 25px;

}

#header a

{

    padding-top: 0px;

	margin-top: -7px;

}

.top-bar-section li

{

	border-right: 1px solid #000;

	font-size: 12px;

}

#header a:hover 

{

    color: #bbb;

}

.top-bar-section li.has-dropdown

{

    border: 0px;

}

/* Dropdown links */

#header .dropdown a 

{

    background-color: #000;

	color: #fff;

	height: 25px !important;

    margin-top: 7px;

	border-bottom: 1px solid #fff;

}

#header .dropdown a:hover

{

    color: #bbb;

}

#header .dropdown li

{

	border: 0px !important;

	background-color: transparent;

	height: 25px !important;

	min-height: 25px;

	padding-left: 2px;

}

#header .dropdown li a

{

    line-height: 25px;

	height: 25px;

	padding-left: 5px;

}

/* Vertical divider; border-right */

#header li.divider { display: none; }

/* top-left homepage link */

#header .title-area 

{

    display: none;

}

/* 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 a, #header li, #header ul, #header h1 

{

    height: 30px;

}

/*

    Notif buttons.

	Padding: 5 10 5 10

	Margin: 5 0 0 0

*/

#header .button 

{ 

    background-color: transparent; 

	color: #777;

	border: 0px;

	top: 0px;

	margin-top: 2px;

}

#header .button:hover

{ 

    color: #bbb;

}

/*

    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 

{

    position: absolute;

	bottom: 0px;

	width: 700px;

	background-color: #fff;

}

/*

    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 

{

}

.top-bar-section .has-dropdown a:after

{

    display: none;

}

#header .fi-home,

#header .fi-comments, 

#header .fi-plus,

#header img

{

    display: none;

}

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

    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 

{

    background-color: transparent;

	width: 150px;

	text-align: right;

}

#sidebar .fi-comment,

#sidebar .fi-graph-bar

{

    display: none;

}

/*

    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

{

    padding: 0px 5px 0px 5px;

	line-height: 25px;

	font-size: 12px;

	color: #777;

	border-bottom: 1px solid #000;

}

#sidebar a:hover

{

    color: #bbb;

	background-color: #eee;

}

/*

    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 

{

    background-color: #000;

	padding: 5px;

	font-size: 0px;

	display: none;

}

/*

    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 

{

    font-size: 0px;

	padding-top: 10px;

	padding-bottom: 10px;

	height: 165px;

	border-bottom: 2px solid #000;

}

#sidebar .display-user a:hover

{

    background-color: transparent;

}

#sidebar .display-user img:hover

{

    background-color: #eee;

	box-shadow: 0px 0px 5px #eee;

}

/*

    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 

{

 /*   padding-left: 5px;

	padding-right: 5px;*/

	padding: 10px 0px;

	text-align: left !important;

	margin: 0px;

	border-top: 1px solid #000;

	border-bottom: 2px solid #000;

}

#sidebar .blurb p { margin: 0px; text-align: justified; }

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

/*

    The dividers.

	5px of margin on top and below, border is border-top.

*/

#sidebar .divider 

{

    padding-left: 0px;

	padding-right: 0px;

	border-top: 1px solid #000;

	margin: 0px;

}

/*

    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 

{

    background-color: #000;

}

#sidebar .active a

{

    color: #fff;

}

#sidebar .active a:hover

{

    color: #bbb;

	background-color: #333;

}

.side-nav

{

    padding-top: 0px;

}

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

    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-profile .character-text-title

{

    padding: 0px;

	font-size: 35px;

	font-weight: 700;

	color: #000;

	text-transform: none;

	line-height: 1.5em;

	margin-bottom: 10px;

	border-bottom: 0px;

}

.character-profile .character-text

{

    border-bottom: 10px solid #000;

	padding: 0px 0px 20px 0px;

	margin-bottom: 20px;

}

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

    .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 

{

    background-color: #fff;

	border: 0px;

	text-align: right;

	font-size: 12px;

	line-height: 25px;

	width: 150px;

	min-width: 150px;

	padding: 0px 0px 0px 15px;

}

/* 

    Each row in the stats box. 

	Contains a [.character-stat-title] and

	a [.character-stat-value].

*/

.character-profile .character-stats .character-stat-row 

{

    border-bottom: 2px solid #000;

	margin-bottom: 0px;

	padding-bottom: 0px;

}

/*

    Title of a row in the character stats.

*/

.character-profile .character-stats .character-stat-title 

{

    border-bottom: 1px solid #000;

	text-align: left;

}

/*

    Value of a row in the character stats.

*/

.character-profile .character-stats .character-stat-value 

{

    padding: 0px;

}

/*

    Username + picture in the character stats.

	Can reach the image alone with [img] if you

	want to hide it...

*/

.character-profile .character-stats img { display: none; }

/*

    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 

{

    border-bottom: 10px solid #000;

	padding: 0px 0px 20px 0px;

	margin-bottom: 20px;

}

/*

    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 

{

    padding: 0px;

	font-size: 35px;

	font-weight: 700;

	color: #000;

	text-transform: none;

	line-height: 1.5em;

	margin-bottom: 10px;

	border-bottom: 0px;

}

/*

    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 p

{

    color: #777;

	line-height: 25px;

	font-weight: 700;

	text-align: right !important;

}

/*

    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 

{

    padding: 0px;

}

/*

    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 

{

    padding: 0px;

	font-size: 35px;

	font-weight: 700;

	color: #000;

	text-transform: none;

	line-height: 1.5em;

	margin-bottom: 10px;

	border-bottom: 0px;

}

/*

    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 

{

    padding: 0px;

}

/*

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

.character-profile .character-recent-images .character-gallery  .th,

.character-profile .character-recent-images .character-gallery  img

{

    max-width: none;

}

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

    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 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.

*/

.character-links .character-links-row

{

    border-bottom: 1px solid #000;

	margin-bottom: 20px;

}

.character-links .character-links-row .clearfix

{

    border-bottom: 1px solid #000;

}

/*

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

.character-links .character-links-link .text-left .icon-100 

{

    float: left;

}

.character-links .character-links-link .text-right .icon-100 

{

    float: right;

}

.character-links .character-links-link .text-left .label 

{

    float: right;

    clear: both;

	font-size: 12px;

}

.character-links .character-links-link .text-right .label 

{

    float: left;

    clear: both;

	font-size: 12px;

}

.character-links .character-links-link .fi-link 

{

    padding-left: 8px;

    padding-right: 8px;

}

.character-links .character-links-link .label 

{

}

.character-links .character-links-link .label:hover {}

/*

    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 

{ 

    background-color: transparent;

	color: #777;

}

.character-links .label.alert:hover 

{

    color: #bbb;

}

/* 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 { margin-bottom: 15px; }

.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.radius

{

    border: 0px !important;

}

/* The textboxes. */

.character-links .character-links-link .panel .form-control 

{

    box-shadow: none;

	border-radius: 0px;

	border: 1px solid #000;

	background-color: #fff;

}

/*  

    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 

{

    background-color: #000;

	color: #fff;

	margin: 0px;

	border-radius: 0px;

}

.character-links .character-links-link .panel button.tiny:hover 

{

    background-color: #000;

	color: #777;

}

.character-links .character-links-link .characters-links-text

{

    margin-bottom: 10px;

}

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

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

.comments hr

{

    border: 0px;

}

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

    .forums-ic-panel

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

/*

    The entire section containing the IC switch.

*/

.comment-create .forums-ic-panel 

{

    margin-bottom: 10px;

	padding: 0px;

}

/*

    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 

{

    width: 15%;

    float: left;

    clear: both;

	color: #000;

}

/*

    The selection area that contains the character

	and the relevant buttons.

*/

.comment-create .forums-ic-select 

{

    float: left;

    display: inline;

    clear: both;

    padding-left: 0px;

    padding-right: 0px;

}

/*

    The thing that shows the picture and current

	selected character. No padding.

*/

.comment-create .forums-ic-select .character_display ,

.comment-create .forums-ic-select .character_display  img

{

    margin-right: 10px;

	display: block;

	margin-bottom: 15px;

}

/*

    Affects both buttons.

*/

.comment-create .forums-ic-select .button 

{

    background-color: #000;

	color: #fff;

	margin: 0px;

}

.comment-create .forums-ic-select .button:hover 

{

    background-color: #000;

	color: #777;

}

/*

    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 

{

    margin-bottom: 10px;

	background-color: #fff;

	border-color: #000;

	border-radius: 0px;

	box-shadow: none;

}

/*

    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.

*/

.reveal-modal

{

    border-radius: 0px;

	border: 1px solid #000;

}

.select_character_panel,

.select_image_panel {}

/* title of the modal */

.select_character_panel h4,

.select_image_panel h4 

{

    margin-top: -20px;

}

/* selection area of the modal */

.select_character_panel .panel,

.select_image_panel .panel 

{

    border: 2px solid #000;

}

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

{

    background-color: #eee;

}

.select_character_panel .character-select-row  a

{

    color: #777;

}

.select_character_panel .character-select-row  a:hover

{

    color: #bbb;

}

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

{

    background-color: #000;

	color: #fff;

}

.select_character_panel .character-select-button:hover,

.select_image_panel .image-select-button:hover 

{

    color: #777;

}

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

    .forum-posts

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

.forum-posts hr { border-bottom: 1px solid #000; }

/*

    A container that holds each individual comment.

	Adjust the padding here, add a line to

	differentiate individual comments...

*/

.forum-posts 

{

    border-bottom: 1px solid #000;

}

/*

    Holds the user's avatar. Can be used to crop

	the image by way of overflow: hidden;.

*/

.forum-posts .forum-posts-sidebar 

{

    padding-left: 0px;

	padding-top: 20px;

}

/* Holds the main content of the post. */

.forum-posts .forum-post 

{

    padding-top: 20px;

}

/*

    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 

{

    text-transform: none;

	color: #333;

}

/*

    For styling the Edit/Delete buttons.

	[.label] gets both of them, while [.label.alert]

	only gets the delete button.

*/

.forum-posts .forum-post .label 

{

    float: right;

	clear: both;

	background-color: #fff;

	color: #777;

}

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

.forum-posts .forum-post .label:hover 

{

    color: #bbb;

}

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

.comment .comment-replies

{

    border-left: 0px;

}

.comment .button

{

    background-color: #000;

	color: #fff;

}

.comment .button:hover

{

    background-color: #000;

	color: #777;

}