/* @override 
	http://www.greenvillesymphony.org.clint.sandbox.dev.cyberwoven.local/css/home.css */

@charset "UTF-8";
/* ---------------------------------------------
Greenville Symphony Orchestra Screen Style Sheet
author: Cyberwoven
version:  2009.04
----------------------------------------------- */

* {margin:0; padding:0; }

body { font:normal 12px/16px Arial, Helvetica, sans-serif; color:#4d4b49; background:#e5dfd5 url(../img/bgstripes.gif) repeat; text-align:center; }


/* -- Reusables ------------------------------ */

.alt { position:absolute; left:-9999px; }
.clear {clear:both; display:block; overflow:hidden; width:0; height:0;}

/* -- Layout --------------------------------- */

.wrapper { min-width:960px; background:url(../img/bgwrapper.gif) no-repeat center top; position:relative; padding-right:0.5px; }
.container { width:960px; margin:0 auto; text-align:left; position:relative; }
#header { height:111px; }
	#header h1 { width:320px; height:111px; background:url(../img/h1logo.gif) no-repeat; text-indent:-9999px; float:left; }
	#header h1 a { display:block; width:320px; height:111px; background:url(../img/h1logo.gif) no-repeat; text-indent:-9999px; float:left; }
	.mainnav { width:620px; height:79px; background:url(../img/bgnav.gif) no-repeat; list-style:none; float:left; padding:32px 0 0 20px; }
	.mainnav li { display:inline; }
	.mainnav li a { display:block; height:57px; background:url(../img/nav.gif) no-repeat; text-indent:-9999px; float:left; }
	li.about a { width:134px; background-position: 0 0; }
	li.concerts a { width:171px; background-position: -134px 0; }
	li.support a { width:92px; background-position: -305px 0; }
	li.education a { width:203px; background-position: -397px 0; }
	
	li.about a:hover { background-position: 0 -57px; }
	li.concerts a:hover { background-position: -134px -57px; }
	li.support a:hover { background-position: -305px -57px; }
	li.education a:hover { background-position: -397px -57px; }
	
#sidebar { width:320px; height:389px; background:url(../img/bgsidebar.gif) no-repeat; float:left; overflow:hidden; }
#sidebar h2 { height:65px; background:url(../img/h2upcomingevents.gif) no-repeat; margin:0 0 19px 20px; text-indent:-9999px; }
	#events { height:270px; overflow:hidden; }
	#events ul { list-style:none; margin-left:20px; }
	#events ul li { font:bold 10px/10px Verdana, Arial, Helvetica, sans-serif; color:#a9c1a3; margin-bottom:18px; height:28px; }
	#events ul li a { font:normal 16px/18px Georgia, "Times New Roman", Times, serif; color:#7fec00; text-transform:uppercase; display:block; text-decoration:none; }
	#events ul li a:hover { color:#fff; }
	#sidebar h3 { width:320px; height:119px; }
	#sidebar h3 a { display:block; width:320px; height:119px; background:url(../img/ourbrochure.gif) no-repeat; text-indent:-9999px; }
	#sidebar h3 a:hover { background-position:bottom; }
	
#homeflash { width:640px; height:389px; float:left; /*background-image:url(../img/flashtemp.jpg);*/ }

.panel { width:280px; height:149px; padding:24px 20px 0; float:left; }
	.panel h4 { height:58px; margin-bottom:15px; }
	.panel h4 a { display:block; height:58px; text-indent:-9999px; }
	.panel p { text-align:right; }
		#brochure { background:url(../img/bgbrochure.gif) no-repeat 0 0; }
		#brochure:hover { background-position: 0 -173px; }
		#brochure h4 a { background:url(../img/h4brochure.gif) no-repeat top right; }
		#brochure h4 a:hover { background-position: bottom right; }
		#email { background:url(../img/bgemail.gif) no-repeat 0 0; }
		#email:hover { background-position: 0 -173px; }
		#email h4 a { background:url(../img/h4email.gif) no-repeat top right; }
		#email h4 a:hover { background-position: bottom right; }
		#guild { background:url(../img/bgguild.gif) no-repeat 0 0; } 
		#guild:hover { background-position: 0 -173px; }
		#guild h4 a { background:url(../img/h4CDs.gif) no-repeat top right; }
		#guild h4 a:hover { background-position: bottom right; }
		#program { background:url(../img/bgbrochure.gif) no-repeat 0 0; }
		#program:hover { background-position: 0 -173px; }
		#program h4 a { background:url(../img/h4program.gif) no-repeat top right; }
		#program h4 a:hover { background-position: bottom right; }
			
#footer { clear:both; padding:16px 20px 30px; font:normal 11px/14px Arial, Helvetica, sans-serif; color:#000; position:relative; }	#footer ul { width: 409px; margin: -20px auto auto; }	
#footer li { display: block; float: left; }	
/*.twitter a { display:block; width:29px; height:23px; background:url(../img/twittericon.gif) no-repeat; text-indent:-9999px; position:relative; top:-17px; left:450px; }	
.facebook a { display:block; width:23px; height:23px; background:url(../img/facebookicon.gif) no-repeat; text-indent:-9999px; position:relative; top:-40px; left:485px; }	*/

.twitter a, .facebook a, .flickr a, .youtube a {
	display: block;
	height: 24px;
	text-indent: -9999px;
	vertical-align: top;
	margin: 0 10px;
}

a:visited { color: #551a8b; }
a:focus { outline: none; }

/* Improve readability when focused and hovered in all browsers: people.opera.com/patrickl/experiments/keyboard/test */
a:hover, a:active { outline: 0; }


.twitter a:hover, .facebook a:hover, .flickr a:hover, .youtube a:hover {
	background-position: 0 bottom;
}


.twitter a {
	width: 79px;
	background: url(../images/social-twitter.png) left top;
}

.facebook a {
	width: 94px;
	background: url(../images/social-facebook.png) left top;
}

.flickr a {
	width: 69px;
	background: url(../images/social-flickr.png) left top;
}

.youtube a {
	width: 86px;
	background: url(../images/social-youtube.png) left top;
}

.cyberwoven { text-align:right; margin-top:-14px; }	.cyberwoven a { color:#000; text-decoration:none; }	.cyberwoven span { color:#e57427; }	.cyberwoven a:hover span { text-decoration:underline; }	#twitterbubble { width:148px; height:124px; position:absolute; top:-108px; left:435px; display:none; }	#facebookbubble { width:148px; height:124px; position:absolute; top:-108px; left:472px; display:none; }