#navigation { position: absolute; margin: 0; padding: 0; top: 0; left: 0; list-style: none; height: 600px; background: url(colorbar.gif) no-repeat; }
#navigation li { width: 150px; }
#navigation li a { display: block; margin-left: -70px; padding-top: 0px; width: 70px; height: 150px; overflow: hidden; background: #000; opacity: .8; -webkit-border-radius: 4px; }
#navigation .home a       { background: url(home.gif) no-repeat top right; }
#navigation .about a      { background: url(about.gif) no-repeat top right; }
#navigation .portfolio a      { background: url(portfolio.gif) no-repeat top right; }
#navigation .contact a   { background: url(contact.gif) no-repeat top right; }

body {
} 
.bgc{
background-image: url(halftonec.gif);
background-repeat: repeat-y;
background-position: right;
} 
.bgm{
background-image: url(halftonem.gif);
background-repeat: repeat-y;
background-position: right;
} 
.bgy{
background-image: url(halftoney.gif);
background-repeat: repeat-y;
background-position: right;
} 
.bgb{
background-image: url(halftone.gif);
background-repeat: repeat-y;
background-position: right;
}