* { box-sizing: border-box; }

body {
  background:#EBECEF url() fixed;
  color:#62718A; 
  font-size:11px;
  font-family: 'Playwrite DE Grund', 'Long Cang', calibri, verdana;
  letter-spacing:1px;
  margin:0; padding:10px 0 5px 0;
}

:lang(zh) {
  font-size: 1.50em;
}

@font-face {
  font-family: 'Long Cang';
  src: url('LongCang-Regular.ttf') format('truetype');
  unicode-range: U+4E00-9FFF;
  font-weight: normal;
  font-style: normal;
}

.title {
  background:transparent;
  text-transform:uppercase;
  font:bold 12px monospace, arial;
  font-family: 'Yuji Syuku';
  color:#7D6A6A;
  line-height:10px;
  padding:1px 0 1px 0;
  border-bottom:1px solid #ddd;
  margin-bottom:4px;
  letter-spacing:2px;
}

a { color:#7D6A6A; text-decoration:none; letter-spacing:2px; font-family: 'Hi Melody'; font-size: 17px;}
a:hover { color:#8C6353; text-decoration:none; }

b { color:#A61616; font-weight:bold; }
i { color:#8DA1B9; font-weight:bold; font-style:italic; }

::selection {
  background:#B7CCE3; /* WebKit/Blink Browsers */
  color:#fff;
}

::-webkit-scrollbar-thumb {
  background-color: #fff;
  border-radius:0;
  border:1px solid #ccc;
  border-right:1;
}
::-webkit-scrollbar {
  width:7px; height:7px;
  background:transparent;
}

textarea { font:12px calibri; letter-spacing:1px; color:#888; }

/* layout */
#layout { width:780px; margin:auto; }
#navigation { float:left; width:580px; padding:4px 2px 4px 4px; }
#navi { font:bold 12px monospace; background:#FFF; color:#777; text-transform:none; letter-spacing:2px; margin:0 0 10px 0; padding:8px; border:1px solid #114F99; text-align:center; }
#navi a { font-weight:bold; color:#A61616; text-decoration:none; }
#navi a:hover { font-weight:bold; color:#8C6353; text-decoration:none; }

#navigation::after {
  content: "";
  display: block;
  clear: both;
}

#header {
  height:200px;
  border:1px solid #114F99;
  box-shadow:4px 5px #EBF3FC;
  margin:0 0 10px 0;
  padding:0;
  background:#fff url() no-repeat;
}

.contentbox {
  width:100%;
  background:#fff;
  border:1px solid #114F99;
  padding:5px 8px;
  margin-bottom:15px; 
}

.contentsection { 
  max-height: 170px;    
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 5px;   
}

.contentgallery {
  height:200px;        
  width:100%;          
  overflow-x:auto;
  overflow-y:hidden;
  white-space:nowrap;  
}

.contentgallery img {
  height:190px;
  display:inline-block;
  margin-right:5px;
}



#box1, #box2 {
  float:left;
  width:282px; 
  background:#fff;
  padding:5px 8px;
  border:1px solid #114F99;
  overflow:auto;
  margin-right:10px;
  margin-bottom:15px;
  box-sizing: border-box; 

}
#box2 { margin-right:0; }

#morecontent { clear:both; }
.morecontentbox {
  background:#fff;
  margin:0 0 15px 0;
  padding:5px 8px;
  border:1px solid #114F99;
}

#sidebar {
  width:200px;
  float:left;
  padding:4px 4px 4px 2px;
}
.sidebox {
  background:#fff;
  margin:0 0 15px 0;
  padding:5px 8px;
  border:1px solid #114F99;
}

.sidebox img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.sidebox .title {
  padding:5px 8px;
  border-bottom:1px solid #ddd;
}

.sidecontent {
  max-height:150px;        /* adjust height */
  overflow-y:auto;
  overflow-x:hidden;
  padding:5px 8px;
}

.extralinks a {
display:inline-block;
color:#A61616;
width:150px;
background:#CEDFF2;
border-bottom-right-radius:0px;
padding-left:5px;
letter-spacing:2px;
margin-bottom:1px;

}















  
.extralinks a:hover {color:#8C6353; background:#fff}


#footer { clear:both; text-align:center; }
#credits { margin:auto; padding:5px; height:30px; width:780px; }