@charset "utf-8";
/* USAGE:

<div class="btn"><a href="#">Default Adjustable &amp; Liquid Button</a><span></span></div>
<div class="clear"></div>

<h4>Easily Adjustable Colors</h4>

<div class="btn btn_addtocart"><a href="#">Add to Cart</a><span></span></div>
<div class="clear"></div>
<h5>Background Color: Green</h5>

<div class="btn btn_checkout"><a href="#">Check Out</a><span></span></div>

<div class="clear"></div>
<h5>Background Color: Red</h5>

<div class="btn btn_learnmore"><a href="#">Learn More</a><span></span></div>
<div class="clear"></div>
<h5>Background Color: #ffdf00</h5>

<div class="btn btn_try"><a href="#">You Should Give it a Try</a><span></span></div>
<div class="clear"></div>

*/

/* ====================================
   2. Styles für die LIQUID CSS BUTTONS
   ==================================== */

.btn {
  float: left;
  clear: both;
  background: url(src/btn_left.png) no-repeat;
  padding: 0 0 0 10px;
  margin: 5px 0;
}

.btn a{
  float: left;
  height: 40px;
  background: url(src/btn_stretch.png) repeat-x left top;
  line-height: 40px;
  padding: 0 10px;
  color: #fff;
  font-size: 1.3em;
  text-decoration: none;
}

.btn a:hover {
  color: #000;
}

.btn span {
  background: url(src/btn_right.png) no-repeat;
  float: left;
  width: 10px;
  height: 40px;
}

.btn_addtocart  {
  background-color: green;
}
.btn_addtocart:hover {
  background-color: #00DF00;
}
.btn_checkout {
  background-color: red;
}
.btn_learnmore {
  background-color: #FFDF00;
}
.btn_try {
  background-color: #00AFFF;
}
.clear {
  clear: both;
}



/* ====================================
   3. Styles für die LIQUID CSS BUTTONS
   ==================================== */

/* Beispielbutton mit 3 Hintergrund-Grafiken */
/* [<-- LEFT */
.button {
  float: left;
  clear: both;
  background: url(src/bg_left.png) no-repeat;
  padding: 0 0 0 10px;
  margin: 5px 0;
}
/* == MIDDLE == */
.button a{
  float: left;
  height: 40px;
  background: url(src/bg_stretch.png) repeat-x left top;
  line-height: 40px;
  padding: 0 1px;
  color: #000;
  font-size: 1.3em;
  text-decoration: none;
}

/* RIGHT-->] */
.button span {
  background: url(src/bg_right.png) no-repeat;
/*  float: left; */
  width: 10px;
  height: 40px;
}

/* Beispielbuttons mit Hintergrundfarbe und Mouseover-Effekt */

.button_col {
	float: left;
	/*clear: both; */
	background: #CCC url(src/bg_left.png) no-repeat; /* 690 green */
	padding: 0 0 0 10px;
	margin: 14px 0px;
}

.button_col a{
  float: left;
  height: 40px;
  background: url(src/bg_stretch.png) repeat-x left top;
  line-height: 40px;
  padding: 0 1px;
  color: #fff;
  font-size: 1.3em;
  text-decoration: none;
}
.button_col a:hover {
  /*color: #690;*/
  color: #000;
}
.button_col span {
  background: url(src/bg_right.png) no-repeat;
  float: left;
  width: 10px;
  height: 40px;
}
.button_col:hover, .button_col a:hover, .button_col span:hover {
  background-color: #fff;
}

.button_green  {
  background-color: green;
}
.button_addtocart:hover {
  background-color: #00DF00;
}
.button_red:hover {
  background-color: red;
}
.button_yellow {
  background-color: #FFDF00;
}
.button_blue {
  background-color: #00AFFF;
}
.clear {
  clear: both;
}