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

#hongkiat-form .txtinput { 
display: block;
font-family:Lucida Sans Unicode, Lucida Grande, sans-serif;
border-style: solid;
border-width: 1px;
border-color: #c1c1c1;
margin-bottom: 10px;
font-size: 1.0em;
padding: 5px 10px;
padding-left: 10px;
width: 93%;
color: #464848;
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#name {
background: #fff url('images/user.html') 5px 4px no-repeat;
}
#hongkiat-form input#email {
background: #fff url('images/email.html') 5px 4px no-repeat;
}
#hongkiat-form input#website {
background: #fff url('images/website.html') 5px 4px no-repeat;
}
#hongkiat-form input#telephone {
background: #fff url('images/phone.html') 5px 4px no-repeat;
}

#hongkiat-form textarea {
display: block;
font-family:Verdana, Geneva, sans-serif;
border-style: solid;
border-width: 1px;
border-color: #c1c1c1;
margin-bottom: 10px;
font-size: 1.0em;
padding: 5px 10px;
padding-left: 10px;
width: 93%;
height: 40px;
color: #464848;
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 select {
	display: block;
font-family:Lucida Sans Unicode, Lucida Grande, sans-serif;
border-style: solid;
border-width: 1px;
border-color: #c1c1c1;
margin-bottom: 10px;
font-size: 1.0em;
padding: 5px 10px;
padding-left: 10px;
width: 99%;
color: #999;
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 select: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.html') 5px 4px no-repeat;
}

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

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

#wrapping { 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; width:70% ; padding-bottom: 4px;  }
#buttons #resetbtn {
display: block;
float: right;
color: #fff;
margin-right: 10px;
height: 2.5em;
padding: 0 1.5em;
outline: 0;
font-weight: bold;
font-size: 1em;
white-space: nowrap;
word-wrap: normal;
vertical-align: middle;
cursor: pointer;
background-color: #f58634;
border:none

}

#buttons #resetbtn:hover {	
color: #fff;
	background:#f9a568;
	text-decoration:none;
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	-ms-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}

#buttons #submitbtn {
display: block;
float: right;
color: #fff;
margin-right: 20px;
height: 2.5em;
padding: 0 1.5em;
outline: 0;
font-weight: bold;
font-size: 1em;
white-space: nowrap;
word-wrap: normal;
vertical-align: middle;
cursor: pointer;
background-color: #f58634;
border:none
}
#buttons #submitbtn:hover, #buttons #submitbtn:active {
color: #fff;
	background:#f9a568;
	text-decoration:none;
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	-ms-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}

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


/** all devices and responsive browser windows **/
@media screen and (max-width: 800px) {

	#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: 93%;
	}
	#prioritycase {
		float: left;
		display: block;
	}
	#recipientcase {
		float: left;
		display: block;
		margin-right: 55px;
	}
}


/* smaller screen dropoff *******/
@media only screen and (max-width: 550px) {
 	#hongkiat-form .txtinput, #hongkiat-form textarea{
		width: 80%;
	}
	
	#hongkiat-form select {
		width: 86%;
	}
}

/* iPhone Landscape ********/
@media only screen and (max-width: 480px) {

	select.selmenu {
		width: 190px;
	}
	#buttons { width:90%   }
}

/* iPhone portrait *******/
@media only screen and (max-width: 320px) {

 	#hongkiat-form .txtinput, #hongkiat-form textarea {
		width: 70%;
	}
	#hongkiat-form select {
		width: 79%;
	}
	#hongkiat-form #aligned {
		overflow: hidden;
	}
	select.selmenu {
		width: 160px;
	}
	#recipientcase {
		margin-right: 30px;
	}
}