/***************
	This file is for major CSS tweaks specific to layout and menu formatting / operation.  
	Any CSS specific to content and such should be in the "b" file.....

	Start of mousover link CSS ....  
	skyline is for image links (forum, cart, etc) at top right of header ....
	leftline is for main image links on  left menu          DC 1/31/2010   */

#skyline {
 width: 217px;
 height: 50px;
 background: url("http://www.mendmeshop.com/_img/mendmeshop-medical-products.gif");
 margin: 0px auto; padding: 0px;
 position: relative;
 z-index:15;
}
#skyline li {margin: 0; padding: 0; list-style: none; position: absolute; top: 0;border: 0px solid black;}

#skyline li, #skyline a {height: 50px; display: block;}
#panel1b {left: 0; width: 53px;}
#panel2b {left: 54px; width: 53px;}
#panel3b {left: 108px; width: 53px;}
#panel4b {left: 162px; width: 53px;}

#panel1b a:hover {background: transparent url("http://www.mendmeshop.com/_img/mendmeshop-medical-products.gif") 0 -50px no-repeat;}
#panel2b a:hover {background: transparent url("http://www.mendmeshop.com/_img/mendmeshop-medical-products.gif")  -54px -50px no-repeat;}
#panel3b a:hover {background: transparent url("http://www.mendmeshop.com/_img/mendmeshop-medical-products.gif") -108px -50px no-repeat;}
#panel4b a:hover {background: transparent url("http://www.mendmeshop.com/_img/mendmeshop-medical-products.gif") -162px -50px no-repeat;}

#leftline {
 width: 182px;
 height: 280px;
 margin: 0px auto; padding: 0px;
 position: relative;
 z-index:15;
}

#leftline li {z-index:15; margin-top: 1px; margin-bottom: 1px; float: left; width: 100%; border: 0px solid black; display: block;}          
#leftline a {display: block; z-index:15; background: transparent url("http://www.mendmeshop.com/_img/mendmeshop-home-therapy.gif") 0px 0 no-repeat; }   

#panel1a a{height: 34px; background-position: 0 0px;}
#panel2a a{height: 34px; background-position: 0 -34px;}
#panel3a a{height: 34px; background-position: 0 -68px;}
#panel4a a{height: 34px; background-position: 0 -102px;}
#panel5a a{height: 34px; background-position: 0 -136px;}
#panel6a a{height: 34px; background-position: 0 -170px;}
#panel7a a{height: 34px; background-position: 0 -204px;}
#panel8a a{height: 34px; background-position: 0 -238px;}

#panel1a a:hover {height: 34px; background: transparent url("http://www.mendmeshop.com/_img/mendmeshop-home-therapy.gif") -182px -0px no-repeat;}  
#panel2a a:hover {height: 34px; background: transparent url("http://www.mendmeshop.com/_img/mendmeshop-home-therapy.gif") -182px -34px no-repeat;}
#panel3a a:hover {height: 34px; background: transparent url("http://www.mendmeshop.com/_img/mendmeshop-home-therapy.gif") -182px -68px  no-repeat;}
#panel4a a:hover {height: 34px; background: transparent url("http://www.mendmeshop.com/_img/mendmeshop-home-therapy.gif") -182px -102px  no-repeat;}
#panel5a a:hover {height: 34px; background: transparent url("http://www.mendmeshop.com/_img/mendmeshop-home-therapy.gif") -182px -136px  no-repeat;}
#panel6a a:hover {height: 34px; background: transparent url("http://www.mendmeshop.com/_img/mendmeshop-home-therapy.gif") -182px -170px  no-repeat;}
#panel7a a:hover {height: 34px; background: transparent url("http://www.mendmeshop.com/_img/mendmeshop-home-therapy.gif") -182px -204px  no-repeat;}
#panel8a a:hover {height: 34px; background: transparent url("http://www.mendmeshop.com/_img/mendmeshop-home-therapy.gif") -182px -238px  no-repeat;}


/*    min z-index val cannot be negative (firefox bug)
    *margin-left:-519px (any css preceded by * only recognized by IE) - used for 1px centering bug   */

/*		End of mousover link CSS ....  
****************/

html, body {
	margin:0;
	padding:0;
	height:100%;
	font-size:12pt;font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
	color:#333333;
	/*background: url("http://www.mendmeshop.com/_img/mendmeshop-pain-relief-products-top.gif");
	background-position:top center;
	background-repeat: no-repeat*/
	}
