html {
  float: left;
    margin: 0;
    padding: 0;
}

@font-face {
  font-family: "FuturaBook";
src: url(fonts/FuturaLT-Book.ttf);
}

body {
    /*padding: 0 10px 5em; */
    max-width: 615px;
/*    max-width: 35em; */
    margin: 0 auto;
/*    font-family: "PT Serif", serif; */
            font-family: "FuturaBook", FuturaBook;
    font-size: 16px;
    line-height: 1.333;
    text-rendering: optimizeLegibility;
}

#bottom{
  /* Control panel: */
  color: #666;
  /*border-top: 1px #ccc dashed; */
background: #000; 
            /*          position: relative; */
            /* 1093 - 700 for top = 393 */
height: 393px;
width: 100%;
       z-index: 1; 
       /*            position: absolute; */
}

#BottomInteractive {
float: left;
width: 84%;
height: 393px;
        margin-left: 8%;
        margin-right: 8%;
        margin-top: 4%;
}

/* 120 pixels for +Bass and text div */

#ButtonText{
width: 100%;
height: 120px;
}

#ButtonDiv{
width: 24.24%;
height: 99.94px;
float: left;
margin-bottom: 0;
margin-right: 5%; 
/* fallback in case browser doesn't support rgba */
border-right: 1px solid #ff7100;
/* same in rgba format */
border-right: 1px solid rgba(255,113,0,.4);
-webkit-background-clip: padding-box; /* for Safari */
background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
}

#addBassButton {
  /*    position:relative; */
       /* todo set to percentage */

       /*width: 97.94px;  */
width: 97.94px; 
       /*width: 6.15% */
height: 54.94px;
background: #b6da0f;
            border-radius: 7px;
border: 0; 
        margin-top: 15%;
/*        margin-right: 5%;
        margin-bottom: 7%; */
        /*        margin-left: 8%; */
/*clear: both; */
}


#CaptionDiv{

height: 100%;
width: 71.76%;
margin-left: 29.24%;
border-left: 5px solid gray;
/*display: table; */

}

#Caption{
/*display: table-cell;
         vertical-align: middle;
         */

}
/* 46 */
#BassMinnowsRow{
height: 90px;
width: 100%;
}

#FleasAlgaeRow{
height: 90px;
width: 100%;

}

#RecoveryTimeRow{
height: 46px;
width: 100%;
}


#MinnowsBar{
height: 10px;
width: 50%;
}

#RecoveryImage{
width: 78%;
height: 25px;
margin-left: 22%;
}

#Recover{
height: 46px;
width:22%;
float:left;
}

#BassBar{
height: 10px;
width: 50%;
}
#FleasBar{
height: 10px;
width: 50%;
}
#AlgaeBar{
height: 10px;
width: 50%;

}

#Fleas{
height: 100%;
width: 57.5%;
float: left;
}

#Algae{
height: 100%;
width: 50%;
       margin-left: 57.5%;
}

#Minnows{
height: 100%;
width: 50%;
       margin-left: 57.5%;
}

#Bass{
height: 100%;
width: 57.5%;
float: left;
}

#BassRow{
width: 100%;
height: 21px;
margin-top: 8%;
}

#FleasRow{
width: 100%;
height: 27px;
margin-top: 8%;
}

#AlgaeRow{
width: 100%;
height: 22px;
margin-top: 10%;
}

#MinnowsRow{
width: 100%;
height: 18px;
margin-top: 9%;
}

#fleas1{
width: 36px;
height: 27px;
float: left;
}

#fleas2{
width: 36px;
height: 27px;
margin-left: 40px;
}
#fleas3{
width: 36px;
height: 27px;
margin-left: 80px;
}

#fleas4{
width: 36px;
height: 27px;
margin-left: 120px;
}
#fleas5{
width: 36px;
height: 27px;
margin-left: 160px;
}

#bass1{
width: 47px;
height: 21px;
float: left;
}

#bass2{
width: 47px;
height: 21px;
margin-left: 47px;
float:left;
}
#bass3{
width: 47px;
height: 21px;
margin-left: 47px;
}
#bass4{
width: 47px;
height: 21px;
margin-left: 47px;
}
#bass5{
width: 47px;
height: 21px;
margin-left: 47px;
}

#algae1{
width: 41px;
height: 22px;
float:left;
}
#algae2{
width: 41px;
height: 22px;
margin-left: 44px;
}
#algae3{
width: 41px;
height: 22px;
margin-left: 44px;
}
#algae4{
width: 41px;
height: 22px;
margin-left: 44px;
}
#algae5{
width: 41px;
height: 22px;
margin-left: 44px;
}

#minnows1{
width: 45px;
height: 18px;
float: left;
}
#minnows2{
width: 45px;
height: 18px;
margin-left: 380px;
}
#minnows3{
width: 45px;
height: 18px;
margin-left: 380px;
}
#minnows4{
width: 45px;
height: 18px;
margin-left: 380px;
}
#minnows5{
width: 45px;
height: 18px;
margin-left: 380px;
}

#addBassButton:hover {
background: #363636;
cursor: pointer;
}

#addBassButton[disabled] { 
  pointer-events: none;
background: #c2c2c2;
}

#Caption{
color: white;
}

#BassLabel{
color: white;
}
#MinnowsLabel{
color: white;
}
#FleasLabel{
color: white;
}
#AlgaeLabel{
color: white;
}
#RecoveryTimeLabel{
color: white;
}


/* SVG */
path { stroke: black; stroke-width: 2; fill: none; }
svg {
/*    margin: 1.5em auto; */
    display: block;
}

svg .plot {
  display: none;
  margin: 1em;
}
svg .plot thead {
  font-size: 110%;
  color: #888a85;
}
svg .plot em {
  font-variant: small-caps;
  font-style: normal;
}
svg .plot th {
  padding-right: 1em;
  font-style: italic;
}