/******************************************************************************
 * Copyright © 2008-2009 Saddleback Church®. All Rights Reserved.
 * Unauthorized use, duplication or distribution is strictly prohibited.
 ******************************************************************************
 *
 *	File:		peace.css
 *	
 *	Purpose:	This file contains the styles to be used in the site.
 *	
 *	Author:		Gerair D. Balian (gbalian@sbcglobal.net)
 * 
 ******************************************************************************
 */

/******************************************************************************
* global css classes
******************************************************************************/

body, html
{
	margin: 0;
	padding: 10px 0px 0px;
	color: #9B9B9B;
	background-color: #bfbfbf;
    font-family: Arial, Helvetica;
}

.page
{
	width: 1045px;
	margin: auto;
	background-color: #ffffff;
	min-height: 620px;
}

/******************************************************************************
* header css classes
******************************************************************************/

.page .header
{
	height: 51px;
	background-image: url('../images/Common/headerBg.png');
}

.page .header .siteLogo
{
	float: left;
	width: 260px;
	height: 51px;
}

.page .header .userOptions
{
	float: right;
	text-transform: uppercase;
	font-size: .825em;
	color: #9d9c9a;
	font-weight: bold;
	margin-top: 10px;
	height: 21px !important;
	padding-right: 13px;
}

.page .header .userOptions ul
{
	padding: 0px;
	margin: 0px;
}

.page .header .userOptions li
{
	display: inline;
	list-style-type: none;
	padding-left: 20px;
	padding-right: 20px;
}

.page .header .userOptions li a
{
	color: #9B9B9B;
	text-decoration: none;
	cursor: pointer;
}

.page .header .userOptions li a:hover
{
	color: #ffffff;
	text-decoration: none;
	cursor: pointer;
}

.page .header .userOptions .navigation
{
	height: 20px !important;
	font-weight: bold;
	font-size: 14px;
	text-transform: capitalize;
}

.page .header .userOptions .navigation ul
{
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
}

.page .header .userOptions .navigation li
{
	display: inline;
	list-style-type: none;
}

.page .header .userOptions .navigation li a
{
	color: #9B9B9B;
	text-decoration: none;
}

.page .header .userOptions .navigation li a.Selected,
.page .header .userOptions .navigation li a.Selected:link,
.page .header .userOptions .navigation li a.Selected:active,
.page .header .userOptions .navigation li a.Selected:visited
{
	color: #000000;
	text-decoration: none;
}

.page .header .userOptions .navigation li a:hover
{
	color: #696969;
}

.page .headerFooter
{
	height: 20px;
	width: 100%;
	float: right;
	text-align: right;
	background-color: #766e61;
}

.page .headerFooter ul
{
	padding-right: 30px;
	margin: 0px;
}

.page .headerFooter li
{
	list-style: none;
	display: inline;
	padding: 2px 2px 2px 2px;
}

.page .headerFooter li a
{
	text-decoration: none;
	color: #d2c6b1;
}

.page .headerFooter li a:hover
{
	color: #ffffff;
}

/******************************************************************************
* page's body css classes
******************************************************************************/

.page .body
{
	clear: both;
	width: 963px;
	margin: auto;
	height: 100%;
}

.page .body .breadCrumbs
{
	height: 20px;
	margin-top: 2px;
	text-transform: uppercase;
	font-size: 11px;
}

.page .body .breadCrumbs a
{
	text-decoration: none;
	color: #006599;
}

.page .body .breadCrumbs a:hover
{
	text-decoration: underline;
}

/******************************************************************************
* footer css classes
******************************************************************************/

.footer
{
	height: 20px;
	margin-top: 16px;
	text-align: center;
	clear: both;
	font-size: 11px;
	font-weight: bold;
	color: #ffffff !important;
}

.footer ul
{
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
}

.footer li
{
	display: inline;
	list-style-type: none;
}

.footer li a
{
	color: #ffffff !important;
	text-decoration: none;
}

.footer li a:hover
{
	text-decoration: underline !important;
}

/******************************************************************************
* home page css classes
******************************************************************************/

.page .body #planOverview
{
	width: 963px;
	height: 484px;
	background-image: url('../images/Common/homeContentBg.png');
	margin-top: 37px;
	color: #ffffff;
	font-family: "helvetica neue", sans-serif !important;
	font-weight: lighter;
}

.page .body #slideShowCanvas
{
	width: 963px;
	height: 484px;
	background-image: url('../images/peaceMap.png');
	margin-top: 37px;
	color: #ffffff;
	font-family: "Helvetica neue", sans-serif !important;
	font-weight: lighter;
}

.page .body #slideShowCanvas #tppSlideShow
{
	float: right;
	width: 591px;
}

.page .body #slideShowCanvas #tppSlideShow #tppSlideFrame
{
	width: 590px;
	height: 451px;
	background-image: url('../images/gallery/slideShowFrame.png');
	background-repeat: no-repeat;
	margin-top: 25px;
}

img.tppSlide
{
	width: 536px;
	height: 330px;
	padding-top: 15px;
	padding-left: 12px;
	border: 0;
}

div.slideText
{
	float: left;
	width: 405px;
	margin-top: 25px;
	margin-left: 45px;
}

