/* top elements */
* { padding: 0; margin: 0; }

body {
	margin: 0;
	padding: 0;
	font:90% Verdana, Tahoma, Helvetica, sans-serif;
	color:#000/*525252*/; 
	background:#ffecfe url(images/arriereplan2.gif) fixed;
	text-align: center;
}

/* links */
a {
	font-family:Verdana, Geneva, sans-serif;
	font-size:1em;
	color:#333333;
	text-decoration:underline;
	background-color: inherit;
}
a:hover {
	color: #9f0092;
	background-color: inherit;
}

/* headers */
h1, h2, h3 {
	font: 1em 'Trebuchet MS', Arial, Sans-serif;
	color: #333;
		
}
h1 { font-size: 1.5em; color: #aa62bc;} 
h2 { font-size: 1.2em; text-transform:capitalize;}
h3 { font-size: 1.1em; color: #aa62bc; }

p, h1, h2, h3 {
	margin: 10px 15px;
	
}
ul, ol {
	margin: 10px 30px;
	padding: 0 15px;
	color: #4284B0;
}
ul span, ol span {
	color: #666666; 
}

.Style1 {color: #FF0000}
.Style4 {
	font-size: xx-large;
	color: #993366;
	font-weight: bold;
}

/* images */
/*img {
	border: 2px solid #CCC;
}
img.no-border {
	border: none;
}
img.float-right {
  margin: 5px 0px 5px 15px;  
}
img.float-left {
  margin: 5px 15px 5px 0px;
}
a img {  
  border: 2px solid #568EB6;
}
a:hover img {  
  border: 2px solid #CCC !important; /* IE fix
  border: 2px solid #568EB6;
}*/

code {
  margin: 5px 0;
  padding: 10px;
  text-align: left;
  display: block;
  overflow: auto;  
  font: 500 1em/1.5em 'Lucida Console', 'courier new', monospace;
  /* white-space: pre; */
  background: #FAFAFA;
  border: 1px solid #f2f2f2;  
  border-left: 4px solid #4284B0; 
}
acronym {
  cursor:pointer;
  border-bottom: 1px dashed #777;
}
blockquote {
	margin: 15px;
 	padding: 0 0 0 20px;  	
  	background: #FAFAFA;
	border: 1px solid #f2f2f2; 
	border-left: 4px solid #4284B0;   
	color: #4284B0;
	font: bold 1.2em/1.5em Georgia, 'Bookman Old Style', Serif;
	
}


/****************************/
/* search form */
/****************************/
form.searchform {
	background: transparent;
	border: none;
	margin: 0; padding: 0;
}
form.searchform input.textbox { 
	margin: 0; 
	width: 120px;
	border: 1px solid #9EC630; 
	background: #FFF;
	/*color: #333;*/
	color:#e6d6e5; 
	height: 14px;
	vertical-align: top;
}
form.searchform input.button { 
	margin: 0; 
	padding: 2px 3px; 
	font: bold 12px Arial, Sans-serif; 
	background: #FAFAFA;
	border: 1px solid #f2f2f2;
	color: #777;	
	width: 60px;
	vertical-align: top;
}
img{
	border:none;
	}

/***********************
	  LAYOUT
************************/
#wrap {
	background:#ffecfe;
	margin: 0 auto;
	width: 960px; height: 100%;
	text-align: left;
	
}
#content-wrap {
	
	clear: both;
	margin: 0; padding: 0;	
	
	
	
}
#headerban{
	position:relative;
	height:125px;
	z-index:0;
	}

/* header */
#header {
	position: relative;
	height: 85px;	
	background: #d3b9d1 url(images/index/header_960_12_haut.jpg) 0% 100% no-repeat;/*url(images/headerbg1.png) repeat-x 0% 100%*/
}
#header h1#logo {
	position: absolute;
	margin: 0; /*padding: 0;*/
	padding-left:130px;
	font: bolder 3.5em 'Trebuchet MS', Arial, Sans-serif;
	letter-spacing: -2px;
	text-transform: lowercase;
	top: 0; left: 5px;
	/*background: #d3b9d1 url(images/header_bas_960_3.png) 0% 100% no-repeat;*/
		
}
#header h2#slogan {
	position: absolute;	 
	top:40px; left: 143px;
	color: #fff;
	text-indent: 0px;
	font: bold 1.1em Tahoma, 'trebuchet MS', Sans-serif; 
	text-transform: none;
	letter-spacing:.2em;	
}
#header form.searchform {
	position: absolute;
	top: 0; right: -12px;	
}

