body {
  background-image: url("/SpecialReadingProjects/Genji/images/wallpaper/SeamlessWallpaper.jpg");
  background-repeat: repeat;
  }

a:hover {
 opacity:0.7; 
}

 @font-face {
        font-family: Japanese;
        src: url(/Fonts/NightinTokyo.ttf);
               }

h3 {
 font-size:3em;
 margin:-5px 0 -10px 0;
}

h4 {
 font-size:2em;
 margin:-5px 0 -10px 0;
 color:white;
}

/* CREATE THE COLUMNS */

.flex-container{

    width: 80%;   /* width across screen of all columns */

    min-height: 300px;

    margin: 0 auto;

    display: -webkit-flex; /* Safari */     

    display: flex; /* Standard syntax */
    
    background-color:#cda847;
    
    border: 1px solid #fff;
    
    box-shadow: 0 0 0 1px #bbb;

}

.flex-container .column{

    padding: 10px;

   /* background: #dbdfe5;*/

    -webkit-flex: 1; /* Safari */

    -ms-flex: 1; /* IE 10 */

    flex: 1; /* Standard syntax */
    
   
}

.flex-container .column.one {

    background: #9fc4a7;
    flex-basis:20%;      /* sets the column width */
    margin:10px;
    border: 1px solid #fff;
    box-shadow: 0 0 0 1px #bbb;
    
}

.flex-container .column.two{

    background: #d4d7cd;
    flex-basis:80%;       /* sets the column width */
    margin:10px;
    border: 1px solid #fff;
    box-shadow: 0 0 0 1px #bbb;
}


.flex-container .column.three{

    background: #9fc4a7;
    flex-basis:20%;          /* sets the column width */
    margin:10px;
    border: 1px solid #fff;
    box-shadow: 0 0 0 1px #bbb;
}



/* STYLE THE MIDDLE COLUMN */


.summarytext {
 width:95%;
 display:block;
 margin-left:auto;
 margin-right:auto;
 
}

.summarytext p, .translations p, .flex-container .column.one p, .flex-container .column.three p {
 text-align:left; 
}

.suematsu p, .waley p, .seidensticker p, .tyler p, .washburn p, .analysis p {
 color:black; 
}

.translations {
 width:90%;
 display:block;
 margin-left:auto;
 margin-right:auto;
 border: 1px solid #fff;
  box-shadow: 0 0 0 1px #bbb;
  padding:15px;
  background-color:#b2dfb5;
 opacity:0.9;
 margin-top:40px;
 background: #60b0d2;
  color:white;
}


#hidden {
 display:none; 
}

.thumbnail {
 float:left;
 border:1px solid white;
 margin-right:8px;
}

.suematsu {
 background: rgba(207, 229, 251, 0.8);
  border: 1px solid #fff;
  box-shadow: 0 0 0 1px #bbb;
  padding:15px;
  margin-bottom:15px;
  object-fit: cover;
  overflow:hidden;
}

.waley {
  background: rgba(248, 122, 113, 0.8);
  border: 1px solid #fff;
  box-shadow: 0 0 0 1px #bbb;
  padding:15px;
  margin-bottom:15px;
  object-fit: cover;
  overflow:hidden;
}

.seidensticker {
  background: rgba(162, 155, 150, 0.8);
  border: 1px solid #fff;
  box-shadow: 0 0 0 1px #bbb;
  padding:15px;
  margin-bottom:15px;
  object-fit: cover;
  overflow:hidden;
}

.tyler {
 background: rgba(106, 163, 112, 0.8);
  border: 1px solid #fff;
  box-shadow: 0 0 0 1px #bbb;
  padding:15px;
  margin-bottom:15px;
  object-fit: cover;
  overflow:hidden;
}

.washburn {
  background: rgba(238, 203, 88, 0.8);
  border: 1px solid #fff;
  box-shadow: 0 0 0 1px #bbb;
  padding:15px;
  margin-bottom:15px;
  object-fit: cover;
  overflow:hidden;
}

.analysis {
 background-color:white;
 padding:15px;
}



/*  READ MORE AND READ LESS BUTTON */

     input[type="button"], input[type="button"]:focus, input[type="button"]:active,  
button, button:focus, button:active {
    /* Remove all decorations to look like normal text */
    background: none;
    border: none;
    display: inline;
    font:inherit;
    margin: 0;
    padding: 0;
    outline: none;
    outline-offset: 0;
    /* Additional styles to look like a link */
    color: blue;
    cursor: pointer;
    text-decoration: none;
    float:left;
  
}
    
    
/* Remove extra space inside buttons in Firefox */
input[type="button"]::-moz-focus-inner,
button::-moz-focus-inner {
    border: none;
    padding: 0;
}