/* Start custom button CSS here http://stopdesign.com/archive/2009/02/04/recreating-the-button.html */

.btn {
  display: inline-block;
  background: none;
  margin: 0;
  padding: 0px;
  border-width: 0;
  overflow: visible;
  font-size: 11px !important;
  line-height: 20px !important;
  text-decoration: none !important;
  color: #333;
}
button.btn {
  padding:3px 0;
}
* html button.btn {
  padding-bottom: 1px;
}
/* Immediately below is a temporary hack to serve the 
   following margin values only to Gecko browsers
   Gecko browsers add an extra 3px of left/right 
   padding to button elements which can't be overriden.
   Thus, we use -3px of left/right margin to overcome this. */
html:not([lang*=""]) button.btn {
  margin:0 -3px;
}
.btn span {
  background:#ddd url('/orkideer/grafik/btn/btn-bg.gif') repeat-x 0 0 !important;
  margin:0 !important;
  padding:2px 0 !important;
  border-left: 1px solid #333 !important;
  border-right: 1px solid #222 !important;
  border-top: none !important;
  border-bottom: none !important;
  display: inline !important;
  color: #FFF;
}
.btn.blue span {
  background-image: url('/orkideer/grafik/btn/btn-bg-blue.gif') !important;
}
.btn.white {
  color: #333;
}
.btn.white span {
  background-image: url('/orkideer/grafik/btn/btn-bg-white.gif') !important;
  border-left-color: #BBB !important;
  border-right-color: #AAA !important;
  color: #333;
}
.btn.green span {
  background-image: url('/orkideer/grafik/btn/btn-bg-green.gif') !important;
  border-left-color: #669900 !important;
  border-right-color: #4D7300 !important;
  color: #FFF;
}
.btn.red span {
  color: #A6352F;
}

* html .btn span {
  padding-top:0 !important;
}
.btn span span {
  position:relative !important;
  padding:2px .4em !important;
  border-width:0 !important;
  border-top:1px solid #333 !important;
  border-bottom:1px solid #222 !important;
  border-left: none !important:
  border-right: none !important;
  display: inline  !important;
}
.btn.white span span {
  border-top-color: #BBB !important;
  border-bottom-color: #AAA !important;
}
.btn.green span span {
  border-top-color: #669900 !important;
  border-bottom-color: #4D7300 !important;
}


/* pill classes only needed if using pill style buttons ( LEFT | CENTER | RIGHT ) */
button.pill-l span {
  border-right-width:0;
  }
button.pill-l span span {
  border-right:1px solid #333;
  }
button.pill-c span {
  border-right-style:none;
  border-left-color:#fff;
  }
button.pill-c span span {
  border-right:1px solid #333;
  }
button.pill-r span {
  border-left-color:#fff;
  }

/* only needed if implementing separate hover/focus/active state for buttons */
.btn:hover span,
.btn:hover span span,
.btn:focus span,
.btn:focus span span {
  cursor: pointer !important; /* important for any clickable/pressable element */
  text-decoration: none !important;
  /* border-color: #0597F5 !important; */
  /* color: #0597F5 !important; */
}
.btn:active span {
  background-position: 0 -400px !important;
  outline: none !important;
}
.btn:focus, .btn:active {
  outline: none !important; /* doesn't seem to be respected for <button>, only <a> */
}

/* use if one button should be the 'primary' button */
.primary,
.selected {
  color: #000 !important;
}
.primary span,
.selected span {
  background-position: 0 -400px !important;
}

a.btn:hover,
a.btn:active,
a.btn:focus {
  color: #999;
}
a.btn:link,
a.btn:visited {
  color: #FFF;
}
a.btn.white:link,
a.btn.white:visited {
  color: #333;
}
a.btn.green:link,
a.btn.green:visited {
  color: #FFF;
  letter-spacing: 1px;
}
.btn.red,
.btn.red {
  color: #A6352F;
}
a.btn.red:link,
a.btn.red:visited {
  color: #A6352F;
}
a.btn.popup span span {
  background: url('/orkideer/grafik/btn/btn-bg-green-popup.png') no-repeat right center !important;
  padding-right: 22px !important;
}


.popupContainer {
  position: relative;
}
.popupList {
  border: 1px solid white;
  border-top-color: #669900;
  border-bottom-color: #4D7300;
  border-left-color: #669900;
  border-right-color: #4D7300;
  display: none;

  border-radius: 2px;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  position: absolute;
  top: 0px;
  right: 0;
}
.popupList.visible {
  display: block;
}
.popupList a {
  background: url('/orkideer/grafik/btn/btn-bg-green.gif');
  display: block;
  font-size: 11px;
  line-height: 20px;
  text-decoration: none;
  padding: 0 5px;
  letter-spacing: 1px;
}
.popupList a.selected {
  color: white;
}
.popupList a.active {
  color: white;
  text-decoration: underline;
}
.popupList a.inactive {
  color: #333;
  cursor: default;
}
.btn.right {
  float: right;
  margin-right: 5px;
}