/* CSS Document */

* {
	margin: 0px;
	padding: 0px;
	}
 
body {
	background: #e4e3e0 url("../images/site_bg.png") top left repeat-x;
	/*padding: 0px 1%;*/
	padding: 0;
	margin: 0px;
	color: #666;
	font-size: small;
	font-family: "HelveticaNeue-Light", Helvetica, Arial, sans-serif;
	}
	
/* adjustment for IE5 */
body {
	font-size: x-small; /* IE5 Win */
  	voice-family: "\"}\""; 
  	voice-family: inherit;
  	font-size: small;
	}
html>body { /* be nice to Opera */
	font-size: small;
	}
	

h1, h2, h3, h4 {
	color: #942b07; /*2351a4*/
	margin: 0px;
	padding: 0px;
	/* font-family: Georgia, "Times New Roman", Times, serif; */
	font-weight: normal;
	letter-spacing: 0px;
	text-shadow: #ccc 1px 1px 2px;
	}
	h1 {
		font-size: 160%;
		}
	h2 {
		font-size: 150%;
		}
	h3 {
		font-size: 130%;
		}
	h4 {
		font-size: 105%;
		color: #060;
		}

img {
	top: 0 50%;
	border: 0px;
	}
a img {
	top: 0 50%;
	border: 0px;
	vertical-align: middle;
	}

a {
	color: #060;
	text-decoration: none;
}
	a:hover {
		color: #942b07;
		}
 
/* page structure
-------------------------------------- */
#site-container {
	position: relative;
	width: 970px;
	height: 100%;
	margin: 0px auto;
	text-align: left;
	}
	
/* row type: a */	
#header-bar {
	color: #666;
	float: left;
	width: 100%;
	margin: 0 0 10px 0;
	padding: 5px 0;
	border-bottom: 1px solid #333;
	}
	#header-bar a {
		text-decoration: none;
		}
	#header-bar a {
		color: #fff;
		text-decoration: none;
		}
	#header-bar a:hover {
		color: #666;
		}
	#header-bar-left {
		float: left;
	}
	#header-bar-right {
		float: right;
	}

#header-logo {
	float: left;
	margin: 0;
	padding: 5px 0;
	width: 100%;
	}
	#header-logo #logo {
		float: left;
		vertical-align: middle;
		width: 220px;
		}
		#header-logo #logo h1 {
			color: #fff;
			font-size: 200%;
			font-weight: lighter;
			letter-spacing: 0;
			margin: 0;
			padding: 0;
			text-shadow: #ccc 0px 0px 0px;
			}
	#header-logo #logo-right {
		float: left;
		text-align: right;
		width: 750px;
		}

/* main nave & feature area
-------------------------------------- */
#main-navigation {
	float: left;
	width: 970px;
	padding: 0;
	background: url("../images/site_bg_main_nav.png") top left repeat-x;
	}
	#navigation {
		float: left;
		height: 55px;
		list-style: none;
		background: url("../images/site_bg_navigation.png") bottom repeat-x;
		padding: 0 0 0 10px;
		width: 960px;
		}
		#navigation li {
			color: #666;
			float: left;
			margin: 0px 1px 0px 0px;
			padding: 0;
			/* text-transform: uppercase; */
			font-size: 120%;
			}
			#navigation li.info {
				color: #ccc;
				float: right;
				padding: 10px 10px 0 0;
				}
					
		#navigation a {
			float: left;
			display: block;
			margin: 0;
			padding: 14px 20px 0 20px;
			color: #fff;
			height: 40px;
			text-decoration: none;
			background: url(../images/site_bg_navigation_a.png) top left no-repeat;
			}
		#navigation a:hover {
			color: #e6cc26;
			}
body#home #channel-home a,
body#registration #channel-registration a,
body#members #channel-members a,
body#photos #channel-photos a,
body#recipes #channel-recipes a,
body#events #channel-events a,
body#chat #channel-chat a,
body#news #channel-news a,
body#forums #channel-forums a,
body#chapter #channel-chapter a {
	color: #e6cc26;
	background: url(../images/site_bg_navigation_on.png) bottom left no-repeat;
	}

