@charset "utf-8";

/* 
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

	Style for Developer
	
	- Customize Bootstrap Grid System
	- Default Element
	- CSS Utility
	- Common Layout Class
			
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/





/* 
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

	Customize Bootstrap Grid System
	
	- Mobile 
	- Tablet 
	- Desktop 
	- Large Desktop
	
@media (max-width: 767px) {
}

@media (min-width: 768px) {
}

@media (min-width: 992px) {
}

@media (min-width: 1200px) {
}

///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/

.container {
  padding-right: 0px;
  padding-left: 0px;
}

.row {
  margin-right: 0px;
  margin-left: 0px;
}

@media (max-width: 767px) {
}

@media (min-width: 768px) {
	.container {
		/*width: 750px;*/
		width: auto;
	}
}

@media (min-width: 992px) {
	.container {
		/*width: 970px;*/
		width: auto;
	}
}

@media (min-width: 1200px) {
	.container {
		width: 1200px;
	}
}





/* 
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

	Default Element

///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/

html, body { 
	height: 100%; 
}

html {
	font-size: 100%; /* 16px */
}

body { 
	background-color: #eeeeee; 
	font-family: Tahoma; 
	font-size: 87.5%; /* 14px = 1em */
	color: #666; 
	line-height: 1.6; 
	/* Better Font Rendering */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

a { 
	color: #F00; 
}

a:hover { 
	color: #333; 
	text-decoration:none; 
}

/*
a:visited { 
	color: #999; 
}
*/

h1, h2, h3, h4, h5, h6 { 
	padding: 0; 
	margin: 0;
	font-size: 1em;
	font-weight: normal; 
	line-height: 1;
}

p {
	margin: 0;
}

ul, ol {
	padding: 0;
	margin: 0;
}

li {
	list-style-type: none;
}

address {
	margin: 0;
	line-height: 1.6;
}





/* 
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

	CSS Utility
	
	- Grouping CSS Property Order
	
	- Utility Class
		- clearfloat / h-hide / table-display / tablecell-display / block-relative / assign-width-height / assign-height / assign-width
		- Input/Textarea (Standard)
		- CMS Clear
		- Button (Standard)
		- Transition Sample
		- Column Space (for Responsive Layout)
		- Container Padding
		----------------------------------------------
		*Use in sample1.php
		- Bottom Space 
		- TopBottom Space 
		- Bottom Line 
		- Background Color
		----------------------------------------------
		
	- Example CSS Property
		- Box Shadow
		- Opacity
		- RGBA Color
		- Transform
		- Text Shadow	
	
	- Content Template
		- List
		- Breadcrumb
		- Circle Image
		- Justified and Vertically Centered Header Element
		- Centering in the Unknown	
	
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/

/* Grouping CSS Property Order
======================================================================================  */
.Grouping-Properties-Order {
	/* Box */
	display: block; 
	overflow: auto;
	float: left;
	position: absolute; 
	z-index: 1; 
	top: 0; 
	left: 0;
	width: 100px; 
	height: 100px;
	padding: 0; 
	margin: 0;
	/* Border */
	border: solid 1px #999;
	border-radius: 50%;
	/* Background */
	background: #999;
	box-shadow: 0 1px 5px -1px #333;
	/* Text */
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: #666;
	line-height: 1.5;
	text-shadow: 0 1px 0 #333;
	/* Opacity */
	opacity: 1;
	filter: alpha(opacity=100);
	/* Transform */
	transform: scale(0.75,0.75);
	/* Transition */
	transition: all  0.3s ease 0s;
}





/* Utility Class
======================================================================================  */
.clearfloat { 
	clear: both; 
	line-height: 0;
}

.wrap-clearfloat {
	overflow: hidden;
}

.leftfloat {
	float: left;
}

.clearbutton {
	display: inline-block;
	border: none;
	border-radius: 2px;
}

.h-hide { 
	position: absolute!important;
	height: 1px;
	width: 1px;
	overflow: hidden;
}

.block-display {
	display: block;	
}

.table-display {
	display: table;
}

.tablecell-display {
	display: table-cell;
	vertical-align: middle;
}

.block-relative {
	position: relative;
}

.justify-text {
	text-align: justify;
}

.center-text {
	text-align: center;
}

.assign-height {
	height: 100%;
}

.assign-width {
	width: 100%;
}

.assign-width-height {
	width: 100%;
	height: 100%;
}



/* Input/Textarea 
--------------------------------------------------------------------------------------------------------------------- */
/* Frame Style 
------------------------------------------------------------ */
.blank-form-frame {
	padding: 10px;
	border-radius: 2px;
}

.blank-form-frame.stdframe {
	background-color: #FFF;
	border: solid 1px #999;
}

.blank-form-frame.requestframe {
	background-color: #FFF;
	border-top: solid 2px #666666;
}

/* Input Style 
------------------------------------------------------------ */
.blank-form-item {
	width: 100%;
	max-width: 100%;
	padding: 0;
	border: none;
	color: #333;
}

.blank-form-item.stdtext {
	color: #333;
}



/* CMS Clear
--------------------------------------------------------------------------------------------------------------------- */

/* HTML for CMS-Clear Testing */

/*

	<h1>แอลกอฮอลิซึมเอทิลีนไดนามิคส์อินทิกรัล</h1>
	<h2>เอ็กซ์โพเนนเชียลอีโบล่าซิลิกาเอสเตอร์</h2>
	<h3>โซนาร์ไดนามิคส์ไดนามิคส์ไดนามิคส์โพลีเอทิลีน</h3>
	<h4>เมทริกซ์ไซบอร์กฮับเบิลพาราโบลา</h4>
	<h5>ฮิวมัสเอทานอลเวสิเคิลเพอร์ออกไซด์</h5>
	<h6>โซนาร์เอทานอลไบโอตินคอปเปอร์ </h6>
	<a href="#">เวกเตอร์ฮิวมัส</a>
	<p>แอนดรอยด์ โวลต์ ทามิฟลูยูเรียปฏิยานุพันธ์ ออโรร่าแอสพาร์แตม ฮับเบิล ไทรอยด์เมลานินสปีชีส์ไฮโดรลิกคอนดักเตอร์ กลีเซอรีนไดนามิกส์อะลูมินาอีโบลาเมตริกซ์ อะซีติกเอสเตอร์ ควอนตัมอะซีติกเทอร์โมแคสสินีเมลานิน ชิคุนกุนยา กลีเซอรีนสปีชีส์ ทามิฟลู อะลูมินาโวลต์ เวสิเคิลไฮดรอลิกไฮโดรลิก เพอร์ออกไซด์ยีสต์ไทฟอยด์อะซีติกยีสต์ ฟีโรโมนโพลิเมอร์ไฮเพอร์โบลาสปีชีส์ซีเทน</p>
	<p>เซมิไฮโดรลิก กลีเซอรีนธาลัสซีเมียอัลตราซาวนด์สเปิร์ม อัลตราซาวนด์อัลตราซาวนด์ โอเซลทามิเวียร์เอสเตอร์สเปิร์มฟีโรโมน โพลาไรซ์ไดนามิกส์ ออกเทนเมตริกซ์ พันธุศาสตร์ไดนามิกสเกลาร์ไฮดรอลิก พันธุศาสตร์ไททันยูเรียอีโบลาฟิวชัน ไดนามิคส์ เทอร์โมโซนาร์ พาราเซตามอลเอทิลีนซิงค์จุลชีววิทยา ซัลไฟด์ซิลิกาไฮโดรลิกไซบอร์กอัลตราซาวนด์ ฟิชชันอะลูมินา สเกลาร์ทามิฟลูครอสโพลิเมอร์ ซิลิกาอีโบล่าไฮโดรลิกปฏิยานุพันธ์ แอสพาร์แตมโพลาไรซ์โอเซลทามิเวียร์</p>
	<p>พัลซาร์เวสิเคิล เอทิลีน ไฮดรอกไซด์ไดออกไซด์บอแรกซ์ ยูเรียโพลีเอทิลีนเวกเตอร์ ควอนตัมทามิฟลูโอเซลทามิเวียร์แคสสินีฮับเบิล พัลซาร์เมตริกซ์ปฏิยานุพันธ์ไดนามิคส์เวกเตอร์ แอนแทร็กซ์ฟลูออไรด์มอนอกไซด์ซิลิกา ธาลัสซีเมียคอเลสเตอรอล เอทิลีนวีก้าแอนแทร็กซ์ไฮดรอลิกพัลซาร์ ไดออกไซด์สปีชีส์คอปเปอร์ธาลัสซีเมีย เนกาตีฟไบโอติน แอสพาร์แตมยูริกแอนแทร็กซ์ ออโรรา คูลอมบ์สเกลาร์จุลชีววิทยาคอนดักเตอร์ แอสพาร์แตม แอสพาร์แตมสเกลาร์สเต็มฮิวมัสแอลกอฮอลิซึม</p>
	<ul>
		<li>ออโรร่าดอปเปลอร์ พันธุศาสตร์ฟิวชันยูเรีย ซิลิเกต อินทิกรัล แอลกอฮอลิซึมเอทิลีนไดนามิคส์อินทิกรัล อัลตราซาวนด์เวสิเคิล</li>
		<li>อะมิโนฟิชชันซิงค์คอปเปอร์ เอ็กซ์โพเนนเชียลอีโบล่าซิลิกาเอสเตอร์ โซนาร์ไดนามิคส์ไดนามิคส์ไดนามิคส์โพลีเอทิลีน สเปิร์มอีโบลา</li>
		<li>เมทริกซ์ไซบอร์กฮับเบิลพาราโบลา โวลต์ออโรราแคโรทีน ฮิวมัสฮับเบิล ไดนามิคฟีโรโมน สปีชีส์พอลิเมอร์ฟิชชัน ฮิวมัสเพอร์ออกไซด์ซีเทนเอทิลีน</li>
	</ul>
	<ol>
		<li>ทามิฟลูคอปเปอร์ไฮเพอร์โบลา ฟิชชันฟลูออเรสเซนซ์ทามิฟลูซิลิกา เอทานอลไซบอร์กเมลามีนสเต็ม เทอร์โมโวลต์เซ็กเตอร์อัลตราซาวด์</li>
		<li>ฮิวมัสเอทานอลเวสิเคิลเพอร์ออกไซด์ สัมพัทธภาพ โซนาร์เอทานอลไบโอตินคอปเปอร์ เวสิเคิล แคโรทีนซิงค์ ควอนตัมไฮเพอร์โบลา</li>
		<li>คลอไรด์ดอปเพลอร์โซนาร์จุลชีววิทยา เวกเตอร์ฮิวมัส บอแรกซ์แคสสินี ซัลไฟด์พอลิเมอร์คลอไรด์ซัลไฟด์ สุริยจักรวาลโอเซลทามิเวียร์ไฟเบอร์</li>
	</ol>
	<h1>Objectively innovate empowered</h1>
	<h2>Holisticly predominate extensible testing</h2>
	<h3>Dramatically engage top-line web services</h3>
	<h4>Proactively envisioned multimedia</h4>
	<h5>Seamlessly visualize quality intellectual</h5>
	<h6>Holistically pontificate installed</h6>
	<a href="#">Interactively procrastinate</a>
	<p>Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits. Dramatically visualize customer directed convergence without revolutionary ROI.</p>
	<p>Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar solutions without functional solutions.</p>
	<p>Completely synergize resource sucking relationships via premier niche markets. Professionally cultivate one-to-one customer service with robust ideas. Dynamically innovate resource-leveling customer service for state of the art customer service.</p>
	<ul>
		<li>Credibly innovate granular internal or "organic" sources whereas high standards in web-readiness. Energistically scale future-proof core competencies vis-a-vis impactful experiences.</li>
		<li>Collaboratively administrate turnkey channels whereas virtual e-tailers. Objectively seize scalable metrics whereas proactive e-services.</li>
		<li>Phosfluorescently engage worldwide methodologies with web-enabled technology.</li>
	</ul>
	<ol>
		<li>Appropriately empower dynamic leadership skills after business portals. Globally myocardinate interactive supply chains with distinctive quality vectors.</li>
		<li>Enthusiastically mesh long-term high-impact infrastructures vis-a-vis efficient customer service. Professionally fashion wireless leadership rather than prospective experiences.</li>
		<li>Progressively maintain extensive infomediaries via extensible niches. Dramatically disseminate standardized metrics after resource-leveling processes.</li>
	</ol>
	<img src="https://dl.dropboxusercontent.com/u/65072404/retina-img-size.gif" alt="Responsive Testing Image" />

*/

/* HTML for Add Content in CMS-Clear */

/*

<p style="margin: 0px 0px 5px 0px;">55555555555555555</p>
<ol style="padding-left: 28px; margin: 0px 0px 5px 0px; font-size: 18px;">
    <li>
        <span style="display: block; margin-bottom: 3px;">55555555555555</span>
        <ol style="margin: 0px; font-size: 14px;">
            <li>
                <span style="display: block; margin-bottom: 3px;">555555555555</span>
                <ul style="margin: 0px 0px 5px 0px;">
                    <li style="list-style-type: disc;">555555555</li>
                    <li style="list-style-type: disc;">555555555</li>
                    <li style="list-style-type: disc;">555555555</li>
                    <li style="list-style-type: disc;">555555555</li>
                    <li style="list-style-type: disc;">555555555</li>
                </ul>

            </li>
            <li>555555555</li>
            <li>555555555</li>
            <li>555555555</li>
            <li>555555555</li>
        </ol>
    </li>
</ol>

<ol style="padding-left: 28px; margin: 0px 0px 5px 0px; font-size: 18px;">
    <li>
        <span style="display: block; margin-bottom: 3px;">55555555555555</span>
        <ul style="margin: 0px; font-size: 14px;">
            <li style="list-style-type: disc;">555555555</li>
        </ul>
    </li>
</ol>

<ul style="margin: 0px 0px 10px 0px; font-size: 18px;">
    <li style="font-size: 14px; list-style-type: disc;">
        <p style="margin: 0px 0px 3px 0px;">5555555555</p>
        <p style="margin: 0px 0px 5px 0px;">5555555555555555555555</p>
    </li>
    <li style="font-size: 14px; list-style-type: disc;">
        <p style="margin: 0px 0px 3px 0px;">555555555</p>
        <ul style="padding-left: 18px; margin: 0px;">
            <li style="list-style-type: circle;">
                <p style="margin: 0px 0px 3px 0px;">55555555</p>
                <p style="margin: 0px 0px 5px 0px;">55555555555555555555</p>
            </li>
            <li style="list-style-type: circle;">
                <p style="margin: 0px 0px 3px 0px;">55555555</p>
                <p style="margin: 0px 0px 5px 0px;">55555555555555555555</p>
            </li>
        </ul>
    </li>
</ul>

*/
	
.cmsclear {}

.cmsclear h1, 
.cmsclear h2, 
.cmsclear h3, 
.cmsclear h4, 
.cmsclear h5, 
.cmsclear h6 {
	margin-left: 0;
	margin-right: 0;
	font-weight: bold;
}

.cmsclear h1 {
	margin-top: 0.67em;
	margin-bottom: 0.67em;
	font-size: 2em;
}

.cmsclear h2 {
	margin-top: 0.83em;
	margin-bottom: 0.83em;
	font-size: 1.5em;
}

.cmsclear h3 {
	margin-top: 1em;
	margin-bottom: 1em;
	font-size: 1.17em;
}

.cmsclear h4 {
	margin-top: 1.33em;
	margin-bottom: 1.33em;
	font-size: 1em;
}

.cmsclear h5 {
	margin-top: 1.67em;
	margin-bottom: 1.67em;
	font-size: 0.83em;
}

.cmsclear h6 {
	margin-top: 2.33em;
	margin-bottom: 2.33em;
	font-size: 0.67em;
}

.cmsclear p {
	margin: 0;
}

.cmsclear ul, 
.cmsclear ol {
	padding-left: 20px; 
	margin: 1em 0; 
	list-style-type: disc; 
}

.cmsclear ul li {
	list-style-type: disc; 
}

.cmsclear ol li {
	list-style-type: decimal; 
}

.cmsclear a {
	color: #0645AD;
}

.cmsclear a:hover {
	color: #0645AD;
	text-decoration: underline;
}

.cmsclear a:visited {
	color: #0B0080;
}

.cmsclear img {
	max-width: 100%;
	height: auto;
}



/* Button
--------------------------------------------------------------------------------------------------------------------- */
.std-button {
	display: inline-block;
	border-radius: 2px;
	-webkit-transition: all 0.3s ease 0s;
			   transition: all 0.3s ease 0s;
}

/* Style 1 - Main 
------------------------------------------------------------ */
.button-style1 {
	padding: 8px 15px;
	border-bottom: solid 2px #999;
	background-color: #bbb;
	color: #FFF;
}

.button-style1:hover {
	border-bottom-color: #666;
	background-color: #999;
	color: #FFF;
}

/* Style 2 - Minor 
------------------------------------------------------------ */
.button-style2 {
	padding: 8px 18px 10px 18px;
	border-bottom: solid 2px #999;
	background-color: #bbb;
    font-family: ThaiSansNeue-Regular;
	font-size: 24px;
	color: #FFF;
	line-height: 1;
}

.button-style2:hover {
	border-bottom-color: #666;
	background-color: #999;
	color: #FFF;
}

/* Flashing when puash button 
------------------------------------------------------------ */
.std-button:active {
	border-bottom-color: #FFF;
	background-color: #FFF;
	color: #FFF;
}



/* Transition Sample
--------------------------------------------------------------------------------------------------------------------- */

/* Transition Function */
/*
	-webkit-transition-property: all;
			   transition-property: all;
	-webkit-transition-duration: 0.3s;
			   transition-duration: 0.3s;
	-webkit-transition-timing-function: ease;
			   transition-timing-function: ease;
	-webkit-transition-delay: 0s;
			   transition-delay: 0s;
*/

/* ease */
.trs {
	transition: all 0.3s ease 0s;
}

/* easeOutQuart */
.oq-trs {
	transition: all 0.5s cubic-bezier(0.165, 0.840, 0.440, 1.000) 0s;
}

/* easeOutExpo */
.oe-trs {
	transition: all 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000) 0s;
}

