/*
    Peter Foster
    15 Feb 2018
    By Jack Penman
    
    Customer Style Sheets 
	This file holds the customer specific style sheets for esp.

*/


/*
    Set the Global Page Body Style
      This applies to ALL public website pages in Esp.
*/
body {
    max-width: 960px;
    height:auto;

    /* Set both to auto to center pages */
    margin-left:auto;
    margin-right:auto;
    margin-top:0%;

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

}

/*
      Set the Home Page Class Style
      This only applies to the index_Final.cgi home page.
*/
.homepage_body {

    width:90%;
    max-width: 960px;
    height:auto;

    /* Set both to auto to center pages */
    margin-left:auto;
    margin-right:auto;
    margin-top:0%;

    /* Set the Default font familay and size. */
    font-family:Verdana, Helvetica, sans-serif;
 /*   font-size: large;    */
    
    /* Set the Default font color. */
    color:#000000;
     border-radius: 20px;
    background-color:#f4f6f7;
}


.page_content_background 
{ 
/*   
 background: seashell none repeat scroll 0 0;
    filter: blur(16px);
    height: 100%;
    opacity: 0.71;
*/  
  padding: 5px;
    position: fixed;
    width: 83%;
    z-index: -2;
}

/*
    Home Page Class Style
      This applies only to the home page displayed by index _Final.cgi.
*/
.homepage_content
{
    /* height:auto; */
    width:95%;
    margin:10px;
    padding:10px;

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

    /* 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; 
}

/*
    Class header style for all pages, except home.
*/
.page_header
{
    z-index: 999;
    height: 215px;
 /* background: rgba(0, 0, 0, 0) linear-gradient(#74B9E2, #FFFFFF) repeat scroll 0 0; */
   /*  border-radius: 20px;
    padding: 10px;
    margin: 10px; */
    width: 100%;
}

.page_header_background 
{ 
  /*  
    background: seashell none repeat scroll 0 0;
    filter: blur(16px);
    height: 234px;
    opacity: 0.71;
*/

    padding: 5px;
    position: fixed;
    width: 89%;
    z-index: -2;
}

/*
     complogo CSS Class 
     19 Dec 2016
*/
.complogo_class
{
     margin:0px;
     padding:0px;
     display:inline;
}


/*
    H1 Heading CSS
*/
h1 {
    font-size:2em;
   
}


/*
    H2 Heading CSS
*/
h2 {
    display: inline;   /* get rid of the new line */
    font-size:1.5em;
}


/*
    H3 Heading CSS
*/
h3 {
    display: inline;   /* get rid of the new line */
    font-size:1em;
}



/*
   3 Oct 2017 Set the default image css to autoscale.
      This forces all of the images to scale properly.
*/ 
img {
       max-width: 100%;
       height: auto;
}


/*
    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 
{
    padding:0px;
    display:inline-block;
}

/*
    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 
{
    /* background-color: whitesmoke; */
    width: 210px;
    margin-left:10px;
    margin-bottom: 10px;
    max-height: 200px;
    float: left;
    list-style-type: none;
}



/*
    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;
    float: left;
    margin: 0px;
    position: relative;
    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
{
    background-color: lightskyblue;
    border-top: 6px solid #ffb300;
    width:200px;
    height: 60px;
    float: left;
    margin: 0px;
    padding:5px;
    position: relative;
    overflow: hidden;
    text-decoration:none;
}




/*
    Doc GroupTable CSS Style Class
    21 Aug 2016 > This is for the doc group tag in modes 0 and 1.
     NOT mode 2.
*/
.doc_group_table {

     font-size:small;
}


/*
     Doc Group Blog Main Div CSS
*/
.doc_group_blog_div
{
    padding:0px;
    display:inline-block;
}

/*
    Doc Group Blog Item CSS Style Class
    29 March 2017  This is for the doc group blog tag.
       it uses the list tags instead of the standard tbale.
*/
.doc_group_blog_item
{
    /* background-color: whitesmoke; */
    width: 210px;
    margin-left:10px;
    margin-bottom: 10px;
    max-height: 200px;
    float: left;
    list-style-type: none;
}



