Index: lams_central/web/css/components.css
===================================================================
diff -u -raf39b0847acc8223de5f1c45e27bb70d09f3054d -r8ea5094b7d3b0f6e705ede366fd0c78c175905ab
--- lams_central/web/css/components.css	(.../components.css)	(revision af39b0847acc8223de5f1c45e27bb70d09f3054d)
+++ lams_central/web/css/components.css	(.../components.css)	(revision 8ea5094b7d3b0f6e705ede366fd0c78c175905ab)
@@ -1,117 +1,107 @@
-@font-face {
-	font-family: mont-semibold;
-	src: url(../fonts/mont-semibold.ttf);
+body.component {
+	background-color: #E4E4E4;
 }
 
-@font-face {
-	font-family: mont-bold;
-	src: url(../fonts/FontsFree-Net-Mont-Bold.ttf);
+body.component .tooltip-inner {
+	background-color: #FFFFFF;
+	color: #212529;
+	border: 1px solid #707070;
+	padding: .5rem;
+	font-size: .9rem;
+	text-align: left;
+	line-height: 1.2;
 }
 
-@font-face {
-	font-family: mont-regular;
-	src: url(../fonts/FontsFree-Net-Mont1.ttf);
+body.component .tooltip.bs-tooltip-top .arrow:before {
+	border-top-color: #707070 !important;
 }
 
-body, html {
-	margin: 0;
-	font-size: 16px;
-	background-color: #E4E4E4;
+body.component .tooltip.bs-tooltip-top .arrow:before {
+	border-color: #fff;
 }
 
-.sr-only, .sr-only-focusable, .sr-only:hover {
-	color: black;
+body.component .info_icon {
+	font-size: .95rem;
 }
 
-img {
-	max-width: 100%;
-}
-
-.wrapper {
+.component-page-wrapper {
 	border-radius: 2rem;
 	min-height: 100vh;
 	overflow: hidden;
 	background-color: #F6F5FA;
 }
 
-.main-content {
-	background-color: #fff;
+.component-page-wrapper input::-webkit-input-placeholder {
+	color: #626262;
 }
 
-.main-content-inner {
-	min-height: 100%;
-	background-color: #F6F5FA;
-	border-radius: 2rem;
-	padding: 1.5rem 4.8rem;
+.component-page-wrapper input::-moz-placeholder {
+	color: #626262;
 }
 
-.top-menu-btn a {
-	display: inline-block;
-	background-color: #3C42E0;
-	width: 3.1rem;
-	height: 3.1rem;
-	border-radius: 1rem;
-	margin-left: .6rem;
-	text-align: center;
-	line-height: 2.8rem;
-	box-shadow: 0px 3px 6px #3C42E040;
-	transition: all .3s ease;
+.component-page-wrapper label {
+	color: #6c757d;
 }
 
-.top-menu-btn a:hover {
-	background-color: #878bea;
+.component-page-wrapper .btn {
+	border-radius: 1.0rem;
 }
 
-.top-menu-btn a img {
-	width: 1rem;
+.component-page-wrapper i.fa[role="button"] {
+	cursor : pointer;
 }
 
-.top-menu-btn a:nth-child(3) img {
-	width: 1.3rem;
+.component-page-wrapper .sr-only, .sr-only-focusable, .sr-only:hover {
+	color: black;
 }
 
-.top-menu form {
+.component-page-wrapper .collapsible-link {
+	width: 100%;
 	position: relative;
-	width: 18.8rem;
-	margin-right: 3rem;
+	text-align: left;
 }
 
-.top-menu input {
-	width: 100%;
-	height: 3.1rem;
-	border-radius: 1rem;
-	border: 0;
-	background-color: #fff;
-	padding-left: 1.2rem;
-	box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.02);
-	font-size: .95rem;
+.component-page-wrapper .collapsible-link::before {
+	content: '\f107';
+	position: absolute;
+	top: 50%;
+	right: 0.8rem;
+	transform: translateY(-50%);
+	display: block;
+	font-family: 'FontAwesome';
+	font-size: 1.8rem;
 }
 
-.top-menu form img {
-	position: absolute;
-	right: 1.2rem;
-	top: .9rem;
-	cursor: pointer;
-	width: 1.2rem;
+.component-page-wrapper .collapsible-link[aria-expanded='true']::before {
+	content: '\f139';
+	color: #3C42E0;
 }
 
-.top-menu input::placeholder {
-	color: #696f7d;
+.component-page-wrapper .collapsable-icon-left:after {
+	font-family: FontAwesome;
+	content: "\f078";
+	float: left;
+	color: #6c757d;
+	margin-right: .5rem;
 }
 
-.content-left {
-	-ms-flex: 0 0 26.5rem;
-	flex: 0 0 26.5rem;
-	max-width: 26.5rem;
+.component-page-wrapper .collapsable-icon-left.collapsed:after {
+	content: "\f054";
 }
 
-.content-right {
-	-ms-flex: 0 0 calc(100% - 26.5rem);
-	flex: 0 0 calc(100% - 26.5rem);
-	max-width: calc(100% - 26.5rem);
+.component-page-wrapper table.table thead {
+	background-color: #e5e5e5;
 }
 
-.bbox-col {
+.component-page-content {
+	width: 100%;
+	min-height: 100%;
+	background-color: #F6F5FA;
+	border-radius: 2rem;
+	padding: 1.5rem 4.8rem;
+}
+
+.banner-box-col {
 	box-shadow: 0px 20px 20px #2E384D1A;
 	background-color: #fff;
 	border-radius: 1.2rem;
@@ -120,48 +110,17 @@
 	min-height: 100%;
 }
 
-.grey_title h2 {
+.banner-box-title h2 {
 	font-size: 1.35rem;
 }
 
-.bbox-col-gate p {
-	color: #2E384D;
-	font-family: mont-regular, sans-serif;
-	font-size: .8rem;
-	margin: 0;
-	margin-top: .6rem;
-}
-
-.bbox-col-gate select:focus {
-	outline: none;
-}
-
-.main-content {
-	width: 100%;
-}
-
-.graph-con {
-	min-height: 12rem;
-	width: calc(100% - 8rem);
-	overflow: hidden;
-	min-height: 11.11rem !important;
-}
-
-input::-webkit-input-placeholder {
-	color: #626262;
-}
-
-input::-moz-placeholder {
-	color: #626262;
-}
-
-.bbox-col.d-flex {
+.banner-box-col.d-flex {
 	position: relative;
 	padding: 1rem 2rem;
 	min-height: auto;
 }
 
-.bbox-left {
+.banner-box-left {
 	position: absolute;
 	left: 0;
 	top: 0;
@@ -171,82 +130,80 @@
 	border-bottom-left-radius: 1.25rem;
 }
 
-.bbox-left.green {
+.banner-box-left.green {
 	background: #CDF5F7;
 	color: #05CCD6;
 }
 
-.bbox-left.yellow {
+.banner-box-left.yellow {
 	background: #FFEECC;
 	color: #FFAA00;
 }
 
-.bbox-left.purple {
+.banner-box-left.purple {
 	background: #F5E5F9;
 	color: #CC7FE2;
 }
 
-.bbox-left.blue {
+.banner-box-left.blue {
 	background: #E2E3FE;
 	color: #7075F9;
 }
 
-.bbox-left.green2 {
+.banner-box-left.green2 {
 	background: #E5F8EC;
 	color: #97E0B3;
 }
 
-.bbox-left i.fa {
+.banner-box-left i.fa {
 	font-size: 1.5rem;
 }
 
-.bbox-left span.no-icon {
+.banner-box-left span.no-icon {
 	padding-left: 1.12rem;
 }
 
-.bbox_body {
+.banner-box-body {
 	padding-left: 3.25rem;
 	width: 100%;
 }
 
-.bbox_body .grey_title {
+.banner-box-body .banner-box-title {
 	font-size: 1.25rem;
 	color: #6c757d;
 	position: relative;
 	cursor: pointer;
 }
 
-.bbox_body .grey_title a {
+.banner-box-body .banner-box-title a {
 	font-size: 1.25rem;
 	font-weight: 500;
 	color: #6c757d;
-	position: relative;
-	cursor: pointer;
 	display: block;
 	width: 100%;
 }
 
-.bbox_body .grey_title a.no-title {
+.banner-box-body .banner-box-title a.no-title {
 	text-decoration: none;
 }
 
-.bbox_body input.form-control {
+.banner-box-body input.form-control {
 	border: 0.1rem solid #DFDCE9;
 	border-radius: 1rem;
 	color: black;
 }
 
-.bbox_body div.cke_textarea_inline {
+.banner-box-body div.cke_textarea_inline {
 	border: 0.1rem solid #DFDCE9;
 	border-radius: 1rem;
 	color: black;
 }
 
-.bbox_body input.form-control::placeholder {
+.banner-box-body input.form-control::placeholder {
 	color: #989EAC;
 }
 
-.bbox_body textarea.form-control {
+.banner-box-body textarea.form-control {
 	border: 0.1rem solid #DFDCE9;
 	border-radius: 1rem;
 	height: 8.25rem;
@@ -255,135 +212,39 @@
 	margin-bottom: .5rem;
 }
 
-.bbox_body textarea.form-control::placeholder {
+.banner-box-body textarea.form-control::placeholder {
 	color: #989EAC;
 }
 
-.bbox-col-gate p.grey_text {
-	color: #677084;
-	font-size: 1rem;
-}
-
-.info_icon {
-	font-size: .95rem;
-}
-
-.tablesorter {
-	max-width: 100%;
-	margin-top: .75rem;
-}
-
-.tablesorter-bootstrap:not (.table-dark ) thead:not (.thead-dark )
-	.tablesorter-header, .tablesorter-bootstrap:not (.table-dark ) tfoot th,
-	.tablesorter-bootstrap:not (.table-dark ) tfoot td {
-	background: #fff;
-}
-
-.tablesorter td a {
-	color: #2E384D;
-}
-
-.tablesorter td ul {
-	margin-bottom: 0;
-}
-
-.tablesorter td input.form-control {
-	height: 2.5rem !important;
-	width: 3.5rem !important;
-	border-radius: 1.1rem !important;
-	text-align: center;
-}
-
-#questionlist ul.bottom {
-	text-align: right;
-	margin-top: 1rem;
-	margin-bottom: 1rem;
-}
-
-.form-control-select {
+.banner-box-body .form-control-select {
 	border: 0.1rem solid #DFDCE9;
 	border-radius: 1.25rem;
 	color: #696f7d;
 	background-color: #F6F5FA;
 }
 
-.tooltip-inner {
-	background-color: #FFFFFF;
-	color: #212529;
-	border: 1px solid #707070;
-	padding: .5rem;
-	font-size: .9rem;
-	text-align: left;
-	line-height: 1.2;
-}
-
-.tooltip.bs-tooltip-top .arrow:before {
-	border-top-color: #707070 !important;
-}
-
-.tooltip.bs-tooltip-top .arrow:before {
-	border-color: #fff;
-}
-
-.bbox-right.bbox_body .grey_title.active .icon_open {
+.banner-box-right.banner-box-body .banner-box-title.active .icon_open {
 	display: flex;
 }
 
-.bbox-right.bbox_body .grey_title.active .icon_close {
+.banner-box-right.banner-box-body .banner-box-title.active .icon_close {
 	display: none;
 }
 
-.bbox-right.bbox_body .grey_title .icon_open {
+.banner-box-right.banner-box-body .banner-box-title .icon_open {
 	display: none;
 }
 
-.bbox-right.bbox_body .grey_title .icon_close {
+.banner-box-right.banner-box-body .banner-box-title .icon_close {
 	display: flex;
 }
 
-.bbox-right.bbox_body .grey_title ~ .row.mt-3 {
-	padding-left: 1rem;
+.component-page-wrapper #questionlist ul.bottom {
+	text-align: right;
+	margin-top: 1rem;
+	margin-bottom: 1rem;
 }
 
-.badge-primary {
-	color: #fff;
-	background-color: #3C42E0;
-}
-
-label {
-	color: #6c757d;
-}
-
-.btn {
-	border-radius: 1.0rem;
-}
-
-.collapsible-link {
-	width: 100%;
-	position: relative;
-	text-align: left;
-}
-
-.collapsible-link::before {
-	content: '\f107';
-	position: absolute;
-	top: 50%;
-	right: 0.8rem;
-	transform: translateY(-50%);
-	display: block;
-	font-family: 'FontAwesome';
-	font-size: 1.8rem;
-}
-
-.collapsible-link[aria-expanded='true']::before {
-	content: '\f139';
-	color: #3C42E0;
-}
-
-:focus {
-	outline: 3px solid rgba(0, 123, 255, .25);
-}
-
 /* Switch */
 
 .switch input {
@@ -486,72 +347,164 @@
 	margin-left: calc(1.9375rem * .8);
 }
 
-.switch.switch-lg {
-	font-size: 1.25rem;
+.switch+.switch {
+	margin-left: 1rem;
 }
 
-.switch.switch-lg input ~ label {
-	min-width: calc(calc(3rem * .8)* 2);
-	height: calc(3rem * .8);
-	line-height: calc(3rem * .8);
-	text-indent: calc(calc(calc(3rem * .8) * 2) + .5rem);
+#qb-question-authoring-modal .modal-content {
+	height: 100%;
 }
 
-.switch.switch-lg input ~ label::before {
-	width: calc(calc(3rem * .8)* 2);
+#qb-question-authoring-modal iframe {
+	width: 100%;
+	height: 100%;
+	border: none;
 }
 
-.switch.switch-lg input ~ label::after {
-	width: calc(calc(3rem * .8) - calc(2px * 2));
-	height: calc(calc(3rem * .8) - calc(2px * 2));
+.toast-top {
+  position: fixed;
+  top: 3rem;
+  left: 50%;
+  transform: translate(-50%, 0px);
+  z-index: 10;
 }
 
-.switch.switch-lg input:checked ~ label::after {
-	margin-left: calc(3rem * .8);
+.toast-top .alert {
+	margin: 0;
 }
 
-.switch+.switch {
-	margin-left: 1rem;
-}
 
-.collapsable-icon-left:after {
-	font-family: FontAwesome;
-	content: "\f078";
-	float: left;
-	color: #6c757d;
-	margin-right: .5rem;
+
+/* Unused? */
+/* 
+.top-menu-btn a {
+	display: inline-block;
+	background-color: #3C42E0;
+	width: 3.1rem;
+	height: 3.1rem;
+	border-radius: 1rem;
+	margin-left: .6rem;
+	text-align: center;
+	line-height: 2.8rem;
+	box-shadow: 0px 3px 6px #3C42E040;
+	transition: all .3s ease;
 }
 
-.collapsable-icon-left.collapsed:after {
-	content: "\f054";
+.top-menu-btn a:hover {
+	background-color: #878bea;
 }
 
-table.table thead {
-	background-color: #e5e5e5;
+.top-menu-btn a img {
+	width: 1rem;
 }
 
-i.fa[role="button"] {
-	cursor : pointer;
+.top-menu-btn a:nth-child(3) img {
+	width: 1.3rem;
 }
 
-#qb-question-authoring-modal .modal-content {
-	height: 100%;
+.top-menu form {
+	position: relative;
+	width: 18.8rem;
+	margin-right: 3rem;
 }
 
-#qb-question-authoring-modal iframe {
+.top-menu input {
 	width: 100%;
-	height: 100%;
-	border: none;
+	height: 3.1rem;
+	border-radius: 1rem;
+	border: 0;
+	background-color: #fff;
+	padding-left: 1.2rem;
+	box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.02);
+	font-size: .95rem;
 }
 
-.toast-top {
-  position: fixed;
-  top: 3rem;
-  left: 50%;
-  transform: translate(-50%, 0px);
-  z-index: 10;
+.top-menu form img {
+	position: absolute;
+	right: 1.2rem;
+	top: .9rem;
+	cursor: pointer;
+	width: 1.2rem;
 }
 
-.toast-top .alert {
-	margin: 0;
-}
\ No newline at end of file
+.top-menu input::placeholder {
+	color: #696f7d;
+}
+
+.content-left {
+	-ms-flex: 0 0 26.5rem;
+	flex: 0 0 26.5rem;
+	max-width: 26.5rem;
+}
+
+.content-right {
+	-ms-flex: 0 0 calc(100% - 26.5rem);
+	flex: 0 0 calc(100% - 26.5rem);
+	max-width: calc(100% - 26.5rem);
+}
+
+.graph-con {
+	min-height: 12rem;
+	width: calc(100% - 8rem);
+	overflow: hidden;
+	min-height: 11.11rem !important;
+}
+
+
+.tablesorter {
+	max-width: 100%;
+	margin-top: .75rem;
+}
+
+.tablesorter-bootstrap:not (.table-dark ) thead:not (.thead-dark )
+	.tablesorter-header, .tablesorter-bootstrap:not (.table-dark ) tfoot th,
+	.tablesorter-bootstrap:not (.table-dark ) tfoot td {
+	background: #fff;
+}
+
+.tablesorter td a {
+	color: #2E384D;
+}
+
+.tablesorter td ul {
+	margin-bottom: 0;
+}
+
+.tablesorter td input.form-control {
+	height: 2.5rem !important;
+	width: 3.5rem !important;
+	border-radius: 1.1rem !important;
+	text-align: center;
+}
+
+
+.switch.switch-lg {
+	font-size: 1.25rem;
+}
+
+.switch.switch-lg input ~ label {
+	min-width: calc(calc(3rem * .8)* 2);
+	height: calc(3rem * .8);
+	line-height: calc(3rem * .8);
+	text-indent: calc(calc(calc(3rem * .8) * 2) + .5rem);
+}
+
+.switch.switch-lg input ~ label::before {
+	width: calc(calc(3rem * .8)* 2);
+}
+
+.switch.switch-lg input ~ label::after {
+	width: calc(calc(3rem * .8) - calc(2px * 2));
+	height: calc(calc(3rem * .8) - calc(2px * 2));
+}
+
+.switch.switch-lg input:checked ~ label::after {
+	margin-left: calc(3rem * .8);
+}
+
+.banner-box-col-gate p.grey_text {
+	color: #677084;
+	font-size: 1rem;
+}
+
+*/
\ No newline at end of file
Index: lams_tool_assessment/web/WEB-INF/tags/PageComponent.tag
===================================================================
diff -u -r401446f02295bfab1a1a863eb02098f12ee7ceb8 -r8ea5094b7d3b0f6e705ede366fd0c78c175905ab
--- lams_tool_assessment/web/WEB-INF/tags/PageComponent.tag	(.../PageComponent.tag)	(revision 401446f02295bfab1a1a863eb02098f12ee7ceb8)
+++ lams_tool_assessment/web/WEB-INF/tags/PageComponent.tag	(.../PageComponent.tag)	(revision 8ea5094b7d3b0f6e705ede366fd0c78c175905ab)
@@ -11,9 +11,8 @@
 
 <%@ attribute name="titleKey" required="false" rtexprvalue="true" %>
 
-<div class="wrapper d-flex">
-	<div class="main-content">
-		<div class="main-content-inner">
+<div class="component-page-wrapper d-flex">
+		<div class="component-page-content">
             <a href="#content" class="sr-only sr-only-focusable">Skip to main content</a>
             
             <c:if test="${not empty titleKey}">
@@ -27,5 +26,4 @@
 			<jsp:doBody />
 			
 		</div>
-	</div>
 </div>
\ No newline at end of file
Index: lams_tool_assessment/web/WEB-INF/tags/Panel.tag
===================================================================
diff -u -r7580e177ee211d4dcf3bc308792fffad8edf826e -r8ea5094b7d3b0f6e705ede366fd0c78c175905ab
--- lams_tool_assessment/web/WEB-INF/tags/Panel.tag	(.../Panel.tag)	(revision 7580e177ee211d4dcf3bc308792fffad8edf826e)
+++ lams_tool_assessment/web/WEB-INF/tags/Panel.tag	(.../Panel.tag)	(revision 8ea5094b7d3b0f6e705ede366fd0c78c175905ab)
@@ -22,9 +22,9 @@
 <%-- Should left panel (icon, color) be displayed at all --%>
 <c:set var="hasLeftPanel" value="${not empty icon or not empty iconClass or not empty colorClass}" />
 
-<div class="bbox-col d-flex" id="${id}-bbox">
+<div class="banner-box-col d-flex" id="${id}-banner-box">
 	<c:if test="${hasLeftPanel}">
-		<div class="bbox-left ${colorClass}">
+		<div class="banner-box-left ${colorClass}">
 			<c:choose>
 				<c:when test="${not empty icon}">
 					<%-- Display regular icon --%>
@@ -42,8 +42,8 @@
 		</div>
 	</c:if>
 	
-	<div class="bbox_body ${hasLeftPanel ? 'bbox-right' : ''}">
-           <div class="grey_title grey_title1">
+	<div class="banner-box-body ${hasLeftPanel ? 'banner-box-right' : ''}">
+           <div class="banner-box-title">
            	<c:set var="contentId" value="${id}-content" />
            	<a class="collapsible-link ${empty titleKey ? ' no-title' : ''}" role="button" href="#${contentId}"
            	   data-toggle="collapse" data-target="#${contentId}" aria-expanded="${expanded}" aria-controls="${contentId}">
Index: lams_tool_assessment/web/pages/authoring/authoring5.jsp
===================================================================
diff -u -r7580e177ee211d4dcf3bc308792fffad8edf826e -r8ea5094b7d3b0f6e705ede366fd0c78c175905ab
--- lams_tool_assessment/web/pages/authoring/authoring5.jsp	(.../authoring5.jsp)	(revision 7580e177ee211d4dcf3bc308792fffad8edf826e)
+++ lams_tool_assessment/web/pages/authoring/authoring5.jsp	(.../authoring5.jsp)	(revision 8ea5094b7d3b0f6e705ede366fd0c78c175905ab)
@@ -28,7 +28,9 @@
 	<script src="<lams:LAMSURL/>includes/javascript/common.js"></script> 
 	
 	<script>
-
+		// jQuery UI overrides Bootstrap's tooltip, so store it under another name
+		$.fn.bootstrapTooltip = $.fn.tooltip.noConflict();
+			
 	    function validateForm() {
 	        //check with a teacher whether he forgot to add questions to the question bank
 	        var referenceCount = $("#referencesTable tr").length - 1;
@@ -51,7 +53,7 @@
 	    }
 	    
 		$(document).ready(function(){
-			$('[data-toggle="tooltip"]').tooltip();
+			$('[data-toggle="tooltip"]').bootstrapTooltip();
 			  
 			$("#attemptsAllowedRadio").change(function() {
 				$("#passingMark").val("0");
@@ -119,7 +121,7 @@
 	</script>
 </head>
 
-<body>
+<body class="component">
 <lams:PageComponent titleKey="label.author.title">
 	<c:if test="${isAuthoringRestricted}">
 		<lams:Alert id="edit-in-monitor-while-assessment-already-attempted" type="error" close="true">
Index: lams_tool_assessment/web/pages/authoring/questions5.jsp
===================================================================
diff -u -r7580e177ee211d4dcf3bc308792fffad8edf826e -r8ea5094b7d3b0f6e705ede366fd0c78c175905ab
--- lams_tool_assessment/web/pages/authoring/questions5.jsp	(.../questions5.jsp)	(revision 7580e177ee211d4dcf3bc308792fffad8edf826e)
+++ lams_tool_assessment/web/pages/authoring/questions5.jsp	(.../questions5.jsp)	(revision 8ea5094b7d3b0f6e705ede366fd0c78c175905ab)
@@ -198,10 +198,10 @@
 		
 		<!-- Question Bank -->
 	    <div class="card mt-5" >
-			<button class="card-header btn btn-block text-left collapsed collapsable-icon-left" type="button"
+			<div class="card-header text-left collapsed collapsable-icon-left" role="button"
 					data-toggle="collapse" data-target="#question-bank-collapse" aria-expanded="false" aria-controls="question-bank-collapse">
 	       		<fmt:message key="label.authoring.basic.question.bank.title" />
-	        </button>
+	        </div>
 			<div id="question-bank-collapse" class="card-body collapse contains-nothing" aria-labelledby="question-bank-heading">
 				<i class="fa fa-refresh fa-spin fa-2x fa-fw" style="margin: auto; display: block"></i>	
 			</div>