/* Style global des pages */

* {
	margin: 0;
	padding: 0;
}

body {
	background: #fff url(images/degrade-gris.jpg) top left repeat-x;
	font-family: Arial, Verdana, snas-serif;
	font-size: 90%;
	color: #444;
}

.clearer {
	clear: both;
}

.clear-left {
	clear: left;
}

#global {
	position: relative;
	width: 800px;
	margin: 0 auto;
	font-size: 11px;
}

#entete h1 a {
	display: block;
	width: 800px;
	height: 128px;
	color: #fff;
}

#entete h1 a #header-flash {
	position: relative;
	display: block;
	top: 9px;
	left: 6px;
	width: 787px;
	height: 119px;
}

#entete h1 a span {
	display: none;
}

#corps {
	position: relative;
	width: 785px;
	min-height: 220px;
	margin: 0 7px 0 6px;
	border: 1px solid #83e7f7;
	border-top-width: 4px;
	border-bottom: 0;
	padding-top: 38px;
	padding-bottom: 10px;
}

#menu {
	position: absolute;
	top: 0;
	left: 0;
	z-index:100;
	width: 100%;
}
#menu dl, #menu dt, #menu dd, #menu ul, #menu li {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
#menu dl {
	float: left;
	margin: 0;
	height: 30px;
	//overflow-x: hidden;
	overflow-y: visible;
}
#menu dt {
	cursor: pointer;
	text-align: center;
	font-weight: bold;
	background: #fff;
	height: 30px;
}
#menu dd {
	position: relative;
	border-left: 1px solid #e5e4e9;
	border-right: 1px solid #e5e4e9;
	border-bottom: 3px solid #e5e4e9;
	left: 8px;
	top: -8px;
	float: left;
	width: 159px;
	background: #eee;
}
#menu li {
	background: #fff;
	list-style-position: outside;
}
#menu li a, #menu dt a {
	color: #555;
	text-decoration: none;
	display: block;
	height: 100%;
	border: 0 none;
}
#menu li a:hover, #menu dt a:hover {
	background: #eee;
}
#menu li a {
	padding: 1px 4px 1px 10px;
}
#menu dt a span, #menu dt span {
	display: none;
}

#menu dl#onglet-accueil {
	width: 53px;
}
#menu dl#onglet-accueil dt a {
	background: url(images/menu.jpg) 0 0 no-repeat;
}

#menu dl#onglet-publications {
	width: 86px;
}
#menu dl#onglet-publications dt a {
	background: url(images/menu.jpg) -53px 0 no-repeat;
}

#menu dl#onglet-smettral {
	width: 80px;
}
#menu dl#onglet-smettral dt {
	background: url(images/menu.jpg) -139px 0 no-repeat;
}
#menu dl#onglet-smettral li a {
	background: #fff url(images/puce-smettral.png) center left no-repeat;
}
#menu dl#onglet-smettral li a:hover {
	background: #eee url(images/puce-smettral.png) center left no-repeat;
}

#menu dl#onglet-generis {
	width: 115px;
}
#menu dl#onglet-generis dt {
	background: url(images/menu.jpg) -219px 0 no-repeat;
}
#menu dl#onglet-generis li a {
	background: #fff url(images/puce-generis.png) center left no-repeat;
}
#menu dl#onglet-generis li a:hover {
	background: #eee url(images/puce-generis.png) center left no-repeat;
}

#menu dl#onglet-adherents {
	width: 97px;
}
#menu dl#onglet-adherents dt {
	background: url(images/menu.jpg) -334px 0 no-repeat;
}
#menu dl#onglet-adherents li a {
	background: #fff url(images/puce-adherents.png) center left no-repeat;
}
#menu dl#onglet-adherents li a:hover {
	background: #eee url(images/puce-adherents.png) center left no-repeat;
}

#menu dl#onglet-ecole {
	width: 89px;
}
#menu dl#onglet-ecole dt {
	background: url(images/menu.jpg) -431px 0 no-repeat;
}
#menu dl#onglet-ecole li a {
	background: #fff url(images/puce-ecole.png) center left no-repeat;
}
#menu dl#onglet-ecole li a:hover {
	background: #eee url(images/puce-ecole.png) center left no-repeat;
}

#menu dl#onglet-contact {
	width: 64px;
}
#menu dl#onglet-contact dt a {
	background: url(images/menu.jpg) -520px 0 no-repeat;
}

#informations {
	position: relative;
	float: right;
	margin-right: 2px;
	margin-bottom: 10px;
	width: 153px;
	padding: 50px 12px 10px 18px;
	background: #fff url(images/smettral-informations-bas.jpg) bottom left no-repeat;
}

#informations h3 {
	position: absolute;
	top: -34px;
	left: 0;
	display: block;
	width: 177px;
	height: 76px;
	background: url(images/smettral-informations-haut.jpg) top left no-repeat;
}

