diff --git a/main/css/chamilo_red_utp/dataTable.css b/main/css/chamilo_red_utp/dataTable.css
new file mode 100644
index 0000000000..f069807ade
--- /dev/null
+++ b/main/css/chamilo_red_utp/dataTable.css
@@ -0,0 +1,538 @@
+/*
+ * File: demo_table.css
+ * CVS: $Id$
+ * Description: CSS descriptions for DataTables demo pages
+ * Author: Allan Jardine
+ * Created: Tue May 12 06:47:22 BST 2009
+ * Modified: $Date$ by $Author$
+ * Language: CSS
+ * Project: DataTables
+ *
+ * Copyright 2009 Allan Jardine. All Rights Reserved.
+ *
+ * ***************************************************************************
+ * DESCRIPTION
+ *
+ * The styles given here are suitable for the demos that are used with the standard DataTables
+ * distribution (see www.datatables.net). You will most likely wish to modify these styles to
+ * meet the layout requirements of your site.
+ *
+ * Common issues:
+ * 'full_numbers' pagination - I use an extra selector on the body tag to ensure that there is
+ * no conflict between the two pagination types. If you want to use full_numbers pagination
+ * ensure that you either have "example_alt_pagination" as a body class name, or better yet,
+ * modify that selector.
+ * Note that the path used for Images is relative. All images are by default located in
+ * images/dataTable/ - relative to this CSS file.
+ */
+
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ * DataTables features
+ */
+
+.dataTables_wrapper {
+ position: relative;
+ min-height: 302px;
+ clear: both;
+ _height: 302px;
+ zoom: 1; /* Feeling sorry for IE */
+}
+
+.dataTables_processing {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ width: 250px;
+ height: 30px;
+ margin-left: -125px;
+ margin-top: -15px;
+ padding: 14px 0 2px 0;
+ border: 1px solid #ddd;
+ text-align: center;
+ color: #999;
+ font-size: 14px;
+ background-color: white;
+}
+
+.dataTables_length {
+ width: 40%;
+ float: left;
+}
+
+.dataTables_filter {
+ width: 50%;
+ float: right;
+ text-align: right;
+}
+
+.dataTables_info {
+ width: 60%;
+ float: left;
+}
+
+.dataTables_paginate {
+ width: 44px;
+ * width: 50px;
+ float: right;
+ text-align: right;
+}
+
+/* Pagination nested */
+.paginate_disabled_previous, .paginate_enabled_previous, .paginate_disabled_next, .paginate_enabled_next {
+ height: 19px;
+ width: 19px;
+ margin-left: 3px;
+ float: left;
+}
+
+.paginate_disabled_previous {
+ background-image: url('images/dataTale/back_disabled.jpg');
+}
+
+.paginate_enabled_previous {
+ background-image: url('images/dataTable/back_enabled.jpg');
+}
+
+.paginate_disabled_next {
+ background-image: url('images/dataTable/forward_disabled.jpg');
+}
+
+.paginate_enabled_next {
+ background-image: url('images/dataTable/forward_enabled.jpg');
+}
+
+
+
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ * DataTables display
+ */
+table.display {
+ margin: 0 auto;
+ clear: both;
+ width: 100%;
+
+ /* Note Firefox 3.5 and before have a bug with border-collapse
+ * ( https://bugzilla.mozilla.org/show%5Fbug.cgi?id=155955 )
+ * border-spacing: 0; is one possible option. Conditional-css.com is
+ * useful for this kind of thing
+ *
+ * Further note IE 6/7 has problems when calculating widths with border width.
+ * It subtracts one px relative to the other browsers from the first column, and
+ * adds one to the end...
+ *
+ * If you want that effect I'd suggest setting a border-top/left on th/td's and
+ * then filling in the gaps with other borders.
+ */
+}
+
+table.display thead th {
+ padding: 3px 18px 3px 10px;
+ border-bottom: 1px solid black;
+ font-weight: bold;
+ cursor: pointer;
+ * cursor: hand;
+}
+
+table.display tfoot th {
+ padding: 3px 18px 3px 10px;
+ border-top: 1px solid black;
+ font-weight: bold;
+}
+
+table.display tr.heading2 td {
+ border-bottom: 1px solid #aaa;
+}
+
+table.display td {
+ padding: 3px 10px;
+}
+
+table.display td.center {
+ text-align: center;
+}
+
+
+
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ * DataTables sorting
+ */
+
+.sorting_asc {
+ background: url('images/dataTable/sort_asc.png') no-repeat center right;
+}
+
+.sorting_desc {
+ background: url('images/dataTable/sort_desc.png') no-repeat center right;
+}
+
+.sorting {
+ background: url('images/dataTable/sort_both.png') no-repeat center right;
+}
+
+.sorting_asc_disabled {
+ background: url('images/dataTable/sort_asc_disabled.png') no-repeat center right;
+}
+
+.sorting_desc_disabled {
+ background: url('images/dataTable/sort_desc_disabled.png') no-repeat center right;
+}
+
+
+
+
+
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ * DataTables row classes
+ */
+table.display tr.odd.gradeA {
+ background-color: #ddffdd;
+}
+
+table.display tr.even.gradeA {
+ background-color: #eeffee;
+}
+
+table.display tr.odd.gradeC {
+ background-color: #ddddff;
+}
+
+table.display tr.even.gradeC {
+ background-color: #eeeeff;
+}
+
+table.display tr.odd.gradeX {
+ background-color: #ffdddd;
+}
+
+table.display tr.even.gradeX {
+ background-color: #ffeeee;
+}
+
+table.display tr.odd.gradeU {
+ background-color: #ddd;
+}
+
+table.display tr.even.gradeU {
+ background-color: #eee;
+}
+
+
+tr.odd {
+ background-color: #E2E4FF;
+}
+
+tr.even {
+ background-color: white;
+}
+
+
+
+
+
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ * Misc
+ */
+.dataTables_scroll {
+ clear: both;
+}
+
+.dataTables_scrollBody {
+ *margin-top: -1px;
+}
+
+.top, .bottom {
+ padding: 15px;
+ background-color: #F5F5F5;
+ border: 1px solid #CCCCCC;
+}
+
+.top .dataTables_info {
+ float: none;
+}
+
+.clear {
+ clear: both;
+}
+
+.dataTables_empty {
+ text-align: center;
+}
+
+tfoot input {
+ margin: 0.5em 0;
+ width: 100%;
+ color: #444;
+}
+
+tfoot input.search_init {
+ color: #999;
+}
+
+td.group {
+ background-color: #d1cfd0;
+ border-bottom: 2px solid #A19B9E;
+ border-top: 2px solid #A19B9E;
+}
+
+td.details {
+ background-color: #d1cfd0;
+ border: 2px solid #A19B9E;
+}
+
+
+.example_alt_pagination div.dataTables_info {
+ width: 40%;
+}
+
+.paging_full_numbers {
+ width: 400px;
+ height: 22px;
+ line-height: 22px;
+}
+
+.paging_full_numbers span.paginate_button,
+ .paging_full_numbers span.paginate_active {
+ border: 1px solid #aaa;
+ -webkit-border-radius: 5px;
+ -moz-border-radius: 5px;
+ padding: 2px 5px;
+ margin: 0 3px;
+ cursor: pointer;
+ *cursor: hand;
+}
+
+.paging_full_numbers span.paginate_button {
+ background-color: #ddd;
+}
+
+.paging_full_numbers span.paginate_button:hover {
+ background-color: #ccc;
+}
+
+.paging_full_numbers span.paginate_active {
+ background-color: #99B3FF;
+}
+
+table.display tr.even.row_selected td {
+ background-color: #B0BED9;
+}
+
+table.display tr.odd.row_selected td {
+ background-color: #9FAFD1;
+}
+
+
+/*
+ * Sorting classes for columns
+ */
+/* For the standard odd/even */
+tr.odd td.sorting_1 {
+ background-color: #D3D6FF;
+}
+
+tr.odd td.sorting_2 {
+ background-color: #DADCFF;
+}
+
+tr.odd td.sorting_3 {
+ background-color: #E0E2FF;
+}
+
+tr.even td.sorting_1 {
+ background-color: #EAEBFF;
+}
+
+tr.even td.sorting_2 {
+ background-color: #F2F3FF;
+}
+
+tr.even td.sorting_3 {
+ background-color: #F9F9FF;
+}
+
+
+/* For the Conditional-CSS grading rows */
+/*
+ Colour calculations (based off the main row colours)
+ Level 1:
+ dd > c4
+ ee > d5
+ Level 2:
+ dd > d1
+ ee > e2
+ */
+tr.odd.gradeA td.sorting_1 {
+ background-color: #c4ffc4;
+}
+
+tr.odd.gradeA td.sorting_2 {
+ background-color: #d1ffd1;
+}
+
+tr.odd.gradeA td.sorting_3 {
+ background-color: #d1ffd1;
+}
+
+tr.even.gradeA td.sorting_1 {
+ background-color: #d5ffd5;
+}
+
+tr.even.gradeA td.sorting_2 {
+ background-color: #e2ffe2;
+}
+
+tr.even.gradeA td.sorting_3 {
+ background-color: #e2ffe2;
+}
+
+tr.odd.gradeC td.sorting_1 {
+ background-color: #c4c4ff;
+}
+
+tr.odd.gradeC td.sorting_2 {
+ background-color: #d1d1ff;
+}
+
+tr.odd.gradeC td.sorting_3 {
+ background-color: #d1d1ff;
+}
+
+tr.even.gradeC td.sorting_1 {
+ background-color: #d5d5ff;
+}
+
+tr.even.gradeC td.sorting_2 {
+ background-color: #e2e2ff;
+}
+
+tr.even.gradeC td.sorting_3 {
+ background-color: #e2e2ff;
+}
+
+tr.odd.gradeX td.sorting_1 {
+ background-color: #ffc4c4;
+}
+
+tr.odd.gradeX td.sorting_2 {
+ background-color: #ffd1d1;
+}
+
+tr.odd.gradeX td.sorting_3 {
+ background-color: #ffd1d1;
+}
+
+tr.even.gradeX td.sorting_1 {
+ background-color: #ffd5d5;
+}
+
+tr.even.gradeX td.sorting_2 {
+ background-color: #ffe2e2;
+}
+
+tr.even.gradeX td.sorting_3 {
+ background-color: #ffe2e2;
+}
+
+tr.odd.gradeU td.sorting_1 {
+ background-color: #c4c4c4;
+}
+
+tr.odd.gradeU td.sorting_2 {
+ background-color: #d1d1d1;
+}
+
+tr.odd.gradeU td.sorting_3 {
+ background-color: #d1d1d1;
+}
+
+tr.even.gradeU td.sorting_1 {
+ background-color: #d5d5d5;
+}
+
+tr.even.gradeU td.sorting_2 {
+ background-color: #e2e2e2;
+}
+
+tr.even.gradeU td.sorting_3 {
+ background-color: #e2e2e2;
+}
+
+
+/*
+ * Row highlighting example
+ */
+.ex_highlight #example tbody tr.even:hover, #example tbody tr.even td.highlighted {
+ background-color: #ECFFB3;
+}
+
+.ex_highlight #example tbody tr.odd:hover, #example tbody tr.odd td.highlighted {
+ background-color: #E6FF99;
+}
+
+.ex_highlight_row #example tr.even:hover {
+ background-color: #ECFFB3;
+}
+
+.ex_highlight_row #example tr.even:hover td.sorting_1 {
+ background-color: #DDFF75;
+}
+
+.ex_highlight_row #example tr.even:hover td.sorting_2 {
+ background-color: #E7FF9E;
+}
+
+.ex_highlight_row #example tr.even:hover td.sorting_3 {
+ background-color: #E2FF89;
+}
+
+.ex_highlight_row #example tr.odd:hover {
+ background-color: #E6FF99;
+}
+
+.ex_highlight_row #example tr.odd:hover td.sorting_1 {
+ background-color: #D6FF5C;
+}
+
+.ex_highlight_row #example tr.odd:hover td.sorting_2 {
+ background-color: #E0FF84;
+}
+
+.ex_highlight_row #example tr.odd:hover td.sorting_3 {
+ background-color: #DBFF70;
+}
+
+
+/*
+ * KeyTable
+ */
+table.KeyTable td {
+ border: 3px solid transparent;
+}
+
+table.KeyTable td.focus {
+ border: 3px solid #3366FF;
+}
+
+table.display tr.gradeA {
+ background-color: #eeffee;
+}
+
+table.display tr.gradeC {
+ background-color: #ddddff;
+}
+
+table.display tr.gradeX {
+ background-color: #ffdddd;
+}
+
+table.display tr.gradeU {
+ background-color: #ddd;
+}
+
+div.box {
+ height: 100px;
+ padding: 10px;
+ overflow: auto;
+ border: 1px solid #8080FF;
+ background-color: #E5E5FF;
+}
diff --git a/main/css/chamilo_red_utp/default.css b/main/css/chamilo_red_utp/default.css
new file mode 100644
index 0000000000..6c26588d97
--- /dev/null
+++ b/main/css/chamilo_red_utp/default.css
@@ -0,0 +1,233 @@
+/*****************************************************
+ * MAIN - CHAMILO RED CSS
+ *****************************************************/
+
+/* Adding default style for the chamilo_X themes */
+@import url('../base_chamilo.css');
+
+/* the following for regular elements */
+a {
+ text-decoration: none;
+ color :#ff0000;
+}
+a:visited {
+ text-decoration: none;
+}
+a:hover {
+ text-decoration: none;
+ color: #f3840d;
+}
+a:active {
+ text-decoration: none;
+ color : #ff0000;
+}
+
+#header1 {
+ /* background-image:url(images/bg-header1.gif); */
+}
+
+.subnav-fixed {
+ position: fixed;
+ top: 0px;
+ left: 0;
+ right: 0;
+ z-index: 1030;
+ border-color: #d5d5d5;
+ border-width: 0 0 1px; /* drop the border on the fixed edges */
+ -webkit-border-radius: 0;
+ -moz-border-radius: 0;
+ border-radius: 0;
+}
+
+.subnav .navbar-inner {
+ background-color: #79AA0B; /* Old browsers */
+ background-repeat: repeat-x; /* Repeat the gradient */
+ background-image: -moz-linear-gradient(top, #D60B19 0%, #E8222F 100%); /* FF3.6+ */
+
+ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#D60B19), color-stop(100%,#E8222F)); /* Chrome,Safari4+ */
+ background-image: -webkit-linear-gradient(top, #D60B19 0%, #E8222F 100%); /* Chrome 10+,Safari 5.1+ */
+ background-image: -ms-linear-gradient(top, #D60B19 0%,#E8222F 100%); /* IE10+ */
+ background-image: -o-linear-gradient(top, #D60B19 0%,#E8222F 100%); /* Opera 11.10+ */
+ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#D60B19', endColorstr='#E8222F',GradientType=0 ); /* IE6-9 */
+ background-image: linear-gradient(top, #D60B19 0%,#E8222F 100%); /* W3C */
+}
+
+.subnav .nav > li > a {
+ border-left: 1px solid #D60B19;
+ border-right: 1px solid #D60B19;
+}
+
+.subnav .nav > #current > a,
+.subnav .nav > #current > a:hover {
+ color: #fff;
+ background-color: #D60B19;
+ border-right-color: #D60B19;
+}
+
+.subnav .nav > li > a {
+ color:#fff;
+}
+
+/* Green hover */
+.subnav .navbar-inner li a:hover {
+ background: none repeat scroll 0 0 #E8222F;
+ color: #fff;
+}
+
+/*****************************************************
+ * FOOTER STYLES *
+ *****************************************************/
+footer {
+ background-color: #a90a0e;
+ background-image: url(images/bg-footer.gif);
+ background-repeat:repeat-x;
+ font-size: 12px;
+ color:#ffffff;
+ height: 9em;
+ overflow:hidden;
+ width: 100%;
+}
+
+/* Sticky footer*/
+.push {
+ height: 9em; /* Very important */
+}
+#footer .copyright {
+ float: right;
+ padding-top:60px;
+ margin-right:5%;
+}
+
+.footer_emails{
+ float: left;
+ padding-top:60px;
+ margin-right:5%;
+}
+
+/*****************************************************
+ * DISPLAY MESSAGES *
+ *****************************************************/
+.normal-message {
+ color: #00407F;
+ border: 1px solid #CDE6F5;
+ background: url("images/background_message.png") repeat-x scroll 0 0 #EAF8FE;
+}
+.warning-message {
+ border: 1px solid #FFB30F;
+ color: #000;
+ background: url("images/background_message.png") repeat-x scroll 0 0 #FFEFA7;
+}
+.confirmation-message {
+ border: 1px solid #1F8323;
+ color:#1F8323;
+ background: url("images/background_message.png") repeat-x scroll 0 0 #CAF0C7;
+}
+.error-message {
+ border: 1px solid #FF0000;
+ color: #440000;
+ background: url("images/background_message.png") repeat-x scroll 0 0 #FFD1D1;
+}
+
+/* New training */
+.bottom-link {
+ background-image:url(images/button_back.jpg);
+}
+
+.social-menu-title {
+ background-color:#ff0000;
+}
+
+#social-content-online {
+ background-color:#ff0000;
+}
+
+.admin_section li {
+ background-image:url(images/bullet.gif);
+}
+
+.system_announcements {
+ background: transparent url('images/systemenouvelles.jpg') no-repeat top left;
+}
+
+.topa {
+ background:transparent url('images/logoa4.gif') no-repeat;
+}
+.topb {
+ background:transparent url('images/logob4.gif') no-repeat;
+}
+
+#bottomhellomindfactory {
+ background:transparent url('images/textologo.jpg') no-repeat;
+}
+
+
+#exercise_close_link {
+ background: url(images/close.gif) no-repeat;
+}
+
+#exercise_close_link:hover {
+ background: url(images/close_highlight.gif) no-repeat;
+}
+
+/*including "login" image*/
+button.login {
+ background-image:url(images/bg-button.gif);
+}
+
+button.login:hover {
+}
+
+/*including "save" image*/
+button.save {
+ background-image:url(images/button_accept.gif);
+}
+/*including "add" image*/
+button.add {
+ background-image:url(images/button_add.gif);
+}
+/*including "cancel" image*/
+button.cancel {
+ background-image:url(images/button_delete.gif);
+}
+/*including "search" image*/
+button.search {
+ background-image:url(images/bg-button.gif);
+}
+/*including "plus" image*/
+button.plus {
+ background-image:url(images/button_plus.gif);
+}
+/*including "minus" image*/
+button.minus {
+ background-image:url(images/button_minus.gif);
+}
+/*including "next" image*/
+button.next {
+ background-image:url(images/button_next.gif);
+}
+/*including "back" image*/
+button.back {
+ background-image:url(images/button_back.gif);
+}
+/*including "refresh" image*/
+button.refresh {
+ background-image:url(images/button_refresh.gif);
+}
+/*including "upload" image*/
+button.upload {
+ background-image:url(images/button_upload.gif);
+}
+button.arrowr, input.arrowr {
+ background-image:url(images/2rightarrow.gif);
+}
+button.arrowl, input.arrowl {
+ background-image:url(images/2leftarrow.gif);
+}
+
+.refresh {
+ background-image:url(images/refresh.png);
+}
+
+.portal {
+ background-image:url(images/portal.png);
+}
diff --git a/main/css/chamilo_red_utp/frames.css b/main/css/chamilo_red_utp/frames.css
new file mode 100644
index 0000000000..17c664ff1e
--- /dev/null
+++ b/main/css/chamilo_red_utp/frames.css
@@ -0,0 +1,1063 @@
+body {
+ font-family: verdana, arial, helvetica, sans-serif;
+ font-size: 12px;
+ color: #000;
+ margin: 10px;
+ padding: 0;
+ background-color: #fff;
+}
+img {
+ border: none;
+}
+#outerframe {
+ position: relative; /* do not remove, fixes a bug in IE */
+ border: 1px solid #fff;
+ background-color: #fff;
+}
+/* Hides from IE5-mac \*/
+* html #outerframe {
+ height: 1%;
+}
+/* End hide from IE5-mac */
+
+/*****************************************************
+ * HEADER STYLES *
+ *****************************************************/
+#header {
+ width: 100%;
+ padding: 0;
+ margin: 0;
+}
+/* Header 1: Containing title, portal and organization */
+#header1 {
+ font-size: 12px;
+ padding: 4px;
+ background-color: #264269;
+ color: #fff;
+ border-bottom: 1px solid white;
+}
+#header1 a {
+ color: #ffffff;
+ text-decoration: none;
+}
+#header1 a:hover {
+ text-decoration: underline;
+}
+#sitename {
+ margin: 0;
+ font-weight: bold;
+}
+#institution {
+ float: left;
+ font-weight: bold;
+}
+#my_courses {
+ float: right;
+ font-weight: bold;
+}
+/* Header 2: Containing My Courses, My Profile,... */
+#header2 {
+ font-size: 12px;
+ padding: 4px;
+ background-color: #4271B5;
+ color: #fff;
+ border-bottom: 1px solid white;
+}
+#header2 .banner_links {
+ margin: 0;
+}
+#header2 a {
+ text-decoration: none;
+ color: #fff;
+ background: transparent;
+ font-weight:normal;
+ font-size: 12px;
+}
+#header2 input.logout {
+ /* makes an input appear like a link in this header */
+ margin: 0;
+ padding: 0;
+ background-color: transparent;
+ border: none;
+ color: #fff;
+ font-size: 12px;
+ font-weight:normal;
+ font-family: verdana, arial, helvetica, sans-serif;
+}
+#header2 a:hover, #header2 input.logout:hover {
+ border-bottom: 1px solid #fff;
+}
+#logout {
+ float: right;
+ width:20%;
+ text-align:right;
+}
+/* Header 3: Containing breadcrumbs, online users, student/teacher view, help */
+#header3 {
+ position: relative; /* to avoid the IE peekabo bug*/
+ font-size: 12px;
+ font-weight: normal;
+ padding: 4px;
+ background-color: #90AFDD;
+ color: #fff;
+ border-bottom: 1px solid white;
+}
+#header3 a {
+ color: #ffffff;
+ text-decoration: none;
+ font-weight:normal;
+}
+#header3 a:hover {
+ text-decoration: underline;
+}
+/* Header3Right: online users, student/teacher view, help */
+#Header3Right ul {
+ position: relative; /* to avoid the IE peekabo bug*/
+ float: right;
+ width: 50%;
+ margin: 0;
+ padding: 0;
+ list-style-type: none;
+ text-align: right;
+}
+#Header3Right ul li {
+ display: inline;
+}
+#Header3Right ul li a {
+ padding: 4px 6px 4px 4px;
+ color:#fff;
+}
+/* Header 4: not used */
+#header4 {
+ background-color: #fff;
+ color: #009;
+ padding: 4px;
+ margin-bottom: 2px;
+}
+#header4 a {
+ color: #4171b5;
+}
+#header4 a:hover {
+ text-decoration: none;
+ color: #f00;
+}
+/* The tool shortcuts */
+#toolshortcuts {
+ text-align: right;
+}
+/*****************************************************
+ * FOOTER STYLES *
+ *****************************************************/
+#footer {
+ padding: 8px;
+ border-top: 1px solid #4171B5;
+ background-color: #E5EDF9;
+ font-size: 12px;
+}
+#footer .copyright {
+ float: right;
+}
+/*****************************************************
+ * MAIN STYLES *
+ *****************************************************/
+#main {
+ position: relative; /* to avoid the IE peekabo bug*/
+ margin: 0px auto;
+ margin-top: 10px;
+ width: 98%;
+ padding: 0px 10px 10px 10px;
+ background-color: #fff;
+ min-height: 320px;
+}
+/* for content section in main index.php file */
+.maincontent {
+ float: left;
+ width: 78%;
+ padding: 4px;
+ background-color: #fff;
+}
+/* "menu" classes for menu/navigation section in main index.php */
+.menu {
+ float: right;
+ width: 20%;
+ padding: 0 0 6px 0;
+ background-color: #E5EDF9;
+ border: 1px solid #4171B5;
+}
+.menucaption {
+ font-size: 12px;
+ font-weight: bold;
+ padding-left: 12px;
+}
+.menusection {
+ width: auto;
+ margin: 24px 6px 0 6px;
+ padding-left: 10px;
+ border: 1px solid #4171B5;
+}
+.menusectioncaption {
+ position: relative;
+ top: -9px;
+ background-color: #E5EDF9;
+ font-size: 12px;
+ padding: 0 8px 0 4px;
+}
+.menulist {
+ list-style: none;
+ margin: 0 0 12px 0;
+ padding: 0;
+}
+#lang_form {
+ text-align: left;
+ font-size: 12px;
+ margin: 2px 0 10px 0;
+ padding: 2px;
+}
+#lang_form input, #lang_form select {
+ font-size: 12px;
+}
+#loginform label {
+ font-size: 12px;
+ margin: 4px 6px;
+}
+#loginform input {
+ display: block;
+ font-size: 13px;
+ margin: 4px 6px;
+}
+#login_fail {
+ margin: 0 6px 6px 6px;
+ padding: 4px;
+ border: 1px solid #f00;
+ background-color: #fff;
+ font-size: 12px;
+ color: #f00;
+}
+/*** layout divs for course and tool pages (being tested in some pages) ****/
+#contentfloatholder {/* also makes the right "sliding" tab */
+ /*background: url(../pics/sidebar-r.gif) repeat-y 100% 0;
+background: url(../pics/bg_fountain.jpg) no-repeat 100% 0; */
+float: left;
+ width: 100%;
+ position: relative;
+}
+#contentfloatholder:after {
+ /* this is for NN6 to clear floats */
+content: ".";
+ display: block;
+ height: 0px;
+ clear: both;
+ visibility: hidden;
+}
+#centerwrap {
+ float: left;
+ width: 100%;
+ margin-right: -95%;/* this needs to be less than 100% for Moz/Mac which thinks
+ it's empty otherwise. The difference is made up by putting a
+ negative left margin on the left float:
+ Note IE/Mac doesn't like this method ~ it wants the 100% so it can
+ be fed in using IE only CSS below becasue IE/Win also works with the 100% method.
+ */
+}
+#center {
+ margin: 0 0 0 180px;
+ padding: 10px 0 40px 0;
+ min-height: 300px;
+}
+#left {
+ float: left;
+ width: 180px;
+ padding: 20px 0 0 0;
+ margin-left: -5%; /* the difference to make the left colum appear flush left */
+}
+/* --- left navigation box menu as a definition list --- */
+#leftnavbox {
+ margin: 0;
+ padding: 0;
+ float:left;
+}
+#leftnavbox dl {
+ width: 160px;
+ margin: 12px auto 4px auto;
+ padding: 0 0 10px 0;
+ background: transparent;
+ font-size: 12px;
+ text-align: center;
+}
+#leftnavbox dt {
+ margin: 0;
+ padding: 1px 2px;
+ font-weight: bold;
+ font-size: 12px;
+ text-align: center;
+ color: #000;
+ border-bottom: 1px solid #fff;
+ background: transparent;
+}
+#leftnavbox dd {
+ margin: 0;
+ padding: 0;
+ color: #009;
+ text-align: left;
+ border-bottom:1px solid #fff;
+ background: #ccf;
+}
+#leftnavlist a, #leftnavlist a:link {
+ display: block;
+ color: #fff;
+ text-decoration: none;
+ padding: 2px 5px 2px 10px;
+ background: #4171B5;
+ width:140px;
+ border: 1px solid #009;
+}
+#leftnavlist a:visited {
+ color:#eee;
+ text-decoration: none;
+ display: block;
+ padding: 2px 5px 2px 10px;
+ background: #4171B5;
+ color: #eee;
+ width:140px;
+}
+#leftnavlist a:hover {
+ background: #fff;
+ color:#4171B5;
+ display: block;
+}
+/* --- end of left side definition list menu section --- */
+
+
+
+/* various sections in course-home.php file */
+#toolremove {
+ width: 40%;
+ color: #f00;
+ font-weight: bold;
+ margin: 10px auto;
+ padding: 10px;
+ border: 2px solid #f00;
+}
+#courseintro {
+ clear: both;
+ width: 80%;
+ margin: 10px auto;
+ padding: 10px;
+ border-bottom: 1px solid #4171B5;
+}
+#courseintro_icons {
+ clear: both;
+ width: 80%;
+ margin: 10px auto;
+}
+.everybodyview {
+ position: relative; /* to avoid the IE peekabo bug ?*/
+ width: 80%;
+ margin: 10px auto;
+ padding: 10px;
+}
+.courseadminview, .platformadminview {
+ position: relative;
+ width: 80%;
+ margin: 25px auto 10px;
+ padding: 10px;
+ border: 1px solid #4171B5;
+}
+.viewcaption {
+ position: relative;
+ top: -20px;
+ font-size: 12px;
+ font-weight: bold;
+ color: #4171B5;
+ background-color: #fff;
+ padding: 0 4px;
+}
+/***********************************/
+
+/* ===================================================
+ AGENDA STYLES
+===================================================*/
+
+/* ---------------------------------------------------
+ check if these are still used or not
+-----------------------------------------------------*/
+#agenda {
+ width: 100%;
+ margin: 0 auto;
+ border: 1px solid #4171B5;
+ border-collapse: collapse;
+}
+.agenda_month_divider {
+ background-color: #4171B5;
+ font-weight: bold;
+ font-size: 12px;
+ color: #fff;
+ text-align: center;
+}
+#agenda #title a {
+ color: #fff;
+}
+#agenda .agendaitem {
+ font-size: 12px;
+}
+#smallcalendar #title {
+ background-color: #4171B5;
+ font-weight: bold;
+ padding: 2px;
+ color: #fff;
+ text-align: center;
+ font-size: 11px;
+}
+#smallcalendar #title a {
+ color: #fff;
+}
+#agenda_select {
+ list-style: none;
+ border: 0px solid green;
+ margin: 30px 0 0 0;
+ padding: 0 0 0 10px;
+}
+/* ---------------------------------------------------
+ styles for the agenda (day, week, month view)
+-----------------------------------------------------*/
+#agenda_list {
+ width: 100%;
+ margin: 0 auto;
+ border: 1px solid #fff;
+ border-collapse: collapse;
+}
+/*The caption of the calendar (displays the month and the << and >> links*/
+#agenda_list #title {
+ background-color: #4171B5;
+ font-weight: bold;
+ font-size: 12px;
+ color: #fff;
+ text-align: left;
+ padding: 2px 10px;
+ text-align: center;
+ border: 1px solid #264269;
+}
+#agenda_list #title a:link, #agenda_list #title a:visited {
+ background-color: #4171B5;
+ font-weight: bold;
+ font-size: 12px;
+ color: #fff;
+ text-align: left;
+ padding: 2px 10px;
+ text-align: center;
+}
+#agenda_list #title a:hover {
+ background-color: #4171B5;
+ font-weight: bold;
+ font-size: 12px;
+ color: #ff0000;
+ text-align: left;
+ padding: 2px 10px;
+ text-align: center;
+}
+/* The cells with the name of the days of the weeks (mon->sun)*/
+#agenda_list .weekdays {
+ background-color: #D3DFF1;
+ text-align: center;
+ font-weight: bold;
+ border: 1px solid #264269;
+ border-collapse: collapse;
+}
+/* The cells for the days (1->31) */
+#agenda_list .days_week {
+ height: 40px;
+ width: 12%;
+ text-align: left;
+ vertical-align: top;
+ border: 1px solid #264269;
+ border-collapse: collapse;
+ background-color: #f5f5f5;
+}
+#agenda_list .days_weekend {
+ height: 40px;
+ width: 12%;
+ text-align: left;
+ vertical-align: top;
+ border: 1px solid #264269;
+ border-collapse: collapse;
+ background-color: #e6e6e6;
+}
+#agenda_list .days_today {
+ height: 40px;
+ width: 12%;
+ text-align: left;
+ vertical-align: top;
+ border: 1px solid #264269;
+ border-collapse: collapse;
+ background-color: #FFCA8D;
+ color: #CC3300;
+ font-weight: bold;
+}
+/* text in the cells: display of agenda items (visible)*/
+#agenda_list .data {
+ background-color: #eee;
+ text-align: left;
+ padding: 2px 10px;
+ font-weight: bold;
+ border: 0px solid #4171B5;
+ border-collapse: collapse;
+}
+#agenda_list .datanotbold {
+ background-color: #eee;
+ text-align: left;
+ padding: 2px 10px;
+ font-weight: normal;
+ border: 0px solid #4171B5;
+ border-collapse: collapse;
+}
+#agenda_list .text {
+ background-color: #fff;
+ text-align: left;
+ padding: 2px 10px;
+ font-weight: normal;
+ border: 0px solid #4171B5;
+ border-collapse: collapse;
+}
+/*text in the cells: display of agenda items (invisible)*/
+#agenda_list .data_hidden {
+ background-color: #eee;
+ text-align: left;
+ padding: 2px 10px;
+ font-weight: bold;
+ border: 0px solid #4171B5;
+ border-collapse: collapse;
+ color: #999999;
+}
+#agenda_list .datanotbold_hidden {
+ background-color: #eee;
+ text-align: left;
+ padding: 2px 10px;
+ font-weight: normal;
+ border: 0px solid #4171B5;
+ border-collapse: collapse;
+ color: #999999;
+}
+#agenda_list .text_hidden {
+ background-color: #fff;
+ text-align: left;
+ padding: 2px 10px;
+ font-weight: normal;
+ border: 0px solid #4171B5;
+ border-collapse: collapse;
+ color: #999999;
+}
+/*text in the cells: display of agenda items (highlighted)*/
+#agenda_list .datanow {
+ background-color: #FFCC00;
+ text-align: left;
+ padding: 2px 10px;
+ font-weight: bold;
+ border: 0px solid #4171B5;
+ border-collapse: collapse;
+}
+#agenda_list .datanotboldnow {
+ background-color: #FFCC00;
+ text-align: left;
+ padding: 2px 10px;
+ font-weight: normal;
+ border: 0px solid #4171B5;
+ border-collapse: collapse;
+}
+#agenda_list .textnow {
+ background-color: #fff;
+ text-align: left;
+ padding: 2px 10px;
+ font-weight: normal;
+ border: 0px solid #4171B5;
+ border-collapse: collapse;
+}
+/* ---------------------------------------------------
+ styles for the mini agenda
+-----------------------------------------------------*/
+#smallcalendar {
+ width: 100%;
+ margin: 0 auto;
+ border: 1px solid #fff;
+ border-collapse: collapse;
+}
+#smallcalendar .weekdays {
+ background-color: #D3DFF1;
+ text-align: center;
+ font-size: 11px;
+ font-weight: bold;
+ border: 1px solid #fff;
+ border-collapse: collapse;
+}
+#smallcalendar .days_week {
+ background-color: #f5f5f5;
+ text-align: center;
+ font-size: 11px;
+ border-collapse: collapse;
+}
+#smallcalendar .days_weekend {
+ background-color: #e6e6e6;
+ text-align: center;
+ font-size: 11px;
+ border: 1px solid #fff;
+ border-collapse: collapse;
+}
+#smallcalendar .days_today {
+ width: 12%;
+ text-align: center;
+ font-size: 11px;
+ border: 1px solid #FA8500;
+ border-collapse: collapse;
+ background-color: #FFCA8D;
+}
+/* ---------------------------------------------------
+ styles for the personal agenda
+-----------------------------------------------------*/
+.personal_agenda {
+ color: #008000;
+}
+.personal_agenda a:link, .personal_agenda a:visited {
+ color: #008000;
+}
+a.personal_agenda:link, a.personal_agenda:visited {
+ color: #008000;
+}
+.personal_agenda a:hover, .personal_agenda a:hover {
+ color: #666666;
+}
+a.personal_agenda:hover, a.personal_agenda:hover {
+ color: #666666;
+}
+/* normal and erro message-box */
+.normal-message, .error-message {
+ position: relative;
+ margin: 10px auto;
+ margin-left: -250px;
+ width: 500px;
+ left: 50%;
+ right: 50%;
+ border-width: 1px;
+ border-style: solid;
+ padding: 5px;
+}
+.normal-message {
+ border: 1px solid #FF8001;
+ color: #000;
+ background-color: #FDC77E;
+}
+.error-message {
+ border: 1px solid #3F70AC;
+ color: #000;
+ background-color: #FDC273;
+}
+#message {
+ margin: 0 auto;
+ text-align: center;
+}
+#message select {
+ margin: 10px 0;
+ width: 220px;
+}
+#message textarea {
+ margin: 10px 0;
+}
+#message td {
+ padding: 4px;
+}
+/* styles from the document.php file */
+.comment {
+ margin-left: 30px;
+}
+.invisible {
+ color: #999;
+}
+.invisible a:link, .invisible a:visited {
+ color: #999;
+}
+a.invisible:link, a.invisible:visited {
+ color: #999;
+}
+/* styles from the upload.php file */
+dl.upload_option {
+ margin: 1em 0;
+ padding: 0;
+}
+.upload_option dt {
+ font-weight:bold;
+ margin:0;
+}
+.upload_option dd {
+ margin:0;
+}
+/* styles from dropbox.php file */
+.dropbox_detail {
+ font-size: small
+}
+.dropbox_date {
+ font-style: italic
+}
+.dropbox_person {
+ font-weight: bold
+}
+.dropbox_listTitle {
+ color: #000000;
+}
+.dropbox_feedback {
+ font-size: x-small;
+ height: 50px;
+ width: 200px;
+ overflow: auto
+}
+.dropbox_feedbacks {
+ height: 250px;
+ width: 100%;
+ overflow: auto
+}
+/* styles for chat / conference tools */
+#chat_entermessage {
+ background-color: #D6E5FA;
+ border-top: 1px solid #4171B5;
+ padding: 5px;
+ margin: 0;
+}
+/* styles for general formatting */
+.clear {
+ clear: both;
+ line-height: 0;
+ height: 0;
+}
+p, blockquote, ol, ul {
+ font-size: 12px;
+}
+h1 {
+ font-size: 21px;
+}
+h2 {
+ font-size: 18px;
+}
+h3 {
+ font-size: 15px;
+ margin-top:0px;
+ padding-top:0px;
+}
+h4 {
+ font-size: 12px;
+}
+h5, h6 {
+ font-family: verdana, arial, helvetica, sans-serif;
+}
+/* the following for regular elements */
+a:link {
+ text-decoration: none;
+ font-weight : bold;
+ color : #4171b5;
+}
+a:visited {
+ text-decoration: none;
+ font-weight : bold;
+ color : #4171b5;
+}
+a:hover {
+ text-decoration: none;
+ color: red;
+ font-weight: bold
+}
+a:active {
+ text-decoration: none;
+ font-weight : bold;
+ color : #f00;
+}
+input.link_alike {
+ background-color: #FFFFFF;
+ border-width: 0px;
+ color: #4171b5;
+ font-weight: bold;
+ text-align: left;
+ padding: 0px;
+ margin: 0px;
+}
+input.link_alike:hover {
+ background-color: #FFFFFF;
+ border-width: 0px;
+ color: #FF0000;
+ font-weight: bold;
+ text-align: left;
+ padding: 0px;
+ margin: 0px;
+}
+/* the following for the greyed out elements */
+a.nobold:link, a.nobold:visited, a.nobold:active {
+ font-weight: normal;
+ color: #999;
+ margin: 0 0 0 25px;
+}
+a.nobold:hover {
+ font-weight: normal;
+ color: #999;
+ text-decoration: underline;
+ margin: 0 0 0 25px;
+}
+.note {
+ margin: 6px;
+ font-size: 12px;
+ line-height: 14px;
+ font-family: verdana, arial, helvetica, sans-serif;
+ background-color: #FFF089;
+ color: #4171B5;
+ border: 1px solid #4171B5;
+ padding: 4px;
+}
+.alternativeBgLight {
+ background-color: #f5f5f5;
+ border: 1px solid #4171B5;
+ border-collapse: collapse;
+}
+.alternativeBgDark {
+ background-color: #ccf;
+ border: 1px solid #4171B5;
+ border-collapse: collapse;
+}
+.myagendatoday {
+ background-color: #FFCA8D;
+ border-collapse: collapse;
+ font-family: verdana, arial, helvetica, sans-serif;
+ color: #CC3300;
+ font-weight: bold;
+}
+/* Form elements - some general styling*/
+select, textarea {
+ color : #000;
+ border: 1px solid #000;
+}
+input.checkbox {
+ border-width: 0;
+}
+input.mainoption {
+ font-weight : bold;
+} /* Main submit button */
+input.liteoption {
+ font-weight : normal;
+} /* None-bold submit button */
+select, input[type=checkbox], input[type=radio], input[type=button], input[type=submit] {
+ cursor: pointer;
+ font-size: 12px;
+}
+input[text] {
+ font-size: 12px;
+}
+/************************************************************
+ styles below here are not necessarily used in the current
+ release and the CVS files, they are from earlier versions,
+ and have been left untouched for anyone needing them in
+ their own platform ...
+*************************************************************/
+.topBanner a:link, .topBanner a:active, .topBanner a:visited {
+ text-decoration:none;
+ color:white;
+}
+.topBanner table {
+ text-decoration:none;
+}
+.topBanner a:hover {
+ text-decoration:underline;
+}
+.topBanner td {
+ border-top: solid White 1px;
+}
+.alternativeBgLight {
+ background-color: #f5f5f5;
+}
+.alternativeBgDark {
+ background-color: #e6e6e6
+}
+.forms {
+ letter-spacing: normal;
+ text-align: justify;
+ text-indent: 3pt;
+ word-spacing: normal;
+ padding: 2px 5px;
+}
+.formsTips {
+ text-align: justify;
+ text-indent: 15pt;
+ word-spacing: normal;
+}
+/*
+input.forms { letter-spacing: normal; text-align: justify; text-indent: 3pt; word-spacing: normal;
+padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;}
+*/
+.warn {
+ border: thin double Silver;
+ margin-left: 15px;
+ margin-right: 15px;
+ font-family: serif;
+ color: Red;
+ padding-left: 25px;
+}
+.small {
+ font-family: Verdana, Arial, Helvetica, sans-serif;
+ font-size: 11px
+}
+.xsmall {
+ font-family: Verdana, Arial, Helvetica, sans-serif;
+ font-size: 11px
+}
+.xxsmall {
+ font-family: Verdana, Arial, Helvetica, sans-serif;
+ font-size: 9px
+}
+/*****************************************************
+ * DATA TABLE STYLES *
+ *****************************************************/
+.cell_header {
+ background-color: #EEEEFF;
+ font-weight:bold;
+ text-align:left;
+ padding-left:5px;
+} /* header cell in data table in tools */
+.data_table {
+ border-collapse: collapse;
+ width: 100%;
+ padding: 5px;
+}
+.data_table th {
+ padding-right: 20px;
+ border: 1px solid gray;
+ background-color: #E5EDF9;
+}
+.data_table tr.row_odd {
+ background-color: #fafafa;
+}
+.data_table tr.row_odd:hover, .data_table tr.row_even:hover {
+ background-color: #f0f0f0;
+}
+.data_table tr.row_even {
+ background-color: #fff;
+}
+.data_table td {
+ padding: 5px;
+ vertical-align: top;
+ border-bottom: 1px solid #b0b0b0;
+ border-right: 1px dotted #e1e1e1;
+ border-left: 1px dotted #e1e1e1;
+}
+/* admin page tool list definitions */
+.tool_list dt {
+ font-weight: bold;
+}
+.tool_list dd {
+ margin: 0;
+ padding: 4px 0 0 10px;
+}
+/* divs for category list / platform news on home page */
+.home_cats {
+ width: 45%;
+ float: left;
+ margin: 0;
+ padding: 0px;
+ padding-top: 8px;
+ background: #fff;
+}
+.home_news {
+ width: 45%;
+ float: right;
+ margin: 0;
+ padding: 0px;
+ padding-top: 8px;
+ background: #fff;
+}
+label.left {
+ float: left;
+ width: 15em;
+ margin: 0 0 0.5em 0;
+}
+form br {
+ clear: both;
+}
+/* Fix for alignment problem in IE-Win browsers */
+/* Hide from IE5-mac. Only IE-win sees this. \*/
+* html .label {
+ margin-right: 10px;
+}
+* html .data {
+ height: 1%;
+ margin-left: 0;
+}
+/* End hide from IE5/mac */
+
+.radio, .checkbox {
+ margin: 0;
+ padding: 0;
+ border: none;
+ background-color: transparent;
+}
+.required {
+ color: #f00;
+ font-weight: bold;
+}
+/* Admin section */
+div.admin_section {
+ width: 40%;
+ float: left;
+ padding: 5px;
+ margin: 10px 20px;
+}
+div.admin_section h4 {
+ margin: 0;
+ border-bottom: 1px solid gray;
+ width: 100%;
+}
+.user_course_category {
+ background-color: #efefef;
+ border: 1px solid #666;
+ font-weight: bold;
+ color: #666;
+ list-style-type: none;
+ margin: 5px;
+ padding: 5px;
+}
+/* Styles for the Dokeos Config Settings of the platform admin section*/
+.sectiontitle {
+ background-color: #EFEFEF;
+ border: 1px solid #cccccc;
+ font-weight: bold;
+ color: #666666;
+ list-style-type: none;
+ margin: 5px;
+ padding: 5px;
+ font-size: 11px;
+}
+.sectioncomment {
+ color: #000000;
+ margin: 5px;
+ padding: 5px;
+ font-size: 11px;
+}
+.sectionvalue {
+ list-style-type: none;
+ margin: 5px;
+ padding: 5px;
+}
+/* New Announcements Tool */
+.announcements_datum {
+ font-size: 12px;
+ font-weight: italic;
+ color: #666666;
+}
+/* System announcements on homepage */
+div.system_announcements {
+}
+div.system_announcements h3 {
+}
+div.system_announcements ul {
+ list-style-type: none;
+}
+div.system_announcement {
+ margin: 5px;
+}
+div.system_announcement_title {
+}
+div.system_announcement_content {
+ margin-left: 20px;
+ border-left: 1px solid gray;
+ padding-left: 5px;
+}
diff --git a/main/css/chamilo_red_utp/images/2leftarrow.gif b/main/css/chamilo_red_utp/images/2leftarrow.gif
new file mode 100644
index 0000000000..3c561583fb
Binary files /dev/null and b/main/css/chamilo_red_utp/images/2leftarrow.gif differ
diff --git a/main/css/chamilo_red_utp/images/2rightarrow.gif b/main/css/chamilo_red_utp/images/2rightarrow.gif
new file mode 100644
index 0000000000..e2b04d9624
Binary files /dev/null and b/main/css/chamilo_red_utp/images/2rightarrow.gif differ
diff --git a/main/css/chamilo_red_utp/images/background_message.png b/main/css/chamilo_red_utp/images/background_message.png
new file mode 100644
index 0000000000..db9075ff26
Binary files /dev/null and b/main/css/chamilo_red_utp/images/background_message.png differ
diff --git a/main/css/chamilo_red_utp/images/bar_1.gif b/main/css/chamilo_red_utp/images/bar_1.gif
new file mode 100644
index 0000000000..938ae0c354
Binary files /dev/null and b/main/css/chamilo_red_utp/images/bar_1.gif differ
diff --git a/main/css/chamilo_red_utp/images/bar_1m.gif b/main/css/chamilo_red_utp/images/bar_1m.gif
new file mode 100644
index 0000000000..24f8b81fd4
Binary files /dev/null and b/main/css/chamilo_red_utp/images/bar_1m.gif differ
diff --git a/main/css/chamilo_red_utp/images/bar_1r.gif b/main/css/chamilo_red_utp/images/bar_1r.gif
new file mode 100644
index 0000000000..3bfc397e10
Binary files /dev/null and b/main/css/chamilo_red_utp/images/bar_1r.gif differ
diff --git a/main/css/chamilo_red_utp/images/bar_1u.gif b/main/css/chamilo_red_utp/images/bar_1u.gif
new file mode 100644
index 0000000000..24f8b81fd4
Binary files /dev/null and b/main/css/chamilo_red_utp/images/bar_1u.gif differ
diff --git a/main/css/chamilo_red_utp/images/bg-button.gif b/main/css/chamilo_red_utp/images/bg-button.gif
new file mode 100644
index 0000000000..3d91a4d607
Binary files /dev/null and b/main/css/chamilo_red_utp/images/bg-button.gif differ
diff --git a/main/css/chamilo_red_utp/images/bg-footer.gif b/main/css/chamilo_red_utp/images/bg-footer.gif
new file mode 100644
index 0000000000..5d559575f6
Binary files /dev/null and b/main/css/chamilo_red_utp/images/bg-footer.gif differ
diff --git a/main/css/chamilo_red_utp/images/bg-header1.gif b/main/css/chamilo_red_utp/images/bg-header1.gif
new file mode 100644
index 0000000000..7fb77ce1ed
Binary files /dev/null and b/main/css/chamilo_red_utp/images/bg-header1.gif differ
diff --git a/main/css/chamilo_red_utp/images/bg-header4.png b/main/css/chamilo_red_utp/images/bg-header4.png
new file mode 100644
index 0000000000..10f15a4a0a
Binary files /dev/null and b/main/css/chamilo_red_utp/images/bg-header4.png differ
diff --git a/main/css/chamilo_red_utp/images/bg-main.png b/main/css/chamilo_red_utp/images/bg-main.png
new file mode 100644
index 0000000000..b03a3f73ce
Binary files /dev/null and b/main/css/chamilo_red_utp/images/bg-main.png differ
diff --git a/main/css/chamilo_red_utp/images/bg-menu.png b/main/css/chamilo_red_utp/images/bg-menu.png
new file mode 100644
index 0000000000..ae0f161c91
Binary files /dev/null and b/main/css/chamilo_red_utp/images/bg-menu.png differ
diff --git a/main/css/chamilo_red_utp/images/bgmenusup.png b/main/css/chamilo_red_utp/images/bgmenusup.png
new file mode 100644
index 0000000000..237101c567
Binary files /dev/null and b/main/css/chamilo_red_utp/images/bgmenusup.png differ
diff --git a/main/css/chamilo_red_utp/images/bullet.gif b/main/css/chamilo_red_utp/images/bullet.gif
new file mode 100644
index 0000000000..4010966556
Binary files /dev/null and b/main/css/chamilo_red_utp/images/bullet.gif differ
diff --git a/main/css/chamilo_red_utp/images/button_accept.gif b/main/css/chamilo_red_utp/images/button_accept.gif
new file mode 100644
index 0000000000..b3618202a4
Binary files /dev/null and b/main/css/chamilo_red_utp/images/button_accept.gif differ
diff --git a/main/css/chamilo_red_utp/images/button_add.gif b/main/css/chamilo_red_utp/images/button_add.gif
new file mode 100644
index 0000000000..7e4c53733a
Binary files /dev/null and b/main/css/chamilo_red_utp/images/button_add.gif differ
diff --git a/main/css/chamilo_red_utp/images/button_back.gif b/main/css/chamilo_red_utp/images/button_back.gif
new file mode 100644
index 0000000000..7ff8ccb25d
Binary files /dev/null and b/main/css/chamilo_red_utp/images/button_back.gif differ
diff --git a/main/css/chamilo_red_utp/images/button_back.jpg b/main/css/chamilo_red_utp/images/button_back.jpg
new file mode 100644
index 0000000000..b2a8df3a8e
Binary files /dev/null and b/main/css/chamilo_red_utp/images/button_back.jpg differ
diff --git a/main/css/chamilo_red_utp/images/button_delete.gif b/main/css/chamilo_red_utp/images/button_delete.gif
new file mode 100644
index 0000000000..e07331a7c9
Binary files /dev/null and b/main/css/chamilo_red_utp/images/button_delete.gif differ
diff --git a/main/css/chamilo_red_utp/images/button_login.gif b/main/css/chamilo_red_utp/images/button_login.gif
new file mode 100644
index 0000000000..7788ea9fe1
Binary files /dev/null and b/main/css/chamilo_red_utp/images/button_login.gif differ
diff --git a/main/css/chamilo_red_utp/images/button_minus.gif b/main/css/chamilo_red_utp/images/button_minus.gif
new file mode 100644
index 0000000000..350b7ecc1a
Binary files /dev/null and b/main/css/chamilo_red_utp/images/button_minus.gif differ
diff --git a/main/css/chamilo_red_utp/images/button_next.gif b/main/css/chamilo_red_utp/images/button_next.gif
new file mode 100644
index 0000000000..e816758985
Binary files /dev/null and b/main/css/chamilo_red_utp/images/button_next.gif differ
diff --git a/main/css/chamilo_red_utp/images/button_plus.gif b/main/css/chamilo_red_utp/images/button_plus.gif
new file mode 100644
index 0000000000..6332fefea4
Binary files /dev/null and b/main/css/chamilo_red_utp/images/button_plus.gif differ
diff --git a/main/css/chamilo_red_utp/images/button_refresh.gif b/main/css/chamilo_red_utp/images/button_refresh.gif
new file mode 100644
index 0000000000..8268958a19
Binary files /dev/null and b/main/css/chamilo_red_utp/images/button_refresh.gif differ
diff --git a/main/css/chamilo_red_utp/images/button_search.gif b/main/css/chamilo_red_utp/images/button_search.gif
new file mode 100644
index 0000000000..d9e4ccf177
Binary files /dev/null and b/main/css/chamilo_red_utp/images/button_search.gif differ
diff --git a/main/css/chamilo_red_utp/images/button_upload.gif b/main/css/chamilo_red_utp/images/button_upload.gif
new file mode 100644
index 0000000000..3d91ac4404
Binary files /dev/null and b/main/css/chamilo_red_utp/images/button_upload.gif differ
diff --git a/main/css/chamilo_red_utp/images/dataTable/Sorting icons.psd b/main/css/chamilo_red_utp/images/dataTable/Sorting icons.psd
new file mode 100644
index 0000000000..53b2e06850
Binary files /dev/null and b/main/css/chamilo_red_utp/images/dataTable/Sorting icons.psd differ
diff --git a/main/css/chamilo_red_utp/images/dataTable/back_disabled.jpg b/main/css/chamilo_red_utp/images/dataTable/back_disabled.jpg
new file mode 100644
index 0000000000..1e73a546e3
Binary files /dev/null and b/main/css/chamilo_red_utp/images/dataTable/back_disabled.jpg differ
diff --git a/main/css/chamilo_red_utp/images/dataTable/back_enabled.jpg b/main/css/chamilo_red_utp/images/dataTable/back_enabled.jpg
new file mode 100644
index 0000000000..a6d764c79c
Binary files /dev/null and b/main/css/chamilo_red_utp/images/dataTable/back_enabled.jpg differ
diff --git a/main/css/chamilo_red_utp/images/dataTable/favicon.ico b/main/css/chamilo_red_utp/images/dataTable/favicon.ico
new file mode 100644
index 0000000000..6eeaa2a0d3
Binary files /dev/null and b/main/css/chamilo_red_utp/images/dataTable/favicon.ico differ
diff --git a/main/css/chamilo_red_utp/images/dataTable/forward_disabled.jpg b/main/css/chamilo_red_utp/images/dataTable/forward_disabled.jpg
new file mode 100644
index 0000000000..28a9dc53fa
Binary files /dev/null and b/main/css/chamilo_red_utp/images/dataTable/forward_disabled.jpg differ
diff --git a/main/css/chamilo_red_utp/images/dataTable/forward_enabled.jpg b/main/css/chamilo_red_utp/images/dataTable/forward_enabled.jpg
new file mode 100644
index 0000000000..598c075f13
Binary files /dev/null and b/main/css/chamilo_red_utp/images/dataTable/forward_enabled.jpg differ
diff --git a/main/css/chamilo_red_utp/images/dataTable/sort_asc.png b/main/css/chamilo_red_utp/images/dataTable/sort_asc.png
new file mode 100644
index 0000000000..a56d0e2190
Binary files /dev/null and b/main/css/chamilo_red_utp/images/dataTable/sort_asc.png differ
diff --git a/main/css/chamilo_red_utp/images/dataTable/sort_asc_disabled.png b/main/css/chamilo_red_utp/images/dataTable/sort_asc_disabled.png
new file mode 100644
index 0000000000..b7e621ef1c
Binary files /dev/null and b/main/css/chamilo_red_utp/images/dataTable/sort_asc_disabled.png differ
diff --git a/main/css/chamilo_red_utp/images/dataTable/sort_both.png b/main/css/chamilo_red_utp/images/dataTable/sort_both.png
new file mode 100644
index 0000000000..839ac4bb5b
Binary files /dev/null and b/main/css/chamilo_red_utp/images/dataTable/sort_both.png differ
diff --git a/main/css/chamilo_red_utp/images/dataTable/sort_desc.png b/main/css/chamilo_red_utp/images/dataTable/sort_desc.png
new file mode 100644
index 0000000000..90b295159d
Binary files /dev/null and b/main/css/chamilo_red_utp/images/dataTable/sort_desc.png differ
diff --git a/main/css/chamilo_red_utp/images/dataTable/sort_desc_disabled.png b/main/css/chamilo_red_utp/images/dataTable/sort_desc_disabled.png
new file mode 100644
index 0000000000..2409653dc9
Binary files /dev/null and b/main/css/chamilo_red_utp/images/dataTable/sort_desc_disabled.png differ
diff --git a/main/css/chamilo_red_utp/images/fondoFooter.jpg b/main/css/chamilo_red_utp/images/fondoFooter.jpg
new file mode 100644
index 0000000000..e797544a19
Binary files /dev/null and b/main/css/chamilo_red_utp/images/fondoFooter.jpg differ
diff --git a/main/css/chamilo_red_utp/images/fondoHeader2.jpg b/main/css/chamilo_red_utp/images/fondoHeader2.jpg
new file mode 100644
index 0000000000..49a5abc800
Binary files /dev/null and b/main/css/chamilo_red_utp/images/fondoHeader2.jpg differ
diff --git a/main/css/chamilo_red_utp/images/fondoHeader3.jpg b/main/css/chamilo_red_utp/images/fondoHeader3.jpg
new file mode 100644
index 0000000000..8786537177
Binary files /dev/null and b/main/css/chamilo_red_utp/images/fondoHeader3.jpg differ
diff --git a/main/css/chamilo_red_utp/images/fondoNav.jpg b/main/css/chamilo_red_utp/images/fondoNav.jpg
new file mode 100644
index 0000000000..82f302d2bc
Binary files /dev/null and b/main/css/chamilo_red_utp/images/fondoNav.jpg differ
diff --git a/main/css/chamilo_red_utp/images/footer.jpg b/main/css/chamilo_red_utp/images/footer.jpg
new file mode 100644
index 0000000000..96b9a29c62
Binary files /dev/null and b/main/css/chamilo_red_utp/images/footer.jpg differ
diff --git a/main/css/chamilo_red_utp/images/header-logo.png b/main/css/chamilo_red_utp/images/header-logo.png
new file mode 100644
index 0000000000..201545a805
Binary files /dev/null and b/main/css/chamilo_red_utp/images/header-logo.png differ
diff --git a/main/css/chamilo_red_utp/images/help2.png b/main/css/chamilo_red_utp/images/help2.png
new file mode 100644
index 0000000000..c3c07e15de
Binary files /dev/null and b/main/css/chamilo_red_utp/images/help2.png differ
diff --git a/main/css/chamilo_red_utp/images/loading.gif b/main/css/chamilo_red_utp/images/loading.gif
new file mode 100644
index 0000000000..82290f4833
Binary files /dev/null and b/main/css/chamilo_red_utp/images/loading.gif differ
diff --git a/main/css/chamilo_red_utp/images/logoMouse.jpg b/main/css/chamilo_red_utp/images/logoMouse.jpg
new file mode 100644
index 0000000000..2d006ad561
Binary files /dev/null and b/main/css/chamilo_red_utp/images/logoMouse.jpg differ
diff --git a/main/css/chamilo_red_utp/images/portal.png b/main/css/chamilo_red_utp/images/portal.png
new file mode 100644
index 0000000000..3afac5dc64
Binary files /dev/null and b/main/css/chamilo_red_utp/images/portal.png differ
diff --git a/main/css/chamilo_red_utp/images/refresh.png b/main/css/chamilo_red_utp/images/refresh.png
new file mode 100644
index 0000000000..3fd71d6e59
Binary files /dev/null and b/main/css/chamilo_red_utp/images/refresh.png differ
diff --git a/main/css/chamilo_red_utp/images/shadow.gif b/main/css/chamilo_red_utp/images/shadow.gif
new file mode 100644
index 0000000000..fc02f26719
Binary files /dev/null and b/main/css/chamilo_red_utp/images/shadow.gif differ
diff --git a/main/css/chamilo_red_utp/images/systemenouvelles.jpg b/main/css/chamilo_red_utp/images/systemenouvelles.jpg
new file mode 100644
index 0000000000..8580271092
Binary files /dev/null and b/main/css/chamilo_red_utp/images/systemenouvelles.jpg differ
diff --git a/main/css/chamilo_red_utp/images/tab.png b/main/css/chamilo_red_utp/images/tab.png
new file mode 100644
index 0000000000..5a4c86458b
Binary files /dev/null and b/main/css/chamilo_red_utp/images/tab.png differ
diff --git a/main/css/chamilo_red_utp/images/tab_center-active.gif b/main/css/chamilo_red_utp/images/tab_center-active.gif
new file mode 100644
index 0000000000..06a5809f6a
Binary files /dev/null and b/main/css/chamilo_red_utp/images/tab_center-active.gif differ
diff --git a/main/css/chamilo_red_utp/images/tab_center.gif b/main/css/chamilo_red_utp/images/tab_center.gif
new file mode 100644
index 0000000000..56edc05f30
Binary files /dev/null and b/main/css/chamilo_red_utp/images/tab_center.gif differ
diff --git a/main/css/chamilo_red_utp/images/tab_left-active.gif b/main/css/chamilo_red_utp/images/tab_left-active.gif
new file mode 100644
index 0000000000..bead70d120
Binary files /dev/null and b/main/css/chamilo_red_utp/images/tab_left-active.gif differ
diff --git a/main/css/chamilo_red_utp/images/tab_left-hover-active.gif b/main/css/chamilo_red_utp/images/tab_left-hover-active.gif
new file mode 100644
index 0000000000..6507dcb660
Binary files /dev/null and b/main/css/chamilo_red_utp/images/tab_left-hover-active.gif differ
diff --git a/main/css/chamilo_red_utp/images/tab_left-hover.gif b/main/css/chamilo_red_utp/images/tab_left-hover.gif
new file mode 100644
index 0000000000..8186616b6f
Binary files /dev/null and b/main/css/chamilo_red_utp/images/tab_left-hover.gif differ
diff --git a/main/css/chamilo_red_utp/images/tab_left.gif b/main/css/chamilo_red_utp/images/tab_left.gif
new file mode 100644
index 0000000000..c11aabb6fb
Binary files /dev/null and b/main/css/chamilo_red_utp/images/tab_left.gif differ
diff --git a/main/css/chamilo_red_utp/images/tab_right-active.gif b/main/css/chamilo_red_utp/images/tab_right-active.gif
new file mode 100644
index 0000000000..4b6354067c
Binary files /dev/null and b/main/css/chamilo_red_utp/images/tab_right-active.gif differ
diff --git a/main/css/chamilo_red_utp/images/tab_right-hover.gif b/main/css/chamilo_red_utp/images/tab_right-hover.gif
new file mode 100644
index 0000000000..2b2e579983
Binary files /dev/null and b/main/css/chamilo_red_utp/images/tab_right-hover.gif differ
diff --git a/main/css/chamilo_red_utp/images/tab_right.gif b/main/css/chamilo_red_utp/images/tab_right.gif
new file mode 100644
index 0000000000..bbf6872015
Binary files /dev/null and b/main/css/chamilo_red_utp/images/tab_right.gif differ
diff --git a/main/css/chamilo_red_utp/images/tab_right.jpg b/main/css/chamilo_red_utp/images/tab_right.jpg
new file mode 100644
index 0000000000..4b0f427d06
Binary files /dev/null and b/main/css/chamilo_red_utp/images/tab_right.jpg differ
diff --git a/main/css/chamilo_red_utp/images/tab_rigth.gif b/main/css/chamilo_red_utp/images/tab_rigth.gif
new file mode 100644
index 0000000000..4c8fad7eb6
Binary files /dev/null and b/main/css/chamilo_red_utp/images/tab_rigth.gif differ
diff --git a/main/css/chamilo_red_utp/learnpath.css b/main/css/chamilo_red_utp/learnpath.css
new file mode 100644
index 0000000000..057d2e8d36
--- /dev/null
+++ b/main/css/chamilo_red_utp/learnpath.css
@@ -0,0 +1,217 @@
+div.text {
+ margin-left : 6;
+ margin-right : 6;
+ margin-top : 5;
+ margin-bottom : 5;
+ text-align : justify;
+}
+span.messagesmall {
+ font-style : italic;
+ color : Red;
+}
+/* newscorm/learnpath */
+
+div.lp_actions {
+ background:#F8F8F8;
+ border-bottom:1px solid #999999;
+ padding:3px;
+}
+div.lp_actions img {
+ margin-right:5px;
+}
+div.lp_small_form {
+ background:#F8F8F8;
+ border:1px solid #999999;
+ padding:10px;
+}
+div.lp_small_form input {
+ font-size:10px;
+}
+div.lp_manipulate {
+ background:#F8F8F8;
+ border-bottom:1px dotted #999999;
+ margin-bottom:0px;
+ padding:3px 0 3px 10px;
+}
+div.lp_manipulate a {
+ padding-right:10px;
+}
+div.lp_message {
+ background:#FEC880;
+ border:1px solid #E28C15;
+ font-size:12px;
+ padding:10px;
+}
+div.lp_resource_header {
+ cursor: pointer;
+ background:#F0F0F0;
+ border:1px solid #999999;
+ font-weight:bold;
+ padding:10px;
+ width:350px;
+}
+div.lp_resource_header_end {
+ background:#F0F0F0;
+ border:1px solid #999999;
+ font-weight:bold;
+ padding:10px;
+ width:350px;
+}
+div.lp_resource_elements {
+ background:#FAFAFA;
+ border:1px solid #999999;
+ border-bottom:0;
+ display:none;
+ padding:5px 10px;
+ width:350px;
+}
+div.lp_resource_elements_end {
+ background:#FAFAFA;
+ border:1px solid #999999;
+ border-top: 0px;
+ display:none;
+ padding:5px 10px;
+ width:350px;
+}
+div.lp_resource_elements div {
+ padding:3px;
+}
+div.lp_tree {
+ height:100%;
+ padding:3px 10px 3px 0;
+ overflow-x : auto;
+ overflow-y : scroll;
+ width:190px;
+}
+hr {
+ background:#999999;
+ border:0;
+ color:#999999;
+ height:1px;
+ margin:10px auto;
+ width:75%;
+}
+option.bottom {
+ border-top:1px solid #999999;
+ margin-top:2px;
+ padding-top:2px;
+}
+option.top {
+ border-bottom:1px solid #999999;
+ margin-bottom:2px;
+ padding-bottom:2px;
+}
+p.lp_action {
+ margin:5px 0;
+}
+p.lp_text {
+ margin-top:0px;
+}
+p.lp_title {
+ font-weight:bold;
+ margin-top:5px;
+ padding-left:7px;
+}
+table.lp_build {
+ font-size:12px;
+ height:400px;
+ width:100%;
+}
+table.lp_build td {
+ vertical-align:top;
+}
+table.lp_build td.tree {
+ border-right:1px solid #999999;
+ width:205px;
+}
+table.lp_build td.workspace {
+ padding: 0px;
+ padding-left:5px;
+ width:auto;
+}
+table.lp_form {
+ font-size:12px;
+ margin:0 10px;
+ width:auto;
+}
+table.lp_form td {
+ height:25px;
+ padding:5px;
+ vertical-align:top;
+ width:auto;
+}
+table.lp_form td.label {
+ padding-top:7px;
+ text-align:right;
+}
+table.lp_form td.radio {
+ width:300px;
+}
+table.lp_form td.exercise {
+ width:50px;
+}
+table.lp_form th {
+ background:#F8F8F8;
+ border-bottom:1px solid #999999;
+ border-top:1px solid #999999;
+}
+table.lp_overview th.exercise {
+ width:50px;
+}
+table.lp_form input, table.lp_form select, table.lp_form textarea {
+ background:#F8F8F8;
+ border:1px solid #999999;
+ font-family:Arial, Verdana, Helvetica, sans-serif;
+ font-size:12px;
+ padding:1px 2px;
+ width:300px;
+}
+table.lp_form td.radio input, table.lp_form td.exercise input {
+ width:auto;
+}
+table.lp_form .small_form {
+ background:#FFFFFF;
+}
+table.lp_form select {
+ /*padding:0;*/
+}
+table.lp_form input.button {
+ width:75px;
+}
+table.lp_overview {
+ font-size:12px;
+ width:100%;
+}
+table.lp_overview td {
+ border-bottom:1px solid #999999;
+ border-top:1px solid #999999;
+ height:20px;
+ padding:3px;
+ vertical-align:middle;
+ width:auto;
+}
+table.lp_overview td.title {
+ width:200px;
+}
+table.lp_overview td.actions {
+ text-align:center;
+ width:100px;
+}
+table.lp_overview td.move {
+ text-align:center;
+ width:50px;
+}
+table.lp_overview th {
+ background:#FFFFFF;
+ padding-left:3px;
+ text-align:center;
+}
+table.lp_overview tr {
+ background:#F8F8F8;
+}
+table.lp_overview tr:hover {
+ background:#E5EDF9;
+}
+table.lp_overview img {
+ margin-left:3px;
+}
diff --git a/main/css/chamilo_red_utp/print.css b/main/css/chamilo_red_utp/print.css
new file mode 100644
index 0000000000..fc9059c4bd
--- /dev/null
+++ b/main/css/chamilo_red_utp/print.css
@@ -0,0 +1,889 @@
+/* Print Style Sheet for Dokeos (in progress ...)
+ first default style sheet
+ 2004-07-18 by Wolfgang Schneider
+ (info@ws-webservice.de / webmaster@bibelcenter.de)
+ updated on 2005-02-25 by Olivier Brouckaert
+ (oli.brouckaert@dokeos.com)
+ update on 2005-03-01 by Wolfgang Schneider
+ update on 2005-05-27 by Patrick Cool
+ update to print.css on 2005-01-05 by Jeroen Coupe
+ */
+
+body {
+ font-family: arial, verdana, helvetica, sans-serif;
+ font-size: 12px;
+ color: #000;
+ margin: 0;
+ padding: 0;
+ background-color: #fff;
+}
+img {
+ border: none;
+}
+#outerframe {
+ position: relative; /* do not remove, fixes a bug in IE */
+ border: 1px solid #fff;
+ background-color: #fff;
+}
+/* Hides from IE5-mac \*/
+* html #outerframe {
+ height: 1%;
+}
+/* End hide from IE5-mac */
+
+/*****************************************************
+ * HEADER STYLES *
+ *****************************************************/
+
+
+#my_courses {
+ background-color: #fff;
+ color: #009;
+}
+/*show the institution*/
+#header1 {
+ padding: 2px;
+ float: right;
+}
+#my_courses {
+ display: none;
+}
+#header2 {
+ display: none;
+}
+.subnav {
+ display: none;
+}
+/* show the way to the printed document (breadcrumbs)*/
+#header4 {
+ padding: 2px;
+ border-bottom: 1px solid #4171B5;
+}
+#header4 a {
+ color: #4171b5;
+}
+#toolshortcuts {
+ display:none;
+}
+/*****************************************************
+ * FOOTER STYLES *
+ *****************************************************/
+#footer {
+ padding: 8px;
+ border-top: 1px solid #4171B5;
+ background-color: #E5EDF9;
+ font-size: 12px;
+}
+#footer .copyright {
+ float: right;
+}
+/*****************************************************
+ * MAIN STYLES *
+ *****************************************************/
+#main {
+ position: relative; /* to avoid the IE peekabo bug*/
+ margin: 0px auto;
+ margin-top: 10px;
+ width: 98%;
+ padding: 0px 10px 10px 10px;
+ background-color: #fff;
+ min-height: 320px;
+}
+/* for content section in main index.php file */
+.maincontent {
+ float: left;
+ width: 78%;
+ padding: 4px;
+ background-color: #fff;
+}
+/* "menu" doesn't show in printed version*/
+.menu {
+ display: none;
+}
+#lang_form {
+ text-align: left;
+ font-size: 12px;
+ margin: 2px 0 10px 0;
+ padding: 2px;
+}
+#lang_form input, #lang_form select {
+ font-size: 12px;
+}
+#formLogin label {
+ font-size: 12px;
+ margin: 4px 6px;
+}
+#formLogin input {
+ font-size: 13px;
+ margin: 4px 6px;
+}
+#login_fail {
+ margin: 0 6px 6px 6px;
+ padding: 4px;
+ border: 1px solid #f00;
+ background-color: #fff;
+ font-size: 12px;
+ color: #f00;
+}
+/*** layout divs for course and tool pages (being tested in some pages) ****/
+#contentfloatholder {/* also makes the right "sliding" tab */
+ /*background: url(../pics/sidebar-r.gif) repeat-y 100% 0;
+background: url(../pics/bg_fountain.jpg) no-repeat 100% 0; */
+float: left;
+ width: 100%;
+ position: relative;
+}
+#contentfloatholder:after {
+ /* this is for NN6 to clear floats */
+content: ".";
+ display: block;
+ height: 0px;
+ clear: both;
+ visibility: hidden;
+}
+#centerwrap {
+ float: left;
+ width: 100%;
+ margin-right: -95%;/* this needs to be less than 100% for Moz/Mac which thinks
+ it's empty otherwise. The difference is made up by putting a
+ negative left margin on the left float:
+ Note IE/Mac doesn't like this method ~ it wants the 100% so it can
+ be fed in using IE only CSS below becasue IE/Win also works with the 100% method.
+ */
+}
+/*no navigation options need to be showed in the print version */
+#toolnav {
+ display:none;
+}
+/* Hide from IE5-mac. Only IE-win sees this. \*/
+* html #toolnav {
+ margin-right: 0px;
+}
+* html #center {
+ height: 1%;
+ margin-left: 0;
+}
+/* End hide from IE5/mac */
+
+
+/* various sections in course-home.php file */
+#toolremove {
+ width: 40%;
+ color: #f00;
+ font-weight: bold;
+ margin: 10px auto;
+ padding: 10px;
+ border: 2px solid #f00;
+}
+#courseintro {
+ clear: both;
+ width: 80%;
+ margin: 10px auto;
+ padding: 10px;
+ border-bottom: 1px solid #4171B5;
+}
+#courseintro_icons {
+ clear: both;
+ width: 80%;
+ margin: 10px auto;
+}
+.everybodyview {
+ position: relative; /* to avoid the IE peekabo bug ?*/
+ width: 80%;
+ margin: 10px auto;
+ padding: 10px;
+}
+.courseadminview, .platformadminview {
+ position: relative;
+ width: 80%;
+ margin: 25px auto 10px;
+ padding: 10px;
+ border: 1px solid #4171B5;
+}
+.viewcaption {
+ position: relative;
+ top: -20px;
+ font-size: 12px;
+ font-weight: bold;
+ color: #4171B5;
+ background-color: #fff;
+ padding: 0 4px;
+}
+/***********************************/
+
+/* ===================================================
+ AGENDA STYLES
+===================================================*/
+
+/* ---------------------------------------------------
+ check if these are still used or not
+-----------------------------------------------------*/
+#agenda {
+ width: 100%;
+ margin: 0 auto;
+ border: 1px solid #4171B5;
+ border-collapse: collapse;
+}
+.agenda_month_divider {
+ background-color: #4171B5;
+ font-weight: bold;
+ font-size: 12px;
+ color: #fff;
+ text-align: center;
+}
+#agenda #title a {
+ color: #fff;
+}
+#agenda .agendaitem {
+ font-size: 12px;
+}
+#smallcalendar .title {
+ background-color: #4171B5;
+ font-weight: bold;
+ padding: 2px;
+ color: #fff;
+ text-align: center;
+ font-size: 11px;
+}
+#smallcalendar .title a {
+ color: #fff;
+}
+/*agenda select not visible on print*/
+#agenda_select {
+ display:none;
+}
+/* ---------------------------------------------------
+ styles for the agenda (day, week, month view)
+-----------------------------------------------------*/
+#agenda_list {
+ width: 100%;
+ margin: 0 auto;
+ border: 1px solid #fff;
+ border-collapse: collapse;
+}
+/*The caption of the calendar (displays the month and the << and >> links*/
+#agenda_list #title {
+ background-color: #4171B5;
+ font-weight: bold;
+ font-size: 12px;
+ color: #fff;
+ text-align: left;
+ padding: 2px 10px;
+ text-align: center;
+ border: 1px solid #264269;
+}
+#agenda_list #title a:link, #agenda_list #title a:visited {
+ background-color: #4171B5;
+ font-weight: bold;
+ font-size: 12px;
+ color: #fff;
+ text-align: left;
+ padding: 2px 10px;
+ text-align: center;
+}
+#agenda_list #title a:hover {
+ background-color: #4171B5;
+ font-weight: bold;
+ font-size: 12px;
+ color: #ff0000;
+ text-align: left;
+ padding: 2px 10px;
+ text-align: center;
+}
+/* The cells with the name of the days of the weeks (mon->sun)*/
+#agenda_list .weekdays {
+ background-color: #D3DFF1;
+ text-align: center;
+ font-weight: bold;
+ border: 1px solid #264269;
+ border-collapse: collapse;
+}
+/* The cells for the days (1->31) */
+#agenda_list .days_week {
+ height: 40px;
+ width: 12%;
+ text-align: left;
+ vertical-align: top;
+ border: 1px solid #264269;
+ border-collapse: collapse;
+ background-color: #f5f5f5;
+}
+#agenda_list .days_weekend {
+ height: 40px;
+ width: 12%;
+ text-align: left;
+ vertical-align: top;
+ border: 1px solid #264269;
+ border-collapse: collapse;
+ background-color: #e6e6e6;
+}
+#agenda_list .days_today {
+ height: 40px;
+ width: 12%;
+ text-align: left;
+ vertical-align: top;
+ border: 1px solid #264269;
+ border-collapse: collapse;
+ background-color: #FFCA8D;
+ color: #CC3300;
+ font-weight: bold;
+}
+/* text in the cells: display of agenda items (visible)*/
+#agenda_list .data {
+ background-color: #eee;
+ text-align: left;
+ padding: 2px 10px;
+ font-weight: bold;
+ border: 0px solid #4171B5;
+ border-collapse: collapse;
+}
+#agenda_list .datanotbold {
+ background-color: #eee;
+ text-align: left;
+ padding: 2px 10px;
+ font-weight: normal;
+ border: 0px solid #4171B5;
+ border-collapse: collapse;
+}
+#agenda_list .text {
+ background-color: #fff;
+ text-align: left;
+ padding: 2px 10px;
+ font-weight: normal;
+ border: 0px solid #4171B5;
+ border-collapse: collapse;
+}
+/*text in the cells: display of agenda items (invisible)*/
+#agenda_list .data_hidden {
+ background-color: #eee;
+ text-align: left;
+ padding: 2px 10px;
+ font-weight: bold;
+ border: 0px solid #4171B5;
+ border-collapse: collapse;
+ color: #999999;
+}
+#agenda_list .datanotbold_hidden {
+ background-color: #eee;
+ text-align: left;
+ padding: 2px 10px;
+ font-weight: normal;
+ border: 0px solid #4171B5;
+ border-collapse: collapse;
+ color: #999999;
+}
+#agenda_list .text_hidden {
+ background-color: #fff;
+ text-align: left;
+ padding: 2px 10px;
+ font-weight: normal;
+ border: 0px solid #4171B5;
+ border-collapse: collapse;
+ color: #999999;
+}
+/*text in the cells: display of agenda items (highlighted)*/
+#agenda_list .datanow {
+ background-color: #FFCC00;
+ text-align: left;
+ padding: 2px 10px;
+ font-weight: bold;
+ border: 0px solid #4171B5;
+ border-collapse: collapse;
+}
+#agenda_list .datanotboldnow {
+ background-color: #FFCC00;
+ text-align: left;
+ padding: 2px 10px;
+ font-weight: normal;
+ border: 0px solid #4171B5;
+ border-collapse: collapse;
+}
+#agenda_list .textnow {
+ background-color: #fff;
+ text-align: left;
+ padding: 2px 10px;
+ font-weight: normal;
+ border: 0px solid #4171B5;
+ border-collapse: collapse;
+}
+/* ---------------------------------------------------
+ styles for the mini agenda
+-----------------------------------------------------*/
+/* mini agenda invisible in print */
+
+#smallcalendar {
+ display:none;
+}
+/*without this the small calendar's space isn't liberated, because the table width is hardcoded in the php*/
+#layoutHulp {
+ display:none;
+}
+/* ---------------------------------------------------
+ styles for the personal agenda
+-----------------------------------------------------*/
+.personal_agenda {
+ color: #008000;
+}
+.personal_agenda a:link, .personal_agenda a:visited {
+ color: #008000;
+}
+a.personal_agenda:link, a.personal_agenda:visited {
+ color: #008000;
+}
+.personal_agenda a:hover, .personal_agenda a:hover {
+ color: #666666;
+}
+a.personal_agenda:hover, a.personal_agenda:hover {
+ color: #666666;
+}
+/* normal and erro message-box */
+.normal-message, .error-message {
+ position: relative;
+ margin: 10px auto;
+ margin-left: -250px;
+ width: 500px;
+ left: 50%;
+ right: 50%;
+ border-width: 1px;
+ border-style: solid;
+ padding: 5px;
+}
+.normal-message {
+ border: 1px solid #FF8001;
+ color: #000;
+ background-color: #FDC77E;
+}
+.error-message {
+ border: 1px solid #3F70AC;
+ color: #000;
+ background-color: #FDC273;
+}
+#message {
+ margin: 0 auto;
+ text-align: center;
+}
+#message select {
+ margin: 10px 0;
+ width: 220px;
+}
+#message textarea {
+ margin: 10px 0;
+}
+#message td {
+ padding: 4px;
+}
+/* styles from the document.php file */
+.comment {
+ margin-left: 30px;
+}
+.invisible {
+ color: #999;
+}
+.invisible a:link, .invisible a:visited {
+ color: #999;
+}
+a.invisible:link, a.invisible:visited {
+ color: #999;
+}
+/* styles from the upload.php file */
+dl.upload_option {
+ margin: 1em 0;
+ padding: 0;
+}
+.upload_option dt {
+ font-weight:bold;
+ margin:0;
+}
+.upload_option dd {
+ margin:0;
+}
+/* styles from dropbox.php file */
+.dropbox_detail {
+ font-size: small
+}
+.dropbox_date {
+ font-style: italic
+}
+.dropbox_person {
+ font-weight: bold
+}
+.dropbox_listTitle {
+ color: #000000;
+}
+.dropbox_feedback {
+ font-size: x-small;
+ height: 50px;
+ width: 200px;
+ overflow: auto
+}
+.dropbox_feedbacks {
+ height: 250px;
+ width: 100%;
+ overflow: auto
+}
+/* styles for chat / conference tools */
+#chat_entermessage {
+ background-color: #D6E5FA;
+ border-top: 1px solid #4171B5;
+ padding: 5px;
+ margin: 0;
+}
+/* styles for general formatting */
+.clear {
+ clear: both;
+ line-height: 0px;
+ height: 0;
+}
+p, blockquote, ol, ul {
+ font-size: 12px;
+}
+h1 {
+ font-size: 21px;
+}
+h2 {
+ font-size: 18px;
+}
+h3 {
+ font-size: 15px;
+ margin-top:0px;
+ padding-top:0px;
+}
+h4 {
+ font-size: 12px;
+}
+h5, h6 {
+ font-family: verdana, arial, helvetica, sans-serif;
+}
+/* the following for regular elements */
+a:link {
+ text-decoration: none;
+ font-weight : bold;
+ color : #4171b5;
+}
+a:visited {
+ text-decoration: none;
+ font-weight : bold;
+ color : #4171b5;
+}
+a:active {
+ text-decoration: none;
+ font-weight : bold;
+ color : #f00;
+}
+input.link_alike {
+ background-color: #FFFFFF;
+ border-width: 0px;
+ color: #4171b5;
+ font-weight: bold;
+ text-align: left;
+ padding: 0px;
+ margin: 0px;
+}
+input.link_alike:hover {
+ background-color: #FFFFFF;
+ border-width: 0px;
+ color: #FF0000;
+ font-weight: bold;
+ text-align: left;
+ padding: 0px;
+ margin: 0px;
+}
+/* the following for the greyed out elements */
+a.nobold:link, a.nobold:visited, a.nobold:active {
+ font-weight: normal;
+ color: #999;
+ margin: 0 0 0 25px;
+}
+a.nobold:hover {
+ font-weight: normal;
+ color: #999;
+ text-decoration: underline;
+ margin: 0 0 0 25px;
+}
+.note {
+ margin: 6px;
+ font-size: 12px;
+ line-height: 14px;
+ font-family: verdana, arial, helvetica, sans-serif;
+ background-color: #FFF089;
+ color: #4171B5;
+ border: 1px solid #4171B5;
+ padding: 4px;
+}
+.alternativeBgLight {
+ background-color: #f5f5f5;
+ border: 1px solid #4171B5;
+ border-collapse: collapse;
+}
+.alternativeBgDark {
+ background-color: #ccf;
+ border: 1px solid #4171B5;
+ border-collapse: collapse;
+}
+.myagendatoday {
+ background-color: #FFCA8D;
+ border-collapse: collapse;
+ font-family: verdana, arial, helvetica, sans-serif;
+ color: #CC3300;
+ font-weight: bold;
+}
+/*****************************************************
+ * FORM STYLES *
+ *****************************************************/
+span.form_required {
+ color: #f00;
+}
+span.form_error {
+ color: #f00;
+ font-size: x-small;
+ margin: 2px;
+}
+/* Form elements - some general styling */
+select, textarea {
+ color : #000;
+ border: 1px solid #000;
+}
+input.checkbox {
+ border-width: 0;
+}
+input.mainoption {
+ font-weight : bold;
+} /* Main submit button */
+input.liteoption {
+ font-weight : normal;
+} /* None-bold submit button */
+select, input[type=checkbox], input[type=radio], input[type=button], input[type=submit] {
+ cursor: pointer;
+ font-size: 12px;
+}
+input[text] {
+ font-size: 12px;
+}
+/************************************************************
+ styles below here are not necessarily used in the current
+ release and the CVS files, they are from earlier versions,
+ and have been left untouched for anyone needing them in
+ their own platform ...
+*************************************************************/
+.topBanner a:link, .topBanner a:active, .topBanner a:visited {
+ text-decoration:none;
+ color:white;
+}
+.topBanner table {
+ text-decoration:none;
+}
+.topBanner a:hover {
+ text-decoration:underline;
+}
+.topBanner td {
+ border-top: solid White 1px;
+}
+.alternativeBgLight {
+ background-color: #f5f5f5;
+}
+.alternativeBgDark {
+ background-color: #e6e6e6
+}
+.forms {
+ letter-spacing: normal;
+ text-align: justify;
+ text-indent: 3pt;
+ word-spacing: normal;
+ padding: 2px 5px;
+}
+.formsTips {
+ text-align: justify;
+ text-indent: 15pt;
+ word-spacing: normal;
+}
+/*
+input.forms { letter-spacing: normal; text-align: justify; text-indent: 3pt; word-spacing: normal;
+padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;}
+*/
+.warn {
+ border: thin double Silver;
+ margin-left: 15px;
+ margin-right: 15px;
+ font-family: serif;
+ color: Red;
+ padding-left: 25px;
+}
+.small {
+ font-family: Verdana, Arial, Helvetica, sans-serif;
+ font-size: 11px
+}
+.xsmall {
+ font-family: Verdana, Arial, Helvetica, sans-serif;
+ font-size: 11px
+}
+.xxsmall {
+ font-family: Verdana, Arial, Helvetica, sans-serif;
+ font-size: 9px
+}
+/*****************************************************
+ * DATA TABLE STYLES *
+ *****************************************************/
+.cell_header {
+ background-color: #EEEEFF;
+ font-weight:bold;
+ text-align:left;
+ padding-left:5px;
+} /* header cell in data table in tools */
+.data_table {
+ border-collapse: collapse;
+ width: 100%;
+ padding: 5px;
+}
+.data_table th {
+ padding-right: 20px;
+ border: 1px solid gray;
+ background-color: #E5EDF9;
+}
+.data_table tr.row_odd {
+ background-color: #fafafa;
+}
+.data_table tr.row_odd:hover, .data_table tr.row_even:hover {
+ background-color: #f0f0f0;
+}
+.data_table tr.row_even {
+ background-color: #fff;
+}
+.data_table td {
+ padding: 5px;
+ vertical-align: top;
+ border-bottom: 1px solid #b0b0b0;
+ border-right: 1px dotted #e1e1e1;
+ border-left: 1px dotted #e1e1e1;
+}
+/* admin page tool list definitions */
+.tool_list dt {
+ font-weight: bold;
+}
+.tool_list dd {
+ margin: 0;
+ padding: 4px 0 0 10px;
+}
+/* divs for category list / platform news on home page */
+.home_cats {
+ width: 45%;
+ float: left;
+ position: relative;
+ margin: 0;
+ padding: 0px;
+ padding-top: 8px;
+ background: #fff;
+}
+.home_news {
+ width: 45%;
+ float: right;
+ position: relative;
+ margin: 0;
+ padding: 0px;
+ padding-top: 8px;
+ background: #fff;
+}
+label.left {
+ float: left;
+ width: 15em;
+ margin: 0 0 0.5em 0;
+}
+form br {
+ clear: both;
+}
+/* Fix for alignment problem in IE-Win browsers */
+/* Hide from IE5-mac. Only IE-win sees this. \*/
+* html .label {
+ margin-right: 10px;
+}
+* html .data {
+ height: 1%;
+ margin-left: 0;
+}
+/* End hide from IE5/mac */
+
+.radio, .checkbox {
+ margin: 0;
+ padding: 0;
+ border: none;
+ background-color: transparent;
+}
+.required {
+ color: #f00;
+ font-weight: bold;
+}
+/* Admin section */
+div.admin_section {
+ width: 40%;
+ float: left;
+ padding: 5px;
+ margin: 10px 20px;
+}
+div.admin_section h4 {
+ margin: 0;
+ border-bottom: 1px solid gray;
+ width: 100%;
+}
+.user_course_category {
+ background-color: #efefef;
+ border: 1px solid #666;
+ font-weight: bold;
+ color: #666;
+ list-style-type: none;
+ margin: 5px;
+ padding: 5px;
+}
+/* Styles for the Dokeos Config Settings of the platform admin section*/
+.sectiontitle {
+ background-color: #EFEFEF;
+ border: 1px solid #cccccc;
+ font-weight: bold;
+ color: #666666;
+ list-style-type: none;
+ margin: 5px;
+ padding: 5px;
+ font-size: 11px;
+}
+.sectioncomment {
+ color: #000000;
+ margin: 5px;
+ padding: 5px;
+ font-size: 11px;
+}
+.sectionvalue {
+ list-style-type: none;
+ margin: 5px;
+ padding: 5px;
+}
+/* New Announcements Tool */
+.announcements_datum {
+ font-size: 12px;
+ font-style: italic;
+ color: #666666;
+}
+/* System announcements on homepage */
+div.system_announcements {
+}
+div.system_announcements h3 {
+}
+div.system_announcement {
+ margin: 5px;
+}
+div.system_announcement_title {
+}
+div.system_announcement_content {
+ margin-left: 20px;
+ border-left: 1px solid gray;
+ padding-left: 5px;
+}
+/*****************************************************
+ * special print ccs classes *
+ *****************************************************/
+
+ a.full_url_print:after {
+ content: "(" attr(href) ")";
+ font-size: 75%;
+}
+/* to make it in visible in the printed version*/
+.print_invisible {
+ display:none;
+}
diff --git a/main/css/chamilo_red_utp/scorm.css b/main/css/chamilo_red_utp/scorm.css
new file mode 100644
index 0000000000..8f0fec794c
--- /dev/null
+++ b/main/css/chamilo_red_utp/scorm.css
@@ -0,0 +1,166 @@
+.scormpage {
+ height: 100%;
+}
+.scormpage .menu {
+ width: 180px;
+ float: left;
+ margin: 1px;
+ padding: 0px;
+ margin-top: 0px;
+ padding-top: 0px;
+ font-size: small;
+}
+.lp_toc {
+ background-color: white;
+ height: 380px;
+ width: 99%;
+ border-right: 1px none;
+}
+.inner_lp_toc {
+ overflow: auto;
+ background-color: white;
+ height: 210px;
+}
+.inner_lp_toc .scorm_item {
+ font-size: 11px;
+ margin-left: 10px;
+ margin-right:10px;
+ text-decoration: none;
+}
+.inner_lp_toc .scorm_item A {
+ font-size: 11px;
+ margin-right: 1px;
+ padding-bottom: 2px;
+ text-decoration: none;
+ font-weight: normal;
+}
+.inner_lp_toc .scorm_item A.chapter_module {
+ font-weight: normal;
+ margin-right: 10px;
+}
+.inner_lp_toc .scorm_item_highlight {
+ font-size: 11px;
+ margin-right: 1px;
+ padding-bottom: 2px;
+ text-decoration: none;
+ font-weight: normal;
+ background:#aaa;
+}
+.inner_lp_toc .scorm_item_highlight A {
+ font-size: 11px;
+ margin-right: 1px;
+ text-decoration: none;
+ font-weight: normal;
+}
+.inner_lp_toc .scorm_item_1 {
+ font-size: 11px;
+ margin-right: 1px;
+ padding-bottom: 2px;
+ text-decoration: none;
+ font-weight: normal;
+ background:#ddd;
+}
+.inner_lp_toc .scorm_item_2 {
+ font-size: 11px;
+ margin-right: 1px;
+ padding-bottom: 2px;
+ text-decoration: none;
+ font-weight: normal;
+ background:#eee;
+}
+.inner_lp_toc .scorm_title {
+ font-weight: bold;
+ background:#ccc;
+ font-size: 14px;
+ color: #444;
+}
+.inner_lp_toc .scorm_title_text {
+ margin-left: 10px;
+ //padding: 2px;
+ //cambiado no existe
+}
+.inner_lp_toc .scorm_status_img {
+ margin:0px;
+ margin-left: -10px;
+ width:10px;
+}
+.lp_navigation {
+ overflow: auto;
+ background-color: white;
+ height: 44px;
+ width:180px;
+ padding-top: 4px;
+ padding-bottom:0px;
+ border: none;
+ margin-top: -18px;
+ border-top: 1px dotted black;
+ border-bottom: 1px dotted black;
+}
+.lp_navigation_elem {
+ padding-left: 15px;
+ padding-top: 0px;
+}
+/*.scormpage .menu */
+.lp_navigation_elem .progresstext {
+ margin-top: -20px;
+ //margin-left: 40%;
+//em font-size: normal;
+}
+/*.scormpage .menu */
+.lp_navigation_elem .buttons {
+ margin-left: 0px;
+ margin-right: 0em;
+ margin-top: 0.4em;
+}
+.scormpage .menu .notification {
+ background-color: white;
+ height: 50px;
+}
+.scormpage .menu .notification .message {
+ background-color: white;
+ height: 50px;
+ width: 180px;
+ border: none;
+}
+.scormpage .content {
+ /*float: left;
+ width: 60%;*/
+ margin-top: 0px;
+ padding-top: 0px;
+ padding-left: 180px;
+ background-color: white;
+}
+.iframe {
+ border: 0px solid black;
+ height: 100%;
+ width: 95%;
+ margin: 0px;
+ padding-right: 0px;
+ overflow: auto;
+ vertical-align: top;
+}
+.scormpage .footer {
+ clear: both;
+}
+#image_preview {
+ padding-left: 17px;
+}
+#author_name {
+ padding-left: 5px;
+ padding-top: 5px;
+ font-size: 11px;
+ color:#888;
+}
+#msg_div_id {
+ padding-left: 17px;
+ padding-top: 4px;
+}
+.scorm_title_text {
+ margin-left: 10px;
+ font-weight: bold;
+ background:#ccc;
+ font-size: 14px;
+ color: #444;
+ width: 89%;
+ padding: 1px 5px 3px 8px;
+}
diff --git a/main/css/chamilo_red_utp/scormfs.css b/main/css/chamilo_red_utp/scormfs.css
new file mode 100644
index 0000000000..426d6be075
--- /dev/null
+++ b/main/css/chamilo_red_utp/scormfs.css
@@ -0,0 +1,82 @@
+.scormpage {
+}
+.scormpage .menu {
+ width: 180px;
+ padding: 0px;
+ font-size: small;
+ position: absolute;
+ background-color: white;
+}
+.scormpage .menu .lp_nav {
+ height: 50px;
+ width: 160px;
+ padding-top: 4px;
+ padding-bottom:0px;
+ /*
+ margin-left: 10px;
+ margin-right: 10px;
+*/
+ margin-top: 0px;
+}
+.lp_navigation_elem {
+ padding-left: 15px;
+ padding-top: 0px;
+}
+/*.scormpage .menu */
+.lp_navigation_elem .progresstext {
+ font-size: smaller;
+}
+/*.scormpage .menu */
+.lp_navigation_elem .buttons {
+ margin-left: 5px;
+ margin-right: 0em;
+ margin-top: 0.4em;
+}
+#msg_div_id {
+ padding-left: 10px;
+ padding-top: 4px;
+}
+.scormpage .menu .notification {
+ height: 50px;
+ margin-left: 15px;
+ margin-right: 15px;
+}
+.scormpage .menu .notification .message {
+ height: 50px;
+ width: 140px;
+ border: none;
+}
+.scormpage .menu .notification .lp_log {
+ height: 100px;
+ width: 180px;
+ border: none;
+ overflow: auto;
+}
+.scormpage .content .iframe {
+ /*
+ border: none;
+ height: 700px;
+ margin: 0px;
+ padding-right: 0px;
+ margin-right: 0%;
+ margin-left: 0%;
+ */
+ /* trying the absolute mode */
+ position: fixed;
+ bottom:0;
+ left:0;
+ width: 100%;
+ height: 100%;
+}
+.scormpage .footer {
+ clear: both;
+}
+#image_preview {
+ padding-left: 17px;
+}
+#author_name {
+ padding-left: 5px;
+ padding-top: 5px;
+ font-size: 11px;
+ color:#888;
+}