diff --git a/dev/scss/sidebar/sidebar.scss b/dev/scss/sidebar/sidebar.scss
new file mode 100644
index 0000000..ddcf811
--- /dev/null
+++ b/dev/scss/sidebar/sidebar.scss
@@ -0,0 +1,222 @@
+@charset "utf-8";
+@import "../util";
+
+$border-size: 2px;
+$right-padding: 60px;
+
+aside {
+  outline: none;
+  font-size: 10pt;
+  display: block;
+  background-color: $dark-green;
+  position: fixed;
+  z-index: 7100;
+  color: $nearly-white;
+  width: $logo-left-distance;
+  top: 0;
+  left: 0;
+  height: 100%;
+  padding-top: 65px;
+  > div {
+    overflow-y: auto;
+    overflow-x: visible;
+    max-height: 100%;
+  }
+  > * {
+    opacity: 1;
+  }
+  &::after {
+    display: block;
+    opacity: 0;
+    cursor: pointer;
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    margin-right: -1 * ($standard-margin / 2);
+    background-color: $dark-green;
+    font-family: FontAwesome;
+    content: $fa-bars;
+    font-size: 16pt;
+    width: 16pt;  
+    height: 17pt;
+    padding: 6pt;
+    border-top-right-radius: $standard-border-radius;
+  }
+  h2, legend {
+    font: {
+      size: 100%;
+      weight: bold;
+    }
+    line-height: 2em;
+    text-align: center;
+    padding: 0;
+    margin: 0;
+  }
+
+  ul {
+    list-style-type: none;
+/*
+    background-color: $light-green;
+*/
+    margin: 0;
+    font-size: 10pt;
+    text-indent: 0;
+    padding: 0;
+    li {
+      padding: 0;
+      > a {
+	padding: $item-padding;
+	&:visited {
+	  @include choose-item;
+	}
+
+      }
+
+      li.folded {
+	&.active ul {
+	  display: block;
+	}
+	ul {
+	  display: none;
+	}
+      }
+
+      &.active > a:link {
+	@include choose-active;
+      }
+
+      > a:link {
+	@include choose-item;
+	border-right: {
+	  width: $border-size;
+	  style: solid;
+	}
+
+	display: block;
+	&:hover {
+	  // color: inherit;
+	  transition: none;
+	  @include choose-hover;
+	}
+      }
+      h3 {
+        font: {
+	  weight: bold;
+	  size: 100%;
+	}	  
+	padding: 0;
+	margin: 0;
+      }
+/*
+      &.active {
+	text-shadow: none;
+	h3 {
+	  margin-bottom: 2pt;
+	  padding-bottom: 2pt;
+	  border-bottom: 1px solid black;
+	}
+      }
+*/
+      > a {
+	padding-left: 6pt;
+      }
+      li > a {
+	padding-left: 18pt;
+      }
+      li li > a {
+	padding-left: 36pt;
+      }
+    }
+  }
+  nav > ul > li > a {
+    font-weight: bold;
+  }
+
+  fieldset {
+    position: relative;
+    border-width: 0;
+    input[type=text], input[type=password] {
+      @include input-field;
+      width: 100%;
+    }
+    > form > div {
+      position: relative;
+      width: 100%;
+      margin-top: 4px;
+      padding-right: $button-width
+    }
+
+    button {
+      position: absolute;
+      // height: 100%;
+      top: 0;
+      right: 0;
+      &::after {
+	content: $fa-login;
+      }
+    }
+  }
+}
+
+aside:focus {
+  transition: all .3s ease-in-out;
+}
+
+aside.off, aside:not(:focus):not(.active) {
+  margin-left: -1 * ($logo-left-distance - ($standard-margin / 2));
+  &::after {
+    opacity: 1;
+  }
+  > * {
+    opacity: 0;
+    transition: {
+      property: opacity;
+      duration: .3s;
+    }
+  }
+}
+
+aside.off::after {
+  display:none;
+}
+
+/*
+#sidebar {
+  text-shadow: none;
+  height: 105%;
+  margin-top: -10px;
+  background-color: #496000;
+  left: 0;
+  top: 0;
+  &.active {
+    box-shadow: 2px 2px 5px darken($dark-green, 15%);
+    margin-left: 0px;
+    left: 0;
+    top: 0;
+  }
+  &:not(.active) > i.fa-bars {
+    opacity: 1;
+    cursor: pointer;
+    background-color: #496000;
+    position: fixed;
+    font-size: 16pt;
+    width: 16pt;  
+    height: 17pt;
+    padding: 6pt;
+    bottom: 0;
+    left: 0;
+    border-top-right-radius: 5pt;
+  }
+  dl.info {
+    font-size: 9pt;
+    padding: 0 10pt;
+    > dt {
+      font-weight: bold;
+      float: left;
+    }
+    > dd {
+      text-align: right;
+    }
+  }
+}
+*/
\ No newline at end of file