@font-face {
	font-family: 'thaisans';
	src: url('/fonts/ThaiSansNeue-Regular.eot');
	src: url('/fonts/ThaiSansNeue-Regular.eot?#iefix') format('embedded-opentype'),
		 url('/fonts/ThaiSansNeue-Regular.woff') format('woff'),
		 url('/fonts/ThaiSansNeue-Regular.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'abnormal';
	src: url('/fonts/abnormal-webfont.eot');
	src: url('/fonts/abnormal-webfont.eot?#iefix') format('embedded-opentype'),
		 url('/fonts/abnormal-webfont.woff') format('woff'),
		 url('/fonts/abnormal-webfont.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'rsu';
	src: url('/fonts/rsu_regular-webfont.eot');
	src: url('/fonts/rsu_regular-webfont.eot?#iefix') format('embedded-opentype'),
		 url('/fonts/rsu_regular-webfont.woff') format('woff'),
		 url('/fonts/Trsu_regular-webfont.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

body {padding:0; margin:0; font-family:'rsu'; font-size:1.1rem;}

p,h1,h2,h3,h4,h5,h6,ul,li {padding:0; margin:0; list-style:none;}
h1 {font-size:1.8rem; padding:12px 0px 5px;}
a {color:#222222;}

.clearfix:after {content:""; float:none; display:block; height:0; clear:both;}
.layout900 {max-width:1100px; margin:auto; width:100%;}
.pink {color:#ff0052;}





header #top-head-undubzapp {position:relative; background:#ffffff; box-shadow:1px 2px 20px 2px rgba(0, 0, 0, 0.15) !important;}
header #top-head-undubzapp #logo {width:19%; float:left; padding:7px 0px 9px;}
header #top-head-undubzapp #logo a {display:block; height:42px; width:100%; background:url('/img/logo-2016-black.png') left center no-repeat; background-size:contain;}
header #top-head-undubzapp #logo em {display:none;}
header #top-head-undubzapp #main-menu {width:80%; float:right;}
header #top-head-undubzapp #main-menu .menus {float:right;}
header #top-head-undubzapp #main-menu .menus li {float:left; border-left:1px solid #f3f3f3;}
header #top-head-undubzapp #main-menu .menus li:last-child {border-right:1px solid #f3f3f3;}
header #top-head-undubzapp #main-menu .menus li a {color:#b8b8b8; text-decoration:none; padding:18px 24px 16px; display:block;}
header #top-head-undubzapp #main-menu .menus li a:hover {color:#888888; background:#f7f7f7; text-shadow: 0 0 10px rgba(0,0,0,0.3);}

.social-share li {float:left; margin:0px 5px 10px;}
.social-share li a {width:22px; padding:9px 5px; color:#ffffff; display:block; text-align:center; border-radius:50%;}
.social-share li i {font-size:14px; line-height:normal;}
.social-share li em {display:none;}
.social-share li.facebook a {background:#205890;}
.social-share li.twitter a {background:#0099BB;}
.social-share li.googleplus a {background:#EE2D33;}
.social-share li.instagram a {background:#4D4D4F;}

nav > div {text-align:right; background:#ff0052; padding:8px 20px 6px; border-radius:4px; margin:auto;}
nav a {font-size:90%; color:#ffffff; margin-left:18px; display:block; float:left; opacity:0.7; padding-top:3px;}
nav a:hover {opacity:1;}
nav a:first-child {text-decoration:none; margin-left:0;}
nav a:first-child i {font-size:130%; padding-right:5px; float:left;}
nav.fixed {position:fixed; top:0px; left:0; z-index:999; width:100%;}
nav.fixed > div {border-radius:0px; box-shadow:1px 2px 20px 2px rgba(0, 0, 0, 0.15) !important; max-width:1060px;}
body.dara nav.fixed > div { padding:8px 10px 6px 49px; max-width:1041px;}

div#container {padding:20px 0px;}
	
#allpost {margin-top:10px; padding-top:10px; border-top: 1px solid #eeeeee;}
#allpost ul {padding:0.5%; margin:0; list-style:none;}
#allpost ul:after {content:''; float:none; height:0; display:block; clear:both;}
#allpost li {position:relative; float:left; width:32%; height:440px; margin:0% 1% 1% 0%; box-shadow:3px 3px 12px rgba(0,0,0,0.3); background:#333333;}
#allpost li:nth-child(3n+1) {clear:both; margin-left:1%;}
#allpost li .inner-box {word-wrap:break-word;}
#allpost li .img {margin:13px; display:block; position:relative; cursor:pointer; float:left; width:calc( 100% - 26px );}
#allpost li .img:before {content:""; display:block; margin-top:100%;}
#allpost li .img .playbutton {position:absolute; top:0; left:0; background:rgba(255, 255, 255, 0.0); width:100%; height:100%;}
#allpost li .img .playbutton i {position:absolute; width:16px; top:50%; left:50%; margin-left:-8px; margin-top:-8px; font-size:1rem; color:#ffffff; border-radius:50%; padding:10px; background:rgba(255, 255, 255, 0.24); text-align:right; cursor:pointer;}
#allpost li span.image {display:block; width:100%; height:100%; position:absolute; top:0; left:0; background-position:center center; background-size:cover;}
#allpost li span.likes {padding-left:13px; color:#ff0052;}
#allpost li p {font-size:13px; font-family:arial; padding:8px 10px 8px 13px; color:#f3f3f3;}
#allpost li .linkto {position:relative; clear:both;}
#allpost li .linkto a {position:absolute; bottom:0; right:0; padding:7px 4px 2px 6px; background:#333; color:#fff;}
#allpost li.adsbox {background:#ffffff; overflow:hidden;}
#allpost li.adsbox > :first-child > img, #allpost li.adsbox > :first-child > div {width:100%; display:inline-block; margin:13px auto; /*width:300px; height:250px; border:1px dashed #e5e5e5;*/}
#allpost li.adsbox p {color:#444444;}

#media-source {border-top:1px solid #f5f5f5; margin:10px auto 0;}
#media-source > * {width:50%; float:left;}
#media-source #infomation {padding:10px 0; float:none; width:auto;}
#media-source #infomation > * {float:left;}
#media-source #infomation img {width:40px; margin:0 12px 0 0; box-shadow:0 0 2px rgba(0,0,0,0.2);}
#media-source #infomation p {padding:3px 0px 9px;}
#media-source #infomation p a {text-decoration:none; font-family:arial; font-size:13px; color:#a0a0a0;}
#media-source #infomation p span {font-size:11px; color:#cccccc; display:block;}
#media-source #infomation p a:hover {color:#000000;}
#media-source #infomation p a:hover span {color:#a1a1a1;}
#media-source .file .source ol, #media-source .file .source ul {padding:0; margin:0; position:relative; text-align:center;}
#media-source .file .source ol:before {content:""; display:block; padding-top:100%;}
#media-source .file .source ol li {display:block; position:absolute; left:0; top:0; width:100%; height:100%;}
#media-source .file .source ol li.active {z-index:99;}
#media-source .file .source ol li:before {content:""; display:block; padding-top:100%;}
#media-source .file .source ol span {display:block; position:absolute; left:0; top:0;}
#media-source .file .source ol img {display:block; width:100%; height:auto;}
#media-source .file .source ul li {display:inline-block; padding:5px; cursor:pointer;}
#media-source .file .source ul em {display:none;}
#media-source .file .source ul span {width:10px; height:10px; display:inline-block; background:#333333; border-radius:50%;}
#media-source .file .source > * {max-width:100%;}
#media-source .right-content {width:48%; padding-left:2%;}
#media-source .right-content .social-share {float:none; display:inline-block; max-width:none;}
#media-source .right-content em {font-size:11px; font-family:arial; color:#e5e5e5; display:block; padding:3px 0 5px;}
#media-source .right-content span.likes {display:block;}

#main .social-share {padding-bottom:8px; float:right; max-width:30%;}
#main .social-share button {padding:0; border:0; margin-bottom:0;}
#main .social-share button i {width:30px; text-align:center; padding:15px 10px; font-size:20px; display:block; color:#ffffff;}
#main .social-share button em {display:none;}
#main .social-share button.facebook {background:#3b55a0;}
#main .social-share button.twitter {background:#0099bb;}
#main .social-share button.googleplus {background:#ee2d33;}
#main .social-share > * {display:block; float:left; margin-right:5px; border-radius:50%;}
#main .social-share > span a {display:block; padding-top:2px; padding-left:2px;}
#main .social-share > span a img {border-radius:50%; width:50px; height:50px; border:0; margin:0;}
#main .social-share > :last-child {margin-right:0;}

.main-lightbox {position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.7); z-index:999;}
.main-lightbox .lightbox {display:table-cell; width:100%; height:100%; vertical-align:middle; text-align:center;}
.main-lightbox .inner {display:inline-block; position:relative;}
.main-lightbox .inner div.carousel {position:relative;}
.main-lightbox .inner ul {margin:0; padding:0; /*position:absolute; bottom:100%; width:100%;*/ text-align:center;}
.main-lightbox .inner ul li {display:inline-block; padding:7px 5px 12px;}
.main-lightbox .inner ul li span {width:10px; height:10px; display:block; border-radius:50%; background:rgba(255,255,255,0.6); cursor:pointer;}
.main-lightbox .inner ul li span:hover {background:#ffffff;}
.main-lightbox img, .main-lightbox video {display:block; margin:auto; max-height:85vh; max-width:450px;}
.main-lightbox .inner .likes {/*position:absolute; left:0; top:100%; width:100%; z-index:2;*/ display:block; padding:8px 0px 4px; color:#ffffff; text-align:left;}
.main-lightbox .inner p {padding:10px 14px 12px; background:#ffffff; border-radius:4px; color:#000000; text-align:left; font-size:13px; max-width:422px; font-family:arial;}
.main-lightbox .close {position:absolute; top:15px; right:15px; width:25px; padding:6px 5px 4px 4px; background-color:#ff0052; cursor:pointer; border-radius:50%; color:#ffffff; z-index:9;}

#profile-float {position:fixed; top:0; left:0; z-index:9; width:100%;}
#profile-float .inner {padding:0px 10px; max-width:1100px; margin:auto; position:relative;}
#profile-float a {display:block; padding:2px; background:#f1004d; position:absolute; border-right:4px solid #e20049;}
#profile-float img {display:block; border-radius:50%; background:#d00042; padding:3px;}
#profile {padding:1%; margin-top:8px; background:#f7f7f7; border-radius:4px;}
#profile img {border-radius:50%; float:left; width:20%; max-width:150px;}
#profile #infomation {float:left; padding-left:2%; max-width:48%; width:100%;}
#profile h2 {font-weight:normal; font-size:18px;}
#profile #stats {padding-top:15px;}
#profile #stats p {float:left; padding-right:5%; max-width:30%; font-size:14px;}
#profile #stats p b {font-size:20px;}
#profile #stats p:last-child {padding-right:0;}
#profiles ul {padding:0; margin:0; list-style:none; clear:both;}
#profiles ul:after {content:''; float:none; height:0; display:block; clear:both;}
#profiles li {float:left; border-radius:2px; word-wrap:break-word; width:20%; margin:0 0 15px;}
#profiles li:nth-child(5n+1) {clear:both;}
#profiles li .inner {padding:5px; max-width:140px; width:95%; min-height:220px; margin:auto; box-shadow:3px 3px 12px rgba(0,0,0,0.3); background:#333333;}
#profiles li .img {margin:0px; display:block;}
#profiles li img {display:block; width:100%;}
#profiles li a {text-decoration:none; display:block; font-family:arial;}
#profiles li h3 {font-size:10px; color:#888888; font-weight:normal; padding:5px 2px 2px;}
#profiles li h4 {font-size:12px; color:#ffffff; font-weight:normal; padding:3px 4px 5px;}
#pagination {width:70%; max-width:400px; margin:auto; padding-top:10px; text-align:center;}
#pagination li {display:inline-block; margin:3px;}
#pagination li * {font-size:14px; display:block; text-align:center; width:22px; padding-top:2px; background:#f7f7f7; color:#aaaaaa; text-decoration:none;}
#pagination li a:hover {background-color:#ff0052; color:#ffffff;}
#pagination li .currentpage {background:#dedede; color:#666666;}

#searchform {width:80%; margin:auto; padding:15px 0;}
#searchform input {border-radius:0px; border:1px solid #777777; padding:2%; font-size:2rem; font-family:rsu; margin:-1px; float:left; line-height:3rem;}
#searchform input[type=text] {width:80%; background:#ffffff;}
#searchform input[type=submit] {width:20%; background:#777777;}
#search-results {padding:0 10px 20px;}
#search-results ol {margin:0;}
#search-results li {list-style:inherit;}

body.all h1 {width:70%; float:left;}
body.all #searchform {width:30%; float:right;}
body.all #searchform input {padding:2% 3%; font-size:1rem; line-height:1.8rem;}

footer .social-share ul {float:right;}
footer #footer-bottom {padding:10px 0px; font-size:12px; font-family:arial; background:#ff0052;}
footer #footer-bottom * {color:#ffffff;}
footer #footer-bottom #copyright {text-align:left; float:left;}
footer #footer-bottom #condition-page {float:right;}


/* ----- Home ----- */
body.home #intro {padding:22px; background:#f7f7f7; border-bottom:8px solid #ff0052;}
body.home #intro h2.topic {font-family:'abnormal'; font-size:2.8rem; font-weight:normal;}
body.home #intro p {font-size:100%; font-weight:normal; padding-top:5px;}
body.home #profile {background:none;}
body.home #profile > img {width:105px; padding:5px; box-shadow:0 0 7px rgba(0, 0, 0, 0.15);}





@media screen and (max-width:1020px) {
	body.dara nav.fixed > div {margin:0 10px;}
}
@media screen and (max-width:999px) {
	#media-source #infomation {padding:10px;}
	body#search #main > #container {padding:20px; width:auto;}
}
@media screen and (max-width:768px) {
	h1 {padding-left:22px; padding-right:22px;}
	header #top-head-undubzapp #logo {margin-left:15px; width:150px;}
	header #top-head-undubzapp #main-menu {position:relative; width:100%;}
	header #top-head-undubzapp #main-menu > a {position:absolute; display:block !important; bottom:100%; right:0; font-size:1.5rem; padding:17px 20px; color:#ff0052; z-index:9;}
	header #top-head-undubzapp #main-menu .menus {background-color:#000000; float:none; display:none;}
	header #top-head-undubzapp #main-menu .menus li {float:none; border:none !important; padding:0 0 1px 0;}
	header #top-head-undubzapp #main-menu .menus li a {color:#ffffff; padding:7px 24px 14px; background-color:#ff0052;}
	header #top-head-undubzapp #main-menu .menus li a.zappstar:before {background-image:url('/img/icon_zappstar_wh.png');}
	header #top-head-undubzapp #main-menu .menus li a.life-stylist:before {background-image:url('/img/icon_lifestylist_wh.png');}
	header #top-head-undubzapp #main-menu .menus li a.health-diet:before {background-image:url('/img/icon_beauty_wh.png');}
	header #top-head-undubzapp #main-menu .menus li a.entertain:before {background-image:url('/img/icon_entertain_wh.png');}
	header #top-head-undubzapp #main-menu .menus li a.varieties:before {background-image:url('/img/icon_variety_wh.png');}
	header #top-head-undubzapp #main-menu .menus li a:before {content:""; display:inline-block; width:40px; height:40px; margin-bottom:-15px; margin-right:20px; background-position:center center; background-size:contain;}
	header #top-head-undubzapp #main-menu .social-share ul {width:170px; margin:auto; padding-top:10px;}
	header #top-head-undubzapp #main-menu .follow-us a {text-align:center; color:#ffffff; padding-bottom:8px; display:block;}
	header #top-head-undubzapp #main-menu.showmenu > * {display:block !important; background-color:#000000;}
	nav > div {margin:0px 10px;}
	div#profile #infomation h1 {padding:0;}
	div#allpost {margin-top:0; padding-top:0.5%; border-top:none;}
	div#allpost ul {padding:20px 0; background:#fbfbfb;}
	div#allpost li {width:100%; max-width:336px; margin:0px auto 30px !important; height:auto; box-shadow:0 0 2px rgba(0,0,0,0.07); float:none; background:#ffffff;}
	div#allpost li:nth-child(3n) {margin-right:0;}
	div#allpost li .inner-box {height:auto;}
	div#allpost li .img {margin:0; width:100%;}
	div#allpost li span.likes {padding-top:8px; clear:both; display:block;}
	div#allpost li p {color:#444444; padding-top:0px;}
	div#allpost li.adsbox > :first-child * {border:none; margin:0;}
	#media-source > * {width:auto; float:none; max-width:620px; margin-left:auto !important; margin-right:auto !important;}
	#media-source > .file {text-align:center;}
	#media-source .right-content {width:auto; padding:10px;}
	footer .social-share {padding:10px 10px 0px; width:auto; background:#b8b8b8; text-align:center;}
	footer .social-share ul {display:inline-block; float:none;}
	footer .social-share p {display:block !important;}
	footer #footer-bottom {padding:10px 15px;}

	body.all h1 {width:auto; float:none;}
	body.all #searchform {width:90%; float:none; max-width:290px; margin-left:10px;}
}

@media screen and (max-width:600px) {
	#main .social-share {float:none; max-width:225px; margin:auto;}
	.main-lightbox img, .main-lightbox video {max-height:100vh; max-width:100vw;}
	.main-lightbox .inner div.carousel {background:#fff;}
	.main-lightbox .inner ul li span {background:rgba(0,0,0,0.6);}
	.main-lightbox .inner ul li span:hover {background:#101010;}
	.main-lightbox .inner p {max-width:calc( 100vw - 28px ); border-radius:0px;}
	.main-lightbox .inner .likes {background:#fff; color:#ff0052; padding:5px 14px;}
	#profile {margin-top:80px;}
	#profile img {margin:-66px auto 10px; display:block; border:10px solid #fff; width:105px; float:none;}
	#profile #infomation {float:none; max-width:none; padding:0px 10px; width:auto;}
	#profile #stats {margin:10px auto; padding:10px 0px; border-radius:4px; background:#eee;}
	#profile #stats b {font-size:22px; display:block; line-height:21px;}
	#profile #stats p {padding-right:0%; max-width:none; width:33%; text-align:center; border-right:1px solid #ddd; line-height:11px;}
	#profile #stats p:last-child {padding-right:0; border-right:none;}
	#profiles {max-width:450px; margin:auto;}
	#profiles ul {padding:0;}
	#profiles li {width:33%; margin-left:0.5%;}
	#profiles li:nth-child(3n+1) {clear:both; margin-left:0%;}
	#profiles li:nth-child(5n+1) {clear:none;}
	#profiles li .inner {padding:0; width:99%; min-height:180px;}
	#profiles li:nth-child(3n+1) .inner {margin-left:0;}
	#profiles li:nth-child(3n) .inner {margin-right:0;}
	#searchform input[type=submit] {font-size:90%;}
	footer #footer-bottom #condition-page,
	footer #footer-bottom #copyright
	{float:none;}

	/* Home */
	body.home #profile {background:#f7f7f7;}
	body.home #profile > img {padding:0;}

	body.all #searchform {margin-left:auto;}
}

@media screen and (max-height:800px) {
	.main-lightbox.open {display:block !important; overflow-y:scroll;}
	.main-lightbox .lightbox {display:block;}
	.main-lightbox .inner {padding-top:70px; padding-bottom:15px;}
}