*
{
padding: 0px;							/* This enables the page to be centered in the middle */
margin: 0px;							/* This enables the page to be centered in the middle */	
}

body {
background: #464646 url('metremade_novalace1.gif');						/* Colour used to cordinate with side image around main content, makes page appear out from the normal white area */
font-size: 11px;						/* Font size of body attributes */
font-family: trebuchet ms, helvetica, sans-serif;		/* Choice of font for webpage */
color: #464646;							/* Colour of font for web page */
line-height: 20px;						/* Line height between paragraphs or lines */
}

#wrapper {
width: 735px;							/* Total width of wrapper */
margin: 0 auto;							/* Center page in the middle, without it it will move to the left of screen */
background: #fff url('images/.gif') repeat-y;		/* Side lines of gif image creates an outline of the wrapper */
padding: 15px 0 10px 0;						/* Padding settings of wrapper */
border-right: 1px solid gray;
border-left: 1px solid gray;
}

#cont {
width: 685px;							/* container width */
margin: 0 auto;							/* Aligns everything correctly on the page in the middle */
}

#banner {
background: url('images/banner.png') repeat-y;		/* banner image smaller to fit in the flash object to the right, flash images will not appear on the other pages */
width: 683px;							/* Width of banner area */
height: 150px;							/* height from top to bottom before navigation bar */
float: left;							/* float this image to the left to fit flash image to the right */
}

#flash {
background: #ffff00;						/* This colour will be the same colour as the flash image so it looks like the flash is coming into the banner */
width: 233px;							/* Width of flash image */
height: 210px;							/* Height of total flash image */
float: right;							/* Float image right of banner */
border-right: 1px solid gray;					/* Border was to go around whole banner but needed to define each side so it didn't split the banner */
				/* Border was to go around whole banner but needed to define each side so it didn't split the banner */
}

#menu {
background: #464646 url('images/') repeat-x top;
border: 1px solid gray;						/* Solid 1px gray border around navigation area. Makes things neater */
height: 65px;							/* Height of navigation bar */
width: 658px;							/* width of navigation bar */
padding: 0px 10px 10px 15px;					/* padding attributes */
margin: 0px 0px 20px 0px;					/* margin attributes */
float: left;							/* without float left navigation bar will fly to the right and not fit under flash and banner */
}

#menu ul li {
display: inline;						/* make list horizontal across the menu area */
line-height: 52px;						/* line height from the top, put links in the middle of navigation bar */
padding-left: 10px;						/* space in between links */
}

#menu ul li a {
padding: 8px 12px 8px 12px;					/* Padding dimensions */
font-size: 12px;						/* Font size in nav bar */ 
color: #fff;							/* colour of font */
font-weight: bold;						/* Bold font */
}

#menu ul li a:hover {
background: #fff url('images/brick.jpg') repeat-x top;		/* Creates the slate image over the nav selections when hovering */
color: #464646;							/* White hover font */
text-decoration: none;						
}

#fullLength1 {
margin-top: 10px;						/* Full length 1 which is similar to full length but without the side image, margin top gives space from the top */
position: relative;						/* Relative position for full length places content perfectly */
width:680px;							/* Wide width to fit content correctly */
float: left;							/* float everything left */
margin-bottom: 20px;						/* Create space on the bottom of this div to allow space after the next div */	
}

#fullLength1 p{ 
color: #808080;							/* Paragraph color for text */
font-size: 14px;						/* font size to be same as all other content size 14 */
padding: 5px; 							/* Padding dimensions around text make it look nice and not so close to the sides */	
margin: 5px;							/* Margin dimensions also creates space for better looking paragraphs */
line-height: 22px;						/* Line height spaces lines to ensure easy to read */
width: 680px;							/* Width of text, can be used to shorten text if needed just in case it sticks out to far */
}


#fullLength1 h1 {
font-size: 20px;						/* font size for h1 header */						
color: #FF3399;							/* colour of h1 has to be the same as the other headings */			
background: url('images/dotted.gif') bottom repeat-x;		/* dotted underline for all headers throughout website */
padding: 10px 0px 10px 15px;					/* Padding dimensions */
margin-bottom: 10px;						/* Space under h1 */
}

#fullLength {
margin-top: 10px;						
position: relative;						/* Relative position for full length places content perfectly */
width:680px;							/* Width of full length the same as full length1*/
float: left;							/* float to the left */
margin-bottom: 20px;						/* Space at the bottom of this div gives room */
		

}

#fullLength img {
padding: 15px;}							/* used img to create space between images in company profile as Firefox ignore hspace and vspace http://www.joomlashack.com/community/index.php?PHPSESSID=vkpe28gujhu9ipiqdnnj6p27p6&/topic,8132.0.html */

#fullLength h1 {
font-size: 20px;						/* Font size of header */
color: #FF3399;							/* Standard colour of all headers */
background: url('images/dotted.gif') bottom repeat-x;		/* dotted underline for all headers throughout website */
padding: 10px 0px 10px 15px;					/* padding dimensions */
margin: 10px;							/* margin */
}


