CSS refactoring

public/stylesheets/collapse.css

@@ -0,0 +1,57 @@
+.expandCollapse{
+  display: block;
+  position: absolute;
+  left: -28px;
+  /*margin-top: -23px;*/
+  top: -2px;
+  opacity: 0.001;
+  /*visibility: hidden; */
+}
+
+
+
+  
+  ul li a.zoomButton{
+    display: block;
+    position: absolute;
+    left: -17px;
+
+    height: 11px !important;
+    width: 11px;
+
+    margin-top: 4px;
+    margin-right: 8px;
+
+    /*background: url("smiley.png") no-repeat center; */
+    /*background-color: grey;*/
+    background-size: 140%;
+    
+
+    border: 2px solid black;
+  }
+
+  .collapsed{
+    background-color: grey;
+  }
+
+  ul li i{
+    position: absolute;
+    right: 0px;
+    top: 2px;
+    
+  }
+
+  .handle {
+  display: float;
+  height: 22px;
+  width: 16px;
+}
+.handle a {
+  height: 24px;
+  width: 16px;
+}
+.handle a img {
+  height: 16px;
+  width: 16px;
+  margin-bottom: 8px;
+}

public/stylesheets/dragDrop.css

@@ -0,0 +1,8 @@
+.selectedAboveDrop {
+  /*border-top: 2px solid red;*/
+  box-shadow: 0 -1px 0 red;
+}
+
+.selectedBelowDrop { /*change to boxShadow*/
+  border-bottom: 1px solid red;
+}

public/stylesheets/editor.css

@@ -0,0 +1,31 @@
+#marked-mathjax-input{
+  border: 2px dotted black;
+  margin-left: 0px;
+  background-color: rgb(245, 231, 234); 
+}
+
+textarea {
+    width: 100%; 
+    /*height: 1em;*/
+    height: 22px;
+    margin-left: 0;
+    overflow: hidden; 
+    padding: 0;
+    border: none; 
+    resize: none;
+    font-size: 110%;
+  }
+
+textarea:focus {
+    outline: 0px none transparent;
+}
+
+  /*textarea {
+    border: none;
+    overflow: auto;
+    outline: none;
+
+    -webkit-box-shadow: none;
+    -moz-box-shadow: none;
+    box-shadow: none;
+}*/

public/stylesheets/list.css

