/*------------------------------------------------------------------------------
 Design tokens
 The legacy palette stays: sky blue page, cyan links, lime and yellow
 accents. Text-only variants of lime and cyan are darker so they stay
 readable on white.
------------------------------------------------------------------------------*/
:root {
	--fs: 12px;
	--fs-sm: 11px;
	--fs-header: 13px;
	--font: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Noto Sans", "Open Sans", "Helvetica Neue", Arial, sans-serif;

	--sky: #78add3;
	--sky-dark: #5f9ac6;
	--blue: #0099cb;
	--blue-text: #0077a8;
	--lime: #b3d71d;
	--lime-dark: #93b812;
	--lime-text: #4d7c0f;
	--yellow: #f9cf04;
	--yellow-dark: #d6b201;
	--red-text: #c62828;

	--text: #3f4850;
	--muted: #6b7680;
	--line: #dde5ec;
	--line-dotted: #c9d4dd;
	--row-alt: #f4f8fb;
	--row-hover: #e3f1fa;
	--row-own: #fff4c2;
	--field-border: #b8c7d3;
	--radius: 6px;
}

/* algemeen */

body {
	background-color: var(--sky);
	background-image:
		linear-gradient(to bottom, rgba(120, 173, 211, 0) 0, var(--sky) 140px),
		repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.08) 0 22px, rgba(255, 255, 255, 0) 22px 44px);
	background-repeat: no-repeat;
	margin:0px auto;
	font: var(--fs)/1.5 var(--font);
	color: var(--text);
	text-align: center;
}

#main
{
    display:block;
	text-align: left;
	width: 920px;
	margin:0px auto;
	overflow:auto;
}

div {
	overflow:hidden;
}

p {
	padding:0px 0px 10px 0px;
	margin:0px;
	text-align: left;
}

label {
	width:100%;
	line-height: 2;
	float:left;
	font-weight: bold;
}

form img {
	float:left;
}
form {
	margin:0px;
}

fieldset {
	margin:0px;
	padding:0px;
	border:0px;
}

/* Form controls keep their legacy footprint (text boxes 133x22, inline
   widths plus 2px): pages lay them out in fixed-height rows and narrow
   columns. The border takes the place of the old padding, and the text
   indent does not widen the box. */
input {
	float:left;
	background: #fff;
	border: 1px solid var(--field-border);
	border-radius: 4px;
	height:19px;
	width:131px;
	font: var(--fs) var(--font);
	color: var(--text);
	padding: 1px 0 0 0;
	text-indent: 3px;
}

/* Tick boxes keep the 19px line box the global input rule always gave
   them; image buttons keep their legacy padding. */
input[type="checkbox"], input[type="radio"] {
	width: auto;
	padding: 0;
	border: 0;
	background: none;
	text-indent: 0;
	accent-color: var(--blue);
}
input[type="image"] {
	border: 0;
	border-radius: 0;
	background: none;
	padding: 3px 0 0 2px;
	text-indent: 0;
}

input.select {
	float:left;
	background: #fff;
	border: 1px solid var(--field-border);
	border-radius: 4px;
	height:19px;
	width:131px;
	font: var(--fs) var(--font);
	color: var(--text);
	padding: 1px 0 0 0;
	text-indent: 3px;
}
select {
	font: var(--fs) var(--font);
	color: var(--text);
	background: #fff;
	border: 1px solid var(--field-border);
	border-radius: 4px;
	padding: 0;
}
/* Dropdowns get just enough height for 12px text and still fit the 19px
   rows; list boxes (size or multiple) keep their own height. */
select:not([size]):not([multiple]), select[size="1"] {
	box-sizing: border-box;
	height: 19px;
}
textarea {
	font: var(--fs) var(--font);
	color: var(--text);
	border: 1px solid var(--field-border);
	border-radius: 4px;
	padding: 2px 0 0 0;
	resize: vertical;
}

input:focus, select:focus, textarea:focus {
	outline: none;
	border-color: var(--blue);
	box-shadow: 0 0 0 3px rgba(0, 153, 203, 0.2);
}

/* Ordinary buttons in brand blue, like the login arrow and the links.
   Yellow stays for the calls to action (.cta, registration, race voting). */
