main.css (correct order)

The first time I tried to use Dojo framework in my application. I included CSS files as CSS books recommended (and Dojo documentation), but what I see:
1. My font-family is changed from 'Verdana' to 'Myriad',
2. I used font-size:100% for body, but now I see that font-size is much smaller,
3. My 'Next' link (top-right corner) is hardly visible,
4. All <pre> tags have background, borders and some extra padding,
5. It looks very different than the application that I used before.
What happened?
After a short investigation I've found problems.
My CSS statements from the main.css files are overwritten by statements from the dojo.css file. (see on the bottom of this page)
The <pre> tags are styled by css statements from dojo.css file.
The "Next' link now is 75% of the 12px (from dojo.css file) and has font-size 9px instead of 12px as I expected.
My main.css file:
CSS including:
<link type="text/css" href="css/main.css" rel="stylesheet" />
<style type="text/css">
	@import "/dojo/dojo/resources/dojo.css";
	@import "/dojo/dijit/themes/tundra/tundra.css";
Tab 1 content
Tab 2 content

@import "/dojo/dojo/resources/dojo.css";

body { /* dojo.css (line 22) */
	font: 12px Myriad,Helvetica,Tahoma,Arial,clean,sans-serif; 
	*font-size: 75%;
pre { /* dojo.css (line 74) */
	border-width:1px 0;
pre, code { /* dojo.css (line 67) */
	border:1px solid #CCCCCC;
	font-family:Courier,"Courier New";