<?xml version="1.0" encoding="UTF-8"?>

-<style title="illuminate dark" export_version="2" base_version_id="2010170" user_selectable="1" description="https://xenfocus.com/styles/illuminate_dark/">


-<templates>


-<template title="PAGE_CONTAINER" version_string="2.1.1" version_id="2010170" addon_id="XF" type="public">

+<![CDATA[]]>
</template>


-<template title="extra.less" version_string="2.0.12" version_id="2001270" addon_id="XF" type="public">

-<![CDATA[{{ include('xenfocus_base.less') }}
{{ include('xenfocus_theme.less') }}

// Place your custom code below]]>
</template>


-<template title="xenfocus_base.less" version_string="" version_id="0" addon_id="" type="public">

-<![CDATA[/*
	----------------
	
	xenfocus styles
	
	----------------
*/

/*

	Global
	Flexbox
	Header
	Logo
	Navigation
	User links
	Search bar
	xenfocus Editor
	Breadcrumbs
	Social icons
	Background picker
	Content wrapper
	Nodes
	Node icons
	Node NEW badge
	Guest message
	Footer
	Mega footer
	Grid layout for nodes
	Blocks
	Topic List
	Topic View
	Profiles
	Sidebar
	Sticky Sidebar
	Animated snow
	Holidays
	Animated blocks onload
	Pagination
	Mobile footer bar
	Post thread pop up
	Other
	Bug fixes

*/

// Body
@focus-wallpaper: true;
@body-padding-top: 0px;
@body-padding-bottom: 0px;
//@focus-fluid-width: 96;
@focus-fluid-margin: 100px;

// Content width
@focus-width: ~"calc(100vw - (@xf-pageEdgeSpacer * 2))";
@content-padding: 15px;


// Header
<xf:if is="property('publicHeader--background-color')">
	@header-padding: 20px;
<xf:else />
	@header-padding: 0px;
</xf:if>
@p-header-content--max-width: ~"calc(100vw - 30px)";



// Logo
@logo-image-height: @xf-xenfocus_logoHeight*1px;
@logo-reduce-image-height-by: 0px;

@mobile-logo-image-height: @xf-xenfocus_logoHeightMobile*1px;
@mobile-logo-reduce-image-height-by: 0px;
@focus-logo-image--margin: 20px;
@logo-slogan-opacity: 0.75;
@logo-slogan-size: 0.5em;
@logo-slogan-margin: 0.7em;
@focus-mobile-logo-color: contrast(@xf-publicNav--background-color, xf-intensify(@xf-publicNav--color, 30%), xf-diminish(@xf-publicNav--color, 20%));



// Navigation
@nav-icon-size: 14px;

// Dropdown menus
@focus-dropdown-nav: true;

// Navigation scrollers
@navigation-arrow-size: 20px;
@navigation-arrow-color: @xf-publicNavTab--color;
@navigation-arrow-gradient: @xf-publicNav--background-color;



// User links
<xf:if is="property('xenfocus_userStyles--background-color')">
	@user-hover: fade(darken(@xf-xenfocus_userStyles--background-color, 30%), 15%);
<xf:elseif is="property('xenfocus_userStyles--color')" />
	@user-hover: fade(@xf-xenfocus_userStyles--color, 10%);
<xf:else />
	@user-hover: rgba(255,255,255,0.1);
</xf:if>

<xf:if is="property('xenfocus_userStyles--border-color')">
	@user-border-color: @xf-xenfocus_userStyles--border-color;
<xf:elseif is="property('xenfocus_userStyles--color')" />
	@user-border-color: fade(@xf-xenfocus_userStyles--color, 15%);
<xf:else />
	@user-border-color: transparent;
</xf:if>

@user-border-width: <xf:if is="property('xenfocus_userStyles--border-width')">@xf-xenfocus_userStyles--border-width<xf:else />0px</xf:if>;
@user-border-radius: <xf:if is="property('xenfocus_userStyles--border-radius')">@xf-xenfocus_userStyles--border-radius<xf:else />0px</xf:if>;

@user-links-sep: 1px;
//@user-links-color-mobile: @xf-publicNav--color;
@user-links-radius-mobile: 4px;
@remove-userlink-text: false;
@register-offset-v: <xf:if is="property('xenfocus_userStyles--background-color')">3px<xf:else />0px</xf:if>;
@register-offset-h: <xf:if is="property('xenfocus_userSep')">3px<xf:else />0px</xf:if>;
@user-links-icon: 14px;



// Search
@search-width: xf-default(@xf-xenfocus_searchWidth, 240)*1px;
@search-height: xf-default(@xf-xenfocus_searchHeight, 34)*1px;
@search-background-color: xf-default(@xf-xenfocus_searchStyles--background-color, transparent);
@search-background-image: xf-default(@xf-xenfocus_searchStyles--background-image, none);
@search-color: xf-default(@xf-xenfocus_searchStyles--color, inherit);
@search-border: xf-default(@xf-xenfocus_searchStyles--border-width, 0px) solid xf-default(@xf-xenfocus_searchStyles--border-color, transparent);
@search-border-left: xf-default(@xf-xenfocus_searchStyles--border-width, 0px);
@search-border-right: xf-default(@xf-xenfocus_searchStyles--border-width, 0px);
@search-radius: xf-default(@xf-xenfocus_searchStyles--border-radius, 0);
@focus-search-arrow: 7px;
@focus-search-dropdown: @xf-contentBg;
<xf:if is="property('styleType') == 'light'">
	@focus-search-dropdown-border: rgba(0,0,0,0.1);
<xf:else />
	@focus-search-dropdown-border: rgba(255,255,255,0.1);
</xf:if>



// Mobile navigation menu
@mobile-navigation-bar--background: @xf-publicNav--background-color;
@mobile-navigation-bar--color: @xf-publicNav--color;
<xf:if is="property('styleType') == 'light'">
	@mobile-navigation-background: @xf-paletteColor5;
	@mobile-navigation-color: @xf-paletteColor1;
<xf:else />
	@mobile-navigation-background: @xf-paletteColor2;
	@mobile-navigation-color: @xf-paletteColor5;
</xf:if>
@mobile-sticky-top: 0px;



// Breadcrumb
@focus-breadcrumbs: true;
@focus-breadcrumbs-mobile: true;
@breadcrumb-height: xf-default(@xf-xenfocus_breadcrumbHeight, 38)*1px;
@breadcrumb-border-width: <xf:if is="property('xenfocus_breadcrumb--border-color')">1px<xf:else />0px</xf:if>;
@breadcrumb-border-color: xf-default(@xf-xenfocus_breadcrumb--border-color, transparent);
@breadcrumb-color: xf-default(@xf-xenfocus_breadcrumb--color, transparent);
@breadcrumb-background-hex: xf-default(@xf-xenfocus_breadcrumb--background-color, transparent);
@breadcrumb-background-image: xf-default(@xf-xenfocus_breadcrumb--background-image, none);
@breadcrumb-radius: xf-default(@xf-xenfocus_breadcrumb--border-radius, 0px);

@breadcrumb-highlight: <xf:if is="property('xenfocus_breadcrumbHover--background-color')">fadein(@xf-xenfocus_breadcrumbHover--background-color, 30%)<xf:else />rgba(255,255,255,0.5)</xf:if>;
@breadcrumb-shadow: <xf:if is="property('xenfocus_breadcrumb--background-color')">fade(darken(@xf-xenfocus_breadcrumb--background-color, 20%), 80%)<xf:else />rgba(0,0,0,0.2)</xf:if>;
@breadcrumb-hover: xf-default(@xf-xenfocus_breadcrumbHover--background-color, rgba(255,255,255,0.3));
@breadcrumb-active: <xf:if is="property('xenfocus_breadcrumb--background-color')">fade(darken(@xf-xenfocus_breadcrumb--background-color, 20%), 15%)<xf:else />rgba(0,0,0,0.05)</xf:if>;



// Social icons
@social-border: 1px;
@social-height: @breadcrumb-height;
@social-footer-basic: true;



// Blocks
// Move the block wrap from the container to the body
@block-container-shift: false;
@block-container: ~'.block-container, .block--messages .message';
@block-header: ~'.block-header';
@block-body: ~'.block-body';
@block-minor-header: ~'#XF .block-minorHeader';
// When a wallpaper design is used, these blocks will be wrapped with the normal block styles
@focus-wallpaper-elements: ~'.p-body-header';
@sticky-top: @xf-xenfocus_navHeight;




// NEW badge
@new-badge-color: #fff;
@new-badge-background: #ed7a16;



// Nodes
@node-icon-read-filter: grayscale(1);
@node-icon-read-opacity: 0.4;
@node-extra-padding: 4px;
@node-grid-padding: 15px;
@node-bold-title: true;
@subforum-grid: true;
@node-alt-stats: true;
@node-zebra: true;
@node-zebra-color: xf-intensify(@xf-contentBg, 2%);
@subforum-width: 150px;
@subforum-icon: '\f0fe';
@grid-node-width: 380px;
@grid-node-gap: 5px;
@grid-node-wrapper: @xf-contentAltBg;
@grid-hover-inset: 0px;
@hide-node-statsMeta-mobile: true;
// Assign a background and border to grid wrapper?
<xf:if is="property('xenfocus_wrapperStyles--background-color')">
	@reset-grid-wrapper:true;
<xf:else />
	@reset-grid-wrapper:false;
</xf:if>



// Sidebar
@focus-sidebar-icons: true;
@minorHeader-icon: '\f141';


// Topic view
@focus-post-buttons: true;
@editor-bg: xf-intensify(@xf-contentBg, 1.5%);
@editor-text: @xf-textColor;
// This resets coloured reaction text to inherit when button style is enabled
<xf:if is="property('xenfocus_postButton') == 'button'">
	@reset-reaction-text: true;
<xf:else />
	@reset-reaction-text: false;
</xf:if>
@post-meta-opacity: 0.4;



// Footer
@mega-footer-copyright: darken(@xf-publicFooter--background-color, 5%);



// Pagination
@focus-pagination: true;
@pagination-radius: @xf-buttonBase--border-radius;
@pagination-active: @xf-paletteColor4;
@pagination-minor: @xf-textColorMuted;
@pagination-gap: 5px;
<xf:if is="property('styleType') == 'light'">
@pagination-page: @xf-contentBg;
@pagination-shadow: rgba(0,0,0,0.12) 0px 1px 1px, rgba(0,0,0,0.05) 0px 1px 2px;
@pagination-shadow-active: inset rgba(0,0,0,0.2) 0px 1px 3px;
<xf:else />
@pagination-page: lighten(@xf-contentBg, 3.5%);
@pagination-shadow: inset rgba(255,255,255,0.1) 0px 1px 0px;
@pagination-shadow-active: @pagination-shadow;
</xf:if>
@pagination-page-hover: lighten(@pagination-page, 3%);


// Inputs
@input--placeholder: 0.4;
@input--placeholder-active: 0.5;



/*
	----------------
	- Translate
	----------------
*/

[data-focus-text]::after{ content: attr(data-focus-text); }

.node--unread .node-title::before{
	content: "NEW"
}

.focus-editor-wrap{
	content: "Theme Editor"
}

.focus-guest .focus-guest-header::before{
	content: "Welcome to "
}

.structItemContainer-group--sticky::before{
	content: "Sticky threads"
}
.structItemContainer-group--sticky::after{
	content: "Regular threads"
}

// German
<xf:if is="$xf.language.language_code === 'de-DE'">

	.node--unread .node-title::before{
		content: "NEU"
	}

	.focus-editor-wrap{
		content: "Themeneditor"
	}

	.focus-guest .focus-guest-header::before{
		content: "Willkommen auf "
	}

	.structItemContainer-group--sticky::before{
		content: "Wichtige Themen"
	}
	.structItemContainer-group--sticky::after{
		content: "Normale Themen"
	}

	[data-focus-text="Background Picker"]::after{
		content: "Hintergrundauswahl"
	}

	[data-focus-text="Customize layout"]::after{
		content: "Layout anpassen"
	}

	[data-focus-text="Save"]::after{
		content: "Speichern"
	}

	[data-focus-text="Choose color"]::after{
		content: "Wahle eine Farbe"
	}

	[data-setting="focus-fluid"] .focus-editor-text{
		&::before{	content: "Flexible Breite?" }
		&::after{	content: "Wenn Sie dies aktivieren, wird die Breite der Website angepasst, sodass sie die Breite Ihres Browsers einnimmt. N&#252;tzlich f&#252;r gr&#246;&#223;ere Bildschirme." }
	}

	[data-setting="focus-grid"] .focus-editor-text{
		&::before{	content: "Gitterstruktur?" }
		&::after{	content: "Wenn diese Option aktiviert ist, werden die Foren als Gitteransicht anstelle einer Listenansicht angezeigt." }
	}

	[data-setting="focus-sidebar-sticky"] .focus-editor-text{
		&::before{	content: "Fixierte Seitenleiste?" }
		&::after{	content: "Wenn diese Option aktiviert ist, bewegt sich die Seitenleiste mit dem Seitenlauf mit." }
	}

	[data-setting="focus-sidebar-flip"] .focus-editor-text{
		&::before{	content: "Position Seitenleiste wechseln?" }
		&::after{	content: "Wechselt die Position der Seitenleiste zwischen den links und rechts." }
	}

	[data-setting="focus-dimension-parallax"] .focus-editor-text{
		&::before{	content: "Parallaxeffekt aktivieren?" }
		&::after{	content: "Wenn aktiviert, wird ein Parallax-Effekt auf den Header angewendet." }
	}

	[data-setting="focus-aperture-background"] .focus-editor-text{
		&::before{	content: "Parallaxe Hintergrund?" }
		&::after{	content: "Wenn aktiviert, wird das Hintergrundbild animiert und verwischt, wenn die Seite gescrollt wird." }
	}

	.focus-timer [data-countdown-text="week,"]::before{
		content: "woche,";
	}

	.focus-timer [data-countdown-text="weeks,"]::before{
		content: "wochen,";
	}

	.focus-timer [data-countdown-text="days and"]::before{
		content: "tage und";
	}

	.focus-timer [data-countdown-text="day and"]::before{
		content: "tag und";
	}

</xf:if>


// French
<xf:if is="$xf.language.language_code === 'fr-FR'">
	.node--unread .node-title::before{
        content: "NOUVEAU"
    }

    .focus-editor-wrap{
        content: "&#201;diteur de th&#232;me"
    }

    .focus-guest .focus-guest-header::before{
        content: "Bienvenue &#224; "
    }

    .structItemContainer-group--sticky::before{
        content: "Sujets importants"
    }
    .structItemContainer-group--sticky::after{
        content: "Sujets normaux"
    }

    [data-focus-text="Background Picker"]::after{
        content: "S&#233;lecteur de fond"
    }

    [data-focus-text="Customize layout"]::after{
        content: "Personnaliser la mise en page"
    }

    [data-focus-text="Save"]::after{
        content: "Sauvegarder"
    }

    [data-focus-text="Choose color"]::after{
        content: "Choisissez la couleur"
    }

    [data-setting="focus-fluid"] .focus-editor-text{
        &::before{    content: "Largeur du fluide ?" }
        &::after{    content: "Activer cette option augmentera la largeur du site afin qu'il occupe la largeur de votre navigateur. Utile pour les grands &#233;crans." }
    }

    [data-setting="focus-grid"] .focus-editor-text{
        &::before{    content: "Disposition de la grille ?" }
        &::after{    content: "Si activ&#233;, les forums seront affich&#233;s sous forme de grille au lieu d'un tableau." }
    }

    [data-setting="focus-sidebar-sticky"] .focus-editor-text{
        &::before{    content: "Barre lat&#233;rale collante ?" }
        &::after{    content: "Si activ&#233;, la barre lat&#233;rale restera en haut de l'&#233;cran pour un acc&#232;s facile." }
    }

    [data-setting="focus-sidebar-flip"] .focus-editor-text{
        &::before{    content: "Basculer la barre lat&#233;rale ?" }
        &::after{    content: "Basculez la barre lat&#233;rale entre les c&#244;t&#233;s gauche et droit." }
    }

    [data-setting="focus-snow"] .focus-editor-text{
        &::before{    content: "Activer l'effet de neige ?" }
        &::after{    content: "Si activ&#233;, la neige anim&#233;e tombera sur votre navigateur." }
    }

    [data-setting="focus-confetti"] .focus-editor-text{
        &::before{    content: "Activer les confettis ?" }
        &::after{    content: "Si activ&#233;, les confettis anim&#233;s tomberont sur votre navigateur." }
    }

    [data-setting="focus-countdown"] .focus-editor-text{
        &::before{    content: "Afficher le compte &#224; rebours ?" }
        &::after{    content: "Si activ&#233;, un compte &#224; rebours sera visible en haut de votre page." }
    }

    [data-setting="focus-dimension-parallax"] .focus-editor-text{
        &::before{    content: "Activer l'effet de parallaxe ?" }
        &::after{    content: "Si activ&#233;, un effet de parallaxe sera appliqu&#233; &#224; l'en-t&#234;te." }
    }

    [data-setting="focus-aperture-background"] .focus-editor-text{
        &::before{    content: "Fond de parallaxe ?" }
        &::after{    content: "Si activ&#233;, l'image d'arri&#232;re-plan s'anime et s'estompe lorsque la page d&#233;file." }
    }

    .focus-timer [data-countdown-text="week,"]::before{
        content: "semaine,";
    }

    .focus-timer [data-countdown-text="weeks,"]::before{
        content: "semaines,";
    }

    .focus-timer [data-countdown-text="days and"]::before{
        content: "jours et";
    }

    .focus-timer [data-countdown-text="day and"]::before{
        content: "jour et";
    }
</xf:if>

// Spanish
<xf:if is="$xf.language.language_code === 'es-ES'">
	.node--unread .node-title::before{
        content: "RECIENTE"
    }

    .focus-editor-wrap{
        content: "Editor de temas"
    }

    .focus-guest .focus-guest-header::before{
        content: "Bienvenido a "
    }

    .structItemContainer-group--sticky::before{
        content: "Hilos Pegajosos"
    }
    .structItemContainer-group--sticky::after{
        content: "Hilos Normales"
    }

    [data-focus-text="Background Picker"]::after{
        content: "Selector de fondo"
    }

    [data-focus-text="Customize layout"]::after{
        content: "Personalizar dise&#241;o"
    }

    [data-focus-text="Save"]::after{
        content: "Salvar"
    }

    [data-focus-text="Choose color"]::after{
        content: "Elegir color"
    }

    [data-setting="focus-fluid"] .focus-editor-text{
        &::before{    content: "&#191;Ancho de fluido?" }
        &::after{    content: "Habilitar esto aumentar&#225; el ancho del sitio para que ocupe el ancho de su navegador. &#218;til para pantallas m&#225;s grandes." }
    }

    [data-setting="focus-grid"] .focus-editor-text{
        &::before{    content: "&#191;Dise&#241;o de cuadr&#237;cula?" }
        &::after{    content: "Si est&#225; habilitado, los foros se mostrar&#225;n como una cuadr&#237;cula en lugar de una tabla." }
    }

    [data-setting="focus-sidebar-sticky"] .focus-editor-text{
        &::before{    content: "Barra lateral pegajosa?" }
        &::after{    content: "Si est&#225; habilitado, la barra lateral se pegar&#225; a la parte superior de la pantalla para facilitar el acceso." }
    }

    [data-setting="focus-dimension-parallax"] .focus-editor-text{
        &::before{    content: "&#191;Habilitar el efecto de paralaje?" }
        &::after{    content: "Si est&#225; habilitado, se aplicar&#225; un efecto de paralaje al encabezado." }
    }

    [data-setting="focus-sidebar-flip"] .focus-editor-text{
        &::before{    content: "Voltear la barra lateral?" }
        &::after{    content: "Gira la barra lateral entre los lados izquierdo y derecho." }
    }

    [data-setting="focus-snow"] .focus-editor-text{
        &::before{    content: "&#191;Habilitar efecto de nieve?" }
        &::after{    content: "Si est&#225; habilitado, la nieve animada caer&#225; en tu navegador." }
    }

    [data-setting="focus-confetti"] .focus-editor-text{
        &::before{    content: "Habilitar confeti?" }
        &::after{    content: "Si est&#225; habilitado, el confeti animado caer&#225; en tu navegador." }
    }

    [data-setting="focus-countdown"] .focus-editor-text{
        &::before{    content: "Mostrar cuenta regresiva?" }
        &::after{    content: "Si est&#225; habilitado, aparecer&#225; una cuenta regresiva en la parte superior de la p&#225;gina." }
    }

    [data-setting="focus-aperture-background"] .focus-editor-text{
        &::before{    content: "Fondo de paralaje?" }
        &::after{    content: "Si est&#225; habilitada, la imagen de fondo se animar&#225; y se desenfocar&#225; cuando la p&#225;gina se desplace." }
    }

    .focus-timer [data-countdown-text="week,"]::before{
        content: "semana,";
    }

    .focus-timer [data-countdown-text="weeks,"]::before{
        content: "semanas,";
    }

    .focus-timer [data-countdown-text="days and"]::before{
        content: "d&#237;as y";
    }

    .focus-timer [data-countdown-text="day and"]::before{
        content: "d&#237;a y";
    }

</xf:if>

// Italian
<xf:if is="$xf.language.language_code === 'it-IT' OR $xf.language.language_code === 'it'">
	.node--unread .node-title::before{
        content: "NUOVO"
    }

    .focus-editor-wrap{
        content: "Editor di temi"
    }

    .focus-guest .focus-guest-header::before{
        content: "Benvenuto a "
    }

    .structItemContainer-group--sticky::before{
        content: "Fili appiccicosi"
    }
    .structItemContainer-group--sticky::after{
        content: "Discussioni normali"
    }

    [data-focus-text="Background Picker"]::after{
        content: "Selezione sfondo"
    }

    [data-focus-text="Customize layout"]::after{
        content: "Personalizza il layout"
    }

    [data-focus-text="Save"]::after{
        content: "Salvare"
    }

    [data-focus-text="Choose color"]::after{
        content: "Scegli il colore"
    }

    [data-setting="focus-fluid"] .focus-editor-text{
        &::before{    content: "Larghezza del fluido?" }
        &::after{    content: "Abilitare questo aumenter&#224; la larghezza del sito in modo che occupi la larghezza del tuo browser. Utile per schermi pi&#249; grandi." }
    }

    [data-setting="focus-grid"] .focus-editor-text{
        &::before{    content: "Layout della griglia?" }
        &::after{    content: "Se abilitato, i forum verranno visualizzati come una griglia invece di una tabella." }
    }

    [data-setting="focus-sidebar-sticky"] .focus-editor-text{
        &::before{    content: "Barra laterale appiccicosa?" }
        &::after{    content: "Se abilitato, la barra laterale rester&#224; nella parte superiore dello schermo per un facile accesso." }
    }

    [data-setting="focus-sidebar-flip"] .focus-editor-text{
        &::before{    content: "Flip sidebar?" }
        &::after{    content: "Capovolgi la barra laterale tra i lati sinistro e destro." }
    }

    [data-setting="focus-snow"] .focus-editor-text{
        &::before{    content: "Abilitare l'effetto neve?" }
        &::after{    content: "Se abilitato, la neve animata cadr&#224; nel tuo browser." }
    }

    [data-setting="focus-confetti"] .focus-editor-text{
        &::before{    content: "Abilita i coriandoli?" }
        &::after{    content: "Se abilitato, i coriandoli animati cadranno sul tuo browser." }
    }

    [data-setting="focus-countdown"] .focus-editor-text{
        &::before{    content: "Mostra il conto alla rovescia?" }
        &::after{    content: "Se abilitato, un conto alla rovescia sar&#224; visibile nella parte superiore della pagina." }
    }

    [data-setting="focus-dimension-parallax"] .focus-editor-text{
        &::before{    content: "Abilita l'effetto di parallasse?" }
        &::after{    content: "Se abilitato, all'intestazione verr&#224; applicato un effetto di parallasse." }
    }

    [data-setting="focus-aperture-background"] .focus-editor-text{
        &::before{    content: "Sfondo parallasse?" }
        &::after{    content: "Se abilitato, l'immagine di sfondo si animer&#224; e verr&#224; sfocata quando si scorre la pagina." }
    }

    .focus-timer [data-countdown-text="week,"]::before{
        content: "settimana,";
    }

    .focus-timer [data-countdown-text="weeks,"]::before{
        content: "settimane,";
    }

    .focus-timer [data-countdown-text="days and"]::before{
        content: "giorni e";
    }

    .focus-timer [data-countdown-text="day and"]::before{
        content: "giorno e";
    }

</xf:if>

// Turkish
<xf:if is="$xf.language.language_code === 'tr-TR'">
	.node--unread .node-title::before{
        content: "YEN&#304;"
    }

    .focus-editor-wrap{
        content: "Tema Edit&#246;r&#252;"
    }

    .focus-guest .focus-guest-header::before{
        content: "Ho&#351;geldiniz "
    }

    .structItemContainer-group--sticky::before{
        content: "Sabit Konular"
    }
    .structItemContainer-group--sticky::after{
        content: "Normal Konular"
    }

    [data-focus-text="Background Picker"]::after{
        content: "Arkaplan Se&#231;ici"
    }

    [data-focus-text="Customize layout"]::after{
        content: "D&#252;zeni &#246;zelle&#351;tir"
    }

    [data-focus-text="Save"]::after{
        content: "Kaydet"
    }

    [data-focus-text="Choose color"]::after{
        content: "Renk se&#231;in"
    }

    [data-setting="focus-fluid"] .focus-editor-text{
        &::before{    content: "S&#305;v&#305; geni&#351;li&#287;i?" }
        &::after{    content: "Bunu etkinle&#351;tirmek sitenin geni&#351;li&#287;ini art&#305;racak, b&#246;ylece taray&#305;c&#305;n&#305;z&#305;n tam geni&#351;li&#287;ini kaplayacak. Daha b&#252;y&#252;k ekranlar i&#231;in kullan&#305;&#351;l&#305;d&#305;r." }
    }

    [data-setting="focus-grid"] .focus-editor-text{
        &::before{    content: "Izgara d&#252;zeni?" }
        &::after{    content: "Etkinle&#351;tirilirse, forumlar tablo yerine k&#305;lavuz olarak g&#246;r&#252;nt&#252;lenir." }
    }

    [data-setting="focus-sidebar-sticky"] .focus-editor-text{
        &::before{    content: "Sabit yan &#231;ubuk?" }
        &::after{    content: "Etkinle&#351;tirilirse, kolay eri&#351;im i&#231;in kenar &#231;ubu&#287;u ekran&#305;n &#252;st&#252;ne yap&#305;&#351;&#305;r." }
    }

    [data-setting="focus-sidebar-flip"] .focus-editor-text{
        &::before{    content: "Yan &#231;ubu&#287;u &#231;evir?" }
        &::after{    content: "Kenar &#231;ubu&#287;unu sol ve sa&#287; taraf aras&#305;nda de&#287;i&#351;tirin." }
    }

    [data-setting="focus-snow"] .focus-editor-text{
        &::before{    content: "Kar efekti etkinle&#351;tirilsin mi?" }
        &::after{    content: "Etkinle&#351;tirilirse, hareketli kar ya&#287;&#305;&#351;&#305; taray&#305;c&#305;da &#231;al&#305;&#351;&#305;r." }
    }

    [data-setting="focus-confetti"] .focus-editor-text{
        &::before{    content: "Konfeti etkinle&#351;tirilsin mi?" }
        &::after{    content: "Etkinle&#351;tirilirse, animasyonlu konfeti taray&#305;c&#305;n&#305;z&#305;n &#252;st k&#305;sm&#305;ndan a&#351;a&#287;&#305; do&#287;ru iner." }
    }

    [data-setting="focus-countdown"] .focus-editor-text{
        &::before{    content: "Geri say&#305;m g&#246;sterilsin mi!" }
        &::after{    content: "Etkinle&#351;tirilirse, sayfan&#305;z&#305;n &#252;st&#252;nde bir geri say&#305;m sayac&#305; g&#246;r&#252;n&#252;r." }
    }

    [data-setting="focus-dimension-parallax"] .focus-editor-text{
        &::before{    content: "Paralaks efektini etkinle&#351;tir?" }
        &::after{    content: "Etkinle&#351;tirilirse, ba&#351;l&#305;k k&#305;sm&#305;na paralaks efekti uygulan&#305;r." }
    }

    [data-setting="focus-aperture-background"] .focus-editor-text{
        &::before{    content: "Arkaplan Paralaks&#305;?" }
        &::after{    content: "Etkinle&#351;tirilirse, arka plan g&#246;r&#252;nt&#252;s&#252;, sayfa kayd&#305;r&#305;ld&#305;&#287;&#305;nda hateketlenir ve bulan&#305;kla&#351;&#305;r." }
    }

    .focus-timer [data-countdown-text="week,"]::before{
        content: "hafta,";
    }

    .focus-timer [data-countdown-text="weeks,"]::before{
        content: "haftalar,";
    }

    .focus-timer [data-countdown-text="days and"]::before{
        content: "g&#252;nler ve";
    }

    .focus-timer [data-countdown-text="day and"]::before{
        content: "g&#252;n ve";
    }
</xf:if>


/*
	----------------
	- Global
	----------------
*/

// Set variables to allow easier debugging
:root{
	--node-grid-padding: @node-grid-padding;
	--grid-node-width: @grid-node-width;
	--mobile-sticky-top: @mobile-sticky-top;
}

.p-pageWrapper{
	// Localize z-index
	z-index: 1;
	// Remove default
	background: none;

	@media (min-width: (@xf-responsiveMedium + 1px)){
	   	padding-top: @body-padding-top;
	    padding-bottom: @body-padding-bottom;
	}
}

@media (min-width: (@xf-responsiveMedium + 1px)){

	.focus-width{
		margin: 0 auto;
		width: @focus-width; // 100vw - 20px
		max-width: @xf-pageWidthMax;
	}

}

// Apply fluid width to screen sizes only when the fluid width will actually be wider than the fixed width
@media (min-width: (@xf-pageWidthMax + @focus-fluid-margin + 1px)){
	.focus-fluid{
		.focus-width,
		.p-header-inner,
		.p-nav-inner,
		.p-sectionLinks-inner,
		.p-body-inner,
		.p-footer-inner{
			max-width: ~"calc(100vw - @{focus-fluid-margin})";
		}
	}
}

@media (min-width: (@xf-responsiveMedium + 1px)){
	// Reset widths of elements if they're wrapped with focus-width
	.focus-width{
		.focus-width,
		.p-header-inner,
	    .p-staffBar-inner,
		.p-nav-inner,
		.p-sectionLinks-inner,
		.p-body-inner,
		.p-footer-inner{
			max-width: none;
			// 100% is used instead of auto to fix an IE 11 bug
			width: 100%;
		}
	}
}

<xf:if is="property('xenfocus_themeEditor') OR property('xenfocus_picker')">
	.focus-editor-open{

		.focus-width,
		.p-staffBar-inner,
		.p-header-inner,
		.p-nav-inner,
		.p-sectionLinks-inner,
		.p-body-inner,
		.p-footer-inner{
			transition: max-width 0.3s linear;
		}
	}
</xf:if>

// Make placeholder text more visible
.input
{
	&::placeholder{
		color: inherit;
		opacity: @input--placeholder;
	}

	&:focus,
	&.is-focused
	{
		&::placeholder{
			color: inherit;
			opacity: @input--placeholder-active;
		}
	}
}

// Make sure search fields aren't black
input[type="search"]{
	color: inherit;
}


/*
	----------------
	- Header
	----------------
*/

// Make header show on all devices
#header{
	display: block;
}

// If a header ad exists, hide the search bar
#header .focus-ad:empty,
#header .focus-ad:not(:empty) + .focus-wrap-search{
	display: none;
}

// Remove default
.p-header-inner{
    padding: 0;
}

.p-header-content{
    padding: 0;
    flex-wrap: nowrap;
    max-width: @p-header-content--max-width;
    margin: 0 auto;
}

/*
	----------------
	- Logo
	----------------
*/

.p-header-logo{
    // Remove defaults
    margin: 0;
    max-width: none;
    flex: 0 1 auto;
    
    a{
        height: @xf-xenfocus_logoHeight*1px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        vertical-align: top;
		color: xf-default(@xf-xenfocus_logoColor, inherit);
		font-family: xf-default(@xf-xenfocus_logoFont, inherit);
    	font-size: @xf-xenfocus_logoSize*1px;

        @media (max-width: @xf-responsiveMedium){
            font-size: @xf-xenfocus_logoSizeMobile*1px;
        }
        
        // Mobile logo height
        @media (max-width: @xf-responsiveMedium){
            height: @xf-xenfocus_logoHeightMobile*1px;
        }
    }
    
    // Space out images and text
    .focus-logo > * + *{
    	margin-left: @focus-logo-image--margin;
    }
    
    <xf:if is="property('xenfocus_logoType') != 'image'">
	    // Text logo
	    .focus-logo--name,
	    .focus-logo--slogan{
	    	line-height: 1;
	    	display: block;
	    }
	    .focus-logo--slogan{
	    	opacity: @logo-slogan-opacity;
	    	font-size: @logo-slogan-size;
	    	margin-top: @logo-slogan-margin;
	    }
	</xf:if>
    
    // Restrict logo image
    &.p-header-logo--image img{
    	font-size: 1px;
        max-height: @logo-image-height - @logo-reduce-image-height-by;
        @media (max-width: @xf-responsiveMedium){
            // max-width: ~"calc(100vw - (@xf-pageEdgeSpacer * 2))";
            max-height: @mobile-logo-image-height - @mobile-logo-reduce-image-height-by;
        }
    }

    // Stretch so we can center logo on mobiles
    @media (max-width: @xf-responsiveMedium){
        width: 100%;
        text-align: center;

        <xf:if is="property('xenfocus_logoType') != 'text'">
        	* ~ .focus-logo--text{
        		text-align: left;
        	}
        </xf:if>
        
    }

}


// Mini logo on mobiles
.focus-mobile-navigation{
	flex: 1 1 auto;
	display: flex;
	align-self: stretch;

	@media (min-width: (@xf-responsiveMedium+1px)){
		display: none;
	}
}

// Show header on mobile, otherwise hide it and use inline logo
<xf:if is="(property('xenfocus_headerOnMobile'))">

	.focus-mobile-logo{
		display: none;
	}

<xf:else />

	.focus-mobile-logo{
		display: flex;
		flex: 1 1 auto;
		color: @focus-mobile-logo-color;
		font-weight: bold;
		position: relative;
		overflow: hidden;

		a{
			display: flex;
			align-items: center;
			overflow: hidden;
			text-decoration: none;
			position: absolute;
			top: 0; left: 0; bottom: 0;
		}

		img{
			max-height: 44px;
		}
	}


	@media (max-width: @xf-responsiveMedium){
		#header{
			display: none;
		}
	}

</xf:if>




/*
	----------------
	- Navigation
	----------------
*/

// The logo shrink value is set to 1
.focus-wrap-nav{
	flex: 0 2 auto;
	overflow: hidden;
}

// Hide header elements on mobiles depending on location
@media (max-width: @xf-responsiveMedium){
	.p-header{
		.focus-wrap-nav,
		.focus-wrap-search,
		.focus-wrap-user{
			display: none;
		}
	}

	.p-nav{
		.focus-wrap-nav,
		.focus-wrap-search{
			display: none;
		}
	}
}

// Make sure the logo and navigation don't squash into each other
.p-header{
	.focus-wrap-nav{
		margin-left: 10px;
	}
}

.p-nav{
	z-index: 2;
	position: relative;

	.focus-wrap-nav{
		overflow: hidden;
	}
}

.p-nav(){}
.p-nav-mobile(){}
@media (min-width: (@xf-responsiveMedium + 1px)){
	.p-nav{
		.p-nav();
	}
}

@media (max-width: @xf-responsiveMedium){
	.p-nav{
		background: @mobile-navigation-bar--background;
		color: @mobile-navigation-bar--color;
		position: -webkit-sticky;
		position: sticky;
		top: @mobile-sticky-top;
		top: var(--mobile-sticky-top, @mobile-sticky-top);
		z-index: 400;
		.p-nav-mobile();
	}
	.p-navSticky .p-nav{
		position: relative;
		top: auto;
	}
}



// Remove box-shadow from sticky nav
.p-navSticky.is-sticky{
	box-shadow: none;
}

// Align items into presumably intended layout
.p-nav-inner{
	align-items: center;
	justify-content: space-between;
    
    // Not necessary for flex layout
	&::before,
	&::after{
		display: none;
	}
}

@media (max-width: @xf-responsiveMedium){
	.has-js .p-nav-inner{
		min-height: 44px;
	}
}
	
// Remove default
.p-nav-scroller{
    margin: 0;
}

.p-nav-list{
    // Set navigation height using line-height instead of padding
	line-height: @xf-xenfocus_navHeight*1px;
    & .p-navEl-link,
    & .p-navEl-splitTrigger{
        padding-top: 0;
        padding-bottom: 0;
    }
   
    
    // Inherit link colour
    & a{
        color: inherit;
    }
    
    
    // Remove spacers at start and end. Testing required
    &::before,
    &::after{ width: 0; }

    // Assign font-size
	> li{
		font-size: xf-default(@xf-publicNavTab--font-size, @xf-fontSizeNormal);

		// If margins exists, remove them from the first and last children since they're likely unnecessary
		&:first-child .p-navEl{
            margin-left: 0;
        }
        &:last-child .p-navEl{
            margin-right: 0;
        }
	}
}

// Inherit border-radius
.focus-content .p-navSticky:not(.is-sticky),
.focus-content .p-nav{
	border-top-left-radius: inherit;
	border-top-right-radius: inherit;
}

// Ensure border-radius works even after the sticky class is applied
.p-navSticky.is-sticky .p-nav .p-nav-list .p-navEl.is-selected,
.p-navSticky.is-sticky .p-nav .p-account,
// Remove defaults
.p-navEl,
.p-navEl-link,
.p-navEl-splitTrigger,
.p-nav-list .p-navEl.is-menuOpen{
	border-radius: inherit;
}
	
	.p-navEl-splitTrigger{
		border-top-left-radius: 0;
		border-bottom-left-radius: 0;
	}

// Remove transition effect
.p-nav-list .p-navEl,
.p-navEl-link,
.p-navEl-splitTrigger{
	transition: none;
}

// Assign tab trigger background to a pseudo element for easy inherit
.p-navEl-splitTrigger{
	position: relative;

	&::before{
		content: '';
		position: absolute; top: 0; left: 0; right: 0; bottom: 0;
		background: currentcolor;
		border-radius: inherit;
		opacity: 0;
	}
	
		&.is-menuOpen:before,
		&:hover:before{
			opacity: 0.07;
		}
}

// Remove hover effect from link sections
.p-nav-list .p-navEl:not(.is-selected):not(.is-menuOpen){
    .p-navEl-link:hover,
    .p-navEl-splitTrigger:hover{
        background: none;
    }
}
    // Remove the line which separates the text and arrow, when the menu is sticky
    .p-navSticky--primary.is-sticky .p-nav-list .p-navEl.is-selected .p-navEl-splitTrigger::before{
    	display: none;
    }



// Always show the dropdown arrow, which also prevents the jolt after scrolling
.p-navEl-splitTrigger{
	margin-left: -((@xf-publicNavPaddingH) / 1.5);

	.p-nav-list .p-navEl.is-selected & {
		display: block;
	}
}

#XF .p-navEl-link.p-navEl-link--splitMenu{
	padding-right: @xf-publicNavPaddingH;
}


