/***************
FORM
***************/
.frmtitle{
	padding			:10px;
	border			:1px solid #CCC;
	border-bottom	:0px;
	border-radius	:5px 5px 0px 0px;
	background		:#F5F5F5;
	text-align		:left;
	color			:#000;
	font-size		:14px;
	width			:80%;
	height 			:40px;
	box-shadow		:2px 2px 2px rgba(0,0,0,0.8);}
.frmbody{
	padding			:20px 30px 20px 30px;
	border			:1px solid #CCC;
	border-radius	:0px 0px 0px 0px;
	background		:#FFF;
	width			:80%;
	box-shadow		:2px 2px 2px rgba(0,0,0,0.8);}
.frmfooter{
	padding			:10px 20px 0px 20px;
	border-left		:1px solid #CCC;
	border-right	:1px solid #CCC;
	border-bottom	:1px solid #CCC;
	border-radius	:0px 0px 5px 5px;
	background		:#FFF;
	width			:80%;
	box-shadow		:2px 2px 2px rgba(0,0,0,0.8);}
	
.frmbody2{
	padding			:20px;
	margin-top		:10px;
	border			:1px solid #CCC;
	border-radius	:5px 5px 5px 5px;
	background		:#FFF;
	width			:80%;
	box-shadow		:2px 2px 2px rgba(0,0,0,0.8);}
	
.frmtitle3{
	padding			:10px;
	margin-top		:10px;
	border			:1px solid #CCC;
	border-bottom	:0px;
	border-radius	:5px 5px 0px 0px;
	background		:#F5F5F5;
	text-align		:left;
	color			:#000;
	font-size		:14px;
	width			:80%;
	box-shadow		:2px 2px 2px rgba(0,0,0,0.8);}
.frmbody3{
	padding			:10px 10px 5px 10px;
	border			:1px solid #CCC;
	border-radius	:0px 0px 5px 5px;
	background		:#FFF;
	width			:80%;
	box-shadow		:2px 2px 2px rgba(0,0,0,0.8);}

/* Clear floats after the columns */		
.row:after{
	content			:"";
    display			:table;
    clear			:both;
	padding			:5px 0px 0px 0px;}

.col-100bebas {
    float			:left;
    width			:100px;
    margin			:6px 3% 0px 0px;
	text-align		:left;}
.col-bebas {
    float			:left;
    margin			:6px 3% 0px 0px;
	text-align		:left;}
.col-button {
    margin			:6px;
	text-align		:center;}
/* -------- */

/* ------------------------------ */
.col-100 {
    float			:left;
    width			:100%;
    margin			:0px;}
 .col-90 {
    float			:left;
    width			:90%;
    margin			:0px;}
.col-10 {
    float			:left;
    width			:10%;
    border:1px;
    margin			:0px;}
	
/* ------------------------------ */
.col-160L {
    float			:left;
    width			:160px;
    margin			:6px 12px 0px 0px;
	text-align		:left;}
.col-775T {
    float			:left;
    width			:800px;
    margin			:0px;
	text-align		:left;}
/* ------------------------------ */

.col-150L {
    float			:left;
    width			:120px;
    margin			:6px 12px 0px 0px;
	text-align		:left;}
.col-850L {
    float			:left;
    width			:838px;
    margin			:6px 12px 0px 0px;
	text-align		:left;}
/* ------------------------------ */
.col-100L {
    float			:left;
    width			:100%;
    margin			:6px 12px 0px 0px;
	text-align		:left;}
.col-550L {
    float			:left;
    width			:550px;
    margin			:6px 12px 0px 0px;
	text-align		:left;}
/* ------------------------------ */

/***************
TEKS FORM
***************/
input[type=tel], 
input[type=url],
input[type=date]{
	border-radius	:3px;
    padding			:3px;
	font-size		:14px;
	height			:30px;
	padding			:5px;}
/* ---------- */	
input[type=text]{
    border			:1px solid #999999;
    border-radius	:5px;
    padding			:3px;
	font-size		:14px;
	width			:180px;
	height          :30px;}
/* ---------- */
input[type=text2],
input[type=email],
input[type=password]{
    border-radius	:3px;
    padding			:3px;
	font-size		:14px;
	width			:100%;
	padding			:3px 5px;
	height          :30px;}

