Index: /extensions/flop_style/mainpage_categories/medium_cat.css
===================================================================
--- /extensions/flop_style/mainpage_categories/medium_cat.css	(revision 9820)
+++ /extensions/flop_style/mainpage_categories/medium_cat.css	(revision 9821)
@@ -1,11 +1,20 @@
 /*catégories*/
-
-
-#content ul.thumbnailCategories li {
-	width:160px;
-	height:205px;
+#content .thumbnailCategories {
+	padding-left:auto;
+	padding-right:auto;
+	padding: 5px;
+	list-style: none outside none;
+	text-align: center;
+}
+#content .thumbnailCategories li {
+	width: auto;
+	float: none;
+	display:inline;
+	text-align:center;
+	margin-left:10px;
 	margin: 5px;
 	padding: 5px;
 }
+
 
 #content div.thumbnailCategory {
@@ -13,5 +22,5 @@
 	width:100%;
 	height:100%;
-	margin: 0;
+	margin: 0 auto;
 	padding: 0;
 	vertical-align:middle;
@@ -64,5 +73,5 @@
 }
 
-.content div.thumbnailCategory {
-/*background-image:none;*/
+#content div.thumbnailCategory div.illustration img {
+    height: 96px;
 }
Index: /extensions/flop_style/mainpage_categories/polaroid.css
===================================================================
--- /extensions/flop_style/mainpage_categories/polaroid.css	(revision 9820)
+++ /extensions/flop_style/mainpage_categories/polaroid.css	(revision 9821)
@@ -2,6 +2,7 @@
 .content {
 	display:block;
-    position: relative;
-    z-index: 1;}
+	position: relative;
+	z-index: 1;
+}
 ul.polaroids {
 	list-style: none;
@@ -15,61 +16,82 @@
 }
 ul.polaroids li {
-    display: inline;
+	display: inline;
 }
 ul.polaroids a {
-    -moz-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
-    -moz-transform: rotate(-2deg);
-    background: none repeat scroll 0 0 #FFFFFF;
-    color: #333333;
-    display: inline;
-    float: left;
-    font-family: "Marker Felt",sans-serif;
-    font-size: 18px;
-    margin: 0 0 27px 30px;
-    padding: 10px 10px 15px;
-    text-align: center;
-    text-decoration: none;
-    width: auto;
+	-moz-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
+	-moz-transform: rotate(-2deg);
+	-webkit-transition: -webkit-transform .15s linear;
+	-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
+	-webkit-transform: rotate(-2deg);
+	-o-transition: -webkit-transform .15s linear;
+	-o-box-shadow: 0 3px 6px rgba(0,0,0,.25);
+	-o-transform:rotate(-2deg);
+	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
+  text-shadow: 0 1px 1px #CCC;
+	background: none repeat scroll 0 0 #FFFFFF;
+	color: #333333;
+	display: inline;
+	float: left;
+	font-family: "Marker Felt", sans-serif;
+	font-size: 18px;
+	margin: 0 0 27px 30px;
+	padding: 10px 10px 15px;
+	text-align: center;
+	text-decoration: none;
+	width: auto;
+	border:none;
 }
 ul.polaroids img {
-    display: block;
-    margin-bottom: 12px;
-    width: 190px;
+	display: block;
+	margin-bottom: 12px;
+	width: 190px;
 }
 ul.polaroids a:after {
-    content: attr(title);
+	content: attr(title);
 }
 ul.polaroids li:nth-child(2n) a {
-    -moz-transform: rotate(2deg);
+	-moz-transform: rotate(2deg);
+	-webkit-transform: rotate(2deg);
+	-o-transform:rotate(2deg);
 }
 ul.polaroids li:nth-child(3n) a {
-    -moz-transform: none;
-    position: relative;
-    top: -5px;
+	-moz-transform: none;
+	-webkit-transform: none;
+	-o-transform:none;
+	position: relative;
+	top: -5px;
 }
 ul.polaroids li:nth-child(5n) a {
-    -moz-transform: rotate(5deg);
-    position: relative;
-    right: 5px;
+	-moz-transform: rotate(5deg);
+	-webkit-transform: rotate(5deg);
+	-o-transform: rotate(5deg);
+	position: relative;
+	right: 5px;
 }
 ul.polaroids li:nth-child(8n) a {
-    position: relative;
-    right: 5px;
-    top: 8px;
+	position: relative;
+	right: 5px;
+	top: 8px;
 }
 ul.polaroids li:nth-child(11n) a {
-    left: -5px;
-    position: relative;
-    top: 3px;
+	left: -5px;
+	position: relative;
+	top: 3px;
 }
 ul.polaroids li.messy a {
-    -moz-transform: rotate(-5deg);
-    margin-left: 160px;
-    margin-top: -375px;
+	-moz-transform: rotate(-5deg);
+	-webkit-transform: rotate(-5deg);
+	-o-transform: rotate(-5deg);
+	margin-left: 160px;
+	margin-top: -375px;
 }
 ul.polaroids li a:hover {
-    -moz-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5);
-    -moz-transform: scale(1.25);
-    position: relative;
-    z-index: 5;
+	-moz-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5);
+	-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5);
+	-moz-transform: scale(1.25);
+	-webkit-transform: scale(1.25);
+	-o-transform:  scale(1.25);
+	position: relative;
+	z-index: 5;
+	border:none;
 }
