Restyle of basic buttons to be more tactile

src/elements/button.less

@@ -24,11 +24,11 @@
 
   outline: none;
   border: none;
-  background-color: #EBEBEB;
+  background-color: #FAFAFA;
   color: #808080;
 
   margin: 0em;
-  padding: 0.8em 1.5em;
+  padding: 0.8em 1.5em 0.875em;
 
   font-size: 1rem;
   text-transform: uppercase;
@@ -38,18 +38,15 @@
   text-align: center;
   text-decoration: none;
 
-  -webkit-border-radius: 0.2em;
-  -moz-border-radius: 0.2em;
-  border-radius: 0.2em;
+  background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.05));
+
+  -webkit-border-radius: 0.25em;
+  -moz-border-radius: 0.25em;
+  border-radius: 0.25em;
 
-  -webkit-box-shadow:
-    0em -0.2rem 0em rgba(0, 0, 0, 0.1) inset
-  ;
-  -moz-box-shadow:
-    0em -0.2rem 0em rgba(0, 0, 0, 0.1) inset
-  ;
   box-shadow:
-    0em -0.2rem 0em rgba(0, 0, 0, 0.1) inset
+    0px 0px 0px 1px rgba(0, 0, 0, 0.08) inset,
+    0px -0.133em 0px 0px rgba(0, 0, 0, 0.1) inset
   ;
 
   -webkit-user-select: none;
@@ -126,19 +123,17 @@
 .ui.primary.buttons .button,
 .ui.primary.button {
   background-color: #D95C5C;
-  color: #FFFFFF;
+  color: #FFFFFF !important;
 }
 .ui.primary.buttons .button:hover,
 .ui.primary.button:hover,
 .ui.primary.buttons .active.button,
 .ui.primary.button.active {
   background-color: #E75859;
-  color: #FFFFFF;
 }
 .ui.primary.buttons .button:active,
 .ui.primary.button:active {
   background-color: #D24B4C;
-  color: #FFFFFF;
 }
 
 /*-------------------
@@ -148,19 +143,17 @@
 .ui.secondary.buttons .button,
 .ui.secondary.button {
   background-color: #00B5AD;
-  color: #FFFFFF;
+  color: #FFFFFF !important;
 }
 .ui.secondary.buttons .button:hover,
 .ui.secondary.button:hover,
 .ui.secondary.buttons .active.button,
 .ui.secondary.button.active {
   background-color: #009A93;
-  color: #FFFFFF;
 }
 .ui.secondary.buttons .button:active,
 .ui.secondary.button:active {
   background-color: #00847E;
-  color: #FFFFFF;
 }
 
 /*-------------------
@@ -170,7 +163,7 @@
 /* Facebook */
 .ui.facebook.button {
   background-color: #3B579D;
-  color: #FFFFFF;
+  color: #FFFFFF !important;
 }
 .ui.facebook.button:hover {
   background-color: #3A59A9;
@@ -182,7 +175,7 @@
 /* Twitter */
 .ui.twitter.button {
   background-color: #4092CC;
-  color: #FFFFFF;
+  color: #FFFFFF !important;
 }
 .ui.twitter.button:hover {
   background-color: #399ADE;
@@ -194,7 +187,7 @@
 /* Google Plus */
 .ui.google.plus.button {
   background-color: #D34836;
-  color: #FFFFFF;
+  color: #FFFFFF !important;
 }
 .ui.google.plus.button:hover {
   background-color: #E3432E;
@@ -206,7 +199,7 @@
 /* Linked In */
 .ui.linkedin.button {
   background-color: #1F88BE;
-  color: #FFFFFF;
+  color: #FFFFFF !important;
 }
 .ui.linkedin.button:hover {
   background-color: #1394D6;
@@ -218,7 +211,7 @@
 /* YouTube */
 .ui.youtube.button {
   background-color: #CC181E;
-  color: #FFFFFF;
+  color: #FFFFFF !important;
 }
 .ui.youtube.button:hover {
   background-color: #DF0209;
@@ -230,7 +223,7 @@
 /* Instagram */
 .ui.instagram.button {
   background-color: #49769C;
-  color: #FFFFFF;
+  color: #FFFFFF !important;
 }
 .ui.instagram.button:hover {
   background-color: #4781B1;
@@ -243,7 +236,7 @@
 /* Pinterest */
 .ui.pinterest.button {
   background-color: #00ACED;
-  color: #FFFFFF;
+  color: #FFFFFF !important;
 }
 .ui.pinterest.button:hover {
   background-color: #00B9FF;
@@ -257,7 +250,7 @@
 ---------------*/
 
 .ui.button > .icon {
-  margin-right: 0.5em;
+  margin-right: 0.6em;
 
   line-height: 1;
 
@@ -281,7 +274,7 @@
 
 
 /*******************************
-             States
+            States
 *******************************/
 
 
@@ -291,26 +284,10 @@
 
 .ui.buttons .active.button,
 .ui.active.button {
-  opacity: 1 !important;
-  background-color: #B0B0B0;
-
-  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(0, 0, 0, 0)), to(rgba(255, 255, 255, 0.1)));
-  background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.1) 100%);
-  background-image: -moz-linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.1) 100%);
-  background-image: -o-linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.1) 100%);
-  background-image: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.1) 100%);
-
-  color: #FFFFFF;
-
-  -webkit-box-shadow:
-    0px 0px 0.3em 0px rgba(0, 0, 0, 0.3) inset
-  ;
-  -moz-box-shadow:
-    0px 0px 0.3em 0px rgba(0, 0, 0, 0.3) inset
-  ;
-  box-shadow:
-    0px 0px 0.3em 0px rgba(0, 0, 0, 0.3) inset
-  ;
+  background-color: #EAEAEA;
+  background-image: none;
+  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.05) inset !important;
+  color: rgba(0, 0, 0, 0.7);
 }
 
 
