﻿/*     This CSS will be for all my Mobile setup stuff   */

/*  Small Mobile Devices      */
@media only screen and (max-width: 479px) {
   .desktop {display: none !important;}
   .tablet {display: none !important;}
   .desktopAndTablet {display: none !important;}   


   /* general formatting */
   h3 {font-size:.9em!important; line-height: 1em!important;}
   h4 {font-size:.7em;}
   h1 {font-size:1.2em;}
   .ui-title {padding: .5em 0 .2em !important;}

   /* frame formatting */
    #VertRightRailHero {right: -4px !important;}
    #BottomCornerRightHero {right: 0px !important;}
    #HomeMenuArea {position:absolute !important;}
    #BottomLeftHeroCorner {bottom: -30% !important;}
    #HeroBorderBottom {right: 56px !important; left: 56px !important;}
    #VertLeftRailHero {bottom: -6px !important;} 
    #HeroBorderTop {left:57px !important;}
    .site-body {margin-top: 62px;}
    .ui-widget .ui-widget {font-size: 0.8em;}
    #home-most-viewed-wrapper, #CartAccordion {padding-right:0px; padding-left:0px;}


   /* home page */
   .most-viewed .home-item-li:nth-child(2+1) {clear:left !important;}
   .most-viewed .home-item-li {	width:50%;}
   .home-hero-wrap {width: 100%;}
   .text-overlay-wrapper {display:none;}
   .MobileHomePageTitle {display:inline-block !important; font-size: .7em; line-height:100%;}
    #nav {display:none;}    

   /*PDP Pages*/
    .options-wrap-outer .option-item {width:100%;}
    .product-detail-wrap {flex-flow: column nowrap; -webkit-flex-direction: column;   }
        .product-detail-wrap .col {min-width:100%;}
       .product-detail-wrap #LearnMoreArea {display:none;}
 
    .ThumbNailImage {max-width:23.6%;}
    .product-detail-wrap > .col {padding: 5px 0}
    .BodyContentTextPage {padding: 0 10px}
    .related-products-wrap {padding: 0 10px 18px;}
     .CarouselDiv {margin-right: 12px; margin-left: 12px; margin-bottom: 12px !important;}
     .CarouselDiv h4 {margin-top:0px;}
     .options-wrap-outer .option-item {padding-right:3px;}
     .product-details .description li { width: 95%;}
     .product-details #videoOuterWrapper {margin-left:0; margin-right:0px;}

    /* Cat Grid */
     #CategoryGridPageItemWrapper .CatagoryGridItem {max-width:50%;}
     .CGP-Hero-Outer {padding: 12px;}
     .CGP-Hero-Inner-LeftCol {max-width:87%; left:28px;}
     #CatGridLearnMoreArea {display:none;}

      /* Check Out */
    #OrderSummary .OutsideWrapper, #CartMainDisplay .OutsideWrapper{font-size:.8em !important; line-height: 100%!important;}
    #BillingAndShippingPartialView > form, #BillingAndShippingPartialView label {font-size:.9em !important;}

    #CartAccordion .ui-accordion-content {padding: 0 0 10px !important;}
    #ui-accordion-accordion-panel-0, #OrderSummary > div {padding: 0px 2px !important;}
    .productDescription {padding-left:10px !important;}
    .UserBillingAndPymentView .ShippingFormOutsideWrapper {width:100%;}
    

    #CartAccordion {padding-left: 5px !important; padding-right: 5px !important; padding-bottom: 8px !important; padding-top: 2px !important;}
    #ui-accordion-accordion-panel-1 .CartLoadLearnMore {display:none;}

    #ShippingInformationArea label, .PaymentBoxes label {display:none !important;}
    #BillingAndShippingPartialView .ui-input-text, #BillingAndShippingPartialView .ui-selectmenu-button {margin-left:6px;}
    /*#BillingAndShippingPartialView .ui-input-text, #BillingAndShippingPartialView .ui-btn {margin: 6px 6px 0;}*/
    #ShippingNotesArea {margin:0px 20px !important;}
    #BillingAndShippingPartialView .inputRow {max-width: 100%;}
    #ui-accordion-accordion-panel-1 .OutsideWrapper .Col_NoWidth {padding-right:6px !important; padding-bottom:10px !important;}
    #ui-accordion-accordion-panel-1 .OutsideWrapper .Col_99 {margin:.5em 0 0 !important;}
    #CartItemsTable td {padding-top: 10px !important;}
    .UserBillingAndPymentView .validation-summary-errors li {padding-left:0; width:100%;}
    .UserBillingAndPymentView .validation-summary-errors ul {margin: 10px 15px;}

    #CartItemsTable tr:first-child span {display:none;}
    #CartItemsTable tr:first-child th {height:1px; padding-top: 0px; padding-bottom: 0px;}


    #CartTotalsTable .CartTotalsTextTh,  #CartTotalsTable .AmountCol{font-weight: bold;}
    .OrderCompleteText {font-size:.8em; line-height:125%;}


    /* Login Page */
    #loginFormSection, .registerForm {margin-top:0 !important; max-width:100%;}
    .BoxWrapperWithRails {margin-bottom:0 !important;}
    .BodyContent {min-height: 0px !important;}
    #registerForm label {display:none !important;}
    #registerForm {margin: 0px !important; padding:20px 10px 30px 14px;}
    
     /* Ligrary */
     #LibraryPage .CatagoryGridItem {max-width: 50%;}
     .MobileHorBoarderLibrary {left: 57px !important;}
     #videoOuterWrapper {margin: 0px;}

   }


