@charset "utf-8";
/* colhorz_2010.css */

/* Tell the browser to render HTML 5 elements as block */
header, section, footer, aside, nav, article, figure, hgroup, menu {
	display: block;	
}

/*COLOURS*/
/*#f0af0a = mustard*/
/*#cad6f1 = light white blue*/
/*#A9B3CB = grey blue*/
/*#000000 = black*/
/*#f03232 = cherry red*/
/*#280101 = dark red*/
/*#4F0101 = deep red*/
/*#7A0000 = deep dark red*/

/********************************RESET*********************************/

/*normalizez margin, padding*/
body, div, dl, dt, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote {
	margin: 0;
	padding: 0;
	font-size: 100%;
}

/*normalizes font-size for headers*/
h1, h2, h3, h4, h5, h6 {
	font-size: 100%;
}

/*Removes list-style from lists*/
ol, ul {
	list-style: none;
}

/*Normalizes font-style and font-weight to normal*/
address, caption, cite, code, dfn, em, strong, th, var {
	font-style: normal;
	font-weight: normal;
}

/*Removes border from fieldset and img*/
fieldset, img {
	border: 0;
}

/*XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX GENERAL LAYOUT XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/

body {
	background-color: #7A0000;/*deep red*/
	color: #cad6f1;/*light/white blue*/
	font: 14px "Candara", "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	text-shadow: 1px 1px #000;/* to give clarity and contrast to body text*/
}

	/*container for the whole site*/
	div#container {
		position: relative;
		width: 100%;
		height: 1450px;
		margin: 70px auto 0;
		background: #7A0000 ;/*deep red*/
		
	}
	
	/*setting general colour of <h1>'s*/
	h1 {
		font-family: Verdana, Geneva, sans-serif;
		font-size: 16px;
		font-weight: normal;
		margin-bottom: 20px;
		color: #f0af0a;/*mustard*/
	}
	
	/*general gap between <p>'s*/
	p {
		margin-bottom: 10px;	
	}
	
		/*XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX HEADER XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
		
		/*header info*/
		header {
			position: fixed;
			width: 100%;
			height: 70px;
			margin: -70px auto 0;/*minus margin to put header sitting on top of container; need to adjust 'div#main' top margin*/
			background-color: #000;/*black*/
			z-index: 30;
			-webkit-box-shadow: 0 5px 5px rgba(0,0,0,.5);
			box-shadow: 0 5px 5px rgba(0,0,0,.5);
		}
		
		    header div#whisps {
			    position: absolute;
			    width: 100%;
			    height: 70px;
			    background: url(../images/whisps-2.png) 0 0 no-repeat;/*black*/
			    -webkit-animation: 
				    whisps 90s infinite linear;
			    -moz-animation: 
				    whisps 90s infinite linear;
		    }
		
		    header div#mist {
			    position: absolute;
			    width: 100%;
				height: 67px;
				background: url(../images/mist.png) 0 0 repeat-x;/*black*/
				
				-webkit-animation: mist 40s infinite linear;
				-moz-animation: mist 40s infinite linear;
				border-bottom: 4px solid #4F0101;/*deep red*/
			}    
		
		/*------------------------------------------------- ANIMATION DEFINITIONS ------------------------------------------*/
		
		 @-webkit-keyframes whisps {
			0%   { background-position: 2000px 0; }
			100% { background-position: -3000px 0; }
		 }
		
		 @-webkit-keyframes mist {
			0%   { background-position: -591px 0; }
			100% { background-position: 0 0; }
		 }
		 
		 @-moz-keyframes whisps {
			0%   { background-position: 2000px 0; }
			100% { background-position: -3000px 0; }
		 }
		
		 @-moz-keyframes mist {
			0%   { background-position: -591px 0; }
			100% { background-position: 0 0; }
		 }		
		
		   
		
		    
		/*-------------------------------------------------end ANIMATION DEFINITIONS end------------------------------------------*/
		
			
			/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx NAV xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
			
			/*to contain 'nav' within 960px width layout of the site's info and use the fixed position of the 'header'*/
			header nav {
				position: relative;
				height: 20px;
				width: 960px;
				margin: 50px auto 0;
				z-index: 35;
			}
		
				/*setting for main nav*/
				nav ul.lavabox {
					width: 300px;
					height: 20px;
					float: right;
					margin-top: -5px;
					margin-right: -30px;
					padding-top: 5px;
					padding-left: 30px;
					font-family: Verdana, Geneva, sans-serif;
					font-size: 13px;
					color: #f03232;/*cherry red*/
					overflow: hidden;
					background-color: rgba(0,0,0,.3);
					box-shadow: inset 0 0 4px rgba(0,0,0,.5);
				}
		
					nav ul.lavabox li {
						float: left;
						margin-right: 27px;
					}
					
					nav ul.lavabox li.back {
						border: 1px solid #f0af0a;/*mustard*/
    					background-color: #333;
    					width: 9px;
    					height: 20px;
						top: -3px;
    					z-index: 36;
    					position: absolute;
					}
				
						nav ul.lavabox li a {
							position: relative;
							color: #f03232;/*cherry red*/
							text-decoration: none;
							display: block;
							overflow: hidden;
							float: left;
							outline: none;
							top: -1px;
							text-align: center;
							z-index: 38;
						}
					
						nav ul.lavabox li a:hover {
							color: #f0af0a;/*mustard*/	
						}
						
						/*highlight the selected section of the scrolling page*/
						nav ul.lavabox li.current a {
							color: #f0af0a;/*mustard*/
							border-bottom: 1px solid #f0af0a;/*mustard*/
		                }
		
		/*XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX /NAV XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
		
		
		
		/*XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX MAIN XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
		
		/*main section centrally contained within 960px*/
		div#main {
			position: relative;
			width: 960px;
			height: 2932px;
			margin: -60px auto 0;/* minus top helps to place 'mix_border.png' bg image just under header. adjust header top margin*/
			padding-left: 30px;
			background: #7A0000 url(../images/mix_border.png) 0 0 repeat-y;
			
			z-index: 5;
		}
		
		
			/*placing gradient vertical rectangle for right border of page*/
			div#main div#rtborder {
				position: absolute;
				top: -60px;
				right: 0;
				width: 70px;
				height: 100%;
				background: -moz-linear-gradient(top, #f03232, #936, #fc6, #000);
				background: -o-linear-gradient(top, #f03232, #000);
				background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #f03232), color-stop(33%, #936), color-stop(66%, #FC6),  color-stop(1.00, #000));
				-moz-box-shadow: 1px 0 2px #000;
				-webkit-box-shadow: 1px 0 2px #000;
				box-shadow: 1px 0 2px #000;
				opacity: 0.5;
				z-index: 3;
			}
			
			/*placing background water/puddle image*/
			div#main div#bgwater {
				position: fixed;
				top: 50px;
				right: 0px;
				width: 766px;
				height: 726px;
				background-image: url(../images/waterReflection.png);
			}
		
			/*div used to centralise and fix the logo on the page as well as the sky background image*/
			div#main div#logo {
				position: fixed;
				width: 960px;
				height: 60px;
				margin: -60px 0 0 0;
				z-index: 21;
			}
		
				/*logo*/
				div#main div#logo img {
					position: relative;
					top: 80px;
					left: 356.5px;
					width: 247px;
					height: 69px;
					z-index: 25;
				}
		                                                   /*xxxxxxxxxxxxxxxxxxx ANCHORS xxxxxxxxxxxxxxxxxxxxxxx*/
			
			/* help place the anchor div for home nav to move to top of 'home' section*/
			div#main div#home {
				position: absolute;
				top: -250px;
			}
			
			/* help place the anchor div for graphics nav to move to top of 'grfxs' section*/
			div#main div#grfxs {
				position: absolute;
				top: 1295px;
			}
			
			/* help place the anchor div for templates nav to move to top of 'temp' section*/
			div#main div#temp {
				position: absolute;
				top: 1844px;
			}
			
			                                                  /*xxxxxxxxxxxxxxxxxxxend ANCHORS end xxxxxxxxxxxxxxxxxxxxxxx*/
			
			/*contains text of 1st section*/
			div#main section.all {
				position: relative;
				width: 880px;
				padding: 110px 20px 290px 80px;
				margin-top: 130px;
				margin-left: 0;
				margin-right: 50px;
				z-index: 20;
			}
			
				/*set up image replacement of <h1#replace> with webdes.png bg img*/
				div#main section.all h1#replace {
					text-indent: -2000px;
					background: url(../images/webdes.png) 0 0 no-repeat;
				}
				
				/*set up image replacement of <h1#onrep> with webdes.png bg img*/
				div#main section.all h1#onrep {
					text-indent: -2000px;
					background: url(../images/onlinedes.png) 0 0 no-repeat;
				}
				
				/*set up image replacement of <h1#onprnt> with printdes.png bg img*/
				div#main section.all h1#onprnt {
					text-indent: -2000px;
					background: url(../images/printdes.png) 0 0 no-repeat;
				}
				
				/*placing <h1#ms>text to the right of image replaced <h1#replace>*/
				div#main section.all h1#ms {
					margin: -44px 0 0 140px;	
				}
				
				div#main section.all p {
					width: 300px;
				}
				
			/* putting distance between header and 'home' section*/
			div#main section#home {
				
				padding-top: 170px;
			}
			
			/************************** VISUAL BAR LINKS *************************/
			
			/*visual vertical bar to link 'home' to 'web' sections*/
			div#main section#home div#link_one {
				position: absolute;
				width: 20px;
				height: 500px;
				left: 220px;
				background: -moz-linear-gradient(top, #7A0000, #f0af0a, #7A0000);
				background: -webkit-linear-gradient(top, #7A0000, #f0af0a, #7A0000);
				background: -o-linear-gradient(top, #7A0000, #f0af0a, #7A0000);
				background: -ms-linear-gradient(top, #7A0000, #f0af0a, #7A0000);
				background: linear-gradient(top, #7A0000, #f0af0a, #7A0000);
			}
			
			/*visual vertical bar to link 'web' to 'graphics' sections*/
			div#main section#web div#link_two {
				position: absolute;
				width: 20px;
				height: 500px;
				left: 220px;
				top: 230px;
				background: -moz-linear-gradient(top, #7A0000, #f03232, #7A0000);
				background: -webkit-linear-gradient(top, #7A0000, #f03232, #7A0000);
				background: -o-linear-gradient(top, #7A0000, #f03232, #7A0000);
				background: -ms-linear-gradient(top, #7A0000, #f03232, #7A0000);
				background: linear-gradient(top, #7A0000, #f03232, #7A0000);
			}
			
			/*visual vertical bar to link 'graphics' to 'templates' sections*/
			div#main section#graphics div#link_three {
				position: absolute;
				width: 20px;
				height: 500px;
				left: 220px;
				top: 250px;
				background: -moz-linear-gradient(top, #7A0000, #936, #7A0000);/*purple*/
				background: -webkit-linear-gradient(top, #7A0000, #936, #7A0000);/*purple*/
				background: -o-linear-gradient(top, #7A0000, #936, #7A0000);/*purple*/
				background: -ms-linear-gradient(top, #7A0000, #936, #7A0000);/*purple*/
				background: linear-gradient(top, #7A0000, #936, #7A0000);/*purple*/
			}
			
			/*visual vertical bar to link 'templates' to bottom of 'main' div*/
			div#main section#price div#link_four {
				position: absolute;
				width: 20px;
				height: 500px;
				left: 220px;
				top: 230px;
				background: -moz-linear-gradient(top, #7A0000, #4F0101, #7A0000);
				background: -webkit-linear-gradient(top, #7A0000, #4F0101, #7A0000);
				background: -o-linear-gradient(top, #7A0000, #4F0101, #7A0000);
				background: -ms-linear-gradient(top, #7A0000, #4F0101, #7A0000);
				background: linear-gradient(top, #7A0000, #4F0101, #7A0000);
			}
			
			/************************** END/VISUAL BAR LINKS *************************/
			
			/* */
			div#main section#web {
				margin-bottom: 250px;

			}
				
				/* floating text to left of screen for 'web', 'graphics' and 'temp' sections*/
				div#main section#web div.info, div#main section#graphics div.info, div#main section#price div.info {
					float: left;	
				}
			
			
			
				/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx web gallery xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
				/*styling galleries for the "web" and "temp" sections*/
			
				div#main section#web div.imgsGallery, 
				div#main section#graphics div.imgsGallery, 
				div#main section#price div.imgsGallery {
					float: right;
					width: 495px;
					height: 343px;
					background-color: rgba(0,0,0,0.5);
					-moz-box-shadow: 0px 0px 15px #000;/*black*/
					-webkit-box-shadow: 0px 0px 15px #000;/*black*/
					z-index: 36;
				}
				
				/*cherry red border with 50% alpha for 'web' image gallery*/
				div#main section#web div#webGal {
					border: 10px solid rgba(240,50,50,0.5);/*cherry red*/
				}
				
				/*mustard border with 50% alpha for 'graphics' image gallery*/
				div#main section#graphics div#grfxsGal {
					border: 10px solid rgba(240,170,10,0.5);/*mustard*/
				}
				
				/*purple border with 50% alpha for 'temp' image gallery*/
				div#main section#price div#tempGal {
					border: 10px solid rgba(153,51,102,0.5);/*purple*/
				}
			
					
					/*div#main div.set div.content:before {
					  content: '';
					  position: absolute;
					  display: block;
					  height: 343px;
					  width: 30px;
					  background-color: rgba(240,175,10,0.6);/*mustard*/
					 /* background-position: 0px 0px;
					  z-index: 38;
					}*/
					
					/*div#main div.set div.red:before {
					  content: '';
					  position: absolute;
					  display: block;
					  height: 343px;
					  width: 30px;
					  background-color: rgba(240,50,50,0.6);/*cherry red*/
					 /* background-position: 0px 0px;
					  z-index: 38;
					}*/
					
					/*setting <p> to descirbe the particular gallery image...for RPM*/
					div#main section#web div.imgsGallery p#rpm {
						position: absolute;
						bottom: -60px;
						right: 180px;
						width: 245px;
						padding: 15px 35px;
						color: #000;
						background-color: rgb(255,255,255);
						background-color: rgba(255,255,255,0.8);
						border: 2px solid #ccc;/*light grey*/
						-moz-border-radius: 3px;
						-webkit-border-radius: 3px;
						border-radius: 3px;
						-moz-box-shadow: 0px 2px 5px #444;
						-webkit-box-shadow: 0px 2px 5px #444;
						box-shadow: 0px 2px 5px #444;
					}
					
						div#main section#web div.imgsGallery p span {
							text-shadow: 1px 1px 1px #fff;/*white*/							
						}
					
					/*setting <p> to descirbe the particular gallery image...for Ben Lake*/
					div#main section#web div.imgsGallery p#benlake {
						position: absolute;
						bottom: -60px;
						right: 165px;
						width: 245px;
						padding: 15px 35px;
						color: #000;
						background-color: rgb(255,255,255);
						background-color: rgba(255,255,255,0.8);
						border: 2px solid #ccc;/*light grey*/
						-moz-border-radius: 3px;
						-moz-box-shadow: 0px 2px 5px #444;
					}
					
					/*setting <p> to descirbe the particular gallery image...for Kim Robinson*/
					div#main section#web div.imgsGallery p#hypno {
						position: absolute;
						bottom: -60px;
						right: 150px;
						width: 245px;
						padding: 15px 35px;
						color: #000;
						background-color: rgb(255,255,255);
						background-color: rgba(255,255,255,0.8);
						border: 2px solid #ccc;/*light grey*/
						-moz-border-radius: 3px;
						-moz-box-shadow: 0px 2px 5px #444;
					}
					
					/*setting <p> to descirbe the particular gallery image...for Flawless Beauty*/
					div#main section#web div.imgsGallery p#flawless {
						position: absolute;
						bottom: -60px;
						right: 135px;
						width: 245px;
						padding: 15px 35px;
						color: #000;
						background-color: rgb(255,255,255);
						background-color: rgba(255,255,255,0.8);
						border: 2px solid #ccc;/*light grey*/
						-moz-border-radius: 3px;
						-moz-box-shadow: 0px 2px 5px #444;
					}
					
					/*setting <p> to descirbe the particular gallery image...for Longrun Artistes*/
					div#main section#web div.imgsGallery p#longrun {
						position: absolute;
						bottom: -60px;
						right: 120px;
						width: 245px;
						padding: 15px 35px;
						color: #000;
						background-color: rgb(255,255,255);
						background-color: rgba(255,255,255,0.8);
						border: 2px solid #ccc;/*light grey*/
						-moz-border-radius: 3px;
						-moz-box-shadow: 0px 2px 5px #444;
					}
					
					/*setting <p> to descirbe the particular gallery image...for My Guitar Lessons Franchise*/
					div#main section#web div.imgsGallery p#mgl {
						position: absolute;
						bottom: -60px;
						right: 105px;
						width: 245px;
						padding: 15px 35px;
						color: #000;
						background-color: rgb(255,255,255);
						background-color: rgba(255,255,255,0.8);
						border: 2px solid #ccc;/*light grey*/
						-moz-border-radius: 3px;
						-webkit-border-radius: 3px;
						border-radius: 3px;
						-moz-box-shadow: 0px 2px 5px #444;
						-webkit-box-shadow: 0px 2px 5px #444;
						box-shadow: 0px 2px 5px #444;
					}
					
					/*setting <p> to descirbe the particular gallery image...for My Guitar Lessons Simon Devlins*/
					div#main section#web div.imgsGallery p#mgl-sd {
						position: absolute;
						bottom: -60px;
						right: 88px;
						width: 245px;
						padding: 15px 35px;
						color: #000;
						background-color: rgb(255,255,255);
						background-color: rgba(255,255,255,0.8);
						border: 2px solid #ccc;/*light grey*/
						-moz-border-radius: 3px;
						-webkit-border-radius: 3px;
						border-radius: 3px;
						-moz-box-shadow: 0px 2px 5px #444;
						-webkit-box-shadow: 0px 2px 5px #444;
						box-shadow: 0px 2px 5px #444;
					}
					
					/*setting <p> to descirbe the particular gallery image...for TEMPORARY MARKER*/
					div#main section#web div.imgsGallery p#other_1 {
						position: absolute;
						bottom: -60px;
						right: 74px;
						width: 245px;
						padding: 15px 35px;
						color: #000;
						background-color: rgb(255,255,255);
						background-color: rgba(255,255,255,0.8);
						border: 2px solid #ccc;/*light grey*/
						-moz-border-radius: 3px;
						-webkit-border-radius: 3px;
						border-radius: 3px;
						-moz-box-shadow: 0px 2px 5px #444;
						-webkit-box-shadow: 0px 2px 5px #444;
						box-shadow: 0px 2px 5px #444;
					}
					
					/*setting <p> to descirbe the particular gallery image...for David John*/
					div#main section#web div.imgsGallery p#djohn {
						position: absolute;
						bottom: -60px;
						right: 60px;
						width: 245px;
						padding: 15px 35px;
						color: #000;
						background-color: rgb(255,255,255);
						background-color: rgba(255,255,255,0.8);
						border: 2px solid #ccc;/*light grey*/
						-moz-border-radius: 3px;
						-webkit-border-radius: 3px;
						border-radius: 3px;
						-moz-box-shadow: 0px 2px 5px #444;
						-webkit-box-shadow: 0px 2px 5px #444;
						box-shadow: 0px 2px 5px #444;
					}
					
					/*setting <p> to descirbe the particular gallery image...for TEMPORARY MARKER*/
					div#main section#web div.imgsGallery p#other_2 {
						position: absolute;
						bottom: -60px;
						right: 45px;
						width: 245px;
						padding: 15px 35px;
						color: #000;
						background-color: rgb(255,255,255);
						background-color: rgba(255,255,255,0.8);
						border: 2px solid #ccc;/*light grey*/
						-moz-border-radius: 3px;
						-webkit-border-radius: 3px;
						border-radius: 3px;
						-moz-box-shadow: 0px 2px 5px #444;
						-webkit-box-shadow: 0px 2px 5px #444;
						box-shadow: 0px 2px 5px #444;
					}
			
				/* ********************styles refered to in 'jquery.msAccordion.js'****************************/
				div#main div.imgsGallery.accordionWrapper {
					display:inline-block; 
					
					overflow:hidden;
				}
					
					div#main div.imgsGallery.accordionWrapper img {
						vertical-align:top; 
						border:0; 
						margin:0; 
						padding:0;
						
					}
					div#main div.imgsGallery.accordionWrapper div {
						display:inline; 
						float:left; 
						margin:auto;
					}
					div#main div.imgsGallery.accordionWrapper div.title {
						cursor:pointer;
					}
					div#main div.imgsGallery.accordionWrapper div.content {
						display:none;
					}
				/******************************** end of 'jquery.msAccordion.js' styles***************************/
			
				
					
			/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx end/web gallery xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
			
			
			/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx Pricing xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
		
			
			/*getting the accordion raised above vertical ribbon by z-index*/
			div#main section#price div#costs {
			    position: relative;
				width: 960px;
				margin-left: -110px;
				/*cursor: pointer;*/
				background-color: rgba(0,0,0,0.5);
				border-radius: 10px;
				padding: 20px;
				box-shadow: inset 0 0 5px 5px rgba(0,0,0,0.2);/*black*/
				z-index: 29;
			}
			
			    div#main section#price div#costs div {
				    background-color: #280101;/*dark red*/
					margin-top: 0px;
					line-height: 20px;
					letter-spacing: 1px;
					border-radius: 10px;
				    padding: 20px;
					margin-bottom: 10px;
					margin-left: 5px;
					box-shadow: inset 0 0 9px 2px rgba(0,0,0,1),/*black*/ 
					            0 0 0 2px rgba(240,50,50,0.5),/*ruby red*/
								0 0 0 3px rgba(0,0,0,1),/*black*/
								/*0 0 0 4px rgba(240,50,50,0.8),/*ruby red*/
								0 7px 5px rgba(0,0,0,0.8)/*black*/;
				}
				
				    /**/
					/* styling and effecting <a>'s of <h1>'s*/
					div#main section#price div#costs a {
						display: block;
						margin-left: 20px;
						cursor: pointer;
						width: 40%;
				    }
					
					/*to give 1st <a> enough space beneath it to match the other <a><h1>'s within div#costs*/
					div#main section#price div#costs > a {
						
						margin-bottom: 20px;
				    }
					
					/*add text shadow to highlight <h1> hover*/
					div#main section#price div#costs a:hover h1 {
						text-shadow: 0px 0px 25px rgba(255,255,255,1.0);/*white*/
				        
				    }
				
				
				    div#main section#price div#costs div ul {
				        margin-left: 40px;
						float: left;
						width: 250px;
				    }
					
					
					
					div#main section#price div#costs div ul#wd {
				        	
				    }
					
					/*span covering the stated prices of work*/
					div#main section#price div#costs div ul li span {
					    color: #A9B3CB;/*grey-blue*/
						border-bottom: 1px dotted #A9B3CB;/*grey-blue*/                                                    ;
					}
					
					/*<span> for the email address in the 'Deposit' section*/
					div#main section#price div#costs div span a {
					    display: inline;
						color: #f03232;/*cherry red*/
					}
					
					/*<span> for the email address <a>:hover in the 'Deposit' section*/
					div#main section#price div#costs div span a:hover {
						color: #f0af0a;/*mustard*/
					}
			
		
					
			/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx end/Pricing xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
			
		
		
		/******* SKY ********/
		
		/*created to keep the Flash animated text fixed in 'main' area*/
		div#main div#sky {
			position: fixed;
			top: 250px;
			right: 20%;
			width: 270px;
			height: 150px;
			

		}
		
		
		/*XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX FOOTER XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
		
		/*to contain 'footer' within 100% width layout of the site's info*/
		footer {
			position: fixed;
			height: 70px;
			width: 100%;
			padding-top: 15px;
			background-color: #000;/*black*/
			bottom: 0px;
			z-index: 35;
		}
		
			
		
			
			/*create red band to run across top area of footer and places gradient at top of footer to give blend into main body 
			of the page*/
			footer div#topmarg {
				position: absolute;
				width: 100%;
				height: 70px;
				top: -68px;
				background: url(../images/footer_topgrad.png) 0 0 repeat-x;
				border-bottom: 4px solid #4F0101;/*deep red*/
			    
			}
			
			footer ul {
				position: relative;
				margin: -5px auto 0;
				width: 960px;
				color: #f0af0a;/*mustard*/
				
			}
		
				footer ul li {
					margin-bottom: 2px;
					
				}
				
				footer ul li#copyright {
					float: right;	
				}
				
					footer ul li a {
					color: #f03232;/*cherry red*/
					text-decoration: none;
					}
					
					footer ul li a:hover {
					color: #f0af0a;/*mustard*/	
					}
					
					
					
					
					/*---------------------------------------- feedback form --------------------------------------------*/

