* { padding: 0; border: 0; margin: 0; outline: none; text-decoration: none; font-weight: normal }

/* Vertical Centering */
html, body { width: 100%; overflow: hidden }
html { height: 100%; display: table }
body { height: 100%; display: table-cell; vertical-align: middle; text-align: center }

body { background: #fff; color: #333; font: 12px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif !important }

#main { margin: 0 auto }
#feed { position: relative; z-index: 1 }
#feed div { opacity: .2 }
#o { background: no-repeat center center; z-index: 2 }
#x { background: no-repeat center center; border: 3px dashed #ccc; z-index: 3; margin: -3px 0 0 -3px; cursor: alias }

#feed div img, #x { border-radius: 308px }
#feed div, #o, #x { position: absolute }
#main, #feed div, #feed img, #o, #x { display: block; width: 615px; height: 615px }

#main:hover #x { -webkit-transform:rotate(90deg); transform: rotate(90deg); -moz-transform: rotate(90deg); opacity: .2 }

#main:hover #feed div:nth-child(1) { opacity: 1 }
#feed div:nth-child(1) { -webkit-transition: all 5s; -moz-transition: all 5s; -o-transition: all 5s; transition: all 5s }
#main:hover #feed div:nth-child(2) { opacity: 0 }
#feed div:nth-child(2) { -webkit-transition: all 2s; -moz-transition: all 2s; -o-transition: all 2s; transition: all 2s }
#main:hover #feed div:nth-child(3) { opacity: .3 }
#feed div:nth-child(3) { -webkit-transition: all 3s; -moz-transition: all 3s; -o-transition: all 3s; transition: all 3s }
#main:hover #feed div:nth-child(4) { opacity: 0 }
#feed div:nth-child(4) { -webkit-transition: all 4s; -moz-transition: all 4s; -o-transition: all 4s; transition: all 4s }
#main:hover #feed div:nth-child(5) { opacity: .3 }
#feed div:nth-child(5), #x { -webkit-transition: all 5s; -moz-transition: all 5s; -o-transition: all 5s; transition: all 5s }

#bottom { position: absolute; top: 98%; display: none; width: 100%; background: #999; text-align: left; border-top: 3px dashed #fff; z-index: 99 }
#p { padding: 40px; max-width: 960px; margin: 0 auto }
#p img { float: right; margin: 0 0 20px 40px; border: 3px dashed #333; max-width: 30% }
p { margin-bottom: 1.5em; max-width: 60% }
h1, h2, strong { font-weight: 600 }
h1, h2 { font-size: 24px; line-height: 24px; letter-spacing: 2px; text-transform: uppercase }
h1 { color: #6cc }
h1:after, h2:after, h2:before { font: 12px Georgia; text-transform: none; font-style: italic; color: #333 }
h1:after { content: "900 × 5 + time"; margin-left: 8px }
h2:after { content: "July 22-28, 2011"; margin-left: 8px }
h2:before { content: "by"; margin-right: 4px; vertical-align: middle }
h2 { color: #fff }
h2 + p { margin-top: 1.5em }
#p a { color: #6cc }
h1, h2, #p a { text-shadow: 0 1px 0 #666 }
em { font: 12.5px Georgia; font-style: italic }

#share { display: none }