Change all #content by .content in css files.

In tpl files, id="content" stay here for backward compatibilities.
Add some plugins triggers in index.tpl and picture.tpl.

git-svn-id: http://piwigo.org/svn/trunk@2352 68402e56-0260-453c-a942-63ccdbb3a9ee

32 files changed, 195 insertions, 191 deletions

diff --git a/template/yoga/about.tpl b/template/yoga/about.tpl
index 398f266f8..62b51839d 100644
--- a/template/yoga/about.tpl
+++ b/template/yoga/about.tpl
@@ -1,5 +1,5 @@
 {* $Id$ *}
-<div id="content">
+<div id="content" class="content">
   <div class="titrePage">
     <ul class="categoryActions">
       <li>
diff --git a/template/yoga/admin.tpl b/template/yoga/admin.tpl
index 79d27e8fe..188888951 100644
--- a/template/yoga/admin.tpl
+++ b/template/yoga/admin.tpl
@@ -78,7 +78,7 @@
   </dl>
 </div> <!-- menubar -->
 
-<div id="content">
+<div id="content" class="content">
   {if isset($errors)}
   <div class="errors">
     <ul>
diff --git a/template/yoga/comments.tpl b/template/yoga/comments.tpl
index e2f8777c2..2e2beaf34 100644
--- a/template/yoga/comments.tpl
+++ b/template/yoga/comments.tpl
@@ -1,5 +1,5 @@
 {* $Id$ *}
-<div id="content">
+<div id="content" class="content">
 
   <div class="titrePage">
     <ul class="categoryActions">
diff --git a/template/yoga/content.css b/template/yoga/content.css
index 2d3af7b9e..05e246069 100644
--- a/template/yoga/content.css
+++ b/template/yoga/content.css
@@ -1,56 +1,56 @@
 /* $Id$ */
-#content {
+.content {
     margin-right: 1em;
     margin-bottom: 1em; /* when it's longer than menu bar */
 }
 
-BODY#theCommentsPage #content,
-BODY#theUploadPage #content,
-BODY#theRegisterPage #content,
-BODY#theIdentificationPage #content,
-BODY#theProfilePage #content,
-BODY#theSearchPage #content,
-BODY#theAboutPage #content,
-BODY#thePopuphelpPage #content,
-BODY#thePasswordPage #content,
-BODY#theNotificationPage #content,
-BODY#theTagsPage #content,
-BODY#theNBMPage #content
+BODY#theCommentsPage .content,
+BODY#theUploadPage .content,
+BODY#theRegisterPage .content,
+BODY#theIdentificationPage .content,
+BODY#theProfilePage .content,
+BODY#theSearchPage .content,
+BODY#theAboutPage .content,
+BODY#thePopuphelpPage .content,
+BODY#thePasswordPage .content,
+BODY#theNotificationPage .content,
+BODY#theTagsPage .content,
+BODY#theNBMPage .content
 {
   margin: 1em;
 }
 
-#content H3 {
+.content H3 {
     margin-bottom: 1ex;
 }
 
-#content H2 { margin-bottom: 3px;} /*<- for IE otherwise calendar select is displaced to middle of page*/
+.content H2 { margin-bottom: 3px;} /*<- for IE otherwise calendar select is displaced to middle of page*/
 
-#content H3 {
+.content H3 {
     text-align: center;
 }
 
-#content .navigationBar, #content .additional_info {
+.content .navigationBar, .content .additional_info {
     margin: 10px 0;
     text-align: center;
 }
 
-#content .pageNumberSelected {
+.content .pageNumberSelected {
 	font-style: italic;
 	font-weight: bold;
 }
 
-#content .additional_info {
+.content .additional_info {
     font-size: 110%;
 }
 
-#content FORM {
+.content FORM {
     text-align: left;
 }
 
 /* content defaults */
-#content DL, DD { margin: 10px; }
-#content DT {
+.content DL, DD { margin: 10px; }
+.content DT {
   margin-bottom: 5px;
   font-style: italic;
   font-size: 110%;
@@ -66,66 +66,66 @@ UL.categoryActions {
   text-align: center;
 }
 
-#content DIV.titrePage UL.categoryActions {
+.content DIV.titrePage UL.categoryActions {
   float: right;
   text-align: center;
 }
 
-#content DIV.titrePage {
+.content DIV.titrePage {
   padding: 0 0 3px;
 }
 
-#content UL.categoryActions LI {
+.content UL.categoryActions LI {
   display: inline;
 }
 
-#content UL.categoryActions A IMG, UL.categoryActions A {
+.content UL.categoryActions A IMG, UL.categoryActions A {
   border: none;
   margin-bottom: -5px;
 }
 
 /* User comments */
 
-#content DIV#comments {
+.content DIV#comments {
   padding-left: 5px;
   padding-right: 5px;
 }
-#content DIV.comment {
+.content DIV.comment {
   margin: 0 0 0.5em 0;
   padding: 0;
   overflow: hidden; /* these 2 lines keep the floating child in the DIV */
   width: 100%;	    /* don't ask why. It's a very usefull trick         */
 }
 
-#content DIV.comment A.illustration {
+.content DIV.comment A.illustration {
   display: block;
   float: left;
   margin: 0.5em 0 0 0.5em;
 }
 
-#content DIV.comment P.commentHeader {
+.content DIV.comment P.commentHeader {
   text-align: right;
   margin: 0.5em 0.5em 0 0;
 }
 
-#content DIV.comment UL.actions {
+.content DIV.comment UL.actions {
   text-align: center;
   margin: 0.2em;
 }
 
-#content DIV.comment BLOCKQUOTE {
+.content DIV.comment BLOCKQUOTE {
   margin-right: 0.5em;
   overflow: visible; /*avoid a very strange margin behaviour (all browsers) */
 }
 
 /* begin chronology/calendar elements*/
-#content DIV.calendarViews {
+.content DIV.calendarViews {
   display: block;
   float: right;
   margin: 2px 0 0;
 }
 
