/* #ff33ff  Magenta lightened a tad, used for "See Shopping Cart" link
largePhoto
#6699ff royal blue of header and footer blocks. 2014 06  #00AFED to coincide new logo

#407EFF unvisited hyperlinks. royal blue similar to header and footer, but slightly deeper so they LOOK same colour 
    as header and footer. Also used for table headers in active part of application to draw more attention to them 
    than headers
#FFCCFF pale pink used for 1px borders
#F000F0 pinky purple used for hovering over hyperlinks
#FFFF00 bright yellow used for hover when it's a white hyperlink in the blue header or footer
 #ffff66 light yellow for larger blocks. Mainly used as hover colour for background in topNavigation and LeftColumn hyperlinks
#FFFFCC v. v. light yellow for behind Doc Toner comments

#EFF3FB v. light blue for alternating row styles in active pages, shopping basket etc.
*/

/* import reset.css to nullify browser defaults and make sure we have control 
as described CSS In Easy Steps P132 */
@import "reset.css";

/*2015 11 decided I want some numbered lists for mini refill instructions*/
.olNumbered {
    list-style-type: decimal;
    list-style-position: inside;
}

/* The body is the outermost layout component and contains the visible page content. Setting properties for the body 
element will help to create consistent styling of the page content and more manageable CSS. Besides using the body element 
to set global properties, it is common to use the body element to set the background color of the page and create a centered 
container for the page content to display. */
body {
    background-color: white;
    color: #303030; /* default text colour  #303030 is not quite black. */
    font-family: Verdana, Arial, Helvetica, sans-serif;
    /*2015 height and width from Google responsive design Hamburger menu example*/
    height: 100%;
    width: 100%;
    /*Google "responsive design recommendation for base font reading experience
        font-size: 16px; line-height: 1.2em 
        Furthermore, should aim to get 65 characters per line of text, counter tool here  http://www.lettercount.com/ */
    font-size: 16px;
    /* Font-sizing. Em recommended to allowing user to re-size.
    1 browser em is 16px. 62.5% of that is 10px. Then on, to get 18px, specify 1.8em */
    line-height: 1.25em;
    margin: 0 0 0 0;
    padding: 0 0 0 0; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
    text-align: justify; /* Pre-2015, used to have it set as center to support some bullshit in IE 5 browsers. But fuck IE5, eh */
}

p {
    padding: 1px 0 1px 0; /*top right bottom right 2015 05 phones: tad of separation between paragraphs (top, right, bottom, left) */
}

.paragraphRed {
    color: red;
}


.docTonersAsides {
    font-family: 'Comic Sans MS';
}


/* Commonly used to style page titles. */
h1 {
    /*2015 05 all these to make H1 look right on a phone*/
    font-size: 1.5em;
    font-weight: bold;
    line-height: 1.4em;
    text-align: center;
    padding-bottom: 0.2em;
}
/*2015 05 all these to make h2 look right on a phone*/
h2 {
    font-size: 1.2em;
    font-weight: bold;
    line-height: 1.5;
    text-align: center;
}

h3 {
    font-size: 1.1em;
    font-weight: bold;
    line-height: 1.3em; /*big in comparison to others, needed to get video captions looking right in productDetail.aspx */
}

h4 { /* using for occasional captioning: effectively bold text in a bit more space*/
    font-size: 1em;
    font-weight: bold;
    line-height: 1.4em;
    text-align: center;
}

/* Sets the style for unvisited links. */
a, a:link {
    color: #407EFF; /* #407EFF;  #6699ff; */
    font-weight: bold;
    text-decoration: none;
    padding-top: 0.9em; /*to create at least 48px high touch point for phones */
    padding-bottom: 0.9em;
}
    /* Sets the style for visited links. */
    a:visited {
        color: #B8C1B8 /*#999999*/;
        font-weight: bold;
        text-decoration: none;
    }
    /* Sets the style for links on mouseover. */
    a:hover {
        color: #F000F0;
        text-decoration: underline;
    }

    /* Sets the style for a link that is being activated/clicked. */
    a:active {
        color: #CC00FF;
    }


/*2015 responsive images
set to 100% for content areas in phones:
that doesn't work for portrait images, so for them override with .phonePhotoPortrait
override in media query block min-width 481px to allow flow: tyring max-width:100% which does not allow bigger than native size 
==========================================================================================*/
main img {
    width: 100%;
}

.inlinePhoto {
    /*needed because little red ticks for best printers features expanded to 100% width by default*/
    /*only used for the ticks in  test-lab-printer=reviews.html  */
    /* OLD until 2017 1109
    width: 1em;  IE failed to pick up 'initial' which worked OK Chrome 
    max-width: 100%;

    NEW for the green ticks */
    width: 1.35em;
    max-width: 100%;
    margin-bottom: -0.25em;
}

.inlinePhotoMeh {
    /* Needed for the Facebook Meh symbol at bottom of Best Printers for refilling page */
    display: block;
    max-width: 100%;
    width: initial;
    margin: 0.1em auto 0.1em auto;
}




/* following tables should just affect tables output programmatically by aspx pages, for product tables etc., since all
layout in static html is handled by CSS divs. Although, at the moment the table  containing a list of products in toner_refill_products.aspx 
    is further customized by a class called tableProductList.
    201505 .tableProductList table (in toner_refill_products.aspx) is the one I'm having to tweak because its too wide for phones.
    The .tableProductList table also has an id of #tbl, so can use that to get a reference to it as well   
    Also, any edits made in this top level <table> section may cascade down to 
    the shopping basket, so suggest we do any tweaks peicemeal to avoid that. 
    ALSO, there are tables in the legacy product details information, like for the CP1215. That text is in <td> elements and not in <p> tags*/
table {
    /* margin:auto /* centers table in parent */
    margin-left: 0px;
    margin-top: 4px;
    margin-bottom: 4px;
}

/*found I was setting th background to this blue color that got from auto grid style. Better to set it here for */
/*all <th> elements and not do it piecemeal in code */
th {
    background-color: #6699ff; /*#407EFF; /* #6699ff; /* #3366CC; */
    color: #FFFFFF;
    text-align: left;
    padding: 0.15em 1em 0.15em 0.5em; /* top, right, bottom, left respectively */
}

