/*
Company:	The Palmetto Opera
File:		main.css - This contains all the main styles for the website.

All the styles are separted into the following groups:
Global Browser Reset - this is handled by the reset-fonts.css file from YUI
HTML, Body - for the html and body tags
Layout - styles that define the layout of the site
Modules - styles for content modules
Common Text Styles - Styles for text
Default Headings - headings like h1, h2, etc
Default Lists - unordered and ordered lists
Nav - navigation bar
Forms - html forms
Default Links - links
Misc - anything that doesn't fit elsewhere
*/

/* @group HTML, Body */
html {
	background: #655F4F;
}
body {
	font-family: Tahoma, Geneva, Verdana, sans-serif;
	line-height: 1.8;
}
/* @end */

/* @group Layout */
/* Head */
#hd {
	background: #fff url('../images/bg.gif') repeat-x;
	padding: 45px 0 0 0;
}

#hd .contents {
	border-bottom: 1px solid #E0DFDC;
}

	/* Logo */
	#logo {float: left; margin: 0;}

/* Body */
#bd {
	background: #fff;
	color: #655e50;
	padding: 25px 35px;
}

/* Footer */
#ft {
	background: url('../images/bg-footer.jpg') repeat-x top;
	color: #fff;
	font-size: 77%;
	padding: 30px 0 40px 0;
}

#ft .contents {
	background: url(../images/ft-o.png) no-repeat 50% 0;
}

#ft a:link, #ft a:visited {color: #aefcc0; font-weight: normal; text-decoration: none;}
#ft a:hover, #ft a:active {text-decoration: underline;}

#ft a.design:link, #ft a.design:visited {color: #fff; font-weight: normal; text-decoration: none;}
#ft a.design:hover, #ft a.design:active {text-decoration: underline;}

	#ft address {float: left; font-style: normal;}
	#ft p {float: right;}
/* @end */

/* @group Modules */
/* Images */
.images {margin: 0 0 10px 0; overflow: hidden; width: 100%;}

	/* Main */
	.main {
		float: right;
		width: 530px;
	}
	
	.main-pad {
		margin-left: 15px;
	}
	
	.main p {font-size: 108%;}
	
	/* Side */
	.side {
		float: left;
		overflow: hidden;
		padding: 0 20px 0 0;
		width: 350px;
	}
	
	.side h2 {margin: 1em -20px 1.6em 0; position: relative; width: 370px;}
	
	/* Events */
	.events {margin: 0;}
	.events li {
		font-size: 93%;
		list-style: none;
		line-height: 1.5;
		margin: 0 0 15px 0;
		overflow: hidden;
		width: 100%;
	}
	
	.events img {
		border: 5px solid #C6D7BB;
		float: left;
	}
	.events a:hover img {border-color: #E5E9AF;}
	
	.events .info {float: right; padding: 0 20px 0 0; width: 160px;}
	.events .info-eventspage {padding: 0 20px 0 16px; width: 300px;}
	.events .date {display: block; margin-bottom: 8px;}
	.events .title {display: block; margin-bottom: 8px; font-style: italic}
	.events p {margin: 0 0 8px 0;}
	
	.events .more {
		background: url('../images/ico-more.gif') no-repeat center left;
		padding: 0 0 0 15px;
	}

/* @end */

/* @group Common Text Styles */
	
/* @end */

/* @group Default Headings */
h2 {
	border-bottom: 3px solid #655F4F;
	font-family: Futura, 'Century Gothic', AppleGothic, sans-serif;
	font-size: 153.9%;
	font-weight: normal;
	line-height: 1.2;
	margin: 1em 0 1.3em 0;
	padding: 0 0 13px 15px;
	text-transform: uppercase;
}

/* @end */

/* @group Default Lists */
	
/* @end */

/* @group Nav */
#nav {float: right; padding: 105px 0 0 0;}
#nav ul {list-style: none; margin: 0;}

#nav ul li {
	float: left;
	list-style: none;
	margin: 0;
}

#nav a:link, #nav a:visited {
	background-position: top center;
	background-repeat: no-repeat;
	border-bottom: 3px solid #fff;
	display: block;
	float: left;
	height: 32px;
	overflow: hidden;
	padding: 0 15px 10px 15px;
	text-indent: -9999em;
}
#nav .active a:link, #nav .active a:visited,
#nav a:hover, #nav a:active {border-color: #655F4F;}

#nav .active a:link, #nav .active a:visited,
#nav ul a:hover, #nav ul a:active {background-position: center -32px;}

	/* Individual Buttons */
	#nav-opera101 a {background-image: url('../images/nav-opera.gif'); width: 92px;}
	#nav-about a {background-image: url('../images/nav-about.gif'); width: 82px;}
	#nav-events a {background-image: url('../images/nav-events.gif'); width: 54px;}
	#nav-donate a {background-image: url('../images/nav-donate.gif'); width: 63px;}
	#nav-contact a {background-image: url('../images/nav-contact.gif'); width: 65px;}
	#nav-puccini a {background-image: url('../images/nav-puccini.gif'); width: 136px;}
/* @end */

/* @group Forms */
	
/* @end */

/* @group Default Links - link visited hover active */
a:link, a:visited {
	color: #779695;
	font-weight: bold;
	text-decoration: underline;
}
a:hover {
	text-decoration: none;
}
/* @end */

/* @group Misc */
.clear {
	clear: both;
}
.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

.contents {margin: 0 auto; width: 900px;}
.contents:after {
	clear: both;
	content: ".";
	display: block;
	height: 0;
	visibility: hidden;
}

.left {float: left;}
.right {float: right;}
/* @end */