/* ===| LAYOUT |============================================*/

* {margin: 0;}

html, body {height: 100%; width: 100%;}

body {text-align: center;}

ul, li{
	list-style: none;
	list-style-position: outside;
	margin: 0;
	padding: 0;}
#wrap-container {
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto -75px;
	/* the bottom margin is the negative value of the footer's height */}

#container {
	margin:0 auto;
	width: 802px;
	text-align: left;}

.header {
	width: 802px;
	height: 321px;
  float:left;
  margin:0px;
  padding:0px;
/*	text-indent: -9999em;*/
}

#left-column{
	float:left;
	width: 240px;
	margin: 0px 0 0 0;}

#right-column{
	float:left;
	width: 562px;
	margin:0px;
	padding:0px;}
#contenu
{
  width:537px;
  margin:0px 10px;
}
ul.list{
  margin:0px 0 10px 0px;
  float: left;
}
ul.list li
{
background: url(../images/charte/bullet1.jpg) no-repeat top left;
background-position:0px 4px;
line-height: 18px;
padding:0px 2px 2px 15px;
}
ul.list2{
  margin:0px 0 10px 0px;
  float: left;
}
ul.list2 li
{
background: url(../images/charte/bullet1.gif) no-repeat top left;
background-position:0px 4px;
line-height: 18px;
padding:0px 2px 2px 15px;
text-align: left;
}
ul.list1{
  width:150px;
  float: left;
  margin: 5px auto;
  padding-left: 130px;
}
ul.list1 li
{
background: url(../images/charte/bullet1.jpg) no-repeat top left;
background-position:0px 4px;
line-height: 18px;
padding:0px 2px 2px 15px;
}
ul.list-left{
  width:165px;
  margin:15px 0 15px 15px;
  float: left;
}
ul.list-left li
{
background: url(../images/charte/bullet.jpg) no-repeat top left;
background-position:0px 6px;
line-height: 18px;
padding:0px 2px 2px 10px;
}

ul.list-right{
  width:150px;
  margin:15px 0 15px 10px;
  float: left;
}
ul.list-right li
{
background: url(../images/charte/bullet.jpg) no-repeat top left;
background-position:0px 6px;
line-height: 17px;
padding:0px 2px 2px 10px;
}
#actualite
{
float: right;
height: 253px;
width: 407px;
background: url(../images/charte/bg-mdm.jpg) no-repeat top right;
}
#diaporama
{
float: left;
height: 253px;
width: 395px;
}
#contact-info
{
 background: url(../images/charte/bg-adresse.jpg) no-repeat top left;
 width: 240px;
 height: 237px;
}
#plan-info
{
 background: url(../images/charte/bg-plan.jpg) no-repeat top left;
 width: 240px;
 height: 318px;
}
#promo {
height: 181px;
background: url(../images/charte/bg-promo.jpg) no-repeat top left;
}
#promo1 {
height: 150px;
background: url(../images/charte/bg-promo1.gif) no-repeat top left;
}
#wrap-footer, .push {height: 52px; /* .push must be the same height as .footer */}
.push	{clear: both;}

#footer {
  width: 802px;
	height: 52px;
	margin: 0 auto;
	padding: 0;}
#digital
{
  width: 140px;
  height:40px;
  float: left;
  padding-top: 20px;
  cursor: pointer;
}
.copyright{
padding: 5px 0 0 0;
color: #FB9726;
text-align: center;}

 /*	TROUBLESHOOTING: |------------------------------------------
	If you want space between paragraphs or headers, use padding
	instead of margin.
	------------------------------------------------------------*/
img {border: 0;}
 #plan-info img
{
 	margin:5px 0 0 6px;
}
.photo1{
	float: right;
	display: block;}

.photo2{
	float: left;
	display: block;}

.photo1 img{
	padding: 0px;
  margin-top: 5px;
	margin-left: 10px;
}
.photo2 img{
	padding: 0px;
  margin-top: 5px;
	margin-right: 10px;
}
 .photo3{
  width:342px;
  margin:0px auto;}