/* really wanted to tweak the padding in cells of productList for a machine, decided tentatively to set it 
globally for all tables here - a decision I might regret. An em is 16px */
td {
    /* killing padding to try get hyperlink fill cell for cell mouseover */
    /* padding: 0.25em 1em 0.25em 0.5em; /* top, right, bottom, left respectively */
    /*overflow: hidden;  2015 0528 to regularize cells in shopping cart table. Also, looks suspicious  */
}

    td a:link {
        /* slightly darker links in active part of app. to attract eye there */
        color: #0456FF /*#303030 #0456FF*/;
        font-size: 0.8em; /* next 2 lines achieve mouseover on whole table cell with table width adjusting to biggest element, 
        also requires overflow: hidden in td (parent) */
        display: block; /*table-cell*/
        border-collapse: collapse;
    }
    /* Sets the style for links on mouseover. */
    td a:hover {
        color: #F000F0;
        text-decoration: underline;
        /* trying to achieve mouseover on whole table cell */
        background-color: #ffff66;
    }

    /* deal with photos and list bullets still found in old legacy product details tables */
    td img {
        /* gives some semblance of centering them. margin: auto  not working */
        margin-left: 35px;
    }

    td li {
        /* only affects bullet points of legacy product detail tables */
        list-style-type: disc;
        list-style-position: inside;
    }

.tableProductList { /* controls table in toner_refill_products.aspx  Overrides default table 
styles which controls toner_refill_printers.aspx */
    max-width: 99%; /*lets it spread to 99.5% but then contrains. Can't leave it blank and 100% because get those scroll bars*/
}

    .tableProductList td {
        border: 2px solid #FFFFFF;
        padding: 0px 3px 0px 3px;
    }

    .tableProductList a:link {
        display: block;
        /*width:55px;*/
        text-align: center;
        height: 36px; /*extends height to two lines of text that can appear in other cells */
        line-height: 36px; /* centers info link vertically */
    }

    .tableProductList a:hover {
        /*kludged "full info" literal into center by writing spaces before and after.  Now need to 
     kludge hyperlink line off so line don't show under spaces (air)*/
        text-decoration: none;
    }

/*2016 12 needed to format new table in members/seePreviousOrders.aspx for customers to see orders
   Based it on the above tableProductList class, then added needed tweaks */
.tblCustomerSeeOrders { /* controls table in toner_refill_products.aspx  Overrides default table 
styles which controls toner_refill_printers.aspx */
    max-width: 99%; /*lets it spread to 99.5% but then contrains. Can't leave it blank and 100% because get those scroll bars*/
    font-size: 0.8em;
}

    .tblCustomerSeeOrders td {
        border: 2px solid #FFFFFF;
        padding: 0px 3px 0px 3px;
        line-height: 3.8em;
    }

    .tblCustomerSeeOrders a:link {
        display: block;
        /*width:55px;*/
        text-align: center;
        height: 18px; /*extends height to two lines of text that can appear in other cells */
        line-height: 18px; /* centers info link vertically */
        padding-top: 1.5em;
        padding-bottom: 1.5em;
        min-width: 48px; /*make sure touch points OK on 1 digit paging  links*/
    }

    .tblCustomerSeeOrders a:hover {
        /*kludged "full info" literal into center by writing spaces before and after.  Now need to 
     kludge hyperlink line off so line don't show under spaces (air)*/
        text-decoration: none;
    }

    .tblCustomerSeeOrders th {
        text-align: center;
    }


.buyNowHover /*gets added to row in products list table to give the mouseover effect, so you know what you're about to buy*/ {
    background-color: #ffff66;
}

hr {
    border: none;
    color: #FFCCFF;
    background-color: #FFCCFF;
    height: 1px;
    margin: 6px 0px 6px 0px;
}

/* 2015 0501 deleting all the old outWrapper CSS. Now replaced by #container01 hoping to simplyfy, but doubtless will delete some useful stuff
    so bringing in the old file to the solution. Now called ZZZOLDurefilltoner.co.uk.css */

.videoWrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
    margin-top: 0.4em;
    margin-bottom: 0.4em;
}

    .videoWrapper iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }


/* defines a div to wrap round photos to give a background scale and ability to caption  
 see http://www.labnol.org/internet/design/add-text-captions-align-images-html-css/2309/  */
/* note how called in the doc, with a DIV must be 2px wider than the photo  <div class="picture right" style="width:122px;"> */
.picture {
    background-color: white; /* same as body background #F4F4F4 */
    /*border: 1px solid #FFECFF;*/
    padding: 3px;
    font: 1em;
    text-align: center;
}

    .picture img { /*border: 1px solid #CCCCCC; */
        vertical-align: middle;
        margin-bottom: 3px;
    }

.right {
    margin: 16px 16px 16px 26px;
    float: right;
}

.left {
    margin: 16px 26px 16px 16px;
    float: left;
}

.bigText {
    /*first used printer confirmation names in catalogue. reallyBigText class seemed too big */
    font-size: 1.6em;
    display: inline;
}


.photoWrapperPortraitRight { /*wraps photos to enable a caption*/
    /*for portrait photos: centered for phones, but then float right in widescreens*/
    padding: 4px;
    font-size: 1em;
    font-style: italic;
    text-align: center;
}

.photoWrapperPortraitLeft { /*wraps photos to enable a caption*/
    /*for portrait photos: centered for phones, but then float left in widescreens*/
    /*actually necessitated by productDetail photos of starter kits etc.*/
    padding: 4px;
    font-size: 1em;
    font-style: italic;
    text-align: center;
}



.photoWrapperLandscapeLeft {
    padding: 4px;
    font-size: 1em;
    font-style: italic;
    text-align: center;
}

.photoWrapperLandscapeRight {
    padding: 4px;
    font-size: 1em;
    font-style: italic;
    text-align: center;
}


.breadcrumb {
    /*margin: 0px 0px 0px 180px;  pre-responsive */
    margin-top: 0; /* fat 48px hyperlinks clash with those on logo* ? 201612 don't appear to now, so took off was 0.9em */
    line-height: 2.25em; /* phone touch points*/
}

.productPrice {
    /* clear:both; would be the best practice, but created a narrow homepage problem in Chrome and Safari */
    padding-top: 10px;
    font-size: 1.1em;
    text-align: center;
    clear: left;
}

    .productPrice input /* effects submit button */ {
        height: 48px; /*phone touch point */
        width: 140px;
        font-size: 1.2em;
        font-weight: bold;
        margin-top: 10px;
        margin-bottom: 10px;
        /*color: #407EFF; /* same colour as hyperlinks */
        cursor: hand;
        cursor: pointer;
        /*padding: 0px;*/
    }


.productDetailWrapper {
    color: #000000; /* black, i.e. higher contrast on emergent details of interest */
}

    .productDetailWrapper ul {
        list-style-type: disc;
        list-style-position: inside;
        margin-top: 6px;
        margin-bottom: 6px;
    }

    .productDetailWrapper li {
        line-height: normal;
        font-weight: normal;
        padding: 0px 2px 4px 2px;
    }

    .productDetailWrapper p {
        margin-top: 6px;
    }

