@import url(typo.css);
@import url(skin.css);

/*===| I. LAYOUT SIZE |====================================================*/

#container, #footer, #header  {width: 996px;}
#header {height:436px; float: left;}
#left-column {width: 252px;}
#right-column {width:744px;}
p,div{margin:0px; padding: 0px;}



/* --- Important! -------------------------------
	The bottom margin of #wrap-container
	is the negative value of the footer's height
	-----------------------------------------------

/* ===| II. LAYOUT's DEFAULT ELEMENTS |=======================================*/
* {margin: 0;}

html, body {height:100%;}
body {text-align: center;
  background:#D2D2D2 url(../images/charte/bg-repeat.jpg) repeat-x left 0px;
  padding-top:10px;}
ul, li{
	list-style: none;
	list-style-position: outside;
	margin: 0;
	padding: 0;}
.clear{clear:left;}

 #wrap-container{
	min-height: 100%;
	height: auto !important;
	height: 100%;
  width: 100%;
  margin: 0 auto;
  background:url(../images/charte/bg-repeat1.jpg) repeat-y center top;
  }



#container{
	margin:0 auto;
	text-align: left;
  width: 996px;
  }
#content-text{padding-bottom:20px;}
#content-text1{float:left; width:704px; margin-left:19px; display: inline; padding-bottom:20px;}

