dropped compass gem, switch to scss;clean-up files/code

2 files changed, 229 insertions, 1 deletions

diff --git a/views/layout.haml b/views/layout.haml
index 6659547..05f4a70 100644
--- a/views/layout.haml
+++ b/views/layout.haml
@@ -4,7 +4,7 @@
     %meta{'http-equiv' => 'Content-Type', :content => 'text/html; charset=UTF-8'}
     %title Lazar Toxicity Predictions
     %link{:rel=>'icon', :type=>'image/x-icon', :href=>'/images/favicon.ico'}
-    %link{ :href=>"/stylesheets/screen.css", :media=>"screen, projection", :rel=>"stylesheet", :type=>"text/css"}
+    %link{:rel=>'stylesheet', :href=>"#{'/style.css'}", :type => "text/css"}
     %link{ :href=>"/stylesheets/jquery-ui.css", :rel=>"stylesheet"}
     %link{ :href=>"/jsme/jsa.css", :rel=>"stylesheet"}
     %script{:src=>"/javascripts/jquery-1.8.3.min.js", :type=>"text/javascript"}
diff --git a/views/style.scss b/views/style.scss
new file mode 100644
index 0000000..9f03d6a
--- /dev/null
+++ b/views/style.scss
@@ -0,0 +1,228 @@
+$ist-color: rgba(200, 194, 200, 0.4);
+$black: #2b2b2b;
+$orange: #f76700;
+
+body {
+  background-image: url("/images/gray_jean.png");
+  overflow: scroll;
+  font-family: sans-serif; }
+  body a {
+    &:hover {
+    color: $orange; }
+    text-decoration: none;
+    font-weight: bold;
+    color: $black; }
+  body img {
+    border: 0; }
+  body h1 {
+    color: $black; }
+  body h2 {
+    padding-top: 12px;
+    font-size: x-large;
+    color: $orange; }
+
+.logo {
+  top: 0;
+  position: fixed;
+  background-color: #efefef;
+  width: 100%;
+  z-index: 40; }
+  .logo img {
+    float: left;
+    display: inline;
+    margin-right: 1em;
+    padding: 1em; }
+  .logo h1 {
+    width: 80%; }
+  .logo img.ote {
+    width: 100px;
+    height: 50px;
+    display: inline;
+    float: right; }
+
+.content {
+  background-image: url("/images/gray_jean.png");
+  margin-top: 6em; }
+  .content h1 {
+    text-shadow: white 1px 1px 0;
+    font-size: x-large;
+    display: inline; }
+  .content .arrow {
+    margin: 8px 0px 5px 20px; }
+  .content .back {
+    display: inline; }
+  .content fieldset#top {
+    box-shadow: (1px 1px 1px rgba(white, 1) inset, -1px -1px 5px rgba($black, 0.3) inset);
+    border: 0;
+    padding: 10px;
+    background-color: $ist-color; }
+    .content fieldset#top a#linkInsert {
+      display: block;
+      width: 100%;
+      height: 2em; }
+    .content fieldset#top #appletContainer {
+      padding: 10px; }
+  .content fieldset#middle {
+    border: 0;
+    padding: 10px;
+    box-shadow: (1px 1px 1px rgba(white, 1) inset, -1px -1px 5px rgba($black, 0.3) inset);
+    background-color: $ist-color; }
+    .content fieldset#middle a#linkModels {
+      display: block;
+      width: 100%;
+      height: 2em; }
+    .content fieldset#middle #models {
+      padding-left: 1em; }
+    .content fieldset#middle #model a {
+      display: inline;
+      font-weight: normal; }
+  .content fieldset#bottom {
+    border: 0;
+    box-shadow: (1px 1px 1px rgba(white, 1) inset, -1px -1px 5px rgba($black, 0.3) inset);
+    background-color: $ist-color;
+    padding: 10px;
+    margin-bottom: 5em; }
+    .content fieldset#bottom input#predict {
+      margin-left: 1em; }
+  .content .predictions {
+    background-color: $ist-color;
+    box-shadow: (1px 1px 1px rgba(white, 1) inset, -1px -1px 5px rgba($black, 0.3) inset);
+    padding: 10px;
+    text-align: justify; }
+  .content .overview {
+    background-image: url("/images/gray_jean.png");
+    box-shadow: (1px 1px 1px rgba(white, 1) inset, -1px -1px 5px rgba($black, 0.3) inset);
+    padding: 12px;
+    margin-top: 1em;
+    margin-bottom: 1em;
+    text-align: left; }
+    .content .overview a:hover {
+      color: $orange; }
+    .content .overview caption {
+      text-align: left; }
+    .content .overview #overview tr td {
+      background-color: white;
+      border: 1px solid #dad9c7;
+      padding-left: 1em;
+      padding-top: 0.5em; }
+      .content .overview #overview tr td #compound {
+        width: 200px; }
+      .content .overview #overview tr td b.c {
+        color: #d42200; }
+      .content .overview #overview tr td b.n {
+        color: #5c8533; }
+      .content .overview #overview tr td .confidence {
+        display: inline; }
+  .content .error {
+    background-color: $ist-color;
+    box-shadow: (1px 1px 1px rgba(white, 1) inset, -1px -1px 5px rgba($black, 0.3) inset);
+    padding: 15px; }
+    .content .error .message {
+      margin: 2em;
+      padding: 1em;
+      border: 2px solid $orange;
+      background-color: white;
+      color: $black; }
+  .content #closebutton {
+    color: $orange;
+    margin-left: 98%; }
+
+.details {
+  width: 98%;
+  box-shadow: (1px 1px 1px rgba(white, 1) inset, -1px -1px 5px rgba($black, 0.3) inset);
+  background-color: $ist-color; }
+  .details a:hover {
+    color: $orange; }
+  .details img {
+    display: inline;
+    float: left;
+    margin: 0.5em; }
+
+.significant_fragments {
+  width: 98%;
+  margin-bottom: 2em;
+  box-shadow: (1px 1px 1px rgba(white, 1) inset, -1px -1px 5px rgba($black, 0.3) inset);
+  background-color: $ist-color; }
+  .significant_fragments img {
+    display: inline;
+    float: left;
+    margin: 0.5em; }
+  .significant_fragments table#sf1 {
+    text-align: left; }
+    .significant_fragments table#sf1 td {
+      padding: 0.2em; }
+
+.descriptors {
+  width: 98%;
+  margin-bottom: 2em;
+  box-shadow: (1px 1px 1px rgba(white, 1) inset, -1px -1px 5px rgba($black, 0.3) inset);
+  background-color: $ist-color; }
+  .descriptors img {
+    display: inline;
+    float: left;
+    margin: 0.5em; }
+  .descriptors table#sf2 {
+    text-align: left; }
+    .descriptors table#sf2 td {
+      padding: 0.2em; }
+
+.results {
+  box-shadow: (1px 1px 1px rgba(white, 1) inset, -1px -1px 5px rgba($black, 0.3) inset);
+  background-image: url("/images/gray_jean.png");
+  overflow-x: auto;
+  overflow-y: hidden;
+  margin-top: 2em;
+  margin-bottom: 2em; }
+  .results a:hover {
+    color: $orange; }
+  .results .tablesorter {
+    width: 100%;
+    text-align: left; }
+    .results .tablesorter thead {
+      background-color: $ist-color; }
+      .results .tablesorter thead tr th.header {
+        background-image: url("/images/bg.gif");
+        background-repeat: no-repeat;
+        background-position: center left;
+        cursor: pointer;
+        padding-left: 20px;
+        border: 1px solid #dad9c7;
+        margin-left: -1px; }
+      .results .tablesorter thead tr th.headerSortDown {
+        background-image: url("/images/desc.gif");
+        background-color: $ist-color; }
+      .results .tablesorter thead tr th.headerSortUp {
+        background-image: url("/images/asc.gif");
+        background-color: $ist-color; }
+    .results .tablesorter tbody tr td {
+      box-shadow: (1px 1px 1px rgba(white, 1) inset, -1px -1px 5px rgba($black, 0.3) inset);
+      padding-left: 1em; }
+    .results .tablesorter tbody .compound {
+      width: 200px;
+      padding: 0.2em; }
+    .results .tablesorter tbody .n {
+      color: #5c8533; }
+    .results .tablesorter tbody .c {
+      color: #d42200; }
+
+input#predict {
+  border: 0px;
+  background-color: $ist-color;
+  margin: 0;
+  padding: 0; }
+
+.tooltip {
+  background-color: white;
+  border: 2px solid $orange;
+  font-size: 0.5em;
+  padding: 1em;
+  display: none;
+  z-index: 50; }
+
+.footer {
+  margin: 20px 0 20px 0; }
+  .footer a {
+    text-decoration: none;
+    color: black; }
+    .footer a:hover {
+      color: $orange; }