#informations h3 span {
	display: none;
}

#colonne-droite {
	float: right;
	width: 177px;
}

#colonne-droite #sous-menu li {
	list-style: none;
	text-align: right;
	margin-bottom: 1px;
}

#colonne-droite #sous-menu li a {
	display: block;
	border-right: 10px solid #83e7f7;
	border-bottom: 1px solid #eee;
	padding: 2px 5px;
	font-size: 11px;
	line-height: 18px;
	color: #4892c3;
	text-decoration: none;
	text-transform: uppercase;
}

#colonne-droite #sous-menu li a:hover {
	background: #83e7f7;
	color: #fff;
}

#contenu-etroit {
	width: 575px;
	padding: 0 10px 10px 10px;
	margin-bottom: 10px;
}

#contenu {
	padding: 0 10px 10px 10px;
}

#pied {
	position: relative;
	display: block;
	width: 787px;
	margin: 0 7px 0 6px;
	height: 32px;
	background: #3d9ed3 url(images/smettral-eco-emballages.jpg) top left no-repeat;
}

#pied a.boutons-pied {
	position: absolute;
	top: 4px;
	display: block;
	width: 25px;
	height: 26px;
}

#pied a.boutons-pied span {
	display: none;
}

#pied a#btn-accueil {
	left: 707px;
	background: url(images/btn-accueil.jpg) 0 0 no-repeat;
}

#pied a#btn-accueil:hover {
	background-position: 0 -26px;
}

#pied a#btn-contact {
	left: 733px;
	background: url(images/btn-contact.jpg) 0 0 no-repeat;
}

#pied a#btn-contact:hover {
	background-position: 0 -26px;
}

#pied a#btn-publications {
	left: 758px;
	background: url(images/btn-publications.jpg) 0 0 no-repeat;
}

#pied a#btn-publications:hover {
	background-position: 0 -26px;
}

#espace-adherent {
	float: right;
	margin-right: 12px;
}

#espace-adherent a {
	margin-left: 19px;
	padding: 5px 0 0 16px;
	line-height: 18px;
	background: url(images/espace-adherent.jpg) bottom left no-repeat;
	color: #888;
	text-decoration: none;
}

#espace-adherent a:hover {
	color: #555;
}

#signature {
	margin-top: 3px;
}

#signature a {
	margin-left: 19px;
	padding: 5px 0 0 17px;
	line-height: 18px;
	background: url(images/signature-environnement-web.jpg) center left no-repeat;
	color: #89a421;
	text-decoration: none;
}

#signature a:hover {
	color: #036244;
}



/* Styles du contenu */

a {
	color: #4892c3;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

img,
a img {
	border: none;
}

h3 {
	text-transform: uppercase;
	font-size: 13px;
	font-weight: bold;
	color: #5f235f;
	margin: 10px 0 6px 0;
}

h3.multiple-h3 {
	margin-top: 26px;
}

h4,
h4 a {
	color: #4892c3;
	font-size: 12px;
	font-weight: bold;
	margin: 14px 0 0 0;
	text-decoration: none;
	text-align: left;
}

h5 {
	font-size: 12px;
	font-weight: bold;
	background: url(images/puce-h5.jpg) top left no-repeat;
	padding-left: 18px;
	margin-top: 6px;
}

h6 {
	position: relative;
	font-size: 14px;
	line-height: 14px;
	font-variant: small-caps;
	font-weight: bold;
	color: #fa8b36;
	margin-top: 20px;
	margin-bottom: 0;
	background: url(images/puce-h6.jpg) center left no-repeat;
	padding-left: 16px;
}

p {
	text-align: justify;
	font-size: 11px;
	margin: 5px 0;
}

ul {
	list-style-position: inside;
}

li {
	margin-left: 20px;
}

table {
	border-collapse: collapse;
}

img.illustration-droite {
	float: right;
}

div.bloc-reduit {
	position: relative;
	width: 407px;
}

.illustration {
	position: relative;
	float: right;
	right: 10px;
	margin-top: 20px;
	width: 177px;
	text-align: center;
	padding: 0;
}

.illustration a img {
	border: 1px solid #ddd;
}

.bloc-3 {
	float: left;
	width: 184px;
	margin-right: 10px;
}

.bloc-3-droite {
	margin-right: 0;
}

.bloc-3 li {
	margin-left: 0;
}

.bloc-2 {
	float: left;
	width: 280px;
	margin: 0 5px 10px 0;
}

.bloc-2-gauche {
	clear: left;
}

.bloc-2-droite {
	margin-right: 0;
}


/* Styles de la zone d'informations */

#informations h5 {
	font-size: 10px;
	font-weight: bold;
	color: #4abaff;
	margin-bottom: 0;
	background: transparent;
	padding-left: 0;
}

