@charset "utf-8";

body { margin: 0px; background: url("../images/bg-body.jpg"); }

/*----------------------------------------------------------------*/

div#whole { width: 100%; }
div#pageholder { min-height: 655px; }
div#pageheader { padding: 5px; }
div#contentholder { background: #fff; }
div#pagefooter { background: url('../images/thaibg.jpg'); min-height: 60px; text-align: center; padding: 20px 0px 20px 0px; }
div#pagefooter .title { font-size: 13px; color: #404; font-weight: bold; }
div#pagefooter .text { font-size: 13px; color: #404; }
div#pagefooter .link { font-size: 13px; color: #404; }
div#pagefooter .link a { color: #404; text-decoration: none; }
div#pagefooter .link a:hover { color: #929; }

/*----------------------------------------------------------------*/

/*-- drop-down menu --*/
div#pagemenubar { text-align: center; background: url("../images/bg-menu.jpg"); height: 60px; }
div#pagemenubar ul { position: relative; display: inline-block; width: 100%; margin: 0px; padding: 0px; }
div#pagemenubar ul li.mainmenusplit { position: relative; display: inline-block; list-style-type: none; padding: 0px; }
div#pagemenubar ul li.mainmenu { position: relative; display: inline-block; list-style-type: none; min-width: 150px; width: 19%; }
div#pagemenubar ul li.mainmenu a { padding: 20px 0px 10px 0px; display: inline-block; width: 100%; height: 30px;
									background: url("../images/bg-menu.jpg"); text-align: center; text-decoration: none;
									color: #bbb; }
div#pagemenubar ul li.mainmenu:hover a { color: #fff; border-bottom: 2px solid #fff; height: 28px; }

div#pagemenubar ul li.mainmenu ul { position: absolute; display: none; padding: 0px; z-index: 99999; }
div#pagemenubar ul li.mainmenu:hover ul { display: block; }
div#pagemenubar ul li.mainmenu ul li { list-style-type: none; width: 100%; }
div#pagemenubar ul li.mainmenu:hover ul li a { padding: 10px 0px 10px 10px; display: inline-block; width: 95%; background: #a48;
												text-align: left; border-bottom: 1px solid #534; }
div#pagemenubar ul li.mainmenu:hover ul li a:hover { display: inline-block; background: #635; }

/*----------------------------------------------------------------*/

