/*******************************************************
 * product-features.css  (For Dotcom)
 *
 * Product pages have 0-4 feature boxes.
 * *****************************************************/

/**********************************************
    product-message div element
      -shared by all type product feature pages
      -sets the style for the top part of the page where 
       message and the product images and title goes
 **********************************************/
#product-message {
    width: 100%;

}

#product-message div.text {
   float: left;
   margin-top: 18px;
   padding: 0;
   width: 450px;
}

#product-message .message-image {
   float: left;
   margin: 16px 16px 16px 0px;
   padding: 0;
}

/**********************************************
    product-features
     - applies to all the feature boxes
 **********************************************/
#product-features .title {
    color: #3399cc;
    font-weight: bold;
    font-size: 14px;
    text-align: center;
    border-bottom: 2px solid #d9d2b6 !IMPORTANT;
    padding:  0 0 8px 0;
    display: block;  
}



/**********************************************
    set the default container size 
 **********************************************/
.product-1-features,
.product-2-features,
.product-3-features,
.product-4-features {
    float: left;
    border: 1px solid #d9d2b6;
    padding: 5px 8px 5px 8px;
    margin: 20px 0 0 4px;
    background-color: #faf6ea; 
    position: relative; 
    height: 160px;   
}

.product-1-features-image,
.product-2-features-image,
.product-3-features-image {
	text-align:center;
    margin:  8px 8px 8px 4px;
    padding: 8px 8px 8px 4px;
    display: block; 
}

.product-content-table tbody {
    background-color: #faf6ea;
    font-family: verdana, sans-serif;
    font-size: 10px;
    bordercolor: #faf6ea;
    bgcolor: #faf6ea;
}

.summary  {
    clear: both;
}


/**********************************************
    product-1-feature settings
 **********************************************/
.product-1-features {
    width: 95% !IMPORTANT;
    height: auto;
}


#product-1-features-container-one   {
    margin-right: 4px;
}

.product-features-button {
    clear: both;
    position: absolute;
    right: 22px;
    bottom: 8px;
} 

.product-1-features-button {
    clear: both;
    position: absolute;
    right: 22px;
    bottom: 8px;
}


/**********************************************
    product-2-feature settings
 **********************************************/
.product-2-features {
    width: 45% !IMPORTANT;
    min-height: 160px;   
}

.product-2-features-button {
    clear: both;
    position: absolute;
    right: 22px;
    bottom: 8px;
}

/**********************************************
    product-3-feature settings
 **********************************************/
.product-3-features  {
    width: 28% !IMPORTANT;
    height: 260px; 
}


#product-3-features-container-one,
#product-3-features-container-two,
#product-3-features-container-three {
    width: 28% !IMPORTANT;
    height: 260px;   
	margin-right: 10px;
}

.product-3-features-button {
    clear: both;
    position: absolute;
    right: 22px;
    bottom: 20px; 
}
.product-3-features-image {
    text-align: center;
    margin:  2px 0px 2px 0px;
    padding: 2px 0px 2px 0px;
    display: block; 
}


/**********************************************
    product-4-feature settings
 **********************************************/
.product-4-features {
    width: 21% !IMPORTANT;
    height: 240px;
}

#product-4-features-container-one,
#product-4-features-container-two,
#product-4-features-container-three,
#product-4-features-container-four {
    margin-right: 2px;
}



.product-4-features-button {
    clear: both;
    position: absolute;
    right: 22px;
    bottom: 8px;
}

.product-4-features-image {
    float: left;
    margin:  2px 0px 2px 0px;
    padding: 2px 0px 2px 0px;
    display: block; 
}