.submit {
	height: 22px;
	width: auto;
	margin: 0px;
	padding: 0 8px;
	color: #fff;
	font: bold var(--fs) var(--font);
	text-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
	background: linear-gradient(to bottom, #1aa6d6 0%, #0086b5 100%);
	border: 1px solid var(--blue-text);
	border-radius: 4px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 2px rgba(0, 0, 0, 0.15);
	cursor: pointer;
}
.submit:hover {
	background: linear-gradient(to bottom, #27b2e0 0%, var(--blue-text) 100%);
}
.submit:active {
	transform: translateY(1px);
}

/* Icon-only submit (login, change name): white chevrons on brand blue. */
.submit2 {
	margin: 0 0 0 6px;
	float:left;
	width: 22px;
	height: 22px;
	padding: 0;
	border: 0;
	border-radius: 4px;
	background: var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 2l4 4-4 4M6 2l4 4-4 4' fill='none' stroke='%23fff' stroke-width='1.6'/%3E%3C/svg%3E") center / 12px no-repeat;
	cursor: pointer;
}
.submit2:hover {
	background-color: var(--blue-text);
}

.sub1 {
	margin:5px 0px 0px 0px;
	float:left;
	overflow:visible;
}
.sub2 {
	float:left;
}
.sub3 {
	float:left;
}

.clear {
	clear: both;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
}

#container {
	width:920px;
	margin:0px auto;
	text-align:left;
}

#header {
	width:900px;
	height:192px;
	padding:0px 10px 0px;
	color:#fff;
	overflow:visible;
	position:relative;
	}
	#header a {
	text-decoration:none;
	color:#ffe45c;
}
/* Bold makes the yellow text links easier to spot on the sky blue; the
   shortcut icon labels keep their weight to fit their boxes. */
#top a, #stats a {
	font-weight: bold;
}
#header a:hover {
	text-decoration: underline;
}

#top {
	height:21px;
	padding:6px 6px 0px;
	text-align:right;
	font-size: var(--fs-header);
	text-shadow: 0 1px 1px rgba(0, 50, 90, 0.35);
}

#content {
	background: #fff;
	width: 900px;
	margin: 0 10px;
	padding: 0 0 12px 0;
	border-radius: var(--radius);
	box-shadow: 0 2px 8px rgba(20, 60, 100, 0.25);
}

/* The design switch: a pill centred in the top strip, easy to spot on the
   sky blue in both designs. Matched by its rendered id, since header.ascx
   renders it as a server control (ctl00_Header1_lnkSkin). */
#top {
	position: relative;
}
#top a[id$="lnkSkin"] {
	position: absolute;
	left: 50%;
	top: 4px;
	transform: translateX(-50%);
	height: 18px;
	line-height: 18px;
	padding: 0 10px;
	border-radius: 9px;
	background: #fff;
	color: #0077a8;
	font-weight: bold;
	white-space: nowrap;
	text-decoration: none;
	text-shadow: none;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
#top a[id$="lnkSkin"]:hover {
	background: #ffe45c;
	color: #333;
	text-decoration: none;
}

	/* tekstkoppen */

.page-heading {
	height: auto;
	margin: 16px 0 10px;
	padding: 0 0 7px 0;
	font: bold var(--fs)/1.4 var(--font);
	letter-spacing: 0.04em;
	text-transform:uppercase;
	color: var(--blue-text);
	border-bottom: 2px solid #cfe5f3;
}

/* The legacy chevron badge, drawn instead of loaded (was bg-h1). */
.page-heading::before,
.menu-section::before,
.submenu-section::before {
	content: "\00BB";
	display: inline-block;
	width: 18px;
	height: 18px;
	margin-right: 8px;
	border-radius: 4px;
	text-align: center;
	font: bold 13px/17px var(--font);
	letter-spacing: 0;
	vertical-align: 1px;
}
.page-heading::before {
	background: linear-gradient(to bottom, #8fc4e6 0%, var(--sky-dark) 100%);
	color: #fff;
}

.page-section {
	font: bold var(--fs)/1.4 var(--font);
	height: auto;
	margin: 14px 0px 6px;
	padding: 0px 0px 4px 12px;
	color: #2f3a44;
	border-bottom: 1px dotted var(--line-dotted);
}

/* Announcements (current and archive): each title becomes a small bar so
   one announcement visibly ends where the next begins; the date after it
   steps back. Scoped to the announcements list by its rendered id. */
[id$="dlNews"] .page-section {
	background: #eef5fb;
	border-bottom: 0;
	border-left: 3px solid var(--blue);
	border-radius: 0 4px 4px 0;
	padding: 6px 10px;
	margin: 26px 0 10px;
}
[id$="dlNews"] > .page-section:first-child {
	margin-top: 4px;
}
[id$="dlNews"] .page-section [id$="lblDate_Posted"] {
	font-weight: normal;
	color: var(--muted);
	font-size: var(--fs);
}

	/*  menu */

/* The logo and shortcut icons carry this exact gradient baked in, so the
   card must keep the legacy grey-to-white ramp for them to blend. */
#menu {
	background:
		url('../images/logo.webp') no-repeat 14px 0px,
		linear-gradient(to bottom, #e5e5e5 0px, #ffffff 93px);
	height:93px;
	text-align:right;
	border-radius: var(--radius);
	box-shadow: 0 2px 8px rgba(20, 60, 100, 0.25);
}
#menu img {
	border:0px;
	margin-right:40px;
	width:59px;
	height:80px;
	float:right;
}

	/* linkerkant */

