/*07.11.12*/
.page-info-template .main{
	margin:0;
}

#the-footer{
	padding-top: 50px;
}

.ss-container{
    width: 100%;
    position: relative;
    text-align: left;
/*    float: left;*/
	overflow:hidden;
/*	top:31px;*/
}

.ss-container h2{
    font-size: 40px;
    text-transform: uppercase;
    color: rgba(78,84,123,0.2);
	text-shadow: 0px 1px 1px #fff;
	padding: 20px 0px;
}
.ss-container:before{
    position: absolute;
    width: 2px;
    /*background: rgba(255,255,255,0.8);*/
    top: 0px;
    left: 50%;
	margin-left: 13px;
    content: '';
    height: 100%;
}
.ss-row{
    width: 100%;
    clear: both;
    float: left;
    position: relative;
    padding: 30px 0;
}
.ss-left, .ss-right{
    float: left;
    width: 48%;
    position: relative;
    height: 100px;
}
.ss-right{
    padding-left: 2%;
}
.ss-left{
    text-align: right;
    float: left;
    padding-right: 2%;
}

.ss-container h3 a{
    font-size: 28px;
    color: rgba(255,255,255,0.9);
    display: block;
}
.ss-container h3 a:hover{
	color: rgba(255,255,255,1);
}

/**/
#ss-container h2 {
	font-family: 'TrajanProBold';
	margin: 50px 0 0;
}
#ss-container h4 {
	background: url("bg-titile-might-magic.png") no-repeat scroll 0 0 transparent;
    cursor: pointer;
    display: inline-block;
    height: 35px;
    margin: 0 !important;
    padding: 0 0 0 40px;
}
#ss-container .ss-left h4{
	position: relative;
	left:-26px;
}
#ss-container h4 span{
	display: inline-block;
	height: 35px;
	padding: 0 15px 0 0;
	color:#fff;
	font-family: 'Trebuchet MS', Arial;
	text-transform: uppercase;
	float: left;
	line-height: 26px;
	font-weight:normal;
	font-size: 12px;
}
#ss-container h4 .bg{
	background: url(bg-titile-might-magic.png) no-repeat 100% 0;
	margin-right: -29px;
    width: 14px;
}
#ss-container  .active h4,
#ss-container h4:hover {
	background-position: 0 100%;
}
#ss-container  .active h4 .bg,
#ss-container  h4:hover .bg{
	background-position: 100% 100%;
}
.redCircle {
	background: url("redCircle.png") no-repeat scroll 0 0 transparent;
    display: block;
    height: 27px;
    position: absolute;
    top: 4px;
    width: 28px;
    cursor:pointer;
    z-index: 19;
}
.ss-right .redCircle {
	 left: -14px;
}
.ss-left .redCircle {
	right: -14px;
	top:1px;
}
#ss-container .detail{
	display:none;
	width: 480px;
	text-align: center;
	position: absolute;
	font-size: 11px;
	font-family: "MS Trebuchet", Arial;
	z-index: 1;
}
#ss-container .detail p{
	margin:0;
}
#ss-container .detail p{
	padding:5px 0 10px;
}
#ss-container .detail .detail_inside {
	padding: 0 40px 20px;
	font-size: 12px;
}
#ss-container .detail h5{
	text-align: center;
	font-family: 'TrajanProBold';
	color:#570c03;
	font-size: 24px;
	padding: 20px 25px 10px;
	margin:8px 0 10px;
	font-weight: normal;
}
#ss-container .age {
	/*height:1000px;*/
	position: relative;
	/*overflow: hidden;*/
}
#ss-container .ss-left .detail {
	right: 27px;
	top:25px;
}
#ss-container .ss-right .detail {
	left: 20px;
	top:25px;
}
#ss-container .ss-medium.last {
	top:500px;
}
#ss-container .ss-medium.first {
	top:-8px;
}
#ss-container .ss-medium.last .detail{
	top: -200px;
}
#ss-container h2 .big {
	font-size:54px;
}
.ss-left, .ss-right {
	min-height: 100px;
}
.wrapTimeline {
	width: 100%;
	position: absolute;
	height:760px;
	top: 500px;
}
.timeline {
	width:2px;
	background: url(bg-timeline.png) repeat-y 0 0;
	height:720px;
	position: absolute;
	left:50%;
	margin-left:-1px; 
	top:0;
}
.nav {
	width: 63px;
	height: 66px;
	background: url(btn-nav-2.png) no-repeat 0 0;
	position: fixed;
	left:50%;
	top: 305px;
	margin-left: -31px;
	display:none;
	z-index: 20;
/*	opacity:0.5;
	filter: alpha(opacity=50);*/
}
.nav img{
	position: absolute;
	z-index: 1;
	display: block;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
}
.nav a{
	display: block;
	height: 25px;
    width: 61px;
    position: relative;
    z-index: 2;
}
.nav a:hover{
	text-decoration: none;
}
.nav .up{
	/*background: url(arrow-top.png) no-repeat 50% 50%;*/
	border-radius: 50px 50px 0 0px;
    margin: 4px 0 0;
} 
.nav .down{
	/*background: url(arrow-down.png) no-repeat 50% 50%;*/
	border-radius: 0 0 50px 50px;
}
.ss-medium {
	height: 90px;
	padding:0;
}

/**/
#age1 .visu,
#age1 {
	height: 965px;
}
#age2 .visu, 
#age2 {
	height: 895px;
}
#age3 .visu,
#age3 {
	height: 1079px;
}
#age4 .visu,
#age4 {
	height: 951px;
}
#age5 .visu,
#age5 {
	height: 988px;
}
#age6 .visu,
#age6 {
	height: 1080px;
}

