updated styling to what bproductiv did

extra/auquotidien.py

@@ -3,6 +3,7 @@ import modules.links_ui
 import modules.announces_ui
 
 import modules.admin
+import modules.formpage
 
 import modules.template
 

extra/modules/admin.ptl

@@ -71,7 +71,7 @@ class UpdateDirectory(Directory):
 
 
 class ArticlesDirectory(Directory):
-    _q_exports = ('editor_info', 'accessibility', 'contact')
+    _q_exports = ('editor_info', 'accessibility', 'contact', 'help')
 
     def editor_info(self):
         return self.page_edit('editor_info', _('Editor Informations'))
@@ -82,6 +82,8 @@ class ArticlesDirectory(Directory):
     def contact(self):
         return self.page_edit('contact', _('Contact'))
 
+    def help(self):
+        return self.page_edit('help', _('Help'))
 
     def page_edit [html] (self, filename, title):
         '<h2>%s</h2>' % title
@@ -133,6 +135,7 @@ class PanelDirectory(Directory):
         ' <li><a href="articles/editor_info">%s</a></li>' % _('Editor Informations')
         ' <li><a href="articles/accessibility">%s</a></li>' % _('Accessibility Statement')
         ' <li><a href="articles/contact">%s</a></li>' % _('Contact')
+        ' <li><a href="articles/help">%s</a></li>' % _('Help')
         '</ul>'
 
         '<h3>%s</h3>' % _('Available Forms')

extra/modules/formpage.ptl

@@ -0,0 +1,36 @@
+from quixote import get_publisher, get_request, redirect
+from quixote.directory import Directory
+from quixote.html import htmltext
+
+import os
+
+import wcs
+import wcs.forms.root
+from qommon import get_publisher_class
+from qommon import template
+from qommon import errors
+from qommon.form import *
+from wcs.roles import logged_users_role
+
+from qommon import emails
+
+OldFormPage = wcs.forms.root.FormPage
+
+class AlternateFormPage(OldFormPage):
+    def step(self, *args, **kwargs):
+        steps_html = OldFormPage.step(self, *args, **kwargs)
+        steps_html = str(steps_html).replace('<ol>', '<h2>%s</h2>\n<ol>' % _('Steps'))
+        get_response().filter['gauche'] = steps_html
+        return
+
+wcs.forms.root.FormPage = AlternateFormPage
+
+
+OldFormsRootDirectory = wcs.forms.root.RootDirectory
+
+class AlternateFormsRootDirectory(OldFormsRootDirectory):
+    def form_list(self, *args, **kwargs):
+        form_list = OldFormsRootDirectory.form_list(self, *args, **kwargs)
+        return htmltext(str(form_list).replace('h2>', 'h3>'))
+
+wcs.forms.root.RootDirectory = AlternateFormsRootDirectory

extra/modules/root.ptl

@@ -67,14 +67,11 @@ class AnnouncesDirectory(Directory):
         '</p>'
 
         '<ul>'
-        ' <li><a href="email">%s</a></li>' % _('Email')
-        ' <li><a href="sms">%s</a></li>' % _('SMS')
+        ' <li><a href="email" id="par_mail">%s</a></li>' % _('Email')
+        ' <li><a href="sms" id="par_sms">%s</a></li>' % _('SMS')
+        ' <li><a class="feed-link" href="atom" id="par_rss">%s</a>' % _('Feed')
         '</ul>'
 
-        '<p>'
-        _('There is also a feed available: ')
-        '<a class="feed-link" href="atom">%s</a>' % _('Announces Feed')
-        '</p>'
 
     def email [html] (self):
         get_response().breadcrumb.append(('email', _('Email Subscription')))
@@ -223,6 +220,21 @@ If you do nothing, the request will lapse after 3 days (precisely on
         raise NotImplementedError
 
 
+OldRegisterDirectory = wcs.root.RegisterDirectory
+
+class AlternateRegisterDirectory(OldRegisterDirectory):
+    def _q_traverse(self, path):
+        get_response().filter['bigdiv'] = 'new_member'
+        return OldRegisterDirectory._q_traverse(self, path)
+
+
+OldLoginDirectory = wcs.root.LoginDirectory
+
+class AlternateLoginDirectory(OldLoginDirectory):
+    def _q_traverse(self, path):
+        get_response().filter['bigdiv'] = 'member'
+        return OldLoginDirectory._q_traverse(self, path)
+
 
 
 class AlternateRootDirectory(OldRootDirectory):
@@ -233,16 +245,19 @@ class AlternateRootDirectory(OldRootDirectory):
             'accessibility', 'contact', 'help']
 
     announces_dir = AnnouncesDirectory()
