body {
background: white;
margin: 0;
padding: 0;
font-family: trebuchet, 'trebuchet ms', geneva, arial, sans-serif;
overflow: hidden;
}


/*  The notebook image is applied to this container */
#main-container {
background-image: url(../media/content_bg.gif);
position: absolute;
height: 525px;
width: 796px;
left: 50%;
margin-left: -373px;
top: 50%;
margin-top: -262px;
}

/*  Each navigation piece is absolutely positioned within this container.  Hovers are created via bg images */
.global-navigation {
position: absolute;
left: 194px;
top: 230px;
width: 271px;
height: 295px;
margin: 0;
padding: 0;
line-height: 1000px; /*  These are to get rid of the text in the divs */
color: white;
}

/*  Hovers will not work in IE. I could not figure out how to apply CSS by class (eg.
#nav-menu-1 .navigation-link {} for some reason -- otherwise I could have used
the Javascript to make hovers that would have work IE -- which, yeah, I know, that
was the whole point of having the javascript there in the first place */

/* CSS Zen Garden */
#nav-menu-1 {
background-image: url(../media/nav-menu-1.gif);
position: absolute;
top: 0;
left: 0;
width: 132px;
height: 151px;
cursor: pointer;
}

/* Won't work in IE */
#nav-menu-1:hover {
background-image: url(../media/nav-menu-1-over.gif);
}

/* NMD 302 Link */
#nav-menu-2 {
background-image: url(../media/nav-menu-2.gif);
position: absolute;
top: 0px;
left: 132px;
width: 139px;
height: 151px;
cursor: pointer;
}

/* Won't work in IE */
#nav-menu-2:hover {
background-image: url(../media/nav-menu-2-over.gif);
}

/* NMD 302 Link */
#nav-menu-3 {
background-image: url(../media/nav-menu-3.gif);
position: absolute;
top: 151px;
left: 0;
width: 132px;
height: 144px;
cursor: pointer;
color: white;

}

/* Won't work in IE */
#nav-menu-3:hover {
background-image: url(../media/nav-menu-3-over.gif);
}

/*  Cute scroll box */
#description-container {
position: absolute;
top: 107px;
left: 490px;
width: 240px;
height: 255px;
overflow-y: scroll;
font-size: 10pt;
color: #460090;
}

#description-container a:link {
color: magenta;
text-decoration: none;
border-bottom: 1px dotted;
}

#description-container a:hover {
color: magenta;
text-decoration: none;
border-bottom: 1px dotted;
color: purple;
background: #fc07a8;
}

/* I was lazy and didn't create a background for this when I sketched out the design */
#other-projects {
position: absolute;
top: 450px;
left: 380px;
width: 380px;
border: 1px solid;
background: #fc07a8;
font-size: 12px;
}

.other-project {
float: left;
display: block;
border: 1px solid;
margin: 3px;
padding: 2px;
width: 178px;
background: white;
}

.other-project-over {
float: left;
display: block;
border: 1px solid;
margin: 3px;
padding: 2px;
width: 178px;
cursor: pointer;
background: #b04ee2;
}