/* Large buttons */ .button-large{ display: inline-block; background: none; border: 1px solid transparent; height: 30px; line-height: 30px; color: #fff; font-size: 15px; padding: 2px 40px; -webkit-border-radius: 3px; border-radius: 3px; text-shadow: 1px 1px 2px rgba(0,0,0, .7); box-sizing: content-box; } .button-large:hover{ cursor: pointer; } /* Green */ .button-large.green{ color: #fff; border: 1px solid #75a023; background: url(../img/buttons/buttons.png) repeat-x; background-position: 0 -124px; } /* Red */ .button-large.red{ color: #fff; border: 1px solid #b00000; background: url(../img/buttons/buttons.png) repeat-x; background-position: 0 -158px; } /* Black */ .button-large.black{ color: #fff; border: 1px solid #1e1e1e; background: url(../img/buttons/buttons.png) repeat-x; background-position: 0 -192px; } /* Grey */ .button-large.grey{ color: #fff; border: 1px solid #919392; background: url(../img/buttons/buttons.png) repeat-x; background-position: 0 -226px; } /* Light Grey */ .button-large.lgrey{ color: #fff; border: 1px solid #889591; background: url(../img/buttons/buttons.png) repeat-x; background-position: 0 -260px; } /* Small Buttons */ .button-small{ display: inline-block; height: 23px; padding: 0 14px; -webkit-border-radius: 3px; border-radius: 3px; line-height: 23px; color: #fff; /*font-weight: bold;*/ text-align: center; text-shadow: 1px 1px 2px rgba(0,0,0, .7); } /* Green */ .button-small.green{ color: #fff; border: 1px solid #75a023; background: url(../img/buttons/buttons.png) repeat-x; background-position: 0 0; } /* Red */ .button-small.red{ color: #fff; border: 1px solid #b00000; background: url(../img/buttons/buttons.png) repeat-x; background-position: 0 -25px; } /* Black */ .button-small.black{ color: #fff; border: 1px solid #1e1e1e; background: url(../img/buttons/buttons.png) repeat-x; background-position: 0 -50px; } /* Grey */ .button-small.grey{ color: #fff; border: 1px solid #919392; background: url(../img/buttons/buttons.png) repeat-x; background-position: 0 -75px; } /* Light Grey */ .button-small.lgrey{ color: #fff; border: 1px solid #889591; background: url(../img/buttons/buttons.png) repeat-x; background-position: 0 -100px; } /* ON/OFF switch */ .switch-holder.inline > label{ float: left !important; line-height: 26px; margin-right: 10px; } .switch{ -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; -webkit-border-radius: 4px; border-radius: 4px; } .switch input{ position: absolute; left: -99999px; } /* Large switch */ .switch.large{ width: 67px; height: 40px; background: url(../img/buttons/switch-large.png) no-repeat; } /* Small switch */ .switch.small{ float: left; width: 67px; height: 26px; background: url(../img/buttons/switch-small.png) no-repeat; } /* Hover */ .switch:hover{ cursor: pointer; } /* Active */ .switch.active{ background-position: 0 0; } /* Inactive */ .switch.inactive{ background-position: 100% 0; }