/* main */
#main {
	float:left;
	
	margin-left: 20px;
	padding: 0;
	width:550px;
}


#mainexpo{
	width:80%;
	min-width:600px;
	}

.post-footer {
	background-color: #FAFAFA;
	padding: 5px; margin: 20px 15px 0 15px;
	border: 1px solid #f2f2f2;
	font-size: 95%;	
}
.post-footer .date {
	background: url(images/clock.gif) no-repeat left center;
	padding-left: 20px; margin: 0 10px 0 5px;
}
.post-footer .comments {
	background: url(images/comment.gif) no-repeat left center;
	padding-left: 20px; margin: 0 10px 0 5px;
}
.post-footer .readmore {
	background: url(images/page.gif) no-repeat left center;
	padding-left: 20px; margin: 0 10px 0 5px;
}

/* sidebar */
#sidebar {
	/*background-image:url(images/edito/hautsidebar4.jpg);
	background-repeat:no-repeat;*/
	/*background-color:#740173;*/
	
	float: left;
	width: /*20%*/180px;
	margin: 0;	padding: 0; 
	display: inline;

			
}
#sidebar ul.sidemenu {
	list-style:none;
	/*margin:10px 0 10px 15px;*/
	margin:10px 0 5px 5px;
	padding:0;
		
}
#sidebar ul.sidemenu li {
	margin-bottom:1px;
	border: 1px solid #f2f2f2;
}
#sidebar ul.sidemenu a {
	font-size:/*0.85em;*/12px;
	display:block;
	font-weight:bold;
	color: #cccccc;	
	text-decoration:none;
	padding-left:10px;	
	/*padding:2px 5px 2px 10px;*/
	/*padding:1px 2px 2px 10px;*/
	background-image:url(images/menu/menu_a03.gif);
	background-repeat:no-repeat;
	/*background-image:url(images/bg_nav03.png);*/
	/*background: #f2f2f2;*/
	/*border-left:4px solid*/ /*#ff0096;*//*#ccc;*//*ff00f0*/
	/*min-height:18px;*/
}

* html body #sidebar ul.sidemenu a { height: 16px; }

#sidebar ul.sidemenu a:hover {
	/*padding:1px 2px 2px 10px;*/
	padding-left:10px;
	background-image:url(images/menu/menu_a_hover03.gif);
	/*background-image:url(images/bg_nav04.png);*/
	/*background: #f2f2f2;*/
	color:#FFF /*#9f0092;*/
	/*border-left:4px solid #ff0096;*/
}



/* rightbar */
#rightbar {
	/*background-image:url(images/edito/hautsidebar2.jpg);
	background-repeat:no-repeat;
	background-color:#ecd9eb;*/
	float: right;
	width: 170px;
	padding: 0; margin:0 5px 0 0;
}


/* Footer */
#footer { 
	clear: both; 
	color: #8a0576;
	background: #ffffff url(images/footer960_5.jpg) top right no-repeat;
	/*border-top: 5px solid #8a0576;*/
	margin:35px 0 0 0; padding:30px 0 0 0; 
	height: 120px;	  
	font-size: 9px /*0.70em*/;
	text-transform:none;
	text-indent: 0px;		
}
#footer a {
	font-size:1em; 
	text-decoration: none; 
	font-weight: bold;	
	color: #000000;
}

#footer a:hover{
	color:#FF00FF;
	}
#footer .footer-left{
	float: left;
	width: 80%;
}
#footer .footer-right{
	float: right;
	width: 20%;
}

#footer .footer-center{
	width:100%;
	float:left;
	border-top:1px solid #000000;
	}

#footer p {
	font-size:1em;
	}
#last{
	background:#272c3f url(images/last.jpg) top right no-repeat;
	width:960px;
	margin:0 auto;
}

