/* General styling */

html {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}



html, body, iframe {
margin:0;
padding:0;
border:0;
}
body, select, input, textarea, button {
 font-family: "Noto Serif SC", serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
}

.sidebar {
  height: 806px;
  width: 200px;
  position: fixed;
  left: 0;
  top: 0;
  padding-top: 0px;
  background-image: url("pond2.png");
}
.sidebar div {
  padding: 10px;
  font-size: 18px;
  display: block;
  color: #303f42; 
}
.body-text {
  margin-left: 200px;
  font-size: 18px;
}


body  {
  background-image: url("pond1.jpg");
}








p {
   color: #303f42;
  }


 h2 {
     color:#303f42;
 }

 

ulold {
  position: fixed;
  top: 0;
  width: 100%; margin: 0;
  padding: 0; list-style-type: none;
}

ul {list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  position: fixed;
  top: 0;
  width: 100%;
  background-image: url("paper1.jpg");
}

ul2 {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

ttl{
        text-align: left;  padding-top:00px;
  padding-left:50px; color: #328fe9;
}

ttl a{
    display: block;
  padding-top: 40px;
  padding-right:50px;
  font-weight:bold;
  color: #328fe9;
}


li {
  float: right; 
}

li a {
  display: block;
  padding-top:10px;
  padding-right:15px;
  padding-left:15px;
  padding-bottom:10pt; 
  font-weight:bold;
  color:black;
}

liy {
  float: left;
}

liy a {
  display: block;
  padding-top: 20px;
  padding-left:50px;
  font-weight:bold;
  color: #328fe9;
}

a{
    text-decoration: none;
  color:#303f42;
}

a:visited{
    color: #303f42
    ;
}

a:hover {
  text-decoration: underline;
}


 .collapsible {
  background-color: transparent;
  
  cursor: pointer;
  padding-top: 10px; padding-left: 0px; 
  width: 100%;
  border: none;
 text-align: left; 
  outline: none;
  font-size: 18px;

}

 .collapsible:hover {
  background-color:#c0cdc6; 
}

.active {
  background-color:  #e6e9e7; 
}
 
.collapsible:after {
  /* content: '\002B'; */ 
    content:url(fish2.png);
  float: right;
  margin-left: 5px; 
}



.active:after {
    /* content: "\2212"; */
    content:url(fish3.png);
    vertical-align:40px;
}

.content {
  padding: 0 18px; 
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

span.raise {
  vertical-align:-10px;
}



 .collapsible2 {
  background-color: transparent;
  
  cursor: pointer;
  padding-top: 10px; padding-left: 0px; 
  width: 100%;
  border: none;
 text-align: left; 
  outline: none;
  font-size: 18px;

}

 .collapsible2:hover {
  background-color:#c0cdc6; 
}

.active {
  background-color:  #e6e9e7; 
}
 
.collapsible2:after {
  /* content: '\002B'; */ 
    content:url(fish2.png);
  float: right;
  margin-left: 5px; 
}



.active:after {
    /* content: "\2212"; */
    content:url(fish3.png);
    vertical-align:40px;
}

.content {
  padding: 0 18px; 
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

span.raise {
  vertical-align:-10px;
}