External text w/ css dissapears

1

I’m using an external text file and css along with a scrollbar. Everything works fine till I start using the styles in my text document and then the text dissapears. Does any know why this would be happening? And my text is supposed to be white, the background of the file is blue.

Here is the code for my scroll bar

stop();
bar.useHandCursor = dragger.useHandCursor=false;
space = 20;
friction = 0.9;
speed = 4;
y = dragger._y;
top = main._y;
dragger.onPress = function() {
	drag = true;
	this.startDrag(false, this._x, this._parent.y, this._x, this._parent.y+this._parent.bar._height-this._height);
	dragger.scrollEase();
};
dragger.onMouseUp = function() {
	this.stopDrag();
	drag = false;
};
bar.onPress = function() {
	drag = true;
	if (this._parent._ymouse>this._y+this._height-this._parent.dragger._height) {
		this._parent.dragger._y = this._y+this._height-this._parent.dragger._height;
	} else {
		this._parent.dragger._y = this._parent._ymouse;
	}
	dragger.scrollEase();
};
bar.onMouseUp = function() {
	drag = false;
};
moveDragger = function (d) {
	if ((dragger._y>=y+bar._height-dragger._height && d == 1) || (dragger._y<=y && d == -1)) {
		clearInterval(myInterval);
	} else {
		dragger._y += d;
		dragger.scrollEase();
		updateAfterEvent();
	}
};
up_btn.onPress = function() {
	myInterval = setInterval(moveDragger, 18, -1);
};
down_btn.onPress = function() {
	myInterval = setInterval(moveDragger, 18, 1);
};
up_btn.onMouseUp = down_btn.onMouseUp=function () {
	clearInterval(myInterval);
};
MovieClip.prototype.scrollEase = function() {
	this.onEnterFrame = function() {
		if (Math.abs(dy) == 0 && drag == false) {
			delete this.onEnterFrame;
		}
		r = (this._y-y)/(bar._height-this._height);
		dy = Math.round((((top-(top-bottom)*r)-main._y)/speed)*friction);
		main._y += dy;
	};
};

Here is the code on the frame for my dyanmic text box


var format = new TextField.StyleSheet();
var path = "textStyles.css";
format.load(path);
format.onLoad = function(loaded) {
	if (loaded) {
		_root.contentText_mc.main.myTextField.styleSheet = format;
		myLoadVar = new LoadVars();
		myLoadVar.load("events.txt");
		myLoadVar.onLoad = function(success) {
			if (success == true) {
				_root.contentText_mc.main.myTextField.variable = "eventsinfo";
				_root.contentText_mc.main.myTextField.htmlText = myLoadVar.eventsinfo;
			}
		};
	} else {
		_root.contentText_mc.main.myTextField.text = "Error loading CSS file!";
	}
};

Here is my css code

.one {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 8px;
	font-weight: bold;
	color: #fff;
}
.two {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #fff;
}
.three {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight: bold;
	color: #fff;
}
.four {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	color: #fff;
}

Here is my text file code

eventsinfo=<p  class='two'>New Years Eve! Bring in the New Year! Make Reservations Today</p>