@import "reset.css";

html, body{
	height:100%;
}

body{
	font-family:Arial;
	font-size:12px;
	position:relative;
	background:url(../img/back_birds.gif) no-repeat center center;
}

a{
	color:#000;
}

span.loader{
	background:url(../img/loader.gif) no-repeat center center;
	width:16px;
	height:16px;
	display:inline-block;
	margin:0 3px
}

#container{
	width:960px;
	margin:0 auto -200px;
	min-height: 100%;
	height: auto !important;
	height: 100%;
}

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

#header{
	padding-top:10px
}

#slogan{
	text-indent:-9999px;
	float:right;
	margin-top:8px;
	margin-right:120px;
	_margin-right:65px;
}

#header .page{	
	width:579px;
	height:97px;
	background:url(../img/slogan.gif) no-repeat center;
}

#header .merci{
	width:408px;
	height:109px;
	background:url(../img/merci.gif);
	margin-right:150px;
	_margin-right:75px
}

#topmenu{
	margin-bottom:10px;
}
#topmenu ul{
	float:right
}

#topmenu li{
	float:left;
	margin-left:2px
}

#topmenu li a{
	display:block;
	line-height:25px;
	text-indent:-9999px;
	text-align:center
}

#topmenu li.appel a{background:url(../img/lappel.gif) no-repeat; width:175px}
#topmenu li.quisommesnous a{background:url(../img/quisommesnous.gif) no-repeat; width:175px}
#topmenu li.biodiv a{background:url(../img/biodiv.gif) no-repeat; width:135px}
#topmenu li.soutient a{background:url(../img/soutient.gif) no-repeat; width:202px}
#topmenu li.outils a{background:url(../img/outils.gif) no-repeat; width:117px}

#topmenu li.appel a:hover, #topmenu li.appel a.active{background:url(../img/lappel_hover.gif) no-repeat; width:175px}
#topmenu li.quisommesnous a:hover, #topmenu li.quisommesnous a.active{background:url(../img/quisommesnous_hover.gif) no-repeat; width:175px}
#topmenu li.biodiv a:hover, #topmenu li.biodiv a.active{background:url(../img/biodiv_hover.gif) no-repeat; width:135px}
#topmenu li.soutient a:hover, #topmenu li.soutient a.active{background:url(../img/soutient_hover.gif) no-repeat; width:202px}
#topmenu li.outils a:hover, #topmenu li.outils a.active{background:url(../img/outils_hover.gif) no-repeat; width:117px}

/********* MAIN **********/

#main{
	margin:0 auto;
	width:960px;
	overflow:hidden
}

#main p{
	line-height:1.4em;
	margin-bottom:1em;
}

#mainmenu{
	padding-top:15px
}

#mainmenu li{
	float:left
}

#boxes{
	margin-top:10px;
	overflow:hidden;
	width:960px;
}

#boxes li{
	float:left;
}

#boxes .text{
	padding:15px;
	*padding-bottom:8px;
}

#boxes .first{
	width:634px
}

#boxes .first .floatright img{
	display:block
}

#boxes .suite{
	margin-top:10px;
	*margin-top:18px
}

#boxes h2{
	text-transform:uppercase;
	font-size:12px;
	color:#a23122;
	margin-bottom:0.7em
}

#boxes .signe{
	width:308px;
	border:1px dashed #a23122;
	margin-right:7px;
}

#boxes .signe .intro{
	font-size:14px;
	margin-bottom:0.4em
}

#boxes .signe p{
	text-align:left;
	line-height:1.1em;
}

#boxes .signe form{
	background: #a23122;
	padding:10px 15px;
	color:#fff
}

#boxes .signe .text{
	padding:15px 15px 0;
}

#boxes .signe .suite{
	margin-top:5px
}

#boxes .signe form input[type="image"]{
	border:none
}

#boxes .signe form .input_text{
	width:235px;
	border:0;
}

#boxes .jagis{
	width:308px;
	margin-left:5px;
	height:378px;
	_height:380px
}

#boxes .jagis .container{
	text-align:center;
	height:200px;
}

#boxes .jagis .container hr{
	width:100px;
	border:none;
	border-top:1px solid #5584A7;
	*margin:0px auto;
	height:0
}

#boxes .jagis h2, #boxes .jagis h2 a{
	color:#5584a7;
	text-decoration:none;
	display:block;
	margin:0
}

#boxes .jagis .container .image{
	margin-top:10px;
	margin-bottom:0
}

#boxes .jagis h2 a:hover, #boxes .jagis h2 a.active{
	text-decoration:underline
}

/**** GRAYPANE *****/

.graypane{
	width:632px;
	padding:10px 0;
	_padding:10px 0 0 0;
	background:#e9e7e0;
	overflow:hidden;
	margin-top:4px;
}