#left {
	border-right: 1px solid var(--line);
	float: left;
	width: 220px;
}

#left a {
	text-decoration:none;
	color: var(--text);
}

#left a:hover {
	text-decoration:none;
	color: var(--blue-text);
}

.menu-section {
	background: linear-gradient(to bottom, #8ec3e6 0%, #6aa7d4 100%);
	height: 34px;
	padding: 0px 0px 0px 12px;
	margin:0px;
	font: bold var(--fs-sm)/34px var(--font);
	letter-spacing: 0.06em;
	color:#fff;
	text-transform:uppercase;
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}
.menu-section::before,
.submenu-section::before {
	background: rgba(255, 255, 255, 0.22);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
	color: #fff;
	text-shadow: none;
}

.menu-subsection {
	background: #eef3f8;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	height: auto;
	padding:0px 0px 0px 22px;
	margin:0px;
	color: var(--blue-text);
	font: bold var(--fs)/26px var(--font);
}

.submenu-section {
	background: linear-gradient(to bottom, #bddf35 0%, var(--lime-dark) 100%);
	height: 34px;
	padding:0px 0px 0px 12px;
	margin:0px;
	font: bold var(--fs-sm)/34px var(--font);
	letter-spacing: 0.06em;
	color:#fff;
	text-transform:uppercase;
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

#left ul {
	margin:0px 0px 0px 12px;
	padding:0px;
	list-style:none;
}
/* Rows are flex so a trailing "new" badge stays on the link's line while
   the link itself still fills the row for a full-width hover target. */
#left li {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
	line-height: 1.4;
	border-bottom: 1px dotted var(--line-dotted);
	}
	#left li a {
	flex: 1 1 auto;
	padding: 6px 8px 6px 20px;
	text-decoration:none;
	color: var(--text);
	}
	#left li a:hover {
	text-decoration:none;
	background: var(--row-hover);
	color: var(--blue-text);
}
#left li a[aria-current="page"] {
	background: var(--row-hover);
	color: var(--blue-text);
	font-weight: bold;
	box-shadow: inset 3px 0 0 var(--blue);
}
#left img
{
	float:none;
}

	/* footer */

#footer {
	width: auto;
	height:auto;
	padding: 8px 25px;
	line-height: 1.5;
	font-size: var(--fs);
	color:#fff;
	text-shadow: 0 1px 1px rgba(0, 50, 90, 0.35);
	}#footer a {
	text-decoration:none;
	color:#fff;
}

#footer ul {
	margin:0px 45px 0px 0px;
	padding:0px;
	float:right;
	list-style:none;
}

#footer li {
	float:left;
	padding:0px 10px 0px 35px;
}

	/* fonts stylen */

.font_black {
	color:#000;
}
.font_green {
	color: var(--lime-text);
}
.font_red {
	color: var(--red-text);
}
.font_blue {
    color: var(--blue-text);
}
.font_bold {
	font-weight: bold;
}
.font_gm {
	color: #0000FF;
}
.font_sa {
	color: #800080;
}

/* Promotion and relegation colours arrive as inline ForeColor styles from
   the code-behind, so only an attribute match can darken them. */
a[style*="B3D71D" i] {
	color: var(--lime-text) !important;
}
a[style*="D71D1D" i] {
	color: var(--red-text) !important;
}

	/* horizontale stippellijn */

