/* Colors:
	Blue bg: #8badc2
	Kaki bg: #e8e6d5

	    green bg: 180 200 140 (#b4c88c)
	alt green bg: 211 234 164 (#cae09d) (lighter) (#b4c88c + 12V)
	alt green bg: 161 181 121 (#aabd84) (darker)
	 text for bg: #4e573d
*/

body {
	background: #444;
	font-family: Verdana,Arial,Helvetica,sans-serif;
	font-size: .9em;
	margin: 0;
	padding: 0;
}

a {
	color: #4647b1;
	text-decoration: underline;
}

a:hover {
	color: #cc4444;
}

h1 {
	font-size: 150%;
	font-weight: bold;
	text-decoration: none;
	margin: .5em 0 .5em 0;
	padding: 0 0 .1em .2em;
	border-bottom: 1px solid #bbb;
	clear: both;
}

h2 {
	font-size: 135%;
	font-weight: bold;
	margin: 0;
}

h3 {
	font-size: 120%;
	font-weight: bold;
	margin: 0;
}

ul {
	margin-top: 0;
	margin-bottom: 0;
	padding-top: 0;
	padding-bottom: 0;
}

p {
	margin-top: .5em;
	margin-bottom: .5em;
	padding-top: 0;
	padding-bottom: 0;
}

/* set main page container's css properties.. this resides atop the browser window backdrop */
#container {
	width: 960px;
	margin: 0 auto; /* center container on page */
}

#header {
	background: #000000;
	margin: 0;
	padding: 0;

	position: relative; /* to be able to use absolute positioning of the nav */
	width: 100%;
	height: 164px;
}

#header-name {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 277px;
	height: 164px;

	background: url(ipc-name-with-gradient.png);
	z-index: 2;
}

/* >>> navigation button properties */
#nav {
	text-align: center;

	position: absolute;
	right: 0px;
	bottom: 0px;

	margin: 0;
	padding: 0;
}

#nav .nav_button {
	float: left;
	margin: 0 0 0 .25em;

	padding: 3px .25em 3px .25em;

	background: #e8e6d5;

	/* hack.. rounding the tops of the 'tabs' */
	-moz-border-radius-topleft: 5px;
	-moz-border-radius-topright: 5px;
	-webkit-border-radius-topleft: 5px;
	-webkit-border-radius-topright: 5px;
	-khtml-border-radius-topleft: 5px;
	-khtml-border-radius-topright: 5px;
	/*css3*/
	border-radius-topleft: 5px;
	border-radius-topright: 5px;

	border-top: 2px #999 solid;
	border-left: 2px #999 solid;
	border-right: 2px #999 solid;
	border-bottom: 1px #444 solid;
}

#nav a {
	font-weight: normal;
	color: #000000;
	text-decoration: none;

	padding: 0;
	margin: 0;

}

#nav a:hover {
	text-decoration: underline;
}

#nav .nav_button_current {
	background-color: #ffffff;
	border-bottom: none;
	border-bottom: 1px #ffffff solid;
}

#nav .nav_button_current a:hover {
	text-decoration: none;
	cursor: default;
}

/* <<< navigation button properties */


#header-separator {
	width: 100%;
	height: 4px;
	background: white;
	padding: 0;
	margin: 0;
}


/* left column that doesn't change */
#static_column {
	float: left;
	width: 287px; /* 30% - (1px (consumed by border-right) of 960px in %)  for the right border*/

	padding: 0;

	background: #b4c88c url(grapes.jpg) bottom left repeat-x;
	border-right: #5a6446 1px solid;
}

#static_column_container { /* TODO is this container still needed anymore? .. if keeping it, then call it static_column_content and rename .content to dynamic_column_content .. NOTE also that it's used in a expr below for an hr within static content */
	padding: 0 10px 10px 10px;
}

/* right column chat changes with nav bar */
#dynamic_column {
	float: right;
	width: 672px; /* 70% of 960px */

	padding: 0 0 0 0;

	/* IE positions the bg image irrespective of the horizontal position of this floated div .. so we have to at least repeat-x */
	background: white url(wheat.jpg) bottom right repeat-x;
}