/*
    Doc Group Blog Icon CSS Style Class
    29 March 2017  This is for the caption under the doc icon.
*/
.doc_group_blog_icon
{
    width: 100%;
    max-height:125px;
    float: left;
    margin: 0px;
    position: relative;
    overflow: hidden;
    text-decoration:none;
}


/*
    Doc Group Blog Caption CSS Style Class
    29 March 2017  This is for the caption under the doc icon.
*/
.doc_group_blog_caption
{
     background-color: lightskyblue;
    border-top: 6px solid #ffb300;
    width:200px;
    height: 35px;
    float: left;
    margin: 0px;
    padding:5px;
    position: relative;
    overflow: hidden;
    text-decoration:none;
   font-size:smaller;
}





/*
      9 April 2017 Group Icons MAIN DIV CSS CLASS
        This is the CSS for the main class div ie all of the icons.
   ie this is the div around ALL of the group member icons.
*/
.group_icons_blog_div
{
    padding:0px;
    display:inline-block;
}



/*
    Group Icons Blog CSS Style Class
    9 April 2017  This is for the group icons blog tag.
       it uses the list tags instead of the standard tbale.
*/
.group_icons_blog 
{
    background-color: whitesmoke;
    width: 200px;
    height:200px;
    min-height: 260px;
    margin: 10px;
    float: left;
    position: relative;
    overflow:hidden;
}



/*
    Group Icons Blog Icon CSS Style Class
    9 April 2017  This is for the icon above the caption.
*/
.group_icons_blog_icon
{
    float: left;
    height: auto;
    min-height:215px;
    margin: 0px;
    position: relative;
    overflow: hidden;
    text-decoration:none;
    width: 100%;
    text-align:center;
}


/*
    Group Icons Blog Caption CSS Style Class
    9 April 2017   This is for the caption under the icon.
*/
.group_icons_blog_caption
{
    background-color: lightskyblue;
    border-top: 6px solid #ffb300;
    float: left;
    height: 60px;
    margin: 0px;
    padding:3px;
    position: relative;
    text-decoration:none;
    text-align:center;
    width:100%;
}


/*
    Group Icons Blog Caption URL Link CSS Style Class
    17 April 2017   This is for the caption url under the icon.
*/
.group_icons_blog_cap_url
{
    text-decoration:none;
}





/*
      Input Submit Button CSS Style
      Set the Style for all Input submit buttons.
*/
input[type=submit] {
    padding:5px 5px; 
    background:#ccc; 
    border:0 none;
    cursor:pointer;
    -webkit-border-radius: 5px;
    border-radius: 5px; 
}



/*
     Update Button 
      CSS Input Submit Button CSS Style
      Set the Style for the Update Buttons
*/
input[type=submit].update_button {
    padding:5px 5px;  
    border:0 none;
    cursor:pointer;
    -webkit-border-radius: 5px;
    border-radius: 5px; 
  font-size: medium;
}





/* 
     Stock Item Web Image Display CSS Class
*/
.item_web_image_css
{
    text-align:center;
}

/*
      Item Displayed RRP CSS Class
      20 Jan 2017 This is for the CSS for the website item RRP prices.
*/
.item_web_rrp_css
{
    vertical-align:top;
    font-size:larger;
}

/*
      Search Results Item Displayed Discount Message CSS Class
      8 Feb  2017 This is for the CSS for the website item Discount Message prices.
*/
.search_results_item_web_discount_css
{
    vertical-align:top;
    padding-left: 25px;
    font-size:smaller;
    color:red;
}

/*
      Item Displayed Discount Message CSS Class
      20 Jan 2017 This is for the CSS for the website item Discount Message prices.
*/
.item_web_discount_css
{
    vertical-align:top;
    padding-right: 25px;
    font-size:smaller;
    color:red;
}


/*
      Item Displayed Discount Icon CSS Class
      20 Jan 2017 This is for the CSS for the website item Discount Icon prices.
*/
.item_web_discount_icon_css
{
   vertical-align:top;
   height:27px;
}


