/**************************************************
	This is the style sheet "Tabbed03".css for the "Central Minnesota Area Of Narcotics Anonymous" Web site.
	Version 6_f
	http://www.central.naminnesota.org/
	
	Copyright notice: The logos used in this site are the trademarked logos of Narcotics Anonymous.
	YOU ARE NOT PERMITTED TO USE THEM, unless you are a duly recognized Narcotics Anonymous Service Committee or group.
	In that case, you may use them, but you are bound by the conditions outlined in the Narcotics Anonymous Fellowship
	Intellectual Property Trust (FIPT) Bulletin 1: http://www.na.org/legal/ipbul1-03rv.htm
		
	The exact files in question are:
	
	/graphics/TopNav.gif
	/graphics/wp003.jpg
	
	
	These two image files contain trademarked Narcotics Anonymous intellectual property. You cannot use these
	files in your Web site unless you are a real Narcotics Anonymous Service Committee.*/
	
SPAN:after {
	/*Enter Revised date here!  This date will be placed at the bottom of each page calling for it!!!*/
	content: "3/30/11"
	}	

/* The "body" style is the basic style for the entire page displayed. */
body{
	/* We will use a serif font. */
	font-family:"Times New Roman",Times,serif;
	/* These are position parameters. */
	margin: 0;
	border: 0;
	text-align: center;	/* I want the site centered. */
	vertical-align: top;	/* And on top. */
	padding: 0;
	padding-top: 10px;	/* Give us some breathing room. */
	padding-bottom: 12px;
	background-image:url("graphics/wp003.jpg");	/* NA Symbol with Diamond Symbol background. */
}

/*************************************************/

hr { 
	border: 0; 
	width: 95%; 
	color: #0000FF; 
	background-color: #0000FF; 
	height: 4px; 
}



/*
	This is a generic "centering" class.
*/

.centered{
	display:block;
	margin: 0 auto;
	text-align:center;
	text-indent:0px;
}

/*************************************************/
/*
	This is a class we'll use for attributions.
*/

.attribution{
	display: block;
	margin: 0;
	text-align: right;
	text-indent: 0px;
	font-size: xx-small;
	font-style: italic;
}
/*
	This is a class we'll use for small text.
*/

.small_text{
	display: block;
	margin: 8px;
	text-align: left;
	text-indent: 0px;
	font-size: small;
	font-style: none;
}
/*
	This is a class we'll use for extra small italic text.
*/

.xsmall_text{
	display: block;
	margin: 8px;
	text-align: left;
	text-indent: 0px;
	font-size: x-small;
	font-style: italic;
}

/*
	This is a class we'll use for sans serif text.
*/
.sans_serif_text{
	font-family: MS Arial, Helvetica, sans-serif;
	text-align: middle;
	text-indent: 0px;
	font-style: none;
	font-size: x-large;
}

