- tried to reduce the number of css rules and selectors (most gains on menubar and usercomments) tested with IE6,IE7,FF,Opera9,Safari3

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

15 files changed, 344 insertions, 519 deletions

diff --git a/template/yoga/comment_list.tpl b/template/yoga/comment_list.tpl
new file mode 100644
index 000000000..334b07a1a
--- /dev/null
+++ b/template/yoga/comment_list.tpl
@@ -0,0 +1,32 @@
+{* $Id$ *}
+{foreach from=$comments item=comment}
+	<div class="comment" >
+	  {if isset($comment.TN_SRC)}
+	  	<a class="illustration" href="{$comment.U_PICTURE}"><img src="{$comment.TN_SRC}" alt="{$comment.ALT}" /></a>
+	  {/if}
+		<div class="commentHeader">
+			{if isset($comment.U_DELETE) or isset($comment.U_VALIDATE) }
+			<ul class="actions" style="float:right">
+				{if isset($comment.U_DELETE)}
+				  <li>
+					<a href="{$comment.U_DELETE}" title="{'comments_del'|@translate}">
+						<img src="{$ROOT_URL}{$themeconf.icon_dir}/delete.png" class="button" alt="[{'delete'|@translate}]"/>
+					</a>
+					</li>{/if}
+
+				{if isset($comment.U_VALIDATE)}
+					<li>
+					<a href="{$comment.U_VALIDATE}" title="validate this comment">
+						<img src="{$ROOT_URL}{$themeconf.icon_dir}/validate_s.png" class="button" alt="[validate]"/>
+					</a>
+					</li>{/if}
+			</ul>
+			{/if}
+			<span class="author">{$comment.AUTHOR}</span> - <span class="date">{$comment.DATE}</span>
+		</div>
+
+		<blockquote>{$comment.CONTENT}</blockquote>
+	</div>
+	<hr/>
+{/foreach}
+
diff --git a/template/yoga/comments.tpl b/template/yoga/comments.tpl
index 2e2beaf34..da3c2a165 100644
--- a/template/yoga/comments.tpl
+++ b/template/yoga/comments.tpl
@@ -69,31 +69,9 @@
 
 {if isset($comments)}
 <div id="comments">
-
-  {foreach from=$comments item=comment}
-  <div class="comment">
-    <a class="illustration" href="{$comment.U_PICTURE}"><img src="{$comment.TN_SRC}" alt="{$comment.ALT}" /></a>
-    <p class="commentHeader"><span class="author">{$comment.AUTHOR}</span> - <span class="date">{$comment.DATE}</span>
-
-    {if isset($comment.U_DELETE)}
-    <a href="{$comment.U_DELETE}" title="{'comments_del'|@translate}">
-      <img src="{$ROOT_URL}{$themeconf.icon_dir}/delete.png" class="button" style="border:none;vertical-align:middle; margin-left:5px;" alt="[{'delete'|@translate}]"/>
-    </a>
-    {/if}
-
-    {if isset($comment.U_VALIDATE)}
-    <a href="{$comment.U_VALIDATE}" title="validate this comment">
-      <img src="{$ROOT_URL}{$themeconf.icon_dir}/validate_s.png" class="button" style="border:none;vertical-align:middle; margin-left:5px;" alt="[validate]"/>
-    </a>
-    {/if}
-
-    </p>
-    <blockquote>{$comment.CONTENT}</blockquote>
-    <hr class="separation">
-  </div>
-  
-  {/foreach}
+	{include file='comment_list.tpl'}
 </div>
 {/if}
 
 </div> <!-- content -->
+
diff --git a/template/yoga/content.css b/template/yoga/content.css
index 05e246069..ab82321f9 100644
--- a/template/yoga/content.css
+++ b/template/yoga/content.css
@@ -1,7 +1,7 @@
 /* $Id$ */
 .content {
-    margin-right: 1em;
-    margin-bottom: 1em; /* when it's longer than menu bar */
+	margin-right: 1em;
+	margin-bottom: 1em; /* when it's longer than menu bar */
 }
 
 BODY#theCommentsPage .content,
@@ -17,22 +17,22 @@ BODY#theNotificationPage .content,
 BODY#theTagsPage .content,
 BODY#theNBMPage .content
 {
-  margin: 1em;
+	margin: 1em;
 }
 
 .content H3 {
-    margin-bottom: 1ex;
+	margin-bottom: 1ex;
 }
 
 .content H2 { margin-bottom: 3px;} /*<- for IE otherwise calendar select is displaced to middle of page*/
 
 .content H3 {
-    text-align: center;
+	text-align: center;
 }
 
-.content .navigationBar, .content .additional_info {
-    margin: 10px 0;
-    text-align: center;
+.content .navigationBar, .content .additional_info, .content .calendarBar {
+	margin: 8px 4px;
+	text-align: center;
 }
 
 .content .pageNumberSelected {
@@ -41,201 +41,171 @@ BODY#theNBMPage .content
 }
 
 .content .additional_info {
-    font-size: 110%;
+	font-size: 110%;
 }
 
-.content FORM {
-    text-align: left;
-}
-
-/* content defaults */
-.content DL, DD { margin: 10px; }
-.content DT {
-  margin-bottom: 5px;
-  font-style: italic;
-  font-size: 110%;
-}
 
 /* actions */
 UL.categoryActions {
-  margin: 0 2px;
-  width: auto;
-  padding: 0;
-  text-indent: 0;
-  list-style: none;
-  text-align: center;
+	margin: 0 2px;
+	width: auto;
+	padding: 0;
+	text-indent: 0;
+	list-style: none;
+	text-align: center;
 }
 
 .content DIV.titrePage UL.categoryActions {
-  float: right;
-  text-align: center;
+	float: right;
+	text-align: center;
 }
 
 .content DIV.titrePage {
-  padding: 0 0 3px;
+	padding: 0 0 3px;
 }
 
 .content UL.categoryActions LI {
-  display: inline;
+	display: inline;
 }
 
 .content UL.categoryActions A IMG, UL.categoryActions A {
-  border: none;
-  margin-bottom: -5px;
+	border: none;
+	margin-bottom: -5px;
 }
 
 /* User comments */
 
-.content DIV#comments {
-  padding-left: 5px;
-  padding-right: 5px;
-}
-.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 {
-  display: block;
-  float: left;
-  margin: 0.5em 0 0 0.5em;
+DIV#comments {
+	padding-left: 5px;
+	padding-right: 5px;
 }
 