@@ -0,0 +1,77 @@
+ul {
+  margin-left: 20px;
+  padding: 0;
+}
+.node {
+  padding: 0;
+  padding-top: 0;
+  margin-left: 0;
+  list-style: none;
+}
+
+.subList {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+
+.root ul {
+    /*padding: 4px !important; */
+    padding-top: 1px !important;
+    margin-right: 0px !important; 
+    /*margin-left: 25px !important;*/
+    list-style-type: square;
+  }
+  
+  .root li {
+    /*background: brown;*/
+    position: relative;
+    padding: 0;
+    padding-top: 0px;
+    margin: 0;
+    margin-left: 10px;
+    /*margin-bottom: 5px;*/
+    background-repeat: no-repeat;
+    list-style: none;
+    /*background-image: url(smiley.png); */
+    /*background-size: 15px 15px; 
+    background-position: -1px 2px;*/
+  }
+/**************** List *****************/
+
+/*.leaf {
+  margin-left: 20px;
+}
+.expand {
+  display: inline-block;
+  height: 22px;
+  width: 16px;
+}
+.expand a {
+  cursor: pointer;
+  display: block;
+  position: relative;
+  text-align: center;
+  vertical-align: center;
+  height: 20px;
+  width: 16px;
+  bottom: 3px;
+  font-size: 18px;
+  text-decoration: none;
+  color: rgb(51, 51, 51);
+}
+
+.node .content {
+  display: inline-block;
+  vertical-align: top;
+  margin: 0;
+  padding: 0;
+  width: 100%;
+}
+.node p {
+  margin: 0;
+  padding: 0;
+  width: auto;
+  font-size: 16px;
+}
+*/

public/stylesheets/nav.css

@@ -0,0 +1,33 @@
+/************** Navbar *****************/
+.myNav{
+  position: fixed;
+  top: 0px;
+  width: 100%;
+  height: 26px;
+  background-color: black;
+  z-index: 9999; 
+}
+
+.btn{
+  height: 20px;
+  width: 10px;
+}
+
+ul.navbar-right {
+  list-style-type: none;
+}
+
+.navbar-right > li {
+  position: relative;
+  float: left;
+  /*border*/
+}
+
+.navbar-right > li > a{
+  display: block;
+  padding: 2px 20px;
+}
+
+.navbar-right > li:hover > a {
+  background: grey; 
+}

public/stylesheets/panel.css

@@ -0,0 +1,75 @@
+body {
+  background-color: rgb(245, 245, 245);
+}
+
+/* Fix for Firefox dotted outline */
+:focus, :active, :hover {
+  outline:0 none !important;
+}
+/******* Body ********/
+
+/**************** Panel ****************/
+.floatRight{
+  float: right;
+  margin-top: 40px;
+  width: 760px;
+}
+
+.centering{
+  width: 760px;
+  margin: auto;
+  margin-top: 40px;
+}
+
+.panel {
+  background: none repeat scroll 0% 0% rgb(252, 252, 252);
+  padding: 20px;
+  min-height: 800px;
+  border: 1px solid rgb(217, 217, 217);
+  border-radius: 5px;
+  box-shadow: 0px 0px 3px 3px rgba(0, 0, 0, 0.05);
+  /*box-shadow: h-shadow v-shadow blur spread color inset;*/
+}
+.col-sidebar-panel {
+  margin-left: 50px;
+}
+.addendum {
+  position:absolute;
+  bottom: 35px;
+}
+
+.root {
+  margin-top: 40px;
+  margin-left: 40px;
+  margin-right: 40px;
+}
+/**************** Panel ****************/
+
+
+/*MINE */
+
+#pathDiv {
+  position: relative;
+  top:30px;
+  width: 90%;
+  margin: auto;
+  border: 1px solid rgb(217, 217, 217);
+  height: 20px;
+}
+
+/*
+#pathDiv{
+  background-color: grey; 
+  position: absolute;
+  width: 200px;
+  z-index: 900000000; 
+  left: -187px;
+  top: 10px;
+}
+
+
+.panelMenu {
+  height: 40px;
+  border: 1px solid rgb(217, 217, 217);
+}
+*/

public/stylesheets/revControl.css

@@ -0,0 +1,7 @@
+.snapLI > span > textarea:hover{
+  border: 1px solid black;
+}
+
+.selectedSnap {
+  border: 2px solid red;
+}

public/stylesheets/sidebar.css

@@ -0,0 +1,66 @@
+/*************** Sidebar ***************/
+
+/*.sidebar .list-group-item {
+  position: relative;
+  display: block;
+  padding-top: 6px;
+  padding-left: 15px;
+  padding-right: 15px;
+  padding-bottom: 0;
+}
+
+.sidebar .list-group-icon {
+  position: relative;
+  top: -8px;
+}
+
+.sidebar .list-group-icon-tag {
+  position: relative;
+  top: -7px;
+}
+
+.sidebar .list-group-item-text {
+  margin-left: 4px;
+}*/
+
+#metaSidebar{
+  position: fixed;
+  height: 100%;
+  top: 60px;
+  left: 15px;
+  width: 200px;
+  background-color: beige; 
+  z-index: 999999;
+}
+
+#metaSidebar.hideBar{
+  display: none;
+}
+
+.nodeAttributes{
+  background-color: rgb(147, 213, 202);
+  width: 100%;
+  height: 100px;
+}
+
+.nodeAttributes > ul {
+  list-style-type: none;
+}
+
+.revHistory{
+  background-color: rgb(48, 127, 189);
+  width: 100%;
+  height: 100px;
+}
+
+.revHistory > a{
+  color: white
+}
+
+#revTimestamps > li > a{
+  color: white;
+}
+
+
+
+/************* End Sidebar *************/

public/stylesheets/style.css

