@charset "utf-8";
/* CSS Document */
/*
Author: Tzyychou Horng; 2009
Last Modified: 2009-07-21T16:47+08:00
Version: 0.8.50.0
*/

/*

Change Log
0.8.13-Hacked: expanding anchor area for IE6, IE7, IE8.
0.8.12-Hacked IE6, IE7's ignorance of transparency in h4.scro-title(s) by adding non-semantic  translucent divs upon those h4(s).
0.8.12-Fixed wrong background positioning in div.scro-content(s) in IE7.
0.8.12-Trimmed screen-resolution-oriented settings (css selectors).

To-do List
- Test cross-browser compatibility on screen-resolution-oriented settings.
- Add smaller background image and trimming background position settings for smaller screen resolutions.
- Add meta information for search engines accept those tags
- Add noscript section to be more friendly for those who disable / incapable to access  javascript functions in their browsers.
- Convert those raw video files to flv.
- Optimize images, scripts and css.

*/

/*Below is the style selectors for Kwicks*/

.kwicks {
	list-style: none;  
	position: relative;  
	margin: 0;  
	padding: 0.2em 0 0 0; 
	background-color: white; 
	}
  
 .kwicks li {
	 display: block;
	 overflow: hidden;  
	 padding: 0;  
	 cursor: pointer;  
	 float: left;
	 width: 140px;
	 height: 5em;
	 }
 
 .kwicks li a {
	 color: black;
	 text-decoration: none;
	 padding: 0.5em 1.5em 3em 0;
	 }
 
 .kwicks .sub-text {
	 color: #808080;
	 font-size: 0.85em;
	 margin-left: 0.5em;
	 text-transform: lowercase;
	 }
 
 /*End of the style selectors for Kwicks*/

body {
	font-family: 蘋果儷中黑, 微軟正黑體, 文泉驛正黑, Arial, "Helvetica Neue", Helvetica, sans-serif;
	font-size: 0.9em;
	margin: 0;
	padding: 0;
	}

a {
	text-decoration: none;
	color: #5588aa;
	}

 a:hover {
	 text-decoration: underline;
	 }

a img {
	border: 0;
	}

/**/
#universe {
	width: 80%;
        max-width: 1152px;
        min-width: 640px;
        margin: 5em auto 0 auto;
	}

/**/
#header {
	border-bottom: 2px solid #828282;
	padding-top: 0.25em;
	}

#navigation {
	margin-top: 0.25em;
	border-top: 1px solid #aeaeae;
	}
 
/**/
/*Shared setting among layouts*/
 #left-column h4, #cv-left-column h4 {
	 margin-left: 1em;
	 }
  
 #left-column p, #cv-left-column p {
	 margin-left: 2%;
	 margin-right: 2%;
	 } 

/*Layout settings for Artworks*/
#content h2.section-title {
	font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
	font-weight: normal;
	font-size: 1.8em;
	letter-spacing: -0.06em;
	text-transform: lowercase;
	color: #999;
	margin: 0.2em auto 0.6em auto;
	}
	
#content #left-column {
	color: #666;
	font-size: 0.9em;
	margin-right: 3.5%;
	margin-left: 1%;
	margin-top: 2em;
	float: left;
	position: relative;
	width: 40%;
	border-top: 1px solid #aeaeae;
	}

#left-column h3 {
	 color: #525252;
	 font-size: 1.5em;
	 font-weight: normal;
	 margin-left: 1em;
	 margin-top: 0.1em;
	 text-align: left;
	}	 

/**/
#content #right-column {
	float: left;
	position: relative;
	width: 52%;
	margin-left: 2%;
	margin-top: 1em;
	}

#content #cv-right-column {
	float: left;
	position: relative;
	width: 30%;
	margin-left: 2%;
	margin-top: 1em;
	}

 #right-column h4, #cv-right-column h4 {
	 color: #666;
	 } 

#content p.article-author {
	text-align: right;
	margin: 0;
	color: #525252;
	font-weight: bold;
 }

.hidden-content {
	display: none;
	}

/*Layout settings for Curriculum Vitae and Review*/
#cv-left-column h3.item-title {
	 color: #bcbcbc;
	 font-size: 1.5em;
	 font-weight: normal;
	 margin-left: 1em;
	 margin-top: 0.1em;
	 text-align: right;
	 border-top: 1px solid #bcbcbc;
	 }

#cv-left-column h3.artist-name {
	color: #525252;
	text-align: left;
	padding-left: 1em;
	margin-top: 0.1em;
	font-style: normal;
	border-top: none;
	font-weight: normal;
	font-size: 1.3em;
	}	 
 
  #cv-left-column dl {          
	 color: #888;
	 }

 #cv-left-column dl.artist-bg {
	 color: #666;
	 }

 #cv-left-column dt {
	 color: #666;
	 margin-left: 2em;
	 font-weight: bold;
	 }
	
 #cv-left-column dd {
	 margin-top: 0.25em;
	 margin-left: 4em;
	 }
 
 #cv-left-column .ehb-title {
	 color: #666;
	 }	 

 #cv-left-column p.go-to-top {
	 text-align: right;
	 font-size: 0.9em;
	 text-transform: uppercase;
	 margin-right: 0;
	 }

  #cv-left-column p.go-to-top a {
	  color: #aeaeae;
	  border-bottom: 1px solid #aeaeae;
	  }

  #cv-left-column p.go-to-top a:hover {
	  text-decoration: none;
	  color: #888;
	  border-bottom: 1px solid #888;
	  }

#content #cv-left-column {
	color: #666;
	font-size: 0.9em;
	margin-right: 3.5%;
	margin-left: 1%;
	margin-top: 2em;
	float: left;
	position: relative;
	width: 60%;
	}

/*Specific layout setting for Review*/
#cv-left-column h3.article-title {
	 color: #525252;
	 font-size: 1.5em;
	 font-weight: normal;
	 padding-left: 1em;
	 margin-top: 0.1em;
	 text-align: left;
     border-top: 1px solid #aeaeae;
	 }

#cv-left-column blockquote p {
	margin: 0;
	padding: 0;
	}
#cv-left-column cite {
	float: right;
	font-style: normal;
	margin-right: 4%;
	}	

#cv-left-column ul.annotation {
	border-top: 1px solid #aeaeae;
	padding-top: 1em;
	margin-top: 3.5em;
	}

#cv-left-column ul.annotation li {
	list-style-type: none;
	color: #757575;
	margin: 0 2% 0.5em 0;
	}

/**/ 
#footer {
	margin-top: 5em;
	border-top: 1px solid #828282;
	color: #808080;
	font-size: 0.85em;
	clear: both;
	}

 #footer p {
	 margin-top: 0.1em;
	 margin-bottom: 3em;
	 }
 
 #footer a {
	 text-decoration: none;
	 color: #808080;
	 }