Code for our Week 5 project that includes visual design for a nav button. Use this to replace the /*PASTE THE NAV-GRISSOM CODE HERE*/ comment in the CSS of our Apollo project.

nav-grissom

.mainnav ul li.grissom {
background: url("images/nav-icon.png") no-repeat scroll 2% 50% rgba(240, 240, 220, 1);
-webkit-transition: all 0.1s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
-o-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out; 
}

.mainnav ul li.grissom a {
background: rgba(240, 240, 220, .95);
color: #000000;
display: block;
font-family: Verdana,Geneva,sans-serif;
font-size: 0.8em;
font-weight: bold;
margin-bottom: 0.33em;
padding: 0.33em 1em 0.33em 2.2em;
text-decoration: none;
width: auto;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out; 
}

.mainnav ul li.grissom:hover {
background: url("images/nav-icon.png") no-repeat scroll 2% 50% rgba(215, 215, 200, 1);
}
.mainnav ul li.grissom a:hover {
background: rgba(215, 215, 200, 0);
}