.clearHyperlinkOfFloats {
    clear: both;
}

.lblAlert
/* for all those .net message labels where something wrong, or action needed*/ {
    color: Red;
    font-weight: bold;
    font-size: 1.2em;
}

.lblOK
/* for all those .net message labels confirming something happened OK */ {
    color: Green;
    font-weight: bold;
    font-size: 1.2em;
}

.btnAction
/* attractive action button style for whole app. Want it to 
be prominent and invite action */ {
    font-size: 1.2em;
    font-weight: bold;
    padding: 4px 10px 4px 10px;
    margin: 2px 10px 2px 10px;
}

.btnAction2
/* use where want same style without Liang mouseover, like panels for UnderDev email reg.*/
/* attractive action button style for whole app. Want it to 
be prominent and invite action */ {
    font-size: 1.2em;
    font-weight: bold;
    padding: 4px 10px 4px 10px;
    margin: 2px 10px 2px 10px;
}

.btnPhoneTouchPoint { /*phone touch points need to be at least 48px x 48px*/
    height: 48px;
    min-width: 50px;
    padding: 0px 6px 0px 6px;
    font-size: 1.1em;
    font-weight: bold;
}


.btnPhoneLoginControl { /*based on btnPhoneTouchPoint, but tweaked as rendered in table in aspx login control */
    height: 48px;
    min-width: 50px;
    padding: 0px 6px 0px 6px;
    font-size: 1.1em;
    font-weight: bold;
    margin: 0.5em auto 0.5em auto;
}


.btnPhoneRefillProductsBuyNow { /*narrower button needed for phones in toner_refill_products.aspx table*/
    font-size: 1.2em;
    font-weight: bold;
    padding: 0px 3px 0px 3px;
    /*margin: 0px 2px 0px 2px;*/
    height: 50px;
}

.btnPhoneCheckOut {
    margin-top: 0.5em;
    margin-right: auto;
    margin-left: auto;
    display: block;
    width: 300px;
    font-size: 1.2em;
    font-weight: bold;
    height: 48px;
}

.btnPhoneCenterInTableCell {
    height: 48px;
    min-width: 50px;
    padding: 0px 6px 0px 6px;
    font-size: 1.1em;
    font-weight: bold;
    margin: 0.5em auto 0.5em auto;
    display: block;
}

#container01 {
    padding: 4px; /*on phones, doesn't look right having text go right up to edge of screen*/
}

#header {
    /*background-color: pink;*/
    width: 100%;
    height: 52px;
}


#leftbarfakeforphone {
}

.fakeforphone {
    /*background-color: plum;
    color: white;*/
}

.fakeforphoneHide {
    display: none;
}


#container01 #leftcolstatic {
    /*basically this is the fixed left hand manufacturer link list for wider screens */
    float: left;
    /*margin: 0px 30px 12px 0px;*/
    /*padding: 0px 24px 10px 10px;*/ /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
    width: 150px /**/;
}

    #container01 #leftcolstatic h3 {
        padding-left: 4px;
        padding-bottom: 5px;
        text-align: left;
        font-size: 0.95em;
        font-weight: bold;
    }

    /*  were sending the left manufacturer names grey, now consolidating all links blue tweak to same size as topNavigation links */
    #container01 #leftcolstatic a:link {
        font-size: 1.1em;
        display: block;
        padding-left: 5px;
    }

    #container01 #leftcolstatic a:hover {
        color: #F000F0;
        background-color: #ffff66;
        text-decoration: none;
    }

    #container01 #leftcolstatic ul {
        line-height: 38px; /*incredibly, vertically centres the manufacturer name links */
        margin-right: 8px;
        /* draw pale pink separators */
        /*border-top-style: solid;
    border-top-color: #FFCCFF;
    border-top-width: 1px; */
    }

    #container01 #leftcolstatic li {
        /* draw pale pink separators */
        /*border-bottom-style: solid;
    border-bottom-color: #FFCCFF;
    border-bottom-width: 1px;   */
    }

    /*provides colour change confirmation of which manufacturer selected in aspx pages*/
    #container01 #leftcolstatic a.selected {
        color: white;
        background-color: #6699ff /*  #6699FF*/;
    }




#container01 main #leftbarfakeforphone a:link {
    font-size: 1.2em;
    display: block;
    padding: 0.80em; /*2015 050 touch target adjustment for phones*/
    text-align: center;
}

#container01 main #leftbarfakeforphone a:hover {
    color: #F000F0;
    background-color: #ffff66;
    font-weight: bold;
    text-decoration: none;
}







.nav /*the class of #leftbar div. By default, it's off canvas to the left */ {
    z-index: 10;
    width: 235px;
    background-color: #6699ff; /* make like footer */
    position: absolute;
    /* This trasform moves the drawer off canvas. */
    -webkit-transform: translate(-300px, 0);
    transform: translate(-300px, 0);
    /* Optionally, we animate the drawer. */
    transition: transform 0.3s ease;
}

/* original Udacity solution
       .nav.open {
            -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
          }
        */
.navOnCanvas /*exactly the same as .nav class, except translate now set to 0px so it comes on screen*/ {
    z-index: 10;
    width: 235px;
    background-color: #6699ff; /* make like footer */
    position: absolute;
    /* */
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    /* Optionally, we animate the drawer. */
    transition: transform 0.3s ease;
}



.hamburgericon {
    float: right;
    padding: 9px;
}








/* Contact form definitely controls contact form layout in  schools-public-sector.html and 
    should for contactform.aspx, although couldn't confirm that  */
#contactUs {
    text-align: left;
}

#contactUsForm {
    margin: 20px 0;
}

    #contactUsForm .line {
        margin: 10px 0;
    }

    #contactUsForm #messageLine {
        margin: 10px 0;
    }

    #contactUsForm .line label {
        display: inline-block;
        width: 100px;
    }

    #contactUsForm input[type="text"] {
        width: 200px;
    }

.contactTel {
    display: inline-block;
    margin-right: 30px;
}

.contactInfo {
    margin: 30px 0;
}

.contactConfirm {
    color: green;
    font-weight: bold;
    margin-top: 0.6em;
    margin-bottom: 0.6em;
}

/* 2015 0528 #shoppingCart is a div, #grid is the shopping cart table output by ASP.NET gridView object */
#shoppingCart #grid /* so, referring to the table itself */ {
    text-align: center;
}

    #shoppingCart #grid th, #shoppingCart #grid td {
        text-align: center;
        border: 2px solid white;
        padding: 2px;
    }

.txtShoppingCartQty {
    width: 45px;
    height: 46px;
    font-size: 1.3em;
}

.btnShoppingCartDelete {
    height: 48px;
    min-width: 48px;
}

#shoppingCart table { /*horizontally centre and line the 2 tables in the shopping cart*/
    margin: 0 auto 0 auto;
}

#shoppingCart .tblFinancials {
    margin-top: 0.5em;
}

/*class to control look of "financials" table in shopping basket, that contains exVAT total, total to pay etc.*/
.tblFinancials {
    border-top: 0.5em solid #6699ff;
}

    .tblFinancials td {
        padding: 0.25em;
        line-height: initial;
    }

.tblFinancialsTotalRow td { /*more prominent text for transaction total*/
    font-weight: bold;
    font-size: 1.2em;
    color: black;
    padding: 0.35em;
}

#shoppingCartButtons { /*div in ShoppingCart containing "carry on shopping" buttons etc.*/
    margin-top: 0.55em;
    margin-bottom: 0.25em;
    text-align: center;
}

.imgBlockIcon {
    /*originally for flag icon on shoppingCartShipCountry.aspx. For smallish icon that we don't want to expand to 100% width*/
    max-width: 100%;
    width: auto; /*FOR IE9 which does not respect initial*/
    display: block;
    margin: auto;
}



#changeDeliveryCountryLinks { /*div in shoppingCart.aspx,contains flags and links to change destination country*/
    text-align: center;
    width: 100%;
    margin: 0.55em auto;
}

    #changeDeliveryCountryLinks a:link { /*tweak normal a:link padding (normally for text) */
        vertical-align: middle;
        display: block;
        padding: 0.8em 0.4em 0.8em 0.4em;
        white-space: nowrap;
    }

    #changeDeliveryCountryLinks #shoppingCartNoPaddingImageLink { /*a hyperlink */
        padding: 0;
    }

.shopCartChangeCountryLabel { /*advice label spans just before flags that say "change country" in different languages*/
    text-wrap: none;
    display: inline-block;
    margin-left: 0.3em;
    margin-right: 0.3em;
}



.divOrderPipe1ChooseLoginOrNot {
    text-align: center;
    margin: 1em auto;
    line-height: 1.75em;
    background-color: #FFFFCC;
    padding: 0.5em;
    width: 94%;
}

/* Checkout */
.divShoppingCartShipCountryLeft {
    text-align: center;
    margin-top: 0;
    margin-bottom: 1em;
    margin-left: auto;
    margin-bottom: auto;
    line-height: 1.75em;
    background-color: #FFFFCC;
    padding: 0.5em;
    width: 94%;
}

.lstShoppingCartShipCountry { /*drop down list to select a new delivery country*/
    height: 2em;
    font-size: 1.5em;
}

    .lstShoppingCartShipCountry option {
        min-height: initial;
        height: 0.7em;
        padding: 4px;
    }

.txtShoppingCartShipCountry { /*for the EU VAT number text box*/
    font-size: 2em;
    width: 78%;
    height: 1.1em;
    vertical-align: middle;
}


#sameBillingAddress p {
    margin: 10px 0;
}

#sameBillingAddress input {
    margin-right: 10px;
}

/*radio buttons removed from tables .transactionBlock and .radholder handle their new rendering (for 
    choosing whether delivery address same as CC address*/
.transactionBlock {
    padding: 8px;
    line-height: 1.25em;
}

.radHolder {
    display: block;
    padding: 0.7em 1.1em 0.9em 1.1em;
    float: left;
}

.lightYelllowBackground { /*something generic for divs to get the light yellow used in active pages of check out*/
    background-color: #FFFFCC;
}

.CartSummary, .CartSummary table {
    margin-left: 0;
}

.completeOrder {
    text-align: center;
    width: 100%;
}


/*special formatting for table in OrderPipe3LoggedIn for pre-existing delivery addresses*/
.tblPreexistingAddress {
    width: 100%; /* get going right across phone*/
}


    .tblPreexistingAddress td {
        border: none;
        padding: 0.2em;
        background-color: #FFFFCC;
        border-bottom: 12px solid white;
        font-size: 1em;
    }

.button /*2015 09 still used in schools and public sector .html ?*/ {
    FONT-WEIGHT: bold;
    WIDTH: 180px;
    HEIGHT: 35px;
    margin: 0px 4px 0px 4px;
}

.smallPrint /*2015 09 actually used in various pages on the site*/ {
    font-size: small;
    margin-top: 12px;
}

.LiWithDiscs {
    /* only affects bullet points of legacy product detail tables */
    list-style-type: disc;
    list-style-position: inside;
}

    .LiWithDiscs li {
        /* only affects bullet points of legacy product detail tables */
        margin: 4px 0px 4px 0px;
    }

.textSuccess {
    color: Green;
    font-weight: bold;
}

.textAttention {
    color: Red;
    font-weight: bold;
}

.overRideWholeCellAnchorTag a:link {
    display: inline;
    font-size: 100%;
    padding: 0;
}

/*June 20 2014. Experimental class for h1 in product detail pages. Idea is to make it a blue block with 
    white inner print like the preceeding tables in the selection pages. Of course, if go for this, will 
    have to add the class to all pages one by one 
    Idea seems to have legs. Just added to Samsung M2825 for now (326 & 327.ascx)
    <h1 class="productDetailH1">
    Also, need to ease off the colour of all these blue header elements, to 1. blend with new logo and 
    2. take less focus from BUY NOW button
    */
.productDetailH1 {
    background-color: #407EFF; /* #6699ff; /* #3366CC; */
    color: #FFFFFF;
    text-align: left;
    padding: 0.2em 0.2em 0.2em 0.2em; /* top, right, bottom, left respectively */
    margin: 4px 0px 0px 0px; /*otherwise, very tight to the breadcrumb */
}

.freekitlongtextbox {
    width: 500px;
    font-size: 14px;
}

.phonePhotoPortrait { /*default image width (dictated by phone view) is 100% : OK for 
                          landscape, but need to override for portrait aspect photos*/
    display: block;
    margin: 0 auto;
    max-width: 70%;
}

.centered { /*put on the div that's parent of the thing you want to centre*/
    text-align: center;
}

.divCenteredSmallMarginTopBottom { /*same as .centered, but adds 0.3em margin top and bottom*/
    text-align: center;
    margin-top: 0.3em;
    margin-bottom: 0.3em;
}

.centeredAndMarginTopBottom { /*same as .centered, but adds 0.6em margin top and bottom*/
    text-align: center;
    margin-top: 0.6em;
    margin-bottom: 0.6em;
}



.testimonial {
    font-style: italic;
    padding-bottom: 6px;
}