.linediv {
	margin:5px 0px 0px 12px;
	line-height:1.8;
	}
	.linediv a {
	padding-left:20px;
}

	/* statistiek */

#stats {
	width:888px;
	line-height: 1.6;
	padding:6px 6px 0px;
	position:relative;
	z-index:200;
	font-size: var(--fs-header);
	text-shadow: 0 1px 1px rgba(0, 50, 90, 0.35);
}

.stats2 {
	position:absolute;
	text-align:right;
	right:6px;
	top:6px;
}

/* The breadcrumb shares its line with the statistics and has no room for
   a second one above the menu cards, so it stays on one line clear of the
   statistics. A long race or team name shortens with an ellipsis (the
   full text stays in the link's tooltip); only a breadcrumb still too
   long after that shortens its other crumbs. */
[id$="dlBreadcrumbs"] {
	display: inline-flex;
	max-width: 530px;
	white-space: nowrap;
	vertical-align: bottom;
}
[id$="dlBreadcrumbs"] > span {
	display: flex;
	min-width: 0;
	max-width: 160px;
}
[id$="dlBreadcrumbs"] a {
	overflow: hidden;
	text-overflow: ellipsis;
}
[id$="dlBreadcrumbs"] > span:nth-child(even) {
	flex-shrink: 0;
	padding: 0 0.3em;
}
[id$="dlBreadcrumbs"] > span:first-child {
	max-width: none;
}
[id$="dlBreadcrumbs"] > span:last-child {
	flex-shrink: 0;
	max-width: 200px;
}

.stats1 {
	float:right;
	text-align:right;
}

	/* mascotte */

/* The turtle and its forum teaser are hidden for the beta; the forum
   stays reachable from the Help menu. The turtle's outer div is a server
   control whose id ASP.NET prefixes, so the plain inner #mascotte2 is the
   one to target. */
#mascotte2, #go_forum, #right217 #go_forum {
	display: none;
}

#mascotte2 {
	position:absolute;
	z-index:100;
	text-align:right;
	right:30px;
	top:130px;
}

	/* invulvelden */

#login {
	margin-left:12px;
	line-height:26px;
	padding-left:20px;
}

.inp1 {
	float:left;
	margin-bottom:5px;
}
.inp2 {
	float:left;
}
.inp3 {
	float:left;
}

	/* naar het forum */

#go_forum {
	width:172px;
	margin-top: 15px;
	padding: 75px 0px 12px 20px;
	border-left: 1px dotted var(--line-dotted);
	position:relative;
	color: var(--muted);
	font-size: var(--fs-sm);
	line-height: 1.5;
	}
	#go_forum a {
	text-decoration:none;
	color: var(--lime-text);
}

	/* middenstuk */

#middle {
	float:left;
	width:430px;
	margin-top:-8px;
	padding:0px 0px 0px 15px;
	line-height:1.5;
	}
	#middle a {
	text-decoration:none;
	color: var(--blue-text);
}
	#middle a:hover {
	text-decoration: underline;
}

#middle ul.list {
	margin:0px 0px 0px 12px;
	padding:0px;
	list-style:none;
}
#middle .list li {
	line-height: 1.5;
	padding: 5px 0;
	border-bottom: 1px dotted var(--line-dotted);
	}
	#middle li a {
	text-decoration:none;
	color: var(--text);
	}
	#middle li a:hover {
	text-decoration:none;
	color: var(--blue-text);
}

span.een1 {
	float:left;
	width:90px;
	padding-left:16px;
}
span.twee2 {
	float:left;
	width:90px;
}

	/* Tabellen */

table {
	border-style: hidden;
	border-color: #fff;

}
td.open {
	width:18px;
}
.t26 {
	width:26px;
}
.t30 {
	width:30px;
}
.t60 {
	width:60px;
}
.t65 {
	width:65px;
}
.t70 {
	width:70px;
}
.t120 {
	width:120px;
}
.t125 {
	width:125px;
}
.t200 {
	width:200px;
}
.t356 {
	width:356px;
}

tr.top {
	font-weight:bold;
	line-height: 1.3;
	vertical-align: bottom;
}

td {
	padding:0px;
	margin:0px;
	line-height: 1.45;
	border: solid 1px #fff;
}

	/* rechterkant */

/* Text keeps an 8px gutter from the card edge while bars and link lists
   bleed into it, so they stay flush like the left menu. Divs in this
   column trade overflow:hidden for flow-root: same float containment,
   but the bleed is not clipped. */
