/**
 * CSS lié aux menus
 * 2 menus : top-menu et right-menu  
 */

/* top-menu = main-menu + sub-menu */
.top-menu {
  width: 760px;
}

/* main-menu = menu-1(-active) + menu-2(-active) + menu-3(-active) */
.main-menu {
  height: 50px;
}
.menu-1-active {
  background: url("../img/menu-1-active.png") no-repeat;
  width: 250px;
  height: 50px;
  float: left;
}
.menu-1 {
  background: url("../img/menu-1.png") no-repeat;
  width: 250px;
  height: 50px;
  float: left;
}
.menu-2-active {
  background: url("../img/menu-2-active.png") no-repeat;
  width: 250px;
  height: 50px;
  float: left;
}
.menu-2 {
  background: url("../img/menu-2.png") no-repeat;
  width: 250px;
  height: 50px;
  float: left;
}
.menu-3-active {
  background: url("../img/menu-3-active.png") no-repeat;
  width: 250px;
  height: 50px;
  float: left;
}
.menu-3 {
  background: url("../img/menu-3.png") no-repeat;
  width: 250px;
  height: 50px;
  float: left;
}

/* sub-menu = sub-menu-1 OU sub-menu-2 OU sub-menu-3 */
.sub-menu {
  color: #b1b1b1;
  color: #453C48;
}
.sub-menu-0 {
  /*background: url("../img/sub-menu-0.png") no-repeat;*/
  width: 760px;
  height: 25px;
  padding-top: 4px;
  padding-left: 20px;
  word-spacing: 10px;
  letter-spacing: 1px;
}
.sub-menu-1 {
  background: url("../img/sub-menu-1.png") no-repeat;
  width: 760px;
  height: 25px;
  padding-top: 4px;
  padding-left: 20px;
  word-spacing: 10px;
  letter-spacing: 1px;
}
.sub-menu-1 a, .sub-menu-2 a, .sub-menu-3 a {
  color: #787878;
  color: #453C48;
  font-size: 120%;
}
.sub-menu-1 a.active, .sub-menu-1 a:hover {
  color: #009ee0;
  color: #0672DC;
  font-size: 120%;
}

.sub-menu-2 {
  background: url("../img/sub-menu-2.png") no-repeat;
  width: 760px;
  height: 25px;
  padding-top: 4px;
  padding-left: 20px;
  word-spacing: 10px;
  letter-spacing: 1px;  
}
.sub-menu-2 a.active, .sub-menu-2 a:hover {
  color: #e2007a;
  color: #DE006E;
  font-size: 120%;
}
.sub-menu-3 {
  background: url("../img/sub-menu-3.png") no-repeat;
  width: 760px;
  height: 25px;
  padding-top: 4px;
  padding-left: 20px;
  word-spacing: 10px;
  letter-spacing: 1px;
}
.sub-menu-3 a.active, .sub-menu-3 a:hover {
  color: #96bf0d;
  color: #8DB700;
  font-size: 120%;
}


/**
 * right-menu = right-menu-0 + ... + right-menu-3
 * right-menu-NUMBER = t-COLOR + m + b
 * t-COLOR = title (pour l'instant, on ajoutera pê une icone 
 */ 
.right-menu {
  float: left;
  width: 220px; 
  margin-top: -100px;
}
.right-menu .text, .float-menu .text {
  padding: 5px 0px 5px 0px;
}
.right-menu .t-fuschia {
  background: url("../img/right-menu-top-fuschia.png") no-repeat;
  width: 220px;
  height: 24px;
}
.right-menu .t-orange {
  background: url("../img/right-menu-top-orange.png") no-repeat;
  width: 220px;
  height: 24px;
}
.right-menu .t-bleu {
  background: url("../img/right-menu-top-bleu.png") no-repeat;
  width: 220px;
  height: 24px;
}
.right-menu .t-vert {
  background: url("../img/right-menu-top-vert.png") no-repeat;
  width: 220px;
  height: 24px;
}
.right-menu .t-rouge {
  background: url("../img/right-menu-top-rouge.png") no-repeat;
  width: 220px;
  height: 24px;
}
.right-menu .title, .float-menu .title {
  padding-top: 4px;
  font-size: 120%;  
  color: #ffffff;
  padding-left: 20px; 
}
.right-menu .title a {
  color: #ffffff;
  text-decoration: none;
}
.right-menu .title a:hover {
  color: #ffffff;
  text-decoration: none;
}
.right-menu .m {
  background: url("../img/right-menu-mid.png") repeat-y;
  padding-left: 10px;
  padding-right: 10px;    
  width: 220px;
}
.right-menu .xxx {
  float: right;
  padding: 2px 6px 0px 0px;  
}
.right-menu .m li {
  padding-top: 3px;
  padding-bottom: 3px;
}
.right-menu .b {
  background: url("../img/right-menu-bot.png") no-repeat;
  width: 220px;
  height: 4px;
  padding-bottom: 15px;
}
.float-menu {
  margin-right: 10px;
  float: left;
}
.float-menu .t-rouge {
  background: url("../img/float-menu-top-rouge.png") no-repeat;
  width: 300px;
  height: 24px;
}
.float-menu .m {
  background: url("../img/float-menu-mid.png") repeat-y;
  padding-left: 10px;
  padding-right: 10px;    
  width: 300px;
}
.float-menu .b {
  background: url("../img/float-menu-bot.png") no-repeat;
  width: 300px;
  height: 4px;
  padding-bottom: 15px;
}
.float-menu .img {
  width: 50px;
  border: 1px solid #B7B7B7;
  padding: 3px;
  margin-right: 5px;
  margin-bottom: 0px;
  background: #fff;
  float: left;
}


.button {
  margin: 0px 5px 0px 5px;
}
.button .l-grisclair {
  background: url("../img/button-l-grisclair.png") no-repeat;
  width: 6px;
  height: 21px;
  float: left;
}
.button .m-grisclair {
  background: url("../img/button-m-grisclair.png");
  padding-top: 2px;
  height: 21px;
  float: left;
}
.button .r-grisclair {
  background: url("../img/button-r-grisclair.png") no-repeat;
  width: 11px;
  height: 21px;
  float: left;
  padding: 5px;
}

.button .l-bleu {
  background: url("../img/button-l-bleu.png") no-repeat;
  width: 6px;
  height: 21px;
  float: left;
}
.button .m-bleu {
  background: url("../img/button-m-bleu.png");
  padding-top: 2px;
  height: 21px;
  float: left;
}
.button .r-bleu {
  background: url("../img/button-r-bleu.png") no-repeat;
  width: 11px;
  height: 21px;
  float: left;
  padding: 5px;
}

.button .l-vert {
  background: url("../img/btn/vert-left.gif") no-repeat;
  width: 10px;
  height: 21px;
  float: left;
}
.button .m-vert {
  background: url("../img/btn/vert-middle.gif") repeat-x;
  padding-top: 4px;
  height: 21px;
  color: #ffffff;
  float: left;
  font-weight: bold;
}
.button .m-vert a {
  color: #ffffff;
}
.button .r-vert {
  background: url("../img/btn/vert-right.gif") no-repeat;
  width: 15px;
  height: 21px;
  float: left;
  padding: 5px;
}