body{margin:0;width:100vw;height:100vh;box-sizing:border-box;font-family:Arial;background-color:#f5f5f5;overflow-x:hidden;overflow-y:auto;}*{box-sizing:border-box;}.navbar{font-size:2em;height:70px;width:100%;box-sizing:border-box;display:flex;flex-shrink:0;flex-direction:row;align-items:flex-end;padding-left:4px;padding-right:4px;background-color:#fff;box-shadow:0 0 32px rgba(0,0,0,.1);}.navbar a{box-sizing:border-box;text-decoration:none;color:#000;}.navbar>.item,.navbar>.dropdown>.item,.navbar>.dropdown>.items>.item{box-sizing:border-box;color:#8c8c8c;padding:4px;padding-left:1em;padding-right:1em;height:100%;display:flex;flex-direction:column;justify-content:flex-end;background-color:#fff;}.navbar>.item,.navbar>.dropdown>.item{border-bottom:2px solid transparent;}.navbar>.dropdown>.items>.item{border-left:4px solid transparent;}.navbar>.item.selected,.navbar>.dropdown>.item.selected,.navbar>.dropdown>.items>.item.selected{color:#000;border-color:#add8e6;}.navbar>.dropdown{position:relative;display:flex;flex-direction:column;z-index:100;}.navbar>.right-align{margin-left:auto;}.navbar>.item:hover,.navbar>.dropdown>.item:hover,.navbar>.dropdown>.items>.item:hover{border-color:#e6e6e6;}.navbar>.dropdown>.items{position:absolute;display:flex;top:100%;width:100%;z-index:-1;flex-direction:column;background-color:#fff;box-shadow:0 0 32px rgba(0,0,0,.1);border-bottom-left-radius:.25em;border-bottom-right-radius:.25em;padding-bottom:.25em;overflow:hidden;transition-duration:.15s;transform-origin:50% 0%;transform:scale(1,0);}.navbar>.dropdown:hover>.items{transform:scale(1,1);}.home{height:100%;}.content{box-sizing:border-box;height:calc(100% - 70px);height:auto;}.left-bar{border-left:8px solid rgba(90,157,221,.25);padding-left:8px;}.card{color:#000;display:flex;flex-direction:column;margin:16px;align-items:center;box-shadow:0 0 32px rgba(0,0,0,.1);box-sizing:border-box;}.card img{width:32px;height:32px;margin-right:32px;}.card .header{box-sizing:border-box;padding:16px;width:100%;background-color:#f0f8ff;margin:0;text-align:center;}.card .body{padding:16px;width:100%;}.card .body hr{width:calc(100% - 32px);}.body{height:auto;}.content{width:100%;height:calc(100% - 70px);display:flex;flex-direction:row;align-items:stretch;}.content .left{width:300px;padding:32px;display:flex;flex-direction:column;border-right:4px solid rgba(0,0,0,.2);}.content .left .topic.btn{padding:8px;flex-shrink:0;background-color:#fff;margin:4px;cursor:pointer;display:flex;flex-direction:row;align-items:center;justify-content:center;transition-duration:.1s;}.content .left .topic.btn:hover{box-shadow:none;}.content .left .topic.btn.selected{background-color:#b3e1ff;margin-left:8px;margin-right:0;}.content .right{width:calc(100% - 300px);height:100%;overflow-y:auto;position:relative;background-color:rgba(0,0,0,.05);}.content .right .course-list{position:absolute;top:0;left:0;padding:32px;width:100%;display:none;flex-direction:row;flex-wrap:wrap;}.content .right .course-list .course.card{text-decoration:none;margin:32px;background-color:#fff;box-shadow:rgba(0,0,0,.4) 0 0 16px;display:flex;flex-direction:column;align-items:stretch;cursor:pointer;border-radius:8px;}.content .right .course-list .course.card:hover{opacity:.8;}.content .right .course-list .course.card:active{filter:brightness(.8);}.content .right .course-list .course.card .thumbnail{width:400px;height:300px;background-size:cover;background-position:center;background-repeat:no-repeat;border-top-left-radius:8px;border-top-right-radius:8px;}.content .right .course-list .course.card .details{padding:32px;display:flex;flex-direction:row;align-items:center;flex-wrap:wrap;}.content .right .course-list .course.card .details .name{font-size:1.2em;font-weight:bold;margin-right:auto;}.content .right .course-list .course.card .details .ui-sprite.clock{margin:8px;}.content .right .course-list.selected{display:flex;}.ui-sprite{width:32px;height:32px;background-image:url('../img/ui_sprites_black.png');}.ui-sprite.clock{background-position:-64px -160px;}