/*
	Filename: styles.css
	Created by: Dave Fuller
	Purpose: Instructions to browser for content presentation
*/

/* BluePrint Framework */
@media print {
	body{line-height:1.5;font-family:"Helvetica Neue", Arial, Helvetica, sans-serif;color:#000;background:none;font-size:10pt}
	.container{background:none}
	hr{background:#ccc;color:#ccc;width:100%;height:2px;border:none;margin:2em 0;padding:0}
	hr.space{background:#fff;color:#fff;visibility:hidden}
	h1,h2,h3,h4,h5,h6{font-family:"Helvetica Neue", Arial, "Lucida Grande", sans-serif}
	code{font:.9em "Courier New", Monaco, Courier, monospace}
	a img{border:none}
	p img.top{margin-top:0}
	blockquote{font-style:italic;font-size:.9em;margin:1.5em;padding:1em}
	.small{font-size:.9em}
	.large{font-size:1.1em}
	.quiet{color:#999}
	.hide{display:none}
	a:link,a:visited{background:transparent;font-weight:700;text-decoration:underline}
	a:link:after,a:visited:after{content:" (" attr(href) ")";font-size:90%}
	
	.pointer-right,
	.header ul,
	.currentsection,
	.footer ul,
	.left-navigation,
	.header img,
	.header a,
	.credits
	{outline:none; text-decoration:none; display:none;}
	.header, .content, .contentB{border-bottom:1px solid #222;}
}

@media screen {		html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,code,del,dfn,em,img,q,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{border:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;margin:0;padding:0}
	body{line-height:1.5;font-size:75%;color:#222;background:#fff;font-family:"Lucida Grande", "Helvetica Neue", Arial, Helvetica, sans-serif}
	table{border-collapse:separate;border-spacing:0;margin-bottom:1.4em;width:100%}
	caption,th,td{text-align:left;font-weight:400}
	table,td,th{vertical-align:middle}
	blockquote:before,blockquote:after,q:before,q:after{content:""}
	a img{border:none}
	html{font-size:100.01%}
	h1,h2,h3,h4,h5,h6{font-weight:400;color:#111}
	h1{font-size:3em;line-height:1;margin-bottom:.5em}
	h2{font-size:2em;margin-bottom:.75em}
	h3{font-size:1.5em;line-height:1;margin-bottom:1em}
	h4{font-size:1.2em;line-height:1.25;margin-bottom:1.25em}
	h5{font-size:1em;font-weight:700;margin-bottom:1.5em}
	h6{font-size:1em;font-weight:700}
	.left {float:left;margin:0 1.5em 1.5em 0;padding:0}
	.right {float:right;margin:0 0 1.5em 1.5em}
	.center { text-align:center;}
	a{color:#009;text-decoration:underline}
	blockquote{color:#666;font-style:italic;margin:1.5em}
	sup,sub{line-height:0}
	abbr,acronym{border-bottom:1px dotted #666}
	address{font-style:italic;margin:0 0 1.5em}
	pre{white-space:pre;margin:1.5em 0}
	pre,code,tt{font:1em 'andale mono', 'lucida console', monospace;line-height:1.5}
	ul,ol{padding-left:3.333em;margin:0 1.5em 1.5em 0}
	ul{list-style-type:disc}
	ol{list-style-type:decimal}
	dd{margin-left:1.5em}
	thead th{background:#c3d9ff}
	th,td,caption{padding:4px 10px 4px 5px}
	tr.even td{background:#e5ecf9}
	caption{background:#eee}
	.small{font-size:.8em;margin-bottom:1.875em;line-height:1.4em}
	.large{font-size:1.2em;line-height:2.5em;margin-bottom:1.25em}
	.hide{display:none}
	.highlight{background:#ff0}
	.added{background:#060;color:#fff}
	.removed{background:#900;color:#fff}
	.first{margin-left:0;padding-left:0}
	.last{margin-right:0;padding-right:0}
	.top{margin-top:0;padding-top:0}
	.bottom{margin-bottom:0;padding-bottom:0}
	fieldset{border:1px solid #ccc;margin:0 0 1.5em;padding:1.4em}
	legend{font-weight:700;font-size:1.2em}
	input[type=text],input[type=password],input.text,input.title,textarea,select{background-color:#fff;border:1px solid #bbb;margin:.5em 0}
	input[type=text]:focus,input[type=password]:focus,input.text:focus,input.title:focus,textarea:focus,select:focus{border-color:#666}
	input.text,input.title{width:300px;padding:5px}
	input.title{font-size:1.5em}
	textarea{width:390px;height:150px;padding:5px}
	input[type=checkbox],input[type=radio],input.checkbox,input.radio{position:relative;top:.25em}
	form.inline{line-height:3}
	form.inline p{margin-bottom:0}
	.error,.notice,.success{margin-bottom:1em;border:2px solid #ddd;padding:.8em}
	.error{background:#FBE3E4;color:#8a1f11;border-color:#FBC2C4}
	.notice{background:#FFF6BF;color:#514721;border-color:#FFD324}
	.success{background:#E6EFC2;color:#264409;border-color:#C6D880}
	.error a{color:#8a1f11}
	.notice a{color:#514721}
	.success a{color:#264409}
	.container{width:950px;margin:0 auto}
	.last,div.last{margin-right:0}
	div.border{padding-right:4px;margin-right:5px;border-right:1px solid #eee}
	.prepend-top{margin-top:1.5em}
	.append-bottom{margin-bottom:1.5em}
	.box{margin-bottom:1em;padding:1em 1em .5em 1em; }
	hr{background:#ddd;color:#ddd;clear:both;float:none;width:100%;height:.1em;border:none;margin:0 0 1.45em}
	hr.space{background:#fff;color:#fff;visibility:hidden}
	.clearfix:after,.container:after{content:"\0020";display:block;height:0;clear:both;visibility:hidden;overflow:hidden}
	.clearfix,.container{display:block}
	.clear{clear:both}
	h1 img,h2 img,h3 img,h4 img,h5 img,h6 img,li ul,li ol{margin:0}
	p,dl{margin:0 0 1.5em}
	a:focus,a:hover,.loud{color:#000}
	strong,dfn,dl dt,th,label{font-weight:700}
	em,dfn,tfoot{font-style:italic}
	del,.quiet{color:#666}
	
	/*  Tabs  */
	ul.tabs { margin: 0; padding: 0; }
	ul.tabs li { float: left; list-style: none; margin: 0; padding: 0; }
	ul.tabs li a { float: left; display: block; }
	ul.tabs { display: inline-block; }
	ul.tabs:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
	* html ul.tabs { height: 1%; }
	ul.tabs { display: block; }
	

}
/* END: BluePrint Framework */


@media screen {
	.browser-alert-wrapper { position:absolute; z-index:100; width:100%; top:0; left:0; background-color:#EC1C24; color:#FFF; background-image:url(/imgs/warning-banner.jpg); background-repeat:repeat-x; background-position:bottom; height:18px; }
	.browser-alert { padding:6px 12px 8px 12px; }
	.browser-alert p { margin-bottom:0; text-align:left;}
	.browser-alert img.warning-icon { float:left; padding-right:4px;}
	.browser-alert img.warning-action { float:right; }
	
	.container { width:885px; }
	input.text,input.title{width:380px;}
	input.short { width:130px; }
	input.shortest { width:24px; }


	.print-logo{display:none;}
	body{font-family:arial; color:#405A65; background-color:#FCF9D4;}
	h1,h2,h3{ color:#405A65;}
	a{ text-decoration:none;}
	
	#home{ width:1024px; background: #fff; position:relative;}
	.container{ width:1024px;
		background:#fff url('/imgs/sidebar-bg.jpg') repeat-y;
	}
	.stripe{ 
		z-index:20;
		background-color:rgb(215,215,215); height:200px; 
		position:absolute; 
		left:0px; 
		top:210px; 
		width:1024px;
		background: -moz-linear-gradient(left, rgb(215,215,215), rgb(240,240,240));
		background: -webkit-gradient(linear, left top, right top, from(rgb(215,215,215)), to(rgb(240,240,240)));
	}
	#home-page-bar{position:relative; z-index:40; height:390px; }
	#home-page-bar p.intro,
	#home-page-bar p.detail
	{ width:455px; }
	
	
	/* header bits */
	.header{ height:148px; position:relative;}
	.header .logo{ position:absolute; top:0px; left:0px; z-index:30;}
	.header ul{position:absolute; right:14px; top:0px;  }
	.header .pointer-right{ position:absolute; right:0px;}
	.header ul li{ position:relative; display:block; margin-left:0px; padding-left:0px; float:left; margin-right:2px; width:120px; height: 136px; background-color:orange; }
		
		.header li#prdcts{	background-color:#DD0000; width:170px;}
		.header li#prdcts a{padding-left:45px;}
		.header li#clr {	background-color:#EF9400;	width:128px;}
		.header li#srvc{ 	background-color:#99BE00;	width:119px;}
			.header li#srvc a span{ width:90px;}
		.header li#bt{ 	background-color:#0096E4;
		 width:114px;}
		.header li#cntct{ 	background-color:#8F84BC;}
		
	.header ul li a{ line-height:1.1em; position:absolute; bottom:10px; left:10px; width:100px; font-weight:bold; font-size:1.2em; color:#fff;}
	.header ul li a span{ padding-bottom:5px; line-height:1.1em; font-weight:normal; display:block; font-size:.85em; color:rgba(255,255,255,.8);}
	.header ul li a span.tel{ width:60px; font-size:16px; font-weight:bold; color:#fff; padding-bottom:1.5em; text-align:justify;}
	.currentsection{
		clear:both; 
		position:absolute;
		display:block; 
		bottom:0px; 
		height:12px;
		width:100%;
		background-color:red;
		background:transparent url('/imgs/style/pointer.png') 25% -10px no-repeat;
		}
	body.products .currentsection{
		background-position:42% -113px;
	}
	body.colour .currentsection{
		background-position:55% -140px;
	}
	body.service .currentsection{
		background-position:68% -87px;
	}
	body.about .currentsection{
		background-position:80% -34px;
	}
	body.contact .currentsection{
		background-position:92% -60px;
	}
	
	
	
	/* middle bit of page */
	.content{
		clear:both;
		padding:2em 3.5em 2em 4.75em;	
	}
	
	.contentB{
		clear:both;
		padding:2em 2em 2em 2.5em;
		position:relative;
	}
	.left-navigation{
		width:226px;
		margin-left:0px;
		padding-left:0px;
		float:left;
	}
	
	.left-navigation li{display:block; 
						background:transparent url('/imgs/style/nav-bar.png') 0% 100% no-repeat;}
	
	.left-navigation li a{
	color:#7A7C80; 
	display:block; 
	font-weight:bold;
	font-size:1.2em;
	padding:11px;
	padding-left:20px;
	background:transparent url('/imgs/style/greater-than.png') 85% 50% no-repeat;
	}
	.left-navigation li a span{ float:right; border:1px solid red; display:block; }
	.left-navigation li a:hover span, 
	.left-navigation li a.current span{ display:none;}
	
	
	.left-navigation li a:hover, .left-navigation li a.current{
		color:#fff;
		background:transparent url('/imgs/style/left-navigation-pointer.png') no-repeat;
		
	}
	body.products .left-navigation li a:hover, 
	body.products .left-navigation li a.current{
		background-position:0px -102px;
	}
	body.colour .left-navigation li a:hover,
	body.colour  .left-navigation li a.current{
		background-position:0px -51px;
	}
	body.service .left-navigation li a:hover, 
	body.service .left-navigation li a.current{
		background-position:0px -256px;
	}
	body.about .left-navigation li a:hover, 
	body.about .left-navigation li a.current{
		background-position:0px -205px;
	}
	body.contact .left-navigation li a:hover, 
	body.contact .left-navigation li a.current{
		background-position:0px -154px;
	}
	.demoframe{ 
		height:264px; 
		width:430px; 
		border: 0px solid pink;
		position:absolute;
		top:-48px;
		right:0px;}
		.tl{ position:absolute; top:0%; 	left:0%;  z-index:100;	/*border:2px solid blue;*/ width:20px; height:20px; 
			background-image: url('/imgs/style/corners.gif');}
		.tr{ position:absolute; top:0%; 	right:0%; z-index:100;	/*border:2px solid green;*/ width:20px; height:20px;
				background: url('/imgs/style/corners.gif') 100% 0%;}
		.br{ position:absolute; bottom:0%; 	right:0%; z-index:100;	/*border:2px solid yellow;*/ width:20px; height:20px;
				background: url('/imgs/style/corners.gif') 100% 100%;}
		.bl{ position:absolute; bottom:0%; 	left:0%;  z-index:100;	/*border:2px solid orange;*/ width:20px; height:20px;
				background: url('/imgs/style/corners.gif') 0% 100%;}
	.demonstrationholder{
		float:right;
		height:284px; 
		margin-top:-4em;
		background-color:transparent;
	}
	.demonstration{
		height:264px; 
		width:430px;
		/*-webkit-border-radius: 12px;
		-moz-border-radius: 12px;
		border-radius: 12px;*/
		background-color:#666;
		/*border:2px solid #ccc;*/
	}
	#demonstration{
		height:264px; 
		width:430px;
		/*-webkit-border-radius: 12px;
		-moz-border-radius: 12px;
		border-radius: 12px; */
		background-position:0px 0px;
		}
	.gallery{ 
		border:2px solid #ccc;
		/*-webkit-border-radius: 12px;
		-moz-border-radius: 12px;
		border-radius: 12px;*/
		background-color:#000; height:55px; padding:10px 0px 0px 10px;
		}
	.controller{ 
		display:none;
		border:2px solid #999;
		width:36px;
		text-align:center;
		padding-top:4px;
		height:15px;
		-webkit-border-radius: 6px;
		-moz-border-radius: 6px;
		border-radius: 6px;
		float:right;
	}
	.demonstration-info{
			margin-top:-260px;
			z-index:100;
			position:absolute;
			width:390px; 
			color:#fff;
			margin-left:10px;
			padding:5px 10px 10px 10px;
			background-color:#000;
			background-color:rgba(0,0,0,0.5);
			-webkit-border-radius: 12px;
			-moz-border-radius: 12px;
			border-radius: 12px;
			
	}
	#slide-title{font-weight:bolder;}
	.demonstration-info p{margin-bottom:0px; width:100%;}
	.controller a span{
						overflow:hidden; 
						display:block; 
						float:left; 
						text-indent:-60px; 
						height:12px; 
						width:12px;
						}
	
	.controller a { display:block; float:left;
					background-image:url('/imgs/backward-stop-forward.png');
					background-repeat:none;
					margin-bottom:0px;
					padding-bottom:0px;
	}
	
	.controller a.forward{ 	background-position: 100% 100%;	} 
	.controller a.stop{ 	background-position: 52% 100%;	}
	.controller a.back{ 	background-position: 0% 100%;	} 
	
	.controller a.forward:hover{ 	background-position: 100% 15%;} 
	.controller a.stop:hover{ 		background-position: 52% 15%;} 
	.controller a.back:hover{ 		background-position: 0% 15%;} 
	
	.action{ 
		width:31.5%; 
		margin-right:2%; 
		border:1px solid red; 			
		float:left;
		-webkit-border-radius: 12px;
		-moz-border-radius: 12px;
		border-radius: 12px;
		background-color:#DD0000;
		border:2px solid #ccc;
		border:2px solid rgba(0,0,0,.15);
		color:#fff;
		display:block;
		
	}
	#home .action{min-height:130px; }
	.action .inner{ padding:1em 8px 0 1em;}
	.aside .action{width:282px; margin-bottom:2em;}
	
	.action h2, .action h3{color:#fff; font-size:16px; font-weight:bold;}
	.action p{width:73%; font-family:'lucida grande',arial; font-size:11px;}
	
	/* 
		annoyingly these are positions are 
		in pixels because ie is rubbish 
	*/
	#a{background:#EF9400 url('/imgs/style/cut-out-dial-pad.png') 215px 10px no-repeat; margin-right:0;}
	#b{background:#DD0000 url('/imgs/style/cut-out-upside-down-bottle.png') 215px 10px no-repeat; }
	#c{background:#8E007F url('/imgs/style/cut-out-question-mark.png') 220px 10px no-repeat; }
	#d{background:#0096E4 url('/imgs/style/cut-out-question-mark-blue.png') 220px 10px no-repeat; }
	#e{ background:#8F84BC -moz-linear-gradient(top, rgba(255,255,255,.25), rgba(0,0,0,.25));}
	#f{background:#DD0000 -moz-linear-gradient(top, rgba(255,255,255,.25), rgba(0,0,0,.25));}
	#g{background:#EF9400 -moz-linear-gradient(top, rgba(255,255,255,.25), rgba(0,0,0,.25));}
	.action .act{ 
		-webkit-border-radius: 9px;
		-moz-border-radius: 9px;
		border-radius: 9px;
		width:60%;
		border:2px solid #ccc;
		border:2px solid rgba(255,255,255,.5);
		margin-bottom:.75em;
		background: -moz-linear-gradient(top, rgba(255,255,255,.25), rgba(0,0,0,.25));
	}
	.action .act a{
		display:block;
		padding:.15em;
		-webkit-border-radius: 8px;
		-moz-border-radius: 8px;
		border-radius: 8px;
		border:2px solid rgba(0,0,0,.1);
		text-align:center;
		}
	.action .act a{ color:#fff; font-size:1.2em;}
	
	.actionsmall{
		width:100%;
		border:1px solid red; 			
		float:left;
		-webkit-border-radius: 12px;
		-moz-border-radius: 12px;
		border-radius: 12px;
		background-color:#DD0000;
		border:2px solid #ccc;
		border:2px solid rgba(0,0,0,.15);
		color:#fff!important;
		display:block;
		padding:6px;
		margin-bottom:12px;
	}
	
	.actionsmall .act{ color:#fff!important; padding-left:1em;font-size:1.2em;}
	.article{float:left; width:366px; padding-left:16px; padding-bottom:2em;/*border:1px solid green;*/}
	#home .article{ border:2px solid #ccc; margin-left:58px;}
	#WhySpectraIsGreat, #SpectraMasterbatchFacilities{ 
		 width:388px;
		-webkit-border-radius: 12px;
		-moz-border-radius: 12px;
		border-radius: 12px;
		padding:20px;
		background-color:#efefef;
		background: -moz-linear-gradient(top, rgba(255,255,255,.25), rgba(100,100,100,.25)); 
		}
	#SpectraMasterbatchFacilities{
		background: -moz-linear-gradient(top,rgba(100,100,100,.25), rgba(255,255,255,.25)); 
	}
	
	
	.aside{ float:right; width:286px;   margin-right:2em;}
	.aside img{margin-bottom:1.75em;}
	/* paragraphs */
	p.intro {font-size:1.4em; line-height:1.3em;}
	p{margin-bottom:.5em;}
	
	/* headings variously coloured */
	h1{font-size:2.5em; font-weight:bold;}
	h1 a, h2 a, h3 a{
	color:inherit; 
	color:#405A65;
	}
	h2{font-size:1.5em; margin-bottom:0px;}
	body .article p a{ text-decoration:underline;}
	body.products .article h1, 
	body.products .article h2,
	body.products .article h3,
	body.products .article a{
		color:#DD0000;
	}
	body.colour .article h1, 
	body.colour .article h2,
	body.colour .article h3,
	body.colour .article a{
		color:#EF9400;
	}
	body.service .article h1, 
	body.service .article h2,
	body.service .article h3,
	body.service .article a{
		color:#99BE00;
	}
	body.about .article h1, 
	body.about .article h2,
	body.about .article h3,
	body.about .article a{
		color:#0096E4;
	}
	body.contact .article h1, 
	body.contact .article h2,
	body.contact .article h3,
	body.contact .article a{
		color:#8F84BC;
	}
	
	/* lists */
	dl dt{font-weight:bolder; padding:.5em; padding-left:24px;
	border-bottom:1px solid #ccc;
	background-image: url('/imgs/style/accordion-bg.png');
	background-repeat:no-repeat;
	background-position:0% 5px;
	}
	dl dd{ padding:.5em; padding-left:0em; margin-left:24px;}
	
	
	
	ol{}
	/* map */
	.map { width:100%;  height:200px; margin-top:-12px;}
	
	.round{	border:2px solid #444;
			overflow:hidden;
			-webkit-border-radius: 12px;
			-moz-border-radius: 12px;
			border-radius: 12px;
	}
	
	/* form */
	.alert{ background-color:#DD0000; color:#fff; padding:1em; border:1px solid #444;}
	form#contactform{ 
		background: rgb(235,235,235);
		background: -moz-linear-gradient(top, rgb(235,235,235), rgb(240,240,240));
		background: -webkit-gradient(linear, left top, left bottom, from(rgb(235,235,235)), to(rgb(240,240,240)));
	}
	form#contactform label{ font:inherit; 
	clear:left;
	float:left;
	font-weight:bold;
	}
	label span {color:#666; font-weight:normal;}
	form#contactform input{
		font:inherit;
		padding:.25em 0em .25em 0em; 
		margin-bottom:.5em;
		font-weight:normal;
	}
	form#contactform input,
	form#contactform textarea{clear:both; border:1px solid #888;}
	form#contactform textarea{height:6em; margin-bottom:.5em; padding:0px;}
	form p{ margin-bottom:0px;}
	form *{/*border:1px solid red;*/}
	.h{display:none;}
	.xxl{ width:99%; clear:both;}
	.xl{ width:50%; clear:both;}
	.l{ }
	.m{ width:150px; }
	.s{ width:2em;}
	
	label.mfl{ width:45%; display:inline !important; clear:none !important;  }
	label.mfr{ width:45%;  float:right !important; clear:none !important;  }
	input.mfl,input.mfr{ width:99%;  }
	
	
	label.SimpleSum{
		display:inline;
		width:4em; 
		/*background-color:#CD3529; 
		border:1px solid #fff;*/
		font-size:12px;
		padding:.5em .5em .5em .5em; 
		/*height:14px;*/
		
	}
	/*form#contactform input.Captcha,*/
	form#contactform input.SimpleSum{
		display:inline;
		width:3em; 
		padding:.5em .25em .25em .25em; 
		margin-bottom:0em;
		margin-left:1em;
		float:left;
		clear: none !important;
	}
	form#contactform input.Captcha{ width:75%; margin-top:0px; }
	label.Captcha{ clear:both; width:99%; /*width:130px;*/ line-height:1em;}
	label.Captcha img { }
	
	form#contactform input.submit{ 
		padding:.5em; 
		width:10em;font-weight:bold; 
		/*display:inline;*/
		/*clear:none !important;*/
		float:right;
		text-align:center;
		border:5px solid rgb(210,210,210);
		color:#405A65;
		background: rgb(240,240,241) url('/imgs/style/button-bg.jpg') repeat-x;
		-webkit-border-radius: 15px;
		-moz-border-radius: 15px;
		border-radius: 15px;
	}
	form#contactform input.submit:hover{border-color:#8F84BC;}
	
	
	/* footer */
	
	.footer{clear:both; height:140px; color:#fff; }
	.footer{background-color:#475A64;}
	.footer .inner{padding-left:112px; padding-right:42px; padding-top:10px;}
	.footer .section { border-left:2px solid #DD0000; float:left; width:17%;padding-left:0px; /*border:1px solid yellow;*/ }
	.footer ul.section {padding-left:4px; margin-left:0px; float:left; margin-right:0px;}
	.footer #colour{ width:13%; border-color:#EF9400;}
	.footer #services{ width:14%; border-color:#99BE00;}
	.footer #about{ width:30%; border-color:#8F84BC; padding-left:10px;}
	
	.footer #about ul{ float:left; width:26%; padding-left:0px; margin-left:0px;}
	.footer .section li{ list-style-type:none;}
	.footer .section ul{ }
	
	.footer .section a{ color:#fff;}
	.footer .section li a{ font-weight:bold; font-size:75%;}
	.footer .section li a b{font-weight:bold; font-size:12px;}
	
	.footer #address{ width:20%; text-align:right; border-left:0px; }
	.footer #address p{font-weight:bold; font-size:.9em; margin-bottom:.5em;}
	.footer #address p a{font-weight:normal; font-size:.9em;}
	.footer #address address{ font-size:10px; margin-bottom:0px;}
	
	.credits { width:1024px; margin:auto;	clear:both; font-size:.9em; padding-left:112px;}
	.credits a{	text-decoration:underline; color:#405A65;}
}