antiprism.css

@font-face {
    font-family: 'blkm';
    src: url('font/blackout-midnight-webfont.eot');
    src: url('font/blackout-midnight-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/blackout-midnight-webfont.woff') format('woff'),
         url('font/blackout-midnight-webfont.ttf') format('truetype'),
         url('font/blackout-midnight-webfont.svg#blackoutmidnight') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'politics';
    src: url('font/politicsheadv1_9-webfont.eot');
    src: url('font/politicsheadv1_9-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/politicsheadv1_9-webfont.woff') format('woff'),
         url('font/politicsheadv1_9-webfont.ttf') format('truetype'),
         url('font/politicsheadv1_9-webfont.svg#politics_headbold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@-webkit-keyframes spaceboots {
  0% { -webkit-transform: translate(2px, 1px) rotate(0deg); font-size: 6.1em; }
  10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); font-size: 6em; }
  20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); font-size: 6.2em; }
  30% { -webkit-transform: translate(0px, 2px) rotate(0deg); font-size: 6.1em;}
  40% { -webkit-transform: translate(1px, -1px) rotate(1deg); font-size: 6em;}
  50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); }
  60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); }
  70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); }
  80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); }
  90% { -webkit-transform: translate(2px, 2px) rotate(0deg); }
  100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); }
}
xh1 .main:hover,
xh1 .main:focus {
  -webkit-animation-name: spaceboots;
  -webkit-animation-duration: 0.8s;
  -webkit-transform-origin:50% 50%;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
}
xh1 .main {
  display:inline-block;
}

@-moz-keyframes spin {
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}

body {
  background: #fff; /* url(stormysky.jpg);*/
  color: #666;
  font-family: Georgia, serif;
  font-size: 1.1em;
  margin: 0 0 0 0;
}

a { color:inherit;}

.box {  
  margin: 0 auto;
  width: 550px;
}

p, ul {
  line-height: 1.6em;
}

h1 .main {
  font-family: 'blkm';
  text-transform: upper-case;
  color: #000;
  word-spacing: -.2em;
}
h2, h3, span.intro, #menu { /* .state-expanded */
  font-family: 'politics';
  text-transform: upper-case;
  color: #000;
}

h1 {
  position: absolute;
  left: 50%;
  margin-left: -150px;
  top: 50px;
  text-align: center;
  font-size: 1em;
  text-transform: uppercase;
  width: 300px;
  background: #000;
  border-radius: 50%;
  height: 270px;
  padding-top: 30px;
  /* box-shadow: rgba(0,0,0,.3) .5em .5em 0; */
}
h1 .main {
  color: #fff;
  font-size: 6em;
  display: block;
  -webkit-transform: rotate(-2deg);
  -moz-transform: rotate(-2deg);
  -ms-transform: rotate(-2deg);
  -o-transform: rotate(-2deg);
  transform: rotate(-2deg);
  word-spacing: -.3em;
  padding: .05em 0;
  text-shadow: rgba(0,0,0,1) .05em .05em 0;
}
h1 .pre, h1 .post {
  letter-spacing: 1em;
  font-size: .7em;
  opacity: 0;
}

h1 .main:hover {
  -webkit-transform: rotate(-4deg);
  -moz-transform: rotate(-4deg);
  -ms-transform: rotate(-4deg);
  -o-transform: rotate(-4deg);
  transform: rotate(-4deg);
  font-size: 6.3em;
}

/* .state-expanded */ h3 { 
  font-size: 1.7em;
}

span.intro {
  font-size: 1.7em;
  margin-right: .1em;
}

.box strong {
  /*background: #000;
  color: #fff;
  padding: .1em .3em;
  font-weight: normal;*/
  color: #000;
}

ul#menu {
  position: fixed;
  margin: 0; padding: 0;
  top: 0;
  width: 100%;
  list-style: none; 
  line-height: 1.2em;
  float: right;
  z-index: 999;
  background: -moz-linear-gradient(top, rgba(255,255,255,1) 30%, rgba(255,255,255,0) 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(30%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, rgba(255,255,255,1) 30%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, rgba(255,255,255,1) 30%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, rgba(255,255,255,1) 30%,rgba(255,255,255,0) 100%); /* IE10+ */
  background: linear-gradient(to bottom, rgba(255,255,255,1) 30%,rgba(255,255,255,0) 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 ); /* IE6-9 */
}
ul#menu li {
  float: right;
  margin-right: 1.5em;
}
ul#menu li a { 
  text-decoration: none;
  color: #000;
  font-size: 1.4em;
  padding: .5em 0;
  display: block;
  text-shadow: #fff 2px 2px 0px;
  -webkit-transition: color .1s;
  -moz-transition: color .1s;
  -ms-transition: color .1s;
  -o-transition: color .1s;
  transition: color .1s;
}
ul#menu li a:hover {
  color: #69f;
}

