/* DO NOT MODIFY THIS FILE */

/******************************************************************************* 
 * CSS STYLE FILE FOR THE WEBSITE OF THE DEPARTMENT OF MATHEMATICS, SHIMANE U. *
 * DO NOT MODIFY THIS FILE, BUT SEE THE SEPARATE SYLESHEET                     *
 * custom.css FOR FORMATTING THE CONTENTS OF THE WEBSITE.                      *
 * LAST MODIFIED ON 2021-APRIL-5                                               *
 *******************************************************************************/

/*************************************
 * COLOR DESIGN ELEMENTS OF SU LOGO  *
 *************************************
 * BLUE:   #005ca2  RGB(0,92,162)    *
 *                                   *
 * ORANGE: #ea771d  RGB(234,119,29)  *
 *************************************
 * THE CENTER CANVAS IS 1200 px WIDE *
 * CENTER IMAGES ARE 1200 x 300 px   *  
 * AND 1200 x 150 px (SMALL VERSION) *
 * PICTOGRAMS ARE FROM GOOGLE:       *
 * https://fonts.google.com/icons    *
 *************************************/
 
 /********************************
  * TABLE OF CONTENTS            *
  ********************************
  *  1. CSS RESET                *
  *  2. H1 H2 H3 H4 DECLARATIONS *
  *  3. HEADER                   *
  *  4. SEARCHBAR                *
  *  5. FOOTER                   *
  *  6. TOP NAVIGATION MENU      *
  *  7. LEFT NAVIGATION MENU     *
  *  8. NAVIGATION SUBMENU       *
  *  9. CONTENTS                 *
  * 10. NEWS                     *
  * 11. LANDING PAGES            *
  * 12. STAFF                    *
  * 13. MEMOIRS                  *
  * 14. TIMETABLE                *
  * 15. MASTERS                  *
  * 16. LINKS                    *
  * 17. ENGLISH PAGES            *
  * 18. LISTS WITH SEPARATOR     *  
  * 19. OTHER                    *********
  *  A. MEDIA QUERIES FOR SMALL SCREENS  *
  *  B. MEDIA QUERIES FOR MOBILE VERSION *
  ****************************************/
 
/****************
 * 1. CSS RESET *
 ****************/
html {
  background-color: #005ca2;
  font-size:100%;
  text-size-adjust: none;
  -webkit-text-size-adjust: none; /* Disable text resizing on iOS devices */
  -moz-text-size-adjust: none;
  -ms-text-size-adjust: none;
}

textarea, input, button, select {
  font-family: inherit;
  font-size: inherit;
}

/* :focus {
  outline-style: dotted;
  outline-color: #ea771d;
} */
 
body {
  background-color: #e5eef5; /* EQUIVALENT TO RGBA(0,92,162,0.1) on WHITE background. */
  margin:0;
  font-family: 'Noto Sans', 'Noto Sans JP', sans-serif;
  font-weight: 400;
  /* font-size: 16px; /* DEFAULT IS NOT SET, INHERITED FROM BROWSER DEFAULT, IT IS MAYBE 18px? */
  color: #005ca2;
  text-size-adjust: none;
  -webkit-text-size-adjust: none; 
  -moz-text-size-adjust: none;
  -ms-text-size-adjust: none;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

a {
  text-decoration:none;
  color: #005ca2;
}

/* The basic font Noto Sans JP does not contain smallcaps fonts. */
.smallcaps {
  font-family: 'Noto Sans', sans-serif;
  font-weight: 400;
  font-variant: small-caps;
}

.bf {
  font-weight: 700;
}

ul {
  padding:0;
  border:0;
  margin:0;
  list-style-type:none;
}

/*******************************
 * 2. H1 H2 H3 H4 DECLARATIONS *
 *******************************
 * THE COLOR IS THE SAME BLUE  *
 * JUST IT IS TRANSPARENT      *
 * AND THUS MIXES WITH THE     *
 * WHITE BACKGROUND            *
 *******************************/

body h1 {
  background:rgba(0,92,162,0.1);
  background:linear-gradient(to right,rgba(0,92,162,0.1),white);
  font-size: 1.9em; /* The news section is too big on a standard iPhone */
}

body h2 {
  background:rgba(0,92,162,0.2);
  background:linear-gradient(to right,rgba(0,92,162,0.2),white);
}

body h3 {
  background:rgba(0,92,162,0.3);
    background:linear-gradient(to right,rgba(0,92,162,0.3),white);
}

body h4 {
  background:rgba(0,92,162,0.4);
    background:linear-gradient(to right,rgba(0,92,162,0.4),white);
}

/*************
 * 3. HEADER *
 *************/
 /* This sets up the infinite header */
#myHeader {
  background-color: white;
  padding-bottom:0.5vw;
  padding-top:0.25vw;
  padding-left:0.25vw;
  padding-right:0.25vw;

}