-.content DIV.comment P.commentHeader {
-  text-align: right;
-  margin: 0.5em 0.5em 0 0;
+DIV#comments HR {
+	clear:both;
 }
 
-.content DIV.comment UL.actions {
-  text-align: center;
-  margin: 0.2em;
-}
-
-.content DIV.comment BLOCKQUOTE {
-  margin-right: 0.5em;
-  overflow: visible; /*avoid a very strange margin behaviour (all browsers) */
+DIV#comments DIV.comment A.illustration {
+	display: block;
+	float: left;
+	margin: 0.5em 1em 0 0.5em;
+	width: 140px;
 }
 
 /* begin chronology/calendar elements*/
 .content DIV.calendarViews {
-  display: block;
-  float: right;
-  margin: 2px 0 0;
+	display: block;
+	float: right;
+	margin: 2px 0 0;
 }
 
-.content DIV.calendarBar { margin: 8px 4px; }
-
 SPAN.calItem, SPAN.calItemEmpty {
-  font-weight: bold;
-  margin: 0 1px;
+	font-weight: bold;
+	margin: 0 1px;
 }
 
 SPAN.calItem A { border:0 }
 
 .content DIV.calendarCalBar {
-  margin: 10px 10px;
-  text-align: left;
+	margin: 10px 10px;
+	text-align: left;
 }
 
 SPAN.calCalHead {
-  font-weight: bold;
-  font-size: 110%;
-  margin: 0 2px;
+	font-weight: bold;
+	font-size: 110%;
+	margin: 0 2px;
 }
 
 SPAN.calCal { margin: 0 2px; }
 
 /* nice looking month calendar*/
 TABLE.calMonth {
-  border: none;
-  border-collapse: collapse;
-  margin-bottom: 10px;	/*<-IE ignores this */
+	border: none;
+	border-collapse: collapse;
+	margin-bottom: 10px;	/*<-IE ignores this */
 }
 
 TD.calDayCellFull, TD.calDayCellEmpty, TD.calDayCellBlank {
-  text-align:left;
-  vertical-align: top;
-  font: bold 18px Arial, Helvetica, sans-serif;
+	vertical-align: top;
+	font: bold 18px Arial, Helvetica, sans-serif;
 }
 
