/*
Reach Our World
A Ministry of Church of the King
Developed October - November 2007
*/

html
{
	/*
	The scroll bar is automatically shown in IE, lets make it the same way in every other browser
	This will stop the content from shifting if the page has to scroll
	*/
	overflow-y:scroll;
}

body
{
	margin:0px;
	padding:0px;
	background-image:url(../images/body-background.jpg);
	background-position:center top;
	background-repeat:no-repeat;
	background-color:#f9e0a7;
	
	/*
	Set the site wide font size and family this can be modified on a tag by tag basis
	*/
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
}

p
{
	padding:0px 0px 10px 0px;
	margin:0px;
	line-height:1.5em;
}

#container
{
	width:940px;
	margin:0px auto;
	padding:0px;
	background-image:url(../images/body-background-y.gif);
	background-repeat:repeat-y;
	position:relative;
}

.page_title
{
	margin:0px;
	padding:15px 0px 0px 35px;
	height:15px;
}
/*
The sub-container is to allow the footers background to fade out while still containing the remaining divs properly
*/
#sub_container
{
	width:900px;
	margin:0px 20px;
	padding:0px;
}

#header
{
	width:900px;
	height:115px;
	margin:0px;
	padding:0px;
	background-image:url(../images/header-background.jpg);
	background-repeat:no-repeat;
	position:relative;
}
	#home_link
	{
		height:78px;
		width:172px;
		position:absolute;
		left: 33px;
		top: 9px;
	}
	
		#home_link a
		{
			height:78px;
			width:172px;
			position:absolute;
		}
	#main_menu
	{
		font-family:Arial, San-serif;
		color:#ffffff;
		width:627px;
		position:absolute;
		left: 276px;
		top: 37px;
	}
	
	#main_menu a
	{
		color:#ffffff;
		text-decoration:none;
	}		
		#main_menu ul
		{
			margin:0px;
			padding:0px;
			list-style-type:none;
			cursor:pointer;
		}
		
			#main_menu ul li
			{
				float:left;
				margin:0px 30px 0px 0px;
				font-size:22px;
				position:relative;
			}
			
				#main_menu ul li ul
				{
					position: absolute;
					left: -5px;
					top: 25px;
					display: none;
					padding:5px;
					background-image:url(../images/dropmenu-background.png);
					border-left:1px solid #1b0b00;
					border-right:1px solid #1b0b00;
					border-bottom:1px solid #1b0b00;
					
				}
			
					#main_menu ul li ul li
					{
						font-family:Arial, Helvetica, sans-serif;
						font-size:13px;
						width:200px;
						padding:0px 0px 5px 0px;
					}
					#main_menu ul li ul li a
					{
						text-decoration:none;
						font-weight:normal;
						color:#ffffff;
					}
					#main_menu ul li ul li a:hover
					{
						font-weight:bold;
					}
	
	#return_button
	{
		width:100px;
		height: 89px;
		position:absolute;
		left: 861px;
		top: 4px;
	}
	
	#return_button img
	{
		border:0px;
	}

#homepage_center
{
	width:900px;
	height:260px;
	margin:0px;
	padding:0px;
	background-image:url(../images/center-background.jpg);
	background-repeat:no-repeat;
	position:relative;
}
#subpage_center
{
	width:900px;
	height:19px;
	margin:0px;
	padding:0px;
	background-image:url(../images/subpage_center.jpg);
	background-repeat:no-repeat;
}

/*
Subpage square container
*/
#subpage_square_container
{
	width:900px;
	height:80px;
	position:absolute;
	overflow:hidden;
}
/*
Here go the colored squares for the homepage, the container will allow us to hide them if we like.
*/
#square_container
{
	width:900px;
	height:228px;
	position:relative;
	overflow:hidden;
}
/*
Here we put what they have in common to keep from duplicating code
*/
#blue_square, #yellow_square, #green_square, #red_square
{
	width:225px;
	height:228px;
	position:absolute;
	cursor:pointer;
}
#blue_square_link, #yellow_square_link, #green_square_link, #red_square_link, #blue_square_link a, #yellow_square_link a, #green_square_link a, #red_square_link a
{
	width:225px;
	height:228px;
	position:absolute;
	cursor:pointer;
	top:0px;
	background-color:#000000;
	filter:alpha(opacity=0);
	-moz-opacity:0;
	opacity:0;
}
#blue_square_link
{
	left:0px;
}
#yellow_square_link
{
	left:225px;
}
#green_square_link
{
	left:450px;
}
#red_square_link
{
	left:675px;
}
#blue_square2, #yellow_square2, #green_square2, #red_square2
{
	width:225px;
	height:228px;
	position:absolute;
	top:0px;
	left:0px;
	/*
	Each browswer handles opacity differently right now... So much for standards compliance
	*/
	filter:alpha(opacity=0);
	-moz-opacity:0;
	opacity:0;
}
#blue_square
{
	top:0px;
	left:0px;
	background-image:url(../images/blue-square.jpg);
	background-repeat:no-repeat;
}
	#learn_title
	{
		width:113px;
		height:44px;
		background-image:url(../images/learn.gif);
		background-repeat:no-repeat;
		position:absolute;
		top: 12px;
		left: 6px;
	}
	#blue_square2
	{
		background-image:url(../images/blue-square2.jpg);
		background-repeat:no-repeat;
	}