/* local navigation */
#local-navigation {
	float: left;
	width: 100%;
	color: #666;
	}
	#local-navigation ul {
		list-style: none;
		padding: 0 10px;
		background: #d9d9d9;
		}
	#local-navigation li {
		float: left;
		padding: 0;
		margin: 0 2px 0 0;
		font-size: 100%;
		background: #d9d9d9;
		}
	#local-navigation li a {
		float: left;
		display: block;
		margin: 0px;
		padding: 5px 10px;
		text-decoration: none;
		color: #000;
		border-top: 1px solid #666;
		border-right: 1px solid #666;
		}
	#local-navigation a:hover {
		color: #999;
		}
	#local-navigation li a.active {
		color: #000;
		background: #fff;
		border-top: 1px solid #666;
		border-right: 1px solid #666;
		}

/*
feature
-------------------------------------- */
.main-feature {
	color: #f1f1f1;
	float: left;
	width: 950px;
	padding: 5px 10px 10px 10px;
	}
.main-feature a {
	color: #ff9;
	}
	.featured {
		float: left;
		width: 630px;
		}
		.featured h2 {
			text-shadow: #ccc 0px 0px 0px;
			}
		.featured .list {
			color: #f1f1f1;
			}
			.featured .list a.link {
				color: #ff9;
				}
		
	.featured-other {
		float: right;
		width: 300px;
		}
		.featured-other h2 {
			text-shadow: #ccc 0px 0px 0px;
			}		
		.featured-other .list a.link {
			color: #ff9;
			}		

/* row type: d */
#main-area {
	float: left;
	width: 100%;
	background: #fff url("../images/site_bg_main_area.png") top left;
	padding-bottom: 10px;
	}
	#main-area #left-double {
		float: left;
		width: 630px;
		padding: 10px;
		}
		#main-area #left-double .small {
			float: left;
			width: 160px;
			margin: 0 10px 0 0;
			}
		#main-area #left-double .large {
			float: left;
			width: 460px;
			}
	#main-area #right {
		float: right;
		height: 100%;
		width: 300px;
		padding: 10px;
		min-height: 400px;
		}

/* footer
-------------------------------------- */
#footer {
	background: #f1f1f1 url("../images/site_bg_footer.png") top left repeat-x;
	clear: both;
	color: #999;
	float: left;
	font-size: 90%;
	padding: 10px 0 15px 0;
	width: 100%;
	}
	#footer a {
		color: #666;
		}
	#footer a:hover {
		color: #333;
		}
		
/* content mgt
-------------------------------------- */
.column-header {
	float: left;
	width: 100%;
	margin: 0 0 15px 0;
	}
	.column-header h2 {
		font-size: 150%;
		}

.comp {
	margin: 0 0 10px 0;
	float: left;
	clear: left;
	width: 100%;
	}
	.comp-title {
		border-bottom: 2px solid #942b07;
		float: left;
		width: 100%;
		}
		.comp-title h2 {
			color: #942b07;
			float: left;
			padding: 0 0 3px 0;
			}
			.comp-title h2 img {
				vertical-align: middle;
				}
			.comp-title h2 .alt {
				color: #666;
				}
	.comp-header {
		background: #f1f1f1;
		border-bottom: 1px solid #ccc;
		float: left;
		width: 100%;
		}
		.comp-header div {
			float: left;
			padding: 1%;
			width: 98%;
			}
		.comp-header p {
			float: left;
			padding: 5px;
			font-style: italic;
			}		
		.comp-header-nav {
			float: left;
			width: 100%;
			list-style: none;
			background: #999;
			padding-top: 3px;
			}
			.comp-header-nav li {
				float: left;
				padding: 0px;
				}
				.comp-header-nav li.title {
					background: #666;
					border-right: 1px solid #666;
					border-top: 1px solid #666;
					color: #fff;
					padding: 2px 5px;
					}
			.comp-header-nav a {
				background: #ccc;
				display: block;
				border-right: 1px solid #666;
				border-top: 1px solid #666;
				color: #000;
				padding: 4px 6px;
				text-decoration: none;
				}
			.comp-header-nav .on a {
				color: #000;
				background: #f1f1f1;
				}
			.comp-header-nav a:hover {
				color: #fff;
				background: #999;
				}
	.comp-body {
		float: left;
		width: 100%;
		}
		.comp-body div {
			float: left;
			/*padding: 0 0 5px 0;*/
			padding: 5px;
			}
		.comp-body p {
			float: left;
			}
			.comp-body p.quote {
				background: url("../images/quotes.png") top left no-repeat;
				min-height: 35px;
				margin: 0 0 5px 0;
				padding: 0 0 0 38px;
				}

	.comp-footer {
		color: #999;
		background: #f1f1f1;
		border-top: 1px solid #ccc;
		float: left;
		width: 100%;
		}
		.comp-footer div {
			float: left;
			padding: 5px;
			}
		.comp-footer div a {
			color: #333;
			text-decoration: none;
			}
		.comp-footer div a:hover {
			color: #999;
			}
		.comp-footer p {
			float: left;
			padding: 0 5px 5px 5px;
			}
			