/* menu tabs */
#header ul {
	z-index: 999999;
	position: absolute;
   	margin:0; padding: 0;
   	list-style:none;
	right: 0; 
	/*bottom: 6px !important; bottom: 5px;*/
	font: bold 1em  Arial, 'Trebuchet MS', Tahoma, verdana,  sans-serif;	
}
#header li {
   display:inline;
   margin:0; padding:0;
}
#header a {
   float:left;
   background: url(images/tableft_22.png) no-repeat left top;
   margin:0;
   padding:0 0 0 4px;
   text-decoration:none;
}
#header a span {
   float:left;
   display:block;
   background: url(images/tabright_22.png) no-repeat right top;
   padding:6px 15px 3px 8px;
   color:/*#ff51f2;*/#f9d1f6;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#header a span {float:none;}
/* End IE5-Mac hack */
#header a:hover span {
	color:/*#ccc;*/#FFF;
}
#header a:hover {
   background-position:0% -42px;
}
#header a:hover span {
   background-position:100% -42px;
}
#header #current a {
   background-position:0% -42px;
	color: #ff51f2;
}
#header #current a span {
   background-position:100% -42px;
	color: #ccc;
}
/* end menu tabs */

/* alignment classes */
.float-left  { float: left; }
.float-right {	float: right; }
.align-left  {	text-align: left; }
.align-right {	text-align: right; }

/* additional classes */
.clear { clear: both; }
.fonce {color:#9f0092;/*#be5c83;*/}
.violet {color:/*#fde2fb;*/#f7f7f7; }
.rose  {color:#d601c6/*#993399;*/ }
.noir {color:#d601c6;}


#compteur {
	font-size:1em;
	/*background-image:url(images/motif.jpg);
	 background-repeat:repeat;*/
	 border:none;
	 background-color:#000000;
	 color:#ffffff; 
	 text-align:center;
	 }
#compteur img{
	border:none;
	}
#compteur a:hover img{
	border:none;
	}
#compteur a:hover{
	border:none;
	}

#compteur, #compteurb {font-family:arial;padding:1px;text-align:center;}
#compteurb {font-size:1em; background-color:#a58ba8;} 
#compteurb a {color:#ffffff;text-decoration:none;}


/*calendrier*/

#right {
	margin-left: /*343*/20px;
	margin-top: 10px;
	margin-right: 50px;

}	
.date_box {
	/*background-color: #FFFFFF;*/
	background-image:url(images/evenements/date.jpg);
	height: 60px;
	width: 60px;
	float: left;
	margin-left:13px;

}

.date_box_month {
	padding-top: 9px;
	font-size:0.8em;
	font-family: Arial, Helvetica, sans-serif;
	padding-left: 3px;
	text-align: center;
	color:#FFFFFF;
	/*color: #75a006;*/
}

.date_box_day {
	font-size:1.4em;
	font-weight: bold;
	text-align: center;
	font-style: italic;	
	color: #654040;
	margin-bottom: 18px;
	
}
h4 {
	height: 60px;
	/*background-color: #FFFFFF;
	padding-top: 20px;*/
	padding-left: 30px;
	font-size: 1.4em;
	font-family: "Times New Roman", Times, serif;
	font-style: italic;
	font-weight: bold;
	color: #993300;
	border-bottom:1px solid #ffffff;
	vertical-align:middle;

}

.retour{
	font-size:0.70em;
	color:#FFFFFF;
	float:right;
	}
	

/* galerie photo common styling */

/*a {color:#000;}
a:hover {text-decoration:none;}
a:visited {color:#111;}*/

/* slides styling */