#yellow_square
{
	top:0px;
	left:225px;
	background-image:url(../images/yellow-square.jpg);
	background-repeat:no-repeat;
}
	#yellow_square2
	{
		background-image:url(../images/yellow-square2.jpg);
		background-repeat:no-repeat;
	}
	#pray_title
	{
		width:83px;
		height:42px;
		background-image:url(../images/pray.gif);
		background-repeat:no-repeat;
		position:absolute;
		top: 10px;
		left: 8px;
	}

#green_square
{
	top:0px;
	left:450px;
	background-image:url(../images/green-square.jpg);
	background-repeat:no-repeat;
}
	#green_square2
	{
		background-image:url(../images/green-square2.jpg);
		background-repeat:no-repeat;
	}
	#go_title
	{
		width:42px;
		height:31px;
		background-image:url(../images/go.gif);
		background-repeat:no-repeat;
		position:absolute;
		top: 16px;
		left: 11px;
	}

#red_square
{
	top:0px;
	left:675px;
	background-image:url(../images/red-square.jpg);
	background-repeat:no-repeat;
}
	#red_square2
	{
		background-image:url(../images/red-square2.jpg);
		background-repeat:no-repeat;
	}
	#send_title
	{
		width:95px;
		height:52px;
		background-image:url(../images/send.gif);
		background-repeat:no-repeat;
		position:absolute;
		top: 7px;
		left: 6px;
	}

.square_text
{
	width:185px;
	left:20px;
	top:90px;
	position:absolute;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:13px;
	text-align:center;
	color:#FFFFFF;
}

/*
Subpage squares
*/
#sub_blue_square, #sub_yellow_square, #sub_green_square, #sub_red_square
{
	top:-180px;
	width:225px;
	height:228px;
	position:absolute;
	cursor:pointer;
}
#sub_blue_square
{
	left:0px;
	background-image:url(../images/blue-square.gif);
	background-repeat:no-repeat;
}
	#sub_learn_title
	{
	width:113px;
	height:44px;
	background-image:url(../images/learn.gif);
	background-repeat:no-repeat;
	position:absolute;
	top: 182px;
	left: 6px;
	}
#sub_yellow_square
{
	left:225px;
	background-image:url(../images/yellow-square.gif);
	background-repeat:no-repeat;
}
	#sub_pray_title
	{
	width:83px;
	height:42px;
	background-image:url(../images/pray.gif);
	background-repeat:no-repeat;
	position:absolute;
	top: 182px;
	left: 8px;
	}
#sub_green_square
{
	left:450px;
	background-image:url(../images/green-square.gif);
	background-repeat:no-repeat;
}
	#sub_go_title
	{
	width:42px;
	height:31px;
	background-image:url(../images/go.gif);
	background-repeat:no-repeat;
	position:absolute;
	top: 187px;
	left: 11px;
	}
#sub_red_square
{
	left:675px;
	background-image:url(../images/red-square.gif);
	background-repeat:no-repeat;
}
	#sub_send_title
	{
	width:95px;
	height:52px;
	background-image:url(../images/send.gif);
	background-repeat:no-repeat;
	position:absolute;
	top: 182px;
	left: 6px;
	}
/*
Real content time
*/
#content
{
	width:900px;
	padding-top:50px;
}
#content_left
{
	width:645px;
	padding-left:5px;
	float:left;
}
#content_right
{
	width:235px;
	float:right;
	padding-top:10px;
	padding-left:15px;
}
#content_cap
{
	width:900px;
	clear:both;
}
	#content_top
	{
		width:650px;
		height:62px;
		background-image:url(../images/content-top.jpg);
		background-repeat:no-repeat;
	}
	#content_bottom
	{
		width:650px;
		height:60px;
		background-image:url(../images/content-bottom.jpg);
		background-repeat:no-repeat;
	}
	#content_body
	{
		width:580px;
		padding-left:40px;
		padding-right:30px;
		background-image:url(../images/content-body.jpg);
		background-repeat:repeat-y;
	}
