/* GENERAL POSITIONING AND PADDING AND MARGINS */

/*** Overall here, make sure that you are using all of these styles. This stylesheet
seems fairly robust given how small the site is. This is one of the reasons I don't like templating
because it discourages minimalism and efficiency.  */

/* background-repeat defaults to full repeat, so specifying it here is redundant. */
body { margin:0px 0px 15px 0px; background-image:url(/images/body_bkg.gif); background-repeat:repeat; }

#container { width:815px; margin:0px auto; background-image:url(/images/container_bkg.gif); background-repeat:repeat-y; }

/* Background-position only takes pixel values as arguments. You can't say left 0px, or top 0px. You can only say 
0px 0px, etc. Also, since you are specifying 0 here, I'm not even sure it's necessary to have it in.

Also, you mispelled the word margin at the end, I am going to leave it incase it breaks your layout 
if I fix it :P */
#navigation { width:100%; height:41px; background-image:url(/images/top_bkg.gif); background-repeat:repeat-x; background-position:0px left; margine:0px auto; }

#navigation2 { width:815px; height:41px; margin:0px auto; background-image:url(/images/container_bkg.gif); background-repeat:repeat-y; text-align:center; } 

#header {width:800px; margin:0px auto; }

#logo { float:left; }

#logo h1 { background:transparent url(/images/dm_logo.gif) no-repeat top left; width: 350px; height: 91px; margin:0px;}

#logo h1 span { display:none; }

#header-rightside { background:transparent url(/images/header-rightside.gif); background-repeat:no-repeat; width:450px; height:91px; float:left; }

#header-rightside-home { background:transparent url(/images/header-rightside-home.gif); background-repeat:no-repeat; width:450px; height:91px; float:left; }

#flashcontent { clear:both; margin:0px auto; width:800px; height:280px; }

#flashcontent2 { clear:both; margin:0px auto; width:770px; height:55px;}

#sidebar-left { float:left; margin:0px 20px 50px 0px; }

#content { float:left; width:770px; background:transparent url(/images/content_bkg.jpg) no-repeat bottom left; background-color:#204883; margin:0px 0px 0px 22px; min-height:200px; vertical-align:top;}

#content-left { float:left; width:320px; margin-left:45px; background-image:url(/images/content-left_seperator.jpg); background-position:top right; background-repeat:no-repeat; }

#media-left { float:left; width:200px; margin: 20px 0 20px 45px; background-image:url(/images/content-left_seperator.jpg); background-position:top right; background-repeat:no-repeat; }

#media-right { float:left; width:360px; margin-left:10px; }

.left{float: left; width: 20%; margin-top: 10px; margin-bottom: 20px;}

.right{float:right; width: 80%; margin-top: 40px;}

#content-right { float:left; width:320px; margin-left:20px; }

#main-column { float:left; width:660px; margin-right:60px; margin-left:40px; padding-bottom:50px;  }

#footer { width:815px; height:77px; background: transparent url(/images/footer.jpg) bottom left no-repeat; clear:both;}

#copyright { width:100%; background: transparent url(/images/body_bkg.gif) repeat; padding-top:10px; text-align:center; }

/* END */

/*** Up to this point your formatting code seems fairly sound and solid. Just make sure you are actually using
all of those rules and remove unused ones */


/* HORIZONTAL NAVIGATION */

/* Totally do not use the :link rules. It is the bane of man. :link overules a standard <a> rule
which can be frustrating, and since we pretty much never (and should never) employ <a> tags that
aren't links to begin with, using the :link clause is actually sort of a pain. I hope I am explaining 
this right. Probably not, *sigh* :P */

#navigation2 a:link, #navigation2 a:visited ,#navigation2 a:hover { border:0px; }


/* END */


/* TEXT/FORMATTING STUFF */

