/* NEW BASE COLOURS IN LOGO 2014 06 ABANDONED FOR NOW, WAS NEEDING A WHOLE LOAD OF TWEAKS TOWARDS COLOUR SCHEME DO NOT EVEN LIKE. 
    ROLLED BACK TO OLD LOGO AND KEEPING 2013 COLOUR SCHEME FOR NOW AND CHANGING ACTIVE LAYOUT ONLY TO HELP CONVERSION
    #00AFED   blue   of footer blocks, general blocks and basis of logo
    #FF3399   mag
    #FFFF00   yel

    #0099CC         unvisited hyperlinks. royal blue similar to footer and logo, but slightly deeper so they LOOK same colour. Also used 
                    for table headers in active part of application to draw more attention to them than headers
    
OLD/CURRENT BEOW HERE
#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" ;


/* 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; /* 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 */
    font-size: 62.5%;
    margin: 0 0 0 0; /* Sets the margin properties for an element using shorthand notation (top, right, bottom, left) */
    padding: 0 0 0 0; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
    text-align: center; /* Centers the page content container in IE 5 browsers. */
}

p
{
    margin-bottom: 4px;
    line-height: 135%; /*2014 0301 line height dink*/
    
}

/* Commonly used to style page titles. */
h1
{
   font-size: 1.6em;
   font-weight: bold;
   margin-top: 0px
}
h2 
{  
  font-size: 1.2em;
  font-weight: bold;
  margin-top: 4px
  
}
h3 
{ 
  font-size: 1.1em;
  font-weight: bold;
}

h4 {/* using for picture captions, but text will be same as general paragraph text */}

/* Sets the style for unvisited links. */
a, a:link {
    color: #407EFF; /* #407EFF;  #6699ff; */
    font-weight: bold;
    text-decoration: none;
}
/* Sets the style for visited links. */
a:visited
{
    color: #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;
}

/* 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  . 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: 6px;
 /* doesn't achieve, overriden by something else max-width: 99.5% */
}


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

td a:link {
    /* slightly darker links in active part of app. to attract eye there */
    color: #0456FF /*#303030 #0456FF*/;
    font-size: 1.0em; /* 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*/
    margin: -10em;
    padding: 10em; /*0.25em 1em 0.25em 0.5em*/ /*width: 99.9%; /*504px;  fixes width clickable hyperlink - beyond end of most text. Note what 
really need to to expand it to width of that dynamic table. i.e. let longest text in table set width of table, then 
all hyperlinks expand to that */
    border-collapse: collapse;
    line-height: 155%;
}
/* 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;
 }




.buyNowHover
{
    background-color: #ffff66
}

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

/* This is a container for the page content. It is common to use the container to constrain the 
 width of the page content and allow for browser chrome to avoid the need for horizontal scrolling. 
For fixed layouts you may specify a container width and use auto for the left and right margin 
to center the container on the page. IE 5 browser require the use of text-align: center defined 
by the body element to center the container. For liquid layouts you may simply set the left and 
right margins to center the container on the page. */
#outerWrapper
{
    background-color: #fff;
    margin: 6px auto 6px auto; /* Sets the margin properties for an element using shorthand notation (top, right, bottom, left) */
    padding: 0px 0px 0px 0px;
    text-align: justify; /* Redefines the text alignment defined by the body element. */ /* problem with em for width is that it changes the width if size of body font changes, so going for 900px */
    width: 920px /* 920px 900px*/;
    /*border-right-style: solid;
    border-right-width: 1px;
    border-right-color: #FFCCFF;*/ /* now pale pink */
    /*border-left-style: solid;
    border-left-width: 1px;
    border-left-color: #FFCCFF; *//* MV adding this to basically suggest 12px for normal text */
    font-size: 1.2em;
    /*border-bottom-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: white*/
    
}

#outerWrapper #leftColumn1
{
    
    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: 155px/*145px original and logo20130212.jpg is 145px wide. Try making 155px to expand picture a bit*/;
      
    /*border-right-style: solid;
    border-right-color: #FFCCFF;
    border-right-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #FFCCFF;
    border-bottom-width: 1px*/   
}

#outerWrapper #leftColumn1 #logo
{
    /*float: left;*/
    margin-top: 2px;
    margin-bottom: 12px;

    margin-left: 0px;
   
    /*background-color: lime;*/
   
    /*font-weight: bold;
    text-align: center;
    line-height: 1.2em;
    /*color: black; */
    /* curved corner stuff not fully supported by all browsers?  */ /* top left / top right / bottom right  / bottom left */
    /*-webkit-border-radius: 8px 8px 8px 8px;
    -moz-border-radius: 8px 8px 8px 8px;
    border-radius: 8px 8px 8px 8px;*/
    
}

#outerWrapper #leftColumn1 h3
{
    padding-left: 5px;
    margin-bottom:5px; 
    text-align:left
}

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

