﻿/* Timothy Framework - www.timothyframework.com */
/* This work is licensed under the MIT License - http://www.opensource.org/licenses/mit-license.php */


/* Color Legend */


/* Reset */

html, body { margin: 0; padding: 0; border: 0;  
				background: transparent; font-size:10px; }

div, span, article, aside, footer, header, hgroup, nav, section,
h1, h2, h3, h4, h5, h6, p, blockquote, a, ol, ul, li, 
table, tr, th, td, tbody, tfoot, thead {
	margin: 0;
	padding: 0;
	border: 1px;
	vertical-align: baseline;
	background: transparent;
	}

img 	{ margin:0; padding:0; border:0; }
	
table { border-collapse: collapse; border-spacing: 0; }
	
input, select, textarea, form, fieldset {
	margin: 0; padding: 0; border: 0;
	}

article, aside, dialog, figure, footer, header, hgroup, nav, section { 
	display:block; }

h1, h2, h3, h4, h5, h6, p, li, blockquote, td, th, a, caption, em, strong, strike { 
	font-family: Arial, Helvetica, sans-serif;
	font-size:100%;
	font-weight: normal;
	font-style: normal;
	line-height: 100%; 
	text-indent: 0;
	text-decoration: none;
	text-align: left;
	color: #000;
	}

ol, ul { list-style: none; }


/* Global */

