div, section#grille, article.jour {
    padding: 0;
    margin: 0;
    outline: none;
    list-style: none; 
}

footer {
  clear: both;
}

#grille {
  width: 784px;
  display: block;
  font-family: Verdana, "Lucida Grande", Lucida, Tahoma, "Trebuchet MS", Arial, Geneva, Helvetica, sans-serif;
}

article.jour {
  width: 108px;
  float: left;
  display: block;
  margin: 1px;
  border: 1px solid #00377A;
  border-bottom: 5px solid #00377A;
  border-top: 0;
  border-radius: 5px;
}

.jour h3 {
    display: block;
    background: #00377A;
    color: #fff;
    font-variant: small-caps;
    margin: 0;
    text-align: center;
    border-radius: 5px 5px 0 0;
}

.jour>div {
    border-bottom: 1px solid #00377A;
    margin: 0; padding: 0;
    clear: left;
    text-align: center;
    float: left;
    width: 108px;
}

.jour>div>div,
.jour>div.multi>div.titre {
    overflow: hidden;
    z-index: 4;
    position:relative;
    display: block;
}

.jour>div>div>div,
.jour>div.multi>div>div,
.jour>div.multi>div.titre>div {
    display: inline-block;
    vertical-align: middle;
    line-height: 1.1;
    z-index: 5;
    position:relative;
}

.jour>div>div:hover,
.jour>div.multi:hover {
  overflow: visible;
  border: 1px solid #00377A;
  margin: -5px -15px;
  width: 138px;
  z-index: 10;
  position: relative;
}

.jour>div.d05>div:hover {
  margin: -13px -15px -12px -15px;
}

.jour h4, .jour>div>div:hover h4  {
    text-transform: uppercase;
    font-size: 10px;
    margin: 0;
    padding: 0;
    z-index: 6;
}
.jour p, .jour>div>div:hover p {
    text-transform: lowercase;
    font-size: 9px;
    margin: 0;
    padding: 0;
    z-index: 6;
}

.jour div.prog_musique, .jour div.prog_musique div { background: #fff; }
.jour div.culture_societe, .jour div.culture_societe div { background: #EE8333; }
.jour div.musicale, .jour div.musicale div { background: #FACC31; }
.jour div.inclassable, .jour div.inclassable div { background: #9FB9DC; }

.jour div.d05>div { height: 14px;   line-height:14px;} .jour>div.d05>div:hover { height: 37px; line-height: 37px;}
 .jour div.d1>div { height: 29px;  line-height:29px;} .jour>div.d1>div:hover { height: 37px; line-height: 37px;} 
.jour div.d2>div { height: 59px;   line-height:59px;} .jour>div.d2>div:hover { height: 67px; line-height: 67px;}
.jour div.d3>div { height: 89px;   line-height:89px;} .jour>div.d3>div:hover { height: 97px; line-height: 97px;}
.jour div.d4>div { height: 119px;   line-height:119px;} .jour>div.d4>div:hover { height: 127px; line-height: 127px;}
.jour div.d5>div { height: 149px;  line-height:149px;} .jour>div.d5>div:hover { height: 157px; line-height: 157px; }
.jour div.d55>div { height: 164px; line-height:164px;} .jour>div.d55>div:hover { height: 172px; line-height: 172px;}
.jour div.d6>div { height: 179px;   line-height:179px;} .jour>div.d6>div:hover { height: 187px; line-height: 187px;}
.jour div.d7>div { height: 209px;   line-height:209px;} .jour>div.d7>div:hover { height: 217px; line-height: 217px;}
.jour div.bimensuelle { width: 50%; }
.jour div.mensuelle { width: 25%;}
.jour div.bimensuelle h4 { font-size: 8px;}
.jour div.bimensuelle p { font-size: 7px;}
.jour div.mensuelle h4 { font-size: 7px;}
.jour div.mensuelle p { font-size: 6px;}
.jour div.bi_2, .jour div.m_2, .jour div.m_3, .jour div.m_4 { clear: none;}
.jour div.bimensuelle>div, .jour div.mensuelle>div  { border-right: 1px solid #00377A; }
.jour div.bi_2 div, .jour div.m_4 div { border: 0;}
.jour div.bi_2>div:hover, .jour div.m_4>div:hover { border: 1px solid #00377A;}

.jour>div.multi>div {
    border: 0;
}
.jour>div.multi>div {
  display: none;
}

.jour>div.multi:hover>div {
  display: block;
}
.jour>div.multi.mensuelle.d1:hover>div.titre,
.jour>div.multi.bimensuelle.d1:hover>div.titre {
  display: none; 
}

.jour div.multi.bimensuelle { width: 100%; }
.jour div.multi.mensuelle { width: 100%;}
.jour div.multi.bimensuelle h4 { font-size: 10px;}
.jour div.multi.bimensuelle p { font-size: 9px;}
.jour div.multi.mensuelle h4 { font-size: 10px;}
.jour div.multi.mensuelle p { font-size: 9px;}


.jour>div.multi.bimensuelle.d1:hover {
  height: 50px;
  margin-top: -11px;
  margin-bottom: -11px;
  width: 220px;
}
.jour>div.multi.mensuelle.d1:hover {
  height: 100px;
  margin-top: -36px;
  margin-bottom: -36px;
  width: 220px;
}
.jour>div.multi.mensuelle.d1:hover>div,
.jour>div.multi.bimensuelle.d1:hover>div {
  width: 110px;
  height: 50px;
  line-height: 50px;
  display: block;
  float: left;
  margin: 0;
  padding: 0;
  border: 0;
  z-index: 5;
}

.jour>div.multi.mensuelle.d1:hover>div>div,
.jour>div.multi.bimensuelle.d1:hover>div>div {
  display: inline-block;
  vertical-align: middle;
    line-height: 1.1;
    position: relative;
    border: 0;
    margin: 0;
    padding: 0;
}