* { box-sizing: border-box; } .logo { display: inline-block; line-height: 32px; letter-spacing: 5px; padding: 0 5px; color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, .5); font-weight: 600; } .logo.e { float: left; width: 30px; padding-left: 10px; background-color: #f5d059; border-top-left-radius: 5px; border-bottom-left-radius: 5px; } .logo.mp { float: left; margin-left: -5px; background-color: #f39d41; border-top-left-radius: 5px; border-bottom-left-radius: 5px; } .logo.act { background-color: #ef7126; margin-left: -5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; } section { float: left; } .app { width: 100%; } .menu { width: 200px; margin: 20px; } .menu ul { margin: 0; padding: 0; } .menu li { display: block; cursor: pointer; } .nav { margin-bottom: 5px; } .nav.empact { font-weight: 600; } .nav.header { color: #aaa; cursor: default; margin-top: 20px; } .menu .nav a:before { display: block; float: left; width: 3px; height: 32px; border-radius: 3px; background-color: #f39d41; content: ''; margin-right: 10px; } .menu .nav a { display: inline-block; line-height: 32px; width: 100%; color: #222; text-decoration: underline; border-radius: 3px; } .menu .nav a.active { background-color: #f9d4be; } .content { width: calc(100% - 240px); margin-top: 20px; } .content .left, .content .right { float: left; width: 50%; } .info-block { width: 100%; height: 100px; margin-bottom: 20px; } .info-block .img { float: left; width: 100px; height: 100px; background-position: center; background-size: 100% auto; margin-right: 20px; border-radius: 3px; } .info-block h1 { font-size: 32px; line-height: 32px; margin: 0; font-weight: 400; } .info-block p { max-width: 100%; margin-right: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }