@import url(wcs-common.css);
/* ///////////////////////// GENERAL */
*{
	margin:0;
	padding:0;
}

html {
	/* vertical scrollbar; always (so the geometry doesn't change) */
	height: 100%;
	margin-bottom: 1px;
}

body {
	text-align: center;
	background:url(bg.gif);
	color:#444;
	font:95% Bitstream Vera Sans, Arial, Helvetica, sans-serif;
}

a {
	color: #000;
	text-decoration:none;
}

a:hover {
	/*text-decoration: underline;*/
}


ul {
	list-style: none;
}

hr {
	clear: both;
	visibility: hidden;
}

form {
	margin-top: 1em;
}

form p {
	margin: 0.5em 0;
	margin-right: 1em;
	text-align: justify;
}

div.article {
	text-align: justify;
}

div.article h3 a {
	color: #444444;
}

div.article h3 {
	padding-left:10px;
	padding-bottom: 3px;
	margin:0.6em 0 0 ;
}

div#new_member p,
div.article p {
	margin: 0.5em 0;
}

div.article div.line-block {
	font-weight:bold;
	margin:0.2em 0 0.2em 1em;
}

div#new_member ul,
div.article ul {
	list-style: circle;
	margin-left: 2em;
}


/* ///////////////////////// 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;
}


/* ///////////////////////// HEADER */

div#top h1 {
	width: 783px;
	height: 145px;
	margin:0 auto;
	background:url(header.jpg) left top no-repeat;
}

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;
}

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 0px 0 0;
}

div#toplinks ul {
	margin: 0 0 0 5px;
	list-style:none;
}

div#toplinks ul li{
	margin: 0 0 5px 0;
}

div#toplinks a {
	color: #555;
	font-size:small;
	width:80px;
	height:15px;
	display:block;
}

div#toplinks a:hover {
	color: black;
	text-decoration: underline;
}

/* ///////////////////////// PUCE INSCRIPTION */
div#toplinks li span#member,
div#toplinks li a#member,
div#toplinks li a#inscr{
	background:url(member.gif) left center no-repeat;
	overflow: hidden;
	padding-left:20px;
}

/* ///////////////////////// PUCE CONNEXION */
div#toplinks li a#logout,
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#sidebox {
	width: 170px;
}

div#sidebox h3 {
	border-left:10px solid #0ac1fc;
	background:url(bg-h-link.gif) left top repeat-x;
	padding:5px 15px 3px 25px;
}
	
div#sidebox li{
	margin: 0.8em 0;
}

div#sidebox li a{	
	background:url(link-list.gif) left center no-repeat;
	padding-left:15px;
}

div#sidebox li a:hover {
	background:url(link-list-hover.gif) left center no-repeat;
	color:#0ac1fc;
	text-decoration:underline;
}

div#sidebox h3#agenda-link a {
	color: #444;
	border-bottom: 1px dotted #444;
}

div#sidebox h3#agenda-link a:hover {
	border-bottom: 1px solid #444;
}
/* ///////////////////////// COLONNE CENTRE : SERVICES */
div#centre {
	width:310px;
	float:left;
	padding:0 5px 0 0;
}

div#services-2nd h3,
div#services h3 {
	background:url(bg-services.gif) left top no-repeat;
	width:305px;
	height:25px;
	padding:5px 0 5px 50px;
}

div#services-2nd h3 {
	background:url(bg-services-240.gif) left top no-repeat;
	width:238px;
	text-align: right;
	padding:5px 5px 5px 0;
}

div#services-2nd ul li a,
div#services ul li a {
	border-bottom:2px dotted #ff9623;
}

div#services-2nd ul ul li a,
div#services ul ul li a {
	background:url(puce-service.gif) left center no-repeat;
	padding-left:10px;
	border:none;
}

div#services-2nd ul li a:hover,
div#services ul li a:hover {
	border-left: 10px solid #ff9623;
	padding-left:10px;
	color:#ff9623;
}

div#services-2nd ul ul li a:hover,
div#services ul ul li a:hover {
	color:#ff9623;
	text-decoration:underline;
	border:none;
}

div#services-2nd li,
div#services li {
	margin-top: 8px;
}

div#services-2nd li li,
div#services li li {
	margin: 0;
	font-size:90%
}

div#services-2nd ul ul,
div#services ul ul {
	margin:8px 0 0 1em;
}

div#services-2nd li p,
div#services li p {
	margin-top: 8px;
	text-align: justify;
	padding-right: 5px;
}


/* ///////////////////////// 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;
	text-decoration: underline;
}

/* ///////////////////////// 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;
	list-style: none;
}

 ul#announces-links a{
	border-left:10px solid #7dd100;
	padding-left:5px;
}

 ul#announces-links a:hover {
	text-decoration:underline;
	color:#7dd100;
}


/* My Space on home page */

#droite #myspace p {
	text-align: justify;
	margin:0.2em 0 0.5em 0;
	font-size:85%;
}

#droite #myspace h3 {
	background:url(bg-h-myspace.gif) left top no-repeat;
	width:238px;
	height:26px;
	padding:5px 5px 5px 0;
	text-align:right;
}

#droite #myspace li {
	margin-bottom: 1ex;
}

#droite #myspace li a{
	background:url(puce-myspace.gif) left center no-repeat;
	padding-left:15px;
	font-size:90%
}

#droite #myspace li a:hover {
	color:#6e8b03;
	text-decoration: underline;
}




/* ///////////////////////// PAGE CONSULTATION */

