body{
  margin:0;
  padding:0;
  font-family:Verdana, Arial, Helvetica, sans-serif;
  background-color: #1f283e;
  font-size:100%;

}

#flipWindow{
  width:502px; /* 502px */
  height:auto;
  margin:0px auto;

}

nav{
  position:relative;
  float:left;
  width:482px; /* 482px */
  height:482px;/* 482px */
  background-color:#fff;
  border:1px solid #222;
  border-left:10px solid #222;
  border-right:10px solid #222;
  box-shadow:inset 0 0 10px hsla(0,0%,100%,0.2),0 0 40px #fff;
  margin-bottom:10%;
  margin-top:12.5%;
  border-radius:5px;

}

nav ul{
  margin:0;
  padding:0;
  list-style:none;

}

nav ul li{
  position:relative;
  float:left;
  margin-left:20px;
  line-height:40px;

}

nav ul li a{
  text-decoration:none;
  color:#000;
  font-size:14px;

}

#notice{
  position:absolute;
  right:10px;
  bottom:10px;

}

#notice a, #author a{
  color:#fff;

}

#author{
  position:absolute;
  left:10px;
  bottom:10px;

}

/* used css for cube */

#browsersupport{
  -webkit-transform-style:preserve-3d;
  -moz-transform-style:preserve-3d;
  -ms-transform-style:preserve-3d;
  -o-transform-style:preserve-3d;
  transform-style:preserve-3d;
  -webkit-animation-name:test;
  -moz-animation-name:test;
  -ms-animation-name:test;
  -o-animation-name:test;
  animation-name:test;

}

#stage{
  position:relative;
  float:left;
  overflow:visible;
  margin:0px auto;
  width:500px; /* 500px */
  height:500px; /* 500px */

}

.oldbrowser-stage{
  overflow:hidden !important;

}

#cube{
  overflow:visible;
  position:absolute;

}

#cube div{
  position:absolute;
  width:418px; /* 418px */
  height:418px; /* 418px */
  padding:40px;
  color:#333;
  border:1px solid #666;
  box-shadow:inset 0 0 50px rgba(0,0,0,0.4);
  text-align:left;
  font-size:16px;
  line-height:22px;

}

#cube #first.modernbrowser-first{
  -webkit-transform:translateZ(250px);
  -moz-transform:translateZ(250px);
  -ms-transform:translateZ(250px);
  -o-transform:translateZ(250px);
  transform:translateZ(250px);
  z-index:100;

}

#cube #next.modernbrowser-next{
  -webkit-transform:rotateY(90deg) translateZ(250px);
  -moz-transform:rotateY(90deg) translateZ(250px);
  -ms-transform:rotateY(90deg) translateZ(250px);
  -o-transform:rotateY(90deg) translateZ(250px);
  transform:rotateY(90deg) translateZ(250px);

}

#cube #pre.modernbrowser-pre{
  -webkit-transform:rotateY(-90deg) translateZ(250px);
  -moz-transform:rotateY(-90deg) translateZ(250px);
  -ms-transform:rotateY(-90deg) translateZ(250px);
  -o-transform:rotateY(-90deg) translateZ(250px);
  transform:rotateY(-90deg) translateZ(250px);

}

#cube #first.oldbrowser-first{}

#cube #next.oldbrowser-next{
  left:500px;

}

#cube #pre.oldbrowser-pre{
  left:-500px;

}

#pre,#next,#first{
  display:block;
  background-color:#fff;

}

.first{
  -webkit-animation:anifirst 0.5s ease 0s 1 normal;
  -moz-animation:anifirst 0.5s ease 0s 1 normal;
  -ms-animation:anifirst 0.5s ease 0s 1 normal;
  -o-animation:anifirst 0.5s ease 0s 1 normal;
  animation:anifirst 0.5s ease 0s 1 normal;

}

