/*OSEP styles for buttons etc. from Alex */

html{font-size:100%}html *{max-height:1000000px}body{font:14px/1.5 Arial,sans-serif;color:#000}body{font-size:.875em}button,input,textarea{font:99% Arial,sans-serif;border-radius:0}button[disabled]{color:#888;cursor:default}button{display:inline-block;margin-right:10px;border:1px solid #002158;border-radius:3px;padding:2px 8px 3px;background-color:#fff;vertical-align:top;line-height:1.5;font-size:1em;transition:background-color .25s,color .25s;cursor:pointer}button:focus,button:hover{background:#002158;color:#fff;outline:0}

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin: 0;
  font-size:12px;
}

input  {
	margin-right:5px;
}

/*tree of life svg*/
.links {
  fill: none;
  stroke: #000;
}

.link-extensions {
  fill: none;
  stroke: #000;
  stroke-opacity: .25;
}
/*species names round the outside. trade off between readability without zooming in and avoiding overlaps of neighbouring species*/
.labels {
	font-family: Verdana,Arial,"Helvetica Neue", Helvetica,  sans-serif;
	font-size: 4px;
}

.link--active {
/*Phil prefers black to red*/
  stroke: #000 !important;
  stroke-width: 2.5px;
}
.link-hc--active {
/*different colour highlight on black bg in high contrast theme*/
  stroke: #fff !important;
  stroke-width: 2.5px;
}

.link-extension--active {
  stroke-opacity: .6;
}

.label--active {
  font-weight: bold;
}

.sliderLabel {
    text-align: center;
}

.dinner {
    font-size: 5px;
}

#ingredientsButtonsDiv {
	position:absolute;
	left:74%;
	height:91px;
	background-color: #f1f5fb;
	width:205px;
	border-left:1px solid;
	border-top:1px solid;
	border-right:1px solid;
	padding:2px;
	padding-top:7px;
	top:0px;
}

#ingredientsDiv {	
	position:absolute;
	left:74%;
	top:100px;
	width:205px;
	border:1px solid;
	max-height:700px;
	overflow:auto;
	padding:2px;
	background-color: #f1f5fb;
	font-size:13px;
}

button.accordion {
    background-color: #f1f5fb;
    color: #444;
    cursor: pointer;
    padding: 7px;
	position:relative;
    width: 95%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 13px;
    transition: 0.4s;
	border-radius:0px;
}

button.accordion.active {
    background-color: #002158; 
	color:white;
}
button.accordion:focus, button.accordion:hover {
	background-color: #003285; 
	color:white;
}

div.panel {
	margin-top:6px;
	margin-bottom:6px;
    padding: 0 0px;
    display: none;
    background-color: #f1f5fb;
	
	font: 11px ;
	
}


#zoom_in {
	position:absolute;
	left:10px;
	top:20px;
}
#zoom_out {
	position:absolute;
	left:40px;
	top:20px;
}
#panLeft {
	position:absolute;
	left:68px;
	top:20px;
}
#panRight {
	position:absolute;
	left:102px;
	top:20px;
}
#panUp {
	position:absolute;
	left:136px;
	top:20px;
}
#panDown {
	position:absolute;
	left:170px;
	top:20px;
}
#saveImage {
	position:absolute;
	left:10px;
	top:60px;
}
#shadeKingdoms {
	position:absolute;
	left:10px;
	top:100px;
}

#csvDiv {
	width:600px;
	position:absolute;
	top:350px;
	left:10px;
	border: 1px solid;
	padding:4px;
	background-color: #eee;
	box-shadow: 10px 10px 5px #888888;
	display:none;
}
#csvDisplay {
	width:99%;
}
#saveList {
	margin-left:3px;
}
#clearList {
	
	margin-right:3px;
}

#info {	
	font-size:13px;
	background-color:white;
	border:1px solid;
	display:none;
	padding:5px;
	padding-right:10px;
	background-color: #f1f5fb;
	position:absolute;
}

#pie {
	position:absolute;
	opacity:0.3;
	z-index:-100;
}

#findBtn
{
	display:inline;
}
#findWordBox
{
	display:inline;
}