.style10 {color: #FF0000}
/*This is a class we will use for*******text.*/


.style12 {
	color: #0033FF;
	font-size: 36px;
}
/*This is a class we'll use for xx-large Black text.*/
.style15 {font-size: xx-large}

/*This is a class we will use for*******text.*/
.style16 {font-size: xx-large; color: #0000FF; }

/*This is a class we will use for*******text.*/
.style17 {font-size: xx-large; color: #0000FF; font-weight: bold; }

/*This is a class we will use forLime Green x-large text.*/
.style28 {
	font-size: x-large;
	color: #00FF00;
}
.style30 {
	color: #0000CC
}
.style33 {color: #0000FF}




/*************************************************/
/*
	This is a special style for using "hidden" images.
	I use these as "preloads," so we don't need to
	use JavaScript for anything at all.
*/

.hidden{	/* Anything given this class is not shown. */
	display: none;
}

/*************************************************/
/*	These styles control how the links behave. They are VERY important. */

/* This is the normal "at rest" link. */
a{
	/* A regular link will be almost 100% blue. */
	color: #0000CC;
	/* A regular link will always be underlined. */
	text-decoration: underline;
}
/* This is a link to a page that the visitor has already visited before. These are usually displayed differently. */
a:visited{
	/* I believe that we should rely on site design to help user to avoid repeating visits, so I only make it a bit darker. */
	color: #000099;
}
/* These are three styles for links that are being "moused over" or are otherwise "active." */
/*
	"hover" controls the behavior when the cursor is over the link.
	"focus" controls the behavior if the keyboard focus has shifted to the link.
	"active" is a fairly generic term for the link being "ready to go."
*/
a:hover, a:focus, a:active{
	/* Almost completely red. */
	color: #CC0000;
	/* I like the link to lose its underline, as that makes a bit of movement that you notice. */
	text-decoration: none; 
}

/*************************************************/
/*	These styles control how the link out class of links behave. They are VERY important. */
/*"Link out" links are used when the link will open another page and display a small icon after the link.*/

/* This is the normal "at rest" link. */

a.link_out {
	/* A regular link will be almost 100% blue. */
	color: #0000CC;
	/* A regular link will always be underlined. */
	text-decoration: underline;
	background: url(graphics/link_rest.gif) center right no-repeat;
	padding-right: 10px;
}

a.link_out:visited {
	/* I believe that we should rely on site design to help user to avoid repeating visits, so I only make it a bit darker. */
	color: #000099;
	background: url(graphics/link_vis.gif) center right no-repeat;
	padding-right: 10px;
}

a.link_out:hover, a.link_out:active {
	/* Almost completely red. */
	color: #CC0000;
	/* I like the link to lose its underline, as that makes a bit of movement that you notice. */
	text-decoration: none;  
	background: url(graphics/link_hover.gif) center right no-repeat;
	padding-right: 10px;
}



/*************************************************/
/* These are definitions of our paragraph structure. */

/*
	I like proper English paragraph style. The first paragraph of a page
	is not indented, and subsequent paragraphs are indented.
*/
p{
	text-indent: 1em;
}

/* The first paragraph undoes the standard indent, but you need to make sure to specify this class in the <p> tag. */
p.first{
	text-indent: 0px;
}

/*************************************************/
/* These are definitions for the content "wrapper." */

/*
	The basic content is going to be 783 pixels wide, as this will fit comfortably
	on most screens, and won't force the visitor to have to travel across a very wide page,
	or move their cursor too far. The negative part is that they may need to do vertical
	scrolling, and wide content will "push" the page wider.
*/
#content_wrapper{
	width: 783px;
	margin-top: 0;
	margin-bottom: auto;
	margin-left: auto;
	margin-right: auto;
	padding: 0;
	border: none;
	vertical-align: top;
}
#left_content_wrapper{
	width: 783px;
	margin-top: 0;
	margin-bottom: auto;
	margin-left: 2em;
	margin-right: auto;
	padding: 0;
	border: none;
	vertical-align: top;
}
/*************************************************/
/* 
	These are definitions for the header.
	One thing I do here that is a bit annoying, and does ding accessibility
	and flexibility just a bit, is I declare the various text components of the
	top navigation area to be an exact number of pixels high, as opposed
	to using ems. If you use ems, then the page will scale to fit differences
	in text sizes. The structure of this is slightly pomeranian, as opposed
	to bulldog. It is too delicate to leave to chance. This also means that the
	look and feel can be fairly tightly controlled, using CSS, and you can
	override this if you can do better.
*/

/*
	This is the entire <div> that encloses the top navigation area.
*/
#top_part {
	position: relative;
	top: 0px;
	margin: 0;	/* Basic stuff. No margin or padding, and no border. */
	padding: 0;
	border: none;
	width: 783px;
	height: 90px;
	background: transparent;	/* In case the background image isn't displayed properly. */
	/* We use a broad background image to provide the nice curves. */
	/* NOTE: I deliberately saved this file with transparency, as the corners look funny otherwise. */
	background-image: url("graphics/TopNav.gif");
	background-repeat: no-repeat;
	background-position: bottom left;
	vertical-align: top;
	color: #000000;
}

/*
	This is a definition for the <ul> tag that defines the banner and navigation items.
*/
ul#banner_and_nav{
	display: block;	/* We twist the <ul> tag into a block. */
	width: 591px;
	height: 90px;
	margin: 0;	/* Basic stuff. No margin or padding, and no border. */
	padding: 0;
	border: none;
	float: left;
}

/*
	This is a definition for the <ul> tags inside the one that defines the banner and navigation items.
	
	NOTE: For some reason, IE gets its panties in a twist if we specify the exact dimensions here.
*/
#banner_and_nav ul{
	display: block;	/* We twist the <ul> tag into a block. */
	list-style-type: none;
	margin: 0;	/* Basic stuff. No margin or padding, and no border. */
	padding: 0;
	border: none;
	text-align: center;
}

/*
	This class applies to both the <ul> and <li> tags in the banner_and_nav <div>.
*/
#banner_and_nav ul li {
	margin: 0;	/* Basic stuff. No margin or padding, and no border. */
	padding: 0;
	border: none;
}

/*
	This class applies to both the <ul> and <li> tags in the banner_and_nav <div>.
*/
#banner_and_nav li {
	display: block;	/* We twist the <li> tag into a block. */
	margin: 0;	/* Basic stuff. No margin or padding, and no border. */
	padding: 0;
	border: none;
	float: left;
}

#nav_tabs {
	position: relative;
	padding-left:133px;
	top: 59px;
	left: 90px;
	padding: 0;
	border: none;

}


/*mine
#tab_row ul{
	
	width: 654px; 
	vertical-align: bottom;
	border: none;
	padding: 0;
	

}
*/
/*
	These are the five context "tabs."

*/

#tab_row ul{
	vertical-align: bottom;
	border: none;
	padding: 0;
	margin: 0;
}


#tab_row li{
	display: block;	/* For best operation, we declare the enclosing <li> tags to be blocks, and float left. */
	float: left;		/* This ensures that the four tabs all line up like little ducks in a row. */
	border: none;
	padding: 0;
	margin: 0;
}
	
/*
	The tabs will be displayed as identical "background" tabs when they are not selected.
	They will appear as white, extruded buttons.
*/
#tab_row a{
	display: block;	/* The links are displayed as blocks. */
	width: 130px;	/* They have an exact size. */
	height: 30px;
	line-height: 30px;	/* This makes sure the text is vertically centered. */
	font-size: 10pt;		/* Small, bold text. */
	font-weight: bold;
	text-align: center;	/* centered horizontally. */
	/* We display the tab image as a background image. */
	background-image:       url("graphics/tab_unselected.gif");
	background-repeat: no-repeat;
	background-position: bottom left;
	margin: 0;	/* Basic stuff. No margin or padding, and no border. */
	padding: 0;
	border: none;
}

/*
	When we are in a hover, I "gray" the tab slightly.
	Remember the Opera 6 problem.
*/
#tab_row a:hover{
	background-image:       url("graphics/tab_mouseover.gif");
	background-repeat: no-repeat;
	background-position: bottom left;
}

/*
	A selected tab has the selected image used, and does not display its link as active.
	When a tab is selected, its <li> tag should be assigned this class.
	The appearance will be of a "hole" in the background.
*/
#tab_row a.tab_selected{
	color: #000;
	text-decoration: none;
	background-image:       url("graphics/tab_selected.gif");
	background-repeat: no-repeat;
	background-position: bottom left;
}

/*
	This short-circuits the the hover.
	Except in IE 5 on Windows, which ignores the override, and displays the original hover.
*/
#tab_row .tab_selected a:hover{
}

/*************************************************/
/* 
	These are definitions for the content area and left navigation.
	The way this works is that the content <div> has a stripe that it draws
	down the left side. This stripe mortises exactly into the top navigation
	area, so it appears to be a continuation of it.
	Over this stripe, is floated our secondary navigation area. This has a
	transparent background, so it looks as if it were actually part of the stripe.
	The content area itself is set to a left margin that begins after the floated
	secondary navigation.
	
	NOTE: Since first developing this, I had to institute a hybrid scheme that
	uses a table for the content area.
*/

/*
	This is the <div> that encloses the whole area.
	We use it to draw the "stripe."
*/
#middle_part{
	width: 783px;
	clear: left;
	margin: 0;	/* Basic stuff. No margin or padding, and no border. */
	padding: 0;
	border: none;
	background: transparent; /* The container is drawing the stripe. */
	margin-right: auto;
	text-align: left;
	/* This is the vertical stripe. It will resize to the height of the content. */
	background-image:       url("graphics/2ndNavStripe.gif");   /* 128x1 pixel GIF*/
	background-repeat: repeat-y;
	background-position: top left;
}