+    register = AlternateRegisterDirectory()
+    login = AlternateLoginDirectory()
 
     def _q_index [html] (self):
         template.html_top()
 
-        '<div id="gauche">'
+        get_response().filter['gauche'] = self.links()
+
+        '<div id="centre">'
         self.services()
-        self.consultations()
         '</div>'
         '<div id="droite">'
-        self.links()
+        self.consultations()
         self.announces()
         '</div>'
 
@@ -372,16 +387,21 @@ class AlternateRootDirectory(OldRootDirectory):
             raise errors.TraversalError()
 
     def informations_editeur [html] (self):
+        get_response().filter['bigdiv'] = 'info'
         return self.page_view('editor_info', _('Editor Informations'))
 
     def accessibility(self):
+        get_response().filter['bigdiv'] = 'accessibility'
         return self.page_view('accessibility', _('Accessibility Statement'))
 
     def contact(self):
+        get_response().filter['bigdiv'] = 'contact'
         return self.page_view('contact', _('Contact'))
 
     def help(self):
-        raise NotImplementedError
+        get_response().filter['bigdiv'] = 'help'
+        return self.page_view('help', _('Help'))
+
 
 get_publisher_class().root_directory_class = AlternateRootDirectory
 

extra/modules/template.py

@@ -8,6 +8,10 @@ wcs_decorate = template.decorate
 def decorate(body, response):
     body = str(body)
 
+    for key in ('bigdiv', 'gauche'):
+        if not response.filter.has_key(key):
+            response.filter[key] = None
+
     section = get_request().get_path(-1)
     if section in ('/backoffice', '/admin'):
         return wcs_decorate(body, response)
@@ -16,7 +20,9 @@ def decorate(body, response):
     page_title = response.filter.get('title')
     if section == '/consultations':
         section_title = '<h2 id="consultations">%s</h2>\n' % _('Consultations')
+        response.filter['bigdiv'] = 'rub_consultation'
     elif section == '/announces':
+        response.filter['bigdiv'] = 'rub_annonce'
         section_title = '<h2 id="announces">%s</h2>\n' % _('Announces to citizens')
         if page_title == _('Announces to citizens'):
             page_title = ''
@@ -24,6 +30,7 @@ def decorate(body, response):
         # XXX: this works but is not efficient
         if Category.has_urlname(section[1:]):
             section_title = '<h2 id="services">%s</h2>\n' % _('Services')
+            response.filter['bigdiv'] = 'rub_service'
 
     if page_title:
         if section_title:

theme/template.ezt

@@ -4,20 +4,39 @@
   <head>
     <title>[page_title]</title>
     <link rel="stylesheet" type="text/css" href="[css]"/>
+    <link rel="shortcut icon" href="/themes/auquotidien/favicon.png" />
+    <!--\[if lt IE 7\]><script src="IE7_0_9/ie7-standard-p.js"
+    type="text/javascript"></script><!\[endif\]-->
     [script]
   </head>
   <body[if-any onload] onload="[onload]"[end]>
-    <div id="page">
-    <div id="top"> <h1>[site_name]</h1> </div>
-<p id="connection">
-[if-any user][user.display_name] - <a href="/logout">Déconnexion</a>
-  [else]<a href="/register/">Inscription</a> - <a href="/login/">Connexion</a>
-[end]
-</p>
+   <div id="page">
+    <div id="header">
+     <div id="top"> <h1><a href="/" accesskey="1"><span>[site_name]</span></a></h1> </div>
+     <div id="toplinks">
+      <ul>
+       [if-any user]<li>[user.display_name]</li>
+       <li><a href="/logout">Déconnexion</a></li>
+       [else]
+       <li><a href="/register/" id="inscr">Inscription</a></li>
+       <li><a href="/login/" id="login">Connexion</a></li>
+       [end]
+      </ul>
+     </div>
+    </div> <!-- header -->
+
     <div id="main-content">
-    [if-any breadcrumb]<p id="breadcrumb">[breadcrumb]</p>[end]
-    [if-any title]<h2>[title]</h2>[end]
+
+    <div id="gauche">
+    [if-any gauche][gauche][end]
+    </div>
+
+    [if-any breadcrumb]<p id="breadcrumb">[breadcrumb]</p>[else]
+    <p id="breadcrumb">[site_name], bienvenue !</p>[end]
+
+    [if-any bigdiv]<div id="[bigdiv]">[end]
     [body]
+    [if-any bigdiv]</div>[end]
     <hr />
     </div>
     <div id="footer">
