/* ----- Flat Button Styles ----- */

.action-button
{
   padding: 5px 20px;
   margin: 5px;
   border-radius: 3px;
   font-family: 'Open Sans', sans-serif;
   font-size: 11px;
   color: #FFF;
   text-decoration: none;
   white-space: nowrap;
   display: inline-block; /* This allows tooltips to work which are sometimes useful. If it messes with a buttons look then give the button an inline style of display: inline */
   cursor: pointer;
}

.action-button-small
{
   margin: 2px;
   border-radius: 3px;
   font-family: 'Open Sans', sans-serif;
   font-size: 11px;
   color: #FFF;
   text-decoration: none;
   white-space: nowrap;
   padding: 3px 10px;
   display: inline-block; /* This allows tooltips to work which are sometimes useful. If it messes with a buttons look then give the button an inline style of display: inline */
   line-height: 1.2em;
   cursor: pointer;
}

.blue
{
   background-color: #3498DB;
   border-bottom: 2px solid #2980B9;
   text-shadow: 0px -1px #2980B9;
}

.red
{
   background-color: #E74C3C;
   border-bottom: 2px solid #BD3E31;
   text-shadow: 0px -1px #BD3E31;
}

.green
{
   background-color: #82BF56;
   border-bottom: 2px solid #669644;
   text-shadow: 0px -1px #669644;
}

.yellow
{
   background-color: #F2CF66;
   border-bottom: 2px solid #D1B358;
   text-shadow: 0px -1px #D1B358;
}

.grey
{
   background-color: #78909C;
   border-bottom: 2px solid #546E7A;
   text-shadow: 0px -1px #546E7A;
}

.action-button:active
{
   position: relative;
   border-bottom: 2px solid transparent;
   top: 1px;
}

.action-button-small:active
{
   position: relative;
   border-bottom: 2px solid transparent;
   top: 1px;
}

.action-button.waiting {
   cursor: wait;
}

.action-button.disabled.grey {
   opacity: 0.4;
}

.action-button.disabled.grey:active {
   top: 0; /* This prevents the active effect */
   border-bottom: 2px solid #546E7A;
}

.action-button.disabled.grey:hover {
   cursor: default;
}

.btn-small {
   font-size: 9px;
}

.btn-large {
   font-size: 14px;
}

.btn-xlarge {
   font-size: 20px;
}

