body {background: #555E6D; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; height: 100%;}
a {color: #669; font-weight:bold;}
a:hover {text-decoration: underline;}
h1, h2, h3, h4, h5, h6 {font-family: Verdana, Arial, Helvetica, sans-serif;}
ul {margin: 0px; padding: 0px;}
ul li {margin: 0px; padding: 0px; list-style: none;}

#container {width: 100%;}
#hongkiat-form #aligned {width: 100%; float: none; display: block;}
#hongkiat-form #aside {	width: 100%; display: block; float: none;}
#hongkiat-form .txtinput, #hongkiat-form textarea {width: 85%;}
#prioritycase {float: left; display: block;}
#recipientcase {float: left; display: block; margin-right: 55px;}

#container {display: block; max-width: 800px; margin: 0 auto; margin-top: 5px;  margin-bottom: 66px; padding: 20px 15px;  background: #fff;  border-radius: 6px;  -webkit-border-radius: 6px;  -moz-border-radius: 6px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;  box-sizing: border-box; }


/** the form elements **/
#hongkiat-form { box-sizing: border-box; }

#hongkiat-form .txtinput 
{ 
    display: block;
    font-family: "Helvetica Neue", Arial, sans-serif;
    border-style: solid;
    border-width: 1px;
    border-color: #dedede;
    margin-bottom: 20px;
    font-size: 1.55em;
    padding: 11px 25px;
    padding-left: 55px;
    width: 90%;
    color: #777;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset; 
    transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
    -webkit-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
    -moz-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
    -o-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
}

#hongkiat-form .txtinput:focus 
{ 
    color: #333;
    border-color: rgba(41, 92, 161, 0.4);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(41, 92, 161, 0.6);
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(41, 92, 161, 0.6);
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(41, 92, 161, 0.6);
    outline: 0 none; 
}

#hongkiat-form input#Message_1 { background: #fff url('/images/user.png') 5px 4px no-repeat;}
#hongkiat-form input#Message_2 {background: #fff url('/images/location.png') 5px 4px no-repeat;}
#hongkiat-form input#Message_3 {background: #fff url('/images/email.png') 5px 4px no-repeat;}
#hongkiat-form input#telephone {background: #fff url('/images/phone.png') 5px 4px no-repeat;}
#hongkiat-form input#website   {background: #fff url('/images/website.png') 5px 4px no-repeat; }
#hongkiat-form input#Message_4 { background: #fff url('/images/lock.png') 5px 4px no-repeat;}
#hongkiat-form textarea {
display: block;
font-family: "Helvetica Neue", Arial, sans-serif;
border-style: solid;
border-width: 1px;
border-color: #dedede;
margin-bottom: 15px;
font-size: 1.5em;
padding: 11px 25px;
padding-left: 55px;
width: 90%;
height: 180px;
color: #777;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset; 
transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
-webkit-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
-moz-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
-o-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
}
#hongkiat-form textarea:focus {
color: #333;
border-color: rgba(41, 92, 161, 0.4);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(40, 90, 160, 0.6);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(40, 90, 160, 0.6);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(40, 90, 160, 0.6);
outline: 0 none; 
}
#hongkiat-form textarea.txtblock {
background: #fff url('/images/speech.png') 5px 4px no-repeat;
}

#hongkiat-form #slider { width: 60%; }

#hongkiat-form #aligned {box-sizing: border-box; float: left; width: 450px; margin-right: 50px; }
#hongkiat-form #aside {	float: left;width: 250px; padding: 0; box-sizing: border-box;}

#wrapping { width: 100%; box-sizing: border-box; }

span.radiobadge { display: block; margin-bottom: 8px; }
span.radiobadge label { font-size: 1.2em; padding-bottom: 4px; }

select.selmenu {
font-size: 17px;
color: #676767;
padding: 9px !important;
border: 1px solid #aaa;
width: 200px;
}

/** custom buttons **/