div.loginbox { border: 1px #ccc solid; border-radius: 10px; width: 350px; text-align: left; padding: 15px; }
div.loginbox div.boxtopic { color: #818; padding: 0px 0px 20px 0px; }
div.loginbox table tr td { font-size: 14px; padding: 5px 5px 5px 0px; }

div.infobox { text-align: center; padding: 10px; font-size: 12px; color: #666; background: #eee; margin: 1px; }
div.infobox .username { padding: 10px; font-size: 13px; font-weight: bold; color: #66f; }
div.infobox input { font-size: 12px; }

/*----------------------------------------------------------------*/

div.slideholder { float: left; width: 75%; position: relative; }
div.slideshow { background: #000; min-width: 500px; height: 440px; }
/*div.slidethumbnail { background: #333; position: absolute; top: 430px; height: 20px; width: 100%; text-align: center; opacity: 0.7; }*/
div.nearslideholder { width: 25%; height: 440px; float: left; }
div.nearslide { /*background: #d9b;*/ background: url('../images/thaibg.jpg'); overflow: hidden; padding: 15px; height:410px; font-size: 28px; line-height: 60px; color: #423; }

div.divbar { background: url("../images/divbar.png"); height: 20px; }
div.section { padding: 0px; }

div.shortcutpanel { float: left; width: 300px; min-height: 800px; padding: 10px 0px 0px 0px; }
div.leftside { float: left; width: 300px; padding: 0px 0px 0px 0px; }
div.rightside { display: inline-block; background: #fff; float: left; padding: 40px 0px 40px 40px; width: 900px; }

div.director { margin: 10px 10px 10px 10px; background: #cac; }
div.director .image { padding: 10px 10px 10px 10px; text-align: center; }
div.director .topic { padding: 10px 10px 10px 10px; font-size: 18px; color: #636; background: #a6a; }
div.director .name { padding: 10px 10px 20px 10px; text-align: center; }

div.navigator { font-size: 14px; padding: 0px 0px 20px 0px; }
div.navigator a { text-decoration: none; color: #666; }
div.navigator a:hover { text-decoration: underline; color: #969; }

div.newsbox { display: inline-block; background: #fff; float: left; padding: 40px 0px 40px 40px; }

div.newsbox .topic { color: #999; font-size: 20px; margin-bottom: 40px; }

div.newsbox .thumbnail { display: inline-block; overflow: hidden; width: 270px; height: 240px; color: #999; font-size: 20px;
							padding: 10px; margin-right: 5px; }
div.newsbox .thumbnail:hover { background: #ddd; }
div.newsbox .thumbnail .image { width: 270px; height: 80px; background-position: center center; }
div.newsbox .thumbnail .title { color: #939; font-size: 18px; padding: 10px 0px 10px 0px; }
div.newsbox .thumbnail .title a { color: #939; text-decoration: none; }
div.newsbox .thumbnail .title a:hover { text-decoration: underline; }
div.newsbox .thumbnail .text { color: #666; font-size: 14px; line-height: 25px; text-align: justify; }

div.newsbox .itemlist { overflow: hidden; color: #999; font-size: 15px; padding: 10px; border-bottom: 1px #ccc solid; line-height: 25px; }
div.newsbox .itemlist:hover { background: #ddd; }
div.newsbox .itemlist a { color: #939; text-decoration: none; }
div.newsbox .itemlist a:hover { text-decoration: underline; }

div.newsbox .readmore { text-align: right; font-size: 14px; padding: 30px 20px 10px 10px; }
div.newsbox .readmore a { text-decoration: none; color: #939; }
div.newsbox .readmore a:hover { text-decoration: underline; }

div.information { background: #fff; }

div.information .topic { color: #999; font-size: 20px; margin-bottom: 40px; }
div.information .topicfull { padding: 0px 0px 30px 0px; font-size: 32px; color: #848; text-align: left; }

div.information .thumbnail { display: inline-block; overflow: hidden; width: 270px; height: 280px; color: #999; font-size: 20px;
							padding: 10px; margin-right: 5px; }
div.information .thumbnail:hover { background: #ddd; }
div.information .thumbnail .image { width: 270px; height: 120px; background-position: center center; }
div.information .thumbnail .title { color: #939; font-size: 18px; padding: 10px 0px 10px 0px; }
div.information .thumbnail .title a { color: #939; text-decoration: none; }
div.information .thumbnail .title a:hover { text-decoration: underline; }
div.information .thumbnail .text { color: #666; font-size: 14px; line-height: 25px; text-align: justify; }

div.information .itemlist { overflow: hidden; color: #999; font-size: 15px; padding: 10px; border-bottom: 1px #ccc solid; line-height: 25px; }
div.information .itemlist:hover { background: #ddd; }
div.information .itemlist a { color: #939; text-decoration: none; }
div.information .itemlist a:hover { text-decoration: underline; }

div.information .readmore { text-align: right; font-size: 14px; padding: 30px 20px 10px 10px; }
div.information .readmore a { text-decoration: none; color: #939; }
div.information .readmore a:hover { text-decoration: underline; }

div.randomphoto { float: left; padding: 40px 10px 20px 30px; width: 300px; }
div.randomphoto .topic {  color: #999; font-size: 20px; margin-bottom: 40px; }
div.randomphoto .image {  min-height: 150px; }
div.randomphoto .title {  font-size: 15px; text-align: center; }
div.randomphoto .title a {  text-decoration: none; color: #939; }
div.randomphoto .title a:hover {  text-decoration: underline; }

div.randomphoto .readmore { text-align: right; font-size: 14px; padding: 30px 20px 20px 10px; }
div.randomphoto .readmore a { text-decoration: none; color: #939; }
div.randomphoto .readmore a:hover { text-decoration: underline; }

div.articleread { padding: 0px 0px 30px 0px; }
div.articleread .topic { padding: 0px 0px 30px 0px; font-size: 32px; color: #848; text-align: left; border-bottom: 1px solid #999; }
div.articleread .displayimage { float: left; padding: 20px 30px 20px 0px; }
div.articleread .detail { line-height: 25px; font-size: 18px; text-align: justify; color: #555; }
div.articleread .date { padding: 10px 0px 10px 0px; font-size: 14px; font-style: italic; color: #999; }
div.articleread .image { padding: 20px 0px 20px 0px; }

div.research { background: #fff; }

div.research .topic { color: #999; font-size: 20px; margin-bottom: 40px; }
div.research .topicfull { padding: 0px 0px 30px 0px; font-size: 32px; color: #848; text-align: left; }

div.research .thumbnail { display: block; overflow: hidden; color: #999; font-size: 20px; border-bottom: 1px #999 solid;
							padding: 20px 10px 10px 10px; }
div.research .thumbnail:hover { background: #ddd; }
div.research .thumbnail .image { width: 160px; height: 100px; background-position: center center; float:left; margin: 0px 20px 0px 0px; }
div.research .thumbnail .title { color: #939; font-size: 20px; padding: 10px 0px 10px 0px; }
div.research .thumbnail .title a { color: #939; text-decoration: none; }
div.research .thumbnail .title a:hover { text-decoration: underline; }
div.research .thumbnail .text { color: #666; font-size: 14px; line-height: 25px; text-align: justify; }

div.gallery { background: #fff; }

div.gallery .topic { color: #999; font-size: 20px; margin-bottom: 40px; }
div.gallery .topicfull { padding: 0px 0px 30px 0px; font-size: 32px; color: #848; text-align: left; }

div.gallery .thumbnail { display: inline-block; overflow: hidden; width: 270px; height: 220px; color: #999; font-size: 20px;
							padding: 10px; margin-right: 5px; }
div.gallery .thumbnail:hover { background: #ddd; }
div.gallery .thumbnail .image { width: 270px; height: 150px; background-position: center center; }
div.gallery .thumbnail .title { color: #939; font-size: 18px; padding: 10px 0px 10px 0px; }
div.gallery .thumbnail .title a { color: #939; text-decoration: none; }
div.gallery .thumbnail .title a:hover { text-decoration: underline; }
div.gallery .thumbnail .text { color: #666; font-size: 14px; line-height: 25px; text-align: justify; }

div.personel { background: #fff; }

div.personel .topic { color: #999; font-size: 20px; margin-bottom: 40px; }
div.personel .topicfull { padding: 0px 0px 30px 0px; font-size: 32px; color: #848; text-align: left; }

div.personel .thumbnail { display: inline-block; overflow: hidden; width: 200px; height: 300px; color: #999; font-size: 20px;
							padding: 10px; margin-right: 5px; position: absolute; text-align: center; }
div.personel .thumbnail:hover { background: #ddd; }
div.personel .thumbnail .image { margin: 0px 0px 0px 25px; width: 150px; height: 200px; background-position: center center; }
div.personel .thumbnail .title { color: #939; font-size: 15px; padding: 10px 0px 10px 0px; }
div.personel .thumbnail .title a { color: #939; text-decoration: none; }
div.personel .thumbnail .title a:hover { text-decoration: underline; }
div.personel .thumbnail .text { color: #666; font-size: 14px; line-height: 25px; text-align: justify; }
div.personel .thumbnail .cover { display: block; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 20; }
div.personel .thumbnail .cover a { display: block; width: 100%; height: 100%; }

div.beforefooter { min-height: 250px; background: #404; }

/*----------------------------------------------------------------*/

div.pagetopic { font-size: 25px; color: #939; padding: 10px; }
div.controlpanel { padding: 10px; background: #fef; }
div.controlpanel a { text-decoration: none; font-size: 14px; color: #939; }
div.controlpanel a:hover { text-decoration: underline; }
div.bottompanel { padding: 20px; text-align: center; font-size: 12px; color: #666; }

div.greenbox { background: #cfc; padding: 10px; font-size: 14px; color: #080; margin: 10px 0px 10px 0px; }
div.redbox { background: #fcc; padding: 10px; font-size: 14px; color: #800; margin: 10px 0px 10px 0px; }

/*----------------------------------------------------------------*/

/*a.shortcut { display: block; font-size: 18px; color: #939; text-decoration: none; padding: 30px 0px 30px 20px; }
a.shortcut:hover { background: #939; font-size: 18px; color: #eee; }*/

a.menulink2 { display: block; width: 190px; height: 25px; color: #333; text-decoration: none; font-size: 14px;
				padding: 18px 0px 10px 10px; border-bottom: 1px solid #bbb; }
a.menulink2:hover { background: #aaa; }

a.shortcut-about { background: url("../images/shortcut-about.png"); display: block; width: 300px; height: 70px; background-position: 0px 0px; }
a.shortcut-about:hover { background-position: 0px -70px; }
a.shortcut-person { background: url("../images/shortcut-person.png"); display: block; width: 300px; height: 70px; background-position: 0px 0px; }
a.shortcut-person:hover { background-position: 0px -70px; }
a.shortcut-research { background: url("../images/shortcut-research.png"); display: block; width: 300px; height: 70px; background-position: 0px 0px; }
a.shortcut-research:hover { background-position: 0px -70px; }

a.shortcut-about-eng { background: url("../en/images/shortcut-about.png"); display: block; width: 300px; height: 70px; background-position: 0px 0px; }
a.shortcut-about-eng:hover { background-position: 0px -70px; }
a.shortcut-person-eng { background: url("../en/images/shortcut-person.png"); display: block; width: 300px; height: 70px; background-position: 0px 0px; }
a.shortcut-person-eng:hover { background-position: 0px -70px; }
a.shortcut-research-eng { background: url("../en/images/shortcut-research.png"); display: block; width: 300px; height: 70px; background-position: 0px 0px; }
a.shortcut-research-eng:hover { background-position: 0px -70px; }

a.buttonlink { display: inline-block; padding: 10px 30px 10px 30px; background: #fff; font-size: 15px; text-decoration: none; }
a.buttonlink:hover { background: #ece; }

/*----------------------------------------------------------------*/

table.linktable { border-collapse: collapse; font-size: 14px; }
table.linktable td { padding: 5px; }
table.linktable td span { line-height: 30px; color: #858; font-weight: bold; }
table.linktable td a { text-decoration: none; line-height: 30px; color: #a8a; }
table.linktable td a:hover { color: #faf; }

table.table1 { border-collapse: collapse; width: 100%; }
table.table1 th { background: #b9b; padding: 10px; border: 1px #b9b solid; font-weight: bold; color: #848; font-size: 13px; }
table.table1 td { background: #fff; padding: 10px; border: 1px #b9b solid; font-size: 13px; color: #666; }
table.table1 tr:hover td { background: #eee; }

table.formtable { border-collapse: collapse; }
table.formtable th { background: #dbd; padding: 10px; border: 1px #b9b solid; font-weight: bold; color: #848; font-size: 13px; text-align: right; }
table.formtable td { background: #fff; padding: 10px; border: 1px #b9b solid; font-size: 13px; color: #666; line-height: 25px; }
table.formtable td.button { background: #fff; padding: 10px; border: 0px; font-size: 13px; color: #666; line-height: 25px; }

table.personeltable { border-collapse: collapse; width: 100%; }
table.personeltable th { background: #dbd; padding: 10px; border: 1px #b9b solid; font-weight: bold; color: #848; font-size: 13px; }
table.personeltable td { background: #fff; padding: 10px; border: 1px #b9b solid; font-size: 13px; color: #666; }
table.personeltable td a.title { color: #666; font-weight: bold; text-decoration: none; }
table.personeltable td a.title:hover { text-decoration: underline; }
table.personeltable td.subtopic { background: #fdf; padding: 20px 10px 20px 10px; border: 1px #b9b solid; font-size: 13px; color: #959; font-weight: bold; }
/*table.personeltable tr:hover td { background: #eee; }*/

/*----------------------------------------------------------------*/

div.languagebox { position: absolute; top: 0px; right: 0px; padding: 10px; }


/*----------------------------------------------------------------*/
/*---------------------   Mini screen    -------------------------*/
/*----------------------------------------------------------------*/

@media screen and (max-width: 1300px) {

	div.rightside { display: inline-block; background: #fff; float: left; padding: 40px 0px 40px 40px; width: 600px; }
}

@media screen and (max-width: 970px) {

	div.rightside { display: inline-block; background: #fff; float: left; padding: 40px 0px 40px 40px; width: 350px; }
}

@media screen and (max-width: 900px) {

	/*-- drop-down menu --*/
	div#pagemenubar { text-align: center; background: transparent; height: auto; }
	div#pagemenubar ul { position: static; display: inline-block; width: 100%; margin: 0px; padding: 0px; }
	div#pagemenubar ul li.mainmenusplit { display: none; list-style-type: none; }
	div#pagemenubar ul li.mainmenu { position: static; display: inline-block; list-style-type: none; min-width: 150px; width: 100%; }
	div#pagemenubar ul li.mainmenu a { padding: 10px 0px 10px 0px; display: inline-block; width: 100%; height: 20px;
										background: url("../images/bg-menu.jpg"); text-align: center; text-decoration: none;
										color: #999; }
	div#pagemenubar ul li.mainmenu:hover a { color: #fff; border-bottom: 2px solid #fff; height: 18px; }

	div#pagemenubar ul li.mainmenu ul { position: static; display: inline-block; padding: 0px; z-index: 99999; }
	div#pagemenubar ul li.mainmenu:hover ul { display: inline-block; }
	div#pagemenubar ul li.mainmenu ul li { list-style-type: none; width: 100%; }
	div#pagemenubar ul li.mainmenu ul li a { padding: 10px 0px 10px 0px; display: inline-block; width: 100%; background: #a48;
													text-align: center; border-bottom: 1px solid #534; }
	div#pagemenubar ul li.mainmenu:hover ul li a { padding: 10px 0px 10px 0px; display: inline-block; width: 100%; background: #a48;
													text-align: center; border-bottom: 1px solid #534; }
	div#pagemenubar ul li.mainmenu:hover ul li a:hover { display: inline-block; background: #635; }

	/*----------------------------------------------------------------*/

	div.slideholder { float: left; width: 100%; position: relative; }
	/*div.slideshow { background: #000; overflow: hidden; min-width: 500px; height: 450px; width: 100%; float: left; }*/
	div.nearslideholder { width: 100%; height: auto; float: left; }
	div.nearslide { /*background: #d9b;*/ background: url('../images/thaibg.jpg'); overflow: initial; padding: 15px; height:auto; font-size: 18px; line-height: 30px; color: #423; }
}