diff --git a/main/css/academica/default.css b/main/css/academica/default.css
index b990b5e7da..7fcacbf82d 100755
--- a/main/css/academica/default.css
+++ b/main/css/academica/default.css
@@ -2925,11 +2925,12 @@ div.image-social-content center.friend {
   overflow:hidden;
 }
 .thematic-postit-center {
- background-image: url('../../img/postit_center.jpg');
+ background-image: url('../../img/postit_center.png');
  height:auto;
- margin-top:-16px;
+ margin-top: 0px;
  margin-bottom:-16px;
  padding-left:20px;
  padding-right:20px;
  padding-bottom:10px;
+ padding-top: 5px;
 }
\ No newline at end of file
diff --git a/main/css/baby_orange/default.css b/main/css/baby_orange/default.css
index 17c79da31b..21afff5966 100755
--- a/main/css/baby_orange/default.css
+++ b/main/css/baby_orange/default.css
@@ -2914,11 +2914,12 @@ div.image-social-content center.friend {
   overflow:hidden;
 }
 .thematic-postit-center {
- background-image: url('../../img/postit_center.jpg');
+ background-image: url('../../img/postit_center.png');
  height:auto;
- margin-top:-16px;
+ margin-top: 0px;
  margin-bottom:-16px;
  padding-left:20px;
  padding-right:20px;
  padding-bottom:10px;
+ padding-top: 5px;
 }
\ No newline at end of file
diff --git a/main/css/blue_lagoon/default.css b/main/css/blue_lagoon/default.css
index 3affccfe0f..45db2a2ff4 100755
--- a/main/css/blue_lagoon/default.css
+++ b/main/css/blue_lagoon/default.css
@@ -3539,11 +3539,12 @@ div.image-social-content center.friend {
   overflow:hidden;
 }
 .thematic-postit-center {
- background-image: url('../../img/postit_center.jpg');
+ background-image: url('../../img/postit_center.png');
  height:auto;
- margin-top:-16px;
+ margin-top: 0px;
  margin-bottom:-16px;
  padding-left:20px;
  padding-right:20px;
  padding-bottom:10px;
+ padding-top: 5px;
 }
\ No newline at end of file
diff --git a/main/css/chamilo/default.css b/main/css/chamilo/default.css
index 38e5bda788..b753dc96aa 100644
--- a/main/css/chamilo/default.css
+++ b/main/css/chamilo/default.css
@@ -3905,11 +3905,12 @@ div.image-social-content center.friend {
   overflow:hidden;
 }
 .thematic-postit-center {
- background-image: url('../../img/postit_center.jpg');
+ background-image: url('../../img/postit_center.png');
  height:auto;
- margin-top:-16px;
+ margin-top: 0px;
  margin-bottom:-16px;
  padding-left:20px;
  padding-right:20px;
  padding-bottom:10px;
+ padding-top: 5px;
 }
\ No newline at end of file
diff --git a/main/css/chamilo_green/default.css b/main/css/chamilo_green/default.css
index 7ed6d80da0..b6a4c697ef 100644
--- a/main/css/chamilo_green/default.css
+++ b/main/css/chamilo_green/default.css
@@ -3908,11 +3908,12 @@ div.image-social-content center.friend {
   overflow:hidden;
 }
 .thematic-postit-center {
- background-image: url('../../img/postit_center.jpg');
+ background-image: url('../../img/postit_center.png');
  height:auto;
- margin-top:-16px;
+ margin-top: 0px;
  margin-bottom:-16px;
  padding-left:20px;
  padding-right:20px;
  padding-bottom:10px;
+ padding-top: 5px;
 }
\ No newline at end of file
diff --git a/main/css/chamilo_red/default.css b/main/css/chamilo_red/default.css
index 56e8e7d93d..90faf1fd45 100644
--- a/main/css/chamilo_red/default.css
+++ b/main/css/chamilo_red/default.css
@@ -3908,11 +3908,12 @@ div.image-social-content center.friend {
   overflow:hidden;
 }
 .thematic-postit-center {
- background-image: url('../../img/postit_center.jpg');
+ background-image: url('../../img/postit_center.png');
  height:auto;
- margin-top:-16px;
+ margin-top: 0px;
  margin-bottom:-16px;
  padding-left:20px;
  padding-right:20px;
  padding-bottom:10px;
+ padding-top: 5px;
 }