#outerWrapper #leftColumn1 a:hover
{
    color: #F000F0;
    background-color: #ffff66;
    text-decoration: none;
}

#outerWrapper #leftColumn1 ul
{
    line-height: 32px; /*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; */   
}

#outerWrapper #leftColumn1 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*/
#outerWrapper #leftColumn1 a.selected {
    color: white;
    background-color: #6699ff /*  #6699FF*/;
}


/* Contains the main page content. When using a mutliple column layout the margins will be set to account for the floated columns' width, margins, and padding. */
#outerWrapper #content
{    
    /*padding: 0px 30px 0px 0px;*/    
    
    overflow:auto; /*commented out 2014 0608 to get content to spreadout to extreme left border below "Xerox" in left column. However,
        it might cause an issue productDetail pages which will also flow and we may not want them to */
     
    /*background-color: lightpink; */   
}

/*needed to contain dynamic aspx links like "see basket, "logout" etc. on aspx pages only*/
#outerWrapper #header
{
    /*background-color: plum;*/
    color: white; 
    padding: 0px 0px 0px 0px; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
    /*height: 16px;*/
    /*width: 100px;*/
    /*float:right;*/
    margin-top: 0px;
    margin-bottom: 2px;/*pushes breadcrumb further away*/
    margin-right: 0px;
    margin-left: 200px;/*gets left edge well clear of logo*/
   
    /*margin-left: 8px; 
    -webkit-border-radius: 0px 0px 8px 8px;
    -moz-border-radius: 0px 0px 8px 8px;
    border-radius: 0px 0px 8px 8px;*/
}

/* START login type links in top right of header */
#outerWrapper #header ul
{
    /*float: right;*/
    text-align: right;
    line-height: 20px;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-right: 0px;
    font-size: 1em;
    padding: 0px 0px 0px 0px;
     
}
#outerWrapper #header ul li
{
    display:inline-block;
    padding: 0px 8px 0px 8px
}

/*#outerWrapper #header ul li a:link {color: white}
#outerWrapper #header ul li a:visited
{
    color: #E0E0E0;
}
#outerWrapper #header ul li a:hover
{
    color: #FFFF00;
}
    */


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

.reallyBigText
{
 /*first used manufacturer confirmation names in catalogue. Needed draw more attention to them */
 font-size: 2em;
 display:inline
    
}

.breadcrumb
{
    margin: 0px 0px 0px 180px;   
}

.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;
}
.productPrice input /* effects submit button */
{
    
  /*border-style: none;*/
  height: 30px;
  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;
}

      
 .productPhoto300px
/* defines a div to wrap 300px wide product photos in detailXXX.aspx pages   
 see http://www.labnol.org/internet/design/add-text-captions-align-images-html-css/2309/  */ 
/* note div width called as 2px, or whatever wider than 300px photo */ 
{
    
    /*background-color: white; /* same as body background #F4F4F4 */
    border: 1px solid #FFECFF;
    padding: 3px;
    font: 1em;
    text-align: center;
    margin: 10px 21px 300px 1px; /* note, massive bottom margin forces all text that would have been below to right
    focussing interest on the buy now button */
    float:left; /* design choice to always float left, ref: Ben Hunt positional importance */
} 
 

.productPhoto300px img 
{ 
vertical-align:middle; margin-bottom: 3px; 
} 

/* legacy styles so can include old product info tables without editing the html - although
have to take out the table row with the button in */
.smallPrint
{
	
	font-size: 1em;
	padding : 2px 2px;
	text-align : justify;
}

.popUpHeading
{
	font-weight: bold;
	font-size:1.4em
	
}


.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;   
}

.btnApathy
/* less prominent button for the thing they can do, but we'd rather they didn't */
{
    font-size:1.2em;
    padding:4px 10px 4px 10px;
    margin: 10px 10px 10px 10px;
}



#outerWrapper #paymentLogos
{ 
  margin: 18px auto 8px auto; 
  text-align: center;
  clear: left /*get it below lefthandcolumn1 even if there's not much content*/
 
  
   }

#outerWrapper .cookielaw
{ 
    /*background-color:#ffff66;*/
    color:red;
    
    /*clear: left; make sure it clears the leftColumn1*/
    
    /*margin-left: 180px;so it doesn't splurge over leftColumn1*/
    /*margin-right: 40px;*/
    margin: 0px auto 12px auto; 
   
    padding:6px 6px 6px 6px
}


#outerWrapper #footer {
    clear: left; /*to get it to always be below leftcolumn1, which is a float*/
  background-color: #6699ff; /* #6699ff  old before 2014 06 */ 
  color: white;
  padding: 12px 12px 12px 12px; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
  height: 80px;
  margin: 0px -8px 0px -8px;  /*negative values just get it to outflank prededing content a bit, looks better */
  /* curved corner stuff not fully supported by all browsers?  */
        /* top left / top right / bottom right  / bottom left */
        -webkit-border-radius: 8px 8px 8px 8px;
        -moz-border-radius: 8px 8px 8px 8px;
        border-radius: 8px 8px 8px 8px;

    position:relative;/*so we can get copyright "absolutely in bottom corner*/
}