-TD.calDayHead { font: bold 12px Arial, Helvetica, sans-serif; }
+TD.calDayHead {
+	font: bold 12px Arial, Helvetica, sans-serif;
+	text-align: center;
+}
 
 DIV.calImg {
-  overflow: hidden;
-  vertical-align: bottom;
-  z-index: 1;
-  position: relative; /*<- this required by IE*/
+	overflow: hidden;
+	vertical-align: bottom;
+	z-index: 1;
+	position: relative; /*<- this required by IE*/
 }
 
 .calImg img {
-  position: relative;
-  border: 0;
+	position: relative;
+	border: 0;
 }
 
 .calBackDate {
-  padding-left: 4px;
-  padding-top: 0px;
-  z-index: 2;
-  position: absolute;
-  text-align: left;
-  vertical-align: top;
-  color: #000;
+	padding-left: 4px;
+	padding-top: 0px;
+	z-index: 2;
+	position: absolute;
+	vertical-align: top;
+	color: #000;
 }
 
 .calForeDate {
-  padding-left: 5px;
-  padding-top: 1px;
-  z-index: 3;
-  position: absolute;
-  text-align: left;
-  vertical-align: top;
-  color: #fff;
+	padding-left: 5px;
+	padding-top: 1px;
+	z-index: 3;
+	position: absolute;
+	vertical-align: top;
+	color: #fff;
 }
 
 /* Category thumbnails on main page, CSS code inspired from MOD subcatify */
 .content UL.thumbnailCategories {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-  text-align: center;
-  overflow: hidden;
-  width: 100%;
+	margin: 0;
+	padding: 0;
+	list-style: none;
+	overflow: hidden;
+	width: 100%;
 }
 
 .content UL.thumbnailCategories LI {
-  margin:0;
-  padding:0;
-  float:left;
+	margin:0;
+	padding:0;
+	float:left;
 }
 
 .content DIV.thumbnailCategory {
-  display:block;
-  padding: 2px 0px 0px 2px;
-  margin: 5px;
+	display:block;
+	padding: 2px 0px 0px 2px;
+	margin: 5px;
 }
 
 .content DIV.thumbnailCategory DIV.description {
-  font-size: 90%;
-  overflow: auto;
-  /*width: inherit;*/
+	font-size: 90%;
+	overflow: auto;
+	/*width: inherit;*/
 }
 
 .content DIV.thumbnailCategory DIV.description H3 {
-  text-align: left;
-  background: transparent;
-  margin: 0;
-  padding: 0.1em;
-  font-size: 120%;
+	text-align: left;
+	background: transparent;
+	margin: 0;
+	padding: 0.1em;
+	font-size: 120%;
 }
 
 .content DIV.thumbnailCategory DIV.description P {
-  margin: 0;
+	margin: 0;
 }
 
 .content DIV.thumbnailCategory DIV.illustration {
-  text-align: left;
-  margin: 2px 0 0 2px;
-  float: left;
+	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 1534e4f11..74ba33ac2 100644
--- a/template/yoga/default-colors.css
+++ b/template/yoga/default-colors.css
@@ -16,91 +16,89 @@
 /* IE <= 6 is so bad with this that you can't merge with the following rule */
 INPUT[type="text"], INPUT[type="password"], INPUT[type="button"],
 INPUT[type="submit"], INPUT[type="reset"], INPUT[type="file"] {
-  color:black;
-  background-color: #d3d3d3;	/* lightgrey */
+	color:black;
+	background-color: #d3d3d3;	/* lightgrey */
 }
 
 INPUT.text, INPUT.password, INPUT.button,
 INPUT.submit, INPUT.reset, INPUT.file,
 SELECT, TEXTAREA {
-  color:black;
-  background-color: #d3d3d3;	/* lightgrey */
+	color:black;
+	background-color: #d3d3d3;	/* lightgrey */
 }
 
 INPUT:focus, SELECT:focus, TEXTAREA:focus, INPUT.focus, FORM .focus {
-  background-color: #f5f5f5;	/* whitesmoke */
+	background-color: #f5f5f5;	/* whitesmoke */
 }
 
 /* some theme set a border on INPUT  which is not pretty for radio/checkbox */
 INPUT[type="radio"], INPUT[type="checkbox"] {
-  border: none;	/* <= Opera needs this */
+	border: none;	/* <= Opera needs this */
 }
 
 INPUT.radio, INPUT.checkbox {
-  border: none;	/* <= IE6 needs this */
+	border: none;	/* <= IE6 needs this */
 }
 
 /* rate buttons displayed like links */
 INPUT.rateButton, INPUT.rateButtonSelected, INPUT.rateButtonStarFull, INPUT.rateButtonStarEmpty {
-  color:inherit;
-  background-color:transparent;	/* Konqueror doesn't accept transparent here */
+	color:inherit;
+	background-color:transparent;	/* Konqueror doesn't accept transparent here */
 }
 
 .errors { /* Errors display */
-  color: red;
-  background-color: #ffe1e1;
-  font-weight: bold;
-  text-align: left;
-  margin: 5px;
-  border: 1px solid red;
-  background-image: url(icon/admin/errors.png);
-  background-repeat: no-repeat;
-  background-position: top right;
-  padding: 10px 50px 10px 10px;
+	color: red;
+	background-color: #ffe1e1;
+	font-weight: bold;
+	margin: 5px;
+	border: 1px solid red;
+	background-image: url(icon/admin/errors.png);
+	background-repeat: no-repeat;
+	background-position: top right;
+	padding: 10px 50px 10px 10px;
 }
 
 /**
  * Informations box in administration
  */
 .infos {
-  text-align: left;
-  color: #002000;
-  background-color: #98fb98; /* palegreen */
-  background-image: url(icon/admin/infos.png);
-  background-repeat: no-repeat;
-  background-position: top right;
-  margin: 5px;
-  padding: 10px 50px 10px 10px;
+	color: #002000;
+	background-color: #98fb98; /* palegreen */
+	background-image: url(icon/admin/infos.png);
+	background-repeat: no-repeat;
+	background-position: top right;
+	margin: 5px;
+	padding: 10px 50px 10px 10px;
 }
 
 /**
  * Header message like upgrade or adviser mode
  */
 .header_msgs {
-  text-align:center;
-  font-weight: bold;
-  color:#696969;	/* dimgray */
-  background-color: #d3d3d3;
-  margin: 1px;
-  padding: 1px;
+	text-align:center;
+	font-weight: bold;
+	color:#696969;	/* dimgray */
+	background-color: #d3d3d3;
+	margin: 1px;
+	padding: 1px;
 }
 
 /**
  * Header notes box in public/administration
  */
 .header_notes {
-  border: 1px solid #aaaaaa; /* border color and style */
-  text-align: center;
-  background-image: url(icon/note.png);
-  background-repeat: no-repeat;
-  background-position: top left;
-  font-weight: bold;
-  margin: 14px;
-  padding: 5px 00px 0px 0px;
+	border: 1px solid #aaaaaa; /* border color and style */
+	text-align: center;
+	background-image: url(icon/note.png);
+	background-repeat: no-repeat;
+	background-position: top left;
+	font-weight: bold;
+	margin: 14px;
+	padding: 5px 00px 0px 0px;
 }
 
 LEGEND {
-  font-style: italic;
+	font-style: italic;
 }
 
 /*calendar*/
diff --git a/template/yoga/default-layout.css b/template/yoga/default-layout.css
index c8b77d12e..055026651 100644
--- a/template/yoga/default-layout.css
+++ b/template/yoga/default-layout.css
@@ -1,19 +1,18 @@
 /* $Id$ */
 BODY {
-  margin: 5px;
-  padding: 0;
-  font-size: 0.8em;
-  font-family:  Univers, Helvetica, Optima, "Bitstream Vera Sans", sans-serif;
-  text-align: center; /* be nice to IE5 */
+	margin: 5px;
+	padding: 0;
+	font-size: 0.8em;
+	font-family:  Univers, Helvetica, Optima, "Bitstream Vera Sans", sans-serif;
 }
 
 
 H1 {
-  text-align: center;
-  font-size: 150%;
-  font-weight: bold;
-  padding: 0;
-  margin: 0.5em 0 1em 0;
+	text-align: center;
+	font-size: 150%;
+	font-weight: bold;
+	padding: 0;
+	margin: 0.5em 0 1em 0;
 }
 
 H2 {
@@ -38,33 +37,31 @@ IMG {
 }
 
 HR.separation {
-  visibility: hidden;
-  clear: both;
+	visibility: hidden;
+	clear: both;
 }
 
 #copyright {
-    clear: both;
-    font-size: 83%;
-    text-align: center;
-    margin: 0 0 10px 0;
+	clear: both;
+	font-size: 83%;
+	text-align: center;
+	margin: 0 0 10px 0;
 }
 
 /** General defaults **/
 INPUT, SELECT {
-  margin: 0;
-  font-size: 1em;	/* <= some browsers don't set it correctly */
+	margin: 0;
+	font-size: 1em;	/* <= some browsers don't set it correctly */
 }
-UL, DL, LI { text-align: left;}
-TABLE {			/* horizontaly centered */
-  margin-left: auto;
-  margin-right: auto;
+
+TABLE {	/* horizontaly centered */
+	margin-left: auto;
+	margin-right: auto;
 }
-/* for debugging purpose */
-PRE { text-align:left; }
 
 /** forms **/
 
-FORM { padding: 0em; }
+FORM { padding: 0; margin: 0; }
 
 FORM P {
 	text-align: center;
@@ -78,20 +75,14 @@ FORM FIELDSET P {
 }
 
 TEXTAREA.description {
-  height: 6em;
-  width: 40em;
-  overflow: auto;
+	height: 6em;
+	width: 40em;
+	overflow: auto;
 }
 
 SELECT.categoryList {
-  height: 20em;
-  width: auto;
-}
-
-DIV.comment BLOCKQUOTE {
-  padding: 0.5em;
-  overflow: auto;	/* no solution for IE6 */
-  min-height: 2.75em;	/* fix a Gecko bug whith scrollbar and 1 line only */
+	height: 20em;
+	width: auto;
 }
 
 
@@ -101,9 +92,9 @@ DIV.comment BLOCKQUOTE {
  * Use a SPAN to group objects in line
  */
 FIELDSET {
-  padding: 1em;
-  margin: 1em;
-  overflow: hidden; /* <- makes Opera happy */
+	padding: 1em;
+	margin: 1em;
+	overflow: hidden; /* <- makes Opera happy */
 }
 
 FORM.filter FIELDSET UL {
@@ -111,26 +102,26 @@ FORM.filter FIELDSET UL {
 }
 FORM.filter FIELDSET UL,
 FORM.filter FIELDSET LABEL {
-  display: block;
-  float: left;
-  margin-right: 1em;
-  padding: 0;
+	display: block;
+	float: left;
+	margin-right: 1em;
+	padding: 0;
 }
 
 FORM.filter FIELDSET LI {
-  list-style: none;
-  margin-bottom: 0.5em;
+	list-style: none;
+	margin-bottom: 0.5em;
 }
 
 FORM.filter FIELDSET LI LABEL {
-  display: inline;
-  float: none;
+	display: inline;
+	float: none;
 }
 
 FORM.filter FIELDSET UL.tagSelection LABEL {
-  display: inline;
-  float: none;
-  margin-right:0.5em;/*reduce from above*/
+	display: inline;
+	float: none;
+	margin-right:0.5em;/*reduce from above*/
 }
 
 /* cannot use FIELDSET>LABEL because of IE<=6 */
@@ -185,52 +176,48 @@ FORM.properties LI {
 }
 
 FORM.properties SPAN.property {
-  font-weight: bold;
-  float: left;
-  width: 50%;
-  text-align: right;
-  margin: 0;
-  padding: 0 0.5em 0 0;
-}
-
-#theHeader H1 {
-  margin-bottom: 0.5em;
+	font-weight: bold;
+	float: left;
+	width: 50%;
+	text-align: right;
+	margin: 0;
+	padding: 0 0.5em 0 0;
 }
 
 /* button tools */
 UL.actions {
-  text-indent: 0;
-  list-style: none;
+	text-indent: 0;
+	list-style: none;
 }
-UL.actions  LI {
-  display: inline;
+UL.actions LI {
+	display: inline;
 }
-UL.actions  A {
-  border: none;
+UL.actions A, UL.actions IMG {
+	border: none;
 }
 
 UL.tagSelection {
-  width: 99%;
-  margin: 1em 0 1em 0;
-  padding: 0;
+	width: 99%;
+	margin: 1em 0 1em 0;
+	padding: 0;
 }
 
 UL.tagSelection LI {
-  display: inline;
-  white-space: nowrap;
+	display: inline;
+	white-space: nowrap;
 }
 
 #fullTagCloud {
-  font-size: 120%;
-  text-align: justify;
-  padding: 0;
-  margin: 1em 2em 1em 2em;
+	font-size: 120%;
+	text-align: justify;
+	padding: 0;
+	margin: 1em 2em 1em 2em;
 }
 
 #fullTagCloud LI {
-  display: inline;
-  white-space: nowrap;
-  margin: 0 2px;
+	display: inline;
+	white-space: nowrap;
+	margin: 0 2px;
 }
 
 
@@ -243,51 +230,50 @@ UL.tagSelection LI {
 
 /* Popup help page */
 BODY#thePopuphelpPage #copyright {
-  display: none;
+	display: none;
 }
 
 BODY#thePopuphelpPage .content P {
-  text-align: justify;
-  padding: 0.5em;
+	text-align: justify;
+	padding: 0.5em;
 }
 
 BODY#thePopuphelpPage .content OL LI,
 BODY#thePopuphelpPage .content UL LI
 {
-  margin-bottom: 0.5em;
+	margin-bottom: 0.5em;
 }
 
 BODY#thePopuphelpPage P#pageBottomActions A {
-  border: none;
+	border: none;
 }
 
 TR.tagLine {
-  border-bottom: 1px solid #ddd;
-  text-align: left;
+	border-bottom: 1px solid #ddd;
 }
 TD.nbEntries {
-  text-align: right;
-  font-style: italic;
-  font-size: 90%;
+	text-align: right;
+	font-style: italic;
+	font-size: 90%;
 }
 
 FIELDSET.tagLetter {
-  border: 1px solid #d3d3d3;
-  width: 200px;
-  margin: 0.5em;
-  padding: 10px;
+	border: 1px solid #d3d3d3;
+	width: 200px;
+	margin: 0.5em;
+	padding: 10px;
 }
 
 LEGEND.tagLetterLegend {
-  border: 1px solid #d3d3d3;
-  font-size:120%;
-  font-weight: bold;
-  padding: 0 5px;
-  font-style: normal;
+	border: 1px solid #d3d3d3;
+	font-size:120%;
+	font-weight: bold;
+	padding: 0 5px;
+	font-style: normal;
 }
 
 TABLE.tagLetterContent {
-  width:100%;
-  font-size:80%;
-  border-collapse : collapse;
+	width:100%;
+	font-size:80%;
+	border-collapse : collapse;
 }
diff --git a/template/yoga/identification.tpl b/template/yoga/identification.tpl
index 71ba02750..944954be5 100644
--- a/template/yoga/identification.tpl
+++ b/template/yoga/identification.tpl
@@ -55,11 +55,6 @@
   </fieldset>
 
   <p><input class="submit" tabindex="4" type="submit" name="login" value="{'Submit'|@translate}"></p>
-</form>
-
-<script type="text/javascript"><!--
-document.login_form.username.focus();
-//--></script>
 
   <p>
     {if isset($U_REGISTER) }
@@ -68,4 +63,10 @@ document.login_form.username.focus();
     <a href="{$U_LOST_PASSWORD}" title="{'Forgot your password?'|@translate}"><img src="{$ROOT_URL}{$themeconf.icon_dir}/lost_password.png" class="button" alt="{'Forgot your password?'|@translate}"> {'Forgot your password?'|@translate}</a>
   </p>
 
+</form>
+
+<script type="text/javascript"><!--
+document.login_form.username.focus();
+//--></script>
+
 </div> <!-- content -->
diff --git a/template/yoga/menubar.css b/template/yoga/menubar.css
index c777213c3..94f1d0a56 100644
--- a/template/yoga/menubar.css
+++ b/template/yoga/menubar.css
@@ -3,7 +3,6 @@
 	margin: 0 0 10px 1em;
 	padding: 0;
 	display: inline;
-	text-align: left; /* follow-up of the "be nice to IE5" rule */
 }
 
 #menubar DL, #menubar DT, #menubar DD {
@@ -23,19 +22,16 @@
 /* H2 properties copied here */
 #menubar DT {
 	font-weight: bold;
-	margin: 0;
 	padding: 5px 5px 5px 5px;
 	font-size: 120%;
 	text-align: center;
 }
 
 #menubar UL,