/*
	These are special <table> styles for the ugly overflow problem fix.
	
	There was no way to fix this problem in CSS. I have to use a table.
	God will forgive me. I'm not so sure about the CSS zealots.
*/

/*
	This is the containing table for the entire content area.
*/
table#content_table{
	width: 783px;
	margin: 0;	/* Basic stuff. No margin or padding, and no border. */
	padding: 0;
	border: none;
}

/*
	This contains the left navigation area.
*/
td#navbar_td{
	width: 130px;
	margin: 0;	/* Basic stuff. No margin or padding, and no border. */
	padding: 0;
	border: none;
	vertical-align: top;
	text-align: center;
}

/*
	This is the <div> for the secondary navigation. It floats over the stripe.
*/
#secondary_navbar{
	width: 128px;	/* I give a little breathing room. */
	background: transparent; /* This makes sure it stings like a bee. */
	margin: 0;	/* Basic stuff. No margin or padding, and no border. */
	padding: 0;
	border: none;
}

/*
	This is the <ul> tag inside the div.
*/
#secondary_navbar ul{
	list-style-type: none;	/* No bullets on these lists. */
	margin: 0;	/* Basic stuff. No margin or padding, and no border. */
	margin-right: 2px;	/* The reason I do this is because IE 5 has a marginal problem. */
	padding: 0;
	border: none;
}

/*
	Each secondary navigation item will be a block.
*/
#secondary_navbar ul li a{
	display: block;	/* This is a block, so that stops all the indenting and whatnot. */
	margin: 0;
	margin-top: 4px;
	padding: 0;
	border: none;
	text-align: center;
	width: 128px;	/* 116 pixels wide, height is in ems. */
	font-size: 8pt;	/* The links are extra small text, centered. */
	height: 2em;
	line-height: 2em;
	text-align: center;
}

/*
	The standard display will be a white, extruded "button."
*/
#secondary_navbar a{
	background-image:       url("graphics/sidenav_unselected.gif");
	background-repeat: no-repeat;
	background-position: center center;
}
/*
	We will show a slightly gray version of the button in a hover.
*/
#secondary_navbar a.NavUnselected:hover{
	background-image:       url("graphics/sidenav_mouseover.gif");
	background-repeat: no-repeat;
	background-position: center center;
}

/*
	The secondary navigation will display a "hole" in the background.
*/
#secondary_navbar a.NavSelected{
	color: #000;
	text-decoration: none;
	background-image:       url("graphics/sidenav_selected.gif");
	background-repeat: no-repeat;
	background-position: center center;
}

/*
	This just short-circuits the hover.
	Except in IE 5 on Windows, which ignores the override, and displays the original hover.
*/
#secondary_navbar.selected a:hover{
}

/*
	This contains the content area.
*/
td#content_td{
	width: 653px;
	margin: 0;	/* Basic stuff. No margin or padding, and no border. */
	padding: 0;
	border: none;
	vertical-align: top;
}

/*
	This just sets the basic characteristics of the content.
*/
#content_area{
	clear: left;
	margin: 0;
	padding-left: 0;
	padding-right: 0;
	padding-top: 4px;
	padding-bottom: 4px;
	border: none;
	text-align: left;
	background: transparent;
}
/************************************************************/
	/*These are for Tables */
/************************************************************/
	/*
	This is the Trifold meeting list table itself.
*/
table#tri_meet{
	width: 1070px;
	height: 950px;
	padding: 8px;
	margin: 0;
	padding-left: 8px;
	padding-right: 8px;
	padding-top: 8px;
	padding-bottom: 8px;
	border-collapse: collapse
	
	
}


		/*This is the style for a one third width column with centered text.*/
