Flexible Boxes (CSS: profile)

Posted: 17 Sep 2015 10:38:52PM in Flexible Boxes
Last edited: 17 Sep 2015 11:03:43PM
1
/***************************************************************************
2
3
    profile css by cy @ toyhou.se
4
	
5
	Contents:
6
	- General properties
7
	- Global IDs
8
	  > .button variants
9
	  > .display-user
10
	  > .label variants
11
	  > .panel
12
	  > .th, .thumb
13
	  > pagination
14
	  > grids
15
	- Containers
16
	  > #container
17
	  > #main
18
	  > #content
19
	  > #footer
20
	- Header
21
	- Sidebar
22
	- Profile page [.profile-content]
23
	  > .profile-column
24
	   >> .profile-bulletin
25
	   >> .profile-feature
26
	   >> .profile-characters
27
	  > .profile-column
28
	   >> .profile-comments
29
	- Comments
30
	  > .comment-create
31
	   >> .forums-ic-panel
32
	  > .reveal-modal
33
	  > .forum-posts
34
	   >> .forum-posts-sidebar
35
	   >> .forum-post
36
	- Bulletins [.bulletins-index] and latest bulletins
37
	  > .bulletins-post
38
	   >> .bulletin-header
39
	   >> .bulletin-post
40
	- Characters [.profile-characters]
41
	  > .profile-characters-folders
42
	  > .profile-characters-filters
43
	   >> .sub-nav
44
	  > .characters-gallery
45
	   >> .thumb-character
46
	- Images
47
	  > .profile-gallery
48
	- Links
49
	  > .profile-links
50
	   >> .character-links-row
51
	- Worlds
52
	  > .profile-groups
53
	- Favourites
54
	  > .profile-creations
55
	- Designs
56
	  > .profile-creations
57
	- Art
58
	  > .profile-gallery
59
	- Stats
60
	  > .character-fields
61
	  > #modal-default
62
63
***************************************************************************/
64
65
/***************************************************************************
66
67
    Options
68
	
69
    Colours used
70
	
71
	Greys:
72
	#111
73
	#151515
74
	#222
75
	#777
76
	#ddd
77
	#eee
78
	
79
	Orange:
80
	#f08a24
81
	#f7ac29
82
	
83
	Blue:
84
	#008CBA
85
	#1CC7FF
86
	
87
***************************************************************************/
88
89
/*
90
91
	Profile boxes!
92
	
93
	How to use:
94
	1. Comment and uncomment the following sections.
95
			What this does is make the main profile content transparent
96
			and adjust the margins so the boxes align nicely.
97
	2. Use the classes layout-box and layout-header (if you want headers),
98
	   here's an example:
99
	   
100
	   <div class="layout-box">
101
			<div class="layout-header">
102
			<h1>HEADER TEXT GOES HERE</h1>
103
			</div>
104
			BOX CONTENT GOES HERE
105
	   </div>
106
	
107
	* Please note that you should only comment/uncomment the
108
	following sections if you're sure there's going to be
109
	content in the character's profile, otherwise the layout
110
	will mess up!
111
	
112
*/
113
114
/* comment out ******************/
115
	.profile-content
116
	{
117
		background-color: #fff;
118
	}
