:root {
	/* Brand colour, single point of change - see _notes/changelog.md
	   "Colours" section. */
	--brand-primary: #043B73;	/* Racing Australia navy */
	--brand-primary-tint: #e3ebf4;	/* light tint of --brand-primary */
	--brand-accent: #118a43;	/* Racing Australia green */
}
html {
	font-size: 13px;
}
body, button, input, select, textarea {
	font-family: "Trebuchet MS", arial, courier, serif;
	font-size: 13px;
	line-height: 1.231;
	color: #303030;
	-webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
	-webkit-text-size-adjust: 100%;
	margin: 0 10px;
}
/* Shared card shape (border/radius/padding/background) used by wizard/faxblast
   screens - see _notes/changelog.md "Card system". Applied via class="wel-card"
   in the shared XSL templates so it's defined once per skin instead of
   duplicated per page. Override the --wel-card-* variables, or this rule
   outright, to change or opt this skin out of the card look (e.g. set
   border/radius/padding to none/0/0 and background to transparent to flatten
   it back to plain content). */
.wel-card {
	box-sizing: border-box;
	border: var(--wel-card-border, 1px solid #e0e0e0);
	border-radius: var(--wel-card-radius, 10px);
	padding: var(--wel-card-padding, 18px 22px);
	background: var(--wel-card-bg, #fff);
}

/* Headings that are the first thing inside a card shouldn't carry their
   usual top margin - it just reads as dead space above the card content. */
.wel-card > h3:first-child,
.wel-card > h4:first-child {
	margin-top: 0;
}

/* .buttonlink/.buttonlink-secondary - primary/secondary action buttons used by
   the shared multi/wizard templates. This skin never defined them before, so
   buttons using these classes rendered unstyled. Sized to match WelHome's own
   values since there was no existing button here to stay proportional to. */
.buttonlink {
	display:inline-block;
	color:white !important;
	background-color:var(--brand-primary);
	padding:7px 20px;
	border-radius:4px;
	font-size:1.2em;
	border:none;
	cursor:pointer;
	margin:2px;
}
.buttonlink-secondary {
	display:inline-block;
	box-sizing:border-box;
	color:var(--brand-primary) !important;
	background-color:#fff;
	padding:7px 20px;
	border-radius:4px;
	font-size:1.2em;
	border:1px solid var(--brand-primary);
	cursor:pointer;
	margin:2px;
}
.buttonlink-secondary:hover {
	background-color:var(--brand-primary-tint);
}
.thinbutton {
	padding:4px 15px;
	border-radius:3px;
	font-size:1em;
}

TD {
	FONT-SIZE: 12px; COLOR: #333333; LINE-HEIGHT: 14px; FONT-FAMILY: arial; TEXT-ALIGN: left
}
A {
	COLOR: var(--brand-primary); TEXT-DECORATION: underline
}

UL {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
LI {
	padding:0px; MARGIN: 0px; LINE-HEIGHT: 18px; 
}
.head {
	COLOR: #cccccc
}
.head A {
	FONT-SIZE: 10px; COLOR: #333333; TEXT-DECORATION: none
}
.head A:hover {
	TEXT-DECORATION: underline
}
.copy A {
	TEXT-DECORATION: none
}
.copy A:hover {
	TEXT-DECORATION: underline
}
.copy SPAN A {
	FONT-WEIGHT: bold; TEXT-TRANSFORM: uppercase; COLOR: #ffffff
}
.free SPAN {
	COLOR: var(--brand-primary)
}
.product STRONG {
	COLOR: #0980bc
}
.account SPAN {
	COLOR: #0980bc
}
.account SPAN A {
	COLOR: #333333
}
.sign {
	FONT-WEIGHT: bold; COLOR: #66ccff
}
.sign A {
	COLOR: #ffffff
}
.plan {
	FONT-SIZE: 11px; LINE-HEIGHT: 13px
}
.plan A {
	FONT-SIZE: 12px
}
.m {
	VERTICAL-ALIGN: middle
}
.form {
	BORDER-RIGHT: #7e7e7e 1px solid; BORDER-TOP: #7e7e7e 1px solid; FONT-SIZE: 11px; MARGIN-LEFT: 0px; BORDER-LEFT: #7e7e7e 1px solid; WIDTH: 220px; COLOR: #5f5f5f; MARGIN-RIGHT: 0px; BORDER-BOTTOM: #7e7e7e 1px solid; FONT-FAMILY: tahoma; HEIGHT: 17px; BACKGROUND-COLOR: #ffffff
}
.textarea {
	BORDER-RIGHT: #7e7e7e 1px solid; BORDER-TOP: #7e7e7e 1px solid; FONT-SIZE: 11px; MARGIN-LEFT: 0px; BORDER-LEFT: #7e7e7e 1px solid; WIDTH: 440px; COLOR: #5f5f5f; MARGIN-RIGHT: 0px; BORDER-BOTTOM: #7e7e7e 1px solid; FONT-FAMILY: tahoma; HEIGHT: 208px; BACKGROUND-COLOR: #ffffff
}
A:hover {
	TEXT-DECORATION: none
}
.headingblue {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: var(--brand-primary);
	font-weight: bold;
}

/* WEL styles */
.menuhead {
	font-weight: bold;
}
.menuitem {

}
.blueheader {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: var(--brand-primary);
	font-weight: bold;
}
.redText {color: var(--brand-primary)}
.blueText {color: var(--brand-primary)}
.greenText {color: #00AA00}
.bgltblue {background-color: #BDD3DF}
.bgdkblue {background-color: var(--brand-primary); color:#FFFFFF}
.bgdkblue td {background-color: var(--brand-primary); color:#FFFFFF}
.bgwhite {background-color: #FFFFFF}
.bgltgrey {background-color: #666666}
.smlblueheader {font-size: 11px;font-family:Verdana, Arial, Helvetica; color: var(--brand-primary); font-weight: bold}
.smlredheader {font-size: 11px;font-family:Verdana, Arial, Helvetica; color: var(--brand-primary); font-weight: bold}
.small {font-size: 11px}
.dkblue {background-color: #000066; color:#FFFFFF}

/* Div/CSS layout for template.html (same structure as the DistID 16 skin).
   Structure: .ra-header (Racing Australia banner + navy link bar) ->
   .ra-main (menu + content, flex two-column) -> .ra-footer. */
.ra-page {
	width: 100%;
	margin: 0;
}
.ra-header-banner {
	background: #ffffff;
	text-align: center;
	overflow: hidden;
}
.ra-header-banner img {
	display: block;
	margin: 0 auto;
	max-width: 100%;
	height: auto;
}
.ra-nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 4px 28px;
	background: var(--brand-primary);
	padding: 9px 15px;
	border-bottom: 4px solid var(--brand-accent);
}
.ra-nav a {
	color: #ffffff;
	font-weight: bold;
	text-decoration: none;
}
.ra-nav a:hover {
	text-decoration: underline;
}

.ra-main {
	display: flex;
	align-items: flex-start;
	margin-top: 10px;
	padding-bottom: 20px;
}
.ra-menu {
	flex: 0 0 250px;
	width: 250px;
	box-sizing: border-box;
	margin: 3px;
	padding-right: 3px;
	position: relative;	/* as #bemenu in member_default.css: keep nav above dashboard widgets */
	z-index: 999;
}
.ra-menu #nav ul {
	width: auto;
}
/* member_default.css (dashboard only) fixes submenu links at 173px - let them fill the column */
.ra-menu #nav li ul li a:link,
.ra-menu #nav li ul li a:visited,
.ra-menu #nav li ul li a:active {
	width: auto;
}
/* dropdown.css hard-codes a pale pink current-page highlight - use this skin's tint */
.ra-menu #nav a.current {
	background: var(--brand-primary-tint);
}

.ra-content {
	flex: 1;
	min-width: 0;
	padding: 10px 10px 10px 20px;
	background: white;
	border-left: var(--wel-card-border, 1px solid #e0e0e0);
}

.ra-footer {
	width: 100%;
	background: var(--brand-primary);
	border-top: 4px solid var(--brand-accent);
	color: #ffffff;
	text-align: center;
	padding: 12px 15px;
	margin-top: 10px;
	box-sizing: border-box;
	font-size: 12px;
}
.ra-footer p {
	margin: 3px 0;
}
.ra-footer a {
	color: #ffffff;
	text-decoration: underline;
}

#listbox .listtable-subth {
	background-color: var(--brand-primary) !important;
}

/* Narrow screens: stack the menu above the content */
@media (max-width: 760px) {
	.ra-main {
		flex-direction: column;
	}
	.ra-menu {
		flex: none;
		width: 100%;
	}
	.ra-content {
		border-left: none;
		padding: 10px;
	}
}