.graypane h3, .merci h3{
	text-transform:uppercase;
	font-size:11px;
	margin-bottom:5px
}

.graypane h3{
	margin-bottom:1em
}

.graypane li, .merci .share li{
	float:left;
	border-right:1px dashed #000;
	padding:3px 15px;
	height:85px
}

.graypane li li, .merci .share li li{
	border:0;
	height:auto;
	padding:0
}

.graypane ul ul{
	margin-right:60px
}

.graypane li.last{
	border:0
}

.fb_box{
	margin-top:18px
}

.graypane .envoiami{
	border:0;
	*width:270px;
}

.graypane .envoiami .info, .portrait .envoiami .info{
	text-align:center;
	padding:15px 0;
	width:270px;
	color:#93A527;
	font-weight:bold
}

.portrait .envoiami .info{
	width:auto;
}

.graypane .envoiami .input_text, .merci .share .input_text, .portrait .envoiami .input_text, .newsletter .input_text{
	border-color:#878787;
	border-width:0 2px 2px 0;
	font-style:italic;
	padding:2px;
	color:#797979;
	font-size:11px
}

.merci .share .input_text{
	width:119px;
}

.portrait .envoiami .input_text{
	border-width:1px 0 0 1px;
	border-color:#eee;
}

.graypane .adresses{
	margin:8px 0;
	width:270px
}

.graypane .expediteur{
	width:195px
}

.jagis .encart{
	background:#5584a7;
	color:#fff;
	border:1px dashed #5584a7;
	margin-bottom:2px;
	text-align:justify
}

#boxes .jagis .text{
	padding-bottom:0
}

#boxes .jagis .encart h2{
	color:#fff
}

#boxes .jagis .img{
	border:1px dashed #5584a7;
}

#boxes .jagis .encart a{
	font-size:12px;
	color:#fff;
	text-decoration:none;
}

#boxes .jagis .encart a:hover{
	text-align:justify;
}

#boxes .jagis .img h2{
	/*margin-bottom:0.9em;
	*margin-bottom:1.5em*/
}

#boxes .portraits{
	position:relative;
	width:317px;
	height:263px
}

#boxes .portraits li{
	list-style-type:none;
	overflow:hidden;
	position:absolute;
	top:0;
	left:0;
	float:none
}

/**** ACTUS ****/

#actus{
	background:url(../img/back_actus.gif) no-repeat;
	width:930px;
	height:66px;
	margin-top:5px;
	padding:10px;
	clear:both
}

#actus li{
	float:left;
	border-right:1px dashed #000;
	margin-right:10px;
	padding:8px 0;
	padding-right:10px;
	width:240px;
	height:50px;
	overflow:hidden
}

#actus li.first{
	padding:22px 10px;
	height:auto;
	width:auto
}

#actus li.last{
	border:0;
	padding-right:0;
	margin:0
}

#actus li h4{
	margin-bottom:0.5em
}

#actus li .txt{
	width:130px;
	margin-left:5px
}

#actus li img{
	vertical-align:middle
}

#actus li img.floatleft{
	margin-right:5px
}

#actus li .img{
	height:50px
}

#actus li table{
	border-spacing:0;
	height:100%;
}

#actus li .img{
	padding-right:5px
}

#actus li td{
	vertical-align:middle;
	padding:0
}

#actus li td p{
	margin:0
}

#actus li a{
	text-decoration:none
}

#actus li a:hover{
	text-decoration:underline
}

#actus .small{
	font-size:0.8em;
	line-height:1.2em
}

/**** FOOTER ****/

#footer{
	background:url(../img/back_footer.gif) no-repeat center bottom;
}

#footer, .push{
	text-align:center;
	height:200px
}

#footer ul{
	padding-top:100px;
}

#footer li{
	display:inline;
	border-right:1px solid #fff;
	text-transform:uppercase;
	padding:0 10px;
}

#footer li a{
	color:#fff;
	text-decoration:none;
	font-size:9px
}

#footer li a:hover{
	text-decoration:underline
}

#footer li.last{
	border:0
}

/**** SIGNATURE ****/

.signature #main{
	margin-top:20px
}

.signature h1{
	font-size:16px;
	text-transform:uppercase;
	text-align:center;
	margin-bottom:1em;
}

.signature #main .appel{
	width:50%;
	border-right:1px dashed #000;
	margin-right:2%;
	padding-right:2%
}

.signature .statut{
	overflow:auto;
	margin-bottom:20px
}

.signature .form{
	width:435px;
}

#main .form p{
	margin-bottom:2em
}

.signature .form p, .signature .form li{
	font-size:1.2em
}

