#logoBlock .pageContent {
	{xen:property uix_logoBlock_style}
}

<xen:comment> FLEX LAYOUT APPLIED TO LOGOBLOCK CONTENTS </xen:comment>

.hasFlexbox #logoBlock {xen:if '{xen:property uix_pageStyle} == 1', '.pageWidth', '.pageContent'} {
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;

	-ms-flex-pack: justify;
	-webkit-justify-content: space-between;
	justify-content: space-between;

	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
}


<xen:comment> CLEARFIX SET BY XENFORO INTERFERES WITH FLEX LAYOUT </xen:comment>

.hasFlexbox #logoBlock {xen:if '{xen:property uix_pageStyle} == 1', '.pageWidth', '.pageContent'}:after { display: none; }


.hasFlexbox #logoBlock .pageContent span.helper { display: none; }


#logo a { text-decoration: none; }

#logo_small a { text-decoration: none; }

<xen:if is="{xen:property uix_logoWidth}">
	#logo img {
		max-width: {xen:property uix_logoWidth};
		<xen:comment>tbro this needed? -mike ===></xen:comment> width: 100%;
	}
</xen:if>

<xen:if is="({xen:property uix_navigationStickyLogo} && {xen:property uix_stickyNavigation}) || {xen:property uix_navStyle} == 2">
	#logo_small {
		float: left;
		display: none;
	}

	.activeSmallLogo #logo_small {
		display: block;
	}

	<xen:if is="{xen:property uix_navStyle} == 2">
		#logo_small { display: block; }
	</xen:if>

	#logo_small a {
		display: block;
		height: {xen:property headerTabHeight};
		line-height: {xen:property headerTabHeight};
		padding: 0 {xen:property uix_gutterWidthSmall};

		-webkit-transform-style: preserve-3d;
		transform-style: preserve-3d;
	}

	.activeSticky #logo_small a {
		height: {xen:property uix_fixedNavigationHeight};
		line-height: {xen:property uix_fixedNavigationHeight};
	}

	#logo_small a:hover {
		color: {xen:property uix_navLinkHover.color};
	}

	#logo_small img {
		<xen:if is="{xen:property uix_navigationLogoWidth}">width: {xen:property uix_navigationLogoWidth};</xen:if>
		display: inline-block;
		vertical-align: top;
		position: relative;
		top: 50%;
		transform: translateY(-50%);
	}
</xen:if>


/* Styling text based logo */

.uix_logoText {
	{xen:property uix_textLogo}

	white-space: nowrap;
}

<xen:if is="{xen:property uix_logoTextBreakpoint}">
@media (max-width: {xen:property uix_logoTextBreakpoint}) {
	.Responsive .uix_logoText { font-size: {xen:property uix_responsiveLogoFontSize}; }
}
</xen:if>

.uix_logoText .uix_icon { margin-right: .5em; }

.uix_navigationLogoText {
	{xen:property uix_navigationLogoText}
}

<xen:if is="{xen:property uix_navigationLogoTextBreakpoint}">
@media (max-width: {xen:property uix_navigationLogoTextBreakpoint}) {
	.Responsive .uix_navigationLogoText { font-size: {xen:property uix_responsiveNavigationLogoFontSize}; }
}
</xen:if>

.uix_navigationLogoText .uix_icon { margin-right: .5em; }


<xen:comment> /********* SLOGAN **********/ </xen:comment>

<xen:if is="{xen:property uix_sloganText}">
	#logoBlock .pageWidth
	{
		position: relative;
	}
	.uix_slogan
	{
		{xen:property uix_slogan}
	}
	.uix_slogan:hover
	{
		{xen:property uix_sloganHover}
	}

	@media (max-width:{xen:property maxResponsiveWideWidth})
	{
		.Responsive .uix_slogan {display: none;}
	}

</xen:if>

