﻿@charset "utf-8";

/***************

TsingStone Info&Art Design Studio

the Academy of Arts & Design, Tsinghua University

Author:Jason Woo 

***************/

html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,figure,figcaption,code,del,dfn,em,image,q,dl,dt,dd,ol,ul,li,fieldset,form,legend,table,tf,tr,th {

	border: 0px;

	padding: 0px; 

	font-size: 100%; 	

	margin: 0px; 

	font-family: inherit; 

	-webkit-font-smoothing: subpixel-antialiased;

	-webkit-text-size-adjust: 100%;

	font-weight:normal;

}



body {

	background:#989895;

	color: #444;

	line-height: 1.6em;

	font-size: 12px;

	font-family:Arial, Helvetica, sans-serif;

	margin: 0px;

}





input,textarea,select

{

	font-family:Arial, Helvetica, sans-serif;

	background-color: #FFFFFF;

	font-size:12px;

	outline:none;

	padding:0;

	-webkit-appearance: none;

	border-radius: 0;

}





img {

	border: 0px;

	vertical-align:bottom;

	-ms-interpolation-mode: bicubic;

}



a,a:link {

	text-decoration: none;

	color:#333;

}



a:hover

{

	text-decoration:none;

	color:#ff7800;	

}



ul, li {

	list-style-type:none;

}

.left {

	float: left;

}

.right {

	float: right;

}



.clearfix:after {

	display:block;

	content:'';

	clear:both;

	height:0px;

	visibility: hidden;

}



.yahei{

	font-family:"\5FAE\8F6F\96C5\9ED1";

}





h1,h2,h3,h4

{

	font-family:"\5FAE\8F6F\96C5\9ED1";

}



.relative

{

	position:relative;

}



.clearfix {

*display:table;

*zoom:1;

}



.clear

{

	clear:both;

	overflow:hidden;

	height:0;	

}



*::selection {

    background:#555;

    color: #FFFFFF;

    text-shadow: none;

}



*::-moz-selection

{

    background:#555;

    color: #FFFFFF;

    text-shadow: none;

}



.mainWrap

{

	width:990px;

	margin:auto;	

}





.ie6

{

	text-align:center;

	font-size:14px;

	background:#FC6;

	line-height:60px;

}



.ie6 span

{

	float:right;

	margin-right:30px;

	cursor:pointer;

}







/*comm section header footer*/



header

{

	background:#056363 url(../images/bg_01.jpg) no-repeat center center;

	padding-top:25px;

}



header .logo

{

	float:left;

	margin-left:10px;

	padding-bottom:20px;

}



header .navwrap .smenu

{

	display: none;

}



header .search

{

	float:left;

	margin-left:42px;

	padding-top:15px;

}



header .search input

{

	border:0;

	height:36px;

	float:left;

	line-height:34px;

	/*width:220px;*/

	width: 290px;

	padding:0 10px;

}



header .search a

{

	background:#006060;

	display:block;

	height:36px;

	padding:0 15px;

	color:#fff;

	font-size:22px;

	float:left;

}



header .search a i

{

	line-height: 36px;

	cursor: pointer;

}





header .ulink

{

	float:right;

	margin-right:26px;

	padding-top:18px;

}





header .ulink li

{

	float:left;

	padding:2px;

}



header .ulink li i

{

	line-height: 27px;

	cursor: pointer;

}





header .ulink li .circle

{

	height:26px;

	width:26px;

	text-align:center;

	font-size:16px;

	color:#006060;

	display:block;

	background: #fff;
}



header .ulink li .circle:hover

{

	background:#f4930a;	

	color:#fff;

}



header .ulink li.socialnet

{

	position: relative;

	z-index: 1;

}



header .ulink li.socialnet:hover div

{

	display: block;

}



header .ulink li.socialnet div

{

	position: absolute;

	background:#fff;

	width: 130px;

	height: 130px;

	top: 45px;

    left: -52px;

    border:1px solid #ccc;

    display: none;

    z-index: 1;

}



header .ulink li.socialnet div i

{

	border-color: transparent;

	border-style: solid;

	border-width:10px;

	display: block;

	height: 0;

	position: absolute;

	width: 0;

	border-bottom-color:#ccc;

	border-top-width:0;

	left:50%;

	margin-left:-8px;

	top:-10px;

}