.extraWideScreenContent {
    /*hides content by default for phones*/
    /*overridden later in media query to show it for wider screens*/
    display: none;
}

.phonehyperlink {
    /* to make in-text hyperlink into bigger touch targets */
    padding: 0.9em;
    display: block;
}

/*control the transverse phone icon*/
.headerphoneicon {
    padding-top: 3px;
}

/* #leftbar is the fly-in menu when hamburger icon is clicked */
/* Care! it's controlled both by these styles and the classes .nav and .nav.open (when screen narrower 
    than 400px at least?*/

#container01 #leftbar {
    border-radius: 3px;
    /*color: white;*/
}


    #container01 #leftbar h3 {
        text-align: center;
        padding: 5px;
        color: white;
    }

    /*  were sending the left manufacturer names grey, now consolidating all links blue tweak to same size as topNavigation links */
    #container01 #leftbar a:link {
        color: white;
        font-size: 1.2em;
        display: block;
        padding: 11px 0px 11px 11px;
    }

    #container01 #leftbar a:hover {
        color: #F000F0;
        background-color: #ffff66;
        font-weight: bold;
        text-decoration: none;
    }

    #container01 #leftbar ul {
        /*line-height: 48px;*/ /*incredibly, vertically centres the manufacturer name links */
        /*margin-right: 8px; */
    }

    /*provides colour change confirmation of which manufacturer selected in aspx pages*/
    #container01 #leftbar a.selected {
        color: white;
        background-color: #6699ff /*  #6699FF*/;
    }

/* #footer (megalinks footer) is always within #container01 and sometimes within main as well
    seem to be able to refer to all with #container01 #footer  */
#container01 #footer {
    background-color: #6699ff; /* #6699ff  old before 2014 06 */
    border-radius: 3px;
    color: white;
    text-align: center; /* at a first pass for phones, hyperlinks are looking good centered*/
}

    #container01 #footer a:link {
        color: white;
        font-size: 1.2em;
        display: block;
        padding: 0.70em; /*2015 050 touch target adjustment for phones*/
    }

    #container01 #footer a:hover {
        color: #F000F0;
        background-color: #ffff66;
        font-weight: bold;
        text-decoration: none;
    }

/* #container01 main #footer a:visited {color: #E0E0E0;}   leave it to inherit the site grey ? */
#container01 #copyright {
    text-align: right;
    padding-right: 1.5px;
    font-weight: normal;
}

    #container01 #copyright a:link {
        font-size: 0.8em;
        font-weight: normal;
    }

    #container01 #copyright a:hover {
        color: #F000F0;
        background-color: #ffff66;
        /*font-weight: bold;*/
        text-decoration: none;
    }

.leftcol {
    /* sets an unspecific rule to keep the "permanent" left bar hidden for phones 
        but it is overridden by more specific style rule in media query block min-width: 481px query 
        that will match for wider screens
        */
    display: none;
}

#paymentLogos {
    text-align: center;
    padding-top: .2em;
    padding-bottom: .2em;
    margin-top: .4em;
}

    #paymentLogos img {
        margin: 0.15em;
        width: auto; /*FOR IE9 which does not respect initial*/
        width: initial; /*override 100% phone width for big images*/
        max-width: 100%;
    }


.cookielaw {
    position: fixed;
    bottom: 0;
    left: 0;
    margin: 0;
    background: #FFFF00;
    width: 100%;
    z-index: 2;
    visibility: hidden;
}

    .cookielaw p {
        padding: 0.3em;
    }

.tblCellHiddenPhones { /*no width to display whole table in phones*/
    display: none;
}

.tableHeaderProductList { /*economise space not outputting the verbose table header on the product list for phones*/
    display: none;
}

.phoneTextArea { /*get right format for the message from customers in contactform.aspx*/
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
}

/*Make customer form text nice and big. Remember, the default design is for widescreen. Final media query in the sheet
    re-defines  these tables for phones <481*/

#pnlEnterDeliveryDetails input, select {
    font-size: 1.6em;
}

.deliveryDetails input {
    font-size: 1.6em;
}

/*to get customer data input looking right in widescreen. But specificity biting me in ass 
    on phones, where the cells need to expand down for content with bigger touch points*/
#pnlEnterDeliveryDetails tr, #pnlCreateLogin tr {
    height: 3em;
}

#pnlEnterDeliveryDetails .rowValidationSummary {
    height: initial; /*post-production edit   0.2em*/
}

.shortField {
    width: 2.5em;
}

.titleField {
    width: 4em;
}

.mediumField {
    width: 10em;
}

.longField {
    width: 18em;
}

.veryLongField {
    width: 23em;
}

.yellowRow {
    background-color: #FFFFCC;
}

.deliveryCountryConfirm {
    font-size: 1.6em;
    font-weight: bold;
}

#hypToShoppingCart {
    display: inline;
}

/*2015 0927 post production hack*/
#tblCreateLogin .rowValidationSummary {
    height: initial;
}

/*2016 0915 special to control active flag image that changes according to delivery country in shoppingCart*/
.activeShoppingCartFlag {
    width: 48px; /*want it to be it's natural size on all devices*/
    margin: -1.4em 0.2em -1.5em 0.2em;
}

/*2016 12  concept of a top menu item is for links that appear when they've taken some commiting action, so will have
    link to an active shopping cart, links only available to logged in customers, but style is similar to bottom page 
    links, but smaller font */
.liTopMenuItem {
    background-color: #ff33ff /* #6699ff */;
    border-radius: 0.5em;
    max-width: 90%;
    text-align: center;
    margin: 0 auto 0.2em auto;
}

    .liTopMenuItem a {
        color: white;
        font-size: 1em;
        /* when icon went in, these two made it too physically fat */
        display: block;
        padding: 0.80em;
    }

        .liTopMenuItem a:hover {
            text-decoration: none;
            background-color: #FFFF00;
            color: #ee00ee;
        }

    .liTopMenuItem #lnkSeeCart { /*tweaks padding on link to cart that has Icon, 'cos icon makes it verticall
                                fatter than the one without the icon*/
        color: white;
        /*font-size: 1em;*/
        display: block;
        padding: 0.125em;
    }

.aspNetControlTextInput {
    font-size: 1.4em;
    height: 1.4em;
    width: 320px; /*went for fixed size here because, for phones, width of text boxes is driving the table*/
    /*background-color: aliceblue*/
    margin-bottom: 0.3em; /*in phones, gets some separation between data input blocks*/
}

.aspNetControlTitleText {
    color: White;
    background-color: #407EFF;
    font-weight: bold;
    /* height: 2em; */
    line-height: 2em;
    vertical-align: middle;
}

