/*
	Styles for the meeting list results view
	
	This is the "Basic Blue" theme, used by the GNY site.
	
	You need these styles to ensure that the meeting list and calendar system are rendered correctly.
	
	This gives you a great deal of control over the appearance of the meeting list and calendar.
	Using these styles, you can drastically change the appearance of the GNY results, and can put
	your own "stamp" onto the list.
*/

 /*
 	This is a <div> that surrounds the entire meeting list/events output.
 	Use it to set things that affect the entire system, such as <a> tag behavior.
 */
#main_container_meetings,
#main_container_events {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: small;
	color: #330;
}
 
#main_container_meetings a:active,
#main_container_meetings a:hover {
	color:#ffc;
	text-decoration: none;
	background-color: #600;
}
 
#main_container_meetings a:active {
	color:#fff;
	text-decoration: none;
	background-color: #03c;
}

/* The headings in the Meeting Search Dialogs. */
.SearchHeading {
	font-size: medium;
	font-weight: bold;
}

/* Very Small Text */
.verysmall {
	font-size: x-small;
	font-style: italic;
}

/* This is the main title that is printed above the surrounded section. */
.main_heading {
	text-align: center;
	padding-top: 4px;
	padding-bottom: 6px;
	margin-left: auto;
	margin-right: auto;
	font-size: xx-large;
	font-weight: bold;
}

/* These four classes all get centered by the enclosing elements. */
.standard_width,
.variable_width,
.full_width,
.centered_container {
	margin-right: auto;
	margin-left: auto;
}

/* This allows a container to be centered. */
.centered_container {
	text-align: center;
}

/* This is a generic "100% width" class. */
.full_width {
	width: 100%;
}

/* This is the standard width for the entire operation. */
.standard_width {
	width: 550px;
}

/*
	The way these all work is that each corner of the enclosing place is described by two classes:
		The first is a "dimension" class that describes the size, and
		The second is the class that places an image as a single-repetion background.
	
	The first class is used as a "sizing" for a one-pixel GIF placeholder, so the background image
	is the one that is shown. This regulates the bahavior of the display.
*/
/* The upper-left corner of the main enclosed area. */
	.upper_left_outer_corner_dim {
		width: 8px;
		height: 8px;
		border: none;
		margin: 0;
		padding: 0;
	}
	
	.upper_left_outer_corner {
		background-image:  url("images/upper_left_outer_corner.gif");
		background-repeat: no-repeat;
		background-position: top left;
	}

/* The upper-right corner of the main enclosed area. */
	.upper_right_outer_corner_dim {
		width: 8px;
		height: 8px;
		border: none;
		margin: 0;
		padding: 0;
	}
	
	.upper_right_outer_corner {
		background-image:  url("images/upper_right_outer_corner.gif");
		background-repeat: no-repeat;
		background-position: top right;
	}

/* The lower-right corner of the main enclosed area. */
	.lower_right_outer_corner_dim {
		width: 8px;
		height: 8px;
		border: none;
		margin: 0;
		padding: 0;
	}
	
	.lower_right_outer_corner {
		background-image:  url("images/lower_right_outer_corner.gif");
		background-repeat: no-repeat;
		background-position: bottom right;
	}

/* The lower-left corner of the main enclosed area. */
	.lower_left_outer_corner_dim {
		width: 8px;
		height: 8px;
		border: none;
		margin: 0;
		padding: 0;
	}
	
	.lower_left_outer_corner {
		background-image:  url("images/lower_left_outer_corner.gif");
		background-repeat: no-repeat;
		background-position: bottom left;
	}

/**********************************************************
	MEETING SEARCH RESULTS
	
	Okay, after a meeting search is executed, the results are displayed in a table.
	These classes describe the presentation of that table.
*/

/* These cover the headings at the top of the table. */

/* In a couple of the sorting modes, you have a list of weekdays at the top. These classes cover that. */
.weekday_list {
	text-align:center;
	width:80%;
	border:none;
	margin-left:auto;
	margin-right:auto
}

/* Make sure eacl weekday is centered. */
.weekday_list  a {
	text-align:center;
}

/* The links are handled as "blocks," in order to increase the click area. */
.weekday_list  a,
.meeting_result_header .weekday_header a,
.meeting_result_header .town_header a,
.meeting_result_header .meeting_header a,
.meeting_result_header .time_header a,
.meeting_result_header .format_header a {
	display:block;
}

/* When we hover, the text color is changed to make it more readable. */
.weekday_list  a:hover,
.major_heading  a:hover,
.meeting_result_header .weekday_header a:hover,
.meeting_result_header .town_header a:hover,
.meeting_result_header .meeting_header a:hover,
.meeting_result_header .time_header a:hover,
.meeting_result_header .format_header a:hover,
.weekday_list  a:active,
.major_heading  a:active,
.meeting_result_header .weekday_header a:active,
.meeting_result_header .town_header a:active,
.meeting_result_header .meeting_header a:active,
.meeting_result_header .time_header a:active,
.meeting_result_header .format_header a:active {
	color:#ffc;
	background-color: #c30;
}

/* This is the main heading at the very top. */
.major_heading {
	text-align:center;
	font-weight: bold;
	font-size: large;
}

/* These are all the headers over the list. */
.meeting_result_header {
	text-align:center;
	font-weight: bold;
}

/* This is the outer table of meetings. */
.meeting_results {
	width:515px;
	margin-right:auto;
	margin-left:auto
}

/* This is the inner table. It is inset slightly, to give a border. */
.meeting_result_list_internal {
	width:510px;
	margin-right:auto;
	margin-left:auto
}

/*
	These classes describe how each row of data is displayed.
*/