header .ulink li.socialnet div i em {

	border-color: transparent;

	border-style: solid;

	border-width:10px;

	display: block;

	height: 0;

	position: absolute;

	width: 0;

	border-bottom-color:#fff;

	border-top-width:0;

	left:-10px;

	top:1px;

}









header .ulink li .en

{

	display:block;

	background:#f4930a;

	line-height:26px;

	color:#4c2270;

	padding:0 15px;

}





header .ulink li .en:hover

{

	background:#fff

}



header .ulink li .div

{

	padding:0 12px 0 8px;

}



header .ulink li.thuhome a,header .ulink li.thuold a

{

	color:#fff;

	font-size: 12px;

	line-height: 26px;

	margin-left: 20px;

}



header .ulink li.thuhome a:hover,header .ulink li.thuold a:hover

{

	color: #f4930a;

}



header .topwraper

{

	padding-bottom:0;

	z-index: 11;

}



header .navwrap

{

	border-top:1px solid #004000;

}



header .navwrap li

{

	float:left;

	font-size:15px;

	position:relative\9;

	z-index:10\9;
margin-left: 25px;
}



header .navwrap li a

{

	display:block;

	padding:0 6px;

	line-height:60px;

	height:60px;

	color: #fff;

}



header .navwrap li a.current

{

	border-bottom:3px solid #f4930a;

	height:57px;

}





header .navwrap li a:hover

{

	color:#f4930a;	

}



.content

{

	background:#f0f2f1 url(../images/bg_02.jpg) center top no-repeat;

}



.hideonpc

{

	display: none;

}



footer

{

	background:#989895;

	padding: 35px 0;

}



footer .thulogo

{

	float: left;

}



footer .copyright

{

	float: left;

	color: #d4d4d4;

	padding-left: 40px;

}



footer .copyright span

{

	color: #fff;

	display: block;

	padding: 2px 0 5px 0;

}



footer .copyright span a

{

	color: #fff;

}



footer .copyright span a:hover

{

	color: #fff;

}





#nav ul

{

	display:none;

	position:absolute;

	top:60px\9;

	left:0\9;

	border:1px solid #ccc\9;

	background:#fff;

	z-index:100;

	width:150px;

	padding:5px 0;

	margin-left:-35px;

	height:auto;

	box-shadow:0px 0px 5px #666;

}



#nav li:hover ul

{

	display: block;

}



#nav ul li

{

	float:none;

	display:block;

	border:none;

	background:none;

	height:auto;

	padding:0;

	position:static\9;

}



#nav ul a

{

	width:auto;

	text-align:left;

	font-size:14px;

	line-height:42px;

	display:block;

	background:#fff;

	height:auto;

	float:none;

	border:none;

	text-align:center;

	color: #2F124A;

}



#nav ul a:hover

{

	background:#F1EEE7;

}





#nav ul i {

	border-color: transparent;

	border-style: solid;

	border-width:10px;

	display: block;

	height: 0;

	position: absolute;

	width: 0;

	border-bottom-color:#ccc;

	border-top-width:0;

	left:50%;

	margin-left:-8px;

	top:-10px;

}



#nav ul i em {

	border-color: transparent;

	border-style: solid;

	border-width:10px;

	display: block;

	height: 0;

	position: absolute;

	width: 0;

	border-bottom-color:#fff;

	border-top-width:0;

	left:-10px;

	top:1px;

}







/*action*/

.motion

{

	transition:all .3s ease-in;

}



.pager {clear: both;margin:25px 0 ;font-size:14px;	font-family:Arial, Helvetica, sans-serif;text-align:center;}