.icnShopCart {
    height: 2em;
    width: 2em;
    display: inline-block;
    vertical-align: middle;
    padding: 0.3em;
}

/*stuff for tooltip in OrderPipe1ChooseLoginOrNot.aspx*/
span.question {
    cursor: pointer;
    display: inline-block;
    width: 1.2em;
    height: 1.2em;
    background-color: #ff33ff;
    line-height: 1.2em;
    color: White;
    /* font-size: 13px; */
    /* font-weight: bold; */
    border-radius: 0.6em;
    text-align: center;
    position: relative
}

    span.question:hover {
        background-color: lightpink;
    }

div.tooltip {
    background-color: #ff33ff;
    color: White;
    position: absolute;
    left: 25px;
    top: -25px;
    z-index: 1000000;
    width: 250px;
    border-radius: 5px;
}

    div.tooltip:before {
        border-color: transparent #3D6199 transparent transparent;
        border-right: 6px solid #3D6199;
        border-style: solid;
        border-width: 6px 6px 6px 0px;
        content: "";
        display: block;
        height: 0;
        width: 0;
        line-height: 0;
        position: absolute;
        top: 40%;
        left: -6px;
    }

    div.tooltip p {
        margin: 0.2em;
        font-size: 1em;
        color: White;
    }

    #confirmGeographyAnomaly p {/* for the shopping Cart Jquery UI dialog, gotta lotta text to fit  in*/
        font-size: 0.8em;
    line-height: 1.2em;
    }
    

/*needed for <img tags to create line of illustration photos in SUNDRIES > COPPERMELTER page*/
#content .naturalPhoto {
    margin: 0.4em 0.2em;
    display: inline-block;
    width:initial;
    width:auto; /*ie9 hack for initial*/
    max-width: 100%;
}

.largePhoto { /*need for img tag international delivery jpg on  international-delivery.aspx */
    width: initial;
    width: auto; /*ie9 hack for initial*/
    max-width: 100%;
}

/* March 2019 to force caption to line below for last polar bear picture */
.largePhotoBlock { /*need for img tag international delivery jpg on  international-delivery.aspx */
    width: initial;
    width: auto; /*ie9 hack for initial*/
    display: block;
    margin-left:auto;
    margin-right:auto;
    margin-bottom:0.4em;
    max-width: 100%;
}


/*Media queries at bottom
according to this http://stackoverflow.com/questions/18395316/default-css-overriding-media-query
if 2 elements have the same properties specified, the LAST ONE DECLARED takes priority. If the conditions of a media query 
    are met, that's surely what we want: that the styles in the media query takes priority of the previous ones
 ===================================================================================================*/

@media screen and (min-width: 481px) {
    /* Break point for phablets to "fall into"
================================================================================*/
    /*  480px suggested by looking at the wider phones: see examples below
iPHone 6 plus	414px wide
LG Optimus	424px
Sony Xperia Sola	480px
After 480px, everything will be wide enough to take permanent leftbar with the manufacturer list in */
    /* BAK20150505_01 running into problem that cannot just flip CSS properties in existing #leftbar; get conflict with 
    original values .... it occurs to me ... hide #leftbar now and bring in something like original leftcolumn1 and 
    show it now, having been hidden before*/

    #leftbar {
        /*in html <nav id="leftbar" class="nav">*/
        /*re-establish the fly-in sidebar permanently on the left of content */
        /*and sytle like pre-2015 web page. Anything we put here will override .nav class? */
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
        position: relative;
        z-index: auto;
        float: left;
        /*width: 155px; logo20130212.jpg is 145px wide  & need to go as narrow as poss. to make room for content in phablets */
        /*background-color: white;
        color: #303030; default text colour  #303030 is not quite black. */
        display: none; /*get rid of fly-in nav bar altogether for wider screens*/
    }

    #container01 #leftbar h3 {
        color: #303030;
    }

    #container01 #leftcolstatic {
        /*overrides less specific .leftcol class*/
        display: block;
        /*for phablets, take 25% of screen seems to be OK  2016 10*/
        width: 25%;
    }

    #leftbarfakeforphone { /*Get rid of extra "in-flow" list of manufacturers. Don't need for wider screens */
        display: none;
    }

    .hamburgericon {
        display: none;
    }

    .biglandscapeimage {
        width: 68%;
        /*max-width: 100%  gets overridden by  main img {width: 100% */
        display: block;
        margin: auto;
    }


    #content01 {
        /*background-color: darkgray*/
        /* margin-left: 170px; trying to fix late video display problem affecting IE and Safari*/
        margin-left:25% /* allows for fixed manufacturers margin */
    }

    .photoWrapperPortraitRight {
        /*for widescreens, float the divs with photos in to allow text 
            to flow by the side of them. These were centered in phones, but in widescreen, 
         need to float right*/
        float: right;
        width: 300px; /*aimed at photos 298px wide or less*/
        padding: 3px 15px 15px 15px;
        font-size: 1em;
        font-style: italic;
        text-align: center;
    }

    .photoWrapperPortraitLeft {
        /*for widescreens, float the divs with photos in to allow text 
            to flow by the side of them. These were centered in phones, but in widescreen, 
         need to float left*/
        /*actually necessitated by productDetail photos of starter kits etc.*/
        float: left;
        width: 302px; /*aimed at photos 300px wide i.e. 2012 onwards productDetails photos*/
        padding: 3px 15px 15px 15px;
        font-size: 1em;
        font-style: italic;
        text-align: center;
    }


    .phonePhotoPortrait {
        /*for widescreens, set photos' max-width to 100%: they cannot go wider than their natural width*/
        /*override width back to initial so previous 100% default (for phones) is overridden */
        max-width: 100%;
        width: initial; /* NOT WORKING IE9 ?*/
    }


    .photoWrapperLandscapeLeft {
        /*iPad and phablets, still have to stack a 400px wide image vertically */
        /*float: left;*/
        margin: auto;
        width: 400px; /*kludged to allow lab photo to bigger    300px;aimed at photos 250px wide initially*/
        padding: 3px 15px 15px 15px;
        font-size: 1em;
        font-style: italic;
        text-align: center;
    }

    .photoWrapperLandscapeRight {
        /*float: right;*/
        margin: auto;
        width: 400px;
        padding: 3px 15px 15px 15px;
        font-size: 1em;
        font-style: italic;
        text-align: center;
    }

    /*March 2019 for Last Polar Bear large photo on carbon footprint page*/
    .photoWrapperLandscapeCenter {
        /*margin: auto;
        width: 74%;
        padding: 0.2em;
        font-size: 1em;*/
        font-style: italic;
        text-align: center;
    }


    .phonePhotoLandscape {
        /*for widescreens, set photos' max-width to 100%: they cannot go wider than their natural width*/
        /*override width back to initial so previous 100% default (for phones) is overridden */
        /*2015 09 Kludging for lab photo, which at 250px wide is now too small !*/
        /*next 2 lines are the recommended code*/
        /*max-width: 100%;
    width: initial;*/
        /* here's the kludge till we get a bigger natural photo
        and requires a kludge-cascade in the containing div photoWrapperLandscapeLeft*/
        width: 344px;
    }

    .extraWideScreenContent {
        /*any element with this class will not show on phones. Flip to show it on wider viewports*/
        display: block;
    }

    .tblCellHiddenPhones { /*product codes in toner_refill_products.aspx hidden by default for phones. Bring back in widescreens */
        display: table-cell;
    }

    .tableHeaderProductList { /*product list header hidden on phones. Bring back for widescreens*/
        display: table-row;
    }

    /*iron wrinkles in map of Eruope icon in shopping cart*/
    .imgShoppingCartEuropeIcon {
        float: left;
    }

    #deliveryCountry {
        width: 75%;
        margin: auto;
    }

        #deliveryCountry a:link { /*tweak normal a:link padding (normally for text) */
            vertical-align: middle;
            padding: 0.1em 0.4em 0.1em 0.4em;
            white-space: nowrap;
            display: inline;
            line-height: 2em;
        }

    #container01 #footer {
        /*footer links found to be covering the manufacturer links in the leftbar: send them to bottom of page */
        clear: left;
    }

    /*widescreens (and phablets 2016 10) get "see cart" link top right, as there's no hamburger symbol there*/
    .liTopMenuItem {
        /*position:absolute;*/ /*does not have a positioned ancester, so gets positioned relative to document body and scrolls
            with the page, see here http://www.w3schools.com/css/css_positioning.asp   
            Also tried "fixed" where it sticks on the viewport, but seemed intrusive and abnormal */
        /*top: 0.3em;
    right: 0.4em;*/
        border-radius: 0.2em;
    }
    /*.liTopMenuItem a {
        /*ems are bigger here, so make stuff smaller again
        padding: 0.4em
    }*/

    .txtShoppingCartShipCountry {
        /*for the EU VAT number text box*/
        /*default phone width of 78% leaves it incediblyincongruously wide in wider screens*/
        width: 57%;
    }

    /* 2016 12 dealing with the links that appear only if customer is logged in or has cart going */
    .ulTopActiveNavLinks {
        margin: -2.7em 0 0.5em 0;
        float: right;
        white-space: nowrap;
    }

    .liTopMenuItem {
        display: inline-block; /* in wide screens, show theses top hyperlinks horizontally */
        max-width: initial;
    }

        .liTopMenuItem #lnkSeeCart { /*tweaks to get the shopping cart icon to line up with other*/
            padding: 0.23em 0.65em;
            margin-bottom: -0.2em;
        }

        
    #confirmGeographyAnomaly p {/* for the shopping Cart Jquery UI dialog, gotta lotta text to fit  in*/
        font-size: 1em;
    line-height: 1.5em;
    }

    .largePhoto { /*for ipad etc.  gotta max-width or 736px too much to fit in available */
        max-width: 75%;

    }

}