.header-top {height: 24px; background-color:#000000}
.header-middle {background:url(../images/charte/bg-headermiddle.jpg) repeat-x left top; height:114px; position: relative;}
.header-middle .logo{float:left;}
.header-bottom{height:298px; position: relative;}
.bg-wrap{background:url(../images/charte/bg-wrap.gif) no-repeat left top; position:absolute; left:-29px; top:50px; width:29px; height:96px;}





.rechercher{position:absolute; right:0px; top:12px; height:25px;}
.rechercher form {height: 21px; float: left; width: 258px; line-height: 21px;}
.rechercher form input.case{font:11px Arial, Helvetica, sans-serif; color:#000000; padding:4px 10px; border: none; width:175px; background:#ffffff; float: left;}
.btn2{margin-top: -2px; width: 27px; height: 26px; float: left; margin-left: 3px;}

.voirpanier{
  width:79px;
  height:78px;
  float: right;
  font:normal 11px Arial,Geneva, Helvetica, sans-serif;
  color:#D2D2D2;
  text-align: center;
  margin-top:22px; margin-right:22px; display: inline;
  }

#btn-panier span{color:#ffffff;}
a#btn-panier:link,a#btn-panier:visited{
  width:79px; height:38px; display: block;
  background:url(../images/charte/btn-panier.jpg) no-repeat left top;
  color:#D2D2D2;
  padding-top:40px;}
a#btn-panier:active, a#btn-panier:hover{background: url(../images/charte/btn-panier-over.jpg) no-repeat left top;}

.account{width:286px; float:right; margin-right:40px; margin-top:20px; position: relative;}
.moncompte a:link, .moncompte a:visited{color:#333333; font-size:18px; font-family: Arial; font-weight:normal;}
.moncompte a:hover, .moncompte a:active{color:#E10306;}

.btn-logout{position: absolute; right:4px; top:4px}
.btn-logout a span{color:#666666; font-size:9px; font-family: Verdana;}
.btn-logout a:link, .btn-logout a:visited{color:#E21527; font:bold 11px Arial;}
.btn-logout a:hover, .btn-logout a:active{color:#333333;}


.account .inputForm, .account .inputFormOver{font-size:11px;}
#frmLogin{padding-top: 4px;}
.btn3{width: 76px; height: 23px; border:none; background: url(../images/charte/ok3.jpg) no-repeat left top; cursor: pointer; margin-top:3px; float:right}
.btn3Over{width: 76px; height: 23px; background: url(../images/charte/ok3-over.jpg) no-repeat left top; border:none; cursor: pointer; margin-top:3px; float:right}

.table-account {color:#0075E9}
.table-account td{font:normal 11px/12px Arial; text-align: left}
.table-account a:link, .table-account a:visited{font:normal 11px/14px Arial; color:#0075E9;}
.table-account a:active, .table-account a:hover{color:#666666;}

#titres{width: 996px; height: 46px; float:left; background: url(../images/charte/bg-breadcrumb.jpg) no-repeat left top;}
#titres h1{font:bold 11px Arial; color: #666666; text-align: right; padding-top:25px;}

/* Footer */
#footer, .push {}
#wrap-footer{
  background:#D2D2D2 url(../images/charte/bg-wrapfooter.jpg) repeat-x left bottom; padding-bottom:5px;

  }
.push	{clear: both;}


#footer{
	margin: 0 auto;
	padding: 0;
  color: #ffffff;
  font-family:Arial,Geneva, Helvetica, sans-serif;
	font-size:11px;
  font-weight: normal;
  line-height: 18px;
  }
.footer-inner{background:url(../images/charte/bg-repeat1.jpg) repeat-y left top; float:left; width:996px; margin-bottom:4px;}
.footer-inner1{background:url(../images/charte/bg-footer.jpg) no-repeat left bottom; float:left;  padding-bottom:18px;
  margin-left:22px; padding-right:0px;
  border-top:5px solid #AD000E; display:inline;

}


#menu2{padding-top:6px; float: left; display: inline; width:696px; margin-left:6px}
#menu2 ul.static{float:left;}
.submenus {float:left; width : 470px;}
.submenus li {width:150px; float:left; margin-right:5px}


#menu2 ul.static li{float:left; margin-right:28px; display: inline;}
#menu2 ul li a{display: block; text-align: left}
#menu2 a:link, #menu2 a:visited{
  color: #000000;
  text-decoration: none;
  font-family:Arial,Geneva, Helvetica, sans-serif;
	font-size:11px;
  font-weight: normal;
  background:url(../images/charte/icon-menu2.jpg) no-repeat left 7px;
  padding-left:10px;}
#menu2 a:hover, #menu2 a:active{color:#E21527; background:url(../images/charte/icon-menu2-over.jpg) no-repeat left 7px; text-decoration: underline;}
#menu2 .active{color:#E21527 !important; background:url(../images/charte/icon-menu2-over.jpg) no-repeat left 7px !important; text-decoration: underline !important;}
#footer .actif{color:#ffffff; cursor: default;}
.collisimo{float:left; display: inline; padding-top:6px;}

.ref{font-family: Arial,Geneva, Helvetica, sans-serif; width: 996px; margin: 3px auto 3px auto; clear: left; text-align:center; color: #424242; font-size:11px;}
.copyright{clear:both; text-align: right}

#left-column{float:left;}
#right-column{float:left;}

.separateur{height:32px; width:220px; float:left;}


#menu-left{
  width: 252px;
  float: left;
  background-image: url(../images/charte/menu.jpg);
  background-position: top left;
  background-repeat: repeat-y;}

.menu-inner{width:220px; float:right; padding-bottom:1px; display:inline; background: url(../images/charte/bg-admins.jpg) no-repeat left bottom;}
.menu-title{padding-top:13px; padding-left:11px;}

#menu-left ul li{width:252px; float:left;}

.admins, .conAdmins, .admins-sel, .conAdmins-sel{background:url(../images/charte/bg-admins.jpg) no-repeat left top;
  height:26px; padding-top:2px;}

.admins a, .conAdmins a{
  font-family:Arial;
  font-size: 12px;
  text-transform: uppercase;
  color: #0055AA;
  height: 25px;
  width: 210px;
  display: block;
  line-height:25px;
  padding-left:10px;
  }

.admins a:hover, .conAdmins a:hover{
  font-family:Arial;
  font-size: 12px;
  text-transform: uppercase;
  color: #FFFFFF;
  height: 25px;
  width: 210px;
  display: block;
  line-height:25px;
  padding-left:10px;
  background: url(../images/charte/menu-li.gif) no-repeat left top;
  }

.admins-sel a{
  font-family:Arial;
  font-size: 12px;
  text-transform: uppercase;
  color: #FFFFFF;
  height: 25px;
  width: 210px;
  display: block;
  line-height:25px;
  padding-left:10px;
  background: url(../images/charte/menu-li.gif) no-repeat left top;}
.admins-sel a:hover{color:#ffffff}

a#open {
  font-family:Arial;
  font-size: 12px;
  text-transform: uppercase;
  color: #FFFFFF;
  height: 25px;
  width: 210px;
  display: block;
  line-height:25px;
  padding-left:10px;
  background: url(../images/charte/menu-li.gif) no-repeat left top;}


a#open{color:#ffffff}




.conAdmins-sel a{
  font-family:Arial;
  font-size: 12px;
  text-transform: uppercase;
  color: #FFFFFF;
  height: 25px;
  width: 210px;
  display: block;
  line-height:25px;
  padding-left:10px;
  background: url(../images/charte/menu-li.gif) no-repeat left top;}
.conAdmins-sel a:hover{color: #FFFFFF;}





.non-admins a{
  font-family: Arial;
  font-size: 11px;
  color: #333333;
  width: 200px;
  display: block;
  margin-left: 0px;
  padding-bottom: 5px;
  text-indent: 25px;}

.non-admins a:hover{
  font-family: Arial;
  font-size: 11px;
  color: #DE0307;
  width: 200px;
  display: block;
  margin-left: 0px;
  padding-bottom: 5px;
  text-indent: 25px;}

.actif a{
font-family: Arial;
  font-size: 11px;
  color: #DE0307;
  width: 200px;
  display: block;
  margin-left: 0px;
  padding-bottom: 5px;
  text-indent: 25px;
  }

  .actif a:hover{
 font-family: Arial;
  font-size: 11px;
  color: #DE0307;
  width: 200px;
  display: block;
  margin-left: 0px;
  padding-bottom: 5px;
  text-indent: 25px;
  }



#sitemap{margin-top: 50px;}
.sitemap-left{ float:left; width:220px; margin-left:80px; display: inline; border-right:1px solid #E3E3E3; margin-right:110px;}

#sitemap li{padding-top:5px;}
#sitemap .sousmenu li{padding: 0}


#sitemap a.sitemain:link, #sitemap a.sitemain:visited{font:bold 12px Arial; text-decoration: none; text-transform: uppercase;}
#sitemap a.sitemain:hover, #sitemap a.sitemain:active{font:bold 12px Arial; text-decoration: none; text-transform: uppercase;}
#sitemap a.sitemain span{font-family:Verdana; font-size:11px; padding-right:6px;}

.sousmenu{padding-left:10px;}


#sitemap .sousmenu a:link, #sitemap .sousmenu a:visited{font-size:11px; color:#333333; text-decoration: none;}
#sitemap .sousmenu a:hover, #sitemap .sousmenu a:active {font-size:11px; color:#E20306; text-decoration: none;}


#mdm{
  background-image: url(../images/charte/actualites.jpg);
  background-repeat: no-repeat;
  background-position: 33px top;
  width: 252px;
  float: left;
  height: 136px;
  position: relative;}


.mdm-in{
  font-size: 11px;
  font-family:Arial;
  color: #666666;
  float: left;
  width: 190px;
  padding: 27px 10px 0px 43px;
  text-align: justify;
  line-height: 13px;}
.mdm-title{color:#333333; padding-bottom:5px; text-align: left}
.thumb-mdm{
  padding: 1px;
  border: 1px solid #CFCFCF;
  background-color:#ffffff;
  float: right;
  margin: 0px 0px 0px 8px;}
#mdm a.liens2{position:absolute; left:43px; bottom:28px;}

#content .acceder{color: #E21527; font-weight: bold;}

   #content .acceder:hover{
   color: #000000;
   font-weight: bold;
 }

   #content .neacceder{
   color: #E2BCF7;
   font-weight: bold;
 }

   #content .neacceder:hover{
   color: #ffffff;
   font-weight: bold;
   }



  #content .nexacceder{
   color: #333333;
   font-weight: bold;
   text-decoration: none;
   margin-right:3px
 }

   #content .nexacceder:hover{
   color: #FFFFFF;
   font-weight: bold;
   text-decoration: none;
 }

   #content .acceder2{
   color: #333333;
   font-weight: bold;
   text-decoration: none;
 }

   #content .acceder2:hover{
   color: red;
   font-weight: bold;
    text-decoration: none;
 }

 #content .acceder3{
   color: #391F46;
   font-weight: bold;
    text-decoration: none;
 }

   #content .acceder3:hover{
   color: #8C47BE;
   font-weight: bold;
    text-decoration: none;
 }

