Mosaic Jquery plugin WordPress dark grey text

I am trying to make the mosaic jQuery plugin work within wordpress, up until now i have had to do it using iframes which is a bit of a pain.

The problem when using within wordpress is that text is a very dark grey rather than white.

It seems to seeing the css and the js files seem to load and I see no error in the chrome inspect element console.

http://rise-sandbox1.co.uk/social-test-for-tudor/

css used

 <style type="text/css">
.clearfix: after; {
 content: " "; /* Older browser do not support empty content */
 visibility: hidden;
 display: block;
 height: 0;
 clear: both;
}
.details{ margin:15px 20px; }   
h6{ font:300 16px 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height:160%;         letter-spacing:0.15em; color:#fff; text-shadow:1px 1px 0 rgb(0,0,0); }
p{ font:300 12px 'Lucida Grande', Tahoma, Verdana, sans-serif; color:#aaa; text-    shadow:1px 1px 0 rgb(0,0,0);}
a{ text-decoration:underline; }

.mosaic-block {
float:left;
position:relative;
overflow:hidden;
width:400px;
height:250px;
margin:10px;
background:#111 url(http://rise-sandbox1.co.uk/img/progress.gif) no-repeat center center;
border:1px solid #fff;
-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.5);
}

.mosaic-backdrop {
    display:none;
    position:absolute;
    top:0;
    height:100%;
    width:100%;
    background:#111;
}

.mosaic-overlay {
    display:none;
    z-index:5;
    position:absolute;
    width:100%;
    height:100%;
    background:#111;
}
    .bar .mosaic-overlay {
        bottom:-100px;
        height:100px;
        background:url(http://rise-sandbox1.co.uk/img/bg-black.png);
    }
</style>

And the javascript

        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script></script>
    <script type="text/javascript" src="http://rise-sandbox1.co.uk/js/mosaic.1.0.1.js"></script>    
<script type="text/javascript">  
        jQuery(function($){
            $('.bar').mosaic({
                animation   :   'slide'
            });
        });

    </script>

I am using a plugin called specific css/javascript for posts and pages to implement the code
which normally works well
html

<div class="mosaic-block bar">
<a href="http://www.nonsensesociety.com/2011/01/sloppy-art/" target="_blank" class="mosaic-overlay">
<div class="details">
<h6>Sloppy Art - A Mess of Inspiration</h4>
<p>via the Nonsense Society (image credit: Florian</p>
</div>
</a>
<div class="mosaic-backdrop"> <img src="http://rise-sandbox1.co.uk/images/.jpg"/></div>
</div>      
<div class="clearfix"></div>
</div>

Hope someone can help this is driving me mad