Agora vai!

Agora vai!

.qm-material-container {
	.border-radius(3px);
	background: #F5F5F7;
	.box-shadow("1px 1px 1px rgba(0,0,0)");
	width: 680px;
	margin: auto;
}

.qm-material-container .material {
	background: #F5F5F7;
	.border-radius(3px);
	.header {
		.border-radius(3px 3px 0 0);
		height: 50px;
		padding: 0 20px;
		border-bottom: 1px solid @qmGrayBorder;
		.box-shadow(0 1px 0 white);
		background: white;

		&:before {
			float: left;
			margin-top: 15px;
			margin-right: 10px;
		}
	}

	&.video .header::before { content: url(../img/video-video-icon-dark.png); }

	.header .title {
		overflow: hidden;
		line-height: 50px;
		font-size: 18px;
		font-weight: bold;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

    .header.done .points:before {
        background-image: url(../img/content-golden-star.png);
        color: #804B10;
        width: auto;
        padding-right: 28px;
        vertical-align: -7px;
    }

	.header .points {
		float: right;
		height: 50px;
		line-height: 50px;
		#gradient > .vertical(#F4E0B6, #FEF8D3);
		font-size: 14px;
		font-weight: bold;
		border: 1px solid #F4E0B6;
		border-width: 0 1px;
		margin-right: 20px;
		padding: 0 10px;
		color: #D0B787;

		span { color: #804B10; }

		&:before {
			content: '';
			float: left;
			background: url(../img/content-gold-star.png) center right no-repeat;
			height: 20px;
			height: 45px;
			width: 20px;
			margin-right: 7px;
		}
	}

	.header .close {
		line-height: 50px;
		color: #333333 !important;
	}

	.content {
		padding: 15px;
	}

	.content.text {
		background-color: #fff;
		text-align: justify;
		font-size: 14px;
		border-bottom: 1px solid #d7d7d7;
		.box-shadow(0 1px 0 #fff);
		.border-radius(0);

		& > p:last-child {
			margin-bottom: 0;
		}
	}

	.content iframe {
		border: 1px solid @qmGrayBorder;
		margin: 0 5px;
	}

	footer {
		.clearfix();
		padding: 4px 15px 19px;
		height: 26px;

		& > span, & > a {
			vertical-align: middle;
		}

		& > a > .icon-anotation {
			margin-right: 11px;
		}

		button {
			margin-right: 11px;
			margin-top: 2px;
		}
	}
}

.header .pagination {
	list-style: none;
	margin: 0;
	background-color: #F5F5F7;
	height: 50px;

	li {
		display: inline-block;
		height: 50px;
		line-height: 50px;
		font-size: 14px;
		font-weight: bold;
		border: 1px solid #E8E8E8;
		border-width: 0 1px;
		padding: 0 10px;
		color: #64A5AC;
		cursor: pointer;
		.box-shadow(~"0 1px rgba(255,255,255,.5) inset");

		& > i {
			display: inline;
			vertical-align: inherit;

		}
	}

	li + li {
		border-width: 0 1px 0 0;
	}

	li.prev > i {
		margin-right: 7px;
	}

	li.prev[disabled] {
		color: #ddd;
		cursor: default;
	}

	li.next > i {
		margin-left: 7px;
	}

    li.next[disabled] {
        color: #ddd;
        cursor: default;
    }
}

//Tip view from video and exercise lists
.view-tip-box {
	margin-top: 17px;
	.border-radius(3px);
}

.view-tip{
	background-color: #fff;
	.border-radius(3px);
    overflow-y: hidden;

	& > header {
		background-color: #FCF4CE;
		height: 50px;
		font-size: 14px;
		font-weight: bold;
		.border-radius(3px);
		overflow: hidden;
        z-index: 1;
        position: relative;
	}

	& > .collapse {
		.border-radius(0 0 3px 3px);

		&.in {
			border-top: 1px solid #F4E0B6;
		}
	}
}

.tips-action {
	.clearfix();
	padding: 0;
	margin: 0;

	li {
		display: inline-block;
		float: left;
		padding: 16px;
		line-height: 19px;
		border-width: 0 1px 0 0;
		border-style: solid;
		border-color: #F4E0B6;

		&:last-child {
			border-right: 0;
			padding-right: 10px;
		}

		& > a > i {
			display: inline;
			vertical-align: inherit;
		}
	}

	li.prev > a > i {
		margin-right: 7px;
	}

	li.next > a > i {
		margin-left: 7px;
	}
}

.n-tips {
	width: 70px;
	min-width: 70px;
	max-width: 70px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.show-tip > a {
	width: 96px;
	text-align: right;
}

.ask-tips {
	display: inline-block;
	margin-top: 17px;
}

.view-tip-content{
	padding: 23px;
}

.accordion-action {
	background: #ffffff;
	padding: 2px 6px;
	border: 1px solid #E8E8E8;
	display: inline;
	border-radius: 3px;
	vertical-align: baseline;
	margin-left: 6px;
}
//Content answer that is on video and exercise lists
.content-answer-list {
	list-style: none;
	margin-left: 0;
}

.content-answer-letter {
	background-color: #666666;
	.border-radius(9px);
	width: 15px;
	height: 15px;
	text-align: center;
	line-height: 14px;
	padding: 0px;
	color: #fff;
	font-family: Arial;
	font-size: 10px;
	font-weight: bold;
	margin-left: 12px;
	margin-right: 6px;
}

.content-answer {
	.clearfix();
	margin: 5px 0 6.5px;
	line-height: 7px;
	cursor: pointer;
	padding: 4px 8px;
	border: 1px solid transparent;

	& > input[type="radio"] {
		float: left;
	}

	&:hover {
		background-color: #fff;
		.border-radius(3px);
		border: 1px solid #f5f5f7;
	}

	&.selected {
		.qm-noise-background;
		background: #f5f5f7;
		border: 1px solid #f5f5f7;
		.border-radius(3px);
	}
}

.content-answer + .content-answer{
	margin: 10.5px 0;
}

.content-answer-stem p {
	font-size: 14px;
	margin-bottom: 0;
	line-height: 18px;
}

 .content-answer-stem {
	width: 582px;
	//max-width: 588px;
	display: block;
	float: left;
	word-break: break-word;
 }

.content-answer-letter {
	float: left;
	margin-top: 2px;
}

//information about exercises lists
.list-info {
	.clearfix();
	color: #fff;
	font-size: 16px;
	font-weight: bold;
	margin-bottom: 26px;
	padding: 0 22px 0 18px;
	& > .close {
		font-size: 14px;
		color: #fff;
		opacity: 1;
		text-shadow: none;
	}

}

.qm-material-box {
	width: 1121px;
	margin: 0 auto;

	&.has-notebook {
		width: 966px;
		margin: 0 auto;
	}
}

.a-anotation {
	margin-top: 5px;
	font-size: 14px;
}
.qm-material-container .social {
	margin-top: 15px;

	.header {
		.clearfix;
		position: relative;
		padding-bottom: 10px;
		font-size: 14px;
		line-height: 35px;
		font-weight: bold;

		&:after {
			content: '';
			width: 3px;
			height: 13px;
			position: absolute;
			left: 34px;
			top: 33px;
			background: url(../img/social-line-light.png) repeat;
		}
	}

	.header .like {
		.pull-right;
		color: #777777;
		margin-right: 20px;

		&:after {
			content: url(../img/material-social-heart.png);
			vertical-align: middle;
			margin-left: 8px;
		}
	}
}

.qm-material-container .social .posts {
	.qm-noise-background;
	.border-radius(3px);

	h2 {
	    font-size: 16px;
	    color: @qmGrayFontDark;
	    margin-left: 22px;
	}

	& > .accordion-heading {
		.border-radius(3px 3px 0 0);
		background-color: #F5F5F7;
		padding: 8px 0 3px;
        height: 39px;
        .clearfix;
	}

	& > .accordion-heading > a {
		font-size: 14px;
		font-weight: bold;

		& > i {
			background-color: #ffffff;
			padding: 2px 6px;
			border: 1px solid #E8E8E8;
			display: inline;
			border-radius: 3px;
			vertical-align: baseline;
			margin-left: 6px;

			&:last-child {
				background: #fff;
			}
		}
	}

	.post {
		.clearfix;
		position: relative;
		padding: 18px 0 0 46px;

		&:before {
			content: '';
			display: block;
			width: 3px;
			height: 100%;
			position: absolute;
			left: 15px;
			top: 0px;
			background: url(../img/social-line-dark.png) repeat-y;
		}

		&:last-child:before {
			content: '';
			height: 50%;

		}

		&.last {

			&:before {
				height: 85%;
				content: '';
				background-image: url(../img/social-line-circle.png), url(../img/social-line-dark.png);
				background-repeat: no-repeat, repeat-y;
				background-position: bottom, 2px 0;
				padding-top: 23px;
				width: 7px !important;
				margin-left: -2px;
			}
		}
	}

	& > .post {
		padding: 18px 20px 18px 64px;
		border-top: 1px solid @qmGrayBorder;
		.box-shadow(~"inset 0 1px 0 rgba(245, 245, 247, .6)");

		&:before {
			left: 34px;
		}
	}

	.post .voting {
		.pull-right;
		margin-top: -2px;

		a {
			.qm-inline-block;
			text-align: center;
			width: 24px;
			height: 20px;
			color: @qmGrayFont;
			text-shadow: none;
			font-weight: 600;
			border: 1px solid #C8C8C8;
			background: white;
			.border-radius(3px);
			top: -1px;
			position: relative;
			.box-shadow(~"0 1px #D1D1D1");
		}

		i {
			vertical-align: baseline;
		}

		i:before {
			font-size: 13px;
		}

		a:hover { text-decoration: none; }

		a.disabled {
			background: #D7D7D7;
			color: #B9B9B9;
			text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
		}

		a.disabled.plus {
			color: @white;
			background-color: #1CAD48;
			border-color: #1CAD48;
		}

		a.disabled.minus {
			color: @white;
			background-color: #C10500;
			border-color: #C10500;
		}

		.votes {
			font-size: 12px;
			font-weight: 500;
			color: white;
			.qm-inline-block;
			width: 30px;
			height: 20px;
			text-align: center;
			.border-radius(2px);
			vertical-align: 1.6px;
			margin: 0 5px;
			background: #999999;
			border: 1px solid transparent;
		}

		.votes.positive {
			background: #1CAD48;
		}

		.votes.positive:before {
			content: '+';
		}

		.votes.negative {
			background: #C10500;
		}
	}

	.post .author {
		color: #666666;
		font-size: 13px;
		text-shadow: 0 1px 0 rgba(255, 255, 255, .7);
		margin-bottom: 8px;
		padding-top: 2px;
		padding-left: 1px;

		a { font-weight: bold; }
	}

	.post .photo {
		border: 1px solid @qmGrayBorder;
		position: absolute;
		z-index: 1000;
		width: 31px;
		height: 31px;
		left: 0;
		margin-top: 4px;
	}

	& > .post > .photo {
		left: 18px;
	}

	.post .text {
		position: relative;
		display: table;
		table-layout: fixed;
		width: 100%;
		border: 1px solid @qmGrayBorder;
		font-size: 13px;
		color: #333333;
		background: white;
		.border-radius(4px);
		.box-sizing(content-box);
		word-break: break-word;
		.box-shadow(0 1px 0 #D1D1D1);

		&:before {
			content: url(../img/material-post-caret.png);
			float: left;
			position: relative;
			left: -8px;
			top: 14px;
		}

		&>div {
			padding: 13px;
		}
	}

	.actions {
		.box-sizing(border-box);
		border-left: 1px solid @qmGrayBorder;
		display: table-cell;
		vertical-align: middle;
		text-align: center;
		position: relative;
		right: 0;
		padding: 0 10px;
		width: 80px;
	}

	.actions li {
		.qm-inline-block;
		width: 16px;
		height: 18px;
		min-height: 18px;
		margin: 8px 5px;
	}

	.actions a {
		.qm-inline-block;
		width: 16px;
		height: 18px;
		background-repeat: no-repeat;
		background-position: center;
		color: #53A5B1;
		text-decoration: none;
		outline: none;

		i:before{
			font-size: 18px;
		}

		&:hover {
			color: #5AABB4;
		}

	}

	.actions .options.open a i {
		color: #000;
	}

	.actions .options .qm-dropdown-menu {
		min-width: 113px;
		right: 0;
		top: initial;

		li {
			display: block;
			margin: 2px;
			width: auto;
			height: auto;

			a {
				display: block;
				height: auto;
				width: auto;
				text-align: left;
			}
		}
	}

	.load-more:before {
		content: url(../img/social-line-circle.png);
		padding-top: 23px;
		width: 7px !important;
		height: 10px !important;
		margin-left: -2px;
		background-position: 2px 0;
	}

	& > .load-more:before {
		padding-top: 9px;
	}

	& > .load-more {
		border: 0;
		.box-shadow(none);
		padding-top: 0;
	}

	.load-more .text {
		margin-top: -4px;
	}

	.load-more .text {
		text-align: center;
		display: block;
		font-size: 13px;
		font-weight: bold;
		color: #3F848B;
		background: #F5F5F7;
		text-shadow: 0 1px 0 rgba(255, 255, 255, .7);
		line-height: 36px;

		&:before {
			content: url(../img/material-forum-load-more.png);
			float: none;
			position: relative;
			top: 4px;
			left: -10px;
		}
	}
}

.qm-content-container {
	background: #F5F5F7;
	.box-shadow("1px 1px 1px rgba(0,0,0)");
	overflow: hidden;
}

.qm-content-container .qm-content {
	min-width: 600px;
	.border-radius(3px);
	.header {
		height: 50px;
		padding: 0 20px 0 10px;
		border-bottom: 1px solid @qmGrayBorder;
		background: @white;
		color: @qmGrayFontDark;
		.border-radius(3px 3px 0 0);

		&:before {
			float: left;
			margin-top: 15px;
			margin-right: 10px;
		}

		.title {
			overflow: hidden;
			line-height: 56px;
			font-size: 18px;
			font-weight: bold;
			text-overflow: ellipsis;
			white-space: nowrap;

			div {
				.qm-inline-block;
				max-width: 88%;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}

		.close {
			.pull-right;
			line-height: 50px;
			color: @black !important;
		}

		.btn{
			float: right;
			margin-top: 12px;
			margin-right: 20px;

		}
		.points {
			float: right;
			height: 50px;
			line-height: 50px;
			#gradient > .vertical(#F4E0B6, #FEF8D3);
			font-size: 14px;
			font-weight: bold;
			border: 1px solid #F4E0B6;
			border-width: 0 1px;
			margin-right: 20px;
			padding: 0 10px;
			color: #D0B787;

			span { color: #804B10; }

			&:before {
				content: '';
				float: left;
				background: url(../img/content-gray-star.png) center right no-repeat;
				height: 20px;
				height: 45px;
				width: 20px;
				margin-right: 7px;
			}
		}

		&.has-points .points::before {
			background-image: url(../img/content-golden-star.png);
		}

        &.done .points::before {
            background-image: url(../img/content-golden-star.png);
            color: #804B10;
            width: auto;
            padding-right: 28px;
            vertical-align: -7px;
        }

		.exercise-list ~ .points {
			border-left: 0;
		}

		.exercise-list {
			float: right;
			#gradient > .vertical(#CCCCCE, #EDEDEF);
			border: solid @qmGrayBorder;
			border-width: 0 1px 0 1px;
			height: 51px;
			max-width: 310px;
			overflow: hidden;
			padding: 0 8px;
			position: relative;

			&:before {
				content: '';
				height: 50px;
				width: 20px;
				position: absolute;
				top: 0px;
				left: 0px;
				float: left;
				background-color: transparent;
				background: url(../img/exercises-bullets-scroll-left.png) center right no-repeat;
				z-index: 1;
				display: none;
			}
			&.unhideBefore:before {
				display: block;
			}

			&:after {
				content: '';
				height: 50px;
				width: 20px;
				position: absolute;
				top: 0px;
				left: 306px;
				float: left;
				background-color: transparent;
				background: url(../img/exercises-bullets-scroll-right.png) center right no-repeat;
				z-index: 1;
				display: none;
			}
			&.unhideAfter:after {
				display: block;
			}

			ul {
				list-style-type: none;
				width: 2047px;
				left: 0px;
				position: relative;
				margin: 0;
				height: 35px;
				padding-top: 16px;

				li {
					float: left;
					padding: 2px 0 0 0;
					width: 22px;
					height: 20px;
					margin: 0 4px;
					text-align: center;
					color: white;
					font-weight: bold;
					font-size: 12px;
					.box-shadow(0 1px 0 rgba(255,255,255,.6));
					.border-radius(20px);
					background: #BBBBBB;

					&.current {
						background: #488B95;

						&:after {
							content: '';
							#qm-caret > .down(9px, #488B95);
							border-top-width: 12px !important;
							margin-left: 2px;
							margin-top: -3px;
							float: left;
						}

						&.correct:after { #qm-caret > .down(9px, #1CAD48); }

						&.wrong:after { #qm-caret > .down(9px, #DA3923); }
					}

					&.correct { background: #1CAD48 !important; }

					&.wrong { background: #DA3923 !important; }
				}
			}
		}
	}

	&.video .header:before { content: url(../img/video-video-icon-dark.png); }

	&.exercise .title:before { content: url(../img/exercise-details.png); margin-right: 15px; float: left; }
	.icon-search{
		color: @qmGrayFont;
		margin: 17px 11px 17px 13px;

		&:before {
			font-size: 20px;
		}
	}

	.content > iframe.content { padding: 0 !important; }

	.content-no-box-shadow{
		padding: 20px;
	}

	.content {
		position: relative;
		padding: 20px;
		#gradient > .vertical-three-colors(#EDEDEF, #F5F5F7, 10px, #F5F5F7);
		.clearfix;

		p a {
			color: #64A5AC;
			text-decoration: underline;
		}

		.answer {
			.qm-tabbable;
			.qm-noise-background;
			float: right;
			margin-top: 0;
			width: 280px;
			color: @qmGrayFontMid;
			font-weight: bold;
			text-shadow: 0 1px rgba(255,255,255,.70);

			.options > span { margin: 10px 15px; display: block; }

			ul { margin: 5px; }

			li {
				.clearfix;
				margin: 2px 0;
				padding: 5px 10px;
				list-style-type: none;
				font-size: 12px;
				font-weight: normal;
				color: @qmGrayFontDark;

				.letter {
					display: block !important;
					float: left;
					font-weight: bold;
					.qm-inline-block;
					width: 18px;
				}

				div {
					color: @qmA;
					width: 230px;
					max-width: 230px;
					display: block;
					float: left;
					word-break: break-word;

					p{
						color: inherit;
					}

				}

				&.selected {
					background: #FEF8D3;
					.box-shadow(~"inset 1px 0 0 rgba(0, 0, 0, .12), 1px 2px 0 rgba(0,0,0,.12)");
				}

				&.correct {
					background: #D9F1B6 !important;
					color: #5C8723 !important;
				}

				&.wrong {
					background: #F8D7D1 !important;
					color: #DA3923 !important;
				}

				&:hover {
					background: #FEF8D3;
				}
			}

			input[type="text"] {
				&.correct {
					background: #D9F1B6 !important;
				}

				&.wrong {
					background: #FADED8 !important;
				}
			}

			.btn {
				margin: 5px 0 15px 15px;
			}
		}

		.question {
			.qm-tabbable;
			background: #FFFFFF;
			margin-top: 0;
			margin-right: 300px;

			.qm-div-title { padding: 0 10px; line-height: 42px; }

			.qm-exercise-btn {
				display: block;
				float: right;
				outline: 1px solid @qmGrayBorder !important;
				font-weight: bold;
				font-size: 12px;
				text-shadow: 0 1px 0 @white;
				line-height: 26px;
				padding: 0 10px;
				margin-top: 7px;
				margin-right: -3px;
				#gradient > .vertical(#FEF8D3, #F4E0B7);
				color: #7F4B10 !important;
				border-top: 1px solid #FFFCED;
				border-bottom: 1px solid #ECCA82;
			}

			.text {
				margin: 15px 10px;
				font-size: 14px;

				p {
					text-shadow: none;
					word-break: break-word;
				}

				a {
					color: #64A5AC;
					text-decoration: underline;
				}
			}

			.tip {
				background: #FEF8D3;
				border: 1px solid #F4E0B6;
				margin: 15px 10px;
				padding: 15px 10px;
				color: #7F4B10;
				font-size: 14px;
				text-shadow: 0 1px rgba(255,255,255,.70);
			}
		}
	}
}

//content select serie
.content{
	.border-radius(0 0 3px 3px);

	.fluid-box {
		padding: 0 8.5px;
	}

	label{
		color: @qmGrayFontMid;
		font-size: 13px;
		float: left;
		clear: both;
		margin: 14px 15px 10px;
	}
}

.exercise-lists {
  color: @white;
  font-size: 13px;
  font-weight: bold;
  text-shadow: 0 1px 0 rgba(0,0,0,.3);
  line-height: 35px;
  padding: 0 10px;
  width: 94.8%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  position: relative;
  left: -1px;
  margin: 4.5px 0;
  border-top: 1px solid #ABD2D7;
  border-bottom: 1px solid #4D969F;
  #gradient > .vertical(#85BDC5, #64ADB6);
  .border-radius(3px);
  .box-shadow(~"0 1px rgba(0,0,0,.12)");
  cursor: pointer;

  & > i:before {
		content: url(../img/exercise-serie.png);
		top: 3px;
		position: relative;
		padding:0 9px 0 10px;
	}

	&.checked {
		border-top: 1px solid #8FBDC3;
		#gradient > .vertical(#5DA0A8, #0C7784);

	}

	.qm-checkbox{
		vertical-align: -3px;
	}
}

.student-lists {
  background-color: @grayBar;
  color: @qmGrayFontDark;
  font-size: 13px;
  font-weight: bold;
  width: 100%;
  overflow: hidden;
  position: relative;
  display: block;
  float: left;
  margin: 5px 0;
  .border-radius(3px);
  .box-shadow(~"0 1px rgba(0,0,0,.12)");

  img {
	.border-radius(3px 0 0 3px);
}

.qm-checkbox {
	margin-top: 12px;
	margin-right: 11px;
}

& > span {
	margin-left: 15px;
	position: absolute;
	top: 12px;
	width: 63%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

&.checked {
	background-color: @qmagicoLaranja;
}

.qm-checkbox{
	vertical-align: -3px;
	position: relative;
	z-index: 1;
}
}

.qm-content-container.container-select-serie{
	margin: 83px 150px;
	.border-radius(3px);
	.content{
		padding: 10px 7px 7px;
	}
}
.qm-content-container .qm-forum {
  margin: -20px 15px 0 15px;
  background: url(../img/gray-stripe.png) repeat-y 15px top;

  .options {
	padding: 20px 5px;
	font-size: 14px;
	font-weight: bold;

	.likes, .points {
	  float: right;
	  color: @qmGrayFontMid;
	  line-height: 40px;

	  &:hover { text-decoration: none; }

	  &:after {
			vertical-align: middle;
			padding-left: 6px;
		}
	}

		.points { margin-right: 17px; }

		.likes:after { content: url(../img/video-heart-button.png); }

		.points:after { content: url(../img/video-star-button.png); }

		.comment {
		  color: #334672;
		  background: #F5F5F7;
		  .qm-inline-block;
		  text-shadow: 0 1px 0 @white;
		  margin-left: -5px;

		  &:before {
		    .qm-inline-block;
		    border: 1px solid @qmGrayBorder;
		    margin-right: 10px;
		    vertical-align: middle;
		    .border-radius(4px);
		    text-align: center;
		    content: url(../img/video-comments-plus.png);
		    background: url(../img/header-background.png);
		    padding: 11px 10px 6px 10px;
		  }
		}
	}

.post {
	padding-bottom: 7px;

	.photo {
	  background: #F5F5F7;
	  width: 31px;
	  height: 31px;
	  padding: 2px 0 4px 0;
	  float: left;

	  img {
		width: 31px;
		height: 31px;
		border: 1px solid @qmGrayBorder;
	  }
	}

	.text {
	  background: @white;
	  border: 1px solid @qmGrayBorder;
	  .border-radius(4px);
	  margin-left: 55px;
	  padding: 10px 15px;
	  color: @qmGrayFont;
	  font-size: 12px;

	  	&:before {
			content: '';
			width: 10px;
			height: 16px;
			background-repeat: no-repeat;
			background-image: url(../img/video-post-caret.png);
			float: left;
			margin-top: 2px;
			margin-left: -23px;
		}

		.author {
			font-size: 13px;
			color: #334773;
			font-weight: bold;
		}

		.dot { font-size: 17px; padding: 0 4px; color: #D1D1D1; }

		.upvote {
			#qm-caret > .up(5px, #1CAD48);
			.qm-inline-block;
			vertical-align: 2px;
			margin: 0 2px;
		}

		.downvote {
			#qm-caret > .down(5px, #EA0000);
			.qm-inline-block;
			vertical-align: -3px;
			margin: 0 2px;
		}

		.votes {
			padding-left: 4px;
			font-weight: bold;
			color: #1CAD48;
		}

		p {
			color: @qmGrayFontDark;
			margin: 5px 0 0 0;
			word-break: break-word;
		}
	}

	.text.compose {
	  width: initial !important;
	  .qm-noise-background;
	  padding: 10px;

	  &:before {
		margin-left: -19px;
		content: url(../img/caret-left-striped.png) !important;
		width: 8px;
	  }

	  .btn {
		margin: 7px 2px;
	  }

	  .btn.publish {
	 	margin-right: 5px;
	  }
	}
}

.replies {
	margin-left: 55px;
}

.links {
	margin-left: 60px;
	padding-bottom: 15px;
	font-weight: bold;
	font-size: 12px;
	color: #D1D1D1;

	a { color: #334672; }

	&:before {
	  content: url(../img/video-comment-arrow.png);
	  padding-right: 7px;
  }
}
}

.photo {
	.border-radius(17px;)
}
.photo > img {
	.border-radius(17px;)
}

.text.compose {
	padding: 8px 10px 0;
	width: 97% !important;
	border-color: #B3B3B3 #C6C6C6 #D1D1D1 !important;
	.box-shadow(~"0 1px rgba(0,0,0,.05) inset !important");

	&:before {
		margin-left: -18px;
		content: url("../img/compose-left-arrow.png") !important;
		width: 8px;
		left: 0 !important;
		top: 4px !important;
	}

	textarea {
		color: @qmGrayFontMid;
		display: block;
		width: 94%;
		padding: 15px 17px 0;
		margin-bottom: 8px;
		line-height: 12px;
		border-width: 1px;
		border-style: solid;
		border-color: #ADADAD #B7B7B7 #B7B7B7 !important;
		background: @white;
		resize: none;
		font-size: 12px;
		color: @qmGrayFontDark;
		text-align: justify;
		.box-shadow(none);
	}

	.toolbar {
		display: block;
		line-height: 36px;
		padding: 0 !important;
		margin-bottom: 9px;
		padding-left: 13px !important;

		& > a {
			font-weight: bold;
			text-shadow: 0 1px rgba(255,255,255,.7);
		}

		&:after {
			content: '';
			clear: both;
			display: table;
		}
	}

	.btn {
		margin: 0 4px;
	}

	.btn.publish {
		margin-right: 0;
	}
}

.qm-notebook-box {
	right: 38px;
	width: 267px;
	height: 502px;
	float: right;

	&.has-notebook {
		width: 420px;
		margin: 0;
	}
}

.qm-notebook-fixed {
	& > .qm-notebook {
		position: relative;
		display: block;

		& > .header {
			font-size: 16px;
			margin: 0 17px 33px 38px;
			top: 17px;
			position: relative;
		}
	}
}

.old-qm-nb {
	position: relative;
	float: right;

	.qm-notebook {
		position: static;
		display: inline-block;
		margin-left: 18px;
	}
}

.qm-notebook {
	position: fixed;
	width: 420px;
	height: 502px;
	background-color: #FFFFFF;
	.border-radius(3px);

	.margin {
		position: absolute;
		width: 4px;
		border: 1px solid #FDB9BB;
		border-width: 0 1px;
		height: 502px;
		margin-left: 19px;
	}

	.header {
		font-size: 16px;
		margin: 19px 17px 16px 38px;

		.date {
			margin-left: 5px;
			border: 1px solid #EBEBEB;
			.border-radius(3px);
			padding: 10px 8px;
		}
	}

	.text-container {
		height: 394px;
		background: url(../img/annotation-line-sep.png) repeat-y;
		width: 100%;
		overflow: hidden;
		cursor: text;
	}

	.control {
		margin-top: 9px;
		margin-left: 35px;
		position: relative;

		.clearfix;

		.btn {
			margin-top: 3px;
		}

		.toolbar {
			.qm-editor > .toolbar;
			.pull-right;
			width: auto;
			background: none;
			margin-top: -2px;
			border: 0;
			right: 9px;
			.box-shadow(none);

			a {
				margin: 6px 1px !important;
			}
		}

		& > .saved-message {
			margin-top: 8px;
			margin-left: 8px;

		}
	}

	#note-text {
		margin-left: 35px;
		margin-right: 6px;
		outline: none;
		background-color: transparent;
		border: 0;
		resize: none;
		overflow: hidden;
		min-height: 380px;
		.box-shadow(0px 0px 0px rgba(0,0,0,0));
		font-family: Georgia;
		font-style: italic;
	}

	/* basic scrollbar styling */
	.mCSB_container{
		width:auto;
		margin-right:30px;
		overflow:hidden;
	}

	.mCSB_container.mCS_no_scrollbar {
		margin-right:0;
	}

	.mCS_disabled .mCSB_container.mCS_no_scrollbar,
	.mCS_destroyed .mCSB_container.mCS_no_scrollbar{
		margin-right:30px;
	}
	.mCustomScrollBox .mCSB_scrollTools{
		width:16px;
		height:100%;
		top:0;
		right:0;
		margin-right: 5px;
	}
	.mCSB_scrollTools {
		.mCSB_draggerContainer{
		  height:100%;
		  -webkit-box-sizing:border-box;
		  -moz-box-sizing:border-box;
		  box-sizing:border-box;
	  }

	  .mCSB_buttonUp+.mCSB_draggerContainer{
		  padding-bottom:40px;
	  }

	  .mCSB_draggerRail{
		  width:2px;
		  height:100%;
		  margin:0 auto;
		  .border-radius(10px);
	  }

	  .mCSB_dragger{
		cursor:pointer;
		width:100%;
		height:30px;

		.mCSB_dragger_bar{
			width:4px;
			height:100%;
			margin:0 auto;
			.border-radius(10px);
			text-align:center;
		}
	}

	.mCSB_buttonUp, .mCSB_buttonDown{
		height:20px;
		overflow:hidden;
		margin:0 auto;
		cursor:pointer;
	}

	.mCSB_buttonDown{
		bottom:0;
		margin-top:-40px;
	}
}

/* scrollbar colors and backgrounds */
.mCSB_scrollTools{
	opacity:0.75;
}

.mCSB_dragger_bar{
	background:#fff; /* rgba fallback */
	background:rgba(255,255,255,0.75);
	filter:"alpha(opacity=75)"; -ms-filter:"alpha(opacity=75)"; /* old ie */
}
.mCSB_dragger:hover .mCSB_dragger_bar{
	background:rgba(255,255,255,0.85);
	filter:"alpha(opacity=85)"; -ms-filter:"alpha(opacity=85)"; /* old ie */
}
.mCSB_dragger:active .mCSB_dragger_bar,
.mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{
	background:rgba(255,255,255,0.9);
	filter:"alpha(opacity=90)"; -ms-filter:"alpha(opacity=90)"; /* old ie */
}

.mCustomScrollBox:hover .mCSB_scrollTools{
	opacity:1;
}

.mCSB_dragger .mCSB_dragger_bar{
	width:5px;
	background: rgb(0, 0, 0, 0.20);
	.box-shadow(1px 1px 1px rgba(0,0,0,.5));
}
.mCSB_dragger:hover .mCSB_dragger_bar,
.mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{
	background: rgb(0, 0, 0, 0.20);
}
.mCSB_dragger:active .mCSB_dragger_bar,
.mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{
	.box-shadow(0 0 2px rgba(0,0,0,.5));
}

.mCSB_draggerRail{
	background:#000; /* rgba fallback */
	background:rgba(206, 172, 122, 0.0);
	filter:"alpha(opacity=40)"; -ms-filter:"alpha(opacity=40)"; /* old ie */
}

.text {
	color: @qmGrayFontDark !important;
	line-height: 30px !important;

	width: 353px;
	margin-left: 45px;

	& > div {
		height: 30px !important;
	}

	.header {
		font-size: 16px;
		margin: 19px 0 16px 38px;
		.clearfix;

		.title {
			float: left;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.date {
			clear: left;
			float: right;
			margin-right: 15px;
		}
	}

	p {
		height: 30px !important;
		font-size: 13px;
		margin: auto;
		text-shadow: inherit;
	}
}
}

.has-notebook {
	margin-right: 441px;
	right: 50px;
	.transition(0.1s linear);
}

.has-not-notebook {
	margin-right: 200px;
	.transition(0.1s linear);
}

.has-not-notebook-exercise {
	margin-right: 286px;
	.transition(0.1s linear);
}

.material-answers {
	.border-radius(3px);
	width: 267px;
	margin-top: 14px;

	& > header {
		color: #868686;
		font-size: 14px;
		background-color: #fff;
		padding: 17px 18px 14px;
		border-bottom: 1px solid #E8E8E8;
		.box-shadow(1px #fff);
		.border-radius(3px 3px 0 0);

		& > i {
			vertical-align: -2px;
			margin-right: 15px;

			&:before {
				font-size: 22px;
				color: #9A9A9A;
			}
		}

		& > span {
			font-size: 18px;

			b {
				font-weight: bold;
			}
		}

		i, span, p {
			display: inline-block;
		}
	}

	& > footer {
		.clearfix();
		background-color: #F5F5F7;
		padding: 8.5px 3px 8.5px 9px;
		.border-radius(0 0 3px 3px);

		& > ul {
			.clearfix();
			margin: 0;
		}
	}
}

@media screen and (max-width: 1199px){
	.qm-material-box {
		width: 966px;
	}
	.qm-notebook-box, .qm-notebook {
		width: 267px;

		.text {
			width: 214px;
		}
	}

	.qm-notebook-box, .qm-notebook, .margin {
		height: 525px !important;
	}

	.qm-notebook-box.has-notebook {
		width: 267px !important;
		margin: 0;
	}

	.control > .saved-message {
		margin-top: 7px !important;
		margin-left: 0 !important;
		float: left;
		clear: left;
	}

	.has-notebook, .has-not-notebook-exercise {
		margin-right: 283px;
	}

	.has-not-notebook {
		margin-right: 149px;
	}

	.qm-hover-layer {
		min-width: 1085px !important;
	}

	.material-answers {
		top: 616px !important;
	}
}

.answer-item {
  width: 45px;
  float: left;
  margin: 0 6px 7px 0;
  text-align: center;
  line-height: 24px;
  height: 26px;
  border: 1px solid #dbdbdb;
  cursor: pointer;
  background: white;
  .border-radius(3px);
  font-size: 13px;
  font-weight: bold;
  .box-sizing(border-box);

  &.correct {
  	background-color: #1CAD48;
  	color: #fff;
  }

  &.wrong {
  	background-color: #C10500;
  	color: #fff;
  }

  &.current {
  	background-color: #53A5B1;
  	color: #fff;
  }
}

.student-score {
	font-size: 12px;
	font-weight: bold;
	color: #725021;
	background-color: #EBAE20;
	padding: 4px 5px 5px 4px;
	margin-left: 7px;
	.border-radius(3px);

	.icon-star {
		display: inline-table;
		background: none;
		&:before {
			font-size: 13px;
			vertical-align: -2.4px;
			margin-right: 4px;
		}
	}
}

.anotation-box {
	width: 234px;
	display: inline-block;
	background-color: #fff;
	padding: 13px 16px 12px;
	cursor: pointer;
	.border-radius(3px);

	& > .a-anotation > .icon-anotation {
		margin-right: 11px;
	}
}

// Simulated Instructions
.simulated-instructions{
	margin: 5px 234px;

	.title:before{
		content: url(../img/simulated-instructions-icon.png)!important;
		position: relative;
		top: 3px;
	}

	h1{
		font-size: 14px;
		font-weight: bold;
	}

	p{
		font-size: 13px;
	}
}

.instructions-legend{
	left: 0;
	margin: 0;
	width: 100%;
	li{
		padding: 16px 21px 15px 19px;
		border-bottom: 1px solid #E6E6E7;
		list-style: none;

		&:first-child{
			.box-shadow(~"0 1px #fff inset");

			b{
				color: #DF3924;
			}
		}

		i{
			color: #AAAAAA;
			float: left;
			margin-right: 17px;
			height: 31px;

			&.qm-icon-working-time{
				margin-top: 8px;
				margin-left: 3px;
			}

			&.icn-pencil{
				margin-left: 5px;
				margin-right: 18px;
			}
		}
	}

	&:after{
		.clearfix;
	}
}

.simulated-buttons{
	position: relative;
	margin: 33px auto 0;
	display: table;

	button{
		margin: 0 5px;
	}
}

//Toggle Notebook
.hide-notebook {
	width: 0;
	height: 0;
	.transition(0.2s linear);
	opacity: 0;
	position: absolute !important;
}

.show-notebook {
	.transition(0.2s linear);
}

.hide-video-notebook {
	.transition(0.1s linear);
	opacity: 0;
	position: absolute !important;
    width: 0;
}

.slidedown-enter,
.slidedown-leave
{
    .transition(0.3s cubic-bezier(0.250, 0.250, 0.750, 0.750) all);
}

.slidedown-enter.slidedown-enter-active,
.slidedown-leave {
}

.slidedown-leave.slidedown-leave-active,
.slidedown-enter {
    height: 0px;
}

.slidedown-show,
.slidedown-hide
{
    .transition(200ms linear);
    & > div {
        .transition(200ms linear);
        & > * {
            .transition(200ms linear);
        }
    }
}
.slidedown-show, .slidedown-hide.slidedown-hide-active {
    line-height: 0px;
    & > div {
        padding-top: 0px;
        padding-bottom: 0px;
        & > * {
            margin: 0px;
        }
    }
}
.slidedown-hide, .slidedown-show.slidedown-show-active {
    line-height: 18px;
    & > div {
        padding-top: 23px;
        padding-bottom: 23px;
        & > * {
            margin: 0 0 9px;
        }
    }
}

.qm-material-container {
	.border-radius(3px);
	background: #F5F5F7;
	.box-shadow("1px 1px 1px rgba(0,0,0)");
	width: 680px;
	margin: auto;
}

.qm-material-container .material {
	background: #F5F5F7;
	.border-radius(3px);
	.header {
		.border-radius(3px 3px 0 0);
		height: 50px;
		padding: 0 20px;
		border-bottom: 1px solid @qmGrayBorder;
		.box-shadow(0 1px 0 white);
		background: white;

		&:before {
			float: left;
			margin-top: 15px;
			margin-right: 10px;
		}
	}

	&.video .header::before { content: url(../img/video-video-icon-dark.png); }

	.header .title {
		overflow: hidden;
		line-height: 50px;
		font-size: 18px;
		font-weight: bold;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.header .points {
		float: right;
		height: 50px;
		line-height: 50px;
		#gradient > .vertical(#F4E0B6, #FEF8D3);
		font-size: 14px;
		font-weight: bold;
		border: 1px solid #F4E0B6;
		border-width: 0 1px;
		margin-right: 20px;
		padding: 0 10px;
		color: #D0B787;

		span { color: #804B10; }

		&:before {
			content: '';
			float: left;
			background: url(../img/content-golden-star.png) center right no-repeat;
			height: 20px;
			height: 45px;
			width: 20px;
			margin-right: 7px;
		}
	}

	.header .close {
		line-height: 50px;
		color: #333333 !important;
	}

	.content {
		padding: 15px;
	}

	.content.text {
		background-color: #fff;
		text-align: justify;
		font-size: 14px;
		border-bottom: 1px solid #d7d7d7;
		.box-shadow(0 1px 0 #fff);
		.border-radius(0);

		& > p:last-child {
			margin-bottom: 0;
		}
	}

	.content iframe {
		border: 1px solid @qmGrayBorder;
		margin: 0 5px;
	}

	footer {
		.clearfix();
		padding: 4px 15px 19px;
		height: 26px;

		& > span, & > a {
			vertical-align: middle;
		}

		& > a > .icon-anotation {
			margin-right: 11px;
		}

		button {
			margin-right: 11px;
			margin-top: 2px;
		}
	}
}

.header .pagination {
	list-style: none;
	margin: 0;
	background-color: #F5F5F7;
	height: 50px;

	li {
		display: inline-block;
		height: 50px;
		line-height: 50px;
		font-size: 14px;
		font-weight: bold;
		border: 1px solid #E8E8E8;
		border-width: 0 1px;
		padding: 0 10px;
		color: #64A5AC;
		cursor: pointer;
		.box-shadow(~"0 1px rgba(255,255,255,.5) inset");

		& > i {
			display: inline;
			vertical-align: inherit;

		}
	}

	li + li {
		border-width: 0 1px 0 0;
	}

	li.prev > i {
		margin-right: 7px;
	}

	li.prev[disabled] {
		color: #ddd;
		cursor: default;
	}

	li.next > i {
		margin-left: 7px;
	}

    li.next[disabled] {
        color: #ddd;
        cursor: default;
    }
}

//Tip view from video and exercise lists
.view-tip-box {
	margin-top: 17px;
	.border-radius(3px);
}

.view-tip{
	background-color: #fff;
	.border-radius(3px);
    overflow-y: hidden;

	& > header {
		background-color: #FCF4CE;
		height: 50px;
		font-size: 14px;
		font-weight: bold;
		.border-radius(3px);
		overflow: hidden;
        z-index: 1;
        position: relative;
	}

	& > .collapse {
		.border-radius(0 0 3px 3px);

		&.in {
			border-top: 1px solid #F4E0B6;
		}
	}
}

.tips-action {
	.clearfix();
	padding: 0;
	margin: 0;

	li {
		display: inline-block;
		float: left;
		padding: 16px;
		line-height: 19px;
		border-width: 0 1px 0 0;
		border-style: solid;
		border-color: #F4E0B6;

		&:last-child {
			border-right: 0;
			padding-right: 10px;
		}

		& > a > i {
			display: inline;
			vertical-align: inherit;
		}
	}

	li.prev > a > i {
		margin-right: 7px;
	}

	li.next > a > i {
		margin-left: 7px;
	}
}

.n-tips {
	width: 70px;
	min-width: 70px;
	max-width: 70px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.show-tip > a {
	width: 96px;
	text-align: right;
}

.ask-tips {
	display: inline-block;
	margin-top: 17px;
}

.view-tip-content{
	padding: 23px;
}

.accordion-action {
	background: #ffffff;
	padding: 2px 6px;
	border: 1px solid #E8E8E8;
	display: inline;
	border-radius: 3px;
	vertical-align: baseline;
	margin-left: 6px;
}
//Content answer that is on video and exercise lists
.content-answer-list {
	list-style: none;
	margin-left: 0;
}

.content-answer-letter {
	background-color: #666666;
	.border-radius(9px);
	width: 15px;
	height: 15px;
	text-align: center;
	line-height: 14px;
	padding: 0px;
	color: #fff;
	font-family: Arial;
	font-size: 10px;
	font-weight: bold;
	margin-left: 12px;
	margin-right: 6px;
}

.content-answer {
	.clearfix();
	margin: 5px 0 6.5px;
	line-height: 7px;
	cursor: pointer;
	padding: 4px 8px;
	border: 1px solid transparent;

	& > input[type="radio"] {
		float: left;
	}

	&:hover {
		background-color: #fff;
		.border-radius(3px);
		border: 1px solid #f5f5f7;
	}

	&.selected {
		.qm-noise-background;
		background: #f5f5f7;
		border: 1px solid #f5f5f7;
		.border-radius(3px);
	}
}

.content-answer + .content-answer{
	margin: 10.5px 0;
}

.content-answer-stem p {
	font-size: 14px;
	margin-bottom: 0;
	line-height: 18px;
}

 .content-answer-stem {
	width: 582px;
	//max-width: 588px;
	display: block;
	float: left;
	word-break: break-word;
 }

.content-answer-letter {
	float: left;
	margin-top: 2px;
}

//information about exercises lists
.list-info {
	.clearfix();
	color: #fff;
	font-size: 16px;
	font-weight: bold;
	margin-bottom: 26px;
	padding: 0 22px 0 18px;
	& > .close {
		font-size: 14px;
		color: #fff;
		opacity: 1;
		text-shadow: none;
	}

}

.qm-material-box {
	width: 1121px;
	margin: 0 auto;

	&.has-notebook {
		width: 966px;
		margin: 0 auto;
	}
}

.a-anotation {
	margin-top: 5px;
	font-size: 14px;
}
.qm-material-container .social {
	margin-top: 15px;

	.header {
		.clearfix;
		position: relative;
		padding-bottom: 10px;
		font-size: 14px;
		line-height: 35px;
		font-weight: bold;

		&:after {
			content: '';
			width: 3px;
			height: 13px;
			position: absolute;
			left: 34px;
			top: 33px;
			background: url(../img/social-line-light.png) repeat;
		}
	}

	.header .like {
		.pull-right;
		color: #777777;
		margin-right: 20px;

		&:after {
			content: url(../img/material-social-heart.png);
			vertical-align: middle;
			margin-left: 8px;
		}
	}
}

.qm-material-container .social .posts {
	.qm-noise-background;
	.border-radius(3px);

	h2 {
	    font-size: 16px;
	    color: @qmGrayFontDark;
	    margin-left: 22px;
	}

	& > .accordion-heading {
		.border-radius(3px 3px 0 0);
		background-color: #F5F5F7;
		padding: 8px 0 3px;
        height: 39px;
        .clearfix;
	}

	& > .accordion-heading > a {
		font-size: 14px;
		font-weight: bold;

		& > i {
			background-color: #ffffff;
			padding: 2px 6px;
			border: 1px solid #E8E8E8;
			display: inline;
			border-radius: 3px;
			vertical-align: baseline;
			margin-left: 6px;

			&:last-child {
				background: #fff;
			}
		}
	}

	.post {
		.clearfix;
		position: relative;
		padding: 18px 0 0 46px;

		&:before {
			content: '';
			display: block;
			width: 3px;
			height: 100%;
			position: absolute;
			left: 15px;
			top: 0px;
			background: url(../img/social-line-dark.png) repeat-y;
		}

		&:last-child:before {
			content: '';
			height: 50%;

		}

		&.last {

			&:before {
				height: 85%;
				content: '';
				background-image: url(../img/social-line-circle.png), url(../img/social-line-dark.png);
				background-repeat: no-repeat, repeat-y;
				background-position: bottom, 2px 0;
				padding-top: 23px;
				width: 7px !important;
				margin-left: -2px;
			}
		}
	}

	& > .post {
		padding: 18px 20px 18px 64px;
		border-top: 1px solid @qmGrayBorder;
		.box-shadow(~"inset 0 1px 0 rgba(245, 245, 247, .6)");

		&:before {
			left: 34px;
		}
	}

	.post .voting {
		.pull-right;
		margin-top: -2px;

		a {
			.qm-inline-block;
			text-align: center;
			width: 24px;
			height: 20px;
			color: @qmGrayFont;
			text-shadow: none;
			font-weight: 600;
			border: 1px solid #C8C8C8;
			background: white;
			.border-radius(3px);
			top: -1px;
			position: relative;
			.box-shadow(~"0 1px #D1D1D1");
		}

		i {
			vertical-align: baseline;
		}

		i:before {
			font-size: 13px;
		}

		a:hover { text-decoration: none; }

		a.disabled {
			background: #D7D7D7;
			color: #B9B9B9;
			text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
		}

		a.disabled.plus {
			color: @white;
			background-color: #1CAD48;
			border-color: #1CAD48;
		}

		a.disabled.minus {
			color: @white;
			background-color: #C10500;
			border-color: #C10500;
		}

		.votes {
			font-size: 12px;
			font-weight: 500;
			color: white;
			.qm-inline-block;
			width: 30px;
			height: 20px;
			text-align: center;
			.border-radius(2px);
			vertical-align: 1.6px;
			margin: 0 5px;
			background: #999999;
			border: 1px solid transparent;
		}

		.votes.positive {
			background: #1CAD48;
		}

		.votes.positive:before {
			content: '+';
		}

		.votes.negative {
			background: #C10500;
		}
	}

	.post .author {
		color: #666666;
		font-size: 13px;
		text-shadow: 0 1px 0 rgba(255, 255, 255, .7);
		margin-bottom: 8px;
		padding-top: 2px;
		padding-left: 1px;

		a { font-weight: bold; }
	}

	.post .photo {
		border: 1px solid @qmGrayBorder;
		position: absolute;
		z-index: 1000;
		width: 31px;
		height: 31px;
		left: 0;
		margin-top: 4px;
	}

	& > .post > .photo {
		left: 18px;
	}

	.post .text {
		position: relative;
		display: table;
		table-layout: fixed;
		width: 100%;
		border: 1px solid @qmGrayBorder;
		font-size: 13px;
		color: #333333;
		background: white;
		.border-radius(4px);
		.box-sizing(content-box);
		word-break: break-word;
		.box-shadow(0 1px 0 #D1D1D1);

		&:before {
			content: url(../img/material-post-caret.png);
			float: left;
			position: relative;
			left: -8px;
			top: 14px;
		}

		&>div {
			padding: 13px;
		}
	}

	.actions {
		.box-sizing(border-box);
		border-left: 1px solid @qmGrayBorder;
		display: table-cell;
		vertical-align: middle;
		text-align: center;
		position: relative;
		right: 0;
		padding: 0 10px;
		width: 80px;
	}

	.actions li {
		.qm-inline-block;
		width: 16px;
		height: 18px;
		min-height: 18px;
		margin: 8px 5px;
	}

	.actions a {
		.qm-inline-block;
		width: 16px;
		height: 18px;
		background-repeat: no-repeat;
		background-position: center;
		color: #53A5B1;
		text-decoration: none;
		outline: none;

		i:before{
			font-size: 18px;
		}

		&:hover {
			color: #5AABB4;
		}

	}

	.actions .options.open a i {
		color: #000;
	}

	.actions .options .qm-dropdown-menu {
		min-width: 113px;
		right: 0;
		top: initial;

		li {
			display: block;
			margin: 2px;
			width: auto;
			height: auto;

			a {
				display: block;
				height: auto;
				width: auto;
				text-align: left;
			}
		}
	}

	.load-more:before {
		content: url(../img/social-line-circle.png);
		padding-top: 23px;
		width: 7px !important;
		height: 10px !important;
		margin-left: -2px;
		background-position: 2px 0;
	}

	& > .load-more:before {
		padding-top: 9px;
	}

	& > .load-more {
		border: 0;
		.box-shadow(none);
		padding-top: 0;
	}

	.load-more .text {
		margin-top: -4px;
	}

	.load-more .text {
		text-align: center;
		display: block;
		font-size: 13px;
		font-weight: bold;
		color: #3F848B;
		background: #F5F5F7;
		text-shadow: 0 1px 0 rgba(255, 255, 255, .7);
		line-height: 36px;

		&:before {
			content: url(../img/material-forum-load-more.png);
			float: none;
			position: relative;
			top: 4px;
			left: -10px;
		}
	}
}

.qm-content-container {
	background: #F5F5F7;
	.box-shadow("1px 1px 1px rgba(0,0,0)");
	overflow: hidden;
}

.qm-content-container .qm-content {
	min-width: 600px;
	.border-radius(3px);
	.header {
		height: 50px;
		padding: 0 20px 0 10px;
		border-bottom: 1px solid @qmGrayBorder;
		background: @white;
		color: @qmGrayFontDark;
		.border-radius(3px 3px 0 0);

		&:before {
			float: left;
			margin-top: 15px;
			margin-right: 10px;
		}

		.title {
			overflow: hidden;
			line-height: 56px;
			font-size: 18px;
			font-weight: bold;
			text-overflow: ellipsis;
			white-space: nowrap;

			div {
				.qm-inline-block;
				max-width: 88%;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}

		.close {
			.pull-right;
			line-height: 50px;
			color: @black !important;
		}

		.btn{
			float: right;
			margin-top: 12px;
			margin-right: 20px;

		}
		.points {
			float: right;
			height: 50px;
			line-height: 50px;
			#gradient > .vertical(#F4E0B6, #FEF8D3);
			font-size: 14px;
			font-weight: bold;
			border: 1px solid #F4E0B6;
			border-width: 0 1px;
			margin-right: 20px;
			padding: 0 10px;
			color: #D0B787;

			span { color: #804B10; }

			&:before {
				content: '';
				float: left;
				background: url(../img/content-gray-star.png) center right no-repeat;
				height: 20px;
				height: 45px;
				width: 20px;
				margin-right: 7px;
			}
		}

		&.has-points .points::before {
			background-image: url(../img/content-golden-star.png);
		}

        &.done .points::before {
            background-image: url(../img/content-golden-star.png);
            color: #804B10;
            width: auto;
            padding-right: 28px;
            vertical-align: -7px;
        }

		.exercise-list ~ .points {
			border-left: 0;
		}

		.exercise-list {
			float: right;
			#gradient > .vertical(#CCCCCE, #EDEDEF);
			border: solid @qmGrayBorder;
			border-width: 0 1px 0 1px;
			height: 51px;
			max-width: 310px;
			overflow: hidden;
			padding: 0 8px;
			position: relative;

			&:before {
				content: '';
				height: 50px;
				width: 20px;
				position: absolute;
				top: 0px;
				left: 0px;
				float: left;
				background-color: transparent;
				background: url(../img/exercises-bullets-scroll-left.png) center right no-repeat;
				z-index: 1;
				display: none;
			}
			&.unhideBefore:before {
				display: block;
			}

			&:after {
				content: '';
				height: 50px;
				width: 20px;
				position: absolute;
				top: 0px;
				left: 306px;
				float: left;
				background-color: transparent;
				background: url(../img/exercises-bullets-scroll-right.png) center right no-repeat;
				z-index: 1;
				display: none;
			}
			&.unhideAfter:after {
				display: block;
			}

			ul {
				list-style-type: none;
				width: 2047px;
				left: 0px;
				position: relative;
				margin: 0;
				height: 35px;
				padding-top: 16px;

				li {
					float: left;
					padding: 2px 0 0 0;
					width: 22px;
					height: 20px;
					margin: 0 4px;
					text-align: center;
					color: white;
					font-weight: bold;
					font-size: 12px;
					.box-shadow(0 1px 0 rgba(255,255,255,.6));
					.border-radius(20px);
					background: #BBBBBB;

					&.current {
						background: #488B95;

						&:after {
							content: '';
							#qm-caret > .down(9px, #488B95);
							border-top-width: 12px !important;
							margin-left: 2px;
							margin-top: -3px;
							float: left;
						}

						&.correct:after { #qm-caret > .down(9px, #1CAD48); }

						&.wrong:after { #qm-caret > .down(9px, #DA3923); }
					}

					&.correct { background: #1CAD48 !important; }

					&.wrong { background: #DA3923 !important; }
				}
			}
		}
	}

	&.video .header:before { content: url(../img/video-video-icon-dark.png); }

	&.exercise .title:before { content: url(../img/exercise-details.png); margin-right: 15px; float: left; }
	.icon-search{
		color: @qmGrayFont;
		margin: 17px 11px 17px 13px;

		&:before {
			font-size: 20px;
		}
	}

	.content > iframe.content { padding: 0 !important; }

	.content-no-box-shadow{
		padding: 20px;
	}

	.content {
		position: relative;
		padding: 20px;
		#gradient > .vertical-three-colors(#EDEDEF, #F5F5F7, 10px, #F5F5F7);
		.clearfix;

		p a {
			color: #64A5AC;
			text-decoration: underline;
		}

		.answer {
			.qm-tabbable;
			.qm-noise-background;
			float: right;
			margin-top: 0;
			width: 280px;
			color: @qmGrayFontMid;
			font-weight: bold;
			text-shadow: 0 1px rgba(255,255,255,.70);

			.options > span { margin: 10px 15px; display: block; }

			ul { margin: 5px; }

			li {
				.clearfix;
				margin: 2px 0;
				padding: 5px 10px;
				list-style-type: none;
				font-size: 12px;
				font-weight: normal;
				color: @qmGrayFontDark;

				.letter {
					display: block !important;
					float: left;
					font-weight: bold;
					.qm-inline-block;
					width: 18px;
				}

				div {
					color: @qmA;
					width: 230px;
					max-width: 230px;
					display: block;
					float: left;
					word-break: break-word;

					p{
						color: inherit;
					}

				}

				&.selected {
					background: #FEF8D3;
					.box-shadow(~"inset 1px 0 0 rgba(0, 0, 0, .12), 1px 2px 0 rgba(0,0,0,.12)");
				}

				&.correct {
					background: #D9F1B6 !important;
					color: #5C8723 !important;
				}

				&.wrong {
					background: #F8D7D1 !important;
					color: #DA3923 !important;
				}

				&:hover {
					background: #FEF8D3;
				}
			}

			input[type="text"] {
				&.correct {
					background: #D9F1B6 !important;
				}

				&.wrong {
					background: #FADED8 !important;
				}
			}

			.btn {
				margin: 5px 0 15px 15px;
			}
		}

		.question {
			.qm-tabbable;
			background: #FFFFFF;
			margin-top: 0;
			margin-right: 300px;

			.qm-div-title { padding: 0 10px; line-height: 42px; }

			.qm-exercise-btn {
				display: block;
				float: right;
				outline: 1px solid @qmGrayBorder !important;
				font-weight: bold;
				font-size: 12px;
				text-shadow: 0 1px 0 @white;
				line-height: 26px;
				padding: 0 10px;
				margin-top: 7px;
				margin-right: -3px;
				#gradient > .vertical(#FEF8D3, #F4E0B7);
				color: #7F4B10 !important;
				border-top: 1px solid #FFFCED;
				border-bottom: 1px solid #ECCA82;
			}

			.text {
				margin: 15px 10px;
				font-size: 14px;

				p {
					text-shadow: none;
					word-break: break-word;
				}

				a {
					color: #64A5AC;
					text-decoration: underline;
				}
			}

			.tip {
				background: #FEF8D3;
				border: 1px solid #F4E0B6;
				margin: 15px 10px;
				padding: 15px 10px;
				color: #7F4B10;
				font-size: 14px;
				text-shadow: 0 1px rgba(255,255,255,.70);
			}
		}
	}
}

//content select serie
.content{
	.border-radius(0 0 3px 3px);

	.fluid-box {
		padding: 0 8.5px;
	}

	label{
		color: @qmGrayFontMid;
		font-size: 13px;
		float: left;
		clear: both;
		margin: 14px 15px 10px;
	}
}

.exercise-lists {
  color: @white;
  font-size: 13px;
  font-weight: bold;
  text-shadow: 0 1px 0 rgba(0,0,0,.3);
  line-height: 35px;
  padding: 0 10px;
  width: 94.8%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  position: relative;
  left: -1px;
  margin: 4.5px 0;
  border-top: 1px solid #ABD2D7;
  border-bottom: 1px solid #4D969F;
  #gradient > .vertical(#85BDC5, #64ADB6);
  .border-radius(3px);
  .box-shadow(~"0 1px rgba(0,0,0,.12)");
  cursor: pointer;

  & > i:before {
		content: url(../img/exercise-serie.png);
		top: 3px;
		position: relative;
		padding:0 9px 0 10px;
	}

	&.checked {
		border-top: 1px solid #8FBDC3;
		#gradient > .vertical(#5DA0A8, #0C7784);

	}

	.qm-checkbox{
		vertical-align: -3px;
	}
}

.student-lists {
  background-color: @grayBar;
  color: @qmGrayFontDark;
  font-size: 13px;
  font-weight: bold;
  width: 100%;
  overflow: hidden;
  position: relative;
  display: block;
  float: left;
  margin: 5px 0;
  .border-radius(3px);
  .box-shadow(~"0 1px rgba(0,0,0,.12)");

  img {
	.border-radius(3px 0 0 3px);
}

.qm-checkbox {
	margin-top: 12px;
	margin-right: 11px;
}

& > span {
	margin-left: 15px;
	position: absolute;
	top: 12px;
	width: 63%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

&.checked {
	background-color: @qmagicoLaranja;
}

.qm-checkbox{
	vertical-align: -3px;
	position: relative;
	z-index: 1;
}
}

.qm-content-container.container-select-serie{
	margin: 83px 150px;
	.border-radius(3px);
	.content{
		padding: 10px 7px 7px;
	}
}
.qm-content-container .qm-forum {
  margin: -20px 15px 0 15px;
  background: url(../img/gray-stripe.png) repeat-y 15px top;

  .options {
	padding: 20px 5px;
	font-size: 14px;
	font-weight: bold;

	.likes, .points {
	  float: right;
	  color: @qmGrayFontMid;
	  line-height: 40px;

	  &:hover { text-decoration: none; }

	  &:after {
			vertical-align: middle;
			padding-left: 6px;
		}
	}

		.points { margin-right: 17px; }

		.likes:after { content: url(../img/video-heart-button.png); }

		.points:after { content: url(../img/video-star-button.png); }

		.comment {
		  color: #334672;
		  background: #F5F5F7;
		  .qm-inline-block;
		  text-shadow: 0 1px 0 @white;
		  margin-left: -5px;

		  &:before {
		    .qm-inline-block;
		    border: 1px solid @qmGrayBorder;
		    margin-right: 10px;
		    vertical-align: middle;
		    .border-radius(4px);
		    text-align: center;
		    content: url(../img/video-comments-plus.png);
		    background: url(../img/header-background.png);
		    padding: 11px 10px 6px 10px;
		  }
		}
	}

.post {
	padding-bottom: 7px;

	.photo {
	  background: #F5F5F7;
	  width: 31px;
	  height: 31px;
	  padding: 2px 0 4px 0;
	  float: left;

	  img {
		width: 31px;
		height: 31px;
		border: 1px solid @qmGrayBorder;
	  }
	}

	.text {
	  background: @white;
	  border: 1px solid @qmGrayBorder;
	  .border-radius(4px);
	  margin-left: 55px;
	  padding: 10px 15px;
	  color: @qmGrayFont;
	  font-size: 12px;

	  	&:before {
			content: '';
			width: 10px;
			height: 16px;
			background-repeat: no-repeat;
			background-image: url(../img/video-post-caret.png);
			float: left;
			margin-top: 2px;
			margin-left: -23px;
		}

		.author {
			font-size: 13px;
			color: #334773;
			font-weight: bold;
		}

		.dot { font-size: 17px; padding: 0 4px; color: #D1D1D1; }

		.upvote {
			#qm-caret > .up(5px, #1CAD48);
			.qm-inline-block;
			vertical-align: 2px;
			margin: 0 2px;
		}

		.downvote {
			#qm-caret > .down(5px, #EA0000);
			.qm-inline-block;
			vertical-align: -3px;
			margin: 0 2px;
		}

		.votes {
			padding-left: 4px;
			font-weight: bold;
			color: #1CAD48;
		}

		p {
			color: @qmGrayFontDark;
			margin: 5px 0 0 0;
			word-break: break-word;
		}
	}

	.text.compose {
	  width: initial !important;
	  .qm-noise-background;
	  padding: 10px;

	  &:before {
		margin-left: -19px;
		content: url(../img/caret-left-striped.png) !important;
		width: 8px;
	  }

	  .btn {
		margin: 7px 2px;
	  }

	  .btn.publish {
	 	margin-right: 5px;
	  }
	}
}

.replies {
	margin-left: 55px;
}

.links {
	margin-left: 60px;
	padding-bottom: 15px;
	font-weight: bold;
	font-size: 12px;
	color: #D1D1D1;

	a { color: #334672; }

	&:before {
	  content: url(../img/video-comment-arrow.png);
	  padding-right: 7px;
  }
}
}

.photo {
	.border-radius(17px;)
}
.photo > img {
	.border-radius(17px;)
}

.text.compose {
	padding: 8px 10px 0;
	width: 97% !important;
	border-color: #B3B3B3 #C6C6C6 #D1D1D1 !important;
	.box-shadow(~"0 1px rgba(0,0,0,.05) inset !important");

	&:before {
		margin-left: -18px;
		content: url("../img/compose-left-arrow.png") !important;
		width: 8px;
		left: 0 !important;
		top: 4px !important;
	}

	textarea {
		color: @qmGrayFontMid;
		display: block;
		width: 94%;
		padding: 15px 17px 0;
		margin-bottom: 8px;
		line-height: 12px;
		border-width: 1px;
		border-style: solid;
		border-color: #ADADAD #B7B7B7 #B7B7B7 !important;
		background: @white;
		resize: none;
		font-size: 12px;
		color: @qmGrayFontDark;
		text-align: justify;
		.box-shadow(none);
	}

	.toolbar {
		display: block;
		line-height: 36px;
		padding: 0 !important;
		margin-bottom: 9px;
		padding-left: 13px !important;

		& > a {
			font-weight: bold;
			text-shadow: 0 1px rgba(255,255,255,.7);
		}

		&:after {
			content: '';
			clear: both;
			display: table;
		}
	}

	.btn {
		margin: 0 4px;
	}

	.btn.publish {
		margin-right: 0;
	}
}

.qm-notebook-box {
	right: 38px;
	width: 267px;
	height: 502px;
	float: right;

	&.has-notebook {
		width: 420px;
		margin: 0;
	}
}

.qm-notebook-fixed {
	& > .qm-notebook {
		position: relative;
		display: block;

		& > .header {
			font-size: 16px;
			margin: 0 17px 33px 38px;
			top: 17px;
			position: relative;
		}
	}
}

.old-qm-nb {
	position: relative;
	float: right;

	.qm-notebook {
		position: static;
		display: inline-block;
		margin-left: 18px;
	}
}

.qm-notebook {
	position: fixed;
	width: 420px;
	height: 502px;
	background-color: #FFFFFF;
	.border-radius(3px);

	.margin {
		position: absolute;
		width: 4px;
		border: 1px solid #FDB9BB;
		border-width: 0 1px;
		height: 502px;
		margin-left: 19px;
	}

	.header {
		font-size: 16px;
		margin: 19px 17px 16px 38px;

		.date {
			margin-left: 5px;
			border: 1px solid #EBEBEB;
			.border-radius(3px);
			padding: 10px 8px;
		}
	}

	.text-container {
		height: 394px;
		background: url(../img/annotation-line-sep.png) repeat-y;
		width: 100%;
		overflow: hidden;
		cursor: text;
	}

	.control {
		margin-top: 9px;
		margin-left: 35px;
		position: relative;

		.clearfix;

		.btn {
			margin-top: 3px;
		}

		.toolbar {
			.qm-editor > .toolbar;
			.pull-right;
			width: auto;
			background: none;
			margin-top: -2px;
			border: 0;
			right: 9px;
			.box-shadow(none);

			a {
				margin: 6px 1px !important;
			}
		}

		& > .saved-message {
			margin-top: 8px;
			margin-left: 8px;

		}
	}

	#note-text {
		margin-left: 35px;
		margin-right: 6px;
		outline: none;
		background-color: transparent;
		border: 0;
		resize: none;
		overflow: hidden;
		min-height: 380px;
		.box-shadow(0px 0px 0px rgba(0,0,0,0));
		font-family: Georgia;
		font-style: italic;
	}

	/* basic scrollbar styling */
	.mCSB_container{
		width:auto;
		margin-right:30px;
		overflow:hidden;
	}

	.mCSB_container.mCS_no_scrollbar {
		margin-right:0;
	}

	.mCS_disabled .mCSB_container.mCS_no_scrollbar,
	.mCS_destroyed .mCSB_container.mCS_no_scrollbar{
		margin-right:30px;
	}
	.mCustomScrollBox .mCSB_scrollTools{
		width:16px;
		height:100%;
		top:0;
		right:0;
		margin-right: 5px;
	}
	.mCSB_scrollTools {
		.mCSB_draggerContainer{
		  height:100%;
		  -webkit-box-sizing:border-box;
		  -moz-box-sizing:border-box;
		  box-sizing:border-box;
	  }

	  .mCSB_buttonUp+.mCSB_draggerContainer{
		  padding-bottom:40px;
	  }

	  .mCSB_draggerRail{
		  width:2px;
		  height:100%;
		  margin:0 auto;
		  .border-radius(10px);
	  }

	  .mCSB_dragger{
		cursor:pointer;
		width:100%;
		height:30px;

		.mCSB_dragger_bar{
			width:4px;
			height:100%;
			margin:0 auto;
			.border-radius(10px);
			text-align:center;
		}
	}

	.mCSB_buttonUp, .mCSB_buttonDown{
		height:20px;
		overflow:hidden;
		margin:0 auto;
		cursor:pointer;
	}

	.mCSB_buttonDown{
		bottom:0;
		margin-top:-40px;
	}
}

/* scrollbar colors and backgrounds */
.mCSB_scrollTools{
	opacity:0.75;
}

.mCSB_dragger_bar{
	background:#fff; /* rgba fallback */
	background:rgba(255,255,255,0.75);
	filter:"alpha(opacity=75)"; -ms-filter:"alpha(opacity=75)"; /* old ie */
}
.mCSB_dragger:hover .mCSB_dragger_bar{
	background:rgba(255,255,255,0.85);
	filter:"alpha(opacity=85)"; -ms-filter:"alpha(opacity=85)"; /* old ie */
}
.mCSB_dragger:active .mCSB_dragger_bar,
.mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{
	background:rgba(255,255,255,0.9);
	filter:"alpha(opacity=90)"; -ms-filter:"alpha(opacity=90)"; /* old ie */
}

.mCustomScrollBox:hover .mCSB_scrollTools{
	opacity:1;
}

.mCSB_dragger .mCSB_dragger_bar{
	width:5px;
	background: rgb(0, 0, 0, 0.20);
	.box-shadow(1px 1px 1px rgba(0,0,0,.5));
}
.mCSB_dragger:hover .mCSB_dragger_bar,
.mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{
	background: rgb(0, 0, 0, 0.20);
}
.mCSB_dragger:active .mCSB_dragger_bar,
.mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{
	.box-shadow(0 0 2px rgba(0,0,0,.5));
}

.mCSB_draggerRail{
	background:#000; /* rgba fallback */
	background:rgba(206, 172, 122, 0.0);
	filter:"alpha(opacity=40)"; -ms-filter:"alpha(opacity=40)"; /* old ie */
}

.text {
	color: @qmGrayFontDark !important;
	line-height: 30px !important;

	width: 353px;
	margin-left: 45px;

	& > div {
		height: 30px !important;
	}

	.header {
		font-size: 16px;
		margin: 19px 0 16px 38px;
		.clearfix;

		.title {
			float: left;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.date {
			clear: left;
			float: right;
			margin-right: 15px;
		}
	}

	p {
		height: 30px !important;
		font-size: 13px;
		margin: auto;
		text-shadow: inherit;
	}
}
}

.has-notebook {
	margin-right: 441px;
	right: 50px;
	.transition(0.1s linear);
}

.has-not-notebook {
	margin-right: 200px;
	.transition(0.1s linear);
}

.has-not-notebook-exercise {
	margin-right: 286px;
	.transition(0.1s linear);
}

.material-answers {
	.border-radius(3px);
	width: 267px;
	margin-top: 14px;

	& > header {
		color: #868686;
		font-size: 14px;
		background-color: #fff;
		padding: 17px 18px 14px;
		border-bottom: 1px solid #E8E8E8;
		.box-shadow(1px #fff);
		.border-radius(3px 3px 0 0);

		& > i {
			vertical-align: -2px;
			margin-right: 15px;

			&:before {
				font-size: 22px;
				color: #9A9A9A;
			}
		}

		& > span {
			font-size: 18px;

			b {
				font-weight: bold;
			}
		}

		i, span, p {
			display: inline-block;
		}
	}

	& > footer {
		.clearfix();
		background-color: #F5F5F7;
		padding: 8.5px 3px 8.5px 9px;
		.border-radius(0 0 3px 3px);

		& > ul {
			.clearfix();
			margin: 0;
		}
	}
}

@media screen and (max-width: 1199px){
	.qm-material-box {
		width: 966px;
	}
	.qm-notebook-box, .qm-notebook {
		width: 267px;

		.text {
			width: 214px;
		}
	}

	.qm-notebook-box, .qm-notebook, .margin {
		height: 525px !important;
	}

	.qm-notebook-box.has-notebook {
		width: 267px !important;
		margin: 0;
	}

	.control > .saved-message {
		margin-top: 7px !important;
		margin-left: 0 !important;
		float: left;
		clear: left;
	}

	.has-notebook, .has-not-notebook-exercise {
		margin-right: 283px;
	}

	.has-not-notebook {
		margin-right: 149px;
	}

	.qm-hover-layer {
		min-width: 1085px !important;
	}

	.material-answers {
		top: 616px !important;
	}
}

.answer-item {
  width: 45px;
  float: left;
  margin: 0 6px 7px 0;
  text-align: center;
  line-height: 24px;
  height: 26px;
  border: 1px solid #dbdbdb;
  cursor: pointer;
  background: white;
  .border-radius(3px);
  font-size: 13px;
  font-weight: bold;
  .box-sizing(border-box);

  &.correct {
  	background-color: #1CAD48;
  	color: #fff;
  }

  &.wrong {
  	background-color: #C10500;
  	color: #fff;
  }

  &.current {
  	background-color: #53A5B1;
  	color: #fff;
  }
}

.student-score {
	font-size: 12px;
	font-weight: bold;
	color: #725021;
	background-color: #EBAE20;
	padding: 4px 5px 5px 4px;
	margin-left: 7px;
	.border-radius(3px);

	.icon-star {
		display: inline-table;
		background: none;
		&:before {
			font-size: 13px;
			vertical-align: -2.4px;
			margin-right: 4px;
		}
	}
}

.anotation-box {
	width: 234px;
	display: inline-block;
	background-color: #fff;
	padding: 13px 16px 12px;
	cursor: pointer;
	.border-radius(3px);

	& > .a-anotation > .icon-anotation {
		margin-right: 11px;
	}
}

// Simulated Instructions
.simulated-instructions{
	margin: 5px 234px;

	.title:before{
		content: url(../img/simulated-instructions-icon.png)!important;
		position: relative;
		top: 3px;
	}

	h1{
		font-size: 14px;
		font-weight: bold;
	}

	p{
		font-size: 13px;
	}
}

.instructions-legend{
	left: 0;
	margin: 0;
	width: 100%;
	li{
		padding: 16px 21px 15px 19px;
		border-bottom: 1px solid #E6E6E7;
		list-style: none;

		&:first-child{
			.box-shadow(~"0 1px #fff inset");

			b{
				color: #DF3924;
			}
		}

		i{
			color: #AAAAAA;
			float: left;
			margin-right: 17px;
			height: 31px;

			&.qm-icon-working-time{
				margin-top: 8px;
				margin-left: 3px;
			}

			&.icn-pencil{
				margin-left: 5px;
				margin-right: 18px;
			}
		}
	}

	&:after{
		.clearfix;
	}
}

.simulated-buttons{
	position: relative;
	margin: 33px auto 0;
	display: table;

	button{
		margin: 0 5px;
	}
}

//Toggle Notebook
.hide-notebook {
	width: 0;
	height: 0;
	.transition(0.2s linear);
	opacity: 0;
	position: absolute !important;
}

.show-notebook {
	.transition(0.2s linear);
}

.hide-video-notebook {
	.transition(0.1s linear);
	opacity: 0;
	position: absolute !important;
    width: 0;
}

.slidedown-enter,
.slidedown-leave
{
    .transition(0.3s cubic-bezier(0.250, 0.250, 0.750, 0.750) all);
}

.slidedown-enter.slidedown-enter-active,
.slidedown-leave {
}

.slidedown-leave.slidedown-leave-active,
.slidedown-enter {
    height: 0px;
}

.slidedown-show,
.slidedown-hide
{
    .transition(200ms linear);
    & > div {
        .transition(200ms linear);
        & > * {
            .transition(200ms linear);
        }
    }
}
.slidedown-show, .slidedown-hide.slidedown-hide-active {
    line-height: 0px;
    & > div {
        padding-top: 0px;
        padding-bottom: 0px;
        & > * {
            margin: 0px;
        }
    }
}
.slidedown-hide, .slidedown-show.slidedown-show-active {
    line-height: 18px;
    & > div {
        padding-top: 23px;
        padding-bottom: 23px;
        & > * {
            margin: 0 0 9px;
        }
    }
}


Added .static stars option

Added .static stars option


use gray for exclude color instead of blue

.questions-dashboard {
  @padding: 20px;
  .wrapper {
    max-width: 1200px; // match panel width
    margin: 0 auto;

  }

  .sections-chooser {

    .header {
      background-color: @tutor-white;
      padding: 0 @padding+5px;
      .wrapper {
        height: 95px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        h2 {
          #fonts >.sans(2.8rem, 2.8rem);
        }
      }
    }
  }

  .instructions {
    background-color: @tutor-secondary;
    color: @tutor-white;
    #fonts >.sans(1.6rem, 1.6rem);
    font-weight: 700;
    font-style: italic;
    margin: 0;
    padding: @padding - 8px;

    .tutor-icon {
      position: relative;
      left: 0.5rem;
      top: -0.5rem;
    }
  }

  .exercises-display {
    max-width: @tutor-max-panel-width;
    margin: 0 auto;
    .instructions { margin-bottom: @padding; }
  }

  .instructions-addon {
    margin: 0 @padding;
    font-size: 1.4rem;
    text-align: center;
    color: @tutor-neutral-lite;
  }
  .secondary-help {
    text-align: center;
    color: @tutor-neutral;
  }
  .sections-list {
    padding: @padding;
    background-color: @tutor-white;
  }

  .pinned-header {
    .tutor-shadow(1);

    .panel {
      .box-shadow(none);
    }
  }

  .exercise-controls-bar {
    background-color: @tutor-white;
    height: 60px;
  }

  .sectionizer {
    flex: 1;
    justify-content: center;
  }

  .loading {
    position: fixed;
    width: 400px;
    left: calc(~"50% - 150px");
    top: 40%;
    z-index: 1;
    background-color: @tutor-neutral-bright;
    border: 1px solid @tutor-neutral-light;
    height: 200px;
    text-align: center;
    #fonts >.sans(3rem, 200px);
  }

  .exercise-card {
    &.is-selected {
      .selected-mask {
        background-color: @tutor-neutral-light;
      }
    }
    &.has-actions .controls-overlay .message .action { width: 160px; }
  }

  .exercise-cards {
    .exercise-cards-column-layout();
  }
}

.question-library-min-exercise-exclusions {
  top: 30%;
  .modal-dialog {
    width: 500px;
  }
  .modal-body {
    #fonts >.sans(1.8rem, 1.8rem);
    padding: 1rem 3rem 3rem 3rem;
    min-width: 500px;
    display: flex;
    .tutor-icon {
      font-size: 4rem;
      margin: 0 2.5rem 0 1rem;
      color: @tutor-primary;
    }
  }
  .modal-footer{
    text-align: right;
    .btn-primary {
      color: @tutor-white;
      background-color: @tutor-tertiary-light !important; // material design override
      border: 1px solid darken(@tutor-tertiary-light, 10%) !important;
    }
  }

}

.questions-dashboard {
  @padding: 20px;
  .wrapper {
    max-width: 1200px; // match panel width
    margin: 0 auto;

  }

  .sections-chooser {

    .header {
      background-color: @tutor-white;
      padding: 0 @padding+5px;
      .wrapper {
        height: 95px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        h2 {
          #fonts >.sans(2.8rem, 2.8rem);
        }
      }
    }
  }

  .instructions {
    background-color: @tutor-secondary;
    color: @tutor-white;
    #fonts >.sans(1.6rem, 1.6rem);
    font-weight: 700;
    font-style: italic;
    margin: 0;
    padding: @padding - 8px;

    .tutor-icon {
      position: relative;
      left: 0.5rem;
      top: -0.5rem;
    }
  }

  .exercises-display {
    max-width: @tutor-max-panel-width;
    margin: 0 auto;
    .instructions { margin-bottom: @padding; }
  }

  .instructions-addon {
    margin: 0 @padding;
    font-size: 1.4rem;
    text-align: center;
    color: @tutor-neutral-lite;
  }
  .secondary-help {
    text-align: center;
    color: @tutor-neutral;
  }
  .sections-list {
    padding: @padding;
    background-color: @tutor-white;
  }

  .pinned-header {
    .tutor-shadow(1);

    .panel {
      .box-shadow(none);
    }
  }

  .exercise-controls-bar {
    background-color: @tutor-white;
    height: 60px;
  }

  .sectionizer {
    flex: 1;
    justify-content: center;
  }

  .loading {
    position: fixed;
    width: 400px;
    left: calc(~"50% - 150px");
    top: 40%;
    z-index: 1;
    background-color: @tutor-neutral-bright;
    border: 1px solid @tutor-neutral-light;
    height: 200px;
    text-align: center;
    #fonts >.sans(3rem, 200px);
  }

  .exercise-card {
    &.is-selected {
      .selected-mask {
        background-color: @tutor-highlight;
      }
    }
    &.has-actions .controls-overlay .message .action { width: 160px; }
  }

  .exercise-cards {
    .exercise-cards-column-layout();
  }
}

.question-library-min-exercise-exclusions {
  top: 30%;
  .modal-dialog {
    width: 500px;
  }
  .modal-body {
    #fonts >.sans(1.8rem, 1.8rem);
    padding: 1rem 3rem 3rem 3rem;
    min-width: 500px;
    display: flex;
    .tutor-icon {
      font-size: 4rem;
      margin: 0 2.5rem 0 1rem;
      color: @tutor-primary;
    }
  }
  .modal-footer{
    text-align: right;
    .btn-primary {
      color: @tutor-white;
      background-color: @tutor-tertiary-light !important; // material design override
      border: 1px solid darken(@tutor-tertiary-light, 10%) !important;
    }
  }

}


Update grid.less

Update grid.less


Typography spacing in teaser

Typography spacing in teaser

// Teaser ------------------------------------------------------------------

// Full width wrapper
#teaser {
  background: url("@{imgPath}/outer/home/teaser_bg_pattern.png");
  -webkit-box-shadow: inset 0px 5px 5px rgba(0, 0, 0, 0.15), inset 0px -5px 5px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: inset 0px 5px 5px rgba(0, 0, 0, 0.15), inset 0px -5px 5px rgba(0, 0, 0, 0.15);
  box-shadow: inset 0px 5px 5px rgba(0, 0, 0, 0.15), inset 0px -5px 5px rgba(0, 0, 0, 0.15);

  // Content container
  & > section {
    .container;
    position: relative;
    height: 455px;
    color: white;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.55);
  }

  // Screenshot
  .screenshot {
    .ir;
    z-index: 1;
    width: 772px;
    height: 431px;
    position: absolute;
    bottom: 0;
    left: 30.5em;
    background: url("@{imgPath}/outer/home/teaser_ss.png") no-repeat;
  }

  // Text layout
  h2, h3, p, form {
    .column(5.5);
    .pull(6.5);
    margin-left: 0;
  }

  // Typography
  h2 {
    font-size: 36px;
    margin-top: 40px;
  }

  h3 {
    margin-top: 1em;
    font: 400 18px/30px "Open Sans", sans-serif;
  }

  p {
    margin-top: 1em;
    margin-bottom: 1em;
    line-height: 20px;
  }

  .authGithub {
    top: 31px;
    left: 32px;

    &:active { top: 34px; }
  }

  // Privacy policy
  .footnote {
    width: 280px;
    margin: 50px 0 0 45px;
    font-size: 13px;
    text-align: center;

    span {
      display: block;
      margin-bottom: 12px;
      font-size: 18px;
    }

    a {
      border-bottom: dotted 1px #7F8D9F;
      color: #CCDFF5;

      &:hover {
        color: white;
        border-color: white;
      }
    }
  }

  input.signup:focus {
    border: 1px solid #152942 !important;
  }

  // z-index > screenshot's, prevent clickability occlusion
  button {
    position: relative;
    z-index: 5;
  }
}

// Teaser ------------------------------------------------------------------

// Full width wrapper
#teaser {
  background: url("@{imgPath}/outer/home/teaser_bg_pattern.png");
  -webkit-box-shadow: inset 0px 5px 5px rgba(0, 0, 0, 0.15), inset 0px -5px 5px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: inset 0px 5px 5px rgba(0, 0, 0, 0.15), inset 0px -5px 5px rgba(0, 0, 0, 0.15);
  box-shadow: inset 0px 5px 5px rgba(0, 0, 0, 0.15), inset 0px -5px 5px rgba(0, 0, 0, 0.15);

  // Content container
  & > section {
    .container;
    position: relative;
    height: 455px;
    color: white;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.55);
  }

  // Screenshot
  .screenshot {
    .ir;
    z-index: 1;
    width: 772px;
    height: 431px;
    position: absolute;
    bottom: 0;
    left: 30.5em;
    background: url("@{imgPath}/outer/home/teaser_ss.png") no-repeat;
  }

  // Text layout
  h2, h3, p, form {
    .column(5.5);
    .pull(6.5);
    margin-left: 0;
  }

  // Typography
  h2 {
    font-size: 36px;
    margin-top: 40px;
  }

  h3 {
    margin-top: 1em;
    font: 400 18px/30px "Open Sans", sans-serif;
  }

  p {
    margin-top: 1em;
    margin-bottom: 1em;
    line-height: 20px;
  }

  .authGithub {
    top: 31px;
    left: 32px;

    &:active { top: 34px; }
  }

  // Privacy policy
  .footnote {
    width: 280px;
    margin: 50px 0 0 45px;
    font-size: 13px;
    text-align: center;

    span {
      display: block;
      margin-bottom: 8px;
      font-size: 18px;
    }

    a {
      border-bottom: dotted 1px #7F8D9F;
      color: #CCDFF5;

      &:hover {
        color: white;
        border-color: white;
      }
    }
  }

  input.signup:focus {
    border: 1px solid #152942 !important;
  }

  // z-index > screenshot's, prevent clickability occlusion
  button {
    position: relative;
    z-index: 5;
  }
}


fixed email layout (bug 823137)

fixed email layout (bug 823137)

@import './documentation';

@right-width: 528px;

#landing-page {
    color: @medium-gray;
    font-size: 14px;
    font-weight: @heavy;
    line-height: 18px;
    margin: 0 auto;
    position: relative;
    width: 960px;

    h1 {
        color: @dark-gray;
        font-size: 55px;
        font-weight: 100;
        margin: 20px 0;
        text-align: center;
        text-shadow: #fff 0 1px 1px;
    }

    p.intro {
        font-size: 25px;
        font-weight: 100;
        padding-bottom: 20px;
        text-align: center;
    }

    .button-wrapper {
        padding: 20px 10px;
        width: 288px;
    }

    #partnership {
        .box-shadow(0 1px 12px -8px rgba(0,0,0,.5) inset);
        border-bottom: 1px solid #ddd;
        border-top: 1px solid #ddd;
        clear: both;
        float: left;
        margin: 10px 0 20px;
        max-width: 900px;
        padding: 10px 10px 20px;
        position: relative;
        width: 100%;

        &:before, &:after {
            .box-shadow(0 0 20px 20px #f1f1f1);
            content: " ";
            position: absolute;
            top: 0;
            bottom: 0;
            width: 0;
        }

        &:before {
            left: 0;
        }

        &:after {
            right: 0;
        }

        .partner-title {
            float: left;
            margin-right: 10px;
            padding-top: 30px;
            position: relative;
            width: 220px;
            z-index: 1;

            h2 {
                color: #000;
                font-size: 23px;
                line-height: 27px;
            }

            p {
                font-style: italic;
            }
        }

        .partner-logos {
            border-right: 1px solid #fff;
            display: block;
            float: left;
            padding-right: 10px;
            text-align: center;
            width: 535px;

            ul {
                display: block;
                margin: 10px auto;
                padding: 0;
                width: 510px;

                li {
                    float: left;
                    margin: 5px 8px;

                    img {
                        .border-radius(5px);
                        border: 1px solid #fff;
                    }
                }
            }

            h3, p {
                clear: both;
                text-align: center;
            }

            h3 {
                padding: 10px 0 0;
                font-size: 14px;
            }

            p {
                font-style: italic;
                margin: 0;

                &.partner-email {
                    a {
                        display: inline-block;
                        white-space: nowrap;
                    }
                }
            }
        }

        .submit-app {
            border-left: 1px solid #ddd;
            float: left;
            margin: 0 auto;
            padding: 10px 5px 5px 15px;
            text-align: center;
            width: 100px;

            a {
                background: url(../../img/ecosystem/submit-app-mktplace.png) no-repeat 50% 0;
                display: block;
                font-size: 18px;
                line-height: 22px;
                padding-top: 65px;
            }
        }
    }
}

#landing-page .half {
    float: left;
    margin: 8px 0;
    position: relative;
    width: 920px;

    &.initial-steps {
        background-color: #fff;
        .border-radius(5px);
        .box-shadow(@light-gray 0 3px 3px);
    }

    &.initial-steps {
        background: #fff url(../../img/ecosystem/landing-steps.png) no-repeat -6px 38%;
        margin-bottom: 40px;
        padding-top: 0;
    }

    .button.prominent {
        &.first {
            background: #eb492d;
        }

        &.second {
            background: #ff9600;
        }
    }

    .panel {
        float: left;
        width: 306px;

        h2 {
            margin-top: 10px;
            text-align: center;

            &:before {
                padding-right: 8px;
            }

            &.section-design:before {
                content: url(../../img/ecosystem/section-design-icon.png);
            }

            &.section-build:before {
                content: url(../../img/ecosystem/section-build-icon.png);
            }

            &.section-publish:before {
                content: url(../../img/ecosystem/section-publish-icon.png);
            }
        }

        p {
            border-bottom: 2px solid transparent;
            display: block;
            height: 55px;
            margin: 0 auto;
            overflow: hidden;
            padding: 0 5px 10px 5px;
            text-align: center;
            text-overflow: ellipsis;
            width: 235px;
        }

        a p {
            color: @medium-gray;
        }
    }

    h2 {
        color: @dark-gray;
        font-size: 30px;
        margin-bottom: 15px;
    }

    p {
        margin-top: 0;
    }

    .platform-copy, .videos, .screenshot {
        float: left;
    }

    .screenshot {
        margin-top: 10px;

        img {
            .border-wrapper;
            display: block;
            padding: 5px;
        }
    }

    .platform-copy, .screenshot {
        padding-right: 30px;
        width: 360px;

        &.right {
            padding: 0;
            width: @right-width;
        }
    }

    video {
        display: block;
        margin: 0 auto;
        padding: 10px;
    }

    .videos {
        margin: 0 auto;
        width: @right-width;

        .video-item {
            display: none;
            margin-top: 10px;
        }

        .video-item:first-child {
            display: block;
        }

        .subtitles {
            margin-top: 5px;
            text-align: center;
        }

        .video-control {
            .border-wrapper;
            margin: 0 auto;
        }

        ol {
            display: block;
            float: left;
            margin: 20px 0;
            padding: 0;

            li {
                .border-wrapper;
                cursor: pointer;
                float: left;
                margin-right: 10px;
                padding: 3px 3px 0 3px;

                &:first-child {
                    margin-left: 2px;
                }

                &:last-child {
                    margin-right: 0;
                }
            }
            img {
                width: 91px;
            }
        }
    }

    .icons {
        list-style-type: none;
        padding: 10px 0 0;
        li {
            background-repeat: no-repeat;
            border-bottom: 1px dotted @light-gray;
            font-size: 15px;
            line-height: 22px;
            min-height: 52px;
            margin-bottom: 5px;
            padding: 10px 0 0 68px;

            &.testing {
                background-image: url(../../img/ecosystem/landing-icon-testing.png);
            }

            &.early {
                background-image: url(../../img/ecosystem/landing-icon-early.png);
            }

            &.target {
                background-image: url(../../img/ecosystem/landing-icon-target.png);
            }
        }
    }
}

@import './documentation';

@right-width: 528px;

#landing-page {
    color: @medium-gray;
    font-size: 14px;
    font-weight: @heavy;
    line-height: 18px;
    margin: 0 auto;
    position: relative;
    width: 960px;

    h1 {
        color: @dark-gray;
        font-size: 55px;
        font-weight: 100;
        margin: 20px 0;
        text-align: center;
        text-shadow: #fff 0 1px 1px;
    }

    p.intro {
        font-size: 25px;
        font-weight: 100;
        padding-bottom: 20px;
        text-align: center;
    }

    .button-wrapper {
        padding: 20px 10px;
        width: 288px;
    }

    #partnership {
        .box-shadow(0 1px 12px -8px rgba(0,0,0,.5) inset);
        border-bottom: 1px solid #ddd;
        border-top: 1px solid #ddd;
        clear: both;
        float: left;
        margin: 10px 0 20px;
        max-width: 900px;
        padding: 10px 10px 20px;
        position: relative;
        width: 100%;

        &:before, &:after {
            .box-shadow(0 0 20px 20px #f1f1f1);
            content: " ";
            position: absolute;
            top: 0;
            bottom: 0;
            width: 0;
        }

        &:before {
            left: 0;
        }

        &:after {
            right: 0;
        }

        .partner-title {
            float: left;
            margin-right: 10px;
            padding-top: 30px;
            position: relative;
            width: 220px;
            z-index: 1;

            h2 {
                color: #000;
                font-size: 23px;
                line-height: 27px;
            }

            p {
                font-style: italic;
            }
        }

        .partner-logos {
            border-right: 1px solid #fff;
            display: block;
            float: left;
            padding-right: 10px;
            text-align: center;
            width: 535px;

            ul {
                display: block;
                margin: 10px auto;
                padding: 0;
                width: 510px;

                li {
                    float: left;
                    margin: 5px 8px;

                    img {
                        .border-radius(5px);
                        border: 1px solid #fff;
                    }
                }
            }

            h3, p {
                clear: both;
                text-align: center;
            }

            h3 {
                padding: 10px 0 0;
                font-size: 14px;
            }

            p {
                font-style: italic;
                margin: 0;
            }
        }

        .submit-app {
            border-left: 1px solid #ddd;
            float: left;
            margin: 0 auto;
            padding: 10px 5px 5px 15px;
            text-align: center;
            width: 100px;

            a {
                background: url(../../img/ecosystem/submit-app-mktplace.png) no-repeat 50% 0;
                display: block;
                font-size: 18px;
                line-height: 22px;
                padding-top: 65px;
            }
        }
    }
}

#landing-page .half {
    float: left;
    margin: 8px 0;
    position: relative;
    width: 920px;

    &.initial-steps {
        background-color: #fff;
        .border-radius(5px);
        .box-shadow(@light-gray 0 3px 3px);
    }

    &.initial-steps {
        background: #fff url(../../img/ecosystem/landing-steps.png) no-repeat -6px 38%;
        margin-bottom: 40px;
        padding-top: 0;
    }

    .button.prominent {
        &.first {
            background: #eb492d;
        }

        &.second {
            background: #ff9600;
        }
    }

    .panel {
        float: left;
        width: 306px;

        h2 {
            margin-top: 10px;
            text-align: center;

            &:before {
                padding-right: 8px;
            }

            &.section-design:before {
                content: url(../../img/ecosystem/section-design-icon.png);
            }

            &.section-build:before {
                content: url(../../img/ecosystem/section-build-icon.png);
            }

            &.section-publish:before {
                content: url(../../img/ecosystem/section-publish-icon.png);
            }
        }

        p {
            border-bottom: 2px solid transparent;
            display: block;
            height: 55px;
            margin: 0 auto;
            overflow: hidden;
            padding: 0 5px 10px 5px;
            text-align: center;
            text-overflow: ellipsis;
            width: 235px;
        }

        a p {
            color: @medium-gray;
        }
    }

    h2 {
        color: @dark-gray;
        font-size: 30px;
        margin-bottom: 15px;
    }

    p {
        margin-top: 0;
    }

    .platform-copy, .videos, .screenshot {
        float: left;
    }

    .screenshot {
        margin-top: 10px;

        img {
            .border-wrapper;
            display: block;
            padding: 5px;
        }
    }

    .platform-copy, .screenshot {
        padding-right: 30px;
        width: 360px;

        &.right {
            padding: 0;
            width: @right-width;
        }
    }

    video {
        display: block;
        margin: 0 auto;
        padding: 10px;
    }

    .videos {
        margin: 0 auto;
        width: @right-width;

        .video-item {
            display: none;
            margin-top: 10px;
        }

        .video-item:first-child {
            display: block;
        }

        .subtitles {
            margin-top: 5px;
            text-align: center;
        }

        .video-control {
            .border-wrapper;
            margin: 0 auto;
        }

        ol {
            display: block;
            float: left;
            margin: 20px 0;
            padding: 0;

            li {
                .border-wrapper;
                cursor: pointer;
                float: left;
                margin-right: 10px;
                padding: 3px 3px 0 3px;

                &:first-child {
                    margin-left: 2px;
                }

                &:last-child {
                    margin-right: 0;
                }
            }
            img {
                width: 91px;
            }
        }
    }

    .icons {
        list-style-type: none;
        padding: 10px 0 0;
        li {
            background-repeat: no-repeat;
            border-bottom: 1px dotted @light-gray;
            font-size: 15px;
            line-height: 22px;
            min-height: 52px;
            margin-bottom: 5px;
            padding: 10px 0 0 68px;

            &.testing {
                background-image: url(../../img/ecosystem/landing-icon-testing.png);
            }

            &.early {
                background-image: url(../../img/ecosystem/landing-icon-early.png);
            }

            &.target {
                background-image: url(../../img/ecosystem/landing-icon-target.png);
            }
        }
    }
}