/*************** 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..... 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 fline is links on footer - faster load than d/l dozens of 1 px images */ #skyline { width: 217px;height: 63px;background: url("http://www.MendMyKnee.com/_img/runners-knee-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.MendMyKnee.com/_img/runners-knee-panel.gif") 0 -63px no-repeat;} #panel2b a:hover {background: transparent url("http://www.MendMyKnee.com/_img/runners-knee-panel.gif") -54px -63px no-repeat;} #panel3b a:hover {background: transparent url("http://www.MendMyKnee.com/_img/runners-knee-panel.gif") -108px -63px no-repeat;} #panel4b a:hover {background: transparent url("http://www.MendMyKnee.com/_img/runners-knee-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.MendMyKnee.com/_img/knee-joint-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 {background: transparent url("http://www.MendMyKnee.com/_img/knee-joint-therapy.gif") -182px -0px no-repeat;} #panel2a a:hover {background: transparent url("http://www.MendMyKnee.com/_img/knee-joint-therapy.gif") -182px -34px no-repeat;} #panel3a a:hover {background: transparent url("http://www.MendMyKnee.com/_img/knee-joint-therapy.gif") -182px -68px no-repeat;} #panel4a a:hover {background: transparent url("http://www.MendMyKnee.com/_img/knee-joint-therapy.gif") -182px -102px no-repeat;} #panel5a a:hover {background: transparent url("http://www.MendMyKnee.com/_img/knee-joint-therapy.gif") -182px -136px no-repeat;} #panel6a a:hover {background: transparent url("http://www.MendMyKnee.com/_img/knee-joint-therapy.gif") -182px -170px no-repeat;} #panel7a a:hover {background: transparent url("http://www.MendMyKnee.com/_img/knee-joint-therapy.gif") -182px -204px no-repeat;} #panel8a a:hover {background: transparent url("http://www.MendMyKnee.com/_img/knee-joint-therapy.gif") -182px -238px no-repeat;} /*footer panel*/ #ftline { width: 333px;height: 37px;background: url("http://static.MendMyKnee.com/_img/mendmeshop-green-iconset.gif"); margin:0px auto; padding: 0; position: relative; z-index:15;background-position:0 -1px;} #ftline li {margin: 0; padding: 0px; list-style: none; position: absolute; top: 0;border: 0px solid black;} #ftline li, #ftline a {height: 37px; display: block;} #ft1 {left: 0; width: 30px;} #ft2 {left: 31px; width: 30px;} #ft3 {left: 61px; width: 30px;} #ft4 {left: 91px; width: 30px;} #ft5 {left: 121px; width: 30px;} #ft6 {left: 151px; width: 30px;} #ft7 {left: 181px; width: 30px;} #ft8 {left: 211px; width: 30px;} #ft9 {left: 241px; width: 30px;} #ft10 {left: 271px; width: 30px;} #ft11 {left: 301px; width: 30px;} #ft1 a:hover {background: transparent url("http://static.MendMyKnee.com/_img/mendmeshop-green-iconset.gif") 0 -39px no-repeat;} #ft2 a:hover {background: transparent url("http://static.MendMyKnee.com/_img/mendmeshop-green-iconset.gif") -31px -39px no-repeat;} #ft3 a:hover {background: transparent url("http://static.MendMyKnee.com/_img/mendmeshop-green-iconset.gif") -61px -39px no-repeat;} #ft4 a:hover {background: transparent url("http://static.MendMyKnee.com/_img/mendmeshop-green-iconset.gif") -91px -39px no-repeat;} #ft5 a:hover {background: transparent url("http://static.MendMyKnee.com/_img/mendmeshop-green-iconset.gif") -121px -39px no-repeat;} #ft6 a:hover {background: transparent url("http://static.MendMyKnee.com/_img/mendmeshop-green-iconset.gif") -151px -39px no-repeat;} #ft7 a:hover {background: transparent url("http://static.MendMyKnee.com/_img/mendmeshop-green-iconset.gif") -181px -39px no-repeat;} #ft8 a:hover {background: transparent url("http://static.MendMyKnee.com/_img/mendmeshop-green-iconset.gif") -211px -39px no-repeat;} #ft9 a:hover {background: transparent url("http://static.MendMyKnee.com/_img/mendmeshop-green-iconset.gif") -241px -39px no-repeat;} #ft10 a:hover {background: transparent url("http://static.MendMyKnee.com/_img/mendmeshop-green-iconset.gif") -271px -39px no-repeat;} #ft11 a:hover {background: transparent url("http://static.MendMyKnee.com/_img/mendmeshop-green-iconset.gif") -301px -39px 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 */ 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.mendmyknee.com/_img/chondromalacia-and-knee-joint-pain-bg.gif"); background-position:top center; background-repeat: no-repeat; } .main { position:relative; z-index:5; /*left:50%; margin-left:-512px;*/ width:1035px; background:none; border:0px solid black; min-height:128px; height:auto !important; height:128px; margin: auto; background: url("http://www.mendmyknee.com/_img/chondromalacia-and-knee-joint-pain2.gif"); background-position:-1px 0px; /*fudge it into place. just make sure this image overlaps background by a pixel or so on either side and is at least as wide as the defined width*/ 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 */ /* Cambria, Georgia, "Times New Roman", Times, serif; */ h1 {font:22pt Cambria, Georgia, Helvetica,impact,arial,verdana; font-variant:small-caps; font-weight: bold; color:#3A3A3A;text-decoration:none; 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.mendmyknee.com/_img/knee-pain-in-joint-vert.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.mendmyknee.com/_img/knee-joint-postsurgery-healing.gif"); background-position:top center; background-repeat: no-repeat; height:171px; margin-top:-121px; } #bg_footer { position:relative; /*margin-top:-112px;*/ height:169px; background: url("http://www.mendmyknee.com/_img/knee-joint-postsurgery-healing-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: 12px; 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.5;} 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;}