Index: /extensions/flop_style/mainpage_categories/captify/captify.js
===================================================================
--- /extensions/flop_style/mainpage_categories/captify/captify.js	(revision 9818)
+++ /extensions/flop_style/mainpage_categories/captify/captify.js	(revision 9818)
@@ -0,0 +1,151 @@
+// jQuery Captify Plugin
+// Copyright (C) 2009 Brian Reavis
+// Licenced under the MIT license
+// $Date: 2009-11-30 [Mon, 30 Nov 2009] $
+jQuery.fn.extend({
+	captify: function(uo) {
+		var o = $.extend({
+			speedOver: 'fast',				// speed of the mouseover effect
+			speedOut: 'normal',				// speed of the mouseout effect
+			hideDelay: 500,					// how long to delay the hiding of the caption after mouseout (ms)
+			animation: 'slide',				// 'fade', 'slide', 'always-on'
+			prefix: '',						// text/html to be placed at the beginning of every caption
+			opacity: '0.45',				// opacity of the caption on mouse over
+			className: 'caption-bottom',	// the name of the CSS class to apply to the caption box         
+			position: 'bottom',				// position of the caption (top or bottom)         
+			spanWidth: '100%'				// caption span % of the image
+		}, uo);
+		$(this).each(function() {
+			var img = this;
+			$(this).load(function() {
+				if (img.hasInit){ return false; }
+				img.hasInit = true;
+				var over_caption = false;
+				var over_img = false;
+
+				//pull the label from another element if there is a 
+				//valid element id inside the rel="..." attribute, otherwise,
+				//just use the text in the alt="..." attribute.
+				var captionLabelSrc = $('#' + $(this).attr('rel'));
+				var captionLabelHTML = !captionLabelSrc.length ? $(this).attr('alt') : captionLabelSrc.html();
+				captionLabelSrc.remove();
+				var toWrap = this.parent && this.parent.tagName == 'a' ? this.parent : $(this);
+				
+				var wrapper = 
+					toWrap.wrap('<div></div>').parent()
+					.css({
+						overflow: 'hidden',
+						padding: 0,
+						fontSize: 0.1
+					})
+					.addClass('caption-wrapper')
+					.width($(this).width())
+					.height($(this).height());
+
+				//transfer the margin and border properties from the image to the wrapper
+				$.map(['top', 'right', 'bottom', 'left'], function(i) {
+					wrapper.css('margin-' + i, $(img).css('margin-' + i));
+					$.map(['style', 'width', 'color'], function(j) {
+						var key = 'border-' + i + '-' + j;
+						wrapper.css(key, $(img).css(key));
+					});
+				});
+				$(img).css({ border: '0 none' });
+
+				//create two consecutive divs, one for the semi-transparent background,
+				//and other other for the fully-opaque label
+				var caption = $('div:last', wrapper.append('<div></div>'))
+					.addClass(o.className);
+					
+				var captionContent = $('div:last', wrapper.append('<div></div>'))
+					.addClass(o.className)
+					.append(o.prefix)
+					.append(captionLabelHTML);
+
+				//override hiding from CSS, and reset all margins (which could have been inherited)
+				$('*', wrapper).css({ margin: 0 }).show();
+
+				//ensure the background is on bottom
+				var captionPositioning = jQuery.browser.msie ? 'static' : 'relative';
+				caption.css({
+					zIndex: 1,
+					position: captionPositioning,
+					opacity: o.animation == 'fade' ? 0 : o.opacity,
+					width: o.spanWidth
+				});
+
+				if (o.position == 'bottom'){
+					var vLabelOffset = 
+						parseInt(caption.css('border-top-width').replace('px', '')) + 
+						parseInt(captionContent.css('padding-top').replace('px', '')) - 1;
+					captionContent.css('paddingTop', vLabelOffset);
+				}
+				//clear the backgrounds/borders from the label, and make it fully-opaque
+				captionContent.css({
+					position: captionPositioning,
+					zIndex: 2,
+					background: 'none',
+					border: '0 none',
+					opacity: o.animation == 'fade' ? 0 : 1,
+					width: o.spanWidth
+				});
+				caption.width(captionContent.outerWidth());
+				caption.height(captionContent.height());
+
+				// represents caption margin positioning for hide and show states
+				var topBorderAdj = o.position == 'bottom' && jQuery.browser.msie ? -4 : 0;
+				var captionPosition = o.position == 'top'
+				   ? { hide: -$(img).height() - caption.outerHeight() - 1, show: -$(img).height() }
+				   : { hide: 0, show: -caption.outerHeight() + topBorderAdj };
+				
+				//pull the label up on top of the background
+				captionContent.css('marginTop', -caption.outerHeight());
+				caption.css('marginTop', captionPosition[o.animation == 'fade' || o.animation == 'always-on' ? 'show' : 'hide']);
+				
+				//function to push the caption out of view
+				var cHide = function() {
+					if (!over_caption && !over_img){
+						var props = o.animation == 'fade'
+							? { opacity: 0 }
+							: { marginTop: captionPosition.hide };
+						caption.animate(props, o.speedOut);
+						if (o.animation == 'fade'){
+							captionContent.animate({opacity: 0}, o.speedOver);
+						}
+					}
+				};
+
+				if (o.animation != 'always-on'){
+					//when the mouse is over the image
+					$(this).hover(
+						function() {
+							over_img = true;
+							if (!over_caption) {
+								var props = o.animation == 'fade'
+									? { opacity: o.opacity }
+									: { marginTop: captionPosition.show };
+								caption.animate(props, o.speedOver);
+								if (o.animation == 'fade'){
+									captionContent.animate({opacity: 1}, o.speedOver/2);
+								}
+							}
+						},
+						function() {
+							over_img = false;
+							window.setTimeout(cHide, o.hideDelay);
+						}
+					);
+					//when the mouse is over the caption on top of the image (the caption is a sibling of the image)
+					$('div', wrapper).hover(
+						function() { over_caption = true; },
+						function() { over_caption = false; window.setTimeout(cHide, o.hideDelay); }
+					);
+				}
+			});
+			//if the image has already loaded (due to being cached), force the load function to be called
+			if (this.complete || this.naturalWidth > 0) {
+				$(img).trigger('load');
+			}
+		});
+	}
+});
Index: /extensions/flop_style/mainpage_categories/captify/captify.tiny.js
===================================================================
--- /extensions/flop_style/mainpage_categories/captify/captify.tiny.js	(revision 9818)
+++ /extensions/flop_style/mainpage_categories/captify/captify.tiny.js	(revision 9818)
@@ -0,0 +1,5 @@
+jQuery.fn.extend({captify:function(n){var a=$.extend({speedOver:"fast",speedOut:"normal",hideDelay:500,animation:"slide",prefix:"",opacity:"0.45",className:"caption-bottom",position:"bottom",spanWidth:"100%"},n);$(this).each(function(){var c=this;$(this).load(function(){if(c.hasInit)return false;c.hasInit=true;var i=false,k=false,e=$("#"+$(this).attr("rel")),g=!e.length?$(this).attr("alt"):e.html();e.remove();e=this.parent&&this.parent.tagName=="a"?this.parent:$(this);var h=e.wrap("<div></div>").parent().css({overflow:"hidden",
+padding:0,fontSize:0.1}).addClass("caption-wrapper").width($(this).width()).height($(this).height());$.map(["top","right","bottom","left"],function(f){h.css("margin-"+f,$(c).css("margin-"+f));$.map(["style","width","color"],function(j){j="border-"+f+"-"+j;h.css(j,$(c).css(j))})});$(c).css({border:"0 none"});var b=$("div:last",h.append("<div></div>")).addClass(a.className),d=$("div:last",h.append("<div></div>")).addClass(a.className).append(a.prefix).append(g);$("*",h).css({margin:0}).show();g=jQuery.browser.msie?
+"static":"relative";b.css({zIndex:1,position:g,opacity:a.animation=="fade"?0:a.opacity,width:a.spanWidth});if(a.position=="bottom"){e=parseInt(b.css("border-top-width").replace("px",""))+parseInt(d.css("padding-top").replace("px",""))-1;d.css("paddingTop",e)}d.css({position:g,zIndex:2,background:"none",border:"0 none",opacity:a.animation=="fade"?0:1,width:a.spanWidth});b.width(d.outerWidth());b.height(d.height());g=a.position=="bottom"&&jQuery.browser.msie?-4:0;var l=a.position=="top"?{hide:-$(c).height()-
+b.outerHeight()-1,show:-$(c).height()}:{hide:0,show:-b.outerHeight()+g};d.css("marginTop",-b.outerHeight());b.css("marginTop",l[a.animation=="fade"||a.animation=="always-on"?"show":"hide"]);var m=function(){if(!i&&!k){var f=a.animation=="fade"?{opacity:0}:{marginTop:l.hide};b.animate(f,a.speedOut);a.animation=="fade"&&d.animate({opacity:0},a.speedOver)}};if(a.animation!="always-on"){$(this).hover(function(){k=true;if(!i){var f=a.animation=="fade"?{opacity:a.opacity}:{marginTop:l.show};b.animate(f,
+a.speedOver);a.animation=="fade"&&d.animate({opacity:1},a.speedOver/2)}},function(){k=false;window.setTimeout(m,a.hideDelay)});$("div",h).hover(function(){i=true},function(){i=false;window.setTimeout(m,a.hideDelay)})}});if(this.complete||this.naturalWidth>0)$(c).trigger("load")})}});
Index: /extensions/flop_style/mainpage_categories/captify/license.txt
===================================================================
--- /extensions/flop_style/mainpage_categories/captify/license.txt	(revision 9818)
+++ /extensions/flop_style/mainpage_categories/captify/license.txt	(revision 9818)
@@ -0,0 +1,21 @@
+The MIT License
+
+Copyright (c) 2008 Brian Reavis
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
Index: /extensions/flop_style/mainpage_categories/captify_mini.css
===================================================================
--- /extensions/flop_style/mainpage_categories/captify_mini.css	(revision 9818)
+++ /extensions/flop_style/mainpage_categories/captify_mini.css	(revision 9818)
@@ -0,0 +1,109 @@
+/* caption styling */
+
+.caption-top, .caption-bottom {
+	color: #ffffff;	
+	padding: 1.2em;	
+	font-weight: bold;
+	font-size: 13px;	
+	font-family: arial;	
+	cursor: default;
+	background: #000;
+	text-shadow: 1px 1px 0 #202020;
+}
+.caption-top {
+}
+.caption-bottom {
+}
+.caption a, .caption a {
+	border: 0 none;
+	text-decoration: none;
+	background: #000000;
+	padding: 0.3em;
+}
+.caption a:hover, .caption a:hover {
+	background: #202020;
+}
+.caption-wrapper {
+	float: left;
+}
+br.c { clear: both; }
+
+
+/*catégories*/
+.content .thumbnailCategories li, .content .thumbnailCategories li:hover {    background: none;
+}
+.wrap1 {
+	display: inline-block;
+	margin: 0 7px 5px;
+	text-align: center;
+	vertical-align: top;
+}
+#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;
+}
+
+#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;
+}
Index: /extensions/flop_style/mainpage_categories/captify_mini.tpl
===================================================================
--- /extensions/flop_style/mainpage_categories/captify_mini.tpl	(revision 9818)
+++ /extensions/flop_style/mainpage_categories/captify_mini.tpl	(revision 9818)
@@ -0,0 +1,42 @@
+{combine_css path="template-extension/flop_style/mainpage_categories/captify_mini.css"}
+{combine_script id="jquery.captify" load="header" path="template-extension/flop_style/mainpage_categories/captify/captify.tiny.js"}
+{html_head}
+  {literal}
+<script type="text/javascript">
+$(function(){
+	$('img.captify').captify({
+		// all of these options are... optional
+		// ---
+		// speed of the mouseover effect
+		speedOver: 'fast',
+		// speed of the mouseout effect
+		speedOut: 'normal',
+		// how long to delay the hiding of the caption after mouseout (ms)
+		hideDelay: 500,	
+		// 'fade', 'slide', 'always-on'
+		animation: 'slide',		
+		// text/html to be placed at the beginning of every caption
+		prefix: '',		
+		// opacity of the caption on mouse over
+		opacity: '0.7',					
+		// the name of the CSS class to apply to the caption box
+		className: 'caption-bottom',	
+		// position of the caption (top or bottom)
+		position: 'bottom',
+		// caption span % of the image
+		spanWidth: '100%'
+	});
+});
+</script>
+  {/literal}
+{/html_head}
+
+<ul class="thumbnailCategories">
+{foreach from=$category_thumbnails item=cat}
+  <li class="{cycle values="cat_1,cat_2,cat_3,cat_4"}" >
+			<span class="wrap1"><a href="{$cat.URL}">
+				<img src="{$cat.TN_SRC}" class="captify" alt="{$cat.NAME|truncate:38:" [...]"}" title="{$cat.NAME|@replace:'"':' '} - {'display this album'|@translate}" >
+			</a></span>
+	</li>
+{/foreach}
+</ul>
Index: /extensions/flop_style/mainpage_categories/picpile_cat.tpl
===================================================================
--- /extensions/flop_style/mainpage_categories/picpile_cat.tpl	(revision 9817)
+++ /extensions/flop_style/mainpage_categories/picpile_cat.tpl	(revision 9818)
@@ -2,7 +2,11 @@
 {if $themeconf.name == "Sylvia"}
 {html_head}