#buttons { display: block; padding-top: 10px; }
#buttons #resetbtn {
display: block;
float: left;
color: #515151;
text-shadow: -1px 1px 0px #fff;
margin-right: 20px;
height: 3em;
padding: 0 1em;
outline: 0;
font-weight: bold;
font-size: 1.3em;
white-space: nowrap;
word-wrap: normal;
vertical-align: middle;
cursor: pointer;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
background-color: #fff;
background-image: -moz-linear-gradient(top,  rgb(255,255,255) 2%, rgb(240,240,240) 2%, rgb(222,222,222) 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(2%,rgb(255,255,255)), color-stop(2%,rgb(240,240,240)), color-stop(100%,rgb(222,222,222)));
background-image: -webkit-linear-gradient(top,  rgb(255,255,255) 2%,rgb(240,240,240) 2%,rgb(222,222,222) 100%);
background-image: -o-linear-gradient(top,  rgb(255,255,255) 2%,rgb(240,240,240) 2%,rgb(222,222,222) 100%);    background-image: -ms-linear-gradient(top,  rgb(255,255,255) 2%,rgb(240,240,240) 2%,rgb(222,222,222) 100%);
background-image: linear-gradient(top,  rgb(255,255,255) 2%,rgb(240,240,240) 2%,rgb(222,222,222) 100%); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#dedede',GradientType=0 );
border: 1px solid #969696;
box-shadow: 0 1px 2px rgba(144, 144, 144, 0.4);
-moz-box-shadow: 0 1px 2px rgba(144, 144, 144, 0.4);
-webkit-box-shadow: 0 1px 2px rgba(144, 144, 144, 0.4);
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
}

#buttons #resetbtn:hover {
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);	
color: #818181;
background-color: #fff;
background-image: -moz-linear-gradient(top,  rgb(255,255,255) 2%, rgb(244,244,244) 2%, rgb(229,229,229) 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(2%,rgb(255,255,255)), color-stop(2%,rgb(244,244,244)), color-stop(100%,rgb(229,229,229)));
background-image: -webkit-linear-gradient(top,  rgb(255,255,255) 2%,rgb(244,244,244) 2%,rgb(229,229,229) 100%);background-image: -o-linear-gradient(top,  rgb(255,255,255) 2%,rgb(244,244,244) 2%,rgb(229,229,229) 100%); background-image: -ms-linear-gradient(top,  rgb(255,255,255) 2%,rgb(244,244,244) 2%,rgb(229,229,229) 100%); background-image: linear-gradient(top,  rgb(255,255,255) 2%,rgb(244,244,244) 2%,rgb(229,229,229) 100%); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 );
border-color: #aeaeae;
box-shadow: inset 0 1px 0 rgba(256,256,256,0.4),0 1px 3px rgba(0,0,0,0.5);
}

#buttons #submitbtn {
display: block;
float: left;
height: 3em;
padding: 0 1em;
border: 1px solid;
outline: 0;
font-weight: bold;
font-size: 1.3em;
color:  #fff;
text-shadow: 0px 1px 0px #222;
white-space: nowrap;
word-wrap: normal;
vertical-align: middle;
cursor: pointer;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
border-color: #5e890a #5e890a #000;
-moz-box-shadow: inset 0 1px 0 rgba(256,256,256, .35);
-ms-box-shadow: inset 0 1px 0 rgba(256,256,256, .35);
-webkit-box-shadow: inset 0 1px 0 rgba(256,256,256, .35);
box-shadow: inset 0 1px 0 rgba(256,256,256, .35);
background-color: rgb(226,238,175);
background-image: -moz-linear-gradient(top, rgb(226,238,175) 3%, rgb(188,216,77) 3%, rgb(144,176,38) 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(3%,rgb(226,238,175)), color-stop(3%,rgb(188,216,77)), color-stop(100%,rgb(144,176,38))); 
background-image: -webkit-linear-gradient(top, rgb(226,238,175) 3%,rgb(188,216,77) 3%,rgb(144,176,38) 100%);
background-image: -o-linear-gradient(top, rgb(226,238,175) 3%,rgb(188,216,77) 3%,rgb(144,176,38) 100%);
background-image: -ms-linear-gradient(top, rgb(226,238,175) 3%,rgb(188,216,77) 3%,rgb(144,176,38) 100%);
background-image: linear-gradient(top, rgb(226,238,175) 3%,rgb(188,216,77) 3%,rgb(144,176,38) 100%); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2eeaf', endColorstr='#90b026',GradientType=0 );
}
#buttons #submitbtn:hover, #buttons #submitbtn:active {
border-color: #7c9826 #7c9826 #000;
color: #fff;
-moz-box-shadow: inset 0 1px 0 rgba(256,256,256,0.4),0 1px 3px rgba(0,0,0,0.5);
-ms-box-shadow: inset 0 1px 0 rgba(256,256,256,0.4),0 1px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: inset 0 1px 0 rgba(256,256,256,0.4),0 1px 3px rgba(0,0,0,0.5);
box-shadow: inset 0 1px 0 rgba(256,256,256,0.4),0 1px 3px rgba(0,0,0,0.5);
background: rgb(228,237,189);
background: -moz-linear-gradient(top, rgb(228,237,189) 2%, rgb(207,219,120) 3%, rgb(149,175,54) 100%); 
background: -webkit-gradient(linear, left top, left bottom, color-stop(2%,rgb(228,237,189)), color-stop(3%,rgb(207,219,120)), color-stop(100%,rgb(149,175,54))); 
background: -webkit-linear-gradient(top, rgb(228,237,189) 2%,rgb(207,219,120) 3%,rgb(149,175,54) 100%); 
background: -o-linear-gradient(top, rgb(228,237,189) 2%,rgb(207,219,120) 3%,rgb(149,175,54) 100%); background: -ms-linear-gradient(top, rgb(228,237,189) 2%,rgb(207,219,120) 3%,rgb(149,175,54) 100%); background: linear-gradient(top, rgb(228,237,189) 2%,rgb(207,219,120) 3%,rgb(149,175,54) 100%); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e4edbd', endColorstr='#95af36',GradientType=0 );
}

/** @group clearfix **/
.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clearfix { display: inline-block; }