/*
the footer gets out of the sub_container and fades out the background.
*/
#footer
{
	width:940px;
	height:100px;
	padding-top:10px;
	background-image:url(../images/footer-background.jpg);
	background-repeat:no-repeat;
	background-position:bottom;
	position:relative;
}
#flickrlink{

}
#flickrlink img{
	position:relative;
	top:10px;
	left:25px;
	border-style: none;	
	padding: 0 0 0 25px;	
}
#docpagelink {
	color:#f9e0a7;
	text-decoration: none;
}
#docpagelink a{
	color:#f9e0a7;
	text-decoration: none;
}
#copyright
{
	width:200px;
	padding-right:30px;
	padding-top:3px;
	float:right;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:10px;
	text-align:right;
	color:#f9e0a7;
}

#footer_logo
{
	width:147px;
	height:22px;
	margin-left:30px;
	background-image:url(../images/footer-logo.gif);
	background-repeat:no-repeat;
	float:left;
}
#flashflickr{
	margin: -5px 0 0 185px;	
}
#flashflickrpage{
	margin: -10px 0 0 220px;	
}
#facebookfan{
	position: absolute;
	top: 80px;
	left: 1295px;	
	border: 7px solid #1b0b00;
	background-color: #4a3823;
	color: #dec66a;
}
#facelinks {
	font-size:10px; 
	padding:0 0 5px 0px;
	margin: -7px 0 0 0;
}
#facebookfan a{
	font-size:10px; 
	padding:0 0 0px 15px;
	color:#fff;
}
/*
----------------------------------------------------------------------------------------------------

Here come our rotating faces for the homepage

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

#face1
{
	height:260px;
	width:411px;
	background-image:url(../images/person-rotate-1.gif);
	background-repeat:no-repeat;
	position:absolute;
	right:0px;
	top:0px;
}
#face2
{
	height:260px;
	width:411px;
	background-image:url(../images/person-rotate-2.gif);
	background-repeat:no-repeat;
	position:absolute;
	right:0px;
	top:0px;
	/*
	Each browswer handles opacity differently right now... So much for standards compliance
	*/
	filter:alpha(opacity=0);
	-moz-opacity:0;
	opacity:0;
}

#face3
{
	height:260px;
	width:411px;
	background-image:url(../images/person-rotate-3.gif);
	background-repeat:no-repeat;
	position:absolute;
	right:0px;
	top:0px;
	/*
	Each browswer handles opacity differently right now... So much for standards compliance
	*/
	filter:alpha(opacity=0);
	-moz-opacity:0;
	opacity:0;
}

#face4
{
	height:260px;
	width:411px;
	background-image:url(../images/person-rotate-4.gif);
	background-repeat:no-repeat;
	position:absolute;
	right:0px;
	top:0px;
	/*
	Each browswer handles opacity differently right now... So much for standards compliance
	*/
	filter:alpha(opacity=0);
	-moz-opacity:0;
	opacity:0;
}

#face5
{
	height:260px;
	width:411px;
	background-image:url(../images/person-rotate-5.gif);
	background-repeat:no-repeat;
	position:absolute;
	right:0px;
	top:0px;
	/*
	Each browswer handles opacity differently right now... So much for standards compliance
	*/
	filter:alpha(opacity=0);
	-moz-opacity:0;
	opacity:0;
}

#face6
{
	height:260px;
	width:411px;
	background-image:url(../images/person-rotate-6.gif);
	background-repeat:no-repeat;
	position:absolute;
	right:0px;
	top:0px;
	/*
	Each browswer handles opacity differently right now... So much for standards compliance
	*/
	filter:alpha(opacity=0);
	-moz-opacity:0;
	opacity:0;
}
/*
----------------------------------------------------------------------------------------------------

Here comes our rotating text

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

#text1
{
	position:absolute;
	left: 0px;
	top: 0px;
	filter:alpha(opacity=0);
	-moz-opacity:0;
	opacity:0;
}

#text2
{
	position:absolute;
	left: 0px;
	top: 0px;
	filter:alpha(opacity=100);
	-moz-opacity:1;
	opacity:1;
}

.center_text
{
	font-size:12px;
}

.sIFR-hasFlash .center_text {
    visibility: hidden;
	font-size:20px;
    /* other CSS properties go here */
}
#docicon{
	width: 44px;
	height: 60px;
	background-image: url('http://www.reachourworld.org/images/Req-Docs-Icon_Active.png');
}

#docicon a:link, #docicon a:visited, #docicon a:active {
text-decoration: none;
display: block;
width: 44px;
height: 60px;
margin: 0;
background-repeat: none;
background-image: url(http://reachourworld.org/images/Req-Docs-Icon_Active.png);
}
#docicon a:hover {
text-decoration: none;
background-image: none;
}