Index: /extensions/flop_style/mainpage_categories/polaroid.tpl
===================================================================
--- /extensions/flop_style/mainpage_categories/polaroid.tpl	(revision 9820)
+++ /extensions/flop_style/mainpage_categories/polaroid.tpl	(revision 9821)
@@ -4,5 +4,5 @@
 {foreach from=$category_thumbnails item=cat}
   <li>
-			<a href="{$cat.URL}" title="{$cat.NAME|truncate:38:" [...]"|@replace:'"':' '}">
+			<a href="{$cat.URL}" title="{$cat.NAME|truncate:20:" [...]"|@replace:'"':' '}">
 				<img src="{$cat.TN_SRC}"  alt="{$cat.TN_ALT}" title="{$cat.NAME|@replace:'"':' '} - {'display this album'|@translate}" >
 			</a>
Index: /extensions/flop_style/thumbnails/polaroid.css
===================================================================
--- /extensions/flop_style/thumbnails/polaroid.css	(revision 9820)
+++ /extensions/flop_style/thumbnails/polaroid.css	(revision 9821)
@@ -2,7 +2,11 @@
 .content {
 	display:block;
-    position: relative;
-    z-index: 1;}
-ul.polaroids {
+	position: relative;
+	z-index: 1;
+}
+.navigationBar {
+	clear:both;
+}
+ul.thumbnails {
 	list-style: none;
 	overflow: visible;
@@ -14,62 +18,84 @@
 	margin: 0px;
 }