/* 
     Stock Item Web Name Display CSS Class
*/
.item_web_name_css
{
    color:#006699;
    font-weight: bold;
    text-align: left;
    text-decoration: none;
    padding-right:10px;
}

/* 
     Stock Item Web Description Display CSS Class
*/
.item_web_descr_css
{
   color: gray;
   padding-bottom: 10px;
   padding-left: 3px;
   padding-top: 5px;
   text-align: left;
   text-decoration: none;
}

/* 
     Stock Item Web Purchase Display CSS Class
     This applies to the whole purchase table row not just the add button.
*/
.item_web_purchase_css
{
    text-align: left;
    text-decoration: none;
    padding:3px;
    font-size:smaller;
}

/* 
     Stock Item Web Currency prefix Icon CSS Class
     This is for the currency prefix icon.
*/
.item_web_currency_icon_css
{
   vertical-align:top;
   height:20px;
}


/*
    Freight option Radio Button CSS
         11 July 2016 The style for the css radio button.
        Set the size of the radio buttons.
*/
#cart_freight_item_option
{
   vertical-align: middle; 
   float:right;
}


/*
     Gre Freight Quote Button 
     CSS Input Submit Button CSS Style
      Set the Style for the get freight quote button
*/
input[type=submit].get_freight_button {
    padding:5px 15px;  
    border:0 none;
    cursor:pointer;
    -webkit-border-radius: 5px;
    border-radius: 5px; 
  font-size: medium;
}


/*
      Header Menu Bar Style
     ie the style of the main menu bar.
*/
table.header_menu {
    background-color: #FFFFFF;
}

/*
     [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:50px; */

}



/*
    Default User Menu Tag Main Style CSS.
       This css controls the style of the main menu Span element.
     The menu_css css id is the default used by the user menu tag if no
     css is is provided.
*/
#menu_css
{
  width:100px;
  height:1em;
  font-size:medium;
  color:black;
  background-color:lime;
  padding-left:5px;

}

/*
    User Menu Tag Individual Menu option styles.
       This css controls the styles of the individual menu options.
     The menu_css_options css id is the default used by the user menu tag if no
     css is is provided.
*/

#menu_css_options
{
  width:200px;
  font-size:small;
  color:blue;
  background-color:lime;
  padding-left:5px;
  padding-bottom:5px;
  margin:5px;
}


/*
    5 June 2009 Clear the paragraph margins etc as the new Tiny Mce uses them alot.
*/
p {
     margin:0px;
     border:0px;
}




/*
    Left Sidebar style for all pages, except home.
     Note if a page does not have a side bar the main content width will automatically be set to 
           100% and float left.
*/
.page_left_sidebar
{
    z-index:999;
    width:15%;
    height:auto;
    float: left;
}

/* 
   Main Page Content Class Style
     This sets the style of the main content of the page that appears to the right of the 
     left sidebar if there is one.
*/
.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;

}


/*
    Set the page footer style for all pages.
    NOTE add the page_footer id to the html footer table.
*/
.page_footer
{
    height: auto;
    margin: 10px;
    overflow: auto;
    padding: 10px;
    text-align: left;
    vertical-align: bottom;
    width: 95%;
    z-index: 999;
}




.web_footer
{
    /* Set the global hyperlink color */
    color:#000000;
    font-size: x-small;
   background-color: #FFFFFF;
    /* No lines under links */
    text-decoration:none;
}



/*
   This is a div that wraps around the other parts of a pages content.
*/
.page_wraper
{
  /* Set both to auto to center pages */
    margin-left:auto;
    margin-right:auto;
    margin-top:0%;
    background-color:white;

}



/*
    14 Dec 2016  Group Icon Table Class
       This is the CSS for the WHOLE table.
*/
.group_icon_table
{
    float:left;
    height:325px;
    text-align: center;
    width: 150px;
}

/*
      28 Nov 2016 group icons INDIVIDUAL MEMBER ICON CSS CLASS
   This is the css for the individual members icons. Use it to space them out a little etc.
*/
.group_member_icon
{
   max-width:200px;
}




