New styles from Chamilo, Electric Blue and Orange

main/css/chamilo_electric_blue/course.css

@@ -0,0 +1,410 @@
+/*
+==============================================================================
+	GLOBAL STYLES
+==============================================================================
+*/
+.dokeos_course {
+	width:95%;
+	margin:1em auto;
+	text-align:center;
+}
+/*
+------------------------------------------------------------------------------
+	Introductory title
+------------------------------------------------------------------------------
+*/ 
+
+#box_title1, #footer1 {
+	border:1px solid #4171b5;
+	padding:1em;
+	width:99%;
+	margin:1em auto;
+}
+#box_title1 h1 {
+	font:bold 2.5em Arial, sans-serif, sans;
+}
+#box_title h2 {
+	font:bold 2em Arial, sans-serif, sans;
+}
+#content1 {
+	width:99%;
+	clear:both;
+	text-align:justify;
+}
+#content1 img.icon {
+	float:left;
+	margin:0 1em 1em 1em;
+	display:block;
+	vertical-align:top;
+}
+#email1 {
+	float:right;
+	clear:right;
+	text-align:right;
+}
+#email1, .manager1 {
+	width:50%;
+}
+#footer1 {
+	font-weight:bold;
+	height: 1em;
+	line-height: 1em;
+}
+#manager1 {
+	float:left;
+	clear:left;
+	text-align:left;
+}
+/*
+------------------------------------------------------------------------------
+	Explanation
+------------------------------------------------------------------------------
+*/
+
+#content2 {
+	position:absolute;
+	top:2em;
+	left:18em;
+	text-align:justify;
+	margin-right:2em;
+}
+#content2 h1 {
+	padding:.5em;
+	font:bold 2em Arial, sans-serif, sans;
+}
+#content2 h2 {
+	font:normal 1.1em Arial, sans-serif, sans;
+	margin:.2em 0 3em .5em;
+}
+#content2 p {
+	margin:.5em;
+}
+#explanation {
+	text-align:center;
+	margin: 1em auto;
+	width:auto;
+	border:1px solid #4171b5;
+}
+#list2 {
+	width:10em;
+	border:1px solid #4171b5;
+	margin:2em auto;
+}
+#list2 p {
+	text-align:left;
+	margin-left:.2em;
+}
+#list2 li {
+	margin:0 0 0 2em;
+	padding:0;
+	text-indent:.5em;
+	text-align:left;
+	list-style-position:inside;
+}
+#list2 ul {
+	margin:0 0 .5em 0;
+	padding:0;
+	text-align:left;
+	list-style-position:inside;
+}
+#main2 {
+	border:1px solid #4171b5;
+}
+#nav2 {
+	position:absolute;
+	left:2em;
+	top:3em;
+	width:15em;
+}
+.template2 {
+	position:relative;
+}
+/*
+------------------------------------------------------------------------------
+	Course objetives
+------------------------------------------------------------------------------
+*/
+#box_title3, #content3 {
+	border:1px solid #4171b5;
+	padding:1em;
+	width:99%;
+	margin:1em auto;
+}
+#box_title3 h1 {
+	font:bold 3.5em Arial, sans-serif, sans;
+}
+#content3 {
+	position:relative;
+	padding-bottom:50px;
+	text-align:left;
+}
+#content3 #primary {
+	font-weight:bold;
+	font-size:2em;
+	margin:0;
+	padding:0;
+}
+#content3 #primary li, #content3 #secondary li {
+	margin:0 0 0 1em;
+	padding:0;
+}
+#content3 #primary .secondary {
+	font-weight:normal;
+	font-size:.8em;
+	margin:0 0 0 2em;
+	padding:0;
+}
+#footer3 {
+	position:absolute;
+	bottom:0;
+	right:0;
+}
+/*
+==============================================================================
+	Styles for corporative version
+==============================================================================
+*/
+#corp {
+	font:normal .85em Lucida Grande, Arial, sans-serif, sans;
+}
+#corp a {
+	text-decoration: none;
+	font: bold 100% Arial, sans-serif, sans;
+	color: #4170b4;
+}
+#corp a:hover, #corp a:focus {
+	color: #111;
+}
+/*
+------------------------------------------------------------------------------
+	Introductory title
+------------------------------------------------------------------------------
+*/ 
+
+#corp #box_title1 {
+	background:transparent url("images/alert.jpg") no-repeat top center;
+	border:none;
+	padding-top:10px;
+}
+#corp #box_title1 #bottom {
+	background:transparent url("images/alert.jpg") no-repeat top center;
+	height:40px;
+	width:100%;
+}
+#corp #footer1 {
+	border: 1px solid #ddd;
+	background:#eee url("images/headertables.jpg") repeat-x top center;
+	line-height:.8em;
+	height:.8em;
+	padding:.5em;
+}
+/*
+------------------------------------------------------------------------------
+	Explanation
+------------------------------------------------------------------------------
+*/ 
+#corp #explanation {
+	background:transparent url("images/alert.jpg") no-repeat top center;
+	border:none;
+	padding-top:10px;
+}
+#corp #explanation #bottom {
+	background:transparent url("images/alert.jpg") no-repeat top center;
+	height:40px;
+	margin-top:-15px;
+	width:100%;
+}
+#corp #list2, #corp #main2 {
+	border:1px solid #aaa;
+}
+#corp #content2 #main2 h2 {
+	font:bold 1.1em Arial, sans-serif, sans;
+	margin:.2em 0 3em .5em;
+}
+/*
+------------------------------------------------------------------------------
+	Course objetives
+------------------------------------------------------------------------------
+*/
+#corp #box_title3 {
+	background:transparent url("images/alert.jpg") no-repeat top center;
+	border:none;
+	padding-top:10px;
+}
+#corp #box_title3 #bottom {
+	background:transparent url("images/alert.jpg") no-repeat top center;
+	height:40px;
+	width:100%;
+}
+#corp #content3 {
+	border:1px solid #bbb;
+}
+/*
+==============================================================================
+	Styles for academic version
+==============================================================================
+*/
+#academic {
+	font-family:normal .85em trebuchet, verdana, Arial, sans-serif, sans;
+	color: #000915;
+}
+#academic a {
+	text-decoration: none;
+	font: bold 100% Arial, sans-serif, sans;
+	color: #4171b5;
+}
+#academic a:hover, a:focus {
+	color: #000915;
+}
+/*
+------------------------------------------------------------------------------
+	Introductory title
+------------------------------------------------------------------------------
+*/ 
+#academic #box_title1 {
+	background:transparent url("images/alert_academic.jpg") no-repeat top center;
+	border:none;
+	padding-top:10px;
+	color: #00122B;
+}
+#academic #box_title1 #bottom {
+	background:transparent url("images/alert_academic.jpg") no-repeat top center;
+	height:40px;
+	width:100%;
+}
+#academic #footer1 {
+	background: #8cafe1 url('images/crystal3.png') repeat-x;
+}
+#academic #footer1 a {
+	color:#fff;
+}
+#academic #footer1 a:hover, #academic #footer1 a:focus {
+	color: #000915;
+}
+/*
+------------------------------------------------------------------------------
+	Explanation
+------------------------------------------------------------------------------
+*/
+#academic #explanation {
+	background:transparent url("images/alert_academic.jpg") no-repeat top center;
+	border:none;
+	padding-top:10px;
+	color: #00122B;
+}
+#academic #explanation #bottom {
+	background:transparent url("images/alert_academic.jpg") no-repeat top center;
+	height:40px;
+	width:100%;
+}
+#academic #list2, #academic #main2 {
+	border: 1px solid #0049AF;
+}
+#academic #nav2 img {
+	margin-bottom:3em;
+}
+#academic #nav2 .logo {
+	margin-left:-1.2em;
+}
+#academic #nav2 {
+	top:5em;
+}
+/*
+------------------------------------------------------------------------------
+	Course objetives
+------------------------------------------------------------------------------
+*/
+#academic #box_title3 {
+	border: 1px solid #0049AF;
+	background: #b0c8eb url('images/crystal3.png') repeat-x;
+	color: #00122B;
+}
+#academic #content3 {
+	border: 1px solid #0049AF;
+}
+/*
+==============================================================================
+	Styles for baby version
+==============================================================================
+*/
+#baby {
+	font:normal .85em 'Lucida Grande', verdana, Arial, sans-serif, sans;
+	color: #000;
+}
+#baby a {
+	text-decoration: none;
+	font: bold 100% Arial, sans-serif, sans;
+	color: #9a0;
+}
+#baby a:hover, a:focus {
+	color: #470;
+}
+/*
+------------------------------------------------------------------------------
+	Introductory title
+------------------------------------------------------------------------------
+*/
+
+#baby #box_title1 {
+	background:transparent url("images/alert_baby.jpg") no-repeat top center;
+	border:none;
+	padding-top:10px;
+	color: #00122B;
+}
+#baby #box_title1 #bottom {
+	background:transparent url("images/alert_baby.jpg") no-repeat top center;
+	height:40px;
+	width:100%;
+}
+#baby #footer1 {
+	background-color:transparent;
+	border: 1px solid #BFAF00;
+	padding: .2em;
+	color: #3F3A00;
+}
+/*
+------------------------------------------------------------------------------
+	Explanation
+------------------------------------------------------------------------------
+*/
+#baby #explanation {
+	background:transparent url("images/alert_baby.jpg") no-repeat top center;
+	border:none;
+	padding-top:10px;
+	color: #3F3A00;
+}
+#baby #explanation #bottom {
+	background:transparent url("images/alert_baby.jpg") no-repeat top center;
+	height:40px;
+	width:100%;
+}
+#baby #list2, #baby #main2 {
+	border: 1px solid #BFAF00;
+}
+#baby #nav2 {
+	top:0;
+}
+#baby #content2 #main2 h2 {
+	font:bold 1.1em Arial, sans-serif, sans;
+	margin:.2em 0 3em .5em;
+}
+/*
+------------------------------------------------------------------------------
+	Course objetives
+------------------------------------------------------------------------------
+*/
+
+#baby #box_title3 {
+	background:transparent url("images/alert_baby.jpg") no-repeat top center;
+	border:none;
+	padding-top:10px;
+	color: #3F3A00;
+}
+#baby #box_title3 #bottom {
+	background:transparent url("images/alert_baby.jpg") no-repeat top center;
+	height:40px;
+	width:100%;
+}
+#baby #content3 {
+	border: 1px solid #BFAF00;
+}

