/*
     GLOBAL CSS Styles ************************************
          These apply to all display sizes.
*/


/*
    Main Menu Icon CSS
    2 Oct 2017 This controls the CSS style of the mobile icons along the top.
        ie mobile home, mobile login etc.
*/
.main_menu_icon_css
{
    width:40px;
}


/*
     2 May 2019 Upgrade NEW GLOBAL CSS START >>>>>>>>>>>>>>>>>>>>>>
*/


/*
    GLOBAL for the Top menu options
        Allow 2fr for the search prompt.
*/
.home_top_menu_items
{
    display: grid;
    grid-template-columns: 2fr repeat(7, 1fr);
    grid-gap: 10px;
    height:30px;
}

/* Top Menu options hover */
.home_top_menu_items a:hover
{
    background-color: #B889BD;
    color: #000;
}



/*
    GRID Menu Items
    2 May 2019 The hamburger button is always the first followed by the company logo.
*/


.hamburger_menu
{
    grid-area: hamburger_menu;
    background-color: #88D969;
}


/* Hamburger Menu Button CSS */

.hamburger-nav
{
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    background-color: #FFF;
    opacity: 0.9;
    overflow-x: hidden;
    padding-top: 0px;
    transition: 0.5s;
}

.hamburger-nav a
{
    padding: 10px 10px 10px 30px;
    text-decoration: none;
    font-size: 15px;
    color: #000;
    display: block;
    transition: 0.3s;
 }

.hamburger-nav a:hover
{
    color: #000;
    background-color: #ddd;
}



.hamburger-nav .btn-close
{
    position: relative;
    top: 0;
    right: 22px;
    font-size: 36px;
    margin-left: 50px;
}


/*  2 may 2019 */
.comp_logo
{
    grid-area: comp_logo;
}


/* 2 May 2019 */
.search_prompt
{
    grid-area: search_prompt;
}



/*
     2 May 2019 Upgrade NEW GLOBAL CSS END >>>>>>>>>>>>>>>>>>>>>>
*/


/*
    LARGE DISPLAY CSS  >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 
*/

@media only screen and (min-width: 800px)
{
/*
    12 Jan 2019 NEW CSS GRID VERSION
*/


/*
    Overall Home Page CSS >>>>>>>>>>>>>
*/
body
{
    background-color:white;
    font-family: Arial;
    font-size: medium;
}


/*
    HOME PAGE Overall Home Page Wrapper CSS >>>>>>>>>>>>>
*/
.home_wrapper
{
    display: grid;
    grid-template-areas:
        "home_header home_header home_header"
        "home_left home_content home_right"
        "home_footer home_footer home_footer";

    grid-template-rows: 1fr auto 1fr;
    grid-template-columns: 15% auto 20%;
    grid-row-gap: 5px;
    grid-column-gap: 5px;
    margin: 0;

    background-color:#88d969;
}



/*
    LARGE Home Page Header CSS
*/
.home_header
{
    grid-area: home_header;
    background-color: #88d969;
    padding:10px;
}


/*
    Home Page Left Col CSS
*/
.home_left
{
    grid-area: home_left;
    background-color: white;
    padding:8px;
}


/*
    Home Page Content CSS
*/
.home_content
{
    grid-area: home_content;
    background-color: white;
    padding:8px;
}


/* Set the max home page image width */
.home_content img
{
   max-width:95%;
}



/*
    Home Page Right Col CSS
*/
.home_right
{
    grid-area: home_right;
    background-color: white;
    padding:8px;
}


/*
    Home Page Footer CSS
*/
.home_footer
{
    grid-area: home_footer;
    background-color: white;
    padding:8px;
}




/*
    LARGE Overall Normal Page Wrapper CSS >>>>>>>>>>>>>
*/
.page_wrapper
{
    display: grid;
    grid-template-areas:
        "page_header page_header page_header"
        "page_left page_content page_right"
        "page_footer page_footer page_footer";

    grid-template-rows: 1fr auto 1fr;
    grid-template-columns: 15% auto 20%;
    grid-row-gap: 5px;
    grid-column-gap: 5px;
    margin: 0;

    background-color:#88d969;
}



/*
    LARGE Normal Page Header CSS
*/
.page_header
{
    grid-area: page_header;
    background-color: #88D969;
    padding:5px;
}


/*
    Normal Page Left Col CSS
*/
.page_left
{
    grid-area: page_left;
    background-color: white;
    padding:8px;
}


/*
    Normal Page Content CSS
*/
.page_content
{
    grid-area: page_content;
    background-color: white;
    padding:8px;
}


/*
    Normal Page Right Col CSS
*/
.page_right
{
    grid-area: page_right;
    background-color: white;
    padding:8px;
}


/*
    Normal Page Footer CSS
*/
.page_footer
{
    grid-area: page_footer;
    background-color: white;
    padding:8px;
}


/*
     2 May 2019 CSS Update START >>>>>>>>>>>>>>>>>>>
*/


/* Hide the small screen menu grid for large screens */
.menugrid_small_screen
{
    display: none;
}


/*
    LARGE Screen GRID CSS

        This sets the layout of the large screen grid menu items.
*/
.menugrid_large_screen
{
    display: grid;
    margin: 0px;
    padding-left:10px;
    grid-gap: 5px;

    grid-template-areas:
        "hamburger_menu comp_logo menuitem1 menuitem2 menuitem";

    grid-template-rows:auto;
    grid-template-columns: 0.5fr auto auto 1fr 1fr 1fr 1fr 1fr;
    justify-content: space-evenly;
}



/*
    2 May 2019 CSS Update END >>>>>>>>>>>>>>>

*/

/*
     Main Menu Button Div >>>>>>>>>>>>>>>>
         13 Jan 2019 This is the main menu button on top left.
*/
.main_menu_div
{
    position: relative;
    top: -15px;
    float:left;
}


/*
    Main Menu Icon CSS
    2 Oct 2017 This controls the CSS style of the mobile icons along the top.
        ie mobile home, mobile login etc.
*/
.main_menu_icon_css
{
    width:40px;
}


/*
   13 jan 2019 Main Menu CSS Class Styles
        Note this is the main CCS style for the main menu 
            that appears in the top left of screens. 
*/
.main_menu_nav_css
{
 /*   background-image: url("../images1/../test1_images/Mobile_Menu_icon_idx54209666.png");
    height: 40px;
    width: 40px;
*/  
    display: inline-block;
    height: 13px;
    margin: 0;
    padding: 0;
    position: static;
    top: 0;
    width: 51px;
}




/* complogo Image CSS Class */
.complogo_class
{
  height:42px;
}



/*
     Esp Search Results CSS Settings
       These are the settings for the search results on the esp_search_Final prog.
*/

/* Set the style of the stock item title ie the item name at the top the one they click on etc search results. */
#search_results_stock_item_title
{
  height:1em;
  font-size:medium;
  color:#000000;
  background-color:transparent;
     font-weight: bold;
}

/* 
  Search Results RRP Display Class
  Set the style of the stock item rrp price display search results. */
.search_results_stock_item_rrp
{
  height:1em;
  font-size:large;
  color:#000000;
  background-color:transparent;
}


/* Set the style of the stock item conent ie bcode, description etc search results. */
#search_results_stock_item_content
{
  height:1em;
  color:#000000;
  background-color:transparent;
}

/* Set the style of the Categories title. */
#search_results_cat_title
{
  height:1em;
  font-size:medium;
  color:#000000;
  background-color:transparent;
     font-weight: bold;
}


/* Set the style of the web cat search results. */
#search_results_category
{
  height:1em;
  color:#000000;
  background-color:transparent;
}

/* Set the style of the section title. */
#search_results_sec_title
{
  height:1em;
  font-size:medium;
  color:#000000;
  background-color:transparent;
     font-weight: bold;
}



/* Set the style of the web section search results. */
#search_results_section
{
  height:1em;
  color:#000000;
  background-color:transparent;
}


/*
     Search Prompt Span CSS
*/
.search_prompt_span
{
     height: 38px!important;
     color:#000000;
     overflow: hidden;
}


/*
    Search Text prompt input.
*/
.search_prompt_input
{
   background-color:white;
   font-size:small;
   width: 75%;
   height: 2em;
   border-color: black;
   border-style: solid;
   border-width:1px;
}

/*
     Search GO Button CSS
     Button icon set on pg 263
*/
.search_text_but_icon
{
    padding:0px;
    height:20px;
    vertical-align: bottom;
}


/* 
     Search Results Table
*/
#search_results_table
{
    width:100%;
    float:right;
    height:auto;

    /* Use 1% from the width. */
    padding-left:1%;
    
    /* Set the Default font color. */
    color:gray;
}



/*
     [emailus] Link CSS style
*/

#emailuslink {
color:#000000;
font-size:medium;
 /* No lines under links */
    text-decoration:none;

}


