/* This style sheet was created by Debra Weiss (info@drwdesign.com) for a CSS Workshop in October 2004 
for the Neon Guild (www.neonguild.org). It's a learning tool. Feel free to download and play with it.
Please don't make this actual site, charge a client for it, and pass it off as your own work!  */

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: url(images/bkg-slide.gif) repeat-y 66% 0px;
}

/* We're putting an image (the logo) as a background element in the head ID */

#head {
	height: 75px;
	background: #eae0cf;
	padding: 0em 2em;
}

#navcontainer {
margin: 0;
padding: 0;
float: left;
width: 100%;
background-color: #919A74;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
}

#main {
	float: left;
	width: 100%;
	margin: 0;
	padding: 0;
	/* remove comments to see border around the main area
	border: 1px solid red; */
}

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

#flashPlayer {
	float: right;
	margin-left: 1em;
}

#pic {
	margin-right: 1em;
}

/* padding/margins of main elements */

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

/* 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 0 0 2em;
padding: 0;
list-style-type: none;
background-color: #919A74;
color: #fff;
float: left;
width: 100% - 2em;
font-family: arial, helvetica, sans-serif;
border-left: 1px solid #fff;
}

#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: #8c916e;
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;
}

#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: #6D5C78}

#address a {color: #FFFFFF;}

/* Headers and typography */

#main h1 {
	font-size: 2em;
	font-weight: bold;
	color: #6D5C78;
}

#main h2 {
	font-size: 1.5em;
	font-weight: bold;
	color: #6D5C78;
}

/* this class floats images to the right */

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

/* this class floats images to the left */

.imgL {
	float: left;
	margin: 0;
}

/* this class creates a big drop cap */

.drop {
	font-size: 6em;
	color:#6D5C78;
	float: left;
	margin:0;
	padding-right: 6px;
	line-height: 80%;
	
}