@import url("postarea.css");
body { background-color: #f5f7fa; }
.ibsonebg { background-color: #ecf0f1; }
::selection { background-color: rgba(101, 109, 120, 0.6); color: #fff; }
.container.shadow { min-height: 500px; background-color: #fff; -webkit-box-shadow: #8D8D8D 0px 5px 4px 1px; -moz-box-shadow: #8D8D8D 0px 5px 4px 1px; box-shadow: #8D8D8D 0px 5px 4px 1px; margin-top: 70px; padding-top:10px; }
.container-wrapper { margin-top: 20px;}
/* ---------------------- img ---------------------- */
/*.post-img { max-height: 350px; overflow: hidden; margin-bottom: 10px; }
.post-img img.landscape { width: 100%; height: auto; }
.post-img img.portait { max-height: 100%; width: auto; }*/
/* ---------------------- content ---------------------- */
.content-search { position:relative; margin-bottom:10px; }
.content-search .filter { 
	position:absolute; 
	background-color: rgba(0, 0, 0, 0.7);
	color:#fff;
	height: auto;
	width: 100%;
	z-index: 999;
	padding:5px 10px; 
}
.content-search .filter hr { margin: 2px 0;}
.content-search .filter .checkbox { margin: 2px; font-size: 12px;}
.content-search .filter select {
	display: block;
	width: 100%;
	/* height: 34px; */
	padding: 3px 5px;
	font-size: 12px;
	margin:0 0 5px;
	line-height: 1.42857143;
	color: #555;
	background-color: rgba(255, 255, 255, 0.9);
	background-image: none;
	border: 1px solid rgba(204, 204, 204, 0);
	border-radius: 4px;
	/* -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); */
	/* box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); */
	/* -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; */
	/* transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; */
}
.content-search input.form-control {
	-webkit-box-shadow: none;
	box-shadow: none;
}
/* ---------------------- Nav ---------------------- */
.logo { height: 40px; margin: 15px 0 0 -15px;}
.navtools { margin:10px 0;color: #fff;}
.navtools i { padding-left:0; font-size:30px; text-align: center; }
.navlogo { vertical-align:middle; height: 35px; margin-top: 1px;}
.nav-mainmenu { padding:10px; height: 60px; background-color: rgba(236, 240, 241, 0.8); position: absolute;}
.nav-mainmenu .dropdown-menu > li > a:hover { background-color: #bdc3c7;}
.name-profile { font-family: 'smbadvance_regular'; color: #666; font-size: 23px; padding-right: 20px;}
.img-profile { height: 45px; margin-top: -3px;}
.profile img.profile{ width: 64px; margin-right: 30px;}
/* ---------------------- text ---------------------- */
a { webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; -ms-transition: all .2s ease-in-out; transition: all .2s ease-in-out; }
a.more-link { color: #FFF !important ; padding: 3px 7px; display: inline-block; margin-top: 2px;}
a.more-link:hover { background: #444 !important; text-decoration: none;}
.topic-recent { font-size: 28px; margin: 10px 0 0; }
.topic-page { font-family: 'thin'; margin: 0px; }
.topic-page.big { font-size: 45px; }
.topic-page.th { font-family: 'smbadvance_light';}
.toppage.name {}
.toppage.group-button .btn.add { color:#fff; font-weight:bold; border-color: #fff; }
.toppage.group-button .btn.add:hover { color:#fff; background-color:#555; font-weight:bold; border-color: #fff; }
/* ---------------------- box ---------------------- */
[class^="box"] { margin-bottom: 10px; position: relative;}
[class^="box"] .content { margin-top:30px; padding: 10px; }
[class^="box"] .content-feed { margin-top:15px; }
[class^="box"] hr { margin: 3px;}
h3.box-title { color: #FFF; float: left; padding: 5px 10px; margin-top: -4px; position: absolute; left: 0; top: 0; z-index:10;}
/* ---------------------- box-news ---------------------- */
.box-ibsnews { text-decoration: none; font-size: 14px; line-height: 1.3; min-height:200px;}
.box-hilightnews { text-decoration: none; font-size: 14px; line-height: 1.3;/*min-height:250px;*/}
.box-ibsnews .date { font-size: 10px; color: #898f9c; margin: 0 5px; display: inline-block;}
.box-hilightnews .post-img { max-height: 200px; overflow: hidden; }
.box-ibsnews hr { margin: 3px; border-top: 1px solid #4a89dc; opacity:0.4;}
.box-post {position: relative;/* border: 1px solid #ccd1d9;   */}
.box-ibsnews {border-top: 5px solid #4a89dc;}
.box-ibsnews .newsrow a {color: #555;}
.box-ibsnews .newsrow a:hover {color: #4a89dc;}
.box-hilightnews { border-top: 5px solid #ff6600;}
.box-hilightnews .media > .pull-left { margin-right: 15px;}
.more-top { position: absolute; top: 5px; right: 10px;}
/* ---------------------- box-activity ---------------------- */
.box-calendar { border-top: 5px solid #656D77; }
.box-calendar .act { margin-bottom:10px;	}
.box-calendar .ibsevent.media .label { width: 60px; padding: 5px; display: block;}
.box-calendar .ibsevent.media .label .date { padding: 0 10px; display: block; font-size: 25px; }
.box-calendar .ibsevent.media .label .month { display: block; font-size: 15px; }
.box-calendar .ibsevent.media p { font-size:13px; margin: 0 0 2px; }
.box-calendar .act .label { font-size: 13px;  padding: 5px;}
/*.box-calendar .panel-heading h3 { margin: 0;}*/
.calendar-selectview .btn-group { text-align:right;}
.box-calendar h1.month { margin-top: -35px;}
/* ---------------------- box-hbd ---------------------- */
.box-hbd { border-top: 5px solid #37bc9b;}
.hbdlist {}
.hbdlist a.card {
	float: left;
	display:block;
	width:100px;
	text-align: center;
	padding: 4px;
	background-color: #fff;
	border: 1px solid #ddd;
	border-radius: 4px;
	-webkit-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
	margin-right: 10px;
	margin-bottom: 10px;
}
.hbdlist a.card.active { border: 1px solid rgba(55, 188, 155, 0.9); background-color: rgba(55, 188, 155, 0.9); }
.hbdlist a.card.active .name, .hbdlist a.card.active .dep, .hbdlist a.card.active .dob { color: #fff; -webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out; }
.hbdlist a.card.active:hover .name, .hbdlist a.card.active:hover .dep { color:#37bc9b; }
.hbdlist a.card.active:hover .dob { color:#656d78; }
.hbdlist a.card:hover { border-color: #37bc9b; text-decoration:none; background-color:rgba(55, 188, 155, 0.1); }
.hbdlist .photo { width:100px; display: inline-block; }
.hbdlist p { margin: -2px; }
.hbdlist .name {color:#37bc9b; margin-top:2px; font-weight:bold; font-size:14px; }
.hbdlist .dep { font-size:11px; color:#37bc9b; }
.hbdlist .dob { font-size:15px; color:#656d78; font-weight:bold; }
.box-hbd h1.month { margin-top: -35px;}
.hbd-label { margin:-5px; }
.hbd-label .name { margin-top: 20px; }
.hbd-label .depname { margin-top: -15px; }
.hbd-label .day { margin-top: -10px; }
.box-hbd .panel-body { padding: 10px; }
.box-hbd .panel-default { border-color: rgba(55, 188, 155, 0.5) !important; }
.box-hbd .panel-body .bottompost { background-color: #FFFFFF; }
.hbd-img { height:120px; }
.hbd-img-big { text-align:right; }
.hbd-img-big img { height:120px; border-radius: 60px; }
/* ---------------------- box-youtube ---------------------- */
.box-youtube { border-top: 5px solid #e64144; }
.video-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; margin-bottom:10px; } 
.video-container iframe, .video-container object, .video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
/* ---------------------- box-101speech ---------------------- */
.box-speech { border-top: 5px solid #4fc1e9; margin:0; font-size: 14px;}
.box-speech .date { text-align:right; font-size: 13px; font-weight:bold;}
.box-speech .label { padding: 8px 10px; font-size: 15px;display: inline-block; }
/*.box-speech p { margin: 5px 0 10px; }
.box-speech .panel .panel-body { padding:10px; }*/
/* ---------------------- box-contact ---------------------- */
.box-contact { border-top: 5px solid #3bafda;}
.box-contact.mainpage hr { margin: 10px 0; }
.box-contact.mainpage .panel { margin-bottom: 15px; }
.box-contact.mainpage .panel-default { border-color: rgba(59, 175, 218, 0.45); }
.box-contact.mainpage .panel-default.emergency { border-color: rgba(230, 65, 68, 0.5); }
.box-contact.mainpage .panel-body { padding:5px; }
.box-contact.mainpage .panel-body h1, h2, h3 { margin: 0 0 5px; }
.box-contact.mainpage p.name { padding-left: 15px; font-weight:bold; margin: 0;}
.box-contact.mainpage p.name .nickname { display:inline-block; padding-left:3px;}
.box-contact.mainpage p.number { padding-left: 0; margin: 0 0 5px;}
/* ---------------------- box-room ---------------------- */
.box-room { border-top: 5px solid #967adc;}
.box-room i.iconroom { padding: 5px 5px 0;font-size: 50px;color: #967adc; }                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   
.media.roomselect { margin-top: 0; }
.roomselect { padding: 0; border: 1px solid #fff; cursor:pointer; margin-bottom: 5px; }
.roomselect .roomname { font-size: 12px; color:#333; font-weight:bold; line-height: 1.2;}
.roomselect .roomdetail { font-size: 11px; line-height: 1.2; color:#aaa; margin-top:-8px; }
.roomselect i { width:60px; border: 1px solid #fff; padding: 0 5px; font-size:40px; color: #967adc; text-align:center; }
.roomselect:hover { cursor:pointer; padding: 0; }
.roomselect:hover i { 
	width:60px;
	padding: 0 5px;
	border: 1px solid rgba(150, 122, 220, 0.5);
	background-color: rgba(150, 122, 220, 0.05);
	webkit-transition: all .1s ease-in-out;
	-moz-transition: all .1s ease-in-out;
	-o-transition: all .1s ease-in-out;
	-ms-transition: all .1s ease-in-out;
	transition: all .1s ease-in-out;
}

.toppage.roomname {
	/*border: 1px solid #967adc;*/
	padding: 5px 0 5px 10px;
	margin-bottom: 5px;
	background-color: rgba(150, 122, 220, 0.05);
}
.toppage.roomname h2.roomname {margin:0 0 -5px; }
.toppage.roomname .desc { font-size: 12px; color: #888; }
.toppage.group-button { padding:10px 0; text-align:right; }
.toppage.group-button .btn.room { background-color: #967adc; color:#fff; font-weight:bold; border-color: #fff; }
/* ---------------------- box-foodreview ---------------------- */
.box-foodreview { border-top: 5px solid #f6bb42;}
.media.foodreview-list {margin-top: 0; }
.box-foodreview .hilight-foodreview p {margin: 0 0 5px;}
.box-foodreview .hilight-foodreview h3.shopname {margin: 10px 0 5px;}
 .box-foodreview .fa {margin-right:3px;}
.foodreview-list {padding: 5px 5px 3px 5px;cursor:pointer;border-bottom: 1px solid rgba(240, 173, 78, 0.6);}
.box-foodreview li {list-style: none;list-style-type: none;}
.foodreview-list a, .foodreview-list a:hover  {text-decoration: none;color: #333;}
.foodreview-list:hover {
	padding: 5px 5px 3px 5px;
	cursor:pointer;
	background-color: rgba(246, 187, 66, 0.1);
	webkit-transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	-ms-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
}
.foodreview-list .name { font-size: 12px; font-weight:bold; line-height: 1.2;}
.foodreview-list .detail {
	font-size: 11px;
	line-height: 1.2;
	color:#aaa;
	margin-top:-8px;
	/*width:100px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;*/
}
.foodreview-list .detail .cat { margin-right:10px; }
.foodreview-list-img { max-width: 50px; overflow: hidden; }
.foodreview-list-img img.landscape { width: 100%; height: auto;}
.foodreview-list-img img.portait { max-height: 100%; width: auto; }
.box-foodreview .box-post label {font-size:14px; font-weight:normal; padding-top: 7px;}
.food-pictures { margin: 5px; }
.food-thumbnail { float: left; margin: 2px; width: 65px; height:50px; overflow: hidden;}
.food-thumbnail img.landscape { width: 100%; height: 50px; }
.food-thumbnail img.portait { height: auto; width: auto; }
.food-thumbnail a:hover { opacity: 0.5;}
.food-thumbnail img {
	-webkit-transition: all .40s;
	-moz-transition: all .40s;
	-o-transition: all .40s;
	transition: all .40s;
	max-width: 100%;
	height: auto;
}
.food-thumbnail .more-link {width:65px; height:50px;margin-top: 0;padding-top: 15px;}
/* ---------------------- box-society ---------------------- */
.box-society { border-top: 5px solid #4fc1e9; /* .bg-aqua */}
.box-society .content { padding: 10px 0; }
/* ---------------------- box-calendar ---------------------- */
.calendar-index {
	font-size:12px;
}
.calendar-index .act {
	margin-bottom: 5px;
}
/* ---------------------- banner ---------------------- */
.banner .btn {
	padding: 20px 15px !important;
	margin-bottom:5px;
}
.banner .btn-primary {
	color: #3276b1;
	background-color: rgba(66, 139, 202, 0.3);
	border-color: rgba(66, 139, 202, 0.3);
}
.banner .btn-primary:hover {
	color: #fff;
	background-color: #3276b1;
	border-color: #285e8e;
}
.banner .btn-success {
	color: #4cae4c;
	background-color: rgba(92, 184, 92, 0.3);
	border-color: rgba(76, 174, 76, 0.3);
}
.banner .btn-success:hover {
	color: #fff;
	background-color: #5cb85c;
	border-color: #4cae4c;
}

/* ///////////////////////////////////// POST ///////////////////////////////////// */
/* -------------------------- headpost -------------------------- */
.headpost {
	padding: 10px 15px 5px 15px;
	position:relative;
}
.headpost .pin { /* ปักหมุด */
	font-size: 30px;
	position: absolute;
	top: -5px;
	right: 20px;
	text-shadow: 2px 2px #ddd;
}
.headpost img.profile {
	width:40px;
	border-radius:50px;
	margin-right:5px;
}
.headpost .name {
	display: inline-block;
	font-weight: bold;
	font-size: 12px;
	padding-right: 5px;
	line-height: 1.3em;
}
.headpost .timepost {
	margin-top: -10px;
	font-size: 10px;
	color: #898f9c;
}
.headpost .select {
	position: absolute;
	font-size: 11px;
	right: 10px;
	margin-top: -5px;
	color: #ccd1d9;
	cursor:pointer;
}
.headpost .select:hover, .headpost .select:focus {
	color: #666;
}
.headpost .dropdown-menu {
	padding: 0;
	font-size:12px;
	min-width: 120px;
}
.headpost .dropdown-menu .divider {
	margin: 0;
}
.headpost .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
	background-color: #e6e9ed;
}
.post { padding: 5px 12px 10px 12px; font-size:13px; }
.post .post-img {
	max-height: 300px;
	overflow: hidden; 
	margin:10px 0;
}
.post .post-img img.landscape {
	width: 100%;
	height: auto;
}
.post .post-img img.portait {
	max-height: 100%;
	width: auto;
}
.post h4 {
	margin-top: 0;
}

/* -------------------------- feed -------------------------- */
.bottompost {
	font-size:12px;
	background-color: #f6f7f8;
	padding-bottom: 10px;
}
.bottompost hr {
	margin:0;
	border-top: 1px solid #ddd !important;
}
.comment-area {
	position: relative;
}
.comment-area .form-comment {
	display: inline;
	position:relative;
	width: 100%;
	height: 25px;
	padding: 6px 30px 6px 6px;
	margin:0;
	font-size: 12px;
	line-height: 1.42857143;
	color: #555;
	background-color: #fff;
	background-image: none;
	border: 1px solid #ccc;
	border-radius: 4px;
	-webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
	transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
.comment-area .btn-xs {
	margin:5px 0 0;
}
.comment-area .fa-camera {
	position: absolute;
	top: 6px;
	right: 15px;
	color: #666;
}
.comment_bt {
	padding:5px 0 0 5px;
}
.comment_bt button {
	margin-top:5px;
}
.press {
	color: #fff;
	background-color: #428bca;
	border-color: #357ebd;
}
.buttom_bt {
	padding:10px 0 0 10px;
}
.num_sadhu {
	font-size:11px;
	padding:5px 0 0 10px;
	color: #898f9c;
}

.comment {
	margin-top: 5px;
}
.comment .comment-text {
	padding-right: 10px;
}
.comment .comment-reply {
	padding: 0 10px 0 0;
}
.comment .name {
	font-weight:bold;
	color:#3498db;
	font-size:12px;
	margin-right:5px;
}
.comment p.text {
	line-height: 1.25;
	color:#444;
}
.comment p.detail {
	font-size:10px;
	color:#898f9c;
	margin-top: -8px;
	padding-right: 10px;
}
.comment img {
	display:block;
	max-height:200px;
	padding:10px;
}
.comment img.profile {
	height:35px;
	padding:0;
	margin-left: 10px;
}
.comment-more {
	font-size:11px;
	padding: 5px 10px;
	color: #898f9c;
	margin-bottom:5px;
}
.comment-more:hover {
	background-color: #e6e9ed;
	cursor:pointer;
}

/* -------------------------- box-str -------------------------- */
.box-str { border-top: 5px solid #8cc152;}
.box-str .ibsperson-head {
	cursor:pointer;
	border-radius: 6px;
	padding-left: 10px;
	margin:5px 0;
	background-color: rgba(160, 212, 104, 0.5);/*#ecf0f1*/
}
.box-str hr {
	margin-top: 5px;
	margin-bottom: 10px;
}
h2.ibs-str-name {
	margin: 5px 10px;
	color:#666;
	font-family: 'smbadvance_bold';
}
h3.ibs-str-name {
	margin: 5px 0 10px 10px;
	color:#656d78;
	font-family: 'smbadvance_regular';
}
.ibsperson { text-align:center; position:relative; }
.ibsperson a.card {
	float: left;
	display:block;
	width:150px;
	text-align: center;
	padding: 5px 4px 0px;
	background-color: #fff;
	border: 1px solid #ddd;
	border-radius: 4px;
	-webkit-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
	margin-right: 10px;
	margin-bottom: 5px;
}
.ibsperson a.card.more { min-height: 170px; width: 50px; padding-top: 60px; font-size:30px; 	color:#7f8c8d;}
.ibsperson p.name {color:#666; margin-top:2px; font-weight:bold; font-size:13px; margin: 5px 0;}
.ibsperson p.position { font-size:11px; color:#656d78; margin: 5px 0; }
.ibsperson p.tel { font-size:15px; color:#656d78; font-weight:bold; margin: 5px 0 0;}
/*.ibsperson a.card.active { border: 1px solid rgba(55, 188, 155, 0.9); background-color: rgba(55, 188, 155, 0.9); }
.ibsperson a.card.active .name, .ibsperson a.card.active .position, .ibsperson a.card.active .tel { color: #fff; -webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out; }
.ibsperson a.card.active:hover .name, .ibsperson a.card.active:hover .position { color:#37bc9b; }
.ibsperson a.card.active:hover .tel { color:#656d78; }*/
.ibsperson a.card:hover { border-color:rgba(160, 212, 104, 0.8); text-decoration:none; background-color: rgba(160, 212, 104, 0.2); }
.ibsperson a.card.boss { border: 1px solid #FADD6D;}
.ibsperson a.card.boss:hover { border: 1px solid #FADD6D; background-color:rgba(253, 215, 69, 0.15);}
.ibsperson .photo { width:100px; display: inline-block; }
#toTop {
	width: 120px;
	border-radius: 5px;
	/* border: 3px solid #fff; */
	opacity: 0.8;
	filter: alpha(opacity=80);
	background: #555;
	text-align: center;
	padding: 3px;
	position: fixed;
	bottom: 20px;
	right: 30px;
	cursor: pointer;
	display: none;
	color: #fff;
	font-size: 20px;
	z-index: 9999;
}
/*---------------------------------------------------------------- overwrite ---------------------------------------------------------------- */
.dropdown-right {
	right: 0;
	left: inherit !important;
	top: 10px !important;
	/*top: 40px !important;*/
}
/*.dropdown-menu > li {
	padding: 3px 20px;
}*/

	/* ibsone navbar */
	.navbar {
		min-height: 65px;
	}
	.navbar-default {
		border: none !important;
	}
	.navbar-nav {
		margin: 5px 0;
	}
	.navbar-default .navbar-nav > li > a {
		color: #999;
	}
	.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
		color: #656d78;
	}
	.navbar-nav > li > a {
		padding-top: 5px;
		padding-bottom: 5px;
	}
	.navbar-collapse {
		padding-right: 0;
		padding-left: 0;
	}
	.nav-label {
		display: block;
		font-size:13px;
		text-align: center;
	}
	.bottompost .media, .media .media {
		margin-top: 0;
	}
/*---------------------------------------------------------------- overwrite ---------------------------------------------------------------- */
