#sommaire
{
     height: 40px; 
     width: auto;
    text-align: center;
}
@media only screen and (min-width: 768px) {
  #sommaire {
    padding-left: 290px;
  }

}
.sommaire_blien
{
   display: inline-block;
   width: 33%;
   text-align: left;
   color: #121311;
   font-size: 0.8em;
   font-weight: bold;
   font-family:  monospace, serif;
   text-shadow: 0 1px 0 #DDD;
    color: #888888;
}
.sommaire_blien:before {
  content: "/";
}
.sommaire_blien a
{
    color: #888888;
    outline: none;
    text-decoration: none;
}
.sommaire_blien a:hover
{
    color: #BBAABB;
}

  #side-bar{
    text-align:center;
    display: block;
    /*background: none repeat scroll 0% 0% #F5F6F5;*/
    width:100%;
    height:auto;
    text-rendering: optimizelegibility;
    box-sizing: border-box;
    background:#F5F6F5;
    padding-top: 10px;
  }

@media screen and (min-width: 768px) {
  #side-bar {
    position: fixed;
    top: 0px;
    bottom: 0px;
    left: 0px;
    height: 100%;
    width: 290px;
    transition: left 0.5s ease-in 0.25s;
    text-align: center;
    /*background: none repeat scroll 0% 0% #F5F6F5;*/
    background:#FFF;
    border-right: 3px solid rgba(51, 51, 51, 0.1);
  }
  #side-bar.hidden {
    left: -290px;
    transition: left 0.5s ease-out 0.15s;
  }
}
#side-bar h1 {
   font-family:  monospace, "Helvetica Neue", Arial, sans-serif;
  /*font-family: "PT Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
*/
}
#desc {
  font-size: 90%;
  margin-top: 15px;
}
#about {
   font-size: 0.8em;
   color: #666;
  
}
.about_bar {
   display: inline-block;
   width: 20%;
   text-align: left;
   color: #121311;
   font-size: 0.8em;
   font-weight: bold;
   font-family:  monospace, serif;
   text-shadow: 0 1px 0 #DDD;
   margin:auto;
}
.side-bar svg {  margin: 0 auto;
  display:block;
}

/*
  <div id="sommaire">
     <div id="sommaire_blien">Accueil</div>
     <div id="sommaire_blien">Blog</div>
     <div id="sommaire_blien">Liens</div>
  </div>
*/