#rub_consultation{
	background:url(img-consultation.jpg) left top no-repeat;
	padding:110px 0 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 ul{
	margin:1em 0 0 1em;
}

#rub_consultation ul.catforms li{
	background:url(puce-rub-consultation.gif) left center no-repeat;
	padding:2px 0 2px 15px;
}

#rub_consultation ul li a:hover {
	color:#fb0611;
}

#rub_consultation form{
}

/* ///////////////////////// 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 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;
}

#rub_annonce p{
	margin: 1em 1em 0 0.7em;
}

#rub_annonce ul{
	list-style: circle;
	margin: 0 0 0 2em;
}

#rub_annonce ul li {
	margin: 0.5em 0;
}

/* ABONNEMENT */
#rub_annonce ul#announce-modes{
	list-style:none;
	margin:1em 0 0 2em;
}

#rub_annonce ul#announce-modes li{
	margin:0 0 0.5em 0;
}

li #par_mail{
	background:url(mail.gif) left center no-repeat;
	padding:5px 0 5px 20px;
}

li #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;
}

li a#par_ical{
	background:url(ical.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 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 1em;
}

#rub_service ul.catforms 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;
}

div#new_member,
div#info p {
	margin: 1ex 0;
}

/* ///////////////////////// 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;
}

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;
}

/* ///////////////////////// 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;
}


/* ///////////////////////// 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  & PAGES PROFILE */

div#profile,
div#new_member{
	margin:0 5px 0 180px;
	padding:0 5px 0 0;
}

div#profile h2,
div#new_member h2{
	background:url(bg-inscription.gif) left top no-repeat;
	padding:5px 2px 5px 45px;
	width:555px;
	height:22px;
}

div#profile h3 {
	border-left: 10px solid #befb03;
	border-bottom:2px dotted #befb03;
	margin: 1em 0;
	padding-left: 1ex;
}

div#profile a:hover {
	text-decoration: underline;
}

/* Pages d'agenda */

#rub_agenda {
	background: url(img-annonce.jpg) left top no-repeat;
	padding: 110px 0 0 0;
	margin: 0 0 0 185px;
}

#rub_agenda h2 {
	background:url(bg-rub-agenda.gif) left top no-repeat;
	padding: 5px 2px 5px 45px;
	width: 555px;
	height: 22px;
}

dl#events {
	margin: 1em 0;
}

dl#events dt {
	font-size: small;
}

dl#events dd {
	margin-left: 2em;
	margin-bottom: 1em;
}

dl#events a.external {
	background: url(link-list.gif) left center no-repeat;
	padding-left: 15px;
	margin-left: 1em;
	color: #444;
}

dl#events a:hover {
	text-decoration: underline;
}

dl#events dd ul {
	list-style: circle;
	padding-left: 2em;
}

dl#events a.tag {
	padding: 0 1em;
}

p#nb-events {
	margin: 1em 0;
}

p.tags {
	margin: 1em 0;
}

p.tags a {
	text-decoration: underline;
	padding-right: 1ex;
}

ul#month-links {
	float: right;
	padding: 1em;
	text-align: right;
}

ul#month-links li a {
	color: #379cdb;
}

ul#month-links li a:hover {
	text-decoration: underline;
}


/* ///////////////////////// 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 ul li {
	background:url(puce-etape.gif) left center no-repeat;
	font-weight: normal;
	font-size:80%;
	margin:5px 0 0 ;
	display:block;
	color: #666;
}

div#steps li.current ul li {
	color:#000;
}


div#services ul li.all-forms {
	padding: 0;
	margin: 0;
	margin-top: 1ex;
}

div#services ul li.all-forms a {
	background-image: url(plus-service.gif);
}

div.address {
	margin-left: 1em;
}

#profile-links {
	margin: 1em;
	text-align: right;
}

form div.page,
div.dataview div.page {
	margin-right: 1em;
	padding: 0px 8px;
	border: 1px solid #ff9623;
	border-width: 0 0 1px 1px;
}

div#main-content form div.page h3,
div#main-content div.dataview div.page h3 {
	margin: 0 -8px 1em -8px;
}

div#login-sso,
div#login-password {
	border: 1px solid #888;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	padding: 0 15px;
	margin: 0 auto;
	width: 23em;
	margin-bottom: 2em;
}

div#login-sso div.buttons,
div#login-password div.buttons {
	text-align: right;
}

div#login-sso div.buttons input,
div#login-password div.buttons input {
	margin: 0;
	background: white url(login-button-bg.png) bottom left repeat-x;
	padding: 2px 10px;
	border: 1px solid #ccc;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	color: #222;
}

div#login-password div.PasswordWidget div.content,
div#login-password div.StringWidget div.content {
	text-align: right;
	margin-right: 3em;
}

div#login-password p {
	margin-bottom: 1em;
}

div#login-sso {
	background: white url(keyring.png) 5px 5px no-repeat;
	min-height: 70px;
}

div#login-sso h3 {
	font-size: 110%;
}

div#login-sso h3,
div#login-sso p {
	margin: 5px 0 0 60px;
	text-align: justify;
}

div#home-page-intro {
	padding: 3px 1ex;
	margin: 0 1em 1em 180px;
	text-align: justify;
	border: 1px solid #a09c9c;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	min-height: 170px;
}

div#home-page-intro img {
	float: left;
	border: 1px solid gray;
	padding: 3px;
	margin-right: 1ex;
	background: white;
}

div#home-page-intro p {
	margin: 1ex 0;
}

div#profile ul {
	margin-bottom: 1em;
}

div#profile p.command {
	margin-left: 1em;
}

div#agenda-subs {
	clear: both;
}