@@ -318,13 +295,14 @@
       Hover
 ---------------*/
 
-.ui.button:hover,
-.ui.active.button:hover {
-  opacity: 1 !important;
-  background-color: #A4A4A4;
-
-  color: #FFFFFF;
+.ui.button:hover {
+  background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.08));
+  color: rgba(0, 0, 0, 0.7);
+}
+.ui.button.active:hover {
+  background-image: none;
 }
+
 .ui.button:hover .icon,
 .ui.button.hover .icon {
   opacity: 0.85;
@@ -336,14 +314,9 @@
 
 .ui.button:active,
 .ui.active.button:active {
-  opacity: 1 !important;
-  background-color: #8C8C8C;
-
-  color: #FFFFFF;
-
-  -webkit-box-shadow: 0px 1px 0.2em 0px rgba(0, 0, 0, 0.3) inset;
-  -moz-box-shadow: 0px 1px 0.2em 0px rgba(0, 0, 0, 0.3) inset;
-  box-shadow: 0px 1px 0.2em 0px rgba(0, 0, 0, 0.3) inset;
+  background-color: #F1F1F1;
+  color: rgba(0, 0, 0, 0.7);
+  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.05) inset !important;
 }
 
 /*--------------
@@ -434,25 +407,16 @@
 .ui.buttons.mini .button,
 .ui.mini.button {
   font-size: 0.8125rem;
-  padding: 0.6em 0.8em;
-  -webkit-box-shadow: none;
-  -moz-box-shadow: none;
-  box-shadow: none;
+  padding: 0.6em 0.8em 0.73em;
 }
 .ui.tiny.buttons .button,
 .ui.tiny.button {
   font-size: 0.875rem;
-  padding: 0.6em 0.8em;
-  -webkit-box-shadow: none;
-  -moz-box-shadow: none;
-  box-shadow: none;
+  padding: 0.6em 0.8em 0.73em;
 }
 .ui.small.buttons .button,
 .ui.small.button {
   font-size: 0.875rem;
-  -webkit-box-shadow: none;
-  -moz-box-shadow: none;
-  box-shadow: none;
 }
 
 .ui.large.buttons .button,
@@ -502,9 +466,10 @@
 /*--------------
     Icon Only
 ---------------*/
