Template:Kyoto/css/sidebarCSS

.sidebar-enabler{

   display: flex;
   align-items: baseline;
   justify-content: space-between;
   margin-right: 12.5vw;
   margin-left: 5vw;
   text-align: justify;

} .sidebar-enabler .sidebar{

   font-size: 1.1rem;
   flex-shrink: 0;
   align-self: baseline;
   position: sticky;
   width: 20%;
   min-width: 190px;
   max-height: calc(100vh - 130px);
   max-width: 250px;
   top: 110px;
   padding-left: 15px;
   padding-right: 15px;
   padding-bottom: 15px;
   margin-right: 3%;
   /* margin-left: 50px; */
   border: solid 1px rgb(96, 96, 96);
   line-height: 1.3;
   border-top-left-radius: 20px;
   border-bottom-right-radius: 20px;

   overflow-y: scroll;

} .sidebar-enabler .indexbar {

   font-size: 1.25rem;
   font-family:'Arima Madurai', cursive;
   font-weight: bold;
   flex-shrink: 0;
   align-self: baseline;

   position: sticky;
   width: 20%;
   min-width: 200px;
   max-height: calc(100vh - 130px);
   top: 110px;
   overflow-y: scroll;

   padding: 5px 0 5px 15px;
   margin: 0;
   line-height: 1.3;

   display: flex;
   justify-content: space-between;
   flex-direction: column;

}

a.gotop{

   background-color: rgb(239, 253, 218);
   color: black;
   text-decoration: none !important;
   display: flex;
   align-items: center;
   text-align: center;

   font-size: .75em;
   margin: 5px auto;

   width: 6em;
   height: 6em;
   margin-bottom: 1.25em;
   border-radius: 3em;

   box-shadow: 0px 0px 2px 2px rgba(0,0,0,0.3);

} a.gotop:hover {

 box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.2);

}

.indexbar>.switchtab { /* つまりswitchtab のstyleを上書きしたいってこと！ */

   cursor: pointer;
   /* flex-basis: 24%; */
   text-align: left;
   /* display: flex; */
   /* align-items: center; */
 
   /* border: solid 2px rgb(218, 208, 70); */
   /* background-color: #fffdeb; */
   /* border: none; */
   border-bottom-right-radius: 0px;
   border-top-right-radius: 0px;
   border-right: none;
   border-width: 2px;

   margin-bottom: 1.25em;
   padding: 15px ;
   height: 5em;

}

.indexbar>div {

   box-shadow: 0 0 5px 1px rgba(0,0,0,0.3);

} .indexbar>a {

   text-align: center;
   box-shadow: 0 0 5px 1px rgba(0,0,0,0.3);

} .indexbar>.switchtab:nth-child(1) {

   box-shadow: -6px 2px 3px 2px rgba(0,0,0,0.3);

} .indexbar>.switchtab:nth-child(2) {

   box-shadow: -4px 2px 3px 2px rgba(0,0,0,0.3);

} .indexbar>.switchtab:nth-child(3) {

   box-shadow: -1px 2px 2px 1px rgba(0,0,0,0.3);

} .indexbar>.switchtab:nth-child(4) {

   box-shadow: -1px 1px 1px 1px rgba(0,0,0,0.3);

} .indexbar>.sactive {

   background-color: #fffdeb;

}

.sidebar>.myp {

   font-size: 1.2rem;
   font-family: 'Raleway', sans-serif;
   font-weight: bold;
   margin-top: 20px;
   margin-bottom: 20px;
   margin-left: auto;
   margin-right: auto;
   text-align: center;

} .sidebar ul{

   text-align: left;
   padding: 0;
   margin:0;
   margin: 0;
   list-style-type: none;

} .sidebar li{

   margin: 0px 0px 5px 0px;

} /* .sidebar ul ul {

   margin: 0px 30px 30px 0px;

} */

.sidebar a{

   text-decoration: none;
   color: black;
   display: block;
   font-weight: bold;
   padding: 5px 10px 3px 10px;
   border: solid 2px white;
   border-left: none;
   border-bottom-right-radius:10px;
   border-top-right-radius: 10px;

} .sidebar a.gr:hover, .sidebar a.pl:hover{

   border-color: rgb(97,190,54);

} .sidebar a.gr.active, .sidebar a.pl.active {

   border-color: rgb(97,190,54);
   background-color: rgb(226,239,205);

} .sidebar a.re:hover {

   border-color: #F15A22;

} .sidebar a.re.active {

   border-color: #F15A22;
   background-color: #fce7df;

} .sidebar a.ye:hover {

   border-color: rgb(218, 208, 70);

} .sidebar a.ye.active {

   border-color: rgb(218, 208, 70);
   background-color: #fcf9df;

} .sidebar ul ul a{

   font-size: 0.825em;
   padding-left: 30px;

} .sidebar ul ul ul a {

   /* font-size: 0.9em; */
   font-weight: normal;
   padding-left: 70px;

} .maincontents{

   display: block; /* 空にしないために */

} @media screen and (max-width:850px) {

   .sidebar-enabler{
       display: block;
   }
   .sidebar-enabler .sidebar, .sidebar-enabler .indexbar{
       position: static;
       max-width: 100%;
       width: 75%;
       margin-left: auto;
       margin-right: auto;
       border: solid 3px gray;
       border-radius: 15px;
   }

}

/* unused? */ .right-text-aligner {

   font-size: 1.3rem;
   margin-left: 250px;
   margin-right: 7%;
   padding: 2em;
   padding-right: 0;
   /* border: 2px solid red; */
   text-align: justify;

}