.photo {width:720px; height:600px; /*background:url(images/back_galerie3.png)*/ background: no-repeat center center; text-align:left; position:relative; background-color:#eedfec/*ffecfe*/;}

.photo dl {font-size:0.9em; position:absolute; width:400px; top:100px; left:100px;}
.photo dl dt {font-family:"times new roman", serif;font-size:1.8em; margin-bottom:2em;}
.photo dl dd {font-family:verdana, arial, sans-serif;  padding:0; margin:0; line-height:1.7em; margin-bottom:2em; font-size:11px;}
.photo dl dd:first-letter {font-weight:bold;}
.photo ul.topic {padding:0; margin:0; list-style:none; width:720px; height:auto; position:relative; z-index:10;}

.photo ul.topic li {display:block; width:144px;/*240px;*/ height:31px; float:left;}
.photo ul.topic li a.set {display:block; font-size:1em; width:143px;/*239* pour 3 onglets - 179 pour 4 onglets*/ height:30px; text-align:center; line-height:30px; color:#000; text-decoration:none; border:1px solid #fff; border-width:1px 1px 0 0; background:#ccc; font-family:verdana, arial, sans-serif;}

.photo ul.topic li a ul, 
.photo ul.topic li ul 
{display:none;}

.photo ul.topic li a:hover,
.photo ul.topic li:hover a
{color:#fff; background:#aaa;}

.photo ul.topic li a:hover ul, 
.photo ul.topic li:hover ul 
	{
		display:block; 
		position:absolute; 
		left:0; 
		top:31px; 
		list-style:none; 
		padding:0; 
		margin:0; 
		height:375px; 
		background:#ddd url(images/close.gif) no-repeat right top;
		width:479px; 
		padding:70px 100px; 
		border:20px solid #aaa;}

.photo ul.topic li a:hover ul li, 
.photo ul.topic li:hover ul li 
{display:inline; width:112px; height:87px; float:left; border:1px solid #fff; margin:1px;}

.photo ul.topic li a:hover ul li a, 
.photo ul.topic li:hover ul li a 
{display:block; width:110px; height:85px; cursor:default; float:left; text-decoration:none; background:#444; border:1px solid #888;}

.photo ul.topic li a:hover ul li a img, 
.photo ul.topic li:hover ul li a img 
{display:block; width:100px; height:75px; border:5px solid #eee;}

.photo ul.topic li a:hover ul li a img.large, 
.photo ul.topic li:hover ul li a img.large 
{position:absolute; display:block; width:0; height:0; overflow:hidden; border:0;}

.photo ul.topic li a:hover ul li a:hover, 
.photo ul.topic li:hover ul li a:hover 
{white-space:normal; position:relative;}

.photo ul.topic li a:hover ul li a:hover img, 
.photo ul.topic li:hover ul li a:hover img 
{position:absolute; left:-50px; top:-32px; width:200px; height:150px; border-color:#fff;}

.photo ul.topic li a:hover ul li a:hover img.large, 
.photo ul.topic li:hover ul li a:hover img.large 
{position:absolute; display:block; width:0; height:0; overflow:hidden; border:0;}

.photo ul.topic li:hover ul li a:focus, 
.photo ul.topic li:hover ul li a:active,
.photo ul.topic li a:hover ul li a:active 
{position:static; outline:0;}

.photo ul.topic li:hover ul li a:focus img, 
.photo ul.topic li:hover ul li a:active img, 
.photo ul.topic li a:hover ul li a:active img 
{position:absolute; left:200px; top:170px; width:200px; height:150px; padding:0; background:#000; border:0; z-index:5;}


.photo ul.topic li:hover ul li a:focus img.large, 
.photo ul.topic li:hover ul li a:active img.large, 
.photo ul.topic li a:hover ul li a:active img.large
{position:absolute; left:15px; top:24px; width:640px;/*640*/ height:480px;/*480*/ padding:0; background:#000; border:4px solid #fff; z-index:10;}

/*.com{position:absolute; left:15px; top:500px; width:640px;height:50px;padding:0;background:#000;border:4px solid #fff; color:#ffffff; text-align:center;}

/* fin css galerie photos*/



/*news*/

.news{
	width:145px;
	font-family:Geneva, Arial, Helvetica, sans-serif;
	font-size:1em;
	color:#FFFFFF;
	text-align:left;
	padding-left:5px;
}
.news a{
	color:#F0F;
	font-weight:bold;
}

.news a:hover{
	color:#FFF;
}

			/*////////////////////////////////*/
			/*///////fin news///////////////*/
			/*/////////////////////////////*/


.suite a{
	background-image:url(images/edito/suite_a.gif);
	background-repeat:no-repeat;
	float:right;
	}
	
.suite a:hover{
	background-image:url(images/edito/suite_a_hover.gif);
	background-repeat:no-repeat;
	float:right;
	}
	



.evenement {
	background-image:url(images/evenements/menu_a.jpg);
	background-repeat:no-repeat;
	height:30px;
	width:150px;
	
}


.evenement a{
	display:block;
	font-family:Geneva, Arial, Helvetica, sans-serif;
	font-size:1.6em;
	color:#f1f1f1;
	border-style:none;
	text-decoration:none;
	padding:2px 50px 0px 48px;
}
	
.evenement a:hover{
	display:block;
	background-image:url(images/evenements/menu_a_hover.jpg);
	background-repeat:no-repeat;
	padding:2px 50px 0px 48px;
	font-family:Geneva, Arial, Helvetica, sans-serif;
	color:#FFFFFF;
	border-style:none;

}


/**** Form Layout ****/


.ccab { display: none; }


.errormsg {
  display: block;
  width: 90%;
  color: #FFFFFF;
  /*background: #920186 url(images/contact/alert2.png) no-repeat 10px center;*/
  background-image:url(images/error.png);
  background-position:center;
  background-repeat:no-repeat;
  padding: 6px 10px 3px 40px;
  margin: 10px 0 8px 0;
  height:25px;
  /*border-top: 2px solid #d70093;
  border-bottom: 2px solid #d70093;*/
}



input, textarea, select {
  font: 1em arial, helvetica, sans-serif;
  /*background-color: #e8ddd0;*/
  background-color:#e6d6e5;
  border: 1px solid #443833;
  line-height: 1.25em;
  padding: 0 0 0 2px;
}

input:focus, textarea:focus, select:focus {
  border: 1px solid #55453E;
  background-color: #efefef;
}

input.button {
  background:url(images/button01.jpg) repeat-x center;
  color: white;
  padding: 0 7px;
  height: 25px;
  border: 1px solid white /*#302723*/;
  cursor:pointer;
}

input.button:hover {
  background:url(images/button.jpg) repeat-x center;
  color: white;
  padding: 0 7px;
  height: 25px;
  border: 1px solid #302723;
  cursor:pointer;
}

#lay {
	display:block;
	padding: 5px 0px 3px 0px;
	width: 525px;
	height: 100%;
	/*margin: 0 auto;*/	
	}
form {
	/*border: 5px solid #e8ddd0; 
	background-color: #FAFAFA;*/
	/*border: 5px solid #72526f;*/
	color:#FFF;
	background-color:#7F1F55;
	background-image:url(images/logo_are_seul.png);
	background-position:top right;
	background-repeat:no-repeat;
	/*background-image:url(images/back_galerie3.png);*/
	text-align:left;
	}
	
.formb{
	text-align:center;
	background-image:none;
}
	
/* form elements 
form {
	margin:10px; padding: 0;
	border: 1px solid #f2f2f2; 
	background-color: #FAFAFA; 
}
label {
	display:block;
	font-weight:bold;
	margin:5px 0;
}
input {
	padding: 2px;
	border:1px solid #eee;
	font: normal 1em Verdana, sans-serif;
	color:#777;
}
textarea {
	width:300px;
	padding:2px;
	font: normal 1em Verdana, sans-serif;
	border:1px solid #eee;
	height:100px;
	display:block;
	color:#777;
}
input.button { 
	margin: 0; 
	font: bold 1em Arial, Sans-serif; 
	border: 1px solid #CCC;
	background: #FFF; 
	padding: 2px 3px; 
	color: #4284B0;	
}*/

.date_debut {
  display: block;
  width: 525px;
  color: #FFFFFF;
  /*background-image:url(images/contact/bg.png);*/
  background-image:url(images/edito/date_haut_page2.jpg);
  background-repeat:repeat-x;
  padding: 7px 0px 3px 0px;
 /* margin: 10px 0;*/
  height:30px;
  font-size:1em;
  /*border-top: 2px solid #d70093;
  border-bottom: 2px solid #d70093;*/
}

.date_debut2 {
  display: block;
  width: 525px;
  color: #FFFFFF;
  /*background-image:url(images/contact/bg.png);*/
  background-image:url(images/edito/date_haut_page_v3.jpg);
  background-repeat:repeat-x;
  padding: 7px 0px 3px 0px;
 /* margin: 10px 0;*/
  height:30px;
  font-size:1em;
  /*border-top: 2px solid #d70093;
  border-bottom: 2px solid #d70093;*/
}
.date_debut p{
	margin:0 auto;
}

	
	
.maj{
	color:#FFFFFF;
	text-decoration:none;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	padding-left:10px;
	background-image:url(images/edito/maj.gif);
	background-repeat:no-repeat;
	background-position:center;
	padding-top:1px;
	margin-left:20px;
	height:20px;
	width:120px;
	
	
	
	
	}
	
	
#maj2 {
	margin: auto;
	width:140px;

}

#maj2 #header #header_left {
	float: left;
	background-image:url(images/edito/header_left_maj.gif);
	background-repeat: no-repeat;
	height: 20px;
	width: 4px;
}
#maj2 #header #header_right {
	background-image:url(images/edito/header_right_maj.gif);
	background-repeat: no-repeat;
	height: 20px;
	width: 4px;
	float: right;
}

#maj2 #header #header_main {
	float: left;
	padding: 1px 0 0 15px;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #FFFFFF;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}


#maj2 #header {
	padding: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	background-image:url(images/edito/header_maj2.gif);
	background-repeat: repeat-x;
	height: 20px;
	color:#FFF;
}

		
/*///////////////////////////////////////////////////////////////
///////////////////fin maj02////////////////////////////////////
////////////////////////////////////////////////////////////*/


#nouv{
	background-image:url(images/edito/nouveautes03.jpg);
	background-repeat:no-repeat;
	background-position:center;
	font:"Trebuchet MS", Arial, Helvetica, sans-serif;
	color:#FFF;
}
.legende_tableau{
	background-image:url(images/edito/fond_legende_vik.jpg);
	background-repeat:no-repeat;
	margin-left:108px;
	color:#FFFFFF;
	padding-left:50px;
	}
	
.legende_tableau {
  display: block;
  width: 310px;
  color: #FFFFFF;
  font-weight: bold;
  /*background-image:url(images/contact/bg.png);*/
  background-image:url(images/index/legende_aquarelle.jpg);
  background-repeat:no-repeat;
  padding: 7px 0px 3px 0px;
  margin: 0 0px 0 0px;
  height:30px;
  font-size:12px;
  /*border-top: 2px solid #d70093;
  border-bottom: 2px solid #d70093;*/
}

.expo{
	color:#FFFFFF;
	font-weight:bold;
	/*background-image:url(images/contact/bg.png);*/
	background-image:url(images/gifs_animes/annonce_expo_index.gif);
	background-repeat:no-repeat;
	padding-top:4px;
	padding-right:10px;
	padding-left:4px;
	margin-left:20px;
	
	}
	
.pagenews {
	background-image:url(images/news/bg_02.jpg);
	background-repeat:repeat-x;
	
	}
	
	
	
	
/*mimiature site*/

#minisite{
	background-image:url(images/arriereplan2.gif);
	color:#FFF;
}
/*cadre qui entoure les stages*/






.cadre
{
/* à vous de voir les propriétés à y mettre */
width : 700px ; /* par exemple */
}

.haut_1
{
background : url("images/stages/cadre4/hg.gif") bottom left no-repeat ;
padding-left: 20px ;
}

.haut_2
{
background : url("images/stages/cadre4/hd.gif") bottom right no-repeat ;
padding-right: 20px ;
}

.haut
{
background : url("images/stages/cadre4/h.gif") bottom center repeat-x ;
width : 100% ;
padding-top : 30px ;
/* On met un padding-top ou un padding-bottom dans la balise "la plus imbriquée", celle qui est le plus à l'intérieur comme ça les autres div qui contiennent celle-ci seront redimmensionnées automatiquement et on vera les cadres
Notez que dans une version antérieur de ce tutorial j'utilisait l'attribut height mais je me suis rendu compte que ça créait des problèmes, notament sous Internet Explorer, je sais pas pourquoi :-S  */
}



.milieu_1
{
background : url("images/stages/cadre4/g.gif") left repeat-y ;
padding-left: 20px ;
height : 100% ; /* Pour que toute la place disponible soit utilisée, et qu'ainsi tout le fond soit visible */
}

.milieu_2
{
background : url("images/stages/cadre4/d.gif") right repeat-y ;
padding-right: 20px ;
height : 100% ; /* Pour que tout le fond soit visible */
}

.milieu
{
background-color:#e6d6e5;
color:#000000;
width : 100% ;
height : 100% ; /* Pour voir le fond */
}




.bas_1
{
background : url("images/stages/cadre4/bg.gif") top left no-repeat ;
padding-left: 20px ;
}

.bas_2
{
background : url("images/stages/cadre4/bd.gif") top right no-repeat ;
padding-right: 20px ;
}

.bas
{
background : url("images/stages/cadre4/b.gif") top center repeat-x ;
width : 100% ;
padding-top : 30px ;
}

/*cadre bleu*/
.cadre
{
/* à vous de voir les propriétés à y mettre */
width : 550px ; /* par exemple */
}

.haut_11
{
background : url("images/cadre/01/hg.gif") bottom left no-repeat ;
padding-left: 30px ;
}

.haut_21
{
background : url("images/cadre/01/hd.gif") bottom right no-repeat ;
padding-right: 30px ;
}

.haut1
{
background : url("images/cadre/01/h.gif") bottom center repeat-x ;
width : 100% ;
padding-top : 30px ;
/* On met un padding-top ou un padding-bottom dans la balise "la plus imbriquée", celle qui est le plus à l'intérieur comme ça les autres div qui contiennent celle-ci seront redimmensionnées automatiquement et on vera les cadres
Notez que dans une version antérieur de ce tutorial j'utilisait l'attribut height mais je me suis rendu compte que ça créait des problèmes, notament sous Internet Explorer, je sais pas pourquoi :-S  */
}



.milieu_11
{
background : url("images/cadre/01/g.gif") left repeat-y ;
padding-left: 20px ;
height : 100% ; /* Pour que toute la place disponible soit utilisée, et qu'ainsi tout le fond soit visible */
}

.milieu_21
{
background : url("images/cadre/01/d.gif") right repeat-y ;
padding-right: 20px ;
height : 100% ; /* Pour que tout le fond soit visible */
}

.milieu1
{

color:#000000;
width : 100% ;
height : 100% ; /* Pour voir le fond */
}




.bas_11
{
background : url("images/cadre/01/bg.gif") top left no-repeat ;
padding-left: 30px ;
}

.bas_21
{
background : url("images/cadre/01/bd.gif") top right no-repeat ;
padding-right: 30px ;
}

.bas1
{
background : url("images/cadre/01/b.gif") top center repeat-x ;
width : 100% ;
padding-top : 30px ;
}


.attention{
	width:85%;
	background:url(images/expo2010/demo.jpg) no-repeat;
	float:left;
	height:150px;
	padding:0 20px 0 60px;
	}
	
.attention2011{
	width:85%;
	background:url(images/expo2011/demo.jpg) no-repeat;
	float:left;
	height:150px;
	padding:0 20px 0 60px;
	margin-left:25px;
	}
	
	
.attention2012{
	width:85%;
	background:url(images/expo2012/demo2012.jpg) no-repeat;
	float:left;
	height:250px;
	padding:0 20px 0 60px;
	margin-left:25px;
	}
	
	
.nouveaustage{
	width:85%;
	background:url(images/gifs_animes/nouveau_stage.gif) no-repeat;
	float:left;
	height:150px;
	padding:0 20px 0 60px;
	}
	
	

	
/*///////////////////////////////////////////////////////////*/
/*///////////////////////scroller page index ////////////////*/
/*///////////////////////////////////////////////////////////*/

#pscroller1{
width: 150px;
height: 100px;
/*border: 1px solid black;*/
padding: 5px;
background-color:#ffecfe;
}

#pscroller2{
width: 550px;
height: 20px;
border: 1px solid black;
font-weight:bold;
color:#FF0000;
padding: 3px;
text-align:center;
}

#pscroller2 a{
text-decoration: none;
}

