@-webkit-keyframes spin {
  0%, 100% { -webkit-transform: rotate(20deg); }
  50%  { -webkit-transform: rotate(160deg); }
}
@-moz-keyframes spin {
  0%, 100% { -moz-transform: rotate(20deg); }
  50%  { -moz-transform: rotate(160deg); }
}

@-webkit-keyframes spinopaque {
  0%, 100% { -webkit-transform: rotate(20deg); opacity: 1; }
  50%  { -webkit-transform: rotate(160deg); opacity: 1;  }
}
@-moz-keyframes spinopaque {
  0%, 100% { -moz-transform: rotate(20deg); opacity: 1; }
  50%  { -moz-transform: rotate(160deg); opacity: 1;  }
}

@-webkit-keyframes spinrev {
  0%, 100% { -webkit-transform: rotate(-20deg); }
  50%  { -webkit-transform: rotate(-160deg);}
}
@-moz-keyframes spinrev {
  0%, 100% { -moz-transform: rotate(-20deg); }
  50%  { -moz-transform: rotate(-160deg);}
}

@-webkit-keyframes spinabit {
  0%, 100% { -webkit-transform: rotate(0deg); }
  50%  { -webkit-transform: rotate(-30deg);}
}
@-moz-keyframes spinabit {
  0%, 100% { -moz-transform: rotate(0deg); }
  50%  { -moz-transform: rotate(-30deg);}
}

@-webkit-keyframes grow {
  from { -webkit-transform: scale(0) ; }
  to   { -webkit-transform: scale(1) ; }
}
@-moz-keyframes grow {
  from { -moz-transform: scale(0) ; }
  to   { -moz-transform: scale(1) ; }
}

@-webkit-keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@-moz-keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@-webkit-keyframes rotatein {
  from { opacity: 0; -webkit-transform: rotate(720deg) scale(0); }
  to   { opacity: 1; }
}
@-moz-keyframes rotatein {
  from { opacity: 0; -moz-transform: rotate(720deg) scale(0); }
  to   { opacity: 1; }
}

@-webkit-keyframes ghost {
  0%, 100% { opacity: 0; }
  50%  { opacity: 1; }
}
@-moz-keyframes ghost {
  20%, 80% { opacity: 0; }
  50%  { opacity: 1; }
}

.head {
	padding-left: 1em;
	clear: both;
	height: 23px;
/*	display:block; */
	background-image:url('../../library/core/images/title_gradient.png');
	background-repeat:repeat-x;
	background-position:top;
	padding-bottom: 0px;
	margin-bottom: 0px;
}

.dot { 
  position: absolute;
//  border: 1px solid #F00;
  opacity: 0;
  top: 405px;
  height: 20px;
  list-style: none;
  z-index: 30;
}

#dot1 { z-index: 39; }
#dot2 { z-index: 38; }
#dot3 { z-index: 37; }
#dot4 { z-index: 36; }
#dot5 { z-index: 35; }
#dot6 { z-index: 34; }
#dot7 { z-index: 33; }
#dot8 { z-index: 32; }
#dot9 { z-index: 31; }
#dot10 { z-index: 30; }

.dot.revealed {
  -webkit-animation: spinopaque 12s infinite linear;
  -moz-animation: spinopaque 12s infinite linear;
}

.dot.unrevealed {
  -webkit-animation: spin 12s infinite linear, ghost 3s infinite ease-in-out;
  -moz-animation: spin 12s infinite linear, ghost 3s infinite ease-in-out;
}

.dot label img {
  position: relative;
  cursor: pointer;
  z-index: 30;
	-webkit-animation: spinrev 12s infinite linear;
	-moz-animation: spinrev 12s infinite linear;
}

.fast { -webkit-animation-duration: 8s !important; -moz-animation-duration: 8s !important; }
.dot.unrevealed.fast {
  -webkit-animation: spin 8s infinite linear, ghost 2s infinite ease-in-out !important;
  -moz-animation: spin 8s infinite linear, ghost 2s infinite ease-in-out !important;
}
.medium { -webkit-animation-duration: 12s !important; -moz-animation-duration: 12s !important; }
.dot.unrevealed.medium {
  -webkit-animation: spin 12s infinite linear, ghost 3s infinite ease-in-out !important;
  -moz-animation: spin 12s infinite linear, ghost 3s infinite ease-in-out !important;
}
.slow { -webkit-animation-duration: 20s !important; -moz-animation-duration: 20s !important; }
.dot.unrevealed.slow {
  -webkit-animation: spin 20s infinite linear, ghost 4s infinite ease-in-out !important;
  -moz-animation: spin 20s infinite linear, ghost 4s infinite ease-in-out !important;
}
.veryslow { -webkit-animation-duration: 40s !important; -moz-animation-duration: 40s !important;}
.dot.unrevealed.veryslow {
  -webkit-animation: spin 40s infinite linear, ghost 6s infinite ease-in-out !important;
  -moz-animation: spin 40s infinite linear, ghost 6s infinite ease-in-out !important;
}

