* {
	box-sizing: border-box;	/* to include the padding and border thickness in all element's total width and height. */
}
html {
  /*background:url("http://i.imgur.com/WONYJZR.jpg") no-repeat center fixed;*/
  background:url("images/outspace.jpg") no-repeat center fixed;
  background-size:cover;	/* cover the content area completely,the flow-out part of the image will not visible. */	
}
body {  
  font-size:20px;
  color:white;
  text-align:center;
  margin:0;
  padding:0;
}
header {
  font-family:"Courier New","Microsoft YaHei";  
  text-align:center;
  text-shadow:3px 3px black,0px 0px 10px red,5px 5px 25px darkblue; 		
}
nav {
  position:fixed;
  top:0px;
  /*right:5%;	/* for center the content,"margin:auto" is not worked for fixed block */
  background-color:rgba(0,0,0,0.5);    /* rgba(red,green,blue,alpha),alpha for opacity degree */ 
  text-align:center;
  width:100%;
  /*font-family:"Microsoft JhengHei";
  /* If the name of a font family is more than one word, it must be in quotation marks */
}
footer {
	position:fixed;
	bottom:0px;
	width:100%;
  background:#CCFFFF;
  color:#002200;
  font-size:16px;
  font-weight:bold;	    
  text-align:center;
  font-family:"Microsoft JhengHei";	    	    
}
div.indexbox {			/* for homepage index */
  display:inline-block;            
  width:310px;
  height:200px;
  vertical-align:top;               
}	    
div.content {
  color:black;
  background:linear-gradient(#FFF,#9F9);
  /* background-image:url("/static/images/paper.jpg"); */
  border-style:solid;
  border-color:#333333;
  /*border-color:rgba(0,0,0,0.5);*/ 
  border-width:10px 45px;	/* 10px for top and bottom,45px for left and right side */  
  border-radius:30px;
  margin:0 auto;
  width:100%;
  text-align:left;
  padding:10;
}
div.index {
  background-color:rgba(0,0,0,0.8);
  text-align:left;
}

/* for scrolls settings */
div.scrollbig {
  height:740px;
  overflow:auto;
}
div.plants {
  height:700px;
  overflow:auto;
}
div.scroll {  
  height:630px;
  overflow:auto;
  background-color:white; 
  background-image:url('/static/images/article.jpg');
  background-position:right bottom;
  background-repeat:no-repeat;
  padding:15px; 
}
div.plants ul{
  list-style-type:none;
  margin:0;
  padding:0;
}
div.flower {
  background-color:white;
  border:1px solid #AAA;
  width:100%;
  box-shadow:0 8px 15px 0 rgba(0,0,0,0.2),0 10px 30px 0 rgba(0,0,0,0.19);
}

div.game {
  margin:0 auto;
  width:380px;
  height:450px;
  border:3px solid blue;
  padding:20px;
  background-color:#EEE;
  font-family:"Microsoft JhengHei";
}
div.article {
  display:inline;
  float:right;
  width:50%;
  border:1px solid #AAA;
  margin:0 0 15px 15px;
  padding:8px;
  box-shadow:0 8px 15px 0 rgba(0,0,0,0.2),0 10px 30px 0 rgba(0,0,0,0.19);
}
/*div.flex {
  display:flex;
  flex-wrap:wrap;
}
.pli {
  flex: 1 1 155px;
  padding:6px;
}
.pli:hover img {
  border:1px solid white;
}*/

/* settings for navigation bar */  
nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;  
}
nav ul li {
  display:inline-block;
  border-right:1px solid white;
}
nav ul li:last-child {border-right:none;}
nav ul li:first-child {border-right:none;}
nav ul li a, nav ul li a.dropbtn {
  display:inline-block;   
  color: yellow;
  padding: 0px 8px;
  text-decoration: none;
}
nav ul li a:hover,.dropdown:hover .dropbtn {
  color:red;
  background-color:#DDDDDD;
  font-weight:bold;
}
/* setting for tooltip */
.tooltip {			/* tooltip container */
  position:relative;
  display:inline-block;
}
.tooltip .tooltiptext {			/* tooltip text */
  position:absolute;
  visibility:hidden;
  width:145px;
  bottom:100%;
  left:0%;
  background-color:#330000;
  color:white;
  border:1px solid white;
  border-radius:6px;
  text-align:center;
  padding:5px 0;
  z-index:1;
  opacity:0;
  transition:opacity 1s;
}
.tooltip .tooltiptext::after {	/* use pseudo-element for bottom arrow */
  content: "";
  position: absolute;
  top: 100%;		/* at the bottom of the tooltip */
  left: 50%;
  margin-left: -10px;	/* margin-left should be same with border-width to center the arrow */
  border-width: 10px;
  border-style: solid;
  border-color: #330000 transparent transparent transparent;	/* top right bottom left */
}
.tooltip:hover .tooltiptext {
  visibility:visible;
  opacity:1;
}
/* Show the tooltip text when your mouse over the tooltip container */