td.third_centered_td{
	width: 33%;
	padding: 4px;
	margin: 0;
	text-align:center;
	vertical-align: middle;
	border-style:groove;
	border-width: thick;
	border-color: blue;
}
		/*This is the style for a one third width column with left aligned text.
*/
td.third_left_td{
	width: 33%;
	padding: 4px;
	margin: 0;
	text-align: left;
	vertical-align: middle;
	border-style:groove;
	border-width: thick;
	border-color: blue;
}
/*This is the style for a two thirds width column with left aligned text.*/
td.two_third_left_td{
	width: 66%;
	padding: 4px;
	margin: 0;
	text-align: left;
	vertical-align: top;
	border-style:groove;
	border-width: thick;
	border-color: blue;
	colspan: 2;
}

		/*This is the style for a one half width column with centered text.*/
td.one_half_centered_td{
	width: 50%;
	padding: 4px;
	margin: 0;
	text-align:center;
	vertical-align: middle;
	border-style:groove;
	border-width: thick;
	border-color: blue;
}
		/*This is the style for a one half width column with left aligned text.
*/
td.one_half_left_td{
	width: 50%;
	padding: 4px;
	margin: 0;
	text-align: left;
	vertical-align: middle;
	border-style:groove;
	border-width: thick;
	border-color: blue;
}
/*This is the style for a one half width column with left aligned text.*/
td.one_half_left_td{
	width: 66%;
	padding: 4px;
	margin: 0;
	text-align: left;
	vertical-align: top;
	border-style: groove;
	border-width: thick;
	border-color: blue;
	colspan: 2;
}

/*This is the style for a table with thick black borders.*/
table#thick_black{
	border-collapse: collapse;
	width: 100%;
}
/*This is the style for a cell with thin black borders and center aligned text.*/
td.thin_centered{
	display: table-cell;
	border-collapse: collapse;	
	width: auto;
	height: auto;
	padding: 2px;
	margin: 0;
	text-align: middle;
	vertical-align: middle;
	border-style: solid;
	border-width: thin;
	border-color: black;
	background-color:#FFFFFF;
}

/*This is the style for a table with center aligned text and an open top border./
td.center_notop{
	
	background: #CCFFFF;
	display: table-cell;
	border-collapse: collapse;	
	border-top: none;
	border-left: 2px solid #000;
	border-right: 2px solid #000;
	border-bottom: 2px solid #000;
	width: auto;
	height: auto;
	padding: 2px;
	margin: 0;
	text-align: middle;
	vertical-align: middle;
	
}
/*This is the style for a table with center aligned text and an open left border./
td.center_noleft{
	
	background: #FFFFFF;
	display: table-cell;
	border-collapse: collapse;	
	border-top: 2px solid #000;
	border-left: none;
	border-right: 2px solid #000;
	border-bottom: 2px solid #000;
	width: auto;
	height: auto;
	padding: 2px;
	margin: 0;
	text-align: middle;
	vertical-align: middle;
	
}
/*This is the style for a table with center aligned text and an open top and left border./
td.center_notopleft{
	
	background: #ccffff;
	display: table-cell;
	border-collapse: collapse;	
	border-top: none;
	border-left: none;
	border-right: 2px solid #000;
	border-bottom: 2px solid #000;
	width: auto;
	height: auto;
	padding: 2px;
	margin: 0;
	text-align: middle;
	vertical-align: middle;
	
}

/*************************************************/
/*
	These are for the calendar.
	
	This is a pretty basic, table-based (sorry CSS
	guys, this is EXACTLY what tables are supposed
	to do. I know you can do it all with CSS, but
	this is simpler and more robust.)
*/

/*
	This is the table itself.
*/
table#calendar_this_month{
	width: 100%;
	padding: 0;
	margin: 0;
	border: 0;
}

/*
	This is for the little tables that go inside each day.
*/
table.day_table{
	width: 100%;
	padding: 0;
	margin: 0;
	border: 0;
}

/*
	This is the main title.
*/
td.calendar_title{
	text-align:center;
	font-size: large;
	font-weight:bold;
}

/*
	This is the "day of the week" header that goes at the top of each column.
*/
td.calendar_day_header{
	text-align:center;
	font-size: medium;
	font-weight:bold;
}

