.container{
      
  max-width:1800px;
  margin-top:1em;

}

.leftnavbar{
    display: inline-block;
    width: 20%;


}
body {
    /*
    background-image: url("/images/golden-gate-bridge.jpg");
    background-size:100%;
    background-position:bottom;
    background-repeat: no-repeat; */
   

}

#frontpagebubble {
    margin-top: 1rem;
}

#topmenubar {
   font-family: 'acomaRegular', Arial, sans-serif;
    margin-top: 1rem;
    font-size: 14px;
    text-align: right;
    padding-right: 30px;
}

#introtext, h1 {
   font-family: 'acomaRegular', Arial, sans-serif;
    margin-top: 7rem;
    font-size: 100px;
    text-align: center;
}

h1 em, h2 em
{
    color: #77c18d;
    font-family: Georgia, Times;
    font-size: 75px;
    font-weight: normal;
    font-style: italic;
    text-transform: none;
}

.menu ul {
    list-style: none;
        display: block;
   
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
   
}

/*nicolasgallagher.com/pure-css-speech-bubbles/demo/ */
.triangle-border
{
    position: relative;
    padding: 15px;
    margin: 1em 0 1.5em;
    border: 5px solid #77c18d;
     color: #77c18d;
    background: #fff;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
     font-family: Georgia, Times;
      font-style: italic;
     
}

.triangle-border:before {
  content:"";
  position:absolute;
  bottom:-20px; /* value = - border-top-width - border-bottom-width */
  left:40px; /* controls horizontal position */
  border-width:20px 20px 0;
  border-style:solid;
  border-color: #77c18d transparent;
  /* reduce the damage in FF3.0 */
  display:block;
  width:0;
}

/* creates the smaller  triangle */
.triangle-border:after {
  content:"";
  position:absolute;
  bottom:-13px; /* value = - border-top-width - border-bottom-width */
  left:47px; /* value = (:before left) + (:before border-left) - (:after border-left) */
  border-width:13px 13px 0;
  border-style:solid;
  border-color:#fff transparent;
  /* reduce the damage in FF3.0 */
  display:block;
  width:0;
}


.menu li {
    display: inline-block;
    padding: 7px 0;
    margin-right: 40px;

   
}

#blogarea{
     /* border: 1px solid rgba(44, 44, 43, 1);
    background-color: rgba(255, 255, 255, 1);*/
}

.menu li a {
          
    -webkit-font-smoothing: antialiased;
    font-size: 24px;
    color: #000000;
    line-height: 1.8em;
     font-family: 'acomaRegular', Arial, sans-serif;
     text-decoration: none;

    
 
}

.menu li p {
          
    -webkit-font-smoothing: antialiased;
    font-size: 24px;
    color: #000000;
    line-height: 1.8em;
     font-family: 'acomaRegular', Arial, sans-serif;
     text-decoration: none;
     margin-bottom: 1rem
    
 
}


.menucircles{
    width: 30px;
    height: 30px;
    position: absolute;
    left: 45%;
}
.menucircle{
     width: 50%;
      height: auto;
      -webkit-border-radius: 50%;
      -moz-border-radius: 50%;
      border-radius: 50%;
padding-top: 50%;
background: #77c18d;

}
.navbar{
    background-color: white;
}
 .has-docked-nav .navbar {
    position: fixed;
    top: 0;
   width:80%
   
     }
 
#sidebar ul{
    list-style-type:none;
} 

#sidebar li{
    margin-bottom:2.5rem;
    
} 




#sidebar ul a
{
  
    color:black;
     text-decoration: none;
    
}

#sidebar .selecteditem
{
    color: lightslategray;
    padding-left: 1em;
      border-left: 1px solid #77c18d;
 }
#sidebar ul div
{
    transition: text-indent 0.3s;
    -webkit-transition: text-indent 0.3s; 
    width:100%;
   
  
    
}

#sidebar ul div:hover
{
      color: #77c18d;
      text-indent: 2px;
  }    

#sidebar ul div:hover a
{
      color: #77c18d;
   
  }  

#content{
    border-left:1px solid #c5c0c0;
    padding-left: 30px;
    padding-top:15px;
}


.navbar-link{
    padding-left:1.5em;
    padding-right:1.5em;
    color: #77c18d;
    text-decoration:none;

}

.chart_title{
    font-family: sans-serif;
	font-size: 14px;
    color: lightslategray;
 
    
}

#page_footer {
    text-align: center;
}