/**
* Controls.css -- encapsulated CSS for various control surfaces (buttons, tabs, etc)...
**/

/**
* Awesome buttons -- zurb inspired
**/
a.button,
.button,
button {
  background: #222 url(../images/alert-overlay.png) repeat-x;
  display: inline-block;
  padding: 5px 10px 6px;
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  line-height: 1;
  border: 0px;
  border-bottom: 1px solid #222;
  position: relative;
  cursor: pointer;
  font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
  font-size: 1em;

  -webkit-border-radius:  5px;
  -moz-border-radius:     5px;
  border-radius:          5px;

  -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
  -moz-box-shadow:    0 1px 3px rgba(0,0,0,0.5);
  box-shadow:         0 1px 3px rgba(0,0,0,0.5);

  text-shadow: 0 -1px 1px #222;
}

/* fuck you, firefox */
input[type=submit].button {
  position: relative;
  top: 1px;
  padding: 2.5px 10px 3px;
  line-height: 1 !important; /* <= (yuno) listen to me? */
}

.wpsc_make_purchase input[type=submit].button {
  top: 0px;
}

input[type=submit].button.inline,
.button.inline {
  vertical-align: top;
  top: 0.5em;
}

.button + .button {
  margin-left: 0.5em;
}

.button:hover   { background-color: #111; color: #fff; }

a.button.inline,
.button.inline {
  padding: 2px 5px;
}

/* Colors ---------- */
.green.button,
.green.button:visited   { background-color: #91bd09; }
.green.button:hover     { background-color: #749a02; }
.blue.button,
.blue.button:visited    { background-color: #2daebf; }
.blue.button:hover      { background-color: #007d9a; }
.red.button,
.red.button:visited     { background-color: #e33100; }
.red.button:hover       { background-color: #872300; }
.orange.button,
.orange.button:visited  { background-color: #ff5c00; }
.orange.button:hover    { background-color: #d45500; }
.yellow.button,
.yellow.button:visited  { background-color: #ffb515; }
.yellow.button:hover    { background-color: #fc9200; }

/* Stark (Text) Buttons -- for use with @font-face especially */
.stark_button {
  background-color: white;
  background-color: rgba(255,255,255,0.5);
  display: inline-block;
  padding: 0;
  color: #222;
  text-decoration: none;
  font-weight: normal;
  line-height: 1;
  border: none;
  position: relative;
  cursor: pointer;
}

/* Stark (Text) Button Styles ----------------------------- */
.stark_button:hover  { color: #444fff; }
.stark_button:active { color: #000bbb; }
.stark_button.remove:hover  { color: #d00; }
.stark_button.remove:active { color: #900; }
.stark_button.positive:hover  { color: #00d; }
.stark_button.positive:active { color: #009; }

/* Ribbon --------------------- */
.ribbon {
  background-color: #a00;
  overflow: hidden;
  
  position: absolute;
  left: -2em;
  top: 0.5em;
  
  -moz-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  
  text-shadow: 0 0 0.5em #444;
}
.ribbon a {
  border: 1px solid #faa;
  color: #fff;
  display: block;
  font-weight: bold;
  font-size: 81.25%;
  margin: 0.05em 0;
  padding: 0.5em 3.5em;
  text-align: center;
  text-decoration: none;
}

.curious {
  font-style: normal;
  cursor: help;
}

/* -----------------------------------------------------------------------
 Tabs Plugin 0.2 for the Blueprint CSS Framework
----------------------------------------------------------------------- */
.tabs {
  border-bottom:1px solid #ccc;
  height:auto;
  margin:0 0 .75em 0;
  overflow:auto;
  padding-left:0;
}
* html .tabs { height:1%; /* fixing IE 6 */ }
.tabs li {
  border:1px solid #ccc;
  border-bottom:none;
  float:left;
  line-height:1.5;
  list-style-type:none;
  margin:0 .25em 0 0;
  padding:0;
}
.tabs li a {
  background:#ddd;
  border:1px solid #eee;
  border-bottom:none;
  color:#222;
  cursor:pointer;
  display:block;
  float:left;
  font-weight:bold;
  padding:.15em .33em .25em .33em;
}
.tabs li a.selected {
  background:#666;
  border:1px solid #666;
  border-bottom:none;
  color:#fff;
  cursor:default;
}
.tabs li a, .tabs li a:focus, .tabs li a:hover {
  text-decoration:none;
}
.tabs li a:focus, .tabs li a:hover {
  color:#555;
  outline:none;
}
.tabs li a.selected:focus, .tabs li a.selected:hover {
  color:#fafafa;
}
.tabs li.label {
  border:none;
  font-weight:bold;
  line-height:1.5;
  margin-right:.5em;
  padding:.25em .33em .25em .33em;
}