/* You can think of body as another wrapper tag, sometimes you have to */
/* edit the settings for it to look right.  margin-top makes sure that */
/* there's no white space at the top of the page.  margin-right/left:  */
/* auto; in Firefox centers the body tag.  In IE I use <center>.       */
body {
   margin-top: 0px;
   margin-right: auto;
   margin-left: auto;
}

/* In firefox you can set width on the body.  Evidentally we can't in IE */
/* as we found out.                                                      */
#wrapper {
   width: 750px;
}

/* You can say margin: 0px; so that there's no margin to the top/bottom/    */
/* right/left.  And it's also good to specify a height if there's an image. */
/* In CSS, you cannot have a relative height, like height: 100%; if one of  */
/* the ancestor tags does not have an absolute height.  In this case we     */
/* have body at 750px.                                                      */
#header {
   width: 100%;
   margin: 0px;
   height: 102px;
}

/* In this case, main is directly below header. */
#main {
   width: 100%;
}

/* When you want spacing of any kind, it's best to use margin or padding.       */
/* text-align: center; applies to all children of this tag, but it doesn't work */
/* when display: block; is an attribute, which it is by default on all <div>    */
/* tags.  So use it mainly for text.                                            */
#title {
   font-weight: bold;
   font-size: 12pt;
   font-family: Tahoma;
   color: darkred;
   text-align: center;
   margin-top: 20px;
   margin-bottom: 10px;
}

/* The vertical-align: top; applies to the content inside this .sectiontdL. */
/* Any tag can have this class and the style applies.                       */
.sectiontdL {
   width: 50%;
   border-right: 1px solid darkred;
   padding-right: 15px;
   vertical-align: top;
}

.sectiontdR {
   width: 50%;
   border-left: 1px solid darkred;
   padding-left: 15px;
   vertical-align: top;
}

.sectiontdC {
   vertical-align: top;
}

.sectionlink {
   background-color: darkred;
   margin-top: 7px;
   margin-bottom: 18px;
}

/* It's very, very handy to nest stuff like this and not have to create */
/* a new class.  So this says that every tag with class="name" directly */
/* under a tag with class="sectionlink" has this style.                 */
.sectionlink .name {
   text-align: center;
   margin-bottom: 2px;
}

.sectionlink .name a {
   color: white;
}

.sectionlink .description {
   text-align: justify;
   background-color: white;
   border-bottom: 3px solid darkred;
   padding-top: 1px;
   padding-bottom: 1px;
}

/* display: inline; says don't put a "carriage return before and  */
/* after me" like normal <div> tags have.  So anything before or  */
/* after it will automatically border right next to it.  If you   */
/* have the attribute float: left/right; the display: inline; is  */
/* implied, or it works like display: inline;  Any content around */
/* it will border right next to it.                               */
.bigq {
   display: inline;
   font-weight: bold;
   font-size: x-large;
   margin-right: 7px;
}

.question {
   text-align: left;
   border-top: 2px solid darkred;
   font-family: Tahoma;
   font-size: 10pt;
}

.biga {
   display: inline;
   font-weight: bold;
   font-size: x-large;
   margin-right: 7px;
}

.answer {
   text-align: left;
   margin-bottom: 15px;
   font-family: Tahoma;
   font-size: 10pt;
}

#copyright {
   margin-top: 10px;
   text-align: center;
   font-size: 7pt;
   font-family: Tahoma;
   color: black;
}

.lblTextBlack {
   font-size: 8pt;
   font-family: Tahoma;
   color: black;
}

.drgHeader {
   font-weight: bold;
   font-size: 9pt;
   color: white;
   font-family: Arial, Verdana, Helvetica, sans-serif;
}