@@ -25,9 +44,10 @@
     Copyright &copy; 2006 Entr'ouvert
     </p>
     <p id="bottom-links">
-     <a href="/help">Aide</a> -
-     <a href="/accessibility">Déclaration d'accessibilité</a> -
-     <a href="/informations-editeur">Informations éditeur</a>
+     <a href="/help">Aide</a>
+     <a href="/contact" accesskey="9" class="sep">Contact</a>
+     <a href="/accessibility" accesskey="0" class="sep">Déclaration d'accessibilité</a>
+     <a href="/informations-editeur" class="sep">Informations éditeur</a>
     </p>
     </div>
     </div>

theme/wcs-common.css

@@ -0,0 +1,253 @@
+div.content {
+	margin-left: 5px;
+}
+
+div.TextWidget textarea,
+div.StringWidget input,
+div.IntWidget input,
+div.DateWidget input,
+div.WcsExtraStringWidget input,
+div.RegexStringWidget input,
+div.EmailWidget input,
+div.PasswordWidget input {
+	border: 1px inset #ccc;
+	margin: 1px;
+	padding: 2px 3px;
+}
+
+div.SingleSelectWidget select {
+	margin: 1px;
+}
+
+div.widget input.prefill-button {
+	border: 1px outset #ccc;
+	margin: 0 0 0 1em;
+	padding: 0px 0px;
+}
+
+div.widget input.prefill-button:focus {
+	border: 1px outset #ccc;
+	margin: 0 0 0 1em;
+	padding: 0;
+}
+
+
+div.widget textarea.readonly,
+div.widget input.readonly {
+	border: 1px solid #ccc;
+	background: #eee;
+	margin: 0 0 0 1em;
+}
+
+div.TextWidget textarea:focus,
+div.DateWidget input:focus,
+div.StringWidget input:focus,
+div.IntWidget input:focus,
+div.WcsExtraStringWidget input:focus,
+div.RegexStringWidget input:focus,
+div.EmailWidget input:focus,
+div.PasswordWidget input:focus {
+	border: 2px solid #ccf;
+	/*margin: 0px; */
+	padding: 1px 2px;
+}
+
+div.AccountSettingWidget label {
+	padding-right: 2em;
+}
+
+div.SubmitWidget input, input[type=submit] {
+	margin-top: 1em;
+	border: 1px outset #ccc;
+}
+
+div.form .title, form.quixote .title {
+	font-weight: bold;
+	margin:0 0 0.5em;
+}
+
+div.errornotice {
+	background: #fd6;
+	border: 1px solid #ffae15;
+	margin: 0em 1em 1em 1em;
+	padding: 5px;
+}
+
+div.infonotice {
+	background: #7b95a6;
+	border: 1px solid #153eaf;
+	margin: 0em 1em 1em 1em;
+	padding: 5px;
+}
+
+div.error {
+	color: black;
+	font-weight: bold;
+	background: transparent url(warning.png) top left no-repeat;
+	padding-left: 20px;
+}
+
+div.buttons div.SubmitWidget,
+div.buttons div.SubmitWidget div.content {
+	display: inline;
+}
+
+div.buttons br { display: none; }
+
+div.widget {
+	margin-bottom: 0.5em;
+	/*clear: both;*/
+}
+
+input[type="submit"][name="submit"] {
+	font-weight: bold;
+}
+
+div.form pre {
+	overflow: scroll;
+}
+
+
+div#error h1 {
+	margin: 0;
+}
+
+div#error {
+	width: 40em;
+	max-width: 500px;
+	margin: 15% auto;
+	background: white;
+	border: 1px solid #999;
+	padding: 1em;
+}
+
+div.hint {
+	font-size: 80%;
+}
+
+span.required {
+	background: transparent url(/css/required.png) 0px 0.5ex no-repeat;
+	padding: 0 0 0 24px;
+	margin-left: 1ex;
+	overflow: hidden;
+	color: white;
+}
+
+div.buttons {
+	margin-top: 1em;
+}
+
+div.RadiobuttonsWidget div.content {
+	display: block;
+}
+
+div.error-page {
+	margin: 1em;
+}
+
+pre#exception {
+	overflow: scroll;
+	padding: 1em;
+	border: 1px solid #bbb;
+	background: #f0f0f0;
+	font-size: 90%;
+}
+
+div.StringWidget ul {
+	margin: 0;
+	padding-left: 2em;
+	list-style: circle;
+}
+
+div.inline-first div.title,
+div.inline div.title {
+	display: inline;
+	float: left;
+	max-width: 20em;
+	text-align: left;
+	padding-top: 6px;
+}
+
+div.inline-first div.title span.required,
+div.inline div.title span.required {
+	margin-left: 1ex;
+	padding-left: 12px;
+}
+
+div.inline-first div.content,
+div.inline div.content {
+	margin-left: 1ex;
+}
+
+div.inline-first div.hint,
+div.inline div.hint {
+	display: none;
+}
+
+div.inline-first {
+	float: left;
+	clear: both;
+}
+
+div.inline {
+	float: left;
+	clear: none;
+}
+
+div.inline-first div.content,
+div.inline div.content {
+	margin-right: 1.5em;
+}
+
+	
+
+div.inline-first div.content,
+div.inline div.content {
+	display: inline;
+}
+
+.clear-both {
+	clear: both;
+}
+
+div.CheckboxesWidget div.content ul {
+	list-style: none;
+}
+
+div.CheckboxesWidget div.content ul.inline li {
+	display: inline;
+	margin-right: 2em;
+}
+
+div.dataview {
+	clear: both;
+}
+
+div.dataview span.label {
+	font-weight: bold;
+	display: block;
+}
+
+div.dataview span.value {
+	display: block;
+	margin-left: 1em;
+}
+
+form div.page,
+div.dataview div.page {
+	border: 1px solid #aaa;
+	padding: 1ex;
+	margin-bottom: 1em;
+}
+
+form div.page p,
+div.dataview div.page p {
+	margin-top: 0;
+}
+
+form div.page h3,
+div.dataview div.page h3 {
+	margin: 0;
+	margin-bottom: 1ex;
+}
+