/*
       Top Menu Link Options CSS

    10 March 2014 THis is the CSS for the top header menu options.
*/
#topmenu
{
    /* Set the global hyperlink color */
    color:#000000;
    font-size: medium;
    
    /* No lines under links */
    text-decoration:none;
}


/*
       Bottom Footer Links CSS

    10 March 2014 THis is the CSS for the bottom footermenu options.
*/
#footermenu
{
    /* Set the global hyperlink color */
    color:#000000;
    font-size: small;
    
    /* No lines under links */
    text-decoration:none;
}


/*
    Online Event Reg Table Class Style
*/
.web_event_reg_table
{
     width:100%;
}


/*
   Custom Event Online Registration Page Style
    This is for the event_register_Final.cgi prog custom event pages.
*/
#custom_event_reg_page_style
{
    font-size:small;
    color:#000000;
    background-color:#cccccc;
}

/*
    Email Us Page header style.
    This is for the email us pahe header only.
*/
.email_us_page_header
{
   z-index: 999;
    height: 205px;
    background: rgba(0, 0, 0, 0) linear-gradient(#74B9E2, #FFFFFF) repeat scroll 0 0;
    border-radius: 20px;
    padding: 10px;
    margin: 10px;
    width: 100%;
}

/*
    Leave a Message Page header style.
    This is for the leave a message header only.
*/
#leave_message_page_header
{
    z-index: 999;
    height: 205px;
    background-color:#FFFFFF;
    padding: 10px;
    margin: 10px;
    width: 100%;
/*    border-radius: 20px; */
}

/*
    Email Us Popup Page CSS Style
     5 June 2016 This is for the page body where users can leave an email message.
*/
.email_us_page_body_css
{
     width:95%;
}



/*
   Forum Category table style.
   This is the table that displays the list of posts and the replies to a post.
*/
#forum_cat_table_css {
    /* border:solid 2px red; */
    background-color:#cccccc;

   padding-bottom:5px;

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


/*
   Forum Post Heading style.
     This is the style of the individual posts heading.
*/
#forum_post_heading_row_css {

    background-color:#FFFF99;

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


/*
   Forum Post Replies To Heading style.
    This style is for the Replies to heading when viewing a post and its replies.
*/
#forum_post_replies_to_header_css {
    background-color:#66ffcc;

    /* Set the Default font familay and size. */
    font-family:Verdana, Helvetica, sans-serif;
    font-size:medium;
 
    /* Set the Default font color. */
    color:#000000;
}



/*
   Forum Post Reply Heading style.
     This is the style for a reply to a post.
*/
#forum_post_reply_heading_row_css {

    background-color:#99cccc;

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


/*
       Single stock item display Class Style
       used in display_single_stock_item_web func
         this goes with the display item = tag
  This is the main div.
*/
.display_single_stock_item
{
    width:250px;
    float:left;
    height:auto;
    padding:5px;

    text-align:left;
    line-height:0.95em;
}


/* 
       Single stock item display Class Style
       used in display_single_stock_item_web func
         this goes with the display item = tag
*/
.display_single_stock_item_table
{
    float:left;
    height:auto;

    /* Use 1% from the width. */
    padding-left:1%;
}