+
 .ui.icon.buttons .button,
 .ui.icon.button {
-  padding: 0.8em;
+  padding: 0.8em 0.8em 0.875em;
 }
 .ui.icon.buttons .button > .icon,
 .ui.icon.button > .icon {
@@ -536,9 +501,9 @@
   -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
   box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
 
-  -webkit-border-radius: 0.2em;
-  -moz-border-radius: 0.2em;
-  border-radius: 0.2em;
+  -webkit-border-radius: 0.25em;
+  -moz-border-radius: 0.25em;
+  border-radius: 0.25em;
 }
 
 .ui.basic.buttons .button:hover,
@@ -573,7 +538,7 @@
 
 /* Basic Group */
 .ui.basic.buttons .button {
-  border: none;
+  border-left: 1px solid rgba(0, 0, 0, 0.1);
 
   -webkit-box-shadow: none;
   -moz-box-shadow: none;
@@ -585,10 +550,11 @@
   -moz-box-shadow: none;
   box-shadow: none;
 }
-.ui.basic.buttons .button.active {
-  -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
-  -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
-  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
+.ui.basic.buttons .button.active,
+.ui.basic.buttons .button.active:hover {
+  -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2) inset;
+  -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2) inset;
+  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2) inset;
 }
 
 
@@ -617,19 +583,19 @@
 
   width: 2.75em;
   height: 100%;
-  padding-top: 0.8em;
+  padding-top: 0.85em;
   background-color: rgba(0, 0, 0, 0.05);
   text-align: center;
 
-  -webkit-border-radius: 0.2em 0px 0px 0.2em;
-  -moz-border-radius: 0.2em 0px 0px 0.2em;
-  border-radius: 0.2em 0px 0px 0.2em;
+  -webkit-border-radius: 0.25em 0px 0px 0.25em;
+  -moz-border-radius: 0.25em 0px 0px 0.25em;
+  border-radius: 0.25em 0px 0px 0.25em;
 
   line-height: 1;
 
-  -webkit-box-shadow: -2px 0px 0px 0px rgba(0, 0, 0, 0.05) inset;
-  -moz-box-shadow: -2px 0px 0px 0px rgba(0, 0, 0, 0.05) inset;
-  box-shadow: -2px 0px 0px 0px rgba(0, 0, 0, 0.05) inset;
+  -webkit-box-shadow: -1px 0px 0px 0px rgba(0, 0, 0, 0.05) inset;
+  -moz-box-shadow: -1px 0px 0px 0px rgba(0, 0, 0, 0.05) inset;
+  box-shadow: -1px 0px 0px 0px rgba(0, 0, 0, 0.05) inset;
 }
 
 .ui.labeled.icon.buttons .button > .icon {
@@ -638,24 +604,24 @@
   border-radius: 0em;
 }
 .ui.labeled.icon.buttons .button:first-child > .icon {
-  border-top-left-radius: 0.2em;
-  border-bottom-left-radius: 0.2em;
+  border-top-left-radius: 0.25em;
+  border-bottom-left-radius: 0.25em;
 }
 .ui.labeled.icon.buttons .button:last-child > .icon {
-  border-top-right-radius: 0.2em;
-  border-bottom-right-radius: 0.2em;
+  border-top-right-radius: 0.25em;
+  border-bottom-right-radius: 0.25em;
 }
 .ui.vertical.labeled.icon.buttons .button:first-child > .icon {
   -webkit-border-radius: 0em;
   -moz-border-radius: 0em;
   border-radius: 0em;
-  border-top-left-radius: 0.2em;
+  border-top-left-radius: 0.25em;
 }
 .ui.vertical.labeled.icon.buttons .button:last-child > .icon {
   -webkit-border-radius: 0em;
   -moz-border-radius: 0em;
   border-radius: 0em;
-  border-bottom-left-radius: 0.2em;
+  border-bottom-left-radius: 0.25em;
 }
 
 .ui.right.labeled.icon.button {
@@ -672,13 +638,13 @@
   left: auto;
   right: 0em;
 
-  -webkit-border-radius: 0em 0.2em 0.2em 0em;
-  -moz-border-radius: 0em 0.2em 0.2em 0em;
-  border-radius: 0em 0.2em 0.2em 0em;
+  -webkit-border-radius: 0em 0.25em 0.25em 0em;
+  -moz-border-radius: 0em 0.25em 0.25em 0em;
+  border-radius: 0em 0.25em 0.25em 0em;
 
-  -webkit-box-shadow: 2px 0px 0px 0px rgba(0, 0, 0, 0.05) inset;
-  -moz-box-shadow: 2px 0px 0px 0px rgba(0, 0, 0, 0.05) inset;
-  box-shadow: 2px 0px 0px 0px rgba(0, 0, 0, 0.05) inset;
+  -webkit-box-shadow: 1px 0px 0px 0px rgba(0, 0, 0, 0.05) inset;
+  -moz-box-shadow: 1px 0px 0px 0px rgba(0, 0, 0, 0.05) inset;
+  box-shadow: 1px 0px 0px 0px rgba(0, 0, 0, 0.05) inset;
 }
 
 
