/*
* orginal design:GET CSS TEMPLATES(https://www.oswd.org/design/preview/id/3660/)
* TEMPLATES:3 column blue(free css layout)
* hugo port & customization: rabbit0620(https://github.com/rabbit0620)
* in fact I'm a noob for coding and computer related tech,
* so I decide to start with imating others
* this is a derivative work of the orginal work,the OSWD design,thank them so much
* you can feel free to use this repo code,with MIT lisence
* I don't know what MIT is ,I just found most people use it 
*/ 

* {
 padding: 0;
 margin: 0;
}
body {
 font-family: Arial, Helvetica, sans-serif;
 color: #000000;
 font-size: 12px;
 background-color: #e8e4d9; 
}
 a:link {
  color: #0000FF;
  text-decoration: underline;
}
a:visited {
  color: #800080;
  text-decoration: underline;
}
a:hover {
  color: #FF0000;
} 


img
{
padding: 3px;
border: solid 1px #e1e1e1;
}

img.floatTL
{
float: left;
margin-right: 1.3em;
margin-bottom: 1.0em;
margin-top: 0.5em;
}

blockquote{
font-family: monospace;
color: #838383;
padding: 15px;
border: 1px #d9d9d9 solid;}

#header {
 border: 1px solid #ccc;
 margin: 5px 5px 5px 5px;
 padding: 4px;
 min-height: 60px;
 height:auto;
background-color: #fff;
background-image:
linear-gradient(90deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px),
linear-gradient(#eee .1em, transparent .1em);
background-size: 100% 1.2em;

}

ul {
	line-height: 180%;
}

ul {
	margin-left: 0;
	padding-left: 0;
	list-style-position: inside;
}

#header p {
    color: #5dff35;
    float: left;
	padding: 25px 0em 0px 0px;}

#header h1 {
	float: left;
	padding: 15px 0em 0px 20px;
	font-size: 20px;
	color: #3d84d4;
  padding-top:10px;
}

#header h2 {
	float: left;
	padding: 25px 0em 0px 0px;
	font-size: 11px;
	font-weight: normal;
}

#header ul {
	float: right;
	margin: 0;
	padding: 25px 0em 0px 0em;
	list-style: none;
	font-size: 11px;
}

#header li {
	display: inline;
}

#header a {
	display: block;
	float: left;
	height: 25px;
	margin: 0 0 0 8px;
	padding: 12px 20px 0 20px;
	text-decoration: none;
	font-weight: bold;
	color: #0000FF;
  font-size: 14px;
  font-family: "Times New Ronman",serif;

}

#header a:hover {
    color: #800000;
}

#leftcolumn { /* Parent Wrapper for inside boxes */
 margin: 0 5px 5px 5px;
 display: inline; /* IE Hack */
 width: 61%;
 float: left;
 min-height: 300px;
 padding: 4px;
 border: 1px solid #ccc;
 background-color: #fff;
text-align: justify;

}
* html 
*
#leftcolumn {height:300px} /* IE Min-Height Hack */ 


#leftcolumn p{
  
  line-height:1.6;
  
  margin-top:0.8em;
  margin-bottom:0.8em;

}



#leftcolumn h1{
color: #7059ff;
font-size: 18px;
text-indent: 10px;}

#leftcolumn h2{
color: #7059ff;
font-size: 16px;
text-indent: 10px;
border-top: 1px dashed;
padding-top: 5px;
margin-top: 10px;}

#centercolumn { /* Parent Wrapper for inside boxes */

 border: 1px solid #ccc;
 margin: 0px 5px 0px 0px;
 display: inline; /* IE Hack */
 padding: 4px;
 width: 23%;
 float: left;
 min-height: 300px;
background-color: #f0f0f0;}
* html #centercolumn {height:300px} /* IE Min-Height Hack */ 

#centercolumn p{
 text-align: justify;
 }

#centercolumn h2{
 color: #7059ff;
 font-size: 14px;
 text-indent: 10px;
 border-top: 1px dashed;
 padding-top: 5px;
 margin-top: 10px;
}

#centercolumn img {
margin-left: 12%;}

#rightcolumn {
 margin: 0 5px 0px 0px;
 padding: 4px;
 display: inline; /* IE Hack */
 width: 21%;
 float: left;
 border: 1px solid #ccc;
 background-color: #fff;
 min-height: 300px;
}
* html #rightcolumn {height:300px} /* IE Min-Height Hack */ 

#rightcolumn h4{
 font-size: 13px;
padding-top: 7px;
margin-top: 15px;
border-top: 1px solid;}

#rightcolumn ul, #rightcolumn li {
text-align:center;
	list-style: none;
	margin: 0;
	padding: 0;
}

#rightcolumn a {
	border-bottom: none;
	color:#0000FF;
  text-decoration: underline;
}

#rightcolumn h3{
	text-align: center;
	position:static;
}

#rightcolumn a:link, a:visited{
	color:#0000FF;
  text-decoration: underline;
}

#rightcolumn a:hover, a:active{
	color:#800080;
  text-decoration:underline;
}

#footer {
 font-size: 10px;
 background-color: #fff;
 text-align: center;
 margin: 10px 5px 5px 5px;
 display: inline; /* IE Hack */
 padding: 4px;
 float: left;
 width: 97.7%;
}



#leftcolumn {
  word-wrap: break-word;      /* 允许长单词/链接强制换行 */
  overflow-wrap: break-word;
  overflow-x: auto;           /* 万一有超宽代码块，出横向滚动条 */
}

img {
  max-width: 100%;
  height: auto;
}


/* 简单复古表格样式 */
table {
  border-collapse: collapse;
  width: 100%;
  margin: 1em 0;
  font-size: 13px;
}
th, td {
  border: 1px solid #999;
  padding: 5px 8px;
  text-align: left;
}
th {
  background-color: #e0e0e0;
  font-weight: bold;
}




/* 防止图片撑破容器 */
#leftcolumn img,
#centercolumn img,
#rightcolumn img {
  max-width: 100%;
  height: auto;
  box-sizing: border-box;
}

/* 如果图片有浮动类，也要限制 */
img.floatTL {
  max-width: 100%;
  height: auto;
}


/* 修复侧边栏图片溢出 */
#centercolumn img {
  box-sizing: border-box;   /* padding 和 border 算在宽度内 */
  width: auto;              /* 让图片保持原比例 */
  max-width: 100%;          /* 不超过容器宽度 */
  height: auto;
  margin-left: 0;           /* 去掉原来的 12%，因为算不准容易溢出 */
  display: block;           /* 让图片成为块级元素，方便居中 */
  margin: 0 auto;           /* 居中显示，更整洁 */
}


/* 右边栏 News 文字 */
#rightcolumn blockquote p {
  font-family: "Times New Roman", Times, serif;  /* 经典衬线体 */
  font-size: 13px;
  color: #000;               /* 纯黑，更像早期文字 */
  line-height: 1.4;
  font-style: italic;        /* 斜体保留一点旧式引用感 */
}



#leftcolumn, #centercolumn, #rightcolumn {
  box-shadow: 2px 2px 4px rgba(0,0,0,0.1);
  background-color: #fff;     /* 确保白色不变 */
}