.signature .form li{
	background:url(../img/fleche_signature.gif) no-repeat left 0;
	padding-left:15px;
	line-height:17px;
	min-height:17px;
	margin-bottom:10px;
	font-style:italic
}

.signature .form li img{
	vertical-align:middle
}

.signature .form .orange{
	color:#e36c0a
}

.signature .form .input_text{
	border-color:#eee #878787 #878787 #eee ;
	border-width:1px 2px 2px 1px;
	padding:2px;
	font-size:11px
}

.signature .form label.error{
	margin-left:5px;
	color:#BD2E1C;
	display:block
}

.statut label.error{
	margin-bottom:10px
}

.signature p.error{
	color:#BD2E1C;
	padding:5px;
	border:1px solid #BD2E1C
}

.signature .form p span{
	color:#3185AA;
	font-weight:bold;
	font-family:Verdana
}

.signature .form p.oblig{
	color:#3185AA;
	font-size:0.8em
}

.signature .appel h1{
	text-indent:-3000px;
	overflow:hidden;
	height:31px;
	background:url(../img/appel.gif) no-repeat top center;
}
.signature .appel .slogan{
	text-indent:-3000px;
	overflow:hidden;
	height:97px;
	background:url(../img/appel_slogan.gif) no-repeat top center;
}
.signature .appel p{
	text-align:justify;
}
.signature .appel .red{
	color:#bc2f1c;
}
.signature .appel .logos li{
	float:left;
	line-height:50px;
}
.signature .appel .logos img{
	margin:0 10px;
	vertical-align:middle;
}

/***** MERCI *****/

.merci #main{
	margin-top:20px
}

.merci .newsletter{
	width:300px;
	margin-right:10px
}

.merci .separator{
	border-bottom:1px dashed #000;
	padding:10px 0 0 0;
	margin:0 0 10px 0
}

.merci .orga{
	text-transform:uppercase;
	font-size:10px;
	overflow:auto;
	margin-bottom:10px
}

.merci h2{
	font-size:12px;
	text-transform:uppercase;
	margin-bottom:0.5em
}

.merci .share{
	width:340px;
	padding:20px;
	background:#e9e7e0
}
.merci .share ul{
	height:75px;
	overflow:hidden;
}


.merci .share .last{
	border:0;
}

.merci th{
	font-weight:normal;
	font-style:italic;
	font-size:11px
}

.merci td, .merci th{
	padding:2px
}

.merci #main .envoi{
	margin-right:10px;
	margin-top:10px;
	margin-bottom:0
}

.merci .biodiv{
	overflow:auto
}

.merci .success{
	margin-top:10px;
	color:#92A527;
	font-weight:bold
}

.signature .success{
	margin-top:10px;
	color:#BD2E1C;
	font-weight:bold
}

.merci .share .success{
	text-align:center
}


.merci .exp{
	margin-top:1em
}

.merci .share form label.error{
	display:none !important
}

.merci .share input.error{
	border:1px solid #BC2D1B
}

.merci .share li{
	width:150px;
}
.merci .share li.last{
	width:auto;
}
.merci .share li li{
	width:auto;
	padding:0 7px
}

.merci #main .share .fb_box{
	margin-bottom:0;
}

/***** QUI SOMMES NOUS *****/

.quisommesnous, .credits, .contact, .mentions, .plan{
	margin:0 0 0 235px;
}

.quisommesnous .nl a{
	color:#a23122;
	text-transform:uppercase
}

.quisommesnous li{
	clear:both;
	padding:10px 0;
	margin-bottom:10px;
	border-bottom:1px dashed #000
}

.quisommesnous li ul{
	margin-left:15px;
	margin-bottom:10px
}

.quisommesnous li li{
	border:0;
	margin:0;
	padding:0;
	list-style-type:disc;
	margin:5px 0;
}

.quisommesnous .last{
	border:0
}

.quisommesnous .logo{
	width:135px;
}

.quisommesnous .desc{
	width:580px;
}

.quisommesnous p{
	text-align:justify
}

.quisommesnous h2{
	text-transform:none;
	font-size:14px;
	margin-bottom:1em;
}

.quisommesnous a{
	font-weight:bold
}

