Changing the popup style in Virtual Earth

There have been many posts recently about how to change the popup styles in Virtual Earth.
I'm no designer but these are the pieces that you need.

Firstly this is the html that is generated by a default popup.

<div style="visibility: hidden; top: 0px; 
bottom: auto; left: 585px; right: auto; display: block; opacity: 1;" class="ero">
    <div class="ero-shadow">
        <div class="ero-body">
            <div class="ero-actionsBackground">
                <div class="ero-previewArea">
                    <div class="firstChild"><p></p>
                        <div class="VE_Pushpin_Popup_Title">My Title</div>
                        <div class="VE_Pushpin_Popup_Body">My Body</div>
                        <p></p>
                    </div>
                </div>
                <div class="ero-actions">
                    <ul></ul>
                </div>
                <div class="ero-paddingHack"></div>
            </div>
        </div>
    </div>
    <div style="top: 215px;" class="ero-leftBeak"></div>
</div>

The next critical element is the css styles

.ero {
	position: absolute;
	display: block;
	padding: 0 19px;
	font-size: 1.2em;
	color: #676767;
	z-index: 500!important;
	border: solid 0 black;
	background: transparent;
}
.ero .ero-shadow {
	position: relative;
	float: left;
	background: #bfbfbf;
}
.ero .ero-body {
	position: relative;
	top: -3px;
	left: -3px;
	width: 255px;
	overflow: hidden;
	border: solid 1px #888;
	background: #fff;
}
.ero .ero-previewArea {
	width: 100%;
	background: #fff;
}
.ero .ero-previewArea p {
	margin: 0;
	padding: 0 12px 10px 0;
	font-size: 1.1em;
}
.ero .ero-previewArea div.firstChild {
	margin: 12px;
	overflow: hidden;
}
* html .ero .ero-previewArea div {
	word-wrap: break-word;
}
.ero .ero-previewArea .title {
	font-size: 1.1em;
	font-weight: bold;
	color: #000;
	margin: 0 0 8px;
}
.ero-actionsBackground {
	margin: 4px;
	background: #e4edf3;
}
.ero .ero-actions {
	padding: 4px 8px 0;
}
* html .ero .ero-actions {
	padding-top: 8px;
}
.ero .ero-actions ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.ero .ero-actions ul a, .ero .ero-actions ul a:link, .ero .ero-actions ul a:visited {
	color: #0088e4;
	text-decoration: none;
}
.ero .ero-actions ul a:hover {
	text-decoration: underline;
}
.ero .ero-actions ul li {
	margin-bottom: 4px;
}
.ero .ero-paddingHack {
	height: 8px;
	width: 1px;
	font-size: 8px;
}
.ero .ero-leftBeak, .ero .ero-rightBeak {
	position: absolute;
	top: 10px;
	width: 19px;
	height: 34px;
}
.ero .ero-leftBeak {
	left: 0;
	background: transparent url(../../i/ero/beakLeft.gif) no-repeat 0 0;
}
.ero .ero-rightBeak {
	right: 4px;
	background: transparent url(../../i/ero/beakRight.gif) no-repeat 0 0;
}
.ero-progressAnimation {
	position: absolute;
	height: 3px;
	width: 13px;
	font-size: 0;
	z-index: 500;
	overflow: hidden;
}
.ero-progressAnimation div {
	position: absolute;
	height: 100%;
	width: 3px;
	font-size: 0;
	background: #54ce43;
}
.ero-progressAnimation div.frame0 {
	left: -3px;
}
.ero-progressAnimation div.frame1 {
	left: 0;
}
.ero-progressAnimation div.frame2 {
	left: 5px;
}
.ero-progressAnimation div.frame3 {
	left: 10px;
}

.VE_Pushpin_Popup_Title {
	color: black;
	padding-bottom: 5px;
	font: bold 8pt Verdana, sans-serif;
}
.VE_Pushpin_Popup_Body {
	color: #676767;
	font: normal 8pt Verdana, sans-serif;
}
.VE_Pushpin_Popup_Link {
	color: blue;
	text-decoration: underline;
	font: bold 8pt Verdana, sans-serif;
}
.ero-actionsBackground {
	background: transparent;
}

The key is to include your styles after including the virtual earth javascript file
Now if you wanted to say make the width of the popup a little bigger (400px) you would overwrite the style in your css with:

.ero .ero-body {width: 400px;}