/*

Theme Name: Night Fright Events

Theme URI: http://www.nightfrightproductions.com

Description: Night Fright Events Main Theme
Version: 1.0
Author: Allen Mackley
Author URI: http://www.thefathom.net
*/

/**************************GLOBAL STYLES*************************/

* {
padding: 0; 
margin: 0;  
outline: none; 
font-size: 100%;
line-height: 1;
font-weight: inherit;
font-style: inherit;
font-family: inherit;
vertical-align: baseline;
border-collapse: separate;
border-spacing: 0;
}

* :focus { outline: 0; }

img {border: none;} 



body {
background: black url("images/haunted_graveyard.jpg") no-repeat center center fixed;
font: normal normal normal 20px/normal 'Georgia', 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
color: #bebebe;
text-align: center;
}

a {text-decoration: none;}
a:link {color: #697cbc;}
a:hover {color: #464ef2;}
a:visited {color: #697cbc;}
a:active {color: #464ef2;}

.invisible {z-index: 3; opacity:0; filter:alpha(opacity=0);}

.photo_border {
	border: 10px solid #13192a;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;}

.center {margin: 0 auto; text-align: center;}
.clear {clear: both;}

/*Divs that fade to black on top and bottom of page*/

#transparency_blend_top {
	position: fixed; top: 0px;
	width: 100%; height: 124px;
	z-index: 1;
	background: transparent url("images/transparency_blend_top.png") repeat-x;
	/*border: 4px solid red;*/
}
#transparency_blend_bottom {
	position: fixed; bottom: 0px;
	width: 100%; height: 146px;
	z-index: 1;
	background: transparent url("images/transparency_blend_bottom.png") repeat-x;
	/*border: 2px solid yellow;*/
}

/*This goes underneath the main wrapper.  This is only for the background color.  The redundency is necessary because setting the main wrapper (below) with an opacity setting would make the text inside opaque as well, which I don't want.*/
#wrap {
	position: relative; 
	width: 960px; 
	margin:0 auto;
	border-left: 4px solid black;
	border-right: 4px solid black;
	background: url(images/transparent_block.png) repeat;
	/*border: 2px solid orange;*/
	overflow: hidden;
}
	#main_page {
		position: relative; top: 0px; left: 0px;
		width: 960px; height: 100%;
		/*border: 2px solid green;*/
		
	}		

/**************************HEADER SECTION********************/

#header {
    position: relative;
	margin: 0;
	top: 0px;
    width: 100%;
    height: 220px;
	text-align: center;
    /*border: 4px solid green;*/
} 

    /* LOGO */
    #logo {
		position: relative; top: 20px;
		width: 600px; height: 170px;
		margin: 0 auto;
		text-align: center;
		background: transparent url("images/logo.png") no-repeat top center;
		/*border: 2px solid red;*/
    }
	/*******************NAVIGATION MENU***************************/
	#nav {
		position: relative; top: 10px; left: 0px;
		width: 935px; 
		margin-left: 15px;
		text-align: center;
		padding: 0px;
		list-style-type:none;
		/*border: 2px solid yellow;*/
	}
	#nav li {display: inline;}
/************ALL NAV LINKS*************/	
	#nav li a {
		display: block; 
		height: 21px; 
		text-indent: -9999px; 
		background: url("images/menu.png");
		background-repeat: no-repeat;
		float: left;
	}
/**************HOME LINK***********/
	#nav li a.home_link {
		 background-position: 0px 0px;
		 width: 85px;}
	#nav li a.home_link:hover,  #nav li a.home_link:active
		{background-position: 0px -25px;}
	body#home ul#nav li a.home_link 
		{background-position: 0px -51px;}
/**************TICKETS LINK***********/	
	#nav li a.tickets_link {
		 background-position: -85px 0px;
		 width: 103px;}
	#nav li a.tickets_link:hover,  #nav li a.tickets_link:active
		{background-position: -85px -25px;}
	body#tickets ul#nav li a.tickets_link 
		{background-position: -85px -51px;}