#myHeader .leftcolumn {
  float:left;
  width: 50%;
}

#myHeader .rightcolumn {
  float:left;
  width: 50%;
  text-align:right;
}

#myHeader img {
  display:block;
  width:100%;
}

#myHeader a:hover {
  text-decoration:underline;
}

/****************
 * 4. SEARCHBAR *
 ****************/
 
#mySearchBar {
  display:flex;
  justify-content:center;
  padding-top:5px;
}

#myInput {
  color:#005ca2;
  border-radius:0;
  border: 1px solid #005ca2;
}

#myButton {
  padding:0;
  margin:0;
  color:white;
  background-color:#005ca2;
  border:0;
}

  
/*************
 * 5. FOOTER *
 *************/
 /* This sets up the infinite bottom footer */
#myFooter {
  background-color: #005ca2;
  color: white;
  padding-top:0.5vw;
  padding-bottom:0.25vw;
  padding-left:0.25vw;
  padding-right:0.25vw;
}

#myCopyright {
  padding-top:1em;
  text-align:center;
}

#myFooter .column {
  float:right;
  width:33.3333%;
  text-align:center;
}

#myFooter a {
  color: white;
}

#myFooter a:hover {
  text-decoration:underline;
}

#myFooter ul {
  display:inline-block;
  text-align:left;
}

#myFooter li.myLinkHead {
  /* margin-bottom:0.5em; */
}

#myFooter ul li.noshow {
  display: none;
}

/**************************
 * 6. TOP NAVIGATION MENU *
 **************************/
.rarrow {
  color: #ea771d;
}

.active {
  background-color: #ea771d;
  color: white; /* Using white has not enough contrast... */
}

#myTopnav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #005ca2;
  margin-bottom: 0.5vw;
  font-size:1.2em; /* Using 1.2em, NO linebreak when viewport width = 1024px (ipad). */
}

#myTopnav ul li {float: left; width: 33.3333%}

#myTopnav ul li a {
  display: block;
  color: white;
  text-align: center;
  padding: 1vw 0;
}

#myTopnav ul li a:hover {background-color: RGBA(255,255,255,0.05);
color: white;}

#myTopnav ul li a:hover.active {background-color: RGBA(255,119,29,0.95);
color: white;}

/* The following line controls the background under the arrow in active mode */
/* The magic color was found by using GIMP, and color picking */
#myTopnav ul li a:hover.active .rarrow {background-color: #f27624;
color: white;}

#myTopnav ul li a.active span.rarrow {background-color: #ea771d; color: white;}

#myTopnav ul li.noshow {
  display: none;
}

/***************************
 * 7. LEFT NAVIGATION MENU *
 ***************************/

#myLeftSubnav .leftcolumn {
  float:left;
  width: 20%;
  padding-right:1%;
  /* font-size:1.3em; */
}

#myLeftSubnav .rightcolumn {
  float:left;
  width: 79%;
}

#myLeftSubnav .leftcolumn ul {
  list-style-type: none;
  margin: 0;
  padding:0;
  overflow: hidden;
  background-color: #005ca2;
}

#myLeftSubnav .leftcolumn ul li {float: top}

#myLeftSubnav .leftcolumn ul li a {
  display: block;
  color: white;
  text-align: left;
  padding-top:0.5vw;
  padding-bottom:0.5vw;
  padding-left:1vw;
  text-decoration: none;
}

/* #myLeftSubnav .leftcolumn ul li a:hover:not(.active) {background-color: #ea771d;
color: white;} */

#myLeftSubnav .leftcolumn ul li a:hover:not(.active) {background-color: RGBA(255,255,255,0.05);
color: white;}

#myLeftSubnav .leftcolumn ul li a:hover.active {background-color: RGBA(255,119,29,0.95);} /*RGBA(234,119,29,0.95)*/

#myLeftSubnav .leftcolumn ul li a.active {background-color: #ea771d;}

#myLeftSubnav .leftcolumn .english_text {
  font-size:80%;
}

#myLeftSubnav .leftcolumn li p {
  margin:0;
  padding:0;
  border:0;
}

/*************************
 * 8. NAVIGATION SUBMENU *
 *************************
 
/*SUBNAV*/
#myRightColumnSubnav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  color: white;
  background-color: #005ca2;
}

#myRightColumnSubnav ul li {float: left; width: 25%;}

#myRightColumnSubnav ul li a {
  display: block;
  color: white !important;
  text-align: center;
  padding: 0.5vw 1vw;
  text-decoration: none;
}

#myRightColumnSubnav.juken6 ul li {
  width: auto;
  padding: 0 0;
}

#myRightColumnSubnav.juken6 ul li a {
  padding: 0.5vw auto;
}