/* content styles
-------------------------------------- */

.error {
	color: #bd2514;
	}
	
a img {
	vertical-align: middle;
	}
.splitter-wrap {
	float: left;
	clear: left;
	width: 100%;
	padding: 0;
	margin: 0;
	}
.splitter {
	float: left;
	width: 46%;
	padding: 0;
	margin: 0 1% 0 0;
	}
	

/* more link */
.more {
	clear: left;
	float: left;
	font-size: 90%;
	width: 98%;
	margin: 0px;
	text-align: right;
	text-decoration: none;
	}
	
/* note */ 
.note {
	color: #999;
	font-size: 90%;
	}
	.note a {
		color: #060;
		text-decoration: none;
		}
	.note a:hover {
		color: #333;
		}

.media {
	background: #f1f1f1;
	border: 1px solid #ccc;
	float: left;
	margin: 5px 10px 10px 0;
	padding: 5px;
	}
	.media img {
		clear: left;
		float: left;
		}
	.media .title {
		float: left;
		margin: 0 0 5px 0;
		}
	.media .caption {
		clear: left;
		color: #999;
		float: left;
		font-style: italic;
		font-size: 11px;
		margin: 5px 0;
		padding: 0;
		max-width: 300px;
		}
	.media .media-control {
		background: #000;
		float: left;
		color: #666;
		text-align: center;
		max-width: 300px;
		}
		#media .media-control a {
			color: #fff;
			text-decoration: none;
			}
	.media .article {
		max-width: 310px;
		}

.media-mini {
	background: #f1f1f1;
	border: 1px solid #ccc;
	float: left;
	margin: 2px 5px 5px 0;
	padding: 2px;
	}
	.media-mini img {
		border:0px solid #999;
		width: 93px;
		}
	
	
.list {
	float: left;
	width: 100%;
	list-style: none;
	}
	.list li {
		border-bottom: 1px dotted #ccc;
		padding: 3px;
		}
		.list li img.mini {
			background: #f1f1f1;
			float: left;
			width: 80px;
			border: 1px solid #ccc;
			padding: 3px;
			margin: 0 5px 5px 0; 
			}
		.list li img.mini:hover {
			background: #ccc;
			border: 1px solid #999;
			}
			
	.list li.link {
		/* background: url(../images/arrow.jpg) 50% right no-repeat; */
		}
		.list li.title {
			color: #fff;
			border-bottom: 1px dotted #333;
			padding: 3px;
			}
	.list a {
		color: #063;
		text-decoration: none;
		}
	.list a.note {
		color: #999;
		text-decoration: none;
		}
	.list a.link {
		color: #063;
		display: block;
		text-decoration: none;
		/* padding: 0px 40px 0px 0px; */
		}
	.list a:hover {
		color: #039;
		}

/* weather */
#weather {
	color: #666;
	font-size: 90%;
	padding: 10px;
	}