#fullLength h2 {
background: url('images/dotted.gif') bottom repeat-x;		/* dotted underline for all headers throughout website */
font-size: 20px;						/* Font size of header */
color: #464646;							/* Standard colour of all headers */
padding: 5px; 							/* padding dimensions */
margin: 15px;							/* margin */
}

#fullLength h3 {
background: url('images/dotted.gif') bottom repeat-x;		/* dotted underline for all headers throughout website */
padding:10px;							/* padding dimensions */
text-align: center;						/* Specifically allocated for the disclamier heading to appear in the center */
font-size: 20px;						/* Font size of header */
color: #464646;							/* red colour, fits with normal disclaimer colours in other sites */
}


#fullLength ul li, ol li{ 					/* lo and li styles */
font-size: 14px;						/* font size of lo and li */
margin-left: 30px;						/* Links to be pushed out from the left for spacing and better looking design */
width:550px;							/* complete width for links to fit in */
}

#fullLength p{ 
color: #808080;							/* This is the standard font colour used throughout the website */
font-size: 14px;						/* Standard font size for paragraph */
padding: 5px; 							/* Padding to ensure stays away from borders and reads easier */
margin: 5px;							/* margin used for beauty as well */
line-height: 22px;						/* Standard line height for paragraph */
width: 550px;							/* width of paragraphs */
}

#testColour{
width:680px;
padding:25px;
}

#test1{								/* Hoverbox stencil and hoverbox sit inside test div */
width:680px;							/* complete width for hoverbox function */
margin-left: 55px;						/* pushed links to the right of the screen to align straight */
}

#test2{
padding: 40px 0 40px 0;						/* created padding to push other hoverbox up and this one down */
width:680px;							/* complete width for hoverbox function */
margin-left: 55px;						/* pushed links to the right of the screen to align straight */
clear: both;							/* Had to clear both so the second gallery images would go underneath each other, without this the images would stick together */
}

#test3{								/* Hoverbox stencil and hoverbox sit inside test div */
width:650px;							/* complete width for hoverbox function */
float: left;								/* pushed links to the right of the screen to align straight */
}

#test4{								/* Hoverbox stencil and hoverbox sit inside test div */
width:350px;							/* complete width for hoverbox function */
								/* pushed links to the right of the screen to align straight */
}

#test3 h1 {
background: url('images/dotted.gif') bottom repeat-x;		/* dotted underline for all headers throughout website */
font-size: 20px;						/* Font size of header */
color: #FF3399;							/* Standard colour of all headers */
padding: 5px; 							/* padding dimensions */
margin: 15px;							/* margin */
}

#test2 h2 {
font-size: 20px;						/* Font size of H2 */
color: #464646;							/* Standard header colour */
padding: 5px; 							/* Make space for h2 */
margin: 5px 120px 10px 0;					/* had to place margin in to stop header from moving to far to the left */
background: url('images/dotted.gif') bottom repeat-x;  		/* dotted underline for all headers throughout website */
}

#main {								
margin-top: 10px;						/* Main screen div with secondary div below, specifically used for the front page */
position: relative;						/* Relative positioning for main */
width: 480px;							/* width smaller so secondary content can fit in correctly */
float: left;							/* float left of the screen to fit with secondary */
font-size: 14px;
}

#main h1 {
font-size: 20px;						/* Font size of H1 */
color: #FF3399;							/* Standard header colour */
background: url('images/dotted.gif') bottom repeat-x;		/* dotted underline for all headers throughout website */
padding: 0px 0px 10px 15px;					/* padding to have space around it */
margin-bottom: 8px;						/* make space down the bottom for make the header stand out a little better */
}

#main .post {
line-height: 1.8em;						/* line height spaces paragraph to read better for the user */
margin-left:10px;						/* move over to the left so it doesn't hit border */
margin-bottom: 30px;						/* creates space down the bottom for room so its not all bunched up */
font-size: 14px;						/* standard font size */
color: #808080;							/* standard colour */
}

#main .post h1{
color: #FF3399;							/* Font color for h1 */
}


#main .post h3{
color: #FF3399;							/* Secondary h3 for extra header */
}


#sidecontent {
position: relative;						/* Side content spaced relative for right hand side of screen */
width: 180px;							/* total width is only small as the content is only for links */
float: right;							/* float right as main content is floating left */
}

#sidecontent h3 {
position: relative;
top: 4px;
font-size: 16px;
line-height: 25px;
color: #FF3399;
background: url('images/dotted.gif') bottom repeat-x;		/* dotted underline for all headers throughout website */
padding: 0px 0px 10px 10px;
margin-bottom: 10px;
}

#sidecontent .content {
padding: 0px 10px 0px 10px;
margin-bottom: 20px;
}

.linklist {
margin-bottom: 70px;
margin-left: 20px;
}