/* set properties of all content bodies         TODO.. is class this still needed? */
.content {
	padding: 0 10px 10px 10px;

	text-align: justify;
	color: #000;
}


#footer-separator {
	clear: both;

	width: 100%;
	height: 4px;
	background: white;
	padding: 0;
	margin: 0;
}

#footer {

	margin: 0px;
	padding: 5px;

/*
	background: url(footer.jpg) no-repeat;
*/
	background-color: #000;
	color: #fff;

	font-size: smaller;
	text-align: center;
}

#footer a {
	color: white;
	text-decoration: none;
}

#footer a:hover {
	text-decoration: underline;
}

#footer-address {
	display: inline;
}

#footer-phone {
	color: white;
	display: inline;
	margin-left: 2em;
}

#footer-email {
	color: white;
	display: inline;
	margin-left: 2em;
}




/* HOME CONTENT */




/* LOCATION CONTENT */

#location_address {
/*	margin-bottom: 1em;*/
}

#location_address .mailing_address {
	font-weight: bold;
}

#location_map_container {
	border: #777 2px solid;
	padding: 0px;
	clear: both;
	background: white;
}

#location_map {
	/* necessary for IE not to stretch over the container's border */
	margin-right: 4px; 
}

#location_map_link {
	color: black;
	background: white;
	padding: 0 1em 0 1em;
	font-weight: bold;
	text-decoration: none;
	border: 1px solid black;
}


/* WORSHIP CONTENT */

#worship_content {
}



/* BELIEFS CONTENT */

#beliefs_content {
}



/* CONTACT CONTENT */

#contact_content {
}

#contact_content h3 {
	padding: 0;
	margin: 0 0 .65em 1em;
}

#contact_content p {
	padding: 0;
	margin: 0 0 .65em 2em;
}





.verse_note {
	margin-left: 10px;
	width: 30%;
	padding: .5em;
	float: right;

	border: #cae09d 2px solid;

	/*hack*/
	-moz-border-radius: 15px; 
	-webkit-border-radius: 15px; 
	-khtml-border-radius: 15px; 
	/*css3*/
	border-radius: 15px;

	background: #e8e6d5;
	color: #333;

	font-size: 85%;

	clear: bottom;
}

#static_column hr {
	height: 1px;
	border: 0;
	border-top: 1px #5a6446 solid;
}

/*
#static_column a {
	font-weight: bold;
	text-decoration: underline;
	color: #4e573d;
}
*/

.static_column_link {
	font-weight: bold;
	text-decoration: none;
	color: #000000;
}

.static_column_link:hover {
	text-decoration: underline;
	color: #cc4444;
}

.round-block {
	display: block;

	text-align: left;

	margin: 0 3px 10px 3px;
	padding: .5em 1em .5em 1em;

	background: #e8e6d5;

	border: #999 2px solid;

	/*hack*/
	-moz-border-radius: 15px; 
	-webkit-border-radius: 15px; 
	-khtml-border-radius: 15px; 
	/*css3*/
	border-radius: 15px;
}

/* set bulletin link image properties */
#bulletin-container {
	text-align: center;
}

img.bulletin {
	border: #777 1px solid;
}


.uc_events_list {
	padding: 0;
	padding-left: 1em;
	margin: 0;
}

.uc_event {
	/*white-space: nowrap;*/
	padding:1px;
	margin: 0 0 3px 0;
	font-size: 90%;

	background: url(white-20percent.png);
}


#rr_container {
	margin-top: .75em;
}

.rr_list {
	width: 100%;
}

.rr {
	width: 100%;
	background: url(white-20percent.png);
	margin: 0 0 3px 0;
}

.rr_control {
	width: 25px;
	height: 25px;
	cursor: pointer;
	padding: 0 3px 0 3px;
}

.rr_play_button {
	background: url('play_button_sm.png') no-repeat center;
}

.rr_play_button:hover {
	background: url('play_button_hover_sm.png') no-repeat center;
}

.rr_text {
	font-size: 90%;
	padding: 3px 0 3px 0;
	margin: 0 0 3px 0;
	text-align: left;
}