#menu li+li a { /* sign */
  background: #69f;
  padding: .3em .5em .2em;
  border-radius: .3em;
  box-shadow: #000 3px 3px 0;
  text-shadow: none;
  color: #fff;
  margin-top: .2em;
}
#menu li+li a:hover {
  color: #fff;
  box-shadow: none;  
  margin-top: .3em;
  margin-left: .1em;
}

/*div.expanded {
  height: 0;
  overflow: hidden;
}
.state-expanded div.expanded {
  height: auto;
}*/

#bg {
  position: absolute;
  background: url(graph.gif) center 0 no-repeat;
  background-size: 470px;
  /* 
background: url(http://www.immateriallabour.com/edgeryders/reach_of_mission.jpg) center -150px no-repeat;
  background-size: 70%;*/
  width: 100%;
  height: 500px;
  margin: 0 auto;
  -webkit-transform: rotate(60deg);
  -moz-transform: rotate(60deg);
  -ms-transform: rotate(60deg);
  -o-transform: rotate(60deg);
  transform: rotate(60deg);
  /*-webkit-animation-name: spin;
  -webkit-animation-duration: 160000ms;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -moz-animation-name: spin;
  -moz-animation-duration: 160000ms;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;
  -ms-animation-name: spin;
  -ms-animation-duration: 160000ms;
  -ms-animation-iteration-count: infinite;
  -ms-animation-timing-function: linear;*/
}

#logo { 
  position: absolute;
  width: 700px;
  height: 400px;
  margin-left: -350px;
  left: 50%;
}

/*#logo #bar {
  width: 0px;
  transition: width .2s;
}
#logo:hover #bar, #bg:hover + h1 + #bar, h1:hover + #bar {
  width: 400px;
}*/

#page {
  padding-top: 60px;
}
.first.box {
  padding-top: 500px;
  position: relative;
  z-index: 10;
}

#pirate {
  position: fixed;
  text-transform: uppercase;
  color: #fff;
  font-size: .8em;
  z-index: 999999;
  text-align: right;
}
#pirate img {
  vertical-align: middle;
}
#pirate .section {
  float: left;
  background: #000;
  margin-right: 1px;  
  padding: 3px 8px;
  height: 40px;
  line-height: 35px;
}
#pirate .section.lang {
  background: #69f;
}

h3 {
  margin: .2em 0;
}
h3 a {
  cursor: normal; /* disabled */
  color: inherit;
  text-decoration: none;
  transition: color .2s;
}
h3 { /*a:hover, .state-expanded h3 {*/
  color: #69f;
}

.box + .box {
  margin-top: 2em;
}

#supporters { 
  margin-top: 3em;
  width: 815px;
  overflow: hidden;
}
#supporters h3 {
  color: #000;
  font-size: 1.1em;
  text-align: center;
  margin-bottom: 2em;
}
#supporters ul {
  list-style: none;
  margin: 0; padding: 0;
}
#supporters ul li {
  float: left;
  display: block;
  margin: 0 30px 0 0;
  padding: 0;
}
#supporters ul.logos li {
  border: 2px solid #fff;
  position: relative;
  opacity: .4;
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  transform: rotate(-3deg);
  -webkit-transition: opacity .3s;
  -moz-transition: opacity .3s;
  -ms-transition: opacity .3s;
  -o-transition: opacity .3s;
  transition: opacity .3s;
}
#supporters ul.logos li a+a {
  position: absolute;
  left: 0; top: 0;
  background: url(stamp.png) center no-repeat;
  opacity: 1;
  overflow: hidden;
  -webkit-transition: opacity .3s;
  -moz-transition: opacity .3s;
  -ms-transition: opacity .3s;
  -o-transition: opacity .3s;
  transition: opacity .3s;
}
#supporters ul.logos li:hover {
  opacity: 1;
}
#supporters ul.logos li:hover a+a {
  opacity: 0;
}

#supporters ul.sigs {
  margin-bottom: 1.5em;
  overflow: hidden;
}
#supporters ul.sigs li {

}
#supporters ul.sigs li small {
  font-size: .7em;
  display: block;
  margin: 0; padding: 0;
  line-height: 1.2em;
  color: #999;
}

#credits, .credits {
  text-align: center;
  color: rgba(255,255,255,.7);
  font-size: .8em;  
  line-height: 1.4em;
}
#credits {
  clear: both;
  margin-top: 30px;
}
#credits a, .credits a {
  color: inherit;
}


#share {
  background: #69f;
  color: #fff;
  margin-top: 20px;
  padding: 20px 0 100px;
}

#share .box {
  margin-bottom: 100px;
  overflow: hidden;
}

#share .box a {
  border-radius: 75px;
  display: block;
  float: left;
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  -ms-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
}
#share .box a:hover {
  background: rgba(255,255,255,.6);
  box-shadow: rgba(255,255,255,.6) 0 0 5px;
}

#share h3 {
  color: #fff;
}