Flexible Boxes (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

	Greys:

	#111

	#151515

	#222

	#777

	#ddd

	#eee

	Orange:

	#f08a24

	#f7ac29

	Blue:

	#008CBA

	#1CC7FF

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

/*

	Profile boxes!

	How to use:

	1. Comment and uncomment the following sections.

			What this does is make the main profile content transparent

			and adjust the margins so the boxes align nicely.

	2. Use the classes layout-box and layout-header (if you want headers),

	   here's an example:

	   <div class="layout-box">

			<div class="layout-header">

			<h1>HEADER TEXT GOES HERE</h1>

			</div>

			BOX CONTENT GOES HERE

	   </div>

	* Please note that you should only comment/uncomment the

	following sections if you're sure there's going to be

	content in the character's profile, otherwise the layout

	will mess up!

*/

/* comment out ******************/

	.character-profile .character-text

	{

		padding: 30px;

		background-color: #fff;

		margin-bottom: 10px;

	} 

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

/* uncomment ********************/

/*

	.character-profile .character-text-title

	{

		display: none;

	}

	.character-profile .character-recent-images

	{

		margin-top: -70px;

	}

*/

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

/*

	Background colours/images

*/

#container 

{	

	background-color: #c3dad8;

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

}

#header /* 900 x 145 */

{

	/*

		Default bg credit: http://-justinnyurr.tumblr.com/

	*/

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

	/*background-color: #c3dad8;*/

}

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

    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: #008CBA;

}

a:hover 

{

	color: #1CC7FF;

}

/* 

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

*/

#content h1, .panel h1 

{ 

	font-size: 25px;	

} 

#content h1, .panel h1, 

#content h2, .panel h2,

#content h3, .panel h3,

#content h4, .panel h4,

#content h5, .panel h5,

#content h6, .panel h6

{

	font-family: georgia;

	text-transform: lowercase;

	font-weight: normal;

}

.layout-header h1,

.layout-header h2,

.layout-header h3,

.layout-header h4,

.layout-header h5,

.layout-header h6

{

	color: #fff;

	font-style: italic;

}

.layout-header

{

	margin-left: -30px; 

	margin-right: -30px;

	margin-top: -30px;

	margin-bottom: 30px;

	padding: 20px 30px 20px 30px;

	background-color: #111;

	display: block;

}

.layout-box

{

	background-color: #fff;

	display: block;

	margin-left: -30px; 

	margin-right: -30px;

	margin-top: -30px;

	margin-bottom: 40px;

	padding: 30px;

}

/* 

    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 dotted #777;

}

/*

    p seems to crop up every now and then, so best to remove any

	padding whatsoever...

*/

p, #content p

{ 

	padding: 0px; 

	font-size: 12px;

}

#content

{

	font-size: 12px;

}

i, u, s, b,

p i, p u, p s, p b

{

	color: #777;

}

.th.radius, .panel.radius

{

	border-radius: 0px;

}

#sidebar .divider ,

#sidebar .display-user a

{

	background-color: #111;

}

.comment-create,

.characters-gallery,

.character-links-row,

.character-fields,

.character-links .forums-ic-panel,

.character-profile .character-fields,

.character-profile .character-recent-images,

.character-gallery,

.character-worlds

{

	padding: 30px;

	background-color: #fff;

	margin-bottom: 10px;

} 

.character-profile .character-text

{

	padding: 30px;

	margin-bottom: 10px;

}

.character-stats 

{

	padding: 20px;

	background-color: #fff;

	margin-bottom: 20px;

	text-align: center;

} 

.character-links .forums-ic-panel,

.character-stats 

{

	border-width: 50px 0px 0px 0px;

	border-top: 50px solid #111;

}

.character-profile .character-fields-title,

.character-profile .character-text-title,

.character-profile .character-recent-images-title

{

	color: #fff;

	margin-left: -30px; 

	margin-right: -30px;

	margin-top: -30px;

	margin-bottom: 30px;

	padding: 30px 20px 20px 30px;

	background-color: #111;

	display: block;

	font-style: italic;

	font-family: georgia;

	font-size: 30px;

	text-transform: lowercase;

	font-weight: normal;

}