@@ -1,369 +0,0 @@
-body {
-  background-color: rgb(245, 245, 245);
-}
-
-/* Fix for Firefox dotted outline */
-:focus, :active, :hover {
-  outline:0 none !important;
-}
-
-/************** Navbar *****************/
-.myNav{
-  position: fixed;
-  top: 0px;
-  width: 100%;
-  height: 26px;
-  background-color: black;
-  z-index: 9999; 
-}
-
-.btn{
-  height: 20px;
-  width: 10px;
-}
-
-ul.navbar-right {
-  list-style-type: none;
-}
-
-.navbar-right > li {
-  position: relative;
-  float: left;
-  /*border*/
-}
-
-.navbar-right > li > a{
-  display: block;
-  padding: 2px 20px;
-}
-
-.navbar-right > li:hover > a {
-  background: grey; 
-}
-
-/************* End Navbar **************/
-
-/*************** Sidebar ***************/
-
-/*.sidebar .list-group-item {
-  position: relative;
-  display: block;
-  padding-top: 6px;
-  padding-left: 15px;
-  padding-right: 15px;
-  padding-bottom: 0;
-}
-
-.sidebar .list-group-icon {
-  position: relative;
-  top: -8px;
-}
-
-.sidebar .list-group-icon-tag {
-  position: relative;
-  top: -7px;
-}
-
-.sidebar .list-group-item-text {
-  margin-left: 4px;
-}*/
-
-#metaSidebar{
-  position: fixed;
-  height: 100%;
-  top: 60px;
-  left: 15px;
-  width: 200px;
-  background-color: beige; 
-  z-index: 999999;
-}
-
-#metaSidebar.hideBar{
-  display: none;
-}
-
-.nodeAttributes{
-  background-color: rgb(147, 213, 202);
-  width: 100%;
-  height: 100px;
-}
-
-.nodeAttributes > ul {
-  list-style-type: none;
-}
-
-.revHistory{
-  background-color: rgb(48, 127, 189);
-  width: 100%;
-  height: 100px;
-}
-
-.revHistory > a{
-  color: white
-}
-
-#revTimestamps > li > a{
-  color: white;
-}
-
-
-
-/************* End Sidebar *************/
-
-/**************** Panel ****************/
-.floatRight{
-  float: right;
-  margin-top: 40px;
-  width: 760px;
-}
-
-.centering{
-  width: 760px;
-  margin: auto;
-  margin-top: 40px;
-}
-
-.panel {
-  background: none repeat scroll 0% 0% rgb(252, 252, 252);
-  padding: 20px;
-  min-height: 800px;
-  border: 1px solid rgb(217, 217, 217);
-  border-radius: 5px;
-  box-shadow: 0px 0px 3px 3px rgba(0, 0, 0, 0.05);
-  /*box-shadow: h-shadow v-shadow blur spread color inset;*/
-}
-.col-sidebar-panel {
-  margin-left: 50px;
-}
-.addendum {
-  position:absolute;
-  bottom: 35px;
-}
-
-.root {
-  margin-top: 40px;
-  margin-left: 40px;
-  margin-right: 40px;
-}
-/**************** Panel ****************/
-
-/**************** List *****************/
-
-.snapLI > span > textarea:hover{
-  border: 1px solid black;
-}
-
-.selectedSnap {
-  border: 2px solid red;
-}
-
-.selectedAboveDrop {
-  /*border-top: 2px solid red;*/
-  box-shadow: 0 -1px 0 red;
-}
-
-.selectedBelowDrop { /*change to boxShadow*/
-  border-bottom: 1px solid red;
-}
-
-
-#marked-mathjax-input{
-  border: 2px dotted black;
-  margin-left: 0px;
-  background-color: rgb(245, 231, 234); 
-}
-
-
-ul {
-  margin-left: 20px;
-  padding: 0;
-}
-.node {
-  padding: 0;
-  padding-top: 0;
-  margin-left: 0;
-  list-style: none;
-}
-.leaf {
-  margin-left: 20px;
-}
-.expand {
-  display: inline-block;
-  height: 22px;
-  width: 16px;
-}
-.expand a {
-  cursor: pointer;
-  display: block;
-  position: relative;
-  text-align: center;
-  vertical-align: center;
-  height: 20px;
-  width: 16px;
-  bottom: 3px;
-  font-size: 18px;
-  text-decoration: none;
-  color: rgb(51, 51, 51);
-}
-.handle {
-  display: float;
-  height: 22px;
-  width: 16px;
-}
-.handle a {
-  height: 24px;
-  width: 16px;
-}
-.handle a img {
-  height: 16px;
-  width: 16px;
-  margin-bottom: 8px;
-}
-.node .content {
-  display: inline-block;
-  vertical-align: top;
-  margin: 0;
-  padding: 0;
-  width: 100%;
-}
-.node p {
-  margin: 0;
-  padding: 0;
-  width: auto;
-  font-size: 16px;
-}
-.subList {
-  padding-top: 0;
-  padding-bottom: 0;
-}
-
-
-/*MINE */
-
-#pathDiv {
-  position: relative;
-  top:30px;
-  width: 90%;
-  margin: auto;
-  border: 1px solid rgb(217, 217, 217);
-  height: 20px;
-}
-
-/*
-#pathDiv{
-  background-color: grey; 
-  position: absolute;
-  width: 200px;
-  z-index: 900000000; 
-  left: -187px;
-  top: 10px;
-}
-
-
-.panelMenu {
-  height: 40px;
-  border: 1px solid rgb(217, 217, 217);
-}
-*/
-
-
-.root ul {
-    /*padding: 4px !important; */
-    padding-top: 1px !important;
-    margin-right: 0px !important; 
-    /*margin-left: 25px !important;*/
-    list-style-type: square;
-  }
-  
-  .root li {
-    /*background: brown;*/
-    position: relative;
-    padding: 0;
-    padding-top: 0px;
-    margin: 0;
-    margin-left: 10px;
-    /*margin-bottom: 5px;*/
-    background-repeat: no-repeat;
-    list-style: none;
-    /*background-image: url(smiley.png); */
-    /*background-size: 15px 15px; 
-    background-position: -1px 2px;*/
-  }
-textarea {
-    width: 100%; 
-    /*height: 1em;*/
-    height: 22px;
-    margin-left: 0;
-    overflow: hidden; 
-    padding: 0;
-    border: none; 
-    resize: none;
-    font-size: 110%;
-  }
-
-  /*textarea {
-    border: none;
-    overflow: auto;
-    outline: none;
-
-    -webkit-box-shadow: none;
-    -moz-box-shadow: none;
-    box-shadow: none;
-}*/
-
-.expandCollapse{
-  display: block;
-  position: absolute;
-  left: -28px;
-  /*margin-top: -23px;*/
-  top: -2px;
-  opacity: 0.001;
-  /*visibility: hidden; */
-}
-
-
-
-  
-  ul li a.zoomButton{
-    display: block;
-    position: absolute;
-    left: -17px;
-
-    height: 11px !important;
-    width: 11px;
-
-    margin-top: 4px;
-    margin-right: 8px;
-
-    /*background: url("smiley.png") no-repeat center; */
-    /*background-color: grey;*/
-    background-size: 140%;
-    
-
-    border: 2px solid black;
-  }
-
-  .collapsed{
-    background-color: grey;
-  }
-
-  ul li i{
-    position: absolute;
-    right: 0px;
-    top: 2px;
-    
-  }
-
-textarea:focus {
-    outline: 0px none transparent;
-  }
-/**************** List *****************/
-
-/************** Draggable **************/
-.placeholder {
-  display: block;
-  height: 24px;
-  width: 100%;
-  border: 1px solid rgb(65, 65, 65);
-  list-style: none;
-}

views/index.ejs

@@ -7,7 +7,17 @@
 <link href="stylesheets/externalCSS/bootstrap.css" rel="stylesheet" type="text/css">
 <link href="stylesheets/externalCSS/toolbar.css" rel="stylesheet" />
 <link href="stylesheets/externalCSS/bootstrap.icons.css" rel="stylesheet" />
-<link href="stylesheets/style.css" rel="stylesheet" type="text/css">
+<!-- <link href="stylesheets/style.css" rel="stylesheet" type="text/css"> -->
+<link href="stylesheets/collapse.css" rel="stylesheet" type="text/css">
+<link href="stylesheets/dragDrop.css" rel="stylesheet" type="text/css">
+<link href="stylesheets/editor.css" rel="stylesheet" type="text/css">
+<link href="stylesheets/list.css" rel="stylesheet" type="text/css">
+<link href="stylesheets/nav.css" rel="stylesheet" type="text/css">
+<link href="stylesheets/panel.css" rel="stylesheet" type="text/css">
+<link href="stylesheets/revControl.css" rel="stylesheet" type="text/css">
+<link href="stylesheets/sidebar.css" rel="stylesheet" type="text/css">
+
+
 
 
 <script src="js/libs/externalLibs/jquery-2.0.3.js"></script>