.weather-icon {
	height: 150px;
	position: absolute;
	width: 250px;
	z-index: 1;
	}
.weather-info {
	position: relative;
	width: 300px;
	z-index: 2;
	}


/* tables
-------------------------------------- */
.comp-body table {
	width: 100%;
	}
.comp-body table td {
	padding: 3px;
	vertical-align: top;
	}
	
table {
	border-collapse: collapse;
	width: 100%;	
	}
	table tr {
		border-bottom: 1px dotted #f1f1f1;
		}
	table th, table td {
		vertical-align: top;
		padding: 2px 5px 5px 2px;
		}
		table th.col1, table td.col1 {
		
			}
.alt_row {
	background: #f6f6f6;
	}

/* forms
-------------------------------------- */
form {
	border: 0;
	clear: left;
	display: inline;
	float: left;
	margin: 0px;
	padding: 0px;
	width: 100%;
	}
	form legend {
		font-weight:lighter;
		padding: 0px 5px 0px 0px;
		color: #ccc;
		}
	form fieldset {
		border: 0px;
		margin-top: 10px;
		padding: 5px 0px;
		border-top: 1px solid #e6e6e6;
		}
	form input, form select, form textarea {
		color: #333;
		border:1px solid #ccc;
		background: #fff;
		margin: 0px 0px 2px 0px;
		}
		form input:focus, form select:focus, form textarea:focus {
			background: #ffc;
			}
	form input {
		padding:2px 2px;
		}

form .disabled {
	background: #f1f1f1;
	}
form .nostyle {
	border: 0px;
	background: #fff;
	}
form div {
	clear: left;
	float: left;
	margin: 0px 0px 5px 0px;
	width: 100%;
	}

form button {
	background: #9C9 url(../images/button_bg.png) 50% repeat-x;
	border: 3px double #ccc;
	margin: 5px 5px 0 0;
	padding: 3px 25px;
	}
form button:hover {
	background: #ccc url(../images/button_bg_hover.png) 50% repeat-x;
	border: 3px double #999;
	color: #fff;
	}


/* message_area
-------------------------------------- */
.highlight {
	background: #fffbc9;
	padding: 5px 5px 10px 5px;
	color: #000;
	border: 1px solid #f0dca1;
	}
.dialog_info {
	background: #fffbc9 url(../images/dialog_information.png) 5px 5px no-repeat;
	padding: 5px 5px 10px 37px;
	color: #6e4104;
	border: 1px solid #f0dca1;
	min-height: 25px;
	}
.dialog_success {
	background: #d9e7c5 url(../images/dialog_success.png) 5px 5px no-repeat;
	padding: 5px 5px 10px 40px;
	color: #354e07;
	border: 1px solid #91b561;
	min-height: 25px;
	}
.dialog_warning {
	background: #ffff99 url(../images/dialog_warning.png) 5px 5px no-repeat;
	padding: 5px 5px 10px 37px;
	color: #6e4104;
	border: 1px solid #facd00;
	min-height: 25px;
	}
.dialog_error {
	background: #ffe3e0 url(../images/dialog_error.png) 5px 5px no-repeat;
	padding: 5px 5px 10px 40px;
	color: #de1506;
	border: 1px solid #dc6e66;
	min-height: 25px;
	}

.dialog_error_sys {
	background: #ff3333 url(../images/dialog_error.png) 5px 5px no-repeat;
	padding: 5px 5px 10px 40px;
	color: #fff;
	border: 1px solid #c01211;
	min-height: 25px;
	}
	
	
