/***************
	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: 63px;
 background: url("http://www.aidmyplantar.com/_img/plantar-fasciitis-panel.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: 63px; 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.aidmyplantar.com/_img/plantar-fasciitis-panel.gif") 0 -63px no-repeat;}
#panel2b a:hover {background: transparent url("http://www.aidmyplantar.com/_img/plantar-fasciitis-panel.gif")  -54px -63px no-repeat;}
#panel3b a:hover {background: transparent url("http://www.aidmyplantar.com/_img/plantar-fasciitis-panel.gif") -108px -63px no-repeat;}
#panel4b a:hover {background: transparent url("http://www.aidmyplantar.com/_img/plantar-fasciitis-panel.gif") -162px -63px 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.aidmyplantar.com/_img/plantar-fasciitis-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.aidmyplantar.com/_img/plantar-fasciitis-therapy.gif") -182px -0px no-repeat;}
#panel2a a:hover {height: 34px; background: transparent url("http://www.aidmyplantar.com/_img/plantar-fasciitis-therapy.gif") -182px -34px no-repeat;}
#panel3a a:hover {height: 34px; background: transparent url("http://www.aidmyplantar.com/_img/plantar-fasciitis-therapy.gif") -182px -68px  no-repeat;}
#panel4a a:hover {height: 34px; background: transparent url("http://www.aidmyplantar.com/_img/plantar-fasciitis-therapy.gif") -182px -102px  no-repeat;}
#panel5a a:hover {height: 34px; background: transparent url("http://www.aidmyplantar.com/_img/plantar-fasciitis-therapy.gif") -182px -136px  no-repeat;}
#panel6a a:hover {height: 34px; background: transparent url("http://www.aidmyplantar.com/_img/plantar-fasciitis-therapy.gif") -182px -170px  no-repeat;}
#panel7a a:hover {height: 34px; background: transparent url("http://www.aidmyplantar.com/_img/plantar-fasciitis-therapy.gif") -182px -204px  no-repeat;}
#panel8a a:hover {height: 34px; background: transparent url("http://www.aidmyplantar.com/_img/plantar-fasciitis-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, Sans-Serif;
	color:#000000;
	/*background: url("http://www.aidmyplantar.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.aidmyplantar.com/_img/plantar-fasciitis-heel-spur-background.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.aidmyplantar.com/_img/plantar-fasciitis-heel-spur-pain.gif");
  background-position:9px 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;
}

.mainBox li{margin:.3em 10% .3em 0}    /* used for driving specific formatting for lists and such on the main content page */

h1 {font:20pt Georgia, Helvetica,impact,arial,verdana; font-variant:small-caps;	font-weight: bold; color:#3A3A3A;text-decoration:underline;
		padding:0px 0px 0px 0px;margin-left:auto; margin-right:auto; width:625px;margin-top:5px;margin-bottom:15px;}
h2 {font:18pt Georgia, Helvetica,impact,arial,verdana;color:#526F1C;padding:10px 0px 0px 0px;	margin:0px;font-weight: bold;}
h3 {font:15pt Georgia, Helvetica,impact,arial,verdana;color:#526F1C;padding:10px 0px 0px 0px; margin:0px;font-weight: bold;}
h4 {font-size:13pt Georgia, Helvetica,impact,arial,verdana; color:#2C2C2C; padding:8px 0px 0px 0px; margin:0px;}
h5{
		font-size: 25px;
		color: #4c4c4c;
		font-family: Georgia,"Nimbus Roman No9 L",serif;
		font-style: italic;
		letter-spacing: -1px;
		margin: 30px 10px 20px 0;
		font-weight: normal;
		line-height:1.35;
}

/*
h6 {color:#0000A0;font-size:14px;font-weight:bold;font-style:italic;padding:10px 10px;margin:0px;}
*/

#bg_content {
	position:relative;
	z-index:1;
	padding-bottom:112px;
	/*left:50%;*/
    width:1039px;
	background: url("http://www.aidmyplantar.com/_img/plantar-fasciitis-pain-foot.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.aidmyplantar.com/_img/plantar-fasciitis-heel-spur-footer-background.gif");
    background-position:top center;
    background-repeat: no-repeat;
}
#bg_footer {
	position:relative;
	margin-top:-112px;
	height:112px;
	background:url("http://www.aidmyplantar.com/_img/plantar-fasciitis-heel-spur-footer-overlay.gif");
	background-position:0px 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:650px;
	max-width:650px;
	z-index:10;
	margin:0px;
	padding:0px 15px 5px 13px;   /*  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);
	}
/* establish default paragraph, bold settings for main Content area... */
td.contentMain p {.1em 0 .1em 0; line-height: 1.3;}
td.contentMain b {	font-weight:bold;color:#2C2C2C; }

td.contentRight {
	width:185px;
	max-width:185px;
	z-index:10;
	margin: 0px;
	padding:0px 2px 5px 0px;			/*  TROUBLE  Top, Right, Bottom, Left  */
	text-align: center;
	overflow-x:hidden;
	width: expression(this.width > 185 ? 185: true);
	}
img {border:0;}

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