-#content DIV.calendarBar { margin: 8px 4px; }
+.content DIV.calendarBar { margin: 8px 4px; }
 
 SPAN.calItem, SPAN.calItemEmpty {
   font-weight: bold;
@@ -134,7 +134,7 @@ SPAN.calItem, SPAN.calItemEmpty {
 
 SPAN.calItem A { border:0 }
 
-#content DIV.calendarCalBar {
+.content DIV.calendarCalBar {
   margin: 10px 10px;
   text-align: left;
 }
@@ -195,7 +195,7 @@ DIV.calImg {
 }
 
 /* Category thumbnails on main page, CSS code inspired from MOD subcatify */
-#content UL.thumbnailCategories {
+.content UL.thumbnailCategories {
   margin: 0;
   padding: 0;
   list-style: none;
@@ -204,25 +204,25 @@ DIV.calImg {
   width: 100%;
 }
 
-#content UL.thumbnailCategories LI {
+.content UL.thumbnailCategories LI {
   margin:0;
   padding:0;
   float:left;
 }
 
-#content DIV.thumbnailCategory {
+.content DIV.thumbnailCategory {
   display:block;
   padding: 2px 0px 0px 2px;
   margin: 5px;
 }
 
-#content DIV.thumbnailCategory DIV.description {
+.content DIV.thumbnailCategory DIV.description {
   font-size: 90%;
   overflow: auto;
   /*width: inherit;*/
 }
 
-#content DIV.thumbnailCategory DIV.description H3 {
+.content DIV.thumbnailCategory DIV.description H3 {
   text-align: left;
   background: transparent;
   margin: 0;
@@ -230,11 +230,11 @@ DIV.calImg {
   font-size: 120%;
 }
 
-#content DIV.thumbnailCategory DIV.description P {
+.content DIV.thumbnailCategory DIV.description P {
   margin: 0;
 }
 
-#content DIV.thumbnailCategory DIV.illustration {
+.content DIV.thumbnailCategory DIV.illustration {
   text-align: left;
   margin: 2px 0 0 2px;
   float: left;
diff --git a/template/yoga/default-colors.css b/template/yoga/default-colors.css
index ea65cb72a..1534e4f11 100644
--- a/template/yoga/default-colors.css
+++ b/template/yoga/default-colors.css
@@ -7,7 +7,7 @@
 }
 
 /* So that non-links are slightly greyed out */
-#content .navigationBar, SPAN.calItemEmpty, TD.calDayCellEmpty {
+.content .navigationBar, SPAN.calItemEmpty, TD.calDayCellEmpty {
 	color: #b0b0b0;
 }
 
diff --git a/template/yoga/default-layout.css b/template/yoga/default-layout.css
index d7e8fc865..c6b229481 100644
--- a/template/yoga/default-layout.css
+++ b/template/yoga/default-layout.css
@@ -254,13 +254,13 @@ BODY#thePopuphelpPage #copyright {
   display: none;
 }
 
-BODY#thePopuphelpPage #content P {
+BODY#thePopuphelpPage .content P {
   text-align: justify;
   padding: 0.5em;
 }
 
-BODY#thePopuphelpPage #content OL LI,
-BODY#thePopuphelpPage #content UL LI
+BODY#thePopuphelpPage .content OL LI,
+BODY#thePopuphelpPage .content UL LI
 {
   margin-bottom: 0.5em;
 }
diff --git a/template/yoga/fix-ie5-ie6.css b/template/yoga/fix-ie5-ie6.css
index cfacd2db9..a16290fcb 100644
--- a/template/yoga/fix-ie5-ie6.css
+++ b/template/yoga/fix-ie5-ie6.css
@@ -7,12 +7,12 @@
 H1, #theHeader {
   width: 100%;	/* <- useless but seems to make IE6 happy */
 }
-#content {
+.content {
   height: 1em;	/* for IE6 it's like min-height */
 }
 
 /* fix category thumbnails on main page */
-#content UL.thumbnailCategories {
+.content UL.thumbnailCategories {
   width: 99%;	/* buggy IE box model */
 }
 
diff --git a/template/yoga/fix-ie7.css b/template/yoga/fix-ie7.css
index 75e51370c..33599dd18 100644
--- a/template/yoga/fix-ie7.css
+++ b/template/yoga/fix-ie7.css
@@ -1,20 +1,20 @@
 /* $Id$ */
 /* fix IE with another layout for thumbnails */
 
-#content UL.thumbnails SPAN.wrap2 {
+.content UL.thumbnails SPAN.wrap2 {
   display: block;
   position: relative;
   text-align: left;
 }
-#content UL.thumbnails SPAN.wrap2 A,
-#content UL.thumbnails SPAN.wrap2 SPAN {
+.content UL.thumbnails SPAN.wrap2 A,
+.content UL.thumbnails SPAN.wrap2 SPAN {
   overflow: visible;
   position: absolute;
   top: 50%;
   text-align: center;
 }
 
-#content UL.thumbnails IMG.thumbnail {
+.content UL.thumbnails IMG.thumbnail {
   position: relative;
   top: -50%;   
   margin-top: 2%;
diff --git a/template/yoga/fix-khtml.css b/template/yoga/fix-khtml.css
index e071061c9..ce35d70f3 100644
--- a/template/yoga/fix-khtml.css
+++ b/template/yoga/fix-khtml.css
@@ -1,11 +1,11 @@
 /* $Id$ */
 /* Issue in Safari/Konqueror only                                                 */
 /* If H2 has a 0 margin-top categoryActions doesn't float right but overwrites H2 */
-#content>DIV.titrePage>H2 {
+.content>DIV.titrePage>H2 {
     margin: 1px 0 0 0;	/* add an arbitrary margin-top */
 }
 
-#content>div.titrePage {
+.content>div.titrePage {
     position: relative;
     top: -1px;		/* move the container up by the same amount */
     margin-bottom: 5px; 
diff --git a/template/yoga/identification.tpl b/template/yoga/identification.tpl
index d4c2293f6..71ba02750 100644
--- a/template/yoga/identification.tpl
+++ b/template/yoga/identification.tpl
@@ -1,5 +1,5 @@
 {* $Id$ *}
-<div id="content">
+<div id="content" class="content">
 
   <div class="titrePage">
     <ul class="categoryActions">
diff --git a/template/yoga/index.tpl b/template/yoga/index.tpl
index b2ebef958..814cce81f 100644
--- a/template/yoga/index.tpl
+++ b/template/yoga/index.tpl
@@ -1,6 +1,7 @@
 {* $Id$ *}
 {$MENUBAR}
-<div id="content">
+{if !empty($PLUGIN_INDEX_CONTENT_BEFORE)}{$PLUGIN_INDEX_CONTENT_BEFORE}{/if}
+<div id="content" class="content">
   <div class="titrePage">
     <ul class="categoryActions">
       <li>&nbsp;</li>
@@ -112,6 +113,7 @@
 </div>
 {/if}
 
-
 {if !empty($PLUGIN_INDEX_CONTENT_END) }{$PLUGIN_INDEX_CONTENT_END}{/if}
 </div> <!-- content -->
+
+{if !empty($PLUGIN_INDEX_CONTENT_AFTER)}{$PLUGIN_INDEX_CONTENT_AFTER}{/if}
diff --git a/template/yoga/mail/text/html/header.tpl b/template/yoga/mail/text/html/header.tpl
index 1cc1715b2..2aeb2b434 100644
--- a/template/yoga/mail/text/html/header.tpl
+++ b/template/yoga/mail/text/html/header.tpl
@@ -16,4 +16,4 @@ Content-Transfer-Encoding: 8bit
 </head>
 <body>
 <div id="the_page">
-<div id="content">
+<div id="content" class="content">
diff --git a/template/yoga/nbm.tpl b/template/yoga/nbm.tpl
index b8d174839..7fa2845eb 100644
--- a/template/yoga/nbm.tpl
+++ b/template/yoga/nbm.tpl
@@ -1,6 +1,6 @@
 {* $Id$ *}
 
-<div id="content">
+<div id="content" class="content">
   <div class="titrePage">
     <ul class="categoryActions">
       <li><a href="{$U_HOME}" title="{'Go through the gallery as a visitor'|@translate}"><img src="{$themeconf.icon_dir}/home.png" class="button" alt="{'home'|@translate}"/></a></li>
diff --git a/template/yoga/not-ie.css b/template/yoga/not-ie.css
index 14fcad100..9fc85502c 100644
--- a/template/yoga/not-ie.css
+++ b/template/yoga/not-ie.css
@@ -3,11 +3,11 @@
 /* All directives not supported by IE */
 /* can be overiden in any theme but not hidden to IE */
 
-#content UL.thumbnails SPAN.wrap2 {
+.content UL.thumbnails SPAN.wrap2 {
   -moz-border-radius: 4px;	/* round corners with Geko */
   -webkit-border-radius: 4px; /* Safari webkit project */
 }
-#content DIV#comments {
+.content DIV#comments {
   padding-left: 5px;
   padding-right: 5px;
   -moz-box-sizing: padding-box !important;
diff --git a/template/yoga/notification.tpl b/template/yoga/notification.tpl
index bb98b27f5..b62db4bc0 100644
--- a/template/yoga/notification.tpl
+++ b/template/yoga/notification.tpl
@@ -1,5 +1,5 @@
 {* $Id$ *}
-<div id="content">
+<div id="content" class="content">
 
   <div class="titrePage">
     <ul class="categoryActions">
diff --git a/template/yoga/password.tpl b/template/yoga/password.tpl
index efb384299..8071b16d2 100644
--- a/template/yoga/password.tpl
+++ b/template/yoga/password.tpl
@@ -1,5 +1,5 @@
 {* $Id$ *}
-<div id="content">
+<div id="content" class="content">
 
   <div class="titrePage">
     <ul class="categoryActions">
diff --git a/template/yoga/picture.tpl b/template/yoga/picture.tpl
index 276db31de..fc5fce450 100644
--- a/template/yoga/picture.tpl
+++ b/template/yoga/picture.tpl
@@ -31,6 +31,7 @@
   {/if}
 </div>
 
+{if !empty($PLUGIN_PICTURE_BEFORE)}{$PLUGIN_PICTURE_BEFORE}{/if}
 <div id="imageToolBar">
   <div class="randomButtons">
     {if isset($U_SLIDESHOW_START) }
@@ -226,3 +227,4 @@
 </div>
 {/if} {*comments*}
 
+{if !empty($PLUGIN_PICTURE_AFTER)}{$PLUGIN_PICTURE_AFTER}{/if}
diff --git a/template/yoga/popuphelp.tpl b/template/yoga/popuphelp.tpl
index 3b7eb1932..af732c554 100644
--- a/template/yoga/popuphelp.tpl
+++ b/template/yoga/popuphelp.tpl
@@ -1,5 +1,5 @@
 {* $Id$ *}
-<div id="content">
+<div id="content" class="content">
 {$HELP_CONTENT}
 </div> <!-- content -->
 
diff --git a/template/yoga/print.css b/template/yoga/print.css
index bb564378d..8252f7e44 100644
--- a/template/yoga/print.css
+++ b/template/yoga/print.css
@@ -1,4 +1,4 @@
-#menubar, #content .navigationBar, UL.categoryActions, #content DIV.calendarViews, .calendarBar,
+#menubar, .content .navigationBar, UL.categoryActions, .content DIV.calendarViews, .calendarBar,
 #imageToolBar, .navThumb, #addComment {
     display: none;
 }
@@ -9,6 +9,6 @@ BODY {
     background: #ffffff;
 }
 
-#content {
+.content {
     margin: 0;
 }
diff --git a/template/yoga/profile.tpl b/template/yoga/profile.tpl
index 3107bb126..75ea61d48 100644
--- a/template/yoga/profile.tpl
+++ b/template/yoga/profile.tpl
@@ -1,5 +1,5 @@
 {* $Id$ *}
-<div id="content">
+<div id="content" class="content">
 
 {if isset($errors)}
 <div class="errors">
diff --git a/template/yoga/register.tpl b/template/yoga/register.tpl
index 1bce58afd..83bfd8c27 100644
--- a/template/yoga/register.tpl
+++ b/template/yoga/register.tpl
@@ -1,7 +1,7 @@
 {* $Id$ *}
 <div id="registerPage">
 
-<div id="content">
+<div id="content" class="content">
 
   <div class="titrePage">
     <ul class="categoryActions">
diff --git a/template/yoga/search.tpl b/template/yoga/search.tpl
index fadf6f9c8..f5b72d138 100644
--- a/template/yoga/search.tpl
+++ b/template/yoga/search.tpl
@@ -1,5 +1,5 @@
 {* $Id$ *}
-<div id="content">
+<div id="content" class="content">
 
   <div class="titrePage">
     <ul class="categoryActions">
diff --git a/template/yoga/search_rules.tpl b/template/yoga/search_rules.tpl
index 5cf2241e6..c7b4a8b88 100644
--- a/template/yoga/search_rules.tpl
+++ b/template/yoga/search_rules.tpl
@@ -1,5 +1,5 @@
 {* $Id$ *}
-<div id="content">
+<div id="content" class="content">
 <h2>{'Search rules'|@translate}</h2>
 
 {if isset($INTRODUCTION) }
diff --git a/template/yoga/tags.tpl b/template/yoga/tags.tpl
index 2548065ce..98a49cd06 100644
--- a/template/yoga/tags.tpl
+++ b/template/yoga/tags.tpl
@@ -1,5 +1,5 @@
 {* $Id$ *}
-<div id="content">
+<div id="content" class="content">
 
   <div class="titrePage">
     <ul class="categoryActions">
diff --git a/template/yoga/theme/admin/theme.css b/template/yoga/theme/admin/theme.css
index 9f7bd94d2..7b8e63e9a 100644
--- a/template/yoga/theme/admin/theme.css
+++ b/template/yoga/theme/admin/theme.css
@@ -48,14 +48,14 @@ H2, .throw {
 #theAdminPage #menubar DT:after {
  content: ''; 
 }
-#content .pageNumberSelected {
+.content .pageNumberSelected {
   color: #f92;
 }
-#content .infos {
+.content .infos {
   background-color: #69c;
   color: #036;
 }
-#content .errors {
+.content .errors {
   background-color: #fc5;
   border-color: #f92;
   color: #900;
@@ -83,12 +83,12 @@ A {
 A:hover {
   border-color: #f92;
 }
-#content, .content {
+.content {
   background-color: #181818;
   border: 1px solid #eee;
   padding: 5px;
 }
-#theAdminPage #the_page #content, #theAdminPage #the_page .content {
+#theAdminPage #the_page .content {
   background-color: transparent;
   border-width: 0px;
   padding: 5px;
@@ -97,7 +97,7 @@ H2, #menubar DT, .throw, TD H3, #theAdminPage H3 {
   background-image: url(images/tableh1_bg.png);
   background-repeat: repeat-x;
 }
-#content H2 {
+.content H2 {
   background: none;
   border: 0px;
   letter-spacing: -0.05em; 
@@ -106,25 +106,25 @@ H2, #menubar DT, .throw, TD H3, #theAdminPage H3 {
   font-weight: lighter;
   margin-bottom: 20px;
 }
-#content ul.thumbnailCategories li div.thumbnailCategory .description h3,
-#content h3 { text-align: center; }
-#content ul.thumbnailCategories li div.thumbnailCategory .description p {
+.content ul.thumbnailCategories li div.thumbnailCategory .description h3,
+.content h3 { text-align: center; }
+.content ul.thumbnailCategories li div.thumbnailCategory .description p {
   color: #f92; text-indent: 0em; 
 }
-#content ul.thumbnailCategories li div.thumbnailCategory .description p + p {
+.content ul.thumbnailCategories li div.thumbnailCategory .description p + p {
   color: #fff; 
 }
 .browsePath A {
   color: #eee;
 }
-#content H2:before, .browsePath:before, .imageNumber:before,
+.content H2:before, .browsePath:before, .imageNumber:before,
 #imageHeaderBar H2:before {
  content: "____\\_ "; 
  color: #69c; 
  font-family: Times, Zapf-Chancery, Cottonwood, Helvetica;
  letter-spacing: 0em; 
 }
-#content H2:after, .browsePath:after, .imageNumber:after,
+.content H2:after, .browsePath:after, .imageNumber:after,
 #imageHeaderBar H2:after {
  content: " _/____"; 
  color: #f92;
@@ -178,18 +178,18 @@ H2, #imageToolBar {
   border-color: #fff;
 }
 
-#content UL.thumbnail IMG {
+.content UL.thumbnail IMG {
   border: 1px solid #a0a0a0;
 }
 .illustration A {
   border: 0px;
 }
 FIELDSET, INPUT, SELECT, TEXTAREA,
-#content DIV.comment  A.illustration IMG,
-#content DIV.thumbnailCategory {
+.content DIV.comment  A.illustration IMG,
+.content DIV.thumbnailCategory {
   border: 1px solid gray;
 }
-#content DIV.thumbnailCategory {
+.content DIV.thumbnailCategory {
   border: 1px solid #69c;
   margin: 8px 4px;
 }
@@ -197,13 +197,13 @@ FIELDSET, INPUT, SELECT, TEXTAREA,
   border-left: 2px solid #696969;
 }
 