\ No newline at end of file
diff --git a/main/css/cool_blue/default.css b/main/css/cool_blue/default.css
index 97fa7eeb2a..78cbd2309e 100755
--- a/main/css/cool_blue/default.css
+++ b/main/css/cool_blue/default.css
@@ -3416,11 +3416,12 @@ div.image-social-content center.friend {
   overflow:hidden;
 }
 .thematic-postit-center {
- background-image: url('../../img/postit_center.jpg');
+ background-image: url('../../img/postit_center.png');
  height:auto;
- margin-top:-16px;
+ margin-top: 0px;
  margin-bottom:-16px;
  padding-left:20px;
  padding-right:20px;
  padding-bottom:10px;
+ padding-top: 5px;
 }
\ No newline at end of file
diff --git a/main/css/corporate/default.css b/main/css/corporate/default.css
index 3046283cbb..d25f635bfe 100755
--- a/main/css/corporate/default.css
+++ b/main/css/corporate/default.css
@@ -2910,11 +2910,12 @@ div.image-social-content center.friend {
   overflow:hidden;
 }
 .thematic-postit-center {
- background-image: url('../../img/postit_center.jpg');
+ background-image: url('../../img/postit_center.png');
  height:auto;
- margin-top:-16px;
+ margin-top: 0px;
  margin-bottom:-16px;
  padding-left:20px;
  padding-right:20px;
  padding-bottom:10px;
+ padding-top: 5px;
 }
\ No newline at end of file
diff --git a/main/css/cosmic_campus/default.css b/main/css/cosmic_campus/default.css
index 8f1f395bd6..ee858c5034 100755
--- a/main/css/cosmic_campus/default.css
+++ b/main/css/cosmic_campus/default.css
@@ -2958,11 +2958,12 @@ div.image-social-content center.friend {
   overflow:hidden;
 }
 .thematic-postit-center {
- background-image: url('../../img/postit_center.jpg');
+ background-image: url('../../img/postit_center.png');
  height:auto;
- margin-top:-16px;
+ margin-top: 0px;
  margin-bottom:-16px;
  padding-left:20px;
  padding-right:20px;
  padding-bottom:10px;
+ padding-top: 5px;
 }
\ No newline at end of file
diff --git a/main/css/delicious_bordeaux/default.css b/main/css/delicious_bordeaux/default.css
index 61c6954588..880dae2287 100755
--- a/main/css/delicious_bordeaux/default.css
+++ b/main/css/delicious_bordeaux/default.css
@@ -3431,11 +3431,12 @@ div.image-social-content center.friend {
   overflow:hidden;
 }
 .thematic-postit-center {
- background-image: url('../../img/postit_center.jpg');
+ background-image: url('../../img/postit_center.png');
  height:auto;
- margin-top:-16px;
+ margin-top: 0px;
  margin-bottom:-16px;
  padding-left:20px;
  padding-right:20px;
  padding-bottom:10px;
+ padding-top: 5px;
 }
\ No newline at end of file
diff --git a/main/css/dokeos_blue/default.css b/main/css/dokeos_blue/default.css
index a3f6a60043..e878b84ee5 100755
--- a/main/css/dokeos_blue/default.css
+++ b/main/css/dokeos_blue/default.css
@@ -3421,11 +3421,12 @@ div.image-social-content center.friend {
   overflow:hidden;
 }
 .thematic-postit-center {
- background-image: url('../../img/postit_center.jpg');
+ background-image: url('../../img/postit_center.png');
  height:auto;
- margin-top:-16px;
+ margin-top: 0px;
  margin-bottom:-16px;
  padding-left:20px;
  padding-right:20px;
  padding-bottom:10px;
+ padding-top: 5px;
 }
\ No newline at end of file
diff --git a/main/css/dokeos_classic/default.css b/main/css/dokeos_classic/default.css
index 27c94d530d..69ceca21d3 100755
--- a/main/css/dokeos_classic/default.css
+++ b/main/css/dokeos_classic/default.css
@@ -3700,11 +3700,12 @@ div.image-social-content center.friend {
   overflow:hidden;
 }
 .thematic-postit-center {
- background-image: url('../../img/postit_center.jpg');
+ background-image: url('../../img/postit_center.png');
  height:auto;
- margin-top:-16px;
+ margin-top: 0px;
  margin-bottom:-16px;
  padding-left:20px;
  padding-right:20px;
  padding-bottom:10px;
+ padding-top: 5px;
 }
\ No newline at end of file
diff --git a/main/css/dokeos_classic_2D/default.css b/main/css/dokeos_classic_2D/default.css
index ddc0b3283b..3359d8215e 100755
--- a/main/css/dokeos_classic_2D/default.css
+++ b/main/css/dokeos_classic_2D/default.css
@@ -3730,11 +3730,12 @@ div.image-social-content center.friend {
   overflow:hidden;
 }
 .thematic-postit-center {
- background-image: url('../../img/postit_center.jpg');
+ background-image: url('../../img/postit_center.png');
  height:auto;
- margin-top:-16px;
+ margin-top: 0px;
  margin-bottom:-16px;
  padding-left:20px;
  padding-right:20px;
  padding-bottom:10px;
+ padding-top: 5px;
 }