body {margin-left:.1px }
.bg_wrap {
    background: url("http://www.mendmeshop.com/_img/mendmeshop-pain-relief-products-top-b.gif"); 
    background-position:top center; 
    background-repeat: no-repeat;
}
.main {
	position:relative;
	z-index:5;
	/*left:50%;
	margin-left:-512px;*/
	width:1039px;
	background:none;
	border:0px solid black;
	min-height:110px;
	height:auto !important;
	height:110px;
    margin: auto;
    background: url("http://www.mendmeshop.com/_img/mendmeshop-pain-relief-products-top-h.gif"); 
    background-position:5px 0px; /*fudge it into place.  just make sure this image overlaps background by a pixel or so on either side and is at least 1039px in this case*/
    background-repeat: no-repeat;
	}
	/*  need to set width for sub_header_box to correct float bug in IE7	*/
.sub_header_box {
	width: 220px;
}
h1 {font:26pt Haettenschweiler, 'brush script mt',impact,arial,verdana;	color:#333; font-variant:small-caps;	letter-spacing:3px;	text-align:center;padding:0px 0px 0px 10px; margin:0px;	width:600px;}
h2 {
	font-size:22px;
	color:#000000;
	font-family:'Trebuchet MS', Helvetica, sans-serif;
	font-variant:small-caps;
	font-weight: 200;
	padding:10px 0px 0px 0px;
	margin:0px;
}
h3 {
	font-family:'Trebuchet MS', Helvetica, sans-serif;
	font-weight: 200;
	font-variant:small-caps;
	font-size:20px;
	color:#000000;
	padding:10px 0px 5px 0px;
	margin:0px;
	}
h4 {font-family:'Trebuchet MS', Helvetica, sans-serif; font-size:18px; font-weight:normal; font-style:italic; color:#555555; padding:0px;margin:0px;}
h5 {font-size:16px;font-weight: strong;font-style: italic;padding:10px 10px; margin:0px;}
h6 {color:#0000A0;font-size:14px;font-weight:bold;font-style:italic;padding:10px 10px;margin:0px;}
.center {text-align:center;}
#bg_content {
	position:relative;
	z-index:1;
	padding-bottom:112px;
	/*left:50%;*/
    width:1039px;
	background: url("http://www.mendmeshop.com/_img/mendmeshop-medical-products-top2.gif");
	background-repeat:repeat-y;
	border:0px solid black; 
	min-height:50%;
	height:auto !important;
	height:500px;
	/*margin-left:-518px;
	*margin-left:-519px;*/
    margin: auto;
	}
.content { 
	position:relative;
	padding-bottom:0px;
	left:50%;
	margin-left:-512px;
	width:1020px;
	border:0px solid black; 
	min-height:50%;
	height:auto !important;
	height:500px;
	z-index:0
	}
.footer_bg_wrap {
    background: url("http://www.mendmeshop.com/_img/mendmeshop-customer-service-footer-b.gif"); 
    background-position:top center; 
    background-repeat: no-repeat;
}
#bg_footer {
	position:relative;
	margin-top:-112px;
	height:112px;
	background:url("http://www.mendmeshop.com/_img/mendmeshop-customer-service-footer-f.gif");
	background-position:-2px 0; /*fudge it into place.  just make sure this image overlaps background by a pixel or so on either side and is at least 1039px in this case*/
	background-repeat:no-repeat;
	z-index:3;
    width:1039px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
	}
.footer {
	position:relative;
	/*left:50%;
	margin-left:-512px;*/
	width:1039px;
	padding-top:30px;
	border:0px solid black;
	}
	#footer {
	font-size: 10px;
	text-align: center;
	padding:5px 10px 5px;
	margin:0px }

/*  need to force main content table from stretching. width line is javascript as max-width is not supported in IE  */
.content_table {
	max-width:200px;
  z-index:10;
  margin:0px;
  padding:0px;
  background:none;
 	width:expression (this.width > 200 ? 200: true);
}

table {margin:0;border:0;padding:0;}
table.content {z-index:10; background:none}
td.contentLeft {
	width:185px;
	max-width:185px;
	z-index:10;
	margin:0px;
	padding-left:3px;
	overflow-x:hidden;
	width: expression(this.width > 185 ? 185: true);
	}
td.contentMain {
	width:655px;
	max-width:655px;
	z-index:10;
	margin:0px;
	padding:0px 18px 5px 12px;   /*  TROUBLE   (Top,Right,Bottom,Left) 
	(this above line sets the padding for the MAIN CONTENT, and is massively important)
	*/
	overflow:auto;
	text-align: justify;
	width: expression(this.width > 655 ? 655: true);
	}
td.contentRight {
	width:185px;
	max-width:185px;
	z-index:10;
	margin:0px;
	padding:0px 5px 5px 0px;			/*  TROUBLE  Top, Right, Bottom, Left  */
	text-align: center;
	overflow-x:hidden;
	width: expression(this.width > 185 ? 185: true);
	}
img {border:0;}
.imgRight {
	float: right;
	margin-left: 10px;
}
.imgLeft {
	float: left;
	margin-right: 10px;
}

<!--[if lt IE 7]>
<style type="text/css">
.main { height: 100% }
.content { height: 100% }
</style>
<![endif]-->