theme/wcs.css

@@ -1,4 +1,9 @@
-@import url(/css/wcs-common.css);
+@import url(wcs-common.css);
+/* ///////////////////////// GENERAL */
+*{
+	margin:0;
+	padding:0;
+}
 
 html {
 	/* vertical scrollbar; always (so the geometry doesn't change) */
@@ -6,35 +11,26 @@ html {
 	margin-bottom: 1px;
 }
 
-div#top h1 {
-	text-indent: -100em;
-	overflow: hidden;
-	background: transparent url(infos-publiques.png) center top no-repeat;
-	height: 90px;
-}
-
-h1 {
-	text-align: center;
-}
 
 body {
-	background: white url(path2760.png) no-repeat fixed bottom right;
-	color: black;
-	font-family: sans-serif;
+	text-align: center;
+	background:url(bg.gif);
+	color:#444;
+	font:95% Arial, Helvetica, sans-serif;
 }
 
-div#main-content {
-	margin: 0 4%;
+a {
+	color: #000;
+	text-decoration:none;
 }
 
-#gauche {
-	float: left;
-	width: 48%;
+a:hover {
+	/*text-decoration: underline;*/
 }
 
-#droite {
-	float: right;
-	width: 48%;
+
+ul {
+	list-style: none;
 }
 
 hr {
@@ -42,184 +38,673 @@ hr {
 	visibility: hidden;
 }
 
-div#links ul {
-	margin: 0;
-	padding: 0;
-}
-
-div#links li {
-	display: inline;
-	padding-right: 1.2em;
-}
-
-div#announces h2,
-div#announces h3 {
-}
-
-div#announces p {
-	text-align: justify;
-}
-
-div#announces p.subscribe {
-	text-align: right;
-}
-
-
-div#links,
-div.services {
-	margin-bottom: 2em;
-}
-
-div#footer {
-	margin-top: 2em;
-	font-size: 70%;
-	color: gray;
-	text-align: center;
-	border-top: 1px solid #ff0084;
-}
-
-div#footer p {
-	margin: 1ex 0 0 0;
-}
-
-#steps {
-	height: 32px;
-	margin-bottom: 1em;
-}
-
-#steps ol {
-	list-style: none;
-	padding: 0 20px;
-}
-
-#steps li {
-	display: inline;
-	padding-right: 1em;
-	display: block;
-	float: left;
-	width: 30%;
-	list-style: none;
-}
-
-#steps ol ul {
-	border: 1px solid #ffa500;
-	margin-left: 2em;
-	background: #ffdb94;
-	margin-bottom: 1em;
-	padding: 0;
-	width: auto;
-}
-
-#steps li li {
-	display: block;
-	width: auto;
-	float: none;
-	text-align: left;
-	margin-left: 1em;
-	font-size: 90%;
-}
-
-#steps li li.current {
-	color: black;
-}
-
-
-#steps span.marker {
-	font-size: 26px;
-	padding: 2px 9px;
-	font-weight: bold;
-	color: white;
-	text-align: center;
-	background: #ddd;
-	border: 1px solid #ddd;
-	-moz-border-radius: 0.7ex;
-}
-
-#steps li.current span.marker {
-	background: #ffa500;
-	border: 1px solid #ffc400;
-}
-
-#steps span.label {
-	font-size: 90%;
-}
-
-#steps li.current span.label {
-	color: black;
-}
-
-#steps {
-	background: #f0f0f0;
-	color: #aaa;
-}
-
-#steps ol ul {
-	display: none;
-}
-
-#steps ol li.current ul {
-	display: block;
-}
-
-p#legal {
-	float: left;
-}
-
-p#bottom-links {
-	float: right;
-}
-
-h2,
-h3 {
-	color: #2a60a0;
-	padding-left: 3px;
-	background: transparent url(path1872.png) no-repeat -280px 0px;
-}
-
-h3 a {
-	color: inherit;
-}
-
-h1 {
-}
-
-p#connection {
-	margin: 0;
-	position: absolute;
-	top: 1ex;
-	right: 1ex;
-	font-size: 80%;
-}
-
-p#connection a {
-	text-decoration: none;
-	font-weight: bold;
-}
 
 div.article {
-	max-width: 60em;
 	text-align: justify;
 }
 