.acceders{
   font-weight: bold;
   font-size: 11px;
 }

   .acceders:hover{
   color: #178E8E;
   font-weight: bold;
   font-size: 11px;
 }


.menu-bottom{
	float: right;
  font-weight: bold;
	padding: 20px 15px 0 0;
	width: 250px;
  color: #CFA0E9;
  border: 1px solid red;
	text-align: right;}

.newsletter{
  background-image: url(../images/charte/newsletter.jpg);
  background-repeat: no-repeat;
  background-position: 33px top;
  width: 252px;
  height: 70px;
  float: left;}
.newsletter .inner{
  width:220px;
  padding-top:30px;

  float:right;}
.newsletter .inputForm{float:left; color:#666666; font-size:11px}


.btnOk{
  border:0;
  width: 29px; height:22px;
  background: url(../images/charte/ok.jpg) no-repeat left top;
  float:left;
  cursor:pointer;
  margin-left:1px;
  }
.btnOkOver{
  border:0;
  width: 29px; height:22px;
  background: url(../images/charte/ok-over.jpg) no-repeat left top;
  float:left;
  cursor:pointer; margin-left:1px;}

/*	--- Important! -----------------------------------
	If you want space between paragraphs or headers,
	use padding instead of margin.
	-------------------------------------------------*/

/* ===| III. CONTENT ELEMENTS |===============================================*/

img {border: 0;}

/*	--- Important! ----------------------------------
	Use class "left" or "right" on the html elements
	you want to float (on the thumbs, for example)
*/
.left{float: left;	margin-right:5px;}
.right{float: right;}

.thumb{
	display: block;
 }
/* ===| IV. NAVIGATION |===============================================*/
#menu2 ul.static li{display: inline;
}
#partenaires
{
  background: url(../images/charte/img-partenaires.jpg) no-repeat 30px 0px;
  width:220px;
  height:70px;

}
#partenaires-inner
{
   padding:25px 10px 0px 32px;
}


.link, a:visited.link {color:#000000; text-decoration:none; font-family: Arial; font-size: 11px; line-height: 17px;}
a:hover.link, a:active.link {color:#E21527; text-decoration:none;  font-family: Arial; font-size: 11px; line-height: 17px; }


/* ---| THE END |------------------------- */