/*.someclass{ //class to apply to your scroller(s) if desired
}*/



/*///////////////////////////////////////////////////////////*/
/*/////////////////////////  livre or  //////////////////////*/
/*///////////////////////////////////////////////////////////*/
#container {
	margin: auto;
	width:500px;

}
#container #header #header_left {
	float: left;
	background-image:url(images/guestbook/header_left.gif);
	background-repeat: no-repeat;
	height: 42px;
	width: 45px;
}
#container #header #header_right {
	background-image: url(images/guestbook/header_right.gif);
	background-repeat: no-repeat;
	height: 42px;
	width: 6px;
	float: right;
}

#container #content {
	padding: 5px;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: normal;
	color: #666666;
}
#container #footer {
    clear:both;
	text-align: right;
	
}
#container #footer a {
	color: #999999;
	text-decoration: none;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 10px;
}

#container #header #header_main {
	float: left;
	padding: 8px 5px 0 0;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 1em;
	font-weight: bold;
	color: #FFFFFF;
	margin-top: 5px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}


#container #header {
	padding: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	background-image: url(images/guestbook/header_bg.gif);
	background-repeat: repeat-x;
	height: 42px;
}

#navigation {
   width:500px;
   margin:0px auto;
   
}

#navigation a {
   text-decoration:none;
}

