<div>
<h2>Icon Buttons</h2>
<a class="icon button">Add A User</a>
<a class="icon plus button">Add</a>
<a class="icon cross button">Remove</a>
</div>
<div>
<h2>Button Bars</h2>
<ul class="buttonbar">
<li><a class="start" href="#">test</a></li>
<li><a href="#">test</a></li>
<li><a class="end" href="#">test</a></li>
<li><a class="spacer start active" href="#">On</a></li>
<li><a class="end" href="#">Off</a></li>
<li><a class="spacer end dropdown" href="#">test</a></li>
</ul>
</div>
<div>
<h2>Button Colors</h2>
<a class="button blue">Blue</a>
<a class="button green">Green</a>
<a class="button orange">Orange</a>
<a class="button red">Red</a>
<a class="button black">Black</a>
</div>
<div>
<h2>Button Style Mashups</h2>
<ul class="buttonbar">
<li><a class="start" href="#">test</a></li>
<li><a href="#">test</a></li>
<li><a class="orange active" href="#">test</a></li>
<li><a class="end dropdown" href="#">test</a></li>
<li><a class="spacer green glossy start active" href="#">On</a></li>
<li><a class="green glossy end" href="#">Off</a></li>
<li><a class="spacer blue end dropdown light" href="#">test</a></li>
</ul>
</div>
<div>
<h2>Dropdown Buttons</h2>
<a class="button dropdown" href="#">test</a>
<a class="button red dropdown light" href="#">test</a>
<a class="icon document orange button">Remove</a>
</div?
body { background: #fafafa; font-size: 13px; font-family: sans-serif; margin: 10px; -webkit-user-select: none; user-select: none;}
div { margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px dashed #ccc; }
div:last-child { border-bottom: none; }
h2 { font-size: 16px; margin: 0 0 10px 0; }
/* -------------- Button Base -------------- */
.button, .buttonbar a {
cursor: pointer;
text-decoration: none;
display: inline-block;
position: relative;
color: #4679bd;
background-repeat: repeat-x;
background-color: #ededed;
background-image: -moz-linear-gradient(top, #ededed 0%, #cccccc 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ededed), color-stop(100%,#cccccc));
background-image: -webkit-linear-gradient(top, #ededed 0%,#cccccc 100%);
background-image: -o-linear-gradient(top, #ededed 0%,#cccccc 100%);
background-image: -ms-linear-gradient(top, #ededed 0%,#cccccc 100%);
background-image: linear-gradient(top, #ededed 0%,#cccccc 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#cccccc',GradientType=0 );
text-shadow: 0 1px 0 rgba(255, 255, 255, .6);
padding: 0 16px;
height: 30px;
line-height: 30px;
border: 1px solid #ddd; border-left: 1px solid #bbbbbb; border-right: 1px solid #bbbbbb; border-bottom: 1px solid #aaa;
-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;
-webkit-box-shadow: inset 0 1px rgba(255,255,255, .8), inset 1px 0 rgba(255,255,255, .4), inset -1px 0 rgba(255,255,255, .4);
-moz-box-shadow: inset 0 1px rgba(255,255,255, .8), inset 1px 0 rgba(255,255,255, .4), inset -1px 0 rgba(255,255,255, .4);
box-shadow: inset 0 1px rgba(255,255,255, .8), inset 1px 0 rgba(255,255,255, .4), inset -1px 0 rgba(255,255,255, .4);
-webkit-transition: .08s ease box-shadow, .2s linear background-position;
-moz-transition: .08s ease box-shadow, .2s linear background-position;
transition: .08s ease box-shadow, .2s linear background-position;
-webkit-user-select: none; -moz-user-select: none; user-select: none;
-webkit-background-clip: border; background-clip: border;
-moz-outline: none; outline: none;
}
.button:hover, .buttonbar a:hover {
background-position: 0 15px;
}
.button:active, .buttonbar a:active, .buttonbar a.active {
background-color: #e1e1e1;
background-image: -moz-linear-gradient(top, #e1e1e1 0%, #c1c1c1 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e1e1e1), color-stop(100%,#c1c1c1));
background-image: -webkit-linear-gradient(top, #e1e1e1 0%,#c1c1c1 100%);
background-image: -o-linear-gradient(top, #e1e1e1 0%,#c1c1c1 100%);
background-image: -ms-linear-gradient(top, #e1e1e1 0%,#c1c1c1 100%);
background-image: linear-gradient(top, #e1e1e1 0%,#c1c1c1 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e1e1e1', endColorstr='#c1c1c1',GradientType=0 );
-webkit-box-shadow: inset 0 0px 10px rgba(0,0,0, .2), inset 0 0px 1px rgba(0, 0, 0, .4);
-moz-box-shadow: inset 0 0px 10px rgba(0,0,0, .2), inset 0 0px 1px rgba(0, 0, 0, .4);
box-shadow: inset 0 0px 10px rgba(0,0,0, .2), inset 0 0px 1px rgba(0, 0, 0, .4);
}
/* -------------- Button Bar-------------- */
.buttonbar:before, .buttonbar:after {
display: table;
content: "";
zoom: 1;
*display: inline;
}
.buttonbar:after {
clear: both;
}
.buttonbar {
zoom: 1;
}
.buttonbar a{
-webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0;
text-decoration: none;
border-right: none;
}
.buttonbar a.spacer{
margin-left: 8px;
-webkit-border-top-left-radius: 5px; -webkit-border-bottom-left-radius: 5px;
-moz-border-radius-topleft: 5px; -moz-border-radius-bottomleft: 5px;
border-top-left-radius: 5px; border-bottom-left-radius: 5px;
}
.buttonbar a.start {
-webkit-border-radius: 5px 0 0 5px;
-moz-border-radius: 5px 0 0 5px;
border-radius: 5px 0 0 5px;
}
.buttonbar a.end {
border-right: 1px solid rgba(0, 0, 0,.15);
-webkit-border-top-right-radius: 5px; -webkit-border-bottom-right-radius: 5px;
-moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px;
border-top-right-radius: 5px; border-bottom-right-radius: 5px;
}
a.dropdown {
padding-right: 0;
}
a.dropdown:after {
content: "";
float: right;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkRDNzZERjlEMDA3RjExRTE4QUQzRDUxOEFFOUIyRUNFIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkRDNzZERjlFMDA3RjExRTE4QUQzRDUxOEFFOUIyRUNFIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6REM3NkRGOUIwMDdGMTFFMThBRDNENTE4QUU5QjJFQ0UiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6REM3NkRGOUMwMDdGMTFFMThBRDNENTE4QUU5QjJFQ0UiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5To8l5AAAAnUlEQVR42mL8//8/AyWAcdQAGhiQm5v7n4mJCUPhv3//vk+ePJkLXZwFXYCfn/8nCwsLO7o4MzPzS2wuwLAqNTU1j5OT8ycQM8AwOzv7L39//0Ziw4Dj4cOHscuXL5/KyMjICpT/FRwcXKiqqroIKPcFwwSQAVgwx4MHD9La29s/3b59OwvI58KhDqcBYEOAOAifZhAeTYkMDAABBgBAUqBALcNxewAAAABJRU5ErkJggg==);
background-position: right center;
width: 16px;
height: 30px;
background-repeat: no-repeat;
padding-left: 4px;
border-left: 1px solid rgba(0, 0, 0, .15);
margin-left: 10px;
margin-right: 2px;
-webkit-box-shadow: inset 1px 0 rgba(255,255,255, .25); -moz-box-shadow: inset 1px 0 rgba(255,255,255, .25); box-shadow: inset 1px 0 rgba(255,255,255, .25);
-webkit-border-radius: 0 5px 5px 0; -moz-border-radius: 0 5px 5px 0; border-radius: 0 5px 5px 0;
}
a.dropdown.light:after {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjZBNjk3MUJEMDBGNTExRTFBOUMyQjE5N0JCM0YwMkQ4IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjZBNjk3MUJFMDBGNTExRTFBOUMyQjE5N0JCM0YwMkQ4Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NkE2OTcxQkIwMEY1MTFFMUE5QzJCMTk3QkIzRjAyRDgiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NkE2OTcxQkMwMEY1MTFFMUE5QzJCMTk3QkIzRjAyRDgiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6HXzUjAAAAo0lEQVR42mL8//8/AyWAiYFCMAwMYEHmMDIygihjHGr/AfF5EAM54BlROEADTp8+/Z+FhQVD9+/fv3+YmZlxohuAoVJCQuIbDw8PF7IYSMOnT59uEvQCWICFRRlowB0gzQ0T+/Xr13cgCMTqMZDpMAwDr1+/lgA6+TtQ7D+Q/gbky+HUg80AmCFAW1+/efNGDp+lGIFIDMAZiOTki2GQlAECDABkBm55rA5hCwAAAABJRU5ErkJggg==);
}
.buttonbar li { float: left; }
/* -------------- Colors -------------- */
a.blue {
color: white;
border: solid 1px #0078a5;
background-color: #00adee;
background-image: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));
background-image: -moz-linear-gradient(top, #00adee, #0078a5);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee', endColorstr='#0078a5');
text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
-webkit-box-shadow: inset 0 1px rgba(255,255,255, .4), inset 1px 0 rgba(255,255,255, .1), inset -1px 0 rgba(255,255,255, .1);
-moz-box-shadow: inset 0 1px rgba(255,255,255, .4), inset 1px 0 rgba(255,255,255, .1), inset -1px 0 rgba(255,255,255, .1);
box-shadow: inset 0 1px rgba(255,255,255, .4), inset 1px 0 rgba(255,255,255, .1), inset -1px 0 rgba(255,255,255, .1);
}
a.blue:active, a.blue.active { background-color: #0078a5; background-image: none; }
a.green {
color: #e8f0de;
border: solid 1px #538312;
background-color: #7db72f;
background-image: -webkit-gradient(linear, left top, left bottom, from(#7db72f), to(#4e7d0e));
background-image: -moz-linear-gradient(top, #7db72f, #4e7d0e);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7db72f', endColorstr='#4e7d0e');
text-shadow: 0 -1px 0 rgba(0, 0, 0, .2);
-webkit-box-shadow: inset 0 1px rgba(255,255,255, .4), inset 1px 0 rgba(255,255,255, .1), inset -1px 0 rgba(255,255,255, .1);
-moz-box-shadow: inset 0 1px rgba(255,255,255, .4), inset 1px 0 rgba(255,255,255, .1), inset -1px 0 rgba(255,255,255, .1);
box-shadow: inset 0 1px rgba(255,255,255, .4), inset 1px 0 rgba(255,255,255, .1), inset -1px 0 rgba(255,255,255, .1);
}
a.green:active, a.green.active { background-color: #4e7d0e; background-image: none; }
a.orange {
color: #fff;
border: solid 1px #da7c0c;
background-color: #faa51a;
background-image: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
background-image: -moz-linear-gradient(top, #faa51a, #f47a20);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
text-shadow: 0 -1px 0 rgba(0, 0, 0, .2);
-webkit-box-shadow: inset 0 1px rgba(255,255,255, .4), inset 1px 0 rgba(255,255,255, .1), inset -1px 0 rgba(255,255,255, .1);
-moz-box-shadow: inset 0 1px rgba(255,255,255, .4), inset 1px 0 rgba(255,255,255, .1), inset -1px 0 rgba(255,255,255, .1);
box-shadow: inset 0 1px rgba(255,255,255, .4), inset 1px 0 rgba(255,255,255, .1), inset -1px 0 rgba(255,255,255, .1);
}
a.orange:active, a.orange.active { background-color: #e27627; background-image: none; }
a.red {
color: #fff;
border: 1px solid #B50000;
background-color: #ff3019;
background-image: -moz-linear-gradient(top, #ff3019 0%, #BC0000 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff3019), color-stop(100%,#BC0000));
background-image: -webkit-linear-gradient(top, #ff3019 0%,#BC0000100%);
background-image: -o-linear-gradient(top, #ff3019 0%,#BC0000100%);
background-image: -ms-linear-gradient(top, #ff3019 0%,#BC0000100%);
background-image: linear-gradient(top, #ff3019 0%,#BC0000100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3019', endColorstr='#BC0000',GradientType=0 );
text-shadow: 0 -1px 0 rgba(0, 0, 0, .2);
-webkit-box-shadow: inset 0 1px rgba(255,255,255, .4), inset 1px 0 rgba(255,255,255, .1), inset -1px 0 rgba(255,255,255, .1);
-moz-box-shadow: inset 0 1px rgba(255,255,255, .4), inset 1px 0 rgba(255,255,255, .1), inset -1px 0 rgba(255,255,255, .1);
box-shadow: inset 0 1px rgba(255,255,255, .4), inset 1px 0 rgba(255,255,255, .1), inset -1px 0 rgba(255,255,255, .1);
}
a.red:active, a.red.active { background-color: #C40000; background-image: none; }
a.black {
color: #f4f4f4;
border: 1px solid #111;
background-color: #434343;
background-image: -moz-linear-gradient(top, #434343 0%, #1e1e1e 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#434343), color-stop(100%,#1e1e1e));
background-image: -webkit-linear-gradient(top, #434343 0%,#1e1e1e 100%);
background-image: -o-linear-gradient(top, #434343 0%,#1e1e1e 100%);
background-image: -ms-linear-gradient(top, #434343 0%,#1e1e1e 100%);
background-image: linear-gradient(top, #434343 0%,#1e1e1e 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#434343', endColorstr='#1e1e1e',GradientType=0 );
text-shadow: 0 -1px 0 rgba(0, 0, 0, .8);
-webkit-box-shadow: inset 0 1px rgba(255,255,255, .3), inset 1px 0 rgba(255,255,255, .1), inset -1px 0 rgba(255,255,255, .1);
-moz-box-shadow: inset 0 1px rgba(255,255,255, .3), inset 1px 0 rgba(255,255,255, .1), inset -1px 0 rgba(255,255,255, .1);
box-shadow: inset 0 1px rgba(255,255,255, .3), inset 1px 0 rgba(255,255,255, .1), inset -1px 0 rgba(255,255,255, .1);
}
a.black:active, a.black.active { background-color: #222; background-image: none; }
.buttonbar a.orange,
.buttonbar a.green,
.buttonbar a.blue { border-right: none; }
/* -------------- Materials -------------- */
a.button.glossy:after, a.button.glass:after, .buttonbar a.glossy:after {
content: "";
position: absolute;
width: 100%;
height: 50%;
top: 0;
left: 0%;
-webkit-border-radius: 0em 0em 3em 3em / 0; -moz-border-radius: 0em 0em 3em 3em / 0; border-radius: 0em 0em 3em 3em / 0;
background-image: -moz-linear-gradient(top, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.15) 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.05)), color-stop(100%,rgba(255,255,255,0.15)));
background-image: -webkit-linear-gradient(top, rgba(255,255,255,0.05) 0%,rgba(255,255,255,0.15) 100%);
background-image: -o-linear-gradient(top, rgba(255,255,255,0.05) 0%,rgba(255,255,255,0.15) 100%);
background-image: -ms-linear-gradient(top, rgba(255,255,255,0.05) 0%,rgba(255,255,255,0.15) 100%);
background-image: linear-gradient(top, rgba(255,255,255,0.05) 0%,rgba(255,255,255,0.15) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0dffffff', endColorstr='#26ffffff',GradientType=0 );
}
a.button.glossy:active:after, .buttonbar a.glossy:active:after
a.button.glass:active:after, .buttonbar a.glossy:active:after
a.button.disabled:after, .buttonbar a.glossy:active:after
a.button[disabled]:after, .buttonbar a.glossy:active:after {
opacity: .6;
}
a.button.icon.glossy:after,
a.button.icon.glass:after {
height: 75%;
}
/* -------------- Icons -------------- */
a.button.icon:before {
content: "";
position: absolute;
width: 30px;
height: 100%;
top: 0;
left: 0%;
-webkit-border-radius: 2em / 5px 3em 3em 5px; -moz-border-radius: 2em / 5px 3em 3em 5px; border-radius: 2em / 5px 3em 3em 5px;
background-image:
-webkit-gradient(linear, 50% 0, 50% 100%, from( rgba(0,0,0,.05) ), to( rgba(0,0,0,.15) )),
url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAArNJREFUeNp8Ul1IFFEUPvOzM8zoqruwrutPuWqrtmZrmpnYj0JFJYUgmD2JBKI9ZQ9BYGkUFSE9RIFEveRDFhQViD2kRmGBbfaQD667gQhOiq6rro47O7O3e4cVdl3pwMe99zvfOfeecw8F2IwUBUaIM5ECuIDXmuj5KwJ4ideNLcEaAULAZOJgHhKstcjp7Djb0HC8uLS0JBgM5gX8/jDm3VsCPnoxHcGbHVCfnpnp9C8vC4uLi4LJYnESbicte2xP/NU4KQxPIXtnSzVX4rDp3G+PxNWPjdnrCinAr44zttZBbU/Q810yZrlK7RCWZZ0jezElJavWEezBCW7G6mmSMBYRBPRFV2iSBKuhkA6yJxzxbdezGkpoYFdGcvj58rx0gOMFQe94wC9jzoO1XeQ85BJBryWMf+HjwbcwJDSDlyuDNHUBUtW/xCdvbqxXpmfnpWuqCj8/D3r883O90xkGX3ejCTxWAwYLnlQG2K1rvYZ94DU9AGAIRY3fmqhdRYJF901O/Fi9sXtkHBW8xqdX8U1MHAGowO87yRWdyXWVuXRi2k/lgozaUYq3BBfuiM5Dm97EmMB8HHgZtHDzk47Dd1BVp81oNgNBpOqK7XE75viZuksnWsohxFbDJhX7AnTUamRb9xdYik5V5B4i/QmI+fBpYUn3vlD7Yc17G3JEq3VFWwF2Pc2mMqtTQMujFNM0QDSPrjZWtgo8J/I8D2ZzMvh8s3C30a4nyH52BIrP2RJqHXkz7Ga1gSaROd+3y8BQIooZM0VRAI8xmVZIDubQf95LoGoRMNXTsPQuDFJgIQBzygQpoRBmvrjvPQ0mAW1QEMNvYsjAcKHR3vvfSAJfwbVqiCg82tt9GmlJaZK0vsYM1jzUfvV/IJ0wYORE1/9bG3cdj2o50JQb+pQezMz+E2AAolYY6sfO3PcAAAAASUVORK5CYII=);
background-repeat: repeat, no-repeat;
background-position: top center, center center;
-webkit-box-shadow:inset -1px 0 3px rgba(0, 0, 0, .1), 1px 0 0 rgba(255, 255, 255, .3);
-moz-box-shadow:inset -1px 0 3px rgba(0, 0, 0, .1), 1px 0 0 rgba(255, 255, 255, .3);
box-shadow:inset -1px 0 3px rgba(0, 0, 0, .1), 1px 0 0 rgba(255, 255, 255, .3);
}
a.button.icon {
padding-left: 40px;
}
a.button.icon.plus:before {
background-image:-webkit-gradient(linear, 50% 0, 50% 100%, from( rgba(0,0,0,.05) ), to( rgba(0,0,0,.15) )),url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAatJREFUeNqkU71KA0EQ/vaiib+lWCiordidpSg+QHwDBSt7n8DGhwhYCPoEgqCCINomARuLVIqgYKFG5f6z68xOzrvzYuXA3P7MzLffN7unjDH4jw3xx91bQXuxU4woNDjUX7VgsFOIH3/BnHgC0J65AzwFjDpZgoG7vb7lMsPDq6MiuK+B+kjGwFpCUjwK1DIQ3/dl0ssVh5TTM0UJP8aBgBKGleSGIWyP0oKYRm3KPSgYJ0Q0EpEgCASA2WmWZQY3kazBmjP9UhBFEbTWAgA0f9W2yHeG+vrd+tqGy5r5xNTT9erSqpvfdxwHN7fXOQZ0QhzH1oWArLsfXXieJ/KTGEZLcbVaTVn9ALTOLk9L+mYX5lxd0Xh6eGyVgspK6APwI8n3x9hmNpORJOuBo5ah8GcTc7dAHmkhNpYQlpHr47Hq2NspA1yEwHkoO/MVYLMmWJNarjEUQBzQw7rPvardFC8tZuOEwwB4p9PHqXgCdm738sUDJPB8mnwKj7qCTtJ527+XyAs6tOf2Bb6SP0OeGxRTVMp2h9nweWMoKS20l3+QT/vwqfZbgAEAUCrnlLQ+w4QAAAAASUVORK5CYII=);
background-image: -moz-linear-gradient(top, rgba(0,0,0,.05) 0%, rgba(0,0,0,.15) 100%),
url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAatJREFUeNqkU71KA0EQ/vaiib+lWCiordidpSg+QHwDBSt7n8DGhwhYCPoEgqCCINomARuLVIqgYKFG5f6z68xOzrvzYuXA3P7MzLffN7unjDH4jw3xx91bQXuxU4woNDjUX7VgsFOIH3/BnHgC0J65AzwFjDpZgoG7vb7lMsPDq6MiuK+B+kjGwFpCUjwK1DIQ3/dl0ssVh5TTM0UJP8aBgBKGleSGIWyP0oKYRm3KPSgYJ0Q0EpEgCASA2WmWZQY3kazBmjP9UhBFEbTWAgA0f9W2yHeG+vrd+tqGy5r5xNTT9erSqpvfdxwHN7fXOQZ0QhzH1oWArLsfXXieJ/KTGEZLcbVaTVn9ALTOLk9L+mYX5lxd0Xh6eGyVgspK6APwI8n3x9hmNpORJOuBo5ah8GcTc7dAHmkhNpYQlpHr47Hq2NspA1yEwHkoO/MVYLMmWJNarjEUQBzQw7rPvardFC8tZuOEwwB4p9PHqXgCdm738sUDJPB8mnwKj7qCTtJ527+XyAs6tOf2Bb6SP0OeGxRTVMp2h9nweWMoKS20l3+QT/vwqfZbgAEAUCrnlLQ+w4QAAAAASUVORK5CYII=);
}
a.button.icon.cross:before {
background-image: -webkit-gradient(linear, 50% 0, 50% 100%, from( rgba(0,0,0,.05) ), to( rgba(0,0,0,.15))), url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAcJJREFUeNqkUz1PAkEQfStggjESejU0GozlGqn8SGywkYIYY0IsaLCwIBTQUN5fMLGm8S8QSWwslVAYjAlUBEJDhCgWwp3nzN6eHqIVl8zN7rx5b+dm9oRt25jlmcOMj59f10JAkPcBcXIGWdECyqYn6TfGdZ9S9d4K4gQYx4WCtJzE+G/sKJudwpQABUGnGSf5vKzX60jmctL8SYzz+iCdls1mEzuplMIsLSC4iSUh1ClUlpHIZGStVkM0GsVNqVRlIJZIyG63i1AohMdKpUrZRQqXz4j7LWA7VSiR/WRSNhsNRRgOh+i02wgGg3hrtRSZelLmI6cExs7nKJGVtTX50uupMn0+H157PUWmZpYDXLoWUFPo6MC87jivx4MBFtxOWZYS11VipNdT98DWDVsPh2XQNLFIMdc4xpg9OZ3JMdIpRowSXVKt36+yuXvGxn+N0XS+3zj0kG+JSPEi261H5FCLmN9lUyNWyZ+Qag54eA6Hbfa8j1A88g+2qrlqCkKIZdovbAG7m8D5E3B5D9xR7IPsk/u7DextABd14OrBwd6J23YFligQ0IPwXE7lbedXUAPya5yHMiLuq5j1d/4SYAAj3NATBGE4PgAAAABJRU5ErkJggg==);
background-image: -moz-linear-gradient(top, rgba(0,0,0,.05) 0%, rgba(0,0,0,.15) 100%),
url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAcJJREFUeNqkUz1PAkEQfStggjESejU0GozlGqn8SGywkYIYY0IsaLCwIBTQUN5fMLGm8S8QSWwslVAYjAlUBEJDhCgWwp3nzN6eHqIVl8zN7rx5b+dm9oRt25jlmcOMj59f10JAkPcBcXIGWdECyqYn6TfGdZ9S9d4K4gQYx4WCtJzE+G/sKJudwpQABUGnGSf5vKzX60jmctL8SYzz+iCdls1mEzuplMIsLSC4iSUh1ClUlpHIZGStVkM0GsVNqVRlIJZIyG63i1AohMdKpUrZRQqXz4j7LWA7VSiR/WRSNhsNRRgOh+i02wgGg3hrtRSZelLmI6cExs7nKJGVtTX50uupMn0+H157PUWmZpYDXLoWUFPo6MC87jivx4MBFtxOWZYS11VipNdT98DWDVsPh2XQNLFIMdc4xpg9OZ3JMdIpRowSXVKt36+yuXvGxn+N0XS+3zj0kG+JSPEi261H5FCLmN9lUyNWyZ+Qag54eA6Hbfa8j1A88g+2qrlqCkKIZdovbAG7m8D5E3B5D9xR7IPsk/u7DextABd14OrBwd6J23YFligQ0IPwXE7lbedXUAPya5yHMiLuq5j1d/4SYAAj3NATBGE4PgAAAABJRU5ErkJggg==);
}
a.button.icon.document:before {
background-image: -webkit-gradient(linear, 50% 0, 50% 100%, from( rgba(0,0,0,.05) ), to( rgba(0,0,0,.15))), url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAgFJREFUeNp8k89LFGEYx7/zI0RsiCFU1DoG4VIH8bDFCrKdPHQIor/BUychCFRYOnQLIkjoZmyn6B4LiiDiQW3ayoQEL+Jo6ea6K607875vz/PurDuN2z7w7PvuPPP9vN/nfec1Hs7MgMMwjPs0DKBzLEgpt6UQUEpha3kZNk84aBycn52dq1Mx4JQSgmrNuud5mC8UJnktyh/87GYmA5NpURqSRUGgs16r4c/pKarVKiqVih7f53Jz9N490t5oWrIFiaMwGG3S7yXLapkOQ4QELpVKeJXPIzs8/PplPj9NlWcaIFsAk8WmxuACJJvN6nYcx8FHz/t97iCMO4gB2kHYiZ5Su60WqJBsIR5JCC9CmraARgumCUQrtYNYDYDZaiEGOHfQAWLRGP4HoPdA70PDzwXIk81pFE++YffWr0fOsftCyIBaoDNPOmBZO0jx6AtG745ic/fdtZLjU0kkWmAHdFRJyOPVKWwcFfl7RVmUoc6kIbvEGv1dt8u+j57e3n9OQSYgn/Y/wx27qlc5DA+ReXBniKZDix8WYG8vLeF6Oo1u17WjjdCiOGTkym1sFDwNCMaBrbff98Kuuk+3Yp2fdVP29afTORULAighpaKPR9HlUnTJ1MibjBrcSSnrqbvHGtbaTcDJwcHx5VTqeae7fJbyJ+RKrR8/1dcIEP4VYADvWB7N5+GLfwAAAABJRU5ErkJggg==);
background-image: -moz-linear-gradient(top, rgba(0,0,0,.05) 0%, rgba(0,0,0,.15) 100%), url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAgFJREFUeNp8k89LFGEYx7/zI0RsiCFU1DoG4VIH8bDFCrKdPHQIor/BUychCFRYOnQLIkjoZmyn6B4LiiDiQW3ayoQEL+Jo6ea6K607875vz/PurDuN2z7w7PvuPPP9vN/nfec1Hs7MgMMwjPs0DKBzLEgpt6UQUEpha3kZNk84aBycn52dq1Mx4JQSgmrNuud5mC8UJnktyh/87GYmA5NpURqSRUGgs16r4c/pKarVKiqVih7f53Jz9N490t5oWrIFiaMwGG3S7yXLapkOQ4QELpVKeJXPIzs8/PplPj9NlWcaIFsAk8WmxuACJJvN6nYcx8FHz/t97iCMO4gB2kHYiZ5Su60WqJBsIR5JCC9CmraARgumCUQrtYNYDYDZaiEGOHfQAWLRGP4HoPdA70PDzwXIk81pFE++YffWr0fOsftCyIBaoDNPOmBZO0jx6AtG745ic/fdtZLjU0kkWmAHdFRJyOPVKWwcFfl7RVmUoc6kIbvEGv1dt8u+j57e3n9OQSYgn/Y/wx27qlc5DA+ReXBniKZDix8WYG8vLeF6Oo1u17WjjdCiOGTkym1sFDwNCMaBrbff98Kuuk+3Yp2fdVP29afTORULAighpaKPR9HlUnTJ1MibjBrcSSnrqbvHGtbaTcDJwcHx5VTqeae7fJbyJ+RKrR8/1dcIEP4VYADvWB7N5+GLfwAAAABJRU5ErkJggg==);
}