@@ -692,14 +658,16 @@
 .ui.button.toggle.active {
   background-color: #5BBD72 !important;
   color: #FFFFFF !important;
+  box-shadow: none !important;
 }
 .ui.button.toggle.active:hover {
   background-color: #58CB73 !important;
   color: #FFFFFF !important;
+  box-shadow: none !important;
 }
 
 /*--------------
-     Bubbly
+    Circular
 ---------------*/
 
 .ui.circular.button {
@@ -721,14 +689,14 @@
 }
 .ui.attached.top.button {
 
-  -webkit-border-radius: 0.2em 0.2em 0em 0em;
-  -moz-border-radius: 0.2em 0.2em 0em 0em;
-  border-radius: 0.2em 0.2em 0em 0em;
+  -webkit-border-radius: 0.25em 0.25em 0em 0em;
+  -moz-border-radius: 0.25em 0.25em 0em 0em;
+  border-radius: 0.25em 0.25em 0em 0em;
 }
 .ui.attached.bottom.button {
-  -webkit-border-radius: 0em 0em 0.2em 0.2em;
-  -moz-border-radius: 0em 0em 0.2em 0.2em;
-  border-radius: 0em 0em 0.2em 0.2em;
+  -webkit-border-radius: 0em 0em 0.25em 0.25em;
+  -moz-border-radius: 0em 0em 0.25em 0.25em;
+  border-radius: 0em 0em 0.25em 0.25em;
 }
 .ui.attached.left.button {
   display: inline-block;
@@ -737,9 +705,9 @@
   padding-right: 0.75em;
   text-align: right;
 
-  -webkit-border-radius: 0.2em 0em 0em 0.2em;
-  -moz-border-radius: 0.2em 0em 0em 0.2em;
-  border-radius: 0.2em 0em 0em 0.2em;
+  -webkit-border-radius: 0.25em 0em 0em 0.25em;
+  -moz-border-radius: 0.25em 0em 0em 0.25em;
+  border-radius: 0.25em 0em 0em 0.25em;
 }
 .ui.attached.right.button {
   display: inline-block;
@@ -747,9 +715,9 @@
   padding-left: 0.75em;
   text-align: left;
 
-  -webkit-border-radius: 0em 0.2em 0.2em 0em;
-  -moz-border-radius: 0em 0.2em 0.2em 0em;
-  border-radius: 0em 0.2em 0.2em 0em;
+  -webkit-border-radius: 0em 0.25em 0.25em 0em;
+  -moz-border-radius: 0em 0.25em 0.25em 0em;
+  border-radius: 0em 0.25em 0.25em 0em;
 }
 
 
@@ -784,10 +752,6 @@
   font-weight: normal;
   text-align: center;
 
-  -moz-box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.2) inset;
-  -webkit-box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.2) inset;
-  box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.2) inset;
-
   -moz-border-radius: 500px;
   -webkit-border-radius: 500px;
   border-radius: 500px;
