Элементы нижнего колонтитула по вертикали

Я пытаюсь сделать этот нижний колонтитул, где каждый элемент вертикально выровнен. Но по какой-то причине авторское право, например, не выровнено по вертикали.

Может ли кто-нибудь помочь мне узнать, что не так? Или что мне не хватает?

Нижний колонтитул HTML:

<div id="footerSocial">
<div id="socialNetwork">
Connect with us
<a href="https://www.facebook.com/" target="_blank"><img src="/www/assets/newImages/footer/facebook.png"></a>
<a href="https://twitter.com/" target="_blank"><img src="/www/assets/newImages/footer/twitter.png"></a>
<a href="https://plus.google.com/" target="_blank"><img src="/www/assets/newImages/footer/google plus.png"></a>
<a href="http://www.pinterest.com/" target="_blank"><img src="/www/assets/newImages/footer/pinterest.png"></a>
<a href="http://tumblr.com/" target="_blank"><img src="/www/assets/newImages/footer/tumblr.png"></a>
</div>
<div id="footerNewsletter">
Subscribe to Newsletter
<input id="subscribeNewsletter" name="email" type="text">
<input id="subscribe_ok" type="image" src="/www/assets/newImages/footer/Ok.png" onclick="saveNewsletter(this);">

</div>
<div id="copyright">
Copyright 2013 - Dreaming Different
</div>
</div>

Нижний колонтитул CSS:

#footerSocial { 
    display: inline-block; 
    text-align: center; 
    width: 100%; 
    margin-top: -25px; 
}

#socialNetwork { 
    display: inline-block; 
    float: left; 
    font-size: 10px; 
    color: #747474; 
}

#footerNewsletter { 
    display: inline-block; 
    margin: 0 auto; 
    font-size: 10px; 
    color: #747474; 
}

#footerNewsletter #subscribe_ok { 
    margin-bottom: -5px; 
}

#copyright { 
    display: inline-block; 
    float: right; 
    font-size: 10px; 
    color: #747474; 
}

#footerSocial { 
    border: 1px solid black; 
}

#socialNetwork { 
    border: 1px solid green; 
}

#footerNewsletter { 
    border: 1px solid red; 
}

#copyright { 
    border: 1px solid blue; 
}

Демо-версия скрипта