<xen:comment> CENTERED LOGO </xen:comment>
<xen:if is="{xen:property uix_widthToCenterLogo} != '100%'">
	@media (max-width: {xen:property uix_widthToCenterLogo})
	{
		.Responsive.hasFlexbox #logoBlock {xen:if '{xen:property uix_pageStyle} == 1', '.pageWidth', '.pageContent'} {
			-ms-flex-wrap: wrap;
			-webkit-flex-wrap: wrap;
			flex-wrap: wrap;
		}

		.Responsive.hasFlexbox #logoBlock {xen:if '{xen:property uix_pageStyle} == 1', '.pageWidth', '.pageContent'} > * {
			-ms-flex: 0 1 100%;
			-webkit-flex: 0 1 100%;
			flex: 0 1 100%;
		}

		.Responsive #logo {
			float: none;
			text-align: center;
		}

		.Responsive .uix_slogan {
			display: none;
		}
	}

<xen:else />

	.hasFlexbox #logoBlock {xen:if '{xen:property uix_pageStyle} == 1', '.pageWidth', '.pageContent'} {
		-ms-flex-wrap: wrap;
		-webkit-flex-wrap: wrap;
		flex-wrap: wrap;
	}

	.hasFlexbox #logoBlock {xen:if '{xen:property uix_pageStyle} == 1', '.pageWidth', '.pageContent'} > * {
		-ms-flex: 0 1 100%;
		-webkit-flex: 0 1 100%;
		flex: 0 1 100%;
	}

	#logo {
		float: none;
		text-align: center;
	}
	.uix_slogan {
		display: none;
	}
</xen:if>

<xen:comment> IF COVERED PAGE STYLE IS ENABLED </xen:comment>
<xen:if is="{xen:property uix_pageStyle} == 1">

	{xen:helper clearfix, '#logoBlock .pageWidth'}

	#logoBlock .pageContent {
		border-left: none;
		border-right: none;
	}

	#logoBlock .funbox { margin-top: 0; }

</xen:if>

<xen:comment> IF NAVIGATION STYLE 3 </xen:comment>
<xen:if is="{xen:property uix_navStyle} == 3 && {xen:property uix_pageStyle} != 1">

	@media (min-width: {xen:calc '{xen:property maxResponsiveWideWidth} + 1'}px) {
		/*----Unecessary code after Page style fix for 1.5.7---Ian--*/
		<xen:comment>
		#header > div#logoBlock {
			margin-bottom: 0;
			margin-top: 0;
		}
		</xen:comment>

		<xen:comment> #navigation WITH .withSearch HAS A Z-INDEX OF 52 </xen:comment>

		#logoBlock .pageContent {
			position: relative;
			z-index: 53;
		}

		.hasFlexbox #logo {
			-ms-flex: 1 1 0%;
			-webkit-flex: 1 1 0%;
			flex: 1 1 0%;
		}

	<xen:comment> WIDTH OF FLOATED LOGOBLOCK </xen:comment>
	<xen:if is="{xen:property uix_logoBlockWidth}">
		#navigation .pageContent {
			margin-left: {xen:calc '{xen:property uix_logoBlockWidth} + {xen:property uix_gutterWidth}'}px;
		}

		#logoBlock .pageContent {
			width: {xen:property uix_logoBlockWidth};
			float: left;
		}
	<xen:else />

		#navigation .pageContent {
			margin-left: {xen:calc '{xen:property sidebar.width} + {xen:property uix_gutterWidth}'}px;
		}
		#logoBlock .pageContent {
			width: {xen:property sidebar.width};
			float: left;
		}

	</xen:if>

	<xen:comment> HEIGHT DEPENDING ON TABLINKS </xen:comment>
	<xen:if is="{$uix_tabLinksDropdown}">
		#logo {
			line-height: {xen:calc '{$headerTabHeight_outer} - 4'}px;
			*line-height: {$headerTabHeight_outer}px;
			height: {$headerTabHeight_outer}px;
		}

		#logo img {
			max-height: {$headerTabHeight_outer}px;
		}
    </xen:if>
	<xen:if is="{$uix_tabLinksBar}">
		#logo {
			line-height: {xen:calc '{$headerTabHeight_outer} + {xen:property uix_tabLinksHeight} - 4'}px;
			*line-height: {xen:calc '{$headerTabHeight_outer} + {xen:property uix_tabLinksHeight}'}px;
			height: {xen:calc '{$headerTabHeight_outer} + {xen:property uix_tabLinksHeight}'}px;
		}

		#logo img {
			max-height: {xen:calc '{$headerTabHeight_outer} + {xen:property uix_tabLinksHeight}'}px;
		}

	</xen:if>

	}

</xen:if>