too big jqueryui elements

Yesterday I was installing jquery-ui at one of my websites. When I do that as it was writen in instruction all jquery-ui elements was 2 times bigger. I search a while and find how it was solved in demos at jquery.com. That CSS code: 
body{ font: 62.5% "Trebuchet MS", sans-serif;}
.demoHeaders { margin-top: 2em; }
#dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;}
#dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;}
ul#icons {margin: 0; padding: 0;}
ul#icons li {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left;  list-style: none;}
ul#icons span.ui-icon {float: left; margin: 0 4px;}
Unfortunatly that solution change (destroy) all layout of website. So here is step by step instuction how to do it correct. 1. Download jquery-ui from jqueryui.com/download with all components selected theme. 2. Extract zip archive to some directory at server. In my case it was lib/jquery-ui/ and I will use it in that tutorial, but you can use any other directory. I will also use jquery-ui 1.8.5 and theme ui-darkness. If you use other version or theme please replace that numbers (writing jquery-ui-x.x.x don't looks good). 3. Add that lines to every page at your website between and : 
<link type="text/css" href="libs/jquery-ui/css/ui-darkness/jquery-ui-1.8.5.custom.css" rel="Stylesheet" />
<script type="text/javascript" src="libs/jquery-ui/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="libs/jquery-ui/js/jquery-ui-1.8.5.custom.min.js"></script>
<style type="text/css">
	#dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;}
	#dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;}
	ul#icons {margin: 0; padding: 0;}
	ul#icons li {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left;  list-style: none;}
	ul#icons span.ui-icon {float: left; margin: 0 4px;}
	.ui-widget{ 
		font: 62.5% "Trebuchet MS", sans-serif;
	}
</style>
If you wish you can put that CSS data in separeted file, but it's very important that you include that css file after including jquery-ui (after first 3 lines). 4. Now every thing should work fine. You can test it by that working example: 
<html>
    <head>
        <link type="text/css" href="libs/jquery-ui/css/ui-darkness/jquery-ui-1.8.5.custom.css" rel="Stylesheet" />
        <script type="text/javascript" src="libs/jquery-ui/js/jquery-1.4.2.min.js"></script>
        <script type="text/javascript" src="libs/jquery-ui/js/jquery-ui-1.8.5.custom.min.js"></script>
        <style type="text/css">
            #dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;}
            #dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;}
            ul#icons {margin: 0; padding: 0;}
            ul#icons li {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left;  list-style: none;}
            ul#icons span.ui-icon {float: left; margin: 0 4px;}
            .ui-widget{ 
                font: 62.5% "Trebuchet MS", sans-serif;
            }
        </style>
        <script>
            $(function(){
                $("#date").datepicker();
            });
        </script>
    </head>
    <body>
        <form>
            date:
            <input id="date" / >
        </form>
    </body>
</html>