style.css

@media (min-width: 600px) {
	@font-face {
		font-family: "Liberation Sans";
		font-weight: 100;
		font-style: normal;
		src: url('media/LiberationSans-Regular.ttf') format('truetype');
	}
}
body {
	margin: 80px auto;
	width: 800px;
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Liberation Sans", Helvetica, Arial, "Lucida Grande", sans-serif;
	font-weight: 300;
	background: url(media/congreso.jpg) black no-repeat fixed;
	background-size: cover;
}
h1, h2, h3, h4, h5, h6 {
	font-family: inherit;
	font-weight: 300;
}
a, a:visited {
	text-decoration: none;
	color: #06f;
}
a:hover {
	text-decoration: underline;
}
#heading {
	position: fixed;
	top: 0;
	left: 0;
	background: rgba(0, 0, 0, 0.7);
	color: white;
	width: 100%;
}
#heading h1 {
	display: inline;
	margin: 0 12px;
}
#heading .tagline {
	display: inline;
	margin: 0 8px;
	font-size: 11pt;
	letter-spacing: 0.2em;
}
#heading .corner {
	float: right;
	margin: 8px;
}
#info {
	height: 28px;
	width: 28px;
	background: #333;
	color: #999;
	font-weight: bold;
	display: block;
	text-align: center;
	font-size: 14pt;
	line-height: 30px;
	border-radius: 4px;
	margin: 0;
}
#info:hover {
	color: white;
	background-color: #06f;
	text-decoration: none;
}
.container {
	width: 800px;
	margin: 10px auto;
}

.center {
	text-align: center;
}
.nodisplay {
	display: none;
}
#intro ol {
	text-indent: 0;
	margin: 0;
	padding: 0;
	overflow: hidden;
}
#intro li {
	text-indent: 0;
	list-style-type: none;
	width: 200px;
	margin: 20px;
	padding-top: 120px;
	text-align: center;
	float: left;
}
#intro li:nth-child(3n+1) {
	background: url(media/1.png) top center no-repeat;
}
#intro li:nth-child(3n+2) {
	background: url(media/2.png) top center no-repeat;
}
#intro li:nth-child(3n) {
	background: url(media/3.png) top center no-repeat;
}
#voting, #about, #intro, #results, #stats, #options {
	background-color: rgba(255, 255, 255, 0.8);
	padding: 40px;
	display: none;
}
#options {
	padding: 80px 40px;
}
#options a.action {
	padding: 24px 48px;
	margin: 8px;
}
#intro {
	display: block;
}
#about {
	background-color: rgba(200, 220, 255, 0.8);
}
#voting {
	padding: 40px 80px;
}
#voting ul {
	list-style: none;
	display: block;
	width: 256px;
	padding: 0;
	margin: 0 auto;
	text-align: center;
}
#voting ul li {
	display: inline-block;
	margin: 0;
	padding: 0;
}
#voting p {
	text-align: center;
}
#project {
	font-size: 20pt;
}
#summary {
	font-size: 10pt;
}
.shady {
	font-size: 10pt;
	color: gray;
}
#vote-aye, #vote-nay, #vote-abstention, #vote-absentee, #vote-skip, a.action {
	color: black;
	cursor: pointer;
	display: inline-block;
	text-decoration: none;
	margin: 2px 0;
	text-align: center;
	text-indent: 0;
	border-radius: 6px;
	background-color: rgba(255, 255, 255, 0.8);
}
#vote-aye {
	font-size: 32px;
	width: 120px;
	padding: 16px 0;
	color: rgb(91, 183, 91);
}
#vote-aye:hover {
	color: white;
	background-color: rgb(91, 183, 91);
}
#vote-nay {
	font-size: 32px;
	width: 120px;
	padding: 16px 0;
	color: rgb(189, 54, 47);
}
#vote-nay:hover {
	color: white;
	background-color: rgb(189, 54, 47);
}
#vote-abstention {
	width: 244px;
	padding: 10px 0;
	font-size: 10pt;
	color: #f90;
}
#vote-abstention:hover {
	color: white;
	background-color: #f90;
}
#vote-absentee {
	width: 244px;
	padding: 10px 0;
	font-size: 10pt;
	color: #999;
}
#vote-absentee:hover {
	color: white;
	background-color: #999;
}
#vote-skip {
	width: 244px;
	padding: 10px 0;
	font-size: 10pt;
	color: #06f;
}
#vote-skip:hover {
	color: white;
	background-color: #06f;
}
#start {
	font-size: 24px;
}
em {
	color: #06f;
	font-style: normal;
}
.news {
	margin: 48px 192px;
}
a.action {
	padding: 12px 16px;
	margin: 0 auto;
	color: #06f;
}
a.action:hover {
	color: white;
	background-color: #06f;
}
#progress-bar {
	width: 100%;
	background-color: white;
	border-radius: 8px; /* (height of inner div) / 2 + padding */
	padding: 3px;
}
#progress-bar span {
	display: block;
	background-color: #06f;
	width: 0%; /* Adjust with JavaScript */
	height: 10px;
	border-radius: 5px;
}
#results table .shady {
	font-size: 8pt;
}
#results table {
	font-size: 10pt;
	width: 100%;
}
#results table td {
	padding: 4px;
}
#results table thead td {
	color: white;
	background-color: #06f;
	padding: 12px 8px;
}
#results table thead td:hover {
	background-color: #39f;
	cursor: pointer;
}
#results table tbody tr:nth-child(even) {
	background-color: rgba(0, 122, 255, 0.1);
}
.legend {
	font-size: 8pt;
}
.tooltip {
	position: absolute;
	top: 0;
	left: 0;
	width: 320px;
	margin: 0;
	padding: 0 8px;
	font: 8pt sans-serif;
	background: rgba(255, 255, 255, 0.9);
	border: 0;
	pointer-events: none;
	cursor: pointer;
}
.tooltip ul {
	padding-left: 16px;
}
.tooltip p {
	font: 8pt sans-serif;
}
.chart-tooltip {
	position: absolute;
	top: 0;
	left: 0;
	width: 180px;
	height: 25px;
	padding: 4px;
	font: 8pt sans-serif;
	background: rgba(255, 255, 255, 0.7);
	border: 0;
	pointer-events: none;
	cursor: pointer;
}
select {
	padding: 4px;
	margin: 0;
	border: 1px solid #ccc;
	font: inherit;
	font-size: 10pt;
	outline: none; /* remove focus ring from Webkit */
}


