:root {
--color_1: #080913;
--color_2: #EBE1C1;
--color_3: #7a5454;
}

@font-face {
  font-family: Noto Sans;
  src: url(files/NotoSans.ttf);
}

/* default */
body { 
	background-color: var(--color_1);
	background-image:url(images/bg.png);
	background-repeat:no-repeat;
	background-attachment: fixed;
	
	color:var(--color_2);
	margin:0;
	font-family:"Noto Sans", sans-serif;
	font-size:13px;
	text-align: center;
	min-width: 94%;
	min-height: 1100px;
}

a { color:var(--color_3); text-decoration: none;}
a:hover { color:var(--color_3); }

hr { 
	height:1px;
	border:none;
	color:#513D1C;
	background-color:#513D1C;
	width:70%;
	text-align:center;
	margin: 1 auto;
}

/* head menu */

#head { background-image:url(images/head.png); min-width:100%; height:50px; position:fixed; }

#head .logo {
	width:200px;
	height:61px;
	background-image:url(images/logo.png);
	background-repeat:no-repeat;
	position:absolute;
	top:10px;
	left:36px;
	cursor:pointer;
}

#hnav { 
	text-align:left;
	position:absolute;
	height:50px;
	width:1030px;
	color: #7a7a7a;
	font-weight:bold;
	font-size:15px;
	margin-left: 230px;
}
#hnav a { font-weight:normal; color: #7a7a7a; }
#hnav a:hover { color:#CC6699; }
#hnav li { display:inline-block; padding:0px 12px; }
#hnav ul { list-style-type:none; padding-left:15px; }
#main_div { min-height: 1100px; padding-top: 50px; } 


#level_bar 
{
	text-align:left;
	padding-left: 30px;
	background:rgba(42,18,25,0.5);
	border-top: 1px solid #34151D;
	border-bottom: 1px solid #34151D;
	width:6950px;
	height:51px;
}

#info_bar
{
	top: 90%;
	left: 15%;
	position: fixed;
	width:70%;
	padding: 14px 8px;
	white-space: nowrap; 
	z-index: 5;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	-moz-box-shadow: 0px 0px 4px #0E0E17;
	-webkit-box-shadow: 0px 0px 4px #0E0E17;
	box-shadow: 0px 0px 4px #0E0E17;
	background-color:#12121E;
	color: #916265;
    z-index: 999;
	display: none;
}

.level
{
	position: relative;
	top: 5px;
}

.bar_item_unique
{
	width: 58px;
	height: 65px;
	background:rgba(42,18,25,0.9);
	display:inline-block;
	opacity: 0.6;
	font-size:9px;
	text-align:center;
	position: relative;
}
.bar_item_unique:hover { opacity: 1.0; }
.bar_item_unique > * { background-position:4px 2px; margin-left: auto; margin-right: auto; }
.bar_item_unique .level { top: 24px; }
	
.bar_item_big
{
	width: 33px;
	height: 45px;
	background:rgba(42,18,25,0.5);
	display:inline-block;
	opacity: 0.6;
	font-size:9px;
	text-align:center;
	position: relative;
	margin-left: auto;
	margin-right: auto;
}
.bar_item_big:hover { opacity: 1.0; } 
.bar_item_big > * { background-position:1px 1px; }

.bar_item_small
{
	width: 23px;
	height: 40px;
	background:rgba(42,18,25,0.5);
	display:inline-block;
	opacity: 0.6;
	font-size:9px;
	text-align:center;
	position: relative;
	margin-left: auto;
	margin-right: auto;
	vertical-align: top;
}
.bar_item_small:hover { opacity: 1.0; } 

.bar_item_small .level
{
	position: relative;
	top: 0px;
}
.sprite_mouse, .sound, .imgover, .icon { margin-left: auto;	margin-right: auto; position:relative; width:28px; height: 28px; background-color: transparent; border:none; background-repeat:no-repeat; }
.icon a { color:#000000; }
.sound .text,.icon .text {  margin-left: auto;	margin-right: auto; position: relative; font-size: 8px; top: 23px; left: 1px; text-align:center; color: #FAFEFD;  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; }
.icon.padding { vertical-align:bottom; display: inline-block; padding:1px 0px 0px 0px;}

.ItemInfo  { text-align: left;  display: none; position:absolute; top:0px; left:0px; width:280px;	background-image: url(images/collection_bg.png); background-repeat:no-repeat; background-color:#12121E; z-index: 1; border-radius: 8px; border: 1px solid #0E0E17; box-shadow: 0px 0px 36px rgba(0,0,0,0.3);}
.ItemInfo .collection { position:absolute; top:11px; left:10px; width:75px; height:100px; background-repeat:no-repeat; background-color:transparent; }
.ItemInfo .title { position:absolute; top:3px; left:86px; width:185px; height:14px; padding-left:4px; padding-top:6px; font-size:12px; text-shadow:1px 1px 0px #1C2341; white-space:nowrap; }
.ItemInfo .description { text-align:left; position:absolute; top:35px; left:100px; line-height:18px; width:170px; color: #916265; }

.ItemInfo .subtitle { color: #CF4986; }
.ItemInfo .color0 	{ color: #55BEC0; }
.ItemInfo .color1 	{ color: #F54952; }
.ItemInfo .color2	{ color: #589977; }
.ItemInfo .color3 	{ color: #341671; }
.ItemInfo .color4 	{ color: #CB87E4; }

.ImgInfo  { display: none; position:absolute; width:70px; height: 90px; background-repeat:no-repeat; background-size: contain; background-position: center;}
.SprInfo  { display: none; position:absolute; width:140px; height: 140px; background-repeat:no-repeat;}
.sound { background-image: url(images/playbutton.png); }

.bar_item_small > * {  vertical-align: top; background-size: 100% 100%; width:18px;  height: 18px;}
/* panels */
.txt_title {
	font-size:27px;
	font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    line-height: 100%;
	color: #fff;
    text-shadow: 0px 0px 16px #f54952;
	padding-top: 20px;
	padding-bottom: 20px;
}

.txt_subtitle {
	color: #F8E8B9;
	font-size: 17px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    line-height: 100%;
	box-sizing: border-box;
}

.txt_normal {
	font-size:15px;
	width: 70vw;
    max-width: 700px;
	color: #EBEAEB;
	text-shadow: 0px 2px 1px rgba(0,0,0,0.8);
	font-weight: 500;
    line-height: 164%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
	padding: 27px;
}