Index: /extensions/flop_style/mainpage_categories/medium_cat.css
===================================================================
--- /extensions/flop_style/mainpage_categories/medium_cat.css	(revision 9720)
+++ /extensions/flop_style/mainpage_categories/medium_cat.css	(revision 9720)
@@ -0,0 +1,68 @@
+/*catégories*/
+
+
+#content ul.thumbnailCategories li {
+	width:160px;
+	height:205px;
+	margin: 5px;
+	padding: 5px;
+}
+
+#content div.thumbnailCategory {
+	text-align:center;
+	width:100%;
+	height:100%;
+	margin: 0;
+	padding: 0;
+	vertical-align:middle;
+}
+
+#content div.thumbnailCategory div.illustration  {
+	width:auto;
+	height:auto;
+/*height:135px;*/
+	text-align:center;
+	overflow: inherit;
+	float:none;
+	margin: 0;
+	padding: 0;
+}
+#content div.thumbnailCategory div.description {
+	width:auto;
+	height:auto;
+	text-align:center;
+	overflow:inherit;
+    float:none;
+    overflow: auto;
+
+}
+/* --------------Hack-------------*/
+#content div.thumbnailCategory {
+	display: table-cell;
+	text-align: center;
+	vertical-align: middle;
+	width:160px;
+	height:205px;
+}
+#content div.thumbnailCategory * {
+	vertical-align: middle;
+}
+/*\*//*/
+.wraptocenter {
+    display: block;
+}
+.wraptocenter span {
+    display: inline-block;
+    height: 100%;
+    width: 1px;
+}
+/**/
+/* --------------fin Hack-------------*/
+
+#content div.thumbnailCategory div.description h3 {
+text-align:center;
+}
+
+.content div.thumbnailCategory {
+/*background-image:none;*/
+}
Index: /extensions/flop_style/mainpage_categories/medium_cat.tpl
===================================================================
--- /extensions/flop_style/mainpage_categories/medium_cat.tpl	(revision 9720)
+++ /extensions/flop_style/mainpage_categories/medium_cat.tpl	(revision 9720)
@@ -0,0 +1,29 @@
+{combine_css path="template-extension/flop_style/mainpage_categories/medium_cat.css"}
+
+<ul class="thumbnailCategories">
+{foreach from=$category_thumbnails item=cat}
+  <li class="{cycle values="cat_1,cat_2,cat_3,cat_4"}" >
+		<div class="thumbnailCategory">
+			<div class="illustration">
+			<a href="{$cat.URL}">
+				<img src="{$cat.TN_SRC}" alt="{$cat.TN_ALT}" title="{$cat.NAME|@replace:'"':' '} - {'display this album'|@translate}">
+			</a>
+			</div>
+			<div class="description">
+				<h3>
+					<a href="{$cat.URL}">{$cat.NAME|truncate:38:" [...]"}</a>
+					{if !empty($cat.icon_ts)}
+					<img title="{$cat.icon_ts.TITLE}" src="{$ROOT_URL}{$themeconf.icon_dir}/recent{if $cat.icon_ts.IS_CHILD_DATE}_by_child{/if}.png" alt="(!)">
+					{/if}
+				</h3>
+		<div class="text">
+				{if isset($cat.INFO_DATES) }
+				<p class="dates">{$cat.INFO_DATES}</p>
+				{/if}
+				<p class="Nb_images">{$cat.CAPTION_NB_IMAGES}</p>
+		</div>
+			</div>
+		</div>
+	</li>
+{/foreach}
+</ul>
Index: /extensions/flop_style/mainpage_categories/picpile_cat.css
===================================================================
--- /extensions/flop_style/mainpage_categories/picpile_cat.css	(revision 9720)
+++ /extensions/flop_style/mainpage_categories/picpile_cat.css	(revision 9720)
@@ -0,0 +1,105 @@
+.thumbnailCategories {
+	padding-left:auto;
+	padding-right:auto;
+	width:auto;
+	padding: 5px;
+	list-style: none outside none;
+	text-align: center;
+}
+.thumbnailCategories li {
+	width: auto;
+	float: left;
+	display:inline;
+	text-align:center;
+}
+.wrap1 {
+	display: inline-block;
+	margin: 0 7px 5px;
+	text-align: center;
+	vertical-align: top;
+}
+.albumHolder {
+	float: left;
+	margin: 15px 22px 15px 0;
+	position: relative;
+	width: 170px;
+}
+.picRotated {
+	background: url("img/album_front_bg.png") no-repeat scroll 0 0 transparent;
+	height: 138px;
+	left: -4px;
+	position: absolute;
+	top: -4px;
+	width: 178px;
+	z-index: 1;
+	margin: 0;
+	padding: 0;
+}
+.album {
+	-moz-box-shadow: 0 0 2px black;
+	background-color: #F5F5F5;
+	border: 1px solid white;
+	padding: 4px;
+	position: relative;
+	text-decoration: none;
+	z-index: 10;
+	margin: 0;
+}
+.albumTitle {
+	-moz-border-radius: 10px 10px 10px 10px;
+	border-bottom-left-radius:10px 10px;
+	border-bottom-right-radius:10px 10px;
+	border-top-left-radius:10px 10px;
+	border-top-right-radius:10px 10px;
+}
+.albumTitle {
+	-webkit-box-shadow:black 0 0 4px;
+	background-color:#3C3C3C;
+	box-shadow:black 0 0 4px;
+	color: #DDDDDD;
+	font-size: 0.825em;
+	margin: 10px auto 0;
+	overflow: hidden;
+	padding: 4px 6px;
+	text-align: center;
+	text-shadow: 0 0 1px black;
+	white-space: nowrap;
+	width: 120px;
+}
+.highlight {
+	background: url("img/pic_highlight.png") no-repeat scroll left top transparent;
+	display: block;
+	height: 100px;
+	left: 0;
+	position: absolute;
+	top: 0;
+	width: 100px;
+	z-index: 10;
+	margin: 0;
+	padding: 0;
+}
+.album img {
+	position: relative;
+	z-index: 1;
+}
+.album img, .pic img {
+	display: block;
+}
+a img {
+	border: medium none;
+}
+.albumCnt {
+	-moz-border-radius: 5px 5px 5px 5px;
+	background-color: #F5F5F5;
+	color: #808080;
+	font-size: 10px;
+	line-height: 1.25em;
+	padding: 5px 10px 3px;
+	position: absolute;
+	right: 10px;
+	top: 0;
+	z-index: 20;
+}
+.clear {
+	clear: both;
+}
Index: /extensions/flop_style/mainpage_categories/picpile_cat.tpl
===================================================================
--- /extensions/flop_style/mainpage_categories/picpile_cat.tpl	(revision 9720)
+++ /extensions/flop_style/mainpage_categories/picpile_cat.tpl	(revision 9720)
@@ -0,0 +1,40 @@
+{combine_css path="template-extension/flop_style/mainpage_categories/picpile_cat.css"}
+<ul class="thumbnailCategories">
+  {foreach from=$category_thumbnails item=cat}
+  <li>
+  <span class="wrap1"><div class="albumHolder">
+    <div class="picRotated"></div>
+    <div class="album"> <a class="ajax" href="{$cat.URL}"> <span title="Browse Album" class="highlight"></span> <img width="160" height="120" title="{$cat.NAME|@replace:'"':' '} - {'display this album'|@translate}" alt="{$cat.TN_ALT}" src="{$cat.TN_SRC}"> <span title="Contains {$cat.CAPTION_NB_IMAGES} images" class="albumCnt">{$cat.CAPTION_NB_IMAGES}</span> </a> </div>
+    <div title="{$cat.NAME}" class="albumTitle">{$cat.NAME}</div>
+    <div class="clear"></div>
+  </div>
+  {*
+		<div class="thumbnailCategory">
+			<div class="illustration">
+			<a href="{$cat.URL}">
+				<img src="{$cat.TN_SRC}" alt="{$cat.TN_ALT}" title="{$cat.NAME|@replace:'"':' '} - {'display this album'|@translate}">
+			</a>
+			</div>
+			<div class="description">
+				<h3>
+					<a href="{$cat.URL}">{$cat.NAME}</a>
+					{if !empty($cat.icon_ts)}
+					<img title="{$cat.icon_ts.TITLE}" src="{$ROOT_URL}{$themeconf.icon_dir}/recent{if $cat.icon_ts.IS_CHILD_DATE}_by_child{/if}.png" alt="(!)">
+					{/if}
+				</h3>
+		<div class="text">
+				{if isset($cat.INFO_DATES) }
+				<p class="dates">{$cat.INFO_DATES}</p>
+				{/if}
+				<p class="Nb_images">{$cat.CAPTION_NB_IMAGES}</p>
+				{if not empty($cat.DESCRIPTION)}
+				<p>{$cat.DESCRIPTION}</p>
+				{/if}
+		</div>
+			</div>
+		</div>
+  *}
+  </span>
+  </li>
+  {/foreach}
+</ul>