// Remove sub-navigation menu
.focus-dropdown-nav(@debug) when (@debug = true) {
    .p-sectionLinks{
        display: none;
    }
}
.focus-dropdown-nav(@focus-dropdown-nav);



// Navigation icons
.navigation-icons(){}

<xf:if is="property('xenfocus_navIcons')">
.focus-wrap-nav .p-navEl-link,
.offCanvasMenu-linkHolder .offCanvasMenu-link[data-nav-id]{

	&::before{
		.m-faBase();
        .m-faContent(@fa-var-tag);
		font-size: @nav-icon-size;
		display: inline-block;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		margin-right: 6px;
		.navigation-icons();
	}

	&[data-nav-id="home"]::before{
		.m-faContent(@fa-var-home);
	}
	&[data-nav-id="xenfocus_styles"]::before{
		.m-faContent(@fa-var-th);
	}
	&[data-nav-id="forums"]::before,
	&[data-nav-id="siropuChat"]::before{
		.m-faContent(@fa-var-comments);
	}
	&[data-nav-id="whatsNew"]::before{
		.m-faContent(@fa-var-star);
	}
	&[data-nav-id="members"]::before{
		.m-faContent(@fa-var-user);
	}
	&[data-nav-id="xfmg"]::before{
		.m-faContent(@fa-var-image);
	}
	&[data-nav-id="xfrm"]::before{
		.m-faContent(@fa-var-download);
	}
}
// Remove icon added by 3rd party addon
[data-nav-id="siropuChat"] > i{
	display: none;
}
</xf:if>



// Navigation scrollers: Force the buttons to use the same colours as navigation links
.p-nav-scroller .hScroller-action{

	color: @navigation-arrow-color;
	padding: 0;

	html[dir='ltr'] &.hScroller-action--start,
	html[dir='rtl'] &.hScroller-action--end{
		background-image: linear-gradient(to left, fade(@navigation-arrow-gradient, 0%) 0%, @navigation-arrow-gradient 60%);
	}

	html[dir='ltr'] &.hScroller-action--end,
	html[dir='rtl'] &.hScroller-action--start{
		background-image: linear-gradient(to right, fade(@navigation-arrow-gradient, 0%) 0%, @navigation-arrow-gradient 60%);
	}

	&:hover{
		color: lighten(@navigation-arrow-color, 20%);
	}

	&::after{
		font-size: 10px;
		border-radius: 4px;
		background: fade(@navigation-arrow-color, 25%);
		width: @navigation-arrow-size;
		line-height: @navigation-arrow-size;
		text-align: center;
		-webkit-backdrop-filter: blur(5px);
		backdrop-filter: blur(5px);
	}

		&:hover:after{
			background: fade(@navigation-arrow-color, 40%);
		}
}

// If the navigation is placed inside the header, change the fade gradient of the navigation scrollers
<xf:if is="property('publicHeader--background-color')">

	.p-header .p-nav-scroller .hScroller-action{

		html[dir='ltr'] &.hScroller-action--start,
		html[dir='rtl'] &.hScroller-action--end{
			background-image: linear-gradient(to left, fade(@xf-publicHeader--background-color, 0%) 0%, @xf-publicHeader--background-color 60%);
		}

		html[dir='ltr'] &.hScroller-action--end,
		html[dir='rtl'] &.hScroller-action--start{
			background-image: linear-gradient(to right, fade(@xf-publicHeader--background-color, 0%) 0%, @xf-publicHeader--background-color 60%);
		}
	}

</xf:if>



// Place the scroller arrows outside of the navigation
.focus-nav-arrows{

	.p-nav-scroller{
		display: flex;
		align-items: center;
	}

	.hScroller-scroll{
		order: 2;
		flex: 1 1 auto;
	}

	.hScroller-action{
		position: relative;
		display: block;
		flex: 0 0 auto;
	}

	.hScroller-action:not(.is-active){
		opacity: 0.5;
		pointer-events: none;
	}

	.hScroller-action--start{
		order: 1;
	}

	.hScroller-action--end{
		order: 3;
	}

}


/*
	----------------
	- User links
	----------------
*/


.focus-wrap-user{
	flex: 0 0 auto;

	// Style the user links wrapper on desktop
	@media (min-width: (@xf-responsiveMedium + 1px)){
		// Possibly helpful when assigning border-radius since the search link may be shown
		<xf:if is="property('xenfocus_userlinksRadius') === 'parent'">
			overflow: hidden;
		</xf:if>
		.xf-xenfocus_userStyles();
	}

	// Change colour and radius for mobile user links
	@media (max-width: @xf-responsiveMedium){
		.p-nav-inner &{
			border-radius: 3px;
			color: @mobile-navigation-bar--color;
		}
	}
}

	// Reset default styles and inherit border-radius
	.p-nav-opposite{
		@media (min-width: (@xf-responsiveMedium + 1px)){
			margin: 0;
		}
	}


	// Set defaults
	.p-navgroup{
		display: flex;
		background: transparent;

		> *{
			flex: 0 0 auto;
		}
	}

.p-navgroup-link{
	align-items: center;
	background-clip: padding-box !important;
	// Remove borders from default code if they aren't removed in the next code block
	<xf:if is="!property('xenfocus_userSep')">
		border: 0;
	</xf:if>
	color: inherit;
	display: flex;
	height: @xf-xenfocus_userHeight*1px;
	justify-content: center;
	padding-top: 0;
	padding-bottom: 0;
	
	// Remove width restriction on icons
	&.p-navgroup-link--iconic i::after{
		width: auto;
		min-width: 0px;
	}
	
	@media (min-width: (@xf-responsiveMedium + 1px)){

		// Keep a neat ratio with links
		min-width: @xf-xenfocus_userHeight*1px;
		
		#XF &{

			// Assign border-radius based on parent/children setting
			<xf:if is="property('xenfocus_userlinksRadius') === 'children'">
				border-radius: @user-border-radius;
			<xf:else />
				border-radius: 0;
			</xf:if>

			// Add border separator to user links
			<xf:if is="property('xenfocus_userSep')">
				border-left: @user-links-sep solid @user-border-color;
			</xf:if>
		}

		// Make sure first account link has no left border
		<xf:if is="property('xenfocus_userSep')">
			#XF .p-account &:first-of-type{
				border-left-width: 0px;
			}
		</xf:if>

		// Desktops: Hover and active effects
		&.is-menuOpen,
		&:hover{
			<xf:if is="property('xenfocus_userStyles--color')">
	        	color: lighten(@xf-xenfocus_userStyles--color, 5%);
	        </xf:if>
			background-color: @user-hover;
		}
	}




	@media (max-width: @xf-responsiveMedium){
		// Set height to 40px on mobiles to match hamburger
		height: 40px;

		#XF &{
			border-radius: @user-links-radius-mobile;
		}

		// Mobiles: Hover and active effects
		&.is-menuOpen,
		&:hover{
	        color: @mobile-navigation-bar--color;
	        background-color: fade(@mobile-navigation-bar--color, 15%);
		}
	}


}

// Remove default gap from user links and search link
.p-navgroup.p-discovery{
	margin: 0;
}

// User links alignment
.p-navgroup-link--user{
	// Required to make sure avatar shows on mobiles
	&.p-navgroup-link{
		display: flex;
	}

	> *{
		flex: 0 0 auto;
	}
    
    @media (min-width: (@xf-responsiveWide + 1px)){

    	.avatar{

    		#XF &{
	    		height: (@xf-xenfocus_userHeight * 1px - 14px);
	    		width: (@xf-xenfocus_userHeight * 1px - 14px);
	    		margin-left: -3px;
	    		margin-right: @xf-paddingLarge;
	    	}
    		
            &.avatar--default--dynamic{
            	font-size: inherit;
            	display: inline-flex;
            	justify-content: center;
            	align-items: center;
            }
        }
    }

    <xf:if is="property('xenfocus_userStyles--color')">
	.avatar::after{
		border-color: fade(@xf-xenfocus_userStyles--color, 15%);
	}
	</xf:if>

    // Rearrange coding for truncated usernames
    &.p-navgroup-link{
    	max-width: none;
    }
}

// Notifications alignment
.p-navgroup-link--conversations,
.p-navgroup-link--alerts{

	&.badgeContainer::after{
		left: auto;
		right: 4px;
	}

}

// Hide whats new link since the flex property shows it
@media (min-width: (@xf-responsiveMedium + 1px)){
	.p-navgroup-link--whatsnew{ display: none; }
}

// Add icons to guest links
.p-navgroup-link--logIn,
.p-navgroup-link--register{

	.p-navgroup-linkText::before{
		.m-faBase();
        .m-faContent(@fa-var-sign-in);
		margin-right: 8px;
	}
}

.p-navgroup-link--register .p-navgroup-linkText::before{
	.m-faContent(@fa-var-plus-square);
}

// Register button
<xf:if is="property('xenfocus_userRegister')">
	.p-navgroup--guest .p-navgroup-link--register{
		position: relative;
		background-color: transparent !important;
		color: contrast(@xf-xenfocus_userRegister, rgba(0,0,0,0.7), #fff);
		text-shadow: none;
		font-weight: bold;

		&::before{
			content: '';
			position: absolute;
			top: @register-offset-v;
			left: @register-offset-h;
			right: @register-offset-h;
			bottom: @register-offset-v;
			background: @xf-xenfocus_userRegister;
			border-radius: 3px;

			@media (max-width: @xf-responsiveMedium){
				top: 3px;
				bottom: 3px;
			}
		}

		&:hover::before{
			background: lighten(@xf-xenfocus_userRegister, 5%);
		}

		.p-navgroup-linkText{
			position: relative;
		}
	}
</xf:if>

// Change icon of New Content
.p-navgroup-link.p-navgroup-link--whatsnew i::after,
.button.button--icon--bolt > .button-text::before,
a.button.button--icon--bolt > .button-text::before{
	.m-faContent(@fa-var-file-alt);
}

	.button.button--icon--bolt > .button-text::before,
	a.button.button--icon--bolt > .button-text::before{
		width: auto;
	}

// Remove box-shadow from active links
.p-nav-list .p-navEl.is-menuOpen,
.p-navgroup-link.is-menuOpen{
	box-shadow: none;
}

// Bug fix: Restore full opacity since separator borders are also faint
.p-navgroup-link.badgeContainer{
	opacity: 1;
}

// Alter colours of user drop-down menu
.js-visitorMenuBody .menu-row--highlighted{
	background: @xf-contentAltBg;
}

// Hide search link
<xf:if is="!property('xenfocus_searchLink')">
    @media (min-width: (@xf-responsiveMedium + 1px)){
        .p-discovery{
            display: none;
        }
    }
</xf:if>


<xf:if is="property('xenfocus_searchBar')">
	/*
		----------------
		- Search bar
		----------------
	*/

	.focus-wrap-search{
		flex: 0 0 auto;
		margin-left: 10px;
		position: relative;
	}

	.focus-search{
		line-height: @search-height;
		width: @search-width;
		.xf-xenfocus_searchStyles();
		border-left-width: @search-border-left;
		border-right-width: @search-border-right;

	    // Hide search on medium width
	    @media (max-width: @xf-responsiveMedium){
	        display: none;
	    }
	}

	.focus-search-flex{
		align-items: center;
		display: flex;
		position: relative;
	}

		.focus-search-prefix{
			flex: 0 0 auto;
			opacity: 0.7;
			order: 1;
			text-align: center;
			transition: opacity 0.2s linear;
			width: @search-height;

			.focus-search input:focus ~ &{
				opacity: 1;
			}		
		}

		.focus-search input{
			background: none;
			border: 0;
			color: inherit;
			display: block;
			flex: 1 1 auto;
			min-width: 0;
			order: 2;
			outline: none;
			padding: 0;
			width: 100%;
			
			// IE 11
			height: @search-height;
			line-height: @search-height;
			
			&::placeholder {
				color: inherit;
				opacity: 0.7;
			}
		}

	.focus-search-menu{
		position: absolute;
		top: 100%;
		z-index: 200;
		margin-top: @focus-search-arrow+4px;
		left: 0;
		width: 100%;
		max-width: 300px;
		min-width: 200px;
		color: @xf-textColor;
		background: @focus-search-dropdown;
		box-shadow: 0px 10px 20px rgba(0,0,0,0.15), @focus-search-dropdown-border 0px 0px 0px 1px;
		border-radius: @xf-blockBorderRadius;

		transform: translateY(-12px);
		opacity: 0;
		pointer-events: none;
		visibility: hidden;
		transition: all linear 0.2s;

		.focus-search-menu-active &{
			transform: translateY(0);
			opacity: 1;
			pointer-events: auto;
			visibility: visible;
		}

		&::before,
		&::after{
			content: '';
			position: absolute;
			top: @focus-search-arrow*-2;
			left: 10px;
			width: @focus-search-arrow*2;
			height: @focus-search-arrow*2;
			border: @focus-search-arrow solid transparent;
			border-bottom-color: @focus-search-dropdown-border;
			box-sizing: border-box;
		}

		&::before{
			margin-top: -1px;
		}

		&::after{
			border-bottom-color: @focus-search-dropdown;
		}

		.menu-row{
			padding: 10px;
			border-top: 1px solid fade(@xf-textColor, 8%);

			&:first-of-type{
				border-top-width: 0;
			}
		}

		.menu-footer{
			background: xf-intensify(@xf-contentAltBg, 3%);
			border-bottom-left-radius: inherit;
			border-bottom-right-radius: inherit;
			padding: 7px;
		}

		.menu-footer-controls{
			float: none !important;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			flex-wrap: wrap;

			> *{
				flex: 0 0 auto;
				margin: 3px;
			}
		}

		a.button{
			color: @xf-buttonDefault--color;
		}

		// Button icons
		@focus-search-button-height: 30px;
		.button{
			padding: 0 10px;
			line-height: @focus-search-button-height;
		}

		.button-text{
			display: block;
			position: relative;
		}

		.menu-footer .button-text:before{
			font-size: 14px;
			line-height: inherit;
			margin-right: 5px;
		}

		.menu-footer a .button-text:before{
			.m-faBase();
        	.m-faContent(@fa-var-sliders-h);
		}
	}
</xf:if>

/*
	----------------
	- xenfocus Editor
	----------------
*/

@focus-editor-icon: "\f205";
@focus-editor-save: #2aad55;
@focus-editor-width: 1000px;
<xf:if is="property('styleType') == 'light'">
	@focus-editor-overlay: rgba(0,0,0,0.4);
<xf:else />
	@focus-editor-overlay: rgba(0,0,0,0.88);
</xf:if>
@focus-editor-transition: 0.25s;

[data-xenfocus-editor] .fa-toggle-on::before{
	content: @focus-editor-icon;
}

	.p-footer .xenfocus-footer-icon{
		a{
			min-width: 40px;
			text-align: center;
		}

		i{
			margin: 0;
		}
	}

<xf:if is="property('xenfocus_themeEditor') OR property('xenfocus_picker')">

[data-xenfocus-editor]{
	cursor: pointer;
}

.focus-editor-wrap{
	display: flex;
	position: fixed;
	top: 0; left: 0; width: 100%; height: 100%;
	z-index: 910;
	align-items: center;
	justify-content: center;
	visibility: hidden;
	opacity: 0;
	transition: all @focus-editor-transition ease-in-out;

	.focus-editor-open &{
		visibility: visible;
		opacity: 1;
	}
}

	.focus-editor-overlay{
		background: @focus-editor-overlay;
		-webkit-backdrop-filter: blur(5px);
		backdrop-filter: blur(5px);
		position: absolute;
		top: 0; left: 0; right: 0; bottom: 0;
		cursor: auto;
	}

.focus-editor{
	box-shadow: rgba(0,0,0,0.3) 0px 10px 10px, rgba(0,0,0,0.4) 0px 15px 50px;
	border-radius: 4px;
	background: fadein(@xf-contentBg, 100%);
	position: relative;
	width: 98%;
	max-width: @focus-editor-width;
	transition: all @focus-editor-transition ease-in-out;
	transform: translateY(-50px);

	.focus-editor-open &{
		transform: translateY(0);
	}
}

.focus-editor-panel{
	padding: 20px;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	cursor: pointer;
	// Remove tap background from iOS
	-webkit-tap-highlight-color: transparent;

	@media (hover:hover){
		&:hover{
			background: fade(@xf-contentAltBg, 80%);
		}
	}
}

.focus-editor__title{
	font-weight: bold;
	background: @xf-contentAltBg;
	border: 1px solid xf-intensify(@xf-contentAltBg, 10%);
	border-width: 1px 0;
	padding: 20px;
	position: sticky;
	top: 0px;
	z-index: 10;

	&:only-child{
		display: none;
	}

	.focus-editor-scroll > :first-child > &{
		border-top-width: 0px;
	}
}

.focus-editor-save{
	padding: 20px;
	text-align: right;
	background: @xf-contentAltBg;
	border-top: 1px solid xf-intensify(@xf-contentAltBg, 10%);
	border-bottom-left-radius: inherit;
	border-bottom-right-radius: inherit;

	button{
		display: inline-flex;
		<xf:if is="property('styleType') == 'light'">
			border: 1px solid rgba(0,0,0,0.2);
		<xf:else />
			border: 0;
		</xf:if>
		box-shadow: inset rgba(255,255,255,0.16) 0px 1px 0px;
		border-radius: 3px;
		background-color: @focus-editor-save;
		color: #fff;
		font-weight: bold;
		padding: 0;
		line-height: 44px;
		position: relative;
		transition: background-color 0.2s linear;

		&::before{
			flex: 0 0 auto;
			.m-faBase();
    		.m-faContent(@fa-var-check);
			font-size: 14px;
			padding: 0 12px;
			background: rgba(255,255,255,0.18);
			background-clip: padding-box;
			border-top-left-radius: inherit;
			border-bottom-left-radius: inherit;
			border: 1px solid rgba(0,0,0,0.12);
			border-width: 0 1px 0 0;
		}
		&::after{
			flex: 0 0 auto;
			padding: 0 18px;
		}

		&:hover{
			background-color: lighten(@focus-editor-save, 5%);
		}

		&:active{
			top: 1px;
		}
	}
}

.focus-editor-scroll{
	max-height: ~"calc(100vh - 200px)";
	overflow: auto;
	border-radius: inherit;

	> div:first-of-type h4{
		border-top: 0;
	}
}


// Hide certain settings from mobiles
@media (max-width: @xf-responsiveWide){
	.focus-editor-panel[data-setting="focus-sidebar-sticky"],
	.focus-editor-panel[data-setting="focus-sidebar-flip"]{
		display: none;
	}
}

@media (max-width: (@xf-pageWidthMax + @focus-fluid-margin)){
	.focus-editor-panel[data-setting="focus-fluid"]{
		display: none;
	}
}

@focus-toggle-height: 30px;
@focus-toggle-width: 50px;
@focus-toggle-transform: @focus-toggle-width - @focus-toggle-height;
@focus-toggle-goo: 10px;
@focus-toggle-border: 2px;

.focus-editor-toggle{
	position: relative;
	flex: 0 0 auto;
	margin-right: 20px;
}

	.focus-toggle{
		background: xf-intensify(@xf-contentBg, 10%);
		display: block;
		border-radius: 15px;
		position: relative;
		z-index: 0;
		width: @focus-toggle-width;
		height: @focus-toggle-height;

		// Background
		&::before{
			content: '';
			position: absolute; top: 0; left: 0; right: 0; bottom: 0;
			background: @focus-editor-save;
			border-radius: inherit;
			opacity: 0;
			transition: opacity 0.25s linear;
		}

		i{
			position: absolute;
			border-radius: inherit;
			overflow: hidden;
			// Fix iOS glitchy animation
			transform: translate3d(0,0,0);
			<xf:if is="property('styleType') == 'light'">
				top: @focus-toggle-border;
				right: @focus-toggle-border;
				bottom: @focus-toggle-border;
				left: @focus-toggle-border;
			<xf:else />
				top: @focus-toggle-border + 2px;
				right: @focus-toggle-border + 2px;
				bottom: @focus-toggle-border + 2px;
				left: @focus-toggle-border + 2px;
			</xf:if>

			&::before{
				content: '';
				<xf:if is="property('styleType') == 'dark'">
				background: rgba(255,255,255,0.5);
				<xf:else />
				background: lighten(@xf-contentBg, 20%);
				</xf:if>
				box-shadow: rgba(0,0,0,0.25) 0px 3px 6px;
				border-radius: inherit;
				display: block;
				height: 100%;
				<xf:if is="property('styleType') == 'light'">
					width: @focus-toggle-height + @focus-toggle-goo - @focus-toggle-border - @focus-toggle-border;
				<xf:else />
					width: @focus-toggle-height + @focus-toggle-goo - @focus-toggle-border - @focus-toggle-border - 4px;
				</xf:if>
				transition: transform 0.25s ease-in-out;
				transform: translateX(@focus-toggle-goo * -1);
			}
		}

		&::after{
			content: '';
			position: absolute; top: 0; left: 0; right: 0; bottom: 0;
			border-radius: inherit;
			border: 2px solid rgba(0,0,0,0.15);
			<xf:if is="property('styleType') == 'dark'">
			border-color: rgba(255,255,255,0.2);
			</xf:if>
		}

		[data-setting-status='on'] &{
			&::before{
				opacity: 1;
			}
			i::before{
				transform: translateX(@focus-toggle-transform);
			}
		}
	}

.focus-editor-text{
	flex: 1 1 auto;

	&::before{
		content: attr(data-setting-title);
		display: block;
		font-weight: bold;
		margin-bottom: 4px;
	}

	&::after{
		content: attr(data-setting-desc);
		opacity: 0.6;
		display: block;
	}
}

</xf:if>


/*
	----------------
	- Breadcrumbs
	----------------
*/

// Align breadcrumbs and social icons
.focus-breadcrumb{
    display: flex;
    
    @media (max-width: @xf-responsiveMedium){
        flex-direction: column;
        align-items: center;
    }

    .p-breadcrumbs-wrap{
        flex: 1 1 auto;
        width: 100%;
    }
}

.xenfocus_breadcrumb(){} 

.focus-breadcrumbs(@debug) when (@debug = true) {

	.p-breadcrumbs-wrap{
        color: @breadcrumb-color;
        background-color: @breadcrumb-background-hex;
        background-image: @breadcrumb-background-image;
        border-radius: @breadcrumb-radius;
        font-size: @xf-fontSizeSmall;
        line-height: @breadcrumb-height;
        margin-bottom: 10px;
        position: relative;
        z-index: 0;
        display: flex;
        @media (min-width: (@xf-responsiveEdgeSpacerRemoval + 1px)){
        	margin-bottom: @content-padding;
        }

        .xenfocus_breadcrumb();

        &::before{
        	content: '';
        	display: block;
        	position: absolute; top: 0; left: 0; right: 0; bottom: 0;
        	border-width: @breadcrumb-border-width;
	        border-style: solid;
	        border-color: @breadcrumb-border-color;
	        border-radius: inherit;
	        pointer-events: none;
	        z-index: 2;
        }

        &.p-breadcrumbs-wrap--bottom{
        	margin-top: @content-padding;
        	margin-bottom: 0;
        }
    }

    // Remove default margins
    .p-breadcrumbs.p-breadcrumbs--bottom{
    	margin: 0;
    }

    .p-breadcrumbs{
        overflow: hidden;
        margin: 0;
        width: 100%;
        line-height: inherit;
        display: flex;

        &::before,
        &::after{
        	display: none;
        }

        > li{
        	margin: 0;
            font-size: inherit;
            padding-left: 15px;

        	&:first-child{
	            border-top-left-radius: inherit;
	            border-bottom-left-radius: inherit;
	        }

	        &::before,
            &::after{
                display: none;
            }

            a{
                padding: 0 15px;
                position: relative;
                z-index: 1;
                display: block;
                overflow: visible;
                max-width: none;
                text-decoration: none;
                color: inherit;
				margin-left: -15px;
               
                &:hover{
			    	color: xf-default(@xf-xenfocus_breadcrumbHover--color, inherit);
			    }

                &::before,
	            &::after {
	                border-style: solid;
	                border-width: 0;
	                border-right-width: 1px;
	                border-color: @breadcrumb-shadow;
	                color: @breadcrumb-highlight;
	                box-shadow: inset currentColor -1px 0px 0px 0px;
	                content: '';
	                position: absolute;
	                height: 50%;
	                width: 100%;
	                right: 0;
	                z-index: -1;
	                box-sizing: border-box;
	                transform-origin: 100% 50%;
	            }

	            html[dir='rtl'] &::before,
				html[dir='rtl'] &::after{
					box-shadow: inset currentColor 1px 0px 0px 0px;
				}

                &::before {
	                top: 0;
	                transform: skewX(30deg);
	            }

	            &::after {
	                top: 50%;
	                transform: skewX(-30deg);
	            }

			    html[dir='rtl'] &::before{
			    	transform: skewX(-30deg);
			    }
			    
			    html[dir='rtl'] &::after{
			    	transform: skewX(30deg);
			    }

			    /* Hover */
			    &:hover::before,
                &:hover::after{
                    background: @breadcrumb-hover;
                }

                /* Active */
                &:active::before,
                &:active::after{
                    background: @breadcrumb-active;
                    color: rgba(0,0,0,0.05);
                    box-shadow: inset currentColor -2px 1px 1px;
                }

                &:active::after{
                    box-shadow: inset currentColor -2px -1px 1px;
                }
            }

            &:first-of-type a::before,
            &:first-of-type a::after {
                width: ~"calc(100% + 20px)";
            }
        }

        
        @media (max-width: @xf-responsiveNarrow){

        	.focus-breadcrumbs-mobile(@debug) when (@debug = true) {
	        	overflow: auto;

	        	> li{
	        		display: block;
	        	}

		        > li a{
		            padding: 0 11px;
		            -webkit-tap-highlight-color: transparent;
		            -webkit-overflow-scrolling: touch;
				}
		    }
			.focus-breadcrumbs-mobile(@focus-breadcrumbs-mobile);

			.focus-breadcrumbs-mobile-disabled(@debug) when (@debug = false) {

				> li{
					a{
						padding-right: 15px;

						&::before {
			                transform: skewX(-30deg);
			            }

			            &::after {
			                transform: skewX(30deg);
			            }
					}
				}

			}
			.focus-breadcrumbs-mobile-disabled(@focus-breadcrumbs-mobile);

	    }
		
    }
}
.focus-breadcrumbs(@focus-breadcrumbs);


// Remove the bottom breadcrumb bar on the forum index
[data-template="forum_list"] .p-breadcrumbs-wrap--bottom{
	display: none;
}



/*
	----------------
	- Social icons
	----------------
*/

<xf:if is="property('xenfocus_socialEnable') OR property('xenfocus_socialFooter')">

.xenfocus-social{
	color: #fff;
	border-radius: @xf-xenfocus_breadcrumb--border-radius;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	flex: 0 0 auto;
	margin: 0;
    margin-bottom: 10px;
	padding: 0;
	list-style: none;
	text-align: center;
	text-shadow: rgba(0,0,0,0.3) 0px -1px 0px;
	@media (min-width: (@xf-responsiveEdgeSpacerRemoval + 1px)){
		margin-bottom: @content-padding;
	}
    
    li{
	    line-height: @social-height;
	    display: block;
	    flex: 0 0 auto;
	    margin: 0;
		padding: 0;
		border-radius: inherit;
		list-style: none;
	    padding-left: 4px;
	}
    
    a{
		color: inherit;
		box-shadow: rgba(0,0,0,0.1) 0px 1px 3px;
	    border-radius: inherit;
	    display: flex;
        align-items: center;
	    text-decoration: none;
	    outline: none;
	    position: relative;
        font-size: @xf-fontSizeSmall;
        padding-right: 12px;

            &:active{
                box-shadow: inset rgba(0,0,0,0.4) 0px 1px 3px;
                top: 1px;
            }
        
            // Icon
        	&::before{
        		.m-faBase('Brands');
        		.m-faContent(@fa-var-diaspora);
                background-color: rgba(255,255,255,0.12);
                border-radius: inherit;
                width: @social-height;
                height: @social-height;
				flex: 0 0 auto;
                text-align: center;
                font-size: 16px !important;
                pointer-events: none;
                border-top-right-radius: 0;
            	border-bottom-right-radius: 0;
            	margin-right: 12px;

                html[dir='ltr'] &{               	
                	box-shadow: inset rgba(255,255,255,0.12) -1px 0px 0px 0px, rgba(0,0,0,0.1) 1px 0px 0px 0px;
                }
                html[dir='rtl'] &{
                	box-shadow: inset rgba(255,255,255,0.12) 1px 0px 0px 0px, rgba(0,0,0,0.1) -1px 0px 0px 0px;
                }
            }
        
            // Border and hover
            &::after{
                border: @social-border solid rgba(0,0,0,0.2);
                <xf:if is="property('styleType') == 'dark'">
                border-width: 0px;
                </xf:if>
                box-shadow: inset rgba(255,255,255,0.15) 0px 1px 0px;
                content: '';
                position: absolute;
                top: 0; left: 0; right: 0; bottom: 0;
                pointer-events: none;
                border-radius: inherit;
            }

                &:hover:after{
                    background: rgba(255,255,255,0.2);
                }

                &:active:after{
                    background: rgba(0,0,0,0.1);
                }
        
        // Icon only
        #XF &:empty{
            padding: 0;
            
            &::before{
                border-radius: inherit;
                margin: 0;
                box-shadow: none;
                background-color: transparent;
            }
        }
	}
 
	a{
	    background: #999;
	    
	    &[href*='discordapp.com'],
	    &[href*='discord.gg']{
	        background: #7289da;
	        &::before{ .m-faContent(@fa-var-discord); }
	    }
	    
	    &[href*='dropbox.com']{
	        background: #007fe5;
	        &::before{ .m-faContent(@fa-var-dropbox); }
	    }
	    
	    &[href*='mailto:']{
	        background: #444444;
	        &::before{
	        	.m-faBase();
	        	.m-faContent(@fa-var-envelope);
	        }
	    }
	    
	    &[href*='facebook.com']{
	        background: #304c87;
	        &::before{ .m-faContent(@fa-var-facebook-f); }
	    }
	    
	    &[href*='flickr.com']{
	        background: #fe2997;
	        &::before{ .m-faContent(@fa-var-flickr); }
	    }
	    
	    &[href*='google.com']{
	        background: #df6b39;
	        &::before{ .m-faContent(@fa-var-google); }
	    }
	    
	    &[href*='instagram.com']{
	        background: #de416a;
	        &::before{ .m-faContent(@fa-var-instagram); }
	    }
	    
	    &[href*='linkedin.com']{
	        background: #0073b2;
	        &::before{ .m-faContent(@fa-var-linkedin-in); }
	    }
	    
	    &[href*='paypal.com']{
	        background: #253b80;
	        &::before{ .m-faContent(@fa-var-paypal);}
	    }
	    
	    &[href*='pinterest.']{
	        background: #cd1d1f;
	        &::before{ .m-faContent(@fa-var-pinterest-p); }
	    }
	    
	    &[href*='reddit.com']{
	        background: #609acf;
	        &::before{ .m-faContent(@fa-var-reddit-alien); }
	    }
	    
	    &[href$='.rss']{
	        background: #ff9641;
	        &::before{
	        	.m-faBase();
	        	.m-faContent(@fa-var-rss);
	        }
	    }
	    
	    &[href*='skype.com']{
	        background: #00b0f0;
	        &::before{ .m-faContent(@fa-var-skype); }
	    }
	    
	    &[href*='soundcloud.com']{
	        background: #ff6900;
	        &::before{ .m-faContent(@fa-var-soundcloud); }
	    }
	    
	    &[href*='spotify.com']{
	        background: #84b301;
	        &::before{ .m-faContent(@fa-var-spotify); }
	    }
	    
	    &[href*='steampowered.com']{
	        background: #457498;
	        &::before{ .m-faContent(@fa-var-steam); }
	    }
	    
	    &[href*='stripe.com']{
	        background: #58aada;
	        &::before{ .m-faContent(@fa-var-stripe); }
	    }
	    
	    &[href*='teamspeak.com']{
	        background: #8190b1;
	        &::before{ .m-faContent(@fa-var-teamspeak); }
	    }

	    &[href*='/t.me/'],
	    &[href*='telegram.org']{
	        background: #0d86d7;
	        &::before{ .m-faContent(@fa-var-telegram-plane); }
	    }
	    
	    &[href*='tumblr.com']{
	        background: #539fcc;
	        &::before{ .m-faContent(@fa-var-tumblr); }
	    }
	    
	    &[href*='twitch.tv']{
	        background: #6441a5;
	        &::before{ .m-faContent(@fa-var-twitch); }
	    }
	    
	    &[href*='twitter.com']{
	        background: #0097d3;
	        &::before{ .m-faContent(@fa-var-twitter); }
	    }
	    
	    &[href*='vimeo.com']{
	        background: #1bb5ea;
	        &::before{ .m-faContent(@fa-var-vimeo-v); }
	    }

	    &[href*='/vk.com']{
	        background: #5181b8;
	        &::before{ .m-faContent(@fa-var-vk); }
	    }
	    
	    &[href*='youtube.com']{
	        background: #cc332d;
	        &::before{ .m-faContent(@fa-var-youtube); }
	    }
	    
	}
}

#footer .xenfocus-social{
	margin: 0;
	margin-top: 10px;

	li:first-child{
		padding: 0;
	}

	.social-footer-basic(@debug) when (@debug = true) {
		color: inherit;
		text-shadow: none;

		a{
			box-shadow: none;
			background: none;

			&::before{
				box-shadow: none;
				background-color: rgba(255,255,255,0.05);
			}

			&::after{
				border-width: 0;
				box-shadow: none;
				opacity: 0.2;
				background: currentcolor;
			}

			&:hover:after{
                opacity: 0.3;
            }

            &:active:after{
                opacity: 0.4;
            }
		}
	}
	.social-footer-basic(@social-footer-basic);
}


</xf:if>



/*
	----------------
	- Background Picker
	----------------
*/

