sprites

app/assets/base-bkup.css

@@ -0,0 +1,639 @@
+#center-container {
+    position:relative;
+	height:100%;
+	width:100%;
+    /* background-color:#031924; */
+    color:#444;
+}
+
+.showcard {
+    position:absolute;
+    display:none;
+    top:100px;
+    left:100px;
+    width:300px;
+    min-height:360px;
+    background-color:#F5F5F5;
+    text-align: left;
+    overflow: visible;
+	  z-index:14000;
+    color: #424242;
+    border-radius:2px;
+    box-shadow: 0px 3px 3px rgba(0,0,0,0.23), 0 3px 3px rgba(0,0,0,0.16);
+}
+
+.text {
+  margin: 7px;
+}
+
+#infovis {
+  width:100%;
+  height:100%;
+}
+
+.showcard .permission {
+  width:100%;
+  height:100%;
+}
+
+.CardOnGraph {
+  display:block;
+  position:relative;
+  width:100%;
+  height:100%;
+  z-index: 25;
+}
+
+.CardOnGraph .title {
+  font-size: 18px;
+  line-height: 22px;
+  display: block;
+  padding: 8px 16px;
+  height: 80px;
+  text-align: center;
+  font-family: 'din-regular', sans-serif;
+}
+
+.best_in_place_name {
+  
+}
+
+.best_in_place_name textarea, .best_in_place_name input {
+  font-family: 'din-regular', sans-serif;
+  color: #424242;
+  font-size: 18px;
+  line-height: 22px;
+height: 15px;
+padding: 5px 0;
+width: 100%;
+margin: 0;
+border: 0;
+outline: none;
+background: none;
+text-align:center;
+}
+
+.CardOnGraph .scroll {
+   display:block;
+   padding: 8px 16px;
+   height: 152px;
+   font-size: 12px;
+   line-height:15px;
+   font-family: helvetica, sans-serif;
+}
+
+.CardOnGraph .best_in_place_desc textarea {
+  font-size: 12px;
+   line-height:15px;
+   font-family: helvetica, sans-serif;
+   color: #424242;
+padding: 0;
+width: 100%;
+margin: 0;
+border: 0;
+outline: none;
+font-size: 12px;
+line-height: 15px;
+background: none;
+}
+
+.CardOnGraph .desc h3 {
+  font-style:normal;
+  margin-top:5px;
+}
+
+.CardOnGraph .best_in_place_desc input {
+  float: right;
+  margin: 2px 0px 0px 2px;
+  padding: 1px 5px;	
+}
+
+.CardOnGraph .best_in_place_desc {
+  display:block;
+  margin-top:2px;	
+}
+
+#edit_synapse .best_in_place_desc {
+  width: auto;
+}
+
+.CardOnGraph .links {
+  position:relative;
+  border-bottom: 1px solid #BDBDBD;
+  border-top: 1px solid #BDBDBD;
+}
+
+.linkItem {
+  float:left;
+  min-width:46px;
+  height:46px;
+  background-repeat: no-repeat;
+  background-position: 0 center;
+  background-size: 24px 24px;
+  z-index: 1;
+  position: relative;
+  color: #424242;
+  font-size: 12px;
+  line-height:12px;
+  height:12px;
+  padding:17px 0;
+}
+.linkItem a {
+  color: #424242;
+}
+
+.CardOnGraph .icon {
+  position:absolute;
+  width:100%;
+  z-index:1;
+  padding: 0;
+}
+.linkItem.contributor {
+  background-image: url(MMCCicon_mapper_black.png);
+  margin-left:32px;
+  z-index:1;
+  padding:17px 0 17px 28px;
+}
+.linkItem.mapCount {
+  background-image: url(MMCCicon_map_black.png);
+  min-width: 16px;
+  padding:17px 0 17px 28px;
+}
+.linkItem.synapseCount {
+  background-image: url(MMCCicon_synapse_black.png);
+  min-width: 16px;
+  padding:17px 0 17px 28px;
+}
+.linkItem.mapPerm {
+
+}
+.linkItem.mapPerm.co {
+  background-image: url(MMCCicon_commons.png);
+}
+.linkItem.mapPerm.pu {
+  background-image: url(MMCCicon_public.png);
+}
+.linkItem.mapPerm.pr {
+  background-image: url(MMCCicon_private.png);
+}
+
+.showcard .yourTopic .mapPerm:hover {
+  background-image: url(/assets/MMCCicon_maximize_arrow_black.png);
+  background-size: 31px 25px;
+  background-position-x: 8px;
+  cursor:pointer;
+}
+.showcard .yourTopic .mapPerm.minimize {
+ background-image: url(MMCCicon_minimize_arrow_black.png) !important;
+ background-size: 31px 25px;
+background-position-x: 8px;
+cursor: pointer;
+}
+.mapPerm .permissionSelect {
+  list-style: none;
+  width: 40px;
+  height: 80px;
+  position: relative;
+  top: 40px;
+}
+.mapPerm .permissionSelect li {
+  width: 40px;
+  height: 40px;
+  background-repeat: no-repeat;
+  background-position: center center;
+  background-size: 27px 27px;
+  background-color: #F5F5F5;
+}
+.mapPerm .permissionSelect .commons {
+  background-image: url(MMCCicon_commons.png);
+}
+.mapPerm .permissionSelect .public {
+  background-image: url(MMCCicon_public.png);
+}
+.mapPerm .permissionSelect .private {
+  background-image: url(MMCCicon_private.png);
+}
+.mapPerm .permissionSelect .commons:hover {
+  background-image: url(MMCCicon_commons_black.png);
+}
+.mapPerm .permissionSelect .public:hover {
+  background-image: url(MMCCicon_public_black.png);
+}
+.mapPerm .permissionSelect .private:hover {
+  background-image: url(MMCCicon_private_black.png);
+}
+
+.CardOnGraph .metacodeTitle {
+  font-style: italic;
+  font-family: 'vinyl';
+  text-transform: uppercase;
+  position: absolute;
+  line-height: 24px;
+  height:24px;
+  font-size: 20px;
+  display: none;
+  width: 90%;
+  padding: 11px 0 11px 10%;
+  background-color: #64BC61;
+  color: #000;
+}
+.permission.canEdit .metacodeTitle {
+  cursor:pointer;
+  background-image: url(MMCCicon_maximize_arrow_black.png);
+  background-repeat:no-repeat;
+  background-position: right center;
+}
+.permission.canEdit .metacodeTitle.minimize {
+  background-image: url(MMCCicon_minimize_arrow_black.png);
+}
+
+.CardOnGraph .metacodeImage {
+  cursor:move;
+  width:46px;
+  height:46px;
+  position:absolute;
+  left:-23px;
+  top:0;
+  background-size:46px 46px;
+  background-position:0 0;
+  background-repeat:no-repeat;
+}
+
+#metacodeOptions {
+  display:none;
+}
+.CardOnGraph .metacodeSelect {
+  display:none;
+  width:100%;
+  z-index: 2;
+  position: absolute;
+  background: #EAEAEA;
+  height: 150px;
+}
+.CardOnGraph .metacodeSelect ul {
+font-style: italic;
+font-family: 'vinyl';
+text-transform: uppercase;
+position: absolute;
+line-height: 36px;
+font-size: 20px;
+display:block;
+width: 100%;
+margin:0;
+padding: 0;
+list-style:none;
+height:150px;
+overflow:hidden;
+}
+.CardOnGraph .metacodeSelect ul li {
+background-color: #EAEAEA;
+width:100%;
+border-bottom:1px solid #AAAAAA;
+cursor:pointer;
+}
+.CardOnGraph .metacodeSelect ul li:hover {
+background-color: #F8F8F8;
+}
+.CardOnGraph .metacodeSelect ul li img, .CardOnGraph .metacodeSelect ul li .mSelectName {
+float:left;
+}
+
+.CardOnGraph .hoverForTip:hover .tip, .mapCard .hoverForTip:hover .tip {
+  display:block;
+}
+.CardOnGraph .tip, .mapCard .tip {
+ display:none;
+ position: absolute;
+ background: black;
+ top: 35px;
+ left: 0;
+ color: white;
+ border-radius: 4px;
+ font-size:15px !important;
+ font-family:'LatoRegular';
+ line-height:17px;
+ padding: 3px 5px 2px;
+ z-index:100;
+}
+
+
+.CardOnGraph .attachments {
+  border-top: 1px solid #BDBDBD;
+  width:100%;
+  height:47px;
+}
+
+.attachments a {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: block;
+  margin-left: 40px; 
+  padding-top:9px;
+  font-size: 16px;
+  line-height: 16px;
+}
+
+.addAttachment div {
+  display: inline-block;
+  width: 150px;
+  height: 23px;
+  text-align: center; 
+  padding-top: 25px;
+  font-size: 12px;
+  color: #9e9e9e;
+  cursor: pointer;
+}
+
+.addAttachment div:hover {
+  color: #616161;
+}
+
+.addLink div {
+  float: left;
+}
+
+#addLinkBack {
+  height: 48px;
+  width: 48px;
+  cursor: pointer;
+}
+#addLinkInput {
+  height: 32px;
+  width: 236px;
+  padding: 8px 16px 8px 0;
+  position: relative;
+}
+
+#addLinkInput input{
+padding: 7px 31px 7px 31px;
+height: 16px;
+width: 172px;
+margin: 0 0 0 0;
+border: 1px solid #BDBDBD;
+outline: none;
+font-size: 16px;
+line-height: 16px;
+background: white;
+color: black;
+font-family: 'LatoLight';
+}
+
+#addLinkReset {
+  position: absolute;
+  top: 8px;
+  right: 16px;
+  width: 32px;
+  height: 32px;
+  cursor: pointer;
+  float:none;
+}
+
+.cardSettings {
+  position: absolute;
+  left: 12px;
+  top: 12px;
+}
+
+.editSettings {
+  background: #ddd;
+  border-radius: 10px;
+  padding: 5px 0 5px 5px;
+  position: relative;
+  left: 16px;
+  width: 175px;
+  opacity: 0.98;
+  box-shadow: 4px 4px 5px #888888;
+  border: 1px solid #AAA;
+  z-index: 5;
+}
+
+.editSettings span {
+  display: inline-block;
+}
+
+.permActivator {
+  width: 16px;
+  height: 16px;
+  background: url('settings.png') no-repeat 0 0;
+  overflow:hidden;
+  position: absolute;
+  left: 0px;
+  top: 30px;
+}
+
+#edit_synapse .mapPerm,
+#edit_synapse .permActivator {
+  position: static;
+  display: inline-block;
+  color: #000;
+}
+
+#edit_synapse .mapPerm {
+  width: 20px;
+  height:20px;
+  background-repeat: no-repeat;
+  background-size: 20px 20px;
+  margin: 10px 12px 0 12px;
+}
+#edit_synapse .mapPerm.co {
+  background-image: url("/assets/MMCCicon_commons.png");
+}
+#edit_synapse .mapPerm.pu {
+  background-image: url("/assets/MMCCicon_public.png");
+}
+#edit_synapse .mapPerm.pr {
+  background-image: url("/assets/MMCCicon_private.png");
+}
+
+#edit_synapse .permActivator {
+  position: absolute;
+  margin-top: -1.3em;
+}
+
+#edit_synapse {
+  background: url("/assets/MMCCicon_synapse_black.png") no-repeat scroll 0 center / 30px 30px #FFFFFF;
+  border-radius: 5px;
+  padding: 5px 5px 5px 30px;
+  color: #000;
+}
+
+#edit_synapse_name {
+  margin-left: 0.4em;
+  border-bottom: 1px solid black;
+  text-align:center;
+  max-width: 160px;
+}
+
+#edgeUser {
+    display:inline-block;
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: 20px 20px;
+    height: 20px;
+    min-width: 20px;
+    position: relative;
+    background-image: url("MMCCicon_mapper_black.png");
+    margin: 10px 0 0 10px;
+}
+#edgeUser.hoverForTip:hover .tip {
+  display:block;
+}
+#edgeUser .tip {
+    background: none repeat scroll 0 0 #000000;
+    border-radius: 4px;
+    color: #FFFFFF;
+    display: none;
+    font-family: 'LatoRegular';
+    font-size: 15px !important;
+    line-height: 17px;
+    padding: 3px 5px 2px;
+    position: absolute;
+    left: 0;
+    text-align: center;
+    top: 23px;
+    z-index: 100;
+}
+
+#edit_synapse .click-to-edit {
+  margin-left: 0.3em;
+}
+
+#edit_synapse.yourEdge .mapPerm:hover {
+  background-image: url(/assets/MMCCicon_maximize_arrow_black.png);
+  background-size: 24px 17px;
+  background-position: 0px 2px;
+  cursor:pointer;
+}
+#edit_synapse.yourEdge .mapPerm.minimize {
+ background-image: url(MMCCicon_minimize_arrow_black.png) !important;
+ background-size: 24px 17px;
+ background-position: 0px 2px;
+ cursor: pointer;
+}
+#edit_synapse .mapPerm .permissionSelect {
+  list-style: none;
+  width: 26px;
+  height: 52px;
+  position: relative;
+  top: 20px;
+  left:-3px;
+}
+#edit_synapse .mapPerm .permissionSelect li {
+  width: 26px;
+  height: 26px;
+  background-repeat: no-repeat;
+  background-position: center center;
+  background-size: 20px 20px;
+  background-color:white;
+}
+
+
+/* Map Cards */
+
+.map {
+    float:left;
+    width:220px;
+	  height:340px;
+    font-size: 12px;
+    text-align: left;
+    overflow: visible;
+    background: #424242;
+    border-radius:2px;
+    margin:0 12px 12px 0;
+}
+
+.mapCard {
+  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
+  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
+  display: -ms-flexbox;      /* TWEENER - IE 10 */
+  display: -webkit-flex;     /* NEW - Chrome */
+  display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
+  -webkit-box-orient: vertical;
+  -moz-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -moz-box-direction: normal;
+  -ms-flex-direction: column;
+  -webkit-flex-direction: column;
+  flex-direction: column;
+  position:relative;
+  width:100%;
+  height:308px;
+  padding: 16px 0;
+  color:#F5F5F5;
+}
+
+.mapCard .title {
+  font-size:18px;
+  line-height:22px;
+  display:block;
+  padding: 0 16px;
+  text-align: center;
+  -webkit-box-flex: none;      /* OLD - iOS 6-, Safari 3.1-6 */
+  -moz-box-flex: none;         /* OLD - Firefox 19- */
+  -webkit-flex: none;          /* Chrome */
+  -ms-flex: none;              /* IE 10 */
+  flex: none;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */
+  font-family: 'din-regular', sans-serif;
+}
+
+.mapCard .mapScreenshot {
+  width: 188px;
+  height: 126px;
+  padding: 8px 16px;
+}
+.mapCard .mapScreenshot img {
+  width: 188px;
+  height: 126px;
+}
+
+.mapCard .scroll {
+   display:block;
+   -webkit-box-flex: 1;      /* OLD - iOS 6-, Safari 3.1-6 */
+  -moz-box-flex: 1;         /* OLD - Firefox 19- */
+  -webkit-flex: 1;          /* Chrome */
+  -ms-flex: 1;              /* IE 10 */
+  flex: 1;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */
+   overflow-y:auto;
+   padding:0 16px 8px;
+   font-family: helvetica, sans-serif;
+   font-style: italic;
+   font-size: 12px;
+}
+.mCS_no_scrollbar {
+  padding-right: 5px;
+}
+
+.mapCard .mapMetadata {
+  font-family: 'din-regular', sans-serif;
+  font-size: 12px;
+  position:relative;
+  border-top: 1px solid #BDBDBD;
+  -webkit-box-flex: none;      /* OLD - iOS 6-, Safari 3.1-6 */
+  -moz-box-flex: none;         /* OLD - Firefox 19- */
+  -webkit-flex: none;          /* Chrome */
+  -ms-flex: none;              /* IE 10 */
+  flex: none;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */
+}
+
+.mapCard .metadataSection {
+  padding: 8px 16px 0 16px;
+  width: 78px;
+  float: left;
+}
+
+.mapPermission {
+  font-family: 'din-medium', sans-serif;
+}
+.cCountColor {
+  font-family: 'din-medium', sans-serif;
+  color: #DB5D5D;
+}
+.tCountColor {
+  font-family: 'din-medium', sans-serif;
+  color: #4FC059;
+}
+.sCountColor {
+  font-family: 'din-medium', sans-serif;
+  color: #DAB539;
+}