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

Wattyl
site design and build by
Ben Manson of 3blindmice
sep 09

wattyl blue :: #002859
int design id purple: #77278B

NOTE // menu styles in cssMenu.css

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

/*div {border: 1px solid #000}*/

body {
	font-size: 62.5%;
	line-height: 1em; 
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	
	}
	
	#spedit {
		/*background-color:#002859;*/
		}


	/* -------------- HEADER -------------------- */
	
	#header {
		background: url(../images/bodybkgd.gif) repeat-x top left;
		height: 125px;
		}
		
		.wrap {
			width: 800px;
			margin: 0 auto;
			clear: both;
			}
			
			#spedit .wrap  {
				position: relative;
			}
			
			#header .wrap, #content .wrap, #footer .wrap {
				position: relative;
				}
				
	
	p#logo {
		padding: 22px 0 15px 0;
		margin: 0;
		}
		
		p#logo a {
			width: 160px;
			height: 50px;
			text-indent: -5000px;
			background: url(../images/logo.png) no-repeat;
			display: block;
			}
	
	/* -- search table in header -- */
	#search {
		/*position: absolute;
		top: 50px;
		right: 0;*/
		float: right;
		margin-top: -45px;
		text-transform: uppercase;
		color: #FFF;
		background-color: #002859;
		width: 180px;
		text-align:right;
		margin-right: 5px;
		}
	
	.ms-sbtable {
		color: #99A9BD;
		}
			
		#search td.ms-sbcell {
			border: none;
			font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
			font-size: 1.2em
	
			}
			
			#search td.ms-sbcell input.ms-sbplain {
				font-size: 1.3em;
				/*background: url(../../Images/wattyl/search.png) no-repeat 2px 2px;*/
				background-color: #002859/*#002859*/;
				color: #99A9BD;
				padding: 3px 3px 3px 3px;
				border: 1px solid #99A9BD;
				text-align: left;
				}
			
			#search td.ms-sbgo {
				padding: 0 0 0 2px;
				background-color: #002859;
				}
	
		
		.ms-sbtext {
			font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
			font-size: 1.2em
			}
	
	#loginlink 
	{
	    position: absolute;
	    top: 88px;
	    right: 0;
	    z-index: 10;
	}
	
	#breadcrumbs p {
		color:  #999;
		margin: 0 0 30px 0;
		padding: 0;
		font-size: 1em;
		}
		
		#breadcrumbs a {
			color: #999;
			letter-spacing: 0.05em;
			}
			
			#breadcrumbs a:hover {
				color: #666;
				text-decoration: underline;
				}

						
	/* -------------- CONTENT -------------------- */
	
	#main {
		width: 800px;
		color: #404040;
		clear: both;
		min-height: 400px;
		}
		
		#helpstar {
			position: absolute;
			left: 483px;
			top: 35px;
			z-index: 10;
			}
		
		#banner {
			width: 600px;
			/* height: 220px; */
			padding-top: 5px;
			border-top: 5px solid #404040;
			padding-bottom: 5px;
			border-bottom: 5px solid #404040;
			}
			
			#banner #slideshowhome {
				margin-left: 0;
				width: 600px;
				height: 280px;
				overflow: hidden;
				margin: 0;
				padding: 0;
				z-index: 5;
				}
							
		#leftcol {
			width: 600px;
			float: left;
			padding-right: 10px;
			}
			
		#singlecol 
		{
		    width: 800px;
		}
			

			
			h1 {
				font: 2.6em/1em 'Helvetica Neue', Helvetica, Arial, sans-serif;
				color: #002859;
				padding: 0;
				margin: 24px 0 4px 8px;
				font-weight: normal;
				}
				
				div.nobanner h1 {
					border-top: 5px solid #404040;
					padding-top: 15px;
					margin-top: 0;
					width: 100%; 
					}
				
			
			h2 {
				font: 1.6em/1em 'Helvetica Neue', Helvetica, Arial, sans-serif;
				color: #002859;
				padding: 0 0 16px 8px;
				font-weight: normal;
				}
				
				h2.secondh2 {
					/*border-bottom: 2px solid #002859;*/
					padding: 8px 0 4px 8px;
					margin-bottom: 12px;
					font-size: 2em;	
					}
			
			    #tableform h2 
				{
				    padding: 0 0 4px 0;
				    margin: 40px 0 10px;
				    border-bottom: 4px solid #AAA;
				    font-size: 2.2em;
				}
			
			h3 {
				font: 1.8em/1em 'Helvetica Neue', Helvetica, Arial, sans-serif;
				color: #29ABE2;
				padding: 8px 0 4px 8px;
				margin: 20px 0 10px;
				font-weight: normal;
				border-bottom: 2px solid #AAA;
				clear: both;
				}
				
				#tableform h3 
				{
				    padding-left: 0;
				    margin: 40px 0 10px;
				    
				}
				
				#tableform h3.firsth3 
				{
				    margin-top: 10px;
				}
			
			h4 {
				font-size: 1.4em;
				line-height: 1.5em;
				padding: 0 0 8px 8px;
				letter-spacing: -0.015em;
				font-weight: bold;
				}

			
			p {
				font-size: 1.4em;
				line-height: 1.5em;
				padding: 0 0 16px 8px;
				letter-spacing: -0.015em;
				}
				
				#singlecol ul {
					font-size: 1.4em;
					line-height: 1.5em;
					padding: 0 0 0.5em 0; 
					margin-top: 0; 
					margin-bottom: 0;
					margin-left: 45px; 
					list-style-image: url(../images/bullet.gif);
					}
					
						#singlecol li {
							padding-bottom: 0.5em
						}

			.warning 
			{
			    font-size: 1.4em;
			    color: Red;
			    }
			
			#buttongroup 
			{
			    margin: 75px 0 0 150px;
			 }
			 
			#buttongroup8 
			{
			    margin: 15px 0 0 150px;
			 }
			
			#buttongroup a, #buttongroup8 a
			{
			    margin-right: 15px;
			    margin-bottom: 15px;
			    float: left;
			}
			
			/* -------------- links -------------------- */
			
			a {
				text-decoration: none;
				}
			
				#main a:link {
					color: #29ABE2;
					cursor: pointer;
					}
				
				#main a:hover {
					color: #FF0000;
					text-decoration: underline;
					}
				
				#main a:visited {
					color: #AAA;
					}
				
				#main p.paralinks a:link {
					color: #29ABE2;
					cursor: pointer;
					}
				
				#main p.paralinks a:hover {
					color: #FF0000;
					text-decoration: underline;
					}
				
				#main p.paralinks a:visited {
					color: #AAA;
					}
				
				.floatright {
					float: right;
					padding: 0 0 5px 5px;	
					}
			
			/* -------------- FOOTER -------------------- */
			
			
			#footer .wrap {
				clear: both;  
				border-top: 5px solid #404040;
				margin-top: 30px;
				}
			
			#privacylink {
				position: absolute;
				top: 17px;
				right: 8px;
				font-size: 1em;
				text-transform: uppercase;
				font-weight: bold;
				}
				
				#privacylink a:link, #privacylink a:visited {
				text-decoration: none;
				color: #999;
				}
				
				#privacylink a:hover {
				text-decoration: underline;
				color: #404040;
				}

		/* -------------  FORM styles   -------------- */
	    
	    #tableform 
	    {
	        background-color: #FFF;
	        margin-left: 40px;
	        margin-right: 40px;
	    }
	    
	    td 
	    {
	        vertical-align: middle;
	    }
	    
	    td p 
	    {
	        padding-bottom: 0;
	        line-height: 2em;
	    }
	    
	    #col1 
	    {
	        width: 135px;
	    }
	    
	    #col2 
	    {
	        width: 320px;
	    }
	    
	    #productdetails, #spreadingrate
	    {
	        width: 100%;
	        margin-top: 10px;
	    }
	    
	    #productdetails p
	    {
	        line-height: 2.2em;
	    }
	    
	    #spreadingrate .CellHeader 
	    {
	        font-weight: bold;
	    }
	    
	    #spreadingrate input 
	    {
	        width: 60px;
	        font-size: 2em;
	        text-align: center;
	        color: #29ABE2;
	    }
	    
	    #spreadingrate input.calculate 
	    {
	        width: 125px;
	        text-transform: uppercase;
	        font-size: 1.4em;
	        text-align: center;
	        font-weight: bold;
	        height: 35px;
	        text-indent: -5000px;
	        background: url(../images/buttons/calculate.gif) no-repeat top left;
	        border: none;
	        margin: 0 5px;
	    }
	    
	    #spreadingrate .col1
	    {
	        width: 120px;
	    }
	    
	    #spreadingrate .col10
	    {
	        width: 100px;
	        font-size: 2em;
	        line-height: 1.2em;
	        color: #29ABE2;
	        font-weight: bold;
	    }
	    
	    #spreadingrate .col1 p
	    {
	        line-height: 1.2em;
	    }
	    
	    
	    
	    select, input, textarea {
		    font-size: 1.2em;
		    padding: 3px;
		    border: 1px solid #CCC;
		    color: #333;
		    font-weight: bold;
		    margin: 3px;
		}
		
		
		/* ------- tableform table styles --------*/
		
		#tableform {
		    padding: 7px 0 7px 0;
		}
		
		#tableform td, #tableform2 td {
		    text-align: left;
		    margin-bottom: 1px;
		    font-size: 1.2em;
		}
		
		#tableform select, #tableform input, #tableform textarea 
		{
		    width: 350px;
		}
		
		#tableform input.mediumsize 
		{
		    width: 270px;
		}
		
		/* ------- tableform2 table styles --------*/
		
		#tableform2 {
		    margin-left: 8px;
		}
		
		/* ------- tabledata table styles --------*/
		
		#tabledata {
		    margin-left: 8px;
		    width: 780px;
		}
		
		#tabledata td {
		    text-align: left;
		    margin-bottom: 1px;
		    font-size: 1.1em;
		}
		
		#tabledata .GridViewStyle 
		{
		    margin: 0;
		    width: 100%;
		    font-weight: normal;
		}
		
		#tabledata .GridViewStyle input 
		{
		    margin: 2px;
		    padding: 2px;
		    font-size: 12px;
		    width: 80px;
		}
		
		#PromoCheck, #TermsAndConditionsCheck, #AgeCheck 
		{
		    width: 30px;
		    border: none;
		}
		
		label 
		{
		    font-weight: normal;
		    font-size: 1.2em;
		    line-height: 1.3em;
		}
		
		textarea {
			height: 85px;
			}
		
		
		
		
		
		
		
		
		
		.Button 
		{
		    width: 130px;
		}
		
		#Button1 
		{
		    background: url(../images/submit.gif) no-repeat top left;
		    width: 130px;
		    height: 46px;
		    text-indent: -5000px;
		    text-transform: capitalize;
		    border: none;
		    margin-top: 15px;
		}
		
		#Button2 
		{
		    background: url(../images/reset.gif) no-repeat 0 -1px;
		    width: 88px;
		    height: 45px;
		    text-indent: -5000px;
		    text-transform: capitalize;
		    border: none;
		    margin-top: 15px;
		}
		
		.validation 
		{
		    color: Red;
		    font-weight: bold;
		    font-size: 1em;
		}
				
				
				/* -------------  BUTTONS   -------------- */
				
				input.button 
				{
				    border: none;
				    cursor: pointer;
				}
				
				#tableform input.browse 
				{
				    background:  url(../images/buttons/browseproducts.gif) no-repeat center top;
				    width: 230px;
				    height: 46px;
				    text-indent: -5000px;
				    margin-top: 15px;
				    cursor: pointer;
				    border: none;
				    text-transform: capitalize;
				}
				
				#tableform input.UpdateButton2 
				{
				    background: url(../images/buttons/update.gif) no-repeat top left;
				    width: 120px;
				    height: 46px;
				    text-indent: -5000px;
				    margin-top: 15px;
				    cursor: pointer;
				    border: none;
				    text-transform: capitalize;
				}
				
				input.addcolour 
				{
				    background: url(../images/buttons/addcolour.gif) no-repeat top left;
				    width: 130px;
				    height: 35px;
				    text-indent: -5000px;
				    margin-top: 15px;
				    cursor: pointer;
				    border: none;
				    text-transform: capitalize;
				}
				
				input.bluebutton 
				{
				    width: 70px;
				    cursor: pointer;
				    border: none;
				    text-transform: uppercase;
				    color: #FFF;
				    background-color: #29ABE2;
				    margin: 0;
				}
				
				
				#tableform input.next, input.next 
				{
				    background: url(../images/buttons/next.gif) no-repeat top left;
				    width: 120px;
				    height: 46px;
				    text-indent: -5000px;
				    margin-top: 15px;
				    cursor: pointer;
				    border: none;
				    text-transform: capitalize;
				}
				
				#tableform input.submitorder 
				{
				    background: url(../images/buttons/submitorder.gif) no-repeat top left;
				    width: 184px;
				    height: 42px;
				    text-indent: -5000px;
				    margin-top: 15px;
				    cursor: pointer;
				    border: none;
				    text-transform: capitalize;
				}
				
				#tableform input.back 
				{
				    background: url(../images/buttons/back.gif) no-repeat top left;
				    width: 120px;
				    height: 42px;
				    text-indent: -5000px;
				    margin-top: 15px;
				    cursor: pointer;
				    border: none;
				    text-transform: capitalize;
				    margin: 0;
				    padding: 0;
				}
				
				#tableform input.go 
				{
				    background: url(../images/buttons/go.gif) no-repeat top left;
				    width: 61px;
				    height: 35px;
				    text-indent: -5000px;
				    margin-top: 0;
				    padding-top: 0;
				    cursor: pointer;
				    border: none;
				    text-transform: capitalize;
				}
				
				#tableform input.systemselector 
				{
				    background: url(../images/buttons/systemselector.gif) no-repeat top left;
				    width: 220px;
				    height: 46px;
				    text-indent: -5000px;
				    margin-top: 15px;
				    padding-top: 0;
				    cursor: pointer;
				    border: none;
				    text-transform: capitalize;
				}
				
				#systemwizard input.getsystems
				{
				    background: url(../images/buttons/getsystems.gif) no-repeat top left;
				    width: 137px;
				    height: 35px;
				    text-indent: -5000px;
				    margin-top: 15px;
				    padding-top: 0;
				    cursor: pointer;
				    border: none;
				    text-transform: capitalize;
				}
				
				#button a {
					width: 219px;
					height: 60px;
					text-indent: -5000px;
					background: url(../images/button2.gif) no-repeat top left;
					display: block;
					}
					
					#button a:hover {
						background-position: 0 -60px;
						}				
			
			/* -------------  GRID VIEW styles (used on product results for example)   -------------- */
			
			#ctl00_MainContent_DocumentsView td, #ctl00_MainContent_DocumentsView th {
		        text-align: left;
		        margin-bottom: 1px;
		        font-size: 1.2em;
		        
		    }
			
			table.GridViewStyle 
			{
			    margin: 30px 40px 0;
			    line-height: 2.4em;
			    width: 680px;
			    font-weight: bold;
			}
			
			table.GridViewStyle2 
			{
			    margin: 30px 20px 0;
			    line-height: 2em;
			    width: 760px;
			    font-weight: normal;
			    
			}
			
			table.GridViewStyle2 td
			{
			    margin: 30px 20px 0;
			    line-height: 1.2em;
			    width: 760px;
			    font-weight: normal;
			    font-size: 1.3em
			}
			
			table.GridViewStyle th, table.GridViewStyle2 th
			{
			    font-size: 1.4em;
			    font-weight: bold;
			    color: #AAA;
			    text-align: left;
			}
			
			tr.GridViewRowStyle td 
			{
			    background-color: #EFEFEF;
			}
			
			tr.GridViewAlternatingRowStyle td
			{
			    background-color: #F1F1F1;
			}
			
			table.GridViewStyle label
			{
			    line-height: 2em;
			    font-size: 1.4em;
			    padding-right: 15px;
			    padding-left: 5px;
			}
			
			table.GridViewStyle input, table.GridViewStyle select
			{
			    line-height: 2em;
			    font-size: 14px;
			    margin: 10px 0;
			    font-weight: normal;
			}
			
			table.GridViewStyle .radiobuttons input 
			{
			    border: none;
			}
			
			table.GridViewStyle .radiobuttons label 
			{
			    
			    vertical-align: middle;
			}
			
			table.GridViewStyle2 input, table.GridViewStyle2 select
			{
			    line-height: 1.2em;
			    font-size: 0.9em;
			    margin: 10px 0;
			    font-weight: bold;
			    letter-spacing: 0.1em
		        
			}
			
			p.nextlinks 
			{
			    font-size: 1.1em;
			    padding-left: 40px;
			}
			
			div#slidepanel 
			{
			    display: none;
			    width: 90%;
			    margin: 0 auto 15px; 
			}
			
			div#slidepanel h3
			{
			   margin-top: 10px;
			}
			
			div#slidepanel p
			{
			    font-weight: normal; 
			    line-height: 1.5em;
			    padding-bottom: 16px;
			}
			
			.slidelinktext
			{
			    font-size: 0.8em; 
			    font-weight: normal; 
			    line-height: 1em
			}
			
			#main .slidelinktext a
			{
			    color: #FF0000;
			    text-decoration: underline;
			}
			
			td.GridViewCol1 
			{
			    padding-left: 8px;
			    border-right: 1px solid #FFF;
			}
			
			#tableform td.GridViewCol2 
			{
			    text-align: center;
			    border-right: 1px solid #FFF;
			}
			
			
			/* -------------- CORE.CSS overrides -------------------- */
			
			a#ctl00_explitLogout_ExplicitLogin {
				color: #CCC;
				text-transform: lowercase;
			}
			


			
			/* -------------- FIXES -------------------- */
			
			.clear {
				 display:inline-block;
				}
				
				.clear:after {
				 display:block; 
				 visibility:hidden; 
				 clear:both; 
				 height:0; 
				 content: " "; 
				}