@-webkit-keyframes anifirst{
  0%{background:#fff;box-shadow:inset 0 0 50px rgba(0,0,0,0.4);}
  100%{background:#e4cc45;box-shadow:inset 0 0 0px rgba(0,0,0,0.4);}

}

@-moz-keyframes anifirst{
  0%{background:#fff;box-shadow:inset 0 0 50px rgba(0,0,0,0.4);}
  100%{background:#e4cc45;box-shadow:inset 0 0 0px rgba(0,0,0,0.4);}

}

@-ms-keyframes anifirst{
  0%{background:#fff;box-shadow:inset 0 0 50px rgba(0,0,0,0.4);}
  100%{background:#e4cc45;box-shadow:inset 0 0 0px rgba(0,0,0,0.4);}

}

@-o-keyframes anifirst{
  0%{background:#fff;box-shadow:inset 0 0 50px rgba(0,0,0,0.4);}
  100%{background:#e4cc45;box-shadow:inset 0 0 0px rgba(0,0,0,0.4);}

}

@keyframes anifirst{
  0%{background:#fff;box-shadow:inset 0 0 50px rgba(0,0,0,0.4);}
  100%{background:#e4cc45;box-shadow:inset 0 0 0px rgba(0,0,0,0.4);}

}

.prenext{
  -webkit-animation:aniside 0.5s ease 0s 1 normal;
  -moz-animation:aniside 0.5s ease 0s 1 normal;
  -ms-animation:aniside 0.5s ease 0s 1 normal;
  -o-animation:aniside 0.5s ease 0s 1 normal;
  animation:aniside 0.5s ease 0s 1 normal;

}

@-webkit-keyframes aniside{
  0%{background:#720b0b;box-shadow:inset 0 0 0px rgba(0,0,0,0.4);}
  100%{background:#fff;box-shadow:inset 0 0 50px rgba(0,0,0,0.4);}

}

@-moz-keyframes aniside{
  0%{background:#720b0b;box-shadow:inset 0 0 0px rgba(0,0,0,0.4);}
  100%{background:#fff;box-shadow:inset 0 0 50px rgba(0,0,0,0.4);}

}

@-ms-keyframes aniside{
  0%{background:#720b0b;box-shadow:inset 0 0 0px rgba(0,0,0,0.4);}
  100%{background:#fff;box-shadow:inset 0 0 50px rgba(0,0,0,0.4);}

}

@-o-keyframes aniside{
  0%{background:#720b0b;box-shadow:inset 0 0 0px rgba(0,0,0,0.4);}
  100%{background:#fff;box-shadow:inset 0 0 50px rgba(0,0,0,0.4);}

}

@keyframes aniside{
  0%{background:#720b0b;box-shadow:inset 0 0 0px rgba(0,0,0,0.4);}
  100%{background:#fff;box-shadow:inset 0 0 50px rgba(0,0,0,0.4);}

}

/* keep these 'animation-llets' seperate no CONGLOMERATES ... e.g. 'animation: var ease-out 1s;' */
.animation,.animation2,.animation-flat,.animation2-flat{
  -webkit-animation-timing-function:ease-out;
  -moz-animation-timing-function:ease-out;
  -ms-animation-timing-function:ease-out;
  -o-animation-timing-function:ease-out;
  animation-timing-function:ease-out;
  -webkit-animation-iteration-count:1;
  -moz-animation-iteration-count:1;
  -ms-animation-iteration-count:1;
  -o-animation-iteration-count:1;
  animation-iteration-count:1;
  -webkit-animation-duration:0.5s;
  -moz-animation-duration:0.5s;  
  -ms-animation-duration:0.5s;
  -o-animation-duration:0.5s;
  animation-duration:0.5s;
  -webkit-transform-style:preserve-3d;
  -moz-transform-style:preserve-3d;
  -ms-transform-style:preserve-3d;
  -o-transform-style:preserve-3d;
  transform-style:preserve-3d;
 -webkit-transform-origin:250px 250px 0;
 -moz-transform-origin:250px 250px 0;
 -ms-transform-origin:250px 250px 0;
 -o-transform-origin:250px 250px 0;
 transform-origin:250px 250px 0;
 color:#000;

}

.animation{
  -webkit-animation-name:nextimg;
  -moz-animation-name:nextimg;
  -ms-animation-name:nextimg;
  -o-animation-name:nextimg;
  animation-name:nextimg;

}

.animation2{
  -webkit-animation-name:preimg;
  -moz-animation-name:preimg;
  -ms-animation-name:preimg;
  -o-animation-name:preimg;
  animation-name:preimg;

}

.animation-flat{
  -webkit-animation-name:nextimg-flat;
  -moz-animation-name:nextimg-flat;
  -ms-animation-name:nextimg-flat;
  -o-animation-name:nextimg-flat;
  animation-name:nextimg-flat;

}

.animation2-flat{
  -webkit-animation-name:preimg-flat;
  -moz-animation-name:preimg-flat;
  -ms-animation-name:preimg-flat;
  -o-animation-name:preimg-flat;
  animation-name:preimg-flat;

}

@-webkit-keyframes nextimg{
  0%{-webkit-transform:rotateY(0deg);}
  100%{-webkit-transform:rotateY(-90deg);}

}

@-moz-keyframes nextimg{
  0%{-moz-transform:rotateY(0deg);}
  100%{-moz-transform:rotateY(-90deg);}

}

@-ms-keyframes nextimg{
  0%{-ms-transform:rotateY(0deg);}
  100%{-ms-transform:rotateY(-90deg);}

}

@-o-keyframes nextimg{
  0%{-o-transform:rotateY(0deg);}
  100%{-o-transform:rotateY(-90deg);}

}

@keyframes nextimg{
  0%{transform:rotateY(0deg);}
  100%{transform:rotateY(-90deg);}

}

@-webkit-keyframes preimg{
  0%{-webkit-transform:rotateY(0deg);}
  100%{-webkit-transform:rotateY(90deg);}

}

@-moz-keyframes preimg{
  0%{-webkit-transform:rotateY(0deg);}
  100%{-webkit-transform:rotateY(90deg);}

}

@-ms-keyframes preimg{
  0%{-webkit-transform:rotateY(0deg);}
  100%{-webkit-transform:rotateY(90deg);}

}

@-o-keyframes preimg{
  0%{-webkit-transform:rotateY(0deg);}
  100%{-webkit-transform:rotateY(90deg);}

}

@keyframes preimg{
  0%{transform:rotateY(0deg);}
  100%{transform:rotateY(90deg);}

}

@-webkit-keyframes nextimg-flat{
  0%{left:0;}
  100%{left:-500px;}

}

@-moz-keyframes nextimg-flat{
  0%{left:0;}
  100%{left:-500px;}

}

@-ms-keyframes nextimg-flat{
  0%{left:0;}
  100%{left:-500px;}

}

@-o-keyframes nextimg-flat{
  0%{left:0;}
  100%{left:-500px;}

}

@keyframes nextimg-flat{
  0%{left:0;}
  100%{left:-500px;}

}

@-webkit-keyframes preimg-flat{
  0%{left:0;}
  100%{left:500px;}

}

@-moz-keyframes preimg-flat{
  0%{left:0;}
  100%{left:500px;}

}

@-ms-keyframes preimg-flat{
  0%{left:0;}
  100%{left:500px;}

}

@-o-keyframes preimg-flat{
  0%{left:0;}
  100%{left:500px;}

}

@keyframes preimg-flat{
  0%{left:0;}
  100%{left:500px;}

}

.contents{
  display:none;

}