/* ==============================================================
	TIGP WEBSITE:  general content styles
	
	working stylesheet; changes ongoing
	styles for TIGP [academia sinica] web, inner content pages  
	last updated:  05-07-2007
	by:  clt
=============================================================== */
	
	body{		
		background:url(../images_final/tile32_deepBlue.gif) #9C6 repeat top left;
		text-align:center;
				
		/*margin: -10px 0 0 0;*/
		margin: 0;
		padding: 0;
	}
	
/* CLEAR floats without nonsemantic markup; props to aslett et al. */	
	.postclear:after {
    	content: "."; 
	    display: block; 
    	height: 0; 
	    clear: both; 
    	visibility: hidden;
	}

	.postclear {display: inline-block;}

	/* Hides from IE-mac \*/
	* html .postclear {height: 1%;}
	.postclear {display: block;}
	/* End hide from IE-mac */
	
	
	/* to highlight the link of current page in that page's menu */
	body#page_home #nav_main a.home, body#page_about #nav_main a.about, body#page_academics #nav_main a.academics,  
	body#page_applying #nav_main a.applying, body#page_campus #nav_main a.campus, body#page_news #nav_main a.news,
	body#page_contact #nav_main a.contact
	{
		background:url(../images_final/gradV50h_orangefc0.jpg) #F30 repeat-x bottom left;
	}
	
	/* on portal pages, highlight home links */
	body#page_prospectives #nav_main a.home, body#page_students #nav_main a.home, body#page_visitors #nav_main a.home,
	body#page_forms #nav_main a.home,
	body#page_faq #nav_main a.home, body#page_sitemap #nav_main a.home, body#page_search #nav_main a.home,
	body#page_webFeedback #nav_main a.home {
		background:url(../images_final/gradV50h_orangefc0.jpg) #F30 repeat-x bottom left;
	}
	
	
	body#page_home #footer a.home, body#page_about #footer a.about, body#page_academics #footer a.academics,  
	body#page_applying #footer a.applying, body#page_campus #footer a.campus, body#page_news #footer a.news,
	body#page_contact #footer a.contact, 
	/* contact appears in acro as well */
	body#page_contact #acro a.contact, body#page_sitemap #acro a.sitemap, body#page_search #acro a.search,
	body#page_faq #acro a.faq, body#page_webFeedback #acro a.web_feedback
	{
		font-weight:bold;
		text-decoration: none;
	}		
	
	/* on portal pages, tool pages highlight home links */
	body#page_prospectives #footer a.home, body#page_students #footer a.home, body#page_visitors #footer a.home {
		font-weight: bold;
		text-decoration: none;
	}
	
	body#page_forms #footer a.home,
	body#page_faq #footer a.home, body#page_sitemap #footer a.home, body#page_search #footer a.home,
	body#page_webFeedback #footer a.home {
		font-weight:bold;
		text-decoration: none;
	}
	

	body.supplement {
		background-color:#FFF;
		background-image:none;
		margin: 2.0em;	
	}
	
	/* set width upper-bound to ___px */
	/* mad props to svend tofte for workaround for "max-width" in ie!!!
	online at http://www.svendtofte.com/code/max_width_in_ie/ */
	#main{	
		background:url(../images_final/bg_stripesTan.gif) #069 repeat top left;
		margin: 0 auto;
		padding: 0;
		text-align:center;
		height: auto;
		width: 880px;  /* adjust to liquid layout later */
		/*
		width: expression(document.body.clientWidth < 720? "720px": 
		document.body.clientWidth > 1200? "1200px" : "auto" );*/
		z-index: 2;
		
		/* pale yellow */
		border-left: 6px solid #F4F6CE;
		border-right:6px solid #F4F6CE; 
	}
	


/* HEADER:  TIGP HOME */

	/* header:  contains different bg image; larger banner text, logo, etc. */
	body#page_home #headerL{
		background:url(../images_final/header_home1250x160_warm.jpg) #000 top left no-repeat;
		margin:0;
		padding:0; 
		
		border-bottom:none;
				
		width: 100%; height: 142px;
				
		z-index: 48;
		text-align:left;
		float: left;
	}
		
/* HEADER:  CONTENT */
	
	/* header:  banner with names, logos, bg image */
	#headerL{	
		background:url(../images_final/header_1250x160_coolBlue.jpg) #000 no-repeat top left;
		margin:0;
		padding:0; 
				
		width: 100%; height: 120px;
				
		z-index: 48;
		text-align:left;
		float: left;
		border-bottom: 1px solid #F4F6CE;
	}
	
				
	/* styles for images in header */
	#headerL img {
		margin: 8px 0 0 28px;
		padding: 0;
		border:0;	
		float:left;
	}				
		
	#headerL h2 {
		color:#0FF;  /* #FF3366 */
		font-family:"Courier New", Courier, monospace;
		font-size: 22px;
		text-align: right;
		float:right;
		margin: 1em;
		padding: 0;
		text-indent:0;
		letter-spacing: 3px;
	}

/* ACRO, FOOTER NAV */
	#acro, #footer {
		background-color:#39C;
		clear: both;
		width: 100%;
		height: 32px;
		line-height: normal;
		color: #FFF;
		font-size: 11px;
		
		z-index: 5;
	}


/* acro:  contains tools [search | a-z | etc] menu, cut-out images */
	#acro {			
		margin: 0;
		padding:0;
		border-top: none;
		border-bottom: 3px solid #F4F6CE;

		background:url(../images_final/gradV50h_blueLite-beyond.jpg) #3399CC repeat-x bottom left;	
	}
	
	#acro ul {
		display: inline;
		margin: 0.6em 2.0em 0;
		padding:0;
		
		width: auto;
		float: right;
		text-align: left;
		list-style: none;
		/*border: 1px dotted #CCC;*/
	}
	
	#acro ul li {
		float: left;
		margin: 0;
		padding: 0;
	}
		
	#footer {			
	/* border combines with 2px from deco strip */	
		margin: 0;
		padding: 0;
		border-top: 1px solid #F4F6CE;
		border-bottom:none;
		background:url(../images_final/gradV50h_blueBeyond-lite.jpg) #3399CC repeat-x top left;
	}
	
	#footer div.link_list {
		margin: 0.6em auto 0;
		padding: 0;
		text-align: center;		
		/*border:1px dotted #CCC;*/
	}	
	
/* ======================== DECORATIVE ================================================================= */
	
/* single row decorative border 20px high (designs varied); place at top of content_wrap */
	.strip_deco {
	background:url(../images_final/openWork_14h_dddb5e.gif) #333 repeat-x center left;
	width:100%;
	height: 14px;
	clear:both;
	margin: 0;
	padding:0;
	border-top: 2px solid #F4F6CE;
	border-bottom: 2px solid #F4F6CE;
	
	}
	
	/* decorative hook for content pages; displays various */
	.deco40 {
		width:100%; 
		height:20px;
		
		background-color:#000;
		margin:0; 
		padding:0; 
		clear:both; 
		border:none;
	}


/* =========================== contains MAIN NAV BAR, runs below header ================== */
	#nav_main{	
		background:url(../images_final/gradV50h_orangefc0.jpg) #FF3300 repeat-x center left;
			
		margin:0;
		padding:0;
		text-align:center;
		width: 100%;
		height: auto;
		z-index:5;
			
		clear:both;
		
		/* keep this*/ 
		border-top: 1px solid #FC0;
		border-bottom: 1px solid #FC0;
	}
	
	

	/* use to clear floated link list; necessary to keep items within a floated bloc */
	.foot_clear {
		height:0;
		visibility:hidden;
		clear:both;	
	}
	
	/* in this bar location of user (following site map scheme) will be noted */
	#breadcrumb {
		background-color:#333;
		width:100%; height:auto;
		clear:both;
		
		margin: 0;
		padding:0;
		
		text-align:left;
	}
				

/* ========================= CONTENT section of page ============================================= */
/* possible page layouts (classes for body):  3-col, 2-col; adjust widths/space distribution accordingly */
			
	/* wrapper div around content "columns", content_l, content_r */
	.col3Layout #content_wrap {
		/* faux cols 2 white-tan */
		background:url(../images_final/fauxCols2_whiteTan2k.gif) #FFF repeat-y 70% 0;

		/*border: 1px dotted #CCC;*/				
		margin: 0 auto;
		padding: 0;
				
		float:right;
		text-align:center;
		width: 680px; /* adjust to liquid later */
		height: auto;
		z-index:5;
	}
					
	/* content columns within content_wrap */
	.col3Layout #content_1 {
		background-color:inherit;
		/*border:1px dotted #CCC;*/ 
				
		margin: auto;
		padding: 0;
		float:left;
				
		text-align:left;
		width: 70%;
		height: 100%;
		z-index:4;
	}
	
	
	#content_2 {
		/*border-left: 1px dotted #CCC;*/
		margin: auto;
		padding: 0;
		float:right;
				
		text-align:left;
		width: 29%;
		height: 100%;
		
		z-index:4;
	}
	
/* 2 column layout:  remove faux columns, widen content_1 */
	.col2Layout #content_wrap {
		/* single column */
		background-color: #FFF;  /* light tan #DCDCB6 */

		/* temp guideline 
		border: 1px dotted #CCC;*/				
		margin: 0 auto;
		padding: 0;
				
		float:right;
		text-align:center;

		width: 680px;
		height: auto;
		z-index:5;
	}

