/*

Theme Name: Globaladxchange 2026

Theme URI: http://thetrafficexchangescript.com/

Description: The default theme for LFMTE traffic exchanges.

Version: 3.0

Author: Josh Abbott

*/


@charset "utf-8";


/* ==========================================================================
   Global Ad Xchange brand palette
   Extracted from the source site: black/gold metallic banners, a dusty
   rose-taupe page background, a mustard-gold navigation strip with raised
   gold beveled buttons, khaki-gold headings and a deep maroon accent band.
   ========================================================================== */

:root {
	--gax-bg:        #9c8283;  /* dusty rose-taupe page background */
	--gax-bg-dark:   #8d7374;  /* slightly darker for subtle gradient */
	--gax-gold:      #c9a227;  /* core mustard gold */
	--gax-gold-lite: #f7e07a;  /* light gold highlight */
	--gax-gold-deep: #a8811a;  /* deep gold shadow */
	--gax-gold-edge: #6f5410;  /* dark bronze button edge */
	--gax-khaki:     #e3c66a;  /* khaki-gold heading/link text */
	--gax-maroon:    #a5504f;  /* deep maroon accent band */
	--gax-cream:     #fdf6e3;  /* cream dropdown surface */
	--gax-ink:       #2b1f04;  /* dark brown text on gold */
	--gax-frame:     #b8933f;  /* metallic gold frame */
}


/* Main font settings */

body {
	font-size: 16px;
	font-weight: 400;
	color: #f4ead0;
	background: linear-gradient(180deg, var(--gax-bg) 0%, var(--gax-bg-dark) 100%);
	background-attachment: fixed;
	background-color: var(--gax-bg);
}

/* Headings pick up the khaki-gold brand tone */
h1, h2, h3, h4, h5, h6 {
	color: var(--gax-khaki);
	text-shadow: 0 1px 1px rgba(0,0,0,0.35);
}

/* Body links */
a {
	color: var(--gax-khaki);
}
a:hover {
	color: var(--gax-gold-lite);
}


/* ==========================================================================
   Custom header & footer brand banners (Global Ad Xchange)
   The full metallic banner sits flush at the very top of every page and the
   matching banner sits flush at the very bottom. No z-index is used so the
   navigation tabs stack naturally above everything.
   ========================================================================== */

.gax-banner {
	width: 100%;
	text-align: center;
	background-color: #000000;
	line-height: 0;           /* removes gap under the inline image */
	overflow: hidden;
}
.gax-banner img {
	display: block;
	width: 100%;
	max-width: 1900px;
	height: auto;
	margin: 0 auto;
}

/* Header banner sits at the very top */
.gax-header-banner {
	margin-bottom: 0;
}

/* Footer banner sits at the very bottom */
.gax-footer-banner {
	margin-top: 20px;
}


/* Main styles for the top level of the main menu */