/* 16th Sept 2015  Below here we're adjusting  everything back for the audience looking on 
    computer monitors */
@media screen and (min-width: 1000px) { /* was 920 in last incarnation */
    /*centre the whole shuboodle for really wide viewports where you can fit everything on */
    /* 201505  current width for the production "desktop monitor" design is  920px  
            very desireable to keep it at that, to keep action buttons "above the fold". 
        Even think about widening it a bit.*/
    #container01 {
        width: 1000px;
        margin: auto;
    }

    /* research shows optimal reading experience given by  65  charaters per line
        counter here http://www.charactercountonline.com/ 
        so pumping up the size of plain text*/
    p {
        font-size: 1.2em;
        line-height: 1.5em;
    }

    ul li { /*bring into line with general <p>*/
        font-size: 1.2em;
        line-height: 1.5em;
    }

    #container01 #leftcolstatic { /*we've got width for a wider left margin*/
        width: 13.5em;
        /*padding-right: 1.5em;*/
    }

        #container01 #leftcolstatic li {
            font-size: 1.1em;
            line-height: 1.4em;
        }

    #content01 { /*hack to stop video overflowing into list of manufacturers*/
        margin-left: 220px; /*same as width of leftcolstatic*/
    }

    h1 {
        font-size: 1.8em;
        font-weight: bold;
        line-height: 2.0em;
        text-align: center;
    }

    h2 {
        font-size: 1.5em;
        font-weight: bold;
        line-height: 1.6em;
        text-align: center;
    }

    h4 { /*needs to be at least same size as <p> text*/
        font-size: 1.2em;
        line-height: 1.5em;
        font-weight: bold;
        text-align: center;
    }

    .aspxTable a:link { /*product selection hyperlinks in tables in aspx pages. Bigger text, but less padding*/
        font-size: 1em;
        padding-top: 0.3em;
        padding-bottom: 0.3em;
    }

    #paymentLogos { /*stop payment logos div (and footer) rendering on top of left sidebar of manufacturers*/
        clear: left;
    }

    .tableProductList a:link { /*"full info. links.*/
        height: 2em;
        line-height: 2em;
        font-size: 1em;
    }

    .productDetailWrapper h1 { /*h1 now looking too big for product detail pages*/
        font-size: 1.5em;
        text-align: left;
        padding-bottom: 0;
    }

    .productDetailWrapper h2 { /*h1 now looking too big for product detail pages*/
        font-size: 1.4em;
        text-align: left;
        padding-bottom: 0;
    }

    .productDetailWrapper h3 { /*h1 now looking too big for product detail pages*/
        font-size: 1.3em;
        text-align: left;
        padding-bottom: 0;
    }

    .productDetailWrapper li { /*bump up to 1.2em to match <p> text*/
        font-size: 1.2em;
    }

    .breadcrumb { /*vertical spacing not needed in prouct detail page*/
        margin-top: 0;
    }

    #shoppingCart .tblFinancials {
        margin-top: 1.2em; /*bigger gap between 2 tables for widescreen view*/
    }

    .btnPhoneCheckOut { /*get checkout button back on same line as other 2  buttons & copy over style from btnPhoneTouchPoint at this width*/
        display: inline-block;
        height: 2em;
        line-height: 2em;
        /*padding: 0.4em;*/
        font-size: 1.4em;
        font-weight: bold;
        margin-bottom: 0.2em;
        width: 18em;
    }

    #shoppingCartButtons {
        margin-bottom: 0.5em;
    }

        #shoppingCartButtons input { /*give the 3 shopping cart buttons a litte more horizontal space*/
            margin-left: 0.7em;
            margin-right: 0.7em;
        }

    .transactionBlock {
        padding: 0.6em;
        text-align: left;
        margin: 0.8em auto;
        width: 30em;
        background-color: #FFFFCC;
    }

    .radHolder {
        display: block;
        padding: 0.1em 0.8em 0.9em 1.1em;
        float: left;
    }

    #pnlShowFinalOK .deliveryDetails { /* check details before place order. Tweaks to table for widescreen  */
        margin: 1em auto;
    }

        #pnlShowFinalOK .deliveryDetails td {
            padding: 1em;
        }

    .deliveryDetails a:link {
        font-size: 1em;
        font-weight: normal;
    }

    #cmdSubmitWorldpay {
        display: block;
    }

    .btnPhoneTouchPoint {
        height: 2em;
        line-height: 2em;
        /*padding: 0.4em; in IE, was uncentering the button text vertically*/
        font-size: 1.4em;
        font-weight: bold;
        margin-bottom: 0.2em;
    }


    /*tweak text area for message in widescreens*/
    .phoneTextArea {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        font-size: 1.5em;
        height: 10em;
        width: 24em;
        font-family: verdana, sans-serif;
    }
    /*iron wrinkles in map of Eruope icon in shopping cart*/
    .imgShoppingCartEuropeIcon {
        float: left;
    }

    .txtShoppingCartShipCountry {
        /*for the EU VAT number text box*/
        /*default phone width of 78% leaves it incediblyincongruously wide in wider screens*/
        width: 40%;
    }

    .liTopMenuItem a { /* font in shopping cart link looking too big in browsers */
        font-size: 0.85em;
        padding: 0.52em;
    }

    .liTopMenuItem #lnkSeeCart {
        margin-bottom: -0.24em;
    }

    .photoWrapperLandscapeLeft {
        /*for widescreens, float the divs with photos in to allow text 
            to flow by the side of them*/
        float: left;
        width: 400px; /*kludged to allow lab photo to bigger    300px;aimed at photos 250px wide initially*/
        /*padding: 3px 15px 15px 15px;*/
        padding: 3px 15px 15px 0px; /* 0 left butts up against outside whitespace */
        font-size: 1em;
        font-style: italic;
        text-align: center;
    }

    .photoWrapperLandscapeRight {
        float: right;
        width: 400px;
        /*padding: 3px 15px 15px 15px;*/
        padding: 3px 0px 15px 15px; /* 0 right butts up against outside whitespace */
        font-size: 1em;
        font-style: italic;
        text-align: center;
    }

    p .aLinkInUiDialog { /*touch point padding fouls Jquery UI dialog in shopping Cart sensitive country check*/
        padding: 0px
    }

    #confirmGeographyAnomaly p {/* 1.2em making it too big*/
        font-size: 1em
    }
}