\ No newline at end of file
diff --git a/main/css/empire_green/default.css b/main/css/empire_green/default.css
index f2e0dc2e63..9144152b34 100755
--- a/main/css/empire_green/default.css
+++ b/main/css/empire_green/default.css
@@ -3431,11 +3431,12 @@ div.image-social-content center.friend {
   overflow:hidden;
 }
 .thematic-postit-center {
- background-image: url('../../img/postit_center.jpg');
+ background-image: url('../../img/postit_center.png');
  height:auto;
- margin-top:-16px;
+ margin-top: 0px;
  margin-bottom:-16px;
  padding-left:20px;
  padding-right:20px;
  padding-bottom:10px;
+ padding-top: 5px;
 }
\ No newline at end of file
diff --git a/main/css/fruity_orange/default.css b/main/css/fruity_orange/default.css
index 88351c2b43..bc0ff1c689 100755
--- a/main/css/fruity_orange/default.css
+++ b/main/css/fruity_orange/default.css
@@ -3432,11 +3432,12 @@ div.image-social-content center.friend {
   overflow:hidden;
 }
 .thematic-postit-center {
- background-image: url('../../img/postit_center.jpg');
+ background-image: url('../../img/postit_center.png');
  height:auto;
- margin-top:-16px;
+ margin-top: 0px;
  margin-bottom:-16px;
  padding-left:20px;
  padding-right:20px;
  padding-bottom:10px;
+ padding-top: 5px;
 }
\ No newline at end of file
diff --git a/main/css/medical/default.css b/main/css/medical/default.css
index bcff15af3a..ef43706a55 100755
--- a/main/css/medical/default.css
+++ b/main/css/medical/default.css
@@ -3890,11 +3890,12 @@ div.image-social-content center.friend {
   overflow:hidden;
 }
 .thematic-postit-center {
- background-image: url('../../img/postit_center.jpg');
+ background-image: url('../../img/postit_center.png');
  height:auto;
- margin-top:-16px;
+ margin-top: 0px;
  margin-bottom:-16px;
  padding-left:20px;
  padding-right:20px;
  padding-bottom:10px;
+ padding-top: 5px;
 }
\ No newline at end of file
diff --git a/main/css/public_admin/default.css b/main/css/public_admin/default.css
index a1090ea55a..a10a630a06 100755
--- a/main/css/public_admin/default.css
+++ b/main/css/public_admin/default.css
@@ -3614,11 +3614,12 @@ div.image-social-content center.friend {
   overflow:hidden;
 }
 .thematic-postit-center {
- background-image: url('../../img/postit_center.jpg');
+ background-image: url('../../img/postit_center.png');
  height:auto;
- margin-top:-16px;
+ margin-top: 0px;
  margin-bottom:-16px;
  padding-left:20px;
  padding-right:20px;
  padding-bottom:10px;
+ padding-top: 5px;
 }
\ No newline at end of file
diff --git a/main/css/royal_purple/default.css b/main/css/royal_purple/default.css
index de886e10db..70be7c066d 100755
--- a/main/css/royal_purple/default.css
+++ b/main/css/royal_purple/default.css
@@ -3428,11 +3428,12 @@ div.image-social-content center.friend {
   overflow:hidden;
 }
 .thematic-postit-center {
- background-image: url('../../img/postit_center.jpg');
+ background-image: url('../../img/postit_center.png');
  height:auto;
- margin-top:-16px;
+ margin-top: 0px;
  margin-bottom:-16px;
  padding-left:20px;
  padding-right:20px;
  padding-bottom:10px;
+ padding-top: 5px;
 }
