header {
	display: block;
	position: relative;
	font-size: 4vw;
	height: 18vw;
	border-bottom: solid 1px var(--border-color);
}

header > * {
	display: inline-block;
	vertical-align: top;
	color: #fff;
}

header #logo {
	position: relative;
	width: 20vw;
	height: 7vw;
	padding: 0.5vw;
	margin: 0.5vw;
	background-color: #AAA;
	border-radius: 0.8vw;
}

header #logo img {
	height: 7vw;
	vertical-align: top;
}
header #logo .title {
	display: inline-block;
	padding: 0.1vw 0 0 1vw;
	color: var(--black);
	font-size: 4vw;
	font-weight: 800;
	line-height: 3.6vw;
}

header #connect-dot {
	display: inline-block;
	position: absolute;
	top: 0.5vw;
	left: 18.6vw;
	width: 1.7vw;
	height: 1.7vw;
	background-color: #D00;
	background-image: url('../media/led_overlay.webp');
	background-size: cover;
	border-radius: 1vw;
}
header #connect-dot.connected {
	background-color: #0D0;
}

#action-pane {
	position: absolute;
	left: 0;
	top: 9vw;
	width: 96vw;
	height: 7.4vw;
	color: var(--white);
	font-size: 3.4vw;
	padding: 0.4vw 1.6vw;
	border: 0.4vw solid var(--black);
}
#action-pane.open {
	border: 0.4vw solid var(--bright-yellow);
}

#votes {
	position: absolute;
	display: flex;
	flex-flow: row wrap;
	right: 50vw;
	top: 0;
	width: 28vw;
	height: 9vw;
	font-weight: 700;
	border-left: solid 1px var(--border-color);
}
#yea, #nay, #present, #pending {
	flex: 1 1 2vw;
	padding: 0 0.5vw;
	height: 5vw;
	font-size: 4vw;
	line-height: 5vw;
	text-align: center;
	color: #000;
}
#yea { background-color: var(--yea); }
#nay { background-color: var(--nay); }
#present { background-color: var(--present); }
#pending {
	background-color: var(--dark1-grey);
	color: #bbb;
}
#vote-graph {
	position: relative;
	width: 28vw;
	height: calc(4vw - 1px);
	margin-top: 1px;
	font-size: 3vw;
	font-weight: 600;
	line-height: 4vw;
	color: #000;
}
#vote-graph #yea_bar {
	display: inline-block;
	height: 3.7vw;
	padding-top: 0.3vw;
	background-color: var(--yea);
	text-align: left;
	width: 57.6%;
}

#vote-graph #nay_bar {
	display: inline-block;
	height: 3.7vw;
	padding-top: 0.3vw;
	background-color: var(--nay);
	text-align: right;
	width: 42.4%;
}
#graph_line {
	position: absolute;
	top: 0;
	left: 50%;
	width: 2px;
	height: 100%;
	background-color: #FFF;
}

#cred {
	position: absolute;
	display: flex;
	right: 29vw;
	top: 0;
	width: 21vw;
	height: 9vw;
	color: #aaa;
}
#cred-block {
	width: 12vw;
	border-left: solid 1px var(--border-color);
}
#cred-block .title {
	font-size: 1.4vw;
	font-weight: 700;
	line-height: 2.5vw;
	text-align: center;
	border-bottom: solid 1px var(--border-color);
}
#cred-block .cred-total {
	font-size: 5.5vw;
	text-align: center;
}
#cred-split {
	width: 8vw;
	font-size: 3.6vw;
	line-height: 4.4vw;
	text-align: center;
	border-left: solid 1px var(--border-color);
}
#cred-split .inperson {
	height: 4.5vw;
}
#cred-split .remote {
	height: 4.5vw;
	background-color: var(--dark-blue);
}

#timers {
	position: absolute;
	right: 18vw;
	top: 0;
	width: 12vw;
	height: 9vw;
	border-left: solid 1px var(--border-color);
}
#timers div {
	font-size: 3.6vw;
	line-height: 4.4vw;
	text-align: center;
	height: 4.5vw;
}

.timer {
	color: var(--light-grey);
}
.timer.active {
	color: var(--bright-yellow);
}
#timers .timer.done {
	color: var(--bright-yellow);
	background-color: var(--dark-red);
}

#timer1 {
	background-color: var(--dark-blue);
}
#timer2 {
	background-color: var(--dark1-grey);
}

#clock {
	position: absolute;
	right: 0;
	top: 0;
	width: 18vw;
	height: 9vw;
	border-left: solid 1px var(--border-color);
}
#clock .title {
	font-size: 1.4vw;
	font-weight: 700;
	line-height: 2.5vw;
	text-align: center;
	border-bottom: solid 1px var(--border-color);
}
#clock .time {
	font-size: 5.5vw;
	text-align: center;
}