/************************************************************************************
STRUCTURE
*************************************************************************************/
#pagewrap {width: 1024px;margin: 0px auto; background: #FFF;}
#home {width: 1024px; margin: 0px auto; background: #FFF;}
#header {background: #555E6D url(/images/header_BG_Prof.gif) 0px 0px repeat-x; margin: 0% 0%; width:100%;}
#header ul li, #footer ul li {display: inline;}
.topnav {height: 30px; clear: both;}
.topnav li {margin: 0 12px;}
.topnav li a {font-weight: bold; color: #FC0; text-decoration: none; display: block; float: left; height: 23px; padding: 7px 12px 0px 12px;}
.topnav li a:hover {color: #81ADD7;}
#home #content {width: 1024px;float: left;}
#content {width: 730px;float: left;}
#sidebar {width: 278px;float: right; height:100%;}
#footer {clear: both;}

/************************************************************************************
MEDIA QUERIES
*************************************************************************************/
/* for 980px or less
**************************************************************************************/
@media screen and (max-width: 980px) {

	#pagewrap {width: 94%;}
    #home {width: 94%;}
	#content {width: 65%; font-size: 14px;}
    #content p{font-size: 14px;}
    #content div{font-size: 14px;}
	#sidebar {width: 30%;}
    div#envelope{width: 100%; margin: 10px 30% 10px 11%;}
}

/* for 700px or less
**************************************************************************************/
@media screen and (max-width: 700px) {

    #pagewrap {width: 98%;}
    #home {width: 98%;}
	#content {width: auto;float: none; font-size: 14px}
    #content p{font-size: 14px;}
    #content div{font-size: 14px;}
	#sidebar {width: auto;float: none;}
    div#envelope{width: 80%; margin: 10px 30% 10px 11%;}
    #hongkiat-form .txtinput, #hongkiat-form textarea {width: 80%;}
}

/* for 480px or less
**************************************************************************************/
@media screen and (max-width: 480px) {

    #pagewrap {width: 98%;	}
    #home {width: 98%; }
	#content {width: auto; float:none; font-size: 14px;}
    #content p{font-size: 14px;}
    #content div{font-size: 14px;}
	#header{height: auto;}
	h1 {font-size: 24px;}
	#sidebar {width: auto;float: none;}

    div#logo {margin: 0px; padding: 0px; width: 300px; height: 78px; background: url(/images/logo.jpg) 0 0 no-repeat;}
    div#logo a {display: block; width: auto;}
    div#logo i {display: none;}
    div#logo a em {display: none;}
    div#envelope{width: 80%; margin: 10px 30% 10px 11%;}
    select.selmenu {width: 190px;}
    #hongkiat-form .txtinput, #hongkiat-form textarea {width: 44%;}
}

/* for 320px or less
**************************************************************************************/
@media screen and (max-width: 320px) {
    #pagewrap {width: 98%;	}
    #home {width: 98%; }
	#header{height: auto;}
	h1 {font-size: 24px;}
	#sidebar {width: auto;float: none;}

    div#logo {margin: 0px; padding: 0px; width:314px; height: 78px; background: url(/images/logo.jpg) 0 0 no-repeat;}
    div#logo a {display: block; width: auto;}
    div#logo i {display: none;}
    div#logo a em {display: none;}


    div#envelope{width: 80%; margin: 10px 30% 10px 11%;}
 	#hongkiat-form .txtinput, #hongkiat-form textarea {width: 70%;}
	#hongkiat-form #aligned {overflow: hidden;}
	select.selmenu {width: 160px;}
	#recipientcase {margin-right: 30px;}
    #hongkiat-form #aligned {box-sizing: border-box; float: left; width: 300px; margin-right: 50px; }
}


/* border & guideline (you can ignore these) */
#numbers {margin: 0 0 4px 14px; height: 15px;}
#numbers a {font-weight: bold; color: #FC0; text-decoration: none;}
#numbers li {color: #FC0; font-weight: bold; font-style: italic; margin-right: 20px;}
#numbers li strong {color: #FFF;}

div#logo {margin: 0px; padding: 0px; width:auto; height: 89px; background: url(/images/logo.jpg) 0 0 no-repeat;}
div#logo a {display: block; width: auto;}
div#logo i {display: none;}
div#logo a em {display: none;}


#content {background: #FFF; line-height: 150%; padding:8px;}
#content h1 {color: #009; margin: 0px; padding: 0px; font-size: 20px; line-height:30px;}
#content h2 {color: #FF7700; margin: 0px; padding: 0px; font-size: 18px; line-height:30px;}
#content h2 a{color: #FF7700; margin: 0px; padding: 0px; font-size: 18px;}
/*#content h3 {color: #916420; margin: 0px; padding: 0px; font-size: 16px;}*/
#content h4 {color: #009; margin: 0px; padding: 0px; font-size: 14px;}
#content p {margin: 6px 0px 12px 0px; padding: 0px; line-height:150%;}
#content a {color:#2B3E42; font-weight:bold; font-size:12px;}
#content ul {margin: 0px;padding: 0px;}
#content ul li {background: url(/images/bullet.gif) 0 6px no-repeat; margin-left: 10px; padding: 0 0 0 24px;}
#content breadcrumb {height:30px; padding-top:5px; line-height:30px;}
#searchbox{line-height:40px;}

.Categorybox { display:block;margin-top:20px; position:relative; clear:both; overflow:hidden}
.Leftcol { width:255px; padding-right:11px; margin-right:7px; background:url(/images/leftcolbg.jpg) no-repeat right top; float:left}
.In { display:block; border:#ccc solid 1px; padding:1px}
.Leftcol h2 { background: #697d9e url(/images/headbg.jpg) repeat; line-height:25px; font-size:12px; color:#fff; padding:0 10px}
.Leftcol li { list-style:none; background:url(/images/leftlistbg.jpg) no-repeat bottom left; padding:2px 10px 12px 10px; line-height:13px;font-size:11px}
#In li a { font-size:12px; color:#006699 !important;}
#In h3 {color: #990000; font-size: 16px;}
#In li a:hover { font-size:12px; color:#990000 !important}
.Midcol { margin-left:275px; position:relative}
.Box {/*background:url(/images/boxleft.png) no-repeat left bottom; */padding-top:10px;}
.Col {margin:0 15px 0 0; width:45%; min-width:250px; float:left}
.Boxin {background:url(/images/boxright.png) no-repeat right bottom; padding-bottom:14px}
.Boxin .In { padding:0 8px 8px 8px}
.Boxin h3 { color:#990000; font-size:13px; margin-top:-10px}
.Boxin h3 span { padding:0 8px; background:#fff}
.Boxin h3 span a{text-decoration:none;color:#990000}
.Boxin ul { margin-top:5px}
.Boxin li { list-style:none; padding-left:15px; background:url(/images/bullet.jpg) no-repeat 2px 4px; margin-bottom:3px; line-height:20px;}

#box {background: #f7f2da url(/images/brown_bg.gif) top right repeat-y;margin: 8px;}
#box .bl {background: url(/images/BL.gif) 0 100% no-repeat;}
#box .br {background: url(/images/BR.gif) 100% 100% no-repeat;}
#box .tl {background: url(/images/TL.gif) 0 0 no-repeat;}
#box .tr {background: url(/images/TR.gif) 100% 0 no-repeat; padding: 10px;}
#box ul {margin: 0 0 16px 0;}
#box ul li {font-size: 16px; font-weight: bold; color: #916420;	background: none; padding: 0px; margin: 0px;}
#box ul li.first span {border-bottom: 1px dotted #916420; width: 100%; display: block;}
#box ul li a{color: #aa7525; text-decoration: none; font-weight: normal; font-size: 12px;}
#box ul li a:hover {text-decoration: underline; }
#box ul li ul li {background: url(/images/bllt-brwn.gif) 0 6px no-repeat; padding: 0 0 0 14px;}

.hrule {height: 2px; width: auto; background: url(/images/hrule.gif) 0 0 repeat-x; margin: 0px; line-height: 2px;}
#footer {min-height: 60px; padding: 20px; background: #83afd8 left bottom repeat-x; clear: both; position: relative; color: #FFF; margin: 0px;}
#footer p{font-size:10px; color:#FFFFFF;line-height:20px;}
#footer ul {margin: 0 0 8px 0;}
#footer ul li {margin: 0 16px 0 0;}
#footer ul.nav li a {font-weight: bold;}
#footer a {color: #FFF;}
#footer a:hover {color: #FFCC00;}
#footer-badge {width: 163px; height: 61px; background:0px 0px no-repeat; z-index: 200; position: absolute; bottom: 0px; right: 0px;}


#sidebar {background: #FFF;}
#header, #content, #sidebar {/*margin-bottom: 5px;*/}
#pagewrap, #header, #content, #sidebar, #footer {/*border: solid 1px #ccc;*/}

.message_bar{background: #000 url(/images/message_title_bg.gif) 0px 28px repeat; color:#FFBC27; font-weight:bold; height:28px;}
table.fency-stripe {border-collapse: collapse; border: 1px solid #DBE5F1;}
table.fency-stripe tr{border:solid 1px #4f81bd;}
table.fency-stripe tr th{text-align:left; color:White; background-color:#4f81bd;}
table.fency-stripe tr.odd {background: none;}
table.fency-stripe tr.even{background: #DBE5F1; border:solid 1px 95B3D7;}

table.stripe tr.odd {background: none;}
table.stripe tr.even {background: #EBEBEB;} /*f4f4f4*/

/* Makes responsive fields. Sets size and field alignment.*/
input[type=text]{margin-top: 5px; padding: 7px; border:1px solid #81ADD7;}
input[type=submit]{padding: 6px; border:1px solid #81ADD7; background-color: #81ADD7; color: aliceblue; font-size:15px; cursor:pointer;}
#submit:hover{background-color: black;}
textarea{padding: 6px;margin-top: 5px;border:1px solid #81ADD7;resize:none;}
input[type=text]:focus,textarea:focus {border-color: #81ADD7;}

/*For responsive Video*/
.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}