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;

}


.indexbar .switchtab {

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

} @media screen and (min-width:851px) {

   .indexbar .switchtab { /* つまりswitchtab のstyleを上書きしたいってこと! */
       /* 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;
   }

}

.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.re:hover {

   border-color: #F15A22;

} .sidebar a.ye:hover {

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

} @media screen and (min-width:851px) {

   .sidebar a.gr.active, .sidebar a.pl.active {
       border-color: rgb(97,190,54);
       background-color: rgb(226,239,205);
   }
   .sidebar a.re.active {
       background-color: #fce7df;
       border-color: #F15A22;
   
   }
   .sidebar a.ye.active {
       background-color: #fcf9df;
       border-color: rgb(218, 208, 70);
   }

}

.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;
   }
   .sidebar a{
       border-radius: 10px;
       border-left: solid 2px white;
   }
   .sidebar-enabler .indexbar {
       padding-right: 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;

}