main/css/chamilo_electric_blue/jquery.tabs.css

@@ -0,0 +1,96 @@
+/* Caution! Ensure accessibility in print and other media types... */
+@media projection, screen { /* Use class for showing/hiding tab content, so that visibility can be better controlled in different media types... */
+.tabs-hide {
+	display: none;
+}
+}
+
+/* Hide useless elements in print layouts... */
+@media print {
+.tabs-nav {
+	display: none;
+}
+}
+/* Skin */
+.tabs-nav {
+	list-style: none;
+	margin: 0;
+	padding: 0 0 0 4px;
+}
+.tabs-nav:after { /* clearing without presentational markup, IE gets extra treatment */
+	display: block;
+	clear: both;
+	content: " ";
+}
+.tabs-nav li {
+	float: left;
+	margin: 0 0 0 1px;
+	min-width: 84px; /* be nice to Opera */
+}
+.tabs-nav a, .tabs-nav a span {
+    display: block;
+    padding: 0 10px;
+    /*background: url(images/tab.png) no-repeat;*/
+}
+.tabs-nav a {
+    position: relative;
+    top: 1px;
+    z-index: 2;
+    padding-left: 0;
+    /*color: #fff;*/
+    font-size: 12px;
+    font-weight: bold;
+    line-height: 2;
+    text-align: center;
+    text-decoration: none;
+    white-space: nowrap; /* required in IE 6 */    
+}
+.tabs-nav .tabs-selected a {
+    /*color: #fff;*/
+}
+.tabs-nav .tabs-selected a, .tabs-nav a:hover, .tabs-nav a:focus, .tabs-nav a:active {
+	background-position: 100% -150px;
+	outline: 0; /* prevent dotted border in Firefox */
+}
+.tabs-nav a, .tabs-nav .tabs-disabled a:hover, .tabs-nav .tabs-disabled a:focus, .tabs-nav .tabs-disabled a:active {
+	background-position: 100% -100px;
+}
+.tabs-nav a span {
+	width: 64px; /* IE 6 treats width as min-width */
+	min-width: 64px;
+	height: 18px; /* IE 6 treats height as min-height */
+	min-height: 18px;
+	padding-top: 6px;
+	padding-right: 0;
+}
+*>.tabs-nav a span { /* hide from IE 6 */
+	width: auto;
+	height: auto;
+}
+.tabs-nav .tabs-selected a span {
+	padding-top: 7px;
+}
+.tabs-nav .tabs-selected a span, .tabs-nav a:hover span, .tabs-nav a:focus span, .tabs-nav a:active span {
+	background-position: 0 -50px;
+}
+.tabs-nav a span, .tabs-nav .tabs-disabled a:hover span, .tabs-nav .tabs-disabled a:focus span, .tabs-nav .tabs-disabled a:active span {
+	background-position: 0 0;
+}
+.tabs-nav .tabs-selected a:link, .tabs-nav .tabs-selected a:visited, .tabs-nav .tabs-disabled a:link, .tabs-nav .tabs-disabled a:visited { /* @ Opera, use pseudo classes otherwise it confuses cursor... */
+	cursor: text;
+}
+.tabs-nav a:hover, .tabs-nav a:focus, .tabs-nav a:active { /* @ Opera, we need to be explicit again here now... */
+	cursor: pointer;
+}
+.tabs-nav .tabs-disabled {
+	opacity: .4;
+}
+.tabs-container {
+    /*border-top: 1px solid #97a5b0;*/
+    padding: 1em 8px;
+    /*background: #fff; declare background color for container to avoid distorted fonts in IE while fading */
+}
+.tabs-loading em {
+    padding: 0 0 0 20px;
+    /*background: url(images/loading.gif) no-repeat 0 50%;*/
+}

