@charset "utf-8";
/* CSS Document */


/* ******************** */
.tagline {
	color: #00493F;
	font-weight: bold;
	font-style: italic;
	font-size: 14px;
	}
	
.img_right{
	 float: right; 
	 margin: 0 15px 15px 15px; 
	}
	
.frame { 
	padding: 5px; 
	border: 1px solid #aaa; }
	
body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	margin-top: 0px;
	margin-bottom: 0px;
   }

th {
	font-family: Arial, Helvetica, sans-serif;
   }

ul {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
   }

.sitemapL2 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-style: normal;
	line-height: normal;
	font-weight: bold;
	padding-left: 5px;
	padding-right: 5px;
   }

.newproductheader {
	color: #FFFFFF;
	background-color: #999999;
	font-weight: bold;
	text-align: center;
   }
   
.newproductwords {
	font-size: 10px;
	padding-left: 5px;
	padding-right: 5px;
   }
   
.newproductlink {
	font-size: 10px;
	color: #00493F;
	padding-left: 5px;
	padding-right: 5px;
   }

a:link {
	color: #CC3300;   
	text-decoration: none;
	font-weight: normal;
   }

a:visited {
	text-decoration: none;
	color: #800080;
   }

a:hover {
	text-decoration: underline;
   }

a:active {
	text-decoration: none;
   }

h1 {
	color: #00493F;
	font-size: 20px;
	font-weight: bold;
	padding-left: 0px;
	padding-right: 5px;
   }

h2 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight: bold;
	color: #00493F;
	padding-left: 0px;
	padding-right: 5px;
   }

h3 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #000000;
	padding: 0px;
	margin: 0px;
   }

h3 + p {
	padding: 0;
	margin: 0;
	}                /* remove space from <p> if after H3 */

h3 + img + p {
	padding: 0;
	margin: 0;
	}                /* remove space from <p> if after H3 */

hr.banner { 
   color: #ff4500; 
   background: #ff4500; 
   width: 100%; 
   height: 2px; 
   }   				/* orange line under banner image for Aussie site */

#div_top_banner_img a {
color: #CCCCCC;
}              /* remove link colour around top banner image for IE */

.error {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #FF0000;
	padding-left: 5px;
	padding-right: 5px;
   }
/* ******************** */


/* ******************** */
/*  container setups */

html, body, #wrapper { height: 100%; }
body > #wrapper { height: auto; min-height: 100%; }

/*
div {
	 outline: 1px dashed red;
	 }
*/

#wrapper {
	max-width: 960px;
	position: relative;
	margin: 0 auto;
	background-color: #CCCCCC;
   }

#div_top_banner {
	position: relative;
	top: 0px;
	width: 100%;
	text-align: left;
	background-color: #CCCCCC;
	padding-top: 12px;
	padding-bottom: 0px;
	padding-right: 0px;
   }

#div_sidebar_right {
	float: right;
	min-height: 100%;
	width: 160px; 
	background-color: #CCCCCC;
	padding-left: 10px;
	padding-right: 10px;
   }

#div_main_body {
	margin: 0 0px;     /* 0  0 0 200px to give space to left for left coloum if needed */
	padding-left: 15px;
	padding-right: 5px;
	padding-top: 5px;
	border-bottom: #CCCCCC 50px solid; /* made transparent boarder, so text does not appear under footer */
	background-color: #FFFFFF;
	}

#div_footer { 
	clear: both; 
	background-color: #8C8C8C;
	font-size: 11px; 
	color: #FFFFFF;
	text-align: center; 
	position: relative;
	z-index: 10;
 	height: 40px;
 	margin-top: -40px;
 	margin-left: auto;
 	margin-right: auto;
 	left: -10px;
   }
/* ******************** */


/* ************************** */
/* css for polaroid behaviour */	

ul.polaroids {
	/* width: 520px;  container width was 620*/
	margin: 0 0 18px -30px;           /* top right bottom left */
	background-color: #CCFFFF;		/* background: #EBEBEB; 	background: #AAEEAA; */
   }
		
ul.polaroids li { 
    display: inline; 
    }

ul.polaroids a {
	background-color: #FFFFFF; /*white polaroid outline */
	display: inline;
	float: left;
	margin: 0 0 27px 10px;
	width: auto;
	padding: 10px 10px 15px;
	text-align: center;
	font-family: "Marker Felt", sans-serif;
	text-decoration: none;
	color: #333;
	font-size: 14px;
	-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
	-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
	-webkit-transform: rotate(-2deg);
   -webkit-transition: -webkit-transform .15s linear; 	-moz-transform: rotate(-2deg);
   }
		
ul.polaroids img {
	display: block; 
	width: 130px; /* image width */	
	margin-bottom: 12px;
   }
		
ul.polaroids a:after {
	content: attr(title); 
   }
	
ul.polaroids li:nth-child(even) a { -webkit-transform: rotate(2deg);  -moz-transform: rotate(2deg); }
ul.polaroids li:nth-child(3n) a { -webkit-transform: none; position: relative; top: -5px;  -moz-transform: none; }
ul.polaroids li:nth-child(5n) a { -webkit-transform: rotate(5deg); position: relative; right: 5px;  -moz-transform: rotate(5deg); }
ul.polaroids li:nth-child(8n) a { position: relative; right: 5px; top: 8px; }
ul.polaroids li:nth-child(11n) a { position: relative; left: -5px; top: 3px; }
ul.polaroids li.messy a { margin-top: -375px; margin-left: 160px; -webkit-transform: rotate(-5deg); -moz-transform: rotate(-5deg); }

