.m-left-block { width: 189px; background: #f8f8f8; } .m-left-list { margin-top: 20px; min-height: 665px; border-top: 1px solid #f8f8f8; } .m-left-list a { width: 100%; height: 50px; line-height: 50px; border-bottom: 1px solid #f8f8f8; font-size: 15px; display: block; box-sizing: border-box; padding-left: 65px; position: relative; } .m-left-list a:hover, .m-left-list a.current { color: #3290d4; } .m-left-list a:hover .ico-desktop, .m-left-list a.current .ico-desktop { background-position: -130px -240px; } .m-left-list a:hover .ico-course, .m-left-list a.current .ico-course { background-position: 0 -30px; } .m-left-list a:hover .ico-files, .m-left-list a.current .ico-files { background-position: -30px -30px; } .m-left-list a:hover .ico-car, .m-left-list a.current .ico-car { background-position: -60px -30px; } .m-left-list a:hover .ico-order, .m-left-list a.current .ico-order { background-position: -90px -30px; } .m-left-list a:hover .ico-news, .m-left-list a.current .ico-news { background-position: -120px -30px; } .m-left-list a:hover .ico-set, .m-left-list a.current .ico-set { background-position: -150px -30px; } .m-left-list a:hover .ico-payment, .m-left-list a.current .ico-payment { background-position: 2px -752px; } .m-left-list a:hover .ico-personal-m, .m-left-list a.current .ico-personal-m { background-position: -62px -750px; } .m-left-list a:hover .ico-notes, .m-left-list a.current .ico-notes { background-position: -90px -730px; } .m-left-list a:hover .ico-process, .m-left-list a.current .ico-process { background-position: -120px -730px; } .m-left-list a:hover .ico-delay, .m-left-list a.current .ico-delay { background-position: 3px -815px; } .m-left-list a:hover .ico-time, .m-left-list a.current .ico-time { background-position: -29px -815px; } .m-left-list .current { border-left: 5px solid #3290d4; background-color: #fff; } .m-left-list .current a { color: #3290d4; width: 187px; background-color: #fff; border-right: 2px solid #fff; } .m-left-list .current a .ico-desktop { background-position: -130px -240px; } .m-left-list .current a .ico-course { background-position: 0 -30px; } .m-left-list .current a .ico-files { background-position: -30px -30px; } .m-left-list .current a .ico-car { background-position: -60px -30px; } .m-left-list .current a .ico-order { background-position: -90px -30px; } .m-left-list .current a .ico-news { background-position: -120px -30px; } .m-left-list .current a .ico-set { background-position: -150px -30px; } .m-left-list .current a .ico-payment { background-position: 2px -752px; } .m-left-list .current a .ico-personal-m { background-position: -62px -750px; } .m-left-list .current a .ico-notes { background-position: -90px -730px; } .m-left-list .current a .ico-process { background-position: -120px -730px; } .m-left-list .current a .ico-delay { background-position: 3px -815px; } .m-left-list .current a .ico-time { background-position: -29px -815px; } .m-left-list .current .p-ico2 { left: 20px; } .m-left-list .current .sub-list { display: block; } .m-left-list .current .sub-list a { color: #666; } .m-left-list .current .sub-list a:before { content: ""; width: 16px; height: 16px; border: 1px solid; border-color: transparent transparent #ddd #ddd; display: inline-block; margin-right: 5px; position: relative; top: -3px; } .m-left-list .current .sub-list a:hover, .m-left-list .current .sub-list a.current { color: #3290d4; border-left: 0; } .m-left-list .sub-list { display: none; } .m-left-list .p-ico2 { width: 25px; height: 25px; position: absolute; top: 12px; left: 25px; } .m-left-list .ico-desktop { background-position: -100px -240px; } .m-left-list .ico-course { background-position: 0 0; } .m-left-list .ico-files { background-position: -30px 0; } .m-left-list .ico-car { background-position: -60px 0; } .m-left-list .ico-order { background-position: -90px 0; } .m-left-list .ico-news { background-position: -120px 0; } .m-left-list .ico-set { background-position: -150px 0; } .m-left-list .ico-new { width: 10px; height: 10px; background-position: -260px -30px; top: 10px; left: 42px; } .m-left-list .ico-payment { background-position: 2px -722px; } .m-left-list .ico-personal-m { background-position: -62px -721px; } .m-left-list .ico-notes { background-position: -90px -700px; } .m-left-list .ico-process { background-position: -120px -700px; } .m-left-list .ico-delay { background-position: 3px -785px; } .m-left-list .ico-time { background-position: -29px -785px; } .m-left-list .li-1 { border-top: 5px solid #dadada; position: relative; top: -1px; } .m-left-list .li-1 .ico-new { top: 13px; } .m-left-block .user-block { width: 150px; margin-left: auto; margin-right: auto; padding-top: 20px; } .m-left-block .user-block .user-img { width: 140px; height: 140px; text-align: center; background-color: #fff; border: 1px solid #dadada; padding: 5px; } .m-left-block .user-block .user-name { font-size: 16px; text-align: center; margin-top: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }