﻿/**************************************************************
** NORMAL FORM
** Basic layout and styling for all data entry forms.
***************************************************************/
.mscForm {
    margin: 0;
    padding: 0;
}
.mscFormTable {
    margin: 0;
    padding: 0;
    border-collapse: collapse;
    border: none;
}
.mscFormTable td, .mscFormTable th {
    padding: 4px;
    vertical-align: top;
}
.mscFormLabel {
    vertical-align:top;
    padding-left:10px;
    text-align: right;
    font-weight: bold;
}
.mscFormLabel .mscLayoutTable td {
    padding: 0;
    padding-left: 4px;
    margin: 0;
}
.mscFormInput {
    font-weight: normal;
    text-align:left;
}
.mscFormInput .mscLayoutTable td {
    padding: 0;
    padding-right: 8px;
    margin: 0;
}
.mscFormInput .mscTips {
    font-size: 90%;
}

.mscFormValidation {
}
.mscForm .mscActions { text-align:center;
    margin-top: 5px;
}
.mscForm .mscInstructions {
    margin-top: 8px;
    margin-bottom: 8px;
		
}

.mscForm .mscSubNotes h6 {
    margin: 0;
    padding: 0;
    font-size: 110%;
}
.mscForm .mscValidationSummary, .mscForm .mscValidationSummary ul {
    margin-top: 3px;
    padding-top: 0;
    margin-bottom: 3px;
    padding-bottom: 0;
}
.mscForm .mscValidationSummary li {
    color: red;
}
.mscForm .mscValidator {
    color: red;
}
.mscForm .mscStatus {
    font-size: 120%;
    color: #ff0000;
}


/**************************************************************
** LOGIN FORM (Control)
***************************************************************/
.mscLoginForm .mscFormInput input {
    width: 200px;
}
.mscSmall .mscLoginForm .mscFormInput input {
    width: 140px;
}
.mscMicro .mscLoginForm .mscFormInput input {
    width: 100px;
}

/**************************************************************
** LOGIN FORM (Control)
***************************************************************/
.mscPreCheckoutForm .mscLoginForm, .mscPreCheckoutForm .mscRegistrationForm  {
    margin-left: 20px;
}


/**************************************************************
** CART ADDRESS FORM (Control)
***************************************************************/
.mscCartAddressForm .mscShipSame .mscActions {
    margin-top: 4px;
    margin-bottom: 15px;
}
.mscCartAddressForm .mscBilling {
    /*padding-top: 10px; */
    padding-bottom: 10px;
}
.mscCartAddressForm .mscShipping {
    padding-bottom: 10px;
}

/**************************************************************
** CART PAYMENT FORM (Control)
***************************************************************/
.mscCartPaymentForm  .mscPaymentSection {
    margin-bottom: 15px;
}
.mscCartPaymentForm  .mscPaymentForm {
    margin-left: 30px;
}
.mscCartPaymentForm .mscTerms {
    padding: 10px;
    margin-bottom: 10px;
    border: solid 1px #dcdcdc;
}

/**************************************************************
** CART SHIPPING FORM (Control)
***************************************************************/
.mscCartShippingForm .mscTerms {
    padding: 10px;
    margin-bottom: 10px;
    border: solid 1px #dcdcdc;
}

/**************************************************************
** REVIEW TABLE
** Use read only form like layouts
***************************************************************/
.mscReviewTable {
    border-collapse: collapse;
    width: 100%;
    margin: 0;
    padding: 0;
}
.mscReviewTable h5 {
    margin: 0;
    padding: 0;
}
.mscReviewTable td, .mscReviewTable th {
    padding: 3px;
    vertical-align:top;
}
.mscReviewTable th {
    font-weight: bold;
}
.mscReviewTable td.mscLabel, .mscReviewTable th.mscLabel {
    padding: 3px 4px 3px 0px;
}
.mscReviewTable .mscLabel {
    text-align: right;
    font-weight: bold;
}
.mscReviewTable .mscLayoutTable td {
    padding: 0;
    padding-left: 4px;
    margin: 0;
}
.mscReviewTable .mscValue {
    font-weight: normal;
}
.mscReviewTable td.mscValue {
    padding: 3px 0px 3px 4px;
}
.mscReviewTable .mscValue .mscLayoutTable td {
    padding: 0;
    padding-right: 8px;
    margin: 0;
}

