/* CSS for the Chapel of the Cross Music Site 2.0
 	Created by Nathaniel Quinn
	http://quinnart.net/blog
	COLORS:
	BURNT ORANGE: #cc6633
	BURNT UMBER: #663300
	light beige: #ffffcc
	
	orange footer: 669933
	footer text: 833d00
	
	HYMN MENU navigation:
down state:
text: white
button: black

over state:
text: black
button: white

on state: 
text: black
button: f9e6b3
	*/
* 				{ margin: 0; padding: 0; }
html			{ overflow-y: scroll; }	

body			{
					font: 62.5% Georgia, "Times New Roman", Times, serif;
					background: url(../images/bodybg.jpg) top left repeat;
					} 

ul				{ list-style: none inside; }
p				{ font-size: 1.2em; line-height: 1.2em; margin-bottom: 1.2em; }
a				{ outline: none; }
a img			{ border: none; }


/* -------------UTILITIES!------ */

.floatleft		{ float: left; }
.floatright		{ float: right; }
.clear			{clear: both; }
.button:hover {
-moz-background-clip: border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#FF9900 none repeat scroll 0 0;
color:#673233;
}

.button {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
background:#ffffcc none repeat scroll 0 0;
border:1px solid #660000;
color:#673233;
padding:6px 8px;
}

/*           END UTILITIES   */

#container					{
 							margin: 0px auto; /* center the div*/
 							width: 960px;
							position: relative;
						}
						/* HEADER ELEMENTS */
										
#header                {
							 width:960px;
							 height:280px;
							 float:left;
							 background: url(../images/header_bg.png) no-repeat; 
							 background-repeat:no-repeat; 
							}
#header h1				{
							font-size: 32px;
							position: relative;
							top: 59px;
							left: 17px; 
							}
#header h2			{
	font-size: 11px;
	position: relative;
	top: 63px;
	left: 18px;
	letter-spacing: .3em;
}

	
#logo
						{
							width: 180px;
							height: 160px;
							float: left;
							padding-left:3px;
							}
							
#church					{
							top: -10px;
							width: 140px;
							height: 128px;
							float: right;
							padding-right:48px;
							position: relative;
						}
	#church{
 	width:128px;
 	float:right;
	position: relative;
	}
 	
	#church_icon{
 		float:left;
		top: -10px;
		position: relative;
 	}
 
 	#church_info{
 		float:left;
 		color:#FFFFFF;
 		font-family:Arial, Helvetica, sans-serif;
 		font-size:11px;
 	}
 
 	#church_info span, #church_info span a{
 		color:#000000;
		text-decoration: none;
 	}
	
	#church_info span a:hover, #church_info a:hover, #church_info a:hover{
		text-decoration: none;
		color: #660000;
		}
 
 	#church_info a{
 		color:#000000;
 		font-family:Arial, Helvetica, sans-serif;
 		font-size:11px;
		text-decoration: none;
 	}

/*    TOP NAVIGATION */
#topnav{
 	width: 620px;
	height: 38px;
 	float:left;
 	padding-top:0px;
	padding-left: 159px;
	position: relative;
	top: -27px;
}
 
 #topnav li			{
						display:inline;
						margin:0px;
						padding:0px;
					 }
 
 #topnav li a     { 
					padding-left:15px;
					padding-bottom:30px;
				 
					color: #660000; 
					font-family:Georgia, "Times New Roman", Times, serif;
					font-size:20px;
					font-style:italic;
					text-decoration: none;
				 }
				 
 #topnav li a:hover
					 {
						color: #FF9900;
						background-image:url(../images/clef.png);
						background-position: 0px 0%;
						background-repeat:no-repeat;
						text-decoration: none; 
					}
							
#inner-wrapper			{	 
							width: 960px;
							float: left;
							min-height: 1400px;
							background:url(../images/page_body_bg.png) repeat-y;
							}
/**************HYMN MENU *************/


#leftsidebar			{
							width: 200px;
							height: 600px;
							float: left;
							margin-left: 38px;	
							padding-left:29px;
							position: relative;
							background:url(../images/hymn_menu.jpg) no-repeat;
						}	
.menu 
						{
						left: 70px;
						margin-left: 50px;
						z-index:1;
						font-size:16px;
						margin:56px 0 50px 0px; /* this page only */
						}

