/* Reset padding and margins for everything */
* {
    padding: 0px;
    margin: 0px;
}

/* Use Milo Web Pro */
@font-face {
  font-family: MiloWebPro;
  src: url("../fonts/MiloWebPro.eot");
}

@font-face {
  font-family: MiloWebPro;
  src: url("../fonts/MiloWebPro.woff") format("woff");
}

@font-face {
  font-family: MiloWebPro;
  src: url("../fonts/MiloWebPro-Bold.eot");
  font-weight: bold;
}

@font-face {
  font-family: MiloWebPro;
  src: url("../fonts/MiloWebPro-Bold.woff") format("woff");
  font-weight: bold;
}

@font-face {
  font-family: MiloWebPro;
  src: url("../fonts/MiloWebPro-Ita.eot");
  font-style: italic;
}

@font-face {
  font-family: MiloWebPro;
  src: url("../fonts/MiloWebPro-Ita.woff") format("woff");
  font-style: italic;
}

@font-face {
  font-family: MiloWebPro;
  src: url("../fonts/MiloWebPro-BoldIta.eot");
  font-weight: bold;
  font-style: italic;
}

@font-face {
  font-family: MiloWebPro;
  src: url("../fonts/MiloWebPro-BoldIta.woff") format("woff");
  font-weight: bold;
  font-style: italic;
}

* {
  font-family: MiloWebPro, Helvetica, Arial, sans-serif;
}

/* Set up the basics */
html {
  background: #01a;
  color: #fff;
}

p, h1, h2, h3, h4 {
  margin-bottom: 10pt;
}

h1 {
    text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.75);
}

span.app {
  font-weight: bold;
}

a {
    color: inherit;
}

#icon-strip {
}

.icon {
  position: relative;
  display: inline-block;
  width: 144px;
  text-align: center;
  margin: 16px;
}

.icon .dl:hover img {
  width: 144px;
  height: 144px;
  padding: 0px;
}

.disabled {
  opacity: 0.5;
}

.icon.disabled .dl:hover img {
  width: 128px;
  height: 128px;
  padding: 8px;
}

.icon .dl img {
  display: block;
  margin: 0 auto;
  width: 128px;
  height: 128px;
  padding: 8px;
}

.icon .label {
  display: inline-block;
  background: #67e;
  padding: 4px 8px;
  border-radius: 16px;
  text-align: center;
  font-weight: bold;
  text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.75);
}

.icon .dl:hover .label {
  background: #78f;
}

.icon .license {
  margin: 8px;
}

.icon .sysreq {
  font-size: 8pt;
}

.icon .badge {
  position: absolute;
  top: 48px;
  width: 128px;

  background: rgba(0,0,0,0.5);
  padding: 4px 8px;
  border-radius: 16px;
  text-align: center;
  font-weight: bold;
  text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.75);
  opacity: 1.0;
}

img#logo {
  display: block;
  float: left;
  margin-right: 32px;
}

div#header {
  width: 100%;
  background-image: url("../img/circles.jpg");
  background-size: cover;
}

div#history {
  background: #fff;
  color: #34e;
}

div#history p
{
  color: #128;
}

div.inner {
  padding: 64px;
  width: 800px;
  margin: 0 auto;
}