/* no content_2 in this layout */
	.col2Layout #content_1 {
		background-color:#FFF;  /* pattern overlay may be added */
		
		/* temp guideline 
		border:1px dotted #CCC; */
				
		margin: auto;
		padding: 0;
		float:left;
				
		text-align:left;
		width: 100%;
		height: 100%;
		
		z-index:4;
	}

/* no content_wrap in this layout */
.col1Layout #content_1 {
	background-color:#FFF; 
	/*background:url(../images_final/bg_stripesTan.gif) #CC9 repeat top left;*/
		
	/* temp guideline   
	border:1px dotted #CCC; */
				
	margin: 0 auto;
	padding:0;
	float:right;
				
	text-align:left;
	width: 100%;
	height: 100%;
		
	z-index:8;
}

/* contains content of col1Layout */	
	.frame {
		width:96%;
		height:100%;
		/*margin:1.8em auto;*/
		margin:0 auto;
		padding:0;
		background-color:#FFF;
		/*border:1px dotted #CCC;*/
		z-index:18;
	}
	
/* ======================= within CONTENT areas =================================== */	
/* class contains featured item with heading, image, text */
	.feature_main {
		border-bottom: 5px solid #99CCCC;
		/*border-top: 1px solid #99CCCC;*/
		text-align:left;
		width: 90%;
		margin:1.8em auto;
		padding:0;
		background-color:#FFF;		
	}
	
	.infoBloc {
		margin: 0 0 2.2em;	
	}
		
	
/* image styling for content sections; override for special instances */
	.feature_main img{
		display: block;
		margin: 5px;
		padding: 0;
		border: 3px solid #99CCCC;
		vertical-align:top;		
	}
	
/* ======================= class for R SIDE BAR content =========================*/
	.news_side {
		width: 90%;
		margin: 1.8em auto;
		padding: 0;
		border: 1px solid #CC9966;
		background-color:#BCBD93;  /* pale green tan */
		color:#666633;
	}
	
	.news_side p {
		margin: 1.2em auto;
		padding: 0;
		width: 90%;
		/*border: 1px dotted #996633;*/
		text-align:left;
	}
	
	.news_side img {
		display:block;
		margin:1em auto;
		padding: 0;
		border: 3px solid #CC9966;
	}

/* ========================= DATA TABLE styles =================================================== */
table.dataDisplay, table.infoChart {
	border-collapse:collapse;
	width:auto;
	margin:1.8em auto;
	border: 1px solid #CCC;	
}

/* some margin for  */
table.dataDisplay th h6, table.infoChart th h6 {
	margin: 0 1em;
	font-size: 13px;
	line-height: 1.4em;
	background: inherit;
}

table.dataDisplay td h6, table.infoChart td h6 {
	margin: 0;
	padding: 0;
	font-size: 12px;
	line-height: 1.4em;
	background: inherit;
}

table.dataDisplay th span, table.infoChart th span {
	font-weight: normal;
	font-size: 11px;
}

caption {
	font-size: 1.2em;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-weight:bold;
	color:#666;
	background:inherit;
	line-height:2.4em;
	margin: 0.8em auto;
}

table.dataDisplay th, table.infoChart th {
	height: 24px;
	padding: 0;
	font-weight: normal;
	text-align: left;
	vertical-align: middle;
}

table.dataDisplay td, table.infoChart td {
	padding: 8px;
	vertical-align:top;
	text-align: left;
	/*border-right:1px dotted #CCC;*/
}

td.numeric {
	text-align:right;
}

td.countryCell {
	text-align:left;
	width:40%;
}


thead {
	/*background-color:#333;*/
	background-color:#663;
	border-top:1px solid #CC9;
	border-bottom:1px solid #CC9;
	
	color:#FFF;
}


col {
	/*border-right:1px solid #CCC;*/
	border-right:1px solid #CC9;
}

col#percentage {
	border: none;
}

/* for ease of reading tables */
.odd {
	background-color:#DEDEBD;  /* light tan */
}

table.dataDisplay tr:hover {
	background-color:#666;
	color:#FFF;
}

thead tr:hover {
	background-color: transparent;
	color: inherit;
}

/* mainly links to TIGP partner institutions */
td a:hover strong {
	color:#006699;
}


/* ============================= PIC ROW ==================================== */	
/* for row of pics, equal height */
table.pic_row {
	height:auto;
	width:auto;
	margin: 5px auto;
	
	/* keep this */
	border:1px solid #CCC;
}

table.pic_row td {
	vertical-align: top;
	padding: 0;
}

table.pic_row td img {
	vertical-align: top;
	margin: 4px;
} 
	
table.pic_row td p, table.pic_row td ul {
	vertical-align:top;
	width: 90%;
	margin: 4px auto 8px;
	
}

table.pic_row td ul {
	padding: 0 0 0 1.2em;
}