Your styles are inserted in the body of the page?!?!

That could definitely be the problem, externally linked stylesheets should always be in the HEAD of your document. You can get away with placing embedded Style blocks within your markup, but having externally linked style sheets within your document may have some weird side effects.

As I understand the Externally linked style sheets are loaded into the web browser first (since they're in the head), then applied to the document markup as it's being rendered / loaded. If the browser were to hit an externally linked stylesheet reference within the document it would have to stop loading the page, then reload the whole page again to have the styles applied, but it doesn't, instead it just keeps rendering the page without applying the StyleSheet.

If you wanted to load stylesheets from within your document's markup you may want to look into using JavaScript to manipulate the StyleSheets or defining a ContentPlaceHolder in the head of your document for loading / unloading StyleSheets.

If you want to learn more about how StyleSheets and Styles are applied in the Browser, then check out this video: An Inconvenient API: The Theory of the DOM