main/css/chamilo_electric_blue/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:230px;
+}
+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:240px;
+}
+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;
+}

main/css/chamilo_electric_blue/print.css

@@ -0,0 +1,917 @@
+/* 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;
+}
+#header3 {
+	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 <a> 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                                      *
+ *****************************************************/
+div.row {
+	clear: both;
+	padding-top: 5px;
+}
+div.row div.form_header {
+	white-space: nowrap;
+	padding: 2px;
+	background-color: #E5EDF9;
+	border: 1px solid #4271B5;
+}
+div.row div.label {
+	display: inline;
+	float: left;
+	width: 18%;
+	text-align: right;
+}
+div.row div.formw {
+	display: inline;
+	width: 80%;
+}
+[dir=ltr] div.row div.label, [dir=rtl] div.row div.formw {
+	float: left;
+	text-align: right;
+}
+[dir=rtl] div.row div.label, [dir=ltr] div.row div.formw {
+	float: right;
+	text-align: left;
+}
+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;
+}

main/css/chamilo_electric_blue/scorm.css

@@ -0,0 +1,169 @@
+.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;
+	width: 94%;
+	border-left: 10px #FFF solid;
+}
+.inner_lp_toc .scorm_item {
+	font-size: 11px;
+	margin-left: 10px;
+	margin-right:10px;
+//cambiado era 20  padding-bottom: 2px;
+	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;
+}