/* remove all the bullets, borders and padding from the default list styling */
.menu ul {
padding:0;
margin:0;
list-style-type:none;
width:150px;
font-size: 16px;
}
/* hack for IE5.5 */
* html .menu ul {margin-left:-16px; margin-left:0;}
/* position relative so that you can position the sub levels */
.menu li {
position:relative;
background: #000000;
height:33px;
width: 131px;
text-align: center;
text-transform: uppercase;
margin-bottom: 10px;
color: #FFFFFF;
margin-left: 1px;
font-size: 14px !important;
z-index: 1;
}

/* get rid of the table */
.menu table {position:absolute; border-collapse:collapse; top:0; left:0; z-index:100; font-size:1em;}

/* style the links */
.menu a, .menu a:visited {
display:block; 
text-decoration:none;
height:31px;
line-height:28px;
width:131px;
color:#FFFFFF;
text-align: center;
text-transform: uppercase;
font-size: 12px; 
}
/* hack for IE5.5 */
* html .menu a, * html .menu a:visited {background:#d4d8bd; width:150px; width:149px;}
/* style the link hover */
* html .menu a:hover {color:#000000; background:#ffffcc;}

.menu :hover > a {
color:#000000; 
background: #ffffcc;
}

/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul {
visibility:hidden;
position:absolute;
top:0;
left:130px; 
}
/* make the second level visible when hover on first level list OR link */
.menu ul li:hover ul,
.menu ul a:hover ul {
visibility:visible;
}

/* keep the third level hidden when you hover on first level list OR link */
.menu ul :hover ul ul{
visibility:hidden;
}
/* keep the fourth level hidden when you hover on second level list OR link */
.menu ul :hover ul :hover ul ul{
visibility:hidden;
}
/* make the third level visible when you hover over second level list OR link */
.menu ul :hover ul :hover ul{ 
visibility:visible;
}
/* make the fourth level visible when you hover over third level list OR link */
.menu ul :hover ul :hover ul :hover ul { 
visibility:visible;
}
.menu li {float:left;}

.sub {margin-left: 1px !important; 
				}				

#content				{
						 width: 360px;
						 float: left;
						 position: relative;
						 line-height: 1em;  
						 }

#content h3				{ font-family: Georgia, "Times New Roman", Times, serif; 
font-size: 24px;
						  line-height: 24px;
						  width: 360px;
						  padding-bottom: 10px;
						}
						
#content p				{ 
float: left;
position: relative;
width: 360px;
font-family: Georgia, "Times New Roman", Times, serif;
font-size:13px;
font-size-adjust: none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:18px;
margin:0 0 15px;
letter-spacing: 0.1em;
						  }
.entry{
 float:left;
 position: relative;
 padding-bottom:50px;
 margin: 0 0 20px; 
 background: transparent url(../images/clefbreak.png) no-repeat scroll center bottom;
}
 
 .entry h2{
 	width:360px;
 	color:#660000;
 	font-family:"Lucida Grande", Georgia, "Times New Roman", Times, serif;
 	font-style: normal;
 	font-size:24px;
	line-height:normal;
 }
 
 	.entry h2 a{
 		color: #660000;
 	}
 
 		.entry h2 a:hover{
 			color:#FFD869;
 		}

 .entry .preview_image{
 	float:left;
 	margin-right:10px;
 }
 
 	.entry .preview_image img{
 		width:200px;
 		height:200px;
 		border:1px solid #DBD9CC;
 	}
 
 		.entry .preview_image img:hover{
 			border:1px solid #FFC337;
 		}
 
 /*common*/
 .entry p{
 	color:#000000;
 	font-size:13px;
 	text-align:left;
 }				  
						 
/*   END MAIN CONTENT AREA STYLING */

#footer					
						{
					
							height: 350px;
							position: relative;
							-moz-background-clip:border;
							-moz-background-inline-policy:continuous;
							-moz-background-origin:padding;
		                    background: url(../images/procession.jpg) repeat-x scroll 0 0;
							background-color: #994400; 
							}
#inner_footer			{		
								height: 350px;
								margin: 0 auto;
								position: relative;
								width: 960px;
								background: url(../images/inner_footer.png) no-repeat scroll 0 0;
						}

/* RIGHT SIDEBAR */

#sidebar
			{
			float:right;
			padding-bottom: 15px;
			position: absolute; 
			right:-31px;
			top: 620px;
			width:336px;
			background:url(../images/sidebarbg.gif) repeat-y;
			min-height:1400px;
			}
					

#searcharea	
			{	right: 74px;
				top: -340px;
				padding-bottom: 20px; 
				position:relative;
				float: right;
				height: 75px; 
				}