/**************************************************************
** ORDER DETAIL VIEW
***************************************************************/
.mscOrderDetailView .mscOrderHeaderBar {
    width: 100%;
    margin-bottom: 6px;
    clear: both;
    font-weight: bold;
}
.mscOrderDetailView h5 {
    margin: 0;
    margin-top: 10px;
    margin-bottom: 4px;
    padding: 0;
    padding-bottom: 4px;
    font-size: 110%;
    border-bottom: solid 1px darkgray;
}
.mscOrderDetailView .mscOrderHeaderBar .mscOrderType {
    float: left;
}
.mscOrderDetailView .mscOrderHeaderBar .mscOrderDate {
    float: right;
}
.mscOrderDetailView .mscReviewTable .mscLabel {
    width: 70px;
    text-align: right;
}
.mscOrderDetailView .mscBilling { margin-right: 10px; }
.mscOrderDetailView .mscShipping { margin-left: 10px;  }

.mscOrderDetailView .mscItems  h5 { border: none; padding: 0; }
.mscOrderDetailView .mscItems .mscGridTable { border-bottom: solid 1px black;width:687px } /* Total separator line */
.mscOrderDetailView .mscItems .mscGridHeaderRow { background-color: #dcdcdc;  }
.mscOrderDetailView .mscItems .mscGridHeaderCell { padding: 2px 10px;  }
.mscOrderDetailView .mscItems .mscGridCell { padding: 4px 10px;  }

.mscOrderDetailView .mscItems .mscItemCode {
    text-align: left;
}
.mscOrderDetailView .mscItems .mscItemDescription {
    text-align: left;
}
.mscOrderDetailView .mscItems .mscItemQuantity {
    width: 75px;
    text-align: right;
}
.mscOrderDetailView .mscItems .mscItemUnitPrice {
    width: 75px;
    text-align: right;
}
.mscOrderDetailView .mscItems .mscItemExtPrice {
    width: 75px;
    text-align: right;
}
.mscOrderDetailView .mscItems .mscNotes h5 {
    margin: 4px 0;
    padding: 0;
}
.mscOrderDetailView .mscOrderTotals {
    border-collapse: collapse;
    width: 100%;
    margin: 0;
    padding: 0;
}
.mscOrderDetailView .mscOrderTotals {
    width: 200px;
}
.mscOrderDetailView .mscOrderTotals .mscLabel { 
    padding: 2px 10px;
    font-weight: bold;
    text-align: right;
}
.mscOrderDetailView .mscOrderTotals .mscValue { 
    padding: 2px 10px;
    width: 75px;
    text-align: right;
    background-color: #dcdcdc;
}
.mscOrderDetailView .mscOrderTotals .mscShipping td { 
    padding: 2px 10px 6px;
}
.mscOrderDetailView .mscOrderTotals .mscTotal td { 
    border-top: solid 1px #000000;
    padding: 6px 10px 8px;
    font-weight: bold;
    font-size: 120%;
}


/**************************************************************
** PAGER
***************************************************************/
.mscPager { clear: both; }
.mscPager .mscFound { font-size: 85%; font-weight: bold; }
.mscPager .mscPage { vertical-align : middle; display: block; float: left; }
.mscPager .mscNav { vertical-align : middle; display: block; float: left; }
.mscPager .mscSeparator { vertical-align : middle; display: block; float: left; padding-left: 3px; padding-right: 3px; }
.mscPager .mscSelected { font-weight: bold; }
.mscPager a { }
.mscPager a:visited { }
.mscPager a:hover { }
.mscPager.mscTop {  }
.mscPager.mscBottom { border-top: solid 1px black; }



/**************************************************************
** GALLERY
** ------------------------------------------------------------
** Change to the following styles to float the description 
** beside the photo (instead of below).
** ------------------------------------------------------------
** .mscGalleryItem .mscPhoto { float: left; margin-right: 10px; display: block; }
** .mscGalleryItem .mscDetails { float: left; width: 150px; }
***************************************************************/
.mscGalleryContents { clear: both; }
.mscGalleryTable {     
    border-collapse: collapse;
    width: 100%;
    margin: 0;
    padding: 0;
}
.mscGalleryCell { vertical-align: top; text-align:center; }
.mscGalleryContents .mscGalleryItem { font-size: 90%; }
.mscGalleryContents .mscGalleryItem .mscPhoto { margin-right: 10px; display: block; }
.mscGalleryContents .mscGalleryItem .mscDetails { margin: 0; padding: 0; }
.mscGalleryContents .mscGalleryItem .mscDetails .mscItemCode { font-size: 90%;   }
.mscGalleryContents .mscGalleryItem .mscDetails .mscCategoryTitle { font-size:12px; font-weight: bold; margin-top: 2px; margin-bottom: 2px;  }
.mscGalleryContents .mscGalleryItem .mscDetails .mscItemTitle { font-size:12px; font-weight:bold; margin-top: 2px; margin-bottom: 1px;  }
.mscGalleryContents .mscGalleryItem .mscDetails .mscItemReadMore { font-weight: bold; margin-top: 3px; margin-bottom: 1px; }
.mscGalleryContents .mscGalleryItem .mscDetails .mscItemRetailPrice { font-size: 12px; color: #ff0000; text-decoration: line-through;
}
.mscGalleryItem .mscDetails .mscItemPrice { font-size: 130%;  }
.mscGalleryItem .mscDetails .mscBuyContents { margin-top: 0px; }

.mscCategoryList .mscGalleryCell { vertical-align: middle ; padding: 6px 0px; }
.mscCategoryList .mscGalleryContents .mscGalleryItem .mscPhoto { width: 50px;  }

.mscResultsView .mscGalleryCell { vertical-align: top; padding: 10px; }
.mscResultsView .mscGalleryContents .mscGalleryItem .mscPhoto { height: 130px; }
.mscResultsView .mscGalleryContents .mscGalleryItem .mscPhoto table { width: 100%; }
.mscResultsView .mscGalleryContents .mscGalleryItem .mscPhoto td { height: 130px; }
.mscResultsView .mscGalleryContents .mscGalleryItem .mscPhoto img { max-height: 125px; }



/**************************************************************
** CART VIEW
***************************************************************/
.mscCartView {}
.mscCartView .mscInstructions { margin-bottom: 10px; font-style:italic; }
.mscCartView .mscGridRow  { padding-top:5px; }
.mscCartView .mscPhoto {}
.mscCartView .mscCompoundCodeTable {}
.mscCartView .mscItemCode {}
.mscCartView .mscItemDescription { white-space:nowrap; }
.mscCartView .mscItemQuantity { text-align: right; white-space: nowrap; }
.mscCartView .mscItemQuantity input { width: 20px; text-align: right; }
.mscCartView .mscItemOrigPrice { text-align: right; white-space: nowrap; color: Red; text-decoration: line-through; }
.mscCartView .mscItemUnitPrice { text-align: right; }
.mscCartView .mscItemExtPrice { text-align: right; white-space: nowrap; }
.mscCartView .mscGridFooterRow .mscItemQuantity { font-weight: bold; text-align: right; width: 100% }
.mscCartView .mscGridFooterRow .mscItemExtPrice { font-weight: bold; }

/**************************************************************
** CART REVIEW FORM
***************************************************************/
.mscCartReviewForm {
}

.mscCartReviewForm h5 {
    margin: 0;
    margin-top: 15px;
    margin-bottom: 4px;
    padding: 0;
    padding-bottom: 4px;
    font-size: 14px;
    border-bottom: solid 1px darkgray;
}
.mscCartReviewForm .mscBillingAddress {
    padding-right: 16px;
}
.mscCartReviewForm .mscPaymentInfo, .mscCartReviewForm .mscShippingInfo {
    padding-top: 10px;
}
.mscCartReviewForm .mscPromotion {
    font-style: italic;
}
.mscCartReviewForm .mscOrderSummary {
    border-top: solid 1px #000000;
}

.mscCartReviewForm .mscOrderSummary .mscOrderTotalDivider td {
    padding-left: 6px;
    padding-top: 6px;
    font-weight: bold;
}

.mscCartReviewForm .mscOrderSummary .mscOrderSubTotal td {
    padding-top: 6px;
}
.mscCartReviewForm .mscOrderSummary td {
    padding-right: 6px;
    font-weight: bold;
}
.mscCartReviewForm .mscOrderSummary td.mscLabel {
    width: 150px;
}
.mscCartReviewForm .mscOrderSummary td.mscValue {
    background-color: #d3d3d3;
    width: 60px;
}
.mscCartReviewForm .mscOrderSummary .mscOrderShipping td {
    padding-bottom: 6px;
}
.mscCartReviewForm .mscOrderSummary .mscOrderTotal td {
    padding-top: 6px;
    padding-bottom: 6px;
    border-top: solid 1px #000000;
    font-size: 120%;
}

/**************************************************************
** CART FINISH VIEW
***************************************************************/
.mscCartFinishView .mscStatus { color: green; font-size: 110%; font-weight: bold; margin-top: 10px; margin-bottom: 10px; }


/**************************************************************
** LAYOUT TABLE
** Use for horizontal or vertical layouts
** Typically a horizontal usage would have one row and multiple columns
***************************************************************/
.mscLayoutTable {
    border-collapse: collapse;
    width: 100%;
    margin: 0;
    padding: 0;
    clear: both;
}
.mscTopAlign td {
    vertical-align: top;
}

/**************************************************************
** ITEM DETAIL VIEW (Control)
***************************************************************/
.mscItemDetailView .mscItemHeader {
    margin-bottom: 10px;
}
.mscItemDetailView .mscItemTitle h1 {
    margin: 0;
    padding: 0;
    color:#999999;
    vertical-align: baseline;
}
.mscItemDetailView .mscItemHeader .mscItemCode {
    text-align: right;
    font-size: 12px;
    font-weight: bold;
    vertical-align: baseline;
}
.mscItemDetailView .mscPhotoPanel {

    text-align: center;
    
}
.mscItemDetailView .mscDetails .mscItemDescription {
    margin-top: 10px;
    margin-bottom: 20px;
}
.mscItemDetailView .mscItemAddForm {

    margin-bottom: 10px;
}

.mscItemDetailView .mscHasImages .mscDetails {

}
.mscItemDetailView .mscHasImages .mscItemAddForm {

}

.mscItemDetailView .mscPriceTable {
    border-collapse: collapse;
    margin-top: 10px;
    margin-bottom: 10px;
}
.mscItemDetailView .mscPriceTable td.mscLabel {
    font-weight: bold;
    font-size: 125%;
    padding-right: 10px;
    text-align: right;
}
.mscItemDetailView .mscPriceTable td.mscValue {
    font-weight: bold;
    font-size: 125%
}
.mscItemDetailView .mscPriceTable tr.mscItemRetailPrice td.mscValue {
    color: #ff0000;
    text-decoration: line-through;
}

/**************************************************************
** ITEM SUB DETAIL VIEW (Control)
***************************************************************/
.mscItemSubDetailView {
}
.mscItemSubDetailView .mscPhoto {
    float: left;
    text-align: left;
    width: 310px;
}
.mscItemSubDetailView .mscDetails {
    margin-left: 100px;
    float: none;
}
.mscItemSubDetailView .mscSubDetails {
    float: left;
    padding-bottom: 10px;
}
.mscItemSubDetailView .mscItemTitle {
    padding-top: 6px;
    font-weight: bold;
    color:#999999;
    font-size: 120%;
}
.mscItemSubDetailView .mscItemDescription {
    width: 290px;
    margin-bottom:10px;
}


.mscItemSubDetailView .mscPriceTable {
    border-collapse: collapse;
    margin: 0;
}
.mscItemSubDetailView .mscPriceTable td.mscLabel {
    font-weight: bold;
    font-size: 110%;
    padding-right: 10px;
    text-align: right;
}
.mscItemSubDetailView .mscPriceTable td.mscValue {
    font-weight: bold;
    font-size: 110%
}
.mscItemSubDetailView .mscPriceTable tr.mscItemRetailPrice td.mscValue {
    color: #ff0000;
    text-decoration: line-through;
}
.mscItemSubDetailView .mscBuyContents {
    float: left;
    padding-top: 6px;
    margin: 0px;
    margin-top: 4px;
}

/**************************************************************
** ITEM ATTRIBUTES VIEW (Control)
***************************************************************/
.mscItemAttributesView table {
     margin:0px;
    border:1px;
    padding: 6px;
}
.mscItemAttributesView td {
    padding-top: 4px; border:1px; border-collapse:collapse; border-color:#FF0000;
    padding-bottom: 4px;
    padding-left: 6px; margin:0px;
    padding-right: 6px;
}
.mscItemAttributesView .mscLabel {
    font-weight: bold; border:1px; border-collapse:collapse; border-color:#FF0000;
    text-align: left;
    padding-left: 3px;
}
.mscItemAttributesView .mscValue {
    padding-right: 15px; border:1px;  border-collapse:collapse;border-color:#FF0000;
}

/**************************************************************
** ITEM ASSOCIATION VIEW (Control)
***************************************************************/
.mscItemAssociationView .mscAssociationGridTable {
    border-collapse: collapse;
    border: none;
}
.mscItemAssociationView .mscAssociationGridTable .mscGridHeaderCell {
    padding: 4px;
    border: none;
}
.mscItemAssociationView .mscAssociationGridTable td {
    padding: 4px;
    border: none;
}

/**************************************************************
** ITEM ADD FORM (Control)
***************************************************************/
.mscItemAddForm ol { margin-left: 20px; padding-left: 0px; }
.mscItemAddForm ol.mscSingleStep { list-style-type: none; margin: 0; padding: 0; }
.mscItemAddForm ol li { font-weight: bold; }
.mscItemAddForm ol li div.mscVariationsSection { font-weight: normal; }
.mscItemAddForm ol li div.mscQuantitySection { font-weight: normal; }
.mscItemAddForm ol li .mscLabel { text-align: right; }
.mscItemAddForm ol li span.mscLabel { display: block; float: right; }
.mscItemAddForm h5 { padding-bottom: 2px; }
.mscItemAddForm .mscVariationsSection { margin-bottom: 14px; }
.mscItemAddForm .mscQuantitySection { margin-bottom: 14px; }
.mscItemAddForm .mscQuantity { width: 50px; }
.mscItemAddForm .mscQuantitySection .mscBuy { 
    float: inherit;
    margin: inherit;
    padding-top: 0;

    margin-left: 4px; 
    vertical-align: top; 
}

/**************************************************************
** CHANGE PASSWORD FORM (Control)
***************************************************************/
.mscFormTablePassword { border:1px solid #dddddd; }
.mscFormTablePassword .mscFormLabel { font-weight:bold; white-space:nowrap; width:190px }

