/*导航条-黑色-渐变过渡-0.5s*/
.canvas-style-green {
    width: 220px;
    height: 100%;
    background: #068D82;
    transition: all .5s;
}
/*目录条-a标签样式-左侧显示5px蓝色-默认透明不显示*/
.canvas-nav-item > a:before {
    content: "";
    position: absolute;
    left: 0px;
    width: 5px;
    height: 50px;
    background: #3A96FF;
    opacity: 0;
    transition: all .5s;
}

/*鼠标经过-目录条-a标签样式-左侧显示5px蓝色-透明度调为1显示*/
.canvas-nav-item > a:hover:before {
    opacity: 1;
}

/*鼠标经过 背景色调黑字体调白*/
.canvas-nav-item > a:hover {
    color: #FFFFFF;
    background: rgba(88, 88, 88, .1);
}

/*导航栏缩小*/
.canvas-nav-small .canvas-style-green {
    width: 60px;
    transition: width 0.5s;
    -moz-transition: width 0.5s;	/* Firefox 4 */
    -webkit-transition: width 0.5s;	/* Safari 和 Chrome */
    -o-transition: width 0.5s;
}

.canvas-nav-small .canvas-style-green .canvas-nav-logo span {
    display: none;
}

.canvas-nav-small .canvas-style-green .canvas-nav-item > a span {
    display: none;
}

.canvas-nav-small .canvas-style-green .icon-right {
    margin-right: -20px;
}

.canvas-nav-small .canvas-style-green .canvas-nav-item ul {
    position: absolute;
    top: 0;
    left: 60px;
    width: 180px;
    z-index: 99;
    background: #3C474C;
    overflow: hidden;
}

.canvas-nav-small .canvas-style-green .canvas-nav-item:hover {
    background: rgba(255, 255, 255, .1);
}

.canvas-nav-small .canvas-style-green .canvas-nav-item:hover .canvas-nav-item a {
    color: #FFF;
}

.canvas-nav-small .canvas-style-green .canvas-nav-item:hover a:before {
    opacity: 1;
}

.canvas-nav-small .canvas-style-green .canvas-nav-item:hover ul {
    display: block;
}

.canvas-nav-small .canvas-style-green .canvas-footer a {
    width: 100%;
}

.canvas-nav-small .canvas-nav-right {
    left: 60px;
}

.canvas-nav-small .canvas-tabs {
    left: 60px;
    width: calc(100% - 60px);
}

.canvas-nav-small .canvas-footer {
    left: 60px;
    width: calc(100% - 60px);
}

.canvas-nav-small .canvas-header {
    left: 60px;
    width: calc(100% - 60px);
}