now its ok

static/css/main.css

@@ -1,177 +0,0 @@
-@font-face {
-    font-family: 'whoismono';
-    src: url('whois-mono-webfont.woff2') format('woff2'),
-         url('whois-mono-webfont.woff') format('woff');
-    font-weight: normal;
-    font-style: normal;
-
-}
-
-body{
-	background: #ffffff;
-	font-family: 'whoismono';
-	width: 100%;
-	top:0;
-	left: 0;
-	color: blue;
-}
-
-h1{
-	margin-top: 50px;
-}
-
-/********************************************************/
-/* TEXT */
-/********************************************************/
-
-a{
-	text-decoration: none;
-}
-
-a:visited {
-    color:purple;
-}
-
-a:hover{
-	background: pink;
-
-}
-
-
-ul{
-	list-style: none;
-}
-li a{
-	text-decoration: none;
-	color: #0000FF
-}
-
-li a:hover{
-	color: orange;
-}
-
-img{
-	max-width: 500px;
-	margin-bottom: 15px;
-	/* float: left; */
-}
-video{
-	max-width: 400px;
-}
-
-div{
-	margin:0 auto;
-	/* padding: 1em 2em 1em; */
-}
-
-/********************************************************/
-/* THE CLICKED WORDS DISPLAYED */
-/********************************************************/
-
-#thewordpath{
-	display: block;
-	/* background-color: yellow; */
-	position: fixed;
-	width: 100%;
-	top:0;
-	right: 0;
-	left: 0;
-	padding: 0;
-	margin: 0;
-	padding: 10px;
-	z-index: 2;
-	width: auto;
-	background-color: white;
-	/* border:1px blue solid; */
-/* -webkit-transform-origin: right top;
-	-webkit-transform: rotate(90deg);
--moz-transform: rotate(90deg);
--o-transform: rotate(90deg);
--ms-transform: rotate(90deg);
-transform: rotate(90deg); */
-}
-.word{
-	color:silver;
-
-}
-
-/********************************************************/
-/* THE CONTENT IN TWO COLUMNS */
-/********************************************************/
-
-.description{
-	width: 80%;
-	/* border: 1px solid red; */
-}
-.text{
-	float: right;
-	width: 50%;
-	/* border:1px solid #444; */
-	/* position: relative; */
- }
-
-.item{
-	/* position: relative; */
-	float: left;
-	width: 50%;
-	/* vertical-align: top; */
-	/* border:1px solid #444; */
- }
-
-/* .text{
-	float: right;
-}
-.item{
-	float: left;
-}
-
-.column{
-  padding: 10px;
-	float: left;
-width: 40%;
-}
-.allcontent:after {
-  content: "";
-  display: table;
-  clear: both;
-} */
-
-/********************************************************/
-/* NAVIGATION AT THE BOTTOM OF DESCRIPTION*/
-/********************************************************/
-.index {
-	display: block;
-}
-
-nav#bottom_descrip_left, nav#bottom_descrip_right {
-    width: 100%;
-		margin: 0;
-	  padding: 0;
-    height: auto;
-    z-index: 1000;
-    bottom: 0px;
-    text-transform: uppercase;
-    font-size: 15px;
-    line-height: 18px;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-	  list-style-type: none;
-	  overflow: hidden;
-}
-
-
-li.index {
-	float: left;
-}
-
-li.prev_item, li.next_item, li.no_here {
-	float: right;
-}
-
-/********************************************************/
-/* DIVERGE */
-/********************************************************/
-
-.diverge{
-	margin-left: 1em;
-}

templates/description.html

@@ -70,15 +70,15 @@
 
 
 
-<div class="nav_bottom">
+<nav class="nav_bottom">
-<nav id="bottom_descrip_left">
+  <div id="bottom_descrip_left">
-  <li class="index"><a href="/">index</a></li>
+    <li class="index"><a href="/">index</a></li>
-</nav>
+  </div>
 
-<nav id="bottom_descrip_right">
+  <div id="bottom_descrip_right">
-  <li class="no_here">{{itemid}}/31</li>
+    <li class="next_item"><a href={{addressplus}}>next item</a></li>
-  <li class="prev_item"><a href={{addressminus}}>previous item</a></li>
+    <li class="prev_item"><a href={{addressminus}}>previous item</a></li>
-  <li class="next_item"><a href={{addressplus}}>next item</a></li>
+    <li class="no_here">{{itemid}}/31</li>
+  </div>
 </nav>
-</div>
 {% endblock %}