\ No newline at end of file
diff --git a/main/css/silver_line/default.css b/main/css/silver_line/default.css
index d015d2c916..bf0956cbed 100755
--- a/main/css/silver_line/default.css
+++ b/main/css/silver_line/default.css
@@ -3238,11 +3238,12 @@ div.image-social-content center.friend {
   overflow:hidden;
 }
 .thematic-postit-center {
- background-image: url('../../img/postit_center.jpg');
+ background-image: url('../../img/postit_center.png');
  height:auto;
- margin-top:-16px;
+ margin-top: 0px;
  margin-bottom:-16px;
  padding-left:20px;
  padding-right:20px;
  padding-bottom:10px;
-}
+ padding-top: 5px;
+}
\ No newline at end of file
diff --git a/main/css/sober_brown/default.css b/main/css/sober_brown/default.css
index 7e07e57117..58a45f40c6 100755
--- a/main/css/sober_brown/default.css
+++ b/main/css/sober_brown/default.css
@@ -3610,11 +3610,12 @@ div.image-social-content center.friend {
   overflow:hidden;
 }
 .thematic-postit-center {
- background-image: url('../../img/postit_center.jpg');
+ background-image: url('../../img/postit_center.png');
  height:auto;
- margin-top:-16px;
+ margin-top: 0px;
  margin-bottom:-16px;
  padding-left:20px;
  padding-right:20px;
  padding-bottom:10px;
+ padding-top: 5px;
 }
\ No newline at end of file
diff --git a/main/css/steel_grey/default.css b/main/css/steel_grey/default.css
index 7a9df97a98..b68d42b1ff 100755
--- a/main/css/steel_grey/default.css
+++ b/main/css/steel_grey/default.css
@@ -3432,11 +3432,12 @@ div.image-social-content center.friend {
   overflow:hidden;
 }
 .thematic-postit-center {
- background-image: url('../../img/postit_center.jpg');
+ background-image: url('../../img/postit_center.png');
  height:auto;
- margin-top:-16px;
+ margin-top: 0px;
  margin-bottom:-16px;
  padding-left:20px;
  padding-right:20px;
  padding-bottom:10px;
+ padding-top: 5px;
 }
\ No newline at end of file
diff --git a/main/css/tasty_olive/default.css b/main/css/tasty_olive/default.css
index 77b642ccd7..2c4a30a64a 100755
--- a/main/css/tasty_olive/default.css
+++ b/main/css/tasty_olive/default.css
@@ -3434,11 +3434,12 @@ div.image-social-content center.friend {
   overflow:hidden;
 }
 .thematic-postit-center {
- background-image: url('../../img/postit_center.jpg');
+ background-image: url('../../img/postit_center.png');
  height:auto;
- margin-top:-16px;
+ margin-top: 0px;
  margin-bottom:-16px;
  padding-left:20px;
  padding-right:20px;
  padding-bottom:10px;
+ padding-top: 5px;
 }
\ No newline at end of file
diff --git a/main/img/postit_bottom.png b/main/img/postit_bottom.png
new file mode 100644
index 0000000000..3e930f0010
Binary files /dev/null and b/main/img/postit_bottom.png differ
diff --git a/main/img/postit_center.png b/main/img/postit_center.png
new file mode 100644
index 0000000000..6e6e46b3ce
Binary files /dev/null and b/main/img/postit_center.png differ
diff --git a/main/img/postit_top.png b/main/img/postit_top.png
new file mode 100644
index 0000000000..a5ad8e4730
Binary files /dev/null and b/main/img/postit_top.png differ
diff --git a/main/inc/introductionSection.inc.php b/main/inc/introductionSection.inc.php
index 8bcf9bf1cd..8feb756a47 100755
--- a/main/inc/introductionSection.inc.php
+++ b/main/inc/introductionSection.inc.php
@@ -171,14 +171,14 @@ if (!empty($thematic_description)) {
 	if (api_is_allowed_to_edit(null,true)) {
 		$thematic_advance = '<a href="'.api_get_path(WEB_CODE_PATH).'course_description/index.php?action=edit&'.api_get_cidreq().'&description_type=8'.'">'.get_lang('ThematicAdvance').'&nbsp;'.$course_description->get_progress_porcent(false,8).'</a>';
 	}	
-	$thematic_description_html = '<td valign="bottom" width="260px"><div class="thematic-postit">
-							  <div class="thematic-postit-top"><a class="thematic-postit-head" style="" href="#">'.Display::return_icon('postit_top.jpg').'</a></div>
+	$thematic_description_html = '<td valign="top" width="260px"><div class="thematic-postit">
+							  <div class="thematic-postit-top"><a class="thematic-postit-head" style="" href="#">'.Display::return_icon('postit_top.png').'</a></div>
 							  <div class="thematic-postit-center">
 							  	<h3>'.$thematic_advance.'</h3>
 								'.$thematic_description['description_title'].'
 								<p>'.$thematic_description['description_content'].'</p>
 							  </div>
-							  <div  class="thematic-postit-bottom">'.Display::return_icon('postit_bottom.jpg').'</div>
+							  <div  class="thematic-postit-bottom">'.Display::return_icon('postit_bottom.png').'</div>
 							  </div></td>';
 }