/*  Responsive Design Settings - 
    Eventually this will need to be site-wide */
    
* {
  box-sizing: border-box;
}

/* Style the button that is used to open and close the collapsible content */ 

.cads-collapsible-button { 
    background-color: white; 
    color: #1a7b30; 
    cursor: pointer; 
    padding: 10px; 
    width: 100%; 
    border: none; 
    text-align: left; 
    outline: none; 
    font-size: 15px; 
} 

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */ 

.active, 
.cads-collapsible-button a:hover, 
.cads-collapsible-button a:active,
input:focus { /* can add '.active' to keep bg color */ 
    // color: white; 
    // background-color: #c1e1c1; /* Pastel Green */ 
    // background-color: #ecffdc; /* Nyanza */
    background-color: #eff8ef; /* very pale green (Roz) */
    text-align:left;
    border-radius: 8px; 
    -moz-border-radius: 8px; 
    -webkit-border-radius: 8px;
} 

/* Style the collapsible content. Note: hidden by default */ 

.cads-collapsible-content { 
    padding: 0px 18px 18px; 
    display: none; 
    overflow: hidden; 
    background-color: white; 
    text-align: left;
    
} 

.cads-collapsible-button:after { 
    // content: '\02795'; /* Unicode character for "plus" sign (+) */ 
    // font-size: 13px;
    font-size: 32px;
    color: #1a7b30; 
    content: '\25bc'; /* Unicode character for down triangle */
    float: right; 
    margin-left: 5px; 
    position: relative; 
    top: -10px; 
} 

.active:after { 
    // content: "\2796"; /* Unicode character for "minus" sign (-) */
    content: '\25b2'; /* Unicode character for up triangle */ 
    color: #1a7b30; 
}