/* 
    Document   : button
    Created on : Oct 9, 2012, 10:28:26 AM
    Author     : shepherd
    Description:
        Purpose of the stylesheet follows.
*/

/* ------------- */
/* -- Buttons -- */
/* ------------- */
.buttons {
    margin-top: 10px;
}
/*.buttons input, .button{
    background:#222 repeat-x;
    display:inline-block;
    padding:5px 10px 6px;
    color:#fff;
    text-decoration:none;
    font-weight:normal;
    line-height:1;
    text-shadow:0 -1px 1px rgba(0, 0, 0, 0.25);
    position:relative;
    cursor:pointer;
    font-family:BebasNeue,Arial, sans-serif;
    font-size:14px;
    padding:8px 14px 9px;
    background-color:#222;
    border: none;
    letter-spacing: 1px;
}
.buttons input:hover,.buttons input:focus,.button:hover,.button:focus{
    background-color:#ccc;
    color:#fff;

}*/
a.button{
    display: inline-block;
}
/*Normal*/
.buttons input, .button, input[type=button], input[type=submit] {
    padding: 5px;
    line-height: 21px;
    border-radius: 2px;
    font-family:'OpenSans-Semibold',Arial, sans-serif;
    text-transform: capitalize;
    -moz-box-shadow:inset 0px 0px 1px rgba(26,154,72,1);
    -webkit-box-shadow:inset 0px 0px 1px rgba(26,154,72,1);

background: #f9d781; /* Old browsers */
background: -moz-linear-gradient(top,  #f9d781 0%, #f9c43b 50%, #fc9b00 51%, #f7c23d 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f9d781), color-stop(50%,#f9c43b), color-stop(51%,#fc9b00), color-stop(100%,#f7c23d)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #f9d781 0%,#f9c43b 50%,#fc9b00 51%,#f7c23d 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #f9d781 0%,#f9c43b 50%,#fc9b00 51%,#f7c23d 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #f9d781 0%,#f9c43b 50%,#fc9b00 51%,#f7c23d 100%); /* IE10+ */
background: linear-gradient(to bottom,  #f9d781 0%,#f9c43b 50%,#fc9b00 51%,#f7c23d 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9d781', endColorstr='#f7c23d',GradientType=0 ); /* IE6-9 */
border:1px solid #999;
}
/*Hover*/
.buttons input:hover , .button:hover {
    
}
/*Active*/
.buttons input:active , .button:active {
}

.add_to_cart, .detail_product{
    display: block;
    text-align: center;
}


/*-- Blue-Button -- Normal --*/
.blue-button {
    color: #fff;
    background-color: #5489D0;
    border: 1px solid #3E6491;
    text-shadow: #222 0px 1px 0px;
    -moz-box-shadow:inset 0px 0px 1px rgba(79,122,162,1);
    -webkit-box-shadow:inset 0px 0px 1px rgba(79,122,162,1);
    box-shadow:inset 0px 0px 1px rgba(79,122,162,1);
    background: rgb(73,155,234); /* Old browsers */
    background: -moz-linear-gradient(top,  rgba(73,155,234,1) 0%, rgba(32,124,229,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(73,155,234,1)), color-stop(100%,rgba(32,124,229,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(73,155,234,1) 0%,rgba(32,124,229,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(73,155,234,1) 0%,rgba(32,124,229,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(73,155,234,1) 0%,rgba(32,124,229,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(73,155,234,1) 0%,rgba(32,124,229,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#499bea', endColorstr='#207ce5',GradientType=0 ); /* IE6-9 */
}
/*-- Blue-Button -- Hover --*/
.blue-button:hover {
    background-color: #86B1EC;
    background-image: -o-linear-gradient(90deg , rgb(89,149,206) 0%, rgb(183,210,241) 100%);
    background-image: -moz-linear-gradient(90deg , rgb(89,149,206) 0%, rgb(183,210,241) 100%);
    background-image: -webkit-linear-gradient(90deg , rgb(89,149,206) 0%, rgb(183,210,241) 100%);
    background-image: -ms-linear-gradient(90deg , rgb(89,149,206) 0%, rgb(183,210,241) 100%);
    background-image: linear-gradient(90deg , rgb(89,149,206) 0%, rgb(183,210,241) 100%);
}
/*-- Blue-Button -- Active --*/
.blue-button:active {
    background-color: #2964B4;
    -moz-box-shadow:inset 0px 0px 5px rgba(79,122,162,1);
    -webkit-box-shadow:inset 0px 0px 5px rgba(79,122,162,1);
    box-shadow:inset 0px 0px 5px rgba(79,122,162,1);
    background-image: -o-linear-gradient(90deg , rgb(156,196,241) 0%, rgb(52,125,192) 100%);
    background-image: -moz-linear-gradient(90deg , rgb(156,196,241) 0%, rgb(52,125,192) 100%);
    background-image: -webkit-linear-gradient(90deg , rgb(156,196,241) 0%, rgb(52,125,192) 100%);
    background-image: -ms-linear-gradient(90deg , rgb(156,196,241) 0%, rgb(52,125,192) 100%);
    background-image: linear-gradient(90deg , rgb(156,196,241) 0%, rgb(52,125,192) 100%);
    text-shadow: none;
}


/*-- button-A -- Normal --*/
.button-A {
    background-color: #85DD7C;
    border: 1px solid #158D34;
    -moz-box-shadow:inset 0px 0px 1px rgba(26,154,72,1);
    -webkit-box-shadow:inset 0px 0px 1px rgba(26,154,72,1);
    box-shadow:inset 0px 0px 1px rgba(26,154,72,1);
background: rgb(56,175,82); /* Old browsers */
background: -moz-linear-gradient(left,  rgba(56,175,82,1) 0%, rgba(92,181,113,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(56,175,82,1)), color-stop(100%,rgba(92,181,113,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left,  rgba(56,175,82,1) 0%,rgba(92,181,113,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left,  rgba(56,175,82,1) 0%,rgba(92,181,113,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left,  rgba(56,175,82,1) 0%,rgba(92,181,113,1) 100%); /* IE10+ */
background: linear-gradient(to right,  rgba(56,175,82,1) 0%,rgba(92,181,113,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#38af52', endColorstr='#5cb571',GradientType=1 ); /* IE6-9 */

    color: #fff;
    text-shadow: rgba(100,100,100,0.5) 0px 1px 0px;
}
/*-- button-a -- Hover --*/
.button-A:hover {
    background-color: #A7ED9E;
    background-image: -o-linear-gradient(90deg , rgb(138,211,129) 0%, rgb(204,237,200) 100%);
    background-image: -moz-linear-gradient(90deg , rgb(138,211,129) 0%, rgb(204,237,200) 100%);
    background-image: -webkit-linear-gradient(90deg , rgb(138,211,129) 0%, rgb(204,237,200) 100%);
    background-image: -ms-linear-gradient(90deg , rgb(138,211,129) 0%, rgb(204,237,200) 100%);
    background-image: linear-gradient(90deg , rgb(138,211,129) 0%, rgb(204,237,200) 100%);
}
/*-- button-a -- Active --*/
.button-A:active {
    background-color: #5DC34E;
    -moz-box-shadow:inset 0px 0px 5px rgba(26,154,72,1);
    -webkit-box-shadow:inset 0px 0px 5px rgba(26,154,72,1);
    box-shadow:inset 0px 0px 5px rgba(26,154,72,1);
    background-image: -o-linear-gradient(90deg , rgb(182,237,176) 0%, rgb(112,201,101) 100%);
    background-image: -moz-linear-gradient(90deg , rgb(182,237,176) 0%, rgb(112,201,101) 100%);
    background-image: -webkit-linear-gradient(90deg , rgb(182,237,176) 0%, rgb(112,201,101) 100%);
    background-image: -ms-linear-gradient(90deg , rgb(182,237,176) 0%, rgb(112,201,101) 100%);
    background-image: linear-gradient(90deg , rgb(182,237,176) 0%, rgb(112,201,101) 100%);
    text-shadow: none;
}


/*-- .button-B -- Normal --*/
.button-B {
    border: 1px solid #ACACAC;
    -moz-box-shadow:inset 0px 0px 1px rgba(187,187,187,1);
    -webkit-box-shadow:inset 0px 0px 1px rgba(187,187,187,1);
    box-shadow:inset 0px 0px 1px rgba(187,187,187,1);
    color: #2B2C2B;
    text-shadow: rgba(254,254,254,0.5) 0px 1px 0px;

    background: rgb(255,255,255); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(241,241,241,1) 50%, rgba(225,225,225,1) 51%, rgba(246,246,246,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(50%,rgba(241,241,241,1)), color-stop(51%,rgba(225,225,225,1)), color-stop(100%,rgba(246,246,246,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(241,241,241,1) 50%,rgba(225,225,225,1) 51%,rgba(246,246,246,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(241,241,241,1) 50%,rgba(225,225,225,1) 51%,rgba(246,246,246,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(241,241,241,1) 50%,rgba(225,225,225,1) 51%,rgba(246,246,246,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(241,241,241,1) 50%,rgba(225,225,225,1) 51%,rgba(246,246,246,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=0 ); /* IE6-9 */

}
/*-- .button-B -- Hover --*/
.button-B:hover {
    background-color: #FFFFFF;
    background-image: -o-linear-gradient(90deg , rgb(246,246,246) 0%, rgb(254,254,254) 100%);
    background-image: -moz-linear-gradient(90deg , rgb(246,246,246) 0%, rgb(254,254,254) 100%);
    background-image: -webkit-linear-gradient(90deg , rgb(246,246,246) 0%, rgb(254,254,254) 100%);
    background-image: -ms-linear-gradient(90deg , rgb(246,246,246) 0%, rgb(254,254,254) 100%);
    background-image: linear-gradient(90deg , rgb(246,246,246) 0%, rgb(254,254,254) 100%);
}
/*-- .button-B -- Active --*/
.button-B:active {
    background-color: #F9F9F9;
    -moz-box-shadow:inset 0px 0px 5px rgba(187,187,187,1);
    -webkit-box-shadow:inset 0px 0px 5px rgba(187,187,187,1);
    box-shadow:inset 0px 0px 5px rgba(187,187,187,1);
    background-image: -o-linear-gradient(90deg , rgb(254,254,254) 0%, rgb(246,246,246) 100%);
    background-image: -moz-linear-gradient(90deg , rgb(254,254,254) 0%, rgb(246,246,246) 100%);
    background-image: -webkit-linear-gradient(90deg , rgb(254,254,254) 0%, rgb(246,246,246) 100%);
    background-image: -ms-linear-gradient(90deg , rgb(254,254,254) 0%, rgb(246,246,246) 100%);
    background-image: linear-gradient(90deg , rgb(254,254,254) 0%, rgb(246,246,246) 100%);
    text-shadow: none;
}

/*-- .White-Button -- Normal --*/
.white-button {
    background-color: #F3F3F3;
    border: 1px solid #ACACAC;
    -moz-box-shadow:inset 0px 0px 1px rgba(187,187,187,1);
    -webkit-box-shadow:inset 0px 0px 1px rgba(187,187,187,1);
    box-shadow:inset 0px 0px 1px rgba(187,187,187,1);
    background-image: -o-linear-gradient(90deg , rgb(238,238,238) 0%, rgb(254,254,254) 100%);
    background-image: -moz-linear-gradient(90deg , rgb(238,238,238) 0%, rgb(254,254,254) 100%);
    background-image: -webkit-linear-gradient(90deg , rgb(238,238,238) 0%, rgb(254,254,254) 100%);
    background-image: -ms-linear-gradient(90deg , rgb(238,238,238) 0%, rgb(254,254,254) 100%);
    background-image: linear-gradient(90deg , rgb(238,238,238) 0%, rgb(254,254,254) 100%);
    color: #2B2C2B;
    text-shadow: rgba(254,254,254,0.5) 0px 1px 0px;
}
/*-- .White-Button -- Hover --*/
.white-button:hover {
    background-color: #FFFFFF;
    background-image: -o-linear-gradient(90deg , rgb(246,246,246) 0%, rgb(254,254,254) 100%);
    background-image: -moz-linear-gradient(90deg , rgb(246,246,246) 0%, rgb(254,254,254) 100%);
    background-image: -webkit-linear-gradient(90deg , rgb(246,246,246) 0%, rgb(254,254,254) 100%);
    background-image: -ms-linear-gradient(90deg , rgb(246,246,246) 0%, rgb(254,254,254) 100%);
    background-image: linear-gradient(90deg , rgb(246,246,246) 0%, rgb(254,254,254) 100%);
}
/*-- .White-Button -- Active --*/
.white-button:active {
    background-color: #F9F9F9;
    -moz-box-shadow:inset 0px 0px 5px rgba(187,187,187,1);
    -webkit-box-shadow:inset 0px 0px 5px rgba(187,187,187,1);
    box-shadow:inset 0px 0px 5px rgba(187,187,187,1);
    background-image: -o-linear-gradient(90deg , rgb(254,254,254) 0%, rgb(246,246,246) 100%);
    background-image: -moz-linear-gradient(90deg , rgb(254,254,254) 0%, rgb(246,246,246) 100%);
    background-image: -webkit-linear-gradient(90deg , rgb(254,254,254) 0%, rgb(246,246,246) 100%);
    background-image: -ms-linear-gradient(90deg , rgb(254,254,254) 0%, rgb(246,246,246) 100%);
    background-image: linear-gradient(90deg , rgb(254,254,254) 0%, rgb(246,246,246) 100%);
    text-shadow: none;
}


/*-- .White-Button -- Normal --*/
.yellow-button {
    border: 1px solid #FCB900;
    -moz-box-shadow:inset 0px 0px 1px rgba(187,187,187,1);
    -webkit-box-shadow:inset 0px 0px 1px rgba(187,187,187,1);
    box-shadow:inset 0px 0px 1px rgba(187,187,187,1);
    color: #2B2C2B;
    text-shadow: rgba(254,254,254,0.5) 0px 1px 0px;
    background: #ffff00; /* Old browsers */
background: -moz-linear-gradient(top,  #ffff00 0%, #ffdd00 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffff00), color-stop(100%,#ffdd00)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #ffff00 0%,#ffdd00 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #ffff00 0%,#ffdd00 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #ffff00 0%,#ffdd00 100%); /* IE10+ */
background: linear-gradient(to bottom,  #ffff00 0%,#ffdd00 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffff00', endColorstr='#ffdd00',GradientType=0 ); /* IE6-9 */

}
/*-- .White-Button -- Hover --*/
.yellow-button:hover {
    background-color: #FFFFFF;
    background-image: -o-linear-gradient(90deg , rgb(246,246,246) 0%, rgb(254,254,254) 100%);
    background-image: -moz-linear-gradient(90deg , rgb(246,246,246) 0%, rgb(254,254,254) 100%);
    background-image: -webkit-linear-gradient(90deg , rgb(246,246,246) 0%, rgb(254,254,254) 100%);
    background-image: -ms-linear-gradient(90deg , rgb(246,246,246) 0%, rgb(254,254,254) 100%);
    background-image: linear-gradient(90deg , rgb(246,246,246) 0%, rgb(254,254,254) 100%);
}
/*-- .White-Button -- Active --*/
.yellow-button:active {
    background-color: #F9F9F9;
    -moz-box-shadow:inset 0px 0px 5px rgba(187,187,187,1);
    -webkit-box-shadow:inset 0px 0px 5px rgba(187,187,187,1);
    box-shadow:inset 0px 0px 5px rgba(187,187,187,1);
    background-image: -o-linear-gradient(90deg , rgb(254,254,254) 0%, rgb(246,246,246) 100%);
    background-image: -moz-linear-gradient(90deg , rgb(254,254,254) 0%, rgb(246,246,246) 100%);
    background-image: -webkit-linear-gradient(90deg , rgb(254,254,254) 0%, rgb(246,246,246) 100%);
    background-image: -ms-linear-gradient(90deg , rgb(254,254,254) 0%, rgb(246,246,246) 100%);
    background-image: linear-gradient(90deg , rgb(254,254,254) 0%, rgb(246,246,246) 100%);
    text-shadow: none;
}






/*============ICON============*/
.icon span{
    width: 24px;
    height: 20px;
    display: block;
    background-position: 4px center;
    background-repeat: no-repeat;
}

.zoom-icon span{
    background-image: url(../images/icons/white/zoom.png);
}
.compare-icon span{
    background-image: url(../images/icons/white/compare.png);
}


#side-content .icon{
    background-position: 10px center;
    background-repeat: no-repeat;
}
#side-content .headphone-icon{
    background-image: url(../images/icons/headphone.png);
}
#side-content .business-card-icon{
    background-image: url(../images/icons/business-card.png);
}
#side-content .list-icon{
    background-image: url(../images/icons/list.png);
}
#side-content .statistic-icon{
    background-image: url(../images/icons/statistic.png);
}
#side-content .trash-icon{
    background-image: url(../images/icons/trash.png);
}
#side-content .zoom-icon{
    background-image: url(../images/icons/zoom.png);
}