/* 
    display item_Final prog Class style
      This is for the iitem info table style.
*/
.display_item_final_table
{
    width:100%;
    float:left;
    height:auto;

    /* Use 1% from the width. */
    padding-left:1%;

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

/*
      24 Nov 2016 Display item Final cgi prog RIGHT hand panel css which is 
   what holds the itmes blurb text for stock items.
*/
#item_right_hand_panel_css
{
     float:left;
     padding:10px;    
}

/* 
    display event style
      This is for the display event = tag */
#display_event_final_table
{
    width:30%;
    float:left;
    height:auto;

    /* Use 1% from the width. */
    padding:1%;

    /* Set the Default font familay and size. */
    font-family:Verdana, Helvetica, sans-serif;
    font-size:small;
    background-color:#ffffff;
    /* Set the Default font color. */
    color:#000000;
}



/*
     Albert Specific CSS Styles 
    These set the way in which the Celestron stock item web pages etc are displayed.
*/

/* The style for the major headings on the items web page */
#celestron_item_section_heading
{
  height:1em;
  font-size:large;
  color:black;
  background-color:white;
  padding-left:5px;
}

/* The style for the stock items overview on its web page */
#celestron_item_overview
{
  height:1em;
  font-size:small;
  color:black;
  background-color:white;
}


/* The style for the stock items details on its web page */
#celestron_item_details
{
  height:1em;
  font-size:small;
  color:black;
  background-color:white;
}

/* The style for the stock items specifications on its web page */
#celestron_item_specs
{
  height:1em;
  font-size:small;
  color:black;
  background-color:white;
}

/* END Alberts CSS Settings */



/*
     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;
    width: 80%;
    border-color: white;
    border-width: 3px;
    height: 1rem;
    font-size: 1rem;
}

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


/* 
     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;
}

#jack88
{
    font-size:24px;
    
    /* Set the Default font color. */
    color:#ff0000;
}


/*
     Quick Cust login prompt style
*/
#quick_login
{
    width:192px;
    height:150px;
    margin:20px;
    text-align:center;

   /* background-image:url(../images1/login_bk_150high_1a_idx28366065.png); */

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


/*
     Quick Cust login Button style
*/
#quick_login_button
{
    width:auto;
    height:auto;
    text-align:center;
    color:#000000;
    font-size:medium;
}


/*
     My Home Cust login prompt style
*/
#myhome_login
{
    width:192px;
    height:150px;
    margin:20px;
    text-align:center;

    background-image:url(../images1/login_bk_150high_1a_idx28366065.png);

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


/*
     Staff login prompt style
*/
#staff_login_prompt
{
    /* Set the Default font familay and size. */
    font-family:Verdana, Helvetica, sans-serif;
    font-size:small;
}



/*
  Generate Cat Category and Section Listing Style
    ie the list of cats & sections that are included in a cat.
*/
.gen_cat_cat_sec_list_style
{
    font-size:small;
}

/*
    Set the global link properties ie color etc.
*/
a
{
    /* Set the global hyperlink color */
    color:#000000;

    /* No lines under links */
    text-decoration:underline;
}


/* Change the link Text color when mouse is over it */
a:hover 
{
    color:#07cbfc;
}

/*
    Book free assessment link class.
    Use white for the book free ass links.
*/
a.bookfreeaslink
{
    color: #808080;
}


/*
     Esodic doc icon css style
      Controls the docs icon image display style.
*/
#docicon_css
{
    padding-right:10px;
    padding-bottom:5px;
    border:0em;
   /* background-image:url(../images1/login_bk_150high_1a_idx28366065.png); */
}

/*
   doc icon Link CSS  
    controls the link style for the doc icon tag.
*/
#docicon_link_style {
    font-family:Verdana;
    font-size: small;
    font-weight:bold;
    text-decoration:none;
    color:#fff;
}



/*
    Doc But = Espdoc button style.
     This sets the style of the button displayed for the doc but=xxxx tag
*/
#doc_but_span_style {
    display:inline;
    float:left;
    width:100%;

    background-repeat:no-repeat;
    height:20px;

    padding-top:3px;
    padding-bottom:0px;
    padding-left:5px;
}


/*
   Doc But = Espdoc button http link style.
     This sets the style of the button displayed for the doc but=xxxx tag
*/
#doc_but_link_style {
    font-family:Verdana;
    font-size: small;
    font-weight:bold;
    text-decoration:none;
    color:#fff;
}



/*
    START catmenu = xxxx Options ****************************************
	The settings for the catmenu = menus are contained in the following.
*/

/* 
    catmenu = xxx command Drop down Menu Styles 
    NOTE these are for the cat drop down menus that are displayed at the top
	of each cat menu ie the title.
*/
span.catmenu 
{
    margin-bottom: 10px;
  /*  width: 180px; */
    
   /*  background-color:red; */
    
    /* Border around the entire drop down menu */
    border:solid 2px #F28411;
    padding:10px;

    /* float: left; */
    z-index:999;
}