#informations img {
	float: left;
	margin: 3px 2px 2px 0;
}

#informations p {
	margin-top: 0;
	font-size: 10px;
}




/* Adhérents */

.bloc-adherent {
	position: relative;
	height: 208px;
	margin-bottom: 20px;
}

.bloc-adherent p {
	margin-left: 18px;
}

.mode-tri-selectif {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 270px;
	height: 82px;
	border-bottom: 6px solid #fed93f;
	border-right: 2px solid #fed93f;
	text-align: center;
}

.mode-tri-selectif a img {
	border: none;
}


/* Contact */

.field {
	margin: 4px 0;
}

.field-submit {
	margin: 4px 0;
	text-align: center;
}

.input {
	display: block;
	background: #fff;
	border: 1px solid #ccc;
	border-bottom-width: 2px;
	padding: 2px 4px;
	width: 400px;
}

.code {
	width: 120px;
	height: 30px;
	margin-left: 172px;
	padding-top: 4px;
	text-align: center;
	letter-spacing: 8px;
	font-size: 18px;
}

.label {
	margin: 6px 0 2px 0;
	color: #89a421;
}

.button {
	margin: 6px 0;
	padding: 1px 8px;
	background: url(images/bouton.jpg) top left repeat-x;
	color: #fff;
}

.button:hover {
	background-position: bottom-left;
}

#cryptographp {
	float: left;
	margin-right: 12px;
}

.erreur-form {
	width: 400px;
	border: 1px solid #bf0000;
	border-bottom-width: 2px;
	padding: 2px 4px;
	background: #ff4f4f;
	color: #fff;
	text-align: center;
	font-weight: bold;
}

.confirm-form {
	width: 400px;
	border: 1px solid #088f00;
	border-bottom-width: 2px;
	padding: 2px 4px;
	background: #0bcf00;
	color: #fff;
	text-align: center;
	font-weight: bold;
}

.erreur-form p,
.confirm-form p {
	text-align: center;
}





/* Publications */

.bloc-publi {
	position: relative;
	margin: 3px 0;
	padding: 1px 0;
}

.bloc-publi h4 {
	padding-right: 36px;
	padding-bottom: 0;
	line-height: 16px;
	border-bottom: 2px solid #eee;
}

p.actions-publi {
	position: absolute;
	top: 9px;
	right: 0;
	height: 16px;
	width: 36px;
}

p.actions-publi .publi-details,
p.actions-publi .publi-download {
	display: block;
	float: right;
	width: 16px;
	height: 16px;
	padding: 0;
}

p.actions-publi .publi-details {
	background: url(images/ico-suite.png) top left no-repeat;
}

p.actions-publi .publi-download {
	background: url(images/ico-download.png) top left no-repeat;
}

p.actions-publi .publi-details *,
p.actions-publi .publi-download * {
	display: none;
}

img.image-article {
	float: left;
	margin: 0 10px 10px 0;
	border: 1px solid #ccc;
	border-bottom-width: 3px;
}

img.image-communication {
	float: left;
	margin: 8px 10px 10px 0;
	border: 1px solid #ccc;
	border-bottom-width: 3px;
}

.actions-details-publi {
	text-align: right;
	border-top: 2px solid #eee;
}

.actions-details-publi .publi-download { 
	padding: 4px 20px 4px 0;
	background: url(images/ico-download.png) center right no-repeat;
	color: #888;
	line-height: 22px;
	text-decoration: none;
}

.actions-details-publi .publi-retour { 
	padding: 4px 20px 4px 0;
	background: url(images/ico-retour.png) center right no-repeat;
	color: #888;
	line-height: 22px;
	text-decoration: none;
}

.actions-details-publi .publi-retour:hover,
.actions-details-publi .publi-download:hover { 
	color: #555;
}




/* Clip du centre Généris */

#video-player {
	position: relative;
	width: 352px;
	left: 50%;
	margin-left: -176px;
	margin-top: 60px;
}



/* Espace adhérent */

#form-connexion {
	width: 410px;
}

#colonne-gauche {
	position: relative;
	float: left;
	width: 210px;
	margin-right: 10px;
}

#colonne-centre {
	margin-left: 220px;
	padding: 8px;
}

.infos-dates {
	font-style: italic;
	color: #888;
}

#calendrier {
	text-align: center;
	width: 210px;
}

#calendrier select {
	text-align: center;
	margin-bottom: 8px;
	background: #046fb5;
	color: #fff;
	font-weight: bold;
	border: none;
}

#calendrier .change-mois {
	width: 105px;
}

#calendrier .change-annee {
	width: 58px;
}

#calendrier .btn-calendrier {
	height: 18px;
	width: 40px;
	vertical-align: top;
	background: #4892c3 url(images/bouton.jpg) top left repeat-x;;
	color: #fff;
	line-height: 18px;
	font-weight: bold;
	border: 1px solid #888;
}