/*
	This is the style for a day that is within the given month.
*/
td.monthday_td{
	background-color:#CC9933;
	padding: 4px;
	margin: 0;
	text-align:center;
	vertical-align: top;
}
/*
	This is the style for an A.S.C. Day.
*/
td.asc_monthday_td{
	background-color:#FF9900;
	padding: 4px;
	margin: 0;
	text-align:center;
	vertical-align: top;
}
/*
	This is the style for an R.S.C. Day.
*/
td.rsc_monthday_td{
	background-color:#FFCC00;
	padding: 4px;
	margin: 0;
	text-align:center;
	vertical-align: top;
}
/*
	This is the style for an R.S.C. Day.
*/
td.mnnac_monthday_td{
	background-color:#FF0000;
	padding: 4px;
	margin: 0;
	text-align:center;
	vertical-align: top;
}
/*
	This is the style for one of our four main functions.
*/
td.main_calendar_day{
	background-color:#0000FF;
	padding: 4px;
	margin: 0;
	text-align: center;
	color: #FFFFFF;
	font-size: xx-large;
	font-weight: bold;
}
/*
	This is the style for one of our four main functions.
*/
td.mainfunct_monthday_td{
	background-color:#0000FF;
	padding: 4px;
	margin: 0;
	text-align: center;
	vertical-align: top;
	color: #FFFFFF;
	/*text-decoration: underline, blink; 
	font-size: xx-large;
	font-weight: bold;*/
}
/*
	This is the style for an A.S.C. Day.
*/
td.subcom_monthday_td{
	background-color:#00ccff;
	padding: 4px;
	margin: 0;
	text-align:center;
	vertical-align: top;
}
/*
	This is the style for one of our four main functions.
*/
td.roadtrip_monthday_td{
	background-color:#66FF99;
	padding: 4px;
	margin: 0;
	text-align:center;
	vertical-align: top;
}
/*
	This is the style for an open meeting.
*/
td.openmeet_monthday_td{
	background-color:#FF6666;
	padding: 4px;
	margin: 0;
	text-align:center;
	vertical-align: top;
}

/*
	This is the style for a day that is not within the given month.
*/
td.not_monthday_td{
	background: transparent;
	padding: 4px;
	margin: 0;
	text-align:center;
	vertical-align: top;
}

/*
	This is the style for the day number cell for each day.
*/
td.day_num{
	text-align:center;
	font-size: small;
	font-weight:bold;
}

/*
	This is the style for the day contents cell for each day.
*/
td.calendar_day{
	text-align:left;
	font-size: small;
	font-weight:normal;
}

/*************************************************/
/*
	These are for the table-based meeting list mock-up.
*/

table.table_list{
	width: 550px;
	padding:0;
	margin: 0;
	border: none;
	font-size:small;
}

#tr_list_heading_row td{
	padding-top:4px;
	padding-left:4px;
	padding-right:4px;
	padding-bottom:2px;
	margin: 0;
	font-weight:bold;
	text-align:center;
	white-space: nowrap;
	border: none;
	border-bottom: 2px solid #666;
}

tr.tr_list_meeting_row1 td{
	background: white;
	padding-top:3px;
	padding-bottom:3px;
}

tr.tr_list_meeting_row2 td{
	background: transparent;
	padding-top:3px;
	padding-bottom:3px;
}

td.td_time{
	vertical-align: top;
	text-align: right;
	white-space: nowrap;
	font-weight: bold;
	padding-left:0;
	padding-right:4px;
}

td.td_name{
	vertical-align: top;
	padding-left:4px;
	padding-right:4px;
}

td.td_location_name{
	vertical-align: top;
	padding-left:4px;
	padding-right:4px;
}

td.td_address{
	vertical-align: top;
	padding-left:4px;
	padding-right:4px;
}

td.td_town{
	vertical-align: top;
	padding-left:4px;
	padding-right:4px;
}

td.td_state{
	vertical-align: top;
	text-align: center;
	padding-left:4px;
	padding-right:4px;
}

td.td_zip{
	vertical-align: top;
	text-align: center;
	padding-left:4px;
	padding-right:4px;
}

td.td_format{
	vertical-align: top;
	white-space: nowrap;
	font-weight: bold;
	padding-left:4px;
	padding-right:0;
}

/*************************************************/
/*
	These are for the list-based meeting list mock-up.
*/

ul.ul_list{
	list-style-type: none;
	display:block;
	padding:0;
	margin: 0;
	border: none;
	font-size:small;
}

