2. How can I make my header linkable? Thank you.

You can't add links directly using CSS, but often you can set a background to a link element that's already clickable and use that to make what you add with CSS appear clickable. In your current setup, you might start by hiding the current header image like this:

#headerimage {
	background: none;
	height: 0;
}

Then you could make space inside the site title area used by the MistyLook theme to add a new header image as a background for the site title link:

#header {
	width: 938px;
	padding-bottom: 0;
}

#header h1 a {
	display: block;
	width: 958px;
	height: 116px;
	background: url('http://www.burnerprep.com/00224-1/design/images/header-bg.png') no-repeat;
}

For a final touch, you can hide the tagline area (the "h2" in the header) to get rid of the space it's using up and you can remove some padding from the feeds to tighten up the space below the header image:

#header h2 {
	display: none;
}

html #feedarea {
	padding-top: 0;
}

1. My main site is http://www.burnerprep.com. Can I edit the header and footer css of my WordPress blog theme, MistyLook, to give it the appearance of my main website (the categories on the sides and the menu on top).

What you'll want to do is look at the CSS in the main site for inspiration. In order to edit and work with the CSS, I would also recommend starting out with a tutorial such as http://www.htmldog.com/guides/cssbeginner/ so that you can learn the basics. You should also learn how to use your browser's web inspector tool. Most modern browsers have one and it let's you right-click on an element and select "Inspect Element" to see the corresponding HTML and all of the CSS that apply to it.

I will start you out with an example. I used my browser's web inspector and looked at http://www.burnerprep.com/ and found that this image is used for the ".content-holder" background:
http://www.burnerprep.com/00224-1/design/images/content-holder.png

Then I looked at

#container {
	background: url('http://www.burnerprep.com/00224-1/design/images/content-holder.png') repeat-y;
	border: 0;
}

That image is 958 pixels wide though, so you could either adjust the image and upload a smaller version of it or you can expand the width of the blog. To expand the container for the MistyLook theme, you might start with something like this and adjust the numbers until you like how it looks:

#container {
	width: 958px;
}

#content-main {
	width: 73%;
}

#sidebar {
	width: 24%;
}

1. My main site is http://www.burnerprep.com. Can I edit the header and footer css of my WordPress blog theme, MistyLook, to give it the appearance of my main website (the categories on the sides and the menu on top).

2. How can I make my header linkable? Thank you.

.post-meta {
display: none;
}

I agree with Raincoaster that you may want to add a text widget to your sidebar with contact details, or add a contact page, rather than add it to the footer.

But, to add to your footer, I believe the following will work for you:

#copyright {
content: "This is your contact details.";
}

You will have to wait until staff reply with the code you require. There is no more volunteer support for CSS. As it's a long weekend, it may take a day or so.

I keep trying to edit it, but have not been able to.