-a.feed-link {
-	background: transparent url(/images/feed-icon-10x10.png) 5px 50% no-repeat;
-	padding-left: 20px;
+/* ///////////////////////// CONTENEUR */
+div#page {
+	width: 800px;
+	background: white url(silhouettes-poteau.jpg) left bottom no-repeat;
+	margin: 0 auto;
+	text-align: left;
+	border: 1px solid #c1c1c1;
+	border-width: 0 1px 1px 1px;
+	position: relative;
 }
 
-p#breadcrumb {
-	background: #e6e6e6;
-	-moz-border-radius: 6px;
-	padding: 3px 8px;
-	font-size: 80%;
-	border: 1px solid #bfbfbf;
+
+/* ///////////////////////// HEADER */
+
+div#top h1 {
+	width: 783px;
+	height: 145px;
+	margin:0 auto;
+	background:url(header.jpg) left top no-repeat;
 }
 
-p#breadcrumb a {
+div#top h1 a {
+	display:block;
+	height: 145px; /* so it is clickable everywhere */
+	width:680px;
+	text-decoration:none;
+}
+
+div#top h1 a:hover {
 	text-decoration: none;
-	border-bottom: 1px dotted blue;
 }
 
-p#breadcrumb a:hover {
+div#top h1 a span{display:none;}
+
+
+/* ///////////////////////// CONNEXION/INSCRIPTION */
+div#toplinks {
+	width: 113px;
+	height: 39px;
+	background:url(bg-member.gif) left top no-repeat;
+	padding:5px;
+	display:block;
+	float:right;
+	margin:-90px 5px 0 0;
+}
+
+div#toplinks ul {
+	margin: 0 0 0 15px;
+	list-style:none;
+}
+
+div#toplinks ul li{
+	margin: 0 0 5px;
+}
+
+div#toplinks a {
+	color: #555;
+	font-size:small;
+	width:80px;
+	height:15px;
+	display:block;
+}
+
+/* ///////////////////////// PUCE INSCRIPTION */
+div#toplinks li a#inscr{
+	background:url(member.gif) left center no-repeat;
+	padding-left:20px;
+}
+/* ///////////////////////// PUCE CONNEXION */
+div#toplinks li a#login{
+	background:url(key.gif) left center no-repeat;
+	padding-left:20px;
+}
+
+/* ///////////////////////// CONTENU */
+div#main-content {
+	margin:10px 0 0 0;
+	padding: 5px 0 0 5px;
+}
+
+/* ///////////////////////// FIL ARIANE */
+#breadcrumb {
+	background:url(bg-ariane.gif) left top no-repeat ;
+	padding: 3px 2px 5px 30px;
+	margin:0 5px 1em 180px;
+	font-size: 80%;
+	width:570px;
+	height:15px;
+}
+
+#breadcrumb a {
+	text-decoration: none;
+	border-bottom: 1px dotted black;
+}
+
+#breadcrumb a:hover {
 	border-bottom-style: solid;
 }
 