html 	{	}
/*body	{ background-color:#999999;} */
body	{ background-color:#FFFFFF;}



/* Headings */

h1, h2, h3, h4, h5, h6 { font-weight: bold; color: #000; }

h1 { font-size:32px; }
h2 { font-size:23px; }
h3 { font-size:16px; }
h4 { font-size:14px; }
h5 { font-size:14px; }
h6 { font-size:14px; }

h1 img, h2 img, h3 img, h4 img, h5 img, h6 img { margin: 0; }



/* Text Elements */

p           	{ color:#000; font-size:12px; line-height:150%;  }
p .left			{ margin: 1.5em 1.5em 1.5em 0; padding: 0; }
p .right 		{ margin: 1.5em 0 1.5em 1.5em; padding: 0; }

a           	{   }
a:link			{ color: #00f;  }
a:visited		{ color: #0f0;  }
a:active		{ color: #000;  }
a:focus			{ color: #666;  }
a:hover     	{ color: #f00;  }

blockquote  	{ color:#000; font-size:12px; }

strong      	{ font-weight: bold; }
em		      	{ font-style: italic; }

/* Images */



/* Lists */

ul          	{  }
ol          	{ list-style-type:decimal; }

ul li		    { color:#000; font-size:12px; }
ol li	     	{ color:#000; font-size:12px; }

dl          	{  	}
dt       		{  	}
dd          	{ 	}



/* Tables */

table       	{ width:100%; }

tr				{	}
.odd			{ background-color:#eee; }
.even			{ background-color:#fff; }

th          	{ font-weight: bold; }
thead, th    	{ background: #ccc; }

tbody			{   }

th,td,caption 	{ 	}
caption 		{ 	}

tfoot       	{	}
.tfooter		{ background-color:#ccc; text-align:center; font-style:italic; }

caption     	{ background: #efefef; }




/* Containers */

#wrapper          { width:1000px; margin:0px auto; background-color:#ffffff; }

#top              { width: 100%; padding:10px 0; overflow:hidden;}

#logo             { margin:0 0px -60px 0px; float:left;}

#intro            { float:right; margin:20px 150px 0 0; text-align: center;}
#intro h2         { font-size:23px; margin: 5px 150px 10px 0px;  }

#topnav           { background-color:#336699; clear:both;}
#topnav ul        { width:100%; float: left; margin:0px;background-color:#336699;}
#topnav ul li     { display:inline;}
#topnav ul li a   { float:left; padding: 10px 33px; font-size:16px;}
	
#topnav a:link    { color:#ffffff; }
#topnav a:visited { color:#ffffff; }
#topnav a:active  { color:#ffffff; }
#topnav a:hover   { color:#ffffff; background-color:#CC0000}
#topnav a:focus   { color:#ffffff; }

/* =========two-column design
#content          { float: left; width:600px; padding:20px; }
#content h1		  { margin:0 0 10px 0; font-size:20px;
					border-bottom:1px #cccccc solid; padding:20px 0; }
#content p		  { margin:10px 0; line-height:160%;font-size:15px; }
#content ul li    { margin:0 0 0 15px; line-height:160%; font-size:15px; list-style:disc;}

#content a:link    { color:#000000; color:blue; }
#content a:visited { color:#000000; color:blue; }
#content a:active  { color:#000000; color:blue; }
#content a:hover   { color:#000000; background-color:#CC0000}
#content a:focus   { color:#000000; color:blue; }

#rightside        { padding:20px; margin-left:625px;}
#rightside h2     { font-size:18px; margin: 37px 0 10px 0; border-bottom:1px #cccccc solid; padding:20px 0;}
#rightside p      { margin:20px 0; line-height:160%; font-size:15px; }

#news a:link    { color:#000000; color:blue; }
#news a:visited { color:#000000; color:blue; }
#news a:active  { color:#000000; color:blue; }
#news a:hover   { color:#000000; background-color:#CC0000}
#news a:focus   { color:#000000; color:blue; }
*/

#content h1		  { margin:50px 10px 10px 10px; font-size:23px;
					border-bottom:1px #cccccc solid; padding:10px 0; }
#content p		  { margin:10px 10px; line-height:160%;font-size:18px; }
#content ul li    { margin:0 10px 0 30px; line-height:160%; font-size:18px; list-style:disc;}

#content a:link    { color:#000000; color:blue; }
#content a:visited { color:#000000; color:blue; }
#content a:active  { color:#000000; color:blue; }
#content a:hover   { color:#000000; background-color:#CC0000}
#content a:focus   { color:#000000; color:blue; }

#rightside h2     { font-size:23px; margin: 20px 10px 10px 10px; border-bottom:1px #cccccc solid; padding:10px 0;}
#rightside p      { margin:10px 10px; line-height:160%; font-size:18px; }

#news a:link    { color:#000000; color:blue; }
#news a:visited { color:#000000; color:blue; }
#news a:active  { color:#000000; color:blue; }
#news a:hover   { color:#000000; background-color:#CC0000}
#news a:focus   { color:#000000; color:blue; }


#footer           { clear: both; background-color:#336699; padding:10px 0；}
#footer p		  { text-align:center;color:#ffffff;}

.date{   
    font-weight: bold;
    margin-right: 5px;
}

p.date {
    margin-top: 20px;
}

.smalltopmargin{
    margin-top:20px;
}

/* =============================================*/
* {box-sizing:border-box}

/* Slideshow container */
.slideshow-container {
  max-width: 650px;
  display:block;
  margin-left:auto;
  margin-right:auto;
  width:50%;
}

/* Hide the images by default */
.mySlides {
  display: none;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position:absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 10px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  background-color:#336699;
}

.prev {
  left:80px; }

/* Position the "next button" to the right */
.next {
  right: 5px;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}
/*====================================*/

/* Members */
#pi h2            { font-size:23px; margin: 50px 10px 0 10px; border-bottom:1px #cccccc solid; padding:10px 0;}

#pi_photo         { float: left; margin:40px 0px 0 10px; }
#pi_intro h3      { margin:20px 10px 0 210px; font-size:18px; } 
#pi_intro h4      { margin:20px 10px 0 210px; font-size:18px}
#pi_intro p       { margin:5px 10px 0 210px; font-size:18px}

#pi_intro a:link    { color:#000000;font-weight:bold; }
#pi_intro a:visited { color:#000000;font-weight:bold; }
#pi_intro a:active  { color:#000000;font-weight:bold; }
#pi_intro a:hover   { color:#000000; background-color:#CC0000}
#pi_intro a:focus   { color:#000000;font-weight:bold; }

 
table             { margin:0px 0px 0 210px; width:600px;}
table td          { padding: 8px 8px 0 0; font-size:18px; line-height:100%;}
#top table        { margin:0px 0px 0 0px; width:100%; }
#top table td        { padding: 8px 8px 0 0; font-size:18px; line-height:10%;}


#current          { clear: both; padding:10px 0；}
#current h2       { font-size:23px; margin: 50px 10px 0 10px; border-bottom:1px #cccccc solid; padding:10px 0;}

#member               { clear:both; }
#member_photo         { float: left; margin:-10px 0px 40px 10px; }
#member_intro h3      { margin:20px 0 0 210px; font-size:18px} 
#member_intro h4      { margin:20px 0 0 210px; font-size:18px}


#alumni          { clear: both; padding:10px 0；}
#alumni h2       { font-size:23px; margin: 50px 10px 0 10px; border-bottom:1px #cccccc solid; padding:10px 0;}
#alumni p        { font-size:18px; margin: 10px 10px 10px 10px; padding:0px 0;}

/* Teaching  */
#course h2               { font-size:23px; margin: 50px 10px 0px 10px; border-bottom:1px #cccccc solid; padding:10px 0;}
#course p                { font-size:18px; margin: 5px 10px 5px 10px; padding:10px 0;}
#undergraduate h2               { font-size:23px; margin: 50px 10px 0px 10px; border-bottom:1px #cccccc solid; padding:10px 0;}
#undergraduate p                { font-size:18px; margin: 5px 10px 5px 10px; padding:10px 0;}


/* Contact  */
#contact h2               { font-size:23px; margin: 50px 10px 0px 10px; border-bottom:1px #cccccc solid; padding:10px 0;}
#contact_info             { float: left; }
#contact_info h3          { margin:20px 0 0 10px; font-size:18px; } 
#contact_info h4          { margin:20px 0 0 10px; font-size:18px; line-height:160%;}
#contact_info p           { margin:0 0px 0 10px; line-height:160%; font-size:18px; }
#mae_image                {margin:20px 80px 0 600px; }
#contact_map              { clear:both; margin:20px 0 20px 120px; }

/* Publications  */
#journal h2               { font-size:23px; margin: 50px 10px 0 10px; border-bottom:1px #cccccc solid; padding:10px 0;}
#year h2                  { font-size:20px; margin: 50px 10px 0 10px; border-bottom:1px #cccccc solid; padding:10px 0;}
#journal ul li            { margin:10px 10px 10px 30px; line-height:160%; font-size:18px; list-style:disc;}



/* Opening */
#positions                { margin-bottom:20px; }
#positions h2             { font-size:23px; margin: 50px 10px 0 10px; border-bottom:1px #cccccc solid; padding:10px 0;}
#positions h3             { margin:20px 10px 10px 10px; line-height:160%; font-size:18px; }
#positions p              { margin:10px 10px 10px 10px; line-height:160%; font-size:18px; }
#positions ul li          { margin:0 10px 0 30px; line-height:160%; font-size:18px; list-style:disc;}

/* Research */
#project_1 h2             { font-size:23px; margin: 50px 10px 0 10px; border-bottom:1px #cccccc solid; padding:10px 0;}
#project_1 p              { margin:10px 10px 10px 10px; line-height:160%; font-size:18px; }
#project_1 ul li          { margin:0 10px 0 30px; line-height:160%; font-size:18px; list-style:disc;}
#project_1_m1             { float: left; margin:10px 20px 20px 20px; }

#project_2                  { clear:both; }
#project_2 h2             { font-size:23px; margin: 200px 10px 0 10px; border-bottom:1px #cccccc solid; padding:10px 0;}
#project_2 p              { margin:10px 10px 10px 10px; line-height:160%; font-size:18px; }
#project_2 ul li          { margin:0 10px 0 30px; line-height:160%; font-size:18px; list-style:disc;}
#project_2_m1             {float: center; margin:10px 20px 20px 90px; }

#project_3                  { clear:both; }
#project_3 h2             { font-size:23px; margin: 30px 10px 0 10px; border-bottom:1px #cccccc solid; padding:10px 0;}
#project_3 p              { margin:10px 10px 10px 10px; line-height:160%; font-size:18px; }
#project_3 ul li          { margin:0 10px 0 30px; line-height:160%; font-size:18px; list-style:disc;}
#project_3_m1             { margin:10px 0px 20px 90px; }

#project_4                  { clear:both; }
#project_4 h2             { font-size:23px; margin: 30px 10px 0 10px; border-bottom:1px #cccccc solid; padding:10px 0;}
#project_4 p              { margin:10px 10px 10px 10px; line-height:160%; font-size:18px; }
#project_4 ul li          { margin:0 10px 0 30px; line-height:160%; font-size:18px; list-style:disc;}
#project_4_m1             { margin:10px 0px 80px 90px; }
