diff --git a/css/detailed.css b/css/detailed.css
new file mode 100644
index 0000000..cc3f2b2
--- /dev/null
+++ b/css/detailed.css
@@ -0,0 +1,252 @@
+/************************************/
+/* CSS FOR THE HEADER SECTION */
+/************************************/
+
+
+#header, #footer {
+ color: #DDD;
+ padding-left: 20px;
+ background-color: #222222;
+ text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
+ background: linear-gradient(to bottom, #444 0%,#222 100%);
+ line-height: 30px;
+}
+#header h1 {
+ display: inline;
+}
+nav ul li {
+ display: inline-block;
+ transition: color 0.25s;
+ margin-right: 30px;
+ text-transform: uppercase;
+ text-align: center;
+ color: #CCC;
+ cursor: hand;
+ cursor: pointer;
+}
+nav, nav ul {
+ display: inline-block;
+ margin-left: 20px;
+}
+
+
+
+/************************************/
+/* GENERAL CSS RULES FOR ALL */
+/************************************/
+.active {
+ color: #5E99FF;
+}
+.lined {
+ border: 1px solid #AAA;
+ background-color: #E8E8E8;
+}
+.boxed {
+ box-sizing: border-box;
+}
+.centered {
+ text-align: center;
+}
+.even {
+ background-color: #E0E0E0;
+}
+.activeSelect {
+ background-color: #D3DFF5;
+ border: 1px solid #5E99FF;
+}
+.topspace {
+ margin-top: 20px;
+}
+.floatright {
+ float: right;
+}
+
+.floatleft {
+ float: left;
+}
+/************************************/
+/* CSS FOR THE LEFT SECTION */
+/************************************/
+
+
+div[dropzone] {
+ height: 230px;
+ border: 4px dashed #bbb;
+ transition: border 0.25s;
+ border-radius: 5px;
+ margin-bottom: 20px;
+ padding: 15px;
+}
+div[dropzone].dropover {
+ color: #5E99FF;
+ border: 3px dashed #5E99FF;
+}
+div[dropzone] ul {
+ margin-top: 10px;
+}
+div[dropzone] ul li {
+ margin-top: 3px;
+}
+div[dropzone] ul li b {
+ width: 90px;
+ display: inline-block;
+}
+
+.spectralList {
+ height: calc(100% - 250px);
+ width: 100%;
+ overflow-y: auto;
+ overflow-x: hidden;
+}
+
+.spectralList ul, .spectralList li, .spectralList p, .spectralList .info {
+ display: inline-block;
+}
+.spectralList li {
+ font-size: 14px;
+ padding: 10px;
+ height: 40px;
+ width: 100%;
+ line-height: 40px;
+}
+.spectralList .info {
+ padding-left: 10px;
+}
+
+/************************************/
+/* CSS FOR THE CENTER SECTION */
+/************************************/
+.overviewItem {
+ width: 300px;
+ height: 150px;
+ margin-right: 10px;
+ margin-bottom: 10px;
+ float: left;
+ position: relative;
+}
+
+.overviewItem.overviewLarge {
+ width: 500px;
+ height: 200px;
+}
+.overviewItem .topbar {
+ overflow: hidden;
+ height: 30px;
+ line-height: 30px;
+ width: 100%;
+ background-color: #CCC;
+ background: linear-gradient(to bottom, #DDD 0%,#CCC 100%);
+ display: block;
+}
+.overviewItem .topbar b {
+ margin-left: 10px;
+}
+.overviewItem .topbar p {
+ display: inline;
+ margin-left: 15px;
+}
+.overviewItem .graph {
+ display: block;
+ position: absolute;
+ top: 30px;
+ bottom: 0px;
+ left: 0px;
+ right: 0px;
+}
+
+.usage h1 {
+ colour: #222;
+ line-height: 1.5em;
+}
+
+.usage h2 {
+ color: #444;
+ font-size: 22px;
+ line-height: 1.5em;
+ margin-bottom: 10px;
+ margin-top: 20px;
+}
+.usage p {
+ color: #555;
+ line-height: 1.6em;
+ font-size: 1em;
+
+}
+.usage .h1group {
+ margin-bottom: 20px;
+ padding: 30px;
+}
+
+.usage hr {
+ border: 0;
+ margin-top: 0px;
+ height: 1px;
+ background-image: -webkit-linear-gradient(left, rgba(0,0,0,0.5), rgba(0,0,0,0));
+ background-image: -moz-linear-gradient(left, rgba(0,0,0,0.5), rgba(0,0,0,0));
+ background-image: -ms-linear-gradient(left, rgba(0,0,0,0.5), rgba(0,0,0,0));
+ background-image: -o-linear-gradient(left, rgba(0,0,0,0.5), rgba(0,0,0,0));
+}
+
+
+.usage ul {
+ padding: 10px 0 10px 0;
+ list-style-type: circle;
+}
+.usage li {
+ margin-left: 50px;
+}
+
+
+
+#big {
+ width: 100%;
+ height: 500px;
+}
+
+
+/************************************/
+/* CSS FOR THE RIGHT SECTION */
+/************************************/
+#rightbar b {
+ display: block;
+ width: 100%;
+ margin-bottom: 10px;
+}
+#rightbar .button {
+ display: inline-block;
+ padding: 5px 10px 5px 10px;
+ border: 1px solid #444;
+ border-radius: 5px;
+ margin-right: 10px;
+}
+
+#rightbar label, #rightbar select, #rightbar input {
+ display: inline-block;
+}
+#rightbar label {
+ width: 70px;
+ height: 20px;
+ margin-bottom: 10px;
+}
+
+
+
+/************************************/
+/* CSS FOR THE FOOTER SECTION */
+/************************************/
+
+
+.footer p {
+ display: inline-block;
+}
+
+.footer progress {
+ display: inline-block;
+}
+.fillrest {
+ padding-left: 20px;
+ padding-right: 20px;
+ position: relative;
+ display: block;
+ overflow:hidden;
+}
\ No newline at end of file
diff --git a/css/fancy.css b/css/fancy.css
new file mode 100644
index 0000000..bad6c34
--- /dev/null
+++ b/css/fancy.css
@@ -0,0 +1,189 @@
+/************************************/
+/* FANCY CSS STYLING FOR STUFF */
+/************************************/
+
+
+input[type='range'] {
+ -webkit-appearance: none;
+ border-radius: 5px;
+ /*box-shadow: inset 0 0 5px #333;*/
+ background-color: rgba(0, 0, 0, 0.1);
+ border: 1px solid rgba(0, 0, 0, 0.3);;
+ height: 5px;
+ vertical-align: middle;
+}
+input[type='range']::-moz-range-track {
+ -moz-appearance: none;
+ border-radius: 5px;
+ /*box-shadow: inset 0 0 5px #333;*/
+ background-color: #999;
+ height: 10px;
+}
+input[type='range']::-webkit-slider-thumb {
+ -webkit-appearance: none !important;
+ border-radius: 20px;
+ background-color: #FFF;
+ /*box-shadow:inset 0 0 10px rgba(000,000,000,0.5);*/
+ border: 1px solid #333;
+ height: 20px;
+ width: 10px;
+}
+input[type='range']::-moz-range-thumb {
+ -moz-appearance: none;
+ border-radius: 10px;
+ background-color: #FFF;
+ /*box-shadow:inset 0 0 10px rgba(000,000,000,0.5);*/
+ border: 1px solid #333;
+ height: 20px;
+ width: 10px;
+}
+
+button {
+ -moz-box-shadow:inset 0px 1px 0px 0px #bee2f9;
+ -webkit-box-shadow:inset 0px 1px 0px 0px #bee2f9;
+ box-shadow:inset 0px 1px 0px 0px #bee2f9;
+ background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #63b8ee), color-stop(1, #468ccf));
+ background:-moz-linear-gradient(top, #63b8ee 5%, #468ccf 100%);
+ background:-webkit-linear-gradient(top, #63b8ee 5%, #468ccf 100%);
+ background:-o-linear-gradient(top, #63b8ee 5%, #468ccf 100%);
+ background:-ms-linear-gradient(top, #63b8ee 5%, #468ccf 100%);
+ background:linear-gradient(to bottom, #63b8ee 5%, #468ccf 100%);
+ filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#63b8ee', endColorstr='#468ccf',GradientType=0);
+ background-color:#63b8ee;
+ -moz-border-radius:6px;
+ -webkit-border-radius:6px;
+ border-radius:6px;
+ border:1px solid #3866a3;
+ display:inline-block;
+ cursor:pointer;
+ color:#14396a;
+ font-family:arial;
+ font-size:15px;
+ font-weight:bold;
+ padding:6px 24px;
+ text-decoration:none;
+ text-shadow:0px 1px 0px #7cacde;
+}
+button.small {
+ padding: 0px 10px;
+}
+button:hover {
+ background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #468ccf), color-stop(1, #63b8ee));
+ background:-moz-linear-gradient(top, #468ccf 5%, #63b8ee 100%);
+ background:-webkit-linear-gradient(top, #468ccf 5%, #63b8ee 100%);
+ background:-o-linear-gradient(top, #468ccf 5%, #63b8ee 100%);
+ background:-ms-linear-gradient(top, #468ccf 5%, #63b8ee 100%);
+ background:linear-gradient(to bottom, #468ccf 5%, #63b8ee 100%);
+ filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#468ccf', endColorstr='#63b8ee',GradientType=0);
+ background-color:#468ccf;
+}
+
+
+progress:not(value) {
+ /* Add your styles here. As part of this walkthrough we will focus only on determinate progress bars. */
+}
+/* Styling the determinate progress element */
+progress[value] {
+ /* Get rid of the default appearance */
+ appearance: none;
+ /* This unfortunately leaves a trail of border behind in Firefox and Opera. We can remove that by setting the border to none. */
+ border: none;
+ /* Add dimensions */
+ width: 100%; height: 16px;
+ /* Although firefox doesn't provide any additional pseudo class to style the progress element container, any style applied here works on the container. */
+ background-color: whiteSmoke;
+ border-radius: 3px;
+ box-shadow: 0 2px 3px rgba(0,0,0,.5) inset;
+ /* Of all IE, only IE10 supports progress element that too partially. It only allows to change the background-color of the progress value using the 'color' attribute. */
+ color: royalblue;
+
+ position: relative;
+ margin-top: 2px;
+}
+
+progress[value]::-webkit-progress-bar {
+ background-color: whiteSmoke;
+ border-radius: 3px;
+ box-shadow: 0 2px 3px rgba(0,0,0,.5) inset;
+}
+progress[value]::-webkit-progress-value {
+ position: relative;
+
+ background-size: 35px 20px, 100% 100%, 100% 100%;
+ border-radius:3px;
+
+ /* Let's animate this */
+ animation: animate-stripes 100s linear infinite;
+ -webkit-animation: animate-stripes 100s linear infinite;
+}
+
+@-webkit-keyframes animate-stripes {
+ 100% { background-position: -1000px 0px; }
+}
+
+@keyframes animate-stripes {
+ 100% { background-position: -1000px 0px; }
+}
+/* Let's spice up things little bit by using pseudo elements. */
+
+/*progress[value]::-webkit-progress-value:after {
+ *//* Only webkit/blink browsers understand pseudo elements on pseudo classes. A rare phenomenon! *//*
+ content: '';
+ position: absolute;
+
+ width:5px; height:5px;
+ top:7px; right:7px;
+
+ background-color: white;
+ border-radius: 100%;
+}*/
+
+/* Firefox provides a single pseudo class to style the progress element value and not for container. -moz-progress-bar */
+
+progress[value]::-moz-progress-bar {
+ /* Gradient background with Stripes */
+ background-image:
+ -moz-linear-gradient( 135deg,
+ transparent,
+ transparent 33%,
+ rgba(0,0,0,.1) 33%,
+ rgba(0,0,0,.1) 66%,
+ transparent 66%),
+ -moz-linear-gradient( top,
+ rgba(255, 255, 255, .25),
+ rgba(0,0,0,.2)),
+ -moz-linear-gradient( left, #09c, #04c204);
+
+ background-size: 35px 20px, 100% 100%, 100% 100%;
+ border-radius:3px;
+
+ /* Firefox doesn't support CSS3 keyframe animations on progress element. Hence, we did not include animate-stripes in this code block */
+}
+
+/* Fallback technique styles */
+.progress-bar {
+ background-color: whiteSmoke;
+ border-radius: 3px;
+ box-shadow: 0 2px 3px rgba(0,0,0,.5) inset;
+
+ /* Dimensions should be similar to the parent progress element. */
+ width: 100%; height:16px;
+}
+
+
+/* The percentage will automatically fall in place as soon as we make the width fluid. Now making widths fluid. */
+.html5::-webkit-progress-value {
+ /* Gradient background with Stripes */
+ background-image:
+ -webkit-linear-gradient( 135deg,
+ transparent,
+ transparent 33%,
+ rgba(0,0,0,.1) 33%,
+ rgba(0,0,0,.1) 66%,
+ transparent 66%),
+ -webkit-linear-gradient( top,
+ rgba(255, 255, 255, .25),
+ rgba(0,0,0,.2)),
+ -webkit-linear-gradient( left, #09c, #04c204);
+}
+
diff --git a/css/structure.css b/css/structure.css
new file mode 100644
index 0000000..d445889
--- /dev/null
+++ b/css/structure.css
@@ -0,0 +1,75 @@
+html, body {
+ height: 100%;
+ min-width: 800px;
+ padding: 0;
+ margin: 0;
+ background-color: #E5E5E5;
+ font-family: Helvetica,Arial,sans-serif;
+}
+#footer, .push {
+ height: 50px; /* '.push' must be the same height as 'footer' */
+ z-index: 10;
+}
+#header {
+ height: 50px;
+}
+#container {
+ height: calc(100% - 50px); /* Footer subtract */
+ position: relative;
+
+}
+#content {
+ height: calc(100% - 50px); /* Header subtract */
+ position: relative;
+
+}
+#leftbar {
+ float: left;
+ position: relative;
+ width: 250px;
+ height: 100%;
+}
+#rightbar {
+ position: relative;
+ float: right;
+ width: 0px;
+ height: 100%;
+}
+#rightbar.nonzero{
+ width: 350px;
+}
+#central {
+ position: relative;
+ height: 100%;
+ overflow: auto;
+}
+
+.spacing {
+ position: relative;
+ padding: 10px;
+ height: calc(100% - 20px);
+ width: calc(100% - 20px);
+}
+
+/****************************************************/
+
+
+/*#header {
+ background-color: green;
+}
+#container {
+ background-color: dodgerblue;
+}*/
+/*#content {
+ background-color: #5E99FF;
+}*/
+#leftbar {
+ background-color: #E0E0E0;
+}
+#rightbar {
+ background-color: #E0E0E0;
+}
+
+#central {
+ background-color: #F0F0F0;
+}
diff --git a/css/style.css b/css/style_old.css
similarity index 100%
rename from css/style.css
rename to css/style_old.css
diff --git a/index.html b/index.html
index 47abe2c..e854960 100644
--- a/index.html
+++ b/index.html
@@ -4,7 +4,9 @@
InterfaceZ: Return of the Z-iffying
-
+
+
+
@@ -20,12 +22,11 @@
-
-