/* easeInOutExpo */
.ioe-trs {
	transition: all 0.5s cubic-bezier(1.000, 0.000, 0.000, 1.000) 0s;
}

/* easeInOutCubic */
.ioe-trs {
	transition: all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1.000) 0s;
}

/* For Transform only */
.sample-transform-trs {
	transition: transform 0.3s ease 0s;
}



/* Column Space
--------------------------------------------------------------------------------------------------------------------- */
.wrapcol-space-10 {
	margin-left: -10px;
}

.col-space-10 {
	margin-left: 10px;
}

.wrapcol-space-15 {
	margin-left: -15px;
}

.col-space-15 {
	margin-left: 15px;
}

.wrapcol-space-20 {
	margin-left: -20px;
}

.col-space-20 {
	margin-left: 20px;
}

.wrapcol-space-30 {
	margin-left: -30px;
}

.col-space-30 {
	margin-left: 30px;
}

.wrapcol-space-40 {
	margin-left: -40px;
}

.col-space-40 {
	margin-left: 40px;
}

.wrapcol-space-50 {
	margin-left: -50px;
}

.col-space-50 {
	margin-left: 50px;
}



/* Container Padding
--------------------------------------------------------------------------------------------------------------------- */
@media (max-width: 767px) {
	.xs-sm-padding-10 {
		padding-left: 10px;
		padding-right: 10px;
	}
	
	.xs-sm-padding-15 {
		padding-left: 15px;
		padding-right: 15px;
	}
	
	.xs-sm-padding-20 {
		padding-left: 20px;
		padding-right: 20px;
	}
	
	.xs-sm-md-padding-10 {
		padding-left: 10px;
		padding-right: 10px;
	}
	
	.xs-sm-md-padding-15 {
		padding-left: 15px;
		padding-right: 15px;
	}
		
	.xs-sm-md-padding-20 {
		padding-left: 20px;
		padding-right: 20px;
	}
}

@media (min-width: 768px) {
	.xs-sm-padding-10 {
		padding-left: 10px;
		padding-right: 10px;
	}
	
	.xs-sm-padding-15 {
		padding-left: 15px;
		padding-right: 15px;
	}
		
	.xs-sm-padding-20 {
		padding-left: 20px;
		padding-right: 20px;
	}
	
	.xs-sm-md-padding-10 {
		padding-left: 10px;
		padding-right: 10px;
	}
	
	.xs-sm-md-padding-15 {
		padding-left: 15px;
		padding-right: 15px;
	}
		
	.xs-sm-md-padding-20 {
		padding-left: 20px;
		padding-right: 20px;
	}
}

@media (min-width: 992px) {
	.xs-sm-padding-10 {
		padding-left: 0;
		padding-right: 0;
	}
	
	.xs-sm-padding-15 {
		padding-left: 0;
		padding-right: 0;
	}
		
	.xs-sm-padding-20 {
		padding-left: 0;
		padding-right: 0;
	}
	
	.xs-sm-md-padding-10 {
		padding-left: 10px;
		padding-right: 10px;
	}
	
	.xs-sm-md-padding-15 {
		padding-left: 15px;
		padding-right: 15px;
	}
		
	.xs-sm-md-padding-20 {
		padding-left: 20px;
		padding-right: 20px;
	}
}

@media (min-width: 1200px) {
	.xs-sm-padding-10 {
		padding-left: 0;
		padding-right: 0;
	}
	
	.xs-sm-padding-15 {
		padding-left: 0;
		padding-right: 0;
	}
		
	.xs-sm-padding-20 {
		padding-left: 0;
		padding-right: 0;
	}
	
	.xs-sm-md-padding-10 {
		padding-left: 0;
		padding-right: 0;
	}
	
	.xs-sm-md-padding-15 {
		padding-left: 0;
		padding-right: 0;
	}
		
	.xs-sm-md-padding-20 {
		padding-left: 0;
		padding-right: 0;
	}
}



/* Bottom Space
--------------------------------------------------------------------------------------------------------------------- */
.bt-space-5 {
	margin-bottom: 5px;
}

.bt-space-10 {
	margin-bottom: 10px;
}

.bt-space-15 {
	margin-bottom: 15px;
}

.bt-space-20 {
	margin-bottom: 20px;
}

.bt-space-30 {
	margin-bottom: 30px;
}



/* TopBottom Space
--------------------------------------------------------------------------------------------------------------------- */
.tbt-space-5 {
	margin-top: 5px;
	margin-bottom: 5px;
}

.tbt-space-10 {
	margin-top: 10px;
	margin-bottom: 10px;
}

.tbt-space-15 {
	margin-top: 15px;
	margin-bottom: 15px;
}

.tbt-space-20 {
	margin-top: 20px;
	margin-bottom: 20px;
}

.tbt-space-30 {
	margin-top: 30px;
	margin-bottom: 30px;
}



/* Bottom Line
--------------------------------------------------------------------------------------------------------------------- */
.bt-line-style1 {
	border-bottom: dashed 1px #999;
}



/* Background Color 
--------------------------------------------------------------------------------------------------------------------- */
.bgcolor-style1 {
	background-color: #CCC;
}





/* Example CSS Property
======================================================================================  */

/* Box Shadow
	box-shadow: h-shadow v-shadow blur spread color inset;
--------------------------------------------------------------------------------------------------------------------- */
.boxShadow {
	box-shadow: 0 1px 3px -1px #999;
}

.lt-ie9 .boxShadow {
	border-bottom: solid 1px #CCC;
}

/* Left */
.boxShadow-left {
	box-shadow: -5px 0 10px -5px #333;
}

/* Right */
.boxShadow-right {
	box-shadow: 5px 0 10px -5px #333;
}

/* Top */
.boxShadow-top {
	box-shadow: 0 -5px 10px -5px #333;
}

/* Bottom */
.boxShadow-bottom {
	box-shadow: 0 5px 10px -5px #333;
}

/* Around */
.boxShadow-around {
	box-shadow: 0 0 10px 0 #333;
}



/* Opacity
--------------------------------------------------------------------------------------------------------------------- */
.transparent-Opacity {
	filter: Alpha(opacity=50); /* lt-ie9 */
	opacity: 0.5;
}



/* RGBA Color
--------------------------------------------------------------------------------------------------------------------- */
.rgba-color {
	background-color: #febfbf; /* lt-ie9 */
	background-color: rgba(255, 0, 0, 0.25);
}



/* Transform
--------------------------------------------------------------------------------------------------------------------- */
.transform-property {
	/* translate, translateX, translateY */
	transform: translate(100px,100px);
	/* scale, scaleX, scaleY */
	transform: scale(1.5,1.5);
	/* rotate */
	transform: rotate(15deg);
	/* skew, skewX, skewY */
	transform: skew(-15deg,0deg);
}



/* Text Shadow
	text-shadow: h-shadow v-shadow blur color;
--------------------------------------------------------------------------------------------------------------------- */
.textShadow {
	color: #666;
	text-shadow: 0 1px 0 #FFF;
}

.lt-ie10 .textShadow {
	color: #333;
}





/* Content Template
======================================================================================  */
/* List
--------------------------------------------------------------------------------------------------------------------- */
/* Icon List
------------------------------------------------------------ */
.unlist {}

.unlist li {
	position: relative;
}

.unlist li span {
	display: block;
	position: absolute; z-index: 1; 
	top: 7px; left: 0;
	line-height: 1;
}

.unlist li span + span {
	position: static;
	padding-bottom: 5px;
	margin-left: 30px;
	line-height: 2;
}

.sub-unlist {
	margin-left: 30px;
}

/* Number List
------------------------------------------------------------ */
.orderlist {
	padding-left: 20px;
}

.orderlist li {
	padding-left: 5px;
	list-style-type: decimal;
	list-style-position: outside;
}

.orderlist li span {
	display: block;
}

.sub-orderlist {
	padding-left: 0;
}

.sub-orderlist li {
	position: relative;
	padding-left: 0;
	list-style-type: none;
}

.sub-orderlist li span {
	position: absolute; z-index: 1; 
	top: 0; left: 0;
}

.sub-orderlist li span + span {
	position: static;
	margin-left: 30px;
}



/* Breadcrumb
--------------------------------------------------------------------------------------------------------------------- */
.tree-root {
	overflow: hidden;
}

.tree-root li {
	display: block;
	float: left;
}

.tree-root li span {
	display: block;
	margin-left: 10px;
	margin-right: 10px;
}



/* Circle Image
--------------------------------------------------------------------------------------------------------------------- */
.circle-mask {
	position: relative;
}

.circle-mask-border {
	position: absolute; 
	z-index: 1; top: 0; left: 0;
	width: 100%; 
	height: 100%;
	border-radius: 50%;
	border: solid 5px #FF0000;
}

.circle-mask-img {
	overflow: hidden;
	border-radius: 50%;
	margin: 1px; /* Hide Pixel Noise */
}



/* Justified and Vertically Centered Header Element
--------------------------------------------------------------------------------------------------------------------- */
.valign-wrap {
	text-align: justify;
}

.valign-wrap.sample {
	padding: 30px 0;
	background-color: #CCC;
}

.valign-wrap:after {
	content: '';
	display: inline-block;
	width: 100%;
}

/* Left + Right */
.valign-wrap__leftblock,
.valign-wrap__leftblock a,
.valign-wrap__rightblock {
	display: inline-block;
	vertical-align: middle;
}

/* Left */
.valign-wrap__leftblock {
	width: 50%;
	height: 100%;
}

.valign-wrap__leftblock:before {
	content: '';
    display: inline-block;
    vertical-align: middle;  
    height: 100%;
	margin-left: -4px; /* Adjusts for spacing */
}

/* Right */
.valign-wrap__rightblock {
	width: 45%;
}

@media (max-width: 767px) {
	.valign-wrap.sample {
		padding: 30px;
		background-color: #CCC;
	}
	
	.valign-wrap__leftblock {
		width: 100%;
	}	
	
	.valign-wrap__rightblock {
		width: 100%;
	}
}

@media (min-width: 768px) {
	.valign-wrap.sample {
		padding: 30px;
		background-color: #CCC;
	}
	
	.valign-wrap__leftblock {
		width: 100%;
	}	
	
	.valign-wrap__rightblock {
		width: 100%;
	}
}

@media (min-width: 992px) {
	.valign-wrap.sample {
		padding: 30px 0;
		background-color: #CCC;
	}
	
	.valign-wrap__leftblock {
		width: 50%;
	}	
	
	.valign-wrap__rightblock {
		width: 45%;
	}
}

@media (min-width: 1200px) {
	.valign-wrap.sample {
		padding: 30px 0;
		background-color: #CCC;
	}
	
	.valign-wrap__leftblock {
		width: 50%;
	}	
	
	.valign-wrap__rightblock {
		width: 45%;
	}
}



/* Centering in the Unknown
--------------------------------------------------------------------------------------------------------------------- */
.calign-wrap {
	text-align: center;
}

.calign-wrap:before {
	content: '';
	display: inline-block;
	vertical-align: middle;
	height: 100%;
}

/* Center */
.calign-wrap__centerblock {
	display: inline-block;
	vertical-align: middle;
}





