@charset "UTF-8";
@media only screen and (orientation: portrait){ /* 禁止横屏浏览 */
    html body * { 
		display: none; 
	} 
	body{
		background-color:lightblue;
	}
	body:after{
		content: "请使用横屏浏览! Please use landscape!";
	}
} 

@media only screen and (orientation: landscape){ /* 允许横屏浏览 */

/*********** basics **************/
body{
	font-family: "Microsoft Yahei", Times, "Times New Roman", serif;
	background-color: #EFECDF;
	font-size: medium;
}

.container{
	width: 99%;
	margin-left: auto;
	margin-right: auto;
	margin-top: -20px;
	background-color: white;
}

article.linker{
	width: 93%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 25px;
	border-radius: 6px;
	background-color: white;
	padding-left: 1%;
	padding-right: 1%;
	padding-top: 1px;
	padding-bottom: 3px;
}

article ul li{
	margin-bottom: 10px;
}

.logo{
	color: #FFFFFF;
	font-weight: bold;
	margin-left: auto;
	margin-right: auto;
	letter-spacing: 4px;
	text-align: center;
	padding-top: 20px;
	line-height: 2em;
	font-size: 22px;
}

.logppt{
	margin-top: 50px;
	text-align: center;
}

.intro{
	display: inline-block;
	background-color: #6DC7D0;
	margin-bottom: -12px;
}

.columnleft{
	width: 40%;
	height: 50vh;
	float: left;
	display: grid;
	place-items: center;
}

.columnright{
	width: 60%;
	height: 50vh;
	text-align: center;
	float: right;
	overflow-x: hidden;
	overflow-y: auto;
}

.intro p{
	color: #FFFFFF;
	text-align: justify;
	line-height: 1.5em;
	font-weight: lighter;
	margin-right: 5%;
	font-size: 0.9em;
}

.intro h3{
	color: #FFFFFF;
	text-align: center;
	font-size: 1.2em;
	font-weight: normal;
}

.intro h3:hover{
	color: gold;
}

.profilev5{
	width: 37%;
	border-radius: 50%;
}

.column{
	width: 50%;
	text-align: center;
	padding-top: 20px;
	padding-bottom: 20px;
	float: left;
}

.intro .column h3{
	color: #FFFFFF;
	text-align: center;
}

.intro .column p{
	color: #FFFFFF;
	text-align: justify;
	line-height: 25px;
	font-weight: lighter;
	margin-left: 0%;     
	margin-right: 7%;
}

.profile{
	width: 25%;
	border-radius: 50%;
}

header{
	width: 100%;
	background-color: #5D5E5D;
	border-bottom: 1px solid #353635;
}

.secondary_header{
	clear: left;
	width: 100%;
	padding-top: 15px;
	padding-bottom: 15px;
	background-color: #B3B3B3;
}

.secondary_header ul{
	margin-top: 0%;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 20px;
	padding-left: 0px;
}

.secondary_header ul li{
	width: 16%;
	float: left;
	list-style: none;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0px;
	font-weight: normal;
	color: #FFFFFF;
	letter-spacing: 1px;
	text-align: center;
	transition: all 0.3s linear;
}

.third_header{
	clear: left;
	width: 100%;
	padding-top: 10px;
	padding-bottom: 10px;
	background-color: #B9B976;
	margin-top: -8px;
	margin-bottom: 0px;
}

.container .third_header ul{
	margin-top: 0%;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 25px;
	padding-left: 0px;
}

.third_header ul li{
	width: 20%;
	float: left;
	list-style: none;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0px;
	font-weight: normal;
	color: #FFFFFF;
	letter-spacing: 1px;
	text-align: center;
	transition: all 0.3s linear;
}

.cards{  /* Landscape picture */
	width: 100%;
	height: 150px;
	opacity: 0.8;
}

.cardsv{  /* Portrait picture */
	width: 100%;
	height: 270px;
	opacity: 0.8;
}

/************ basics2 **************/
h1, h2, h3{
	font-family: Verdana, Arial, Helvetica, sans-serif;
}

h1{
	font-size: 1.6em;
	color: black;
}

h2{
	font-size: 1.4em;
	color: darkblue;
}

h3{
	font-size: 1.2em;
	color: mediumblue;
}

a:link{
	text-decoration:none;
	color:#336699 !important;
}

a:visited{
	text-decoration:none;
	color:#224488 !important;
}

a:hover{
	font-weight:bold;
	text-decoration:none;
	color:#663300 !important;
	cursor: pointer;
}

a:active{
	font-weight:bold;
	text-decoration:wavy;
	color:#6666CC !important;
}

.foot_left{
	color: #FFFFFF;
	font-weight: bold;
	text-align: center;
	letter-spacing:normal;
}

.foot_right{
	color: #FFFFFF;
	font-weight: bolder;
	font-style: normal;
	text-align: center;
	letter-spacing: normal;
}

footer{
	background-color: #A3A3A3;
	padding-top: 5px;
	padding-bottom: 5PX;
}

.copyright{
	text-align: center;
	padding-top: 10px;
	padding-bottom: 10px;
	background-color: #717070;
	color: #FFFFFF;
	text-transform: uppercase;
	font-weight: lighter;
	letter-spacing: 2px;
	border-top-width: 2px;
}

.email{
	width: 240px;
	margin-top: 10px;
	margin-right: auto;
	margin-bottom: 20px;
	margin-left: auto;
	padding: 2px;
	text-align: center;
	vertical-align: middle;
	text-transform: uppercase;
	font-weight: bold;
	letter-spacing: 1px;
	border: 3px solid #FFFFFF;
	color: #FFFFFF;
	transition: all 0.3s linear;
}

.email:hover{
	background-color: #6DC7D0;
	color: #FFFFFF;
	cursor: pointer;
}
/*********************************/

/*********** forum ***************/
.comments{
	width: 100%; 
	clear: both;
	display: inline-block;
	padding-bottom: 20px;
	padding-top: 20px;
	margin-left: 0%;  
	margin-right: 0%;  
	padding-left: 10px;
	padding-right: 10px;
	border-radius: 5px;
	background-color: #DDDDDD;
}

article.forum{
	width: 97%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 25px;
	border-radius: 6px;
	background-color:#DDDDDD;
	padding-left: 1%;
	padding-right: 1%;
	padding-top: 20px;
	padding-bottom: 10px;
}

.navfloat{
	clear: both;
	width: 100%;
	display: inline-block; 
	padding-bottom: 10px;
	padding-top: 20px;
	margin-left: 0%;  
	margin-right: 0%; 
	padding-left: 10px; 
	padding-right: 10px; 
	border-radius: 5px;
	background-color: #FFFFFF;
}
/*******************************/

/********** 课件展示 ************/
.text_column{
	width: 97%;         
	text-align: left;
	font-weight: normal;  
	line-height: 20px;    
	float: left;
	color: #A3A3A3;
}

.gallery{
	clear: both;
	display: inline-block;
	width: 100%;
	padding-bottom: 35px;
	padding-top: 0px;
	margin-top: 0px;  /*-5*/
	margin-bottom: 0px;
	background-color: #FFFFFF;
	border-radius: 6px;
}

/******** Thumbnail for pdf *******/
.thumbnail{
	width: 23%;
	height: 330px;
	text-align: center;
	float: left;
	margin-top: 35px;
	padding-bottom: 20px;
	margin-left: 1%;
	margin-right: 1%;
	padding-top: 0px;
	border-bottom: 5px solid #6DC7D0;
	font-size: 12px;
	background-color: #F8F8F8;
}

.subnail{
	height: 153px;
	overflow-x: hidden;
	overflow-y: auto;
}

.gallery .thumbnail h4{
	margin-top: 5px;
	margin-bottom: 5px;
	color: #52BAD5;
	text-align: left;
	padding-left: 5px;
	padding-right: 5px;
}

.gallery .thumbnail p{
	margin-top: 0px;
	color: #B3B3B3;
	text-align: left;
	padding-left: 5px;
	padding-right: 5px;
}

.gallery .thumbnail .tag{
	color: #5D5E5D;     
	padding-bottom: 4px;   
	padding-top: 4px;      
	text-align: left;
	padding-left: 20px;
	padding-right: 20px;
	border: 1px dashed cadetblue;
}

.thumbview{
	width: 175px;
	border-radius: 350px;
	height: 175px;
	margin-left: auto;
}

.shell{
	margin-top: 30px;
	text-align: center;
}
/*************************************/

/******* Thumbnails for poems ********/

@media (max-width: 2560px){
	
	.thumbnailshort{
		width: 17%;
		margin-left: 4%; 
		margin-right: 4%;
		height: 53vh; 
		float: left;
		text-align: center;
		margin-top: 35px;
		padding-bottom: 20px;
		border-radius: 3px;
		padding-top: 0px;
		border-bottom: 5px solid #6DC7D0;
		font-size: 11px;
		background-color: #F8F8F8;
	}

	.thumbnailmid{
		width: 19%;
		margin-left: 3%;
		margin-right: 3%;
		height: 40vh; 
		float: left;
		text-align: center;
		margin-top: 35px;
		padding-bottom: 20px;
		border-radius: 3px;
		padding-top: 0px;
		border-bottom: 5px solid #6DC7D0;
		font-size: 11px;
		background-color: #F8F8F8;
	}

	.thumbnaillong{
		width: 19%;
		margin-left: 3%;
		margin-right: 3%;
		height: 63vh;
		float: left;
		text-align: center;
		margin-top: 35px;
		padding-bottom: 20px;
		border-radius: 3px;
		padding-top: 0px;
		border-bottom: 5px solid #6DC7D0;
		font-size: 11px;
		background-color: #F8F8F8;
	}
}

@media (max-width: 1200px){
	
	.thumbnailshort{
		width: 21%;
		margin-left: 2%; 
		margin-right: 2%;
		height: 53vh; 
		float: left;
		text-align: center;
		margin-top: 35px;
		padding-bottom: 20px;
		border-radius: 3px;
		padding-top: 0px;
		border-bottom: 5px solid #6DC7D0;
		font-size: 11px;
		background-color: #F8F8F8;
	}
	
	.thumbnailmid{
		width: 21%;
		margin-left: 2%;
		margin-right: 2%;
		height: 40vh; 
		float: left;
		text-align: center;
		margin-top: 35px;
		padding-bottom: 20px;
		border-radius: 3px;
		padding-top: 0px;
		border-bottom: 5px solid #6DC7D0;
		font-size: 11px;
		background-color: #F8F8F8;
	}
	
	.thumbnaillong{
		width: 21%;
		margin-left: 2%;
		margin-right: 2%;
		height: 63vh;
		float: left;
		text-align: center;
		margin-top: 35px;
		padding-bottom: 20px;
		border-radius: 3px;
		padding-top: 0px;
		border-bottom: 5px solid #6DC7D0;
		font-size: 11px;
		background-color: #F8F8F8;
	}
}
	
.gallery .thumbnailmid h4{
	margin-top: 5px;
	margin-bottom: 5px;
	color: #52BAD5;
	text-align: center;
	padding-left: 5px;
	padding-right: 5px;
	font-size: 12px;
}

.gallery .thumbnailmid p{
	margin-top: 0px;
	color: #B3B3B3;
	text-align: center;
	padding-left: 5px;
	padding-right: 5px;
}

.gallery .thumbnaillong h4{
	margin-top: 5px;
	margin-bottom: 5px;
	color: #52BAD5;
	text-align: center;
	padding-left: 5px;
	padding-right: 5px;
	font-size: 12px;
}

.gallery .thumbnaillong p{
	margin-top: 0px;
	color: #B3B3B3;
	text-align: center;
	padding-left: 5px;
	padding-right: 5px;
}

.gallery .thumbnailshort h4{
	margin-top: 5px;
	margin-bottom: 5px;
	color: #52BAD5;
	text-align: center;
	padding-left: 5px;
	padding-right: 5px;
	font-size: 12px;
}

.gallery .thumbnailshort p{
	margin-top: 0px;
	color: #B3B3B3;
	text-align: center;
	padding-left: 5px;
	padding-right: 5px;
}
/*************************************/

/******** thumbnail for video ********/
.thumbnailvid{
	width: 45%;
	height: 440px;
	text-align: center;
	float: left;
	margin-top: 35px;
	padding-bottom: 20px;
	margin-left: 2%;
	margin-right: 2%;
	border-radius: 3px;
	padding-top: 0px;
	border-bottom: 5px solid #6DC7D0;
	font-size: 12px;
	background-color: #F8F8F8;
}

.gallery .thumbnailvid h4{
	margin-top: 5px;
	margin-bottom: 5px;
	color: #52BAD5;
	text-align: left;
	padding-left: 5px;
	padding-right: 5px;
}

.gallery .thumbnailvid p{
	margin-top: 0px;
	color: #B3B3B3;
	text-align: left;
	padding-left: 5px;
	padding-right: 5px;
}
/**************************************/

/**** merged from commonSuper.css *****/
#submit{
	width: auto;
	font-weight: bold;
	font-size: normal;
	color:#336699;
	font-family: Arial, Helvetica, sans-serif;
	border-radius: 2px;
	padding: 3px 5px;
}

