css in head screwing up formatting of stuff in my page

[torrent]

At least I think thats why its doing that. The add this bookmark button on the right hand side in the side menu is buggered. I also had another adspace before that would have a hover over effect, from the table I think.

Does anyone know whats going on and how I can fix it?

Heres the css from the head of the page.

<link rel="stylesheet" href="front.css" type="text/css" media="screen" />

<style type="text/css">

<!--
INPUT,SELECT,TEXTAREA{

background:white;
color: #006699;

}
-->
</style>

<!-- Style for table -->

<style>
.hideFromScreen {display:none;}
A { text-decoration:none }
a:link {
color: #000000;
}
a:visited {
color: #607ec5;
}
a:hover {
color: #3366FF;
text-decoration: none;
}
a:active {
color: #99ccff;
}
table {
text-align: left;
font-size: 12px;
font-family: book antiqua;
background: #606060;
}
table thead {
cursor: pointer;
}
table thead tr,
table tfoot tr {
background: url(images/tablemenu.png) repeat-x;
}
table tbody tr {
background: #FFFFFF;
}
table tbody tr:hover {
background:#F0F0F0;
}
td, th {
border: 1px solid black;
}
th {
color:#ffffff;
}
</style>


<!-- Style for table -->

<link rel="search" type="application/opensearchdescription+xml" href="http://www.plentyoftorrents.com/search.xml" title="Plenty of Torrents" />

<script type="text/javascript" src="sortabletable.js"></script>

</head>

And heres a link to the pages css.
http://www.plentyoftorrents.com/front.css

and heres the main page http://www.plentyoftorrents.com/

Thanks for any help.:o