#header {
	/* background-color: #581a7f; */
	color: white;
	height: 58px;
	width: 100%;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 15px;
	padding-right: 15px;
}

.header-table {
	width: 100%;
	margin: 0 auto;
	bottom: 0;
	height: 48px;
}

.logo-layout {
	width: 518px;
	text-align: center;
}

.logo {
	width: 518px;
	height: 42px;
}

.profile-layout {
	text-align: right;
}

.portrait {
	width: 26px;
	height: 26px;
}

.loginName {
	text-align: right;
	font-size: 14px;
	color: white;
	font-family: serif;
}

.quit-btn {
	margin-left: 15px;
	font-size: 14px;
	color: #f2f2f2;
}

#side-menu-bar {
	width: 15%;
	margin-top: 59px;
	float: left;
	position: absolute;
	top: 0;
	bottom: 0;
	background-color: #ebebeb;
}

#section {
	width: 85%;
	margin-top: 58px;
	margin-left: 15%;
	float: right;
	position: absolute;
	padding: 5px;
	top: 0;
	bottom: 0;
}

#contentFrame {
	width: 100%;
	height: 100%;
}

/* start menu */
* {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

#side-menu a {
	overflow: hidden;
	text-overflow: ellipsis;
	-o-text-overflow: ellipsis;
	white-space: nowrap;
	width: 100%;
}

@
keyframes menuAnimShow { 10% {
	left: -10%;
}

20%
{
left
:
-9%;
}
30%
{
left
:
-8%;
}
40%
{
left
:
-7%;
}
50%
{
left
:
-6%;
}
60%
{
left
:
-5%;
}
70%
{
left
:
-4%;
}
80%
{
left
:
-3%;
}
90%
{
left
:
-2%;
}
100%
{
left
:
0%;
}
}
@
keyframes menuAnimHide { 10% {
	left: 0%;
}
20%
{
left
:
-1
.5
%;
}
30%
{
left
:
-3%;
}
40%
{
left
:
-4
.5
%;
}
50%
{
left
:
-6%;
}
60%
{
left
:
-7
.5
%;
}
70%
{
left
:
-9%;
}
80%
{
left
:
-10
.5
%;
}
90%
{
left
:
-13%;
}
100%
{
left
:
-15%;
}
}

/* end menu */