.button {
    -moz-background-clip: padding;
    -moz-border-radius: 0.2em 0.2em 0.2em 0.2em;
    background-color: #ECECEC;
    background-image: -moz-linear-gradient(#F4F4F4, #ECECEC);
    border: 1px solid #D4D4D4;
    color: #333333;
    cursor: pointer;
    display: inline-block;
    font: 11px sans-serif;
    margin: 0;
    outline: medium none;
    overflow: visible;
    padding: 0.3em 0.5em;
    position: relative;
    text-decoration: none;
    text-shadow: 1px 1px 0 #FFFFFF;
    white-space: nowrap;
}
.button:hover, .button:focus, .button:active, .button.active {
    background-color: #3C8DDE;
    background-image: -moz-linear-gradient(#599BDC, #3072B3);
    border-color: #3072B3 #3072B3 #2A65A0;
    color: #FFFFFF;
    text-decoration: none;
    text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);
}
.button:active, .button.active {
    background-color: #3072B3;
    background-image: -moz-linear-gradient(#3072B3, #599BDC);
    border-color: #2A65A0 #2A65A0 #3884CF;
}
.button::-moz-focus-inner {
    border: 0 none;
    padding: 0;
}
.button.icon:before {
    background: url("../img/gh-icons.png") no-repeat scroll 0 99px transparent;
    content: "";
    float: left;
    height: 12px;
    margin: 0 0.75em 0 -0.25em;
    position: relative;
    top: 1px;
    width: 12px;
}
.button.arrowup.icon:before {
    background-position: 0 0;
}
.button.arrowup.icon:hover:before, .button.arrowup.icon:focus:before, .button.arrowup.icon:active:before {
    background-position: -12px 0;
}
.button.arrowdown.icon:before {
    background-position: 0 -12px;
}
.button.arrowdown.icon:hover:before, .button.arrowdown.icon:focus:before, .button.arrowdown.icon:active:before {
    background-position: -12px -12px;
}
.button.arrowleft.icon:before {
    background-position: 0 -24px;
}
.button.arrowleft.icon:hover:before, .button.arrowleft.icon:focus:before, .button.arrowleft.icon:active:before {
    background-position: -12px -24px;
}
.button.arrowright.icon:before {
    background-position: 0 -36px;
    float: right;
    margin: 0 -0.25em 0 0.5em;
}
.button.arrowright.icon:hover:before, .button.arrowright.icon:focus:before, .button.arrowright.icon:active:before {
    background-position: -12px -36px;
}
.button.approve.icon:before {
    background-position: 0 -48px;
}
.button.approve.icon:hover:before, .button.approve.icon:focus:before, .button.approve.icon:active:before {
    background-position: -12px -48px;
}
.button.add.icon:before {
    background-position: 0 -288px;
}
.button.add.icon:hover:before, .button.add.icon:focus:before, .button.add.icon:active:before {
    background-position: -12px -288px;
}
.button.remove.icon:before {
    background-position: 0 -60px;
}
.button.remove.icon:hover:before, .button.remove.icon:focus:before, .button.remove.icon:active:before {
    background-position: -12px -60px;
}
.button.log.icon:before {
    background-position: 0 -72px;
}
.button.log.icon:hover:before, .button.log.icon:focus:before, .button.log.icon:active:before {
    background-position: -12px -72px;
}
.button.calendar.icon:before {
    background-position: 0 -84px;
}
.button.calendar.icon:hover:before, .button.calendar.icon:focus:before, .button.calendar.icon:active:before {
    background-position: -12px -84px;
}
.button.chat.icon:before {
    background-position: 0 -96px;
}
.button.chat.icon:hover:before, .button.chat.icon:focus:before, .button.chat.icon:active:before {
    background-position: -12px -96px;
}
.button.clock.icon:before {
    background-position: 0 -108px;
}
.button.clock.icon:hover:before, .button.clock.icon:focus:before, .button.clock.icon:active:before {
    background-position: -12px -108px;
}
.button.settings.icon:before {
    background-position: 0 -120px;
}
.button.settings.icon:hover:before, .button.settings.icon:focus:before, .button.settings.icon:active:before {
    background-position: -12px -120px;
}
.button.comment.icon:before {
    background-position: 0 -132px;
}
.button.comment.icon:hover:before, .button.comment.icon:focus:before, .button.comment.icon:active:before {
    background-position: -12px -132px;
}
.button.fork.icon:before {
    background-position: 0 -144px;
}
.button.fork.icon:hover:before, .button.fork.icon:focus:before, .button.fork.icon:active:before {
    background-position: -12px -144px;
}
.button.like.icon:before {
    background-position: 0 -156px;
}
.button.like.icon:hover:before, .button.like.icon:focus:before, .button.like.icon:active:before {
    background-position: -12px -156px;
}
.button.favorite.icon:before {
    background-position: 0 -348px;
}
.button.favorite.icon:hover:before, .button.favorite.icon:focus:before, .button.favorite.icon:active:before {
    background-position: -12px -348px;
}
.button.home.icon:before {
    background-position: 0 -168px;
}
.button.home.icon:hover:before, .button.home.icon:focus:before, .button.home.icon:active:before {
    background-position: -12px -168px;
}
.button.key.icon:before {
    background-position: 0 -180px;
}
.button.key.icon:hover:before, .button.key.icon:focus:before, .button.key.icon:active:before {
    background-position: -12px -180px;
}
.button.lock.icon:before {
    background-position: 0 -192px;
}
.button.lock.icon:hover:before, .button.lock.icon:focus:before, .button.lock.icon:active:before {
    background-position: -12px -192px;
}
.button.unlock.icon:before {
    background-position: 0 -204px;
}
.button.unlock.icon:hover:before, .button.unlock.icon:focus:before, .button.unlock.icon:active:before {
    background-position: -12px -204px;
}
.button.loop.icon:before {
    background-position: 0 -216px;
}
.button.loop.icon:hover:before, .button.loop.icon:focus:before, .button.loop.icon:active:before {
    background-position: -12px -216px;
}
.button.search.icon:before {
    background-position: 0 -228px;
}
.button.search.icon:hover:before, .button.search.icon:focus:before, .button.search.icon:active:before {
    background-position: -12px -228px;
}
.button.mail.icon:before {
    background-position: 0 -240px;
}
.button.mail.icon:hover:before, .button.mail.icon:focus:before, .button.mail.icon:active:before {
    background-position: -12px -240px;
}
.button.move.icon:before {
    background-position: 0 -252px;
}
.button.move.icon:hover:before, .button.move.icon:focus:before, .button.move.icon:active:before {
    background-position: -12px -252px;
}
.button.edit.icon:before {
    background-position: 0 -264px;
}
.button.edit.icon:hover:before, .button.edit.icon:focus:before, .button.edit.icon:active:before {
    background-position: -12px -264px;
}
.button.pin.icon:before {
    background-position: 0 -276px;
}
.button.pin.icon:hover:before, .button.pin.icon:focus:before, .button.pin.icon:active:before {
    background-position: -12px -276px;
}
.button.reload.icon:before {
    background-position: 0 -300px;
}
.button.reload.icon:hover:before, .button.reload.icon:focus:before, .button.reload.icon:active:before {
    background-position: -12px -300px;
}
.button.rss.icon:before {
    background-position: 0 -312px;
}
.button.rss.icon:hover:before, .button.rss.icon:focus:before, .button.rss.icon:active:before {
    background-position: -12px -312px;
}
.button.tag.icon:before {
    background-position: 0 -324px;
}
.button.tag.icon:hover:before, .button.tag.icon:focus:before, .button.tag.icon:active:before {
    background-position: -12px -324px;
}
.button.trash.icon:before {
    background-position: 0 -336px;
}
.button.trash.icon:hover:before, .button.trash.icon:focus:before, .button.trash.icon:active:before {
    background-position: -12px -336px;
}
.button.user.icon:before {
    background-position: 0 -360px;
}
.button.user.icon:hover:before, .button.user.icon:focus:before, .button.user.icon:active:before {
    background-position: -12px -360px;
}
.button.primary {
    font-weight: bold;
}
.button.danger {
    color: #990000;
}
.button.danger:hover, .button.danger:focus, .button.danger:active {
    background-color: #DC5F59;
    background-image: -moz-linear-gradient(#DC5F59, #B33630);
    border-color: #B53F3A #B53F3A #A0302A;
    color: #FFFFFF;
}
.button.danger:active, .button.danger.active {
    background-color: #B33630;
    background-image: -moz-linear-gradient(#B33630, #DC5F59);
    border-color: #A0302A #A0302A #BF4843;
}
.button.pill {
    -moz-border-radius: 50em 50em 50em 50em;
}
.button.disable {
    opacity: 0.5;
}
.button.disable:hover{
	
	}

.button.big {
    font-size: 14px;
}
.button.big.icon:before {
    top: 0;
}
.button-group {
    display: inline-block;
    list-style: none outside none;
    margin: 0;
    padding: 0;
}
.button + .button, .button + .button-group, .button-group + .button, .button-group + .button-group {
    margin-left: 15px;
}
.button-group li {
    float: left;
    margin: 0;
    padding: 0;
}
.button-group .button {
   /* float: left; disable tuk sementara waktu sbb dia allign left xbetul kt wall(butang tidak selesai)*/
    margin-left: -1px;
}
.button-group > .button:not(:first-child):not(:last-child), .button-group li:not(:first-child):not(:last-child) .button {
    -moz-border-radius: 0 0 0 0;
}
.button-group > .button:first-child, .button-group li:first-child .button {
    -moz-border-radius-bottomright: 0;
    -moz-border-radius-topright: 0;
    margin-left: 0;
}
.button-group > .button:last-child, .button-group li:last-child > .button {
    -moz-border-radius-bottomleft: 0;
    -moz-border-radius-topleft: 0;
}
.button-group.minor-group .button {
    background-color: #FFFFFF;
    background-image: none;
    border: 1px solid #D4D4D4;
    text-shadow: none;
}
.button-group.minor-group .button:hover, .button-group.minor-group .button:focus, .button-group.minor-group .button:active {
    background-color: #599BDC;
}
.button-group.minor-group .button:active, .button-group.minor-group .button.active {
    background-color: #3072B3;
}
.button-group.minor-group .button.icon:before {
    opacity: 0.8;
}
.button-container .button, .button-container .button-group {
    vertical-align: top;
}

/*BUTTON PILL AKAN DITAMATKAN PERKHIDMATAN TAK LAMA LG*/
 button.pill-l span {
      border-right-width:0;
      }
    button.pill-l span span {
      border-right:1px solid #bbb;
      }
    button.pill-c span {
      border-right-style:1px solid #bbb;
	  border-left-style:1px solid #bbb;
      border-left-color:#fff;
	  border-right-color:#fff;
      }
    button.pill-c span span {
      border-right:1px solid #bbb;
      }
    button.pill-r span {
      border-left-color:#fff;
      }
	  button.pill-r span span {
      border-left:1px solid #bbb;
      }
    /*button disable*/
	button[disabled].pill-c span,button[disabled].pill-l span,button[disabled].pill-r span{
		background:#ddd url(../images/bg_button_disable.gif) repeat-x 0 0;
		cursor:default;
	}