ul.polaroids li a:hover { -webkit-transform: scale(1.25); -moz-transform: scale(1.25); -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5); -moz-box-shadow: 0 3px 6px rgba(0,0,0,.5); position: relative; z-index: 5; }
/* ******************** */



/* ******************** */
/* top banner menu */	
.top_banner {
    width: 100%;
    }

/* based on http://www.devinrolsen.com/pure-css-horizontal-menu/ */

#navigation {
    width: 100%;
    height: 40px;
    background-color: #666666;
    font-size: 15px;
    }

#navigation ul {
	  margin: 0px;
     padding: 10px;
     }

#navigation ul li {
     display: inline;
     height: 30px;
     float: left;
     list-style: none;
     margin-left: 35px;  /* spacing */
     position: relative;
     }

#navigation li a {
      color: #fff; 
      text-decoration: none;
      }

#navigation li a:hover {
      text-decoration: underline;
      }

#navigation li ul {
     z-index: 10;
     margin: 0px;
     padding: 0px;
     display: none;
     position: absolute;
     left: 0px;
     top: 30px;
     background-color: #666666;
     }

#navigation li:hover ul {
     display: block;
     width: 330px;
     }

#navigation li li {
     list-style: none;
     display: list-item;
     }

#navigation li li a {
      color: #fff; 
      text-decoration: none;
      }

#navigation li li a:hover {
      text-decoration: underline;
      }
/* ************** */	


/* ******************** */
/* behaviour of header (so header image does not have link appearance) */
	
a.header1:link {
	color: #CCCCCC;
	text-decoration: none;
   }

a.header1:visited {
	color: #CCCCCC;
	text-decoration: none;
   }

a.header1:hover {
	color: #CCCCCC;
	text-decoration: none;
   }

a.header1:active {
	color: #CCCCCC;
	text-decoration: none;
	}
/* ******************** */


/* ******************** */
/* top breadcrumb trail */	
#breadcrumb li {
    display: inline;
    text-decoration: none;
    }
 
 #breadcrumb li a:link {
    color: #000000;
	 font-size: 10px;
    text-decoration: none;
    }

#breadcrumb li a:hover {
    color: #000000;
    text-decoration: underline;
    }
/* ************** */	



/* ******************** */
/* behaviour of footer */
.footer2 {
	font-size: 10px;
	}
	
a.footer1:link {
	color: #FFFFFF;
	text-decoration: none;
   }

a.footer1:visited {
	text-decoration: none;
	color: #FFFFFF;
   }

a.footer1:hover {
	text-decoration: underline;
   }

a.footer1:active {
	text-decoration: none;
	}
/* ******************** */
	


/* ******************** */
/* supplier page links */
/*  taken from http://fortysevenmedia.com/blog/archives/css3_buttons_with_icons/ */

a.button {
	background-image: -moz-linear-gradient(top, #ffffff, #dbdbdb);
	background-image: -webkit-gradient(linear,left top,left bottom,
    color-stop(0, #ffffff),color-stop(1, #dbdbdb));
	filter: progid:DXImageTransform.Microsoft.gradient
    (startColorStr='#ffffff', EndColorStr='#dbdbdb');
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient
    (startColorStr='#ffffff', EndColorStr='#dbdbdb')";
	border: 1px solid #fff;
	-moz-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.4);
	-webkit-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.4);
	box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.4);
	border-radius: 18px;
	-webkit-border-radius: 18px;
	-moz-border-radius: 18px;
	padding: 5px 15px;
	text-decoration: none;
	text-shadow: #fff 0 1px 0;
	float: left;
	margin-right: 5px;
	margin-bottom: 2px;
	display: block;
	color: #597390;
	line-height: 14px;
	font-size: 12px;
	font-weight: bold;
	}

a.button:hover {
	background-image: -moz-linear-gradient(top, #ffffff, #eeeeee);
	background-image: -webkit-gradient(linear,left top,left bottom,
    color-stop(0, #ffffff),color-stop(1, #eeeeee));
	filter: progid:DXImageTransform.Microsoft.gradient
    (startColorStr='#ffffff', EndColorStr='#eeeeee');
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient
    (startColorStr='#ffffff', EndColorStr='#eeeeee')";
	color: #000;
	display: block;
	}

a.button:active {
	background-image: -moz-linear-gradient(top, #dbdbdb, #ffffff);
	background-image: -webkit-gradient(linear,left top,left bottom,
    color-stop(0, #dbdbdb),color-stop(1, #ffffff));
	filter: progid:DXImageTransform.Microsoft.gradient
    (startColorStr='#dbdbdb', EndColorStr='#ffffff');
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient
    (startColorStr='#dbdbdb', EndColorStr='#ffffff')";
	text-shadow: 0px -1px 0 rgba(255, 255, 255, 0.5);
	margin-top: 1px;
	}

a.button {
	border: 1px solid #979797;
	}    /* ie hack */

a.button.icon {
	padding-left: 11px;
	}

a.button.icon span{
	padding-left: 36px;
	background: url(/images/Navigation/website.png) no-repeat 0 -4px;
	}

a.button.icon.product span {
	padding-left: 36px;
	background: url(/images/Navigation/product.gif) no-repeat 0 -4px;
	}

a.button.icon.website span {
	padding-left: 36px;
	background: url(/images/Navigation/website.gif) no-repeat 0 -4px;
	}

a.button.icon.library span {
	padding-left: 36px;
	background: url(/images/Navigation/library.gif) no-repeat 0 -4px;
}