.character-profile .character-gallery

{

	padding: 0px;

	background-color: transparent;

	margin: 0px;

	border: 0px;

}

.large-block-grid-6

{

	margin-left: 0px;

	margin-right: 0px;

}

.character-worlds

{

	border-top: 50px solid #111;

}

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

    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

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

#content .label.radius,

#content .label.radius a,

#content .label.radius:hover,

#content .label.radius:hover a,

{

	color: #fff;

}

/*

    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, #content .label,

#content .label a ,

#content .label i,

#content .label span

{

	color: #fff;

}

.label:hover {}

.label:hover a , #content .label:hover,

#content .label:hover a,

#content .label:hover a i,

#content .label:hover a span

{

	color: #1CC7FF;

}

/*

    .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: #f08a24;

}

#content .label.secondary:hover a,

#content .label.secondary:hover a i,

#content .label.secondary:hover a span

{

	color: #fdcf2e;

}

/*

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

#content .label.alert:hover 

{

	color: #fff;

}

/* 

    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;

	margin-top: 20px;

	margin-bottom: 20px;

}

/* 

    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 

{	

	min-width: 1000px;

}

/*

    Contains everything except the header and footer.

	(i.e. it contains #sidebar and #content)

	Can squash for a narrower content area.

*/

#main 

{

	width: 900px;

	margin-left: auto;

	margin-right: auto;

	margin-top: 20px;

	background-color: transparent;

}

/*

    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: 685px;

	padding: 0px;

}

/*

    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 

{

	width: 900px;

	margin-left: auto;

	margin-right: auto;

	padding-top: 100px;

	height: 145px;

	padding-left: 15px;

	padding-right: 15px;

	border-width: 0px 1px 1px 1px;

	border-style: dotted;

	border-color: #777;

}

/* 

    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;

	font-size: 30px;

	font-family: georgia;

	text-transform: lowercase;

	padding-left: 0px;

	font-style: italic;

}

#header a:hover,

#header .dropdown li:hover > a

{

	color: #fdcf2e;

}

/* Dropdown links */

#header .dropdown li 

{

	background-color: #151515;

	border-top: 1px dotted #777;

	text-align: left;

	line-height: 1.2em;

	min-height: 25px;

	padding: 5px 7px 5px 7px;

}

#header .dropdown li a

{

	font-size: 15px;

	line-height: 1.2em;

	font-style: normal;

}

#header .dropdown li:hover

{

	background-color: #222;

}

/* Vertical divider; border-right */

#header li.divider 

{ 

	/*border-right: 1px solid #000;*/ 

	display: none;

}

/* top-left homepage link */

#header .title-area a

{

	padding-left: 0px;

	color: #f08a24;

}

/* user icon */

.top-bar-section .left span,

#header img,

#header a ::after, 

#header li ::after

{

	display: none;

	padding: 0px !important;

}

/*

    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, #header .buttons

{

	line-height: 35px;

}

#header .buttons

{

	margin-top: -2px;

}

#header .button

{

	padding: 0px;

	margin: 0px 10px 0px 0px;

	color: #F08A24;

}

#header .button:hover

{

	color: #fdcf2e;

}

/*

    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 

{

	background-color: transparent;

}

/*

    Only the left side of the header bar items,

	excluding the top left homepage link.

	Floats left.

*/

.top-bar-section .left  li a

{

	padding-left: 0px;

}

/*

    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.

*/

#header .user-link