li.li_meeting{
	display:block;
	padding-top:4px;
	padding-bottom:4px;
}

li.li_meeting ul{
	display:block;
	list-style-type: none;
	padding:0;
	margin: 0;
	border: none;
}

ul.ul_meeting1{
	background: white;
}

ul.ul_meeting2{
}

li.li_time{
	display:block;
	position: relative;
	font-weight: bold;
}

li.li_name{
	display:block;
	position: relative;
	margin-left: 20px;
}

li.li_location_name{
	display:block;
	position: relative;
	margin-left: 20px;
}

li.li_address{
	display:block;
	position: relative;
	margin-left: 20px;
}

li.li_town{
	display:block;
	position: relative;
	margin-left: 20px;
}

li.li_state{
	display:block;
	position: relative;
	margin-left: 20px;
}

li.li_zip{
	display:block;
	position: relative;
	margin-left: 20px;
}

li.li_format{
	display:block;
	position: relative;
	margin-left: 20px;
}

/*************************************************/
/*
	These are for the second list-based meeting list mock-up.
*/

ul.ul_list_2{
	list-style-type: none;
	padding:0;
	margin: 0;
	font-size:small;
}

ul.ul_list_2 ul{
	list-style-type: none;
	padding:0;
	margin: 0;
}

li.li_meeting_2{
	padding-top:2px;
	padding-bottom:2px;
	display: block;
}

li.li_meeting_2 li{
	padding:0;
	margin: 0;
	padding-left: 4px;
	padding-right: 4px;
	display: inline;
}

ul.indented_row{
	padding:0;
	margin: 0;
	text-indent: 20px;
}

ul.ul_meeting1_2{
	background: white;
}

ul.ul_meeting2_2{
}

/* These three are in the top line. */

li.li_time_2{
	font-weight: bold;
	padding-left: 4px;
	padding-right: 4px;
}

li.li_name_2{
	font-style: italic;
	padding-left: 4px;
	padding-right: 4px;
}

li.li_format_2{
	font-weight: bold;
	padding-left: 4px;
	padding-right: 4px;
}

/* The location is displayed on one line. */
li.li_location_name_2{
	padding-right: 4px;
}

/* The street address is displayed on one line. */
li.li_address_2{
	padding-right: 4px;
}

/* These three are on the same line. */
li.li_neighborhood_2{
	padding-right: 4px;
}

li.li_city_2{
	padding-left: 4px;
	padding-right: 4px;
}

li.li_nation_2{
	padding-left: 4px;
	padding-right: 4px;
}

/* The directions are given in a row on their own. */
li.li_directions_2{
	padding-left: 20px;
	padding-right: 4px;
}

/* These styles are for the meeting format table. */

table.format_table {
	padding:0;
	margin:0;
	border:none;
}

td.format_table_heading {
	padding:4px;
	margin:0;
	border:none;
	font-weight:bold;
	text-align:center;
}

td.format_table_code {
	width: 2em;
	padding:2px;
	margin:0;
	border:none;
	vertical-align:top;
	font-weight:bold;
	text-align:left;
}

td.format_table_text {
	padding:2px;
	margin:0;
	border:none;
	vertical-align:top;
	font-weight:normal;
	text-align:left;
}

/********************************************************************/
/*							LIST FORMAT STYLES						*/
/********************************************************************/
/*
	This makes lists use justified alignment.
*/
li {
	text-align: justify;
}

/*
	These two classes control the "followup" text in an ordered list.
	
	This is a standard first paragraph, indented.
	No italics.
*/
li.inline_text_first {
	text-indent: 0pt;
	font-style: normal;
	list-style-type: none;
	font-size: medium;
}

/*
	This is a standard subsequent paragraph, indented.
	No italics.
*/
li.inline_text {
	text-indent: 12pt;
	font-style: normal;
	list-style-type: none;
	font-size: medium;
}

/*
	This is a recessed outline, used to block off list items so they don't
	screw up the numbering.
*/
ol.recessed {
	font-size: small;
	font-style: normal;
	font-weight: normal;
	margin-left: -28pt;
}

/*
	Same thing, for an unordered list.
*/
ul.recessed {
	font-size: small;
	font-style: normal;
	font-weight: normal;
	margin-left: -28pt;
}

