User:EPorto (WMB)/mooc.css

.border-box { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .actions { float: right; } .actions ul { list-style: none; } .actions > div { display: none; float: right; margin-left: 15px; } .actions .ask-question-btn { margin-top: 12px; } .actions .edit-btn { margin-top: 6px; } .btn-expand { height: 40px; text-align: center; cursor: pointer; } .collapsed > .content { overflow: hidden; } .collapsed > .content:after { content: ''; position: absolute; right: 0; bottom: 40px; left: 0; height: 30px; background: linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)); }	-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 1px 20px; background-color: #FFF; border: 1px solid #E0E0E0; border-bottom: none; z-index: 1001; }	-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; display: inline-block; margin-right: 20px; cursor: pointer; }	margin-right: 2px; }	padding: 0 2px; border-radius: 4px; border: 1px solid #E0E0E0; }	text-decoration: none; }	background-color: #EAEAEA; } /*############################ .overlay { position: absolute; display: none; } .overlay > span { position: relative; } .overlay .content { position: relative; z-index: 2; } .overlay .background { position: absolute; width: 100%; height: 100%; background-color: #668; opacity: 0.5; z-index: 1; } /*############################ .edit-modal { position: fixed; width: 100%; height: 100%; top: 0; left: 0; cursor: default; z-index: 1502; } .edit-modal .background { position: fixed; width: 100%; height: 100%; background-color: #050404; opacity: 0.87; } .edit-modal .content { position: relative; width: 90%; height: 80%; left: 0; right: 0; top: 10%; margin: 0 auto; padding: 25px 20px; color: #000; background-color: #FFF; border-radius: 8px; box-sizing: border-box; overflow: visible; } .edit-modal .btn-close { float: right; top: 0; width: 40px; height: 40px; margin: -40px -40px 0 0; background: #FFF url("http://upload.wikimedia.org/wikipedia/commons/thumb/6/60/Close_icon.svg/64px-Close_icon.svg.png") no-repeat center; box-shadow: 0 0 3px 2px rgba(0, 0, 0, .2); border-radius: 20px; cursor: pointer; z-index: 2; } .edit-modal .edit-field { height: auto; } .edit-modal .edit-field label { font-weight: bold; line-height: 1.6; } .edit-modal .edit-field .label-title { font-size: 1.17em; } .edit-modal .edit-field .label-summary { display: inline-block; margin-top: 25px; } .edit-modal .edit-field input, .edit-modal .edit-field textarea { width: 100%; padding: 2px 5px; border-radius: 3px; border: 1px solid #AEAEAE; } .edit-modal .edit-field textarea { height: 200px; } .edit-modal .help { min-height: 48px; margin-top: 25px; padding: 10px 10px 10px 70px; background: url('https://upload.wikimedia.org/wikipedia/commons/4/44/Help-browser.svg') no-repeat 10px center; border: 1px solid #705000; } .edit-modal .btn-save { display: block; min-width: 120px; margin: 15px auto 0 auto; padding: 10px 10px 10px 35px; color: #000; background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/True.svg/20px-True.svg.png') no-repeat 12px 8px; text-align: center; box-shadow: 0 0 3px 2px rgba(0, 0, 0, .2); cursor: pointer; } .edit-modal input[disabled].btn-save { color: #DCDAD1; } /*############################	float: left; width: 100%; }	margin-right: 260px; } /*############################	position: absolute; right: 0; width: 250px; }	width: 250px; padding: 0; background: #FFF; overflow: hidden;/* prevent ol's margin to move item */ }	-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; position: absolute; width: 100%; padding-top: 25px; border: 1px solid #E0E0E0; }	padding: 5px 20px 11px 20px; background: -moz-linear-gradient(top, #FFF 1%, #EAEAEA 100%); background: -o-linear-gradient(top, #FFF 1%, #EAEAEA 100%); background: -ms-linear-gradient(top, #FFF 1%, #EAEAEA 100%); background: -webkit-linear-gradient(top, #FFF 1%, #EAEAEA 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(1%, #FFF), color-stop(100%, #EAEAEA)); }	margin: -9px 5px 0 0; }	display: inline-block; margin: 5px 0 0.25em 0; padding: 0; line-height: 1.3; font-size: 1.5em; font-family: "Linux Libertine",Georgia,Times,serif; border-bottom: 1px solid #AAA; }	margin: 81px 0 0 0; padding: 10px; border: 1px solid #E0E0E0; border-top: none; font-size: 0.85em; list-style-position: inside; overflow: hidden; } /*############################ .section { position: relative; border: 1px solid #E0E0E0; overflow: hidden; /* do not move section due content margin */ } .section:first-child { border-top: none; } .section > .header { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; position: absolute; top: 0; width: 100%; padding: 5px 20px; color: #777; background: -moz-linear-gradient(top, #FFF 1%, #EAEAEA 100%); background: -o-linear-gradient(top, #FFF 1%, #EAEAEA 100%); background: -ms-linear-gradient(top, #FFF 1%, #EAEAEA 100%); background: -webkit-linear-gradient(top, #FFF 1%, #EAEAEA 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(1%, #FFF), color-stop(100%, #EAEAEA)); box-shadow: 0 0 0 1px rgba(155, 155, 155, .3), 1px 0 0 0 rgba(255, 255, 255, .9) inset, 0 2px 2px rgba(0, 0, 0, .1); border-bottom: 1px solid #E0E0E0; cursor: pointer; z-index: 1; } .section > .header h2 { display: inline-block; margin-top: 5px !important; } .section > .header .icon { float: left; margin-right: 7px; padding-top: 4px; } .section > .content { margin: 55px 0 0 0; padding: 20px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .2); overflow: hidden; } .section .empty-section { color: #705000; font-size: 120%; } .section .empty-section .add-content-hint { min-height: 48px; margin-top: 10px; padding: 10px 10px 10px 70px; color: #000; background: url('https://upload.wikimedia.org/wikipedia/commons/b/b0/Gnome-help-browser-modified.svg') no-repeat 10px center; border: 1px solid #705000; font-size: 83.33%; } .section .add-content-hint .edit-text { color: #0645AD; cursor: pointer; } .section .add-content-hint .edit-text:hover { text-decoration: underline; } /*############################ .mooc-navigation-local > .previous, .mooc-navigation-local > .next { display: inline-block; width: 300px; margin: 10px 5px; padding: 10px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .2); cursor: pointer; } .children .overlay, .mooc-navigation-local .overlay { width: 300px; } .children .overlay a, .mooc-navigation-local .overlay a { margin: 0 5px; } /*############################ .video { width: 300px; height: 170px; overflow: hidden; text-align: center; box-shadow: 0 0 0 1px rgba(0, 0, 0, .2); z-index: 1502; } .video div { width: 100%; height: 100%; display: table; } .video div span { display: table-cell; vertical-align: middle; } .video .play-btn-large { display: none; } /*############################	display: block; width: auto; padding-top: 50px; }	padding-top: 0; } .children .lesson > .title { margin-top: 5px; margin-bottom: 0.25em; font-size: 1.5em; font-weight: bold; line-height: 1.3; border-bottom: 1px solid #AAA; } /*############################	cursor: pointer; }	display: block; width: auto; position: relative; min-height: 170px; margin: 30px 0 0 0; padding: 10px; border: 1px solid #E0E0E0; cursor: pointer; } .children .unit:after, .children .lesson:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }	margin-top: 0; } .unit .video-bar { float: left; width: 300px; } .unit .video { width: 300px; height: 170px; margin-bottom: 5px; background-color: #EEE; } .unit .content { margin-left: 320px; } .unit .content > .title { margin: 5px 0 10px 0; font-size: 1.17em; font-weight: bold; line-height: 1.6; } .unit .icon-bar ul { margin: 0; padding: 0; } .unit .icon-bar li { display: inline-block; margin-right: 15px; list-style: none; opacity: 0.4; } .unit .discussion-statistic-wrapper { position: absolute; top: 10px; right: 0; } .unit .discussion-statistic-wrapper .img-arrow img { float: right; padding-top: 10px; } .unit .discussion-statistic { float: left; padding: 5px; background-color: #EEE; border-radius: 3px; } .unit .discussion-statistic .icon { margin-bottom: 4px; text-align: center; } .unit .discussion-statistic .stat-row { padding: 5px; border-radius: 3px; text-align: center; } .unit .discussion-statistic .num { font-size: 120%; } .unit .discussion-statistic .title { font-size: 80%; line-height: 1; } .unit .discussion-statistic .unanswered { padding: 4px; color: #E21; border: 1px solid #E21; } .unit .learning-goals ol { margin: 0; padding: 0; list-style-position: inside; overflow: hidden; } .unit .learning-goals li { margin-bottom: 3px; } /*############################ .btn-add-thread { right: 0; cursor: pointer; } .btn-add-thread .background { border-top-left-radius: 10px; border-bottom-left-radius: 10px; } .btn-add-thread .content { padding: 5px; }	margin-left: 25px; }	list-style: none; }	width: 60%; display: inline-block; }	float: right; width: 6em; font-size: 0.8em; text-align: right; }	overflow: hidden; }	position: relative; margin: 2px 2px 5px 2px; padding: 10px 10px 20px 10px; background: none repeat scroll 0 0 #F4F7FB; border: 1px solid #E0E0E0; border-radius: 4px; }	color: #777; position: absolute; right: 5px; bottom: 1px; }	color: #705000; }	right: 0; }	border-top-left-radius: 10px; border-bottom-left-radius: 10px; }	padding: 5px; cursor: pointer; } .ask-question { margin-top: 15px; } .ask-question .label {/* labels in separate line */ display: block; } .ask-question textarea, .ask-question .title {/* full width for input fields (border-boxed) */ width: 100%; padding: 2px; resize: none; overflow: hidden; } .ask-question .btn-ask {/* discussion control */ display: block; width: 120px; margin: 10px auto 0; padding: 5px; background-color: #FFF; text-align: center; box-shadow: 0 0 3px 2px rgba(0, 0, 0, .2); cursor: pointer; } .ui-reply textarea { resize: none; overflow: hidden; }
 * 1) mooc-item-navigation {
 * 1) mooc-item-navigation .section-link-wrapper {
 * 1) mooc-item-navigation .section-link-wrapper img {
 * 1) mooc-item-navigation .active {
 * 1) mooc-item-navigation a:hover {
 * 1) mooc-item-navigation .active {
 * 1) OVERLAYS ##########
 * 1) MODAL BOXES ########
 * 1) CONTENT ###########
 * 2) mooc-content-wrapper {
 * 1) mooc-content-wrapper {
 * 1) mooc-content {
 * 1) NAVIGATION #########
 * 2) mooc-navigation-wrapper {
 * 1) mooc-navigation-wrapper {
 * 1) mooc-navigation {
 * 1) mooc-navigation .header-wrapper {
 * 1) mooc-navigation .header {
 * 1) mooc-navigation .header img {
 * 1) mooc-navigation .header > div {
 * 1) mooc-navigation > ol {
 * 1) SECTIONS ##########
 * 1) ITEM BOXES #########
 * 1) VIDEO SECTION #######
 * 1) CHILD LESSON SECTION ####
 * 2) lessons .children .lesson {
 * 1) lessons .children .lesson {
 * 1) lessons .children .lesson:first-child {
 * 1) CHILD UNIT SECTION #####
 * 2) addLesson,
 * 3) addMooc {
 * 1) addMooc {
 * 1) units .children .unit,
 * 2) lessons .children .lesson .children .unit {
 * 1) units .unit:first-child,
 * 2) lessons .children .lesson .children .unit:first-child {
 * 1) DISCUSSION SECTION #####
 * 1) discussion .thread ol {
 * 1) discussion li {
 * 1) discussion .thread .header .title {
 * 1) discussion .thread .header .num-replies {
 * 1) discussion .post > .content {
 * 1) discussion .post > .content > .message {
 * 1) discussion .meta {
 * 1) discussion .warning {
 * 1) discussion .overlay {
 * 1) discussion .overlay .background {
 * 1) discussion .overlay .content {