/* photos / gallery
-------------------------------------- */
.gallery {
	float: left;
	width: 100%;
	list-style: none;
	text-align: center;
	}
	.gallery .album a {
		color: #060;
		text-shadow: #ccc 1px 1px 2px;
		}
	.gallery a {
		text-decoration: none;
		color: #000;
		}
	.gallery li {
		background: #f1f1f1;
		float: left;
		margin: 8px 8px 0 0;
		padding: 7px;
		position: relative;
		}
	.gallery img.thumb {
		border: 1px solid #ccc;
		float: left;
		margin: 0 0 5px 0;
		width: 185px;
		height: 140px;
		}
	.gallery a .caption {
		/*\*/
		position: absolute;
		left:-9999px;
		text-align: left;
		}
	.gallery a:hover .caption {	
		top:7px;
		left:7px;
		width:177px;
		background: #fff;
		color: #333;
		padding: 5px;
		font-size: 80%;
		border: 1px solid #eee;
		border-width: 0 0 5px 0;
		/*filter: alpha(opacity=85);*/
		-moz-opacity:.85;
			opacity:.85;
		}
	.gallery .info {
		float: left;
		clear: left;
		width: 176px;
		padding: 0;
		margin: 0;
		text-align: left;
		}


.gallery-small {
	color: #999;
	float: left;
	font-size: 90%;
	width: 100%;
	list-style: none;
	}
	.gallery-small a {
		text-decoration: none;
		}
	.gallery-small li {
		background: #fff;
		float: left;
		margin: 5px 5px 0 0;
		padding: 0;
		}
	.gallery-small img {
		border: 1px solid #ccc;
		width: 146px;
		}
	.gallery-small a:hover img {
		border-color: #00CC00;
		}
	.gallery-small .info {
		float: left;
		clear: left;
		width: 100%;
		margin: 0;
		padding: 1px;
		}
			
.gallery-mini {
	float: left;
	width: 100%;
	list-style: none;
	}
	.gallery-mini a {
		text-decoration: none;
		}
	.gallery-mini li {
		float: left;
		margin: 5px 5px 0 0;
		padding: 0;
		}
		.gallery-mini li .info {
			display: none;
			}
	.gallery-mini img {
		border:1px solid #999;
		width: 93px;
		}
	.gallery-mini a:hover img {
		border-color: #00CC00;
		}	
		
/*
----------------------------- */
.stepcarousel {
	position: relative; /*leave this value alone*/
	overflow: scroll; /*leave this value alone*/
	width: 280px; /*Width of Carousel Viewer itself*/
	height: 64px; /*Height should enough to fit largest content's height*/
	margin-top: -5px;
	padding: 0px;
	}
	.stepcarousel .belt {
		float: left;
		position: absolute; /*leave this value alone*/
		left: 0;
		top: 0;
		}
	.stepcarousel .panel {
		float: left; /*leave this value alone*/
		overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
		margin: 0; /*margin around each panel*/
		width: 93px; /*Width of each panel holding each content. If removed, widths should be defined on each content DIV then. */
		padding: 0;
		}
	.stepcarousel .panel img {
		border: 1px solid #ccc;
		width: 85px;
		}
	.stepcarousel .panel a:hover img {
		border-color: #00CC00;
		}


/***********************************************************************************************************
* chat 
************************************************************************************************************/

#mini_chat_holder {
	min-height: 200px;
	}

.chat_output_wrapper {
	border-bottom: 0px dotted #f1f1f1;
	padding: 0;
	margin: 0;
	width: 450px;
	}
.chat_output_wrapper_mini {
	border-bottom: 0px dotted #f1f1f1;
	padding: 0;
	margin: 0;
	width: 100%;
	}
	.chat_output_wrapper .msg, .chat_output_wrapper_mini .msg {
		float: left; width: 100%; color: #000; margin: 0; padding: 0;
		}
	.chat_output_wrapper .msg img, .chat_output_wrapper_mini .msg img {
		vertical-align: middle;
		}	
	.chat_output_wrapper .by, .chat_output_wrapper_mini .by {
		float: left; color: #11377c; padding: 0;
		}
	.chat_output_wrapper .note, .chat_output_wrapper_mini .note {
		color: #999;
		}
	.chat_admin_msg {
		background: #ffc;
	}


/***********************************************************************************************************
* Ajax Loading Indicator
************************************************************************************************************/
.loading_indicator {
	width: 100%;
	margin: 20px 0px 20px 0px;
	text-align: center;
	font-size: 11px;
	}
		
