/* reset */
table, tr, th, td, dd, dt, li, summary { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }

/* base styles */
body {
	font-family: Tahoma, Verdana, Segoe, sans-serif;
	line-height: 1;
	font-size: 1em;
}
section {
	display: block;
}
p, ul, ol, dl, details {
	margin: 1rem 0;
	padding:0;
}
details > summary {
	cursor: pointer;
}

input[type=text], textarea, button {
	background-color: white;	
	border-radius: 0.2rem;
	padding:0.4rem;
	font-size: 1em;
}
input[type=text], textarea {
	border: 1px inset #eef;
	box-sizing: border-box;
	width: 100%;
}
button {
	border: 1px outset #eef;
	color: black;
	cursor: pointer;
}
button:active {
	border: 1px inset #eef;
	color: black;
}

.shrink {
	width: 0.1%;
}

/* specifics */
#vote, #setup {
	max-width: 30rem;
	margin: auto;
}
#setup h1, #vote h1 {
	font-size: 2.5rem;
	letter-spacing: -0.02em;
	margin: 2rem 0 1rem 0;
	color: #678;
}
#setup h2, #vote h2 {
	font-size: 1.5rem;
	margin: 3rem 0 1rem 0;
	color: #678;
}

#intro p {
	white-space: pre-wrap;
}

#voting_rules {
	display: inline-grid;
	grid-template-columns: auto auto;
	gap:1rem 0.4rem;
}
#voting_rules input[type=checkbox] {
	grid-column: 1;
	align-self: start;
}
#voting_rules label {
	grid-column: 2;
}

#users span {
	display: inline;
	white-space: nowrap;
}
#users span.active {
	font-weight: bold;
}

#suggestions > div {
	display:grid;
	grid-template-columns: 2fr auto;
	grid-auto-flow: row;
	align-items: stretch;
	gap:0.3rem 0.3rem;
}
#suggestions button {
	font-weight: lighter;
	padding: 0.4rem 0.6rem;
}

#votes dt {
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-end;
}
#votes dt button {
	justify-content:center;
	align-items:center;
	margin: 0 0.3rem 0.3rem 0;
	padding: 0.4rem;
	color: #678;
	background-color: white;
	white-space: nowrap;
}
#votes dt button.checked {
	color: white;
	background-color: #678;
	border: 1px solid #678;
}
#votes dt button:active, #votes dt button.checked:active {
	border: 1px inset #eef;
}

#votes dl {
	display: grid;
	grid-template-columns: auto 2fr;
	grid-auto-flow: row;
	align-items: stretch;
}
#votes dt {
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-end;
	align-self: center;
}
#votes dd {
	margin: 0;
	padding: 0 0.4rem;
	display: grid;
	align-items: center;
	background-color:#F6F7F8;
}
#votes dd:nth-child(4n) {
	background-color:#fff;
}

#results table {
	margin: 3rem 0 0 0;
	border-spacing: 0.3rem;
	width:100%;
}
#results table td {
	padding:0.4rem;
	vertical-align: top;
	background:#F6F7F8;
}
#results table th {
	padding:0;
	color:#678;
	vertical-align: bottom;
	text-align: left;
	font-weight: bold;
}


@media screen and (max-width: 30rem) {
	#setup h1, #vote h1 {
		font-size: 2rem;
		letter-spacing: -0.02em;
	}
	#setup h2, #vote h2 {
		font-size: 1.2rem;
	}
}
/*@media screen and (max-width: 30rem) and (min-width: 24rem) {
			.simplegraph { display:none; }
}
@media screen and (max-width: 24rem) {
	.simplegraph { display:none; }
	.graph { display:none; } 
}*/