How do I set "Add to Cart form" css globally using Commerce Kickstart as basis? My goal is to borrow the Add to Cart form style from Commerce Kickstart on a site where:


Panels: Node Templates controls the Product Displays
Subtheme of Commerce Kickstart sets the CSS / template


Questions:


How do I find the CSS controlling the standard Commerce Kickstart Add to Cart form?
How do I use that CSS to control all "Add to Cart" widgets on the site? 
Do I need to call out each Product Display type? Or is there a way to call it globally?
Related question: Why is the parent theme CSS being called? (There seems to be two levels of the Commerce Kickstart theme. One in .../themes/contrib and one in .../themes/commerce_kickstart_theme What's the difference? Are there two to share between the admin theme and site theme?


I am new to css, so am using "Inspect Element" to figure out how styles are applying to a given item. However, I can't figure out how to repurpose the css from Commerce Kickstart to apply to all "Add to Cart" widgets that are sprinkled throughout the site and control on a product-type basis through several Panels: Node Templates.

**These css callouts seem to be coming from the Kickstart theme, instead of the subtheme. I have enabled the subtheme and see changes I am making in the subtheme work, so I'm lost on why it is calling from the parent theme.
.../profiles/commerce_kickstart/themes/contrib/omega_kickstart/css/omega-kickstart-alpha-default-normal.css

From Inspect Element, I see that Commerce Kickstart shows: 

For the attribute label:

.node-product-type .field-name-field-product form.commerce-add-to-cart label {
    float: left;
}


For the attribute drop-down:

element.style {
    width: 44.7778px;
    margin-right: 17px;
    text-align: right;
}
My solution is not elegant, but it got the job done:


Using inspect element, identified css that dictating styling of the "Add to Cart" form elements that I wanted to keep. This css was buried in the subtheme_style.css file associated with "Product" only: .node-product-type. 
Copied css to start of subtheme_style.css file
Removed the references to .node-product-type. This set all the select widget fields and all the "Add to cart" buttons to the desired style/look. 


This seems like an odd way to go, but also means that I don't have to differentiate among all product display types, as I build out panel displays that are unique to each one. What would you have done differently?

This is the css that I repurposed and generalized by deleting the reference to .node-product-type:

.field-name-field-product form.commerce-add-to-cart label {
  float: left; 
  margin-right: 5px;
  width: 45%;}

.field-type-commerce-product-reference form.commerce-add-to-cart .form-submit {
      background-color: #9E4934; /*CG Add to Cart button*/
      background-image: url("../images/bg_add_to_cart.png");
      background-position: 90% 50%;
      /* LTR */
      background-repeat: no-repeat;
      border: 0;
      -moz-border-radius: 8px;
      -webkit-border-radius: 8px;
      -khtml-border-radius: 8px;
      border-radius: 8px;
      color: #ffffff;
      font-family: "Open Sans", sans-serif;
      font-size: 17px;
      font-weight: 400;
      float: right;
      margin-top: 40px;
      margin-left: 5px;
      /* LTR */
      padding: 5px 50px 5px 10px;
      /* LTR */ }

.field-type-commerce-product-reference form.commerce-add-to-cart .form-submit:hover {
        cursor: pointer; }