a {				
  text-decoration:none;
  color:white;            
}
a.black {				
  text-decoration:none;
  color:#002200;
  font-weight:bold;   	        
  }
a:hover{color:red}
pre{
  white-space:pre-wrap;
  word-wrap:break-word;
  text-align:justify;		/*       */
}
/*   pre          «    
Microsoft JhengHel   ,Microsogr YaHei    */   	    
ul.article {
  list-style:square;
  border-left:20px solid #CCC;
  border-right:5px solid #ccc;
}
ul.article li {
  display:block;	
  background-color:#333333;
  margin:5px;
  padding:5px;
}
ul.index li {
  list-style:none;
  display:block;
  padding:5px;
}
input#key {
   width:130px;						/* animated search input */
   background-image:url('/static/images/search.png');
   background-repeat:no-repeat;
   padding:3px 3px 3px 40px;
   font-size:16px;
   -webkit-transition: width 0.4s ease-in-out;		/* animated search input */
    transition: width 0.4s ease-in-out; 		/* animated search input */
}
input#key:focus {			/* just for focus the input text field */
  background-color:pink;
}
input#key:hover {
  width:250px;						/* animated search input */
}
p#column2 {
  column-count:2;
  column-gap:40px;
  column-rule:1px solid #999;
}
p.en-first::first-letter {	/* pseudo-element for paragraph element */
  color:red;
  font-weight:bold;
  font-size:150%;
}
div#bgflower {
  background-color:white; 
  background-image:url('/static/images/flower.jpg');
  background-position:right bottom;
  background-repeat:no-repeat;
  padding:10px;
}
@keyframes test {
  0% {background-color:red;width:100px;}
  16% {background-color:orange;width:200px;}
  33% {background-color:yellow;width:300px;}
  50% {background-color:green;width:400px;}
  67% {background-color:blue;width:300px;}
  84% {background-color:cyan;width:200px;}
  100% {background-color:white;width:100px;}
}
button.animate {
  font-size:16px;
  background-color:white;
  font-weight:bold;
  color:red;
  padding:3px;
  border: 4px solid #4CAF50;
  border-radius:6px;
  cursor:pointer;
  animation:test 4s ease-in-out 1s;  
}
button.animate:hover {
  background-color:red;
  color:white;
}
#s1,#s2,#s3,#s4,#s5,#s6 {
  border:1px solid white;	
  border-radius:10px;
}  
#s1:hover,#s2:hover,#s3:hover,#s4:hover,#s5:hover,#s6:hover {
  border:2px solid red;	
}
/* for calendar */
li {
  display: inline-block;
  font-family: Helvetica, Arial, sans-serif;
  list-style-type: none; 
} 
input.option{
  width:80%;
  font-size:16px;
  font-weight:bold;
  padding:4px;
  margin:4px;
  cursor:pointer;	
}
input.option:hover{background-color:pink;}
input.option:focus{color:red;}  
.crop {
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;	  	
  overflow:hidden;
  text-overflow:ellipsis;
  text-align:justify;
  padding:4px;
}
input.search {
  color:red;
  font-size:16px;
  padding:3px;
  cursor:pointer;	
}
div.tooltip {margin:0px 2px;}
/*h4.hot:after {
  content:"Hot New!!";
  background-color:#f00;
  color:white;
  margin-left:5px;  
}*/