vpaths.css

/*@font-face{
  font-family: "Generika Light";
  src:	url('../fonts/Generika-Light_web.woff') format('woff'), 
	url('../fonts/Generika-Light_web.ttf') format('truetype');
}*/
body{
  margin:0px;
  padding:0px;
  font-family: "Generika Light", "Generika" , Helvetica;
  overflow:hidden;
}
#top{
  padding:10px;
  height:90px;
  background-color:#fff;
}
#search{
  margin-top:15px;
  width:314px;
  position:relative;
  display:inline;
  float:left;
}
#logo{
  margin-left: 50px;
  display:inline;
  float:left;
}
#search input{
  padding: 3px 5px;
  width:300px;
  display:inline;
}
#help{
  position:relative;
  display:inline;
  margin-top:15px;
  margin-left:30px;
  float:left;
}
.help-icon{
  border:1px solid #AAA;
  float:left;
  padding:3px 8px;
  border-radius:3px;
}
.help-icon:hover{
  cursor:pointer;
  background-color:#eee;
}
#suggestions{
  border:1px solid #AAA;
  width:312px;
  opacity: 0;
  position:relative;
  text-align:left;
  z-index:10;
  background-color:#fff;
}
.suggested{
  border-bottom:1px solid #efefef;
  width:302px;
  display:block;
  position:relative;
  padding: 0.3em;
  cursor:pointer;
}
.suggested:hover{
  background-color:#eee;
}
.suggested-focus{
  background-color:#eee;
}
.suggested.author:before{
  content:"\f007";
  font-family: FontAwesome;
  padding-right: 0.3em;
}
.suggested.keyword:before{
  content:"\f02b";
  font-family: FontAwesome;
  padding-right: 0.3em;
}
.suggested.project:before{
  content:"\f0b1";
  font-family: FontAwesome;
  padding-right: 0.3em;
}
.suggested.pub:before{
  content:"\f15b";
  font-family: FontAwesome;
  padding-right: 0.3em;
}
#splash-border{
  z-index:1000;
  background-color:#fff;
  clear:both;
  max-height:700px;
  padding-top:35px;
  padding-bottom:20px;
  position:absolute;
  overflow:hidden;
  background-color: #efefef;
  height:65%;
  width: 50%;
  left: 25%;
  border: 1px solid #bbb;
  border-radius:4px;

  -webkit-box-shadow: 10px 10px 4px 0px rgba(0,0,0,0.75);
  -moz-box-shadow: 10px 10px 4px 0px rgba(0,0,0,0.75);
  box-shadow: 10px 10px 4px 0px rgba(0,0,0,0.75);
}
#splashmsg{
  z-index:1000;
  background-color:#fff;
  clear:both;
  float:left;
  overflow:auto;
  position:absolute;
  padding: 25px;
  border-top:1px solid #ccc;
  border-bottom:1px solid #ccc;
}
.splash-title{
  position:absolute;
  display:inline-block;
  font-size:1.4em;
  top:4px;
  left:25px;
}
.close-splash{
  position:absolute;
  display:inline-block;
  font-size:1.4em;
  color:#666;
  top:4px;
  right:10px;
}
.close-splash:hover{
  color:#AAA;
  cursor:pointer;
}
.splashmsg-heading{
  margin-bottom:5px;
  font-size:1.25em;
  font-weight:bold;
}
.splashmsg-body{
  position:relative;
  overflow:auto;
  height:auto;
  clear:both;
  margin:0px 0px 15px 0px;
}
.splashmsg-body ul{
  list-style-type:none;
}
.splash-body-title{
  font-weight:bold;
}
.splashlabel{
  display:inline;
  float:left;
  padding:2px;
  margin-right:15px;
}
.splashlabel span{
  padding:3px;
}
#canvas{ 
  z-index: 2;
  position:absolute;
  cursor:default;
  
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
#display{
/*  background-color:#F3F0F0;*/
}
#context{
  z-index: 5;
  opacity: 0;
  position:absolute;
  background-color: #fff;
  overflow:auto;
}
#context span,#context a{
}
#context-head{
  float:left;
  margin:10px 10px 45px 10px;
  max-width:310px;
}
.context-label{
  font-size: 1.2em;
  font-weight: bold;
}
.context-description{
  font-style: italic;
}
#context-count{

}
#context-right{
  float:right;
  margin-right: 10px;
  margin-top:10px;
}
#context-right img{
  width:80;
}
#context-links{
  clear:both;
  position:absolute;
  margin: 17px 0px 15px 10px;
  bottom: 5px;
}
#context-links a{
  margin-right: 10px;
}
.loading-icon{
  margin-left:50px;
  padding-right:0.3em;
}
.context-icon i{
  padding-right:0.3em;
  vertical-align:text-top;
  line-height:inherit;
  cursor:default;
}
#labels{ 
  z-index: 4; 
  width:100%;
}
.label{
  position:absolute;
  opacity: 0;
  z-index: 4;
  border:2px solid transparent;
  padding:2px 4px;
  background:rgba(255,255,255,0.35);
  
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.label-text{
  padding-right: 5px;
  
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
} 
/*.label:hover{
  cursor:pointer;
  background-color:#fff;
}*/
.label.hovered{
  opacity:1;
  cursor:pointer;
  background-color:#fff;
}
.author{
  color:#796823;
}
.keyword.selected:hover, .author.selected:hover{
  cursor:default;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.author.selected{
  color:#fff;
  background-color:#796823;
}
.author.connected:not(.selected){
  background:rgba(121, 104, 35, 0.2);
}
.author.hovered{
  border: 2px solid #796823;
}
.pub{
  color:#4B4B4B;
}
.pub.label{
  margin-right:10px;
  font-size:20px;
}
.pub.selected{
  color:#fff;
  background-color:#4B4B4B;
}
.pub.connected:not(.selected){
  background:rgba(160, 160, 160, 0.2);
}
.pub.hovered{
  border: 2px solid #4B4B4B;
}
.keyword{
  color:#27606B;
}
.keyword.selected{
  color:#fff;
  background-color:#27606B;
}
.keyword.hovered{
  border: 2px solid #27606B;
}
.keyword.connected:not(.selected){
  background:rgba(39, 96, 107, 0.2);
}
.organisation{
  color:#AA44AA;
}
.organisation.selected{
  color:#fff;
  background-color:#AA44AA;
}
.organisation.hovered{
  border: 2px solid #AA44AA;
}
.organisation.connected:not(.selected){
  background:rgba(170, 68, 170, 0.2);
}
.project{
  color:#9A3557;
}
.project.selected{
  color:#fff;
  background-color:#9A3557;
}
.project.hovered{
  border: 2px solid #9A3557;
}
.project.connected:not(.selected){
  background:rgba(154, 53, 87, 0.2);
}

.selected.connected{
  -webkit-box-shadow: 2px 2px 0px 0px rgba(0,0,0,0.31);
  -moz-box-shadow: 2px 2px 0px 0px rgba(0,0,0,0.31);
  box-shadow: 2px 2px 0px 0px rgba(0,0,0,0.31);
}

.compare{
  border-left:1px solid #ddd;
  padding-left:0.4em;
  background-color:#fff;
  opacity: 0.35;
}
.compare i{
  vertical-align:baseline;
}
.compare:hover{
  opacity: 1;
}
.label-selected-remove{
  cursor:pointer;
  padding-left:0.3em;
  border-left:1px solid #fff;
}
.label-icon{
  cursor:pointer;
  padding-right: 0.4em;
  opacity: 0.35;
}
.label-icon:hover{
  opacity: 1;
}