119
/********************************/
120
121
/* uncomment ********************/
122
/*
123
	.profile-column
124
	{
125
		margin-top: -90px;
126
		margin-bottom: 100px;
127
	}
128
*/
129
/********************************/
130
131
/*
132
	Background colours/images
133
*/
134
#container 
135
{	
136
	background-color: #c3dad8;
137
	/*background-image: url('http://i.imgur.com/PMFQpKB.png');*/
138
}
139
#header /* 900 x 145 */
140
{
141
	/*
142
		Default bg credit: http://-justinnyurr.tumblr.com/
143
	*/
144
	background-image: url('http://i.imgur.com/PMFQpKB.png');
145
	/*background-color: #c3dad8;*/
146
}
147
148
/***************************************************************************
149
150
    General properties
151
	
152
***************************************************************************/
153
154
/* 
155
    Both must be overwritten or hover colour will be default blue.
156
	However, if [.display-user a] is set, that will take priority
157
*/
158
a, a:link, a:visited 
159
{
160
	color: #008CBA;
161
}
162
a:hover 
163
{
164
	color: #1CC7FF;
165
}
166
167
/* 
168
    All timestamps
169
    Attempts thus far to remove the dotted 
170
    bottom line have been unsuccessful 
171
*/
172
abbr 
173
{
174
	
175
}
176
177
/*
178
    padding is asymmetrical by default. (9 20 0 19)
179
*/
180
blockquote
181
{
182
	padding-bottom: 9px;
183
}
184
185
/*
186
    Both the basic headers and the .panel headers need
187
	to be modified at the same time since it doesn't
188
	cascade into .panel, so bulletins etc. aren't affected
189
	Oddly, things such as links do gain the changes...
190
*/
191
#content h1, .panel h1 
192
{ 
193
	font-size: 25px;	
194
} 
195
#content h1, .panel h1, 
196
#content h2, .panel h2,
197
#content h3, .panel h3,
198
#content h4, .panel h4,
199
#content h5, .panel h5,
200
#content h6, .panel h6
201
{
202
	font-family: georgia;
203
	text-transform: lowercase;
204
	font-weight: normal;
205
}
206
207
.layout-header h1,
208
.layout-header h2,
209
.layout-header h3,
210
.layout-header h4,
211
.layout-header h5,
212
.layout-header h6
213
{
214
	color: #fff;
215
	font-style: italic;
216
}
217
218
.layout-header
219
{
220
	margin-left: -30px; 
221
	margin-right: -30px;
222
	margin-top: -30px;
223
	margin-bottom: 30px;
224
	padding: 20px 30px 20px 30px;
225
	background-color: #111;
226
	display: block;
227
}
228
229
.layout-box
230
{
231
	background-color: #fff;
232
	display: block;
233
	margin-left: -30px; 
234
	margin-right: -30px;
235
	margin-top: -30px;
236
	margin-bottom: 40px;
237
	padding: 30px;
238
}
239
240
/* 
241
    If hr doesn't work, add <p></p> tags
242
    It seems to work fine for content,
243
    but not in the sidebar blurb
244
	
245
    default values: 
246
	margin-top: 20px;	
247
	border-top: 1px;	
248
	margin-bottom: 19px;	
249
*/
250
hr 
251
{
252
	border-top: 1px dotted #777;
253
}
254
255
/*
256
    p seems to crop up every now and then, so best to remove any
257
	padding whatsoever...
258
*/
259
p, #content p
260
{ 
261
	padding: 0px; 
262
	font-size: 12px;
263
}
264
#content
265
{
266
	font-size: 12px;
267
}
268
269
i, u, s, b,
270
p i, p u, p s, p b
271
{
272
	color: #777;
273
}
274
275
.th.radius, .panel.radius
276
{
277
	border-radius: 0px;
278
}
279
280
#sidebar .divider ,
281
#sidebar .display-user a
282
{
283
	background-color: #111;
284
}
285
.profile-bulletin-content,
286
.profile-feature,
287
.profile-column .profile-characters,
288
.comment-create,
289
.bulletins-post,
290
.bulletin .bulletin-post,
291
.profile-characters-folders,
292
.profile-characters-filters,
293
.characters-gallery,
294
.character-links-row,
295
.profile-groups,
296
.profile-creations,
297
.profile-gallery,
298
.character-fields
299
{
300
	padding: 30px;
301
	background-color: #fff;
302
	margin-bottom: 10px;
303
} 
304
305
/***************************************************************************
306
307
    Global IDs
308
	
309
***************************************************************************/
310
311
/************************************************
312
    .button variants
313
	- [button] by itself cannot be modified
314
	- modal buttons are more specific
315
************************************************/
316
/*
317
    .button affected areas:
318
	- only the "Post Comment" buttons
319
*/
320
.button {}
321
.button:hover {}
322
323
/*
324
    .button.secondary affected areas:
325
	- Worlds: "Save Worlds"
326
	- Comments: "Select Character", "Select Image"
327
*/
328
.button.secondary {}
329
.button.secondary:hover {}
330
331
/************************************************
332
    .display-user
333
************************************************/
334
335
/* this affects any usernames */
336
.display-user a {}
337
.display-user a:hover {}
338
339
/************************************************
340
    .label variants
341
	:hover (without using a:hover) is enough
342
	for changing the hover text colour.
343
	[a] does not affect label text
344
************************************************/
345
346
#content .label.radius,
347
#content .label.radius a,
348
#content .label.radius:hover,
349
#content .label.radius:hover a,
350
{
351
	color: #fff;
352
}
353
354
#content .profile-characters .thumb-caption .label.muted.favorited,
355
#content .profile-characters .thumb-caption .label.muted.favorited i
356
{
357
	color: #f7ac29;
358
}
359
360
#content .profile-characters .thumb-caption .label.muted,
361
#content .profile-characters .thumb-caption .label.muted i
362
{
363
	color: #777;
364
}
365
366
367
/*
368
    I've found that using .label in specific places will affect
369
	all labels in that container, but using the generic [.label]
370
	will affect only certain labels.
371
372
    .label affected areas:
373
	- Profile: "Edit" labels, character name labels
374
	- Bulletins: "Edit" labels (both main and individual posts)
375
	- Characters: character name labels
376
	- Designs: character name labels
377
	- Images: character name labels
378
	- Favourites: character name labels
379
	- Comments: "Edit" labels
380
	
381
	To do hover text colour for character names, use [.label a]
382
	To do hover text colour for edit labels, use [.label] (same for .alert)
383
	Or: if the label itself isn't a link, use [.label a].
384
*/
385
.label {}
386
.label a, #content .label,
387
#content .label a ,
388
#content .label i,
389
#content .label span
390
{
391
	color: #fff;
392
}
393
394
.label:hover {}
395
.label:hover a , #content .label:hover,
396
#content .label:hover a,
397
#content .label:hover a i,
398
#content .label:hover a span
399
{
400
	color: #1CC7FF;
401
}
402
403
/*
404
    .label.primary affected areas:
405
	- Profile: recent characters character name labels (but not featured)
406
	- Characters: character name labels
407
	- Designs: character name labels
408
	- Favourites: character name labels
409
	
410
	.label is a better choice unless specificity is required.
411
*/
412
.label.primary {}
413
.label.primary:hover {}
414
415
/*
416
    .label.secondary affected areas:
417
	- Profile: latest bulletin "# Comments" label, 
418
	           recent characters username labels
419
	- Bulletins: "# Comments" label (both main and individual posts)
420
	- Characters: username labels
421
	- Worlds: member rank label
422
	- Designs: username labels
423
	- Images: "Edit" labels
424
	- Favourites: username labels
425
*/
426
.label.secondary 
427
{
428
	background-color: #f08a24;
429
}
430
#content .label.secondary:hover a,
431
#content .label.secondary:hover a i,
432
#content .label.secondary:hover a span
433
{
434
	color: #fdcf2e;
435
}
436
437
/*
438
    .label.alert affected areas:
439
	- Profile: all the labels that say "Delete"
440
	- Bulletins: "Delete" labels
441
	- Comments: "Delete" labels
442
	
443
	To do hover text colour, don't use [a]
444
*/
445
.label.alert {}
446
#content .label.alert:hover 
447
{
448
	color: #fff;
449
}
450
451
/* 
452
    only appears on characters page; 
453
    one each for each counter icon + number
454
*/
455
.label.muted {}
456
457
/************************************************
458
    .panel
459
************************************************/
460
461
/* 
462
    .panel affected areas:
463
	- Profile: latest bulletin, featured character, recent characters
464
	- Bulletins: bulletin backgrounds
465
	- Comments: comments (comment boxes)
466
	- Modals: character selection (scrolling area),
467
	          image selection (scrolling area)
468
*/
469
.panel {}
470
471
/************************************************
472
    .th, .thumb
473
************************************************/
474
475
/* 
476
    .th affected areas:
477
    - all character/world thumbnail image boxes
478
    
479
    Use this to modify box-shadow and the fat white border,
480
	as well as constrain the image's size
481
*/
482
.th {}
483
.th:hover {}
484
485
/*
486
    .thumb affected areas:
487
	- the entire section enclosing a character/world
488
	- 3 versions: padded (no padding-top), margin-bottom, no padding/margin
489
	- Profile: featured (images only (margin-bottom); excludes character),
490
	           recent characters
491
	- Characters: characters
492
	- Worlds: worlds (no padding)
493
	- Images: images (margin-bottom)
494
	- everything else is padded
495
*/
496
.thumb {}
497
498
/************************************************
499
    pagination
500
************************************************/
501
502
/* non-active page numbers */
503
ul.pagination li a {}
504
ul.pagination li a:hover  {}
505
506
/* current page number, modify background colour here */
507
ul.pagination li.current a {}
508
ul.pagination li.current a:hover {}
509
510
/* note that these are different */
511
ul.pagination li {}
512
ul.pagination li:hover {}
513
ul.pagination li.current {}
514
ul.pagination li.current:hover {}
515
516
/************************************************
517
    grids
518
************************************************/
519
520
/*
521
    ul.small-block-grid-6
522
	
523
    Used for all the pages. 
524
	6 to a row, width of each li is then 16.6%.
525
	With fixed margins ~16.3% seems to work fine.
526
	For some reason, has -10px left and right margins.
527
	(To push it past #content's padding all the way to the edges?)
528
	
529
	On the Characters page, it's contained within 
530
	an uneditable fieldset that has 20px margins,
531
	so it's padded an extra 10px from #content's edges by default.
532
	To overcome this and reach #content, margins should be -20px
533
	instead of the forced 0px here.
534
	
535
	Generally, styling the grids means finishing 
536
	Worlds/Designs/Images/Favourites all at once, or at least
537
	very quickly.
538
*/
539
ul.small-block-grid-6
540
{
541
    margin-left: 0px;
542
	margin-right: 0px;
543
	margin-top: 20px;
544
	margin-bottom: 20px;
545
}
546
547
/* 
548
    ul.small-block-grid-6 li
549
	
550
	In the galleries, is a better option than .thumb and
551
	has more power than .thumb does.
552
	It's a better option because the padding is consistent.
553
	However, it doesn't affect the profile page.
554
	
555
	Profile recent characters uses small-block-grid-3
556
	Profile featured character uses large-block-grid-6 (images only)
557
	
558
    remember that Characters page has the extra 
559
	10px of padding all round though
560
*/
561
ul.small-block-grid-6 li 
562
{
563
    padding-top: 10px;
564
}
565
566
/***************************************************************************
567
568
    Containers
569
	
570
***************************************************************************/
571
572
/* 
573
    Contains everything on the page.
574
	Shrinking this causes stuff to overflow.
575
	Nice for backgrounds but don't touch the width/height.
576
*/
577
#container 
578
{	
579
	min-width: 1000px;
580
}
581
582
/*
583
    Contains everything except the header and footer.
584
	(i.e. it contains #sidebar and #content)
585
	Can squash for a narrower content area.
586
*/
587
#main 
588
{
589
	width: 900px;
590
	margin-left: auto;
591
	margin-right: auto;
592
	margin-top: 20px;
593
	background-color: transparent;
594
}
595
596
/*
597
    Contains the main content of the page.
598
	Note that the padding is compounded with the container
599
	that represents the current page's content.
600
	
601
	Doing things like changing the text colour here will affect
602
	text in created divs, but not text in panels and etc.
603
	It also affects world names on the Worlds page.
604
	Better to do text colour changes in specific places.
605
*/
606
#content 
607
{
608
	width: 685px;
609
	padding: 0px;
610
}
611
612
/*
613
    Generally not useful for layouts unless something to meet
614
	the lower part of the page is required. 
615
	It contains the profiler which I'll also turn off here.
616
*/
617
#footer  { display: none; }
618
.profiler { display: none; }
619
620
/***************************************************************************
621
622
    Header
623
	
624
***************************************************************************/
625
626
/*
627
    I have no idea what to do with this sometimes;
628
	it contains important functions so getting rid of it
629
	isn't a good idea but it's also too thick for layouts sometimes.
630
*/
631
#header 
632
{
633
	width: 900px;
634
	margin-left: auto;
635
	margin-right: auto;
636
	padding-top: 100px;
637
	height: 145px;
638
	padding-left: 15px;
639
	padding-right: 15px;
640
	border-width: 0px 1px 1px 1px;
641
	border-style: dotted;
642
	border-color: #777;
643
}
644
645
/* 
646
    All header buttons including the dropdown 
647
	If transparent, background colour will show through.
648
	However, dropdown li will also become transparent
649
	and will need to be set with [.dropdown li]
650
	Both [#header a] and [#header li] need to be transparent.
651
	Background colour can then be set on #header.
652
*/
653
#header a, #header li
654
{ 
655
	background-color: transparent;
656
	font-size: 30px;
657
	font-family: georgia;
658
	text-transform: lowercase;
659
	padding-left: 0px;
660
	font-style: italic;
661
}
662
#header a:hover,
663
#header .dropdown li:hover > a
664
{
665
	color: #fdcf2e;
666
}
667
668
/* Dropdown links */
669
#header .dropdown li 
670
{
671
	background-color: #151515;
672
	border-top: 1px dotted #777;
673
	text-align: left;
674
	line-height: 1.2em;
675
	min-height: 25px;
676
	padding: 5px 7px 5px 7px;
677
}
678
#header .dropdown li a
679
{
680
	font-size: 15px;
681
	line-height: 1.2em;
682
	font-style: normal;
683
}
684
#header .dropdown li:hover
685
{
686
	background-color: #222;
687
}
688
689
/* Vertical divider; border-right */
690
#header li.divider 
691
{ 
692
	/*border-right: 1px solid #000;*/ 
693
	display: none;
694
}
695
696
/* top-left homepage link */
697
#header .title-area a
698
{
699
	padding-left: 0px;
700
	color: #f08a24;
701
}
702
703
/* user icon */
704
.top-bar-section .left span,
705
#header img,
706
#header a ::after, 
707
#header li ::after
708
{
709
	display: none;
710
	padding: 0px !important;
711
}
712
713
/*
714
    To change the size of the bar visually 
715
	(padding and font sizes not included)
716
	all these need to be changed
717
	Even if #header a is transparent it needs
718
	to be resized otherwise dropdowns will be
719
	impossible to use
720
	
721
	Issue: I don't know how to deal with the dropdown arrow
722
*/
723
/*#header, #header a, #header li, #header .title-area
724
{
725
    height: 30px;
726
}*/
727
728
/*
729
    Notif buttons.
730
	Padding: 5 10 5 10
731
	Margin: 5 0 0 0
732
*/
733
#header .button, #header .buttons
734
{
735
	line-height: 35px;
736
}
737
#header .buttons
738
{
739
	margin-top: -2px;
740
}
741
#header .button
742
{
743
	padding: 0px;
744
	margin: 0px 10px 0px 0px;
745
	color: #F08A24;
746
}
747
#header .button:hover
748
{
749
	color: #fdcf2e;
750
}
751
752
/*
753
    Contains all the header bar stuff.
754
	With some resizing of #header it's possible to
755
	set up a header image while preserving the header bar.
756
	#header's background goes under this.
757
	
758
	I haven't yet figured out how to adjust the padding
759
	of the dropdown buttons.
760
*/
761
.top-bar-section 
762
{
763
	background-color: transparent;
764
}
765
766
/*
767
    Only the left side of the header bar items,
768
	excluding the top left homepage link.
769
	Floats left.
770
*/
771
.top-bar-section .left  li a
772
{
773
	padding-left: 0px;
774
}
775
776
/*
777
    Only the right side of the header bar items.
778
	Floats right.
779
	
780
	At the moment there's only one item so 
781
	#header .user-link does the same thing.
782
*/
783
#header .user-link
784
{
785
	margin-right: -35px;
786
	text-align: right;
787
}
788
789
/***************************************************************************
790
791
    Sidebar
792
	
793
***************************************************************************/
794
795
/*
796
    The whole sidebar.
797
	All the li are transparent, so changing the
798
	background colour affects everything except
799
	for the box that says "User" (.header).
800
	
801
	Changing the text colour affects blurb text.
802
	Padding pads all the content.
803
	Default width is 16.6667%.
804
*/
805
#sidebar 
806
{
807
	width: 200px;
808
	padding: 0px;
809
	background-color: transparent;
810
}
811
812
/*
813
    Changing the colour affects all the link text in the sidebar.
814
	Note that [.side-nav a] doesn't do the same.
815
	Neither does [.side-nav li a].
816
*/
817
#sidebar a {}
818
#sidebar a:hover {}
819
820
#sidebar li i
821
{
822
	display: none;
823
}
824
825
/*
826
    Changing the background colour affects only the .header,
827
	user link, blurb, and buttons. 
828
	Inserting padding here will also affect the .dividers so
829
	be careful...
830
	
831
	Changing colour on hover here will affect every li in the
832
	sidebar, including the blurb (which is probably not the
833
	intended effect). So, the hover is put in [a] rather than [li].
834
*/
835
#sidebar li 
836
{
837
	background-color: #fff;
838
	padding: 0px 5px 0px 5px;
839
}
840
#sidebar li a
841
{
842
	border-top: 1px dotted #ddd;
843
	font-family: georgia;
844
	line-height: 1.2em;
845
	padding: 5px 10px 5px 10px;
846
}
847
848
/*
849
    This contains only the part of the sidebar that has any content
850
	(as opposed to #sidebar which stretches the length of the page)
851
	
852
	It has padding at the top and bottom. #sidebar has no padding.
853
*/
854
.side-nav 
855
{
856
	padding: 0px;
857
}
858
859
/*
860
    The box that says "User".
861
*/
862
#sidebar .header 
863
{
864
	display: none;
865
}
866
867
/*
868
    The username + avatar box.
869
	I recall having weird problems when doing up Jay's CSS,
870
	but at the moment there doesn't seem to be any problem setting
871
	a background image for this.
872
*/
873
#sidebar .display-user a 
874
{
875
	font-size: 0px;
876
	padding: 10px 0px 10px 0px;
877
	text-align: center;
878
	border: 0px;
879
	margin: 0px -5px 0px -5px;
880
	min-height: 110px;
881
}
882
#sidebar .display-user img
883
{
884
	margin-left: auto;
885
	margin-right: auto;
886
	border: 5px solid #fff;
887
	background-color: #fff;
888
	min-width: 100px;
889
	min-height: 100px;
890
}
891
892
/*
893
    The blurb.
894
	<hr> seems to require being between <p></p> tags.
895
	
896
	Note! Links in the blurb will appear like the other
897
	buttons in the sidebar, i.e. they will stretch the
898
	length of the sidebar and have padding. If this is not
899
	what you want, add this (will affect ALL links in the blurb):
900
	
901
	#sidebar .blurb a {display: inline; padding: 0px;}
902
*/
903
#sidebar .blurb 
904
{
905
	background-color: #fff;
906
	background-image: none;
907
	margin: 0px;
908
	border: 1px solid #eee;
909
	padding: 15px 10px 15px 10px;
910
}
911
#sidebar .blurb i
912
{
913
	display: inline-block;
914
}
915
#sidebar .blurb p
916
{
917
	line-height: 1.15em;
918
}
919
920
/*
921
    The dividers.
922
	5px of padding on top and below, border is border-top.
923
*/
924
#sidebar .divider 
925
{
926
	margin-top: 10px;
927
	height: 32px;
928
	margin-bottom: 0px;
929
	border: 0px;
930
}
931
932
/*
933
    It's not possible to touch any of the other buttons individually.
934
	However it's possible to mess with the little icons...
935
*/
936
#sidebar i {}
937
938
/*
939
    The currently active page.
940
	Use [.active a] to change the text colour.
941
*/
942
#sidebar .active a
943
{
944
	background-image: url('http://i.imgur.com/7tXSD1Y.png');
945
	background-repeat: no-repeat;
946
	background-position: left center; 
947
    
948
	padding-left: 25px;
949
}
950
951
/***************************************************************************
952
953
    Profile page
954
	
955
***************************************************************************/
956
957
/* 
958
    .profile-content
959
	
960
	Main editable content of the profile.
961
	Separate from the columns below.
962
	I usually throw in an extra div inside, just in case
963
	I want to make more to abuse later.
964
	By default it's padded 10 10 10 10, but to maintain
965
	consistency I usually turn off the padding and add it 
966
	in #content instead.
967
*/
968
.profile-content 
969
{ 
970
	padding: 30px;
971
	margin-bottom: 30px;
972
}
973
974
/************************************************
975
    .profile-column
976
************************************************/
977
/*
978
    The two columns below the editable profile content.
979
	Not a part of [.profile-content].
980
	There doesn't seem to be a way to differentiate between the two.
981
	Merging them into a straight line is simple: width: 100%;
982
	
983
	It may be a good idea to apply thumbnail/label
984
	styling in here.
985
*/
986
.profile-column 
987
{
988
	width: 100%;
989
	padding: 0px;
990
}
991
992
/* 
993
    .profile-column headings 
994
	This overwrites the default h1. 
995
	However, it also overwrites the h1 in the panel, so 
996
	overwrite it again.
997
*/
998
.profile-column h1 {}
999
.profile-column .panel h1 {}
1000
1001
/*
1002
    .profile-column .panel
1003
	Simply, all the panels in the columns.
1004
*/
1005
.profile-column .panel {}
1006
1007
/************************************************
1008
    .profile-bulletin
1009
************************************************/
1010
1011
/*
1012
    .profile-column .profile-bulletin
1013
	
1014
	The bulletin section, which is in the same column as
1015
	featured and recent characters. Includes the header.
1016
	.profile-bulletin-content is the panel that
1017
	contains everything but the header.
1018
	
1019
	The divs appear to be the same as the bulletin pages',
1020
	so any styling done on those and not specific to only
1021
	the bulletin pages will apply here as well.
1022
	I'm unsure if ".profile-column" is required,
1023
	but just to be safe...
1024
*/
1025
.profile-column .profile-bulletin {}
1026
.profile-column .profile-bulletin h1 
1027
{
1028
	display: none;
1029
}
1030
.profile-column .profile-bulletin .panel h1 
1031
{
1032
	display: block;
1033
}
1034
.profile-column .profile-bulletin-content {}
1035
1036
/************************************************
1037
    .profile-feature
1038
************************************************/
1039
/*
1040
    The featured character section. 
1041
	Only the images are in a grid.
1042
	The character itself isn't bounded by anything.
1043
	The dividing line is a hr.
1044
	The images are inside [.profile-feature-gallery].
1045
	Trivia: the image gallery thumbs don't have rounded corners
1046
	
1047
	.profile-feature .th - all thumbnails
1048
	.profile-feature .profile-feature-gallery .th - only image gallery thumbs
1049
	
1050
	.profile-column .th - all thumbs on the profile page
1051
	^ may be convenient
1052
*/
1053
.profile-column .profile-feature {}
1054
.profile-column .profile-feature h1,
1055
.profile-column .profile-characters h1
1056
{
1057
	color: #fff;
1058
	margin-left: -30px; 
1059
	margin-right: -30px;
1060
	margin-top: -30px;
1061
	margin-bottom: 30px;
1062
	padding: 30px 20px 20px 30px;
1063
	background-color: #111;
1064
	display: block;
1065
	font-style: italic;
1066
}
1067
.profile-column .profile-comments > h1
1068
{
1069
	color: #fff;
1070
	padding: 30px 20px 20px 30px;
1071
	background-color: #111;
1072
	display: block;
1073
	font-style: italic;
1074
	margin-bottom: 0px;
1075
}
1076
1077
.profile-feature .profile-feature-content.panel li
1078
{
1079
	float: none;
1080
	display: inline-block;
1081
	width: 16%;
1082
}
1083
1084
/************************************************
1085
    .profile-characters
1086
************************************************/
1087
/*
1088
    The recent characters section.
1089
	Much like the above...
1090
	Character names are .label,
1091
	usernames are .label.secondary.
1092
*/
1093
.profile-column .profile-characters {}
1094
1095
.profile-column .profile-characters-content,
1096
.profile-column .profile-feature-content
1097
{
1098
	background-color: transparent;
1099
	border: 0px;
1100
	padding: 0px;
1101
	margin: 0px;
1102
}
1103
1104
/************************************************
1105
    .profile-comments
1106
************************************************/
1107
/*
1108
    Not much has to be done here since it's handled
1109
	in the regular comments styling.
1110
	The column that holds this floats right and
1111
	can't be forced to float left or none.
1112
	Since the columns aren't differentiated it also
1113
	means that column locations can't be switched.
1114
*/
1115
.profile-column .profile-comments .comments
1116
{
1117
	border: 0px;
1118
}
1119
1120
/***************************************************************************
1121
1122
    Comments
1123
	
1124
***************************************************************************/
1125
/*
1126
	  > .comment-create
1127
	   >> .forums-ic-panel
1128
	  > .reveal-modal
1129
	  > .forum-posts
1130
	   >> .forum-posts-sidebar
1131
	   >> .forum-post
1132
*/
1133
1134
/* 
1135
    Comments container.
1136
	If the divider hr needs to be modified, do it here (.comments hr)
1137
	
1138
	Note that no styling is applied to specific bulletin pages,
1139
	so nothing will happen on there...
1140
*/
1141
.comments 
1142
{
1143
	border-top: 50px solid #111;
1144
}
1145
.comments hr
1146
{
1147
	display: none;
1148
}
1149
1150
.comment
1151
{
1152
	overflow: hidden;
1153
}
1154
1155
.comments > .comment
1156
{
1157
	margin-bottom: 15px;
1158
}
1159
1160
.comment .small-11
1161
{
1162
	width: 100%;
1163
}
1164
.comment .indent
1165
{
1166
	padding-left: 20px;
1167
}
1168
1169
.comment-replies
1170
{
1171
	border-left: 0px;
1172
}
1173
1174
/*
1175
    The section for making comments.
1176
    The important part is the IC switch + hidden components.
1177
*/
1178
.comment-create {}
1179
1180
/************************************************
1181
    .forums-ic-panel
1182
************************************************/
1183
1184
/*
1185
    The entire section containing the IC switch.
1186
*/
1187
.comment-create .forums-ic-panel {}
1188
1189
/*
1190
    It didn't use to be, but now it's of an appropriate width.
1191
	The switch area can be reached with [.switch],
1192
	but there's no point since the colour is dependent on 
1193
	[label], which cannot be edited (I think).
1194
	Things to think of: colour, font.
1195
*/
1196
.forums-ic-switch
1197
{
1198
    float: left;
1199
    width: 4em;
1200
    padding-right: 0px;
1201
    padding-left: 0px;
1202
 
1203
}
1204
.forums-ic-select
1205
{
1206
    float: right;
1207
    width: auto !important;
1208
    padding-right: 0px;
1209
    text-align: right;
1210
}
1211
.forums-ic-select .button
1212
{
1213
    margin-right: 0px;
1214
}
1215
 