#submit:hover{
	color:brown !important;
	cursor: pointer;
}

#inputfile{
	font-weight: normal;
	font-size: medium;
	font-family: Arial, Helvetica, sans-serif;
	border:none;
}

input, textarea{
	margin-left: 1px;
	padding: 5px;
	border: solid 3px darkgrey;
	font: normal 15px/1 sans-serif;
	line-height: 125%;
}

input{
	width: 25%;
}

textarea{
	width: 50%;
	height: 25vh;
	color:darkcyan;
}
	
form label{
	margin-left: 1px;
	color:black;
	line-height: 200%;
}

table{
	margin-left: 1%;
	margin-right: 1%;
	margin-top: 5px;
	margin-bottom: 5px;
	border-style: solid;
	border-collapse: collapse;
	border-spacing: 0px;
	width: 98%;
}

th{
	background-color: #cc6600;
	text-align: left;
}

td, th{
	font-weight: normal;
	border: thin dotted gray;
	padding: 5px;
}

td{
	font-size: 85%;
}

button{
	background-color: #224488;
	color: cornsilk;
	border-radius: 2px;
	padding: 2px 5px;
	font-size: 1em;
	text-align: center;
	border: solid darkgrey;
}

button:hover{
	color: darkorange;
	cursor: pointer;
}

