Redesign

1 files changed, 132 insertions, 359 deletions

diff --git a/style.css b/style.css
index 813d133..7677e03 100755..100644
--- a/style.css
+++ b/style.css
@@ -1,364 +1,137 @@
-@charset "UTF-8";
-html, body, div, h1, h2, h3, h4, h5, span, ul, ol, li {
-  padding: 0;
-  margin: 0; }
-
-ul, ol, li {
-  list-style: none; }
-
-body {
-  font-family: Helvetica, Arial;
-  color: #000333;
-  font-size: 1em; }
-
-.bh-content {
-  padding-top: 2em; }
-
-.bh-row {
-  width: 80%;
-  margin: 0 auto;
-  position: relative; }
-
-.bh-wide-row {
-  width: 100%;
-  position: relative; }
-
-.bh-row, .bh-wide-row {
-  float: none;
-  clear: both;
-  padding-bottom: 2em;
-  border-bottom: 1px solid #ccc; }
-  .bh-row:before, .bh-row:after, .bh-wide-row:before, .bh-wide-row:after {
-    content: "";
-    display: table; }
-  .bh-row:after, .bh-wide-row:after {
-    clear: both; }
-
-.bh-no-border {
-  border: none; }
-
-.bh-col-1 {
-  width: 8.33333%;
-  float: left;
-  position: relative; }
-
-.bh-col-2 {
-  width: 16.66667%;
-  float: left;
-  position: relative; }
-
-.bh-col-3 {
-  width: 25%;
-  float: left;
-  position: relative; }
-
-.bh-col-4 {
-  width: 33.33333%;
-  float: left;
-  position: relative; }
-
-.bh-col-5 {
-  width: 41.66667%;
-  float: left;
-  position: relative; }
-
-.bh-col-6 {
-  width: 50%;
-  float: left;
-  position: relative; }
-
-.bh-col-7 {
-  width: 58.33333%;
-  float: left;
-  position: relative; }
-
-.bh-col-8 {
-  width: 66.66667%;
-  float: left;
-  position: relative; }
-
-.bh-col-9 {
-  width: 75%;
-  float: left;
-  position: relative; }
-
-.bh-col-10 {
-  width: 83.33333%;
-  float: left;
-  position: relative; }
-
-.bh-col-11 {
-  width: 91.66667%;
-  float: left;
-  position: relative; }
-
-.bh-col-12 {
-  width: 100%;
-  float: left;
-  position: relative; }
-
-.bh-vert-1 {
-  padding-top: 1em; }
-
-.bh-vert-2 {
-  padding-top: 2em; }
-
-.bh-vert-3 {
-  padding-top: 3em; }
-
-h1, h2, h3 {
+html,body {
+    background-color: #000;
+    color: #e5e5e5;
+	height: 97%;
+}
+
+/* Create the whole terminal which cosists of a window and a header */
+.terminal {
+  width: 98%;
+  min-height:10%;
+  border-width: 1px;
+  border-top-color: #dfdede;
+  border-bottom-color: #949494;
+  border-right-color: #AAAAAA;
+  border-left-color: #e0dfdf;
+  border-style: solid;
+  border-radius: 6px;
+  background-color: #272727;
+  color: #e5e5e5;
+  margin-bottom: 10px;
+  -webkit-box-shadow: 5px 4px 20px 1px rgba(0,0,0,0.75);
+  -moz-box-shadow: 5px 4px 20px 1px rgba(0,0,0,0.75);
+  box-shadow: 5px 4px 20px 1px rgba(0,0,0,0.75);
+}
+
+li { padding: 10px; }
+/* The terminal window where you put the content */
+.terminal .terminal-window {
+  padding: 15px;
+  font-size: medium;
+  font-weight: normal;
+  font-family: "Courier New", Monaco, monospace;
+}
+
+/* Sets the color for a path such as ~/page/menu $ */
+.terminal .terminal-window .path {
+  margin-right: 10px;
+  color:#729fcf;
+}
+/* Sets the color and font type for a user such as user@server */
+.terminal .terminal-window .user {
+  color:#6fc736;
   font-weight: bold;
-  text-transform: uppercase; }
-
-h1 {
-  font-size: 3em;
-  line-height: 1em;
-  padding-bottom: 0.2em;
-  display: table;
-  letter-spacing: -0.02em; }
-
-h2 {
-  font-size: 2.3em;
-  line-height: 1em;
-  letter-spacing: -0.02em; }
-
-h3 {
-  font-size: 1.6em;
-  line-height: 1.2em;
-  letter-spacing: -0.02em; }
-
-p {
-  font-size: 1.2em;
-  line-height: 1.7em;
-  letter-spacing: -0.01em; }
-  p:last-of-type:after {
-    display: block;
-    width: 5em;
-    height: 5px;
-    background: #000;
-    content: " ";
-    margin: 1em 0 0; }
+}
+/* Decide how links within a menu class in the window should look like */
+.terminal .terminal-window .menu a {
+ /* text-decoration: none; */
+  color: #e5e5e5;
+  font-weight: normal;
+}
 
 a {
-  color: #000;
-  text-decoration: none;
-  border-bottom: 2px solid #ffde17;
-  padding-bottom: 0.2em; }
-  a:hover {
-    border-bottom-color: dodgerblue; }
-
-small {
-  font-size: 0.8em;
-  color: #333; }
-
-aside {
-  font-size: 0.8em;
-  color: #666;
-  font-style: italic;
-  position: absolute;
-  width: 25%; }
-  aside.bh-aside-left {
-    left: -29%; }
-  aside.bh-aside-right {
-    right: -29%; }
-
-ol, ul {
-  width: 100%;
-  clear: both;
-  float: none;
-  padding-bottom: 1em; }
-  ol li, ul li {
-    font-size: 1.2em;
-    line-height: 1.7em; }
-    ol li.bh-title, ul li.bh-title {
-      font-weight: bold;
-      border-bottom: 1px solid #be1e2d;
-      text-transform: uppercase;
-      display: table;
-      margin-bottom: 0.4em;
-      padding-bottom: 0.4em;
-      color: #333; }
-
-ol {
-  counter-reset: customlistcounter; }
-  ol li.bh-item:before {
-    content: counter(customlistcounter);
-    counter-increment: customlistcounter;
-    display: block;
-    position: absolute;
-    color: #333;
-    margin-left: -1.5em; }
-
-ul li.bh-item:before {
-  content: "–";
-  display: block;
-  position: absolute;
-  color: #333;
-  margin-left: -1.5em; }
-ul.bh-timeline header {
-  text-transform: uppercase;
-  font-size: 0.8em;
+  /* text-decoration: none; */
+   color: #FFFFFF;
+   font-weight: normal;
+ }
+
+a:visited {
+  color: #FFFFFF;
+  font-weight: normal;
+}
+/* Create mouse over effect */
+.terminal .terminal-window .menu a:hover {
   font-weight: bold;
-  color: #666; }
-ul.bh-timeline li.bh-timeline-item {
-  padding-top: 1em;
-  padding-left: 2em;
-  border-left: 1px solid #ccc; }
-  ul.bh-timeline li.bh-timeline-item:before {
-    content: "";
-    display: block;
-    width: 0.5em;
-    height: 0.5em;
-    background: #be1e2d;
-    border-radius: 2em;
-    position: absolute;
-    margin: 0.6em 0 0 -2.3em;
-    z-index: 1000; }
-  ul.bh-timeline li.bh-timeline-item small {
-    display: block;
-    line-height: 1.4em; }
-  ul.bh-timeline li.bh-timeline-item:last-of-type {
-    position: relative; }
-    ul.bh-timeline li.bh-timeline-item:last-of-type:after {
-      height: calc(100% - 1.6em);
-      width: 20px;
-      position: absolute;
-      background: #fff;
-      display: block;
-      content: "";
-      margin-left: -2.3em;
-      bottom: 0;
-      z-index: 999; }
-ul.bh-timeline:before {
-  height: 1.9em;
-  width: 20px;
-  position: absolute;
-  background: #fff;
-  display: block;
-  content: "";
-  margin-left: -1px; }
-
-.bh-gray {
-  color: #333; }
-  .bh-gray a {
-    color: #333; }
-
-.bh-light-gray {
-  color: #ccc; }
-  .bh-light-gray a {
-    color: #ccc; }
-
-button {
-  background: #fff;
-  border: 1px solid #333;
-  font-size: 1em;
-  padding: 1em 2em;
-  border-radius: 3em;
-  text-transform: uppercase;
-  font-weight: bold;
-  color: #333;
+}
+/* Create the blinkin cursor*/
+.terminal .terminal-window .cursor {
+  background-color: #e5e5e5;
+  animation: blink 1s steps(5, start) infinite;
+  -webkit-animation: blink 1s steps(5, start) infinite;
+}
+@keyframes blink {
+  to {
+    visibility: hidden;
+  }
+}
+@-webkit-keyframes blink {
+  to {
+    visibility: hidden;
+  }
+}
+
+
+
+
+/* The header contains the name of the terminal and the buttons for 
+ closing, maximizing, minimizing */
+.terminal .header {
+  position: relative;
+  overflow:hidden;  	/*This makes the heigth adjust to the content.
+  It is necessary because this div contains floating divs */
+  background-image: linear-gradient(to top, #d6d6d6 0%, #e5e5e5 100%);
+  padding: 2px;
+  border-top-left-radius: 6px;
+  border-top-right-radius: 6px;
+}
+
+/* The buttons in the top right corner...*/
+.terminal .header .header-buttons {
+
+  float:right;
+  width:40%;
+}
+
+.terminal .header .header-buttons ul {
+  display: inline;
+  list-style-type: none;
+  color:#404040; 
+
+
+}
+/* ... are implemented as a list... */
+.terminal .header .header-buttons ul li {
+  list-style-type: none;
+  display: inline;
+  float: right;
+  font-size: x-large;
+  border-radius: 6px;
+  margin-right: 10px;
+  font-weight:normal;
   cursor: pointer;
-  outline: none; }
-  button:hover {
-    color: dodgerblue;
-    border-color: dodgerblue; }
-  button:active {
-    background: #eee; }
-  button.bh-cancel {
-    border-color: #D1200D;
-    color: #D1200D; }
-    button.bh-cancel:hover {
-      border-color: #A10F04;
-      color: #A10F04; }
-    button.bh-cancel:active {
-      background: #eee; }
-  button.bh-disabled {
-    border-color: #ccc;
-    color: #ccc;
-    cursor: default; }
-    button.bh-disabled:hover {
-      border-color: #ccc;
-      color: #ccc; }
-    button.bh-disabled:active {
-      background: #fff; }
-
-table.bh-table {
-  width: 100%;
-  margin: 1em 0;
-  border-spacing: 0;
-  border-collapse: separate; }
-  table.bh-table thead tr th {
-    font-size: 0.8em;
-    text-transform: uppercase;
-    text-align: left;
-    border-bottom: 2px solid #ccc;
-    padding-bottom: 1em; }
-  table.bh-table tbody tr td {
-    font-size: 1.2em;
-    padding: 0.7em 0;
-    border-bottom: 1px solid #ccc; }
-  table.bh-table tbody tr:last-of-type td {
-    border-bottom: none; }
-
-div.bh-input {
-  margin-bottom: 1.5em; }
-  div.bh-input small {
-    padding-top: 0.3em;
-    display: block;
-    font-size: 0.75em; }
-  div.bh-input label {
-    font-size: 0.7em;
-    color: #333;
-    text-transform: uppercase;
-    font-weight: bold;
-    margin-bottom: 0.7em;
-    display: block; }
-  div.bh-input input[type=text], div.bh-input input[type=password], div.bh-input textarea {
-    width: 100%;
-    display: block;
-    font-family: Helvetica, Arial;
-    font-size: 1.2em;
-    color: #000;
-    background: none;
-    border: none;
-    border-bottom: 1px solid #ddd;
-    padding-bottom: 0.5em;
-    outline: none; }
-    div.bh-input input[type=text]:focus, div.bh-input input[type=password]:focus, div.bh-input textarea:focus {
-      border-color: #333; }
-  div.bh-input.bh-invalid label {
-    color: #D1200D; }
-  div.bh-input.bh-invalid input[type=text], div.bh-input.bh-invalid input[type=password] {
-    border-bottom-color: #D1200D; }
-div.bh-search {
-  width: 100%;
-  position: relative; }
-  div.bh-search input {
-    display: block;
-    float: left;
-    background: #fff;
-    border: 1px solid #ccc; }
-  div.bh-search input[type=text] {
-    padding: 1em 2em;
-    border-top-left-radius: 3em;
-    border-bottom-left-radius: 3em;
-    font-size: 1em;
-    outline: none;
-    margin-right: 0;
-    border-right: none;
-    width: calc(100% - 6em); }
-  div.bh-search input[type=submit] {
-    font-size: 0.8em;
-    padding: 1.3em 2em 1.4em 1em;
-    border-top-right-radius: 3em;
-    border-bottom-right-radius: 3em;
-    text-transform: uppercase;
-    font-weight: bold;
-    color: #333;
-    cursor: pointer;
-    outline: none;
-    margin-left: 0;
-    right: 0;
-    position: absolute; }
-
-/*# sourceMappingURL=bauhaus.css.map */
+}
+/* ... and just like in Mint there is a mouse-over effect  */
+.terminal .header .header-buttons ul li:hover {
+  font-weight:bold;
+  color: #00000;
+}
+/* Change the properties of the window name */
+.terminal .header .header-name h4 {
+  float:left;
+  width:50%;
+  text-align:right;
+  font-size: large;
+  margin: 5px;
+  letter-spacing: 1px;
+  color: #404040;
+}