/*Although I built for mobile first: as recommended. It's proving impossible (Sept 2015) to undo the mobile-style 
    tables where all the <td>s stack on top of each other. First became an issue on OrderPipe2NotLoggedIn.aspx
    where we're getting customer's delivery details. Form is inside table with class="deliveryDetails".
    Google developer advocates also refer to this here, in the section on tables
    https://developers.google.com/web/fundamentals/getting-started/your-first-multi-screen-site/responsive?hl=en
    So the following media query is upside down. That is at bottom of all, going to check for a phone and apply 
    the vertical <td> stacking only if we're on a phone
    
    */

@media screen and (max-width: 480px) {

    /* add .deliveryDetails class to table in eg. OrderPipe2NotLoggedIn.aspx to achieve vertical cell flow in phones*/
    .deliveryDetails {
        width: 100%;
    }

        /*for phones: forces table to flow down page as if every element were a block level element*/
        .deliveryDetails tbody, .deliveryDetails thead, .deliveryDetails tr, .deliveryDetails th,
        .deliveryDetails td {
            display: block;
        }

        .deliveryDetails tr { /*random hack to help phone layout*/
            padding-top: 0.3em;
            /*height:  fixed height was buggering up the table in pnlFinalShowOK3.6em */;
        }

        .deliveryDetails .rowDeliveryCountry { /*needs higher row height to accomodate larger font*/
            height: 4em;
        }

        .deliveryDetails .rowEmailFieldPhone { /*needs higher row height to accomodate wrapping text*/
            height: 5.1em;
        }



        /*table class with form to gather delivery address in OrderPipe2NotLoggedIn.aspx*/
        .deliveryDetails a.shoppingCartLink:link {
            display: inline-block;
        }

        .deliveryDetails a:link { /*for the back navigation links in OrderPipe2NotLoggedIn.aspx*/
            font-size: 1em;
            padding: 0.9em;
            color: #6699ff; /*slightly lighter blue: otherwise attracting to much attention pnlFinalOK*/
        }

        .deliveryDetails .yellowRow {
            background-color: #FFFFCC;
        }

        .deliveryDetails .deliveryCountryConfirm {
            font-size: 1.75em;
            font-weight: bold;
        }

        .deliveryDetails input[type=text], .deliveryDetails select, .deliveryDetails input[type=password] { /*all descendents of the element (in this case a table) that are text boxes or select elements or password*/
            margin-bottom: 0.65em;
            font-size: 1.4em;
        }

        .deliveryDetails textarea { /*1.4em looked too big  on a phone*/
            font-size: 1.2em;
            font-family: verdad, sans-serif;
            height: 6.4em;
        }

        .deliveryDetails .titleField {
            width: 90px;
        }

        .deliveryDetails .shortField {
            width: 60px;
        }

        .deliveryDetails .mediumField {
            width: 200px;
        }

        .deliveryDetails .longField {
            width: 330px; /*pretty safe bet: Galaxy S4, Iphone 6. Iphone 5 pinched off a bit. Post production, tweaked to 300px to allow 
                    room for validation error red asterisks  */
        }

        .deliveryDetails .veryLongField {
            width: 340px; /*pretty safe bet: Galaxy S4, Iphone 6. Iphone 5 pinched off a bit*/
        }
    /* override widescreen setting with same specificity*/
    /*not working quite right IE 11 in phone view. But phone users prob. not browsing with IE11*/
    #pnlEnterDeliveryDetails tr, #pnlCreateLogin tr {
        height: initial;
    }

    div.tooltip {
        /*tweak position of account no-account advice tooltip for phones*/
        left: -252px;
        top: -70px;
    }
}