/*
     Email us Button Icon Class
     21 Aug 2016
     This is for the email us icon tag.
*/
.emailus_button_icon
{
  width:42px;
}



/*
  Shopping Cart Link CSS
    This is for the carticon tag.

*/
.show_cart
{
  position:relative;
  width:54px;
}

/*    
    View Shopping Cart Icon Class CSS.
      This is for the shopping cart icon.
*/
.show_cart_link_icon
{
   height:42px;
}


/*    
    Cart Total no of items in cart text.
*/
.show_cart_total
{
   position:absolute;
  left:-12px;
  top:25px;
  font-size:large;
}

/*
    This is the CSS for the cart icon
*/
#cart_icon_ajax_span
{
}


/*
    Checkout Link CSS
*/
.checkout_link
{
}

.checkout_link_icon
{
  height:20px;
}





/* 
    Main Shopping Cart Page Content Table Style
      This applies to the Three Step sections ie Steps 1 to 3 tables.   
*/
#shopping_cart_page_content
{
   width:95%;
    overflow:auto;
    margin:10px;
    padding:10px;

    /* Set the Default font color. */
    color:#000000;
  
/*   background-color:#FFFFFF;  */
  /* background:rgba(0, 0, 0, 0) linear-gradient(to right, orange, white) repeat scroll 0 0; */
     border-radius: 20px;
}

/*
      Step 1  Section CSS Style

         The following applies to the Step 1 section of the shopping cart.
      ie items list.
*/

/* The main top header for Step 1 */
#cart_step1_header
{
    background-color:#88D969;
        width:100%;
       vertical-align:middle;
}

/*
    Step 1 Main CSS
      This applies to the step 1 section below the header.
*/
#shopping_cart_step1
{
    padding: 10px;
    margin-top:10px;
    width: 100%;

    /* Set the Default font color. */
    color:black;
}




/*
      Cart TD Item row Class
     14 Jan 2017
*/
.shopping_cart_stock_item_td_row
{
    border-top: 1px solid #dddddd;
    padding:5px;
}



/*
    27 May 2014  Cart item row total ex Tax style
       Sets the style for the ex tax item total text.
*/
#shopping_cart_stock_item_ex_tax_total
{
  height:1em;
  font-family:Verdana,Arial;
  font-size:small;
  color:black;
}



/*
    27 May 2014  Cart item row total inc Tax style
       Sets the style for the inc tax item total text.
*/
#shopping_cart_stock_item_inc_tax_total
{
  height:1em;
  font-family:Verdana;
  font-size:medium;
  color:black;
}




/*
    13 Oct 2010 Controls the stock item row style for the shopping cart.
*/
#shopping_cart_stock_item_row
{
  height:1em;
  font-family:Verdana;
  font-size:medium;
  color:black;
  background-color:white;
}





/*
      TNT Freight Quote Page CSS
      5 June 2016 This is the CXSS for the freight quote page.
*/
#tnt_freight_quote_page_body_css
{
     width:100%;
    overflow:auto;
    margin:10px;
    padding:10px;


    /* Set the Default font familay and size. */
    font-family:Verdana, Helvetica, sans-serif;
    font-size:1em;
    
    /* Set the Default font color. */
    color:#000000;
  
   background-color:#FFFFFF; 
   background: rgba(0, 0, 0, 0) linear-gradient(orange, white) repeat fixed 0 0; 
     border-radius: 20px;

}

/*
     TNT Freight Quote Table CSS
      5 June 2016 This is the CSS for the freight quote table 
         that displays the freight quotes.
*/
#tnt_freight_quote_table_css
{
     width:100%;
     padding:10px;
}

/*
      Freight Country Select Prompt
*/
#dest_country_select
{
     background:#FFFFFF; 
     cursor:pointer;
     border-radius: 3px; 
     font-size:medium;  

      /* Thin Border */
    border: 1px solid #ccc;
}

/*
     TNT Freight Quote ERROR Message CSS
      8 Aug 2016 This is the CSS for the various TNT error messages.
*/
#tnt_error_message
{
}

/*
    19 March 2014 Controls the Freight stock item row style for the shopping cart.
*/
#shopping_cart_freight_stock_item_row
{
  height:1em;
  font-family:Verdana;
  font-size:small;
  color:black;
  background-color:white;

}

/* Step 1 Freight Total Row in the items section */
#cart_step1_freight_total_row
{
  height:1em;
  color:black;
}


/*
      Step 2 Freight and Delivery Details Section CSS Style

         The following applies to the Step 2 section of the shopping cart.
      ie freight
*/

/* The main top header for Step 2 */
#cart_step2_header
{
      background-color:#9ACBD9;
        width:100%;
       vertical-align:middle;
}

/*
    Step 2 Freight Main CSS
      This applies to the step 2 Delivery and Freight Section
  
*/
#shopping_cart_step2
{
  /* background-color:#FFFFFF; */
    border-radius: 20px;
    padding: 10px;
    margin-top:10px;
    width: 100%;
   
    /* Set the Default font color. */
    color:black;
}

/* Step 2 Left hand Freight Panel.
             This is the main TNT freight panel on the left.
  Set the left panel width to 70% to leave room for the Delivery details on the right.
*/
#cart_step2_freight_panel
{
     padding:5px;
}


/*  Step 2 Delivery Details panel on the right */
#cart_step2_delivery_details
{
   width:50%;
   padding:5px;   
    /* Set the Default font color. */
    color:black;
    border-right:solid 1px #000000;
}

/*
      Customer Address, Password, Item Cart Quantity Prompts Class
      This is for all of the customer delivery details prompts etc
*/
input[type=text].cust_addr_prompts, input[type=password], input[type=text].cart_item_qty_prompt
{
    background:#FFFFFF; 
    cursor:pointer;
    border-radius: 3px; 
    font-size:medium;

    /* Thin Border */
    border: 1px solid #ccc;
}


/*
      Step 3 Payment Details Section CSS Style

         The following applies to the Step 1 section of the shopping cart.
      ie items list.
*/

/* The main top header for Step 3 */
#cart_step3_header
{
      background-color:#9ACBD9;
        width:100%;
       vertical-align:middle;
}

/*
    Step 3 Payment Section Main CSS 
      This applies to the step 3 Payment Section
  
*/
#shopping_cart_step3
{
 /*    background-color:#FFFFFF; */
    border-radius: 20px;
    padding: 10px;
    margin-top:10px;
    width: 100%;

    /* Set the Default font color. */
    color:black;
}

/* Step 3 Payment Panel CSS
       This is the panel below the header. */
#cart_step3_payment_panel
{

    /* Set the Default font familay and size. */
    font-family:Verdana, Helvetica, sans-serif;
    font-size:small;
    
    /* Set the Default font color. */
    color:black;

}

/*
     generate_website_stock_items_table_html Function Mode 2 CSS
       30 Dec 2010 > This is the css for the display of stock items in a section using mode 2.
NOTE this is used for the modes in which there is ONE stock item per row.
*/
#mode_2_stock_item_row_css
{
      border-top: 1px solid #dddddd;
      padding:5px;
}


/* Shopping Cart Links
      These are for the create account link.
*/
.shopping_cart_links
{
      font-size:small;
}



/*
    Home Page Stories CSS Grid Layout
*/
.home_page_stories_group_items_grid 
{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  justify-content: space-evenly;
  grid-gap: 10px;
  background-color:#FFF;
  padding:5px;
}



/*
     Group @member CSS Grid 
        These are for the groupicons tag.
*/

/*
    Single Sale Item Wrapping CSS Grid.
*/
.group_member
{
  display: grid;
  grid-template-columns: 1fr 1fr;
  justify-content: space-evenly;
  grid-gap: 2px;
border-color: yellowgreen;
border-style: solid;
border-width: 2px;
border-radius: 1.25em;
padding: 12px;
}


/*
    @Sale Item CSS Grid
*/
.group_member_image
{
   grid-area:1/1/1/3;
   justify-self: center;
}

.group_member_image_link
{

}


.group_member_icon
{
    
}

.group_member_price
{
   grid-area:4/1/4/1;
   display:inline;
   color:crimson;
   font-size: larger;
}

.group_member_discount
{
   grid-area:4/2/4/3;
   color:red;
   text-align:right;
   font-size:larger;
   font-style:italic;
}


/* The disocunt icon div */
.group_member_discount_icon
{
  grid-area:1/2/1/2;
  text-align:right;
}

/* The actual image used for the discount. */
.group_member_discount_icon_image
{
     width:50px;
}

.group_member_name
{
   grid-area:2/1/2/3;
   height:2em;
   font-weight:bold;
}


.group_member_name_link
{
   text-decoration:none;
}

.group_member_descr
{
   grid-area:3/1/3/3;
   overflow:hidden;
   color:black;
   padding-top:1em;
}

.group_member_hr_image
{

}

.group_member_stocks
{
   grid-area:6/1/6/1;
}


.group_member_cart_qty
{
  border:none;
  width:2em;
  text-align:right;
  background-color:lightgray;
}

.group_member_add
{
   grid-area: 11/3/11/2;
   align-self: end;
   text-align:right;
}

.group_member_freight
{
   grid-area:10/2/10/2;
   text-decoration:underline;
   color:blue;
   z-index:1000;
}

.group_member_info
{
   grid-area:10/2/10/2;
}

.group_member_info_icon
{

}


.group_member_staff
{
   grid-area:12/2/12/2;
}


.group_member_part_no
{
   grid-area:6/2/6/2;
}

.group_member_sup_part_no
{
   grid-area:7/2/7/2;
}

.group_member_cust_code
{
   grid-area:7/1/7/1;
}


.group_member_supplier
{
   grid-area:8/1/8/1;

}

.group_member_physical
{
   grid-area:9/1/9/2;
}

.group_member_country
{
   grid-area:8/2/8/2;
}




/*
    @Section Display Mode 18 Items CSS Grid Container  >>>>>>>>>>>>>>
       This is the main grid container for ALL items in the web section
       when the display mode is set to 18 on pg 281.

*/
.sec_mode_18_items_grid_container {

  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
  justify-content: space-evenly;
  text-align:left;
  grid-gap: 1px;
  margin-top: 0px;
  margin-bottom: 0px;
}


/*
   Web Section item display mode 18 Individual item container.
   27 May 2019 This is the grip container for an individual stock item.
*/
.sec_mode_18_item_grid
{
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows:auto;
  justify-content: space-evenly;
  grid-gap: 2px;
  background-color:#FFF;
  padding:5px;
}


/*
    @Sale Item CSS Grid
*/
.sec_mode_18_item_image
{
   grid-area:1/1/1/3;
   justify-self: center;
   width:90%
}

.sec_mode_18_item_image_link
{

}


.sec_mode_18_item_hr_image
{

}

.sec_mode_18_item_icon
{
    
}


.sec_mode_18_item_name
{
   grid-area:2/1/2/3;
   height:2em;
   font-weight:bold;
}


.sec_mode_18_item_name_link
{
   text-decoration:none;
}

.sec_mode_18_item_descr
{
   grid-area:3/1/3/3;
   overflow:hidden;
   color:black;
}


.sec_mode_18_item_price
{
   grid-area:4/1/4/1;
   display:inline;
   color:crimson;
   font-size: larger;
}

.sec_mode_18_item_discount
{
   grid-area:4/2/4/3;
   color:red;
   text-align:right;
   font-size:larger;
   font-style:italic;
}


/* The disocunt icon div */
.sec_mode_18_item_discount_icon
{
  grid-area:1/2/1/2;
  text-align:right;
  height:40px;
}

/* The actual image used for the discount. */
.sec_mode_18_item_discount_icon_image
{
     width:50px;
}


.sec_mode_18_item_stocks
{
   grid-area:11/1/11/1;
}


.sec_mode_18_item_cart_qty
{
  border:none;
  width:2em;
  text-align:right;
  background-color:lightgray;
}

.sec_mode_18_item_add
{
   grid-area: 11/3/11/2;
   align-self: end;
   text-align:right;
}

.sec_mode_18_item_freight
{
   grid-area:10/2/10/2;
   text-decoration:underline;
   color:blue;
   z-index:1000;
}

.sec_mode_18_item_info
{
   grid-area:10/2/10/2;
}

.sec_mode_18_item_info_icon
{

}


.sec_mode_18_item_staff
{
   grid-area:12/2/12/2;
}


.sec_mode_18_item_part_no
{
   grid-area:6/2/6/2;
}

.sec_mode_18_item_sup_part_no
{
   grid-area:7/2/7/2;
}

.sec_mode_18_item_cust_code
{
   grid-area:7/1/7/1;
}


.sec_mode_18_item_supplier
{
   grid-area:8/1/8/1;

}

.sec_mode_18_item_physical
{
   grid-area:9/1/9/2;
}

.sec_mode_18_item_country
{
   grid-area:8/2/8/2;
}



/*
    @Group Sale Items CSS Grid  >>>>>>>>>>>>>>
       This is the surrounding grid for all of the sales items.
     This is used in the groupicons command.
*/
.group_items_grid {

  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  justify-content: space-evenly;
  text-align:left;
  grid-gap: 1px;
  margin-top: 0px;
  margin-bottom: 0px;

}


/*
    Single Sale Item Wrapping CSS Grid.
     ie mode 1
*/
.group_item
{
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows:auto;
  justify-content: space-evenly;
  grid-gap: 2px;
  background-color:#FFF;
  padding:5px;
}


/*
    @Sale Item CSS Grid
*/
.group_item_image
{
   grid-area:1/1/1/3;
   justify-self: center;
   width:90%
}

.group_item_image_link
{

}


.group_item_icon
{
    
}

.group_item_price
{
   grid-area:4/1/4/1;
   display:inline;
   color:crimson;
   font-size: larger;
}

.group_item_discount
{
   grid-area:4/2/4/3;
   color:red;
   text-align:right;
   font-size:larger;
   font-style:italic;
}


/* The disocunt icon div */
.group_item_discount_icon
{
  grid-area:1/2/1/2;
  text-align:right;
  height:40px;
}

/* The actual image used for the discount. */
.group_item_discount_icon_image
{
     width:50px;
}

.group_item_name
{
   grid-area:2/1/2/3;
   height:2em;
}


.group_item_name_link
{
   text-decoration:none;
   font-size:medium;
}

.group_item_descr
{
   grid-area:3/1/3/3;
   overflow:hidden;
   color:black;
}

.group_item_hr_image
{

}

.group_item_stocks
{
   grid-area:11/1/11/1;
}


.group_item_cart_qty
{
  border:none;
  width:2em;
  text-align:right;
  background-color:lightgray;
}

.group_item_add
{
   grid-area: 11/3/11/2;
   align-self: end;
   text-align:right;
}

.group_item_freight
{
   grid-area:10/2/10/2;
   text-decoration:underline;
   color:blue;
   z-index:1000;
}

.group_item_info
{
   grid-area:10/2/10/2;
}

.group_item_info_icon
{

}


.group_item_staff
{
   grid-area:12/2/12/2;
}


.group_item_part_no
{
   grid-area:6/2/6/2;
}

.group_item_sup_part_no
{
   grid-area:7/2/7/2;
}

.group_item_cust_code
{
   grid-area:7/1/7/1;
}


.group_item_supplier
{
   grid-area:8/1/8/1;

}

.group_item_physical
{
   grid-area:9/1/9/2;
}

.group_item_country
{
   grid-area:8/2/8/2;
}






/*
    Single Web Category Wrapping CSS Grid.
*/
.group_cat
{
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows:auto;
  justify-content: space-evenly;
  grid-gap: 2px;
  background-color:#FFF;
  padding:5px;
}


/*
    Group cat CSS Grid
*/
.group_cat_image
{
   grid-area:1/1/1/3;
   justify-self: center;
}


.group_cat_image_link
{
}


/*
   Group cat icon
*/
.group_cat_icon
{
  grid-area:1/1/1/3;
  justify-self: center;
  max-width: 100%;
}

.group_cat_name
{
  grid-area:2/1/2/3;
   height:2em;
   font-weight:bold;
}


.group_cat_name_link
{
   text-decoration:none;
}

.group_cat_descr
{
    grid-area:3/1/3/3;
   overflow:hidden;
   color:black;
   padding-top:1em;
}


.group_cat_staff
{
   grid-area:12/2/12/2;
}




/*
    Single Web Section Wrapping CSS Grid.
*/
.group_sec
{
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows:auto;
  justify-content: space-evenly;
  grid-gap: 2px;
  background-color:#FFF;
  padding:5px;
}


/*
    Group sec CSS Grid
*/
.group_sec_image
{
   grid-area:1/1/1/3;
   justify-self: center;
}


.group_sec_image_link
{

}

.group_sec_icon
{
  grid-area:1/1/1/3;
  justify-self: center;
  max-width: 100%;
}


.group_sec_name
{
  grid-area: 2/1/2/3;
  max-height: 3em;
  overflow: hidden;
}


.group_sec_name_link
{
   text-decoration:none;
   font-size:medium;
   color:black;
}

.group_sec_descr
{
   grid-area:3/1/3/3;
   overflow:hidden;
   color:black;
}


.group_sec_staff
{
   grid-area:12/2/12/2;
}






/*
   TOP Headline CSS for the group-icons command
     These are for the first two articles secs or items etc in the group
*/
.group_headline
{
   /* grid-column: span 2; */
   border-color: yellowgreen;
   border-style: solid;
   border-width:2px;
   border-radius: 1.25em;
   padding: 12px;
}



.group_headline_icon
{
   width:100%;
}


.group_headline_name
{
   font-size:large;
   color:black;
   
}


.group_headline_read_more_div
{
    text-align: right;
}

.group_headline_read_more_link
{
    text-align:right;
    font-size:small;
    color:black;
}


/*
    Single Web Espdoc Wrapping CSS Grid.
*/
.group_doc
{
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows:auto;
  justify-content: space-evenly;
  grid-gap: 2px;
  background-color:lightgray;
  padding:5px;
}


/*
    Group Espdoc CSS Grid
*/
.group_doc_image
{
   grid-area:1/1/1/3;
   justify-self: center;
}


.group_doc_icon
{
  grid-area:1/1/1/3;
  justify-self: center;
  max-width: 100%;

}


.group_doc_name
{
   grid-area:2/1/2/3;
   max-height: 3em;
   overflow: hidden;
}


.group_doc_name_link
{
   text-decoration:none;
   font-size:medium;
   color:black;
}

.group_doc_descr
{
   grid-area:3/1/3/3;
   overflow:hidden;
   color:black;
   padding-top:5px;
}



.group_read_more_div
{
  grid-area: 4/1/4/3;
  color:black;
  text-align:right;

}

.group_read_more_link
{
  color:black;
  font-size:small;
}

.group_doc_staff
{
   grid-area:12/2/12/2;
}


/*
   Generic Staff Edit.
*/
.staff_edit
{
   grid-area:12/2/12/2;
}




/* LARGE DISPLAY Image Slider CSS Settings ***********   */

#image_slider {
   width:100%;
   height:550px;
   margin:1px auto;
   background:#FFF;

/* border:2px solid #000; */

   overflow:auto;
   box-shadow:0 0 10px #000;
}

#image_slider ul {
   float:left;
   /* jp9 set to 9999 from 999 */
   margin-right:-9999em;
   white-space:nowrap;
   list-style:none;
}

#image_slider li {
   margin:3px;
   text-align:left;
   float:left;
   display:inline-block;
}

#image_slider img {
   border:0;
   display:inline;
   border:0px solid #A3CBE0;
}

#image_slider a:active img, #image_slider a:focus img, #image_slider a:hover img {
   border:1px solid #000;
}

#image_slider a {
   text-decoration:none;
   font-weight:normal;
   color:#000;
}

#image_slider a:active, #image_slider a:focus, #image_slider a:hover {
   color:#000;
}

#image_slider span {
   padding:1px 0 0;
   display:block;
}    

/* ------------- Flexcroll CSS ------------ */
.scrollgeneric 
{
    line-height:1px;
    font-size:1px;
    position:absolute;
    top:0px;
    left:0;
}

/*
   The scroll bar background.
*/
.hscrollerbase {
    height:12px;
    background:#FFF;
}


/*
     The scroll bar itself.
*/
.hscrollerbar {
    height:12px;
    background:lightgray;
    cursor:e-resize;
    padding:3px;
    border:0px solid #A3CBE0;
}

.hscrollerbar:hover {
    background:#222;
    border:1px solid #222;
}

.vscrollerbase 
{
    visibility: visible !important; 
}



/*
    Web News Blog Main DIV CSS Style Class
    29 March 2017  This is for the web news tags main div block. 
*/
.web_news_blog_div 
{
    display:grid;
    grid-template-columns: 1fr;
    grid-gap: 10px;
    padding:0px;
}

/*
    Web News Blog li Item CSS Style Class
    29 March 2017  This is for the web news tags news item li block
*/
.web_news_blog_item 
{
    max-height: 200px;
    text-align:center;
}

/* Blog news item link css */
.web_news_blog_item a
{
    color:black;
}


/*
    Web News Blog Icon CSS Style Class
    29 March 2017  This is for the news items icon.
*/
.web_news_blog_icon
{
    width: 100%;
    max-height:125px;
    margin: 0px;
    overflow: hidden;
    text-decoration:none;
}


/*
    Web News Blog Caption CSS Style Class
    29 March 2017  This is for the caption under the news icon.
*/
.web_news_blog_caption
{
    max-height:2em;
    margin-top:5px;
    padding:5px;
    overflow: hidden;
    text-decoration:none;
}


/* Display a Single Stock item with display_item Final */

/* Items image */
.display_item_image
{
 width:50%;
}




/* 
    Items image Mode 6 
    8 Aug 2019 this is for image items in the display_item func in mode 6.
*/
.display_mode6_item_image
{
 width:100%;
}



/*
    Shopping Cart General CSS >>>>>>>>>>>>>>>>>
*/

/* Shopping cart add button css note this is alkso used by the do_ajax prog. */
.cart_add_button_css
{
   border-style:solid;
   border-width:1px;
   border-color:#000;
   background-color:#FFF; 
}


/*
     5 Dec 2018 Back to Cart Icon css.
*/
.back_to_cart_icon
{
    width:25px;

}





/*
    @Group Sale Items CSS Grid  >>>>>>>>>>>>>>
       This is the surrounding grid for all of the sales items.
     This is used in the groupicons command.
*/
.sale_items_grid_container {

  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  justify-content: space-evenly;
  text-align:left;
  grid-gap: 1px;
  margin-top: 0px;
  margin-bottom: 0px;
}


/*
    Single Sale Item Wrapping CSS Grid.
*/
.sale_item
{
  display: grid;
  grid-template-columns: 1fr 1fr;
  justify-content: space-evenly;
  grid-gap: 2px;
  background-color:#FFF;
  padding:5px;
}


/*
    @Sale Item CSS Grid
*/
.sale_item_image
{
   grid-area:1/1/1/3;
}

.sale_item_image_link
{

}


.sale_item_icon
{ 
}

.sale_item_price
{
   grid-area:4/1/4/1;
   display:inline;
   color:crimson;
   font-size: larger;
}

.sale_item_discount
{
   grid-area:4/2/4/3;
   color:red;
   text-align:right;
   font-size:larger;
   font-style:italic;
}


/* The disocunt icon div */
.sale_item_discount_icon
{
  grid-area:1/2/1/2;
  text-align:right;
  height:40px;
}

/* The actual image used for the discount. */
.sale_item_discount_icon_image
{
     width:50px;
}

.sale_item_name
{
   grid-area:2/1/2/3;
   height:2em;
   font-weight:bold;
}


.sale_item_name_link
{
   text-decoration:none;
}

.sale_item_descr
{
   grid-area:3/1/3/3;
   overflow:hidden;
   color:black;
}

.sale_item_hr_image
{

}

.sale_item_stocks
{
   grid-area:11/1/11/1;
}


.sale_item_cart_qty
{
  border:none;
  width:2em;
  text-align:right;
  background-color:lightgray;
}

.sale_item_add
{
   grid-area: 11/3/11/2;
   align-self: end;
   text-align:right;
}

.sale_item_freight
{
   grid-area:10/2/10/2;
   text-decoration:underline;
   color:blue;
   z-index:1000;
}

.sale_item_info
{
   grid-area:10/2/10/2;
}

.sale_item_info_icon
{

}


.sale_item_staff
{
   grid-area:12/2/12/2;
}


.sale_item_part_no
{
   grid-area:6/2/6/2;
}

.sale_item_sup_part_no
{
   grid-area:7/2/7/2;
}

.sale_item_cust_code
{
   grid-area:7/1/7/1;
}


.sale_item_supplier
{
   grid-area:8/1/8/1;

}

.sale_item_physical
{
   grid-area:9/1/9/2;
}

.sale_item_country
{
   grid-area:8/2/8/2;
}



}  /* End LARGE DISPLAY */


/*
    @SMALL DISPLAY >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 
     Stack all of the grid areas on top of each other.
*/
@media only screen and (max-width: 800px)
{

body
{
    background-color:white;
    font-family: Arial;
    font-size: medium;
}




/* complogo Image CSS Class */
.complogo_class
{
  width:100%;
}


.page_content img
{
   max-width:95%;
}


/*
    Overall Home Page Wrapper CSS >>>>>>>>>>>>>
*/
.home_wrapper
{
    display: grid;
    grid-template-areas:
        "home_header"
        "home_content"
        "home_left"
        "home_right"
        "home_footer";

    grid-template-rows: auto auto auto auto auto;
    grid-template-columns: 1fr;
    background-color:white;
}



/*
    SMALL Home Page Header CSS
*/
.home_header
{
    grid-area: home_header;
    background-color:#88d969;
    padding:5px;
}


/*
    Home Page Left Col CSS
*/
.home_left
{
    grid-area: home_left;
    background-color: white;
    padding:5px;
}


/*
    Home Page Content CSS
*/
.home_content
{
    grid-area: home_content;
    background-color: white;
    padding:5px;
}


/* Set the max home page image width */
.home_content img
{
   max-width:95%;
}


/*
    Home Page Right Col CSS
*/
.home_right
{
    grid-area: home_right;
    background-color: white;
    padding:5px;
}


/*
    Home Page Footer CSS
*/
.home_footer
{
    grid-area: home_footer;
    background-color: white;
    padding:5px;
}




/*
    SMALL Overall Normal Page Wrapper CSS >>>>>>>>>>>>>
*/
.page_wrapper
{
    display: grid;
    grid-template-areas:
        "page_header"
        "page_content"
        "page_left"
        "page_right"
        "page_footer";

    grid-template-rows: auto auto auto auto auto;
    grid-template-columns: 1fr;
    background-color:#88d969;
}



/*
    SMALL Normal Page Header CSS
*/
.page_header
{
    grid-area: page_header;
    background-color: #88d969;
    padding:5px;
}


/*
    Normal Page Left Col CSS
*/
.page_left
{
    grid-area: page_left;
    background-color: white;
    padding:8px;
}


/*
    Normal Page Content CSS
*/
.page_content
{
    grid-area: page_content;
    background-color: white;
    padding:1px;
}


/*
    Normal Page Right Col CSS
*/
.page_right
{
    grid-area: page_right;
    background-color: white;
    padding:8px;
}


/*
    Normal Page Footer CSS
*/
.page_footer
{
    grid-area: page_footer;
    background-color: white;
    padding:8px;
}



/*
     2 May 2019 SMALL Upgrade START >>>>>>>>>>>>>>>
*/


/*
    SMALL Screen GRID CSS

        This sets the layout of the small screen grid menu items.
*/
.menugrid_small_screen
{
    display: grid;
    max-width: 90%;
    margin: 0px;
    padding-left:5px;
    grid-gap: 5px;

    /* . means leave the grid col empty */
    grid-template-areas:
        "hamburger_menu comp_logo"
        ". search_prompt";

    grid-template-rows: 1fr 0.1fr;
    grid-template-columns: 0.1fr 1fr;

    justify-content: space-evenly;
}



/* Hide the Large screen menu grid for small screens */
.menugrid_large_screen
{
    display: none;
}


/*
     2 May 2019 SMALL Upgrade STOP >>>>>>>>>>>>>>>>
*/



/*
     Esp Search Results CSS Settings
       These are the settings for the search results on the esp_search_Final prog.
*/

/* Set the style of the stock item title ie the item name at the top the one they click on etc search results. */
#search_results_stock_item_title
{
  height:1em;
  font-size:medium;
  color:#000000;
  background-color:transparent;
     font-weight: bold;
}

/* 
  Search Results RRP Display Class
  Set the style of the stock item rrp price display search results. */
.search_results_stock_item_rrp
{
  height:1em;
  font-size:large;
  color:#000000;
  background-color:transparent;
}


/* Set the style of the stock item conent ie bcode, description etc search results. */
#search_results_stock_item_content
{
  height:1em;
  color:#000000;
  background-color:transparent;
}

/* Set the style of the Categories title. */
#search_results_cat_title
{
  height:1em;
  font-size:medium;
  color:#000000;
  background-color:transparent;
     font-weight: bold;
}


/* Set the style of the web cat search results. */
#search_results_category
{
  height:1em;
  color:#000000;
  background-color:transparent;
}

/* Set the style of the section title. */
#search_results_sec_title
{
  height:1em;
  font-size:medium;
  color:#000000;
  background-color:transparent;
     font-weight: bold;
}



/* Set the style of the web section search results. */
#search_results_section
{
  height:1em;
  color:#000000;
  background-color:transparent;
}


/*
     Search Prompt Span CSS
*/
.search_prompt_span
{
     height: 38px!important;
     color:#000000;
     overflow: hidden;
}


/*
    Search Text prompt input.
*/
.search_prompt_input
{
   background-color:white;
   font-size:small;
   width: 75%;
   height: 2em;
   border-color: black;
   border-style: solid;
   border-width:1px;
}

/*
     Search GO Button CSS
     Button icon set on pg 263
*/
.search_text_but_icon
{
    padding:0px;
    height:20px;
    vertical-align: bottom;
}


/* 
     Search Results Table
*/
#search_results_table
{
    width:100%;
    float:right;
    height:auto;

    /* Use 1% from the width. */
    padding-left:1%;
    
    /* Set the Default font color. */
    color:gray;
}



/*
     [emailus] Link CSS style
*/

#emailuslink {
color:#000000;
font-size:medium;
 /* No lines under links */
    text-decoration:none;

}


