body { 
	background: #f4f4f4;
	font: 14px/18px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
	color: #666; 
	-webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
	-webkit-text-size-adjust: none;
}

a, a:visited {text-decoration: none;}
a:hover {}

p { margin-bottom: 20px; }

#contents {
    width: 940px;
    margin: 0 auto;
}
    #contents h1 { color: #333; line-height: 1em; }
    
    ul#nav { list-style: none; width: 100%;}
    ul#nav:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }
    
        #contents ul#nav li { float: left; width: 20%; text-align: center; }
        #contents ul#nav a { 
                display: block; 
                background: #000;
                color: #FFF; 
                font-weight: bold; 
                padding: 10px; 
                border-right: 1px solid #FFF;
        }
        #contents ul#nav a:hover { background: #333; }


.open {
      display: none;
      float: left;
      height: 30px;
      margin-right: 10px;
      -moz-border-radius: 3px;
      -webkit-border-radius: 3px;
      -border-radius: 3px;
      box-shadow: inset 0 0 3px #000;
      background:-moz-linear-gradient(top,#2b2b2b,
        #2b2b2b 50%,
        #191919 60%,
        #191919);
      background:-webkit-gradient(linear,left top,left bottom,
        color-stop(0,#2b2b2b),
        color-stop(0.5,#2b2b2b),
        color-stop(0.6,#191919),
        to(#191919));
      border: 0;
      margin-top:7px;
      font-size:12px;
      padding:0px 8px;
      color:#FFF;
      box-shadow:#44464a 0px -1px 1px 0px inset;
      -moz-box-shadow:#44464a 0px -1px 1px 0px inset;
      -webkit-box-shadow:#44464a 0px -1px 1px 0px inset;
      text-shadow:#5f7185 0px 1px 1px;
      -webkit-text-shadow:#5f7185 0px 1px 1px;
      -moz-text-shadow:#5f7185 0px 1px 1px;
      line-height:2.5em;
}

.prev_page {
      display: none;
      float: left;
      height: 30px;
      margin-right: 10px;
      -moz-border-radius: 3px;
      -webkit-border-radius: 3px;
      -border-radius: 3px;
      box-shadow: inset 0 0 3px #000;
      background:-moz-linear-gradient(top,#2b2b2b,
        #2b2b2b 50%,
        #191919 60%,
        #191919);
      background:-webkit-gradient(linear,left top,left bottom,
        color-stop(0,#2b2b2b),
        color-stop(0.5,#2b2b2b),
        color-stop(0.6,#191919),
        to(#191919));
      border: 0;
      margin-top:7px;
      font-size:12px;
      padding:0px 8px;
      color:#FFF;
      box-shadow:#44464a 0px -1px 1px 0px inset;
      -moz-box-shadow:#44464a 0px -1px 1px 0px inset;
      -webkit-box-shadow:#44464a 0px -1px 1px 0px inset;
      text-shadow:#5f7185 0px 1px 1px;
      -webkit-text-shadow:#5f7185 0px 1px 1px;
      -moz-text-shadow:#5f7185 0px 1px 1px;
      line-height:3.5em;
}

/* Media Queries
* 
* Note: Please don't base your responsive design off of this code. It is just here for demo purposes.
* Rather, grab yourself a copy of Ethan's book: http://www.abookapart.com/products/responsive-web-design
================================================== */


  #contents { width: 400px; }
  #contents h1 { font-size: 22px; line-height: 30px; color: #FFF;}
  #contents ul#nav { display: none; }
  .open , .prev_page { display: block; }
  #pageslide { width: 250px;   padding-bottom: 50px;}
  #pageslide #nav li {
      border-bottom:1px solid #28292b;-webkit-box-shadow:inset 0 1px 0 rgba(255, 255, 255, .08)
}
  #pageslide #nav li a { padding:15px 15px 15px 0px; color: #FFF; border: none; display:block; }
  #pageslide #nav li a:hover { text-decoration: underline; }
  #contents { width: 280px; }
  #contents h1 { font-size: 14px; }