.focus-background-1(){
    <xf:if is="property('xenfocus_bg1_hex')">
		background-color: @xf-xenfocus_bg1_hex;
    </xf:if>
    <xf:if is="property('xenfocus_bg1_image')">
		background-image: url(@xf-xenfocus_bg1_image?v=@xf-xenfocus_cache);
		<xf:if is="property('xenfocus_bg1_size')">
			background-size: @xf-xenfocus_bg1_size;
	    </xf:if>
	    <xf:if is="property('xenfocus_bg1_position')">
			background-position: @xf-xenfocus_bg1_position;
	    </xf:if>
	    background-repeat: @xf-xenfocus_bg1_repeat;
	    background-attachment: @xf-xenfocus_bg1_attachment;
    </xf:if>
}

.focus-background-2(){
    <xf:if is="property('xenfocus_bg2_hex')">
		background-color: @xf-xenfocus_bg2_hex;
    </xf:if>
    <xf:if is="property('xenfocus_bg2_image')">
		background-image: url(@xf-xenfocus_bg2_image?v=@xf-xenfocus_cache);
		<xf:if is="property('xenfocus_bg2_size')">
			background-size: @xf-xenfocus_bg2_size;
	    </xf:if>
	    <xf:if is="property('xenfocus_bg2_position')">
			background-position: @xf-xenfocus_bg2_position;
	    </xf:if>
	    background-repeat: @xf-xenfocus_bg2_repeat;
	    background-attachment: @xf-xenfocus_bg2_attachment;
    </xf:if>
}

.focus-background-3(){
    <xf:if is="property('xenfocus_bg3_hex')">
		background-color: @xf-xenfocus_bg3_hex;
    </xf:if>
    <xf:if is="property('xenfocus_bg3_image')">
		background-image: url(@xf-xenfocus_bg3_image?v=@xf-xenfocus_cache);
		<xf:if is="property('xenfocus_bg3_size')">
			background-size: @xf-xenfocus_bg3_size;
	    </xf:if>
	    <xf:if is="property('xenfocus_bg3_position')">
			background-position: @xf-xenfocus_bg3_position;
	    </xf:if>
	    background-repeat: @xf-xenfocus_bg3_repeat;
	    background-attachment: @xf-xenfocus_bg3_attachment;
    </xf:if>
}

.focus-background-4(){
    <xf:if is="property('xenfocus_bg4_hex')">
		background-color: @xf-xenfocus_bg4_hex;
    </xf:if>
    <xf:if is="property('xenfocus_bg4_image')">
		background-image: url(@xf-xenfocus_bg4_image?v=@xf-xenfocus_cache);
		<xf:if is="property('xenfocus_bg4_size')">
			background-size: @xf-xenfocus_bg4_size;
	    </xf:if>
	    <xf:if is="property('xenfocus_bg4_position')">
			background-position: @xf-xenfocus_bg4_position;
	    </xf:if>
	    background-repeat: @xf-xenfocus_bg4_repeat;
	    background-attachment: @xf-xenfocus_bg4_attachment;
    </xf:if>
}

.focus-background-5(){
    <xf:if is="property('xenfocus_bg5_hex')">
		background-color: @xf-xenfocus_bg5_hex;
    </xf:if>
    <xf:if is="property('xenfocus_bg5_image')">
		background-image: url(@xf-xenfocus_bg5_image?v=@xf-xenfocus_cache);
		<xf:if is="property('xenfocus_bg5_size')">
			background-size: @xf-xenfocus_bg5_size;
	    </xf:if>
	    <xf:if is="property('xenfocus_bg5_position')">
			background-position: @xf-xenfocus_bg5_position;
	    </xf:if>
	    background-repeat: @xf-xenfocus_bg5_repeat;
	    background-attachment: @xf-xenfocus_bg5_attachment;
    </xf:if>
}

.focus-background-6(){
    <xf:if is="property('xenfocus_bg6_hex')">
		background-color: @xf-xenfocus_bg6_hex;
    </xf:if>
    <xf:if is="property('xenfocus_bg6_image')">
		background-image: url(@xf-xenfocus_bg6_image?v=@xf-xenfocus_cache);
		<xf:if is="property('xenfocus_bg6_size')">
			background-size: @xf-xenfocus_bg6_size;
	    </xf:if>
	    <xf:if is="property('xenfocus_bg6_position')">
			background-position: @xf-xenfocus_bg6_position;
	    </xf:if>
	    background-repeat: @xf-xenfocus_bg6_repeat;
	    background-attachment: @xf-xenfocus_bg6_attachment;
    </xf:if>
}

.focus-background-7(){
    <xf:if is="property('xenfocus_bg7_hex')">
		background-color: @xf-xenfocus_bg7_hex;
    </xf:if>
    <xf:if is="property('xenfocus_bg7_image')">
		background-image: url(@xf-xenfocus_bg7_image?v=@xf-xenfocus_cache);
		<xf:if is="property('xenfocus_bg7_size')">
			background-size: @xf-xenfocus_bg7_size;
	    </xf:if>
	    <xf:if is="property('xenfocus_bg7_position')">
			background-position: @xf-xenfocus_bg7_position;
	    </xf:if>
	    background-repeat: @xf-xenfocus_bg7_repeat;
	    background-attachment: @xf-xenfocus_bg7_attachment;
    </xf:if>
}

.focus-background-8(){
    <xf:if is="property('xenfocus_bg8_hex')">
		background-color: @xf-xenfocus_bg8_hex;
    </xf:if>
    <xf:if is="property('xenfocus_bg8_image')">
		background-image: url(@xf-xenfocus_bg8_image?v=@xf-xenfocus_cache);
		<xf:if is="property('xenfocus_bg8_size')">
			background-size: @xf-xenfocus_bg8_size;
	    </xf:if>
	    <xf:if is="property('xenfocus_bg8_position')">
			background-position: @xf-xenfocus_bg8_position;
	    </xf:if>
	    background-repeat: @xf-xenfocus_bg8_repeat;
	    background-attachment: @xf-xenfocus_bg8_attachment;
    </xf:if>
}

.focus-background-9(){
    <xf:if is="property('xenfocus_bg9_hex')">
		background-color: @xf-xenfocus_bg9_hex;
    </xf:if>
    <xf:if is="property('xenfocus_bg9_image')">
		background-image: url(@xf-xenfocus_bg9_image?v=@xf-xenfocus_cache);
		<xf:if is="property('xenfocus_bg9_size')">
			background-size: @xf-xenfocus_bg9_size;
	    </xf:if>
	    <xf:if is="property('xenfocus_bg9_position')">
			background-position: @xf-xenfocus_bg9_position;
	    </xf:if>
	    background-repeat: @xf-xenfocus_bg9_repeat;
	    background-attachment: @xf-xenfocus_bg9_attachment;
    </xf:if>
}

.focus-background-10(){
    <xf:if is="property('xenfocus_bg10_hex')">
		background-color: @xf-xenfocus_bg10_hex;
    </xf:if>
    <xf:if is="property('xenfocus_bg10_image')">
		background-image: url(@xf-xenfocus_bg10_image?v=@xf-xenfocus_cache);
		<xf:if is="property('xenfocus_bg10_size')">
			background-size: @xf-xenfocus_bg10_size;
	    </xf:if>
	    <xf:if is="property('xenfocus_bg10_position')">
			background-position: @xf-xenfocus_bg10_position;
	    </xf:if>
	    background-repeat: @xf-xenfocus_bg10_repeat;
	    background-attachment: @xf-xenfocus_bg10_attachment;
    </xf:if>
}

.focus-background-11(){
    <xf:if is="property('xenfocus_bg11_hex')">
		background-color: @xf-xenfocus_bg11_hex;
    </xf:if>
    <xf:if is="property('xenfocus_bg11_image')">
		background-image: url(@xf-xenfocus_bg11_image?v=@xf-xenfocus_cache);
		<xf:if is="property('xenfocus_bg11_size')">
			background-size: @xf-xenfocus_bg11_size;
	    </xf:if>
	    <xf:if is="property('xenfocus_bg11_position')">
			background-position: @xf-xenfocus_bg11_position;
	    </xf:if>
	    background-repeat: @xf-xenfocus_bg11_repeat;
	    background-attachment: @xf-xenfocus_bg11_attachment;
    </xf:if>
}

.focus-background-12(){
    <xf:if is="property('xenfocus_bg12_hex')">
		background-color: @xf-xenfocus_bg12_hex;
    </xf:if>
    <xf:if is="property('xenfocus_bg12_image')">
		background-image: url(@xf-xenfocus_bg12_image?v=@xf-xenfocus_cache);
		<xf:if is="property('xenfocus_bg12_size')">
			background-size: @xf-xenfocus_bg12_size;
	    </xf:if>
	    <xf:if is="property('xenfocus_bg12_position')">
			background-position: @xf-xenfocus_bg12_position;
	    </xf:if>
	    background-repeat: @xf-xenfocus_bg12_repeat;
	    background-attachment: @xf-xenfocus_bg12_attachment;
    </xf:if>
}


<xf:if is="property('xenfocus_picker')">

.focus-picker{
    display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 15px;
	
	span{
		flex: 1 1 auto;
		display: block;
		position: relative;
        background-color: @xf-pageBg;
		background-size: cover;
		background-position: 50% 50% ;
		border-radius: 4px;
		box-shadow: rgba(0,0,0,0.08) 0px 5px 10px;
		color: #fff;
		font-size: 1.45rem;
		text-shadow: rgba(0,0,0,0.3) 0px 2px 3px;
		-moz-user-select: none;
		-webkit-user-select: none;
		-ms-user-select: none;
		user-select: none;
		max-height: 140px;
		margin: 5px;
		text-align: center;
		cursor: pointer;
		overflow: hidden;
		transition: transform 0.1s ease-in-out;

		&:active{
			//transform:scale(0.95);
			//transform-origin: 50% 50%;
			//transform: translateY(2px);
		}

		// Hide thumbnails when editor is hidden to prevent the images from loading
		html:not(.focus-picker--loaded) &{
			background-image: none !important;
		}

		// Size
		&::before{
			content: '';
			display: block;
			padding-bottom: 100%;
		}

		// Border
		&::after{
			content: '';
			position: absolute; top: 0; left: 0; right: 0; bottom: 0;
			border: 1px solid fade(@xf-textColor, 15%);
			border-radius: inherit;
			<xf:if is="property('styleType') == 'light'">
				box-shadow: inset rgba(255,255,255,0.15) 0px 1px 0px;
			</xf:if>
		}

		i{
			position: absolute; top: 0; left: 0; right: 0; bottom: 0;
			border-radius: inherit;
			overflow: hidden;
		
			&::before{
				display: block;
				/*
				display: flex;
				align-items: center;
				justify-content: center;
				.m-faBase();
        		.m-faContent(@fa-var-check);
				font-size: 36px;
				line-height: 1;
				-webkit-font-smoothing: antialiased;
				-moz-osx-font-smoothing: grayscale;
				*/
				content: '';
				position: absolute;
				left: 0; right: 0;
				top: 0; bottom: 0;
				// top: -20px; bottom: -20px;
				// transform: translateY(20px);
				transition: all 0.1s ease-in-out;
				opacity: 0;
				background: rgba(255,255,255,0.2);
				pointer-events: none;
			}
		}
		@media screen and (min-width: 980px){
			&:hover i::before{
				// transform: translateY(0);
				opacity: 0.8;
			}
		}
	}
	
    // Apply border to selected thumbnail
    <xf:if is="property('xenfocus_bg1_enable')">html[data-focus-bg="1"] & [data-focus-bg="1"]::after,</xf:if>
	<xf:if is="property('xenfocus_bg2_enable')">html[data-focus-bg="2"] & [data-focus-bg="2"]::after,</xf:if>
	<xf:if is="property('xenfocus_bg3_enable')">html[data-focus-bg="3"] & [data-focus-bg="3"]::after,</xf:if>
	<xf:if is="property('xenfocus_bg4_enable')">html[data-focus-bg="4"] & [data-focus-bg="4"]::after,</xf:if>
	<xf:if is="property('xenfocus_bg5_enable')">html[data-focus-bg="5"] & [data-focus-bg="5"]::after,</xf:if>
	<xf:if is="property('xenfocus_bg6_enable')">html[data-focus-bg="6"] & [data-focus-bg="6"]::after,</xf:if>
	<xf:if is="property('xenfocus_bg7_enable')">html[data-focus-bg="7"] & [data-focus-bg="7"]::after,</xf:if>
	<xf:if is="property('xenfocus_bg8_enable')">html[data-focus-bg="8"] & [data-focus-bg="8"]::after,</xf:if>
	<xf:if is="property('xenfocus_bg9_enable')">html[data-focus-bg="9"] & [data-focus-bg="9"]::after,</xf:if>
	<xf:if is="property('xenfocus_bg10_enable')">html[data-focus-bg="10"] & [data-focus-bg="10"]::after,</xf:if>
	<xf:if is="property('xenfocus_bg11_enable')">html[data-focus-bg="11"] & [data-focus-bg="11"]::after,</xf:if>
	<xf:if is="property('xenfocus_bg12_enable')">html[data-focus-bg="12"] & [data-focus-bg="12"]::after,</xf:if>
	.focus-null{
		border-width: 7px;
		border-color: fade(@xf-textColor, 40%);
		<xf:if is="property('styleType') == 'dark'">
			box-shadow: inset rgba(0,0,0,0.3) 0px 0px 0px 1px;
		<xf:else />
			box-shadow: inset rgba(255,255,255,0.2) 0px 0px 0px 1px;
		</xf:if>
	}
}

@supports(display:grid){
	.focus-picker{
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
		grid-gap: 10px;
		gap: 10px;

		span{
			margin: 0;
		}
	}
}

<xf:if is="property('xenfocus_bg1_enable')">
.focus-picker [data-focus-bg='1']{
    .focus-background-1();
}
</xf:if>

<xf:if is="property('xenfocus_bg2_enable')">
	.focus-picker [data-focus-bg='2']{
	    .focus-background-2();
	}
</xf:if>

<xf:if is="property('xenfocus_bg3_enable')">
	.focus-picker [data-focus-bg='3']{
		.focus-background-3();
	}
</xf:if>

<xf:if is="property('xenfocus_bg4_enable')">
	.focus-picker [data-focus-bg='4']{
		.focus-background-4();
	}
</xf:if>

<xf:if is="property('xenfocus_bg5_enable')">
	.focus-picker [data-focus-bg='5']{
		.focus-background-5();
	}
</xf:if>

<xf:if is="property('xenfocus_bg6_enable')">
	.focus-picker [data-focus-bg='6']{
		.focus-background-6();
	}
</xf:if>

<xf:if is="property('xenfocus_bg7_enable')">
	.focus-picker [data-focus-bg='7']{
		.focus-background-7();
	}
</xf:if>

<xf:if is="property('xenfocus_bg8_enable')">
	.focus-picker [data-focus-bg='8']{
		.focus-background-8();
	}
</xf:if>

<xf:if is="property('xenfocus_bg9_enable')">
	.focus-picker [data-focus-bg='9']{
		.focus-background-9();
	}
</xf:if>

<xf:if is="property('xenfocus_bg10_enable')">
	.focus-picker [data-focus-bg='10']{
		.focus-background-10();
	}
</xf:if>

<xf:if is="property('xenfocus_bg11_enable')">
	.focus-picker [data-focus-bg='11']{
		.focus-background-11();
	}
</xf:if>

<xf:if is="property('xenfocus_bg12_enable')">
	.focus-picker [data-focus-bg='12']{
		.focus-background-12();
	}
</xf:if>

// Make sure thumbnail images aren't fixed
.focus-picker span[data-focus-bg]{
	background-attachment: scroll;
}


</xf:if>
	


/*
	----------------
	- Content wrapper
	----------------
*/

// Wrap all content
.focus-wrapper(){}

.focus-wrapper{

	@media (min-width: (@xf-responsiveMedium + 1px)){
		flex: 1 1 auto;
		display: flex;
		flex-direction: column;
		> *{
			flex: 0 0 auto;
		}
	}

	.focus-wrapper();
}

.focus-content(){}
.focus-content{

	@media (min-width: (@xf-responsiveMedium + 1px)){
		flex-grow: 1;
		display: flex;
		flex-direction: column;
		position: relative;

		// If the content is wrapped, a margin is presumably required
		<xf:if is="property('xenfocus_wrapperStyles--background-color')">
			.focus-width &{
				margin-bottom: 10px;
			}	
		</xf:if>
	}

	.focus-content();
}

// Remove borders and border-radius for mobiles
@media (max-width: @xf-responsiveMedium){
	.focus-wrapper,
	.focus-content{
		border-radius: 0;
		border-width: 0;
	}
}

.p-body-inner{
	padding: 10px;

	@media (min-width: (@xf-responsiveEdgeSpacerRemoval + 1px)){
		padding: @content-padding 0;
		// Ensure content doesn't touch the edges of the browser when in desktop view
		width: ~"calc(100vw - (@xf-pageEdgeSpacer * 2))";

		<xf:if is="property('xenfocus_wrapperStyles--background-color')">
	    	.focus-width &{
			    padding-left: @content-padding;
			    padding-right: @content-padding;
		   }		
		</xf:if>
	}
}

// Inherit border-radius on child elements, just because..
.p-body, .p-body-inner{ border-radius: inherit; }



/*
	----------------
	- Nodes
	----------------
*/

// Make subforum icons inherit link colour when they're displayed in a list
.subNodeLink::before,
.subNodeLink.subNodeLink--unread::before{
	text-shadow: none;
	color: inherit;
}

.subNodeLink::before{
	width: 1.5em;
	padding-right: 0px;
}

// Make subforum icons different for read/unread status
.subNodeLink.subNodeLink--forum::before,
.subNodeLink.subNodeLink--category::before{
	content: @subforum-icon;
	font-weight: 300;
}

	// Unread subforums
	.subNodeLink--unread.subNodeLink--forum::before,
	.subNodeLink--unread.subNodeLink--category::before{
		font-weight: 900;
	}

// Subforum grid
.subforum-grid(@debug) when (@debug = true) {

    @supports (display: grid){
		.node-subNodeFlatList{
			display: grid;
			grid-gap: 10px;
			grid-template-columns: repeat(auto-fill, minmax(@subforum-width, 1fr));

			&::before,
			&::after{
				display: none;
			}

			> li{
				margin: 0;
			}

			a{
				display: block;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}
	}

}
.subforum-grid(@subforum-grid);

// Add spacer between stats on smaller screens, when not using grid
@media (max-width: 1000px){
	
	.node-statsMeta{
		margin-right: 20px;

		dl:not(:last-child):after{
			content: '/';
			margin: 0 10px;
			opacity: 0.2;
		}
	}

}

.node-title{
	font-size: (@xf-fontSizeNormal+1);
}

.node-bold-title(@debug) when (@debug = true) {

    .node-title a{
		font-weight: bold;
	}

}
.node-bold-title(@node-bold-title);

// Bold topic title
.node-extra-title{
	font-weight: 600;
}


//@media (min-width: (@xf-responsiveMedium + 1px)){

	.node-extra .node-extra-row .listInline{
		overflow: hidden;
		text-overflow: ellipsis;
	}

//}

// Inherit colour for latest username
.node-extra-user a{
	color: inherit;
}

// Add small margin between last topic title and username
@media (min-width: (@xf-responsiveMedium + 1px)){
	.node-extra-row + .node-extra-row{
		margin-top: 3px;
	}
}

@media (max-width: @xf-responsiveMedium){
	.node-extra-row:not(:last-child){
		margin-right: 4px;
	}
}

// Larger topic and post stats
.node-alt-stats(@debug) when (@debug = true) {

    .node-stats .pairs{
		display: flex;
		flex-direction: column;

		dd{
			font-size: 16px;
			line-height: 1.2;
		}
		dt{
			order: 2;
		}
	}

}
.node-alt-stats(@node-alt-stats);


<xf:if is="property('xenfocus_zebra')">
    .block-body > .node:nth-of-type(even),
    .structItemContainer-group > .structItem--thread:not(.is-highlighted):not(.is-moderated):not(.is-mod-selected):nth-of-type(even){
		background-color: @node-zebra-color;
	}
</xf:if>

// Round off last topic to prevent square corner. Visible when zebra striping is enabled.
.structItem:last-child{
	border-bottom-left-radius: @xf-blockBorderRadius;
	border-bottom-right-radius: @xf-blockBorderRadius;
}




/*
	----------------
	- Node cell spacing
	----------------
*/

.node-body{
	padding: @node-extra-padding;
}

/*
	----------------
	- Node icons
	----------------
*/

<xf:if is="property('xenfocus_iconStyles--color')">
	@node-icon-unread-color: @xf-xenfocus_iconStyles--color;
<xf:else />
	@node-icon-unread-color: inherit;
</xf:if>

<xf:if is="property('xenfocus_iconStyles--background-color')">
	@node-icon-unread-background: @xf-xenfocus_iconStyles--background-color;
<xf:else />
	@node-icon-unread-background: transparent;
</xf:if>

.node-icon{
    width: @xf-xenfocus_iconWidth*1px;
    box-sizing: content-box;
    padding-right: @node-extra-padding;
    
    i{
        line-height: 1;
        height: @xf-xenfocus_iconHeight*1px;
        width: @xf-xenfocus_iconWidth*1px;
        display: flex;
        align-items: center;
        justify-content: center;       
        .xf-xenfocus_iconStyles();

        html[data-logged-in="true"] .node--read &,
    	html[data-logged-in="true"] .node--link &,
    	html[data-logged-in="true"] .node--page &{
    		.xf-xenfocus_iconRead();
        }
        
        .p-body &::before{
            text-shadow: inherit;
            color: inherit;
            display: block;
            text-align: center;
            width: auto;
            line-height: inherit;
        }


		/* Assign FontAwesome icon to nodes */
		&::before{

			<xf:if is="property('xenfocus_iconFA')">
				.node--forum &,
				.node--category &{
					content: '\@xf-xenfocus_iconFA';
					font-weight: @xf-xenfocus_iconWeight;
				}
			</xf:if>

			<xf:if is="property('xenfocus_iconFAold')">
				html[data-logged-in="true"] .node--read &{
					content: '\@xf-xenfocus_iconFAold';
					font-weight: @xf-xenfocus_iconWeightOld;
				}
			</xf:if>

		}
    }

    /* On mobiles.. */
	<xf:if is="property('xenfocus_iconMobile')">
	@media (max-width: @xf-responsiveNarrow){

		width: @xf-xenfocus_iconWidth*@xf-xenfocus_iconMobile*1px;

		& i{
			transform: scale(@xf-xenfocus_iconMobile);
			transform-origin: 0 50%;
		}

	}
	</xf:if>
}


/* If an image is uploaded, apply it and remove potential other styles */
<xf:if is="property('xenfocus_iconImage')">
#XF{

	.node-icon i{
		background: url('@xf-xenfocus_iconImage') no-repeat 50% 50%;
		background-size: contain;
		border-radius: 0;
		box-shadow: none;

		&::before{
			display: none;
		}
	}

	html[data-logged-in='true']& .node--read .node-icon i{
		<xf:if is="property('xenfocus_iconRead--background-image')">
			background-image: url('@xf-xenfocus_iconImageOld');
		<xf:else />
			filter: @node-icon-read-filter;
			opacity: @node-icon-read-opacity;
		</xf:if>
	}

}
</xf:if>


/*
	----------------
	- Node NEW badge
	----------------
*/

.node--unread .node-title::before{
	display: none;
}

<xf:if is="property('xenfocus_new_badge')">
    .node-title a{
		vertical-align: middle;
	}

		html[data-logged-in='true'] .node--unread .node-title::before{
			color: @new-badge-color;
			color: var(--new-badge-color, @new-badge-color);
			background: @new-badge-background;
			background: var(--new-badge-background, @new-badge-background);
			display: inline-block;
			font-size: 9px;
			line-height: 2;
			border-radius: 3px;
			padding: 0 4px;
			margin-right: 4px;
			vertical-align: middle;
		}

</xf:if>


/*
	----------------
	- Minimal nodes and topic lists, with hover
	----------------
*/

// Minimal layout with hover rows
@nodeHover-padding: 0px;
@nodeHover-opacity: 0.06;
@nodeHover-background: @xf-linkColor;

<xf:if is="property('xenfocus_tableLayout') != 'standard'">

@media (min-width: (@xf-responsiveMedium + 1px)){

	/* .block--category{

		<xf:if is="property('xenfocus_tableLayout') == 'minimal'">
			// Increase padding of index boxes
			.block-body{
				padding: @nodeHover-padding 0;
			}
		</xf:if>

		// Add background hover effect
		.node{
			position: relative;
			<xf:if is="property('xenfocus_tableLayout') == 'minimal'">
				border-radius: @xf-blockBorderRadius;
				border: 0;
			</xf:if>

			&::before{
				content: '';
				position: absolute;
				top: 0; bottom: 0;
				<xf:if is="property('xenfocus_tableLayout') == 'minimal'">
				left: @nodeHover-padding; right: @nodeHover-padding;
				<xf:else />
				left: 0; right: 0;
				</xf:if>
				border-radius: inherit;
				background: @nodeHover-background;
				opacity: 0;
			}

			&:hover::before{
				opacity: @nodeHover-opacity;
			}
		}

		.node-body{
			position: relative;
		}

		
		// Clickable rows
		<xf:if is="property('nodeListDescriptionDisplay') != 'tooltip'">
			.node a{
				position: relative;
				z-index: 2;
			}

			.node-title a{
				position: static;
				&::after{
					content: '';
					top: 0; left: 0; right: 0; bottom: 0;
					position: absolute;
					z-index: 1;
					// Potentially helps with Safari bug but not sure
					transform: translate(0,0);
				}
			}	
		</xf:if>

	} */

	.node{

		position: relative;
		<xf:if is="property('xenfocus_tableLayout') == 'minimal'">
			border-radius: @xf-blockBorderRadius;
			// The inline-block style prevents margins from collapsing
			display: inline-block;
			width: 100%;
			vertical-align: top;

			& + .node{
				border-width: 0;
			}

			&:first-child{
				margin-top: @nodeHover-padding;
			}
			&:last-child{
				margin-bottom: @nodeHover-padding;
			}
		</xf:if>

		&::before{
			content: '';
			position: absolute;
			top: 0; bottom: 0;
			<xf:if is="property('xenfocus_tableLayout') == 'minimal'">
				left: @nodeHover-padding; right: @nodeHover-padding;
			<xf:else />
				left: 0; right: 0;
			</xf:if>
			border-radius: inherit;
			background: @nodeHover-background;
			opacity: 0;
		}

		&:hover::before{
			opacity: @nodeHover-opacity;
		}

		.node-body{
			position: relative;
		}

		
		// Clickable rows
		<xf:if is="property('nodeListDescriptionDisplay') != 'tooltip'">
			a{
				position: relative;
				z-index: 2;
			}

			.node-title a{
				position: static;
				&::after{
					content: '';
					top: 0; left: 0; right: 0; bottom: 0;
					position: absolute;
					z-index: 1;
					// Potentially helps with Safari bug but not sure
					transform: translate(0,0);
				}
			}	
		</xf:if>

	}



	<xf:if is="property('xenfocus_tableLayout') == 'minimal'">
		html .structItemContainer-group--sticky{
			&::before,
			&::after{
				margin: @nodeHover-padding -@nodeHover-padding;
				border-width: 1px 0;
			}

			&::before{
				margin-top: -@nodeHover-padding;
			}
			&::after{
				margin-bottom: -@nodeHover-padding;
			}
		}

		.structItemContainer-group,
		form.structItem{
			padding: @nodeHover-padding;
		}
	</xf:if>

	.structItem{
		<xf:if is="property('xenfocus_tableLayout') == 'minimal'">
			border-width: 0;
			border-radius: @xf-blockBorderRadius;
		</xf:if>
		display: flex;
		align-items: center;
		position: relative;

		> *{
			flex: 0 0 auto;
			position: relative;
			display: block;
		}

		.structItem-cell--main,
		.structItem-cell--newThread{
			flex: 1 1 auto;
		}

		.structItemContainer-group &{	

			&::before{
				content: '';
				position: absolute;
				top: 0; left: 0; right: 0; bottom: 0;
				border-radius: inherit;
				background: @nodeHover-background;
				opacity: 0;
			}

			&:hover::before{
				opacity: @nodeHover-opacity;
			}
		}
	}
}
</xf:if>


/*
	----------------
	- Guest message
	----------------
*/

.xenfocus_guestStyle(){};
.xenfocus_guestInternalStyle(){};
.xenfocus_guestWallpaper(){};

<xf:if is="property('xenfocus_guestEnable')">

.focus-guest{
	border-radius: @xf-borderRadiusMedium;
	margin-bottom: 10px;
	padding: 5px;
	padding-bottom: 0;
	// Hide message on certain pages
	.template-login &,
	.template-register_form &{
		display: none;
	}

	a{
		color: inherit;
	}

	.focus-guest-content{
		padding: 15px;
		flex: 1 1 auto;

		p{
			margin: 0.6em 0;
		}

		& p:first-child{
			margin-top: 0;
		}

		& p:last-child{
			margin-bottom: 0;
		}
	}

	.focus-guest-buttons{
		flex: 0 0 auto;
		display: flex;
		align-items: center;
		justify-content: center;
		list-style: none;
		font-size: @xf-fontSizeNormal;
		font-weight: bold;
		//text-transform: uppercase;
		margin: 0;
		padding: 0;

		li{
			flex: 0 0 auto;
			padding: 0;
			margin: 0 4px;
		}

		a{
			display: flex;
			align-items: center;
			text-decoration: none;
			border-radius: 3px;
			position: relative;

			&:active{
				top: 1px;
			}

			&::before{
				.m-faBase();
        		.m-faContent(@fa-var-plus);
				font-size: 14px;
				border-radius: inherit;
				border-top-right-radius: 0;
				border-bottom-right-radius: 0;
			}

			&[href$="login/"]::before{
				.m-faContent(@fa-var-key);
			}

			&::after{
				content: '';
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				pointer-events: none;
				border-radius: inherit;
			}
		}
	}


	&.focus-guest-alert{
		padding: 0px;

		.xf-xenfocus_guestStyle();
		<xf:if is="property('xenfocus_guestStyle--background-color')">
			border: 1px solid xf-intensify(@xf-xenfocus_guestStyle--background-color, 20%);
			border-bottom-color: xf-intensify(@xf-xenfocus_guestStyle--background-color, 30%);
		</xf:if>
		.xenfocus_guestStyle();

		.focus-guest-header{
			/*
			.xf-xenfocus_guestInternalStyle();
			<xf:if is="property('xenfocus_guestInternalStyle--background-color')">
				background-image: linear-gradient(to top, lighten(@xf-xenfocus_guestInternalStyle--background-color, 7%) 0%, @xf-xenfocus_guestInternalStyle--background-color 100%);
				box-shadow: inset xf-intensify(@xf-xenfocus_guestInternalStyle--background-color, 20%) 0px 1px 4px;
			</xf:if>
			border-radius: inherit;
			padding: 14px;
			.xenfocus_guestInternalStyle();
			*/
			display: none;
		}

		.focus-guest-align{
			display: flex;
			align-items: center;

			@media (max-width: @xf-responsiveMedium){
				display: block;
			}
		}

		.focus-guest-buttons{
			line-height: 34px;
			padding: 10px;

			a{
				background-color: xf-default(@xf-xenfocus_guestInternalStyle--background-color, @xf-buttonDefault--background-color);
				color: xf-default(@xf-xenfocus_guestInternalStyle--color, @xf-buttonDefault--color);
				border: 1px solid desaturate(darken(xf-default(@xf-xenfocus_guestInternalStyle--background-color, @xf-buttonDefault--background-color), 15%), 15%);

				&:hover{
					background-color: darken(xf-default(@xf-xenfocus_guestInternalStyle--background-color, @xf-buttonDefault--background-color), 5%);
				}

				&::before{
					padding: 0 7px;
					background: rgba(255,255,255,0.15);
					//border-right: 1px solid fade(desaturate(darken(xf-default(@xf-xenfocus_guestInternalStyle--background-color, @xf-buttonDefault--background-color), 15%), 15%), 80%);
				}

				&::after{
					//background-image: linear-gradient(to bottom, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0) 100%);
					//box-shadow: inset rgba(255,255,255,0.13) 0px 1px 0px;
				}

				span{
					padding: 0 12px;
				}
			}
		}
	}


	&.focus-guest-wallpaper{
		position: relative;

		<xf:if is="property('xenfocus_guestWallpaper--background-image') AND property('xenfocus_guestWallpaperOpacity')">
			&::before{
				background-color: inherit;
				content: '';
				position: absolute; top: 0; left: 0; right: 0; bottom: 0;
				border-radius: inherit;
				opacity: @xf-xenfocus_guestWallpaperOpacity;
			}
			
			> *{
				position: relative;
			}
		</xf:if>

		.xf-xenfocus_guestWallpaper();
		<xf:if is="property('xenfocus_guestWallpaper--background-color')">
			box-shadow: inset fade(xf-intensify(@xf-xenfocus_guestWallpaper--background-color, 40%), 15%) 0px 0px 0px 1px;
		</xf:if>
		background-size: cover;
		background-position: 50% 50%;
		padding: 40px 20px;
		text-align: center;
		font-size: @xf-fontSizeLarge;
		.xenfocus_guestWallpaper();

		.focus-guest-header{
			font-size: @xf-fontSizeLargest;
			font-weight: bold;
			line-height: 1;
		}

		.focus-guest-content{
			padding: 30px 0;
			max-width: 700px;
			margin: 0 auto;
		}

		.focus-guest-buttons{
			line-height: 38px;
			font-size: @xf-fontSizeSmaller;

			li:first-child{
				order: 1;
			}

			a{
				border: 2px solid currentcolor;
				<xf:if is="property('xenfocus_guestWallpaper--color')">
				border-color: fade(@xf-xenfocus_guestWallpaper--color, 70%);
				</xf:if>
				border-radius: 3px;
				padding: 0 12px;
				transition: all 0.1s linear;

				&:hover{
					border-color: currentcolor;
					<xf:if is="property('xenfocus_guestWallpaper--color')">
					background: fade(@xf-xenfocus_guestWallpaper--color, 10%);
					</xf:if>
				}

				&[href$="register/"]{
					<xf:if is="property('xenfocus_guestWallpaper--color')">
						background: @xf-xenfocus_guestWallpaper--color;
						border-color: transparent;
						<xf:if is="property('xenfocus_guestWallpaper--background-color')">
							color: @xf-xenfocus_guestWallpaper--background-color;
						</xf:if>
					</xf:if>

					&:hover{
						<xf:if is="property('xenfocus_guestWallpaper--color')">
						background: lighten(@xf-xenfocus_guestWallpaper--color, 10%);
						</xf:if>
					}
				}

				span{
					padding-left: 7px;
				}
			}
		}
	}

}

</xf:if>




/*
	----------------
	- Footer
	----------------
*/

// Footer
.p-footer{

	> :first-child{
		border-top-left-radius: inherit;
		border-top-right-radius: inherit;
	}

	> :last-child{
		border-bottom-left-radius: inherit;
		border-bottom-right-radius: inherit;
	}

	@media (max-width: @xf-responsiveMedium){
		border-radius: 0;
	}
	
}

.p-footer-inner{
    padding: 15px;
}

	.p-footer-linkList{
		display: flex;
		flex-wrap: wrap;
		justify-content: center;

		> li a{
	        padding: 6px;
	        border-radius: 3px;
	        display: inline-block;
	    }

	    .fa, .fas, .far, .fal, .fab{
			margin-right: .3em;
		}
	}

		// Remove margin on RSS icon
		.p-footer-rssLink .fa-rss{
			margin: 0;
		}

    .p-footer-row-main,
    .p-footer-row-opposite{
        margin-bottom: 0;
    }

@media (min-width: (@xf-responsiveWide + 1px)){
	.p-footer-row-opposite{
		margin-left: auto;
	}
}

.p-footer-row{
	margin-bottom: 0;

	&::before,
	&::after{
		display: none;
	}
}

.p-footer-copyright{
	margin-top: 10px;
	text-align: center;
}

.footer-align,
.p-footer-row{
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;

	@media (max-width: @xf-responsiveWide){
		flex-direction: column;
	}

	> div{
		flex: 0 1 auto;
	}
}

.xenfocus\:branding{
	white-space: nowrap;
	
	&:not(:first-child)::before,
	&:not(:last-child)::after{
		content: ' // ';
		opacity: 0.35;
		margin: 0 8px;
	}
	a{
		color: inherit;
	}
}

// IE11 bug: Make sure footer links don't cause horizontal scrollbar
@media (max-width: @xf-responsiveNarrow){
	.p-footer-linkList,
	.p-footer-copyright{
		max-width: ~"calc(100vw - 18px)";
	}
}

/*
	----------------
	- Mega footer
	----------------
*/

<xf:if is="property('xenfocus_footerEnable')">

.focus-footer{
	padding: 15px;
	border-bottom: 1px solid fade(@xf-publicFooter--color, 10%);

	<xf:if is="!property('xenfocus_footerMobile')">
		@media (max-width: @xf-responsiveMedium){
			display: none;
		}
	</xf:if>
}

