Site CSS Menu Body Background

by Blueprinter

HTML

<div id="entireSite">
    <div id="mainMenu">
        <p class="floatLeftP" id="SiteName">My Site Name</p>
        <p class="floatLeftP"><a href="http://www.yardsalesuperhighway.appspot.com" id="ViewLink1">HOME</a></p>
      <p class="floatLeftP"><a href="http://www.yardsalesuperhighway.appspot.com/#/Offered" id="ViewLink2">OFFERED</a></p>
       <p class="floatRightP"><span id="ViewLink7" onmouseup="fncNavPages('SignIn')" title='SignIn'>Sign In</span></p>
    </div>
    
    <div id="bodyOfSite">
            <div id="tabs-nested-left">
      <div id="FbLog">
        <a href="https://www.facebook.com/dialog/oauth?client_id=309904205836549&redirect_uri=https://script.google.com/macros/s/AKfycby2Zr2apAai2sIW6eiWTc8yNakGg5M9oLQkmhcz-IRqs22qoJhm/exec?&response_type=token&scope=publish_stream"><img src="https://googledrive.com/host/0B52YKjuEE44ySkhPUTBsbW5sSWM/active_600.png" height="95%" width="95%"></a>
      </div>
      <div id="idShowSignIn" style="display:none"></div>
      <div class="cb" id="tabSignIn" onmouseup="fncNavPages('SignIn')">Sign In</div>
      <div class="cb" onmouseup="fncNavPages('Buy')">Buy</div>
      <div class="cb" onmouseup="fncNavPages('InputForm')">Sell</div>
      <div class="cb" onmouseup="fncNavPages('Account')">Account</div>
      <div class="cb" onmouseup="fncNavPages('Emails')">Emails</div>
      <div class="cb" onmouseup="fncNavPages('MyListings')">My Listings</div>
      <div class="cb" onmouseup="fncNavPages('chgPass')">Change Password</div>
      <div class="cb" onmouseup="fncNavPages('Register')">Registration</div>
      <div class="cb" onmouseup="fncNavPages('Explain')">Site Information</div>
      <div class="cb" onmouseup="fncNavPages('Security')">Security</div>
     
    </div>
    
    <div id="ChgViewSection">
      <div id="SignInBody" style="display:block">
          <div id="SignInMainDiv">
  <h2 id='h2TitleMmbrSign' onmouseup='showSignFlds()' style='cursor:pointer'>Member Login</h2>

  <br>

  <div id="mainSignDiv">
  ...

CSS

#entireSite {background:green}
#mainMenu {
    border: solid 1px black;
    background-color: silver; 
    width: 96%;
    margin-left: 2%;
    margin-right: 2%;
    overflow: auto;
}

#bodyOfSite {
    background-color: blue;
    width: 96%;
    margin-left: 2%;
    margin-right: 2%;
    overflow: auto;
}

#SiteName {font-size: large; margin-left: 2%;}
#ViewLink1 {color:#CC3399; font-size: small; font-family:"Arial Black";}
#ViewLink2 {color:#CC3399; font-size: small; font-family:"Arial Black";}
#ViewLink7 {color:green; font-weight:bold; font-size: large; cursor: pointer;}

.floatLeftP {
    display: inline-block;
    margin-top: 3px;
    margin-left: 3px;
    margin-right: 3px;
}

.floatRightP {
    float: right;
    margin-right: 1%;
}

#tabs-nested-left {
  width:18%;
  border:solid 1px;
  float:left;
  overflow-x: visible;}

#FbLog {
    list-style: none;
    padding: 10px;
    display:list-item;
    background-color: white;
  	margin-left:auto;
	margin-right:auto;
    width:85%;
    cursor: pointer;
}

#idShowSignIn {
    list-style: none;
    padding: 10px;
    display:list-item;
    background-color: #1947A3;
    color: #FFF;
    border: 1px solid black;
	border-radius: 5px;
/* 	Setting the left and right margins to auto 
	specifies that they should split the available margin equally. The result is a centered element: */
	margin-left:auto;
	margin-right:auto;
	width:85%;
	cursor: pointer;

}

.cb {
  list-style: none;
  padding: 10px;
  display:list-item;
  background-color: #800000;  
  color: #FFF;
  border: 1px solid black;
  border-radius: 5px;
/* 	Setting the left and right margins to auto 
  specifies that they should split the available margin equally. The result is a centered element: */
  margin-left:auto;
  margin-right:auto;
  width:85%;
  cursor: pointer;
}

.cb:hover {
	background-color: #4a4a4a; 
	color: #FFF;
}