@charset "UTF-8";

/********* btn_wrap *****************/
div.btn_wrap { text-align:center; margin-top:15px; }
div.btn_wrap.float .btn { float:left }
div.btn_wrap .half { min-width:auto } 

/********* default **************/
button.btn { 
	border:1px solid #666;
	background-color:#666; 
	color:#fff; 
	min-width:160px;	
	padding:10px 20px;
	cursor:pointer;
	margin:0px;
	border-radius: 0;
	vertical-align:baseline;
}
.btn:hover {
	-webkit-transition: all .5s; -moz-transition: all .5s; -ms-transition: all .5s; transition: all .5s;
}

button:disabled { filter:filter: gray; -webkit-filter: grayscale(1); cursor:not-allowed }


/********* color **************/

/* btn.gray */
.btn.gray       { border:1px solid #666666; background-color:#666666; color:#fff; }
.btn.gray:hover { border:1px solid #ff9000; background-color:#ff9000; color:#fff; }

/* btn.silver */
.btn.silver       { border:1px solid #999999; background-color:#999999; color:#fff; }
.btn.silver:hover { border:1px solid #67af0a; background-color:#67af0a; color:#fff; }

/* btn.white  */
.btn.white       { border:1px solid #dddddd; background-color:#ffffff; color:#000; }
.btn.white:hover { border:1px solid #ff9000; background-color:#ff9000; color:#fff; }
/* .btn.white:hover i { filter:brightness(500%); -webkit-transition: all .5s; -moz-transition: all .5s; -ms-transition: all .5s; transition: all .5s; } */

/* btn.green  */
.btn.green       { border:1px solid #67af0a; background-color:#67af0a; color:#fff; }
.btn.green:hover { border:1px solid #ff9000; background-color:#ff9000; color:#fff; }

/* btn.orange  */
.btn.orange      { border:1px solid #ff9000; background-color:#ff9000; color:#ffffff; }
.btn.orange:hover{ border:1px solid #ff0680; background-color:#ff0680; color:#ffffff; }

/* btn.orange_border  */
.btn.orange_border      { border:1px solid #ff9000; background-color:#fff; color:#ff9000; }
.btn.orange_border:hover{ border:1px solid #ff9000; background-color:#ff9000; color:#fff; }


/*************** size *********************/

.btn.big    { font-size:20px; padding:20px 20px; }
.btn.medium { padding:7px 10px; min-width:120px; }
.btn.small  { font-size:14px; padding:5px 10px; min-width:100px; }
.btn.tiny   { padding:3px; font-size:12px; min-width:60px; }

/**************** width *******************/

.btn.auto   { width:auto;  min-width:auto; }
.btn.full   { width:100%;  }
.btn.w95    { width:95%;  }
.btn.w90    { width:90%;  }
.btn.half   { width:50%;   }
.btn.triple { width:33.3%; }
.btn.qurter { width:25%;   }

/**************** margin *******************/
.btn.m1 { margin:1px; }
.btn.m1.half { width:calc(50% - 2px); }
.btn.m1.triple { width:calc(33.3% - 2px);; }
.btn.m1.qurter { width:calc(25% - 2px); }

.btn.m2        { margin:2px; }
.btn.m2.half   { width:calc(50% - 4px); }
.btn.m2.triple { width:calc(33.3% - 4px); }
.btn.m2.qurter { width:calc(25% - 4px); }


.btn.link{ padding-left:50px; color:#000; background:url('/img/icon/icon_link.png') no-repeat 35px 19px; border:1px solid #dddddd; }
.btn.link:hover,
.btn.linked{ padding-left:50px; color:#ff9000;  background:url('/img/icon/icon_linked.png') no-repeat 35px 19px; border:1px solid #dddddd; }

.btn.like  { padding-left:40px; color:#000;  background:url('/img/icon/icon_like.png') no-repeat 35px 15px; border:1px solid #dddddd; }
.btn.like:hover,
.btn.liked  { padding-left:40px; color:#ff9000;  background:url('/img/icon/icon_liked.png') no-repeat 35px 15px; border:1px solid #dddddd; }
.btn.like span  { margin-left:10px; color:#ff9000; }
.btn.liked span { margin-left:10px; color:red; }

.btn.share  { padding-left:50px; color:#000;  background:url('/img/icon/icon_share.png') no-repeat 40px 15px; border:1px solid #dddddd;  }
.btn.share:hover,
.btn.shared  { padding-left:50px; color:#ff9000;  background:url('/img/icon/icon_share_on.png') no-repeat 40px 15px; border:1px solid #dddddd; }

.btn.comment  { padding-left:40px; color:#000;  background:url('/img/icon/icon_comment.png') no-repeat 40px 15px; border:1px solid #dddddd; }
.btn.comment:hover { padding-left:40px; color:#ff9000;  background:url('/img/icon/icon_comment_on.png') no-repeat 40px 15px; border:1px solid #dddddd; }

.btn.link0 { padding-left:50px; color:#000; background:url('/img/icon/icon_link.png') no-repeat 35px 19px; }
.btn.link1 { padding-left:50px; color:#ff9000;  background:url('/img/icon/icon_linked.png') no-repeat 35px 19px; }


/* bg color 
.btn.white {
	background-color:white; border:1px solid #333; color:#333;
}

.btn.red {
	background-color:red;
}
.btn.orange {
	background-color:orange;
}
.btn.skyblue {
	background-color:skyblue;
}
*/

/* border color - animation

.btn.b_darkblue {
	background-color:white; border:1px solid darkblue; color:darkblue;
}
.btn.b_darkblue:hover {
	background-color:darkblue; color:#fff;
	-webkit-transition: all .5s; -moz-transition: all .5s; -ms-transition: all .5s; transition: all .5s;
}
.btn.b_red {
	background-color:white; border:1px solid red; color:red;
}
.btn.b_red:hover {
	background-color:red; color:#fff;
	-webkit-transition: all .5s; -moz-transition: all .5s; -ms-transition: all .5s; transition: all .5s;
}
.btn.b_orange {
	background-color:white; border:1px solid orange; color:orange;
}
.btn.b_orange:hover {
	background-color:orange; color:#fff;
	-webkit-transition: all .5s; -moz-transition: all .5s; -ms-transition: all .5s; transition: all .5s;
}
.btn.b_skyblue {
	background-color:white; border:1px solid skyblue; color:skyblue;
}
.btn.b_skyblue:hover {
	background-color:skyblue; color:#fff;
	-webkit-transition: all .5s; -moz-transition: all .5s; -ms-transition: all .5s; transition: all .5s;
}
 */