.content a { color:#ffab03; text-decoration:underline; }

a:link, a:visited{ color:#ffab03; text-decoration:underline; }

a:hover { color:#ffab03; text-decoration:none; }

/* This might have been me in the SCCF stylesheet, I do not remember, but declaring font-family repeatedly
is the devil. Declare it once, wherever it suits you (usually the body) and keep it there. Font-family
is globally inherited. */

.content h1 { font-family:Arial, Verdana, sans-serif; font-size:20px; font-weight:normal; color:#fff; margin:0px 0px 10px 0px; }

.content h2 { font-family:Arial, Verdana, sans-serif; font-size:18px; font-weight:bold; color:#9cf9de; margin:0px 0px 5px 0px; }

.content h3 { font-family:Arial, Verdana, sans-serif; font-size:15px; font-weight:bold; color:#ffab03; margin:0px 0px 5px 0px; padding:0px; }

.content p { font-family:Arial, Verdana, sans-serif; font-size:12px; color:#fff; margin-top:10px; margin-bottom:10px; vertical-align:top; text-align:left; }

.content { font-family:Arial, Verdana, sans-serif; font-size:12px; color:#fff; margin-top:10px; vertical-align:top; }

/* Declaring a global img { border:0px; } is preferable. I cannot think of one instance in a year
that I've needed borders on images. Also, try to avoid "none" unless there is not a numeric equivalent.
0px is much cooler, all the cool kids are doing it. Are you a cool kid? I thought so */

#content-left img { margin-right:10px; border:none; }

#content-left p { margin-left:125px; }

#content-right img { margin-right:10px; border:none; }

#media-right ul {list-style:none; margin-top: 15px;}

#media-right ul li{margin-bottom: 5px;}

#media-right ul li i{font-size 14px; font-weight: bold;}

.padding { padding:0px 20px 10px 0px; border:none; }

hr { border-top:1px dotted #386d83; border-bottom-width:0px; border-left-width:0px; border-right-width:0px; height:1px; clear:both; display:block; margin:10px 0 10px 0; }



/* BOXES */

#sidebar-left h3 { color:#fff; font-family:Arial; font-weight:bold; font-size:14px; background-image:url(/images/sidebar-left_header_bkg.gif); background-color: #5b7dba; background-repeat:no-repeat; width:211px; height:15px; background-position:top left; padding-left:24px; padding-top:14px; margin:0px; }

#sidebar-left .sidebarcontent { min-height:63px; width:191px; font-family:arial; color:#000; font-size:12px; padding:0px 22px 15px 22px; margin:0px; background-color:#5b7dba; }

#sidebar-left img { padding:0px; margin:0px; text-align:left; }

#sidebar-left .sidebarfooter { background-image:url(/images/sidebar-left_footer_bkg.gif); background-repeat:no-repeat; width:235px; height:13px; margin:0px;}

#blockquote { background-color:#0d3268; float:left; margin-top:20px; margin-left:90px; width:468px; min-height:200px; }

#blockquote .header { background: url(/images/blockquote_header_bkg.gif) no-repeat top left; width:468px; height:17px; padding:0px; margin:0px; display:block; }

#blockquote .content { padding:0px 30px 0px 30px; color:#FFFFFF; font-size:12px; font-family:Arial, Helvetica, sans-serif; margin:0px; vertical-align:top; text-align:left;
}

#blockquote h1 { font-family:Arial, Verdana, sans-serif; font-size:18px; font-weight:bold; color:#fff; margin-bottom:5px; }

#blockquote h2 { font-family:Arial, Verdana, sans-serif; font-size:15px; font-weight:bold; color:#9cf9de; margin-bottom:1px; }

#blockquote p { font-family:Arial, Verdana, sans-serif; font-size:12px; color:#fff; float:none; }

#blockquote .footer { background: url(/images/blockquote_footer_bkg.gif) no-repeat bottom left; width:468px; height:17px; padding:0px; margin:0px; border:none; }

#blockquote2 { background-color:#0d3268; float:left; margin-top:20px; margin-left:40px; margin-bottom:40px; width:610px;  }

#blockquote2 .header { background: url(/images/blockquote2_header_bkg.gif) no-repeat top left; width:610px; height:19px; padding:0px; margin:0px; }

#blockquote2 .content { color:#FFFFFF; margin:0px; vertical-align:top; text-align:left;}

#blockquote2 .footer { background: url(/images/blockquote2_footer_bkg.gif) no-repeat bottom left; width:610px; height:19px; padding:0px; margin:0px; }


/* END BOXES */

/* Up to here things still look pretty good. I noticed you are using a lot of text-align rules, is there a reason?
I'm sure I can help you out there because you shouldn't need that many */

#footer p { margin-left:23px; padding:0px;}

#copyright p { font-family:Arial, Verdana, sans-serif; font-size:10px; color:#b3a99b; vertical-align:top; }

#copyright a { color:#b3a99b; text-decoration:underline; }

#copyright a:hover { color:#b3a99b; text-decoration:none; }

#spirals { background-image:url(/images/spirals.gif); height:33px; width:770px; margin-bottom:40px; display:block; }

.form td { border-bottom:1px dotted #386d83; border-top-width:0px; border-left-width:0px; border-right-width:0px; height:1px;  }

.form th { border:0px; }

.fields { width:200px;  font-family:Arial, Verdana, sans-serif; font-size:11px; color:#17335d;}

.form1 { padding: 10px 10px 10px 0px; text-align:left; }

.form2 {  padding: 10px 0px 10px 0px; text-align:left; }

.last { padding: 10px 0px 10px 0px; text-align:right; }

/* I'm not sure what's up here. Is this like a secondary link class? We will talk about this one I guess */

.button { background-color:#ffab03; font-family:Arial, Verdana, sans-serif; font-size:13px; color:#825702; border:0px; padding:4px; text-decoration:none; font-weight:bolder; }

.button:link { background-color:#ffab03; color:#825702; border:0px; padding:4px; text-decoration:none; font-weight:bolder; }

.button:visited { background-color:#ffab03; color:#825702; border:0px; padding:4px; text-decoration:none; font-weight:bolder; }

.button:hover { background-color:#ffcf6e; color:#825702; border:0px; padding:4px; text-decoration:none; font-weight:bolder; }

.button:active { background-color:#ffab03; color:#825702; border:0px; padding:4px; text-decoration:none; font-weight:bolder; }

/* END */