/* START terms and conditions type links bottom left footer */
#outerWrapper #footer ul
{
    float: left;
    margin-bottom: 12px;
   
    font-size: 1.1em;
    padding: 0px 0px 0px 0px;
     
}
#outerWrapper #footer ul li
{
    display:inline-block;
    margin-right:26px
}

#outerWrapper #footer a:link {color: White}
#outerWrapper #footer a:visited {color: #E0E0E0;}
#outerWrapper #footer a:hover {color: #FFFF00}

/* END login type links in top right of header */



/* Contact form */
#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: 20px 0;
}

/* Shopping cart */
#shoppingCart
{
    font-size: 83.3%;
}

#shoppingCart th
{
    text-align:left;
}

#shoppingCart td
{
    padding-left: 0.5em;
}

#shoppingCart #navigation
{
    display: block;
    width: 100%;
}

#shoppingCart #navigation div
{
    display: block;
    margin-top: 20px;
}

#shoppingCart #navigation #manufacturers
{
    font-size: 120%;
}

#shoppingCart #navigation #deliveryCountry img
{
    margin-right: 6px;
    vertical-align: middle;
}

#shoppingCart #navigation #deliveryCountry a
{
    vertical-align: middle;
}

/* Checkout */

.deliveryDetails a.shoppingCartLink:link
{
    display: inline;
    font-size: 100%;
    padding: 0;

    /*override the rather wierd styling that is used for printer model selection links*/
    margin: 0;
   line-height: 100%;
    border-collapse:initial;

    

   
}

.deliveryDetails td {
    border: none;
    padding: 2px;
    background-color: #FFFFCC;
    font-size: 14px;
   
}

.deliveryDetails .titleField
{
    width: 90px;
}

.deliveryDetails .shortField
{
    width: 60px;
}

.deliveryDetails .mediumField
{
    width: 150px;
}

.deliveryDetails .longField
{
    width: 370px;
}

#sameBillingAddress p
{
    margin: 10px 0;
}

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

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

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


/*special formatting for table in OrderPipe3LoggedIn for pre-existing delivery addresses*/
.tblPreexistingAddress td {
    border: none;
    padding: 0px;
    background-color: #FFFFCC;
    border-bottom: 12px solid white;
    font-size: 1em;
}


/* START HACKS FOR TEMPORARY ASP */


.myTotal
{
	FONT-WEIGHT: 600;
	FONT-SIZE: x-small;
	BACKGROUND-COLOR: #d8bfd8
}
.myTh
{
	
	text-align: center;
	padding: 4px 4px 4px 4px;
	border-left: 2px solid #EFF3FB;
	border-right: 2px solid #EFF3FB;
	height: 35px;
	color: white;
	BACKGROUND-COLOR: #407EFF;
	font-family:inherit;
}
.myGreyRow
{
	CURSOR: hand;
	BACKGROUND-COLOR: #EFF3FB;
	color : blue;
	font-size: 0.8em;
}


.myBlueRow
{
	CURSOR: hand;
	COLOR: blue;
	BACKGROUND-COLOR: white;
	font-size: 0.8em;
}
.highlightRow
{
    CURSOR: hand;
    COLOR: blue;
    FONT-STYLE: italic;
    BACKGROUND-COLOR: white
}

.button
{
	FONT-WEIGHT: bold;
	
	WIDTH: 180px;
	
	HEIGHT: 35px;
	margin: 0px 4px 0px 4px;
}

.theSmallPrint
{
	FONT-WEIGHT: 400;
	FONT-SIZE: 9px;
	FONT-FAMILY: Verdana, Arial, sans-serif;
	margin: 30px auto 0px auto
}

.whiteRowPrinterList
{
    color: blue;
	background-color: white;
	font-size: 1em;
	
}

.blueRowPrinterList
{
    color: blue;
	background-color: #EFF3FB;
	font-size: 1em;
	
}

.docToner
{
    font-family: 'Comic Sans MS' , cursive;
    font-size: 1.3em;
    background-color: #FFFFCC; /* #EFF3FB;*/
    padding: 4px 8px 4px 8px; /* curved corner stuff not fully supported by all browsers?  */
    -webkit-border-radius: 8px 8px 8px 8px;
    -moz-border-radius: 8px 8px 8px 8px;
    border-radius: 8px 8px 8px 8px;
}


.smallPrint
{
    font-size: small;    
    margin-top: 12px;
    
   
}
/* END HACKS FOR TEMPORARY ASP  ??? */

.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
    
}

.copyright 
{
    position: absolute; 
    bottom: 0px; 
    right: -10px; 
    margin: 0px 0px 10px 0px; 
    text-align:right

}


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