1216
.character_display
1217
{
1218
    float: right;
1219
    clear: both;
1220
    margin-bottom: 10px;
1221
	margin-right: 10px;
1222
}
1223
 
1224
.select_character, .select_image
1225
{
1226
    float: right;
1227
}
1228
 
1229
.select_character
1230
{
1231
    clear: right;
1232
}
1233
1234
/*
1235
    The selection area that contains the character
1236
	and the relevant buttons.
1237
*/
1238
.comment-create .forums-ic-select {}
1239
1240
/*
1241
    The thing that shows the picture and current
1242
	selected character. No padding.
1243
*/
1244
.comment-create .forums-ic-select #character_display {}
1245
1246
/*
1247
    Affects both buttons.
1248
*/
1249
.comment-create .forums-ic-select .button {}
1250
.comment-create .forums-ic-select .button:hover {}
1251
1252
/*
1253
    Affects a specific button only.
1254
	Can use for playing with alignment/line breaks.
1255
*/
1256
.comment-create .forums-ic-select #select_character {}
1257
.comment-create .forums-ic-select #select_image {}
1258
1259
.comment-create .forums-ic-select #select_character:hover {}
1260
.comment-create .forums-ic-select #select_image:hover {}
1261
1262
/*
1263
    Can be used to style the textbox.
1264
	Things to think about: 
1265
	padding, margins, colour, border-radius, box-shadow
1266
	It's possible to make it entirely borderless/put
1267
	a background image on it, but note that users can
1268
	change the size of the textbox on their screen
1269
	(not that this is a deterrent for doing cute things...)
1270
	
1271
	If a background colour is specified (even transparent), 
1272
	it does not darken when the user clicks on it.
1273
	
1274
	A fixed-sized textbox will be necessary if alignment's 
1275
	important, since we don't want it to deform too much when 
1276
	the user changes the window size...this is best used
1277
	only with small textboxes tbh
1278
*/
1279
.comment-create .form-control {}
1280
1281
/*
1282
    The "Post Comment" button.
1283
	Ideally all buttons should be styled the same, and
1284
    all in one place though.
1285
*/
1286
.comment-create .button {}
1287
.comment-create .button:hover {}
1288
1289
/************************************************
1290
    .reveal-modal
1291
************************************************/
1292
1293
/*
1294
    These are the things that pop up for selecting characters
1295
    and images...and also affect the ones that do things
1296
    like submit images for characters and stuff	
1297
	The latter don't need to be styled completely, 
1298
	but may be worth checking for how readable they are
1299
	especially when working with a dark background
1300
	
1301
	.reveal-modal{} affects all modals;
1302
	here I'll use their specific ids for comments.
1303
*/
1304
.select_character_panel,
1305
.select_image_panel {}
1306
1307
/* title of the modal */
1308
.select_character_panel h4,
1309
.select_image_panel h4 {}
1310
1311
/* selection area of the modal */
1312
.select_character_panel .panel,
1313
.select_image_panel .panel {}
1314
1315
/* more specific versions */
1316
.select_character_panel .character-select-panel {}
1317
.select_image_panel .image-select-panel {}
1318
1319
/* character selection */
1320
.select_character_panel .character-select-row {}
1321
.select_character_panel .character-select-row:hover {}
1322
1323
/* image selection */
1324
.select_image_panel .image-select-cell {}
1325
.select_image_panel .image-select-cell:hover {}
1326
1327
/* .button doesn't work, so use these */
1328
.select_character_panel .character-select-button {}
1329
.select_image_panel .image-select-button {}
1330
1331
.select_character_panel .character-select-button:hover {}
1332
.select_image_panel .image-select-button:hover {}
1333
1334
/************************************************
1335
    .forum-posts
1336
************************************************/
1337
1338
/*
1339
    A container that holds each individual comment.
1340
	Adjust the padding here, add a line to
1341
	differentiate individual comments...
1342
*/
1343
.forum-posts 
1344
{
1345
	background-color: #111;
1346
	margin-bottom: 10px;
1347
}
1348
1349
/*
1350
    Holds the user's avatar. Can be used to crop
1351
	the image by way of overflow: hidden;.
1352
*/
1353
.forum-posts .forum-posts-sidebar img
1354
{
1355
	border: 5px solid #fff;
1356
	background-color: #fff;
1357
	margin-left: auto;
1358
	margin-right; auto;
1359
}
1360
1361
.forum-posts .forum-posts-sidebar
1362
{
1363
	padding-left: 10px;
1364
	padding-right: 10px;
1365
	padding-top: 10px;
1366
}
1367
1368
/* Holds the main content of the post. */
1369
.forum-posts .forum-post 
1370
{
1371
	background-color: #fff;
1372
	padding: 10px;
1373
}
1374
1375
/*
1376
    Notes who (and which character if applicable) posted
1377
	the comment, and when. 
1378
	The date can be styled with abbr.
1379
*/
1380
.forum-post-caption
1381
{
1382
    width: 50%;
1383
	font-size: 0px;
1384
}
1385
.forum-post-caption a
1386
{
1387
	font-size: 10px;
1388
	font-family: georgia;
1389
}
1390
.forum-post-caption .display-user a
1391
{
1392
	display: block;
1393
	text-transform: lowercase;
1394
	font-size: 30px;
1395
	font-style: italic;
1396
	line-height: 1.1em;
1397
}
1398
.forum-post-caption .display-user a .fi-star,
1399
.forum-post-caption .display-user a .fi-torso,
1400
.forum-post-caption .display-user a .fi-crown
1401
{
1402
	color: #008CBA;
1403
}
1404
.forum-post-caption .display-user a:hover,
1405
.forum-post-caption .display-user a:hover .fi-star,
1406
.forum-post-caption .display-user a:hover .fi-torso,
1407
.forum-post-caption .display-user a:hover .fi-crown
1408
{
1409
	color: #1CC7FF;
1410
}
1411
.forum-post-caption .datetime
1412
{
1413
	font-size: 10px;
1414
	border-bottom: 0px;
1415
	color: #777;
1416
}
1417
.forum-post-caption .fi-link
1418
{
1419
	margin-right: 5px;
1420
}
1421
1422
/*
1423
    For styling the Edit/Delete buttons.
1424
	[.label] gets both of them, while [.label.alert]
1425
	only gets the delete button.
1426
*/
1427
.forum-posts .forum-post .label {}
1428
.forum-posts .forum-post .label.alert {}
1429
1430
.forum-posts .forum-post .label:hover {}
1431
.forum-posts .forum-post .label.alert:hover {}
1432
1433
/* 
1434
    Main text content. 
1435
    If there's no universal styling for .panel,
1436
    the background/border etc. can be changed here.	
1437
*/
1438
.forum-post-content
1439
{
1440
    margin-top: 2px;
1441
	background-color: transparent;
1442
	border-width: 1px 0px 0px 0px;
1443
	border-top: 1px dotted #777;
1444
	margin-top: 10px;
1445
}
1446
1447
.forum-post .label,
1448
.forum-post .label.alert
1449
{
1450
    margin-top: -21px;
1451
}
1452
1453
/***************************************************************************
1454
1455
    Bulletins
1456
	
1457
***************************************************************************/
1458
1459
/* The container for the bulletins page */
1460
.bulletins-index {}
1461
1462
/************************************************
1463
    .bulletins-post
1464
************************************************/
1465
1466
/*
1467
    The div for each individual post on the 
1468
	bulletins page.
1469
	It's also a panel so any [.panel] styling
1470
	will apply to it.
1471
	
1472
	I'm leaving out [.bulletins-index] so that the
1473
	styling will apply to both the main profile page's
1474
	latest bulletin as well. If that's not the 
1475
	desired effect, then add it in and throw in a 
1476
	[.profile-content] version for the front page.
1477
*/
1478
.profile-bulletin-content,
1479
.bulletins-post 
1480
{
1481
	border: 0px;
1482
}
1483
1484
/************************************************
1485
    .bulletin-header
1486
************************************************/
1487
1488
/*
1489
    Giving this section its own comment header because
1490
	it consists of a fair bit of stuff.
1491
	
1492
	The header consists of everything that is not in
1493
	the content of the post.
1494
	Note that the padding is a little weird:
1495
	0 20 10 20, so padding the top may be a good idea
1496
	especially on the front page where the title runs off
1497
	the top of the panel (50 seems
1498
	like a good amount)
1499
*/
1500
.bulletin-header
1501
{
1502
	background-color: #111;
1503
	padding: 30px;
1504
	font-family: georgia;
1505
}
1506
.panel .bulletin-header
1507
{
1508
	margin: -30px -30px 0px -30px;
1509
	
1510
}
1511
1512
1513
/*
1514
    Why does the title run off the top of the panel?
1515
	It's because this div is set to position: absolute;
1516
	in order to keep it aligned with the bottom of the 
1517
	icon image. (The same {position: absolute; bottom: 0px;}
1518
	in {position: relative} trick I used for Jay's header bar)
1519
	However, if the icon image is too small, the text too long 
1520
	and the column too narrow (which occurs only on the front page)
1521
	it will be pushed upwards and out of the box.
1522
	
1523
	Inserting position: relative; here will fix the front
1524
	page problem, but also make it not align with the bottom
1525
	of the icon.
1526
*/
1527
.bulletin-header-content
1528
{
1529
	position: relative;
1530
}
1531
1532
/*
1533
    The icon used in the header.
1534
*/
1535
.forum-thread-avatar
1536
{
1537
	background-color: #fff;
1538
	border: 5px solid #fff;
1539
}
1540
1541
/*
1542
    The bulletin title.
1543
*/
1544
.panel .bulletin-title,
1545
.bulletin .bulletin-title
1546
{
1547
	margin-top: 0px;
1548
}
1549
.panel .bulletin-title a ,
1550
.bulletin .bulletin-title a
1551
{ 
1552
	font-weight: normal;
1553
	font-size: 30px;
1554
	font-style: italic;
1555
	color: #fff; 
1556
}
1557
.panel .bulletin-title a:hover,
1558
.bulletin .bulletin-title a:hover
1559
{
1560
	color: #ddd;
1561
}
1562
1563
/*
1564
    The part that says who posted it and when.
1565
	Contains the labels.
1566
*/
1567
.bulletin-caption
1568
{
1569
    width: 100%;
1570
	font-size: 0px;
1571
}
1572
.bulletin-caption a
1573
{
1574
	font-size: 10px;
1575
	font-family: georgia;
1576
}
1577
.bulletin-caption .display-user a
1578
{
1579
	display: block;
1580
	text-transform: lowercase;
1581
	font-size: 15px;
1582
	line-height: 1.1em;
1583
}
1584
.bulletin-caption .display-user a .fi-star,
1585
.bulletin-caption .display-user a .fi-torso,
1586
.bulletin-caption .display-user a .fi-crown
1587
{
1588
	color: #008CBA;
1589
}
1590
.bulletin-caption .display-user a:hover,
1591
.bulletin-caption .display-user a:hover .fi-star,
1592
.bulletin-caption .display-user a:hover .fi-torso,
1593
.bulletin-caption .display-user a:hover .fi-crown
1594
{
1595
	color: #1CC7FF;
1596
}
1597
.bulletin-caption .datetime
1598
{
1599
	font-size: 10px;
1600
	border-bottom: 0px;
1601
	color: #777;
1602
	display: block;
1603
	margin-bottom: 5px;
1604
}
1605
1606
/*
1607
    The labels. 
1608
	.label touches both, 
1609
	.label.alert only touches the "Delete" one.
1610
*/
1611
.bulletin-header .bulletin-caption .label { margin-right: 5px; }
1612
.bulletin-header .bulletin-caption .label.alert {}
1613
1614
/************************************************
1615
    .bulletin-post
1616
************************************************/
1617
1618
/*
1619
    Whatever in the post that isn't contained by the header.
1620
*/
1621
.bulletin-post { padding: 0px; }
1622
.bulletins-post .bulletin-post
1623
{
1624
	padding-top: 30px;
1625
}
1626
1627
/*
1628
    The bar that contains the comments label and centres it.
1629
*/
1630
.bulletin-post .text-center 
1631
{
1632
	border-top: 1px dotted #777;
1633
	padding-top: 20px;
1634
	margin-top: 20px;
1635
}
1636
1637
/*
1638
    The comments label.
1639
	Use [a] to change the text colour.
1640
*/
1641
.bulletin-post .text-center .label 
1642
{
1643
	background-color: transparent;
1644
}
1645
#content .bulletin-post .text-center .label a 
1646
{
1647
	font-family: georgia;
1648
	font-size: 30px;
1649
	color: #008CBA;
1650
}
1651
1652
#content .bulletin-post .text-center .label:hover {}
1653
#content .bulletin-post .text-center .label a:hover 
1654
{
1655
	color: #1CC7FF;
1656
}
1657
1658
/***************************************************************************
1659
1660
    Characters
1661
	
1662
***************************************************************************/
1663
1664
/* The container for the characters page */
1665
.profile-characters {}
1666
1667
/*
1668
    The content is split into multiple rows:
1669
	1. Folder h1 ("UNSORTED") and folder icons
1670
	2. Filters, not including h1 ("FILTERS")
1671
	3. Gallery + pagination
1672
*/
1673
.profile-characters .characters-gallery
1674
{
1675
	border-top: 50px solid #111;
1676
}
1677
1678
/*
1679
    The hr dividing the filters and the gallery itself.
1680
*/
1681
.profile-characters hr 
1682
{
1683
	display: none;
1684
}
1685
1686
/************************************************
1687
    .profile-characters-folders
1688
************************************************/
1689
1690
/*
1691
    Folder row
1692
	
1693
	Contains the title. Folder icons are a [.small-block-grid-6].
1694
	Padding is applied on [.text-center]/[li].
1695
*/
1696
.profile-characters .profile-characters-folders {}
1697
1698
/*
1699
    The little container in the top right that contains the 
1700
	labels.
1701
	Probably of not much practical use to style, but could
1702
	probably use for nudging the labels or something...
1703
*/
1704
.profile-characters .profile-characters-folders .right {}
1705
1706
/*
1707
    Labels on the top right. (View Unsorted/View All)
1708
	[.right] forces a float: right; so they're stuck there.
1709
	There's no way to differentiate them.
1710
*/
1711
.profile-characters .profile-characters-folders .right .label{}
1712
.profile-characters .profile-characters-folders .right .label:hover{}
1713
1714
/* Back label */
1715
.profile-characters .profile-characters-folders h1 .label{}
1716
.profile-characters .profile-characters-folders h1 .label:hover{}
1717
1718
/* 
1719
    Folder buttons 
1720
	Tricks:
1721
	1. { visibility: hidden; } for [i] to retain 
1722
	   text alignment but hide folder icon
1723
	2. background-image a custom folder icon
1724
	   (probably not possible to do custom for each one)
1725
*/
1726
.profile-characters .profile-characters-folders .button {}
1727
.profile-characters .profile-characters-folders .button:hover {}
1728
1729
/************************************************
1730
    .profile-characters-filters
1731
************************************************/
1732
1733
/*
1734
    The row that contains the filters.
1735
	
1736
	Each filter/sort category has a div to itself
1737
	that contains a .sub-nav.
1738
*/
1739
.profile-characters .profile-characters-filters {}
1740
1741
/*
1742
    "FILTERS" text.
1743
*/
1744
.profile-characters .profile-characters-folders h1,
1745
.profile-characters .profile-characters-filters h1
1746
{
1747
	margin-left: -30px; 
1748
	margin-right: -30px;
1749
	margin-top: -30px;
1750
	margin-bottom: 30px;
1751
	padding: 20px 30px 20px 30px;
1752
	background-color: #111;
1753
	display: block;
1754
	font-family: georgia;
1755
	font-style: italic;
1756
	font-size: 30px;
1757
	color: #fff;
1758
}
1759
1760
/*
1761
    The tags filter.
1762
	This is also a [.row].
1763
*/
1764
.profile-characters .profile-characters-filters-tags {}
1765
1766
/*
1767
    The ordering filter.
1768
	This is also a [.row].
1769
*/
1770
.profile-characters .profile-characters-filters-orderby {}
1771
1772
/* 
1773
    Each [.sub-nav] contains a dt and a bunch of dds...
1774
	At the moment I haven't figured out a nice way
1775
	to style them neatly, since nothing contains only the dds.
1776
	
1777
	A specific [.sub-nav] can be styled by using the specific 
1778
	div from above:
1779
	.profile-characters .profile-characters-filters-tags .sub-nav
1780
	.profile-characters .profile-characters-filters-orderby .sub-nav
1781
	
1782
	I imagine it isn't going to be necessary to be that specific though.
1783
	
1784
	Ideas:
1785
	1. {float: left;} the dt and {float: right;} the dd.
1786
	2. {padding-top: 1.5em;} in [.sub-nav], {margin-top: -1.2em} in dt.
1787
	3. More interesting: {float: left; clear: both;} in dd, but
1788
	                     I haven't found a practical use for this yet
1789
						 (.row can't be resized because it has a min-width
1790
						 of 100%, making it impossible to arrange the tag
1791
						 stacks next to each other)
1792
*/
1793
.profile-characters .sub-nav 
1794
{
1795
}
1796
1797
/*
1798
    This is the description of the filter.
1799
*/
1800
.profile-characters .sub-nav dt 
1801
{
1802
	color: #777;
1803
	font-family: georgia;
1804
	float: left;
1805
}
1806
1807
/*
1808
    These are the filter options.
1809
	[dd] has margins, while [dd a] has padding.
1810
	The background colour for active dds is in [dd a]
1811
	rather than [dd]. 
1812
	Basically, make changes to [dd a] rather than [dd]
1813
	unless the margins need to be changed.
1814
	
1815
	Changes made to dd will affect dd.active, unless
1816
	dd.active is styled.
1817
*/
1818
.profile-characters .sub-nav dd 
1819
{
1820
	float: right;
1821
}
1822
.profile-characters .sub-nav dd a {}
1823
.profile-characters .sub-nav dd a:hover {}
1824
1825
.profile-characters .sub-nav dd.active {}
1826
.profile-characters .sub-nav dd.active a {}
1827
.profile-characters .sub-nav dd.active a:hover {}
1828
1829
/*
1830
    The tag search textbox.
1831
	Unless !important is added, it'll probably get
1832
	overwritten (even for border and box-shadow properties).
1833
*/
1834
.profile-characters .sub-nav .inline-tiny {}
1835
1836
/************************************************
1837
    .characters-gallery
1838
************************************************/
1839
1840
/*
1841
    The structure of the gallery is like this:
1842
	- .characters-gallery
1843
	  > fieldset
1844
	    >> .small-block-grid-6
1845
		  >>> .thumb-character
1846
*/
1847
.profile-characters .characters-gallery {}
1848
1849
/*
1850
    Remember that the uneditable fieldset has 
1851
	20px of padding left and right, and
1852
	that the grid has -10px margins on the same sides,
1853
	so to cancel that out this needs -20px on
1854
	left and right.
1855
	
1856
	Incidentally, this won't align with the dts
1857
	because dt has margins. (10px left and right)
1858
*/
1859
.profile-characters ul.small-block-grid-6 
1860
{
1861
    margin-left: -20px;
1862
	margin-right: -20px;
1863
}
1864
1865
/*
1866
    Character thumbs.
1867
	Exactly the same thing as [.thumb].
1868
	Contains in this order: 
1869
	[.th]
1870
	[.thumb-caption]
1871
	
1872
	Where [.thumb-caption] contains
1873
	[.label.primary][.label.secondary][.label.muted][.nowrap]
1874
	all on the same line,
1875
	and where [.nowrap] contains all the little count icons in 
1876
	individual [.label.muted]s.
1877
*/
1878
.profile-characters .thumb-character {}
1879
1880
/*
1881
    These will override the global specifications.
1882
	Remember that .th is the image box itself and has the border
1883
	and box-shadow.
1884
*/
1885
.profile-characters .thumb {}
1886
.profile-characters .th {}
1887
.profile-characters .th:hover {}
1888
1889
/* Everything below the thumbnail */
1890
.profile-characters .thumb-caption {}
1891
1892
/*
1893
    It bothers me when labels are sometimes on the same line
1894
	and sometimes on different lines, so I'm breaking
1895
	them into different lines.
1896
	[div.label] ensures that the counter icons aren't split up;
1897
	only the major labels are affected (the counter icons are
1898
	in a span and not a div).
1899
*/
1900
1901
.profile-characters .thumb-caption div.label { display: block; }
1902
1903
/*
1904
    Meanwhile, force long names with multiple words to break into
1905
	more than one line. If there are too many counter icons in one line
1906
	they'll also be split into two.
1907
*/
1908
.profile-characters .thumb-caption .label { white-space: normal; }
1909
1910
/* 
1911
    Name labels. 
1912
	Should be obvious but [.label.primary] is character name, 
1913
	[.label.secondary] is username.
1914
*/
1915
.profile-characters .thumb-caption .label.primary {}
1916
.profile-characters .thumb-caption .label.secondary {}
1917
1918
.profile-characters .thumb-caption .label.primary a {}
1919
.profile-characters .thumb-caption .label.primary a:hover {}
1920
.profile-characters .thumb-caption .label.secondary a {}
1921
.profile-characters .thumb-caption .label.secondary a:hover {}
1922
1923
/*
1924
    Small icons. 
1925
	No need to use [i] to change colour of the icon.
1926
*/
1927
#content .profile-characters .thumb-caption .label.muted 
1928
{
1929
	color: #777;
1930
}
1931
#content .profile-characters .thumb-caption .label.muted .favorited
1932
{
1933
	color: #f7ac29;
1934
}
1935
1936
/*
1937
    I feel an inexplicable pointlessness in documenting this
1938
	but it may have a point eventually
1939
	
1940
	The box that contains the pagination at the top and bottom 
1941
	of the gallery...
1942
*/
1943
.profile-characters .pagination-centered {}
1944
1945
/***************************************************************************
1946
1947
    Images
1948
	
1949
***************************************************************************/
1950
1951
/* The container for the gallery page */
1952
.profile-gallery 
1953
{
1954
	border-top: 50px solid #111;
1955
}
1956
1957
/* 
1958
    Thumbnails. 
1959
	Also the same as [.thumb].
1960
	Contains only the image + the "Edit" label.
1961
*/
1962
.profile-gallery .gallery-thumb {}
1963
.profile-gallery .gallery-thumb .th {}
1964
.profile-gallery .gallery-thumb .th:hover {}
1965
1966
/*
1967
    The labels. 
1968
*/
1969
.profile-gallery .label { white-space: normal; }
1970
.profile-gallery .label a {}
1971
.profile-gallery .label a:hover {}
1972
1973
/* 
1974
    Only the edit label. 
1975
	To push it into the exact corner of the image,
1976
	remove the bottom margin of .th and the margins
1977
	for .label.secondary.
1978
	
1979
	There strictly isn't a need to style it, but just
1980
	in case it's hard to see...
1981
*/
1982
.profile-gallery .label.secondary {}
1983
1984
/***************************************************************************
1985
1986
    Links
1987
	
1988
***************************************************************************/
1989
1990
/*
1991
    The links page.
1992
	The structure is exactly the same as the character 
1993
	links page minus the character selection bar at the top,
1994
	so you can copy and paste any code for character links
1995
	and change [.character-links] to [.profile-links]
1996
	and vice versa.
1997
	
1998
	This is probably one of the harder pages to style because
1999
	there aren't very many unique ids and changing one thing
2000
	is likely to break another thing...
2001
*/
2002
.profile-links {}
2003
2004
/************************************************
2005
    .character-links-row
2006
************************************************/
2007
2008
/*
2009
    Each row of links. 
2010
	It contains everything in a single link.
2011
*/
2012
.profile-links .character-links-row 
2013
{
2014
	border-top: 50px solid #111;
2015
}
2016
2017
/*
2018
    This one is probably going to be troublesome to style,
2019
	but it might be useful depending on what you're trying
2020
	to do...
2021
	
2022
	Affects 3 things:
2023
	1. A container around the character icons/names/delete link label
2024
	2. A container around the links text
2025
	3. The links text panels
2026
	
2027
	Might be easier to understand visually if you add a 
2028
	margin to separate them.
2029
	3 can easily be styled separately. 1 and 2 are harder
2030
	to distinguish and require a lot of small fixes.
2031
*/
2032
.profile-links .character-links-row .clearfix {}
2033
2034
/*
2035
    This shows up 4 times in a [.character-links-row].
2036
	1. left side character icon/names
2037
	2. right side character icon/names/delete label
2038
	3. left side character text (containing the [.panel])
2039
	4. right side character text (containing the [.panel])
2040
	
2041
	Comes with 5px of padding all around.
2042
*/
2043
.profile-links .character-links-link {}
2044
2045
/*
2046
    Contains the LEFT side icon and names in the row.
2047
	It's presumably text-right because it's text-alignment right...
2048
	
2049
	Side effect: styling this will affect the box containing
2050
	the edit button in the [.panel] under the text box.
2051
	Fix with [.profile-links .character-links-link .panel .text-right].
2052
*/
2053
.profile-links .character-links-link .text-right {}
2054
2055
/*
2056
    Contains the RIGHT side icon, names and the delete label.
2057
	Again, it's probably text-left because text-alignment left.
2058
	
2059
	No side effect for this one.
2060
*/
2061
.profile-links .character-links-link .text-left {}
2062
2063
/*
2064
    The character icons. 
2065
	Has a max height of 100px, no min-height.
2066
*/
2067
.profile-links .character-links-link .icon-100 {}
2068
2069
/*
2070
    Affects all the labels. That is,
2071
	1. The delete label
2072
	2. The small link icon
2073
	3. Character name label
2074
	4. Username label
2075
	
2076
	This is necessary because you can't affect
2077
	only the character name labels. Everything else
2078
	can be specifically modified.
2079
*/
2080
.profile-links .label {}
2081
.profile-links .label:hover {}
2082
2083
/* The delete labels alone. */
2084
.profile-links .label.alert {}
2085
.profile-links .label.alert:hover {}
2086
2087
/* The link icons alone. */
2088
.profile-links .label.muted {}
2089
.profile-links .label.muted:hover {}
2090
2091
/* 
2092
    The username label alone. 
2093
	Note that changing the text colour here will not work;
2094
	you need to use [a].
2095
*/
2096
.profile-links .label.secondary {}
2097
.profile-links .label.secondary a {}
2098
2099
.profile-links .label.secondary:hover {}
2100
.profile-links .label.secondary a:hover {}
2101
2102
/*
2103
    The panels that contain the text box and edit buttons.
2104
*/
2105
.profile-links .character-links-link .panel {}
2106
2107
/* The textboxes. */
2108
.profile-links .character-links-link .panel .form-control {}
2109
2110
/*  
2111
    A row inside the panel that contains the 
2112
	"Notify (username) of change?" text as well as
2113
	the [.text-right] that contains the button.
2114
*/
2115
.profile-links .character-links-link .panel .row {}
2116
2117
/* The edit button. */
2118
.profile-links .character-links-link .panel button.tiny {}
2119
.profile-links .character-links-link .panel button.tiny:hover {}
2120
2121
/***************************************************************************
2122
2123
    Worlds
2124
	
2125
***************************************************************************/
2126
2127
/*
2128
    The container for the world page.
2129
*/
2130
.profile-groups 
2131
{
2132
	border-top: 50px solid #111;
2133
}
2134
2135
/*
2136
    This controls the default padding on each thumb.
2137
	[.text-center.clearboth] refers to only the leftmost one,
2138
	and could probably be used for making dividing borders...
2139
	
2140
	Note though that this won't be a consistent design since
2141
	not all the pages have .clearboth...
2142
*/
2143
.profile-groups .text-center {}
2144
.profile-groups .text-center.clearboth {}
2145
2146
/*
2147
    These are contained within .text-center inside a small-block-grid-6,
2148
	which has -10px margins as usual. Each one has some 
2149
	padding on the left and right sides, as a note.
2150
	This is also reached with the global [.thumb]. 
2151
	
2152
	The change on b is to make the label split onto the next line.
2153
*/
2154
.profile-groups .gallery-thumb {}
2155
.profile-groups .gallery-thumb b { display: block; }
2156
2157
.profile-groups .gallery-thumb .th {}
2158
.profile-groups .gallery-thumb .th:hover {}
2159
2160
/*
2161
    The rank label.
2162
*/
2163
.profile-groups .label {}
2164
2165
/*
2166
    The "Save Worlds" button.
2167
	Apply background colour directly.
2168
*/
2169
.profile-groups .button {}
2170
.profile-groups .button:hover {}
2171
2172
/*
2173
    Another pointless discovery.
2174
	There's a div 250 pixels high below the save button...
2175
	Might be cute for an image, but I also don't know if there
2176
	are any special conditions for it appearing/not appearing.
2177
*/
2178
.profile-groups .spacer-250 {}
2179
2180
/***************************************************************************
2181
2182
    Favourites
2183
	
2184
***************************************************************************/
2185
2186
/*  
2187
    For some reason, the container for this page is also 
2188
	[.profile-creations] (same as the Designs page).
2189
	I imagine there isn't going to be any huge difference
2190
	and anyway there isn't really a way to differentiate the
2191
	things...
2192
*/
2193
2194
/***************************************************************************
2195
2196
    Designs
2197
	
2198
***************************************************************************/
2199
2200
/* The container for the designs page */
2201
.profile-creations 
2202
{
2203
	border-top: 50px solid #111;
2204
}
2205
2206
/* 
2207
    Thumbnails. 
2208
	Also the same as [.thumb].
2209
	Includes the labels.
2210
*/
2211
.profile-creations .thumb-character {}
2212
2213
.profile-creations .thumb-character .th {}
2214
.profile-creations .thumb-character .th:hover {}
2215
2216
/*
2217
    The labels. Again, splitting onto different lines.
2218
*/
2219
.profile-creations .thumb-character .label { display: block; white-space: normal; }
2220
2221
.profile-creations .thumb-character .label.primary {}
2222
.profile-creations .thumb-character .label.secondary {}
2223
2224
.profile-creations .thumb-character .label.primary a {}
2225
.profile-creations .thumb-character .label.primary a:hover {}
2226
.profile-creations .thumb-character .label.secondary a {}
2227
.profile-creations .thumb-character .label.secondary a:hover {}
2228
2229
/***************************************************************************
2230
2231
    Art
2232
	
2233
***************************************************************************/
2234
2235
/*
2236
    The container here is the same as the one used for the
2237
	Images page (.profile-gallery). I imagine there's no
2238
	need to go through this since there's nothing new here...
2239
*/
2240
2241
/***************************************************************************
2242
2243
    Stats
2244
	
2245
***************************************************************************/
2246
2247
/*
2248
    Class name is literally the same as the one used for
2249
	fields on character pages...
2250
	If you're modifying your profile css for character css,
2251
	be sure to check this section.
2252
*/
2253
.character-fields 
2254
{
2255
	border-top: 50px solid #111;
2256
}
2257
2258
/*
2259
    Each row of the stats.
2260
*/
2261
.character-fields .character-field-row 
2262
{}
2263
2264
/*
2265
    The title of the field.
2266
	Text aligned right, uppercase by default.
2267
*/
2268
.character-fields .character-field-row .character-field-title {}
2269
2270
/*
2271
    The value of the field.
2272
	Spacing between the title and the value is done here
2273
	by way of padding (20px left and right).
2274
*/
2275
.character-fields .character-field-row .character-field-value {}
2276
2277
/*
2278
    For modifying the appearance of dates specifically on this page.
2279
*/
2280
.character-fields .character-field-row abbr {}
2281
2282
/************************************************
2283
    #modal-default
2284
************************************************/
2285
2286
/*
2287
    The modal that appears when you click on either of the 
2288
	subscribed users/subscriber links.
2289
	Can also be reached with [.reveal-modal], but this will 
2290
    affect the other modals (namely, the select character/image
2291
    ones in comments).	
2292
*/
2293
#modal-default {}
2294
2295
/* The title of the modal. */
2296
#modal-default h1 {}
2297
2298
/*
2299
    The grid that contains the users in the modal.
2300
*/
2301
#modal-default .small-block-grid-8 {}
2302
2303
/*
2304
    Each of the li in the grid. 5px padding all round.
2305
*/
2306
#modal-default .small-block-grid-8 li {}
2307
2308
/*
2309
    Each of the cells (1 per li) in the grid.
2310
	10px padding, 5px margins all round so it looks 
2311
	kind of cramped at small sizes...
2312
	Unfortunately the padding and margins can't be changed.
2313
*/
2314
#modal-default .small-block-grid-8 .character-select-cell {}
2315
#modal-default .small-block-grid-8 .character-select-cell:hover {}
2316
2317
/*
2318
    The username labels.
2319
*/
2320
#modal-default .small-block-grid-8 .label {}
2321
#modal-default .small-block-grid-8 .label:hover {}