@media (max-width: 850px) {
	body {
		margin: 0 auto;
		width: 95%;
		background: url(media/congreso-800.jpg) black no-repeat top left;
		min-height: 100%;
	}
	#heading {
		position: relative;
		padding: 4px;
		margin: 0;
	}
	#heading .tagline {
		display: block;
		font-size: 0.4em;
		padding: 8px 0;
	}
	#heading .corner {
		position: absolute;
		top: 5px;
		right: 5px;
	}
	.container h1 {
		padding: 0 8px;
	}
	#intro li {
		width: 31%;
		margin: 1%;
	}
	.news {
		margin: 100px 10%;
	}
	#about,
	#results,
	#voting {
		padding: 2em;
	}
	#results p,
	#voting p {
		margin-top: 0;
	}

	#results table thead td {
		padding: 4px 2px;
	}
}


@media (max-width: 600px) {
	#results table thead td {
		padding: 4px 1px;
		font-size: 0.8em;
		word-break:break-all;
	}

	#about,
	#results,
	#voting {
		padding: 1em;
	}

	#results table {
		border-spacing: 1px;
	}

	#about,
	.tagline {
		font-size: 0.3em;
	}

	#heading {
		margin: 0;
	}

}

@media (max-width: 500px) {
	body {
		width: 100%;
	}



	#intro li {
		width: 85%;
		padding-left: 15%;
		box-sizing: border-box;
		font-size: 0.9em;
		margin-bottom: 1.5em;
		padding-top: 0;
		background-size: auto 2em !important;
		background-position: top left !important;

	}

	#results table thead td {
		padding: 4px 1px;
		font-size: 0.65em;
	}

	#about,
	#results,
	#voting {
		padding: 0.5em;
	}

	#heading {
		padding: 1%;
		width: 98%;
	}

	#heading h1 {
		margin: 0;
	}

	.container {
		margin: 0;
		width: 100%;
	}

	.tagline {
		font-size: 0.3em;
	}


}