@media (min-width: 1024px) {
	header {
		font-size: 2vw;
		height: 4.5vw;
	}
	
	header #logo {
		width: 10vw;
		height: 3.5vw;
		padding: 0.25vw;
		margin: 0.25vw;
		border-radius: 0.4vw;
	}
	
	header #logo img {
		height: 3.5vw;
	}
	header #logo .title {
		padding: 0.05vw 0 0 0.5vw;
		font-size: 2vw;
		line-height: 1.8vw;
	}
	
	header #connect-dot {
		top: 0.25vw;
		left: 9.3vw;
		width: 0.85vw;
		height: 0.85vw;
	}

	#action-pane {
		position: absolute;
		left: 11vw;
		top: 0;
		width: 48vw;
		height: 3.7vw;
		font-size: 1.7vw;
		padding: 0.2vw 0.8vw;
		border: 0.2vw solid var(--black);
	}
	#action-pane.open {
		border: 0.2vw solid var(--bright-yellow);
	}
	
	#votes {
		right: 25vw;
		width: 14vw;
		height: 4.5vw;
	}
	#yea, #nay, #present, #pending {
		flex: 1 1 1vw;
		padding: 0 0.25vw;
		height: 2.5vw;
		font-size: 2vw;
		line-height: 2.5vw;
	}
	#vote-graph {
		width: 14vw;
		height: calc(2vw - 1px);
		font-size: 1.5vw;
		line-height: 2vw;
	}
	#vote-graph #yea_bar, #vote-graph #nay_bar {
		height: 1.85vw;
		padding-top: 0.15vw;
	}
	
	#cred {
		right: 14.5vw;
		width: 10.5vw;
		height: 4.5vw;
	}
	#cred-block {
		width: 6vw;
	}
	#cred-block .title {
		font-size: 0.7vw;
		line-height: 1.25vw;
	}
	#cred-block .cred-total {
		font-size: 2.75vw;
	}
	#cred-split {
		width: 4vw;
		font-size: 1.8vw;
		line-height: 2.2vw;
	}
	#cred-split .inperson {
		height: 2.25vw;
	}
	#cred-split .remote {
		height: 2.25vw;
	}
	
	#timers {
		right: 9vw;
		width: 6vw;
		height: 4.5vw;
	}
	#timers div {
		font-size: 1.8vw;
		line-height: 2.2vw;
		height: 2.25vw;
	}
	
	#clock {
		width: 9vw;
		height: 4.5vw;
	}
	#clock .title {
		font-size: 0.7vw;
		line-height: 1.25vw;
	}
	#clock .time {
		font-size: 2.75vw;
	}
}

#board {
	display: grid;
	height: calc(100vh - 18vw - 1px);
	grid-auto-flow: column;
	background-color: black;
}
@media (min-width: 1024px) {
	#board {
		height: calc(100vh - 4.5vw - 1px);
	}
}

#board.col1 { font-size: 8.772vw; }
#board.col2 { font-size: 4.386vw; }
#board.col3 { font-size: 2.924vw; }
#board.col4 { font-size: 2.193vw; }
#board.col5 { font-size: 1.754vw; }
#board.col6 { font-size: 1.462vw; }
#board.col7 { font-size: 1.253vw; }
#board.col8 { font-size: 1.096vw; }
#board.col9 { font-size: 0.975vw; }
#board.col10 { font-size: 0.877vw; }
#board.col11 { font-size: 0.797vw; }
#board.col12 { font-size: 0.731vw; }
#board.col13 { font-size: 0.675vw; }
#board.col14 { font-size: 0.627vw; }
#board.col15 { font-size: 0.585vw; }
#board.col16 { font-size: 0.548vw; }
#board.col17 { font-size: 0.516vw; }
#board.col18 { font-size: 0.487vw; }
#board.col19 { font-size: 0.462vw; }
#board.col20 { font-size: 0.439vw; }

member-node {
	position: relative;
	min-width: 10em;
	background-color: var(--dark1-grey);
	border-radius: 0.5em;
	margin: 0.1em;
	padding: 0.24em 0.2em 0.16em 1em;
	/* height: 1.65em; */
	--node-tab: var(--transparent);
	--node-remote: var(--dark2-grey);
}

member-node .member-name {
	font-size: 1.4em;
}

member-node:before {
	position: absolute;
	display: block;
	left: 0;
	top: 0;
	width: 0.5em;
	height: 100%;
	background-color: var(--node-tab);
	border-radius: 0.5em 0 0 0.5em;
	content: " ";
}

member-node:after {
	position: absolute;
	display: block;
	right: 0;
	top: 0;
	width: 0.5em;
	height: 100%;
	background-color: var(--node-remote);
	border-radius: 0 0.5em 0.5em 0em;
	content: " ";
}

member-node.org-party { --node-tab: var(--party-red); }
member-node.org-fed { --node-tab: var(--dusty-blue); }
member-node.org-state { --node-tab: var(--dusty-red); }
member-node.org-aux { --node-tab: var(--med-grey); }
member-node.org-cbc { --node-tab: var(--brown); }

.cred-none {
	opacity: 0.4;
	--node-remote: var(--transparent);
}
.hide-uncred .cred-none {
	display: none;
}
.cred-inperson {
	--node-remote: var(--transparent);
}
.cred-remote {
	--node-remote: var(--dark-blue);
}

.yea {
	background-color: var(--yea);
	color: #000;
}
.nay {
	background-color: var(--nay);
	color: #000;
}
.present {
	background-color: var(--present);
	color: #000;
}