main/css/chamilo_electric_blue/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;
+}

main/css/chamilo_orange/course.css

@@ -0,0 +1,410 @@
+/*
+==============================================================================
+	GLOBAL STYLES
+==============================================================================
+*/
+.dokeos_course {
+	width:95%;
+	margin:1em auto;
+	text-align:center;
+}
+/*
+------------------------------------------------------------------------------
+	Introductory title
+------------------------------------------------------------------------------
+*/ 
+
+#box_title1, #footer1 {
+	border:1px solid #4171b5;
+	padding:1em;
+	width:99%;
+	margin:1em auto;
+}
+#box_title1 h1 {
+	font:bold 2.5em Arial, sans-serif, sans;
+}
+#box_title h2 {
+	font:bold 2em Arial, sans-serif, sans;
+}
+#content1 {
+	width:99%;
+	clear:both;
+	text-align:justify;
+}
+#content1 img.icon {
+	float:left;
+	margin:0 1em 1em 1em;
+	display:block;
+	vertical-align:top;
+}
+#email1 {
+	float:right;
+	clear:right;
+	text-align:right;
+}
+#email1, .manager1 {
+	width:50%;
+}
+#footer1 {
+	font-weight:bold;
+	height: 1em;
+	line-height: 1em;
+}
+#manager1 {
+	float:left;
+	clear:left;
+	text-align:left;
+}
+/*
+------------------------------------------------------------------------------
+	Explanation
+------------------------------------------------------------------------------
+*/
+
+#content2 {
+	position:absolute;
+	top:2em;
+	left:18em;
+	text-align:justify;
+	margin-right:2em;
+}
+#content2 h1 {
+	padding:.5em;
+	font:bold 2em Arial, sans-serif, sans;
+}
+#content2 h2 {
+	font:normal 1.1em Arial, sans-serif, sans;
+	margin:.2em 0 3em .5em;
+}
+#content2 p {
+	margin:.5em;
+}
+#explanation {
+	text-align:center;
+	margin: 1em auto;
+	width:auto;
+	border:1px solid #4171b5;
+}
+#list2 {
+	width:10em;
+	border:1px solid #4171b5;
+	margin:2em auto;
+}
+#list2 p {
+	text-align:left;
+	margin-left:.2em;
+}
+#list2 li {
+	margin:0 0 0 2em;
+	padding:0;
+	text-indent:.5em;
+	text-align:left;
+	list-style-position:inside;
+}
+#list2 ul {
+	margin:0 0 .5em 0;
+	padding:0;
+	text-align:left;
+	list-style-position:inside;
+}
+#main2 {
+	border:1px solid #4171b5;
+}
+#nav2 {
+	position:absolute;
+	left:2em;
+	top:3em;
+	width:15em;
+}
+.template2 {
+	position:relative;
+}
+/*
+------------------------------------------------------------------------------
+	Course objetives
+------------------------------------------------------------------------------
+*/
+#box_title3, #content3 {
+	border:1px solid #4171b5;
+	padding:1em;
+	width:99%;
+	margin:1em auto;
+}
+#box_title3 h1 {
+	font:bold 3.5em Arial, sans-serif, sans;
+}
+#content3 {
+	position:relative;
+	padding-bottom:50px;
+	text-align:left;
+}
+#content3 #primary {
+	font-weight:bold;
+	font-size:2em;
+	margin:0;
+	padding:0;
+}
+#content3 #primary li, #content3 #secondary li {
+	margin:0 0 0 1em;
+	padding:0;
+}
+#content3 #primary .secondary {
+	font-weight:normal;
+	font-size:.8em;
+	margin:0 0 0 2em;
+	padding:0;
+}
+#footer3 {
+	position:absolute;
+	bottom:0;
+	right:0;
+}
+/*
+==============================================================================
+	Styles for corporative version
+==============================================================================
+*/
+#corp {
+	font:normal .85em Lucida Grande, Arial, sans-serif, sans;
+}
+#corp a {
+	text-decoration: none;
+	font: bold 100% Arial, sans-serif, sans;
+	color: #4170b4;
+}
+#corp a:hover, #corp a:focus {
+	color: #111;
+}
+/*
+------------------------------------------------------------------------------
+	Introductory title
+------------------------------------------------------------------------------
+*/ 
+
+#corp #box_title1 {
+	background:transparent url("images/alert.jpg") no-repeat top center;
+	border:none;
+	padding-top:10px;
+}
+#corp #box_title1 #bottom {
+	background:transparent url("images/alert.jpg") no-repeat top center;
+	height:40px;
+	width:100%;
+}
+#corp #footer1 {
+	border: 1px solid #ddd;
+	background:#eee url("images/headertables.jpg") repeat-x top center;
+	line-height:.8em;
+	height:.8em;
+	padding:.5em;
+}
+/*
+------------------------------------------------------------------------------
+	Explanation
+------------------------------------------------------------------------------
+*/ 
+#corp #explanation {
+	background:transparent url("images/alert.jpg") no-repeat top center;
+	border:none;
+	padding-top:10px;
+}
+#corp #explanation #bottom {
+	background:transparent url("images/alert.jpg") no-repeat top center;
+	height:40px;
+	margin-top:-15px;
+	width:100%;
+}
+#corp #list2, #corp #main2 {
+	border:1px solid #aaa;
+}
+#corp #content2 #main2 h2 {
+	font:bold 1.1em Arial, sans-serif, sans;
+	margin:.2em 0 3em .5em;
+}
+/*
+------------------------------------------------------------------------------
+	Course objetives
+------------------------------------------------------------------------------
+*/
+#corp #box_title3 {
+	background:transparent url("images/alert.jpg") no-repeat top center;
+	border:none;
+	padding-top:10px;
+}
+#corp #box_title3 #bottom {
+	background:transparent url("images/alert.jpg") no-repeat top center;
+	height:40px;
+	width:100%;
+}
+#corp #content3 {
+	border:1px solid #bbb;
+}
+/*
+==============================================================================
+	Styles for academic version
+==============================================================================
+*/
+#academic {
+	font-family:normal .85em trebuchet, verdana, Arial, sans-serif, sans;
+	color: #000915;
+}
+#academic a {
+	text-decoration: none;
+	font: bold 100% Arial, sans-serif, sans;
+	color: #4171b5;
+}
+#academic a:hover, a:focus {
+	color: #000915;
+}
+/*
+------------------------------------------------------------------------------
+	Introductory title
+------------------------------------------------------------------------------
+*/ 
+#academic #box_title1 {
+	background:transparent url("images/alert_academic.jpg") no-repeat top center;
+	border:none;
+	padding-top:10px;
+	color: #00122B;
+}
+#academic #box_title1 #bottom {
+	background:transparent url("images/alert_academic.jpg") no-repeat top center;
+	height:40px;
+	width:100%;
+}
+#academic #footer1 {
+	background: #8cafe1 url('images/crystal3.png') repeat-x;
+}
+#academic #footer1 a {
+	color:#fff;
+}
+#academic #footer1 a:hover, #academic #footer1 a:focus {
+	color: #000915;
+}
+/*
+------------------------------------------------------------------------------
+	Explanation
+------------------------------------------------------------------------------
+*/
+#academic #explanation {
+	background:transparent url("images/alert_academic.jpg") no-repeat top center;
+	border:none;
+	padding-top:10px;
+	color: #00122B;
+}
+#academic #explanation #bottom {
+	background:transparent url("images/alert_academic.jpg") no-repeat top center;
+	height:40px;
+	width:100%;
+}
+#academic #list2, #academic #main2 {
+	border: 1px solid #0049AF;
+}
+#academic #nav2 img {
+	margin-bottom:3em;
+}
+#academic #nav2 .logo {
+	margin-left:-1.2em;
+}
+#academic #nav2 {
+	top:5em;
+}
+/*
+------------------------------------------------------------------------------
+	Course objetives
+------------------------------------------------------------------------------
+*/
+#academic #box_title3 {
+	border: 1px solid #0049AF;
+	background: #b0c8eb url('images/crystal3.png') repeat-x;
+	color: #00122B;
+}
+#academic #content3 {
+	border: 1px solid #0049AF;
+}
+/*
+==============================================================================
+	Styles for baby version
+==============================================================================
+*/
+#baby {
+	font:normal .85em 'Lucida Grande', verdana, Arial, sans-serif, sans;
+	color: #000;
+}
+#baby a {
+	text-decoration: none;
+	font: bold 100% Arial, sans-serif, sans;
+	color: #9a0;
+}
+#baby a:hover, a:focus {
+	color: #470;
+}
+/*
+------------------------------------------------------------------------------
+	Introductory title
+------------------------------------------------------------------------------
+*/
+
+#baby #box_title1 {
+	background:transparent url("images/alert_baby.jpg") no-repeat top center;
+	border:none;
+	padding-top:10px;
+	color: #00122B;
+}
+#baby #box_title1 #bottom {
+	background:transparent url("images/alert_baby.jpg") no-repeat top center;
+	height:40px;
+	width:100%;
+}
+#baby #footer1 {
+	background-color:transparent;
+	border: 1px solid #BFAF00;
+	padding: .2em;
+	color: #3F3A00;
+}
+/*
+------------------------------------------------------------------------------
+	Explanation
+------------------------------------------------------------------------------
+*/
+#baby #explanation {
+	background:transparent url("images/alert_baby.jpg") no-repeat top center;
+	border:none;
+	padding-top:10px;
+	color: #3F3A00;
+}
+#baby #explanation #bottom {
+	background:transparent url("images/alert_baby.jpg") no-repeat top center;
+	height:40px;
+	width:100%;
+}
+#baby #list2, #baby #main2 {
+	border: 1px solid #BFAF00;
+}
+#baby #nav2 {
+	top:0;
+}
+#baby #content2 #main2 h2 {
+	font:bold 1.1em Arial, sans-serif, sans;
+	margin:.2em 0 3em .5em;
+}
+/*
+------------------------------------------------------------------------------
+	Course objetives
+------------------------------------------------------------------------------
+*/
+
+#baby #box_title3 {
+	background:transparent url("images/alert_baby.jpg") no-repeat top center;
+	border:none;
+	padding-top:10px;
+	color: #3F3A00;
+}
+#baby #box_title3 #bottom {
+	background:transparent url("images/alert_baby.jpg") no-repeat top center;
+	height:40px;
+	width:100%;
+}
+#baby #content3 {
+	border: 1px solid #BFAF00;
+}