section#upcoming .delay1 { -webkit-animation-delay: 3s !important; -moz-animation-delay: 3s !important; }
section#upcoming .delay2 { -webkit-animation-delay: 4s !important; -moz-animation-delay: 4s !important; }
section#upcoming .delay3 { -webkit-animation-delay: 5s !important; -moz-animation-delay: 5s !important; }
section#upcoming .delay4 { -webkit-animation-delay: 6s !important; -moz-animation-delay: 6s !important; }
section#upcoming .delay5 { -webkit-animation-delay: 7s !important; -moz-animation-delay: 7s !important; }
section#upcoming .delay6 { -webkit-animation-delay: 8s !important; -moz-animation-delay: 8s !important; }
section#upcoming .delay7 { -webkit-animation-delay: 9s !important; -moz-animation-delay: 9s !important; }
section#upcoming .delay8 { -webkit-animation-delay: 10s !important; -moz-animation-delay: 10s !important; }
section#upcoming .delay9 { -webkit-animation-delay: 11s !important; -moz-animation-delay: 11s !important; }
section#upcoming .delay10 { -webkit-animation-delay: 12s !important; -moz-animation-delay: 12s !important; }
section#upcoming .delay11 { -webkit-animation-delay: 13s !important; -moz-animation-delay: 13s !important; }
section#upcoming .delay12 { -webkit-animation-delay: 14s !important; -moz-animation-delay: 14s !important; }
section#upcoming .delay13 { -webkit-animation-delay: 15s !important; -moz-animation-delay: 15s !important; }
section#upcoming .delay14 { -webkit-animation-delay: 16s !important; -moz-animation-delay: 16s !important; }
section#upcoming .delay15 { -webkit-animation-delay: 17s !important; -moz-animation-delay: 17s !important; }

.level1 {
  width: 206px;
  left: 193px;
}

.level2 {
  width: 290px;
  left: 150px;
}

.level3 {
  width: 330px;
  left: 130px;
}

.level4 {
  width: 400px;
  left: 95px;
}
input[name=game] { 
  display: none;
}

.box {
  position: absolute;
  pointer-events:none;
  width: 133px;
  opacity: 0;
//  border: 1px solid #F00;
  background-image:url('/library/upcoming/images/preview-box.png');
	background-repeat:no-repeat;
	-webkit-animation: spinrev 12s infinite linear;
	-moz-animation: spinrev 12s infinite linear;
}

.box {
  height: 286px;
  left: -150px;
  top: -133px;
}

.line {
  position: absolute;
  pointer-events:none;
  width: 150px;
  height: 1px;
  left: -140px;
  top: 10px;
  z-index: 20;
  opacity: 0;
  background-color: #888;
}

input:checked ~ .box {
  opacity: 1 !important;
  z-index: 50 !important;
}

input:checked ~ .box img {
    pointer-events:auto;
}

input:checked ~ .box {
  pointer-events:none;
}

input:checked ~ .line {
  opacity: 1 !important;
}

h2 {
	font-family: Helvetica, sans-serf;
	font-size: 10px;
	font-weight: bold;
	line-height: 23px;
	color: #E7E7E7;
	text-transform: uppercase;
	margin-top: 5px;
}

#upcoming {
	position: relative; /* We'll use this for absolute layouts. Maybe. */
	margin-top: 0px;
	background-image:url("/library/store/images/gradient1px.png");
	background-position:top;
	background-repeat:repeat-x;
	height: 530px;
	-webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
}

#upcoming_radar {
	position: absolute;
  top: 217px;
  left: 99px;
  pointer-events:none;
	-webkit-animation: grow 1s ease-out;
	-moz-animation: grow 1s ease-out;
}

.box img {
  position: absolute;
  left: 10px;
  top: 10px;
  width: 112px;
  height: 83px;
}

p.game {
  position: absolute;
  left: 10px;
  top: 100px;
  width: 112px;
	height: 25px;
	padding: 0px;
	font-family: Helvetica, sans-serif;
	text-align: center;
	font-size:10px;
	font-weight: bold;
	color: #939598;
	margin: 0px;
	text-transform: uppercase;
}

img#upcoming_circle_overlay, img#out_now_game_circle {
  position: absolute;
  top: 358px;
  left: 237px;
}

img#out_now_game_logo {
  position: absolute;
  top: 434px;
  left: 185px;
}

.fadein {
  -webkit-animation: fadein 1s 1s ease-out; 
  -moz-animation: fadein 1s 1s ease-out; 
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
}

.rotatein {
  -webkit-animation: rotatein 1s 1s ease-out; 
  -moz-animation: rotatein 1s 1s ease-out; 
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
}

.late {
  -webkit-animation-delay: 2s;
  -moz-animation-delay: 2s;
}

.later {
  -webkit-animation-delay: 3s;
  -moz-animation-delay: 3s;
}

#upcoming_vsoon, #upcoming_soon, #upcoming_qsoon, #upcoming_outnow {
	position: absolute;
	height: 11px;
	padding: 0px;
	text-align: right;
	width: 65px;
}

figure {
  position: absolute;
  top: 420px;
	left: -36px;
}

figure img {
  position: absolute;
  left: 72px;
  top: 2px;
  pointer-events:none;
}

figcaption {
	font-family: Helvetica, sans-serif;
	font-size:9px;
	color: #939598;
	margin: 0px;
	text-transform: uppercase;
	font-weight: bold;
}
figcaption ol {
  list-style: none;
}
#upcoming_outnow {
	top: 57px;
	left: 0px;
}
#upcoming_vsoon {
	top: 35px;
	left: 3px;
}
#upcoming_soon {
	top: 15px;
	left: 8px;
}
#upcoming_qsoon {
	top: -5px;
	left: 23px;
}

p#upgrade {
  -webkit-animation: fadeout 0.1s ease-out; 
}

a img {
	border: 0px;
}