/* 
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

	Common Layout Class
	
	- Horizontal + Vertical Item List
	- Site Pager
    - Select Page
	- Bullet List Item
	- Fixed Side Column Menu

///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/

/* Horizontal + Vertical Item List
======================================================================================

	.itemlist {}
	.itemlist__img {}
	.itemlist__img--card {}
	.itemlist__img--hcard {}
	.itemlist__info {}
	.itemlist__info__title {}
	.itemlist__info__title--card {}
	.itemlist__info__title--hcard {}
	.itemlist__info__date {}
	.itemlist__info__date--withfb {}
	.itemlist__info__date--withfb__fbbtn {}
	.itemlist__info__preface {}
	.itemlist__info__preface--hcard {}
	.itemlist__info__footer {}
	.itemlist__info__footer__author {}
	.itemlist__info__footer__social {}
	.itemlist__info__footer__social__fb {}
	
	.itemlist-radius {}
	.itemlist-radius--pinterest {}	
	
	.itemlist-wrap-bg {}
	.itemlist-wrap-bg--bottomline {}
	.itemlist-wrap-padding {}
	.itemlist-wrap-padding--footer {}
	.itemlist-wrap-padding--hcard {}
	
======================================================================================  */
.itemlist {}

.itemlist li,
.itemlist--notice li {
	padding-bottom: 20px;
	margin-bottom: 30px;
	border-bottom: solid 1px #CCC;
}

.itemlist--notice {
    margin-top: 25px;
}

.itemlist--person li {
	padding-bottom: 20px;
	margin-bottom: 20px;
	border-bottom: solid 1px #CCC;
}

.itemlist--hcard li {
	margin-bottom: 20px;
}

.itemlist--card li {
	margin-bottom: 15px;
}

/* กรณีที่ Item List มีสไตล์เฉพาะตัว ก็ให้ใช้หลักของ BEM ในการตั้งชื่อ (ตัวอย่างด้านล่าง) */
/*.itemlist--other li {
	padding-bottom: 10px;
	margin-bottom: 10px;
	border-bottom: dashed 1px #CCC;
}*/

/* Image
--------------------------------------------------------------------------------------------------------------------- */
.itemlist__img,
.itemlist__img--bgcard {
	margin-bottom: 0;
}

.itemlist__img--blankcard {
	margin-bottom: 5px;
}

.itemlist__img--hcard {
	margin-bottom: 8px;
}

/* Information
--------------------------------------------------------------------------------------------------------------------- */
.itemlist__info {}

/* Title + Preface 
------------------------------------------------------------ */
.itemlist__info__title a,
.itemlist__info__title--notice a,
.itemlist__info__title--card a,
.itemlist__info__title--hcard a,
.itemlist__info__preface a,
.itemlist__info__preface--hcard a {
	display: block;
	transition: all 0.3s ease 0s;
}

/* Title 
------------------------------------------------------------ */
.itemlist__info__title,
.itemlist__info__title--notice {
	margin-bottom: 10px;
}

.itemlist__info__title--card {
	margin-bottom: 8px;
}

.itemlist__info__title--hcard {
	margin-bottom: 10px;
}

.itemlist__info__title a,
.itemlist__info__title--notice a,
.itemlist__info__title--card a,
.itemlist__info__title--hcard a {
    font-family: ThaiSansNeue-Regular;
	font-size: 30px;
	color: #333;
}

.itemlist__info__title a,
.itemlist__info__title--notice a,
.itemlist__info__title--hcard a {
	margin-top: -10px;

}

.itemlist__info__title a:hover,
.itemlist__info__title--card a:hover,
.itemlist__info__title--hcard a:hover {
	color: #F00;
}

.itemlist__info__title--notice a:hover {
    color: #f55889;
}

.itemlist__info__title a:active,
.itemlist__info__title--notice a:active,
.itemlist__info__title--card a:active,
.itemlist__info__title--hcard a:active {
	color: #FFF;
}

/* Date */
.itemlist__info__date {
	margin-bottom: 5px;
}

.itemlist__info__date time,
.itemlist__info__date--withfb time {
	font-size: 16px;
	color: #333;
}

.itemlist__info__date--withfb {
	margin-bottom: 10px;
}

.itemlist__info__date--withfb time {
	display: inline-block;
	margin-right: 10px;
}

.itemlist__info__date--withfb__fbbtn {
	display: inline-block;
}

/* Preface 
------------------------------------------------------------ */
.itemlist__info__preface {}

.itemlist__info__preface--hcard {
	padding-top: 10px;
	margin-top: 10px;
	border-top: solid 1px #CCC;
}

.itemlist__info__preface a,
.itemlist__info__preface--hcard a {
	color: #666;
}

.itemlist__info__preface a:hover,
.itemlist__info__preface--hcard a:hover {
	color: #666;
}

.itemlist__info__preface a:active,
.itemlist__info__preface--hcard a:active {
	color: #FFF;
}

/* Personal Detail 
------------------------------------------------------------ */

/* Share CSS */
.itemlist__info__name,
.itemlist__info__position {
    font-family: ThaiSansNeue-Regular;
	color: #333;
}

.itemlist__info__tel,
.itemlist__info__email {
    font-size: 16px;
}

.itemlist__info__tel:before,
.itemlist__info__email:before {
    display: inline-block;
    margin-right: 10px;
    color: #333333;
}

/* Name */
.itemlist__info__name {
    margin-top: -10px;
    margin-bottom: 7px;
	font-size: 36px;
}

/* Position */
.itemlist__info__position {
    margin-top: -5px;
    margin-bottom: 7px;
    font-size: 28px;
    line-height: 1;
}

/* Tel */
.itemlist__info__tel {}

.itemlist__info__tel:before {
    content: 'โทรศัพท์:';
}

/* Email */
.itemlist__info__email {}

.itemlist__info__email:before {
    content: 'อีเมล์:';
}

/* Footer 
------------------------------------------------------------ */
.itemlist__info__footer {
	border-top: solid 1px #CCC;
	background-color: #FFF;
}

.itemlist__info__footer__author {
	font-size: 12px;
}

.itemlist__info__footer__social {
	text-align: right;
}

.itemlist__info__footer__social__fb {
	display: inline-block;
}

/* Radius Wrap
--------------------------------------------------------------------------------------------------------------------- */
.itemlist-radius,
.itemlist-radius--pinterest {
	overflow: hidden;
}

.itemlist-radius {
	border-radius: 4px;
}