/*
     Email us Button Icon Class
     21 Aug 2016
     This is for the email us icon tag.
*/
.emailus_button_icon
{
  width:42px;
}



/*
  Shopping Cart Link CSS
    This is for the carticon tag.

*/
.show_cart
{
  position:relative;
  width:54px;
}

/*    
    View Shopping Cart Icon Class CSS.
      This is for the shopping cart icon.
*/
.show_cart_link_icon
{
   height:42px;
}


/*    
    Cart Total no of items in cart text.
*/
.show_cart_total
{
   position:absolute;
  left:-12px;
  top:25px;
  font-size:large;
}

/*
    This is the CSS for the cart icon
*/
#cart_icon_ajax_span
{
}


/*
    Checkout Link CSS
*/
.checkout_link
{
}

.checkout_link_icon
{
  height:20px;
}




/* 
    Main Shopping Cart Page Content Table Style
      This applies to the Three Step sections ie Steps 1 to 3 tables.   
*/
#shopping_cart_page_content
{
   width:95%;
    overflow:auto;
    margin:10px;
    padding:10px;

    /* Set the Default font color. */
    color:#000000;
  
/*   background-color:#FFFFFF;  */
  /* background:rgba(0, 0, 0, 0) linear-gradient(to right, orange, white) repeat scroll 0 0; */
     border-radius: 20px;
}

/*
      Step 1  Section CSS Style

         The following applies to the Step 1 section of the shopping cart.
      ie items list.
*/

/* The main top header for Step 1 */
#cart_step1_header
{
    background-color:#88d969;
       vertical-align:middle;
}

/*
    Step 1 Main CSS
      This applies to the step 1 section below the header.
*/
#shopping_cart_step1
{
    padding: 0px;
    margin-top:10px;
    width: 100%;

    /* Set the Default font color. */
    color:black;
}



/*
      Cart TD Item row Class
     14 Jan 2017
*/
.shopping_cart_stock_item_td_row
{
    border-top: 1px solid #dddddd;
    padding:5px;
    font-size:smaller;
}


/*
    27 May 2014  Cart item row total ex Tax style
       Sets the style for the ex tax item total text.
*/
#shopping_cart_stock_item_ex_tax_total
{
  height:1em;
  font-family:Verdana,Arial;
  font-size:small;
  color:black;
}



/*
    27 May 2014  Cart item row total inc Tax style
       Sets the style for the inc tax item total text.
*/
#shopping_cart_stock_item_inc_tax_total
{
  height:1em;
  font-family:Verdana;
  font-size:medium;
  color:black;
}




/*
    13 Oct 2010 Controls the stock item row style for the shopping cart.
*/
#shopping_cart_stock_item_row
{
  height:1em;
  font-family:Verdana;
  font-size:medium;
  color:black;
  background-color:white;
}




/*
      TNT Freight Quote Page CSS
      5 June 2016 This is the CXSS for the freight quote page.
*/
#tnt_freight_quote_page_body_css
{
     width:100%;
    overflow:auto;
    margin:10px;
    padding:10px;


    /* Set the Default font familay and size. */
    font-family:Verdana, Helvetica, sans-serif;
    font-size:1em;
    
    /* Set the Default font color. */
    color:#000000;
  
   background-color:#FFFFFF; 
   background: rgba(0, 0, 0, 0) linear-gradient(orange, white) repeat fixed 0 0; 
     border-radius: 20px;

}

/*
     TNT Freight Quote Table CSS
      5 June 2016 This is the CSS for the freight quote table 
         that displays the freight quotes.
*/
#tnt_freight_quote_table_css
{
     width:100%;
     padding:10px;
}

/*
      Freight Country Select Prompt
*/
#dest_country_select
{
     background:#FFFFFF; 
     cursor:pointer;
     border-radius: 3px; 
     font-size:medium;  

      /* Thin Border */
    border: 1px solid #ccc;
}

/*
     TNT Freight Quote ERROR Message CSS
      8 Aug 2016 This is the CSS for the various TNT error messages.
*/
#tnt_error_message
{
}

/*
    19 March 2014 Controls the Freight stock item row style for the shopping cart.
*/
#shopping_cart_freight_stock_item_row
{
  height:1em;
  font-family:Verdana;
  font-size:small;
  color:black;
  background-color:white;

}

/* Step 1 Freight Total Row in the items section */
#cart_step1_freight_total_row
{
  height:1em;
  color:black;
}


/*
      Step 2 Freight and Delivery Details Section CSS Style

         The following applies to the Step 2 section of the shopping cart.
      ie freight
*/

/* The main top header for Step 2 */
#cart_step2_header
{
      background-color:#9ACBD9;
        width:100%;
       vertical-align:middle;
}

/*
    Step 2 Freight Main CSS
      This applies to the step 2 Delivery and Freight Section
  
*/
#shopping_cart_step2
{
  /* background-color:#FFFFFF; */
    border-radius: 20px;
    padding: 10px;
    margin-top:10px;
    width: 100%;
   
    /* Set the Default font color. */
    color:black;
}

/* Step 2 Left hand Freight Panel.
             This is the main TNT freight panel on the left.
  Set the left panel width to 70% to leave room for the Delivery details on the right.
*/
#cart_step2_freight_panel
{
     padding:5px;
}


/*  Step 2 Delivery Details panel on the right */
#cart_step2_delivery_details
{
   width:50%;
   padding:5px;   
    /* Set the Default font color. */
    color:black;
    border-right:solid 1px #000000;
}

/*
      Customer Address, Password, Item Cart Quantity Prompts Class
      This is for all of the customer delivery details prompts etc
*/
input[type=text].cust_addr_prompts, input[type=password], input[type=text].cart_item_qty_prompt
{
    background:#FFFFFF; 
    cursor:pointer;
    border-radius: 3px; 
    font-size:medium;

    /* Thin Border */
    border: 1px solid #ccc;
}


/*
      Step 3 Payment Details Section CSS Style

         The following applies to the Step 1 section of the shopping cart.
      ie items list.
*/

/* The main top header for Step 3 */
#cart_step3_header
{
      background-color:#9ACBD9;
        width:100%;
       vertical-align:middle;
}

/*
    Step 3 Payment Section Main CSS 
      This applies to the step 3 Payment Section
  
*/
#shopping_cart_step3
{
 /*    background-color:#FFFFFF; */
    border-radius: 20px;
    padding: 10px;
    margin-top:10px;
    width: 100%;

    /* Set the Default font color. */
    color:black;
}

/* Step 3 Payment Panel CSS
       This is the panel below the header. */
#cart_step3_payment_panel
{

    /* Set the Default font familay and size. */
    font-family:Verdana, Helvetica, sans-serif;
    font-size:small;
    
    /* Set the Default font color. */
    color:black;

}

