.blur, #projects h2, #projects a p {
  color: transparent;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  -webkit-transition: text-shadow 0.6s, color 1s;
  -moz-transition: text-shadow 0.6s, color 1s;
  -o-transition: text-shadow 0.6s, color 1s;
  transition: text-shadow 0.6s, color 1s; }

.sharp, #projects a:hover p, #projects a:hover h2 {
  color: inherit;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0);
  -webkit-transition: text-shadow 0.6s, color 1s;
  -moz-transition: text-shadow 0.6s, color 1s;
  -o-transition: text-shadow 0.6s, color 1s;
  transition: text-shadow 0.6s, color 1s; }

body {
  background-color: #eee; }

h1, h2, h3, svg {
  font-family: 'Source Sans Pro', serif; }

h1 {
  margin-bottom: 10px;
  border-bottom: 4px solid #222; }
  h1 img {
    height: 40px; }

h2.subheader {
  margin: 0; }

/*  Project bar  */
#projects {
  margin-bottom: 10px; }
  #projects h2 {
    opacity: 1;
    margin: 0; }
  #projects ul {
    list-style: none; }
  #projects li {
    padding: 1px; }
    #projects li:nth-child(1) a {
      background-image: url("../img/uid.svg"); }
    #projects li:nth-child(2) a {
      background-image: url("../img/npr.svg"); }
    #projects li:nth-child(3) a {
      background-image: url("../img/cctv.svg"); }
    #projects li:nth-child(4) a {
      background-image: url("../img/cctns.svg"); }
    #projects li:nth-child(5) a {
      background-image: url("../img/uav.svg"); }
  #projects a {
    border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    background: #444444 url("../img/cctv.svg") no-repeat 90% 10px;
    color: #eee;
    padding: 10px;
    display: block;
    min-height: 80px;
    cursor: default;
    -webkit-transition: background-color 0.3s, max-height 0.5s;
    -moz-box-shadow: 0px 1px 2px #333333;
    -webkit-box-shadow: 0px 1px 2px #333333;
    box-shadow: 0px 1px 2px #333333;
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=90, Color='$color')";
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=90, Color='$color'); }
    #projects a p {
      font-size: 60%; }
      #projects a p b {
        display: inline-block; }
    #projects a:hover {
      color: #222;
      background-color: #ddd; }

/*  Map   */
#map {
  border-radius: 20px;
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  position: relative; }

svg {
  font-size: 60%;
  margin-top: 40px; }

path[wiki] {
  fill: #ccc;
  stroke: #fff;
  stroke-width: 0.2px; }
  path[wiki]:hover, path[wiki].active {
    fill: #ddd;
    stroke: white;
    stroke-width: 1px; }
  path[wiki].focus {
    opacity: 1;
    fill: yellow;
    stroke: #ccc;
    stroke-width: 1px; }

text[wiki] {
  text-anchor: middle;
  cursor: pointer;
  opacity: 0.4; }
  text[wiki]:hover, text[wiki].active {
    font-size: 150%;
    opacity: 1; }
  text[wiki].focus {
    transition: transform 2s;
    opacity: 1;
    text-decoration: underline;
    z-index: 999; }

.Union {
  font-size: 8px;
  font-style: italic; }

.State {
  font-size: 10px; }

.Capital {
  font-weight: bold; }

.rail {
  opacity: 0.1;
  fill: none;
  stroke: #777;
  stroke-width: 1.5px;
  pointer-events: none; }
  .rail:hover {
    opacity: 1;
    stroke-width: 2px; }

#map-overlay {
  margin-left: 10px;
  opacity: 0.6;
  position: absolute; }
  #map-overlay h3 {
    margin-bottom: 0;
    pointer-events: none; }
  #map-overlay .subheader span {
    background-color: #eee;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    padding: 2px 6px;
    cursor: pointer; }

form {
  border-bottom: 1px solid #333; }

#lang {
  width: 40px; }

.title {
  margin-bottom: 0; }
  .title a {
    color: inherit;
    font-weight: bold; }

article section {
  margin-bottom: 5px;
  font-size: 80%; }

footer {
  margin-top: 10px !important;
  font-size: 80%;
  color: #999; }
  footer p {
    border-top: 1px solid #eee;
    padding-top: 5px;
    margin-bottom: 0; }
  footer a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dotted black; }
  footer #credits li {
    display: inline;
    margin-right: 5px;
    opacity: 0.5; }
    footer #credits li:hover {
      opacity: 1; }
    footer #credits li:before {
      content: '\ffed'; }