@charset "utf-8";
/*@import url(http://fonts.googleapis.com/earlyaccess/cwtexyen.css);*/
@import "../fonts/cwtexyen.css";
/*font-family:'cwTeXYen', Calibri, sans-serif; */

@import url(https://fonts.googleapis.com/css?family=Merriweather);
/*font-family: 'Merriweather', serif;*/ /* for 所內徵才的jobNo用*/


/* ================================================================== CSS reset & default ============================ */
* { padding:0; margin:0; }
html, body { height:100%; }
body { width:100%; margin:0 auto; background-color:#FFF; color:#333; }
h1, h2, h3 { font-family: Calibri, sans-serif; font-weight:bold; padding:1% 1% 1% 0; margin-bottom:10px; }
h1 { font-size:24px; color:#514fa2; }
h2 { font-size:22px; color:#333; }
h3 { font-size:20px; }
p {line-height:1.5em; /*text-align:justify; word-break:break-all;*/ }
ul, ol, li { list-style:none; } 
a { text-decoration:none; }
i { margin-right:10px; }
:focus { outline:none;/*清除點選連結時出現的外框。若設計無障礙網頁，則不可設定此項*/ } 
.dateBlock { display:block; margin:5px 0; color:#999; text-align:right; }
.dateSpan { padding-left:10px; color:#999; font-size:13px; }
.update { color:#F00; }
.jobNo { display:inline-block; margin-bottom:0px; color:#eb1a2f; font-family: 'Merriweather', serif;}
#hiring { position:fixed; top:300; right:0; }
#hiring img { width:100%: heigh:auto; }
#pageNo { display:none;/*隱藏網頁所在頁面代碼*/ } 


/* ================================================================== <header> ============================ */
header { position:relative; top:0px; width:100%; height:105px; background-color:#EEE; z-index:99999; }
	/* ===== <div id="banner"> ===== */
	#banner { position:relative; width:100%; max-width:1200px; margin:0 auto;}
	/* ===== <img id="logo"> ===== */
		/*#banner #logo { position:absolute; top:10px; left:0; width:380px; height:75px; }
		#banner #asiop90 { position:absolute; top:10px; left:390px; width:135px; height:90px; }*/
		#banner #logo { padding-top:10px; width:380px; height:75px; }
		#banner #asiop90 { padding-top:10px; width:120px; height:80px; }
		/* ===== <ul id="mainNav"> 主要導覽列 ===== */
		#banner #mainNav { position:absolute; top:0; right:0; height:30px; line-height:30px; font-family: Helvetica, Arial, 'LiHei Pro', '微軟正黑體', '新細明體', sans-serif; }
		#banner #mainNav li { float:left; }
		#banner #mainNav li a { display:block; /*font-family:'cwTeXYen', Calibri, sans-serif;*/ font-size:18px; padding:5px 10px 0; }
		#banner #mainNav li a:hover { color:#069; border-top:2px solid #069; }
		/* ===== <form id="cse-search-box"> 搜尋區 ===== */
		#banner #cse-search-box { position:absolute; width:200px; top:40px; right:10px;/* DIFFERENT WITH base.css */ }
		#banner #cse-search-box #searchWord { width:95%; height:20px; border-radius:10px; padding-left:5%; border:#CCC solid 1px; }
		#banner #cse-search-box i { position:absolute; right:0; top:1px; cursor:pointer; }
		
@media (max-width:1200px){ #banner { width:90%; margin:0 auto; } } /* DIFFERENT WITH base.css */
@media (max-width:768px){ header { height:155px; } 
						  #banner { width:95%; }
						  #banner #mainNav { top:75px; right:5px; }
						  #banner #mainNav li a:hover { border:none; }
						  #banner #cse-search-box { top:115px; right:15px;}  /* DIFFERENT WITH base.css */
						   #hiring { top:150; right:0; }
						  #hiring img { width:100px; } } 
@media (max-width:480px){ #banner #logo { width:250px; height:auto; }
						  #banner #asiop90 { padding-left:10px; width:90px; height:auto; }
						  #banner #mainNav li a { font-size:16px; }}

/* ================================================================== <nav 導覽列> ============================ */
#naven { position:relative; height:57px; z-index:10000; font-family: Calibri, sans-serif; }
#nav4mobileen { display:none; font-family: Calibri, sans-serif; } /*for Mobile使用*/


	/* ===== <ul id="globalNav"> 次要導覽列 ===== */
	#globalNav { position:absolute; top:7px; left:0; width:100%; z-index:-1; }
	#globalNav>li{ float:left; width:calc(100% / 9); /*每個連結寬度 100/10=10*/ }
	/* #globalNav>li>a { display:block; height:50px; border-left:#FFF solid 1px; background-color:#333; font-size:20px; color:#FFF; text-align:center; }  此設定未能使文字垂直置中，改由flex佈局(如下)*/
	#globalNav>li>a { display:flex; align-items:center; justify-content:center; 
					display:-webkit-flex; -webkit-align-items:center; -webkit-justify-content:center; 
					display:-moz-flex; -moz-align-items:center; -moz-justify-content:center; 
					display:-ms-flex; -ms-align-items:center; -ms-justify-content:center; 
	height:50px; border-left:#FFF solid 1px; background-color:#333; font-size:18px; color:#FFF; text-align:center; } /* DIFFERENT WITH base.css (1)使用display:flex; align-items:center; 已達文字垂直置中效果 需再加上justify-content:center; text-align:center; 才能使文字水平居中 */ 
	#globalNav>li>a:hover { background-color:#666; }
	#globalNav>li.navCurrent>a { background-color:#666; }
	#globalNav li ul { display:none; }
	#globalNav li ul li a { display:block; background-color:rgba(51,51,51,0.8); padding:5px; border-top:#FFF solid 1px; font-size:18px;/* DIFFERENT WITH base.css */ color:#FFF; } 
	#globalNav li ul li a:hover { background-color:#666; }

	/* ===== <div id="globalNavPoint"> 次要導覽列下方之滑動指標 ===== */
	#globalNavPoint { position:absolute; top:0; left:-300px; width:calc(100% / 9); height:7px; background-color:#333; z-index:-2;}



@media (max-width:980px){ #globalNav>li>a { font-size:18px; }
	 					  #globalNav li ul li a { font-size:16px; } } /* DIFFERENT WITH base.css */
						  
@media (max-width:768px){ #naven { display:none; } 
						  #nav4mobileen { display:block; width:100%; text-align:left; padding-bottom:1px; /*與上方<header>的距離*/}
						  #nav4mobileen #mobileNav { overflow:hidden; background-color:#F0F0F0; }
						  #nav4mobileen #mobileNav>li>a  { display:block; border-top:solid 1px #FFF; padding:10px 10px 10px 20px; font-size:20px;/* DIFFERENT WITH base.css */ color:#333; }
						  #nav4mobileen #mobileNav li ul { display:none; }
						  #nav4mobileen #mobileNav li ul li a { display:block; padding:5px 5px 5px 50px; font-size:18px;/* DIFFERENT WITH base.css */ color:#666; } }



/* ================================================================== #main ============================ */
#main { overflow:hidden; width:90%; max-width:1200px; margin:0 auto; padding:20px; }

	/* ===== <div id="content"> 主要內容區(2欄) ===== */
	#main .content { overflow:hidden; width:73%; float:left; min-height:200px; }
	
		/* ===== 各頁內容標題<h1> ===== */
		#main .content h1 { position:relative; height:40px; line-height:40px; border-left:5px solid #CCC; border-right:5px solid #CCC; background-color:#EEE; padding-left:2%;}
		#main .content h1 span { position:absolute; top:0; right:10px; }
		#main .content h1 span a { display:block; font-size:20px; color:#999; text-align:right; font-weight:normal; }
		#main .content h1 span a:hover { color:#514fa2;}

		
		/* ===== <article> 各頁內容區 ===== */
		#main .content article { padding:1% 1% 2% 1%; overflow:hidden; }		
		#main .content article p { margin-bottom:10px; }
		#main .content article p:last-child { margin-bottom:0px; }
		#main .content article ul { margin-left:20px;}
		#main .content article ul li { padding:5px; list-style:circle; }
		#main .content article>ul>li>img { display:inline-block; margin:0; width:auto; height:auto; } /* for directory_detail.php > 「學術著作」之"數學符號"使用*/
		#main .content article>img { display:block; width:100%; height:auto; margin:10px; }
		#main .content article img.building { float:left;/* 設定文繞圖 */ max-width:315px; } 
		#main .content article img.logo { float:left;/* 設定文繞圖 */ max-width:180px; } 
		#main .content article img.speaker { max-width:113px; } /* for「專題/通俗演講」 */
		#main .content article img.PI { max-width:131px; }/* for「研究人員」 */
		#main .content article img.Email { display:inline-block; margin:0; max-width:250px; }/* for「研究人員」 */
		#main .content article div iframe { max-width:100%; margin:10px auto 50px; } /*圖片100%*/

		/* ===== directory_detail.php 使用 ===== */
		#main .content section { padding:1% 1% 2% 1%; overflow:hidden; width:97%; border:#E8E8E8 1px solid; border-radius:10px; margin:0 auto;}
		#main .content section p { margin-bottom:10px; }
		#main .content section p:last-child { margin-bottom:0px; }
		#main .content section ul { margin-left:20px;}
		#main .content section ul li { padding:5px; list-style:circle; }
		#main .content section img { display:block; width:100%; height:auto; margin-right:10px; }
		#main .content section img.PI { float:left; max-width:131px;  }/* for「研究人員」 */
		#main .content section img.Email { display:inline-block; margin:0; max-width:250px; }/* for「研究人員」 */
		
		#main .content section section.sec_1-3col { float:left; width:31%; border:none; }
		#main .content section section.sec_2-3col { float:left; width:64%; border:none; }

		#main .content section section.sec_2-3col h2 { display:none; }
			
		@media (max-width:980px){ #main .content section section.sec_1-3col { width:97%; }
									#main .content section section.sec_2-3col { width:97%; } }
		@media (max-width:768px){ #main .content section section.sec_2-3col h2 { display:block; /*取消隱藏*/ }
									#main .content section img.PI { float:none;/*取消文繞圖*/  margin: 0 0 10px 0; }
									#main .content section article.PIInfo { margin:0 0 0 20px; } }


	

		/* ===== <div class="item">瀑布流item區塊設定 ===== */
		#main .content>article.masonryItem>.item { overflow:hidden; float:left; margin:1%; padding:1%; border:#CCC 1px solid; border-radius:10px; }
		#main .content>article.masonryItem>.item>a { display:block; height:40px; line-height:40px; margin:0 auto 5px auto; background-color:#F9B9BF;
											color:#eb1a2f; text-align:center; }
		#main .content>article.masonryItem>.item>a:hover { background-color:#eb1a2f; color:#fff; }
		#main .content>article.masonryItem>.item>article { width:96%; padding:2%; }
		#main .content>article.masonryItem>.item>article>h2 { margin-bottom:5px; }
		#main .content>article.masonryItem>.item>article>img { width:100%; margin:0px; }
		#main .content>article.masonryItem>.item>article>p { margin-bottom:5px; }
		/* ===== for「brow.php-物理所年報」之單行小區塊<div> ===== */
		#main .content>article.masonryItem>.item>a.yearReport { display:block; height:33px; line-height:33px; margin:0 auto; background-color:#FFF; color:#333; text-align:center; }
		#main .content>article.masonryItem>.item>a.yearReport:hover { font-weight:bold; }


		/* ===== directory.php的設定 ===== */
		#main .content>article.masonryItem>.item>article>p>span.tag { width:100px; border-right:1px solid #666; padding:3px 5px; font-weight:bold; margin-right:5px; background-color:#E1E1E1; }
		#main .content>article.masonryItem>.item>article>h2>span.name { font-size:26px; }


		/* ===== lecture.php的設定 ===== */
		#main .content>article.masonryItem>.item>article>p>span.category { padding:3px 5px; margin-right:5px; border:3px; color:#FFF; background-color:#eb1a2f; }
		#main .content>article.masonryItem>.item>article>p>span.host, 
		#main .content>article.masonryItem>.item>article>p>span.member { padding:3px 5px; margin-right:5px; border-radius:3px; color:#FFF; background-color:#01ac50;}
		#main .content>article.masonryItem>.item>article>p>span.date { font-size:20px; font-weight:bold;}
		#main .content>article.masonryItem>.item>article>p.title { font-weight:bold; }
		#main .content>article.masonryItem>.item>article>p.speaker { margin-left:10px; font-weight:bold; font-style:italic; }
		#main .content>article.masonryItem>.item>article>p.affiliation { margin-left:10px; font-style:italic; }
		#main .content>article.masonryItem>.item>article>p>span.note { color:#F00; font-weight:bold; }
		
		/* ===== lecture_colloquium.php的設定 ===== */
		#main .content>article.masonryItem>.item>article.colloquium {  }
		#main .content>article.masonryItem>.item>article.colloquium>div { overflow:hidden; }
		#main .content>article.masonryItem>.item>article.colloquium>div>.date { float:left; width:50px; height:30px; border-radius:50%; background-color:#F9B9BF; font-size:18px; font-weight:bold; color:#eb1a2f; padding: 15px 5px; }
		#main .content>article.masonryItem>.item>article.colloquium>div>.speaker { float:left; padding-left:10px; width:calc(100% - 80px); font-size:16px; font-weight:bold;}
		#main .content>article.masonryItem>.item>article.colloquium>div>.speaker>span.affiliation { font-style:italic; font-weight:normal; }
		#main .content>article.masonryItem>.item>article.colloquium>p.title { font-size:18px; font-weight:bold;}
		#main .content>article.masonryItem>.item>article.colloquium>a { display:inline-block; padding:3px; margin:2px 5px; border-radius:3px; background-color:#E7E7E7;}
		#main .content>article.masonryItem>.item>article.colloquium>p.host { margin-left:10px; }


		/* ===== resources.php的<p class="contactInfo">設定 ===== */
		#main .content>article.masonryItem>.item>article>p.contactInfo { color:#069; margin:0 0 10px 15px; }
		
		#main .content>article.masonryItem>.item_2column { width:43%; }
		#main .content>article.masonryItem>.item_3column { width:28%; }
		#main .content>article.masonryItem>.item_4column { width:20%; }
		#main .content>article.masonryItem>.item_5column { width:15%; }


		/* ===== <article> 各頁內容區之<table>的CSS ===== */
		/* ===== 共用的CSS ===== */
		#main .content article .table { display:table; /*overflow-x:auto;*/}
		#main .content article .tableMobile { display:none; } 		
		#main .content article .table .tr { display:table-row; }
		#main .content article .table .tr:hover { background-color:#E6E6E6; }
		#main .content article .table .th { display:table-cell; padding:10px; background:#CCC; font-weight:bold; }
		#main .content article .table .td { display:table-cell; padding:10px; border-bottom: 1px dotted #333; }
		
		/* ===== for 「學術諮詢委員會」、「人員名錄 > 子選單」表格使用 ===== */
		#main .content article .table .Name { width:20%; }
		#main .content article .table .Specialty { width:50%; }
		#main .content article .table .EmailIcon { width:10%; }
		#main .content article .table .EmailIcon img { max-width:25px; margin:0 auto; }
		#main .content article .table .PI { width:20%; }
		#main .content article .table .Office { width:10%; }
		#main .content article .table .Tel { width:15%; }
		#main .content article .table .Email { width:30%; }
		#main .content article .table .Email img { margin:0 auto; }
		#main .content article .table .Secretary { width:10%; }

		/* ===== for 「 研究成果」表格使用 ===== */
		#main .content article .table .achiAnnDate { width:15%; }
		#main .content article .table .achiTitle { }
		#main .content article .table .achiDownload { width:15%; }
		#main .content article .table .achiGroup { width:15%; }

		/* ===== for 「學術活動」(含研討會/專題演講/通俗演講)表格使用 ===== */
		#main .content article .table .Movie { width:10%; }
		#main .content article .table .Live { width:10%; }
		#main .content article .table .Date { width:10%; }
		#main .content article .table .Speaker { width:20%; }
		#main .content article .table .Host { width:20%; }

		/* ===== for 「研究群組 > 組秘書」表格使用 ===== */
		#main .content article .table .Group { width:20%; }
		#main .content article .table .Ext { width:10%; }


		/* ===== for 「所內徵才」表格使用 ===== */
		#main .content article .table .Unit { width:15%; }
		#main .content article .table .JobTitle { width:15%; }
		#main .content article .table .JobAnnounceDate { width:15%; }
		#main .content article .table .JobDeadlineDate { width:15%; }

		/* ===== for 「研究實習」表格使用 ===== */
		#main .content article .table .InternDuration { width:15%; }
		#main .content article .table .InternNo { width:15%; }

		/* ===== for 「優良論文獎」表格使用 ===== */
		#main .content article .table .period { width:25%; font-weight:normal; background-color:#FFF;  border-bottom: 1px dotted #333; }
		#main .content article .table .periodWork { width:75%; }




	/* ===== <div class="content_iframe"> 開啟iframe視窗用(1欄) ===== */
		/* ===== 共用CSS ===== */
	#main .content_iframe { width:100%; }
	#main .content_iframe h1 { position:relative; height:40px; line-height:40px; border-left:5px solid #CCC; border-right:5px solid #CCC; background-color:#EEE; padding-left:2%; }
	#main .content_iframe article { padding:1% 1% 2% 1%; overflow:hidden; }		
	#main .content_iframe article p { margin-bottom:10px; }
	#main .content_iframe article p:last-child { margin-bottom:0px; }
	#main .content_iframe article ul { margin-left:20px;}
	#main .content_iframe article ul li { padding:5px; list-style:circle; }
	#main .content_iframe article>img { display:block; width:95%; height:auto; margin:10px; }


		/* ===== for 「job_detail.php」(所內徵才-詳細資料)表格使用 (定義為通用之2欄(3:7)表格使用) ===== */
		#main .content_iframe article .table { display:table; /*overflow-x:auto;*/width:100%; }
		#main .content_iframe article .tableMobile { display:none; } 		
		#main .content_iframe article .table .tr { display:table-row; }
		#main .content_iframe article .table .tr:hover { background-color:#E6E6E6; }
		#main .content_iframe article .table .th { display:table-cell; padding:10px; background:#CCC; font-weight:bold; }
		#main .content_iframe article .table .td { display:table-cell; padding:10px; border-bottom: 1px dotted #333; }
		#main .content_iframe article .table .pctg30 { width:30%; text-align:right; }
		#main .content_iframe article .table .pctg70 { width:70%; }
		

		/* ===== for 「lecture_detail.php」(學術活動)使用(分2欄) ===== */
		#main .content_iframe article .lecturePhoto { float:right; }
		#main .content_iframe article .lectureInfo { float:left; width:70%; }
		#main .content_iframe article .lectureInfo .item { padding:5px; }
		#main .content_iframe article .lectureInfo .item .tag { font-weight:bold; font-size:18px; }
		@media (max-width:640px){
		#main .content_iframe article .lecturePhoto { float:none; }
		#main .content_iframe article .lectureInfo { float:none; width:100%; }
		#main .content_iframe article .lectureInfo .item { padding:5px; }
		#main .content_iframe article .lectureInfo .item .tag { font-weight:bold; font-size:18px; }
		} 


/* ===== for Mobile使用 ===== */
@media (max-width:768px){ 
	#main .content h1 { font-size:22px; } /*縮小h1字體大小*/
	#main .content h1 span { right:5px; } /*減少右邊距離*/
	#main .content h1 span a { font-size:18px; } /*縮小h1 > span字體大小*/
	#main .content article .table { display:none; }
	#main .content article .tableMobile { display:table; width:98%; margin:0 auto 10px auto; padding:1%; border:#CCC 1px solid; border-radius:10px;}
	#main .content article .tableMobile .tr { display:table-row; }
	#main .content article .tableMobile .th, #main .content article .tableMobile .td { display:table-cell; padding:1% 1% 1% 3%; }
	#main .content article .tableMobile .th { width:26%; border-bottom:#CCC 1px solid; background-color:#EEE; }
	#main .content article .tableMobile .td { width:66%; } }
		

		table { width:100%; margin-bottom:20px;}
		table caption { padding:10px; text-align: left; }
		table th { background:#CCC; padding:15px; }
		table td { border-bottom: 1px dotted #333; padding:10px; }
		table tr:hover { background-color:#E6E6E6; }
		
		
		/* ===== 「徵才資訊 > 研究實習」的CSS ===== */
		#tb_student_required th.requiredPI { width:20%; }
		#tb_student_required th.requiredPeriod { width:20%; }
		#tb_student_required th.requiredNumber { width:20%; }


	/* ===== <aside> 側邊內容區 ===== */
	#main aside { float:right; width:25%; }

	#main aside #aside_index { width:100%; }/*for 「物理人的研究生活花絮」、「物理人榮譽」*/
		#main aside #aside_index .block img { display:block; width:100%; max-width:300px; height:auto; }/*for 「徵才資訊」*/
	#main aside #aside_block { width:100%; }/*for 「所內徵才」、「研究實習」、「相關連結」 (載入aside.php用)*/
		
		/* ===== <div class="blockTitle">  for「物理人榮譽」  ===== 
		#main aside .block_jcarousel { margin-bottom:0px; }*/
		
		
		/* ===== <ul id="physLife"> for「物理人的研究生活花絮」 ===== */
		#main aside .block iframe { width:100%; height:auto; }
		#mediaspace { width:100%; height:auto; }


		/* ===== <div class="block"> for「首頁」 ===== */
			/* ===== <div class="block"> 之上方標題區塊 ===== */
		#main aside .block { width:96%; border:1px solid #CCC; margin:0 auto 20px auto; padding:2% 2% 4% 2%; border-radius:0 10px; }
		
		#main aside .block h2 { position:relative; height:40px; line-height:40px; background-color:#01ac50; color:#FFF; padding-left:2%; font-size:20px;/* DIFFERENT WITH base_en.css */ }
		#main aside .block h2 span { position:absolute; top:0; right:2%; }
		#main aside .block h2 span a { font-size:14px; text-align:right; font-weight:normal; color:#FFF; }
		#main aside .block h2 span a:hover { color:#CCC;}

		#main aside .block ul.asideBlockList li { padding:2%; }/*for 「所內徵才」、「研究實習」*/
		#main aside .block ul.asideBlockList li a { color:#333; }/*for 「所內徵才」、「研究實習」*/
		#main aside .block ul.asideBlockList li a:hover {color:#069;}/*for 「所內徵才」、「研究實習」*/
		#main aside .block ul.asideBlockList li img#icon { width:100%; max-width:265px; height:auto; }/*for 「相關連結」*/

		/* ===== <div class="innerNav"> for「各頁面」導覽列 ===== */
		#main aside .innerNav { width:96%; border:1px solid #CCC; margin:0 auto 20px auto; padding:2% 2% 4% 2%; font-family: Calibri, sans-serif;}
		#main aside .innerNav h2 { height:50px; line-height:50px; background-color:#333; color:#FFF; padding-left:2%; }
		#main aside .innerNav ul.innerNavList li   { padding:2%; }
		#main aside .innerNav ul.innerNavList li a { display:block; width:100%; padding-left:2%; font-size:18px; }		
		#main aside .innerNav ul.innerNavList li a:before { content:""; width:5px; height:5px; display:inline-block; background-color:#666; transform:rotate(45deg); margin-right:3%;}		
		#main aside .innerNav ul.innerNavList li a:hover { color:#069; }

		
@media (max-width:980px){ #main .content { width:63%; }
						   #main aside { width:32%; }
						   #main .content>article.masonryItem>.item_3column { width:44%; } 
						   #main .content>article.masonryItem>.item_4column { width:28%; }
						   #main .content>article.masonryItem>.item_5column { width:20%; } }
@media (max-width:768px){ #main .content { width:53%; } 
						  #main aside { width:43%; }
						  #main .content>article.masonryItem>.item_3column { width:94%; } 
						  #main .content>article.masonryItem>.item_4column { width:94%; }
						  #main .content>article.masonryItem>.item_5column { width:94%; }  }
@media (max-width:640px){ #main { width:90%; padding:40px 10px 20px 10px; }
						  #main .content { width:100%; } 
						  #main aside { width:100%; }
						  #main aside .innerNav { display:none; } }

/* ================================================================== #relationLink ============================ */
#relationLink { overflow:hidden; padding:20px 4%; background-image:url(../images/bg_footer.png); }
	#relationLink a { float:left; display:block; width:calc(16% - 20px); padding:10px; }
	#relationLink a #icon { width:100%; max-width:265px; height:auto; }	
	
@media (max-width:1600px){ #relationLink { padding:20px 2%; }
							#relationLink a { width:calc(20% - 20px); } }
@media (max-width:1200px){ #relationLink { padding:20px; }
							#relationLink a { width:calc(25% - 20px); } }
@media (max-width:980px){ #relationLink a { width:calc(33% - 20px); } }
@media (max-width:768px){ #relationLink a { width:calc(50% - 20px); } }
@media (max-width:480px){ #relationLink a { width:calc(100% - 20px); } }


/* ================================================================== #footeren ============================ */
#footeren { clear:both; min-height:250px; overflow:hidden; background-image:url(../images/bg_footer.png); background-repeat:repeat; padding:10px; 
		 font-family: Calibri, sans-serif; font-size:18px; color:#FFF; }

	#footeren #categoryArea { float:left; width:65%; overflow:hidden; }
		
		#footeren .category { float:left; width:19%; margin:1%; }
		#footeren .category_resource { width:30%; }
		#footeren .category_research { width:24%; }
		#footeren .category h3 { font-weight:bold; margin:10px 0 5px 0; }
		#footeren .category li a { display:block; color:#CCC; padding:1px; }
		#footeren .category li a:hover { color:#FFF; }
	
	#footeren #webInfo { float:right; width:32%; }
	#footeren #webInfo article  { padding:10px; }
	#footeren #webInfo article p { display: block; margin-bottom:5px; text-align:justify; word-break:break-all; }
	#footeren #webInfo article a { color:#CCC; }
	#footeren #webInfo article a:hover { color:#FFF; }
	#footeren #webInfo article iframe { width:100%; height:auto; max-height:400px; margin:0 auto 20px; }

@media (max-width:768px){
		#footeren #categoryArea { width:100%; }
		#footeren #webInfo { width:100%; margin-top:20px; }
}
@media (max-width:640px){
		#footeren .category { width:48%; }
}