div#header div.right ul#nav {
      clear: both;
      width: 100%;
      margin: 0;
      padding: 0; }
      div#header div.right ul#nav li {
        float: left;
        margin: 0;
        display: block;
        padding: 0 21px; }
        div#header div.right ul#nav li a {
          color: #fff;
          font-weight: 400;
          font-size: 1.2em; }
          
a.open {
            display: none;
            width: 100%;
            text-indent: -999999px;
            border: 0;
            color: #fff;
        }
#pageslide {
    /* These styles MUST be included. Do not change. */
    display: none;
    position: absolute;
    position: fixed;
    top: 0;
    height: 100%;
    z-index: 999999;
    /* Specify the width of your pageslide here */
    width: 100%;
    padding: 0;
    /* These styles are optional, and describe how the pageslide will look */
    background-color: #f3f1ed;
    color: #FFF;
    -webkit-box-shadow: inset 0 0 3px 3px #ccc;
    -moz-box-shadow: inset 0 0 3px 3px #ccc;
    box-shadow: inset 0 0 3px 3px #ccc;
}

@media only screen and (max-width: 480px) {
a.open { 
display: block;
text-indent: -9999px;
padding: 0;
position: absolute;
top: 10px;
right: 10px;
width: 46px;
height: 46px;
float: right;
background: url(../img/common/icon/nav_icon.jpg) no-repeat;
text-align: left; }

#pageslide { 
width: 80%;
padding: 0;
margin: 0; }
ul#nav { 
display: none;
padding: 0;
margin: 0 auto;
width: 90%;
}
ul#nav li {
        float: none;
        margin: 0;
        width: 100%;
        border-bottom: #ccc 1px solid;
        display: block;
        text-align: left;
        padding: 0; }
        ul#nav li a {
          color: #000;
          padding: 20px 0;
          display: block;
          font-weight: 100;
          font-size: 1em;
          background:url(../img/common/icon/nav_icon2.jpg) no-repeat 95% 50%;  }

}