+/* ///////////////////////// COLONNE GAUCHE : LIENS */
+div#gauche {
+	width:175px;	
+	height:450px;
+	float:left;
+}
+
+div#links {
+	width: 170px;
+}
+
+div#links h3 {
+	border-left:10px solid #0ac1fc;
+	background:url(bg-h-link.gif) left top repeat-x;
+	padding:5px 15px 3px 25px;
+}
+	
+div#links li{
+	margin: 0.8em 0;
+}
+
+div#links li a{	
+	background:url(link-list.gif) left center no-repeat;
+	padding-left:15px;
+}
+
+div#links li a:hover {
+	background:url(link-list-hover.gif) left center no-repeat;
+	color:#0ac1fc;
+	text-decoration:underline;
+}
+
+/* ///////////////////////// COLONNE CENTRE : SERVICES */
+div#centre {
+	width:310px;
+	float:left;
+	padding:0 5px 0 0;
+}
+
+div#services h3 {
+	background:url(bg-services.gif) left top no-repeat;
+	width:305px;
+	height:25px;
+	padding:5px 0 5px 50px;
+}
+
+div#services ul li a{
+	border-bottom:2px dotted #ff9623;
+}
+
+div#services ul ul li a{
+	background:url(puce-service.gif) left center no-repeat;
+	padding-left:10px;
+	border:none;
+}
+
+div#services ul li a:hover {
+	border-left: 10px solid #ff9623;
+	padding-left:10px;
+	color:#ff9623;
+}
+
+div#services ul ul li a:hover {
+	color:#ff9623;
+	text-decoration:underline;
+	border:none;
+}
+
+div#services li {
+	margin-top: 8px;
+}
+
+div#services li li {
+	margin: 0;
+	font-size:90%
+}
+
+div#services ul ul {
+	margin:8px 0 0 1em;
+}
+
+
+/* ///////////////////////// COLONNE DROITE : CONSULTATION + ANNONCES */
+div#droite {
+	width:31%;
+	float:right;
+	padding-right:3px;
+}
+/* ///////////////////////// CONSULTATIONS */
+#droite #consultations {
+	margin-bottom: 1em;
+}
+
+#droite #consultations h3 {
+	background:url(bg-consultations.gif) left top no-repeat;
+	text-align:right;
+	width:238px;
+	height:26px;
+	padding:5px 5px 5px 0;	
+}
+
+#droite #consultations li {
+	margin-bottom: 1ex;
+}
+
+#droite #consultations li a{
+	background:url(puce-consultation.gif) left center no-repeat;
+	padding-left:15px;
+	font-size:90%
+}
+
+#droite #consultations li a:hover {
+	color:#fb0611;
+}
+
+/* ///////////////////////// ANNONCES */
+
+#droite #announces p {
+	text-align: justify;
+	margin:0.2em 0 0.5em 0;
+	font-size:85%;
+}
+
+#droite #announces h3 {
+	background:url(bg-annonces.gif) left top no-repeat;
+	width:238px;
+	height:26px;
+	padding:5px 5px 5px 0;
+	text-align:right;
+}
+
+
+#droite #announces h4 {
+	border-bottom: 2px dotted #7dd100;
+	border-right: 2px dotted #7dd100;
+	padding-left: 2px;
+	color:#7dd100;
+}
+
+ ul#announces-links {
+	list-style: none;
+	background:url(bg-abonnement.gif) left top no-repeat;
+	width:207px;
+	height:58px;
+	padding: 10px;
+	margin: 1.5em 0 0;
+}
+
+ ul#announces-links li{
+	margin:0.3em 0 0;
+}
+
+ ul#announces-links a{
+	border-left:10px solid #7dd100;
+	padding-left:5px;
+}
+
+ ul#announces-links a:hover {
+	text-decoration:underline;
+	color:#7dd100;
+}
+
+
+/* ///////////////////////// PAGE CONSULTATION */
+
+#rub_consultation{
+	background:url(img-consultation.jpg) left top no-repeat;
+	padding:110px 0 0 ;
+	margin:0 0 0 185px;
+}
+
+#rub_consultation h2{
+	background:url(bg-rub-consult.gif) left top no-repeat;
+	padding:5px 2px 5px 45px;
+	width:555px;
+	height:22px;
+}
+
+#rub_consultation h3{
+	background:url(bg-ul-consult.gif) left top repeat-x;
+	border-left:10px solid #fb0611;
+	padding:3px 35px 5px 15px;
+	margin:0.8em 1em 1em 2em;
+	height:15px;
+}
+
+#rub_consultation ul.sommaire{
+	list-style:none;
+	margin:1em 0 0 3em;
+}
+
+#rub_consultation ul.sommaire li{
+	background:url(bg-ul-consult.gif) left top repeat-x;
+	border-left:10px solid #fb0611;
+	padding:3px 35px 5px 15px;
+	margin:0.5em 150px 0.2em 0;
+	height:15px;
+}
+
+#rub_consultation ul.sommaire li a:hover {
+	text-decoration:underline;
+	color:#fb0611;
+}
+
+#rub_consultation form{
+	font-size:85%;
+}
+
+/* ///////////////////////// PAGE ANNONCES */
+
+#rub_annonce{
+	margin:0 0 0 185px;
+	padding:0 10px 0 0;
+	background:url(img-annonce.jpg) left top no-repeat;
+	padding:110px 0 0;
+}
+
+#rub_annonce h2{
+	background:url(bg-rub-annonce.gif) left top no-repeat;
+	padding:5px 2px 5px 45px;
+	width:555px;
+	height:22px;
+}
+
+#rub_annonce h3{
+	border-left:10px solid #7dd100; 
+	background:url(bg-h-annonce.gif) left top repeat-x;
+	padding:5px 15px 3px 25px;
+	margin:0.5em 2em 0.3em 0.5em;
+	height:15px;
+}
+
+#rub_annonce h4{
+	border-bottom:2px dotted #7dd100;
+	border-right:2px dotted #7dd100;
+	color:#7dd100;
+	padding-left:2px;
+	margin:0.5em 2em 0.3em 0.5em;
+	height:15px;
+}
+
+#rub_annonce p{
+	font-size:85%;
+	margin:0 1em 0 0.7em;
+}
+
+/* ABONNEMENT */
+#rub_annonce ul{
+	list-style:none;
+	margin:1em 0 0 2em;
+}
+
+#rub_annonce ul li{
+	margin:0 0 0.5em ;
+}
+
+li a#par_mail{
+	background:url(mail.gif) left center no-repeat;
+	padding:5px 0 5px 20px;
+}
+
+li a#par_sms{
+	background:url(tel.gif) left center no-repeat;
+	padding:5px 0 5px 20px;
+}
+
+li a#par_rss{
+	background:url(rss.gif) left center no-repeat;
+	padding:5px 0 5px 20px;
+}
+
+#rub_annonce li a:hover {
+	color:#7dd100;
+	font-weight:bold;
+}
+
+/* ///////////////////////// PAGE SERVICES */
+
+#rub_service{
+	margin:0 0 0 185px;
+	padding:0 10px 0 0;
+	background:url(img-service.jpg) left top no-repeat;
+	padding:110px 0 0;
+}
+
+#rub_service h2{
+	background:url(bg-rub-service.gif) left top no-repeat;
+	padding:5px 2px 5px 45px;
+	width:555px;
+	height:22px;
+}
+
+#rub_service h3{
+	background:url(bg-h-service.gif) left top repeat-x;
+	border-left:10px solid #ff9623;
+	padding:3px 35px 5px 15px;
+	margin:0.8em 1em 1em 2em;
+	height:15px;
+}
+
+#rub_service ul{
+	margin:1em 0 0 4em;
+}
+
+#rub_service ul li{
+	background:url(puce-rub-service.gif) left center no-repeat;
+	padding:2px 0 2px 15px;
+}
+
+#rub_service ul li a:hover {
+	color:#ff9623;
+}
+
+/*FORMULAIRE*/
+#rub_service h4{
+	background:url(puce-rub-service.gif) left center no-repeat;
+	padding:2px 0 2px 15px;
+}
+
+
+/* ///////////////////////// PAGE INFOS EDITEUR */
+div#info{
+	margin:0 0 0 180px;
+	padding:0 10px 0 0;
+}
+
+div#info h2{
+	background:url(bg-editeur.gif) left top no-repeat;
+	padding:5px 2px 5px 45px;
+	width:555px;
+	height:22px;
+}
+
+div#info h3{
+	border-bottom:2px dotted #b7b7b9;
+	border-left:10px solid #b7b7b9;
+	padding-left:10px;
+	margin:0.6em 0 0 ;
+	height:15px;
+}
+
+div#info p{
+	font-size:85%;
+	margin:0.3em 0;
+}
+
+div.line-block {
+	font-weight:bold;
+	margin:0.2em 0 0.2em 1em;
+}
+
+/* ///////////////////////// PAGE ACCESSIBILITE */
+
+div#accessibility{
+	margin:0 5px 0 180px;
+	padding:0 5px 0 0;
+}
+
+div#accessibility h2{
+	background:url(bg-accessibilite.gif) left top no-repeat;
+	padding:5px 2px 5px 45px;
+	width:555px;
+	height:22px;
+}
+
+div#accessibility h3{
+	border-left:10px solid #e3d5b8;
+	border-bottom:2px dotted #e3d5b8;
+	padding-left:10px;
+	margin:0.6em 0 0 ;
+	height:15px;
+}
+
+div#accessibility p{
+	font-size:85%;
+	margin:0.3em 0;
+}
+
+div#accessibility p a{
+	color:#d5650f;
+}
+
+div#accessibility p a:hover {
+	text-decoration:underline;
+}
+
+
+/* ///////////////////////// PAGE CONTACT */
+
+div#contact{
+	margin:0 5px 0 180px;
+	padding:0 5px 0 0;
+}
+
+div#contact h2{
+	background:url(bg-contact.gif) left top no-repeat;
+	padding:5px 2px 5px 45px;
+	width:555px;
+	height:22px;
+}
+
+div#contact p{
+	font-size:85%;
+	margin:0.3em 0;
+}
+
+/* ///////////////////////// PAGE AIDE */
+
+div#help{
+	margin:0 5px 0 180px;
+	padding:0 5px 0 0;
+}
+
+div#help h2{
+	background:url(bg-aide.gif) left top no-repeat;
+	padding:5px 2px 5px 45px;
+	width:555px;
+	height:22px;
+}
+
+div#help h3{
+	border-left:10px solid #f9abd3;
+	border-bottom:2px dotted #f9abd3;
+	padding-left:10px;
+	margin:0.6em 0 0 ;
+	height:15px;
+}
+
+div#help p{
+	font-size:85%;
+	margin:0.3em 0;
+}
+
+div#help ul{
+	list-style:none;
+	margin:0.2em 0 0.2em 2em;
+	font-size:85%;
+	font-weight:bold;
+}
+
+/* ///////////////////////// PAGE IDENTIFICATION */
+
+div#member{
+	margin:0 5px 0 180px;
+	padding:0 5px 0 0;
+}
+
+div#member h2{
+	background:url(bg-login.gif) left top no-repeat;
+	padding:5px 2px 5px 45px;
+	width:555px;
+	height:22px;
+}
+
+/* ///////////////////////// PAGE INSCRIPTION*/
+
+div#new_member{
+	margin:0 5px 0 180px;
+	padding:0 5px 0 0;
+}
+
+div#new_member h2{
+	background:url(bg-inscription.gif) left top no-repeat;
+	padding:5px 2px 5px 45px;
+	width:555px;
+	height:22px;
+}
+
+/* ///////////////////////// FOOTER */
+
+div#footer {
+	width:790px;
+	margin:0 auto;
+	padding:0 3px;
+}
+
+p#legal {
+	border-bottom: 7px solid #0ac1fc;
+	text-align: right;
+	padding:0 15px 0 0;
+	font-size: 75%;
+	letter-spacing:1px;
+	color:#CCC;
+}
+
+p#bottom-links {
+	text-align: center;
+	background:url(bg-footer.gif) left top repeat-x;
+	padding: 5px 0;
+}
+
+p#bottom-links a {
+	font-weight:100;
+	font-size:80%
+}
+
+p#bottom-links a.sep{
+	background:url(separateur-footer.gif) left center no-repeat;
+	padding-left:15px;
+}
+
+/* ///////////////////////// ETAPES */
+div#steps {
+	width: 170px;
+	margin:145px 0 0;
+}
+
+div#steps h2{
+	border-left:10px solid #0ac1fc;
+	background:url(bg-h-link.gif) left top repeat-x;
+	padding:5px 15px 3px 25px;
+}
+
+
+div#steps ol {
+	list-style: none;
+	margin: 5px 0;
+	text-align: right;
+	width:160px;
+}
+
+div#steps span.marker {
+	float:left;
+	font-size:150%;
+	font-weight:bold;
+	color:#fff;
+	margin:-5px 0 0 ;
+}
+
+div#steps ol li {
+	margin: 1ex 0;
+	color: #fff;
+	letter-spacing:1px;
+	padding: 1ex;
+	font-weight: bold;
+	background:url(bg-etape.gif) left top no-repeat;	
+}
+
+div#steps ol li.current {
+	background:url(bg-etape-actif.gif) left top no-repeat;
+	color:#fff;
+}
+
+div#steps ol ul {
+	margin: 10px 0 0 ;;
+}
+
+div#steps ol li.current ul li.current {
+	font-weight: bold;
+	background:url(bg-h-link.gif) left top repeat-x;
+}
+
+/* AJOUT du SPAN pour la puce active */
+#steps ul li.current span{
+	background:url(puce-etape-active.gif) left center no-repeat;
+	padding-left:15px;
+}
+
+div#steps li.current ul li {
+	background:url(puce-etape.gif) left center no-repeat;
+	font-weight: normal;
+	color:#000;
+	font-size:80%;
+	margin:5px 0 0 ;
+	display:block;
+}