#feedback{
	margin:0;
	position:fixed;
	left:-421px;
	top:100px;
	width:400px;
	z-index:1000;
	background: rgba(0,0,0,0.8);/*black*/
	border-radius: 10px;
	border:10px solid rgba(240,50,50,0.3);/*cherry red*/
	box-shadow: 0 0 15px rgba(0,0,0,0.8), inset 0 0 15px #000;
	text-align:left;
	z-index: 50;
	}
#feedback h3{
	font-size: 25px;
	margin: 1em 35px;
	padding-bottom: .75em;
	border-bottom: 1px solid #fff;
	}
#feedback fieldset{
	border:none;
	margin:1em 35px;
	padding:0;
	}
#feedback legend{
	display:none;
	}
#feedback div{
	clear:both;
	padding:.2em 0;
	}	
#feedback label{
	float:left;
	width: 100px;
	border-top: 1px dotted rgba(240,50,50,0.5);/*cherry red*/
	}	
#feedback .field, #feedback .area{
	float:right;
	width:220px;
	border:1px solid #d5d5d5;
	padding:3px;
	background:#fff url(../images/images/feedback_input.gif) repeat-x;
	}
#feedback .field:focus, #feedback .area:focus {
	border:1px solid #ff9;/*lemon yellow*/
	box-shadow: 0px 0px 5px 3px #ff9, inset 0px 0px 5px 1px #ff9;/*lemon yellow*/
	}	