-  {literal}#theCategoryPage .content {
+  {literal}
+  <style>
+  #theCategoryPage .content {
       margin: 21px 10px 0 290px !important;
-  }{/literal}
+  }
+	</style>
+  {/literal}
 {/html_head}
 {/if}
Index: /extensions/flop_style/mainpage_categories/polaroid.css
===================================================================
--- /extensions/flop_style/mainpage_categories/polaroid.css	(revision 9818)
+++ /extensions/flop_style/mainpage_categories/polaroid.css	(revision 9818)
@@ -0,0 +1,75 @@
+/* from http://www.zurb.com/playground/css3-polaroids thx ! */
+.content {
+	display:block;
+    position: relative;
+    z-index: 1;}
+ul.polaroids {
+	list-style: none;
+	overflow: visible;
+	width: 100%;
+	padding-top: 20px;
+	padding-right: 0;
+	padding-bottom: 0;
+	padding-left: 0;
+	margin: 0px;
+}
+ul.polaroids 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.polaroids img {
+    display: block;
+    margin-bottom: 12px;
+    width: 190px;
+}
+ul.polaroids a:after {
+    content: attr(title);
+}
+ul.polaroids li:nth-child(2n) a {
+    -moz-transform: rotate(2deg);
+}
+ul.polaroids li:nth-child(3n) a {
+    -moz-transform: none;
+    position: relative;
+    top: -5px;
+}
+ul.polaroids li:nth-child(5n) a {
+    -moz-transform: rotate(5deg);
+    position: relative;
+    right: 5px;
+}
+ul.polaroids 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.polaroids li.messy a {
+    -moz-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;
+}
Index: /extensions/flop_style/mainpage_categories/polaroid.tpl
===================================================================
--- /extensions/flop_style/mainpage_categories/polaroid.tpl	(revision 9818)
+++ /extensions/flop_style/mainpage_categories/polaroid.tpl	(revision 9818)
@@ -0,0 +1,12 @@
+{combine_css path="template-extension/flop_style/mainpage_categories/polaroid.css"}
+
+<ul class="polaroids">
+{foreach from=$category_thumbnails item=cat}
+  <li>
+			<a href="{$cat.URL}" title="{$cat.NAME|truncate:38:" [...]"|@replace:'"':' '}">
+				<img src="{$cat.TN_SRC}"  alt="{$cat.TN_ALT}" title="{$cat.NAME|@replace:'"':' '} - {'display this album'|@translate}" >
+			</a>
+	</li>
+{/foreach}
+</ul>
+<br style="clear:both" />
Index: /extensions/flop_style/thumbnails/polaroid.css
===================================================================
--- /extensions/flop_style/thumbnails/polaroid.css	(revision 9818)
+++ /extensions/flop_style/thumbnails/polaroid.css	(revision 9818)
@@ -0,0 +1,75 @@
+/* from http://www.zurb.com/playground/css3-polaroids thx ! */
+.content {
+	display:block;
+    position: relative;
+    z-index: 1;}
+ul.polaroids {
+	list-style: none;
+	overflow: visible;
+	width: 100%;
+	padding-top: 20px;
+	padding-right: 0;
+	padding-bottom: 0;
+	padding-left: 0;
+	margin: 0px;
+}
+ul.polaroids 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.polaroids img {
+    display: block;
+    margin-bottom: 12px;
+    width: 190px;
+}
+ul.polaroids a:after {
+    content: attr(title);
+}
+ul.polaroids li:nth-child(2n) a {
+    -moz-transform: rotate(2deg);
+}
+ul.polaroids li:nth-child(3n) a {
+    -moz-transform: none;
+    position: relative;
+    top: -5px;
+}
+ul.polaroids li:nth-child(5n) a {
+    -moz-transform: rotate(5deg);
+    position: relative;
+    right: 5px;
+}
+ul.polaroids 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.polaroids li.messy a {
+    -moz-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;
+}
Index: /extensions/flop_style/thumbnails/polaroid.tpl
===================================================================
--- /extensions/flop_style/thumbnails/polaroid.tpl	(revision 9818)
+++ /extensions/flop_style/thumbnails/polaroid.tpl	(revision 9818)
@@ -0,0 +1,9 @@
+{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}">
+				<img src="{$thumbnail.TN_SRC}"  alt="{$thumbnail.TN_ALT}" title="{$thumbnail.TN_TITLE}" >
+			</a>
+	</li>
+{/foreach}{/strip}
+{/if}
