metamaps--metamaps/app/assets/stylesheets/application.css

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the top of the
 * compiled file, but it's generally better to create a new file per style scope.
 *
 *= require_self
 *= require_tree .
 *= require base
 *= require ForceDirected
 *= require jquery.mCustomScrollbar
 *= require jquery-ui
*/

/* clear styles */
html, body, div, h1, h2, h3, h4, h5, h6, 
ul, ol, dl, li, dt, dd, p, blockquote,
pre, form, fieldset, table, th, td, legend {
  margin: 0; 
  padding: 0;
 }

img {
  border:0;
  padding:0;
  margin:0;
  display:block;
  text-indent:-9999px;
}

html, 
body, 
.main, 
.wrapper, 
#container {
  height: 100%;
  overflow:hidden;
}

html {
}

body {
  background:#031924 url(background2-for-repeating.jpg) repeat 0 0;
  font-family: 'katarine-web', sans-serif;
  background-attachment:fixed;
  color:#FFF;
}

h1,h2,h3,h4,h5,h6 {
  font-weight:normal;
}

h1 {
  display:block;
  text-align:left;
  font-family: "vinyl",sans-serif;
}

h2 {
  display:block;
  text-align:center;
  font-family: "vinyl",sans-serif;
  background: #333;
  font-size:24px;
}

a {
  color:#2d6a5d;
  text-decoration:none;
}

/*
 * Utility
 */

.clearfloat {
  clear:both;
}

.hidden {
  display: none;
}

/*
 * Layout stuffs
 */

.new_session, 
.new_user,
.new_map,
.edit_user,
.edit_topic,
.edit_synapse,
.edit_map,
.invite {
  display: block;
  width: 350px;
  position:absolute;
  left:50%;
  top:0;
  margin:200px 0 0 -195px;
  background: url('bg.png');
  padding: 20px;
  border-radius: 15px;
  color: #000;
  border:2px solid #000;
}

.onConsole .new_map {
  display:none;	
}

.onConsole .new_map button, .onConsole .new_map input.add {
  float:left;
  margin-top:5px;	
}

.invite p {
  margin:10px 0;
}
.invite strong {
  text-align:center;
  display:block;
  color:#67AF9F;
}

#closenewtopic,
#closenewsynapse {
  position:absolute;
  top: 3px;
  right:3px;
}

.anypage .new_topic {
  width:300px;	
  margin:-40px 0 0 -50px;
}

.anypage .new_topic,
.anypage .new_synapse {
  display: block;
  position: absolute;
}

.anypage #topic_name {
  width:200px;
  position:absolute;
  top:40px;
  left:50px;
  z-index:9999;	
}

#metacodeImg {
  height:120px;	
}

#metacodeImgTitle {
  color:#000;
  float:left;
  width:120px;
  text-align:center;
  margin-left:90px;
}

label, select, input, textarea {
  display:block;
}

label {
  margin-top:5px;
}

input[type="submit"] {
  margin-top:5px;
}

.contentarea p,
.contentarea ul,
.contentarea ol,
.contentarea table {
  font-size:14px;
  line-height:1.55em;
  padding:0.5em 0
}
 
.contentarea ul li {
  padding:0.2em 0;
}

.contentarea ol li {
  padding:0.2em 0;
}

.contentarea ul {
  margin:0 0 0 1em;
}

.contentarea ol {
  margin:0 0 0 1.3em;
}

.main {
  /*overflow:hidden; */
}

/* --- top options --*/
.headertop {
  display:block;
  position:fixed;
  top:0;
  right:0;
  z-index:10;
  width:auto;
  border-radius:15px;
  margin:10px;
}

.headertop button {
  float:left;	
}

.wrapper {
  display:block;
  height:100%;
  margin:0 0;
}

.wrapper h1.index {
  position: fixed;
  bottom: 9px;
  right: 0;
  z-index: 9999;
  width: auto;
  background: url('black_bg.png');
  padding: 0px 10px 0px 20px;
  border-bottom-left-radius: 15px;
  border-top-left-radius: 15px;
  height: 38px;
  font-size: 30px;
  line-height: 38px;
}

.nodemargin {
  padding-top:120px;
}

.focus {
  position:fixed;
  top:0;
  left:0;
  width:90%;
  z-index:2;
  display: block;
  min-width:533px;
  margin: 50px 50px 25px 50px;
  background: url('bg.png'); border-radius: 20px;
  color:#000;
  border:1px solid #000;
}

.focus h1 {
  margin-top:0;
}

.focusleft,
.focusmiddle,
.focusright {
  display:block;
  float:left;
}

.focusleft {
  width:20%;
  min-width:70px;
  text-align:center;
}

.focusmiddle {
  display:block;
  width:49%;
  min-height:115px;
  border-right:2px solid #000;
  border-left:2px solid #000;
}

.focusright {
  width:30%;
  min-width:150px;
}

.focus .focusleft p {
  font-weight:normal;
  font-size:16px;
  line-height:20px;
  padding:10px 0 5px 0;
}

.focus .focusright p {
  font-weight:normal;
  font-size:16px;
  line-height:20px;
  padding:10px 0 5px 10px;
}

.focus .icon {
  margin:0 auto;
}

.focus .title {
  font-size:22px;
  line-height:25px;
  border-bottom:2px solid #000;
  padding:10px;
}

