@font-face {
    font-family: SketchBlock;
    src: url('../fonts/sketchblock-webfont.eot');
    src: url('../fonts/sketchblock-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/sketchblock-webfont.woff2') format('woff2'),
         url('../fonts/sketchblock-webfont.woff') format('woff'),
         url('../fonts/sketchblock-webfont.ttf') format('truetype'),
         url('../fonts/sketchblock-webfont.svg#sketch_blockbold') format('svg');
    font-weight: normal;
    font-style: normal;
}

body {
	min-width: 1300px;
	overflow: hidden;
  font-family: Tahoma, Helvetica;
  color: #444;
}

svg#main-view{
	background-color: white;	/* #fafafa */
}

#toread,
#core,
#fringe-separator{
  shape-rendering: geometricPrecision;
}

#toread{
  stroke: #444;
  stroke-opacity: .1;
  stroke-width: 2;
}

.placeholder {
  position:fixed;
  font-family: 'Architects Daughter', cursive;
  color: rgba(0,0,0,.6);
}

.placeholder h2{
  font-family: 'SketchBlock', sans-serif;
  font-weight: 400;
  font-size: 32px;
  margin: 19px 0;
  opacity: 0.3;
}

.placeholder .legend{
  opacity: 0.1;
}

.placeholder.highlighted .legend,
.placeholder.highlighted h2 {
  opacity:1;
}

#description-fringe{
  max-width: 600px;
}

.visControl{
	position:absolute;
}

.paper{
	cursor:pointer;
}

.card{
	fill: #f9f9f9;
  opacity: 1;
  stroke-width: 0;
  stroke: #888;
  cursor: default;
}

.card.highlighted{
	fill:white; 	/* #eee gray highlighting that I don't like */
}

.title{
	font-weight: normal;
	fill: #222;
	letter-spacing: .54px;
}

.title.highlighted{
	font-weight: bold;
	fill:#444;
	letter-spacing: normal;
}

.metadata{
	fill:#258B46;	/* Google dark green: #006621*/
}

.metadata:hover{
	text-decoration: underline;
}

.abstract{
	font-family: Roboto Slab, Tahoma, Helvetica;
  font-size: 95%;
	color:#555;
	cursor:text;
}

button {
  padding: 7px 16px;
  border-radius: 5px;
  border:none;
  outline:none;
  -webkit-font-smoothing: subpixel-antialiased;
  color: #fff;
  background-color: #2c7fb8;
}

button:hover{
  background-color: #2fa4b2;
}

button:disabled:hover{
  background-color: white;
}

button:disabled{
	background-color: white;
  color: #777;
  border: 1px solid #999;
}

button.off{
  border: 1px solid white;   /* just to avoid jumpind effect */
  color: #444;
}

#add-seed{
  position:fixed;
  bottom: 5px;
  left: 35px;
  z-index: 20;
}

#dialog{
  position: fixed;
  z-index: 20;
  bottom: 40px;
  left:35px;
  width:700px;
  height:250px;

  display:none;
}

#overlay{
  position:fixed;
  z-index: 19;
  top:0;
  left:0;
  background-color: white;
  opacity:0.8;

  display:none;
}

#zoom-slider {
  position: fixed;
  bottom: 0px;
  right: 200px;
  background-color: white;
}

#zoom-slider label{
  position: absolute;
  right: 80px;
  padding: 10px;
  background-color: white;
}

#zoom-slider input{
  width: 80px;
  padding: 10px 0;
}

#updateFringeAutomatically{
  color: #444;
  background-color: white;
  padding: 7px 16px;
  border-radius: 5px;
}

#updateFringeAutomatically:hover{
  color: white;
  background-color: #2fa4b2;
}

#updateFringeAutomatically.on{
  color: white;
  background-color: #2c7fb8;
}

#updateFringeAutomatically.on:hover{
  background-color: #2fa4b2;
}

#core-separator {
	shape-rendering:crispEdges;
}

#core-separator:hover {
  cursor: row-resize;
}

#fringe-separator:hover {
  cursor: col-resize;
}

#paper-menu {
  position: absolute;
  z-index: 10;
  left: -1000px;
  top: 0px;
  list-style-type: none;
  padding: 0px;
  margin: 0px;
  display: none;
  opacity: 0;
  border-color: #a0a0a0;
  box-shadow: 0 0 10px #a0a0a0;
}

#paper-menu li {
  width: 25px;
  height: 25px;
  background-color: #f0f0f0;
  text-align: center;
  position: relative;
}

#paper-menu li span {
  position: absolute;
  top: 4px;
  left: 4px;
}