-#menubar HR,
 #menubar FORM,
-#menubar P, /* ooh, careful... */
-#menubar .totalImages {
+#menubar P {
 	font-size: 92%;
-	margin: 10px 0 10px 10px;
+	margin: 10px 0 10px 5px;
 }
 #menubar UL {
 	list-style-type: square;
@@ -57,83 +53,29 @@
 }
 
 #menubar .menuInfoCatByChild {
-  font-size: 80%;
-  font-style: italic;
+	font-size: 80%;
+	font-style: italic;
 }
 
-#menubar HR {
-	display: block;
-	margin: 10px auto;
-	width: 90%;
-}
 #menubar INPUT {
 	text-indent: 2px;
 }
 
 /* quickconnect form */
 FORM#quickconnect {
-	margin: 0;
-	padding: 5px;
+	margin: 5px;
+	padding: 0;
 }
 
 FORM#quickconnect FIELDSET {
 	margin: 0;
-	padding: 0 0 0.5em 0;
-}
-
-FORM#quickconnect P {
-	margin-left: 0;
-	font-size: 100%;
-	float: left;
-	clear: left;
-}
-
-FORM#quickconnect P INPUT {
-	margin: 0;
+	padding: 0; /*IE6 requires padding 0*/
 }
 
-FORM#quickconnect UL.actions {
-	display: inline;
-	float: right;
+FORM#quickconnect FIELDSET DIV {
+	margin: 8px 5px;
 	padding: 0;
