J7kyEYra

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