#nleft {
   width:200px;
   float:left;
   text-align:center;
   
}

#nright {
   width:200px;
   float:right;
   text-align:center;
}

.newsList{
   width:500px;
	margin:20px auto;
	border:1px solid #ccc;
	border-collapse:collapse;
	background:#e6e0e6;
	
}

.newsList a{
   text-decoration:none;
   color:#fff;
   padding-left:5px;
}

.newsList th {
    padding:5px;
	background-image: url(images/guestbook/hbg.gif);
	background-repeat: repeat-x;
    color:#fff;
}

.right{
	text-align:right;
	font-size:10px;
}

.iform {
	margin:auto;
	padding:10px;
}

hr {
   height:0px;
   border:0px;
   border-top:1px solid #ccc;
}

/*////////////////////////expo2009/////////////////////*/

#expo2009 {
	margin:0 auto;
	width:50%;
	

}
#expo2009 #header #header_left {
	float: left;
	background-image:url(images/expo2009/cadre_gauche.gif);
	background-repeat: no-repeat;
	height: 50px;
	width: 10px;
}
#expo2009 #header #header_right {
	background-image:url(images/expo2009/cadre_droit.gif);
	background-repeat: no-repeat;
	height: 50px;
	width: 10px;
	float: right;
}

#expo2009 #content {
	padding: 5px;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 1em;
	font-weight: normal;
	color: #666666;
}
#expo2009 #footer {
    clear:both;
	text-align: right;
	
}
#expo2009 #footer a {
	color: #999999;
	text-decoration: none;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 1em;
}