/*
     generate_website_stock_items_table_html Function Mode 2 CSS
       30 Dec 2010 > This is the css for the display of stock items in a section using mode 2.
NOTE this is used for the modes in which there is ONE stock item per row.
*/
#mode_2_stock_item_row_css
{
      border-top: 1px solid #dddddd;
      padding:5px;
}


/* Shopping Cart Links
      These are for the create account link.
*/
.shopping_cart_links
{
      font-size:small;
}



/*
    Home Page Stories CSS Grid Layout
*/
.home_page_stories_group_items_grid 
{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  justify-content: space-evenly;
  grid-gap: 2px;
  background-color:#FFF;
  padding:5px;
}





/*
     Group @member CSS Grid 
        These are for the groupicons tag.
*/

/*
    Single Sale Item Wrapping CSS Grid.
*/
.group_member
{
  display: grid;
  grid-template-columns: 1fr 1fr;
  justify-content: space-evenly;
  grid-gap: 2px;
  border-color: yellowgreen;
  border-style: solid;
  border-width:2px;
  border-radius: 1.25em;
  padding: 12px;
}


/*
    @Sale Item CSS Grid
*/
.group_member_image
{
   grid-area:1/1/1/3;
   justify-self: center;
}

.group_member_image_link
{

}


.group_member_icon
{
    
}


.group_read_more_div
{
  grid-area: 4/1/4/3;
  color:black;
  text-align:right;

}

.group_read_more_link
{
  color:black;
  font-size:small;
}


.group_member_price
{
   grid-area:4/1/4/1;
   display:inline;
   color:crimson;
   font-size: larger;
}

.group_member_discount
{
   grid-area:4/2/4/3;
   color:red;
   text-align:right;
   font-size:larger;
   font-style:italic;
}


/* The disocunt icon div */
.group_member_discount_icon
{
  grid-area:1/2/1/2;
  text-align:right;
}

/* The actual image used for the discount. */
.group_member_discount_icon_image
{
     width:50px;
}

.group_member_name
{
   grid-area:2/1/2/3;
   height:2em;
   font-weight:bold;
}


.group_member_name_link
{
   text-decoration:none;
}

.group_member_descr
{
   grid-area:3/1/3/3;
   overflow:hidden;
   color:black;
   padding-top:1em;
}

.group_member_hr_image
{

}

.group_member_stocks
{
   grid-area:6/1/6/1;
}


.group_member_cart_qty
{
  border:none;
  width:2em;
  text-align:right;
  background-color:lightgray;
}

.group_member_add
{
   grid-area: 11/3/11/2;
   align-self: end;
   text-align:right;
}

.group_member_freight
{
   grid-area:10/2/10/2;
   text-decoration:underline;
   color:blue;
   z-index:1000;
}

.group_member_info
{
   grid-area:10/2/10/2;
}

.group_member_info_icon
{

}


.group_member_staff
{
   grid-area:12/2/12/2;
}


.group_member_part_no
{
   grid-area:6/2/6/2;
}

.group_member_sup_part_no
{
   grid-area:7/2/7/2;
}

.group_member_cust_code
{
   grid-area:7/1/7/1;
}


.group_member_supplier
{
   grid-area:8/1/8/1;

}

.group_member_physical
{
   grid-area:9/1/9/2;
}

.group_member_country
{
   grid-area:8/2/8/2;
}






/*
    @Group Sale Items CSS Grid  >>>>>>>>>>>>>>
       This is the surrounding grid for all of the sales items.
     This is used in the groupicons command.
*/
.group_items_grid {

  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  justify-content: space-evenly;
  text-align:left;
  grid-gap: 1px;
  margin-top: 0px;
  margin-bottom: 0px;

}


/*
    Single Sale Item Wrapping CSS Grid.
*/
.group_item
{
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows:auto;
  justify-content: space-evenly;
  grid-gap: 2px;
  background-color:#FFF;
  padding:5px;
}


/*
    @Group Item CSS Grid
*/
.group_item_image
{
   grid-area:1/1/1/3;
   justify-self: center;
   width:90%
}

.group_item_image_link
{

}


.group_item_icon
{

}

.group_item_price
{
   grid-area:4/1/4/1;
   display:inline;
   color:crimson;
   font-size: larger;
}

.group_item_discount
{
   grid-area:4/2/4/3;
   color:red;
   text-align:right;
   font-size:larger;
   font-style:italic;
}


/* The disocunt icon div */
.group_item_discount_icon
{
  grid-area:1/2/1/2;
  text-align:right;
  height:40px;
}

/* The actual image used for the discount. */
.group_item_discount_icon_image
{
     width:50px;
}

.group_item_name
{
   grid-area:2/1/2/3;
   height:2em;
   font-weight:bold;
}

.group_item_name_link
{
   text-decoration:none;
   font-size:medium;
}

.group_item_descr
{
   grid-area:3/1/3/3;
   overflow:hidden;
   color:black;
}

.group_item_hr_image
{

}

.group_item_stocks
{
   grid-area:11/1/11/1;
}


.group_item_cart_qty
{
  border:none;
  width:2em;
  text-align:right;
  background-color:lightgray;
}

.group_item_add
{
   grid-area: 11/3/11/2;
   align-self: end;
   text-align:right;
}

.group_item_freight
{
   grid-area:10/2/10/2;
   text-decoration:underline;
   color:blue;
   z-index:1000;
}

.group_item_info
{
   grid-area:10/2/10/2;
}

.group_item_info_icon
{

}


.group_item_staff
{
   grid-area:12/2/12/2;
}


.group_item_part_no
{
   grid-area:6/2/6/2;
}

.group_item_sup_part_no
{
   grid-area:7/2/7/2;
}

.group_item_cust_code
{
   grid-area:7/1/7/1;
}


.group_item_supplier
{
   grid-area:8/1/8/1;

}

.group_item_physical
{
   grid-area:9/1/9/2;
}

.group_item_country
{
   grid-area:8/2/8/2;
}



/*
    Single Web Section Wrapping CSS Grid.
*/
.group_sec
{
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows:auto;
  justify-content: space-evenly;
  grid-gap: 2px;
  background-color:#FFF;
  padding:5px;
}


/*
    Group sec CSS Grid
*/
.group_sec_image
{
   grid-area:1/1/1/3;
   justify-self: center;
}


.group_sec_icon
{
  grid-area:1/1/1/3;
  justify-self: center;
  max-width: 100%;
}


.group_sec_name
{
  grid-area: 2/1/2/3;
  max-height: 3em;
  overflow: hidden;
}


.group_sec_name_link
{
   text-decoration:none;
   font-size:medium;
   color:black;
}


.group_sec_descr
{
   grid-area:3/1/3/3;
   overflow:hidden;
   color:black;
}


.group_sec_staff
{
   grid-area:12/2/12/2;
}





/*
    Single Web Category Wrapping CSS Grid.
*/
.group_cat
{
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows:auto;
  justify-content: space-evenly;
  grid-gap: 2px;
  background-color:#FFF;
  padding:5px;
}


/*
    Group cat CSS Grid
*/
.group_cat_image
{
   grid-area:1/1/1/3;
   justify-self: center;
}


/*
   Group cat icon
*/
.group_cat_icon
{
  grid-area:1/1/1/3;
  justify-self: center;
  max-width: 100%;
}


.group_cat_name
{
   grid-area:2/1/2/3;
   height:2em;
   font-weight:bold;
}


.group_cat_name_link
{
   text-decoration:none;
}

.group_cat_descr
{
   grid-area:3/1/3/3;
   overflow:hidden;
   color:black;
}


.group_cat_staff
{
   grid-area:12/2/12/2;
}





