Hello all,
So, it’s time for me to re-make the home page design for my website, and I have a very sloppy start [URL=“http://www.worldreviewgroup.com/test/index.html”]at this link. The first (original) link displays how I’d like this to come out at full viewport width. I would like for the side windows that have the “Most Popular” and “Not Recommended” links to be re-positioned below the body content when the viewport is skinny (say less than 500px). I would like for the drop down menu content to stop dropping down at a similar viewport width, leaving just the section button for the user to click through to.
Rough HTML Draft
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>World Review Group– Product Articles</title>
<meta name="Description" content="Curious about a product before you buy it? Come here for reviews on today's hot products! Some of our categories include home business, dating, consumer electronics, and many others." />
<meta name="Keywords" content="product review site, review article database, World review group, product reviews online, product articles, online product and service reviews" />
<meta http-equiv="Content-Language" content="en" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link href="style/homepage.css" rel="stylesheet" type="text/css" media="screen,projection,tv" />
<link href="style/dropdownmenus.css" rel="stylesheet" type="text/css" media="screen" />
<meta name="viewport" content="width=device-width; initial-scale=1.0" />
</head>
<body>
<!-- begin container div -->
<div id="container">
<!-- side window left -->
<div id="sidewindowleft">
<div id="leftsidestart"></div>
<div id="leftsidebody">
<h2 class="sidewindowheadertext">Most Popular</h2>
<ul class="sidewindowlinks">
<li><a href="#">Peapod</a></li>
<li><a href="#">South Beach Diet</a></li>
<li><a href="#">Brandcaster Coupons</a></li>
</ul>
</div><!-- end left window body -->
<div id="leftsideend"></div>
</div><!-- end side window left -->
<!-- begin top row -->
<div class="row">
<div id="topleft"></div>
<div id="topcenter">
<!-- logo image with underlying text -->
<h1>World Review Group<span></span></h1>
<div id="lowerlogo"></div>
</div>
<div id="topright"></div>
</div>
<!-- begin middle row -->
<div class="row">
<div id="midleft">
<!-- begin midcenter div -->
<div id="midcenter">
<div id="wrapper"><!-- begin menu wrapper -->
<!-- BEGIN PERSONAL NAVIGATION MENU -->
<ul id="pMenu">
<!-- begin health -->
<li><a href="health.html" title="Health Page">health</a>
<div id="health">
<!-- weight loss -->
<h2>weight loss & wellness</h2>
<!-- fitness -->
<h3><span>fitness</span></h3>
<ul>
<li><a href="health/fitness/weiderpowerbell1.html">Weider PowerBell</a></li>
<li><a href="health/fitness/brazilbuttlift1.html">Brazil Butt Lift</a></li>
<li><a href="health/fitness/georgesstpierre1.html">MMA Training with Georges St. Pierre</a></li>
<li><a href="health/fitness/turbofire1.html">TurboFire Fitness</a></li>
</ul>
<!-- dieting -->
<h3><span>dieting</span></h3>
<ul>
<li><a href="health/dieting/healthetrimdiet1.html">Healthé Trim Diet</a></li>
<li><a href="health/dieting/southbeach1.html">South Beach Diet</a></li>
</ul>
<!-- supplements -->
<h2>supplements</h2>
<ul>
<li><a href="health/Rx/nutrilitevitamins1.html">Nutrilite Multivitamins</a></li>
<li><a href="health/Rx/dochangover1.html">Doc Hangover Cure</a></li>
<li><a href="health/Rx/libigrow1.html">Libigrow</a></li>
<li><a href="health/Rx/smokedeter1.html">Smoke Deter</a></li>
<li><a href="health/Rx/prorexin1.html">Prorexin</a></li>
</ul>
<!-- skin care -->
<h2>skin care</h2>
<ul>
<li><a href="health/skincare/shivaacne1.html">Shiva23 Acne Cream</a></li>
<li><a href="health/skincare/deadseamineral1.html">Dead Sea Mineral Cellulite Treatment</a></li>
</ul>
</div>
</li><!-- end health -->
<!-- begin insurance -->
<li><a href="insurance.html" title="Insurance Page">insurance</a>
<div id="insurance">
<!-- property insurance -->
<h2><a href="insurance/propertyinsurance1.html">home⁄property insurance</a></h2>
<ul>
<li><a href="insurance/bestquoteshomereview1">BestQuotes</a></li>
<li><a href="insurance/usinsuranceonlinehomereview1.html">USInsuranceOnline</a></li>
</ul>
<!-- auto insurance -->
<h2><a href="insurance/autoinsurance1.html">auto insurance</a></h2>
<ul>
<li><a href="insurance/bestquotesautoreview1.html">BestQuotes</a></li>
<li><a href="insurance/atlascarinsurancereview1.html">Atlas Car Insurance</a></li>
<li><a href="insurance/cheapcarinsurancetrick1.html">Cheap Car Insurance Trick</a></li>
<li><a href="insurance/usinsuranceonlineautoreview1.html">U.S. Insurance Online</a></li>
</ul>
<!-- health insurance -->
<h2><a href="insurance/healthinsurance1.html">health insurance</a></h2>
<ul>
<li><a href="insurance/betterhealthquotereview1.html">Better Health Quote</a></li>
<li><a href="insurance/bestquoteshealthreview1.html">BestQuotes</a></li>
<li><a href="insurance/2insure4lesshealthreview1.html">2Insure4Less</a></li>
</ul>
<!-- life insurance -->
<h2><a href="insurance/lifeinsurance1.html">life insurance</a></h2>
<ul>
<li><a href="insurance/2insure4lesslifereview1.html">2Insure4Less</a></li>
<li><a href="insurance/usinsuranceonlinelifereview1.html">USInsuranceOnline</a></li>
</ul>
</div>
</li><!-- end insurance -->
<!-- begin general -->
<li><a href="general.html" title="General Page">general</a>
<div id="general">
<!-- electronics -->
<h2>electronics</h2>
<!-- gaming -->
<h3><span>gaming</span></h3>
<ul>
<li><a href="gaming/haltgamereview1.html">Halt Game</a></li>
<li><a href="gaming/battlestargalactica1.html">Battlestar Galactica</a></li>
<li><a href="gaming/gsn1.html">GSN Gaming</a></li>
</ul>
<!-- electronic gadgets -->
<h3><span>electronic gadgets</span></h3>
<ul>
<li><a href="electronics/kindle1.html">Kindle e–Reader</a></li>
<li><a href="electronics/ecig1.html">Electronic Cigarettes</a></li>
</ul>
<!-- style and fashion -->
<h2>style & fashion</h2>
<!-- makeup -->
<h3><span>makeup</span></h3>
<ul>
<li><a href="makeup/dinair1.html">Dinair Airbrush Makeup</a></li>
<li><a href="makeup/simplykaren1.html">Simply Karen</a></li>
</ul>
<!-- food/dining -->
<h2>food⁄dining</h2>
<!-- net grocers -->
<h3><span>net grocers</span></h3>
<ul>
<li><a href="food/efooddepot1.html">eFood Depot</a></li>
<li><a href="food/peapod1.html">Peapod</a></li>
</ul>
<!-- coupons -->
<h3><span>coupons</span></h3>
<ul>
<li><a href="coupons/brandcaster1.html">Brandcaster Coupons</a></li>
</ul>
<!-- cars/auto -->
<h2>cars⁄auto</h2>
<ul>
<li><a href="auto/carfax1.html">Carfax Vehicle History Reports</a></li>
<li><a href="auto/carprices1.html">CarPrices.com</a></li>
</ul>
<!-- security -->
<h2>security</h2>
<ul>
<li><a href="security/adtalarm1.html">ADT Alarm System</a></li>
</ul>
<!-- hobby -->
<h2>hobby</h2>
<!-- music -->
<h3><span>music</span></h3>
<ul>
<li><a href="music/guitartricksreview1.html">GuitarTricks</a></li>
<li><a href="music/jamoramareview1.html">Jamorama– Learn Guitar</a></li>
</ul>
</div>
</li><!-- end general -->
<!-- begin dating -->
<li><a href="dating.html" title="Dating Page">dating</a>
<div id="dating">
<!-- dating sites -->
<h2>dating sites</h2>
<ul>
<li><a href="dating/30sdatingreviews1.html">30's Dating</a></li>
<li><a href="dating/maturedatingreviews1.html">Mature Dating</a></li>
<li><a href="dating/seniordatingreviews1.html">Senior Dating</a></li>
<li><a href="dating/gaydatingreviews1.html">Gay & Lesbian Dating</a></li>
<li><a href="dating/germandatingreviews1.html">German Dating</a></li>
<li><a href="dating/scandinaviandatingreviews1.html">Scandinavian Dating</a></li>
<li><a href="dating/russiandatingreviews1.html">Russian Dating</a></li>
<li><a href="dating/australiandatingreviews1.html">Australian Dating</a></li>
</ul>
<!-- books and advice -->
<h2>books & advice</h2>
<ul>
<li><a href="dating/askapril1.html">Ask April</a></li>
<li><a href="dating/bounceback1.html">Bounce Back to Dating Formula</a></li>
<li><a href="dating/datingsecrets1.html">Dating Secrets</a></li>
</ul>
</div>
</li><!-- end dating -->
<!-- begin education -->
<li><a href="education.html" title="Education Page">education</a>
<div id="education">
<ul>
<li><a href="education/scholzone1.html">Scholarship Zone</a></li>
<li><a href="education/speedstudytechniques1.html">Speed Study Techniques</a></li>
<li><a href="education/stimulusgrants1.html">Stimulus Grants </a></li>
<li><a href="education/teachmetoday1.html">Teach Me Today</a></li>
<li><a href="education/winningsurveys1.html">Winning Surveys</a></li>
<li><a href="education/basicskillsassessments1.html">Basic Skills Assessments</a></li>
</ul>
</div>
</li><!-- end education -->
</ul>
<!-- END PERSONAL NAVIGATION MENU -->
<!-- BEGIN BUSINESS NAVIGATION MENU -->
<ul id="bMenu">
<!-- business opportunities -->
<li><a href="startyourownbusiness.html" title="Business Opportunities Page">business opportunities</a>
<div id="bizopps">
<ul>
<li><a href="bizopps/mobilemassmoney1.html">Mobile Mass Money</a></li>
<li><a href="bizopps/autopilothomeprofits.html">Autopilot Home Profits</a></li>
<li><a href="bizopps/anthonymorrison1.html">Anthony Morrison's Big Profits Secret</a></li>
</ul>
<!-- home business scams -->
<h2>home business scams</h2>
<ul>
<li><a href="bizopps/medicalbillinghomebusiness1.html">The Medical Billing Home Business Bible</a></li>
</ul>
<!-- medical -->
<h2>medical</h2>
<ul>
<li><a href="bizopps/freesitesignup1.html">Cash–Pulling Affiliate Marketing Websites</a></li>
<li><a href="bizopps/biggerbloggingprofitsreview1.html">Bigger Blogging Profits</a></li>
</ul>
<!-- affiliate marketing -->
<h2>affiliate marketing</h2>
<ul>
<li><a href="bizopps/milliondollarpips1.html">Pips Forex Trading Robot</a></li>
<li><a href="bizopps/pennystockprophet1.html">The Penny Stock Prophet</a></li>
</ul>
<!-- trading/investing -->
<h2>trading⁄investing</h2>
<ul>
<li><a href="bizopps/swagbucks1.html">Swag Bucks</a></li>
<li><a href="bizopps/corsentialsurvey1.html">Corsential</a></li>
</ul>
<h2><a href="bizopps/makemoneywithsurveys1.html">surveys</a></h2>
<ul>
<li><a href="bizopps/thepeoplesprogram1.html">The People's Program</a></li>
</ul>
</div>
</li><!-- end business opportunities -->
<!-- business services -->
<li><a href="businessservices.html" title="Business Services Page">business services</a>
<div id="bizservices">
<ul>
<li><a href="bizopps/shipping1.html">Truckload⁄LTL Shipping</a></li>
</ul>
<!-- shipping solutions -->
<h2>shipping solutions</h2>
<ul>
<li><a href="telecommasterquoteagency1.html">Telecom Master Quote Agency</a></li>
</ul>
<!-- technology solutions -->
<h2>technology solutions</h2>
<ul>
<li><a href="bizservices/projmgmttemplates1.html">Project Management Templates</a></li>
</ul>
<!-- project management -->
<h2>project management</h2>
</div>
</li><!-- end business services -->
<!-- begin business legal -->
<li><a href="legal.html" title="Legal Services Page">legal services</a>
<div id="bLegal">
<ul>
<li><a href="legal/willcreation1.html">Create My Will</a></li>
</ul>
<!-- will creation -->
<h2>will creation</h2>
<ul>
<li><a href="legal/DUIattorney1.html">DUI Attorney</a></li>
</ul>
<!-- defense attorney -->
<h2>defense attorney</h2>
<ul>
<li><a href="legal/divorcedocuments1.html">Divorce Documents</a></li>
</ul>
<!-- divorce -->
<h2>divorce</h2>
<ul>
<li><a href="debt/debtnegotiator1.html">Debt Negotiator</a></li>
</ul>
<!-- credit debt -->
<h3><span><a href="legal/creditdebt1.html">credit debt</a></span></h3>
<ul>
<li><a href="debt/evalbankruptcy1.html">Bankruptcy Lawyer Finder</a></li>
<li><a href="legal/bankruptcy1.html">Bankruptcy Attorney Finder</a></li>
</ul>
<!-- bankruptcy -->
<h3><span><a href="legal/bankruptcy1.html">bankruptcy</a></span></h3>
<!-- debt -->
<h2>debt</h2>
<ul>
<li><a href="mortgage/foreclosurefighter1.html">Home Foreclosure Fighter</a></li>
<li><a href="mortgage/fastcash4homes1.html">Fast Cash 4 Homes</a></li>
</ul>
<!-- mortgage -->
<h2>mortgage</h2>
<ul>
<li><a href="debt/urgenthomerelief1.html">Urgent Home Relief</a></li>
</ul>
</div>
</li>
</ul>
<!-- END BUSINESS NAVIGATION MENU -->
</div><!-- end wrapping div -->
<!-- first e-mail submission form -->
<form id="emailbox" name="form1" method="get" action="Scripts/emailtester.php">
<div>
<label for="go" class="hidden">Enter Your E-mail:</label>
<input type="text" name="email" id="go" value="your e-mail" maxlength="30" />
<input type="submit" id="submit" value="Join" />
</div>
</form>
<div id="invalidemail"></div>
</div><!-- end midcenter div -->
<div id="midright"></div>
</div>
<!-- begin bottom row -->
<div class="row">
<div id="botleft"></div>
<div id="botcenter"></div>
<div id="botright"></div>
</div>
<!-- side window right -->
<div id="sidewindowright">
<div id="rightsidestart"></div>
<div id="rightsidebody">
<h2 class="sidewindowheadertext">Not Recommended</h2>
<ul class="sidewindowlinks">
<li><a href="#">Anthony Morrison's Big Profits Secret</a></li>
<li><a href="#">Mobile Mass Media</a></li>
<li><a href="#">Prorexin</a></li>
</ul>
</div><!-- end right window body -->
<div id="rightsideend"></div>
</div><!-- end side window right -->
</div><!-- end container div -->
<!-- {position:fixed} objects BELOW this line -->
<div id="blackoverlay"></div>
<div id="submissionform">
<div class="submittop"></div>
<div class="submitmid">
<div class="submitcontent">
<form name="form2" method="post" action="../Scripts/confirmform.php">
<div>
<label for="confirmemail">Confirm your e–mail:<span class="required">*</span></label>
<input class="inputwidth" type="text" name="confirmemail" id="confirmemail" value="" maxlength="34"/>
</div>
<div>
<label for="name">Enter your name:<span class="required">*</span></label>
<input class="inputwidth" type="text" name="name" id="name" value="" maxlength="34"/>
</div>
<div>
<label for="age">Enter your age:</label>
<input type="text" maxlength="3" name="age" id="age" />
</div>
<div>
<label for="gender">Select your gender:</label>
<select class="inputwidth" name="gender" id="gender">
<option selected="selected">Select Gender</option>
<option>Male</option>
<option>Female</option>
</select>
</div>
<div>
<label for="country">Select your location:<span class="required">*</span></label>
<select class="inputwidth" name="country" id="country">
<option selected="selected">Select Country</option>
<option>United States</option>
<option>United Kingdom</option>
<option>Canada</option>
<option>Australia</option>
<option>Russia</option>
<option>Brazil</option>
<option>Africa</option>
<option>Somewhere else</option>
</select>
</div>
<div>
<label id="spamtext">To prevent spam, please answer:<span class="required">*</span></label>
<div id="spammath">
<label id="math" for="addition"></label>
<input id="addition" name="addition" value="" maxlength="3"/>
</div>
</div>
<div id="errormessage">
<p>The following errors occurred with your submission:</p>
<ul></ul>
</div>
<div class="submitbutton">
<label class="aicatcher" for="aicatcher">Please leave this field blank:</label>
<input class="aicatcher" id="aicatcher" name="aicatcher" type="text" value=""/>
<input class="formsubmitbutton" id="finalsubmit" type="submit" value="Sign Me Up!"/>
<input class="formsubmitbutton" id="cancel" type="reset" value="Cancel"/>
</div>
</form>
</div> <!-- .submitcontent -->
</div> <!-- .submitmid -->
<div class="submitbotm"></div>
</div> <!-- #submissionform -->
<div id="successfulsubmit">
<div class="success-top"></div>
<div class="success-mid">
<div class="successcontent">
<h3>Thanks for joining the e-mail list, <span id="person"></span>!</h3>
<p>Your e–mail address is:</p>
<p id="email"></p>
<p class="back2u">You should receive an automated acknowledgement within a few minutes. Check your "spam" folder if it's late.</p>
<p class="exit"></p>
</div>
</div>
<div class="success-botm"></div>
</div>
<!-- {position:fixed} objects ABOVE this line -->
</body>
</html>
CSS styles:
/* home page CSS document */
body {
background:url("bgspring.gif");
background-position:50% 0;
background-attachment:fixed;
padding:0 0 10px;
margin:15px 10px 0;
}
#container {
display:table;
table-layout:fixed;
border-spacing:0 0;
max-width:960px;
min-width:440px;
}
.row {display:table-row;}
.row > div {
display:table-cell;
padding:0;
}
#topleft{background:url("headerleft.gif") no-repeat 100% 0;}
#topcenter{background:url("headercenter.gif") repeat-x 0 0;}
#topright{background:url("headerright.gif") no-repeat 0 0;}
#midleft{background:url("bodyleft.gif") repeat-y 100% 0;}
#midcenter{background:url("bodycenter.gif") repeat 0 0; min-height:120px;}
#midright{background:url("bodyright.gif") repeat-y 0 0;}
#botleft{background:url("footerleft.gif") no-repeat 100% 0;}
#botcenter{background:url("footercenter.gif") repeat-x 0 0;}
#botright{background:url("footerright.gif") no-repeat 0 0;}
#topleft,#topright,#midleft,#midright,#botleft,#botright {width:16px;}
#leftside{
position:absolute;
}
#leftsidestart{
float:left;
background:url("sidewindowstartleft.gif");
width:27px;
height:250px;
margin:0;
}
#leftsidebody{
margin:0 auto;
float:left;
background:url("sidewindowbody.gif") repeat-x;
}
#leftsideend{
float:left;
background:url("sidewindowendleft.gif");
width:16px;
height:250px;
margin:0;
}
#middle{
width:626px;
margin:0 auto;
padding-right:7px;
}
#rightside{
position:absolute;
}
#rightsidestart{
background:url("sidewindowstartright.gif");
float:left;
width:27px;
height:250px;
}
#rightsidebody{
background:url("sidewindowbody.gif") repeat-x;
float:left;
margin:0 auto;
height:250px;
position:relative;
}
#rightsideend{
background:url("sidewindowendright.gif");
float:right;
width:16px;
height:250px;
}
/* header logo/lower logo */
h1{
height:206px;
width:626px;
position:relative;
padding:0;
margin:0;
text-align:center;
}
/* mac hide */
h1{overflow:hidden;}
/* end hide */
h1 span{
background:url("logo.png");
position:absolute;
left:0;
top:0;
display:block;
height:206px;
width:626px;
}
#lowerlogo{
background:url("lowerlogo.gif") 0 0 no-repeat;
width:500px;
height:29px;
}
/* first e-mail submission form */
#emailbox{
background:url("emailbox.gif") no-repeat scroll 50% 0 transparent;
height:220px;
width:156px;
margin:0 0 0 8px;
position:absolute;
top:96%;
}
#go{width:80px; margin-top:186px; margin-left:8px;}
#submit{width:50px;}
#invalidemail{background:url("invalidemail.gif") no-repeat scroll 50%; width:140px; height:40px;position:absolute; top:166%; left:17px; z-index:-1;}
/* form submission and related elements */
/* -------------------------------------------- *\\
{position:fixed} objects = #blackoverlay, #submissionform, #successfulsubmit
\\* -------------------------------------------- */
#blackoverlay {
display:none;
position:fixed;
left:0;
top:0;
width:100%;
height:100%;
background-color:black;
z-index:1;
-moz-opacity:.80;
opacity:.80;
filter:alpha(opacity=80);
}
/* ----------------------------- */
#submissionform {
display:none;
width:360px;
position:fixed;
left:0;
right:0;
top:60%;
z-index:1;
padding-bottom:16px;
margin:-15em auto 0;
}
.submittop {
height:60px;
background:url("emailsubmissiontop.gif") no-repeat 50% 0;
}
.submitmid {
background:url("emailsubmissionmid.gif") repeat-y 50% 0;
padding:1px 0; /* 1px vertical padding is required! */
}
.submitbotm {
height:14px;
background:url("emailsubmissionbot.gif") no-repeat 50% 100%;
}
.submitcontent {
overflow:hidden; /* required! */
margin:0px 28px -28px;
}
.inputwidth {
display:block;
width:70%;
margin:3px auto 2px;
}
.required {color:#f00;}
#spamtext {
padding:3px 0;
margin:0;
}
#spammath {
padding-left:15%;
margin:3px 0 2px 0;
}
#math {font-weight:bold;}
#addition {width:50px;}
.aicatcher {
display:none;
visibility:hidden;
}
/* ----------------------------- */
#errormessage {
display:none;
min-height:12px;
color:#f00;
font-weight:bold;
font-size:.9em;
font-family:Arial,sans-serif;
position:relative; /* required */
padding:4px 8px 1.3em;
}
#errormessage p {
padding:0;
margin:0;
}
#errormessage a {color:#09c;}
#errormessage a:hover {color:#0cc;text-decoration:none;}
#errormessage ul{padding-left:10px;}
#errormessage ul li{
list-style:disc;
font-size:.8em;
}
.submitbutton {
text-align:center;
position:absolute;
left:0;
right:0;
top:100%;
}
.submitbutton input {
margin:2px 12px 0;
}
.formsubmitbutton {
cursor:pointer;
font-size:1.1em;
padding:.0625em .75em .125em;
}
#age{width:1.7em; margin:3px auto 2px;}
/* ------------------------------------- */
#successfulsubmit {
display:none;
width:400px;
position:fixed;
left:0;
right:0;
bottom:50%;
z-index:1;
margin:0px auto -3em;
}
.success-top {
height:14px;
background:url("successfulsubmit-top.gif") no-repeat 50% 0;
}
.success-mid {
background:url("successfulsubmit-mid.gif") repeat-y 50% 0;
padding:1px 20px; /* 1px vertical padding is required! */
}
.success-botm {
height:14px;
background:url("successfulsubmit-bot.gif") no-repeat 50% 100%;
}
.successcontent {
min-height:40px;
padding:0px 0px; /* Padding around content can be assigned here, if desired. */
margin:-10px 0 0;
}
#successfulsubmit h3 {
line-height:normal;
text-align:left;
text-shadow:1px 1px 1px #0c3;
padding:1px 0 2px;
margin:.25em 0;
}
#successfulsubmit p {
margin:.325em 0;
}
#successfulsubmit #email {
color:#00f;
font-weight:bold;
font-size:1em;
font-family:Arial,sans-serif;
text-align:center;
margin:.25em 0 .5em;
}
#successfulsubmit .back2u {
font-size:.9em;
}
#successfulsubmit .exit {
color:#f00;
font-weight:bold;
font-size:1.1em;
text-align:center;
min-height:1.2em;
}
/* END FORM-RELATED ELEMENTS */
dropdownmenus.css (same as original)
@charset "utf-8";
/* Drop Down Menus */
/*******************/
/*PERSONAL NAV MENU*/
/*******************/
#pMenu{
padding:94px 0 0 47px;
background:url("pMenuBG.gif") no-repeat scroll 50% 39px transparent;
height:350px;
z-index:50;
margin:0 auto;
}
#pMenu ul{
margin:0;
padding:0;
}
#pMenu li{
list-style:none;
float:left;
margin-right:10px;
position:relative;
letter-spacing:2px;
}
#pMenu li li{
width:100%;
padding-top:1px;
margin-right:2px;
text-align:left;
list-style:square;
list-style-position:inside;
min-width:140px;
letter-spacing:1px;
}
#pMenu a{text-decoration:none;}
#pMenu li > a{
color: #FFF;
text-shadow:1px 1px 3px #000;
-ms-filter:"progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=90, Color='#000000')";
min-width:50px;
padding:3px;
border:5px groove #BB0013;
font-size:16px;
font-weight:bold;
/*begin main gradient*/
background: #a90329; /* Old browsers */
background: -moz-linear-gradient(top, #a90329 0%, #8f0222 44%, #6d0019 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a90329), color-stop(44%,#8f0222), color-stop(100%,#6d0019)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* W3C */
/*end main gradient*/
}
#pMenu a:hover, #pMenu li:hover a, #pMenu a:active, #pMenu li:active a{
color:#FF0;
/*begin hover gradient top level*/
background: #a0030b; /* Old browsers */
background: -moz-linear-gradient(top, #a0030b 0%, #f91d00 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a0030b), color-stop(100%,#f91d00)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #a0030b 0%,#f91d00 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #a0030b 0%,#f91d00 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #a0030b 0%,#f91d00 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a0030b', endColorstr='#f91d00',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #a0030b 0%,#f91d00 100%); /* W3C */
}
#pMenu li > div{
visibility:hidden;
opacity:0;
transition:visibility 0s linear .3s,opacity .3s linear;
transition-delay:0s;
position:absolute;
margin-top:8px;
border:2px solid #003;
padding:4px;
z-index:2;
/*second gradient*/
background: #9ebcbf; /* Old browsers */
background: -moz-linear-gradient(top, #9ebcbf 0%, #7c889b 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9ebcbf), color-stop(100%,#7c889b)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #9ebcbf 0%,#7c889b 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #9ebcbf 0%,#7c889b 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #9ebcbf 0%,#7c889b 100%); /* IE10+ */
background: linear-gradient(to bottom, #9ebcbf 0%,#7c889b 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9ebcbf', endColorstr='#7c889b',GradientType=0 ); /* IE6-9 */
}
#pMenu li:hover div{visibility:visible; opacity:1; transition-delay:0s;}
#health{width:275px;}
#insurance{margin-left:-30px; width:260px;}
#general{margin-left:-78px; width:280px;}
#dating{margin-left:-87px; width:200px;}
#education{margin-left:-108px; width:225px;}
#pMenu li li a, #pMenu li:hover li a{
color:#039;
text-decoration:underline;
text-shadow:none;
background:none;
filter:none;
border:none;
font-size:12px;
display:inline;
}
#pMenu li li a:hover, #pMenu li li a:active, #pMenu li:hover li a:hover, #pMenu li:hover li a:active{
text-decoration:none;
color:#069;
}
#pMenu div a, #pMenu div a:hover, #pMenu div a:active{
color:#0F0;
background:none;
filter:none;
border:none;
}
#pMenu h3, #pMenu h2{margin:0;}
#pMenu li li{padding:0 2px 0 0;}
#pMenu h2{
font-style:bold;
text-align:left;
font-size:14px;
padding-left:3px;
}
#pMenu li h2 a{color:#333399; background:none; filter:none; text-decoration:underline;}
#pMenu li:hover h2 a{color:#333399; background:none; text-decoration:underline;}
#pMenu li:hover h2 a:hover, #pMenu li:hover h2 a:active{color:#33C; text-decoration:none;}
#pMenu h3{
text-align:left;
color:#000000;
font-size:13px;
padding-left:20px;
}
#pMenu li h3 a{color:#333399; background:none; text-decoration:underline;}
#pMenu li:hover h3 a{color:#333399; background:none; text-decoration:underline;}
#pMenu li:hover h3 a:hover, #pMenu li:hover h3 a:active{color:#33C; text-decoration:none;}
#pMenu h3 span{
display:list-item;
list-style-type:disc;
list-style-position:inside;
}
/******************/
/*END PERSONAL NAV*/
/******************/
/**************/
/*BIZ NAV MENU*/
/**************/
#bMenu{
background:url("bMenuBG.gif") no-repeat scroll 50% 82px transparent;
width:560px;
margin:0 auto;
height:78px;
padding-top:100px;
z-index:40;
}
#bMenu li{
list-style:none;
float:left;
position:relative;
margin-right:11px;
letter-spacing:2px;
}
#bMenu ul{margin:0; padding:0;}
#bMenu h2{margin:0;}
#bMenu li li{padding-top:0; padding-bottom:0; margin:0;}
#bMenu a{text-decoration:none;}
#bMenu li > a{
color: #FFF;
/*text shadow*/
text-shadow:1px 1px 3px #000;
filter:progid:DXImageTransform.Microsoft.DropShadow(OffX=1, OffY=1, Color=#000000);
font-weight:bold;
width:auto;
padding:3px;
border:5px groove #09F;
font-size:16px;
/*main gradient*/
background: #1e5799; /* Old browsers */
background: -moz-linear-gradient(top, #1e5799 0%, #5578e0 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(100%,#5578e0)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #1e5799 0%,#5578e0 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #1e5799 0%,#5578e0 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #1e5799 0%,#5578e0 100%); /* IE10+ */
background: linear-gradient(top, #1e5799 0%,#5578e0 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#5578e0',GradientType=0 ); /* IE6-9 */
}
#bMenu li:hover a, #bMenu a:hover, #bMenu li:active a, #bMenu a:active{
color:#FF0;
/*main hover gradient*/
background: #738fdd; /* Old browsers */
background: -moz-linear-gradient(top, #738fdd 0%, #1e5799 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#738fdd), color-stop(100%,#1e5799)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #738fdd 0%,#1e5799 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #738fdd 0%,#1e5799 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #738fdd 0%,#1e5799 100%); /* IE10+ */
background: linear-gradient(top, #738fdd 0%,#1e5799 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#738fdd', endColorstr='#1e5799',GradientType=0 ); /* IE6-9 */
}
#bMenu li li{
width:100%;
padding-top:1px;
padding-bottom:1px;
margin-left:2px;
text-align:left;
list-style:square;
list-style-position:inside;
letter-spacing:1px;
}
#bMenu li:hover div{visibility:visible; opacity:1; transition-delay:0s;}
#bMenu li > div{
visibility:hidden;
opacity:0;
bottom:25px;
transition:visibility 0s linear .3s,opacity .3s linear;
transition-delay:0s;
position:absolute;
padding:4px;
border:2px solid #003;
/*second gradient*/
background: #9ebcbf; /* Old browsers */
background: -moz-linear-gradient(top, #9ebcbf 0%, #7c889b 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9ebcbf), color-stop(100%,#7c889b)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #9ebcbf 0%,#7c889b 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #9ebcbf 0%,#7c889b 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #9ebcbf 0%,#7c889b 100%); /* IE10+ */
background: linear-gradient(to bottom, #9ebcbf 0%,#7c889b 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9ebcbf', endColorstr='#7c889b',GradientType=0 ); /* IE6-9 */
}
#bMenu li li a, #bMenu li:hover li a{
color:#039;
text-decoration:underline;
text-shadow:none;
background:none;
filter:none;
border:none;
font-size:12px;
display:inline;
}
#bMenu li li a:hover, #bMenu li:hover li a:hover, #bMenu li li a:active, #bMenu li:hover li a:active{
text-decoration:none;
color:#069;
}
#bMenu div a:hover, #bMenu div a:focus, #bMenu div a:active{
color:#0F0;
background:none;
filter:none;
border:none;
}
#bMenu h2{
font-style:bold;
text-align:left;
font-size:14px;
padding-left:3px;
}
#bMenu li h2 a, #bMenu li:hover h2 a{color:#333399; background:none; filter:none; text-decoration:underline;}
#bMenu li:hover h2 a:hover, #bMenu li:hover h2 a:active{color:#33C; text-decoration:none;}
#bMenu h3{
text-align:left;
font-size:13px;
padding:4px 0 0 25px;
color:#000000;
margin:2px 0 2px 0;
}
#bMenu li h3 a, #bMenu li:hover h3 a{color:#333399; background:none; text-decoration:underline;}
#bMenu li:hover h3 a:hover, #bMenu li h3 a:hover, #bMenu li:hover h3 a:active, #bMenu li h3 a:active{color:#33C; text-decoration:none;}
#bMenu h3 span{
display:list-item;
list-style-type:disc;
list-style:disc;
list-style-position:inside;
}
#bizopps{width:260px; z-index:3;}
#bizservices{width:280px; margin-left:-68px; z-index:3;}
#bLegal{width:240px; margin-left:-121px; z-index:3;}
/********************/
/** END BUSINESS NAV*/
/********************/
#wrapper{height:auto; width:auto; background:url("homepagedivider.gif") no-repeat 50% 20px;}
Thanks,
Tyler
.
It won’t budge.
. I’ve replaced the WRGHome.css file in the dropbox with (rev1) that is layered properly. 