/**************EVENTS LINK***********/
	#nav li a.events_link {
		 background-position: -193px 0px;
		 width: 117px;}
	#nav li a.events_link:hover,  #nav li a.events_link:active
		{background-position: -193px -25px;}
	body#events ul#nav li a.events_link 
		{background-position: -193px -51px;}
/**************GALLERY LINK***********/
	#nav li a.gallery_link {
		 background-position: -310px 0px;
		 width: 120px;}
	#nav li a.gallery_link:hover,  #nav li a.gallery_link:active
		{background-position: -310px -25px;}
	body#gallery ul#nav li a.gallery_link 
		{background-position: -310px -51px;}
/**************BLOG LINK***********/
	#nav li a.blog_link {
		 background-position: -428px 0px;
		 width: 87px;}
	#nav li a.blog_link:hover,  #nav li a.blog_link:active
		{background-position: -428px -25px;}
	body#blog ul#nav li a.blog_link 
		{background-position: -428px -51px;}
/**************DIRECTIONS LINK***********/		
	#nav li a.directions_link {
		 background-position: -512px 0px;
		 width: 153px;}
	#nav li a.directions_link:hover,  #nav li a.directions_link:active
		{background-position: -512px -25px;}
	body#directions ul#nav li a.directions_link 
		{background-position: -512px -51px;}
/**************CONTACT LINK***********/	
	#nav li a.contact_link {
		 background-position: -659px 0px;
		 width: 128px;}
	#nav li a.contact_link:hover,  #nav li a.contact_link:active
		{background-position: -659px -25px;}
	body#contact ul#nav li a.contact_link 
		{background-position: -659px -51px;}
/**************SPONSORS LINK***********/	
	#nav li a.sponsors_link {
		 background-position: -784px 0px;
		 width: 132px;}
	#nav li a.sponsors_link:hover,  #nav li a.sponsors_link:active
		{background-position: -784px -25px;}
	body#sponsors ul#nav li a.sponsors_link 
		{background-position: -784px -51px;}
		

/**********************FOOTER SECTION*********************/
#footer {
    position: relative; top: 0px; left: 0px;
    width: 960px; height: 130px;
	font-size: 14px;
	text-align: center;
    /*border: 2px solid blue;*/
}

	#footer li {float: left; display: inline;}
	#footer .profile_logout, #footer .register_login {
		position: absolute; bottom: 85px; left: 0px;
		width: 250px; height: 30px; 
		font-size: 20px;
		/*border: 2px solid red;*/
	}

	#footer .profile_logout{margin-left: 380px; color: #697cbc;}
	#footer .register_login{margin-left: 385px; color: #a90323;}

	.menu_bottom {
		position: absolute; bottom: 65px; left: 0px;
		margin-left: 128px; padding: 0px;
		height: 20px; 
		font-size: 15px;
		list-style-type: none;
		/*border: 2px solid blue;*/
		}
	.menu_bottom li {float: left; margin-left: 20px;} 
	.menu_bottom li.current_page_item a {
		color: #563cf3;
		text-decoration: underline;}

	.copyright {
		position: absolute; bottom: 42px; left: 0px;
		width: 100%;
		/*border: 2px solid yellow;*/
		}

	.powered_by {
		position: absolute; bottom: 20px; left: 0px;
		width: 100%;
	}

/***********************HOMEPAGE CONTENT**************************/	
/* BLURB */
#homepage_content {
	position: relative;
	max-width: 100%; height: 100%;
	/*border: 2px solid turquoise;*/
}

.border_hover {border: 8px solid black;}
.border_hover:hover {border: 8px solid #1a1e28;}
.border_hover:active {border: 8px solid #1a1e28;}

/* HAUNTS */

#front_page {
	position: relative; top: 0px;
	width: 930px; max-width: 930px; 
	font-size: 22px;
	text-align: justify;
	/*border: 2px solid white;*/
	padding: 0px 15px 0px 15px;
}

/**************************TICKETS PAGE*************************/



#ticket_link {text-align: center;}

#ticket_link:hover {color: white;}

#buy_tickets_online {

	position: relative; top: 10px;

	font-size: 20px;

}

#ticket_image {

	position: absolute; top: 80px; left: 150px;

	width: 665px; height: 297px;

	background-image: url("images/admission_ticket.gif");

	background-repeat: no-repeat;

	background-position: center top;

	overflow: hidden;

}