.focus-footer__align{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

.focus-footer-col{
	padding: 10px;
	
	@media (min-width: 926px){
		flex: 1 1 10px;
	}

	@media (min-width: 500px) and (max-width: 925px){
		&:not(:only-child){
			width: 50%;
		}
	}

	@media (max-width: 925px){
		&:not(:last-of-type){
			margin-bottom: 40px;
		}
	}

	@media (max-width: 499px){
		width: 100%;
	}

	h4{
		color: fadein(@xf-publicFooter--color, 50%);
		display: block;
		padding: 0;
		margin: 0;
		margin-bottom: 20px;
	}

	a{
		color: inherit;

		&:hover{
			color: @xf-publicFooterLink--color;
		}
	}

	h4 + p{
		margin-top: 0;
	}

	p:last-child{
		margin-bottom: 0;
	}
}

.focus-footer-list{
	list-style: none;
	display: block;
	padding: 0;
	margin: 0;

	& li{
		display: block;

		&:not(:last-child){
			padding-bottom: 5px;
		}
	}
}

.focus-footer + .footer-bottom-wrap{
	background: @mega-footer-copyright;
}

</xf:if>


/*
	----------------
	- Grid layout for nodes
	----------------
*/

<xf:if is="property('xenfocus_gridEnable') OR property('xenfocus_gridToggle')">

// Hide the grid panel for old browsers, and show it using @supports
.focus-editor-panel[data-setting="focus-grid"]{
	display: none;
	@supports (display: grid){
		display: flex;
	}
}

@supports (display: grid){

	.focus-grid{

		--grid-node-icon-width: @node-grid-padding + @node-grid-padding + (@xf-xenfocus_iconWidth*1px);
		@media (max-width: @xf-responsiveNarrow){
			--grid-node-icon-width: @node-grid-padding + @node-grid-padding + (@xf-xenfocus_iconWidth*0.7px);
		}

		<xf:if is="property('xenfocus_grid_nodes')">
			@{xf-xenfocus_grid_nodes}
		<xf:else />
			.block--category
		</xf:if>
		{

			.block-body{
				display: flex;
				flex-wrap: wrap;
				padding: @grid-node-gap;

				// Add a background and padding to the grid wrapper if no background exists on the main content wrapper
				<xf:if is="!property('xenfocus_gridWallpaper')">
					background: @grid-node-wrapper;
				</xf:if>

				.reset-grid-wrapper(@debug) when (@debug = true) {
					background: none;
					border: 0;
					box-shadow: none;
					padding: 0px;
					margin-top: @grid-node-gap;
					@media (min-width: (@xf-responsiveMedium + 1px)){
						margin: @grid-node-gap -@grid-node-gap -@grid-node-gap -@grid-node-gap;
					}
				}
				.reset-grid-wrapper(@reset-grid-wrapper);

			}

			.node{
				flex: 1 0 var(--grid-node-width, @grid-node-width);
				margin: @grid-node-gap;
				max-width: 100%;
				border: 0;

				// Overwrite the inline-styles from the minimal layout
				<xf:if is="property('xenfocus_tableLayout') == 'minimal'">
					display: block;
					width: auto;
				</xf:if>

				@media (max-width: @xf-responsiveMedium){
					max-width: ~"calc(100% - @{grid-node-gap} - @{grid-node-gap})";
				}

				&::before{
					top: @grid-hover-inset;
					left: @grid-hover-inset;
					right: @grid-hover-inset;
					bottom: @grid-hover-inset;
					z-index: 5;
					pointer-events: none;
				}
			}

			.node-body{
				width: auto;
				height: 100%;
				display: grid;
				grid-template-columns: auto 1fr;
				<xf:if is="property('xenfocus_grid_minimal')">
					grid-template-rows: 1fr;
				<xf:else />
					grid-template-rows: 1fr minmax(61px, auto);
				</xf:if>
				grid-template-areas:
			               "nodeicon nodetitle"
			               "nodelatest nodelatest";
				align-items: center;
				border-radius: @xf-blockBorderRadius;
				position: relative;
				padding: 0;

				<xf:if is="!(property('xenfocus_grid_minimal'))">
					&::before{
						content: '';
						display: block;
						align-self: stretch;
						grid-area: nodelatest;
						border-bottom-left-radius: inherit;
						border-bottom-right-radius: inherit;
						position: relative;
						z-index: 2;
					}
				</xf:if>
			}

			.node--link .node-body,
			.node--page .node-body{
				grid-template-rows: 1fr;

				<xf:if is="!(property('xenfocus_grid_minimal'))">
					&::before{
						display: none;
					}
				</xf:if>
			}

			.node-icon{
				grid-area: nodeicon;
				padding: @node-grid-padding;
				padding: var(--node-grid-padding, @node-grid-padding);
				padding-right: 0px;


				<xf:if is="!(property('xenfocus_iconStyles--background-color')) AND !(property('xenfocus_iconRead--background-color'))">
				/* i{
					color: inherit !important;
				} */
				</xf:if>
			}

			.node-main{
				grid-area: nodetitle;
				padding: @node-grid-padding;
				padding: var(--node-grid-padding, @node-grid-padding);
			}

			.node-subNodeMenu{
				display: block;
				margin-top: 5px;
			}

			.node-extra{
				<xf:if is="property('xenfocus_grid_minimal')">
					display: none;
				<xf:else />
					grid-area: nodelatest;
					width: auto;
					margin: 0;
					padding-top: 10px;
					padding-bottom: 10px;
					padding-left: @node-grid-padding + @node-grid-padding + (@xf-xenfocus_iconWidth*1px);
					padding-left: var(--grid-node-icon-width);
					position: relative;
					display: flex;
					align-items: center;
					flex-wrap: wrap;
					z-index: 2;
				</xf:if>

				.node-extra-icon{
					position: absolute;
					left: 0;
					width: @node-grid-padding + @node-grid-padding + (@xf-xenfocus_iconWidth*1px);
					width: var(--grid-node-icon-width);
					padding: 0;
					text-align: center;
					// Ensure the avatar is shown on mobiles
					display: block;
				}

				.node-extra-row{
					flex: 0 0 auto;
					width: 100%;
					white-space: normal;
					height: @xf-lineHeightDefault*1em;
					position: relative;
				}

				.node-extra-row:first-child{
					font-weight: bold;
				}

				.node-extra-user a{
					color: inherit;
				}
				
				// Truncate long topic titles using ellipsis
				.node-extra-row .node-extra-title{
					position: absolute;
					left: 0;
					right: 0;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
			}

			.node-statsMeta{
			<xf:if is="property('xenfocus_grid_stats')">
				// Hide the node stats in grid view if setting is enabled
				display: none;
			<xf:else />
				display: flex;
				align-items: center;
				font-size: 0.9em;
				margin-top: 5px;

				dl{
					padding: 0;
					width: auto;
					flex: 0 0 auto;

					&:not(:last-child):after{
						display: none;
					}
				}

				dt{
					display: none;
				}

				dd:before{
					.m-faBase();
        			.m-faContent(@fa-var-comment);
					margin-right: 5px;
				}

				dl:last-child{
					opacity: 0.4;
					margin-left: 15px;

					dd:before{
						.m-faContent(@fa-var-comments);
					}
				}
			</xf:if>
			}

			.node-stats{
				display: none;
			}



			// Colour scheme: normal or wallpaper
			<xf:if is="property('xenfocus_gridWallpaper')">
				.node-body{
					color: @xf-xenfocus_gridColor;
					background-color: @xf-xenfocus_gridBackground;
					background-size: cover;
					background-position: 50% 50%;
					
					&::before{
						background: rgba(0,0,0,0.3);
					}

					&::after{
						content: '';
						position: absolute; top: 0; left: 0; right: 0; bottom: 0;
						pointer-events: none;
						border-radius: inherit;
						z-index: 3;
						<xf:if is="property('styleType') === 'light'">
						border: 1px solid rgba(0,0,0,0.2);
						<xf:else />
						border: 1px solid rgba(255,255,255,0.2);
						</xf:if>
					}

					a, .node-description, .node-extra-row{
						color: inherit;
					}

					.node-description, .node-extra-row:nth-of-type(2){
						opacity: 0.7;
					}
				}
			<xf:else />
				.node-body{
					.xf-contentBase();
					.xf-blockBorder();
					.reset-grid-wrapper-2(@debug) when (@debug = true) {
						.focus-block-container();
					}
					.reset-grid-wrapper-2(@reset-grid-wrapper);
					
					&::before{
						background: xf-intensify(@xf-contentBg, 1%);
						border-top: 1px solid xf-intensify(@xf-contentBg, 7%);
					}
				}
			</xf:if>

		}

	}
}


// Assign node wallpapers

<xf:if is="property('xenfocus_gridImage') AND property('xenfocus_gridWallpaper')">

	@wallpapernodes: @xf-xenfocus_gridImage;

	.node-wallpapers-mixin(@i: length(@wallpapernodes)) when (@i > 0) {

		.node-wallpapers-mixin(@i - 1);
	    @wallpapernode: extract(@wallpapernodes, @i); 
	    .node--id@{wallpapernode} .node-body {
	        background-image: url('styles/xenfocus/images/node-wallpapers/@{wallpapernode}.jpg?v=@xf-xenfocus_cache');
	    }

	}

	@supports (display: grid){
		.focus-grid{
			.block--category{
				.node-wallpapers-mixin();
			}
		}
	}

</xf:if>




// Hide node stats on smaller screens for a cleaner look
.hide-node-statsMeta-mobile(@debug) when (@debug = true) {
	@media (max-width: @xf-responsiveNarrow){
		.node-statsMeta,
		.focus-grid .block--category .node-statsMeta{
			display: none;
		}
	}
}
.hide-node-statsMeta-mobile(@hide-node-statsMeta-mobile);

</xf:if>

/*
	----------------
	- Blocks
	----------------
*/

.focus-block-container(){}
.focus-block-header(){}
.focus-block-body(){}
.focus-block-container-shift(){};
.focus-block-header-shift(){};
.focus-block-body-shift(){}
.focus-block-minor-header(){}

@{block-container}{
	.focus-block-container();
}

@{block-header}{
	.focus-block-header();
	@media (max-width: @xf-responsiveEdgeSpacerRemoval){
		border-radius: 0;
		border-left-width: 0;
		border-right-width: 0;
	}
}

@{block-body}{
	.focus-block-body();
}

@{block-minor-header}{
	.focus-block-minor-header();
}

// If shadows are added to blocks, remove them from ones which don't need them
.blockMessage.blockMessage--none,
.block--messages .block-container{
	box-shadow: none;
}

.block-header{
	.block-desc{
		color: inherit;
		opacity: 0.7;
	}
	.button{
		text-shadow: none;
	}
}

// Move block wrap from container to body
.block-container-shift(@debug) when (@debug = true) {
    
	.block--category{

		.block-container{
			border-width: 0;
			box-shadow: none;
			background: none;
			.focus-block-container-shift();
		}

		// The #XF is required to overwrite the border-radius defined by: .block-container:not(.block-container--noStripRadius) > :first-child
		#XF & .block-header{
			.focus-block-header-shift();
		}

		.block-body{
			.xf-contentBase();
			.xf-blockBorder();
			border-radius: @xf-blockBorderRadius !important;
			.focus-block-container();
			.focus-block-body-shift();
		}

		@media (max-width: @xf-responsiveEdgeSpacerRemoval){
			.block-container,
			#XF & .block-header,
			.block-body{
				border-radius: 0;
				border-left-width: 0;
				border-right-width: 0;
			}
		}
	}
}
.block-container-shift(@block-container-shift);

.p-body-sidebar .block-row:not(:last-child){
	border-bottom: 1px solid @xf-borderColorFaint;
}

// Inherit border-radius for last forum in each category
.block-body > .node:last-child{
	border-bottom-left-radius: inherit;
	border-bottom-right-radius: inherit;
}

// Fix collapsed margins on sidebar block headers
.p-body-sidebar .block-container,
.p-body-sideNavContent .block-container{
	padding: .01px 0;
}


/*
	----------------
	- Mobile navigation panel
	----------------
*/

.offCanvasMenu--nav
{
	.offCanvasMenu-content
	{
		background: @mobile-navigation-background;
		color: @mobile-navigation-color;
		transition-duration: 0.2s;
	}

	.offCanvasMenu-subList{
		background: fade(@mobile-navigation-color, 10%);

		<xf:if is="property('xenfocus_navIcons')">
			.offCanvasMenu-link{
				padding-left: 34px;
			}
		</xf:if>
	}

	.offCanvasMenu-linkHolder.is-selected{
		color: inherit;
		font-weight: bold;
		background: fade(@mobile-navigation-color, 15%);
		text-transform: inherit;
	}

}


/*
	----------------
	- Countdown
	----------------
*/

<xf:if is="property('xenfocus_countdownEnable')">

.focus-timer{
	text-align: center;
	font-size: 1.2em;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 140px;
	border-radius: @xf-blockBorderRadius;

	<xf:if is="property('xenfocus_countdownColor')">
		color: @xf-xenfocus_countdownColor;
		<xf:if is="property('xenfocus_wrapperStyles--background-color')">
		    @media (min-width: (@xf-responsiveMedium + 1px)){
			    margin-left: -((@xf-elementSpacer) / 2);
				margin-right: -((@xf-elementSpacer) / 2);
			}
	    </xf:if>
	<xf:else />
		.xf-contentBase();
		.xf-blockBorder();
		.focus-block-container();
	</xf:if>

	margin-bottom: 10px;
	padding: 15px;

	html:not(.focus-countdown) &{
		display: none;
	}

	h3{
		margin: 0;
		padding: 0;
		font-size: 1.3em;
		line-height: 1;
		font-weight: normal;
	}

	a{
		color: inherit;
		text-decoration: underline;
	}

	> div{
		padding-top: 12px;
	}

	.focus-timer-numbers{
		line-height: 1em;
		min-height: 1em;
		opacity: 0.8;

		span{
			opacity: 0.6;
		}
	}

	.focus-timer-numbers,
	.focus-timer-desc,
	.focus-timer-desc-done{
		display: none;
	}

	// Hide text depending on countdown state
	&.focus-timer-done .focus-timer-desc-done,
	&.focus-timer-counting .focus-timer-desc,
	&.focus-timer-counting .focus-timer-numbers{
		display: block;
	}

}

// Text for Weeks, days, etc
[data-countdown-text]::before{
	content: attr(data-countdown-text);
}

</xf:if>

/*
	----------------
	- Topic List
	----------------
*/

// Align topic avatar to middle
.structItem-cell{
	vertical-align: middle;
}

// Remove padding from end avatar since its parent alignment is set to center
.structItem-cell.structItem-cell--icon.structItem-cell--iconEnd .structItem-iconContainer{
	padding-top: 0;
}

// Restore top alignment for quick topic form
form[data-xf-init*="quick-thread"] .structItem-cell--icon{
	vertical-align: top;
	align-self: flex-start;
}

// Sync Replies and Views text
.structItem-cell--meta .pairs{
	font-size: @xf-fontSizeSmaller;
}

	.structItem-minor dd{
		color: @xf-textColor;
	}


// Sticky thread separator
.structItemContainer-group--sticky::before,
.structItemContainer-group--sticky::after{
	<xf:if is="property('xenfocus_sticky')">
		display: block;
		padding: 9px;
		font-size: 10px;
		font-weight: bold;
		background: @xf-contentAltBg;
		text-transform: uppercase;
		border: @xf-borderSize solid @xf-borderColorFaint;
		border-width: 1px 0 0 0;
	<xf:else />
		display: none;
	</xf:if>
}

// Make topic start date light in colour
.structItem-parts > li:nth-child(2n){
	color: inherit;
}


/*
	----------------
	- Topic View
	----------------
*/

// Sticky author
<xf:if is="property('xenfocus_stickyAuthor')">
@media (min-width: (@xf-responsiveMedium + 1px)){
	.message-user{
		position: -webkit-sticky;
		position: sticky;
		<xf:if is="property('publicNavSticky') === 'primary' OR property('publicNavSticky') === 'all'">
		top: @sticky-top * 1px + 10px;
		<xf:else />
		top: 10px;
		</xf:if>
	}
}
</xf:if>


// Remove arrow, just because..
.message-userArrow{
	display: none;
}

// Online icon
.message-avatar-wrapper .message-avatar-online::before{
	background: #fff;
	border-color: #fff;
}


// Remove border from post date for minimalism
.message-attribution{
	border-width: 0;
	padding-bottom: 6px;

	@media (min-width: (@xf-responsiveMedium + 1px)){
		padding-top: 2px;
	}
}


// Fade the date and moderation links in an attempt to reduce clutter in posts
<xf:if is="property('faded_post_meta')">
	@media (hover:hover) and (min-width: (@xf-responsiveMedium + 1px)){
		[data-template="thread_view"] .message-attribution,
		.actionBar-set--internal{
			opacity: @post-meta-opacity;
			transition: opacity 0.2s ease-in-out;
			&:hover{
				opacity: 1;
			}
		}
	}
</xf:if>



// Remove user panel background and border
<xf:if is="property('focus_post_minimal')">
	@media (min-width: (@xf-responsiveMedium + 1px)){
		.message-cell.message-cell--user{
			background-color: transparent;
			border-color: transparent !important;
			padding-right: 0;
		}
	}
</xf:if>


// User badge
.userBanner{
	border-radius: @xf-borderRadiusMedium;
	padding-top: 3px;
	padding-bottom: 3px;

	.message-userBanner &{
		margin-top: 5px;
	}
}

// Post font-size
.message-body{
	font-size: @xf-fontSizeNormal + 1px;
	line-height: 1.75;
	
	// Reduce margins above posts because the line separator no longer exists (configured above)
	margin-top: 4px;
	
	// Make sure links are easy to recognise
	a{
		text-decoration: underline;
	}
}


// Place like bar above buttons
/*
.message-footer{
	display: flex;
	flex-direction: column;

	> *{
		flex: 0 0 auto;
		width: 100%;
	}

	.reactionsBar{ order: -1; }
}
*/


// Restyle reactions bar
.reactionsBar{
	background: fade(@xf-textColor, 4%);
	border-width: 0px;
	border-radius: 4px;
	color: @xf-textColorMuted;

	a{
		color: inherit;
	}
	bdi{
		color: @xf-textColor;
	}
	.message &{
		padding: 9px;
	}
}


// Style post buttons
.actionBar-action{
	border-width: 0px;
}

@focus-post-button: @xf-buttonDefault--background-color;
@focus-post-button--minimal--text: @xf-linkColor;
@focus-post-button--minimal--background: @xf-linkColor;
<xf:if is="property('xenfocus_postButton') != 'none'">
    
	.actionBar-set{
		display: flex;
		align-items: center;

		&.actionBar-set--external{
			margin-right: 0;

			.actionBar-action{
				padding: 5px 8px;
				text-decoration: none;

				<xf:if is="property('xenfocus_postButton') == 'button'">
					background: @focus-post-button;
					color: @xf-buttonDefault--color;
					border-width: 1px;
					border-color: xf-intensify(@focus-post-button, 9%);
					.m-transition(background-color);

					&:hover{
						background-color: xf-intensify(@focus-post-button, 5%);
					}
				</xf:if>

				<xf:if is="property('xenfocus_postButton') == 'minimal'">
					color: @focus-post-button--minimal--text;
					background-color: fade(@focus-post-button--minimal--background, 6%);
					font-weight: 600;

					&:hover{
						background-color: fade(@focus-post-button--minimal--background, 10%);
					}

					&.is-selected{
						background-color: fade(@focus-post-button--minimal--background, 20%);
					}
				</xf:if>

				&::before{
					margin-right: 7px;
					display: inline-block;
				}

				&.actionBar-action--like:before{
					.m-faContent(@fa-var-thumbs-up);
				}

				&.actionBar-action--reply:before{
					.m-faContent(@fa-var-quote-left);
				}
			}
		}

		&.actionBar-set--internal{

			color: @xf-textColorMuted;

			a.actionBar-action{
				color: inherit;
				text-decoration: none;
				margin: 0;
				padding-left: 8px;
				padding-right: 8px;

				&:hover{
					color: @xf-textColor;
					background: fade(@xf-textColor, 6%);
				}
			}
		}

		// Add padding to Like button
		.actionBar-action.actionBar-action--reaction .reaction-text{
			padding-left: 5px;
		}
	}

	.actionBar-action.actionBar-action--inlineMod label{
		color: inherit;
	}

</xf:if>


// Like bar
	.likeIcon::before{
		color: @xf-textColorDimmed;
	}

	// Remove underline from Like button
	a.reaction:hover .reaction-text,
	a.reaction:focus .reaction-text{
		text-decoration: none;
	}

	// Force normal text color on active reactions to prevent poor contrast
	.reset-reaction-text(@debug) when (@debug = true) {

		.has-reaction .reaction-text{
			color: inherit;
		}

	}
	.reset-reaction-text(@reset-reaction-text);

	// Reaction popup box
	.tooltip--reaction .tooltip-content{
		background: @xf-contentAltBg;
		border-width: 0;
		<xf:if is="property('styleType') == 'light'">
			box-shadow: 0 0 0 1px rgba(0, 0, 0, .08), 0 2px 2px rgba(0, 0, 0, .15);
		<xf:else />
			box-shadow: inset rgba(255,255,255,0.1) 0px 1px 0px;
		</xf:if>
	}


// Reply form
.fr-box.fr-basic {
	.fr-wrapper {
		background: @editor-bg;
	}
	.fr-element{
		color: @editor-text;
	}
}
.fr-element{
	font-family: @xf-fontFamilyBody;
}


<xf:if is="property('styleType') == 'dark'">
// Fix webkit browser selection
.fr-wrapper ::selection {
	background: #fff;
	color: #222;
}

// Add background to embeds such as facebook
.bbWrapper iframe{
	background: #bbb;
}
</xf:if>


// Swap Preview and Post buttons
.message--quickReply .formButtonGroup-primary,
body[data-template="forum_post_thread"] .formSubmitRow-controls{
	display: flex;
	align-items: center;

	.button--primary{
		order: 1;
		margin-left: 5px;
	}
}


// Bold primary buttons
.button.button--cta,
.button--primary{
	font-weight: bold;
}


// Polls
.pollResult-bar{
	background: fade(@xf-progressBarColor, 20%);
	border-radius: @xf-borderRadiusMedium;

	&::after{
		content: '';
		position: absolute;
		top: 0; left: 0; right: 0; bottom: 0;
		border-radius: inherit;
		border: 1px solid fade(xf-intensify(@xf-progressBarColor, 30%), 10%);
		pointer-events: none;
	}
}

.pollResult.pollResult--showVoters:hover{
	background: @xf-contentAltBg;
}


// Space out username in left column
@media (min-width: (@xf-responsiveWide + 1px)){
	.message-name{
		margin-top: 10px;
	}
}


@media (max-width: @xf-responsiveMedium){
	// Align username vertically with avatar on mobiles
	.message:not(.message--forceColumns) .message-user{
		align-items: center;
	}
	// Remove bottom margin to ensure avatar is aligned correctly
	.message-avatar-wrapper{
		margin-bottom: 0;
	}
}

// Remove margin-top from bbcode boxes if they're the first child
.bbCodeBlock:first-child{
	margin-top: 0;
}



/*
	----------------
	- Profiles
	----------------
*/

// Inherit border-radius
.memberHeader, .memberHeader-main{
	border-top-left-radius: inherit;
	border-top-right-radius: inherit;
}



/*
	----------------
	- Sidebar
	----------------
*/

// Prevent horizontal scrollbar on themes with no background on the content wrapper
<xf:if is="!property('xenfocus_wrapperStyles--background-color')">
@media (max-width: @xf-responsiveWide){
	.p-body-sidebar{
		margin-left: 0;
		margin-right: 0;
	}
}
</xf:if>

// Sidebar icons
.focus-sidebar-icons(@debug) when (@debug = true) {
	.block[data-widget-definition]{

		.block-minorHeader::before{
			.m-faBase();
        	content: @minorHeader-icon;
			display: inline-block;
			transform: translate(0,0);
			margin-right: 6px;
			opacity: 0.7;
		}

	}

	.block-minorHeader::before{

		.block[data-widget-definition="members_online"] &{
			.m-faContent(@fa-var-user);
		}

		.block[data-widget-section="staffMembers"] &{
			.m-faContent(@fa-var-user-shield);
		}

		.block[data-widget-definition="new_profile_posts"] &{
			.m-faContent(@fa-var-user-edit);
		}

		.block[data-widget-definition="forum_statistics"] &{
			.m-faContent(@fa-var-chart-pie);
		}
		
		.block[data-widget-definition="xfmg_gallery_statistics"] &{
			.m-faContent(@fa-var-file-image);
		}

		.block[data-widget-definition="share_page"] &{
			.m-faContent(@fa-var-share-alt);
		}

		.block[data-widget-definition="new_posts"] &{
			.m-faContent(@fa-var-comments);
		}
		
		.block[data-widget-definition="find_member"] &{
			.m-faContent(@fa-var-search);
		}
		
		.block[data-widget-definition="newest_members"] &{
			.m-faContent(@fa-var-user-plus);
		}

	}
}
.focus-sidebar-icons(@focus-sidebar-icons);


// Neaten spacing of blocks on mobiles
@media (max-width: @xf-responsiveWide){
	.p-body-sidebar > *{
		margin-bottom: 10px;
	}
}
/*
	----------------
	- Sticky sidebar
	----------------
*/

.focus-editor-panel[data-setting="focus-sidebar-sticky"]{
	display: none;
}

// Recode sidebar into flex layout
@media (min-width: (@xf-responsiveWide + 1px)){
	.p-body-main--withSidebar{
		display: flex;
		align-items: flex-start;
		
		.p-body-content{
			padding-right: @content-padding;
			// These values are all necessary to ensure the media slider works. Do not change
			flex: 0 1 auto;
			display: block;
			width: ~"calc(100% - @xf-sidebarWidth)";
		}
		
		.p-body-sideNav,
		.p-body-sidebar{
			flex: 0 0 auto;
			// IE fix
			display: block;
		}

	}

	// Switch sidebar to left side if enabled
	.focus-sidebar-flip .p-body-sidebar{
		order: -1;
	}

		// And adjust padding
		.focus-sidebar-flip{
			.p-body-main--withSidebar .p-body-content{
				padding-right: 0;
				padding-left: @content-padding;
			}
		}

	// Sticky side blocks
	<xf:if is="property('xenfocus_stickyBlocks') OR property('xenfocus_stickyToggle')">
	@supports ((position: sticky) or (position: -webkit-sticky)){
		.focus-sidebar-sticky .p-body-sidebar{
			position: -webkit-sticky;
			position: sticky;
			<xf:if is="property('publicNavSticky') === 'primary' OR property('publicNavSticky') === 'all'">
			top: @sticky-top * 1px + 10px;
			<xf:else />
			top: 10px;
			</xf:if>
		}
		.focus-editor-panel[data-setting="focus-sidebar-sticky"]{
			display: flex;
		}
	}
	</xf:if>
}


<xf:if is="property('xenfocus_eventOverlay') === 'snow'">

/*
	----------------
	- Animated snow
	----------------
*/

@-webkit-keyframes snow_1 {
    0% { transform: translate(-250px, 0); }
    100% { transform: translate(250px, 300vh); }
}
@-webkit-keyframes snow_2 {
    0% { transform: translate(0, 0); }
    100% { transform: translate(-100px, 300vh); }
}
@-webkit-keyframes snow_3 {
    0% { transform: translate(-50px, 0); }
    100% { transform: translate(0, 300vh); }
}
@keyframes snow_1 {
    0% { transform: translate(-250px, 0); }
    100% { transform: translate(250px, 300vh); }
}
@keyframes snow_2 {
    0% { transform: translate(0, 0); }
    100% { transform: translate(-100px, 300vh); }
}
@keyframes snow_3 {
    0% { transform: translate(-50px, 0); }
    100% { transform: translate(0, 300vh); }
}

.xenfocus-snow{
	position: fixed;
	top: 0; left: 0;
	width: 100%; height: 100%;
	overflow: hidden;
	z-index: 20;
	pointer-events: none;
}

html:not(.focus-snow) .xenfocus-snow{
	display: none;
}

.xenfocus-snow-panel{
	height: 200vh;
	margin-top: -200vh;
	position: relative;
	will-change: transform;
}

.f-sF{
    position: absolute;
    background: #fff;
    border-radius: 50%;
    box-shadow: #000 0px 1px 2px;

    &:nth-child(1) {
	    left: 5%;
	    top: 5%;
	    width: 4px;
	    height: 5px;
	}
	&:nth-child(2) {
	    left: 15%;
	    top: 10%;
	    width: 6px;
	    height: 5px;
	}
	&:nth-child(3) {
	    left: 23%;
	    top: 40%;
	    width: 2px;
	    height: 5px;
	}
	&:nth-child(4) {
	    left: 36%;
	    top: 15%;
	    width: 3px;
	    height: 3px;
	}
	&:nth-child(5) {
	    left: 47%;
	    top: 70%;
	    width: 2px;
	    height: 5px;
	}
	&:nth-child(6) {
	    left: 53%;
	    top: 50%;
	    width: 1px;
	    height: 2px;
	}
	&:nth-child(7) {
	    left: 61%;
	    top: 90%;
	    width: 2px;
	    height: 1px;
	}
	&:nth-child(8) {
	    left: 78%;
	    top: 14%;
	    width: 6px;
	    height: 4px;
	}
	&:nth-child(9) {
	    left: 85%;
	    top: 86%;
	    width: 5px;
	    height: 1px;
	}
	&:nth-child(10) {
	    left: 96%;
	    top: 59%;
	    width: 3px;
	    height: 1px;
	}
	&:nth-child(11) {
	    left: 3%;
	    top: 91%;
	    width: 4px;
	    height: 4px;
	}
	&:nth-child(12) {
	    left: 18%;
	    top: 31%;
	    width: 3px;
	    height: 3px;
	}
	&:nth-child(13) {
	    left: 26%;
	    top: 52%;
	    width: 5px;
	    height: 6px;
	}
	&:nth-child(14) {
	    left: 38%;
	    top: 36%;
	    width: 5px;
	    height: 3px;
	}
	&:nth-child(15) {
	    left: 43%;
	    top: 81%;
	    width: 3px;
	    height: 2px;
	}
	&:nth-child(16) {
	    left: 54%;
	    top: 11%;
	    width: 2px;
	    height: 3px;
	}
	&:nth-child(17) {
	    left: 67%;
	    top: 62%;
	    width: 4px;
	    height: 1px;
	}
	&:nth-child(18) {
	    left: 76%;
	    top: 9%;
	    width: 5px;
	    height: 5px;
	}
	&:nth-child(19) {
	    left: 87%;
	    top: 2%;
	    width: 3px;
	    height: 1px;
	}
	&:nth-child(20) {
	    left: 98%;
	    top: 98%;
	    width: 4px;
	    height: 1px;
	}
	&:nth-child(21) {
	    left: 7%;
	    top: 60%;
	    width: 6px;
	    height: 5px;
	}
	&:nth-child(22) {
	    left: 14%;
	    top: 45%;
	    width: 2px;
	    height: 5px;
	}
	&:nth-child(23) {
	    left: 25%;
	    top: 65%;
	    width: 1px;
	    height: 3px;
	}
	&:nth-child(24) {
	    left: 36%;
	    top: 11%;
	    width: 3px;
	    height: 4px;
	}
	&:nth-child(25) {
	    left: 49%;
	    top: 24%;
	    width: 3px;
	    height: 4px;
	}
	&:nth-child(26) {
	    left: 58%;
	    top: 37%;
	    width: 2px;
	    height: 5px;
	}
	&:nth-child(27) {
	    left: 69%;
	    top: 49%;
	    width: 6px;
	    height: 6px;
	}
	&:nth-child(28) {
	    left: 75%;
	    top: 55%;
	    width: 6px;
	    height: 3px;
	}
	&:nth-child(29) {
	    left: 84%;
	    top: 86%;
	    width: 5px;
	    height: 3px;
	}
	&:nth-child(30) {
	    left: 94%;
	    top: 90%;
	    width: 4px;
	    height: 1px;
	}
	&:nth-child(31) {
        left: 59%;
        top: 61%;
        width: 4px;
        height: 6px;
    }
}

.xenfocus-snow-panel-1 {
    -webkit-animation: snow_1 8s linear infinite;
    animation: snow_1 8s linear infinite;
}
.xenfocus-snow-panel-2 {
    -webkit-animation: snow_2 13s 0s linear infinite;
    animation: snow_2 13s 0s linear infinite;
}
.xenfocus-snow-panel-3 {
    -webkit-animation: snow_3 16s 6s linear infinite;
    animation: snow_3 16s 6s linear infinite;
}

/* Hide snow on tablets and mobiles */
@media screen and (max-width:979px){
	.focus-editor-panel[data-setting='focus-snow'],
	.xenfocus-snow{
		display: none;
	}
}

</xf:if>




<xf:if is="property('xenfocus_eventOverlay') === 'confetti'">

/*
	----------------
	- Animated confetti
	----------------
*/

@-webkit-keyframes confetti_1 {
    0% { transform: translate(-250px, 0); }
    100% { transform: translate(250px, 300vh); }
}
@-webkit-keyframes confetti_2 {
    0% { transform: translate(0, 0); }
    100% { transform: translate(-100px, 300vh); }
}
@-webkit-keyframes confetti_3 {
    0% { transform: translate(-50px, 0); }
    100% { transform: translate(0, 300vh); }
}
@keyframes confetti_1 {
    0% { transform: translate(-250px, 0); }
    100% { transform: translate(250px, 300vh); }
}
@keyframes confetti_2 {
    0% { transform: translate(0, 0); }
    100% { transform: translate(-100px, 300vh); }
}
@keyframes confetti_3 {
    0% { transform: translate(-50px, 0); }
    100% { transform: translate(0, 300vh); }
}

.xenfocus-confetti{
	position: fixed;
	top: 0; left: 0;
	width: 100%; height: 100%;
	overflow: hidden;
	z-index: 20;
	pointer-events: none;
}

html:not(.focus-confetti) .xenfocus-confetti{
	display: none;
}

.xenfocus-confetti-panel{
	height: 200vh;
	margin-top: -200vh;
	position: relative;
	will-change: transform;
}

.f-con{
    position: absolute;
    width: 9px;
    height: 5px;
    border-radius: 2px;

    &:nth-child(1) {
	    left: 5%;
	    top: 5%;
	}
	&:nth-child(2) {
	    left: 15%;
	    top: 10%;
	}
	&:nth-child(3) {
	    left: 23%;
	    top: 40%;
	}
	&:nth-child(4) {
	    left: 36%;
	    top: 15%;
	}
	&:nth-child(5) {
	    left: 47%;
	    top: 40%;
	}
	&:nth-child(6) {
	    left: 53%;
	    top: 50%;
	}
	&:nth-child(7) {
	    left: 61%;
	    top: 90%;
	}
	&:nth-child(8) {
	    left: 78%;
	    top: 14%;
	}
	&:nth-child(9) {
	    left: 85%;
	    top: 86%;
	}
	&:nth-child(10) {
	    left: 96%;
	    top: 59%;
	}
	&:nth-child(11) {
	    left: 3%;
	    top: 91%;
	}
	&:nth-child(12) {
	    left: 18%;
	    top: 31%;
	}
	&:nth-child(13) {
	    left: 26%;
	    top: 52%;
	}
	&:nth-child(14) {
	    left: 38%;
	    top: 36%;
	}
	&:nth-child(15) {
	    left: 43%;
	    top: 81%;
	}
	&:nth-child(16) {
	    left: 54%;
	    top: 11%;
	}
	&:nth-child(17) {
	    left: 67%;
	    top: 62%;
	}
	&:nth-child(18) {
	    left: 76%;
	    top: 9%;
	}
	&:nth-child(19) {
	    left: 87%;
	    top: 2%;
	}
	&:nth-child(20) {
	    left: 98%;
	    top: 98%;
	}
	&:nth-child(21) {
	    left: 7%;
	    top: 60%;
	}
	&:nth-child(22) {
	    left: 14%;
	    top: 45%;
	}
	&:nth-child(23) {
	    left: 25%;
	    top: 65%;
	}
	&:nth-child(24) {
	    left: 36%;
	    top: 1%;
	}
	&:nth-child(25) {
	    left: 49%;
	    top: 24%;
	}
	&:nth-child(26) {
	    left: 58%;
	    top: 32%;
	}
	&:nth-child(27) {
	    left: 69%;
	    top: 49%;
	}
	&:nth-child(28) {
	    left: 75%;
	    top: 55%;
	}
	&:nth-child(29) {
	    left: 84%;
	    top: 86%;
	}
	&:nth-child(30) {
	    left: 94%;
	    top: 90%;
	}
	&:nth-child(31) {
        left: 59%;
        top: 61%;
    }
}

.xenfocus-confetti-panel-1 {
    -webkit-animation: confetti_1 8s linear infinite;
    animation: confetti_1 8s linear infinite;

    .f-con{
    	background: fade(#e84c4c, 80%);
    	transform: rotate(30deg);
    }
}
.xenfocus-confetti-panel-2 {
    -webkit-animation: confetti_2 13s 0s linear infinite;
    animation: confetti_2 13s 0s linear infinite;

    .f-con{
    	background: fade(#5ec745, 80%);
    	transform: rotate(-10deg);
    }
}
.xenfocus-confetti-panel-3 {
    -webkit-animation: confetti_3 16s 6s linear infinite;
    animation: confetti_3 16s 6s linear infinite;

    .f-con{
    	background: fade(#3895e5, 80%);
    	transform: rotate(50deg);
    }
}

/* Hide snow on tablets and mobiles */
@media screen and (max-width:979px){
	.focus-editor-panel[data-setting='focus-confetti'],
	.xenfocus-confetti{
		display: none;
	}
}

</xf:if>




/*
	----------------
	- Holidays
	----------------
*/

<xf:if is="property('xenfocus_holiday') != 'none'">
	.focus-logo--holiday{
		height: 100%;
		display: flex;
		align-items: center;
	}
</xf:if>

// Valentines
<xf:if is="property('xenfocus_holiday') === 'valentines'">

@-webkit-keyframes valentines{
	0%, 30%, 50%, 60%, 80%, 100% {
		transform: scale(1);
	}
	40% {
		transform: scale(1.12);
	}
	70% {
		transform: scale(1.06);
	}
}

@keyframes valentines{
	0%, 30%, 50%, 60%, 80%, 100% {
		transform: scale(1);
	}
	40% {
		transform: scale(1.12);
	}
	70% {
		transform: scale(1.06);
	}
}

.focus-logo--holiday .fa-heart{
	color: #FF717E;
	animation: valentines 2s infinite linear;
}

</xf:if>

// Halloween
<xf:if is="property('xenfocus_holiday') === 'halloween'">

@keyframes halloween {
	0%,100%{
		transform: translateY(-7%);
	}
	50% {
		transform: translateY(7%);
	}
}

.p-header-logo .focus-logo--holiday img{
	max-height: 60%;
	animation: halloween 3s infinite linear;
}

</xf:if>


/*
	----------------
	- Pagination
	----------------
*/

.focus-pagination(@debug) when (@debug = true) {

	.pageNav{
		display: flex;

		> *{
			flex: 0 0 auto;
			margin-right: @pagination-gap;
		}
	}

		.pageNav-main{
			display: flex;
		}

		.pageNav-jump{
			padding-left: 12px;
			padding-right: 12px;
		}

	.pageNav-page{
		display: block;
		flex: 0 0 auto;
		border-radius: inherit;
		font-weight: bold;

		&:not(:last-child){
			margin-right: @pagination-gap;
		}

		> a{
			padding-left: 11px;
			padding-right: 11px;
		}
	}


	// Make border-radius inherit from parent
	.pageNavWrapper{
		border-radius: @pagination-radius;
	}

		.pageNav,
		.pageNav-main,
		.pageNavSimple,
		.pageNav-jump,
		.pageNavSimple-el,
		#XF .pageNav-page{
			border-radius: inherit;
		}


	// Style pagination buttons
	#XF{

		.pageNav-jump,
		.pageNav-page,
		.pageNavSimple-el{
			background: @pagination-page;
			color: contrast(@pagination-page, @xf-textColor, #fff);
			border-width: 0px;
			box-shadow: @pagination-shadow;

			&:hover,
			&:active{
				background-color: @pagination-page-hover;
				//color: contrast(@pagination-page, rgba(0,0,0,0.8), #fff);
			}
		}

		// Active page
		.pageNav-page.pageNav-page--current,
		.pageNavSimple-el.pageNavSimple-el--current{
			background: @pagination-active;
			color: contrast(@pagination-active, rgba(0,0,0,0.8), #fff);
			border-width: 0;
			box-shadow: @pagination-shadow-active;

			&:hover,
			&:active{
				background-color: xf-intensify(@pagination-active, 3%);
			}
		}

		// First and Last buttons on mobiles
		.pageNavSimple-el{
			padding-left: 10px;
			padding-right: 10px;
		}

	}

	// Add space around prev/next arrow
	.pageNavSimple-el--prev i::before,
	.pageNav-jump.pageNav-jump--prev::before{
		margin-right: 3px;
		width: auto;
	}

	.pageNavSimple-el--next i::before,
	.pageNav-jump.pageNav-jump--next::after{
		margin-left: 3px;
		width: auto;
	}

}
.focus-pagination(@focus-pagination);


/*
	----------------
	- Mobile footer bar
	----------------
*/

<xf:if is="property('xenfocus_mobile_navigation_bar')">

.mobile-navigation-bar{
	<xf:if is="property('xenfocus_mnb_scroll')">
		position: fixed;
	<xf:else />
		position: -webkit-sticky;
		position: sticky;
	</xf:if>
	bottom: 0;
	left: 0;
	right: 0;
	background: @xf-xenfocus_mnb_background;
	color: @xf-xenfocus_mnb_color;
	z-index: 490;
	padding-bottom: env(safe-area-inset-bottom);
	padding-left: env(safe-area-inset-left);
	padding-right: env(safe-area-inset-right);
	<xf:if is="property('styleType') == 'light'">
		box-shadow: rgba(0,0,0,0.1) 0px -1px 0px;
	<xf:else />
		box-shadow: rgba(255,255,255,0.1) 0px -1px 0px;
	</xf:if>
	text-align: center;
	transform: translateY(0);
	transition: transform 0.15s ease-in-out;

	<xf:if is="property('xenfocus_mnb_toggle')">
		// If toggling is allowed, hide the mobile footer if it has been disabled
		html:not(.focus-mobile-navigation-bar) &{
			display: none;
		}
	</xf:if>

	.mobile-navigation-bar--hidden &{
		transform: translateY(~"calc(100% + 2px)");
	}
}

	@supports ((-webkit-backdrop-filter: blur(10px)) or (backdrop-filter:blur(10px))){
		.mobile-navigation-bar{
			background: fade(@xf-xenfocus_mnb_background, 80%);
			-webkit-backdrop-filter: blur(10px);
			backdrop-filter: blur(10px);
		}
	}

	// Hide the footer bar and its toggle on desktops
	@media (min-width: (@xf-responsiveMedium + 1px)){
		.mobile-navigation-bar,
		.focus-editor-panel[data-setting='focus-mobile-navigation-bar']{
			display: none;
		}
	}

.mobile-navigation-bar__list{
	display: flex;
	justify-content: space-around;
	padding: 0;
	margin: 0;
	list-style: none;

	li{
		flex: 1 1 10px;
	}

	a{
		display: block;
		padding: 6px 0;
		text-decoration: none;
		color: inherit;
	}
}

	.mobile-navigation-bar__icon{
		display: flex;
		justify-content: center;
		align-items: center;
		height: 28px;
		font-size: 20px;

		i{
			font-weight: @xf-xenfocus_mnb_weight;
		}
	}

	.mobile-navigation-bar__text{
		font-size: 10px;
		text-transform: capitalize;
	}

	// Adjust elements to accommodate for the bottom bar
	@media (max-width: @xf-responsiveMedium){
		.focus-mobile-navigation-bar.has-hiddenscroll .u-scrollButtons{
			bottom: 80px;
		}

		.focus-mobile-navigation-bar .p-footer-inner{
			padding-bottom: 75px;
		}

		@supports (padding-bottom: env(safe-area-inset-bottom)){
			.focus-mobile-navigation-bar.has-hiddenscroll .u-scrollButtons{
				--mobile-navigation-bar--padding-bottom: env(safe-area-inset-bottom);
				bottom: ~"calc(var(--mobile-navigation-bar--padding-bottom) + 80px)";
			}
		}
	}

// Active icons
[data-template="forum_list"] .mobile-navigation-bar--forums,
[data-template="forum_view"] .mobile-navigation-bar--forums,
[data-template="thread_view"] .mobile-navigation-bar--forums,
[data-template="whats_new"] .mobile-navigation-bar--whatsnew,
[data-template="whats_new_posts"] .mobile-navigation-bar--whatsnew,
[data-template="whats_new_profile_posts"] .mobile-navigation-bar--whatsnew,
[data-template="news_feed"] .mobile-navigation-bar--whatsnew,
[data-template="latest_activity"] .mobile-navigation-bar--whatsnew,
[data-template="forum_post_thread"] .mobile-navigation-bar--postthread,
[data-template="login"] .mobile-navigation-bar--login,
[data-template="register"] .mobile-navigation-bar--register,
[data-template="search_form"] .mobile-navigation-bar--search,
[data-template="search_results"] .mobile-navigation-bar--search{
	color: @xf-xenfocus_mnb_active;
	font-weight: bold;
}

</xf:if>

/*
	----------------
	- Animated blocks onload
	----------------
*/
/*
@keyframes loading-blocks{
	from{
		opacity: 0;
		transform: translateY(30px);
	}
	to{
		opacity: 1;
		transform: translateY(0px);
	}
}

@supports (animation-name: name){
	.block--category,
	.p-body-sidebar .block{
		opacity: 0;
		transform: translateY(30px);


		animation-name: loading-blocks;
		animation-duration: 0.4s;
		animation-fill-mode: forwards;
		animation-timing-function: ease-in-out;
		animation-iteration-count: 1;
		animation-delay: 0s;

		&:nth-child(2){
			animation-delay: 0.1s;
		}

		&:nth-child(3){
			animation-delay: 0.2s;
		}

		&:nth-child(4){
			animation-delay: 0.3s;
		}
	}
}
*/

/*
	----------------
	- iPhoneX Landscape
	----------------
*/

// iPhoneX landscape padding
@media (max-width: @xf-responsiveWide) and (orientation:landscape) and (-webkit-device-pixel-ratio : 3) {
	.p-header,
	.p-nav,
	body .p-body-inner,
	.focus-width .p-body-inner,
	.focus-footer
	{
		padding-left: ~"max(0px, env(safe-area-inset-left))";
    	padding-right: ~"max(0px, env(safe-area-inset-right))";
    }
    // Remove default
    .p-nav-inner{
    	padding-left: 0;
    	padding-right: 0;
    }
}

/*
	----------------
	- Post thread pop up
	----------------
*/

<xf:if is="property('styleType') == 'light'">
	@treeEntryChooser-header--hover: fade(@xf-linkColor, 6%);
<xf:else />
	@treeEntryChooser-header--hover: fade(@xf-linkColor, 6%);
</xf:if>

.block--treeEntryChooser{
	margin: 0;
	padding: 10px;

	&:not(:first-child){
		padding-top: 0;
	}

	a:hover{
		text-decoration: none;
	}

	.block-container{
		border-width: 0;
		box-shadow: none;
		background: @xf-paletteNeutral1;
	}

	.block-header{
		border-radius: 3px !important;
		padding: 12px 18px;
		margin: 0 0 10px 0;
		border-width: 1px;

		&::before,
		&::after{
			display: none;
		}
	}

	.block-row.block-row--separated + .block-row{
		border-width: 0;
	}

	&.block .block-row{
		padding: 10px 18px;
		border-radius: 3px !important;
	}

	// Hover
	.block-row.block-row--clickable:hover{
		background: @treeEntryChooser-header--hover;
	}

	// Forums without a category
	> .block-container > .block-row:first-child{
		margin-top: 30px;
	}
}

/*
	----------------
	- Other
	----------------
*/

// Ensure bottom margin is the same size as content padding
@media (min-width: (@xf-responsiveEdgeSpacerRemoval + 1px)){
	.p-body-header{
		margin-bottom: @content-padding;
	}
}

// Hide elements based on desktop or mobile
@media (min-width: (@xf-responsiveMedium + 1px)){
	.hide\:desktop{
		display: none !important;
	}
}
@media (max-width: @xf-responsiveMedium){
	.hide\:mobile{
		display: none !important;
	}
}

// Media gallery
.itemList-itemOverlay {
    height: auto;
    bottom: -70px;
}

// Remove transition from social links
.shareButtons-button{
	transition: none;
}

// Scroll buttons
.button.button--scroll, a.button.button--scroll {
    //box-shadow: 1px 2px 10px 0 rgba(0,0,0,0.25);
    box-shadow: none;
    border-color: transparent;
}

// Staff bar
.p-staffBar{
    border: 0;
    border-radius: @xf-blockBorderRadius;
    margin-bottom: 10px;
}

// Admin and moderator bar
.p-staffBar-inner{
	padding-left: 4px;
	padding-right: 4px;
	// Reset default
	max-width: none;

	.hScroller-scroll{
		display: flex;
	}
}

.p-staffBar-link{
	padding-left: 10px;
	padding-right: 10px;

	&::before{
		.m-faBase();
        .m-faContent(@fa-var-lock);
		display: inline-block;
		margin-right: 6px;
	}

	&[data-xf-key="alt+m"]::before{
		.m-faContent(@fa-var-check-square);
	}

	&[href*='/admin']{
		margin-left: auto;
	}
}

// Add a background to certain boxes if a wallpaper design is used
.focus-wallpaper(@debug) when (@debug = true) {
    @{focus-wallpaper-elements}{
        .xf-contentBase();
        .xf-blockBorder();
        border-radius: @xf-blockBorderRadius;
        padding: 14px;
        .focus-block-container();
    }
	.p-body-header{
		padding: 20px 15px;
	}
}
.focus-wallpaper(@focus-wallpaper);





// Node description
.node-description{
    margin-top: 5px;
    color: @xf-textColorMuted;
}

// Soften shadows on menus
.menu{
	box-shadow: 0 5px 30px 0 rgba(0,0,0,0.25), rgba(0,0,0,0.15) 0px 3px 5px;
}

// Tooltip blur
.tooltip--basic .tooltip-content{
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
}

// Avatars
.avatar{
	position: relative;
	//box-shadow: rgba(0,0,0,0.1) 0px 3px 10px;
	text-shadow: none;

	&::after{
		content: '';
		display: block;
		position: absolute;
		top: 0; left: 0; right: 0; bottom: 0;
		border: 1px solid fade(@xf-textColor, 15%);
		border-radius: inherit;
		pointer-events: none;
		<xf:if is="property('styleType') == 'light'">
			box-shadow: inset rgba(0,0,0,0.1) 0px 1px 3px;
		</xf:if>
	}

	// Fix alignment in 'Edit Avatar' box
	&.js-avatarCropper{
		top: 0 !important;
		left: 0 !important;
	}
}


/*
	----------------
	- BB code tag
	----------------
*/

<xf:if is="property('styleType') == 'light'">
@bbcode-comment: #a50;
@bbcode-tag: #170;
@bbcode-boolean: #219;
@bbcode-symbol: #708;
@bbcode-selector: #05a;
@bbcode-deleted: #d44;
@bbcode-inserted: #292;
@bbcode-string: #a11;
@bbcode-number: #164;
@bbcode-char: #00c;
@bbcode-variable: #05a;
@bbcode-class-name: #00f;
@bbcode-constant: #05a;
<xf:else />
@bbcode-comment: #ebe7e3;
@bbcode-tag: #e8bd89;
@bbcode-boolean: #e8bd89;
@bbcode-symbol: #acc47e;
@bbcode-selector: #7ea9c4;
@bbcode-deleted: #797979;
@bbcode-inserted: #292;
@bbcode-string: #7ea9c4;
@bbcode-number: #e8bd89;
@bbcode-char: #df897a;
@bbcode-variable: #df897a;
@bbcode-class-name: #df897a;
@bbcode-constant: #05a;
</xf:if>

.bbCodeCode
{
	.prism-token
	{
		&.prism-comment,
		&.prism-prolog,
		&.prism-doctype,
		&.prism-cdata
		{
			color: @bbcode-comment;
		}

		&.prism-tag
		{
			color: @bbcode-tag;
		}

		&.prism-boolean
		{
			color: @bbcode-boolean;
		}

		&.prism-symbol,
		&.prism-atrule,
		&.prism-keyword
		{
			color: @bbcode-symbol;
		}

		&.prism-selector,
		&.prism-function
		{
			color: @bbcode-selector;
		}

		&.prism-deleted
		{
			color: @bbcode-deleted;
		}

		&.prism-inserted
		{
			color: @bbcode-inserted;
		}

		&.prism-string,
		&.prism-attr-value
		{
			color: @bbcode-string;
		}

		&.prism-number
		{
			color: @bbcode-number;
		}

		&.prism-attr-name,
		&.prism-char,
		&.prism-builtin
		{
			color: @bbcode-char;
		}

		&.prism-regex,
		&.prism-important,
		&.prism-variable,
		&.prism-package
		{
			color: @bbcode-variable;
		}

		&.prism-class-name,
		&.prism-important,
		&.prism-bold
		{
			color: @bbcode-class-name;
		}

		&.prism-italic,
		&.prism-constant
		{
			color: @bbcode-constant;
		}
	}
}

// Prevent code block titles from being copied
.bbCodeBlock--code .bbCodeBlock-title{
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	pointer-events: none;
}
	
/*
	----------------
	- Bug fixes
	----------------
*/

// Reduce z-index to prevent "Click to expand" quotes from overlapping fixed headers
.bbCodeBlock-expandLink{ z-index: 1; }

// Assign a more appropriate background to overlays since they currently use the page background
.overlay{
	background: @xf-contentBg;
}

// Correctly align icon in "incorrect password" message
.blockMessage--iconic::before{
    top: 50%;
    transform: translateY(-50%);
}

// Prevent wide menu's from spilling over mobiles: This occurred with the search menu 
.menu.menu--wide{
	max-width: ~"calc(100wv - 6px)";
}

// Make the css-checkbox inherit colours of surrounding text
label.iconic > input + i::before,
label.iconic > input + i:hover::before,
label.iconic:hover > input + i::before{
	color: inherit;
}

// Clear floated user links
.p-nav-opposite{
	.m-clearFix();
}

// Correctly colour the arrows in the date picker
.pika-prev, .pika-next{ color: inherit; }

// [AL] Original Poster Highlight
div.ribbonBox .ribbon-wrapper{ z-index: 1; }

// Fix anti-spam plugin on Quick Thread
.structItem > script{ display: none; }



// Modify borders and hover color of buttons by using modified mixins
.focus-m-buttonColorVariation(@bgColor; @textColor){
	.m-buttonBorderColorVariation(@bgColor);

	&:hover,
	&:active,
	&:focus{
		background-color: xf-intensify(@bgColor, 5%);
	}
}

// button--splitTrigger has been removed since it doesnt appear in any HTML template. Maybe redundant?
.focus-m-buttonBlockColorVariationSimple(@color){
	.focus-m-buttonBorderColorVariation(@color);

	/*
	&:not(.button--splitTrigger):not(.button--provider),
	&.button--splitTrigger:not(.button--provider) > .button-text,
	&.button--splitTrigger:not(.button--provider) > .button-menu{
		&:hover,
		&:focus,
		&:active{
			background-color: xf-intensify(@color, 5%);
		}
	}
	*/
	// Instead of the above, use this...
	&:not(.button--provider){
		&:hover,
		&:focus,
		&:active{
			background-color: xf-intensify(@color, 5%);
		}
	}
}

.focus-m-buttonBorderColorVariation(@borderColor){
	border-color: xf-intensify(@borderColor, 9%);

	/*
	&.button--splitTrigger{
		> .button-text { border-right-color: xf-intensify(@borderColor, 9%); }
		> .button-menu { border-left-color: xf-intensify(@borderColor, 9%); }
	}
	*/
}

.button,
a.button{
	.focus-m-buttonBlockColorVariationSimple(xf-default(@xf-buttonDefault--background-color, transparent));

	&.button--primary{
		.focus-m-buttonBlockColorVariationSimple(xf-default(@xf-buttonPrimary--background-color, transparent));
	}
	&.button--cta{
		.focus-m-buttonBlockColorVariationSimple(xf-default(@xf-buttonCta--background-color, transparent));
	}
	&.button--link{
		.focus-m-buttonBorderColorVariation(@xf-borderColor);
		&:hover,
		&:active,
		&:focus{
			background: xf-intensify(@xf-contentBg, 5%);
		}
	}
	&.is-disabled{
		.focus-m-buttonBorderColorVariation(xf-default(@xf-buttonDisabled--background-color, transparent));
	}
}

.toggleButton{
	> span{
		.focus-m-buttonBorderColorVariation(xf-default(@xf-buttonDisabled--background-color, transparent));
	}
	> input:checked + span{
		.focus-m-buttonBlockColorVariationSimple(xf-default(@xf-buttonDefault--background-color, transparent));
	}
}

// Buttons in block-header
.block-header .button.button--link{
	background: fade(@xf-blockHeader--color, 10%);
	color: inherit;
	border-color: fade(@xf-blockHeader--color, 40%);

	&:hover{
		background: fade(@xf-blockHeader--color, 20%);
	}
}


:root{
	@media (max-width: @xf-responsiveNarrow){
		--responsive: 'max-width responsiveNarrow';
	}

	@media (min-width: (@xf-responsiveNarrow + 1px)) and (max-width: @xf-responsiveMedium){
		--responsive: 'max-width responsiveMedium';
	}

	@media (min-width: (@xf-responsiveMedium + 1px)) and (max-width: @xf-responsiveWide){
		--responsive: 'max-width responsiveWide';
	}

	@media (min-width: (@xf-responsiveWide + 1px)){
		--responsive: 'Larger than responsiveWide';
	}





	--xenfocus-version: '2.1.1.1';
}]]>
</template>


-<template title="xenfocus_branding" version_string="" version_id="0" addon_id="" type="public">

-<![CDATA[<span class='xenfocus:branding'>
	<a href='https://xenfocus.com' target='_blank' rel="noreferrer">XenForo theme</a> by xenfocus
</span>]]>
</template>


-<template title="xenfocus_countdown" version_string="" version_id="0" addon_id="" type="public">

-<![CDATA[<xf:if is="property('xenfocus_countdownEnable')">

	<div class='focus-timer'>

		<xf:if is="property('xenfocus_countdownTitle')"><h3>{{property('xenfocus_countdownTitle')}}</h3></xf:if>
		<xf:if is="property('xenfocus_countdownDesc')"><div class='focus-timer-desc'>{{property('xenfocus_countdownDesc')}}</div></xf:if>
		<xf:if is="property('xenfocus_countdownDone')"><div class='focus-timer-desc-done'>{{property('xenfocus_countdownDone')}}</div></xf:if>
		<div class='focus-timer-numbers'></div>

	</div>

</xf:if>]]>
</template>


-<template title="xenfocus_countdown_js" version_string="" version_id="0" addon_id="" type="public">

-<![CDATA[<xf:if is="property('xenfocus_countdownEnable')">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.countdown/2.2.0/jquery.countdown.min.js"></script>
	<xf:if is="property('xenfocus_countdownZone')">
		<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.13/moment-timezone-with-data-2012-2022.min.js"></script>
	</xf:if>
	<script type='text/javascript'>
	$(document).ready(function(){
		
		<xf:if is="property('xenfocus_countdownZone')">
			var focusTimer = moment.tz("{{property('xenfocus_countdownDate')}}", "{{property('xenfocus_countdownZone')}}");
			var focusDate = focusTimer.toDate();
		<xf:else />
			var focusDate = "{{property('xenfocus_countdownDate')}}";
		</xf:if>

		$('.focus-timer-numbers').countdown(focusDate)
		.on('update.countdown', function(event) {
			var format = '%H:%M:%S';
			if(event.offset.totalDays > 0) {
				format = '%-d <span data-countdown-text="day%!d and"></span> ' + format;
			}
			if(event.offset.weeks > 0) {
				format = '%-w <span data-countdown-text="week%!w,"></span> ' + format;
			}
			$(this).html(event.strftime(format));
			$('.focus-timer').addClass('focus-timer-counting');
		})
		.on('finish.countdown', function(event) {
			$('.focus-timer').addClass('focus-timer-done');
		});

	});
	</script>
</xf:if>]]>
</template>


-<template title="xenfocus_editor" version_string="" version_id="0" addon_id="" type="public">

-<![CDATA[<xf:set var="$toggle-icon"><div class='focus-editor-toggle'><i class='focus-toggle'><i></i></i></div></xf:set>
<xf:if is="property('xenfocus_themeEditor')">
	<div class='focus-editor-wrap'>
		<div class='focus-editor-overlay' data-xenfocus-editor></div>
		<div class='focus-editor'>

			<div class='focus-editor-scroll'>

				<xf:if is="property('xenfocus_picker')">
					<div>
						<div class='focus-editor__title' data-focus-text='Background Picker'></div>
						<div class="focus-picker">
						    <xf:if is="property('xenfocus_bg1_enable')"><span data-focus-bg='1'><i></i></span></xf:if>
						    <xf:if is="property('xenfocus_bg2_enable')"><span data-focus-bg='2'><i></i></span></xf:if>
						    <xf:if is="property('xenfocus_bg3_enable')"><span data-focus-bg='3'><i></i></span></xf:if>
						    <xf:if is="property('xenfocus_bg4_enable')"><span data-focus-bg='4'><i></i></span></xf:if>
						    <xf:if is="property('xenfocus_bg5_enable')"><span data-focus-bg='5'><i></i></span></xf:if>
						    <xf:if is="property('xenfocus_bg6_enable')"><span data-focus-bg='6'><i></i></span></xf:if>
							<xf:if is="property('xenfocus_bg7_enable')"><span data-focus-bg='7'><i></i></span></xf:if>
							<xf:if is="property('xenfocus_bg8_enable')"><span data-focus-bg='8'><i></i></span></xf:if>
							<xf:if is="property('xenfocus_bg9_enable')"><span data-focus-bg='9'><i></i></span></xf:if>
							<xf:if is="property('xenfocus_bg10_enable')"><span data-focus-bg='10'><i></i></span></xf:if>
							<xf:if is="property('xenfocus_bg11_enable')"><span data-focus-bg='11'><i></i></span></xf:if>
							<xf:if is="property('xenfocus_bg12_enable')"><span data-focus-bg='12'><i></i></span></xf:if>
						</div>
					</div>
				</xf:if>

				<xf:include template="xenfocus_editor_hook_1" />

				<div>
					<div class='focus-editor__title' data-focus-text='Customize layout'></div>
					
					<xf:if is="property('xenfocus_mnb_toggle')">
						<div class='focus-editor-panel' data-setting='focus-mobile-navigation-bar' data-setting-default='on'>
							{$toggle-icon|raw}
							<div class='focus-editor-text' data-setting-title='Mobile navigation bar?' data-setting-desc='Display a navigation bar at the bottom of the site when using a mobile device?'></div>
						</div>
					</xf:if>

					<xf:if is="property('xenfocus_widthToggle')">
						<div class='focus-editor-panel' data-setting='focus-fluid' data-setting-default='<xf:if is="property('xenfocus_widthEnable')">on<xf:else />off</xf:if>'>
							{$toggle-icon|raw}
							<div class='focus-editor-text' data-setting-title='Fluid width?' data-setting-desc='Enabling this will increase the width of the site so it occupies the width of your browser. Useful for larger screens.'></div>
						</div>
					</xf:if>

					<xf:if is="property('xenfocus_gridToggle')">
						<div class='focus-editor-panel' data-setting='focus-grid' data-setting-default='<xf:if is="property('xenfocus_gridEnable')">on<xf:else />off</xf:if>'>
							{$toggle-icon|raw}
							<div class='focus-editor-text' data-setting-title='Grid layout?' data-setting-desc='If enabled, the forums will be displayed as a grid instead of a table.'></div>
						</div>
					</xf:if>

					<xf:if is="property('xenfocus_stickyToggle')">
						<div class='focus-editor-panel' data-setting='focus-sidebar-sticky' data-setting-default='<xf:if is="property('xenfocus_stickyBlocks')">on<xf:else />off</xf:if>'>
							{$toggle-icon|raw}
							<div class='focus-editor-text' data-setting-title='Sticky sidebar?' data-setting-desc='If enabled, the sidebar will stick to the top of the screen for easy access.'></div>
						</div>
					</xf:if>

					<xf:if is="property('xenfocus_sidebarFlipToggle')">
						<div class='focus-editor-panel' data-setting='focus-sidebar-flip' data-setting-default='<xf:if is="property('xenfocus_sidebarFlip')">on<xf:else />off</xf:if>'>
							{$toggle-icon|raw}
							<div class='focus-editor-text' data-setting-title='Flip sidebar?' data-setting-desc='Flip the sidebar between the left and right sides.'></div>
						</div>
					</xf:if>

					<xf:if is="property('xenfocus_eventOverlay') === 'snow'">
						<div class='focus-editor-panel' data-setting='focus-snow' data-setting-default='<xf:if is="property('xenfocus_eventOverlayDefault')">on<xf:else />off</xf:if>'>
							{$toggle-icon|raw}
							<div class='focus-editor-text' data-setting-title='Enable snow effect?' data-setting-desc='If enabled, animated snow will fall across your browser.'></div>
						</div>
					</xf:if>

					<xf:if is="property('xenfocus_eventOverlay') === 'confetti'">
						<div class='focus-editor-panel' data-setting='focus-confetti' data-setting-default='<xf:if is="property('xenfocus_eventOverlayDefault')">on<xf:else />off</xf:if>'>
							{$toggle-icon|raw}
							<div class='focus-editor-text' data-setting-title='Enable confetti?' data-setting-desc='If enabled, animated confetti will fall across your browser.'></div>
						</div>
					</xf:if>

					<xf:if is="property('xenfocus_countdownEnable') AND property('xenfocus_countdownToggle')">
						<div class='focus-editor-panel' data-setting='focus-countdown' data-setting-default='on'>
							{$toggle-icon|raw}
							<div class='focus-editor-text' data-setting-title='Show countdown?' data-setting-desc='If enabled, a countdown will be visible at the top of your page.'></div>
						</div>
					</xf:if>
					
					<xf:include template="xenfocus_editor_hook_2" />
					
				</div>

			</div>

			<div class='focus-editor-save'>
				<button data-xenfocus-editor data-focus-text='Save'></button>
			</div>

		</div>
	</div>
</xf:if>]]>
</template>


-<template title="xenfocus_editor_hook_1" version_string="" version_id="0" addon_id="" type="public">

-<![CDATA[]]>
</template>


-<template title="xenfocus_editor_hook_2" version_string="" version_id="0" addon_id="" type="public">

-<![CDATA[]]>
</template>


-<template title="xenfocus_event_logo" version_string="" version_id="0" addon_id="" type="public">

-<![CDATA[<xf:if is="property('xenfocus_holiday') != 'none'">
	<span class='focus-logo--holiday'>
		<xf:if is="property('xenfocus_holiday') === 'valentines'">
			<i class="fas fa-heart" aria-hidden="true"></i>
		<xf:elseif is="property('xenfocus_holiday') === 'halloween'" />
			<img src="{{ base_url('styles/xenfocus/images/holidays/halloween-ghost.png') }}" alt='' />
		</xf:if>
	</span>
</xf:if>]]>
</template>


-<template title="xenfocus_event_overlay" version_string="" version_id="0" addon_id="" type="public">

-<![CDATA[<xf:if is="property('xenfocus_eventOverlay') === 'snow'">
<script>
$(document).ready(function(){
	
	$("body").append("<div class='xenfocus-snow'><div class='xenfocus-snow-panel xenfocus-snow-panel-1'><i class='f-sF'></i></div><div class='xenfocus-snow-panel xenfocus-snow-panel-2'><i class='f-sF'></i></div><div class='xenfocus-snow-panel xenfocus-snow-panel-3'><i class='f-sF'></i></div></div>");
	
	$(".xenfocus-snow-panel").each(function(){
		var snowlist = $(this);
		for ( i = 0; i < 25;i++){
		    snowlist.find('.f-sF:first').clone().appendTo(snowlist);
		}
	});
	
});
</script>
</xf:if>

<xf:if is="property('xenfocus_eventOverlay') === 'confetti'">
<script>
$(document).ready(function(){
	
	$("body").append("<div class='xenfocus-confetti'><div class='xenfocus-confetti-panel xenfocus-confetti-panel-1'><i class='f-con'></i></div><div class='xenfocus-confetti-panel xenfocus-confetti-panel-2'><i class='f-con'></i></div><div class='xenfocus-confetti-panel xenfocus-confetti-panel-3'><i class='f-con'></i></div></div>");
	
	$(".xenfocus-confetti-panel").each(function(){
		var confettilist = $(this);
		for ( i = 0; i < 17;i++){
		    confettilist.find('.f-con:first').clone().appendTo(confettilist);
		}
	});
	
});
</script>
</xf:if>]]>
</template>


-<template title="xenfocus_extra_js" version_string="" version_id="0" addon_id="" type="public">

-<![CDATA[]]>
</template>


-<template title="xenfocus_footer" version_string="" version_id="0" addon_id="" type="public">

-<![CDATA[<xf:if is="property('xenfocus_footerEnable')">

	<div class='focus-footer'>
		<div class='focus-width focus-footer__align'>

			<xf:if is="property('xenfocus_footer1')"><div class='focus-footer-col focus-footer-col--1'>{{property('xenfocus_footer1')}}</div></xf:if>
			<xf:if is="property('xenfocus_footer2')"><div class='focus-footer-col focus-footer-col--2'>{{property('xenfocus_footer2')}}</div></xf:if>
			<xf:if is="property('xenfocus_footer3')"><div class='focus-footer-col focus-footer-col--3'>{{property('xenfocus_footer3')}}</div></xf:if>
			<xf:if is="property('xenfocus_footer4')"><div class='focus-footer-col focus-footer-col--4'>{{property('xenfocus_footer4')}}</div></xf:if>

		</div>
	</div>

</xf:if>]]>
</template>


-<template title="xenfocus_guest" version_string="" version_id="0" addon_id="" type="public">

-<![CDATA[<xf:if is="!$xf.visitor.user_id">
<xf:if is="property('xenfocus_guestEnable')">
<div class='focus-guest focus-guest-{{property("xenfocus_guestLayout")}}'>
    <div class='focus-guest-header'>{$xf.options.boardTitle}</div>
    <div class='focus-guest-align'>
	    <div class='focus-guest-content'>{{property('xenfocus_guestContent')}}</div>
	    <ul class='focus-guest-buttons'>
	        <li><a href="{{ link('login') }}" rel="nofollow" data-xf-click="overlay"><span>{{ phrase('log_in') }}</span></a></li>
			<xf:if is="$xf.options.registrationSetup.enabled"><li><a href="{{ link('register') }}" rel="nofollow" data-xf-click="overlay"><span>{{ phrase('register') }}</span></a></li></xf:if>
	    </ul>
	</div>
</div>
</xf:if>
</xf:if>]]>
</template>


-<template title="xenfocus_js" version_string="" version_id="0" addon_id="" type="public">

-<![CDATA[<xf:if is="property('xenfocus_searchMenu') OR property('xenfocus_themeEditor')"><script>
$(document).ready(function(){
	var html = $('#XF');
	
	<xf:if is="property('xenfocus_searchMenu')">
		// Advanced search menu
		$('.focus-search-advanced').on('click', function(){ html.toggleClass('focus-search-menu-active'); });
		$('.focus-search-flex input').on('focus', function(){ html.addClass('focus-search-menu-active'); });
		$(document).on('click', function() { html.removeClass('focus-search-menu-active'); });
		$('.focus-wrap-search').on('click', function(event){ event.stopPropagation(); });
	</xf:if>

	<xf:if is="property('xenfocus_themeEditor')">
		$("[data-xenfocus-editor]").hover(function() {
			html.addClass('focus-picker--loaded');
		});
		// xenfocus editor: open and close with data-xenfocus-editor
		$("[data-xenfocus-editor]").on('click', function(event){
			html.toggleClass('focus-editor-open').addClass('focus-picker--loaded');
			event.preventDefault();
		});
		// ..and close by pressing ESC
		$(document).keyup(function(e) {
			if (e.keyCode === 27){
				html.removeClass('focus-editor-open');
			}
		});
		<xf:if is="property('xenfocus_picker')">
			$(".focus-picker span").on('click', function(){
				var styleid = html.attr('data-style-id');
				var backgroundClass = $(this).attr("data-focus-bg");
				html.attr('data-focus-bg', '' + backgroundClass + '');
				setCookie('xenfocusBackground-' + styleid + '', '' + backgroundClass + '', 365);
			});
		</xf:if>
		$('.focus-editor-panel').each(function(){
			// This value is used for cookie names and class names.
			var settingName = $(this).attr('data-setting');
			var settingDefault = $(this).attr('data-setting-default');
			var settingCookie = getCookie(settingName);
			if(settingCookie === 'on'){
				$(this).attr('data-setting-status','on');
				console.log(settingName + ': on (cookie)');
			} else if(settingCookie === 'off') {
				$(this).attr('data-setting-status','off');
				console.log(settingName + ': off (cookie)');
			} else {
				if(settingDefault === 'on'){
					$(this).attr('data-setting-status','on');
					console.log(settingName + ': on (cookie)');
				} else{
					$(this).attr('data-setting-status','off');
					console.log(settingName + ': off (cookie)');
				}
			}
		});
		// Change the class and cookie when the toggle is clicked
		$('.focus-editor-panel').on('click', function(){
			var settingName = $(this).attr('data-setting');
			var settingStatus = $(this).attr('data-setting-status');
			if(settingStatus === 'on'){
				html.removeClass(settingName);
				setCookie(settingName, 'off', 365);
				$(this).attr('data-setting-status', 'off');
			} else {
				html.addClass(settingName);
				setCookie(settingName, 'on', 365);
				$(this).attr('data-setting-status', 'on');
			}
		});
	</xf:if>
});
	
<xf:if is="property('xenfocus_mobile_navigation_bar') AND property('xenfocus_mnb_scroll')">
function throttle(func, wait, options) {
  var context, args, result;
  var timeout = null;
  var previous = 0;
  if (!options) options = {};
  var later = function() {
    previous = options.leading === false ? 0 : Date.now();
    timeout = null;
    result = func.apply(context, args);
    if (!timeout) context = args = null;
  };
  return function() {
    var now = Date.now();
    if (!previous && options.leading === false) previous = now;
    var remaining = wait - (now - previous);
    context = this;
    args = arguments;
    if (remaining <= 0 || remaining > wait) {
      if (timeout) {
        clearTimeout(timeout);
        timeout = null;
      }
      previous = now;
      result = func.apply(context, args);
      if (!timeout) context = args = null;
    } else if (!timeout && options.trailing !== false) {
      timeout = setTimeout(later, remaining);
    }
    return result;
  };
};
var lastScrollTop = 0;
function checkScrollDirection() {
  var st = window.pageYOffset || document.documentElement.scrollTop;
   if ((st < lastScrollTop) || (st <= 0)){
	xfhtml.classList.remove('mobile-navigation-bar--hidden');
   } else {
     xfhtml.classList.add('mobile-navigation-bar--hidden');
   }
   lastScrollTop = st;
}
window.addEventListener("scroll", throttle(checkScrollDirection, 500));
</xf:if>
</script></xf:if>]]>
</template>


-<template title="xenfocus_mobile_navigation_bar" version_string="" version_id="0" addon_id="" type="public">

-<![CDATA[<xf:if is="property('xenfocus_mobile_navigation_bar')">
<div class='mobile-navigation-bar'>
	<div class='focus-width'>
		<ul class='mobile-navigation-bar__list'>
			<li class='mobile-navigation-bar--forums'>
				<a href="{{ link('forums/list') }}">
					<span class='mobile-navigation-bar__icon'><xf:fa icon="fa-comments" /></span>
					<span class='mobile-navigation-bar__text'>{{ phrase('forums') }}</span>
				</a>
			</li>
			<li class='mobile-navigation-bar--whatsnew'>
				<a href="{{ link('whats-new') }}">
					<span class='mobile-navigation-bar__icon'><xf:fa icon="fa-file-alt" /></span>
					<span class='mobile-navigation-bar__text'>{{ phrase('whats_new') }}</span>
				</a>
			</li>
			<xf:if is="$xf.visitor.user_id">
				<xf:if is="$xf.visitor.canCreateThread()">
					<li class='mobile-navigation-bar--postthread'>
						<a href="{{ link('forums/create-thread') }}" data-xf-click="overlay">
							<span class='mobile-navigation-bar__icon'><xf:fa icon="fa-edit" /></span>
							<span class='mobile-navigation-bar__text'>{{ phrase('post_thread') }}</span>
						</a>
					</li>
				</xf:if>
			<xf:else />
				<li class='mobile-navigation-bar--login'>
					<a href="{{ link('login') }}" rel="nofollow" data-xf-click="overlay" data-follow-redirects="on">
						<span class='mobile-navigation-bar__icon'><xf:fa icon="fa-sign-in-alt" /></span>
						<span class='mobile-navigation-bar__text'>{{ phrase('log_in') }}</span>
					</a>
				</li>
				<xf:if is="$xf.options.registrationSetup.enabled">
					<li class='mobile-navigation-bar--register'>
						<a href="{{ link('register') }}" rel="nofollow" data-xf-click="overlay" data-follow-redirects="on">
							<span class='mobile-navigation-bar__icon'><xf:fa icon="fa-user-plus" /></span>
							<span class='mobile-navigation-bar__text'>{{ phrase('register') }}</span>
						</a>
					</li>
				</xf:if>
			</xf:if>
			<xf:if is="$xf.visitor.canSearch()">
				<li class='mobile-navigation-bar--search'>
					<a href="{{ link('search') }}">
						<span class='mobile-navigation-bar__icon'><xf:fa icon="fa-search" /></span>
						<span class='mobile-navigation-bar__text'>{{ phrase('search') }}</span>
					</a>
				</li>
			</xf:if>
		</ul>
	</div>
</div>
</xf:if>]]>
</template>


-<template title="xenfocus_onload_js" version_string="" version_id="0" addon_id="" type="public">

-<![CDATA[<script type='text/javascript'>
var xfhtml = document.getElementById('XF');
function addClass(el, className) { if (el.classList) el.classList.add(className); else if (!hasClass(el, className)) el.className += ' ' + className; }
function getCookie(name) { var v = document.cookie.match('(^|;) ?' + name + '=([^;]*)(;|$)'); return v ? v[2] : null; }
function setCookie(name, value, days) { var d = new Date; d.setTime(d.getTime() + 24*60*60*1000*days); document.cookie = name + "=" + value + ";path=/;expires=" + d.toGMTString(); }
function deleteCookie(name) { setCookie(name, '', -1); }
function applySetting(settingName, settingOn, allowToggle){
	<xf:if is="property('xenfocus_themeEditor')">
	// Theme editor is enabled. Check for selected toggle, otherwise apply default
		if(allowToggle === 1){	
			cookie = getCookie(settingName);
			if( (cookie === 'on') || (!cookie && (settingOn === 1)) ){
				addClass(xfhtml, settingName);
			}
		} else if(settingOn === 1){
			addClass(xfhtml, settingName);
		}
	<xf:else />
	// Theme editor is disabled, so simply apply the setting if enabled in ACP
		if(settingOn === 1){
			addClass(xfhtml, settingName);
		}
	</xf:if>
}
<xf:if is="property('xenfocus_mnb_toggle')">
applySetting('focus-mobile-navigation-bar', 1, 1);
</xf:if>
<xf:if is="property('xenfocus_widthEnable') OR property('xenfocus_widthToggle')">
applySetting('focus-fluid', {{ property('xenfocus_widthEnable') }}, {{ property('xenfocus_widthToggle') }});
</xf:if>
<xf:if is="property('xenfocus_gridEnable') OR property('xenfocus_gridToggle')">
applySetting('focus-grid', {{ property('xenfocus_gridEnable') }}, {{ property('xenfocus_gridToggle') }});
</xf:if>
<xf:if is="property('xenfocus_stickyBlocks') OR property('xenfocus_stickyToggle')">
applySetting('focus-sidebar-sticky', {{ property('xenfocus_stickyBlocks') }}, {{ property('xenfocus_stickyToggle') }});
</xf:if>
<xf:if is="property('xenfocus_sidebarFlip') OR property('xenfocus_sidebarFlipToggle')">
applySetting('focus-sidebar-flip', {{ property('xenfocus_sidebarFlip') }}, {{ property('xenfocus_sidebarFlipToggle') }});
</xf:if>
<xf:if is="property('xenfocus_eventOverlay') === 'snow'">
applySetting('focus-snow', {{ property('xenfocus_eventOverlayDefault') }}, 1);
</xf:if>
<xf:if is="property('xenfocus_eventOverlay') === 'confetti'">
applySetting('focus-confetti', {{ property('xenfocus_eventOverlayDefault') }}, 1);
</xf:if>
<xf:if is="property('xenfocus_countdownEnable')">
applySetting('focus-countdown', 1, {{ property('xenfocus_countdownToggle') }});
</xf:if>
<xf:if is="property('xenfocus_picker')">
	var backgroundCookie = getCookie('xenfocusBackground-{$xf.style.style_id}');
	if(backgroundCookie){ xfhtml.setAttribute('data-focus-bg', '' + backgroundCookie + '');	} else { xfhtml.setAttribute('data-focus-bg', '{{ property("xenfocus_pickerDefault") }}'); }
<xf:else />
	xfhtml.setAttribute('data-focus-bg', '{{ property("xenfocus_pickerDefault") }}');
</xf:if>
</script>
<xf:include template="xenfocus_onload_js_extra" />]]>
</template>


-<template title="xenfocus_onload_js_extra" version_string="" version_id="0" addon_id="" type="public">

-<![CDATA[]]>
</template>


-<template title="xenfocus_social" version_string="" version_id="0" addon_id="" type="public">

-<![CDATA[<ul class='xenfocus-social'>
	{{ property('xenfocus_social') }}
</ul>]]>
</template>


-<template title="xenfocus_theme.less" version_string="" version_id="0" addon_id="" type="public">

-<![CDATA[@node-icon-read-filter: none;
@node-icon-read-opacity: 0.25;
@sticky-top: @xf-xenfocus_logoHeight + 6;
@nodeHover-padding: 10px;
@reset-grid-wrapper: true;
<xf:if is="property('styleType') === 'light'">
	@grid-hover-inset: 4px;
	@pagination-shadow: rgba(120,151,186,0.12) 0px 2px 2px,rgba(120,151,186,0.12) 0px 4px 10px;
<xf:else />
	@nodeHover-background: @xf-paletteNeutral2;
	@nodeHover-opacity: 0.07;
	@focus-search-dropdown: darken(@xf-paletteColor1, 6%);
	@focus-editor-overlay: fade(@xf-pageBg, 85%);
	@mega-footer-copyright: lighten(@xf-publicFooter--background-color, 2%);
</xf:if>
@p-header-content--max-width: 100%;
@body-padding-top: 10px;
@body-padding-bottom: 10px;

/*
	----------------
	- Coloured categories are assigned in the extra.less file
	----------------
*/

:root{
	--block-color: @xf-xenfocus_illuminateDefault;
}


/*
	----------------
	- Global
	----------------
*/

@media (min-width: (@xf-responsiveMedium + 1px)){

    body{
        padding-top: 0;
        padding-bottom: 0;
    }

}

/*
	----------------
	- Header
	----------------
*/

@media (min-width: (@xf-responsiveMedium + 1px)){
	#header{
		border-radius: @xf-blockBorderRadius;
		box-shadow: rgba(0,0,0,0.05) 0px 2px 2px,rgba(0,0,0,0.08) 0px 4px 20px;

		<xf:if is="property('publicNavSticky') === 'primary' OR property('publicNavSticky') === 'all'">
		position: -webkit-sticky;
		position: sticky;
		top: 0;
		z-index: 400;
		</xf:if>
	}

	.p-header-inner{
		padding-right: 15px;
	}
}

	.focus-wrap-search{
		flex: 1 0 180px;
		margin: 0;
		margin-right: 20px;
	}

	// Lighten search bar on hover/focus
	.focus-search{
		transition: background-color 0.2s ease-in-out;
		box-shadow: inset rgba(255,255,255,0.1) 0px 1px 0px;
		width: auto;

		.focus-wrap-search:hover &,
		.focus-wrap-search:focus-within &{
			background-color: lighten(@xf-xenfocus_searchStyles--background-color, 5%);
		}
	}

	// Force overflow arrows to appear
	.focus-wrap-nav{
		overflow: hidden;
		padding: 0 15px;
		border-left: 1px solid fade(@xf-paletteColor2, 30%);
		margin-left: 0 !important;
		margin-right: auto;
	}

	// Show search icon when search bar is hidden
	@media (max-width: @xf-responsiveWide){
		.focus-wrap-search{
			display: none;
		}
		.p-discovery{
			display: flex;
		}
	}

// Remove padding in header
.focus-width .p-header-content{
	padding: 0;
}

/*
	----------------
	- Backgrounds
	----------------
*/

// Background picker elements
html[data-focus-bg='1']{
	.focus-background-1();

	.p-breadcrumbs::before{
		border-color: contrast(@xf-xenfocus_bg1_hex, fade(darken(@xf-xenfocus_breadcrumb--background-color, 30%), 25%), rgba(255,255,255,0.1), 43%);
	}

	<xf:if is="property('styleType') === 'dark'">
	.block-minorHeader{
		color: contrast(@xf-xenfocus_bg1_hex, @xf-paletteColor1, @xf-paletteColor4, 43%);
	}
	</xf:if>
}

html[data-focus-bg='2']{
	.focus-background-2();

	.p-breadcrumbs::before{
		border-color: contrast(@xf-xenfocus_bg2_hex, fade(darken(@xf-xenfocus_breadcrumb--background-color, 30%), 25%), rgba(255,255,255,0.1), 43%);
	}

	<xf:if is="property('styleType') === 'dark'">
	.block-minorHeader{
		color: contrast(@xf-xenfocus_bg2_hex, @xf-paletteColor1, @xf-paletteColor4, 43%);
	}
	</xf:if>
}

html[data-focus-bg='3']{
	.focus-background-3();

	.p-breadcrumbs::before{
		border-color: contrast(@xf-xenfocus_bg3_hex, fade(darken(@xf-xenfocus_breadcrumb--background-color, 30%), 25%), rgba(255,255,255,0.1), 43%);
	}

	<xf:if is="property('styleType') === 'dark'">
	.block-minorHeader{
		color: contrast(@xf-xenfocus_bg3_hex, @xf-paletteColor1, @xf-paletteColor4, 43%);
	}
	</xf:if>
}

html[data-focus-bg='4']{
	.focus-background-4();

	.p-breadcrumbs::before{
		border-color: contrast(@xf-xenfocus_bg4_hex, fade(darken(@xf-xenfocus_breadcrumb--background-color, 30%), 25%), rgba(255,255,255,0.1), 43%);
	}

	<xf:if is="property('styleType') === 'dark'">
	.block-minorHeader{
		color: contrast(@xf-xenfocus_bg4_hex, @xf-paletteColor1, @xf-paletteColor4, 43%);
	}
	</xf:if>
}

html[data-focus-bg='5']{
	.focus-background-5();

	.p-breadcrumbs::before{
		border-color: contrast(@xf-xenfocus_bg5_hex, fade(darken(@xf-xenfocus_breadcrumb--background-color, 30%), 25%), rgba(255,255,255,0.1), 43%);
	}

	<xf:if is="property('styleType') === 'dark'">
	.block-minorHeader{
		color: contrast(@xf-xenfocus_bg5_hex, @xf-paletteColor1, @xf-paletteColor4, 43%);
	}
	</xf:if>
}

html[data-focus-bg='6']{
	.focus-background-6();

	.p-breadcrumbs::before{
		border-color: contrast(@xf-xenfocus_bg6_hex, fade(darken(@xf-xenfocus_breadcrumb--background-color, 30%), 25%), rgba(255,255,255,0.1), 43%);
	}

	<xf:if is="property('styleType') === 'dark'">
	.block-minorHeader{
		color: contrast(@xf-xenfocus_bg6_hex, @xf-paletteColor1, @xf-paletteColor4, 43%);
	}
	</xf:if>
}

html[data-focus-bg='7']{
	.focus-background-7();

	.p-breadcrumbs::before{
		border-color: contrast(@xf-xenfocus_bg7_hex, fade(darken(@xf-xenfocus_breadcrumb--background-color, 30%), 25%), rgba(255,255,255,0.1), 43%);
	}

	<xf:if is="property('styleType') === 'dark'">
	.block-minorHeader{
		color: contrast(@xf-xenfocus_bg7_hex, @xf-paletteColor1, @xf-paletteColor4, 43%);
	}
	</xf:if>
}

html[data-focus-bg='8']{
	.focus-background-8();

	.p-breadcrumbs::before{
		border-color: contrast(@xf-xenfocus_bg8_hex, fade(darken(@xf-xenfocus_breadcrumb--background-color, 30%), 25%), rgba(255,255,255,0.1), 43%);
	}

	<xf:if is="property('styleType') === 'dark'">
	.block-minorHeader{
		color: contrast(@xf-xenfocus_bg8_hex, @xf-paletteColor1, @xf-paletteColor4, 43%);
	}
	</xf:if>
}

html[data-focus-bg='9']{
	.focus-background-9();

	.p-breadcrumbs::before{
		border-color: contrast(@xf-xenfocus_bg9_hex, fade(darken(@xf-xenfocus_breadcrumb--background-color, 30%), 25%), rgba(255,255,255,0.1), 43%);
	}

	<xf:if is="property('styleType') === 'dark'">
	.block-minorHeader{
		color: contrast(@xf-xenfocus_bg9_hex, @xf-paletteColor1, @xf-paletteColor4, 43%);
	}
	</xf:if>
}

html[data-focus-bg='10']{
	.focus-background-10();

	.p-breadcrumbs::before{
		border-color: contrast(@xf-xenfocus_bg10_hex, fade(darken(@xf-xenfocus_breadcrumb--background-color, 30%), 25%), rgba(255,255,255,0.1), 43%);
	}

	<xf:if is="property('styleType') === 'dark'">
	.block-minorHeader{
		color: contrast(@xf-xenfocus_bg10_hex, @xf-paletteColor1, @xf-paletteColor4, 43%);
	}
	</xf:if>
}


/*
	----------------
	- Logo
	----------------
*/

.p-header-logo{
	flex: 0 0 auto;

	a{
		transition: color 0.2s ease-in-out;
		padding: 0 27px;
		@media (max-width: @xf-responsiveWide){
			padding: 0 18px;
		}

		&:hover{
			color: lighten(@xf-publicHeader--color, 40%);
		}
	}
}

	.focus-logo--name{
		font-weight: bold;
		letter-spacing: -1px;
	}

/*
	----------------
	- Navigation
	----------------
*/

// Second navigation bar
.p-nav(){
    display: none;
}

// Navigation links: border-radius, box-shadow, etc
#XF .p-nav-list{

	li{
		border-radius: 3px;
	}

	.p-navEl{


		// Active tab
	    &.is-selected{
			
		}
	    
	    // Dropdown active tab
	    &.is-menuOpen{
			
		}
	}
}

// Remove background hover from arrow
.p-navEl-splitTrigger::before{ background: transparent; }


/*
	----------------
	- User navigation
	----------------
*/

@media (min-width: (@xf-responsiveMedium + 1px)){

	.p-navgroup-link.is-menuOpen, .p-navgroup-link:hover{
		color: @xf-publicNavTabHover--color;
		background-color: @xf-publicNavTabHover--background-color;
	}

}

// Remove username once width reaches 1100px
@media (max-width: 1100px){
	.p-navgroup-link--user .p-navgroup-linkText{
		display: none;
	}
}

/*
	----------------
	- Blocks
	----------------
*/

@block-container-shift: true;

.p-body-header{
	margin-bottom: @xf-elementSpacer;
}

.focus-block-container(){
	<xf:if is="property('styleType') === 'light'">
		box-shadow: fade(@xf-paletteColor3, 12%) 0px 2px 2px, fade(@xf-paletteColor3, 12%) 0px 4px 10px;
	<xf:else />
		box-shadow: inset rgba(255,255,255,0.1) 0px 1px 0px, rgba(0,0,0,0.12) 0px 2px 2px,rgba(0,0,0,0.2) 0px 4px 14px;
	</xf:if>
	border-width: 0;
}

	.focus-block-header(){
		padding: 25px;
	}

	.focus-block-minor-header(){
		border-radius: @xf-blockBorderRadius;
		padding: 9px;
	}


	// Add glow to boxes and header
	.block-header,
	body[data-template="thread_view"] .p-body-header,
	body[data-template="forum_view"] .p-body-content .block-container,
	.p-header,
	.message--quickReply{
		position: relative;

		&::before{
			content: '';
			display: block;
			position: absolute;
			left: 0; right: 0;
			top: 0;
			height: 6px;
			color: @xf-xenfocus_illuminateDefault;
			color: var(--block-color);
			background: currentColor;
			box-shadow: currentColor 0px 0px 25px;
			border-top-left-radius: inherit;
			border-top-right-radius: inherit;
			<xf:if is="property('styleType') === 'light'">
				border: 1px solid rgba(0,0,0,0.1);
			<xf:else />
				border-top: 1px solid rgba(255,255,255,0.25);
			</xf:if>
			box-sizing: border-box;
			transform: translate3d(0,0,0);
		}
	}

	// Need separate block because less doesn't seem to support @supports
	@supports (background-blend-mode: overlay){
		.block-header,
		body[data-template="thread_view"] .p-body-header,
		body[data-template="forum_view"] .p-body-content .block-container,
		.p-header,
		.message--quickReply{
			&::before{
				<xf:if is="property('styleType') === 'light'">
					background-image: linear-gradient(to right, #444 0%, #bbb 50%, #444 100%);
				<xf:else />
					background-image: linear-gradient(to right, rgba(0,0,0,0.5) 0%, rgba(200,200,200,0.4) 50%, rgba(0,0,0,0.5) 100%);
				</xf:if>
				
				background-blend-mode: overlay;
				background-size: 600px;
			}
		}
	}

	// Reposition glow bar on category boxes
	.block--category{
		.block-header::before{
			top: auto;
			bottom: 0;
		}
		.block-header + .block-body{
			border-top-left-radius: 0px !important;
			border-top-right-radius: 0px !important;
		}
	}

	// Add a full radius to glow bars if grid view is active
	@supports (display: grid){
		.focus-grid{
			<xf:if is="property('xenfocus_grid_nodes')">
				@{xf-xenfocus_grid_nodes}
			<xf:else />
				.block--category
			</xf:if>
			{
				.block-header::before{
					border-radius: 3px;
				}
			}
		}
	}
			
	// Make header glow relative with lighter border
	.p-header::before{
		position: relative;
		border-bottom-color: rgba(255,255,255,0.4);
	}

	// Make other glows relative
	.message--quickReply,
	body[data-template="forum_view"] .p-body-content .block-container{
		&::before{
			position: relative;
		}
	}

	// Adjust padding on body headers to cater for glow bar
	body[data-template="thread_view"] .p-body-header{
		padding-top: 26px;
	}	

// Sidebar headers
#XF .p-body-sidebar{
	.block{
		padding-top: 40px;
	}
	.block-container{
		position: relative;
	}
	.block-minorHeader {
	    position: absolute;
	    width: 100%;
	    transform: translateY(-100%);
	    padding: 10px 5px;
	}
}

<xf:if is="property('styleType') === 'dark'">
	// Footer
	.p-footer{
		box-shadow: inset rgba(255,255,255,0.1) 0px 1px 0px, rgba(0,0,0,0.12) 0px 2px 2px,rgba(0,0,0,0.2) 0px 4px 14px;
	}

	#footer .xenfocus-social{
		color: #fafbfe;

		a::after{
			background: @xf-paletteColor3;
		}
	}
</xf:if>





/*
	----------------
	- Index page categories
	----------------
*/

<xf:if is="property('styleType') === 'light'">

	@media (min-width: (@xf-responsiveMedium + 1px)){

		body[data-template="forum_list"] .p-body-pageContent .node::before,
		.structItemContainer-group .structItem::before{
			background: var(--block-color, @nodeHover-background);
		}

	}

</xf:if>


/*
	----------------
	- Topic Layout
	----------------
*/

@media (max-width: @xf-responsiveMedium){
	// Add border to user panel on mobiles to separate content
	.message:not(.message--forceColumns) .message-cell.message-cell--user{
		border-bottom-width: 1px;
		border-bottom-style: dashed;
	}
}

.likesBar{
	background: fade(@focus-post-button, 13%);
}

/*
	----------------
	- Buttons
	----------------
*/

// Buttons in headers
.block-header .button.button--link{
	background: transparent;
	&:hover{
		background: transparent;
	}
}


/*
	----------------
	- Other
	----------------
*/

// Alter border-color on sticky separators
.structItemContainer-group--sticky{
	&::before,
	&::after{
		border-color: rgba(0,0,0,0.05);
	}
}

// Add spacing to the light/dark toggle in the footer
.xenfocus-light-dark-footer i{
	margin: 0 5px;
}

/*
	----------------
	- Coloured sections
	----------------
*/

.block-header::before{
	box-shadow: @xf-xenfocus_illuminateDefault 0px 0px 25px -1px;
}

.block-header,
.p-header::before,
#XF .node--unread .node-icon i,
#XF .node--read .node-icon i,
.node--link .node-icon i,
.node--page .node-icon i{
	color: @xf-xenfocus_illuminateDefault;
}

<xf:if is="property('styleType') === 'light'">
.structItemContainer-group--sticky{
	&::before,
	&::after{
		background-color: @xf-xenfocus_illuminateDefault;
		background-image: linear-gradient(rgba(245,245,245,0.97), rgba(245,245,245,0.97));
	}
}
</xf:if>

@supports (color: var(--block-color) ){

	.block-header::before{
		box-shadow: var(--block-color) 0px 0px 25px -1px;
	}

	.block-header,
	.p-header::before,
	#XF .node--unread .node-icon i,
	#XF .node--read .node-icon i,
	#XF .node--link .node-icon i,
	#XF .node--page .node-icon i{
		color: var(--block-color) !important;
	}
	// important is required to overwrite another important style from _base.less. Future todo.

	<xf:if is="property('styleType') === 'light'">

		.structItemContainer-group--sticky{
			&::before,
			&::after{
				background-color: var(--block-color);
			}
		}

	</xf:if>

}]]>
</template>