#calendrier .btn-calendrier:hover {
	background: #fff;
	color: #4892c3;
	border: 1px solid #4892c3;
}

#calendrier option {
	background: #fff;
	color: #046fb5;
	font-weight: normal;
}

#calendrier option.actif {
	background: #046fb5;
	color: #fff;
	font-weight: bold;
}

#calendrier li{
	list-style: none;	
	margin: 0;
	border-top: 1px solid #fff;
	border-bottom: 1px solid #ddd;
	line-height: 16px;
}

#calendrier #libelle {
	width: 210px;
	margin: 0;
	padding: 0;
}
#calendrier .ligne {
	width: 210px;
	margin: 0;
	padding: 0;
} 
#calendrier #libelle li {
	float : left;
	width : 30px;
	background: #eee;	
}
#calendrier .ligne li {
	color: #000;
	float : left;
	width : 30px;
	height: 19px;
	background: #fff;
}

#calendrier .ligne li a {
	display: block;
	height: 16px;
	background: #cef8ff;
	border-bottom: 3px solid #cef8ff;
	border-right: 1px solid #fff;
	text-decoration: none;
	color: #07527f;
}

#calendrier .ligne li a:hover{
	list-style: none;
	text-decoration: none;
}

#calendrier li.itemCurrentItem {
	background: #4892c3 url(images/bouton.jpg) top left repeat-x;;
	color: #fff;
}
#calendrier li.itemSelectedItem {
	background: #83e7f7;
}	

#legende-calendrier {
	position: relative;
	top: 16px;
	margin-bottom: 16px;
	border-top: 1px solid #ddd;
}

#legende-calendrier li {
	list-style: none;
	list-style-position: outside;
	margin: 4px 0;
	font-style: italic;
	color: #555;
}

#legende-calendrier li a {
	display: block;
	text-decoration: none;
	color: #555;
}

#legende-calendrier li a img {
	vertical-align: text-bottom;
	margin-right: 8px;
	border: none;
}

/* Code couleur des adhérents pour l'affichage du calendrier */

/* Attention : en cas de modifications des adhérents dans la base de données, il faut modifier les éléments suivants */

#calendrier .ligne li a.adherent-2,
#legende-calendrier li img.adherent-2, h5.adherent-2 {
	border-bottom: 3px solid red;
}
#calendrier .ligne li a.adherent-3,
#legende-calendrier li img.adherent-3, h5.adherent-3 {
	border-bottom: 3px solid #ff3333;
}
#calendrier .ligne li a.adherent-4,
#legende-calendrier li img.adherent-4, h5.adherent-4 {
	border-bottom: 3px solid red;
}
#calendrier .ligne li a.adherent-5,
#legende-calendrier li img.adherent-5, h5.adherent-5 {
	border-bottom: 3px solid #00ffff;
}
#calendrier .ligne li a.adherent-6,
#legende-calendrier li img.adherent-6, h5.adherent-6 {
	border-bottom: 3px solid #ffcc99;
}
#calendrier .ligne li a.adherent-7,
#legende-calendrier li img.adherent-7, h5.adherent-7 {
	border-bottom: 3px solid #586985;
}
#calendrier .ligne li a.adherent-8,
#legende-calendrier li img.adherent-8, h5.adherent-8 {
	border-bottom: 3px solid #406114;
}
#calendrier .ligne li a.adherent-9,
#legende-calendrier li img.adherent-9, h5.adherent-9 {
	border-bottom: 3px solid #993366;
}
#calendrier .ligne li a.adherent-10,
#legende-calendrier li img.adherent-10, h5.adherent-10 {
	border-bottom: 3px solid #23ff23;
}
#calendrier .ligne li a.adherent-11,
#legende-calendrier li img.adherent-11, h5.adherent-11 {
	border-bottom: 3px solid #ff8080;
}
#calendrier .ligne li a.adherent-12,
#legende-calendrier li img.adherent-12, h5.adherent-12 {
	border-bottom: 3px solid #30bf2f;
}
#calendrier .ligne li a.adherent-13,
#legende-calendrier li img.adherent-13, h5.adherent-13 {
	border-bottom: 3px solid #e6ff00;
}
#calendrier .ligne li a.adherent-14,
#legende-calendrier li img.adherent-14, h5.adherent-14 {
	border-bottom: 3px solid #d640d8;
}
#calendrier .ligne li a.adherent-15,
#legende-calendrier li img.adherent-15, h5.adherent-15 {
	border-bottom: 3px solid #0000ff;
}
#calendrier .ligne li a.adherent-16,
#legende-calendrier li img.adherent-16, h5.adherent-16 {
	border-bottom: 3px solid #23b8dc;
}