/*
      Drop Down Menu CSS options.
      These are for category menus created with the catmenu=60006 tag.

*/


nav {
    margin-bottom: 10px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0px;
    text-align: center;
    z-index:999;
}
nav ul ul {
    display: none;
}
nav ul li:hover > ul {
    display: block;
  z-index:999;
}

/*
     CSS for the menu TOP items ie the main ones.
*/
nav ul {
    background-attachment: scroll;
    background-clip: border-box;
/*
   19 Dec 2016 I disabled the background color  
  background-color:#29C800;

*/
 /*   background-image: -moz-linear-gradient(center top , #efefef 0%, #bbbbbb 100%); */
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: repeat;
    background-size: auto auto;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
  /*  
     19 Dec 2016 
box-shadow: 0 0 9px rgba(0, 0, 0, 0.15);
*/
box-shadow: -5px 5px 10px #29C800;


    display: inline-table;
    list-style-image: none;
    list-style-position: outside;
    list-style-type: none;
    padding-bottom: 0;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 0;
    position: relative;
  z-index:999;
}
nav ul::after {
    clear: both;
    content: "";
    display: block;
  z-index:999;
}
nav ul li {
    float: left;
  z-index:999;
}
nav ul li:hover {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: rgba(0, 0, 0, 0);
/*    background-image: -moz-linear-gradient(center top , #4f5964 0%, #5f6975 40%); */
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: repeat;
    background-size: auto auto;
  z-index:999;
}
nav ul li:hover a {
    color: #fff;
  z-index:999;
}

/*
    Drop down menu a link  options.
*/
nav ul li a {
    color: #000000;
    display: block;
    padding-bottom: 0px;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 0px;
  z-index:999;
}

/*
     Menu options CSS. This is the css for each menu block item.
*/
nav ul ul {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: skyblue;
    background-image: none;
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: repeat;
    background-size: auto auto;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    position: absolute;
  z-index:999;
/*
    Set to 95% to stop the menu disspearing as mouse moves down to options.
*/
    top: 90%;
}
nav ul ul li {
    border-bottom-color: #575f6a;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-top-color: #6b727c;
    border-top-style: solid
    border-top-width: 1px;
    float: none;
    position: relative;
  z-index:999;
}


nav ul ul li a {
    color: #fff;
    padding-bottom: 5px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;
  z-index:999;
}

/*
    CSS Options for the mouse hovering over an open menu item.
*/
nav ul ul li a:hover {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: #74B9E2;
    background-image: none;
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: repeat;
    background-size: auto auto;
  z-index:999;
}
nav ul ul ul {
    left: 100%;
    position: absolute;
    top: 0;
  z-index:999;
}



/*    Shopping Cart CSS ************************************************************************** */

/*
      13 Oct 2010 Shopping Cart CSS Settings
       These are the settings for the display shopping cart prog.
*/

/*
    15 May 2017 Guest Proceed Checkout Button.
    This is for the guest mode checkout button.
*/
.proceed_button_guest
{
     width:50%;
     padding:0;
     margin:0;
     border-width:0px;
     background-color: transparent;
}


/*    
    View Shopping Cart Icon Class CSS.
      This is for the shopping cart icon.
*/
.view_cart_icon
{
     width:50px;
}

/*
    checkout Link CSS
*/
a#checkoutlink
{
     font-size:small;
}


/*
    This is the CSS for the cart icon
*/
#cart_icon_ajax_span
{
    position:absolute;
    left:-5px;
    top:0px;
    font-size:1.5em;
}



/*
    Cart Get Freight Quote Button
    11 Aug 2016
*/
#get_freight_button
{
    border:0 none;
    cursor:pointer;
    -webkit-border-radius: 5px;
    border-radius: 5px; 
    font-size:large;
}