/*
	These will be used for real outline formats.
	
	This is the main context (capital Roman numerals.)
*/
li.ol_1_I {
	list-style-type: upper-roman;
	font-style: normal;
	font-size: large;
	font-weight: bold;
}

/*
	This is the second context (capital alphabetic characters.)
*/
li.ol_2_A {
	list-style-type: upper-alpha;
	font-size: medium;
	font-weight: bold;
	font-style: normal;
}

/*
	This is the third context (numbers.)
*/
li.ol_3_1 {
	list-style-type: decimal;
	font-size: small;
	font-weight: bold;
	font-style: normal;
}

/*
	This is the fourth context (lowercase Roman numerals.)
*/
li.ol_4_i {
	list-style-type: lower-roman;
	font-size: x-small;
	font-weight: bold;
	font-style: normal;
}

/*
	This is the fifth context (lowercase alphabetic characterss.)
*/
li.ol_5_a {
	list-style-type: lower-alpha;
	font-size: xx-small;
	font-weight: bold;
	font-style: normal;
}

/*
	This is used for our site map.
*/
ul.site_map {
	list-style-type: none;	/* No "bullets." */
}

/*
	This takes care of our enclosed tables.
*/
ul.site_map ul{
	list-style-type: none;	/* No "bullets." */
}

/*************************************************/
/* 
	These are the definitions for the bottom navigation area.
	
	NOTE: In the final section, I simplified the declarations slightly.
*/

#footer { 
	font-family: Times New Roman,Times,serif;
	font-size: x-small;
	font-style: italic;
	font-weight: bold;
	font: black; 
	text-align:center;
	border-style:groove;
	border-width: thick;
	border-color: blue;
	height: 45px;
	width: 97%;
	margin: 0;	
	padding: 0;
	background: transparent;
}	

/*
	This is the entire <div> that encloses the bottom navigation area.
*/
#bottom_part {
	clear: left;
	margin: 0;	/* Basic stuff. No margin or padding, and no border. */
	padding: 0;
	border: none;
	width: 783px;
	height: 30px;
	background: transparent;
	/* We use a broad background image to provide the nice curves. */
	background-image:       url("graphics/BotNavBar.gif");
	background-repeat: no-repeat;
	background-position: top left;	/* Just to make sure it is shoved to the top in IE. */
	font-size: 10pt;	/* The links are small text, centered. */
	text-align: center;
	color: #000000;
}

/*
	These colors stand out more.
*/
#bottom_part a{
	margin-top: 2px;
	text-align: center;
	color: #0000CC;
}

#bottom_part a.visited{
	color: #000099;
}

/*
	Slightly brighter red.
*/
#bottom_part a:hover, a:focus, a:active{
	color: #CC0000;
}

/*
	The rollover for the links is to turn them white.
	
	These links don't exhibit the same problem as the top
	links (probably because they aren't shoved over to
	the right,) but I want to maintain continuity.
#bottom_part a:hover{
	background: #FFF;
}
*/

/*
	This is a <div> that contains a "Page Top" link.
*/
#secondary_navbar_offset{
	width: 127px;
	float: left;
	background: transparent;
	margin: 0;	/* Basic stuff. No margin or padding, and no border. */
	padding: 0;
	border: none;
}

/*
	I want the "Page Top" link to appear and behave as the secondary navigation links.
*/
#secondary_navbar_offset a{
	display: block;
	width: 119px;
	margin: 0;
	margin-left: 4px;
	padding: 0;
	border: none;
}

/*
	This is where the two bottom links go.
*/
#bottom_navigation_links{
	width: 654px;	/* 4-pixel padding. */
	margin: 0;
	padding: 0;
	padding-top: 8px;
	border: none;
	background: transparent;
	text-align: center;
	float: left;
}

/*
	<sigh> IE. Panties in a bunch.
*/
#bottom_navigation_links_span{
	display: block;
	border: none;
	text-align: center;
	margin: 0;
	padding: 0;
	border: none;
}
p.bottom_navigation_links_paragraph{
	display: block;
	border: none;
	text-align: center;
	margin: 0;
	padding: 0;
	border: none;
}