@@ -992,146 +956,122 @@
        Colors
 --------------------*/
 
-/*--- White ---*/
-.ui.white.buttons .button,
-.ui.white.button {
-  background-color: #FFFFFF;
-}
-
-.ui.white.buttons .button:hover,
-.ui.white.button:hover {
-  background-color: #A4A4A4;
-}
 
 /*--- Black ---*/
 .ui.black.buttons .button,
 .ui.black.button {
   background-color: #5C6166;
-  color: #FFFFFF;
+  color: #FFFFFF !important;
 }
 .ui.black.buttons .button:hover,
 .ui.black.button:hover {
   background-color: #4C4C4C;
-  color: #FFFFFF;
 }
 .ui.black.buttons .button:active,
 .ui.black.button:active {
   background-color: #333333;
-  color: #FFFFFF;
 }
 
 /*--- Green ---*/
 .ui.green.buttons .button,
 .ui.green.button {
   background-color: #5BBD72;
-  color: #FFFFFF;
+  color: #FFFFFF !important;
 }
 .ui.green.buttons .button:hover,
 .ui.green.button:hover,
 .ui.green.buttons .active.button,
 .ui.green.button.active {
   background-color: #58cb73;
-  color: #FFFFFF;
 }
 .ui.green.buttons .button:active,
 .ui.green.button:active {
   background-color: #4CB164;
-  color: #FFFFFF;
 }
 
 /*--- Red ---*/
 .ui.red.buttons .button,
 .ui.red.button {
   background-color: #D95C5C;
-  color: #FFFFFF;
+  color: #FFFFFF !important;
 }
 .ui.red.buttons .button:hover,
 .ui.red.button:hover,
 .ui.red.buttons .active.button,
 .ui.red.button.active {
   background-color: #E75859;
-  color: #FFFFFF;
 }
 .ui.red.buttons .button:active,
 .ui.red.button:active {
   background-color: #D24B4C;
-  color: #FFFFFF;
 }
 
 /*--- Orange ---*/
 .ui.orange.buttons .button,
 .ui.orange.button {
   background-color: #E96633;
-  color: #FFFFFF;
+  color: #FFFFFF !important;
 }
 .ui.orange.buttons .button:hover,
 .ui.orange.button:hover,
 .ui.orange.buttons .active.button,
 .ui.orange.button.active {
   background-color: #FF7038;
-  color: #FFFFFF;
 }
 .ui.orange.buttons .button:active,
 .ui.orange.button:active {
   background-color: #DA683B;
-  color: #FFFFFF;
 }
 
 /*--- Blue ---*/
 .ui.blue.buttons .button,
 .ui.blue.button {
   background-color: #6ECFF5;
-  color: #FFFFFF;
+  color: #FFFFFF !important;
 }
 .ui.blue.buttons .button:hover,
 .ui.blue.button:hover,
 .ui.blue.buttons .active.button,
 .ui.blue.button.active {
   background-color: #1AB8F3;
-  color: #FFFFFF;
 }
 .ui.blue.buttons .button:active,
 .ui.blue.button:active {
   background-color: #0AA5DF;
-  color: #FFFFFF;
 }
 
 /*--- Purple ---*/
 .ui.purple.buttons .button,
 .ui.purple.button {
   background-color: #564F8A;
-  color: #FFFFFF;
+  color: #FFFFFF !important;
 }
 .ui.purple.buttons .button:hover,
 .ui.purple.button:hover,
 .ui.purple.buttons .active.button,
 .ui.purple.button.active {
   background-color: #3E3773;
-  color: #FFFFFF;
 }
 .ui.purple.buttons .button:active,
 .ui.purple.button:active {
   background-color: #2E2860;
-  color: #FFFFFF;
 }
 
 /*--- Teal ---*/
 .ui.teal.buttons .button,
 .ui.teal.button {
   background-color: #00B5AD;
-  color: #FFFFFF;
+  color: #FFFFFF !important;
 }
 .ui.teal.buttons .button:hover,
 .ui.teal.button:hover,
 .ui.teal.buttons .active.button,
 .ui.teal.button.active {
   background-color: #009A93;
-  color: #FFFFFF;
 }
 .ui.teal.buttons .button:active,
 .ui.teal.button:active {
   background-color: #00847E;
-  color: #FFFFFF;
 }
 
 /*---------------
@@ -1141,19 +1081,17 @@
 .ui.positive.buttons .button,
 .ui.positive.button {
   background-color: #5BBD72 !important;
-  color: #FFFFFF;
+  color: #FFFFFF !important;
 }
 .ui.positive.buttons .button:hover,
 .ui.positive.button:hover,
 .ui.positive.buttons .active.button,
 .ui.positive.button.active {
   background-color: #58CB73 !important;
-  color: #FFFFFF;
 }
 .ui.positive.buttons .button:active,
 .ui.positive.button:active {
   background-color: #4CB164 !important;
-  color: #FFFFFF;
 }
 
 
@@ -1163,19 +1101,17 @@
 .ui.negative.buttons .button,
 .ui.negative.button {
   background-color: #D95C5C !important;
-  color: #FFFFFF;
+  color: #FFFFFF !important;
 }
 .ui.negative.buttons .button:hover,
 .ui.negative.button:hover,
 .ui.negative.buttons .active.button,
 .ui.negative.button.active {
   background-color: #E75859 !important;
-  color: #FFFFFF;
 }
 .ui.negative.buttons .button:active,
 .ui.negative.button:active {
   background-color: #D24B4C !important;
-  color: #FFFFFF;
 }
 
 
@@ -1203,16 +1139,15 @@
   -webkit-border-radius: 0em;
   -moz-border-radius: 0em;
   border-radius: 0em;
-  border-left: 1px solid rgba(0, 0, 0, 0.05);
 }
 .ui.buttons .button:first-child  {
   margin-left: 0em;
-  border-top-left-radius: 0.2em;
-  border-bottom-left-radius: 0.2em;
+  border-top-left-radius: 0.25em;
+  border-bottom-left-radius: 0.25em;
 }
 .ui.buttons .button:last-child {
-  border-top-right-radius: 0.2em;
-  border-bottom-right-radius: 0.2em;
+  border-top-right-radius: 0.25em;
+  border-bottom-right-radius: 0.25em;
 }
 
 /* Vertical  Style */
