Index: lams_central/web/less/main.less
===================================================================
diff -u
--- lams_central/web/less/main.less	(revision 0)
+++ lams_central/web/less/main.less	(revision 4ebcb20e42c6296480b52fe6986a7da08442ebf3)
@@ -0,0 +1,588 @@
+/* 
+********************************************
+Main Style
+********************************************
+*/
+
+/* ** Variables** */
+
+/* Offcanvas */
+@offcanvas-background: #164276;
+@offcanvas-width: 220px;
+@offcanvas-color: #E7E7E7;
+@offcanvas-background-active: #2B5B95;
+@offcanvas-active-highlight: #0E9AEF;
+@offcanvas-logo-background: #072B57;
+/* need to move the img from jsp to css */
+
+/* nav */
+@nav-color: #ECF0F1;
+@navbar-text-color: #515356;
+@notification-pending-count-color: #1ABB9C;
+
+@course-separator-color: #EEE;
+
+@lesson-name-link-color: #5A738E;
+
+/* footer */
+@footer-background-color: #FFF;
+@footer-font-size: 75%;
+
+@table-sorter-link-color: #A7B1C2;
+
+/* folders and paths */
+@lams-folder: '/lams';
+@lams-css-folder: '@{lams-folder}/css';
+@lams-images-css-folder: '@{lams-folder}/images/css';
+@lams-font-awesome-css: '@{lams-folder}/includes/font-awesome/css';
+@body-bg-image: 'light-fabric.jpg';
+
+/* ** End variables ** */
+
+body {
+	width: 100%;
+	overflow-x: hidden;
+	font-size: 13px;
+	background: url('@{lams-images-css-folder}/@{body-bg-image}');
+}
+html {
+	height: 100%;
+}
+#offcanvas {
+	position: fixed;
+	width: @offcanvas-width;
+	z-index: 10;
+	height: 100%;
+	background: @offcanvas-background;
+	color: @offcanvas-color;
+}
+.courses-title {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    font-weight: 300;
+    font-size: 23px;
+    width: 100%;
+    color: @nav-color !important;
+    margin-left: 0 !important;
+    line-height: 49px;
+    margin: 0;
+    padding-left: 25px;
+}
+#page-wrapper {
+	min-height: 1000px;
+	margin: 0 0 0 220px;
+	padding: 10px 20px 0px;
+}
+.offcanvas-hidden #offcanvas {
+	display: none;
+}
+.offcanvas-hidden #page-wrapper {
+	margin: 0 0 0 0;
+}
+@media (min-width: 769px) {
+	.icon-remove {
+		display: none !important;
+	}
+}
+@media (max-width: 768px) {
+	#offcanvas {
+		width: 100%;
+	}
+	.navbar-nav .open .dropdown-menu {
+    	top:52px; /*hack to prevent disappearing*/
+	}
+}
+@media (max-width: 870px) {
+	body.offcanvas-hidden .xs-hidden {
+		display: none !important;
+	}
+}
+@media (max-width: 1170px) {
+	body:not(.offcanvas-hidden) .xs-hidden {
+		display: none !important;
+	}
+}
+
+.content {
+	/*background: #fff;*/
+	padding: 7px 10px;
+	background: #fff;
+}
+#org-container {
+	padding: 17px 10px 17px 25px;
+}
+
+/*FOOTER*/
+footer {
+	width: 100%;
+	font-size: @footer-font-size;
+	background-color: @footer-background-color;
+}
+a {
+    color: @lesson-name-link-color; 
+    text-decoration: none;
+}
+
+/*OFFCANVAS BAR*/
+#favorite-organisations {
+    border-top: 1px solid rgba(255, 255, 255, 0.16);
+	border-bottom: 1px solid rgba(255, 255, 255, 0.16);
+}
+#favorite-organisations > li > a, .tablesorter a {
+    color: @table-sorter-link-color;
+    font-weight: 400;
+    padding: 14px 20px 14px 25px;
+}
+#favorite-organisations > li > a:hover,
+#favorite-organisations > li > a:focus,
+.pagesize:hover,
+.tablesorter a:hover,
+.tablesorter a:focus {
+  background-color: @offcanvas-logo-background;
+  color: white;
+}
+.tablesorter a {
+    display:block;
+    text-decoration:none;
+    font-size: 13px;
+}
+#offcanvas .active > a,
+#offcanvas .active > a:hover,
+#offcanvas .active > a:focus {
+	background: @offcanvas-background-active;
+}
+#offcanvas .active > a {
+    color: #ffffff;
+}
+#offcanvas td.active {
+    border-right: 10px solid @offcanvas-active-highlight;
+    background: @offcanvas-background-active;
+}
+.offcanvas-logo {
+	padding: 20px 0px 0px 25px;
+    background-color: @offcanvas-logo-background;
+}
+.offcanvas-logo img{
+	width: 100px;
+}
+.offcanvas-header {
+	padding: 15px 0px 0px 0px;
+}
+.offcanvas-search {
+	padding: 15px 19px 15px;
+	margin-bottom: 0;
+}
+.offcanvas-search .form-control {
+	box-shadow: inset 0 1px 0px rgba(208, 206, 206, 0.25);
+	border-radius: 25px;
+	height: 20px;
+	font-size: 11px;
+	padding: 2px 5px;
+	line-height: 1;
+	border: 1px solid rgba(221, 226, 232, 0.49);
+	background: @offcanvas-logo-background; 
+}
+.offcanvas-search .form-control::-webkit-input-placeholder { /* WebKit, Blink, Edge */
+    color: #ddd;
+}
+.offcanvas-search .form-control:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
+   color: #ddd;
+}
+.offcanvas-search .form-control::-moz-placeholder { /* Mozilla Firefox 19+ */
+   color: #ddd;
+}
+.offcanvas-search .form-control:-ms-input-placeholder { /* Internet Explorer 10-11 */
+   color: #ddd;
+}
+.ts-pager {
+	text-align: center;
+    padding: 0 10px 10px;
+    color: @table-sorter-link-color;
+}
+.ts-pager .btn{
+	color: @offcanvas-background;
+    background-color: @table-sorter-link-color;
+    padding: 2px 5px;
+    line-height: 1;
+}
+.tablesorter tfoot i {
+	font-size: 11px;
+}
+.tablesorter tfoot th {
+	background-color: @offcanvas-logo-background !important;
+	padding: 10px 0;
+}
+
+.pagesize {
+    border: 1px solid rgba(221, 226, 232, 0.49);
+    background: @offcanvas-background;
+    cursor: pointer;
+}
+
+.icon-remove {
+	cursor: pointer;
+	position: absolute;
+	width: 40px;
+	top: 30px;
+	right: 5px;
+}
+.icon-remove:hover {
+	color: #ffffff;
+}
+.fa-chevron-circle-right.fa-lg {
+	line-height: 1em;
+}
+/*TOP HEADER*/
+.nav_menu {
+    float: left;
+    background: #EDEDED;
+    border-bottom: 1px solid #D9DEE4;
+    margin-bottom: 10px;
+    width: 100%;
+}
+.offcanvas-toggle-wrapper {
+    float: left;
+    margin: 0;
+    padding: 15px 0 10px 7px;
+    width: 70px;
+    cursor: pointer;
+}
+@media (min-width: 768px) {
+	.offcanvas-toggle-wrapper {
+	    padding-top: 20px;
+	    padding-bottom: 15px;
+	}
+}
+.offcanvas-toggle {
+    padding: 15px 15px 0;
+    margin: 0;
+}
+
+.offcanvas-toggle i {
+    font-size: 26px;
+}
+.top_nav .navbar-right {
+    margin: 0;
+    width: 70%;
+    float: right;
+}
+.top_nav .navbar-right li {
+    display: inline-block;
+    float: right;
+    position: static;
+}
+@media (min-width: 480px) {
+  .top_nav .navbar-right li {
+    position: relative; 
+  } 
+}
+.top_nav .dropdown-menu li {
+    width: 100%;
+}
+.top_nav li a i {
+	font-size: 15px;
+}
+ul.dropdown-usermenu li {
+    background: #EDEDED;
+    display: -ms-flexbox;
+    display: flex;
+    margin: 2px 2px 0;
+    width: 98% !important;
+}
+
+/*TOP HEADER LINKS*/
+.offcanvas-toggle-wrapper:hover, ul.dropdown-usermenu li a:focus, ul.dropdown-usermenu li a:hover, .top_nav .nav > li > a:hover, .top_nav .nav .open > a, .top_nav .nav .open > a:focus, .top_nav .nav .open > a:hover {
+    background: #D9DEE4;
+}
+.nav > li > a:hover, .nav > li > a:focus {
+    background-color: transparent;
+}
+.navbar-nav > li > a {
+    font-weight: 500;
+    color: @nav-color !important;
+    margin-left: 0 !important;
+    line-height: 32px;
+}
+.top_nav .dropdown-menu li a {
+    width: 100%;
+    padding: 10px 20px;
+}
+.top_nav .dropdown-menu li a i {
+    padding-right: 15px;
+}
+.dropdown-menu a {
+    cursor: pointer;
+}
+.navbar-nav .open .dropdown-menu {
+    position: absolute;
+    background: #fff;
+    margin-top: 0;
+    padding: 0 0 3px;
+    border: 1px solid #D9DEE4;
+    -webkit-box-shadow: none;
+    right: 0;
+    left: auto;
+    width: 210px;
+}
+.nav.navbar-nav > li > a {
+    color: @navbar-text-color !important;
+}
+.user-profile img {
+    width: 29px;
+    height: 29px;
+    border-radius: 50%;
+    margin-right: 10px;
+}
+#notificationsPendingCount{
+	font-size: 10px;
+	font-weight: normal;
+	line-height: 13px;
+	padding: 2px 5px;
+	position: absolute;
+	left: 25px;
+	top: 10px;
+	background: @notification-pending-count-color !important;
+	border: 1px solid @notification-pending-count-color !important;
+	display: inline-block;
+	min-width: 10px;
+	color: #fff;
+	text-align: center;
+	white-space: nowrap;
+	vertical-align: middle;
+	border-radius: 10px;
+}
+
+/*DIALOGS*/
+.dialogContainer {
+	-webkit-overflow-scrolling: touch !important;
+}
+
+.dialogContainer .modal-body {
+	height : 100%;
+	max-height: calc(100% - 60px);
+	padding: 0;
+}
+
+.dialogContainer iframe {
+	width: 100%;
+	height: 100%;
+	border: none;
+}
+
+.dialogContainer button {
+	cursor: pointer;
+}
+.dialogContainer button:focus {
+	outline: none;
+}
+
+.dialogContainer button .fa {
+  font-size: 16px;
+  margin-left: 10px;
+}
+
+.dialogContainer .ui-draggable .modal-header {
+	cursor: move;
+}
+
+#dialogMinContainer {
+	height: 35px;
+	bottom: 1px;
+	left: 1px;
+	position: fixed;
+	right: 1px;
+	z-index: 9999;
+}
+
+.dialogMin {
+	overflow: hidden !important;
+	padding: 0 !important;
+	margin: 0;
+	float: left;
+	position: static !important;
+}
+
+.dialogMin .modal-title {
+	white-space: nowrap;
+	overflow: hidden;
+}
+
+.dialogMin .modal-dialog {
+	left: 0 !important;
+	top: 0 !important;
+}
+
+.dialogMin .modal-dialog, .dialogMin .modal-content {
+	width: 250px !important;
+	height: 35px !important;
+	margin: 0 !important;
+	padding: 0 !important;
+}
+
+.dialogMin .modal-header {
+	height: 100%;
+	margin: 0 !important;
+	padding: 3px 5px !important;
+}
+
+.ui-dialog .ui-dialog-content {
+	padding: 3px;
+}
+
+#tablePrivateNotifications tr:first-child td {
+	font-weight: bold;
+	text-align: center;
+}
+
+#tablePrivateNotifications td.notificationsReadCell {
+	font-size: 16px;
+	width: 30px;
+	text-align: center;
+}
+
+#tablePrivateNotifications td.notificationsPendingCell {
+	font-weight: bold;
+}
+
+#tablePrivateNotifications td.notificationsClickableCell:hover {
+	cursor: pointer;
+	/* CSS3 glow effect: */
+	-moz-border-radius: 6px;
+	-webkit-border-radius: 6px;
+	border-radius: 6px;
+	-moz-box-shadow: 0 0 5px #A6E5FD;
+	-webkit-box-shadow: 0 0 5px #A6E5FD;
+	box-shadow: 0 0 5px #A6E5FD;
+}
+
+/* GROUP CONTAINER */
+.j-single-lesson {
+	list-style: none;
+	margin: 6px;
+	padding: 3px 3px 3px 10px;
+	position: relative;
+}
+
+.j-single-lesson:hover {
+	border-color: #9be0f9;
+	background-color: #F0F8FF;
+	display: block;
+	/* CSS3 glow effect: */
+	-moz-border-radius: 3px;
+	-webkit-border-radius: 3px;
+	border-radius: 3px;
+	-moz-box-shadow: 0 0 5px #A6E5FD;
+	-webkit-box-shadow: 0 0 5px #A6E5FD;
+	box-shadow: 0 0 5px #A6E5FD;
+}
+
+.j-single-lesson:hover .lesson-actions {
+	opacity: 1;
+	// filter: alpha(opacity = 100); /* msie */
+	display: block;
+}
+
+.j-single-lesson:hover .mycourses-monitor-img {
+}
+
+.j-single-lesson:hover .mycourses-mark-img {
+}
+
+.j-single-lesson:hover .mycourses-notifications-img {
+}
+
+.j-single-lesson:hover .mycourses-conditions-img {
+}
+
+.j-single-lesson:hover .mycourses-removelesson-img {
+}
+
+.j-single-lesson:hover .mycourses-move-img {
+	background: url('../images/css/arrow_move.png') no-repeat 0 0px;
+}
+
+.lesson-actions {
+	float: right;
+	font-size: 1.2em;
+	opacity: 0.3;
+	/* filter: alpha(opacity = 10); msie */
+}
+
+.lesson-actions a {
+	border-bottom: none;	
+}
+
+.child-org-name {
+	float: left;
+	padding-top: 5px;
+}
+
+.split-ui-button+ul {
+	z-index: 1;
+}
+
+.split-ui-button+ul li {
+	list-style-type: none;
+}
+
+.split-ui-button+ul li a {
+	border: none;
+}
+
+.split-ui-button div:first-child {
+	margin-right: -0.4em;
+}
+
+.split-ui-button + ul span {
+	color: #999;
+}
+
+.ui-button, .split-ui-button div {
+	font-size: 12px !important;
+	font-weight: normal !important;
+}
+
+a.sorting {
+	border-bottom: none;
+	cursor: pointer;
+}
+
+.lesson-table {
+	margin: 0 auto;
+	width: 100%;
+}
+
+.subgroup-lesson-table {
+	padding-top: 30px;
+}
+
+.course-right-buttons {
+	padding-right: 20px;
+}
+
+.group-name {
+	margin-top: 20px;
+	margin-left: 30px;
+}
+
+.group-name p {
+	padding-top: 0px;
+	margin-bottom: 0px;
+	padding-left: 0px;
+	margin-left: 0px;
+}
+
+.group-name strong {
+	color: #666;
+}
+.course-header {
+	padding-bottom: 5px; 
+	border-bottom: 1px solid @course-separator-color;
+}
+.course-header i{
+	font-size: 16px;
+}
+
+.j-course-contents {
+	border-bottom: 1px solid @course-separator-color;
+}