-#content UL.thumbnails SPAN.wrap2 {
+.content UL.thumbnails SPAN.wrap2 {
   border: 1px solid #aaaaaa;	/* thumbnails border color and style */
   border-radius: 4px 4px;	/* round corners with CSS3 compliant browsers */
 }
 
-#content UL.thumbnails SPAN.wrap2:hover,
-#content UL.thumbnailCategories DIV.thumbnailCategory:hover {
+.content UL.thumbnails SPAN.wrap2:hover,
+.content UL.thumbnailCategories DIV.thumbnailCategory:hover {
   background-color: #333;
   border-color: #69c;		/* thumbnails border color when mouse cursor is over it */
 }
@@ -326,7 +326,7 @@ body#theAdminPage #menubar {
   repeat-y scroll right top;
   border-bottom: #ccc ridge 2px; width:13.5em; padding: 0; margin: 0;
 }
-body#theAdminPage #content, #theAdminPage #the_page .content { /*default-layout.cs... (line 1)*/
+body#theAdminPage .content { /*default-layout.cs... (line 1)*/
 list-style-type:none; padding: 0px;
  /*default-layout.cs... (line 23) */
 margin: 0px 0px 0px 200px; background-color: transparent;}
@@ -412,13 +412,13 @@ text-decoration:none; width:126px !important;
 .pwgmenu a:hover { /*theme.css (line 344)*/
 background:transparent url(images/onglet_actif_transp.png) no-repeat scroll left 2px;
 color: #ff7700; }
-#content h2:before, #content h2:after, 
+.content h2:before, .content h2:after, 
 #menubar DT:before, #menubar DT:after { content: ""; }
 #theHeader h1 { /*theme.css (line 345) */ color:#441100; }
-#content h2 { /*theme.css (line 100)*/
+.content h2 { /*theme.css (line 100)*/
 letter-spacing:0.1em; margin-right:45px; text-align:right; color: #777777; 
 text-transform:none; }
-#content dl, dd { /*content.css (line 52) */ margin:5px; }
+.content dl, dd { /*content.css (line 52) */ margin:5px; }
 .content h2 { /* default-layout.cs... (line 6) */
 font-weight:bold; margin-right:30px; padding-left:2em; }
 #theAdminPage h3 { /* theme.css (line 96) */
@@ -429,11 +429,11 @@ background:#111111 url(images/top-left-bg.png) no-repeat scroll left top;}
 #theAdminPage #the_page { /*theme.css (line 73)*/
 background:transparent url(images/bottom-left-bg.png) no-repeat fixed left bottom; }
 #the_page { /*theme.css (line 348)*/ padding-bottom:0px;}