</templates>


-<properties>

<group title="Xenfocus: Illuminate settings" description="Enable a toggle button for Light/Dark Mode, and edit the default colour scheme." addon_id="" display_order="1" group_name="xenfocus_illuminate"/>

<group title="Xenfocus: Logo and navigation" description="Customize the logo and navigation." addon_id="" display_order="2" group_name="xenfocus_logo"/>

<group title="Xenfocus: Customize Panel" description="The Customize Panel allows your visitors to enable and disable specific features throughout your theme." addon_id="" display_order="3" group_name="xenfocus_themeEditor"/>

<group title="Xenfocus: Background picker" description="Allow your members to choose their own background image from a predefined selection." addon_id="" display_order="4" group_name="xenfocus_picker"/>

<group title="Xenfocus: User panel" description="Adjust the colors and dimensions of the user panel (username, notifications, inbox, etc)" addon_id="" display_order="5" group_name="xenfocus_user"/>

<group title="Xenfocus: Search bar" description="Adjust the dimensions and colors of the search bar" addon_id="" display_order="6" group_name="xenfocus_search"/>

<group title="Xenfocus: Social icons" description="Enable and customize social links." addon_id="" display_order="7" group_name="xenfocus_social"/>

<group title="Xenfocus: Content wrapper" description="The wrapper wraps your content and can optionally have a background, border or box-shadow." addon_id="" display_order="10" group_name="xenfocus_wrapper"/>