span.slideText
{
	color: #352a1d;
	font-family: "Courier New", Courier, monospace !important;
	font-weight: bold !important;
	font-size: .9em;
	cursor: default;
}

div.slideControls
{
	float: left;
	width: 100px;
	margin-top: 40px;
	margin-left: 20px;
}

img.slideButtonPrev
{
	border: 0px;
	cursor: pointer;
}

img.slideButtonNext
{
	border: 0px;
	cursor: pointer;
}

.tppVisionText
{
	width: 348px;
	padding-top: 27px;
	padding-left: 22px;
	float: left;
}

.peaceAcrostic
{
	font-size: 1.18em !important;
}

.visionTextBold
{
	font-weight: bold;
}

p.peaceValues
{
	padding-left: 10px;
	font-size: 1.125em;
}

p.visionText
{
	padding-left: 10px;
	font-size: 0.813em;
}

.page .body #planOverview #tppShowcase
{
	float: right;
	width: 591px;
}

.page .body #planOverview #tppShowcase #tppMotto
{
	height: 15px;
	font-style: italic;
	font-size: 0.875em;
	padding-top: 25px;
	padding-left: 100px;
}

.connectorInvite
{
	font-style: italic;
	font-size: 0.875em;
	font-weight: bold;
	margin-top: 20px;
}

a.getConnectedLink
{
	color: #ffffff !important;
	text-decoration: none;
}

a.getConnectedLink:hover
{
	text-decoration: underline;
}

.page .body #planOverview #tppShowcase #tppStories
{
	height: 344px;
	padding-right: 10px;
}

.storyFrame
{
	float: left;
	background-image: url('../images/pictureFrame.png');
	background-repeat: no-repeat;
	width: 180px;
	height: 180px;
}

.storyFrameHover
{
	position: absolute;
	display: none;
}

.storyFrameHover img
{
	border: 0;
}

.page .body #planOverview #tppShowcase #tppStories #storyFrame_1
{
	margin-top: 100px;
	margin-left: 8px;
}

.page .body #planOverview #tppShowcase #tppStories #storyFrame_2
{
	margin-top: 30px;
	margin-left: 15px;
}

.page .body #planOverview #tppShowcase #tppStories #storyFrame_3
{
	margin-top: 100px;
	margin-left: 15px;
}

.page .body #planOverview #tppShowcase #journalLinkDiv
{
	height: 100px;
	padding-left: 220px;
}

.page .body #planOverview #tppShowcase #journalLinkDiv #journalLinkImg
{
	border: 0px;
}

.page .body #planSteps
{
	padding-top: 20px;
}

.page .body #planSteps #theProblem
{
	padding-left: 5px;
}

.theProblemHover
{
	position: absolute;
	width: 459px;
	height: 312px;
	display: none;
}

.page .body #planSteps #theHope
{
	padding-left: 57px;
}

.theHopeHover
{
	position: absolute;
	width: 440px;
	height: 298px;
	display: none;
}

.page .body #planSteps #theMission
{
	padding-left: 78px;
}

.theMissionHover
{
	position: absolute;
	width: 439px;
	height: 298px;
	display: none;
}

.problemMoreBtn
{
	position: absolute;
	border: 0px;
	top: 250px;
	left: 345px;
}

.hopeMoreBtn
{
	position: absolute;
	border: 0px;
	top: 238px;
	left: 330px;
}

.missionMoreBtn
{
	position: absolute;
	border: 0px;
	top: 238px;
	left: 330px;
}

/******************************************************************************
* dropdown navigation css classes
******************************************************************************/

.dropDownNav
{
	position: absolute;
	min-width: 186px;
	font-family: "Helvetica neue", sans-serif;
	font-weight: lighter;
	font-size: .8em;
	text-transform: uppercase;
	color: #a09f9d;
	border: 1px #4e4d4b solid;
	background-color: #403c3b;
	opacity: 0.90;
	filter: alpha(opacity=90);
	display: none;
	clear: both;
	z-index: 100;
}

.dropDownNav a
{
	color: #a09f9d;
	text-decoration: none;
	background-image: url('../images/ddNavTriangle.png');
	background-position: left;
	background-repeat: no-repeat;
	padding-left: 15px;
}

.dropDownNav a:hover
{
	color: #fffdfe;
	text-decoration: none;
	background-image: url('../images/ddNavTriangleHover.png');
	background-position: left;
	background-repeat: no-repeat;
}

.dropDownNav ul
{
	margin: 0px;
	padding: 0px;
}

.dropDownNav li
{
	list-style-type: none;
	padding-top: 11px;
	padding-left: 14px;
	padding-bottom: 9px;
	border-bottom: 1px #4d4c4a solid;
}

/******************************************************************************
* Login page classes
******************************************************************************/

.loginInstructions
{
	width: 100%;
	height: 154px;
	margin: auto;
	background-image: url('../images/pic_rickwarren.jpg');
	background-position: right;
	background-repeat: no-repeat;
}

.loginInstructions .rickMessage
{
	font-family: "Helvetica", "Verdana", Sans-Serif !important;
	font-size: 1.015em !important;
	color: #7d776b !important;
	padding-left: 30px;
}