.itemlist-radius--pinterest {
	border-radius: 6px;
	box-shadow: 0px 1px 2px 0px #CCC;
}

/* Information Wrap
--------------------------------------------------------------------------------------------------------------------- */
/* Bcakground 
------------------------------------------------------------ */
.itemlist-wrap-bg {
	background-color: #FFF;
}

.itemlist-wrap-bg--bottomline {
	border-bottom: solid 2px #CCC;
	background-color: #FFF;
}

/* Padding 
------------------------------------------------------------ */
.itemlist-wrap-padding {
	padding: 5px 15px 15px 15px;
}

.itemlist-wrap-padding--footer {
	padding: 10px 15px;
}

.itemlist-wrap-padding--hcard {
	padding: 20px 15px 15px 15px;
}

@media (max-width: 767px) {
	.itemlist__img {
		margin-bottom: 5px;
	}
	
	.itemlist__img--hcard {
		margin-bottom: 5px;
	}
	
	.itemlist__info__title--hcard {
		margin-bottom: 8px;
	}
	
	.itemlist__info__title a,
    .itemlist__info__title--notice a,
	.itemlist__info__title--hcard a {
		margin-top: 0;
		font-size: 28px;
	}
    
    .itemlist__info__name {
        margin-top: 0px;
        font-size: 32px;
    }
    
    .itemlist__info__position {
        font-size: 26px;
    }
	
	.itemlist__info__date time,
	.itemlist__info__date--withfb time {
		font-size: 14px;
	}
	
	.itemlist__info__preface--hcard {
		padding-top: 0;
		margin-top: 0;
		border-top: none;
	}
}

@media (min-width: 768px) {
	.itemlist__img {
		margin-bottom: 0;
	}
	
	.itemlist__img--hcard {
		margin-bottom: 8px;
	}
	
	.itemlist__info__title--hcard {
		margin-bottom: 10px;
	}
	
	.itemlist__info__title a,
    .itemlist__info__title--notice a,
	.itemlist__info__title--hcard a {
		margin-top: -10px;
		font-size: 30px;
	}
    
    .itemlist__info__name {
        margin-top: -10px;
        font-size: 36px;
    }
    
    .itemlist__info__position {
        font-size: 28px;
    }
	
	.itemlist__info__date time,
	.itemlist__info__date--withfb time {
		font-size: 16px;
	}
	
	.itemlist__info__preface--hcard {
		padding-top: 10px;
		margin-top: 10px;
		border-top: solid 1px #CCC;
	}
}

@media (min-width: 992px) {
	.itemlist__img {
		margin-bottom: 0;
	}
	
	.itemlist__img--hcard {
		margin-bottom: 8px;
	}
	
	.itemlist__info__title--hcard {
		margin-bottom: 10px;
	}
	
	.itemlist__info__title a,
    .itemlist__info__title--notice a,
	.itemlist__info__title--hcard a {
		margin-top: -10px;
		font-size: 30px;
	}
    
    .itemlist__info__name {
        margin-top: -10px;
        font-size: 36px;
    }
    
    .itemlist__info__position {
        font-size: 28px;
    }
	
	.itemlist__info__date time,
	.itemlist__info__date--withfb time {
		font-size: 16px;
	}
	
	.itemlist__info__preface--hcard {
		padding-top: 10px;
		margin-top: 10px;
		border-top: solid 1px #CCC;
	}
}

@media (min-width: 1200px) {
	.itemlist__img {
		margin-bottom: 0;
	}
	
	.itemlist__img--hcard {
		margin-bottom: 8px;
	}
	
	.itemlist__info__title--hcard {
		margin-bottom: 10px;
	}
	
	.itemlist__info__title a,
    .itemlist__info__title--notice a,
	.itemlist__info__title--hcard a {
		margin-top: -10px;
		font-size: 30px;
	}
    
    .itemlist__info__name {
        margin-top: -10px;
        font-size: 36px;
    }
    
    .itemlist__info__position {
        font-size: 28px;
    }
	
	.itemlist__info__date time,
	.itemlist__info__date--withfb time {
		font-size: 16px;
	}
	
	.itemlist__info__preface--hcard {
		padding-top: 10px;
		margin-top: 10px;
		border-top: solid 1px #CCC;
	}
}



/* Site Pager
======================================================================================

	.sitepager {}
	.sitepager ul {}
	.sitepager ul li {}	
	.sitepager__pagenumber {}
	
======================================================================================  */

.sitepager {
	text-align: center;
}

.sitepager ul,
.sitepager ul li {
	display: inline-block;
}

.sitepager ul li {
	margin-bottom: 10px;
	margin-right: 5px;
}	

/* Page Number
--------------------------------------------------------------------------------------------------------------------- */
.sitepager__pagenumber {
	display: block;
	min-width: 34px;
	border: solid 1px #666;
	color: #666;
	text-align: center;
	line-height: 32px;
	transition: all 0.3s ease 0s;
}

.sitepager__pagenumber:hover,
.sitepager__pagenumber.select {
	background-color: #666;
	color: #FFF;
}

.sitepager__pagenumber:active {
	border-color: #FFF;
	background-color: #FFF;
	color: #FFF;
}



/* Select Page
======================================================================================

    .select-page {}
    .select-page ul {}
    .select-page ul li {}
    .select-page__control {}
    .select-page__selectbox {}
    .select-page__totalpage {}
    
======================================================================================  */
.select-page {
    padding-bottom: 0px;
    text-align: center;
}

.select-page > ul {
    display: inline-block;
}

.select-page ul:after {
    content: '';
    display: block;
    clear: both;
}

.select-page > ul > li {
    float: left;
}

.select-page__control {}

.select-page__control a {
    display: block;
    padding: 3px 0px;
    font-family: ThaiSansNeue-Regular;
    font-size: 24px;
    color: #666666;
    line-height: 1;
    transition: all 0.3s ease 0s;
}

.select-page__control a:hover {
    color: #f55889;
}

.select-page__control a:active {
    color: #ffffff;
}

.select-page__selectbox {
    margin-left: 15px;
}