{

	margin-right: -35px;

	text-align: 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 

{

	width: 200px;

	padding: 0px;

	background-color: transparent;

}

/*

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

#sidebar li i

{

	display: none;

}

/*

    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,

#sidebar .header

{

	background-color: #fff;

	padding: 0px 5px 0px 5px;

}

#sidebar li a,

#sidebar .header a

{

	border-top: 1px dotted #ddd;

	font-family: georgia;

	line-height: 1.2em;

	padding: 5px 10px 5px 10px;

}

/*

    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 

{

	padding: 0px;

}

/*

    The box that says "User".

*/

#sidebar .header 

{

	margin-top: 0px;

	margin-bottom: 10px;

	border: 0px;

}

#sidebar .header a

{

	font-weight: normal;

	color: #008CBA;

}

#sidebar .header a i

{

	display: inline-block;

	color: #008CBA;

}

#sidebar .header:hover a,

#sidebar .header:hover a i

{

	color: #1CC7FF;

}

/*

    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,

#sidebar .display-character a 

{

	font-size: 0px;

	padding: 10px 0px 10px 0px;

	text-align: center;

	border: 0px;

	margin: 0px -5px 0px -5px;

	background-color: #111;

}

#sidebar .display-user-tiny a img,

#sidebar .display-character a img

{

	margin-left: auto;

	margin-right: auto;

	border: 5px solid #fff;

	background-color: #fff;

	min-width: 100px;

	min-height: 100px;

	max-width: 100px;

	max-height: 100px;

}

/*

    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 

{

	background-color: #fff;

	background-image: none;

	margin: 0px;

	border: 0px;

	padding: 15px 10px 15px 10px;

}

#sidebar .blurb i

{

	display: inline-block;

}

#sidebar .blurb p

{

	line-height: 1.15em;

}

/*

    The dividers.

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

*/

#sidebar .divider 

{

	margin-top: 10px;

	height: 32px;

	margin-bottom: 0px;

	border: 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 a

{

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

	background-repeat: no-repeat;

	background-position: left center; 

	padding-left: 25px;

}

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

    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 

{

	width: 150px;

	margin-right: -155px;

}

/* 

    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 

{

	border-top: 50px solid #111;

}

/* 

    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 i { color: #fff; }

.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 

{

	width: 100%;

}

/*

    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 

{

	float: left;

}

/*

    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 

{

	border-top: 50px solid #111;

}

/*

    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 

{

	border-top: 50px solid #111;

}

.comments hr

{

	display: none;

}

.comment

{

	overflow: hidden;

}

.comments > .comment

{

	margin-bottom: 15px;

}

.comment .small-11

{

	width: 100%;

}

.comment .indent

{

	padding-left: 20px;

}

.comment-replies

{

	border-left: 0px;

}

/*

    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.

*/

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

	margin-right: 10px;

}

.select_character, .select_image

{

    float: right;

}

.select_character

{

    clear: right;

}

/*

    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 

{

	background-color: #111;

	margin-bottom: 10px;

}

/*

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

	the image by way of overflow: hidden;.

*/

.forum-posts .forum-posts-sidebar img

{

	border: 5px solid #fff;

	background-color: #fff;

	margin-left: auto;

	margin-right; auto;

}

.forum-posts .forum-posts-sidebar

{

	padding-left: 10px;

	padding-right: 10px;

	padding-top: 10px;

}

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

.forum-posts .forum-post 

{

	background-color: #fff;

	padding: 10px;

}

/*

    Notes who (and which character if applicable) posted

	the comment, and when. 

	The date can be styled with abbr.

*/

.forum-post-caption

{

    width: 50%;

	font-size: 0px;

}

.forum-post-caption a

{

	font-size: 10px;

	font-family: georgia;

}

.forum-post-caption .display-user a

{

	display: block;

	text-transform: lowercase;

	font-size: 30px;

	font-style: italic;

	line-height: 1.1em;

}

.forum-post-caption .display-user a .fi-star,

.forum-post-caption .display-user a .fi-torso,

.forum-post-caption .display-user a .fi-crown

{

	color: #008CBA;

}

.forum-post-caption .display-user a:hover,

.forum-post-caption .display-user a:hover .fi-star,

.forum-post-caption .display-user a:hover .fi-torso,

.forum-post-caption .display-user a:hover .fi-crown

{

	color: #1CC7FF;

}

.forum-post-caption .datetime

{

	font-size: 10px;

	border-bottom: 0px;

	color: #777;

}

.forum-post-caption .fi-link

{

	margin-right: 5px;

}

/*

    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-post-content

{

    margin-top: 2px;

	background-color: transparent;

	border-width: 1px 0px 0px 0px;

	border-top: 1px dotted #777;

	margin-top: 10px;

}

.forum-post .label,

.forum-post .label.alert

{

    margin-top: -21px;

}