#age6 .timeline{
	height: 290px;
}

#age7 .visu,
#age7 {
	height: 985px;
}

#age7 .timeline{
	height: 290px;
}

#age8 .visu,
#age8 {
	height: 957px;
}
.visu.color {
	opacity:0;
} 

/* CSS Page game history */
.wrapper {
	width: inherit !important;
}
/**/

.history-timeline #loader {
	display: block;
	position: absolute;
	top: 0;
	left:0;
	width: 100%;
	height: 100%;
	background: #000;
	z-index: 20;
	width: 100%;
	height:7880px;
}
.history-timeline .content {
   /* margin: 0 auto;
    padding-top: 365px;
    width: 800px;*/
	width:60px;
	height:70px;
	margin:400px auto 0;
	position:relative;
	background: url(moon.png) no-repeat;
	
}
.history-timeline .content .rotating-layer {
	position:absolute;
	left: -9px;
	top: -10px;
	width:63px;
	height:56px;
	background: url(loader.png) no-repeat;
	-moz-animation:spinoffPulse 1s infinite linear;
	-webkit-animation:spinoffPulse 1s infinite linear;
	/*-ms-animation:spinoffPulse 1s infinite linear;*/
	-o-animation:spinoffPulse 1s infinite linear;
	animation:spinoffPulse 1s infinite linear;
	
	-moz-transform-origin: 53% 53%;
	-webkit-transform-origin: 53% 53%;
	/*-ms-transform-origin: 53% 53%;*/
	-o-transform-origin: 53% 53%;
	transform-origin: 53% 53%;
	  -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=0, M21=0, M22=1, SizingMethod='auto expand')";
}
@-moz-keyframes spinPulse {
	0% { -moz-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #840003;}
	50% { -moz-transform:rotate(145deg); opacity:1; }
	100% { -moz-transform:rotate(-320deg); opacity:0; }
}
@-moz-keyframes spinoffPulse {
	0% { -moz-transform:rotate(0deg); }
	100% { -moz-transform:rotate(360deg); }
}
@-webkit-keyframes spinPulse {
	0% { -webkit-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #840003; }
	50% { -webkit-transform:rotate(145deg); opacity:1;}
	100% { -webkit-transform:rotate(-320deg); opacity:0; }
}
@-webkit-keyframes spinoffPulse {
	0% { -webkit-transform:rotate(0deg); }
	100% { -webkit-transform:rotate(360deg); }
} 

/**/
.history-timeline {
	height: 7880px;
}
.history-timeline .inside {
	width:100%;height:7950px;
}
.history-timeline .fond {
	position: relative;
	background: url(Back.jpg) repeat 0 0;
	width:100%;
	height:7930px;
	overflow:hidden;
}
.fond .age .visu {
	width: 100%;
	position:absolute;
}
h1 {
	padding-top:0;
	top:-50px;
}

.age h3{
	font-family: 'TrajanProBold';
	font-size: 54px;
	position: absolute;
	width: 100%;
	text-align: center;
	top: 400px;
	left: 0;
	padding: 90px 0 0;
	line-height: 38px;
	margin: 13px 0 6px;
}
.age h3 span{
	font-size: 24px;
	font-family: 'TrajanProBold';
	display: block;
}
.age h3 .color {
	color: #6e1717;
	text-shadow: 0px 0px 9px #777;
}
.age h3 .gradient,
.age h3 .color
{
	font-weight: normal;
}
.age h3 .gradient {
	color: #A82C2C;
	text-shadow: 0px 0px 9px #777;
	position: relative;
}
.age h3 .gradient::after {
	content: attr(data-text);
	position: absolute;
	left: 0;
	color: #7A1C1C;
	-webkit-mask-image: -webkit-gradient( linear, left bottom,left top,  from(rgba(84,12,12,1)), to(rgba(84,12,12,0)) );
}
.page-info-template .branding h1 a {
	left:50%;
	margin-left:-83px;
}
#age2 .ss-row {
	height:200px;
}
#age1 .ss-medium.last {
	top:517px;
}
#age8 .ss-row {

}
#age8 .timeline {
	height:635px;
}
#age8 .ss-medium.last {
	top:175px;
}
#age8 .wrapTimeline{
/*	height:;*/
}
#age2 .ss-row {
	height:90px;
}
#age2 .ss-medium.last {
	top:-9px;
}
#age3 .ss-row {
	height:48px;
}
#age3 .ss-medium.last {
	top:-5px;
}
#age4 .ss-row {
	height:174px;
}
#age4 .ss-medium.last {
	top:15px;
}
#age5 .ss-row {
	height:174px;
}
#age5 .ss-medium.last {
	top:15px;
}
#age7 .ss-medium.last{
	top:609px;
}
#age6 .ss-medium.last {
	top: -5px;
}
#age8 .ss-medium.last .detail .close-parchemin {
	top: 24px;
}
.footer_detail {
	width: 100%;
	height: 9px;
}
.detail .close-parchemin{
	display:block;
	width:12px;
	height:11px;
	position:absolute;
	right: 17px;
	top: 20px;
	font-size:0;
	text-indent:-9999px;
	background:url(close.png) no-repeat;
}
.detail .close-parchemin:hover {
	-moz-transform:scale(1.2); /*firefox*/
	-webkit-transform:scale(1.2); /*Chrome, Safari*/
	-o-transform:scale(1.2); /*Opera*/
	transform:scale(1.2); /*standard*/
}
#ss-container .ss-medium.beforeLast .detail {
	top:-100px;
}