/************************************************************************************************************
*	DHTML modal dialog box	(CSS for the DHTMLSuite_modalMessage class)
*
*	Created:						August, 26th, 2006
*	@class Purpose of class:		Display a modal dialog box on the screen.
*			
*	Css files used by this script:	modal-message.css
*
* 	Update log:
*
************************************************************************************************************/

.modalDialog_transparentDivs{	
	/*filter:alpha(opacity=75);	 Transparency */
	opacity:0.75;	/* Transparency */
	background:#000;
	z-index:1;
	position:absolute; /* Always needed	*/
}
.modalDialog_contentDiv{
	color: #ccc;
	border:1px solid #fff;	
	padding:10px;
	z-index:100;/* Always needed	*/
	position:absolute;	/* Always needed	*/
	background: #000;	/* White background color for the message */
	text-align: left;
	}
	.modalDialog_contentDiv h1 {
		color: #fff;
		}
	.modalDialog_contentDiv a {
		color: #fff;
		text-decoration: underline;
		}
	.modalDialog_contentDiv a:hover {
		color: #ccc;
		}
.modalDialog_contentDiv_shadow{
	z-index:90;/* Always needed	- to make it appear below the message */
	position:absolute;	/* Always needed	*/
	background: #ccc;
	/*filter:alpha(opacity=70); Transparency */
	opacity:0.7;	/* Transparency */	
}


/***********************************************************************************************************
* Ajax Tooltip
************************************************************************************************************/
/* CSS needed for the script */

#ajax_tooltipObj{
	z-index:1000000;
	text-align:left;
}
#ajax_tooltipObj div{
	position:relative;
}

/* If you don't want the arrow - Just set the width of this div to 1 or something like that and drop the background selectors from the CSS below */

#ajax_tooltipObj .ajax_tooltip_arrow{	/* Left div for the small arrow */
	background:url('../images/tooltip_arrow.png') left center no-repeat;
	width:20px;
	position:absolute;
	left:0px;
	top:0px;
	/*
	background-repeat:no-repeat;
	background-position:center left; */
	z-index:1000005;
	height:50px;
}

#ajax_tooltipObj .ajax_tooltip_content{
	border: 1px solid #000;	/* Border width */
	left:18px;	/* Same as border thickness */
	top:0px;
	color: #000;
	position:absolute;
	width:160px;	/* Width of tooltip content */
		/* height:250px; Height of tooltip content */
	background:#fff;	/* Background color */
	padding:5px;	/* Space between border and content */
	font-size:11px;	/* Font size of content */
		/* overflow:auto; Hide overflow content */
	z-index:1000001;
}


/***********************************************************************************************************
* Search Auto Complete
************************************************************************************************************/
	/* Big box with list of options */
	#ajax_listOfOptions{
		position:absolute;	/* Never change this one */
		/* width:220px;	 Width of box */
		/* height:250px; */	/* Height of box */
		overflow:auto;	/* Scrolling features */
		border:1px solid #666;	/* Dark green border */
		background-color:#fff;	/* White background color */
		text-align:left;
		/* font-size:0.9em; */
		z-index:100;
	}
	#ajax_listOfOptions div{	/* General rule for both .optionDiv and .optionDivSelected */
		margin: 0px;		
		padding: 0px;
		cursor:pointer;
		/* font-size:0.9em; */
	}
	#ajax_listOfOptions .optionDiv{	/* Div for each item in list */
		padding: 5px 3px;
		border-bottom: 1px solid #f1f1f1;
	}
	#ajax_listOfOptions .optionDivSelected{ /* Selected item in the list */
		background-color:#666;
		border-bottom: 1px solid #666;
		padding: 5px 3px;
		color:#fff;
	}
	#ajax_listOfOptions_iframe{
		background-color:#F00;
		position:absolute;
		z-index:5;
	}
	
	

#footer-bar {
/*
	background-image: url(bottom.png);
	background-repeat: no-repeat;
	background-position: center;
*/
	background: #000;
	color: #ccc;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	width: 100%;
	padding: 3px;
	position: fixed;
	text-align: center;
	bottom: 0px;
	z-index: 5;
}