.butt{
	background-color: #09757e;
	color: white;
	border-radius: 2px;
	padding: 2px 5px;
	font-size: 1em;
	text-align: center;
	border: solid darkgrey;
}

.butt:hover{
	color: gold;
	cursor: pointer;
}

span.reply{
	background: lightyellow;
	color: darkred;
	border-radius: 2px;
	padding: 2px 3px;
	font-size: 1.1em;
	font-weight: bold;
	text-align: center;
}

span.edit{
	/*background: dimgrey;*/
	color: black;
	/*border-radius: 2px;*/
	padding: 3px 10px;
	font-size: 1em;
	text-align: center;
}

span.editsmall{
	background: dimgrey;
	color: white;
	border-radius: 2px;
	padding: 2px 3px;
	font-size: 0.8em;
	text-align: center;
}

span.numbar{
	background: black;
	color: white;
	border-radius: 3px;
	padding: 5px;
	font-size: 1em;
	font-weight: 600;
	text-align: center;
}

.narrow{
	width: 70%;
	margin-left: 15%;
	margin-right: 15%;
	margin-top: 5px;
	margin-bottom: 5px;
}

.tabletext{
	border-style: none;
}

.tabletext td{
	font-weight: normal;
	border-style: none;
	font-size: 100%;
}

.resume{
	width: 75%;
	margin-left: auto;
	margin-right: auto;
}