.inputfield {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
background:##ffffcc none repeat scroll 0 0;
border:1px solid #660000;
color:#660000;
height:15px;
padding:6px 7px;
width:175px;
}

#sidebar #newsevents_sidebar
			{
				width: 255px;
				top: -377px;
				position: relative;
				margin-bottom: 5px;
				z-index: 1;
				}
				
#sidebar h3	{
	-moz-background-clip:border;
	-moz-background-inline-policy:continuous;
	-moz-background-origin:padding;
	background:transparent url(../images/arrow_transparent.png) no-repeat scroll 0 0;
	height: 68px;
	position: relative;
	width:289px;
	float: left;
	right: -19px;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 16px;
	font-style: italic;
	color: #FFFFFF;
	text-align: left;
	text-indent: 5px;
	word-spacing: normal;
	margin-top: 0px;
}

#sidebar h3 a
	{
	text-decoration: none;
	color: #ffffff;
	padding-top: 5px;
	margin-top: 5px;
	
}
	 
#sidebar h3 a:hover
	{
	color: #FF9900;
	border-bottom:1px dotted #FF9900;
	padding-top: 5px;
	margin-top: 5px;	
	}
	
#sidebar ul{
 padding-left:30px;
 padding-top: 65px;
 padding-right: 30px;
 line-height: 1.2em;
 color: #663300;
 }
 

#sidebar ul li {
font-family: "Lucida Grande", Arial, Helvetica, sans-serif;
line-height: 1.2em;
letter-spacing: 0.1em;
font-size:12px;
margin-top: 0px;
}

#sidebar ul li a:hover {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#660000 none repeat scroll 0 0;
color:white;
}

#sidebar ul li a {
border-bottom:1px solid #CCCCCC;
display:block;
padding:10px;
}
#all-list-wrap {
margin:0 0 25px;
overflow: visible; 
}

#sidebar #listwrap		{ 
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0px 0 25px;
position:relative;
width:253px;
z-index:10000;
display: block; 
overflow: hidden;
}

#gallery_sidebar
				{
float:left;
position:relative;
}		

#sidebar #gallery_sidebar .gallerythumb {
	position: relative;
	right: -25px;
}

/*  FOOTER  */
#footer h4 {
color:#000000;
font-family:Georgia,Serif;
font-size:22px;
font-size-adjust:none;
font-stretch:normal;
font-style:italic;
font-variant:normal;
font-weight:normal;
line-height:normal;
margin:0 0 10px;
}
#footer h4 span {
font-family: Georgia, "Times New Roman", Times, serif; 
font-size:16px;
font-style:normal;
text-transform:uppercase;
}
#footer p {
color:#000000;
font-size:12px;
}
#footer ul {
margin:0 0 0 0px;
}
#footer li {
color:#000000;
font-size:12px;
margin:0 0 3px;
}
#footer a {
border-bottom:1px dotted #993300;
color:#000000;
}
#footer a:hover {
border-bottom:1px solid white;
color: #993300;
}
#footer #about-footer {
left:547px;
position:absolute;
top:150px;
width:300px;
text-align: right;
}
#projects {
left:10px;
position:absolute;
top:280px;
width:215px;
}
#nav {
left:410px;
position:absolute;
top:62px;
}

#footer_choirlist {
left:220px;
position:absolute;;
top:62px;
}

#organlist {
	font-family: "Lucida Grande", Geneva, Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-style: bold;
	line-height: 1.2em;
	font-weight: normal;
	font-variant: normal;
	text-transform: uppercase;
	text-decoration: none;
	display: block;
	list-style: url(none) none;
	position: relative;
}

/* NEWS WIDGET */
#news_container {
width: 300px;
position: relative;
margin: auto;
margin-top: 140px;

#widget {
overflow: hidden;
background: #e3e3e3;
padding: 1em;
border: 1px solid #c5c5c5;
height: 305px; /* You should adjust this height for your project. */
position: relative;
float: left;
min-width: 310px;
-moz-border-radius-bottomright: 10px;
}

#widget img {
float: left;
border: 1px solid white;
padding: .2em;
background: #d3d3d3;
margin-right: .5em;
width: 90px;
height: 90px;
}

#widget li {
clear: left;
overflow: hidden;
position: relative;
top: 0;
padding-bottom: 1em;
height: 96px; /* Change this to fit your needs. The plugin will access this value if you don't pass a parameter in when you call it. */
}