/* The left border mirrors the left menu's: as tall as the column. */
#right217 {
	float:left;
	width:210px;
	padding-right: 8px;
	margin-left:15px;
	border-left: 1px solid var(--line);
}
#right217 div {
	overflow: visible;
	display: flow-root;
}
#right217 .submenu-section, #right217 .menu-subsection, #right217 .ulleft {
	margin-right: -8px;
}
#right217 .ulleft .submenu-section, #right217 .ulleft .menu-subsection {
	margin-right: 0;
}

#right217 ul {
	margin:0px;
	padding:0px;
	list-style:none;
}
#right217 .ulleft ul, #right217 .ulleft table {
	margin-left: 12px;
}
#right217 .ulleft table {
	width: calc(100% - 12px);
}

#right217 li {
	display: flex;
	align-items: center;
	padding: 0;
	line-height: 1.4;
	}
	#right217 li a {
	flex: 1 1 auto;
	padding: 6px 8px 6px 18px;
	text-decoration:none;
	color: var(--text);
	}
	#right217 li a:hover {
	text-decoration:none;
	background: var(--row-hover);
	color: var(--blue-text);
}
#right217 a
{
	text-decoration: none;
	color: var(--lime-text);
}

#right217b {
	float:left;
	width:203px;
	margin:-8px 0px 0px 15px;
	line-height:1.5;
}

.ulleft ul {
	margin:0px 0px 0px 12px;
	padding:0px;
	list-style:none;
}

.ulleft li {
	margin: 0;
	padding: 0;
	list-style: none;
	border-bottom: 1px dotted var(--line-dotted);
	}

.photo {
	float:right;
	width:105px;
	padding:25px 0px 5px 15px;
}

.photo img {
	width:100px;
	height:100px;
	border-radius: 6px;
}
.view_skill {
	float:left;
	background:url('../images/bg-skills.webp') no-repeat 0px 5px;
	width:99px;
	height:16px;
	text-align:right;
	padding:6px 1px 6px 1px;
	overflow:hidden;
}
.view_skill2
{
    float:left;
	background:url('../images/bg-skills.webp') no-repeat 0px 5px;
	width:99px;
	height:10px;
	text-align:right;
	padding:6px 1px 6px 1px;
	margin-left: 20px;
	overflow:hidden;
}
.view_skill_text
{
	float:left;
	width:99px;
	padding:5px 0 0 0;
	overflow:hidden;
}
.view_skill img {
	height:15px;
	float:right;
}
.view_skill2 img {
	height:15px;
	float:right;
}
.skill {
	float:left;
	width:75px;
	padding:5px 0px 5px;
}

.skill2 {
	float:left;
	width:175px;
	padding:5px 0px 5px;
}

.skill3
{
	padding:0px 0px 0px 25px;
}

img.country
{
	float: none;
	vertical-align: -1px;
}

img.victory
{
	float: none;
}

img.center
{
	float: none;
	text-align: center;
}
img.clear {
    float:none;
}


/* index pagina */

#right650 {
	float:left;
	width:650px;
	padding:0px 0px 0px 15px;
	line-height:1.5;
	margin-top:-8px;
	}
	#right650 a {
	text-decoration:none;
	color: var(--blue-text);
}


/*------------------------------------------------------------------------------
 new heading structure specifics
------------------------------------------------------------------------------*/
.new h1 {
	font-size: 1.8rem;
	color: #2f3a44;
	margin: 1rem 0 0.4rem;
	padding: 0 0 0.35rem;
	border-bottom: 4px solid var(--yellow);
}