-	text-align: right;	/* Opera 7.5 */
-}
-FORM#quickconnect FIELDSET>UL.actions {
-	width: 40%;		/* Opera 7.5 cannot find why width:auto fails :-( */
-}
-
-FORM#quickconnect UL.actions,
-FORM#quickconnect P,
-FORM#quickconnect LABEL {
-	padding: 0 0.5em 0 0.5em;
-}
-
-FORM#quickconnect LABEL {
-	margin:0;
-	width: 100%;
-	box-sizing: border-box; /* CSS3 */
-}
-
-FORM#quickconnect INPUT[type=text],
-FORM#quickconnect INPUT[type=password] {
-	width: 100%;	/* mozilla can handle 100% */
-}
-/* same as above for IE with inputfix.htc
-unfortunately IE doesn't handle that correctly
- so you should set a width in em in local_layout.css */
-/*FORM#quickconnect INPUT.text,
-FORM#quickconnect INPUT.password {
-  width: 95%;
-}*/
-
-FORM#quicksearch {
-	margin-top: 4px;
-	margin-bottom: 1px;
-}
-INPUT#qsearchInput {
-	width: 90%;
 }
-#menubar #mbMenu p { margin: 0px; padding: 0px; }
 
 #menubar #menuTagCloud {
 	text-align: center;
diff --git a/template/yoga/menubar.tpl b/template/yoga/menubar.tpl
index eb260eeea..4dcb6bb45 100644
--- a/template/yoga/menubar.tpl
+++ b/template/yoga/menubar.tpl
@@ -80,8 +80,8 @@
   <dt>{'title_menu'|@translate}</dt>
   <dd>
     <form action="{$ROOT_URL}qsearch.php" method="get" id="quicksearch">