/* Alternating Backgrounds for Meeting Search Results */
.alternate_1 {
	background-color: #ffc;
}

.alternate_2 {
	background-color: #ff9;
}

/* In this appearance, both the town name and the meeting name are left-justified. */
.alternate_1 .town_name, .alternate_2 .town_name,
.alternate_1 .meeting_name, .alternate_2 .meeting_name {
	text-align:left;
}

/* In this appearance, both the time and the format codes are right-justified. */
.alternate_1 .meeting_time, .alternate_2 .meeting_time,
.alternate_1 .format_code, .alternate_2 .format_code {
	text-align:right;
}

/* The links are displayed as "blocks," which increases the "clickable" area. */
a.result_link {
	display:block;
}

/* ...except for the format codes, which we "pad out" a bit. */
a.format_code {
	display:inline;
	padding-left: 2px;
	padding-right: 2px;
}

/* These apply the styles directly to the links. Some browsers get dicey about this kind of thing. */
.alternate_1 .town_name a:hover, .alternate_2 .town_name a:hover,
.alternate_1 .town_name a:active, .alternate_2 .town_name a:active,
.alternate_1 .format_code a:hover, .alternate_2 .format_code a:hover,
.alternate_1 .format_code a:active, .alternate_2 .format_code a:active,
.alternate_1 .meeting_name a:hover, .alternate_2 .meeting_name a:hover,
.alternate_1 .meeting_name a:active, .alternate_2 .meeting_name a:active {
	background-color: #c30;
	color: #ffc;
}

/* This is for the RSS icon at the bottom of the page. */
.XML_dim {
	width: 36px;
	height: 14px;
	border: none;
	margin: 0;
	margin-right:auto;
	margin-left:auto;
	padding: 0;
}

.XML {
	display: block;
	background-image:    url("images/XML.gif");
	background-repeat: no-repeat;
	background-position: top center;
}
/*
	Styles for the calendar view
*/

/* This is the background for the surrounding box. */
.month_background {
	background-color: #cc9;
}

/* This is the basic background color and characteristic for each day. */
.day_background {
	width: 100%;
	background-color: #fff;
}

/* "Today" is displayed in its own color. */
.today_background {
	width: 100%;
	background-color: #ff9;
}

/* These are the corners for the insides of each day. */
.upper_left_inner_dim {
	width: 4px;
	height: 4px;
	border: none;
	margin: 0;
	padding: 0;
}

.upper_left_inner {
	background-image:  url("images/upper_left_inner.gif");
	background-repeat: no-repeat;
	background-position: top left;
}

/* "Today" is displayed in a different color, so we use different images (Same size, so no need for a new dim.) */
.upper_left_today_inner {
	background-image:  url("images/upper_left_today_inner.gif");
	background-repeat: no-repeat;
	background-position: top left;
}

.upper_right_inner_dim {
	width: 4px;
	height: 4px;
	border: none;
	margin: 0;
	padding: 0;
}

.upper_right_inner {
	background-image:  url("images/upper_right_inner.gif");
	background-repeat: no-repeat;
	background-position: top right;
}

.upper_right_today_inner {
	background-image:  url("images/upper_right_today_inner.gif");
	background-repeat: no-repeat;
	background-position: top right;
}

.lower_left_inner_dim {
	width: 4px;
	height: 4px;
	border: none;
	margin: 0;
	padding: 0;
}

.lower_left_inner {
	background-image:  url("images/lower_left_inner.gif");
	background-repeat: no-repeat;
	background-position: bottom left;
}

.lower_left_today_inner {
	background-image:  url("images/lower_left_today_inner.gif");
	background-repeat: no-repeat;
	background-position: bottom left;
}

.lower_right_inner_dim {
	width: 4px;
	height: 4px;
	border: none;
	margin: 0;
	padding: 0;
}

.lower_right_inner {
	background-image:  url("images/lower_right_inner.gif");
	background-repeat: no-repeat;
	background-position: bottom right;
}

.lower_right_today_inner {
	background-image:  url("images/lower_right_today_inner.gif");
	background-repeat: no-repeat;
	background-position: bottom right;
}

.month_day_header {
	background-image:  url("images/brownPixel.gif");
	background-repeat: repeat-x;
	background-position: bottom left;
}

.dayRollover .month_day_header {
	background-image:  url("images/whitePixel.gif");
}

/* This is the big date number in each day. We make it a block to increase the clickable area. */
.month_day_header a {
	display: block;
	font-weight: bold;
	font-size: medium;
}

/* This is the part of each day that is used to list event links. */
.days_events {
	text-align: left;
}

/* When we "rollover" the date number at the top, we replace the surrounding class, so we change the day to reflect the rollover. */
.dayRollover .day_background,
.dayRollover .today_background {
	background-color: #f30;
}

/* These are the colors for the links. The "non-hover" ones probably won't ever be seen. */
.dayRollover a, .dayRollover a, .dayRollover a:hover, .dayRollover a:active {
	color: #ffc;
}

/* These are the corner images for the "rolled over" colors. */
.dayRollover .upper_left_inner,
.dayRollover .upper_left_today_inner {
	background-image:  url("images/upper_left_highlight_inner.gif");
}

.dayRollover .upper_right_inner,
.dayRollover .upper_right_today_inner {
	background-image:  url("images/upper_right_highlight_inner.gif");
}

.dayRollover .lower_left_inner,
.dayRollover .lower_left_today_inner {
	background-image:  url("images/lower_left_highlight_inner.gif");
}

.dayRollover .lower_right_inner,
.dayRollover .lower_right_today_inner {
	background-image:  url("images/lower_right_highlight_inner.gif");
}

div.no_screen {
	display: none;
}