<head>
<style>
@font-face {
  font-family: "Agency";
  src: url(font/AGENCYR.ttf) format("truetype");
}
@font-face {
  font-family: "AgencyB";
  src: url(font/AGENCYB.ttf) format("truetype");
}
@font-face {
  font-family: "ZinHenaBokuryu";
  src: url(font/ZinHenaBokuryu.otf) format("truetype");
}

b {
    color: #a6a6a6;

    font-family: "AgencyB", sans-serif; 
    font-size: 16
}

tit {
    color: #a6a6a6;

    font-family: "AgencyB", sans-serif; 
    font-size: 18
}
toggle {
    color: #a6a6a6;

    font-family: "Agency", sans-serif; 
    font-size: 20 
}
a:link {color: #a6a6a6;}
a:visited {color: #a6a6a6;}
a:hover {color: #a6a6a6;}
a:active {color: #a6a6a6;}

.navigation {
  /* critical sizing and position styles */
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  
  /* non-critical appearance styles */
  list-style: none;
  background: #000;
}

/* Navigation Menu - List items */
.nav-item {
  /* non-critical appearance styles */
  width: 150px;
  border-top: 1px solid #111;
  border-bottom: 1px solid #000;
}

.nav-item a {
  /* non-critical appearance styles */
  display: block;
  padding: 10px;
  color: a6a6a6;
  font-size: 16;
  font-family: "Agency";
  text-decoration: none;
}

.nav-item a:hover {
  color: #c74438;
}

/* Site Wrapper - Everything that isn't navigation */
.body {
  /* Critical position and size styles */
  min-height: 100%;
  min-width: 100%;
  background-color: white; /* Needs a background or else the nav will show through */
  position: relative;
  top: 0;
  bottom: 100%;
  left: 0;
  z-index: 1;
    color: #a6a6a6;
    font-family: "Agency", sans-serif; 
    font-size: 16;
    line-height: 1.5;  

  /* non-critical apperance styles */
  padding: 4em;
  background-color:#000;
}

/* Nav Trigger */
.nav-trigger {
  /* critical styles - hide the checkbox input */
  position: fixed;
  clip: rect(0, 0, 0, 0);
}

label[for="nav-trigger"] {
  /* critical positioning styles */
  position: fixed;
  left: 10px; top: 10px;
  z-index: 2;
  
  /* non-critical apperance styles */
  height: 30px;
  width: 30px;
  cursor: pointer;
  background-image: url("img/toggle.png");
  background-size: contain;
}

/* Make the Magic Happen */
.nav-trigger + label, .body {
  transition: left 0.1s;
}

.nav-trigger:checked + label {
  left: 155px;
}

.nav-trigger:checked ~ .body {
  left: 150px;
  box-shadow: 0 0 5px 5px rgba(0,0,0,0.5);
}

body {
    /* Without this, the body has excess horizontal scroll when the menu is open */
  overflow-x: hidden;
}


/* Micro reset */
*,*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;}
html, body { height: 100%; width: 100%; font-family: Helvetica, Arial, sans-serif; }

</style>
</head>


<ul class="navigation">
    <li class="nav-item"><a href="C.html">Cover</a></li>
    <li class="nav-item"><a href="ii.html">Artist Statement</a></li>
    <li class="nav-item"><a href="iv.html">Table of Content</a></li>
    <li class="nav-item"><a href="iv.html#I">I. Childhood in Tennessee</a></li>
    <li class="nav-item"><a href="iv.html#II">II. Across the Prairie</a></li>
    <li class="nav-item"><a href="iv.html#III">III-IV. Captain White</a></li>
    <li class="nav-item"><a href="iv.html#V">V. Bolson de Mapimi</a></li>
    <li class="nav-item"><a href="iv.html#VI">VI. In the streets</a></li>
    <li class="nav-item"><a href="iv.html#VII">VII-IX. The Glanton Gang</a></li>
    <li class="nav-item"><a href="iv.html#X">X-XII. Tobin on the Judge</a></li>
    <li class="nav-item"><a href="iv.html#XIII">XIII-XIV. Trophies of war</a></li>
    <li class="nav-item"><a href="iv.html#XV">XV-XVII. The Burning Tree</a></li>
    <li class="nav-item"><a href="iv.html#XVIII">XVIII-XX. Yumas</a></li>
    <li class="nav-item"><a href="iv.html#XXI">XXI-XXII. Castaways</a></li>
    <li class="nav-item"><a href="iv.html#XXIII">XXIII. Epilogue</a></li>
    <li class="nav-item"><a href="iv.html#MISC">Misc.</a></li>
</ul>

<input type="checkbox" id="nav-trigger" class="nav-trigger" />
<label for="nav-trigger"></label>



<div class="body">

<tit>base chapter name</tit><BR><BR>

sd sd fsdfsdf s   sd sd fsdfsdf s   sd sd fsdfsdf s   sd sd fsdfsdf s   sd sd fsdfsdf s   sd sd fsdfsdf s   sd sd fsdfsdf s   sd sd fsdfsdf s   sd sd fsdfsdf s   sd sd fsdfsdf s   sd sd fsdfsdf s   sd sd fsdfsdf s   sd sd fsdfsdf s   sd sd fsdfsdf s   sd sd fsdfsdf s   sd sd fsdfsdf s   sd sd fsdfsdf s   sd sd fsdfsdf s   sd sd fsdfsdf s   sd sd fsdfsdf s   sd sd fsdfsdf s   sd sd fsdfsdf s   sd sd fsdfsdf s   sd sd fsdfsdf s   sd sd fsdfsdf s   sd sd fsdfsdf s   sd sd fsdfsdf s   sd sd fsdfsdf s   sd sd fsdfsdf s   sd sd fsdfsdf s   sd sd fsdfsdf s   sd sd fsdfsdf s   sd sd fsdfsdf s   sd sd fsdfsdf s   sd sd fsdfsdf s   sd sd fsdfsdf s   sd sd fsdfsdf s   sd sd fsdfsdf s   sd sd fsdfsdf s   sd sd fsdfsdf s   sd sd fsdfsdf s   sd sd fsdfsdf s   sd sd fsdfsdf s   sd sd fsdfsdf s   sd sd fsdfsdf s   sd sd fsdfsdf s   sd sd fsdfsdf s   

</div>