@charset "utf-8";

#loading{
position:absolute;
left:50%;
top:50%;
margin-left:-50px;
}

.modal{
display:none;
position:fixed;
display:none;
z-index:9999;
top:50%;
left:50%;
width:760px;
height:420px;
margin:-280px 0 0 -380px;
padding:20px;
text-align:center;
}

.close_modal{
cursor:pointer;
}

.modal img{
box-shadow:#CCC 1px 1px 4px 1px;
}

.info{
color:#FFF;
float:left;
width:300px;
height:120px;
margin-left:10px;
margin-right:10px;
position:relative;
z-index:30;
box-shadow:#555 1px 1px 1px 1px;
}

#new{background:url(../img/new.jpg) no-repeat;}
#next{background:url(../img/next.jpg) no-repeat;}

.info p{
font-size:13px;
text-align:right;
margin-top:10px;
margin-right:18px;
}

.info ul{
height:76px;
width:270px;
margin-top:7px;
margin-left:12px;
overflow:auto;
}

.info li{
color:#FFF;
display:list-item;
list-style:inside;
margin-bottom:1px;
float:left;
margin-left:3px;
margin-right:5px;
}

.info li a{
color:#FFF;
}

.info li a:hover{color:#F69;}

.jspContainer{overflow:hidden;position:relative;}
.jspPane{position:absolute;}
.jspVerticalBar{position:absolute;top:0;right:0;width:7px;height:100%;}
.jspHorizontalBar{position:absolute;bottom:0;left:0;width:100%;height:10px;}
.jspTrack{background:#000;position:relative;}
.jspDrag{background:#FFF;position:relative;top:0;left:0;cursor:pointer;}
.jspHorizontalBar .jspTrack, .jspHorizontalBar .jspDrag{float:left;height:100%;}

#blog{
position:relative;
float:left;
z-index:10;
}

#blog a{
float:left;
width:130px;
height:120px;
}

.rollover{
position:relative;
width:130px;
height:120px;
display:block;}

.front{z-index:2;position:absolute;}
.back{z-index:1;position:absolute;}

.rollover:hover .back,
.rollover:focus .back{z-index:2;}
.rollover:hover .front,
.rollover:focus .front{z-index:1;}

.fade .rollover .front{
opacity:1;
-webkit-transition:1s;
-moz-transition:1s;
-ms-transition:1s;
-o-transition:1s;
transition:1s;}

.fade .rollover .back{
opacity:0;
-webkit-transition:1s;
-moz-transition:1s;
-ms-transition:1s;
-o-transition:1s;
transition:1s;}

.fade .rollover:hover .front,
.fade .rollover:focus .front{opacity:0;}
.fade .rollover:hover .back,
.fade .rollover:focus .back{opacity:1;}

.flip .rollover{
-webkit-perspective:1600px;
-moz-perspective:1600px;
-ms-perspective:1600px;
-o-perspective:1600px;
perspective:1600px;}

.flip .cube{
width:130px;
height:120px;
-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:rotateX(0) rotateY(0) rotateZ(0);
-moz-transform:rotateX(0) rotateY(0) rotateZ(0);
-ms-transform:rotateX(0) rotateY(0) rotateZ(0);
-o-transform:rotateX(0) rotateY(0) rotateZ(0);
transform:rotateX(0) rotateY(0) rotateZ(0);
-webkit-transition:1s;
-moz-transition:1s;
-ms-transition:1s;
-o-transition:1s;
transition:1s;}

.flip .front{
-webkit-transform:translate3d(0,0,1px);
-moz-transform:translate3d(0,0,1px);
-ms-transform:translate3d(0,0,1px);
-o-transform:translate3d(0,0,1px);
transform:translate3d(0,0,1px);}

.flip .back{
-webkit-transform:rotateY(180deg) translate3d(0,0,0);
-moz-transform:rotateY(180deg) translate3d(0,0,0);
-ms-transform:rotateY(180deg) translate3d(0,0,0);
-o-transform:rotateY(180deg) translate3d(0,0,0);
transform:rotateY(180deg) translate3d(0,0,0);}

.flip .rollover:hover .cube,
.flip .rollover:focus .cube{
-webkit-transform:rotateY(180deg);
-moz-transform:rotateY(180deg); 
-ms-transform:rotateY(180deg);
-o-transform:rotateY(180deg);
transform:rotateY(180deg);}

.nananana .rollover:hover .front,
.nananana .rollover:focus .front{
background:transparent;
z-index:10;
-webkit-animation:batman 1s 2 alternate linear;
-moz-animation:batman 1s 2 alternate linear;
-ms-animation:batman 1s 2 alternate linear;
-o-animation:batman 1s 2 alternate linear;
animation:batman 1s 2 alternate linear;}

@-moz-keyframes batman{
0%{-moz-transform:scale(1,1) rotateZ(0);}
100%{-moz-transform:scale(0,0) rotateZ(720deg);opacity:0;}}

@-webkit-keyframes batman{
0%{-webkit-transform:scale(1,1) rotateZ(0);}
100%{-webkit-transform:scale(0,0) rotateZ(720deg);opacity:0;}}

@-ms-keyframes batman{
0%{-ms-transform:scale(1,1) rotateZ(0);}
100%{-ms-transform:scale(0,0) rotateZ(720deg); opacity:0;}}

@-o-keyframes batman{
0%{-o-transform:scale(1,1) rotateZ(0);}
100%{-o-transform:scale(0,0) rotateZ(720deg); opacity:0;}}

@keyframes batman{
0%{transform:scale(1,1) rotateZ(0);}
100%{transform:scale(0,0) rotateZ(720deg); opacity:0;}}

#main{
clear:both;
margin-left:-100px;
position:relative;
z-index:10;
}

#visual_position{
width:700px;
height:971px;
float:left;
margin-top:-30px;
border-radius:5px;
background:#FFF;
border:solid 7px #FF9;
}

#visual{
width:700px;
height:971px;
float:left;
position:relative;
z-index:10;
background:url(../img/visual.jpg) no-repeat;
border-radius:5px;
}

#countdown{
color:#F36;
width:70px;
font-size:50px;
clear:both;
position:absolute;
z-index:20;
text-align:center;
margin-top:795px;
margin-left:538px;
}

#topics{
float:right;
margin-top:50px;
margin-left:-127px;
}

#topics li{
width:200px;
height:100px;
margin-bottom:25px;
position:relative;
z-index:20;
box-shadow:#999 1px 1px 4px 1px;
-webkit-transform: rotate(2deg);
-moz-transform: rotate(2deg);}

#topics li a span{
width:200px;
height:100px;
position:absolute;
z-index:100;
}

#topics li a span img{
width:0px;
height:0px;
margin-left:200px;
position:absolute;
top:0;
right:0;
}