@-ms-viewport { width: device-width; }

@-o-viewport { width: device-width; }

@viewport { width: device-width; }



#nav,

#nav * {

  -moz-box-sizing: border-box;

  -webkit-box-sizing: border-box;

  box-sizing: border-box;

}



#nav,

#nav ul {

  list-style: none;

  width: 100%;

  float: left;

}



#nav li {

  float: left;

  width: 100%;

}



#nav a {

  color: #444444;

  text-decoration: none;

  text-transform: uppercase;

  width: 100%;

  background: #eeeeee;

  padding: 0.7em 1em;

  float: left;

  font-weight: bold;

  background-image: url("../images/overlay-light.png"); background-repeat: repeat-x;

  background-position: bottom left;

  border-bottom: 1px solid #ffffff

}

#nav ul ul a {

  background: #f8f8f8;

  padding-left: 2em;

  font-weight: normal;

  text-transform: none;

}

#nav-toggle {

  -webkit-touch-callout: none;

  -webkit-user-select: none;

  -moz-user-select: none;

  -ms-user-select: none;

  user-select: none;

  width: 50px;

  height: 50px;

  float: right;

  text-indent: -9999px;

  overflow: hidden;

  background: url("../images/responsive-menu.png") no-repeat 50% 50%;

}



@media screen and (-webkit-min-device-pixel-ratio: 1.3), screen and (min--moz-device-pixel-ratio: 1.3), screen and (-o-min-device-pixel-ratio: 2 / 1), screen and (min-device-pixel-ratio: 1.3), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx) {

  #nav-toggle {

    background-image: url(../images/responsive-menu-retina.png);

    -webkit-background-size: 100px 100px;

    -moz-background-size: 100px 100px;

    -o-background-size: 100px 100px;

    background-size: 100px 100px;

  }

}