/*=============================

Wattyl Industrial CDROM

site design and build by
Ben Manson of 3blindmice
july 2010

Colours:

blue #004B8D
red #CB0000
greys #3B3B3B, #464646, #4F4F4F, #595959, #959595, #ACACAC

**note: menu styles in cssMenu.css

=============================== */

body {
	font-size: 62.5%;
	line-height: 1em; 
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	
	}
	
	body#metal {
		background: url(../images/bkgd_metal.jpg) repeat top left;
		}
	
	body#timber {
		background: url(../images/bkgd_timber.jpg) repeat top left;
		}
	
	body#road {
		background: url(../images/bkgd_road.jpg) repeat top left;
		}
	
	body.pcm {
		background: url(../images/bkgd_pcm.jpg) repeat top left;
		}
	
	body#pcmindex {
		background: url(../images/bkgd_epinamel.jpg) repeat top left;
		}
	
	body#duranamel {
		background: url(../images/bkgd_duranamel.jpg) repeat top left;
		}
	
	body#epinamel{
		background: url(../images/bkgd_epinamel.jpg) repeat top left;
		}
	
	body#galvit{
		background: url(../images/bkgd_galvit.jpg) repeat top left;
		}
	
	body#permachlor{
		background: url(../images/bkgd_permachlor.jpg) repeat top left;
		}
	
	body#polyu{
		background: url(../images/bkgd_polyu.jpg) repeat top left;
		}
		
	body#pcm_ancillary{
		background: url(../images/bkgd_ancillary.jpg) repeat top left;
		}
	
	/* -------------- HEADER -------------------- */
	
	#header {
		background: #000;
		width: 100%;
		}
		
		.wrap {
			width: 800px;
			margin: 0 auto;
			}
			
			#header .wrap, #content .wrap, #footer .wrap {
				position: relative;
				}
			
			
	/* -------------- TOC -------------------- */
	
	#toc .wrap {
		width: 800px;
		}
		
		#toclinks {
			background: url(../images/bkgdblue.png) transparent repeat;
			width: 780px;
			padding: 10px;
			}
	
		#tocbutton {
			border-top: 5px solid #000;
			}
			
			a#tocclick {
				padding: 5px 15px;
				position: relative;
				left: 600px;
				background-color: #000;
				color: #FFF;
				text-transform: uppercase;
				margin-bottom: 10px;
				}
				
				a#tocclick:hover {
					color: #CB0000;
					}
	
	
	/* -------------- CONTENT -------------------- */
		
	#content .wrap {
		background: url(../images/bkgdblue.png) transparent repeat;
		padding: 10px;
		width: 780px;
		margin-top: 3px;
		}
	
	#main {
		clear: both;
		}
	
		/* banner */
		#banner {
			background: #FFF;
			padding: 10px;
			}
		
		/* -- left column -- */
		#leftcol {
			clear: both;
			float: left;
			margin: 5px 5px 0 0;
			width: 560px;
			padding: 10px;
			background: #FFF;
			}
			
			#as2700 #leftcol {
				width: 760px;
				}

		/* -- left column -- */
		#leftcol2 {
			clear: both;
			float: left;
			margin: 5px 5px 0 0;
			width: 760px;
			padding: 10px;
			background: #FFF;
			}
			
			#as2700 #leftcol {
				width: 760px;
				}

		
		/* -- right column -- */
		#rightcol {
			float: left;
			width: 175px;
			background: #FFF;
			padding: 10px;
			margin-top: 5px;
			}
			
			img#logo {
				position: absolute;
				top: 50px;
				right: 30px;
				}
				
			p.breadcrumbs {
				font-size: 0.8em;
				color: #AAA;
				text-transform: uppercase;
				letter-spacing: 0.1em;
				}
				
				p.breadcrumbs a:link, p.breadcrumbs a:visited {
					color: #AAA;
					text-decoration: none;
					}
					
				p.breadcrumbs a:hover {
					color: #CB0000;
					}
			
			#banner h2 {
				padding-top: 50px;
				font-size: 1.4em;
				color: #ACACAC;
				padding-bottom: 5px;
				}
				
		h1 {
			text-transform: uppercase;
			font-size: 3.6em;
			margin-bottom: 5px;
			line-height: 1em;
			}
			
			#as2700 h1 {
				font-size: 3.4em;
				}
		
		h3 {
			font-size: 1.4em;
			text-transform: uppercase;
			font-weight: bold;
			}
			
			#leftcol h3 {
				font-size: 1.5em;
				padding: 1em 0 0.25em 0;
				border-bottom: 1px solid #D9D9D9;
				margin-bottom: 0.25em;
				}
		
		p {
			font-size: 1.3em;
			line-height: 1.5em;
			color: #333;
			
			}
			
			body.home p {
				padding-bottom: 1em;
				}
		
			
		a:link {
			color: #004B8D;
			text-decoration: none;
			}
			
		a:visited {
			color: #999;
			}
			
		a:hover {
			color: #CB0000;
			text-decoration: underline;
			}
		
		/* -- table of links -- */
		.datatable {
			width: 100%;
			margin: 15px 0 15px 0;
			padding: 0;
			/* border-collapse: collapse; */
			}
			
			.col1 {
				text-align: left;
				}
			
			.col2 {
				text-align: center;
				width: 100px;
				}
			
			.col3 {
				text-align: center;
				width: 130px;
				}
				
			td, th {
				font-size: 1.3em;
				line-height: 1.4em;
				padding: 6px 0 6px 10px;
				border-right: 1px solid #FFF;
				}
			
			th {
				background-color: #666;
				font-weight: normal;
				color: #FFF;
				text-transform: uppercase;
				border-bottom: 1px solid #555;
				border-top: 1px solid #555;
				font-weight: bold;
				}
			
			td {
				border-bottom: 1px solid #D9D9D9;
				color: #333;
				vertical-align: top;
				background-color: #F9F9F9;
				
				}
				
				td.col2, td.col3, th.col2, th.col3 {
					padding-left: 0;
					}
				
				tr.alt td {
					background-color: #E1E1E1;
					}
		
		
	
	
	/* -------------- FOOTER -------------------- */
	
	#footer .wrap {
		background: url(../images/bkgdgrey.png) transparent repeat;
		width: 780px;
		margin-top: 3px;
		padding: 10px;
		}
		
		.footercolumn {
			float: left;
			width: 185px;
			margin-right: 12px;
			margin-bottom: 5px;
			/* padding-left: 10px; */
			}
			
			.lastcolumn {
				margin-right: 0;
				}
		
		#footer h4 {
			font-size: 1.3em;
			border-bottom: 1px solid #848484;
			color: #FFF;
			padding-bottom: 7px;
			margin: 5px 0 5px 0;
			padding-left: 3px;
			}
			
		#footer p, #footer h5, #footer li {
			font-size: 1.1em;
			color: #FFF;
			line-height: 1.5em;
			padding: 0;
			padding-left: 3px;
			}
			
			/*
#footer p {
				border-bottom: 1px dotted #848484;
				}
*/
		
		#footer h5 {
			padding-top: 3px;
			font-weight: bold;
			}
		
		#footer ul, #footer li {
			margin: 0;
			padding: 0;
			}
			
			#footer li {
				list-style-type: none;
				list-style-image: url(../images/bullet.png);
				}
			
			#footer ul {
				padding-left: 23px;
				}
		
		#footer a:link, #footer a:visited {
			color: #EEE;
			}
	
	
	/* -------------- FIXES -------------------- */			
	.clear {
		 display:inline-block;
		}
		
		.clear:after {
		 display:block; 
		 visibility:hidden; 
		 clear:both; 
		 height:0; 
		 content: " "; 
		}