body { background-color: black; color: white; font-family: sans-serif; }
a { text-decoration: none; }

div.box { 
    padding: 10px; 
    margin: 2px;  
    position: absolute; 
    m: expression(this.onmouseover = new Function("this.className = 'box hover';"));
}

div.hover {
    m: expression(this.onmouseout = new Function("this.className = 'box';"));
}

a div.hover {
    cursor: hand;
}

#title { 
    color: #f2f2f5; 
    font-size: 48px;  
    font-weight: bold; 
    bottom: 350px; 
    right: 200px; 
}
a #title:hover, a #title.hover { background-color: #787878; }

#blog { 
    color: #bbd2e0; 
    font-size: 36px; 
    font-weight: bold; 
    bottom: 200px; 
    right: 100px; 
}
a #blog:hover, a #blog.hover { background-color: #5893ac; }

#colors { 
    color: #003250; 
    font-size: 10px;  
    bottom: 30px; 
    right: 30px; 
}
a #colors:hover, a #colors.hover { background-color: #bbd2e0; }

#resume { 
    color: #5893ac; 
    font-size: 24px; 
    font-weight:bold; 
    bottom: 230px; 
    right: 230px; 
}
a #resume:hover, a #resume.hover { background-color: #bbd2e0; }

#portfolio { 
    color: #a7a7a7; 
    font-size: 16px; 
    bottom: 570px; 
    right: 270px;
}
a #portfolio:hover, a #portfolio.hover { background-color: #787878; }

#books { 
    color: #bbd2e0; 
    font-size: 24px; 
    bottom: 420px; 
    right: 330px; 
}
a #books:hover, a #books.hover { background-color: #5893ac; }

#private { 
    color: #787878; 
    bottom: 450px; 
    right: 140px; 
}
a #private:hover, a #private.hover { background-color: #a7a7a7; }

.content-light { width: 200px; position: relative; color: #000000; background-color: #bbd2e0; padding: 12px; margin: 6px; }
.content-light a { color: #003250; }
.content-light a:hover { text-decoration: underline; }

.content-dark { width: 300px; position: relative; border: 1px solid #bbd2e0; padding: 6px; margin: 6px; }
.content-dark a { color: #bbd2e0 }
.content-dark a:hover { text-decoration: underline; }