/* colour plan @ 2012 0502 
#6699ff royal blue of header and footer blocks
#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.4em;
   font-weight: bold;
}
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; /*  #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, since all
other layout handled by CSS divs */
table
{
 margin: 15px auto 0px auto /* centers table in parent */
 /* margin-left: 5px; */
 /* margin-top: 6px */
}


/*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: #407EFF; /* #6699ff; /* #3366CC; */
        color: #FFFFFF; /*  color: #FFFFFF; */
        text-align: center;
        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 */
      
        
}

td a:link
{
    /* slightly darker links in active part of app. to attract eye there */
    color: #0456FF;
    font-size: 0.8em;
    /* trying to achieve mouseover on whole table cell */
    display: table-cell;
    padding: 0.3em 1em 0.3em 0.5em;
    width: 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:100%
}
/* 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
}

td img
/* deal with photos in old legacy product details tables */
{
    /* 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;
}

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: 0 auto 0 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: 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 #header
{
    /* whole faceboook colour palette supposed to be gradually lightening blues
#3b5998
#8b9dc3
#f7f7f7
#dfe3ee */ /* facebook blue supposed to be #3B5998  */
    background-color: #6699ff;
    color: white; 
    padding: 0px 10px 10px 10px; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
    height: 25px;
    margin-bottom: 8px;
    margin-right: 8px;
    margin-left: 8px; /* curved corner stuff not fully supported by all browsers?  */ /* top left / top right / bottom right  / bottom left */
    -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;
    line-height: 35px;
    margin-top: 0px;
    margin-right: 4px;
    font-size: 1em;
    padding: 0px 0px 0px 0px;
     
}
#outerWrapper #header ul li
{
    display:inline-block;
    padding: 4px 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; /* #FFFF00; */
}



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

#outerWrapper #introduction
{   
        padding: 8px 8px 8px 0px; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
      /* margin-bottom: 8px; */
    margin-right: 16px;
    margin-left: 8px; 
       border-top-style: solid;
    border-top-color: #FFCCFF;
    border-top-width: 1px;
    
    /*background-color:lime; */
    /* height: 100px */
    overflow: auto /* gets the logo to float left INSIDE #introduction only (doesn't interfere with stuff lower in page) */
}

#outerWrapper #introduction ul
{
    list-style-type: disc;
    list-style-position: inside;
}
#outerWrapper #introduction li
{
    line-height:normal;
    font-weight: bold;
    /*font-style:italic;*/
    padding: 2px 0px 0px 0px;
}


#outerWrapper #introduction #topNavigation
{
         margin-top: 6px; 
        /*height: 45px;    */    
        padding-left: 0px;
        margin-left:175px;
        border-left-style:solid;
        border-left-color: #FFCCFF;
        border-left-width: 1px
 }


/* START TOP NAVIGATION LINKS
Creates pink vertical dividers between top navigation mouseovers */
#outerWrapper #introduction #topNavigation a:link
{
    font-weight: bold;
    font-size: 1.1em;
    display: table-cell;
    border-collapse:collapse;
    line-height:35px; /* centres the hyperlink text vertically */
    height: 35px;
    padding: 0px 12px 0px 12px;
    margin: 0px 0px 0px 0px;
    
    text-decoration: none;
    border-right-style: solid;
    border-right-width: 1px;
    border-right-color: #FFCCFF; /* now pale pink */
    
    
}

#outerWrapper #introduction #topNavigation a:visited
{
       border-right-style: solid;
    border-right-width: 1px;
    border-right-color: #FFCCFF; /* now pale pink */
}

#outerWrapper #introduction #topNavigation a:hover
{
    background-color: #ffff66;
    text-decoration: none;
    border-right-style: solid;
    border-right-width: 1px;
    border-right-color: #FFCCFF; /* now pale pink */
}
/* END TOP NAVIGATION LINKS */


#outerWrapper #introduction #logo
{
    float: left; /*width:164px;*/ /*height: 100px;*/
    /*background-color: #ffff66;  /* #6699ff; #ffff66; */
    padding: 2px 6px 0px 6px; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
    margin-top: 2px;
    margin-left: 9px;
    margin-right: 30px;
    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 #introduction #logo #innerLogo
{
    padding: 3px 6px 3px 6px; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
    margin-top: 8px;
    margin-left: 0px;
    margin-right:0px;
    font-weight: bold;
    text-align: center;
    line-height: 1.4em;
    background-color: #6699ff; 
    color: white;
    /* 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 #contentWrapper
{
   
    margin-left: 8px;
    margin-right: 8px;
    border-top-style: solid;
    border-top-color: #FFCCFF;
    border-top-width: 1px;
    padding-top:10px;
   
    overflow:auto
    
}

#outerWrapper #contentWrapper #leftColumn1
{
    
    float: left;
    padding: 0px 10px 10px 10px; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
    width: 155px;
      
    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 #contentWrapper #leftColumn1 h3
{
    padding-left: 5px;
}

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


#outerWrapper #contentWrapper #leftColumn1 ul
{
    line-height: 35px; /*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 #contentWrapper #leftColumn1 li 
{
 /* draw pale pink separators */
    border-bottom-style: solid;
    border-bottom-color: #FFCCFF;
    border-bottom-width: 1px;        
}





/* 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 #contentWrapper #content
{    
    padding: 4px 8px 10px 8px;    
    /* border-top-width :1px;
    border-top-style: solid;
    border-top-color: #FFCCFF; */
    margin-left:188px; /*relative to contentWrapper, not LeftColumn which is floated */ 
    /*overflow: auto   /* stopped cleared productPrice element from "clearing" leftColumn as well, BUT
    caused anomalous narrow homepage in Chrome and Safari. So left out and have to handle product detail 
    page in different way so doesn't need "clear" directive */
    
    overflow:hidden; /*added classic asp site July 2012. Gets clears to only clear last floated element inside the 
    #content DIV. I.e. doesn't clear left column with manufacturer names in.*/
    /* see http://www.brunildo.org/test/clear.html for more on this */
    
    /* above line overflow:hidden got page perfect for everything except Safari, where it made content div too narrow
    trying to correct by setting explicit width*/
    width:676px
    
    
}




.smallPrint
{
    font-size: small;    
    margin-top: 12px;
    
   
}


/* 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.75em;
 display:inline
    
}

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



.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: 12px 25px 12px 2px; /* note, in pre-Liang design, had massive bottom margin combined with buy button and price, just */
       /* below photo. So photo and buying info. and capability all top left all text on right. Better design. Liang changed*/
    /*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
	
}





#outerWrapper #paymentLogos
{ 
  
  margin:auto; /* tyring to centre it, but isn't working */
  padding-top:15px
   }



#outerWrapper #footer {
  background-color: #6699ff; /* now pastel royal blue */
  color: white;
  padding: 10px 10px 10px 10px; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
  height: 80px;
  margin: 8px 8px 8px 8px;  
  /* 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 #footer #copyright
{
	padding: 2px 8px 0 0;
	font-size: 1.2em;
	text-align: right;
}


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

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




/* MV following block for print html before. Also left IE5 hack in html

<style type="text/css" media="print">
<!--
/* It is common to set printer friendly styles such as a white background with black text. 
body {
  background-color: #fff;
  background-image: none;
  border-color: #000; /* Sets the border color properties for an element using shorthand notation 
  color: #000;
}
-->
</style>

*/




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

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


    
    





/* END HACKS FOR TEMPORARY ASP */