.lfm_menu_bar {
	/* Mustard-gold navigation strip framed with a metallic gold top/bottom edge */
	background: linear-gradient(180deg, #d8b23a 0%, var(--gax-gold) 50%, var(--gax-gold-deep) 100%);
	border-top: 3px solid var(--gax-frame);
	border-bottom: 3px solid var(--gax-gold-edge);
	padding: 0 0 45px;
	margin-bottom: 20px; /* If your menu bar is overlapping the page content, increase the margin here */
}

@media (max-width: 991.98px) {
	/* Mobile view settings for the top level navigation */
	.lfm_menu_bar {
		padding-bottom: 0;
		margin-bottom: 20px;
	}
}


/* Site logo styles */

.lfm_menu_logo {
	max-height: 35px;
}
@media (min-width: 992px) {
	.lfm_menu_logo {
		margin-right: 20px;
	}
}


.lfm_menu_bar .navbar-nav > .nav-item > .nav-link {
	/* Sets the navigation tabs for the top level - raised gold beveled buttons */
	font-size: 15px;
	font-weight: 600;
	color: var(--gax-ink);
	text-shadow: 0 1px 0 rgba(255,255,255,0.35);
}

.lfm_menu_bar .navbar-nav > .nav-item.lfm_tab_opened > .nav-link {
	/* Changes the colors when a tab is opened - links to the cream dropdown */
	color: var(--gax-ink);
	background: var(--gax-cream);
	text-shadow: none;
}

.lfm_menu_bar .navbar-nav > .nav-item > .nav-link:hover {
	/* Hover style when a tab is not opened - brighter gold */
	color: var(--gax-ink);
	background: linear-gradient(to bottom, #fff0ad 0%, var(--gax-gold-lite) 55%, var(--gax-gold) 100%);
}

.lfm_menu_bar .navbar-nav > .nav-item.lfm_tab_opened > .nav-link:hover {
	/* Hover style when a tab is opened */
	background: var(--gax-cream);
}

@media (min-width: 992px) {
	/* Desktop view settings for the top level navigation tabs - gold buttons */
	.lfm_menu_bar .navbar-nav > .nav-item > .nav-link {
		margin: 0px 4px;
		padding: 6px 18px;
		border: 1px solid var(--gax-gold-edge);
		border-radius: 5px;
		position: relative;
		background: linear-gradient(to bottom, var(--gax-gold-lite) 0%, #e6c34d 45%, var(--gax-gold) 55%, var(--gax-gold-deep) 100%);
		box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), 0 1px 2px rgba(0,0,0,0.35);
	}

	.lfm_menu_bar .navbar-nav > .nav-item.lfm_tab_opened > .nav-link {
		/* Opened tab flattens into the cream dropdown surface */
		border: 1px solid var(--gax-gold-edge);
		border-bottom-color: var(--gax-cream);
		box-shadow: none;
	}
	.lfm_menu_bar .navbar-nav > .nav-item > .nav-link:hover {
		border: 1px solid var(--gax-gold-edge);
	}

	.lfm_menu_bar .navbar-nav > .nav-item.lfm_tab_opened > .nav-link:after {
		/* Fills in the gap between an opened tab and the bottom of the bar */
		content: "";
		background-color: var(--gax-cream);
		width: calc(100% + 2px);
		height: 14px;
		position: absolute;
		bottom: -10px;
		left: -1px;
		border: 1px solid var(--gax-gold-edge);
		border-top: none;
	}
}

@media (max-width: 991.98px) {
	/* Mobile view settings for the top level navigation tabs */
	.lfm_menu_bar .navbar-nav > .nav-item > .nav-link {
		padding: 8px 15px;
		text-align: left;
	}
	
	.lfm_menu_bar .navbar-nav > .nav-item.lfm_tab_closed > .nav-link {
		/* Returns to the gold button look when a tab is closed in mobile */
		color: var(--gax-ink);
		background: linear-gradient(to bottom, var(--gax-gold-lite) 0%, #e6c34d 45%, var(--gax-gold) 55%, var(--gax-gold-deep) 100%);
	}

	.lfm_menu_bar .navbar-nav > .nav-item.lfm_tab_closed > .nav-link:hover {
		/* Returns to the brighter gold hover effect when closed in mobile  */
		color: var(--gax-ink);
		background: linear-gradient(to bottom, #fff0ad 0%, var(--gax-gold-lite) 55%, var(--gax-gold) 100%);
	}
	
	/* Adds an arrow in mobile view */
	.lfm_menu_bar .navbar-nav > .nav-item > .nav-link:after {
		content: "";
		border-top: 0.3em solid;
		border-right: 0.3em solid transparent;
		border-bottom: 0;
		border-left: 0.3em solid transparent;
		color: var(--gax-ink);
		transform: rotate(-90deg);
		position: absolute;
		right: 1.25rem;
		transition: all 0.1s ease-out;
	}
	.lfm_menu_bar .navbar-nav > .nav-item.lfm_tab_opened > .nav-link:after {
		color: var(--gax-ink);
		transform: rotate(0deg);
	}
	.lfm_menu_bar .navbar-nav > .nav-item.lfm_tab_closed > .nav-link:after {
		color: var(--gax-ink);
		transform: rotate(-90deg);
	}
}


/* Main styles for the second level of the main menu */

.lfm_menu_tab {
	background-color: var(--gax-cream);
	border: 1px solid var(--gax-gold-edge);
	position: absolute;
	display: none;
	left: 0;
	top: 100%;
	z-index: 999;
	width: 100%;
}

li.lfm_tab_opened .lfm_menu_tab {
	display: flex;
}

@media (max-width: 991.98px) {
	/* Mobile view settings for the second level navigation */
	.lfm_menu_tab {
		background-color: var(--gax-cream);
		position: relative;
		flex-direction: column;
		top: 0;
		padding: 5px 0;
	}
	li.lfm_tab_closed .lfm_menu_tab {
		display: none;
	}
}


.lfm_menu_tab > li > a {
	/* Sets the navigation links for the second level */
	font-size: 15px;
	padding: 0 20px;
	line-height: 45px;
	color: #4a3a10;
	text-decoration: none;
	display: block;
}
.lfm_menu_tab > li > a:hover {
	color: var(--gax-gold-deep);
}

.lfm_menu_tab .dropdown-menu a {
	/* Sets the navigation links for the third level */
	font-size: 15px;
	padding: 0 20px;
	line-height: 32px;
	color: #4a3a10;
	text-decoration: none;
	white-space: nowrap;
	display: block;
}
.lfm_menu_tab .dropdown-menu li:hover {
	background-color: #f3e4b0;
}

@media (max-width: 991.98px) {
	/* Mobile view settings for the second level navigation links */
	.lfm_menu_tab > li > a {
		padding-left: 40px;
		line-height: 36px;
		width: 100%;
	}
	
	/* Mobile view settings for the third level navigation links */
	.lfm_menu_tab .dropdown-menu a {
		padding-left: 50px;
	}
}


/* Styles for the footer */

.lfm_footer {
	background-color: #1a1207;
	border-top: 3px solid var(--gax-frame);
}


/* Icon settings */

.far, .fas {
	margin-right:3px;
}

.feedicon {
	color:var(--gax-gold-deep);
	font-size:20px;
	margin-right:5px;
}


/* Profile picture sizes */

.profilepic_small {
	width:40px;
	height:40px;
}

.profilepic_med {
	width:75px;
	height:75px;
}

.profilepic_large {
	width:200px;
	height:200px;
}


/* Various styles */

.buttonlink {
	/* This class defines <a> tag links that look like buttons - raised gold */
	cursor: pointer;
	background: linear-gradient(to bottom, var(--gax-gold-lite) 0%, #e6c34d 45%, var(--gax-gold) 55%, var(--gax-gold-deep) 100%);
	border-radius:4px;
	border:1px solid var(--gax-gold-edge);
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), 0 1px 2px rgba(0,0,0,0.35);
	display:inline-block;
	cursor:pointer;
	color:var(--gax-ink);
	text-shadow: 0 1px 0 rgba(255,255,255,0.35);
	font-family:arial;
	font-size:18px;
	font-weight:600;
	padding:4px 12px;
	margin:2px 1px 2px 1px;
	text-decoration:none;
}
.buttonlink:hover {
	/* This controls the button links when you hover over them */
	color:var(--gax-ink);
	background: linear-gradient(to bottom, #fff0ad 0%, var(--gax-gold-lite) 55%, var(--gax-gold) 100%);
	text-decoration:none;
}


.infobar {
	/* This class defines sections that span the entire page width - maroon band */
	width:100%;
	padding-top: 15px;
	padding-bottom: 15px;
	color:#FFFFFF;
	background-color:var(--gax-maroon);
}
.infobar h2 {
	color:#FFFFFF;
}


.vcenter {
	/* This is a class that can be used in Bootstrap rows to vertically center the content */
	display: flex;
	align-items: center;
}


/* The next 3 sections control various text styles used throughout the LFM Members Area */
.lfm_title {
	font-family: "Arial"; color:#333333; font-size:32px;
}

.lfm_descr {
	font-family: "Arial"; color:#111111; font-size:16px;
}

.lfm_descr_bold {
	font-family: "Arial"; color:#000000; font-size:16px;
	font-weight:700;
}


/* ==========================================================================
   Global Ad Xchange brand accents on Bootstrap components
   ========================================================================== */

/* Third level (Bootstrap) dropdown surface matches the cream menu */
.lfm_menu_tab .dropdown-menu {
	background-color: var(--gax-cream);
	border: 1px solid var(--gax-gold-edge);
}

/* Primary buttons become the signature raised gold button */
.btn-primary {
	background: linear-gradient(to bottom, var(--gax-gold-lite) 0%, #e6c34d 45%, var(--gax-gold) 55%, var(--gax-gold-deep) 100%);
	border-color: var(--gax-gold-edge);
	color: var(--gax-ink);
	text-shadow: 0 1px 0 rgba(255,255,255,0.35);
	font-weight: 600;
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), 0 1px 2px rgba(0,0,0,0.3);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:not(:disabled):not(.disabled):active {
	background: linear-gradient(to bottom, #fff0ad 0%, var(--gax-gold-lite) 55%, var(--gax-gold) 100%);
	border-color: var(--gax-gold-edge);
	color: var(--gax-ink);
	box-shadow: inset 0 1px 3px rgba(0,0,0,0.25);
}

/* Outline primary keeps the gold identity with readable dark text */
.btn-outline-primary {
	color: var(--gax-gold-deep);
	border-color: var(--gax-gold-deep);
}
.btn-outline-primary:hover {
	background: linear-gradient(to bottom, var(--gax-gold-lite) 0%, var(--gax-gold) 100%);
	border-color: var(--gax-gold-edge);
	color: var(--gax-ink);
}

/* Nav logo (Global Ad Xchange banner) sizing in the menu bar */
.lfm_menu_logo {
	border-radius: 3px;
}

@media (min-width: 992px) {
	/* The full brand banner already sits at the very top, so on desktop the
	   gold button bar shows just the centered buttons (matching the source
	   site). The logo still appears as the mobile menu toggler. */
	.lfm_menu_bar .navbar > a.d-lg-block {
		display: none !important;
	}
	.lfm_menu_bar .navbar-nav {
		margin: 0 auto;
	}
}