.header{
	position: fixed;
	top: 0;
	left: 5vmin;
	width: 100%;
	height: 14vmin;
	z-index: 800;
    background: linear-gradient(to bottom, #003, #222);
}
.logoImg{
	width: 9vmin;
	height: 9vmin;
}
.title{
	color: #fc6;
	font-size: 5vmin;
	text-decoration: none;
}
.accountProgress{
	position: fixed;
    top: 9vmin;
    left: 40vmin;
	height: 3vmin;
    color: #fff;
	font-size: 2.5vmin;
}
.shareButton{
	position: fixed;
    top: 9vmin;
    left: 63vmin;
	height: 3vmin;
    color: #fff;
    padding-left: 3vmin;
    font-size: 2.5vmin;
    background-image: url(../img/share.png);
    background-size: 3vmin;
    background-repeat: no-repeat;
	cursor: pointer;
}
.unshareButton{
	position: fixed;
    top: 9vmin;
    left: 63vmin;
	height: 3vmin;
    color: #fff;
    padding-left: 3vmin;
    font-size: 2.5vmin;
    background-image: url(../img/unshare.png);
    background-size: 3vmin;
    background-repeat: no-repeat;
	cursor: pointer;
}
.shareLink{
	position: fixed;
    top: 9vmin;
    left: 80vmin;
	height: 3vmin;
    color: #fff;
    padding-left: 3vmin;
    font-size: 2vmin;
    background-image: url(../img/link.png);
    background-size: 3vmin;
    background-repeat: no-repeat;
	cursor: pointer;
	text-decoration: none;
}
.namebox{
	background-image: url(../img/namebox_l.png);
	background-repeat: no-repeat;
	background-size: 15px 100%;
	padding-left: 15px;
}
.namebox_r{
	display: inline-block;
    background-image: url(../img/namebox_r.png);
	background-repeat: no-repeat;
	background-size: 10px 100%;
	background-position: right;
	padding-right: 10px;
}
.acocuntName{
	padding-left:1vmin;
	width: 30vmin;
	border-width: 0;
	font-size: 3vmin;
	color: #fff;
	background-color: transparent;
	background-image: url(../img/namebox_c.png);
	background-size: auto 100%;
}
.userProfileImg{
	position:fixed;
	top: 1vmin;
	left: 89vmin;
	width: 10vmin;
	height: 10vmin;
	border-radius:50%;
	overflow:hidden;
	background-size: 100% 100%;
	z-index: 900;
	cursor: pointer;
}
.my-g-signin2{
	position:fixed;
	top: 1vmin;
	left: 80vmin;
	z-index: 900;
}
.accountSelector{
	position: fixed;
	top: 0;
	left: 0;
	width: 5vmin;
	z-index: 900;
}
.accountSelectorItem{
	width: 5vmin;
	height: 20vh;
	color: #fff;
	font-size: 4vmin;
	font-weight: bold;
	vertical-align: middle;
	line-height: 20vh; 
	cursor: pointer;
	background: linear-gradient(to bottom right, #666, #333)
}
.accountSelectorItemActive{
	background: linear-gradient(to bottom right, #0f0, #3c3, #060);
}
.menuContainer{
	position: fixed;
	top: 14vmin;
	left: 86vmin;
	width: 10vmin;
	z-index: 900;
}
.menuItem{
	width: 12vmin;
	text-align: center;
	border: 2px solid #666;
	border-radius: 5px;
	margin-top: 1vmin;
	margin-bottom: 1vmin;
	padding-top: 1vmin;
	padding-bottom: 1vmin;
	color: #fff;
	font-size: 4vmin;
	font-weight: bold;
	cursor: pointer;
	background: linear-gradient(to bottom, #666, #333)
}

.menuItemActive{
	background: linear-gradient(to bottom, #0f0, #3c3, #060)
}
.elementSelector{
	width: 64vmin;
	position: fixed;
	left: 5vmin;
	top: 14vmin;
	height: 13vmin;
	z-index: 800;
	background-image: linear-gradient(to bottom, #222, #222, #222, #222, #222, rgba(34,34,34,0.5));
}
.elementSelectorItem{
	display: inline-block;
	margin-left: 1.4vmin;
	margin-right: 1.4vmin;
	padding-top: 1vmin;
	padding-bottom: 1vmin;
	border-width: 0 0 2px 0;
	border-style: solid;
	border-image: linear-gradient(to right, transparent, #cff, transparent) 100% 1;
	cursor: pointer;
}
.elementSelectorItemInactive{
	filter: grayscale(100%);
	border-bottom: 2px solid transparent;
	border-image: 0;
}
.elementImg{
	width: 10vmin;
	height: 10vmin;
 }
.raritySelector{
	width: 17vmin;
	position: fixed;
	left: 69vmin;
	top: 14vmin;
	height: 13vmin;
	z-index: 800;
	background-image: linear-gradient(to bottom, #222, #222, #222, #222, #222, rgba(34,34,34,0.5));	
}
.raritySelectorItem{
	width: 100%;
	color: #666;
	font-size: 4vmin;
	font-weight: bold;
	text-align: center;
	cursor: pointer;
}
.raritySelectorItemActive{
	color: #FC6;
}
.monsterContainer{
	width: 80vmin;
	left: 5vmin;
	position: relative;
}
.monsterItem {
	position: relative;
	background-repeat: no-repeat;
	height: 16vmin;
	width: 16vmin;
	float: left;
	cursor: pointer;
}

.monsterItemBg{
	width: 14vmin;
	height: 14vmin;
	background-size: cover;
	background-image: url('../img/bg_rb.gif');
	margin: 1vmin;
}
.noBg{
	background: none !important;
}
.monsterItemFramefire{
	width: 14vmin;
	height: 14vmin;
	background-size: cover;
	background-image: url('../img/f_fire.png');
}
.monsterItemFramewater{
	width: 14vmin;
	height: 14vmin;
	background-size: cover;
	background-image: url('../img/f_water.png');
}
.monsterItemFramewood{
	width: 14vmin;
	height: 14vmin;
	background-size: cover;
	background-image: url('../img/f_wood.png');
}
.monsterItemFramelight{
	width: 14vmin;
	height: 14vmin;
	background-size: cover;
	background-image: url('../img/f_light.png');
}
.monsterItemFramedark{
	width: 14vmin;
	height: 14vmin;
	background-size: cover;
	background-image: url('../img/f_dark.png');
}
.monsterItemImg{
	width: 14vmin;
	height: 14vmin;
}
.grayout {
	filter: grayscale(30%) brightness(65%)
}
.luck {
	position: absolute;
	bottom: 0;
	right: 0;
	color: #0f0;
	font-size: 4vmin;
	font-weight: bold;
	text-shadow: 2px 2px 0 #FFF,
		-2px 2px 0 #FFF,
		2px 1px 0 #FFF,
		-2px 1px 0 #FFF,
		2px 0 0 #FFF,
		-2px 0 0 #FFF,
		2px -1px 0 #FFF,
		-2px -1px 0 #FFF,
		2px -2px 0 #FFF,
		-2px -2px 0 #FFF,
		1px 2px 0 #FFF,
		0 2px 0 #FFF,
		-1px 2px 0 #FFF,
		1px -2px 0 #FFF,
		0 -2px 0 #FFF,
		-1px -2px 0 #FFF;
	cursor: pointer;
	margin: 1vmin;
}
.noluck{
	color: #f99;
	cursor: pointer;
	margin: 1vmin;
}
.luckImg{
	width: 4vmin;
	height: 4vmin;
}
img {
	vertical-align: text-bottom;
}
ul {
	list-style-type: none;
	padding: 0px;
	margin: 0px;
}
body {
	font-family: "Helvetica", "Microsoft Yahei";
	background-color: #222 !important;
	padding-top: 25vmin;
}