/* Body css is just to get font and set base font size*/
body{
  font-family: "Karla", Arial, sans-serif;
  color:black;
  margin: 0px;
  padding: 0px;
  font-size: 0.8em;
}

/* Button and hyperlink css <a> to set font to black when not clicked */

button, a{
  color: black;
  border:none;
  text-decoration: none;
  margin: 0px;
  padding: 0px;
  
}

.nav_home{
  position: absolute;
  left: 0px;
  top: 0px;
}

.nav_button{
  color: #b5e3d8
}
.nav_button:hover{
  color: #b5e3d8;

}



/* Navigation bar css*/

.logo{
  width: 3em;
  position: relative;
  left:1em;
  padding-top:0.7em;
  z-index: 11;
}

.logo:hover{
  opacity: 0.6;
  filter: alpha(opacity=60); /* For IE8 and earlier */
}

/* Filler bar initial width*/
#nav_filler{
  width: 48%;
}

/* Dont do anything when hovered over*/
#nav_filler:hover{
  color: black;
  background-color: #00b1b0;
}

/* Nav bar positioning and style*/
.nav{
  text-transform: uppercase;
  font-size: 0.8em;
  display: inline-block;
  padding: 0.5rem 0rem;
  position: relative;
  background-color: #00b1b0;
  margin: 0px;
  width: 10%;
  text-align: center;
  color: white;
}

/* Go white when hovered*/
.nav:hover{
  background-color: #008A89;
  color: #b5e3d8;
/*  opacity: 0.4;
*/}
#nav_active{
  background-color: #008A89;

}

/* Box that buttons are in, fixed so it floats, removed padding/margin */
nav {
  z-index: 10;
  margin: 0px;
  background-color: #00b1b0;
  position: fixed;
  width: 100%;
  padding: 0px;

/*  margin-bottom: 1em;
  padding-bottom: 1em;*/
/*  float: inline-block;
*/
}

/* Media queries for resizing. Worry about this later when we make the pages (I forgot the word, I think it starts with "R"?*/


/* If width is less then 50em (800px) change sizes*/
@media(max-width: 50em){
  #nav_filler{

    width:30%;
  }
  .nav{
    width: 15%;
  }
}

/* If width is less then 26em (416px) change sizes*/
@media(max-width: 26em){

  #nav_filler{
    width: 19%;
  }
    .nav{
    width: 19%;
  }
}

/* If width is less then 20em (300ish px) change sizes*/
@media(max-width: 20em){

  #nav_filler{
    width: 0%;
    margin: -1em -1em -1em 0.7em ;
  }
    .nav{
    width: 100%;
    border-bottom: 1px solid #fff;
  }
  nav{
    position: relative;
  }


}