-      <p>
-        <input type="text" name="q" id="qsearchInput" onfocus="if (value==qsearch_prompt) value='';" onblur="if (value=='') value=qsearch_prompt;" />
+      <p style="margin:0;padding:0"> {*this <p> is for html validation only - does not affect positioning*}
+        <input type="text" name="q" id="qsearchInput" onfocus="if (value==qsearch_prompt) value='';" onblur="if (value=='') value=qsearch_prompt;" style="width:90%"/>
       </p>
     </form>
     <script type="text/javascript">var qsearch_prompt="{'qsearch'|@translate|@escape:'javascript'}"; document.getElementById('qsearchInput').value=qsearch_prompt;</script>
@@ -125,36 +125,35 @@
   </ul>
   
   {if isset($U_IDENTIFY)}
-  <form method="post" action="{$U_IDENTIFY}" class="filter" id="quickconnect">
+  <form method="post" action="{$U_IDENTIFY}" id="quickconnect">
   <fieldset>
     <legend>{'Quick connect'|@translate}</legend>
-
-    <label>
-      {'Username'|@translate}
-      <input type="text" name="username" size="15" value="">
-    </label>
-
-    <label>
-      {'Password'|@translate}
-      <input type="password" name="password" size="15">
-    </label>
-
-    {if $AUTHORIZE_REMEMBERING}
-    <label>
-      {'remember_me'|@translate}
-      <input type="checkbox" name="remember_me" value="1">
-    </label>
-    {/if}
-    <p>
-     <input class="submit" type="submit" name="login" value="{'Submit'|@translate}">
-    </p>
-    
-    <ul class="actions">
-      <li><a href="{$U_LOST_PASSWORD}" title="{'Forgot your password?'|@translate}" rel="nofollow"><img src="{$ROOT_URL}{$themeconf.icon_dir}/lost_password.png" class="button" alt="{'Forgot your password?'|@translate}"></a></li>
-      {if isset($U_REGISTER)}
-      <li><a href="{$U_REGISTER}" title="{'Create a new account'|@translate}" rel="nofollow"><img src="{$ROOT_URL}{$themeconf.icon_dir}/register.png" class="button" alt="{'Register'|@translate}"/></a></li>
-      {/if}
-    </ul>
+		<div>
+			<label for="username">{'Username'|@translate}</label><br/>
+			<input type="text" name="username" id="username" value="" style="width:99%">
+		</div>
+
+		<div><label for="password">{'Password'|@translate}</label>
+		  <br/>
+			<input type="password" name="password" id="password" style="width:99%">
+		</div>
+
+		{if $AUTHORIZE_REMEMBERING}
+		<div><label>
+			{'remember_me'|@translate}
+			<input type="checkbox" name="remember_me" value="1">
+		</label></div>
+		{/if}
+
+		<div>
+			<ul class="actions">
+				<li><a href="{$U_LOST_PASSWORD}" title="{'Forgot your password?'|@translate}" rel="nofollow"><img src="{$ROOT_URL}{$themeconf.icon_dir}/lost_password.png" class="button" alt="{'Forgot your password?'|@translate}"></a></li>
+				{if isset($U_REGISTER)}
+				<li><a href="{$U_REGISTER}" title="{'Create a new account'|@translate}" rel="nofollow"><img src="{$ROOT_URL}{$themeconf.icon_dir}/register.png" class="button" alt="{'Register'|@translate}"/></a></li>
+				{/if}
+			</ul>
+			<input class="submit" type="submit" name="login" value="{'Submit'|@translate}">
+		</div>
 
   </fieldset>
   </form>
diff --git a/template/yoga/not-ie.css b/template/yoga/not-ie.css
index 9fc85502c..0a4bfe618 100644
--- a/template/yoga/not-ie.css
+++ b/template/yoga/not-ie.css
@@ -7,17 +7,6 @@
   -moz-border-radius: 4px;	/* round corners with Geko */
   -webkit-border-radius: 4px; /* Safari webkit project */
 }
-.content DIV#comments {
-  padding-left: 5px;
-  padding-right: 5px;
-  -moz-box-sizing: padding-box !important;
-}
-FORM#quickconnect LABEL {
-  margin:0;
-  width: 100%;
- -moz-box-sizing: padding-box !important;
-  box-sizing: border-box; /* CSS3 */
-}
 ul.tabsheet li {
   -moz-border-radius: 6px 6px 0px 0px;	/* round corners with Geko */
   -webkit-border-radius: 6px 6px 0px 0px; /* Safari webkit project */
diff --git a/template/yoga/picture.css b/template/yoga/picture.css
index 945d729a4..f753009b3 100644
--- a/template/yoga/picture.css
+++ b/template/yoga/picture.css
@@ -46,16 +46,13 @@
 
 #theImage {
     clear: left;
+    text-align: center;
 }
 
 #theImage>IMG {
-    display: block;
-    margin: 0 auto;
-}
-
-#theImage IMG {
-  border-width: 3px;
-  border-style: solid;
+	display: block;
+	margin: 0 auto;
+	border: none;
 }
 
 #linkPrev {
@@ -76,20 +73,16 @@
 	margin-left: 10px;
 }
 
