/********************************************************/
/*                                                      */
/* styles in use by programmatically-generated widgets  */
/*                                                      */
/********************************************************/

/* general button */

.yostoro-button {
  padding: 2px 3px 5px 3px;
  margin: 0 0 5px 0;
  border-top: 1px solid #d9ddee; 
  border-right: 1px solid #aeaeae; 
  border-bottom: 1px solid #aeaeae; 
  border-left: 1px solid #d9ddee; 
  background: url(/images/webkit/buttons_bg.gif) repeat-x;
  background-color: #fff;
  font-size: 14px;
  color: #333333;
  display: inline;
}

/* extra span wrapper around buttons */

.yostoro-button-span {
  display: inline;
}

/* buttons to manipulate cart quantoty */

#yostoro-button-cart-add {
  margin: 0;
}

#yostoro-button-cart-update{
  margin: 0;
}

#yostoro-button-cart-delete {
  margin: 0;
}

#yostoro-button-message {
  margin: 0;
}

/* small buttons */

#yostoro-button-small {
  margin: 5px;
  font-size: 11px;
}

/* buttons for checkout process */

#yostoro-button-checkout-continue {
  margin: 0;
}

#yostoro-button-checkout-confirm{
  font-size: 18px;
  padding: 7px;
}

/* general text input controls */

.yostoro-input {
  padding: 3px 3px 6px 3px;
  margin: 0;
  border-top: 1px solid #aeaeae; 
  border-right: 1px solid #d9ddee; 
  border-bottom: 1px solid #d9ddee; 
  border-left: 1px solid #aeaeae; 
  font-size: 12px;
}

/* input control quantity to add to cart */

#yostoro-input-cart-add {
  margin: 0;
}

/* tables to show product lists and order details */
.yostoro-table {
  width: 100%;
}

#yostoro-table-cart {
  width: 100%;
}

#yostoro-table-prods-list {
  width: 100%;
}

#yostoro-table-checkout {
  width: 100%;
}

#yostoro-table-prods-data  {
  width: 100%;
}

#yostoro-table-prods-data-sep-description {
  border-bottom: 1px #666 dotted;
}


/**********************************************************/
/*                                                        */
/* these legacy classes need to be renamed with yostoro-  */
/*                                                        */
/**********************************************************/


.content {
  font-family: Tahoma, Verdana, Arial, Georgia, Times New Roman;
  color: #333;
  font-size: 12px;
  line-height: 140%;
  margin: 4px;
}

.contentcaption {
  font-family: Tahoma, Verdana, Arial, Georgia, Times New Roman;
  color: #333;
  font-size: 12px;
  padding: 4px;
  margin: 4px;
  font-weight: bold;
}

.contentnarrow, .content-narrow {
  font-family: Tahoma, Verdana, Arial, Georgia, Times New Roman;
  color: #333;
  font-size: 12px;
  margin: 4px;
}

.price {
  font-weight: bold;
}

.price-old {
  text-decoration: line-through;
}

.price-new {
  font-weight: bold;
}

.availability-stock {
  color: #006600;
  font-size: 12px;
}

.availability-order {
  color: #DD0000;
  font-size: 12px;
}

.availability-none {
  color: #FF0000;
  font-size: 12px;
}

.sep {
  border-bottom: 1px dotted #CCCCBB;
}

hr {
  border: 0;
  color: #aaaaaa;
  height: 1px;
  border-bottom: 1px dotted #CCCCBB;
}

h1 {
  margin: 0px;
  padding: 0px;
  font-family: verdana, arial; 
  font-size: 16px; 
  color: #333;
}

h2 {
  margin: 0px;
  padding: 0px;
  font-family: verdana, arial; 
  font-size: 15px; 
  color: #333;
}