/*
     Update Buttons CSS Class
     10 Aug 2016 This is the CSS for all of the update buttons.
*/
.update_button
{
    padding:5px 5px; 
    background:#bbb; 
    border:0 none;
    cursor:pointer;
    -webkit-border-radius: 5px;
    border-radius: 5px; 
    font-size:15pt;
}


/*
       14 march 2016 Shopping Cart Add button css Class
           This is the css for the ecom items Add button to purchase.
*/
.cart_add_button_css
{
 /*    font-size:x-small; */
/*      height:14px; */
}

/*
       Shopping Cart Main Wraper CSS
        This id applies to the main cart div that encloses ALL of the other cart elements.
   Set the height to auto so it applies to the whole page.
*/
#shopping_cart_page_wraper
{
  /* Set both to auto to center pages */
    margin-left:auto;
    margin-right:auto;
    margin-top:0%;
    width:90%;
    padding:10px; 

    height:auto;
    font-size:small;
    color:black;

/* Keep the background in the same place ie dont scrol with pages. 
     background-attachment: fixed;  
*/

 }



/* Shopping Cart Page Header CSS 
 24 Feb 2014 This is for the cart pages main header.
*/
#shopping_cart_page_header
{
  z-index: 999;
    height: 205px;
    background-color:#FFFFFF;
    padding: 10px;
    margin: 10px;
    width: 100%;
/*    border-radius: 20px; */

}


/* Shopping Cart Page Sub Header CSS 
 24 Feb 2014 This is for the cart pages sub header.
*/
#shopping_cart_page_sub_header
{
   z-index: 999;
    height: 205px;
  background: rgba(0, 0, 0, 0) linear-gradient(#74B9E2, #FFFFFF) repeat scroll 0 0;
    border-radius: 20px;
    padding: 10px;
    margin: 10px;
    width: 100%;

}


/* 
    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:#9ACBD9;
        width:100%;
       vertical-align:middle;
}

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

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


/*
    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;
}



/*    
     ESP A Links Class
      This is for all http links ie URLS
*/
.esp_links
{
      font-size:small;
}


/*
            Esp Pops Program CSS Settings
*/

/* Set the css for the stock item image display func */
body.pops_display_image_body
{
    font-size:small;
}




/*
    20 July 2014  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; 
    }



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


/*
      Global Table Settings
      14 Jan 2017 For all tables.
*/
table 
{
    border-spacing: 0;
}


/*
    Form Field Error Class
    for the form field errors.
*/
.form_field_error
{
     font-size:small;
     color:red;
}


/*
    Default list ul CSS Style
*/
ul
{
    list-style:none;
    padding-left:0;
}




/*
    LARGE TABLET Screen Media Rules These are for screens >= 500px.
     6 Oct 2017 these are media rules for larger screens.
      They are auto applied by the browser when the screen is larger than a certain size.
     The rules below will only apply for devices with a screen larger than 500px.
      ie this CSS block is ONLY loaded for devices with a screen 500px or bigger.

     XX DANGER XX These MUST be at the BOTTOM of the CSS so they override the above.
*/
@media screen and (min-width: 500px) 
{

body {
        background-color: #f4f6f7;
    }

h2 {
   font-size:medium;
}

.phone_complogo_class {
    width: 90%;
    margin: 0px;
    padding: 0px;
    display: inline;
}

} /* END Large Screen Media Rules */




/*
    SMALL Screen Media Rules These are for screens <= 480px.
     6 Oct 2017 these are media rules for smaller screens.
      They are auto applied by the browser when the screen is smaller than a certain size.
     The rules below will only apply for devices with a screen smaller than 480px.
      ie this CSS block is ONLY loaded for devices with a screen 480px or smaller.

     XX DANGER XX These MUST be at the BOTTOM of the CSS so they override the above.
*/
@media screen and (max-width: 480px) 
{

body {
        background-color: #f4f6f7;
    }

h2 {
   font-size:medium;
}

.phone_complogo_class {
    width: 90%;
    margin: 0px;
    padding: 0px;
    display: inline;
}

} /* END Small Screen Media Rules */