/***********************************************************/
/*  CSS for Hannay Associates Ltd                        */
/*  Created by JK Design Services December 2008 */
/*  Ref: www.jkdesignservices.co.uk                   */
/*                                                                      */
/**********************************************************/

/* comment lines are declared like this */

/* body is the default - if nothing is declared for the rest then the body definition is the one used */
BODY
{
    MARGIN: 0px;				/* if only a single value is specified then it applies to all margins */
    BACKGROUND-IMAGE: none;     /* can also be a url - url (../images/backgroundimage.jpg) */
    BACKGROUND-REPEAT: repeat;	/* other values no-repeat, repeat-x (horizontal), repeat-y (vertical)*/
	BACKGROUND-ATTACHMENT: fixed;  /* other value scroll */
	BACKGROUND-POSITION: 0% 0%;	/* values can be a percentage or a fixed length or one of top centre bottom/left centre right */
    BACKGROUND-COLOR: white;	/* background colour should be specified even with an image incase the image doesn't load other value is transparent */
}
/* definition of a Heading Level 1 tag */
H1
{
	font-size: x-large !important;
	font-size: x-large;
	color: #e63b29; 
}
H2
{
	font-size: medium !important;
	font-size: medium; 
	color: #e53b28;
	line-height: 170%;
}
/* definition of a paragraph */
P
{
	FONT-FAMILY: Arial, "Trebuchet MS", Tahoma, sans-serif; /* arial, trebuchet then tahoma is the font family and sans-serif is a generic family */

}

/* definition for all cells unless over-ridden */
TD
{
	FONT-FAMILY: Arial, "Trebuchet MS", Tahoma, sans-serif; /* tahoma is the font family and sans-serif is a generic family */
	FONT-SIZE: medium !important;	 /* Using the notation to signify for Firefox to ingnore subsequent declarations */
	font-size: medium;				 /* IE will always use the last declaration it finds - hence cascading */
	background-color: white;
	COLOR: black;					 /* or colour name, red, blue, black, white, etc */
	TEXT-DECORATION: none;			 /* other values are underline, overline, line-through, blink */
	VERTICAL-ALIGN: top;	/* other possible values are baseline, sub, super, text-top, middle, bottom, text-bottom or a percentage */ 
	TEXT-TRANSFORM: none;			 /* other values are capitalize, uppercase, lowercase */
	TEXT-ALIGN: left;				 /* other values are right, center, justify */
	TEXT-INDENT: 0;					 /* values are <length> or <percentage> indent before text begins*/
	LINE-HEIGHT: 160%;			 /* other values number (e.g. 1.2), length (1.2em), percentage (120%) */
}

/* definition of image format  */
IMG
{
	BORDER:0;
	display: inline;
}

.product IMG
{
	display: block;
}	
/* list item decalration - bullet points*/
LI
{ 
	DISPLAY: list-item;			/* other values are block, inline, none */
	WHITE-SPACE: normal;		/* other values are  pre, nowrap */
	LIST-STYLE-TYPE: disc;		/* other values are circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, none */
	LIST-STYLE-IMAGE: none;	/* other values are the image url */
	LIST-STYLE-POSITION: outside; /* other value is inside */
	
}

.menu
{
background-color: red;
background-image: url(../copper-braid-images/alco-menu-bar.jpg);
background-repeat: no-repeat;
background-position: top left;
height: 35px !important;
height: 25px;
line-height: 200%;
line-height: 150%;
}

.wrapper
{
border-width: 1px;
border-color: #333333;
border-style: solid;
}

/*  page image to get curve effect to text - one for each page since all images are different */

/* home page */
#home1, #home2, #home3, #home4 {
    display: block;
    clear: right;
    float: right;
    overflow: hidden;
    margin: 0px;
    padding: 0px;
	position: relative;
  }

