style.css

body {
  line-height: 1.3;
}

body, svg {
  font-family: Helvetica, Arial, sans-serif;
}

#container {
  width: 1120px;
  margin: 0 auto;
}

#content {
  text-align: center;
}

.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */


/* =============================================================================
   HEADER
 */

header {
  text-align: center;
  width: 620px;
  margin: 40px auto;
  line-height: 1.45;
}

header h1 {
  font-size: 1.75em;
  font-weight: 700;
  margin: 0 0 .75em;
}

header p {
  font-size: 1.2em;
  font-weight: 100;
  margin: 0 0 1em;
}

header .small {
  font-size: 14px;
  color: #a5a5a5;
}

svg {
  font-size: 10px;
}

/* =============================================================================
   FOOTER
 */

footer {
  margin: 50px 0 40px;
  padding: 0;
}

footer p {
  font-size: 13px;
  text-align: center;
  color: #ccc;
}

footer p a {
  text-decoration: underline;
  color: #bbb;
}

footer p a:hover {
  color: #888;
}


/* =============================================================================
   SEARCH
 */

#search {
  margin: 50px 0 50px;
}

#search .candidate-number {
  font-size: 32px;
  font-weight: bold;
  border: none;
  border-bottom: 2px dotted #ccc;
  color: black;
  width: 300px;
  padding: 5px;
  margin: 0 auto;
  outline: none;
  text-transform: uppercase;
  text-align: center;
  display: block;
}

#search .candidate-number:focus {
  border-color: #999;
}

#search .candidate-number.error {
  color: #c7001b;
  border-color: #c7001b;
}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  font-weight: normal;
  text-transform: none;
  color: #ccc;
}
::-moz-placeholder { /* Firefox 19+ */
  font-weight: normal;
  text-transform: none;
  color: #ccc;
}
:-ms-input-placeholder { /* IE 10+ */
  font-weight: normal;
  text-transform: none;
  color: #ccc;
}
:-moz-placeholder { /* Firefox 18- */
  font-weight: normal;
  text-transform: none;
  color: #ccc;
}


/* =============================================================================
   BAR CHARTS
 */

.bar-chart .bar {
  fill: #888;
  /*shape-rendering: crispEdges;*/
}

.bar-chart text {
  fill: black;
}

.bar-chart .x-axis-label {
  font-size: 13px;
  font-weight: 100;
  text-transform: lowercase;
  fill: #999;
}

.bar-chart .y-axis-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  fill: black;
}

.bar-chart .axis path, .bar-chart .axis line {
  shape-rendering: crispEdges;
}

.bar-chart path, .bar-chart .domain {
  fill: none;
  stroke: none;
}

.bar-chart .tick line {
  stroke: rgba(80,80,80,.18);
}


/* =============================================================================
   HISTOGRAMS
 */

.histogram .bar {
  fill: steelblue;
}

.histogram .x-axis-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  fill: black;
}

.histogram .y-axis-label {
  font-size: 11px;
  font-weight: 400;
  fill: black;
}

.histogram .axis path, .histogram .axis line {
  shape-rendering: crispEdges;
}

.histogram .y path, .histogram .y .domain {
  fill: none;
  stroke: none;
}

.histogram .y .tick line {
  stroke: rgba(80,80,80,.18);
}


/* =============================================================================
   MODULE
 */

.module {
  clear: both;
  text-align: left;
  margin: 0 auto;
}

.category h1 {
  font-size: 21px;
  text-transform: uppercase;
  margin: 40px 0;
}


.module .info {
  float: left;
  width: 150px;
  padding-right: 20px;
}

.module .info h1 {
  font-size: 18px;
  font-weight: 700;
  color: black;
  margin: .5em 0 .1em;
  text-transform: uppercase;
}

.module .info h2 {
  font-size: 16px;
  font-weight: 400;
  color: #999;
  margin: 0;
}


.module .marks-list {
  float: left;
  width: 50px;
  padding-right: 20px;
  min-height: 1px;
  margin-top: 10px;
}

.module .marks-list .item {
  height: 54px;
}

.module .marks-list .candidate-number {
  font-size: 14px;
  font-weight: bold;
  color: #aaa !important;
}

.module .marks-list .marks {
  font-size: 22px;
  font-weight: bold;
}


.module .distribution {
  float: left;
  width: 400px;
  padding-right: 20px;
}


.module .individual {
  float: left;
  width: 460px;
}