input[type=text3]{
    border-radius	:3px;
    padding			:3px;
	font-size		:14px;
	width			:30px;
	padding			:3px 5px;
	height          :30px;
	text-align		:center;}
	
input[type=text3read]{
    border-radius	:3px;
    padding			:3px;
	font-size		:14px;
	width			:100px;
	padding			:3px 5px;
	height          :30px;
	color			:#990000;
	text-align		:center;
	background-color:#EFEFEF;}
	
/* SELECT---------- */	
select{	
	color			:#226180;
	font-size		:14px;
	font-style		:normal;	
	border-radius	:3px;
	height          :30px;
	padding         :3px;}
select option{
	color			:#FFFFFF;
	background-color:#226180;
	height			:24px;
 	font-size		:14px;
	border-radius	:3px;}
	
/* TEXT AREA---------- */	
textarea{
	resize		:none;
	width		:100%;
	height		:50px;
	font-family	:sans-serif;
	font-size	:12px;
	color		:#3C5A98;
	border		:1px solid #999999;
	padding			:5px;
	margin-bottom	:5px;}
	
/* RADIO---------- */
.radio {
	margin: 5px;}
.radio input[type="radio"] {
	position: absolute;
	opacity: 0;}
.radio input[type="radio"] + .radio-label:before {
	content: '';
	background: #f4f4f4;
	border-radius: 100%;
	border: 1px solid #b4b4b4;
	display: inline-block;
	width: 15px;
	height: 15px;
	position: relative;
	top: -0.2em;
	margin-right: 1em;
	vertical-align: top;
	cursor: pointer;
	text-align: center;
	-webkit-transition: all 250ms ease;
	transition: all 250ms ease;}
.radio input[type="radio"]:checked + .radio-label:before {
	background-color: #3197EE;
	box-shadow: inset 0 0 0 4px #f4f4f4;}
.radio input[type="radio"]:focus + .radio-label:before {
	outline: none;
	border-color: #3197EE;}
.radio input[type="radio"]:disabled + .radio-label:before {
	box-shadow: inset 0 0 0 4px #f4f4f4;
	border-color: #b4b4b4;
	background: #b4b4b4;}
.radio input[type="radio"] + .radio-label:empty:before {
	margin-right: 0;}

/***************
ANIMASI TEKS
***************/	
.form-control{
	display				:block;
	font-size			:14px;
	line-height			:1.42857143;
	color				:#555;
	background-color	:#fff;
	background-image	:none;
	border				:1px solid #ccc;
	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,-webkit-box-shadow ease-in-out .15s;
	-o-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}			
.form-control:focus{
	border-color		:#66afe9;
	outline				:0;
	-webkit-box-shadow	:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)}			
.form-control::-moz-placeholder{
	color				:#999;opacity:1}
.form-control:-ms-input-placeholder{
	color				:#999}
.form-control::-webkit-input-placeholder{
	color				:#999}
.form-control::-ms-expand{
	background-color	:transparent;border:0}
.form-control[disabled],.form-control[readonly],fieldset[disabled] .form-control{
	background-color	:#eee;
	opacity				:1}
.form-control[disabled],fieldset[disabled] .form-control{
	cursor				:not-allowed}
textarea.form-control{
	height				:auto}
input[type=search]{
	-webkit-appearance	:none}
	
/************************************************************************************
UKURAN MEDIA
*************************************************************************************/	
/* untuk ukuran layar 768px kebawah */
@media screen and (max-width: 1100px){	
	.col-220L,.col-775T {width:100%;}
	.col-150L {
   		width			:28%;
    	margin			:6px 3% 0px 0px;}
	.col-850L {
    	width			:60%;
    	margin			:6px 3% 0px 0px;}
}

/* untuk ukuran layar 768px kebawah */
@media screen and (max-width: 768px){
	.frmtitle,
	.frmbody,
	.frmbody3,
	.frmfooter{
		width			:100%;
		border-radius	:0px;}
	.frmbody2	{
		width			:100%;
		margin-top		:5px;
		padding			:10px;
		border-radius	:0px;}
	.frmtitle3{
		width			:100%;
		margin-top		:5px;
		border-radius	:0px;}
	
	.col-35,.col-65 {
    	width			:100%;}

/* untuk ukuran layar 768px kebawah */
@media screen and (max-width: 550px){
	

}