-#content, .content {background-color:transparent;}
+.content {background-color:transparent;}
 body#theAdminPage #menubar {  /* theme.css (line 324) */
 background:transparent none repeat-y scroll right top; border-bottom:0px; margin-top:110px;
 float: none; position: absolute; left: 0px; top: 160px;}
-#theAdminPage #the_page #content, #theAdminPage #the_page .content { /*theme.css (line 91)*/
+#theAdminPage #the_page .content { /*theme.css (line 91)*/
 background-color:transparent; border-width:0px; padding:5px 35px 5px 5px; }
 body#theAdminPage #menubar dl.selected dd { padding-bottom: 145px; }
 .header_notes {/*default-colors.cs... (line 91)*/
diff --git a/template/yoga/theme/clear/theme.css b/template/yoga/theme/clear/theme.css
index 98ea0e24c..cff996521 100644
--- a/template/yoga/theme/clear/theme.css
+++ b/template/yoga/theme/clear/theme.css
@@ -15,12 +15,12 @@ H2, #menubar DT, #imageHeaderBar, #imageToolBar A:hover, .row1 {
   background-color: #d3d3d3;
 }
 
-#menubar DL, #content, #imageToolBar, .header_notes, .content {
+#menubar DL, .content, #imageToolBar, .header_notes {
   background-color: #eeeeee;
 }
 
 /* borders */