<group title="Xenfocus: Breadcrumb navigation" description="Change the colors and style of the breadcrumb bar." addon_id="" display_order="12" group_name="xenfocus_breadcrumb"/>

<group title="Xenfocus: Guest message" description="Display a message to your guests, prompting them to sign in or register." addon_id="" display_order="15" group_name="xenfocus_guest"/>

<group title="Xenfocus: Countdown" description="Configure a countdown timer for local or global events, such as a sporting event or New Years." addon_id="" display_order="16" group_name="xenfocus_countdown"/>

<group title="Xenfocus: Grid layout" description="Enable/disable the grid layout and customize its appearance." addon_id="" display_order="20" group_name="xenfocus_grid"/>

<group title="Xenfocus: Node icons" description="Change the size, FontAwesome icon and colors of your node icons." addon_id="" display_order="35" group_name="xenfocus_nodeIcons"/>

<group title="Xenfocus: Mobile navigation bar" description="The mobile navigation bar sits at the bottom of your site, providing easy access to common navigation links." addon_id="" display_order="37" group_name="xenfocus_mobile_navigation_bar"/>

<group title="Xenfocus: Mega footer" description="The mega footer can contain up to 4 columns and is placed at the bottom of your site." addon_id="" display_order="40" group_name="xenfocus_footer"/>

<group title="Xenfocus: Holidays and Events" description="Enable holiday effects, such as animated snow for Christmas" addon_id="" display_order="50" group_name="xenfocus_holidays"/>

<group title="Xenfocus: Miscellaneous" description="Customize minor areas of the theme." addon_id="" display_order="60" group_name="xenfocus_other"/>


-<property title="BB code blocks" description="All BB code blocks within messages make use of these styling rules" addon_id="XF" display_order="20000" group_name="bbCode" css_components="text,background,border,border_radius,extra" value_group="" depends_on="" value_type="" property_type="css" property_name="bbCodeBlock">

<value>{"color": "@xf-textColorDimmed","background-color": "@xf-contentAltBg","border-color": "fade(@xf-textColor, 35%)","border-radius": "@xf-blockBorderRadius","border-left-width": "@xf-borderSizeFeature","border-left-color": "@xf-textColorDimmed","extra": "padding: 10px;" }</value>

</property>


-<property title="BB code blocks - title" description="Styles the title section of BB code blocks within messages" addon_id="XF" display_order="20100" group_name="bbCode" css_components="text,background,border,extra" value_group="" depends_on="" value_type="" property_type="css" property_name="bbCodeBlockTitle">

<value>{"font-size": "@xf-fontSizeSmall","color": "@xf-textColorDimmed","font-weight": "@xf-fontWeightHeavy","background-color": "transparent" }</value>

</property>


-<property title="Block border framework" description="Virtually all blocks have their borders styled with these settings" addon_id="XF" display_order="20000" group_name="block" css_components="border,extra" value_group="" depends_on="" value_type="" property_type="css" property_name="blockBorder">

<value>{"border-width": "@xf-borderSize","border-color": "@xf-borderColor" }</value>

</property>


-<property title="Block filter bar" description="When the content of a block can be filtered, the controls to do so are styled here" addon_id="XF" display_order="20800" group_name="block" css_components="text,background,border,extra" value_group="" depends_on="" value_type="" property_type="css" property_name="blockFilterBar">

<value>{"font-size": "@xf-fontSizeSmall","color": "@xf-textColorEmphasized","background-color": "@xf-contentHighlightBg","border-bottom-width": "@xf-borderSize","border-bottom-color": "xf-intensify(@xf-blockFilterBar--background-color, 4%)" }</value>

</property>


-<property title="Block footer" description="When information needs to be conveyed in a footer element for a block, its style is controlled here" addon_id="XF" display_order="21200" group_name="block" css_components="text,background,border,extra" value_group="" depends_on="" value_type="" property_type="css" property_name="blockFooter">

<value>{"font-size": "@xf-fontSizeSmaller","color": "@xf-textColorDimmed","background-color": "@xf-contentAltBg","border-top-width": "@xf-borderSize","border-top-color": "@xf-borderColorLight" }</value>

</property>


-<property title="Block header" description="Blocks often have title bars at their tops, which are styled here" addon_id="XF" display_order="20100" group_name="block" css_components="text,background,border,extra" value_group="" depends_on="" value_type="" property_type="css" property_name="blockHeader">

<value>{"font-size": "15px","color": "@xf-textColorEmphasized","font-weight": "@xf-fontWeightHeavy","background-color": "rgba(255,255,255,0)","border-width": "0px","border-color": "xf-intensify(@xf-blockHeader--background-color, 5%)" }</value>

</property>


-<property title="Block link - selected" description="Styling for block-type links when in their selected state" addon_id="XF" display_order="21000" group_name="misc" css_components="text,background,border_width_simple,border_color_simple,extra" value_group="" depends_on="" value_type="" property_type="css" property_name="blockLinkSelected">

<value>{"font-weight": "@xf-fontWeightHeavy","background-color": "fade(@xf-linkHoverColor, 8%)","border-width": "@xf-borderSizeFeature","border-color": "currentcolor" }</value>

</property>


-<property title="Block minor header" description="Sub-headings in blocks use these settings" addon_id="XF" display_order="20400" group_name="block" css_components="text,background,border,extra" value_group="" depends_on="" value_type="" property_type="css" property_name="blockMinorHeader">

<value>{"font-size": "inherit","color": "@xf-paletteColor4","font-weight": "@xf-fontWeightHeavy" }</value>

</property>


-<property title="Block padding vertical" description="The vertical space between a block's content and its edges" addon_id="XF" display_order="200" group_name="block" value_group="padding" depends_on="" value_type="unit" property_type="value" property_name="blockPaddingV">

<value>"@xf-paddingLarge"</value>

</property>


-<property title="Border color" description="Structural borders around blocks of content generally use this color" addon_id="XF" display_order="4000" group_name="color" value_group="borderBasic" depends_on="" value_type="color" property_type="value" property_name="borderColor">

<value>"xf-diminish(@xf-paletteColor3, 28%)"</value>

</property>


-<property title="Button base" description="Defines the styling for the basic elements that are common to all text-based buttons" addon_id="XF" display_order="20000" group_name="button" css_components="text,border_radius,padding,extra" value_group="" depends_on="" value_type="" property_type="css" property_name="buttonBase">

<value>{"font-size": "@xf-fontSizeSmall","border-radius": "@xf-borderRadiusMedium","padding-top": "7px","padding-right": "10px","padding-bottom": "7px","padding-left": "10px","extra": "text-align: center;" }</value>

</property>


-<property title="Button - default" description="Most buttons use this styling, except for primary form submit buttons" addon_id="XF" display_order="20100" group_name="button" css_components="text,background,extra" value_group="" depends_on="" value_type="" property_type="css" property_name="buttonDefault">

<value>{"color": "lighten(@xf-paletteColor5, 30%)","background-color": "@xf-paletteColor3" }</value>

</property>


-<property title="Button - primary" description="These rules are used mostly for the main submit button for forms" addon_id="XF" display_order="20200" group_name="button" css_components="text,background,extra" value_group="" depends_on="" value_type="" property_type="css" property_name="buttonPrimary">

<value>{"color": "contrast(@xf-paletteAccent2)","background-color": "@xf-paletteAccent2","extra": "min-width: 80px;" }</value>

</property>


-<property title="Alternate content background color" description="In order to differentiate it, some content will be presented on this alternative background" addon_id="XF" display_order="2200" group_name="color" value_group="contentBackground" depends_on="" value_type="color" property_type="value" property_name="contentAltBg">

<value>"lighten(@xf-paletteNeutral1, 6%)"</value>

</property>


-<property title="Faded date and moderation links?" description="If enabled, the post date and moderation links ("Edit", "Delete", "Report", etc) will be faded in opacity until they are hovered over." addon_id="" display_order="96" group_name="xenfocus_other" value_group="TopicLayout" depends_on="" value_type="boolean" property_type="value" property_name="faded_post_meta">

<value>1</value>

</property>


-<property title="Minimal user panel?" description="If enabled, the background-color and border will be removed from the user panel, resulting in a simplified design." addon_id="" display_order="91" group_name="xenfocus_other" value_group="TopicLayout" depends_on="" value_type="boolean" property_type="value" property_name="focus_post_minimal">

<value>1</value>

</property>


-<property title="Body Text Font" description="This font is used for the text of messages etc." addon_id="XF" display_order="200" group_name="fonts" value_group="font" depends_on="" value_type="string" property_type="value" property_name="fontFamilyBody">

<value>"\"Open Sans\", BlinkMacSystemFont,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif"</value>

</property>


-<property title="User Interface Font" description="The font list for your main text" addon_id="XF" display_order="100" group_name="fonts" value_group="font" depends_on="" value_type="string" property_type="value" property_name="fontFamilyUi">

<value>"\"Open Sans\", BlinkMacSystemFont,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif"</value>

</property>


-<property title="Large font size" description="" addon_id="XF" display_order="1400" group_name="fonts" value_group="size" depends_on="" value_type="unit" property_type="value" property_name="fontSizeLarge">

<value>"14px"</value>

</property>


-<property title="Larger font size" description="" addon_id="XF" display_order="1500" group_name="fonts" value_group="size" depends_on="" value_type="unit" property_type="value" property_name="fontSizeLarger">

<value>"18px"</value>

</property>


-<property title="Largest font size" description="" addon_id="XF" display_order="1600" group_name="fonts" value_group="size" depends_on="" value_type="unit" property_type="value" property_name="fontSizeLargest">

<value>"22px"</value>

</property>


-<property title="Normal font size" description="" addon_id="XF" display_order="1000" group_name="fonts" value_group="size" depends_on="" value_type="unit" property_type="value" property_name="fontSizeNormal">

<value>"13px"</value>

</property>


-<property title="Small font size" description="" addon_id="XF" display_order="1100" group_name="fonts" value_group="size" depends_on="" value_type="unit" property_type="value" property_name="fontSizeSmall">

<value>"12px"</value>

</property>


-<property title="Form input" description="Controls the style of most text-input boxes" addon_id="XF" display_order="20000" group_name="input" css_components="text,background,border,border_radius,padding,extra" value_group="" depends_on="" value_type="" property_type="css" property_name="input">

