@import url(http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600);

* {
    border: 0;
    margin: 0;
    padding: 0;
    outline: 0
}

html {
    webkit-font-smoothing: antialiased;
    background: #000 url(../img/emeraldas_bg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

html,body {
    width: 100%;
    height: 100%;
    overflow: hidden;
   -moz-user-select: -moz-none;
   -khtml-user-select: none;
   -webkit-user-select: none;
   -o-user-select: none;
   user-select: none;

}

#holder2 {
    width: 39%;
    height: 100%;
    position:relative;
    float:left;
}

#stretch{
    width:100%;
    height:100%;
    opacity:0.85;
}

#wrap-content {
    position: fixed;
    z-index: 10;
    width: 523px;
    height: 660px;
    bottom: 0;
}

#content {
    background: #000;
    height: 100%;
    width: 340px;
    position:relative;
    float:left;
    background: rgb(0,0,0);
    background: rgba(0,0,0,0.5);
    -webkit-box-shadow: 0 4px 10px 2px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 4px 10px 2px rgba(0, 0, 0, 0.3);
    box-shadow: 0 4px 10px 2px rgba(0, 0, 0, 0.3);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter:alpha(opacity=50);
}

#eternal-emblem{
	display:block; 
	margin:20px auto;
}

.content{
	color: #fff;
	width:280px;
	height:100%;
	position:absolute;
	padding:30px;
	padding-top:0;
	opacity:0;
	padding-bottom:120px;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter:alpha(opacity=0);
} 

.content img{
	border-radius:2px;
}

.content .center{
	text-align:center;
}

body {
	font-family: 'Open Sans', Helvetica, "Tw Cen MT", Arial;
    font-size: 11px;
}

.overload{
	overflow:hidden;
	height:100%;
}

strong{
	font-weight:700;
}

em{
	font-style:italic;
}

#player
{
	right: -135px;
	position: absolute;
	top: 70px;
}

#menu {
    z-index: 12;
    font-size: 12px;
    color: #fff;
    top: 100px;
    width: 280px;
    right: -280px;
    position: absolute;
}

#menu li {
    position:relative;
}
#menu li .circle-menu {
    cursor: pointer;
    height:80px;
    width:80px;
    margin: 20px 0;
    margin-left:20px;
    font-size:13px;
    text-align: right;
    opacity:0.9;
    border-radius: 50%;
    -webkit-transition: all .4s ease-in;
    -moz-transition: all .4s ease-in;
    -o-transition: all .4s ease-in;
    transition: all .4s ease-in;
    -webkit-box-shadow: 0px 2px 5px rgba(0,0,0,0.7) inset, 0px 0px 0px 5px rgba(0,0,0,0.4);
    -moz-box-shadow: 0px 2px 5px rgba(0,0,0,0.7) inset, 0px 0px 0px 5px rgba(0,0,0,0.4);
    box-shadow: 0px 2px 5px rgba(0,0,0,0.7) inset, 0px 0px 0px 5px rgba(0,0,0,0.4);
    background-size: cover;
    background-color: #f0f0f0;
    background-repeat: no-repeat;
    background-position: center center;
    position: static;
}

#menu li p{
	position:absolute;
	display:block;
	width:auto;
	font-size:13px;
	padding:2px 4px;
	background:rgba(0,0,0,0.4);
	border-radius:5px;
	text-align:right;
	left:100px;
	top:0px;
}

#queen-emeraldas .circle-menu{
    background-image: url(../img/emeraldas-menu.jpg);
}
#metanoid .circle-menu{
    background-image: url(../img/metanoid-menu.jpg);
}
#intineraires .circle-menu{
    background-image: url(../img/destinies-menu.jpg);
}
#promesse .circle-menu{
    background-image: url(../img/promesses-menu.jpg);
}
#cosmoguns .circle-menu{
    background-image: url(../img/cosmoguns-menu.jpg);
}


#menu li .circle-menu:hover {
    opacity:1;
    -moz-transform: scale(1.2);
    -webkit-transform: scale(1.2);
}

#copyright{
	color:#fff;
	bottom:5px;
	right:10px;
	font-size:10px;
	position:absolute;
	text-align:right;
}

#copyright a{
	color:#fff;
}