.resume th{
	width: 100px;
	text-align: center;
	background-color: goldenrod;
}

.resume td{
	text-align: left;
}

aside{
	background-color: antiquewhite;
	border: double;
	margin: 20px;
	padding-left: 10px;
	padding-right: 10px;
}
/**************** code ****************/
.precode{
	font-family: monospace, 'Courier New', Courier;
	font-weight: normal;
	color: black;
	font-size: small;
	tab-size: 4;
}

pre{
	font-family: 'Courier New', Courier, monospace; 
	font-weight: normal;
	color: black;
	font-size: medium;
	tab-size: 4;
}
/**************************************/

#forumimg1st{
	transition: transform 0.25s ease;
	cursor: zoom-in;
}

.zoomed1st{
	transform: translate(200px,0) scale(2.5);
}

#forumimg2nd{
	transition: transform 0.25s ease;
	cursor: zoom-in;
}

.zoomed2nd{
	transform: translate(0,0) scale(2.5);
}

#forumimg3rd{
	transition: transform 0.25s ease;
	cursor: zoom-in;
}

.zoomed3rd{
	transform: translate(-200px,0) scale(2.5);
}

.qbody{
	color: black;
	margin-top: 7px;
	/*text-indent: 1em;*/
}

.abody{
	color: darkgreen;
	margin-top: 7px;
	/*text-indent: 1em;*/
}

.click{
	background:black; 
	color:white; 
	padding-left: 1px;
	padding-right: 1px;
	border-radius: 2px;
	margin-left: -2px;
	font-size: 0.8em;
}

.clickpos{
	text-align: center;
	padding-top: 10px;
	padding-bottom: 10px;
}

.feet{
	background: darkseagreen;
	font-size: small; 
	color: darkblue;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
}

}