@import 'https://fonts.googleapis.com/css?family=Kanit&display=swap';
/*@import 'https://www.tpa.or.th/css/greyscale.css';*/
@import 'https://www.tpa.or.th/css/footer-policy.css';
/* New Colors */
/*
สีน้ำเงิน C100 M80 Y0  rgb(3,78,162)  #034ea2
สีทอง C20 M40 Y100  rgb(208,155,44)  #d09b2c 
*/
html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 85px;
  font-family: sans-serif;
}
h1 { font-family: 'Kanit', sans-serif; font-display: optional; font-size: 2.9em; }
h1,h2,h3,h4,h5 { font-family: 'Kanit', sans-serif !important; font-display: optional; }
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 84px;
  padding-top: 14px;
  background-color: #222;
  color: #FFF;
}

/* ------- added -------- */
#headannouncement { background: #fcba63; color: #001b8f; }
.home-marquee { height: 40px; overflow: hidden; position: relative; font-size: 1.2em; }
.home-marquee marquee { line-height: 40px; position: absolute; width: 100%; height: 100%; margin: 0; }
.navlang .dropdown { position: relative; display: inline-block; }
.navlang .dropdown-content { display: none; position: absolute; right: 0; background-color: #f1f1f1; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; }
.navlang .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; }
.navlang .dropdown-content a:hover {background-color: #ddd;}
.navlang .dropdown:hover .dropdown-content {display: block;}
.navlang .dropdown:hover .btn {color: var(--tpablue);} 
.navlang { display: block; min-height: 45px; padding-top: 0.5em; padding-right: 1.2em; background-color: #eee; }
.navlang, .dropdown { overflow: visible; }
.navlang-icon { margin-top:-2px; margin-right: 5px; color: #333; }
.navbar-default { background-color: #FFF; /* border-color: #fefefe; */ border-top: 0px none; }
.navbar .container { position: relative; }
.navbar-nav { padding-top: 15px; }
.navbar { clear:both; border-radius: 0; margin-bottom: 5px; }
.navbar-inverse { background-color: #3498DB; border: 0 none; }
.navbar-inverse .navbar-nav > li > a { color: #FFF; }
.navbar-inverse .navbar-nav > li > a:hover { color: #00FFFF; }
.navbar-inverse .navbar-nav .open .dropdown-menu { background-color: #555; }
.navbar-inverse .navbar-nav .open .dropdown-menu > li > a { color: #DDD; }
.navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover { color: #999; }
.navbar-inverse .navbar-toggle { border-color: #FFF; color: #FFF; }
.navbar-brand { margin-top: -15px; }
.carousel-indicators li { border: 1px solid #269abc; }
.carousel-indicators .active { background-color: #31b0d5; }
#homepagetitle { display: none; }
.jpweblinkbtn-top { margin: 0; padding: 0.4em; background :#3498db; text-align: right; }
.jpweblinkbtn-inmenu { margin: 0.4em 0 0 0; padding: 0; }
.jjpweblinkbtn-inmenu a.btn { border-color: #FFF; border-width: 2px; border-radius: 15px; background: #ffcccc url("../images/sakura.webp"); background-size: cover; font-weight: bold; color: #b91c4c; }
.jjpweblinkbtn a.btn { border-color: #FFF; border-width: 2px; border-radius: 15px; background: #ffcccc url("../images/sakura.webp"); background-size: cover; font-weight: bold; color: #b91c4c; }
.socialnetwork-top { padding: 6px; background-color:#222222; text-align:right; }
.socialnetwork-top a img, .socialnetwork-top-nav a img { width: 36px; height: auto; }

.row > div h3 { margin: 4px 0; padding: 0; background: #CCC url("../images/home-h3-bg.png") repeat scroll 0% 0%; overflow: hidden; }
.row > div h3 span { display: table; padding: 4px 20px 4px 12px; background: #001B8F none repeat scroll 0% 0%; border-right: 4px solid #FFF; font-size: 0.7em; font-weight: bold; color: #FFF; }
.row { margin-bottom: 14px; }
.hr-hidden { margin-bottom: 1em; visibility: hidden; }

#news ul, #activity ol, #etcourses ol, #tpabook ol, #knowledgeebook ol, #etprogram ol, #freeebook ol { display: block; margin: 4px 0; padding: 0 4px; list-style-type: none; overflow: hidden; }
#news ul li b { background: #09F none repeat scroll 0% 0%; color: #FFF; font-size: 12px; }
#activity ol li, #etcourses ol li { margin: 2px 0; padding: 10px 0; border-bottom: 1px dotted #999; }
#activity ol li:before { font-family: 'Glyphicons Halflings'; content: "\e258"; color: #999; font-size: 0.4em; margin-right: 0.7em; }

#etcourses ol li strong { background: #09F none repeat scroll 0% 0%; color: #FFF; font-size: 12px; }
#etcourses ol li strong::before { content: "("; color: #09F; }
#etcourses ol li strong::after { content: ")"; color: #09F; }

#tpabook h5 { padding: 6px 0; border-top: 1px solid #EEE; border-bottom: 1px solid #EEE; display: block; font-weight: bold; }
#tpabook ol li, #knowledgeebook ol li { width: 160px; margin: 4px; padding: 8px 16px 0; text-align: center; overflow: hidden; float: left; }
#tpabook ol li img, #knowledgeebook ol li img { width: 120px; height: 180px; margin-bottom: 6px; box-shadow: 0 2px 4px 1px #555; }
#tpabook .row { padding-right: 1em; }
#tpabook .row div { text-align: center; }
#freeebook ol li { width: 100%; margin: 14px 4px; padding: 8px 16px 0; text-align: center; overflow: hidden; }
#freeebook ol li img { width: 160px; height: auto; margin-bottom: 6px; box-shadow: 0 2px 4px 1px #555; }
#freeebook ol li span {display: block; }
#etprogram ol li { width: 160px; margin: 4px; padding: 8px 16px 0; text-align: center; overflow: hidden; float: left; }
#etprogram ol li img { width: 120px; height: 120px; margin-bottom: 6px; box-shadow: 0 2px 4px 1px #555; }
#freeebook .img-responsive { max-width: 170px; height: auto; }
#freeebook .row div, #freeebook .row div a { text-align: center; }
#freeebook .row div a img { margin: 0 auto; padding-top: 0; }
#freeebook .row div hr { visibility: hidden; }
#writer ol { margin: 0.5em 0; padding: 0; list-style-type: none; }
#writer ol li { margin: 2px 0; padding: 10px 0; border-bottom: 1px dotted #999; }
#writer ol li:before { font-family: 'Glyphicons Halflings'; content: "\e022"; color: #CCC; font-size: 0.7em; margin-right: 0.2em; }
#writer ol li a span { color: #999; }

	nav { padding-bottom: 8px; background-color: #EEE !important; border-bottom: 1px solid #EEE !important; }
	nav li { font-size: 16px; font-family: 'Kanit', sans-serif; }
	.navbar-default .navbar-nav > li > a { color: #111111; }
	.navbar-default .navbar-nav > li > a:hover { color: #001B8F; }
	nav .dropdown-menu li a { font-weight: 100; }
	.navbar { }
	.navbar-default { background-color: #FFF; /* border-color: #fefefe; */ border-top: 0px none; }
	.navbar .container { position: relative; }
	.navbar-nav { padding-top: 15px; }
	.navbar-brand { height: 85px; }
	.navbar-brand img { width: 55px; height: auto; }
	/* added for 50aniver*/
	/* .navbar-brand { margin-top: -5px; padding: 15px 5px 5px 0; }
	.navbar-brand img { width: 85px; height: auto; } */
	.jjpweblinkbtn { margin: 0; padding: 14px 15px 0 0; background-color: #EEE !important; text-align: right; }
	.jjpweblinkbtn .btn { padding: 6px 17px; }
@media (max-width: 992px) {
	.nav > li > a { padding: 10px 12px; }
	nav li { font-size: 14px; }
	.jjpweblinkbtn-inmenu a.btn { font-size: 12px !important; }
}
@media (max-width: 768px) {
	.navbar-brand { height: 55px; }
	.navbar-brand img { margin-top: -30px; width: 55px; /* width: 110px;*/ height: auto; }
	/* added for 50aniver*/
	/* .navbar-brand img { width: 85px; height: auto; } */
	.navbar-toggle { padding: 9px 26px; background-color: #FFF; }
	.hamburger-box { float:left; }
	.hamburger-text { float:right; margin-top:-4px; padding-left: 9px; font-weight: bold; }
}
@media (max-width: 480px) {
	.navbar-brand { margin-top: 0; }
	.navbar-brand img { display: block; }
	a.navbar-brand:after { content: " "; font-weight: bold; color: #FFF; }
}

/*
.list-btn-more { display: inline-block; margin: 4px; padding: 4px 8px; text-decoration: none; font-size: 12px; font-weight: bold; color: ##337AB7; border: 1px solid #337AB7; }
.list-btn-more:after { content: " >>"; font-weight: normal; }

.btn-default { font-size: 0.9em; }
.btn-default:after { content: " >>"; }
*/

#jobs ul li { margin-top: 0.5em; margin-bottom: 0.5em; }

.promotionbanner { padding-top: 1em; padding-bottom: 1em; background-color: #ECF0F1; }
.promotionbanner ul { width: 100%; margin: 0 auto; padding: 0; list-style-type: none; text-align: right; }
.promotionbanner li { text-align: center; }
.promotionbanner a img { margin: 0 auto 8px auto; border: 1px solid #BBB; } #promotionbanner a:hover img { border: 1px solid #555; }
.exlinkbanner { padding-top: 1em; padding-bottom: 1em; border: 1px solid #ECF0F1; text-align: center !important; }
.exlinkbanner ul { margin: 0; padding: 0; list-style-type: none; }
.exlinkbanner ul li { margin: 0 1em; display: inline; }
.exlinkbanner a img { width: 298px; height: 77px; border: 1px solid #BBB; } #promotionbanner a:hover img { border: 1px solid #555; }

/*
.footer div { background: #222; }
.footer p { margin: 0; padding: 0; font-size: 12px; color: #CCCCCC; }
.footer h5 { margin: 0; padding: 0; font-weight: bold; }
#footersociallink { text-align: right; }
#footersociallink ol { margin: 0; padding: 0; list-style-type: none; }
#footersociallink ol li { display: inline; margint: 0 6px 0 0;}
#footersociallink ol li img { width: 32px; height: 32px; }
.footer-nav { width: 100%; margin-bottom: -22px; padding-top: 1.5em; background-color: #444; font-size: 0.9em; }
.footer-nav h5 { margin: 0 0 0.4em 1.2em; font-weight: bold; font-size: 1.4em; color: #FFF; }
.footer-nav ul { color: #CCC; }
.footer-nav a { color: #EEE; }
*/
.footer { background: #034ea2; color: #ffffff; }
.footer h5 { font-size: 1.4em; }
.footer p { font-size: 1.0em; }
.footer div, .footer div p.text-muted { background: none; color: #ffffff; }
.footer-copyright a { color: #ffffff; }
.footer-nav { background:#ffffff none; color: #001b8f; }
.footer-nav h5, .footer-nav ul, .footer-nav a { color: #001b8f; }
#footersociallink { text-align: right; }
#footersociallink ol { margin: 0; padding: 0; list-style-type: none; }
#footersociallink ol li { display: inline; margint: 0 6px 0 0;}
#footersociallink ol li img { width: 32px; height: 32px; background-color: #ffffff; border: 2px solid #ffffff; border-radius: 50%; }

.newscontent #titleofpage { margin-bottom: 2.8em; }
.newscontent #titleofpage h1.newsheadline { margin-bottom: 0.4em; padding-bottom: 0.3em; border-bottom: 1px solid #ECF0F1; font-weight: bold; }
.newscontent #titleofpage h1.newsheadline font { white-space: nowrap; }

.tpanewstable .label { font-size: 1.0em; line-height: 2em; }
.tpanewstablehead th { display: none; }

/* Page */
#tpapage h2 { margin: 4px 0; padding: 0; background: #CCC url("../images/home-h3-bg.png") repeat scroll 0% 0%; overflow: hidden; }
#tpapage h2 span { display: table; padding: 4px 20px 4px 12px; background: #001B8F none repeat scroll 0% 0%; border-right: 4px solid #FFF; font-size: 0.7em; font-weight: bold; color: #FFF; font-size: 15px; }
#tpapage .navbar { margin-bottom: 18px; }
.contactgroup .thumbnail { text-align: center; }
.contactgroup .thumbnail h3 { background: none; color: #001B8F; font-weight: bold; }
.contacttable th span { font-weight: normal; color: #555; }
.contacttable th i { font-style: normal; font-weight: normal; }
tr.contacttablenobottomline td, tr.contacttablenobottomline th { border-bottom: 0px none !important;}
tr.contacttablenotopline td, tr.contacttablenotopline th { border-top: 0px none !important;}
.map-list-group { padding: 28px 20%; text-align: center; }
.membertype strong { font-size: 14px; }

.responsiveCal { position: relative; padding-bottom: 75%; height: 0; overflow: hidden; }
.responsiveCal iframe { position: absolute; top:0; left: 0; width: 100%; height: 100%; }

.backwards { unicode-bidi: bidi-override; direction: rtl; }
.contxt { white-space: nowrap; }

@media (min-width: 1200px) {
	/*
	#myCarousel { background-image: url("http://www.tpa.or.th/tpanew/images/2015/test-bg-390.jpg"); background-repeat: repeat-x; background-size: auto 245px; background-position: left top; }
	.carousel .item { background: none !important; }
	*/
}

@media (max-width: 640px) {
	.contacttable th:nth-child(3), .contacttable td:nth-child(3), .contacttable-hidethiscell { display: none; }
}

@media (max-width: 480px) {
	/* .navbar-brand { margin-top: 0; }
	.navbar-brand img { display: none; }
	a.navbar-brand:after { content: "TPA.OR.TH"; font-weight: bold; color: #FFF; }
	*/
	h1 { font-family: sans-serif !important; font-size: 1.4em; }
	#footersociallink { text-align: left; }
}