/*---------------------------------------------------------------------------------------------

	CSS Stylesheet
	
	T.O.C
	
		=RESET
		=GENERAL
			=headings
			=text-elements
			=tables
			=default-classes
			=grid	
		=LAYOUT
			=logo
			=quote
			=nav
			=navigation
			=scroll-replacement
			=social-media
		=PAGES
			=INDEX
				=slideshow
			=MENU
			=EVENT
			=GALLERY
			=CONTACT

			
-----------------------------------------------------------------------------------------------*/


/* =RESET
-----------------------------------------------------------------------------------------------*/

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline}body{line-height:1;color:black;background:white}ol,ul{list-style:none}table{border-collapse:separate;border-spacing:0}/* tables still need 'cellspacing="0"' in the markup */caption,th,td{text-align:left;font-weight:normal}blockquote:before,blockquote:after,q:before,q:after{content:""}blockquote,q{quotes:""""}


/* =GENERAL
-----------------------------------------------------------------------------------------------*/
	
	body{ 
		background:#222222 url(images/bg-body.jpg) repeat top left;
		
		/*
		background:#222222 url(images/bg-body2.jpg) repeat top left;
		background:#222222 url(images/bg-body3.jpg) repeat top left;
		background:#222222 url(images/bg-body4.jpg) repeat top left;
		*/
		
		font:12px Arial, sans-serif; 
		line-height:20px;
		color:#cccccc;
		
		padding-top:75px;
	}
	
	
		/* =headings
		-------------------------------------------------------------- */
		
		h1,h2,h3,h4,h5,h6{ font-weight: bold; color:#ffffff; }
		
		h1{ font-size:28px; line-height:30px; margin-bottom:12px; }
		h2{ font-size:24px; line-height:26px; margin-bottom:12px; }
		h3{ font-size:18px; line-height:20px; margin-bottom:8px;  }
		h4{ font-size:14px; line-height:15px; margin-bottom:8px;  }
		h5{ font-size:13px; line-height:15px; margin-bottom:8px;  }
		h6{ font-size:13px; line-height:15px; margin-bottom:8px;  }
		
		
		/* =text-elements
		-------------------------------------------------------------- */
		
		a{ color:#ffffff; }
		a:hover{ text-decoration:underline;  }
		h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover,h5 a:hover, h6 a:hover{ text-decoration:none; }
		a img{ border:none; }
		
		strong{ font-weight: bold; }
		em{ font-style: italic; }
		
		p, ul, ol{ margin-bottom:20px; }
		
		ul{ list-style-type:circle; list-style-position:outside; }
		ol{ list-style-type:decimal; list-style-position:outside; }
		
		blockquote{ padding:5px 20px 0 50px; line-height:24px; background:url(images/bg-blockquote.png) no-repeat top left; color:#ffffff; }
		.ie6 blockquote{ background:none; }
			
			blockquote span{ color:#ffffff; }
		
			.blockquote-left{ width:200px; float:left; }
			.blockquote-right{ width:200px; float:right; }					 
		
		/* due to IE HR margin bugs I had to made classes and apply them to divs to achieve the visual effect of a HR */
		.hr{ border-top:1px solid #575757; margin:20px 0; }
															  
						
		/* =tables
		-------------------------------------------------------------- */
		
		table{ border-collapse:separate; border-spacing:0; border-top-width:5px; margin-bottom:20px; border:1px solid #575757;  }
		th{ padding:10px 15px; text-transform:uppercase; font-weight:bold; }
		td{ padding:10px 15px; border-top:1px solid #575757; }


		/* =default-classes
		-------------------------------------------------------------- */
		
		.img-align-left{ margin:5px 10px 0 0; float:left; }
		.img-align-right{ margin:5px 0 0 10px; float:right; }
		
		.text-right{ text-align:right; }
		.text-center{ text-align:center; }
		
		.text-highlight{ padding:2px 5px; background-color:#A42C2E; color:#ffffff; }
		.text-highlight2{ padding:2px 5px; background-color:#ffffff; color:#111111; }


		/* =grid
		-------------------------------------------------------------- */

		/* Clear Fix Hack - add  class="fixed"  to div's that have floated elements in them */
		.fixed:after{content:"."; display:block; height:0; clear:both; visibility:hidden;}
			.fixed{display:block;}
			/*  \*/
			.fixed{min-height:1%;}
			* html .fixed{height:1%;}
				
		.row{ width:460px; }
			
			.col-300{ width:300px; float:left; margin-right:20px; }
			.col-220{ width:220px; float:left; margin-right:20px; }
			.col-140{ width:140px; float:left; margin-right:20px; }

		.last{ margin-right:0; }
		.clear{ clear:both; }
		.block{ display:block; }
		.hide{ display: none; }	
		

/* =LAYOUT
-----------------------------------------------------------------------------------------------*/

	#wrap{ position:relative; margin:0 auto; width:980px; height:650px; }
	
		.content-container{
	position:absolute;
	top:50px;
	left:0;
	z-index:10;
}
		#index .content-container{
	top:50px;
} /* on the index page the TOP positining is increased to push the content lower */
			
		.slideshow-container{ position:absolute; top:0; left:0; z-index:5; } 
			
		#content{
	position:relative;
	z-index:10;
	overflow:hidden;
	margin-left:-15px;
	padding:25px 35px 25px 40px;
	width:460px;
	height:440px;
	background-color:#333333;
	border-left:5px solid #A42C2E;
}	  
		#index #content{
	height:225px;
} /* on the index page reduce the height of the content */	  
		
			/* =logo
			-----------------------------------------------------------------------------------------------*/
			
			#logo{ display:block; float:left; }
				#logo img{ display:block; }
			
			
			/* =quote
			-----------------------------------------------------------------------------------------------*/
			
			#quote{ float:right; margin:10px 0 0 20px; }
			
			
			/* =navigation
			-----------------------------------------------------------------------------------------------*/

			ul#nav{  list-style:none; margin-top:15px; margin-bottom:30px; }		  
			ul#nav li{ float: left; }
			ul#nav li a{ display: block; padding:21px 30px 7px 14px; border-right:1px solid #575757;  font-size:13px; text-decoration:none; color:#949494; }
			ul#nav li:hover a{ color:#ffffff; } 				 
			ul#nav li.current a{ color:#ffffff; }							   						   
			ul#nav li.first a{ border-left:1px solid #575757; padding-left:13px; }


			/* =scroll-replacement
			-----------------------------------------------------------------------------------------------*/
			
			.panel{overflow:auto; height:275px; }	
				
				
		#footer{ position:absolute; bottom:0; left:0; width:980px; }
	
			#footer p{ margin-bottom:0; float:left; margin-left:25px; color:#666666; }
			.ie6 #footer p{ margin-left:15px; }
			
			/* =social-media
			-----------------------------------------------------------------------------------------------*/
			
			#social-media{
	list-style-type:none;
	margin-bottom:0;
	float:right;
	margin-right:20px;
}
			.ie6 #social-media{ margin-right:5px; }
				
			#social-media li{ float:left; }
			#social-media li img{ display:block; float:left; margin-right:5px; }
			#social-media li a{ display:block; float:left; margin-right:5px; line-height:14px; color:#666666; text-decoration:none; }
			#social-media li a:hover{ color:#ffffff; }
			
			
/* =PAGES
-----------------------------------------------------------------------------------------------*/	
				
	/* =INDEX
	-----------------------------------------------------------------------------------------------*/				
	
		/* =slideshow
		-------------------------------------------------------------------------------------------*/
		
		#slideshow{ position:relative; z-index:5; }
		#slideshow ul{ position:relative; width:980px; height:620px; overflow:hidden; margin-bottom:0; list-style:none; }
		#slideshow ul li{ width:980px; height:620px; position:relative; }
		#slideshow ul li img{ position:absolute; top:0; left:0; }
			
		#slideshow-pager{ width:200px; text-align:right; z-index:35; position:absolute; right:25px; bottom:25px; }			  
		#slideshow-pager a{ text-align:left; background:url(images/bg-pager.png) no-repeat 0 0; display:inline-block; 
							width:14px; height:14px; margin-left:1px; outline-style:none; text-indent:-9999px; }
		#slideshow-pager .activeSlide{ background:url(images/bg-pager.png) no-repeat 0 -64px; }	
		.ie6 #slideshow-pager .activeSlide{ background:url(images/bg-pager.png) no-repeat 0 0; }
		
		
	/* =MENU
	-----------------------------------------------------------------------------------------------*/	
	
		#menu-nav{ list-style-type:none; list-style-position:outside; margin-bottom:0; }
		#menu-nav li{ padding:5px 15px 5px 0; border-bottom:1px solid #575757; }
		#menu-nav li.last{ border-bottom:none; }
		#menu-nav li a{ display:block; text-decoration:none; color:#ffffff; }
		#menu-nav li a.active{ background: url(images/bg-menu-nav.gif) no-repeat center right; color:#ffffff; }
		#menu-nav li a:hover{ color:#ffffff; }
		
		#menu-container{ overflow: hidden; position: relative; height:265px; margin-top:5px;  }
			.menu{ height:265px; padding:0px 10px; margin-bottom:30px; overflow:auto; }
			.menu h5{ margin-bottom:5px; }
			.menu .img-align-left{ margin-top:2px; }
	
	
	/* =EVENT
	-----------------------------------------------------------------------------------------------*/		
	
		#events{ position:relative; }
		#events-slider{ list-style:none; width:460px; height:275px; overflow:hidden; position:relative; margin:0 auto; z-index:80; }
		#events-slider .event{ width:460px; height:275px; overflow:hidden; }
	
		#events-slideshow-prev{ background:#555555 url(images/bg-gallery-slideshow-nav.png) no-repeat 0 0; width:20px; 
								height:35px; position:absolute; bottom:-50px; right:21px; z-index:85; }
			#events-slideshow-prev:hover{ height:40px; background-color:#575757; }
								  
		#events-slideshow-next{ background:#555555 url(images/bg-gallery-slideshow-nav.png) no-repeat 0 -60px; width:20px; 
								height:35px; position:absolute; bottom:-50px; right:0; z-index:85; }
			#events-slideshow-next:hover{ height:40px; background-color:#575757; }	
		
		.date{ margin-bottom:0; color:#ccc; }
			
			
	/* =GALLERY
	-----------------------------------------------------------------------------------------------*/		
	
		#gallery{ position:relative; }
			
		#gallery-slider{ list-style:none; width:460px; height:270px; overflow:hidden; position:relative; margin:0 auto; z-index:80; overflow:hidden; }
		#gallery-slider li{ width:460px; height:270px; position:relative; }
		#gallery-slider li a{
	display:block;
	float:left;
	margin-top:10px;
	margin-right:10px;
}
		#gallery-slider a.last{ margin-right:0; }
			
		#gallery img{ outline:10px solid #444444; outline-offset:-10px; }
		#gallery img:hover{ outline-width:0; outline-color:invert; }
					  
		.ie8 #gallery img, .ie9 #gallery img{ outline:none; } /* IE8 + IE9 support outline but do not implement it corectly so we remove it in them... */
	
		#gallery-slideshow-prev{ background:#555555 url(images/bg-gallery-slideshow-nav.png) no-repeat 0 0; width:20px; 
								 height:35px; position:absolute; bottom:-55px; right:21px; z-index:85; }
			#gallery-slideshow-prev:hover{ height:40px; background-color:#575757; }
								  
		#gallery-slideshow-next{ background:#555555 url(images/bg-gallery-slideshow-nav.png) no-repeat 0 -60px; width:20px; 
								 height:35px; position:absolute; bottom:-55px; right:0px; z-index:85; }
			#gallery-slideshow-next:hover{ height:40px; background-color:#575757; }	
	
	
	/* =CONTACT
	-----------------------------------------------------------------------------------------------*/	
	
		/* background image for the google map - it should be a static map that if javascript is off will be shown */
		#map{ background: url(../_content/contact/bg-map.jpg) no-repeat top left; }