/* CSS Document */

* {font-family:"Trebuchet MS", "Arial Narrow", Arial, Helvetica, sans-serif; margin:0; padding:0; position:relative;}

/* Start Commented Backslash Hack - an effort to counteract the IE Peekaboo Bug */
* html #container {height:1%;}
* html #topmenu {height:1%;}
* html #testimonial {height:1%;}
* html #content {height:1%;}
* html #column_left {height:1%;}
* html #column_right {height:1%;}
* html #footer {height:1%;}
/* End Commented Backslash Hack */

/* Basically just background styling for the page */
body {background: #7c8ebd url(images/layout/bg_gradient.jpg) repeat-x;}

/* Box containing everything else */
#container {width:700px; border:1px solid #333365; border-top:none; background-color:#7c8ebd; margin-left:auto; margin-right:auto; text-align:center; position:relative;}

/* Creates 2 column layout without using tables */
#column_left {float:left; width:175px; position:relative;}
#column_right {float:left; width:515px; position:relative;}

/* Styling for main left menu */
#mainmenu {text-align:right; background:url(images/layout/testim_top.jpg) no-repeat left bottom; padding-bottom:20px;}
#mainmenu ul {padding:10px 0; list-style:none;}
#mainmenu li {background:url(images/layout/menubutt.gif) no-repeat; height:32px; padding-right:7px; padding-top:6px; margin-bottom:0px;}
#mainmenu a:link, #mainmenu a:visited {font-size:.85em; text-transform:uppercase; color:#c03933; text-decoration:none; font-weight:bold; letter-spacing:-.05em;}
#mainmenu a:hover, #mainmenu a:active {font-size:.85em; text-transform:uppercase; color:#000032; text-decoration:none; font-weight:bold; letter-spacing:-.05em;}

/* Because the testimonial required three background images, I placed the top one in the div above it, (positioned at the bottom of that div) the repeating one as the background of this div, and the bottom one as the background of the 'name' class, which would appear at the bottom of the box. Only one paragraph can be given the class of 'name' otherwise there will be two bottom bg images */
#testimonial {background:url(images/layout/testim_bg.jpg) left top repeat-y; text-align:left; width:170px; padding:0; margin:0;}
#testimonial p {font-family:"Times New Roman", Times, serif; font-style:normal; color:#fff; font-weight:normal; font-size:.9; padding:0 28px 7px 17px; line-height:1.09; width:80%;}
#testimonial .name {background:url(images/layout/testim_bottom.jpg) left bottom no-repeat; padding-bottom:25px; font-weight:bold;}

/* This is the styling for the top menu, 'FAQ,' 'Home,' etc */
#topmenu {text-align:right; margin-top:10px; position:relative;}
#topmenu ul {list-style:none; background:url(images/layout/content_top.jpg) right bottom no-repeat; padding-bottom:25px; padding-right:5px;}
#topmenu li {display:inline; color:#fff; font-size:.75em; letter-spacing:-.01em;}
#topmenu a:link, #topmenu a:visited {text-decoration:none; color:#fff; padding:0 1px; font-weight:bold;}
#topmenu a:hover, #topmenu a:active {text-decoration:underline; color:#fff; padding:0 1px; font-weight:bold;}

/* Styling for the main content area - had to use a trick similar to the one used with the testimonial box in order to use three background images (top, repeating, bottom) */
#content {text-align:left; background:url(images/layout/content_bg.jpg) right top repeat-y; padding:5px 25px; color:#fff;}
#content h1 {font-size:1.1em; padding-bottom:10px; text-transform:uppercase;}
#content h2 {font-size:1em; padding-bottom:10px; padding-top:15px;}
#content h3 {font-size:.9em; padding-bottom:10px; padding-top:15px}
#content h4 {font-size:.85em; padding-bottom:5px; padding-top:10px; font-weight:bold; margin-left:20px;}
#content p {font-size:.8em; padding-bottom:10px; padding-top:5px; line-height:1.3em; letter-spacing:-.003em; margin-left:20px;}
#content a:link, a:visited {color:#000032; text-decoration:underline;}
#content a:hover, a:active {color:#ccccfe; text-decoration:none;}
#content ul {margin:5px 10px 5px 50px; list-style:square;}
#content ol {margin:5px 10px 5px 60px; list-style:decimal;}
#content li {font-size:.8em; color:#fff;}
#content img {float:right; border:1px solid #666; margin:5px; padding:3px; background-color:#fff; position:relative;}
#content address {margin-left:50px; font-size:.8em; font-style:italic; margin-bottom:10px;}
#content sup {font-size:.7em;}
#content blockquote {font-size:.9em; margin:10px 10px -5px 10px; line-height:1.0em;}

/* Footer styling */
#footer {text-align:right; background:url(images/layout/content_bottom.jpg) right top no-repeat; padding-top:22px; margin-top:-1px; padding-right:3px; position:relative;}
#footer p {font-size:.7em; color:#fff;}
#footer a:link, #footer a:visited {text-decoration:underline; color:#ccccfe;}
#footer a:hover, #footer a:active {text-decoration:none; color:#fff;}