#paper-menu li.active {
  background-color: #c0c0c0;
}

#paper-menu li:hover {
  -webkit-box-shadow:inset 0px 0px 0px 1px #909090;
  -moz-box-shadow:inset 0px 0px 0px 1px #909090;
  box-shadow:inset 0px 0px 0px 1px #909090;
  cursor: pointer;
}

#fringe-slider-toggle {
  position: absolute;
  background-color: rgb(223, 111, 95);
  padding: 6px;
  border-radius: 20px;
  color: white;
  cursor: pointer;
}

#fringe-slider-toggle:hover {
  background-color: rgb(225, 88, 69);
}

.link {
  opacity: 0;
  stroke-width: 1px;
}


/*/////////////////  Side bar   ///////////////////////*/

#sidebar{
  position:fixed;
  top: 0;
  right: 0;
  height:100%;
  width:10%;
  min-width: 180px;
  background-color: #eee;
}

/* top right menu */

#top-menu{
  z-index:10;
}

#top-menu ul {
  z-index: 10;
  text-align: left;
  display: inline;
  margin: 0;
  padding: 0;
  width: 100%;
  list-style: none;
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}
#top-menu ul li {
  z-index: 10;
  display: inline-block;
  margin-right: -4px;
  position: relative;
  padding: 15px;
  width:100%;
  background: #2c7fb8;
  color: #fff;
  cursor: pointer;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}

#top-menu ul li ul {
  padding: 0;
  position: absolute;
  top: 48px;
  left: 0;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  display: none;
  opacity: 0;
  visibility: hidden;
  -webkit-transiton: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -ms-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  -transition: opacity 0.2s;
}
#top-menu ul li ul li { 
  display: block;
  background-color: #418CBF;
  font-size: 95%; 
}

#top-menu ul li ul li a{
  color: white;
  text-decoration:none;
}

#top-menu ul li ul li:hover {
 background: #2fa4b2;
}

#top-menu ul li:hover ul {
  display: block;
  opacity: 1;
  visibility: visible;
}


/* data-selector (3 checkboxes) */

#sideviews ul{
  list-style: none;
  margin:0;
  padding:0;
}

#sideviews ul li{
  padding-left: 15px;
  padding-bottom: 2px;
  cursor:pointer;
}

#sideviews ul li{
  font-size: 95%;
}

#data-selector ul li:first-child{
  padding-bottom: 5px;
  font-size: 100%;
}

#sideviews ul li:hover{
  background-color: white;
}

#data-selector ul li:first-child:hover{
  background-color: #eee;
}

#data-selector{
  margin-top:5px;
  padding: 7px 0;
}

/*   list of authors   */

ul#authors-list{
  padding: 10px 0;
  background-color: #e5e5e5;
}

ul#authors-list li:hover{
  background-color: #f6f6f6;
}

/*   histogram of publication years   */

#publication-years-wrapper{
  position:fixed;
  bottom:0;
  right:0;
  z-index: 5;

  width:10%;              /* same as sidebar */
  min-width: 180px;       /* same as sidebar */
  background-color: #eee; /* same as sidebar */

  font-size: 90%;
}

#publication-years-wrapper .bar rect {
  fill: #2c7fb8;
  shape-rendering: crispEdges;
}

#publication-years-wrapper .bar rect:hover {
  fill: #2fa4b2;
}

#publication-years-wrapper .bar text {
  fill: #fff;
}

#publication-years-wrapper .axis path,
#publication-years-wrapper .axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

#publication-years-wrapper .tick{
  font-size: 70%;
}


/* typeahead */

.typeahead,
.tt-query,
.tt-hint {
  width: 596px;
  height: 30px;
  padding: 8px 12px;
  border: 2px solid #ccc;
  -webkit-border-radius: 8px;
     -moz-border-radius: 8px;
          border-radius: 8px;
  outline: none;
  color:#333;
}

.typeahead {
  background-color: #fff;
  box-shadow: 0 5px 10px rgba(0,0,0,.25);
}

.typeahead:focus {
  border: 2px solid #0097cf;
}

.tt-query {
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.tt-hint {
  color: #999
}

.tt-dropdown-menu {
  width: 622px;
  padding: 8px 0;
  background-color: #fff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.2);
  -webkit-border-radius: 8px;
     -moz-border-radius: 8px;
          border-radius: 8px;
  -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
     -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
          box-shadow: 0 5px 10px rgba(0,0,0,.2);
}

.tt-suggestion {
  padding: 3px 20px;
}

.tt-suggestion.tt-cursor {
  background-color: #eee;
}

.tt-suggestion p {
  margin: 0;
}