/*
 * goBalto Button Styles
 *
 * Test page located at: /prototype/buttons
 *
 * Browser Compatibility: FF3, IE6, IE7, IE8, Safari
 */

/*
 * Medium Orange Button style for a link
 *
 * From: http://www.oscaralexander.com/tutorials/how-to-make-sexy-buttons-with-css.html
 */

a.gbButton {
  background: transparent url("/img/buttons/bttn_body_orange_rt.gif") no-repeat scroll top right;
  display: block;
  float: left;
  height: 28px;
  line-height: 28px;
  padding: 0 10px 0 0;
  margin: 0;
  text-decoration: none;

  color: white;
  font-size: 14px;
  font-weight: bold;
}

a.gbButton span {
  background: transparent url("/img/buttons/bttn_body_orange_lft.gif") no-repeat scroll top left;
  display: block;
  line-height: 20px;
  padding: 4px 0 4px 10px;
  margin: 0;

  color: white;
  font-size: 14px;
  font-weight: bold;
}

a.gbButton:hover {
  text-decoration: none;
  background-position: bottom right;
}

a.gbButton:hover span {
  background-position: bottom left;
}

/* Active class applied via jQuery.  See core.js */
a.gbButton.active {
  outline: none;
  background-position: right bottom;
}

a.gbButton.active span {
  background-position: left bottom;
  padding: 5px 0 3px 10px;
}

/*
 * Medium Orange Button style for <button>
 *
 * Note that IE6 doesn't honor :hover on anything but <a> tags, so some jQuery
 * support is needed (see core.js).
 *
 * From: http://www.filamentgroup.com/lab/update_styling_the_button_element_with_css_sliding_doors_now_with_image_spr/
 */

button {
  position: relative;
  border: 0;
  padding: 0;
  cursor: pointer;
  overflow: visible; /* removes extra side padding in IE */
}

button::-moz-focus-inner {
  border: none;  /* overrides extra padding in Firefox */
  margin-left: -2px;
}

button span {
  position: relative;
  display: block;
  white-space: nowrap;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
  /* Safari and Google Chrome only - fix margins */
  button span {
    margin-top: -1px;
  }
}

/* OPTIONAL BUTTON STYLES for applying custom look and feel: */
button.gbButton {
  margin: 0;
  padding: 0 8px 0 0;
  font-size: 14px;
  text-align: center;
  background: transparent url("/img/buttons/bttn_body_orange_rt.gif") no-repeat right top;
}

button.gbButton span {
  padding: 5px 0 3px 10px;
  margin: 0;
  height: 20px;
  background: transparent url("/img/buttons/bttn_body_orange_lft.gif") no-repeat left top;
  color: white;
  font-weight: bold;
  font-size: 14px;
}

/* IE6 sucks. */
* html button.gbButton {
  height: 27px;
}

* html button.gbButton span {
  line-height: 18px;
}

/* Hover class applied via jQuery for IE6.  See core.js */
button.gbButton:hover, button.gbButton.hover {
  background-position: right -29px;
}

button.gbButton:hover span, button.gbButton.hover span {
  background-position: 0 -29px;
}

/* Active class applied via jQuery.  See core.js */
button.gbButton.active {
  outline: none;
}

button.gbButton.active span {
  padding: 6px 0 2px 10px;
}


/*
 * Medium Grey Button Style for both <a> and <button> elements
 */

a.gbButton.grey, button.gbButton.grey {
  background-image: url("/img/buttons/bttn_body_grey_rt.gif") !important;
}

a.gbButton.grey span, button.gbButton.grey span {
  background-image: url("/img/buttons/bttn_body_grey_lft.gif") !important;
}


/*
 * Medium Orange "go" Button
 */

span.gbGoButton {
  display: block;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent url(/img/buttons/bttn_go_white.png) no-repeat 0 0;
  width: 31px;
  height: 28px;
  overflow: hidden;
  position: relative;
}

span.gbGoButton input {
  position: relative;
  float: none;
  border: 0;
  margin: 0;
  padding: 5px 4px;
  height: 19px;
  width: 23px;
}

span.gbGoButton:hover {
  background-position: 0 -29px;
}

span.gbGoButton input:active {
  padding: 6px 4px 4px 4px;
}


/*
 * Small Orange Button Style (no graphics)
 *
 * Used for small input area (eg. commenting on a user's profile)
 */

a.gbSmallButton, button.gbSmallButton {
  background-color: #EF781E;
  border: 1px solid #444;
  padding: 2px 5px 3px;
  text-align: center;
  font-size: 13px;
  font-weight: bold;
  color: white;
  text-decoration: none;
  margin: 0;
}

a.gbSmallButton.grey, button.gbSmallButton.grey {
  background-color: #787d83;
  padding: 2px 10px 3px;
  border-color: #808183;
  font-weight: normal;
}

a.gbSmallButton.grey:hover, button.gbSmallButton.grey.hover {
  background-color: #888;
  text-decoration: none;
}

a.gbSmallButton:visited, a.gbSmallButton:link {
  color: white;
}

a.gbSmallButton:hover, button.gbSmallButton.hover {
  background-color: #ff9348;
  text-decoration: none;
}

a.gbSmallButton:active, button.gbSmallButton.active {
  color: #ccc;
}

* html a.gbSmallButton {
  padding: 3px 5px;
  line-height: 24px;
}



/*
 * Large Orange Button Style - for links only
 */

a.gbLargeButton {
  background: transparent url("/img/buttons/large_button_rt.gif") no-repeat scroll top right;
  display: block;
  float: left;
  height: 48px;
  line-height: 48px;
  margin: 0;
  padding: 0 10px 0 0;
  text-decoration: none;

  color: white;
  font-size: 14px;
  font-weight: bold;
}

a.gbLargeButton.blue {
  background: transparent url("/img/buttons/large_button_blue_bg_rt.gif") no-repeat scroll top right;
}

a.gbLargeButton span {
  background: transparent url("/img/buttons/large_button_lft.gif") no-repeat scroll top left;
  display: block;
  line-height: 40px;
  padding: 4px 0 4px 10px;
  margin: 0;

  color: white;
  font-size: 22px;
  font-weight: bold;
}

a.gbLargeButton.blue span {
  background: transparent url("/img/buttons/large_button_blue_bg_lft.gif") no-repeat scroll top left;
}

a.gbLargeButton:hover {
  text-decoration: none;
  background-position: bottom right;
}

a.gbLargeButton:hover span {
  background-position: bottom left;
}

/* Active class applied via jQuery.  See core.js */
a.gbLargeButton.active {
  outline: none;
  background-position: bottom right;
}

a.gbLargeButton.active span {
  background-position: bottom left;
  padding: 6px 0 2px 10px;
}


/*
 * Button Containers/Sets
 */

.buttons .gbButton, .buttons .gbLargeButton .buttons a {
  margin-right: 10px;
  float: left;
}

.buttons.right {
  float: right;
}

.buttons.right .gbButton, .buttons.right .gbLargeButton {
  margin-left: 10px;
  margin-right: 0;
}

.buttons:after {
  content: ".";
  display: block;
  height: 1px;
  clear: both;
  visibility: hidden;
}