<value>{"font-size": "@xf-fontSizeNormal","color": "@xf-textColor","background-color": "@xf-contentAltBg","border-width": "@xf-borderSize","border-color": "@xf-borderColorHeavy","border-radius": "@xf-borderRadiusMedium","border-bottom-color": "@xf-borderColorLight","padding": "@xf-paddingMedium" }</value>

</property>


-<property title="Form input - disabled" description="When text boxes are disabled, these rules are applied" addon_id="XF" display_order="20200" group_name="input" css_components="text,background,border,extra" value_group="" depends_on="" value_type="" property_type="css" property_name="inputDisabled">

<value>{"color": "@xf-textColorMuted","background-color": "xf-intensify(@xf-contentAltBg, 3%)" }</value>

</property>


-<property title="Form input - focused" description="These rules are applied to text boxes when they are selected for input" addon_id="XF" display_order="20100" group_name="input" css_components="text,background,extra" value_group="" depends_on="" value_type="" property_type="css" property_name="inputFocus">

<value>{"background-color": "lighten(@xf-contentAltBg, 3%)" }</value>

</property>


-<property title="Line height" description="This value controls the amount of spacing between lines of text" addon_id="XF" display_order="3000" group_name="fonts" value_group="spacing" depends_on="" value_type="number" property_type="value" property_name="lineHeightDefault">

<value_parameters>step=0.1 max=5</value_parameters>

<value>"1.5"</value>

</property>


-<property title="Link color" description="Basic hyperlinks on standard background colors will use this style" addon_id="XF" display_order="1000" group_name="color" value_group="links" depends_on="" value_type="color" property_type="value" property_name="linkColor">

<value>"#fafafa"</value>

</property>


-<property title="Link hover color" description="Basic hyperlinks will turn this color when hovered" addon_id="XF" display_order="1100" group_name="color" value_group="links" depends_on="" value_type="color" property_type="value" property_name="linkHoverColor">

<value>"#fefefe"</value>

</property>


-<property title="Member profile header" description="The member profile page's content header is styled with these settings" addon_id="XF" display_order="20000" group_name="member" css_components="text,background,border,extra" value_group="" depends_on="" value_type="" property_type="css" property_name="memberHeader">

<value>{"background-color": "@xf-contentAltBg","border-bottom-width": "@xf-borderSize","border-bottom-color": "@xf-borderColorLight" }</value>

</property>


-<property title="Member tooltip header" description="The member tooltip, which appears when hovering over user names, is styled with these controls" addon_id="XF" display_order="20200" group_name="member" css_components="text,background,border,extra" value_group="" depends_on="" value_type="" property_type="css" property_name="memberTooltipHeader">

<value>{"background-color": "@xf-contentAltBg","border-bottom-width": "@xf-borderSize","border-bottom-color": "@xf-borderColorLight" }</value>

</property>


-<property title="Menu footer" description="When a popup menu has a bottom, footer element, it will use these settings" addon_id="XF" display_order="20600" group_name="menu" css_components="text,background,border,extra" value_group="" depends_on="" value_type="" property_type="css" property_name="menuFooter">

<value>{"font-size": "@xf-fontSizeSmaller","color": "@xf-textColorDimmed","background-color": "@xf-contentAltBg","border-top-width": "@xf-borderSize","border-top-color": "@xf-borderColorLight" }</value>

</property>


-<property title="Menu header" description="Most menus identify themselves with a header just underneath their top border" addon_id="XF" display_order="20100" group_name="menu" css_components="text,background,border,extra" value_group="" depends_on="" value_type="" property_type="css" property_name="menuHeader">

<value>{"font-size": "@xf-fontSizeLarge","color": "@xf-textColor","background-color": "@xf-contentAltBg","border-bottom-width": "@xf-borderSize","border-bottom-color": "@xf-borderColorLight" }</value>

</property>


-<property title="Menu link row - selected" description="Styling for link rows in menus, when selected or hovered" addon_id="XF" display_order="20500" group_name="menu" css_components="text,background,extra" value_group="" depends_on="" value_type="" property_type="css" property_name="menuLinkRowSelected">

<value>{"color": "@xf-linkHoverColor","text-decoration": "none","background-color": "fade(@xf-borderColorFeature, 10%)" }</value>

</property>


-<property title="Message signature" description="Any rules used to apply styling to users' signatures in their messages are defined here" addon_id="XF" display_order="20200" group_name="message" css_components="text,background,border,padding,extra" value_group="" depends_on="" value_type="" property_type="css" property_name="messageSignature">

<value>{"font-size": "@xf-fontSizeSmaller","color": "@xf-textColorMuted","border-top-width": "@xf-borderSize","border-top-color": "@xf-borderColorLight","padding-top": "12px" }</value>

</property>


-<property title="Message user info block" description="Apart from its width, the (left) message user info column is styled here" addon_id="XF" display_order="20000" group_name="message" css_components="text,background,border_width_simple,border_color_simple,extra" value_group="" depends_on="" value_type="" property_type="css" property_name="messageUserBlock">

<value>{"border-width": "0","border-color": "@xf-borderColor" }</value>

</property>


-<property title="Chrome meta theme color" description="Chrome on Android allows the address bar color to be changed to fit your site colors. If you want this to be changed, enter a color here." addon_id="XF" display_order="900" group_name="misc" value_group="" depends_on="" value_type="color" property_type="value" property_name="metaThemeColor">

<value>"@xf-paletteColor5"</value>

</property>


-<property title="Description display style" description="To save vertical space, it is possible to hide node descriptions until the node title is hovered, at which point they are displayed in a tooltip" addon_id="XF" display_order="400" group_name="nodeList" value_group="" depends_on="" value_type="radio" property_type="value" property_name="nodeListDescriptionDisplay">

<value_parameters>tooltip={{ phrase('tooltip') }} inline={{ phrase('inline') }} none={{ phrase('none') }}</value_parameters>

<value>"inline"</value>

</property>


-<property title="Sub-forums display style" description="Choose the style in which sub-forums will be displayed within a particular node element, according to the amount of space you want them to occupy" addon_id="XF" display_order="300" group_name="nodeList" value_group="" depends_on="" value_type="radio" property_type="value" property_name="nodeListSubDisplay">

<value_parameters>menu={{ phrase('popup_menu') }} flat={{ phrase('listed_below_node') }} none={{ phrase('none') }}</value_parameters>

<value>"flat"</value>

</property>


-<property title="Overlay header" description="Overlays use a header element to identify their contents, styled here" addon_id="XF" display_order="20000" group_name="overlay" css_components="text,background,border,padding,extra" value_group="" depends_on="" value_type="" property_type="css" property_name="overlayHeader">

<value>{"font-size": "@xf-fontSizeLargest","color": "@xf-textColorEmphasized","background-color": "@xf-contentHighlightBg","border-bottom-width": "@xf-borderSize","border-bottom-color": "@xf-borderColorLight","padding-top": "@xf-paddingMedium","padding-right": "@xf-paddingLarge","padding-bottom": "@xf-paddingMedium","padding-left": "@xf-paddingLarge" }</value>

</property>


-<property title="Large padding" description="" addon_id="XF" display_order="2200" group_name="borderSpacing" value_group="padding" depends_on="" value_type="unit" property_type="value" property_name="paddingLarge">

<value>"12px"</value>

</property>


-<property title="Page background color" description="The background of the page itself, on which all other content rests" addon_id="XF" display_order="2100" group_name="color" value_group="contentBackground" depends_on="" value_type="color" property_type="value" property_name="pageBg">

<value>"#1f2126"</value>

</property>


-<property title="Maximum page width" description="As the window is resized, it will continue to grow in width until this value, after which it will remain static" addon_id="XF" display_order="100" group_name="page" value_group="page" depends_on="" value_type="unit" property_type="value" property_name="pageWidthMax">

<value>"1400px"</value>

</property>


-<property title="Accent 1" description="" addon_id="XF" display_order="2000" group_name="palette" value_group="accent" depends_on="" value_type="color" property_type="value" property_name="paletteAccent1">

<value_parameters>hidePalette=true</value_parameters>

<value>"#eef8ed"</value>

</property>


-<property title="Accent 2" description="" addon_id="XF" display_order="2100" group_name="palette" value_group="accent" depends_on="" value_type="color" property_type="value" property_name="paletteAccent2">

<value_parameters>hidePalette=true</value_parameters>

<value>"#63ba5f"</value>

</property>


-<property title="Accent 3" description="" addon_id="XF" display_order="2200" group_name="palette" value_group="accent" depends_on="" value_type="color" property_type="value" property_name="paletteAccent3">

<value_parameters>hidePalette=true</value_parameters>

<value>"#49873f"</value>

</property>


-<property title="Color 1" description="" addon_id="XF" display_order="1000" group_name="palette" value_group="primary" depends_on="" value_type="color" property_type="value" property_name="paletteColor1">

<value_parameters>hidePalette=true</value_parameters>

<value>"#4f5766"</value>

</property>


-<property title="Color 2" description="" addon_id="XF" display_order="1100" group_name="palette" value_group="primary" depends_on="" value_type="color" property_type="value" property_name="paletteColor2">

<value_parameters>hidePalette=true</value_parameters>

<value>"#667084"</value>

</property>


-<property title="Color 3" description="" addon_id="XF" display_order="1200" group_name="palette" value_group="primary" depends_on="" value_type="color" property_type="value" property_name="paletteColor3">

<value_parameters>hidePalette=true</value_parameters>

<value>"#919cb0"</value>

</property>


-<property title="Color 4" description="" addon_id="XF" display_order="1300" group_name="palette" value_group="primary" depends_on="" value_type="color" property_type="value" property_name="paletteColor4">

<value_parameters>hidePalette=true</value_parameters>

<value>"#d6d9e0"</value>

</property>


-<property title="Color 5" description="" addon_id="XF" display_order="1400" group_name="palette" value_group="primary" depends_on="" value_type="color" property_type="value" property_name="paletteColor5">

<value_parameters>hidePalette=true</value_parameters>

<value>"#e1e8f8"</value>

</property>


-<property title="Neutral 1" description="" addon_id="XF" display_order="3000" group_name="palette" value_group="neutral" depends_on="" value_type="color" property_type="value" property_name="paletteNeutral1">

<value_parameters>hidePalette=true</value_parameters>

<value>"#2d3037"</value>

</property>


-<property title="Neutral 2" description="" addon_id="XF" display_order="3100" group_name="palette" value_group="neutral" depends_on="" value_type="color" property_type="value" property_name="paletteNeutral2">

<value_parameters>hidePalette=true</value_parameters>

<value>"#7c869d"</value>

</property>


-<property title="Neutral 3" description="" addon_id="XF" display_order="3200" group_name="palette" value_group="neutral" depends_on="" value_type="color" property_type="value" property_name="paletteNeutral3">

<value_parameters>hidePalette=true</value_parameters>

<value>"#dae1f3"</value>

</property>


-<property title="Footer" description="The footer is the primary element that sits below the main content on all public pages" addon_id="XF" display_order="20000" group_name="footer" css_components="text,background,border,extra" value_group="" depends_on="" value_type="" property_type="css" property_name="publicFooter">

<value>{"font-size": "@xf-fontSizeSmall","color": "fade(@xf-textColor, 75%)","background-color": "@xf-contentBg","extra": "border-radius: @xf-blockBorderRadius;" }</value>

</property>


-<property title="Footer links" description="Controls styling for individual links within the footer" addon_id="XF" display_order="20100" group_name="footer" css_components="text,extra" value_group="" depends_on="" value_type="" property_type="css" property_name="publicFooterLink">

<value>{"color": "fadein(@xf-publicFooter--color, 50%)" }</value>

</property>


-<property title="Header/logo row" description="The header row contains your logo and sits at the top of every public page" addon_id="XF" display_order="20000" group_name="headerNav" css_components="text,background,extra" value_group="" depends_on="" value_type="" property_type="css" property_name="publicHeader">

<value>{"color": "@xf-paletteColor4","background-color": "@xf-paletteNeutral1" }</value>

</property>


-<property title="Header adjustment color" description="The color of the header background is adjusted to be used as the background for the inbox and alerts area in the header" addon_id="XF" display_order="100" group_name="headerNav" value_group="header" depends_on="" value_type="color" property_type="value" property_name="publicHeaderAdjustColor">

<value>"rgba(0,0,0,0.1)"</value>

</property>


-<property title="Logo URL" description="The web path from your site's XenForo installation directory to your logo image." addon_id="XF" display_order="100" group_name="basic" value_group="logo" depends_on="" value_type="string" property_type="value" property_name="publicLogoUrl">

<value>""</value>

</property>


-<property title="Navigation row" description="The navigation row sits below the header and contains the primary site navigation tabs and menus" addon_id="XF" display_order="20100" group_name="headerNav" css_components="text,background,extra" value_group="" depends_on="" value_type="" property_type="css" property_name="publicNav">

<value>{"color": "@xf-publicHeader--color","background-color": "@xf-paletteColor1" }</value>

</property>


-<property title="Navigation padding horizontal" description="Defines the amount of padding applied horizontally to each main navigational tab in the header" addon_id="XF" display_order="4100" group_name="headerNav" value_group="navPad" depends_on="" value_type="unit" property_type="value" property_name="publicNavPaddingH">

<value>"12px"</value>

</property>


-<property title="Navigation row - selected tab" description="Additional styling to apply to navigation tabs when they are selected" addon_id="XF" display_order="20300" group_name="headerNav" css_components="text,background,border,border_radius,extra" value_group="" depends_on="" value_type="" property_type="css" property_name="publicNavSelected">

<value>{"color": "lighten(@xf-publicHeader--color, 40%)","background-color": "@xf-paletteColor1" }</value>

</property>


-<property title="Sticky navigation element" description="If you intend for some or all of your header to stick to the top of the page when it is scrolled, choose which elements should stick" addon_id="XF" display_order="1200" group_name="headerNav" value_group="navigation" depends_on="" value_type="radio" property_type="value" property_name="publicNavSticky">

<value_parameters>primary={{ phrase('primary_navigation_row_only') }} all={{ phrase('primary_and_sub_navigation_rows') }} none={{ phrase('none') }}</value_parameters>

<value>"none"</value>

</property>


-<property title="Navigation row - tab" description="Controls the styling of individual tab elements within the navigation row" addon_id="XF" display_order="20200" group_name="headerNav" css_components="text,background,extra" value_group="" depends_on="" value_type="" property_type="css" property_name="publicNavTab">

<value>{"font-size": "12px","color": "@xf-publicHeader--color","font-weight": "@xf-fontWeightHeavy","text-decoration": "none" }</value>

</property>


-<property title="Navigation row - hovered tab" description="Additional styling to apply to navigation tabs when the pointer hovers over them" addon_id="XF" display_order="20400" group_name="headerNav" css_components="text,background,extra" value_group="" depends_on="" value_type="" property_type="css" property_name="publicNavTabHover">

<value>{"color": "lighten(@xf-publicHeader--color, 20%)","text-decoration": "none","background-color": "fade(@xf-paletteColor1, 30%)" }</value>

</property>


-<property title="Navigation row - menu open" description="Styling applied when the popup menu for the current tab is visible" addon_id="XF" display_order="20450" group_name="headerNav" css_components="text,background,extra" value_group="" depends_on="" value_type="" property_type="css" property_name="publicNavTabMenuOpen">

<value>{"color": "lighten(@xf-publicHeader--color, 20%)","text-decoration": "none","background-color": "fade(@xf-paletteColor3, 50%)" }</value>

</property>


-<property title="Staff tools bar" description="Visible only to staff, the staff tools bar sits above the header and contains items such as reported content, the moderation queue..." addon_id="XF" display_order="20700" group_name="headerNav" css_components="text,background,border,extra" value_group="" depends_on="" value_type="" property_type="css" property_name="publicStaffBar">

<value>{"font-size": "@xf-fontSizeSmall","color": "@xf-textColorMuted","background-color": "@xf-contentBg","border-bottom-width": "@xf-borderSize","border-bottom-color": "xf-intensify(@xf-publicStaffBar--background-color, 4%)" }</value>

</property>


-<property title="Sidebar and side navigation spacer" description="Distance between the main content and the sidebar" addon_id="XF" display_order="1000" group_name="page" value_group="sidebar" depends_on="" value_type="unit" property_type="value" property_name="sidebarSpacer">

<value>"@xf-elementSpacer"</value>

</property>


-<property title="Style type" description="This defines the general type of style in use based on whether the content is placed on a light or dark background. This may change how colors are selected in certain scenarios." addon_id="XF" display_order="100" group_name="palette" value_group="setup" depends_on="" value_type="radio" property_type="value" property_name="styleType">

<value_parameters>light={{ phrase('light') }} dark={{ phrase('dark') }}</value_parameters>

<value>"dark"</value>

</property>


-<property title="Background #10: Attachment" description="" addon_id="" display_order="1160" group_name="xenfocus_picker" value_group="Background_10" depends_on="xenfocus_bg10_enable" value_type="select" property_type="value" property_name="xenfocus_bg10_attachment">

<value_parameters>fixed=fixed scroll=scroll</value_parameters>

<value>"fixed"</value>

</property>


-<property title="Enable Background #10?" description="" addon_id="" display_order="1105" group_name="xenfocus_picker" value_group="Background_10" depends_on="" value_type="boolean" property_type="value" property_name="xenfocus_bg10_enable">

<value>0</value>

</property>


-<property title="Background #10: Color" description="The background-color for image 10" addon_id="" display_order="1110" group_name="xenfocus_picker" value_group="Background_10" depends_on="xenfocus_bg10_enable" value_type="color" property_type="value" property_name="xenfocus_bg10_hex">

<value>"#222"</value>

</property>


-<property title="Background #10: Image" description="The URL of image 10" addon_id="" display_order="1120" group_name="xenfocus_picker" value_group="Background_10" depends_on="xenfocus_bg10_enable" value_type="string" property_type="value" property_name="xenfocus_bg10_image">

<value>""</value>

</property>


-<property title="Background #10: Position" description="The background-position value for image 10" addon_id="" display_order="1140" group_name="xenfocus_picker" value_group="Background_10" depends_on="xenfocus_bg10_enable" value_type="string" property_type="value" property_name="xenfocus_bg10_position">

<value>""</value>

</property>


-<property title="Background #10: Repeat" description="The background-repeat value for image 10" addon_id="" display_order="1150" group_name="xenfocus_picker" value_group="Background_10" depends_on="xenfocus_bg10_enable" value_type="select" property_type="value" property_name="xenfocus_bg10_repeat">

<value_parameters>repeat=repeat no-repeat=no-repeat repeat-x=repeat-x repeat-y=repeat-y</value_parameters>

<value>"repeat"</value>

</property>


-<property title="Background #10: Size" description="The background-size value for image 10" addon_id="" display_order="1130" group_name="xenfocus_picker" value_group="Background_10" depends_on="xenfocus_bg10_enable" value_type="string" property_type="value" property_name="xenfocus_bg10_size">

<value>""</value>

</property>


-<property title="Background #1: Attachment" description="" addon_id="" display_order="260" group_name="xenfocus_picker" value_group="Background_1" depends_on="xenfocus_bg1_enable" value_type="select" property_type="value" property_name="xenfocus_bg1_attachment">

<value_parameters>fixed=fixed scroll=scroll</value_parameters>

<value>"fixed"</value>

</property>


-<property title="Enable Background #1?" description="" addon_id="" display_order="205" group_name="xenfocus_picker" value_group="Background_1" depends_on="" value_type="boolean" property_type="value" property_name="xenfocus_bg1_enable">

<value>1</value>

</property>


-<property title="Background #1: Color" description="The background-color for image 1" addon_id="" display_order="210" group_name="xenfocus_picker" value_group="Background_1" depends_on="xenfocus_bg1_enable" value_type="color" property_type="value" property_name="xenfocus_bg1_hex">

<value>"@xf-pageBg"</value>

</property>


-<property title="Background #1: Image" description="The URL of image 1" addon_id="" display_order="220" group_name="xenfocus_picker" value_group="Background_1" depends_on="xenfocus_bg1_enable" value_type="string" property_type="value" property_name="xenfocus_bg1_image">

<value>""</value>

</property>


-<property title="Background #1: Position" description="The background-position value for image 1" addon_id="" display_order="240" group_name="xenfocus_picker" value_group="Background_1" depends_on="xenfocus_bg1_enable" value_type="string" property_type="value" property_name="xenfocus_bg1_position">

<value>""</value>

</property>


-<property title="Background #1: Repeat" description="The background-repeat value for image 1" addon_id="" display_order="250" group_name="xenfocus_picker" value_group="Background_1" depends_on="xenfocus_bg1_enable" value_type="select" property_type="value" property_name="xenfocus_bg1_repeat">

<value_parameters>repeat=repeat no-repeat=no-repeat repeat-x=repeat-x repeat-y=repeat-y</value_parameters>

<value>"repeat"</value>

</property>


-<property title="Background #1: Size" description="The background-size value for image 1" addon_id="" display_order="230" group_name="xenfocus_picker" value_group="Background_1" depends_on="xenfocus_bg1_enable" value_type="string" property_type="value" property_name="xenfocus_bg1_size">

<value>""</value>

</property>


-<property title="Background #2: Attachment" description="" addon_id="" display_order="360" group_name="xenfocus_picker" value_group="Background_2" depends_on="xenfocus_bg2_enable" value_type="select" property_type="value" property_name="xenfocus_bg2_attachment">

<value_parameters>fixed=fixed scroll=scroll</value_parameters>

<value>"fixed"</value>

</property>


-<property title="Enable Background #2?" description="" addon_id="" display_order="305" group_name="xenfocus_picker" value_group="Background_2" depends_on="" value_type="boolean" property_type="value" property_name="xenfocus_bg2_enable">

<value>1</value>

</property>


-<property title="Background #2: Color" description="The background-color for image 2" addon_id="" display_order="310" group_name="xenfocus_picker" value_group="Background_2" depends_on="xenfocus_bg2_enable" value_type="color" property_type="value" property_name="xenfocus_bg2_hex">

<value>"#505768"</value>

</property>


-<property title="Background #2: Image" description="The URL of image 2" addon_id="" display_order="320" group_name="xenfocus_picker" value_group="Background_2" depends_on="xenfocus_bg2_enable" value_type="string" property_type="value" property_name="xenfocus_bg2_image">

<value>""</value>

</property>


-<property title="Background #2: Position" description="The background-position value for image 2" addon_id="" display_order="340" group_name="xenfocus_picker" value_group="Background_2" depends_on="xenfocus_bg2_enable" value_type="string" property_type="value" property_name="xenfocus_bg2_position">

<value>""</value>

</property>


-<property title="Background #2: Repeat" description="The background-repeat value for image 2" addon_id="" display_order="350" group_name="xenfocus_picker" value_group="Background_2" depends_on="xenfocus_bg2_enable" value_type="select" property_type="value" property_name="xenfocus_bg2_repeat">

<value_parameters>repeat=repeat no-repeat=no-repeat repeat-x=repeat-x repeat-y=repeat-y</value_parameters>

<value>"repeat"</value>

</property>


-<property title="Background #2: Size" description="The background-size value for image 2" addon_id="" display_order="330" group_name="xenfocus_picker" value_group="Background_2" depends_on="xenfocus_bg2_enable" value_type="string" property_type="value" property_name="xenfocus_bg2_size">

<value>""</value>

</property>


-<property title="Background #3: Attachment" description="" addon_id="" display_order="460" group_name="xenfocus_picker" value_group="Background_3" depends_on="xenfocus_bg3_enable" value_type="select" property_type="value" property_name="xenfocus_bg3_attachment">

<value_parameters>fixed=fixed scroll=scroll</value_parameters>

<value>"fixed"</value>

</property>


-<property title="Enable Background #3?" description="" addon_id="" display_order="405" group_name="xenfocus_picker" value_group="Background_3" depends_on="" value_type="boolean" property_type="value" property_name="xenfocus_bg3_enable">

<value>1</value>

</property>


-<property title="Background #3: Color" description="The background-color for image 3" addon_id="" display_order="410" group_name="xenfocus_picker" value_group="Background_3" depends_on="xenfocus_bg3_enable" value_type="color" property_type="value" property_name="xenfocus_bg3_hex">

<value>"#e1e6f3"</value>

</property>


-<property title="Background #3: Image" description="The URL of image 3" addon_id="" display_order="420" group_name="xenfocus_picker" value_group="Background_3" depends_on="xenfocus_bg3_enable" value_type="string" property_type="value" property_name="xenfocus_bg3_image">

<value>""</value>

</property>


-<property title="Background #3: Position" description="The background-position value for image 3" addon_id="" display_order="440" group_name="xenfocus_picker" value_group="Background_3" depends_on="xenfocus_bg3_enable" value_type="string" property_type="value" property_name="xenfocus_bg3_position">

<value>""</value>

</property>


-<property title="Background #3: Repeat" description="The background-repeat value for image 3" addon_id="" display_order="450" group_name="xenfocus_picker" value_group="Background_3" depends_on="xenfocus_bg3_enable" value_type="select" property_type="value" property_name="xenfocus_bg3_repeat">

<value_parameters>repeat=repeat no-repeat=no-repeat repeat-x=repeat-x repeat-y=repeat-y</value_parameters>

<value>"repeat"</value>

</property>


-<property title="Background #3: Size" description="The background-size value for image 3" addon_id="" display_order="430" group_name="xenfocus_picker" value_group="Background_3" depends_on="xenfocus_bg3_enable" value_type="string" property_type="value" property_name="xenfocus_bg3_size">

<value>""</value>

</property>


-<property title="Background #4: Attachment" description="" addon_id="" display_order="560" group_name="xenfocus_picker" value_group="Background_4" depends_on="xenfocus_bg4_enable" value_type="select" property_type="value" property_name="xenfocus_bg4_attachment">

<value_parameters>fixed=fixed scroll=scroll</value_parameters>

<value>"fixed"</value>

</property>


-<property title="Enable Background #4?" description="" addon_id="" display_order="505" group_name="xenfocus_picker" value_group="Background_4" depends_on="" value_type="boolean" property_type="value" property_name="xenfocus_bg4_enable">

<value>0</value>

</property>


-<property title="Background #4: Color" description="The background-color for image 4" addon_id="" display_order="510" group_name="xenfocus_picker" value_group="Background_4" depends_on="xenfocus_bg4_enable" value_type="color" property_type="value" property_name="xenfocus_bg4_hex">

<value>"#888"</value>

</property>


-<property title="Background #4: Image" description="The URL of image 4" addon_id="" display_order="520" group_name="xenfocus_picker" value_group="Background_4" depends_on="xenfocus_bg4_enable" value_type="string" property_type="value" property_name="xenfocus_bg4_image">

<value>""</value>

</property>


-<property title="Background #4: Position" description="The background-position value for image 4" addon_id="" display_order="540" group_name="xenfocus_picker" value_group="Background_4" depends_on="xenfocus_bg4_enable" value_type="string" property_type="value" property_name="xenfocus_bg4_position">

<value>""</value>

</property>


-<property title="Background #4: Repeat" description="The background-repeat value for image 4" addon_id="" display_order="550" group_name="xenfocus_picker" value_group="Background_4" depends_on="xenfocus_bg4_enable" value_type="select" property_type="value" property_name="xenfocus_bg4_repeat">

<value_parameters>repeat=repeat no-repeat=no-repeat repeat-x=repeat-x repeat-y=repeat-y</value_parameters>

<value>"repeat"</value>

</property>


-<property title="Background #4: Size" description="The background-size value for image 4" addon_id="" display_order="530" group_name="xenfocus_picker" value_group="Background_4" depends_on="xenfocus_bg4_enable" value_type="string" property_type="value" property_name="xenfocus_bg4_size">

<value>""</value>

</property>


-<property title="Background #5: Attachment" description="" addon_id="" display_order="660" group_name="xenfocus_picker" value_group="Background_5" depends_on="xenfocus_bg5_enable" value_type="select" property_type="value" property_name="xenfocus_bg5_attachment">

<value_parameters>fixed=fixed scroll=scroll</value_parameters>

<value>"fixed"</value>

</property>


-<property title="Enable Background #5?" description="" addon_id="" display_order="605" group_name="xenfocus_picker" value_group="Background_5" depends_on="" value_type="boolean" property_type="value" property_name="xenfocus_bg5_enable">

<value>0</value>

</property>


-<property title="Background #5: Color" description="The background-color for image 5" addon_id="" display_order="610" group_name="xenfocus_picker" value_group="Background_5" depends_on="xenfocus_bg5_enable" value_type="color" property_type="value" property_name="xenfocus_bg5_hex">

<value>"#aaa"</value>

</property>


-<property title="Background #5: Image" description="The URL of image 5" addon_id="" display_order="620" group_name="xenfocus_picker" value_group="Background_5" depends_on="xenfocus_bg5_enable" value_type="string" property_type="value" property_name="xenfocus_bg5_image">

<value>""</value>

</property>


-<property title="Background #5: Position" description="The background-position value for image 5" addon_id="" display_order="640" group_name="xenfocus_picker" value_group="Background_5" depends_on="xenfocus_bg5_enable" value_type="string" property_type="value" property_name="xenfocus_bg5_position">

<value>""</value>

</property>


-<property title="Background #5: Repeat" description="The background-repeat value for image 5" addon_id="" display_order="650" group_name="xenfocus_picker" value_group="Background_5" depends_on="xenfocus_bg5_enable" value_type="select" property_type="value" property_name="xenfocus_bg5_repeat">

<value_parameters>repeat=repeat no-repeat=no-repeat repeat-x=repeat-x repeat-y=repeat-y</value_parameters>

<value>"repeat"</value>

</property>


-<property title="Background #5: Size" description="The background-size value for image 5" addon_id="" display_order="630" group_name="xenfocus_picker" value_group="Background_5" depends_on="xenfocus_bg5_enable" value_type="string" property_type="value" property_name="xenfocus_bg5_size">

<value>""</value>

</property>


-<property title="Background #6: Attachment" description="" addon_id="" display_order="760" group_name="xenfocus_picker" value_group="Background_6" depends_on="xenfocus_bg6_enable" value_type="select" property_type="value" property_name="xenfocus_bg6_attachment">

<value_parameters>fixed=fixed scroll=scroll</value_parameters>

<value>"fixed"</value>

</property>


-<property title="Enable Background #6?" description="" addon_id="" display_order="705" group_name="xenfocus_picker" value_group="Background_6" depends_on="" value_type="boolean" property_type="value" property_name="xenfocus_bg6_enable">

<value>0</value>

</property>


-<property title="Background #6: Color" description="The background-color for image 6" addon_id="" display_order="710" group_name="xenfocus_picker" value_group="Background_6" depends_on="xenfocus_bg6_enable" value_type="color" property_type="value" property_name="xenfocus_bg6_hex">

<value>"#aaa"</value>

</property>


-<property title="Background #6: Image" description="The URL of image 6" addon_id="" display_order="720" group_name="xenfocus_picker" value_group="Background_6" depends_on="xenfocus_bg6_enable" value_type="string" property_type="value" property_name="xenfocus_bg6_image">

<value>""</value>

</property>


-<property title="Background #6: Position" description="The background-position value for image 6" addon_id="" display_order="740" group_name="xenfocus_picker" value_group="Background_6" depends_on="xenfocus_bg6_enable" value_type="string" property_type="value" property_name="xenfocus_bg6_position">

<value>""</value>

</property>


-<property title="Background #6: Repeat" description="The background-repeat value for image 6" addon_id="" display_order="750" group_name="xenfocus_picker" value_group="Background_6" depends_on="xenfocus_bg6_enable" value_type="select" property_type="value" property_name="xenfocus_bg6_repeat">

<value_parameters>repeat=repeat no-repeat=no-repeat repeat-x=repeat-x repeat-y=repeat-y</value_parameters>

<value>"repeat"</value>

</property>


-<property title="Background #6: Size" description="The background-size value for image 6" addon_id="" display_order="730" group_name="xenfocus_picker" value_group="Background_6" depends_on="xenfocus_bg6_enable" value_type="string" property_type="value" property_name="xenfocus_bg6_size">

<value>""</value>

</property>


-<property title="Background #7: Attachment" description="" addon_id="" display_order="860" group_name="xenfocus_picker" value_group="Background_7" depends_on="xenfocus_bg7_enable" value_type="select" property_type="value" property_name="xenfocus_bg7_attachment">

<value_parameters>fixed=fixed scroll=scroll</value_parameters>

<value>"fixed"</value>

</property>


-<property title="Enable Background #7?" description="" addon_id="" display_order="805" group_name="xenfocus_picker" value_group="Background_7" depends_on="" value_type="boolean" property_type="value" property_name="xenfocus_bg7_enable">

<value>0</value>

</property>


-<property title="Background #7: Color" description="The background-color for image 7" addon_id="" display_order="810" group_name="xenfocus_picker" value_group="Background_7" depends_on="xenfocus_bg7_enable" value_type="color" property_type="value" property_name="xenfocus_bg7_hex">

<value>"#888"</value>

</property>


-<property title="Background #7: Image" description="The URL of image 7" addon_id="" display_order="820" group_name="xenfocus_picker" value_group="Background_7" depends_on="xenfocus_bg7_enable" value_type="string" property_type="value" property_name="xenfocus_bg7_image">

<value>""</value>

</property>


-<property title="Background #7: Position" description="The background-position value for image 7" addon_id="" display_order="840" group_name="xenfocus_picker" value_group="Background_7" depends_on="xenfocus_bg7_enable" value_type="string" property_type="value" property_name="xenfocus_bg7_position">

<value>""</value>

</property>


-<property title="Background #7: Repeat" description="The background-repeat value for image 7" addon_id="" display_order="850" group_name="xenfocus_picker" value_group="Background_7" depends_on="xenfocus_bg7_enable" value_type="select" property_type="value" property_name="xenfocus_bg7_repeat">

<value_parameters>repeat=repeat no-repeat=no-repeat repeat-x=repeat-x repeat-y=repeat-y</value_parameters>

<value>"repeat"</value>

</property>


-<property title="Background #7: Size" description="The background-size value for image 7" addon_id="" display_order="830" group_name="xenfocus_picker" value_group="Background_7" depends_on="xenfocus_bg7_enable" value_type="string" property_type="value" property_name="xenfocus_bg7_size">

<value>""</value>

</property>


-<property title="Background #8: Attachment" description="" addon_id="" display_order="960" group_name="xenfocus_picker" value_group="Background_8" depends_on="xenfocus_bg8_enable" value_type="select" property_type="value" property_name="xenfocus_bg8_attachment">

<value_parameters>fixed=fixed scroll=scroll</value_parameters>

<value>"fixed"</value>

</property>


-<property title="Enable Background #8?" description="" addon_id="" display_order="905" group_name="xenfocus_picker" value_group="Background_8" depends_on="" value_type="boolean" property_type="value" property_name="xenfocus_bg8_enable">

<value>0</value>

</property>


-<property title="Background #8: Color" description="The background-color for image 8" addon_id="" display_order="910" group_name="xenfocus_picker" value_group="Background_8" depends_on="xenfocus_bg8_enable" value_type="color" property_type="value" property_name="xenfocus_bg8_hex">

<value>"#666"</value>

</property>


-<property title="Background #8: Image" description="The URL of image 8" addon_id="" display_order="920" group_name="xenfocus_picker" value_group="Background_8" depends_on="xenfocus_bg8_enable" value_type="string" property_type="value" property_name="xenfocus_bg8_image">

<value>""</value>

</property>


-<property title="Background #8: Position" description="The background-position value for image 8" addon_id="" display_order="940" group_name="xenfocus_picker" value_group="Background_8" depends_on="xenfocus_bg8_enable" value_type="string" property_type="value" property_name="xenfocus_bg8_position">

<value>""</value>

</property>


-<property title="Background #8: Repeat" description="The background-repeat value for image 8" addon_id="" display_order="950" group_name="xenfocus_picker" value_group="Background_8" depends_on="xenfocus_bg8_enable" value_type="select" property_type="value" property_name="xenfocus_bg8_repeat">

<value_parameters>repeat=repeat no-repeat=no-repeat repeat-x=repeat-x repeat-y=repeat-y</value_parameters>

<value>"repeat"</value>

</property>


-<property title="Background #8: Size" description="The background-size value for image 8" addon_id="" display_order="930" group_name="xenfocus_picker" value_group="Background_8" depends_on="xenfocus_bg8_enable" value_type="string" property_type="value" property_name="xenfocus_bg8_size">

<value>""</value>

</property>


-<property title="Background #9: Attachment" description="" addon_id="" display_order="1060" group_name="xenfocus_picker" value_group="Background_9" depends_on="xenfocus_bg9_enable" value_type="select" property_type="value" property_name="xenfocus_bg9_attachment">

<value_parameters>fixed=fixed scroll=scroll</value_parameters>

<value>"fixed"</value>

</property>