/*   Med Mobile Devices       */
@media only screen and (min-width:480px) and (max-width: 767px) {
    .desktop {display: none  !important;}
   .tablet {display: none !important;}
   .desktopAndTablet {display: none !important;}
   
   /* general formatting */
   h3 {font-size:1em!important; line-height: 1.1em!important;}
   h4 {font-size:.8em;}
    h1 {font-size:1.4em;}
   .ui-title {font-size: 1.5em !important; padding: .7em 0 .3em !important;}

    /* frame formatting */
    #VertRightRailHero {right: -4px !important;}
    #BottomCornerRightHero {right: 0px !important;}
    #HomeMenuArea {position:absolute !important;}
    #BottomLeftHeroCorner {bottom: -28% !important;}
    #HeroBorderBottom {right: 56px !important; left: 56px !important;}
    #VertLeftRailHero {bottom: -6px !important;}
    #HeroBorderTop {left:57px !important; font-size: .8em;}
    .site-body {margin-top: 62px;}
    .ui-widget .ui-widget {font-size: 0.8em;}
     #home-most-viewed-wrapper, #CartAccordion {padding-right:10px; padding-left:10px;}

    /*Home Page*/
    .most-viewed .home-item-li:nth-child(2n+1) {clear:none !important;}    
    .most-viewed .home-item-li {width:33%;}
    .home-hero-wrap {width: 100%;}
    .text-overlay-wrapper {display:none;}
    .MobileHomePageTitle {display:inline-block !important;  line-height:100%;}
     #nav a {margin: 0 20px;}


    /*PDP Pages*/
    .options-wrap-outer .option-item {width:100%;}
    .product-detail-wrap {flex-flow: column nowrap; -webkit-flex-direction: column;   }
        .product-detail-wrap .col {min-width:100%;}
    #LearnMoreArea {display:none;}
    .ThumbNailImage {max-width:24%;}
    .product-detail-wrap > .col {padding: 5px 0}
    .BodyContentTextPage {padding: 20px 10px}
    .related-products-wrap {padding: 0 10px 18px;}
    .CarouselDiv {margin: auto 16px;}
    .CarouselDiv {margin-right: 18px; margin-left: 18px; margin-bottom: 12px !important;}
    .CarouselDiv h4 {margin-top:0px;}
    .options-wrap-outer .option-item {padding-right:3px;}

    .product-details #videoOuterWrapper {margin-left:0; margin-right:0px;}

    /* Cat Grid */
     #CategoryGridPageItemWrapper .CatagoryGridItem {max-width:33%;}
     .CGP-Hero-Outer {padding: 12px;}
     .CGP-Hero-Inner-LeftCol {max-width:90%; left:28px;}
    

     /* Check Out */
    #CartAccordion .ui-accordion-content {padding: 0 0 10px !important;}
    #ui-accordion-accordion-panel-0, #OrderSummary > div {padding: 0px 2px !important;}
     .productDescription {padding-left:10px !important;}
     .UserBillingAndPymentView .ShippingFormOutsideWrapper {width:100%;}
     #OrderSummary .OutsideWrapper {font-size:.8em !important; line-height: 110%!important;}
     #CartAccordion {padding-left: 5px !important; padding-right: 5px !important; padding-bottom: 6px !important; padding-top: 2px !important;}
     #BillingAndShippingPartialView > form, #BillingAndShippingPartialView label {font-size:.9em !important;}
     /*#BillingAndShippingPartialView .ui-input-text, #BillingAndShippingPartialView .ui-btn {margin: 6px 6px 0;}*/
     #BillingAndShippingPartialView .inputRow {max-width: 100%;}
     #ui-accordion-accordion-panel-1 .OutsideWrapper .Col_NoWidth {padding-right:6px !important; padding-bottom:10px !important;}
     #ui-accordion-accordion-panel-1 .OutsideWrapper .Col_99 {margin:.5em 0 0 !important;}
      #CartItemsTable td {padding-top: 10px !important;}
      .UserBillingAndPymentView .validation-summary-errors li {padding-left:0; width:100%;}
      .UserBillingAndPymentView .validation-summary-errors ul {margin: 10px 15px;}

    /* Login Page */
     #loginFormSection, .registerForm {margin-top:0 !important; max-width:100%;}
    .BoxWrapperWithRails {margin-bottom:0 !important;}
    .BodyContent{min-height: 0px !important;}
     #registerForm label{display:none !important;}
     #registerForm {margin: 0px !important; padding:20px 10px 30px 14px;}

     /* Ligrary */
     #LibraryPage .CatagoryGridItem {max-width: 50%;}
     .MobileHorBoarderLibrary{left: 57px !important;}
     #videoOuterWrapper {margin: 5px;}
}

