* { box-sizing: border-box; } .app { width: 100%; } .menu { float: left; 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: 5px; 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; width: 200px; max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .menu .nav a:hover { background-color: #fcf1eb; } .menu .nav a.active { background-color: #f9d4be; } .content { float: left; width: calc(100% - 240px); margin-top: 20px; } .content .left, .content .right { float: left; width: 50%; } .info-block { width: 100%; height: 50px; margin-bottom: 20px; } .info-block .img { float: left; width: 50px; height: 50px; background-color: #ddd; background-position: center; background-size: 100% auto; margin-right: 10px; border-radius: 3px; } .info-block h1 { font-size: 32px; line-height: 50px; margin: 0; font-weight: 400; } .week-selector { position: absolute; top: 20px; right: 20px; font-size: 32px; line-height: 50px; color: #666; } .week-selector .week { position: relative; display: inline-block; padding: 0 6px; margin: 0 3px; } .week-selector .week select { position: absolute; top: 30%; left: 0; width: 100%; visibility: hidden; } .week-selector .week:hover .label { visibility: hidden; } .week-selector .week:hover select { visibility: visible; }