#home1 {background-position: 0 360px;  width: 634px;     background: url(../copper-braid-images/copper-braid-1.jpg) no-repeat; height: 269px;}
#home2 {background-position: 0 441px;  width: 553px;    background: url(../copper-braid-images/copper-braid-2.jpg) no-repeat; height: 115px;}
#home3 {background-position: 0 544px;  width: 450px;    background: url(../copper-braid-images/copper-braid-3.jpg) no-repeat; height: 100px;}
#home4 {background-position: 0 694px;  width: 300px;    background: url(../copper-braid-images/copper-braid-4.jpg) no-repeat; height: 68px;}


/* home page end */


/* link style definitions for all links unless otherwise specified */
A {
  text-decoration: none;
  font-size: medium;
  font-weight:bold;
  line-height: 240%;
}
A:link
{
    color: white;
}
A:visited
{
	color: white;
	}
A:hover, A:focus
{
    color: black;
}
A:active
{
	color: white;
}

/* in page links */
#page A {
  text-decoration: none;
  font-size: medium;
  font-weight:bold;
  line-height: 240%;
}
#page A:link
{
    color: #e53b28;
}
#page A:visited
{
	color: #e53b28;
	}
#page A:hover, A:focus
{
    color: #666666;
}
#page A:active
{
	color: #e53b28;
}
/*  footer links over-ride*/
#spider A {
  text-decoration: none;
  font-size: xx-small;
  font-weight:bold;
}
#spider A:active
{
	color: black;
}
#spider A:link
{
    color: black;
}
#spider A:visited
{
	color: black;
	}
#spider A:hover, #spider A:focus
{
    color: red;
	background-color: white;
}
#spider A:active
{
	color: black;
}
/*  footer text - small size */
.footer
{
	font-size: xx-small !important;
	font-size: xx-small;
	font-weight: bold;
	text-align: center;
}

/* add padding to the left of an object  - used to space text from left hand edge of page etc */
.paddingleft
{
	padding-left: 60px;
}

.paddingtable
{
	padding-left: 20px;
	line-height: 120%;
}
.paddingboth
{
	padding-left: 60px;
	padding-right: 60px;
	line-height: 100%;
}

.table
{
	line-height: 120%;
	text-align: center;
}

.tableleft
{
	line-height: 120%;
	text-align: left;
}

.tableright
{
	line-height: 120%;
	text-align: right;
}

.box-heading
{
	font-size: small !important;
	font-size: small;
	font-weight: bold;
	color:#FFFFFF;
	background-color: #e53b28;
	line-height: 100%;
	text-align:center;
}	
#imageoverlap
{
	position: relative;
	top: -30px !important;
	right: 200px !important;
	top: -30px;
	right: 200px;
	z-index: 999;
	height: 1%;
}
#imageoverlap-copper
{
	position: relative;
	top: -50px !important;
	right: 300px !important;
	top: -10px;
	right: 200px;
	height: 1%;
	z-index: 999;
}

/* classes to do the hoverover/popup for the images */
.hoverbox
{
	cursor: default;
	list-style: none;
}

.hoverbox a
{
	cursor: default;
	position: relative;
}

.hoverbox a:hover
{
	display: block;
	font-size: 100%;
	z-index: 1;
}

.hoverbox a .preview
{
	display: none;
}

.hoverbox a:hover .preview
{
	display: block;
	position: absolute;
	top: -63px;
	left: -85px;
	z-index: 1;
}

.hoverbox img
{
	color: inherit;
	vertical-align: top;
	width: 114px;
	height: 80px;
}

.hoverbox li
{
	color: inherit;
	display: inline;
	float: left;
	margin: 5px;
	position: relative;
}

.hoverbox .preview
{
	border-color: #000;
	width: auto;
	height: auto;
}
<!--[if lte IE 7]>
<style type="text/css">
.hoverbox a
{
position: relative;
}

.hoverbox a:hover
{
display: block;
font-size: 100%;
z-index: 1;
}

.hoverbox a:hover .preview
{
top: -38px;
left: -50px;
}

.hoverbox li
{
position: static;
}
</style>
<![endif]-->