.pager a {	background:none; border: 1px solid #006060;	color: #006060;	display: inline-block;	line-height: 32px;	margin: 0 2px;	padding: 0 10px;	height:32px;	border-radius:3px;	vertical-align:middle;}

.pager b {	background:none; color: #461B6E; display: inline-block;	line-height: 32px;	margin: 0 2px;	padding: 0 10px;	height:32px;vertical-align:middle;}

.pager a:hover, .pager a.current {	background-color: #006060;	border:none;	color: #FFFFFF;	font-weight: bold;	text-decoration: none;	line-height: 34px;	height:34px;	padding: 0 11px;}

.pager .p {	font-size:22px;}

.pager input {height: 32px;line-height: 32px; width: 30px;text-align: center;background: none;border: 1px solid #aaa; vertical-align: middle;border-radius:3px;margin:0 5px;}

.pager span {padding: 0  0 0 20px;color: #777}



@media screen and (max-width:800px)

{

	header

	{

		background-position: left top;

		padding-top: 0;

	}

	.content

	{

		background-position: left top;

	}

	.mainWrap

	{

		width:100%;

		margin:auto;

		min-width: 320px;

	}

	header .ulink

	{

		float:none;

		padding:5px 0 0 10px;

		margin: 0 0 20px 0;

		border-bottom: 1px solid #004000;

		position: relative;

	}



	header .ulink li

	{

		padding: 0;

		line-height: 40px;

	}



	header .ulink li.socialnet

	{

	}



	

	header .ulink li.socialnet span .circle

	{

		margin: 0

	}



	header .ulink li .circle

	{

		border:0;

		display: inline-block;

		font-size: 18px;

		height: auto;

		width: auto;

		border-radius: 0;

		padding: 0px 10px;

		background: none;

		color: #fff;

	}



	header .ulink li .circle:hover

	{

		background: none;

		color: #f4930a;

		border:0;

	}



	header .ulink li .en

	{

		background: none;

		color: #f4930a;

		line-height: inherit;

	}



	header .ulink li .en:hover

	{

		background: none;

		color: #f4930a;

	}



	header .ulink li.mr

	{

		position: absolute;

		right: 80px;

	}



	header .ulink li.mr.thuold

	{

		right:90px;

	}

	

	header .ulink li.mr.thuhome

	{

		right: 20px

	}



	header .logo

	{

		margin-left:20px;

		padding-bottom:0;

	}



	header .logo img

	{

		width: 180px;

	}



	

	header .topwraper

	{

		padding-bottom: 20px;

	}



	header .navwrap

	{

		border-top:none;

		position: relative;

	}



	header .navwrap .smenu

	{

		font-size: 18px;

		background: #F6920A;

		height: 38px;

		width: 38px;

		color: #fff;

		line-height: 38px;

		text-align: center;

		position: absolute;;

		right: 20px;

		top: -57px;

		cursor: pointer;

		display: block;

		z-index: 12;

	}



	header .navwrap .smenu.active

	{

		right: 250px;

		background: rgba(62,58,57,0.9);		

	}



	header .navwrap #nav

	{

		position: absolute;

		width: 250px;

		z-index: 999;

		background: #4C4F52;

		right:0;

		top:-57px;

		padding: 10px 0;

		display: none;

	}



	header .navwrap #nav.active

	{

		display:block;

		background: rgba(62,58,57,0.9);		

	}



	header .navwrap #nav li

	{

		float: none;

	}



	header .navwrap #nav li a

	{

		line-height: 40px;

		padding: 0 0 0 35px;

		color: #fff;

		font-size: 14px;

		height:auto;

	}

	

	header .navwrap #nav li a.current

	{

		border-bottom:none;

	}

	





	header .navwrap #nav li a:hover

	{

		background: #6F7174;

	}



	#nav li:hover ul

	{

		display: none;

	}

		

	header .search

	{

		position: absolute;

		right: 0;

		background: #4C4F52;

		top: 571px;

		z-index: 999;

		height: 70px;

		padding: 30px 0 0 30px;

		width: 220px;

		margin: 0;

		border-top: 1px solid #777;

		display: none;

	}

	header .search.active

	{

		display:block;

		background: rgba(62,58,57,0.9);

	}



	header .search input

	{

		width: 135px;

		border: 0;

	}



	header .search a

	{

		background: #fff;

		color: #F6920A;

		height: 36px;

		line-height: 36px;

		font-size: 16px;

		padding: 0 10px;



	}



	



	footer .thulogo

	{

		float: none;

		text-align: center;

	}



	footer .copyright

	{

		text-align: center;

		padding:20px 20px 0 20px; 

		float: none;

		width: auto;

	}



	footer .copyright a

	{

		display: inline-table;

	}



	.showonmobile

	{

		display:block !important;

	}



	.subchannel .pager

	{

		display: none;

	}



	 .hideonpc

	 {

	 	display:block !important;

	 }

}



@media screen and (max-width:320px)

{

	header .ulink li.mr

	{

		right:120px;

	}

	

	header .ulink li.mr.thuold

	{

		right:73px;

	}

	

	header .ulink li.mr.thuhome

	{

		right:10px;

	}

}