/*  Tablets                */
@media only screen and (min-width:768px) and (max-width: 1023px) {
    .desktop {display: none !important;}
    .tablet {display: inline-block !important;}
    .mobile {display: none !important;}
    
    /* general formatting */
     h4{font-size:.9em;}

    /* Home Page */
    .most-viewed .home-item-li:nth-child(n+1) {clear:none;}
    .most-viewed .home-item-li:nth-child(4n+1) {clear:none;}
    .most-viewed .home-item-li:nth-child(3n+1) {clear:left;}
    .most-viewed .home-item-li {width:33%;}

    #MainLogoText {font-size: 1.5em;}
    .PrimaryNavWord {font-size: 16px;}
    .home-hero-wrap {width: 79.2%;}
    .text-overlay-wrapper {padding: 4px;}
    
     /* PDP Pages */
     .options-wrap-outer .option-item {min-width: 100%;}   
     .product-details #videoOuterWrapper {margin:7px;}

     /*.ThumbNailImage {max-width:31.9%;}*/
     .ThumbNailImage {max-width:32%;}          

     /* Cat Grid */
     #CategoryGridPageItemWrapper .CatagoryGridItem {max-width:25%;}
     
     /* Check Out */
      /*#BillingAndShippingPartialView .ui-input-text, #BillingAndShippingPartialView .ui-btn {margin: 6px 6px 0;}*/

     /* Ligrary */
     #LibraryPage .CatagoryGridItem {max-width: 33%;}
      #videoOuterWrapper {margin: 10px;}

}

/*   Desktops     */
@media (min-width: 1023px) {
    .desktop {display: inline-block !important;}
   
    .tablet {display: none !important;}
    .mobile {display: none !important;}

     /* general formatting */
     h4{font-size:1em;}

     /* Home Page */
    .most-viewed .home-item-li:nth-child(4n+1) {clear:left;}
    .most-viewed .home-item-li:nth-child(3n+1) {clear:none;}
    .most-viewed .home-item-li {width:25%;}
    
    #MainLogoText {font-size: 1.86em;}
    .PrimaryNavWord {font-size: 18px;}
    .home-hero-wrap {width: 79.2%;}

    /*PDP Pages*/
    .options-wrap-outer .option-item {max-width: 50%; min-width: 50%; }
    /*.ThumbNailImage {max-width:31.9%;}*/
     .ThumbNailImage {max-width:32%;}
     #ProductOptions .option-item select {max-width:47.7%; width: 47.7%;}
     .product-details #videoOuterWrapper {margin:7px;}

     /* Cat Grid */
     #CategoryGridPageItemWrapper .CatagoryGridItem {max-width:25%;}

     /* Ligrary */
     #LibraryPage .CatagoryGridItem {max-width: 33%;}

}


@media only screen and (min-width:768px) {
    .desktopAndTablet.inlineblock {display: inline-block !important; }
    .desktopAndTablet.block {display: block !important; }

    }