.info-panel.light
{
    font-family: Avenir;
    position: relative;
    background: #ECECEC;
    box-shadow: inset 0px 0px 2px #555;
}

.info-panel .header
{
    font-weight: bold;
    position: absolute;
    left: 10px;
    bottom: 2px;
    font-size: 1em;
}

.info-panel>ul
{
    position: absolute;
    left: 40%;
    padding: 0;
    list-style-type: none;
}

.info-panel .users
{
    position: absolute;
    right: 10px;
    bottom: 2px;
    font-size: 0.7em;
}

.info-panel .user-icon
{
    float: left;
}

.info-panel .user-online {
  float: right;
  height: 1.4vh;
  width: 1.4vh;
  border-radius: 0.7vh;
  margin-top: 0.5vh;
  margin-left: 0.4vw;
}

.user-comment 
{ 
  display: none; 
  bottom: 130%;
  background-color: #CCC;
  padding: 5px 10px;
  border-radius: 5px;
  position: absolute;
}

.user-comment:after { 
  border-top: 5px solid #CCC;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  bottom: -4px;
  left: 5px;
  content: " ";
  position: absolute;
}

.user-comment.visible { display: block; z-index: 30; }

.info-panel .buttons>li {
    padding: 0 0.7em;
    float: left;
    cursor: pointer;
    margin-left: 2px;
    position: relative;
}

.info-panel.light .buttons>li {
    border-radius: 2px;
    text-shadow: 1px 1px 0 rgba(255,255,255,0.2);
    color: #222;
    font-weight:normal;
    border-top: 1px solid transparent;
    transition: 0.25s all ease;
}

.info-panel.light .buttons>li:hover {
    border-top: 1px solid #666;
    border-bottom: 1px solid #666;
    background-color: #fff;
}

.info-panel.light .buttons>li:active {
    border-top: 1px solid black;
    box-shadow: none;
    border-bottom: 1px solid #777;
}

.info-panel.dark
{
    font-family: Avenir;
    position: relative;

    background: #222;
    box-shadow: 0 5px 8px -5px #111;
    border-top: 1px solid #444;
    border-bottom: 1px solid black;
}

.info-panel.dark li {
    border-top: 1px solid #222;
    border-bottom: 1px solid #222;
    background: #222;
    color: #777;
    box-shadow: 0 0 0 1px #222;
}
.info-panel.dark li:hover {
    border-top: 1px solid #222;
    border-bottom: 1px solid #222;
    box-shadow: 0 0 0 1px black, inset 0 0 20px 0 #555;
}

.user-panel .item.zindex15 { z-index: 25; }

nav.light {
  background: #DDD;
  box-shadow: 0 0 10px 0 #DDD;
  border-top: 1px solid white;
  border-bottom: 1px solid #BBB;
}
nav.dark {
  background: #222;
  box-shadow: 0 5px 8px -5px #111;
  border-top: 1px solid #444;
  border-bottom: 1px solid black;
}
nav.petite {
  height: 38px;
  padding: 4px
}
.petite ul {
  height: 38px;
  margin: 0 auto;
  padding: 0;
  list-style-type: none;
}
.light ul {
  /*width: 500px;*/
}
.dark ul {
  /*width: 400px;*/
}
.petite li {
  width: 98px;
  padding: 0 1px;
  float: left;
}
.petite a {
  border-radius: 2px;
  text-shadow: 1px 2px 0 rgba(255,255,255,0.2);
  transition: 0.25s all ease;
}
.light a {
  border-top: 1px solid #DDD;
  border-bottom: 1px solid #DDD;
  background: #DDD;
  box-shadow: 0 0 0 1px #DDD;
}
.light a:hover {
  border-top: 1px solid #DDD;
  border-bottom: 1px solid #DDD;
  box-shadow: 0 0 0 1px #999, inset 0 0 20px 0 #EEE;
}
.light a:active {
  border-top: 1px solid #AAA;
  border-bottom: 1px solid white;
  box-shadow: none;
}
nav.dark li a {
  border-top: 1px solid #222;
  border-bottom: 1px solid #222;
  background: #222;
  color: #777;
  box-shadow: 0 0 0 1px #222;
}
.dark a:hover {
  border-top: 1px solid #222;
  border-bottom: 1px solid #222;
  box-shadow: 0 0 0 1px black, inset 0 0 20px 0 #555;
}
.dark a:active {
  
}
nav.petite a {
  display: block;
  color: #334;
  text-decoration: none;
  font-weight: normal;
  font-size: 26px;
  text-align: center;
    }