-TABLE.infoTable .value {
-    text-align: left;
-}
-
 TABLE.infoTable .label {
-    font-weight: bold;
-    text-align: right;
-    padding-right: 0.5em;
+	font-weight: bold;
+	text-align: right;
+	padding-right: 0.5em;
 }
 
 TABLE.infoTable TD.value UL {
-  margin: 0;
-  padding: 0 0 0 1.5em;
-  list-style-type: square;
+	margin: 0;
+	padding: 0 0 0 1.5em;
+	list-style-type: square;
 }
 
 .rateButton, .rateButtonSelected, .rateButtonStarFull, .rateButtonStarEmpty  {
@@ -114,27 +107,3 @@ TABLE.infoTable TD.value UL {
 	background: url('icon/rating-stars.gif') no-repeat scroll; background-position:0 center; width:16px;
 }
 
-#comments {
-  text-align: left;
-}
-
-#comments .comment {
-  margin: 1em 0;
-}
-
-#comments P {
-  margin: 0 0.5em 0 1em;
-}
-
-#comments .author {
-  font-weight: bold;
-}
-
-#thePicturePage #comments BLOCKQUOTE {
-  margin: 0.5em 1em 1em 4em;
-}
-
-#comments P.userCommentDelete {
-  float: right;
-  margin: 0 0.5em 0 0;
-}
diff --git a/template/yoga/picture.tpl b/template/yoga/picture.tpl
index a807eb728..fa76a7e01 100644
--- a/template/yoga/picture.tpl
+++ b/template/yoga/picture.tpl
@@ -178,6 +178,7 @@ y.callService(
     </select>
   </td></tr>
   {/if}
+
   {if isset($rate_summary) }
   <tr>
     <td class="label">{'Average rate'|@translate}</td>
@@ -191,6 +192,35 @@ y.callService(
     </td>
   </tr>
   {/if}
+  
+{if isset($rating)}
+	<tr>
+		<td class="label">
+			<span id="updateRate">{if isset($rating.USER_RATE)}{'update_rate'|@translate}{else}{'new_rate'|@translate}{/if}</span>
+		</td>
+		<td class="value">
+			<form action="{$rating.F_ACTION}" method="post" id="rateForm" style="margin:0;">
+			<div>&nbsp;
+			{foreach from=$rating.marks item=mark name=rate_loop}
+			{if !$smarty.foreach.rate_loop.first} | {/if}
+			{if isset($rating.USER_RATE) && $mark==$rating.USER_RATE}
+			  <input type="button" name="rate" value="{$mark}" class="rateButtonSelected" />
+			{else}
+			  <input type="submit" name="rate" value="{$mark}" class="rateButton" />
+			{/if}
+			{/foreach}
+			<script type="text/javascript" src="{$ROOT_URL}{$themeconf.template_dir}/rating.js"></script>
+			<script type="text/javascript">
+			makeNiceRatingForm( {ldelim}rootUrl: '{$ROOT_URL|@escape:"javascript"}', image_id: {$current.id},
+			updateRateText: "{'update_rate'|@translate|@escape:'javascript'}", updateRateElement: document.getElementById("updateRate"),
+			ratingSummaryText: "{'%.2f (rated %d times, standard deviation = %.2f)'|@translate|@escape:'javascript'}", ratingSummaryElement: document.getElementById("ratingSummary") {rdelim} );
+			</script>
+			</div>
+			</form>
+		</td>
+	</tr>
+{/if}
+
 </table>
 
 {if isset($metadata)}
@@ -209,28 +239,6 @@ y.callService(
 </table>
 {/if}
 
-{if isset($rating)}
-<form action="{$rating.F_ACTION}" method="post" id="rateForm">
-<div>
-<span id="updateRate">{if isset($rating.USER_RATE)}{'update_rate'|@translate}{else}{'new_rate'|@translate}{/if}</span>
-:
-{foreach from=$rating.marks item=mark name=rate_loop}
-{if !$smarty.foreach.rate_loop.first} | {/if}
-{if isset($rating.USER_RATE) && $mark==$rating.USER_RATE}
-  <input type="button" name="rate" value="{$mark}" class="rateButtonSelected" />
-{else}
-  <input type="submit" name="rate" value="{$mark}" class="rateButton" />
-{/if}
-{/foreach}
-<script type="text/javascript" src="{$ROOT_URL}{$themeconf.template_dir}/rating.js"></script>
-<script type="text/javascript">
-makeNiceRatingForm( {ldelim}rootUrl: '{$ROOT_URL|@escape:"javascript"}', image_id: {$current.id}, 
-updateRateText: "{'update_rate'|@translate|@escape:'javascript'}", updateRateElement: document.getElementById("updateRate"),
-ratingSummaryText: "{'%.2f (rated %d times, standard deviation = %.2f)'|@translate|@escape:'javascript'}", ratingSummaryElement: document.getElementById("ratingSummary") {rdelim} );
-</script>
-</div>
-</form>
-{/if}
 
 <hr class="separation">
 
@@ -241,19 +249,7 @@ ratingSummaryText: "{'%.2f (rated %d times, standard deviation = %.2f)'|@transla
   <div class="navigationBar">{$COMMENT_NAV_BAR}</div>
 
   {if isset($comments)}
-  {foreach from=$comments item=comment}
-  <div class="comment">
-    {if isset($comment.U_DELETE)}
-    <p class="userCommentDelete">
-    <a href="{$comment.U_DELETE}" title="{'comments_del'|@translate}">
-      <img src="{$ROOT_URL}{$themeconf.icon_dir}/delete.png" class="button" style="border:none;vertical-align:middle; margin-left:5px;" alt="[{'delete'|@translate}]"/>
-    </a>
-    </p>
-    {/if}
-    <p class="commentInfo"><span class="author">{$comment.AUTHOR}</span> - {$comment.DATE}</p>
-    <blockquote>{$comment.CONTENT}</blockquote>
-  </div>
-  {/foreach}
+		{include file='comment_list.tpl'}
   {/if}
 
   {if isset($comment_add)}
@@ -273,4 +269,6 @@ ratingSummaryText: "{'%.2f (rated %d times, standard deviation = %.2f)'|@transla
 </div>
 {/if} {*comments*}
 
+
+
 {if !empty($PLUGIN_PICTURE_AFTER)}{$PLUGIN_PICTURE_AFTER}{/if}
diff --git a/template/yoga/theme/clear/theme.css b/template/yoga/theme/clear/theme.css
index cff996521..033073494 100644
--- a/template/yoga/theme/clear/theme.css
+++ b/template/yoga/theme/clear/theme.css
@@ -20,13 +20,12 @@ H2, #menubar DT, #imageHeaderBar, #imageToolBar A:hover, .row1 {
 }
 
 /* borders */
-#menubar DL, .content, #imageToolBar, 
-#comments DIV.comment BLOCKQUOTE {
+#menubar DL, .content, #imageToolBar {
   border: 1px solid #d3d3d3;
 }
 
 #theImage IMG {
-  border-color: #d3d3d3;
+  border: 3px solid #d3d3d3;
 }
 
 .content UL.thumbnail IMG {
@@ -39,11 +38,6 @@ FIELDSET, INPUT, SELECT, TEXTAREA,
   border: 1px solid gray;
 }
 