-#menubar DL, #content, #imageToolBar, 
+#menubar DL, .content, #imageToolBar, 
 #comments DIV.comment BLOCKQUOTE {
   border: 1px solid #d3d3d3;
 }
@@ -29,13 +29,13 @@ H2, #menubar DT, #imageHeaderBar, #imageToolBar A:hover, .row1 {
   border-color: #d3d3d3;
 }
 
-#content UL.thumbnail IMG {
+.content UL.thumbnail IMG {
     border: 1px solid #a0a0a0;
 }
 
 FIELDSET, INPUT, SELECT, TEXTAREA,
-#content DIV.comment  A.illustration IMG,
-#content DIV.thumbnailCategory {
+.content DIV.comment  A.illustration IMG,
+.content DIV.thumbnailCategory {
   border: 1px solid gray;
 }
 
@@ -44,14 +44,14 @@ FIELDSET, INPUT, SELECT, TEXTAREA,
   background-color: #eee;
 }
 
-#content UL.thumbnails SPAN.wrap2 {
+.content UL.thumbnails SPAN.wrap2 {
   border: 1px solid #aaaaaa;	/* thumbnails border color and style */
   border-radius: 4px 4px;	/* round corners with CSS3 compliant browsers */
 }
 
-#content UL.thumbnails SPAN.wrap2:hover,
-#content UL.thumbnailCategories DIV.thumbnailCategory:hover,
-#content UL.thumbnailCategories DIV.thumbnailCategory:hover A {
+.content UL.thumbnails SPAN.wrap2:hover,
+.content UL.thumbnailCategories DIV.thumbnailCategory:hover,
+.content UL.thumbnailCategories DIV.thumbnailCategory:hover A {
   background-color: #faebd7;
   border-color: yellow;		/* thumbnails border color when mouse cursor is over it */
   color: black;
diff --git a/template/yoga/theme/dark/theme.css b/template/yoga/theme/dark/theme.css
index 799306fe8..690bdda1d 100644
--- a/template/yoga/theme/dark/theme.css
+++ b/template/yoga/theme/dark/theme.css
@@ -17,7 +17,7 @@ BODY, H3, #imageHeaderBar, #imageToolBar A:hover, .row1, UL.tabsheet LI.normal_t
 	background-color: #2f2f2f;
 }
 
-#menubar DL, #content, #imageToolBar, .header_notes, .content, UL.tabsheet LI.selected_tab {
+#menubar DL, .content, #imageToolBar, .header_notes, UL.tabsheet LI.selected_tab {
 	background-color: #505050;
 }
 
@@ -38,7 +38,7 @@ H2, #menubar DT, .throw {
 }
 
 /* borders */
-#menubar DL, #content, .content,
+#menubar DL, .content,
 #comments DIV.comment BLOCKQUOTE {
 	border: 1px solid #000000;
 }
@@ -55,8 +55,8 @@ H2, #menubar DT, #imageToolBar {
 }
 
 FIELDSET, INPUT, SELECT, TEXTAREA,
-#content DIV.comment  A.illustration IMG,
-#content DIV.thumbnailCategory {
+.content DIV.comment  A.illustration IMG,
+.content DIV.thumbnailCategory {
 	border: 1px solid gray;
 }
 
@@ -64,14 +64,14 @@ FIELDSET, INPUT, SELECT, TEXTAREA,
 	border-left: 2px solid #696969;
 }
 