#ticket_image:hover {

	background-position: center bottom;

}



#ticket_prices {

	position: relative; top: 350px; 

	width: 920px; height: 350px;

	text-align: left;

	font-size: 24px;

	list-style-type: circle;

	padding: 0px 20px;

}

/**************************DIRECTIONS PAGE*************************/

.directions_page_wrapper {

	position: relative; top: 0px;

	width: 100%; height: 800px;

	/*border: 2px solid green;*/

}



.directions_to_hotel {

	position: absolute; top: 0px; left: 20px;

	width: 900px; height: 500px;

	text-align: center;

}



.hotel_front {

	position: absolute;

	top: 540px; left: 20px;

	width: 900px; height: 598px;

}



/***********************BLOG PAGE, SINGLE AND COMMENTS PAGES**************************/	

.blog_photo {
	text-align: center;
}

.post_snippet, .single_post {	
	max-width: 100%;
	color: white;
	padding: 5px 15px;
	overflow: hidden;
	/*border: 2px solid red;*/
	text-align: justify;
}

.post_snippet h2.blogpage, .single_post h2.blogpage {
	font-size: 34px; 
	font-family: 'istillknow'; 
	padding: 15px 0px 10px 0px;
	text-align: center;
	color: #a90323; 
	}

.post_snippet p.date {text-align: center; font-size: 30px; padding-bottom: 10px;}
.post_snippet p.text, .single_post div.text {text-align: justify; overflow: hidden;} /*font-size is taken from body*/

.single_post p.article_posted_on {text-align: center; margin-bottom: 5px;}	

h2.comments_title {font-family: 'romanantique';}

#respond {
	position: relative; 
	z-index: 10;  
}

#respond.comments_title h2 {font-family: 'romanantique';}

.comments_section li {
	margin:10px 0px; padding:8px;
	font-style:normal;
}

li.comment img.avatar {display:none}

.comment-bg, .comment-textarea-bg, .comments_section li  {
	background-color: #030614;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	opacity: 0.7; filter: alpha(opacity=70);
}

	

#comment_top {

	position: relative; top: 135px; 

	width: 600px; height: 370px;

	margin: 0 auto;

}	

	#comment_top.comment-bg input #author {width: 260px;}

	#comment_top.comment-bg input #email {width: 380px;}

	#comment_top.comment-bg input #url {width: 500px;}

	

		.comment-bg input, .comment-textarea-bg textarea {

			margin-left: 10px;

			width: 350px; 

			background: none; 

			border: none;

			font-size: 22px;

			color: white;

			/*border: 2px solid yellow;*/

		}



#comment_bottom {

	position: relative; top: 15px;

	width: 100%; height: 340px;

	margin: 0 auto;

	/*border: 2px solid blue;*/

}
	.comment-textarea-bg {width: 100%;}
		.comment-textarea-bg textarea {width: 940px;}
	
	#comment_bottom input {
		width: 150px;
	}

#comment  {overflow: auto; max-width: 100%;} 

