JavaScript Not Triggering

So I've got the beginnings of an animation script here:

<div id="card5">
    <h4 class="y">Let me be your guide.</h4>
    <h1>Here's what I've got:</h1>

    <div id="a">
        <h4 id="aa">Creativity</h4>
    </div>

    <div id="b">
        <h4 id="bb">Know-how</h4>
    </div>

    <div id="c">
        <h4 id="cc">Familiarity</h4>
    </div>
</div>

<script type="text/javascript">
    var aa = document.getElementById("aa");
    var bb = document.getElementById("bb");
    var cc = document.getElementById("cc");

    var aamargin = style.aa.marginTop | 30;
    var bbmargin = style.bb.marginTop | 30;
    var ccmargin = style.cc.marginTop | 30;

    var a = document.getElementById("a");
    var b = document.getElementById("b");
    var c = document.getElementsByTagName("c");

    var aadown = true;
    var bbdown = true;
    var ccdown = true;

    a.onmouseover = amove;
    b.onmouseover = bmove;
    c.onmouseover = cmove;

    function amove() {
        window.alert("Herro!");
        if (aadown) {
            aaup();
            aadown = false;
        }
    }

    function aaup() {
        if (aamargin > 0) {
            aamargin -= 1;
            style.aa.marginTop = aamargin + "%";
            requestAnimationFrame(aaup);
        }
    }
</script>

And when I mouse over the first div ("a"), of course, nothing happens. I put an alert box in to see if the amove() function was being triggered, and it wasn't. The alert never fired. No idea why. It's probably just a typo somewhere...