Twitter Widget is being distorted by css. How can I fix it

I embedded a twitter widget on my website using their embed code. But after putting it on my web page the letters are too big and the size of it is all wrong.The Letters are too big and the styling of the widget is not proportioned.

All of the styling information that is needed is actually in the javascript code. But it looks like something is overriding the styling and throwing it off.

Here is the code for the widget.

   <script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
  version: 2,
  type: 'profile',
  rpp: 4,
  interval: 6000,
  width: 160,
  height: 300,
  theme: {
    shell: {
      background: '#333333',
      color: '#ffffff'
    },
    tweets: {
      background: '#000000',
      color: '#b68e59',
      links: '#cccccc'
    }
  },
  features: {开发者_JS百科
    scrollbar: false,
    loop: false,
    live: false,
    hashtags: true,
    timestamp: true,
    avatars: false,
    behavior: 'all'
  }
}).render().setUser('BigNotch').start();
</script>

And here is the link to the page that it's on. http://notchtheguru.com

how can I fix this?

I figured it out, so now i'm going to answer my own question :) (maybe somebody esle will run into this problem)

What I did was put the widget in a container div. I set the font on the containter div, but you don't have to set anything for the container dive at all.

The javascript file contains CSS that affects the styling of your widget.

I recommend saving your own copy of the widget and storing it on your webserver, so you can edit the contents of it.

The font size is coming up as 18/20px, so if you find the following class and reduce the font size it should look more like what you are after - something like this:

.twtr-tweet-wrap {
    font-size: 14px; // Or whatever size you choose...
}