-#content UL.thumbnails SPAN.wrap2 {
+.content UL.thumbnails SPAN.wrap2 {
 	border: 1px solid #aaaaaa;	/* thumbnails border color and style */
 	border-radius: 4px 4px;	/* round corners with CSS3 compliant browsers */
 }
 
-#content UL.thumbnails SPAN.wrap2:hover,
-#content UL.thumbnailCategories DIV.thumbnailCategory:hover,
-#content UL.thumbnailCategories DIV.thumbnailCategory:hover A {
+.content UL.thumbnails SPAN.wrap2:hover,
+.content UL.thumbnailCategories DIV.thumbnailCategory:hover,
+.content UL.thumbnailCategories DIV.thumbnailCategory:hover A {
 	background-color: #faebd7;
 	border-color: yellow;	/* thumbnails border color when mouse cursor is over it */
 	color: black;
diff --git a/template/yoga/theme/p0w0/theme.css b/template/yoga/theme/p0w0/theme.css
index b3db1b779..4a04cf44c 100644
--- a/template/yoga/theme/p0w0/theme.css
+++ b/template/yoga/theme/p0w0/theme.css
@@ -25,7 +25,7 @@ H2, #menubar DT, .throw, TD H3, #theAdminPage H3 {
   color: #fff;
   font-weight: bold;
 }
