.showcharm {
z-index: 9; 
width:10px; 
height:100%; 
left:0px;
top:0px;
position:fixed;
}

.hidecharm0 {
z-index: 9; 
width:0px; 
height:0px; 
left:0px;
top:0px;
position:fixed;
}

.hidecharm1 {
z-index: 9; 
width:100%; 
height:100%; 
left:0px;
top:0px;
position:fixed;
}

.charmbar0 {
	background: #111111;
	width: 100px;
	z-index: 10;
	height: 100%;
	
	left: -100px;
	top: 0px;
	vertical-align: middle;
	display: table;
	-webkit-transition: all 400ms cubic-bezier(0.000, 0.700, 0.170, 1.000);
	-moz-transition: all 400ms cubic-bezier(0.000, 0.700, 0.170, 1.000);
	-ms-transition: all 400ms cubic-bezier(0.000, 0.700, 0.170, 1.000);
	-o-transition: all 400ms cubic-bezier(0.000, 0.700, 0.170, 1.000);
	transition: all 400ms cubic-bezier(0.000, 0.700, 0.170, 1.000);
}

.charmbar1 {
	background: #111111;
	width: 100px;
	z-index: 10;
	height: 100%;
	position: fixed;
	left: 0px;
	top: 0px;
	vertical-align: middle;
	display: table;
	-webkit-transition: all 400ms cubic-bezier(0.000, 0.700, 0.170, 1.000);
	-moz-transition: all 400ms cubic-bezier(0.000, 0.700, 0.170, 1.000);
	-ms-transition: all 400ms cubic-bezier(0.000, 0.700, 0.170, 1.000);
	-o-transition: all 400ms cubic-bezier(0.000, 0.700, 0.170, 1.000);
	transition: all 400ms cubic-bezier(0.000, 0.700, 0.170, 1.000);
}

.charmitem {
display: table-cell;
cursor: default;
width: 100px;
height: 100px;
vertical-align: middle;
text-align: center;
font-family: Segoe UI, Tahoma;
font-size: 15px;
color: #E2DADA;
}

.charm {
background: #111111;
text-align: center;
vertical-align:middle;
display: table;
width: 100px;
height: 100px;
}

.charm a, .chitem a {
text-decoration:none;
}

.charm:hover {
background: #333333;
}

.charmmenu0 {
	background: #f2f2f2;
	width: 345px;
	position: fixed;
	border-right: 1px solid #595959;
	padding: 30px 0px 0px 0px;
	z-index: 17;
	left: -346px;
	top: 0px;
	min-height: 500px;
	height: 100%;
	-webkit-transition: all 600ms cubic-bezier(0.000, 0.700, 0.170, 1.000);
	-moz-transition: all 600ms cubic-bezier(0.000, 0.700, 0.170, 1.000);
	-ms-transition: all 600ms cubic-bezier(0.000, 0.700, 0.170, 1.000);
	-o-transition: all 600ms cubic-bezier(0.000, 0.700, 0.170, 1.000);
	transition: all 600ms cubic-bezier(0.000, 0.700, 0.170, 1.000);
}

.charmmenu1 {
	background: #f2f2f2;
	width: 345px;
	position: fixed;
	border-right: 1px solid #595959;
	padding: 30px 0px 0px 0px;
	z-index: 17;
	left: 0px;
	top: 0px;
	min-height: 500px;
	height: 100%;
	-webkit-transition: all 600ms cubic-bezier(0.000, 0.700, 0.170, 1.000);
	-moz-transition: all 600ms cubic-bezier(0.000, 0.700, 0.170, 1.000);
	-ms-transition: all 600ms cubic-bezier(0.000, 0.700, 0.170, 1.000);
	-o-transition: all 600ms cubic-bezier(0.000, 0.700, 0.170, 1.000);
	transition: all 600ms cubic-bezier(0.000, 0.700, 0.170, 1.000);
}

.chitem {
	width: 310px;
	position: relative;
	display: table-cell;
	padding-left: 35px;
	height: 50px;
	vertical-align: middle;
	text-decoration: none;
	font-size: 15px;
}

.chitem:hover {
position: relative;
display: table-cell;
width: 310px;
padding-left:35px;
height: 50px;
vertical-align: middle;
background: #fff;
font-size: 15px;
}

.lp {
	background: rgba(0, 156, 255, 0.5);
	border-radius: 5px;
	padding: 5px;
	color: #fff;
	font-weight: bold;
}