/* #myRightColumnSubnav ul li a:hover:not(.active) {background-color: #ea771d;
color: white;} */

#myRightColumnSubnav ul li a:hover:not(.active) {background-color: RGBA(255,255,255,0.05);
color: white;}

#myRightColumnSubnav ul li a:hover.active {background-color: RGBA(255,119,29,0.95);
color: white;}

#myRightColumnSubnav ul li a.active {background-color: #ea771d;}
 
/***************
 * 9. CONTENTS *
 ***************/
 
.myCanvas {
  max-width:1200px;
  margin: 0 auto;
  /* background-color: RGBA(0,255,0,0.1); */ /*For debugging only */
}

#myCentralContent {
  padding-bottom:0.5vw;
  flex:1;
}

/* The .row class is not used explicitly, except for immediately after the columns the floats should be cleared. This can be done automatically by the following */
.row:after {
  content: "";
  display: table;
  clear: both;
}

#myHeroImage img {
  display:block; /* This removes the inline gap for fonts below the image */
  width: 100%;
  margin-top:0.5vw;
  margin-bottom:0.5vw;
}

#myPageContent {
  background: white;
  padding:0.5vw; /* DEFAULT IS padding: 0.5vw; */
  padding-left:2em;
  padding-right:2em;
}

#myPageContent a:hover {
  font-weight: 700;
}

/************
 * 10. NEWS *
 ************/
  
#myNews {
  text-align: center;
}

#myNews ul {
  display: inline-block;
  text-align: left;
  list-style-type: none;
  padding:0;
}

#myNews li {
  border-bottom: dotted;
  border-color: #005ca2;
  padding-bottom: 0.25em;
  padding-top: 0.25em;
}

/*********************
 * 11. LANDING PAGES *
 *********************/
#myResearcherLanding .column {
  box-sizing: border-box;
  float: left;
  width: 49%;
  text-align: center;
  border:0.5%;
  border:solid;
  padding:1.5%;
  margin:0.5%;
  padding-top:2%;
  padding-bottom:2%;
  background-color: rgba(0,92,162,0.1);
  display:flex;
  align-items:center;
  justify-content:center;
}

#myResearcherLanding .column img {
  border:1px solid;
  width:25%;
  margin-left:1%;
  margin-right:-1%+auto;
  padding:0;
  background: white;
}

#myResearcherLanding .column span {
  margin-left:auto;
  margin-right:auto;
}

#myResearcherLanding .column:hover {
  background-color: rgba(0,92,162,0.2);
}

#myResearcherLanding a:hover {
  font-weight: 400 !important;
}

/*************
 * 12. STAFF *
 *************/

.big {
  font-size:120%;
}

#myStaff .row {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  margin-bottom:1%;
}
 
#myStaff .column {
  box-sizing: border-box;
  background-color: rgba(0,92,162,0.1);
  flex: 49%;
  border: 0.25em solid;
  display: flex;
  flex-direction: column;
  margin-left:0.5%;
  margin-right:0.5%;
}

#myStaff .column .s1 {
  text-align:center;
  margin:0;
  margin-top:0.5vw;
  margin-bottom: auto;
}

#myStaff .column .s2 {
  margin:0;
  margin-top:1em;
  margin-bottom:0.5em;
  padding-left:0.5em;
  padding-right:0.5em;
}

#myStaff a:hover {
  background-color:rgba(0,92,162,0.2);
  font-weight: 400 !important;
}

#myStaff .emptycolumn {
  box-sizing: border-box;
  flex: 49%;
  display: flex;
  flex-direction: column;
  margin-left:0.5%;
  margin-right:0.5%;
}

/***************
 * 13. MEMOIRS *
 ***************/
 
.memoirsemail {
  height:1em;
  margin: 0 0 -0.18em 0.2em;
}

.myMemoirColumn1 {
  float:left;
  width:68%;
  margin-right:5%;
}

.myMemoirColumn2 {
  float:left;
  width:25%;
}

.myMemoirColumn2 img {
  float:right;
  border:1px solid;
  margin-right:10%;
  margin-left:10%;
  width:80%
}

#myMemoirsEditors td {
  padding-right: 1em;
}

#myMemoirsTable td {
  padding:0 1em;
  text-align:center;
}

#myMemoirsTable a:hover {
  font-weight: 400;
  text-decoration:underline;
}

/*****************
 * 14. TIMETABLE *
 *****************/
 
.fortop {
text-align:right;
}

.tformat {
  border-collapse:collapse;
}

.tcenter {
  margin-left:auto;
  margin-right:auto;
}

.tformat td {
  border:1px solid #005ca2;
  text-align:center;
  padding: 2px;
}

.tformat .left {
  text-align: center;
}

.tformat .right {
  text-align: center;
}

.tformat .center {
  text-align: center;
}

