body {
	margin: 0px;
	font-family: Georgia, "Times New Roman", Times, serif;
	padding: 0px;
}

/* main elements */
/* Here is a GREAT trick from Pixy (http://wellstyled.com/css-2col-fluid-layout.html)
This wrapper div has a background image that's 2000 pixels wide. Our main column (#main) is 64%
wide. There's about 2% gap between our columns. So, about 66% is white. 66% of 2000 is 1320. The 
background image is white for 1319 px. There is a 1px dark grey
line at 1320. That's what's making the vertical rule. The rest is white. The whole thing is 
only 10px in height. We instruct the wrapper div to horizontally position the image at 66%, 
and tile vertically. This causes the page to "slide" depending on the width of the browser
window. This solves the annoying problem of columns that are of unequal width. Yay! 
To see exactly where the vertical line is going to be, put borders back in around the main and 
sidebars. You can goof around with both the image and or the percentages in the style sheet to get 
things absolutely perfect. Our example is awfully close.
*/

#wrapper     { width: 100%; background-image: 
               url(images/back-slide1.gif); 
               background-repeat: repeat-y; background-attachment: scroll; 
               background-position: 66% 0px }

#head        { height: 100px; background-color: #CC6666;
			background-image: url(images/iiq.gif);
			background-repeat: no-repeat; background-attachment: scroll; 
               background-position: 0% ;
			}
#address {
	float:right;
	font: 8px Verdana, Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	}

#navcontainer {
margin: 0;
padding: 0;
float: left;
width: 100%;
background-color: #919A74;
}

#main {
	float: left;
	width: 64%;
	margin: 0;
	padding: 0;
}

#sidebar {
	float: right;
	width: 34%;
	font-size: 80%;
	margin: 0;
	padding: 0;

}

#footer {
	clear: both;
	border-top: 0px solid #4D0365;
	margin: 0;
	padding: 5;
	text-align: center;
	background: #FFCC99;
	font: 11px Verdana, Arial, Helvetica, sans-serif;
}

/* padding/margins of main elements */

#main-content, #sidebar-content {
	padding: 0.5em 2em;
}

#address-content {
margin: 2em 0 0 0;
}

/* Navigation  and footer formatting */

/* This is an example of taking an unordered list and turning it into a navbar. Go see the
step-by-step tutorial at http://css.maxdesign.com.au/floatutorial/. See Tutorial 6. See also
the Listmatic section at http://css.maxdesign.com.au/listamatic/index.htm for tone of examples.
This one was lifted directly from the site...all I did was change the colors!) */

#navcontainer ul {
margin: 0;
padding: 0;
list-style-type: none;
background-color: #CC6666;
color: #fff;
float: left;
width: 100%;
font-size: 12px;
font-weight: none;
font-family: arial, helvetica, sans-serif;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
}

#navcontainer ul li { display: inline; }

#navcontainer ul li a
{
padding: 0.2em 1em;
background-color: #919A74;
color: #fff;
text-decoration: none;
float: left;
border-right: 1px solid #fff;
}

#navcontainer ul li a:hover {
background-color: #77775B;
color: #fff;
}

/* by creating this ID, we can apply it to the nav item of the current page, to give some 
extra visual feedback to our user. It contains the same rules as our hover state. */

#selected a:link, #selected a:visited, #selected a:hover  {
background-color: #77775B;
color: #fff;
}

/* by adding these rules, we can specify the "selected" page in the BODY tag. */

body#item1 #navcontainer li#one a, 
body#item2 #navcontainer li#two a,
body#item3 #navcontainer li#three a,
body#item4 #navcontainer li#four a,
body#item5 #navcontainer li#five a,
body#item6 #navcontainer li#six a {
background-color: #77775B;
color: #fff;
}

/*	To use, change the nav code in the page from:
<div id="navcontainer">
<ul>
<li id="selected"><a href="#">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
<li><a href="#">Item six </a></li>
</ul>
</div>

To:

<div id="navcontainer">
<ul>
<li id="one"><a href="#">Item one</a></li>
<li id="two"><a href="#">Item two</a></li>
<li id="three"><a href="#">Item three</a></li>
<li id="four"><a href="#">Item four</a></li>
<li id="five"><a href="#">Item five</a></li>
<li id="six"><a href="#">Item six </a></li>
</ul>
</div>

and, in the <body> tag, use <body id="item1"> to specify that Item 1 is the current page
*/


#navcontainervertical { width: 150px; }

#navcontainervertical ul
{
margin-left: 0;
padding-left: 0;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
}

#navcontainervertical a
{
display: block;
padding: 3px;
width: 150px;
color: #919A74;
font-size: 12px;
font-weight: bold;
border-bottom: 1px solid #919A74;
}

#navcontainervertical a:link, #navlist a:visited
{
text-decoration: none;
}

#navcontainervertical a:hover
{
background-color: #919A74;
color: #fff;
}



#navcontainershort ul {
margin: 0;
padding: 0;
list-style-type: none;
background-color: #ffffff;
color: #919A74;
float: left;
width: 100%;
font-size: 12px;
font-weight: bold;
font-family: arial, helvetica, sans-serif;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
}

#navcontainershort ul li { display: inline; }

#navcontainershort ul li a
{
padding: 0.2em 1em;
background-color: #ffffff;
color: #919A74;
text-decoration: none;
float: left;
border-right: 1px solid #fff;
}

#navcontainershort ul li a:hover {
background-color: #77775B;
color: #fff;
}



#footer ul {
padding: 5px;
margin: 0;
list-style-type: none;
white-space: nowrap;
}

#footer li { 
display: inline; 
margin-right: 1.5em;
}

#footer li a {
color: #fff;
}

#footer li a:hover {
color: #990000;
}


/* Links */

#main a:link {color: #002EB8;	text-decoration: none;} 
#main a:hover {color: #002EB8; text-decoration: underline  ; } 


#address a {color: #FFFFFF;	text-decoration: none;  }
#address a:hover {color: #FFFFFF;	text-decoration: underline;  }

#footer a:link {color: #002EB8;	text-decoration: none;} 
#footer a:hover {color: #002EB8; text-decoration: underline  ; } 

/* Headers and typography */

#sidebar h1, #main h1 {
	font-size: 2em;
	font-weight: bold;
	color: #CC6666;
}

#sidebar h2, #main h2 {
	font-size: 1.5em;
	font-weight: bold;
	color: #919A74;
}

#sidebar h3, #main h3 {
	font-size: 1.25em;
	font-weight: bold;
	color: #B8B83D;
}

#sidebar h4, #main h4 {
	font-size: 1.000em;
	font-weight: bold;
	color: #99996C;
}

.callout {
	color: #990000;
	margin: 0px 0px 12px 12px;
	float: right;
	width: 25%;
	font-weight: bold;
	padding-left: 10px;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}

/* this class floats images to the right */

.imgR {
	float: right;
	margin: 0;
}

.imgC {
	float: center;
	margin: 0;
}



/* this class creates a big drop cap */

.drop {
	font-size: 1.em;
	color:#919A74;
	font-weight: bold;
	float: center;
	margin:0;
	
}

	
P
  {
    font-size:12px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    text-indent: 12px;
  }

ul
  {
	text-align: left;
	font-size: 12px;
	list-style-type:circle;
	font-family: Verdana, Arial, Helvetica, sans-serif;
  }


ol
  {
	text-align: left;
	font-size: 12px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
  }