/* Jumpeye framework Version: 1.0.0 www.jumpeye.com Created by Jumpeye Components Button style-8 */ /* sizes -------- */ .style-8.small.button { font-size : 11px; padding : 0 19px 3px; width : auto; height : 29px; line-height: 26px; } .style-8.button, .style-8.medium.button { font-size : 12px; padding : 0 34px 3px; width : auto; height : 32px; line-height: 29px; } .style-8.large.button { font-size : 18px; padding : 0 45px 3px; width : auto; height : 42px; line-height: 39px; } /* Corners -------- */ .style-8.button.small { -moz-border-radius: 10; -webkit-border-radius: 10; border-radius: 10; } .style-8.button, .style-8.button.medium, .style-8.button.large { -moz-border-radius: 11px; -webkit-border-radius: 11px; border-radius: 11px; } /* style-8 yellow */ .style-8.button.yellow, .style-8.button.yellow:hover, .style-8.button.yellow:active, .style-8.button.yellow.active{ color : #7b540b; text-shadow : 0 1px 0 rgba(255, 255, 255, 0.39); } .style-8.button.yellow { border-top : 1px solid #998400; border-right : 1px solid #ab8800; border-bottom : 1px solid #af9138; border-left : 1px solid #ab8800; background : #ffdc00; background : url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZGMwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmJlMDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background : -moz-linear-gradient(top, #ffdc00 0%, #ffbe00 100%); background : -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffdc00), color-stop(100%,#ffbe00)); background : -webkit-linear-gradient(top, #ffdc00 0%,#ffbe00 100%); background : -o-linear-gradient(top, #ffdc00 0%,#ffbe00 100%); background : -ms-linear-gradient(top, #ffdc00 0%,#ffbe00 100%); background : linear-gradient(top, #ffdc00 0%,#ffbe00 100%); filter : progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffdc00', endColorstr='#ffbe00',GradientType=0 ); box-shadow : 0 1px 0 0 #ffe338 inset, 1px 0 0 0 #ffd938 inset, -1px 0 0 0 #ffd938 inset, 0 2px 2px -1px rgba(0,0,0,0.4), 1px 0 1px -1px rgba(0,0,0,0.4), -1px 0 1px -1px rgba(0,0,0,0.4); -moz-box-shadow : 0 1px 0 0 #ffe338 inset, 1px 0 0 0 #ffd938 inset, -1px 0 0 0 #ffd938 inset, 0 2px 2px -1px rgba(0,0,0,0.4), 1px 0 1px -1px rgba(0,0,0,0.4), -1px 0 1px -1px rgba(0,0,0,0.4); -webkit-box-shadow: 0 1px 0 0 #ffe338 inset, 1px 0 0 0 #ffd938 inset, -1px 0 0 0 #ffd938 inset, 0 2px 2px -1px rgba(0,0,0,0.4), 1px 0 1px -1px rgba(0,0,0,0.4), -1px 0 1px -1px rgba(0,0,0,0.4); } .style-8.button.yellow:hover { border : 1px solid; border-color : #997a00 #ab8800; background : #ffcb00; filter : progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffcb00', endColorstr='#ffcb00'); box-shadow : 0 2px 2px -1px rgba(0,0,0,0.4), 1px 0 1px -1px rgba(0,0,0,0.4), -1px 0 1px -1px rgba(0,0,0,0.4), 0 0 0 1px #ffd638 inset; -moz-box-shadow : 0 2px 2px -1px rgba(0,0,0,0.4), 1px 0 1px -1px rgba(0,0,0,0.4), -1px 0 1px -1px rgba(0,0,0,0.4), 0 0 0 1px #ffd638 inset; -webkit-box-shadow: 0 2px 2px -1px rgba(0,0,0,0.4), 1px 0 1px -1px rgba(0,0,0,0.4), -1px 0 1px -1px rgba(0,0,0,0.4), 0 0 0 1px #ffd638 inset; } .style-8.button.yellow:active, .style-8.button.yellow.active { border : 1px solid; border-color : #997200 #ab8800 #af9f38 #af9f38; background : #ffbe00; background : url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmYmUwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmRjMDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background : -moz-linear-gradient(top, #ffbe00 0%, #ffdc00 100%); background : -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffbe00), color-stop(100%,#ffdc00)); background : -webkit-linear-gradient(top, #ffbe00 0%,#ffdc00 100%); background : -o-linear-gradient(top, #ffbe00 0%,#ffdc00 100%); background : -ms-linear-gradient(top, #ffbe00 0%,#ffdc00 100%); background : linear-gradient(top, #ffbe00 0%,#ffdc00 100%); filter : progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffbe00', endColorstr='#ffdc00',GradientType=0 ); box-shadow : 0 2px 2px -1px rgba(0,0,0,0.4), 1px 0 1px -1px rgba(0,0,0,0.4), -1px 0 1px -1px rgba(0,0,0,0.4), 0 1px 0 0 #ffcd38 inset, 1px 0 0 0 #ffd938 inset, -1px 0 0 0 #ffd938 inset; -moz-box-shadow : 0 2px 2px -1px rgba(0,0,0,0.4), 1px 0 1px -1px rgba(0,0,0,0.4), -1px 0 1px -1px rgba(0,0,0,0.4), 0 1px 0 0 #ffcd38 inset, 1px 0 0 0 #ffd938 inset, -1px 0 0 0 #ffd938 inset; -webkit-box-shadow: 0 2px 2px -1px rgba(0,0,0,0.4), 1px 0 1px -1px rgba(0,0,0,0.4), -1px 0 1px -1px rgba(0,0,0,0.4), 0 1px 0 0 #ffcd38 inset, 1px 0 0 0 #ffd938 inset, -1px 0 0 0 #ffd938 inset; } /* style-8 blue */ .style-8.button.blue, .style-8.button.blue:hover, .style-8.button.blue:active, .style-8.button.blue.active{ color : #fff; text-shadow : 0 -1px 0 rgba(0, 0, 0, 0.30); } .style-8.button.blue { border : 1px solid; border-color : #3b6a98 #3b6ca1 #5c7da2 #3b6ca1; background : #4d93e2; background : url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzRkOTNlMiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM2MmIwZmQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background : -moz-linear-gradient(top, #62b0fd 0%, #4d93e2 100%); background : -webkit-gradient(linear, left top, left bottom, color-stop(0%,#62b0fd), color-stop(100%,#4d93e2)); background : -webkit-linear-gradient(top, #62b0fd 0%,#4d93e2 100%); background : -o-linear-gradient(top, #62b0fd 0%,#4d93e2 100%); background : -ms-linear-gradient(top, #62b0fd 0%,#4d93e2 100%); background : linear-gradient(top, #62b0fd 0%,#4d93e2 100%); filter : progid:DXImageTransform.Microsoft.gradient( startColorstr='#62b0fd', endColorstr='#4d93e2',GradientType=0 ); box-shadow : 0 1px 0 0 #84c1fd inset, 1px 0 0 0 #7db6f3 inset, -1px 0 0 0 #7db6f3 inset, 0 2px 2px -1px rgba(0,0,0,0.4), 1px 0 1px -1px rgba(0,0,0,0.4), -1px 0 1px -1px rgba(0,0,0,0.4); -moz-box-shadow : 0 1px 0 0 #84c1fd inset, 1px 0 0 0 #7db6f3 inset, -1px 0 0 0 #7db6f3 inset, 0 2px 2px -1px rgba(0,0,0,0.4), 1px 0 1px -1px rgba(0,0,0,0.4), -1px 0 1px -1px rgba(0,0,0,0.4); -webkit-box-shadow: 0 1px 0 0 #84c1fd inset, 1px 0 0 0 #7db6f3 inset, -1px 0 0 0 #7db6f3 inset, 0 2px 2px -1px rgba(0,0,0,0.4), 1px 0 1px -1px rgba(0,0,0,0.4), -1px 0 1px -1px rgba(0,0,0,0.4); } .style-8.button.blue:hover { border : 1px solid; border-color : #325e8d #38699e #325e8d #38699e; background : #549deb; filter : progid:DXImageTransform.Microsoft.gradient(startColorstr='#549deb', endColorstr='#549deb'); box-shadow : 0 2px 2px -1px rgba(0,0,0,0.4), 1px 0 1px -1px rgba(0,0,0,0.4), -1px 0 1px -1px rgba(0,0,0,0.4), 0 0 0 1px #7ab3ef inset; -moz-box-shadow : 0 2px 2px -1px rgba(0,0,0,0.4), 1px 0 1px -1px rgba(0,0,0,0.4), -1px 0 1px -1px rgba(0,0,0,0.4), 0 0 0 1px #7ab3ef inset; -webkit-box-shadow: 0 2px 2px -1px rgba(0,0,0,0.4), 1px 0 1px -1px rgba(0,0,0,0.4), -1px 0 1px -1px rgba(0,0,0,0.4), 0 0 0 1px #7ab3ef inset; } .style-8.button.blue:active, .style-8.button.blue.active { border : 1px solid; border-color : #2e5888 #3a6ca0 #668baf #3a6ca0; background : #4e94e3; background : url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzRlOTRlMyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM2MmIwZmQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background : -moz-linear-gradient(top, #4e94e3 0%, #62b0fd 100%); background : -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4e94e3), color-stop(100%,#62b0fd)); background : -webkit-linear-gradient(top, #4e94e3 0%,#62b0fd 100%); background : -o-linear-gradient(top, #4e94e3 0%,#62b0fd 100%); background : -ms-linear-gradient(top, #4e94e3 0%,#62b0fd 100%); background : linear-gradient(top, #4e94e3 0%,#62b0fd 100%); filter : progid:DXImageTransform.Microsoft.gradient( startColorstr='#4e94e3', endColorstr='#62b0fd',GradientType=0 ); box-shadow : 0 2px 2px -1px rgba(0,0,0,0.4), 1px 0 1px -1px rgba(0,0,0,0.4), -1px 0 1px -1px rgba(0,0,0,0.4), 0 1px 0 0 #74abe9 inset, 1px 0 0 0 #7cb6f3 inset, -1px 0 0 0 #7cb6f3 inset; -moz-box-shadow : 0 2px 2px -1px rgba(0,0,0,0.4), 1px 0 1px -1px rgba(0,0,0,0.4), -1px 0 1px -1px rgba(0,0,0,0.4), 0 1px 0 0 #74abe9 inset, 1px 0 0 0 #7cb6f3 inset, -1px 0 0 0 #7cb6f3 inset; -webkit-box-shadow: 0 2px 2px -1px rgba(0,0,0,0.4), 1px 0 1px -1px rgba(0,0,0,0.4), -1px 0 1px -1px rgba(0,0,0,0.4), 0 1px 0 0 #74abe9 inset, 1px 0 0 0 #7cb6f3 inset, -1px 0 0 0 #7cb6f3 inset; } /* style-8 green */ .style-8.button.green { border : 1px solid; border-color : #326200 #326700 #577c38 #326700; background : #53a300; background : url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzUzYTMwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM0MzkxMDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background : -moz-linear-gradient(top, #53a300 0%, #439100 100%); background : -webkit-gradient(linear, left top, left bottom, color-stop(0%,#53a300), color-stop(100%,#439100)); background : -webkit-linear-gradient(top, #53a300 0%,#439100 100%); background : -o-linear-gradient(top, #53a300 0%,#439100 100%); background : -ms-linear-gradient(top, #53a300 0%,#439100 100%); background : linear-gradient(top, #53a300 0%,#439100 100%); filter : progid:DXImageTransform.Microsoft.gradient( startColorstr='#53a300', endColorstr='#439100',GradientType=0 ); box-shadow : 0 1px 0 0 #79b738 inset, 1px 0 0 0 #73b038 inset, -1px 0 0 0 #73b038 inset, 0 2px 2px -1px rgba(0,0,0,0.4), 1px 0 1px -1px rgba(0,0,0,0.4), -1px 0 1px -1px rgba(0,0,0,0.4); -moz-box-shadow : 0 1px 0 0 #79b738 inset, 1px 0 0 0 #73b038 inset, -1px 0 0 0 #73b038 inset, 0 2px 2px -1px rgba(0,0,0,0.4), 1px 0 1px -1px rgba(0,0,0,0.4), -1px 0 1px -1px rgba(0,0,0,0.4); -webkit-box-shadow: 0 1px 0 0 #79b738 inset, 1px 0 0 0 #73b038 inset, -1px 0 0 0 #73b038 inset, 0 2px 2px -1px rgba(0,0,0,0.4), 1px 0 1px -1px rgba(0,0,0,0.4), -1px 0 1px -1px rgba(0,0,0,0.4); color : #fff; text-shadow : 0 -1px 0 rgba(0, 0, 0, 0.30); } .style-8.button.green:hover { border : 1px solid; border-color : #2c5c00 #316700 #2c5c00 #316700; background : #4a9900; filter : progid:DXImageTransform.Microsoft.gradient(startColorstr='#4a9900', endColorstr='#4a9900'); box-shadow : 0 2px 2px -1px rgba(0,0,0,0.4), 1px 0 1px -1px rgba(0,0,0,0.4), -1px 0 1px -1px rgba(0,0,0,0.4), 0 0 0 1px #72af38 inset; -moz-box-shadow : 0 2px 2px -1px rgba(0,0,0,0.4), 1px 0 1px -1px rgba(0,0,0,0.4), -1px 0 1px -1px rgba(0,0,0,0.4), 0 0 0 1px #72af38 inset; -webkit-box-shadow: 0 2px 2px -1px rgba(0,0,0,0.4), 1px 0 1px -1px rgba(0,0,0,0.4), -1px 0 1px -1px rgba(0,0,0,0.4), 0 0 0 1px #72af38 inset; color : #fff; text-shadow : 0 -1px 0 rgba(0, 0, 0, 0.30); } .style-8.button.green:active, .style-8.button.green.active { border : 1px solid; border-color : #326200 #326700 #577c38 #326700; background : #439100; background : url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzQzOTEwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM1M2EzMDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background : -moz-linear-gradient(top, #439100 0%, #53a300 100%); background : -webkit-gradient(linear, left top, left bottom, color-stop(0%,#439100), color-stop(100%,#53a300)); background : -webkit-linear-gradient(top, #439100 0%,#53a300 100%); background : -o-linear-gradient(top, #439100 0%,#53a300 100%); background : -ms-linear-gradient(top, #439100 0%,#53a300 100%); background : linear-gradient(top, #439100 0%,#53a300 100%); filter : progid:DXImageTransform.Microsoft.gradient( startColorstr='#439100', endColorstr='#53a300',GradientType=0 ); box-shadow : 0 2px 2px -1px rgba(0,0,0,0.4), 1px 0 1px -1px rgba(0,0,0,0.4), -1px 0 1px -1px rgba(0,0,0,0.4), 0 1px 0 0 #79b738 inset, 1px 0 0 0 #79b738 inset, -1px 0 0 0 #79b738 inset; -moz-box-shadow : 0 2px 2px -1px rgba(0,0,0,0.4), 1px 0 1px -1px rgba(0,0,0,0.4), -1px 0 1px -1px rgba(0,0,0,0.4), 0 1px 0 0 #79b738 inset, 1px 0 0 0 #79b738 inset, -1px 0 0 0 #79b738 inset; -webkit-box-shadow: 0 2px 2px -1px rgba(0,0,0,0.4), 1px 0 1px -1px rgba(0,0,0,0.4), -1px 0 1px -1px rgba(0,0,0,0.4), 0 1px 0 0 #79b738 inset, 1px 0 0 0 #79b738 inset, -1px 0 0 0 #79b738 inset; color : #fff; text-shadow : 0 -1px 0 rgba(0, 0, 0, 0.30); } /* style-8 red */ .style-8.button.red { border : 1px solid; border-color : #882525 #8c1615 #903938 #8c1615; background : #e33d3d; background : url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2UzM2QzZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNiYzAxMDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background : -moz-linear-gradient(top, #e33d3d 0%, #bc0100 100%); background : -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e33d3d), color-stop(100%,#bc0100)); background : -webkit-linear-gradient(top, #e33d3d 0%,#bc0100 100%); background : -o-linear-gradient(top, #e33d3d 0%,#bc0100 100%); background : -ms-linear-gradient(top, #e33d3d 0%,#bc0100 100%); background : linear-gradient(top, #e33d3d 0%,#bc0100 100%); filter : progid:DXImageTransform.Microsoft.gradient( startColorstr='#e33d3d', endColorstr='#bc0100',GradientType=0 ); box-shadow : 0 1px 0 0 #e86767 inset, 1px 0 0 0 #da5251 inset, -1px 0 0 0 #da5251 inset, 0 2px 2px -1px rgba(0,0,0,0.4), 1px 0 1px -1px rgba(0,0,0,0.4), -1px 0 1px -1px rgba(0,0,0,0.4); -moz-box-shadow : 0 1px 0 0 #e86767 inset, 1px 0 0 0 #da5251 inset, -1px 0 0 0 #da5251 inset, 0 2px 2px -1px rgba(0,0,0,0.4), 1px 0 1px -1px rgba(0,0,0,0.4), -1px 0 1px -1px rgba(0,0,0,0.4); -webkit-box-shadow: 0 1px 0 0 #e86767 inset, 1px 0 0 0 #da5251 inset, -1px 0 0 0 #da5251 inset, 0 2px 2px -1px rgba(0,0,0,0.4), 1px 0 1px -1px rgba(0,0,0,0.4), -1px 0 1px -1px rgba(0,0,0,0.4); color : #fff; text-shadow : 0 -1px 0 rgba(0, 0, 0, 0.30); } .style-8.button.red:hover { border : 1px solid #781413; background : #c82120; filter : progid:DXImageTransform.Microsoft.gradient(startColorstr='#c82120', endColorstr='#c82120'); box-shadow : 0 2px 2px -1px rgba(0,0,0,0.4), 1px 0 1px -1px rgba(0,0,0,0.4), -1px 0 1px -1px rgba(0,0,0,0.4), 0 0 0 1px #d45251 inset; -moz-box-shadow : 0 2px 2px -1px rgba(0,0,0,0.4), 1px 0 1px -1px rgba(0,0,0,0.4), -1px 0 1px -1px rgba(0,0,0,0.4), 0 0 0 1px #d45251 inset; -webkit-box-shadow: 0 2px 2px -1px rgba(0,0,0,0.4), 1px 0 1px -1px rgba(0,0,0,0.4), -1px 0 1px -1px rgba(0,0,0,0.4), 0 0 0 1px #d45251 inset; color : #fff; text-shadow : 0 -1px 0 rgba(0, 0, 0, 0.30); } .style-8.button.red:active, .style-8.button.red.active { border : 1px solid; border-color : #710100 #891212 #a25555 #891212; background : #bc0100; background : url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2JjMDEwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlMzNkM2QiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background : -moz-linear-gradient(top, #bc0100 0%, #e33d3d 100%); background : -webkit-gradient(linear, left top, left bottom, color-stop(0%,#bc0100), color-stop(100%,#e33d3d)); background : -webkit-linear-gradient(top, #bc0100 0%,#e33d3d 100%); background : -o-linear-gradient(top, #bc0100 0%,#e33d3d 100%); background : -ms-linear-gradient(top, #bc0100 0%,#e33d3d 100%); background : linear-gradient(top, #bc0100 0%,#e33d3d 100%); filter : progid:DXImageTransform.Microsoft.gradient( startColorstr='#bc0100', endColorstr='#e33d3d',GradientType=0 ); box-shadow : 0 2px 2px -1px rgba(0,0,0,0.4), 1px 0 1px -1px rgba(0,0,0,0.4), -1px 0 1px -1px rgba(0,0,0,0.4), 0 1px 0 0 #cb3a39 inset, 1px 0 0 0 #da5251 inset, -1px 0 0 0 #da5251 inset; -moz-box-shadow : 0 2px 2px -1px rgba(0,0,0,0.4), 1px 0 1px -1px rgba(0,0,0,0.4), -1px 0 1px -1px rgba(0,0,0,0.4), 0 1px 0 0 #cb3a39 inset, 1px 0 0 0 #da5251 inset, -1px 0 0 0 #da5251 inset; -webkit-box-shadow: 0 2px 2px -1px rgba(0,0,0,0.4), 1px 0 1px -1px rgba(0,0,0,0.4), -1px 0 1px -1px rgba(0,0,0,0.4), 0 1px 0 0 #cb3a39 inset, 1px 0 0 0 #da5251 inset, -1px 0 0 0 #da5251 inset; color : #fff; text-shadow : 0 -1px 0 rgba(0, 0, 0, 0.30); } /* style-8 light-gray */ .style-8.button.light-gray { border : 1px solid; border-color : #818181 #888888 #919191 #888888; background : #d7d7d7; background : url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Q3ZDdkNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNiZWJlYmUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background : -moz-linear-gradient(top, #d7d7d7 0%, #bebebe 100%); background : -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d7d7d7), color-stop(100%,#bebebe)); background : -webkit-linear-gradient(top, #d7d7d7 0%,#bebebe 100%); background : -o-linear-gradient(top, #d7d7d7 0%,#bebebe 100%); background : -ms-linear-gradient(top, #d7d7d7 0%,#bebebe 100%); background : linear-gradient(top, #d7d7d7 0%,#bebebe 100%); filter : progid:DXImageTransform.Microsoft.gradient( startColorstr='#d7d7d7', endColorstr='#bebebe',GradientType=0 ); box-shadow : 0 2px 2px -1px rgba(0,0,0,0.4), 1px 0 1px -1px rgba(0,0,0,0.4), -1px 0 1px -1px rgba(0,0,0,0.4), 0 1px 0 0 #dfdfdf inset, 1px 0 0 0 #d6d6d6 inset, -1px 0 0 0 #d6d6d6 inset; -moz-box-shadow : 0 2px 2px -1px rgba(0,0,0,0.4), 1px 0 1px -1px rgba(0,0,0,0.4), -1px 0 1px -1px rgba(0,0,0,0.4), 0 1px 0 0 #dfdfdf inset, 1px 0 0 0 #d6d6d6 inset, -1px 0 0 0 #d6d6d6 inset; -webkit-box-shadow: 0 2px 2px -1px rgba(0,0,0,0.4), 1px 0 1px -1px rgba(0,0,0,0.4), -1px 0 1px -1px rgba(0,0,0,0.4), 0 1px 0 0 #dfdfdf inset, 1px 0 0 0 #d6d6d6 inset, -1px 0 0 0 #d6d6d6 inset; color : #474747; text-shadow : 0 1px 0 rgba(255, 255, 255, 0.50); } .style-8.button.light-gray:hover { border : 1px solid; border-color : #7a7a7a #888888 #7a7a7a #888888; background : #cbcbcb; filter : progid:DXImageTransform.Microsoft.gradient(startColorstr='#cbcbcb', endColorstr='#cbcbcb'); box-shadow : 0 2px 2px -1px rgba(0,0,0,0.4), 1px 0 1px -1px rgba(0,0,0,0.4), -1px 0 1px -1px rgba(0,0,0,0.4), 0 0 0 1px #d6d6d6 inset; -moz-box-shadow : 0 2px 2px -1px rgba(0,0,0,0.4), 1px 0 1px -1px rgba(0,0,0,0.4), -1px 0 1px -1px rgba(0,0,0,0.4), 0 0 0 1px #d6d6d6 inset; -webkit-box-shadow: 0 2px 2px -1px rgba(0,0,0,0.4), 1px 0 1px -1px rgba(0,0,0,0.4), -1px 0 1px -1px rgba(0,0,0,0.4), 0 0 0 1px #d6d6d6 inset; color : #474747; text-shadow : 0 1px 0 rgba(255, 255, 255, 0.50); } .style-8.button.light-gray:active, .style-8.button.light-gray.active { border : 1px solid; border-color : #727272 #878787 #9d9d9d #878787; background : #bebebe; background : url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2JlYmViZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNkN2Q3ZDciIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background : -moz-linear-gradient(top, #bebebe 0%, #d7d7d7 100%); background : -webkit-gradient(linear, left top, left bottom, color-stop(0%,#bebebe), color-stop(100%,#d7d7d7)); background : -webkit-linear-gradient(top, #bebebe 0%,#d7d7d7 100%); background : -o-linear-gradient(top, #bebebe 0%,#d7d7d7 100%); background : -ms-linear-gradient(top, #bebebe 0%,#d7d7d7 100%); background : linear-gradient(top, #bebebe 0%,#d7d7d7 100%); filter : progid:DXImageTransform.Microsoft.gradient( startColorstr='#bebebe', endColorstr='#d7d7d7',GradientType=0 ); box-shadow : 0 2px 2px -1px rgba(0,0,0,0.4), 1px 0 1px -1px rgba(0,0,0,0.4), -1px 0 1px -1px rgba(0,0,0,0.4), 0 1px 0 0 #cdcdcd inset, 1px 0 0 0 #d6d6d6 inset, -1px 0 0 0 #d6d6d6 inset; -moz-box-shadow : 0 2px 2px -1px rgba(0,0,0,0.4), 1px 0 1px -1px rgba(0,0,0,0.4), -1px 0 1px -1px rgba(0,0,0,0.4), 0 1px 0 0 #cdcdcd inset, 1px 0 0 0 #d6d6d6 inset, -1px 0 0 0 #d6d6d6 inset; -webkit-box-shadow: 0 2px 2px -1px rgba(0,0,0,0.4), 1px 0 1px -1px rgba(0,0,0,0.4), -1px 0 1px -1px rgba(0,0,0,0.4), 0 1px 0 0 #cdcdcd inset, 1px 0 0 0 #d6d6d6 inset, -1px 0 0 0 #d6d6d6 inset; color : #474747; text-shadow : 0 1px 0 rgba(255, 255, 255, 0.50); } /* style-8 dark-gray */ .style-8.button.dark-gray { border : 1px solid; border-color : #383838 #363636 #565656 #363636; background : #5e5e5e; background : url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzVlNWU1ZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM0MDQwNDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background : -moz-linear-gradient(top, #5e5e5e 0%, #404040 100%); background : -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5e5e5e), color-stop(100%,#404040)); background : -webkit-linear-gradient(top, #5e5e5e 0%,#404040 100%); background : -o-linear-gradient(top, #5e5e5e 0%,#404040 100%); background : -ms-linear-gradient(top, #5e5e5e 0%,#404040 100%); background : linear-gradient(top, #5e5e5e 0%,#404040 100%); filter : progid:DXImageTransform.Microsoft.gradient( startColorstr='#5e5e5e', endColorstr='#404040',GradientType=0 ); box-shadow : 0 1px 0 0 #818181, 1px 0 0 0 #767676 inset, -1px 0 0 0 #767676 inset, 0 2px 2px -1px rgba(0,0,0,0.4), 1px 0 1px -1px rgba(0,0,0,0.4), -1px 0 1px -1px rgba(0,0,0,0.4); -moz-box-shadow : 0 1px 0 0 #818181 inset, 1px 0 0 0 #767676 inset, -1px 0 0 0 #767676 inset, 0 2px 2px -1px rgba(0,0,0,0.4), 1px 0 1px -1px rgba(0,0,0,0.4), -1px 0 1px -1px rgba(0,0,0,0.4); -webkit-box-shadow: 0 1px 0 0 #818181 inset, 1px 0 0 0 #767676 inset, -1px 0 0 0 #767676 inset, 0 2px 2px -1px rgba(0,0,0,0.4), 1px 0 1px -1px rgba(0,0,0,0.4), -1px 0 1px -1px rgba(0,0,0,0.4); color : #fff; text-shadow : 0 -1px 0 rgba(0, 0, 0, 0.40); } .style-8.button.dark-gray:hover { border : 1px solid; border-color : #2a2b2b #2f3030 #2a2b2b #2f3030; background : #464747; filter : progid:DXImageTransform.Microsoft.gradient(startColorstr='#464747', endColorstr='#464747'); box-shadow : 0 2px 2px -1px rgba(0,0,0,0.4), 1px 0 1px -1px rgba(0,0,0,0.4), -1px 0 1px -1px rgba(0,0,0,0.4), 0 0 0 1px #6f6f6f inset; -moz-box-shadow : 0 2px 2px -1px rgba(0,0,0,0.4), 1px 0 1px -1px rgba(0,0,0,0.4), -1px 0 1px -1px rgba(0,0,0,0.4), 0 0 0 1px #6f6f6f inset; -webkit-box-shadow: 0 2px 2px -1px rgba(0,0,0,0.4), 1px 0 1px -1px rgba(0,0,0,0.4), -1px 0 1px -1px rgba(0,0,0,0.4), 0 0 0 1px #6f6f6f inset; color : #fff; text-shadow : 0 -1px 0 rgba(0, 0, 0, 0.40); } .style-8.button.dark-gray:active, .style-8.button.dark-gray.active { border : 1px solid; border-color : #262626 #343434 #646464 #343434; background : #404040; background : url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzQwNDA0MCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM1ZTVlNWUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background : -moz-linear-gradient(top, #404040 0%, #5e5e5e 100%); background : -webkit-gradient(linear, left top, left bottom, color-stop(0%,#404040), color-stop(100%,#5e5e5e)); background : -webkit-linear-gradient(top, #404040 0%,#5e5e5e 100%); background : -o-linear-gradient(top, #404040 0%,#5e5e5e 100%); background : -ms-linear-gradient(top, #404040 0%,#5e5e5e 100%); background : linear-gradient(top, #404040 0%,#5e5e5e 100%); filter : progid:DXImageTransform.Microsoft.gradient( startColorstr='#404040', endColorstr='#5e5e5e',GradientType=0 ); box-shadow : 0 2px 2px -1px rgba(0,0,0,0.4), 1px 0 1px -1px rgba(0,0,0,0.4), -1px 0 1px -1px rgba(0,0,0,0.4), 0 1px 0 0 #6b6b6b inset, 1px 0 0 0 #757575 inset, -1px 0 0 0 #757575 inset; -moz-box-shadow : 0 2px 2px -1px rgba(0,0,0,0.4), 1px 0 1px -1px rgba(0,0,0,0.4), -1px 0 1px -1px rgba(0,0,0,0.4), 0 1px 0 0 #6b6b6b inset, 1px 0 0 0 #757575 inset, -1px 0 0 0 #757575 inset; -webkit-box-shadow: 0 2px 2px -1px rgba(0,0,0,0.4), 1px 0 1px -1px rgba(0,0,0,0.4), -1px 0 1px -1px rgba(0,0,0,0.4), 0 1px 0 0 #6b6b6b inset, 1px 0 0 0 #757575 inset, -1px 0 0 0 #757575 inset; color : #fff; text-shadow : 0 -1px 0 rgba(0, 0, 0, 0.40); } /* style-8 transparent-black */ .style-8.button.transparent-black { color: #fff; background: rgba(0, 0, 0, 0.4); } .style-8.button.transparent-black:hover { color: #fff; background: rgba(0, 0, 0, 0.5); } .style-8.button.transparent-black:active, .style-8.button.transparent-black.active{ color: #fff; background: rgba(0, 0, 0, 0.3); } /* style-8 transparent-white */ .style-8.button.transparent-white { color: #606060; background: rgba(255, 255, 255, 0.4); } .style-8.button.transparent-white:hover { color: #606060; background: rgba(255, 255, 255, 0.5); } .style-8.button.transparent-white:active, .style-8.button.transparent-white.active{ color: #606060; background: rgba(255, 255, 255, 0.3); }