PN8wdHRa

1/*
2	Text strings
3	
4	Resets
5	Font-size and line-height
6	
7	Send screen width to javascript
8	
9	Width
10	Flexbox
11	Responsive classes
12	
13	Header
14	Logo
15	User Links
16	Navigation
17	Dropdown Navigation Menus
18	Mobile navigation header
19	Search
20	
21	Precontent blocks and padding
22	Breadcrumb Navigation
23	Social Icons
24	
25	Footer
26	Mega Footer
27	Countdown
28	Guest Message
29	Global Message
30	Background Picker
31	
32	Headers
33	ipsBox
34	Buttons
35	Data Lists
36	Minimal and Responsive Layouts
37	
38	Forum Index
39	Forum Index: Grid
40	Forum Index: Fluid
41	Forum Icons
42	Sidebar and Widgets
43	
44	Topic List
45	Topic View
46	Comments
47	Editor
48	
49	Inputs
50	Select Menus
51	Checkboxes
52	Wizard
53	
54	Minor Elements
55	Tabs
56	Popup Menus
57	Advanced Search
58	Profiles
59	Settings and ModCP Tables
60	Blogs
61	Calendar
62	Leaderboard
63	Gallery
64	Downloads
65	Pages
66	Calendar
67	Nexus
68	Clubs
69	Streams
70	Inbox
71	Promoted Content
72	Announcements
73	
74	Pagination
75	Bar Pagination
76	Mini Pagination
77	
78	Message bar
79	Block Manager
80	2fa.css
81	
82	Wrapped styles for framework
83	Wallpaper styles
84	
85	Bug Fixes
86*/
87
88/*
89	----------------
90	Modifier classes:
91	.focus-transparent: correctly spaces elements for transparent ipsBox layouts
92	.focus-wallpaper: adds backgrounds to certain elements for contrast against wallpaper backgrounds
93	.focus-social-gradient: adds gradients to social icons
94	.focus-guest-alert: enhances the visibility of the guest message widget
95	.focus-topic-compact: merges individual posts into one box
96	.focus-rep-inherit: force reputation to inherit mobile post header colour
97	.focus-post-bar: wraps comment buttons within a bar
98	.focus-post-buttons: converts comment controls into buttons
99	.focus-post-row focus-post-bar: converts comment controls into a link row within a bar
100	.focus-sticky-author: makes the author pane sticky on supported desktop browsers
101	.focus-attached-dropdowns: arrow dropdown menus
102	.focus-nav-right: align last dropdown menus to the right
103	.user-links-sep: show separator instead of borders
104	.user-links-b: add borders between userlinks
105	.focus-fixed-header
106	.focus-fixed-user
107	.focus-fixed-nav
108	----------------
109*/
110
111
112
113/*
114	----------------
115	- Text strings
116	----------------
117*/
118
119.cForumList .ipsDataItem_unread .ipsDataItem_title:before, .cForumGrid_unread .ipsPhotoPanel h3 a:before {
120	content: "NEW";
121}
122
123.focus-guestMessage h4:before{
124	content: "Welcome to ";
125}
126
127.focus-picker{
128	content: "Change background image";
129}
130
131.focus-timer-title:before{
132	content: '{theme="countdown_title"}';
133}
134
135.focus-timer-done .focus-timer-title:before{
136	content: '{theme="countdown_done"}';
137}
138
139.ipsCommentUnreadSeperator:before{
140	content:"New content begins here";
141}
142
143.cTopic .cRatingColumn > .ipsList_reset:before{
144	content: 'Vote below answer:';
145}
146
147
148
149/*
150	----------------
151	- CSS Variables
152	----------------
153*/
154
155:root{
156	--search-button-width: 36px;
157
158  	--topic-avatar: 110px;
159	--author-pane--width: calc(var(--topic-avatar) + 90px);	
160	--item-controls-offset: calc(var(--author-pane--width) + var(--author-pane--border-width, 0px) + var(--post-content--padding, 0px));
161
162	--subforum-display: grid;
163	--subforum-min-width: 200px;
164	--subforum-gap: 6px;
165  
166	--grid-gap: 15px;
167	--grid-min: 250px;
168
169	--footer-col-width: 190px;
170}
171
172
173/*
174	----------------
175	- Resets
176	----------------
177*/
178
179.ipsDataList.ipsAreaBackground_reset,
180.ipsAreaBackground .ipsAreaBackground,
181.cForumList .ipsAreaBackground[data-role="forums"]{
182	background: transparent;
183}
184
185.ipsAttachment_dropZone{
186	background: {hextorgb="area_background_light" opacity="0.7"};
187}
188
189#elTwoFactorAuthentication > div{
190	background-color: {theme="area_background_reset"};
191}
192
193
194
195
196/* Text colours */
197.ipsType_pageTitle,
198.ipsType_richText,
199.ipsStreamItem_title,
200a.ipsType_blendLinks:not( .ipsType_noUnderline ):hover, 
201.ipsType_blendLinks:not( .ipsType_noUnderline ) a:not( .ipsType_noUnderline ):hover,
202.ipsType_sectionTitle a,
203.ipsType_sectionTitle .ipsType_light{
204	color: inherit;
205}
206
207.ipsWidget_title a{
208	color: inherit !important;
209}
210
211.ipsType_sectionHead,
212#cAnnouncementSidebar h3,
213.ipsPager_type,
214.ipsPager .ipsPager_next a:after,
215.ipsPager .ipsPager_prev a:after,
216.ipsStreamItem_snippet .ipsType_richText{
217	color: {theme="text_color"};
218}
219
220.ipsType_neutral {
221	color: {hextorgb="text_color" opacity="0.7"};
222}
223
224#elTwoFactorAuthentication .ipsTabs .ipsTabs_item:not( .ipsTabs_activeItem ) {
225	color: {hextorgb="text_color" opacity="0.6"};
226}
227
228.ipsType_noLinkStyling{ color: {theme="link"}; }
229.ipsType_noLinkStyling:hover { color: {theme="link_hover"}; }
230
231mark{
232	background: {theme="mentions"};
233	color: #fff !important;
234}
235
236
237/* Border colours */
238.ipsDataItem,
239.ipsDataList:not(.ipsGrid) .ipsDataItem:last-child,
240.ipsDataList.ipsDataList_zebra > .ipsDataItem,
241#elProfileActivityOverview .ipsStreamItem,
242#elUserContent .ipsStreamItem,
243#elSingleStatusUpdate .ipsStreamItem,
244.ipsStream_snippetInfo,
245html[dir="ltr"] .ipsWidget_horizontal .cNewestMember,
246html[dir="rtl"] .ipsWidget_horizontal .cNewestMember{
247	border-color: {hextorgb="text_color" opacity="0.15"};
248}
249
250html[dir="ltr"] .ipsStream_withTimeline .ipsStreamItem:after{
251	border-right-color: {theme="area_background_reset"};
252}
253html[dir="rtl"] .ipsStream_withTimeline .ipsStreamItem:after{
254	border-left-color: {theme="area_background_reset"};
255}
256
257
258/*
259	----------------
260	- Typography
261	----------------
262*/
263
264/* Define global font size */
265html {
266	font-size: 62.5%;
267}
268
269body{
270	font-size: 1.2rem;
271	line-height: 1.8rem;
272	font-family: {{if theme.body_font != 'default'}}"{theme='body_font'}", sans-serif{{else}} BlinkMacSystemFont,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif {{endif}};
273    -moz-osx-font-smoothing: grayscale;
274}
275
276.fa{
277	{prefix="transform" value="translate(0,0)"}
278}
279
280.fa.fa-flip-horizontal{
281	{prefix="transform" value="scale(-1,1)"}
282}
283
284.ipsType_huge {
285	font-size: 7.2rem;
286}
287
288.ipsType_veryLarge{
289	font-size: 4.4rem;
290}
291
292.cCalendarNav .ipsType_pageTitle,
293.ipsType_pageTitle.ipsType_largeTitle{
294	font-size: 2.7rem;
295}
296
297.ipsDialog_title,
298.ipsType_pageTitle{
299	font-size: 2.2rem;
300}
301
302.ipsType_sectionHead,
303.ipsStreamItem_title,
304.cProfileRepScore_points,
305.cPopularItem_stats{
306	font-size: 2rem;
307}
308
309.ipsDataItem_statsLarge .ipsDataItem_stats_number,
310.ipsApp .ipsField_primary,
311.ipsApp .ipsField_primary.ipsField_autocomplete input,
312.ipsApp .ipsFieldRow_primary input{
313	font-size: 1.8rem;
314}
315
316.ipsStreamItem_titleSmall,
317.cForumGrid_title{
318	font-size: 1.7rem;
319}
320
321.ipsType_large,
322#elMyClubsActivity .ipsStreamItem_title,
323.cCmsDatabase_index h4.ipsDataItem_title,
324.ipsAttachment_dropZone,
325.ipsTable.ipsMatrix .ipsMatrix_subHeader,
326.ipsForm_horizontal .ipsFieldRow_required:before,
327.ipsForm_group > .ipsForm_groupTitle{
328	font-size: 1.6rem;
329}
330
331.ipsStreamItem_snippet,
332.ipsComposeArea_dummy{
333	font-size: 1.5rem;
334}
335
336.ipsType_sectionHead.ipsType_large,
337.ipsType_sectionHead.ipsType_normal,
338.cCalendar_dayNumber,
339.ipsAttachment_dropZoneSmall .ipsAttachment_supportDrag,
340.ipsFieldRow:not( .ipsFieldRow_checkbox ) .ipsFieldRow_label,
341.ipsFieldRow:not( .ipsFieldRow_checkbox ) .ipsFieldRow_title,
342.ipsForm_horizontal .ipsFieldRow > .ipsFieldRow_label,
343.ipsForm_horizontal .ipsFieldRow > .ipsFieldRow_title{
344	font-size: 1.4rem;
345}
346
347.ipsType_normal,
348div[data-role="imageDescription"] .ipsType_medium,
349.cForumList .ipsDataItem_title,
350.ipsDataItem_title,
351.ipsApp label:not( .ipsField_unlimited ), .ipsApp input, .ipsApp button, .ipsApp select, .ipsApp textarea{
352	font-size: 1.3rem;
353}
354/* Originally 1.3rem */
355.ipsType_medium,
356.ipsTabs_item,
357.ipsStreamItem_actionBlock,
358.cToken,
359.ipsTable th,
360.ipsFieldRow_desc,
361#elMyClubsActivity .ipsStreamItem_status,
362.ipsStreamItem_status,
363.ipsMenu .ipsDataItem_title,
364.ipsTabs.ipsTabs_small .ipsTabs_item,
365.ipsProgressBar_progress,
366.cPopularItem_stats span{
367	font-size: 1.2rem;
368}
369
370.ipsType_small,
371.ipsType_minorHeading,
372.ipsPager_type,
373#elGalleryNav{
374	font-size: 1.1rem;
375}
376
377.ipsFieldRow_required{
378	font-size: 1rem;
379}
380
381.ipsStreamItem_snippet .ipsType_medium,
382.ipsWidget .ipsDataItem_title{
383	font-size: inherit;
384}
385
386
387
388
389/* Line-heights */
390
391.ipsType_small:not( .ipsType_richText ){
392	line-height: 1.6rem;
393}
394.ipsType_medium:not( .ipsType_richText ){
395	line-height: 2rem;
396}
397.ipsType_normal:not( .ipsType_richText ){
398	line-height: 2.1rem;
399}
400.ipsType_large:not( .ipsType_richText ){
401	line-height: 2rem;
402}
403.ipsType_veryLarge {
404	line-height: 5.2rem;
405}
406.ipsType_huge {
407	line-height: 8rem;
408}
409
410
411
412
413/* buttons.css */
414.ipsApp .ipsButton {
415	font-size: 1.3rem;
416}
417.ipsApp .ipsButton_medium {
418	font-size: 1.3rem;
419	line-height: 3.8rem;
420}
421
422.ipsApp .ipsButton_large {
423	font-size: 1.5rem;
424	line-height: 4.2rem;
425}
426
427.ipsApp .ipsButton_veryLarge {
428	font-size: 1.6rem;
429	line-height: 4.6rem;
430}
431
432.ipsApp .ipsButton_small {
433	font-size: 1.2rem;
434	line-height: 3.4rem;
435}
436
437.ipsApp .ipsButton_verySmall {
438	font-size: 1.2rem;
439	line-height: 28px;
440}
441
442.ipsApp .ipsButton_veryVerySmall {
443	font-size: 1rem;
444	line-height: 2rem;
445}
446
447.ipsButtonRow li > a,
448.ipsButtonRow li > button,
449.ipsButtonRow li > span {
450	line-height: 2.6rem;
451	font-size: 1rem;
452}
453
454
455
456/* badges.css */
457.ipsRepBadge{
458	font-size: 1.1rem;
459}
460
461.ipsBadge, .ipsBadge.ipsBadge_normal {
462	height: 1.7rem;
463	line-height: 1.7rem;
464	font-size: 1rem;
465}
466
467.ipsBadge.ipsBadge_medium {
468	height: 1.8rem;
469	line-height: 1.8rem;
470	font-size: 1.1rem;
471} 
472
473.ipsBadge.ipsBadge_large {
474	height: 2.3rem;
475	line-height: 2.3rem;
476	font-size: 1.3rem;
477}
478
479
480/* Text colours */
481.ipsType_warning, .ipsType_negative, a.ipsType_negative, a.ipsType_negative:hover,
482.cAnswerRate.ipsType_negative:hover {
483	color: #c75050;
484}
485
486.ipsType_spammer {
487	color: #990000;
488}
489
490.ipsType_issue {
491	color: #d69625;
492}
493
494.ipsType_success, .ipsType_positive, a.ipsType_positive, a.ipsType_positive:hover,
495.cAnswerRate.ipsType_positive:hover {
496	color: #598f5b;
497}
498
499/* Text colours outside of .ipsBox */
500.cGuestTeaser > .ipsType_pageTitle,
501.cGuestTeaser > .ipsType_light,
502#ipsLayout_mainArea > .ipsType_pageTitle,
503#ipsLayout_mainArea > p,
504#ipsLayout_mainArea > header[class='ipsSpacer_bottom'],
505#elStreamUpdateMsg,
506#ipsLayout_mainArea > .ipsType_richText:not(.ipsBox),
507#ipsLayout_mainArea > .ipsType_normal:not(.ipsBox){
508	
509}
510
511/*
512	----------------
513	- Send screen width to javascript
514	----------------
515*/
516
517/* Desktop */
518@media screen and (min-width:980px){
519	body{
520		min-width: 30px;
521	}
522}
523/* Tablets and mobile */
524@media screen and (max-width:979px){
525	body{
526		min-width: 20px;
527	}
528}
529/* Mobiles */
530@media screen and (max-width: 767px){
531	body{
532		min-width: 10px;
533	}
534}
535
536
537
538/*
539	----------------
540	- Width
541	----------------
542*/
543
544.ipsLayout_container{
545	position: static;
546	padding: 0;
547}
548
549/* Fixed width */
550.ipsLayout_container,
551.ipsLayout_minimal .ipsLayout_container{
552	
553	{{if theme.enable_fluid_width}}
554		max-width: {theme="fluid_width_size"}%;
555	{{else}}
556		width: calc(100% - 50px);
557		max-width: {theme="fixedWidth"}px;
558	{{endif}}
559	
560}
561
562	.ipsLayout_container .ipsLayout_container{
563		width: auto;
564		max-width: none;
565		margin: 0;
566	}
567
568/* Overwrite custom.css width on tablets */
569@media screen and (max-width:979px){
570	.ipsApp .ipsLayout_container{
571		width: auto;
572		max-width: none;
573	}
574}
575
576
577
578/*
579	----------------
580	- Flexbox
581	----------------
582*/
583
584.flex,
585.flex-inline {
586	display: -webkit-flex;
587	display: flex;
588	-webkit-align-items: center;
589	align-items: center;
590}
591
592.flex-inline {
593	display: -webkit-inline-flex;
594	display: inline-flex;
595}
596
597.flex-height {
598	min-height: 100%;
599}
600
601/* Set defaults: elements only occupy necessary space */
602.flex > *,
603.flex-inline > * {
604	-webkit-flex: 0 0 auto;
605	flex: 0 0 auto;
606}
607
608.flex-aS {
609	-webkit-align-items: flex-start;
610	align-items: flex-start;
611}
612
613.flex-aC {
614	-webkit-align-items: center;
615	align-items: center;
616}
617
618.flex-aE {
619	-webkit-align-items: flex-end;
620	align-items: flex-end;
621}
622
623.flex-aF {
624	-webkit-align-items: stretch;
625	align-items: stretch;
626}
627
628.flex-jS {
629	-webkit-justify-content: flex-start;
630	justify-content: flex-start;
631}
632
633.flex-jC {
634	-webkit-justify-content: center;
635	justify-content: center;
636}
637
638.flex-jE {
639	-webkit-justify-content: flex-end;
640	justify-content: flex-end;
641}
642
643.flex-jA {
644	-webkit-justify-content: space-around;
645	justify-content: space-around;
646}
647
648.flex-jB {
649	-webkit-justify-content: space-between;
650	justify-content: space-between;
651}
652
653.flex-wrap {
654	-webkit-flex-wrap: wrap;
655	flex-wrap: wrap;
656}
657
658.flex-column{
659	-webkit-flex-direction: column;
660	flex-direction: column;
661}
662
663.flex00 {
664	-webkit-flex: 0 0 auto;
665	flex: 0 0 auto;
666}
667
668.flex10 {
669	-webkit-flex: 1 0 auto;
670	flex: 1 0 auto;
671}
672
673.flex11 {
674	-webkit-flex: 1 1 auto;
675	flex: 1 1 auto;
676}
677
678.flex01 {
679	-webkit-flex: 0 1 auto;
680	flex: 0 1 auto;
681}
682
683@media screen and (max-width:979px){
684	
685	.flex-block-t{ display: block; }
686
687	.flex-column-t{
688		-webkit-flex-direction: column;
689		flex-direction: column;
690	}
691	
692	.flex-aS-t {
693		-webkit-align-items: flex-start;
694		align-items: flex-start;
695	}
696	
697	.flex-aC-t {
698		-webkit-align-items: center;
699		align-items: center;
700	}
701	
702	.flex-aE-t {
703		-webkit-align-items: flex-end;
704		align-items: flex-end;
705	}
706	
707	.flex-aF-t {
708		-webkit-align-items: stretch;
709		align-items: stretch;
710	}
711	
712	.flex-jS-t {
713		-webkit-justify-content: flex-start;
714		justify-content: flex-start;
715	}
716	
717	.flex-jC-t {
718		-webkit-justify-content: center;
719		justify-content: center;
720	}
721	
722	.flex-jE-t {
723		-webkit-justify-content: flex-end;
724		justify-content: flex-end;
725	}
726	
727	.flex-jA-t {
728		-webkit-justify-content: space-around;
729		justify-content: space-around;
730	}
731	
732	.flex-jB-t {
733		-webkit-justify-content: space-between;
734		justify-content: space-between;
735	}
736	
737	.flex00-t {
738		-webkit-flex: 0 0 auto;
739		flex: 0 0 auto;
740	}
741	
742	.flex10-t {
743		-webkit-flex: 1 0 auto;
744		flex: 1 0 auto;
745	}
746	
747	.flex11-t {
748		-webkit-flex: 1 1 auto;
749		flex: 1 1 auto;
750	}
751	
752	.flex01-t {
753		-webkit-flex: 0 1 auto;
754		flex: 0 1 auto;
755	}
756	
757}
758
759@media screen and (max-width:767px){
760	
761	.flex-block-m{ display: block; }
762
763	.flex-column-m{
764		-webkit-flex-direction: column;
765		flex-direction: column;
766	}
767	
768	.flex-aS-m {
769		-webkit-align-items: flex-start;
770		align-items: flex-start;
771	}
772	
773	.flex-aC-m {
774		-webkit-align-items: center;
775		align-items: center;
776	}
777	
778	.flex-aE-m {
779		-webkit-align-items: flex-end;
780		align-items: flex-end;
781	}
782	
783	.flex-aF-m {
784		-webkit-align-items: stretch;
785		align-items: stretch;
786	}
787	
788	.flex-jS-m {
789		-webkit-justify-content: flex-start;
790		justify-content: flex-start;
791	}
792	
793	.flex-jC-m {
794		-webkit-justify-content: center;
795		justify-content: center;
796	}
797	
798	.flex-jE-m {
799		-webkit-justify-content: flex-end;
800		justify-content: flex-end;
801	}
802	
803	.flex-jA-m {
804		-webkit-justify-content: space-around;
805		justify-content: space-around;
806	}
807	
808	.flex-jB-m {
809		-webkit-justify-content: space-between;
810		justify-content: space-between;
811	}
812	
813	.flex00-m {
814		-webkit-flex: 0 0 auto;
815		flex: 0 0 auto;
816	}
817	
818	.flex10-m {
819		-webkit-flex: 1 0 auto;
820		flex: 1 0 auto;
821	}
822	
823	.flex11-m {
824		-webkit-flex: 1 1 auto;
825		flex: 1 1 auto;
826	}
827	
828	.flex01-m {
829		-webkit-flex: 0 1 auto;
830		flex: 0 1 auto;
831	}
832	
833}
834
835
836/*
837	----------------
838	- css Grid and flexbox layouts
839	----------------
840*/
841
842/* Flexbox layout */
843@supports (display: flex){
844
845	@media (min-width: 980px){
846
847		#ipsLayout_contentArea,
848		#ipsLayout_mainArea,
849		#ipsLayout_sidebar{
850			display: block;
851			width: auto;
852		}
853
854		#ipsLayout_contentWrapper{
855			display: flex;
856			width: auto;
857		}
858
859		#ipsLayout_mainArea{
860			flex: 1 1 100px;
861		}
862
863		#ipsLayout_sidebar{
864			flex: 0 0 315px;
865			min-width: 0;
866			max-width: none;
867		}
868      
869		#ipsLayout_sidebar.ipsLayout_sidebarUnused{
870			flex-basis: 0px;
871		}
872
873		body.ipsLayout_sidebarUnused:not(.cWidgetsManaging) #ipsLayout_sidebar{
874			display: none;
875		}
876
877		/* Flex layout: Convert data rows into flex */
878		.ipsDataList{
879			display: block;
880			width: auto;
881		}
882
883		.ipsDataItem{
884			display: flex;
885			align-items: center;
886			width: auto;
887		}
888
889			.ipsDataItem > *{
890				flex: 0 0 auto;
891			}
892	  
893			.ipsDataItem_main, .ipsDataItem_stats, .ipsDataItem_lastPoster, .ipsDataItem_generic, .ipsDataItem_modCheck, .ipsDataItem_icon,
894			.ipsApp .cForumTopicTable .ipsDataItem_title > span:not(.ipsHide),
895			.ipsApp .cForumTopicTable .ipsDataItem_title > span:not(.ipsHide){
896				display: block;
897			}
898
899			.ipsDataList.ipsDataList_reducedSpacing .ipsDataItem_main,
900			.ipsDataList.ipsDataList_reducedSpacing .ipsDataItem_stats,
901			.ipsDataList.ipsDataList_reducedSpacing .ipsDataItem_lastPoster,
902			.ipsDataList.ipsDataList_reducedSpacing .ipsDataItem_generic{
903				display: block;
904				align-self: flex-start;
905			}
906
907			/* Remove clearfix */
908			.ipsDataItem::after{
909				display: none;
910			}
911
912			.ipsDataItem_icon{
913				width: auto;
914				min-width: 0;
915				max-width: none;
916			}
917
918			.ipsDataItem > *:only-child,
919			.ipsDataItem_main,
920			.ipsDataItem_generic{
921				flex: 1 1 100%;
922			}
923
924			.ipsDataItem_size1,
925			.ipsDataItem_size2,
926			.ipsDataItem_size3,
927			.ipsDataItem_size4,
928			.ipsDataItem_size5,
929			.ipsDataItem_size6,
930			.ipsDataItem_size7,
931			.ipsDataItem_size8,
932			.ipsDataItem_size9,
933			.ipsDataItem_size10{
934				flex: 0 0 auto;
935				/* width: auto; */
936				/* The below code is to prevent profile fields from breaking */
937				min-width: 0px;
938				overflow: hidden;
939				text-overflow: ellipsis;
940			}
941
942			.ipsDataItem > .ipsPos_top{
943				align-self: flex-start;
944			}
945
946
947		/* Cater for padding in widgets */
948		.ipsPad_half > .ipsDataList{
949			margin: 0 -7px;
950		}
951
952		.ipsWidget_inner .ipsDataList .ipsDataItem{
953			padding: 0px 6px;
954		}
955
956		#ipsfocus .ipsWidget .ipsDataItem_icon{
957			padding: 12px 6px;
958			align-self: flex-start;
959		}
960
961		/* Topic list icons */
962		#ipsfocus .cTopicList .ipsDataItem_icon{
963			min-width: 30px;
964			text-align: center;
965		}
966
967		.ipsColumns{
968			display: flex;
969			width: auto;
970			max-width: 100%;
971		}
972
973			.ipsColumn{
974				display: block;
975				flex: 0 0 auto;
976			}
977
978			.ipsColumn_fluid{
979				flex: 1 1 auto;
980			}
981
982		#elNexusActions > li > a{
983			display: flex;
984			align-items: center;
985			flex: 1 1 auto;
986		}
987
988		.ipsStreamItem_title{
989			display: flex !important;
990			align-items: center;
991		}
992
993			.ipsStreamItem_title > *{
994				flex: 0 1 auto;
995			}
996      
997			.ipsStreamItem_title .ipsContained{
998				width: auto;
999			}
1000
1001			/* Fix alignment on member search results */
1002			.cStream_members .ipsStreamItem_title{
1003				display: block !important;
1004			}
1005
1006		/* Neatly align last poster */
1007		/* Placed in the flex area due to IE11 issues */
1008		.ipsDataItem_lastPoster{
1009			line-height: 2rem;
1010			position: relative;
1011		}
1012		
1013			.ipsDataItem_lastPoster .ipsUserPhoto{
1014				top: 50%;
1015				position: absolute;
1016				margin: 0;
1017				transform: translateY(-50%);
1018			}
1019
1020			html[dir='ltr'] .ipsDataItem_lastPoster .ipsUserPhoto{
1021				left: 0;
1022			}
1023
1024			html[dir='rtl'] .ipsDataItem_lastPoster .ipsUserPhoto{
1025				right: 0;
1026				margin: 0;
1027			}
1028      
1029      /* Fix issues where Download thumbnails in table view are larger than the allocated width */
1030      /* Fix width of "Revoke this warning" cell */
1031      .cDownloadsCategoryTable .ipsDataItem_size3,
1032      form[data-role="moderationTools"] .ipsDataItem_generic.ipsDataItem_size3{
1033          width: auto;
1034      }
1035
1036	}
1037
1038}
1039
1040@supports (display: grid){
1041
1042	[data-ipsgrid-minitemsize="500"]{
1043		--grid-min: 400px;
1044	}
1045
1046	[data-ipsgrid-minitemsize="400"]{
1047		--grid-min: 400px;
1048	}
1049
1050	[data-ipsgrid-minitemsize="350"]{
1051		--grid-min: 350px;
1052	}
1053
1054	[data-ipsgrid-minitemsize="300"]{
1055		--grid-min: 300px;
1056	}
1057
1058	[data-ipsgrid-minitemsize="250"]{
1059		--grid-min: 250px;
1060	}
1061
1062	[data-ipsgrid-minitemsize="230"]{
1063		--grid-min: 230px;
1064	}
1065
1066	[data-ipsgrid-minitemsize="200"]{
1067		--grid-min: 200px;
1068	}
1069
1070	[data-ipsgrid-minitemsize="170"]{
1071		--grid-min: 170px;
1072	}
1073
1074	[data-ipsgrid-minitemsize="150"]{
1075		--grid-min: 150px;
1076	}
1077
1078	[data-ipsgrid-minitemsize="100"]{
1079		--grid-min: 100px;
1080	}
1081
1082	[data-ipsgrid-minitemsize="60"]{
1083		--grid-min: 60px;
1084	}
1085
1086	[data-ipsgrid-minitemsize="40"]{
1087		--grid-min: 40px;
1088	}
1089
1090	.ipsGrid{
1091		display: grid;
1092		grid-gap: var(--grid-gap);
1093		grid-template-columns: repeat(12, 1fr);
1094	}
1095
1096		/* Forces truncated text to work */
1097		.ipsGrid > *{
1098			min-width: 0;
1099		}
1100
1101	[data-ipsgrid-minitemsize]{
1102		--grid-fill: auto-fill;
1103		grid-template-columns: repeat(var(--grid-fill), minmax(calc(var(--grid-min) + var(--grid-gap)), 1fr));
1104	}
1105  
1106	.ipsGrid + .ipsGrid{
1107		margin-top: var(--grid-gap) !important;
1108	}
1109
1110		.ipsGrid > [class*="ipsGrid_span"]{
1111			width: auto !important;
1112			margin: 0 !important;
1113			float: none !important;
1114			height: auto !important;
1115		}
1116
1117		.ipsGrid::before,
1118		.ipsGrid::after{
1119			display: none;
1120		}
1121
1122	.cPromotedImages{
1123		--grid-gap: 0px;
1124	}
1125
1126	.ipsGrid:not([data-ipsgrid-minitemsize]) > .ipsGrid_span1{
1127		grid-column: span 1;
1128	}
1129
1130	.ipsGrid:not([data-ipsgrid-minitemsize]) > .ipsGrid_span2{
1131		grid-column: span 2;
1132	}
1133
1134	.ipsGrid:not([data-ipsgrid-minitemsize]) > .ipsGrid_span3{
1135		grid-column: span 3;
1136	}
1137
1138	.ipsGrid:not([data-ipsgrid-minitemsize]) > .ipsGrid_span4{
1139		grid-column: span 4;
1140	}
1141
1142	.ipsGrid:not([data-ipsgrid-minitemsize]) > .ipsGrid_span5{
1143		grid-column: span 5;
1144	}
1145
1146	.ipsGrid:not([data-ipsgrid-minitemsize]) > .ipsGrid_span6{
1147		grid-column: span 6;
1148	}
1149
1150	.ipsGrid:not([data-ipsgrid-minitemsize]) > .ipsGrid_span7{
1151		grid-column: span 7;
1152	}
1153
1154	.ipsGrid:not([data-ipsgrid-minitemsize]) > .ipsGrid_span8{
1155		grid-column: span 8;
1156	}
1157
1158	.ipsGrid:not([data-ipsgrid-minitemsize]) > .ipsGrid_span9{
1159		grid-column: span 9;
1160	}
1161
1162	.ipsGrid:not([data-ipsgrid-minitemsize]) > .ipsGrid_span10{
1163		grid-column: span 10;
1164	}
1165
1166	.ipsGrid:not([data-ipsgrid-minitemsize]) > .ipsGrid_span11{
1167		grid-column: span 11;
1168	}
1169
1170	.ipsGrid:not([data-ipsgrid-minitemsize]) > .ipsGrid_span12,
1171	.ipsGrid:not([data-ipsgrid-minitemsize]) > :not([class*="ipsGrid_span"]){
1172		grid-column: span 12;
1173	}
1174
1175	@media (max-width: 979px){
1176		.ipsGrid.ipsGrid_collapseTablet:not([data-ipsgrid-minitemsize]) > [class*="ipsGrid_span"]{
1177			grid-column: span 12;
1178		}
1179	}
1180
1181	@media (max-width: 767px){
1182		.ipsGrid.ipsGrid_collapsePhone:not([data-ipsgrid-minitemsize]) > [class*="ipsGrid_span"]{
1183			grid-column: span 12;
1184		}
1185	}
1186
1187	/* Ensure that grids don't span wider than the viewport on mobiles */
1188	@media (max-width: 550px){
1189		[data-ipsgrid-minitemsize="500"]{
1190			grid-template-columns: 1fr;
1191		}
1192	}
1193
1194	@media (max-width: 450px){
1195		[data-ipsgrid-minitemsize="400"]{
1196			grid-template-columns: 1fr;
1197		}
1198	}
1199
1200	@media (max-width: 400px){
1201		[data-ipsgrid-minitemsize="350"]{
1202			grid-template-columns: 1fr;
1203		}
1204	}
1205
1206	@media (max-width: 350px){
1207		[data-ipsgrid-minitemsize="300"]{
1208			grid-template-columns: 1fr;
1209		}
1210	}
1211
1212	/* Allow profile photos to wrap on clubs */
1213	.cClubCard .cClubCard_memberList{
1214		white-space: normal;
1215	}
1216
1217	/* Profile actions on mobiles */
1218	@media (max-width: 767px){
1219		header[data-role='profileHeader'] .ipsGrid{
1220			display: grid !important;
1221		}
1222	}
1223
1224	/* Profile followers */
1225	#elFollowers .ipsGrid{
1226		grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
1227		--grid-gap: 5px;
1228		padding: 5px;
1229		margin: 0px;
1230	}
1231
1232	#elFollowers .ipsGrid > li{
1233		grid-column: initial;
1234	}
1235  
1236  	/* Fix gallery albums in Calendar events */
1237    .cGalleryMiniAlbum{
1238        --grid-min: 210px;
1239    }
1240      .cGalleryMiniAlbum > li::before{
1241          content: '';
1242          display: block;
1243          padding-bottom: 100%;
1244      }
1245
1246}
1247
1248/* Fix any issues caused by flexbox and grid */
1249.cGalleryPatchwork_list,
1250.cPromotedWidgetItem,
1251#elMyClubsActivity .ipsStreamItem_snippet .ipsColumns,
1252#chatcontent .ipsDataItem,
1253.ipsWidget_horizontal[data-blockid^="app_forums_postFeed_"] .ipsDataItem{
1254	display: block;
1255}
1256
1257@media (min-width: 980px){
1258  .videoboxGridview .ipsDataItem{
1259    display: block;
1260  }
1261}
1262
1263
1264
1265/*
1266	----------------
1267	- Responsive classes
1268	----------------
1269*/
1270
1271@media screen and (min-width:980px){
1272	.hide-d{ display: none !important; }
1273}
1274@media screen and (max-width:979px){
1275	.hide-t{ display: none !important; }
1276}
1277@media screen and (max-width:767px){
1278	.hide-m{ display: none !important; }
1279}
1280
1281
1282
1283/*
1284	----------------
1285	- Header
1286	----------------
1287*/
1288
1289#ipsLayout_header{
1290	position: static;
1291	border: 0;
1292}
1293
1294#ipsLayout_header header > .ipsLayout_container{
1295	min-height: 0;
1296}
1297
1298#ipsLayout_header header{
1299	/* Reset header height */
1300	margin: 0;
1301	padding: 0;
1302	background: none;
1303}
1304
1305.header-align,
1306.secondary-header-align{
1307	display: -webkit-flex;
1308	display: flex;
1309	-webkit-align-items: center;
1310	align-items: center;
1311	-webkit-justify-content: space-between;
1312	justify-content: space-between;
1313}
1314
1315
1316
1317
1318/*
1319	----------------
1320	- Fixed header positioning
1321	----------------
1322*/
1323
1324@media screen and (min-width: 980px) {
1325
1326	.focus-fixed-header #ipsLayout_header{
1327		position: relative;
1328		z-index: 100;
1329	}
1330	.focus-fixed-header .ipsSticky_top{
1331		transform: translateY({theme="logoheight"}px);
1332	}
1333	.focus-fixed-header a[id^="comment-"]{
1334		top: -{expression="theme.logoheight + 1"}px;
1335	}
1336	.focus-fixed-header .cPostRating_controls{
1337		top: {expression="theme.logoheight + 10"}px;
1338	}
1339	.focus-fixed-header.focus-sticky-author .cAuthorPane_info{
1340		top: {theme="logoheight"}px;
1341	}
1342	
1343	
1344	.focus-fixed-nav #ipsLayout_header{
1345		position: relative;
1346		z-index: 100;
1347	}
1348	.focus-fixed-nav .ipsSticky_top{
1349		transform: translateY({theme="navigationheight"}px);
1350	}
1351	.focus-fixed-nav a[id^="comment-"]{
1352		top: -{expression="theme.navigationheight + 1"}px;
1353	}
1354	.focus-fixed-nav .cPostRating_controls{
1355		top: {expression="theme.navigationheight + 10"}px;
1356	}
1357	.focus-fixed-nav.focus-sticky-author .cAuthorPane_info{
1358		top: {theme="navigationheight"}px;
1359	}
1360	
1361	
1362	.focus-fixed-user #ipsLayout_header{
1363		position: relative;
1364		z-index: 100;
1365	}
1366	.focus-fixed-user .ipsSticky_top{
1367		transform: translateY({theme="userheight"}px);
1368	}
1369	.focus-fixed-user a[id^="comment-"]{
1370		top: -{expression="theme.userheight + 1"}px;
1371	}
1372	.focus-fixed-user .cPostRating_controls{
1373		top: {expression="theme.userheight + 10"}px;
1374	}
1375	.focus-fixed-user.focus-sticky-author .cAuthorPane_info{
1376		top: {theme="userheight"}px;
1377	}
1378	
1379}
1380
1381
1382		
1383/*
1384	----------------
1385	- Logo
1386	----------------
1387*/
1388
1389.logo-wrap{
1390	-webkit-flex: 0 1 auto;
1391	display: -webkit-flex;
1392	-webkit-justify-content: center;
1393
1394	flex: 0 1 auto;
1395	display: flex;
1396	justify-content: center;
1397}
1398
1399@media (max-width: 979px){
1400	.logo-wrap{
1401		-webkit-flex: 1 1 auto;
1402		flex: 1 1 auto;
1403	}
1404}
1405
1406a.logo{
1407	color: {theme="logo_color"};
1408}
1409
1410.logo{
1411	height: {theme="logoheight"}px;
1412	max-height: {theme="logoheight"}px;
1413	font-size: {theme="logosize"}px;
1414	line-height: 1;
1415	display: -webkit-flex;
1416	display: flex;
1417	-webkit-align-items: center;
1418	align-items: center;
1419	white-space: nowrap;
1420}
1421
1422	.logo img{
1423		max-height: inherit;
1424		max-width: 100%;
1425	}
1426
1427	.logo-name{
1428		display: block;
1429		line-height: 1;
1430	}
1431	
1432	.logo-slogan{
1433		font-size: 0.5em;
1434		line-height: 1;
1435		display: block;
1436		padding-top: 0.8em;
1437		color: {hextorgb="logo_color" opacity="0.7"};
1438	}
1439
1440
1441
1442@media screen and (max-width: 979px){
1443	
1444	.logo{
1445		height: {theme="logoheightr"}px;
1446		max-height: {theme="logoheightr"}px;
1447		font-size: {theme="logosizer"}px;
1448		padding: 0 10px;
1449		-webkit-justify-content: center;
1450		justify-content: center;
1451		text-align: center;
1452	}
1453	
1454}
1455
1456/* Bug fix for safari: Make sure wide logos don't extend beyond browser width */
1457#header .flex00,
1458#header .logo-wrap{ max-width: 100%; }
1459
1460
1461/*
1462	----------------
1463	- User links
1464	----------------
1465*/
1466
1467.user-links{
1468	-webkit-flex: 0 0 auto;
1469	flex: 0 0 auto;
1470}
1471
1472.ipsApp #elUserNav{
1473	line-height: {theme="userheight"}px;
1474	font-weight: bold;
1475}
1476
1477#elUserNav{
1478	position: static;
1479	display: -webkit-flex;
1480	display: flex;
1481	-webkit-align-items: center;
1482	align-items: center;
1483}
1484
1485#elUserNav strong{
1486	font-weight: inherit;
1487}
1488
1489#elUserNav > li > a#elRegisterButton{
1490	color: inherit;
1491}
1492
1493@media screen and (max-width:979px){
1494	.ipsApp .user-links{
1495		display: none;
1496	}
1497}
1498
1499	#elUserNav > li{
1500		-webkit-flex: 0 0 auto;
1501		flex: 0 0 auto;
1502		margin: 0;
1503		background-clip: padding-box !important;
1504	}
1505	
1506	/* Force hidden class since it doesn't always apply */
1507	#elUserNav .ipsHide{ display: none !important; }
1508	
1509	
1510	/* Borders on list items */
1511	#elUserNav > li.elUserNav_sep{
1512		display: none;
1513	}
1514	
1515	#elUserNav > li{
1516		border: 1px solid transparent;
1517		border-width: 0px;
1518	}
1519	
1520	.user-links:not(.user-links-sep) #elUserNav > li{
1521		border-radius: 0px;
1522	}
1523	
1524		.user-links:not(.user-links-sep) #elUserNav > li:first-child{
1525			border-top-left-radius: inherit;
1526			border-bottom-left-radius: inherit;
1527		}
1528		
1529		.user-links:not(.user-links-sep) #elUserNav > li:last-child{
1530			border-top-right-radius: inherit;
1531			border-bottom-right-radius: inherit;
1532		}
1533	
1534	.user-links-b #elUserNav > li{
1535		border-width: 0 1px 0 0;
1536	}
1537	
1538	html[dir='rtl'] .user-links-b #elUserNav > li{
1539		border-width: 0 0 0 1px;
1540	}
1541	
1542		html[dir] .user-links-b #elUserNav > li:last-child{
1543			border-width: 0;
1544		}
1545	
1546	/* Display sep items and remove borders */
1547	.user-links-sep #elUserNav > li.elUserNav_sep{
1548		display: block;
1549		width: 2px;
1550		background: currentColor;
1551		opacity: 0.2;
1552		border-radius: 3px;
1553		height: {theme="userheight"}px;
1554	}
1555	.user-links-sep #elUserNav > li{
1556		border-width: 0;
1557	}
1558	
1559	
1560	/* Push cart to the end */
1561	#elCart_sep{ order: 10; }
1562	#elCart_container{ order: 11; }
1563		
1564	#elUserNav > li > a{	
1565		font-size: inherit;
1566		color: inherit;
1567		line-height: inherit;
1568		display: inline-block;
1569		padding: 0 12px;
1570		vertical-align: top;
1571	}
1572
1573		#elUserNav > li > a.ipsUserPhoto{
1574			background: none;
1575			display: block;
1576			line-height: 1px;
1577			
1578			margin: 0;
1579			padding: 4px;
1580			
1581			{{if theme.rounded_photos}}
1582			border-radius: 50%;
1583			{{else}}
1584			border-radius: 0;
1585			{{endif}}
1586		}
1587		
1588			#elUserNav .ipsUserPhoto img{
1589				width: auto;
1590				height: {expression="theme.userheight - 8"}px;
1591				max-width: 100%;
1592				border-radius: inherit;
1593				vertical-align: top;
1594			}
1595			
1596				#elUserNav .ipsUserPhoto:before,
1597				#elUserNav .ipsUserPhoto:after{
1598					top: 4px; left: 4px; right: 4px; bottom: 4px;
1599				}
1600	
1601	.cUserNav_icon .fa{
1602		line-height: inherit;
1603		vertical-align: top;
1604	}
1605	
1606	#cUserLink .fa,
1607	#cCreate .fa{
1608		vertical-align: middle;
1609	}
1610	
1611	body.ipsApp #elUserNav .ipsNotificationCount{
1612		left: auto;
1613		right: -3px;
1614		top: -3px;
1615		border-radius: 3px;
1616	}
1617	
1618		html[dir='rtl'] #elUserNav .ipsNotificationCount{
1619			right: auto;
1620			left: -3px;
1621		}
1622
1623/* Social sign in */
1624#elUserNav .cShareLink{
1625	line-height: 28px;
1626	vertical-align: middle;
1627	padding: 0;
1628	margin: 0 8px;
1629}
1630
1631/* Modified icons */
1632.cNotifications .fa-bell:before{ content: "\f0ac"; }
1633.cInbox .fa-envelope:before{ content: "\f086"; }
1634.cReports .fa-warning:before{ content: "\f071"; }
1635
1636/* Bug fix: Restore size of Sign in arrow if popups are disabled */
1637#elUserNav #elSignInLink .fa{ font-size: 14px; }
1638
1639
1640/* User link dropdown menu icons */
1641#elUserLink_menu a{ line-height: 16px; }
1642#elCreateNew_menu a{ line-height: 20px; }
1643
1644#elUserLink_menu a:before,
1645#elCreateNew_menu a:before{
1646	content: '\f0c9';
1647	width: 22px;
1648	font-size: 14px;
1649	display: inline-block;
1650	font-family: 'FontAwesome';
1651	font-style: normal;
1652	font-weight: normal;
1653	vertical-align: top;
1654	-webkit-font-smoothing: antialiased;
1655	-moz-osx-font-smoothing: grayscale;
1656	transform: translate(0,1px);
1657}
1658
1659html[dir='rtl'] #elUserLink_menu a:before,
1660html[dir='rtl'] #elCreateNew_menu a:before{
1661	margin-right: 0;
1662	margin-left: 6px;
1663}
1664
1665#elUserLink_menu li[data-menuItem='profile'] a:before {
1666	content:"\f007"
1667}
1668#elUserLink_menu li[data-menuItem='messages'] a:before {
1669	content:"\f01c"
1670}
1671#elUserLink_menu li[data-menuItem='promote'] a:before {
1672	content:"\f005"
1673}
1674#elUserLink_menu li[data-menuItem='manageFollowed'] a:before {
1675	content:"\f1d8"
1676}
1677#elUserLink_menu li[data-menuItem='attachments'] a:before {
1678	content:"\f0c6"
1679}
1680#elUserLink_menu li[data-menuItem='settings'] a:before {
1681	content:"\f013"
1682}
1683#elUserLink_menu li[data-menuItem='ignoredUsers'] a:before {
1684	content:"\f05e"
1685}
1686#elUserLink_menu li[data-menuItem='modcp'] a:before {
1687	content:"\f046"
1688}
1689#elUserLink_menu li[data-menuItem='admincp'] a:before {
1690	content:"\f023";
1691}
1692#elUserLink_menu li[data-menuItem='signout'] a:before {
1693	content:"\f08b";
1694	width: 18px;
1695}
1696#elCreateNew_menu a:before {
1697	content:"\f0fe"
1698}
1699#elCreateNew_menu a[href*="/forum/"]:before {
1700	content:"\f086"
1701}
1702#elCreateNew_menu a[href*="announcements"]:before {
1703	content:"\f0a1"
1704}
1705#elCreateNew_menu a[data-role="updateStatus"]:before {
1706	content:"\f086"
1707}
1708#elCreateNew_menu a[href*="/files/"]:before {
1709	content:"\f019"
1710}
1711#elCreateNew_menu a[href*="/gallery/"]:before {
1712	content:"\f03e"
1713}
1714#elCreateNew_menu a[href*="/blogs/"]:before {
1715	content:"\f02d"
1716}
1717#elCreateNew_menu a[href*="/calendar/"]:before {
1718	content:"\f073"
1719}
1720#elCreateNew_menu a[href*="/articles"]:before {
1721	content:"\f0f6"
1722}
1723
1724#elUserLink_menu li[data-menuItem='admincp'] i {
1725	display:none;
1726}
1727
1728
1729
1730/*
1731	----------------
1732	- Navigation
1733	----------------
1734*/
1735
1736/* Loading and More classes */
1737.focus-nav-hidden{
1738	position: absolute !important;
1739	pointer-events: none;
1740	z-index: -1;
1741	right: 0;
1742	visibility: hidden;
1743}
1744	.focus-nav-hidden .ipsNavBar_secondary{
1745		display: none !important;
1746	}
1747	
1748.focus-nav-loading{ overflow: hidden; }
1749
1750.focus-nav{
1751	-webkit-flex: 1 1 auto;
1752	flex: 1 1 auto;
1753}
1754
1755/* Hide nav-bar on tablets */
1756@media screen and (max-width:979px){
1757	.ipsApp .nav-bar,
1758	.ipsApp .focus-nav{
1759		display: none;
1760	}
1761}
1762
1763/* Reset defaults */
1764#ipsLayout_header nav{
1765	background: transparent;
1766	height: auto;
1767}
1768
1769.ipsNavBar_primary{
1770	padding: 0;
1771	border-radius: 0;
1772	font-size: 0;
1773	top: auto;
1774}
1775
1776	/* Align links */
1777	.ipsNavBar_primary{
1778		text-align: left;
1779	}
1780	
1781	html[dir='rtl'] .ipsNavBar_primary{
1782		text-align: right;
1783	}
1784	
1785		/* Align navigation links to the right */
1786		.focus-nav-right .ipsNavBar_primary{
1787			text-align: right;
1788		}
1789		
1790		html[dir='rtl'] .focus-nav-right .ipsNavBar_primary{
1791			text-align: left;
1792		}
1793		
1794		/* Revert text alignment for submenus */
1795		html[dir='ltr'] .ipsApp .ipsNavBar_primary .ipsNavBar_secondary,
1796		html[dir='ltr'] .ipsApp .ipsNavBar_primary .ipsMenu{
1797			text-align: left;
1798		}
1799		
1800		html[dir='rtl'] .ipsApp .ipsNavBar_primary .ipsNavBar_secondary,
1801		html[dir='rtl'] .ipsApp .ipsNavBar_primary .ipsMenu{
1802			text-align: right;
1803		}
1804
1805.ipsNavBar_primary > ul{
1806	max-height: {theme="navigationheight"}px;
1807}
1808
1809.ipsNavBar_primary > ul,
1810.ipsNavBar_secondary{
1811	list-style: none;
1812}
1813	
1814	html[dir="ltr"] .ipsNavBar_primary > ul > li,
1815	html[dir="ltr"] .ipsNavBar_secondary > li,
1816	html[dir="rtl"] .ipsNavBar_primary > ul > li,
1817	html[dir="rtl"] .ipsNavBar_secondary > li{
1818		float: none;
1819	}
1820
1821	.ipsNavBar_primary > ul > li{
1822		vertical-align: top;
1823		background-clip: padding-box;
1824	}
1825	
1826	body.ipsApp .ipsNavBar_primary > ul > li > a{
1827		margin: 0;
1828	}
1829	
1830	.ipsNavBar_primary > ul > li > a{
1831		border-radius: 0;
1832		padding: 0px 20px;
1833		font-size: inherit;
1834		line-height: {theme="navigationheight"}px;
1835	}
1836	
1837	/* Reset link text and background */
1838	.ipsNavBar_primary > ul > li > a,
1839	.ipsNavBar_primary > ul > li.ipsNavBar_active > a,
1840	.ipsNavBar_primary > ul > li > a:hover{
1841		background: none;
1842		color: inherit;
1843	}
1844		
1845		/* Hover link */
1846		.ipsNavBar_primary > ul > li:hover > a{
1847			color: {theme="main_nav_font"};
1848		}
1849		
1850		/* Active link */
1851		.ipsNavBar_primary > ul > li[data-active] > a{
1852			color: {theme="main_nav_font"};
1853		}
1854
1855
1856/*
1857	----------------
1858	- Navigation icons
1859	----------------
1860*/
1861
1862.ipsNavBar_primary a::before{
1863	content: "\f0f6";
1864	font-family: "FontAwesome";
1865	font-size: 14px;
1866	font-weight: normal;
1867	display: inline-block;
1868	text-rendering: auto;
1869	-webkit-font-smoothing: antialiased;
1870	-moz-osx-font-smoothing: grayscale;
1871	{prefix="transform" value="translate(0,0)"}
1872	margin-right: 4px;
1873	opacity: 0.6;
1874	line-height: 1;
1875	vertical-align: middle;
1876}
1877
1878	html[dir='rtl'] .ipsNavBar_primary a::before{
1879		margin-right: 0;
1880		margin-left: 4px;
1881	}
1882
1883/* Remove from indented list */
1884.ipsNavBar_secondary .ipsNavBar_secondary > li > a::before{
1885	display: none;
1886}
1887
1888.ipsNavBar_secondary > li > a::before{
1889	width: 16px;
1890}
1891
1892.ipsNavBar_primary li > a.ipsNavBar_community_home::before{ content: "\f015" }
1893.ipsNavBar_primary li[data-navapp="nexus"] > a::before{ content: "\f07a" }
1894.ipsNavBar_primary li[data-navext="Support"] > a::before{ content: "\f1cd" }
1895.ipsNavBar_primary li[data-navapp="forums"] > a::before{ content: "\f086" }
1896.ipsNavBar_primary li[data-navapp="gallery"] > a::before{ content: "\f030" }
1897.ipsNavBar_primary li[data-navapp="downloads"] > a::before{ content: "\f019" }
1898.ipsNavBar_primary li[data-navapp="cms"] > a::before{ content: "\f15c" }
1899.ipsNavBar_primary li[data-navapp="blog"] > a::before{ content: "\f02d" }
1900.ipsNavBar_primary li[data-navapp="calendar"] > a::before{ content: "\f073" }
1901.ipsNavBar_primary li[data-navapp="chat"] > a::before{ content: "\f27a" }
1902.ipsNavBar_primary li[data-navext="StaffDirectory"] > a::before{ content: "\f007" }
1903.ipsNavBar_primary li[data-navext="OnlineUsers"] > a::before{ content: "\f0c0" }
1904.ipsNavBar_primary li[data-navext="Search"] > a::before{ content: "\f002" }
1905.ipsNavBar_primary li[data-navext="Guidelines"] > a::before{ content: "\f071" }
1906.ipsNavBar_primary li[data-navext="Leaderboard"] > a::before{ content: "\f091" }
1907.ipsNavBar_primary li[data-navext="Clubs"] > a::before{ content: "\f0c0" }
1908.ipsNavBar_primary li[data-navext="Promoted"] > a::before{ content: "\f14a" }
1909.ipsNavBar_primary li > a[href*="/discover/"]::before{ content: "\f0f6" }
1910.ipsNavBar_primary li[data-navext="AllActivity"] > a::before{ content: "\f0ac" }
1911.ipsNavBar_primary li[data-navext="YourActivityStreams"] > a::before{ content: "\f03a" }
1912.ipsNavBar_primary li[data-navext="YourActivityStreamsItem"] > a[href*='discover/unread']:before{ content: "\f0c5" }
1913.ipsNavBar_primary li[data-navext="YourActivityStreamsItem"] > a[href*='discover/content-started']:before{ content: "\f234" }
1914.ipsNavBar_primary #elBackHome:before{ content: "\f0a8" }
1915.ipsNavBar_primary #elNavigationMore > a::before,
1916.ipsNavBar_primary .focus-nav-more > a::before{ content: "\f0c9" }
1917/* Setting icons for default links may not work correctly if certain addons aren't installed */
1918#elNavSecondary_1 > a::before{ content: "\f03a" }
1919#elNavSecondary_2 > a::before{ content: "\f0a1" }
1920
1921html[dir='ltr'] .nav-arrow > .fa-caret-down{ margin-left: 4px; }
1922html[dir='rtl'] .nav-arrow > .fa-caret-down{ margin-right: 4px; }
1923
1924/* Hide arrow from dropdown child links since one already exists */
1925.ipsNavBar_secondary .nav-arrow > .fa-caret-down{
1926	display: none;
1927}
1928
1929
1930/*
1931	----------------
1932	- Dropdown Navigation Menus
1933	----------------
1934*/
1935
1936	/* Hide secondary nav bar */
1937	.ipsNavBar_primary:not(.ipsNavBar_noSubBars) > ul:before,
1938	#ipsLayout_header nav.ipsNavBar_noSubBars:after{
1939		display: none;
1940	}
1941
1942	.ipsNavBar_primary > ul > li{
1943		position: relative;
1944	}
1945	
1946	.ipsNavBar_primary > ul > li:hover{
1947		z-index: 1;
1948	}
1949	
1950		.ipsNavBar_secondary{
1951			background: currentColor;
1952			border-color: currentColor; /* Arrow */			
1953			
1954			min-width: 175px;
1955			border-radius: 0px 0px 3px 3px;
1956			display: block !important;
1957			top: 100%; left: 0; right: auto; bottom: auto;
1958			z-index: auto;
1959			height: auto;
1960			white-space: nowrap;
1961			pointer-events: none;
1962			
1963			transform-origin: 50% 0;
1964			opacity: 0;
1965			visibility: hidden;
1966			transition: all 0.2s ease-in-out 0s, visibility 0s linear 0.2s;
1967			
1968			top: calc(100% + 8px);
1969			border-radius: 3px;
1970			transform: translateY(6px);
1971			padding-top: 5px;
1972		}
1973		
1974		/* Hover */
1975		.ipsNavBar_primary > ul > li:hover .ipsNavBar_secondary{
1976			pointer-events: auto;
1977
1978			visibility: visible;
1979			opacity: 1;
1980			transition-delay: 0s, 0s;
1981			
1982			transform: translateY(0);
1983		}
1984			
1985			/* Align last menu to the right if they exist, and for RTL */
1986			html[dir='rtl'] .ipsNavBar_secondary,
1987			.focus-nav-right .ipsNavBar_primary > ul > li:nth-last-of-type(1) > .ipsNavBar_secondary,
1988			.focus-nav-right .ipsNavBar_primary > ul > li:nth-last-of-type(2) > .ipsNavBar_secondary,
1989			.focus-nav-right .ipsNavBar_primary > ul > li:nth-last-of-type(3) > .ipsNavBar_secondary,
1990			.ipsNavBar_primary > ul > li.focus-nav-more > .ipsNavBar_secondary{
1991				right: 0;
1992				left: auto;
1993			}
1994			
1995			/* Above, but for RTL */
1996			html[dir="rtl"] .focus-nav-right .ipsNavBar_primary > ul > li:nth-last-of-type(1) > .ipsNavBar_secondary,
1997			html[dir="rtl"] .focus-nav-right .ipsNavBar_primary > ul > li:nth-last-of-type(2) > .ipsNavBar_secondary,
1998			html[dir="rtl"] .focus-nav-right .ipsNavBar_primary > ul > li:nth-last-of-type(3) > .ipsNavBar_secondary,
1999			html[dir='rtl'] .ipsNavBar_primary > ul > li.focus-nav-more > .ipsNavBar_secondary{
2000				right: auto;
2001				left: 0;
2002			}
2003		
2004		/* Dropdown menu arrow */
2005		.ipsNavBar_primary > ul > li > .ipsNavBar_secondary:before{
2006			content: "";
2007			position: absolute;
2008			top: -6px; left: 20px;
2009			border: 6px solid transparent;
2010			border-top: 0;
2011			border-bottom-color: currentColor;
2012		}
2013		
2014			html[dir='rtl'] .ipsNavBar_primary > ul > li > .ipsNavBar_secondary:before,	
2015			.focus-nav-right .ipsNavBar_primary > ul > li:nth-last-of-type(1) > .ipsNavBar_secondary:before,
2016			.focus-nav-right .ipsNavBar_primary > ul > li:nth-last-of-type(2) > .ipsNavBar_secondary:before,
2017			.focus-nav-right .ipsNavBar_primary > ul > li:nth-last-of-type(3) > .ipsNavBar_secondary:before,
2018			.ipsNavBar_primary > ul > li.focus-nav-more > .ipsNavBar_secondary:before{
2019				left: auto;
2020				right: 20px;
2021			}
2022			
2023			/* Above, but for RTL */
2024			html[dir='rtl'] .focus-nav-right .ipsNavBar_primary > ul > li:nth-last-of-type(1) > .ipsNavBar_secondary:before,
2025			html[dir='rtl'] .focus-nav-right .ipsNavBar_primary > ul > li:nth-last-of-type(2) > .ipsNavBar_secondary:before,
2026			html[dir='rtl'] .focus-nav-right .ipsNavBar_primary > ul > li:nth-last-of-type(3) > .ipsNavBar_secondary:before,
2027			html[dir='rtl'] .ipsNavBar_primary > ul > li.focus-nav-more > .ipsNavBar_secondary:before{
2028				right: auto;
2029				left: 20px;
2030			}
2031		
2032			/* Cover gap with pseudo element */
2033			.ipsNavBar_primary > ul > li > .ipsNavBar_secondary:after{
2034				content: "";
2035				position: absolute;
2036				top: -8px;
2037				left: 0; right: 0;
2038				height: 8px;
2039			}
2040
2041		
2042		html .ipsApp .ipsNavBar_secondary > li{
2043			display: block;
2044			float: none;
2045		}
2046		
2047		/* Force hide More menu in dropdowns */
2048		html .ipsApp .ipsNavBar_secondary > li.ipsHide{
2049			display: none;
2050		}
2051
2052		.ipsNavBar_secondary,
2053		.ipsNavBar_primary > ul > li .ipsMenu{
2054			font-size: 1.2rem;
2055		}
2056		
2057		.ipsNavBar_secondary > li > a{
2058			font-size: inherit;
2059			float: none;
2060			text-align: left;
2061			white-space: nowrap;
2062			line-height: 1.3;
2063		}
2064
2065			html[dir='rtl'] .ipsNavBar_secondary > li > a{
2066				text-align: right;
2067			}
2068		
2069		html[dir='ltr'] .ipsNavBar_secondary > li > a{
2070			padding: 12px 24px 12px 12px;
2071		}
2072		
2073		html[dir='rtl'] .ipsNavBar_secondary > li > a{
2074			padding: 12px 12px 12px 24px;
2075		}
2076		
2077			.ipsNavBar_secondary > li > a:hover{
2078				color: {theme="main_nav_tab_font"};
2079			}
2080		
2081		.ipsNavBar_secondary li:last-of-type,
2082		.ipsNavBar_secondary li:last-of-type a:not(.ipsButton){
2083			border-bottom-left-radius: inherit;
2084			border-bottom-right-radius: inherit;
2085		}
2086			
2087			
2088
2089
2090
2091/* Attached dropdown menus */
2092.focus-attached-dropdowns .ipsNavBar_secondary{
2093	transform: scaleY(0.7);
2094	top: auto;
2095	border-top-left-radius: 0px;
2096	border-top-right-radius: 0px;
2097	padding: 0;
2098}
2099
2100	.focus-attached-dropdowns .ipsNavBar_primary > ul > li:hover .ipsNavBar_secondary{
2101		transform: scaleY(1);
2102	}
2103
2104	/* Hide dropdown arrow */
2105	.focus-attached-dropdowns .ipsNavBar_primary > ul > li > .ipsNavBar_secondary:before,
2106	.focus-attached-dropdowns .ipsNavBar_primary > ul > li > .ipsNavBar_secondary:after{
2107		display: none;
2108	}
2109
2110
2111
2112
2113/* Navigation on minimal pages */
2114.ipsNavBar_primary.ipsNavBar_noSubBars{
2115	padding: 0;
2116	margin: 0;
2117}
2118#ipsLayout_header nav.ipsNavBar_noSubBars,
2119.ipsLayout_minimal #ipsLayout_header nav{
2120	margin: 0;
2121}
2122
2123
2124/* Secondary menus in dropdowns */
2125.ipsNavBar_secondary .ipsNavBar_secondary{
2126	position: static !important;
2127	z-index: auto !important;
2128	color: {hextorgb="main_nav_tab_font" opacity="0.6"};
2129	transform: none;
2130	transition: none;
2131	opacity: 1;
2132	padding: 0;
2133	min-width: 0;
2134	max-width: none;
2135	width: inherit;
2136	border: 0;
2137	border-radius: 0;
2138	box-shadow: inset {hextorgb="main_nav_tab_font" opacity="0.08"} 0px 1px 0px, inset {hextorgb="main_nav_tab_font" opacity="0.08"} 0px -1px 0px;
2139	background: {hextorgb="main_nav_tab_font" opacity="0.04"};
2140}
2141
2142	/* Push in links */
2143	html[dir='ltr'] .ipsNavBar_secondary .ipsNavBar_secondary > li > a{
2144		padding-left: 36px;
2145	}
2146	
2147	html[dir='rtl'] .ipsNavBar_secondary .ipsNavBar_secondary > li > a{
2148		padding-right: 36px;
2149	}
2150	
2151	/* Remove inherited font-weight from active, but apply to actual active link */
2152	.ipsNavBar_secondary .ipsNavBar_secondary > li a,
2153	.ipsNavBar_secondary .ipsMenu > li a{
2154		font-weight: normal;
2155	}
2156	
2157	.ipsNavBar_secondary .ipsNavBar_secondary > li[data-active] a{
2158		font-weight: bold;
2159	}
2160
2161	.ipsNavBar_secondary [data-musheddropdown] > .ipsMenu_item > a{
2162		color: {hextorgb="main_nav_tab_font" opacity="0.6"};
2163	}
2164	
2165	.ipsNavBar_secondary [data-musheddropdown] > .ipsMenu_item > a:hover{
2166		color: {theme="main_nav_tab_font"};
2167		background-color: {hextorgb="main_nav_tab_font" opacity="0.05"} !important;
2168	}
2169
2170	.ipsNavBar_primary .ipsMenu > li > a{
2171		color: inherit;
2172	}
2173	
2174		.ipsNavBar_primary .ipsMenu > li > a:before{
2175			display: none;
2176		}
2177	
2178	/* Align arrow icons inside .ipsNavBar_secondary parent links */
2179	.ipsNavBar_secondary > li > a .fa-caret-down{
2180		position: absolute;
2181		right: 10px;
2182		margin-top: 2px;
2183	}
2184	
2185	html[dir='rtl'] .ipsNavBar_secondary > li > a .fa-caret-down{
2186		right: auto;
2187		left: 10px;
2188	}
2189	
2190	/* Bug fix: Remove duplicate FA arrow on IPS dropdown links when their parent is inside the More menu */
2191	.ipsNavBar_secondary .ipsMenu_subItems .fa-caret-down{ display: none; }
2192	
2193	/* Bug fix: Assign correct colour to ipsButton in navigation dropdown menus */
2194	.ipsNavBar_secondary a.ipsButton_primary{
2195		background-color: {theme="primary_button"} !important;
2196	}
2197	.ipsNavBar_primary .ipsMenu > li > a.ipsButton_primary{
2198		color: {theme="primary_button_font"};
2199	}
2200
2201
2202/*
2203	----------------
2204	- Mobile navigation header
2205	----------------
2206*/
2207
2208.mobile-nav-wrap{
2209	position: relative;
2210	z-index: 510;
2211}
2212
2213@media (min-width: 980px){
2214	.mobile-nav-wrap{
2215		display: none;
2216	}
2217}
2218
2219@media (max-width: 979px){
2220	#elMobileNav{
2221		display: flex !important;
2222	}
2223}
2224
2225#elMobileNav{
2226	background: {theme="mobile_back"};
2227	position: relative;
2228	z-index: 10;
2229	justify-content: flex-end;
2230	align-items: center;
2231}
2232
2233	#elMobileNav li{
2234		flex: 0 0 auto;
2235	}
2236
2237	#elMobileNav #elMobileBreadcrumb{
2238		flex: 0 1 auto;
2239		position: relative;
2240		top: auto;
2241		left: auto;
2242		right: auto;
2243		margin-right: auto;
2244		margin-left: 20px;
2245		color: {hextorgb="mobile_back_font" opacity="0.25"};
2246		background-color: currentColor;
2247	}
2248		html[dir='rtl'] #elMobileNav #elMobileBreadcrumb{
2249			margin-left: auto;
2250			margin-right: 20px;
2251		}
2252
2253		html[dir="ltr"] #elMobileBreadcrumb{ border-radius: 0px 3px 3px 0px; }
2254		html[dir="rtl"] #elMobileBreadcrumb{ border-radius: 3px 0px 0px 3px; }
2255
2256		#elMobileBreadcrumb a{
2257			max-width: none;
2258			display: block;
2259		}
2260
2261		#elMobileBreadcrumb:before{ color: inherit; }
2262
2263		html[dir="ltr"] #elMobileBreadcrumb:before{
2264			border-color: transparent transparent currentColor currentColor;
2265		}
2266
2267		html[dir="rtl"] #elMobileBreadcrumb:before{
2268			border-color: currentColor currentColor transparent transparent;
2269		}
2270
2271
2272	html[dir='ltr'] #elMobileBreadcrumb + li{
2273		margin-left: 10px;
2274	}
2275
2276	html[dir='rtl'] #elMobileBreadcrumb + li{
2277		margin-right: 10px;
2278	}
2279
2280	#elMobileNav li:not( #elMobileBreadcrumb ) a {
2281		color: {theme="mobile_back_font"};
2282		width: 40px;
2283		font-size: 20px;
2284	}
2285
2286
2287#elMobileNav .icon-newspaper{
2288	font-size: inherit;
2289	vertical-align: baseline;
2290}
2291
2292	#elMobileNav .icon-newspaper:before{
2293		content: "\f15c";
2294	}
2295
2296
2297
2298
2299
2300/* Modify button borders */
2301#elMobileDrawer .ipsButton:after{
2302	border-color: transparent;
2303	border-top-color: rgba(255,255,255,0.1);
2304}
2305
2306.ipsDrawer_menu{
2307	background: #212121;
2308}
2309	.ipsDrawer_menu .ipsButton_light{
2310		background: rgba(255,255,255,0.1);
2311		color: #fff;
2312		border: 0;
2313	}
2314	
2315	.ipsDrawer_menu .cUserNav_icon a{ color: #eee; }
2316	
2317	
2318	
2319/*
2320	----------------
2321	- Search
2322	----------------
2323*/
2324
2325.ipsfocus-search{
2326	width: 300px;
2327	height: {theme="searchheight"}px;
2328	line-height: {theme="searchheight"}px;
2329	-webkit-flex: 0 0 auto;
2330	flex: 0 0 auto;
2331	position: relative;
2332	z-index: 5;
2333}
2334
2335	html[dir='ltr'] .ipsfocus-search{
2336		padding-left: 10px;
2337	}
2338
2339	html[dir='rtl'] .ipsfocus-search{
2340		padding-right: 10px;
2341	}
2342
2343/* Hide search from navigation bar due to custom location */
2344.ipsNavBar_primary #elSearchWrapper{
2345	display: none;
2346}
2347
2348#elSearch{
2349	padding: 0;
2350}
2351	
2352	/* Border radius */
2353	#elSearch form{ border-radius: inherit; }
2354	
2355	/* Dimensions */
2356	#elSearch,
2357	#elSearch form,
2358	#elSearch input[type="search"],
2359	#elSearch button {
2360		height: inherit;
2361		line-height: inherit;
2362	}
2363	
2364	#elSearch form{
2365		position: relative;
2366	}
2367	
2368	/* Text colour */
2369	#elSearch input,
2370	#elSearch button{
2371		color: inherit;
2372	}
2373	
2374	/* Placeholder */
2375	#elSearch ::-webkit-input-placeholder { opacity: 0.8; color: inherit; }
2376	#elSearch :-ms-input-placeholder { opacity: 0.8; color: inherit; }
2377	#elSearch ::placeholder { opacity: 0.8; color: inherit; }
2378
2379	/* Button */
2380	#elSearch button{
2381		cursor: pointer;
2382		line-height: inherit !important;
2383		padding: 0 10px;
2384		border: 0;
2385		background: none;
2386		border-radius: inherit;
2387		position: relative;
2388		min-width: 36px;
2389		min-width: var(--search-button-width);
2390	}
2391
2392		html[dir='ltr'] #elSearch button{
2393			border-top-left-radius: 0;
2394			border-bottom-left-radius: 0;
2395		}
2396
2397		html[dir='rtl'] #elSearch button{
2398			border-top-right-radius: 0;
2399			border-bottom-right-radius: 0;
2400		}
2401
2402		#elSearch button::before{
2403			content: '';
2404			position: absolute; top: 0; left: 0; right: 0; bottom: 0;
2405			border-radius: inherit;
2406			background: currentColor;
2407			opacity: 0.05;
2408		}
2409
2410			#elSearch button:hover::before{
2411				opacity: 0.1;
2412			}
2413	
2414		#elSearch button .fa{
2415			line-height: inherit;
2416			display: block;
2417		}
2418
2419	/* Advanced search dropdown */
2420	#elSearchExpanded{
2421		padding: 0;
2422		line-height: 1.6;
2423		border: 0;
2424		top: 100%;
2425		left: 0;
2426		right: auto;
2427		margin-top: 8px;
2428		border-radius: 4px;
2429		width: 100%;
2430		width: calc(100% - var(--search-button-width));
2431		box-shadow: {hextorgb="text_color" opacity="0.25"} 0px 0px 0px 1px, 0px 1px 4px rgba(0,0,0,0.1), rgba(0,0,0,0.4) 0px 40px 50px;
2432		color: {theme="text_light"};
2433		background: {theme="area_background_reset"};
2434		border-color: {theme="area_background_reset"};
2435	}
2436
2437		html[dir="rtl"] #elSearchExpanded{
2438			right: 0;
2439			left: auto;
2440		}
2441
2442		/* Menu arrow */
2443		#elSearchExpanded:before,
2444		#elSearchExpanded:after{
2445			content: '';
2446			box-sizing: border-box;
2447			border: 6px solid transparent;
2448			position: absolute;
2449			top: -12px;
2450			left: 12px;
2451			border-bottom-color: inherit;
2452		}
2453
2454			#elSearchExpanded:before{
2455				border-bottom-color: {hextorgb="text_color" opacity="0.25"};
2456				margin-top: -1px;
2457			}
2458
2459		/* Title */
2460		#elSearchExpanded .ipsMenu_title{
2461			border: 0;
2462			border-radius: 0;
2463			background: none;
2464			color: {theme="text_dark"};
2465		}
2466
2467			#elSearchExpanded .ipsMenu_title:not(:first-child){
2468				margin-top: 20px;
2469			}
2470
2471		/* List wrapper */
2472		#elSearchExpanded .ipsSideMenu_list{
2473			margin: 0 !important;
2474			background: none;
2475			border: 0;
2476			padding: 0 8px;
2477		}
2478
2479			#elSearchExpanded .ipsSideMenu_list:last-child{
2480				padding-bottom: 6px;
2481			}
2482
2483			/* Inherit border radius */
2484			#elSearchExpanded .ipsSideMenu_list,
2485			#elSearchExpanded .ipsSideMenu_list > li,
2486			#elSearchExpanded .ipsSideMenu_item{
2487				border-radius: inherit;
2488			}
2489
2490			/* Item */
2491
2492				/* Hover */
2493				#elSearchExpanded .ipsSideMenu_item:not(.ipsSideMenu_itemActive):hover{
2494					background: {hextorgb="text_light" opacity="0.1"};
2495				}
2496
2497				/* Active item */
2498				#elSearchExpanded .ipsSideMenu_itemActive{
2499					color: {theme="text_color"};
2500					background: {hextorgb="text_light" opacity="0.15"};
2501					font-weight: bold;
2502				}
2503
2504				/* Item icon */
2505				#elSearchExpanded .ipsSideMenu_item::after{
2506					color: inherit;
2507				}
2508
2509				#elSearchExpanded .ipsSideMenu_item:not(.ipsSideMenu_itemActive)::after{
2510					opacity: 0.3;
2511				}
2512
2513
2514/* Desktop search */
2515@media screen and (min-width:980px){
2516	
2517	#elSearch,
2518	#elSearch.cSearchExpanded{
2519		width: auto;
2520	}
2521	
2522	html[dir="ltr"] #elSearch,
2523	html[dir="rtl"] #elSearch{
2524		margin: 0;
2525	}
2526	
2527	#elSearch form{
2528		display: -webkit-flex;
2529		display: flex;
2530		-webkit-align-items: center;
2531		align-items: center;
2532		vertical-align: top;
2533	}
2534	
2535	#elSearch input[type="search"]{
2536		padding: 0;
2537		padding-left: 10px;
2538		position: relative;
2539		-webkit-flex: 1 1 auto;
2540		flex: 1 1 auto;
2541		width: 100%;
2542		z-index: auto;
2543		max-width: none;
2544	}
2545
2546		html[dir="rtl"] #elSearch input[type="search"] {
2547			padding: 0px 10px 0px 0px;
2548		}
2549
2550	#elSearch button{
2551		position: relative;
2552		-webkit-flex: 0 0 auto;
2553		flex: 0 0 auto;
2554	}
2555		
2556}
2557
2558
2559
2560/* Mobile search */
2561.mobile-search-wrap{
2562	display: none;
2563	padding: 8px;
2564	position: absolute;
2565	top: 100%;
2566	left: 0; right: 0;
2567	z-index: 5;
2568	transform: translateY(-105%);
2569	opacity: 0;
2570	pointer-events: none;
2571	transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
2572
2573	background-color: {theme="mobile_back"};
2574	background-image: linear-gradient(to bottom, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.1) 100%);
2575}
2576
2577	.mobile-search #elSearch{
2578		height: 40px;
2579		line-height: 40px;
2580	}
2581
2582@media screen and (max-width:979px){
2583
2584	/* Show search only on mobiles, when activated */
2585	.mobile-search-wrap{
2586		display: block;
2587	}
2588		.show-mobile-search-wrap .mobile-search-wrap{
2589			opacity: 1;
2590			transform: translateY(0%);
2591			pointer-events: auto;
2592		}
2593	
2594	#elSearch{
2595		background: rgba(255,255,255,0.85);
2596		background-image: linear-gradient(to bottom, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 100%);
2597		box-shadow: rgba(0,0,0,0.1) 0px 1px 3px;
2598		color: #222;
2599		border-radius: 3px;
2600		float: none !important;
2601		display: block;
2602		width: 100%;
2603	}
2604
2605		#elSearch form{
2606			display: flex;
2607		}
2608	
2609			#elSearch input[type="search"]{
2610				font-size: 1.6rem;
2611				width: auto;
2612				max-width: none;
2613				flex: 1 1 100%;
2614				position: static;
2615				padding: 0 12px;
2616			}
2617	
2618	/* Hide desktop search */
2619	.ipsfocus-search{
2620		display: none;
2621	}
2622	
2623}
2624
2625
2626
2627/*
2628	----------------
2629	- Precontent blocks and padding
2630	----------------
2631*/
2632
2633/* Remove default value */
2634#ipsLayout_mainArea{
2635  min-height: 0;
2636  max-width: 100%;
2637}
2638
2639/* Add margins to break up pre-content divs */
2640.precontent-blocks > div,
2641#elLicenseKey{
2642	margin-bottom: 10px;
2643}
2644
2645
2646/* Configure content padding */
2647.content-padding{ padding: 10px; }
2648
2649@media screen and (min-width:768px) and (max-width:979px){
2650	.ipsApp .content-padding{ padding: 10px; }
2651}
2652
2653@media screen and (max-width:767px){
2654	.ipsApp .content-padding{ padding: 7px; }
2655}
2656
2657
2658
2659/* Content padding */
2660@media screen and (min-width:980px){
2661	
2662	#ipsLayout_sidebar,
2663	html[dir="rtl"] #ipsLayout_sidebar{ padding: 12px; }
2664	html[dir="ltr"] #ipsLayout_contentWrapper #ipsLayout_sidebar.ipsLayout_sidebarright,
2665	html[dir="rtl"] #ipsLayout_contentWrapper #ipsLayout_sidebar.ipsLayout_sidebarleft{ padding-right: 0; }
2666	html[dir="ltr"] #ipsLayout_contentWrapper #ipsLayout_sidebar.ipsLayout_sidebarleft,
2667	html[dir="rtl"] #ipsLayout_contentWrapper #ipsLayout_sidebar.ipsLayout_sidebarright{ padding-left: 0; }
2668	#ipsLayout_mainArea{ padding-left: 0; padding-right: 0; }
2669	
2670	/* Remove top padding from content columns */
2671	#ipsLayout_mainArea,
2672    #ipsLayout_sidebar,
2673	html[dir="rtl"] #ipsLayout_sidebar,
2674	#ipsLayout_contentWrapper #ipsLayout_sidebar:first-child{
2675		padding-top: 0;
2676	}
2677	
2678	/* Configure column gutter */
2679	html[dir="ltr"] #ipsLayout_sidebar.ipsLayout_sidebarright,
2680	html[dir="rtl"] #ipsLayout_sidebar.ipsLayout_sidebarleft{
2681		padding-left: 15px;
2682	}
2683	
2684	html[dir="rtl"] #ipsLayout_sidebar.ipsLayout_sidebarright,
2685	html[dir="ltr"] #ipsLayout_sidebar.ipsLayout_sidebarleft{
2686		padding-right: 15px;
2687	}
2688	
2689}
2690
2691@media screen and (max-width:979px){
2692	
2693	/* Remove background from sidebar */
2694	#ipsLayout_sidebar{
2695		background: none;
2696		margin: 0;
2697	}
2698	
2699	/* Let .content-padding control the left and right padding */
2700	#ipsLayout_mainArea,
2701	body.ipsApp #ipsLayout_sidebar.ipsLayout_sidebarright,
2702	body.ipsApp #ipsLayout_sidebar.ipsLayout_sidebarleft{
2703		padding-left: 0;
2704		padding-right: 0;
2705	}
2706	
2707	/* Remove top padding from sidebar in vertical layouts, otherwise it's doubled up due to the bottom padding on #ipsLayout_mainArea */
2708	#ipsLayout_mainArea + #ipsLayout_sidebar{
2709		padding-top: 0;
2710	}
2711	
2712	#ipsLayout_contentWrapper #ipsLayout_sidebar:first-child{
2713		padding: 0;
2714	}
2715	
2716	#ipsLayout_contentWrapper #ipsLayout_mainArea:first-child{
2717		padding-top: 0;
2718	}
2719}
2720
2721
2722		
2723/*
2724	----------------
2725	- Breadcrumb Navigation
2726	----------------
2727*/
2728
2729/* Link angles */
2730.ipsBreadcrumb > ul[data-role="breadcrumbList"] li > a:before,
2731.ipsBreadcrumb > ul[data-role="breadcrumbList"] li > a:after{
2732	/* Highlight */
2733	color: rgba(255,255,255,1);
2734	/* Shadow */
2735	border-color: rgba(0,0,0,0.2);
2736}
2737
2738/* Hover */
2739.ipsBreadcrumb > ul[data-role="breadcrumbList"] li:hover > a:before,
2740.ipsBreadcrumb > ul[data-role="breadcrumbList"] li:hover > a:after,
2741.ipsBreadcrumb .ipsList_inline li a:hover{
2742	background: rgba(255,255,255,0.4);
2743}
2744
2745/* Active */
2746.ipsApp .ipsBreadcrumb > ul[data-role="breadcrumbList"] li > a:active:before,
2747.ipsApp .ipsBreadcrumb > ul[data-role="breadcrumbList"] li > a:active:after,
2748.ipsApp .ipsBreadcrumb .ipsList_inline li a:active{
2749	background: rgba(0,0,0,0.07);
2750}
2751
2752/* Side links */
2753.ipsBreadcrumb .ipsList_inline li{
2754	border-color: rgba(0,0,0,0.06);
2755}
2756
2757
2758.ipsfocus-breadcrumb{
2759	display: -webkit-flex;
2760	display: flex;
2761	-webkit-align-items: center;
2762	align-items: center;
2763}
2764
2765.ipsApp .ipsBreadcrumb{
2766	line-height: {expression="theme.social_height"}px; /* Reduced for border */
2767	font-size: 11.5px;
2768	
2769	-webkit-flex: 1 1 auto;
2770	flex: 1 1 auto;
2771	font-weight: bold;
2772	border: 0;
2773	transition: none;
2774	overflow: hidden;
2775	margin: 0;
2776	padding: 0;
2777	opacity: 1;
2778	
2779	position: relative;
2780}
2781
2782	.ipsBreadcrumb:before{
2783		content: '';
2784		position: absolute;
2785		top: 0; left: 0; right: 0; bottom: 0;
2786		z-index: 2;
2787		pointer-events: none;
2788		
2789		border-radius: inherit;
2790		border-color: inherit;
2791		border-style: solid;
2792		border-width: 0;
2793	}
2794	
2795	.ipsBreadcrumb ul,
2796	.ipsBreadcrumb #elRSS{
2797		position: relative;
2798	}
2799	
2800	.ipsApp .ipsBreadcrumb a {
2801		color: inherit;
2802		display: block;
2803		font-size: inherit;
2804		font-weight: inherit;
2805	}
2806		.ipsApp .ipsBreadcrumb a:hover{
2807			color: inherit;
2808		}
2809
2810	/* Reset all list items */
2811	.ipsBreadcrumb > ul > li{
2812		line-height: inherit;
2813		height: auto;
2814		max-width: none;
2815		overflow: visible;
2816		color: inherit;
2817		font-weight: inherit;
2818		font-size: inherit;
2819	}
2820	
2821	.ipsBreadcrumb > ul[data-role="breadcrumbList"] > li:last-child{ opacity: 1; }
2822	
2823	.ipsBreadcrumb > ul[data-role="breadcrumbList"],
2824	.ipsBreadcrumb > ul[data-role="breadcrumbList"] li{
2825		margin: 0;
2826		padding: 0;
2827		list-style: none;
2828		color: inherit;
2829	}
2830	
2831	/* Breadcrumbs */
2832	.ipsBreadcrumb > ul[data-role="breadcrumbList"]{
2833		display: block;
2834		border-radius: inherit;
2835		overflow: hidden;
2836	}
2837	
2838		html[dir='ltr'] .ipsBreadcrumb > ul[data-role="breadcrumbList"] li{
2839	    	float: left;
2840	    	padding-left: 15px;
2841		}
2842		
2843		html[dir="rtl"] .ipsBreadcrumb > ul[data-role="breadcrumbList"] li{
2844			float: right;
2845			padding-right: 15px;
2846		}
2847		
2848			.ipsBreadcrumb > ul[data-role="breadcrumbList"] li > a{
2849		    	padding: 0 15px;
2850		    	
2851		    	position: relative;
2852		    	z-index: 1;
2853			}
2854			
2855			html[dir='ltr'] .ipsBreadcrumb > ul[data-role="breadcrumbList"] li > a{
2856				margin-left: -15px;
2857			}
2858			
2859			html[dir='rtl'] .ipsBreadcrumb > ul[data-role="breadcrumbList"] li > a{
2860				margin-right: -15px;
2861			}
2862	
2863	/* Link angles */
2864	.ipsBreadcrumb > ul[data-role="breadcrumbList"] li > a:before,
2865	.ipsBreadcrumb > ul[data-role="breadcrumbList"] li > a:after{   	
2866		border-style: solid;
2867		border-width: 0px 1px 0px 0px;
2868    	box-shadow: inset currentColor -1px 0px 0px 0px;   	
2869    	content: '';
2870    	position: absolute;
2871    	height: 50%;
2872    	width: 100%;
2873    	right: 0;
2874    	z-index: -1;
2875    	box-sizing: border-box;
2876    	transform-origin: 100% 50%;
2877	}
2878	
2879	.ipsBreadcrumb > ul[data-role="breadcrumbList"] li > a:before{
2880    	top: 0;
2881    	transform: skewX(30deg);
2882    }
2883    
2884	.ipsBreadcrumb > ul[data-role="breadcrumbList"] li > a:after{
2885    	top: 50%;
2886    	transform: skewX(-30deg);
2887    }
2888    
2889    	html[dir='rtl'] .ipsBreadcrumb > ul[data-role="breadcrumbList"] li > a:before,
2890		html[dir='rtl'] .ipsBreadcrumb > ul[data-role="breadcrumbList"] li > a:after{
2891			right: auto;
2892			left: 0;
2893			border-width: 0px 0px 0px 1px;
2894			box-shadow: inset currentColor 1px 0px 0px 0px;
2895		}
2896    
2897    	html[dir='rtl'] .ipsBreadcrumb > ul[data-role="breadcrumbList"] li > a:before{
2898	    	transform: skewX(-30deg);
2899	    }
2900	    
2901	    html[dir='rtl'] .ipsBreadcrumb > ul[data-role="breadcrumbList"] li > a:after{
2902	    	transform: skewX(30deg);
2903	    }
2904	
2905	/* Active inset shadow */
2906	.ipsBreadcrumb > ul[data-role="breadcrumbList"] li > a:active:before,
2907	.ipsBreadcrumb > ul[data-role="breadcrumbList"] li > a:active:after{
2908		color: rgba(0,0,0,0.05);
2909	}
2910	
2911		.ipsBreadcrumb > ul[data-role="breadcrumbList"] li > a:active:before{
2912	    	box-shadow: inset currentColor -2px 1px 1px;
2913		}
2914		
2915		.ipsBreadcrumb > ul[data-role="breadcrumbList"] li > a:active:after{
2916	    	box-shadow: inset currentColor -2px -1px 1px;
2917		}
2918		
2919			html[dir='rtl'] .ipsBreadcrumb > ul[data-role="breadcrumbList"] li > a:active:before{
2920		    	box-shadow: inset currentColor 2px 1px 1px;
2921			}
2922			
2923			html[dir='rtl'] .ipsBreadcrumb > ul[data-role="breadcrumbList"] li > a:active:after{
2924		    	box-shadow: inset currentColor 2px -1px 1px;
2925			}
2926	
2927	/* First link */
2928	.ipsBreadcrumb > ul[data-role="breadcrumbList"] li:first-of-type > a:before,
2929	.ipsBreadcrumb > ul[data-role="breadcrumbList"] li:first-of-type > a:after{
2930		width: calc(100% + 20px);
2931	}
2932	
2933	/* Hide arrow icons */
2934	.ipsBreadcrumb > ul[data-role="breadcrumbList"] .fa{ display: none; }
2935
2936
2937	/* Side links */
2938	.ipsBreadcrumb .ipsList_inline li{
2939		margin: 0 !important;
2940		float: left;
2941		border-style: solid;
2942		border-width: 0px 0px 0px 1px;
2943	}
2944	
2945		html[dir="rtl"] .ipsBreadcrumb .ipsList_inline li{
2946			float: right;
2947			border-width: 0px 1px 0px 0px;
2948		}
2949	
2950			.ipsBreadcrumb .ipsList_inline li a{
2951				display: block;
2952				padding: 0 15px;
2953			}
2954	
2955				html[dir="ltr"] .ipsBreadcrumb_bottom .ipsBreadcrumb .ipsList_inline:not(:first-child) li:last-of-type{
2956					border-right-width: 1px;
2957				}
2958				
2959				html[dir="rtl"] .ipsBreadcrumb_bottom .ipsBreadcrumb .ipsList_inline:not(:first-child) li:last-of-type{
2960					border-left-width: 1px;
2961				}
2962				
2963/* Remove 'Mark site read' from top breadcrumb */
2964.ipsBreadcrumb_top .ipsList_inline li:nth-of-type(2):last-of-type{
2965	display: none;
2966}
2967
2968	/* Tick icon */
2969	.ipsBreadcrumb > ul > li .fa:not(.fa-home){
2970		margin: 0;
2971	}
2972	
2973	html[dir='ltr'] .ipsBreadcrumb > ul > li .fa{
2974		margin-right: 3px;
2975	}
2976	
2977	html[dir='rtl'] .ipsBreadcrumb > ul > li .fa{
2978		margin-left: 3px;
2979	}
2980
2981
2982	
2983/* Unread content icon */
2984.icon-newspaper{
2985	display: inline-block;
2986	font-family: 'FontAwesome';
2987	vertical-align: middle;
2988	transform: translate(0,0);
2989	font-size: 14px;
2990}
2991
2992	html[dir='ltr'] .ipsBreadcrumb .icon-newspaper{
2993		margin-right: 2px;
2994	}
2995	
2996	html[dir='rtl'] .ipsBreadcrumb .icon-newspaper{
2997		margin-left: 2px;
2998	}
2999
3000	.icon-newspaper:before{
3001		content: '\f07c';
3002	}
3003
3004
3005
3006/* RSS icon */	
3007#elRSS{
3008	margin: 0 !important;
3009	padding: 0 10px;
3010	height: {theme="social_height"}px;
3011	display: flex;
3012	align-items: center;
3013}	
3014
3015	#elRSS .fa{
3016		background: #F28826;
3017		background-image: linear-gradient(to bottom, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 100%);
3018		color: #fff;
3019		box-shadow: inset rgba(0,0,0,0.1) 0px 0px 0px 1px;
3020		text-shadow: rgba(0,0,0,0.1) 0px -1px 0px;
3021		border-radius: 3px;
3022		width: 18px; height: 18px; line-height: 18px;
3023		text-align: center;
3024		font-size: 12px;
3025		vertical-align: top;
3026	}
3027	
3028		#elRSS .fa:before{
3029			content: '\f09e';
3030		}
3031
3032	/* Add border for RSS icon */
3033	.ipsBreadcrumb #elRSS ~ .ipsPos_right li:last-of-type{
3034		border-width: 0px 1px;
3035	}
3036
3037
3038
3039/*
3040	----------------
3041	- Social Icons
3042	----------------
3043*/
3044{{if theme.focus_social}}
3045
3046.ipsfocus_social{
3047	color: #fff;
3048	display: -webkit-flex;
3049	display: flex;
3050	-webkit-align-items: center;
3051	align-items: center;
3052
3053	-webkit-flex: 0 0 auto;
3054	flex: 0 0 auto;
3055	margin: 0;
3056	padding: 0;
3057	list-style: none;
3058}
3059
3060	.ipsfocus_social.iconButtons a{
3061		width: {theme="social_height"}px;
3062		height: {theme="social_height"}px;
3063	}
3064	
3065	.ipsfocus_social li{
3066	    line-height: {theme="social_height"}px;
3067	    flex: 0 0 auto;
3068	    margin: 0;
3069		padding: 0;
3070		list-style: none;
3071	    padding-left: 4px;
3072	    text-align: center;
3073	    text-shadow: rgba(0,0,0,0.3) 0px -1px 0px;
3074	}
3075	
3076	html[dir="rtl"] .ipsfocus_social li{
3077		padding-left: 0;
3078		padding-right: 4px;
3079	}
3080	
3081	.ipsfocus_social a{
3082	    color: inherit;
3083	    background: #444444;
3084		box-shadow: rgba(0,0,0,0.1) 0px 1px 3px;
3085	    border-radius: 3px;
3086	    padding: 0 12px 0 44px;
3087	    display: block;
3088	    text-decoration: none;
3089	    outline: none;
3090	    position: relative;
3091	}
3092	
3093	.ipsfocus_social a:active{
3094		box-shadow: inset rgba(0,0,0,0.4) 0px 1px 3px;
3095		top: 1px;
3096	}
3097	
3098	.ipsfocus_social a:before{
3099	    content: "\f1e0";
3100	    background: rgba(255,255,255,0.18);
3101	    box-shadow: inset rgba(255,255,255,0.15) -1px 0px 0px 0px, rgba(0,0,0,0.1) 1px 0px 0px 0px;
3102	    border-radius: inherit;
3103	    position: absolute;
3104	    top: 1px; left: 1px; bottom: 1px;
3105	    width: 32px;
3106	    text-align: center;
3107		font-family: "FontAwesome";
3108		font-size: 16px;
3109		font-weight: normal;
3110		-webkit-font-smoothing: antialiased;
3111		-moz-osx-font-smoothing: grayscale;
3112		{prefix="transform" value="translate(0,0)"}
3113		pointer-events: none;
3114	}
3115	
3116		html[dir='ltr'] .ipsfocus_social a:before{
3117			border-top-right-radius: 0;
3118			border-bottom-right-radius: 0;
3119		}
3120		
3121		html[dir='rtl'] .ipsfocus_social a:before{
3122			border-top-left-radius: 0;
3123			border-bottom-left-radius: 0;
3124		}
3125	
3126	.ipsfocus_social a:after{
3127		border: 1px solid rgba(0,0,0,0.2);
3128		box-shadow: inset rgba(255,255,255,0.15) 0px 1px 0px;
3129		content: '';
3130		position: absolute;
3131		top: 0; left: 0; right: 0; bottom: 0;
3132		pointer-events: none;
3133		border-radius: inherit;
3134	}
3135	
3136		.ipsfocus_social a:hover:after{
3137			background: rgba(255,255,255,0.2);
3138		}
3139		
3140		.ipsfocus_social a:active:after{
3141			background: rgba(0,0,0,0.1);
3142		}
3143	
3144	.ipsfocus_social.iconButtons a{
3145	    padding: 0;
3146	    overflow: hidden;
3147	    text-indent: 120%;
3148	}
3149	
3150	.ipsfocus_social.iconButtons a:before{
3151	    background: none;
3152	    text-indent: 0;
3153	    left: 0;
3154	    width: 100%;
3155	    box-shadow: none;
3156	}
3157	
3158	.ipsfocus_social.textButtons a{ padding: 0 12px; }
3159	.ipsfocus_social.textButtons a:before{ display: none; }
3160
3161	/* Footer icons for mobile */
3162	#ipsLayout_footer .ipsfocus_social{
3163		-webkit-justify-content: center;
3164		justify-content: center;
3165	}
3166	
3167		#ipsLayout_footer .ipsfocus_social li{
3168			margin: 0 3px;
3169			padding: 0;
3170		}
3171		
3172		#ipsLayout_footer .ipsfocus_social a{
3173			color: inherit;
3174		}
3175		
3176	{{if theme.footer_text == "#ffffff"}}
3177		
3178		#ipsLayout_footer .ipsfocus_social a:after{
3179			border-width: 0;
3180		}
3181	
3182	{{endif}}
3183		
3184		@media screen and (max-width:979px){
3185			#ipsLayout_footer .ipsfocus_social{
3186				margin: 10px 0;
3187			}
3188		}
3189
3190.ipsfocus_social a[href*='discordapp.com']:before,
3191.ipsfocus_social a[href*='discord.gg']:before{
3192	content: '';
3193	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAAA5CAYAAACh6qw/AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQwIDc5LjE2MDQ1MSwgMjAxNy8wNS8wNi0wMTowODoyMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjU5RTI0Qjc5MDk0QjExRTg5N0M0QjMxNUU3NzU3MTQ4IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjU5RTI0QjdBMDk0QjExRTg5N0M0QjMxNUU3NzU3MTQ4Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NTlFMjRCNzcwOTRCMTFFODk3QzRCMzE1RTc3NTcxNDgiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NTlFMjRCNzgwOTRCMTFFODk3QzRCMzE1RTc3NTcxNDgiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7dniwbAAAGOUlEQVR42uycf2wURRTH5862KoVSMNBeEQjWUgq2Iv2BfyBVoifGRPxB8AeIIVYTf0RjlISoIP4AjSbERLERDDEqaEz4oSlItUaQGBUkqa0opAVBpAVRamypgNXz+9x3sJ3u3u3Oznot3W/yCUtvd97su9mdmfdmLhSLxYRPCoMKcAkoAUVgKsgA1eB+zfZWgiqwm2kBjeA7sBP86cdNpmkubyCIgmuZ0dLne8Fm8IkP9/IHaAbjGLOOgFq2+zH4RZfRkKYWOAncCWaDYdJn34D1YC3Y46DVZoFz+NhcuRD4G5wExxOUUQhmgZnc8mV1gjXgHbA11Q6cBuaD6dLfqdDV4CXQIH2WCyIgj1toATMKZIMh7MCQyYEh/pcceIJb0EHQxF9KMx83S7aKwQJwG38hsr4ES8BGZQ+QAxUoBjWxnuoAz0jnjgRzwBugEZyK+aefwXrwMLhUqsci0G5z3edgioov3F5ALfZ5iwqQUx41nVcEXgANsdSqBawCFaa6PQY6bc6nc7P9cuBksMfC6HNgOBgMHgf7Yr1Tv4JlYDQYxU+KlY6CG3Q7MN/C0GcgCirB6ljf0iYwnev/qc05USe+cdqJbAGVfNwFtoGvuJe7XvRd1XInR/dxBRhg+qyVOzrPvXCx1JN2cS+YJ84e7QM5IFP6++3gPa8OXAduEv1T9eAyLw68iGcP/VlX8SvMduSfSA+IQE+otkCa9B/mmUF/Fz2JP7ptgXMD553WgyotcDsoD3x3OpqT66YF5gXO66YcDtM5dmDQefTUQ24e4Z/AyMBn3UShtEFyZNuqBU4InGcpilHe4uQRvjvwVcKRSdJH+ABHhwP1VBcP7TrsWmBB4LyEoiTc1ESP8NWBj5Lq5kQOnBn4J6lmmP1mfgdSOvF3cSYDplMUuNwBjnEPT4P0KRrL/wd8CL4VRn44H0wGpT45kRYL7PrvyBSejvoQOt8MSmzC4Vdqyp+8D8bY2LgRHPbhvqqsciKLNBtZ4SCnMATs9WDjVQc2KOG1X/O9bbDKiWyVexgPojUpJQ7PpWEBJcSHurSxSTjPx1ACf78fwYX4yzAdlGk04GYw3gaeVrBR5eJcGtu+rDm4MNbswPGie0bKi5q4w3Cjt8FfLs6nrGCrSxvLNXck5WYHTtRY8AaFa6gVbndx/loFG/SaaNF4n+PNDizUWLDqu6bNxbkdijZOaLzPfPkR1jkm8/s6VRs6V5OWmR1YpLHgEsXr3DwFFyrayNbcAiM0jKG1eoc0zkDaFIYkY4SxOsCpaE3gOJc2LhfGekCdqgxzBEbn9I3GdXNcXrNQobW6HbMu8WFKNzbMYxrdel04T4leA+Yp2FjD83cnuksYq2l1K5ccGPGh4AH8uCRbgEQBhRpFGyPYRrIv6g7wpk9BhQg58AKfCqfH7AdhJKVlG5Tpf5EHxBkex2LfCyPUnmXx2QphrNX2S4OoE3kNB/f5HEPr4IEszTbOE8aSOd1q4zFoFzuzUPivujSfHmFZAzXPduw6r/97KcqwsMs5aKDuGhpWHJSeAr+dZc5QmSeHvQxjPhA2yx36mBp4mNOqcG0aOTBd4ULqOW8VRmCReti3+qDjOrkBTGJKlfyAXni3x/D2vRzeLgDv9oEtDi28tyUe8v/IQ1ntgjeVeNU6U4Ui4Cne1tWbVAfuMdWzPMHWL6daGC9sqYYKHuM9ceaEDm1mWQ6aUuS0evAsmGiqUxp4RUPZtXJWrlpTpXeAGRbZsTLeXkUt4YhPDqMU5kbet1co2c8ET2podaRtdjuVloFHNL2kaad4NffWh6TP4rMRCkpO4NAUZbmGg8FJpnc0bm0XZ7a80lSOEur1fHxSOr+Co0NzuWyvog3j18X/Y7U6iwytEsZ6OF2a53BCfz5PwyJs3xx5DpnGa+TA4w7m4l9onusvFfK2B5tkNPWoWzQ9Vs1ghOK+ZC9k8ntKh2gFxTSV3Zq0hOGgB8NtICsFzjOz00P9aQP5YpDuZbtrBo/1VCpSmmLnCd5A7bbTOsAdTo6u7a5x0b4x2ngYdRAums1R494gWk3VmOQcmsrVCeMHMmqcBlm8/OhEGVeMetGLRfdf66CKLO5lU7dZ3AmcK4wtbEc5kbWL+dqiB0+qfwUYAA41z4ekJFz3AAAAAElFTkSuQmCC);
3194	background-size: 50% auto;
3195	background-repeat: no-repeat;
3196	background-position: 50% 50%;
3197}
3198.ipsfocus_social a[href*='discordapp.com'],
3199.ipsfocus_social a[href*='discord.gg']{ background: #7289da; }
3200.ipsfocus_social a[href*='dropbox.com']:before{ content: "\f16b"; }
3201.ipsfocus_social a[href*='dropbox.com']{ background: #007fe5; }
3202.focus-social-gradient .ipsfocus_social a[href*='dropbox.com']{ background-image: linear-gradient(to bottom, #0097ea 0%, #007fe5 100%); }
3203.ipsfocus_social a[href*='mailto:']:before{ content: "\f01c"; }
3204.ipsfocus_social a[href*='mailto:']{ background: #444444; }
3205.focus-social-gradient .ipsfocus_social a[href*='mailto:']{ background-image: linear-gradient(to bottom, #515151 0%, #444444 100%); }
3206.ipsfocus_social a[href*='facebook.com']:before{ content: "\f09a"; }
3207.ipsfocus_social a[href*='facebook.com']{ background: #304c87; }
3208.focus-social-gradient .ipsfocus_social a[href*='facebook.com']{ background-image: linear-gradient(to bottom, #4c71b0 0%, #304c87 100%); }
3209.ipsfocus_social a[href*='flickr.com']:before{ content: "\f16e"; }
3210.ipsfocus_social a[href*='flickr.com']{ background: #fe2997; }
3211.focus-social-gradient .ipsfocus_social a[href*='flickr.com']{ background-image: linear-gradient(to bottom, #fd30aa 0%, #e41c84 100%); }
3212.ipsfocus_social a[href*='google.com']:before{ content: "\f0d5"; }
3213.ipsfocus_social a[href*='google.com']{ background: #df6b39; }
3214.focus-social-gradient .ipsfocus_social a[href*='google.com']{ background-image: linear-gradient(to bottom, #e47d43 0%, #d95332 100%); }
3215.ipsfocus_social a[href*='instagram.com']:before{ content: "\f16d"; }
3216.ipsfocus_social a[href*='instagram.com']{ background: #de416a; }
3217.focus-social-gradient .ipsfocus_social a[href*='instagram.com']{ background-image: linear-gradient(to bottom left, #9035c0 0%, #d62f87 35%, #e85a42 65%, #feda7c 100%); }
3218.ipsfocus_social a[href*='linkedin.com']:before{ content: "\f0e1"; }
3219.ipsfocus_social a[href*='linkedin.com']{ background: #0073b2; }
3220.focus-social-gradient .ipsfocus_social a[href*='linkedin.com']{ background-image: linear-gradient(to bottom, #008bc0 0%, #0073b2 100%); }
3221.ipsfocus_social a[href*='paypal.com']:before, .ipsfocus_social a[href*='paypal.me']:before{ content: "\f1ed"; }
3222.ipsfocus_social a[href*='paypal.com'], .ipsfocus_social a[href*='paypal.me']{ background: #253b80; }
3223.focus-social-gradient .ipsfocus_social a[href*='paypal.com']{ background-image: linear-gradient(to bottom, #253b80 0%, #203370 100%); }
3224.ipsfocus_social a[href*='pinterest.com']:before{ content: "\f0d2"; }
3225.ipsfocus_social a[href*='pinterest.com']{ background: #cd1d1f; }
3226.focus-social-gradient .ipsfocus_social a[href*='pinterest.com']{ background-image: linear-gradient(to bottom, #d62124 0%, #c0181a 100%); }
3227.ipsfocus_social a[href*='reddit.com']:before{ content: "\f1a1"; }
3228.ipsfocus_social a[href*='reddit.com']{ background: #609acf; }
3229.focus-social-gradient .ipsfocus_social a[href*='reddit.com']{ background-image: linear-gradient(to bottom, #72add8 0%, #609acf 100%); }
3230.ipsfocus_social a[href$='.rss']:before{ content: "\f09e"; }
3231.ipsfocus_social a[href$='.rss']{ background: #ff9641; }
3232.focus-social-gradient .ipsfocus_social a[href$='.rss']{ background-image: linear-gradient(to bottom, #ff9641 0%, #ff8543 100%); }
3233.ipsfocus_social a[href*='skype.com']:before{ content: "\f17e"; }
3234.ipsfocus_social a[href*='skype.com']{ background: #00b0f0; }
3235.focus-social-gradient .ipsfocus_social a[href*='skype.com']{ background-image: linear-gradient(to bottom, #00bff3 0%, #00b0f0 100%); }
3236.ipsfocus_social a[href*='soundcloud.com']:before{ content: "\f1be"; }
3237.ipsfocus_social a[href*='soundcloud.com']{ background: #ff6900; }
3238.focus-social-gradient .ipsfocus_social a[href*='soundcloud.com']{ background-image: linear-gradient(to bottom, #ff6900 0%, #ff4400 100%); }
3239.ipsfocus_social a[href*='spotify.com']:before{ content: "\f1bc"; }
3240.ipsfocus_social a[href*='spotify.com']{ background: #84b301; }
3241.focus-social-gradient .ipsfocus_social a[href*='spotify.com']{ background-image: linear-gradient(to bottom, #add411 0%, #84b301 100%); }
3242.ipsfocus_social a[href*='steampowered.com']:before,
3243.ipsfocus_social a[href*='steamcommunity.com']:before{ content: "\f1b6"; }
3244.ipsfocus_social a[href*='steampowered.com'],
3245.ipsfocus_social a[href*='steamcommunity.com']{ background: #457498; }
3246.focus-social-gradient .ipsfocus_social a[href*='steampowered.com']{ background-image: linear-gradient(to bottom, #457498 0%, #3b688a 100%); }
3247.ipsfocus_social a[href*='stripe.com']:before{ content: "\f1f5"; }
3248.ipsfocus_social a[href*='stripe.com']{ background: #58aada; }
3249.focus-social-gradient .ipsfocus_social a[href*='stripe.com']{ background-image: linear-gradient(to bottom, #58aada 0%, #519dca 100%); }
3250.ipsfocus_social a[href*='teamspeak.com']:before{ content: "\f130"; }
3251.ipsfocus_social a[href*='teamspeak.com']{ background: #8190b1; }
3252.focus-social-gradient .ipsfocus_social a[href*='teamspeak.com']{ background-image: linear-gradient(to bottom, #8190b1 0%, #7686a8 100%); }
3253.ipsfocus_social a[href*='tumblr.com']:before{ content: "\f173"; }
3254.ipsfocus_social a[href*='tumblr.com']{ background: #539fcc; }
3255.focus-social-gradient .ipsfocus_social a[href*='tumblr.com']{ background-image: linear-gradient(to bottom, #62b1d6 0%, #539fcc 100%); }
3256.ipsfocus_social a[href*='twitch.tv']:before{ content: "\f1e8"; }
3257.ipsfocus_social a[href*='twitch.tv']{ background: #6441a5; }
3258.focus-social-gradient .ipsfocus_social a[href*='twitch.tv']{ background-image: linear-gradient(to bottom, #6441a5 0%, #593993 100%); }
3259.ipsfocus_social a[href*='twitter.com']:before{ content: "\f099"; }
3260.ipsfocus_social a[href*='twitter.com']{ background: #0097d3; }
3261.focus-social-gradient .ipsfocus_social a[href*='twitter.com']{ background-image: linear-gradient(to bottom, #00b9f0 0%, #0097d3 100%); }
3262.ipsfocus_social a[href*='vimeo.com']:before{ content: "\f194"; }
3263.ipsfocus_social a[href*='vimeo.com']{ background: #1bb5ea; }
3264.focus-social-gradient .ipsfocus_social a[href*='vimeo.com']{ background-image: linear-gradient(to bottom, #20c1eb 0%, #1a8fb8 100%); }
3265.ipsfocus_social a[href*='youtube.com']:before{ content: "\f16a"; }
3266.ipsfocus_social a[href*='youtube.com']{ background: #cc332d; }
3267.focus-social-gradient .ipsfocus_social a[href*='youtube.com']{ background-image: linear-gradient(to bottom, #d43c34 0%, #a92621 100%); }
3268
3269{{endif}}
3270
3271
3272
3273/*
3274	----------------
3275	- Footer
3276	----------------
3277*/
3278
3279#ipsLayout_footer{
3280	color: {theme="footer_text"};
3281	margin: 0;
3282	padding: 20px 0;
3283	font-size: 1.2rem;
3284}
3285
3286#elFooterLinks{
3287	margin: 0;
3288}
3289
3290@media screen and (min-width:980px){
3291	#ipsLayout_footer .ipsLayout_container{
3292		display: -webkit-flex;
3293		-webkit-justify-content: space-between;
3294		-webkit-align-items: center;
3295		
3296		display: flex;
3297		justify-content: space-between;
3298		align-items: center;
3299	}
3300		
3301	#ipsLayout_footer #elCopyright{
3302		text-align: right;
3303		margin: 0;
3304	}
3305	.ipsfocusCopyright{
3306		text-align: left;
3307	}
3308		html[dir='rtl'] .ipsfocusCopyright{
3309			text-align: right;
3310		}
3311		
3312	html[dir='ltr'] #elFooterLinks{ text-align: left; }
3313	html[dir='rtl'] #elFooterLinks{ text-align: right; }
3314}
3315	
3316	#elFooterLinks,
3317	#ipsLayout_footer a,
3318	#ipsLayout_footer p,
3319	#ipsLayout_footer #elCopyright{
3320		font-size: inherit;
3321	}
3322	
3323	
3324	
3325/* ipsfocus Copyright */
3326#elFooterLinks .ipsfocusCopyright{
3327	display: block;
3328	margin: 0;
3329}
3330
3331	.ipsfocusCopyright a{
3332		border-bottom: 1px solid {hextorgb="footer_text" opacity="0.4"};
3333	}
3334	
3335		.ipsfocusCopyright a:hover{
3336			border-bottom-color: {hextorgb="footer_text" opacity="0.7"};
3337		}
3338
3339	#elFooterLinks .ipsfocusCopyright,
3340	#elCopyright_userLine{
3341		margin-bottom: 4px;
3342	}
3343
3344/* Remove site copyright if left empty */	
3345#elCopyright_userLine:empty{
3346	display: none;
3347}
3348
3349
3350
3351/*
3352	----------------
3353	- Mega Footer
3354	----------------
3355*/
3356{{if theme.footer_enable}}
3357
3358.ipsfocus_megaFooter{
3359	background: {theme="area_background_reset"};
3360	border: 1px solid {hextorgb="text_color" opacity="0.15"};
3361	border-width: 1px 0 0 0;
3362}
3363
3364	.footerCols{
3365		display: flex;
3366		padding: 24px 12px;
3367	}
3368	
3369		.footerCol{
3370			flex: 1 1 10px;
3371			padding: 0 12px;
3372		}
3373
3374@supports (display: grid){
3375	.footerCols{
3376		display: grid;
3377		grid-template-columns: repeat(auto-fit, minmax(var(--footer-col-width), 1fr));
3378		grid-gap: 40px;
3379		gap: 40px;
3380		padding: 24px;
3381	}
3382
3383	.footerCol{
3384		padding: 0px;
3385	}
3386}
3387
3388{{if !theme.footer_mobile}}
3389	@media screen and (max-width:979px){
3390		/* Hide on mobiles */
3391		.ipsfocus_megaFooter{ display: none; }
3392	}
3393{{endif}}
3394
3395	.ipsfocus_megaFooter h4{
3396		display: block;
3397		margin: 0;
3398		padding-bottom: 1.15em;
3399		font-size: 1.3rem;
3400		font-weight: bold;
3401	}
3402	
3403	.ipsfocus_megaFooter p{
3404		margin: 0;
3405		margin-bottom: 0.8em;
3406	}
3407	
3408	.ipsfocus_megaFooter .footerLinks,
3409	.ipsfocus_megaFooter .footerLinks li{
3410		margin: 0;
3411		padding: 0;
3412		display: block;
3413		list-style: none;
3414	}
3415	
3416	.ipsfocus_megaFooter .footerLinks a{
3417		line-height: 25px;
3418		display: inline-block;
3419	}
3420{{endif}}
3421
3422
3423
3424{{if theme.countdown_enable}}
3425/*
3426	----------------
3427	- Countdown
3428	----------------
3429*/
3430
3431@keyframes countdown-fade {
3432	from {
3433	    opacity: 0;
3434		transform: translateY(-5px);
3435	}
3436    to {
3437	    opacity: 1;
3438	    transform: translateY(0);
3439	}
3440}
3441
3442.focus-timer-wrap{
3443	animation: countdown-fade 0.3s;
3444	animation-delay: 0.1s;
3445	animation-fill-mode: both;
3446	
3447	font-size: 18px;
3448	min-height: calc(1.25em + 1.7em + 30px);
3449	padding: 15px 10px;	
3450	
3451	text-align: center;
3452	display: -webkit-flex;
3453	-webkit-flex-direction: column;
3454	-webkit-align-items: center;
3455	-webkit-justify-content: center;
3456
3457	display: flex;
3458	flex-direction: column;
3459	align-items: center;
3460	justify-content: center;
3461}
3462
3463	.focus-timer-title{
3464		font-size: 1.25em;
3465		line-height: 1;
3466	}
3467	
3468	.focus-timer{
3469		line-height: 1em;
3470		min-height: 1em;
3471		margin-top: 0.7em;
3472		opacity: 0.8;
3473	}
3474	
3475		.focus-timer-done .focus-timer{
3476			display: none;
3477		}
3478		
3479		.focus-timer-faint{
3480			opacity: 0.6;
3481		}
3482
3483[data-timer-text='day and']::before{
3484	content: 'day and';
3485}
3486
3487[data-timer-text='days and']::before{
3488	content: 'days and';
3489}
3490
3491[data-timer-text='week,']::before{
3492	content: 'week,';
3493}
3494
3495[data-timer-text='weeks,']::before{
3496	content: 'weeks,';
3497}
3498
3499{{endif}}
3500
3501
3502/*
3503	----------------
3504	- Guest message
3505	----------------
3506*/
3507
3508/* Force hide the message for members since it sometimes shows (cache problem maybe?) */
3509.focus-member .ipsWidget[data-blockid*="guestSignUp"]:not(.ui-sortable-handle){
3510	display: none;
3511}
3512
3513/* Reset defaults */
3514.ipsWidget[data-blockid*="guestSignUp"] .ipsWidget_inner,
3515.ipsWidget[data-blockid*="guestSignUp"] .ipsAreaBackground_light{
3516	padding: 0;
3517}
3518.ipsWidget[data-blockid*="guestSignUp"] .ipsAreaBackground_light{
3519	background: none;
3520}
3521
3522
3523/* border */
3524.ipsWidget[data-blockid*="guestSignUp"],
3525.guest-widget-footer{
3526	border: 1px solid {hextorgb="text_color" opacity="0.3"};
3527}
3528
3529	/* internal header and buttons */
3530	.guest-widget-header,
3531	.guest-widget-footer,
3532	.ipsWidget[data-blockid*="guestSignUp"] a.ipsButton:not(.ipsSocial){
3533		background-color: {theme="area_background"};
3534	}
3535
3536/* Guest message wrap */
3537.ipsWidget[data-blockid*="guestSignUp"]{	
3538    border-radius: 4px;
3539	box-shadow: none;
3540	padding: 6px;
3541	overflow: hidden; /* Clip corners to create border-radius on children */
3542}
3543	
3544	/* Header */
3545	.guest-widget-header{
3546	    box-shadow: inset rgba(0,0,0,0.25) 0px 1px 3px, rgba(255,255,255,0.5) 0px 1px 0px;
3547	    border-radius: 4px;
3548	    color: inherit;
3549	    padding: 14px;
3550	    font-size: 1.3rem;
3551	    line-height: 1.4;
3552	    font-weight: bold;
3553	    margin: 0;
3554	    display: block;
3555	}
3556	
3557	/* Text */
3558	.ipsWidget[data-blockid*="guestSignUp"] .ipsType_richText{
3559		margin: 0;
3560		padding: 14px;
3561	}
3562	
3563	/* Footer */
3564	.guest-widget-footer{
3565		background-image: linear-gradient(to bottom, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.7) 100%);
3566		border-width: 1px 0 0 0;
3567		line-height: 32px;
3568		
3569		padding: 4px;
3570		margin: 0 -6px -6px -6px;
3571	}
3572
3573		.guest-widget-footer ul{
3574			list-style: none;
3575			margin: 0;
3576			padding: 0;
3577			display: flex;
3578			align-items: center;
3579			flex-wrap: wrap;
3580		}
3581	
3582			.guest-widget-footer li{
3583				margin: 5px;
3584				flex: 0 0 auto;
3585			}
3586
3587			.ipsWidget_vertical .guest-widget-footer li{
3588				flex: 1 0 auto;
3589			}
3590
3591			.guest-widget-footer .ipsButton{
3592				float: none;
3593				display: block;
3594			}
3595	
3596	/* Social buttons in guest message */
3597	.ipsWidget[data-blockid*="guestSignUp"] a.ipsButton:not(.ipsSocial){
3598	    border: 0 solid currentcolor;
3599	    
3600	    border-radius: 3px;
3601	    color: inherit;
3602	    padding: 0 14px 0 46px;
3603	    line-height: inherit;
3604	    font-weight: bold;
3605	    position: relative;
3606	}
3607	
3608		/* Hover */
3609		.ipsWidget[data-blockid*="guestSignUp"] a.ipsButton:not(.ipsSocial):hover{
3610		    background-image: linear-gradient(to bottom, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.08) 100%);
3611		}
3612		
3613		/* Active */
3614		.ipsWidget[data-blockid*="guestSignUp"] a.ipsButton:not(.ipsSocial):active{
3615		    background-image: linear-gradient(to bottom, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.05) 100%);
3616		    transform: translateY(1px);
3617		}
3618	
3619		/* Register / sign in icons */
3620		.ipsWidget[data-blockid*="guestSignUp"] a.ipsButton:not(.ipsSocial)::before{
3621			background: rgba(255,255,255,0.2);
3622		    border-radius: 3px 0px 0px 3px;
3623		    content: "\f084";
3624		    position: absolute;
3625		    top: 0; left: 0; bottom: 0;
3626		    width: 32px;
3627		    text-align: center;
3628			font-family: "FontAwesome";
3629			font-size: 14px;
3630			font-weight: normal;
3631			-webkit-font-smoothing: antialiased;
3632			-moz-osx-font-smoothing: grayscale;
3633			{prefix="transform" value="translate(0,0)"}
3634			pointer-events: none;
3635		}
3636		
3637			/* Register icon */
3638			.ipsWidget[data-blockid*="guestSignUp"] a.ipsButton[href*='/register/']:not(.ipsSocial)::before{
3639				content: "\f067";
3640			}
3641
3642			/* Button border */
3643			.ipsWidget[data-blockid*="guestSignUp"] a.ipsButton:not(.ipsSocial)::after{
3644				border-width: 1px;
3645				top: 0; right: 0; bottom: 0; left: 0;
3646				opacity: 0.7;
3647			}
3648	
3649	/* Social buttons */
3650	.ipsWidget[data-blockid*="guestSignUp"] .ipsSocial{
3651		min-width: 0;
3652		max-width: none;
3653		width: auto;
3654		line-height: 32px;
3655		vertical-align: top;
3656		display: inline-flex;
3657		align-items: center;
3658	}
3659
3660		/* Border */
3661		.ipsWidget[data-blockid*="guestSignUp"] .ipsSocial:after{
3662			border-width: 1px;
3663			border-style: solid;
3664			top: 0; left: 0; right: 0; bottom: 0;
3665		}
3666	
3667		.ipsWidget[data-blockid*="guestSignUp"] .ipsSocial_text{
3668			padding: 0 10px;
3669		}
3670	
3671
3672/* Alert colours */
3673.focus-guest-alert .ipsWidget[data-blockid*="guestSignUp"],
3674.focus-guest-alert .guest-widget-footer{
3675	border-color: #f0cea1;
3676}
3677
3678/* background and color */
3679.focus-guest-alert .ipsWidget[data-blockid*="guestSignUp"]{
3680	background-color: #fcefe0 !important;
3681	color: #9A6200;
3682}
3683
3684	/* internal header and buttons */
3685	.focus-guest-alert .guest-widget-header,
3686	.focus-guest-alert .guest-widget-footer,
3687	.focus-guest-alert .ipsWidget[data-blockid*="guestSignUp"] a.ipsButton:not(.ipsSocial){
3688		background-color: #EFAF5B;
3689	}
3690
3691/*
3692	----------------
3693	- Global Message
3694	----------------
3695*/
3696{{if theme.global_enable}}
3697
3698.ipsfocus-globalMessage:not(.displayGlobalMessage){
3699	display: none;
3700}
3701
3702	html[dir='ltr'] .ipsfocus-globalMessage{
3703		padding-right: 50px;
3704	}
3705	
3706	html[dir='rtl'] .ipsfocus-globalMessage{
3707		padding-left: 50px;
3708	}
3709
3710	.ipsfocus-globalMessage p{
3711		margin: 0 0 0.7em 0;
3712	}
3713	
3714	.ipsfocus-globalMessage .ipsMessage,
3715	.ipsfocus-globalMessage p:last-of-type{
3716		margin: 0;
3717	}
3718	
3719	.ipsfocus-globalDismiss{
3720		background: rgba(0,0,0,0.4);
3721		color: #fff;
3722		width: 30px;
3723		height: 30px;
3724		border-radius: 30px;
3725		border: 0;
3726		font-size: 14px;
3727		display: flex;
3728		align-items: center;
3729		justify-content: center;
3730		position: absolute;
3731		right: 9px;
3732		top: 9px;
3733		cursor: pointer;
3734	}
3735	
3736	html[dir='rtl'] .ipsfocus-globalDismiss{
3737		right: auto;
3738		left: 9px;
3739	}
3740	
3741		.ipsfocus-globalDismiss:before{
3742			content: "\f00d";
3743		    font-family: "FontAwesome";
3744			-webkit-font-smoothing: antialiased;
3745			-moz-osx-font-smoothing: grayscale;
3746			{prefix="transform" value="translate(0,0)"}
3747		}
3748{{endif}}
3749
3750
3751
3752/*
3753	----------------
3754	- Background Picker
3755	----------------
3756*/
3757{{if theme.focus_picker}}
3758
3759.focus-pickerWrap{ display: none; }
3760
3761	.focus-picker{
3762		display: -webkit-flex;
3763		-webkit-align-items: center;
3764		-webkit-justify-content: space-between;
3765		
3766		display: flex;
3767		align-items: center;
3768		justify-content: space-between;
3769		
3770		margin: 0 -5px;
3771	}
3772
3773	.focus-picker span{
3774		-webkit-flex: 1 1 10px;
3775		flex: 1 1 10px;
3776		
3777		display: block;
3778		position: relative;
3779		
3780		background-size: cover;
3781		background-position: 50% 0% ;
3782		
3783		border-radius: 3px;
3784		box-shadow: inset rgba(0,0,0,0.1) 0px 5px 10px, inset rgba(0,0,0,0.25) 0px 1px 2px;
3785		color: #fff;
3786		font-size: 1.45rem;
3787		text-shadow: rgba(0,0,0,0.3) 0px 2px 3px;		
3788		
3789		-moz-user-select: none;
3790		-webkit-user-select: none;
3791		-ms-user-select: none;
3792		user-select: none;
3793		margin-bottom: 5px;
3794		height: 160px;
3795		margin: 0 5px;
3796		text-align: center;
3797		cursor: pointer;
3798	}
3799	
3800	.focus-picker .ipsfocus_bg1{
3801		background-color: {theme="picker_c1"};
3802		{{if theme.picker_i1}}background-image: url('{theme="picker_i1"}');{{endif}}
3803	}
3804	
3805	.focus-picker .ipsfocus_bg2{
3806		background-color: {theme="picker_c2"};
3807		{{if theme.picker_i2}}background-image: url('{theme="picker_i2"}');{{endif}}
3808	}
3809	
3810	.focus-picker .ipsfocus_bg3{
3811		background-color: {theme="picker_c3"};
3812		{{if theme.picker_i3}}background-image: url('{theme="picker_i3"}');{{endif}}
3813	}
3814	
3815	.focus-picker .ipsfocus_bg4{
3816		background-color: {theme="picker_c4"};
3817		{{if theme.picker_i4}}background-image: url('{theme="picker_i4"}');{{endif}}
3818	}
3819	
3820	.focus-picker .ipsfocus_bg5{
3821		background-color: {theme="picker_c5"};
3822		{{if theme.picker_i5}}background-image: url('{theme="picker_i5"}');{{endif}}
3823	}
3824	
3825	.focus-picker .ipsfocus_bg6{
3826		background-color: {theme="picker_c6"};
3827		{{if theme.picker_i6}}background-image: url('{theme="picker_i6"}');{{endif}}
3828	}
3829/*
3830	.focus-picker span:nth-of-type({expression="theme.focus_picker_number + 1"}),
3831	.focus-picker span:nth-of-type({expression="theme.focus_picker_number + 2"}),
3832	.focus-picker span:nth-of-type({expression="theme.focus_picker_number + 3"}),
3833	.focus-picker span:nth-of-type({expression="theme.focus_picker_number + 4"}){
3834		display: none;
3835	}
3836*/
3837
3838	.focus-picker span:nth-of-type(n + {expression="theme.focus_picker_number + 1"}){
3839		display: none;
3840	}
3841
3842	.focus-picker span:before{
3843		content: '';
3844		background: rgba(255,255,255,0.2);
3845		position: absolute;
3846		top: 0; left: 0; right: 0; bottom: 0;
3847		border-radius: inherit;
3848		
3849		transition: all 0.2s ease-in-out;
3850		opacity: 0;
3851	}
3852	
3853	.focus-picker span:after{
3854		display: -webkit-flex;
3855		-webkit-align-items: center;
3856		-webkit-justify-content: center;
3857		
3858		display: flex;
3859		align-items: center;
3860		justify-content: center;
3861		
3862	    content: "\f0fe";
3863		font-family: "FontAwesome";
3864		font-size: 72px;
3865		line-height: 1;
3866		-webkit-font-smoothing: antialiased;
3867		-moz-osx-font-smoothing: grayscale;
3868		
3869		position: absolute;
3870		top: 0; left: 0; right: 0; bottom: 0;
3871		
3872		transform: translateY(20px);
3873		transition: all 0.2s ease-in-out;
3874		opacity: 0;
3875	}
3876	
3877	@media screen and (min-width: 980px){
3878		.focus-picker span:hover:before{
3879			opacity: 1;
3880		}
3881		.focus-picker span:hover:after{
3882			transform: translateY(0);
3883			opacity: 0.8;
3884		}
3885	}
3886	
3887	@media screen and (max-width:979px){
3888		
3889		{{if theme.picker_mobile}}
3890			.ipsfocus-toggleBgPicker{ display: none !important; }
3891		{{endif}}
3892		
3893		.focus-picker span{
3894			height: 100px;
3895		}
3896		.focus-picker span:before,
3897		.focus-picker span:after{
3898			display: none;
3899		}
3900	}
3901
3902.ipsfocus-toggleBgPicker{
3903	cursor: pointer;
3904}
3905
3906{{endif}}
3907
3908
3909
3910
3911/*
3912	----------------
3913	- Headers: typography.css
3914	----------------
3915*/
3916
3917.ipsPageHeader{
3918	margin-top: 0;
3919	padding: 15px;
3920	background: {theme="area_background_reset"};
3921}
3922
3923/* Maintitle */
3924.ipsType_sectionTitle{
3925	border: 0;
3926	border-radius: 0;
3927	text-transform: none;
3928	line-height: 2rem;
3929}
3930
3931	.ipsType_sectionTitle .ipsType_light{
3932		opacity: 0.7;
3933	}
3934
3935.ipsType_pageTitle,
3936.ipsType_sectionTitle,
3937.ipsType_secondaryTitle,
3938.ipsType_sectionHead,
3939.ipsType_minorHeading {
3940	{{if theme.headline_font != 'default'}}
3941	font-family: "{theme='headline_font'}";
3942	{{else}}
3943	font-family: inherit;
3944	{{endif}}
3945}
3946
3947
3948/*
3949	----------------
3950	- .ipsBox
3951	----------------
3952*/
3953
3954.ipsBox{
3955	border: 0;
3956	border-radius: 0;
3957	box-shadow: none;
3958}
3959
3960/* Internal boxes */
3961html .ipsApp .ipsBox:not(.ipsWidget) .ipsBox,
3962html .ipsApp .ipsTabs_panels .ipsBox,
3963html .ipsApp .ipsDialog > div .ipsBox {
3964    border: 1px solid {hextorgb="text_color" opacity="0.2"};
3965    background: {hextorgb="text_color" opacity="0.03"};
3966    box-shadow: rgba(0,0,0,0.07) 0px 1px 5px;
3967    border-radius: 3px;
3968    background-clip: padding-box !important;
3969}
3970
3971html .ipsApp .ipsBox .ipsAreaBackground .ipsBox{
3972	background-color: {theme="area_background_reset"};
3973}
3974	
3975	/* Internal headers */
3976	html .ipsApp .ipsBox .ipsBox .ipsWidget_title,
3977	html .ipsApp .ipsTabs_panels .ipsBox .ipsWidget_title,
3978	html .ipsApp .ipsBox .ipsBox .ipsType_sectionTitle,
3979	html .ipsApp .ipsTabs_panels .ipsBox .ipsType_sectionTitle{
3980	    background: {theme="tab_background"};
3981	    color: #fff;
3982	    border: 1px solid {hextorgb="text_color" opacity="0.8"};
3983	    text-shadow: none;
3984	    font-family: inherit;
3985	    text-transform: none;
3986	    box-shadow: none;
3987	    text-shadow: none;
3988	    margin: 5px 5px 0 5px;
3989	    border-radius: 3px;
3990	    font-size: 1.3rem;
3991	    font-weight: bold;
3992	    padding: 9px 12px;
3993	}
3994	
3995	/* Push in pagination, eg. Club Members */
3996	html .ipsApp .ipsBox .ipsBox .ipsButtonBar,
3997	html .ipsApp .ipsTabs_panels .ipsBox .ipsButtonBar{
3998		margin: 5px;
3999		border-radius: 3px;
4000	}
4001	
4002	/* Force internal background colour on grid backgrounds, eg. Club Members */ 
4003	html .ipsApp .ipsBox .ipsBox > .ipsAreaBackground,
4004	html .ipsApp .ipsTabs_panels .ipsBox > .ipsAreaBackground{
4005		background: transparent;
4006	}
4007
4008
4009/* Without padding, content hits the side borders */
4010.ipsBox_alt{
4011	padding: 15px;
4012}
4013
4014/* Remove styles from child ipsBox_alt's */
4015.ipsBox_alt .ipsBox_alt{
4016	background: none;
4017	border: 0;
4018	box-shadow: none;
4019	padding: 0;
4020}
4021
4022
4023/*
4024	----------------
4025	- Buttons
4026	----------------
4027*/
4028
4029	/* Remove defaults since the pseudo element handles borders and hover */
4030
4031	/* Remove hover */
4032	.ipsApp .ipsButton:not( .ipsButton_noHover ):hover {
4033		background-image: none;
4034	}
4035
4036	/* Remove active */
4037	.ipsApp .ipsButton:active,
4038	.ipsApp .ipsButton_active {
4039		box-shadow: none;
4040		background-image: none;
4041	}
4042	
4043
4044/* Overwrite defaults: Make sure all buttons have a transparent border */
4045.ipsApp .ipsButton,
4046.ipsApp .ipsToolList .ipsButton_link,
4047.ipsApp .ipsButton_link.ipsButton_link_secondary,
4048.ipsApp .ipsButton_link,
4049.ipsApp .ipsButton:active,
4050.ipsApp .ipsButton_active{
4051	border: 1px solid transparent;
4052}
4053
4054
4055
4056/* Create pseudo element for border and hover */	
4057.ipsButton{
4058	position: relative;
4059}
4060
4061.ipsApp .ipsButton{
4062	transition: none;
4063}
4064
4065.ipsApp .ipsCoverPhoto_button{
4066	position: absolute;
4067}
4068
4069/* The overflow: hidden; needs to be unfortunately removed otherwise the pseudo element isn't shown */
4070.ipsApp .ipsButton_fullWidth{
4071	overflow: visible;
4072}
4073
4074	.ipsButton:after{
4075		content: '';
4076		position: absolute;
4077		top: -1px; left: -1px; right: -1px; bottom: -1px;
4078		border-width: inherit;
4079		border-style: inherit;
4080		border-color: rgba(0,0,0,0.2);
4081		border-radius: inherit;
4082		pointer-events: none;
4083	}
4084	
4085		/* Hover */
4086		.ipsButton:hover:after{
4087			background: rgba(255,255,255,0.1);
4088		}
4089		
4090		/* Active */
4091		.ipsApp .ipsButton:active:after,
4092		.ipsApp .ipsButton_active:after {
4093			background: rgba(0,0,0,0.1);
4094		}
4095
4096
4097/* Active nudge */
4098.ipsButton:active {
4099	transform: translateY(1px);
4100}
4101
4102	/* Remove active nudge */
4103	.ipsComment_controls .ipsButton:active,
4104	.ipsButton_split .ipsButton:active,
4105	.ipsMenu .ipsButton_link:active{
4106		transform: none;
4107	}
4108
4109
4110/* Light button */
4111.ipsApp .ipsButton_light:after {
4112	border-color: {hextorgb="light_button_font" opacity="0.25"};
4113}
4114
4115	.ipsApp .ipsButton_light:hover:after {
4116		border-color: {hextorgb="light_button_font" opacity="0.4"};
4117	}
4118	
4119	.ipsApp .ipsButton_light:active:after {
4120		background: rgba(0,0,0,0.05);
4121	}
4122	
4123
4124
4125/* Very light */
4126.ipsApp .ipsButton_veryLight:after {
4127	border-color: {hextorgb="very_light_button_font" opacity="0.25"};
4128}
4129
4130	.ipsApp .ipsButton_veryLight:hover:after {
4131		border-color: {hextorgb="very_light_button_font" opacity="0.4"};
4132	}
4133	
4134	.ipsApp .ipsButton_veryLight:active:after {
4135		background: rgba(0,0,0,0.05);
4136	}
4137
4138
4139
4140/* Link buttons */	
4141.ipsApp .ipsButton_link:after{
4142	border-color: currentColor;
4143	opacity: 0.5;
4144}
4145
4146	.ipsApp .ipsButton_link:hover:after{
4147		background: none;
4148		opacity: 0.8;
4149	}
4150	
4151	.ipsApp .ipsButton_link:active:after {
4152		background: none;
4153		opacity: 1;
4154	}
4155
4156	/* Link buttons next to Topic button */	
4157	.ipsApp .ipsToolList .ipsButton_link:after{
4158		display: none;
4159	}	
4160	
4161
4162
4163/* Icons on reply and new topic buttons */
4164.ipsButton_important[href='#replyForm']::before,
4165.ipsButton_important[href$='do=add']::before,
4166.ipsButton_important[href$='startTopic/']::before{
4167	content: '\f086';
4168	font-family: 'FontAwesome';
4169	font-weight: normal;
4170	display: inline-block;
4171	text-rendering: auto;
4172	-webkit-font-smoothing: antialiased;
4173	-moz-osx-font-smoothing: grayscale;
4174	transform: translate(0,0);
4175	margin-right: 8px;
4176	line-height: 1px;
4177}
4178
4179html[dir='rtl'] .ipsButton_important[href='#replyForm']::before,
4180html[dir='rtl'] .ipsButton_important[href$='do=add']::before,
4181html[dir='rtl'] .ipsButton_important[href$='startTopic/']::before{
4182	margin-right: 0;
4183	margin-left: 8px;
4184}
4185
4186
4187
4188/* Follow and promote button */	
4189.ipsApp .ipsButton_link.ipsFollow,
4190.ipsApp .ipsButton_link.ipsPromote {
4191	background: {theme="very_light_button"};
4192	color: {theme="very_light_button_font"};
4193}
4194
4195	.ipsApp .ipsButton_link.ipsFollow:after,
4196	.ipsApp .ipsButton_link.ipsPromote:after{
4197		border-color: currentColor;
4198		opacity: 0.3;
4199	}
4200	
4201	.ipsApp .ipsButton_link.ipsFollow:hover:after,
4202	.ipsApp .ipsButton_link.ipsPromote:hover:after{
4203		border-color: currentColor;
4204		opacity: 0.6;
4205	}
4206
4207
4208/* Remove border for certain buttons */
4209#elProfileHeader .ipsButton:after,
4210#ipsMultiQuoter .ipsButton:after,
4211#elProfileStats .ipsButton:after{
4212	border: 0;
4213}
4214
4215
4216
4217	
4218	
4219
4220/* Bolder font on certain buttons */
4221.ipsToolList .ipsButton,
4222.ipsButton_primary{
4223	font-weight: bold;
4224}
4225
4226
4227/* New topic button */
4228.ipsToolList.ipsToolList_horizontal > li.ipsToolList_primaryAction .ipsButton:not(.ipsButton_link){
4229	min-width: 0;
4230	font-weight: bold;
4231}
4232
4233
4234
4235/* Split */
4236.ipsButton_split{
4237	border-radius: 3px;
4238	position: relative;
4239	z-index: 1;
4240}
4241	
4242	html[dir="ltr"] ul.ipsButton_split > li:first-child,
4243	html[dir="ltr"] .ipsButton_split > .ipsButton:first-child,
4244	html[dir="ltr"] .ipsButton_split > li:first-child > .ipsButton,
4245	html[dir="rtl"] ul.ipsButton_split > li:last-child,
4246	html[dir="rtl"] .ipsButton_split > .ipsButton:last-child,
4247	html[dir="rtl"] .ipsButton_split > li:last-child > .ipsButton{
4248		border-top-left-radius: inherit;
4249		border-bottom-left-radius: inherit;
4250	}
4251	
4252	html[dir="ltr"] ul.ipsButton_split > li:last-child,
4253	html[dir="ltr"] .ipsButton_split > .ipsButton:last-child,
4254	html[dir="ltr"] .ipsButton_split > li:last-child > .ipsButton,
4255	html[dir="rtl"] ul.ipsButton_split > li:first-child,
4256	html[dir="rtl"] .ipsButton_split > .ipsButton:first-child,
4257	html[dir="rtl"] .ipsButton_split > li:first-child > .ipsButton{
4258		border-top-right-radius: inherit;
4259		border-bottom-right-radius: inherit;
4260	}
4261
4262html[dir='ltr'] .ipsButton_split .ipsButton{
4263	margin-left: -1px;
4264}
4265
4266html[dir='rtl'] .ipsButton_split .ipsButton{
4267	margin-right: -1px;
4268}
4269
4270/* Fluid buttons */
4271.ipsButton_split .ipsButton.ipsButton_link{
4272	background: {theme="area_background_reset"};
4273	border: 1px solid transparent !important;
4274	position: relative;
4275	z-index: 0;
4276}
4277
4278	.ipsButton_split .ipsButton.ipsButton_link:hover{
4279		z-index: 1;
4280	}
4281	
4282	.ipsButton_split .ipsButton.ipsButton_link:after{
4283		display: block;
4284	}
4285
4286	.ipsButton_split .ipsButton.ipsButton_primary{
4287		border-color: transparent !important;
4288		position: relative;
4289		z-index: 2;
4290	}
4291
4292
4293
4294
4295
4296/* Bug fix: Remove hover effect from certain buttons */
4297.ipsButton_link:hover,
4298.ipsApp .ipsButton_overlaid:hover{
4299	background-image: none !important;
4300}
4301
4302
4303/* Change URL button on new article page */
4304.ipsForm button.ipsButton:not(.ipsButton_link)[data-ipschange]{
4305	background: {theme="normal_button"};
4306	border-color: transparent;
4307	color: {theme="normal_button_font"};
4308}
4309
4310
4311/* Add tag button in topic view */
4312.ipsTags_edit .ipsButton_veryVerySmall{
4313	height: auto;
4314	margin-top: 0;
4315	vertical-align: top;
4316	font-size: 10px;
4317	line-height: 16px;
4318}
4319
4320
4321
4322
4323/* Follow button */
4324.ipsApp .ipsFollow{
4325	padding: 0;
4326}
4327
4328.ipsApp .ipsFollow,
4329.ipsApp .ipsFollow > a:only-child{
4330	display: inline-flex;
4331	align-items: center;
4332	justify-content: space-between;
4333}
4334
4335
4336html .ipsApp .ipsFollow > a:not(.ipsCommentCount),
4337html .ipsApp .ipsFollow > span:not(.ipsCommentCount),
4338html .ipsApp .ipsFollow > a > span:not(.ipsCommentCount){
4339	left: auto;
4340	right: auto;
4341	padding: 0 15px;
4342}
4343
4344
4345/* Required for guest follow buttons */
4346.ipsApp .ipsFollow > a:only-child{
4347	display: flex;
4348}
4349
4350	.ipsFollow > *:first-child{
4351		flex: 1 1 auto;
4352	}
4353	
4354	.ipsFollow > *:last-child{
4355		flex: 0 0 auto;
4356	}
4357
4358
4359
4360
4361.ipsFollow .ipsCommentCount{
4362	color: inherit;
4363	background: transparent;
4364	line-height: 12px;
4365}
4366
4367.ipsFollow > .ipsCommentCount{
4368	border-radius: inherit;
4369}
4370
4371html[dir='ltr'] .ipsFollow .ipsCommentCount{
4372	margin: 0 3px 0 0;
4373}
4374
4375html[dir='rtl'] .ipsFollow .ipsCommentCount{
4376	margin: 0 0 0 3px;
4377}
4378
4379	.ipsButton_primary .ipsCommentCount{
4380		background: transparent;
4381	}
4382	
4383	/* Pseudo background for comment count */
4384	.ipsFollow .ipsCommentCount:before{
4385		content: '';
4386		position: absolute;
4387		top: 0; left: 0; right: 0; bottom: 0;
4388		border-radius: inherit;
4389		background: currentcolor;
4390		opacity: 0.15;
4391		pointer-events: none;
4392	}
4393
4394@media screen and (max-width:767px){
4395	.ipsApp .ipsFollow{
4396		display: flex !important;
4397	}
4398}
4399
4400/* Bug fix: Remove cursor effect since not all areas of the button can be clicked */
4401.ipsApp .ipsButton.ipsFollow:hover{
4402	cursor: auto;
4403}
4404
4405.ipsFollow .ipsCommentCount::after{
4406	display: none;
4407}
4408
4409
4410
4411
4412
4413
4414
4415/*
4416	----------------
4417	- Data Lists
4418	----------------
4419*/
4420
4421.ipsApp .ipsDataItem_new, .ipsApp .ipsDataItem_success {
4422	background-color: #e9f2e8;
4423}
4424
4425.ipsApp .ipsDataItem_warning {
4426	background-color: {theme="moderated_light"};
4427}
4428
4429.ipsApp .ipsDataItem_error {
4430	background-color: {theme="moderated"};
4431}
4432
4433.ipsApp .ipsDataItem_info {
4434	background-color: {theme="selected"};
4435}
4436
4437.ipsApp .ipsDataItem_status,
4438.ipsDataList_readStatus .ipsDataItem:not( .ipsDataItem_unread ):not( .ipsDataItem_selected ):not( .ipsModerated ) {
4439	background: {theme="area_background_light"};
4440}
4441
4442/* Remove zebra stripes */
4443.ipsDataList.ipsDataList_zebra .ipsDataItem:not( .ipsDataItem_selected ):not( .ipsModerated ):not( .ipsDataItem_new ):not( .ipsDataItem_success ):not( .ipsDataItem_warning ):not( .ipsDataItem_error ):not( .ipsDataItem_info ):not( .ipsDataItem_status ):nth-child(even) {
4444	background-color: transparent;
4445}
4446/* If zebra stripes are removed, borders should be added */
4447.ipsDataList.ipsDataList_zebra > .ipsDataItem{ border-bottom-width: 1px; border-bottom-style: solid; }
4448
4449.ipsDataList_large .ipsDataItem{
4450	border-bottom-width: 1px;
4451}
4452
4453
4454
4455/*
4456	----------------
4457	- Minimal and Responsive Layouts
4458	----------------
4459*/
4460
4461/* Show search, user panel, mobile navigation, etc on minimal pages for a more consistent layout */
4462#ipsfocus #elMobileNav,
4463#ipsfocus .ipsApp #elUserNav{
4464	display: flex !important;
4465}
4466
4467#ipsfocus #elSearch{
4468	display: block !important;
4469}
4470
4471/* Ensure breadcrumbs are shown on minimal pages, on desktops only */
4472@media (min-width: 980px){
4473	#ipsfocus .ipsBreadcrumb{
4474		display: block !important;
4475	}
4476}
4477
4478/* Responsive */
4479@media screen and (max-width:979px){
4480	.ipsApp .user-links,
4481	.ipsApp .nav-bar,
4482	.ipsApp .ipsfocus-breadcrumb{
4483		display: none;
4484	}
4485}
4486
4487/* Minimal */
4488/*
4489.ipsApp.ipsLayout_minimal .user-links,
4490.ipsApp.ipsLayout_minimal .ipsfocus-search,
4491.ipsApp.ipsLayout_minimal .ipsfocus-breadcrumb, */
4492.ipsLayout_minimal .hide-minimal{
4493	display: none;
4494}
4495
4496.ipsLayout_minimal #ipsLayout_mainArea{
4497	padding: 0;
4498}
4499/*
4500	.ipsLayout_minimal .ipsNavBar_primary > a,
4501	.ipsApp .ipsNavBar_primary #elBackHome{
4502		padding: 0 20px;
4503		color: inherit;
4504		font-size: 1.2rem;
4505		line-height: {theme="navigationheight"}px;
4506		font-weight: bold;
4507		display: inline-block;
4508	}
4509*/
4510	.ipsLayout_minimal .ipsNavBar_primary:after{ display: none; }
4511
4512
4513/* .ipsLayout_minimal .content-padding, */
4514.ipsLayout_minimal #ipsLayout_contentArea{
4515	max-width: 1000px;
4516	margin: 0 auto;
4517}
4518	
4519/*
4520	----------------
4521	- Forum Index
4522	----------------
4523*/
4524
4525/* Pageheader alignment */
4526body[data-pagemodule="forums"][data-pagecontroller="index"] .ipsPageHeader{
4527	display: flex;
4528	align-items: center;
4529	justify-content: space-between;
4530}
4531
4532	body[data-pagemodule="forums"][data-pagecontroller="index"] .ipsPageHeader > *{
4533		flex: 0 1 auto;
4534	}
4535
4536	body[data-pagemodule="forums"][data-pagecontroller="index"] .ipsPageHeader .ipsToolList{
4537		order: 2;
4538		margin: 0;
4539	}
4540	
4541	body[data-pagemodule="forums"][data-pagecontroller="index"] .ipsPageHeader:after{
4542		display: none;
4543	}
4544	
4545	/* Make sure icons in buttons are clear */
4546	body[data-pagemodule="forums"][data-pagecontroller="index"] .ipsPageHeader .ipsButton_split .fa{
4547		font-size: 14px;
4548	}
4549	
4550	/* Bug fix */
4551	.ipsPageHeader ul.ipsButton_split{
4552		vertical-align: top;
4553	}
4554	/* Align header correctly if only one category exists, like a fresh installation */
4555	body[data-pagemodule="forums"][data-pagecontroller="index"] .ipsPageHeader > *:only-child{ width: 100%; }
4556
4557
4558
4559/* Collapse icon */
4560.cForumToggle{
4561	line-height: 20px;
4562	text-align: center;
4563}
4564
4565.cForumToggle:after{
4566	content: '\f146';
4567	font-size: 14px;
4568	display: inline-block;
4569	vertical-align: top;
4570}
4571
4572	.cForumRow_hidden .cForumToggle:after{
4573		content: '\f0fe';
4574	}
4575
4576
4577
4578/* Remove border from last forum */
4579.cForumList .cForumRow .ipsDataList li:last-of-type{
4580	border-bottom: 0;
4581}
4582
4583
4584
4585/* Bold forum names */
4586.cForumRow .ipsDataItem_title{
4587	margin-bottom: 0;
4588}
4589	.cForumRow .ipsDataItem_title a{
4590		font-weight: bold;
4591	}
4592	
4593/* NEW badge */
4594.cForumList .ipsDataItem_unread .ipsDataItem_title:before,
4595.cForumGrid_unread .ipsPhotoPanel h3 a:before {
4596	color: #fff;
4597	background: #ed7a16;
4598	display: inline-block;
4599	font-size: 0.9rem;
4600	line-height: 2;
4601	border-radius: 3px;
4602	padding: 0 4px;
4603	margin-right: 4px;
4604	vertical-align: middle;
4605}
4606
4607	html[dir='rtl'] .cForumList .ipsDataItem_unread .ipsDataItem_title:before,
4608	html[dir='rtl'] .cForumGrid_unread .ipsPhotoPanel h3 a:before{
4609		margin-left: 4px;
4610		margin-right: 0;
4611	}
4612
4613
4614
4615/* Space apart elements in main column */
4616.cForumList .ipsDataItem_main > *:not(:first-child){
4617	margin-top: 5px;
4618}
4619
4620
4621
4622/* Remove empty descriptions */
4623.cForumRow .ipsDataItem_meta:empty{
4624	display: none;
4625}
4626
4627
4628/*
4629	----------------
4630	- Subforums
4631	----------------
4632*/
4633
4634/* Remove subforum stem image */
4635html .ipsApp .ipsDataItem_subList {
4636	padding: 0px !important;
4637	background: none !important;
4638}
4639	
4640	.ipsDataItem_subList > li{
4641		margin: 0 !important;
4642	}
4643
4644	.ipsDataItem_subList a{
4645		display: inline-block;
4646		white-space: nowrap;
4647		max-width: 100%;
4648		overflow: hidden;
4649		text-overflow: ellipsis;
4650		vertical-align: top;
4651	}
4652
4653	/* Space out subforums if grid isn't supported */
4654	html[dir='ltr'] .ipsDataItem_subList a{
4655		margin-right: 20px;
4656	}
4657
4658	html[dir='rtl'] .ipsDataItem_subList a{
4659		margin-left: 20px;
4660	}
4661
4662	/* Remove gap created by icon on unread forum */
4663	.ipsDataItem_subList .ipsItemStatus_tiny{
4664		margin-right: -0.3em;
4665	}
4666
4667	/* Add plus icon */
4668	.ipsDataItem_subList a:before{
4669		content: "\f18e";
4670		font-family: "FontAwesome";
4671		font-size: 14px;
4672		font-weight: normal;
4673		display: inline-block;
4674		margin-right: 4px;
4675		text-rendering: auto;
4676		-webkit-font-smoothing: antialiased;
4677		-moz-osx-font-smoothing: grayscale;
4678		transform: translate(0,0);
4679		vertical-align: top;
4680	}
4681
4682	html[dir='rtl'] .ipsDataItem_subList a::before{
4683		margin-left: 4px;
4684		margin-right: 0;
4685	}
4686
4687	/* Remove comma's */
4688	.ipsDataItem_subList li a::after{
4689		display: none;
4690	}
4691
4692	/* Place subforums into grid for browsers which support it */
4693	@supports (display: grid){
4694		.ipsDataItem_subList{
4695			display: var(--subforum-display);
4696			grid-gap: var(--subforum-gap);
4697			grid-template-columns: repeat(auto-fill, minmax(var(--subforum-min-width), 1fr));
4698		}
4699	}
4700
4701	/* Remove subforum dot for new content */
4702	.ipsDataItem_subList .fa-circle{ display: none; }
4703
4704
4705/* Bug fix - Forum stats */
4706.ipsDataItem_stats dl{ margin: 0; }
4707
4708
4709
4710/* Bold unread topic titles */
4711.cForumRow.ipsDataItem_unread .ipsDataItem_lastPoster li:nth-of-type(2) {
4712    font-weight: bold;
4713}
4714
4715
4716
4717@media screen and (min-width:980px){
4718	
4719	/* Neaten up padding if forum icons dont have a background */
4720	html[dir='ltr'] .cForumList .ipsDataItem_main{
4721		{{if theme.ficon_trans}}
4722		padding-left: 0;
4723		{{else}}
4724		padding-left: 5px;
4725		{{endif}}
4726		padding-right: 0;
4727	}
4728	
4729	html[dir='rtl'] .cForumList .ipsDataItem_main{
4730		{{if theme.ficon_trans}}
4731		padding-right: 0;
4732		{{else}}
4733		padding-right: 5px;
4734		{{endif}}
4735		padding-left: 0;
4736	}
4737	
4738	/* Align forum stats to the side on desktop */
4739	html[dir='ltr'] .cForumList .ipsDataItem_statsLarge{
4740		text-align: right;
4741		padding-left: 0;
4742		padding-right: 20px;
4743	}
4744	html[dir='rtl'] .cForumList .ipsDataItem_statsLarge{
4745		text-align: left;
4746		padding-right: 0;
4747		padding-left: 20px;
4748	}
4749		
4750}
4751
4752
4753
4754/* Show latest topic title on tablets and mobiles */
4755@media screen and (max-width:979px){
4756	
4757	/* Flex for mobiles */
4758	.cForumRow.ipsDataItem{
4759		display: -webkit-flex;
4760		-webkit-align-items: flex-start;
4761		-webkit-flex-wrap: wrap;
4762
4763		display: flex;
4764		align-items: flex-start;
4765		flex-wrap: wrap;
4766	}
4767	
4768	
4769	
4770	/* Forum icons and stats */
4771	.cForumRow .ipsDataItem_icon{
4772		-webkit-flex: 0 0 auto;
4773		flex: 0 0 auto;
4774		transform: translateY(5px);
4775	}
4776	
4777		/* Add space after icon */
4778		html[dir='ltr'] .cForumRow.ipsDataItem .ipsDataItem_icon{
4779			margin-right: 10px;
4780		}
4781		
4782		html[dir='rtl'] .cForumRow.ipsDataItem .ipsDataItem_icon{
4783			margin-left: 10px;
4784		}
4785	
4786	
4787	
4788	/* Main */
4789	.cForumRow .ipsDataItem_main{
4790		-webkit-flex: 0 0 auto;
4791		flex: 0 0 auto;
4792		width: calc(100% - {theme="ficon_widthr"}px - 10px);
4793		padding: 0 !important;
4794		margin: 0 !important;
4795	}
4796	
4797		.cForumRow .ipsDataItem_title{
4798			display: block;
4799			max-width: calc(100% - 80px);
4800		}
4801
4802	
4803	
4804	/* Stats */
4805	.ipsApp .cForumList .ipsDataItem_icon:not(.ipsResponsive_hidePhone):not(.ipsResponsive_hideTablet) + .ipsDataItem_main + .ipsDataItem_stats{
4806		position: absolute;
4807		top: 15px;
4808		right: 12px;
4809		
4810		margin: 0;
4811		
4812		display: -webkit-flex;
4813		-webkit-align-items: center;
4814		-webkit-justify-content: flex-end;
4815
4816		display: flex;
4817		align-items: center;
4818		justify-content: flex-end;
4819	}
4820	
4821	.cForumRow .ipsDataItem_statsLarge .ipsDataItem_stats_number{
4822		font-size: inherit;
4823	}
4824	
4825	html[dir='rtl'] .cForumList .ipsDataItem_icon:not(.ipsResponsive_hidePhone):not(.ipsResponsive_hideTablet) + .ipsDataItem_main + .ipsDataItem_stats{
4826		right: auto;
4827		left: 12px;
4828	}
4829	
4830		html[dir='ltr'] .ipsApp .cForumList .ipsDataItem_icon:not(.ipsResponsive_hidePhone):not(.ipsResponsive_hideTablet) + .ipsDataItem_main + .ipsDataItem_stats > *{
4831			margin: 0;
4832		}
4833		
4834		html[dir='rtl'] .ipsApp .cForumList .ipsDataItem_icon:not(.ipsResponsive_hidePhone):not(.ipsResponsive_hideTablet) + .ipsDataItem_main + .ipsDataItem_stats > *{
4835			margin: 0;
4836		}
4837
4838
4839
4840	/* Convert latest post to a row */
4841	.ipsApp .cForumList .ipsDataItem_lastPoster.ipsDataItem_withPhoto{
4842		position: static;
4843		height: auto;
4844		width: 100%;
4845		line-height: 22px;
4846	}
4847	
4848		.ipsApp .cForumList .ipsDataItem_lastPoster.ipsDataItem_withPhoto li{
4849			margin-top: 10px;
4850		}
4851	
4852		html[dir='ltr'] .ipsApp .cForumList .ipsDataItem_lastPoster.ipsDataItem_withPhoto{
4853			padding-left: calc({theme="ficon_widthr"}px + 10px);
4854		}
4855		
4856		html[dir='rtl'] .ipsApp .cForumList .ipsDataItem_lastPoster.ipsDataItem_withPhoto{
4857			padding-right: calc({theme="ficon_widthr"}px + 10px);
4858		}
4859			
4860	
4861	
4862	/* Fix float issue with rtl */
4863	html[dir="rtl"] .ipsDataItem_lastPoster .ipsUserPhoto{
4864		float: none;
4865	}
4866	
4867	/* Resize avatar and align text vertically in row */
4868	.cForumList .ipsUserPhoto_tiny img{
4869		width: 22px;
4870		height: 22px;
4871	}
4872	
4873		.cForumList .ipsDataItem_lastPoster.ipsDataItem_withPhoto li{
4874			display: inline-block;
4875			line-height: inherit;
4876		}
4877		
4878			html[dir='ltr'] .cForumList .ipsDataItem_lastPoster.ipsDataItem_withPhoto li:nth-of-type(1){
4879				padding-right: 6px;
4880			}
4881			
4882			html[dir='rtl'] .cForumList .ipsDataItem_lastPoster.ipsDataItem_withPhoto li:nth-of-type(1){
4883				padding-left: 6px;
4884			}
4885			
4886			.cForumList .ipsDataItem_lastPoster.ipsDataItem_withPhoto li:nth-of-type(3){
4887				display: none;
4888			}
4889		
4890		.cForumList .ipsDataItem_lastPoster.ipsDataItem_withPhoto .ipsContained{
4891			display: inline;
4892			width: auto;
4893			table-layout: auto;
4894		}
4895		
4896		.cForumList .ipsDataItem_lastPoster.ipsDataItem_withPhoto li:last-child time {
4897		    display: inline-block;
4898		    width: auto;
4899		    overflow: visible;
4900		    font-size: 0;
4901		}
4902		
4903		.cForumList .ipsDataItem_lastPoster.ipsDataItem_withPhoto li:last-child time:before{
4904			font-size: 1.1rem;
4905			content: "- ";
4906		}
4907		
4908		.cForumList .ipsDataItem_lastPoster.ipsDataItem_withPhoto li:last-child time:after{
4909			position: relative;
4910			top: auto; left: auto; right: auto;
4911			text-align: inherit;
4912			font-size: 1.1rem;
4913			content: attr(data-short);
4914		}
4915	
4916}
4917
4918/* Large screens: Move last poster info onto two lines */
4919@media screen and (min-width:1201px){
4920	
4921	html[dir="ltr"] .ipsDataItem_lastPoster.ipsDataItem_withPhoto{
4922		padding-left: 46px;
4923	}
4924	html[dir="rtl"] .ipsDataItem_lastPoster.ipsDataItem_withPhoto{
4925		padding-right: 46px;
4926	}
4927	
4928	html[dir="ltr"] .ipsDataItem_lastPoster.ipsDataItem_withPhoto li,
4929	html[dir="rtl"] .ipsDataItem_lastPoster.ipsDataItem_withPhoto li{
4930		margin: 0;
4931	}
4932	
4933	.ipsDataItem_lastPoster.ipsDataItem_withPhoto li.ipsType_blendLinks,
4934	.ipsDataItem_lastPoster.ipsDataItem_withPhoto li.ipsType_light{
4935		display: inline-block;
4936	}
4937	
4938	.ipsDataItem_lastPoster.ipsDataItem_withPhoto li.ipsType_blendLinks:after{
4939		content: ',';
4940	}
4941	
4942}
4943
4944
4945
4946/*
4947	----------------
4948	- Forum Index: Grid
4949	----------------
4950*/
4951
4952.cForumGrid{
4953	border-color: {hextorgb="text_color" opacity="0.15"};
4954	background-clip: padding-box !important;
4955	background: {theme="area_background_light"};
4956}
4957
4958.cForumGrid .cForumGrid_forumInfo{
4959	border-color: {hextorgb="text_color" opacity="0.1"};
4960}
4961
4962/* Align icon and forum name */
4963.cForumGrid_forumInfo{
4964	display: -webkit-flex !important;
4965	-webkit-align-items: center;
4966	display: flex !important;
4967	align-items: center;
4968}
4969
4970	.cForumGrid_forumInfo > span{
4971		-webkit-flex: 0 0 auto;
4972		flex: 0 0 auto;
4973		float: none;
4974	}
4975	
4976	.cForumGrid_forumInfo.ipsPhotoPanel_mini > div{
4977		-webkit-flex: 1 1 auto;
4978		flex: 1 1 auto;
4979		overflow: hidden;
4980	}
4981
4982	html[dir="ltr"] .cForumGrid_forumInfo.ipsPhotoPanel_mini > div{
4983		margin-left: 15px;
4984	}
4985	html[dir="rtl"] .cForumGrid_forumInfo.ipsPhotoPanel_mini > div{
4986		margin-right: 15px;
4987	}
4988
4989
4990/*
4991	----------------
4992	- Forum Index: Fluid
4993	----------------
4994*/
4995
4996#elContextualTools{
4997	padding: 0;
4998	margin: 0;
4999	margin-bottom: 15px;
5000}
5001
5002	#elContextualTools.ipsSticky {
5003		padding: 0;
5004	}
5005
5006.cForumMiniList_wrapper{
5007	padding: 15px 15px 5px 15px;
5008}
5009
5010	.cForumMiniList_multiRoot{
5011		margin: 0;
5012	}
5013
5014	.cForumMiniList.cForumMiniList_multiRoot > li > a{
5015		color: {theme="text_dark"};
5016		margin: 0;
5017	}
5018	
5019	.ipsApp .cForumMiniList .cForumMiniList .cForumMiniList{
5020		margin-bottom: 0;
5021	}
5022	
5023	html[dir="ltr"] .ipsSideMenu_item + .cForumMiniList,
5024	html[dir="rtl"] .ipsSideMenu_item + .cForumMiniList{
5025		border: 0;
5026	}
5027	
5028	html[dir='ltr'] .cForumMiniList .ipsSideMenu_item + .ipsSideMenu_list .ipsSideMenu_item{
5029		padding: 6px 10px 6px 6px;
5030	}
5031	
5032	html[dir='rtl'] .cForumMiniList .ipsSideMenu_item + .ipsSideMenu_list .ipsSideMenu_item{
5033		padding: 6px 6px 6px 10px;
5034	}
5035
5036	.cForumMiniList .cForumMiniList_blob{
5037		background: {theme="text_color"};
5038		color: #fff;
5039		top: auto;
5040	}
5041	
5042	html[dir="ltr"] .cForumMiniList .cForumMiniList_blob{
5043		margin-right: 8px;
5044	}
5045	
5046	html[dir="rtl"] .cForumMiniList .cForumMiniList_blob{
5047		margin-left: 8px;
5048	}
5049	
5050		.cForumMiniList .cForumMiniList_blob > span{
5051			background: {theme="area_background_reset"};
5052		}
5053
5054	.cForumMiniList.cForumMiniList_multiRoot > li > a.cForumMiniList_selected {
5055		background: {hextorgb="area_background" opacity="0.5"};
5056		border-top-left-radius: inherit;
5057		border-top-right-radius: inherit;
5058	}
5059	.cForumMiniList_categorySelected {
5060		background: {theme="area_background_light"};
5061		border-radius: 3px;
5062	}
5063	
5064	.ipsType_small.cForumMiniList_count{
5065		line-height: 18px;
5066	}
5067
5068/* Remove border radius on pseudo avatar if round corners are disabled */
5069{{if !theme.rounded_photos}}
5070	.cForumFluidTable .ipsDataItem_loading > div > span:last-child:after {
5071		border-radius: 0;
5072	}
5073{{endif}}
5074
5075/* Loading colours */
5076@-webkit-keyframes dummy_anim {
5077  0% { background-color: {hextorgb="area_background" opacity="0.6"}; }
5078  50% { background-color: {hextorgb="area_background" opacity="0.9"}; }
5079  99% { background-color: {hextorgb="area_background" opacity="0.6"}; }
5080}
5081@-moz-keyframes dummy_anim {
5082  0% { background-color: {hextorgb="area_background" opacity="0.6"}; }
5083  50% { background-color: {hextorgb="area_background" opacity="0.9"}; }
5084  99% { background-color: {hextorgb="area_background" opacity="0.6"}; }
5085}
5086@-ms-keyframes dummy_anim {
5087  0% { background-color: {hextorgb="area_background" opacity="0.6"}; }
5088  50% { background-color: {hextorgb="area_background" opacity="0.9"}; }
5089  99% { background-color: {hextorgb="area_background" opacity="0.6"}; }
5090}
5091@-o-keyframes dummy_anim {
5092  0% { background-color: {hextorgb="area_background" opacity="0.6"}; }
5093  50% { background-color: {hextorgb="area_background" opacity="0.9"}; }
5094  99% { background-color: {hextorgb="area_background" opacity="0.6"}; }
5095}
5096@keyframes dummy_anim {
5097  0% { background-color: {hextorgb="area_background" opacity="0.6"}; }
5098  50% { background-color: {hextorgb="area_background" opacity="0.9"}; }
5099  99% { background-color: {hextorgb="area_background" opacity="0.6"}; }
5100}
5101
5102
5103/*
5104	----------------
5105	- Forum Icons
5106	----------------
5107*/
5108
5109/* Icon structure */
5110.ipsItemStatus.ipsItemStatus_large{
5111	border-radius: {theme="ficon_radius"}px;
5112	font-size: {theme="ficon_size"}px;
5113	color: {theme="ficon_color"};
5114	
5115	width: {theme="ficon_width"}px;
5116	height: {theme="ficon_height"}px;
5117	
5118	display: -webkit-flex;
5119	-webkit-justify-content: center;
5120	-webkit-align-items: center;
5121
5122	display: flex;
5123	justify-content: center;
5124	align-items: center;
5125}
5126
5127
5128
5129/* Background */
5130.ipsItemStatus.ipsItemStatus_large,
5131.ipsItemStatus.ipsItemStatus_large.ipsItemStatus_read{
5132{{if theme.ficon_trans}}
5133	background-color: transparent;
5134{{else}}
5135	background: {theme="item_status"};
5136{{endif}}
5137}
5138
5139
5140/* Feature colour icons */
5141{{if theme.ficon_trans}}
5142
5143	/* Remove feature colour if transparent setting is enabled */
5144	.ipsItemStatus_large[style]{
5145		background-color: transparent !important;
5146	}
5147	
5148{{else}}
5149
5150	/* If the icon has a feature colour background, force the icon colour setting for the .fa icon */
5151	.ipsItemStatus_large[style] .fa{
5152		color: {theme="ficon_color"};
5153	}
5154	
5155{{endif}}
5156
5157
5158
5159/* Faint 'read' icons, if a 'read' icon isn't uploaded */
5160{{if !theme.ficon_image}}
5161.focus-member .ipsItemStatus.ipsItemStatus_large.ipsItemStatus_read,
5162{{endif}}
5163.focus-member .ipsItemStatus_custom.ipsItemStatus_read{
5164	opacity: 0.3;
5165	filter: grayscale(1);
5166}
5167
5168/* Make icons full visibility for guests */
5169.focus-guest .ipsItemStatus.ipsItemStatus_read{
5170	opacity: 1;
5171}
5172
5173
5174
5175
5176@media screen and (max-width:979px){
5177	.ipsDataItem_icon .ipsItemStatus.ipsItemStatus_large{
5178		font-size: {theme="ficon_sizer"}px;
5179		border-radius: calc({theme="ficon_radius"}px * 0.65); /* Smaller border radius */
5180		width: inherit;
5181		line-height: 1;
5182	}
5183}
5184
5185
5186
5187/* Unread icon */
5188.ipsItemStatus_large .fa-comments:before{
5189	content: '\{theme="ficon_unread"}';
5190}
5191/* Read icon */
5192.ipsItemStatus_large.ipsItemStatus_read .fa-comments:before{
5193	content: '\{theme="ficon_read"}';
5194}
5195
5196
5197
5198/* Let icon determine column width */
5199.ipsDataList_large .ipsDataItem_icon{
5200	/*
5201	min-width: {theme="ficon_width"}px;
5202	width: {theme="ficon_width"}px;
5203	max-width: {theme="ficon_width"}px;
5204	*/
5205	min-width: {theme="ficon_width"}px;
5206	
5207	padding: 10px;
5208	text-align: center;
5209	box-sizing: content-box;
5210}
5211
5212/* Dimensions of forum icons */
5213.ipsItemStatus_custom,
5214.cForumRow .ipsItemStatus_custom{
5215	max-width: {theme="ficon_width"}px;
5216}
5217
5218/* Responsive dimensions */
5219@media (max-width: 979px){
5220	.ipsDataList_large .ipsDataItem_icon{
5221		min-width: {theme="ficon_widthr"}px;
5222		width: {theme="ficon_widthr"}px;
5223		max-width: {theme="ficon_widthr"}px;
5224		
5225		padding: 0 !important;
5226	}
5227	.ipsItemStatus_custom,
5228	.cForumRow .ipsItemStatus_custom{
5229		max-width: {theme="ficon_widthr"}px;
5230	}
5231	.ipsDataItem_icon .ipsItemStatus.ipsItemStatus_large{
5232		height: {theme="ficon_heightr"}px;
5233	}
5234}
5235
5236
5237
5238{{if theme.ficon_imagenew}}
5239
5240	/* To use images as forum icons */
5241	.ipsItemStatus.ipsItemStatus_large .fa{
5242		display: none;
5243	}
5244	
5245	.ipsApp .ipsItemStatus.ipsItemStatus_large,
5246	.ipsApp .ipsItemStatus.ipsItemStatus_large.ipsItemStatus_read{
5247		/* Overwrite inline style background */
5248		background-color: transparent !important;
5249		
5250		background: url('{theme="ficon_imagenew"}') no-repeat 50% 50%;
5251		background-size: contain;
5252		
5253		border-radius: 0;
5254		box-shadow: none;
5255		border: 0;
5256	}
5257	
5258	{{if theme.ficon_image}}
5259	.ipsApp .ipsItemStatus.ipsItemStatus_large.ipsItemStatus_read{
5260		background-image: url('{theme="ficon_image"}');
5261	}
5262	{{endif}}
5263
5264{{endif}}
5265
5266
5267/* Fix alignment of tooltip */
5268.ipsDataItem_icon a[data-action="markAsRead"]{
5269	display: block;
5270}
5271
5272
5273
5274/*
5275	----------------
5276	- Sidebar and Widgets
5277	----------------
5278*/
5279
5280#ipsLayout_sidebar{
5281	overflow: visible;
5282}
5283
5284/* Comment count in widgets */
5285.ipsCommentCount,
5286.ipsCommentCount.ipsFaded {
5287	background: {theme="comment_count"};
5288	border-color: {theme="comment_count"};
5289	color: {theme="comment_count_font"};
5290}
5291
5292	.ipsCommentCount_hot {
5293		background: {theme="featured"};
5294		border-color: {theme="featured"};
5295	}
5296		
5297	html[dir="ltr"] .ipsCommentCount:after,
5298	html[dir="ltr"] .ipsCommentCount.ipsFaded:after,
5299	html[dir="ltr"] .ipsCommentCount_hot:after { border-right-color: inherit; }
5300	html[dir="rtl"] .ipsCommentCount:after,
5301	html[dir="rtl"] .ipsCommentCount.ipsFaded:after,
5302	html[dir="rtl"].ipsCommentCount_hot:after { border-left-color: inherit; }
5303
5304	.cWidgetComments{
5305		position: relative;
5306	}
5307
5308	html[dir="ltr"] .ipsWidget .ipsDataItem_main.cWidgetComments{
5309		padding-right: 30px;
5310	}
5311
5312	html[dir="rtl"] .ipsWidget .ipsDataItem_main.cWidgetComments{
5313		padding-left: 30px;
5314	}
5315	
5316		.cWidgetComments .ipsCommentCount{
5317			position: absolute;
5318			top: 50%;
5319			transform: translateY(-50%);
5320			margin: 0 !important;
5321		}
5322		
5323		html[dir='ltr'] .cWidgetComments .ipsCommentCount{ right: 5px; }
5324		html[dir='rtl'] .cWidgetComments .ipsCommentCount{ left: 5px; }
5325		
5326
5327
5328/* Widgets */
5329
5330.ipsWidget.ipsWidget_vertical .ipsWidget_title,
5331.ipsWidget.ipsWidget_horizontal .ipsWidget_title{
5332	border-radius: 0;
5333	border-top-left-radius: inherit;
5334	border-top-right-radius: inherit;
5335	text-transform: none;
5336	{{if theme.headline_font != 'default'}}
5337	font-family: "{theme='headline_font'}";
5338	{{else}}
5339	font-family: inherit;
5340	{{endif}}
5341}
5342
5343	/* Widget content */
5344		.ipsWidget.ipsWidget_horizontal .ipsTabs_panel {
5345			background: {theme="area_background_reset"};
5346		}
5347
5348	html[dir="ltr"] .ipsWidget_columns > [class*="ipsGrid"] {
5349		border-right-color: {hextorgb="text_color" opacity="0.12"};
5350	}
5351	html[dir="rtl"] .ipsWidget_columns > [class*="ipsGrid"] {
5352		border-left-color: {hextorgb="text_color" opacity="0.12"};
5353	}
5354	
5355	.ipsWidget.ipsWidget_primary {
5356		background: {theme="secondary_title"};
5357	}
5358	
5359		.ipsWidget.ipsWidget_primary h3 {
5360			color: {theme="secondary_title_font"};
5361		}
5362		
5363/* Member stats */
5364@media screen and (max-width:979px){
5365	.ipsWidget_horizontal[data-blockid*="app_core_stats"] .ipsGrid_span4{
5366		padding-top: 8px;
5367		padding-bottom: 8px;
5368		border-bottom: 1px solid {hextorgb="text_color" opacity="0.15"};
5369	}
5370	
5371	.ipsWidget_horizontal[data-blockid*="app_core_stats"] .ipsGrid_span4:last-of-type{
5372		border: 0;
5373	}
5374}
5375
5376/* Widget icons */
5377.ipsWidget_title::before{
5378	font-family: 'FontAwesome';
5379	font-style: normal;
5380	font-weight: normal;
5381	-webkit-font-smoothing: antialiased;
5382	-moz-osx-font-smoothing: grayscale;
5383	transform: translate(0,0);
5384	margin-right: 7px;
5385	margin-left: -3px;
5386	opacity: 0.7;
5387	display: inline-block;
5388	line-height: 1px;
5389}
5390
5391	html[dir='rtl'] .ipsWidget_title::before{
5392		margin-left: 7px;
5393		margin-right: -3px;
5394	}
5395
5396	.ipsWidget[data-blockid^="app_blog_blogs_"] .ipsWidget_title::before{ content: '\f02d'; }
5397	.ipsWidget[data-blockid^="app_blog_blogCommentFeed"] .ipsWidget_title::before{ content: '\f02e'; }
5398	.ipsWidget[data-blockid^="app_blog_entryFeed"] .ipsWidget_title::before{ content: '\f02d'; }
5399	.ipsWidget[data-blockid^="app_blog_blogStatistics"] .ipsWidget_title::before{ content: '\f200'; }
5400	.ipsWidget[data-blockid^="app_calendar_todaysBirthdays"] .ipsWidget_title::before{ content: '\f1fd'; }
5401	.ipsWidget[data-blockid^="app_calendar_upcomingEvents"] .ipsWidget_title::before{ content: '\f073'; }
5402	.ipsWidget[data-blockid^="app_calendar_recentReviews"] .ipsWidget_title::before{ content: '\f274'; }
5403	.ipsWidget[data-blockid^="app_core_stats"] .ipsWidget_title::before{ content: '\f080'; }
5404	.ipsWidget[data-blockid^="app_core_whosOnline"] .ipsWidget_title::before{ content: '\f007'; }
5405	.ipsWidget[data-blockid^="app_core_recentStatusUpdates"] .ipsWidget_title::before{ content: '\f086'; }
5406	.ipsWidget[data-blockid^="app_core_topContributors"] .ipsWidget_title::before{ content: '\f234'; }
5407	.ipsWidget[data-blockid^="app_core_activeUsers"] .ipsWidget_title::before{ content: '\f0c0'; }
5408	.ipsWidget[data-blockid^="app_core_clubs"] .ipsWidget_title::before{ content: '\f2bb'; }
5409	.ipsWidget[data-blockid^="app_core_promoted"] .ipsWidget_title::before{ content: '\f005'; }
5410	.ipsWidget[data-blockid^="app_core_members"] .ipsWidget_title::before{ content: '\f007'; }
5411	.ipsWidget[data-blockid^="app_core_newsletter"] .ipsWidget_title::before{ content: '\f003'; }
5412	.ipsWidget[data-blockid^="app_downloads_downloadsReviewFeed"] .ipsWidget_title::before{ content: '\f040'; }
5413	.ipsWidget[data-blockid^="app_downloads_downloadsCommentFeed"] .ipsWidget_title::before{ content: '\f0e6'; }
5414	.ipsWidget[data-blockid^="app_downloads_fileFeed"] .ipsWidget_title::before{ content: '\f019'; }
5415	.ipsWidget[data-blockid^="app_downloads_topDownloads"] .ipsWidget_title::before{ content: '\f091'; }
5416	.ipsWidget[data-blockid^="app_downloads_downloadStats"] .ipsWidget_title::before{ content: '\f200'; }
5417	.ipsWidget[data-blockid^="app_downloads_topSubmitters"] .ipsWidget_title::before{ content: '\f091'; }
5418	.ipsWidget[data-blockid^="app_forums_topicFeed"] .ipsWidget_title::before{ content: '\f03a'; }
5419	.ipsWidget[data-blockid^="app_forums_forumStatistics"] .ipsWidget_title::before{ content: '\f201'; }
5420	.ipsWidget[data-blockid^="app_forums_poll"] .ipsWidget_title::before{ content: '\f200'; }
5421	.ipsWidget[data-blockid^="app_forums_postFeed"] .ipsWidget_title::before{ content: '\f086'; }
5422	.ipsWidget[data-blockid^="app_forums_hotTopics"] .ipsWidget_title::before{ content: '\f005'; }
5423	.ipsWidget[data-blockid^="app_gallery_galleryStats"] .ipsWidget_title::before{ content: '\f200'; }
5424	.ipsWidget[data-blockid^="app_gallery_albums"] .ipsWidget_title::before{ content: '\f02d'; }
5425	.ipsWidget[data-blockid^="app_gallery_imageFeed"] .ipsWidget_title::before{ content: '\f03e'; }
5426	.ipsWidget[data-blockid^="app_gallery_recentComments"] .ipsWidget_title::before{ content: '\f0e6'; }
5427	.ipsWidget[data-blockid^="app_gallery_recentImageReviews"] .ipsWidget_title::before{ content: '\f040'; }
5428	.ipsWidget[data-blockid^="app_nexus_donations"] .ipsWidget_title::before{ content: '\f155'; }
5429	.ipsWidget[data-blockid^="app_nexus_subscriptions"] .ipsWidget_title::before{ content: '\f0d6'; }
5430		
5431/* Fixes */
5432.ipsWidget_title .ipsType_light{
5433	color: inherit;
5434	opacity: 0.6;
5435	line-height: inherit;
5436}
5437
5438html[dir='ltr'] .cWidgetComments .ipsBadge{ margin-right: 5px; }
5439html[dir='rtl'] .cWidgetComments .ipsBadge{ margin-left: 5px; }
5440
5441
5442	
5443/*
5444	----------------
5445	- Topic List
5446	----------------
5447*/
5448
5449/* Rules */
5450a[data-ipsdialog-content="#elForumRules"],
5451a[data-ipsdialog-content="#elCategoryRules"]{
5452	display: block;
5453	padding: 15px;
5454	margin-bottom: 10px;
5455
5456	color: {theme="link"};
5457	background: {theme="area_background_light"};
5458	border: 2px solid {hextorgb="text_color" opacity="0.3"};
5459	border-width: 2px 0px;
5460}
5461
5462	/* Force primary background in pop-up */
5463	.ipsDialog #elForumRules{
5464		background-color: transparent;
5465	}
5466
5467/* Add extra space between topic stats and avatar */
5468@media screen and (min-width:980px){
5469	html[dir='ltr'] .cTopicList .ipsDataItem_stats{
5470		padding-right: 25px;
5471	}
5472	html[dir='rtl'] .cTopicList .ipsDataItem_stats{
5473		padding-left: 25px;
5474	}
5475}
5476
5477/* Better alignment of forum title, topic title, prefix, tags and pagination */
5478@media screen and (min-width:768px){
5479	.cForumTopicTable .ipsDataItem_title{
5480		display: flex !important;
5481		align-items: center;
5482	}
5483	
5484	.cForumTopicTable .ipsDataItem_title .ipsContained{
5485		flex: 1 1 auto;
5486		display: block !important;
5487	}
5488	
5489		.cForumTopicTable .ipsDataItem_title .ipsBadge.ipsBadge_small,
5490		.cForumTopicTable .ipsTag_prefix,
5491		.cForumTopicTable .ipsPagination.ipsPagination_mini{
5492			vertical-align: top;
5493			position: relative;
5494			top: 2px;
5495		}
5496		
5497		.cForumTopicTable .ipsTag_prefix{
5498			top: 1px;
5499		}
5500		
5501		.cForumTopicTable .ipsDataItem_title > .ipsType_break > a,
5502		.cForumTopicTable .ipsDataItem_meta .ipsTags_inline{
5503			display: inline-block;
5504		}
5505
5506	/* Neaten alignment of status icons and prefixes */
5507	html[dir='ltr'] .cForumTopicTable .ipsDataItem_title > .ipsType_break > span,
5508	html[dir='ltr'] .cForumTopicTable .ipsDataItem_title > .ipsType_break > a,
5509	html[dir='ltr'] .cForumTopicTable .ipsDataItem .ipsDataItem_main .ipsContained > i{
5510		padding-right: 0;
5511		margin-right: 5px;
5512		display: inline-block;
5513	}
5514	
5515	html[dir='rtl'] .cForumTopicTable .ipsDataItem_title > .ipsType_break > span,
5516	html[dir='rtl'] .cForumTopicTable .ipsDataItem_title > .ipsType_break > a,
5517	html[dir='rtl'] .cForumTopicTable .ipsDataItem .ipsDataItem_main .ipsContained > i{
5518		padding-right: 0;
5519		margin-left: 5px;
5520		display: inline-block;
5521	}
5522
5523}
5524
5525/* Topic icons */
5526.ipsItemStatus:not( .ipsItemStatus_large ),
5527.ipsItemStatus.ipsItemStatus_read:not(.ipsItemStatus_large){
5528	color: {theme="link"};
5529}
5530
5531/*
5532.cTopicList .ipsDataItem_icon{
5533	vertical-align: middle !important;
5534}
5535.ipsItemStatus.ipsItemStatus_read:not(.ipsItemStatus_large){
5536	color: inherit;
5537}
5538*/
5539	.cTopicList .ipsItemStatus.ipsItemStatus_read{
5540		opacity: 0.25;
5541	}
5542	.cTopicList .ipsItemStatus .fa-star:before{
5543		content: '\f086';
5544	}
5545	.cTopicList .ipsItemStatus .fa-circle:before{
5546		content: '\f0e6';
5547	}
5548
5549
5550
5551
5552
5553/*
5554	----------------
5555	- Topic View
5556	----------------
5557*/
5558
5559/* Font size and line height in posts and editor */
5560.ipsComment_content .ipsType_richText,
5561.ipsApp .cke_contents{
5562	font-size: 1.4rem;
5563	line-height: 1.6;
5564}
5565
5566
5567/* Hold to edit title */
5568.ipsType_pageTitle [data-role="editableTitle"]:hover,
5569.ipsType_pageTitle[data-role="editableTitle"]:hover{
5570	background: {hextorgb="text_color" opacity="0.2"};
5571}
5572
5573
5574/* Button and rating alignment */
5575.focus-button-alignment{
5576	margin: 15px 0;
5577}
5578
5579/* The clearfix class is required for a 3rd party hook */
5580.focus-button-alignment.ipsClearfix:after{
5581	display: none;
5582}
5583
5584@media screen and (min-width:768px){
5585	.focus-button-alignment{
5586		display: flex;
5587		align-items: center;
5588	}
5589	
5590		.focus-button-alignment > *{
5591			flex: 0 0 auto;
5592		}
5593		
5594		html[dir='ltr'] .focus-button-alignment .ipsToolList{
5595			margin: 0 0 0 auto;
5596		}
5597		
5598		html[dir='rtl'] .focus-button-alignment .ipsToolList{
5599			margin: 0 auto 0 0;
5600		}
5601}
5602
5603
5604
5605/* Rating */
5606.focus-rating{
5607	color: {theme="link_button"};
5608}
5609	.focus-rating .ipsType_light{
5610		color: inherit;
5611	}
5612
5613	.ipsRating .ipsRating_half .fa-star-half.fa-flip-horizontal,
5614	.ipsRating .ipsRating_off .fa-star-o,
5615	.ipsRating .ipsRating_off .fa-star {
5616		color: {hextorgb="link_button" opacity="0.7"};
5617	}
5618
5619
5620
5621/* Reply area */
5622.focus-transparent .cTopicPostArea.ipsBox{
5623	background: none !important;
5624	padding-left: 0;
5625	padding-right: 0;
5626	border: 0;
5627	box-shadow: none;
5628}
5629
5630.ipsAreaBackground:not(.ipsBox)[data-role="replyArea"]{
5631	background: none;
5632}
5633
5634
5635
5636/* Compact view */
5637.focus-topic-compact .focus-topic .cPost.ipsBox{
5638	margin-bottom: 0;
5639	box-shadow: none;
5640	background: none;
5641	border: 0;
5642	border-radius: 0;
5643}
5644
5645	/* Remove background, border and box-shadow from highlighted and popular posts */
5646	.focus-topic-compact .focus-topic .ipsComment_highlighted:not(.ipsBox_transparent):not(.ipsModerated):not(.ipsComment_selected):not(.ipsComment_popular),
5647	.focus-topic-compact .ipsComment.ipsBox.ipsComment_popular:not(.ipsModerated):not(.ipsComment_selected){
5648		box-shadow: none;
5649		border: 0;
5650		background-color: transparent;
5651	}
5652
5653/* Reduce space between posts if transparent class is used, since 15px looks too large */
5654.focus-transparent:not(.focus-topic-compact) .cTopic .ipsComment{
5655	margin-bottom: 8px;
5656}
5657
5658
5659/* Inherit border-radius for post headers and button bar */
5660.cPost:before,
5661.cAuthorPane_mobile,
5662.focus-topic-compact .focus-topic .cPost:first-of-type{
5663	border-top-left-radius: inherit;
5664	border-top-right-radius: inherit;
5665}
5666
5667.focus-topic-compact .focus-topic form,
5668.cPost .ipsColumn,
5669.cPost .ipsComment_content,
5670.cPost .cPost_contentWrap{
5671	border-radius: inherit;
5672}
5673
5674.focus-topic-compact .focus-topic .cPost:last-of-type,
5675.cPost .ipsItemControls{
5676	border-bottom-left-radius: inherit;
5677	border-bottom-right-radius: inherit;
5678}
5679
5680
5681/* Post layout */
5682
5683@media screen and (min-width:768px){
5684
5685	.cPost:before{
5686		background: {theme="secondary_title"};
5687		height: {theme="post_header_height"}px;
5688		content: '';
5689		display: block;
5690		position: absolute;
5691		z-index: 1;
5692		top: 0; left: 0; right: 0;
5693		box-sizing: border-box;
5694	}
5695	
5696	.cPost .cAuthorPane .cAuthorPane_author,
5697	.cPost .ipsComment_meta{
5698		line-height: {theme="post_header_height"}px;
5699		color: {theme="secondary_title_font"};
5700	}
5701
5702	/* Place text on top of .cPost::before */
5703	.cAuthorPane_author,
5704	.cPost .ipsComment_meta{
5705	  position: relative;
5706	  z-index: 2;
5707	}
5708	
5709		/* Place column beneath post header */
5710		.cPost .cRatingColumn{
5711			position: static;
5712		}
5713		
5714		/* Push solve content below header and make sure corners dont poke out from rounded post headers */
5715		.cRatingColumn{
5716			padding-top: {expression="theme.post_header_height + 15"}px !important;
5717			border: 1px solid {hextorgb="text_color" opacity="0.08"};
5718			border-width: 0 1px 0 0;
5719		}
5720		
5721		html[dir='rtl'] .cRatingColumn{
5722			border-width: 0 0 0 1px;
5723		}
5724		
5725		/* Align username */
5726		.cPost .cAuthorPane{
5727			padding-top: 0 !important;
5728		}
5729
5730			.cPost .cAuthorPane .cAuthorPane_author{
5731				font-size: 1.4rem;
5732				margin-bottom: 0;
5733				white-space: nowrap;
5734			}
5735			
5736			.cAuthorPane_author strong{
5737				font-weight: bold;
5738			}
5739			
5740			/* User info */
5741			.cAuthorPane_info{ padding-top: 18px; }
5742			
5743			/* Sticky author pane */
5744			.focus-sticky-author .cAuthorPane_info{
5745				position: -webkit-sticky;
5746				position: sticky;
5747				top: 0;
5748			}
5749			
5750		/* Align date */
5751		body.ipsApp .cPost .ipsComment_meta{
5752			padding-top: 0;
5753			padding-bottom: 0;
5754			font-size: 1.2rem;
5755		}
5756		
5757			.cPost .cAuthorPane .cAuthorPane_author a,
5758			.cPost .ipsComment_meta a,
5759			.cPost .ipsComment_meta .ipsType_light{
5760				color: inherit !important;
5761			}
5762			
5763		body.ipsApp .cPost .cPost_contentWrap{
5764			padding-top: 18px;
5765			padding-bottom: 10px;
5766		}
5767		
5768		.ipsComment_tools > li{
5769			vertical-align: top;
5770		}
5771	
5772	/* Flex layout */
5773	
5774	.ipsApp .cPost:not(.ipsHide){
5775		display: -webkit-flex;
5776		display: flex;
5777	}
5778	
5779	.cPost .cAuthorPane{
5780		-webkit-flex: 0 0 auto;
5781		flex: 0 0 auto;
5782	}
5783
5784	
5785	.cPost > .ipsColumn_fluid{
5786		-webkit-flex: 1 1 auto;
5787		display: -webkit-flex;
5788		flex: 1 1 auto;
5789		display: flex;
5790		/* IE 11 fix */
5791		width: 300px;
5792	}
5793	
5794	/* Push bar to the bottom if enabled */
5795	.focus-post-bar .cPost{
5796		-webkit-align-items: stretch;
5797		align-items: stretch;
5798	}
5799	
5800	.focus-post-bar .cPost .ipsComment_content{
5801		display: -webkit-flex;
5802		-webkit-flex-direction: column;
5803		display: flex;
5804		flex-direction: column;
5805		/* IE 11 fix */
5806		width: 100%;
5807	}
5808	
5809	.focus-post-bar .cPost .ipsComment_meta{
5810		-webkit-flex: 0 0 auto;
5811		flex: 0 0 auto;
5812	}
5813	
5814	.focus-post-bar .cPost .cPost_contentWrap{
5815		display: -webkit-flex;
5816		-webkit-flex-direction: column;
5817		-webkit-justify-content: space-between;
5818		-webkit-flex: 1 1 auto;
5819		display: flex;
5820		flex-direction: column;
5821		justify-content: space-between;
5822		flex: 1 1 auto;
5823	}
5824	
5825	.focus-post-bar .cPost [data-role="commentContent"]{
5826		margin-bottom: auto;
5827		padding-bottom: 10px;
5828	}
5829	
5830	/* Larger avatars */
5831	.cTopic .ipsUserPhoto_large img,
5832	.cTopic img.ipsUserPhoto_large,
5833	.cTopic .ipsUserPhoto_large:after{
5834		width: 110px;
5835		height: 110px;
5836		width: var(--topic-avatar);
5837		height: var(--topic-avatar);
5838		{{if theme.rounded_photos}}
5839		border-radius: 50%;
5840		{{endif}}
5841	}
5842
5843
5844
5845	@supports (--css: variables){
5846
5847		.cPost .cAuthorPane{
5848			width: var(--author-pane--width);
5849			background: var(--author-pane--background, transparent);
5850		}
5851
5852		/* Add padding to content area if a border or background is added to the author pane */
5853		html[dir='ltr'] .cPost .ipsComment_content{
5854			padding-left: var(--post-content--padding, 0px);
5855			border: 0px solid var(--author-pane--border-color, rgba(0,0,0,0.1));
5856			border-width: 0px 0px 0px var(--author-pane--border-width, 0px);
5857		}
5858
5859		html[dir='rtl'] .cPost .ipsComment_content{
5860			padding-right: var(--post-content--padding, 0px);
5861			border-width: 0px var(--author-pane--border-width, 0px) 0px 0px;
5862		}
5863
5864	}
5865
5866}
5867
5868@media screen and (max-width: 767px){
5869	
5870	/* Post header */
5871	#ipsLayout_body .cAuthorPane_mobile{
5872		background-color: {theme="secondary_title"};
5873	}
5874	
5875	.cPost .cAuthorPane_mobile{
5876		color: {theme="secondary_title_font"};
5877		padding: 10px !important;
5878	}
5879	
5880		/* Force the reputation to inhert header colour for better contrast */
5881		.focus-rep-inherit .cAuthorPane_mobile .ipsRepBadge{
5882			color: inherit !important;
5883		}
5884	
5885	.cPost.ipsComment .cAuthorPane{
5886		height: 60px;
5887	}
5888	
5889	/* Avatar */
5890	html[dir="ltr"] .cPost.ipsComment .cAuthorPane_photo{ left: 9px; }
5891	html[dir="rtl"] .cPost.ipsComment .cAuthorPane_photo{ right: 9px; }
5892	
5893	.cPost.ipsComment .cAuthorPane_photo{
5894		top: 50%;
5895		margin-top: -20px;
5896	}
5897	
5898		.cAuthorPane_photo .ipsUserPhoto{
5899			margin: 0;
5900		}
5901	
5902	/* Username */
5903	html[dir="ltr"] .cPost.ipsComment .cAuthorPane_author{ margin-left: 50px; }
5904	html[dir="rtl"] .cPost.ipsComment .cAuthorPane_author{ margin-right: 50px; }
5905	
5906	.cPost .cAuthorPane_mobile .cAuthorPane_author {
5907		margin-top: 0;
5908		margin-bottom: 0;
5909	    line-height: 20px;
5910	    max-height: 20px;
5911		display: block !important;
5912	}
5913	
5914		.cPost .cAuthorPane_mobile .cAuthorPane_author > a{
5915			font-size: 14px;
5916			line-height: inherit;
5917		}
5918		
5919		.cPost .cAuthorPane_mobile .cAuthorPane_author > a,
5920		.cPost .cAuthorPane_mobile .cAuthorPane_author > span{
5921			display: inline-block !important;
5922			vertical-align: top;
5923		}
5924		
5925		.cAuthorPane_mobile .ipsRepBadge{
5926			vertical-align: top;
5927		}
5928	
5929		#ipsLayout_body .cAuthorPane_mobile *,
5930		#ipsLayout_body .cPost .ipsComment_meta .ipsType_light{
5931			color: inherit;
5932		}
5933	
5934	html[dir] .cPost .ipsComment_meta{
5935		line-height: 20px;
5936		color: {theme="secondary_title_font"};
5937		top: -30px;
5938		padding: 0 1px;
5939	}
5940	
5941		.cPost .ipsComment_meta .ipsComment_tools > li{
5942			vertical-align: top;
5943		}
5944	
5945		/* Prevent wrapping to multiple lines */
5946		.cPost .ipsComment_meta > .ipsType_reset:not(.ipsPos_right){
5947			overflow: hidden;
5948			white-space: nowrap;
5949			text-overflow: ellipsis;
5950		}
5951	
5952	
5953	
5954	/* Fix padding */
5955	body.ipsApp .cPost .cPost_contentWrap{
5956		padding-left: 0;
5957		padding-right: 0;
5958	}
5959	
5960	/* Fix margin */
5961	.cPost .ipsColumn{
5962		margin-bottom: 0 !important;
5963	}
5964
5965}
5966
5967/* Hide comment controls in posts if there are no buttons or react options */
5968.ipsItemControls.iIC-no-buttons.iIC-no-react{
5969	display: none;
5970}
5971
5972/* Neatly pad comment controls when there are no reactions */
5973.cPost .ipsComment_controls{
5974	padding: 7px 0;
5975}
5976
5977/* Ignored post options bar */
5978.ipsComment.ipsComment_ignored{
5979	padding-bottom: 15px;
5980}
5981.focus-topic-compact .ipsComment.ipsComment_ignored{
5982	padding-top: 15px;
5983	border-top: 1px solid {hextorgb="text_color" opacity="0.15"};
5984}
5985
5986
5987/* Force moderated colours */
5988.cPost.ipsModerated{
5989	background-color: {theme="moderated"} !important;
5990}
5991
5992.cPost.ipsModerated:before,
5993.cPost.ipsModerated .cAuthorPane_mobile{
5994	background-color: {theme="moderated_text"} !important;
5995}
5996
5997.focus-post-bar .cPost.ipsModerated .ipsItemControls{
5998	background: {theme="moderated"} !important;
5999}
6000
6001	.cPost.ipsModerated .cAuthorPane .cAuthorPane_author,
6002	.ipsApp .cPost.ipsModerated .ipsComment_meta,
6003	.cPost.ipsModerated .cAuthorPane_mobile{
6004		color: {theme="moderated"};
6005	}
6006	.focus-post-row .cPost.ipsModerated .ipsComment_controls{
6007		color: {theme="moderated_text"};
6008	}
6009
6010/* Selected colours */
6011.ipsComment.cPost.ipsComment_selected{
6012	background: {theme="selected"} !important;
6013}
6014
6015
6016
6017
6018
6019/*
6020	----------------
6021	Comment controls: bar
6022	----------------
6023*/
6024
6025.ipsItemControls,
6026html[dir="ltr"] .ipsReact_blurb:not(.ipsHide) + .ipsReact_types,
6027html[dir="rtl"] .ipsReact_blurb:not(.ipsHide) + .ipsReact_types{
6028	border-color: {hextorgb="text_color" opacity="0.1"};
6029}
6030
6031html[dir="rtl"] .ipsReact_blurb,
6032html[dir="ltr"] .ipsReact_blurb:not(.ipsHide) + .ipsReact_types{ margin-left: 5px; }
6033html[dir="ltr"] .ipsReact_blurb,
6034html[dir="rtl"] .ipsReact_blurb:not(.ipsHide) + .ipsReact_types{ margin-right: 5px; }
6035
6036.focus-post-bar .cTopic .ipsItemControls{
6037	background: {theme="area_background_light"};
6038	border-color: {hextorgb="text_color" opacity="0.13"};
6039	border-style: solid;
6040	border-width: 1px 0 0 0;
6041	color: {theme="text_color"};
6042}
6043
6044@media screen and (min-width:768px){
6045	
6046	.cTopic .ipsItemControls{
6047		padding: 1px;
6048	}
6049	
6050	.focus-post-bar .cTopic .ipsItemControls{
6051		width: auto;
6052		margin-bottom: -10px;
6053		order: 1;
6054	}
6055	
6056		html[dir='ltr'].focus-post-bar .cTopic .ipsItemControls{
6057			margin-left: -200px;
6058			margin-right: -15px;
6059			padding-left: 200px;
6060			margin-left: calc(var(--item-controls-offset) * -1);
6061			padding-left: var(--item-controls-offset);
6062		}
6063		
6064		html[dir='rtl'].focus-post-bar .cTopic .ipsItemControls{
6065			margin-right: -200px;
6066			margin-left: -15px;
6067			padding-right: 200px;
6068			margin-right: calc(var(--item-controls-offset) * -1);
6069			padding-right: var(--item-controls-offset);
6070		}
6071	
6072	.focus-post-bar .cTopic .cAuthorPane_info:after{
6073		content: '';
6074		display: block;
6075		height: 44px;
6076	}
6077
6078}
6079
6080@media screen and (max-width:767px){
6081	
6082	.cPost .ipsItemControls{
6083		margin-bottom: 0;
6084		padding: 5px 0;
6085	}
6086	
6087	.focus-post-bar .cPost .ipsItemControls{
6088		margin-left: -10px;
6089		margin-right: -10px;
6090		width: auto;
6091		padding: 5px;
6092	}
6093	
6094}
6095
6096
6097/*
6098	----------------
6099	Comment controls: buttons
6100	----------------
6101*/
6102
6103.focus-post-buttons .cTopic .ipsComment_controls{
6104	color: {theme="normal_button_font"};
6105	
6106	padding: 5px 0;
6107	line-height: 2.8rem;
6108	font-weight: bold;
6109	font-size: 0;
6110}
6111
6112	.focus-post-buttons .cTopic .ipsComment_controls > li{
6113		font-size: 1.2rem;
6114		vertical-align: top;
6115	}
6116
6117	html[dir="ltr"].focus-post-buttons  .cTopic .ipsComment_controls > li{
6118		margin-right: 5px;
6119	}
6120	
6121	html[dir="rtl"].focus-post-buttons  .cTopic .ipsComment_controls > li{
6122		margin-left: 5px;
6123	}
6124
6125		.focus-post-buttons .cTopic .ipsComment_controls a,
6126		.focus-post-buttons .cTopic .ipsComment_controls .ipsButton{
6127			border-radius: 3px;
6128			text-shadow: rgba(0,0,0,0.2) 0px 1px 1px;
6129			background-color: {theme="normal_button"};
6130			border-color: rgba(0,0,0,0.2);
6131			
6132			font-size: inherit;
6133			font-weight: inherit;
6134			color: inherit;
6135			margin: 0;
6136			padding: 0 0.8em;
6137			line-height: inherit;
6138			display: block;
6139			border-width: 0px;
6140			border-style: solid;
6141			text-shadow: inherit;
6142			vertical-align: top;
6143			position: relative;
6144		}
6145			
6146			.focus-post-buttons .cTopic .ipsComment_controls a:after,
6147			.focus-post-buttons .cTopic .ipsComment_controls .ipsButton:after{
6148				content: '';
6149				position: absolute;
6150				top: 0; left: 0; right: 0; bottom: 0;
6151				border-width: 1px;
6152				border-style: inherit;
6153				border-color: inherit;
6154				border-radius: inherit;
6155				pointer-events: none;
6156			}
6157			
6158				/* Hover */
6159				.focus-post-buttons .cTopic .ipsComment_controls a:hover:after,
6160				.focus-post-buttons .cTopic .ipsComment_controls .ipsButton:hover:after{
6161					background: rgba(255,255,255,0.2);
6162				}
6163				
6164				/* Active */
6165				.focus-post-buttons .cTopic .ipsComment_controls a:active,
6166				.focus-post-buttons .cTopic .ipsComment_controls .ipsButton:active {
6167					transform: translateY(1px);
6168				}
6169				
6170				.focus-post-buttons .cTopic .ipsComment_controls a:active:after,
6171				.focus-post-buttons .cTopic .ipsComment_controls .ipsButton:active:after {
6172					background: rgba(0,0,0,0.1);
6173				}
6174			
6175		
6176			
6177/*
6178	----------------
6179	Comment controls: button row
6180	----------------
6181*/
6182
6183.focus-post-row .cTopic .ipsItemControls{
6184	padding: 0;
6185}
6186
6187.focus-post-row .cTopic .ipsComment_controls{
6188	color: {theme="link"};
6189	border-width: 0 0 0 1px;
6190	border-style: solid;
6191	border-color: {hextorgb="text_color" opacity="0.13"};
6192	
6193	padding: 0;
6194	line-height: 44px;
6195	font-weight: bold;
6196	font-size: 0;
6197}
6198
6199html[dir='rtl'].focus-post-row .cTopic .ipsComment_controls{
6200	border-width: 0 1px 0 0;
6201}
6202
6203@media screen and (max-width:767px){
6204	.focus-post-row .cTopic .ipsComment_controls,
6205	html[dir='rtl'].focus-post-row .cTopic .ipsComment_controls{
6206		border-width: 0;
6207	}
6208}
6209
6210	.focus-post-row .cTopic .ipsComment_controls > li{
6211		font-size: 1.2rem;
6212		vertical-align: top;
6213		margin: 0;
6214		border-width: 0 1px 0 0;
6215		border-style: solid;
6216		border-color: inherit;
6217	}
6218	
6219	html[dir='rtl'].focus-post-row .cTopic .ipsComment_controls > li{
6220		border-width: 0 0 0 1px;
6221	}
6222
6223		.focus-post-row .cTopic .ipsComment_controls a,
6224		.focus-post-row .cTopic .ipsComment_controls .ipsButton{
6225			background: none;
6226			
6227			font-size: inherit;
6228			font-weight: inherit;
6229			color: inherit;
6230			margin: 0;
6231			padding: 0 1em;
6232			line-height: inherit;
6233			display: block;
6234			border: 0;
6235			text-shadow: inherit;
6236			vertical-align: top;
6237			box-shadow: none;
6238		}
6239		
6240			.focus-post-row .cTopic .ipsComment_controls a:hover,
6241			.focus-post-row .cTopic .ipsComment_controls .ipsButton:hover{
6242				color: inherit;
6243				background: {hextorgb="text_color" opacity="0.06"};
6244			}
6245			
6246			/* Remove pseudo border */
6247			.focus-post-row .cTopic .ipsComment_controls .ipsButton:after{
6248				display: none;
6249			}
6250
6251
6252
6253/*
6254	----------------
6255	- Reactions bar
6256	----------------
6257*/
6258
6259.ipsReact{
6260	font-size: 1.2rem;
6261}
6262
6263/* Initial icon */
6264.ipsReact_button {
6265	filter: grayscale(100%);
6266	background-clip: padding-box !important;
6267}
6268
6269	.ipsReact_button img{
6270		max-width: 30px;
6271		max-height: 30px;
6272	}
6273
6274	/* Hover */
6275	body.ipsApp_noTouch .ipsReact_types:hover .ipsReact_button,
6276	body:not( .ipsApp_noTouch ) .ipsReact_types.ipsReact_types_active .ipsReact_button {
6277		border-color: {hextorgb="text_color" opacity="0.2"};
6278		background: {theme="area_background_light"};
6279		box-shadow: none;
6280		
6281		transform: none;
6282	}
6283	
6284	/* List of icons */
6285	.ipsReact_types ul{
6286		background: {theme="area_background_dark"};
6287		border: 0;
6288	}
6289	
6290	/* When a reaction option is hovered */
6291	.ipsReact_types ul a{
6292		transform-origin: 50% 50%;
6293	}
6294	
6295		.ipsReact_types ul a:hover {
6296			transform: scale(1);
6297		}
6298
6299/* Wrap excess reactions */
6300.ipsReact_reactions{ flex-wrap: wrap; }
6301
6302/* You reacted to this.. */
6303.ipsReact_blurb{
6304	display: flex;
6305	align-items: center;
6306	
6307	padding: 5px 0;
6308}
6309
6310	.ipsReact_reactions + .ipsReact_overview{
6311		margin: 0 10px;
6312		order: -1;
6313	}
6314	
6315	.ipsReact_reactCount {
6316		border-color: {hextorgb="text_color" opacity="0.2"};
6317		background: {theme="area_background_reset"};
6318		background-clip: padding-box;
6319	}
6320	
6321		.ipsReact_reactCount > a,
6322		.ipsReact_reactCount > span{
6323			display: flex;
6324			align-items: center;
6325		}
6326		
6327		.ipsReact_reactCount > span{
6328			padding: 0 !important;
6329			margin: 0 !important;
6330			background: none !important;
6331		}
6332		
6333			.ipsReact_reactCount span:first-child{
6334				padding: 0 3px;
6335				line-height: 18px;
6336			}
6337			
6338				.ipsReact_reactCount img{
6339					vertical-align: top;
6340				}
6341			
6342			html[dir] .ipsReact_reactCount span:last-child {
6343				background: {hextorgb="text_color" opacity="0.1"};
6344				color: {theme="text_color"};
6345				margin: 0;
6346				line-height: 24px;
6347			}
6348
6349.ipsReact_unreact{
6350	background: {theme="area_background_dark"};
6351}
6352
6353/* Reaction ring when clicked */
6354a.ipsReact_reaction:after {
6355	box-shadow: inset 0 0 0 35px {hextorgb="text_color" opacity="0"};
6356}
6357@-webkit-keyframes reaction-click-ring {
6358	0% {
6359		opacity: 1;
6360		-webkit-transform: scale3d(0.4, 0.4, 1);
6361		transform: scale3d(0.4, 0.4, 1);
6362	}
6363	40% {
6364		box-shadow: inset 0 0 0 2px {hextorgb="text_color" opacity="0.8"};
6365		-webkit-transform: scale3d(1, 1, 1);
6366		transform: scale3d(1, 1, 1);
6367		opacity: 0.8;
6368	}
6369	100% {
6370		box-shadow: inset 0 0 0 2px {hextorgb="text_color" opacity="0.8"};
6371		opacity: 0;
6372		-webkit-transform: scale3d(1.2, 1.2, 1);
6373		transform: scale3d(1.2, 1.2, 1);
6374	}
6375}
6376
6377@keyframes reaction-click-ring {
6378	0% {
6379		opacity: 1;
6380		transform: scale3d(0.4, 0.4, 1);
6381	}
6382	40% {
6383		box-shadow: inset 0 0 0 2px {hextorgb="text_color" opacity="0.8"};
6384		transform: scale3d(1, 1, 1);
6385		opacity: 0.8;
6386	}
6387	100% {
6388		box-shadow: inset 0 0 0 2px {hextorgb="text_color" opacity="0.8"};
6389		opacity: 0;
6390		transform: scale3d(1.2, 1.2, 1);
6391	}
6392}
6393
6394
6395@media screen and (max-width:979px){
6396	
6397	/* Bug fix: remove horizontal scrollbar */
6398	html[dir="ltr"] .ipsReact_unreact{
6399		right: -6px;
6400	}
6401	html[dir="rtl"] .ipsReact_unreact{
6402		left: -6px;
6403	}
6404	a.ipsReact_reaction::after{
6405		width: 40px;
6406		height: 40px;
6407	}
6408		html[dir="ltr"] a.ipsReact_reaction::after{
6409			margin: -20px 0 0 -20px;
6410		}
6411		html[dir="rtl"] a.ipsReact_reaction::after{
6412			margin: -20px -20px 0 0;
6413		}
6414	
6415}
6416
6417
6418
6419/* Popular flag */
6420@media screen and (max-width:767px){
6421	.cPost.ipsComment.ipsComment_popular .ipsComment_popularFlag{
6422		top: -66px;
6423	}
6424}
6425
6426/* Share links and pinned badges */
6427.cShareLink, .ipsBadge.ipsBadge_icon, .ipsBadge.ipsBadge_icon.ipsBadge_small{ border-radius: 3px; }
6428
6429/* Pips */
6430.ipsPip{
6431	color: {theme="text_color"};
6432}
6433
6434/* Signatures */
6435div[data-role="memberSignature"] .ipsType_richText{
6436	font-size: 1.2rem;
6437	padding-bottom: 5px;
6438}
6439
6440	/* Remove signature padding if the comment controls bar exists */
6441	.focus-ccbar div[data-role="memberSignature"] .ipsType_richText,
6442	.focus-ccrow div[data-role="memberSignature"] .ipsType_richText{
6443		padding-bottom: 0;
6444	}
6445	
6446	/* Remove extra spacing if comment controls bar doesn't exist */
6447	html:not(.focus-ccbar):not(.focus-ccrow) div[data-role="memberSignature"] .ipsHr{
6448		margin-top: 0;
6449	}
6450	
6451	div[data-role="memberSignature"] a{
6452		color: inherit;
6453	}
6454
6455/* Moderated */
6456.ipsBox.ipsModerated {
6457	border-color: {theme="moderated_text"};
6458}
6459.cPost.ipsModerated .cAuthorPane,
6460.cPost.ipsModerated .ipsComment_content{
6461	background-color: transparent;
6462}
6463
6464
6465
6466/* Quote, code and embed */
6467.ipsQuote,
6468.ipsCode,
6469.ipsSpoiler, .ipsStyle_spoiler{
6470	background: {theme="area_background_light"};
6471	background-clip: padding-box !important;
6472	border-color: {hextorgb="area_background_dark" opacity="0.3"} !important;
6473	color: {theme="text_color"};
6474	border-radius: 3px;
6475}
6476/* .ipsQuote, .ipsSpoiler, .ipsStyle_spoiler{
6477	box-shadow: inset rgba(0,0,0,0.05) 0px 0px 5px;
6478}*/
6479
6480body.ipsApp .ipsQuote{
6481	border-width: 1px;
6482}
6483
6484	.ipsQuote .ipsQuote{
6485		background: none;
6486		margin-bottom: 8px;
6487	}
6488
6489{{if intval( settings.editor_paragraph_padding ) === 0}}
6490.ipsQuote{
6491	margin: 10px 0;
6492	padding-bottom: 10px;
6493}
6494.ipsQuote_closed{
6495	margin-bottom: -10px;
6496}
6497.ipsQuote_open{
6498	margin-bottom: 10px;
6499}
6500.ipsSpoiler_contents{
6501	padding: 10px 0;
6502}
6503{{endif}}
6504
6505.ipsQuote_citation,
6506.ipsSpoiler_header,
6507.ipsEmbedded_headerArea{
6508	background: {theme="area_background_dark"};
6509	color: #fff;
6510	
6511	font-size: inherit;
6512	border-radius: inherit;
6513	margin: 5px -10px;
6514}
6515
6516	.ipsSpoiler .ipsSpoiler_header a,
6517	.ipsStyle_spoiler .ipsSpoiler_header a,
6518	.ipsSpoiler_header.ipsSpoiler_open [data-action="toggleSpoiler"]::before,
6519	.ipsQuote .ipsQuote_citation a,
6520	.ipsQuote_citation.ipsQuote_open [data-action="toggleQuote"]::before{
6521		color: inherit;
6522	}
6523	
6524	.ipsSpoiler_header.ipsSpoiler_open [data-action="toggleSpoiler"]::before{
6525		opacity: 0.5;
6526	}
6527	
6528	.ipsQuote_citation a[data-action="toggleQuote"]{
6529		font-weight: normal;
6530	}
6531
6532/* Embedded content */
6533iframe[data-embedContent]{
6534	background: {hextorgb="text_color" opacity="0.1"};
6535	border-color: {hextorgb="text_color" opacity="0.3"};
6536	min-height: 0;
6537	border-radius: 3px;
6538}
6539
6540iframe.ipsEmbed_finishedLoading[data-embedContent]{
6541	background-color: {hextorgb="text_color" opacity="0.1"};
6542	border-color: {hextorgb="text_color" opacity="0.3"};
6543}
6544
6545	.ipsRichEmbed{
6546		padding: 5px;
6547	}
6548	
6549	.ipsRichEmbed_header,
6550	.ipsRichEmbed_moreInfo,
6551	.ipsApp .ipsRichEmbed_stats.ipsSpacer_top,
6552	.ipsRichEmbed_originalItem{
6553		border-color: {hextorgb="text_color" opacity="0.15"};
6554	}
6555	
6556	.ipsRichEmbed_header{
6557		background: {theme="area_background_dark"};
6558		color: #fff;
6559		border-radius: 3px;
6560		border: 0;
6561	}
6562	
6563	.ipsRichEmbed_originalItem{
6564		background-clip: padding-box;
6565	}
6566	
6567	.ipsRichEmbed_author{
6568		color: inherit;
6569		opacity: 0.6;
6570	}
6571
6572	.ipsRichEmbed_openItem{
6573		color: inherit;
6574		opacity: 0.3;
6575	}
6576
6577	.ipsEmbedded_headerArea{
6578		border: 0;
6579	}
6580
6581	.ipsLayout_noBackground .ipsEmbedded_content{
6582		background: transparent;
6583	}
6584
6585	.ipsEmbedded_stats{ border-color: {hextorgb="text_color" opacity="0.08"}; } 
6586
6587.ipsEmbedded_withImage .ipsEmbedded_image{
6588	border: 0;
6589	box-shadow: inset {hextorgb="text_color" opacity="0.3"} 0px 0px 0px 2px;
6590}
6591
6592
6593
6594body[data-role="internalEmbed"] {
6595    background: {theme="area_background_light"};
6596}
6597body.unloaded #ipsEmbedLoading {
6598    border-color: {hextorgb="text_color" opacity="0.15"};
6599    background: {theme="area_background_light"};
6600}
6601
6602@-webkit-keyframes dummy_anim {
6603    0% { background-color: {hextorgb="text_color" opacity="0.6"}; }
6604    50% { background-color: {hextorgb="text_color" opacity="0.5"}; }
6605    99% { background-color: {hextorgb="text_color" opacity="0.6"}; }
6606}
6607@-moz-keyframes dummy_anim {
6608    0% { background-color: {hextorgb="text_color" opacity="0.6"}; }
6609    50% { background-color: {hextorgb="text_color" opacity="0.5"}; }
6610    99% { background-color: {hextorgb="text_color" opacity="0.6"}; }
6611}
6612@-ms-keyframes dummy_anim {
6613    0% { background-color: {hextorgb="text_color" opacity="0.6"}; }
6614    50% { background-color: {hextorgb="text_color" opacity="0.5"}; }
6615    99% { background-color: {hextorgb="text_color" opacity="0.6"}; }
6616}
6617@-o-keyframes dummy_anim {
6618    0% { background-color: {hextorgb="text_color" opacity="0.6"}; }
6619    50% { background-color: {hextorgb="text_color" opacity="0.5"}; }
6620    99% { background-color: {hextorgb="text_color" opacity="0.6"}; }
6621}
6622@keyframes dummy_anim {
6623    0% { background-color: {hextorgb="text_color" opacity="0.6"}; }
6624    50% { background-color: {hextorgb="text_color" opacity="0.5"}; }
6625    99% { background-color: {hextorgb="text_color" opacity="0.6"}; }
6626}
6627
6628
6629
6630/* Polls */
6631.cPollVoteBar{
6632	background: {hextorgb="poll_bar" opacity="0.15"};
6633	box-shadow: inset {hextorgb="poll_bar" opacity="0.25"} 0px 0px 0px 1px;
6634}
6635
6636	/* Text on 0 percentage */
6637	.cPollVoteBar > span::after{
6638		color: {theme="poll_bar"};
6639	}
6640
6641/* Fix alignment of poll widget icon */
6642.ipsWidget[data-blockid^="app_forums_poll_"] .ipsWidget_title .ipsType_break{
6643	display: inline;
6644}
6645
6646/* Vertically align buttons in poll widget so they don't wrap poorly */
6647.ipsWidget_vertical[data-blockid^="app_forums_poll_"] .ipsToolList{
6648    display: block;
6649    float: none;
6650}
6651
6652	.ipsWidget_vertical[data-blockid^="app_forums_poll_"] .ipsToolList > li{
6653			float: none !important;
6654			margin: 0 0 5px 0 !important;
6655			text-align: center;
6656	}
6657
6658
6659/*
6660	----------------
6661	- Questions
6662	----------------
6663*/
6664
6665/* Force .ipsBox background */
6666.focus-answers > .ipsAreaBackground{
6667	background: transparent;
6668	padding: 0;
6669}
6670
6671/* Question title alignment */
6672html[dir='ltr'] .cRatingColumn_question{
6673	padding-left: 0 !important;
6674}
6675html[dir='rtl'] .cRatingColumn_question{
6676	padding-right: 0 !important;
6677}
6678.cRatingColumn_question + .ipsColumn_fluid{
6679	align-self: center;
6680}
6681
6682/* Mark as answer */
6683.cRatingColumn{
6684	color: {theme="text_color"};
6685}
6686
6687.cRatingColumn.ipsAreaBackground{
6688	background: none;
6689}
6690	
6691	.cAnswerRate:not(.ipsType_positive):not(.ipsType_negative),
6692	.cAnswerRate:hover:not(.ipsType_positive):not(.ipsType_negative),
6693	span.cAnswerRate:not(.ipsType_positive):not(.ipsType_negative),
6694	span.cAnswerRate:hover:not(.ipsType_positive):not(.ipsType_negative){
6695		color: inherit;
6696	}
6697	
6698	/* Green column */
6699	.cRatingColumn_on{
6700		background: #b2d599;
6701		color: #51873f;
6702	}
6703
6704
6705	
6706	/* Mark as best answer */
6707	.cBestAnswerIndicator {
6708		background: #51873f;
6709		border-radius: 3px;
6710		margin: 0;
6711	}
6712		.cBestAnswerIndicator .fa-check:before{
6713			content: '\f091';
6714		}
6715		.cBestAnswerIndicator_off{
6716			background: {hextorgb="text_color" opacity="0.5"};
6717		}
6718		.cBestAnswerIndicator_off:hover {
6719			background: {hextorgb="text_color" opacity="0.65"};
6720		}
6721		
6722		
6723
6724	/* Vote arrows and number */
6725	.cAnswerRate,
6726	.cAnswerRating{
6727		width: 36px;
6728		line-height: 36px;
6729		font-size: 18px;
6730	}
6731	
6732	/* Arrow size */
6733	.cAnswerRate{
6734		font-size: 30px;
6735	}
6736	
6737	
6738		/* Align icon in center */
6739		.cAnswerRate > .fa{
6740			line-height: inherit;
6741			vertical-align: top;
6742		}
6743			
6744			.cAnswerRate > .fa:before{
6745				display: block;
6746			}
6747		
6748		/* Reset defaults */
6749		html[dir="ltr"] .cAnswerRate,
6750		html[dir="rtl"] .cAnswerRate{
6751			left: 0;
6752			right: 0;
6753		}
6754
6755		.cAnswerRating,
6756		.cAnswerRate.cAnswerRate_up{
6757			margin: 0;
6758		}
6759		
6760		.cAnswerRating{
6761			position: relative;
6762		}
6763		
6764		.cAnswerRating:before,
6765		.cAnswerRate:before{
6766			content: '';
6767			position: absolute;
6768			top: 0; left: 0; right: 0; bottom: 0;
6769			border-radius: 3px;
6770			background: currentcolor;
6771			opacity: 0.15;
6772		}
6773		
6774		.cAnswerRating:before{
6775			opacity: 0.06;
6776		}
6777
6778@media screen and (min-width: 768px){
6779
6780	/* Sticky icons */
6781	.cPostRating_controls{
6782		position: -webkit-sticky;
6783		position: sticky;
6784		top: 10px;
6785		padding-bottom: 10px;
6786	}
6787	
6788	.cRatingColumn{
6789		box-sizing: content-box;
6790		width: 36px;
6791	}
6792	
6793		.cRatingColumn li:not(:last-of-type){
6794			margin-bottom: 6px;
6795		}
6796		
6797	/* Hide vote text on desktop */
6798	.cTopic .cRatingColumn > .ipsList_reset:before{
6799		display: none;
6800	}
6801	
6802}
6803
6804@media screen and (max-width: 767px){
6805	
6806	/* .ipsPageHeader rating */
6807	.cRatingColumn_question{
6808		box-sizing: content-box;
6809		width: 36px;
6810		padding: 0 !important;
6811	}
6812	
6813		.cRatingColumn_question li:not(:last-of-type){
6814			margin-bottom: 6px;
6815		}
6816	
6817	/* Place vote strip inside post */
6818	.ipsApp .focus-answers .cPostQuestion{
6819		display: flex;
6820		flex-direction: column;
6821	}
6822	
6823		.focus-answers .cPostQuestion .cRatingColumn ~ .cAuthorPane_mobile{
6824			order: -2;
6825		}
6826		
6827		.focus-answers .cPostQuestion .cRatingColumn{
6828			order: -1;
6829			border-bottom: 1px dashed {hextorgb="text_color" opacity="0.3"};
6830		}
6831		
6832		.focus-answers .cPostQuestion .cRatingColumn ~ .ipsColumn .ipsComment_meta{
6833			margin-top: -41px;
6834		}
6835	
6836	/* Vote as answer */
6837	.cPost .cRatingColumn{
6838		padding: 5px !important;
6839		margin-bottom: 0 !important;
6840	}
6841	
6842	/* Icon alignment */
6843	.cTopic .cRatingColumn > .ipsList_reset{
6844		display: flex;
6845		align-items: center;
6846	}
6847	
6848		/* Vote pseudo text */
6849		.cTopic .cRatingColumn > .ipsList_reset:before{
6850			font-weight: bold;
6851			text-transform: uppercase;
6852			font-size: 1rem;
6853		}
6854		
6855		/* Mobile icon size: important is required to overwrite :hover on the trophy icon */
6856		.cPost .cRatingColumn .cAnswerRate,
6857		.cPost .cRatingColumn .cAnswerRating,
6858		.cPost .cRatingColumn .cBestAnswerIndicator{
6859			width: 30px;
6860			line-height: 30px !important;
6861			height: auto;
6862		}
6863		
6864		/* Arrow size */
6865		.cPost .cRatingColumn .cAnswerRate{
6866			font-size: 30px;
6867		}
6868		
6869		/* Count size */
6870		.cPost .cRatingColumn .cAnswerRating{
6871			font-size: 14px;
6872
6873			margin: 0;
6874			width: auto;
6875			padding: 0 10px;
6876		}
6877		
6878		/* Bug fix */
6879		.cPost .cRatingColumn .cAnswerRate.cAnswerRate_up{
6880			top: auto;
6881		}
6882	
6883		html[dir='ltr'] .cTopic .cRatingColumn > .ipsList_reset li:not(:nth-last-of-type(4)){
6884			padding-left: 5px;
6885		}
6886		
6887		html[dir='rtl'] .cTopic .cRatingColumn > .ipsList_reset li:not(:nth-last-of-type(4)){
6888			padding-right: 5px;
6889		}
6890		
6891		html[dir='ltr'] .cTopic .cRatingColumn > .ipsList_reset li:nth-last-of-type(4){
6892			margin-left: auto;
6893			order: 1;
6894		}
6895		
6896		html[dir='rtl'] .cTopic .cRatingColumn > .ipsList_reset li:nth-last-of-type(4){
6897			margin-right: auto;
6898		}
6899	
6900}
6901
6902
6903/*
6904	----------------
6905	- Comments: comments.css
6906	- Comments should have no border, box-shadow or background (unless moderated or selected)
6907	----------------
6908*/
6909
6910
6911/* This wraps comments and adds the .ipsBox styling */
6912#comments{
6913	padding: 15px;
6914}
6915
6916	#comments > .ipsPad:not(.ipsBox),
6917	#comments > .ipsPad:not(.ipsAreaBackground){
6918		padding: 0;
6919	}
6920
6921	/* Correctly align multi-mod without floats */
6922	#comments > .ipsButtonRow{
6923		display: flex;
6924		justify-content: flex-end;
6925		float: none;
6926	}
6927
6928	/* Remove .ipsBox styles from #comments if they're already wrapped in tabs */
6929	.ipsTabs_panels #comments.ipsBox{
6930		border-width: 0;
6931		box-shadow: none;
6932		background: none;
6933	}
6934
6935.ipsComment{
6936	background-color: {theme="area_background_reset"};
6937}
6938
6939	/* Remove background from comments if they're wrapped in a box already */
6940	.ipsBox .ipsComment{
6941		background-color: transparent;
6942	}
6943
6944/* Selected */
6945.ipsComment:not(.cPost).ipsComment_selected{
6946	box-shadow: none;
6947	background: {theme="selected"} !important;
6948	border: 0;
6949}
6950
6951.ipsComment.ipsComment_ignored{
6952	color: {hextorgb="text_color" opacity="0.4"};
6953}
6954
6955
6956	/* Reduce space between comments */
6957	.ipsComment:not(.cPost){
6958		margin: 0;
6959	}
6960	
6961	.ipsComment:not(.cPost) .ipsComment_header + .ipsPad{
6962		padding-bottom: 0;
6963	}
6964
6965
6966/* Comment headers */
6967.ipsApp .ipsComment .ipsComment_header{
6968	background: {theme="secondary_title"};
6969	color: {theme="secondary_title_font"};
6970	border: 0;
6971	box-shadow: inset {hextorgb="text_color" opacity="0.1"} 0px 0px 0px 1px, rgba(0,0,0,0.1) 0px 1px 4px;
6972	border-radius: 3px;
6973	/* Clear floated avatar */
6974	overflow: hidden;
6975}
6976	
6977	/* Make selected comment headers use normal text colour */
6978	.ipsApp .ipsComment.ipsComment_selected .ipsComment_header{
6979		background-color: {theme="selected"} !important;
6980		color: {theme="text_dark"};
6981	}
6982	
6983	.ipsComment_header a{
6984		color: inherit;
6985	}
6986
6987	.ipsComment_header .ipsComment_author{
6988		margin: 0;
6989	}
6990		
6991	.ipsComment_header .ipsType_light{
6992		color: inherit;
6993		opacity: 0.7;
6994	}
6995
6996/* Highlighted comments: Remove background and shadow since the header is styled */
6997.ipsComment_highlighted:not(.ipsBox_transparent):not(.ipsModerated):not(.ipsComment_selected):not(.ipsComment_popular):not(.cPost),
6998.ipsComment_highlighted.ipsBox:not(.ipsBox_transparent):not(.ipsModerated):not(.ipsComment_selected):not(.ipsComment_popular):not(.cPost),
6999.ipsComment_highlighted:not(.ipsBox_transparent):not(.ipsModerated):not(.ipsComment_selected):not(.ipsComment_popular):not(.cPost) .ipsAreaBackground_reset{
7000	background-color: transparent;
7001	border: 0;
7002	box-shadow: none;
7003}
7004
7005/* Moderated comments */
7006.ipsComment.ipsModerated:not(.cPost){
7007	background: transparent;
7008}
7009
7010	.ipsApp .ipsComment.ipsModerated .ipsComment_header{
7011		background-color: {theme="moderated_text"};
7012		color: {theme="moderated"};
7013	}
7014
7015		.ipsModerated .ipsComment_header * {
7016		    color: {theme="moderated"};
7017		}
7018
7019
7020/* Popular post ribbon */
7021.ipsComment.ipsComment_popular .ipsComment_popularFlag{
7022	color: {theme="featured"};
7023	background: currentColor;
7024}
7025
7026	.ipsComment.ipsComment_popular .ipsComment_popularFlag:after{
7027		border-top-color: currentColor;
7028	}
7029
7030	.ipsComment.ipsComment_popular .ipsComment_popularFlag .fa{
7031		color: #fff;
7032	}
7033
7034
7035/* New posts bar */
7036.ipsCommentUnreadSeperator{
7037	color: {theme="normal_button_font"};
7038	background: {theme="normal_button"};
7039	
7040	height: 0.6em;
7041	margin: 1.4em 0;
7042	border: 0;
7043	border-radius: 2px;
7044	text-align: center;
7045	font-weight: bold;
7046	font-size: 10px;
7047	position: relative;
7048}
7049
7050	.ipsCommentUnreadSeperator:before{
7051		padding: 0 1.6em;
7052		line-height: 2.4em;
7053		border-radius: inherit;
7054		background: inherit;
7055		white-space: nowrap;
7056		position: absolute;
7057		left: 50%;
7058		top: 50%;
7059		{prefix="transform" value="translate(-50%,-50%)"}
7060	}
7061
7062
7063/* Popular comment headers */
7064.ipsComment:not( .ipsModerated ):not( .ipsComment_selected ).ipsComment_popular .ipsComment_header {
7065	border: 0;
7066}
7067
7068.ipsModerated .ipsAreaBackground_light,
7069.ipsModerated .ipsAreaBackground_reset{
7070	background: transparent;
7071}
7072
7073
7074/* Highlighted content */
7075#ipsfocus .cPost.ipsComment_highlighted:not(.ipsComment_selected):not(.ipsModerated):before,
7076#ipsfocus .cPost.ipsComment_highlighted.ipsComment:not(.ipsComment_selected):not(.ipsModerated) .cAuthorPane_mobile,
7077#ipsfocus .ipsComment_highlighted.ipsComment:not(.ipsComment_selected):not(.ipsModerated) .ipsComment_header{
7078	background-color: {theme="post_highlight_border"};
7079}
7080
7081	#ipsfocus .cPost.ipsComment_highlighted:not(.ipsComment_selected):not(.ipsModerated) .cAuthorPane .cAuthorPane_author,
7082	#ipsfocus .cPost.ipsComment_highlighted:not(.ipsComment_selected):not(.ipsModerated) .ipsComment_meta,
7083	#ipsfocus .cPost.ipsComment_highlighted:not(.ipsComment_selected):not(.ipsModerated) .cAuthorPane_mobile,
7084	#ipsfocus .ipsComment_highlighted.ipsComment:not(.ipsComment_selected):not(.ipsModerated) .ipsComment_header{
7085		color: {theme="post_highlight"};
7086	}
7087
7088
7089/* Post controls */
7090.ipsComment:not(.cPost) .ipsItemControls {
7091	padding: 10px 0;
7092}
7093
7094@media screen and (min-width:768px){
7095
7096	.ipsComment:not(.cPost) .ipsItemControls {
7097		margin-left: -15px;
7098		margin-right: -15px;
7099		width: auto;
7100	}
7101
7102}	
7103
7104/*
7105	----------------
7106	- Editor
7107	----------------
7108*/
7109
7110.ipsApp textarea.cke_source,
7111html .cke_wysiwyg_frame, html .cke_wysiwyg_div{
7112	background-color: {theme="area_background_reset"};
7113}
7114
7115/* Bar background */
7116.cke .cke_top,
7117.ipsComposeArea div[data-ipseditor-toollist] .ipsAreaBackground_light{
7118	background: rgba(255,255,255,0.4);
7119}
7120
7121.cke .cke_top{
7122	border-bottom: 1px solid {hextorgb="focus_editor_color" opacity="0.25"};
7123}
7124
7125div[data-ipseditor]{
7126	border: 1px solid {hextorgb="focus_editor_color" opacity="0.25"};
7127}
7128
7129
7130
7131/* Editor border color. Border is required for inherited arrow */
7132.ipsComposeArea_editor,
7133.ipsComposeArea_unavailable .ipsComposeArea_editor{
7134	background: {theme="focus_editor"};
7135	border-color: {theme="focus_editor"};
7136	color: {theme="focus_editor_color"};
7137}
7138.ipsComposeArea_withPhoto .ipsComposeArea_editor:before{ border-width: 12px; top: 18px; }
7139html[dir="ltr"] .ipsComposeArea_withPhoto .ipsComposeArea_editor:before,
7140html[dir="ltr"] .ipsComposeArea_unavailable.ipsComposeArea_withPhoto .ipsComposeArea_editor:before{ border-right-color: inherit; }
7141html[dir="rtl"] .ipsComposeArea_withPhoto .ipsComposeArea_editor:before,
7142html[dir="rtl"] .ipsComposeArea_unavailable.ipsComposeArea_withPhoto .ipsComposeArea_editor:before{ border-left-color: inherit; }
7143
7144
7145
7146/* Minor fixes */
7147.ipsApp .ipsComposeArea_editor{
7148	padding: 0;
7149}
7150
7151.ipsApp .ipsComposeArea_withPhoto .ipsComposeArea_editor{
7152	padding: 4px;
7153}
7154
7155.ipsApp .ipsComposeArea_formControl label:not(.ipsField_unlimited){
7156	font-size: 1.3rem;
7157}
7158
7159.ipsComposeArea_editor label[for="check_auto_follow_toggle"]{
7160	line-height: 22px;
7161	display: inline-block;
7162}
7163
7164/* Remove defaults */
7165.ipsApp .cke_inner{
7166	background: transparent;
7167}
7168.ipsApp .cke_chrome{
7169	box-shadow: none;
7170}
7171
7172
7173
7174/* Editor text color */
7175.ipsApp .cke_contents,
7176.ipsComposeArea_dummy{
7177	color: {theme="text_color"};
7178}
7179
7180.ipsComposeArea_dummy{
7181	background-color: {theme="area_background_reset"};
7182}
7183
7184
7185
7186.ipsApp .cke_reset_all, .ipsApp .cke_reset_all *, .ipsApp .cke_reset_all a, .ipsApp .cke_reset_all textarea, .ipsComposeArea_attachments a{
7187	color: inherit;
7188}
7189
7190.ipsApp a.cke_button_off:hover,
7191.ipsApp a.cke_button_off:focus,
7192.ipsApp a.cke_button_off:active,
7193.ipsApp a.cke_button_disabled:hover,
7194.ipsApp a.cke_button_disabled:focus,
7195.ipsApp a.cke_button_disabled:active{
7196	background: {hextorgb="focus_editor_color" opacity="0.1"};
7197}
7198
7199.ipsApp .cke_toolbar_separator,
7200.ipsApp a.cke_button_on{
7201	background: {hextorgb="focus_editor_color" opacity="0.18"};
7202}
7203
7204.ipsApp a.cke_combo_button{
7205	border-color: {hextorgb="focus_editor_color" opacity="0.25"};
7206	background: {hextorgb="focus_editor_color" opacity="0.08"};
7207	box-shadow: none;
7208}
7209
7210	.ipsApp .cke_combo_off a.cke_combo_button:hover,
7211	.ipsApp .cke_combo_off a.cke_combo_button:focus{
7212		background: {hextorgb="focus_editor_color" opacity="0.1"};
7213	}
7214	
7215	.ipsApp .cke_combo_off a.cke_combo_button:active,
7216	.ipsApp .cke_combo_on a.cke_combo_button {
7217	    border-color: {hextorgb="focus_editor_color" opacity="0.4"};
7218	    box-shadow: 0 1px 5px rgba(0,0,0,0.1) inset;
7219	    background: {hextorgb="focus_editor_color" opacity="0.1"};
7220	}
7221	
7222	.ipsApp .cke_combo_on a.cke_combo_button:hover,
7223	.ipsApp .cke_combo_on a.cke_combo_button:focus,
7224	.ipsApp .cke_combo_on a.cke_combo_button:active{
7225		box-shadow: 0 1px 5px rgba(0,0,0,0.1) inset;
7226	}
7227
7228.ipsApp .cke_button_arrow{ margin-top: 18px; }
7229
7230.ipsApp .cke_button_label,
7231.ipsApp .cke_combo_text{
7232	text-shadow: none;
7233}
7234
7235/* Dropdown arrow */
7236.ipsApp .cke_combo_arrow,
7237.ipsApp .cke_button_arrow{
7238	border-top-color: currentColor;
7239}
7240
7241
7242
7243/* Editor icons */
7244.cke_button_icon:before{
7245	width: 16px; height: 16px; line-height: 16px;
7246	font-size: 14px;
7247	text-align: center;
7248	display: inline-block;
7249	font-family: 'FontAwesome';
7250	font-style: normal;
7251	font-weight: normal;
7252	vertical-align: top;
7253	-webkit-font-smoothing: antialiased;
7254	-moz-osx-font-smoothing: grayscale;
7255	transform: translate(0,0);
7256}
7257
7258.ipsApp .cke_toolbox .cke_toolbar .cke_button__bgcolor_icon,
7259.ipsApp .cke_toolbox .cke_toolbar .cke_button__bold_icon,
7260.ipsApp .cke_toolbox .cke_toolbar .cke_button__bulletedlist_icon,
7261.ipsApp .cke_toolbox .cke_toolbar .cke_button__copy_icon,
7262.ipsApp .cke_toolbox .cke_toolbar .cke_button__cut_icon,
7263.ipsApp .cke_toolbox .cke_toolbar .cke_button__indent_icon,
7264.ipsApp .cke_toolbox .cke_toolbar .cke_button__ipscode_icon,
7265.ipsApp .cke_toolbox .cke_toolbar .cke_button__ipsemoticon_icon,
7266.ipsApp .cke_toolbox .cke_toolbar .cke_button__ipslink_icon,
7267.ipsApp .cke_toolbox .cke_toolbar .cke_button__ipspage_icon,
7268.ipsApp .cke_toolbox .cke_toolbar .cke_button__ipspreview_icon,
7269.ipsApp .cke_toolbox .cke_toolbar .cke_button__ipsquote_icon,
7270.ipsApp .cke_toolbox .cke_toolbar .cke_button__ipsspoiler_icon,
7271.ipsApp .cke_toolbox .cke_toolbar .cke_button__italic_icon,
7272.ipsApp .cke_toolbox .cke_toolbar .cke_button__justifyblock_icon,
7273.ipsApp .cke_toolbox .cke_toolbar .cke_button__justifycenter_icon,
7274.ipsApp .cke_toolbox .cke_toolbar .cke_button__justifyleft_icon,
7275.ipsApp .cke_toolbox .cke_toolbar .cke_button__justifyright_icon,
7276.ipsApp .cke_toolbox .cke_toolbar .cke_button__numberedlist_icon,
7277.ipsApp .cke_toolbox .cke_toolbar .cke_button__outdent_icon,
7278.ipsApp .cke_toolbox .cke_toolbar .cke_button__paste_icon,
7279.ipsApp .cke_toolbox .cke_toolbar .cke_button__redo_icon,
7280.ipsApp .cke_toolbox .cke_toolbar .cke_button__removeformat_icon,
7281.ipsApp .cke_toolbox .cke_toolbar .cke_button__source_icon,
7282.ipsApp .cke_toolbox .cke_toolbar .cke_button__strike_icon,
7283.ipsApp .cke_toolbox .cke_toolbar .cke_button__subscript_icon,
7284.ipsApp .cke_toolbox .cke_toolbar .cke_button__superscript_icon,
7285.ipsApp .cke_toolbox .cke_toolbar .cke_button__textcolor_icon,
7286.ipsApp .cke_toolbox .cke_toolbar .cke_button__underline_icon,
7287.ipsApp .cke_toolbox .cke_toolbar .cke_button__undo_icon{
7288	background: none !important;
7289}
7290
7291.ipsApp .cke_toolbox .cke_toolbar .cke_button__bgcolor_icon:before{ content: '\f15c'; }
7292.ipsApp .cke_toolbox .cke_toolbar .cke_button__bold_icon:before{ content: '\f032'; }
7293.ipsApp .cke_toolbox .cke_toolbar .cke_button__bulletedlist_icon:before{ content: '\f0ca'; }
7294.ipsApp .cke_toolbox .cke_toolbar .cke_button__copy_icon:before{ content: '\f0c5'; }
7295.ipsApp .cke_toolbox .cke_toolbar .cke_button__cut_icon:before{ content: '\f0c4'; }
7296.ipsApp .cke_toolbox .cke_toolbar .cke_button__indent_icon:before{ content: '\f03c'; }
7297.ipsApp .cke_toolbox .cke_toolbar .cke_button__ipscode_icon:before{ content: '\f121'; }
7298.ipsApp .cke_toolbox .cke_toolbar .cke_button__ipsemoticon_icon:before{ content: '\f118'; }
7299.ipsApp .cke_toolbox .cke_toolbar .cke_button__ipslink_icon:before{ content: '\f0c1'; }
7300.ipsApp .cke_toolbox .cke_toolbar .cke_button__ipspage_icon:before{ content: '\f0f6'; }
7301.ipsApp .cke_toolbox .cke_toolbar .cke_button__ipspreview_icon:before{ content: '\f0f6'; }
7302.ipsApp .cke_toolbox .cke_toolbar .cke_button__ipsquote_icon:before{ content: '\f10e'; }
7303.ipsApp .cke_toolbox .cke_toolbar .cke_button__ipsspoiler_icon:before{ content: '\f06e'; }
7304.ipsApp .cke_toolbox .cke_toolbar .cke_button__italic_icon:before{ content: '\f033'; }
7305.ipsApp .cke_toolbox .cke_toolbar .cke_button__justifyblock_icon:before{ content: '\f039'; }
7306.ipsApp .cke_toolbox .cke_toolbar .cke_button__justifycenter_icon:before{ content: '\f037'; }
7307.ipsApp .cke_toolbox .cke_toolbar .cke_button__justifyleft_icon:before{ content: '\f036'; }
7308.ipsApp .cke_toolbox .cke_toolbar .cke_button__justifyright_icon:before{ content: '\f038'; }
7309.ipsApp .cke_toolbox .cke_toolbar .cke_button__numberedlist_icon:before{ content: '\f0cb'; }
7310.ipsApp .cke_toolbox .cke_toolbar .cke_button__outdent_icon:before{ content: '\f03b'; }
7311.ipsApp .cke_toolbox .cke_toolbar .cke_button__paste_icon:before{ content: '\f0ea'; }
7312.ipsApp .cke_toolbox .cke_toolbar .cke_button__redo_icon:before{ content: '\f01e'; }
7313.ipsApp .cke_toolbox .cke_toolbar .cke_button__removeformat_icon:before{ content: '\f12d'; }
7314.ipsApp .cke_toolbox .cke_toolbar .cke_button__source_icon:before{ content: '\f1c9'; }
7315.ipsApp .cke_toolbox .cke_toolbar .cke_button__strike_icon:before{ content: '\f0cc'; }
7316.ipsApp .cke_toolbox .cke_toolbar .cke_button__subscript_icon:before{ content: '\f12c'; }
7317.ipsApp .cke_toolbox .cke_toolbar .cke_button__superscript_icon:before{ content: '\f12b'; }
7318.ipsApp .cke_toolbox .cke_toolbar .cke_button__textcolor_icon:before{ content: '\f1fc'; }
7319.ipsApp .cke_toolbox .cke_toolbar .cke_button__underline_icon:before{ content: '\f0cd'; }
7320.ipsApp .cke_toolbox .cke_toolbar .cke_button__undo_icon:before{ content: '\f0e2'; }
7321
7322
7323/* Insert other media button */
7324.ipsApp .ipsComposeArea_dropZone .ipsButton_light{
7325	background: #000;
7326	color: #fff;
7327	opacity: 0.6;
7328}
7329
7330.ipsApp .ipsComposeArea_dropZone .ipsButton_light:hover,
7331.ipsAttach_selection:hover{ opacity: 1; }
7332
7333	.ipsApp .ipsComposeArea_dropZone .ipsButton_light:after{
7334		display: none;
7335	}
7336
7337
7338
7339/* Drag drop attachments */
7340.ipsAttachment_dropZone.ipsDragging{
7341	background: transparent;
7342	border-color: {theme="text_color"};
7343}
7344
7345.ipsComposeArea_dropZone.ipsDragging{
7346	background: transparent;
7347	border-color: {theme="focus_editor_color"};
7348}
7349
7350/* Inset into post */
7351.ipsAttach_selection{
7352	color: #fff !important;
7353}
7354
7355
7356
7357/* Submit row */
7358.ipsComposeArea [data-ipsEditor] + [data-ipsEditor-toolList]{
7359	padding-bottom: 7px;
7360}
7361
7362/* Pasted content link */
7363.ipsComposeArea_editorPaste a{
7364	color: inherit;
7365}
7366
7367	
7368/*
7369	----------------
7370	- Inputs
7371	----------------
7372*/
7373
7374/* Bug fix: Force colour instead of browser default */
7375input,
7376textarea{
7377	color: {theme="text_color"};
7378}
7379
7380.ipsApp .ipsField_autocomplete, .ipsApp textarea, .ipsApp input[type="text"], .ipsApp input[type="password"],
7381.ipsApp input[type="datetime"], .ipsApp input[type="datetime-local"], .ipsApp input[type="date"],
7382.ipsApp input[type="month"], .ipsApp input[type="time"], .ipsApp input[type="week"], 
7383.ipsApp input[type="number"], .ipsApp input[type="email"], .ipsApp input[type="url"],
7384.ipsApp input[type="search"], .ipsApp input[type="tel"],
7385.ipsApp .ipsToolbox input, .ipsApp .ipsToolbox select, .ipsApp .ipsToolbox textarea {
7386	background-color: {theme="area_background_reset"};
7387	background-image: linear-gradient(to bottom, {hextorgb="text_color" opacity="0.05"} 0%, {hextorgb="text_color" opacity="0.05"} 100%);
7388	border-color: {hextorgb="text_color" opacity="0.35"};
7389	box-shadow: inset {hextorgb="text_color" opacity="0.12"} 0px 1px 3px;
7390}
7391.CodeMirror,
7392html[dir="rtl"] .ipsApp .ipsField_autocomplete,
7393html[dir="rtl"] .ipsApp textarea,
7394html[dir="rtl"] .ipsApp input[type="text"],
7395html[dir="rtl"] .ipsApp input[type="password"],
7396html[dir="rtl"] .ipsApp input[type="datetime"],
7397html[dir="rtl"] .ipsApp input[type="datetime-local"],
7398html[dir="rtl"] .ipsApp input[type="date"],
7399html[dir="rtl"] .ipsApp input[type="month"],
7400html[dir="rtl"] .ipsApp input[type="time"],
7401html[dir="rtl"] .ipsApp input[type="week"], 
7402html[dir="rtl"] .ipsApp input[type="number"],
7403html[dir="rtl"] .ipsApp input[type="email"],
7404html[dir="rtl"] .ipsApp input[type="url"],
7405html[dir="rtl"] .ipsApp input[type="search"],
7406html[dir="rtl"] .ipsApp input[type="tel"] {
7407	border-color: {hextorgb="text_color" opacity="0.35"};
7408}
7409
7410.ipsApp textarea:focus, .ipsApp input[type="text"]:focus, .ipsApp input[type="password"]:focus,
7411.ipsApp input[type="datetime"]:focus, .ipsApp input[type="datetime-local"]:focus,
7412.ipsApp input[type="date"]:focus, .ipsApp input[type="month"]:focus, .ipsApp input[type="time"]:focus,
7413.ipsApp input[type="week"]:focus, .ipsApp input[type="number"]:focus, .ipsApp input[type="email"]:focus,
7414.ipsApp input[type="url"]:focus, .ipsApp input[type="search"]:focus, .ipsApp input[type="tel"]:focus,
7415.ipsApp input[type="color"]:focus {
7416	border-color: {hextorgb="text_color" opacity="0.45"};
7417	box-shadow: inset {hextorgb="text_color" opacity="0.12"} 0px 1px 3px;
7418}
7419
7420.ipsApp textarea[disabled], .ipsApp input[type="text"][disabled], .ipsApp input[type="password"][disabled],
7421.ipsApp input[type="datetime"][disabled], .ipsApp input[type="datetime-local"][disabled],
7422.ipsApp input[type="date"][disabled], .ipsApp input[type="month"][disabled], .ipsApp input[type="time"][disabled],
7423.ipsApp input[type="week"][disabled], .ipsApp input[type="number"][disabled], .ipsApp input[type="email"][disabled],
7424.ipsApp input[type="url"][disabled], .ipsApp input[type="search"][disabled], .ipsApp input[type="tel"][disabled],
7425.ipsApp input[type="color"][disabled] {
7426	background-color: {theme="area_background_reset"};
7427}
7428
7429
7430
7431/*
7432	----------------
7433	- Select menus
7434	----------------
7435*/
7436
7437.ipsSelectTree{
7438	background-color: {theme="area_background_reset"};
7439	background-image: linear-gradient(to bottom, {hextorgb="text_color" opacity="0.05"} 0%, {hextorgb="text_color" opacity="0.05"} 100%);
7440	border-color: {hextorgb="text_color" opacity="0.35"};
7441	box-shadow: inset {hextorgb="text_color" opacity="0.12"} 0px 1px 3px;
7442	color: {theme="text_color"};
7443}
7444
7445	.ipsSelectTree_placeholder{
7446		color: {hextorgb="text_color" opacity="0.5"};
7447	}
7448	
7449	.ipsSelectTree_expand{
7450		color: inherit;
7451	}
7452	
7453	.ipsSelectTree_active,
7454	.ipsSelectTree_nodes{
7455		border-color: {hextorgb="text_color" opacity="0.4"};
7456	}
7457	
7458	.ipsSelectTree_nodes{
7459		background-color: {theme="area_background_reset"};
7460		background-image: linear-gradient(to bottom, {hextorgb="text_color" opacity="0.05"} 0%, {hextorgb="text_color" opacity="0.1"} 100%);
7461	}
7462	
7463	.ipsSelectTree_nodes [data-role="nodeList"]{
7464		background: {theme="area_background_reset"};
7465		border-color: {hextorgb="text_color" opacity="0.2"};
7466	}
7467	
7468		.ipsSelectTree_nodes [data-role="nodeList"] li,
7469		html[dir="ltr"] .ipsSelectTree_nodes [data-role="nodeList"] li [data-role="childWrapper"],
7470		html[dir="rtl"] .ipsSelectTree_nodes [data-role="nodeList"] li [data-role="childWrapper"],
7471		.ipsSelectTree_nodes [data-role="nodeList"] li [data-role="childWrapper"]{
7472			border-color: {hextorgb="text_color" opacity="0.1"};
7473		}
7474			
7475			/* Hover */
7476			.ipsSelectTree_nodes [data-role="nodeList"] li .ipsSelectTree_item:hover:not(.ipsSelectTree_itemDisabled):not(.ipsSelectTree_selected){
7477				background: {theme="area_background_reset"};
7478				background-image: linear-gradient(to bottom, {hextorgb="text_color" opacity="0.08"} 0%, {hextorgb="text_color" opacity="0.08"} 100%);
7479			}
7480			
7481			/* Active */
7482			.ipsSelectTree_selected{
7483				background: {theme="area_background_dark"};
7484				color: #fff;
7485			}
7486				/* Active tick */
7487				.ipsSelectTree_selected::after {
7488					color: inherit;
7489				}
7490
7491.ipsApp select{
7492	background-color: {theme="area_background_reset"};
7493	border-color: {hextorgb="text_color" opacity="0.35"};
7494	color: {theme="text_color"};
7495}
7496			
7497	.ipsApp select:not([multiple]){
7498		background-image: url( "{resource="select_dropdown.png" app="core" location="global"}" ), linear-gradient(to bottom, {hextorgb="text_color" opacity="0.05"} 0%, {hextorgb="text_color" opacity="0.1"} 100%);
7499	}
7500	
7501	html[dir="rtl"] .ipsApp select:not( [multiple] ) {
7502		background-image: url( "{resource="select_dropdown_rtl.png" app="core" location="global"}" ), linear-gradient(to bottom, {hextorgb="text_color" opacity="0.05"} 0%, {hextorgb="text_color" opacity="0.1"} 100%);
7503	}
7504
7505	.ui-datepicker-title select, .ui-datepicker-title option{
7506		color: {theme="text_color"};
7507	}
7508
7509
7510
7511/*
7512	----------------
7513	- Checkboxes
7514	----------------
7515*/
7516
7517	.ipsCustomInput > span {
7518		border-color: {theme="text_color"};
7519		background: {theme="area_background_reset"};
7520	}
7521
7522	/* Hover */
7523	.ipsCustomInput input:hover:not( :disabled ) + span {
7524		border-color: {theme="link"};
7525	}
7526
7527		.ipsCustomInput input:not( :checked ):disabled + span {
7528			background: {theme="area_background_reset"};
7529		}
7530
7531		.ipsCustomInput input:checked:disabled + span {
7532			background: {theme="area_background_reset"};
7533			border-color: {theme="text_color"};
7534		}
7535
7536			.ipsCustomInput input[type="checkbox"]:checked:disabled + span:after {
7537				color: {theme="text_color"};
7538			}
7539
7540			.ipsCustomInput input[type="radio"]:checked:disabled + span:after {
7541				background-color: {theme="text_color"};
7542			}
7543
7544	/* Active styles */
7545	.ipsCustomInput input:active:not( :checked ):not( :disabled ) + span,
7546	.ipsCustomInput input:active:checked:not( :disabled ) + span {
7547		background: {theme="area_background_reset"};
7548		background-image: linear-gradient(to bottom, {hextorgb="link" opacity="0.2"} 0%, {hextorgb="link" opacity="0.2"} 100%);
7549	}
7550
7551	/* Checked styles */
7552	.ipsCustomInput input:checked + span {
7553		border-color: {theme="link"};
7554	}
7555
7556	.ipsCustomInput input[type="checkbox"]:checked + span:after {
7557		color: {theme="link"};
7558	}
7559
7560	.ipsCustomInput input[type="radio"]:checked + span:after {
7561		background: {theme="link"};
7562	}
7563	
7564	.ipsApp .ipsToggle:focus,
7565	.ipsApp .ipsCustomInput input:focus + span {
7566		border-color: {theme="link"};
7567		box-shadow: 0px 1px 5px rgba(0,0,0,0.3);
7568	}
7569	
7570	.ipsToggle,
7571	.ipsApp .ipsToggle:focus{
7572		border-color: {hextorgb="text_color" opacity="0.25"};
7573	}
7574
7575
7576
7577/*
7578	----------------
7579	- Wizard
7580	----------------
7581*/
7582
7583.ipsWizard:before{
7584	content: '';
7585	display: table;
7586}
7587
7588	.ipsWizard .ipsStepBar{
7589		margin: 10px 10px 0 10px;
7590	}
7591	
7592	.ipsWizard .ipsAreaBackground{
7593		background: {theme="area_background_light"};
7594	}
7595	
7596	.ipsWizard .ipsAreaBackground:not(.ipsToolList){
7597		background: transparent;
7598	}
7599
7600.ipsStepBar{
7601	background: {theme="area_background"};
7602	border-radius: 3px;
7603	position: relative;
7604	width: auto;
7605	display: block;
7606}
7607
7608	.ipsStepBar:before{
7609		content: '';
7610		position: absolute;
7611		top: 0; left: 0; right: 0; bottom: 0;
7612		border: 1px solid {hextorgb="text_color" opacity="0.2"};
7613		border-radius: inherit;
7614		pointer-events: none;
7615		z-index: 2;
7616	}
7617
7618/* Remove wizard image */
7619.ipsStepBar > .ipsStep > a,
7620.ipsStepBar > .ipsStep > span,
7621.ipsStepBar > .ipsStep + .ipsStep.ipsStep_active:after {
7622	background-image: none !important;
7623}
7624
7625/* css Steps */
7626.ipsStepBar > .ipsStep:before,
7627.ipsStepBar > .ipsStep:after,
7628.ipsStepBar > .ipsStep + .ipsStep.ipsStep_active::after{
7629	content: '';
7630	display: block;
7631	height: 28px;
7632	width: auto;
7633	position: absolute;
7634	top: 0;
7635	left: 0 !important;
7636	right: 0 !important;
7637	border: 1px solid {hextorgb="text_color" opacity="0.4"};
7638	border-width: 0 1px 0 0;
7639	transform-origin: 0% 50%;
7640	transform: skewX(30deg);
7641	pointer-events: none;
7642}
7643	
7644	/* Bottom half */
7645	.ipsStepBar > .ipsStep:after,
7646	.ipsStepBar > .ipsStep + .ipsStep.ipsStep_active::after{
7647		transform: skewX(-30deg);
7648		top: auto;
7649		bottom: 0;
7650	}
7651	
7652	/* If first item is active, extend its width */
7653	.ipsStepBar > .ipsStep:first-child:before,
7654	.ipsStepBar > .ipsStep:first-child:after{
7655		width: calc(100% + 40px);
7656	}
7657	
7658		html[dir='ltr'] .ipsStepBar > .ipsStep:first-child:before,
7659		html[dir='ltr'] .ipsStepBar > .ipsStep:first-child:after{
7660			left: auto !important;
7661		}
7662		
7663		html[dir='rtl'] .ipsStepBar > .ipsStep:first-child:before,
7664		html[dir='rtl'] .ipsStepBar > .ipsStep:first-child:after{
7665			right: auto !important;
7666		}
7667
7668	/* RTL */
7669	html[dir='rtl'] .ipsStepBar > .ipsStep:before,
7670	html[dir='rtl'] .ipsStepBar > .ipsStep:after,
7671	html[dir='rtl'] .ipsStepBar > .ipsStep + .ipsStep.ipsStep_active::after{
7672		border-width: 0 0 0 1px;
7673		transform: skewX(-30deg);
7674	}
7675	
7676		html[dir='rtl'] .ipsStepBar > .ipsStep:after,
7677		html[dir='rtl'] .ipsStepBar > .ipsStep + .ipsStep.ipsStep_active::after{
7678			transform: skewX(30deg);
7679		}
7680	
7681	/* Active step */
7682	html[dir='ltr'] .ipsStepBar > .ipsStep.ipsStep_active{
7683		margin-left: -1px;
7684	}
7685	html[dir='rtl'] .ipsStepBar > .ipsStep.ipsStep_active{
7686		margin-right: -1px;
7687	}
7688	
7689	.ipsStepBar > .ipsStep.ipsStep_active::before,
7690	.ipsStepBar > .ipsStep.ipsStep_active::after,
7691	.ipsStepBar > .ipsStep + .ipsStep.ipsStep_active::after{
7692		background: {theme="area_background_dark"};
7693		border-width: 0 1px;
7694	}
7695
7696
7697
7698.ipsStepBar > .ipsStep > a,
7699.ipsStepBar > .ipsStep > span{
7700	background-color: transparent;
7701	height: 56px;
7702	min-width: 0;
7703	padding: 11px 24px !important;
7704	z-index: 1;
7705}
7706
7707.ipsStepBar > .ipsStep.ipsStep_active > a,
7708.ipsStepBar > .ipsStep.ipsStep_active > span {
7709	color: #fff;
7710}
7711
7712
7713
7714/*
7715	----------------
7716	- Minor Elements
7717	----------------
7718*/
7719
7720/* Social sign-in buttons */
7721.ipsSocial{
7722	padding: 0 !important;
7723}
7724
7725/* Add blur behind modals */
7726.ipsModal{
7727	-webkit-backdrop-filter: blur(8px);
7728	backdrop-filter: blur(8px);
7729}
7730
7731/* Guest block at the bottom of topics */
7732.cGuestTeaser{ padding-left: 0; padding-right: 0; }
7733
7734@media screen and (max-width: 979px) {
7735	.cGuestTeaser .ipsGrid_span6{
7736		align-items: center;
7737	}
7738}
7739
7740/* Member cards: Viewing members of a club */
7741.ipsMemberCard {
7742	background: {theme="area_background_light"};
7743	border-color: {hextorgb="text_color" opacity="0.3"};
7744}
7745
7746/* Avatars */
7747.ipsUserPhoto {
7748	background-color: transparent;
7749	{{if !theme.rounded_photos}}
7750	border-radius: 0;
7751	{{endif}}
7752}
7753
7754a.ipsUserPhoto{
7755	color: inherit;
7756}
7757
7758	.ipsUserPhoto img{
7759		border-radius: inherit;
7760	}
7761
7762	.ipsUserPhoto:before,
7763	.ipsUserPhoto:after {
7764		content: "";
7765	    display: block;
7766	    box-sizing: border-box;
7767	    pointer-events: none;
7768	    position: absolute;
7769		left: 0px;
7770		top: 0px;
7771		right: 0px;
7772		bottom: 0px;
7773		width: auto; height: auto;
7774		border-radius: inherit;
7775	}
7776	
7777	.ipsUserPhoto:before{
7778		box-shadow: rgba(0,0,0,0.1) 0px 3px 8px;
7779	}
7780	
7781	.ipsUserPhoto:after{
7782		border: 1px solid currentColor;
7783		opacity: 0.3;
7784	}
7785
7786img[src*="default_photo"]{
7787	background: {theme="button_bar"};
7788	background-image: linear-gradient(to bottom, {hextorgb="pagination_active" opacity="0.12"} 0%, {hextorgb="pagination_active" opacity="0.12"} 100%);
7789}
7790
7791/* Thumbnail background */
7792.ipsNoThumb,
7793.ipsImageAttach_thumb{
7794	background-color: {theme="area_background_dark"};
7795}
7796
7797.ipsImageAttach_thumb{
7798	border-color: {hextorgb="text_color" opacity="0.12"};
7799}
7800
7801/* Photo thumbs */
7802.ipsThumb{
7803	border: 0;
7804	box-shadow: inset {hextorgb="text_color" opacity="0.25"} 0px 0px 0px 1px;
7805}
7806
7807/* Attached images in posts */
7808.ipsImage_thumbnailed{
7809	border-color: {hextorgb="text_color" opacity="0.3"};
7810}
7811
7812	/* Default bug fix: Prevent large images on mobiles from creating horizontal scrollbar on mobiles */
7813	.cPost div[data-role="commentContent"] img.ipsImage_thumbnailed{
7814		max-width: 100%;
7815	}
7816
7817
7818
7819/* Sticky */
7820.ipsSticky{
7821	background: {theme="area_background_light"};
7822}
7823
7824	.ipsSticky.ipsSticky_top,
7825	.ipsSticky.ipsSticky_bottom{
7826		border-color: {hextorgb="text_color" opacity="0.1"};
7827	}
7828
7829
7830
7831hr.ipsHr{
7832	border-color: {hextorgb="text_color" opacity="0.08"};
7833}
7834
7835
7836
7837
7838/* Scrollbars */
7839.ipsScrollbar::-webkit-scrollbar-thumb { 
7840	background-color: {hextorgb="text_color" opacity="0.4"};
7841}
7842	.ipsScrollbar.ipsScrollbar_light::-webkit-scrollbar-thumb { 
7843		background-color: {hextorgb="area_background_reset" opacity="0.4"};
7844	}
7845
7846.ipsScrollbar::-webkit-scrollbar-track-piece { 
7847	background-color: {hextorgb="text_color" opacity="0.08"};
7848}
7849
7850	.ipsScrollbar.ipsScrollbar_light::-webkit-scrollbar-track-piece { 
7851		background-color: {hextorgb="area_background_reset" opacity="0.08"};
7852	}
7853
7854
7855/* Tooltips */
7856.ipsTooltip {
7857	background: rgba(10,10,10,0.8);
7858	border-color: rgba(10,10,10,0.8);
7859}
7860	.ipsTooltip.ipsTooltip_top:after { border-top-color: inherit; }
7861	.ipsTooltip.ipsTooltip_bottom:after { border-bottom-color: inherit; }
7862
7863
7864
7865/* Create new topic lock time */
7866.cCreateTopic_date i{
7867	top: 7px;
7868}
7869
7870/* "Cancel" text on new topic page */
7871.ipsTabs_content_form + .ipsAreaBackground{ color: {theme="primary_button"}; }
7872
7873
7874
7875
7876/* Tags */
7877.cToken,
7878.cToken.cToken_selected,
7879.ipsTags .ipsTag,
7880.ipsTags .ipsTag:hover {
7881	background: {theme="tag"};
7882	border-color: {theme="tag"};
7883}
7884
7885.ipsTags .ipsTag:hover{
7886	opacity: 0.8;
7887}
7888
7889	html[dir="ltr"] .ipsTags .ipsTag::before,
7890	html[dir="ltr"] .ipsTags .ipsTag:hover::before {
7891		border-bottom-color: inherit;
7892		border-left-color: inherit;
7893	}
7894	
7895	html[dir="rtl"] .ipsTags .ipsTag::before,
7896	html[dir="rtl"] .ipsTags .ipsTag:hover::before {
7897		border-top-color: inherit;
7898		border-right-color: inherit;
7899	}
7900	
7901	.ipsTags .ipsTag:after, .ipsTag_prefix:after{ background: {theme="area_background_reset"}; }
7902	
7903	/* Remove tag */
7904	html[dir="ltr"] .ipsTag_remove{ right: 3px; }
7905	html[dir="rtl"] .ipsTag_remove{ left: 3px; }
7906	.ipsTag_remove{ background: rgba(0,0,0,0.1); }
7907	.ipsTag_remove:hover{ background: rgba(0,0,0,0.2); }
7908
7909/* Autocomplete tokens */
7910.cToken.cToken_selected{
7911	box-shadow: inset rgba(0,0,0,0.3) 0px 100px 0px;
7912}
7913
7914
7915
7916/*
7917	----------------
7918	- Tabs
7919	----------------
7920*/
7921
7922/* Large tabs */
7923.ipsTabs{
7924	color: #fff;
7925}
7926
7927	/* Tab colours */
7928	.ipsTabs_item,
7929	.ipsTabs_item .ipsType_light,
7930	.ipsTabs_item.ipsTabs_itemDisabled,
7931	.ipsTabs_item:hover:not(.ipsTabs_activeItem){
7932		color: inherit;
7933	}
7934	
7935		.ipsTabs_item .ipsType_light{
7936			opacity: 0.6;
7937		}
7938
7939	
7940	.ipsTabs_item{
7941		border-radius: 2px 2px 0 0;
7942		font-weight: bold;
7943		/* background: rgba(255,255,255,0.1); */
7944	}
7945	
7946	.ipsTabs_item:hover:not(.ipsTabs_activeItem){
7947		/* background: rgba(255,255,255,0.2); */
7948	}
7949	
7950	
7951	/* Active */
7952	.ipsTabs_activeItem{
7953		background-color: {theme="area_background_reset"};
7954	}
7955	
7956		.ipsTabs_activeItem,
7957		.ipsTabs_activeItem:hover{
7958			color: {theme="text_color"};
7959		}
7960	
7961	
7962	.ipsTabs.ipsTabs_contained{
7963		border-color: {hextorgb="text_color" opacity="0.2"};
7964		padding: 3px;
7965		padding-bottom: 0;
7966	}
7967
7968	.ipsTabs_panels.ipsTabs_contained {
7969		border-color: {hextorgb="text_color" opacity="0.2"};
7970	}
7971	
7972	.ipsTabs_panels{
7973		background-color: {theme="area_background_reset"};
7974	}
7975	
7976		/* Make background transparent since there's already one on .ipsTabs_panels */
7977		.ipsTabs_panel{
7978			background-color: transparent;
7979		}	
7980	
7981
7982
7983/* Mini tabs */
7984.ipsWidget .ipsTabs_small{
7985	color: {hextorgb="text_color" opacity="0.7"};
7986}
7987
7988.ipsWidget .ipsTabs_small .ipsTabs_item:not( .ipsTabs_activeItem ) {
7989	color: inherit;
7990	border-bottom: 2px solid {hextorgb="text_color" opacity="0.1"};
7991	background: none;
7992}
7993
7994	/* Hover */
7995	.ipsWidget .ipsTabs_small .ipsTabs_item:not( .ipsTabs_activeItem ):hover{
7996		color: {theme="text_color"};
7997		border-color: {hextorgb="text_color" opacity="0.2"};
7998	}
7999
8000	/* Active */
8001	.ipsWidget .ipsTabs_small .ipsTabs_activeItem{
8002		color: {theme="link"};
8003		border-bottom: 2px solid {theme="link"};
8004		background: none;
8005	}
8006
8007
8008
8009@media screen and (max-width:767px){
8010
8011	.ipsTabs{
8012		color: {theme="text_color"};
8013	}
8014
8015	a.ipsTabs_activeItem{
8016		font-size: 1.3rem;
8017		text-decoration: underline;
8018	}
8019	.ipsTabs_item:not(.ipsTabs_activeItem){
8020		color: inherit !important;
8021	}
8022	
8023	.ipsTabs {
8024		border-top: 0;
8025	}
8026	
8027	.ipsTabs [data-action="expandTabs"],
8028	.ipsTabs.ipsTabs_small [data-action="expandTabs"] {
8029		color: inherit;
8030		/* Place arrow beneath mobile nav menu */
8031		z-index: 1;
8032		/* Fix alignment */
8033		margin: 0;
8034		top: 0;
8035		line-height: 38px;
8036		padding-top: 10px;
8037	}
8038	
8039	.ipsTabs.ipsTabs_small [data-action="expandTabs"]{
8040		padding-top: 0;
8041		line-height: 32px;
8042	}
8043	
8044		.ipsTabs.ipsTabs_small [data-action="expandTabs"] .fa{
8045			line-height: inherit;
8046			vertical-align: top;
8047		}
8048	
8049	.ipsTabs:target,
8050	.ipsTabs.ipsTabs_showMenu{
8051		height: 48px;
8052		/* Other elements with a z-index of 1000 were showing on top */
8053		z-index: 1010;
8054	}
8055	
8056	.ipsTabs.ipsTabs_small:target,
8057	.ipsTabs.ipsTabs_small.ipsTabs_showMenu{
8058		height: 32px;
8059	}
8060	
8061		.ipsTabs:target [role="tablist"],
8062		.ipsTabs.ipsTabs_showMenu [role="tablist"] {
8063			background: {theme="area_background_reset"};
8064			
8065			/* Fix alignment */
8066			left: 10px;
8067			right: 10px;
8068			top: 10px;
8069		}
8070
8071}
8072
8073
8074
8075/*
8076	----------------
8077	- Popup Menus
8078	----------------
8079*/
8080
8081.ipsAlert{
8082	background: {theme="area_background_reset"};
8083}
8084
8085.ipsMenu,
8086.ipsHovercard,
8087.ipsHovercard_loading {
8088	background: {theme="area_background_reset"};
8089	border-color: {theme="area_background_reset"};
8090	border-width: 0;
8091}
8092
8093.ipsMenu,
8094.ipsHovercard{
8095	box-shadow: {hextorgb="text_color" opacity="0.25"} 0px 0px 0px 1px, 0px 7px 10px rgba(0,0,0,0.1), 0px 5px 20px rgba(0,0,0,0.1);
8096}
8097
8098	.ipsMenu,
8099	.ipsSideMenu_title,
8100	.ipsMenu_title,
8101	.ipsMenu_item > a,
8102	.ipsMenu_item > span,
8103	.ipsMenu_item > a:not(.ipsMenu_itemInline), .ipsMenu_item > span:not(.ipsMenu_itemInline){
8104		color: {theme="text_color"};
8105	}
8106	.ipsMenu_itemDisabled > a,
8107	.ipsMenu_itemDisabled > span{
8108		color: {hextorgb="text_color" opacity="0.6"};
8109	}
8110	.ipsMenu_title{
8111		background: {hextorgb="text_color" opacity="0.08"};
8112		font-weight: bold;
8113	}
8114	/* Hover */
8115	ul:not(.ipsMenu_keyNav) .ipsMenu_item:not(.ipsMenu_itemClicked):not(.ipsMenu_itemDisabled) a:not(.ipsMenu_itemInline):hover, .ipsMenu_item[data-selected] a, .ipsMenu_item[data-selected] span, .ipsMenu_item.ipsMenu_hover{
8116		background-color: {hextorgb="text_color" opacity="0.05"};
8117	}
8118	
8119	.ipsMenu_sep{
8120		border-color: {hextorgb="text_color" opacity="0.1"};
8121	}
8122	
8123	.ipsMenu.ipsMenu_topLeft:before,
8124	.ipsMenu.ipsMenu_topRight:before,
8125	.ipsMenu.ipsMenu_topCenter:before,
8126	.ipsHovercard_stemTop .ipsHovercard_stem:before,
8127	.ipsHovercard_loading:after{
8128		border-top-color: {hextorgb="text_color" opacity="0.25"};
8129	}
8130	.ipsMenu.ipsMenu_bottomRight:before,
8131	.ipsMenu.ipsMenu_bottomLeft:before,
8132	.ipsMenu.ipsMenu_bottomCenter:before,
8133	.ipsHovercard_stemBottom .ipsHovercard_stem:before{
8134		border-bottom-color: {hextorgb="text_color" opacity="0.25"};
8135	}
8136	
8137	/* Register password hint */
8138	.ipsHovercard[data-role="advicePopup"].cStem_ltr .ipsHovercard_stem {
8139		border-right-color: inherit;
8140	}
8141		.ipsHovercard[data-role="advicePopup"].cStem_ltr .ipsHovercard_stem:before {
8142			border-right-color: {hextorgb="text_color" opacity="0.25"};
8143		}
8144		
8145	.ipsHovercard[data-role="advicePopup"].cStem_rtl .ipsHovercard_stem {
8146		border-left-color: inherit;
8147	}
8148		.ipsHovercard[data-role="advicePopup"].cStem_rtl .ipsHovercard_stem:before {
8149			border-left-color: {hextorgb="text_color" opacity="0.25"};
8150		}
8151		
8152	.ipsHovercard[data-role="advicePopup"].cStem_above .ipsHovercard_stem {
8153		border-top-color: inherit;
8154	}
8155		.ipsHovercard[data-role="advicePopup"].cStem_above .ipsHovercard_stem:before {
8156			border-top-color: {hextorgb="text_color" opacity="0.25"};
8157		}
8158	
8159	.ipsMenu.ipsMenu_topLeft:after,
8160	.ipsMenu.ipsMenu_topRight:after,
8161	.ipsMenu.ipsMenu_topCenter:after,
8162	.ipsHovercard_stemTop .ipsHovercard_stem { border-top-color: inherit; }
8163	.ipsMenu.ipsMenu_bottomRight:after,
8164	.ipsMenu.ipsMenu_bottomLeft:after,
8165	.ipsMenu.ipsMenu_bottomCenter:after,
8166	.ipsHovercard_stemBottom .ipsHovercard_stem { border-bottom-color: inherit; }
8167	
8168	.ipsMenu:not( .ipsMenu_noStem ):after { 	border-width: 9px; }
8169	.ipsMenu:not( .ipsMenu_noStem ):before { 	border-width: 10px; }
8170	.ipsMenu.ipsMenu_topCenter:after { 			margin-left: -9px; }
8171	.ipsMenu.ipsMenu_topCenter:before { 		margin-left: -10px; }
8172	.ipsMenu.ipsMenu_bottomCenter:after { 		margin-left: -9px; }
8173	.ipsMenu.ipsMenu_bottomCenter:before { 		margin-left: -10px; }
8174	
8175	.ipsMenu_headerBar, .ipsMenu_footerBar {
8176		background: linear-gradient(to bottom, {theme="area_background_reset"} 0%, {theme="area_background_light"} 100%);
8177	}
8178	
8179	.ipsMenu_headerBar,
8180	.ipsMenu_footerBar {
8181		border-color: {hextorgb="text_color" opacity="0.15"};
8182	}
8183	
8184	.ipsMenu_itemCount, .ipsSideMenu_itemCount {
8185		background: {theme="area_background_light"};
8186		color: {theme="text_color"};
8187	}
8188		
8189		.ipsMenu_item:not( .ipsMenu_itemClicked ) a:hover .ipsMenu_itemCount,
8190		.ipsMenu_item:not( .ipsMenu_itemClicked ) button:hover .ipsMenu_itemCount {
8191			background: {theme="area_background_light"};
8192		}
8193	
8194		.ipsSideMenu_itemActive .ipsSideMenu_itemCount {
8195			background: {hextorgb="text_color" opacity="0.2"};
8196			color: {theme="text_color"};
8197		}
8198	
8199	.ipsMenu_selectable .ipsMenu_item:not( .ipsMenu_itemNonSelect ) a:before,
8200	.ipsMenu_selectable .ipsMenu_item:not( .ipsMenu_itemNonSelect ) > span:before,
8201	.ipsMenu_selectable .ipsMenu_item:not( .ipsMenu_itemNonSelect ) button:before {
8202		color: {hextorgb="text_color" opacity="0.1"};
8203	}
8204	
8205.ipsAutocompleteMenu {
8206	background: {theme="area_background_reset"};
8207}
8208
8209	.ipsAutocompleteMenu_item[data-selected] {
8210		background: {theme="selected"};
8211	}
8212
8213	.ipsSideMenu_item{
8214		border-radius: 3px;
8215	}
8216
8217	.ipsSideMenu_item:not(.ipsSideMenu_itemActive) a:hover, a.ipsSideMenu_item:not(.ipsSideMenu_itemActive):hover, span.ipsSideMenu_item:not(.ipsSideMenu_itemActive):hover {
8218		background: {theme="area_background_light"};
8219	}
8220	
8221	.ipsSideMenu_withChecks .ipsSideMenu_item a:after,
8222	.ipsSideMenu_withChecks a.ipsSideMenu_item:after,
8223	.ipsSideMenu_withChecks span.ipsSideMenu_item:after,
8224	.ipsSideMenu_withRadios .ipsSideMenu_item a:after,
8225	.ipsSideMenu_withRadios a.ipsSideMenu_item:after,
8226	.ipsSideMenu_withRadios span.ipsSideMenu_item:after{
8227		color: {hextorgb="text_color" opacity="0.2"};
8228		line-height: 20px;
8229	}
8230	
8231.ipsSideMenu_itemActive a, a.ipsSideMenu_itemActive,
8232.ipsSideMenu_withChecks .ipsSideMenu_item > input[type="checkbox"]:checked ~ a,
8233.ipsSideMenu_withRadios .ipsSideMenu_item > input[type="radio"]:checked ~ a {
8234	background: {theme="area_background_dark"};
8235	/* color: #fff; */
8236}
8237
8238	.ipsSideMenu_withChecks .ipsSideMenu_itemActive a:after,
8239	.ipsSideMenu_withChecks a.ipsSideMenu_itemActive:after,
8240	.ipsSideMenu_withChecks span.ipsSideMenu_itemActive:after,
8241	.ipsSideMenu_withRadios .ipsSideMenu_itemActive a:after,
8242	.ipsSideMenu_withRadios a.ipsSideMenu_itemActive:after,
8243	.ipsSideMenu_withRadios span.ipsSideMenu_itemActive:after,
8244	.ipsSideMenu_withChecks .ipsSideMenu_item > input[type="checkbox"]:checked ~ a:after,
8245	.ipsSideMenu_withChecks .ipsSideMenu_item > input[type="checkbox"]:checked ~ span:not(.ipsSideMenu_noCheck):after,
8246	.ipsSideMenu_withRadios .ipsSideMenu_item > input[type="radio"]:checked ~ a:after,
8247	.ipsSideMenu_withRadios .ipsSideMenu_item > input[type="radio"]:checked ~ span:not(.ipsSideMenu_noCheck):after {
8248		color: inherit;
8249	}
8250
8251.ipsSideMenu_itemDisabled a, a.ipsSideMenu_itemDisabled {
8252	color: {hextorgb="text_color" opacity="0.6"};
8253}
8254
8255html[dir="ltr"] .ipsSideMenu_item + .ipsSideMenu_list,
8256html[dir="rtl"] .ipsSideMenu_item + .ipsSideMenu_list {
8257	border-color: {hextorgb="text_color" opacity="0.3"};
8258}
8259
8260.ipsSideMenu_subTitle{
8261	background: {hextorgb="text_color" opacity="0.08"};
8262	border-radius: 3px;
8263}
8264
8265/* Side menus such as Settings */
8266.ipsSideMenu_item a, a.ipsSideMenu_item{
8267	border-radius: 3px;
8268}
8269
8270	/* Fix blurry icons */
8271	.ipsSideMenu_item .fa:first-child {
8272		font-size: 14px;
8273		width: 20px;
8274		text-align: inherit;
8275		transform: translate(0,0);
8276	}
8277
8278
8279/* responsive - menus.css */
8280@media screen and (max-width: 767px) {
8281	
8282	.ipsSideMenu {
8283		border-color: {hextorgb="text_color" opacity="0.1"};
8284	}
8285
8286	.ipsSideMenu .ipsSideMenu_mainTitle a {
8287		color: {theme="text_color"};
8288	}
8289	
8290	.ipsSideMenu.ipsSideMenu_open .ipsSideMenu_mainTitle a,
8291	.ipsSideMenu:target .ipsSideMenu_mainTitle a {
8292		background: {theme="area_background_dark"};
8293	}
8294
8295	.ipsSideMenu.ipsSideMenu_open,
8296	.ipsSideMenu:target {
8297		background: {theme="area_background_reset"};
8298	}
8299
8300	.ipsSideMenu.ipsSideMenu_open .ipsSideMenu_title,
8301	.ipsSideMenu:target .ipsSideMenu_title {
8302		background: {theme="area_background_light"};
8303	}
8304	
8305}
8306
8307
8308
8309/* Popup boxes (submit content) */
8310.ipsDialog > div{
8311	background: {theme="area_background_reset"};
8312}
8313
8314	.ipsDialog_title,
8315	a.ipsDialog_close{
8316		color: {theme="text_color"};
8317	}
8318	
8319	.ipsDialog .ipsDialog_loading{
8320		background-color: {theme="area_background_reset"};
8321		color: {theme="text_color"};
8322	}
8323	
8324		.ipsLoading::before{
8325			color: inherit;
8326		}
8327
8328
8329
8330/* Date picker */
8331.ui-datepicker{
8332	background: {theme="area_background_reset"};
8333}
8334
8335	.ui-datepicker-header{
8336		background: {theme="area_background_dark"};
8337		border-bottom-color: {theme="area_background_dark"};
8338	}
8339	
8340	.ui-datepicker th{
8341		background: {hextorgb="text_color" opacity="0.15"};
8342	}
8343	
8344	.ui-datepicker-today{
8345		background: {hextorgb="text_color" opacity="0.15"};
8346	}
8347	
8348	.ui-datepicker td a:hover,
8349	.ui-datepicker-current-day{
8350		background: {hextorgb="text_color" opacity="0.1"};
8351	}
8352
8353
8354
8355/*
8356	----------------
8357	- Advanced Search
8358	----------------
8359*/
8360
8361#elSearchFilters{
8362	background: none;
8363	padding: 0;
8364}
8365
8366.cSearchMainBar{
8367	padding: 25px;
8368	background: {theme="area_background_dark"};
8369	color: rgba(255,255,255,0.5);
8370	border-radius: 3px;
8371	position: relative;
8372}
8373
8374	.cSearchMainBar a{
8375		color: #fff;
8376	}
8377
8378	.cSearchPretendButton{
8379		position: absolute;
8380		top: 50%;
8381		transform: translateY(-50%);
8382	}
8383
8384		.cSearchMainBar .ipsType_huge.fa{
8385			color: rgba(255,255,255,0.8);
8386			margin: 0;
8387		}
8388	
8389	#elMainSearchInput{
8390		border: 0;
8391		box-shadow: none;
8392	}
8393	
8394	@media screen and (min-width: 768px){
8395		#elMainSearchInput{
8396			padding: 18px !important;
8397		}
8398	}
8399	
8400	.cSearchMainBar hr.ipsHr{
8401		display: none;
8402	}
8403	
8404	#elSearchSubmit{
8405		margin-top: -44px;
8406	}
8407
8408/*
8409	----------------
8410	- Profiles
8411	----------------
8412*/
8413
8414header[data-role="profileHeader"]{
8415	position: relative;
8416}
8417
8418header[data-role="profileHeader"],
8419#elProfileHeader,
8420#elProfileHeader .ipsCoverPhoto_container{
8421	border-top-left-radius: inherit;
8422	border-top-right-radius: inherit;
8423}
8424
8425@media screen and (max-width:979px){
8426
8427	/* Cover Photos */
8428    .ipsCoverPhoto_photo {
8429        object-fit: cover;
8430        height: 100%;
8431        top: 0 !important;
8432    }
8433
8434    /* Fix header alignment with rtl */
8435    html[dir='rtl'] .cProfileHeader_name{
8436		float: none;
8437	}
8438
8439}
8440
8441
8442/* Cover photo: Follow and message buttons */
8443#elProfileHeader .ipsButton_primary{
8444	background: rgba(255,255,255,0.8);
8445	color: #222;
8446	box-shadow: rgba(0,0,0,0.3) 0px 0px 0px 1px;
8447}
8448
8449
8450/* Profile stats */
8451#elProfileStats{
8452	background: #111;
8453	font-size: 1.5rem;
8454	/* Stops main content from squashing up if these links overflow */
8455	overflow: hidden;
8456}
8457
8458	body.ipsApp #elProfileStats > ul:last-child > li{
8459		border-color: rgba(255,255,255,0.2);
8460	}
8461	
8462	#elProfileStats .ipsType_minorHeading{
8463		color: inherit;
8464		opacity: 0.6;
8465	}
8466	
8467	/* Unblur icon */
8468	#elProfileStats .ipsButton .fa{
8469		font-size: 14px;
8470	}
8471	
8472	
8473	
8474/* Profile Columns */
8475#elProfileInfoColumn{
8476	background: {theme="area_background_light"};
8477	border-right: 1px solid {hextorgb="text_color" opacity="0.15"};
8478}
8479
8480	html[dir="rtl"] #elProfileInfoColumn{
8481		border-left: 1px solid {hextorgb="text_color" opacity="0.15"};
8482		border-right: 0;
8483	}
8484	
8485	/* Make elProfileInfoColumn handle background colour */
8486	#elProfileInfoColumn > .ipsAreaBackground_light{
8487		background: transparent;
8488	}
8489
8490
8491@media screen and (max-width:979px){
8492	
8493	#elProfileInfoColumn{
8494		margin: 0;
8495		border: 0;
8496	}
8497	
8498	#elProfileInfoColumn + .ipsColumn{
8499		margin: 0;
8500	}
8501	
8502}
8503
8504
8505@media screen and (min-width:768px){
8506
8507/* Profile name and group */	
8508#elProfileHeader {
8509    text-shadow: none;
8510    font-size: 14px;
8511}
8512
8513	.cProfileHeader_name{
8514		padding-top: 0;
8515		padding-bottom: 0;
8516	}
8517
8518}
8519
8520@media screen and (max-width:767px){
8521	
8522	/* Profile Columns - remove margin on tablets */
8523	html[dir="ltr"] .cProfileHeader_name,
8524	html[dir="rtl"] .cProfileHeader_name{
8525		margin: 0;
8526	}
8527	
8528	/* Realign profile stats */
8529	#elProfileStats{
8530		text-align: center;
8531		padding: 0 !important;
8532	}
8533	
8534	#elProfileStats ul {
8535		text-align: center;
8536		float: none;
8537		display: flex;
8538		align-items: center;
8539		flex-wrap: wrap;
8540	}
8541	
8542		#elProfileStats > ul > li {
8543			padding: 12px 0 !important;
8544			margin: 0 !important;
8545			width: 50%;
8546			
8547			flex: 1 1 auto;
8548		}
8549
8550		html[dir="ltr"] #elProfileStats > ul:last-child > li:last-child,
8551		html[dir="ltr"] #elProfileStats > ul:last-child > li:last-child,
8552		html[dir="ltr"] #elProfileStats > ul:last-child > li:nth-of-type(even),
8553		html[dir="rtl"] #elProfileStats > ul:last-child > li:nth-of-type(even){
8554			border-right: 0;
8555			border-left: 0;
8556		}
8557		
8558		#elProfileStats > ul:last-child > li:not(:nth-child(1)):not(:nth-child(2)){
8559			border-top-width: 1px;
8560			border-top-style: solid;
8561		}
8562
8563}
8564
8565/* Make sure username stays white on-hover on popup cards */
8566.cUserHovercard .ipsPageHead_special a{
8567	color: inherit !important;
8568}
8569
8570/* Form row section (Edit profile) */
8571.ipsFieldRow_section {
8572	background: {theme="area_background_light"};
8573	color: {theme="text_color"};
8574}
8575
8576/* Neater reputation */
8577.cProfileSidebarBlock .cProfileRepScore{
8578	margin: -1px;
8579	border: 1px solid {hextorgb="text_color" opacity="0.3"};
8580}
8581
8582.cProfileRepScore .ipsType_minorHeading{
8583  color: inherit;
8584}
8585
8586/* Complete profile */
8587.ipsBox[data-controller="core.front.core.profileCompletion"]{
8588	margin-bottom: 15px;
8589}
8590
8591/* Remove background from Activity area */
8592#elUserContent .ipsBox .ipsAreaBackground_reset:not(.ipsModerated){
8593	background-color: transparent;
8594}
8595
8596
8597/*
8598	----------------
8599	- Settings and ModCP Tables
8600	----------------
8601*/
8602
8603.ipsTable th {
8604	background: {theme="area_background_dark"};
8605	color: #fff;
8606}
8607
8608.ipsTable td {
8609	border-color: {hextorgb="text_color" opacity="0.03"};
8610}
8611
8612.ipsTable_zebra tbody tr:nth-child( even ):not(.ipsTable_highlight),
8613.ipsTable_zebra tbody tr:nth-child(2n):not(.ipsTable_highlight):not(.ipsModerated){
8614	background: {theme="area_background_light"};
8615}
8616
8617	.ipsTable_zebra tbody tr:nth-child( even ):not(.ipsTable_highlight) td {
8618		border-color: {hextorgb="text_color" opacity="0.03"};
8619	}
8620	
8621.ipsTable tr[data-tableClickTarget]:hover {
8622	background: {theme="area_background"} !important;
8623}
8624
8625.ipsTable_highlight {
8626	background: {theme="selected"};
8627}
8628
8629	.ipsTable_highlight .ipsCommentCount {
8630		background-color: {theme="area_background_dark"};
8631		color: #fff;
8632	}
8633
8634	html[dir="ltr"] .ipsTable_highlight .ipsCommentCount:after {
8635		border-color: transparent {theme="area_background_dark"} transparent transparent;
8636	}
8637	html[dir="rtl"] .ipsTable_highlight .ipsCommentCount:after {
8638		border-color: transparent transparent transparent {theme="area_background_dark"};
8639	}
8640
8641.ipsTable_sortable:hover {
8642	background: rgba(0,0,0,0.06);
8643}
8644
8645.ipsTable_sortable .ipsTable_sortIcon:after {
8646	color: inherit;
8647}
8648
8649.ipsTable_sortable.ipsTable_sortableActive {
8650	background: {theme="area_background_dark"};
8651	background-image: linear-gradient(to bottom, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.2) 100%);
8652}
8653
8654	.ipsTable_sortable.ipsTable_sortableActive .ipsTable_sortIcon:after {
8655		color: inherit;
8656	}
8657	
8658.ipsTable.ipsMatrix thead th {
8659	background: {theme="area_background_dark"};
8660}
8661
8662.ipsTable.ipsMatrix .ipsMatrix_subHeader {
8663	background: {theme="area_background_light"};
8664	color: {theme="text_color"};
8665}
8666
8667.ipsTable.ipsMatrix .ipsMatrix_error {
8668	background: {theme="moderated"};
8669}
8670
8671.ipsTable.ipsMatrix .ipsMatrix_highlighted {
8672	background: {theme="selected"};
8673}
8674
8675
8676/*
8677	----------------
8678	- Blogs
8679	----------------
8680*/
8681
8682/* Fix columns on tablets */
8683@media (max-width: 979px){
8684	.cBlog_grid .cBlog_grid_item{
8685		flex: 1 0 100%;
8686	}
8687}
8688
8689/* Index page summary */
8690.cBlog_grid .cBlog_grid_item__snippet{
8691	font-family: inherit;
8692}
8693
8694@media (min-width: 980px){
8695	.cBlog_grid .cBlog_grid_row--primary .cBlog_grid_item__title{
8696		font-size: 26px;
8697	}
8698}
8699
8700/* Force ipsBox background */
8701.cBlogList{
8702	background: none;
8703}
8704
8705	.cBlogList .ipsDataItem{
8706		margin: 0;
8707	}
8708	
8709	html[dir="ltr"] .cBlogInfo,
8710	html[dir="rtl"] .cBlogInfo{
8711		border-color: {hextorgb="text_color" opacity="0.1"};
8712	}
8713
8714@media screen and (min-width:768px){
8715	.cBlogInfo_content{
8716		min-height: 80px;
8717	}
8718}
8719
8720/* More gradient */
8721.cBlogInfo_content::after{
8722	pointer-events: none;
8723	background-image: linear-gradient(to bottom, {hextorgb="area_background_reset" opacity="0"} 0%, {hextorgb="area_background_reset" opacity="1"} 100%);
8724}
8725
8726.cBlogView_entry{
8727	border-bottom-color: {hextorgb="text_color" opacity="0.25"};
8728}
8729
8730/* Remove the maintitle from the Blog index page on the Wrapped framework since it's not possible to add the box variables */
8731[data-pageapp="blog"][data-pagecontroller="browse"] .ipsHeaderButtons ~ .ipsBox .ipsType_sectionTitle{
8732	display: none;
8733}
8734
8735
8736
8737/*
8738	----------------
8739	- Leaderboard
8740	----------------
8741*/
8742
8743.cPastLeaders_cell:after{
8744	color: inherit;
8745	opacity: 0.2;
8746}
8747
8748.cPopularItem_stats{
8749	color: {theme="text_light"};
8750}
8751
8752	.cPopularItem_stats a{
8753		color: inherit;
8754	}
8755	
8756html[dir="ltr"] .cPopularItem > div:first-child,
8757html[dir="rtl"] .cPopularItem > div:first-child,
8758html[dir="ltr"] .cPopularItem > div:last-child,
8759html[dir="rtl"] .cPopularItem > div:last-child,
8760.cPastLeaders_title::before {
8761	border-color: {hextorgb="text_color" opacity="0.1"};
8762}
8763
8764
8765.cPastLeaders_title span{
8766	background: {theme="area_background_reset"};
8767}
8768
8769/* Revert flex layout */
8770.cTopMembers_member .ipsStreamItem_title{
8771	display: block !important;
8772}
8773
8774/* Add margin below Top Members title */
8775#ipsTabs_elTabBar_elTabmembers_panel .ipsType_sectionHead{
8776	margin-bottom: 1em;
8777}
8778
8779
8780
8781/*
8782	----------------
8783	- Gallery
8784	----------------
8785*/
8786
8787/* Upload images: Choose album */
8788.cGalleryChooseAlbum_listItem {
8789	background: {theme="area_background"};
8790	border-color: {hextorgb="text_color" opacity="0.15"};
8791}
8792
8793	a.cGalleryChooseAlbum_listItem{
8794		color: inherit;
8795	}
8796
8797	.cGalleryChooseAlbum_listItem:not([data-disabled]):after {
8798		color: inherit;
8799	}
8800
8801	.cGalleryChooseAlbum_listItem:not([data-disabled]):hover {
8802		border-color: {hextorgb="text_color" opacity="0.3"};
8803	}
8804
8805/* Slideshow wrap */
8806#elGalleryHeader{
8807	margin: 0 0 15px 0;
8808}
8809
8810.cGalleryCats .cGalleryTrimmedImage{
8811	background-color: {theme="area_background_dark"};
8812}
8813
8814
8815/* Redesigned album thumbnails */
8816
8817	/* Remove default */
8818	.cGalleryCats > .ipsGrid{
8819		margin: 0;
8820	}
8821
8822.cGalleryCats .cGalleryTrimmedImage{
8823	box-shadow: inset {hextorgb="text_color" opacity="0.15"} 0px 0px 0px 1px, rgba(0,0,0,0.15) 0px 3px 8px;
8824	min-height: 220px;
8825	border-radius: 3px;
8826	text-align: center;
8827}
8828
8829	.cGalleryCat > a::before{
8830		background: linear-gradient(to top,
8831			rgba(0,0,0,1) 0%,
8832			rgba(0,0,0,0.738) 19%,
8833			rgba(0,0,0,0.541) 34%,
8834			rgba(0,0,0,0.382) 47%,
8835			rgba(0,0,0,0.278) 56.5%,
8836			rgba(0,0,0,0.194) 65%,
8837			rgba(0,0,0,0.126) 73%,
8838			rgba(0,0,0,0.075) 80.2%,
8839			rgba(0,0,0,0.042) 86.1%,
8840			rgba(0,0,0,0.021) 91%,
8841			rgba(0,0,0,0.008) 95.2%,
8842			rgba(0,0,0,0.002) 98.2%,
8843			rgba(0,0,0,0) 100%);
8844		height: 140px;
8845		opacity: 0.75;
8846		
8847	}
8848	
8849	.cGalleryCat .ipsType_sectionHead,
8850	.cGalleryCat .cGalleryCat_info{
8851		text-shadow: 0px 1px 2px rgba(0,0,0,0.4);
8852	}
8853	
8854	.cGalleryCat .ipsType_sectionHead{
8855		width: calc(100% - 14px);
8856		bottom: 30px;
8857	}
8858	
8859	.cGalleryCat .cGalleryCat_info{
8860		display: flex;
8861		align-items: center;
8862		justify-content: center;
8863		bottom: 10px;
8864	}
8865	
8866		.cGalleryCat .cGalleryCat_info > li{
8867			margin: 0 8px !important;
8868			white-space: nowrap;
8869			flex: 0 0 auto;
8870		}
8871	
8872		.cGalleryCat .cGalleryCat_info > li:first-child{
8873			position: static;
8874			overflow: hidden;
8875			text-overflow: ellipsis;
8876			flex: 1 1 auto;
8877		}
8878		
8879		.cGalleryCat .cGalleryCat_info > li:empty{
8880			display: none;
8881		}
8882
8883/* Masonry */
8884.cGalleryPatchwork_item{
8885	border-radius: 3px;
8886	text-shadow: rgba(0,0,0,0.7) 0px 1px 3px;
8887}
8888
8889	/* Remove hover effect */
8890	.cGalleryPatchwork_item:hover {
8891	    transform: none;
8892	    z-index: auto;
8893	}
8894	
8895	/* Border */
8896	.cGalleryPatchwork_item:after{
8897		content: '';
8898		position: absolute;
8899		top: 0; left: 0; right: 0; bottom: 0;
8900		border: 1px solid {hextorgb="text_color" opacity="0.1"};
8901		pointer-events: none;
8902		border-radius: inherit;
8903	}
8904	
8905	.cGalleryPatchwork_item > a:before{
8906		content: '';
8907		position: absolute;
8908		top: 0; left: 0; right: 0;
8909		height: 120px;
8910		max-height: 100%;
8911		pointer-events: none;
8912		z-index: 1;
8913		background: linear-gradient(to bottom,
8914			rgba(0,0,0,1) 0%,
8915			rgba(0,0,0,0.738) 19%,
8916			rgba(0,0,0,0.541) 34%,
8917			rgba(0,0,0,0.382) 47%,
8918			rgba(0,0,0,0.278) 56.5%,
8919			rgba(0,0,0,0.194) 65%,
8920			rgba(0,0,0,0.126) 73%,
8921			rgba(0,0,0,0.075) 80.2%,
8922			rgba(0,0,0,0.042) 86.1%,
8923			rgba(0,0,0,0.021) 91%,
8924			rgba(0,0,0,0.008) 95.2%,
8925			rgba(0,0,0,0.002) 98.2%,
8926			rgba(0,0,0,0) 100%);
8927		transition: all ease-in-out 0.2s;
8928		opacity: 0.7;
8929	}
8930	
8931		.cGalleryPatchwork_item > a:hover:before{
8932			opacity: 0.1;
8933		}
8934	
8935	/* Neatly align avatar and image name */
8936	.cGalleryPatchwork_item .ipsPhotoPanel{
8937		background: none;
8938		display: flex;
8939		align-items: center;
8940			
8941		line-height: 17px;
8942		height: auto;
8943		padding: 7px !important;
8944	}
8945	
8946		.cGalleryPatchwork_item .ipsUserPhoto_mini{
8947			width: 30px;
8948			height: 30px;
8949		}
8950	
8951		html[dir="ltr"] .cGalleryPatchwork_item .ipsPhotoPanel.ipsPhotoPanel_mini > div{
8952			margin-left: 7px;
8953		}
8954		
8955		html[dir="rtl"] .cGalleryPatchwork_item .ipsPhotoPanel.ipsPhotoPanel_mini > div{
8956			margin-right: 7px;
8957		}
8958		
8959		.cGalleryPatchwork_item .ipsPhotoPanel,
8960		.cGalleryPatchwork_comments{
8961			z-index: 2;
8962			/* transition: all ease-in-out 0.2s; */
8963		}
8964		/*
8965		.cGalleryPatchwork_item > a:hover .ipsPhotoPanel,
8966		.cGalleryPatchwork_item > a:hover .cGalleryPatchwork_comments{
8967			opacity: 0.3;
8968		} */
8969		
8970		.cGalleryPatchwork_item [data-role="moderation"]{
8971			z-index: 3;
8972		}
8973
8974
8975
8976/* Lightbox */
8977
8978.elGalleryImage .ipsButton.ipsButton_link{
8979	color: #fff;
8980}
8981
8982	.elGalleryImage .ipsPromote .ipsPromote_icon{
8983		background: rgba(255,255,255,0.2);
8984	}
8985
8986	[data-role="toggleFullscreen"]::before{
8987		font-family: FontAwesome;
8988		content: "\f065";
8989	}
8990
8991.cGalleryLightbox_info{
8992	background: {theme="area_background_reset"};
8993}
8994
8995	.cGalleryLightbox_info .ipsComposeArea [data-ipsEditor] + [data-ipsEditor-toolList]{
8996		padding-bottom: 7px;
8997	}
8998
8999	.cGalleryLightbox_info .cGalleryExif{
9000		margin-bottom: 5px;
9001	}
9002
9003	.cGalleryLightbox_info #comments{
9004		background: none;
9005		box-shadow: none;
9006		border: 0;
9007		border-radius: 0;
9008	}
9009
9010	/* Pagination spacing */
9011	.cGalleryLightbox_info  .ipsPagination ~ .ipsPagination{
9012		margin: 0 0 10px 0 ;
9013	}
9014
9015
9016/* Large image slider */
9017#elGalleryImage{
9018	background: transparent;
9019}
9020
9021	.cGalleryViewImage img{
9022		box-shadow: 0px 5px 20px rgba(0,0,0,0.2);
9023	}
9024	
9025	.cGalleryViewImage:after{
9026		content: '';
9027		position: absolute;
9028		top: 0; left: 0; right: 0; bottom: 0;
9029		pointer-events: none;
9030		border: 1px solid {hextorgb="text_color" opacity="0.15"};
9031	}
9032	
9033	/* To remove the image shadow.. */
9034	/*
9035	.cGalleryViewImage img{ box-shadow: none; }
9036	.cGalleryViewImage:after{ display: none; }
9037	*/
9038	
9039	
9040
9041	#elGalleryImageNav a{
9042		background: {hextorgb="text_color" opacity="0.18"};
9043		border-radius: 3px;
9044		padding: 0;
9045		line-height: 60px;
9046		width: 60px;
9047		font-size: 40px;
9048		text-align: center;
9049	}
9050	
9051		#elGalleryImageNav a:hover{
9052			background: {hextorgb="text_color" opacity="0.4"};
9053		}
9054	
9055		html[dir="ltr"] #elGalleryImageNav_prev,
9056		html[dir="rtl"] #elGalleryImageNav_next {
9057			left: 5px;
9058		}
9059		html[dir="rtl"] #elGalleryImageNav_prev,
9060		html[dir="ltr"] #elGalleryImageNav_next {
9061			right: 5px;
9062		}
9063		
9064		#elGalleryImageNav .fa,
9065		#elGalleryImageNav .fa:before{
9066			display: block;
9067			line-height: inherit;
9068		}
9069		
9070		
9071	/* Thumbnail navigation */
9072	#elGalleryNav{
9073		background: {theme="area_background_light"};
9074		color: {theme="text_light"};
9075		border: 1px solid {hextorgb="text_color" opacity="0.1"};
9076		border-width: 1px 0 0 0;
9077		border-bottom-left-radius: inherit;
9078		border-bottom-right-radius: inherit;
9079		padding-top: 20px;
9080		padding-bottom: 20px;
9081	}
9082	
9083		#elGalleryNav a[data-action]{
9084			color: {theme="text_color"};
9085			width: 26px;
9086			display: block;
9087		}
9088	
9089			#elGalleryNav .fa{
9090				display: block;
9091				line-height: inherit;
9092			}
9093	
9094		/* Bug fix due to poor HTML. A div is within a paragraph */
9095		#elGalleryNav p{
9096			margin: 0;
9097		}
9098		#elGalleryNav .ipsType_reset{
9099			margin-top: 10px;
9100		}
9101
9102		/* Bug fix for alignment */
9103		#elGalleryNav li{
9104			vertical-align: top;
9105		}
9106		
9107		.cGalleryAlbumSlider li{
9108			width: 46px;
9109			height: 46px;
9110			margin: 2px;
9111			border: 0;
9112			border-radius: 3px;
9113			position: relative;
9114		}
9115		
9116			.cGalleryAlbumSlider li a{
9117				border: 1px solid {hextorgb="text_color" opacity="0.3"};
9118				border-radius: inherit;
9119			}
9120			
9121				.cGalleryAlbumSlider li a:hover{
9122					background: rgba(255,255,255,0.12);
9123				}
9124		
9125			/* Active thumb in slider */
9126			.cGalleryAlbumSlider li.cGalleryAlbumSlider_active a{
9127				border: 2px solid {hextorgb="text_color" opacity="0.9"};
9128			}
9129			
9130			/* Placeholder thumbs */
9131			.cGalleryAlbumSlider .ipsAreaBackground{
9132				background: {hextorgb="text_color" opacity="0.15"};
9133			}
9134
9135/* Bug fix: The br which spaces info and comments is removed during ajax navigation between images */
9136#elGalleryHeader + section[data-role="imageInfo"]{
9137	margin-bottom: 15px;
9138}
9139
9140
9141
9142/* Submit images */
9143.cGallerySteps > li:before {
9144	color: #fff;
9145	background: {theme="text_color"};
9146}
9147
9148	.cGallerySteps > li span,
9149	.cGallerySteps > li a {
9150		color: {theme="text_color"};
9151	}
9152
9153	.cGallerySteps > li span:before,
9154	.cGallerySteps > li span:after,
9155	.cGallerySteps > li a:before,
9156	.cGallerySteps > li a:after {
9157		background: {theme="text_color"};
9158	}
9159
9160	/* Done steps */
9161	.cGallerySteps > li.cGallerySteps_done:before,
9162	.cGallerySteps > li.cGallerySteps_done span:after,
9163	.cGallerySteps > li.cGallerySteps_done + li span:before,
9164	.cGallerySteps > li.cGallerySteps_done a:after,
9165	.cGallerySteps > li.cGallerySteps_done + li a:before,
9166	.cGallerySteps > li.cGallerySteps_active:before {
9167		background: #5a895c;
9168	}
9169
9170	.cGallerySteps > li.cGallerySteps_done span,
9171	.cGallerySteps > li.cGallerySteps_active span,
9172	.cGallerySteps > li.cGallerySteps_done a,
9173	.cGallerySteps > li.cGallerySteps_active a {
9174		color: #5a895c;
9175	}
9176
9177
9178
9179/* Step 1: Choose album */
9180	#elGallerySubmit_albumChooser > li > div {
9181		border-color: {hextorgb="text_color" opacity="0.1"};
9182	}
9183
9184	#elGallerySubmit_albumChooser > li > div:hover {
9185		background: {theme="area_background_light"};
9186	}
9187
9188	#elGallerySubmit_albumChooser > li > input[type="radio"]:checked + div {
9189		background: {theme="step_background"};
9190	}
9191
9192		#elGallerySubmit_albumChooser > li > input[type="radio"]:checked + div:before,
9193		#elGallerySubmit_albumChooser > li > input[type="radio"]:checked + div .ipsType_light {
9194			color: inherit;
9195		}
9196
9197.cGallerySubmit_albumImage {
9198	background-color: rgba(0,0,0,0.3);
9199}
9200
9201/* Step 2: Upload files */
9202.cGallerySubmit_uploadImages .ipsAttachment_dropZone:not( .ipsDragging ) {
9203	border-color: {theme="area_background_light"};
9204}
9205
9206/* Step 3: Image info */
9207.cGallerySubmit_strip {
9208	background: {theme="area_background_dark"};
9209}
9210
9211.cGallerySubmit_bottomBar {
9212	border-color: {hextorgb="text_color" opacity="0.1"};
9213}
9214
9215		.cGallerySubmit_strip li:not( .cGallerySubmit_current ) :hover {
9216			border-color: {hextorgb="selected" opacity="0.75"};
9217		}
9218
9219	.cGallerySubmit_strip .cGalleryTrimmedImage {
9220		background-clip: padding-box;
9221	}
9222
9223	.cGallerySubmit_strip .cGallerySubmit_current .cGalleryTrimmedImage {
9224		border-color: {theme="selected"};
9225	}
9226
9227			html[dir="ltr"] .cGallerySubmit_strip .cGallerySubmit_current:after {
9228				border-color: transparent transparent transparent {theme="selected"};
9229			}
9230			html[dir="rtl"] .cGallerySubmit_strip .cGallerySubmit_current:after {
9231				border-color: transparent {theme="selected"} transparent transparent;
9232			}
9233
9234.ipsApp button.cGallerySubmit_button {
9235	color: {theme="text_color"};
9236}
9237
9238/* Bug fix: prevents images from wrapping too early */
9239.cGalleryPatchwork_row{ width: calc(100% + 1px) !important; }
9240
9241/* Bug fix: Remove margin from gallery reviews in Clubs */
9242[data-role="imageComments"] .ipsTabs_panels.ipsTabs_contained .ipsTabs_panel{
9243	margin: 0;
9244}
9245
9246/* Bug fix: Neatly align the layout when the "Show as large previews" option is selected */
9247.cGalleryLargeList .ipsContained_container{
9248  margin-top: 10px;
9249}
9250
9251.cGalleryLargeList .ipsContained_container,
9252.cGalleryLargeList .ipsContained_container > span:not(.ipsHide){
9253  display: inline-block !important;
9254}
9255
9256.ipsApp .cGalleryLargeList{
9257  padding: 15px;
9258  padding-bottom: 0.1px;
9259}
9260
9261.cGalleryLargeList .ipsBox{
9262  margin-bottom: 15px;
9263}
9264
9265.cGalleryRowsList .ipsDataItem > .ipsPos_top{
9266	align-self: center;
9267}
9268
9269/*
9270	----------------
9271	- Downloads
9272	----------------
9273*/
9274
9275/* Make spacing consistent */
9276html[dir="ltr"] .cDownloadsCarouselItem,
9277html[dir="rtl"] .cDownloadsCarouselItem{
9278	margin: 0px !important;
9279}
9280
9281#elDownloadsSubmit_progress.ipsSticky{
9282	background-color: {theme="area_background"};
9283}
9284
9285/* Upload file */
9286.ipsProgressBar{
9287	background-color: {hextorgb="poll_bar" opacity="0.3"};
9288	background-image: linear-gradient(to bottom, {hextorgb="poll_bar" opacity="0.4"} 0%, {hextorgb="poll_bar" opacity="0.3"} 100%);
9289}
9290
9291.ipsProgressBar_progress,
9292.ipsProgressBar.ipsProgressBar_animated .ipsProgressBar_progress{
9293	background-color: {theme="poll_bar"};
9294}
9295
9296#elDownloadsSubmit .ipsAttachment_dropZone{
9297	background-color: {theme="area_background_reset"};
9298	border-color: {hextorgb="text_color" opacity="0.3"};
9299}
9300
9301
9302
9303/*
9304	----------------
9305	- Pages
9306	----------------
9307*/
9308
9309.cCmsCategoryFeaturedEntry,
9310.cCmsCategoryFeaturedEntry .cCmsRecord_image,
9311.cmsCategory2col .ipsGrid_span6:nth-of-type(1),
9312.cmsCategory3col .ipsGrid_span4:nth-of-type(1),
9313.cmsCategory3col .ipsGrid_span4:nth-of-type(2) {
9314	border-color: {hextorgb="text_color" opacity="0.15"};
9315}
9316
9317
9318
9319/*
9320	----------------
9321	- Calendar
9322	----------------
9323*/
9324
9325/* Calendar widget */
9326.ipsWidget .ipsCalendarDate{ background: {theme="area_background_light"}; }
9327
9328/* Make text easier to read */
9329.cCalendar_birthdays{
9330	color: inherit;
9331}
9332
9333/* Remove ipsBox styles from .cCalendar and .ipsPager since they're already applied by .ipsBox_alt */
9334.cCalendar.ipsBox,
9335.cCalendarNav.ipsPager{
9336	box-shadow: none;
9337	border: 0;
9338	border-radius: 0;
9339}
9340
9341.cCalendar.ipsBox,
9342.cCalendarNav.ipsPager:not(.ipsSticky){
9343	background: none !important;
9344}
9345
9346/* Navigation bar */
9347.cCalendarNav{
9348	display: flex;
9349	align-items: center;
9350	justify-content: space-between;
9351}
9352
9353.cCalendarNav:before,
9354.cCalendarNav:after{
9355	display: none;
9356}
9357
9358	html[dir="ltr"] .cCalendarNav > [class*="ipsGrid_span"],
9359	html[dir="rtl"] .cCalendarNav > [class*="ipsGrid_span"]{
9360		margin: 0;
9361	}
9362	
9363	.cCalendarNav .ipsType_pageTitle{
9364		margin-top: 0;
9365	}
9366
9367@media screen and (max-width:767px){
9368	
9369	.cCalendarNav{
9370		flex-wrap: wrap;
9371	}
9372	
9373	.cCalendarNav .ipsType_center{
9374		order: 1;
9375		width: 100%;
9376	}
9377	
9378	.cCalendarNav .ipsType_left{
9379		order: 2;
9380		width: 45% !important;
9381	}
9382	
9383	.cCalendarNav .ipsType_right{
9384		order: 3;
9385		width: 45% !important;
9386	}
9387	
9388}
9389
9390.cCalendar{
9391	background-color: {theme="area_background_reset"};
9392}
9393
9394.cCalendar td {
9395	border-color: {hextorgb="text_color" opacity="0.1"};
9396}
9397
9398.cCalendar td.cCalendar_nonDate {
9399	background: {hextorgb="text_color" opacity="0.06"};
9400}
9401
9402.cCalendar td.cCalendar_today, .cCalendarWeek div.cCalendar_today {
9403	background: {theme="area_background_dark"};
9404}
9405	.cCalendarWeek div.cCalendar_today h2.ipsType_sectionHead {
9406		color: inherit;
9407	}
9408
9409	a.cEvents_style_blank, .cEvents_style_blank a, .cCalendarIcon.cEvents_style_blank {
9410		border-color: {hextorgb="text_color" opacity="0.15"};
9411	}
9412
9413#elEventHeader_details {
9414	background: {theme="area_background_dark"};
9415}
9416
9417.cCalendarDay > .ipsDataItem {
9418	border-bottom-color: {hextorgb="text_color" opacity="0.2"};
9419}
9420
9421.ipsDataItem.cCalendarDay_allDay {
9422	border-bottom-color: {theme="text_color"};
9423}
9424
9425.ipsButton.cCalendar_miniAddEvent{
9426	line-height: 1.4rem;
9427	height: auto;
9428}
9429
9430.ipsCalendarDate{
9431	background: {hextorgb="text_color" opacity="0.05"};
9432	border-color: {hextorgb="text_color" opacity="0.2"};
9433}
9434
9435	.ipsCalendarDate_month{
9436		color: {hextorgb="text_color" opacity="0.8"};
9437	}
9438
9439@media screen and (max-width: 767px) {
9440	.cCalendar .cCalendar_hasEvents .cCalendar_dayNumber {
9441		border-color: {hextorgb="text_color" opacity="0.12"};
9442		background: {hextorgb="text_color" opacity="0.04"};
9443	}
9444
9445		.cCalendar .cCalendar_hasEvents.cCalendar_today .cCalendar_dayNumber {
9446			background: rgba(255,255,255,0.4);
9447			border-color: rgba(255,255,255,0.3);
9448		}
9449
9450		.cCalendar td.cCalendar_today .cCalendar_dayNumber {
9451			background: transparent;
9452			border-color: transparent;
9453			color: inherit;
9454		}
9455}
9456
9457
9458
9459/*
9460	----------------
9461	- Nexus
9462	----------------
9463*/
9464
9465.cNexusCategoryBlock{
9466	min-height: 220px;
9467}
9468
9469.cNexusCategoryBlock a{
9470	box-shadow: inset {hextorgb="text_color" opacity="0.15"} 0px 0px 0px 1px, rgba(0,0,0,0.15) 0px 3px 8px;
9471	min-height: 220px;
9472	border-radius: 3px;
9473	text-align: center;
9474}
9475
9476	.cNexusCategoryBlock > a::before{
9477		background: linear-gradient(to top,
9478			rgba(0,0,0,1) 0%,
9479			rgba(0,0,0,0.738) 19%,
9480			rgba(0,0,0,0.541) 34%,
9481			rgba(0,0,0,0.382) 47%,
9482			rgba(0,0,0,0.278) 56.5%,
9483			rgba(0,0,0,0.194) 65%,
9484			rgba(0,0,0,0.126) 73%,
9485			rgba(0,0,0,0.075) 80.2%,
9486			rgba(0,0,0,0.042) 86.1%,
9487			rgba(0,0,0,0.021) 91%,
9488			rgba(0,0,0,0.008) 95.2%,
9489			rgba(0,0,0,0.002) 98.2%,
9490			rgba(0,0,0,0) 100%);
9491		height: 140px;
9492		opacity: 0.75;
9493		border-bottom-left-radius: inherit;
9494		border-bottom-right-radius: inherit;
9495	}
9496	
9497	.cNexusCategoryBlock .ipsType_sectionHead{
9498		text-shadow: 0px 1px 2px rgba(0,0,0,0.4);
9499		width: calc(100% - 14px);
9500		bottom: 20px;
9501	}
9502	
9503@media screen and (max-width:767px){
9504	.cNexusCategoryBlock,
9505	.cNexusCategoryBlock a,
9506	.cNexusCategoryBlock > a::before{
9507		min-height: 130px;
9508		height: 130px;
9509	}
9510}
9511
9512@supports ( object-fit: cover ) {
9513	
9514	.cNexusCarousel.cNexusCategory_grid .cNexusProduct_image img,
9515	.cNexusProduct_images .ipsImage{
9516		object-fit: cover;
9517		width: 100%;
9518		height: 100%;
9519	}
9520		
9521}
9522
9523a.cNexusProduct_image{
9524	color: inherit;
9525	position: relative;
9526  	/* Required for the pseudo element to work correctly */
9527  	display: inline-block;
9528}
9529
9530.cNexusProduct_image:after{
9531	content: '';
9532	position: absolute;
9533	top: 0; left: 0; right: 0; bottom: 0;
9534	border: 1px solid currentColor;
9535	opacity: 0.3;
9536}
9537
9538
9539/* Manage Purchases thumb */
9540.cNexusPurchaseList .cNexusPurchaseList_image,
9541.cNexusPurchase .cNexusPurchase_image {
9542	background-color: {theme="area_background_dark"};
9543	border-color: {theme="area_background"};
9544}
9545
9546
9547html[dir="ltr"] .cNexusCheckout_returning,
9548html[dir="ltr"] .cNexusCheckout_review > .ipsColumn:first-child,
9549html[dir="rtl"] .cNexusCheckout_returning,
9550html[dir="rtl"] .cNexusCheckout_review > .ipsColumn:first-child {
9551	border-color: {hextorgb="text_color" opacity="0.1"};
9552}
9553
9554.cNexusMenuCart_totalRow,
9555.cNexusCheckout_subtotal {
9556	border-color: {hextorgb="text_color" opacity="0.5"};
9557}
9558
9559.cDonateProgressBar {
9560	background: {hextorgb="poll_bar" opacity="0.15"};
9561	box-shadow: inset {hextorgb="poll_bar" opacity="0.25"} 0px 0px 0px 1px;
9562}
9563	
9564.cDonateProgressBar_progress {
9565	background: {theme="poll_bar"};
9566}
9567
9568.cNexusPrice s {
9569	color: {theme="text_light"};
9570}
9571
9572.cPayment {
9573	border-color: {hextorgb="text_color" opacity="0.1"};
9574	background-color: {theme="area_background_light"};
9575}
9576
9577/* Overwrite the internal box background-color */
9578.cNexusSupportMessage{
9579  background-color: {theme="area_background_reset"} !important;
9580}
9581
9582.cNexusSupportMessage_purchase .cNexusPurchase_image {
9583	background-color: {theme="area_background_reset"};
9584	border-color: {theme="area_background_light"};
9585}
9586/*
9587	.cNexusSupportMessage_m .cNexusSupportMessage_author,
9588	.cNexusSupportMessage_a .cNexusSupportMessage_author,
9589	.cNexusSupportMessage_s .cNexusSupportMessage_author,
9590	.cNexusSupportMessage_e .cNexusSupportMessage_author,
9591	.cNexusSupportMessage_h .cNexusSupportMessage_author {
9592		background: {theme="area_background_reset"};
9593	}
9594*/
9595.cNexusOrderBadge {
9596	background: #666;
9597}
9598
9599.cNexusSupportMessage_replyArea{
9600	background: {theme="area_background_reset"};
9601}
9602
9603#elNexusActions > li > a:hover{
9604	background: {hextorgb="link_hover" opacity="0.1"};
9605}
9606
9607/* Remove border from sub categories in side navigation */
9608#elCategories_menu .ipsSideMenu_list{
9609	border: 0;
9610}
9611
9612/* Make thumbnails fill containers */
9613.cNexusProduct_image img, .cNexusProduct_image .ipsNoThumb{
9614	width: 100%;
9615	height: 100%;
9616	object-fit: cover;
9617}
9618
9619/* 0 support tickets */
9620.cNexusActionBadge_off{
9621	background: {theme="area_background_dark"};
9622}
9623
9624/*
9625	----------------
9626	- Clubs
9627	----------------
9628*/
9629
9630#elClubHeader{
9631	margin: 0 0 10px 0;
9632	position: relative;
9633	border-radius: 3px;
9634}
9635
9636	#elClubHeader .ipsCoverPhoto,
9637	#elClubHeader .ipsCoverPhoto_container{
9638		border-top-left-radius: inherit;
9639		border-top-right-radius: inherit;
9640	}
9641	
9642	#elClubControls{
9643		background: {theme="tab_background"};
9644		border-bottom-left-radius: inherit;
9645		border-bottom-right-radius: inherit;
9646	}
9647
9648		#elClubControls .ipsButton::after{
9649			border: 0;
9650		}
9651
9652		@media (min-width: 768px){
9653			#elClubControls{
9654				display: flex;
9655				flex-wrap: wrap;
9656				align-items: center;
9657			}
9658
9659			#elClubControls .ipsButton_split{
9660				order: 2;
9661				flex: 0 0 auto;
9662				margin: 0px;
9663				margin-right: 14px;
9664			}
9665
9666				html[dir='rtl'] #elClubControls .ipsButton_split{
9667					margin: 0;
9668					margin-left: 14px;
9669				}
9670
9671			#elClubControls #tabs_club{
9672				flex: 1 0 auto;
9673			}
9674
9675			#elClubControls .ipsTabs_item{
9676				margin: 1px 2px 1px 0px;
9677			}
9678		}
9679
9680	#elClubHeader .ipsCoverPhoto_button{
9681		z-index: 1;
9682	}
9683	
9684	#elClubHeader:after{
9685		content: '';
9686		pointer-events: none;
9687		position: absolute;
9688		top: 0; left: 0; right: 0; bottom: 0;
9689		border-radius: inherit;
9690		border: 1px solid {hextorgb="text_color" opacity="0.3"};
9691	}
9692
9693/* Bug fix to place icon on top of border and align correctly */
9694@media screen and (max-width:767px){	
9695	#elClubHeader .cClubIcon{
9696		z-index: 1;
9697		top: 10px;
9698	}
9699	#elClubHeader .ipsCoverPhoto{
9700		padding-top: 60px;
9701	}
9702}
9703
9704/* Newsletter */
9705.ipsWidget[data-blockid^="app_core_newsletter"] .ipsWidget_inner{
9706	display: flex;
9707	flex-wrap: wrap;
9708	align-items: center;
9709}
9710
9711	.ipsWidget[data-blockid^="app_core_newsletter"] .ipsPos_right{
9712		flex: 0 0 auto;
9713		padding-top: 0;
9714		padding-bottom: 0;
9715	}
9716
9717	html[dir='ltr'] .ipsWidget[data-blockid^="app_core_newsletter"] .ipsPos_right{
9718		padding-left: 0;
9719	}
9720
9721	html[dir='rtl'] .ipsWidget[data-blockid^="app_core_newsletter"] .ipsPos_right{
9722		padding-right: 0;
9723	}
9724
9725	.ipsWidget[data-blockid^="app_core_newsletter"]  p{
9726		flex: 1 1 auto;
9727		width: 1%;
9728	}
9729
9730	.ipsWidget[data-blockid^="app_core_newsletter"]  p:empty{ display: none; }
9731
9732	.ipsWidget[data-blockid^="app_core_newsletter"] .ipsButton{
9733		margin-top: 15px;
9734	}
9735
9736/* Correctly align side widgets */
9737.ipsWidget.ipsWidget_vertical:first-child{
9738	margin-top: 0;
9739}
9740
9741/* Bug fix: Correctly align responsive tabs */
9742#elClubControls .ipsTabs{
9743	padding: 10px;
9744}
9745
9746	#elClubControls .ipsTabs_item{
9747		line-height: 38px;
9748		margin-top: 0;
9749		border-radius: 2px;
9750	}
9751	
9752	@media screen and (min-width:980px){
9753	
9754		#elClubControls .ipsTabs_activeItem{
9755			position: relative;
9756		}
9757		
9758			#elClubControls .ipsTabs_activeItem:after{
9759				content: '';
9760				position: absolute;
9761				bottom: 0; left: 50%; margin-left: -4px;
9762				width: 8px; height: 8px;
9763				border: 4px solid transparent;
9764				border-bottom-color: {theme="tab_background"};
9765				pointer-events: none;
9766				box-sizing: border-box;
9767			}
9768			
9769	}
9770
9771@media screen and (max-width:767px){
9772	#elClubHeader .ipsCoverPhoto{
9773		height: auto;
9774	}
9775}
9776
9777
9778/*
9779	----------------
9780	- Streams
9781	----------------
9782*/
9783
9784/* Make description lighter */
9785.ipsStreamItem_status{ color: {theme="text_light"}; }
9786
9787/* Stream "Content type" cog icon */
9788.cStreamForm_list li a.ipsSideMenu_item.ipsSideMenu_itemActive + .cStreamForm_menu,
9789.cStreamForm_list li a.ipsSideMenu_item:not( .ipsSideMenu_itemActive ):hover + .cStreamForm_menu {
9790	background: {hextorgb="text_color" opacity="0.2"};
9791}
9792
9793/* Fix Stream filters when a backdrop filter is applied to .ipsBox */
9794div[data-controller="core.front.streams.form"]{
9795	position: relative;
9796}
9797
9798/* Stream background */
9799div[data-role="streamBody"] .ipsBox_alt{
9800	background: {theme="area_background_light"} !important;
9801}
9802
9803/* Filter */
9804.cStreamFilter{
9805	background: {theme="area_background_reset"};
9806	border-color: {hextorgb="text_color" opacity="0.2"};
9807}
9808
9809.ipsBox .cStreamFilter{
9810	background: transparent;
9811	border-color: transparent;
9812}
9813
9814	.cStreamFilter > li > a{
9815		border-color: {hextorgb="text_color" opacity="0.2"};
9816	}
9817	
9818	.cStreamFilter a{
9819		color: {hextorgb="text_color" opacity="0.7"};
9820	}
9821	
9822	.cStreamFilter h3{
9823		color: {theme="text_color"};
9824	}
9825	
9826	.cStreamFilter > li > a.cStreamFilter_active{
9827		background: {theme="area_background_dark"};
9828	}
9829	
9830	.cStreamFilter p em{
9831		opacity: 0.8;
9832	}
9833
9834html[dir="ltr"] .ipsStreamItem.ipsStreamItem_condensed .ipsStreamItem_stats,
9835html[dir="rtl"] .ipsStreamItem.ipsStreamItem_condensed .ipsStreamItem_stats{
9836	border-color: {hextorgb="text_color" opacity="0.2"};
9837}
9838
9839.ipsStream .ipsStreamItem_contentType{
9840	background: {theme="area_background_reset"};
9841}
9842
9843.ipsStreamItem.ipsStreamItem_contentBlock{
9844	border-color: {hextorgb="text_color" opacity="0.15"};
9845}
9846
9847	/* Add background to certain results such as reactions */
9848	.ipsStreamItem.ipsStreamItem_actionBlock{
9849		background: {theme="area_background_reset"};
9850		border: 1px solid {hextorgb="text_color" opacity="0.15"};
9851		border-radius: 3px;
9852		padding: 10px !important;
9853	}
9854
9855html[dir="ltr"] .ipsStream_withTimeline .ipsStreamItem.ipsStreamItem_contentBlock:before{
9856	border-right-color: {hextorgb="text_color" opacity="0.15"};
9857}
9858
9859html[dir="rtl"] .ipsStream_withTimeline .ipsStreamItem.ipsStreamItem_contentBlock:before{
9860	border-left-color: {hextorgb="text_color" opacity="0.15"};
9861}
9862
9863html[dir="ltr"] .ipsStream_snippetInfo,
9864html[dir="rtl"] .ipsStream_snippetInfo{
9865	border-width: 0;
9866}
9867
9868/*
9869	----------------
9870	- Inbox
9871	----------------
9872*/
9873
9874/* Space out Options bar and Message title when viewing a message */
9875#elMessageViewer .ipsBox_alt:first-child{
9876	margin-bottom: 10px;
9877}
9878
9879/* Remove side border from inbox list items. Not sure what its purpose is, but it causes a visible border on the last item */
9880html[dir="ltr"] .cMessage,
9881html[dir="rtl"] .cMessage{
9882	border-right-width: 0;
9883	border-left-width: 0;
9884}
9885
9886html[dir="ltr"] .cMessage_members > ol > li,
9887html[dir="rtl"] .cMessage_members > ol > li{
9888	border-color: {hextorgb="text_color" opacity="0.4"};
9889}
9890
9891/* Add a background to titles since they aren't in a box */
9892.focus-transparent #elMessageViewer .ipsType_pageTitle{
9893	padding: 10px 20px;
9894	border-radius: 3px;
9895	background: {theme="area_background_reset"};
9896}
9897
9898@media screen and (min-width:980px){
9899	.focus-transparent #elMessageViewer .ipsType_pageTitle{
9900		display: inline-block;
9901	}
9902}
9903
9904@media screen and (max-width: 979px){
9905	.focus-transparent #elMessageViewer .ipsType_pageTitle{
9906		clear: both;
9907		margin-top: 20px;
9908		display: block;
9909	}
9910}
9911
9912
9913
9914
9915
9916/*
9917	----------------
9918	- Promoted Content
9919	----------------
9920*/
9921
9922/* Stop long titles from overflowing */
9923.cPromotedTitle{
9924	overflow-wrap: break-word;
9925}
9926
9927.cPromotedImages {
9928	border-color: transparent;
9929}
9930
9931.cPromoteDialog_icon {
9932	box-shadow: inset {hextorgb="text_color" opacity="0.1"} 0px 0px 0px 1px;
9933}
9934
9935	.cPromoteCount:not( .ipsType_issue ):not( .ipsType_negative ) {
9936		color: {theme="text_color"};
9937	}
9938	
9939	.cPromote_attachImage [data-role="preview"]{
9940		background-clip: padding-box;
9941	}
9942	
9943		.cPromote_attachImageSelected [data-role="preview"] {
9944			border-color: {theme="text_color"};
9945		}
9946
9947#form_promote_media .ipsAttachment_dropZone.ipsAttachment_dropZoneSmall {
9948	border-color: {hextorgb="text_color" opacity="0.3"};
9949}
9950
9951	html[dir="ltr"] #form_promote_social_content_facebook .ipsFieldRow_content,
9952	html[dir="ltr"] #form_promote_social_content_twitter .ipsFieldRow_content,
9953	html[dir="ltr"] #form_promote_social_content_internal .ipsFieldRow_content,
9954	html[dir="rtl"] #form_promote_social_content_facebook .ipsFieldRow_content,
9955	html[dir="rtl"] #form_promote_social_content_twitter .ipsFieldRow_content,
9956	html[dir="rtl"] #form_promote_social_content_internal .ipsFieldRow_content {
9957		background: transparent;
9958	}
9959
9960	#form_promote_social_content_facebook .ipsFieldRow_desc,
9961	#form_promote_social_content_twitter .ipsFieldRow_desc,
9962	#form_promote_social_content_internal .ipsFieldRow_desc {
9963		border-color: {hextorgb="text_color" opacity="0.1"};
9964	}
9965
9966/* Neater carousel */
9967.cPromotedWidgetItem > .ipsPad_half{
9968	padding: 15px;
9969}
9970
9971	.cPromotedWidgetItem .ipsPhotoPanel{
9972		margin-top: 20px;
9973	}
9974
9975	.cPromotedWidgetItem h2{
9976		margin-bottom: 10px;
9977	}
9978
9979
9980/* Promote button alignment */
9981.ipsApp .ipsPromote{
9982	padding: 0 !important;
9983	display: inline-flex;
9984}
9985
9986	.ipsPromote .ipsPromoteText{
9987		padding: 0 15px;
9988		flex: 1 0 auto;
9989	}
9990	
9991	html[dir] .ipsApp .ipsPromote.ipsButton a{
9992        margin: 0;
9993        padding: 0;
9994    }
9995	
9996	html[dir='rtl'] .ipsPageHeader .ipsPromote {
9997	    margin-right: 0;
9998	    margin-left: 10px;
9999	}
10000	
10001	.ipsPromote .ipsPromote_icon{
10002		flex: 0 0 auto;
10003		color: inherit;
10004		margin: 0;
10005		background: {hextorgb="very_light_button_font" opacity="0.15"};
10006	}
10007	
10008	.ipsPromote .ipsPromote_icon:first-child{
10009		border-top-left-radius: inherit;
10010		border-bottom-left-radius: inherit;
10011	}
10012	
10013	html[dir='rtl'] .ipsPromote .ipsPromote_icon:first-child{
10014		border-top-right-radius: inherit;
10015		border-bottom-right-radius: inherit;
10016	}
10017
10018@media screen and (max-width:767px){
10019	/* Not sure if there are side-effects, but this makes the pseudo border align correctly */
10020	.ipsPromote{
10021		display: flex !important;
10022	}
10023}
10024
10025/*
10026	----------------
10027	- Announcements
10028	----------------
10029*/
10030
10031.cAnnouncementsFloat{
10032	left: 0;
10033}
10034
10035html[dir='rtl'] .cAnnouncementContentTop.ipsMessage{
10036	padding: 0;
10037}
10038
10039.focus-fixed-nav .cAnnouncementsFloat,
10040.focus-fixed-header .cAnnouncementsFloat,
10041.focus-static-announcements .cAnnouncementsFloat{
10042	position: static;
10043}
10044
10045	.focus-fixed-nav body[style*='margin-top'],
10046	.focus-fixed-header body[style*='margin-top'],
10047	.focus-static-announcements body[style*='margin-top']{
10048		margin-top: 0 !important;
10049	}
10050
10051#cAnnouncementSidebar{
10052	padding-bottom: 1px;
10053	min-width: 0;
10054}
10055
10056.cAnnouncementIcon{
10057	background: {theme="area_background_dark"};
10058}
10059	
10060/*
10061	----------------
10062	- Pagination
10063	----------------
10064*/
10065
10066/* Remove transition */
10067.ipsPagination:not( .ipsPagination_mini ) .ipsPagination_first a,
10068.ipsPagination:not( .ipsPagination_mini ) .ipsPagination_last a, 
10069.ipsPagination:not( .ipsPagination_mini ) .ipsPagination_next a,
10070.ipsPagination:not( .ipsPagination_mini ) .ipsPagination_prev a {
10071	{prefix="transition" value="none"}
10072}
10073
10074.ipsPagination:not( .ipsPagination_mini ) .ipsPagination_page a,
10075.ipsPagination:not( .ipsPagination_mini ) .ipsPagination_next a,
10076.ipsPagination:not( .ipsPagination_mini ) .ipsPagination_prev a,
10077.ipsPagination:not( .ipsPagination_mini ) .ipsPagination_first a,
10078.ipsPagination:not( .ipsPagination_mini ) .ipsPagination_last a {
10079	background: {hextorgb="link" opacity="0.1"};
10080	color: {theme="link"};
10081	vertical-align: top;
10082}
10083
10084	.ipsPagination:not( .ipsPagination_mini ) .ipsPagination_page a:hover,
10085	.ipsPagination:not( .ipsPagination_mini ) .ipsPagination_next a:hover,
10086	.ipsPagination:not( .ipsPagination_mini ) .ipsPagination_prev a:hover,
10087	.ipsPagination:not( .ipsPagination_mini ) .ipsPagination_first a:hover,
10088	.ipsPagination:not( .ipsPagination_mini ) .ipsPagination_last a:hover{
10089		background: {hextorgb="link" opacity="0.2"};
10090	}
10091
10092	.ipsApp .ipsPagination .ipsPagination_page.ipsPagination_active a {
10093		background: {theme="link"};
10094		color: {theme="area_background_reset"};
10095		border-color: {theme="link"};
10096	}
10097
10098	.ipsPagination .ipsPagination_page a {
10099		text-shadow: none;
10100	}
10101
10102.ipsButtonRow li > a,
10103.ipsButtonRow li > button,
10104.ipsButtonRow li > span {
10105	background: transparent;
10106	color: inherit;
10107}
10108
10109	/* Active */
10110	.ipsButtonRow li > a.ipsButtonRow_active,
10111	.ipsButtonRow li > button.ipsButtonRow_active {
10112		background-color: {theme="button_bar"};
10113		border-color: {theme="button_bar"};
10114		color: {theme="pagination_active"};
10115	}
10116
10117	.ipsAreaBackground_light .ipsButtonRow li > a:not( .ipsButtonRow_active ),
10118	.ipsAreaBackground_light .ipsButtonRow li > button:not( .ipsButtonRow_active ),
10119	.ipsAreaBackground_light .ipsButtonRow li > span:not( .ipsButtonRow_active ) {
10120		background: {hextorgb="text_color" opacity="0.1"};
10121	}
10122
10123
10124
10125/*
10126	----------------
10127	- Bar Pagination
10128	----------------
10129*/
10130
10131/* Pagination bar */
10132.ipsButtonBar{
10133	color: {theme="pagination_active"};
10134	border: 0;
10135	border-radius: 3px;
10136	box-shadow: none;
10137}
10138
10139	/* Inherit border radius when possible */
10140	.ipsBox .ipsButtonBar{
10141		border-radius: 0;
10142	}
10143	
10144	.ipsBox > .ipsButtonBar:first-child,
10145	.ipsBox > .ipsType_sectionTitle.ipsHide + .ipsButtonBar{
10146		border-top-left-radius: inherit;
10147		border-top-right-radius: inherit;
10148	}
10149	
10150	.ipsBox .ipsButtonBar:last-child{
10151		border-bottom-left-radius: inherit;
10152		border-bottom-right-radius: inherit;
10153	}
10154	
10155	.ipsBox .ipsType_sectionTitle:not(.ipsHide) + .ipsButtonBar{
10156		border-radius: 0;
10157	}
10158
10159.ipsApp .ipsButtonBar .ipsPagination .ipsPagination_page a,
10160.ipsApp .ipsButtonBar .ipsPagination .ipsPagination_next a,
10161.ipsApp .ipsButtonBar .ipsPagination .ipsPagination_prev a,
10162.ipsApp .ipsButtonBar .ipsPagination .ipsPagination_first a,
10163.ipsApp .ipsButtonBar .ipsPagination .ipsPagination_last a,
10164.ipsButtonBar .ipsButtonRow li > a,
10165.ipsButtonBar .ipsButtonRow li > button,
10166.ipsButtonBar .ipsButtonRow li > span {
10167	background: {hextorgb="pagination_active" opacity="0.2"};
10168	color: inherit;
10169}
10170
10171.ipsButtonBar .ipsPagination .ipsPagination_pageJump a {
10172	color: inherit;
10173}
10174
10175	.ipsApp .ipsButtonBar .ipsPagination .ipsPagination_page:not(.ipsPagination_active) a:hover,
10176	.ipsApp .ipsButtonBar .ipsPagination .ipsPagination_next a:hover,
10177	.ipsApp .ipsButtonBar .ipsPagination .ipsPagination_prev a:hover,
10178	.ipsApp .ipsButtonBar .ipsPagination .ipsPagination_first a:hover,
10179	.ipsApp .ipsButtonBar .ipsPagination .ipsPagination_last a:hover,
10180	.ipsButtonBar .ipsButtonRow li > a:hover,
10181	.ipsButtonBar .ipsButtonRow li > button:hover,
10182	.ipsButtonBar .ipsButtonRow li > span:hover {
10183		background: {hextorgb="pagination_active" opacity="0.4"};
10184	}
10185
10186/* Active page */
10187.ipsButtonBar .ipsPagination .ipsPagination_page.ipsPagination_active a,
10188.ipsButtonBar .ipsButtonRow li > a.ipsButtonRow_active,
10189.ipsButtonBar .ipsButtonRow li > button.ipsButtonRow_active{
10190	background: {theme="pagination_active"};
10191	border-color: {theme="pagination_active"};
10192	color: {theme="button_bar"};
10193}
10194
10195
10196/* Add spacer between pagination and sort button on mobiles */
10197@media (max-width: 767px){
10198  .ipsPagination + .ipsButtonRow{
10199    margin-top: 3px;
10200  }
10201}
10202
10203
10204/*
10205	----------------
10206	- Mini Pagination
10207	----------------
10208*/
10209
10210.ipsPagination.ipsPagination_mini{
10211	transition: all 0.12s linear;
10212	display: inline-block;
10213}
10214
10215.ipsPagination.ipsPagination_mini a{
10216	color: {theme="pagination_active"};
10217	background: {theme="button_bar"};
10218}
10219
10220	.ipsPagination.ipsPagination_mini a:hover{
10221		background-image: linear-gradient(to bottom, {hextorgb="pagination_active" opacity="0.15"} 0%, {hextorgb="pagination_active" opacity="0.15"} 100%);
10222	}
10223
10224.ipsPagination .ipsPagination_page a{
10225	text-shadow: none;
10226}
10227
10228	.ipsPagination li:not(.ipsPagination_pageJump):not(.ipsPagination_mini) .fa{
10229		font-size: inherit;
10230		top: 0;
10231	}
10232
10233
10234
10235/*
10236	----------------
10237	- Message bar
10238	----------------
10239*/
10240
10241.ipsMessage{
10242	color: #fff;
10243	box-shadow: inset rgba(0,0,0,0.2) 0px 2px 0px 0px, inset rgba(0,0,0,0.2) 0px -2px 0px 0px;
10244	text-shadow: none;
10245	border-radius: 0;
10246}
10247
10248.ipsMessage_error {
10249	background: #b52b38;
10250}
10251
10252.ipsMessage_success {
10253	background: #63aa4e;
10254}
10255
10256.ipsMessage_warning {
10257	background: #ca9751;
10258}
10259
10260.ipsMessage_info,
10261.ipsMessage_information {
10262	background: {theme="area_background_dark"};
10263}
10264
10265.ipsMessage_general {
10266	background: {theme="area_background_dark"};
10267}
10268
10269	.ipsMessage_general a.ipsButton{
10270		background: rgba(255,255,255,0.25);
10271	}
10272
10273.ipsMessage a.ipsUserPhoto{
10274	border: 0;
10275}
10276
10277.ipsApp .ipsMessage a:not(.ipsButton) {
10278	color: currentColor;
10279	border-color: currentColor;
10280}
10281
10282.ipsMessage a.ipsButton:not(.ipsButton_link){
10283	background: none;
10284	color: currentColor;
10285}
10286
10287	.ipsMessage a.ipsButton:not(.ipsButton_link):after{
10288		background: currentColor;
10289		opacity: 0.25;
10290		border-color: transparent;
10291	}
10292	
10293		.ipsMessage a.ipsButton:not(.ipsButton_link):hover:after{
10294			opacity: 0.35;
10295		}
10296
10297	html[dir] .ipsMessage .ipsButton_link{
10298		color: currentColor;
10299	}
10300
10301
10302
10303/*
10304	----------------
10305	- Block Manager
10306	----------------
10307*/
10308
10309/* Manage widgets button */
10310#elWidgetControls{
10311	background: rgba(20,20,20,0.8);
10312	border-color: rgba(0,0,0,0.3);
10313	color: #fff;
10314}
10315
10316	html[dir='ltr'] #elWidgetControls:after{
10317		border-left-width: 0;
10318	}
10319	
10320	html[dir='rtl'] #elWidgetControls:after{
10321		border-right-width: 0;
10322	}
10323
10324#elSidebarManager{
10325	background: rgba(20,20,20,0.85);
10326}
10327
10328	.ipsApp .ipsToolbox .ipsToolbox_sectionTitle{
10329		background: rgba(255,255,255,0.2);
10330		border-radius: 3px;
10331		color: #fff;
10332	}
10333	
10334	.cSidebarManager_block{
10335		background: rgba(255,255,255,0.15);
10336		border-radius: 3px;
10337	}
10338
10339#elSidebarManager .ipsType_light{ color: #eee; }
10340	
10341/* Placeholder */
10342.cWidgetContainer.cWidgetContainer_managing{
10343	background-color: {hextorgb="text_color" opacity="0.15"};
10344}
10345
10346	.cWidgetContainer.cWidgetContainer_managing::before{
10347		border-color: {theme="text_color"};
10348	}
10349	
10350	.cSidebarBlock_managing{
10351		background: {hextorgb="area_background_reset" opacity="0.6"};
10352		border-color: {theme="text_color"};
10353	}
10354	
10355	.cSidebarBlock_managing h4,
10356	.cSidebarBlock_managing [data-action="removeBlock"]{
10357		background: rgba(0,0,0,0.8);
10358	}
10359	
10360	/* On drag */
10361	.cSidebarManager_placeholder{
10362		background: {theme="area_background_dark"};
10363	}
10364
10365
10366
10367/*
10368	----------------
10369	- Focus transparent
10370	----------------
10371*/
10372
10373.focus-transparent .cForumMiniList_wrapper,
10374.focus-transparent .cGalleryCats{
10375	padding: 0;
10376}
10377
10378.focus-transparent .ipsPageHeader,
10379.focus-transparent .cGalleryPatchwork_index,
10380.focus-transparent .cForumRow .ipsPad[data-role="forums"]{
10381	padding-left: 0;
10382	padding-right: 0;
10383}
10384
10385.focus-transparent #elGalleryNav,
10386.focus-transparent.focus-post-bar .cTopic .ipsItemControls{
10387	border-width: 1px;
10388	border-radius: 3px;
10389}
10390
10391@media screen and (min-width: 768px){
10392	
10393	.focus-transparent .focus-answers .cRatingColumn{
10394		border-width: 0px 1px 1px 1px;
10395	}
10396	
10397	html[dir='ltr'].focus-transparent.focus-post-bar .focus-answers .cPostQuestion .ipsItemControls{
10398		border-top-left-radius: 0;
10399		border-bottom-left-radius: 0;
10400		border-left-width: 0;
10401	}
10402	
10403	html[dir='rtl'].focus-transparent.focus-post-bar .focus-answers .cPostQuestion .ipsItemControls{
10404		border-top-right-radius: 0;
10405		border-bottom-right-radius: 0;
10406		border-right-width: 0;
10407	}
10408}
10409
10410.focus-transparent .ipsComment_highlighted:not(.ipsBox_transparent):not(.ipsModerated):not(.ipsComment_selected):not(.ipsComment_popular),
10411.focus-transparent .ipsComment_highlighted.ipsBox:not(.ipsBox_transparent):not(.ipsModerated):not(.ipsComment_selected):not(.ipsComment_popular){
10412	background: transparent;
10413	border: 0;
10414	box-shadow: none;
10415}
10416
10417.focus-transparent .ipsComment.cPost.ipsComment_selected{
10418	box-shadow: none;
10419	border: 0;
10420}
10421
10422
10423
10424/*
10425	----------------
10426	- Wrapped styles
10427	----------------
10428*/
10429
10430/* Force removal of .ipsBox styles if .ipsfocusBox is added */
10431.ipsfocusReset{
10432	box-shadow: none !important;
10433	background: none !important;
10434	border: 0 !important;
10435	border-radius: 0 !important;
10436	padding: 0 !important;
10437}
10438
10439/* If ipsfocusBox exists inside ipsBox, remove all styles */
10440.ipsBox:not(.ipsfocusReset) .ipsfocusBox,
10441.ipsBox:not(.ipsfocusReset) .ipsfocusBox-inner,
10442.ipsBox:not(.ipsfocusReset) .ipsSideMenu{
10443	background: none;
10444	box-shadow: none;
10445	border-radius: 0;
10446	padding: 0;
10447	border: 0;
10448	margin: 0;
10449}
10450
10451
10452
10453/*
10454	----------------
10455	- Wallpaper styles
10456	----------------
10457*/
10458
10459.focus-wallpaper .ipsStreamItem.ipsStreamItem_contentBlock,
10460.focus-wallpaper .ipsStreamItem.ipsStreamItem_actionBlock{
10461	background-clip: padding-box;
10462}
10463
10464.focus-wallpaper .ipsApp #elStreamUpdateMsg{
10465	padding: 0 4px 0 20px;
10466	border-radius: 3px;
10467	margin-right: 10px;
10468	background: {hextorgb="area_background_reset" opacity="0.9"};
10469}
10470
10471	html[dir='rtl'].focus-wallpaper .ipsApp #elStreamUpdateMsg{
10472		padding: 0 20px 0 4px;
10473		margin: 0 0 0 10px;
10474	}
10475
10476.focus-wallpaper .ipsToolList > li > .ipsButton_link,
10477.focus-wallpaper .focus-rating{
10478	background: {hextorgb="area_background_reset" opacity="0.75"};
10479	-webkit-backdrop-filter: blur(8px);
10480	backdrop-filter: blur(8px);
10481}
10482
10483.focus-wallpaper .focus-rating,
10484.focus-wallpaper .ipsToolList > li > .ipsButton_link{
10485	color: {theme="text_color"};
10486}
10487
10488.focus-wallpaper .focus-rating{
10489	border-radius: 3px;
10490	padding: 5px 10px;
10491}
10492
10493
10494/*
10495	----------------
10496	- Meta editor
10497	----------------
10498*/
10499
10500.ipsApp .ipsToolbox input, .ipsApp .ipsToolbox select, .ipsApp .ipsToolbox textarea{
10501    background-color: rgba(0,0,0,0.6);
10502    border-color: rgba(0,0,0,0.6);
10503    box-shadow: none;
10504    color: #fff;
10505}
10506
10507    .ipsApp .ipsToolbox select{
10508        background-position: right center;
10509        background-size: 18px 9px, 100% 100%;
10510        background-repeat: no-repeat, repeat;
10511    }
10512
10513
10514/*
10515	----------------
10516	- ipsBox_alt bug fixes
10517	----------------
10518*/
10519
10520.cLogin_single .ipsBox{
10521	background: none !important;
10522	box-shadow: none;
10523	border: 0;
10524	border-radius: 0;
10525}
10526
10527
10528
10529/*
10530	----------------
10531	- Reduce z-index
10532	- Everything should be less than 10
10533	----------------
10534*/
10535
10536.ipsNavBar_primary{
10537	z-index: 10;
10538}
10539
10540.ipsComment.ipsComment_popular .ipsComment_popularFlag,
10541.ipsReact{
10542	z-index: 5;
10543}
10544
10545div[data-controller="core.front.streams.form"] {
10546	z-index: 3;
10547}
10548
10549.ipsPagination .ipsPagination_pageJump,
10550header[data-role="profileHeader"],
10551.cClubCard_status,
10552#elEditProfile,
10553#elProfileHeader .ipsUserPhoto,
10554.ipsStream .ipsStreamItem_contentType,
10555.ipsStream_withTimeline .ipsStreamItem.ipsStreamItem_contentBlock:before{
10556	z-index: 1;
10557}
10558
10559.ipsStream_withTimeline .ipsStreamItem::after{
10560	z-index: 2;
10561}
10562
10563
10564/*
10565	----------------
10566	- Bug Fixes
10567	----------------
10568*/
10569
10570/* Fix subscription widget */
10571/* Fix Application Forms form */
10572/* Fix VideoBox rating alignment */
10573/* Fix Random Products widget */
10574.ipsWidget[data-blockid^="app_nexus_subscriptions_"] .ipsDataItem,
10575body[data-pageapp="applicationform"] .ipsType_sectionHead + .ipsDataItem,
10576.videoboxGridview .ipsDataItem,
10577.ipsWidget_vertical[data-blockid*="_randomProducts_"] .ipsDataItem{
10578	display: block;
10579}
10580
10581/* Stop post buttons and reactions from wrapping on tablets or above. Happens when numerous people react to a post. */
10582@media (min-width: 768px){
10583	.ipsItemControls{
10584		flex-wrap: nowrap;
10585	}
10586	.ipsItemControls_left,
10587	.ipsReact_reactions{
10588		flex: 0 0 auto;
10589	}
10590}
10591
10592/* Fix 3rd party addon: Grouped profile fields */
10593.ipsMenu[id^="elPFDrop_"]{
10594	width: 300px;
10595}
10596
10597	.ipsMenu[id^="elPFDrop_"] .ipsDataItem{
10598		width: 100%;
10599		display: block;
10600	}
10601
10602/* Prevent text from touching the sides of browser windows in the Guest terms */
10603#elGuestTerms{
10604	padding: 15px;
10605}
10606
10607/* Make Pages Supergrid compatible with css grid */
10608@supports (display:grid){
10609
10610	.ipsApp .SG_wrapper,
10611	.ipsApp .SG_category_container{
10612		padding-bottom: 15px;
10613	}
10614  
10615  	@media (min-width: 768px){
10616  		.ipsGrid .SG_record_left {
10617			margin-top: 15px !important;
10618		}
10619	  	.ipsGrid .SG_record_right_with_image{
10620			margin-top: -50px !important;
10621		}
10622	}
10623	
10624}
10625
10626/* Add padding to settings page */
10627#elSettingsTabs{
10628	padding: 10px;
10629}
10630
10631/* Forum stats box - fix collapsed margin */
10632.ipsWidget[data-blockid*="app_forums_forumStatistics"] .ipsWidget_inner{
10633	padding-bottom: 1px;
10634}
10635
10636/* Restrict size of group icon */
10637.cProfileSidebarBlock img{ max-width: 100%; }
10638/* .. but don't apply to profile photos */
10639.cProfileSidebarBlock .ipsUserPhoto img{ max-width: none; }
10640
10641
10642/* Make sure Calendar dropdown menu appears over backdrop-filter content */
10643@supports ( (-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px)) ) {
10644	#elCalendarsHeader{ z-index: 1; }
10645}
10646
10647/* RTL alignment for license key close button */
10648html[dir='rtl'] #elLicenseKey [data-role="closeMessage"]{
10649	right: auto; left: 15px;
10650}
10651
10652/* Make line-height consistent with buttons */
10653.ipsApp #elStreamUpdateMsg{
10654	line-height: 22px;
10655}
10656
10657/* Align activity stream dots */
10658html[dir="ltr"] .ipsStream_withTimeline .ipsStreamItem.ipsStreamItem_actionBlock:after{ left: -37px; }
10659html[dir="rtl"] .ipsStream_withTimeline .ipsStreamItem.ipsStreamItem_actionBlock:after{ right: -37px; }
10660
10661/* Make .ipsType_light inherit button color */
10662.ipsButton .ipsType_light{
10663	color: inherit;
10664	opacity: 0.7;
10665}
10666
10667/* Increase padding on Members widget so it matches ipsPad */
10668.ipsWidget_horizontal[data-blockid^="app_core_members_"] .ipsPad_half{
10669	padding: 15px;
10670}
10671
10672	@media screen and (max-width: 767px){
10673		.ipsWidget_horizontal[data-blockid^="app_core_members_"] .ipsPad_half{
10674			padding: 7px;
10675		}
10676	}
10677
10678/* Recaptcha input */
10679.ipsApp .recaptchatable *{
10680	color: {theme="text_color"};
10681}
10682
10683/* Remove box-shadow from page widget */
10684/*
10685.ipsWidget.ipsWidget_horizontal[data-blockid^="app_cms"]{
10686	box-shadow: none;
10687} */
10688
10689/* Nexus index: Space apart consecutive .ipsBox's */
10690section.ipsSpacer_top .ipsBox + .ipsBox{
10691	margin-top: 15px;
10692}
10693
10694/* Re-colour close button for mobile navigation */
10695.ipsDrawer_close{
10696	background: {theme="area_background_dark"};
10697}
10698	.ipsDrawer_close:hover{
10699		color: #fff;
10700	}
10701
10702/* Fix alignment of scroll-to-post */
10703a[id^="comment-"] {
10704    position: relative;
10705    display: block;
10706    height: 0;
10707}
10708
10709/* Fix collapsed opacity */
10710.cForumRow_hidden{
10711	opacity: 0.5;
10712}
10713	.cForumRow_hidden .cForumTitle{
10714		opacity: 1;
10715	}
10716
10717/* Neatly space header and footer widget boxes */
10718.cWidgetContainer[data-widgetArea="header"]{
10719	margin: 0;
10720}
10721
10722	.cWidgetContainer[data-widgetArea="header"] .ipsWidget{
10723		margin-bottom: 15px;
10724	}
10725	
10726	/* Increase spacing between widgets to match column spacing */
10727	.cWidgetContainer[data-widgetArea="footer"],
10728	.ipsWidget.ipsWidget_horizontal:not(.ipsWidgetHide) + .ipsWidget{
10729		margin-top: 15px;
10730	}
10731
10732/* Fix Android scroll bar on notifications list */
10733@media screen and (max-width: 767px){
10734	#elFullNotifications_menu{ box-shadow: none; }
10735}
10736
10737/* Remove border from theme selection */
10738#elNavTheme_menu .ipsButton_link,
10739#elNavLang_menu .ipsButton_link{
10740	border: 0;
10741	border-radius: 0;
10742}
10743
10744	#elNavTheme_menu .ipsMenu_item:hover,
10745	#elNavLang_menu .ipsMenu_item:hover{
10746		background: {hextorgb="link_button" opacity="0.1"};
10747	}
10748
10749/* Correctly align ipsPager */
10750.ipsPager .ipsPager_noDesc .ipsPager_type{
10751	margin-top: 0;
10752}
10753.ipsPager .ipsPager_next a::after,
10754.ipsPager .ipsPager_prev a::after{
10755	line-height: 1;
10756	top: 0;
10757	bottom: 0;
10758	display: flex;
10759	align-items: center;
10760	transform: translateY(-6%);
10761}
10762
10763/* Force mentions to have white text in all areas like widgets or signatures */
10764a[data-mentionid]{ color: #fff !important; }
10765
10766/* Remove transitions */
10767.ipsComment_controls .ipsButton,
10768.cForumTitle,
10769.ipsBreadcrumb,
10770.ipsItemStatus.ipsItemStatus_large{
10771	transition: none;
10772}
10773
10774/* Align the latest user on mobiles */
10775@media screen and (max-width:767px){
10776	.ipsWidget_horizontal[data-blockid*="app_core_stats"] .cNewestMember{
10777		border: 0 !important;
10778	}
10779	.ipsWidget_horizontal[data-blockid*="app_core_stats"] .ipsType_center{
10780		text-align: left;
10781		padding-left: 15px;
10782		padding-right: 15px;
10783	}
10784}
10785
10786/* Remove margins on ipsPageHeader children, due to padding on parent element */
10787.ipsPageHeader .ipsSpacer_bottom:last-child{
10788	margin: 0;
10789}
10790
10791/* Align labels on Advanced search page */
10792.ipsApp label:not(.ipsField_unlimited){
10793	vertical-align: top;
10794}
10795
10796/* Make inputs inherit font */
10797.ipsApp label:not(.ipsField_unlimited), .ipsApp input, .ipsApp button, .ipsApp select, .ipsApp textarea{
10798	font-family: inherit;
10799}
10800
10801/* Profile leaderboard win */
10802.cProfileSidebarBlock[class*='ipsLeaderboard_trophy'] a{
10803	color: inherit !important;
10804}
10805
10806/* Space apart consecutive select boxes, eg. in the date picker */
10807.ipsApp select + select{
10808  margin-left: 3px;
10809}
10810
10811/* css checkboxes */
10812.ipsCustomInput{
10813	vertical-align: middle;
10814}
10815	.ipsCustomInput input{
10816		position: absolute;
10817		top: 0; left: 0;
10818		width: 100%; height: 100%;
10819	}
10820	
10821	.ipsField_fieldList .ipsCustomInput input[type="radio"],
10822	.ipsField_fieldList .ipsCustomInput input[type="checkbox"]{
10823		float: none;
10824		margin: 0;
10825	}
10826
10827/* Fix no thumbs in Inset Existing Attachment list */
10828.ipsImageAttach_thumb .ipsNoThumb{
10829	height: 150px;
10830	width: auto;
10831}
10832
10833.ipsAttachment_fileList .ipsNoThumb:after{
10834	line-height: 150px;
10835	top: 0;
10836	margin-top: 0;
10837}
10838
10839/* Make sure backgrounds are removed from embedded items */
10840body[data-role="externalEmbed"],
10841body[data-role="internalEmbed"]{
10842	background: none !important;
10843  	padding: 0 !important;
10844}
10845
10846/* Support the recent topics hook */
10847#recentTopicsWrapper .ipsDataItem:not(.ipsDataItem_unread) .ipsDataItem_title a{ font-weight: normal; }
10848
10849/* Fix hard-coded color of empty class */
10850.ipsEmpty{ color: {theme="text_light"}; }
10851
10852/* Long titles break in calendar widget */
10853.ipsWidget[data-blockid*="app_calendar_recentReviews"] .ipsTruncate.ipsTruncate_line{ white-space: normal; }
10854
10855/* Revert mood widget to block */
10856.mood-profile .ipsDataItem{
10857  display: block;
10858}
10859
10860  /* .. and reassign its padding */
10861  .mood-profile .ipsDataList .ipsDataItem{
10862    padding: 10px 0px;
10863  }
10864
10865/* Remove margin from Update warning since it shows even if it contains no content */
10866.precontent-blocks .cNotificationList{ margin: 0; }
10867.cNotificationList > *{ margin-bottom: 10px; }
10868
10869/* 4.4 theme by ipsfocus.com */
10870:root{
10871	--ipsfocus-version: '4.4.1';
10872	--ipsfocus-date: 'March 7, 2019';
10873}