/* vivienzhang.com CSS(style sheet) */
/* This script was written by Koli YAN for Vivien Zhang. I tried to make it easy and readable, if not, please contact me via koliyan.com. */




/*common*/

body
{
	background-color:#FFF;
	font-family:"Helvetica", "Arial", sans-serif;
	color: #333333;
	width:880px;
	height:920px;
	margin:0 auto;
}


	div#bodybody
	{
		width:880px;
		height:920px;
		overflow:hidden;
		margin-top:10px;
		margin-left:0px;
	}
	img
	{
		border:none;
	}
	div#name
	{
		 font-size:23px;
		 margin-left:740px;
		 margin-top:10px;
		 margin-bottom:0px;
		 position:absolute;
	}
	div#displaysharediv
	{
		top: 880px;
		margin-left:810px;
		position:absolute;
		width:0px;
		height:0px;
		display:block;
		background-color:#FFF;
		border: none;
		overflow:hidden;
		z-index:9999;
		font-size:16px;
	}
	div.copyrightdiv
	{
		 margin-left:30px;
		 margin-top:2px;
		 text-align:left;
		 overflow:hidden;
		 z-index:-1;
	}
	div#displayshare
	{
		margin-top:0px;
		margin-left:710px;
		position:absolute;
		font-size:12px;
	}
	a{text-decoration: none;}
	a:link {color:#999;}
	a:visited {color:#999;}
	a:active {color:#999;}
	a:hover {color:#000;}
	span.bottomtext{color:#999; font-size:10px;}
	a.hidden {color:#FFF;}
	a.hidden:hover {color:#00C;}
	.appendix a{color:#999;} a:hover{color:#000;}




/*top menu*/

	div#menubar
	{
		margin-left:15px;
		margin-top:25px;
		position:absolute;
		width:450px;
		height:24px;
		font-size:12px;
	}

	.kwicks
	{
		/* recommended styles for kwicks ul container */
		list-style: none;
		position: relative;
		margin: 0;
		padding: 0;
	}
	.kwicks li
	{
		text-align:center;
		width: 60px;
		height: 18px;
		/*do not change these */
		display: block;
		overflow: hidden;
		padding: 0;  /* if you need padding, do so with an inner div (or implement your own box-model hack) */
	}
	.kwicks.horizontal li
	{
		/* This is optional and will be disregarded by the script.  However, it should be provided for non-JS enabled browsers. */
		margin-right: 5px; /*Set to same as spacing option. */
		float: left;
	}
	a.menu_not:link {color:#333333;}
	a.menu_not:visited {color:#333333;}
	a.menu_not:active {color:#333333;}
	a.menu_not:hover {color:#000;}
	a.menu_now:link {color:#000;}
	a.menu_now:visited {color:#000;}
	a.menu_now:active {color:#333333;}
	a.menu_now:hover {color:#000;}

/*index.html*/
	div#welcome
	{
		 margin-top: 30px;
		 margin-left: 25px;
		 position:absolute;
		 width: 880px;
		 height: 852px;
		 overflow:hidden;
		 z-index: -1;
	}


/*works.html*/
	div#worksbar
	{
		 margin-top:60px;
		 margin-left: 15px;
		 position:absolute;
		 width:1060px;
		 height:34px;
		 font-size:12px;
		 overflow:hidden;
	}
	a.works:link {color:#83847b;}
	a.works:visited {color:#83847b;}
	a.works:active {color:#333333;}
	a.works:hover {color:#000;}
	a.works_actived:link {color:#000;}
	a.works_actived:visited {color:#000;}
	a.works_actived:active {color:#333333;}
	a.works_actived:hover {color:#000;}

	div#workscontent
	{
		margin-top:90px;
		margin-left:25px;
		position:absolute;
		width:850px;
		height:835px;
		overflow:hidden;
	}
  div#works_2015,div#works_2016,div#works_2017
		{
			height:0px;
			overflow-x:hidden;
			overflow-y:scroll auto;
		}

		div#works_2014
		{
			height:0px;
			overflow-x:hidden;
			overflow-y:scroll auto;
		}
		div#works_2013
		{
			height:0px;
			overflow-x:hidden;
			overflow-y:scroll auto;
		}
		div#works_2012
		{
			height:0px;
			overflow-x:hidden;
			overflow-y:scroll auto;
		}
		div#works_20102012
		{
			height:0px;
			overflow:hidden;
		}
		div#works_0000
		{
			height:0px;
			overflow-x:hidden;
			overflow-y:scroll auto;
		}
	span#drawings_title
	{
		color:#83847b;
		font-size:12px;
	}
	table#drawings_table
	{
		margin-top:16px;
	}

	p
	{
		clear:both;
		margin:0;
		padding:.5em 0;
	}
	td.menu
	{
		padding-left: 10px;
		padding-right: 10px;
	}
	td.menu:hover{color:#FFF;}
	td.workstable
	{
		width:180px;
		height:180px;
		background-color: #FFF;
		padding:3px;
	}
	td.workstable:hover{background-color:#83847b;}
	li{	list-style:none;}
	.fancybox-custom .fancybox-outer{box-shadow: 0 0 50px #222;}

  ul#works_2015_words,ul#works_2016_words,ul#works_2017_words
	{
		margin:0;
		padding:0;
	}
        ul#works_2014_words
	{
		margin:0;
		padding:0;
	}
	ul#works_2015_words li,ul#works_2016_words li,ul#works_2017_words li
	{
		font-size:12px;
	}
        ul#works_2014_words li
	{
		font-size:12px;
	}
	ul#works_2012_words
	{
		margin:0;
		padding:0;
	}
	ul#works_2012_words li
	{
		font-size:12px;
	}

/*texts.html*/

	div#texts
	{
		margin-top:60px;
		margin-left:30px;
		position:absolute;
		width:850px;
		height:834px;
		overflow-x:hidden;
		overflow-y:scroll auto;
		font-size:12px;
	}

/*news.html*/

	div#news
	{
		margin-top:60px;
		margin-left:30px;
		position:absolute;
		width:850px;
		height:834px;
		overflow-x:hidden;
		overflow-y:scroll auto;
		font-size:12px;
	}


/*cv.html*/

	div#CV
	{
		margin-top:60px;
		margin-left:30px;
		position:absolute;
		width:850px;
		height:834px;
		overflow-x:hidden;
		overflow-y:scroll auto;
		font-size:12px;
	}
	div#CV div
	{
		overflow:hidden;
	}
	.menu_showcontent
	{
		color:#999;
	}


/*contact.html*/

	div#contact
	{
		margin-top:60px;
		margin-left: 30px;
		position:absolute;
		width:850px;
		height:834px;
		overflow:hidden;
		font-size:12px;
	}