@@ -1222,9 +1157,7 @@
 .ui.vertical.buttons .button {
   display: block;
   float: none;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
-  border-left: none;
-  box-shadow: none;
+  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
 }
 .ui.vertical.buttons .button:first-child,
 .ui.vertical.buttons .mini.button:first-child,
@@ -1233,9 +1166,9 @@
 .ui.vertical.buttons .massive.button:first-child,
 .ui.vertical.buttons .huge.button:first-child {
   margin-top: 0px;
-  -moz-border-radius: 0.2em 0.2em 0px 0px;
-  -webkit-border-radius: 0.2em 0.2em 0px 0px;
-  border-radius: 0.2em 0.2em 0px 0px;
+  -moz-border-radius: 0.25em 0.25em 0px 0px;
+  -webkit-border-radius: 0.25em 0.25em 0px 0px;
+  border-radius: 0.25em 0.25em 0px 0px;
 }
 .ui.vertical.buttons .button:last-child,
 .ui.vertical.buttons .mini.button:last-child,
@@ -1244,7 +1177,7 @@
 .ui.vertical.buttons .massive.button:last-child,
 .ui.vertical.buttons .huge.button:last-child,
 .ui.vertical.buttons .gigantic.button:last-child {
-  -moz-border-radius: 0px 0px 0.2em 0.2em;
-  -webkit-border-radius: 0px 0px 0.2em 0.2em;
-  border-radius: 0px 0px 0.2em 0.2em;
+  -moz-border-radius: 0px 0px 0.25em 0.25em;
+  -webkit-border-radius: 0px 0px 0.25em 0.25em;
+  border-radius: 0px 0px 0.25em 0.25em;
 }