.focus .desc {
  padding:10px;
  height:75px;
  font-family:Arial, Helvetica, sans-serif;
}

.focus .desc h3 {
  font-style:normal;
}

.focus .location {
  padding-left:10px;
}

.focus .link {
  padding:0 0 0 10px;
  display:block;
  width:90%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.divider {
  margin: 20px 50px 20px 50px;
  border-bottom:2px solid #FFF;
}

.empty {
  margin-left:50px;
}

#menus {
  margin:0 7px;
}

#cards {
  height:100%;
  overflow-y:scroll;	
}

#cards p.empty {
  margin-left:50px;	
}

/* --- styling the sideOptions section ---*/
.sideOption {
  position:fixed;
  left:0px;
  display:block;
  height:32px;
  background: url('bg.png') repeat 0 0;
  padding:0 0 0 15px;
  border-bottom-right-radius:10px;
  border-top-right-radius:10px;
  color:#000;
  border:1px solid #000;
  overflow:hidden;
  cursor:pointer;
}

#sideOptionFind {
  top:25%;
  width:45px;
}

#sideOptionAnalyze {
  top:35%;
  width:64px;
  display:none;
}

#sideOptionOrganize {
  top:45%;
  width:75px;
  display:none;
}

.closeSideOption {
  position:fixed;
  left:4px;
  display:none;
  margin-top: -22px;
  cursor: pointer;
  background: #000;
  padding: 0 4px;
  border-radius: 8px;
}
#closeFind {
  top:25%;
}

#closeAnalyze {
  top:35%;
}

#closeOrganize {
  top:45%;
}

#findWhere {
  position:fixed;
  top:25%;
  left:90px;
  display:none;
  margin-top:-20px;
}

.findWhereField, #findWhere input, #findWhere p {
  float:left; 
}

.findWhereField.inCommons {
  color:#67be5f;	
}

.sideOption select,
.sideOption span {
  float:left;
  margin-top:10px;
}

.sideOption .spacer {
  margin:10px 10px 0;
}

.sideOption .find_key {
  margin-right:8px;
}

.find_topic_by_name {
  display: block;
}

.find_topic_by_name input, .find_map_by_name input, .find_mapper_by_name input { 
	margin:10px 0 0 0;
	width: 270px;
	border-radius: 10px;
	height: 20px;
	padding: 0 10px;
	outline: none; 
	}

.find_mapper_by_name,
.find_map_by_name {
  display:none;
}

.find_topic_by_metacode {
  z-index:12;
  display:none;
  width:auto;
  color: #67AF9F;
}

.find_topic_by_metacode ul {
  display:block;
}

.find_topic_by_metacode ul li {
  clear:both;
  list-style-type:none;
  display:block;
  padding:3px;
}

.find_topic_by_metacode ul img {
  width:40px;
  height:40px;
  float:left;
}

.find_topic_by_metacode ul p {
  float:left;
  display: block;
  margin: 0;
  background: none;
  padding: 10px 4px 2px 4px;
}

.find_topic_by_metacode #filters-one {
  float:left;
}

.find_topic_by_metacode #filters-two {
  float:left;
}

.find_topic_by_metacode #filters-three {
  float:left;
}

.find_topic_by_metacode li.toggledOff {
  opacity: 0.4;
}

#get_topics_form {
  display:none;	
}

/* --- styling the logo button ---*/
.footer {
  width: 188px;
  display: block;
  position: fixed;
  bottom: 9px;
  height: 38px;
  background: url('black_bg.png');
  border-bottom-right-radius: 15px;
  border-top-right-radius: 15px;
  z-index: 15000;
}

.logo {
  position:fixed;
  bottom:6px;
  left:10px;
  z-index:12;
  display:block;
  width:auto;
  padding: 3px 8px;
  margin: -0.75em 0 0;
}

#mainTitle {
  float: left;
  /*background: url('black_bg.png') repeat 0 0;*/
  padding: 0 5px;
  border-radius: 10px;
}

#mainTitle a {
  color:#FFF;
  font-family: "vinyl",sans-serif;
  font-style: italic;
  text-transform:uppercase;
  font-weight: 400;
}

#beta {
  float:left;
  margin-left: 2px;
}

.footer .menu {
  display:block;
  position:absolute;
  border:none;
  bottom:40px;
  left:10px;
  height:0px;
  z-index:12;
  width:118px;
  color: #67AF9F;
  white-space: nowrap;
  text-align: center;
  font-size: 16px;
  overflow: hidden;
  padding: 0 8px;
  margin: 0;
  background: white;
  border-radius: 6px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  box-shadow: 0 2px rgba(0, 0, 0, 0.05), 0 -2px rgba(0, 0, 0, 0.05) inset;
  -webkit-box-shadow: 0 2px rgba(0, 0, 0, 0.05), 0 -2px rgba(0, 0, 0, 0.05) inset;
  -moz-box-shadow: 0 2px rgba(0, 0, 0, 0.05), 0 -2px rgba(0, 0, 0, 0.05) inset;
  background: url('black_bg.png') repeat 0 0;
}

.footer ul li {
  margin:0;
  clear:both;
  float:none;
  list-style-type:none;
  display:block;
  padding:3px;
  text-align:center;
  border-top:1px solid #999;
}
.footer ul li.first {
  border:none;
}
.footer ul li a:hover {
  color:#9E2;
}
.footer ul li a {
  color: #FFF;
  display:block;
}