.photo3 img{
 /*border: 5px solid #fbfbfb;
	background-color: #eeeeee;*/
	padding-bottom: 5px;
}
.paragraph{
	clear: both;
	display: table;
}
div.separator{
	width: 100%;
	height: 18px;
  clear: both;
	padding:0px 0px;
	margin:	0px auto;
}
 div.img-sep{
	width: 100%;
	height: 30px;
  clear: both;
	padding:0px 0px;
	margin:	5px auto;
}
#actualite img
{
 padding: 4px;
  margin: 0px 15px 0 5px;
  float: right;
}
/* ===| TYPOGRAPHY |============================================*/
body{
	font-family: Tahoma, Arial, Verdana, Geneva, Helvetica, sans-serif;
	font-size: 12px;
}

h6, pre{
	padding: 0 15px;}

h2{
 font-family: Tahoma, Arial, Verdana, Geneva, Helvetica, sans-serif;
  font-size: 16px;
  margin-top: 10px;}

h3{
  font-family: Tahoma, Arial, Verdana, Geneva, Helvetica, sans-serif;
	font-size: 14px;
  font-weight: bold;}

#contact-info p
{
	color: #1D0C11;
	font: 12px tahoma;
	text-align: center;
}
 #contact-info
{
 	color: #1D0C11;
	font: 12px tahoma;
	text-align: center;
}

p {padding:15px 0;
	color: #1D0C11;
	font: 1em/1.3em arial,sans-serif;
	text-align: justify;}
#contenu p
{
  font-family: Tahoma;
  font-size: 11px;
  color: #3E3F3F;
  text-align: justify;
  line-height: 18px;
}
#contenu ul{
  font-family: Tahoma;
  font-size: 11px;
  }
#actualite p
{
  font-family: Tahoma;
  font-size: 11px;
  padding: 0px 0px 0 10px;
  color: #3E3F3F;
  text-align: justify;
  line-height: 18px;
}


.copyright{
  font-family: Tahoma;
	font-size: 11px ;}

#footer p
{
  font-family: Tahoma;
  padding: 20px 5px 0px 20px;
  font-size: 11px;
  color: #7E7E7E;
  text-align: left;
}

/* ===| COLORS |============================================*/

body {background: #3F72E8; color: #3E3F3F;}
.header,
#left-column {background-color: transparent; color: #a2a2a2;}
#right-column {background-color: transparent; color: #303232;}

#container {background: url(../images/charte/bg-container.jpg) repeat-y; }

#footer{background: url(../images/charte/bg-footer.jpg) no-repeat top left; color: inherit;}

h2{
	color: #3E3F3F;
	background-color: transparent;}

#wrap-footer{background-color: transparent;}

a {color: #FB9726;}
a:hover {	text-decoration: none;}

/* ===| IMAGES |===============================================*/
/*a.digitalage{
	text-indent: -999px;
}*/
.digitalage:link, .digitalage:visited{
	text-indent: -999px;
	float:left;
  padding-top: 20px;
	width: 200px;
	height: 100%;
	display: block;
	background:url(../images/charte/digital_age.gif) 50% 50% no-repeat;}
.digitalage:hover, .digitalage:active{
	background:url(../images/charte/digital_age_ovr.gif) 50% 50% no-repeat;}

/* ===| MAIN MENU |============================================*/

#menu1, #actualite, #contact-info, #promo{
	margin:0 0 1px	 0;
	background-color: #cccccc;}

#menu1 ul{
	padding: 2px 0;
}
#menu1 ul a:link,
#menu1 ul a:visited{
	text-decoration: none;
	display: block;
	width: 192px;
	margin: 2px auto;
	border: 1px solid #ffffff;
	background-color: #e3e3e3;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	padding: 3px 0;
}
#menu1 ul a:hover,
#menu1 ul a:active{
	color: #ffffff;
	background-color: #737373;}

body.presentation #menu1 a.btn2,
body.html-section #menu1 a.btn3,
body.css-section #menu1 a.btn4,
body.php-section #menu1 a.btn5{
	background-color: #194379;
	color: #cccccc;}

/* ===| FOOTER MENU |============================================*/	
#menu2{
	padding: 15px 0 0 0px;
  margin: 0px auto;
  text-align: center;}
 #menu2 a{
	font-size: 11px;
	font-family: Tahoma, Helvetica, sans-serif;
	text-decoration: none;
/*		border-left: 1px solid #a2a2a2; */
		padding: 0 5px;}
#menu2 a:hover{
	color:#FB9726;
	text-decoration: underline;
}
/* ---| THE END |------------------------- */