/**************************GALLERY PAGE*************************/
/***Special invisible boxes used for the gallery page.  These boxes cover up the 

links for the dates underneith each gallery catagory.  The reason for these invisible boxes is so that the links will lie on top of the transparent blend PNG that is position at the top of the page.  ***/
	#gallery_box_links {
		position: absolute; left: 0px;
		width: 960px; height: 370px;
		z-index: 3;
		text-align: left;
		/*border: 2px solid turquoise;*/
	}	
		#gallery_haunt_links {
			position: absolute; top: 75px; left: 230px; 
			width: 500px; height: 60px;
			/*border: 2px solid orange;*/
		}

			#gallery_box_links #gallery_haunt_links .eachbig {
					position: relative;
					width: 120px; height: 60px;
					display: inline; float: left;
					cursor: pointer;
					/*border: 2px solid red;*/				}
			.haunt2009{background: url("images/2009.png") no-repeat center top;}
			.haunt2008{background: url("images/2008.png") no-repeat center top;}
			.haunt2007{background: url("images/2007.png") no-repeat center top;}
			.haunt2006{background: url("images/2006.png") no-repeat center top;}

		#gallery_box_links .event_links {
			position: absolute;
			width: 370px; height: 40px;
			/*border: 2px solid green;*/
		}
			.tothall {top: 175px; left: 55px;}
			.costumeball {top: 175px; left: 530px;}
			.pumpkinchunkin {top: 265px; left: 55px;}
			.harvestfestival {top: 265px; left: 530px;}
			.tothall .each, .pumpkinchunkin .each, 
			.costumeball .each, .harvestfestival .each
			{
				position: relative;
				width: 90px;
				height: 40px;
				z-index: 2;
				display: inline; float: left;
				cursor: pointer;
				/*border: 1px solid blue;	*/

			}
			.tothall2009, .pumpkinchunkin2009, .costumeball2009, .harvestfestival2009 {
				background: url("images/2009S.png") no-repeat center top;
			}
		    .tothall2008, .pumpkinchunkin2008, .costumeball2008, .harvestfestival2008 {
				background: url("images/2008S.png") no-repeat center top;
			}
			.tothall2007, .pumpkinchunkin2007, .costumeball2007, .harvestfestival2007 {
				background: url("images/2007S.png") no-repeat center top;
			}
			.tothall2006, .pumpkinchunkin2006, .costumeball2006, .harvestfestival2006 {
				background: url("images/2006S.png") no-repeat center top;
			}

/***Normal Styels for the rest of the gallery page***/	
	#years {
		position: relative; top: 0px; 
		width: 960px; height: 340px;
		text-align: center;
		margin: 0 auto;
		/*border: 1px solid turquoise;*/
	}
		#years img {cursor: pointer;}
		#years .dates {width: 380px; height: 40px;}
		#years .datesbig {width: 280px; height: 44px;}

	#carousel {
		position: relative; top: 30px;
		width: 100%; height: 120px;
		margin: 0 auto; 
		z-index: 4;
		/*border: 1px solid red;*/
	}

		#carousel_wrapper {
			position: absolute; top: 0px; left: 0px; /* the "left" attribute is required for IE compatibility*/
			width: 680px; height: 100px; min-height: 85px;
			overflow: auto; 
			margin: 0 140px;
			/*border: 2px solid blue;*/
		}

			#carousel_wrapper ul {
				position: absolute; top: 0; left: 0px;
				width: 15000px; height: 85px;
				margin: 0; padding: 0;
				list-style-image: none;
				list-style-position: outside;
				list-style-type: none;
				/*border: 2px solid orange;*/
				}

				#carousel_wrapper ul li {
					width: 65px; height: 65px;
					display: block;
					float: left;
					margin: 5px; 
					border: 5px solid #101a32;
					opacity: 0.6; filter: alpha(opacity=60);
				}
					.red_border {border: 5px solid #910303;}
					#carousel_wrapper ul li.empty {border: 5px solid transparent;}

	#arrow_left {
		position: absolute; top: -25px; left: 100px;
		width: 60px; height: 138px;
		display: block;
		cursor: pointer;
		z-index: 1;
		background: url(images/arrow-left.png) no-repeat 0 0;
		/*border: 1px solid white;*/
	}

	.arrow_left_hover {background: url(images/arrow-left-hover.png) no-repeat 0 0;}
	.arrow_right_hover{background: url(images/arrow-right-hover.png)no-repeat 0 0;}

	#arrow_right {
		position: absolute; top: -25px; right: 95px;
		width: 65px; height: 138px;
		display: block;
		cursor: pointer;
		z-index: 1;
		background: url(images/arrow-right.png) no-repeat 0 0;
		/*border: 1px solid white;*/
	}

	#loader {
		position: absolute; top: 670px; left: 435px;
		width: 100px; height: 100px;
		margin: 0 auto;
		opacity: 0.7; filter: alpha(opacity=70);
		/*border: 2px solid red;*/
		background: url(images/ajax-loader.gif) no-repeat center center;
		}

	#photos {
		position: relative;  top: 0px;
		width: 960px;
		margin: 0 auto; text-align: center;
		height: 640px;
		/*border: 2px solid white;*/
		}	

		#photos img {height: 500px;
					 border: 10px solid #101a32;
					 -moz-border-radius: 10px;
					 -webkit-border-radius: 10px;}