#feedback .area{
	height:120px;
	overflow:auto;
	}	
#feedback .submit{
	padding:1em 0;
	text-align:right;
	}	
#feedback button{
	text-indent:-8000px;
	text-align:left;
	border:0;
	overflow:hidden;
	width:164px;
	height:33px;
	background:url(../images/images/feedback_submit.png) no-repeat 0 0;
	opacity: 0.5;
	cursor:pointer;
	}
	
#feedback button:hover {
  opacity: 1.0;	
}

	/* feedback buttons */
	
	#feedback .open, #feedback .close{
		float:left;
		position:absolute;
		top:-10px;
		left:411px;
		text-indent:-8000px;
		width:33px;
		height:33px;
		cursor:pointer;
		opacity: 0.5;
		/*background: #FC0;*/
		border-top-right-radius: 10px;/*top right rounded corner*/
		border-bottom-right-radius: 10px;/*bottom right rounded corner*/
		/*box-shadow: 0px 1px 15px rgba(0,0,0,0.8);/*black*/
		-moz-transition: all 0.3s ease-in-out;*/
		-moz-transition: background 3.0s fade-in;*/
		-webkit-transition: all 0.3s ease-in-out;*/
		-webkit-transition: background 3.0s fade-in;*/
		}
	
	
	#feedback .close{
		background: #fc0 url(../images/images/close.png) no-repeat 0 0;
		
	}
	
	#feedback .open {
	   background:url(../images/images/feedback_open.png) no-repeat 0 0;
	   opacity: 0.5;
	   height:106px;	
	}
	
	/*to expand sideways the contact button*/
	#feedback .open:hover {
	  opacity: 1.0;
	}
	
	#feedback .close:hover {
	  opacity: 1.0;
	  box-shadow: inset 0px 3px 15px rgba(255,255,255,0.9), inset 0 -2px 15px rgba(0,0,0,0.5), 0px 1px 15px rgba(0,0,0,0.8);/*white,black*/
	  -moz-transform: scale(1.2) translate(-7px, 0);
	  -webkit-transform: scale(1.2) translate(-7px, 0);
	}

/* // feedback form */

/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx thankyou.html xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/

#containerror {
    position: relative;
	margin: 10% auto 0;
	width: 375px;
	background: rgba(0,0,0,0.8);/*black*/
	border:10px solid rgba(240,50,50,0.3);/*cherry red*/
	box-shadow: 0 0 15px rgba(0,0,0,0.8), inset 0 0 15px #000;
	padding: 10px;
	text-align: center;
}

    #containerror a {
							
		color: #f03232;/*cherry red*/
		text-decoration: none;
		display: block;
	}
					
	#containerror a:hover {
		color: #f0af0a;/*mustard*/	
	}

/*border: 1px dotted #f00;/*TEMP*/