/* Section titles carry the same chevron badge as every v2 heading. */
.new h2 {
	color: var(--blue-text);
	font-size: 1.3rem;
	margin-top: 1.8rem;
}
.new h2::before {
	content: "\00BB";
	display: inline-block;
	width: 20px;
	height: 20px;
	margin-right: 8px;
	border-radius: 4px;
	background: linear-gradient(to bottom, #8fc4e6 0%, var(--sky-dark) 100%);
	color: #fff;
	text-align: center;
	font: bold 14px/19px var(--font);
	vertical-align: 2px;
}

.new h3 {
	color: #2f3a44;
	border-bottom: 1px solid var(--line);
	padding-bottom: 3px;
}

/* Justified, indented text leaves uneven gaps at this size. */
.about p {
	text-align: left;
}

/* Registration: each group of fields in a card, a call to action as large
   as the home page's, and a result message that cannot be missed. */
.registration [id$="pnlForm"] > div {
	display: flow-root;
	background: #f7fafc;
	border: 1px solid var(--line);
	border-radius: 6px;
	padding: 4px 14px 12px;
	margin-bottom: 0.6rem;
}

/* An input, so it opts out of the legacy 131x19 input footprint. */
.registration-submit {
	float: none;
	width: auto;
	height: auto;
	text-indent: 0;
	padding: 0.6rem 2rem;
	margin-bottom: 2rem;
	font-size: 1.1rem;
	font-weight: bold;
	color: #4a3b00;
	background: linear-gradient(to bottom, #f9cf04 48%, #d6b201 100%);
	border: 1px solid #c4a300;
	border-radius: 6px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 1px 2px rgba(0, 0, 0, 0.15);
	cursor: pointer;
}

[id$="lblProcessing"] {
	display: block;
	margin: 1rem 0;
	padding: 12px 16px;
	font-size: 1rem;
	color: #2f3a44;
	background: #eef5fb;
	border-left: 4px solid var(--blue);
	border-radius: 0 6px 6px 0;
}

.registration p.annotation {
	float: left;
	padding-left: 0.2rem;
	padding-top: 0.2rem;
	width: 100%;
}

.registration ul {
	padding-left: 1.5ch;
}

.vote-races label {
	float: initial;
	line-height: initial;
	width: initial;
}

.vote-races input {
	float: initial;
	height: initial;
	width: initial;
	padding: initial;
}

.vote-races p {
	font-family: var(--font);
	font-size: 0.8rem;
	padding-left: 1rem;
	padding-right: 1rem;
	text-align: center;
}

/* The vote button keeps its larger size as the page's main action, and
   the blue of every other button. */
.vote-races .submit {
	height: auto;
	font-size: 1.5ch;
	margin-bottom: 1rem;
	padding: 0.6rem;
}

.vote-links {
	font-size: 0.8rem;
	text-align: center;
}

#mascotte1 {
	position:absolute;
	left:475px;
	top:140px;
}

	/* Faces */

/* Portrait frame drawn in CSS (was portrait-foto): the face layers are
   positioned later in the markup, so they paint on top of this box. */
.portrait
{
	float:right;
	width:105px;
	height: 100px;
	padding:25px 0px 5px 15px;
	background:#fff;
	position: relative;
}
.portrait2
{
    float:left;
	width:105px;
	height: 100px;
	padding:25px 0px 15px 0px;
	background:#fff;
	position: relative;
}
.portrait::before,
.portrait2::before
{
	content: "";
	position: absolute;
	right: 0;
	top: 20px;
	width: 92px;
	height: 108px;
	border: 1px solid var(--line);
	border-radius: 6px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.teamdetails_portrait_img
{
	position: relative;
	left: 16px;
	display: inline;
}

/* Header shortcut icons: shared box, only the horizontal slot differs. */
.menu_img1, .menu_img2, .menu_img3, .menu_img4, .menu_img5, .menu_img6
{
    position: absolute;
    z-index: 0;
}

/* The icon images paint a fixed 55px label box that longer labels (such as
   a player's "User options" shortcut) outgrow. Draw the box in CSS right on
   top of the painted one instead, as wide as its text and centred on the
   59px icon. */
.menu_text1, .menu_text2, .menu_text3, .menu_text4, .menu_text5, .menu_text6
{
    position: absolute;
    top: 63px;
    box-sizing: border-box;
    min-width: 55px;
    height: 20px;
    line-height: 18px;
    padding: 0 6px;
    white-space: nowrap;
    transform: translateX(calc(29.5px - 50%));
    background: #fff;
    border: 1px solid #d9dee3;
    border-radius: 3px;
    z-index: 1;
    color: #555;
    font-size: var(--fs-sm);
    text-align: center;
    overflow:hidden;
}
.menu_text1:hover, .menu_text2:hover, .menu_text3:hover,
.menu_text4:hover, .menu_text5:hover, .menu_text6:hover
{
    color: var(--blue-text);
}

.menu_img1, .menu_text1 { left: 300px; }
.menu_img2, .menu_text2 { left: 400px; }
.menu_img3, .menu_text3 { left: 500px; }
.menu_img4, .menu_text4 { left: 600px; }
.menu_img5, .menu_text5 { left: 700px; }
.menu_img6, .menu_text6 { left: 800px; }

/* Face layers stack in document order. */
.portrait_img1, .portrait_img2, .portrait_img3, .portrait_img4, .portrait_img5,
.portrait_img6, .portrait_img7, .portrait_img8, .portrait_img9, .portrait_img10,
.portrait_img11, .portrait_img12, .portrait_img13
{
	position: absolute;
	left: 0;
	top: 0;
}
.portrait_img1 { z-index: 0; }
.portrait_img2 { z-index: 1; }
.portrait_img3 { z-index: 2; }
.portrait_img4 { z-index: 3; }
.portrait_img5 { z-index: 4; }
.portrait_img6 { z-index: 5; }
.portrait_img7 { z-index: 6; }
.portrait_img8 { z-index: 7; }
.portrait_img9 { z-index: 8; }
.portrait_img10 { z-index: 9; }
.portrait_img11 { z-index: 10; }
.portrait_img12 { z-index: 11; }
.portrait_img13 { z-index: 12; }

	/* Controls */
/* Radiobuttonlist */
.radiobuttonlist
{
	background:none;
	border:0px;
	float: left;
	border-style: hidden;
}
.radiobuttonlist input
{
	width: 20px;
	display: block;
	float: left;
	margin: 3px 0 0;
}
.radiobuttonlist label
{
    width: 183px;
    display: block;
    float: left;
    line-height: 1.6;
    font-weight: normal;
}

.radiobuttonlist2
{
	background:none;
	border:0px;
	float: left;
}
.radiobuttonlist2 input
{
	width: 20px;
	display: block;
	float: left;
	margin: 3px 0 0;
}
.radiobuttonlist2 label
{
	width: 390px;
    display: block;
    float: left;
    line-height: 1.6;
    font-weight: normal;
}

.radiobuttonlist_horizontal
{
	background:none;
	border:0px;
	float: left;
}
.radiobuttonlist_horizontal input
{
	width: auto;
	display: block;
	float: left;
    margin-right: 10px;

}
.radiobuttonlist_horizontal label
{
    width: auto;
    display: block;
    float: left;
    line-height: 1.6;
    font-weight: normal;
    margin-right: 3px;
}
/* Checkbox */
.checkbox input
{
	width: auto;
	display: block;
	float: left;
	margin-left: 10px;
	margin-top: 5px;
	background:none;
	border:0px;
}
.checkbox label
{
	width: auto;
    display: block;
    float: left;
    line-height: 2;
    font-weight: normal;
}

.checkbox_title input
{
	width: auto;
	display: block;
	float: left;
	margin-left: 10px;
	margin-top: 0px;
}
.checkbox_title label
{
	width: auto;
    display: block;
    float: left;
    font-weight: normal;
}
/* Tab */
.tab
{
   font-size: var(--fs);
   float:left;
}
/* The result tabs bring their own theme, which sets Verdana at 10pt on
   the tab body; the pages inside use the site font like any other. */
.ajax__tab_xp.ajax__tab_container .ajax__tab_body
{
   font: var(--fs) var(--font);
}
/* The race ranking takes the width of the tour standings column, where
   long team names wrap, so the weather and sprints still fit beside it. */
.tab:has(> table[id$="dgResults"])
{
   max-width: 430px;
}
/* The time cell ends in a spacer that otherwise wraps to a second line
   and lifts the time above the rest of the row. */
.tab table[id$="dgResults"] td.t70
{
   white-space: nowrap;
}
/* The weather and sprints column beside the ranking: a gap from the
   ranking, and the full rest of the width for the sprint tables. */
.tab:has(> table[id$="dgResults"]) + .tab
{
   width: 170px;
   margin-left: 16px;
}
/* Sprint and mountain results read like the tour standings grids: a
   header line under the title, zebra rows and plain cyclist links. */
table[id$="dlResult_Sprints"]
{
   width: 100%;
}
table[id$="dlResult_Sprints"] > tbody > tr > td
{
   padding: 0;
}
table[id$="dlResult_Sprints"] h2.page-section
{
   margin: 14px 0 0;
   padding: 0 2px 4px;
   border-bottom: 2px solid #9cc8e6;
}
table[id$="dlResult_Sprints"] table
{
   width: 100%;
   margin-bottom: 8px;
   font-variant-numeric: tabular-nums;
}
table[id$="dlResult_Sprints"] table td
{
   border: 0;
   padding: 4px 2px;
}
table[id$="dlResult_Sprints"] table td:first-child
{
   width: 26px;
}
table[id$="dlResult_Sprints"] table td:last-child
{
   text-align: right;
}
table[id$="dlResult_Sprints"] table tr:nth-child(even) td
{
   background: var(--row-alt);
}
table[id$="dlResult_Sprints"] table tr:hover td
{
   background: var(--row-hover);
}
#right650 table[id$="dlResult_Sprints"] table a
{
   text-decoration: none;
   color: var(--text);
}
#right650 table[id$="dlResult_Sprints"] table a:hover
{
   text-decoration: underline;
   color: var(--blue-text);
}

/* Grid */
table.grid
{
	border-style: hidden;
	font-size: var(--fs);
	font-variant-numeric: tabular-nums;
	margin-bottom: 8px;
}
/* Horizontal padding stays at 2px: the 15-column cyclists summary only
   fits the 430px column in Verdana 13px at this width. */
table.grid td
{
	border: 0;
	padding: 4px 2px;
}
table.grid tr.top td
{
	border-bottom: 2px solid #9cc8e6;
	color: #2d3a45;
	white-space: nowrap;
}
table.grid tr:nth-child(even):not(.top) td
{
	background: var(--row-alt);
}
table.grid tr:not(.top):hover td
{
	background: var(--row-hover);
}
/* As specific as the zebra and hover rules above, so an own row on an
   even line still turns yellow. */
table.grid tr.font_bold:not(.top) td
{
	background: var(--row-own);
}
/* Cyclist names stay on one line where they have room (tables such as
   the 15-column summary). The cyclist lists fix each link at 100px next
   to the card edge, where a long name can only wrap or be cut off: those
   wrap, with a tighter line so a two-line name still reads as one entry. */
a[href^="cyclistdetails.aspx"]
{
	white-space: nowrap;
}
a[href^="cyclistdetails.aspx"][style*="width"]
{
	white-space: normal;
	line-height: 1.25;
}

#middle .grid a, #right650 .grid a, #right217b .grid a
{
	text-decoration: none;
	color: var(--text);
}
#middle .grid a:hover, #right650 .grid a:hover, #right217b .grid a:hover
{
	text-decoration: underline;
	color: var(--blue-text);
}
#middle .grid tr.top a, #right650 .grid tr.top a, #right217b .grid tr.top a
{
	color: inherit;
}

.panel
{
    background-color: White;
    border: solid 1px var(--field-border);
    border-radius: 6px;
}

.button_create
{
	background: url(../images/application-add.webp) no-repeat left center;
    display:block;
    height: 20px;
    width: 150px;
    padding-left:18px;
    margin-left: 10px;
    padding-right:10px;
    font-size: var(--fs);
}

.button_reply
{
	background: url(../images/application-add.webp) no-repeat left center;
    display:block;
    height: 20px;
    padding-left:18px;
    margin-left: 10px;
    padding-right:10px;
    font-size: var(--fs);
}

.button_edit
{
	background: url(../images/application-edit.webp) no-repeat left center;
    display:block;
    height: 20px;
    padding-left:18px;
    margin-left: 10px;
    padding-right:10px;
    font-size: var(--fs);
}

/*For tooltip box*/
#mcTooltip {padding:5px 20px 5px 20px;color:#666;line-height:16px;font:12px var(--font);}

/*Special effects*/
#mcTooltip
{
    border-radius:6px;
}

/*Close button. Only available when sticky or overlay has been set to true.*/
#mcttCloseButton
{
    width:45px;height:13px;position:absolute;background-image:url(../images/close-button.webp);cursor:pointer; overflow:hidden;
}

/* Only applicable when overlay has been set to true.*/
#mcOverlay
{
    background-color: black;
    opacity:0.7;
    display:none;top:0;left:0;width:100%;height: 100%;overflow:visible;z-index:1001;
}

/*Following settings should remain unchanged*/
#mcTooltipWrapper {position:absolute;visibility:hidden;overflow:visible;z-index:8888;}
#mcTooltip {float:left;position:relative; border-style:solid;}
#mcttCo {position:absolute;text-align:left;}
#mcttCo em, #mcttCo b {display:block; width:0; height:0;overflow:hidden;}