.select-page__totalpage a {
	display: block;
    padding: 7px 15px;
    margin-right: 15px;
    background-color: #666666;
    border-radius: 0px 2px 2px 0px;
    color: #ffffff;
}

.select-page__totalpage a:hover ,
.select-page__totalpage a:active {
	color: #f55889;
	text-decoration: underline; 
}

@media (max-width: 767px) {
    .select-page {
        padding-bottom: 20px;
    }
    
    .select-page__totalpage a {
        margin-right: 0px;
    }
}

@media (min-width: 768px) {
    .select-page {
        padding-bottom: 20px;
    }
    
    .select-page__totalpage a {
        margin-right: 15px;
    }
}

@media (min-width: 992px) {
    .select-page {
        padding-bottom: 0px;
    }
    
    .select-page__totalpage a {
        margin-right: 15px;
    }
}

@media (min-width: 1200px) {
    .select-page {
        padding-bottom: 0px;
    }
    
    .select-page__totalpage a {
        margin-right: 15px;
    }
}



/* Bullet List
======================================================================================

	.bulletlist {}
	.bulletlist li {}
	.bulletlist__icon {}
	.bulletlist__text {}
	
======================================================================================  */

.bulletlist {}

.bulletlist li,
.bulletlist--submenu li {
	position: relative;
}

/* Normal */
.bulletlist li {
	padding-left: 25px;
	margin-bottom: 5px;
}

/* Submenu */
.bulletlist--submenu li {
	padding-left: 30px;
	margin-bottom: 10px;
}

/* Icon
--------------------------------------------------------------------------------------------------------------------- */
.bulletlist__icon,
.bulletlist__icon--submenu {
	position: absolute;
	z-index: 1;
	left: 0;
}

/* Normal 
------------------------------------------------------------ */
.bulletlist__icon {
	top: 6px;
	font-size: 12px;
}

/* Submenu 
------------------------------------------------------------ */
.bulletlist__icon--submenu {
	top: 12px;
	font-size: 16px;
}

/* Text
--------------------------------------------------------------------------------------------------------------------- */
.bulletlist__text,
.bulletlist__text--submenu {
	display: block;
	transition: all 0.3s ease 0s;
}

/* Normal 
------------------------------------------------------------ */
.bulletlist__text {
    font-family: ThaiSansNeue-Regular;
	font-size: 24px;
	color: #666;
	line-height: 1;
}

.bulletlist__text:hover {
	color: #333;	
}

/* Submenu 
------------------------------------------------------------ */
.bulletlist__text--submenu {
	font-size: 32px;
	color: #000;
	line-height: 1.3;
}

.bulletlist__text--submenu:hover {
	color: #F00;	
}

/* ACTIVE 
------------------------------------------------------------ */
.bulletlist__text:active,
.bulletlist__text--submenu:active {
	color: #FFF;
}





/* Fixed Side Column Menu
======================================================================================

	.fixed-sidecol {}
	.fixed-sidecol__leftblock {}	
	.fixed-sidecol__leftblock__colspace {}
	.fixed-sidecol__rightblock {}
	.fixed-sidecol__rightblock__fixedmenu {}
	.fixed-sidecol-footer {}
	
======================================================================================  */

.fixed-sidecol {
	overflow: hidden;
}

/* Left Block
--------------------------------------------------------------------------------------------------------------------- */
.fixed-sidecol__leftblock {
	float: left; 
	width: 100%;
	margin-right: -330px; 
}

/* Column Space
------------------------------------------------------------ */
.fixed-sidecol__leftblock__colspace {
	margin-right: 330px;
}


/* Right Block
--------------------------------------------------------------------------------------------------------------------- */
.fixed-sidecol__rightblock {
	float: right;
	width: 300px;
}

/* Menu
------------------------------------------------------------ */
.fixed-sidecol__rightblock__fixedmenu {}

.fixed-sidecol__rightblock__fixedmenu.active {
	position: fixed;
	z-index: 1;
	top: 0px;
	width: inherit;
}

/* Footer
--------------------------------------------------------------------------------------------------------------------- */
.fixed-sidecol-footer {
	position: relative;
	z-index: 2;
}

@media (max-width: 767px) {
	.fixed-sidecol__leftblock {
		float: none; 
		width: 100%;
		margin-right: 0px; 
	}
	
	.fixed-sidecol__leftblock__colspace {
		margin-right: 0px;
	}
	
	.fixed-sidecol__rightblock {
		float: none;
		width: auto;
	}
	
	.fixed-sidecol__rightblock__fixedmenu.active {
		position: static;
	}
}

@media (min-width: 768px) {
	.fixed-sidecol__leftblock {
		float: none; 
		width: 100%;
		margin-right: 0px; 
	}
	
	.fixed-sidecol__leftblock__colspace {
		margin-right: 0px;
	}
	
	.fixed-sidecol__rightblock {
		float: none;
		width: auto;
	}
	
	.fixed-sidecol__rightblock__fixedmenu.active {
		position: static;
	}
}

@media (min-width: 992px) {
	.fixed-sidecol__leftblock {
		float: left; 
		width: 100%;
		margin-right: -330px; 
	}
	
	.fixed-sidecol__leftblock__colspace {
		margin-right: 330px;
	}
	
	.fixed-sidecol__rightblock {
		float: right;
		width: 300px;
	}
	
	.fixed-sidecol__rightblock__fixedmenu.active {
		position: fixed;
	}
}

@media (min-width: 1200px) {
	.fixed-sidecol__leftblock {
		float: left; 
		width: 100%;
		margin-right: -330px; 
	}
	
	.fixed-sidecol__leftblock__colspace {
		margin-right: 330px;
	}
	
	.fixed-sidecol__rightblock {
		float: right;
		width: 300px;
	}
	
	.fixed-sidecol__rightblock__fixedmenu.active {
		position: fixed;
	}
}





/* XXXXX
======================================================================================  */
/* XXXXX
--------------------------------------------------------------------------------------------------------------------- */
/* XXXXX
------------------------------------------------------------ */