h2 a:link { text-decoration: none; font-size: 18px; font-weight: normal; color: #666; }
h2 a:visited { text-decoration: none; font-size: 18px; font-weight: normal; color: #666; }
h2 a:hover { text-decoration: none; font-size: 18px; font-weight: normal; color: #666; }
h2 a:active { text-decoration: underline; font-size: 18px; font-weight: normal; color: #666; }


/* these styles used to output products variants list in front-end */

.tbl-head-variants {
    color: #000000;
    background-color: #fff;
    border-color: #eaeaea #999999 #999999 #eaeaea;
    font-weight: normal;
    border-width: 1px;
    border-style: solid;
    font-family: Tahoma, Verdana, Arial, Georgia, Times New Roman;
    font-size: 12px;
}

.tbl-data-variants {
    background-color: #fff;
     /* border-color: #ffffff #d1d9e8 #d1d9e8 #ffffff; */
    border-color: #eaeaea;
    padding: 5px 5px 5px 10px;
    border-width: 1px;
    border-style: solid;
    font-family: Tahoma, Verdana, Arial, Georgia, Times New Roman;
    font-size: 12px;
}


/**********************************************************/
/*                                                        */
/* These are in use mostly by backend and has to be moved */
/* to a separate file                                     */
/*                                                        */
/**********************************************************/

.btn-norm {
  border-style: outset;
  border-width: 2px;
  border-color: #aaaaaa;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
}

.btn-ok {
  border-style: outset;
  border-width: 2px;
  border-color: #00dd00;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
}

.btn-warn {
  border-style: outset;
  border-width: 2px;
  border-color: #dd0000;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
}

.btn-search {
  vertical-align: middle;
}

.field-search {
  vertical-align: middle;
}

.tbl-head {
    color: #000000;
    background-color: #fff;
    border-color: #eaeaea #999999 #999999 #eaeaea;
    font-weight: normal;
    font-size: 11px;
    border-width: 1px;
    border-style: solid;
}

.tbl-data {
    background-color: #fafafa;
    border-color: #f0f0f0 #f0f0f0 #f0f0f0 #f0f0f0;
    padding: 2px;
    font-size: 12px;
    border-width: 1px;
    border-style: solid;
}

.products-data {
    vertical-align: top;
    background-color: #fff;
    border-color: #fff;
    border-bottom: 1px dotted #ccc;
    padding-top: 11px;
    padding-bottom: 11px;
    font-size: 12px;
    border-width: 1px;
    border-style: solid;
    text-align: left;
    margin: 0;
}

.tbl-prefix {
    background-color: #fafafa;
    border-color: #f0f0f0 #f0f0f0 #f0f0f0 #f0f0f0;
    padding: 2px;
    font-size: 12px;
    border-width: 1px;
    border-style: solid;
}

.tbl-msg {
   border-width: 1px;
   border-color: #88A4D7;
   border-style: solid;
   font-size: 12px;
   background-color: #E2E7F0;
}

.tbl-msg-data {
   vertical-align: middle;
   padding: 5px 5px 5px 5px;
}

.tbl-msg-warn {
   border-width: 1px;
   border-color: #D7A488;
   border-style: solid;
   background-color: #F0E7E2;
}

.tbl-msg-warn-data {
   vertical-align: middle;
   padding: 5px 5px 5px 5px;
}

.tbl-msg-important {
   border-width: 1px;
   border-color: #999999;
   border-style: solid;
   background-color: #eaeaea;
}

.tbl-msg-important-data {
   vertical-align: middle;
   padding: 5px 5px 5px 5px;
}

.section-header {
    background-color: #f0f0f0;
    border-color: #ffffff #d1d9e8 #d1d9e8 #ffffff;
    padding: 2px;
    font-weight: bold;
    border-width: 1px;
    border-style: solid;
}

.section-panel {
    background-color: #f0f0f3;
    border-color: #ffffff #c1c9d8 #c1c9d8 #ffffff;
    padding: 6px;
    font-weight: bold;
    font-size: 80%;
    border-width: 1px;
    border-style: solid;
}

select, input, textarea{
    font: 90% Tahoma, Arial, Helvetica, sans-serif;
}


