Template:SCUT-FSE-CHINA/Style/Navbar

• {

 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;

} .content {

 margin: 100px auto;
 width: 260px;

} .colors {

 float: left;
 margin: 20px auto;
 width: 260px;

} .colors a {

 float: left;
 height: 30px;
 width: 33.33333333%;

} .colors .default {

 background: #414956;

} .colors .blue {

 background: #4a89dc;

} .colors .white {

 background: #ffffff;

} .menu {

 box-shadow: 0 20px 50px #333333;
 float: left;
 font-family: Raleway,'Open Sans', sans-serif;
 min-width: 260px;
 outline: 0;
 position: relative;

} .menu * {

 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
 font-family: Raleway,'Open Sans', sans-serif;
 outline: 0;

} .menu .menu-footer {

 background: #414956;
 color: #f0f0f0;
 float: left;
 font-weight: normal;
 height: 50px;
 line-height: 50px;
 font-size: 6px;
 width: 100%;
 text-align: center;

} .menu .menu-header {

 background: #414956;
 color: #f0f0f0;
 font-weight: bold;
 height: 100px;
 line-height: 100px;
 text-align: center;
 width: 100%;

} .menu ul {

 list-style: none;
 margin: 0;
 padding: 0;

} .menu ul li {

 display: block;
 float: left;
 position: relative;
 width: 100%;

} .menu ul li a {

 background: #414956;
 color: #f0f0f0;
 float: left;
 font-size: 13px;
 overflow: hidden;
 padding: 14px 22px;
 position: relative;
 text-decoration: none;
 white-space: nowrap;
 width: 100%;

} .menu ul li a i {

 float: left;
 font-size: 16px;
 line-height: 18px;
 text-align: left;
 width: 34px;

} .menu ul li .menu-label {

 background: #f0f0f0;
 border-radius: 100%;
 color: #555555;
 font-size: 11px;
 font-weight: 800;
 line-height: 18px;
 min-width: 20px;
 padding: 1px 2px 1px 1px;
 position: absolute;
 right: 18px;
 text-align: center;
 top: 14px;

} .menu ul .submenu {

 display: none;
 position: static;
 width: 100%;

} .menu ul .submenu .submenu-indicator {

 line-height: 16px;

} .menu ul .submenu li {

 clear: both;
 width: 100%;

} .menu ul .submenu li ul.submenu {

 display: none;
 position: static;
 width: 100%;
 overflow: hidden;

} .menu ul .submenu li a {

 background: #383838;
 border-left: solid 6px transparent;
 border-top: none;
 float: left;
 font-size: 11px;
 position: relative;
 width: 100%;

} .menu ul .submenu li:hover > a {

 border-left-color: #414956;

} .menu ul .submenu li .menu-label {

 background: #f0f0f0;
 border-radius: 100%;
 color: #555555;
 font-size: 11px;
 font-weight: 800;
 line-height: 18px;
 min-width: 20px;
 padding: 1px 2px 1px 1px;
 position: absolute;
 right: 18px;
 text-align: center;
 top: 12px;
 top: 14px;

} .menu ul .submenu > li > a {

 padding-left: 30px;

} .menu ul .submenu > li > ul.submenu > li > a {

 padding-left: 45px;

} .menu ul .submenu > li > ul.submenu > li > ul.submenu > li > a {

 padding-left: 60px;

} .menu .submenu-indicator {

 -moz-transition: "transform .3s linear";
 -o-transition: "transform .3s linear";
 -webkit-transition: "transform .3s linear";
 transition: "transform .3s linear";
 float: right;
 font-size: 20px;
 line-height: 19px;
 position: absolute;
 right: 22px;

} .menu .submenu-indicator-minus > .submenu-indicator {

 -moz-transform: rotate(45deg);
 -ms-transform: rotate(45deg);
 -o-transform: rotate(45deg);
 -webkit-transform: rotate(45deg);
 transform: rotate(45deg);

} .menu > ul > li.active > a {

 background: #3b424d;
 color: #ffffff;

} .menu > ul > li:hover > a {

 background: #3b424d;
 color: #ffffff;

} .menu > ul > li > a {

 border-bottom: solid 1px #3b424d;

} .ink {

 -moz-transform: scale(0);
 -ms-transform: scale(0);
 -o-transform: scale(0);
 -webkit-transform: scale(0);
 background: rgba(255, 255, 255, 0.3);
 border-radius: 100%;
 display: block;
 position: absolute;
 transform: scale(0);

} .animate-ink {

 -moz-animation: ripple .3s linear;
 -ms-animation: ripple .3s linear;
 -o-animation: ripple .3s linear;
 -webkit-animation: ripple .3s linear;
 animation: ripple .3s linear;

} @-moz-keyframes 'ripple' {

 100% {
   opacity: 0;
   transform: scale(2.5);
 }

} @-webkit-keyframes 'ripple' {

 100% {
   opacity: 0;
   transform: scale(2.5);
 }

} @keyframes 'ripple' {

 100% {
   opacity: 0;
   transform: scale(2.5);
 }

} .blue.menu .menu-footer {

 background: #3396f3;

} .blue.menu .menu-header {

 background: #3396f3;

} .blue.menu ul li > a {

 background: #3396f3;

} .blue.menu ul ul.submenu li:hover > a {

 border-left-color: #3396f3;

} .blue.menu > ul > li.active > a {

 background: #3396f3;

} .blue.menu > ul > li:hover > a {

 background: #3396f3;

} .blue.menu > ul > li > a {

 border-bottom-color: #3396f3;

}