-#content .titrePage .categoryActions li { color: #cde;}
+.content .titrePage .categoryActions li { color: #cde;}
 #menubar DT A:hover {
   color: #f92;
   font-weight: bold;
@@ -34,27 +34,27 @@ h1 { font-weight: bold; letter-spacing: 0.2em; }
 #mbIdentification dd p,
 #menubar .selected A { color: #c60; font-weight: bold; }
 #copyright { color: #c60; }
-#content .pageNumberSelected,
+.content .pageNumberSelected,
 A, INPUT.rateButton, legend { color: #369; }
 A:hover { color: #f92; }
 INPUT.rateButtonSelected /* <= why IE doesn't inherit this ? */ {
   color:#69c;
 }
 .infoTable,
-#theAdminPage #content,
+#theAdminPage .content,
 input#qsearchInput { color: #369; }
-#content .infos { color: #036; }
-#content .errors { color: #900; }
-#content .titrePage H2 A { color: #dfe8ff; }
+.content .infos { color: #036; }
+.content .errors { color: #900; }
+.content .titrePage H2 A { color: #dfe8ff; }
 input.rateButtonSelected,
-#content .titrePage H2 A:hover { color: #f92; }
-#content H2 {
+.content .titrePage H2 A:hover { color: #f92; }
+.content H2 {
   letter-spacing: 0.01em;
   text-indent: 1em;
   font-weight: normal;
 }
-#content ul.thumbnailCategories li div.thumbnailCategory .description h3,
-#content h3 { text-align: center; }
+.content ul.thumbnailCategories li div.thumbnailCategory .description h3,
+.content h3 { text-align: center; }
 .browsePath, .imageNumber,
 #imageHeaderBar H2,
 .browsePath A {
@@ -62,9 +62,9 @@ input.rateButtonSelected,
   font-weight: bold;
 }
 .browsePath A:hover { color: #fff; }
-#content H2:before, .browsePath:before, .imageNumber:before,
+.content H2:before, .browsePath:before, .imageNumber:before,
 #imageHeaderBar H2:before,
-#content H2:after, .browsePath:after, .imageNumber:after,
+.content H2:after, .browsePath:after, .imageNumber:after,
 #imageHeaderBar H2:after {
  content: "   ";
  color: #fff;
@@ -75,17 +75,17 @@ input.rateButtonSelected,
 #thePicturePage #comments H2 {
   color: #69c;
 }
-#content ul.thumbnailCategories li div.thumbnailCategory .description p {
+.content ul.thumbnailCategories li div.thumbnailCategory .description p {
   color: #c60;
 }
-#content ul.thumbnailCategories li div.thumbnailCategory .description p + p {
+.content ul.thumbnailCategories li div.thumbnailCategory .description p + p {
   color: #369;
 }
 .tabsheet li, .tabsheet li a, #theAdminPage h3 a,
-#content div.thumbnailCategory .description h3 a {
+.content div.thumbnailCategory .description h3 a {
   color: #fff;
 }
-.tabsheet li a:hover, #content div.thumbnailCategory .description h3 a:hover {
+.tabsheet li a:hover, .content div.thumbnailCategory .description h3 a:hover {
   color: #f92;
 }
 
@@ -97,7 +97,7 @@ BODY { background: #cde; }
 #thePicturePage #the_page,
 #thePicturePage #theImage,
 #theAdminPage #the_page,
-#content, DIV.content { background-color: #dfe8ff; }
+.content { background-color: #dfe8ff; }
 #the_page { background-color: #dfe8ff; }
 #menubar, H3, #imageHeaderBar,
 .row1  { background-color: #eef; }
@@ -105,19 +105,19 @@ H2, #menubar DT, .throw, TD H3,
 #imageToolBar,
 #imageHeaderBar, #imageHeaderBar H2, .tabsheet li,
 #theAdminPage H3 { background-color: #369; }
-#content H2 { background-color: #369; }
-#content .infos { background-color: #47a; ;}
-#content .errors { background-color: #fc5; ;}
+.content H2 { background-color: #369; }
+.content .infos { background-color: #47a; ;}
+.content .errors { background-color: #fc5; ;}
 #thePicturePage #comments H2 { background-color: #eef; ;}
-#content ul.thumbnailCategories li div.thumbnailCategory .description h3 {
+.content ul.thumbnailCategories li div.thumbnailCategory .description h3 {
   background-color: #69c; 
 }
-#content ul.thumbnailCategories li div.thumbnailCategory,
-#content UL.thumbnails SPAN.wrap2 { background-color: #eef; }
-#content ul.thumbnailCategories li div.thumbnailCategory:hover,
+.content ul.thumbnailCategories li div.thumbnailCategory,
+.content UL.thumbnails SPAN.wrap2 { background-color: #eef; }
+.content ul.thumbnailCategories li div.thumbnailCategory:hover,
 #theImage IMG, .navThumb IMG,
-#content UL.thumbnails SPAN.wrap2:hover { background-color: #fff; }
-#content UL.thumbnails SPAN.wrap2:active img {
+.content UL.thumbnails SPAN.wrap2:hover { background-color: #fff; }
+.content UL.thumbnails SPAN.wrap2:active img {
   outline: 3px ridge #f92;
 }
 input#qsearchInput { background-color: #cde; }
@@ -134,27 +134,27 @@ BODY { margin: 0px;  padding: 0px; }
 }
 A { border: 0px; text-decoration: none; }
 A:hover { text-decoration: none; border: 0px; }
-#content, DIV.content {
+.content {
   border: 1px solid #369;
   padding: 0px;
 }
-#menubar DT, #content H2 {
+#menubar DT, .content H2 {
   background-image: url(images/button-bg.png);
   border: 0px;
   margin-bottom: 3px;
 }
-#content ul.thumbnailCategories li div.thumbnailCategory .description h3 {
+.content ul.thumbnailCategories li div.thumbnailCategory .description h3 {
   background-image: url(images/button-bg.png);
   border-width: 1px;
   border-style: outset;
   border-color: #369;
 }
-#content ul.thumbnailCategories li div.thumbnailCategory .description h3:active
+.content ul.thumbnailCategories li div.thumbnailCategory .description h3:active
 {
 	background: #69c;
 	border: 1px inset #369;
 }
-#content .errors { border-color: #f92; }
+.content .errors { border-color: #f92; }
 #imageHeaderBar H2 { border: 0px; }
 #thePicturePage #imageToolBar { padding: 0px 25px 5px 25px; }
 #thePicturePage #theImage {
@@ -179,27 +179,27 @@ H2, #imageToolBar {
   padding: 1px;
   box-shadow: 0.2em 0.2em #ccc;
 }
-#content UL.thumbnail IMG {
+.content UL.thumbnail IMG {
   border: 1px solid #666;
 }
 .illustration A {
   border: 0px;
 }
 FIELDSET, INPUT, SELECT, TEXTAREA,
-#content DIV.comment  A.illustration IMG,
-#content DIV.thumbnailCategory {
+.content DIV.comment  A.illustration IMG,
+.content DIV.thumbnailCategory {
   border: 1px solid #69c;
   background-color: #dfe8ff;
   margin: 3px;
 }
-#content DIV.thumbnailCategory:hover {
+.content DIV.thumbnailCategory:hover {
   border: 1px solid #f92;
 }
-#content UL.thumbnails SPAN.wrap2 {
+.content UL.thumbnails SPAN.wrap2 {
   border: 1px solid #69c;	/* thumbnails border color and style */
   border-radius: 4px 4px;	/* round corners with CSS3 compliant browsers */
 }
-#content UL.thumbnails SPAN.wrap2:hover {
+.content UL.thumbnails SPAN.wrap2:hover {
   border-color: #f92;		/* thumbnails border color when mouse cursor is over it */
 }
 A.navThumb, A.navThumb:hover,
@@ -211,7 +211,7 @@ A.navThumb, A.navThumb:hover,
   padding: 5px 0px 30px 0px;
   margin: 0px;
 }
-#theAdminPage #content table td { padding: 2px 8px; }
+#theAdminPage .content table td { padding: 2px 8px; }
 ul.tabsheet, ul.tabsheet li { border-color: #369 !important; }
 .tabsheet li:hover { border-color: #f92 !important; }
 
diff --git a/template/yoga/theme/wipi/theme.css b/template/yoga/theme/wipi/theme.css
index 000ac4ca2..9c0deea14 100644
--- a/template/yoga/theme/wipi/theme.css
+++ b/template/yoga/theme/wipi/theme.css
@@ -48,14 +48,14 @@ H2, .throw {
 #theAdminPage #menubar DT:after {
  content: ''; 
 }
-#content .pageNumberSelected {
+.content .pageNumberSelected {
   color: #f92;
 }
-#content .infos {
+.content .infos {
   background-color: #69c;
   color: #036;
 }
-#content .errors {
+.content .errors {
   background-color: #fc5;
   border-color: #f92;
   color: #900;
@@ -83,12 +83,12 @@ A {
 A:hover {
   border-color: #f92;
 }
-#content, .content {
+.content {
   background-color: #181818;
   border: 1px solid #eee;
   padding: 5px;
 }
-#theAdminPage #the_page #content, #theAdminPage #the_page .content {
+#theAdminPage #the_page .content {
   background-color: #111;
   border-width: 0px;
   padding: 5px;
@@ -97,7 +97,7 @@ H2, #menubar DT, .throw, TD H3, #theAdminPage H3 {
   background-image: url(images/tableh1_bg.png);
   background-repeat: repeat-x;
 }
-#content H2 {
+.content H2 {
   background: none;
   border: 0px;
   letter-spacing: -0.05em; 
@@ -106,25 +106,25 @@ H2, #menubar DT, .throw, TD H3, #theAdminPage H3 {
   font-weight: lighter;
   margin-bottom: 20px;
 }
-#content ul.thumbnailCategories li div.thumbnailCategory .description h3,
-#content h3 { text-align: center; }
-#content ul.thumbnailCategories li div.thumbnailCategory .description p {
+.content ul.thumbnailCategories li div.thumbnailCategory .description h3,
+.content h3 { text-align: center; }
+.content ul.thumbnailCategories li div.thumbnailCategory .description p {
   color: #f92; text-indent: 0em; 
 }
-#content ul.thumbnailCategories li div.thumbnailCategory .description p + p {
+.content ul.thumbnailCategories li div.thumbnailCategory .description p + p {
   color: #fff; 
 }
 .browsePath A {
   color: #eee;
 }
-#content H2:before, .browsePath:before, .imageNumber:before,
+.content H2:before, .browsePath:before, .imageNumber:before,
 #imageHeaderBar H2:before {
  content: "____\\_ "; 
  color: #69c; 
  font-family: Times, Zapf-Chancery, Cottonwood, Helvetica;
  letter-spacing: 0em; 
 }
-#content H2:after, .browsePath:after, .imageNumber:after,
+.content H2:after, .browsePath:after, .imageNumber:after,
 #imageHeaderBar H2:after {
  content: " _/____"; 
  color: #f92;
@@ -178,18 +178,18 @@ H2, #imageToolBar {
   border-color: #fff;
 }
 
-#content UL.thumbnail IMG {
+.content UL.thumbnail IMG {
   border: 1px solid #a0a0a0;
 }
 .illustration A {
   border: 0px;
 }
 FIELDSET, INPUT, SELECT, TEXTAREA,
-#content DIV.comment  A.illustration IMG,
-#content DIV.thumbnailCategory {
+.content DIV.comment  A.illustration IMG,
+.content DIV.thumbnailCategory {
   border: 1px solid gray;
 }
-#content DIV.thumbnailCategory {
+.content DIV.thumbnailCategory {
   border: 1px solid #69c;
   margin: 8px 4px;
 }
@@ -197,13 +197,13 @@ FIELDSET, INPUT, SELECT, TEXTAREA,
   border-left: 2px solid #696969;
 }
 
-#content UL.thumbnails SPAN.wrap2 {
+.content UL.thumbnails SPAN.wrap2 {
   border: 1px solid #aaaaaa;	/* thumbnails border color and style */
   border-radius: 4px 4px;	/* round corners with CSS3 compliant browsers */
 }
 
-#content UL.thumbnails SPAN.wrap2:hover,
-#content UL.thumbnailCategories DIV.thumbnailCategory:hover {
+.content UL.thumbnails SPAN.wrap2:hover,
+.content UL.thumbnailCategories DIV.thumbnailCategory:hover {
   background-color: #333;
   border-color: #69c;		/* thumbnails border color when mouse cursor is over it */
 }
diff --git a/template/yoga/thumbnails-fix-ie5-ie6.css b/template/yoga/thumbnails-fix-ie5-ie6.css
index 66adaad08..dbffaefc9 100644
--- a/template/yoga/thumbnails-fix-ie5-ie6.css
+++ b/template/yoga/thumbnails-fix-ie5-ie6.css
@@ -1,26 +1,26 @@
 /* $Id$ */
 /* fix IE with another layout for thumbnails */
-#content UL.thumbnails SPAN.wrap2 {
+.content UL.thumbnails SPAN.wrap2 {
   display: block;
   position: relative;
   text-align: left;
 }
-#content UL.thumbnails SPAN.wrap2 A,
-#content UL.thumbnails SPAN.wrap2 SPAN {
+.content UL.thumbnails SPAN.wrap2 A,
+.content UL.thumbnails SPAN.wrap2 SPAN {
   overflow: visible;
   position: absolute;
   top: 50%;
   text-align: center;
 }
 
-#content UL.thumbnails IMG.thumbnail {
+.content UL.thumbnails IMG.thumbnail {
   position: relative;
   top: -50%;
   /*\*//*/
     margin-top: -40%;
   /**/
 }
-#content UL.thumbnails INPUT {
+.content UL.thumbnails INPUT {
   position: absolute;
   left: 2px;
   top: 2px;  /* same as other browsers but not so pretty */
diff --git a/template/yoga/thumbnails.css b/template/yoga/thumbnails.css
index 6f69f2cb7..8d02e7742 100644
--- a/template/yoga/thumbnails.css
+++ b/template/yoga/thumbnails.css
@@ -1,51 +1,51 @@
 /* $Id$ */
 
 /* Thumbnails customization */
-#content UL.thumbnails SPAN.thumbLegend {
+.content UL.thumbnails SPAN.thumbLegend {
   font-size: 80%;		/* font size */
   overflow: hidden;		/* oversized legend is clipped */
 }
 
 /* Thumbnail "elastic" layout */
-#content UL.thumbnails {
+.content UL.thumbnails {
   margin: 0;
   padding: 0;
   list-style: none;
-  text-align: center;	/* to center the whole collection in #content */
+  text-align: center;	/* to center the whole collection in .content */
 }
-#content UL.thumbnails LI { display: inline }
+.content UL.thumbnails LI { display: inline }
 
-#content UL.thumbnails SPAN.wrap1 {
+.content UL.thumbnails SPAN.wrap1 {
   margin: 0 5px 5px 5px;
   display: table-cell; display: inline-table;
   display: inline-block; /* Why 3 display option ??? */
   vertical-align: top;		/* OK with Opera and IE6 not Geko */
   text-align: center;		/* to center the thumbnail and legend in Geko/Opera */
 }
-#content UL.thumbnails SPAN.wrap2 {
+.content UL.thumbnails SPAN.wrap2 {
   margin: 0;			/* important reset the margins */
   display: table-cell;		/* block prevents vertical-align here */
   vertical-align: middle;	/* Ok with Opera and Geko not IE6 */
 }
-#content UL.thumbnails SPAN.wrap2 A,
-#content UL.thumbnails LABEL {
+.content UL.thumbnails SPAN.wrap2 A,
+.content UL.thumbnails LABEL {
   display: block;
   border-bottom: none;
 }
-#content UL.thumbnails IMG {
+.content UL.thumbnails IMG {
   margin-bottom: -4px;  /* why ??? something wrong with Geko and Opera ignored by IE6*/
 }
 
 /* label and input used for caddie in admin section */
-#content UL.thumbnails LABEL {
+.content UL.thumbnails LABEL {
   position: relative;
 }
 
-#content UL.thumbnails INPUT {
+.content UL.thumbnails INPUT {
   position: relative;	/* <= Opera can handle relative here */
   top: -20px;
 }
-:root #content UL.thumbnails INPUT { /* hide from Opera */
+:root .content UL.thumbnails INPUT { /* hide from Opera */
   position: absolute;	/* <= Opera hide 1 checkbox over 2 !!! */
   left: 2px;
   top: 2px;
diff --git a/template/yoga/upload.tpl b/template/yoga/upload.tpl
index 78ef36585..b92c918fd 100644
--- a/template/yoga/upload.tpl
+++ b/template/yoga/upload.tpl
@@ -1,6 +1,6 @@
 {* $Id$ *}
 
-<div id="content">
+<div id="content" class="content">
 
   <div class="titrePage">
     <ul class="categoryActions">