-ul.polaroids li {
-    display: inline;
+ul.thumbnails li {
+	display: inline;
 }
-ul.polaroids a {
-    -moz-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
-    -moz-transform: rotate(-2deg);
-    background: none repeat scroll 0 0 #FFFFFF;
-    color: #333333;
-    display: inline;
-    float: left;
-    font-family: "Marker Felt",sans-serif;
-    font-size: 18px;
-    margin: 0 0 27px 30px;
-    padding: 10px 10px 15px;
-    text-align: center;
-    text-decoration: none;
-    width: auto;
+ul.thumbnails a {
+	-moz-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
+	-moz-transform: rotate(-2deg);
+	-webkit-transition: -webkit-transform .15s linear;
+	-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
+	-webkit-transform: rotate(-2deg);
+	-o-transition: -webkit-transform .15s linear;
+	-o-box-shadow: 0 3px 6px rgba(0,0,0,.25);
+	-o-transform:rotate(-2deg);
+	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
+  text-shadow: 0 1px 1px #CCC;
+	background: none repeat scroll 0 0 #FFFFFF;
+	color: #333333;
+	display: inline;
+	float: left;
+	font-family: "Marker Felt", sans-serif;
+	font-size: 18px;
+	margin: 0 0 27px 30px;
+	padding: 10px 10px 15px;
+	text-align: center;
+	text-decoration: none;
+	width: auto;
+	overflow:hidden;
+	border:none;
 }
-ul.polaroids img {
-    display: block;
-    margin-bottom: 12px;
-    width: 190px;
+ul.thumbnails img {
+	display: block;
+	margin-bottom: 12px;
+	width: 118px;
 }
-ul.polaroids a:after {
-    content: attr(title);
+ul.thumbnails a:after {
+	content: attr(title);
 }
-ul.polaroids li:nth-child(2n) a {
-    -moz-transform: rotate(2deg);
+ul.thumbnails li:nth-child(2n) a {
+	-moz-transform: rotate(2deg);
+	-webkit-transform: rotate(2deg);
+	-o-transform:rotate(2deg);
 }
-ul.polaroids li:nth-child(3n) a {
-    -moz-transform: none;
-    position: relative;
-    top: -5px;
+ul.thumbnails li:nth-child(3n) a {
+	-moz-transform: none;
+	-webkit-transform: none;
+	-o-transform:none;
+	position: relative;
+	top: -5px;
 }
-ul.polaroids li:nth-child(5n) a {
-    -moz-transform: rotate(5deg);
-    position: relative;
-    right: 5px;
+ul.thumbnails li:nth-child(5n) a {
+	-moz-transform: rotate(5deg);
+	-webkit-transform: rotate(5deg);
+	-o-transform: rotate(5deg);
+	position: relative;
+	right: 5px;
 }
-ul.polaroids li:nth-child(8n) a {
-    position: relative;
-    right: 5px;
-    top: 8px;
+ul.thumbnails li:nth-child(8n) a {
+	position: relative;
+	right: 5px;
+	top: 8px;
 }
-ul.polaroids li:nth-child(11n) a {
-    left: -5px;
-    position: relative;
-    top: 3px;
+ul.thumbnails li:nth-child(11n) a {
+	left: -5px;
+	position: relative;
+	top: 3px;
 }
-ul.polaroids li.messy a {
-    -moz-transform: rotate(-5deg);
-    margin-left: 160px;
-    margin-top: -375px;
+ul.thumbnails li.messy a {
+	-moz-transform: rotate(-5deg);
+	-webkit-transform: rotate(-5deg);
+	-o-transform: rotate(-5deg);
+	margin-left: 160px;
+	margin-top: -375px;
 }
-ul.polaroids li a:hover {
-    -moz-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5);
-    -moz-transform: scale(1.25);
-    position: relative;
-    z-index: 5;
+ul.thumbnails li a:hover {
+	-moz-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5);
+	-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5);
+	-moz-transform: scale(1.25);
+	-webkit-transform: scale(1.25);
+	-o-transform:  scale(1.25);
+	position: relative;
+	z-index: 5;
+	border:none;
 }
Index: /extensions/flop_style/thumbnails/polaroid.tpl
===================================================================
--- /extensions/flop_style/thumbnails/polaroid.tpl	(revision 9820)
+++ /extensions/flop_style/thumbnails/polaroid.tpl	(revision 9821)
@@ -1,6 +1,8 @@
+{combine_css path="template-extension/flop_style/thumbnails/polaroid.css"}
+
 {if !empty($thumbnails)}
 {strip}{foreach from=$thumbnails item=thumbnail}
 	<li>
-			<a href="{$thumbnail.URL}" title="{if isset($thumbnail.NAME)}{$thumbnail.NAME}{elseif}{$thumbnail.TN_TITLE}{/if}">
+			<a href="{$thumbnail.URL}" title="{if isset($thumbnail.NAME)}{$thumbnail.NAME|truncate:11:" [...]"|@replace:'"':' '}{/if}">
 				<img src="{$thumbnail.TN_SRC}"  alt="{$thumbnail.TN_ALT}" title="{$thumbnail.TN_TITLE}" >
 			</a>
