@charset "UTF-8";
/* CSS Document */


 /*	 Break Title
--------------------------------------------------------------------------------	*/
.yellow-line.container {
	width:25.5%;
}
@media (max-width: 768px)  {
	.yellow-line.container { width:65%; }
}


 /*	 Quote
--------------------------------------------------------------------------------	*/
.blockquote {
	display:block;
	float:left;
	width:100%;
}

.blockquote title {
	display:block;
	font-size:20px;
	font-weight:bold;
	color:#124c97;
	text-align:left;
	letter-spacing:0.5px;
}

.blockquote span {
	display:block;
	font-size:17px;
	line-height:22px;
	color:#333;
	text-indent:20px;
	margin:25px 0;
	word-wrap:break-word;
}

.blockquote title {
	color:#000;
	margin:0;
}
.blockquote span {
	text-indent:0;
	margin:15px 0;
	line-height:none;
}


.lib-panel {
    margin-bottom: 20px;
}
.lib-panel img {
    width: 100%;
    background-color: transparent;
}

.lib-panel .row,
.lib-panel .col-md-3 {
    padding: 0;
    background-color:transparent;
}

.lib-panel .lib-row {
    padding: 0 15px;
}

.lib-panel .lib-row.lib-header {
    background-color:transparent;
    font-size: 20px;
	color:#000;
    padding:0 15px 10px 15px;
}

.lib-panel .lib-row.lib-header .lib-header-seperator {
    height: 2px;
    width: 50px;
    background-color: #ccc;
    margin: 7px 0 7px 0;
}

.lib-panel .lib-row.lib-desc {
    position: relative;
    height: 100%;
    display: block;
    font-size: 16px;
	color:#333;
	line-height:22px;
	word-wrap:break-word;
}

.row-margin-bottom {
    margin-bottom: 20px;
}

.positions {
	display:block;
}
.positions span {
	font-size:14px;
	display:block;
	line-height:none;
	margin:0;
	padding:0;
}
span.name {
	color:#2b9dd7;
	font-weight:bold;
	font-size:20px;
        margin-bottom: 5px;
}
span.name:lang(th) {
	font-family: "supermarket";
}
span.jobposition,
span.inboi,
p.board-details {
	color:#333;
	font-size:14px;
}
p.board-details { text-align: justify; }
span.jobposition:lang(th),
span.inboi:lang(th) {
	font-family: "supermarket";
	font-size:16px;
}
@media (max-width: 768px) {
         span.name {
	         font-size:16px;
                 margin-top: 8px;
         }
	.lib-panel .lib-row.lib-header { padding:20px 0 10px 0; }
	.lib-panel .lib-row.lib-desc {
		text-align:justify;
		padding-left:0;
		padding-right:0;
	}
	.lib-row.positions { padding:0; }
}


.list-boards {
	display:block;
	float:left;
	width:100%;
}

.member-table  {
         padding-left:0; 
}
@media (max-width:768px) {
         padding-left:0;
         padding-right:0;
}


 /*	 Gradient background
--------------------------------------------------------------------------------	*/
span.gradient-title {
	display:block;
	float:left;
	margin:25px 0;
	max-width:100%;
	width:300px;
	padding:9px 20px 8px 20px;
	color:yellow;
	font-weight:bold;
	font-size:18px;
	text-transform:capitalize;
	letter-spacing:0.8px;
	border:none;
	background: rgba(35,131,199,1);
	background: -moz-linear-gradient(left, rgba(35,131,199,1) 0%, rgba(35,131,199,0) 100%);
	background: -webkit-gradient(left top, right top, color-stop(0%, rgba(35,131,199,1)), color-stop(100%, rgba(35,131,199,0)));
	background: -webkit-linear-gradient(left, rgba(35,131,199,1) 0%, rgba(35,131,199,0) 100%);
	background: -o-linear-gradient(left, rgba(35,131,199,1) 0%, rgba(35,131,199,0) 100%);
	background: -ms-linear-gradient(left, rgba(35,131,199,1) 0%, rgba(35,131,199,0) 100%);
	background: linear-gradient(to right, rgba(35,131,199,1) 30%, rgba(35,131,199,0) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2383c7', endColorstr='#2383c7', GradientType=1 );
}
span.gradient-title:lang(th) {
	font-family: "supermarket";
	font-size: 20px;
	padding: 11px 20px 8px 20px;
}
@media screen and (max-width: 769px) {
	.filter-years { margin-top:0; margin-bottom:10px; }
}

.boards-column,
.boards-tables {
	display:block;
	float:left;
	width:100%;
}


 /*	 Boards Columns
--------------------------------------------------------------------------------	*/
.boards-column {
	display:block;
	border:none;
	margin-left:0;
	margin-right:0;
	margin-bottom:25px;
}
.boards-column .well {
	display:block;
	width:100%;
	float:left;
	padding:0;
	background:none;
	border:none;
	box-shadow:none;
	margin-bottom:0;
}
.boards-column .section-box h4 {
	margin:0px;
	color:#2b9dd7;
	font-size:15px;
        line-height:15px;
	margin-bottom:3px;
}
.boards-column .section-box h4:lang(th) {
	font-size: 17px;
        line-height:17px;
        font-family: "supermarket";
}
.boards-column .section-box span {
	display:block;
	font-weight:normal;
	font-size:14px;
        line-height:15px;
	color:#666; 
	/* padding-bottom:5px; */
        /* programmer fix
	margin-bottom:10px;
	border-bottom:1px solid #ccc;
        */
}
.boards-column .section-box span:lang(th) {
        font-family: "supermarket";
	font-size:14px;
        line-height:17px;
        letter-spacing: 0.5px;
}
.boards-column .section-box p {
	font-size:15px;
	color:#000;
	margin:0;
}
.boards-image {
	background:#309cd7;
	padding:5px !important;
	display:block;
        height:65px;
        width:65px
}
.boards-image img { display:block; }
.is-F9 { background-color:#f9f9f9; }


 /*	 Boards Tables
--------------------------------------------------------------------------------	*/
.boards-tables {
	border-top:3px solid #003471;
}

.boards-tables table { 
  width:100%;
  border-collapse: collapse;
  font-size:16px;
}

.boards-tables tr:nth-child(even) { 
  background: #e5edf3; 
}
.boards-tables tr:nth-child(odd) {
  background: #FFF; 
}
.boards-tables thead tr th { 
  background: #e5edf3; 
  color:#003471; 
  font-weight:bold;
  letter-spacing:0.7px;
}
.boards-tables td,
.boards-tables th {
  padding:10px 15px 9px 15px; 
  border: 1px solid #c3d8e5; 
  text-align:center;
  color:#333;
}

.boards-tables th:first-child,
.boards-tables td:first-child {
	text-align:left;
}
.boards-tables table:lang(th) { font-family: "supermarket"; }
.boards-tables td:lang(th),
.boards-tables th:lang(th) { font-size: 18px; }

@media 
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {

	.boards-tables table,
	.boards-tables thead,
	.boards-tables tbody,
	.boards-tables th,
	.boards-tables td,
	.boards-tables tr { 
		display: block; 
	}
	
	.boards-tables thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
	.boards-tables tr { border: 1px solid #c1daea; }
	
	.boards-tables td { 
		border: none;
		border-bottom: 1px solid #c3d8e5; 
		position: relative;
		padding-left: 50%;
	}
	
	.boards-tables td:before { 
		position: absolute;
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
	}
	
	.boards-tables td,
	.boards-tables th {
		text-align:left;
		font-size:15px;
	}

	.boards-tables td:nth-child(1):before { content: "Name"; }
	.boards-tables td:nth-child(2):before { content: "Position"; }
	.boards-tables td:nth-child(3):before { content: "Status"; }
}