* { box-sizing: border-box; } 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: 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 { 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 .img.empty { background-color: #ddd; } .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; } .week-selector { display: none; position: absolute; top: 50%; width: 100%; height: 100%; float: left; margin: 20px 20px 20px 0; } .week-selector .week { float: left; width: 20px; font-size: 8px; line-height: 10px; margin: 0 0 1px; } .week-selector .week .square { float: left; width: 20px; height: 20px; border: #aaa 1px solid; text-align: center; line-height: 20px; background-color: #fff; }