/* 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: 100px;
	background: #6D5C78 url(images/logo1.gif) no-repeat;
}

#address {
	float:right;
	font: 11px 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;
	/* remove comments to see border around the main area
	border: 1px solid red; */
}

#sidebar {
	float: right;
	width: 34%;
	font-size: 85%;
	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;
}

/* padding/margins of main elements */

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

#address-content {
margin: 1em 1em 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: #919A74;
color: #fff;
float: left;
width: 100%;
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
*/


#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, #sidebar a:link {color: #6D5C78}

#address a {color: #FFFFFF;}

/* Headers and typography */

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

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

.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;
}

/* this class creates a big drop cap */

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

/* color scheme 2 */

/*to use, change the body tag to <body class="cs2"> */

.cs2 #wrapper {
	width: 100%;
    background: url(images/bkg-slide-cs2.gif) repeat-y 66% 0px;
}


.cs2 #head {
	height: 100px;
	background: #585E14 url(images/logo-cs2.jpg) no-repeat;
}
.cs2 .drop {color: #585E14}

.cs2 #navcontainer, .cs2 #navcontainer ul, .cs2 #navcontainer ul li a, .cs2 #footer {
	background-color: #6D5C78;
	font-family: Georgia, "Times New Roman", Times, serif;
	text-transform: lowercase;
}

.cs2 #navcontainer ul li a:hover {
background-color: #8A7598;
}

.cs2 #selected a:link, .cs2 #selected a:visited, .cs2 #selected a:hover  {
background-color: #8A7598;
}

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

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

.cs2 #footer li a:hover {
color: #D4C690;
}

body.cs2  {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}

/* switch columns */

/* to use, change the body tag to <body id="SM"> */

#SM #main {float: right}
#SM #sidebar {float: left}
#SM #wrapper { background: url(images/bkg-slideR.gif) repeat-y 34% 0px;}