.tformat .abs {
  text-align: left;
}

.tformat td.mw2em:before {
  content: '';
  display: block; 
  min-width: 2em;
}

.tformat td.mw3em:before {
  content: '';
  display: block; 
  min-width: 3em;
}

.tformat td.mw4em:before {
  content: '';
  display: block; 
  min-width: 4em;
}

/***************
 * 15. MASTERS *
 ***************/
 
.tformat2 {
  border-collapse:collapse;
  margin:0 auto;
}

.tformat2 td {
  border:1px solid #005ca2;
  text-align:center;
  padding: 2px;
}

.tformat2 .left {
  text-align:center;
}

.tformat2 .right {
  text-align: left;
}

.tformat2 .center {
  text-align: center;
}

/*************
 * 16. LINKS *
 *************/

#myLinks .column {
  float:left;
  width:50%;
}

.myEnglishLinkStyle a {
  font-weight:400 !important;
}

.myEnglishLinkStyle a:hover {
  text-decoration:underline;
}

/*********************
 * 17. ENGLISH PAGES *
 *********************/
 
/* The boldface text decoration is nice in fixed-width fonts,
   such as Japanese characters, but ugly when using English text. */
.myEnglishStyle a {
  font-weight:700 !important;
}

.myEnglishStyle a:hover {
  text-decoration:underline;
}

/****************************
 * 18. LISTS WITH SEPARATOR *
 ****************************/

.myOneHalfSpacing {
  padding:0;
}

.myOneHalfSpacing li {
  padding:0;
  padding-bottom: 0.5em;
  list-style-type:none;
  margin:0;
}
 
ul.showdot {
  list-style-type: disc;
}
 
ul.indent {
  padding-left: 0.5em; /*Indentation equals to a half-width character */
}

/*************
 * 19. OTHER *
 *************/
 
/* SECTION "19. OTHER" IS EMPTY */

/**************************************
 * A. MEDIA QUERIES FOR SMALL SCREENS *
 **************************************/
@media only screen and (max-width: 1199px) {

/* The following removes the 2em white margin from the PageContents, when the screen is smaller than 1200 px */
#myPageContent {
  padding:0.5vw; /* DEFAULT IS padding: 0.5vw; */
}

/***↓↓*Media query ends*↓↓ ***/
}
/***↑↑*Media query ends*↑↑ ***/
/***************************************
 * B. MEDIA QUERIES FOR MOBILE VERSION *
 ***************************************/
 
@media only screen and (max-width: 567px) {
#myHeader .leftcolumn {
  width: 100%;
}

#myHeader .rightcolumn {
  display: none;
}

#myTopnav ul li a { 
  padding: 4vw 0;
}

#myLeftSubnav .leftcolumn {
  display: none;
}

#myLeftSubnav .rightcolumn {
  width:100%;
}

#myRightColumnSubnav ul {
  display: none;
}

#myCopyright {
  font-size:75%;
  text-align:center;
}

#myResearcherLanding .column {
  width: 99%;
  padding-left:1%;
}

#myResearcherLanding .column img {
  border:1px solid;
  width:10vw;
}

.myStaff .column {
  width: 99%;
}

.hide {
  display:none;
}

#myTopnav ul {
  font-size: 1em;
}

#myTopnav ul li.noshow {
  display: block;
}

#myTopnav ul li {
  float: left;
  width: 25%;
}

.myMemoirColumn1 {
  width:100%;
}

.myMemoirColumn2 {
  width:100%;
}

.myMemoirColumn2 img {
  display:block;
  width:50%;
  height:auto;
  margin:0;
  padding:0;
  margin-right:25%;
}

#myLinks .column {
  width:100%;
}

#myFooter .column {
  width: 100%;
  text-align:left;
}

#myFooter li.myLinkHead {
  margin-bottom:0.5em;
}

#myFooter li {
  margin-bottom:0.5em;
}

#myFooter li.myAddr {
  margin-bottom:0em;
}

#myFooter ul li.noshow {
  display: block;
  margin-top:0em;
  margin-bottom:0.5em;
}

.myShrink {
  font-size:60%;
}

.myEnTopnav {
 font-size: 83%;
}

#myPageContent {
  padding:0.5em;
}

#myFooter {
  padding-left:0.5em;
  padding-right:0.5em;
  padding-top:0.5em;
}

#myMemoirsTable td {
  padding:0 0.5em;
}

#myStaff .emptycolumn {
  display: none;
}

#myStaff .row {
   margin-bottom:0;
}

#myStaff .column {
  flex: 100%;
  margin:0;
  margin-bottom:1%;
}
/********************************
 ***↓↓*Media query ends*↓↓ ***/
}
/***↑↑*Media query ends*↑↑ ***
 * DO NOT WRITE AFTER THIS LINE *
 ********************************/