-<property title="Enable Background #9?" description="" addon_id="" display_order="1005" group_name="xenfocus_picker" value_group="Background_9" depends_on="" value_type="boolean" property_type="value" property_name="xenfocus_bg9_enable">

<value>0</value>

</property>


-<property title="Background #9: Color" description="The background-color for image 9" addon_id="" display_order="1010" group_name="xenfocus_picker" value_group="Background_9" depends_on="xenfocus_bg9_enable" value_type="color" property_type="value" property_name="xenfocus_bg9_hex">

<value>"#444"</value>

</property>


-<property title="Background #9: Image" description="The URL of image 9" addon_id="" display_order="1020" group_name="xenfocus_picker" value_group="Background_9" depends_on="xenfocus_bg9_enable" value_type="string" property_type="value" property_name="xenfocus_bg9_image">

<value>""</value>

</property>


-<property title="Background #9: Position" description="The background-position value for image 9" addon_id="" display_order="1040" group_name="xenfocus_picker" value_group="Background_9" depends_on="xenfocus_bg9_enable" value_type="string" property_type="value" property_name="xenfocus_bg9_position">

<value>""</value>

</property>


-<property title="Background #9: Repeat" description="The background-repeat value for image 9" addon_id="" display_order="1050" group_name="xenfocus_picker" value_group="Background_9" depends_on="xenfocus_bg9_enable" value_type="select" property_type="value" property_name="xenfocus_bg9_repeat">

<value_parameters>repeat=repeat no-repeat=no-repeat repeat-x=repeat-x repeat-y=repeat-y</value_parameters>

<value>"repeat"</value>

</property>


-<property title="Background #9: Size" description="The background-size value for image 9" addon_id="" display_order="1030" group_name="xenfocus_picker" value_group="Background_9" depends_on="xenfocus_bg9_enable" value_type="string" property_type="value" property_name="xenfocus_bg9_size">

<value>""</value>

</property>


-<property title="Breadcrumb styles" description="" addon_id="" display_order="10" group_name="xenfocus_breadcrumb" css_components="text,background,border_color_simple,border_radius_simple" value_group="" depends_on="" value_type="" property_type="css" property_name="xenfocus_breadcrumb">

<value>{"color": "@xf-paletteColor5","background-color": "@xf-paletteColor2","border-color": "fade(xf-intensify(@xf-xenfocus_breadcrumb--background-color, 30%), 25%)","border-radius": "3px" }</value>

</property>


-<property title="Breadcrumb height (px)" description="" addon_id="" display_order="5" group_name="xenfocus_breadcrumb" value_group="" depends_on="" value_type="number" property_type="value" property_name="xenfocus_breadcrumbHeight">

<value>"40"</value>

</property>


-<property title="Breadcrumb :hover styles" description="" addon_id="" display_order="20" group_name="xenfocus_breadcrumb" css_components="text,background" value_group="" depends_on="" value_type="" property_type="css" property_name="xenfocus_breadcrumbHover">

<value>{"color": "lighten(@xf-xenfocus_breadcrumb--color, 10%)","background-color": "rgba(255, 255, 255, 0.08)" }</value>

</property>


-<property title="Reset cache on javascript and images" description="If you need to force-clear the cache for your javascript files or images, click the plus button to increase this value and press Save." addon_id="" display_order="100" group_name="xenfocus_other" value_group="Other" depends_on="" value_type="number" property_type="value" property_name="xenfocus_cache">

<value>"1"</value>

</property>


-<property title="Countdown text color" description="By default, the countdown is placed on a transparent background. This setting controls the text color. If left blank, the countdown will be wrapped with the "block" style." addon_id="" display_order="70" group_name="xenfocus_countdown" value_group="" depends_on="xenfocus_countdownEnable" value_type="color" property_type="value" property_name="xenfocus_countdownColor">

<value>""</value>

</property>


-<property title="Date and time of event" description="The format must be: YYYY-MM-DD HH:MM<br /> Eg: 2018-03-21 23:45" addon_id="" display_order="20" group_name="xenfocus_countdown" value_group="" depends_on="xenfocus_countdownEnable" value_type="string" property_type="value" property_name="xenfocus_countdownDate">

<value>"2020-10-01 23:45"</value>

</property>


-<property title="Countdown description" description="If you'd like to provide a more detailed description of the countdown, enter it here." addon_id="" display_order="50" group_name="xenfocus_countdown" value_group="" depends_on="xenfocus_countdownEnable" value_type="string" property_type="value" property_name="xenfocus_countdownDesc">

<value_parameters>rows=3</value_parameters>

<value>"This is your countdown description."</value>

</property>


-<property title="Countdown description (finished)" description="Once the countdown has reached zero, this message will be displayed instead of the original description." addon_id="" display_order="60" group_name="xenfocus_countdown" value_group="" depends_on="xenfocus_countdownEnable" value_type="string" property_type="value" property_name="xenfocus_countdownDone">

<value_parameters>rows=3</value_parameters>

<value>"The event is here!"</value>

</property>


-<property title="Enable countdown?" description="" addon_id="" display_order="10" group_name="xenfocus_countdown" value_group="" depends_on="" value_type="boolean" property_type="value" property_name="xenfocus_countdownEnable">

<value>0</value>

</property>


-<property title="Countdown title" description="What event are you counting down to?" addon_id="" display_order="40" group_name="xenfocus_countdown" value_group="" depends_on="xenfocus_countdownEnable" value_type="string" property_type="value" property_name="xenfocus_countdownTitle">

<value>"Countdown until our main event!"</value>

</property>


-<property title="Allow members to hide countdown?" description="If the <em>Customize Panel</em> is enabled, your members will be able to hide/show the countdown." addon_id="" display_order="15" group_name="xenfocus_countdown" value_group="" depends_on="xenfocus_themeEditor" value_type="boolean" property_type="value" property_name="xenfocus_countdownToggle">

<value>1</value>

</property>


-<property title="Timezone (optional)" description="If your event is occurring in a specific time zone (such as a sporting event), enter the time zone here. Please check the tutorial category on the xenfocus support forums for further instructions." addon_id="" display_order="30" group_name="xenfocus_countdown" value_group="" depends_on="xenfocus_countdownEnable" value_type="string" property_type="value" property_name="xenfocus_countdownZone">

<value>""</value>

</property>


-<property title="Show icon in footer?" description="If enabled, the <em>Customize Panel</em> icon will be shown in the footer." addon_id="" display_order="65" group_name="xenfocus_themeEditor" value_group="" depends_on="xenfocus_themeEditor" value_type="boolean" property_type="value" property_name="xenfocus_editorIcon_footer">

<value>1</value>

</property>


-<property title="Show icon in user panel?" description="If enabled, the <em>Customize Panel</em> icon will be shown in the user panel." addon_id="" display_order="60" group_name="xenfocus_themeEditor" value_group="" depends_on="xenfocus_themeEditor" value_type="boolean" property_type="value" property_name="xenfocus_editorIcon_user">

<value>1</value>

</property>


-<property title="Full-screen effect" description="Select an animated effect to overlay your screen, such as snow for Christmas or confetti for a celebration." addon_id="" display_order="5" group_name="xenfocus_holidays" value_group="" depends_on="" value_type="select" property_type="value" property_name="xenfocus_eventOverlay">

<value_parameters>none=None snow=Snow confetti=Confetti</value_parameters>

<value>"none"</value>

</property>


-<property title="Show animated effect by default?" description="If enabled, the animated effect will be shown to all users. They can optionally disable it via the theme editor." addon_id="" display_order="10" group_name="xenfocus_holidays" value_group="" depends_on="" value_type="boolean" property_type="value" property_name="xenfocus_eventOverlayDefault">

<value>1</value>

</property>


-<property title="Footer column 1" description="" addon_id="" display_order="30" group_name="xenfocus_footer" value_group="" depends_on="" value_type="string" property_type="value" property_name="xenfocus_footer1">

<value_parameters>rows=4</value_parameters>

<value>"<h4>Mega Footer</h4>\n<p>These footer widgets can be used to display your own custom messages.</p>"</value>

</property>


-<property title="Footer column 2" description="" addon_id="" display_order="40" group_name="xenfocus_footer" value_group="" depends_on="" value_type="string" property_type="value" property_name="xenfocus_footer2">

<value_parameters>rows=4</value_parameters>

<value>"<h4>Useful links</h4>\n<ul class='focus-footer-list'>\n<li><a href='javascript:void();'>Contact us</a></li>\n<li><a href='javascript:void();'>Another helpful link</a></li>\n<li><a href='javascript:void();'>Terms and Conditions</a></li>\n</ul>"</value>

</property>


-<property title="Footer column 3" description="" addon_id="" display_order="50" group_name="xenfocus_footer" value_group="" depends_on="" value_type="string" property_type="value" property_name="xenfocus_footer3">

<value_parameters>rows=4</value_parameters>

<value>"<h4>Social Links</h4>\n<p>You could even link to your social profiles, such as:</p>\n<ul class='focus-footer-list'>\n<li><a href='https://www.facebook.com/'>Facebook</a></li>\n<li><a href='https://twitter.com'>Twitter</a></li>\n<li><a href='https://youtube.com'>YouTube</a></li>\n</ul>"</value>

</property>


-<property title="Footer column 4" description="" addon_id="" display_order="60" group_name="xenfocus_footer" value_group="" depends_on="" value_type="string" property_type="value" property_name="xenfocus_footer4">

<value_parameters>rows=4</value_parameters>

<value>"<h4>Footer Header</h4>\n<p>This is some example content.</p>\n<p>And this is another paragraph..</p>"</value>

</property>


-<property title="Enable mega footer?" description="" addon_id="" display_order="10" group_name="xenfocus_footer" value_group="" depends_on="" value_type="boolean" property_type="value" property_name="xenfocus_footerEnable">

<value>1</value>

</property>


-<property title="Show footer on mobiles?" description="" addon_id="" display_order="20" group_name="xenfocus_footer" value_group="" depends_on="xenfocus_footerEnable" value_type="boolean" property_type="value" property_name="xenfocus_footerMobile">

<value>1</value>

</property>


-<property title="Background color for wallpaper blocks" description="If an image isn't defined (via css), this hex color will be shown instead." addon_id="" display_order="130" group_name="xenfocus_grid" value_group="WallpaperEffect" depends_on="xenfocus_gridWallpaper" value_type="color" property_type="value" property_name="xenfocus_gridBackground">

<value>"@xf-paletteColor2"</value>

</property>


-<property title="Text color for wallpaper blocks" description="If the above setting is enabled, grid blocks will use this color for their text color." addon_id="" display_order="120" group_name="xenfocus_grid" value_group="WallpaperEffect" depends_on="xenfocus_gridWallpaper" value_type="color" property_type="value" property_name="xenfocus_gridColor">

<value>"#fff"</value>

</property>


-<property title="Grid layout?" description="If enabled, your nodes will be placed into a grid layout." addon_id="" display_order="101" group_name="xenfocus_grid" value_group="GridLayout" depends_on="" value_type="boolean" property_type="value" property_name="xenfocus_gridEnable">

<value>0</value>

</property>


-<property title="Wallpaper images" description="Assign a wallpaper to node id's, separated by a comma. Node wallpapers should be .jpg, uploaded to /styles/xenfocus/images/node-wallpapers and named according to their id, eg 2.jpg<br /> Expected input: 2,3,7" addon_id="" display_order="140" group_name="xenfocus_grid" value_group="WallpaperEffect" depends_on="xenfocus_gridWallpaper" value_type="string" property_type="value" property_name="xenfocus_gridImage">

<value>""</value>

</property>


-<property title="Allow members to toggle "Grid view"?" description="If the <em>Customize panel</em> is enabled, your members will be able to toggle the grid layout." addon_id="" display_order="103" group_name="xenfocus_grid" value_group="GridLayout" depends_on="xenfocus_themeEditor" value_type="boolean" property_type="value" property_name="xenfocus_gridToggle">

<value>1</value>

</property>


-<property title="Wallpaper design?" description="Enable this if you'd like to assign background images to your grid blocks. The text color is defined below." addon_id="" display_order="110" group_name="xenfocus_grid" value_group="WallpaperEffect" depends_on="" value_type="boolean" property_type="value" property_name="xenfocus_gridWallpaper">

<value>0</value>

</property>


-<property title="Hide latest topic in grid view?" description="" addon_id="" display_order="109" group_name="xenfocus_grid" value_group="GridLayout" depends_on="" value_type="boolean" property_type="value" property_name="xenfocus_grid_minimal">

<value>1</value>

</property>


-<property title="Limit grid layout to specifc nodes" description="For a tutorial, please visit <a href='https://xenfocus.com/community/threads/limit-grid-view-to-specific-nodes.35634/' target='_blank' rel="noreferrer">the xenfocus support forums</a>." addon_id="" display_order="105" group_name="xenfocus_grid" value_group="GridLayout" depends_on="" value_type="string" property_type="value" property_name="xenfocus_grid_nodes">

<value>""</value>

</property>


-<property title="Hide node stats in grid view?" description="" addon_id="" display_order="108" group_name="xenfocus_grid" value_group="GridLayout" depends_on="" value_type="boolean" property_type="value" property_name="xenfocus_grid_stats">

<value>1</value>

</property>


-<property title="Guest message" description="This message is shown to guests, prompting them to register or sign in." addon_id="" display_order="20" group_name="xenfocus_guest" value_group="" depends_on="xenfocus_guestEnable" value_type="string" property_type="value" property_name="xenfocus_guestContent">

<value_parameters>rows=5</value_parameters>

<value>"<p>This is a sample guest message. Register a free account today to become a member! Once signed in, you'll be able to participate on this site by adding your own topics and posts, as well as connect with other members through your own private inbox!</p>"</value>

</property>


-<property title="Enable guest message?" description="" addon_id="" display_order="10" group_name="xenfocus_guest" value_group="" depends_on="" value_type="boolean" property_type="value" property_name="xenfocus_guestEnable">

<value>0</value>

</property>


-<property title="Alert style: Box header and buttons" description="These colors affect the header and buttons in the guest box." addon_id="" display_order="40" group_name="xenfocus_guest" css_components="text,background" value_group="" depends_on="" value_type="" property_type="css" property_name="xenfocus_guestInternalStyle">

<value>{"color": "#9A6200","font-weight": "@xf-fontWeightHeavy","background-color": "#EDAF5D" }</value>

</property>


-<property title="Layout" description=""Alert" captures the attention of visitors using brighter colours.<br /> "Wallpaper" uses a large background image instead." addon_id="" display_order="15" group_name="xenfocus_guest" value_group="" depends_on="" value_type="select" property_type="value" property_name="xenfocus_guestLayout">

<value_parameters>alert=Alert wallpaper=Wallpaper</value_parameters>

<value>"wallpaper"</value>

</property>


-<property title="Alert style: Box colors" description="" addon_id="" display_order="30" group_name="xenfocus_guest" css_components="text,background" value_group="" depends_on="" value_type="" property_type="css" property_name="xenfocus_guestStyle">

<value>{"color": "#9A6200","background-color": "#fcefe0" }</value>

</property>


-<property title="Wallpaper: Image and color" description="" addon_id="" display_order="50" group_name="xenfocus_guest" css_components="text,background" value_group="" depends_on="" value_type="" property_type="css" property_name="xenfocus_guestWallpaper">

<value>{"color": "@xf-paletteColor1","background-color": "darken(@xf-paletteColor5, 15%)","background-image": "styles/xenfocus/images/guest-message/laptop.jpg" }</value>

</property>


-<property title="Wallpaper image overlay" description="If "Wallpaper" is selected above, and if you've assigned a background image under "Wallpaper: Image and color" below, you can add a semi-transparent overlay here which may result in better contrast with your text. Enter a value between 0 and 1." addon_id="" display_order="25" group_name="xenfocus_guest" value_group="" depends_on="" value_type="string" property_type="value" property_name="xenfocus_guestWallpaperOpacity">

<value>"0.85"</value>

</property>


-<property title="Show header on mobile?" description="If disabled, the header will be removed and a mini logo will be shown next to the mobile navigation icon." addon_id="" display_order="70" group_name="xenfocus_logo" value_group="MobileLogo" depends_on="" value_type="boolean" property_type="value" property_name="xenfocus_headerOnMobile">

<value>1</value>

</property>


-<property title="Logo effect" description="Celebrate a holiday or event by enhancing your logo." addon_id="" display_order="20" group_name="xenfocus_holidays" value_group="" depends_on="" value_type="select" property_type="value" property_name="xenfocus_holiday">

<value_parameters>none=None valentines=Valentines halloween=Halloween</value_parameters>

<value>"none"</value>

</property>


-<property title=""New content" FA icon" description="Customize the icon for nodes with new content by entering the Font Awesome unicode value." addon_id="" display_order="105" group_name="xenfocus_nodeIcons" value_group="NodeIcons" depends_on="" value_type="string" property_type="value" property_name="xenfocus_iconFA">

<value>"f086"</value>

</property>


-<property title=""No new content" FA icon" description="Customize the icon for nodes with no new content by entering the Font Awesome unicode value." addon_id="" display_order="110" group_name="xenfocus_nodeIcons" value_group="NodeIcons" depends_on="" value_type="string" property_type="value" property_name="xenfocus_iconFAold">

<value>"f086"</value>

</property>


-<property title="Node icon height (px)" description="" addon_id="" display_order="140" group_name="xenfocus_nodeIcons" value_group="IconSize" depends_on="" value_type="number" property_type="value" property_name="xenfocus_iconHeight">

<value>"36"</value>

</property>


-<property title="Image Path (new content)" description="Enter a path or URL to an image which will be used as your node icon. The width and height of the image can be defined in the section below." addon_id="" display_order="125" group_name="xenfocus_nodeIcons" value_group="ImageAsIcon" depends_on="" value_type="string" property_type="value" property_name="xenfocus_iconImage">

<value>""</value>

</property>


-<property title="Image Path (no new content)" description="This image will be used on nodes which have no new content." addon_id="" display_order="126" group_name="xenfocus_nodeIcons" value_group="ImageAsIcon" depends_on="" value_type="string" property_type="value" property_name="xenfocus_iconImageOld">

<value>""</value>

</property>


-<property title="Scale icons on mobiles" description="The icons on smaller devices will be displayed at this scale. Eg, 0.5 = half size." addon_id="" display_order="170" group_name="xenfocus_nodeIcons" value_group="IconSize" depends_on="" value_type="string" property_type="value" property_name="xenfocus_iconMobile">

<value>"0.7"</value>

</property>


-<property title="Node icon (no new content)" description="Change the icon color and background-color of the node icon when no new content exists." addon_id="" display_order="210" group_name="xenfocus_nodeIcons" css_components="text,background,extra" value_group="" depends_on="" value_type="" property_type="css" property_name="xenfocus_iconRead">

<value>{"extra": "opacity: 0.4;" }</value>

</property>


-<property title="Node icon" description="Change the icon color, background-color, font-size and border-radius of the node icon. Adding a background image will remove all other styles, allowing you to use an image as the icon." addon_id="" display_order="200" group_name="xenfocus_nodeIcons" css_components="text,background,border_radius_simple,extra" value_group="" depends_on="" value_type="" property_type="css" property_name="xenfocus_iconStyles">

<value>{"font-size": "21px","color": "@xf-xenfocus_illuminateDefault","border-radius": "3px" }</value>

</property>


-<property title=""New content" icon weight" description="Change the font-weight of the "New content" icon." addon_id="" display_order="107" group_name="xenfocus_nodeIcons" value_group="NodeIcons" depends_on="" value_type="select" property_type="value" property_name="xenfocus_iconWeight">

<value_parameters>900=Solid 400=Regular 300=Light</value_parameters>

<value>"900"</value>

</property>


-<property title=""No new content" icon weight" description="Change the font-weight of the "No new content" icon." addon_id="" display_order="120" group_name="xenfocus_nodeIcons" value_group="NodeIcons" depends_on="" value_type="select" property_type="value" property_name="xenfocus_iconWeightOld">

<value_parameters>900=Solid 400=Regular 300=Light</value_parameters>

<value>"400"</value>

</property>


-<property title="Node icon width (px)" description="" addon_id="" display_order="130" group_name="xenfocus_nodeIcons" value_group="IconSize" depends_on="" value_type="number" property_type="value" property_name="xenfocus_iconWidth">

<value>"36"</value>

</property>


-<property title="Default color" description="The default color for the glowing bars." addon_id="" display_order="1" group_name="xenfocus_illuminate" value_group="" depends_on="" value_type="color" property_type="value" property_name="xenfocus_illuminateDefault">

<value>"#d99d56"</value>

</property>


-<property title="Include CSS file" description="If required, this input can be used to add external CSS files such as Google Fonts. Format must be &lt;link href="xx.css" /&gt;" addon_id="" display_order="10" group_name="xenfocus_other" value_group="Layout" depends_on="" value_type="string" property_type="value" property_name="xenfocus_includeCSS">

<value>"<link href=\"https://fonts.googleapis.com/css?family=Open+Sans:400,700\" rel=\"stylesheet\">"</value>

</property>


-<property title="Light/Dark Variation" description="Learn how to enable the <a href="https://xenfocus.com/community/threads/light-dark-mode.35702/" rel="noreferrer" target="_blank">Light/Dark Mode</a> toggle icon." addon_id="" display_order="10" group_name="xenfocus_illuminate" value_group="" depends_on="" value_type="number" property_type="value" property_name="xenfocus_light_dark">

<value>""</value>

</property>


-<property title="Logo color" description="Color of the text logo" addon_id="" display_order="20" group_name="xenfocus_logo" value_group="Logo" depends_on="" value_type="color" property_type="value" property_name="xenfocus_logoColor">

<value>"@xf-publicHeader--color"</value>

</property>


-<property title="Logo font-family" description="Change the font-family used by your logo." addon_id="" display_order="25" group_name="xenfocus_logo" value_group="Logo" depends_on="" value_type="string" property_type="value" property_name="xenfocus_logoFont">

<value>""</value>

</property>


-<property title="Logo height" description="Define the height of the logo/header area, in pixels." addon_id="" display_order="30" group_name="xenfocus_logo" value_group="Logo" depends_on="" value_type="number" property_type="value" property_name="xenfocus_logoHeight">

<value>"80"</value>

</property>


-<property title="Logo height (mobile)" description="Define the height of the logo/header area for mobiles, in pixels." addon_id="" display_order="80" group_name="xenfocus_logo" value_group="MobileLogo" depends_on="xenfocus_headerOnMobile" value_type="number" property_type="value" property_name="xenfocus_logoHeightMobile">

<value>"60"</value>

</property>


-<property title="Logo font size" description="Font size for the text logo in pixels." addon_id="" display_order="50" group_name="xenfocus_logo" value_group="Logo" depends_on="" value_type="number" property_type="value" property_name="xenfocus_logoSize">

<value>"22"</value>

</property>


-<property title="Logo font size (mobile)" description="Font size for the text logo in pixels, for mobiles." addon_id="" display_order="85" group_name="xenfocus_logo" value_group="MobileLogo" depends_on="xenfocus_headerOnMobile" value_type="number" property_type="value" property_name="xenfocus_logoSizeMobile">

<value>"20"</value>

</property>


-<property title="Logo slogan" description="Enter a slogan to display under your text logo. Leave this field blank to disable." addon_id="" display_order="10" group_name="xenfocus_logo" value_group="Logo" depends_on="" value_type="string" property_type="value" property_name="xenfocus_logoSlogan">

<value>""</value>

</property>


-<property title="Text logo" description="If the above option is configured to display a text logo, this value will be used. If this is left blank, your board name will be displayed." addon_id="" display_order="5" group_name="xenfocus_logo" value_group="Logo" depends_on="" value_type="string" property_type="value" property_name="xenfocus_logoText">

<value>"illuminate dark"</value>

</property>


-<property title="Logo type" description="Configure the layout of your logo. <a href="https://xenfocus.com/community/threads/logo-customization.35191/" target="_blank" rel="noreferrer">Learn more</a>." addon_id="" display_order="3" group_name="xenfocus_logo" value_group="Logo" depends_on="" value_type="select" property_type="value" property_name="xenfocus_logoType">

<value_parameters>text=Text image=Image both=Image and Text</value_parameters>

<value>"text"</value>

</property>


-<property title="Active icon color" description="" addon_id="" display_order="50" group_name="xenfocus_mobile_navigation_bar" value_group="" depends_on="xenfocus_mobile_navigation_bar" value_type="color" property_type="value" property_name="xenfocus_mnb_active">

<value>"@xf-paletteColor5"</value>

</property>


-<property title="Background color" description="" addon_id="" display_order="30" group_name="xenfocus_mobile_navigation_bar" value_group="" depends_on="xenfocus_mobile_navigation_bar" value_type="color" property_type="value" property_name="xenfocus_mnb_background">

<value>"@xf-contentAltBg"</value>

</property>


-<property title="Icon color" description="" addon_id="" display_order="40" group_name="xenfocus_mobile_navigation_bar" value_group="" depends_on="xenfocus_mobile_navigation_bar" value_type="color" property_type="value" property_name="xenfocus_mnb_color">

<value>"@xf-textColorMuted"</value>

</property>


-<property title="Hide bar when scrolling down?" description="When enabled, the navigation bar will slide out of view when the page is scrolled down and reappear when scrolled up. This provides more space for your content." addon_id="" display_order="20" group_name="xenfocus_mobile_navigation_bar" value_group="" depends_on="xenfocus_mobile_navigation_bar" value_type="boolean" property_type="value" property_name="xenfocus_mnb_scroll">

<value>0</value>

</property>


-<property title="Allow members to toggle?" description="If the <em>Customize panel</em> is enabled, your members can choose to either hide or show the mobile navigation bar on their device." addon_id="" display_order="25" group_name="xenfocus_mobile_navigation_bar" value_group="" depends_on="xenfocus_mobile_navigation_bar" value_type="boolean" property_type="value" property_name="xenfocus_mnb_toggle">

<value>1</value>

</property>


-<property title="Icon weight" description="" addon_id="" display_order="60" group_name="xenfocus_mobile_navigation_bar" value_group="" depends_on="" value_type="select" property_type="value" property_name="xenfocus_mnb_weight">

<value_parameters>900=Solid 400=Regular 300=Light</value_parameters>

<value>"300"</value>

</property>


-<property title="Enable mobile navigation bar?" description="The mobile navigation bar sits at the bottom of your site, providing easy access to common navigation links." addon_id="" display_order="10" group_name="xenfocus_mobile_navigation_bar" value_group="" depends_on="" value_type="boolean" property_type="value" property_name="xenfocus_mobile_navigation_bar">

<value>1</value>

</property>


-<property title="Navigation height (px)" description="" addon_id="" display_order="210" group_name="xenfocus_logo" value_group="NavigationBar" depends_on="" value_type="number" property_type="value" property_name="xenfocus_navHeight">

<value>"36"</value>

</property>


-<property title="Show navigation icons?" description="If enabled, each icon is assigned a FontAwesome icon which can be configured via css." addon_id="" display_order="200" group_name="xenfocus_logo" value_group="NavigationBar" depends_on="" value_type="boolean" property_type="value" property_name="xenfocus_navIcons">

<value>0</value>

</property>


-<property title=""NEW" badge?" description="If enabled, a "NEW" badge will be shown next to node titles which have new content." addon_id="" display_order="22" group_name="xenfocus_other" value_group="NodeAndTopicLists" depends_on="" value_type="boolean" property_type="value" property_name="xenfocus_new_badge">

<value>1</value>

</property>


-<property title="Enable background picker?" description="If enabled, your members will be able to select their own background/header image using the Theme Editor." addon_id="" display_order="110" group_name="xenfocus_picker" value_group="BackgroundPicker" depends_on="xenfocus_themeEditor" value_type="boolean" property_type="value" property_name="xenfocus_picker">

<value>0</value>

</property>


-<property title="Set default image" description="This image will be used as the default background image, or if the background picker has been disabled." addon_id="" display_order="115" group_name="xenfocus_picker" value_group="BackgroundPicker" depends_on="" value_type="select" property_type="value" property_name="xenfocus_pickerDefault">

<value_parameters>1=1 2=2 3=3 4=4 5=5 6=6</value_parameters>

<value>"1"</value>

</property>


-<property title="Post button style" description="Style the Like, Quote and Reply buttons beneath each post" addon_id="" display_order="93" group_name="xenfocus_other" value_group="TopicLayout" depends_on="" value_type="select" property_type="value" property_name="xenfocus_postButton">

<value_parameters>none=None minimal=Minimal button=Standard button</value_parameters>

<value>"button"</value>

</property>


-<property title="Display search bar?" description="If enabled, a search bar will be shown on your theme." addon_id="" display_order="50" group_name="xenfocus_search" value_group="" depends_on="" value_type="boolean" property_type="value" property_name="xenfocus_searchBar">

<value>1</value>

</property>


-<property title="Search height (px)" description="" addon_id="" display_order="100" group_name="xenfocus_search" value_group="" depends_on="xenfocus_searchBar" value_type="number" property_type="value" property_name="xenfocus_searchHeight">

<value>"36"</value>

</property>


-<property title="Display "Search" link in user panel?" description="" addon_id="" display_order="250" group_name="xenfocus_search" value_group="" depends_on="" value_type="boolean" property_type="value" property_name="xenfocus_searchLink">

<value>0</value>

</property>


-<property title="Advanced search dropdown menu?" description="If enabled, a dropdown menu will appear when your search bar is focused." addon_id="" display_order="200" group_name="xenfocus_search" value_group="" depends_on="xenfocus_searchBar" value_type="boolean" property_type="value" property_name="xenfocus_searchMenu">

<value>1</value>

</property>


-<property title="Search bar styles" description="" addon_id="" display_order="120" group_name="xenfocus_search" css_components="text,background,border_width_simple,border_color_simple,border_radius_simple" value_group="" depends_on="" value_type="" property_type="css" property_name="xenfocus_searchStyles">

<value>{"color": "@xf-paletteColor4","background-color": "@xf-paletteColor1","border-width": "0px","border-color": "@xf-xenfocus_searchStyles--color","border-radius": "3px" }</value>

</property>


-<property title="Search width (px)" description="" addon_id="" display_order="150" group_name="xenfocus_search" value_group="" depends_on="xenfocus_searchBar" value_type="number" property_type="value" property_name="xenfocus_searchWidth">

<value>"260"</value>

</property>


-<property title="Flip sidebar position?" description="Flip the position of the sidebar to the left side of your site (right for RTL languages)." addon_id="" display_order="17" group_name="xenfocus_other" value_group="Sidebars" depends_on="" value_type="boolean" property_type="value" property_name="xenfocus_sidebarFlip">

<value>0</value>

</property>


-<property title="Allow members to toggle sidebar position?" description="If enabled, users can flip the location of their sidebar between the left and right sides." addon_id="" display_order="18" group_name="xenfocus_other" value_group="Sidebars" depends_on="" value_type="boolean" property_type="value" property_name="xenfocus_sidebarFlipToggle">

<value>1</value>

</property>


-<property title="Social icons" description="Add your social icon code here. Format must be &lt;li&gt;&lt;a href="https://www.site.com/username"&gt;(optional)&lt;/a&gt;&lt;/li&gt;" addon_id="" display_order="20" group_name="xenfocus_social" value_group="" depends_on="" value_type="string" property_type="value" property_name="xenfocus_social">

<value_parameters>rows=3</value_parameters>

<value>"<li><a href='#youtube.com' target='_blank'></a></li>\n<li><a href='#facebook.com/' target='_blank'></a></li>\n<li><a href='#twitter.com' target='_blank'></a></li>\n<li><a href='#discordapp.com' target='_blank'></a></li>"</value>

</property>


-<property title="Display icons next to breadcrumb?" description="If enabled, social network icons will be placed next to your breadcrumb navigation at the top of the page." addon_id="" display_order="10" group_name="xenfocus_social" value_group="" depends_on="" value_type="boolean" property_type="value" property_name="xenfocus_socialEnable">

<value>1</value>

</property>


-<property title="Display icons in footer?" description="If enabled, social network icons will be added to the bottom of your site." addon_id="" display_order="15" group_name="xenfocus_social" value_group="" depends_on="" value_type="boolean" property_type="value" property_name="xenfocus_socialFooter">

<value>1</value>

</property>


-<property title="Separate sticky topics" description="If enabled, sticky topics will be separated with dividers." addon_id="" display_order="30" group_name="xenfocus_other" value_group="NodeAndTopicLists" depends_on="" value_type="boolean" property_type="value" property_name="xenfocus_sticky">

<value>1</value>

</property>


-<property title="Sticky author column?" description="If enabled, the author column in topics will stick to the top of the browser window when scrolled." addon_id="" display_order="90" group_name="xenfocus_other" value_group="TopicLayout" depends_on="" value_type="boolean" property_type="value" property_name="xenfocus_stickyAuthor">

<value>1</value>

</property>


-<property title="Sticky sidebar?" description="If enabled, the sidebar will become stuck to the top of the browser window when scrolled." addon_id="" display_order="15" group_name="xenfocus_other" value_group="Sidebars" depends_on="" value_type="boolean" property_type="value" property_name="xenfocus_stickyBlocks">

<value>1</value>

</property>


-<property title="Allow members to toggle sticky sidebars?" description="If the <em>Customize Panel</em> is enabled, your members will be able to toggle the sticky sidebar." addon_id="" display_order="16" group_name="xenfocus_other" value_group="Sidebars" depends_on="" value_type="boolean" property_type="value" property_name="xenfocus_stickyToggle">

<value>1</value>

</property>


-<property title="Table layout" description="Change the layout of node and topic tables." addon_id="" display_order="25" group_name="xenfocus_other" value_group="NodeAndTopicLists" depends_on="" value_type="select" property_type="value" property_name="xenfocus_tableLayout">

<value_parameters>standard=Standard standardHover=Standard with hover effect minimal=Minimal</value_parameters>

<value>"minimal"</value>

</property>


-<property title="Enable Customize Panel?" description="The <em>Customize Panel</em> allows your visitors to enable or disable specific features throughout your theme." addon_id="" display_order="50" group_name="xenfocus_themeEditor" value_group="" depends_on="" value_type="boolean" property_type="value" property_name="xenfocus_themeEditor">

<value>1</value>

</property>


-<property title="User links height (px)" description="" addon_id="" display_order="100" group_name="xenfocus_user" value_group="" depends_on="" value_type="number" property_type="value" property_name="xenfocus_userHeight">

<value>"36"</value>

</property>


-<property title="Register button" description="Make the Register button stand out with it's own background color." addon_id="" display_order="120" group_name="xenfocus_user" value_group="" depends_on="" value_type="color" property_type="value" property_name="xenfocus_userRegister">

<value>"rgb(103, 175, 81)"</value>

</property>


-<property title="Separate links with border?" description="If enabled, borders will divide each user link." addon_id="" display_order="130" group_name="xenfocus_user" value_group="" depends_on="" value_type="boolean" property_type="value" property_name="xenfocus_userSep">

<value>0</value>

</property>


-<property title="User panel styles" description="" addon_id="" display_order="100" group_name="xenfocus_user" css_components="text,background,border,border_radius" value_group="" depends_on="" value_type="" property_type="css" property_name="xenfocus_userStyles">

<value>{"color": "@xf-publicHeader--color","font-weight": "@xf-fontWeightHeavy","border-color": "fade(@xf-xenfocus_userStyles--background-color, 15%)","border-radius": "3px" }</value>

</property>


-<property title="Apply border-radius to" description="Choose whether to apply the border-radius to the wrapper or individual links." addon_id="" display_order="125" group_name="xenfocus_user" value_group="" depends_on="" value_type="select" property_type="value" property_name="xenfocus_userlinksRadius">

<value_parameters>parent=Wrapper children=Individual links</value_parameters>

<value>"children"</value>

</property>


-<property title="Fluid width?" description="If enabled, your site will occupy the full width of the browser." addon_id="" display_order="12" group_name="xenfocus_other" value_group="Layout" depends_on="" value_type="boolean" property_type="value" property_name="xenfocus_widthEnable">

<value>0</value>

</property>


-<property title="Allow members to toggle "Fluid width"?" description="If enabled, your members will be able to toggle "Fluid width" on and off using the <em>Customize Panel</em>." addon_id="" display_order="13" group_name="xenfocus_other" value_group="Layout" depends_on="" value_type="boolean" property_type="value" property_name="xenfocus_widthToggle">

<value>1</value>

</property>


-<property title="Wrapper styles" description="" addon_id="" display_order="10" group_name="xenfocus_wrapper" css_components="background,border_width_simple,border_color_simple,border_radius_simple,extra" value_group="" depends_on="" value_type="" property_type="css" property_name="xenfocus_wrapperStyles">

<value>[]</value>

</property>


-<property title="Zebra rows" description="If enabled, alternating background colours will be used for nodes and topics." addon_id="" display_order="23" group_name="xenfocus_other" value_group="NodeAndTopicLists" depends_on="" value_type="boolean" property_type="value" property_name="xenfocus_zebra">

<value>0</value>

</property>

</properties>

</style>