.article{ padding: 20px 0px; } .article table{ width:100%; border-collapse: collapse; } .article-left{ min-width:300px; width: 300px; } .article-right{ padding-left:30px; max-width: 880px; } .article-left .channel-title{ padding-bottom: 15px; padding: 18px 0 18px 30px; margin: 0; font-size: 24px; color: #000; line-height: 26px; background: #EFEFEF; font-weight: 400; border-top: 6px solid #0076d4; border-bottom: 1px solid #ddd; } .article-left ul{ background: #eaeaea; border-bottom: 1px solid #ddd; } .article-left ul li{ font-size: 16px; } .article-left ul li a{ padding: 20px 30px 20px 50px; display: block; cursor: pointer; position: relative; } .article-left ul li a:before { content: ""; width: 0; height: 0; border-bottom: 6px solid transparent; border-top: 6px solid transparent; border-left: 6px solid; font-size: 0; margin-right: 9px; top: 25px; left: 30px; position: absolute; } .article-left ul li a.expanded:before{ transform: rotate(90deg); -webkit-transition: transform .3s ease; -moz-transition: transform .3s ease; -o-transition: transform .3s ease; -ms-transition: transform .3s ease; transition: transform .3s ease; } .article-left ul li a.expanded{ } .article-left ul li a:hover{ color: #0076d4; } .article-left ul li a.active{ color: #fff; font-weight: bold; background: #0076d4; } .article-left ul.child-channel { border-bottom: none; background: #f2f2f2; padding-left: 20px; padding-bottom: 10px; margin-top: 1px; } .article-left ul.child-channel li { font-size: 16px; color: #000; line-height: 50px; padding-left: 40px; } .article-left ul.child-channel li a{ color: #5f5f5f; padding: 0px; padding-left:20px; } .article-left ul.child-channel li a.active{ color: #0076d4; background: none; font-weight: bold; } .article-left ul.child-channel li a:hover{ color: #0076d4; background: none; } .article-left ul.child-channel li a:before { content: ""; width: 0; height: 0; border-bottom: 6px solid transparent; border-top: 6px solid transparent; border-left: 6px solid; font-size: 0; margin-right: 9px; top: 20px; left: 0px; position: absolute; } .article-list li{ width: 100%; background: #fff; padding: 25px 0px; border-bottom: 1px solid #eee; font-size: 16px; position: relative; } .article-list a{ color: #333; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: absolute; right: 110px; left: 0px; top: 15px; } .article-list a:hover{ text-decoration: underline; color: #0076d4; } .article-list span{ position: absolute; right: 0px; top: 15px; color: #777; } .article-list.short-title li { width: 11.1%; float: left; border-bottom: unset; height: 50px; margin-bottom: 12px; } .article-list.short-title li a { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; width: auto; white-space: unset; } .article-category-content{ font-size: 14px; line-height: 25px; padding: 20px 0px; } .article-category-content img{ max-width:100%; } .article-info{ padding: 20px 0px 20px 40px; background: #fff; } .article-title{ font-size: 21px; padding: 0px 20px 20px; text-align: center; color: #0A498D; } .article-ext { text-align: center; font-size: 15px; color: #777; border-bottom: 1px solid #eee; padding-bottom: 20px; } .article-ext span { margin-left: 20px; } .article-ext span:first-child{ margin-left: 0px; } .article-content{ /* text-indent: 25px; */ line-height: 25px; font-size: 14px; padding: 20px 0px; /*border-bottom: 1px solid #eee;*/ margin-bottom: 20px; } .article-content img{ max-width:100%; } .article-content table{ border-collapse: collapse; margin: 0 auto; } .teacher-content{ line-height: 25px; font-size: 14px; padding: 0px 0px 20px; } .teacher-content .head-img{ width: 165px; height: 240px; border:4px solid #e9e9e9; margin-top: 10px; } .teacher-info{ padding-left:35px; } .teacher-info h5{ font-size: 20px; color: #0076d4; font-weight: bold; padding-top: 2px; line-height: 45px; margin: 0; } .teacher-info p{ line-height: 30px; font-size: 14px; color: #333; } .teacher-content-tab { margin-top: 50px; } .teacher-content-tab li{ float: left; width: 25%; line-height: 50px; background-color: #d8d6d6; text-align: center; color: #171616; font-size: 18px; cursor: pointer; transition: all 0.1s ease 0.2s; border-right: 1px solid #ccc8c8; } .teacher-content-item{ padding: 20px 0px; line-height: 30px; } .teacher-content-tab li:last-child{ border-right: none; } .teacher-content-tab li.active { background-color: #0076d4; color: #fff; } .pageturn-ul { } .pageturn-ul li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: #dfdfdf; padding: 12px 32px; width: 49%; } .pageturn-ul .prev-li { float: left; } .pageturn-ul .next-li { float: right; } .teacher_list.xm_list { position: relative; top: 15px; } .teacher_list.xm_list .xm_box { padding-bottom: 40px; } .teacher_list.xm_list .xm_box .xm_bar { background-color: #e6e6e6; padding: 4px 5px; line-height: 32px; border-radius: 40px; margin-bottom: 30px; z-index: 999; position: relative; } .clearfix { zoom: 1; } .clearfix:after, .clearfix:before { display: table; content: " "; } .teacher_list.xm_list .xm_box .xm_bar a { display: inline-block; width: 32px; height: 32px; border-radius: 32px; text-align: center; font-size: 18px; color: #333; float: left; cursor: pointer; margin-right: 8px; } .teacher_list.xm_list .xm_box .xm_bar a.active { background-color: #0076d4; color: #fff; } .teacher_list.xm_list .xm_box .xm_bar a:hover { color: rgba(10, 73, 141, 0.7); } .teacher_list.xm_list .xm_box .xm_bar a.active:hover { background-color: #0a498d; color: #fff; } .teacher_list.xm_list .xm_box ul li { margin-bottom: 10px; position: relative; padding-left: 65px; padding-top: 100px; margin-top: -100px; } .teacher_list.xm_list .xm_box ul li.active span { background-color: #0076d4; color: #fff; } .teacher_list.xm_list .xm_box ul li span { width: 30px; height: 30px; display: inline-block; margin-right: 30px; border-radius: 4px; background-color: #e6e6e6; line-height: 30px; text-align: center; font-weight: bold; font-size: 16px; position: absolute; top: 100px; left: 5px; } .teacher_list.xm_list .xm_box ul li a { font-size: 16px; min-width: 50px; color: #666; line-height: 30px; display: inline-block; margin-right: 30px; text-align: justify; text-align-last: justify; text-justify: distribute-all-lines; } #go_back { z-index: 999; width: 60px; height: 60px; position: fixed; bottom: 50px; right: 50px; cursor: pointer; background: url(../images/go_back.png) no-repeat center; } .tutor-box {} .tutor-info-header{ overflow: hidden; background: #0076d4; color: #fff; } .view-display-id-tutor_marinebiology_block .view-header { border-bottom: 1px solid #ddd; } .tutor-info-header{ display: table; width: 100%; border-collapse:collapse; } .tutor-info-header ul{ display: table-row; } .tutor-info-header ul li{ display: table-cell; text-align: center; font-weight: 700; line-height: 22px; border-right: 1px solid #979797; } .tutor-info-header ul li:last-child{ border-right-style: none; } .tutor-info-header ul li span { padding: 20px 0; display: block; } .tutor-info-header ul li:last-child span{ border-style: none; } .tutor-list-ul{ display: table; border-collapse:collapse; width: 100%; table-layout: fixed; } .tutor-list-item{ display: table-row; border-bottom: 1px solid #eaeaea; } .tutor-list-box h3 { font-weight: bold; padding: 15px 0; margin-top: 20px; text-align: center; border-bottom: 3px solid maroon; background: #EDEDED; line-height: 1; } .tutor-list-item:nth-child(2n){ background: #efeeee; } .tutor-list-item:nth-child(2n+1){ background: #f9f9f9; } .tutor-list-item .views-field{ display: table-cell; border-left: 1px solid #eaeaea; vertical-align: middle; text-align: center; } .tutor-list-item .views-field-field-interest, .tutor-list-item .views-field-field-email{ text-align: left; } .tutor-info-header-name, .tutor-list-item .views-field-title{ width: 14%; } .tutor-info-header-interest, .tutor-list-item .views-field-field-interest{ width:44%; } .tutor-list-item .views-field-field-telephone, .tutor-info-header-phone{ width: 16%; } .tutor-list-item .views-field-field-email, .tutor-info-header-email{ width:26%; } .tutor-list-item .views-field .field-content{ display: block; padding: 20px; word-break: break-all; } .tutor-list-item .views-field-title{ border-left-style: none; } .tutor-list-item .views-field-field-email{ border-right-style: none; }