#expo2009 #header #header_main {
	float: left;
	padding: 10px;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 1.5em;
	font-weight: bold;
	color: #FFFFFF;
	/*margin-top: 5px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 20px;*/
	margin:5px 0 0 20px;
	
}


#expo2009 #header {
	padding: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	background-image:url(images/expo2009/cadre_milieu.gif);
	background-repeat: repeat-x;
	height: 50px;
}


.expo2011{
	background-image:url(images/Expo2011/expo2011.jpg);
	color:#903;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:24px;
	font-weight:bold;
	height:190px;
}

/*/////////////////////////////////////////////////////////////////////////*/
/*/////////////////////// galerie photos expo2009 presentation/////////////*/
/*////////////////////////////////////////////////////////////////////////*/

div#galerie
{
	width: 90% ;
	background-color:#ffecfe;
	padding: 5px ;
	margin:0 auto;
	text-align: center ;
	font: 0.9em Georgia, serif ;
	
}

div#galerie2010
{
	width: 90% ;
	background-color:#e6d6e5;
	padding: 5px ;
	margin:0 auto;
	text-align: center ;
	font: 0.9em Georgia, serif ;
	
}


ul#galerie_mini
{
	margin: 0 auto ;
	padding: 0 ;
	list-style-type: none ;
}

ul#galerie_mini li
{
	/*float: left ;*/
	text-align:center;
}

ul#galerie_mini li a img
{
	/*margin: 2px 1px ;*/
	/*border: 1px solid #dcb ;*/
}

dl#photo
{
	clear: both ;
	margin: 0 auto ;
}

dl#photo dt
{
	font: italic 2.5em/1.5em Georgia, serif ;
	color: #dcb ;
}

dl#photo dd
{
	margin: 0 ;
}

dl#photo img
{
	/*border: 1px solid #dcb ;*/
}

#imagetruc img
{
border:none;
text-align:center;
}


/*///////////////////////////////////////////////////////////////////////////////////*/