#footer
{
position: relative;				
clear: both;							/* Clear both allows nothing to go over it */
height: 36px;							/* height of the footer */
text-align: right;						/* make text move directly to the right of screen */
background: #464646;						/* gradient brick image with the green sits in here, very effective footer picture */
background: url('images/bottomNav.jpg') bottom repeat-x;								/* footer color font */
padding: 20px 10px 10px 15px;					/* padding space dimensions */				
border: 1px solid gray;						/* one solid gray border around footer like the banner */
}

#footer ul li {
padding: 0px 2px 2px 2px;					/* padding space dimensions */	
display: inline;						/* align links horizontally */
padding-left: 33px;						/* Space between footer links */
}

#footer ul li a {
font-size: 12px;						/* font size for li a */
color: #fff;							/* colour of font */
font-weight: bold;						/* make font bold, makes it stand out better */
}

#footer ul li a:hover {
background: #464646;						/* backgorund hover colour */
color: #fff;							/* font color */
text-decoration: none;				
}


#footer a
{
color: #8C8C73;							/* font colour */
}

 				/* HoverBox for Colour Palette */


			/* This code has been taken from a site that has advised its free to use, I have adaquetly referenced the site and changed the code to my best ability */

.hoverbox
{
	cursor: default;
	list-style: none;
}

.hoverbox a
{
	cursor: default;
}

.hoverbox a .preview
{
	display: none;
}

.hoverbox a:hover .preview
{	
	
	display: block;			/* creates image to rollover so it makes it bigger */
	position: absolute;		/* Absolute position is based on where you would like the image to appear */
	top: -33px;			/* top and left places the image where you like in pixels */
	left: -45px;
	z-index: 1;			/* z-index is specifically for the absolute position when stacking, its specifically used for over lapping */
}

.hoverbox img
{	
	background: #fff;		
	border-color: #fff;		/* Make border white instead on blue link. */
	border-style: solid;
	border-width: 1px;
	background: #fff;
	padding: 2px;
	vertical-align: top;
	width: 187px;			/* Width of total image on the screen before preview */
	height: 110px;
}

.hoverbox li
{
	background: #fff;
	border-style: solid;
	border-width: 1px;
	display: inline;
	float: left;
	margin: 3px;
	padding: 5px;
	position: relative;
}

.hoverbox .preview
{
	border-color: #acacac;
	width: 300px;
	height: 200px;
}


							
								/* HoverbOx for stencil Palette */

.hoverboxStencil
{
	cursor: default;
	list-style: none;

}

.hoverboxStencil a
{
	cursor: default;
	
}

.hoverboxStencil a .preview
{
	display: none;	
	
}

.hoverboxStencil a:hover .preview
{	
	
	display: block;			/* creates image to rollover so it makes it bigger */
	position: absolute;
	top: -33px;			
	left: -45px;
	z-index: 1;
}

.hoverboxStencil img
{	
	background: #fff;
	border-color: #fff;		/* Make border white instead on blue link. */
	border-style: solid;
	border-width: 1px;
	background: #fff;
	padding: 2px;
	vertical-align: top;
	width: 167px;			/* Width of total image on the screen before preview */
	height: 110px;
	
}

.hoverboxStencil li
{
	background: #fff;
	border-style: solid;
	border-width: 1px;
	display: inline;
	float: left;
	margin: 3px;
	padding: 5px;
	position: relative;

}

.hoverboxStencil .preview
{
	border-color: #acacac;
	width: 250px;
	height: 200px;

}




						/* Form created from the help of the Elizabeth Castro Book */


fieldset {
border: 1px solid gray;
margin-bottom: 40px;
width:650px;
padding: 15px 5px 5px 5px;
color: #000;					/* Font colour Black */
}






p.legend {
background:#ffff00;
color:black;
padding:.2em .3em;
font-size:14px;
border:1px solid gray; 
position:relative;
top: 40px;
right: 180px;
width:170px;
margin: 0 auto;
margin-bottom: 30px;
}


#personal {
background:#fff;
margin: 0 auto;
}



#enquiring {
background:#fff;
margin: 0 auto;
margin-bottom: 20px;
}


#additonalComments {
background:#fff;
margin: 0 auto;
margin-bottom: 20px;
}


#personal input {
margin-left:160px;								/* With label on absolute I could straighten the field inputs then push them to the right to be aligned */
padding: 5px;									/* Creates padding between between e.g name, address, email etc. */
}


#personal label {
margin-left: 20px;
position: absolute;
}



#enquiring input {
margin-left:25px;								/* Create space in front of the enquiring fron section */
}


#enquiring input +input {
margin-top:10px;
margin-left:10px;								/* Create space between enquiring links so they sit correctly on the same line */					
}

textarea {
font:12px "Trebuchet MS", Verdana, sans-serif;
width:585px;
padding: 15px;
margin: 15px;
}



input[type="submit"] {background:#ffff00;font:1.6em "trebuchet ms", helvetica, sans-serif;}



#buttons {
text-align:center;
margin-bottom:20px;
}