/*
   TOP Headline CSS for the group-icons command
     These are for the first two articles secs or items etc in the group
*/
.group_headline
{
   /* grid-column: span 2; */
   border-color: yellowgreen;
   border-style: solid;
   border-width:2px;
   border-radius: 1.25em;
   padding: 12px;
}



.group_headline_icon
{
   width:100%;
}


.group_headline_name
{
   font-size:large;
   color:black;
   
}


.group_headline_read_more_div
{
    text-align: right;
}

.group_headline_read_more_link
{
    text-align:right;
    font-size:small;
    color:black;
}




/*
    Single Web Espdoc Wrapping CSS Grid.
*/
.group_doc
{
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows:auto;
  justify-content: space-evenly;
  grid-gap: 2px;
  background-color:lightgray;
  padding:5px;
}


/*
    Group Espdoc CSS Grid
*/
.group_doc_image
{
   grid-area:1/1/1/3;
   justify-self: center;
}

.group_doc_image_link
{
}

.group_doc_icon
{
  grid-area:1/1/1/3;
  justify-self: center;
  max-width: 100%;
}


.group_doc_name
{
   grid-area:2/1/2/3;
   max-height: 3em;
   overflow: hidden;
}


.group_doc_name_link
{
   text-decoration:none;
   font-size:medium;
   color:black;
}

.group_doc_descr
{
   grid-area:3/1/3/3;
   overflow:hidden;
   color:black;
   padding-top:5px;
}


.group_read_more_link
{
  color:black;
  font-size:small;
  text-align: right;
}

.group_doc_staff
{
   grid-area:12/2/12/2;
}





/* SMALL DISPLAY Image Slider CSS Settings ***********   */

#image_slider {
   width:100%;
   height:550px;
   margin:1px auto;
   background:#FFF;

/* border:2px solid #000; */

   overflow:auto;
   box-shadow:0 0 10px #000;
}

#image_slider ul {
   float:left;
   /* jp9 set to 9999 from 999 */
   margin-right:-9999em;
   white-space:nowrap;
   list-style:none;
}

#image_slider li {
   margin:3px;
   text-align:left;
   float:left;
   display:inline-block;
}

#image_slider img {
   border:0;
   display:inline;
   border:0px solid #A3CBE0;
}

#image_slider a:active img, #image_slider a:focus img, #image_slider a:hover img {
   border:1px solid #000;
}

#image_slider a {
   text-decoration:none;
   font-weight:normal;
   color:#000;
}

#image_slider a:active, #image_slider a:focus, #image_slider a:hover {
   color:#000;
}

#image_slider span {
   padding:1px 0 0;
   display:block;
}    

/* ------------- Flexcroll CSS ------------ */
.scrollgeneric 
{
    line-height:1px;
    font-size:1px;
    position:absolute;
    top:0px;
    left:0;
}

/*
   The scroll bar background.
*/
.hscrollerbase {
    height:12px;
    background:#FFF;
}


/*
     The scroll bar itself.
*/
.hscrollerbar {
    height:12px;
    background:lightgray;
    cursor:e-resize;
    padding:3px;
    border:0px solid #A3CBE0;
}

.hscrollerbar:hover {
    background:#222;
    border:1px solid #222;
}

.vscrollerbase 
{
    visibility: visible !important; 
}

/* 16 Jan 2019 Make sure the small screen ver fits to the screen width correctly */
#image_slider_mcontentwrapper
{
    width:auto;

}



/*
    SMALL Web News Blog Main DIV CSS Style Class
    29 March 2017  This is for the web news tags main div block. 
*/
.web_news_blog_div 
{
    display:grid;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    grid-gap: 5px;
    padding:0px;
}

/*
    Web News Blog li Item CSS Style Class
    29 March 2017  This is for the web news tags news item li block
*/
.web_news_blog_item 
{
    max-height: 200px;
    text-align:center;
}


/* Blog news item link css */
.web_news_blog_item a
{
    color:black;
}


/*
    Web News Blog Icon CSS Style Class
    29 March 2017  This is for the news items icon.
*/
.web_news_blog_icon
{
    max-width:150px;
    max-height:125px;
    margin: 0px;
    overflow: hidden;
}


/*
    Web News Blog Caption CSS Style Class
    29 March 2017  This is for the caption under the news icon.
*/
.web_news_blog_caption
{
    max-height:2em;
    margin-top:5px;
    padding:5px;
    overflow: hidden;
    text-decoration:none;
}



/* Display a Single Stock item with display_item Final */

/* Items image */
.display_item_image
{
 width:90%;
}



/* 
    Items image Mode 6 
    8 Aug 2019 this is for image items in the display_item func in mode 6.
*/
.display_mode6_item_image
{
 width:100%;
}




/*
    Shopping Cart General CSS >>>>>>>>>>>>>>>>>
*/

/* Shopping cart add button css note this is alkso used by the do_ajax prog. */
.cart_add_button_css
{
   border-style:solid;
   border-width:1px;
   border-color:#000;
   background-color:#FFF; 
}


/*
     5 Dec 2018 Back to Cart Icon css.
*/
.back_to_cart_icon
{
    width:25px;

}




/*
    @Group Sale Items CSS Grid  >>>>>>>>>>>>>>
       This is the surrounding grid for all of the sales items.
     This is used in the groupicons command.
*/
.sale_items_grid_container {

  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  justify-content: space-evenly;
  text-align:left;
  grid-gap: 1px;
  margin-top: 0px;
  margin-bottom: 0px;

}


/*
    Single Sale Item Wrapping CSS Grid.
*/
.sale_item
{
  display: grid;
  grid-template-columns: 1fr 1fr;
  justify-content: space-evenly;
  grid-gap: 2px;
  background-color:#FFF;
  padding:5px;
}


/*
    @Sale Item CSS Grid
*/
.sale_item_image
{
   grid-area:1/1/1/3;
}

.sale_item_image_link
{

}


.sale_item_icon
{ 
}

.sale_item_price
{
   grid-area:4/1/4/1;
   display:inline;
   color:crimson;
   font-size: larger;
}

.sale_item_discount
{
   grid-area:4/2/4/3;
   color:red;
   text-align:right;
   font-size:larger;
   font-style:italic;
}


/* The disocunt icon div */
.sale_item_discount_icon
{
  grid-area:1/2/1/2;
  text-align:right;
  height:40px;
}

/* The actual image used for the discount. */
.sale_item_discount_icon_image
{
     width:50px;
}

.sale_item_name
{
   grid-area:2/1/2/3;
   height:2em;
   font-weight:bold;
}


.sale_item_name_link
{
   text-decoration:none;
}

.sale_item_descr
{
   grid-area:3/1/3/3;
   overflow:hidden;
   color:black;
}

.sale_item_hr_image
{

}

.sale_item_stocks
{
   grid-area:11/1/11/1;
}


.sale_item_cart_qty
{
  border:none;
  width:2em;
  text-align:right;
  background-color:lightgray;
}

.sale_item_add
{
   grid-area: 11/3/11/2;
   align-self: end;
   text-align:right;
}

.sale_item_freight
{
   grid-area:10/2/10/2;
   text-decoration:underline;
   color:blue;
   z-index:1000;
}

.sale_item_info
{
   grid-area:10/2/10/2;
}

.sale_item_info_icon
{

}


.sale_item_staff
{
   grid-area:12/2/12/2;
}


.sale_item_part_no
{
   grid-area:6/2/6/2;
}

.sale_item_sup_part_no
{
   grid-area:7/2/7/2;
}

.sale_item_cust_code
{
   grid-area:7/1/7/1;
}


.sale_item_supplier
{
   grid-area:8/1/8/1;

}

.sale_item_physical
{
   grid-area:9/1/9/2;
}

.sale_item_country
{
   grid-area:8/2/8/2;
}



} /* End SMALL DISPLAY */