/**************************EVENTS PAGE*************************/

#events_list {
	text-align: justify;
	position: relative;
	width: 925px;
	height: 3200px;
	padding: 15px;
	line-height: 1.1;
	/*border: 2px solid red;*/
}
	#events_list .title {
		font-size: 24px;	
	}

	#symptoms {
		list-style-type: disc;
		padding-left: 50px;
	}
	
	.dropcap {
		float: left;
		padding-right: 10px;
		
	}

#events_list a:link{color: #a3b3e3;}
#events_list a:visited{color: #a3b3e3;}



/**************************DIRECTIONS PAGE*************************/

#directions_page_wrapper {
	position: relative; top: 0px;
	width: 100%; height: 1400px;
	/*border: 2px solid green;*/
}

#see_below {
	position: relative; top: 0px; left: 20px;
	width: 900px; height: 100px;
	text-align: justify;
}

#haunt_front_pic {
	position: relative; top: 0px; left: 20px;
	width: 900px; height: 598px;
	border: 10px solid #13192a;
	text-align: center;
}

#map {
	position: relative; top: 10px; left: 20px;
	width: 900px; height: 500px;
	border: 10px solid #13192a;
}

#directions_to_hotel {
	position: absolute; top: 1300px; left: 20px;
	width: 900px; height: 500px;
	text-align: left;
}
	#directions_to_hotel ul, ol li {list-style-type: upper-roman;}

/**************************CONTACT PAGE*************************/
fieldset {border: none;}

#contact_form {
	position: relative; top: 0px; 
	width: 100%;
	height: 1140px;
	text-align: center;
	/*border: 2px solid red;*/
}

#tombstone {
	position: absolute; top: 0px; left: 130px;
	margin: 0 auto; text-align: center;
	width: 700px; height: 1130px; 
	background: transparent url("images/tombstone_small.png") no-repeat top right;
	/*border: 2px solid green; */
}

#formTop {
	position: relative; top: 135px; 
	width: 600px; height: 370px;
	margin: 0 auto;
	/*border: 2px solid blue;*/
}
	#formTop .input-bg {
		position: relative; top: -25px;
		width: 600px;
		height: 65.5px;
		margin-bottom: -20px;
		background: url("images/textfield.png") top left no-repeat transparent;
		/*border: 2px solid yellow;*/
	}
		#formTop input {
			width: 500px;
			margin: 20px 0 0 0;
			text-align: center;
			background: none;
			font-size: 22px;
			color: #bab8c5;
			border: none;
		}

	#formTop .active {
		background: url("images/textfield.png") bottom left no-repeat transparent;
	}

#formBottom {
	position: relative; top: 110px;
	width: 625px;
	margin: 0 auto;
	/*border: 2px solid orange;*/

}
	#formBottom .message-bg {
		background: url("images/textarea.png") top left no-repeat transparent;
		width: 625px; height: 390px;
		/*border: 2px solid white;*/
	}

		#formBottom textarea {
			border: none;
			background: none;
			margin: 0 auto;
			padding: 13px 0 13px 0;
			font-family: Helvetica, sans-serif;
			font-size: 22px;
			color: #bab8c5;
			overflow: auto;
		}

	#formBottom .active {
		background: url("images/textarea.png") bottom left no-repeat transparent;
	}

label {
	display: block;
}

/* This label.error is relative to the #formTop.input-bg div*/

label.error {
	position: absolute; bottom: 0px;
	left: 160px;
	font-size: 14px;
	text-align: center;
	font-style: italic;
	font-weight: bold;
	background-color: black;
	-moz-border-radius: 4px;
}

#submit_button {
	position: relative; 
	top: 150px;
	margin: 0 auto;
	width: 600px; height: 120px;
	z-index: 1000;
	/*border: 1px solid white;*/
}

/**************************CONTACT PAGE*************************/
#sponsors {
	position: relative; top: 0px; left: 0px;
	width: 100%; height: 100%;
	/*border: 2px solid red;*/

}