.uicn h2 a {color:#5584a7;}
.fondation h2 a{color:#97a438}
.france h2 a{color:#a23122}
.ligue h2 a{color:#97a438}
.lpo h2 a{color:#5584a7}
.wwf h2 a{color:#c07022}

/**** credits ****/

.credits {
	overflow:visible
}

#main .credits .floatleft{
	width:330px;
	margin-right:10px
}

.credits h1, .mentions h1, .plan h1, .contact h1{
	color:#93A527;
	font-size:14px;
	text-transform:uppercase;
	margin:1.5em 0 1em
}

.credits h2, .mentions h2, .plan h2, .contact h2{
	color:#a23122;
	font-size:12px;
	margin:1.5em 0 0.5em
}

.credits p span{
	color:#c10076
}

.credits p a{
	font-weight:bold
}

/* contact */

.contact h2{
	color:#a23122;
}
.contact a{
	color:#97a438;
}


/*** mentions ***/

.mentions .gauche{
	margin-right:5%;
	width:45%
}

.mentions .droite{
	width:45%
}

.mentions a{
	font-weight:bold
}

/*** plan ***/

.plan ul{
	margin-left:20px
}

.plan li{
	margin:0.5em 0;
	list-style-type:disc
}

.plan li a{
	text-decoration:none;
	color:#C23C2C;
}

.plan li a:hover{
	text-decoration:underline;
}

/**** Portrait *****/

.portrait{
	margin-top:20px;
	position:relative
}

.portrait .genere{
	width:243;
	position:absolute;
	right:25px;
	bottom:35px;
	z-index:5000
}

.portrait .genere .photo{
	width:360px;
	background:#fff;
	-moz-box-shadow:0px 0px 1em #aaa;
	float:left;
	margin-right:30px;
}

.portrait .genere .share{
	float:left;
	width:243px;
}


#main .portrait .genere .share p{
	margin-bottom:0.5em
}

.portrait .envoiami .input_text{
	width:228px;
	font-family:Arial;
	font-size:12px;
	border:1px solid #bbb;
	color:#3C322C;
}

.portrait .envoyer{
	margin-right:16px;
	margin-top:7px;
}

.portrait form label.error{
	display:none !important
}

.portrait input.error, .portrait textarea.error{
	border:1px solid #BC2D1B
}

.portrait #savePortrait{
	position:absolute;
	bottom:287px;
	_bottom:302px;
	left:40px;
}

.portrait #saveDisk{
	position:absolute;
	bottom:289px;
	_bottom:304px;
	left:-23px
}

/**** newsletter ****/

.newstitle{
	margin-left:270px;
}

.newsletter .share li, .newsletter .share li li{
	padding:0
}

.newsletter .share li.last{
	margin-left:15px
}

/**** soutient / biodiv ****/

#main div.soutient, #main  div.biodiv{
	margin-top:20px;
	margin-left:235px;
}

#main .soutient li, #main  .biodiv li{
	margin:0.5em;
	padding:2px;
}

.newsletter p small{
	color:#666;
	font-size:0.8em;
	font-style:italic
}

.newsletter p small a{
	color:#666;
}

/**** OUTILS ****/

#main .downloads{
	margin-right:30px;
	padding-right:30px;
	border-right:1px dotted #000;
	width:500px
}

#main .downloads td, #main .downloads td a{
	vertical-align:top;
	font-size:12px;
	color:#a23122;
	font-weight:bold;
	text-transform:uppercase;
	text-align:right;
	padding:10px 15px;
	text-decoration:none;
	padding-right:0
}

#main .downloads .signature td{
	padding-bottom:1.5em
}

#main .downloads .pbzero td{
	padding-bottom:0
}

#main .downloads td a:hover, #main .downloads td a.active{
	color:#93A528
}

#main .downloads .center{
	text-align:center;
	padding:0px 10px 10px;
	*padding:0px 5px 10px;
	padding-left:0
}

#main .downloads .ban td, #main .downloads .ban td a{
	padding:0
}

#main .downloads .ban .img{
	padding-right:5px
}

#main .downloads td p{
	color:#000;
	font-weight:normal;
	text-transform:none;
	text-align:left;
	margin:5px 0
}

#main .downloads textarea{
	width:360px;
	height:80px;
	font-style:normal;
	color:#333;
	-moz-box-shadow:0px 0px 1em #ccc;
	border-width:1px 2px 2px 1px;
	border-style:solid;
}

/***** biodiversité ******/

.biodiv h1{
	color:#93A527;
	font-size:20px;
	margin:2em 0 2em;
	text-transform:uppercase;
}

.biodiv h2{
	color:#A23122;
	font-size:12px;
	margin:2.5em 0 1em;
	font-size:1.5em;
	font-weight:normal
}

#main .biodiv li{
	list-style-type:decimal;
}

#main .biodiv ol{
	margin:30px;
	color:#A23122;
	font-size:1.2em;
}

#main .biodiv p{
	line-height:1.6em
}

#main .biodiv .header{
	border-top:1px solid #000;
	border-bottom:1px solid #000;
	padding-top:10px;
	margin-bottom:-1em
}

#main .biodiv ul{
	margin-left:40px
}

#main .biodiv .separator{
	margin:4em 0;
	height:1px
}

#main .biodiv p{
	text-align:justify
}