/* classes: button, buttonblue, buttonyellow, buttonblack */
/* if you want to link to another page using a button use this: [ onclick="document.location='/mymagnanimouspage.hrt'" ] */

.button {
   border: 1px solid #1a1a1a;
   background: #79e0d2;
  
   background: linear-gradient(to bottom, rgb(246,246,246) 0%,rgb(223,223,223) 21%,rgb(191,191,191) 49%,rgb(224,224,224) 80%,rgb(246,246,246) 100%);

    
   padding: 2px 4px;
   border-radius: 3px;
   box-shadow: inset rgba(255,255,255,0.4) 0 1px 0;
   text-shadow: #ffffff80 0 1px 0;
   color: #000000;
   text-decoration: none;
   vertical-align: middle;
   outline: none;
   }

.button:hover {
   border: 1px solid #000000;
   text-shadow: #ffffff80 0 1px 0;
   background: #666666;
   background: linear-gradient(to bottom, rgb(242,245,246) 0%,rgb(149,155,155) 37%,rgb(219,219,219) 100%);
   color: #000000;
   cursor: pointer;
   }

.button:active {
   text-shadow: #ffffff80 0 1px 0;
   border: 1px solid #2e2e2e;

   background: #d9d9d9;
   background: linear-gradient(to bottom, rgb(93,94,94) 0%,rgb(149,155,155) 37%,rgb(219,219,219) 100%);

   color: #000000;
   }
   

.buttonblue {
   border: 1px solid #1a1a1a;
   background: #79e0d2;
  
   background: linear-gradient(to bottom, rgb(100,189,248) 0%,rgb(97,172,233) 10%,rgb(85,149,213) 27%,rgb(79,150,226) 50%,rgb(28,122,216) 51%,rgb(89,159,234) 83%,rgb(145,184,234) 100%);

    
   padding: 2px 4px;
   border-radius: 3px;
   box-shadow: inset rgba(255,255,255,0.4) 0 1px 0;
   text-shadow: #ffffff80 0 1px 0;
   color: #000000;
   text-decoration: none;
   vertical-align: middle;
   outline: none;
   }

.buttonblue:hover {
   border: 1px solid #000000;
   text-shadow: #ffffff80 0 1px 0;
   background: #666666;
   background: linear-gradient(to bottom, rgb(100,189,248) 0%,rgb(97,172,233) 10%,rgb(85,149,213) 25%,rgb(80,149,222) 37%,rgb(77,151,231) 50%,rgb(49,134,219) 51%,rgb(89,188,237) 83%,rgb(104,228,250) 100%);
   color: #000000;
   cursor: pointer;
   }

.buttonblue:active {
   text-shadow: #ffffff80 0 1px 0;
   border: 1px solid #2e2e2e;

   background: #d9d9d9;
   background: linear-gradient(to bottom, rgb(0,69,155) 0%,rgb(43,136,217) 50%,rgb(26,103,191) 51%,rgb(156,197,229) 100%);

   color: #000000;
   }

.buttonyellow {
   border: 1px solid #1a1a1a;
   background: #79e0d2;
  
   background: linear-gradient(to bottom, rgb(241,231,103) 0%,rgb(254,182,69) 100%);
    
   padding: 2px 4px;
   border-radius: 3px;
   box-shadow: inset rgba(255,255,255,0.4) 0 1px 0;
   text-shadow: #ffffff80 0 1px 0;
   color: #000000;
   text-decoration: none;
   vertical-align: middle;
   outline: none;
   }

.buttonyellow:hover {
   border: 1px solid #000000;
   text-shadow: #ffffff80 0 1px 0;
   background: #666666;
   background: linear-gradient(to bottom, rgb(241,231,103) 0%,rgb(229,125,27) 100%);
   color: #000000;
   cursor: pointer;
   }

.buttonyellow:active {
   text-shadow: #ffffff80 0 1px 0;
   border: 1px solid #2e2e2e;

   background: #d9d9d9;
   background: linear-gradient(to bottom, rgb(254,182,69) 0%,rgb(241,231,103) 100%);

   color: #000000;
   }
   
.buttonblack {
   border: 1px solid #1a1a1a;
   background: #79e0d2;
  
   background: linear-gradient(to bottom, rgb(125,126,125) 0%,rgb(14,14,14) 100%);
    
   padding: 2px 4px;
   border-radius: 3px;
   box-shadow: inset rgba(255,255,255,0.4) 0 1px 0;
   text-shadow: #00000080 0 1px 0;
   color: #FFFFFF;
   text-decoration: none;
   vertical-align: middle;
   outline: none;
   }

.buttonblack:hover {
   border: 1px solid #000000;
   text-shadow: #00000080 0 1px 0;
   background: #666666;
   background: linear-gradient(to bottom, rgb(91,91,91) 0%,rgb(0,0,0) 100%);
   color: #FFFFFF;
   cursor: pointer;
   }

.buttonblack:active {
   text-shadow: #00000080 0 1px 0;
   border: 1px solid #2e2e2e;

   background: #d9d9d9;
   background: linear-gradient(to bottom, rgb(0,0,0) 0%,rgb(104,104,104) 100%);

   color: #FFFFFF;
   }