-#comments DIV.comment BLOCKQUOTE {
-  border-left: 2px solid #696969;
-  background-color: #eee;
-}
-
 .content UL.thumbnails SPAN.wrap2 {
   border: 1px solid #aaaaaa;	/* thumbnails border color and style */
   border-radius: 4px 4px;	/* round corners with CSS3 compliant browsers */
@@ -82,7 +76,6 @@ SPAN.calItem, SPAN.calItemEmpty
 }
 
 .virtual_cat { background: #fff !important; }
-#mbMenu #quicksearch > p { text-align: left; }
 #qsearchInput { color: #d3d3d3; }
 #qsearchInput:focus { color: #005e89; }
 
diff --git a/template/yoga/theme/dark/theme.css b/template/yoga/theme/dark/theme.css
index 690bdda1d..f89c42a27 100644
--- a/template/yoga/theme/dark/theme.css
+++ b/template/yoga/theme/dark/theme.css
@@ -38,8 +38,7 @@ H2, #menubar DT, .throw {
 }
 
 /* borders */
-#menubar DL, .content,
-#comments DIV.comment BLOCKQUOTE {
+#menubar DL, .content{
 	border: 1px solid #000000;
 }
 
@@ -50,20 +49,12 @@ H2, #menubar DT, #imageToolBar {
 	border-bottom: 1px solid #000000;
 }
 
-#theImage IMG {
-	border-color: #000000;
-}
-
 FIELDSET, INPUT, SELECT, TEXTAREA,
 .content DIV.comment  A.illustration IMG,
 .content DIV.thumbnailCategory {
 	border: 1px solid gray;
 }
 
-#comments DIV.comment BLOCKQUOTE {
-	border-left: 2px solid #696969;
-}
-
 .content UL.thumbnails SPAN.wrap2 {
 	border: 1px solid #aaaaaa;	/* thumbnails border color and style */
 	border-radius: 4px 4px;	/* round corners with CSS3 compliant browsers */
diff --git a/template/yoga/theme/p0w0/theme.css b/template/yoga/theme/p0w0/theme.css
index 1eb981df1..d7fd45003 100644
--- a/template/yoga/theme/p0w0/theme.css
+++ b/template/yoga/theme/p0w0/theme.css
@@ -162,9 +162,6 @@ A:hover { text-decoration: none; border: 0px; }
   border-top: 2px solid #69c;
   border-bottom: 1px solid #369;
 }
-#comments DIV.comment BLOCKQUOTE {
-  border: 1px solid #fff;
-}
 H2, #imageToolBar {
   border-bottom: 1px solid #fff;
 }
@@ -216,11 +213,6 @@ ul.tabsheet, ul.tabsheet li { border-color: #369 !important; }
 label { cursor:pointer }
 .zero { display: none }
 
-#the_page {
-  text-align:center;
-  display:block;
-}
-
 input[type="text"], input[type="password"], input.button,
 input.submit, input.reset, input.file,
 select, textarea {
diff --git a/template/yoga/theme/wipi/theme.css b/template/yoga/theme/wipi/theme.css
index 3a6144a96..60829051c 100644
--- a/template/yoga/theme/wipi/theme.css
+++ b/template/yoga/theme/wipi/theme.css
@@ -155,9 +155,6 @@ H2, #menubar DT, .throw, TD H3 {
 }
 
 /* borders */
-#comments DIV.comment BLOCKQUOTE {
-  border: 1px solid #000;
-}
 #imageHeaderBar {
   border-top: 1px solid #000;
   padding: 8px 0px 3px 0px;
@@ -167,7 +164,7 @@ H2, #imageToolBar {
 }
 
 #theImage IMG {
-  border-color: #fff;
+  border: 3px solid #fff;
 }
 
 .content UL.thumbnail IMG {
@@ -185,9 +182,6 @@ FIELDSET, INPUT, SELECT, TEXTAREA,
   border: 1px solid #69c;
   margin: 8px 4px;
 }
-#comments DIV.comment BLOCKQUOTE {
-  border-left: 2px solid #696969;
-}
 
 .content UL.thumbnails SPAN.wrap2 {
   border: 1px solid #aaaaaa;	/* thumbnails border color and style */
@@ -228,8 +222,6 @@ A.navThumb, A.navThumb:hover {
   border: 1px dotted #f92;
   padding-top: 5px;
   padding-bottom:30px;
-  text-align:center;
-  display:block;
   margin: 2px;
 }
 #copyright {
@@ -251,22 +243,17 @@ input#qsearchInput {
 
 FORM#quickconnect,
 FORM#quickconnect FIELDSET,
-FORM#quickconnect P,
+FORM#quickconnect DIV,
 FORM#quickconnect UL.actions,
-FORM#quickconnect FIELDSET>UL.actions,
-FORM#quickconnect UL.actions,
-FORM#quickconnect P,
 FORM#quickconnect LABEL {
   color: #69c;   
 }
-FORM#quickconnect P INPUT,
+FORM#quickconnect DIV INPUT,
 FORM#quickconnect INPUT[type=text],
 FORM#quickconnect INPUT[type=password] {
-  width: 85%;
   color: #58c;   
   background-color: #222;  
   border: 1px solid #333;
-  padding: 1px 3px;
 }