@font-face {
       font-family: 'DidactGothic';
       src: url('../fonts/DidactGothic-Regular.ttf');
   }
   
   tbody,
   tfoot,
   thasead,
   tr,
   th,
   td,
   table,
   div {
       margin: 0;
       padding: 0;
       border: 0;
       font-size: 100%;
       font: inherit;
       vertical-align: baseline;
   }
   
   table {
       border-collapse: collapse;
       border-spacing: 0;
   }
   
   input {
       padding: 0;
       border-width: 0;
   }
   
   body {
       font-family: Arial narrow, 'DidactGothic';
       text-align: center;
       margin: 0;
       background-color: lightgray;
       color: white;
   }
   
   #pageHeader {
       background-color: #333333;
       padding-top: 1.4em;
       padding-bottom: 1.5em;
       border-bottom: 0.23em solid #dc4405;
   }
   
   #pageHeader td {
       vertical-align: middle;
   }
   
   #gmbLogo {
       width: 100%;
   }
   
   .headerElement {
       display: inline-block;
   }
   
   .hexMapTitle {
       font-size: 1.2em;
       font-weight: 600;
       padding-top: 1.4em;
       padding-bottom: 0.8em;
   }
   
   .hexagonMapHolder {
       display: none;
       transition: all 0.6s;
       -webkit-transition: all 0.6s;
       font-size: 0.6em;
       text-align: center;
       width: 100%;
       vertical-align: top;
       padding-top: 1em;
       justify-content: center;
       position: absolute;
   }
   
   .hexagonMap {
       opacity: 0;
       align-self: center;
       -webkit-transition: all 0.5s;
       transition: all 0.5s;
       font-family: "DidactGothic"
   }
   
   .hex {
       float: left;
       margin-left: 2.3px;
       margin-bottom: -20px;
       transition: all 0.5s;
       -webkit-transition: all 0.5s;
       transform-origin: center;
   }
   
   .hex .top {
       width: 0;
       border-bottom: 23px solid #424242;
       border-left: 40px solid transparent;
       border-right: 40px solid transparent;
       transition: all 1s;
   }
   
   .hex .middle {
       width: 80px;
       height: 46px;
       background: #424242;
       transition: all 1s;
       cursor: pointer;
   }
   
   .hex .middle:hover {}
   
   .hex .bottom {
       width: 0;
       border-top: 23px solid #424242;
       border-left: 40px solid transparent;
       border-right: 40px solid transparent;
       transition: all 1s;
   }
   
   .hex-row {
       clear: left;
   }
   
   .hex-row.even {
       margin-left: 40.8px;
   }
   
   .hex .middleBlank {
       width: 80px;
       height: 46px;
       background: transparent;
   }
   
   .hex .topBlank {
       width: 0;
       border-bottom: 23px solid transparent;
       border-left: 40px solid transparent;
       border-right: 40px solid transparent;
   }
   
   .hex .bottomBlank {
       width: 0;
       border-top: 23px solid transparent;
       border-left: 40px solid transparent;
       border-right: 40px solid transparent;
   }
   
   .wardName {
       padding: 2px;
       font-size: 1.1em;
   }
   
   .wardValue {
       padding: 2px;
       font-size: 1.5em;
   }
   
   .large {
       font-weight: bold;
       -webkit-transform: scale(1.3);
       transform: scale(1.3);
   }
   
   .zoom {
       cursor: pointer;
   }
   
   #mapHolder {
       position: relative;
   }
   
   #LeedsHexagonMapHolder {
       display: none;
       opacity: 0;
   }
   
   #localAuthorityHexagonMapHolder {
       width: 100%;
       display: none;
       opacity: 0;
   }
   
   #mapHeading {
       font-family: "DidactGothic";
       margin-bottom: 0.5em;
       color: #333333;
   }
   
   #instruction {
       margin-bottom: 1em;
       color: #333333;
       -webkit-transition: all 0.5s;
       transition: all 0.5s;
   }
   
   .chartHolder {
       left: 0;
       margin: auto;
       width: 50%;
       margin-left: 25%;
       position: absolute;
       top: 100%;
       padding-bottom: 10em;
       margin-top: 4em;
       font-size: 1.5em;
       opacity: 0;
       -webkit-transition: all 0.5s;
       transition: all 0.5s;
   }
   
   .chartExplanation {
       color: #333333;
       font-size: 1.1em;
       padding-bottom: 1.6em;
   }
   
   .chart {
       margin: auto;
       margin-top: 1em;
   }
   
   .chartTitle {
       font-family: "DidactGothic";
       font-weight: bold;
       color: #333333;
       padding-bottom: 0.3em;
       font-size: 1.4em;
       margin-top: 0.8em;
   }
   
   .timeSeriesOn {
       background-color: white !important;
       color: #dc4405 !important;
   }
   
   .mapControlButtonHolder {
       opacity: 1;
       color: white;
       background-color: #dc4405;
       cursor: pointer;
       display: inline-block;
       /*	padding: 0.3em 1.2em;*/
       border-radius: 0.4em;
       border: 0.15em solid #dc4405;
       font-weight: bold;
       transition: all 0.5s;
       -webkit-transition: all 0.5s;
       font-size: 1.1em;
       margin-bottom: 1em;
       margin-top: 0.5em;
       width: 11em;
       -webkit-box-sizing: border-box;
       /* Safari/Chrome, other WebKit */
       -moz-box-sizing: border-box;
       /* Firefox, other Gecko */
       box-sizing: border-box;
       /* Opera/IE 8+ */
       white-space: nowrap;
   }
   
   #controlButtonHolder {
       margin-bottom: 0.8em;
   }
   
   .mapControlButton {
       margin: 0.3em 1.2em;
   }
   
   #zoomOutButton {
       width: 0;
       opacity: 0;
       pointer-events: none;
   }
   
   .mapControlButtonHolder:hover {
       background-color: white;
       color: #dc4405;
   }
   
   .control {
       display: inline-block;
       color: white;
       width: 15em;
       padding: 0.6em 1em;
       font-size: 0.85em;
   }
   
   .controlTitle {
       background-color: #dc4405;
       color: white;
       padding: 0.2em 0.2em 0.3em 0.2em;
       font-size: 1.3em;
   }
   
   #mainTitle {
       font-family: "DidactGothic";
       margin-bottom: 0.4em;
   }
   
   #headingText {
       margin-bottom: 0.4em;
   }
   
   .controlSelect {
       vertical-align: -webkit-baseline-middle;
       margin-top: -3px;
       font-size: 1.2em;
       width: 100%;
       margin: 0;
   }
   
   #nuts1HexagonMapHolder {}
   
   .dataButton {
       cursor: pointer;
       background-color: grey;
       padding: 0.2em 1em;
       margin: 0.3em;
       border-radius: 0.3em;
       display: inline-block;
       width: 8em;
       text-align: center;
   }
   
   #selectData {
       font-weight: bold;
       margin: 0.3em;
   }
   
   .dataSelectionHolder {
       margin-top: 1em;
       vertical-align: middle;
   }
   
   .dataButton:hover {
       background-color: #585858;
   }
   
   .selected {
       background-color: #dc4405;
   }
   
   .dataSelectionTitle {
       color: lightgray;
   }
   
   h3 {
       margin-bottom: 0.2em;
   }
   
   #footer {
       padding: 0.5em;
       width: 100%;
       bottom: 0;
       position: fixed;
       color: white;
       background-color: #333333;
       border-top: 0.23em solid #dc4405;
   }
   
   a {
       color: lightgray;
   }
   
   .dataLink {
       margin: 0.2em;
       display: inline-block;
   }
   
   #gmbLogoHolder {
       vertical-align: top;
       width: 10%;
       text-align: center;
       margin: auto;
       display: block
   }
   
   #dataControlsHolder {
       display: block
   }
   
   .barTimeSeriesHighlight {
       background: #333333 !important;
   }
   
   .legend {
       display: none;
       margin: auto;
   }
   
   .legendHolder td {
       vertical-align: middle;
   }
   
   .legendSquare {
       width: 2em;
       height: 2em;
   }
   
   .legendValue {
       padding-left: 0.5em;
       color: #333333;
       vertical-align: middle;
   }
   
   .legendButton {
       display: block;
       cursor: pointer;
       background-color: #dc4405;
       cursor: pointer;
       padding: 0.3em 1.2em;
       border-radius: 0.4em;
       border: 0.15em solid #dc4405;
       font-weight: bold;
       width: 8em;
       margin: auto;
       margin-bottom: 1em;
   }
   
   .legendButton:hover {
       color: #dc4405;
       background-color: white;
   }
   
   .dataGroup {
       display: none;
       opacity: 0;
       transition: all 0.5s;
       -webkit-transition: all 0.5s;
       /*   	position: absolute;*/
       width: 100%;
   }
   
   #dataInstructions {
       background-color: grey;
       color: white;
       padding: 0.2em 0.2em 0.3em 0.2em;
       font-size: 1.2em;
   }
   
   #dataControls {
       text-align: center;
       margin-left: auto;
       margin-right: auto;
       width: 15em;
       margin-top: 1.2em;
       margin-bottom: 0.7em;
       border: 0.1em solid grey;
   }
   
   #dataSelection {
       margin-top: -3px;
       width: 100%;
       font-size: 1.0em;
       background-color: #ffffff;
   }
   
   .advertImage {
       cursor: pointer;
   }
   
   .advertHolder {
       margin-top: 2.5em;
   }

.keyword-bar {
    display: inline-block;
    height: 1.5em;
    line-height: 1.5em;
    border-right: 0px solid white;
}